/* Surftec Tier A kit 1.2.0: base, layout primitives and components (Standards 03 §0, D-EN-09).
   Brand values come from tokens.css; the component tokens below derive from them. Server render functions:
   inc/kit/ui.php; browser builders: SUi in assets/kit/kit.js. Pages compose these and never restyle them;
   product-only content goes in the product's own stylesheet. Gallery of every component: /components/
   Do not edit inside a project: change the master kit (templates/tier-a-kit) and copy it in.

   Contents: 1 font and component tokens · 2 base · 3 header bar · 4 layout · 5 page head, crumbs, prose
   · 6 cards, boxes, folds · 6b item lists, repeaters · 7 fields · 8 buttons, tags · 9 help bubbles · 10 messages
   · 11 data display · 12 setting boxes · 13 stats · 14 tiles · 15 footer · 16 print sheets · 17 admin apps (sidebar
   shell, sign-in, confirmations, colour picker) · 18 dark theme · 19 breakpoints, motion */

/* ---- 1 Font (self-hosted Raleway variable, SIL OFL; no third-party requests) and component tokens ---- */
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/raleway-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --surface: #fff;       /* cards, header, inputs */
  --surface-2: #F4F9F9;  /* hover rows, table heads, quiet wells */
  --heading: var(--midnight);
  --accent: var(--teal); /* outline buttons, icons */
  --accent-text: #1F6878; /* small teal text and links on tints (AA 4.5:1) */
  --ok-text: #0F6E33;
  --tint-info: #E2F4F7;  --tint-ok: #E3F3EA;  --tint-err: #FBE9E7;  --tint-amber: #FFF3D6;
  --amber-text: #8A5A00; --amber: #F2A900; --switch-off: #C9D5D8; --nav-on: var(--midnight);
  --focus-ring: 0 0 0 3px rgba(62, 186, 206, .35);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .2);
  --measure: 70ch;
  --t-small: 13px; --t-body: 16px; --t-h2: 20px; --t-h1: 30px;
}

/* ---- 2 Base ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ground); color: var(--text); font: 500 var(--t-body)/1.5 var(--font-ui);
}
a { color: var(--accent-text); }
code, pre, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.muted { color: var(--muted); }
.small-print { font-size: var(--t-small); color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--midnight); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); font-weight: 700; }
.skip:focus { top: 12px; }

/* ---- 3 Header bar ---- */
.bar {
  position: sticky; top: 0; z-index: 20; height: 64px; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px;
}
.bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--grad); }
.bar-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--heading); min-width: 0; }
.bar-logo { height: 38px; width: auto; display: block; }
.bar-div { width: 2px; height: 30px; background: var(--line); }
.bar-product { font-size: 20px; font-weight: 500; white-space: nowrap; }
.bar-product b { font-weight: 800; }
.bar-start, .bar-end { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bar-end { gap: 10px; }

/* Header pop-overs (nav.php): the app launcher beside the product name and the profile button. <details>, so they
   open without script; kit.js closes them on Escape or a click elsewhere and runs the launcher search. */
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.bar-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--heading); }
.bar-icon .ico { width: 26px; height: 26px; }
.bar-icon:hover, .pop[open] > .bar-icon { background: var(--surface-2); color: var(--accent-text); }
.pop > summary:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.pop-panel { position: absolute; top: calc(100% + 12px); z-index: 25; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); box-shadow: var(--shadow-pop); }
.launch-panel { left: -8px; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden; }
.launch-search { position: relative; display: block; padding: 14px 14px 10px; }
.launch-search .ico { position: absolute; left: 28px; top: 50%; margin-top: 2px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.launch-search input[type=search] { width: 100%; padding-left: 44px; border-radius: var(--r-pill); }
.launch-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 10px 12px; border-bottom: 1px solid var(--line); }
.launch-pin { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 12px; text-decoration: none; color: var(--text);
  font-size: var(--t-small); font-weight: 600; text-align: center; line-height: 1.25; }
