/* observatory.css — the Observatory system over the base vocabulary in
   app.css. Loaded last, so every rule here wins: pill buttons outlined in
   near-white, hairline separation, Inter at 510/590, no fill, no shadow, no
   colour. Anything a coach must not miss is said by weight and words. */

html, body { font: var(--w-body) var(--fs-body)/var(--lh-body) var(--sans); letter-spacing: var(--ls-body); background: var(--bg); color: var(--text); }
body { min-height: 100%; }

/* ---- the top bar: sticky, 56px, one hairline under it ---- */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--onyx); border-bottom: 1px solid var(--smoke); }
.topbar-in { display: flex; align-items: center; gap: 16px; min-height: var(--bar-h); max-width: var(--page); margin: 0 auto; padding: 0 24px; }
/* the header: taller than the rest of the system's 56, because the mark
   deserves the room — the logo's plate and wings at 56px, the rune-cut
   wordmark beside it */
.topbar-in { min-height: 126px; gap: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 6px; }
.wordmark .wm-mark { width: 150px; height: 110px; display: block; }
.wordmark .wm-word { width: 147px; height: 30px; display: block; }
.wordmark:hover { text-decoration: none; opacity: .92; }
.tabs.pin { top: 126px; }
.nav-a { padding: 6px 7px; }
.wordmark:hover { text-decoration: none; }
.nav-a.on { color: var(--violet-light); background: var(--carbon); }
.nav-n { color: var(--violet-light); }
.btn-primary { background: var(--violet); border-color: var(--violet); color: var(--snow); }
.btn-primary:hover { background: var(--violet-light); border-color: var(--violet-light); }
.tab.on { color: var(--violet-light); box-shadow: inset 0 -2px 0 var(--violet); }
.pill.on { border-color: var(--violet); color: var(--snow); }
.mark::before { background: var(--violet-light); }
.stat.k-loud b { color: var(--violet-light); }
.cal-day.is-today, .cal-cell.is-today { border-color: var(--violet); }
a:hover { color: var(--violet-light); }
input:focus, textarea:focus, select:focus { border-color: var(--violet) !important; }
.client-row:hover .em, .rowlink:hover .em { color: var(--violet-light); }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; flex: 1 1 auto; min-width: 0; }
.nav-a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: var(--r-pill); font: var(--w-head) var(--fs-small)/1 var(--sans); letter-spacing: var(--ls-small); color: var(--fog); text-decoration: none; white-space: nowrap; }
.nav-a:hover { color: var(--snow); text-decoration: none; }
.nav-a.on { color: var(--snow); background: var(--carbon); }
.nav-n { font: var(--w-em) var(--fs-caption)/1 var(--sans); letter-spacing: var(--ls-caption); color: var(--snow); }
.nav-n[hidden] { display: none; }
.nav-a[hidden] { display: none; }   /* a door not for this profile (Requests) stays shut */
.topbar-r { display: flex; align-items: center; gap: 12px; flex: none; }
.tag { font: var(--w-head) 11px/1 var(--sans); letter-spacing: 0; color: var(--fog); background: var(--carbon); border: 1px solid var(--ash); border-radius: var(--r-input); padding: 4px 6px; }
.tag[hidden] { display: none; }

/* ---- the page: one column, 1080 wide ---- */
.main { display: block; max-width: var(--page); margin: 0 auto; padding: 0 24px; overflow: visible; }
.view { padding: 32px 0 var(--gap-sect); }
.view[hidden] { display: none; }   /* nothing below may out-rank this: a rule that did left an empty Today
                                      section standing 80px tall above every other face */
.prose { max-width: var(--prose); }

