/* ============================================================================
   STONE — prototype design system
   Tokens follow the shared Templates library (00-base/css/_tokens.css).
   Breakpoints are Bootstrap 5 boundaries, desktop-first (max-width only):
   1399.98 · 1199.98 · 991.98 · 767.98 · 575.98
   ============================================================================ */

:root{
  /* ---- COLOR ------------------------------------------------------------- */
  --brand:#1b2430;        --brand-dark:#11161e;   --brand-soft:#eceff3;
  --accent:#a9803f;       --accent-dark:#8a6730;  --accent-soft:#f6edde;
  --ink:#16181d;          --ink-soft:#454b57;     --muted:#7c8496;
  --paper:#ffffff;        --paper-2:#f8f6f2;      --paper-3:#efece5;
  --line:#e4dfd6;         --line-strong:#cfc8bb;
  --success:#2f7d55;      --success-soft:#e7f2eb;
  --warning:#b5822a;      --warning-soft:#fbf1dd;
  --error:#b3423a;        --error-soft:#f9e9e7;
  --info:#2f5da8;         --info-soft:#e8eefa;

  --on-brand:#ffffff;     --on-accent:#ffffff;    --on-dark:#ffffff;
  --on-dark-soft:rgba(255,255,255,.82);           --on-dark-mute:rgba(255,255,255,.62);
  --on-dark-dim:rgba(255,255,255,.50);
  --on-dark-fill:rgba(255,255,255,.10);           --on-dark-fill-hover:rgba(255,255,255,.14);
  --on-dark-line:rgba(255,255,255,.10);           --on-dark-edge:rgba(255,255,255,.18);

  /* ---- SPACE (8pt) ------------------------------------------------------- */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;   --space-7:3rem;   --space-8:4rem;
  --space-9:6rem;
  --gut:clamp(1rem,4vw,2rem);
  --step:clamp(3.5rem,7vw,6rem);

  /* ---- TYPE -------------------------------------------------------------- */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,monospace;
  --text-xxs:.68rem;
  --text-xs:.75rem;
  --text-sm:.82rem;
  --text-base:.9rem;
  --text-md:1rem;
  --text-lg:clamp(1.05rem,1.6vw,1.2rem);
  --text-xl:clamp(1.2rem,2.2vw,1.45rem);
  --text-2xl:clamp(1.6rem,3.5vw,2.3rem);
  --text-3xl:clamp(2.2rem,5vw,3.6rem);
  --text-stat:clamp(1.6rem,3vw,2.1rem);
  --leading-tight:1.15; --leading-snug:1.4; --leading-normal:1.65;
  --tracking-wide:.14em;

  /* ---- RADIUS / SHADOW --------------------------------------------------- */
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-color:20,25,40;
  --shadow-1:0 1px 2px rgba(var(--shadow-color),.06);
  --shadow-2:0 1px 2px rgba(var(--shadow-color),.05),0 8px 28px rgba(var(--shadow-color),.07);
  --shadow-3:0 18px 48px rgba(var(--shadow-color),.16);
  --shadow:var(--shadow-2);

  /* ---- CONTAINER (Bootstrap widths) -------------------------------------- */
  --container-sm:540px; --container-md:720px; --container-lg:960px;
  --container-xl:1140px; --container-xxl:1320px;
  --maxw:var(--container-xxl);
  --maxw-wide:1560px;

  /* ---- Z-INDEX ----------------------------------------------------------- */
  --z-base:1; --z-dropdown:1000; --z-sticky:1020; --z-drawer:1030;
  --z-backdrop:1040; --z-modal:1050; --z-popover:1060; --z-toast:1070;

  /* ---- MOTION / BORDER --------------------------------------------------- */
  --dur-fast:.15s; --dur:.2s; --dur-slow:.4s;
  --ease:cubic-bezier(.2,.8,.2,1);
  --transition:var(--dur) var(--ease);
  --border-1:1px; --ring:3px;

  --header-h:64px;
}

/* ============================================================================
   BASE
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper-2); color:var(--ink);
  font-family:var(--font-body); font-size:var(--text-base);
  line-height:var(--leading-normal); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,h5{margin:0; line-height:var(--leading-tight); font-weight:600}
p{margin:0 0 var(--space-3)}
ul,ol{margin:0; padding-left:1.15em}
hr{border:0; border-top:var(--border-1) solid var(--line); margin:var(--space-5) 0}
:focus-visible{outline:var(--ring) solid var(--accent); outline-offset:2px}

/* ---- accessibility: screen-reader-only content -------------------------
   `.sr-only` hides content visually while retaining it in the accessibility
   tree, for table captions and live regions. `display:none` would hide it
   from screen readers too, so it is not suitable here. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  border:0;
}
/* Skip link to main content: hidden until it receives keyboard focus. */
.skiplink{
  position:absolute; left:var(--space-3); top:-100px; z-index:var(--z-toast);
  padding:.55rem .9rem; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--on-accent); font-weight:600;
  font-size:var(--text-sm); text-decoration:none; transition:top var(--transition);
}
.skiplink:focus{top:var(--space-3)}
main:focus{outline:none}
/* The public landing page begins with a full-bleed hero. Its <main> also serves
   as the skip-link target, so it must not add any padding around the hero. */
.mainflush{padding-block:0}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.container--wide{max-width:var(--maxw-wide)}
.container--narrow{max-width:var(--container-lg)}
/* A form is read and typed, not scanned — it gets a reading width. A printable
   document gets paper width. Both apply to the WHOLE page column, heading
   included, so nothing steps in or out down the page. */
/* never wider than the page width for the tier, or a form ends up broader
   than the header above it */
.container--form{max-width:min(var(--container-xl),var(--maxw-wide))}
.container--doc{max-width:min(920px,var(--maxw-wide))}

.mono{font-family:var(--font-mono); font-size:.92em; letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums; font-family:var(--font-mono); font-size:.92em}
.muted{color:var(--muted)}
.small{font-size:var(--text-sm)}
.xs{font-size:var(--text-xs)}
.strong{font-weight:600}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}
.stack{display:flex; flex-direction:column; gap:var(--space-4)}
.row{display:flex; align-items:center; gap:var(--space-3)}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.spacer{flex:1}
.eyebrow{
  font-size:var(--text-xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--accent); font-weight:600;
}

/* ============================================================================
   HEADER · MAIN MENU · MEGAMENU     (no sidebar anywhere)
   ============================================================================ */
