/* Layout and components per the design system: one surface, hairline zoning,
   serif for the agent's voice, colour only by meaning. */
* { box-sizing: border-box; }
/* iOS inflates small text in wide blocks unless told not to */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* the hidden attribute must always win, including over display:flex rules */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.6;
}
#app { display: flex; height: 100vh; }

/* sidebar: same background, hairline only */
#sidebar {
  width: 280px; flex: none; border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; overflow-y: auto;
}
.side-head {
  padding: 18px 16px 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.wordmark { font-family: var(--font-serif); font-size: 20px; font-weight: 700; }
.side-section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); padding: 10px 16px 4px;
}
.case-row { cursor: pointer; }
.case-row .row-main {
  padding: 10px 16px; min-height: 44px;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.case-row .pick {
  display: none; flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--outline); font-size: 12px; line-height: 15px;
  text-align: center; color: #fff;
}
.case-row.selecting .pick { display: inline-block; }
.case-row.selected .pick { background: var(--ok); border-color: var(--ok); }

.side-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 4px;
}

/* top-level menu: thumb-sized rows, text only; the chevron is the one glyph,
   and it means "this section folds" */
.side-nav { display: flex; flex-direction: column; min-height: 0; }
/* Same typography as .side-section-label — a section header that also
   happens to be clickable (Council folds, Praxis navigates), not a
   second, bigger kind of row. */
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px;
  min-height: 28px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); cursor: pointer;
  user-select: none; flex: none;
}
.nav-item:hover { color: var(--ink); }
.nav-item:focus { outline: none; }
.nav-item:focus-visible { outline: 2px solid var(--outline); outline-offset: -2px; }
.nav-item .nav-label { flex: 1; }
.nav-item .chev { flex: none; color: var(--ink-3); transition: transform 0.15s ease; }
#sidebar.council-collapsed .nav-item .chev { transform: rotate(-90deg); }
#sidebar.council-collapsed #case-list { display: none; }
#case-list { flex: 0 1 auto; min-height: 0; }
.btn-tiny {
  font: inherit; font-size: 12px; color: var(--ink-3); background: none;
  border: none; cursor: pointer; padding: 2px 4px;
}
.btn-tiny:hover { color: var(--ink); }
#select-bar:not([hidden]) {
  display: flex; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--hairline); margin-top: auto;
}
#select-bar .btn { flex: 1; min-height: 36px; }
#select-bar .btn.armed { background: var(--brand); }
.case-row:hover .row-main { background: var(--active); }
.case-row.active .row-main { background: var(--active); }
/* no bullets: the only marker is "working", and only while it is true */
.case-row.working .row-main::after {
  content: ""; width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: var(--working);
}
.case-row .title {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 16px;
}
.case-row .when { font-size: 12px; color: var(--ink-4); }

/* content */
#content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#conversation { display: flex; flex-direction: column; height: 100%; }
#conv-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--hairline);
}
#conv-subject { font-family: var(--font-serif); font-size: 18px; font-weight: 700; }
.meta { font-size: 12px; color: var(--ink-3); margin-left: 10px; }
.actions { display: flex; gap: 8px; position: relative; margin-left: auto; flex: none; }
.action-list { display: flex; gap: 8px; }

/* the scroll container spans the page, so the scrollbar sits at the window's
   right edge; the reading column inside is bounded, because wide slabs of
   text are unreadable */
#messages { flex: 1; overflow-y: auto; padding: 20px 0; }
.msg, .thinking { max-width: 720px; margin-left: auto; margin-right: auto; padding: 0 24px; }
.recap-card { max-width: 672px; }

/* the user's bubble on --fill; the agent's voice in serif on the surface */
.msg { margin-bottom: 18px; }

.msg .who { font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.msg.user .body {
  background: var(--fill); border-radius: 12px; padding: 10px 14px;
  display: inline-block;
}
.msg.agent .body {
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65;
}
.msg.agent .who .monogram {
  position: relative; display: inline-flex; width: 24px; height: 24px;
  border-radius: 999px; background: var(--fill); align-items: center;
  justify-content: center; font-family: var(--font-serif); margin-right: 6px;
  font-size: 12px; color: var(--ink-2); overflow: hidden; vertical-align: -7px;
}
.msg.agent .who .monogram img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 999px;
}
.msg .passed {
  font-size: 12px; color: var(--ink-4); font-style: italic;
}
.thinking { font-size: 13px; color: var(--ink-2); }
.thinking .star { color: var(--brand); }