/* ---- type ---- */
h1 { font: var(--w-head) var(--fs-h2)/var(--lh-h2) var(--display); letter-spacing: var(--ls-h2); color: var(--snow); margin: 0 0 4px; }
h2 { font: var(--w-head) var(--fs-lead)/var(--lh-lead) var(--display); letter-spacing: var(--ls-lead); color: var(--snow); margin: 0 0 8px; }
h3 { font: var(--w-head) var(--fs-body)/var(--lh-body) var(--display); letter-spacing: var(--ls-body); color: var(--snow); margin: 0 0 6px; }
.display { font: var(--w-head) var(--fs-h1)/var(--lh-h1) var(--display); letter-spacing: var(--ls-h1); color: var(--snow); }
.view-head { align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--ash); margin-bottom: 24px; }
.view-head .acts .btn { white-space: nowrap; }   /* a head's button keeps to one line however long the lead runs */
.eyebrow { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); text-transform: none; color: var(--fog); }
.mono { font: var(--w-body) var(--fs-small)/var(--lh-mono) var(--mono); letter-spacing: var(--ls-mono); color: var(--fog); }
p { margin: 0 0 8px; color: var(--mist); }
b, strong { font-weight: var(--w-em); color: var(--snow); }
.em { font-weight: var(--w-em); color: var(--snow); }
.quiet { color: var(--fog); }
.hair { border-top-color: var(--smoke); }
a { color: var(--snow); font-weight: var(--w-head); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- surfaces: a hairline and one step of gray, never a shadow ---- */
.card, .panel, .four > section, .lane-col, .cal-day, .cal-cell, .soc-day, .tile, .wd-card, .bubble, .soc-edit, .cl-queue, .wd-decided { background: var(--carbon); border: 1px solid var(--smoke); border-radius: var(--r-card); box-shadow: none; }
.card, .panel { padding: var(--pad-card); }
.lane-col { border-left: 1px solid var(--smoke); padding: 14px 16px 8px; }
.lane-sw { border-radius: 2px; }
.soc-card { background: var(--graphite); border-color: var(--smoke); border-left: 2px solid var(--p-color, var(--ash)); border-radius: var(--r-input); }
.hc-card, .hc-addmenu { background: var(--carbon); border-color: var(--smoke); box-shadow: none; }
.toast { background: var(--graphite); border: 1px solid var(--ash); color: var(--snow); font: var(--w-head) var(--fs-ui)/1.4 var(--sans); border-radius: var(--r-card); }
.toast.actionable { border-color: var(--snow); }
.toast.actionable::after { color: var(--fog); }
.peek { background: var(--graphite); border-color: var(--ash); }

/* ---- controls: outlined pills, ghost text, calm inputs ---- */
.btn, .hc-add, .hc-save-lay, .hc-reset, .pk-open, .pk-act, .cal-x, .soc-step, .variant {
  font: var(--w-head) var(--fs-ui)/1 var(--sans); letter-spacing: var(--ls-ui); padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--snow); background: transparent; color: var(--snow); cursor: pointer; text-transform: none; box-shadow: none; }
.btn:hover, .hc-add:hover, .hc-save-lay:hover, .hc-reset:hover { background: var(--inset); border-color: var(--snow); color: var(--snow); text-decoration: none; }
.btn-primary { background: transparent; border-color: var(--snow); color: var(--snow); }
.btn-primary:hover { background: var(--inset); }
.btn-quiet, .pk-act, .cal-x, .variant, .soc-step { border-color: transparent; color: var(--fog); padding: 8px 10px; }
.btn-quiet:hover, .pk-act:hover, .cal-x:hover, .variant:hover, .soc-step:hover { color: var(--snow); border-color: transparent; background: var(--inset); }
.variant.on, .soc-step.on { color: var(--snow); border-color: var(--ash); background: var(--carbon); cursor: default; }
.soc-step.off { color: var(--steel); opacity: 1; }
.btn:disabled { opacity: .45; border-color: var(--steel); color: var(--steel); cursor: not-allowed; }
.btn.small { font-size: var(--fs-small); padding: 6px 12px; }
input, textarea, select { font: var(--w-body) var(--fs-ui)/1.4 var(--sans); letter-spacing: var(--ls-ui); color: var(--snow); background: var(--carbon); border: 1px solid var(--smoke); border-radius: var(--r-input); padding: 6px 10px; min-height: 32px; }
input::placeholder, textarea::placeholder { color: var(--fog); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--snow); width: 14px; height: 14px; min-height: 0; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ash); }
button:focus-visible, a:focus-visible { outline: 1px solid var(--ferrite); outline-offset: 2px; }
.chip { font: var(--w-head) 11px/1 var(--sans); letter-spacing: 0; text-transform: none; padding: 3px 6px; border-radius: var(--r-input); border: 1px solid var(--ash); color: var(--fog); background: var(--carbon); }
.chip-live, .chip-staged { color: var(--mist); border-color: var(--ash); }
.demo-badge { font: var(--w-head) 11px/1 var(--sans); letter-spacing: 0; text-transform: none; border-color: var(--ash); color: var(--fog); border-radius: var(--r-input); }

