/* Miki dashboard, built on the Miki AI Design System (v1, 9 Nov 2026).
   Every colour, size and radius below comes from the design system's tokens; components use the
   variables, never a hex of their own. Dark is the default theme; [data-theme="light"] and print use
   the light values. Miki's photo stays down the left of every page, as Bledar decided. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens */
:root {
  --bg-page: #0a1120; --bg-raised: #0d1526; --bg-card: #111b30; --bg-inset: #0f182b; --bg-nav-active: #1a2645;
  --border: #1e2a45; --border-strong: #2a3757;
  --text: #e6eaf2; --text-secondary: #c4ccdd; --text-muted: #9aa6bf; --text-label: #8792ab;
  --accent: #2f5fe0; --accent-hover: #2550c7; --on-accent: #ffffff; --link: #8fb0ff; --focus: #8fb0ff;
  --danger: #d92d3a; --stop-banner: #5a1520;
  --warn-bg: #3a2d12; --warn-fg: #f6c760; --success-bg: #14302a; --success-fg: #5ee0a6;
  --danger-bg: #3b1c24; --danger-fg: #ff959b; --info-bg: #1a2645; --info-fg: #afc3ff;
  --note-bg: #221b33; --note-fg: #e3d6ff; --note-border: #4a3a70; --company-alcomm: #5b8cff;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --control-sm: 32px; --control-md: 36px; --control-lg: 44px; --sidebar-width: 220px; --content-max: 1180px;
  --side: clamp(280px, 30vw, 520px);  /* Miki's photo panel */
  --bg-photo: #0b1f45; --backdrop: rgba(5, 9, 18, .7); --shadow-pop: 0 8px 28px rgba(0, 0, 0, .4); --topbar-h: 60px; --rail-width: 64px;
  --z-menu: 20; --z-dialog: 40; --z-toast: 50;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg-page: #f5f7fb; --bg-raised: #ffffff; --bg-card: #ffffff; --bg-inset: #eef2f8; --bg-nav-active: #e6edff;
  --border: #dce2ec; --border-strong: #b9c3d4;
  --text: #0f1729; --text-secondary: #33405a; --text-muted: #56637d; --text-label: #56637d;
  --link: #2550c7; --focus: #2f5fe0; --danger: #c62633; --stop-banner: #a3202b;
  --warn-bg: #fff3d6; --warn-fg: #7a4f00; --success-bg: #ddf5ea; --success-fg: #0f6b45;
  --danger-bg: #fde3e5; --danger-fg: #a3202b; --info-bg: #e6edff; --info-fg: #2550c7;
  --note-bg: #f1eaff; --note-fg: #5b3fa8; --note-border: #c9b6f2; --company-alcomm: #2f5fe0;
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg-page);
       -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg-page); padding-left: var(--side); min-height: 100vh; }
.hidden { display: none !important; }
h1 { font-size: 28px; line-height: 34px; font-weight: 700; margin: 0; }
h2 { font-size: 18px; line-height: 24px; font-weight: 600; margin: 0 0 var(--space-3); }
h3 { font-size: 16px; line-height: 22px; font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
p { margin: var(--space-2) 0; }
a { color: var(--link); }
.muted { color: var(--text-muted); font-size: 13px; line-height: 19px; }
.small { font-size: 12px; line-height: 16px; }
.error { color: var(--danger-fg); min-height: 1.2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- Miki's photo (unchanged decision) */
.miki-side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side); overflow: hidden; background: var(--bg-photo); z-index: 1; }
.miki-side img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* ---------------------------------------------------------------- top bar
   Left to right: menu button · Fortex shield (work side) · Miki AI and her status · company · search · name, Sign out, STOP.
   One line of 60 px at every width; what does not fit narrows to its icon. */
.top { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); height: var(--topbar-h);
       padding: 0 var(--space-5); background: var(--bg-raised); border-bottom: 1px solid var(--border); }
.icon { width: 16px; height: 16px; flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--control-md); padding: 0;
            background: transparent; border-color: transparent; color: var(--text-secondary); }
.icon-btn:hover { background: var(--bg-inset); border-color: var(--border); color: var(--text); }
.icon-btn .icon { width: 20px; height: 20px; }
.phone-only { display: none; }
.brand { display: flex; flex-shrink: 0; gap: var(--space-3); align-items: center; min-width: 0; }   /* Miki's status keeps its words; the search gives way */
.brand > div { min-width: 0; }
.brand img { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; object-position: top; flex: none; }
.brand strong { display: block; font-size: 15px; line-height: 20px; }
.status { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
#mood { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-open { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 1 300px; min-width: var(--control-md); margin-left: auto; padding: 0 var(--space-3);
               overflow: hidden; font-weight: 400; justify-content: flex-start; }
.search-open:disabled { background: var(--bg-inset); border-color: var(--border-strong); color: var(--text-muted); }
.search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.search-open kbd { flex: none; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: 500 11px/18px var(--font-sans); color: var(--text-label); }
.who { display: flex; flex: none; flex-wrap: nowrap; gap: var(--space-3); align-items: center; }
.who-name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
#who-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logout, #nav-logout { display: inline-flex; align-items: center; gap: 6px; }
.initials { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); flex: none;
            background: var(--border-strong); font-size: 12px; font-weight: 700; color: var(--text); }

/* ---------------------------------------------------------------- STOP */
.banner { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center;
          padding: var(--space-3) var(--space-6); background: var(--stop-banner); color: var(--on-accent); font-weight: 600; }
.banner button { color: var(--on-accent); border-color: var(--on-accent); }
#stop { letter-spacing: .04em; }

