/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app
 * nav: N1b app bar (grouped menus) → side sheet under 960px · footer: none (app chrome)
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
 */

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--dock);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--lh-thai);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--steel-ink)}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);font-style:normal;line-height:1.3;margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  min-height:40px;padding:0 var(--space-sm);
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;line-height:1;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn svg{width:18px;height:18px;flex:none}

.btn--primary{background:var(--steel);color:var(--on-steel)}
.btn--primary:hover{background:var(--steel-hover)}
.btn--ghost{background:var(--dock-2);color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--steel-wash);border-color:var(--steel);color:var(--steel-ink)}
.btn--quiet{background:transparent;color:var(--ink-2)}
.btn--quiet:hover{background:var(--dock-3);color:var(--ink)}
.btn--icon{width:44px;min-height:44px;padding:0}

/* =========================================================
   App bar
   ========================================================= */
.appbar{
  position:sticky;top:0;z-index:1000;
  height:var(--bar-h);
  background:var(--dock-2);
  border-bottom:1px solid var(--line);
}
.appbar__inner{
  max-width:var(--shell);height:100%;margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:var(--space-md);
}
.wordmark{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-md);
  color:var(--ink);text-decoration:none;white-space:nowrap;letter-spacing:-.01em;
}
.wordmark__tag{
  width:12px;height:18px;border-radius:3px;background:var(--tag);
  box-shadow:inset 0 -5px 0 var(--tag-deep);
}
.wordmark b{font-weight:700;color:var(--steel)}

.appbar__menu-btn{display:none;margin-left:auto}
.appbar__end{margin-left:auto;display:flex;align-items:center;gap:var(--space-2xs);min-width:0}
.appbar__user{font-size:var(--text-sm);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;flex:none}
.appbar__user[hidden]{display:none}
/* ---------- nav (desktop: inline groups with drop panels) ---------- */
.nav{display:flex;align-items:center;gap:var(--space-3xs);min-width:0}
.nav__head{display:none}
.nav__group{position:relative}
.nav__solo,
.nav__group > summary{
  list-style:none;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;gap:6px;
  min-height:40px;padding:0 var(--space-xs);border-radius:var(--r-pill);
  font-weight:600;font-size:var(--text-sm);color:var(--ink-2);white-space:nowrap;
  transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);
}
.nav__group > summary::-webkit-details-marker{display:none}
.nav__solo:hover,
.nav__group > summary:hover{background:var(--dock-3);color:var(--ink)}
.nav__group[open] > summary,
.nav__group.is-current > summary{background:var(--steel-wash);color:var(--steel-ink)}
.nav__chev{width:14px;height:14px;transition:transform var(--dur-short) var(--ease-out)}
.nav__group[open] .nav__chev{transform:rotate(180deg)}