/* ---- lists and rows ---- */
.row, .client-row, .hc-notif-row, .pk-row { border-bottom: 1px solid var(--smoke); border-radius: 0; font-size: var(--fs-ui); color: var(--mist); }
.row:last-child, .client-row:last-child, .hc-notif-row:last-child { border-bottom: 0; }
.client-row:hover, .hc-notif-row:hover { background: var(--inset); color: var(--snow); }
.row .when, .client-row .when, .hc-notif-row .w, .pk-row .w, .soc-day-h .when, .soc-card-h .when, .cal-ev .k { font: var(--w-body) var(--fs-small)/1.4 var(--sans); letter-spacing: var(--ls-small); color: var(--fog); }
.dot { background: var(--fog); width: 6px; height: 6px; }
.dot.ok { background: var(--chalk); } .dot.alert { background: var(--snow); } .dot.accent { background: var(--chalk); }
.ball { background: var(--snow); width: 6px; height: 6px; } .ball.them { border-color: var(--ash); background: none; }
.empty, .hc-empty { color: var(--fog); font-style: normal; font-size: var(--fs-ui); }
.err { color: var(--snow); font-family: var(--mono); font-size: var(--fs-small); }
.kpi b { font: var(--w-head) var(--fs-h2)/1 var(--display); letter-spacing: var(--ls-h2); color: var(--snow); }
.kpi.k-zero b { color: var(--fog); }
.kpi.k-alert b { color: var(--snow); font-weight: var(--w-em); }
.four-k, .tile-k, .pk-title, .cal-day-h, .cal-dows, .soc-day-h, .lane-head h2 { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); text-transform: none; color: var(--fog); }
.tile-v { font: var(--w-head) var(--fs-h3)/var(--lh-h3) var(--display); letter-spacing: var(--ls-h3); color: var(--snow); }
.tile.off .tile-v, .tile-v.none { font: var(--w-body) var(--fs-ui)/1.4 var(--sans); color: var(--fog); }

/* ---- the book, the calendar, the verbs: colour becomes a gray step ---- */
.cal-day.is-today, .cal-cell.is-today { border-color: var(--ferrite); }
.cal-day.is-today .cal-day-h { color: var(--snow); }
.cal-ev { background: var(--graphite); border-left: 2px solid var(--p-color, var(--ash)); border-radius: var(--r-input); color: var(--snow); font-size: var(--fs-small); }
.cal-num:hover, .cal-more:hover, .soc-day-h:hover, .hc-caret:hover, .hc-x:hover { color: var(--snow); }
.bubble.out { background: var(--graphite); border-color: var(--ash); }
.bubble.assistant { border-style: dashed; border-color: var(--ash); }
.stale { border-color: var(--ferrite); background: var(--graphite); }
.wd-quote { border-left-color: var(--ash); color: var(--mist); }
.wd-head .grow { color: var(--snow); font-weight: var(--w-head); }
.soc-status-idea { border-left-color: var(--steel); }
.soc-status-draft { border-left-color: var(--fog); background: var(--graphite); }
.soc-status-approved { border-left-color: var(--chalk); }
.soc-status-posted { border-left-color: var(--snow); }
.soc-status-other { border-left-color: var(--ash); }
.soc-list input { accent-color: var(--chalk); }
/* seven narrow columns: the platform label sits ABOVE the title, so the title wraps by word, never by letter */
.soc-card-h { flex-wrap: wrap; gap: 2px 8px; }
.soc-card-h .grow { flex: 1 1 100%; overflow-wrap: break-word; word-break: normal; }
.soc-card-h .when { order: -1; }
.cal-ev.cal-event .t { color: var(--mist); }
.hc-card.dragging, .hc-card.resizing { border-color: var(--ferrite); }
.hc-notif-row:hover { background: var(--inset); }

