/* =====================================================================
   KORA - design system
   Cream, tan and roast-brown - the palette handed back for this pass.
   Warm cream ground, white cards, a roasted-brown accent used for every
   action, and a deep brown chrome instead of a colorless one. Plus
   Jakarta Sans for the interface, IBM Plex Mono wherever digits have to
   line up. Motion is now part of the system, not an afterthought - see
   the ANIMATION section below.
   ===================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  color-scheme:light;
  /* Light is the house default. The ground was lifted a shade for the
     app shell: cards now float on it instead of sitting in a tinted
     page, which is what separates an app surface from a web page. */
  --ground:#f7f2ea;
  --surface:#ffffff;
  --surface-2:#f1e9dd;
  --surface-3:#e6dac7;
  --ink:#2b1d11;
  --ink-2:#5a4630;
  --ink-3:#8a7359;
  --rule:#e8dccb;
  --rule-2:#d6c3a8;

  --accent:#8b6b4c;
  --accent-2:#6e5138;
  --accent-ink:#ffffff;
  --accent-soft:#e8d9c6;

  --good:#3f7d45;   --good-soft:#deeedd;
  --warn:#a67a0d;   --warn-soft:#f5e7c6;
  --bad:#b23a2e;    --bad-soft:#f8deda;
  --info:#3d6ea6;   --info-soft:#dce9f5;

  --sidebar:#2b1d12;
  --sidebar-2:#31200f;
  --sidebar-ink:#ebddc9;
  --sidebar-ink-2:#a38f73;
  --sidebar-hover:#3e2b1b;

  --shadow-1:0 1px 2px rgba(46,32,19,.08);
  --shadow-2:0 2px 4px rgba(46,32,19,.06),0 12px 28px -16px rgba(46,32,19,.32);
  --shadow-3:0 24px 60px -24px rgba(46,32,19,.5);

  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px;
  --sidebar-w:244px;
  /* The interface font and the monospace are the DEVICE'S OWN. They are
     already installed, cost no bytes and no request, and render on the
     first paint instead of after a round trip - which on a slow
     connection is the whole difference. Only Fraunces is fetched, for
     headings, and even that is swapped in late rather than waited for. */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ground:#14100a;
  --surface:#1f1811;
  --surface-2:#261d14;
  --surface-3:#32261a;
  --ink:#f1e6d8;
  --ink-2:#cbb89e;
  --ink-3:#93816a;
  --rule:#362a1c;
  --rule-2:#473524;

  --accent:#c79a6c;
  --accent-2:#d9b183;
  --accent-ink:#241804;
  --accent-soft:#3d2c1b;

  --good:#6fc17a;   --good-soft:#1e3320;
  --warn:#dcb25c;   --warn-soft:#332913;
  --bad:#e28a7c;    --bad-soft:#33201b;
  --info:#86b2dd;   --info-soft:#1a2c3c;

  --sidebar:#0f0b07;
  --sidebar-2:#120d08;
  --sidebar-ink:#dccbb2;
  --sidebar-ink-2:#7c6a52;
  --sidebar-hover:#1c140d;

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 2px 4px rgba(0,0,0,.4),0 12px 28px -16px rgba(0,0,0,.85);
  --shadow-3:0 24px 60px -24px rgba(0,0,0,1);
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
@keyframes koraRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes koraPop{0%{opacity:0;transform:scale(.92)}70%{transform:scale(1.015)}100%{opacity:1;transform:scale(1)}}
@keyframes koraFade{from{opacity:0}to{opacity:1}}
@keyframes koraPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes koraSpin{to{transform:rotate(360deg)}}
@keyframes koraRipple{to{transform:scale(3.4);opacity:0}}
@keyframes koraCheckDraw{to{stroke-dashoffset:0}}
@keyframes koraShimmer{from{background-position:-200px 0}to{background-position:200px 0}}

.page > *{animation:koraRise .5s var(--ease-out) both}
.page > *:nth-child(1){animation-delay:.02s}
.page > *:nth-child(2){animation-delay:.06s}
.page > *:nth-child(3){animation-delay:.1s}
.page > *:nth-child(4){animation-delay:.14s}
.page > *:nth-child(n+5){animation-delay:.17s}
.grid > *{animation:koraPop .45s var(--ease-spring) both}
.grid > *:nth-child(1){animation-delay:.03s} .grid > *:nth-child(2){animation-delay:.07s}
.grid > *:nth-child(3){animation-delay:.11s} .grid > *:nth-child(4){animation-delay:.15s}
.grid > *:nth-child(5){animation-delay:.19s} .grid > *:nth-child(n+6){animation-delay:.22s}
table.tbl tbody tr{animation:koraFade .3s var(--ease-out) both}
table.tbl tbody tr:nth-child(1){animation-delay:.02s} table.tbl tbody tr:nth-child(2){animation-delay:.04s}
table.tbl tbody tr:nth-child(3){animation-delay:.06s} table.tbl tbody tr:nth-child(4){animation-delay:.08s}
table.tbl tbody tr:nth-child(5){animation-delay:.1s}  table.tbl tbody tr:nth-child(6){animation-delay:.12s}
table.tbl tbody tr:nth-child(n+7){animation-delay:.14s}

*{box-sizing:border-box}
/* The browser's own rule for [hidden] is display:none at the very bottom
   of the cascade, so ANY component rule that sets a display - a flex row,
   a grid - silently beats it and the "hidden" panel stays on screen. Every
   panel in KoraOps is opened and closed by toggling .hidden in JS, so this
   one line is what makes hidden actually mean hidden, everywhere. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p{margin:0 0 12px}
code,.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
code{background:var(--surface-3);padding:1px 5px;border-radius:4px;font-size:.86em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* =====================================================================
   APP SHELL
   The sidebar is gone. KoraOps now wears one slim top bar with grouped
   dropdown menus, a department switcher that is visible on every screen,
   and - on a phone - a bottom tab bar under the thumb instead of a
   hamburger drawer. That is the whole difference between "a web system"
   and "an app", and it is mostly this file.
   ===================================================================== */

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:0 0 var(--r-m) 0;font-weight:700;font-size:13px;
}
.skip:focus{left:0}

body.app{padding-bottom:0}

/* ---------------------------------------------------------------- top bar */
.appbar{
  position:sticky;top:0;z-index:120;
  display:flex;align-items:center;gap:8px;
  padding:0 16px;height:60px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top);
}
.ab-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:none;
  padding:4px 6px 4px 0;border-radius:var(--r-m)}
.ab-brand:hover{text-decoration:none}
.ab-brand img{width:30px;height:30px;object-fit:contain;flex:none;
  filter:drop-shadow(0 2px 6px rgba(46,32,19,.28))}
.ab-mark{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;font-size:14px;
}
.ab-nm{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:-.015em;white-space:nowrap}

/* Every control on the right of the bar is the SAME height, so the
   cluster reads as one row of controls rather than four things that
   happen to sit next to each other. Change --ab-h and they all move
   together - that single number is what keeps the row aligned. */
.ab-right{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none;--ab-h:36px}
/* The one button on the bar that starts work, so it is built like one:
   a real primary button with room around the word - but the same height
   as its neighbours, not a taller pill towering over them. */
.ab-new{
  display:flex;align-items:center;gap:7px;height:var(--ab-h);padding:0 13px 0 6px;
  border:1px solid var(--accent);border-radius:99px;cursor:pointer;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);font:inherit;font-size:13.5px;font-weight:700;
  letter-spacing:-.005em;white-space:nowrap;
  box-shadow:0 1px 2px rgba(46,32,19,.16),0 5px 14px -9px color-mix(in srgb,var(--accent) 65%,transparent);
  transition:transform .13s var(--ease-spring),box-shadow .13s ease,filter .13s ease;
}
.ab-new:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(46,32,19,.18),0 9px 22px -11px color-mix(in srgb,var(--accent) 75%,transparent)}
.ab-new:active{transform:translateY(0) scale(.97)}
.ab-new[aria-expanded="true"]{filter:brightness(.96)}
.ab-new-ic{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent-ink) 20%,transparent);font-size:15px;
}
/* Its own class, never the shared .lbl form-label utility: that one is
   a block with a bottom margin and a smaller size, which pushed this
   word off the button's centre line and shrank it. */