.nav__panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:260px;
  margin:0;padding:var(--space-2xs);list-style:none;
  background:var(--dock-2);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-md);
}
.nav__link{
  display:flex;align-items:center;gap:var(--space-xs);
  padding:var(--space-2xs) var(--space-xs);border-radius:var(--r-control);
  color:var(--ink);text-decoration:none;font-size:var(--text-sm);white-space:nowrap;
}
.nav__link:hover{background:var(--dock-3)}
.nav__link[aria-current="page"]{background:var(--steel-wash);color:var(--steel-ink);font-weight:600}
.nav__link-icon{
  flex:none;width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;background:var(--dock-3);color:var(--ink-2);
}
.nav__link[aria-current="page"] .nav__link-icon{background:var(--steel);color:var(--on-steel)}
.nav__link-icon svg{width:16px;height:16px}
/* each menu group has its colour (the same as its home-page module): a solid tile on the group, tinted tiles on its pages */
.nav--master{--m:var(--hue-violet);--m-ink:var(--hue-violet-ink);--m-wash:var(--hue-violet-wash)}
.nav--acc{--m:var(--hue-rose);--m-ink:var(--hue-rose-ink);--m-wash:var(--hue-rose-wash)}
.nav--pay{--m:var(--hue-indigo);--m-ink:var(--hue-indigo-ink);--m-wash:var(--hue-indigo-wash)}
.nav--stock,.nav--maint{--m:var(--tag);--m-ink:var(--tag-ink);--m-wash:var(--tag-wash)}
.nav--project{--m:var(--steel);--m-ink:var(--steel-ink);--m-wash:var(--steel-wash)}
.nav--hr{--m:var(--hue-green);--m-ink:var(--hue-green-ink);--m-wash:var(--hue-green-wash)}
.nav--quote{--m:var(--hue-amber);--m-ink:var(--hue-amber-ink);--m-wash:var(--hue-amber-wash)}
.nav--service{--m:var(--hue-teal);--m-ink:var(--hue-teal-ink);--m-wash:var(--hue-teal-wash)}
.nav__gicon{
  flex:none;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;background:var(--m,var(--steel));color:#fff;
  box-shadow:0 1px 2px rgba(16,22,27,.18);
}
.nav__gicon svg{width:16px;height:16px}
.nav__solo,.nav__group > summary{justify-content:flex-start}
.nav__chev{margin-left:auto}
[class*="nav--"] .nav__link-icon{background:var(--m-wash);color:var(--m-ink)}
[class*="nav--"] .nav__link[aria-current="page"] .nav__link-icon{background:var(--m);color:#fff}

.scrim{
  position:fixed;inset:0;z-index:1090;background:var(--scrim);
  opacity:0;pointer-events:none;transition:opacity var(--dur-short) var(--ease-out);
}

/* ---------- nav from 960px: fixed sidebar on the left, groups open in place ---------- */
:root{--side-w:250px}
@media (min-width:960px){
  .appbar__inner{max-width:none}
  .nav{
    position:fixed;top:var(--bar-h);left:0;bottom:0;z-index:900;
    width:var(--side-w);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:var(--space-xs);overflow-y:auto;overscroll-behavior:contain;
    background:var(--dock-2);border-right:1px solid var(--line);
  }
  .nav__solo,
  .nav__group > summary{border-radius:var(--r-control)}
  .nav__panel{position:static;min-width:0;box-shadow:none;border:0;background:transparent;padding:2px 0 var(--space-2xs)}
  .nav__link{white-space:normal}
  main.main{margin-left:var(--side-w)}       /* beats .main{margin:0 auto} further down */
}

/* ---------- nav under 960px: right-hand sheet ---------- */
@media (max-width:959px){
  .appbar__menu-btn{display:inline-flex}
  .appbar__end .btn__label{display:none}
  .appbar__user{max-width:34vw;font-size:var(--text-xs)}
  .appbar__end .btn--quiet{width:44px;min-height:44px;padding:0}
  .nav{
    position:fixed;top:0;right:0;bottom:0;z-index:1100;
    width:min(340px,88vw);
    flex-direction:column;align-items:stretch;gap:var(--space-3xs);
    padding:var(--space-sm);overflow-y:auto;overscroll-behavior:contain;
    background:var(--dock-2);box-shadow:var(--shadow-lg);
    transform:translateX(100%);visibility:hidden;
    transition:transform var(--dur-long) var(--ease-out),visibility 0s linear var(--dur-long);
  }
  .nav.is-open{transform:none;visibility:visible;transition:transform var(--dur-long) var(--ease-out),visibility 0s}
  .nav.is-open ~ .scrim{opacity:1;pointer-events:auto}
  .nav__head{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:var(--space-xs);margin-bottom:var(--space-2xs);border-bottom:1px solid var(--line);
  }
  .nav__solo,
  .nav__group > summary{min-height:48px;font-size:var(--text-base)}
  .nav__panel{position:static;min-width:0;box-shadow:none;border:0;background:transparent;padding:0 0 var(--space-2xs)}
  .nav__link{min-height:48px;font-size:var(--text-base);white-space:normal}
  body.nav-locked{overflow:hidden}
}

/* =========================================================
   Page shell
   ========================================================= */
.main{
  max-width:var(--shell);margin:0 auto;
  padding:var(--space-md) var(--gutter) var(--space-2xl);
}
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);
  flex-wrap:wrap;margin-bottom:var(--space-md);
}
.page-head__text{min-width:0}
.crumb{
  display:flex;align-items:center;gap:6px;margin:0 0 2px;
  font-size:var(--text-sm);color:var(--ink-3);
}
.crumb__sep{color:var(--line-strong)}
.page-head__title{
  font-size:var(--text-display);letter-spacing:-.015em;
  overflow-wrap:anywhere;min-width:0;
}
.page-head__actions{display:flex;gap:var(--space-2xs);flex-wrap:wrap}
.form-toggle svg{transition:transform var(--dur-short) var(--ease-out)}
.form-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (max-width:480px){
  .page-head{align-items:stretch}
  .page-head__actions,.page-head__actions .btn{width:100%}
}