/* ---- v2 vocabulary: tables, tabs, markers, stats ---- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); padding: 0 12px 8px 0; border-bottom: 1px solid var(--ash); white-space: nowrap; }
.tbl td { font-size: var(--fs-ui); color: var(--mist); padding: 9px 12px 9px 0; border-bottom: 1px solid var(--smoke); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.em, .tbl td .em { color: var(--snow); font-weight: var(--w-em); }
.tbl .r { text-align: right; }
.tbl tr.rowlink { cursor: pointer; }
.tbl tr.rowlink:hover td { background: var(--inset); color: var(--snow); }
.tabs { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 20px; }
/* a client page's tabs stay under the top bar as the page scrolls: every view of a client is one click away at any depth */
.tabs.pin { position: sticky; top: var(--bar-h); z-index: 20; background: var(--onyx); padding: 10px 0; margin-top: -10px; border-bottom: 1px solid var(--smoke); }
.tab { font: var(--w-head) var(--fs-ui)/1 var(--sans); letter-spacing: var(--ls-ui); color: var(--fog); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: none; }
.tab:hover { color: var(--snow); text-decoration: none; }
.tab.on { color: var(--snow); }
.mark { display: inline-flex; align-items: center; gap: 8px; font: var(--w-body) var(--fs-small)/1.4 var(--sans); letter-spacing: var(--ls-small); color: var(--fog); }
.mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chalk); flex: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 32px; }
.stat { background: var(--carbon); border: 1px solid var(--smoke); border-radius: var(--r-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.stat b { font: var(--w-head) var(--fs-h2)/1 var(--display); letter-spacing: var(--ls-h2); color: var(--snow); }
.stat.k-zero b { color: var(--fog); }
.stat.k-loud b { font-weight: var(--w-em); }
.stat span { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); }
/* a block that is also a door: the glyph sits top-right, the whole card is the target */
.stat { position: relative; }
.stat .ic { position: absolute; top: 14px; right: 14px; color: var(--fog); }
.stat.k-loud .ic { color: var(--violet-light); }
a.stat-go { text-decoration: none; cursor: pointer; transition: border-color .12s, transform .12s; }
a.stat-go:hover, a.stat-go:focus-visible { border-color: var(--violet-light); text-decoration: none; transform: translateY(-1px); outline: none; }
a.stat-go:hover .ic, a.stat-go:focus-visible .ic { color: var(--violet-light); }
a.stat-go span::after { content: " →"; color: var(--violet-light); opacity: 0; transition: opacity .12s; }
a.stat-go:hover span::after, a.stat-go:focus-visible span::after { opacity: 1; }
/* ── two spaces (phone.js, §18): the header's icons, the phone's own nav ──── */
.spaces { display: flex; flex-direction: column; gap: 4px; flex: none; margin-right: 6px; }
.space-a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); border: 1px solid transparent; color: var(--fog); text-decoration: none; font: var(--w-head) var(--fs-small)/1 var(--sans); letter-spacing: var(--ls-small); }
.space-a:hover { color: var(--snow); text-decoration: none; border-color: var(--ash); }
.space-a.on { color: var(--snow); background: var(--carbon); border-color: var(--violet-light); }
.space-a.on svg { color: var(--violet-light); }
.nav-phone { display: none; }
body.space-phone .nav-phone { display: flex; }
body.space-phone #nav, body.space-phone #ctaCheckins { display: none; }
.ph-threads { display: flex; flex-direction: column; gap: 8px; }
.ph-thread { background: var(--carbon); border: 1px solid var(--smoke); border-radius: var(--r-card); padding: 10px 14px; }
.ph-thread.new { border-color: var(--violet-deep); }
.ph-thread summary { cursor: pointer; list-style: none; } .ph-thread summary::-webkit-details-marker { display: none; }
.ph-msg { border-top: 1px solid var(--smoke); padding: 8px 0 4px; }
.ph-msg.new .ph-msg-t { color: var(--snow); }
.ph-msg-t { white-space: pre-wrap; } .ph-msg-m { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); }
.ph-note.new .em { color: var(--violet-light); }
.ph-app { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); border: 1px solid var(--ash); border-radius: var(--r-pill); padding: 2px 8px; margin-right: 6px; }
.ph-note.social .ph-app { border-color: var(--violet-deep); color: var(--violet-light); }
.ph-text { color: var(--mist); }
.ph-code { font: 600 22px/1.3 var(--mono); letter-spacing: .08em; color: var(--snow); background: var(--carbon); border: 1px solid var(--ash); border-radius: var(--r-card); padding: 10px 14px; display: inline-block; }
.ph-code.small { font-size: 14px; letter-spacing: .02em; }
.cal-phone { border-style: dashed; }
/* many calendars (phone.js): a dot per calendar, coloured by its place in the list */
.ph-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--fog); }
.ph-dot.c0 { background: var(--violet-light); } .ph-dot.c1 { background: var(--snow); } .ph-dot.c2 { background: var(--violet); }
.ph-dot.c3 { background: var(--mist); } .ph-dot.c4 { background: var(--violet-deep); } .ph-dot.c5 { background: var(--fog); }
.ph-calname { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); margin-left: 6px; }
.ph-calrow.off .em, .ph-chips .tab.off { color: var(--fog); }
.ph-calrow .acts { display: flex; gap: 4px; flex: none; }

