/* ── Tokens ─────────────────────────────────────────────────
   Plinth: basalt and limewash in the dark, linen and charcoal in the light,
   one madder accent. Chart and project colors are one categorical palette,
   stepped per mode and validated for color-blind readers on each surface,
   in this order — indigo, madder, teal, ochre, plum, olive. The series
   order matches it, so stacked neighbours stay distinguishable. */
:root {
  --lvl-learning:   #184f95;
  --lvl-practicing: #3987e5;
  --lvl-confident:  #86b6ef;
  --bg:            #13110F;
  --surface:       #1C1916;
  --surface-2:     #25211D;
  --border:        #2F2A25;
  --border-strong: #443D36;

  --text:          #F2ECE2;
  --text-2:        #B4ACA1;
  --text-3:        #968E83;

  --accent:        #C67361;
  --accent-ink:    #13110F;
  --accent-soft:   color-mix(in srgb, #C67361 14%, transparent);
  --danger:        #E08A7B;
  --ok:            #9DB98A;
  --warn:          #E0B460;
  --success:       var(--ok);
  --tier-warn:     var(--warn);

  --p1: #6C89D2; --p2: #C67361; --p3: #1F9E9A; --p4: #B8872A; --p5: #A072BC; --p6: #82A055;
  --series-commit:  var(--p1);
  --series-claude:  var(--p2);
  --series-pr:      var(--p3);
  --series-meeting: var(--p4);
  --series-jira:    var(--p5);
  --series-focus:   var(--p6);

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2,.8,.2,1);

  --radius:  12px;
  --radius-sm: 8px;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font-weight: 600; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Brand ──────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 9px; }
.brand h1 { font-size: 15px; letter-spacing: -0.01em; }
.brand-mark { display: block; color: var(--text); flex: none; }
.brand .wordmark { font-size: 13px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }

/* ── Login ──────────────────────────────────────────────── */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-sub { margin: -6px 0 6px; color: var(--text-2); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; color: var(--text-2); font-weight: 500; }
.field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color .15s;
}
.field input:focus { outline: none; border-color: var(--accent); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

.btn-primary {
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: var(--radius-sm); padding: 10px; font-weight: 600;
  cursor: pointer; transition: filter .15s;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.form-error {
  margin: 0; padding: 9px 11px; font-size: 13px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm); color: var(--danger);
}

/* ── Chrome ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 30;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.who { font-size: 13px; color: var(--text-2); }
/* You, as your initials; the menu says who and how to leave. */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; font: 600 12.5px/1 var(--sans); letter-spacing: .02em;
  background: linear-gradient(135deg, #C67361, #9A4A3A); color: #fff; transition: box-shadow .15s, transform .15s;
}
.avatar:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
.avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-menu { min-width: 220px; }
.menu-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.menu-who strong { font-size: 13px; color: var(--text); }
.menu-who span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }

/* The project switcher, beside the brand as in the Plinth mock: the project in view, or all of them. */
.topbar-vr { width: 1px; height: 24px; background: var(--border); }
.proj-btn {
  display: flex; align-items: center; gap: 8px; height: 36px; max-width: 240px; padding: 0 10px 0 6px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
  font: 500 13px/1 var(--sans); cursor: pointer; transition: background-color .2s, border-color .2s;
}
.proj-btn:hover { background: var(--surface-2); }
.proj-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.proj-btn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-btn .chev { flex: none; color: var(--text-3); }
.psq {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
}
.psq.all { background: var(--text); color: var(--bg); }
.menu.proj-menu { left: 0; right: auto; width: 290px; max-height: min(70vh, 520px); overflow-y: auto; }
.menu.proj-menu button { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.proj-menu .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-menu .meta { flex: none; font-size: 12px; color: var(--text-3); }
.proj-menu .cur { flex: none; color: var(--accent); }
.menu-label {
  padding: 8px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
@media (max-width: 560px) {
  .topbar .brand .wordmark { display: none; }
  .proj-btn { max-width: 150px; }
}
.side-link .nav-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent);
}
.sync-status { font-size: 12px; color: var(--text-3); font-family: var(--mono); }
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 11px;
  color: var(--text-2); cursor: pointer; transition: .15s;
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }

.filters {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 15;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select, .filters input[type=search] {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text);
}
.filters input[type=search] { min-width: 180px; }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--accent); }

/* Segmented control, shared by granularity and quick-range. */
.seg { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  background: transparent; border: none; padding: 6px 12px;
  color: var(--text-2); cursor: pointer; transition: .15s; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.date-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.date-field input {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 9px; color: var(--text); font-size: 13px; color-scheme: dark;
}
.date-field input:focus { outline: none; border-color: var(--accent); }

.content { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-width: 1500px; margin: 0 auto; }
#overview-view, #details-view { display: flex; flex-direction: column; gap: 16px; }
#overview-view[hidden], #details-view[hidden] { display: none; }
.view-switch { align-self: center; }

/* ── Overview ───────────────────────────────────────────────
   The Plinth dashboard. Classes are ov- so the shell's .chip, .seg and
   .label keep their own meanings. Motion settles rather than bounces:
   one ease, content rises 10px, and reduced-motion turns it off. */
.ov-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ov-grow { flex: 1; min-width: 0; }
.ov-sub { margin: 0; font-size: 13px; color: var(--text-2); }
.ov-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ov-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.ov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ov-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ov-period-label { font-size: 13px; color: var(--text-3); }
.ov-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ov-title-row h1 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.ov-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.ov-chip:empty { display: none; }

.ov-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 15px;
  border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, border-color .18s, transform .12s, filter .18s;
}
.ov-btn:hover { background: var(--surface-2); }
.ov-btn:active { transform: scale(.98); }
.ov-btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.ov-btn.primary:hover { filter: brightness(1.08); }
.ov-btn.ghost { background: transparent; border-color: transparent; }
.ov-btn.ghost:hover { background: var(--surface-2); }
.ov-btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.ov-btn.ov-icon { width: 40px; padding: 0; }
.ov-btn:focus-visible, .ov-period button:focus-visible, .ov-lrow:focus-visible,
.ov-colw:focus-visible, .ov-hcell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ov-period-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ov-period { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 11px; }
.ov-period button {
  min-height: 36px; padding: 0 15px; border: 0; background: transparent; border-radius: 8px;
  font-weight: 500; color: var(--text-2); cursor: pointer; transition: background-color .18s, color .18s, box-shadow .18s;
}
.ov-period button:hover { color: var(--text); }
.ov-period button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.ov-range { font-size: 13px; color: var(--text-3); }

.ov-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  transition: background-color .35s, border-color .35s;
}
.ov-pad { padding: 20px; }
.ov-col { display: flex; flex-direction: column; }
.ov-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ov-card-h h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.ov-note { font-size: 12px; color: var(--text-3); }

.ov-custom { padding: 16px; max-width: 600px; display: flex; flex-direction: column; gap: 10px; }
.ov-custom-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ov-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.ov-field input {
  min-height: 40px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; color-scheme: dark;
}
[data-mode="light"] .ov-field input { color-scheme: light; }
.ov-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ov-custom-actions { display: flex; gap: 6px; }
.ov-custom-msg { margin: 0; font-size: 12px; color: var(--text-3); }
.ov-custom-msg.err { color: var(--warn); }

#ov-body { display: flex; flex-direction: column; gap: 20px; }
.ov-rise { animation: ov-rise .45s var(--ease) both; }
.ov-d1 { animation-delay: .06s; } .ov-d2 { animation-delay: .12s; } .ov-d3 { animation-delay: .18s; } .ov-d4 { animation-delay: .24s; }
@keyframes ov-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ov-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ov-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ov-donut-in { from { opacity: 0; transform: rotate(-70deg) scale(.9); } to { opacity: 1; transform: none; } }

.ov-psq {
  width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; flex: none;
  font-size: 11px; font-weight: 700; color: #fff;
}
.ov-psq.lg { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.ov-psq.xl { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
.ov-psq.all { background: var(--text); color: var(--bg); }
.ov-psq.other { background: var(--text-3); }
.ov-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Hero: the period's hours, with the outcomes beside it. */
.ov-top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); gap: 20px; }
.ov-hero { font-size: 56px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.ov-hero.words { font-size: 26px; letter-spacing: -.02em; line-height: 1.2; }
.ov-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.ov-mini > div { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.ov-mini .v { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-family: var(--mono); }

/* Donut: one ring, a 3-unit gap between slices, hover thickens one. */
.ov-donut-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.ov-donut { position: relative; width: 208px; height: 208px; flex: none; animation: ov-donut-in .8s var(--ease) both; }
.ov-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ov-seg { fill: none; stroke-width: 24; transition: stroke-width .2s var(--ease), opacity .2s; }
.ov-seg.hot { stroke-width: 31; }
.ov-donut.dim .ov-seg:not(.hot) { opacity: .35; }
.ov-donut-c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.ov-donut-v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-family: var(--mono); }
.ov-donut-l { font-size: 12px; color: var(--text-2); max-width: 130px; }
.ov-legend { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.ov-lrow {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 9px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; width: 100%; cursor: pointer;
  transition: background-color .18s;
}
.ov-lrow:hover, .ov-lrow.hot { background: var(--surface-2); }
.ov-lrow .pct { width: 44px; text-align: right; color: var(--text-3); }

/* Stacked columns of hours: 2px of surface between segments, rounded tops. */
.ov-vlegend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); }
.ov-vlegend span { display: inline-flex; align-items: center; gap: 6px; }
.ov-plot { position: relative; height: 220px; margin-left: 38px; }
.ov-gl { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.ov-gl span { position: absolute; left: -38px; top: -8px; width: 30px; text-align: right; font-size: 11px; color: var(--text-3); font-family: var(--mono); }
.ov-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.ov-colw {
  flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center;
  background: none; border: 0; padding: 0; cursor: default; border-radius: 6px; transition: background-color .18s;
}
.ov-colw:hover, .ov-colw:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); }
.ov-cstk { width: min(24px, 62%); height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; transition: opacity .2s; }
.ov-cols.dim .ov-colw:not(:hover):not(:focus-visible) .ov-cstk { opacity: .4; }
.ov-cseg { display: block; width: 100%; flex: none; border-radius: 1px; transform-origin: bottom; animation: ov-grow-y .6s var(--ease) both; }
.ov-cstk .ov-cseg:last-child { border-radius: 4px 4px 1px 1px; }
.ov-xlab { display: flex; margin-left: 38px; margin-top: 8px; }
.ov-xlab span { flex: 1; min-width: 0; text-align: center; font-size: 11px; line-height: 1.3; color: var(--text-3); }
.ov-xlab b { font-weight: 500; color: var(--text-2); font-family: var(--mono); }
.ov-xlab.dense span:nth-child(even) { visibility: hidden; }

.ov-tv { display: flex; flex-direction: column; font-size: 13px; }
.ov-tvr { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 80px; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--border); align-items: center; }
.ov-tvr.h { border-top: 0; }
.ov-tvr .num { text-align: right; }
.ov-tvparts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-2); }
.ov-tvparts span { display: inline-flex; align-items: center; gap: 6px; }

/* Contributions: one row per project, its share of the hours as a bar. */
.ov-gwrap { overflow-x: auto; }
.ov-gtr {
  display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(190px, 1.5fr) repeat(5, minmax(64px, .6fr)) 72px;
  align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); min-width: 880px; font-size: 14px;
}
.ov-gtr.h { border-top: 0; padding-top: 4px; padding-bottom: 10px; }
.ov-gtr.h .num { font-family: var(--sans); }
.ov-gtr .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ov-gname { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.ov-gname span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-share { display: flex; align-items: center; gap: 10px; }
.ov-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ov-bar span { display: block; height: 100%; border-radius: inherit; transform-origin: left; animation: ov-grow-x .8s var(--ease) both; }

/* One project: KPI strip, kind of work, PR merge times, five weeks of days. */
.ov-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ov-kpi { background: var(--surface); padding: 16px; }
.ov-kpi-v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
.ov-kpi-n { font-size: 12px; color: var(--text-3); }
.ov-eq2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ov-mixbar { display: flex; gap: 2px; height: 22px; }
.ov-mixbar span { height: 100%; transform-origin: left; animation: ov-grow-x .8s var(--ease) both; }
.ov-mixbar span:first-child { border-radius: 4px 0 0 4px; }
.ov-mixbar span:last-child { border-radius: 0 4px 4px 0; }
.ov-mixbar span:only-child { border-radius: 4px; }
.ov-mixrow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ov-prow { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; min-height: 28px; }
.ov-prow a, .ov-prow > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.ov-prow a:hover { text-decoration: underline; }
.ov-ptrack { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov-pbar { height: 12px; border-radius: 1px 4px 4px 1px; transform-origin: left; animation: ov-grow-x .8s var(--ease) both; flex: none; }
.ov-pbar.open { opacity: .45; }
.ov-heat { display: flex; flex-direction: column; gap: 6px; }
.ov-hrow { display: flex; gap: 6px; align-items: center; }
.ov-hlab { width: 38px; font-size: 11px; color: var(--text-3); flex: none; }
.ov-hwk { width: 34px; font-size: 10px; color: var(--text-3); text-align: center; flex: none; line-height: 1.2; }
.ov-hcell {
  width: 34px; height: 34px; border-radius: 8px; border: 0; padding: 0; flex: none; cursor: default;
  transition: transform .15s var(--ease), box-shadow .15s;
}
.ov-hcell:hover, .ov-hcell:focus-visible { transform: scale(1.12); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text-2); }
.ov-hcell.future { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--border-strong); transform: none; }
.ov-heat-read { display: flex; flex-direction: column; gap: 6px; min-width: 200px; padding-top: 18px; }
.ov-heat-read b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }

.ov-empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.ov-empty h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.ov-empty p { margin: 0; max-width: 470px; color: var(--text-2); }
.ov-skel { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: ov-shimmer 1.2s linear infinite; }
@keyframes ov-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Recap drawer. */
.ov-scrim { position: fixed; inset: 0; background: rgba(10,10,12,.42); z-index: 60; animation: ov-fade .3s ease both; }
.ov-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100%); z-index: 61;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: -24px 0 60px rgba(0,0,0,.18);
  display: flex; flex-direction: column; animation: ov-slide .4s var(--ease) both;
}
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ov-slide { from { transform: translateX(104%); } to { transform: none; } }
.ov-drawer-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.ov-drawer-h h2 { font-size: 18px; font-weight: 600; }
.ov-drawer-b { padding: 20px; display: flex; flex-direction: column; gap: 18px; overflow: auto; flex: 1; }
.ov-drawer-f { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.ov-recap-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.ov-tldr { padding: 16px 18px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.6; margin: 0; }
.ov-rproj { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.ov-rproj h3 { font-size: 15px; font-weight: 600; margin: 0; }
.ov-ritem { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.ov-ritem a { color: var(--text); text-decoration: none; font-weight: 500; }
.ov-ritem a:hover { text-decoration: underline; }
.ov-ritem .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.ov-ref { font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); flex: none; white-space: nowrap; }
.ov-recap-est { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ov-recap-est-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ov-recap-est-h h3 { margin: 0; font-size: 15px; font-weight: 600; }

/* Feedback: a topbar button and an edge tab, both opening one drawer, as in the Plinth mock. */
.fb-open { display: inline-flex; align-items: center; gap: 7px; }
.fb-tab {
  position: fixed; right: 0; top: 50%; z-index: 20; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  padding: 16px 9px; border: 0; border-radius: 0 10px 10px 0; background: var(--text); color: var(--bg);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; transition: padding .25s var(--ease);
}
.fb-tab:hover { padding-left: 13px; }
.fb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ov-drawer.fb-drawer { width: min(440px, 100%); }
.fb-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fb-kinds { display: flex; flex-direction: column; gap: 8px; }
.fb-flabel { font-size: 13px; font-weight: 600; color: var(--text); }
.fb-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fb-seg button { padding: 0 8px; }
.fb-text {
  width: 100%; min-height: 150px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5;
}
.fb-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-attach { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.fb-attach input { margin-top: 2px; accent-color: var(--accent); }
.fb-err { margin: 0; font-size: 13px; color: var(--danger); }
.fb-foot { justify-content: flex-end; }
.fb-foot .ov-btn:disabled { opacity: .5; cursor: default; filter: none; }
.fb-sent { align-items: center; justify-content: center; text-align: center; }
.fb-sent h3 { margin: 0; font-size: 18px; font-weight: 600; }
.fb-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fb-draw .5s .15s var(--ease) forwards; }
@keyframes fb-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 700px) {
  .fb-tab, .fb-label { display: none; }
  .fb-open { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-check { animation: none; stroke-dashoffset: 0; }
  .fb-tab { transition: none; }
}

/* Topbar theme switch: the icon shows the mode it switches to. */
.theme-toggle { display: inline-grid; place-items: center; padding: 6px 8px; }
.theme-toggle .ico-moon { display: none; }
[data-mode="light"] .theme-toggle .ico-sun { display: none; }
[data-mode="light"] .theme-toggle .ico-moon { display: block; }
.login-brand { gap: 12px; }
.login-brand .wordmark { font-size: 15px; }

@media (max-width: 1080px) {
  .ov-top, .ov-eq2 { grid-template-columns: minmax(0, 1fr); }
  .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-hero { font-size: 46px; }
  .ov-xlab span:nth-child(even) { visibility: hidden; }
  .ov-title-row h1 { font-size: 24px; }
  .ov-donut { width: 180px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-rise, .ov-cseg, .ov-bar span, .ov-mixbar span, .ov-pbar, .ov-donut, .ov-drawer, .ov-scrim { animation: none !important; }
  .ov-seg, .ov-hcell, .ov-btn, .ov-period button { transition: none !important; }
}

/* ── Stat tiles ─────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.tile-value { font-size: 26px; font-weight: 650; font-family: var(--mono); letter-spacing: -0.02em; margin-top: 4px; }
.tile-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ── Panels ─────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 13px; letter-spacing: .01em; }
.hint { font-size: 12px; color: var(--text-3); }
/* The two tables stack: with a column per source each needs the full width,
   and side by side they scrolled sideways at every size. */
.two-col { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ── Chart ──────────────────────────────────────────────── */
.chart-scroll { overflow-x: auto; padding: 16px; }
#chart svg { display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; }
.grid-line { stroke: var(--border); stroke-width: 1; }
.axis-text { fill: var(--text-3); font-size: 11px; font-family: var(--mono); }
.bar-seg { transition: opacity .12s; cursor: pointer; }
.bar-seg:hover { opacity: .78; }

/* ── Tables ─────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 16px; text-align: left; white-space: nowrap; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); font-weight: 500; border-bottom: 1px solid var(--border);
}
td { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.name-cell { font-weight: 550; }
.muted { color: var(--text-3); }

/* Inline proportion bar — magnitude beside the number, one hue. */
.bar-cell { min-width: 90px; }
.mini-bar { height: 5px; border-radius: 3px; background: var(--series-commit); }

/* ── Timeline ───────────────────────────────────────────── */
.event-wrap { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.event-wrap:last-child { border-bottom: none; }
.event {
  display: grid; grid-template-columns: 92px 22px 1fr auto 16px;
  gap: 12px; align-items: baseline;
  padding: 9px 16px; cursor: pointer;
}
.event:hover { background: var(--surface-2); }
.event:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Affordance: commits leave the app, sessions expand in place. */
.event-go { color: var(--text-3); opacity: 0; transition: opacity .12s, transform .15s; font-size: 13px; }
.event:hover .event-go, .event:focus-visible .event-go { opacity: 1; }
.event.open .event-go.chevron { transform: rotate(90deg); opacity: 1; }

.event-detail {
  padding: 4px 16px 16px 126px;
  display: flex; flex-wrap: wrap; gap: 20px 32px;
  background: var(--surface-2);
}
.detail-block { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.detail-block h4 {
  margin: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 2px 8px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
}
.pill b { font-family: var(--mono); color: var(--text); font-weight: 550; }
.prompt-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 6px; max-height: 320px; overflow-y: auto;
}
.prompt-list li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; font-size: 12.5px; }
.prompt-time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.prompt-text { color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.file-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
}
.detail-more { font-size: 11.5px; color: var(--text-3); }
.event-time { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.event-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-title a { color: inherit; text-decoration: none; }
.event-title a:hover { text-decoration: underline; }
.event-meta { font-size: 12px; color: var(--text-3); font-family: var(--mono); white-space: nowrap; }
.chip {
  font-size: 11px; padding: 1px 7px; border-radius: 20px;
  border: 1px solid var(--border-strong); color: var(--text-3); margin-left: 8px;
  white-space: nowrap;
}
.chip-branch {
  text-decoration: none; border-color: var(--series-pr);
  color: var(--series-pr); transition: .15s;
}
.chip-branch:hover { background: color-mix(in srgb, var(--series-pr) 15%, transparent); }
.chip-sha { font-family: var(--mono); font-size: 10.5px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; font-size: 13px; color: var(--text-3); }

.empty { padding: 32px 16px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ── Tooltip ────────────────────────────────────────────── */
.tooltip {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 8px 11px; font-size: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 260px;
}
.tooltip-title { font-weight: 600; margin-bottom: 5px; }
.tooltip-row { display: flex; justify-content: space-between; gap: 14px; color: var(--text-2); }
.tooltip-row b { color: var(--text); font-family: var(--mono); font-weight: 550; }

/* Selects inside tables inherit the app surface, not the OS default. */
table select {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 9px;
  color: var(--text); min-width: 150px;
}
table select:focus { outline: none; border-color: var(--accent); }
table select:disabled { opacity: .5; }

/* Zero-activity bucket: a baseline tick that still accepts hover, so an empty
   day reads as zero rather than as missing data. */
.bar-empty { fill: var(--border-strong); }

/* ── Sync failure banner ────────────────────────────────────
   A source that isn't ingesting is a data gap, not an empty
   filter — it gets said once, at the top, not hunted for. */
.sync-banner {
  margin: 0; padding: 10px 20px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--text-2);
}
.banner-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.banner-tag {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 7px; border-radius: 3px;
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  color: var(--danger); white-space: nowrap;
}
.banner-detail { color: var(--text-3); font-family: var(--mono); font-size: 11.5px; }
.empty strong { color: var(--text-2); font-weight: 600; }
.empty-detail { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

/* ── Working hours ──────────────────────────────────────── */
/* Each stat draws its own hairlines, so a short last row stays surface-coloured. */
.hours-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-bottom: 1px solid var(--border); overflow: hidden;
}
.hours-stat { background: var(--surface); padding: 12px 16px; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
.hours-stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.hours-stat .v { font-size: 19px; font-weight: 600; font-family: var(--mono); margin-top: 3px; }
.hours-stat .n { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.chart-note { margin: 0; padding: 0 16px 12px; }

/* Breakdown: small multiples, one measure each. */
/* Hairlines drawn by each card, not by a background showing through the gaps,
   so a short last row leaves blank surface rather than a grey block. */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mini-card {
  background: var(--surface); padding: 12px 14px 6px; min-width: 0;
  box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
}
.mini-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mini-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
/* Proportional figures: a lone headline number looks loose in tabular ones. */
.mini-total { font-size: 19px; font-weight: 600; }
.mini-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; min-height: 16px; }
.mini-chart { overflow-x: auto; margin-top: 4px; }
.col-hit { fill: transparent; cursor: default; }
.col-hit:hover { fill: color-mix(in srgb, var(--text-3) 8%, transparent); }
#breakdown-table th, #breakdown-table td { white-space: nowrap; }

/* Ranked lists: one hue, the bar is the value. */
.rank-grid {
  display: grid; gap: 16px 24px; padding: 14px 16px 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rank-list h4 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
}
.rank-row { display: grid; grid-template-columns: minmax(70px, 38%) 1fr auto; align-items: center; gap: 8px; padding: 3px 0; }
.rank-label { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rank-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--series-claude); }
.rank-value { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.hours-bar { transition: opacity .12s; cursor: pointer; }
.hours-bar:hover { opacity: .78; }

/* ── Period summary ─────────────────────────────────────── */
.summary-actions { display: flex; align-items: center; gap: 10px; }
.btn-sm { padding: 6px 12px; font-size: 13px; font-weight: 500; }
.summary-body { padding: 18px 20px; font-size: 14px; line-height: 1.65; color: var(--text); }
.summary-body .empty { padding: 14px 0; }
.summary-body p { margin: 0 0 12px; max-width: 78ch; }
.summary-body p:last-child { margin-bottom: 0; }
.summary-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 78ch; }
.summary-body li { color: var(--text-2); }
.summary-body li strong, .summary-body strong { color: var(--text); font-weight: 600; }
.summary-body code {
  font-family: var(--mono); font-size: .9em; background: var(--surface-2);
  padding: 1px 5px; border-radius: 3px;
}
.summary-loading { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13px; padding: 14px 0; }
.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }

/* Summary sections: headings carry the scan, bullets stay terse. */
.summary-body h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text); margin: 22px 0 9px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.summary-body h3:first-child { margin-top: 0; }
.summary-body h4 {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin: 14px 0 6px;
}
.summary-body ul { gap: 5px; }
.summary-body li { line-height: 1.5; }

/* The time estimate card. Footprint is the accent, groundwork a lighter tint of
   it: the same work, less certain. */
.est { display: flex; flex-direction: column; gap: 16px; }
.est .fp { background: var(--accent); }
.est .gw { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.est .ov { background: transparent; border: 1px dashed var(--text-3); }
.est-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; }
.est-total { display: flex; flex-direction: column; }
.est-label, .est-split dt {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
}
.est-big { font-size: 32px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.est-split { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.est-split dt { display: flex; align-items: center; gap: 6px; }
.est-split dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.est-key { width: 9px; height: 9px; border-radius: 2px; }
.summary-body .est-note, .summary-body .est-assume { margin: 0; font-size: 13px; color: var(--text-2); }
.summary-body .est-assume { color: var(--text-3); font-size: 12px; }

.est-tasks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.est-tasks > li { border-bottom: 1px solid var(--border); }
.est-task > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(80px, 180px) 52px;
  align-items: center; gap: 12px; padding: 10px 2px; cursor: pointer; list-style: none;
}
.est-task > summary::-webkit-details-marker { display: none; }
.est-task > summary:hover { background: var(--surface-2); }
.est-task > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.est-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.est-task[open] .est-name { white-space: normal; }
.est-name::before { content: "›"; display: inline-block; width: 14px; color: var(--text-3); transition: transform .15s; }
.est-task[open] .est-name::before { transform: rotate(90deg); }
.est-conf {
  font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.est-conf-evidenced { --c: var(--series-pr); }
.est-conf-inferred { --c: var(--series-meeting); }
.est-conf-guess { --c: var(--text-2); }
.est-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--surface-2); }
.est-bar i { display: block; height: 100%; }
.est-time { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.est-detail {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px;
  margin: 0; padding: 0 2px 12px 16px; font-size: 13px;
}
.est-detail dt { color: var(--text-3); font-variant-numeric: tabular-nums; }
.est-detail dd { margin: 0; color: var(--text-2); }

.summary-body .est-confirm h4 { margin: 0 0 6px; }
.summary-body .est-confirm li { color: var(--text-2); }

@media (max-width: 560px) {
  .est-task > summary { grid-template-columns: minmax(0, 1fr) auto 52px; }
  .est-bar { grid-column: 1 / -1; grid-row: 2; }
  .est-detail { grid-template-columns: 1fr; padding-left: 2px; }
}

/* ── Projects modal ─────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.6); display: grid; place-items: start center;
  padding: 48px 20px; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 760px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 15px; }
.modal-body { padding: 18px; display: flex; flex-direction: column; gap: 20px; }

.proj-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.proj-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--surface-2);
}
.proj-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.proj-role {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border-strong); color: var(--text-3);
}
.proj-section { padding: 12px 14px; border-top: 1px solid var(--border); }
.proj-section h4 {
  margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3); font-weight: 500;
}
.row-list { display: flex; flex-direction: column; gap: 6px; }
.row-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 9px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; font-size: 13px;
}
.row-item .sub { color: var(--text-3); font-size: 12px; font-family: var(--mono); }

/* This select sits in a row, not a form, so the .inline-form rules never reached
   it and it rendered as a bare browser control. Scoped to .meeting-row so the
   repository and member lists keep their own layout. */
.meeting-row { gap: 12px; }
.meeting-row .meeting-title {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meeting-row select {
  flex: 0 0 auto; max-width: 45%;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 8px;
  color: var(--text); font-size: 12px; cursor: pointer;
}
.meeting-row select:hover { border-color: var(--border-strong); }
.meeting-row select:focus-visible { outline: none; border-color: var(--accent); }
.meeting-row select:disabled { opacity: .55; cursor: default; }

/* A hidden meeting stays listed — otherwise there is no way to un-hide it —
   but should read as already dealt with rather than as pending work. */
.meeting-row.is-hidden { opacity: .55; }
.meeting-row.is-hidden .meeting-title { text-decoration: line-through; }
.meeting-row.is-hidden select { border-style: dashed; }

/* ── Sync health ────────────────────────────────────────── */
/* Sits above the tabs because it explains the numbers below it: stale data
   with no visible cause is worse than a banner. */
.sync-health {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px; padding: 13px 16px;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius);
}
.sync-health-head { display: flex; flex-direction: column; gap: 3px; }
.sync-health-head strong { color: var(--danger); font-size: 14px; }
.sync-health-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sync-health-list li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: 13px; padding: 6px 9px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
}
.sh-who { font-weight: 600; }
.sh-src {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger);
}
.sh-detail {
  flex-basis: 100%; font-family: var(--mono); font-size: 11px;
  color: var(--text-3); word-break: break-word;
}
/* Which coding agents a connected machine has sent sessions from, under its name. */
.agents-seen { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.sync-health .btn-primary { align-self: flex-start; }
/* Finished, with one thing to fix: a warning, not a failure. */
.sync-health.soft {
  background: color-mix(in srgb, var(--series-meeting) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--series-meeting) 40%, transparent);
}
.sync-health.soft .sync-health-head strong { color: var(--text); }

/* ── Google sign-in ─────────────────────────────────────── */
.login-or {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px; color: var(--text-3); font-size: 12px;
}
.login-or::before, .login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 9px 14px; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; transition: .15s;
}
.btn-google:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-google:disabled { opacity: .6; cursor: default; }
.login-domain { margin: 9px 0 0; text-align: center; font-size: 12px; }

/* ── Discoverable projects ──────────────────────────────── */
.discoverable {
  margin-bottom: 16px; padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius);
}
.discoverable h4 { margin: 0 0 3px; font-size: 14px; }
.discoverable .row-list { margin-top: 10px; }
.invite-row { opacity: .8; }
.row-item.is-failed {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}
.row-item.is-failed .sub { color: var(--danger); }
/* Consent lives on the meeting, so the control does too. Off is deliberately
   quiet and on is deliberately not — the state that reads a document should be
   the one that stands out. */
button.chip-notes {
  cursor: pointer; font: inherit; font-variant: small-caps; letter-spacing: .03em;
  background: transparent;
}
button.chip-notes.is-off { border-color: var(--border); color: var(--text-3); }
button.chip-notes.is-off:hover { border-color: var(--border-strong); color: var(--text-2); }
button.chip-notes.is-on {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent);
}
button.chip-notes:disabled { opacity: .5; cursor: default; }

/* Still used by the Slack and Jira cards to report a failed connection; it was
   removed with the account-level notes toggle and had to come back. */
.notes-warn { color: var(--danger); }

/* Connections are grouped because they share a property worth stating once:
   each is somewhere this app reads from, and each is revocable. */
.section-head {
  margin: 22px 0 2px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
}
.section-head:first-of-type { margin-top: 4px; }
.section-hint { margin: 0 0 10px; }

/* Sized to the text beside it, so a column of cards reads as a list of services
   rather than a list of logos. */
.brand-mark-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-right: 9px; flex: 0 0 auto;
}
.brand-mark-sm svg { width: 100%; height: 100%; display: block; }
.setting-title { display: inline-flex; align-items: center; }

#ics-feeds { margin-top: 16px; }
#add-feed input[name="url"] { flex: 2 1 20rem; font-family: var(--mono); font-size: 12px; }

.invite-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-3);
}
.inline-form { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.inline-form input, .inline-form select {
  flex: 1; min-width: 150px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; padding: 6px 9px; color: var(--text); font-size: 13px;
}
.inline-form input:focus, .inline-form select:focus { outline: none; border-color: var(--accent); }
.btn-danger {
  background: transparent; border: 1px solid var(--border); color: var(--text-3);
  border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer;
}
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.token-value {
  font-family: var(--mono); font-size: 12px; word-break: break-all;
  background: var(--bg); border: 1px solid var(--series-pr);
  border-radius: 5px; padding: 9px 11px; margin-top: 8px; color: var(--text);
}

.no-project { max-width: 520px; margin: 80px auto; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.no-project h2 { font-size: 20px; }
.no-project p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }

/* ── Repository picker ──────────────────────────────────── */
.modal-actions { display: flex; gap: 8px; align-items: center; }
.new-project { margin-bottom: 4px; }
.repo-picker { margin-top: 10px; }
.repo-search {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; padding: 7px 10px; color: var(--text); font-size: 13px;
}
.repo-search:focus { outline: none; border-color: var(--accent); }
.repo-results { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.repo-results .row-item .sub { margin-left: 6px; }
.picker-fallback { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }

.modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.proj-section code {
  font-family: var(--mono); font-size: .9em; background: var(--bg);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;
}

/* ── Projects landing screen ────────────────────────────── */
.projects-page { max-width: 1100px; margin: 0 auto; padding: 36px 20px 80px; }
.projects-head { margin-bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.projects-head h2 { font-size: 20px; }
.projects-head .hint { max-width: 62ch; }

.projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.project-card {
  text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px; transition: .15s;
}
.project-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.project-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.project-card-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); }
.project-card-stats b {
  display: block; font-family: var(--mono); font-size: 18px;
  font-weight: 600; color: var(--text);
}
.project-card-foot {
  font-size: 12px; color: var(--text-3);
  border-top: 1px solid var(--border); padding-top: 10px;
}
.needs-setup { color: var(--tier-warn, #d9ad5c); margin-left: 6px; }

.new-card { cursor: default; gap: 10px; }
.new-card h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-2); }
.new-card input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  padding: 7px 10px; color: var(--text); font-size: 13px;
}
.new-card input:focus { outline: none; border-color: var(--accent); }

/* ── In-project settings ────────────────────────────────── */
.btn-back {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  border-radius: var(--radius-sm); padding: 3px 9px; cursor: pointer; font-size: 14px;
  transition: .15s;
}
.btn-back:hover { border-color: var(--border-strong); color: var(--text); }
.settings-panel {
  border-bottom: 1px solid var(--border); background: var(--bg);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.settings-panel .proj-card { background: var(--surface); }

.picker-prompt {
  margin-top: 9px; padding: 11px 13px; font-size: 13px; color: var(--text-2);
  background: var(--bg); border: 1px dashed var(--border-strong); border-radius: 6px;
}
.proj-card.needs-action { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.setup-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
}

/* ── Connect-a-machine command ──────────────────────────── */
.device-cmd { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cmd-block {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--bg); border: 1px solid var(--series-pr); border-radius: 6px;
  font-family: var(--mono); font-size: 12px; color: var(--text); white-space: pre;
  user-select: all;
}
.cmd-actions { display: flex; align-items: center; gap: 12px; }

.hours-warn { color: var(--series-claude); font-weight: 600; }

/* ── Collapsible settings sections ──────────────────────── */
details.proj-section > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  padding: 2px 0;
}
details.proj-section > summary::-webkit-details-marker { display: none; }
details.proj-section > summary::before {
  content: "›"; font-size: 14px; line-height: 1;
  transition: transform .15s; color: var(--text-3);
}
details.proj-section[open] > summary::before { transform: rotate(90deg); }
details.proj-section > summary:hover { color: var(--text-2); }
details.proj-section > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
summary .count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0;
  padding: 0 6px; border-radius: 9px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text-2);
}

/* ~4.5 rows, so it's visibly scrollable rather than looking complete. */
.scroll-list { max-height: 178px; overflow-y: auto; padding-right: 10px; }
.scroll-list::-webkit-scrollbar { width: 8px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.scroll-list::-webkit-scrollbar-track { background: transparent; }

/* ── Menu ───────────────────────────────────────────────── */
.menu-wrap { position: relative; }
.btn-menu {
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 10px;
  color: var(--text-2); cursor: pointer; font-size: 14px; line-height: 1; transition: .15s;
}
.btn-menu:hover { border-color: var(--border-strong); color: var(--text); }
.btn-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 180px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.menu button {
  background: transparent; border: none; text-align: left;
  padding: 8px 10px; border-radius: 4px; color: var(--text-2);
  font: inherit; cursor: pointer;
}
.menu button:hover { background: var(--surface-2); color: var(--text); }
.menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.clickable-row { cursor: pointer; }

/* ── App shell: persistent sidebar beside a scrolling main ── */
.shell-body { display: flex; align-items: stretch; min-height: calc(100vh - 53px); }

.sidebar {
  width: 228px; flex: 0 0 228px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 8px;
  overflow-y: auto; overflow-x: hidden;
  position: sticky; top: 53px;
  height: calc(100vh - 53px);
  transition: width .16s ease, flex-basis .16s ease;
}
/* Rail: icons only, still a real navigation surface. */
.sidebar-rail .sidebar { width: 72px; flex-basis: 72px; padding: 10px 6px; }
.shell-main { flex: 1 1 auto; min-width: 0; }

.side-nav { display: flex; flex-direction: column; gap: 3px; }

.side-link {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: transparent; border: none; border-radius: 10px;
  padding: 10px 12px; color: var(--text-2); font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer; transition: background .12s, color .12s;
}
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.on { background: var(--accent-soft, var(--surface-2)); color: var(--text); font-weight: 600; }
.side-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-link .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Icons carry the rail on their own, so they are sized to be read at a glance. */
.side-link .ico {
  flex: 0 0 24px; width: 24px; height: 24px;
  display: grid; place-items: center; color: var(--text-3);
}
.side-link .ico svg { width: 22px; height: 22px; }
.side-link:hover .ico { color: var(--text-2); }
.side-link.on .ico { color: var(--accent); }
.sidebar-rail .label,
.sidebar-rail .nav-count { display: none; }
.sidebar-rail .side-link { justify-content: center; padding: 11px 0; gap: 0; }

@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 53px; z-index: 25; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
}

/* ── Account settings ───────────────────────────────────── */
#account-body { max-width: 780px; margin: 0 auto; padding: 32px 20px 80px;
                display: flex; flex-direction: column; gap: 14px; }
.settings-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.settings-head h2 { font-size: 20px; }
.settings-head .hint { max-width: 62ch; }

/* Each connection is its own card, so they read as separate decisions. */
.setting-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.setting-card > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
}
.setting-card > summary::-webkit-details-marker { display: none; }
.setting-card > summary::after {
  content: "›"; margin-left: auto; font-size: 17px; line-height: 1;
  color: var(--text-3); transition: transform .15s;
}
.setting-card[open] > summary::after { transform: rotate(90deg); }
.setting-card > summary:hover { background: var(--surface-2); }
.setting-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.setting-card[open] > summary { border-bottom: 1px solid var(--border); }

.setting-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.setting-state {
  font-size: 12.5px; color: var(--text-3);
  padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border-strong);
}
.setting-state.ok { color: var(--series-pr); border-color: color-mix(in srgb, var(--series-pr) 45%, transparent); }
.setting-state.todo { color: var(--series-claude); border-color: color-mix(in srgb, var(--series-claude) 45%, transparent); }

.setting-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.setting-body p.sub { margin: 0; max-width: 68ch; line-height: 1.6; }
.setting-body .btn-danger { align-self: flex-start; padding: 6px 12px; }

/* Irreversible actions read as ordinary settings unless the card itself says
   otherwise, so tint the summary rather than relying on the button alone. */
