/* ============================================================
   Graphite · BASE
   The reset, the type defaults and the small things every page
   gets for free: links, keys, photos, the focus ring, disabled,
   and the animations the rest of the kit borrows.

   Colour, size, space and motion come from tokens.css. Nothing
   in this file is a number of its own.
   Load order: tokens → base → layout → components → responsive
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}

html{
  background:var(--canvas);
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--top-h); /* an anchor lands under the sticky bar, not behind it */
}
body{
  min-height:100vh;
  min-height:100dvh;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:var(--w-reg);
  line-height:var(--lh);
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  font-kerning:normal;
}
::selection{background:var(--ink);color:var(--canvas);}

body :where(div,p,span,li,dd,dt,blockquote,figcaption,label,h1,h2,h3,h4){overflow-wrap:break-word;}

h1,h2,h3,h4{font-size:inherit;font-weight:var(--w-med);line-height:var(--lh-tight);text-wrap:balance;}
p{text-wrap:pretty;}
b,strong{font-weight:var(--w-med);}
ul,ol{list-style:none;}
hr{border:0;border-top:1px solid var(--line);}
table{border-collapse:collapse;border-spacing:0;}

a{color:inherit;text-decoration:none;}
img,svg,video,canvas{display:block;max-width:100%;}
img{height:auto;}

button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;}
button{background:none;border:0;cursor:pointer;text-align:inherit;}
textarea{resize:vertical;}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--ink);}
a,button,[role="button"],label,summary{-webkit-tap-highlight-color:transparent;}
a,button,[role="button"],input,select,textarea,summary{touch-action:manipulation;}

/* ---- FOCUS: one ring for everything you can reach with a key ---- */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

/* ---- DISABLED: faded and not allowed, the same everywhere ---- */
[disabled],[aria-disabled="true"]{opacity:.4;cursor:not-allowed;}

/* ---- SMALL THINGS ---- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.link{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--line-2);
  cursor:pointer;
  transition:text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link:hover{text-decoration-color:var(--ink);}

/* A photo gets a hairline edge so it holds its shape on any ground. Mixed
   from ink, so it follows the theme with no rule of its own. */
img.photo{outline:1px solid color-mix(in srgb, var(--ink) 10%, transparent);outline-offset:-1px;}

.kbd{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 var(--s-1);
  border-radius:var(--r-sm);
  background:var(--raise);box-shadow:var(--shadow-pill);
  font-size:var(--fs-tag);color:var(--ink-3);
}

/* The page column for an app: 1200px, centred, with a gutter that keeps clear
   of a phone's notch and rounded corners. */
.wrap{
  width:100%;max-width:1200px;margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}

/* ---- ANIMATIONS the components borrow ---- */
@keyframes gr-fade{from{opacity:0;}to{opacity:1;}}
@keyframes gr-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes gr-drop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes gr-drop-up{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@keyframes gr-spin{to{transform:rotate(360deg);}}
@keyframes gr-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes gr-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

/* ---- REDUCED MOTION: everything still works, nothing moves ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}