.ab-new-l{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.005em;line-height:1}
.ab-new .nv-caret{opacity:.7;margin-left:-2px}
.ab-new[aria-expanded="true"] .nv-caret{transform:rotate(180deg)}
.ab-wait{
  display:flex;align-items:center;gap:5px;height:var(--ab-h,34px);padding:0 11px;border-radius:99px;
  background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad);
  font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.ab-wait:hover{text-decoration:none;filter:brightness(.97)}
.ab-wait .ic-glyph{font-size:15px}
.ab-me{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;line-height:0}
.ab-me:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ab-me .avatar{width:var(--ab-h,32px);height:var(--ab-h,32px);font-size:13.5px;
  background:var(--accent);color:var(--accent-ink)}
.avatar{
  width:30px;height:30px;border-radius:50%;flex:none;background:var(--surface-3);
  display:grid;place-items:center;color:var(--ink);font-weight:700;font-size:12px;
}
/* One button, two glyphs: show the destination, not the current state. */
html[data-theme="dark"] .th-l{display:none}
html:not([data-theme="dark"]) .th-d{display:none}

/* ------------------------------------------------------------ menu system
   What is left here is the POPOVER: the department switcher, the New
   menu and the account menu, which are still dropdowns off the top bar.
   The main navigation moved down the left - see SIDEBAR below. */
.nv-item{position:relative;display:flex}
.nv-caret{opacity:.55;transition:transform .16s var(--ease-out)}

.nv-pop{
  position:absolute;top:calc(100% + 7px);left:0;z-index:130;min-width:262px;max-width:min(340px,calc(100vw - 24px));
  max-height:min(74vh,620px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  box-shadow:var(--shadow-3);padding:6px;
  animation:koraMenuIn .16s var(--ease-out) both;
}
/* NOT ".right" - that is the global text-align utility, and using it
   here right-aligned every line inside the New and account menus. */
.nv-pop.pop-right{left:auto;right:0}
.nv-pop.wide{min-width:298px}
@keyframes koraMenuIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}

.pop-head{
  padding:9px 11px 8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}
.pop-head span{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--ink-3);margin-top:2px;opacity:.85}
.pop-rule{height:1px;background:var(--rule);margin:5px 4px}

.mi{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;border-radius:var(--r-m);border:none;background:none;
  color:var(--ink);font:inherit;font-size:13.5px;text-decoration:none;cursor:pointer;
  transition:background .12s ease;
}
.mi:hover{background:var(--surface-2);text-decoration:none}
.mi.on{background:var(--accent-soft)}
.mi.on .mi-ic{background:var(--accent);color:var(--accent-ink)}
.mi.quiet{color:var(--ink-2)}
.mi.danger{color:var(--bad)}
.mi.danger .mi-ic{background:var(--bad-soft);color:var(--bad)}
.mi-ic{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);font-size:17px;line-height:1;
}
.mi-tx{flex:1;min-width:0}
.mi-tx b{display:block;font-weight:600;line-height:1.25}
.mi-tx span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.3;margin-top:1px}
.mi-n{
  flex:none;background:var(--bad);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:99px;
}
.mi-tick{flex:none;color:var(--accent-2);font-size:18px;line-height:1}
.scope-form{display:contents}

/* ------------------------------------------------------- department chip */
.scope-item{flex:none}
.scope-chip{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 11px 0 10px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--rule-2);border-radius:99px;
  color:var(--ink);font:inherit;max-width:230px;
  transition:border-color .13s ease,background .13s ease;
}
.scope-chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.scope-chip[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft)}
.sc-dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
body.scope-all .sc-dot{background:var(--info);box-shadow:0 0 0 3px color-mix(in srgb,var(--info) 22%,transparent)}
.sc-tx{min-width:0;text-align:left;line-height:1.15}
.sc-k{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.sc-v{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}

/* --------------------------------------------------- the scope, said once */
.scope-strip{
  position:sticky;top:60px;z-index:100;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 20px;font-size:12.5px;color:var(--ink-2);
  background:color-mix(in srgb,var(--accent-soft) 70%,var(--surface));
  border-bottom:1px solid var(--rule);
}
.scope-strip.all{background:color-mix(in srgb,var(--info-soft) 65%,var(--surface))}
.scope-strip b{color:var(--ink);font-weight:700}
.scope-strip span{color:var(--ink-3)}
.scope-strip .lnk{
  margin-left:auto;background:none;border:none;color:var(--accent-2);font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;
}
.scope-strip .lnk:hover{color:var(--ink)}

/* ------------------------------------------------------------- page canvas */
.page{padding:24px 20px 40px;max-width:1420px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:25px;font-weight:800;letter-spacing:-.025em;font-family:var(--font-display)}
.page-head .sub{color:var(--ink-3);font-size:13.5px;margin-top:4px}
.page-head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------------- the bar fits, always
   A breakpoint is a guess about how wide text will be. Font size, zoom,
   a longer department name or another language all move the real answer,
   and when the guess is wrong something in the bar quietly slides
   underneath something else - visible, but not clickable, which is the
   worst way for a control to fail.
   So kora.js measures the bar after layout and, if it does not fit, takes
   things away in order: the brand word, the waiting pill, then the
   department name down to a stub. Every control stays reachable.
   The main menu is no longer in this bar at all, which is most of why
   the bar now fits in the first place. */
body.bar-tight .ab-nm{display:none}
body.bar-tight .ab-wait{display:none}
body.bar-tight .sc-v{max-width:104px}

/* ================================================================ SIDEBAR
   The main navigation, on any screen wide enough to hold it.

   A row of dropdowns across the top hid four fifths of the system behind
   a click and spent the one thing a laptop has least of - height at the
   top of the page. Down the left, every page this person may open is on
   screen at once, the group they are working in is obvious, and the page
   they are on is marked without opening anything.

   Below 1101px this whole column is display:none and the bottom tab bar
   takes over. One navigation per shape of screen, never two at once.
   ======================================================================= */
.sidenav{display:none}

@media (min-width:1101px){
  /* One number sets the column width and the space the page leaves for
     it. Narrowing the menu changes only this, and everything follows. */
  :root{--sn-w:236px}
  body.sn-min{--sn-w:68px}
  body.app{padding-left:var(--sn-w)}

  /* Full height, from the very top: the brand sits at the head of the
     column and the top bar starts where the column ends, so there is no
     empty corner above the menu. */
  .sidenav{
    position:fixed;left:0;top:0;bottom:0;width:var(--sn-w);z-index:130;
    display:flex;flex-direction:column;
    background:var(--surface);border-right:1px solid var(--rule);
    transition:width .16s var(--ease-out);
  }
  .ab-brand{display:none}          /* it lives in the sidebar up here */

  .sn-brand{
    display:flex;align-items:center;gap:9px;height:60px;flex:none;
    padding:0 12px;border-bottom:1px solid var(--rule);
    color:var(--ink);text-decoration:none;
  }
  .sn-brand:hover{text-decoration:none}
  .sn-brand img{width:30px;height:30px;object-fit:contain;flex:none}
  .sn-brand .sn-mk{
    width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
    background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:15px;
  }
  .sn-brand b{font-family:var(--font-display);font-weight:700;font-size:16.5px;
    letter-spacing:-.015em;white-space:nowrap}
  body.sn-min .sn-brand{justify-content:center;padding:0}
  body.sn-min .sn-brand b{display:none}

  .sn-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 6px;
    scrollbar-width:thin}
  .sn-group{margin-top:10px}
  .sn-head{
    display:flex;align-items:center;gap:6px;width:100%;padding:5px 10px 5px 11px;border:0;
    background:none;color:var(--ink-3);font:inherit;font-size:10.5px;font-weight:800;
    letter-spacing:.07em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-s);
  }
  .sn-head:hover{color:var(--ink-2);background:var(--surface-2)}
  .sn-head .sn-caret{margin-left:auto;opacity:.6;transition:transform .16s var(--ease-out)}
  .sn-head[aria-expanded="false"] .sn-caret{transform:rotate(-90deg)}
  /* The group closes by collapsing its own box, so the groups below it
     move up rather than the page jumping.
     The links sit inside ONE inner box on purpose: the 0fr trick sizes
     the first grid row, so a group with four links straight in the grid
     would only ever collapse the first of them. */
  .sn-kids{display:grid;grid-template-rows:1fr;transition:grid-template-rows .16s var(--ease-out)}
  .sn-kids-in{min-height:0;overflow:hidden}
  .sn-head[aria-expanded="false"] + .sn-kids{grid-template-rows:0fr}

  .sn-link,.sn-fold{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:0 10px;height:38px;border:0;background:none;cursor:pointer;
    color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;
    border-radius:var(--r-m);text-decoration:none;white-space:nowrap;
    transition:background .12s ease,color .12s ease;
  }
  .sn-link:hover,.sn-fold:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
  .sn-link.on{background:var(--accent-soft);color:var(--accent-2);font-weight:700}
  .sn-link.on .sn-ic{color:var(--accent-2)}
  .sn-ic{width:20px;flex:none;display:grid;place-items:center;font-size:17px;line-height:1;color:var(--ink-3)}
  .sn-l{overflow:hidden;text-overflow:ellipsis}
  .sn-fold{
    flex:none;margin:6px 10px calc(10px + env(safe-area-inset-bottom));width:auto;
    color:var(--ink-3);font-size:12.5px;font-weight:600;border-top:1px solid var(--rule);
    border-radius:0;padding-top:10px;height:auto;padding-bottom:4px;
  }
  .sn-fold:hover{background:none;color:var(--ink)}

  /* --------------------------------------------------- narrowed to icons
     The labels go, the targets do not: every row keeps its full height
     and the whole width stays clickable, and the browser's own tooltip
     carries the name. */
  body.sn-min .sn-l{display:none}
  body.sn-min .sn-head{justify-content:center;padding:4px 0;pointer-events:none}
  body.sn-min .sn-head .sn-caret{display:none}
  body.sn-min .sn-head::after{
    content:"";display:block;width:18px;height:1px;background:var(--rule-2)}
  body.sn-min .sn-head[aria-expanded="false"] + .sn-kids{grid-template-rows:1fr;overflow:visible}
  body.sn-min .sn-link,body.sn-min .sn-fold{justify-content:center;padding:0;gap:0}
  body.sn-min .sn-fold{margin:6px 8px calc(10px + env(safe-area-inset-bottom))}
  body.sn-min .sn-scroll{padding:12px 8px 6px}
}