.danger-card { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.danger-card > summary { color: var(--danger); }
.danger-card > summary:hover { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.danger-card .setting-body strong { color: var(--text); }
.danger-card [name="confirm"] { min-width: 15rem; }
.danger-card .btn-danger {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}
.danger-card .btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.danger-card .btn-danger:disabled { opacity: .5; cursor: default; }

/* ── Project tabs ───────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px; padding: 0 20px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 16;
}
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 12px 14px; margin-bottom: -1px;
  color: var(--text-3); font: inherit; font-size: 13.5px; cursor: pointer; transition: .12s;
}
.tab:hover { color: var(--text-2); }
.tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px 4px 0 0; }

#settings-body { max-width: 780px; margin: 0 auto; padding: 32px 20px 80px;
                 display: flex; flex-direction: column; gap: 14px; }

/* ══ Light mode ═══════════════════════════════════════════
   The same roles, re-stepped for a light surface rather than inverted. */
[data-mode="light"] {
  --lvl-learning:   #86b6ef;
  --lvl-practicing: #3987e5;
  --lvl-confident:  #184f95;
  --bg:            #F4F0E8;
  --surface:       #FCFAF6;
  --surface-2:     #EDE7DC;
  --border:        #E3DCD0;
  --border-strong: #CEC5B6;

  --text:   #1F1B17;
  --text-2: #5A534B;
  --text-3: #6E665D;

  --accent:      #9A4A3A;
  --accent-ink:  #FFFFFF;
  --accent-soft: color-mix(in srgb, #9A4A3A 10%, transparent);
  --danger: #A2352A;
  --ok:     #4F6B3A;
  --warn:   #8A5D12;

  --p1: #3A5DA0; --p2: #9A4A3A; --p3: #008F87; --p4: #B07A22; --p5: #80479A; --p6: #62803A;

  --shadow: 0 1px 2px rgba(31,27,23,.04), 0 6px 20px rgba(31,27,23,.07);
}
[data-mode="light"] body { color-scheme: light; }
[data-mode="light"] .field input,
[data-mode="light"] .date-field input { color-scheme: light; }

/* Shadows are tokenised so light mode doesn't get dark-mode's heavy drop. */
.menu, .tooltip { box-shadow: var(--shadow); }
@media (max-width: 860px) { .sidebar { box-shadow: var(--shadow); } }

/* ── Appearance ─────────────────────────────────────────── */
.theme-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.theme-row > span { font-size: 13px; color: var(--text-2); min-width: 62px; }

/* Secondary path, deliberately quiet — most people use the consent button. */
.fallback > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-3);
  list-style: none; padding: 4px 0;
}
.fallback > summary::-webkit-details-marker { display: none; }
.fallback > summary::before { content: "› "; }
.fallback[open] > summary::before { content: "⌄ "; }
.fallback > summary:hover { color: var(--text-2); }

.mini-head {
  margin: 14px 0 6px; font-size: 10.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
}


/* A PR is two events — opened, then merged. Without a visible marker they read
   as the same row listed twice, since both carry the PR's title. */
.chip-pr { font-variant: small-caps; letter-spacing: .03em; }
/* Attendance is three-valued: attended, didn't join, and unknown — no Meet link,
   or older than the 30 days Google keeps conference records. Unknown shows no
   chip at all, because rendering it as absent would be a claim we cannot make. */
/* The day's total sits above its bar, so the number is readable without
   hovering and the tooltip is free to explain the day instead of repeat it. */
.bar-total {
  fill: var(--text-3); font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tooltip-row.is-sub { padding-left: 12px; opacity: .78; font-size: 12px; }
.tooltip-row.is-total {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.chip-att { font-variant: small-caps; letter-spacing: .03em; }

.chip-att.went {
  border-color: color-mix(in srgb, var(--series-pr) 50%, transparent);
  color: var(--series-pr);
}
.chip-att.missed {
  border-color: color-mix(in srgb, var(--text-3) 45%, transparent);
  color: var(--text-3);
}
.chip-pr.is-open {
  border-color: color-mix(in srgb, var(--series-pr) 45%, transparent);
  color: var(--series-pr);
  opacity: .85;
}
.chip-pr.is-merged {
  border-color: color-mix(in srgb, var(--series-pr) 55%, transparent);
  color: var(--series-pr);
}

/* An open PR is a ring, a merged one is filled — the same hue either way. Form
   separates them under every kind of colour blindness and in greyscale, and it
   keeps PRs to one palette slot instead of spending two on one concept. */
.event-dot.is-open {
  background: transparent !important;
  box-shadow: inset 0 0 0 2px var(--dot, var(--series-pr));
}
.chip-jira { border-color: var(--border-strong); color: var(--text-2); }

/* ── Sharing ─────────────────────────────────────────────── */
/* Invitations waiting for an answer: the same accent callout as setup prompts. */
.invitations {
  margin-bottom: 18px; padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius);
}
.invitations h4 { margin: 0 0 3px; font-size: 14px; }
.invitations .row-list { margin-top: 10px; }
.invite-actions { display: flex; gap: 6px; }

/* Whose data a read-only view shows, above everything else on it. */
.viewing-banner {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 16px; font-size: 13.5px; color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-left-width: 3px;
  border-radius: var(--radius);
}
.viewing-banner strong { color: var(--text); font-weight: 600; }
.viewing-banner .sub { color: var(--text-3); font-size: 12.5px; }

.shared-section { margin-top: 30px; }
.shared-section .section-head { margin: 0 0 12px; }
.project-card .owner-line { font-size: 12px; color: var(--text-3); }

/* Inside one project the per-project breakdown steps aside. */
.two-col.single { grid-template-columns: 1fr; }

/* ── Meetings: row tags and the opened meeting ─────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chip-quiet { border-color: var(--border); }
.chip-cat { border-style: solid; }
.chip-cat.is-unassigned { border-style: dashed; color: var(--text-2); }
.chip-cat.is-personal { color: var(--text-2); }
/* The one state that asks for attention: evidence waiting for its owner. */
.chip-review {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 550;
}

/* Work that landed: a fact worth seeing, never louder than review. */
.chip-outcome { color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }

.event-detail:has(.meeting-detail), .event-detail:has(.meeting-loading) { display: block; }
.meeting-detail { display: grid; gap: 16px; max-width: 760px; font-size: 13px; }
.meeting-detail h4 {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.meeting-detail p { margin: 0; }
.meeting-detail .sub { color: var(--text-3); font-size: 12px; line-height: 1.5; }
.md-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.md-when { color: var(--text-2); font-variant-numeric: tabular-nums; }
.md-sources { color: var(--text-3); font-size: 12px; }
.md-link { margin-left: auto; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.md-link:hover { text-decoration: underline; }
.md-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.md-section { border-top: 1px solid var(--border); padding-top: 12px; }
.md-evidence-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.coverage-line { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text-2); margin-bottom: 8px !important; }

.btn-small {
  min-height: 32px; padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 12.5px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
}
.btn-small.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.btn-small.ghost:hover { border-color: var(--text-3); color: var(--text); }
.btn-small.danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); background: transparent; }
.btn-small:disabled { opacity: .5; cursor: default; }
.btn-small:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.assign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.assign-label { color: var(--text-3); font-size: 12px; }
.assign select, .ev-edit textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 8px;
}
.assign select { min-height: 32px; max-width: 100%; }
.assign select:focus-visible, .ev-edit textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.scope { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-2); }
.scope legend { color: var(--text-3); font-size: 12px; margin-bottom: 4px; }
.scope label { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer; }
.warn {
  flex-basis: 100%; color: var(--series-meeting); font-size: 12.5px;
  border-left: 2px solid var(--series-meeting); padding-left: 8px;
}
[data-assign-result]:empty { display: none; }

.consent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text-2); }
.consent-panel {
  flex-basis: 100%; display: grid; gap: 8px; padding: 10px 12px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.consent-panel .btn-small { justify-self: start; }
.retained {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0;
  padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2);
  border: 1px solid var(--border); background: var(--surface);
}
.ev-state { color: var(--text-3); margin-top: 6px !important; }
.ev-state a { color: var(--accent); }
.ev-state a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.ev-group { display: grid; gap: 8px; margin-top: 10px; }
.ev-item {
  display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
}
.ev-item.is-draft { border-style: dashed; }
.ev-item.is-response { margin-left: 20px; }
.ev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ev-type { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ev-tag { font-size: 11px; color: var(--text-3); border: 1px solid var(--border); border-radius: 20px; padding: 0 7px; }
.ev-status { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.ev-status.is-draft { color: var(--accent); }
.ev-statement { color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-share { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; min-height: 32px; }
.ev-share.is-disabled { color: var(--text-3); cursor: default; }
.ev-edit { display: grid; gap: 6px; }
.ev-edit-label { font-size: 12px; color: var(--text-3); }
.ev-edit textarea { width: 100%; resize: vertical; line-height: 1.5; }
.ev-edit-row { display: flex; align-items: center; gap: 8px; }
.ev-count { margin-right: auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ev-prov summary { cursor: pointer; font-size: 11.5px; color: var(--text-3); width: fit-content; }
.ev-prov summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ev-prov dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: 12px; }
.ev-prov dt { color: var(--text-3); }
.ev-prov dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.ev-error { color: var(--danger); font-size: 12.5px; }

/* Follow-through: work the owner linked, quiet until opened. */
.ev-ft { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); display: grid; gap: 6px; }
.ev-ft-title { margin: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.ev-ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ev-ft-link { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ev-ft-link a { color: var(--accent); text-decoration: none; }
.ev-ft-link a:hover { text-decoration: underline; }
.ev-ft-link a:focus-visible, .btn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ev-ft-link.is-gone { color: var(--text-3); }
.ev-ft-meta { font-size: 12px; color: var(--text-3); }
.ev-ft-link .btn-small { margin-left: 6px; }
.ev-ft-ctx summary { cursor: pointer; font-size: 11.5px; color: var(--text-3); width: fit-content; margin-top: 2px; }
.ev-ft-ctx summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ev-ft-ctx ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--text-2); }
.btn-link { background: none; border: 0; padding: 0 2px; font: inherit; font-size: 12px; color: var(--text-3);
            text-decoration: underline; cursor: pointer; min-height: 24px; }
.btn-link:hover { color: var(--text); }
.ev-ft > .btn-small { justify-self: start; }
.ft-panel { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); }
.ft-panel[hidden] { display: none; }
.ft-panel input[type=search] { width: 100%; min-height: 32px; }
.ft-opts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-2); }
.ft-opts label { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer; }
.ft-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.ft-cand { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ft-cand:hover { background: var(--surface-2); }
.ft-cand input { flex: none; }
.ft-cand-label { overflow-wrap: anywhere; }
.ft-cand-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ft-actions { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .event-detail:has(.meeting-detail) { padding: 4px 16px 16px; }
  .md-link { margin-left: 0; }
  .ev-item.is-response { margin-left: 10px; }
  .ev-status { margin-left: 0; }
  .scope { flex-direction: column; }
  .ft-cand { flex-wrap: wrap; }
  .ft-cand-meta { white-space: normal; }
  /* A meeting's state lives in its chips; on a phone they wrap rather than
     being truncated away, and the times drop beneath the title. */
  .event.is-meeting { grid-template-columns: 92px 22px 1fr 16px; row-gap: 2px; }
  .event.is-meeting .event-title { white-space: normal; line-height: 1.7; }
  .event.is-meeting .event-title .chip { display: inline-block; line-height: 1.5; }
  .event.is-meeting .event-meta { grid-column: 3; grid-row: 2; }
  .event.is-meeting .event-go { grid-column: 4; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .event-go { transition: none; } }

/* The time estimate's table. */
.md-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
.md-table th, .md-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--border); }
.md-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 600; border-top: 0; }
.md-table td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* ── Daily activity ─────────────────────────────────────── */
/* Three kinds of time, and the key says which is which: measured is solid,
   what you told us is a ring in the accent, our guess is hatched. */
.daily { padding: 20px; max-width: 1240px; display: flex; flex-direction: column; gap: 18px; }
.daily { --guess-hatch: repeating-linear-gradient(135deg, var(--text-3) 0 1.5px, transparent 1.5px 6px); }

.day-strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.day-strip { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 2px; max-width: 100%; }
.day-nav, .day-chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-2); cursor: pointer; transition: border-color .15s;
}
.day-nav { width: 38px; font-size: 20px; flex: none; }
.day-nav:disabled { opacity: .35; cursor: default; }
.day-chip {
  min-width: 78px; flex: none; padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.day-nav:hover:not(:disabled), .day-chip:hover:not(:disabled) { border-color: var(--border-strong); }
.day-nav:focus-visible, .day-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-dow { font-size: 12px; color: var(--text-3); }
.dc-dom { font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dc-st { font-size: 11.5px; min-height: 16px; }
.st-closed .dc-st { color: var(--series-pr); }
.st-needs_you { border-color: color-mix(in srgb, var(--series-meeting) 45%, var(--border)); background: color-mix(in srgb, var(--series-meeting) 10%, var(--surface)); }
.st-needs_you .dc-st { color: var(--series-meeting); font-weight: 500; }
.st-today .dc-st { color: var(--accent); font-weight: 500; }
.st-empty, .st-future { border-style: dashed; background: transparent; }
.st-empty .dc-dom, .st-future .dc-dom { color: var(--text-3); }
.st-future { opacity: .45; cursor: default; }
.day-chip.sel { border: 2px solid var(--accent); padding: 7px 9px; }

.day-jump { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.day-jump input, .day-add input, .dr-change input {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; color: var(--text); color-scheme: inherit;
}
.day-jump input:focus, .day-add input:focus, .dr-change input:focus { outline: none; border-color: var(--accent); }

.day-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--series-meeting) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--series-meeting) 40%, var(--border));
}
.day-banner p { margin: 0; font-size: 14px; color: var(--text-2); }
.day-banner strong { color: var(--text); }