/* ---------------------------------------------------------------- shell: side menu + content
   The menu keeps its own scroll under the top bar. Groups fold (the current one stays open); two widths, full and rail. */
main { padding: 0; }
#app:not(.hidden) { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); }
.tabs { position: sticky; top: var(--topbar-h); flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); height: calc(100vh - var(--topbar-h));
        overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-2);
        background: var(--bg-raised); border-right: 1px solid var(--border); }
.tabs .group, .group-items { display: flex; flex-direction: column; gap: 2px; }
.group.closed .group-items { display: none; }
.group-label { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 28px; margin: var(--space-3) 0 var(--space-1);
               padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 11px; line-height: 16px; font-weight: 600;
               letter-spacing: .08em; text-transform: uppercase; color: var(--text-label); text-align: left; }
.group-label:hover { background: transparent; color: var(--text-secondary); }
.group-label .icon { width: 14px; height: 14px; transition: transform .15s ease; }
.group.closed .group-label .icon { transform: rotate(-90deg); }
.group.current .group-label .icon { opacity: .4; }
.tabs .group:first-child .group-label { margin-top: 0; }
.tab { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); width: 100%; min-height: 36px;
       padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary);
       text-align: left; font-weight: 400; }
.tab .icon { width: 18px; height: 18px; color: var(--text-muted); }
.tab .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:hover { background: var(--bg-card); color: var(--text); }
.tab.active { background: var(--bg-nav-active); color: var(--text); font-weight: 600; }
.tab.active .icon { color: var(--text); }
.group.current .group-label { color: var(--text-secondary); }
.nav-foot { display: none; }
.scrim { position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: var(--backdrop); }
.content { flex: 1 1 auto; min-width: 0; padding: var(--space-6) var(--space-8) 48px; }
.content:focus { outline: none; }
.content > * { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.page-head { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-6); }
.crumbs { font-size: 13px; color: var(--text-muted); }
@media (min-width: 901px) {      /* the rail: icons and badges, the name as a tooltip; group names become thin lines */
  #app.rail .tabs { flex-basis: var(--rail-width); width: var(--rail-width); padding: var(--space-3) var(--space-2); }
  #app.rail .group-label { display: none; }
  #app.rail .group.closed .group-items { display: flex; }
  #app.rail .group:not(.hidden) ~ .group:not(.hidden) { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
  #app.rail .tab { justify-content: center; min-height: 40px; padding: 0; }
  #app.rail .tab .icon { width: 20px; height: 20px; }
  #app.rail .tab .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #app.rail .tab .badge { position: absolute; top: 1px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tabs, .group-label .icon { transition: none !important; } }

/* ---------------------------------------------------------------- cards */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5);
        margin-bottom: var(--space-4); }
.card > h2:first-child { font-size: 16px; line-height: 22px; }
.narrow { max-width: 380px; margin: 40px auto; }
.empty { text-align: center; padding: 40px; color: var(--text-muted); }
.empty img { width: 72px; height: 72px; border-radius: var(--radius-full); object-fit: cover; object-position: top; }
.hero { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-6); }
.hero h2 { margin: 0 0 var(--space-2); font-size: 28px; line-height: 34px; font-weight: 700; }
.hero p { margin: var(--space-1) 0; }
#hero-summary { font-weight: 600; color: var(--text); }

/* ---------------------------------------------------------------- forms */
label { display: block; margin: 10px 0; font-size: 13px; color: var(--text-secondary); }
label.check { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; flex: none; }
input, textarea, select { width: 100%; min-height: var(--control-md); padding: 8px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--bg-page); color: var(--text); font: inherit; margin-top: var(--space-1); }
select { width: auto; margin: 6px 0; }
input:focus, textarea:focus, select:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 1px var(--focus); }
input[type="checkbox"], input[type="radio"], label.check input { width: auto; min-height: 0; margin: 0; }
input[type="file"] { padding: 6px; }
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.row input, .row select { flex: 1 1 160px; width: auto; margin: 0; }
#kb-form input, #kb-form textarea, #kb-form select, #eng-form input, #eng-form select { margin-bottom: var(--space-2); }
.login { max-width: 420px; margin: 8vh auto; padding: 0 var(--space-4); }
.login h1 { margin-bottom: var(--space-2); }
.login-form { margin: 0; padding: var(--space-6); }
.login-form button[type="submit"] { width: 100%; height: var(--control-lg); margin-top: var(--space-3); }

/* ---------------------------------------------------------------- buttons */
button { font: inherit; min-height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-md);
         border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer; }
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:disabled { background: var(--bg-inset); border-color: var(--border); color: var(--text-muted); cursor: default; }
button.ghost { background: transparent; color: var(--text); border-color: var(--border-strong); font-weight: 500; }
button.ghost:hover { background: var(--bg-inset); }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); font-weight: 700; }
button.danger:hover { filter: brightness(1.08); }
button.link { min-height: 0; padding: 0 var(--space-1); border: 0; background: none; color: var(--link); text-decoration: underline;
              font-size: 12px; font-weight: 500; }
button.tab, button.tab:hover { border: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.actions.wrap button { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; }

/* ---------------------------------------------------------------- pills: one status dictionary */
.meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full);
        border: 1px solid var(--border-strong); color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 500; }