/* A sidebar is a navigation aid, not part of the document - it has no
   business on paper, and neither has the offset it creates. */
@media print{
  .sidenav{display:none !important}
  body.app{padding-left:0 !important}
}

/* -------------------------------------------------------- phone tab bar */
.tabbar{display:none}
@media (max-width:1100px){
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    background:color-mix(in srgb,var(--surface) 96%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--rule);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px -14px rgba(46,32,19,.5);
  }
  .tabbar a,.tabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:5px 2px;border:none;background:none;color:var(--ink-3);font:inherit;font-size:10px;
    font-weight:700;text-decoration:none;cursor:pointer;border-radius:var(--r-m);
    min-height:48px;transition:color .13s ease;
  }
  .tabbar a.on,.tabbar button.on{color:var(--accent-2)}
  .tabbar .tb-ic{font-size:21px;line-height:1;display:grid;place-items:center;height:24px;
    transition:transform .18s var(--ease-spring)}
  .tabbar a.on .tb-ic,.tabbar button.on .tb-ic{transform:translateY(-1px) scale(1.08)}
  .tabbar a:active .tb-ic,.tabbar button:active .tb-ic{transform:scale(.86)}
  .tb-l{letter-spacing:.01em}
  body.app{padding-bottom:64px}
}

/* --------------------------------------------------------------- sheet */
.sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(26,17,9,.5);
  animation:koraFade .18s ease both;backdrop-filter:blur(2px)}
.sheet-card{
  position:relative;width:100%;max-height:86dvh;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-3);animation:koraSheetIn .24s var(--ease-out) both;
}
@keyframes koraSheetIn{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:38px;height:4px;border-radius:99px;background:var(--rule-2);margin:6px auto 14px;cursor:pointer}
.sheet-scope{
  display:flex;align-items:center;gap:10px;width:100%;margin-bottom:14px;cursor:pointer;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-l);
  padding:11px 13px;color:var(--ink);font:inherit;text-align:left;
}
.sheet-scope .k{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800}
.sheet-scope b{display:block;font-size:14px;font-weight:700}
.sheet-scope .ch{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent-2);
  text-decoration:underline;text-underline-offset:2px}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px}
/* The sheet is grouped the same way the sidebar is - Operations, Store,
   Sales - so somebody who uses both learns one arrangement, not two. */
.sheet-sec{
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 2px 7px;
}
.sheet-grid .st.wide{
  grid-column:1 / -1;flex-direction:row;justify-content:flex-start;gap:11px;
  padding:9px 12px;font-size:13px;text-align:left;
}
.sheet-grid .st{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  padding:10px 4px;border-radius:var(--r-m);background:var(--surface-2);
  color:var(--ink);text-decoration:none;font-size:10.5px;font-weight:600;text-align:center;line-height:1.25;
  border:1px solid transparent;transition:transform .13s var(--ease-spring),background .13s ease;
}
.sheet-grid .st:hover{background:var(--surface-3);text-decoration:none}
.sheet-grid .st:active{transform:scale(.94)}
.sheet-grid .st.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}
.st-ic{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);color:var(--ink-2);font-size:17px;line-height:1;box-shadow:var(--shadow-1);
}
.sheet-grid .st.on .st-ic{background:var(--accent);color:var(--accent-ink)}