.day-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.day-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.day-title { margin: 4px 0 6px; font-size: 30px; letter-spacing: -0.02em; }
.day-sub { margin: 0; color: var(--text-2); }
.day-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.day-legend li {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}
.lg { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lg-measured { background: var(--text); }
.lg-told { border: 2.5px solid var(--accent); }
.lg-guess { border: 1.5px solid var(--text-3); background: var(--guess-hatch); }

.day-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.day-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.day-timeline { padding: 18px 22px 12px; }
.tl-track { position: relative; height: 34px; }
.tl-b { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.tl-claude { background: var(--series-claude); }
.tl-meeting { background: var(--series-meeting); }
.tl-guess { background: var(--guess-hatch); border: 1.5px solid var(--text-3); }
.tl-told { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 2px solid var(--accent); }
.tl-question { border: 2px dashed var(--danger); }
.tl-axis { position: relative; height: 18px; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.tl-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tl-axis span:first-child { transform: none; }
.tl-axis span:last-child { transform: translateX(-100%); }

.day-rows { list-style: none; margin: 0; padding: 0; }
.dr {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 20px; border-top: 1px solid var(--border);
}
.dr:first-child { border-top: 0; }
.dr.pending.dr-guess { background: var(--surface-2); }
.dr-ic { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; }
.dr-measured .dr-ic { background: var(--text); }
.dr-told .dr-ic { border: 2.5px solid var(--accent); }
.dr-guess .dr-ic { border: 1.5px solid var(--text-3); background: var(--guess-hatch); }
.dr-question .dr-ic { border: 2px dashed var(--danger); }
.dr-trace .dr-ic { width: 8px; height: 8px; margin: 7px 2px 0; background: var(--text-3); }
.dr-title { font-weight: 600; font-size: 15px; }
.dr-question.pending .dr-title { color: var(--danger); }
.dr-trace .dr-title { font-weight: 500; color: var(--text-2); }
.dr-none .dr-ic { border: 1.5px solid var(--text-3); }
.dr-none .dr-title { font-weight: 500; color: var(--text-2); }
.dm-attendance { margin: 2px 0 6px; }
.dr-detail { margin-top: 3px; color: var(--text-2); font-size: 13.5px; }
.dr-end { display: flex; align-items: center; gap: 8px; }
.dr-time { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-told .dr-time { color: var(--accent); }
.dr-guess .dr-time { color: var(--text-2); }
.dr-guess.pending .dr-time { border-bottom: 1.5px dashed var(--text-3); }
.dr-guess:not(.pending) .dr-time { color: var(--text); }
.dr-none { color: var(--text-3); font-weight: 400; }
.dr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.dr-actions .btn-ghost { padding: 7px 14px; color: var(--text); }
.dr-actions .btn-primary { padding: 7px 14px; }
.dr-note { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.dr-change { display: flex; gap: 8px; margin-top: 10px; }
.dr-change input { width: 110px; }
.dr-remove {
  background: none; border: 0; color: var(--text-3); font-size: 18px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; cursor: pointer;
}
.dr-remove:hover { color: var(--danger); }
.btn-plain {
  background: none; border: 0; padding: 7px 6px; color: var(--text-2);
  font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.dr-note .btn-plain { padding: 0; font-size: 13px; }
.btn-plain:hover { color: var(--text); }
.btn-plain:focus-visible, .dr-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.day-side { display: flex; flex-direction: column; gap: 14px; }
.day-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.day-card-h { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.day-nums { display: flex; gap: 28px; }
.day-nums > div { display: flex; flex-direction: column; }
.dn-big { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dn-guess .dn-big { color: var(--text-3); text-decoration: underline dashed 1.5px; text-underline-offset: 6px; }
.dn-l { font-size: 13px; color: var(--text-2); }
.day-wide { width: 100%; padding: 12px; }
.day-hint { margin: -4px 0 0; font-size: 12.5px; color: var(--text-3); }
.day-add { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.day-add input { width: 100%; }

@media (max-width: 900px) {
  .day-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .daily { padding: 16px; }
  .day-title { font-size: 24px; }
  .dr { padding: 14px 16px; gap: 10px; }
  .day-jump { width: 100%; justify-content: space-between; }
}

/* Local development only: the meeting transcript preview. */
.md-transcript [data-transcript] { margin-top: 10px; }
.transcript-rows { list-style: none; margin: 0; padding: 0; max-height: 480px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.transcript-rows li { display: grid; grid-template-columns: 5.5em 4.5em 1fr; gap: 8px; padding: 5px 10px;
  border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.transcript-rows li:last-child { border-bottom: 0; }
.transcript-rows time { font-family: var(--mono); color: var(--text-3); }
.transcript-rows b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-3); padding-top: 2px; }
.transcript-rows li.is-you b { color: var(--accent); }
.transcript-rows span { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .transcript-rows li { grid-template-columns: 5.5em 1fr; }
  .transcript-rows span { grid-column: 1 / -1; }
}

/* A meeting's facts: status, times, attendance, who was invited and joined. */
.md-facts { display: grid; gap: 4px; margin: 0 0 6px; }
.md-fact { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; align-items: baseline; }
.md-fact dt { color: var(--text-3); font-size: 12px; }
.md-fact dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.md-fact [data-participants] { margin-top: 6px; }
.participant-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.participant-list li { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px;
  background: var(--surface-2); }
@media (max-width: 560px) {
  .md-fact { grid-template-columns: 1fr; gap: 0; }
}

/* The meeting brief: an immediate effect sits under its contribution; outcome apart from follow-through. */
.ev-effect { margin: 4px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--border); }
.md-transcript { margin-top: 10px; }
.md-transcript h5 { margin: 0 0 6px; font-size: 13px; }
.ev-reaction { font-weight: 600; }
.md-sources-details > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.md-sources-details > summary::-webkit-details-marker { display: none; }
.md-sources-details > summary::before { content: "▸"; color: var(--text-3); font-size: 11px; }
.md-sources-details[open] > summary::before { content: "▾"; }
.md-sources-details > summary h4 { display: inline; margin: 0; }
.md-sources-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Contribution → immediate effect → follow-through → outcome, one under the other. */
.ev-group > .ev-ft, .ev-group > .ev-outcome { margin: 4px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--border); }
.ev-group > .ev-ft.is-empty { border-left-color: transparent; }
.ev-outcome .ev-ok { color: var(--accent); font-weight: 700; }

/* ── Meeting detail: overview, transcript, work, timeline ─────────────── */
.md-overview { padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.md-overview-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.md-title { margin: 0; font-size: 15px; font-weight: 650; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.md-overview-facts { margin-top: 2px; }
.md-transcript-bar { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.md-transcript-bar .tb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.md-transcript-bar .tb-label { color: var(--text-2); }
.md-transcript-bar .tb-label strong { color: var(--text); font-weight: 600; }
.md-transcript-bar .tb-consent { margin-left: auto; }
.md-transcript-bar .tb-consent .consent { margin: 0; }
.md-transcript-view { margin-top: 10px; }
.transcript-rows li.is-cited { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.transcript-rows li:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.md-count { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.work-thread .ev-statement { font-size: 14px; line-height: 1.5; color: var(--text); }
.ev-source { margin: 4px 0 0; font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ev-status.is-draft { color: var(--accent); font-weight: 600; }
.ev-actions.is-quiet .btn-small.quiet { padding: 2px 8px; font-size: 12px; color: var(--text-3); border-color: transparent; background: transparent; }
.ev-actions.is-quiet .btn-small.quiet:hover, .ev-actions.is-quiet .btn-small.quiet:focus-visible { color: var(--text); border-color: var(--border); }
.ev-timeline ol { list-style: none; margin: 4px 0 0; padding: 0; }
.ev-timeline li { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 3px 0 3px 12px; position: relative; font-size: 13px; }
.ev-timeline li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.ev-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 2.5px; top: 18px; bottom: -6px; width: 1px; background: var(--border); }
.ev-timeline li.is-done::before { background: var(--accent); }
.ev-timeline time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ev-group > .ev-timeline { margin: 4px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--border); }
.ft-cand-kind { display: inline-block; min-width: 3.4em; font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ft-cand-meta { display: block; padding-left: 3.9em; font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) {
  .md-transcript-bar .tb-consent { margin-left: 0; }
  .ft-cand-meta { padding-left: 0; }
}

/* ── Dashboard: meetings ──────────────────────────────────────────────── */
.hours-stat.is-review .v { color: var(--accent); }
.mi-body { padding: 10px 16px 14px; }
.mi-kinds { margin: 0 0 8px; }
.mi-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mi-work li {
  display: grid; grid-template-columns: 7.5em 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px;
}
.mi-work li:first-child { border-top: 0; }
.mi-kind { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.mi-statement { color: var(--text); overflow-wrap: anywhere; }
.mi-meta { grid-column: 2; font-size: 12px; color: var(--text-3); }
.mi-work .btn-link { grid-column: 3; grid-row: 1; white-space: nowrap; }
@media (max-width: 560px) {
  .mi-work li { grid-template-columns: 1fr; }
  .mi-meta, .mi-work .btn-link { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ── Daily activity: work from meetings ───────────────────────────────── */
.day-meetings { margin-top: 12px; padding: 12px 16px; }
.dm-meeting + .dm-meeting { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.dm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-title { font-weight: 600; color: var(--text); }
.dm-time { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.dm-head .btn-link { margin-left: auto; }
.dm-items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.dm-kind { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.dm-statement { color: var(--text); }
.dm-effect { margin: 3px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--border); color: var(--text-2); }

/* ── Meeting detail v2: one card per thread, one footer per item ──────────
 * The thread is the card; the items inside it are plain. An immediate effect
 * hangs off a rule beneath its contribution; follow-through, outcome and the
 * timeline follow on the same rule. Actions sit at the right of the source
 * line, so an item is two lines: what it says, and where it came from.
 */
.meeting-detail .md-overview { padding-bottom: 12px; margin-bottom: 0; }
.md-overview .md-facts { margin-bottom: 8px; }
.md-overview .assign { display: grid; grid-template-columns: 9.5em 1fr; gap: 6px 8px; align-items: center; }
.md-overview .assign-label { font-size: 12px; }
.md-overview .assign > :not(.assign-label) { grid-column: 2; }
.md-overview .assign select { justify-self: start; min-width: 14em; }
.md-overview .assign .scope { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; padding: 0; margin: 0; }
.md-overview .assign [data-action="assign"] { justify-self: start; }

.meeting-detail .work-thread {
  gap: 0; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
}
.meeting-detail .work-thread:has(.ev-item.is-draft) { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.meeting-detail .work-thread .ev-item { padding: 0; border: 0; background: none; gap: 4px; }
.meeting-detail .work-thread .ev-item.is-response { margin-left: 0; }
.meeting-detail .work-thread > .ev-effect,
.meeting-detail .work-thread > .ev-ft:not(.is-empty),
.meeting-detail .work-thread > .ev-outcome,
.meeting-detail .work-thread > .ev-timeline { margin: 10px 0 0 4px; padding: 0 0 0 12px; border-top: 0; border-left: 2px solid var(--border); }
.meeting-detail .work-thread > .ev-ft.is-empty { margin: 0; padding: 0; border: 0; }
.meeting-detail .work-thread > .ev-ft.is-empty:has(.ft-panel:not([hidden])) { margin-top: 10px; }
.meeting-detail .work-thread .ev-statement { font-size: 14px; }

.ev-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.ev-foot .ev-source { margin: 0; gap: 4px 10px; }
.ev-foot .ev-actions { gap: 2px; }
.ev-source .ev-prov summary { font-size: 12px; list-style: none; }
.ev-source .ev-prov summary::-webkit-details-marker { display: none; }
.ev-source { flex-wrap: wrap; }
.ev-share-row { margin-top: 2px; }
.ev-actions [data-action="confirm"] { order: -1; }

.md-count-review { color: var(--accent); font-weight: 550; }
.md-sources-body { display: grid; gap: 8px; margin-top: 8px; justify-items: start; }
.md-sources-body .consent { margin: 0; }
.summary-inputs { margin: 0; padding: 0 16px 12px; }
.mi-place { margin: 10px 0 0; }

/* One line for where a meeting belongs: select, scope, Apply. */
.md-overview .assign { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.md-overview .assign-label { flex: 0 0 calc(9.5em - 6px); }
.md-overview .assign > select { min-width: 12em; }
.md-overview .assign > .assign-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.md-overview .assign > .warn, .md-overview .assign > [data-assign-result] { flex-basis: 100%; margin: 0 0 0 calc(9.5em + 8px); }
.md-overview .assign > [data-assign-result]:empty { display: none; }
.assign-row .scope { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; padding: 0; margin: 0; }
@media (max-width: 640px) {
  .md-overview .assign-label { flex-basis: 100%; }
  .md-overview .assign > .warn, .md-overview .assign > [data-assign-result] { margin-left: 0; }
}

/* Disclosures draw their own chevron: "▸" falls back to a bullet in some fonts. */
.md-sources-details > summary::before,
.ev-prov > summary::after, .ev-timeline summary::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 2px 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
  transition: transform .12s; color: var(--text-3);
}
.ev-source .ev-prov > summary::after { margin: 0 0 2px 6px; }
.md-sources-details[open] > summary::before, .ev-prov[open] > summary::after, .ev-timeline details[open] summary::before { content: ""; transform: rotate(45deg); }
.ev-timeline summary { cursor: pointer; list-style: none; width: fit-content; }
.ev-timeline summary::-webkit-details-marker { display: none; }
.ev-ft-link .btn-link { margin-left: 8px; }

/* "How this was drafted", opened: its facts take a line of their own under the source. */
.ev-foot:has(.ev-prov[open]) .ev-source { flex-basis: 100%; }
.ev-source .ev-prov[open] { flex-basis: 100%; }
.ev-source .ev-prov[open] > summary { margin-bottom: 2px; }
.md-overview .assign > select { min-width: 0; width: 13em; }

/* Drive: the on-request read, and Meet's files under Sources. */
.ev-on-request { display: grid; gap: 8px; justify-items: start; }
.ev-on-request p { margin: 0; }
.md-drive-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.md-drive-files .md-link { margin-left: 6px; }
.md-sources-body > .md-link { justify-self: start; margin: 0; }

/* Account: Google capabilities, one row each. */
.gcaps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.gcap { display: grid; grid-template-columns: 11em 1fr auto auto; gap: 4px 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 13px; }
.gcap:first-child { border-top: 0; }
.gcap-name { font-weight: 550; color: var(--text); }
.gcap-what { color: var(--text-3); font-size: 12px; }
.gcap-state { font-size: 12px; color: var(--text-3); }
.gcap.is-on .gcap-state { color: var(--success, #3fb950); }
.gcap-note, .gcap-inventory { margin: 0 0 10px; }
@media (max-width: 640px) { .gcap { grid-template-columns: 1fr auto; } .gcap-what { grid-column: 1 / -1; } }

/* Gemini meeting notes: Gemini's words, set apart from evidence. */
.md-notes .note-items { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.md-notes .note-item { font-size: 13px; line-height: 1.5; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.md-notes .note-item.is-candidate { display: grid; gap: 6px; }
.md-notes .note-actions { display: flex; gap: 6px; }
.md-notes .note-text { color: var(--text); }

/* The meeting's material: one row each, the notes viewer beneath. */
.md-transcript-bar .tb-row + .tb-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.md-notes-view { margin-top: 10px; max-height: 480px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--bg); }
.notes-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.notes-tab { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; }
.notes-tab.on { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.notes-panel h5 { margin: 12px 0 4px; font-size: 12px; color: var(--text-2); text-transform: none; letter-spacing: 0; }
.notes-panel p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: var(--text); }
.notes-conf { margin: 6px 0; }
.md-notes .note-item.is-candidate .ev-tag { justify-self: start; }

/* View Meet files: metadata only, one row per file. */
.mf-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.mf-row { padding: 7px 10px; border-top: 1px solid var(--border); font-size: 13px; }
.mf-row:first-child { border-top: 0; }
.mf-meeting { overflow-wrap: anywhere; }
.mf-row.is-read .mf-read { color: var(--text); font-weight: 600; }
.md-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--text-2); font-size: 13px; }

/* A project's meeting series. */
.series-list { list-style: none; margin: 8px 0; padding: 0; }
.series-item { padding: 8px 0; border-top: 1px solid var(--border); }
.series-item:first-child { border-top: 0; }
.series-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.series-actions { display: flex; gap: 12px; margin-top: 4px; }
.series-h { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.series-search { width: 100%; max-width: 360px; margin: 4px 0; }
.series-others { max-height: 260px; overflow-y: auto; }
.series-occ { list-style: none; padding: 4px 0 0 12px; margin: 0; font-size: 13px; }
.md-placement { margin: 0 0 6px; }

.series-pick label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.series-pick input { margin-top: 3px; }
.series-why { display: block; margin-top: 2px; }
.series-add-bar { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.alias-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.alias-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; }
.alias-x { background: none; border: 0; color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.mi-series { padding: 4px 16px 8px; border-top: 1px solid var(--border); }
.mi-series-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 12px 0 2px; }
.md-material .tb-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 8px 12px; }
.md-material .tb-label { color: var(--text-2); }
.md-material-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0 0 6px; }
@media (max-width: 640px) { .md-material .tb-row { grid-template-columns: 1fr; } }

/* Work from this meeting: a compact workspace in tabs. Kinds are words, never colour alone. */
.wk-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border); margin: 6px 0 10px; }
.wk-tab { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.wk-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.wk-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.wk-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 999px; background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--text); text-align: center; }
.wk-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-group { margin: 10px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); font-weight: 600; }
.wk-group:first-child { margin-top: 0; }
.wk-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; background: var(--surface); }
.wk-card.is-draft { border-style: dashed; }
.wk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-2); }
.wk-check { color: var(--ok, #3fb950); font-weight: 700; }
.wk-title { margin: 6px 0 0; font-weight: 600; }
.wk-text { margin: 4px 0 0; }
.wk-meta { margin: 6px 0 0; }
.wk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.wk-passive-list { list-style: none; padding: 0; margin: 0 0 6px; }
.wk-passive { padding: 6px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.wk-passive .wk-kind { margin-right: 6px; }
.wk-find { margin: 10px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wk-empty .ev-state { margin: 0; }
.ev-kind { display: inline-flex; align-items: center; vertical-align: middle; }
.ev-kind[open] { flex-wrap: wrap; }
.ev-kind > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; line-height: inherit; }
.ev-kind > summary::-webkit-details-marker { display: none; }
.ev-kind-list { display: inline-flex; gap: 8px; margin-left: 6px; }
@media (max-width: 640px) { .wk-tab { padding: 7px 8px; } }
/* Overview: what needs review, and the meeting's work at a glance — never a second copy of a card. */
.wk-tabs { flex-wrap: nowrap; }
.wk-count.is-zero { background: transparent; color: var(--text-3); font-weight: 500; }
.wk-count.is-review { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.wk-allclear { margin: 2px 0 8px; color: var(--text-2); }
.wk-allclear span { color: var(--ok, #3fb950); font-weight: 700; margin-right: 4px; }
.wk-snap { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.wk-snap-tile { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
.wk-snap-tile.is-zero { opacity: .72; }
.wk-snap-n { font-size: 20px; font-weight: 700; line-height: 1.2; }
.wk-snap-tile .btn-link { align-self: flex-start; margin-top: 2px; }
.wk-empty-card { border-style: dashed; background: transparent; }
.wk-empty-card .wk-text { margin-top: 4px; }
.wk-context-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.wk-waiting { margin: 0 0 8px; }
.wk-effect { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--border-strong); }
.tb-evidence .ev-state { margin: 4px 0 0; }

/* ── Growth ─────────────────────────────────────────────── */
.growth-head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 16px; }
.growth-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.growth-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.growth-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.growth-big { font-size: 24px; font-weight: 600; margin: 4px 0 2px; }
.growth-sub { font-size: 13px; color: var(--text-2); }
.growth-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.growth-insights { margin: 22px 0; }
.growth-insights > h3 { font-size: 15px; margin: 0 0 4px; }
.growth-insights > .hint { margin: 0 0 12px; }
.insight-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.insight-label { color: var(--text-2); }
.insight-value { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.insight-repos { list-style: none; margin: 12px 0 0; padding: 0; }
.insight-repos li { padding: 6px 0; font-size: 14px; }
.insight-skills { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.insights-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.insights-head > h3 { margin: 0; }
.range-control { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.range-control button { font: inherit; font-size: 13px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.range-control button[aria-pressed="true"] { color: inherit; border-color: currentColor; font-weight: 600; }
.fact-list { list-style: none; margin: 12px 0 0; padding: 0; }
.fact { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.fact summary { cursor: pointer; }
.fact-evidence { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; display: grid; gap: 4px; font-size: 14px; }
.insight-more, .insight-numbers { margin-top: 14px; }
.insight-more > summary, .insight-numbers > summary { cursor: pointer; color: var(--text-2); font-size: 14px; }
.insight-numbers > .hint { margin: 10px 0 12px; }
.growth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.growth-card h3 { font-size: 15px; margin: 0 0 12px; }
.growth-card h4 { font-size: 13px; color: var(--text-2); margin: 18px 0 8px; }
.growth-card a { color: var(--accent); }
.growth-card a:hover { text-decoration: underline; }
.growth-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.milestones, .skill-list, .next-up, .skill-evidence { list-style: none; margin: 0; padding: 0; }
.milestone { display: flex; gap: 12px; padding: 0 0 14px; position: relative; }
.milestone-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.milestone-title { font-weight: 500; }
.milestone-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.skills-view { display: grid; gap: 12px; }
.skill-rings { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.skill-rings .ring { stroke-width: 1.5; }
.skill-rings .ring-confident  { fill: color-mix(in srgb, var(--lvl-confident) 13%, var(--surface)); stroke: var(--lvl-confident); }
.skill-rings .ring-practicing { fill: color-mix(in srgb, var(--lvl-practicing) 13%, var(--surface)); stroke: var(--lvl-practicing); }
.skill-rings .ring-learning   { fill: color-mix(in srgb, var(--lvl-learning) 13%, var(--surface)); stroke: var(--lvl-learning); }
.skill-rings .ring-label { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--text-2); font-weight: 600; text-anchor: middle; }
.skill-dot { cursor: pointer; outline: none; }
.skill-dot .dot-hit { fill: transparent; }
.skill-dot .dot-mark { stroke: var(--surface); stroke-width: 2; }
.skill-dot .dot-confident  { fill: var(--lvl-confident); }
.skill-dot .dot-practicing { fill: var(--lvl-practicing); }
.skill-dot .dot-learning   { fill: var(--lvl-learning); }
.skill-dot:hover .dot-mark, .skill-dot:focus-visible .dot-mark { stroke: var(--text); }
.skill-dot:focus-visible .dot-hit { stroke: var(--accent); stroke-width: 2; }
.skill-dot .dot-label { font-size: 13px; fill: var(--text); text-anchor: middle; pointer-events: none; font-weight: 500; }
@media (max-width: 520px) { .skill-dot .dot-label { display: none; } }
.skill-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-tab { font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.skill-tab[aria-pressed="true"] { color: inherit; border-color: currentColor; }
.skill-tab b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lvl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lvl-confident { background: var(--lvl-confident); } .lvl-practicing { background: var(--lvl-practicing); } .lvl-learning { background: var(--lvl-learning); }
.skills-more { margin-top: 6px; }
.skills-more > summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.skill-row { border-top: 1px solid var(--border); padding: 10px 0; }
.skill-row:first-child { border-top: 0; }
.skill-row summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skill-name { font-weight: 500; }
.skill-level { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.skill-meta { font-size: 12px; margin: 8px 0 4px; }
.skill-evidence { font-size: 13px; display: grid; gap: 6px; }
.skill-evidence q { color: var(--text-2); }
.level-bar { display: inline-flex; gap: 3px; }
.level-bar i { width: 18px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.level-bar i.on { background: var(--accent); }
.next-up { font-size: 13px; color: var(--text-2); display: grid; gap: 4px; }

/* The Plinth page, as daily and actions are: same padding and width, h1 and cards from plinth.css.
   plinth.css loads after this file and zeroes h1-h3 and p margins at the same specificity, so the
   spacing it would flatten is restated under .growth-page.plinth, as the other pages do. */
.growth-page { min-height: 100%; padding: 32px clamp(16px, 4vw, 48px) 80px; }
.growth-page > div { max-width: 1164px; }
.growth-page.plinth .growth-head { align-items: flex-start; margin-bottom: 22px; }
.growth-page.plinth .growth-head .hint { margin-top: 4px; max-width: 62ch; }
.growth-page.plinth .growth-card h3 { margin: 0 0 12px; }
.growth-page.plinth .growth-insights > h3 { margin: 0 0 4px; }
.growth-page.plinth .growth-insights > .hint { margin: 0 0 12px; }
.growth-page.plinth .growth-card p.muted { margin: 10px 0 0; }
/* Scope and Leverage side by side, Depth under them across the row, its repos flowing in columns:
   Depth is the tall one, and in a third column it left a hole under the others and pushed
   Milestones and Skills down a screen. */
.growth-page.plinth .growth-cols-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.growth-page.plinth .growth-card.wide { grid-column: 1 / -1; }
.growth-page.plinth .growth-card.wide > .insight-row { max-width: 420px; }
.growth-page.plinth .growth-card.wide .insight-repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 28px; }
.growth-page.plinth .insight-repos .repo-name { display: block; font-weight: 500; overflow-wrap: anywhere; }
.growth-page.plinth .milestones-more { margin-top: 4px; }
.growth-page.plinth .milestones-more > summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 4px 0 12px; }
.growth-page.plinth .milestones-more > summary:hover { color: var(--text); }
@media (max-width: 720px) {
  .growth-page.plinth .growth-cols-insights { grid-template-columns: minmax(0, 1fr); }
}

/* ── Action items ───────────────────────────────────────────
   The approved Plinth mock's board, on main's tokens (plinth.css aliases them). Everything here is
   under .actions-page, the page's root, so none of it reaches another page. */
/* The mock's page: 32px clamp(16px, 4vw, 48px) padding, 1260px including it. */
.actions-page { min-height: 100%; padding: 32px clamp(16px, 4vw, 48px) 80px; }
.actions-page > div { max-width: 1164px; }
/* After the first draw of a visit the board redraws in place: cards and sections don't enter again. */
.actions-page.plinth.steady .rise, .actions-page.plinth.steady .tcard:not(.cform) { animation: none; }
.actions-page.plinth .linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.actions-page.plinth .linkish:hover { color: var(--ink); }
.actions-page.plinth .field.act-select { width: auto; min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* Header: title and the one line under it; the page's own controls in one row of 32px, centred on the title. */
.actions-page.plinth .act-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.actions-page.plinth .act-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.actions-page.plinth .act-head h1 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.actions-page.plinth .act-head-ico { width: 28px; height: 28px; border-radius: 8px; }
.actions-page.plinth .psq.all .ico { width: 15px; height: 15px; stroke-width: 2; }
.actions-page.plinth .act-sub { font-size: 14px; color: var(--ink2); }
.actions-page.plinth .act-tools { gap: 8px; }
.actions-page.plinth .field.act-select { width: auto; height: 32px; min-height: 32px; padding: 0 30px 0 10px; font-size: 13px; line-height: 30px; border-radius: 8px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--surface) no-repeat right 10px center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968E83' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.actions-page.plinth .act-syncbox { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 2px 0 10px;
  border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); }
.actions-page.plinth .act-synced { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.actions-page.plinth .act-synced .dot { width: 7px; height: 7px; color: var(--ok); }
.actions-page.plinth .act-syncbox.trouble .dot { color: var(--warn-c); }
.actions-page.plinth .act-syncbox.never .dot { color: var(--ink3); }
.actions-page.plinth .act-tool-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink2); cursor: pointer; transition: background-color .2s, color .2s; }
.actions-page.plinth .act-tool-btn:hover { background: var(--surface2); color: var(--ink); }
.actions-page.plinth .act-tool-btn.bordered { width: 32px; height: 32px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); }
.actions-page.plinth .act-tool-btn .ico { width: 16px; height: 16px; }
.actions-page.plinth .act-pop-wrap { position: relative; }
.actions-page.plinth .act-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(380px, 86vw); padding: 16px;
  display: flex; flex-direction: column; gap: 10px; }
.actions-page.plinth .act-pop .chip { text-decoration: none; }
.actions-page.plinth .act-digest { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.actions-page.plinth .act-digest a { color: var(--accc); }

/* Suggestions: full width, warm and dashed, star first — not yet anyone's work. The mock's 14/16 padding, 20 apart. */
.actions-page.plinth .act-suggestions { margin-bottom: 20px; display: flex; flex-direction: column; gap: 20px; }
.actions-page.plinth .act-count { font-size: 12px; font-weight: 600; color: var(--ink3); font-variant-numeric: tabular-nums; }
.actions-page.plinth .suggest { margin: 0; padding: 14px 16px; gap: 14px; border-radius: 14px; flex-wrap: nowrap; }
.actions-page.plinth .act-star { color: var(--accc); flex: none; display: grid; }
.actions-page.plinth .act-star .ico { width: 18px; height: 18px; stroke-width: 1.75; }
.actions-page.plinth .suggest .pbadge { margin-top: 0; }
.actions-page.plinth .act-sug-t { font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.actions-page.plinth .act-sug-why { font-size: 12px; color: var(--ink2); line-height: 1.5; }
.actions-page.plinth .suggest .btn { flex: none; }
.actions-page.plinth .act-sug-h { gap: 8px; margin-bottom: -8px; }
.actions-page.plinth .act-sug-none { margin: 0; }
.actions-page.plinth .act-completed { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; color: var(--ok); }
.actions-page.plinth .act-completed.offer { color: var(--ink2); }
.actions-page.plinth .act-completed .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.actions-page.plinth .act-completed.by-you, .actions-page.plinth .act-completed.by-meeting { color: var(--ink2); }
.actions-page.plinth .act-completed-sub { display: block; color: var(--ink3); }
.actions-page.plinth .act-hist-ok { color: var(--ok); flex: none; display: grid; padding-top: 2px; }
.actions-page.plinth .act-hist-ok .ico { width: 14px; height: 14px; }

/* Where the work stands: four counts, and the way to what's finished. */
.actions-page.plinth .act-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -8px 0 20px; }
.actions-page.plinth .act-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 13px; color: var(--ink2); white-space: nowrap; }
.actions-page.plinth .act-stat b { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.actions-page.plinth .act-lane-older .ico { width: 14px; height: 14px; }
.actions-page.plinth .act-lane-older { display: inline-flex; align-items: center; gap: 4px; margin: 2px 2px 0; font-size: 12px; color: var(--ink3); text-decoration: none; }
.actions-page.plinth .act-lane-older:hover { color: var(--ink); }

/* A new board: what's connected, each as it's ready. */
.actions-page.plinth .act-setup { margin: -8px 0 20px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.actions-page.plinth .act-setup-h { margin: 0; font-size: 15px; font-weight: 600; }
.actions-page.plinth .act-setup-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }
.actions-page.plinth .setup-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.actions-page.plinth .setup-src { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; }
.actions-page.plinth .setup-src .setup-state { color: var(--ink3); }
.actions-page.plinth .setup-src.ok .setup-mark { color: var(--ok); }
.actions-page.plinth .setup-src.bad .setup-mark, .actions-page.plinth .setup-src.bad .setup-state { color: var(--warn-c); }
.actions-page.plinth .setup-mark { display: grid; }
.actions-page.plinth .setup-mark .ico { width: 13px; height: 13px; }

/* After Sync now: what it found, one line. */
.actions-page.plinth .act-sync-result { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -8px 0 16px; padding: 6px 6px 6px 14px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink2); }
.actions-page.plinth .act-sync-result .sync-h { font-weight: 600; color: var(--ink); }
.actions-page.plinth .act-sync-result .sync-src.ok { color: var(--ok); }
.actions-page.plinth .act-sync-result .sync-src.error { color: var(--warn-c); }
.actions-page.plinth .act-sync-result .btn { margin-left: auto; }

/* What the work did since: offered on the card, never done for its owner. */
.actions-page.plinth .act-signal { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; color: var(--accc); }
.actions-page.plinth .act-signal.reopened { color: var(--warn-c); }
.actions-page.plinth .act-signal .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.actions-page.plinth .act-signal-btn .ico { width: 14px; height: 14px; }

/* Below the board: older open work, what finished lately, History — one line each, never lists. */
.actions-page.plinth .act-more-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; }
.actions-page.plinth .act-more-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink2); text-decoration: none; }
.actions-page.plinth .act-more-link:hover { color: var(--ink); border-color: var(--line2); }
.actions-page.plinth .act-more-link.older { color: var(--accc); }
.actions-page.plinth .act-more-link .ico { width: 14px; height: 14px; flex: none; }

/* A tool's own title, under a readable one: the evidence, small. */
.actions-page.plinth .act-orig { font-size: 11.5px; color: var(--ink3); font-style: normal; overflow-wrap: anywhere; }

/* A kind of work: a quiet chip, its reason in the tooltip. */
.actions-page.plinth .act-cat { font-size: 11px; padding: 1px 8px; vertical-align: 1px; white-space: nowrap; color: var(--ink2); }

/* Older open work (#/actions/older): kinds as tabs, five of each, three answers per row. */
.actions-page.plinth .older-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; }
.actions-page.plinth .older-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font: inherit; font-size: 13px; color: var(--ink2); cursor: pointer; }
.actions-page.plinth .older-tab.on { border-color: var(--accc); color: var(--ink); }
.actions-page.plinth .older-actions { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.actions-page.plinth .older-more { margin-top: 6px; }

/* Done: what was finished, compact — five at most, then View all completed. Their own rows move; elsewhere's are read-only. */
.actions-page.plinth .done-row { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); }
.actions-page.plinth .done-row.mine { cursor: grab; }
.actions-page.plinth .done-row.mine.dragging { opacity: .5; }
.actions-page.plinth .done-row.attention { border-color: color-mix(in srgb, var(--warn-c) 45%, var(--line)); }
.actions-page.plinth .done-row .pbadge { flex: none; margin-top: 1px; }
.actions-page.plinth .done-t { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.actions-page.plinth .done-why { margin: 2px 0 0; font-size: 11.5px; color: var(--ink3); }
/* One check mark per row: the row's own; the completion line inside it reads as text. */
.actions-page.plinth .done-row .act-completed { margin-top: 2px; font-size: 11.5px; }
.actions-page.plinth .done-row .act-completed > .ico { display: none; }
.actions-page.plinth .done-why .linkish { color: var(--accc); }
.actions-page.plinth .done-acts { gap: 4px; margin-top: 4px; }
.actions-page.plinth .done-acts:empty { display: none; }
.actions-page.plinth .done-row .act-signal { margin-top: 4px; }
.actions-page.plinth .done-row .act-signal-btn { margin-top: 6px; }
.actions-page.plinth .done-more-attn { margin: 0; font-size: 12px; color: var(--warn-c); }
.actions-page.plinth .done-all { color: var(--ink2); font-weight: 500; }

/* A History date: empty reads "Any day" in every browser (WebKit would draw today's date in it). */
.actions-page.plinth .hist-date-in { position: relative; display: inline-flex; }
.actions-page.plinth .hist-date-in input[data-empty]:not(:focus),
.actions-page.plinth .hist-date-in input[data-empty]:not(:focus)::-webkit-datetime-edit,
.actions-page.plinth .hist-date-in input[data-empty]:not(:focus)::-webkit-datetime-edit-fields-wrapper,
.actions-page.plinth .hist-date-in input[data-empty]:not(:focus)::-webkit-datetime-edit-month-field,
.actions-page.plinth .hist-date-in input[data-empty]:not(:focus)::-webkit-datetime-edit-day-field,
.actions-page.plinth .hist-date-in input[data-empty]:not(:focus)::-webkit-datetime-edit-year-field,
.actions-page.plinth .hist-date-in input[data-empty]:not(:focus)::-webkit-datetime-edit-text { color: transparent; }
.actions-page.plinth .hist-any { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 13px; color: var(--ink3); }
.actions-page.plinth .hist-date-in input:not([data-empty]) + .hist-any,
.actions-page.plinth .hist-date-in input:focus + .hist-any { display: none; }

/* History (#/actions/history): filters in one wrapping row, then the finished work by day. */
.actions-page.plinth .act-back { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-bottom: 6px; font-size: 13px; color: var(--ink2); text-decoration: none; }
.actions-page.plinth .act-back:hover { color: var(--ink); }
.actions-page.plinth .act-back .ico { width: 14px; height: 14px; }
.actions-page.plinth .hist-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 12px; }
.actions-page.plinth .hist-q { flex: 1 1 240px; min-width: 0; height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.actions-page.plinth .hist-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); }
.actions-page.plinth .hist-date .field { width: auto; height: 32px; min-height: 32px; padding: 0 8px; font-size: 13px; border-radius: 8px; }
.actions-page.plinth .hist-count { margin: 0 0 12px; font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; min-height: 1em; }
.actions-page.plinth .hist-day { margin-bottom: 18px; }
.actions-page.plinth .hist-day-h { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink3); text-transform: uppercase; }
.actions-page.plinth .hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.actions-page.plinth .hist-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.actions-page.plinth .hist-row .pbadge { flex: none; margin-top: 1px; }
.actions-page.plinth .hist-t { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.actions-page.plinth .hist-why { margin: 2px 0 0; font-size: 12px; color: var(--ok); }
.actions-page.plinth .hist-row[data-reason="you"] .hist-why, .actions-page.plinth .hist-row[data-reason="meeting"] .hist-why { color: var(--ink2); }
.actions-page.plinth .hist-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 2px 0 0; font-size: 12px; color: var(--ink3); }
.actions-page.plinth .hist-meta .linkish { color: var(--accc); }
.actions-page.plinth .hist-empty { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 16px; border-radius: 12px; border: 1px dashed var(--line2); font-size: 13px; color: var(--ink2); }
.actions-page.plinth .hist-empty .linkish { color: var(--accc); }
.actions-page.plinth .hist-more { margin: 4px auto 0; display: flex; }
.actions-page.plinth .hist-end { text-align: center; font-size: 12px; color: var(--ink3); }
@media (max-width: 560px) {
  .actions-page.plinth .act-counts .grow { display: none; }
  .actions-page.plinth .hist-date { flex: 1 1 140px; }
  .actions-page.plinth .hist-date .field { flex: 1; min-width: 0; }
  .actions-page.plinth .hist-date-in { flex: 1; min-width: 0; }
  .actions-page.plinth .hist-date-in .field { flex: 1; min-width: 0; }
  .actions-page.plinth .hist-filters .act-select { flex: 1 1 140px; }
}

/* Board: the mock's columns — at least 272px, sharing the width, 16 apart; the Add column tile inset like a column. */
.actions-page.plinth .board { grid-auto-columns: minmax(272px, 1fr); gap: 16px; }
.actions-page.plinth .lane { padding: 12px; gap: 10px; min-height: 260px; }
.actions-page.plinth .lane-h { padding: 4px 2px 6px 6px; gap: 8px; height: 36px; }
.actions-page.plinth .lane-h .lane-title { font-size: 13px; font-weight: 600; }
.actions-page.plinth span.lane-title { cursor: default; }
.actions-page.plinth span.lane-title:hover { background: none; }
.actions-page.plinth .lane-h .act-count { margin-left: 4px; }
.actions-page.plinth .act-lane-x { width: 30px; min-height: 30px; color: var(--ink2); }
.actions-page.plinth .act-lane-x:hover { color: var(--ink); }
.actions-page.plinth .act-lane-x .ico { width: 16px; height: 16px; }
.actions-page.plinth .act-lane-input { min-height: 34px; padding: 4px 10px; }
.actions-page.plinth .act-lane-empty { margin: 0; padding: 8px 6px; font-size: 12px; color: var(--ink3); }
.actions-page.plinth .lane-new { padding: 12px 0; background: transparent; min-height: 0; }
.actions-page.plinth .act-add-col { min-height: 96px; border-radius: 12px; }
.actions-page.plinth .lane-new form { padding: 14px; border: 1.5px dashed var(--line2); border-radius: 12px; }
.actions-page.plinth .lane-add .ico, .actions-page.plinth .act-add-col .ico { width: 16px; height: 16px; }

/* Cards: the mock's — 13px title, 12px note under it, one row of chips, where its work stands bottom right. */
.actions-page.plinth .tcard { padding: 14px; gap: 10px; border-radius: 12px; }
.actions-page.plinth .tcard:focus-visible { outline: 2px solid var(--accc); outline-offset: 2px; }
.actions-page.plinth .tcard.overdue { box-shadow: inset 3px 0 0 var(--warn-c), var(--shadow); }
.actions-page.plinth .act-card-h { gap: 8px; align-items: flex-start; }
.actions-page.plinth .act-card-h .pbadge { margin-top: 0; }
.actions-page.plinth .tcard .t { font-size: 13px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; padding-top: 1px; }
.actions-page.plinth .act-grip { color: var(--ink3); cursor: grab; margin: 2px -4px 0 -4px; flex: none; display: grid; }
.actions-page.plinth .act-grip .ico { width: 14px; height: 14px; stroke-width: 2.8; }
.actions-page.plinth .act-edit { width: 30px; min-height: 30px; margin: -5px -8px 0 0; color: var(--ink2); }
.actions-page.plinth .act-edit .ico { width: 16px; height: 16px; }
.actions-page.plinth .act-desc { margin: -4px 0 0 18px; font-size: 12px; line-height: 1.45; color: var(--ink2); }
.actions-page.plinth .act-chips { gap: 6px; flex-wrap: wrap; }
.actions-page.plinth .act-chips .chip { max-width: 100%; overflow: hidden; white-space: nowrap; gap: 4px; }
/* On a card, chips are a notch smaller so priority, project and due date share one row. */
.actions-page.plinth .tcard .act-chips { gap: 4px; }
.actions-page.plinth .tcard .act-chips .chip { height: 22px; padding: 0 8px; font-size: 11.5px; }
.actions-page.plinth .tcard .act-chips .chip .ico { width: 12px; height: 12px; }
.actions-page.plinth .act-chips .chip .ico { width: 13px; height: 13px; }
.actions-page.plinth .act-chip-btn { border: 0; font: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.actions-page.plinth .act-chip-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, var(--surface2)); }
.actions-page.plinth .act-foot { gap: 2px; margin: 0 -6px 0 -4px; min-height: 30px; }
.actions-page.plinth .act-move { width: 30px; min-height: 30px; color: var(--ink2); }
.actions-page.plinth .act-move .ico { width: 16px; height: 16px; }
.actions-page.plinth .act-evidence { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 12px; color: var(--ink3); padding-right: 6px; }
.actions-page.plinth .act-ev { color: inherit; text-decoration: none; }
.actions-page.plinth a.act-ev:hover { color: var(--ink); text-decoration: underline; }
.actions-page.plinth .act-ev.landed { color: var(--ok); font-weight: 500; }
.actions-page.plinth .act-share { min-height: 28px; padding: 0 10px; margin-left: 4px; }
.actions-page.plinth .act-ask { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--acc-soft); }
.actions-page.plinth .act-ask a { color: var(--accc); }
.actions-page.plinth .act-err { color: var(--warn); margin: 0; }
.actions-page.plinth .act-danger { color: var(--danger); }

/* The card's parts: owner, a clamped note, metadata chips, provenance, and what's linked. */
.actions-page.plinth .act-owners { display: inline-flex; flex: none; margin-top: 0; }
.actions-page.plinth .act-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--accc); color: var(--acc-ink); box-shadow: 0 0 0 2px var(--surface); }
.actions-page.plinth .act-av + .act-av { margin-left: -6px; }
.actions-page.plinth .act-av.more { background: var(--surface2); color: var(--ink2); font-size: 9.5px; width: auto; min-width: 20px; padding: 0 4px; border-radius: 10px; }
.actions-page.plinth .suggest .act-owners { margin-top: 0; }
.actions-page.plinth .tcard .t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.actions-page.plinth .act-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.actions-page.plinth .act-proj .psq.dot { width: 8px; height: 8px; border-radius: 2px; }
.actions-page.plinth .act-noproj, .actions-page.plinth .act-nodue { background: transparent; box-shadow: inset 0 0 0 1px var(--line2); color: var(--ink3); }
.actions-page.plinth .act-prov { display: flex; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; margin: -2px 0 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; color: var(--ink2); text-decoration: none; text-align: left; cursor: default; }
.actions-page.plinth .act-prov span { line-height: 1.4; overflow-wrap: anywhere; }
.actions-page.plinth .act-prov .ico { width: 13px; height: 13px; flex: none; color: var(--ink3); margin-top: 2px; }
.actions-page.plinth button.act-prov, .actions-page.plinth a.act-prov { cursor: pointer; }
.actions-page.plinth button.act-prov:hover span, .actions-page.plinth a.act-prov:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.actions-page.plinth .act-none { color: var(--ink3); }
.actions-page.plinth .act-linked-l { color: var(--ink3); margin-right: 2px; }
.actions-page.plinth .act-scope-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -8px 0 20px; padding: 12px 16px; border-radius: 12px;
  border: 1px dashed var(--line2); font-size: 13px; color: var(--ink2); }
.actions-page.plinth .act-scope-empty .linkish { color: var(--accc); }

/* The add/edit form inside a column. */
.actions-page.plinth textarea.field.act-title { min-height: 0; resize: none; font-weight: 500; }
.actions-page.plinth .act-date { min-height: 36px; padding: 6px 10px; color-scheme: dark; }
[data-mode="light"] .actions-page.plinth .act-date { color-scheme: light; }
.actions-page.plinth .seg3 .ico { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .actions-page { padding: 24px 16px 64px; }
  .actions-page.plinth .board { grid-auto-columns: 86%; }
  .actions-page.plinth .suggest { flex-wrap: wrap; }
  .actions-page.plinth .suggest > .grow { flex-basis: calc(100% - 70px); }
  .actions-page.plinth .suggest .btn { flex: 1; }
}

/* ── Action items, small: the dashboard panel and the Daily card (styles.css tokens) ── */
.act-mini { list-style: none; margin: 0; padding: 4px 0; }
.act-mini li { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.act-mini li:first-child { border-top: 0; }
.act-mini-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-mini-p { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.act-mini .chip { margin-left: 0; }
.act-mini-due.warn { border-color: var(--series-meeting); color: var(--series-meeting); flex-basis: auto; border-left-width: 1px; padding-left: 7px; font-size: 11px; }
.act-mini-ok { border-color: var(--series-pr); color: var(--series-pr); }
.act-mini-prio { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-3); }
.act-mini-prio.prio-high { background: var(--accent); }
.act-mini-prio.prio-low { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.act-mini-done { width: 14px; text-align: center; color: var(--series-pr); flex: none; }
.act-mini-foot { padding: 8px 16px 12px; margin: 0; }
.act-mini-foot a, .act-day + a, .act-mini a { color: var(--accent); }
.act-day-h { margin: 8px 16px 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.day-card .act-mini li { padding: 6px 0; }
.day-card .act-day-h { margin: 6px 0 0; }
/* Inside the dashboard's ov-card, which already pads. */
.act-ov .act-mini { padding: 0; }
.act-ov .act-mini li { padding: 9px 0; }
.act-ov .act-mini-foot { padding: 8px 0 0; }
.act-ov .act-day-h { margin: 12px 0 0; }
.act-ov .empty { padding: 12px 0; }

/* ── Daily activity (web/daily-ui.js): the Plinth mock's day, on web/plinth.css. Page-only rules live
   under .daily-page, the page's root, so none of it reaches another page. */
.daily-page { min-height: 100%; padding: 32px clamp(16px, 4vw, 48px) 80px; }
.daily-page > div { max-width: 1164px; }
.daily-page.plinth .field.act-select { width: auto; height: 32px; min-height: 32px; padding: 0 30px 0 10px; font-size: 13px; line-height: 30px; border-radius: 8px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--surface) no-repeat right 10px center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968E83' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.daily-page.plinth .psq.all .ico { width: 15px; height: 15px; stroke-width: 2; }
.daily-page.plinth .field.err { border-color: var(--warn-c); }
.daily-page.plinth .mrow .why .psq.dot { display: inline-block; vertical-align: middle; }
/* Work from meetings: the shared day panel, sat in a Plinth card. */
.daily-page.plinth .daily-mw .day-meetings { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.daily-page.plinth .daily-mw .day-meetings + .day-meetings { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.daily-page.plinth .daily-mw .day-card-h { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
/* The project Daily's absolute-positioned axis (above) must not reach the Plinth one. */
.daily-page.plinth .tl-axis { position: static; height: auto; display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); }
.daily-page.plinth .tl-axis span { position: static; transform: none; }
/* After the first draw of a visit the day redraws in place: nothing enters again. Live signs —
   spinners, skeletons, the mic and the voice wave — keep moving. */
.daily-page.plinth.steady .rise, .daily-page.plinth.steady .pop, .daily-page.plinth.steady .drow,
.daily-page.plinth.steady .detail-note, .daily-page.plinth.steady .detail-panel, .daily-page.plinth.steady .tl-b,
.daily-page.plinth.steady .stamp, .daily-page.plinth.steady .check-draw { animation: none; }
.daily-page.plinth.steady .check-draw { stroke-dashoffset: 0; }

/* A short note after a change — what happened, or that it didn't and was put back. */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 13px; line-height: 1.4;
  box-shadow: var(--shadow); animation: ov-fade .2s var(--ease); }
.toast.error { background: var(--danger); color: #fff; }
.growth-summary-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 13px; }
.growth-summary { margin-top: 10px; }
.growth-summary textarea { width: 100%; font: inherit; font-size: 14px; line-height: 1.5; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
.growth-summary-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* ── Shared view: the owner's People page and the receiver's page ─────────── */
.sv-page, .sv-guest { min-height: 100%; padding: 32px clamp(16px, 4vw, 48px) 80px; }
.sv-guest { max-width: 1100px; margin: 0 auto; }
.sv-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1164px; }
.sv-people { overflow: hidden; }
.sv-invite { display: flex; gap: 8px; padding: 0 16px 14px; }
.sv-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: 0; border-top: 1px solid var(--border); text-align: left; cursor: pointer; }
.sv-person:hover { background: var(--surface-2); }
.sv-person.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.sv-person .grow { display: flex; flex-direction: column; min-width: 0; }
.sv-email { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-sub { font-size: 12px; color: var(--text-2); }
.sv-empty, .sv-incoming h3 { padding: 12px 16px; }
.sv-incoming h3 { font-size: 13px; color: var(--text-2); border-top: 1px solid var(--border); margin: 0; }
.sv-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; }
.sv-avatar.lg { width: 44px; height: 44px; }
.sv-detail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sv-panel { padding: 8px 22px 16px; }
.sv-head { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sv-head h2 { font-size: 17px; overflow-wrap: anywhere; }
.sv-row { display: flex; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.sv-label { width: 80px; flex: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sv-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.sv-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sv-chip[disabled] { opacity: .45; cursor: not-allowed; }
.sv-dates { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--border); }
.sv-dates label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.sv-dates .field { min-height: 36px; width: auto; }
.sv-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.sv-publish { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft, var(--surface-2)); }
.sv-expiry { display: flex; align-items: center; gap: 6px; }
.sv-expiry .field { min-height: 32px; width: auto; }
.sv-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
.sv-live { overflow: hidden; }
.sv-live-h { padding: 12px 20px; background: var(--surface-2); color: var(--text-2); font-size: 13px; }
.sv-live-b { padding: 20px; }
.sv-error { color: var(--warn); margin: 8px 0; }
.sv-stale { margin-bottom: 14px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; color: var(--text-2); font-size: 13px; }
.sv-view { display: flex; flex-direction: column; gap: 16px; }
.sv-vhead { display: flex; align-items: center; gap: 14px; }
.sv-vhead h2 { font-size: 20px; }
.sv-bar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.sv-tabs { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface-2); gap: 2px; flex-wrap: wrap; }
.sv-tabs button { border: 0; background: none; padding: 8px 16px; border-radius: 9px; cursor: pointer; color: var(--text-2); }
.sv-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.sv-range { display: inline-flex; align-items: center; gap: 8px; }
.sv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sv-tile { background: var(--surface); padding: 16px; }
.sv-tile-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.sv-tile-v { font-size: 24px; font-weight: 600; margin-top: 4px; }
.sv-tile-s { font-size: 13px; color: var(--text-2); }
.sv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; }
.sv-card h3 { font-size: 15px; margin: 0 0 8px; }
.sv-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sv-table th, .sv-table td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--border); font-size: 13px; }
.sv-table th { color: var(--text-3); font-weight: 500; border-top: 0; }
.sv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sv-bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; overflow-x: auto; padding-top: 8px; }
.sv-bar { max-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 18px; height: 100%; font-size: 11px; color: var(--text-3); }
.sv-bar-col { flex: 1; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.sv-bar-s { display: block; background: var(--accent); border-radius: 4px 4px 0 0; }
.sv-bar-m { display: block; background: var(--text-3); }
.sv-mix { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-2); margin: 8px 0; }
.sv-mix .b { background: var(--accent); }
.sv-mix .m { background: var(--text-3); }
.sv-mix .r { background: var(--p3); }
.sv-mix .g { background: var(--p4); }
.sv-mix .a { background: var(--p5); }
.sv-tasks { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.sv-code { max-width: 420px; margin: 12vh auto 0; display: flex; flex-direction: column; gap: 14px; }
.sv-code h1 { font-size: 22px; }
.sv-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; color: var(--text-2); font-size: 13px; }
@media (max-width: 860px) { .sv-layout { grid-template-columns: 1fr; } .sv-row { flex-direction: column; align-items: flex-start; gap: 8px; } }