.pill.num { font-family: var(--font-mono); border-color: transparent; padding-left: 0; }
.pill.entity, .pill.cls { border-radius: var(--radius-sm); }
.pill.urgent, .pill.emergency, .pill.sev.high, .pill.dstate.rejected { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; font-weight: 600; }
.pill.sev.critical { background: var(--danger); color: var(--on-accent); border-color: transparent; font-weight: 700; }
.pill.only, .pill.sev.medium, .pill.dstate.awaiting_approval, .pill.cat.recommended { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; font-weight: 600; }
.pill.dstate.approved, .pill.dstate.executing, .pill.sev.low, .pill.sev.info, .pill.cat.observed { background: var(--info-bg); color: var(--info-fg); border-color: transparent; font-weight: 600; }
.pill.dstate.completed, .pill.cat.learned { background: var(--success-bg); color: var(--success-fg); border-color: transparent; font-weight: 600; }
.pill.cat.executed { background: var(--bg-inset); color: var(--text); border-color: transparent; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
         border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; }

/* ---------------------------------------------------------------- inbox items */
.item h3 { margin: var(--space-2) 0 var(--space-1); font-size: 15px; line-height: 22px; }
.conflict { color: var(--warn-fg); }

/* ---------------------------------------------------------------- dialogs */
dialog { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text);
         max-width: 380px; padding: var(--space-6); }
dialog::backdrop { background: var(--backdrop); }
dialog h2, dialog h3 { margin-top: 0; }
dialog menu { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0; margin: var(--space-4) 0 0; }
#stop-dialog { max-width: 520px; }
#stop-dialog ul { padding-left: 18px; }

/* ---------------------------------------------------------------- the Executive Command Center */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.tile { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tile strong { font-size: 28px; line-height: 31px; }
.cc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.cc-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); }
.cc-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cc-col > .card { margin: 0; }
.cc h2 { margin: 0 0 var(--space-2); font-size: 16px; line-height: 22px; }
.cc h3 { margin: 14px 0 6px; font-size: 14px; }
.cc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.cc-head .row { margin: 0; }
.kpi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; margin: 0;
       background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) 18px; color: var(--text); }