.hdr{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--brand); color:var(--on-brand);
  border-bottom:var(--border-1) solid var(--on-dark-fill);
}
.hdr__in{
  /* The header must share an edge with the page under it. Public pages are
     --maxw, the backend is --maxw-wide, so the header follows the subsystem
     instead of picking one and being wrong on the other. */
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  height:var(--header-h); display:flex; align-items:center; gap:var(--space-5);
}
body[data-role] .hdr__in{max-width:var(--maxw-wide)}
body[data-role] .main>.container--form,
body[data-role] .main>.container--doc{margin-inline:auto}
/* the backend menu is compact at every width — 11 modules do not fit otherwise */
body[data-role] .mainnav__link{padding:.5rem .5rem; font-size:var(--text-xs)}
/* the account block never gives up room to the menu */
.hdr__right{flex-shrink:0}
.brand{display:flex; align-items:center; gap:.6rem; flex-shrink:0}
.brand__mark{
  width:30px; height:30px; border-radius:var(--radius-sm);
  background:linear-gradient(140deg,var(--accent) 0%,var(--accent-dark) 100%);
  display:grid; place-items:center; color:var(--on-accent);
  font-family:var(--font-display); font-size:1.05rem; font-weight:700;
}
/* name over strapline — they are two lines, not one run of text */
.brand>span:last-child{display:flex; flex-direction:column; justify-content:center}
.brand__name{
  display:block;
  font-family:var(--font-display); font-size:1.35rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; line-height:1;
}
.brand__sub{
  display:block; font-size:var(--text-xxs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--on-dark-dim); line-height:1; margin-top:3px;
}

/* --- main menu --- */
.mainnav{display:flex; align-items:center; gap:var(--space-1); flex:1; min-width:0}
.mainnav__item{position:relative}
.mainnav__link{
  display:flex; align-items:center; gap:.35rem; padding:.5rem .7rem;
  border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:500;
  color:var(--on-dark-soft); white-space:nowrap;
  transition:background var(--transition),color var(--transition);
  background:none; border:0; cursor:pointer;
}
.mainnav__link:hover,.mainnav__item:hover>.mainnav__link{background:var(--on-dark-fill); color:var(--on-brand)}
.mainnav__link[aria-current="page"],.mainnav__item.is-active>.mainnav__link{
  color:var(--on-brand); background:var(--on-dark-fill);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.caret{width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.65; flex-shrink:0}

.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:270px;
  background:var(--paper); color:var(--ink); border-radius:var(--radius);
  border:var(--border-1) solid var(--line); box-shadow:var(--shadow-3);
  padding:var(--space-2); z-index:var(--z-dropdown);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
}
.mainnav__item:nth-last-child(-n+3)>.dropdown{left:auto; right:0}
.mainnav__item:hover>.dropdown,
.mainnav__item:focus-within>.dropdown,
.mainnav__item.is-open>.dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown__link{
  display:block; padding:.45rem .6rem; border-radius:var(--radius-sm);
  font-size:var(--text-sm); color:var(--ink-soft);
}
.dropdown__link:hover{background:var(--paper-2); color:var(--ink)}
.dropdown__link[aria-current="page"]{background:var(--accent-soft); color:var(--ink); font-weight:600}
.dropdown__link .pid{float:right; font-size:var(--text-xxs); color:var(--muted); font-family:var(--font-mono)}
.dropdown__sep{height:1px; background:var(--line); margin:var(--space-2) var(--space-1)}
.dropdown__head{
  padding:.35rem .6rem; font-size:var(--text-xxs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted); font-weight:600;
}

/* --- right side: staff-entry icon + my account --- */
.hdr__right{display:flex; align-items:center; gap:var(--space-2); margin-left:auto; flex-shrink:0}
.iconbtn{
  width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-sm);
  color:var(--on-dark-soft); border:var(--border-1) solid var(--on-dark-edge);
  background:none; cursor:pointer; transition:all var(--transition);
}
.iconbtn:hover{background:var(--on-dark-fill); color:var(--on-brand)}
.iconbtn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7}

.acct{position:relative}
.acct__btn{
  display:flex; align-items:center; gap:.55rem; padding:.32rem .6rem .32rem .35rem;
  border-radius:var(--radius-pill); border:var(--border-1) solid var(--on-dark-edge);
  background:var(--on-dark-fill); color:var(--on-brand); cursor:pointer;
  transition:all var(--transition);
}
.acct__btn:hover,.acct.is-open .acct__btn{background:var(--on-dark-fill-hover)}
.avatar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent) 0%,var(--accent-dark) 100%);
  color:var(--on-accent); font-size:var(--text-xs); font-weight:700; letter-spacing:.02em;
}
.acct__meta{display:flex; flex-direction:column; text-align:left; line-height:1.2}
.acct__name{display:block; font-size:var(--text-sm); font-weight:600}
.acct__role{display:block; font-size:var(--text-xxs); color:var(--on-dark-mute)}

.mega{
  position:absolute; top:calc(100% + 8px); right:0; width:min(880px,calc(100vw - 2*var(--gut)));
  background:var(--paper); color:var(--ink); border-radius:var(--radius-lg);
  border:var(--border-1) solid var(--line); box-shadow:var(--shadow-3);
  z-index:var(--z-dropdown);
  max-height:calc(100vh - var(--header-h) - var(--space-3));
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
}
.acct:hover .mega,.acct:focus-within .mega,.acct.is-open .mega{opacity:1; visibility:visible; transform:translateY(0)}
.mega__top{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-5); background:var(--paper-2);
  border-bottom:var(--border-1) solid var(--line);
}
.mega__avatar{width:46px; height:46px; font-size:var(--text-md)}
.mega__who{flex:1; min-width:0}
.mega__who b{display:block; font-size:var(--text-md)}
.mega__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);
  padding:var(--space-5);
}
.mega__colhead{
  font-size:var(--text-xxs); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--muted); margin-bottom:var(--space-3); padding-bottom:var(--space-2);
  border-bottom:var(--border-1) solid var(--line);
}
.mega__link{
  display:flex; align-items:baseline; gap:.4rem; padding:.3rem .45rem;
  margin-left:-.45rem; border-radius:var(--radius-sm);
  font-size:var(--text-sm); color:var(--ink-soft);
}
.mega__link:hover{background:var(--paper-2); color:var(--ink)}
.mega__link .pid{margin-left:auto; font-size:var(--text-xxs); color:var(--muted); font-family:var(--font-mono)}
.mega__foot{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5); background:var(--brand); color:var(--on-dark);
}
.mega__foot .btn{margin:0}
.mega__foot .small{color:var(--on-dark-mute)}
.mega__foot .small b{color:var(--on-dark); font-weight:600}
.mega__foot a.small{color:var(--on-dark-soft); text-decoration:underline}
.mega__foot a.small:hover{color:var(--on-dark)}
.ftr .brand__name,.section--ink .brand__name{color:var(--on-dark)}