/* ------------------------------------------------------ menus on a phone */
@media (max-width:1100px){
  .appbar{height:56px;padding:0 12px;padding-top:env(safe-area-inset-top);gap:6px}
  /* One number moves the whole right-hand cluster to thumb size. 40px is
     the smallest a target should be on a phone - the 36px desktop size
     was being missed. */
  .ab-right{--ab-h:40px}
  .nv{display:none}
  .ab-nm{display:none}
  .scope-strip{top:56px;padding:6px 14px;font-size:12px}
  .scope-strip span{display:none}
  .scope-strip .lnk{margin-left:auto}
  /* scope-item was flex:none, so at 320px the chip held its full width
     and pushed the avatar clean off the right-hand edge of the screen.
     It is the one thing in the bar that can afford to give ground. */
  .scope-item{flex:1 1 auto;min-width:0}
  .scope-chip{max-width:none;flex:1;min-width:0;height:40px;padding:0 9px 0 8px;gap:6px}
  .sc-v{max-width:none}
  .ab-new-l,.ab-new .nv-caret{display:none}
  .ab-new{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .ab-new-ic{background:none;width:auto;height:auto;font-size:19px}
  .ab-wait{display:none}
  /* Thumbs, not cursors. 40px is the smallest a target should be on a
     phone, and the old 36px squares were being missed. */
  .icon-btn{width:40px;height:40px}
  .ab-me .avatar{width:36px;height:36px;font-size:14px}
  /* The theme switch moves into the account menu on a phone - one less
     thing crowding a 360px bar, and it was the least-pressed control
     up there. */
  .ab-theme{display:none}
  .ab-more{display:none !important}   /* the tab bar carries More here */

  /* ------------------------------------------------------------------
     A menu on a phone is a sheet from the bottom of the SCREEN.
     Both rules below have to be here, and one without the other is
     what broke it:
       .nv-pop      styles the panel wherever it currently sits;
       .nv-pop.nv-float is the panel AFTER kora.js has moved it to
                    <body>, which is the only place position:fixed can
                    mean the screen - inside the top bar, whose
                    backdrop-filter makes it a containing block, fixed
                    means "the top bar", and the panel rendered off-
                    screen underneath the scrim.
     ------------------------------------------------------------------ */
  .nv-pop{
    position:fixed;left:10px;right:10px;top:auto;bottom:10px;min-width:0;max-width:none;
    border-radius:var(--r-xl);max-height:70dvh;overflow-y:auto;padding:8px;
    animation:koraSheetIn .22s var(--ease-out) both;
  }
  .nv-pop.pop-right{left:10px;right:10px}
  .nv-pop.nv-float{
    z-index:250;
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  }
  body.menu-open::before{
    content:"";position:fixed;inset:0;z-index:240;background:rgba(26,17,9,.42);
    animation:koraFade .16s ease both;
  }
  /* A menu row is a tap target too. */
  .mi{padding:11px 11px;min-height:52px}
  .mi-ic{width:34px;height:34px}
}

/* The panel only ever floats on a phone, but if a stylesheet or a stray
   class ever leaves nv-float on at desktop width, it must still land
   somewhere sensible rather than nowhere. */
@media (min-width:1101px){
  .nv-pop.nv-float{position:fixed;top:64px;right:16px;left:auto;bottom:auto;z-index:250}
}

/* .brand-mark is still used by the sign-in page's story panel. */
.brand-mark{
  width:32px;height:32px;border-radius:8px;flex:none;
  background:linear-gradient(150deg,var(--accent) 0%,var(--accent-2) 100%);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.02em;
  box-shadow:0 4px 12px -4px rgba(139,107,76,.6);
}
.brand-mark.brand-logo{
  width:36px;height:36px;object-fit:contain;background:none;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

/* Icons are inline SVG now, not a web font. They size off font-size just
   as the glyphs did - width and height are 1em - so every rule in this
   file that sized an icon by setting font-size still works untouched. */
.ic-glyph{
  display:inline-block;width:1em;height:1em;flex:none;
  vertical-align:-.14em;overflow:visible;
}

.ab-right .icon-btn,.ab-right .ab-more{height:var(--ab-h)}
.ab-right .icon-btn{width:var(--ab-h)}
.icon-btn{
  width:36px;height:36px;border:1px solid var(--rule);background:var(--surface);border-radius:var(--r-m);
  display:grid;place-items:center;color:var(--ink-2);cursor:pointer;position:relative;font-size:16px;line-height:1;
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn .dot{
  position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--bad);border:1.5px solid var(--surface);animation:koraPulse 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------- cards */
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);margin-bottom:18px;overflow:hidden;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;
}
.card:hover{box-shadow:var(--shadow-2)}
.card-head{
  padding:14px 18px;border-bottom:1px solid var(--rule);display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;background:linear-gradient(var(--surface-2),var(--surface-2));
}
.card-head h2{font-size:14.5px;letter-spacing:-.01em}
.card-head h2::before{
  content:"";display:inline-block;width:4px;height:14px;border-radius:2px;background:var(--accent);
  margin-right:9px;vertical-align:-2px;
}
.card-head .sub{font-size:12.5px;color:var(--ink-3)}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-body{padding:16px}
.card-body.tight{padding:0}
.card-foot{padding:12px 16px;border-top:1px solid var(--rule);background:var(--surface-2);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ---------------------------------------------------------------- stats */
.stat{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:17px 19px;box-shadow:var(--shadow-1);position:relative;overflow:hidden;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;
}
a.stat:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--rule-2)}
.stat .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.stat .v{font-size:28px;font-weight:800;letter-spacing:-.02em;font-family:var(--mono);margin-top:8px;line-height:1.05}
.stat .m{font-size:12px;color:var(--ink-3);margin-top:6px}
.stat::before{
  content:"";position:absolute;top:0;right:0;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,var(--rule) 0%,transparent 70%);opacity:0;
  transform:translate(30%,-30%);transition:opacity .16s ease;
}
.stat::after{
  content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--rule-2);
}
.stat.accent::after{background:var(--accent)}
.stat.warn::after  {background:var(--warn)}
.stat.bad::after   {background:var(--bad)}
.stat.good::after  {background:var(--good)}
.stat.info::after  {background:var(--info)}
.stat.accent::before{background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);opacity:1}
.stat.good::before  {background:radial-gradient(circle,var(--good-soft) 0%,transparent 70%);opacity:1}
.stat.warn::before  {background:radial-gradient(circle,var(--warn-soft) 0%,transparent 70%);opacity:1}
.stat.bad::before   {background:radial-gradient(circle,var(--bad-soft) 0%,transparent 70%);opacity:1}
.stat.info::before  {background:radial-gradient(circle,var(--info-soft) 0%,transparent 70%);opacity:1}
.stat .l,.stat .v,.stat .m{position:relative}
.stat-ic{
  position:relative;display:inline-grid;place-items:center;width:32px;height:32px;
  border-radius:var(--r-s);background:var(--surface-3);color:var(--ink-3);margin-bottom:10px;
  font-size:16px;line-height:1;
}
.stat-ic.accent{background:var(--accent-soft);color:var(--accent-2)}
.stat-ic.good{background:var(--good-soft);color:var(--good)}
.stat-ic.warn{background:var(--warn-soft);color:var(--warn)}
.stat-ic.bad{background:var(--bad-soft);color:var(--bad)}
.stat-ic.info{background:var(--info-soft);color:var(--info)}

/* ---------------------------------------------------------------- table */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px}
table.tbl th{
  text-align:left;padding:9px 13px;background:var(--surface-2);color:var(--ink-3);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--rule);white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.tbl td{padding:11px 13px;border-bottom:1px solid var(--rule);vertical-align:middle}
table.tbl tbody tr{transition:background .1s ease}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl td.n,table.tbl th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl td.strong{font-weight:600}
table.tbl td .sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
table.tbl .doc{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent)}
table.tbl tr.dim td{opacity:.55}
table.tbl tfoot td{background:var(--surface-2);font-weight:700;border-top:2px solid var(--rule-2)}

/* ---------------------------------------------------------------- badges */
.badge{
  display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;border:1px solid transparent;
}
.badge.good {background:var(--good-soft);color:var(--good);border-color:var(--good)}
.badge.warn {background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.badge.bad  {background:var(--bad-soft); color:var(--bad); border-color:var(--bad)}
.badge.info {background:var(--info-soft);color:var(--info);border-color:var(--info)}
.badge.muted{background:var(--surface-3);color:var(--ink-3);border-color:var(--rule-2)}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  background:var(--surface-3);border:1px solid var(--rule);font-size:12px;color:var(--ink-2);
}
.chip.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-m);border:1px solid var(--rule-2);
  background:var(--surface);color:var(--ink);font-family:var(--font);font-size:13.5px;
  font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2;min-height:38px;
  transition:background .12s,border-color .12s,transform .12s,box-shadow .12s;
  position:relative;overflow:hidden;isolation:isolate;
}
.btn:hover{background:var(--surface-2);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 1px 2px rgba(139,107,76,.2),0 4px 14px -6px rgba(139,107,76,.55)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.sm{padding:5px 10px;min-height:30px;font-size:12.5px}
.btn.lg{padding:12px 22px;min-height:46px;font-size:15px}
.btn.block{width:100%}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn .ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(0);pointer-events:none;animation:koraRipple .55s ease-out forwards;
  width:16px;height:16px;margin:-8px;
}
.btn:not(.primary):not(.danger) .ripple{background:rgba(139,107,76,.25)}