/* recap card */
.recap-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin: 12px auto; box-shadow: var(--shadow);
}
.recap-card h4 {
  margin: 0 0 8px; font-family: var(--font-serif); font-size: 16px;
}
.recap-card .pos { margin-bottom: 8px; font-size: 13.5px; }
.recap-card .pos b { font-family: var(--font-serif); }
.recap-card .div {
  font-style: italic; font-family: var(--font-serif); font-size: 15px;
  border-left: 2px solid var(--outline); padding-left: 12px; margin: 8px 0;
}
.recap-card .absent { font-size: 12px; color: var(--ink-3); }

/* composer */
#composer { padding: 12px 0 20px; }
#composer .input-card, #composer .meta { max-width: 672px; margin-left: auto; margin-right: auto; }
.input-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 24px;
  padding: 8px 8px 8px 16px; display: flex; gap: 8px; align-items: flex-end;
  box-shadow: var(--shadow);
}
#input {
  flex: 1; border: none; outline: none; resize: none; font: inherit;
  background: transparent; color: var(--ink);
  max-height: 160px; padding: 6px 0; line-height: 1.45;
}
#input::placeholder { color: #A6A49A; }
#send {
  flex: none; width: 36px; height: 36px; border-radius: 999px; border: none;
  background: var(--ink); color: var(--bg); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#send:disabled { background: var(--fill); color: var(--ink-4); cursor: default; }
#mention-hint { margin-bottom: 6px; }

/* buttons: five roles */
.btn {
  font: inherit; font-size: 13.5px; border-radius: 8px; padding: 6px 14px;
  cursor: pointer; border: 1px solid transparent;
}
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.secondary { background: var(--card); border-color: var(--border); color: var(--ink); }
.btn.quiet { background: var(--fill); color: var(--ink-2); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* empty state: a fact and one next action, no illustration */
.empty { margin: auto; text-align: center; }
.empty .fact { color: var(--ink-2); font-size: 14px; margin: 0; }
.empty .next { color: var(--ink-3); font-size: 12.5px; margin: 4px 0 0; }

/* case view */
#case-view { overflow-y: auto; height: 100%; }
#cv-head {
  display: flex; gap: 12px; align-items: center; padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
}
#cv-body { padding: 16px 24px; max-width: 880px; margin: 0 auto; }
.cv-unit {
  border-bottom: 1px solid var(--hairline); padding: 8px 0; font-size: 13.5px;
}
.cv-unit .line1 { display: flex; gap: 10px; }
.cv-unit .seq { color: var(--ink-4); font-variant-numeric: tabular-nums; width: 48px; }
.cv-unit .kind { font-weight: 600; width: 200px; }
.cv-unit .meta2 { color: var(--ink-3); }
.cv-unit pre {
  background: var(--fill); border-radius: 8px; padding: 8px 10px;
  font-size: 12px; overflow-x: auto; margin: 6px 0 0 58px;
  font-family: var(--font-mono);
}
.cv-call {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; margin: 8px 0; font-size: 12.5px;
}
.cv-call .head { font-weight: 600; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 8px 18px; font-size: 13px; box-shadow: var(--shadow);
}
.toast a { color: #EACBB8; }

/* new council dialog */
dialog {
  border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow); background: var(--card); min-width: 380px;
}
dialog::backdrop { background: var(--scrim); }
.new-form label { display: block; font-size: 12px; color: var(--ink-3); margin: 10px 0; }
.new-form input {
  display: block; width: 100%; font: inherit; margin-top: 4px;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  background: var(--card); color: var(--ink);
}
.chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
  cursor: pointer; font-size: 13px; background: var(--card);
}
.chip.on { background: var(--active); }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* login */
.login-scrim {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; box-shadow: var(--shadow); width: 320px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-card label { font-size: 12px; color: var(--ink-3); }
.login-card input {
  display: block; width: 100%; font: inherit; margin-top: 6px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.login-error { color: var(--brand); font-size: 13px; }

/* -- mobile: two screens, a 44px back header, hit targets that fit a thumb --
   Per the design system: no fake status bar, safe-area respected, sidebar
   replaced by the list screen rather than squeezed. */
.mobile-only { display: none; }

@media (max-width: 720px) {
  .mobile-only { display: inline-block; }

  #app { display: block; height: 100dvh; }

  /* the sidebar is a drawer: hidden until summoned, over the content */
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 85vw);
    background: var(--bg); border-right: 1px solid var(--hairline);
    transform: translateX(-105%); transition: transform 0.22s ease;
    z-index: 30; height: 100dvh; padding-top: env(safe-area-inset-top);
  }
  body.drawer-open #sidebar {
    transform: none;
    box-shadow: 0 0 40px rgba(31, 30, 29, 0.18);
    border-right: 1px solid var(--border);
  }
  /* transparent on purpose: a dark scrim near the top makes iOS Safari
     repaint the status bar dark, overriding theme-color. The layer still
     catches the tap-outside; the drawer separates by shadow, which is how
     this design zones anyway — light and hairlines, not dimming. */
  #drawer-scrim {
    position: fixed; inset: 0; background: transparent; z-index: 20;
  }

  #content {
    display: flex; height: 100dvh; padding-top: env(safe-area-inset-top);
  }
  .drawer-btn { min-width: 44px; min-height: 44px; font-size: 18px; }
  #empty { position: relative; }
  #open-drawer-empty, #praxis-drawer-btn {
    position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 25;
  }

  .case-row .row-main { min-height: 52px; }
  .nav-item { min-height: 52px; }
  .side-head { padding-top: calc(18px + env(safe-area-inset-top)); }

  #conv-head { padding: 8px 12px; gap: 8px; }
  #back { min-width: 44px; min-height: 44px; font-size: 20px; }
  #conv-subject { font-size: 16px; }
  #conv-cost { display: block; margin-left: 0; }
  .actions .btn { min-height: 44px; padding: 6px 10px; font-size: 12.5px; }

  .msg, .thinking { padding: 0 16px; }
  #composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    position: sticky; bottom: 0; background: var(--bg);
  }
  #composer .input-card { margin: 0 12px; }
  #input { font-size: 16px; } /* iOS zooms inputs under 16px */
  #send { min-height: 44px; }

  dialog { min-width: 0; width: calc(100vw - 32px); }
  .login-card { width: calc(100vw - 48px); }
}