/* --- burger (small screens) — a drop-down sheet, never a sidebar --- */
.burger{display:none}
.mnav-sheet{display:none}

/* ============================================================================
   BUTTONS · PILLS · CHIPS
   ============================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.5rem .95rem; border-radius:var(--radius-sm); border:var(--border-1) solid transparent;
  font-size:var(--text-sm); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:all var(--transition); background:var(--paper); color:var(--ink);
  border-color:var(--line-strong);
}
.btn:hover{border-color:var(--ink-soft)}
.btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8}
.btn--primary{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.btn--primary:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.btn--accent{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn--ghost{background:transparent; border-color:var(--on-dark-edge); color:var(--on-brand)}
.btn--ghost:hover{background:var(--on-dark-fill-hover)}
.btn--sm{padding:.3rem .6rem; font-size:var(--text-xs)}
.btn--lg{padding:.75rem 1.5rem; font-size:var(--text-md)}
.btn--block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45; cursor:not-allowed}

.pill{
  display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .5rem;
  border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:600;
  background:var(--paper-3); color:var(--ink-soft); white-space:nowrap;
  border:var(--border-1) solid transparent;
}
.pill--ok{background:var(--success-soft); color:var(--success)}
.pill--warn{background:var(--warning-soft); color:var(--warning)}
.pill--err{background:var(--error-soft); color:var(--error)}
.pill--info{background:var(--info-soft); color:var(--info)}
.pill--accent{background:var(--accent-soft); color:var(--accent-dark)}
.pill--ghost{background:transparent; border-color:var(--line-strong); color:var(--muted)}
.pill::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.8}
.pill--plain::before{display:none}

.chip{
  display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .55rem;
  border-radius:var(--radius-sm); border:var(--border-1) solid var(--line-strong);
  background:var(--paper); font-size:var(--text-xs); color:var(--ink-soft); cursor:pointer;
}
.chip:hover{border-color:var(--ink-soft)}
.chip.is-on{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.chip--lock{background:var(--error-soft); border-color:transparent; color:var(--error); font-weight:600}
.chip--cfg{background:var(--info-soft); border-color:transparent; color:var(--info); font-weight:600}

/* ============================================================================
   PAGE SHELL
   ============================================================================ */
