/* TDM Hangar. The screen is set like an approach plate: a white chart, black ink, rules of three weights (2px around
   the briefing strip and at section boundaries, 1px black under column heads, 1px grey between rows), one family
   (Archivo, narrow for codes and figures) and colour only where it is information: magenta for the thing in hand,
   blue for a reference to another record, green serviceable, amber held or due, red unserviceable or stopped.
   Printed forms, tags, labels and certificates keep their own rules further down and are not part of this. */
/* D-DIN Bold by Datto, SIL Open Font License (public/fonts/D-DIN-LICENSE.txt). Kept for the release certificate watermark. */
@font-face { font-family: 'D-DIN'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/D-DIN-Bold.woff2') format('woff2'); }
:root {
  /* two corner sizes only: small for controls, rows, tags and strips; large for panels and windows */
  --r-sm: 3px; --r-lg: 6px;
  --ink: #000000;
  --paper: #ffffff;       /* the chart */
  --rail: #f2f2f2;        /* the chart's margin: the navigation rail, hovers, shaded cells */
  --rule: #000000;        /* 1px black rule */
  --rule-2: #c9c9c9;      /* row rule */
  --rule-3: #e6e6e6;      /* faint rule inside a region */
  --muted: #595959;
  --ctl: #767676;         /* control outline */
  --mag: #b5006a;         /* current: the primary action, the active item, focus, the row in progress */
  --mag-2: #8f0054;
  --mag-tint: #f8e4ef;
  --blue: #1d4f9c;        /* a reference to another record */
  --green: #1f7a3e;
  --amber: #8a5a00;
  --red: #c8102e;
  --violet: #1d4f9c;
  --brand: #0f5b78;       /* the teal of the TDM mark: the letterhead and labels only */
  --brand-2: var(--mag);
  --brand-3: var(--mag);
  --brand-gray: #a7a9ac;
  /* legacy names the feature sections below still use */
  --bg: var(--paper);
  --panel: var(--paper);
  --panel-2: var(--rail);
  --field: var(--paper);
  --line: var(--rule-2);
  --text: var(--ink);
  --accent: var(--mag);
  --on-accent: #ffffff;
  --link: var(--blue);
  --radius: 0px;
  --sans: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --display: 'D-DIN', 'Archivo', 'Arial Narrow', sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace; /* printed tags and travelers */
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 13px/1.45 var(--sans); font-variant-numeric: tabular-nums; caret-color: var(--mag); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--mag); color: #fff; }
:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #9a9a9a var(--rail); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rail); }
::-webkit-scrollbar-thumb { background: #9a9a9a; border: 2px solid var(--rail); }
/* codes and figures: the family's narrow width, tabular, a touch heavier */
.mono { font-family: var(--sans); font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; }
.cap, .nav-label, th, .kpi .label, .panel > h2, .facts dt, .where dt, .drop-label, .page-head .cells .cell > span, .wo-clock .detail h2.sub-h {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------- shell */
/* The app bar: the sections as browser-style tabs along the top, and the pages of the open section on the strip below,
   which the active tab runs into (as a browser's tab runs into its toolbar). No side rail: the page gets the full width. */
.shell { display: flex; flex-direction: column; height: 100vh; }
.appbar { flex: none; background: var(--paper); }
.logo { display: flex; align-items: center; gap: 9px; padding: 2px 16px 14px; }
.logo .mark { width: 32px; height: 26px; flex-shrink: 0; }
.logo .wordmark { font-weight: 700; font-size: 21px; letter-spacing: .02em; line-height: 1; }
.logo .product { font-size: 11px; font-weight: 600; color: var(--muted); border-left: 1px solid var(--ink); padding-left: 9px; letter-spacing: .14em; text-transform: uppercase; }
.topbar .logo { padding: 0 18px 0 0; align-self: center; }
.topbar .logo .mark { width: 28px; height: 23px; }
.topbar .logo .wordmark { font-size: 19px; }

.cats { display: flex; align-self: stretch; align-items: flex-end; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.cats::-webkit-scrollbar { display: none; }
.cats a { position: relative; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; white-space: nowrap; font-size: 13.5px; font-weight: 500;
  color: var(--muted); border: 1px solid transparent; border-bottom: 0; transition: color .15s var(--ease), background .15s var(--ease); }
.cats a:hover { color: var(--ink); background: var(--rail); }
.cats a.active { color: var(--ink); font-weight: 600; background: var(--rail); border-color: var(--rule); box-shadow: inset 0 2px 0 var(--ink); z-index: 1; }
.cats a[hidden] { display: none; }
.cats a b, #nav a b { font: 600 11px/17px var(--sans); font-stretch: 75%; min-width: 17px; text-align: center; padding: 0 5px; background: var(--red); color: #fff; }
.cats a b:empty, #nav a b:empty { display: none; }

#nav.subnav { display: flex; align-items: stretch; min-height: 36px; padding: 0 20px; background: var(--rail); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: thin; }
#nav .nav-group { display: none; gap: 2px; }
#nav .nav-group.on { display: flex; }
#nav a { display: flex; align-items: center; gap: 8px; padding: 0 12px; white-space: nowrap; color: var(--ink); font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
#nav a:hover { background: #e4e4e4; }
#nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
#nav.subnav.single { display: none; } /* a section with one page needs no page strip */
#nav a b.info { background: none; color: var(--muted); padding: 0; } /* an informational count is a plain figure; only alerts take the red box */
.drop-foot { padding: 8px 10px 4px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--rule-2); margin-top: 4px; }

.topbar { display: flex; align-items: stretch; gap: 12px; height: 50px; padding: 0 20px; background: var(--paper); }
.topbar > .search-trigger, .topbar > .bell, .topbar > .user-menu { align-self: center; }
.search-trigger { flex: 0 1 260px; margin-left: auto; min-width: 120px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--ink); padding: 5px 10px; color: var(--muted); cursor: pointer; text-align: left; font-size: 13px; }
.search-trigger:hover { background: var(--rail); }
.search-trigger span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
kbd { font: 600 11px var(--sans); font-stretch: 75%; border: 1px solid var(--rule-2); padding: 1px 5px; color: var(--muted); white-space: nowrap; letter-spacing: .04em; }
.user-menu { margin-left: auto; position: relative; }
.user-btn { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; padding: 3px 6px; text-align: left; }
.user-btn:hover { background: var(--rail); }
.user-meta { display: grid; line-height: 1.2; }
.user-meta b { font-weight: 600; font-size: 13px; white-space: nowrap; }
.user-meta small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.user-drop { position: absolute; right: 0; top: calc(100% + 4px); background: var(--paper); border: 1px solid var(--ink); padding: 4px; min-width: 240px; z-index: 12; }
.user-drop button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; cursor: pointer; }
.user-drop button:hover { background: var(--rail); }
.user-drop[hidden], .user-drop button[hidden], .login-others[hidden] { display: none; }
.user-drop hr { border: 0; border-top: 1px solid var(--rule-2); margin: 4px 0; }
.user-drop .drop-label, .login-others .drop-label { padding: 6px 10px 2px; color: var(--muted); }
.user-drop button small { color: var(--muted); display: block; font-size: 12px; }
.login-others { border-top: 1px solid var(--rule-2); margin-top: 6px; padding-top: 8px; display: grid; gap: 6px; }
.login-others .drop-label { padding-left: 0; }
.login-others button { text-align: left; }
.shell[hidden], .login[hidden], .user-drop[hidden], #nav a[hidden] { display: none !important; }
.avatar { width: 28px; height: 28px; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: var(--ink); color: #fff; flex-shrink: 0; }
.ico { width: 16px; height: 16px; flex: none; }
.icon-btn { background: none; border: 0; cursor: pointer; font-size: 18px; padding: 4px 8px; }

/* ---------------------------------------------------------------- sign-in */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--paper); }
.login-box { width: 100%; max-width: 360px; display: grid; gap: 14px; background: var(--paper); border: 2px solid var(--ink); padding: 26px 28px 28px; }
.login-box .logo { padding: 0 0 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.logo-lg .mark { width: 44px; height: 35px; }
.logo-lg .wordmark { font-size: 28px; }
.login-box h1 { margin: 0; font-size: 17px; }
.login-box label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.login-box .btn { padding: 9px; }
.err { color: var(--red); font-size: 13px; }
.err:empty { display: none; }

/* ---------------------------------------------------------------- the page: a briefing strip, then the work */
.view { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
.page-head { display: flex; align-items: stretch; gap: 0; border: 2px solid var(--ink); margin-bottom: 18px; flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 220px; min-width: 0; padding: 10px 16px 12px; display: grid; align-content: center; }
.page-head h1 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.005em; text-wrap: balance; }
.page-head h1 .mono { font-size: 22px; font-weight: 700; }
.page-head h1 .muted { font-weight: 400; }
.page-head .crumb { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.page-head .crumb a { color: var(--blue); }
.page-head .lede { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 70ch; }
.page-head .cells { display: flex; flex-wrap: wrap; }
.page-head .cells .cell { display: grid; align-content: center; gap: 1px; padding: 8px 12px; border-left: 1px solid var(--ink); }
.page-head .cells .cell > span { color: var(--muted); white-space: nowrap; }
.page-head .cells b { font-weight: 600; font-size: 15px; white-space: nowrap; font-stretch: 75%; }
.page-head .cells b .pill { vertical-align: 1px; }
.page-head .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 8px 12px; border-left: 1px solid var(--ink); }
@media screen and (max-width: 1200px) { .page-head .actions { width: 100%; border-left: 0; border-top: 1px solid var(--ink); justify-content: flex-start; } }
.page-head .actions:empty { display: none; }
.page-head .actions .btn { align-self: center; }
.hint { color: var(--muted); font-size: 13px; margin: 8px 0 16px; max-width: 78ch; }
/* the signatures made in someone's name since their sign-in was reset */
.review-list { margin: 8px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; color: var(--text); }
.review-list li { margin: 2px 0; }

/* ---------------------------------------------------------------- controls */
.btn { background: var(--paper); border: 1px solid var(--ink); color: var(--ink); padding: 5px 12px; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 1.4; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.btn:hover:not(:disabled), .view a.btn:hover { background: var(--ink); color: #fff; }
.btn.primary { background: var(--mag); color: #fff; border-color: var(--mag); font-weight: 600; }
.btn.primary:hover:not(:disabled), .view a.btn.primary:hover { background: var(--mag-2); border-color: var(--mag-2); color: #fff; }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
.btn.sm { padding: 2px 8px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.lg { padding: 9px 18px; font-size: 14px; }
.view a.btn { color: inherit; }
.view a.btn.primary { color: #fff; }
input.field, select.field, textarea.field { width: 100%; background: var(--paper); border: 1px solid var(--ctl); padding: 6px 9px; line-height: 1.4; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
input.field::placeholder, textarea.field::placeholder { color: #6e6e6e; }
input.field:hover, select.field:hover, textarea.field:hover { border-color: var(--ink); }
input.field:focus, select.field:focus, textarea.field:focus { outline: none; border-color: var(--mag); box-shadow: 0 0 0 1px var(--mag); }
input.field:disabled, select.field:disabled, textarea.field:disabled { background: var(--rail); color: var(--muted); }
textarea.field { min-height: 80px; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--mag); }
.toolbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.toolbar input.field { max-width: 280px; }
.tabs { display: flex; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--rule-2); }
.tabs button { background: none; border: 0; padding: 6px 0 7px; margin-bottom: -1px; cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; transition: color .15s var(--ease); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.toolbar .tabs { border-bottom: 0; }
.toolbar .tabs button { padding-bottom: 4px; }

/* ---------------------------------------------------------------- figures: one ruled table of boxed minimums */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); margin-bottom: 18px; }
.kpi { position: relative; background: var(--paper); padding: 10px 14px 12px; display: block; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: background .15s var(--ease); }
.kpi:hover { background: var(--rail); }
.kpi .label { color: var(--ink); }
.kpi .value { font-size: 26px; line-height: 1.1; font-weight: 600; font-stretch: 75%; margin-top: 5px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.warn .value { color: var(--amber); }
.kpi.bad .value { color: var(--red); }
.kpi.bad { box-shadow: inset 0 0 0 2px var(--red); }
.kpi.bad .value, .kpis.attention .kpi.bad .value { font-size: 36px; } /* the governing minimum reads first */
.kpi.new::after { content: ''; position: absolute; top: 0; right: 0; border: 7px solid var(--mag); border-left-color: transparent; border-bottom-color: transparent; }
.kpis.attention .kpi .value { font-size: 30px; }
.kpis.totals { margin-bottom: 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kpis.totals .kpi { padding: 8px 14px 10px; }
.kpis.totals .kpi .label { color: var(--muted); }
.kpis.totals .kpi .value { font-size: 19px; margin-top: 3px; }
.all-clear { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-2); padding: 12px 14px; margin-bottom: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.grid.two { grid-template-columns: 2fr 1fr; }

/* ---------------------------------------------------------------- regions: a 2px rule and a capital label */
.panel { background: var(--paper); border-top: 2px solid var(--ink); min-width: 0; }
.panel > h2 { margin: 0; padding: 9px 12px 8px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel > h2 a, .panel > h2 .muted { font-weight: 400; color: var(--muted); font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.panel > h2 a { color: var(--blue); }
.panel > h2 .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.panel .body { padding: 12px 12px 14px; }
.empty { padding: 22px 12px; text-align: center; color: var(--muted); }
.stack-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); padding: 8px 12px 7px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.link { cursor: pointer; }
tr.link:hover td { background: var(--rail); }
td.num, th.num { text-align: right; }
td.num { font-stretch: 75%; font-weight: 500; }
.view a:not(.btn):not(.kpi) { color: var(--blue); }
.view .kpi, .view tr a.code-link { color: inherit; }
.code-link { font-weight: 600; white-space: nowrap; }
.view a.code-link { color: var(--blue); }
.view a:not(.btn):not(.kpi):not(.pill):not(.map-pin):hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .code-link { border: 1px solid var(--rule-2); padding: 1px 7px; background: var(--paper); }
.path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.path .hop { white-space: nowrap; }
.path .sep { color: var(--muted); }
.where { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-2); }
.where dt { color: var(--muted); margin-bottom: 4px; }
.where dd { margin: 0; }

/* ---------------------------------------------------------------- states: the store's tag colours, printed small */
.pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; white-space: nowrap; border: 1px solid var(--c, var(--muted)); color: var(--c, var(--muted)); background: var(--paper); line-height: 1.4; }
.s-planned, .s-low, .s-minor { --c: var(--muted); }
.s-rule { --c: var(--ink); } /* a standing rule of the form (hard stop: in order), not a problem happening now */
/* routine, all-is-well states are plain words: no box, no colour */
.state-plain { font-size: 13px; color: var(--ink); white-space: nowrap; }
.s-in_progress { --c: var(--mag); }
.s-open, .s-normal { --c: var(--blue); }
.s-blocked, .s-critical { --c: var(--red); }
.s-complete, .s-received, .s-closed, .s-in_stock, .s-accepted { --c: var(--green); }
.s-partial, .s-quarantine, .s-pending { --c: var(--amber); }
.s-consumed, .s-depleted, .s-shipped, .s-cancelled { --c: var(--muted); }
.s-scrapped, .s-rejected, .s-hold { --c: var(--red); }
.s-carry { --c: var(--blue); }
.s-high, .s-major, .s-dispositioned, .s-late { --c: var(--amber); }
/* holds and problems are solid, so they can't be missed; routine states stay outlined */
.pill.s-quarantine, .pill.s-rejected, .pill.s-blocked, .pill.s-critical, .pill.s-late, .pill.s-hold, .pill.s-scrapped { background: var(--c); color: #fff; }
.view a.pill { text-decoration: none; }

.progress { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.progress .bar { flex: 1; height: 4px; background: var(--rule-2); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--mag); transition: width .3s var(--ease); }
.progress span { font-size: 11.5px; font-stretch: 75%; font-weight: 600; color: var(--muted); }

.stack { display: flex; height: 10px; overflow: hidden; gap: 1px; margin-bottom: 12px; background: var(--rule-2); }
.stack i { display: block; background: var(--c); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ''; width: 8px; height: 8px; background: var(--c); }

/* ---------------------------------------------------------------- the activity feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 9px 12px; border-bottom: 1px solid var(--rule-2); display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed .avatar { width: 24px; height: 24px; font-size: 10px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
.feed .meta { color: var(--muted); font-size: 12px; margin-top: 1px; }
.feed a { color: var(--blue); }

/* ---------------------------------------------------------------- detail */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.facts dt { color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; font-size: 13.5px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--rule-2); }
.steps .seq { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; font-stretch: 75%; }
.steps li.done .seq { background: var(--green); border-color: var(--green); color: #fff; }
.steps li.done .name { color: var(--muted); }
.steps .who { font-size: 12px; color: var(--muted); }
.add-row { display: flex; gap: 8px; padding: 12px; }
.banner { border: 1px solid var(--red); background: var(--paper); color: var(--ink); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.banner.warn { border-color: var(--amber); margin: 0; }
.banner a { color: var(--blue); }
.insecure { position: relative; z-index: 60; padding: 8px 16px; font-size: 13px; line-height: 1.45; color: #fff; background: #9B2C1F; text-align: center; text-wrap: balance; }
.insecure b { font-weight: 700; }

/* ---------------------------------------------------------------- dialogs, the search palette, toasts */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: grid; place-items: start center; padding: 7vh 16px; z-index: 20; overflow-y: auto; }
.modal[hidden], .palette[hidden] { display: none; }
.modal-box { background: var(--paper); border: 2px solid var(--ink); width: 100%; max-width: 480px; }
.modal-box h3 { margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--ink); font-size: 15px; }
.modal-box form { padding: 16px 18px; display: grid; gap: 12px; }
.modal-box label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.modal-box .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-box .foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.modal-box .err { color: var(--red); font-size: 13px; min-height: 0; }
.modal-box form fieldset { border: 1px solid var(--rule-2); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.modal-box form legend { padding: 0 6px; font-weight: 600; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.modal-box form legend .n { width: 20px; height: 20px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; background: var(--ink); color: #fff; }
.modal.over { z-index: 26; }
.modal.pin-gate { z-index: 60; }
.sign-box { max-width: 520px; }
.sign-meaning { border: 1px solid var(--rule-2); background: var(--rail); padding: 10px 12px; display: grid; gap: 4px; }
.sign-meaning p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.sign-agree { border: 1px solid var(--amber); padding: 10px 12px; display: grid; gap: 6px; }
.sign-agree p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.modal-box label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.sig .sig-stamp { color: var(--ink); font-weight: 600; font-stretch: 75%; }

.palette { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 30; display: flex; justify-content: center; padding: 10vh 16px; }
.palette-box { width: 100%; max-width: 620px; background: var(--paper); border: 2px solid var(--ink); overflow: hidden; align-self: flex-start; }
.palette-box input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 13px 16px; font-size: 15px; outline: none; }
.palette-box ul { list-style: none; margin: 0; padding: 4px; max-height: 50vh; overflow-y: auto; }
.palette-box li { display: flex; gap: 10px; align-items: center; padding: 7px 10px; cursor: pointer; }
.palette-box li.sel { background: var(--rail); box-shadow: inset 3px 0 0 var(--mag); }
.palette-box li .tag { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); width: 82px; flex-shrink: 0; }
.palette-box li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 40; }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--ink); padding: 10px 14px; max-width: 360px; animation: in .18s var(--ease); }
.toast::before { content: ''; flex: none; width: 9px; height: 9px; margin-top: 4px; background: var(--green); }
.toast.err::before { background: var(--red); }
@keyframes in { from { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------- narrower screens */
@media screen and (max-width: 900px) {
  .grid.two { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 760px) {
  /* two rows: the logo, search, bell and person; then the section tabs across the full width (they scroll sideways) */
  .topbar { padding: 0 12px; gap: 6px; height: auto; flex-wrap: wrap; }
  .topbar .logo { height: 46px; }
  .topbar .logo .product { display: none; }
  .cats { order: 5; flex-basis: 100%; }
  .cats a { height: 36px; padding: 0 10px; font-size: 13px; }
  #nav.subnav { padding: 0 8px; }
  .search-trigger span { display: none; }
  .search-trigger::before { content: '⌕'; font-size: 17px; line-height: 1; color: var(--ink); }
  .view { padding: 14px 16px 28px; }
  .search-trigger kbd, .user-meta { display: none; }
  .modal-box .row2 { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 20px; }
  .page-head > div:first-child { flex-basis: 100%; }
  .page-head .cells { width: 100%; border-top: 1px solid var(--ink); }
  .page-head .cells .cell { flex: 1 1 auto; }
  .page-head .cells .cell:first-child { border-left: 0; }
  .page-head .actions { width: 100%; border-left: 0; border-top: 1px solid var(--ink); justify-content: flex-start; }
  .kpi .value, .kpis.attention .kpi .value { font-size: 22px; }
  .kpi.bad .value, .kpis.attention .kpi.bad .value { font-size: 28px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 8px 10px 10px; }
  /* the ranked work keeps its essentials on a phone: priority, W/O, part, progress, state */
  .sched th:nth-child(4), .sched td:nth-child(4), .sched th:nth-child(5), .sched td:nth-child(5), .sched th:nth-child(6), .sched td:nth-child(6), .sched th:nth-child(7), .sched td:nth-child(7) { display: none; }
  .sched td { padding: 8px 6px; }
  .sched td:first-child { width: 54px; }
  .sched td:first-child .field { width: 44px; font-size: 16px; }
  .sched .pill { white-space: normal; text-align: center; }
  .sched th { white-space: normal; }
  .sched td:nth-child(3) .muted { display: none; }
  .sched .pill { font-size: 10.5px; padding: 1px 4px; letter-spacing: .02em; }
}

/* ================================================================ feature sections (structure; the chart layer at the end restyles them) */
/* forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid label { display: block; font-size: 12.5px; color: var(--muted); }
.form-grid label > .field { display: block; width: 100%; margin-top: 5px; }
.form-grid label .muted { opacity: .75; }
.receive-layout { display: grid; gap: 16px; }
.receive-layout > .panel:first-child { max-width: 860px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid label[hidden] { display: none; }
.convert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--brand-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-2) 35%, transparent); }
.convert .arrow { color: var(--brand-2); font-weight: 700; }
.result-box { margin-top: 16px; padding: 14px; border-radius: var(--r-lg); display: grid; gap: 10px; justify-items: start;
  background: color-mix(in srgb, var(--green) 10%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }

/* move items (the scan page) */
.scan-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scan-input { flex: 1; min-width: 220px; font-size: 20px !important; padding: 12px 14px !important; letter-spacing: .04em; border-width: 2px !important; }
.scan-input:focus { border-color: var(--brand-2) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 20%, transparent); }
.scan-qty { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.scan-qty input { width: 80px; padding: 10px; }
.scan-box .btn { padding: 11px 16px; }
.scan-said { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; margin-top: 10px; padding: 10px 14px; font-size: 14px;
  background: var(--panel); border: 1px solid var(--line); }
.scan-said .mark { font-weight: 700; }
.scan-said.said-ok { border-left-color: var(--green); }
.scan-said.said-ok .mark { color: var(--green); }
.scan-said.said-err { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--panel)); }
.scan-said.said-err .mark { color: var(--red); }
.scan-said time { color: var(--muted); font: 11px var(--mono); }
.carry { list-style: none; margin: 0; padding: 4px 0; }
.carry li { display: flex; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); align-items: baseline; flex-wrap: wrap; }
.wo-target { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.camera { position: fixed; inset: 0; background: #000; z-index: 50; display: grid; place-items: center; }
.camera video { width: 100%; height: 100%; object-fit: cover; }
.camera-frame { position: absolute; width: min(80vw, 420px); height: 140px; border: 3px solid var(--brand-3); border-radius: var(--r-lg); box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
.camera-bar { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.camera-msg { position: absolute; max-width: 32ch; margin: 0 16px; color: #fff; font-size: 16px; line-height: 1.45; text-align: center; }
.camera.off video, .camera.off .camera-frame { display: none; }
/* a camera button that reads a barcode into the field beside it */
.cam-wrap { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.cam-wrap > .field { flex: 1 1 auto; min-width: 0; }
.cam-scan { flex: none; display: inline-grid; place-items: center; padding: 0 10px; }
.cam-scan .ico { width: 18px; height: 18px; margin: 0; }

/* labels and tags: 75 × 55 mm thermal stock (Xprinter XP-420B). Each sticker and each tag prints on its own page.
   No page size is given on purpose: a size wider than tall makes the browser send a landscape job, and the label
   printer's driver then turns it a quarter onto the roll. The page is the paper set in the printer driver (75 × 55 mm).
   Thermal print fades with sun, rain and handling, and thin strokes go first: everything on a label or tag is set big,
   bold and pure black (no grey, no hairlines), in faces the PC has without the internet (D-DIN is bundled). */
@page label { margin: 0; }
.label-sheet { page: label; display: flex; flex-wrap: wrap; gap: 12px; }
.sticker { width: 75mm; height: 55mm; background: #fff; color: #000; border: 1px dashed #b9bfc4; border-radius: var(--r-sm);
  padding: 2.5mm 3.5mm; display: flex; flex-direction: column; gap: 1.2mm; overflow: hidden; break-inside: avoid;
  font-family: var(--display); font-weight: 700; -webkit-font-smoothing: none; }
.label-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.label-brand { display: flex; align-items: center; gap: 4px; }
.label-brand .mark { width: 22px; height: 18px; }
.label-brand b { font-size: 15px; font-weight: 800; color: #0f5b78; }
.sticker .label-brand b, .tagcard .label-brand b { color: #000; }
.sticker .mono, .tagcard .mono { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: inherit; letter-spacing: .02em; }
.sticker .label-code { font: 700 23px/1 var(--display); font-stretch: 100%; letter-spacing: .02em; white-space: nowrap; }
.label-title { font-size: 21px; line-height: 1.15; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticker .barcode { width: 100%; height: 18mm; display: block; flex: none; }
.label-sub { font: 700 14px/1.25 var(--display); color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sticker.custom .label-title { white-space: normal; font-size: 20px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sticker.custom .label-text { font-size: 14px; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.sticker.custom .barcode { margin-top: auto; height: 14mm; }
.label-preview { display: flex; justify-content: center; background: var(--panel-2); border-radius: 0 0 8px 8px; }

@media screen and (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  .scan-input { font-size: 17px !important; }
}

@media print {
  /* page margins are set with the letterhead print frame at the end of this file */
  body { background: #fff; }
  .appbar, .no-print, .toasts { display: none !important; }
  .shell { display: block; height: auto; }
  .view { height: auto; overflow: visible; padding: 0; }
  /* one sticker per 75 × 55 mm page, edge to edge (the page rule is `@page label` above) */
  #view:has(.label-sheet, .tag-sheet) { padding: 0; }
  .label-sheet, .tag-sheet { display: block; gap: 0; margin: 0 !important; padding: 0 !important; background: none; }
  .sticker, .tagwrap { break-after: page; }
  .sticker { border: 0; border-radius: 0; }
}

/* storage hierarchy: LOC › TOTE › CTN, as a tree in lists and as the type picker of the New place window */
.ptype { display: inline-block; font: 600 10px/16px var(--sans); letter-spacing: .06em; padding: 0 5px; border: 1px solid var(--c, var(--muted)); color: var(--c, var(--muted)); white-space: nowrap; }
.ptype-location { --c: var(--blue); } .ptype-tote { --c: var(--green); } .ptype-container { --c: var(--muted); }
.tree-cell { display: inline-flex; align-items: center; gap: 6px; padding-left: calc(var(--lvl, 0) * 22px); white-space: nowrap; }
.tree-glyph { color: var(--muted); font-size: 12px; margin-right: -2px; }
.place-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kind-opt { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 10px 11px; background: var(--paper); border: 1px solid var(--rule-2); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s var(--ease), background .15s var(--ease); }
.kind-opt b { font-size: 13.5px; }
.kind-opt small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.kind-opt:hover:not(:disabled) { border-color: var(--ink); }
.kind-opt.on { border: 2px solid var(--ink); padding: 9px 10px; background: var(--panel-2); }
.kind-opt:disabled { opacity: .45; cursor: not-allowed; }
.modal-box .place-fields { display: grid; gap: 12px; }
@media screen and (max-width: 560px) { .place-kinds { grid-template-columns: 1fr; } }

/* first-run setup checklist */
.setup { margin-bottom: 16px; border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); }
.checklist { list-style: none; margin: 0; padding: 4px 0; }
.checklist li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono);
  border: 1.5px solid var(--brand-2); color: var(--brand-2); }
.checklist li.done .num { background: var(--green); border-color: var(--green); color: #fff; }
.checklist li.done b { color: var(--muted); text-decoration: line-through; }
.view a.btn { color: inherit; }
.view a.btn.primary { color: var(--on-accent); }

/* receiving intake form */
.modal-box.wide { max-width: 780px; }
.modal-box form fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.modal-box form legend { padding: 0 6px; font-weight: 600; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.modal-box form legend .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono);
  background: var(--accent); color: var(--on-accent); }
.modal-box .form-grid label { display: block; }
.modal-box .form-grid [hidden], .modal-box [hidden] { display: none !important; }
.modal-box label.block { display: grid; gap: 5px; margin-top: 10px; }
.modal-box label.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13.5px; }
.modal-box .foot { align-items: center; }
.modal-box .foot #rcvProgress, .modal-box .foot #attProgress { margin-right: auto; font-size: 12.5px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { display: block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 7px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-size: 13px; font-weight: 500; }
.seg input:focus-visible + span { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.seg .ok input:checked + span { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.seg .hold input:checked + span { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.seg .bad input:checked + span { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.dropzone { border: 1.5px dashed var(--line); border-radius: var(--r-lg); padding: 16px; text-align: center; color: var(--text); font-size: 13px;
  display: grid; gap: 6px; justify-items: center; background: var(--panel-2); }
.dropzone.over { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 10%, var(--panel-2)); }
.dropzone > b { font-weight: 600; }
.doc-staged { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.doc-staged li { display: grid; grid-template-columns: 1fr auto 210px auto; gap: 8px; align-items: center; font-size: 13px; color: var(--text); }
.doc-staged .doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-staged select { padding: 4px 8px; }
.panel > h2 .btn { margin-left: auto; }
.panel > h2 { gap: 10px; }
.s-accepted { --c: var(--green); }
.s-pending { --c: var(--amber); }
.s-rejected { --c: var(--red); }
@media screen and (max-width: 760px) {
  .doc-staged li { grid-template-columns: 1fr auto; }
  .doc-staged select { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- work orders */
.form-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.form-card h2 { font-size: 16px; margin: 6px 0 4px; padding: 0; border: 0; }
.form-code { font-size: 12px; color: var(--brand-2); font-weight: 600; }
.wo-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.wo-status .progress { min-width: 180px; }
.save-state { font-size: 12.5px; color: var(--muted); align-self: center; }
.save-state.err { color: var(--red); }
.req { color: var(--red); }

.wo-doc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.wo-head { border: 1.5px solid var(--text); border-bottom: 0; }
.wo-org { font-weight: 700; letter-spacing: .02em; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.wo-headgrid { display: grid; grid-template-columns: 1fr 1fr; }
.wo-formtitle { display: grid; place-items: center; font-size: 22px; font-weight: 800; letter-spacing: .08em; padding: 12px; border-right: 1px solid var(--line); }
.wo-ids > div { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.wo-ids > div + div { border-top: 1px solid var(--line); }
.wo-ids input { max-width: 170px; }
.wo-hlabel { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.wo-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; border: 1.5px solid var(--text); padding: 12px; margin-bottom: 14px; }
.wo-fields .wide { grid-column: 1 / -1; }
.wo-hfield { display: grid; gap: 4px; }
.wo-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.wo-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wo-check.block { display: flex; align-items: flex-start; margin: 4px 0; }
.wo-check.block input { margin-top: 3px; }
.wo-check.other input { width: 220px; }

.wo-steps { border: 1.5px solid var(--text); }
.wo-steps > thead th { background: var(--panel-2); color: var(--text); font-weight: 700; font-size: 11.5px; border: 1px solid var(--line); text-align: center; }
.wo-steps > tbody > tr > td { border: 1px solid var(--line); vertical-align: top; }
.wo-no { width: 64px; font: 600 12.5px var(--mono); white-space: nowrap; }
.wo-na { width: 96px; text-align: center; }
.wo-sign { width: 150px; text-align: center; }
.wo-detail.d2 { padding-left: 28px; }
.wo-title { font-weight: 600; }
.wo-step.is-group .wo-title, .wo-step.is-head .wo-title { font-weight: 800; letter-spacing: .02em; }
.wo-step.is-group td { background: var(--panel-2); }
.wo-ref { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.wo-instr { margin: 8px 0 4px; }
.wo-note { margin: 8px 0 0; padding: 8px 10px; background: color-mix(in srgb, var(--amber) 9%, transparent); font-size: 13px; }
.wo-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wo-line > span:first-child { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.wo-line > input { flex: 1; min-width: 160px; }
.field.short { max-width: 160px; }
.wo-step.is-signed > td { background: color-mix(in srgb, var(--green) 6%, transparent); }
.wo-step.is-na > td { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.wo-step.is-na .wo-detail { color: var(--muted); }
.wo-step.flash > td { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--brand-2) 30%, transparent); } }
.wo-step .field:disabled { background: transparent; border-color: transparent; color: var(--text); opacity: 1; padding-left: 0; }
.wo-sub { margin-top: 8px; border: 1px solid var(--line); }
.wo-sub th { font-size: 11.5px; background: var(--panel-2); border: 1px solid var(--line); padding: 5px 8px; }
.wo-sub td { border: 1px solid var(--line); padding: 4px 8px; font-size: 13px; }
.wo-sub .c { text-align: center; }
.wo-sub td.m { width: 170px; }
.meas { display: flex; align-items: center; gap: 4px; }
.meas .field { padding: 4px 6px; }
.meas .unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wo-sub .field.num { padding: 4px 6px; min-width: 56px; text-align: right; }
.yn { display: inline-flex; gap: 3px; }
.yn button { min-width: 34px; padding: 3px 8px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--muted); font-weight: 600; font-size: 12px; cursor: pointer; }
.yn button:hover:not(:disabled) { border-color: var(--muted); }
.yn button.on[data-val="Y"], .yn button.on[data-val="YES"] { border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--text); }
.yn button.on[data-val="N"], .yn button.on[data-val="NO"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--text); }
.yn button:disabled { cursor: default; }
.yn button:disabled:not(.on) { opacity: .35; }
.sig { display: grid; gap: 2px; font-size: 12.5px; }
.sig b { color: var(--green); }
.sig.na b { color: var(--muted); }
.sig small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.linkish { background: none; border: 0; color: var(--link); cursor: pointer; font-size: 11.5px; padding: 2px 0; text-decoration: underline; }

.wo-statement, .wo-list { border: 1.5px solid var(--text); border-top: 0; padding: 12px 14px; }
.wo-list { border-top: 1.5px solid var(--text); margin-top: 14px; }
.wo-statement h3, .wo-list h3 { font-size: 13px; margin: 0 0 8px; letter-spacing: .02em; }
.wo-approvals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.wo-certified { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.e-sig { font-family: var(--mono); font-size: 12px; color: var(--green); }
.wo-list .add-row { padding: 10px 0 0; }
.wo-list .wo-sub input.field { padding: 4px 6px; min-width: 70px; }
.wo-foot { margin-top: 14px; font: 11px var(--mono); color: var(--muted); text-align: right; }

@media screen and (max-width: 900px) {
  .wo-fields { grid-template-columns: 1fr 1fr; }
  .wo-approvals, .wo-certified { grid-template-columns: 1fr; }
}
@media screen and (max-width: 640px) {
  .wo-doc { padding: 10px; }
  .wo-headgrid, .wo-fields { grid-template-columns: 1fr; }
  .wo-formtitle { border-right: 0; border-bottom: 1px solid var(--line); }
  .wo-na, .wo-sign { width: 80px; }
}

/* Print: the work order prints like the paper form. */
@media print {
  .wo-status, .page-head .actions, .wo-list .add-row, [data-lrm], .linkish, .wo-na .btn, .wo-sign .btn, .save-state { display: none !important; }
  .wo-doc { border: 0; padding: 0; }
  .wo-doc, .wo-doc * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .wo-doc .field { border: 0; padding: 0; }
  .yn button:not(.on) { display: none; }
  .yn button.on { border: 1px solid #000 !important; }
  .wo-steps > tbody > tr { break-inside: avoid; }
  .table-wrap { overflow: visible; }
}
.modal-box .form-grid label.wo-check { display: inline-flex; }
.modal-box .form-grid .wo-hfield { display: grid; }
/* Keep 11/13/14 columns fixed so N/A and Sign-off stay on screen; the details column takes the rest. */
.wo-steps { table-layout: fixed; width: 100%; }
.wo-steps > thead th:nth-child(1) { width: 64px; }
.wo-steps > thead th:nth-child(3) { width: 92px; }
.wo-steps > thead th:nth-child(4) { width: 150px; }
.wo-detail { min-width: 0; overflow-wrap: anywhere; }
.wo-detail .table-wrap { max-width: 100%; }
.wo-sub { width: 100%; }
.wo-line > input { min-width: 0; }
.wo-sub td.m { width: 34%; }
.meas .field { min-width: 0; width: 100%; }
@media screen and (max-width: 640px) {
  .wo-steps > thead th:nth-child(1) { width: 46px; }
  .wo-steps > thead th:nth-child(3) { width: 64px; }
  .wo-steps > thead th:nth-child(4) { width: 92px; }
}

.wo-docs { margin-bottom: 16px; }

/* ---------------------------------------------------------------- tolerance checking */
.wo-sub td.lim { font: 12px var(--mono); color: var(--muted); white-space: normal; min-width: 90px; }
.wo-sub .verdict { font-size: 12px; font-weight: 600; color: var(--red); margin-top: 3px; }
.wo-sub .verdict:empty { display: none; }
.wo-sub tr.oot > td { background: color-mix(in srgb, var(--red) 12%, transparent); }
.wo-sub tr.oot .meas .field { border-color: var(--red); color: var(--red); font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 30%, transparent), 0 0 14px color-mix(in srgb, var(--red) 55%, transparent);
  animation: oot-pulse 1.4s ease-in-out infinite; }
@keyframes oot-pulse { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 45%, transparent), 0 0 22px color-mix(in srgb, var(--red) 75%, transparent); } }
@media (prefers-reduced-motion: reduce) { .wo-sub tr.oot .meas .field { animation: none; } }
.wo-sub tr.oot td.lim { color: var(--red); font-weight: 700; }
.wo-sub tr.inlimit .meas .field { border-color: var(--green); }
.wo-sub tr.inlimit td.lim::after { content: ' ✓'; color: var(--green); font-weight: 700; }
.wo-sub tr.row-na > td { opacity: .55; }
.wo-step .wo-sub tr.oot .field:disabled { color: var(--red); }
#ootCount[hidden] { display: none; }

/* ---------------------------------------------------------------- form page & editor */
.form-card h2 a { color: inherit; }
.form-outline .fo { table-layout: auto; border: 0; }
.form-outline .fo td { border: 0; border-bottom: 1px solid var(--line); }
.fs-table { margin-top: 6px; font-size: 12.5px; }
.fs-limit { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 2px 0 2px 10px; border-left: 2px solid var(--line); margin-top: 3px; }
.fs-limit b { font: 600 12px var(--mono); color: var(--muted); }
.fs-limit b.auto { color: var(--brand-2); }
.fs-limit i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.fe-actions { white-space: nowrap; text-align: right; width: 1%; }
.fe-actions .btn { margin-left: 3px; }
.modal-box.xwide { max-width: 1120px; }
.modal-box.xwide form { gap: 12px; }
.fe-block { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; display: grid; gap: 8px; margin-bottom: 10px; background: var(--panel-2); }
.fe-bhead { display: flex; justify-content: space-between; align-items: center; color: var(--text); font-size: 13px; }
.fe-btools .btn { margin-left: 3px; }
.fe-topts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px 10px; }
.fe-rows { width: 100%; min-width: 900px; }
.fe-rows th { font-size: 11px; padding: 4px 4px; white-space: nowrap; }
.fe-rows td { padding: 2px 3px; border: 0; }
.fe-rows td .field { padding: 5px 7px; font-size: 13px; background: var(--panel); }
.fe-rows td:nth-child(1) { min-width: 240px; }
.fe-rows td:nth-child(2), .fe-rows td:nth-child(3), .fe-rows td:nth-child(4) { width: 84px; }
.fe-rows td:nth-child(7), .fe-rows td:nth-child(8) { width: 96px; }
.fe-rows .c { text-align: center; }
.fe-add { display: flex; gap: 8px; }
.fe-add select { max-width: 420px; }
.modal-box .fe-block label, .modal-box .fe-top label { display: block; font-size: 12.5px; color: var(--muted); }
.modal-box .fe-block label .field, .modal-box .fe-top label .field { margin-top: 4px; }
.modal-box .fe-block .wo-check { display: inline-flex; color: var(--text); }
@media screen and (max-width: 760px) { .fe-topts { grid-template-columns: 1fr; } }
@media print { .wo-sub tr.oot .meas .field { box-shadow: none; animation: none; } .wo-sub .verdict { color: #000 !important; } }

/* hard stops */
.banner.stop { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 2px solid var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); margin-bottom: 12px; }
.wo-lock { margin: 0 0 6px; padding: 5px 9px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.lock-hold .wo-lock, .wo-lock.failed { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 9%, transparent); }
/* a locked step reads as waiting, but stays legible (its lock note says why) */
.wo-step.is-locked .wo-title, .wo-step.is-locked .wo-ref, .wo-step.is-locked .wo-line, .wo-step.is-locked .wo-instr { color: var(--muted); }
.wo-step.is-locked .table-wrap { opacity: .8; }
.wo-step.is-failed > td { background: color-mix(in srgb, var(--red) 8%, transparent); }
.attempt { border-top: 1px solid var(--line); }
.attempt summary { padding: 10px 16px; cursor: pointer; }

/* tool fields */
.wo-tools { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 8px; }
.wo-tools-label { font-size: 12.5px; color: var(--muted); }
.wo-tools [data-toolscan] { max-width: 240px; }
.tool-chip { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); font-size: 12.5px; }
.tool-chip .cal { font-weight: 600; color: var(--green); }
.tool-chip.bad { border-color: var(--red); } .tool-chip.bad .cal { color: var(--red); }
.tool-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 2px; }

/* ---- Shop map ---- */
.shopmap { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.shopmap-panel { padding: 6px; }
.shopmap-side { position: sticky; top: 12px; }
.shopmap-svg { display: block; width: 100%; height: auto; }
.shopmap-svg text { font-family: inherit; text-anchor: middle; fill: var(--text); pointer-events: none; }
.shopmap-svg .road { font-size: 13px; fill: var(--muted); letter-spacing: .08em; }
.shopmap-svg .shell { fill: none; stroke: var(--text); stroke-width: 5; }
.shopmap-svg .door { stroke: var(--panel); stroke-width: 7; stroke-dasharray: 22 8; }
.shopmap-svg .void rect { fill: var(--panel-2); stroke: var(--text); stroke-width: 3; }
.shopmap-svg .void path { fill: none; stroke: var(--brand-gray); stroke-width: 1.5; }
.shopmap-svg .room rect, .shopmap-svg .room polygon { fill: var(--panel); stroke: var(--text); stroke-width: 2.5; transition: fill .12s; }
.shopmap-svg .room polygon { stroke: none; }
.shopmap-svg .room:hover > rect, .shopmap-svg .room:hover > polygon, .shopmap-svg .room:focus-visible > rect { fill: color-mix(in srgb, var(--brand-3) 22%, var(--panel)); }
.shopmap-svg .room.has > rect, .shopmap-svg .room.has > polygon { fill: color-mix(in srgb, var(--brand-3) 12%, var(--panel)); }
.shopmap-svg .room.on > rect, .shopmap-svg .room.on > polygon { fill: color-mix(in srgb, var(--brand-2) 38%, var(--panel)); }
.shopmap-svg .room.on > rect { stroke: var(--brand); stroke-width: 5; }
.shopmap-svg .room { cursor: pointer; outline: none; }
.shopmap-svg .no { font-size: 25px; font-weight: 700; }
.shopmap-svg .nm { font-size: 14px; fill: var(--muted); }
.shopmap-svg .nm.sm { font-size: 12px; }
.shopmap-svg .room.on .nm { fill: var(--text); }
.shopmap-svg .count rect { fill: var(--brand); stroke: none; }
.shopmap-svg .count text { fill: #fff; font-size: 12.5px; font-weight: 700; }
.shopmap-svg .pin circle { fill: var(--red); stroke: #fff; stroke-width: 2; }
.shopmap-svg .pin .pulse { fill: var(--red); stroke: none; opacity: .5; transform-box: fill-box; transform-origin: center; animation: map-pulse 1.4s ease-out infinite; }
.shopmap-svg .pin text { font-size: 11px; font-weight: 700; font-family: var(--mono); fill: var(--red); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
@keyframes map-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shopmap-svg .pin .pulse { animation: none; } }
.map-found .big { font-size: 22px; margin-top: 2px; }
.map-found .big b { color: var(--brand); font-family: var(--mono); }
.map-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.view a.map-pin { font-size: 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 7px; margin-left: 4px; color: var(--link); background: var(--panel-2); text-decoration: none; }
.view a.map-pin:hover { border-color: var(--brand-2); }
/* a store drawn from its layout file: the racks in plan, wider than the facility drawing */
.shopmap.site { grid-template-columns: minmax(320px, 1.3fr) minmax(0, 1fr); }
.view .site-plan a, .view .site-plan a text { text-decoration: none !important; } /* the page underlines links; the plan does not */
.site-plan .zone-name { font-size: 420px; font-weight: 700; text-anchor: start; fill: var(--text); pointer-events: auto; cursor: pointer; }
.site-plan .zone:hover .zone-name, .site-plan .zone.on .zone-name { fill: var(--brand); }
.site-plan .rack { cursor: pointer; outline: none; }
.site-plan .rack rect { fill: var(--panel); stroke: var(--text); stroke-width: 45; }
.site-plan .rack.alt rect { fill: color-mix(in srgb, var(--muted) 16%, var(--panel)); }
.site-plan .rack.in-area rect { stroke: var(--brand); }
.site-plan .rack:hover rect, .site-plan .rack:focus-visible rect { fill: color-mix(in srgb, var(--brand-3) 34%, var(--panel)); }
.site-plan .rack.on rect { fill: color-mix(in srgb, var(--red) 28%, var(--panel)); stroke: var(--red); stroke-width: 90; }
.site-plan .rack text { font-size: 330px; font-weight: 600; font-stretch: 75%; }
.site-plan .count circle { fill: var(--brand); }
.site-plan .count text { font-size: 260px; font-weight: 700; fill: #fff; }
.site-plan .rack .pulse { fill: var(--red); opacity: .35; transform-box: fill-box; transform-origin: center; animation: map-pulse 1.4s ease-out infinite; pointer-events: none; }
.site-plan .scale path { fill: none; stroke: var(--muted); stroke-width: 40; }
.site-plan .scale text { font-size: 300px; fill: var(--muted); }
@media (prefers-reduced-motion: reduce) { .site-plan .rack .pulse { animation: none; } }
@media screen and (max-width: 900px) { .shopmap { grid-template-columns: 1fr; } .shopmap-side { position: static; } .shopmap-panel { max-width: 440px; } .shopmap.site { grid-template-columns: 1fr; } .shopmap.site .shopmap-panel { max-width: none; } }
@media print { .shopmap-side { position: static; } }

/* ---- Work order labor clock ---- */
.wo-clock { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.wo-clock.on { border-left-color: var(--green); }
.wo-clock .me { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wo-clock .tot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wo-clock #woTimer { font-size: 24px; font-variant-numeric: tabular-nums; }
.wo-clock .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: clock-blink 1.6s ease-in-out infinite; }
.wo-clock .btn.lg { padding: 10px 20px; font-size: 15px; font-weight: 600; }
.wo-clock .detail { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 8px; }
.wo-clock .detail h2.sub-h { margin: 12px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wo-doc [inert] { opacity: .55; }
@keyframes clock-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .wo-clock .dot { animation: none; } }

/* ---- Form library & records ---- */
.ef-dept { font-size: 15px; margin: 22px 0 10px; color: var(--brand-2); letter-spacing: .02em; }
.ef-group { margin-bottom: 12px; }
.ef-doc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.ef-head { border: 1.5px solid var(--text); padding: 10px 14px; margin-bottom: 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; }
.ef-org { font-weight: 700; letter-spacing: .02em; font-size: 12.5px; grid-column: 1 / -1; }
.ef-title { font-size: 19px; font-weight: 800; letter-spacing: .05em; }
.ef-no { font-size: 13px; }
.ef-h { font-size: 13.5px; margin: 18px 0 8px; padding: 6px 10px; background: var(--panel-2); }
.ef-note { font-size: 12.5px; color: var(--muted); margin: 8px 0; line-height: 1.5; }
.ef-label { font-size: 12.5px; font-weight: 600; margin: 14px 0 6px; }
.ef-fields { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px 14px; margin: 10px 0; }
.ef-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ef-field > span:first-child { font-size: 12px; color: var(--muted); font-weight: 600; }
.ef-field.check { flex-direction: row; align-items: flex-start; gap: 8px; }
.ef-field.check > span { font-size: 13px; color: var(--text); font-weight: 400; }
.ef-field .field { width: 100%; }
.ef-opts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.ef-opts label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ef-fields .ef-opts label { white-space: normal; }
.ef-table { width: 100%; border-collapse: collapse; }
.ef-table th { font-size: 11.5px; text-align: left; padding: 6px 6px; border: 1px solid var(--line); background: var(--panel-2); vertical-align: bottom; }
.ef-table td { border: 1px solid var(--line); padding: 3px 4px; vertical-align: middle; }
.ef-table td.lead { font-size: 13px; padding: 6px 8px; min-width: 200px; }
.ef-table td.n, .ef-table th.n { width: 30px; text-align: center; color: var(--muted); font-size: 12px; }
.ef-table td.x { width: 24px; text-align: center; }
.ef-table .field { width: 100%; min-width: 86px; border-color: transparent; background: transparent; padding: 5px 6px; }
.ef-table .field:focus { border-color: var(--brand-2); background: var(--panel); }
.ef-table td.t-area .field { min-width: 220px; }
.ef-table td.t-check { text-align: center; }
.ef-table td.t-radio .ef-opts { gap: 2px 12px; padding: 2px 4px; }
.ef-table-block > .btn { margin-top: 6px; }
/* Figures the form works out (calc.js): shaded until typed over; then outlined, with a button that brings the calculated figure back. */
.ef-field, .ef-table td { position: relative; }
.field.calc-auto { background: var(--panel-2); }
.field.calc-over { box-shadow: inset 0 0 0 1px var(--amber); padding-right: 26px; }
.ef-field .field.calc-over { padding-right: 96px; }
.calc-reset { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; color: var(--amber); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.ef-field > .calc-reset { top: auto; bottom: 4px; transform: none; }
.calc-reset:hover, .calc-reset:focus-visible { color: var(--mag); text-decoration: underline; }

.ef-compact { column-gap: 22px; column-width: var(--cw, 180px); }
.ef-crow { display: flex; align-items: center; gap: 8px; break-inside: avoid; padding: 2px 0; border-bottom: 1px dotted var(--line); }
.ef-crow .lead { width: 30px; text-align: right; font: 600 12px var(--mono); color: var(--muted); }
.ef-crow .field { width: 58px; padding: 3px 5px; }
.ef-crow .ef-opts { gap: 2px 9px; }
.ef-signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 6px; }
.ef-sign { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ef-sign .ef-label { margin: 0; }
.e-sigimg { display: block; max-width: 100%; max-height: 56px; object-fit: contain; align-self: flex-start; }
.ef-help summary { cursor: pointer; padding: 12px 16px; font-weight: 600; }
.ef-help ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.ef-help { margin-top: 12px; }
@media screen and (max-width: 760px) { .ef-fields { grid-template-columns: 1fr; } }


/* ---- Tags & paperwork at receiving ---- */
.pw-box { max-width: 720px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; }
.pw-group { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-2); margin: 14px 0 4px; }
.modal-box label.pw-opt { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; color: var(--text); font-size: 13px; }
.modal-box label.pw-opt:hover { background: var(--panel-2); }
.modal-box .pw-opt input { margin-top: 3px; flex: none; width: auto; }
.pw-opt > span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pw-opt .muted { flex-basis: 100%; font-size: 12px; }
.pw-opt .mono.muted, .pw-opt.pw-sign .muted { flex-basis: auto; }
.modal-box label.pw-sign { border-top: 1px solid var(--line); border-radius: 0; margin-top: 12px; padding-top: 12px; }
.pw-paper { font-size: 11px; padding: 1px 7px; border-radius: var(--r-sm); border: 1px solid var(--line); color: #000; background: #fff; }
.pw-paper.paper-red { background: #f6a5a5; } .pw-paper.paper-yellow { background: #f7e58a; } .pw-paper.paper-blue { background: #a9cdf5; } .pw-paper.paper-pink { background: #f7bfd8; }
.tag-sheet { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; page: label; }
.tag-sheet + .label-sheet { margin-top: 16px; }
.tagcard { width: 75mm; height: 55mm; overflow: hidden; background: #fff; color: #000; border: 1px dashed #b9bfc4; border-top: 5px solid #b9bfc4; padding: 1.5mm 2.5mm; font-size: 11px; line-height: 1.2; break-inside: avoid;
  font-family: var(--display); font-weight: 700; -webkit-font-smoothing: none; }
.tagcard.paper-red { border-top-color: #d93636; } .tagcard.paper-yellow { border-top-color: #e2c21b; } .tagcard.paper-blue { border-top-color: #2f7fd6; } .tagcard.paper-pink { border-top-color: #e77aa9; }
/* The tag's content is scaled by fitTags() (app.js): down until a full tag fits the card, up until a short one fills it. */
.tg-fit { zoom: 1; }
.tg-top { display: flex; align-items: center; gap: 6px; border-bottom: 2px solid #000; padding-bottom: 2px; margin-bottom: 4px; }
.tg-top .label-brand { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #000; }
.tg-top .label-brand b { font-size: 11px; }
.tg-top .label-brand .mark { width: 16px; height: 13px; }
.tg-title { font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.tg-fields { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 3px 8px; margin-bottom: 4px; }
.tg-fields > div { border-bottom: 1.5px solid #000; min-height: 24px; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.tg-fields > div.wide { grid-column: 1 / -1; min-height: 30px; }
.tg-fields span { font-size: 8.5px; color: #000; }
.tg-fields b { font-size: 12px; font-weight: 700; white-space: pre-wrap; }
.tg-h { font-weight: 700; margin: 3px 0 1px; font-size: 10px; text-transform: uppercase; }
.tg-note { font-size: 9px; margin: 2px 0; }
.tg-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.tg-table th, .tg-table td { border: 1.5px solid #000; padding: 1px 3px; font-size: 9px; text-align: left; height: 14px; }
.tg-code { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tg-code .barcode { height: 10mm; width: 46mm; }
.tagcard .tg-code .mono { font-size: 14px; }
.tg-foot { display: flex; justify-content: space-between; font: 700 8.5px var(--display); color: #000; margin-top: 4px; }
.tg-edit { display: block; margin-top: 6px; font-size: 11px; color: #0f6f93; }
@media print { .tagcard { border-color: transparent; border-top: 0; padding-top: 2mm; } }

/* ---- Letterhead and print frame for official documents ---- */
.print-frame { width: 100%; border-collapse: collapse; }
.pf-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 11px var(--mono); color: var(--muted); }
.print-frame > thead > tr > td, .print-frame > tbody > tr > td, .print-frame > tfoot > tr > td { padding: 0; border: 0; }
.letterhead { display: flex; align-items: center; gap: 12px; padding: 4px 2px 10px; margin-bottom: 14px; border-bottom: 2px solid var(--brand); }
.letterhead .mark { width: 54px; height: 43px; flex: none; }
.lh-word { font-size: 26px; font-weight: 800; letter-spacing: .04em; line-height: 1; color: var(--brand); }
.lh-name { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }
.wo-org:empty { display: none; }
.ef-head { grid-template-columns: 1fr auto; }
@media print {
  @page { margin: 0; } /* no page margin = no browser header/footer (address, date, page title) */
  .view:not(:has(.print-frame)) { padding: .25in; }
  .print-frame > thead > tr > td { padding: .35in .45in 0; }
  .print-frame > tbody > tr > td { padding: 0 .45in; }
  .pf-foot { padding: .1in .45in .3in; }
  .letterhead { border-bottom-color: #0f5b78; margin-bottom: .12in; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lh-word { color: #0f5b78; } .lh-name { color: #333; }
}

/* ---- Printing official documents: only the document, entries as text, tables sized to the paper ---- */
.pv, .print-only { display: none; }
.ef-crow small { font-size: 10.5px; color: var(--muted); margin-right: 3px; }
.ef-crow > span { display: inline-flex; align-items: center; }
.ef-crow .t-text .field { width: 130px; }
@media print {
  /* nothing but the document: no page title, breadcrumb ("Forms / Library"), status line or side panels */
  .view:has(> .print-frame) > :not(.print-frame) { display: none !important; }
  .page-head .crumb { display: none !important; }
  .print-only { display: block; }
  .pv-src { display: none !important; }
  .pv { display: inline-block; min-width: 3em; min-height: 1.35em; white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: bottom; }

  .ef-doc { border: 0; padding: 0; font-size: 11.5px; }
  .ef-doc, .ef-doc * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .ef-head { border-color: #000; padding: 7px 12px; margin-bottom: 10px; }
  .ef-title { font-size: 16px; }
  .ef-h { font-size: 12px; margin: 12px 0 6px; padding: 3px 0 3px 8px; border-left: 3px solid #000; break-after: avoid; }
  .ef-note { font-size: 10.5px; margin: 5px 0; line-height: 1.4; }
  .ef-label { font-size: 11.5px; margin: 10px 0 4px; break-after: avoid; }
  .ef-fields { gap: 6px 14px; margin: 7px 0; }
  .ef-field { break-inside: avoid; gap: 1px; }
  .ef-field > span:first-child { font-size: 9.5px; }
  .ef-field .pv { display: block; border-bottom: 1px solid #777; padding: 1px 2px; font-size: 11.5px; }
  .ef-field .pv-area { min-height: 2.9em; }
  .ef-field.check > span { font-size: 11.5px; }
  .ef-opts { font-size: 11px; gap: 2px 12px; }
  .ef-opts label { white-space: normal; }

  .ef-doc .table-wrap { overflow: visible; }
  .ef-table { table-layout: fixed; width: 100%; font-size: var(--fs, 10.5px); }
  .ef-table th { width: var(--w); font-size: inherit; padding: 3px 3px; border-color: #000; overflow-wrap: anywhere; hyphens: auto; vertical-align: bottom; }
  .ef-table th.n { width: 3.5%; }
  .ef-table td { border-color: #000; padding: 2px 3px; height: 1.9em; overflow-wrap: anywhere; vertical-align: top; }
  .ef-table td.lead { font-size: inherit; min-width: 0; padding: 3px 4px; }
  .ef-table td.n { font-size: inherit; vertical-align: middle; }
  .ef-table .pv { display: block; min-width: 0; }
  .ef-table .ef-opts { font-size: inherit; gap: 1px 8px; padding: 0; }
  .ef-table .ef-opts label { gap: 3px; }
  .ef-table input[type=checkbox], .ef-table input[type=radio], .ef-crow input[type=radio] { width: 11px; height: 11px; margin: 0; }
  .ef-doc tr, .ef-crow { break-inside: avoid; }

  .ef-compact { column-gap: 18px; column-width: var(--cwp, 170px); }
  .ef-crow { padding: 1px 0; font-size: 10.5px; gap: 6px; }
  .ef-crow .pv { min-width: 40px; border-bottom: 1px solid #777; margin-right: 4px; }
  .ef-crow .t-text .pv { min-width: 120px; }
  .ef-crow small { font-size: 8.5px; }

  .ef-signs { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0 4px; break-inside: avoid; }
  .ef-sign { border-color: #000; padding: 6px 9px; gap: 2px; break-inside: avoid; font-size: 11px; }
  .ef-sign .pv { display: block; border-bottom: 1px solid #777; }
  .ef-sign .cap { font-size: 8.5px; margin-top: 2px; }
  .ef-sign .sig-line { border-top: 1px solid #000; margin-top: 30px; padding-top: 1px; }
  .ef-doc .wo-foot { margin-top: 8px; }
}
@media print {
  .pf-foot { margin-top: 0; font-size: 8.5px; color: #000; }
  .ef-table th { white-space: normal; color: #000; font-weight: 600; border: 1px solid #000; }
  .ef-table td { border: 1px solid #000; }
}

/* ---- Work order on paper: full-width work column, inner tables sized to it, steps may run on to the next page ---- */
@media print {
  .wo-doc { font-size: 10.5px; line-height: 1.35; }
  .wo-head, .wo-fields, .wo-steps, .wo-statement, .wo-list { border-color: #000; }
  .wo-formtitle { font-size: 18px; padding: 8px; border-color: #000; }
  .wo-ids > div { padding: 5px 10px; border-color: #000; }
  .wo-hlabel { font-size: 9px; }
  .wo-fields { gap: 4px 12px; padding: 8px 10px; margin-bottom: 8px; }
  .wo-hfield { gap: 1px; }
  .wo-doc .pv { min-width: 46px; }
  .wo-fields .pv, .wo-ids .pv { font-size: 11.5px; min-width: 0; }

  .wo-steps { table-layout: fixed; width: 100%; border-width: 1px; }
  .wo-steps > thead th { font-size: 9px; padding: 4px 3px; border: 1px solid #000; white-space: normal; }
  .wo-steps > thead th:nth-child(1) { width: 8.5%; }
  .wo-steps > thead th:nth-child(3) { width: 7.5%; }
  .wo-steps > thead th:nth-child(4) { width: 16%; }
  .wo-steps > tbody > tr > td { border: 1px solid #000; padding: 4px 6px; }
  .wo-steps > tbody > tr { break-inside: auto; } /* a long step continues on the next page instead of leaving a gap */
  .wo-no { font-size: 9px; width: auto; letter-spacing: -.02em; }
  .wo-steps > tbody > tr > td.wo-no { padding: 4px 3px; }
  .wo-steps > tbody > tr.is-group { break-after: avoid; }
  .wo-detail.d2 { padding-left: 6px; }
  .wo-title:not(:last-child) { break-after: avoid; }
  .wo-ref { font-size: 9.5px; margin-top: 0; }
  .wo-ref:not(:last-child) { break-after: avoid; }
  .wo-instr { margin: 4px 0 2px; break-inside: avoid; }
  .wo-instr:not(:last-child) { break-after: avoid; }
  .wo-note { margin: 4px 0 0; padding: 2px 0 2px 7px; border-left: 2px solid #000; font-size: 9.5px; break-inside: avoid; }
  .wo-line { margin-top: 4px; gap: 6px; break-inside: avoid; }
  .wo-line > span:first-child { font-size: 9.5px; }
  .wo-tools { margin-top: 4px; }
  .wo-tools-label { font-size: 9.5px; }

  /* on paper every step shows as it will be worked: no lock banners, nothing greyed out */
  .wo-lock, .wo-doc .pill.s-pending { display: none !important; }
  .wo-step.is-locked .wo-title, .wo-step.is-locked .wo-ref, .wo-step.is-locked .table-wrap, .wo-step.is-locked .wo-line, .wo-step.is-locked .wo-instr,
  .wo-step.is-na .wo-detail, .wo-sub tr.row-na > td, .yn button:disabled:not(.on) { opacity: 1; }
  .wo-doc .pill { border: 0; padding: 0; font-size: 8.5px; font-style: italic; }
  .wo-doc .pill::before { display: none; }

  .wo-sub { width: 100%; table-layout: auto; margin-top: 4px; border: 1px solid #000; }
  .wo-sub th { font-size: 8.5px; padding: 2px 3px; border: 1px solid #000; white-space: normal; font-weight: 700; overflow-wrap: normal; word-break: keep-all; }
  .wo-sub td { font-size: 10px; padding: 2px 4px; border: 1px solid #000; overflow-wrap: anywhere; }
  .wo-sub tr { break-inside: avoid; }
  .wo-sub td.m { width: 22%; }
  .wo-sub td.lim { font-size: 9px; min-width: 0; width: 24%; }
  .wo-sub .field.num, .wo-list .wo-sub input.field { min-width: 0; }
  .meas { gap: 3px; }
  .meas .pv { flex: 1; min-width: 30px; border-bottom: 1px solid #777; text-align: right; }
  .meas .unit { font-size: 9px; }
  .wo-sub .verdict { font-size: 9px; }
  /* Y / N boxes: both print, so a blank sheet can be ticked by hand; the chosen one is solid */
  .wo-doc .yn button, .wo-doc .yn button:not(.on) { display: inline-block; min-width: 20px; padding: 0 4px; border: 1px solid #000 !important; border-radius: var(--r-sm); font-size: 9px; font-weight: 400; }
  .wo-doc .yn button.on { background: #000 !important; color: #fff !important; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .sig { font-size: 9.5px; }
  .sig small { font-size: 8px; }
  .wo-statement, .wo-list { padding: 8px 10px; border-width: 1px; break-inside: avoid; }
  .wo-list { margin-top: 8px; break-inside: auto; }
  .wo-statement h3, .wo-list h3 { font-size: 11px; margin-bottom: 5px; break-after: avoid; }
  .wo-check { font-size: 10.5px; }
  .wo-certified { margin-top: 8px; padding-top: 6px; border-color: #000; }
}

/* ---- Print refinements after reviewing the printed pages ---- */
.ef-signs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media print {
  /* every cell is ruled on all four sides (the screen rule that drops the last row's line does not apply on paper) */
  .ef-table tr > th, .ef-table tr > td { border: 1px solid #000 !important; }
  .wo-sub tr > th, .wo-sub tr > td { border: 1px solid #000 !important; }
  .ef-table tr > td { height: 26px; }
  .ef-table tr > td.t-area { height: 50px; }
  .ef-table th { overflow-wrap: normal; word-break: normal; hyphens: manual; }

  /* tick boxes and option circles: solid black outlines, also on a blank form; a chosen one is filled */
  .print-frame input[type=checkbox], .print-frame input[type=radio] {
    appearance: none; -webkit-appearance: none; flex: none; width: 11px; height: 11px; margin: 0 2px 0 0; vertical-align: -1px;
    border: 1px solid #000 !important; border-radius: var(--r-sm); background: #fff !important; opacity: 1 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-frame input[type=radio] { border-radius: 50%; }
  .print-frame input[type=checkbox]:checked, .print-frame input[type=radio]:checked { background: #000 !important; box-shadow: inset 0 0 0 2px #fff !important; }
  .ef-opts label { align-items: center; }

  /* room to write */
  .ef-field .pv { min-height: 1.7em; }
  .ef-field .pv-area { min-height: 4.4em; }
  .ef-field .pv-area:empty { border: 1px solid #777; }

  /* type never below about 7 pt */
  .pf-foot { font-size: 9.5px; }
  .ef-sign .cap { font-size: 9.5px; }
  .ef-crow small { font-size: 9.3px; }
  .wo-sub th, .wo-hlabel, .wo-steps > thead th, .wo-ref, .wo-note, .wo-line > span:first-child, .wo-tools-label, .meas .unit, .wo-sub .verdict, .wo-doc .yn button, .wo-doc .pill { font-size: 9.3px; }
  .wo-sub td.lim, .wo-no { font-size: 9.3px; }
  .sig small { font-size: 9.3px; }

  /* signature boxes: all in one row, compact, so they are not the thing that spills to a new page */
  .ef-signs { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin: 10px 0 2px; }
  .ef-sign { padding: 5px 8px; }
  .ef-sign .sig-line { margin-top: 30px; }

  /* keep a heading with what it introduces; keep short tables whole */
  .ef-h, .ef-label, .ef-table-block > .ef-note, .ef-note:has(+ .ef-fields), .ef-note:has(+ .ef-signs) { break-after: avoid; }
  .ef-table thead { break-after: avoid; }
  .ef-table-block:has(> .table-wrap):not(:has(tbody > tr:nth-child(7))) { break-inside: avoid; }
  .ef-fields { break-inside: avoid; }

  /* work order */
  .wo-doc .req { display: none; }
  tr.print-only { display: table-row; }
  .wo-sub tr.print-only > td { height: 24px; }
  .wo-sub th.c { white-space: nowrap; }
  .wo-sub th { min-width: 30px; }
  .wo-note:not(:last-child), .wo-line:not(:last-child) { break-after: avoid; }
  .wo-certified { gap: 14px; }
  .wo-certified > div { min-height: 46px; border-bottom: 1px solid #000; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 2px; }
  .wo-statement .wo-line .pv { flex: 1; border-bottom: 1px solid #777; }
}
@media print {
  /* closer spacing, used when it saves a page (set just before printing) */
  .ef-doc.pv-tight .ef-head { padding: 5px 10px; margin-bottom: 6px; }
  .ef-doc.pv-tight .ef-fields { gap: 3px 12px; margin: 4px 0; }
  .ef-doc.pv-tight .ef-field .pv { min-height: 1.45em; }
  .ef-doc.pv-tight .ef-field .pv-area { min-height: 3.6em; }
  .ef-doc.pv-tight .ef-table tr > td { height: 20px; padding: 1px 3px; }
  .ef-doc.pv-tight .ef-table tr > td.t-area { height: 34px; }
  .ef-doc.pv-tight .ef-table th { padding: 2px 3px; }
  .ef-doc.pv-tight .ef-h { margin: 8px 0 4px; }
  .ef-doc.pv-tight .ef-label { margin: 6px 0 3px; }
  .ef-doc.pv-tight .ef-note { margin: 3px 0; }
  .ef-doc.pv-tight .ef-signs { margin: 6px 0 0; }
  .ef-doc.pv-tight .ef-sign .sig-line { margin-top: 22px; }
  .ef-doc.pv-tight .ef-crow { padding: 0; }
  .ef-doc.pv-tight .ef-sign { padding: 3px 8px; }
}
@media print {
  /* entry lines of one row stay level when a neighbouring label wraps; row numbers sit level with the entries */
  .ef-field > span:first-child, .ef-sign > .ef-label { margin-bottom: auto; }
  .ef-table td.n { vertical-align: top; padding-top: 4px; }
  /* a tick column that stands for a signature: on paper an empty cell to sign in, with a taller row */
  .ef-table td.sigcell input:not(:checked) { display: none; }
  .ef-table:has(td.sigcell) tr > td { height: 34px; }
  .ef-doc.pv-tight .ef-table:has(td.sigcell) tr > td { height: 28px; }
  /* work order: write-in lines after "Reason:", "Tool used:"…; steps and short tables kept together */
  .wo-step .wo-line, .wo-step .wo-tools { border-bottom: 1px solid #777; min-height: 19px; align-items: flex-end; padding-bottom: 1px; break-before: avoid; }
  .wo-step .wo-line:has(.yn) { border-bottom: 0; }
  .wo-sub thead { break-after: avoid; }
  .wo-sub:not(:has(tbody > tr:nth-child(7))) { break-inside: avoid; }
  .wo-sub.series { table-layout: fixed; }
  .wo-sub.series th:first-child { width: 30%; }
  .wo-sub.series .pv { display: block; min-width: 0; }
}

/* ---- Purchase orders ---- */
.po-lines td { padding: 4px 5px; border-bottom: 0; }
.po-lines td.n { width: 34px; text-align: center; color: var(--muted); }
.po-lines td.uom { width: 48px; }
.po-lines td:nth-child(2) { min-width: 260px; }
.po-lines td:nth-child(4), .po-lines td:nth-child(5) { width: 120px; }
.po-lines td.amt, .po-lines tfoot td { white-space: nowrap; }
.po-lines tfoot td { border-top: 1px solid var(--text); padding-top: 8px; font-weight: 600; }
.po-doc .ef-table td { padding: 6px 8px; }
.po-doc .ef-table tfoot td { border: 0; border-top: 1.5px solid var(--text); }
.po-v { border-bottom: 1px solid var(--line); padding: 3px 2px; min-height: 1.7em; }
.po-notes { margin: 0 0 8px; white-space: pre-wrap; }
.po-doc .sig-line { display: block; border-top: 1px solid var(--line); margin-top: 26px; padding-top: 2px; font-size: 11px; color: var(--muted); }
.view a.pill { text-decoration: none; }
@media print {
  .po-doc .ef-table td { padding: 3px 5px; height: auto; }
  .po-v { border-bottom: 1px solid #777; }
  .po-doc a { color: #000 !important; text-decoration: none; }
}

/* ---- Authorized release certificate (FAA Form 8130-3): always black on white, landscape ---- */
.arc-wrap { overflow-x: auto; }
.arc-sheet { position: relative; overflow: hidden; min-width: 900px; max-width: 1100px; background: #fff; color: #000; border: 1.5px solid #000; font: 11.5px/1.35 Arial, Helvetica, sans-serif; }
.arc-sheet .mono { font-family: var(--mono); font-size: 11.5px; }
.arc-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.arc-top { grid-template-columns: 1fr 1.6fr 1fr; grid-auto-flow: row; }
.arc-org { grid-template-columns: 2.6fr 1fr; grid-auto-flow: row; }
.arc-items { grid-template-columns: .5fr 2fr 1.4fr .7fr 1.4fr 1.2fr; grid-auto-flow: row; }
.arc-cell { border: .75px solid #000; padding: 4px 6px; min-height: 44px; }
.arc-l { font-size: 9px; color: #000; margin-bottom: 2px; }
.arc-v { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.arc-title { text-align: center; display: grid; align-content: center; gap: 2px; }
.arc-title .arc-l { text-align: left; }
.arc-title b { font-size: 15px; letter-spacing: .04em; }
.arc-title span { font-size: 11px; font-weight: 700; }
.arc-items .arc-cell { min-height: 74px; }
.arc-remarks { min-height: 96px; }
.arc-remarks .arc-v { font-weight: 400; }
.arc-certs { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
.arc-half > .arc-cell { min-height: 72px; }
.arc-unused { background: repeating-linear-gradient(135deg, #fff 0 7px, #e9e9e9 7px 8px); }
.arc-check, .arc-stmt { font-size: 10.5px; margin-top: 3px; }
.arc-box { display: inline-grid; place-items: center; width: 11px; height: 11px; border: 1px solid #000; font-size: 9px; line-height: 1; vertical-align: -1px; background: #fff; }
.arc-sheet .e-sig { color: #000; font-family: var(--mono); font-size: 11px; }
.arc-user { min-height: 0; font-size: 9.5px; }
.arc-user b { display: block; text-align: center; font-size: 10.5px; }
.arc-user p { margin: 3px 0 0; }
.arc-foot { display: flex; justify-content: space-between; padding: 3px 6px; font-size: 9.5px; font-weight: 700; }
.arc-sheet.is-sample::after, .arc-sheet.is-void::after { content: 'SAMPLE — NOT VALID'; position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 84px var(--display, Arial); letter-spacing: .06em; color: rgba(192, 38, 38, .2); transform: rotate(-16deg); pointer-events: none; white-space: nowrap; }
.arc-sheet.is-void::after { content: 'VOID'; }
@media print {
  .arc-wrap { overflow: visible; padding: .4in .45in; }
  .arc-sheet { min-width: 0; max-width: none; width: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Issue material: stock on the left, the SR list on the right, as in the store's previous system ---- */
.sr-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media screen and (min-width: 1700px) { .sr-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); } } /* side by side only where both fit */
.sr-issued { display: grid; gap: 2px; font-size: 12.5px; }
.sr-layout tr.link.on > td { background: var(--panel-2); box-shadow: inset 0 0 0 0 transparent; }
.sr-layout td { vertical-align: top; }

/* ---- Receive form, laid out as the Goods Receiving Inspection Report (TDM-F401) ---- */
.modal-box.grir { max-width: 1360px; }
.grir .seg { align-items: center; }
.grir .seg span { padding: 6px 12px; }
.g-classnote { font-size: 12.5px; margin-left: 6px; font-style: normal; color: var(--muted); }
.g-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
/* The item grid reads as one sheet: the cells carry the rules; a field inside is bare until it is pointed at or typed in */
.g-items { border: 1px solid var(--rule); }
.g-items th { border: 1px solid var(--rule-2); background: var(--rail); white-space: normal; vertical-align: bottom; padding: 6px 8px; font-size: 10.5px; }
.g-items td { border: 1px solid var(--rule-2); padding: 2px 3px; vertical-align: top; }
.g-items td.n { width: 34px; text-align: center; padding-top: 9px; color: var(--muted); }
.g-items .field { padding: 6px 7px; border-color: transparent; background: transparent; }
.g-items .field:hover { border-color: var(--ctl); }
.g-items .field:focus { border-color: var(--mag); box-shadow: 0 0 0 1px var(--mag); background: var(--paper); }
.g-items .cam-scan { border-color: transparent; padding: 0 7px; }
.g-items .cam-scan:hover { border-color: var(--ink); }
.g-items .g-desc { min-width: 170px; }
.g-items .g-pn { min-width: 140px; }
.g-items .g-sl { min-width: 104px; }
.g-items .g-cnd { min-width: 154px; }
.g-items .g-qty { min-width: 104px; }
.g-items .g-cert { min-width: 84px; }
.g-items .g-chk { width: 1%; white-space: nowrap; padding: 4px 6px; }
.g-items .g-insp { min-width: 132px; }
.g-items .g-rem { min-width: 96px; }
.g-items tbody.is-held .g-insp .field { border-color: var(--amber); }
.g-items .g-uom { width: 52px; flex: none; }
.g-state { display: flex; flex-direction: column; gap: 2px; } /* SV / US, then the condition under it */
.g-state .field { min-width: 0; width: 100%; }
.modal-box .g-tick { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 4px 2px; cursor: pointer; color: var(--text); }
.g-tick input { margin: 0; accent-color: var(--mag); }
.label-code .label-lot { font-size: .72em; }
.g-part { font-size: 11.5px; padding: 2px 4px 0; }
.g-act { width: 1%; min-width: 108px; padding: 5px 26px 5px 8px; position: relative; } /* the row's windows, one under the other; remove in the corner */
.g-lnk { display: block; background: none; border: 0; padding: 2px 0; margin: 0; color: var(--mag); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; text-align: left; }
.g-lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-lnk:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
.g-lnk.g-rm { position: absolute; top: 5px; right: 6px; color: var(--muted); padding: 2px 4px; }
.g-lnk.g-rm:hover { color: var(--red); text-decoration: none; }
.g-more > td { background: var(--panel-2); }
.g-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding: 6px 2px; }
.modal-box .g-grid label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.g-under { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.g-sign { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
@media screen and (max-width: 900px) { .g-head, .g-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Work order: what sits above the form folds away ---- */
.fold { border-top: 2px solid var(--text); background: var(--panel); margin-bottom: 8px; }
.fold > summary { cursor: pointer; padding: 10px 16px; font-size: 13px; letter-spacing: .12em; display: flex; gap: 10px; align-items: center; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '+'; font: 700 16px/1 var(--mono); width: 14px; }
.fold[open] > summary::before { content: '–'; }
.fold > summary .muted, .fold > summary .pill { font: 400 12.5px Roboto, sans-serif; text-transform: none; letter-spacing: 0; }
.fold > summary .pill { font-weight: 700; }
.fold > .panel { border-top: 1px solid var(--line); margin: 0; }
.fold > .panel > h2:first-child { display: none; }
.fold > .panel.wo-docs > h2 ~ h2 { display: flex; }

/* ---- A window opened on top of a form (item details at receiving); the PIN prompt sits above everything ---- */
.modal.over { z-index: 26; }
.modal.pin-gate { z-index: 60; }
.seg span small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* ---- An edit to a stock record waiting for its second signature ---- */
.banner.edit-wait { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; border-width: 2px; }
.banner.edit-wait .actions { display: flex; gap: 8px; }
.chgs { margin: 6px 0; }
.chg { display: block; }

/* ---- Store Requisition window, laid out as TDM-F403: the form's columns, the store's ones shaded until issued ---- */
.g-head .span2 { grid-column: span 2; }
.g-head .span3 { grid-column: span 3; }
.g-head .span4 { grid-column: 1 / -1; }
.rec-filters { gap: 8px 14px; }
.rec-filters .lib-pick select { min-width: 150px; max-width: 240px; }
.rec-filters .lib-pick span { white-space: nowrap; }
.sr-for { display: flex; gap: 18px; flex-wrap: wrap; padding: 2px 0; }
.sr-for .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
@media screen and (max-width: 900px) { .g-head .span3 { grid-column: span 2; } }
.sr-items { border: 1.5px solid var(--text); }
.sr-items th { border: 1px solid var(--line); background: var(--panel-2); white-space: normal; vertical-align: bottom; padding: 6px; font-size: 10.5px; }
.sr-items td { border: 1px solid var(--line); padding: 7px 8px; vertical-align: top; }
.sr-items td:has(> .field) { padding: 3px 4px; }
.sr-items td.n { width: 34px; text-align: center; color: var(--muted); }
.sr-items td:has(> .field) ~ td.n, .sr-items tr[data-line] > td.n, .sr-items tr[data-line] > td.txt { padding-top: 9px; }
.sr-items .field { padding: 5px 6px; }
.sr-items td:nth-child(2) { min-width: 170px; }
.sr-items td:nth-child(3) { min-width: 180px; }
.sr-items td:nth-child(6), .sr-items td:nth-child(7) { width: 92px; }
.sr-items td:nth-child(11) { min-width: 160px; }
.sr-items td.mono, .sr-items td .mono { white-space: nowrap; }
.sr-items td.store { min-width: 64px; background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--muted) 16%, transparent) 7px 8px); }
.sr-items tr.sr-next > td { background: var(--panel-2); font-size: 12.5px; }
.sr-next div { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.sr-take { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.sr-take .field { width: 84px; }
.sr-bad { color: var(--red); }
.sr-off { color: var(--amber); font-weight: 600; }
.sr-scan { display: flex; gap: 8px; }
.sr-scan .field { max-width: 340px; }
.sr-sign { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1.5px solid var(--text); }
.sr-sign > div { padding: 8px 10px 10px; min-height: 64px; border-left: 1px solid var(--line); }
.sr-sign > div:first-child { border-left: 0; }
.sr-sign dt { font-size: 11.5px; color: var(--muted); }
.sr-sign dd { margin: 6px 0 0; display: grid; gap: 2px; font-size: 13px; }
.sr-sign .done b::before { content: '✓ '; color: var(--green); }
.sr-note { margin-right: auto; font-size: 12.5px; }
@media screen and (max-width: 700px) { .sr-sign { grid-template-columns: 1fr 1fr; } .sr-sign > div:nth-child(3) { border-left: 0; } .sr-sign > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---- Item traveler: the printed traceability record of one TDM number ---- */
.trv .ef-title { text-transform: uppercase; }
.trv-head { align-items: center; }
.trv-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.trv-id { display: grid; justify-items: center; gap: 3px; font-size: 13px; }
.trv-id svg { display: block; width: 210px; height: auto; }
.trv .mono { font-size: 1em; }
.trv-when { font-size: .88em; color: var(--muted); }
.trv .ef-h .trv-when { font-weight: 400; margin-left: 6px; }
.trv-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.trv-facts > div { padding: 5px 8px 6px; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trv-facts .span2 { grid-column: span 2; }
.trv-facts .span4 { grid-column: 1 / -1; }
.trv-facts dt { font-size: 11px; color: var(--muted); }
.trv-facts dd { margin: 1px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.trv-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.trv-table th { padding: 5px 6px; border: 1px solid var(--line); background: var(--panel-2); font-size: 11px; white-space: normal; vertical-align: bottom; }
.trv-table td, .trv-table tr:last-child td { padding: 4px 6px; border: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.trv-table td.n { text-align: right; }
.trv-table .chg { display: block; }
.trv-none { margin: 6px 0; font-size: 13px; color: var(--muted); }
.trv-end { margin: 16px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
@media screen and (max-width: 760px) { .trv-facts { grid-template-columns: 1fr 1fr; } .trv-table { table-layout: auto; } }
@media print {
  .trv-id svg { width: 2in; }
  .trv-sub, .trv-none, .trv-end { font-size: 9.5px; }
  .trv-facts, .trv-facts > div, .trv-table th, .trv-table td, .trv-end { border-color: #000 !important; }
  .trv-facts { break-inside: avoid; }
  .trv-facts dt { font-size: 8.5px; }
  .trv-facts dd { font-size: 10.5px; }
  .trv-table { font-size: 9.5px; }
  .trv-table th { padding: 3px 4px; font-size: 9px; font-weight: 600; }
  .trv-table td, .trv-table tr:last-child td { padding: 2px 4px; }
  .trv-table tr { break-inside: avoid; }
  .trv .ef-h { break-after: avoid; }
}

/* People & rights */
.person-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: -8px 0 16px; font-size: 13px; }
.person-side { display: grid; gap: 16px; align-content: start; }
.rights h4 { margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rights h4:first-child { margin-top: 4px; }
.rights .right { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; }
.rights .right:hover { background: var(--panel-2); }
.rights .right input { margin: 3px 0 0; accent-color: var(--brand); }
.rights .right small { display: block; color: var(--muted); font-size: 12px; }
.rights .right em { font-style: normal; font-size: 11.5px; color: var(--brand); white-space: nowrap; padding-top: 2px; }
.rights .right.locked { cursor: default; opacity: .6; }
.rights .right.locked:hover { background: none; }
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.with-copy { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.with-copy .field { flex: 1; margin-top: 0; }

/* language */
.login-lang { margin-top: 14px; background: none; border: 0; color: var(--link); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.tr-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tr-row .field { margin: 0; }
.tr-row .muted { font-size: 11.5px; }

/* ================================================================ the chart, on screen
   Rules that bring the feature sections above into the plate's vocabulary. Printed documents are untouched:
   everything here is screen-only, and the document tables keep their own case and weights on paper. */
@media print { body { font-family: Inter, system-ui, sans-serif; } }
@media screen {
  .mono { font-family: var(--sans); font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .01em; }
  td.num { font-stretch: 75%; font-weight: 500; }
  /* square everything: the chart has no rounded corner */
  .convert, .result-box, .dropzone, .fe-block, .wo-lock, .tool-chip, .seg span, .yn button, .chips .code-link, .ef-sign, .label-preview,
  .wo-note, .scan-said, .view a.map-pin, .camera-frame, .pw-paper, .checklist .num, .modal-box form fieldset, .modal-box label.pw-opt { border-radius: 0; }
  /* one family on screen: the few places the feature sections still asked for a monospace */
  .wo-sub td.lim, .fs-limit b, .modal-box form legend .n, .ef-crow .lead, .pf-foot, .shopmap-svg .pin text { font-family: var(--sans); font-stretch: 75%; }

  /* documents on screen: paper with an ink edge */
  .wo-doc, .ef-doc { background: var(--paper); border: 1px solid var(--ink); }
  .ef-h { background: none; border-left: 0; border-bottom: 1px solid var(--ink); padding: 4px 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
  .ef-dept { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
  .form-code { color: var(--muted); }
  .form-card h2 { font-size: 15px; }
  .pw-group { color: var(--ink); }
  .fs-limit b.auto { color: var(--blue); }
  .wo-note { border: 1px solid var(--amber); background: none; }
  .wo-steps > thead th, .wo-sub th, .ef-table th, .g-items th, .sr-items th, .trv-table th, .po-doc th, .tg-table th { text-transform: none; letter-spacing: 0; color: var(--ink); }
  .ef-table .field:focus { border-color: var(--mag); background: var(--paper); }
  .wo-step .field:disabled { background: transparent; }
  .wo-no { font-family: var(--sans); font-stretch: 75%; font-weight: 600; }
  .e-sig { font-family: var(--sans); font-stretch: 75%; font-weight: 600; }
  .wo-foot { font-family: var(--sans); font-size: 11.5px; }

  /* the labor clock: a ruled strip, the running state shown by the dot and the figure, not a coloured edge */
  .wo-clock { border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-2); padding: 10px 14px; background: var(--paper); }
  .wo-clock.on { border-top-color: var(--green); }
  .wo-clock #woTimer { font-size: 26px; font-weight: 600; font-stretch: 75%; }
  .wo-clock .detail h2.sub-h { margin: 12px 0 4px; }
  .wo-clock .dot { animation: none; }

  /* what sits above a work order folds away */
  .fold { border-top: 2px solid var(--ink); background: var(--paper); margin-bottom: 8px; }
  .fold > summary { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 9px 12px; }
  .fold > summary::before { font-family: var(--sans); font-weight: 600; }
  .fold > summary .muted, .fold > summary .pill { font-size: 12.5px; text-transform: none; letter-spacing: 0; }
  .fold > summary .pill { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
  .fold > .panel { border-top: 1px solid var(--rule-2); }

  /* the scan page: what the scan did, said once, plainly */
  .scan-input { font-stretch: 75%; font-weight: 600; letter-spacing: .04em; }
  .scan-input:focus { border-color: var(--mag) !important; box-shadow: 0 0 0 1px var(--mag); }
  .scan-said { border: 1px solid var(--rule-2); border-left-width: 1px; background: var(--paper); }
  .scan-said.said-ok { border-color: var(--green); }
  .scan-said.said-err { border-color: var(--red); background: var(--paper); }
  .scan-said time { font-family: var(--sans); font-stretch: 75%; font-weight: 600; }
  .camera-frame { border-color: var(--mag); }

  /* the first-run checklist and setup region */
  .setup { border-color: var(--ink); }
  .checklist .num { border: 1px solid var(--ink); color: var(--ink); font-family: var(--sans); font-stretch: 75%; }
  .checklist li.done .num { background: var(--green); border-color: var(--green); color: #fff; }

  /* receiving: the kind-of-item choice, the drop zone, the staged documents */
  .seg span { border: 1px solid var(--ctl); }
  .seg .ok input:checked + span { border-color: var(--green); background: #e6f1ea; }
  .seg .hold input:checked + span { border-color: var(--amber); background: #f3ecdf; }
  .seg .bad input:checked + span { border-color: var(--red); background: #f7e3e6; }
  .dropzone { border: 1px dashed var(--ctl); background: var(--paper); }
  .dropzone.over { border-color: var(--mag); background: var(--mag-tint); }
  .convert { background: var(--mag-tint); border: 1px solid var(--mag); }
  .result-box { background: #e6f1ea; border: 1px solid var(--green); }
  .tool-chip { border: 1px solid var(--rule-2); background: var(--paper); }
  .fe-block { border: 1px solid var(--rule-2); background: var(--rail); }
  .yn button { border: 1px solid var(--ctl); background: var(--paper); }
  .yn button.on[data-val="Y"], .yn button.on[data-val="YES"] { background: #e6f1ea; }
  .yn button.on[data-val="N"], .yn button.on[data-val="NO"] { background: #f7e3e6; }
  .wo-lock { background: var(--rail); border: 1px solid var(--rule-2); }
  .wo-step.flash > td { animation: flash 1.2s var(--ease); }
  @keyframes flash { from { background: var(--mag-tint); } }

  /* the shop map: a plan in ink; the room in hand in magenta */
  .shopmap-svg .shell { stroke: var(--ink); stroke-width: 4; }
  .shopmap-svg .room rect, .shopmap-svg .room polygon { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
  .shopmap-svg .room.has > rect, .shopmap-svg .room.has > polygon { fill: var(--rail); }
  .shopmap-svg .room:hover > rect, .shopmap-svg .room:hover > polygon, .shopmap-svg .room:focus-visible > rect { fill: #e4e4e4; }
  .shopmap-svg .room.on > rect, .shopmap-svg .room.on > polygon { fill: var(--mag-tint); }
  .shopmap-svg .room.on > rect { stroke: var(--mag); stroke-width: 4; }
  .shopmap-svg .count rect { fill: var(--ink); }
  .shopmap-svg .void rect { fill: var(--rail); stroke: var(--ink); stroke-width: 2; }
  .shopmap-svg .door { stroke: var(--paper); }
  .shopmap-svg .pin text { font-family: var(--sans); font-stretch: 75%; }
  .map-found .big b { color: var(--ink); font-family: var(--sans); font-stretch: 75%; }
  .view a.map-pin { border: 1px solid var(--rule-2); background: var(--paper); color: var(--blue); }
  .view a.map-pin:hover { border-color: var(--ink); }

  /* the factory scheduler: the priority leads each row, as a figure; a stopped work order is red across */
  .sched td:first-child { width: 88px; }
  .sched td:first-child .field { width: 64px; font-size: 20px; font-weight: 600; font-stretch: 75%; text-align: center; padding: 2px 4px; }
  .sched td:first-child b { font-size: 20px; font-weight: 600; font-stretch: 75%; }
  .sched tbody tr { will-change: transform; }
  .sched tr.stopped > td { background: #f7e3e6; }
  .sched tr.current td:first-child { color: var(--mag); } /* the row in hand: its priority; the W/O stays a blue reference like everywhere */
  .sched-why { font-weight: 500; color: var(--red); }

  /* the issue-material split and the requisition rows */
  .sr-layout tr.link.on > td { background: var(--rail); }
  .sr-items td.store { background: repeating-linear-gradient(135deg, transparent 0 7px, #e0e0e0 7px 8px); }
  .sr-sign { border-color: var(--ink); }
  .g-items, .sr-items { border-color: var(--ink); }
  .g-items tbody.is-held td:nth-child(9) .field { border-color: var(--amber); }

  /* edits waiting for a second signature, and hard stops */
  .banner.edit-wait { border: 1px solid var(--amber); }
  .banner.stop { border: 2px solid var(--red); background: var(--paper); }
  .lock-hold .wo-lock, .wo-lock.failed { color: var(--red); border-color: var(--red); background: var(--paper); }
  .wo-step.is-failed > td { background: #f7e3e6; }
  .wo-step.is-signed > td { background: #f1f7f3; }
  .wo-step.is-na > td { background: var(--rail); }
  .wo-sub tr.oot > td { background: #f7e3e6; }

  /* labels and tags previewed on screen sit on the chart's margin */
  .label-preview { background: var(--rail); padding: 12px; }
  .sticker, .tagcard { border-color: #9a9a9a; }
  .tag-sheet { padding: 12px; background: var(--rail); }

  /* traveler and purchase order on screen */
  .trv-table th, .trv-facts dt { text-transform: none; letter-spacing: 0; }
  .po-lines tfoot td { border-top: 1px solid var(--ink); }


  /* people & rights, and the language switch, in the plate's vocabulary */
  .rights .right { border-radius: 0; }
  .rights .right:hover { background: var(--rail); }
  .rights .right input { accent-color: var(--mag); }
  .rights .right em { color: var(--blue); }
  .login-lang { color: var(--blue); text-underline-offset: .15em; }
  .tr-row { border-bottom-color: var(--rule-2); }
  @media (max-width: 760px) {
    .wo-clock #woTimer { font-size: 22px; }
  }
}

/* People: positions as tick boxes grouped as the RSQCM groups them; the person page's main column */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.pos-group h4 { margin: 8px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pos-group:first-child h4 { margin-top: 0; }
.pos { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; }
.pos:hover { background: var(--panel-2); }
.pos.on { font-weight: 600; }
.pos input { margin: 2px 0 0; accent-color: var(--brand); }
.pos small { font-weight: 400; }
.modal-box .pos-grid { margin: 4px 0 8px; }
.person-main { display: grid; gap: 16px; align-content: start; min-width: 0; }
.person-head .pill { margin-right: 2px; }
.pos-col { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; white-space: nowrap; max-height: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.file-btn { cursor: pointer; display: inline-block; margin-top: 4px; }

/* Training matrix: people × courses; the first column stays while the courses scroll; printed in landscape */
.legend-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legend { font-size: 11.5px; padding: 1px 8px; border: 1px solid var(--rule); }
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.matrix th, .matrix td { border-bottom: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2); padding: 5px 6px; vertical-align: top; }
.matrix th { background: var(--panel); text-align: left; font-weight: 600; }
.matrix th.course { text-align: center; min-width: 76px; }
.matrix th.course small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; line-height: 1.2; max-width: 110px; white-space: normal; }
.matrix .sticky { position: sticky; left: 0; background: var(--paper); z-index: 1; min-width: 150px; }
.matrix th.sticky { z-index: 2; background: var(--panel); }
.matrix .pos-cell { max-width: 190px; color: var(--muted); font-size: 11.5px; }
.matrix td[data-emp] { text-align: center; cursor: pointer; white-space: nowrap; }
.matrix td[data-emp] small { display: block; font-size: 10.5px; color: inherit; opacity: .8; }
.matrix td b { font-weight: 600; }
.cell-current, .legend.cell-current { background: #e3f3e8; color: #15532b; }
.cell-due, .legend.cell-due { background: #fff1d6; color: #7a4b00; }
.cell-overdue, .legend.cell-overdue { background: #fbdcdc; color: #8a1c1c; }
.cell-missing, .legend.cell-missing { background: #fbdcdc; color: #8a1c1c; }
.cell-new, .legend.cell-new { background: #e4ecfb; color: #1d3f7a; }
.cell-waived, .cell-na { color: var(--muted); }
.cell-applicable, .legend.cell-applicable { color: var(--muted); outline: 1px dashed var(--rule-3); outline-offset: -3px; }
.cell-none, .legend.cell-none { background: var(--panel); color: var(--muted); text-align: center; }
.matrix-doc .doc-title, .training-record .doc-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.matrix-doc .doc-title b, .training-record .doc-title b { font-size: 16px; letter-spacing: .12em; }
.matrix-doc .doc-title span, .training-record .doc-title span { font-size: 12px; color: var(--muted); }
.print-only { display: none; }
/* requirements grid */
.req-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.req-grid th, .req-grid td { border-bottom: 1px solid var(--rule-2); padding: 5px 6px; vertical-align: top; }
.req-grid th { background: var(--panel); text-align: left; font-weight: 600; vertical-align: bottom; }
.req-grid th.course { text-align: center; }
.req-grid td.tick { text-align: center; }
.req-grid .lvl { width: 24px; height: 24px; padding: 0; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--paper); font-weight: 700; font-size: 12px; cursor: pointer; color: var(--muted); }
.req-grid .lvl[data-level="required"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.req-grid .lvl[data-level="applicable"] { border-color: var(--brand); color: var(--brand); border-style: dashed; }
.req-grid .lvl:disabled { opacity: .5; cursor: default; }
/* Table 3 of the RSTP: positions x courses */
.table3 { border-collapse: collapse; width: 100%; font-size: 11.5px; table-layout: auto; }
.table3 th, .table3 td { border: 1px solid var(--rule-2); padding: 3px 5px; text-align: center; vertical-align: middle; }
.table3 th.course span { display: block; font-weight: 700; }
.table3 th.course small { display: block; font-weight: 400; color: var(--muted); font-size: 9.5px; max-width: 90px; white-space: normal; }
.table3 td.pos { text-align: left; white-space: nowrap; }
.table3 th.pos { width: 210px; min-width: 210px; }
.table3 td.grp { text-align: left; font-weight: 600; color: var(--muted); font-size: 10.5px; }
.table3 td i { font-style: normal; color: var(--muted); font-size: 10px; }
.table3-doc .doc-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.table3-doc .doc-title b { font-size: 16px; letter-spacing: .12em; }
.table3-doc .doc-title span { font-size: 12px; color: var(--muted); }
.t3-legend { font-size: 10.5px; color: var(--muted); margin: 8px 0 0; }
.req-grid tr.off td { color: var(--muted); }
/* a person's Training Record, laid out like TDM-F504 */
.training-record { color: #000; font-size: 12px; }
.tr-fields { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px 14px; margin: 8px 0 10px; }
.tr-field span { display: block; font-size: 10px; color: #444; letter-spacing: .04em; text-transform: uppercase; }
.tr-field b { display: block; border-bottom: 1px solid #000; min-height: 17px; padding: 1px 0; font-weight: 600; }
.tr-note { font-size: 11px; margin: 0 0 6px; color: #333; }
.tr-table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.tr-table th, .tr-table td { border: 1px solid #000; padding: 4px 5px; text-align: left; vertical-align: top; }
.tr-table th { background: #eee; font-weight: 600; }
.tr-table tr.blank td { height: 20px; }
.tr-h { font-size: 12.5px; margin: 14px 0 6px; letter-spacing: .08em; text-transform: uppercase; }
.tr-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.tr-sign div { border-top: 1px solid #000; padding-top: 4px; font-size: 11px; color: #333; }
@media print {
  .print-only { display: block; }
  .matrix .sticky { position: static; }
  .matrix, .matrix th, .matrix td { font-size: 9.5px; }
  .matrix th, .matrix td { padding: 2px 3px; border-color: #999; }
  .matrix td[data-emp] small { font-size: 8.5px; }
  .cell-current, .cell-due, .cell-overdue, .cell-missing, .cell-new, .cell-none, .matrix th, .table3 th, .table3 td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .matrix-doc .legend-row { margin-top: 8px; }
}
.panel > h2 .mono { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---------------------------------------------------------------- workflow roles, issue tickets, the bell */
/* who signs a step is said in words; the role is not a colour (colour is kept for status) */
.r-tech, .r-inspector, .r-engineering, .r-quality { --c: var(--ink); }
.r-tech { --c: var(--muted); }
.role-chip { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; padding: 0 6px; line-height: 1.6; border: 1px solid var(--c, var(--muted)); color: var(--c, var(--muted)); background: var(--paper); white-space: nowrap; }
.role-chip i { font-style: normal; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.wo-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.wo-flow .wo-raise { opacity: 0; }
.wo-step:hover .wo-flow .wo-raise, .wo-flow .wo-raise:focus-visible { opacity: 1; }
@media (hover: none) { .wo-flow .wo-raise { opacity: 1; } } /* touch screens have no hover: the step's own actions always show */
.sig-wait { font-size: 11.5px; color: var(--amber); font-weight: 600; margin: 4px 0 2px; }
.sig.verify { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--rule-2); }
.sig .sig-role { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media print { .sig-wait { color: #000; font-size: 9px; font-weight: 600; } .sig .sig-role { font-size: 8px; } }

.bell { position: relative; }
.bell + .user-menu { margin-left: 0; }
.bell-btn { position: relative; background: none; border: 0; cursor: pointer; padding: 6px 8px; display: grid; place-items: center; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { background: var(--rail); }
.bell-btn b { position: absolute; top: 0; right: 0; min-width: 16px; padding: 0 4px; font: 600 10.5px/16px var(--sans); text-align: center; background: var(--red); color: #fff; }
.bell-btn b[hidden], .bell-drop[hidden] { display: none; }
.bell-drop { position: absolute; right: 0; top: calc(100% + 4px); width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; background: var(--paper); border: 1px solid var(--ink); z-index: 12; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule-2); position: sticky; top: 0; background: var(--paper); }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-list li + li { border-top: 1px solid var(--rule-3); }
.bell-list button { display: grid; gap: 2px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px 9px 16px; cursor: pointer; position: relative; }
.bell-list button:hover { background: var(--rail); }
.bell-list .unread button::before { content: ''; position: absolute; left: 6px; top: 14px; width: 5px; height: 5px; background: var(--mag); }
.bell-list .unread .t { font-weight: 600; }
.bell-list .meta { font-size: 11.5px; color: var(--muted); }

.iss-facts { margin: 8px 0; padding: 10px 12px; background: var(--rail); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; }
.iss-pulled { display: block; color: var(--muted); }
.iss-rule { display: block; padding: 6px 10px; border: 1px solid var(--rule-2); background: var(--rail); }
.iss-is { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 340px; }
.iss-act { margin-bottom: 16px; border-top: 2px solid var(--mag); }
.iss-act textarea { width: 100%; }
.iss-act .body { display: grid; gap: 10px; padding: 14px 16px; }
.iss-act .body > button, .row-actions { justify-self: start; display: flex; gap: 8px; flex-wrap: wrap; }
.iss-doc { border: 1px solid var(--ink); background: var(--paper); }
.iss-head { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--ink); }
.iss-head .wo-formtitle { justify-items: start; }
.iss-no { padding: 12px 16px; align-self: center; }
.iss-no b { font-size: 16px; }
.iss-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ink); }
.iss-cell { padding: 7px 10px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); display: grid; gap: 2px; }
.iss-cell b { font-weight: 500; }
.iss-block { padding: 10px 14px; border-bottom: 1px solid var(--rule-2); }
.iss-block h3 { margin: 0 0 4px; font-size: 12px; letter-spacing: .06em; }
.iss-block p { margin: 0; white-space: normal; }
.iss-block.is-na { color: var(--muted); }
.iss-blank { min-height: 40px; }
.iss-sign { margin-top: 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.iss-date { font-size: 12px; color: var(--muted); }
.iss-status { padding: 8px 14px; font-size: 12px; }
@media (max-width: 760px) { .iss-grid { grid-template-columns: 1fr 1fr; } .iss-head { grid-template-columns: 1fr; } }
@media print {
  .iss-doc { border-color: #000; }
  .iss-grid { grid-template-columns: repeat(4, 1fr); }
  .iss-cell, .iss-block { border-color: #000; }
  .iss-block p { font-size: 11pt; }
  .iss-sign .e-sig { color: #000; }
}

.wf-defaults { margin-bottom: 16px; }
.wf-defaults .form-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wf-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; }
.wf-bulk { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.view a.pill:not(.btn):not(.kpi) { color: var(--c, var(--muted)); }
.view a.pill.s-hold:not(.btn):not(.kpi), .view a.pill.s-rejected:not(.btn):not(.kpi), .view a.pill.s-blocked:not(.btn):not(.kpi) { color: #fff; }
.lock-issue .wo-lock { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 9%, transparent); }
.view .lock-issue .wo-lock a:not(.btn):not(.kpi) { color: var(--red); text-decoration: underline; }

/* ---------------------------------------------------------------- browser-style tabs inside a page (Forms) */
.btabs { display: flex; gap: 2px; align-items: flex-end; border-bottom: 1px solid var(--rule); margin: -4px 0 0; overflow-x: auto; scrollbar-width: none; }
.btabs button { height: 36px; padding: 0 18px; background: none; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: var(--muted); }
.btabs button:hover { color: var(--ink); background: var(--rail); }
.btabs button.on { color: var(--ink); font-weight: 600; background: var(--paper); border-color: var(--rule); box-shadow: inset 0 2px 0 var(--ink); }
.lib-bar { gap: 12px; }
.lib-pick { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lib-pick select { min-width: 280px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }
@media (max-width: 760px) { .lib-pick, .lib-pick select { width: 100%; min-width: 0; } }
.toolbar input.field#libQ { max-width: 460px; flex: 1; }
@media screen and (max-width: 760px) { .topbar > .search-trigger { flex: 0 0 auto; min-width: 0; padding: 5px 9px; } .topbar { gap: 4px; } }

/* ---------------------------------------------------------------- bypassed steps (set on the form's workflow) */
.wo-lock.bypass { color: var(--ink); background: var(--rail); border-color: var(--rule-2); font-weight: 500; }
.wo-step.is-bypassed .wo-title, .wo-step.is-bypassed .wo-ref, .wo-step.is-bypassed .wo-line,
.wo-step.is-bypassed .wo-instr, .wo-step.is-bypassed .wo-tools { color: var(--muted); }
.wo-step.is-bypassed .table-wrap { opacity: .7; }
.sig.bypass b { color: var(--ink); letter-spacing: .05em; }
@media print { .wo-lock.bypass { display: block !important; border: 0; background: none; padding: 0 0 4px; font-size: 9px; } }

/* ---------------------------------------------------------------- dashboard: stopped row + one waiting list */
.kpis.attention.stopped { margin-bottom: 18px; }
.dash-low { align-items: start; }
.wait-group + .wait-group { border-top: 1px solid var(--rule); }
.wait-group h3 { margin: 0; padding: 10px 12px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.wait-group h3 .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.view a.wait-row:not(.btn):not(.kpi) { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 7px 12px; color: var(--ink); border-top: 1px solid var(--rule-2); }
.view a.wait-row:hover { background: var(--rail); text-decoration: none; }
.wait-what { display: grid; gap: 1px; min-width: 0; flex: 1; }
.wait-what b { font-weight: 600; }
.wait-what .muted { font-size: 12px; }
.wait-n { font: 600 20px/1 var(--sans); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.wait-row.warn .wait-n { color: var(--amber); }
.wait-row.new::after { content: ''; position: absolute; top: 0; right: 0; border: 6px solid var(--mag); border-left-color: transparent; border-bottom-color: transparent; }

/* ---------------------------------------------------------------- work order on screen: folding sections and the index */
@media screen {
  .wo-step.folded { display: none; }
}
.sec-sum { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--muted); font-stretch: 75%; }
.sec-toggle { margin-left: 8px; font-size: 12px; }
.wo-step.is-group.is-folded > td { border-bottom-color: var(--rule-2); }
.wo-index { position: sticky; top: 0; z-index: 6; display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; margin: 0 0 14px; background: var(--paper);
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.wo-index button { display: flex; align-items: baseline; gap: 5px; padding: 7px 10px; background: none; border: 0; border-right: 1px solid var(--rule-2); cursor: pointer; white-space: nowrap; font-size: 12.5px; color: var(--ink); }
.wo-index button:hover { background: var(--rail); }
.wo-index button b { font-weight: 600; font-stretch: 75%; }
.wo-index button span { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.wo-index button i { font-style: normal; font-weight: 600; font-stretch: 75%; color: var(--muted); }
.wo-index button.is-done { color: var(--muted); }
.wo-index button.is-done i { color: var(--green); }
.wo-index button.is-current { box-shadow: inset 0 -2px 0 var(--ink); font-weight: 600; }
.wo-step.is-next > td { box-shadow: inset 0 2px 0 var(--mag), inset 0 -2px 0 var(--mag); }
.wo-step.is-next > td:first-child { box-shadow: inset 0 2px 0 var(--mag), inset 0 -2px 0 var(--mag), inset 2px 0 0 var(--mag); }
.wo-step.is-next > td:last-child { box-shadow: inset 0 2px 0 var(--mag), inset 0 -2px 0 var(--mag), inset -2px 0 0 var(--mag); }
@media print { .wo-step.is-next > td { box-shadow: none !important; } }

/* ---------------------------------------------------------------- workflow: one ruled table per section */
.wf-chart { display: grid; gap: 18px; }
.wf-lane > h2 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.wf-lane > h2 .mono { font-size: 12px; }
.wf-table { width: 100%; }
.wf-table th { white-space: nowrap; }
.wf-table td { vertical-align: top; }
.wf-table .wf-c { width: 28px; padding-right: 0; }
.wf-table .wf-no { width: 64px; white-space: nowrap; }
.wf-table .wf-title { min-width: 220px; }
.wf-open { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.wf-open:hover { text-decoration: underline; text-underline-offset: .15em; }
.wf-table b { font-weight: 600; }
.wf-table .wf-stops b { font-weight: 600; }
.wf-row.sel > td { background: var(--mag-tint); }
.wf-row.edited > td:first-child { box-shadow: inset 2px 0 0 var(--mag); }
.wf-row.bypassed > td { background: var(--rail); }
.wf-row.bypassed .wf-open, .wf-row.bypassed td { color: var(--muted); }
.wf-bypass { margin-top: 3px; font-size: 12.5px; color: var(--ink); }
.wf-bypass b { font-weight: 600; }
.view a.wait-row:not(.btn):not(.kpi):not(.pill):not(.map-pin):hover { text-decoration: none; }

/* ================================================================ the strip board (screen only; print keeps the chart's tokens above)
   A flight-progress board in TDM's colours: a deep teal shell, a cool grey board, white panels, and the work itself as
   buff strips racked in holders whose edge carries the state (teal in hand, grey open, amber held, red stopped, green done).
   Teal marks the primary action, the current item, focus, selection and progress. Everything else is ink and slate. */
@media screen {
  :root {
    --shell: #0E4A5E; --shell-2: #0B3C4D; --shell-ink: #FFFFFF; --shell-muted: #C9DEE3; --shell-edge: rgba(255, 255, 255, .22);
    --board: #E6EAEA;
    --paper: #FFFFFF;
    --strip: #F6F0DF; --strip-hi: #EFE6CC; --strip-edge: #DCD2B4;
    --ink: #15242B; --muted: #4E5D63;
    --rail: #EEF2F2; --rule: #B9C3C6; --rule-2: #D5DCDE; --rule-3: #E6EBEC; --ctl: #7A878C; --field: #FFFFFF;
    --accent: #15738A; --accent-2: #0F5B6E; --accent-tint: #DCEEF1; --on-accent: #FFFFFF;
    --mag: var(--accent); --mag-2: var(--accent-2); --mag-tint: var(--accent-tint);
    --blue: var(--ink); --violet: var(--ink); --link: var(--ink);
    --green: #1F7A3E; --amber: #8A5A00; --red: #B8142E; --on-state: #FFFFFF;
    --green-tint: #E3F0E7; --amber-tint: #F5ECD8; --red-tint: #F6E1E4;
    --holder-idle: #77858A;
    --lift: 0 10px 28px rgba(14, 40, 50, .18), 0 2px 6px rgba(14, 40, 50, .10);
    --radius: 4px;
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    --shell: #103A49; --shell-2: #0C2F3B; --shell-ink: #E2E9EB; --shell-muted: #A9C3CA; --shell-edge: rgba(255, 255, 255, .14);
    --board: #11191C;
    --paper: #18232A;
    --strip: #202D33; --strip-hi: #26363D; --strip-edge: #2F4047;
    --ink: #E2E9EB; --muted: #9AABB1;
    --rail: #1E2B31; --rule: #34464D; --rule-2: #2A3A41; --rule-3: #223238; --ctl: #6D8087; --field: #131D22;
    --accent: #3EC1CF; --accent-2: #6CD3DD; --accent-tint: #173A42; --on-accent: #062A31;
    --green: #5BC98A; --amber: #E5AE4A; --red: #FF7A7A; --on-state: #0E1619;
    --green-tint: #183427; --amber-tint: #382C15; --red-tint: #3D1E22;
    --holder-idle: #7A8E95;
    --brand: #3EC1CF;
    --lift: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }

  body { background: var(--board); color: var(--ink); caret-color: var(--accent); }
  ::selection { background: var(--accent); color: var(--on-accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  * { scrollbar-color: var(--ctl) transparent; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--ctl); border: 2px solid var(--board); border-radius: var(--r-lg); }
  input.field::placeholder, textarea.field::placeholder { color: var(--muted); }

  /* ---------------- the shell: teal, the mark on its own paper tile, the open tab joining the page strip below */
  .appbar { background: var(--shell); }
  .topbar { background: var(--shell); color: var(--shell-ink); }
  .topbar .logo { gap: 10px; }
  .topbar .logo .mark { box-sizing: content-box; width: 24px; height: 19px; padding: 4px 5px; background: #FFFFFF; border-radius: var(--r-sm); }
  .topbar .logo .wordmark { color: var(--shell-ink); }
  .topbar .logo .product { color: var(--shell-muted); border-left-color: var(--shell-edge); }
  .cats { gap: 3px; }
  .cats a { color: var(--shell-muted); border-radius: var(--r-sm) var(--r-sm) 0 0; height: 36px; }
  .cats a:hover { color: var(--shell-ink); background: rgba(255, 255, 255, .08); }
  .cats a.active { color: var(--ink); background: var(--paper); border-color: transparent; box-shadow: inset 0 2px 0 var(--accent); }
  .cats a b, #nav a b, .bell-btn b { background: var(--red); color: var(--on-state); border-radius: var(--r-sm); }
  .search-trigger { background: rgba(255, 255, 255, .07); border: 1px solid var(--shell-edge); color: var(--shell-muted); border-radius: var(--r-sm); }
  .search-trigger:hover { background: rgba(255, 255, 255, .13); }
  .topbar kbd { border-color: var(--shell-edge); color: var(--shell-muted); border-radius: var(--r-sm); }
  .bell-btn { color: var(--shell-ink); border-radius: var(--r-sm); }
  .bell-btn:hover, .bell-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
  .user-btn { border-radius: var(--r-sm); }
  .user-btn:hover { background: rgba(255, 255, 255, .1); }
  .user-meta b { color: var(--shell-ink); }
  .user-meta small { color: var(--shell-muted); }
  .avatar { background: var(--accent); color: var(--on-accent); border-radius: var(--r-sm); }
  .topbar .avatar { background: #FFFFFF; color: var(--shell); }
  .search-trigger { justify-content: flex-start; }
  .search-trigger kbd { margin-left: auto; }
  .ico { width: 16px; height: 16px; flex: none; }
  .btn .ico { width: 1em; height: 1em; margin-right: 8px; vertical-align: -.14em; }
  @media (max-width: 760px) { .search-trigger::before { content: none; } .search-trigger .ico { width: 18px; height: 18px; color: var(--shell-ink); } }

  #nav.subnav { background: var(--paper); border-top: 0; border-bottom: 1px solid var(--rule); }
  #nav a { color: var(--muted); border-bottom-width: 2px; }
  #nav a:hover { background: var(--rail); color: var(--ink); }
  #nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
  #nav a b.info { background: none; color: var(--muted); }
  /* a section with one page has no page strip: the open tab then sits straight on the board */
  .appbar:has(#nav.single) .cats a.active { background: var(--board); }

  .user-drop, .bell-drop { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); box-shadow: var(--lift); color: var(--ink); }
  .user-drop button, .bell-list button { border-radius: var(--r-sm); }
  .bell-head { background: var(--paper); }
  .user-drop hr, .drop-foot { border-color: var(--rule-2); }

  /* ---------------- the page: the board, the briefing strip as a panel, panels with a slate edge */
  .view { background: var(--board); }
  .page-head { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); }
  .page-head .cells .cell, .page-head .actions { border-left-color: var(--rule-2); }
  .page-head .crumb a { color: var(--muted); }
  @media (max-width: 1200px) { .page-head .actions { border-top-color: var(--rule-2); } }
  @media (max-width: 760px) { .page-head .cells, .page-head .actions { border-top-color: var(--rule-2); } }
  .panel, .fold, .wo-clock, .all-clear, .iss-act { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); }
  .panel { overflow: clip; }
  .panel > h2 { border-bottom-color: var(--rule-2); }
  .panel > h2 a { color: var(--muted); }
  .fold > .panel { border: 0; border-top: 1px solid var(--rule-2); border-radius: 0; }
  .wo-clock.on { border-color: var(--green); }
  .iss-act { border-color: var(--accent); }
  .wo-doc, .ef-doc, .iss-doc { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); }
  .iss-head, .iss-grid { border-color: var(--rule); }
  .ef-h, .ef-dept { border-bottom-color: var(--rule); }

  .kpis { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
  .kpi { background: var(--paper); border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); margin: 0 -1px -1px 0; }
  .kpi:hover { background: var(--rail); }
  .kpi.new::after, .wait-row.new::after { border-top-color: var(--accent); border-right-color: var(--accent); }

  /* ---------------- controls */
  .btn { background: var(--paper); border-color: var(--ctl); color: var(--ink); border-radius: var(--r-sm); }
  .btn:hover:not(:disabled), .view a.btn:hover { background: var(--rail); color: var(--ink); border-color: var(--ink); }
  .btn.primary, .view a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .btn.primary:hover:not(:disabled), .view a.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
  .btn.danger { color: var(--red); border-color: var(--red); background: var(--paper); }
  .btn.danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--on-state); }
  input.field, select.field, textarea.field { background: var(--field); border-color: var(--ctl); border-radius: var(--r-sm); }
  input.field:hover, select.field:hover, textarea.field:hover { border-color: var(--ink); }
  input.field:focus, select.field:focus, textarea.field:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  input.field:disabled, select.field:disabled, textarea.field:disabled { background: var(--rail); }
  input[type=checkbox], input[type=radio], .rights .right input { accent-color: var(--accent); }
  .tabs { border-bottom-color: var(--rule); }
  .tabs button.on { border-bottom-color: var(--accent); }
  .btabs { border-bottom-color: var(--rule); }
  .btabs button { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .btabs button.on { background: var(--paper); border-color: var(--rule); box-shadow: inset 0 2px 0 var(--accent); }
  .wo-index { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); }
  .wo-index button { border-right-color: var(--rule-2); }
  .wo-index button.is-current { box-shadow: inset 0 -2px 0 var(--accent); }
  kbd { border-radius: var(--r-sm); }

  /* ---------------- tables and references: references are ink, underlined in teal */
  th { color: var(--muted); border-bottom-color: var(--rule); }
  td { border-bottom-color: var(--rule-3); }
  .view a:not(.btn):not(.kpi):not(.pill):not(.map-pin):not(.wait-row):not(.stop-row) { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 65%, transparent);
    text-decoration-thickness: 1px; text-underline-offset: .22em; }
  .view a:not(.btn):not(.kpi):not(.pill):not(.map-pin):not(.wait-row):not(.stop-row):hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
  .view .panel > h2 a:not(.btn) { color: var(--muted); }
  .chips .code-link { border-color: var(--rule-2); background: var(--paper); border-radius: var(--r-sm); }
  .view a.map-pin { color: var(--ink); border-radius: var(--r-sm); }

  /* ---------------- states: three colours and ink; holds and problems solid */
  .pill { background: transparent; border-radius: var(--r-sm); }
  .s-in_progress { --c: var(--accent); }
  .s-open, .s-normal, .s-carry { --c: var(--ink); }
  .pill.s-quarantine, .pill.s-rejected, .pill.s-blocked, .pill.s-critical, .pill.s-late, .pill.s-hold, .pill.s-scrapped,
  .view a.pill.s-hold:not(.btn):not(.kpi), .view a.pill.s-rejected:not(.btn):not(.kpi), .view a.pill.s-blocked:not(.btn):not(.kpi) { background: var(--c); color: var(--on-state); }
  .progress .bar { background: var(--rule-2); border-radius: var(--r-sm); }
  .progress .bar i { background: var(--accent); }
  .steps li.done .seq, .checklist li.done .num { color: var(--on-state); }
  .modal-box form legend .n { color: var(--paper); border-radius: var(--r-sm); }
  .feed .avatar { background: var(--paper); color: var(--ink); border-color: var(--rule); }
  .banner { background: var(--paper); border-radius: var(--r-sm); }

  /* ---------------- the rack: work as buff strips in holders; the holder edge is the state */
  .table-wrap:has(> table.rack) { padding: 0 8px 8px; }
  table.rack { border-collapse: separate; border-spacing: 0 5px; }
  table.rack th { border-bottom: 0; padding-bottom: 0; }
  table.rack td { background: var(--strip); border-top: 1px solid var(--strip-edge); border-bottom: 1px solid var(--strip-edge); transition: background .15s var(--ease); }
  table.rack tr:last-child td { border-bottom: 1px solid var(--strip-edge); }
  table.rack td:first-child { border-left: 1px solid var(--strip-edge); border-radius: var(--r-sm) 0 0 var(--r-sm); padding-left: 20px; box-shadow: inset 7px 0 0 var(--holder, var(--holder-idle)); }
  table.rack td:last-child { border-right: 1px solid var(--strip-edge); border-radius: 0 3px 3px 0; }
  table.rack tr.link:hover td { background: var(--strip-hi); }
  table.rack .mono, table.rack .code-link, table.rack .pill { white-space: nowrap; }
  .s-you { --c: var(--accent); }
  .h-run { --holder: var(--accent); }
  .h-open { --holder: var(--holder-idle); }
  .h-hold { --holder: var(--amber); }
  .h-stop { --holder: var(--red); }
  .h-done { --holder: var(--green); }
  .h-void { --holder: var(--rule); }
  table.rack tr.h-void td { background: var(--paper); color: var(--muted); }
  .sched tr.stopped > td { background: var(--strip); }
  .sched tr.current td:first-child { color: inherit; }
  .sched td:first-child .field { background: var(--paper); }

  /* the stopped row: red-holder strips across the page; the waiting list: strips, amber where something is held */
  .stopped-rack { display: grid; gap: 5px; margin-bottom: 18px; }
  .view a.stop-row:not(.btn):not(.kpi) { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 9px 14px 9px 22px; color: var(--ink); text-decoration: none;
    background: var(--strip); border: 1px solid var(--strip-edge); border-radius: var(--r-sm); box-shadow: inset 7px 0 0 var(--red); }
  .view a.stop-row:hover, .view a.stop-row:not(.btn):not(.kpi):not(.pill):not(.map-pin):hover { background: var(--strip-hi); text-decoration: none; }
  .stop-row .wait-n { color: var(--red); min-width: 2ch; }
  .stop-row b { font-weight: 600; }
  .stop-row.new::after { content: ''; position: absolute; top: 0; right: 0; border: 6px solid var(--accent); border-left-color: transparent; border-bottom-color: transparent; }
  @media (max-width: 760px) { .view a.stop-row:not(.btn):not(.kpi) { flex-wrap: wrap; gap: 2px 12px; } .stop-row .muted { flex-basis: 100%; padding-left: calc(2ch + 12px); } }
  .wait-group + .wait-group { border-top-color: var(--rule-2); }
  .wait-group { padding: 0 8px 6px; }
  .wait-group h3 { padding: 10px 4px 6px; }
  .view a.wait-row:not(.btn):not(.kpi) { margin-top: 5px; padding: 7px 12px 7px 20px; background: var(--strip); border: 1px solid var(--strip-edge); border-radius: var(--r-sm); box-shadow: inset 7px 0 0 var(--holder-idle); }
  .view a.wait-row.warn:not(.btn):not(.kpi) { box-shadow: inset 7px 0 0 var(--amber); }
  .view a.wait-row:hover { background: var(--strip-hi); }

  /* ---------------- tints that were fixed light colours */
  .wo-step.is-failed > td, .wo-sub tr.oot > td { background: var(--red-tint); }
  .wo-step.is-signed > td { background: var(--green-tint); }
  .seg .ok input:checked + span, .result-box, .yn button.on[data-val="Y"], .yn button.on[data-val="YES"] { background: var(--green-tint); }
  .seg .hold input:checked + span { background: var(--amber-tint); }
  .seg .bad input:checked + span, .yn button.on[data-val="N"], .yn button.on[data-val="NO"] { background: var(--red-tint); }
  .cell-current, .legend.cell-current { background: var(--green-tint); color: var(--ink); }
  .cell-due, .legend.cell-due { background: var(--amber-tint); color: var(--ink); }
  .cell-overdue, .legend.cell-overdue, .cell-missing, .legend.cell-missing { background: var(--red-tint); color: var(--ink); }
  .cell-new, .legend.cell-new { background: var(--panel-2); color: var(--ink); }
  .shopmap-svg .room:hover > rect, .shopmap-svg .room:hover > polygon, .shopmap-svg .room:focus-visible > rect { fill: var(--rule-3); }
  .shopmap-svg .count text { fill: var(--paper); }
  .shopmap-svg .pin circle { stroke: var(--paper); }
  .sr-items td.store { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--rule-2) 7px 8px); }
  .lock-hold .wo-lock, .wo-lock.failed, .banner.stop { background: var(--paper); }
  .dropzone, .tool-chip, .yn button, .seg span, .wo-lock, .fe-block, .scan-said, .pos, .rights .right { border-radius: var(--r-lg); }

  /* ---------------- dialogs, the palette, toasts: paper lifted off the board */
  .modal, .palette { background: rgba(6, 26, 33, .55); }
  .modal-box, .palette-box { border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--lift); }
  .modal-box h3, .palette-box input { border-bottom-color: var(--rule-2); }
  .palette-box li { border-radius: var(--r-sm); }
  .palette-box li.sel { background: var(--accent-tint); box-shadow: none; }
  .toast { border: 1px solid var(--rule); border-radius: var(--r-sm); box-shadow: var(--lift); }

  /* ---------------- sign-in: the shell's teal, one paper panel */
  .login { background: var(--shell); }
  .login-box { border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--lift); }
  .login-box .logo { border-bottom-color: var(--rule-2); }
  .login-lang { color: var(--ink); text-decoration-color: var(--accent); }

  /* ---------------- paper documents keep paper in the dark: black on white, as printed */
  :root[data-theme="dark"] .training-record { background: #FFFFFF; padding: 16px; border-radius: var(--r-sm); }
}

/* ---------------------------------------------------------------- work order comments and photos (screen only) */
.notes { list-style: none; margin: 0; padding: 4px 12px; }
.notes .note { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--rule-3); }
.notes .note:last-child { border-bottom: 0; }
.note-meta { font-size: 12px; color: var(--muted); }
.note-meta b { color: var(--ink); font-weight: 600; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-photo { grid-template-columns: 112px 1fr; gap: 12px !important; align-items: start; }
.note-thumb { display: block; width: 112px; height: 84px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); overflow: hidden; background: var(--rail); }
.note-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-add { display: grid; gap: 8px; padding: 10px 12px 14px; border-top: 1px solid var(--rule-2); }
.note-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.note-bar select { flex: 1 1 260px; width: auto; min-width: 0; }
.step-notes { margin: 8px 0 0; padding: 4px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--paper); }
.step-notes .note-photo { grid-template-columns: 84px 1fr; }
.step-notes .note-thumb { width: 84px; height: 63px; }
.photo-box { max-width: 480px; }
.photo-box.two { max-width: 820px; }
.photo-ways { display: grid; gap: 16px; }
.photo-box.two .photo-ways { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .photo-box.two .photo-ways { grid-template-columns: 1fr; } }
.photo-way { display: grid; gap: 10px; align-content: start; padding: 12px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); }
.photo-way h4 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.photo-way label.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.photo-picked { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.photo-picked:empty { display: none; }
.photo-picked li { aspect-ratio: 4 / 3; border: 1px solid var(--rule-2); border-radius: var(--r-sm); overflow: hidden; }
.photo-picked img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-picked li { position: relative; }
.photo-x { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .62); color: #fff; cursor: pointer; }
.photo-x svg { width: 14px; height: 14px; }
.photo-x:hover, .photo-x:focus-visible { background: rgb(0 0 0 / .85); }
.iss-photos { display: grid; gap: 8px; justify-items: start; }
.iss-photos label.btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.iss-photos .photo-picked { width: 100%; }
.qr-box { display: grid; justify-items: center; gap: 6px; }
.qr-box .qr { width: 200px; height: 200px; border-radius: var(--r-sm); }
.qr-link { font-size: 11.5px; color: var(--muted) !important; word-break: break-all; text-align: center; }
.phone-got { margin: 0; font-weight: 600; color: var(--green); }
.phone-got:empty { display: none; }
@media print { .notes, .note-add { display: none !important; } }

/* ---------------------------------------------------------------- calmer headings and phone dashboard (v0.37)
   Capitals with wide spacing are kept for table column headers, menu group labels and status tags only. Section titles,
   folds and the small labels above figures read as ordinary words, so the table headers and the states stand out. */
@media screen {
  .panel > h2, .fold > summary, .wo-clock .detail h2.sub-h, .pos-group h4, .photo-way h4, .lib-pick {
    text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
  .wait-group h3 { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
  .kpi .label, .facts dt, .where dt, .page-head .cells .cell > span {
    text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }
  .fold > summary .muted { font-weight: 400; }

  /* the count of a waiting row sits beside its label, as on the stopped rows above it */
  .wait-row .wait-n { min-width: 2ch; text-align: right; }

  /* a work order's part on its own line under its number, so neither breaks mid-word */
  .page-head h1 .page-sub { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--muted); }
  .nowrap { white-space: nowrap; }
}
@media screen and (max-width: 760px) {
  /* the dashboard on a phone: two columns of totals, the least used ones left out (Scan is in the top bar) */
  .page-head .cells { display: grid; grid-template-columns: 1fr 1fr; }
  .page-head .cells .cell.opt, .page-head .actions .btn.opt { display: none; }
  .page-head .cells .cell { border-left: 0; border-top: 1px solid var(--rule-2); }
  .page-head .cells .cell:nth-child(even) { border-left: 1px solid var(--rule-2); }
  .page-head .cells .cell:nth-child(-n+2) { border-top: 0; }
  .page-head .actions:not(:has(> :not(.opt):not(.save-state))) { display: none; }

  /* the factory scheduler on a phone: one strip per work order, not a squeezed table */
  .sched thead { display: none; }
  .sched table.rack, .sched table.rack tbody { display: block; }
  .sched table.rack tr { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 3px 12px; align-items: center; margin-top: 5px;
    padding: 9px 12px 9px 20px; background: var(--strip); border: 1px solid var(--strip-edge); border-radius: var(--r-sm);
    box-shadow: inset 7px 0 0 var(--holder, var(--holder-idle)); }
  .sched table.rack tbody tr td, .sched table.rack tbody tr td:first-child, .sched table.rack tbody tr td:last-child {
    display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; width: auto; min-width: 0; }
  .sched table.rack td:first-child .field { width: 48px; padding: 6px 4px; text-align: center; }
  /* a section title's explanation goes under it on a phone instead of squeezing beside it */
  .panel > h2 { flex-wrap: wrap; row-gap: 2px; }
  .panel > h2 > .muted:only-of-type { flex-basis: 100%; }
  .sched table.rack td:first-child { grid-row: 1 / span 3; }
  .sched table.rack td:nth-child(4), .sched table.rack td:nth-child(5), .sched table.rack td:nth-child(6), .sched table.rack td:nth-child(7) { display: none; }
  .sched table.rack td:nth-child(3) .muted { display: inline; }
  .sched table.rack td:nth-child(3) { white-space: normal; }
  .sched .pill { white-space: nowrap; font-size: 11px; padding: 1px 6px; }
}

/* ---------------------------------------------------------------- the work order desk (v0.39)
   The form on the left; beside it, always open, what goes with it: issues, the comment thread with its photos,
   the form's reference documents and the parts. On a narrower screen the side column sits above the form. */
@media screen {
  .wo-desk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
  .wo-main { min-width: 0; }
  .wo-rail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; display: grid; gap: 10px; align-content: start;
    scrollbar-width: thin; padding-bottom: 2px; }
  .rail-box { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 0 0 10px; min-width: 0; }
  .rail-box > h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; padding: 10px 12px 6px; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
  .rail-n { font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .rail-hint { margin: 2px 12px 0; font-size: 12.5px; color: var(--muted); }
  .rail-hint a { color: var(--ink); }
  .rail-issues.has-open { border-color: color-mix(in srgb, var(--amber) 55%, var(--rule)); box-shadow: inset 0 3px 0 var(--amber); }
  .rail-list { list-style: none; margin: 4px 0 0; padding: 0 6px; display: grid; gap: 2px; }
  .rail-list a { display: grid; gap: 2px; padding: 6px 6px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none !important; }
  .rail-list a:hover, .rail-list a:focus-visible { background: var(--rail); }
  .rail-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
  .rail-top b { overflow-wrap: anywhere; }
  .rail-sub { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rail-list li.is-done a { opacity: .7; }
  .rail-thread { max-height: 360px; overflow-y: auto; padding: 0 12px; }
  .rail-thread .note-photo { grid-template-columns: 76px 1fr; }
  .rail-thread .note-thumb { width: 76px; height: 57px; }
  .wo-rail .note-add { padding: 10px 12px 2px; margin-top: 6px; }
  .wo-rail .note-add select { width: 100%; }
  .wo-rail .note-bar { justify-content: space-between; }
  .wo-parts { margin-top: 16px; scroll-margin-top: 12px; }
}
@media screen and (max-width: 1279px) {
  .wo-desk { grid-template-columns: 1fr; }
  .wo-rail { position: static; max-height: none; overflow: visible; order: -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .rail-thread { max-height: 260px; }
}

/* printed after the form: the issues, the comments and the photos of the work order */
@media print {
  .wo-print-notes { display: block; break-inside: auto; }
  .print-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .print-photos figure { margin: 0; break-inside: avoid; border: 1px solid #000; padding: 1.5mm; }
  .print-photos img { display: block; width: 100%; height: 50mm; object-fit: contain; background: #f4f4f4; }
  .print-photos figcaption { font-size: 8pt; line-height: 1.3; margin-top: 1mm; }
}

/* ---------------------------------------------------------------- Storage: the map and the list in one page (v0.40) */
.storage-bar { flex-wrap: wrap; }
.storage-bar .cam-wrap { flex: 1 1 300px; max-width: 560px; }
.storage-bar #mapCode { max-width: none; }
.storage-mode { flex: none; }
.storage-sites { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; }
.storage-sites .tabs { margin: 0; }
.storage-sites .muted { font-size: 13px; }

/* a table split into groups (Storage → List, by area): a heading row per group */
tr.group-row th { background: var(--panel-2); color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400;
  padding: 7px 12px; border-top: 1px solid var(--rule); white-space: normal; }
tr.group-row:first-child th { border-top: 0; }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: sticky; left: 12px; max-width: calc(100vw - 58px); } /* stays in view when a phone scrolls the table sideways */
.group-head b { font-weight: 600; }
.group-acts { display: flex; align-items: center; gap: 12px; font-size: 13px; }

/* a phone as the PC's barcode scanner: the QR window, and the bar on Move items while a phone is linked */
.modal-box.phone-scan { max-width: 420px; }
.modal-box.phone-scan .hint, .modal-box.phone-scan .phone-got { text-align: center; margin: 0; }
.phone-bar[hidden] { display: none; }
.phone-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px;
  padding: 8px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--paper); border-radius: var(--r-sm); }

/* Documents and photos withdrawn from a page (kept on record): closed by default, under the list they left. */
.withdrawn-docs { margin: 8px 12px 4px; font-size: .9em; }
.withdrawn-docs summary { cursor: pointer; }
.withdrawn-docs ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.withdrawn-docs a { text-decoration: line-through; }

/* A signed box whose entries no longer match what was signed (security plan 1.3): shown on screen and in print. */
.sig-changed { color: var(--red); font-weight: 700; text-transform: uppercase; font-size: .8em; letter-spacing: .02em; }