.panel{
  background:var(--dock-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-md);
}
.panel--form{padding:var(--space-sm)}
.panel__head{
  display:flex;align-items:center;gap:var(--space-2xs);
  padding:var(--space-xs) var(--space-sm);
  border-bottom:1px solid var(--line);
}
.panel__title{font-size:var(--text-md)}
.panel__mark{width:4px;height:18px;border-radius:2px;background:var(--tag)}

/* horizontally scrollable grid well: the page never scrolls sideways,
   the table does, with a hint of the next column at the edge */
.grid-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:0 0 var(--r-card) var(--r-card);
}
.panel > .grid-scroll:first-child{border-radius:var(--r-card)}
.grid-scroll > .data-grid{min-width:1080px}
.grid-scroll > .data-grid--narrow{min-width:720px}

/* legacy wrappers the page JS still references */
#Notearea{position:fixed !important;top:calc(var(--bar-h) + 12px) !important;right:12px !important;width:min(320px,calc(100vw - 24px)) !important;z-index:1200 !important}

/* =========================================================
   Popup form tables (inside jqxWindow)
   ========================================================= */
.form-table{width:100%;border-collapse:separate;border-spacing:0 var(--space-2xs);background:transparent}
.form-table td{vertical-align:middle;padding:0 var(--space-2xs) 0 0;font-size:var(--text-sm);color:var(--ink-2)}
.form-table td:first-child{width:150px;font-weight:600;color:var(--ink)}
.form-table input:not([type=checkbox]),.form-table select{max-width:100%}
.form-hint{
  margin:var(--space-2xs) 0;padding:var(--space-xs) var(--space-sm);
  background:var(--tag-wash);border-radius:var(--r-control);
  color:var(--ink);font-size:var(--text-sm);line-height:1.6;
}
.form-hint ol{margin:4px 0 0;padding-left:1.2em}
.window-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2xs);margin-bottom:var(--space-xs);font-size:var(--text-sm)}
.check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:40px}
.check input{width:18px;height:18px;accent-color:var(--steel)}
.icon-action{cursor:pointer;vertical-align:middle;border-radius:6px;padding:4px;background:var(--dock-3)}
.icon-action:hover{background:var(--steel-wash)}

@media (max-width:640px){
  .form-table,.form-table tbody,.form-table tr,.form-table td{display:block;width:100% !important}
  .form-table tr{margin-bottom:var(--space-xs)}
  .form-table td:first-child{padding-bottom:4px}
  .form-table input:not([type=checkbox]),.form-table select,
  .form-table .jqx-dropdownlist-state-normal,
  .form-table .jqx-input-widget,
  .form-table .jqx-numberinput,
  .form-table .jqx-datetimeinput{width:100% !important;max-width:100%}
  .form-table .jqx-numberinput input,.form-table .jqx-datetimeinput input{width:100% !important}
}

/* =========================================================
   Home
   ========================================================= */
.home-head{margin:var(--space-sm) 0 var(--space-lg)}
.home-head__title{font-size:var(--text-display);letter-spacing:-.015em}
.home-head__lede{margin:var(--space-3xs) 0 0;color:var(--ink-2);max-width:56ch}