@media (max-width: 720px) {
  /* one-line header: the subject truncates, actions collapse to icons-ish */
  /* :not(.actions) — the actions block is also a div, and flex:1 on it split
     the header in half, parking the menu mid-screen */
  #conv-head > div:not(.actions) { min-width: 0; flex: 1; }
  #conv-subject {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #conv-thinkers { display: none; }
}

@media (max-width: 720px) {
  /* the three actions live behind one thumb-sized menu */
  .action-list {
    display: none; position: absolute; right: 0; top: 48px; z-index: 10;
    flex-direction: column; gap: 0; min-width: 180px;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow); overflow: hidden;
  }
  .action-list.open { display: flex; }
  .action-list .btn {
    border: none; border-radius: 0; background: var(--card); color: var(--ink);
    text-align: left; min-height: 44px; padding: 10px 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .action-list .btn:last-child { border-bottom: none; }
  #more { min-width: 44px; min-height: 44px; font-size: 18px; }
}

.model-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.model-row {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--ink);
}
.model-row.on { background: var(--active); }
.model-row .price { margin-left: auto; color: var(--ink-3); font-size: 12px;
  font-variant-numeric: tabular-nums; }

/* thinker picker: a row per voice — name and one sentence of its philosophy */
#thinker-choices {
  display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
  /* .chips leaves flex-wrap: wrap behind, and a wrapped column container
     stops stretching items to its width — the rows then take content width
     and bleed out of the dialog */
  flex-wrap: nowrap;
}
.thinker-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  color: var(--ink); min-width: 0;
}
.thinker-row .t-text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; }
.thinker-row .t-name { font-size: 13.5px; font-weight: 600; margin-right: 4px; }
.thinker-row .t-essence { color: var(--ink-3); }
.thinker-row .t-check { flex: none; }
.thinker-row .t-check {
  margin-left: auto; color: var(--ok); visibility: hidden; font-size: 14px;
}
.thinker-row.on { background: var(--active); }
.thinker-row.on .t-check { visibility: visible; }

#model-select {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 13.5px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--ink);
}

/* -- drawer footer: the create pill and settings, per the Claude-style menu -- */
.side-foot {
  margin-top: auto; display: flex; gap: 10px; align-items: center;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
}
.pill-create {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; border-radius: 999px; border: none;
  background: var(--ink); color: var(--bg); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
}
.round-btn {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
#sidebar { display: flex; flex-direction: column; }
#case-list { overflow-y: auto; }

/* segmented control: the track, the active tab as a card */
.seg {
  display: flex; background: var(--track); border-radius: 9px; padding: 2px;
  margin-top: 6px;
}
.seg button {
  flex: 1; font: inherit; font-size: 13px; border: 1px solid transparent;
  background: none; color: var(--ink-2); border-radius: 8px; padding: 6px 0;
  cursor: pointer;
}
.seg button.on {
  background: var(--card); color: var(--ink); border-color: var(--border);
}

/* the toast is the dark pill in both themes, per the design system */
.toast { background: #1F1E1D; color: #fff; }

/* focus rings in our palette, not the browser's blue */
.seg button:focus, .btn:focus, .pill-create:focus, .round-btn:focus { outline: none; }
.seg button:focus-visible, .btn:focus-visible,
.pill-create:focus-visible, .round-btn:focus-visible {
  outline: 2px solid var(--outline); outline-offset: 1px;
}

/* who is thinking right now: the terracotta star and a named verb, per the
   design system's working indicators */
.thinking-line {
  max-width: 672px; margin: 0 auto; padding: 4px 24px 0;
  font-size: 13px; color: var(--ink-2);
}
.thinking-line .star { color: var(--brand); }
@media (max-width: 720px) { .thinking-line { padding: 4px 16px 0; } }

/* Praxis sidebar: builtin lists and space rows, chevron fold state.
   Base .list-row/.active/.name styles are NOT already in this file as the
   brief claimed (Council's sidebar rows are .case-row, not .list-row) —
   added here so Praxis rows render as list rows instead of bare buttons. */
.list-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 16px; min-height: 40px; border: none; background: none;
  font: inherit; font-size: 15px; color: var(--ink); text-align: left;
  cursor: pointer;
}
.list-row:hover { background: var(--active); }
.list-row.active { background: var(--active); }
.list-row .name {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-row.builtin { font-weight: 600; }
.list-row.group-start { margin-top: 12px; }
.list-row.space-row { font-weight: 600; margin-top: 12px; }
.list-row.space-row .chev {
  flex: none; color: var(--ink-3); width: 18px; height: 18px; margin-left: auto;
}
.list-row.space-row .chev svg { display: block; width: 100%; height: 100%; }
.list-row.proj-row { font-size: 14.5px; padding-top: 6px; padding-bottom: 6px; min-height: 32px; }
.list-row .icon { flex: none; color: var(--ink-3); }
.list-row .count { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* progress pie: neutral structure, ink on track */
.pie { width: 14px; height: 14px; border-radius: 999px; position: relative; flex: none; }
.pie::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 1.5px solid var(--outline);
}
.pie .wedge {
  position: absolute; inset: 2.5px; border-radius: 999px;
  background: conic-gradient(var(--ink-3) calc(var(--p) * 1%), transparent 0);
}

.task-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px);
  border-radius: 8px; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.task-row:hover { background: var(--active); }
.tick {
  flex: none; width: 18px; height: 18px; border-radius: 5px; margin-top: 3px;
  border: 1.5px solid var(--outline); background: transparent;
  font-size: 12px; line-height: 15px; text-align: center; color: transparent;
  padding: 0; cursor: pointer;
}
.tick:hover { border-color: var(--ink-3); }
.tick.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.task-row .t-title { flex: 1; min-width: 0; }
.task-row.done .t-title { color: var(--ink-4); text-decoration: line-through; }
.t-meta {
  flex: none; display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.t-meta .deadline { color: var(--ink-3); }
.t-meta .deadline.overdue { color: var(--brand); font-weight: 600; }
.log-date { font-size: 12px; color: var(--ink-4); flex: none; padding-top: 3px; font-variant-numeric: tabular-nums; }

.ov-wrap { position: relative; display: inline-flex; margin-left: auto; }
.ov-trigger {
  flex: none; width: 28px; height: 28px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3);
  background: none; border: none; box-shadow: none; font: inherit;
}
.ov-trigger svg { width: 16px; height: 16px; }
.ov-trigger:hover { background: var(--active); color: var(--ink); }
.ov-trigger:focus { outline: none; }
.ov-trigger:focus-visible { outline: 2px solid var(--outline); outline-offset: 1px; }
.ov-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 190px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 4px; display: flex; flex-direction: column;
}
.ov-item {
  text-align: left; font-size: 13.5px; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); background: none; border: none; cursor: pointer; white-space: nowrap;
}
.ov-item:hover { background: var(--active); }
.ov-item:disabled { color: var(--ink-4); cursor: default; }
.ov-item:disabled:hover { background: none; }
.page-head .ov-wrap { margin-left: auto; }

