/* OneApp Mini on the web. Dark only: two charcoal bubbles on the ultraviolet dot grid. */

@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jbmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: fallback; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jbmono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: fallback; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jbmono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: fallback; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: fallback; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: fallback; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: fallback; }

:root {
  color-scheme: dark;
  --canvas: #0F0719;
  --grid: rgba(243, 238, 255, .045);
  --bubble: #161616;
  --edge: #2e2e2e;
  --raised: #1d1d1d;
  --fg: #d4d4d4;
  --dim: #8a8a8a;
  --claude: #a8a8a8;
  --busy: #3fb950;
  --needs: #ffb000;
  --error: #e5484d;
  --error-text: #ff6369;
  --web: #B388FF;
  --web-soft: rgba(179, 136, 255, .16);
  --web-ink: #1A0B2E;
  --needs-soft: rgba(255, 176, 0, .12);
  --scrim: rgba(15, 7, 25, .6);
  --lilac: #F3EEFF;
  --phone: #60a5fa;
  --script: #c678dd;
  /* Ambit's acid rainbow (web/brand/make_brand.py ACID), repeated once so it can flow */
  --acid: linear-gradient(90deg, #FF3B3B, #FF8A00, #FFE600, #B6FF00, #00E5FF, #8B5CFF, #FF2BD6, #FF3B3B, #FF8A00, #FFE600, #B6FF00, #00E5FF, #8B5CFF, #FF2BD6);
  --acid-line: linear-gradient(90deg, #FF3B3B, #FF8A00, #FFE600, #B6FF00, #00E5FF, #8B5CFF, #FF2BD6);

  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-fast: 120ms;
  --t-med: 180ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: max(8px, env(safe-area-inset-left, 0px));
  --gutter-r: max(8px, env(safe-area-inset-right, 0px));
  --pad: 12px;
  --row-h: 18px;
  --hang: 2.7rem;
  --app-h: 100dvh;
  --vv-top: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--canvas);
  background-image: radial-gradient(circle at center, var(--grid) 0 1px, transparent 1.2px);
  background-size: 24px 24px;
  color: var(--fg);
  font: 400 15px/22px var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

::selection { background: rgba(179, 136, 255, .35); color: inherit; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--web); outline-offset: 2px; }

.app {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--app-h);
  transform: translateY(var(--vv-top));
}

.bubble {
  background: var(--bubble);
  border: 1px solid var(--edge);
  border-radius: 18px;
}

.text-btn {
  appearance: none; background: none; border: 0; padding: 0 4px;
  min-height: 44px; min-width: 44px;
  color: var(--web); font: 500 13px/16px var(--font-ui);
  user-select: none; -webkit-user-select: none;
}
.text-btn.danger, .danger { color: var(--error-text); }

.icon-btn {
  appearance: none; background: none; border: 0; padding: 0;
  width: 44px; height: 44px; flex: none;
  color: var(--dim); font: 700 18px/1 var(--font-mono);
  border-radius: 10px;
  user-select: none; -webkit-user-select: none;
}
.icon-btn:hover { color: var(--fg); }

/* Glyphs: each in a 1ch box, so a fallback glyph can't push a column */
.g { display: inline-block; width: 1ch; text-align: center; font-family: var(--font-mono); overflow: visible; white-space: nowrap; }

/* ------------------------------------------------------------------ login */

.login {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 48px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 8px) var(--gutter);
  overflow-y: auto;
}
.login-mark .mark { width: 48px; height: 48px; display: block; }
.login-bubble {
  width: 100%; max-width: 400px;
  padding: 20px 20px 16px;
  display: flex; flex-direction: column;
}
.wordmark { height: 28px; width: auto; align-self: flex-start; }
.eyebrow {
  margin: 12px 0 20px; font: 700 12px/16px var(--font-mono); letter-spacing: .14em; color: var(--dim);
  display: flex; align-items: center; gap: 8px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--web); }
.field-label { font: 700 12px/16px var(--font-mono); letter-spacing: .08em; color: var(--dim); }
.field-row {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--edge);
  margin-top: 4px;
}
.field-row:focus-within { border-bottom-color: var(--web); }
.field-row .chev { font: 400 16px/1 var(--font-mono); color: var(--web); }
#password {
  flex: 1; min-width: 0; height: 44px;
  background: transparent; border: 0; padding: 0;
  font: 400 16px/22px var(--font-mono); color: var(--fg); caret-color: var(--web);
}
#password:focus-visible { outline: none; }
.reveal { color: var(--dim); }
.login-error { min-height: 20px; margin: 6px 0 0; font: 400 13px/20px var(--font-ui); color: var(--error-text); }
.login-error.info { color: var(--dim); }
.check-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 8px;
  font: 400 14px/20px var(--font-ui); color: var(--fg); cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.check-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-row .box {
  width: 20px; height: 20px; flex: none; border-radius: 5px; border: 1px solid var(--dim);
  display: grid; place-items: center;
}
.check-row input:checked + .box { background: var(--web); border-color: var(--web); }
.check-row input:checked + .box::after {
  content: ""; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--web-ink); border-bottom: 2px solid var(--web-ink); transform: rotate(-45deg);
}
.check-row input:focus-visible + .box { outline: 2px solid var(--web); outline-offset: 2px; }
.unlock {
  appearance: none; border: 0; border-radius: 12px; height: 48px; width: 100%;
  background: var(--web); color: var(--web-ink); font: 600 16px/1 var(--font-ui);
  transition: transform var(--t-fast) var(--ease);
}
.unlock[aria-disabled="true"] { background: var(--edge); color: var(--dim); }
.unlock:active { transform: scale(.98); }
.footnote { margin: 14px 0 0; font: 400 13px/18px var(--font-ui); color: var(--dim); }