/* ------------------------------------------------------------ icon button */
.icon-btn{transition:background .12s,transform .12s}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn:active{transform:scale(.94)}
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);background:var(--ink);color:var(--surface);
  font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:var(--r-s);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:80;
  box-shadow:var(--shadow-2);
}
[data-tip]::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(2px);
  border:5px solid transparent;border-top-color:var(--ink);opacity:0;transition:opacity .14s ease;
  margin-bottom:-1px;pointer-events:none;z-index:80;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1}

/* ------------------------------------------------------------ skeleton */
.skel{
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400px 100%;animation:koraShimmer 1.3s ease-in-out infinite;border-radius:var(--r-s);
}
.spin{animation:koraSpin .7s linear infinite;display:inline-block}

/* ---------------------------------------------------------------- forms */
.field{margin-bottom:14px}
.field label,.lbl{
  display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px;
  letter-spacing:.02em;
}
.field .hint{font-size:11.5px;color:var(--ink-3);margin-top:4px}

/* -------------------------------------------------- advanced/optional block */
details.adv{border:1px dashed var(--rule-2);border-radius:var(--r-s);margin:16px 0;padding:0}
details.adv summary{
  cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600;color:var(--accent-2);
  list-style:none;display:flex;align-items:center;gap:6px;user-select:none;
}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:'+';font-size:16px;line-height:1;width:14px}
details.adv[open] summary::before{content:'\2212'}
details.adv[open] summary{border-bottom:1px solid var(--rule)}
details.adv .adv-body{padding:14px}
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=email],input[type=tel],input[type=search],
input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--rule-2);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink);font-family:var(--font);font-size:14px;
  min-height:40px;
}
input[type=number],input.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
textarea{min-height:80px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
input[readonly],input:disabled,select:disabled{background:var(--surface-3);color:var(--ink-3)}
.frow{display:grid;gap:14px}
.f2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.f3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;margin-bottom:9px;cursor:pointer}
.check input{width:17px;height:17px;min-height:0;margin-top:1px;flex:none;accent-color:var(--accent)}
.req::after{content:" *";color:var(--bad)}

/* ------------------------------------------------------- the kind chooser
   Asked before the form opens, because what a thing IS decides most of
   what the form should even contain. Cards with an example under each,
   not a dropdown: "is a paper bag packaging or a consumable?" is
   answered by reading "bags, boxes, cups, labels", not by knowing the
   vocabulary. */
.kind-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kind{
  display:flex;flex-direction:column;gap:3px;padding:16px 16px 15px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);color:var(--ink);text-decoration:none;
  transition:transform .15s var(--ease-spring),box-shadow .15s ease,border-color .15s ease;
}
.kind:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);
  border-color:var(--accent);text-decoration:none}
.kind:active{transform:translateY(0) scale(.99)}
.kind .k-ic{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:7px;
  background:var(--accent-soft);color:var(--accent-2);font-size:20px;line-height:1;
}
.kind b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.kind .k-lead{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.kind .k-eg{font-size:11.5px;color:var(--ink-3);margin-top:5px;font-style:italic}
/* What they picked, said back to them at the top of the form. */
.kind-said{
  display:flex;align-items:center;gap:7px;margin:0 0 16px;font-size:12.5px;color:var(--ink-2);
  background:var(--surface-2);border-radius:99px;padding:6px 13px;width:fit-content;max-width:100%;
}
.kind-said b{color:var(--ink)}

/* --------------------------------------------------- a form in steps
   A long form is not long if it is three short ones. The numbers are
   there so somebody can tell at a glance how much is left. */
.step{display:flex;align-items:center;gap:11px;margin:26px 0 14px;padding-top:18px;
  border-top:1px solid var(--rule)}
.step:first-of-type{margin-top:4px;padding-top:0;border-top:none}
.step-n{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:800;
}
.step-t b{font-size:15.5px;font-weight:700;letter-spacing:-.01em;display:block}
.step-t span{font-size:12.5px;color:var(--ink-3)}

/* ------------------------------------------------- what goes into it
   The one part of making a product that is genuinely a list, so it is
   built like one: a row per ingredient, its own unit shown beside the
   box the moment it is picked, and a running cost on the right. */
.batch-field{max-width:420px;margin-bottom:18px}
.batch-row{display:flex;align-items:center;gap:9px}
.batch-row input{max-width:130px}
.batch-row span{font-size:13px;color:var(--ink-3);font-weight:600}

.ing-head,.ing-row{
  display:grid;gap:10px;align-items:center;
  grid-template-columns:minmax(0,1fr) 190px 78px 104px 36px;
}
.ing-head{
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:0 2px 7px;border-bottom:1px solid var(--rule);
}
.ing-head span:nth-child(4){text-align:right}
.ing-row{padding:8px 0;border-bottom:1px solid var(--rule)}
.ing-row select,.ing-row input[type="number"]{margin:0}
.ing-qty{display:flex;align-items:center;gap:8px}
.ing-qty input{min-width:0}
.ing-uom{font-size:12.5px;font-weight:700;color:var(--ink-3);min-width:26px}
.ing-main{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--ink-2);margin:0;cursor:pointer;white-space:nowrap}
.ing-main input{width:16px;height:16px;min-height:0;margin:0;flex:none;accent-color:var(--accent)}
.ing-main input:disabled{opacity:.35}
.ing-cost{font-family:var(--mono);font-size:12.5px;font-weight:700;text-align:right;color:var(--ink-2)}
.ing-x{
  width:32px;height:32px;border:1px solid var(--rule);background:var(--surface);border-radius:var(--r-m);
  display:grid;place-items:center;color:var(--ink-3);cursor:pointer;font-size:15px;
}
.ing-x:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.ing-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.ing-total{
  margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--surface-2);border-radius:var(--r-m);padding:8px 13px;
}
.ing-total span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ing-total b{font-family:var(--mono);font-size:14.5px;font-weight:700;margin-right:8px}
.ing-total b:last-child{margin-right:0}
.hint.bad{color:var(--bad);font-weight:600}

/* On a phone the row becomes a small block: the ingredient on its own
   line, then how much, Main and the cost under it. Nothing is dropped -
   a grid that scrolls sideways would hide the quantity box. */
@media (max-width:700px){
  .ing-head{display:none}
  .ing-row{
    grid-template-columns:1fr auto 36px;
    grid-template-areas:"pick pick x" "qty main cost";
    padding:12px 0;row-gap:9px;
  }
  .ing-pick{grid-area:pick} .ing-qty{grid-area:qty} .ing-main{grid-area:main}
  .ing-cost{grid-area:cost} .ing-x{grid-area:x}
  .ing-total{margin-left:0;width:100%}
}

/* ---------------------------------------------------------------- notices */
.flashes{position:fixed;top:70px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(400px,calc(100vw - 32px))}
.flash{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow-3);
  font-size:13.5px;animation:slidein .22s ease-out;
}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.flash.ok  {border-left:3px solid var(--good)}
.flash.warn{border-left:3px solid var(--warn)}
.flash.err {border-left:3px solid var(--bad)}
.flash.info{border-left:3px solid var(--info)}
.flash button{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:17px;line-height:1;margin-left:auto;padding:0 2px}

.note{
  padding:13px 15px;border-radius:var(--r-m);font-size:13.5px;margin-bottom:16px;
  border:1px solid var(--rule);background:var(--surface-2);
}
.note.accent{border-left:3px solid var(--accent);background:var(--accent-soft)}
.note.warn  {border-left:3px solid var(--warn); background:var(--warn-soft)}
.note.bad   {border-left:3px solid var(--bad);  background:var(--bad-soft)}
.note.good  {border-left:3px solid var(--good); background:var(--good-soft)}
.note b{display:block;margin-bottom:3px}
.note :last-child{margin-bottom:0}