.main{padding-block:var(--space-6) var(--space-9)}
.pagehead{margin-bottom:var(--space-5)}
.crumbs{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-size:var(--text-xs); color:var(--muted); margin-bottom:var(--space-2);
}
.crumbs a:hover{color:var(--accent-dark)}
.crumbs span{opacity:.5}
.pagehead__row{display:flex; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap}
.pagehead h1{
  font-family:var(--font-body); font-size:clamp(1.45rem,2.4vw,2rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.2;
}
.pagehead__sub{color:var(--muted); font-size:var(--text-sm); margin-top:.25rem; max-width:70ch}
.pagehead__actions{margin-left:auto; display:flex; gap:var(--space-2); flex-wrap:wrap}



/* ============================================================================
   CARDS · GRID · STATS
   ============================================================================ */
.grid{display:grid; gap:var(--space-4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--5{grid-template-columns:repeat(5,1fr)}
.grid--main{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
.stats+.card{margin-top:var(--space-5)}
.sectiongap{height:var(--space-5)}
.mr-2{margin-right:var(--space-2)}
.mt-4{margin-top:var(--space-4)}
.mt-3{margin-top:var(--space-3)}
.gap-1{gap:var(--space-1)}
/* a form that owns a whole screen but must not become a box in the layout */
.form--contents{display:contents}

.card{
  background:var(--paper); border:var(--border-1) solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1); overflow:hidden;
}
.card--flush{box-shadow:none}
.card__head{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5); border-bottom:var(--border-1) solid var(--line);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.card__head h2{font-size:var(--text-md); font-weight:600}
.card__head .spacer{flex:1}
.card__sub{font-size:var(--text-xs); color:var(--muted)}
.card__body{padding:var(--space-5)}
.card__body--tight{padding:var(--space-4)}
.card__foot{
  padding:var(--space-3) var(--space-5); border-top:var(--border-1) solid var(--line);
  background:var(--paper-2); font-size:var(--text-xs); color:var(--muted);
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
}

.stat{
  background:var(--paper); border:var(--border-1) solid var(--line);
  border-radius:var(--radius); padding:var(--space-4) var(--space-5);
  display:flex; flex-direction:column; gap:.15rem; position:relative; overflow:hidden;
}
.stat::after{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--line-strong)}
.stat--ok::after{background:var(--success)} .stat--warn::after{background:var(--warning)}
.stat--err::after{background:var(--error)}  .stat--accent::after{background:var(--accent)}
.stat__label{
  font-size:var(--text-xxs); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.stat__value{
  font-size:var(--text-stat); font-weight:600; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat__foot{font-size:var(--text-xs); color:var(--muted)}

/* ============================================================================
   TABLES
   ============================================================================ */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; font-size:var(--text-sm)}
.tbl th{
  text-align:left; font-size:var(--text-xxs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:.65rem var(--space-4);
  border-bottom:var(--border-1) solid var(--line-strong); white-space:nowrap;
  background:var(--paper-2); position:sticky; top:0; z-index:2;
}
.tbl td{
  padding:.6rem var(--space-4); border-bottom:var(--border-1) solid var(--line);
  vertical-align:middle;
}
.tbl tbody tr:hover td{background:var(--paper-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num,.tbl .right{text-align:right}
.tbl a{color:var(--ink); font-weight:600; border-bottom:1px solid var(--line-strong)}
.tbl a:hover{color:var(--accent-dark); border-color:var(--accent)}
.tbl .sub{display:block; font-size:var(--text-xs); color:var(--muted); font-weight:400}
.tbl--compact td{padding:.4rem var(--space-3)}
tr.is-alert td{background:var(--error-soft)}
tr.is-alert:hover td{background:#f5ddd9}
tr.is-warn td{background:var(--warning-soft)}
tfoot td{font-weight:700; background:var(--paper-2); border-top:2px solid var(--line-strong)}

.filterbar{
  display:flex; align-items:flex-start; gap:var(--space-3) var(--space-4); flex-wrap:wrap;
  padding:var(--space-3) var(--space-5); background:var(--paper-2);
  border-bottom:var(--border-1) solid var(--line);
}
.field{display:flex; flex-direction:column; gap:.25rem}
/* Inside a filter bar every field reserves a label line and a hint line, so a field that
   carries a hint does not push the fields beside it off the baseline. */
.filterbar>.field{min-width:11rem; flex:1 1 11rem; max-width:18rem}
.filterbar>.field>label,.filterbar>.field>.field__label{min-height:1.05em}
.filterbar>.field>.field__hint{min-height:1.15em}
.filterbar>.field--actions{
  flex:0 0 auto; max-width:none; flex-direction:row; align-items:center;
  gap:var(--space-2); margin-top:calc(1.05em + .25rem);
}
.field label,.field .field__label{font-size:var(--text-xxs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
/* Error slot for one field. It occupies no space while empty; `role="alert"`
   is already in the page so screen readers announce text inserted by JS. */
.field__err{font-size:var(--text-xs); color:var(--error); font-weight:600; line-height:var(--leading-snug)}
.field__err:empty{display:none}
.input[aria-invalid="true"]{border-color:var(--error); background:var(--error-soft)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--error-soft)}
/* A read-only value is not a control, so its label is a <span>; the value cell
   carries role/aria-labelledby so keyboard users can reach and identify it. */
.input--readonly[role="textbox"]:focus-visible{outline:var(--ring) solid var(--accent); outline-offset:2px}
.input,select.input,textarea.input{
  padding:.45rem .65rem; border-radius:var(--radius-sm);
  border:var(--border-1) solid var(--line-strong); background:var(--paper);
  font-size:var(--text-sm); min-width:0; transition:border var(--transition);
}
.input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.input--search{min-width:240px; background-image:none}
textarea.input{resize:vertical; min-height:76px; line-height:var(--leading-snug)}
.input[readonly]{background:var(--paper-2); color:var(--muted)}
/* Crew-rating notes are intentionally single-line, but the full seeded note must
   remain visible at desktop widths. Narrow screens keep the table's existing
   horizontal scroll rather than squeezing the editable value into an ellipsis. */
.tbl input[name$="[note]"]{width:100%; min-width:220px}

.formgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4)}
.formgrid--3{grid-template-columns:repeat(3,1fr)}
.formgrid .field--full{grid-column:1/-1}

/* definition list used on detail pages */
.dl{display:grid; grid-template-columns:auto 1fr; gap:.5rem var(--space-4); font-size:var(--text-sm)}
.dl dt{color:var(--muted); font-size:var(--text-xs); padding-top:.15rem}
.dl dd{margin:0; font-weight:500}

/* ============================================================================
   TABS · TIMELINE · MISC
   ============================================================================ */
.tabs{display:flex; gap:.15rem; border-bottom:var(--border-1) solid var(--line); overflow-x:auto}
.tabs__btn{
  padding:.65rem 1rem; border:0; background:none; cursor:pointer; white-space:nowrap;
  font-size:var(--text-sm); font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs__btn:hover{color:var(--ink)}
.tabs__btn.is-on{color:var(--ink); border-bottom-color:var(--accent)}
.tabs__btn .pill{margin-left:.4rem}
.tabpane{display:none; padding-top:var(--space-5)}
.tabpane.is-on{display:block}

.timeline{list-style:none; padding:0; margin:0; position:relative}
.timeline::before{content:''; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--line-strong)}
.timeline li{position:relative; padding:0 0 var(--space-4) var(--space-6)}
.timeline li::before{
  content:''; position:absolute; left:2px; top:5px; width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line-strong);
}
.timeline li.is-ok::before{border-color:var(--success); background:var(--success)}
.timeline li.is-err::before{border-color:var(--error); background:var(--error)}
.timeline li.is-now::before{border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.timeline__when{font-size:var(--text-xs); color:var(--muted)}
.timeline b{font-weight:600}

.gate{
  display:flex; gap:var(--space-3); align-items:flex-start;
  border-radius:var(--radius); padding:var(--space-4);
  background:var(--error-soft); border:var(--border-1) solid rgba(179,66,58,.25);
  font-size:var(--text-sm); color:#7d2f29;
}
.gate--ok{background:var(--success-soft); border-color:rgba(47,125,85,.25); color:#215c3e}
.gate--warn{background:var(--warning-soft); border-color:rgba(181,130,42,.28); color:#7a5716}
.gate--info{background:var(--info-soft); border-color:rgba(47,93,168,.22); color:#274c86}
.gate__ico{font-size:1.1rem; line-height:1.2}
.gate b{display:block; margin-bottom:.15rem}

/* `display:block` is functional. `.bar` is emitted as a <span>, and `height`
   does not apply to an inline box; without this rule, the Projects progress
   column renders at zero pixels on every page that uses it. */
.bar{display:block; height:6px; border-radius:var(--radius-pill); background:var(--paper-3); overflow:hidden}
.bar>i{display:block; height:100%; background:var(--accent); border-radius:inherit}
.bar--ok>i{background:var(--success)} .bar--err>i{background:var(--error)}

.thumb{
  aspect-ratio:4/3; border-radius:var(--radius-sm); border:var(--border-1) solid var(--line);
  background:linear-gradient(135deg,#e9e4da 0%,#d8d0c2 45%,#efeae1 100%);
  display:grid; place-items:center; color:var(--muted); font-size:var(--text-xs);
  position:relative; overflow:hidden;
}
.thumb::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(closest-side at 30% 35%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(closest-side at 72% 68%,rgba(120,110,95,.28),transparent 70%);
  mix-blend-mode:soft-light;
}
.thumb span{position:relative; z-index:1}
.thumbgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3)}

.qr{
  width:78px; height:78px; border-radius:var(--radius-sm); flex-shrink:0;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 8px),
    repeating-linear-gradient(0deg,var(--ink) 0 4px,transparent 4px 8px);
  background-color:var(--paper); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line-strong);
  opacity:.85;
}

.empty{padding:var(--space-8) var(--space-5); text-align:center; color:var(--muted)}
.empty b{display:block; color:var(--ink); font-size:var(--text-md); margin-bottom:.35rem}
.empty p{max-width:48ch; margin:0 auto var(--space-4)}
.empty__ico{display:grid; place-items:center; width:48px; height:48px; margin:0 auto var(--space-3);
  border-radius:50%; background:var(--paper-2); border:var(--border-1) solid var(--line); font-size:1.5rem}

.pagination{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--space-1); flex-wrap:wrap;
  padding:var(--space-3) var(--space-5); border-top:var(--border-1) solid var(--line); background:var(--paper-2);
}
.pagination a{display:inline-flex; min-width:34px; min-height:34px; align-items:center; justify-content:center;
  padding:.35rem .55rem; border:var(--border-1) solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--paper); font-size:var(--text-xs); font-weight:600}
.pagination a:hover{border-color:var(--accent); color:var(--accent-dark)}
.pagination a.is-current{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.pagination a.is-disabled{opacity:.45; pointer-events:none}
.pagination__gap{padding:.25rem; color:var(--muted)}

.coverage{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; padding:var(--space-3);
  margin-top:var(--space-4); border:var(--border-1) solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper-2); font-size:var(--text-sm)}
.coverage b{margin-right:auto}
.coverage .is-warn{color:var(--warning)}

.kbd{
  font-family:var(--font-mono); font-size:var(--text-xs); padding:.1rem .35rem;
  border:var(--border-1) solid var(--line-strong); border-bottom-width:2px;
  border-radius:4px; background:var(--paper-2);
}

/* ============================================================================
   PHONE FRAME  (mobile screens shown inside a device mock)
   ============================================================================ */
.phonestage{display:grid; grid-template-columns:390px minmax(0,1fr); gap:var(--space-7); align-items:start}
.phone{
  width:390px; border-radius:38px; background:#0d1116; padding:11px;
  box-shadow:var(--shadow-3); position:sticky; top:calc(var(--header-h) + var(--space-5));
}
.phone__screen{
  border-radius:28px; background:var(--paper-2); overflow:hidden;
  height:748px; display:flex; flex-direction:column; position:relative;
}
.phone__status{
  height:34px; background:var(--brand); color:var(--on-brand); display:flex; align-items:center;
  justify-content:space-between; padding:0 1.1rem; font-size:var(--text-xxs); flex-shrink:0;
}
.phone__bar{
  background:var(--brand); color:var(--on-brand); padding:.55rem 1rem .85rem; flex-shrink:0;
  display:flex; align-items:center; gap:.6rem;
}
.phone__bar b{font-size:var(--text-md); font-weight:600}
.phone__body{flex:1; overflow-y:auto; padding:var(--space-4)}
.phone__body::-webkit-scrollbar{width:0}
.phone__tabbar{
  flex-shrink:0; display:flex; border-top:var(--border-1) solid var(--line);
  background:var(--paper); padding:.4rem .5rem .8rem;
}
.phone__tab{
  flex:1; text-align:center; font-size:var(--text-xxs); color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.3rem 0;
}
.phone__tab.is-on{color:var(--accent-dark); font-weight:700}
.phone__tab i{font-style:normal; font-size:1.05rem}

.mbtn{
  display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  padding:1rem; border-radius:var(--radius); border:0; cursor:pointer;
  font-size:var(--text-md); font-weight:700; background:var(--brand); color:var(--on-brand);
}
.mbtn--accent{background:var(--accent)}
.mbtn--ok{background:var(--success)}
.mbtn--err{background:var(--error)}
.mbtn--ghost{background:var(--paper); color:var(--ink); border:var(--border-1) solid var(--line-strong)}
.mbtn--huge{padding:2.6rem 1rem; font-size:1.15rem; flex-direction:column; gap:.7rem; border-radius:var(--radius-lg)}
.mbtn--huge i{font-style:normal; font-size:3.2rem; line-height:1}

.mcard{
  background:var(--paper); border:var(--border-1) solid var(--line);
  border-radius:var(--radius); padding:var(--space-4); margin-bottom:var(--space-3);
}
.mcard__t{display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem}
.mcard__t b{font-size:var(--text-base)}
.mgroup{
  font-size:var(--text-xxs); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--muted); font-weight:700; margin:var(--space-4) 0 var(--space-2);
}
.mgroup:first-child{margin-top:0}

/* ============================================================================
   PUBLIC SITE
   ============================================================================ */
.hero{
  position:relative; background:var(--brand); color:var(--on-brand); overflow:hidden;
  padding-block:clamp(4rem,10vw,8rem);
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.4;
  background:
    radial-gradient(60% 80% at 78% 25%,rgba(169,128,63,.55),transparent 70%),
    radial-gradient(50% 60% at 15% 90%,rgba(255,255,255,.13),transparent 70%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px);
}
.hero__in{position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.hero h1{
  font-family:var(--font-display); font-size:var(--text-3xl); font-weight:500;
  letter-spacing:-.015em; max-width:16ch; margin-bottom:var(--space-4);
}
.hero p{font-size:var(--text-lg); color:var(--on-dark-soft); max-width:56ch; line-height:var(--leading-snug)}
.hero__cta{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6)}
.hero__facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
  margin-top:var(--space-8); padding-top:var(--space-6);
  border-top:var(--border-1) solid var(--on-dark-edge);
}
.hero__facts b{display:block; font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600}
.hero__facts span{font-size:var(--text-xs); color:var(--on-dark-mute); letter-spacing:.06em; text-transform:uppercase}

.section{padding-block:var(--step); background:var(--paper)}
.section--alt{background:var(--paper-2)}
.section--ink{background:var(--brand); color:var(--on-brand)}
.section__head{max-width:62ch; margin-bottom:var(--space-7)}
.section__head h2{
  font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600;
  margin:var(--space-2) 0 var(--space-3);
}
.section__head p{color:var(--muted); font-size:var(--text-md)}
.section--ink .section__head p{color:var(--on-dark-soft)}

.tile{
  background:var(--paper); border:var(--border-1) solid var(--line); border-radius:var(--radius);
  padding:var(--space-5); transition:transform var(--transition),box-shadow var(--transition);
}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.tile h3{font-size:var(--text-md); margin-bottom:var(--space-2)}
.tile p{color:var(--muted); font-size:var(--text-sm); margin:0}
.tile__ico{
  width:40px; height:40px; border-radius:var(--radius-sm); background:var(--accent-soft);
  display:grid; place-items:center; margin-bottom:var(--space-4); font-size:1.15rem;
}

.ftr{background:var(--brand-dark); color:var(--on-dark-mute); padding-block:var(--space-7) var(--space-5)}
.ftr__grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-6)}
.ftr__colhead{color:var(--on-dark); font-size:var(--text-sm); font-weight:600;
  margin-bottom:var(--space-3)}