/* Praxis content pane: mirror #case-view/#cv-body pattern */
#praxis-view { overflow-y: auto; height: 100%; }
.page { padding: 16px 24px; max-width: 880px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 8px; }
.page-head h1 {
  margin: 0; font-family: var(--font-serif); font-size: 26px; font-weight: 700;
  text-wrap: balance;
}
.page-sub { margin: 8px 0 16px; font-size: 14px; color: var(--ink-3); }
.page-note { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); max-width: 60ch; }
.page-head-gap { height: 16px; }

.space-proj {
  display: flex; align-items: center; gap: 10px; width: calc(100% + 20px);
  margin: 0 -10px; padding: 10px; border-radius: 8px; text-align: left;
  border-bottom: 1px solid var(--hairline); cursor: pointer;
  background: none; border-left: none; border-right: none; border-top: none; font: inherit;
  color: var(--ink);
}
.space-proj:hover { background: var(--active); }
.space-proj:focus { outline: none; }
.space-proj:focus-visible { outline: 2px solid var(--outline); outline-offset: -2px; }
.space-proj .pie { width: 16px; height: 16px; }
.space-proj .p-name { flex: 1; font-weight: 600; font-size: 15.5px; }
.space-proj .p-count { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.list-row.proj-row .pie { flex: none; }
.page-head .pie { width: 18px; height: 18px; }
.page-head .pie .wedge { inset: 3px; }

.group-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3);
  padding: 18px 0 4px; border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 8px;
}
.group-label .in { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-4); }
.heading-label { cursor: grab; }

/* task card: expanded taskRow, editable in place */
.task-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 14px 16px; margin: 8px -10px;
}
.task-card .card-top { display: flex; gap: 10px; align-items: flex-start; }
.task-card .title-input {
  flex: 1; border: none; outline: none; background: transparent; color: var(--ink);
  font-size: 16px; font-weight: 600; padding: 1px 0; min-width: 0;
}
.task-card .notes {
  width: calc(100% - 28px); border: none; outline: none; background: transparent; resize: none;
  font-size: 14px; color: var(--ink-2); margin: 6px 0 2px 28px; line-height: 1.5;
}
.task-card .notes::placeholder { color: var(--ink-4); }
.card-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 12px 0 0 28px; }
.card-foot .chip {
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px;
  font-size: 12.5px; background: var(--card); color: var(--ink-2); cursor: pointer;
}
.card-foot .chip:hover { background: var(--active); }
.card-foot .chip.on { background: var(--active); color: var(--ink); }
.card-foot .chip.deadline-chip.overdue { color: var(--brand); border-color: var(--brand); }
.card-foot .spacer { flex: 1; }
.ov-item.danger { color: var(--brand); }

