/* Scribble strip -- the DEFAULT theme (Emil, 2026-09-28): the face of the
   mixing desk in daylight. Printed outlines and pressed keys; the colours are
   the keys on a console -- select, solo, mute -- each with one job and no
   other. See IDENTITY.md in ~/Projects/dontfeedback-design.

   A MIX of the prototype's two alternatives, decided for Emil on 2026-09-29:
     - SECTIONS as A1 "Header strip": an outlined box with a straight name
       strip across its top. Nothing tilted, nothing set into the border.
     - A MAC'S NAME as A2: plain name text with a Rename key, which opens the
       field with Save and Cancel (the markup is in portal.html).
     - THE WORDMARK as A1: the graphite console key with its green lamp lit,
       beside "DontFeedback".

   DARK follows the device (Emil, 2026-09-29): the same desk at night -- a
   dark faceplate, the outlines printed in a mid grey instead of graphite, the
   three key colours brightened to their lamp shades so every word stays at
   WCAG AA (4.5:1 for text, 3:1 for outlines and lamps; checked with
   server/tests/test_themes.py). The primary key lights up instead of going
   dark. */
:root {
  color-scheme: light;
  --faceplate: #ECEEEF; --faceplate-2: #E0E3E5; --panel: #F8F9F9; --strip: #F7F8F8; --field: #F9FAFA;
  --nick-field: #FFFFFF;
  --graphite: #1E2327; --graphite-2: #4F5961; --printed: #1E2327; --rule: #C9CED2; --rule-2: #9AA3AA;
  --field-line: #858E95; --th-bg: #E4E7E9;
  --select: #0A7560; --select-lamp: #3FD9B4; --select-wash: #E3F2EE; --select-btn: #0A7560; --select-btn-hover: #0B8069;
  --select-edge: #064D40; --on-select: #FFFFFF;
  --solo: #9E5A00; --solo-lamp: #F2A03D; --solo-wash: #FBF0DF;
  --mute: #BF3128; --mute-lamp: #E8524A; --mute-wash: #FAE7E4; --mute-soft: #FCF5F4; --mute-btn: #BF3128;
  --mute-edge: #8E2019; --on-mute: #FFFFFF;
  --lamp-off: #BCC3C8; --lamp-ring: rgba(30, 35, 39, .5); --fig-off: #6E7780;
  --key-travel: rgba(30, 35, 39, .2); --hover: rgba(30, 35, 39, .06);
  --pressed-bg: #1E2327; --pressed-ink: #FFFFFF; --count-bg: #1E2327; --count-ink: #FFFFFF; --count-plain: #C9CED2;
  --brand-key: #1E2327; --brand-ring: #08493D;
  --code-bg: #FFFFFF; --code-line: #C9CED2; --backdrop: rgba(30, 35, 39, .5);
  --bg: var(--faceplate); --ink: var(--graphite); --ink-2: var(--graphite-2); --line: var(--rule);
  --accent: var(--select); --link: var(--graphite); --focus: #0A7560;
  --side-bg: var(--faceplate-2); --side-ink: var(--graphite); --side-ink-2: var(--graphite-2);
  --font-text: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-body: 15px; --lh-body: 1.53; --gutter: 32px; --sec-gap: 28px; --side-w: 260px; --pad-x: 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --faceplate: #16191C; --faceplate-2: #1D2125; --panel: #252A2F; --strip: #20252A; --field: #0F1214;
    --nick-field: #0F1214;
    --graphite: #E3E8EB; --graphite-2: #A3ADB5; --printed: #737E87; --rule: #353C43; --rule-2: #56616A;
    --field-line: #6E7981; --th-bg: #1F2428;
    --select: #45D6B3; --select-wash: #12302A; --select-btn: #3FD9B4; --select-btn-hover: #5FE2C3;
    --select-edge: #2A9E83; --on-select: #06221C;
    --solo: #F2AB55; --solo-wash: #33260F;
    --mute: #FF8C82; --mute-wash: #3B1A17; --mute-soft: #2A1B19; --mute-btn: #FF8C82; --mute-edge: #C4453C; --on-mute: #2A0B08;
    --lamp-off: #4B545C; --lamp-ring: rgba(0, 0, 0, .6); --fig-off: #8E99A2;
    --key-travel: rgba(0, 0, 0, .55); --hover: rgba(255, 255, 255, .06);
    --pressed-bg: #E3E8EB; --pressed-ink: #16191C; --count-bg: #E3E8EB; --count-ink: #16191C; --count-plain: #3A4148;
    --brand-key: #0A0C0E; --brand-ring: #0A3A30;
    --code-bg: #0F1214; --code-line: #353C43; --backdrop: rgba(0, 0, 0, .6);
    --focus: #3FD9B4;
  }
}
.page-title { font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }

/* ---- the wordmark (A1): a select key with its lamp lit, then the word. */
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; text-decoration: none; color: var(--graphite); }
.brand-mark { display: inline-flex; align-items: center; gap: 10px; }
.brand-led { position: relative; display: block; flex: none; width: 24px; height: 24px; border-radius: 5px; background: var(--brand-key);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.5), 0 0 0 1px var(--printed); }
.brand-led::after { content: ""; position: absolute; left: 8px; top: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--select-lamp); box-shadow: 0 0 0 1.5px var(--brand-ring); }
.brand-word { font-weight: 800; font-stretch: 75%; font-size: 25px; line-height: 1; letter-spacing: -.01em; }
.brand-sub { font-size: 12.5px; font-weight: 600; color: var(--graphite-2); padding-left: 34px; }

/* ---- a Mac's name (A2): reads as a name; Rename opens a plain field. */
.nick-view .nick-name { font-size: 19px; font-weight: 700; }
.nick-field { background: var(--nick-field); border: 1px solid var(--field-line); border-radius: 3px; box-shadow: inset 0 1.5px 0 var(--hover); }
.nick-field:hover { border-color: var(--graphite); }
.nick-field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.nick-input { width: auto; min-height: 36px; padding: 5px 12px !important; border: 0; border-radius: 0; background: transparent;
  font-weight: 600; font-size: 16px; color: var(--graphite); }
.nick-input::placeholder { color: var(--graphite-2); font-weight: 500; }
.nick-input:focus-visible { outline: none; }
.nick .btn { min-height: 36px; }

/* ---- sidebar: a column of select keys */
.side { border-right: 1.5px solid var(--printed); }
@media (min-width: 900px) { .shell { background: linear-gradient(90deg, var(--side-bg) 0 calc(var(--side-w) - 1.5px), var(--printed) 0 var(--side-w), transparent 0); } }
.side-top { padding: 22px 16px 16px 18px; }
.nav-link { border-radius: 6px; border: 1.5px solid transparent; font-size: 14.5px; font-weight: 550; }
.nav-link .ico { color: var(--graphite-2); }
.nav-lamp { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lamp-off); box-shadow: inset 0 0 0 1px var(--lamp-ring); }
.nav-link:hover { background: var(--hover); }
.nav-link[aria-current="page"] { background: var(--panel); border-color: var(--printed); box-shadow: inset 0 -2px 0 var(--key-travel); font-weight: 650; }
.nav-link[aria-current="page"] .nav-lamp { background: var(--select-lamp); box-shadow: 0 0 0 1.5px var(--select); }
.nav-link[aria-current="page"] .ico { color: var(--graphite); }
.nav-count { background: var(--count-bg); color: var(--count-ink); }
.nav-count.is-bad { background: var(--mute-btn); color: var(--on-mute); }
.nav-list-end { border-top: 1.5px dashed var(--rule-2); padding-top: 12px; }
.side-foot { border-top: 1.5px solid var(--printed); }

.top { border-bottom: 0; }
.who-mail { color: var(--graphite-2); }