.ftr a{display:block; font-size:var(--text-sm); padding:.15rem 0}
.ftr a:hover{color:var(--accent)}
.ftr__bottom{
  margin-top:var(--space-6); padding-top:var(--space-4);
  border-top:var(--border-1) solid var(--on-dark-line);
  display:flex; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-xs);
}

/* login */
.authwrap{min-height:calc(100vh - var(--header-h)); display:grid; grid-template-columns:1fr 1fr}
.authside{
  background:var(--brand); color:var(--on-brand); padding:var(--space-9) var(--space-8);
  display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.authside::before{
  content:''; position:absolute; inset:0; opacity:.45;
  background:
    radial-gradient(55% 70% at 70% 30%,rgba(169,128,63,.5),transparent 70%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 10px);
}
.authside>*{position:relative; z-index:1}
.authside h2{font-family:var(--font-display); font-size:var(--text-2xl); margin:var(--space-3) 0}
.authform{display:flex; align-items:center; justify-content:center; padding:var(--space-8) var(--space-6)}
.authform__in{width:100%; max-width:400px}

/* switch user cards */
.usergrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4)}
.usercard{
  display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-5);
  background:var(--paper); border:var(--border-1) solid var(--line); border-radius:var(--radius);
  transition:all var(--transition);
}
.usercard:hover{border-color:var(--accent); box-shadow:var(--shadow-2); transform:translateY(-2px)}
.usercard.is-current{border-color:var(--accent); background:var(--accent-soft)}
.usercard__av{width:44px; height:44px; font-size:var(--text-base); flex-shrink:0}
.usercard b{display:block; font-size:var(--text-md)}
.usercard .role{font-size:var(--text-xs); color:var(--accent-dark); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.usercard p{font-size:var(--text-xs); color:var(--muted); margin:.4rem 0 0}


/* ============================================================================
   RESPONSIVE — Bootstrap boundaries, max-width only
   ============================================================================ */
@media (max-width:1399.98px){
  :root{--maxw:var(--container-xl); --maxw-wide:1400px}
  /* tighter links from here down: a media query counts the classic scrollbar
     and clientWidth does not, so the menu must fit with ~15px to spare */
  .mainnav__link{padding:.5rem .5rem; font-size:var(--text-xs)}
  .phonestage{grid-template-columns:360px minmax(0,1fr); gap:var(--space-6)}
  .phone{width:360px}
}
@media (max-width:1199.98px){
  :root{--maxw:var(--container-lg); --maxw-wide:1180px}
  .grid--5,.grid--4{grid-template-columns:repeat(2,1fr)}
  .hero__facts{grid-template-columns:repeat(2,1fr)}
  .usergrid{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1399.98px){
  /* main menu collapses into a full-width sheet under the header — not a sidebar */
  body[data-role] .mainnav{
    display:none; position:absolute; top:var(--header-h); left:0; right:0;
    background:var(--paper); color:var(--ink); flex-direction:column; align-items:stretch;
    gap:0; padding:var(--space-3); border-bottom:var(--border-1) solid var(--line);
    box-shadow:var(--shadow-3); max-height:calc(100vh - var(--header-h)); overflow-y:auto;
    z-index:var(--z-dropdown);
  }
  body[data-role] .hdr.is-navopen .mainnav{display:flex}
  body[data-role] .mainnav__link{color:var(--ink); font-size:var(--text-base); padding:.6rem .5rem; justify-content:space-between}
  body[data-role] .mainnav__link:hover,.mainnav__item:hover>.mainnav__link{background:var(--paper-2); color:var(--ink)}
  body[data-role] .mainnav__item.is-active>.mainnav__link{background:var(--accent-soft); box-shadow:none}
  body[data-role] .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--line); border-radius:0; margin-left:var(--space-3);
    padding:0 0 var(--space-2) var(--space-2); display:none;
  }
  body[data-role] .mainnav__item.is-open>.dropdown{display:block}
  body[data-role] .mainnav__item:hover>.dropdown,.mainnav__item:focus-within>.dropdown{display:none}
  body[data-role] .mainnav__item.is-open:hover>.dropdown{display:block}
  body[data-role] .burger{
    display:grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-sm);
    border:var(--border-1) solid var(--on-dark-edge); background:none; color:var(--on-brand); cursor:pointer;
    order:-1;
  }
  body[data-role] .burger span{display:block; width:17px; height:1.6px; background:currentColor; box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
}
@media (max-width:991.98px){
  :root{--maxw:var(--container-md); --maxw-wide:var(--container-md)}
  /* main menu collapses into a full-width sheet under the header — not a sidebar */
  .mainnav{
    display:none; position:absolute; top:var(--header-h); left:0; right:0;
    background:var(--paper); color:var(--ink); flex-direction:column; align-items:stretch;
    gap:0; padding:var(--space-3); border-bottom:var(--border-1) solid var(--line);
    box-shadow:var(--shadow-3); max-height:calc(100vh - var(--header-h)); overflow-y:auto;
    z-index:var(--z-dropdown);
  }
  .hdr.is-navopen .mainnav{display:flex}
  .mainnav__link{color:var(--ink); font-size:var(--text-base); padding:.6rem .5rem; justify-content:space-between}
  .mainnav__link:hover,.mainnav__item:hover>.mainnav__link{background:var(--paper-2); color:var(--ink)}
  .mainnav__item.is-active>.mainnav__link{background:var(--accent-soft); box-shadow:none}
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--line); border-radius:0; margin-left:var(--space-3);
    padding:0 0 var(--space-2) var(--space-2); display:none;
  }
  .mainnav__item.is-open>.dropdown{display:block}
  .mainnav__item:hover>.dropdown,.mainnav__item:focus-within>.dropdown{display:none}
  .mainnav__item.is-open:hover>.dropdown{display:block}
  .burger{
    display:grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-sm);
    border:var(--border-1) solid var(--on-dark-edge); background:none; color:var(--on-brand); cursor:pointer;
    order:-1;
  }
  .burger span{display:block; width:17px; height:1.6px; background:currentColor; box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
  .mega{width:min(560px,calc(100vw - 2*var(--gut)))}
  .mega__cols{grid-template-columns:repeat(2,1fr)}
  .grid--3,.grid--main{grid-template-columns:1fr}
  .authwrap{grid-template-columns:1fr}
  .authside{padding:var(--space-7) var(--space-5)}
  .phonestage{grid-template-columns:1fr}
  .phone{position:static; margin-inline:auto}
  .thumbgrid{grid-template-columns:repeat(3,1fr)}
  .acct__meta{display:none}
}
@media (max-width:767.98px){
  :root{--maxw:var(--container-sm); --maxw-wide:var(--container-sm); --header-h:58px}
  .grid--2,.grid--4,.grid--5,.formgrid,.formgrid--3,.usergrid,.ftr__grid{grid-template-columns:1fr}
  .mega{
    width:calc(100vw - 2*var(--gut)); position:fixed;
    top:calc(var(--header-h) - 2px); right:var(--gut); bottom:var(--space-2); left:var(--gut);
    max-height:none;
  }
  .mega__cols{grid-template-columns:1fr; gap:var(--space-4)}
  .pagehead__actions{margin-left:0; width:100%}
  .brand__sub{display:none}
  .thumbgrid{grid-template-columns:repeat(2,1fr)}
  .hero__facts{grid-template-columns:1fr 1fr}
  .phone{width:100%; max-width:390px; border-radius:28px}
  .phone__screen{height:640px; border-radius:20px}
}
@media (max-width:575.98px){
  .brand__name{font-size:1.1rem}
  .hero__cta .btn{width:100%}
  .card__body{padding:var(--space-4)}
  .tbl th,.tbl td{padding:.5rem .6rem}
  .stat__value{font-size:1.5rem}
}

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