.checklist { margin: 8px 0 0 28px; border-top: 1px solid var(--hairline); }
.check-row { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.check-row .c-title { flex: 1; font-size: 14px; padding-top: 1px; }
.check-row.done .c-title { color: var(--ink-4); text-decoration: line-through; }
.check-row .btn-tiny { flex: none; }
.tick.sub { width: 15px; height: 15px; font-size: 10px; line-height: 12px; margin-top: 4px; border-radius: 4px; }
.sub-input { flex: 1; border: none; outline: none; background: transparent; color: var(--ink); font-size: 14px; padding: 1px 0; }
.sub-input::placeholder { color: var(--ink-4); }

.heading-rename {
  font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px; margin-right: 8px;
}
.group-label .ov-wrap { margin-left: auto; }

/* drag-to-reorder indicator: a thick bar at the edge the drop lands on,
   instead of guessing which row a drop resolves against */
[data-praxis-drag].drag-over-before { box-shadow: inset 0 2px 0 0 var(--brand); }
[data-praxis-drag].drag-over-after { box-shadow: inset 0 -2px 0 0 var(--brand); }
[data-praxis-drag].drag-over-into { background: var(--active); }

.task-row.trashed { color: var(--ink-3); }
.task-row.trashed .t-title { flex: 1; }
.task-row.trashed .t-meta { gap: 4px; }
.task-row.trashed .btn-tiny.danger { color: var(--brand); }

/* card icon triggers: When / Checklist / Deadline — plain icon buttons,
   the same weight as the overflow trigger beside them */
.card-icon-trigger {
  flex: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3);
  background: none; border: none; font: inherit;
}
.card-icon-trigger svg, .icon { width: 16px; height: 16px; }
.card-icon-trigger:hover { background: var(--active); color: var(--ink); }
.card-icon-trigger:focus { outline: none; }
.card-icon-trigger:focus-visible { outline: 2px solid var(--outline); outline-offset: 1px; }

.card-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0 0 28px; }
.card-chips:empty { margin: 0; }
.card-foot { display: flex; gap: 4px; align-items: center; margin: 10px 0 0; }
.card-foot .spacer { flex: 1; }

.chip.when-chip, .chip.deadline-chip.on {
  display: inline-flex; align-items: center; gap: 5px; cursor: default;
}
.chip.when-chip svg, .chip.deadline-chip svg { width: 14px; height: 14px; flex: none; }
.chip-x {
  flex: none; background: none; border: none; color: var(--ink-4); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 0 0 2px;
}
.chip-x:hover { color: var(--ink); }

.project-control { margin: 6px -10px 0; text-align: right; }
.project-pick {
  font: inherit; font-size: 12.5px; color: var(--ink-3); background: none; border: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
}
.project-pick:hover { color: var(--ink); }
.project-pick .x { font-size: 13px; }
.project-pick .chev-r { width: 12px; height: 12px; display: inline-flex; }

/* the calendar popover — anchored under its trigger like an .ov-menu */
.date-picker {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; width: 240px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.picker-quick {
  display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: none; border: none; border-radius: 6px; cursor: pointer;
  padding: 7px 8px; text-align: left;
}
.picker-quick:hover { background: var(--active); }
.picker-quick.on { background: var(--active); font-weight: 600; }
.picker-quick svg { width: 16px; height: 16px; flex: none; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; }
.cal-nav-btn {
  background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 2px;
  display: inline-flex; border-radius: 6px;
}
.cal-nav-btn:hover { background: var(--active); color: var(--ink); }
.cal-nav-btn svg { width: 14px; height: 14px; }
.cal-month { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 10.5px; color: var(--ink-4); margin-bottom: 2px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-cell {
  aspect-ratio: 1; font: inherit; font-size: 12.5px; background: none; border: none;
  border-radius: 6px; cursor: pointer; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cal-cell:hover { background: var(--active); }
.cal-cell.today { color: var(--brand); font-weight: 600; }
.cal-cell.selected { background: var(--ink); color: var(--bg); }
.cal-cell.empty { cursor: default; }

.comments-thread { margin: 10px 0 0 28px; }
.comment-row { padding: 8px 0; border-top: 1px solid var(--hairline); }
.comment-row .c-agent { font-size: 12px; color: var(--ink-3); }
.comment-row .c-body {
  margin: 2px 0 0; font-family: var(--font-serif); font-size: 14.5px;
  line-height: 1.55; color: var(--ink);
}

.praxis-fab {
  position: fixed; right: 28px; bottom: 28px; width: 48px; height: 48px;
  background: var(--ink); color: var(--bg); box-shadow: 0 6px 20px rgba(31, 30, 29, 0.18);
}
@media (max-width: 720px) {
  .praxis-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}