.launch-pin .ico { width: 30px; height: 30px; color: var(--accent); }
.launch-pin:hover, .launch-pin:focus-visible, .launch-item:hover, .launch-item:focus-visible { background: var(--surface-2); outline: none; }
.launch-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px; }
.launch-group { display: grid; gap: 2px; padding-top: 6px; }
.launch-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 4px; }
.launch-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--text); }
.launch-item > .ico { width: 22px; height: 22px; color: var(--accent); }
.launch-item b { display: block; color: var(--heading); font-weight: 700; }
.launch-item small { display: block; color: var(--muted); font-size: var(--t-small); line-height: 1.35; }
.launch-item > .ico:last-child:not(:first-child) { width: 14px; height: 14px; color: var(--muted); }
.launch-none { padding: 10px; }
.bar-prof { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 12px 3px 3px; border-radius: var(--r-pill); border: 2px solid var(--line); color: var(--heading); font-weight: 600; font-size: 14px; }
.bar-prof:hover, .prof[open] > .bar-prof { border-color: var(--sea); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 13px; flex: none; }
.avatar .ico { width: 30px; height: 30px; }
.avatar.known { background: var(--grad); color: #fff; }
.pop-panel :where(p, h2) { margin: 0; }
/* Light/dark toggle: the icon shows the theme it switches to. */
.theme-toggle { border: 0; background: none; cursor: pointer; padding: 0; }
.theme-toggle span { display: grid; place-items: center; }
.theme-toggle .to-light, :root[data-theme=dark] .theme-toggle .to-dark { display: none; }
:root[data-theme=dark] .theme-toggle .to-light { display: grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .theme-toggle .to-dark { display: none; }
  :root:not([data-theme=light]) .theme-toggle .to-light { display: grid; }
}
.theme-toggle:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
/* Cookies and storage notice (kit.js SConsent): centred on the page, plain words, Accept and No thanks side by side. */
dialog.consent { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-card, 18px); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
dialog.consent::backdrop { background: rgba(15, 28, 33, .55); }
.consent-in { display: grid; gap: 14px; padding: 26px 26px 22px; }
.consent-in h2 { margin: 0; font-size: var(--t-h2, 22px); color: var(--heading); display: flex; gap: 10px; align-items: center; }
.consent-in p, .consent-in ul { margin: 0; }
.consent-in ul { padding-left: 20px; display: grid; gap: 4px; }
.consent-in .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; }
.consent-in .actions .pill { justify-content: center; min-height: 48px; font-size: 16px; }
.legal-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: underline; }
.prof-panel { right: 0; width: min(300px, calc(100vw - 24px)); padding: 16px; display: grid; gap: 12px; }
.prof-head { display: flex; gap: 12px; align-items: center; }
.prof-head .avatar { width: 44px; height: 44px; font-size: 16px; }
.prof-head b { display: block; color: var(--heading); }
.prof-head small { display: block; color: var(--muted); font-size: var(--t-small); }

/* ---- 4 Layout primitives: all spacing comes from gap (02 §2) ---- */
.main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px; display: flex; flex-direction: column; gap: var(--gap); }
.main:focus { outline: none; }
.main :where(h1, h2, h3, h4, p, ul, ol, dl, figure, pre, blockquote, fieldset) { margin: 0; }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.stack.tight { gap: var(--gap-tight); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 16px; align-items: start; }
.span-all { grid-column: 1 / -1; }
.cols { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: start; }
.cols.equal { align-items: stretch; }
.row { display: flex; flex-wrap: wrap; gap: var(--gap-tight); align-items: center; }
.row.end { justify-content: flex-end; }
.grow { flex: 1 1 260px; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--gap-tight); align-items: center; border-top: 1px solid var(--line); padding-top: var(--gap); }
.scroll { overflow-x: auto; }

/* ---- 5 Page head, breadcrumbs, reading text ---- */
.pagehead { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.pagehead h1 { font-size: var(--t-h1); font-weight: 700; color: var(--heading); display: flex; align-items: center; gap: 12px; line-height: 1.2; }
.pagehead h1 .ico { color: var(--accent); width: 32px; height: 32px; }
.tabhint { color: var(--muted); max-width: var(--measure); }
/* Breadcrumbs sit in their own strip under the header bar (1.1.1), lined up with the page content and kept apart
   from the h1, so the trail reads as navigation, not part of the title. */
.crumbbar { background: var(--surface-2, var(--surface)); border-bottom: 1px solid var(--line); margin-top: 3px; }
.crumbbar .crumbs { max-width: 1200px; margin: 0 auto; padding: 9px 32px; }
.crumbs [aria-current] { color: var(--text); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--t-small); color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 4px; color: var(--muted); }
.crumbs a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.prose { display: flex; flex-direction: column; gap: 10px; max-width: var(--measure); }
h2 { font-size: var(--t-h2); font-weight: 700; color: var(--heading); }

