/* =========================================================
   Base: reset, typography, focus, scrollbars, motion
   ========================================================= */

*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scrollbar-color:var(--line-strong) transparent;
}

html, body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  font-feature-settings:"ss01", "cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

h1, h2, h3, h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
  color:var(--text);
}
/* card-level titles stay lighter so they don't compete with page titles */
h3, h4{ font-weight:500; letter-spacing:-.012em; }

p{ margin:0; }

img, svg{ display:block; max-width:100%; }

button, input, textarea, select{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

/* Saved logins: the browser paints its own blue-grey fill on autofilled fields.
   Holding the background transition off keeps the field's own colours. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition:background-color 600000s 0s, color 600000s 0s;
}
input:autofill{ background:transparent; filter:none; }

button{
  cursor:pointer;
  background:none;
  border:0;
  padding:0;
}

button:disabled{ cursor:not-allowed; }

a{ color:var(--accent-text); text-decoration:none; }

ol, ul{ margin:0; padding:0; }

::selection{ background:var(--accent-wash-strong); color:var(--text); }

:focus{ outline:none; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

.mono{
  font-family:var(--font-mono);
  font-feature-settings:"zero", "tnum";
  letter-spacing:0;
}

.muted{ color:var(--text-3); }

.hidden,
[hidden]{ display:none !important; }

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ---- icons ---- */
.i{
  width:1.125em;
  height:1.125em;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle;
}

[data-icon]{ display:inline-flex; }

/* ---- scrollbars ---- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:10px;
  border:3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{ background:var(--line-strong); }

/* ---- shared motion ---- */
@keyframes fade-up{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}

@keyframes fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes scale-in{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to{ opacity:1; transform:none; }
}

@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes flash{
  0%, 100%{ background:transparent; }
  30%{ background:var(--accent-wash-strong); }
}

.view-enter > *{
  animation:fade-up var(--dur-3) var(--ease-out) both;
}

.stagger > *{
  animation:fade-up var(--dur-3) var(--ease-out) both;
  animation-delay:calc(min(var(--i, 0), 10) * 35ms);
}

/* Only stagger when the whole view is entering. */
.main-inner:not(.view-enter) .stagger > *{ animation:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0ms !important;
    animation-delay:0ms !important;
    transition-duration:0ms !important;
    scroll-behavior:auto !important;
  }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}