/* The mark (Ambit, 24 Oct 2026): a ring of acid-rainbow segments, a lilac handle on its rim cut out of the ring by
   the surface colour, the rig's light at the centre. While unlocking the ring's thirds light in turn. */
.mark .handle { fill: var(--lilac); stroke: var(--mark-cut, var(--bubble)); }
.login-mark { --mark-cut: var(--canvas); }
.mark .core { fill: var(--lilac); }
.login.unlocking .mark .node { opacity: .18; transition: opacity var(--t-fast); }
.login.unlocking .mark .node.lit { opacity: 1; }

@media (min-width: 600px) and (min-height: 500px) {
  .login { justify-content: center; }
}

/* ------------------------------------------------------------------ the shell */

.shell {
  height: 100%;
  display: flex; flex-direction: column; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 8px) var(--gutter);
  opacity: 1;
  transition: opacity var(--t-med) var(--ease);
}
.shell.entering { opacity: 0; }
.app.kb .shell { padding-bottom: 8px; }

.top {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0 var(--pad);
  overflow: hidden;
}
.lpane, .cpane { display: contents; }

.hdr { order: 0; }
.share-note { order: 0; }
.filter-row { order: 1; }
.dash { order: 2; }
.chatbox { order: 3; }
.broken { order: 3; }
.latest { order: 4; }
.dock { order: 5; }

/* header */
.hdr {
  height: 44px; flex: none;
  display: flex; align-items: center; gap: 2px;
  user-select: none; -webkit-user-select: none;
  margin: 0 -6px;
}
.rig-btn {
  appearance: none; background: none; border: 0; padding: 0 6px;
  min-height: 44px; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px;
  overflow: hidden; white-space: nowrap;
}
.rig-light { width: 18px; height: 18px; flex: none; }
.rig-light .core { transition: fill var(--t-med); }
.rig-light.live .core { fill: var(--web); animation: breathe 2.4s ease-in-out infinite; }
.rig-light.quiet .core { fill: var(--needs); }
.rig-light.offline .core { fill: var(--bubble); stroke: var(--error); stroke-width: 5; }
.rig-light.nosignal .core { fill: var(--bubble); stroke: var(--dim); stroke-width: 5; }
.rig-light.waiting .core { fill: var(--dim); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* "ambit" in the acid rainbow; it flows while an agent is at work. */
.brand {
  font: 700 13px/1 var(--font-mono); letter-spacing: .06em;
  background: var(--acid) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand.active { animation: acid-flow 3s linear infinite; }
@keyframes acid-flow { to { background-position: -200% 0; } }
.link-text { font: 400 13px/1 var(--font-mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.hdr-gap { flex: 1; }
.needs-badge {
  appearance: none; background: none; border: 0; padding: 0 2px;
  min-width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
}
.needs-badge .pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--needs-soft); color: var(--needs); font: 600 13px/18px var(--font-mono);
}
.expand { display: none; }

/* the shared folder out of reach on the rig: one line under the header */
.share-note { flex: none; margin: 0 0 4px; font: 400 13px/18px var(--font-mono); color: var(--needs); overflow-wrap: anywhere; }

/* tones */
.t-dim { color: var(--dim); }
.t-fg { color: var(--fg); }
.t-busy { color: var(--busy); }
.t-needs { color: var(--needs); }
.t-error { color: var(--error-text); }
.t-web { color: var(--web); }
.t-claude { color: var(--claude); }

/* filter chip row */
.filter-row {
  flex: none; height: 36px;
  display: flex; align-items: center; gap: 8px;
}
.chip { font: 400 13px/18px var(--font-mono); color: var(--fg); background: var(--raised); border-radius: 999px; padding: 4px 10px; }

/* chat */
.chatbox { position: relative; flex: 1; min-height: 0; display: flex; }
.chat {
  position: relative;
  flex: 1; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.chat-empty { margin: 16px 0; font: 400 14px/20px var(--font-ui); color: var(--dim); }
.day { font: 400 13px/18px var(--font-mono); color: var(--dim); margin: 8px 0; user-select: none; -webkit-user-select: none; }
.edge-note { font: 400 13px/18px var(--font-mono); color: var(--dim); margin: 4px 0 8px; }

.rec { position: relative; padding-left: 10px; margin-top: 10px; }
.rec.grouped { margin-top: 4px; }
.rec.rule::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 1px;
  background: var(--rule, var(--dim));
}
.rec.fresh { animation: fresh var(--t-fast) var(--ease); }
@keyframes fresh { from { opacity: .4; } to { opacity: 1; } }
.rec .main { border-radius: 8px; cursor: pointer; }
.rec .main:hover { background: transparent; }
.rec.open > .main { background: var(--raised); padding: 6px 8px; margin: -6px -8px; }
.rec.open { margin-bottom: 6px; }
.meta { font: 400 13px/18px var(--font-mono); color: var(--dim); }
.meta .who-james { color: var(--fg); }
.meta .who-claude { color: var(--claude); }
.body {
  font: 400 15px/22px var(--font-ui);
  color: var(--fg);
  overflow-wrap: anywhere;
  user-select: text; -webkit-user-select: text;
}
.rec.claude .body { color: var(--claude); }
.rec.alert .body { color: var(--error-text); font-weight: 600; }
.rec.alert { --rule: var(--error); }
.md-p, .md-h, .md-li { white-space: pre-wrap; }
.md-h { font-weight: 600; }
.md-li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); }
.md-gap { height: 8px; }
.md-code {
  display: block; margin: 4px 0;
  padding: 8px 10px; border-radius: 8px; background: var(--raised);
  font: 400 13px/19px var(--font-mono); color: var(--fg);
  white-space: pre; overflow: auto; max-height: 320px; max-width: 100%;
  font-variant-ligatures: none;
}
.md-inline { font: 400 13px/1 var(--font-mono); background: var(--raised); border-radius: 4px; padding: 1px 4px; font-variant-ligatures: none; }
.md-b { font-weight: 600; }
.body a { color: var(--web); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.more { color: var(--dim); }
/* a hanging glyph: the glyph has its own column, the words and buttons wrap in the second, never under it */
.receipt {
  margin-top: 2px; font: 400 13px/18px var(--font-mono); color: var(--dim);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline;
}
.receipt.t-fg { color: var(--fg); }
.receipt.t-needs { color: var(--needs); }
.receipt.t-error { color: var(--error-text); }
.receipt .rbody { min-width: 0; overflow-wrap: anywhere; }
.receipt .text-btn { min-height: 32px; font: 500 13px/18px var(--font-mono); vertical-align: baseline; }
@media (pointer: coarse) { .receipt .text-btn { min-height: 44px; } }
.fallback { margin-top: 4px; font: 400 14px/20px var(--font-ui); color: var(--claude); white-space: pre-wrap; overflow-wrap: anywhere; }
.acts { display: flex; flex-wrap: wrap; column-gap: 12px; margin-top: 2px; user-select: none; -webkit-user-select: none; }
.acts .text-btn { padding: 0 2px; font: 500 13px/16px var(--font-ui); }

/* the single-line form, from 560px of chat width */
.chat.wide .body { font: 400 14px/20px var(--font-ui); }
.chat.wide .rec .main { padding-left: var(--hang); }
.chat.wide .rec.open > .main { padding-left: calc(var(--hang) + 8px); }
.chat.wide .rec .first { text-indent: calc(-1 * var(--hang)); }
.chat.wide .rec .first .meta { text-indent: 0; }
.chat.wide .receipt, .chat.wide .fallback, .chat.wide .acts, .chat.wide .files { margin-left: var(--hang); }
.chat.wide .rec.grouped { margin-top: 10px; }

/* device tags */
.tag { font: 400 13px/18px var(--font-mono); }
.dev-rig { color: var(--needs); --rule: var(--needs); }
.dev-phone { color: var(--phone); --rule: var(--phone); }
.dev-script { color: var(--script); --rule: var(--script); }
.dev-other { color: var(--busy); --rule: var(--busy); }
.dev-unknown { color: var(--dim); --rule: var(--dim); }
.dev-web { --rule: var(--web); }
.tag.dev-web, .chip-web {
  color: var(--web); background: var(--web-soft); border-radius: 999px; padding: 1px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}

.new-pill {
  position: absolute; right: 8px; bottom: 8px;
  appearance: none; border: 0; background: none; padding: 6px 0;
  min-height: 44px;
  display: grid; place-items: center;
}
.new-pill .pill {
  display: inline-block; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--edge);
  font: 400 13px/30px var(--font-mono); color: var(--fg);
}