/* ---- sections (A1): a printed outline with a straight name strip on top. */
.sec { border: 1.5px solid var(--printed); border-radius: 4px; margin: 0 0 var(--sec-gap); }
.sec-head { min-height: 44px; padding: 9px var(--pad-x); background: var(--strip); border-bottom: 1.5px solid var(--printed); border-radius: 2.5px 2.5px 0 0; }
.sec-title { font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.sec-body { padding: 18px var(--pad-x) 20px; }
.lics .sec, .two .sec, .member-main .sec, .member-side .sec { margin: 0; }
.lics { gap: 24px; }
.sec-danger { border-color: var(--mute); }
.sec-danger .sec-head { background: var(--mute-wash); border-bottom-color: var(--mute); }
.sec-danger .sec-title { color: var(--mute); }
.sub-title { font-weight: 650; }

/* ---- keys (buttons): pressed, with 2 px of travel */
.btn { border-radius: 6px; border: 1.5px solid var(--printed); background: var(--panel); color: var(--graphite); font-weight: 600; font-size: 14px;
  box-shadow: inset 0 -2px 0 var(--key-travel); transition: transform .06s; }
.btn:hover { background: var(--faceplate); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: var(--select-btn); border-color: var(--select-edge); color: var(--on-select); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.btn-primary:hover { background: var(--select-btn-hover); }
.btn-danger { color: var(--mute); border-color: var(--mute); background: var(--mute-soft); box-shadow: inset 0 -2px 0 var(--key-travel); }
.btn-danger:hover { background: var(--mute-wash); }
.btn-danger.is-solid { background: var(--mute-btn); color: var(--on-mute); border-color: var(--mute-edge); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.btn-quiet { background: none; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; font-weight: 550; }
.btn-quiet:hover { background: var(--hover); }
.lang-btn { border: 1.5px solid var(--printed); border-radius: 5px; background: var(--panel); color: var(--graphite); box-shadow: inset 0 -2px 0 var(--key-travel); }
.lang-btn[aria-pressed="true"] { background: var(--pressed-bg); color: var(--pressed-ink); box-shadow: none; }
.seg { border: 1.5px solid var(--printed); border-radius: 6px; overflow: hidden; }
.seg-btn { border: 0; border-right: 1.5px solid var(--printed); background: var(--panel); font-weight: 600; font-size: 14px; }
.seg-btn:last-child { border-right: 0; }
.seg-btn[aria-current="true"] { background: var(--pressed-bg); color: var(--pressed-ink); }
.seg-btn[aria-current="true"] .count-pill { background: var(--pressed-ink); color: var(--pressed-bg); }
.theme-btn[aria-pressed="true"] { background: var(--pressed-bg); color: var(--pressed-ink); border-color: var(--pressed-bg); box-shadow: none; transform: translateY(1px); }

/* ---- fields: recessed */
input:not([type=checkbox]):not([type=radio]):not(.nick-input), select, textarea {
  background: var(--field); color: var(--graphite); border: 1px solid var(--field-line); border-radius: 3px; box-shadow: inset 0 1.5px 0 var(--hover); }
input[aria-invalid="true"] { border-color: var(--mute); box-shadow: inset 0 0 0 1px var(--mute); }
.field label, .field .label { color: var(--graphite); }

/* ---- lamps and words */
.status .lamp { box-shadow: 0 0 0 1.5px var(--lamp-ring); background: var(--lamp-off); }
.status.is-ok { color: var(--select); } .status.is-ok .lamp { background: var(--select-lamp); }
.status.is-warn { color: var(--solo); } .status.is-warn .lamp { background: var(--solo-lamp); }
.status.is-bad { color: var(--mute); } .status.is-bad .lamp { background: var(--mute-lamp); }
.status.is-off { color: var(--graphite-2); }
.tag { border: 1.5px solid var(--rule-2); border-radius: 3px; color: var(--graphite); }
.tag.is-ok { border-color: var(--select); color: var(--select); }
.tag.is-bad { border-color: var(--mute); color: var(--mute); }
.count-pill { background: var(--count-bg); color: var(--count-ink); }
.count-pill.is-plain { background: var(--count-plain); color: var(--graphite); }
.notice { border: 1.5px solid var(--printed); border-radius: 4px; background: var(--panel); }
.notice.is-ok { border-color: var(--select); background: var(--select-wash); }
.notice.is-bad { border-color: var(--mute); background: var(--mute-wash); }
.notice.is-warn { border-color: var(--solo); background: var(--solo-wash); }

/* ---- figures: compressed, like the app's headline numbers -- the bold place */
.figs { gap: 0; }
.fig { flex-direction: column-reverse; }
.fig + .fig { border-left: 1.5px solid var(--printed); padding-left: 20px; margin-left: 20px; }
.fig-num { font-weight: 800; font-stretch: 50%; font-size: 62px; line-height: .9; letter-spacing: -.005em; font-variant-numeric: tabular-nums; color: var(--graphite); }
.fig-label { font-size: 13px; font-weight: 600; color: var(--graphite-2); margin-top: 6px; }
.fig.is-warn .fig-num { color: var(--solo); }
.fig.is-bad .fig-num { color: var(--mute); }
.fig.is-off .fig-num { color: var(--fig-off); }
.lic-words .pairs dd { font-weight: 600; }

/* ---- machines and lists */
.machine { border-top: 1.5px dashed var(--rule-2); padding-top: 16px; }
.crossgrade { border-top: 1.5px dashed var(--rule-2); }
.rows .row { border-bottom: 1px solid var(--rule); }
.rows .row:last-child { border-bottom: 0; }
.segs { padding: 4px; border: 1.5px solid var(--printed); border-radius: 4px; background: var(--panel); }
.cseg { border-radius: 2px; background: var(--count-plain); box-shadow: inset 0 0 0 1px var(--key-travel); }
.cseg.is-on { background: var(--select-lamp); box-shadow: inset 0 0 0 1px var(--select-edge); }
.empty { border: 1.5px dashed var(--graphite-2); border-radius: 4px; }
.artifact.is-main .art-os { font-size: 19px; }
.product { border: 1.5px solid var(--printed); border-radius: 4px; }
.product .fig-num { font-size: 84px; }
.msg { border: 1.5px solid var(--printed); border-radius: 4px; }
.msg.is-done { border-color: var(--rule-2); }
.quote { border-left: 3px solid var(--rule-2); padding-left: 12px; }

/* ---- tables: a printed frame, dense */
.tbl-wrap { border: 1.5px solid var(--printed); border-radius: 4px; background: var(--panel); overflow: hidden; }
.sec .tbl-wrap { border: 0; background: none; border-radius: 0; margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); }
.sec-body > .tbl-wrap:first-child { margin-top: -18px; }
.sec-body > .tbl-wrap:last-child { margin-bottom: -20px; }
.sec .tbl tr > :first-child { padding-left: var(--pad-x); }
.sec .tbl tr > :last-child { padding-right: var(--pad-x); }
.tbl thead th { font-size: 12.5px; color: var(--graphite-2); border-bottom: 1.5px solid var(--printed); background: var(--th-bg); }
.sec .tbl thead th { background: none; }
.tbl tbody td, .tbl tbody th { border-bottom: 1px solid var(--rule); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl tr.is-needs > * { background: var(--solo-wash); }
.mac.is-unkeyed { color: var(--solo); }
.toolbar { padding: 0; }

/* ---- the console's overview */
.sec-svcs .svcs { margin: -10px 0 -12px; }
.svc { border-bottom: 1px solid var(--rule); }
.svc:last-child { border-bottom: 0; }
.svc .led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--lamp-ring); flex: none; }
.led.is-ok { background: var(--select-lamp); } .led.is-warn { background: var(--solo-lamp); } .led.is-bad { background: var(--mute-lamp); } .led.is-info { background: var(--lamp-off); }
.svc-fig .fig-num { font-size: 40px; }
.svc-fig .fig-label { order: 2; margin-top: 2px; }
.svc.is-bad .svc-fig .fig-num { color: var(--mute); }
.svc.is-warn .svc-fig .fig-num { color: var(--solo); }
.svc.is-ok .svc-fig .fig-num, .svc.is-info .svc-fig .fig-num { color: var(--fig-off); }
.kpi { border-left: 1.5px solid var(--printed); padding-left: 16px; }
.kpi .fig-num { font-size: 54px; margin-top: 4px; }

/* ---- sign-in (A1): the wordmark in the card's name strip, the step's name below it */
.card-page { background: var(--faceplate); }
.card { border: 1.5px solid var(--printed); border-radius: 4px; padding: 0 28px 26px; gap: 16px; }
.card-head { margin: 0 -28px; gap: 20px; }
.card-head .brand-static { display: flex; padding: 14px 28px; background: var(--strip); border-bottom: 1.5px solid var(--printed); border-radius: 2.5px 2.5px 0 0; }
.card-title { padding: 0 28px; font-size: 24px; font-weight: 650; line-height: 1.2; }
.or { background: none; border-top: 1.5px dashed var(--rule-2); }
.card-links a, .card-note a { color: var(--graphite); }

/* ---- dialog, banner, code */
.dlg-backdrop { background: var(--backdrop); }
.dlg { background: var(--faceplate); border: 2px solid var(--printed); border-radius: 6px; }
.dlg-title { font-size: 20px; font-weight: 650; }
.banner.is-bad { background: var(--mute-wash); border-bottom: 2px solid var(--mute); }
.banner code, .svc-how code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--code-line); }
.cmd { background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 3px; color: var(--graphite); }
.menu { background: var(--panel); border: 1.5px solid var(--printed); border-radius: 6px; box-shadow: 0 3px 0 var(--key-travel); }
.menu-item { border-radius: 4px; color: var(--graphite); }
.menu-item:hover, .menu-item:focus-visible { background: var(--faceplate-2); }
.menu-item.is-danger { color: var(--mute); }
.menu-wrap > summary.btn { list-style: none; }

