/* Reset, type scale, app frame. Migration: replaced by Tailwind preflight + main.css. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--t-body); line-height:var(--t-body-lh);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .2s ease,color .2s ease;
}

/* ---- type scale ------------------------------------------------------
   Every size is paired with its line-height. Setting one without the other is
   how vertical rhythm quietly falls apart across a dozen screens.          */
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;text-wrap:balance}
h1{font-size:var(--t-headline);line-height:var(--t-headline-lh);letter-spacing:-.02em}
h2{font-size:var(--t-title-lg);line-height:var(--t-title-lg-lh);letter-spacing:-.015em}
h3,h4{font-size:var(--t-title);line-height:var(--t-title-lh);letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
input,select{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* M3 focus: a ring, never a colour change — colour is reserved for meaning. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- state layers ----------------------------------------------------
   An interactive surface tints on hover instead of swapping colour. One rule
   for every control, and it works on any background in either theme.       */
.state{position:relative;isolation:isolate}
.state::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--state-ink);opacity:0;transition:opacity .15s ease;z-index:-1;
}
.state:hover::after{opacity:var(--state-hover)}
.state:active::after{opacity:var(--state-press)}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";letter-spacing:-.01em}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;
  letter-spacing:-.01em}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.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}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row-tight{display:flex;align-items:center;gap:var(--sp-2)}
.spacer{margin-left:auto}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp-6)}
.hidden{display:none!important}

/* ---- app shell ------------------------------------------------------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--surface);position:sticky;top:0;z-index:30;
  box-shadow:0 1px 0 var(--rule-2)}
.topbar .wrap{display:flex;align-items:center;gap:var(--sp-2);height:64px}
.brand{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:16px;padding-right:var(--sp-6);color:var(--indigo);white-space:nowrap}
:root[data-theme="dark"] .brand{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand{color:var(--ink)}}

.nav{display:flex;align-items:center;gap:var(--sp-1);height:100%}
.nav a{
  display:flex;align-items:center;height:36px;padding:0 var(--sp-4);
  color:var(--ink-2);font-size:var(--t-label);line-height:var(--t-label-lh);
  font-weight:500;letter-spacing:.01em;
  border-radius:var(--r-pill);text-decoration:none;transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:var(--ink);text-decoration:none;
  background:color-mix(in srgb,var(--state-ink) 6%,transparent)}
/* M3 marks the active destination with a filled pill, not an underline. */
.nav a.active{color:var(--accent);font-weight:600;background:var(--accent-soft)}
.badge-count{
  display:inline-block;margin-left:var(--sp-2);background:#B3261E;color:#fff;
  border-radius:var(--r-pill);padding:0 7px;
  font-size:var(--t-label-sm);font-weight:700;line-height:18px;
}
:root[data-theme="dark"] .badge-count{background:#F2938C;color:#3B0908}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .badge-count{background:#F2938C;color:#3B0908}}

main{flex:1;padding:var(--sp-6) 0 var(--sp-8)}
.page-head{display:flex;align-items:flex-start;gap:var(--sp-4);
  margin-bottom:var(--sp-6);flex-wrap:wrap}
.page-head .sub{color:var(--ink-3);font-size:var(--t-body);line-height:var(--t-body-lh);
  margin-top:var(--sp-1)}

/* ---- narrow viewports -------------------------------------------------
   The clerk is at a desk, but a Teamleiter checks the exception count from a
   phone, so the shell has to survive 390px: identity + search on one row, the
   nav scrolling on its own below. */
@media (max-width:860px){
  .wrap{padding:0 var(--sp-4)}
  .topbar .wrap{height:auto;flex-wrap:wrap;padding-top:var(--sp-2);
    padding-bottom:var(--sp-2);gap:var(--sp-2)}
  .brand{padding:0;font-size:15px}
  .brand span{display:none}                  /* keep the app name, drop the suffix */
  .nav{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:0 var(--sp-3);white-space:nowrap}
  .searchbar{order:2;flex:1;min-width:0;max-width:none}
  .searchbar .kbd{display:none}              /* no keyboard to hint at */
  main{padding-top:var(--sp-5)}
  h1{font-size:22px;line-height:30px}
}