.empty{
  text-align:center;padding:52px 24px;color:var(--ink-3);
}
.empty::before{
  content:"";display:block;width:44px;height:44px;margin:0 auto 14px;border-radius:50%;
  background:var(--surface-3);
}
.empty h2{font-size:17px;color:var(--ink);margin-bottom:6px}
.empty p{max-width:44ch;margin:0 auto 16px}

/* ---------------------------------------------------------------- scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:99px;border:3px solid var(--ground)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ---------------------------------------------------------------- misc */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13.5px;align-items:baseline}
.kv dt{color:var(--ink-3);font-size:12px;font-weight:600;letter-spacing:.02em}
.kv dd{margin:0;font-weight:500}
.kv dd.num{font-family:var(--mono)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:18px;overflow-x:auto}
.tabs a{
  padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;
  border-bottom:2px solid transparent;text-decoration:none;
}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.toolbar .field{margin:0;min-width:150px}
.toolbar .grow{flex:1;min-width:180px}

/* ---------------------------------------------------------------- report filters */
.preset-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.preset-chip{
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  border-radius:99px;padding:6px 12px;font-size:11.5px;font-weight:600;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.preset-chip:hover{background:var(--surface-2);border-color:var(--rule-2)}
.preset-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}
.adv-filters{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;
  padding-top:12px;border-top:1px dashed var(--rule);
}
.adv-filters .field{margin:0;min-width:170px}
.adv-toggle{
  display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent-2);
  font-size:12px;font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px;
}
.filter-count{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:800;margin-left:4px;
}

.meter{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:99px}
.meter i.warn{background:var(--warn)}
.meter i.bad{background:var(--bad)}
.meter i.good{background:var(--good)}

.calcbox{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.8;
  overflow-x:auto;white-space:pre;color:var(--ink-2);
}
.calcbox b{color:var(--ink)}
.calcbox .g{color:var(--good);font-weight:600}
.calcbox .r{color:var(--bad);font-weight:600}
.calcbox .c{color:var(--ink-3)}

.linerow{display:grid;gap:8px;align-items:end;padding:10px 0;border-bottom:1px dashed var(--rule)}
.linerow:last-child{border-bottom:none}

.right{text-align:right}
.center{text-align:center}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.strong{font-weight:600}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt16{margin-top:16px}.mb16{margin-bottom:16px}
.hidden{display:none !important}

