/* The Orchestrator (OneNine Fleet's console) in OneNine Finance's look, proposal 7 (Ferdinand, 29 October 2026): a navy
   sidebar with a soft butter tint for the page you are on, light content, white panels with hairlines, tabular figures,
   Instrument Serif only for page titles. The fonts are not shipped here (the console loads nothing from outside):
   Instrument Sans and Serif where installed, else the system's own. */
:root { --side:#121D29; --side-line:#233345; --side-text:#B9C6D3; --side-mute:#6F8092; --side-icon:#8496A8; --butter:#FFF2B5;
  --bg:#F6F7F9; --panel:#FFFFFF; --line:#E6E9EE; --line-2:#EEF0F3; --ink:#0F1B26; --text:#2B3A48; --soft:#5B6B7A; --mute:#7A8896;
  --blue:#1F5F8B; --ok:#2E6B45; --ok-bg:#E3F1E7; --warn:#7A5A10; --warn-bg:#FFF2C7; --bad:#9B3A27; --bad-bg:#FBE3DD;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--blue); text-decoration:none; } a:hover { color:var(--ink); }

/* ---------------------------------------------------------------- the frame */
body.app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
.side { position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--side); color:var(--side-text); padding:20px 12px;
  display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 12px 22px; color:#FFFFFF; }
.brand:hover { color:#FFFFFF; }
.brand b { display:block; font-weight:600; font-size:15px; letter-spacing:-.01em; }
.brand small { display:block; font-size:12px; color:var(--side-mute); }
.mark { width:28px; height:28px; border-radius:8px; background:var(--butter); display:flex; align-items:center; justify-content:center; }
.side-label { margin:16px 12px 6px; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--side-mute); }
.side-nav { display:grid; gap:1px; }
.side-nav a { display:flex; align-items:center; gap:12px; height:36px; padding:0 12px; border-radius:8px; color:var(--side-text); font-size:14px; }
.side-nav a:hover { background:rgba(255,255,255,.05); color:#FFFFFF; }
.side-nav a[aria-current="page"] { background:rgba(255,242,181,.10); color:var(--butter); font-weight:500; }
.side-nav svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--side-icon); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.side-nav a:hover svg { stroke:#FFFFFF; } .side-nav a[aria-current="page"] svg { stroke:var(--butter); }
.side-foot { margin-top:auto; padding:16px 12px 4px; border-top:1px solid #1E2B3A; display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--side-icon); }
.side-foot .who { color:#E6ECF2; word-break:break-all; }
.linkish { border:0; background:none; padding:0; color:var(--side-icon); font:inherit; cursor:pointer; text-align:left; }
.linkish:hover { color:#FFFFFF; }
.main { min-width:0; }
.content { padding:32px 32px 64px; max-width:none; }
.wrap { max-width:1180px; margin:0 auto; padding:24px 16px 64px; }

/* ---------------------------------------------------------------- type */
.kicker { font-size:13px; color:var(--mute); margin:0 0 6px; letter-spacing:0; text-transform:none; }
h1 { font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.05; letter-spacing:-.01em; color:var(--ink); margin:0 0 20px; }
h2 { font-size:15px; font-weight:600; color:var(--ink); margin:32px 0 10px; letter-spacing:-.005em; }
.soft { color:var(--soft); } p.soft { max-width:72ch; }
.mono { font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:12px; word-break:break-all; color:var(--soft); }

/* ---------------------------------------------------------------- key figures: one panel split by hairlines */
.counts { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); background:var(--panel); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin:0 0 24px; }
.counts div { padding:18px 22px 16px; border-right:1px solid var(--line-2); font-size:11.5px; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mute); display:flex; flex-direction:column-reverse; gap:6px; }
.counts div:last-child { border-right:0; }
.counts div b { display:block; font-family:var(--sans); font-weight:500; font-size:28px; line-height:1.1; letter-spacing:-.02em; color:var(--ink);
  text-transform:none; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- tables in white panels */
.tw { overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums; }
th { text-align:left; font-weight:500; font-size:12px; color:var(--mute); padding:12px 12px 9px; border-bottom:1px solid var(--line); background:#FBFBFC; }
td { padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:top; color:var(--text); }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#FAFBFC; }

/* ---------------------------------------------------------------- states */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:2px 9px; border-radius:999px; white-space:nowrap; background:var(--line-2); color:var(--soft); }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.up,.applied,.ok { background:var(--ok-bg); color:var(--ok); }
.attention,.waiting,.held { background:var(--warn-bg); color:var(--warn); }
.not-heard-from,.rolled_back,.failed,.refused,.revoked,.bad { background:var(--bad-bg); color:var(--bad); }
.not-enrolled,.no-report-yet,.idle,.unknown { background:var(--line-2); color:var(--soft); }

/* ---------------------------------------------------------------- forms and buttons */
form.inline { display:inline; }
button { font:inherit; font-size:13px; font-weight:500; height:34px; border:1px solid var(--side); background:var(--side); color:#FFFFFF; padding:0 14px;
  border-radius:8px; cursor:pointer; }
button:hover { background:#1E2D3E; }
.side button.linkish, button.linkish { height:auto; background:none; border:0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline:2px solid #CB6700; outline-offset:2px; }
input, select, textarea { font:inherit; font-size:13.5px; height:34px; padding:0 10px; border:1px solid #DCE1E7; border-radius:8px; background:#FFFFFF; color:var(--ink); }
textarea { height:auto; padding:10px; width:100%; max-width:820px; line-height:1.5; }
.add { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-top:12px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; max-width:880px; }
.add label { display:grid; font-size:12px; font-weight:500; color:var(--soft); gap:4px; }
.flash { background:var(--warn-bg); color:var(--warn); padding:10px 14px; border-radius:8px; margin-bottom:18px; font-size:13.5px; }
.key { font-family:ui-monospace,Menlo,monospace; font-size:16px; background:var(--butter); color:var(--ink); padding:12px 16px; border-radius:8px; word-break:break-all; }

/* ---------------------------------------------------------------- sign in */
body.bare { background:var(--bg); }
.login { max-width:380px; margin:14vh auto; display:grid; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; }
.login h1 { font-size:34px; margin:0 0 4px; }
.login label { display:grid; gap:4px; font-size:12px; font-weight:500; color:var(--soft); }
.login a.google { display:flex; align-items:center; justify-content:center; height:42px; border-radius:8px; background:var(--side); color:#FFFFFF; font-weight:500; }
.login a.google:hover { background:#1E2D3E; color:#FFFFFF; }
.login form { display:grid; gap:12px; border-top:1px solid var(--line-2); padding-top:14px; }

/* ---------------------------------------------------------------- tickets */
.msg { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; max-width:820px; margin:10px 0; }
.msg.ours { background:#F3F7FB; border-color:#DCE6F0; }
.msg .text { white-space:pre-wrap; margin:4px 0 0; color:var(--text); }

@media (max-width: 860px) {
  body.app { grid-template-columns:minmax(0,1fr); }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; }
  .side-label { display:none; } .side-nav { display:flex; gap:4px; } .brand { padding:4px 8px; }
  .side-foot { margin:0 0 0 auto; border:0; padding:0; flex-direction:row; gap:12px; }
  .content { padding:20px 16px 48px; }
}
.small { font-size:12.5px; }

/* Tables fit their panel (29 Oct 2026): text wraps, only short values stay on one line (unit ids, chips). */
td { white-space:normal; }
td:first-child, .pill, .mono { white-space:nowrap; }
.pill { margin:1px 4px 1px 0; }

/* Emergency and settings on a unit's page (shown, not active yet; docs/PLAN-SUPPORT.md section 10) */
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin:8px 0 8px; }
.tool { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.tool b { color:var(--ink); font-weight:600; }
.tool .soft { font-size:13px; }
.tool button { margin-top:auto; align-self:flex-start; background:#EEF0F3; color:var(--mute); border-color:#E1E5EA; cursor:not-allowed; }

/* An info icon after a row's name: a click opens what it means (no script; docs/PLAN-SUPPORT.md) */
.info { display:inline-block; position:relative; vertical-align:middle; margin-left:6px; }
.info summary { list-style:none; cursor:pointer; display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; border-radius:50%; }
.info summary::-webkit-details-marker { display:none; }
.info summary svg { width:15px; height:15px; fill:none; stroke:var(--mute); stroke-width:1.4; stroke-linecap:round; }
.info summary:hover svg, .info[open] summary svg { stroke:var(--blue); }
.info p { position:absolute; z-index:5; left:0; top:24px; width:320px; margin:0; padding:10px 12px; background:var(--side); color:#E6ECF2;
  border-radius:8px; font-size:12.5px; line-height:1.5; white-space:normal; box-shadow:0 8px 24px rgba(15,27,38,.18); }
table.health td:first-child { width:260px; color:var(--ink); }

/* Software versions (29 Oct 2026) */
.notes { display:grid; gap:12px; max-width:880px; }
.note { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; }
.note header { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.note header b { color:var(--ink); font-size:15px; }
.note p { margin:0; color:var(--text); line-height:1.6; }
.note.next { background:transparent; border-style:dashed; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.today { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.today .chip { font-size:12.5px; padding:5px 12px; border-radius:999px; background:var(--panel); border:1px solid var(--line); color:var(--text); text-decoration:none; }
.today .chip.bad { border-color:#d9a3a3; color:#8a2f2f; }
.today .chip.ok { color:var(--soft); }
.search { margin:16px 0 8px; }
.search input { font:inherit; padding:8px 12px; width:min(360px,100%); border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.lines { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:8px 0 4px; }
.lines figure { margin:0; padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.lines figcaption { font-size:12px; color:var(--soft); margin-bottom:6px; }
.lines svg { width:100%; height:44px; display:block; }
.lines polyline { fill:none; stroke:var(--ink); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.rollout td, .rollout th { font-size:12.5px; padding:4px 10px; }
.note-box { max-width:880px; }
.add textarea { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-width:320px; }

.stale { margin:0 0 14px; padding:12px 16px; border:1px solid #d9a3a3; background:#fbeaea; color:#8a2f2f; border-radius:12px; font-size:13.5px; }

.side-foot .ver { display:block; font-size:11.5px; opacity:.7; }

.place { white-space:nowrap; }
.pl { display:inline-flex; vertical-align:middle; margin-right:6px; }
.pl svg { width:20px; height:20px; stroke:#111; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pl-cloud svg path { fill:#4a90d9; } .pl-spark svg rect { fill:#f2b705; } .pl-client svg rect { fill:#111; }
.pl svg path { fill:none; } .pl-cloud svg path { fill:#4a90d9; }

/* ---------------------------------------------------------------- Units as a dashboard (30 Oct 2026) */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin:14px 0 18px; }
.tile { display:flex; flex-direction:column; gap:2px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px 12px;
  font:inherit; color:var(--text); cursor:pointer; text-decoration:none; min-height:104px; }
.tile:hover { border-color:#C9D0D9; }
.tile.on { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; }
.tile .k { font-size:12px; color:var(--soft); }
.tile b { font:400 34px/1.1 var(--serif); color:var(--ink); letter-spacing:-.01em; }
.tile b small { font:500 14px var(--sans); color:var(--soft); }
.tile .s { font-size:12px; color:var(--mute); margin-top:auto; }
.tile.ok b { color:var(--ok); } .tile.bad b { color:var(--bad); }
.tile.spark { cursor:default; } .tile.spark:hover { border-color:var(--line); }
.tile.spark svg { width:100%; height:28px; margin:2px 0; } .tile.spark polyline { fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.bar-tools { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin:12px 0; }
.chips { display:flex; align-items:center; gap:4px; }
.chips .cl { font-size:12px; color:var(--soft); margin-right:4px; }
.chip-f { font:500 12.5px var(--sans); padding:4px 11px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; }
.chip-f:hover { border-color:#C9D0D9; } .chip-f.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.sortl { font-size:12px; color:var(--soft); display:flex; align-items:center; gap:6px; }
.sortl select { font:inherit; font-size:13px; padding:4px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); }
.bar-tools .search { margin:0 0 0 auto; }
table.units td { vertical-align:middle; }
table.units .sub { display:block; font-size:11.5px; line-height:1.3; margin-top:1px; }
table.units .cn { font-weight:600; font-size:14.5px; color:var(--ink); }
table.units tr.u:hover td { background:#FAFBFC; }
table.units tr.u[data-prio="0"] td:first-child, table.units tr.u[data-prio="1"] td:first-child { box-shadow:3px 0 0 var(--bad) inset; }
.bar { display:inline-flex; align-items:center; gap:8px; }
.bar svg { width:64px; height:8px; } .bar .bg { fill:var(--line-2); } .bar .fg { fill:var(--ok); }
.bar.is-warn .fg { fill:#C79A1B; } .bar.is-bad .fg { fill:var(--bad); }
.bar b { font-weight:500; font-size:12.5px; color:var(--soft); min-width:34px; }
td.tg { width:34px; text-align:right; }
button.more { background:none; border:0; padding:4px; border-radius:6px; cursor:pointer; color:var(--soft); }
button.more:hover { background:var(--line-2); }
button.more svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .12s; }
button.more.open svg { transform:rotate(90deg); }
tr.d td { background:#FAFBFC; padding:10px 16px 14px; }
dl.facts { display:flex; flex-wrap:wrap; gap:10px 32px; margin:0; }
dl.facts div { min-width:110px; } dl.facts dt { font-size:11.5px; color:var(--mute); } dl.facts dd { margin:0; font-size:13.5px; color:var(--ink); }
.empty { padding:18px 4px; }
/* the global button rule (dark, 34 px, dark on hover) must not reach the filter chips, tiles and the details toggle */
button.chip-f, button.tile, button.more { height:auto; }
button.chip-f { background:var(--panel); color:var(--text); padding:4px 11px; }
button.chip-f:hover { background:#F1F3F6; border-color:#C9D0D9; }
button.chip-f.on, button.chip-f.on:hover { background:var(--ink); border-color:var(--ink); color:#fff; }
button.tile { background:var(--panel); color:var(--text); padding:14px 16px 12px; border:1px solid var(--line); }
button.tile:hover { background:#FAFBFC; border-color:#C9D0D9; }
button.tile.on, button.tile.on:hover { border-color:var(--ink); }
button.more { background:none; color:var(--soft); border:0; padding:4px; }
button.more:hover { background:var(--line-2); }
tr.u.stale .bar { opacity:.35; }
.info-block { margin:8px 0 14px; font-size:13.5px; }

/* What fleet-watch sees (30 Oct 2026), and what a person wrote, given back on an error page. */
.watchbar { margin:0 0 14px; padding:10px 14px; border-radius:12px; font-size:13.5px; }
.watchbar.warn { background:var(--warn-bg); color:var(--warn); }
.watchbar.bad { background:var(--bad-bg); color:var(--bad); }
.watchbar a { color:inherit; text-decoration:underline; }
textarea.kept { display:block; width:100%; max-width:640px; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin-top:6px; }

/* The count at Watch (2 Nov 2026): how many things need a look, instead of banners on every page */
.side-nav .cnt { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; background:var(--butter); color:var(--side); }
.side-nav .cnt.bad { background:#E8836E; color:#FFFFFF; }