.latest {
  flex: none; appearance: none; border: 0; text-align: left;
  min-height: 44px; padding: 6px 0; background: none;
  display: flex; align-items: center;
}
.latest .pill {
  display: block; width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--raised);
  font: 400 13px/32px var(--font-mono); color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.broken { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 4px; }
.broken p { margin: 0; font: 400 15px/22px var(--font-ui); color: var(--fg); }
.broken .text-btn { align-self: flex-start; padding: 0; }

/* dock */
.dock {
  flex: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--edge);
  margin: 0 calc(-1 * var(--pad));
  user-select: none; -webkit-user-select: none;
}
.dock-cell {
  appearance: none; background: none; border: 0; padding: 4px 6px;
  min-height: 44px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  white-space: nowrap; overflow: hidden;
}
.dock-cell + .dock-cell { border-left: 1px solid var(--edge); }
.dock-cell:first-child { border-bottom-left-radius: 17px; }
.dock-cell:last-child { border-bottom-right-radius: 17px; }
/* MUSIC shows where the rig takes media buttons; without it USAGE is the last cell */
.dock:not(.with-media) .dock-cell[data-section="media"] { display: none; }
.dock:not(.with-media) .dock-cell[data-section="usage"] { border-bottom-right-radius: 17px; }
.dock-cell[aria-expanded="true"] { background: var(--raised); }
.dock-cell[aria-expanded="true"] .dock-label { color: var(--fg); }
.dock-label { font: 700 12px/15px var(--font-mono); letter-spacing: .08em; color: var(--dim); }
.dock-value { font: 400 13px/16px var(--font-mono); color: var(--fg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ dashboard */

.dash {
  font: 400 13px/var(--row-h) var(--font-mono);
  color: var(--fg);
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  font-variant-ligatures: none;
  display: none;
  min-height: 0;
}
.sec + .sec { margin-top: 6px; }
.sec-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline;
  font: 700 12px/18px var(--font-mono); letter-spacing: .08em; color: var(--dim);
  text-transform: uppercase;
  width: 100%; appearance: none; background: none; border: 0; padding: 0; text-align: left;
  user-select: none; -webkit-user-select: none;
}
.sec-head .sum { grid-column: 3; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sec-head .sum .t-needs { color: var(--needs); }
.sec ul { list-style: none; margin: 0; padding: 0; }
.dash-note { color: var(--needs); margin: 0 0 6px; font: 400 13px/18px var(--font-mono); }
/* what the rig couldn't read again: still shown, as of when it last could */
.sec.frozen ul { opacity: .55; }
.dash-more { margin: 0; }
.more-btn { appearance: none; background: none; border: 0; padding: 0 0 0 2ch; color: var(--dim); font: inherit; text-align: left; width: 100%; min-height: var(--row-h); border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .more-btn:hover { background: var(--raised); color: var(--fg); } }

.row { border-radius: 8px; }
.row.needs-row { background: var(--needs-soft); }
.row.open { background: var(--raised); }
.row.flash { background: var(--raised); }
.row.flash-out { transition: background-color 1s linear; }
.rowbtn, .rowstatic {
  appearance: none; background: none; border: 0; margin: 0; padding: 0 0 0 1ch;
  width: 100%; text-align: left; color: inherit; font: inherit; line-height: var(--row-h);
  display: grid; column-gap: 1ch; align-items: center;
  min-height: var(--row-h);
  border-radius: 8px;
}
.rowbtn { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .rowbtn:hover { background: var(--raised); } }
@media (pointer: coarse) { .rowbtn { min-height: 44px; } }
.c { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-right { color: var(--dim); text-align: right; max-width: 18ch; }
.sub { padding-left: 4ch; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted-row { padding-left: 2ch; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disclosure { appearance: none; background: none; border: 0; padding: 0 0 0 2ch; color: var(--dim); font: inherit; text-align: left; width: 100%; min-height: var(--row-h); border-radius: 8px; }
@media (pointer: coarse) { .disclosure { min-height: 44px; } }

.row.task .rowbtn, .row.task .rowstatic { grid-template-columns: 1ch 10ch minmax(0, 1fr) auto; }
.dash.n52 .row.task .rowbtn, .dash.n52 .row.task .rowstatic { grid-template-columns: 1ch minmax(0, 1fr) auto; }
.dash.n52 .row.task .c-label { display: none; }
.row.agent .rowbtn, .row.agent .rowstatic { grid-template-columns: 1ch var(--where-w, 22ch) minmax(0, 1fr) auto; }
/* under 64 columns what an agent is doing comes first: "last seen …" drops to a line of its own under it */
.dash.n64:not(.stack) .row.agent .rowbtn, .dash.n64:not(.stack) .row.agent .rowstatic { grid-template-columns: 1ch var(--where-w, 22ch) minmax(0, 1fr); }
.dash.n64:not(.stack) .row.agent .c-right { grid-column: 3; text-align: left; max-width: none; }
.dash.n64 .row.agent .c-right:empty { display: none; }
.row.usage .rowstatic { grid-template-columns: 5ch 14ch 4ch minmax(0, 1fr); }
.dash.n46 .row.usage .rowstatic { grid-template-columns: 5ch 10ch 4ch minmax(0, 1fr); }
.row.usage .c-pct { text-align: right; }
.row.usage .c-resets { text-align: right; color: var(--dim); padding-left: 1ch; }
.row.usage .c-reset { grid-column: 2 / -1; color: var(--dim); }
.row.total .rowstatic { padding-left: 2ch; grid-template-columns: minmax(0, 1fr); }
.row.vendor .rowbtn, .row.vendor .rowstatic { padding-left: 2ch; grid-template-columns: 14ch minmax(0, 1fr); }
.row.sent .rowbtn, .row.sent .rowstatic { grid-template-columns: 1ch 9ch minmax(0, 1fr) 5ch; }
.row.sent .c-time { color: var(--dim); text-align: right; }
/* HEALTH: a check's words wrap (they say what to do), its "since" sits right; jobs read name, result, time */
.row.health .rowstatic { grid-template-columns: 1ch minmax(0, 1fr) auto; align-items: baseline; }
.row.health .c-text, .row.job .c-text { white-space: normal; overflow-wrap: anywhere; }
.row.health .c-right { padding-left: 1ch; }
.row.job .rowstatic { padding-left: 2ch; grid-template-columns: 8ch minmax(0, 1fr) auto; align-items: baseline; }
.row.job .c-time { color: var(--dim); text-align: right; padding-left: 1ch; }
.dash.stack .row.job .rowstatic { grid-template-columns: minmax(0, 1fr) !important; }
.muted-row.health-stale { color: var(--needs); white-space: normal; overflow-wrap: anywhere; }

/* LINKS: a pinned link is one row like any other; the label in link colour, its note dim on the same line */
.row.link .rowbtn { grid-template-columns: 1ch minmax(0, 1fr); text-decoration: none; }
.row.link .link-label { color: var(--web); }
@media (hover: hover) and (pointer: fine) { .row.link .rowbtn:hover .link-label { text-decoration: underline; text-underline-offset: 2px; } }

/* NOW PLAYING: the track, then three buttons that drive the rig's media session */
.media-line { display: grid; grid-template-columns: 1ch minmax(0, 1fr) auto; column-gap: 1ch; align-items: center; padding-left: 1ch; min-height: var(--row-h); }
.media-ctl { display: flex; gap: 4px; }
.media-btn {
  appearance: none; margin: 0; padding: 0 1ch; min-width: 6ch; height: calc(var(--row-h) + 6px);
  background: none; border: 1px solid var(--edge); border-radius: 8px;
  color: var(--fg); font: 700 12px/1 var(--font-mono); white-space: nowrap; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.media-btn.media-open { color: var(--web); font: 500 13px/1 var(--font-ui); }
@media (hover: hover) and (pointer: fine) { .media-btn:hover:not(:disabled) { background: var(--raised); } }
@media (pointer: coarse) { .media-btn { min-width: 44px; height: 44px; } }
.media-btn:disabled { color: var(--dim); opacity: .55; cursor: default; }
/* a press on its way: the acid ring until the rig's report shows it */
.media-btn.pending { border-color: transparent; background: linear-gradient(var(--bubble), var(--bubble)) padding-box, var(--acid-line) border-box; }

/* below 36 columns (large text): glyph and text, then the right column under them */
.dash.stack .rowbtn, .dash.stack .rowstatic { grid-template-columns: 1ch minmax(0, 1fr) !important; }
.dash.stack .c-label { display: none; }
.dash.stack .c-right, .dash.stack .c-time, .dash.stack .c-resets, .dash.stack .c-doing { grid-column: 2; text-align: left; max-width: none; color: var(--dim); padding-left: 0; }
.dash.stack .row.usage .rowstatic { grid-template-columns: 5ch minmax(0, 1fr) !important; }
.dash.stack .row.usage .c-pct { text-align: left; }
.dash.stack .row.usage .c-resets { grid-column: 1 / -1; padding-left: 0; }
.dash.stack .row.vendor .rowbtn, .dash.stack .row.vendor .rowstatic { grid-template-columns: minmax(0, 1fr) !important; }

.meter { display: flex; align-items: center; gap: 1px; height: var(--row-h); }
.cell { width: calc(1ch - 1px); height: .72em; background: var(--edge); border-radius: 1px; flex: none; }
.cell.on.busy { background: var(--busy); }
.cell.on.needs { background: var(--needs); }
.cell.on.error { background: var(--error); }

.openbox {
  padding: 2px 1ch 6px 3ch;
  white-space: pre-wrap; overflow-wrap: anywhere;
  user-select: text; -webkit-user-select: text;
}
.openbox .detail { color: var(--dim); }
.openbox .reply { color: var(--claude); font: 400 14px/20px var(--font-ui); }
.openbox .acts .text-btn { font: 500 13px/16px var(--font-ui); }

/* ------------------------------------------------------------------ composer and status bar */

.bottom { flex: none; padding: 8px var(--pad) 6px; }
.compose-row { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto 44px; align-items: end; column-gap: 4px; }
.compose-row #input { grid-column: 2; }
.compose-row .send { grid-column: 4; }
/* attach: the same 44px target as send, quieter */
.attach {
  grid-column: 3;
  appearance: none; border: 0; background: none; padding: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  user-select: none; -webkit-user-select: none;
}
.attach span {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--edge); color: var(--fg); font: 400 20px/1 var(--font-mono);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.attach:hover span { border-color: var(--web); }
.attach:active span { transform: scale(.94); }
.attach:focus-visible { outline: none; }
.attach:focus-visible span { outline: 2px solid var(--web); outline-offset: 2px; }
.attach[aria-disabled="true"] span { color: var(--dim); }
/* files waiting to go with the next message */
.tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px 2ch; }
.tray .fchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--raised); border: 1px solid var(--edge); border-radius: 8px; padding: 3px 4px 3px 6px;
  font: 400 13px/18px var(--font-mono); color: var(--fg);
}
.tray .fchip img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex: none; }
.tray .fchip .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.tray .fchip .fsize { color: var(--dim); flex: none; }
.tray .fchip .fx {
  appearance: none; border: 0; background: none; color: var(--dim); font: 400 16px/1 var(--font-mono);
  width: 28px; height: 28px; border-radius: 6px; flex: none; cursor: pointer;
}
.tray .fchip .fx:hover { color: var(--fg); }
@media (pointer: coarse) { .tray .fchip .fx { width: 36px; height: 36px; } }
.bottom.dropping { outline: 2px dashed var(--web); outline-offset: -4px; }
/* a sent message's files, under its words */
.rec .files {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline; margin-top: 2px;
  font: 400 13px/18px var(--font-mono); color: var(--dim); overflow-wrap: anywhere;
}
.compose-row .chev { font: 400 16px/22px var(--font-mono); color: var(--web); padding-bottom: 11px; user-select: none; -webkit-user-select: none; }
#input {
  display: block; width: 100%; resize: none;
  background: transparent; border: 0; padding: 11px 0; margin: 0;
  font: 400 16px/22px var(--font-ui); color: var(--fg); caret-color: var(--web);
  max-height: calc(22px * 6 + 22px);
  overflow-y: auto;
  border-radius: 6px;
}
#input::placeholder { color: var(--dim); opacity: 1; }
#input:focus-visible { outline: none; }
.send {
  appearance: none; border: 0; background: none; padding: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  user-select: none; -webkit-user-select: none;
}
.send span {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--web); color: var(--web-ink); font: 700 18px/1 var(--font-mono);
  transition: transform var(--t-fast) var(--ease);
}
.send[aria-disabled="true"] span { background: var(--edge); color: var(--dim); }
.send:active span { transform: scale(.94); }
.send:focus-visible { outline: none; }
.send:focus-visible span { outline: 2px solid var(--web); outline-offset: 2px; }
.status-btn {
  appearance: none; background: none; border: 0; padding: 0; margin: 2px 0 0;
  width: 100%; min-height: 28px;
  display: flex; align-items: center; gap: 8px; text-align: left;
  font: 400 13px/18px var(--font-mono); color: var(--dim);
  user-select: none; -webkit-user-select: none;
  border-radius: 6px;
}
@media (pointer: coarse) { .status-btn { min-height: 40px; padding-block: 4px; } }
.status { flex: 1; min-width: 0; overflow: hidden; }
.status-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.counter { flex: none; color: var(--dim); }
.counter.warn { color: var(--needs); }
/* the rig's health, one line under the status line; it opens HEALTH */
.health-btn {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: 100%; min-height: 24px;
  display: flex; align-items: center; text-align: left;
  font: 400 13px/18px var(--font-mono); color: var(--dim);
  user-select: none; -webkit-user-select: none;
  border-radius: 6px;
}
@media (pointer: coarse) { .health-btn { min-height: 36px; } }
.health-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-line.t-dim { color: var(--dim); }
.health-line.t-needs { color: var(--needs); }
.health-line.t-error { color: var(--error-text); }

/* ------------------------------------------------------------------ menu */

.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 20; animation: fade-in var(--t-fast) var(--ease); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  background: var(--bubble); border: 1px solid var(--edge); border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  max-height: 85%; overflow-y: auto; overscroll-behavior: contain;
  animation: sheet-up var(--t-med) var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.handle { width: 36px; height: 4px; border-radius: 2px; background: var(--edge); margin: 8px auto 4px; touch-action: none; }
.handle::before { content: ""; display: block; height: 28px; margin-top: -12px; }
.menu-page { display: flex; flex-direction: column; }
.menu-row {
  appearance: none; background: none; border: 0; border-top: 1px solid var(--edge);
  min-height: 52px; padding: 0 20px; text-align: left;
  font: 400 15px/20px var(--font-ui); color: var(--fg);
  display: flex; align-items: center; gap: 12px;
}
.menu-page .menu-row:first-child { border-top: 0; }
.menu-row.danger { color: var(--error-text); }
.m-box { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--dim); flex: none; display: grid; place-items: center; }
.menu-row[aria-pressed="true"] .m-box { background: var(--web); border-color: var(--web); }
.menu-row[aria-pressed="true"] .m-box::after { content: ""; width: 9px; height: 4px; margin-top: -2px; border-left: 2px solid var(--web-ink); border-bottom: 2px solid var(--web-ink); transform: rotate(-45deg); }
/* alerts on this device: the toggle, and one line under it on what it needs or does */
.m-text { display: flex; flex-direction: column; min-width: 0; padding-block: 8px; }
.m-note { font: 400 13px/18px var(--font-ui); color: var(--dim); overflow-wrap: anywhere; }
.menu-row[aria-disabled="true"] { color: var(--dim); cursor: default; }
.menu-row[aria-disabled="true"] .m-box { border-color: var(--edge); }
.about-rows { margin: 0; padding: 8px 20px; display: grid; grid-template-columns: 13ch minmax(0, 1fr); row-gap: 4px; font: 400 13px/19px var(--font-mono); }
.about-rows dt { color: var(--dim); }
.about-rows dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.about-note { margin: 4px 20px 16px; font: 400 13px/18px var(--font-ui); color: var(--dim); }

/* ------------------------------------------------------------------ phone (default) states */

.shell:not(.board) .dash { display: none; }
.shell.board .dash { display: block; flex: 1; padding-top: 2px; }
.shell.board .chatbox, .shell.board .filter-row { display: none; }
.app.kb .dock { display: none; }
.app.short .hdr { height: 40px; }
#input { max-height: calc(22px * 6 + 22px); }
.app.kb #input { max-height: calc(22px * 4 + 22px); }
.app.short #input { max-height: calc(22px * 3 + 22px); }

/* ------------------------------------------------------------------ tablet: 600-959px */

@media (min-width: 600px) and (min-height: 500px) {
  :root { --pad: 14px; --gutter: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px)); }
  .shell { align-items: center; padding-top: calc(env(safe-area-inset-top, 0px) + 16px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .top, .bottom { width: 100%; max-width: 760px; }
  .body { font: 400 14px/20px var(--font-ui); }
  .dock { display: none; }
  .expand { display: block; }
  .shell:not(.board) .dash { display: block; flex: none; max-height: 45%; overflow: hidden; border-bottom: 1px solid var(--edge); padding-bottom: 6px; margin-bottom: 2px; }
  .app.kb .shell:not(.board) .dash { display: none; }
  .shell.board .latest { margin-bottom: 8px; }
  #input { max-height: calc(22px * 6 + 22px); }
}

/* ------------------------------------------------------------------ desktop: 960px and up */

@media (min-width: 960px) and (min-height: 500px) {
  :root { --row-h: 19px; }
  .shell {
    display: grid; align-items: stretch;
    grid-template-columns: clamp(440px, 34vw, 560px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    max-width: 1440px; margin: 0 auto; padding: 16px;
  }
  .top { display: contents; }
  .top.bubble { background: none; border: 0; }
  .lpane, .cpane {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    background: var(--bubble); border: 1px solid var(--edge); border-radius: 18px;
    padding: 0 var(--pad);
  }
  .lpane { grid-column: 1; grid-row: 1 / span 2; }
  .cpane { grid-column: 2; grid-row: 1; padding-top: 4px; }
  .bottom { grid-column: 2; grid-row: 2; width: auto; max-width: none; }
  .broken { grid-column: 2; grid-row: 1; background: var(--bubble); border: 1px solid var(--edge); border-radius: 18px; padding: 24px; }
  .shell .dash, .shell.board .dash, .shell:not(.board) .dash { display: block; flex: 1; max-height: none; overflow-y: auto; border: 0; padding: 2px 0 12px; margin: 0; }
  .shell.board .chatbox, .shell.board .filter-row:not([hidden]) { display: flex; }
  .shell .latest, .dock, .expand { display: none !important; }
  .chat { padding-right: 4px; }
  #input { max-height: calc(22px * 10 + 22px); }
  .menu {
    left: auto; right: auto; bottom: auto; top: var(--menu-top, 60px); left: var(--menu-left, 16px);
    min-width: 260px; max-width: 360px; border-radius: 12px; border-bottom: 1px solid var(--edge);
    padding: 4px 0; animation: fade-in var(--t-fast) var(--ease);
  }
  .menu .handle { display: none; }
  .scrim { background: transparent; }
  .menu-row { min-height: 44px; font-size: 14px; }
}

/* ------------------------------------------------------------------ the acid hairline: the rainbow along each bubble's top */

.bubble { position: relative; }
.bubble::before {
  content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; border-radius: 2px;
  background: var(--acid-line); opacity: .85; pointer-events: none;
}
@media (min-width: 960px) and (min-height: 500px) {
  .top.bubble::before { display: none; } /* .top is display: contents here; its panes carry the line */
  .lpane, .cpane, .fpane { position: relative; }
  .lpane::before, .cpane::before, .fpane::before {
    content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; border-radius: 2px;
    background: var(--acid-line); opacity: .85; pointer-events: none;
  }
}

/* ------------------------------------------------------------------ wide desktop: 1600px and up, the live feed */

.fpane { display: none; }
@media (min-width: 1600px) and (min-height: 500px) {
  .shell {
    grid-template-columns: clamp(440px, 27vw, 560px) minmax(0, 1fr) clamp(440px, 27vw, 620px);
    max-width: 2560px;
  }
  .fpane {
    display: flex; flex-direction: column; grid-column: 3; grid-row: 1 / span 2; min-height: 0; min-width: 0;
    background: var(--bubble); border: 1px solid var(--edge); border-radius: 18px; padding: 10px var(--pad) 12px;
    overflow: hidden;
  }
  .feed {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
    font: 400 12.5px/17px var(--font-mono); white-space: pre; color: var(--fg);
    background-image: repeating-linear-gradient(180deg, transparent 0 2px, rgba(243, 238, 255, .018) 2px 3px);
  }
  .feed .fl { height: 17px; }
}
.f-edge { color: #6e5a96; }
.f-dim { color: var(--dim); }
.f-fg { color: var(--fg); }
.f-head { color: var(--lilac); font-weight: 700; }
.f-web, .f-meter { color: var(--web); }
.f-busy { color: var(--busy); }
.f-needs { color: var(--needs); }
.f-err { color: var(--error-text); }
.f-art { font-weight: 700; text-shadow: 0 0 8px currentColor; }
.f-a0 { color: #FF3B3B; } .f-a1 { color: #FF8A00; } .f-a2 { color: #FFE600; } .f-a3 { color: #B6FF00; }
.f-a4 { color: #00E5FF; } .f-a5 { color: #8B5CFF; } .f-a6 { color: #FF2BD6; }

/* ------------------------------------------------------------------ motion, colours, contrast */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .cell { border: 1px solid CanvasText; }
  .cell.on { background: CanvasText !important; }
  .tag.dev-web, .chip-web, .chip, .needs-badge .pill { border: 1px solid CanvasText; }
  .rig-light .core { stroke: CanvasText; stroke-width: 4; }
  .bubble, .lpane, .cpane { border-color: CanvasText; }
}

/* ================================================================== MONO B: "Cut" (James, 01/11/2026: "On ambit mock-ups
   mono mock up version B: do it.") Black and graphite, white type, the Prompt Ring the only colour; no rounded corners,
   the slabs cut at 45 degrees top-left and bottom-right; a vignette and fine grain for mood. This layer overrides the
   tokens and shapes above; layout and behaviour are unchanged, bar the three columns from 1200 px. */

:root {
  --canvas: #030303;
  --grid: transparent;
  --bubble: #0C0C0C;
  --edge: #1E1E1E;
  --raised: #161616;
  --fg: #E6E6E6;
  --dim: #8A8A8A;
  --claude: #BDBDBD;
  --busy: #EDEDED;
  --needs: #FFFFFF;
  --error: #FFFFFF;
  --error-text: #FFFFFF;
  --web: #FFFFFF;
  --web-soft: rgba(255, 255, 255, .10);
  --web-ink: #000000;
  --needs-soft: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .7);
  --lilac: #FFFFFF;
  --phone: #CFCFCF;
  --script: #9A9A9A;
  --acid: linear-gradient(90deg, #FFFFFF, #FFFFFF);
  --acid-line: linear-gradient(90deg, #2A2A2A, #2A2A2A);
  --cut: 14px;
  --cut-s: 8px;
  /* one typeface: everything in JetBrains Mono, as in the mock-up */
  --font-ui: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}
html, body { background-color: var(--canvas); background-image: none; }
::selection { background: rgba(255, 255, 255, .25); }

/* mood: a vignette and a fine greyscale grain over everything, never catching a tap */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; }
body::before { background: radial-gradient(ellipse at 50% 35%, transparent 45%, rgba(0, 0, 0, .5) 100%); }
body::after {
  opacity: .06; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* clean cut corners: nothing rounded; slabs, buttons and dock cells cut at 45 degrees */
*, *::before, *::after { border-radius: 0 !important; }
.bubble, .lpane, .cpane, .fpane, .broken, .menu, .login-bubble {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.unlock, .send span, .dock-cell, .media-btn, .chip, .needs-badge .pill, .tray .fchip {
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}
.bubble::before, .lpane::before, .cpane::before, .fpane::before { display: none !important; }

/* slabs: graphite, no outline; the chat is the one outlined slab, the composer the lightest */
.bubble { background: var(--bubble); border: 0; }
.bottom.bubble { background: #101010; }
@media (min-width: 960px) and (min-height: 500px) {
  .lpane, .fpane { background: #0C0C0C; border: 0; }
  .cpane { background: #090909; border: 1px solid #1E1E1E; }
  .shell { gap: 16px; }
}

/* three columns from 1200 px: board, chat, feed */
@media (min-width: 1200px) and (min-height: 500px) {
  .shell {
    grid-template-columns: clamp(340px, 26vw, 520px) minmax(0, 1fr) clamp(320px, 24vw, 560px);
    max-width: 2560px;
  }
  .fpane {
    display: flex; flex-direction: column; grid-column: 3; grid-row: 1 / span 2; min-height: 0; min-width: 0;
    padding: 10px var(--pad) 12px; overflow: hidden;
  }
  .feed {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
    font: 400 13px/18px var(--font-mono); white-space: pre; color: var(--fg);
  }
  .feed .fl { height: 18px; }
}
.feed { background-image: none !important; }

/* the logo: the ring keeps its colours; the core shows the rig's state in white and grey; the cursor blinks */
.mark .cursor { fill: #FFFFFF; animation: cursor-blink 1.1s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.mark .core { fill: #FFFFFF; }
.rig-light { width: 20px; height: 20px; }
.rig-light.live .core { fill: #FFFFFF; }
.rig-light.quiet .core { fill: #8A8A8A; animation: none; }
.rig-light.offline .core { fill: #030303; stroke: #FFFFFF; stroke-width: 4; }
.rig-light.nosignal .core { fill: #030303; stroke: #5A5A5A; stroke-width: 4; }
.rig-light.waiting .core { fill: #5A5A5A; }
.brand { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #FFFFFF; font-weight: 800; font-size: 15px; letter-spacing: 0; }
.brand.active { animation: none; }
.wordmark { font: 800 26px/1 var(--font-mono); color: #FFFFFF; letter-spacing: -.02em; height: auto; }
.login-mark .mark { width: 56px; height: 56px; }

/* buttons in white on black */
.unlock { background: #FFFFFF; color: #000000; font: 700 15px/1 var(--font-mono); letter-spacing: .04em; }
.unlock[aria-disabled="true"] { background: #1E1E1E; color: #6A6A6A; }
.send span { background: #FFFFFF; color: #000000; width: 40px; height: 40px; }
.send[aria-disabled="true"] span { background: #1E1E1E; color: #6A6A6A; }
.check-row input:checked + .box { background: #FFFFFF; border-color: #FFFFFF; }

/* what needs James: inverted, white on black reversed, never a colour */
.needs-badge .pill { background: #FFFFFF; color: #000000; font-weight: 700; }
.row.needs-row { background: rgba(255, 255, 255, .06); }
.t-needs { color: #FFFFFF; font-weight: 700; }
.t-error, .text-btn.danger, .danger, .menu-row.danger { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rec.alert { --rule: #FFFFFF; }
.rec.alert .body { color: #FFFFFF; font-weight: 500; }
.t-busy { color: #EDEDED; }
.cell { background: #242424; }
.cell.on.busy, .cell.on.needs, .cell.on.error { background: #EDEDED; }

/* devices: shades of grey (the chat says which device in words) */
.dev-rig { color: #FFFFFF; --rule: #FFFFFF; }
.dev-phone { color: #CFCFCF; --rule: #8A8A8A; }
.dev-script { color: #9A9A9A; --rule: #5A5A5A; }
.dev-other { color: #BDBDBD; --rule: #6A6A6A; }
.dev-web { --rule: #FFFFFF; }
.tag.dev-web, .chip-web { color: #000000; background: #FFFFFF; }
.row.link .link-label, .body a { color: #FFFFFF; }
.row.link .link-label { text-decoration: underline; text-decoration-color: #4A4A4A; text-underline-offset: 3px; }

/* the dock (phone and tablet): four cut tiles with a gap, the open one white */
.dock { border-top: 0; gap: 6px; margin: 6px 0 calc(var(--pad) - 2px); }
.dock-cell { background: #121212; padding: 6px; min-height: 52px; }
.dock-cell + .dock-cell { border-left: 0; }
.dock-cell[aria-expanded="true"] { background: #FFFFFF; }
.dock-cell[aria-expanded="true"] .dock-label, .dock-cell[aria-expanded="true"] .dock-value,
.dock-cell[aria-expanded="true"] .dock-value * { color: #000000; }
.dock-value { font-size: 14px; font-weight: 500; }

/* feed art and colours: greyscale */
.f-edge { color: #3A3A3A; } .f-head { color: #FFFFFF; } .f-web, .f-meter { color: #FFFFFF; }
.f-busy { color: #EDEDED; } .f-needs { color: #FFFFFF; font-weight: 700; } .f-err { color: #FFFFFF; text-decoration: underline; }
.f-art { text-shadow: none; }
.f-a0, .f-a1, .f-a2, .f-a3, .f-a4, .f-a5, .f-a6 { color: #D6D6D6; }

/* the menu: a cut graphite slab */
.menu { background: #0E0E0E; border: 0; }
.menu-row[aria-pressed="true"] .m-box { background: #FFFFFF; border-color: #FFFFFF; }
.media-btn.pending { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
:focus-visible { outline-color: #FFFFFF; }