/* ---------------------------------------------------------------- login */
.login-wrap{
  min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--ground);
}
.login-art{
  background:
    radial-gradient(circle at 15% 8%, rgba(199,154,108,.35), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(199,154,108,.18), transparent 45%),
    linear-gradient(165deg,#2b1d12 0%,#1c1309 55%,#0f0b07 100%);
  color:#f1e6d8;padding:52px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.login-art::after{
  content:"";position:absolute;inset:auto -160px -200px auto;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(199,154,108,.24),transparent 62%);
  animation:koraPulse 6s ease-in-out infinite;
}
.login-art::before{
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:24px 24px;
}
.login-box{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);padding:32px 32px 28px;
}
.login-art .brand-mark{width:42px;height:42px;font-size:19px;box-shadow:0 8px 24px -8px rgba(194,118,13,.7)}
.login-art h1{font-size:clamp(30px,3.6vw,46px);color:#fff;line-height:1.06;margin:auto 0 0;max-width:15ch;letter-spacing:-.02em}
.login-art p{color:#a9adb8;font-size:15px;max-width:42ch;margin-top:14px;line-height:1.6}
.login-loop{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px;position:relative;z-index:1}
.login-loop span{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  padding:4px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.14);color:#d9b487;
  background:rgba(255,255,255,.03);
}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-box{width:100%;max-width:380px}
.login-box h2{font-size:22px;margin-bottom:4px}
.login-box .sub{color:var(--ink-3);font-size:13.5px;margin-bottom:22px}
.seg{display:flex;background:var(--surface-3);border-radius:var(--r-s);padding:3px;margin-bottom:18px}
.seg button{
  flex:1;padding:8px;border:none;background:none;border-radius:4px;font-family:var(--font);
  font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;
}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pinpad button{
  padding:14px;font-family:var(--mono);font-size:19px;font-weight:600;border:1px solid var(--rule-2);
  background:var(--surface);border-radius:var(--r-s);cursor:pointer;color:var(--ink);
}
.pinpad button:active{background:var(--accent-soft)}
.pin-display{
  font-family:var(--mono);font-size:26px;letter-spacing:.4em;text-align:center;
  padding:12px;border:1px solid var(--rule-2);border-radius:var(--r-s);background:var(--surface);
  min-height:52px;
}
.login-foot{margin-top:22px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.7}

/* ---------------------------------------------------------------- print */
@media print{
  @page{margin:14mm 12mm;}
  .appbar,.scope-strip,.tabbar,.sheet,.nv-pop,.skip,
  .no-print,.flashes,.tabs,.adv-filters,.preset-row,.adv-toggle{display:none !important}
  body.app{padding-bottom:0}
  body{background:#fff;font-size:11.5px;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}
  .page{padding:0;max-width:100%}
  .card{border:1px solid #999;box-shadow:none;break-inside:avoid;margin-bottom:10px;border-radius:3px}
  .card-head{padding:9px 12px}
  .card-body{padding:10px 12px}
  .card-head h2{font-size:13.5px}
  table.tbl{font-size:10.5px;min-width:0}
  table.tbl th{background:#eee !important;color:#000;position:static;padding:6px 8px}
  table.tbl td{padding:6px 8px}
  table.tbl thead{display:table-header-group}
  table.tbl tr{break-inside:avoid}
  .print-only{display:block !important}
  a{color:#000;text-decoration:none}
  .stat{background:#fff !important;box-shadow:none !important;border:1px solid #999;padding:10px 12px;break-inside:avoid}
  .stat .v{font-size:19px}
  .stat-ic{background:none !important;color:#000 !important;box-shadow:none !important;width:auto;height:auto;margin-bottom:4px}
  .stat-ic .ic-glyph{display:none}
  .page-head{margin-bottom:6px}
  .grid{gap:8px}
  .grid.g4{grid-template-columns:repeat(4,1fr)}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .grid.g2{grid-template-columns:repeat(2,1fr)}
  .chart-card{break-inside:avoid}
  .note{border:1px solid #999;background:#fff !important;break-inside:avoid}
  .btn{display:none !important}
  /* A Material Symbols ligature (e.g. "payments") only ever reads as a real
     glyph once the web font has actually swapped in on screen - a browser's
     print/PDF pipeline can snapshot the page before that swap, or without
     running the font-load JS at all, and the raw ligature word then prints
     literally instead of an icon. Icons are decorative everywhere they are
     used, so the reliable fix for a printed page is to never depend on the
     font there at all: hide every glyph in print, unconditionally. */
  .ic-glyph{display:none !important}
  .badge .ic-glyph, .chart-h-lbl .ic-glyph{display:none !important}
}
.print-only{display:none}
.print-head{margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #000}
.print-head .ph-brand{font-family:var(--font-display,var(--font));font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.print-head .ph-title{font-family:var(--font-display,var(--font));font-weight:650;font-size:22px;margin:2px 0}
.print-head .ph-meta{font-size:11.5px;color:#333}
.print-head .ph-scope{font-size:11px;color:#555;margin-top:2px}
.print-foot{display:none}
@media print{
  .print-foot{
    display:block;margin-top:18px;padding-top:8px;border-top:1px solid #999;
    font-size:10px;color:#555;text-align:center;
  }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .login-wrap{grid-template-columns:1fr}
  .login-art{display:none}
}
@media (max-width:1100px){
  .page{padding:16px 14px 28px}
  .page-head h1{font-size:21px}
}
@media (max-width:520px){
  body{font-size:14.5px}
  .stat .v{font-size:22px}
  .card-body{padding:13px}
  .btn{padding:9px 13px}
  .flashes{top:auto;bottom:76px;right:12px;left:12px;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------------------------------------------------------------- POS till */
.till-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.till-tile{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:14px 10px;text-align:center;cursor:pointer;user-select:none;
  transition:transform .12s var(--ease-spring),box-shadow .12s ease,border-color .12s ease;
  display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;overflow:hidden;
}
.till-tile:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--accent)}
.till-tile:active{transform:scale(.95)}
.till-tile.out{opacity:.4;cursor:not-allowed}
.till-tile .ic{
  width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);
  display:grid;place-items:center;font-size:22px;line-height:1;
}

.paymethods{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px}
.pm{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;
  border:1px solid var(--rule);border-radius:var(--r-s);background:var(--surface);
  color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.pm .ic-glyph{font-size:17px}
.pm:hover{background:var(--surface-2)}
.pm.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}
.paymethods.dim{opacity:.4;pointer-events:none}

/* -------------------------------------------------------------- split payment */
.split-toggle{
  display:flex;align-items:center;gap:6px;margin-top:8px;padding:0;border:0;background:none;
  color:var(--accent-2);font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}
.split-toggle .ic-glyph{font-size:15px}
.split-toggle.on{color:var(--ink-3);text-decoration:none}
.split-editor{margin-top:10px;padding:10px;border:1px dashed var(--rule-2);border-radius:var(--r-s);background:var(--surface-2)}
.split-row{display:grid;grid-template-columns:1fr 90px 28px;gap:6px;margin-bottom:6px;align-items:center}
.split-row select, .split-row input{
  padding:7px 8px;border:1px solid var(--rule);border-radius:var(--r-s);background:var(--surface);
  color:var(--ink);font-size:12.5px;
}
.split-remove{
  border:1px solid var(--rule);border-radius:var(--r-s);background:var(--surface);color:var(--ink-3);
  cursor:pointer;line-height:1;font-size:15px;padding:4px 0;
}
.split-remove:hover{color:var(--bad);border-color:var(--bad)}
.split-status{margin-top:6px;font-size:11.5px;font-weight:700;color:var(--bad)}
.split-status.ok{color:var(--good)}

/* -------------------------------------------------------------- simple bar charts */
.chart-card .card-body{padding-top:6px}
.chart-trend{display:flex;align-items:flex-end;gap:10px;height:150px;padding:10px 4px 0}
.chart-trend .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.chart-trend .bar-v{
  width:100%;max-width:34px;border-radius:4px 4px 0 0;background:var(--accent);
  min-height:2px;transition:background .12s ease;
}
.chart-trend .bar-col:hover .bar-v{background:var(--accent-2)}
.chart-trend .bar-val{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-bottom:4px;white-space:nowrap}
.chart-trend .bar-lbl{font-size:11px;color:var(--ink-3);margin-top:6px;text-align:center}
.chart-trend .bar-sub{font-size:9.5px;color:var(--ink-3);opacity:.75}

.chart-h{display:flex;flex-direction:column;gap:10px;padding:6px 4px}
.chart-h-row{display:grid;grid-template-columns:110px 1fr 90px;gap:10px;align-items:center}
.chart-h-lbl{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.chart-h-lbl .ic-glyph{font-size:15px}
.chart-h-track{height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.chart-h-fill{height:100%;border-radius:7px;min-width:2px;transition:width .2s ease}
.chart-h-fill.tone-accent{background:var(--accent)}
.chart-h-fill.tone-info{background:var(--info)}
.chart-h-fill.tone-good{background:var(--good)}
.chart-h-fill.tone-warn{background:var(--warn)}
.chart-h-val{font-family:var(--mono);font-size:12px;text-align:right;font-weight:700}

@media print{
  .split-editor,.split-toggle{display:none !important}
  .chart-trend{height:100px}
  .chart-h-track{border:1px solid #ccc}
  .bar-v{border:1px solid #000}
  .chart-h-fill{border-right:1px solid #000}
}
.till-tile .nm{font-size:12.5px;font-weight:700;line-height:1.25}
.till-tile .pr{font-family:var(--mono);font-size:12.5px;color:var(--accent-2);font-weight:700}
.till-tile .qtybadge{
  position:absolute;top:6px;right:6px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:11px;font-weight:800;border-radius:99px;min-width:20px;height:20px;
  display:grid;place-items:center;padding:0 5px;animation:koraPop .25s var(--ease-spring) both;
}
.till-tile .stk{font-size:10.5px;color:var(--ink-3)}

.cart{
  position:sticky;top:70px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-l);box-shadow:var(--shadow-2);display:flex;flex-direction:column;
  max-height:calc(100vh - 90px);
}
.cart-head{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:8px}
.cart-lines{flex:1;overflow-y:auto;padding:6px 10px}
.cart-line{
  display:flex;align-items:center;gap:8px;padding:9px 6px;border-bottom:1px dashed var(--rule);
  animation:koraRise .22s var(--ease-out) both;
}
.cart-line .nm{flex:1;min-width:0;font-size:13px;font-weight:600}
.cart-line .px{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.cart-step{display:flex;align-items:center;gap:6px}
.cart-step button{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--rule-2);background:var(--surface);
  cursor:pointer;font-weight:700;color:var(--ink-2);display:grid;place-items:center;
  transition:transform .1s,background .1s;
}
.cart-step button:active{transform:scale(.88)}
.cart-step button:hover{background:var(--surface-2)}
.cart-step .q{font-family:var(--mono);font-weight:700;min-width:22px;text-align:center}
.cart-line .lv{font-family:var(--mono);font-weight:700;min-width:64px;text-align:right}
.cart-foot{padding:14px 16px;border-top:1px solid var(--rule);background:var(--surface-2)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:800;margin-bottom:10px}
.cart-total .v{font-family:var(--mono);font-size:21px;color:var(--accent-2)}
.cart-empty{padding:40px 16px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------------------------------------------------------------- pill toggle (approve switch) */
.tglrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.tglrow:last-child{border-bottom:none}
.tgl{
  position:relative;width:46px;height:26px;border-radius:99px;background:var(--surface-3);
  border:1px solid var(--rule-2);cursor:pointer;flex:none;transition:background .18s ease;
}
.tgl i{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-1);transition:transform .18s var(--ease-spring);
}
.tgl.on{background:var(--good)}
.tgl.on i{transform:translateX(20px)}

/* ---------------------------------------------------------------------
   Grouped table header (Stock check): a thin band above the real header
   row that says which side of the story the columns below belong to -
   "Came in", "Went out", "The check". Muted and small on purpose; it
   labels the columns, it is not a second header competing with them.
   --------------------------------------------------------------------- */
.tbl thead tr.grouphead th{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding-bottom:2px;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.tbl thead tr.grouphead th:empty{background:transparent;border-bottom:0}

/* =====================================================================
   APP CARDS
   The owner's rule for the dashboard: cards only, no tables. These are
   the pieces that replace them. A row inside a card is a tap target
   with a title, a supporting line and a value - the shape a phone app
   uses - and it stays readable at 360px because nothing in it is a
   column that has to line up with the row above.
   ===================================================================== */

/* ---------------------------------------------------------- greeting card */
/* The ink is --accent-ink, not white. The accent is a deep roast brown
   in light mode and a pale tan in dark mode, so a hard-coded white would
   be correct in one theme and nearly unreadable in the other. Every
   colour inside the hero is mixed from that same ink, so the whole card
   flips with the theme instead of only its background. */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(125deg,var(--accent) 0%,var(--accent-2) 100%);
  color:var(--accent-ink);border-radius:var(--r-xl);padding:22px 22px 20px;margin-bottom:16px;
  box-shadow:0 18px 40px -26px rgba(46,32,19,.9);
}
.hero::after{
  content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-ink) 10%,transparent),transparent 66%);
  pointer-events:none;
}
.hero h1{font-family:var(--font-display);font-size:clamp(21px,3.4vw,28px);letter-spacing:-.025em;
  line-height:1.12;color:var(--accent-ink);position:relative}
.hero .hsub{margin-top:6px;font-size:13px;position:relative;
  color:color-mix(in srgb,var(--accent-ink) 76%,transparent)}
.hero .hrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;position:relative}
.hero .hpill{
  display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;
  background:color-mix(in srgb,var(--accent-ink) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-ink) 22%,transparent);
  font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:none;
}
.hero .hpill:hover{background:color-mix(in srgb,var(--accent-ink) 20%,transparent);
  text-decoration:none;color:var(--accent-ink)}
.hero .hpill .ic-glyph{font-size:16px}
.hero .hpill b{font-family:var(--mono);font-weight:700}

/* ---------------------------------------------------------- metric cards */
/* 198px, not 178px: the sidebar takes 236px off the page, and at the old
   minimum six cards were fitting where five belong - narrow enough that
   the label and its tag stopped sharing a line comfortably. */
.metrics{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));margin-bottom:16px}
.metric{
  position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-l);padding:15px 16px 14px;box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;
  transition:transform .15s var(--ease-spring),box-shadow .15s ease,border-color .15s ease;
}
a.metric:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--accent);text-decoration:none}
a.metric:active{transform:translateY(0) scale(.99)}
/* Wraps at every width, not only on a phone. A tag beside the label is
   the nicer line when both fit; when they do not, the tag drops below
   rather than being clipped at the card's edge. */
.metric .m-top{display:flex;flex-wrap:wrap;align-items:center;gap:9px;row-gap:5px;
  margin-bottom:9px;min-height:31px}
.metric .m-ic{
  width:31px;height:31px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-2);font-size:17px;line-height:1;
}
.metric .m-ic.good{background:var(--good-soft);color:var(--good)}
.metric .m-ic.warn{background:var(--warn-soft);color:var(--warn)}
.metric .m-ic.bad {background:var(--bad-soft); color:var(--bad)}
.metric .m-ic.info{background:var(--info-soft);color:var(--info)}
.metric .m-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.metric .m-v{font-family:var(--mono);font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.metric .m-v.sm{font-size:20px}
.metric .m-m{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.35}
.metric .m-bar{height:4px;border-radius:99px;background:var(--surface-3);margin-top:11px;overflow:hidden}
.metric .m-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s var(--ease-out)}
.metric .m-bar i.good{background:var(--good)} .metric .m-bar i.warn{background:var(--warn)}
.metric .m-bar i.bad{background:var(--bad)}   .metric .m-bar i.info{background:var(--info)}
/* In the flow, pushed right - not absolutely positioned. Floating it
   over the corner worked at desktop width and sat on top of the card's
   own label the moment the card narrowed on a phone. */
.metric .m-tag{
  margin-left:auto;flex:none;font-size:10px;font-weight:800;letter-spacing:.05em;white-space:nowrap;
  padding:2px 7px;border-radius:99px;background:var(--good-soft);color:var(--good);
}
.metric .m-tag .tg-short{display:none}
.metric .m-tag.bad{background:var(--bad-soft);color:var(--bad)}
.metric .m-tag.warn{background:var(--warn-soft);color:var(--warn)}

/* ------------------------------------------------------- rows inside cards */
.cardlist{display:flex;flex-direction:column}
.crow{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-top:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background .12s ease;
}
.crow:first-child{border-top:none}
a.crow:hover{background:var(--surface-2);text-decoration:none}
a.crow:active{background:var(--surface-3)}
.crow .c-ic{
  width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);font-size:18px;line-height:1;font-weight:700;
}
.crow .c-ic.accent{background:var(--accent-soft);color:var(--accent-2)}
.crow .c-ic.good{background:var(--good-soft);color:var(--good)}
.crow .c-ic.warn{background:var(--warn-soft);color:var(--warn)}
.crow .c-ic.bad{background:var(--bad-soft);color:var(--bad)}
.crow .c-ic.info{background:var(--info-soft);color:var(--info)}
.crow .c-tx{flex:1;min-width:0}
.crow .c-tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The CHILD combinator matters: ".c-tx span" also matched the document
   code nested inside, so the code took display:block and broke onto its
   own line, pushing the rest of the line out of the row. */
.crow .c-tx > span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .c-tx .doc{display:inline;font-family:var(--mono);font-size:11px;color:var(--accent-2);font-weight:600}
.crow .c-end{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.crow .c-end .v{font-family:var(--mono);font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap}
.crow .c-end .v.bad{color:var(--bad)} .crow .c-end .v.good{color:var(--good)}
.crow .c-end .t{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.crow .c-go{flex:none;color:var(--ink-3);font-size:18px;line-height:1;opacity:.5}
a.crow:hover .c-go{opacity:1;color:var(--accent-2)}

/* ------------------------------------------------------- quick action grid */
.qgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.qtile{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:14px 13px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);
  color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:600;line-height:1.25;
  box-shadow:var(--shadow-1);
  transition:transform .14s var(--ease-spring),box-shadow .14s ease,border-color .14s ease;
}
.qtile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--accent);text-decoration:none}
.qtile:active{transform:translateY(0) scale(.96)}
.qtile .q-ic{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-2);font-size:19px;line-height:1;
}
.qtile span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:500;margin-top:-4px}