.kpi:hover { border-color: var(--border-strong); }
.kpi:disabled { cursor: default; }
.kpi.attention { border-color: var(--warn-bg); } .kpi.critical { border-color: var(--danger); }
.kpi-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.kpi-value { font-size: 28px; line-height: 31px; font-weight: 700; }
.kpi-value.na { color: var(--text-muted); }
.kpi .muted, .kpi .small { color: var(--text-muted); }
.change { color: var(--warn-fg); }
.attention { display: flex; flex-direction: column; gap: var(--space-2); }
.att { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); }
.att:hover { background: var(--bg-inset); }
.att.critical { border-color: var(--danger); background: var(--danger-bg); } .att.high { border-color: var(--danger-bg); } .att.medium { border-color: var(--warn-bg); }
.act { margin: var(--space-1) 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-muted); flex: none; }
.dot.ok { background: var(--success-fg); } .dot.attention, .dot.warn, .dot.idle { background: var(--warn-fg); }
.dot.critical, .dot.down { background: var(--danger); } .dot.info { background: var(--link); }
.dot.unavailable, .dot.unknown, .dot.not_connected { background: transparent; border: 2px solid var(--text-muted); width: 8px; height: 8px; }
details > summary { cursor: pointer; padding: 6px 0; list-style-position: inside; }
.brief-sec p, .status-group p, .alert p { margin: var(--space-1) 0 var(--space-1) 14px; }
.conclusions { border-top: 1px solid var(--border); margin-top: var(--space-3); padding-top: var(--space-2); }
.rec { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px var(--space-3); margin: var(--space-2) 0; background: var(--bg-inset); }
.rec.high { border-color: var(--danger-bg); } .rec.medium { border-color: var(--warn-bg); }
.rec p { margin: 3px 0; }
.missing { border-top: 1px solid var(--border); margin-top: var(--space-3); padding-top: var(--space-2); }
.alert { border-bottom: 1px solid var(--border); padding: 6px 0; }
.history { margin: 6px 0 var(--space-2); }
.decision { margin-bottom: var(--space-4); }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1699px) { .search-open kbd { display: none; } }
@media (max-width: 1500px) { #who-name { display: none; } }   /* the initials stay, the full name is their tooltip */
@media (min-width: 901px) and (max-width: 1300px) {   /* laptops: the photo's panel narrows (the photo itself is the same) */
  :root { --side: clamp(240px, 24vw, 320px); }
}
@media (max-width: 1300px) {      /* laptops beside the photo: one column, menu stays */
  .cc { grid-template-columns: minmax(0, 1fr); }
  .content { padding: var(--space-5) var(--space-6) 40px; }
}
@media (max-width: 1100px) {      /* little room beside the photo: the menu starts as the rail (dashboard.js), the top bar keeps icons */
  .logout-text { display: none; }
  .content { padding: var(--space-5) var(--space-5) 40px; }
}
@media (max-width: 900px) {       /* phones: no photo; the menu opens from the top bar; alerts, decisions and the briefing first */
  .miki-side, .hero { display: none; }
  body { padding-left: 0; }
  .top { padding: 0 var(--space-2); gap: var(--space-2); }
  .who-name, #logout, .search-text, .search-open kbd { display: none; }
  .brand { flex-shrink: 1; gap: var(--space-2); }   /* on phones the status may end in … */
  .wide-only { display: none; } .phone-only { display: inline; }
  #nav-toggle, .search-open { width: var(--control-lg); min-width: var(--control-lg); min-height: var(--control-lg); }
  .search-open { flex: none; justify-content: center; padding: 0; }
  /* the menu is a drawer over a scrim, with the name and Sign out at its foot */
  .tabs { position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-menu); width: min(300px, 86vw); height: auto; padding: var(--space-4) var(--space-3);
          transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: var(--shadow-pop); }
  .tabs.open { transform: none; visibility: visible; transition: transform .2s ease; }
  body.nav-open { overflow: hidden; }
  .tab, .group-label { min-height: var(--control-lg); }
  .nav-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto;
              padding-top: var(--space-3); border-top: 1px solid var(--border); }
  .nav-foot .who-name { display: inline; min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
  .nav-foot button { min-height: var(--control-lg); }
  .ph-tabs { flex-wrap: nowrap; overflow-x: auto; }   /* the inbox's five tabs scroll inside their bar */
  .ph-tabs button { flex: none; }
  .content { padding: var(--space-4) var(--space-3) 32px; }
  .login { max-width: 380px; margin: 40px auto; }
  .cc { display: flex; flex-direction: column; align-items: stretch; }
  .cc-col { display: contents; }
  .cc-alerts { order: 1; } .cc-attention { order: 2; } .cc-kpis { order: 3; } .cc-brief { order: 4; } .cc-activity { order: 5; } .cc-status { order: 6; }
  .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .kpi-alerts { order: -3; } .kpi-decisions { order: -2; } .kpi-priorities { order: -1; }
  .kpi { padding: 10px var(--space-3); } .kpi-value { font-size: 22px; line-height: 26px; }
  button.danger, .actions button { min-height: var(--control-lg); }
}
@media print {
  :root { --bg-page: #ffffff; --bg-raised: #ffffff; --bg-card: #ffffff; --bg-inset: #f5f7fb; --border: #dce2ec; --border-strong: #b9c3d4;
          --text: #0f1729; --text-secondary: #33405a; --text-muted: #56637d; color-scheme: light; }
  .miki-side, .top, .tabs, .scrim, .banner, .actions, #nav-toggle { display: none !important; }
  body { padding-left: 0; }
}

/* Phase 3 charts (dataviz method): one series in the accent, thin rounded columns and bars, hairline grid,
   text in text tokens, a tooltip and a table view. The accent was validated on both themes' card surface. */
.chart { margin: 0 0 var(--space-5); }
.chart figcaption { font-weight: 600; margin-bottom: var(--space-2); color: var(--text); }
.chart svg { width: 100%; max-width: 760px; height: auto; display: block; }
.chart .mark { fill: var(--accent); }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .tick { fill: var(--text-muted); font-size: 11px; }
.chart .value { fill: var(--text); font-size: 11px; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:focus-visible { outline: 2px solid var(--focus); }
.chart-tip { font-size: .82rem; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
             display: inline-block; margin: var(--space-1) 0; color: var(--text); }
.table-view table { border-collapse: collapse; font-size: .82rem; margin-top: var(--space-2); }
.table-view td, .table-view th { border-bottom: 1px solid var(--border); padding: 3px 10px 3px 0; text-align: left; color: var(--text-secondary); }

/* ---------------------------------------------------------------- in-page dialogs and messages (redesign release 1) */
dialog.ask { width: min(480px, calc(100vw - 32px)); }
dialog.ask label { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
dialog.ask label.check { display: flex; gap: var(--space-2); white-space: normal; }   /* a tick sits beside its words */
dialog.ask textarea { min-height: 96px; }
.toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; min-width: min(360px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); white-space: pre-line; }
.toast.error { border-color: var(--danger, #d92d3a); }
.toast.gone { display: none; }
.toast span { flex: 1; }
.toast button { padding: 0 var(--space-2); min-height: 28px; }

/* ---------------------------------------------------------------- components (redesign release 2)
   Page header, card, folded form panel, form grid, register, filter bar, states, accordion and status pill.
   Only views built with them use these classes, so the other views look as before. */
code.big { display: inline-block; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-inset); font-family: var(--font-mono); font-size: 18px; line-height: 26px; letter-spacing: .04em; user-select: all; word-break: break-all; }
.page-head .ph-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; justify-content: space-between; }
.page-head .ph-title { display: flex; flex-direction: column; gap: var(--space-1); }
.page-head .ph-actions:empty { display: none; }
.page-head .ph-purpose { margin: 0; max-width: 72ch; }
.page-head .ph-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ph-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); border-bottom: 1px solid var(--border); }
.ph-tabs button { min-height: var(--control-md); margin-bottom: -1px; padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; color: var(--text-secondary); font-weight: 500; }
.ph-tabs button:hover { background: transparent; color: var(--text); }
.ph-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.ph-tabs .badge { margin-left: var(--space-2); }

.c-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); }
.c-card-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.c-card-head h2 { margin: 0; font-size: 16px; line-height: 22px; }
.c-card-foot { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); }

.fpanel { margin-bottom: var(--space-4); }
.fpanel > .fp-open { margin: 0; }
.fpanel form { margin: 0; }
.fpanel form h2 { margin: 0 0 var(--space-1); font-size: 16px; line-height: 22px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.fgrid .field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fgrid .field.wide { grid-column: 1 / -1; }
.fgrid label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-secondary); }
.fgrid .req { margin-left: var(--space-1); color: var(--text-muted); font-weight: 400; }
.fgrid input, .fgrid select, .fgrid textarea { width: 100%; margin: 0; }
.fgrid textarea { min-height: 96px; resize: vertical; }
.fgrid .hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.fgrid .ferr { margin: 0; font-size: 12px; line-height: 16px; color: var(--danger-fg); }
.fgrid .ferr:empty { display: none; }
.fgrid [aria-invalid="true"] { border-color: var(--danger-fg); }
.fgrid .person-filter { margin-bottom: var(--space-1); }
.fpanel .actions { margin-top: var(--space-4); }
@media (min-width: 1100px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.seg button { min-height: var(--control-sm); padding: 0 var(--space-3); border: 0; border-right: 1px solid var(--border-strong); border-radius: 0;
  background: transparent; color: var(--text-secondary); font-weight: 500; font-size: 13px; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--bg-inset); color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--bg-nav-active); color: var(--text); font-weight: 600; }