@media (max-width: 899px) {
  .top { background: var(--faceplate-2); border-bottom: 1.5px solid var(--printed); }
  .top-brand .brand-sub { display: none; }
  .top-brand .brand-word { font-size: 21px; }
  .top-brand .brand-led { width: 20px; height: 20px; border-radius: 4px; }
  .top-brand .brand-led::after { left: 6px; top: 4px; width: 7px; height: 7px; }
  .top-brand .brand-mark { gap: 8px; }
  .menu-btn { border: 1.5px solid var(--printed); border-radius: 6px; background: var(--panel); color: var(--graphite); box-shadow: inset 0 -2px 0 var(--key-travel); font-weight: 600; }
  :root { --pad-x: 16px; }
  .card { padding: 0 20px 22px; }
  .card-head { margin: 0 -20px; }
  .card-head .brand-static { padding: 12px 20px; }
  .card-title { padding: 0 20px; }
  .fig-num { font-size: 52px; }
}
@media (max-width: 699px) {
  .tbl tbody tr { border-bottom: 1px solid var(--rule); }
  .tbl tbody td, .tbl tbody th { border-bottom: 0; }
  .figs { flex-wrap: nowrap; }
  .fig { min-width: 0; }
  .fig + .fig { padding-left: 12px; margin-left: 12px; }
  .fig-num { font-size: 48px; }
  .fig-label { font-size: 12px; }
  .nick { flex-wrap: wrap; width: 100%; }
  .nick-field { flex: 1 1 auto; min-width: 0; }
  .nick-input { width: 100%; min-width: 0; }
  .machine-head { column-gap: 12px; }
  .machine-head > .status { flex: 1 1 0; min-width: 0; }
  .nick-view { width: 100%; justify-content: space-between; }
}