/* ---- 6 Cards, card header, boxes, folds ---- */
.card { background: var(--surface); border-radius: var(--r-card); padding: var(--pad-card); display: flex; flex-direction: column; gap: var(--gap); border: 2px solid transparent; min-width: 0; }
.card.active { border-color: var(--mint); }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.card-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.card-title > span { min-width: 0; }
.card-title .ico { width: 22px; height: 22px; }
.card-aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--gap-tight); margin-left: auto; min-height: 30px; }
.card-aside .field { min-width: 200px; }
.mini-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-small); font-weight: 700; color: var(--heading); text-transform: uppercase; letter-spacing: .05em; }
.mini-head .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.box { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-box); min-width: 0; }
/* Folds (ui_fold, SForm.section): details.sec.card on the page, details.sec.box inside a card. Start collapsed. */
details.sec { display: block; }
details.sec.card { padding: 0; }
details.sec.card[open] { border-color: var(--mint); }
details.sec > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  min-height: var(--head-box); padding: 6px var(--pad-box); font-weight: 700; color: var(--heading); border-radius: var(--r-box); }
details.sec.card > summary { min-height: var(--head-card); padding: 10px var(--pad-card); border-radius: var(--r-card); }
details.sec > summary:hover { background: var(--surface-2); }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: '›'; font-size: 22px; line-height: 1; width: 14px; flex: 0 0 14px; transition: transform .15s; color: var(--accent); }
details.sec[open] > summary::before { transform: rotate(90deg); }
details.sec > summary:focus-visible { outline: 3px solid var(--sea); outline-offset: -3px; }
.sec-head { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }   /* the title and its (i) stay together */
.sec-title { font-weight: 700; color: var(--heading); font-size: inherit; }
h2.sec-title { font-size: 1.05rem; }
.sec-body { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; padding: 2px var(--pad-box) var(--pad-box); }
details.sec.card > .sec-body { padding: 4px var(--pad-card) var(--pad-card); }
.faq details.sec > summary { padding-top: 10px; padding-bottom: 10px; }
.sec-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-left: auto; font-weight: 500; color: var(--muted); font-size: 14px; }

/* ---- 6b Item lists (an admin app's records: a head that opens an editor) and repeaters ---- */
.list { display: grid; gap: 10px; min-width: 0; }
.item, .empty { background: var(--surface); border-radius: var(--r-card); border: 2px solid transparent; min-width: 0; }
.item.open { border-color: var(--mint); }
.empty { padding: var(--pad-card); color: var(--muted); }
.item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: var(--head-card); padding: 10px var(--pad-card);
  width: 100%; border: 0; background: none; text-align: left; border-radius: var(--r-card); cursor: pointer; color: var(--text); font: inherit; }
.item-head:hover { background: var(--surface-2); }
.item-head:focus-visible { outline: 3px solid var(--sea); outline-offset: -3px; }
.chev { flex: 0 0 14px; width: 14px; font-weight: 800; font-size: 22px; line-height: 1; color: var(--accent); transition: transform .15s; }
.item.open .chev { transform: rotate(90deg); }
.item-name { font-weight: 700; flex: 1; min-width: 0; font-size: 1.05rem; color: var(--heading); }
.item-name small { display: block; font-weight: 500; color: var(--muted); margin-top: 2px; font-size: .8rem; overflow-wrap: anywhere; }
.item-body { display: grid; gap: var(--gap); min-width: 0; padding: 4px var(--pad-card) var(--pad-card); }
.rep { display: grid; gap: var(--gap-tight); min-width: 0; }
.rep-item { border: 2px solid var(--line); border-radius: var(--r-box); background: var(--surface); min-width: 0; }
div.rep-item { display: grid; gap: var(--gap-tight); padding: var(--pad-box); }
.rep-bar { display: flex; gap: 6px; align-items: center; }
details.rep-item > summary.rep-bar { padding: 6px var(--pad-box); min-height: var(--head-box); }
.rep-bar .rep-title { flex: 1; font-weight: 700; color: var(--heading); }