.seg .n { margin-left: 6px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fbar select, .fbar input { width: auto; min-height: var(--control-sm); margin: 0; padding: 4px 10px; font-size: 13px; }
.fbar input[type="search"] { flex: 1 1 200px; max-width: 320px; }

.reg { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.reg th { position: sticky; top: var(--topbar-h); z-index: 1; padding: 0; background: var(--bg-raised); border-bottom: 1px solid var(--border);
  text-align: left; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-label); }
.reg th:first-child { border-top-left-radius: var(--radius-lg); } .reg th:last-child { border-top-right-radius: var(--radius-lg); }
.reg th > span, .reg th > button { display: block; padding: 10px var(--space-3); }
.reg th > button { width: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.reg th > button:hover { color: var(--text); background: transparent; }
.reg th[aria-sort="ascending"] > button::after { content: " ↑"; } .reg th[aria-sort="descending"] > button::after { content: " ↓"; }
.reg td { padding: 10px var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.reg tbody tr:last-child td { border-bottom: 0; }
.reg tr.reg-row { cursor: pointer; }
.reg tr.reg-row:hover td { background: var(--bg-inset); }
.reg tr.reg-row.open td { border-bottom-color: transparent; background: var(--bg-inset); }
.reg tr.reg-detail td { padding: 0 var(--space-3) var(--space-4) 44px; background: var(--bg-inset); }
.reg .reg-detail p { margin: var(--space-1) 0; white-space: pre-line; }
.reg .reg-detail td > :first-child { margin-top: 0; }
.reg .c-toggle { width: 32px; padding-right: 0; }
.reg .c-actions { width: 1%; white-space: nowrap; text-align: right; }
.reg .c-actions .actions { margin: 0; justify-content: flex-end; flex-wrap: nowrap; }
.reg .c-wide { width: 50%; }
.reg td:not(.c-wide) { white-space: nowrap; }
.toggle { position: relative; width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; }
.toggle:hover { background: var(--bg-nav-active); }
.toggle::before { content: ""; position: absolute; left: 8px; top: 7px; width: 6px; height: 6px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); }
.toggle[aria-expanded="true"]::before { left: 9px; top: 6px; transform: rotate(45deg); }
.more { position: relative; display: inline-block; }
.more > summary { list-style: none; display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: var(--bg-inset); }
.more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-menu); display: flex; flex-direction: column; min-width: 180px; padding: var(--space-1);
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.more-menu button { justify-content: flex-start; min-height: var(--control-sm); border: 0; background: transparent; color: var(--text); font-weight: 500; text-align: left; font-size: 13px; }
.more-menu button:hover { background: var(--bg-inset); }
.more-menu button.danger { color: var(--danger-fg); background: transparent; }

.state-loading { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.skeleton { height: 18px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-inset), var(--bg-nav-active), var(--bg-inset)); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
.skeleton:nth-child(2n) { width: 82%; } .skeleton:nth-child(3n) { width: 64%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.state-error { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; border-color: var(--danger); background: var(--danger-bg); }
.state-error p { margin: 0; color: var(--danger-fg); }
.empty .actions { justify-content: center; }
.state-stale { display: inline-flex; align-items: center; gap: 6px; color: var(--warn-fg); font-size: 12px; line-height: 16px; }
.state-off { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-2); border: 1px dashed var(--text-muted); border-radius: var(--radius-full); color: var(--text-muted); font-size: 12px; line-height: 16px; }

.acc { margin-bottom: var(--space-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.acc > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); list-style: none; font-size: 16px; line-height: 22px; font-weight: 600; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: ""; width: 6px; height: 6px; margin-right: var(--space-1); border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); }
.acc[open] > summary::before { transform: rotate(45deg); }
.acc > summary .n { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.acc-body { padding: 0 var(--space-4) var(--space-4); }
.acc-body > .reg { border-radius: var(--radius-md); }

.pill.tone-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; font-weight: 600; }
.pill.tone-ok { background: var(--success-bg); color: var(--success-fg); border-color: transparent; font-weight: 600; }
.pill.tone-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; font-weight: 600; }
.pill.tone-info { background: var(--info-bg); color: var(--info-fg); border-color: transparent; font-weight: 600; }
.pill.tone-muted { background: var(--bg-inset); color: var(--text-muted); border-color: transparent; }