.modules{
  display:grid;gap:var(--space-sm);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.module{
  --m:var(--steel);--m-ink:var(--steel-ink);--m-wash:var(--steel-wash);
  display:flex;flex-direction:column;gap:var(--space-xs);
  padding:var(--space-md);background:linear-gradient(180deg,var(--m-wash),var(--dock-2) 75%);
  border:1px solid var(--line);border-top:4px solid var(--m);border-radius:var(--r-card);
}
/* each module has its own hue */
.module--stock{--m:var(--tag);--m-ink:var(--tag-ink);--m-wash:var(--tag-wash)}
.module--project{--m:var(--steel);--m-ink:var(--steel-ink);--m-wash:var(--steel-wash)}
.module--service{--m:var(--hue-teal);--m-ink:var(--hue-teal-ink);--m-wash:var(--hue-teal-wash)}
.module--master{--m:var(--hue-violet);--m-ink:var(--hue-violet-ink);--m-wash:var(--hue-violet-wash)}
.module--hr{--m:var(--hue-green);--m-ink:var(--hue-green-ink);--m-wash:var(--hue-green-wash)}
.module--acc{--m:var(--hue-rose);--m-ink:var(--hue-rose-ink);--m-wash:var(--hue-rose-wash)}
.module--pay{--m:var(--hue-indigo);--m-ink:var(--hue-indigo-ink);--m-wash:var(--hue-indigo-wash)}
.module--quote{--m:var(--hue-amber);--m-ink:var(--hue-amber-ink);--m-wash:var(--hue-amber-wash)}
.module__head{display:flex;align-items:center;gap:var(--space-xs)}
.module__icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--m);color:var(--on-steel);flex:none;
}
.module__icon svg{width:20px;height:20px}
.module__title{font-size:var(--text-lg);color:var(--m-ink)}
.module__links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.module__links li{border-bottom:1px solid var(--line-soft)}
.module__links a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);
  min-height:48px;color:var(--ink);text-decoration:none;
}
.module__links a:hover{color:var(--m-ink)}
.module__links a svg{width:16px;height:16px;color:var(--ink-3);transition:transform var(--dur-micro) var(--ease-out)}
.module__links a:hover svg{transform:translateX(3px);color:var(--m)}
.module--lead{grid-column:span 2}
.module__note{margin:0;color:var(--ink-2);font-size:var(--text-sm)}
@media (max-width:700px){.module--lead{grid-column:auto}}

/* =========================================================
   Login
   ========================================================= */
.auth{
  min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
}
.auth__side{
  position:relative;overflow:hidden;
  background:var(--night);color:var(--night-ink);
  padding:var(--space-xl) var(--space-xl);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-xl);
}
.auth__side::after{
  /* a single RFID read-field arc, drawn not photographed */
  content:"";position:absolute;right:-22%;bottom:-38%;
  width:90%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--night-line);
  box-shadow:0 0 0 48px var(--night-2),0 0 0 49px var(--night-line),0 0 0 110px var(--night),0 0 0 111px var(--night-line);
  pointer-events:none;
}
.auth__brand{position:relative;z-index:1}
.auth__brand .wordmark{color:var(--night-ink);font-size:var(--text-lg)}
.auth__brand .wordmark b{color:var(--tag-soft)}
.auth__statement{position:relative;z-index:1;max-width:30ch}
.auth__statement h1{font-size:clamp(1.9rem,2.6vw + 1rem,3rem);letter-spacing:-.02em;line-height:1.2}
.auth__statement h1 span{color:var(--tag-soft)}
.auth__statement p{margin:var(--space-sm) 0 0;color:var(--night-ink-2);max-width:40ch}
.auth__meta{position:relative;z-index:1;margin:0;font-size:var(--text-sm);color:var(--night-ink-2)}

.auth__main{display:grid;place-items:center;padding:var(--space-xl) var(--gutter)}
.auth__form-wrap{width:100%;max-width:380px}
.auth__logo{display:block;width:150px;height:auto;margin-bottom:var(--space-lg)}
.auth__title{font-size:var(--text-xl);letter-spacing:-.01em}
.auth__sub{margin:var(--space-3xs) 0 var(--space-lg);color:var(--ink-2)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-sm)}
.field label{font-weight:600;font-size:var(--text-sm)}
.field input{
  width:100%;min-height:48px;padding:0 var(--space-sm);
  font:inherit;font-size:var(--text-base);color:var(--ink);
  background:var(--dock-2);border:1px solid var(--line-strong);border-radius:var(--r-control);
  transition:border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out);
}
.field input::placeholder{color:var(--ink-3)}
.field input:hover{border-color:var(--ink-3)}
.field input:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-wash)}
.field input:focus-visible{outline:none}
.is-error .field input{border-color:var(--bad)}
.is-error .field input:focus{box-shadow:0 0 0 3px var(--bad-wash)}
.auth .btn--primary{width:100%;min-height:48px;font-size:var(--text-base);margin-top:var(--space-2xs)}
.auth .btn--primary[data-state="loading"]{opacity:.7;pointer-events:none}

.alert{
  display:flex;gap:var(--space-xs);align-items:flex-start;
  padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-md);
  background:var(--bad-wash);border-left:3px solid var(--bad);border-radius:var(--r-control);
  color:var(--ink);font-size:var(--text-sm);line-height:1.6;
}
.alert svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--bad)}
.alert strong{display:block}
.auth__foot{margin:var(--space-lg) 0 0;font-size:var(--text-xs);color:var(--ink-3)}

@media (max-width:860px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth__side{padding:var(--space-md) var(--gutter) var(--space-lg);gap:var(--space-md)}
  .auth__side::after{right:-40%;bottom:-70%;width:120%}
  .auth__statement h1{font-size:clamp(1.5rem,5vw + .5rem,2rem)}
  .auth__statement p,.auth__meta{display:none}
  .auth__main{place-items:start center;padding:var(--space-lg) var(--gutter) var(--space-xl)}
  .auth__logo{display:none}
}

/* =========================================================
   Records: plain HTML forms, notices, figures, tables, chips
   (invoice payments / report, service reports). Shared so every
   record page reads the same; pages keep only their own layout bits.
   ========================================================= */
.notice{
  margin:0 0 var(--space-sm);padding:var(--space-xs) var(--space-sm);
  border-left:3px solid var(--line-strong);border-radius:var(--r-control);
  background:var(--dock-2);color:var(--ink);font-size:var(--text-sm);line-height:1.6;
}
.notice--ok{background:var(--ok-wash);border-color:var(--ok)}
.notice--bad{background:var(--bad-wash);border-color:var(--bad)}
.notice--warn{background:var(--tag-wash);border-color:var(--tag)}
.notice[hidden]{display:none}

.section-title{font-size:var(--text-md);margin:0 0 var(--space-xs)}
.section-title--gap{margin-top:var(--space-md)}
.note{margin:var(--space-xs) 0 0;color:var(--ink-2);font-size:var(--text-sm)}
.muted{color:var(--ink-3)}
.is-good{color:var(--ok)}
.is-due{color:var(--tag-ink)}
.actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-xs)}
.actions-row form{margin:0}

/* labelled controls: label above field, full width in its grid cell */
.ctl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-sm);align-items:end}
.ctl{display:flex;flex-direction:column;gap:6px;min-width:0;font-weight:600;font-size:var(--text-sm);color:var(--ink)}
.ctl--wide{grid-column:1/-1}
.ctl--inline{flex-direction:row;align-items:center;gap:var(--space-2xs)}
.ctl input:not([type=checkbox]):not([type=radio]):not([type=file]),
.ctl select,.ctl textarea{
  width:100%;min-height:44px;padding:0 var(--space-xs);
  font:inherit;font-weight:400;font-size:var(--text-base);color:var(--ink);
  background:var(--dock-2);border:1px solid var(--line-strong);border-radius:var(--r-control);
  transition:border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out);
}
.ctl--inline input:not([type=checkbox]):not([type=radio]),.ctl--inline select{width:auto}
.ctl textarea{min-height:96px;padding:var(--space-2xs) var(--space-xs);resize:vertical;line-height:var(--lh-thai)}
.ctl input[type=file]{font:inherit;font-weight:400;font-size:var(--text-sm);max-width:100%}
.ctl input::placeholder,.ctl textarea::placeholder{color:var(--ink-3)}
.ctl input:hover,.ctl select:hover,.ctl textarea:hover{border-color:var(--ink-3)}
.ctl input:focus,.ctl select:focus,.ctl textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-wash)}
.ctl input[readonly]{background:var(--dock-3);color:var(--ink-2)}
.ctl input[aria-invalid="true"],.ctl textarea[aria-invalid="true"]{border-color:var(--bad)}
.ctl__hint{font-weight:400;font-size:var(--text-xs);color:var(--ink-3);line-height:1.5}
.ctl__req{font-weight:400;color:var(--tag-ink)}

.choice-set{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--space-md);min-width:0}
.choice-set legend{padding:0;margin-bottom:var(--space-3xs);font-weight:600;font-size:var(--text-sm)}
.choice{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:44px;white-space:nowrap;cursor:pointer}
.choice input{width:20px;height:20px;margin:0;accent-color:var(--steel)}

/* key figures */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--space-sm)}
.figure{display:flex;flex-direction:column;gap:2px;min-width:0}
.figure__label{font-size:var(--text-sm);color:var(--ink-3)}
.figure__value{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--text-lg);line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.figure__sub{font-size:var(--text-xs);color:var(--ink-3)}

/* plain tables (records too small for a jqx grid) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.table th,.table td{padding:var(--space-2xs) var(--space-xs);border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap;vertical-align:middle}
.table thead th{background:var(--dock-3);color:var(--ink-2);font-weight:600}
.table thead th:first-child{border-radius:var(--r-control) 0 0 var(--r-control)}
.table thead th:last-child{border-radius:0 var(--r-control) var(--r-control) 0}
.table tfoot th{border-top:1px solid var(--line-strong);border-bottom:0}
.table .num{text-align:right}
.table .wrap{white-space:normal;min-width:200px}
.table form{margin:0}

/* status chips */
.chip{
  display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2xs);
  border-radius:var(--r-pill);background:var(--dock-3);color:var(--ink-2);
  font-size:var(--text-xs);font-weight:600;white-space:nowrap;vertical-align:middle;
}
.chip--ok{background:var(--ok-wash);color:var(--ok)}
.chip--warn{background:var(--tag-wash);color:var(--tag-ink)}
.chip--action{background:var(--steel-wash);color:var(--steel-ink)}

/* toggle filters above a list */
.filter-set{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.filter-set .btn[aria-pressed="true"]{background:var(--steel);border-color:var(--steel);color:var(--on-steel)}
.filter-set .btn__count{font-weight:400;opacity:.75}
.search-input{
  width:100%;min-height:44px;padding:0 var(--space-xs);
  font:inherit;color:var(--ink);background:var(--dock-2);
  border:1px solid var(--line-strong);border-radius:var(--r-control);
}
.search-input:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-wash)}
/* every search box gets a clear button (base.html wraps input[type=search] in .search-box) */
.search-box{position:relative;display:flex;flex:1 1 260px;min-width:0}
.ctl .search-box,.ctl-grid .search-box{flex:none;width:100%}
.search-box > input{flex:1;width:100%;min-width:0;padding-right:44px !important}
.search-box > input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.search-clear{
  position:absolute;top:50%;right:2px;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;
  border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-3);cursor:pointer;
  font:inherit;font-size:var(--text-lg);line-height:1;
  transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);
}
.search-clear:hover{background:var(--dock-3);color:var(--ink)}
.search-clear[hidden]{display:none}

/* the one action a phone page is for, kept in reach at the bottom */
.savebar{position:sticky;bottom:0;z-index:2;padding:var(--space-xs) 0;background:linear-gradient(transparent,var(--dock) 35%)}
.savebar .btn{width:100%;min-height:48px;font-size:var(--text-base)}
.btn--lg{min-height:48px;padding:0 var(--space-md);font-size:var(--text-base)}
@media (max-width:640px){.btn--lg{width:100%}}

/* =========================================================
   Sheets: pop-ups that are a centred dialog on a PC and a full
   screen page on phones (inventory receive / edit / issue)
   ========================================================= */
.sheet{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:var(--space-md);background:var(--scrim)}
.sheet[hidden]{display:none}
.sheet__panel{display:flex;flex-direction:column;width:100%;max-width:760px;max-height:min(92vh,980px);background:var(--dock);border-radius:var(--r-sheet);box-shadow:var(--shadow-lg);overflow:hidden}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);background:var(--dock-2);border-bottom:1px solid var(--line)}
.sheet__title{font-size:var(--text-lg)}
.sheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-md);margin:0}
.sheet__foot{display:flex;justify-content:flex-end;gap:var(--space-2xs);padding:var(--space-xs) var(--space-md);padding-bottom:max(var(--space-xs),env(safe-area-inset-bottom));background:var(--dock-2);border-top:1px solid var(--line)}
body.sheet-open{overflow:hidden}
@media (max-width:640px){
    .sheet{padding:0;align-items:stretch}
    .sheet__panel{max-width:none;max-height:none;height:100%;border-radius:0}
    .sheet__body{padding:var(--space-sm)}
    .sheet__foot .btn{flex:1;min-height:48px;font-size:var(--text-base)}
}
.scan-field{display:flex;gap:var(--space-2xs);min-width:0}
.scan-field input{flex:1;min-width:0}
.scan-field .btn{flex:none;min-height:44px}
.photo-strip{list-style:none;margin:0 0 var(--space-xs);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--space-2xs)}
.photo-strip li{position:relative}
.photo-strip img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-control);background:var(--dock-3)}
.photo-strip button{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;border-radius:var(--r-pill);background:var(--scrim);color:var(--on-steel);font:inherit;cursor:pointer}
.photo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:var(--space-xs)}
.photo-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-control);background:var(--dock-3)}
.photo-grid figcaption{font-size:var(--text-xs);color:var(--ink-3);margin-top:var(--space-3xs)}
.photo-grid figure{margin:0}
/* the camera scanner sheet (media/so/js/scanner.js and the stock page) */
.sheet--scan .sheet__panel{max-width:520px;background:var(--night);color:var(--night-ink)}
.sheet--scan .sheet__head,.sheet--scan .sheet__foot{background:var(--night-2);border-color:var(--night-line)}
.sheet--scan .sheet__head .btn{color:var(--night-ink)}
.scan-body{flex:1;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-sm);overflow-y:auto}
.scan-view{width:100%;border-radius:var(--r-control);overflow:hidden;background:var(--night-2)}
.scan-view video{width:100% !important;height:auto !important;display:block}
.sheet--scan .note{color:var(--night-ink-2);margin:0}
.scan-last{margin:0;font-family:var(--font-display);font-size:var(--text-lg);color:var(--tag-soft);overflow-wrap:anywhere}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:120ms !important;animation-duration:120ms !important;scroll-behavior:auto !important}
  .nav{transition:opacity 120ms linear,visibility 0s !important}
  .nav:not(.is-open){opacity:0}
}

/* ---------- Pager (media/so/js/pager.js): numbered pages above and below long lists ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2xs);margin:var(--space-sm) 0}
.pager[hidden]{display:none}
.pager__nums{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3xs)}
.pager .btn{min-width:40px;min-height:40px;padding:0 var(--space-2xs)}
.pager .btn[aria-current="page"]{background:var(--steel);border-color:var(--steel);color:var(--on-steel)}
.pager__step{padding:0 var(--space-xs) !important}
.pager__gap{align-self:center;color:var(--ink-3);padding:0 var(--space-3xs)}
.pager__info{flex-basis:100%;text-align:center;font-size:var(--text-sm);color:var(--ink-2)}
@media (max-width:639px){ .pager__word{display:none} }

/* spell check pop-up (media/so/js/spellcheck.js, SOSpell.guard) */
.sp-sheet .sheet__panel{max-width:640px}
.sp-list{list-style:none;margin:var(--space-xs) 0 0;padding:0;display:grid;gap:var(--space-xs)}
.sp-item{display:grid;gap:var(--space-2xs);padding:var(--space-xs);border:1px solid var(--line);border-radius:var(--r-card);background:var(--dock-2)}
.sp-where{font-size:var(--text-xs);color:var(--ink-3)}
.sp-text{margin:0;overflow-wrap:anywhere;color:var(--ink-2);white-space:pre-line}
.sp-text mark{padding:0 2px;border-radius:4px;background:var(--bad-wash);color:var(--bad);font-weight:600}
.sp-fixes{display:flex;flex-wrap:wrap;gap:var(--space-3xs)}
.sp-fixes .btn{min-height:36px;padding:0 var(--space-xs)}
.sp-fix{border-color:var(--ok);color:var(--ok)}
.sp-none{color:var(--ink-3);font-size:var(--text-sm);align-self:center}
.sp-done{padding:var(--space-sm);border-radius:var(--r-card);background:var(--ok-wash);color:var(--ok);font-weight:600}
.sp-sheet [data-sp-save][hidden]{display:none}
.is-spell-flash{outline:2px solid var(--ok);outline-offset:2px}

/* e-mail field check (media/so/js/email.js) */
.email-err{display:block;margin-top:2px;font-size:var(--text-xs);color:var(--bad);font-weight:600}
.email-err[hidden]{display:none}
input[aria-invalid="true"]{border-color:var(--bad)}

/* fields filled from an attached photo or PDF, and the tick to confirm them (media/so/js/docread.js) */
.is-read{background:var(--steel-wash) !important;border-color:var(--steel) !important}
.choice.is-read{border-radius:var(--r-control);padding:0 var(--space-3xs)}
.doc-confirm{display:flex;align-items:center;gap:var(--space-2xs);margin:var(--space-xs) 0;padding:var(--space-2xs) var(--space-xs);border:1px solid var(--steel);border-radius:var(--r-control);background:var(--steel-wash);font-weight:600}
.doc-confirm[hidden]{display:none}
.doc-confirm.is-missing{border-color:var(--bad);color:var(--bad)}

/* ---------- the message box in the middle of the screen (media/so/js/dialog.js, in place of alert()) ---------- */
.so-dialog{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:var(--space-md);background:rgba(15,20,26,.48);animation:soDialogFade .15s ease-out}
.so-dialog[hidden]{display:none}
.so-dialog__card{--d:var(--steel);--d-wash:var(--steel-wash);position:relative;width:min(420px,100%);padding:var(--space-lg) var(--space-md) var(--space-md);border-radius:18px;background:var(--dock);box-shadow:0 20px 50px rgba(10,14,18,.28);text-align:center;animation:soDialogPop .18s cubic-bezier(.2,.9,.3,1.2)}
.so-dialog--ok{--d:var(--ok);--d-wash:var(--ok-wash)}
.so-dialog--warn{--d:var(--tag-ink);--d-wash:var(--tag-wash)}
.so-dialog--bad{--d:var(--bad);--d-wash:var(--bad-wash)}
.so-dialog__icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--space-xs);border-radius:50%;background:var(--d-wash);color:var(--d)}
.so-dialog__icon svg{width:28px;height:28px}
.so-dialog__title{margin:0 0 var(--space-2xs);font-size:var(--text-lg)}
.so-dialog__text{margin:0 0 var(--space-md);color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere;line-height:1.6;max-height:50vh;overflow-y:auto}
.so-dialog__acts{display:flex;justify-content:center}
.so-dialog__acts .btn{min-width:140px;min-height:44px}
.so-dialog__x{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:22px;line-height:1;cursor:pointer}
.so-dialog__x:hover{background:var(--dock-3);color:var(--ink)}
body.so-dialog-open{overflow:hidden}
@keyframes soDialogFade{from{opacity:0}to{opacity:1}}
@keyframes soDialogPop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.so-dialog__acts{gap:var(--space-2xs)}
.so-dialog__acts .so-dialog__no{min-width:120px}
.so-dialog__danger{background:var(--bad);border-color:var(--bad);color:#fff}
.so-dialog__danger:hover{filter:brightness(.92)}
.so-dialog__no[hidden]{display:none}