/* ── the gate (console/auth.py): a profile opens the console ─────────────── */
.gate { position: fixed; inset: 0; z-index: 60; background: var(--onyx); display: flex; align-items: center; justify-content: center; padding: 24px; }
.gate[hidden] { display: none; }
body.gated .main, body.gated .cp-dock { visibility: hidden; }
.gate-card { width: 100%; max-width: 380px; background: var(--carbon); border: 1px solid var(--smoke); border-radius: var(--r-card); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.gate-logo { display: block; margin: 0 auto 6px; width: 120px; height: 195px; }
.gate-card h1 { text-align: center; margin: 0; }
.gate-card .quiet { text-align: center; margin: 0 0 6px; }
.gate-card .field { display: flex; flex-direction: column; gap: 4px; }
.gate-card .field[hidden] { display: none; }   /* the name field belongs to setup only */
.gate-card .field label { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); }
.gate-card input { width: 100%; box-sizing: border-box; min-height: 40px; }
.gate-card .btn-primary { margin-top: 6px; background: var(--violet); border-color: var(--violet); }
.gate-err { color: var(--violet-light); margin: 0; font-size: 13px; }
.gate-err[hidden] { display: none; }
.who { font: var(--w-head) var(--fs-caption)/1 var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); border: 1px solid var(--ash); border-radius: var(--r-pill); padding: 6px 10px; white-space: nowrap; }
.who:hover { color: var(--snow); text-decoration: none; border-color: var(--snow); }
.who[hidden], #signout[hidden] { display: none; }

/* ── the Requests face (requests.js): the owner's box of change requests ──── */
.rq-card { background: var(--carbon); border: 1px solid var(--smoke); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 12px; }
.rq-card.done { background: transparent; }
.rq-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.rq-h .grow { min-width: 0; flex: 1 1 auto; }
.rq-h h2 { margin: 2px 0 6px; }
.rq-h .acts { flex: none; }
.rq-chip { display: inline-block; font: var(--w-head) var(--fs-caption)/1 var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); border: 1px solid var(--ash); border-radius: var(--r-pill); padding: 5px 10px; }
.rq-chip.on { color: var(--violet-light); border-color: var(--violet); }
.rq-chip.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-light); margin-right: 7px; animation: cp-pulse 1.2s ease-in-out infinite; }
.rq-chip.ok { color: var(--snow); border-color: var(--snow); }
.rq-chip.no { color: var(--fog); border-style: dashed; }
.rq-sum { max-width: var(--prose); }
.rq-sum p { margin: 0 0 6px; }
.rq-reason { color: var(--mist); }
.rq-fail { color: var(--violet-light); font-size: var(--fs-small); }
.rq-meta { font-size: var(--fs-small); color: var(--mist); margin: 6px 0; }
.rq-gate { font-weight: var(--w-head); color: var(--snow); }
.rq-gate.no { color: var(--violet-light); }
.rq-stat { font: var(--w-body) 12px/1.5 var(--mono); color: var(--fog); margin: 4px 0 8px; white-space: pre-wrap; }
.rq-code summary { cursor: pointer; font: var(--w-head) var(--fs-ui)/1.4 var(--sans); color: var(--snow); }
.rq-diff { font: var(--w-body) 12.5px/1.45 var(--mono); background: var(--onyx); border: 1px solid var(--smoke); border-radius: var(--r-card); padding: 10px 12px; margin: 8px 0 0; max-height: 520px; overflow: auto; white-space: pre; color: var(--mist); }
.rq-diff .rq-add { color: var(--violet-light); }
.rq-diff .rq-del { color: var(--fog); text-decoration: line-through; text-decoration-color: var(--ash); }
.rq-diff .rq-hunk { color: var(--steel); }
.rq-diff .rq-file { color: var(--snow); font-weight: var(--w-head); }

/* ── the Assistant page (copilot.js): a chat that is Claude Code ─────────── */
.nav-ai { color: var(--violet-light); }
.cp-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-side { position: sticky; top: 146px; }
.cp-thread { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-card); text-decoration: none; color: var(--snow); border: 1px solid transparent; }
.cp-thread:hover { background: var(--carbon); text-decoration: none; }
.cp-thread.on { background: var(--carbon); border-color: var(--violet-light); }
.cp-thread-t { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-thread-m { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); color: var(--fog); }
.cp-main { display: flex; flex-direction: column; gap: 10px; min-height: 60vh; }
.cp-avail { background: var(--violet-wash); border: 1px solid var(--violet-deep); border-radius: var(--r-card); padding: 10px 14px; margin: 0; }
.cp-log { flex: 1 1 auto; max-height: calc(100vh - 380px); min-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; }
.cp-msg { border: 1px solid var(--smoke); border-radius: var(--r-card); padding: 12px 16px; max-width: 900px; }
.cp-msg.user { background: var(--carbon); border-color: var(--ash); align-self: flex-end; }
.cp-msg.assistant { background: transparent; }
.cp-msg p { margin: 0 0 8px; } .cp-msg p:last-child { margin-bottom: 0; }
.cp-msg ul, .cp-msg ol { margin: 0 0 8px 20px; padding: 0; } .cp-msg li { margin: 2px 0; }
.cp-msg .cp-h { font-weight: var(--w-em); color: var(--snow); margin-top: 6px; }
.cp-msg code, .cp-tool code { font-family: var(--mono); font-size: 12.5px; background: var(--carbon); border: 1px solid var(--smoke); border-radius: 4px; padding: 1px 5px; }
.cp-code { font-family: var(--mono); font-size: 12.5px; line-height: 1.45; background: var(--carbon); border: 1px solid var(--smoke); border-radius: var(--r-card); padding: 10px 12px; margin: 6px 0 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.cp-tbl { border-collapse: collapse; margin: 6px 0 8px; font-size: 13px; } .cp-tbl th, .cp-tbl td { border-bottom: 1px solid var(--smoke); padding: 4px 10px 4px 0; text-align: left; }
.cp-who { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); margin-bottom: 4px; }
.cp-msg.assistant .cp-who { color: var(--violet-light); }
.cp-tool { max-width: 900px; border-left: 2px solid var(--smoke); padding: 2px 0 2px 12px; color: var(--fog); font-size: 13px; }
.cp-tool.err { border-left-color: var(--violet-light); }
.cp-tool summary { cursor: pointer; list-style: none; } .cp-tool summary::-webkit-details-marker { display: none; }
.cp-tool summary::before { content: "›"; display: inline-block; width: 12px; color: var(--fog); transition: transform .12s; }
.cp-tool[open] summary::before { transform: rotate(90deg); }
.cp-tool-v { color: var(--snow); } .cp-tool-w { font-family: var(--mono); font-size: 12px; }
.cp-done { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); padding: 2px 0 6px; }
.cp-done.err { color: var(--violet-light); }
.cp-status { color: var(--violet-light); font-size: 13px; padding: 0 4px; }
.cp-status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--violet-light); margin-right: 8px; animation: cp-pulse 1.2s ease-in-out infinite; }
@keyframes cp-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.cp-composer { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--smoke); padding-top: 12px; }
.cp-composer textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; background: var(--carbon); color: var(--snow); border: 1px solid var(--ash); border-radius: var(--r-card); padding: 10px 12px; font: 400 14px/1.45 var(--sans); }
.cp-composer textarea:focus { outline: none; border-color: var(--violet-light); }
.cp-acts { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) { .cp-wrap { grid-template-columns: 1fr; } .cp-side { position: static; } }

/* ── the assistant's dock: the same chat, pinned to the right edge of every
   page. The body gives up the dock's width so the header and the page sit
   beside it, never under it; on the Assistant page itself the dock is gone
   (one chat on screen). "Hide" leaves a tab at the bottom-right corner that
   pulses while a turn is still running. ─────────────────────────────────── */
:root { --dock-w: 380px; }
body.dock-open { padding-right: var(--dock-w); }
.cp-dock { position: fixed; top: 0; right: 0; bottom: 0; width: var(--dock-w); z-index: 40; background: var(--onyx); border-left: 1px solid var(--smoke); display: flex; flex-direction: column; }
.cp-dock-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 12px 14px 14px; gap: 8px; }
.cp-dock-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ash); }
.cp-dock-hl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-dock-hl .eyebrow { color: var(--violet-light); }
.cp-dock-title { font: var(--w-head) var(--fs-small)/1.3 var(--sans); color: var(--snow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dock-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.cp-dock-acts .btn.small { padding: 5px 8px; }
.cp-dock .cp-log { flex: 1 1 auto; max-height: none; min-height: 0; padding: 4px 2px 8px; gap: 8px; }
.cp-dock .cp-msg { max-width: none; padding: 10px 12px; font-size: 13.5px; }
.cp-dock .cp-msg.user { align-self: stretch; }
.cp-dock .cp-tool { max-width: none; font-size: 12.5px; }
.cp-dock .cp-tool-w { overflow-wrap: anywhere; }
.cp-dock .cp-composer { padding-top: 10px; }
.cp-dock .cp-composer textarea { min-height: 56px; }
.cp-dock .cp-avail { font-size: var(--fs-small); }
/* hidden: the column collapses to a tab in the corner */
.cp-dock-tab { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 40; align-items: center; gap: 8px; font: var(--w-head) var(--fs-ui)/1 var(--sans); letter-spacing: var(--ls-ui); color: var(--violet-light); background: var(--onyx); border: 1px solid var(--violet); border-radius: var(--r-pill); padding: 10px 14px; cursor: pointer; }
.cp-dock-tab:hover { background: var(--carbon); color: var(--snow); }
.cp-dock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ash); }
.cp-dock.running .cp-dock-dot { background: var(--violet-light); animation: cp-pulse 1.2s ease-in-out infinite; }
.cp-dock.shut { width: auto; border: 0; background: transparent; top: auto; bottom: 0; }
.cp-dock.shut .cp-dock-in { display: none; }
.cp-dock.shut .cp-dock-tab { display: inline-flex; }
/* the Assistant page is the wide version of the same chat: no dock there */
body.view-copilot { padding-right: 0; }
body.view-copilot .cp-dock { display: none; }
/* a narrow window: the dock rides over the page instead of pressing it */
@media (max-width: 1180px) { body.dock-open { padding-right: 0; } }

/* where a Today block lands: the lane it opened, lit for a moment */
.lane-col { scroll-margin-top: 146px; }   /* lands below the sticky header, not under it */
.lane-col.landed { box-shadow: 0 0 0 2px var(--violet-light); border-radius: var(--r-card); animation: landed 1.6s ease-out forwards; }
@keyframes landed { from { box-shadow: 0 0 0 2px var(--violet-light); } to { box-shadow: 0 0 0 2px transparent; } }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.sect { margin-bottom: 32px; }
.sect-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--ash); }
.sect-h h2 { margin: 0; }
.sect-h .quiet { font-size: var(--fs-small); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 64px)); gap: 8px; }
.icon-tile { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--graphite); border: 1px solid var(--smoke); border-radius: var(--r-card); color: var(--snow); font: var(--w-em) var(--fs-lead)/1 var(--display); }
.code { display: block; background: var(--graphite); border: 1px solid var(--smoke); border-radius: var(--r-input); padding: 12px 16px; font: var(--w-body) var(--fs-mono)/var(--lh-mono) var(--mono); letter-spacing: var(--ls-mono); color: var(--snow); overflow-x: auto; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label, .field .lab { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); }
.field input, .field select, .field textarea { width: 100%; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pillrow { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: var(--w-head) var(--fs-caption)/1 var(--sans); letter-spacing: var(--ls-caption); color: var(--mist); border: 1px solid var(--ash); border-radius: var(--r-pill); padding: 5px 10px; }
.pill.on { color: var(--snow); background: var(--carbon); }
.week { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(8, minmax(0, 1fr)); gap: 0; }
.week > div { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--smoke); font-size: var(--fs-small); color: var(--mist); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week > div.h { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); border-bottom: 1px solid var(--ash); }
.week > div.avg { color: var(--snow); font-weight: var(--w-em); }
.cmp { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.cmp > div { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--smoke); font-size: var(--fs-ui); color: var(--mist); overflow-wrap: anywhere; }
.cmp > div.h { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); border-bottom: 1px solid var(--ash); }
.cmp > div.q { color: var(--fog); }
.cmp > div.changed { color: var(--snow); font-weight: var(--w-em); }
.ex { display: grid; grid-template-columns: 32px minmax(0, 2fr) 60px minmax(0, 1.2fr) 80px minmax(0, 2fr); gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--smoke); font-size: var(--fs-ui); color: var(--mist); }
.ex .k { font: var(--w-head) var(--fs-small)/1.4 var(--mono); color: var(--fog); }
.ex .n { color: var(--snow); font-weight: var(--w-head); }
.ex .c { color: var(--fog); font-size: var(--fs-small); }
.ex.h { font: var(--w-head) var(--fs-caption)/var(--lh-caption) var(--sans); letter-spacing: var(--ls-caption); color: var(--fog); border-bottom: 1px solid var(--ash); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; max-width: var(--prose); }
.steps li { counter-increment: s; position: relative; padding: 14px 0 14px 52px; border-bottom: 1px solid var(--smoke); color: var(--mist); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: var(--w-body) var(--fs-small)/1.4 var(--mono); color: var(--fog); }
.steps li > b { display: block; color: var(--snow); font-weight: var(--w-head); margin-bottom: 2px; }
.meal-item { display: grid; grid-template-columns: minmax(90px, 2.4fr) minmax(50px, 1fr) minmax(40px, .8fr) minmax(46px, .9fr) minmax(46px, .9fr) minmax(46px, .9fr) minmax(44px, .9fr) 32px; gap: 6px; align-items: end; }
.meal-item .field { margin-bottom: 8px; min-width: 0; }
.meal-item .field label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal-item input { min-width: 0; padding: 6px 6px; }
.meal-item .btn { padding: 6px 8px; }
.notice { border: 1px solid var(--ferrite); background: var(--graphite); border-radius: var(--r-card); padding: 12px 16px; color: var(--mist); font-size: var(--fs-ui); }
@media (max-width: 900px) {
  .week { grid-template-columns: minmax(120px, 1fr) repeat(8, minmax(0, 1fr)); }
  .ex { grid-template-columns: 28px minmax(0, 2fr) 50px minmax(0, 1fr); }
  .ex .rest, .ex .c { display: none; }
}