@media (max-width: 900px) {      /* phones: each register row is a compact card */
  .reg, .reg tbody, .reg tr, .reg td { display: block; width: auto; }
  .reg { background: transparent; border: 0; }
  .reg thead { display: none; }
  .reg tr.reg-row { position: relative; margin-top: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) 40px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .reg tr.reg-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
  .reg tr.reg-row:hover td, .reg tr.reg-row.open td { background: transparent; }
  .reg tr.reg-row.open { background: var(--bg-inset); }
  .reg td, .reg td.c-wide { width: auto; padding: 2px 0; border: 0; white-space: normal; }
  .reg td[data-label]::before { content: attr(data-label) " · "; color: var(--text-label); font-size: 12px; }
  .reg td.c-wide::before, .reg td.c-title::before { content: none; }
  .reg td.c-wide, .reg td.c-title { font-weight: 500; }
  .reg .c-toggle { position: absolute; left: 8px; top: 10px; width: auto; }
  .reg .c-actions { width: auto; text-align: left; padding-top: var(--space-2); }
  .reg .c-actions .actions { justify-content: flex-start; flex-wrap: wrap; }
  .reg .actions.wrap button, .more > summary, .more-menu button, .fpanel .fp-open, .seg button, .fbar select, .fbar input, .ph-tabs button { min-height: var(--control-lg); }
  .more-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; padding: var(--space-3) var(--space-3) max(12px, env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; }   /* a bottom sheet */
  .reg tr.reg-detail td { padding: 0 var(--space-3) var(--space-3) 40px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .fbar input[type="search"] { max-width: none; }
  .c-card { padding: var(--space-4); }
}

/* ---- release 7 */
.fgrid .field:has(> input[type="checkbox"]) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.fgrid input[type="checkbox"] { width: auto; min-height: 0; }
.fgrid input[type="file"] { padding: var(--space-2); }
.p-strip { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.p-strip .kpi { cursor: default; }
.due { display: inline-flex; flex-direction: column; gap: 2px; }
.due-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; }
.due-flag.late { color: var(--danger-fg); } .due-flag.soon { color: var(--warn-fg); }
.finding .pill { margin-right: var(--space-1); text-transform: capitalize; }
@media (min-width: 901px) {   /* eleven columns: the table scrolls inside its box, never the page */
  #projects { overflow-x: auto; }
  #projects .reg th { top: 0; }   /* the box is the header's scroll parent now: no top-bar offset inside it */
  #projects .reg .c-wide { min-width: 220px; }
}

/* ---- release 5 */
/* Command Center header: the greeting is the page title (24/30); the phone hides it with the old hero. */
.cc-header { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: 0; margin-bottom: var(--space-6); }
.cc-header h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; }
.cc-header p { margin: 0; }
.cc-header .crumbs { margin: 0; }
/* KPI cards: a source that is not connected is a grey outline, never a zero; a stale source says so in amber. */
.kpi.off { border-style: dashed; }
.kpi.off .state-off { align-self: flex-start; margin: 5px 0; font-size: 13px; }
.kpi.stale { border-color: var(--warn-fg); }
.kpi .state-stale { color: var(--warn-fg); }
.cc-head h2 { margin: 0; }
.cc-head h2:focus { outline: none; }
.cc > section[aria-busy="true"] .state-loading, .cc-col > section[aria-busy="true"] .state-loading { border: 0; padding: 0; margin: 0; }
.cc-kpis > .state-loading, .cc-kpis > .state-error { grid-column: 1 / -1; }
/* The note above a list a KPI card opened narrowed. */
.only-note { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--info-bg); border-radius: var(--radius-md);
  background: var(--bg-inset); font-size: 13px; }
.only-note button { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; }
/* The form dialogs (askForm): the form grid, one column. */
dialog.ask-form .fgrid { grid-template-columns: minmax(0, 1fr); }
dialog.ask-form .fgrid label { display: block; margin: 0; }
/* The approval inbox and Decisions registers. */
#view-inbox .reg td.c-title .pill { margin-left: var(--space-1); }
#view-inbox .conflict { color: var(--warn-fg); font-weight: 600; }
#decisions .reg-detail h3 { margin: var(--space-3) 0 var(--space-1); font-size: 13px; color: var(--text-label); }
#decisions .reg-detail strong { font-weight: 600; }
/* Beside the menu and Miki's photo the content is about 720 px wide, too narrow for the inbox's and Decisions' columns
   with Approve and Reject in view: there their rows become the phone's compact cards, whatever the window's width. */
