/* Fusinite palette for the Standards Portal (public, members and /admin/).
   Tokens are copied exactly from Fusinite Lens (services/fusinite-lens-replica/source/lens-live.redacted.liquid,
   the same values as the Optimiser/Simulator pages in legacy/), light and dark. Dark mode works like Lens:
   [data-theme=dark] on <html>, remembered as "fusiniteTheme", defaulting to the system setting (theme.js).
   Only the look is defined here; no wording or behaviour lives in this file. */
:root {
  --ink: #17140f; --ink-soft: #4a4436;
  --forest: #1e5231; --forest-deep: #102a1a; --forest-mist: #eef3ee;
  --brass: #c49a45; --brass-deep: #8a6a2e; --brass-pale: #f2e6c8;
  --parchment: #f5efe1; --paper: #fffdf8;
  --amber: #b9791f; --amber-soft: #f6e7cf;
  --stone: #726b5a; --stone-light: #ece5d4; --stone-line: #e1d8c2;
  --heading: #102a1a;
  --clay: #a3512f; --clay-soft: #f7e4dc;
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --shadow-soft: 0 2px 14px rgba(23, 20, 15, 0.06);
  --shadow-card: 0 10px 30px rgba(23, 20, 15, 0.07);
  --radius-sm: 8px; --radius-md: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* portal names, mapped onto the palette (admin.js uses var(--line) inline) */
  --muted: var(--stone); --line: var(--stone-line); --accent: var(--forest); --bg: var(--parchment);
  --button-bg: var(--forest); --button-bg-hover: var(--forest-deep); --button-text: #fffdf8;
  --link: var(--forest);
  color-scheme: light;
}
[data-theme=dark] {
  --ink: #ece6d6; --ink-soft: #c2b9a3;
  --heading: #7fd9a0;
  --forest: #3a9464; --forest-deep: #2a7048; --forest-mist: #16261c;
  --brass: #e0b563; --brass-deep: #f0d99a; --brass-pale: #2c2412;
  --parchment: #100f0c; --paper: #1b1916;
  --amber: #e2984e; --amber-soft: #2c2013;
  --stone: #a89f8c; --stone-light: #292620; --stone-line: #363126;
  --clay: #e08a66; --clay-soft: #2e1b13;
  --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
  --button-bg: var(--forest-deep); --button-bg-hover: var(--forest); --button-text: #fffdf8;
  --link: #7fd9a0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* "hidden" always wins over layout rules (a menu must never show before the sign-in is complete). */
[hidden] { display: none !important; }
html { transition: background-color .3s ease; }
body { margin: 0; font: 16px/1.55 var(--font-body); color: var(--ink); background: var(--parchment);
       -webkit-font-smoothing: antialiased; }

header { padding: 12px 20px; background: var(--paper); border-bottom: 1px solid var(--stone-line);
         border-top: 3px solid var(--forest); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
         font-family: var(--font-display); color: var(--ink); box-shadow: var(--shadow-soft); }
header strong { color: var(--heading); font-weight: 700; letter-spacing: -0.2px; }
header .pilot { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1.2px;
                text-transform: uppercase; color: var(--brass-deep); border: 1px solid var(--brass);
                background: var(--brass-pale); border-radius: 10px; padding: 1px 9px; }
header #signout { margin-left: auto; }
header #themeToggleBtn { margin-left: auto; }
header #themeToggleBtn + #signout { margin-left: 0; }

main { max-width: 720px; margin: 28px auto; padding: 0 16px; }
main.wide { max-width: 1200px; }
section { background: var(--paper); border: 1px solid var(--stone-line); border-bottom: 3px solid var(--brass);
          border-radius: var(--radius-md); padding: 22px 26px; box-shadow: var(--shadow-card); }
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); letter-spacing: -0.3px; }
h1 { font-size: 26px; font-weight: 600; margin-top: 0; }
h2 { font-size: 18px; font-weight: 600; margin-top: 30px; }
p { color: var(--ink); }
a { color: var(--link); }

label { display: block; margin: 14px 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
        letter-spacing: 0.3px; color: var(--stone); }
input { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: 16px var(--font-body);
        color: var(--ink); background: var(--paper); border: 1.5px solid var(--stone-line);
        border-radius: var(--radius-sm); transition: border-color .15s ease, box-shadow .15s ease; }
input:hover { border-color: var(--forest); }
input:focus { outline: 0; border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-mist); }
input[type=checkbox] { accent-color: var(--forest); }

button { padding: 9px 18px; font: 600 15px var(--font-body); border: 1px solid var(--button-bg); border-radius: var(--radius-sm);
         background: var(--button-bg); color: var(--button-text); cursor: pointer;
         transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
button:hover { background: var(--button-bg-hover); border-color: var(--button-bg-hover); transform: translateY(-1px);
               box-shadow: 0 6px 16px rgba(30, 82, 49, .22); }
button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
button.secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--stone-line); }
button.secondary:hover { border-color: var(--brass); background: var(--paper); box-shadow: 0 4px 10px rgba(196, 154, 69, .2); }
button.link { background: none; border: 0; color: var(--link); padding: 0; font-weight: 600; box-shadow: none; }
button.link:hover { background: none; transform: none; text-decoration: underline; }

#message:empty { display: none; }
#message { padding: 11px 15px; border-radius: var(--radius-sm); background: var(--forest-mist);
           border: 1px solid var(--forest); color: var(--ink); }
#message.error { background: var(--clay-soft); border-color: var(--clay); }

table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
th { text-align: left; padding: 8px; border-bottom: 1.5px solid var(--stone-line); font-family: var(--font-mono);
     font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--stone); }