/* ---- 7 Fields and checks ---- */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field > label, .field > .label, .flabel { font-weight: 600; color: var(--heading); display: flex; align-items: center; gap: 8px; }
.field > small { font-size: var(--t-small); color: var(--muted); }
.hint { font-size: var(--t-small); color: var(--muted); }
.hint.err { color: var(--danger); }
input[type=text], input[type=search], input[type=password], input[type=number], input[type=email], input[type=url], input[type=tel],
input[type=time], input[type=date], input.in, select, textarea {
  width: 100%; min-width: 0; height: var(--control-h); padding: 0 14px; border-radius: var(--r-control);
  border: 2px solid var(--line); background: var(--surface); color: var(--text); font: 500 var(--t-body) var(--font-ui);
}
textarea { height: auto; min-height: 220px; padding: 12px 14px; font: 500 14px/1.5 var(--font-mono); resize: vertical; }
textarea.prose { min-height: 100px; font-family: var(--font-ui); }
textarea.prose.tall { min-height: 140px; }
textarea.in { min-height: 80px; font-family: var(--font-ui); }
textarea.mono { font-family: var(--font-mono); font-size: .85rem; }
.actions select, .card-aside select { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sea); box-shadow: var(--focus-ring); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--heading); }
.check input { width: 22px; height: 22px; accent-color: var(--teal); flex: none; margin: 0; }
.check .muted { font-weight: 400; }
fieldset.checks { border: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
fieldset.checks legend { font-weight: 700; color: var(--heading); padding: 0; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
fieldset.checks .check { min-height: 40px; align-items: flex-start; padding-top: 8px; }
.inputwrap { position: relative; display: flex; }
.inputwrap input { padding-right: 52px; }
.inputwrap .icon { position: absolute; right: 4px; top: 4px; }

/* ---- 8 Buttons, round icon buttons, tags ---- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px;
  border-radius: var(--r-pill); border: 2px solid var(--accent); background: var(--surface); color: var(--accent);
  font: 700 var(--t-body) var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pill.primary { background: var(--grad); color: #fff; border-color: transparent; }
.pill.quiet { border-color: var(--line); color: var(--muted); }
.pill.danger { border-color: var(--danger); color: var(--danger); }
.pill.small { height: 38px; padding: 0 16px; font-size: 14px; }
.pill:disabled { opacity: .35; cursor: not-allowed; }
.pill:not(:disabled):hover { filter: brightness(1.05); box-shadow: 0 0 0 3px rgba(62, 186, 206, .25); }
.icon { min-width: 36px; height: 36px; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--surface); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 8px; font-weight: 700; flex: none; }
.icon:hover:not(:disabled) { border-color: var(--accent); }
.icon:disabled { opacity: .35; cursor: default; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 700; background: var(--ground); color: var(--heading); white-space: nowrap; }
.tag.ok { background: var(--tint-ok); color: var(--ok-text); }
.tag.warn { background: var(--tint-err); color: var(--danger); }
.tag.lib { background: var(--tint-info); color: var(--accent-text); }
.tag.amber { background: var(--tint-amber); color: var(--amber-text); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.dot.off { background: #B7C4C7; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 128, 60, .18); }
.dot.bad { background: var(--danger); }
.spacer { flex: 1; }
.warn { color: var(--danger); font-weight: 600; }
.secret { font-family: var(--font-mono); background: var(--ground); padding: 10px 14px; border-radius: var(--r-control); word-break: break-all; font-weight: 600; }
.status-line { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.status-line b { color: var(--text); }

/* ---- 9 (i) help and bubbles ---- */
.info {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); color: var(--accent);
  font: italic 700 13px/1 Georgia, 'Times New Roman', serif; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: help; flex: none;
}
.bubble {
  position: fixed; z-index: 50; max-width: 360px; background: var(--midnight); color: #fff; border-radius: var(--r-box);
  padding: 12px 14px; font-size: 14px; line-height: 1.45; box-shadow: var(--shadow-pop);
}
.bubble b { display: block; margin-bottom: 4px; }
.bubble p { margin: 4px 0 0; }
.bubble em { font-style: normal; color: var(--mint); font-weight: 700; }

/* ---- 10 Messages ---- */
.notice { border-radius: var(--r-box); padding: 12px 16px; background: var(--tint-info); color: var(--heading); border-left: 6px solid var(--teal); }
.notice.err { background: var(--tint-err); border-left-color: var(--danger); }
.notice.ok { background: var(--tint-ok); border-left-color: var(--ok); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: var(--midnight); color: #fff; border-radius: var(--r-pill); padding: 12px 24px; font-weight: 600;
  max-width: calc(100vw - 32px); box-shadow: var(--shadow-pop);
}
.toast.err { background: var(--danger); }

/* ---- 11 Key/value, tables, steps, raw text ---- */
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 18px; }
.kv dt { font-weight: 600; color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
table.t { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
table.t th { background: var(--midnight); color: #fff; text-align: left; padding: 10px 12px; font-weight: 700; }
table.t th:first-child { border-top-left-radius: 12px; }
table.t th:last-child { border-top-right-radius: 12px; }
table.t td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.t .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.t.nowrap th, table.t.nowrap td { white-space: nowrap; overflow-wrap: normal; }
table.t.nowrap td.wrap { white-space: normal; min-width: 180px; }
table.t tr.total td { border-top: 2px solid var(--mint); font-weight: 700; }
table.t tr.strong td { font-weight: 700; }
table.t tr.grp td { background: var(--ground); font-weight: 700; color: var(--heading); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em; }
table.t tr.dim td { color: var(--muted); }
ol.steps { padding-left: 22px; display: grid; gap: 12px; }
ol.steps li { padding-left: 4px; }
ol.steps .step { align-items: flex-start; }
ol.steps code { background: var(--ground); border-radius: 8px; padding: 4px 10px; font-size: 14px; }
pre.raw { margin: 0; background: var(--ground); border-radius: var(--r-control); padding: 14px; font-size: var(--t-small); line-height: 1.45; max-height: 520px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- 12 Setting boxes (SUi.controlBox): title, key and description with controls on the right ---- */
.controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.ctl { border: 2px solid var(--line); border-radius: var(--r-box); padding: var(--pad-box); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctl-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ctl input[type=number] { width: 110px; }
.ctl input[type=range] { width: 100%; max-width: 240px; accent-color: var(--teal); }
.ctl input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--teal); }
.ctl select { width: auto; }

/* ---- 13 Stat tiles, grades, progress ---- */
.stats { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.stat { background: var(--surface); border-radius: var(--r-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-label { font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.stat-value { font-size: 30px; font-weight: 800; color: var(--heading); font-variant-numeric: lining-nums tabular-nums; line-height: 1.1; }
.stat-value small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.grade { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); font-weight: 700; }
.grade::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.grade-none { font-size: var(--t-small); }
.grade.good { color: var(--ok); }
.grade.ok { color: var(--amber-text); }
.grade.poor { color: var(--danger); }
.progress { height: 6px; border-radius: var(--r-pill); background: var(--ground); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--grad); transition: width .2s linear; }
.progress > div.pulse { background: linear-gradient(90deg, var(--sea), #297F93, var(--sea)); background-size: 200% 100%; animation: pulsebar 2s linear infinite; }
@keyframes pulsebar { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* ---- 14 Launcher tiles ---- */
.tile-group { display: flex; flex-direction: column; gap: var(--gap-tight); }
.group-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }
.tile {
  background: var(--surface); border-radius: var(--r-card); border: 2px solid transparent; padding: 20px; min-height: 150px;
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); position: relative;
  transition: border-color .15s, transform .15s;
}
.tile:hover, .tile:focus-visible { border-color: var(--mint); transform: translateY(-2px); }
.tile .ico { width: 40px; height: 40px; color: var(--accent); }
.tile-title { font-weight: 700; font-size: 18px; color: var(--heading); }
.tile-desc { font-size: 14px; color: var(--muted); }
.tile-ext { position: absolute; top: 16px; right: 16px; }
.tile-ext .ico { width: 18px; height: 18px; color: var(--muted); }
.tiles.compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap-tight); }
.tiles.compact .tile { min-height: 0; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
.tiles.compact .tile .ico { width: 28px; height: 28px; grid-row: span 2; }
.tiles.compact .tile-title { font-size: var(--t-body); }
.tiles.compact .tile-desc { font-size: var(--t-small); }

/* ---- 15 Legal footer ---- */
.legal { background: var(--surface); border-top: 1px solid var(--line); padding: 18px 32px; display: flex; gap: 18px; align-items: center; font-size: 12px; color: var(--muted); }
.legal p { margin: 0; }
.legal b { color: var(--heading); }
.legal-logo { height: 30px; width: auto; flex: none; }
.legal .legal-ver { margin-left: auto; white-space: nowrap; }   /* .legal p would otherwise zero the margin */

/* ---- 17 Admin apps: sidebar shell (layout 'app'), sign-in, confirmations, switches, colour picker ---- */
.bar-sub { font-weight: 600; color: var(--muted); }
.bar-nav { display: flex; align-items: center; gap: var(--gap-tight); }
.bar-user { color: var(--accent); font-weight: 700; }
.app { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-width: 0; }
.app > * { min-width: 0; }
.app > .main { margin: 0; }
.nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 67px; z-index: 10; }
.nav-in { display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
.nav button { border: 0; background: none; text-align: left; padding: 10px 14px; border-radius: var(--r-pill); font: 600 15px var(--font-ui); color: var(--text); cursor: pointer; white-space: nowrap; }
.nav button:hover { background: var(--ground); }
.nav button.on { background: var(--nav-on); color: #fff; }
.nav-h { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 14px 4px; }
.nav-h:first-child { padding-top: 0; }
.tabhead { display: flex; flex-wrap: wrap; gap: var(--gap-tight) 12px; align-items: center; justify-content: space-between; }
.pagehead.sub { margin-top: var(--gap); }
.pagehead h2 { font-size: var(--t-h2); }
.filter { display: flex; gap: var(--gap-tight); align-items: center; font-weight: 600; }
.filter select { width: auto; }
.signin { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.signin-panel { width: min(420px, 100%); }
.signin-panel h1 { text-align: center; font-size: 1.45rem; color: var(--heading); }
.signin-brand { display: grid; justify-items: center; gap: 6px; }
.signin-brand img { height: 52px; width: auto; }
.signin-brand span { font-weight: 800; color: var(--heading); }
.signin .small-print { text-align: center; }
.signin input.pin, .signin input.text { height: 56px; font-size: 1.3rem; text-align: center; border-radius: var(--r-pill); border-color: var(--mint); }
.signin input.pin { letter-spacing: .3em; font-size: 1.8rem; }
.signin input.pin::placeholder { letter-spacing: normal; font-size: 1rem; }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.knob { flex: 0 0 56px; height: 32px; border-radius: 16px; background: var(--switch-off); position: relative; transition: background 150ms; }
.knob::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 150ms; }
.switch input:checked + .knob { background: var(--teal); }
.switch input:checked + .knob::after { transform: translateX(24px); }
.switch input:focus-visible + .knob { outline: 3px solid var(--sea); outline-offset: 3px; }
.switch input:disabled ~ * { opacity: .45; }
dialog.ask { border: 0; border-radius: var(--r-card); padding: 22px; width: min(460px, calc(100% - 32px)); background: var(--surface); color: var(--text); box-shadow: 0 18px 48px rgba(31, 42, 48, .28); }
dialog.ask::backdrop { background: rgba(31, 42, 48, .45); }
.ask-q { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--heading); }
.ask-detail { margin: 8px 0 0; color: var(--muted); }
.ask-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.colour { display: grid; gap: var(--gap-tight); min-width: 0; }
.colour-row { display: flex; gap: var(--gap-tight); align-items: center; }
.colour input[type=color] { flex: 0 0 52px; width: 52px; height: 44px; border: 2px solid var(--line); border-radius: var(--r-control); padding: 2px; background: var(--surface); cursor: pointer; }
.colour .hex { flex: 1 1 auto; max-width: 150px; font-family: var(--font-mono); text-transform: uppercase; }
.colour .hex::placeholder { text-transform: none; font-family: var(--font-ui); }
.colour .hex.bad { border-color: var(--danger); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .15); background: var(--c); cursor: pointer; padding: 0; flex: 0 0 auto; }
.sw:hover { transform: scale(1.15); }
.sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--heading); }
.sw:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.sw-sep { width: 2px; height: 20px; background: var(--line); margin: 0 4px; }

/* ---- 16 Print sheets: a page whose body has class "sheet-page" prints only its sheet (A4, no margins).
   Mark anything else that must not print with .noprint. ---- */
@media print {
  @page { size: A4 portrait; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.sheet-page { background: #fff; display: block; min-height: 0; }
  body.sheet-page :is(.bar, .skip, .crumbbar, .pagehead, .noprint, .legal, .toast) { display: none !important; }
  body.sheet-page .main { padding: 0; max-width: none; display: block; }
  html:has(body.sheet-page), body.sheet-page { width: 210mm; height: 297mm; margin: 0; padding: 0; overflow: hidden; }
}

/* ---- 18 Dark theme: follows the device unless the page sets data-theme="light"; data-theme="dark" forces it.
   Only component tokens change; brand colours stay. Signal colours and printed sheets are never themed. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ground: #0F1C21; --surface: #18292F; --surface-2: #213840; --text: #E3ECEE; --muted: #9DB0B6; --line: #2D444C;
    --heading: #EEF5F5; --accent: var(--sea); --accent-text: #7FD3E0; --ok-text: #5CC98B; --danger: #F08A80; --ok: #5CC98B; --switch-off: #3A5059;
    --tint-info: #16363E; --tint-ok: #15372A; --tint-err: #46211E; --tint-amber: #3D3016; --amber-text: #F2C566; --nav-on: var(--teal);
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --ground: #0F1C21; --surface: #18292F; --surface-2: #213840; --text: #E3ECEE; --muted: #9DB0B6; --line: #2D444C;
  --heading: #EEF5F5; --accent: var(--sea); --accent-text: #7FD3E0; --ok-text: #5CC98B; --danger: #F08A80; --ok: #5CC98B; --switch-off: #3A5059;
  --tint-info: #16363E; --tint-ok: #15372A; --tint-err: #46211E; --tint-amber: #3D3016; --amber-text: #F2C566; --nav-on: var(--teal);
  color-scheme: dark;
}

/* ---- 19 Breakpoints (phone < 600, tablet 600–999, desktop ≥ 1000) and reduced motion ---- */
@media (min-width: 1000px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 1fr; }
  .nav { position: static; border-bottom: 0; border-right: 1px solid var(--line); }
  .nav-in { position: sticky; top: 67px; flex-direction: column; overflow: visible; padding: 16px 10px; }
}
@media (min-width: 600px) and (max-width: 999px) { .nav-in { flex-wrap: wrap; } .nav-h { display: none; } }
@media (min-width: 1000px) { .cols { grid-template-columns: 1fr 1fr; } .cols.c-wide { grid-template-columns: 1.3fr .7fr; } }
@media (max-width: 999px) { .main { padding: 16px; } .legal { padding: 16px; } .crumbbar .crumbs { padding: 8px 16px; } }
@media (max-width: 599px) {
  .main { padding: 12px; }
  .bar { padding: 0 12px; }
  .crumbbar .crumbs { padding: 8px 12px; }
  .bar-logo { height: 30px; }
  .bar-div, .bar-product, .prof-name { display: none; }
  .bar-start, .bar-end { gap: 6px; }
  .bar-prof { padding: 3px; }
  .launch-panel { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; }
  .prof-panel { position: fixed; right: 12px; top: 72px; }
  .pagehead h1 { font-size: 24px; }
  .card-aside { margin-left: 0; justify-content: flex-start; min-height: 0; }
  .info { width: 24px; height: 24px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .kv dd:last-child { margin-bottom: 0; }
  .legal { flex-direction: column; align-items: flex-start; }
  .legal .legal-ver { margin-left: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles.compact { grid-template-columns: 1fr; }
  .tile { min-height: 0; padding: 14px; }
  .tiles:not(.compact) .tile-desc { display: none; }
  .bar-sub, .bar-user { display: none; }
  .nav-h { font-size: 0; padding: 0; margin: 8px 4px; border-left: 2px solid var(--line); }
  .nav-h:first-child { display: none; }
  .tabhead > .row { width: 100%; }
  .tabhead .filter { flex: 1 1 100%; }
  .tabhead .filter select { flex: 1; }
  .actions .spacer { display: none; }
  .actions > .pill, .actions > .row { flex: 1 1 auto; }
  .ask-actions .pill { flex: 1 1 auto; }
  .sec-meta { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }