/* ============================================================
   nico-calm-frame.css — the Nico Calm FRAME on web + Mac + Electron
   (Calm spec §3 tokens, §4 navigation "Web" / "Mac", §6.2, §9 lane 2 "frame").

   A SKIN: every rule is keyed off :root[data-skin="calm"] (renderer/nico-skin.js),
   so the classic skin — and every classic class name / data hook — is untouched.
   Owns: the sidebar as the calm list (#calmSide, built by nico-calm-frame.js), the
   chat header, the `+` menu, the account / More / row / header menus, the ⌘K palette
   restyle, Today as a calm list, the Mac / Electron titlebar and its drag regions,
   the avatar placements (renderer/nico-avatar.css is the avatar itself).
   Does NOT own the thread grammar (bubbles, activity slot, cards) — that is the
   thread lane; this file only touches the thread for the avatar + empty-state hero.

   Tokens: every colour is a --calm-* token from renderer/nico-calm.css (loaded next).
   ============================================================ */

/* ---------------- tokens ----------------
   The --calm-* palette (spec §3 table) is defined ONCE, in renderer/nico-calm.css (the thread
   lane's verbatim port of D/calm-tokens.css). This file only adds the frame's geometry. */
:root[data-skin="calm"] {
  --calm-sb-w: 260px;
  --calm-head-h: 52px;
  --calm-mac-lights: 84px;   /* the hidden-titlebar traffic lights sit at 18/19 px; this is the room they need */
}

/* every Calm-only node is invisible in the classic skin (they are only ever built under
   Calm, but a live flip back to classic must hide them without a reload) */
:root:not([data-skin="calm"]) .calm-only { display: none !important; }

/* ============================================================
   FRAME: no titlebar row, a 260 px sidebar, one column, the canvas only on Open
   ============================================================ */
:root[data-skin="calm"] #window { grid-template-rows: 0 1fr; background: var(--calm-ground); }
:root[data-skin="calm"] #body { grid-row: 2; --sidebar-w: var(--calm-sb-w); background: var(--calm-ground); }   /* row 2 explicitly: the titlebar leaves the grid */
:root[data-skin="calm"] body.sidebar-collapsed #body { --sidebar-w: 0px; }
:root[data-skin="calm"] .sidebar-resize { display: none; }

/* the classic titlebar row is gone. Web: nothing replaces it. */
:root[data-skin="calm"] #titlebar { display: none; }
/* Electron (frameless, no native lights): the SAME #titlebar shrinks to the 84 × 52 corner
   that carries the window dots, and stays the drag region it always was (-webkit-app-region). */
:root[data-skin="calm"]:not(.nico-browser) #titlebar {
  display: block; position: absolute; left: 0; top: 0; width: var(--calm-mac-lights); height: var(--calm-head-h);
  padding: 0; background: transparent; border: 0; z-index: 40;
}
:root[data-skin="calm"]:not(.nico-browser) #titlebar .tl-left { position: absolute; left: 18px; top: 19px; padding: 0; gap: 0; }
:root[data-skin="calm"]:not(.nico-browser) #titlebar .brand,
:root[data-skin="calm"]:not(.nico-browser) #titlebar .sidebar-toggle,
:root[data-skin="calm"]:not(.nico-browser) #titlebar .tl-center,
:root[data-skin="calm"]:not(.nico-browser) #titlebar .tl-right { display: none; }

/* the classic sidebar content stays in the DOM (NICO_SESSIONS / NICO_CHATS still render
   into it and the rail tests drive it) — Calm just does not show it */
:root[data-skin="calm"] #sidebar > :not(.calm-sb) { display: none !important; }
:root[data-skin="calm"] #sidebar { background: var(--calm-raised); border-right: 0; }

/* canvas only on Open: owned by the thread lane (nico-api.js calmCanvasShut → body.calm-canvas-shut) */
:root[data-skin="calm"] #thread-col { border-right: 0; background: var(--calm-ground); }

/* ---------------- icons ---------------- */
.calm-ic { width: 16px; height: 16px; flex: none; display: block; }
.calm-ic.s13 { width: 13px; height: 13px; }
.calm-ic.s18 { width: 18px; height: 18px; }

/* ============================================================
   SIDEBAR = the chat list (spec §3 "Chat list rows", §4 "List", mockup .sb)
   ============================================================ */
.calm-sb { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; width: var(--calm-sb-w); font-family: var(--sans); color: var(--calm-ink); position: relative; }
.calm-sb [hidden] { display: none !important; }
.calm-sb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.calm-sb :focus-visible, .calm-fmenu :focus-visible, .calm-hb:focus-visible, .calm-plus:focus-visible { outline: 2px solid var(--calm-accent); outline-offset: 2px; border-radius: 6px; }
.calm-sb-top { height: var(--calm-head-h); flex: none; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 18px; -webkit-app-region: drag; }
.calm-sb-top .mk { flex: none; display: block; }
.calm-sb-top .nm { font: 600 15px/1 var(--sans); color: var(--calm-ink); letter-spacing: -0.01em; }
.calm-sb-top .calm-hb { margin-left: auto; }
.calm-hb { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--calm-ink-2); flex: none; position: relative;
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-app-region: no-drag; transition: background var(--calm-t-fast) var(--calm-ease); }
.calm-hb:hover { background: var(--calm-bubble); color: var(--calm-ink); }
.calm-hb .bd { position: absolute; top: 5px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--calm-dot-need); box-shadow: 0 0 0 2px var(--calm-ground); }
.calm-sb-list { flex: 1; min-height: 0; overflow: auto; padding-bottom: 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
.calm-sb-foot { flex: none; padding: 8px 0 10px; border-top: 1px solid var(--calm-hair); }

.calm-sb .sl-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 0 8px; min-height: 34px; padding: 7px 10px;
  border-radius: 10px; font: 400 var(--calm-fs-body)/1.3 var(--sans); color: var(--calm-ink); position: relative;
  transition: background var(--calm-t-fast) var(--calm-ease); }
.calm-sb .sl-row:hover { background: color-mix(in oklch, var(--calm-bubble) 70%, transparent); }
.calm-sb .sl-row .calm-ic { color: var(--calm-ink-2); }
.calm-sb .sl-row.on { background: var(--calm-bubble); color: var(--calm-ink); }
.calm-sb .sl-row.chat.on .tt { font-weight: 600; }
.calm-sb .sl-row .kbd { margin-left: auto; font: 500 12px/1 var(--sans); color: var(--calm-meta); }
.calm-sb .sl-row .cnt { margin-left: auto; font: 500 12px/1 var(--sans); color: var(--calm-meta); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.calm-sb .sl-row .cnt.need { color: var(--calm-ink); font-weight: 600; }
.calm-sb .sl-row .cnt.need::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--calm-dot-need); }
.calm-sb .sl-row .cnt.more { max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.calm-sb .sl-row.chat { color: var(--calm-ink-2); }
.calm-sb .sl-rowwrap:hover .sl-row.chat, .calm-sb .sl-rowwrap:focus-within .sl-row.chat { padding-right: 40px; }
.calm-sb .sl-row.chat.unread, .calm-sb .sl-row.chat.need { color: var(--calm-ink); }
.calm-sb .sl-row.chat.unread .tt { font-weight: 600; }
.calm-sb .sl-row .mm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.calm-sb .sl-row .tt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calm-sb .sl-row .st { font: 500 12px/1.3 var(--sans); color: var(--calm-ink); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.calm-sb .sl-row .pv { font: 400 12px/1.3 var(--sans); color: var(--calm-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.calm-sb .sl-row .g { color: var(--calm-meta); margin-left: auto; }
/* the row ⋯: hover / focus-within only (no hover chrome at rest, spec §12 lows) */
.calm-sb .sl-rowwrap { position: relative; }
.calm-sb .sl-rowwrap .rx { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; color: var(--calm-ink); background: var(--calm-raised); opacity: 0; }
.calm-sb .sl-rowwrap:hover .rx, .calm-sb .sl-rowwrap:focus-within .rx, .calm-sb .sl-rowwrap .rx[aria-expanded="true"] { opacity: 1; }
.calm-sb .sl-rowwrap:hover .g, .calm-sb .sl-rowwrap:focus-within .g { visibility: hidden; }
.calm-sb .sl-gap { height: 10px; }
.calm-sb .sl-h { padding: 18px 18px 6px; font: 500 12px/1 var(--sans); color: var(--calm-meta); }
.calm-sb .sl-none { padding: 10px 18px; font: 400 13px/1.45 var(--sans); color: var(--calm-meta); }
.calm-sb .calm-av-in { width: 26px; height: 26px; border-radius: 50%; background: var(--calm-bubble); color: var(--calm-ink); display: grid; place-items: center; font: 600 11px/1 var(--sans); flex: none; }
.calm-sb .sl-row.me { font-weight: 500; }
.calm-sb .sl-row.me > .calm-ic:last-child { margin-left: auto; color: var(--calm-meta); }
.calm-sb .sl-row.me .nmx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calm-sb .sl-warn { display: flex; align-items: center; gap: 8px; margin: 4px 16px 6px; font: 500 12px/1.35 var(--sans); color: var(--calm-ink); }
.calm-sb .sl-warn .calm-ic { color: var(--calm-warn-ink); width: 14px; height: 14px; }
.calm-sb .sl-warn button { margin-left: auto; color: var(--calm-ink); font-weight: 600; padding: 6px 2px; }

/* status dots: ONE vocabulary (spec §2.5) — need = warn · default = neutral · ended = hollow */
.calm-sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--calm-dot-neutral); display: inline-block; }
.calm-sdot.need { background: var(--calm-dot-need); }
.calm-sdot.ended { background: transparent; box-shadow: inset 0 0 0 1.5px var(--calm-dot-neutral); }

/* ============================================================
   CHAT HEADER (spec §4 Header): [collapsed: sidebar + new] · avatar · warn dot · title · ⋯
   ============================================================ */
:root[data-skin="calm"] .col-head { height: var(--calm-head-h); gap: 8px; padding: 0 12px 0 16px; border-bottom: 0; -webkit-app-region: drag; }
:root[data-skin="calm"] .col-head button { -webkit-app-region: no-drag; }
:root[data-skin="calm"] .col-head .h-title { font: 600 15px/1.2 var(--sans) !important; letter-spacing: -0.01em !important; color: var(--calm-ink) !important; text-transform: none !important; }
:root[data-skin="calm"] #headDot,
:root[data-skin="calm"] #headModel,
:root[data-skin="calm"] .col-head .nx-rc-btn { display: none !important; }
.calm-hlead { display: none; align-items: center; gap: 2px; flex: none; margin-right: 4px; }
:root[data-skin="calm"] body.sidebar-collapsed .calm-hlead { display: inline-flex; }
.calm-hav { --av-size: 20px; flex: none; }
.calm-hdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--calm-dot-need); }
.calm-hdot[hidden] { display: none; }
.calm-hmore { margin-left: auto; }
/* the collapsed lead for destinations that have no chat header (Today / Tasks) */
.calm-flead { position: absolute; z-index: 20; top: 10px; left: 12px; display: none; gap: 2px; }
:root[data-skin="calm"] body.sidebar-collapsed[data-session="today"] .calm-flead,
:root[data-skin="calm"] body.sidebar-collapsed[data-session="tasks"] .calm-flead { display: inline-flex; }
:root[data-skin="calm"] #body { position: relative; }

/* ---------------- Mac shell (MAC/native WKWebView, hidden titlebar) ----------------
   The real traffic lights sit over the top-left: the sidebar header reserves 84 px and
   drops the mark; collapsed (⌘B), the toggle + New chat sit next to the lights. The
   sidebar header and the empty chat-header space are the drag regions ([data-calm-drag],
   read by nico-native-shell.js → Swift performDrag). Electron gets the same geometry. */
:root[data-skin="calm"].nico-native-mac .calm-sb-top,
:root[data-skin="calm"]:not(.nico-browser) .calm-sb-top { padding-left: var(--calm-mac-lights); }
:root[data-skin="calm"].nico-native-mac .calm-sb-top .mk,
:root[data-skin="calm"].nico-native-mac .calm-sb-top .nm,
:root[data-skin="calm"]:not(.nico-browser) .calm-sb-top .mk,
:root[data-skin="calm"]:not(.nico-browser) .calm-sb-top .nm { display: none; }
:root[data-skin="calm"].nico-native-mac body.sidebar-collapsed .col-head,
:root[data-skin="calm"]:not(.nico-browser) body.sidebar-collapsed .col-head { padding-left: var(--calm-mac-lights); }
:root[data-skin="calm"].nico-native-mac .calm-flead,
:root[data-skin="calm"]:not(.nico-browser) .calm-flead { left: var(--calm-mac-lights); }

/* ============================================================
   MENUS (the one shadow: --calm-float) — account · More · row ⋯ · header ⋯ · `+`
   ============================================================ */
.calm-fmenu { position: fixed; z-index: 60; min-width: 240px; max-width: calc(100vw - 24px); background: var(--calm-bubble); border-radius: 14px;
  box-shadow: var(--calm-float); padding: 6px; font-family: var(--sans); color: var(--calm-ink); }
.calm-fmenu[hidden] { display: none; }
.calm-fmenu .mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 9px; border: 0; background: none;
  font: 400 var(--calm-fs-small)/1.3 var(--sans); color: var(--calm-ink); text-align: left; cursor: pointer; text-decoration: none; }
.calm-fmenu .mi:hover, .calm-fmenu .mi:focus-visible { background: color-mix(in oklch, var(--calm-ink) 8%, transparent); outline: none; }
.calm-fmenu .mi[aria-disabled="true"] { color: var(--calm-meta); cursor: default; }
.calm-fmenu .mi .calm-ic { color: var(--calm-ink-2); }
.calm-fmenu .mi .r { margin-left: auto; color: var(--calm-meta); font-size: var(--calm-fs-meta); font-weight: 500; white-space: nowrap; }
.calm-fmenu .mi .kbd { margin-left: auto; font: 500 13px/1 var(--sans); color: var(--calm-meta); letter-spacing: 0.02em; }
.calm-fmenu .mi[aria-checked="true"] .r { color: var(--calm-ink); font-weight: 600; }
.calm-fmenu .sep { height: 1px; background: var(--calm-hair); margin: 6px 4px; }
.calm-fmenu .mh { padding: 8px 10px 4px; font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calm-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; margin: 4px 6px 6px; border-radius: 10px; background: var(--calm-ground); box-shadow: inset 0 0 0 1px var(--calm-hair); }
.calm-seg button { height: 30px; border-radius: 8px; border: 0; background: none; cursor: pointer; font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink-2); }
.calm-seg button[aria-checked="true"] { background: var(--calm-bubble); color: var(--calm-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--calm-hair-strong); }

/* ============================================================
   COMPOSER: one rounded field, `+` left, send right (spec §3 .calm-comp). The chips that
   lived on the bar (model, ⚡ tools, usage, plan first, background) move into `+`.
   ============================================================ */
:root[data-skin="calm"] #composer { padding: 10px 24px 18px; border-top: 0; background: var(--calm-ground); }
:root[data-skin="calm"] #composer > * { max-width: var(--calm-col); margin-left: auto; margin-right: auto; }
:root[data-skin="calm"] #composer .composer-box { display: flex; align-items: flex-end; gap: 8px; min-height: 58px; padding: 7px;
  border: 0; border-radius: 20px; background: var(--calm-raised); box-shadow: inset 0 0 0 1px var(--calm-hair-strong); }
:root[data-skin="calm"] #composer .composer-box:focus-within { border: 0; box-shadow: inset 0 0 0 1.5px var(--calm-accent); }
:root[data-skin="calm"] #composer .composer-box textarea { order: 1; flex: 1; min-width: 0; align-self: center; padding: 6px 2px; min-height: 22px;
  font: 400 16px/1.5 var(--sans); color: var(--calm-ink); max-height:min(240px,30vh); overflow-y:auto; scrollbar-width:thin; }
:root[data-skin="calm"] #composer .composer-box textarea::placeholder { color: var(--calm-meta); }
:root[data-skin="calm"] #composer .composer-bar { display: contents; }
:root[data-skin="calm"] #composer .composer-bar > :not(#sendBtn):not(#stopBtn):not(.nx-stop):not(.stop):not(#addContextBtn) { display: none !important; }
:root[data-skin="calm"] #composer #addContextBtn { order: 2; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--calm-ink); font-size: 12px; }
:root[data-skin="calm"] #composer #addContextBtn:not([hidden]) { display: inline-flex; }
:root[data-skin="calm"] #composer #sendBtn { order: 2; width: 44px; height: 44px; border-radius: 14px; box-shadow: none; flex: none;
  background: var(--calm-bubble); color: var(--calm-meta); }