#decisions, #view-inbox > div { container: reg / inline-size; }
@container reg (max-width: 940px) {
  .reg, .reg tbody, .reg tr, .reg td { display: block; width: auto; }
  .reg { background: transparent; border: 0; }
  .reg thead { display: none; }
  .reg tr.reg-row { position: relative; margin-top: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) 40px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .reg tr.reg-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
  .reg tr.reg-row:hover td, .reg tr.reg-row.open td { background: transparent; }
  .reg tr.reg-row.open { background: var(--bg-inset); }
  .reg td, .reg td.c-wide { width: auto; padding: 2px 0; border: 0; white-space: normal; }
  .reg td[data-label]::before { content: attr(data-label) " · "; color: var(--text-label); font-size: 12px; }
  .reg td.c-wide::before, .reg td.c-title::before { content: none; }
  .reg td.c-wide, .reg td.c-title { font-weight: 500; }
  .reg .c-toggle { position: absolute; left: 8px; top: 10px; width: auto; }
  .reg .c-actions { width: auto; text-align: left; padding-top: var(--space-2); }
  .reg .c-actions .actions { justify-content: flex-start; flex-wrap: wrap; }
  @media (min-width: 901px) { .reg .more-menu { left: 0; right: auto; } }   /* "More" now sits on the left; the phone keeps its bottom sheet */
  .reg tr.reg-detail td { padding: 0 var(--space-3) var(--space-3) 40px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}
@media (max-width: 900px) {
  .only-note button { min-height: var(--control-lg); }
}

/* ---- release 6
   Tasks and Technicians. Their registers have many short columns, so text may wrap there instead of widening the page;
   a tick's error message goes below it (the tick itself: release 7); the two Technicians task panels share a row while both are folded. */
#tasks .reg td:not(.c-actions), #tech-asset-list .reg td:not(.c-actions), #tech-task-list .reg td:not(.c-actions) { white-space: normal; }
#tasks .reg td .pill, #tech-asset-list .reg td .pill { white-space: nowrap; }
#tasks .reg .c-wide { width: 34%; }
/* Beside the menu and Miki's photo the eight columns and their buttons do not fit: the task register becomes the
   compact cards there, as the inbox and Decisions do (release 5), and the title takes the card's whole width. */
#tasks { container: reg / inline-size; }
@container reg (max-width: 940px) { #tasks .reg .c-wide { width: auto; } }
@media (max-width: 900px) { #tasks .reg .c-wide { width: auto; } }
.fgrid .field:has(> input[type="checkbox"]) .ferr { flex-basis: 100%; }
.fp-row { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.fp-row > div:has(> .fpanel > form:not(.hidden)) { flex-basis: 100%; }
#tech-try-result:empty { display: none; }
#tech-skills > h2 { margin: var(--space-5) 0 var(--space-3); font-size: 16px; line-height: 22px; }

/* ---- release 8 */
/* Knowledge, Memory and Technical Intelligence (spec 3.12–3.14). */
.reg tr.reg-detail > td { white-space: normal; }           /* forms and folds opened inside a row wrap like the page */
/* Beside the menu and Miki's photo these registers do not fit either: compact cards there, by the inbox's rule (release 5). */
#kb-list, #eng-list, #memory-results, #memory-sections .acc-body, #ti-review .acc-body, #ti-makers { container: reg / inline-size; }
.panels { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.panels > .fpanel { margin: 0; }
.panels > .fpanel:has(> form:not(.hidden)) { flex: 1 1 100%; }   /* an unfolded form takes the whole row */
.mem-strip { margin-bottom: var(--space-3); }
.mem-strip .kpi { cursor: default; }
.mem-search { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.mem-search input, .mem-search select { width: auto; margin: 0; }
.mem-search input[type="search"] { flex: 1 1 260px; }
.mem-search .mem-date { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 13px; color: var(--text-secondary); }
#memory-sections .acc-body > .muted:first-child { margin-top: 0; }
.ti-results .c-card { margin: var(--space-3) 0 0; }
.ti-results .meta { margin-bottom: var(--space-1); }
.ti-reading { margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-inset); }
.ti-reading h3 { margin: 0 0 var(--space-1); font-size: 14px; line-height: 20px; }
.ti-details { padding-top: var(--space-1); }
.ti-details .panels { margin-top: var(--space-3); }
.ti-details .acc { margin-bottom: var(--space-2); background: var(--bg-card); }
@media (max-width: 900px) {
  .mem-search > *, .mem-search input[type="search"] { flex: 1 1 100%; }
  .mem-search .mem-date input { flex: 1; }
  .panels > .fpanel { flex: 1 1 100%; }
}

/* ---- release 9 */
/* Settings, Administration and Staff oversight: folded forms inside a card, the coaching switch, the chat side panel and
   the lists in a dialog (the tick in the form grid is release 7's, the row of folded forms release 6's .fp-row). Beside the
   menu and Miki's photo their registers become compact cards, by the inbox's rule (release 5). */
#people, #frozen, #keys, #config .c-card > div:not(.c-card-head), #costs, #calculators .acc-body, #staff-devices, #locations, #staff-chats { container: reg / inline-size; }
#staff-chats .reg td:not(.c-actions) { white-space: normal; }   /* a group's members wrap in its card */
.card .fpanel form.c-card { margin: 0; padding: 0; border: 0; background: transparent; }
.card .fpanel { margin: var(--space-3) 0 0; }
.fgrid .field .actions { margin-top: 0; }
#manage-form, #fortex-form { margin-top: var(--space-3); }
#view-admin > [role="tabpanel"] > h2 { margin-top: var(--space-5); }
#view-admin > [role="tabpanel"] > h2:first-child { margin-top: 0; }
#view-admin .c-card .reg { margin-top: var(--space-2); }
#view-settings .acc-body h3 { font-size: 14px; }
#view-settings .acc-body > .reg, #view-oversight .reg { margin-top: var(--space-2); }
form.birth { max-width: 520px; }
form.birth input { flex: 1 1 160px; }
button.switch { display: inline-flex; align-items: center; gap: var(--space-2); }
button.switch::before { content: ""; flex: none; width: 30px; height: 18px; border-radius: var(--radius-full); background: radial-gradient(circle at 9px 50%, var(--text-muted) 5px, transparent 6px), var(--bg-inset); border: 1px solid var(--border-strong); }
button.switch[aria-checked="true"]::before { background: radial-gradient(circle at 21px 50%, var(--on-accent) 5px, transparent 6px), var(--accent); border-color: var(--accent); }
.state-locked { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.state-locked p { margin: 0; }
dialog.side-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(520px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh;
  padding: 0 var(--space-5) var(--space-5); border-width: 0 0 0 1px; border-radius: 0; overflow-y: auto; }
dialog.side-panel .sp-head { position: sticky; top: 0; display: flex; gap: var(--space-3); align-items: center; justify-content: space-between;
  margin: 0 0 var(--space-2); padding: var(--space-4) 0 var(--space-3); background: var(--bg-card); border-bottom: 1px solid var(--border); }
dialog.side-panel .sp-head h2 { margin: 0; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.chat-line { margin: var(--space-2) 0; overflow-wrap: anywhere; }
dialog.ask .list-lines { max-height: 50vh; overflow-y: auto; margin: var(--space-2) 0 0; padding-left: 18px; font-variant-numeric: tabular-nums; }
dialog.ask .list-lines li { margin: 2px 0; }
@media (max-width: 900px) {
  dialog.side-panel { width: 100vw; border: 0; }
  .fgrid .field .actions button, #manage-password, #manage-access, form.birth button { min-height: var(--control-lg); }
}
#benchmarks:empty { display: none; }

/* ---- release 10 */
/* The read-only views: overview grids, figure groups, and registers whose text wraps instead of widening the page. */
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ov-grid > .c-card { margin: 0; min-width: 0; }
.ov-grid > .ov-wide { grid-column: 1 / -1; }
@media (max-width: 1099px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
.figs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-2); }
.figs > .kpi { margin: 0; cursor: default; background: var(--bg-inset); }
.figs > .kpi:hover { border-color: var(--border); }
#monitor-perf .cc-kpis { margin-bottom: var(--space-4); }      /* the nine figures, then the AI cost card */
:is(#view-autonomy, #view-activity, #view-overview, #view-communications, #view-intel, #view-monitor) .reg td:not(.c-actions) { white-space: normal; }
/* Beside the menu and Miki's photo, and in the half-width cards of the 2 x 2 grid, these registers do not fit: compact
   cards there, by the inbox's rule (release 5). */
#activity-list, :is(#view-autonomy, #view-overview, #view-communications, #view-intel, #view-monitor) .c-card > div:not(.c-card-head) { container: reg / inline-size; }
.reg .check { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.reg .check .error { min-height: 0; }
.fbar .fdate { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-label); font-size: 13px; }
.list-foot { align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.toast.warn { border-color: var(--warn-fg); }
.login-form button[type="submit"]:disabled { opacity: .7; cursor: progress; }
@media (max-width: 900px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- release 4 */
/* The command bar: one input, grouped results, the chosen one marked; full width on phones. */
dialog.cmd { width: min(640px, calc(100vw - 32px)); max-width: none; margin-top: 12vh; padding: 0; overflow: hidden; }
dialog.cmd input[type=search] { width: 100%; height: 52px; padding: 0 var(--space-4); border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; background: transparent; color: var(--text); font-size: 16px; }
dialog.cmd input[type=search]:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--focus); }
.cmd-list { max-height: min(60vh, 480px); overflow-y: auto; padding: var(--space-2) 0; }
.cmd-head { padding: var(--space-2) var(--space-4) var(--space-1); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-label);
  text-transform: uppercase; letter-spacing: .04em; }
.cmd-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-md);
  padding: var(--space-2) var(--space-4); cursor: pointer; }
.cmd-opt[aria-selected=true] { background: var(--bg-nav-active); box-shadow: inset 2px 0 0 var(--accent); }
.cmd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-meta { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.cmd-wait, .cmd-none { padding: var(--space-2) var(--space-4); margin: 0; }
.cmd-foot { margin: 0; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); }
.cmd-hit { outline: 2px solid var(--focus); outline-offset: 2px; }
/* What the command bar scrolls to starts below the sticky top bar, not under it. */
.view .fpanel, .view details, .view form { scroll-margin-top: calc(var(--topbar-h) + var(--space-3)); }
@media (max-width: 900px) {
  dialog.cmd { width: calc(100vw - 16px); margin-top: var(--space-2); }
  .cmd-opt { min-height: var(--control-lg); }
  .cmd-list { max-height: calc(100vh - 160px); }
  .cmd-foot { display: none; }   /* no arrow keys on a phone */
}

/* ---- v0.7.81 notification centre */
/* The bell sits between the search and the name. Its panel drops down under it on wide screens and is a full-width sheet
   under the top bar on phones. Unread: a dot and a bold title, and the word for a screen reader; never colour alone. */
.bell { position: relative; flex: none; }
#bell-open { position: relative; }
#bell-open .badge { position: absolute; top: 0; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.notices { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-menu); display: flex; flex-direction: column;
  width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 560px); background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.notices:focus { outline: none; }
.notices-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border); }
.notices-head h2 { margin: 0; font-size: 16px; line-height: 22px; }
.notices-head button { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; }
.notices-list { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) 0; }
.notices-group h3 { margin: var(--space-2) var(--space-4) var(--space-1); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-label);
  text-transform: uppercase; letter-spacing: .04em; }