td { text-align: left; padding: 8px; border-bottom: 1px solid var(--stone-line); }
tr:hover td { background: var(--forest-mist); }
table.ids td:first-child { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.3px; }
.tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.6px; padding: 2px 9px;
       border-radius: 10px; background: var(--brass-pale); color: var(--brass-deep); border: 1px solid var(--stone-line); }
.scroll { overflow-x: auto; }

/* Light/dark toggle, as in Lens */
#themeToggleBtn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px;
                  background: var(--paper); color: var(--ink); border: 1px solid var(--stone-line); box-shadow: var(--shadow-soft); }
#themeToggleBtn:hover { border-color: var(--brass); background: var(--paper); box-shadow: 0 4px 10px rgba(196, 154, 69, .2); }
#themeToggleBtn svg { display: block; }

@media (max-width: 560px) {
  header { padding: 10px 14px; }
  main { margin: 18px auto; padding: 0 12px; }
  section { padding: 18px 16px; }
  h1 { font-size: 22px; }
}
/* Admin: long lists scroll inside their box (inline style attributes are blocked by the page's security policy). */
.scroll-box { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
label.inline { display: flex; align-items: center; gap: 8px; }
label.inline input[type=checkbox] { width: auto; margin: 0; }
/* Compact shared-samples list (one row per sample; the row opens to show every configured value). */
.row-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--stone); font-size: 14px; }
table.compact tr.srow { cursor: pointer; }
table.compact tr.srow:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
table.compact td.sid { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
table.compact td.actions { text-align: right; white-space: nowrap; }
.chev { display: inline-block; width: 1em; color: var(--stone); }
tr.sdetail > td { background: var(--forest-mist); padding: 12px 14px 4px; }
tr.sdetail:hover > td { background: var(--forest-mist); }
dl.vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; margin: 0 0 8px; }
dl.vals div { min-width: 0; }
dl.vals dt { font: 500 11.5px var(--font-mono); letter-spacing: .3px; color: var(--stone); overflow-wrap: anywhere; }
dl.vals dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tag.gold { background: var(--brass-pale); color: var(--brass-deep); border-color: var(--brass); font-weight: 600; }
.muted-text { color: var(--stone); font-size: 14px; }
button.small-btn { padding: 5px 11px; font-size: 13.5px; }
/* Logo in page headers (a light chip so the green mark stays readable in dark mode). */
.logo-chip { display: inline-flex; padding: 3px 6px; border-radius: 6px; background: #fffdf8; }
.logo-chip img { display: block; height: 26px; width: auto; }
/* The "Fusinite Standard" emblem in the top bar (always on the light chip, so it reads in dark mode too). */
.logo-chip.std-mark { padding: 2px; border-radius: 8px; }
.logo-chip.std-mark img { height: 30px; width: 30px; }
header .switch-link { margin-left: auto; font: 600 14px var(--font-body); color: var(--brass-deep); border: 1px dashed var(--brass);
                      border-radius: var(--radius-sm); padding: 5px 10px; text-decoration: none; }
header .switch-link + #themeToggleBtn { margin-left: 0; }
/* Standards' tabs (Step B2) */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 22px 0 6px; border-bottom: 1px solid var(--stone-line); }
.tabs button { background: none; color: var(--ink); border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 9px 12px; font-weight: 600; box-shadow: none; }
.tabs button:hover { background: var(--forest-mist); transform: none; box-shadow: none; }
.tabs button[aria-current="page"] { border-bottom-color: var(--forest); color: var(--heading); }
.tabs select { margin-left: auto; padding: 6px 8px; border: 1px solid var(--stone-line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
textarea { width: 100%; margin-top: 5px; padding: 10px 12px; font: 15px var(--font-body); color: var(--ink); background: var(--paper);
           border: 1.5px solid var(--stone-line); border-radius: var(--radius-sm); }
fieldset.opts { border: 1px solid var(--stone-line); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
fieldset.opts legend { font: 500 12.5px var(--font-mono); color: var(--stone); padding: 0 4px; }
fieldset.opts label { margin: 4px 0; }
label.inline input[type=radio] { width: auto; margin: 0; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.checklist label { margin: 4px 0; font: 14px var(--font-mono); color: var(--ink); }
.metric-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.metric { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px;
          border: 1px solid var(--stone-line); border-radius: var(--radius-sm); background: var(--paper); }
.metric.off { opacity: .55; }
.metric input[data-name] { margin: 0; padding: 7px 9px; font-size: 14.5px; }
.metric small { display: block; margin-top: 3px; color: var(--stone); font-size: 12px; overflow-wrap: anywhere; }
.metric label { margin: 0; }
.moves { display: flex; gap: 4px; }
.actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.actions-row input { width: auto; flex: 1 1 220px; margin: 0; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.grid-form .wide-field { grid-column: 1 / -1; }
input[readonly], textarea[readonly] { background: var(--stone-light); }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-form label { flex: 1 1 260px; margin: 0; }
.logo-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.logo-preview { min-width: 180px; min-height: 80px; padding: 10px; border: 1px dashed var(--stone-line); border-radius: var(--radius-sm);
                display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; background: #fffdf8; }
.logo-preview img { max-width: 220px; max-height: 90px; }
td.mono-id { font-family: var(--font-mono); font-weight: 600; }

.pilot-terms { margin: 12px 0 16px; padding: 12px 16px; border-left: 3px solid var(--brass); background: var(--brass-pale); border-radius: 6px; font-size: 14px; }
.pilot-terms h3 { margin: 0 0 8px; font-size: 15px; }
.pilot-terms ol { margin: 0 0 8px; padding-left: 20px; }
.pilot-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--brass); font-size: 11px; letter-spacing: .06em; vertical-align: middle; }