@media print{
  .hdr,.pagehead__actions,.ftr{display:none !important}
  body{background:var(--paper)}
  .card{break-inside:avoid; box-shadow:none}
}

/* a screen the current role cannot reach — rendered as plain text, not a link */
.nolink{color:var(--muted); border-bottom:1px dotted var(--line-strong); cursor:help}

/* ============================================================================
   IMAGES — a .thumb containing a real image removes the mock stone texture
   ============================================================================ */
.thumb--img{background:var(--paper-3); padding:0}
.thumb--img::after{display:none}
.thumb--img img{width:100%; height:100%; object-fit:cover; display:block}
.tile .thumb--img img{transition:transform var(--dur-slow) var(--ease)}
.tile:hover .thumb--img img{transform:scale(1.04)}

/* Background-image hero: use a dark overlay so text remains legible. */
.hero--img{background-size:cover; background-position:center}
.hero--img::before{
  background:
    linear-gradient(100deg,rgba(17,22,30,.94) 0%,rgba(17,22,30,.72) 46%,rgba(17,22,30,.42) 100%),
    radial-gradient(60% 80% at 78% 25%,rgba(169,128,63,.35),transparent 70%);
  opacity:1;
}

/* ============================================================================
   LOGIN — plain: one card in the middle of the page, no decoration
   ============================================================================ */
.authplain{
  min-height:calc(100vh - var(--header-h)); display:grid; place-items:center;
  padding-block:var(--space-8);
}
.authcard{
  width:100%; max-width:400px; background:var(--paper);
  border:var(--border-1) solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2); padding:var(--space-7) var(--space-6);
}
.authcard__head{text-align:center; margin-bottom:var(--space-6)}
.authcard__head .brand__mark{width:44px; height:44px; font-size:1.4rem; margin:0 auto var(--space-4)}
.authcard__head h1{font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600}
.authcard__foot{margin:var(--space-5) 0 0; text-align:center}
.authcard__foot:last-child{margin-top:var(--space-3)}

/* a phone screen standing on its own, centred */
.phonestage--solo{display:flex; justify-content:center}

/* ============================================================================
   ACTIONS — every action is an anchor, so it must not look like a link
   ============================================================================ */
.btn,.mbtn{text-decoration:none}
.rowacts{display:flex; gap:.35rem; justify-content:flex-end; flex-wrap:wrap}
.tbl .rowacts{opacity:.55; transition:opacity var(--transition)}
.tbl tr:hover .rowacts{opacity:1}

.formfoot{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5); background:var(--paper-2);
  border-top:var(--border-1) solid var(--line);
}
.formfoot .btn--ghost{border-color:var(--line-strong); color:var(--ink)}
.formfoot .btn--ghost:hover{background:var(--paper-3)}
.field__hint{font-size:var(--text-xs); color:var(--muted); line-height:var(--leading-snug)}

.thumblink{display:block}
.thumblink:hover .thumb{border-color:var(--accent); box-shadow:var(--shadow-1)}
.mcard--link{display:block; transition:border var(--transition)}
.mcard--link:hover{border-color:var(--accent)}
.phone__back{
  font-size:1.5rem; line-height:1; color:var(--on-brand); padding:0 .2rem 0 0; margin-right:.1rem;
}
.phone__tab{text-decoration:none}

/* ---- confirm step for anything that changes state --------------------- */
.cmask{
  position:fixed; inset:0; z-index:var(--z-modal,80); display:grid; place-items:center;
  background:rgba(17,22,30,.55); padding:var(--space-5);
}
.cbox{
  width:100%; max-width:380px; background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); padding:var(--space-6); text-align:center;
}
.cbox h3{margin-bottom:var(--space-4)}
.cbox p{margin:0 0 var(--space-5); font-size:var(--text-base); line-height:var(--leading-snug)}
.cbox .row{display:flex; gap:var(--space-3); justify-content:center}
.reasonfield{display:flex; flex-direction:column; gap:.35rem; text-align:left; margin-bottom:var(--space-5)}
.reasonfield span{font-size:var(--text-xs); color:var(--muted); font-weight:600}
.reasonfield .field__err{color:var(--error)}
.reasonfield textarea{min-height:100px}
.cbox__title{text-align:center}
.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn--err{background:var(--error); border-color:var(--error); color:var(--on-brand)}