/* --------------------------------------------------------- section heading */
.sect{display:flex;align-items:baseline;gap:10px;margin:22px 0 11px}
.sect h2{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.015em}
.sect .n{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-3);
  background:var(--surface-2);border-radius:99px;padding:1px 8px;
}
.sect .n.alert{background:var(--bad-soft);color:var(--bad)}
.sect a{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--accent-2)}

/* --------------------------------------------------------- empty, in a card */
.c-empty{padding:26px 18px;text-align:center;color:var(--ink-3)}
.c-empty .e-ic{
  width:46px;height:46px;border-radius:16px;margin:0 auto 11px;display:grid;place-items:center;
  background:var(--good-soft);color:var(--good);font-size:24px;line-height:1;
}
.c-empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.c-empty p{font-size:12.5px;margin:0 auto;max-width:38ch}

/* ------------------------------------------------------------- mini bars */
.sparks{display:flex;align-items:flex-end;gap:6px;height:112px;padding:6px 0 0}
.sparks .sp{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:6px;height:100%;justify-content:flex-end}
/* align-items:stretch above, not center: a centred flex child shrinks to
   its content, which turned every bar into the same small square. */
.sparks .sp i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--accent-soft);
  min-height:3px;transition:background .15s ease}
.sparks .sp.hi i{background:var(--accent)}
.sparks .sp b{font-size:9.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em;text-align:center}

/* ------------------------------------------------------- responsive tweaks */
@media (max-width:560px){
  .hero{padding:18px 16px 16px;border-radius:var(--r-l)}
  /* Three figures side by side instead of three full-width pills: the
     labels are long enough that a row of pills became a column of them. */
  .hero .hrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .hero .hpill{flex-direction:column;align-items:flex-start;gap:2px;
    padding:8px 9px;font-size:10px;line-height:1.3;border-radius:var(--r-m)}
  .hero .hpill .ic-glyph{display:none}
  .hero .hpill b{font-size:12px;letter-spacing:-.02em}
  /* A word-long tag will not fit beside the label on a 360px card. */
  .metric .m-tag .tg-long{display:none}
  .metric .m-tag .tg-short{display:inline}
  /* And on a two-up phone grid even the short form can be wider than
     what is left after the icon and the label, so the row is allowed to
     wrap and drop the tag onto its own line instead of clipping it. */
  .metric .m-top{flex-wrap:wrap;row-gap:5px;min-height:0}
  .metrics{grid-template-columns:repeat(2,1fr);gap:10px}
  .metric{padding:13px 13px 12px}
  .metric .m-v{font-size:20px}
  .metric .m-v.sm{font-size:17px}
  .qgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .crow{padding:11px 13px;gap:10px}
  .crow .c-go{display:none}
}