.notices-items { list-style: none; margin: 0; padding: 0; }
.notice { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-height: 0; padding: var(--space-2) var(--space-4); border: 0;
  border-radius: 0; background: transparent; color: var(--text-secondary); font-weight: 400; text-align: left; }
.notice:hover, .notice:focus-visible { background: var(--bg-inset); }
.notice:focus-visible { outline-offset: -2px; }
.notice > .icon { margin-top: 2px; color: var(--text-muted); }
.notice-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.notice-title { color: var(--text); overflow-wrap: anywhere; }
.notice.unread .notice-title { font-weight: 600; }
.notice-body { font-size: 13px; line-height: 18px; color: var(--text-secondary); overflow-wrap: anywhere; }
.notice-meta { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.notice-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: var(--radius-full); background: var(--accent); }
.notices .empty { margin: 0; padding: var(--space-5); border: 0; background: transparent; }
.notices .empty img { width: 48px; height: 48px; }
.notices .state-loading, .notices .state-error { margin: var(--space-2) var(--space-4); }
.notices-more { margin: var(--space-2) var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {   /* phones: a full-width sheet under the top bar, 44 px targets */
  #bell-open { width: var(--control-lg); min-width: var(--control-lg); min-height: var(--control-lg); }
  .notices { position: fixed; top: var(--topbar-h); left: 0; right: 0; width: auto; max-height: calc(100vh - var(--topbar-h));
    border-right: 0; border-left: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .notice { min-height: var(--control-lg); padding: var(--space-3) var(--space-4); }
  .notices-head button, .notices-more { min-height: var(--control-lg); }
}

/* ---- v0.7.81 staffedit */
/* Manage staff member: the person's roles as a register (compact cards beside the menu, as the other admin lists), and
   removing them set apart under a red line. */
#manage-roles { container: reg / inline-size; }
#manage-remove-box { margin-top: var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--danger); }
#manage-remove-box h3 { color: var(--danger-fg); }
@media (max-width: 900px) {
  #manage-login, #manage-role-add { min-height: var(--control-lg); }
}