/* ---- printable document view ------------------------------------------ */
.sheet{
  width:100%; margin:0 auto var(--space-6); background:var(--paper);
  border:var(--border-1) solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:var(--space-8) var(--space-7);
}
.sheet__head{display:flex; align-items:flex-start; gap:var(--space-5); margin-bottom:var(--space-7)}
.sheet__head h2{font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600}
.sheet__co{text-align:right; margin-left:auto; font-size:var(--text-xs); color:var(--muted); line-height:1.6}
.sheet__rule{height:2px; background:var(--brand); margin:var(--space-5) 0}
.labelsheet{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3)}
.labelsheet .lbl{
  border:1px dashed var(--line-strong); border-radius:var(--radius-sm);
  padding:var(--space-3); display:flex; gap:var(--space-3); align-items:center;
}
.labelsheet .qr{width:56px; height:56px}
@media print{
  .hdr,.pagehead__actions,.ftr,.no-print{display:none !important}
  .sheet{box-shadow:none; border:0; max-width:none; padding:0}
}

@media (max-width:575.98px){
  .labelsheet{grid-template-columns:repeat(2,1fr)}
  .formfoot{flex-direction:column; align-items:stretch}
  .formfoot .spacer{display:none}
}

/* rating scale — five chips, one tap */
.ratechip{
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  border:var(--border-1) solid var(--line-strong); border-radius:var(--radius-sm);
  font-weight:600; font-size:var(--text-sm); background:var(--paper);
  transition:all var(--transition);
}
.ratechip:hover{border-color:var(--accent)}
.ratechip.is-on{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}

/* ============================================================================
   PHONE SCREENS — DESKTOP-FIRST, like every other block in this file
   ============================================================================
   A stonemason only ever opens these on a phone, so the phone is what they are
   DESIGNED for. That is a statement about the audience, not about the cascade.

   The house breakpoint standard is desktop-first and `max-width` only: base
   styles target the widest screen and each query is the upper bound of a tier
   that overrides downward. This block used to be the one exception in the file
   and carried a note saying so. An exception in one block is the thing a reader
   has to hold in their head for the whole file, and the same design reads
   perfectly well the other way round:

     base            the review frame — a 390px device on a desktop page, which
                     is what anyone reviewing these screens is looking at
     <= md-down      the real thing — no frame, the screen fills the viewport,
                     the phone's own status bar is not drawn twice
   ============================================================================ */
body[data-phone] .main{padding-block:var(--space-6) var(--space-9)}
body[data-phone] > .hdr{display:none}
body[data-phone] .main>.container{max-width:var(--maxw-wide); padding-inline:var(--gut)}
body[data-phone] .pagehead{display:none}
body[data-phone] .phonestage{display:block}
body[data-phone] .phonestage--solo{display:flex; justify-content:center}
body[data-phone] .phone{
  width:390px; max-width:390px; border-radius:38px; padding:11px; background:#0d1116;
  box-shadow:var(--shadow-3); position:sticky; top:var(--space-5);
}
body[data-phone] .phone__screen{border-radius:28px; height:748px; background:var(--paper-2)}
body[data-phone] .phone__status{display:flex}
body[data-phone] .phone__bar{padding:.55rem 1rem .85rem}
body[data-phone] .phone__body{padding:var(--space-4)}
body[data-phone] .phone__tabbar{padding:.5rem .5rem calc(.8rem + env(safe-area-inset-bottom,0px))}
body[data-phone] .mbtn{padding:1.1rem; font-size:var(--text-md)}

@media (max-width:767.98px){
  /* the real thing: on a phone the screen IS the page, so no frame and no max-width */
  body[data-phone] .main{padding-block:0}
  body[data-phone] .main>.container{max-width:none; padding-inline:0}
  body[data-phone] .phonestage,
  body[data-phone] .phonestage--solo{display:block}
  body[data-phone] .phone{
    width:100%; max-width:none; border-radius:0; padding:0; background:none;
    box-shadow:none; position:static;
  }
  body[data-phone] .phone__screen{border-radius:0; height:100vh}
  body[data-phone] .phone__status{display:none}
  body[data-phone] .phone__bar{padding:.85rem var(--space-4)}
  body[data-phone] .phone__body{padding:var(--space-4) var(--space-4) var(--space-6)}
}

/* upload dropzone — an affordance that actually goes somewhere */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  padding:var(--space-6) var(--space-4); text-align:center;
  border:1.5px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--paper-2); color:var(--ink-soft); cursor:pointer;
  transition:border-color var(--transition),background var(--transition);
}
.dropzone:hover{border-color:var(--accent); background:var(--accent-soft)}
.dropzone__ico{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:var(--border-1) solid var(--line-strong);
  font-size:1.15rem; line-height:1; color:var(--accent-dark);
}
.dropzone b{font-size:var(--text-sm)}
.dropzone__note{font-size:var(--text-xs); color:var(--muted)}

/* ---- a control pointing at a screen this role cannot reach ---------------
   It keeps its shape so the layout holds, but it is plainly not available. */
.nolink{color:var(--muted); border-bottom:1px dotted var(--line-strong); cursor:help}
.mcard.nolink,.usercard.nolink,.thumblink.nolink,.chip.nolink,
.btn.nolink,.mega__link.nolink,.dropdown__link.nolink{
  border-bottom-style:solid; cursor:not-allowed;
}
.btn.nolink,.chip.nolink{opacity:.45; box-shadow:none}
.mcard.nolink,.usercard.nolink{opacity:.6}
.mcard.nolink{border-bottom:var(--border-1) solid var(--line)}
.thumblink.nolink{opacity:.55; display:block}

/* an action the business rules currently forbid — visible, but plainly shut */
.btn.is-blocked{opacity:.5; border-style:dashed; cursor:not-allowed}
/* the second language on the three bilingual screens (E2 · D41) */
.vi{display:block; font-size:.82em; font-weight:500; opacity:.72; margin-top:.15rem}
.mbtn .vi{font-size:.7em}

/* Bilingual safety-warning label — required WHS surface 1 of 3. */
.safety{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.75rem;
        padding:.7rem .8rem; border-radius:var(--radius-2);
        background:#fbf1dd; border:1px solid #b5822a; color:#5c4212;
        font-size:var(--text-sm); line-height:var(--leading-snug)}
.safety__ico{font-size:1.15rem; line-height:1}
.safety .vi{opacity:.85}

/* Instruction card fixed to the cutting machine — bilingual surface 3 of 3. */
.mc{margin:0; padding-left:1.4rem; display:flex; flex-direction:column; gap:.7rem}
.mc li{line-height:var(--leading-snug)}
.mc__en{display:block; font-weight:600}
[data-report-panel="stock"]{display:none}
[data-report-panel="stock"]:target{display:block}
[data-report-panel="stock"]:target~[data-report-panel="margin"]{display:none}