:root[data-skin="calm"] #composer .composer-box:has(textarea:not(:placeholder-shown)) #sendBtn { background: var(--calm-accent); color: var(--calm-on-accent); }
:root[data-skin="calm"] #composer .composer-hint { display: none; }
@media (max-width: 700px) {
  :root[data-skin="calm"] #composer .composer-box textarea { max-height:min(160px,30vh); }
}
@media (max-width: 420px) {
  :root[data-skin="calm"] #composer .composer-box:has(#addContextBtn:not([hidden])) { flex-wrap: wrap; }
  :root[data-skin="calm"] #composer .composer-box:has(#addContextBtn:not([hidden])) textarea { flex-basis: calc(100% - 60px); }
  :root[data-skin="calm"] #composer #addContextBtn { margin-left: auto; }
}
.calm-plus { order: 0; width: 44px; height: 44px; border-radius: 14px; border: 0; background: none; display: grid; place-items: center; color: var(--calm-ink-2); flex: none; cursor: pointer; }
.calm-plus:hover, .calm-plus[aria-expanded="true"] { background: var(--calm-bubble); color: var(--calm-ink); }
.calm-usage { text-align: center; margin: 0 auto 8px; font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); }
.calm-usage a { color: var(--calm-ink); font-weight: 600; text-decoration: none; }
.calm-usage[hidden] { display: none; }

/* ============================================================
   ⌘K PALETTE (spec §3 "Menus / palette / sheets"): the same #cmdk, calm grammar
   ============================================================ */
:root[data-skin="calm"] #cmdkScrim { background: oklch(0 0 0 / 0.32); }
:root[data-skin="calm"] #cmdk { width: min(640px, calc(100% - 32px)); background: var(--calm-raised); border: 0; border-radius: 16px; box-shadow: var(--calm-float); padding: 0; overflow: hidden; }
:root[data-skin="calm"] #cmdk .cmdk-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0; }
:root[data-skin="calm"] #cmdk .cmdk-input { height: 52px; padding: 0 16px; gap: 10px; border: 0; border-bottom: 1px solid var(--calm-hair); border-radius: 0; background: transparent; margin: 0; box-shadow: none; }
:root[data-skin="calm"] #cmdk .cmdk-input svg { color: var(--calm-ink-2); }
:root[data-skin="calm"] #cmdk .cmdk-input input { font: 400 16px/1 var(--sans); color: var(--calm-ink); background: transparent; }
:root[data-skin="calm"] #cmdk .cmdk-list { padding: 6px; }
:root[data-skin="calm"] #cmdk .cmdk-group { padding: 8px 10px 4px; font: 500 var(--calm-fs-meta)/1.2 var(--sans); color: var(--calm-meta); text-transform: none; letter-spacing: 0; }
:root[data-skin="calm"] #cmdk .cmdk-item { min-height: 40px; padding: 8px 10px; border-radius: 9px; border: 0; background: none; font: 500 var(--calm-fs-small)/1.3 var(--sans); color: var(--calm-ink); }
:root[data-skin="calm"] #cmdk .cmdk-item:hover, :root[data-skin="calm"] #cmdk .cmdk-item:focus-visible { background: var(--calm-bubble); outline: none; }
:root[data-skin="calm"] #cmdk .cmdk-item small, :root[data-skin="calm"] #cmdk .cmdk-item .cmdk-preview { font: 400 var(--calm-fs-meta)/1.35 var(--sans); color: var(--calm-meta); }
:root[data-skin="calm"] #cmdk .cmdk-item .cic { color: var(--calm-ink-2); background: none; border: 0; }
:root[data-skin="calm"] #cmdk .cmdk-item .ck { font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-meta); background: none; border: 0; }
:root[data-skin="calm"] #cmdk mark { background: none; color: var(--calm-ink); font-weight: 600; }
:root[data-skin="calm"] #cmdk .cmdk-footer { border-top: 1px solid var(--calm-hair); font: 500 var(--calm-fs-meta)/1.2 var(--sans); color: var(--calm-meta); background: transparent; }

/* ============================================================
   TODAY as a calm list (spec §6.2): one 720 px column, flat rows, headline once.
   Same Today module + markup (every rail it carries stays); Calm restyles it.
   ============================================================ */
:root[data-skin="calm"] #todayScroll { padding: 28px 24px 72px; background: var(--calm-ground); }
:root[data-skin="calm"] #todayView { max-width: var(--calm-col); }
:root[data-skin="calm"] #todayView .today-grid { display: flex; flex-direction: column; gap: 28px; }
:root[data-skin="calm"] #todayView .t-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
:root[data-skin="calm"] #todayView .today-head { max-width: none; margin-bottom: 8px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
:root[data-skin="calm"] #todayView .today-head > .calm-tav { grid-row: 1 / span 2; --av-size: 32px; }
:root[data-skin="calm"] #todayView .today-head > :not(.calm-tav) { grid-column: 2; }
:root[data-skin="calm"] #todayView .today-eyebrow { font: 500 var(--calm-fs-meta)/1.2 var(--sans); text-transform: none; letter-spacing: 0; color: var(--calm-meta); margin: 0 0 2px; }
:root[data-skin="calm"] #todayView .today-head h1,
:root[data-skin="calm"] #todayView .nx-greet,
:root[data-skin="calm"] #todayView .today-narrative { font: 600 var(--calm-fs-display)/1.25 var(--sans); letter-spacing: -0.02em; color: var(--calm-ink); margin: 0; }
:root[data-skin="calm"] #todayView .today-head > p,
:root[data-skin="calm"] #todayView .nx-headline { grid-column: 1 / -1; margin: 6px 0 0; font: 400 var(--calm-fs-body)/1.45 var(--sans); color: var(--calm-ink-2); }
/* cards become sections: no fill, no border, no shadow; a hairline between rows */
:root[data-skin="calm"] #todayView .card,
:root[data-skin="calm"] #todayView .t-card,
:root[data-skin="calm"] #todayView .nx .card,
:root[data-skin="calm"] #todayView [class*="-card"]:not(button):not(.gate-card) { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
:root[data-skin="calm"] #todayView h2, :root[data-skin="calm"] #todayView h3,
:root[data-skin="calm"] #todayView .t-h, :root[data-skin="calm"] #todayView .sec-h, :root[data-skin="calm"] #todayView .card-h {
  font: 600 var(--calm-fs-small)/1.2 var(--sans) !important; color: var(--calm-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
:root[data-skin="calm"] #todayView { font-family: var(--sans); color: var(--calm-ink); }
:root[data-skin="calm"] #todayView [class*="mono"], :root[data-skin="calm"] #todayView .t-meta { font-family: var(--sans); }
:root[data-skin="calm"] #todayView .glow, :root[data-skin="calm"] #todayView [class*="glow"] { box-shadow: none !important; }

/* ============================================================
   AVATAR placements (renderer/nico-avatar.css + INTEGRATION.md §4)
   ============================================================ */
/* assistant group (INTEGRATION §4.4: "grid column 20 px + 8 px gap"): the FIRST turn of a
   group carries a 20 px avatar in a 28 px gutter, aligned with the turn's first row (the
   activity slot when there is one, else the bubble); later turns keep the gutter, no avatar.
   The chat thread's .turn is the thread lane's one-column block, so the avatar is an extra
   node on .turn (never inside .turn-body, whose order the slot rail relies on). The GTM /
   Code threads keep the classic .turn row, so there it takes the legacy .nico-ic glyph's place. */
/* ONE gutter: the thread lane's .turn already reserves the 20 px .nico-ic column + 8 px gap
   (nico-calm.css), so the avatar sits IN that column — no second 28 px padding (the two
   together indented every assistant bubble 56 px; Calm F finding). */
:root[data-skin="calm"] #threadChat .turn.calm-grp-first,
:root[data-skin="calm"] #threadChat .turn.calm-grp-next { position: relative; padding-left: 0; }
:root[data-skin="calm"] #threadChat .turn > .calm-turn-av { position: absolute; left: 0; top: 11px; --av-size: 20px; }
:root[data-skin="calm"] #threadChat .turn:has(> .turn-body > .calm-slot) > .calm-turn-av { top: 2px; }
:root[data-skin="calm"] .turn > .nico-ic.calm-avslot { background: none !important; border: 0 !important; box-shadow: none !important; width: 20px; height: 20px; min-width: 20px; padding: 0; }
:root[data-skin="calm"] .turn > .nico-ic.calm-avslot > svg { display: none; }
:root[data-skin="calm"] .turn > .nico-ic.calm-avslot > .nico-av { --av-size: 20px; }
:root[data-skin="calm"] #threadCowork .turn.calm-grp-next > .nico-ic,
:root[data-skin="calm"] #thread .turn.calm-grp-next > .nico-ic { visibility: hidden; }
/* the new-chat hero: 96 px, idle, centred above the greeting; the legacy glyph tile hides */
:root[data-skin="calm"] .thread-empty .te-mark,
:root[data-skin="calm"] .thread-empty .te-t,
:root[data-skin="calm"] .thread-empty .te-m { display: none; }
.calm-hero { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 520px; font-family: var(--sans); }
.calm-hero .nico-av { --av-size: 96px; }
.calm-hero h1 { margin: 16px 0 0; font: 600 var(--calm-fs-display)/1.25 var(--sans); letter-spacing: -0.02em; color: var(--calm-ink); }
.calm-hero .sub { margin-top: 6px; min-height: 1.4em; font: 400 var(--calm-fs-small)/1.4 var(--sans); color: var(--calm-ink-2); }
.calm-hero .sub b { color: var(--calm-ink); font-weight: 600; }
.calm-sugs { width: 100%; margin-top: 22px; text-align: left; }
.calm-sug { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; background: none; cursor: pointer;
  font: 400 var(--calm-fs-small)/1.35 var(--sans); color: var(--calm-ink); text-align: left; border-radius: var(--calm-r-ctl); }
.calm-sug + .calm-sug { border-top: 1px solid var(--calm-hair); border-radius: 0; }
.calm-sug:hover { background: color-mix(in oklch, var(--calm-bubble) 60%, transparent); }
.calm-sug .ar { margin-left: auto; color: var(--calm-meta); }
.calm-sug .calm-ic { color: var(--calm-ink-2); }
.calm-sug .mu { color: var(--calm-meta); }
:root[data-skin="calm"] .thread-empty { min-height: 100%; padding: 40px 24px 120px; font-family: var(--sans); }

/* the screen-reader status line (announces avatar-state words, INTEGRATION §6) */
.calm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* a closed drawer sits just off the right edge; its classic shadow bled 60 px into the
   viewport. Calm has one shadow (--calm-float) and only on what is actually open. */
:root[data-skin="calm"] .drawer:not(.on) { box-shadow: none; }
/* Today: a count is a number in meta ink, never an accent pill (status is never blue, §2.4) */
:root[data-skin="calm"] #todayView .count,
:root[data-skin="calm"] #todayView .count.acc { background: none; color: var(--calm-meta); font: 500 var(--calm-fs-meta)/1 var(--sans); padding: 0; }
/* no backdrop-filter anywhere (spec §10 check 3): the scrims are a flat tint */
:root[data-skin="calm"] .scrim, :root[data-skin="calm"] #cmdkScrim, :root[data-skin="calm"] .drawer-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-skin="calm"] #cmdkScrim.on { background: oklch(0 0 0 / 0.32); }
:root[data-skin="calm"] #cmdk .cmdk-clear { border: 0; background: none; font: 500 var(--calm-fs-meta)/1 var(--sans); color: var(--calm-ink-2); padding: 8px 4px; box-shadow: none; }
#calmRowMenu, #calmHeadMenu { min-width: 200px; }

/* F: offline banner at the composer edge + the boot "Saved copy · updating…" meta line */
:root[data-skin="calm"] .calm-offline-banner { display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto 8px; padding: 6px 12px; border: 1px solid var(--calm-hair-strong); border-radius: var(--calm-r-pill);
  font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink); background: var(--calm-ground); }
:root[data-skin="calm"] .calm-offline-banner[hidden] { display: none; }
:root[data-skin="calm"] .calm-offline-banner svg { width: 14px; height: 14px; color: var(--calm-warn-ink); flex: none; }
:root[data-skin="calm"] body.calm-offline #sendBtn:not(.stop) { background: var(--calm-bubble) !important; color: var(--calm-ink-2) !important; cursor: not-allowed; }
:root[data-skin="calm"] .calm-saved-copy { align-self: center; font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); padding: 4px 0 8px; }

/* F: the artifact pane (spec §3): its own 52 px header, readable table, a 50-row window */
:root[data-skin="calm"] .calm-pane-head { flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--calm-hair); background: var(--calm-ground); }
:root[data-skin="calm"] .calm-pane-head[hidden] { display: none; }
:root[data-skin="calm"] .calm-pane-head .cph-t { font: 600 var(--calm-fs-title)/1.2 var(--sans); color: var(--calm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:root[data-skin="calm"] .calm-pane-head .cph-m { font: 500 var(--calm-fs-meta)/1.2 var(--sans); color: var(--calm-meta); white-space: nowrap; }
:root[data-skin="calm"] .calm-pane-head .cph-sp { flex: 1; }
:root[data-skin="calm"] .calm-pane-head .cph-btn { height: 32px; padding: 0 12px; border: 0; border-radius: var(--calm-r-ctl); background: var(--calm-raised); box-shadow: inset 0 0 0 1px var(--calm-hair-strong);
  font: 600 var(--calm-fs-small)/1 var(--sans); color: var(--calm-ink); cursor: pointer; display: inline-flex; align-items: center; }
:root[data-skin="calm"] .calm-pane-head .cph-btn[hidden] { display: none; }
:root[data-skin="calm"] .calm-pane-head .cph-x { width: 32px; padding: 0; justify-content: center; background: none; box-shadow: none; }
:root[data-skin="calm"] .calm-pane-head .cph-x svg { width: 16px; height: 16px; }
:root[data-skin="calm"] #canvasTabs .ctab { font: 500 var(--calm-fs-small)/1 var(--sans); color: var(--calm-ink-2); }
:root[data-skin="calm"] #canvasTabs .ctab.on { color: var(--calm-ink); }
:root[data-skin="calm"] #canvasTabs .ctab.on::after { background: var(--calm-ink); }
:root[data-skin="calm"] #canvasTabs .ctab .tdot { display: none; }
:root[data-skin="calm"] #canvasTabs .ctab .badge { font: 500 var(--calm-fs-meta)/1.3 var(--sans); background: none; border: 0; color: var(--calm-meta); padding: 0; }
:root[data-skin="calm"] #canvas-col .data-top .dtitle { font: 600 var(--calm-fs-small)/1.3 var(--sans); color: var(--calm-ink); }
:root[data-skin="calm"] #canvas-col .data-top .dmeta { font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); }
:root[data-skin="calm"] #canvas-col table.grid { font: 400 var(--calm-fs-small)/1.35 var(--sans); counter-reset: calmri; }
:root[data-skin="calm"] #canvas-col table.grid thead th { font: 600 var(--calm-fs-meta)/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--calm-meta); background: var(--calm-raised); box-shadow: 0 1px 0 var(--calm-hair); }
:root[data-skin="calm"] #canvas-col table.grid tbody td { color: var(--calm-ink); }
:root[data-skin="calm"] #canvas-col table.grid tbody tr:nth-child(even) { background: none; }
:root[data-skin="calm"] #canvas-col table.grid.calm-grid tbody tr { counter-increment: calmri; }
:root[data-skin="calm"] #canvas-col table.grid.calm-grid tbody tr > td:first-child::before { content: counter(calmri); display: inline-block; min-width: 2.2em; margin-right: 8px; color: var(--calm-meta); font: 500 var(--calm-fs-meta)/1 var(--sans); font-variant-numeric: tabular-nums; }
:root[data-skin="calm"] #canvas-col table.grid tbody tr.calm-row-hid { display: none; }
:root[data-skin="calm"] .calm-pane-more { padding: 10px 16px 14px; font: 500 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-meta); }
:root[data-skin="calm"] .calm-pane-more .calm-pane-next { border: 0; background: none; padding: 0; font: 600 var(--calm-fs-meta)/1.3 var(--sans); color: var(--calm-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* F: the pane's own tools read ≥ 12 px in AA meta ink (probe: 10–10.5 px at 4.39:1) */
:root[data-skin="calm"] #canvas-col .prov-chip,
:root[data-skin="calm"] #canvas-col .canvas-tabs button:not(.ctab),
:root[data-skin="calm"] #canvas-col .art-toolbar button { font: 500 var(--calm-fs-meta)/1.3 var(--sans) !important; color: var(--calm-meta) !important; letter-spacing: 0 !important; text-transform: none !important; }
:root[data-skin="calm"] #canvasMax { font: 500 var(--calm-fs-meta)/1.3 var(--sans) !important; color: var(--calm-meta) !important; }