/* ---- design tokens -------------------------------------------------------
   Scales (spacing, type, radius, touch target, z-index) are theme-independent and live on :root.
   Colour roles are set per theme below. Every theme, including the paper/ink/hero packs and "custom", resolves the
   same classic names (--bg --panel --card --card-hover --text --muted --accent --accent-soft --on-accent --border
   --border-strong --danger --ok --warn --*-soft --on-danger --header --shadow), so components use ONE vocabulary.
   Breakpoints (max-width):
     760px  phone. The main mobile breakpoint; 761-1000px is the tablet range. board.js reads the same value
            (matchMedia('(max-width: 760px)')), so change both together.
     520px  small phone (stacks two-up grids). Kept apart from 420 on purpose: 414-430px phones are common.
     420px  narrow phone (squeezes the header).
     900px and up: desktop squeezing for specific wide components (1000, 1100, 1340, 1400, 1440). */
:root {
  --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px;
  --radius: var(--r-lg);   /* legacy name */
  --touch: 44px;
  --z-header: 5; --z-popover: 30; --z-dock: 40; --z-toast: 50; --z-dialog: 60;
  /* Derived colour roles. They are declared on :root, so they resolve against whichever theme is active. */
  --ok-soft: color-mix(in srgb, var(--ok) 16%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 16%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 16%, transparent);
  --on-fill: #ffffff;              /* text on a saturated fill whose colour is not the accent (labels, avatars, status) */
  --on-danger: var(--on-fill);
  --border-strong: color-mix(in srgb, var(--text) 22%, var(--border));
}
:root, :root[data-theme="light"] {
  --bg: #f1f3f7; --panel: #e7eaf0; --card: #ffffff; --card-hover: #fbfcfe; --text: #1b2a44; --muted: #66748c;
  --accent: #2563eb; --accent-soft: #e3ecff; --border: #d8dde7; --danger: #d33f33; --ok: #1b8a5a; --warn: #b9770e;
  --shadow: 0 1px 2px rgba(16,32,64,.10), 0 1px 1px rgba(16,32,64,.06); --shadow-hover: 0 6px 16px rgba(16,32,64,.14);
  --header: #ffffff; --on-accent: #ffffff; color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #14181d; --panel: #1b2027; --card: #242b34; --card-hover: #29313b; --text: #e3e8ee; --muted: #93a1b3;
  --accent: #6aa3ff; --accent-soft: #1e2f4d; --border: #333d49; --danger: #ff7a70; --ok: #4fd49c; --warn: #e8b33a;
  --shadow: 0 1px 2px rgba(0,0,0,.5); --shadow-hover: 0 8px 20px rgba(0,0,0,.55); --header: #1b2027; --on-accent: #0b1020; color-scheme: dark;
}
:root[data-theme="midnight"] {
  --bg: #0b1020; --panel: #121a30; --card: #1a2440; --card-hover: #202c4d; --text: #e6ebff; --muted: #8e9bc4;
  --accent: #8b9bff; --accent-soft: #263261; --border: #2a375e; --danger: #ff7b8a; --ok: #5be0b0; --warn: #f2c14e;
  --shadow: 0 1px 2px rgba(0,0,0,.6); --shadow-hover: 0 8px 22px rgba(0,0,10,.65); --header: #0f1630; --on-accent: #0b1020; color-scheme: dark;
}
:root[data-theme="sand"] {
  --bg: #f6f1e7; --panel: #ece4d3; --card: #fffdf8; --card-hover: #fffefb; --text: #33291b; --muted: #7d6f58;
  --accent: #b4580f; --accent-soft: #f6e3cf; --border: #ddd1b8; --danger: #bf3a2b; --ok: #3f7d3a; --warn: #a9710a;
  --shadow: 0 1px 2px rgba(70,50,10,.14); --shadow-hover: 0 6px 16px rgba(70,50,10,.2); --header: #fbf7ee; --on-accent: #ffffff; color-scheme: light;
}
/* "auto" repeats the dark values: CSS cannot share one declaration block between a media query and an attribute selector. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #14181d; --panel: #1b2027; --card: #242b34; --card-hover: #29313b; --text: #e3e8ee; --muted: #93a1b3;
    --accent: #6aa3ff; --accent-soft: #1e2f4d; --border: #333d49; --danger: #ff7a70; --ok: #4fd49c; --warn: #e8b33a;
    --shadow: 0 1px 2px rgba(0,0,0,.5); --shadow-hover: 0 8px 20px rgba(0,0,0,.55); --header: #1b2027; --on-accent: #0b1020; color-scheme: dark;
  }
}
:root[data-theme="auto"] { color-scheme: light dark; }

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
[hidden] { display: none !important; }   /* the hidden attribute always wins over a component's display */
body { margin: 0; font: var(--fs-md)/1.45 var(--font-ui); background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; }
select, input, textarea, button { font: inherit; color: inherit; }
select, input, textarea { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) 9px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-5); cursor: pointer; transition: border-color .15s, background .15s; }
button:hover:not(:disabled) { border-color: var(--accent); } button:disabled { opacity: .35; cursor: default; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.danger { color: var(--danger); }
.spacer { flex: 1; }

/* ---- header -------------------------------------------------------------- */
header { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; padding: var(--sp-4) 18px; border-bottom: 1px solid var(--border); background: var(--header); position: sticky; top: 0; z-index: var(--z-header); }
header h1 { font-size: 17px; margin: 0; display: flex; align-items: center; gap: var(--sp-3); letter-spacing: -.01em; }
.logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-size: 15px; }
header label { font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 5px; align-items: center; }
header select { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-base); }
#status { font-size: var(--fs-sm); color: var(--muted); } #status.err { color: var(--danger); } #status.ok { color: var(--ok); }
/* header actions are small icon buttons; labels live in the tooltips */
header .ic { font-size: 15px; line-height: 1; } header .tx { display: none; }
header #btnCopy, header #btnRefresh, header #btnSettings, header #btnHelp, header #btnFilters { padding: var(--sp-1) var(--sp-3); min-width: 34px; }
.filters { display: contents; } #tabs { display: none; }

/* ---- columns ------------------------------------------------------------- */
#board { flex: 1; display: flex; gap: 14px; padding: var(--sp-6) 18px; overflow-x: auto; align-items: flex-start; scroll-snap-type: x proximity; }
.col { background: var(--panel); border-radius: var(--r-lg); width: 316px; min-width: 276px; display: flex; flex-direction: column; max-height: 100%; scroll-snap-align: start; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.col.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.col h2 { margin: 0; padding: var(--sp-5) 14px var(--sp-3); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; align-items: center; gap: var(--sp-3); }
.col h2 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.col[data-col="todo"] h2 .dot { background: var(--accent); } .col[data-col="in-progress"] h2 .dot { background: var(--warn); } .col[data-col="done"] h2 .dot { background: var(--ok); }
.col h2 .cname { flex: 1; } .col h2 .ui-count { background: var(--card); }
.cards { padding: 2px var(--sp-4) var(--sp-4); overflow-y: auto; min-height: var(--touch); flex: 1; }
.add { padding: var(--sp-4); border-top: 1px solid var(--border); display: flex; gap: var(--sp-2); } .add input { flex: 1; min-width: 0; }

/* ---- cards --------------------------------------------------------------- */
.card { position: relative; background: var(--card); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5) 9px; margin-bottom: 9px; box-shadow: var(--shadow); cursor: grab; border: 1px solid var(--border); transition: box-shadow .15s, transform .15s, background .15s; }
.card:hover { box-shadow: var(--shadow-hover); background: var(--card-hover); transform: translateY(-1px); }
.card.dragging { opacity: .35; transform: rotate(1.5deg); }
.card.pending { opacity: .6; cursor: progress; }   /* a card still waiting in the save queue (render draws it before it is saved) */
.card.pending .taskactions { pointer-events: none; }
.card .top { display: flex; align-items: center; gap: 2px; margin-bottom: var(--sp-1); min-height: 26px; }
.ico { border: 0; background: transparent; padding: 2px var(--sp-2); font-size: var(--fs-md); line-height: 1; border-radius: var(--r-sm); opacity: .7; } .ico:hover { opacity: 1; background: var(--panel); }
.card .t { font-weight: 600; word-break: break-word; }
.card .n { color: var(--muted); font-size: var(--fs-base); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--sp-3); }
.tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--panel); color: var(--muted); font-size: var(--fs-xs); line-height: 1.2; }   /* label tag: the same size as ui.pill size sm */
.tag.label { color: var(--on-fill); font-weight: 600; }
.tag-quiet { opacity: .72; font-style: italic; }   /* a paused or finished project */
.cardage { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
.cardage span + span::before { content: '·'; margin-right: var(--sp-2); }
.cardage time { font-variant-numeric: tabular-nums; }
.foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.chip { color: var(--muted); text-decoration: none; padding: 1px var(--sp-2); border-radius: var(--r-sm); background: var(--panel); } a.chip { color: var(--accent); } a.chip.gh { font-family: var(--font-mono); font-size: var(--fs-xs); } a.chip.pr { color: var(--ok); } a.chip:hover { text-decoration: underline; }
.ui-avatar.av { width: 22px; height: 22px; font-size: 9.5px; margin-left: -4px; border: 2px solid var(--card); }   /* ui.avatar, stacked in rows and cards */

/* ---- agent claim --------------------------------------------------------- */
.claim { margin-top: var(--sp-3); font-size: var(--fs-sm); padding: 5px 9px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--panel); }
.claim .cnote { color: var(--muted); margin-top: 2px; }
.claim .pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-2); background: var(--muted); }
.claim.running { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); } .claim.running .pulse { background: var(--ok); animation: pulse 1.6s infinite; }
.claim.stale, .claim.blocked { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); } .claim.stale .pulse, .claim.blocked .pulse { background: var(--warn); }
.claim.stuck { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } .claim.stuck .pulse { background: var(--danger); }
.claim.done { color: var(--muted); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .claim.running .pulse { animation: none; } .card, .card:hover { transition: none; transform: none; } }

/* ---- dialogs ------------------------------------------------------------- */
dialog { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--card); color: var(--text); max-width: 600px; width: 94vw; padding: var(--sp-7); max-height: 92vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(10,15,25,.55); backdrop-filter: blur(2px); }
dialog h3 { margin: 0 0 var(--sp-2); font-size: 17px; }
dialog label { display: block; font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-5) 0 var(--sp-1); font-weight: 600; }
dialog input:not([type=checkbox]), dialog textarea, dialog select { width: 100%; } dialog textarea { min-height: 80px; resize: vertical; }
.row { display: flex; gap: var(--sp-4); } .row > * { flex: 1; }
.checks { display: flex; gap: 14px; flex-wrap: wrap; } .checks label { display: flex; gap: 5px; align-items: center; margin: 0; color: var(--text); font-size: var(--fs-base); font-weight: 400; }
.actions { display: flex; gap: var(--sp-3); margin-top: 18px; justify-content: flex-end; }
.hint { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-2); } .hint a { color: var(--accent); }
.preview { font-size: var(--fs-base); background: var(--panel); border-radius: var(--r-sm); padding: 7px 9px; margin-top: var(--sp-1); white-space: pre-wrap; word-break: break-word; }
.preview a { color: var(--accent); }
.cfcard { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px; margin: var(--sp-3) 0; } .cfnote { color: var(--danger); font-size: var(--fs-sm); margin: var(--sp-1) 0; }
.cfpick { display: flex; gap: 14px; margin-top: var(--sp-3); font-size: var(--fs-base); } .cfpick label { display: flex; align-items: center; gap: var(--sp-1); cursor: pointer; } .cfedit { width: 100%; margin-top: var(--sp-2); font: inherit; font-size: var(--fs-base); box-sizing: border-box; }
.cftable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: var(--sp-2); }
.cftable th, .cftable td { text-align: left; border-top: 1px solid var(--border); padding: var(--sp-1) var(--sp-2); vertical-align: top; word-break: break-word; }
.cftable th { color: var(--muted); font-weight: 600; } .cftable td:first-child, .cftable th:first-child { white-space: nowrap; word-break: normal; }
.empty { padding: 40px; color: var(--muted); }

/* ---- mobile: one column at a time, big tap targets, full-screen dialogs ------------------- */
@media (max-width: 760px) {
  /* simple mobile header: title + four icon buttons; no logo, stats or theme picker (theme lives in Settings) */
  header { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); flex-wrap: wrap; }
  header h1 { font-size: var(--fs-lg); flex: 1; } .logo, #themeSel { display: none; }
  header .ic { display: inline; font-size: 17px; line-height: 1; } header .tx { display: none; }
  header button { min-width: var(--touch); min-height: var(--touch); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .filters { display: none; width: 100%; order: 5; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .filters label { flex-direction: column; align-items: stretch; gap: 3px; } .filters label:has(input[type=checkbox]) { flex-direction: row; align-items: center; min-height: 40px; }
  header select { min-height: 40px; }
  select, input:not([type=checkbox]), textarea { font-size: var(--fs-lg); }   /* stops iOS zooming into fields */
  input[type=checkbox] { width: 20px; height: 20px; }
  #status { order: 4; flex: 1 1 100%; font-size: var(--fs-sm); margin-top: -2px; } #status.ok { display: none; }
  #tabs { display: block; background: var(--header); position: sticky; top: 0; z-index: 4; }
  #tabs .ui-tabs { padding: 0 var(--sp-3); }
  #board { display: block; padding: var(--sp-4) var(--sp-5) 90px; overflow-x: hidden; overflow-y: auto; }
  .col { display: none; width: 100%; min-width: 0; max-height: none; background: transparent; border: 0; }
  .col.active { display: flex; }
  .col h2 { display: none; } .cards { padding: 0; overflow: visible; }
  .card { padding: var(--sp-5) 13px 11px; cursor: default; } .card .t { font-size: 15px; }
  .ico { min-width: 40px; min-height: 40px; font-size: 18px; margin: -6px 0; }
  .add { padding: var(--sp-4) 0; border-top: 0; } .add input, .add button { min-height: var(--touch); }
  .ui-avatar.av { width: 26px; height: 26px; font-size: 10.5px; }
  dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; padding: var(--sp-6) 14px var(--sp-8); }
  dialog button { min-height: var(--touch); } .row { flex-direction: column; gap: 0; } .checks { gap: var(--sp-2) 18px; } .checks label { min-height: 36px; }
  .actions { position: sticky; bottom: -24px; background: var(--card); padding: var(--sp-5) 0 var(--sp-1); margin-top: 14px; border-top: 1px solid var(--border); }
  .cftable { display: block; overflow-x: auto; }
}

/* ---- cinema mode: one detailed lane, priority order flowing down then across ----------- */
body.cinema { height: 100dvh; overflow: hidden; }
body.cinema > #kitBar,
body.cinema > #roBar,
body.cinema > #sizeBar,
body.cinema > #legend,
body.cinema > #tabs { display: none !important; }
body.cinema > header { position: relative; flex: 0 0 auto; }
body.cinema #board { display: block; flex: 1 1 auto; width: 100%; min-height: 0; max-width: none; padding: 0; overflow: hidden; }
body.cinema #board > .col { display: none !important; }
body.cinema #board > .col.cinema-col { display: flex !important; width: 100%; min-width: 0; height: 100%; max-height: none; border: 0; border-radius: 0; background: var(--bg); }
body.cinema .cinema-col h2 { display: flex; flex: 0 0 52px; margin: 0; padding: var(--sp-4) 18px; background: var(--header); border-bottom: 1px solid var(--border); }
body.cinema .cinemaorder { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
body.cinema .cinema-col .cards { display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--cinema-cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--cinema-rows, 1), max-content); align-content: start; gap: 14px var(--sp-6); flex: 1 1 auto; width: 100%; min-height: 0; padding: 14px 18px 28px; overflow-x: hidden; overflow-y: auto; }
body.cinema .cinema-col .card { width: 100%; min-width: 0; margin: 0; }
body.cinema .cinema-col .card .n { display: block; -webkit-line-clamp: unset; line-clamp: unset; white-space: pre-wrap; }
body.cinema .cinema-col .add, body.cinema .cinema-col .hadd { display: none; }
body.cinema .cinema-col .hcinema { color: var(--accent); border-color: var(--accent); }
.cardcontext { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); display: grid; gap: 7px; }
.ctxrow { min-width: 0; }
.ctxhead { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; }
.ctxhead .i { width: 13px; height: 13px; }
.ctxhead strong { color: var(--text); font-size: var(--fs-xs); }
.ctxtext { margin: 2px 0 0 18px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
@media (max-width: 520px) { body.cinema .cinemaorder { display: none; } body.cinema .cinema-col .cards { padding: var(--sp-5); } }

/* ---- to-dos and history -------------------------------------------------- */
.prog { margin-top: 9px; } .bar { height: 5px; border-radius: var(--r-pill); background: var(--panel); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .25s; }
.prog.full .bar i { background: var(--ok); }
button.chip { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); } button.chip:hover { background: var(--accent-soft); color: var(--accent); } .todochip.full { color: var(--ok); }
.todos { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.todo { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-1) 2px; font-size: var(--fs-base); cursor: pointer; margin: 0 !important; color: var(--text) !important; font-weight: 400 !important; }
.todo input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; } .todo span { flex: 1; word-break: break-word; } .todo.done span { color: var(--muted); text-decoration: line-through; }
.todo .x { border: 0; background: transparent; color: var(--muted); padding: 0 var(--sp-2); font-size: var(--fs-lg); line-height: 1; } .todo .x:hover { color: var(--danger); }
.todonew { width: 100%; margin-top: var(--sp-1); font-size: var(--fs-base); padding: 5px var(--sp-3); }
.hist { margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); max-height: 220px; overflow: auto; } .hist li { padding: 3px 0; border-top: 1px solid var(--border); color: var(--text); } .hist time { color: var(--muted); display: inline-block; min-width: 62px; }
@media (max-width: 760px) { .todo { padding: var(--sp-3) 2px; font-size: var(--fs-md); } .todo input { width: 22px; height: 22px; } .todonew { min-height: var(--touch); } }

/* ---- comments ------------------------------------------------------------ */
button.cmchip.has { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.cm { background: var(--panel); border-radius: var(--r-lg); padding: var(--sp-3) 11px; max-width: 92%; align-self: flex-start; }
.cm.mine { align-self: flex-end; background: var(--accent-soft); }
.cmhead { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); } .cmhead .av { margin-left: 0; width: 20px; height: 20px; font-size: 9px; border: 0; } .cmhead time { color: var(--muted); margin-left: auto; }
.cmbody { margin-top: var(--sp-1); font-size: var(--fs-md); white-space: pre-wrap; word-break: break-word; } .cmbody a { color: var(--accent); }
#cmText { width: 100%; margin-top: var(--sp-4); }
@media (max-width: 760px) { .cm { max-width: 96%; } }

/* ---- view switcher ------------------------------------------------------- */
.viewnav { display: flex; align-items: flex-end; gap: var(--sp-2); flex: 0 0 auto; }
/* each group is a ui.tabs (segmented); the header keeps it compact: icons, with a label on the group's primary view and the selected one */
#viewSw .viewgroup { display: inline-flex; flex: 0 0 auto; min-width: 0; max-width: none; overflow: visible; background: var(--panel); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.viewgroup[hidden] { display: none !important; }
#viewSw .ui-tab { min-height: 0; gap: var(--sp-1); border: 0; background: transparent; padding: var(--sp-1) 11px; font-size: var(--fs-base); font-weight: 400; border-radius: var(--r-sm); color: var(--muted); }
#viewSw .ui-tab[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
#viewSw .ui-tab .ui-i { width: 1.2em; height: 1.2em; }
#viewSw .ui-tab__label { display: none; }
#viewSw .ui-tab.viewprimary { font-weight: 600; }
#viewSw .ui-tab.viewprimary .ui-tab__label { display: inline; }
body:not([data-view="board"]) #tabs { display: none !important; }
#board.v-list, #board.v-cal, #board.v-sched, #board.v-activity, #board.v-mentions { display: block; overflow-y: auto; padding: var(--sp-6) 18px 60px; }

/* ---- list view ----------------------------------------------------------- */
.lsec { max-width: 900px; margin: 0 auto 18px; }
.lhead { display: flex; align-items: center; gap: var(--sp-3); width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--muted); border-radius: 0; padding: var(--sp-2) 2px; font-weight: 700; text-align: left; }
.lsec[data-col="todo"] .lhead { border-color: var(--accent); } .lsec[data-col="in-progress"] .lhead { border-color: var(--warn); } .lsec[data-col="done"] .lhead { border-color: var(--ok); }
.lhead .caret { color: var(--muted); width: 14px; } .lhead .ui-count { margin-left: var(--sp-3); }
.circ { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--muted); background: transparent; font-size: var(--fs-sm); line-height: 1; display: inline-grid; place-items: center; color: var(--on-fill); margin-top: 1px; }
.circ:hover { background: color-mix(in srgb, var(--ok) 25%, transparent); }
.circ.is-done { background: var(--ok); border-color: var(--ok); }
.lt { font-weight: 500; cursor: pointer; word-break: break-word; } .lt:hover { color: var(--accent); }
.lmeta { display: flex; flex-wrap: wrap; gap: 5px var(--sp-2); margin-top: var(--sp-1); align-items: center; }
.chip.agentchip.running { color: var(--ok); } .chip.agentchip.stale, .chip.agentchip.blocked { color: var(--warn); } .chip.agentchip.stuck { color: var(--danger); }
.chip.doneby { background: color-mix(in srgb, var(--ok) 12%, var(--panel)); color: var(--ok); display: inline-flex; align-items: center; gap: 3px; } .chip.doneby.agent { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.lavs { display: flex; padding-left: var(--sp-1); margin-top: 2px; }
.ladd input { width: 100%; border: 0; background: transparent; padding: 9px var(--sp-1); color: var(--muted); } .ladd input:focus { background: var(--card); color: var(--text); }

/* ---- calendar view ------------------------------------------------------- */
.cal { max-width: 1100px; margin: 0 auto; }
.calbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .caltitle { margin: 0 var(--sp-3); font-size: 18px; flex: 1; text-align: center; }
#board .calbar .ui-btn { min-width: 40px; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.calwd { text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: var(--sp-2) 0; background: var(--panel); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.calcell { min-height: 96px; padding: var(--sp-1) 5px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calcell.out { background: color-mix(in srgb, var(--panel) 45%, transparent); color: var(--muted); }
.calcell.sel { outline: 2px solid var(--accent); outline-offset: -2px; } .calcell.over { background: var(--accent-soft); }
.calcell .dn { font-size: var(--fs-sm); width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; } .calcell.today .dn { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.pills { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pill { display: flex; align-items: center; gap: 5px; min-width: 0; text-align: left; font-size: var(--fs-sm); padding: 1px var(--sp-2); border-radius: var(--r-xs); border: 0; background: var(--panel); cursor: grab; }   /* a task in a calendar cell: priority dot + title */
.pill .ptext { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.done { opacity: .55; } .pill.done .ptext { text-decoration: line-through; }
.pill[data-due="overdue"] { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); } .pill[data-due="today"] { background: color-mix(in srgb, var(--warn) 16%, var(--panel)); }
.more { font-size: var(--fs-xs); color: var(--muted); padding-left: var(--sp-2); } .dots { display: none; gap: 3px; flex-wrap: wrap; }
.dots .ui-prio--dot { width: 7px; height: 7px; } .dots .done { opacity: .35; }
.calday { margin-top: var(--sp-6); } .calday .ui-section__head { border-bottom: 2px solid var(--accent); }
.calundated { margin-top: 18px; } .calundated summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: var(--sp-2) 0; }
@media (max-width: 760px) {
  #viewSw .ui-tab .ui-i { font-size: var(--fs-lg); }
  #board.v-list, #board.v-cal, #board.v-sched, #board.v-activity, #board.v-mentions { padding: var(--sp-3) var(--sp-5) 90px; }
  .circ { width: 26px; height: 26px; } .lt { font-size: 15px; }
  .calcell { min-height: 54px; padding: 3px; align-items: center; } .pills { display: none; } .dots { display: flex; justify-content: center; }
  .calwd { font-size: 10px; } .caltitle { font-size: var(--fs-lg); }
}

/* ---- table list ---------------------------------------------------------- */
.lsec { max-width: 1200px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--card); padding: var(--sp-4) 0 0; overflow: hidden; }
.lhead { border: 0 !important; padding: 2px 14px var(--sp-4) !important; }
.lsec[data-col] .lhead { border-bottom: 0; }
.spill { padding: 3px var(--sp-5); border-radius: var(--r-md); background: var(--panel); color: var(--text); font-size: var(--fs-base); }
.lsec[data-col="todo"] .spill { background: var(--accent-soft); color: var(--accent); } .lsec[data-col="in-progress"] .spill { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .lsec[data-col="done"] .spill { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.lhead .caret { border: 1px solid var(--border); border-radius: var(--r-sm); width: 26px; height: 26px; display: inline-grid; place-items: center; }
.tscroll { overflow-x: auto; } .ttable { min-width: 1000px; }
.trow { display: grid; grid-template-columns: 38px minmax(190px, 2.2fr) minmax(150px, 2fr) 96px minmax(120px, 1.3fr) 128px 90px 170px; align-items: center; border-top: 1px solid var(--border); }
.trow > div { padding: var(--sp-3) var(--sp-4); min-width: 0; border-left: 1px solid var(--border); } .trow > div:first-child { border-left: 0; padding-left: var(--sp-5); }
.trow.thead { background: var(--panel); font-size: var(--fs-sm); color: var(--muted); font-weight: 600; } .trow.thead > div { padding: 7px var(--sp-4); }
.trow:not(.thead):hover { background: color-mix(in srgb, var(--panel) 55%, transparent); } .trow.done .lt { color: var(--muted); text-decoration: line-through; }
.c-desc { font-size: var(--fs-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-people { display: flex; padding-left: 14px !important; } .c-labels { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .c-more { display: flex; gap: 5px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.m-only { display: none; }
.v-list { overflow-anchor: none; }
.prioritise-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.prioritise-bar select { min-height: 36px; }
.prioritise-table { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.prioritise-row, .prioritise-head { display: grid; grid-template-columns: 76px minmax(150px, 1fr) 64px 64px 48px 200px; align-items: center; gap: 8px; padding: 9px 12px; }
.prioritise-head { background: var(--panel); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.prioritise-row { border-top: 1px solid var(--border); }
.prioritise-row > * { min-width: 0; }
.prioritise-rank { display: flex; gap: 4px; align-items: center; }
.prioritise-rank > span { width: 24px; font-variant-numeric: tabular-nums; }
.prioritise-rank .ui-btn { padding: 4px 7px; }
.prioritise-task > .ui-btn { text-align: left; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; padding: 0; font-weight: 600; }
.prioritise-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.prioritise-score-mini { display: none; }
.prioritise-value label, .prioritise-effort label, .prioritise-task > .ui-btn.prioritise-expand { display: none; }
.prioritise-row select { width: 100%; min-height: 36px; }
.prioritise-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.prioritise-row .taskactions { display: flex; flex-wrap: nowrap; gap: 6px; }
.prioritise-row .taskactions > select { width: 110px; min-width: 0; }
@media (max-width: 759px) {
  .prioritise-head { display: none; }
  .prioritise-row { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; }
  .prioritise-row > .prioritise-task { grid-column: 2 / -1; }
  .prioritise-row > .taskactions { grid-column: 2 / -1; }
  .prioritise-row > .prioritise-value, .prioritise-row > .prioritise-effort, .prioritise-row > .prioritise-score { display: none; }
  .prioritise-row.is-expanded > .prioritise-value { display: block; grid-column: 2; }
  .prioritise-row.is-expanded > .prioritise-effort { display: block; grid-column: 3; }
  .prioritise-row.is-expanded > .prioritise-score { display: none; }
  .prioritise-value label, .prioritise-effort label { display: block; color: var(--muted); margin-bottom: 4px; }
  .prioritise-task > .ui-btn.prioritise-expand { display: inline-flex; margin-top: 4px; min-height: 32px; padding: 2px 6px; font-weight: 400; }
  .prioritise-score-mini { display: inline; font-size: var(--fs-sm); color: var(--muted); }
  .prioritise-row.is-expanded > .prioritise-score::before { content: 'Score '; color: var(--muted); font-weight: 400; }
  .prioritise-row .ui-btn, .prioritise-row select { min-height: 44px; }
  .prioritise-rank { flex-wrap: wrap; align-content: center; grid-row: span 2; }
  .prioritise-rank > span { width: 100%; text-align: center; }
  .prioritise-rank .ui-btn { min-width: 44px; padding: 4px; }
  .prioritise-row .taskactions select { max-width: 140px; }
  .prioritise-hint { display: none; }
}
@media (max-width: 600px) {
  .prioritise-row .taskactions > select { flex: 0 1 140px; width: auto; }
}
@media (max-width: 900px) {
  .tscroll { overflow-x: visible; } .ttable { min-width: 0; } .trow.thead { display: none; }
  .trow { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); } .trow > div { border: 0 !important; padding: 0 !important; }
  .c-desc, .c-labels, .c-due, .c-prio { display: none; } .c-task { flex: 1; } .c-people { order: 3; } .c-more { order: 4; } .c-more .chip { display: none; }
  .m-only { display: flex; } .lsec { border-radius: var(--r-lg); }
}

/* ---- task drawer ----------------------------------------------------------- */
dialog.drawer { margin: 0 0 0 auto; padding: 0; width: min(600px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 16px 0 0 16px; border-width: 0 0 0 1px; display: none; flex-direction: column; overflow: hidden; }
dialog.drawer[open] { display: flex; animation: slidein .22s ease; }
@keyframes slidein { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] { animation: none; } }
.dhead { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5) var(--sp-3) 18px; border-bottom: 1px solid var(--border); min-height: 48px; } .dcreated { font-size: var(--fs-base); color: var(--muted); }
.dsaved { font-size: var(--fs-sm); color: var(--muted); } .dsaved.ok { color: var(--ok); } .dsaved.bad { color: var(--danger); font-weight: 600; }
.dbody { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-7) 28px; }
.pillsel { width: auto !important; border-radius: var(--r-pill); padding: var(--sp-1) 26px var(--sp-1) var(--sp-5); font-size: var(--fs-base); font-weight: 600; background-color: var(--panel); border-color: transparent; cursor: pointer; }
.pillsel:hover { border-color: var(--accent); }
.dtitle { width: 100%; font-size: var(--fs-2xl); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; border: 0 !important; border-radius: var(--r-md) !important; background: transparent !important; padding: var(--sp-1) var(--sp-3) !important; margin: 0 -8px var(--sp-2); resize: none; overflow: hidden; display: block; }
.dtitle:hover { background: var(--panel) !important; } .dtitle:focus { background: var(--card) !important; box-shadow: inset 0 0 0 2px var(--accent); outline: 0; }
.muted { color: var(--muted); font-weight: 400; }
button.small { padding: 2px var(--sp-4); font-size: var(--fs-sm); }
.descview { min-height: 52px; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--panel); white-space: pre-wrap; word-break: break-word; font-size: var(--fs-md); cursor: default; } .descview:hover { background: color-mix(in srgb, var(--panel) 70%, var(--card)); } .descview a { color: var(--accent); } .descview .ph { color: var(--muted); }
.ddesc { width: 100%; min-height: 110px; border-radius: var(--r-lg); resize: none; } .cbtns { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); flex-wrap: wrap; }
.composer textarea { width: 100%; resize: none; border-radius: var(--r-lg); min-height: 40px; padding: 9px var(--sp-5); overflow: hidden; }
.cmlist { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.cmcard { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.cmcard .cmhead { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); font-size: var(--fs-base); background: color-mix(in srgb, var(--panel) 50%, var(--card)); } .cmcard .cmhead .av { margin: 0; border: 0; width: 24px; height: 24px; } .cmcard .cmhead time { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); }
.cmcard .cmbody { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); white-space: pre-wrap; word-break: break-word; } .cmcard .cmbody a { color: var(--accent); }
.dfoot2 { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 760px) {
  dialog.drawer { inset: 0; margin: 0; width: 100vw; max-width: 100vw; border-radius: 0; border: 0; }
  .dbody { padding: 14px 14px 40px; } .dtitle { font-size: 21px; }
  .pillsel { min-height: 38px; } .cbtns button { min-height: 42px; } .composer textarea { min-height: 46px; }
}
/* ---- unread markers ------------------------------------------------------ */
#btnUnread { position: relative; } #btnUnread.on { background: var(--accent-soft); border-color: var(--accent); }
.badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger); color: var(--on-danger); font-size: var(--fs-xs); font-weight: 700; display: inline-grid; place-items: center; }
.badge[hidden] { display: none; }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: var(--sp-2); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.card .top .cdot { margin: 0 var(--sp-1) 0 2px; } .lt .cdot { vertical-align: middle; }
button.chip.unread, button.cmchip.unread { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.newb { margin-left: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: rgba(255,255,255,.28); font-size: 10.5px; }
.pill.fresh { box-shadow: inset 0 0 0 1px var(--accent); }
header #btnUnread { padding: var(--sp-1) var(--sp-3); min-width: 34px; }

/* ---- schedule (agenda) view ---------------------------------------------- */
.sched { max-width: 940px; margin: 0 auto; }
.smonth { font-size: var(--fs-base); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 18px 0 var(--sp-2); }
.sday { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.sdate { display: flex; align-items: center; gap: var(--sp-3); align-self: start; padding-top: 2px; }
.sdn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 17px; font-weight: 500; }
.sdn.lbl { width: auto; height: auto; font-size: var(--fs-md); font-weight: 700; color: var(--danger); }
.sday.today .sdn { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sdl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.sitems { min-width: 0; } .snone { color: var(--muted); font-size: var(--fs-base); padding: var(--sp-3) var(--sp-2); }   /* a note above the activity */
.sitem { display: grid; grid-template-columns: 26px 110px minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: 7px var(--sp-3); border-radius: var(--r-md); cursor: pointer; }
.sitem:hover { background: var(--panel); } .sitem.done .stitle { color: var(--muted); text-decoration: line-through; }
.stime { font-size: var(--fs-base); color: var(--muted); white-space: nowrap; } .stitle { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssub { color: var(--muted); font-weight: 400; font-size: var(--fs-base); margin-left: var(--sp-4); }
.sx { display: flex; gap: 5px; }
.circ.sm { width: 18px; height: 18px; font-size: 10px; margin: 0 auto; }
@media (max-width: 760px) {
  .sday { grid-template-columns: 1fr; gap: 2px; } .sdate { padding-top: 0; }
  .sitem { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 0; padding: var(--sp-4) var(--sp-1); } .stime { grid-column: 2; grid-row: 2; font-size: var(--fs-sm); } .stitle { grid-column: 2; grid-row: 1; white-space: normal; }
  .sitem .circ { grid-row: 1 / span 2; } .sx { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; } .sitem .lavs { display: none; } .ssub { display: block; margin: 2px 0 0; }
}

/* ---- Colourful style: gradient edges (left = client, right = urgency) ---------------------------------- */
.legend { display: none; }
html[data-style="colorful"] .legend { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: 7px 18px; border-bottom: 1px solid var(--border); background: var(--header); font-size: var(--fs-sm); }
.lgl { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; } .lgsep { width: 1px; height: 18px; background: var(--border); margin: 0 var(--sp-3); }
.lgchip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 2px var(--sp-4) 2px var(--sp-3); border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--cc) 45%, var(--border)); background: color-mix(in srgb, var(--cc) 10%, var(--card)); font-size: var(--fs-sm); }
.lgchip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--cc); } button.lgchip { cursor: pointer; } button.lgchip.on { background: var(--cc); color: var(--on-fill); } button.lgchip.on::before { background: var(--on-fill); }
html[data-style="colorful"] .logo { background: linear-gradient(135deg, #3e63dd, #8e4ec6 55%, #f76b15); }
html[data-style="colorful"] .card { border: 2px solid transparent; padding: 9px 11px var(--sp-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 11%, var(--card)), color-mix(in srgb, var(--uc) 7%, var(--card))) padding-box,
              linear-gradient(90deg, var(--cc) 0%, var(--cc) 14%, var(--uc) 86%, var(--uc) 100%) border-box; }
html[data-style="colorful"] .card:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 16%, var(--card)), color-mix(in srgb, var(--uc) 11%, var(--card))) padding-box, linear-gradient(90deg, var(--cc) 0%, var(--cc) 14%, var(--uc) 86%, var(--uc) 100%) border-box; }
html[data-style="colorful"] .col { --colx: var(--muted); }   /* columns stay neutral so the card borders are the only colour */
html[data-style="colorful"] .col h2 .dot { background: var(--muted); }
html[data-style="colorful"] .trow:not(.thead) { box-shadow: inset 4px 0 0 var(--cc); background-image: linear-gradient(90deg, color-mix(in srgb, var(--cc) 7%, transparent), transparent 40%); }
html[data-style="colorful"] .lsec[data-col="backlog"] .spill { background: color-mix(in srgb, #8e4ec6 18%, transparent); color: #8e4ec6; }
html[data-style="colorful"] .pill { border-left: 3px solid var(--cc); background: color-mix(in srgb, var(--cc) 14%, var(--panel)); box-shadow: inset -3px 0 0 var(--uc); }
html[data-style="colorful"] .sitem { box-shadow: inset 4px 0 0 var(--cc), inset -4px 0 0 var(--uc); background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 8%, transparent), color-mix(in srgb, var(--uc) 8%, transparent)); margin-bottom: var(--sp-1); }
html[data-style="colorful"] #viewSw .ui-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #8e4ec6)); color: var(--on-accent); }
@media (max-width: 760px) { html[data-style="colorful"] .legend { flex-wrap: nowrap; overflow-x: auto; padding: var(--sp-2) var(--sp-5); } .lgchip, .lgl { flex: 0 0 auto; white-space: nowrap; } }

/* ---- side sheets (dialog.settings: Settings, Help, Copy, Archive, Send) and the Settings dialog ---------------- */
/* a side sheet with a fixed height: the tabs stay in the same place whatever the length of each panel */
dialog.settings { margin: 0 0 0 auto; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 16px 0 0 16px; border-width: 0 0 0 1px; padding: 0 var(--sp-7) 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
dialog.settings[open] { animation: slidein .22s ease; }
@media (prefers-reduced-motion: reduce) { dialog.settings[open] { animation: none; } }
.sethead { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 3; background: var(--card); margin: 0 -20px; padding: var(--sp-5) var(--sp-7) var(--sp-1); height: 52px; box-sizing: border-box; } .sethead h3 { margin: 0; }
/* Settings: tabs (a ui.tabs, underline) under the header; from 1000px a tab list on the left and the panel on the right.
   Every block is one ui.section (.setsec, built by board.js buildSettings): [icon] TITLE + status chip, a muted line with the
   scope tag, the purpose and Learn more, then ui.props rows, .sbtns button rows (ui.button) and .sfold folds for rare controls. */
#dlgSettings [hidden] { display: none !important; }
.ui-tabs.stabs { position: sticky; top: 52px; z-index: 3; max-width: none; background: var(--card); margin: 0 -20px var(--sp-1); padding: 0 var(--sp-7); }
.stabs .tl-short { display: none; }
#dlgSettings [role="tabpanel"] { display: grid; align-content: start; padding-bottom: var(--sp-8); }
#dlgSettings .setstate:empty { display: none; }
#dlgSettings .setstate { margin: var(--sp-5) 0 var(--sp-1); }
.setsec { padding: var(--sp-6) 0 var(--sp-5); scroll-margin-top: 104px; }
.setsec ~ .setsec { border-top: 1px solid var(--border); }
.setsec .ui-section__body { display: grid; gap: var(--sp-4); min-width: 0; }
.setsec .ui-section__title .ui-i { width: 15px; height: 15px; }
.setsec__meta { margin: -2px 0 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.5; }
.setsec__scope { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); margin-right: var(--sp-3); padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--panel); font-size: var(--fs-xs); font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: 1px; }
.setsec__scope .ui-i { width: 12px; height: 12px; }
.setsec__learn { color: var(--accent); font-weight: 600; white-space: nowrap; }
.schip:empty { display: none; }
.setsec .hint { margin: 0; line-height: 1.45; }
.setsec .ui-props__row { grid-template-columns: 176px minmax(0, 1fr); }
.cklist:empty { display: none; }
.setsec .ui-props__label label { display: inline; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.setsec .ui-props__value > input:not([type=checkbox]), .setsec .ui-props__value > select { flex: 1 1 auto; width: 100%; min-height: 36px; }
.schk { display: inline-flex !important; align-items: center; gap: var(--sp-3); min-height: 32px; margin: 0 !important; color: var(--text) !important; font-size: var(--fs-md) !important; font-weight: 500 !important; cursor: pointer; }
.schk input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.setsec .ui-props__value > input.research-count { width: 5em; }
.sbtns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .sbtns .spacer { flex: 1 1 auto; }
.ui-btn.danger { color: var(--danger); }   /* a small destructive action: red text (uiBtns in board.js) */
.sfold { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0 var(--sp-5); }
.sfold > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; color: var(--text); font-size: var(--fs-base); font-weight: 600; cursor: pointer; list-style: none; }
.sfold > summary::-webkit-details-marker { display: none; }
.sfold > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 0 1px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.sfold[open] > summary::before { transform: rotate(45deg); }
.sfold[open] { padding-bottom: var(--sp-5); }
.sfold > :not(summary) + :not(summary) { margin-top: var(--sp-4); }   /* a <details> lays its content out in its own box, so the gaps are margins */
#bEdit { display: grid; gap: var(--sp-4); }
.sfold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.sprompt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.setsec .ui-props__row:has(> .ui-props__value > .srowstack) { align-items: start; padding: var(--sp-3) 0; }   /* a tall row: the label stays at the top */
.srowstack { display: grid; gap: var(--sp-3); width: 100%; min-width: 0; }
.sdanger { display: grid; gap: var(--sp-3); }
.sdanger textarea { width: 100%; min-height: 60px; }
/* Connection */
.stoken { display: grid; gap: var(--sp-2); width: 100%; min-width: 0; }
.stoken__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
#bThisBadge .bbadge { height: 24px; min-width: 34px; font-size: var(--fs-xs); }
#bThisRepo { overflow-wrap: anywhere; }
.bwiz { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bwiz h4 { margin: 0 0 var(--sp-2); font-size: 15px; } .bwiz .wfoot { margin-top: 14px; }
.warntext { color: var(--warn); font-weight: 600; }
/* Agents & integrations: the chooser */
.agpicks { display: grid; gap: var(--sp-2); }
.routine-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); overflow-wrap: anywhere; }
.routine-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.routine-card h4 { margin: 0; font-size: var(--fs-md); }
.routine-card h5 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sm); }
.routine-card p { margin: var(--sp-2) 0; }
.routine-card__scope { color: var(--muted); font-size: var(--fs-sm); }
.routine-card__result { font-weight: 600; }
.routine-facts { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.routine-facts dt { color: var(--muted); } .routine-facts dd { margin: 0; }
.routine-sources { padding-left: var(--sp-5); font-size: var(--fs-sm); }
#agRoutineSetup textarea { min-height: 88px; }
.agpick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4); width: 100%; min-height: 56px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.agpick:hover:not(:disabled) { border-color: var(--accent); background: var(--card-hover, var(--card)); }
.agpick > .ui-i { width: 20px; height: 20px; color: var(--accent); }
.agpick > .ui-i:last-child { width: 16px; height: 16px; color: var(--muted); }
.agpick__t { display: grid; gap: 2px; min-width: 0; } .agpick__t b { font-size: var(--fs-md); } .agpick__t .muted { font-size: var(--fs-sm); line-height: 1.35; }
@media (max-width: 760px) {
  dialog.settings { width: 100vw; border-radius: 0; border: 0; }
  .ui-tabs.stabs { gap: 0; padding: 0 var(--sp-3); margin: 0 -20px var(--sp-1); }   /* four tabs share a phone's width whatever the system font */
  .stabs .ui-tab { flex: 1 1 auto; min-width: 0; padding: 0 var(--sp-2); }
  .stabs .tl-long { display: none; } .stabs .tl-short { display: inline; }
}
@media (max-width: 380px) {
  .stabs .ui-tab { padding: 0 var(--sp-1); font-size: var(--fs-sm); }
  .setsec .ui-props__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3) 0; }
  .setsec .ui-props__label { font-size: var(--fs-sm); font-weight: 600; }
  .setsec .ui-props__row:has(> .ui-props__value > .schk) { grid-template-columns: minmax(0, 1fr) auto; }   /* an on/off switch stays on the label's line */
  .setsec .ui-props__value > input:not([type=checkbox]), .setsec .ui-props__value > select { min-height: var(--touch); }
  .agpick { grid-template-columns: auto minmax(0, 1fr) auto; } .agpick > .ui-i:last-child { display: none; }
  .agpick .schip { grid-column: 2; justify-self: start; }
}
@media (min-width: 1000px) {
  #dlgSettings { width: min(960px, calc(100vw - 40px)); }
  #dlgSettings[open] { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--sp-8); align-content: start; }
  #dlgSettings .sethead { grid-column: 1 / -1; }
  #dlgSettings .ui-tabs.stabs { grid-column: 1; grid-row: 2; align-self: start; flex-direction: column; gap: 2px; margin: var(--sp-5) 0 0; padding: 0; border-bottom: 0; background: transparent; overflow: visible; }
  #dlgSettings .stabs .ui-tab { justify-content: flex-start; min-height: 38px; margin: 0; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-md); font-size: var(--fs-md); }
  #dlgSettings .stabs .ui-tab:hover:not(:disabled) { background: var(--panel); }
  #dlgSettings .stabs .ui-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
  #dlgSettings [role="tabpanel"] { grid-column: 2; grid-row: 2; }
  .setsec { scroll-margin-top: 60px; }
}
.copydialog { width: min(440px, 100vw) !important; }
.copydialog > p { margin: 18px 0 var(--sp-5); }
.copychoices { display: grid; gap: var(--sp-4); }
.copychoices button { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-5); align-items: start; width: 100%; padding: 14px; text-align: left; background: var(--card); }
.copychoices button > i { margin-top: 2px; color: var(--accent); }
.copychoices button span { display: flex; flex-direction: column; gap: 3px; }
.copychoices button small { color: var(--muted); line-height: 1.35; }

/* ---- top bar v2: logo, views, client pills, quick people, filters ---------------------------------------- */
header { flex-wrap: nowrap; gap: var(--sp-4); padding: var(--sp-3) 14px; } .hbreak { display: none; }
.hfilters, .hutils { display: contents; }
.mobilemore { display: none; }
@media (min-width: 1001px) { header { align-items: flex-end; } }
header .logo { flex: 0 0 auto; width: 32px; height: 32px; font-size: 17px; border-radius: 9px; }
.clientwrap { position: relative; flex: 1 1 0; min-width: 0; }
.clientbar { display: flex; gap: var(--sp-2); overflow: hidden; align-items: center; min-width: 0; padding: 2px 0; }
.cpill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 11px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid transparent; font-size: var(--fs-base); white-space: nowrap; color: var(--text); }
.cpill:hover { border-color: var(--cc, var(--accent)); } .cpill .cn { font-size: var(--fs-xs); color: var(--muted); } .cpill .cdotc, .cmenu .cdotc { width: 9px; height: 9px; border-radius: 50%; background: var(--cc, var(--muted)); flex: 0 0 auto; }
.cpill.on { background: color-mix(in srgb, var(--cc, var(--accent)) 16%, var(--card)); border-color: var(--cc, var(--accent)); font-weight: 600; } .cpill.all.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cpill.more { color: var(--muted); }
.popover { position: absolute; z-index: var(--z-popover); background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 14px 36px rgba(0,0,0,.28); padding: var(--sp-3); min-width: 220px; }
.popover[hidden] { display: none; }
.clientpop { top: calc(100% + 6px); max-height: 60vh; overflow-y: auto; }
.cmenu { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; border: 0; background: transparent; padding: 7px var(--sp-4); border-radius: var(--r-md); } .cmenu:hover, .cmenu.on { background: color-mix(in srgb, var(--cc) 14%, transparent); } .cmenu .nm { flex: 1; } .cmenu .cn { font-size: var(--fs-xs); color: var(--muted); }
.cmenu.on::after { content: "✓"; color: var(--cc, var(--accent)); font-weight: 800; }
.peopleq { display: flex; flex: 0 0 auto; align-items: center; } .pq { border: 2px solid transparent; background: transparent; padding: 0; border-radius: 50%; margin-left: -4px; opacity: .65; } .pq .av { margin: 0; border: 2px solid var(--header); width: 28px; height: 28px; font-size: 10.5px; } .pq:hover { opacity: 1; z-index: 1; } .pq.on { opacity: 1; border-color: var(--accent); z-index: 2; }
.pq.agentq { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--panel); color: var(--muted); white-space: nowrap; }
.pq.agentq svg { width: 15px; height: 15px; } .pq.agentq .av { width: 22px; height: 22px; border-width: 1px; font-size: 8.5px; } .pq.agentq .agentname { font-size: var(--fs-sm); font-weight: 600; } .pq.agentq .agentcount { min-width: 16px; text-align: center; font-size: 10px; font-weight: 700; }
.pq.agentq.on { background: var(--accent-soft); color: var(--accent); }
.attnbtn { flex: 0 0 auto; display: inline-flex; gap: var(--sp-1); align-items: center; color: var(--warn); font-weight: 700; background: color-mix(in srgb, var(--warn) 14%, var(--card)); } .attnbtn.on { border-color: var(--warn); }
.popwrap { position: relative; flex: 0 0 auto; } #btnFilter { position: relative; } #btnFilter .tx { display: inline; }
.filterpop { right: 0; top: calc(100% + 8px); width: 270px; padding: var(--sp-5); } .filterpop label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-4); } .filterpop label.chk { flex-direction: row; align-items: center; gap: var(--sp-3); color: var(--text); font-size: var(--fs-base); } .filterpop select { font-size: var(--fs-base); }
.popfoot { display: flex; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--sp-3); margin-top: 2px; }
#status { flex: 0 0 auto; } #status.ok { display: none; } #status.err { color: var(--danger); font-weight: 600; }
header .badge { top: -6px; right: -6px; }
@media (max-width: 1100px) { #viewSw .ui-tab { padding: var(--sp-1) 9px; } #btnFilter .tx, .pq.agentq .agentname { display: none; } }
@media (min-width: 761px) and (max-width: 1000px) {
  header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 9px; padding: 7px var(--sp-4); align-items: center; }
  header .boardwrap { grid-column: 1; grid-row: 1; }
  .viewnav { grid-column: 2; grid-row: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .viewnav::-webkit-scrollbar { display: none; }
  .viewgroup { flex: 0 0 auto; }
  .hfilters, .hutils { grid-column: 1 / -1; display: flex; align-items: center; min-width: 0; gap: 7px; }
  header .boardwrap, header .viewnav { align-self: end; }
  .hfilters .clientwrap { flex: 1 1 220px; }
  .mobilemore { display: block; }
  .hutils { justify-content: flex-end; }
  .hutils > button, .hutils .hbreak { display: none; }
  .hutils:has(#status.ok) { display: none; }
  .hutils #status { flex: 1 1 100%; font-size: var(--fs-sm); padding: 1px 2px 0; }
}
@media (max-width: 760px) {
  header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); align-items: center; }
  header .boardwrap { grid-column: 1; grid-row: 1; }
  header #boardBtn.logo { min-width: var(--touch); min-height: var(--touch); padding: 0 7px; }
  .viewnav { grid-column: 2; grid-row: 1; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; }
  .viewnav::-webkit-scrollbar { display: none; }
  .viewgroup { flex: 0 0 auto; }
  .hfilters { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(72px, 1fr) repeat(6, 40px); align-items: center; min-width: 0; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
  header .boardwrap, header .viewnav { align-self: end; }
  .hfilters .clientwrap { min-width: 0; }
  .hfilters .clientbar { width: 100%; }
  .peopleq { display: none; }
  .mobilemore { display: block; }
  .hfilters > button, .hfilters > .popwrap { width: 40px; min-width: 40px; }
  .hfilters > .popwrap > button { width: 100%; }
  .hutils { grid-column: 1 / -1; grid-row: 3; display: flex; min-width: 0; }
  .hutils > button, .hutils .hbreak { display: none; }
  .hutils:has(#status.ok) { display: none; }
  .hutils #status { flex: 1 1 100%; font-size: var(--fs-sm); padding: 1px 2px 0; }
  #viewSw .ui-tab { min-height: 40px; min-width: 38px; padding: var(--sp-2) var(--sp-3); } header button { min-height: 40px; min-width: 40px; padding: var(--sp-1) var(--sp-2); }
  .popover { position: fixed; left: 8px; right: 8px; top: 120px; width: auto; max-width: none;
    max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; } .clientpop { left: 8px !important; } .filterpop { right: 8px; width: auto; }
  .filterpop select, .filterpop input { min-height: 42px; font-size: var(--fs-lg); } .filterpop label.chk { min-height: 40px; } .cmenu { min-height: var(--touch); }
  .cpill { padding: 7px var(--sp-4); }
}
.morepop { right: 0; top: calc(100% + 8px); width: 245px; padding: var(--sp-3); }
.morepop label { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); margin: 2px var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.morepop button { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 9px; border: 0; background: transparent; padding: 9px var(--sp-4); }
.morepop button:hover { background: var(--panel); }
.moreglyph { font-weight: 800; letter-spacing: .08em; line-height: 1; transform: translateY(-2px); }
/* A bookmarked Menu remains reachable in the wide Classic header, where overflow is normally hidden. */
.mobilemore:has(#morePop:not([hidden])) { display: block; }
.filterpop label { align-items: stretch !important; text-align: left; } .filterpop label.chk { align-items: center !important; }

.attnbtn .atx { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; } .attnbtn #attnN { font-weight: 800; } 
.attnbtn .atx.short { display: none; }
@media (max-width: 1400px) { .attnbtn .atx { display: none; } .attnbtn .atx.short { display: inline; } }
@media (max-width: 760px) { .attnbtn .atx.short { display: none; } }


/* needs-attention toggle: crossed out and grey when off, normal amber when on */
.attnbtn { position: relative; transition: background .15s, color .15s; }
.attnbtn .ic { position: relative; display: inline-block; }
.attnbtn:not(.on) { color: var(--muted); background: transparent; border-style: dashed; }
.attnbtn:not(.on) .ic { filter: grayscale(1); opacity: .6; }
.attnbtn:not(.on) .ic::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; background: var(--muted); transform: rotate(-38deg); border-radius: 2px; }
.attnbtn:not(.on) #attnN, .attnbtn:not(.on) .atx { text-decoration: line-through; font-weight: 500; }
.attnbtn.on { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, var(--card)); border: 1px solid var(--warn); }

/* ---- update banner ------------------------------------------------------- */

@keyframes hotpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- add-task discoverability ------------------------------------------------ */
.col h2 .hadd { border: 0; background: var(--card); color: var(--accent); width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; font-size: var(--fs-lg); line-height: 1; cursor: pointer; display: inline-grid; place-items: center; font-weight: 700; } .col h2 .hadd:hover { background: var(--accent); color: var(--on-accent); }
.col h2 .hcinema { display: inline-grid; place-items: center; width: 26px; height: 26px; min-width: 26px; min-height: 0; padding: var(--sp-1); border-radius: var(--r-md); background: var(--card); color: var(--muted); } .col h2 .hcinema:hover { color: var(--accent); }
.ladd { margin: var(--sp-1) 14px var(--sp-3); } .ladd input { border: 1px dashed var(--border); border-radius: var(--r-lg); padding: 9px var(--sp-5); color: var(--accent); font-weight: 600; } .ladd input::placeholder { color: var(--accent); opacity: .9; } .ladd input:focus { border-style: solid; border-color: var(--accent); }
.fab { display: none; position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-dock); width: 54px; height: 54px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); font-size: 30px; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.3); cursor: pointer; }
@media (max-width: 760px) { body[data-view="board"] .fab, body[data-view="list"] .fab { display: grid; place-items: center; } body:has(dialog[open]) .fab { display: none !important; } }

/* ---- drawer: title first ------------------------------------------------------------------ */
.dbody .dtitle { margin-top: 2px; }
.dfoot2 { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .dfoot2 .dcreated { font-size: var(--fs-sm); }

/* ---- drawers (task #dlgCard, person #dlgContact, client #dlgClient, project #dlgProject): ui.js header, one property list,
   sections (built in board.js buildDrawer / buildPersonDrawer / buildClientDrawer / buildProjectDrawer) ---- */
.uidrawer .dhead { gap: var(--sp-1); min-height: 56px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-6); }
.uidrawer .dhead .spacer { flex: 1 1 auto; }
.taskdrawer .dnum { flex: none; font-family: var(--font-mono); font-weight: 600; color: var(--muted); }
.taskdrawer .dnum .ui-i { opacity: .75; }
.taskdrawer .dsaved { white-space: nowrap; margin-right: var(--sp-2); } .taskdrawer .dsaved:empty { display: none; }
.taskdrawer .dhead .ui-iconbtn.hot { width: auto; gap: var(--sp-1); padding: 0 var(--sp-4); grid-auto-flow: column; background: var(--accent); color: var(--on-accent); animation: hotpulse 1.8s 3; }
.taskdrawer .dhead .ui-iconbtn.hot::after { content: "Codex"; font-size: var(--fs-sm); font-weight: 600; }
.uidrawer .dtitle { min-height: 0; }   /* one line until it grows (dialog textareas default to 80px) */
.uidrawer .ui-props { margin: var(--sp-3) 0 var(--sp-2); }
.uidrawer:not(.taskdrawer) .ui-props__row { grid-template-columns: 112px minmax(0, 1fr); }
.taskdrawer .ui-props { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
.taskdrawer .ui-props__row { grid-template-columns: minmax(0, 1fr); align-content: center; align-items: start; gap: var(--sp-1); min-height: 68px; padding: var(--sp-2) 0; }
.taskdrawer .dprop--full { grid-column: 1 / -1; }
.taskdrawer .ui-props__label { font-size: var(--fs-xs); font-weight: 650; }
.taskdrawer .ui-props__value { min-height: 36px; }
.taskdrawer .dprop--half .ui-select { width: 100%; }
.taskdrawer .dprop--half .ui-select__control { width: 100%; }
.uidrawer .dval { display: contents; }
.uidrawer .ui-props__value .ui-select { max-width: 100%; }
.ddue { position: relative; gap: var(--sp-1); min-height: 32px; padding: 0 2px 0 var(--sp-4); font-size: var(--fs-base); font-weight: 600; }
/* The pill shows the board's date text in a button; the native date input stays underneath it (the picker anchors to it, saves
   listen to it) and only shows itself in browsers without input.showPicker() (.ddue--edit). */
.ddue .ddue__btn { height: 30px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.ddue .ddue__btn:focus-visible { outline: none; } .ddue:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.ddue .ddue__input { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ddue.ddue--edit .ddue__btn { display: none; }
.ddue.ddue--edit .ddue__input { position: static; width: auto; height: 30px; opacity: 1; pointer-events: auto; background: transparent; color: inherit; font: inherit; }
.ddue .ddue__input:focus { outline: none; }
.ddue:not(:has(.ui-pill__remove:not([hidden]))) { padding-right: var(--sp-4); }
.ddue.ddue--empty { --ui-pill-bg: transparent; --ui-pill-bd: var(--border); --ui-pill-fg: var(--muted); font-weight: 500; }
.taskdrawer .dlabelnew { width: 160px; height: 30px; }
.uidrawer .dsec2 { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.uidrawer .ui-count:empty { display: none; }
.uidrawer .ui-section__body { min-width: 0; }
.uidrawer .ui-addrow { margin-top: var(--sp-1); }
.uidrawer .dlist:empty, .taskdrawer .dtodos:empty { display: none; }
.taskdrawer .dtodo { align-items: center; min-height: 36px; padding: 0 2px; }
.taskdrawer .dtodo input { margin-top: 0; }
.taskdrawer .dtodo .ui-iconbtn { opacity: .55; } .taskdrawer .dtodo:hover .ui-iconbtn, .taskdrawer .dtodo .ui-iconbtn:focus-visible { opacity: 1; }
.uidrawer .ui-listrow a.ui-iconbtn { color: var(--muted); }
.uidrawer .dhint { display: none; margin: var(--sp-2) 0 0; }
.uidrawer .ui-addrow:has(> form:not([hidden])) + .dhint { display: block; }
.taskdrawer .dclaim { margin: 0 0 var(--sp-4); }
.taskdrawer .dclaim .ui-banner { align-items: flex-start; }
.taskdrawer .dclaim .ui-banner > .ui-i { margin-top: 1px; }
.taskdrawer .dclaim .cnote, .taskdrawer .dclaim .host { margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); }
.taskdrawer .dclaim .sesslink { font-size: var(--fs-sm); }
.taskdrawer .dclaim__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.uidrawer .dfoot2 { margin-top: var(--sp-7); }
@media (max-width: 760px) {
  .uidrawer .dhead { gap: 0; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4); }
  .uidrawer:not(.taskdrawer) .ui-props__row { grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-3); }
  .taskdrawer .ui-props { column-gap: var(--sp-4); }
  .taskdrawer .ui-props__row { min-height: 72px; gap: var(--sp-1); }
  .ddue { min-height: var(--touch); padding-left: var(--sp-5); font-size: var(--fs-md); }
  .ddue .ddue__btn, .ddue.ddue--edit .ddue__input { height: 40px; }
  .taskdrawer .dlabelnew { height: var(--touch); width: 100%; }
  .taskdrawer .dtodo { min-height: var(--touch); }
  .taskdrawer .dtodo .ui-iconbtn { opacity: 1; }
  .uidrawer .dsec2 { margin-top: var(--sp-5); }
}
/* read-only boards: edit controls are disabled by lockDrawers() in board.js; the add rows, remove buttons and empty optional sections go */
body.ro .uidrawer .ui-addrow, body.ro #cWhoAdd, body.ro #cLabelAdd, body.ro #cDescBtn, body.ro .uidrawer .ui-pill__remove,
body.ro .uidrawer .ui-listrow > button.ui-iconbtn:not([data-ro-keep]), body.ro .taskdrawer .dtodo .ui-iconbtn, body.ro .uidrawer .optsec.is-empty { display: none !important; }
body.ro .uidrawer .ui-pill--removable { padding-right: var(--sp-4); }
/* person, client and project drawers: identity in the header, fields that look like text until touched, one list-row design */
.didentity { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dtile { --dtile-c: var(--muted); flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: color-mix(in srgb, var(--dtile-c) 16%, var(--card)); color: var(--dtile-c); }
.dtile .ui-i { width: 18px; height: 18px; }
.didentity .ui-avatar { flex: none; }
.uidrawer .dtitle--static { margin: 2px 0 var(--sp-2); padding: var(--sp-1) 0 !important; overflow-wrap: anywhere; }
.uidrawer .dtitle--static:hover { background: transparent !important; }
:is(.uidrawer, .personform) .dfield { flex: 1 1 auto; width: 100%; min-width: 0; height: 34px; margin: 0 0 0 calc(-1 * var(--sp-3)); padding: 0 var(--sp-3); border-color: transparent; background: transparent; color: var(--text); font-size: var(--fs-md); }
:is(.uidrawer, .personform) .dfield:hover:not(:disabled):not(:focus) { background: var(--panel); }
:is(.uidrawer, .personform) .dfield:focus { background: var(--card); }
.uidrawer .dfield:disabled { opacity: 1; cursor: default; }
.uidrawer .dfield:disabled::placeholder, .uidrawer textarea:disabled::placeholder { color: transparent; }   /* read-only: an empty field reads as empty, not as an example value */
.ui-props__value > .dfield + datalist { display: none; }
.dmuted { color: var(--muted); font-size: var(--fs-base); }
.uidrawer .ui-props__value .dquick { min-height: 30px; padding: 0 var(--sp-3); color: var(--muted); }
.uidrawer .ui-props__value .dquick:hover:not(:disabled) { color: var(--accent); }
.uidrawer .dempty { margin: 0; padding: var(--sp-2) 0; color: var(--muted); font-size: var(--fs-base); }
.contactmethods { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
/* an email or phone row: label and value edit in place, then mail/call and remove */
.uidrawer .dmethod { gap: var(--sp-1); padding: 0; }
.uidrawer .dmethod .methodlabel { flex: 0 0 104px; width: 104px; margin: 0; color: var(--muted); font-size: var(--fs-base); }
.uidrawer .dmethod .methodvalue { margin: 0; }
.dmethod > .ui-iconbtn { flex: none; }
.dmethod > a.ui-iconbtn { color: var(--accent); }
/* the two-field add row: label, then the address or link, then Add */
.ui-addrow.dpair .ui-addrow__form { flex-wrap: wrap; }
.ui-addrow.dpair .ui-addrow__label { flex: 0 1 150px; min-width: 0; width: auto; }
.ui-addrow.dpair .ui-addrow__input { flex: 1 1 180px; min-width: 0; width: auto; }
.ui-addrow .ui-addrow__input { width: auto; min-width: 0; }
/* a row that opens a project; a task row in a drawer (tick + the ui.js task row) */
.uidrawer .dnav { width: 100%; min-height: 40px; margin: 0; padding: 0 var(--sp-1); border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.uidrawer .dnav:last-child { border-bottom: 0; }
.uidrawer .dnav:hover { background: var(--panel); } .dnav:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dnav > .ui-i { width: 16px; height: 16px; color: var(--muted); flex: none; }
.dnav > .ui-listrow__text { flex: 1 1 auto; font-weight: 600; }
.dtask { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.dtask:last-child { border-bottom: 0; }
.dtask > .ui-iconbtn { flex: none; color: var(--muted); }
.dtask > .ui-task { flex: 1 1 auto; min-width: 0; align-content: center; }
.dtask.is-done .ui-task__title { text-decoration: line-through; color: var(--muted); }
.dsuggest { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dsuggest:empty { display: none; }
/* contact log: the composer on top, then the touches (newest first) */
.crmdrawer .composer textarea { margin: 0; }
.crmdrawer .composer .cbtns { gap: var(--sp-3); }
.crmdrawer .composer .ddraft { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--text); font-size: var(--fs-base); font-weight: 500; }
.crmdrawer .composer .ddraft[hidden] { display: none; }
.crmdrawer .composer #pTouchPost { margin-left: auto; }
.crmdrawer .cmlist:empty { display: none; }
.crmdrawer .cmlist { margin-top: var(--sp-4); }
.touch .tchan { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; } .touch.draft { border-style: dashed; }
.touch .cmhead { flex-wrap: wrap; } .touch .cmacts { display: flex; gap: var(--sp-2); width: 100%; }
.crmdrawer .ddesc { min-height: 88px; margin: 0; }
.crmdrawer .ui-section__action .ui-btn { color: var(--accent); }
@media (max-width: 760px) {
  .uidrawer .dfield { height: var(--touch); }
  .uidrawer .dmethod .methodlabel { flex-basis: 76px; width: 76px; }
  .ui-addrow.dpair .ui-addrow__label { flex: 1 1 100%; }
  .uidrawer .ui-props__value .dquick { min-height: 36px; }
  .uidrawer .dnav { min-height: var(--touch); }
}
body.ro .uidrawer .dsuggest, body.ro .crmdrawer .composer, body.ro .ui-props__value .dquick { display: none !important; }
body.ro .dtask > .ui-iconbtn { visibility: hidden; }
/* the add-person form: a centred sheet (a bottom sheet on phones) with the name, then the optional details as a property list */
.personform > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
dialog.personform { width: min(520px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.personform .ui-sheet__body .ui-field__label { display: flex; align-items: baseline; margin: var(--sp-5) 0 var(--sp-2); color: var(--text); font-size: var(--fs-base); font-weight: 600; }
.personform .apname { width: 100%; }
.personform .apopt { margin: var(--sp-6) 0 var(--sp-1); color: var(--muted); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.personform .ui-props__row { grid-template-columns: 104px minmax(0, 1fr); }
.personform .dfield { margin-left: 0; border-color: var(--border); background: var(--card); }
@media (max-width: 760px) { dialog.personform { width: 100vw; max-width: 100vw; } .personform .ui-props__row { grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-3); } }
@media (max-width: 760px) { .dtitle { font-size: var(--fs-xl); } }
.cbtns[hidden] { display: none !important; }


/* ---- overflow defences: nothing may make the page wider than the screen ------------------ */
html, body { max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } }
body > * { min-width: 0; max-width: 100%; }
header { max-width: 100%; } header > * { min-width: 0; }
.card, .card .t, .card .n, .tags, .foot, .sitem, .pill, .dtitle, .descview, .cmlist, .cm { min-width: 0; overflow-wrap: anywhere; }
.card .t, .card .n { overflow-wrap: anywhere; word-break: normal; }
.foot, .tags, .mm, .c-more, .c-labels { flex-wrap: wrap; max-width: 100%; }
.chip, .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.chip.gh { display: inline-block; vertical-align: bottom; }
.legend, #tabs, .tscroll, .clientbar { max-width: 100%; }
dialog, dialog.drawer { max-width: 100%; } dialog * { min-width: 0; }
dialog input, dialog select, dialog textarea { max-width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { #board, #board > .col, .col .cards, .col .add { max-width: 100%; min-width: 0; } .add input { min-width: 0; width: 100%; } img, video, svg { max-width: 100%; } }
@media (max-width: 420px) { header { gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) var(--sp-3); } header button { min-width: 36px !important; min-height: 38px; padding: var(--sp-1) var(--sp-1); } #viewSw .ui-tab { min-width: 34px !important; padding: var(--sp-2) var(--sp-1); } .logo { display: none; } }

/* ---- task numbers, @mentions, suggestions ------------------------------------------------ */
.numchip { border: 0; background: var(--panel); color: var(--muted); font: 600 var(--fs-xs)/1 var(--font-mono); padding: var(--sp-1) 7px; border-radius: var(--r-sm); cursor: pointer; min-height: 0; flex: 0 0 auto; } .numchip:hover { color: var(--accent); background: var(--accent-soft); }
.card .top .numchip { margin-right: var(--sp-2); }
/* Done cards: Archive shows on hover or keyboard focus; touch screens (no hover) always show it */
.card .quickarch, .trow .quickarch { opacity: 0; } .card:hover .quickarch, .card:focus-within .quickarch, .trow:hover .quickarch, .trow:focus-within .quickarch { opacity: .7; } .quickarch:hover, .quickarch:focus-visible { opacity: 1 !important; }
@media (hover: none) { .card .quickarch, .trow .quickarch { opacity: .7; } }
.numtag { color: var(--muted); font: 600 var(--fs-xs) var(--font-mono); margin-right: 7px; }
.mention { color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); padding: 0 var(--sp-1); font-weight: 600; } .mention.me { background: var(--accent); color: var(--on-accent); }
a.mref { color: var(--accent); font-weight: 600; text-decoration: none; background: var(--accent-soft); border-radius: var(--r-sm); padding: 0 var(--sp-1); font-family: var(--font-mono); font-size: .92em; } a.mref:hover { text-decoration: underline; }
.chip.mentionchip { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.cmcard.mine { border-left: 3px solid var(--accent); }
.sugwrap { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: var(--z-popover); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0,0,0,.28); padding: var(--sp-1); max-height: 240px; overflow: auto; } .suggest[hidden] { display: none; }
.contact-suggest { position: static; margin-top: var(--sp-1); }
.contact-suggest .sug { flex-wrap: wrap; gap: var(--sp-1); min-height: var(--touch); }
.sug { display: flex; gap: var(--sp-4); align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px var(--sp-4); border-radius: var(--r-md); cursor: pointer; min-height: 0; color: var(--text); } .sug.on, .sug:hover { background: var(--accent-soft); } .sug .sm { color: var(--muted); font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 760px) { .sug { min-height: var(--touch); align-items: center; } }
.hint.ok { color: var(--ok); } .hint.bad { color: var(--danger); }
.sesslink { display: inline-block; margin-top: var(--sp-1); color: var(--accent); font-weight: 600; font-size: var(--fs-base); }
.fldbtns { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); } .fldbtns[hidden] { display: none; }
.tokenreuse:empty { display: none; }

/* Settings → Agents: per-person agent switches */
.lastrun { font-size: var(--fs-base); color: var(--muted); margin: -2px 0 var(--sp-4); } .lastrun .sesslink { font-weight: 600; } .lastrun .lroutcome { font-weight: 600; }
.chip.cancelledchip { background: var(--panel); color: var(--muted); font-style: italic; }
/* Waiting-for (kit v43): a quiet chip until the chase day passes, then amber; the drawer's small set-a-wait form */
.chip.waitchip { display: inline-flex; align-items: center; gap: 3px; }
.chip.waitchip.late { color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.dwait { display: flex; min-width: 0; align-items: center; }
.dwait > .ui-pill { max-width: 100%; min-width: 0; }
.dwait .ui-pill__main, .dwait .ui-pill__text { min-width: 0; }
.dwait .ui-pill__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Runs after (card dependencies): a quiet chip per link not done yet, amber when it is missing or cancelled */
.chip.afterchip { display: inline-flex; align-items: center; gap: 3px; }
.chip.afterchip.late { color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.chip.afterchip.ok { color: var(--muted); }
.dafter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); min-width: 0; }
.dafter[hidden] { display: none; }
.dafter__label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-sm); }
.dafter > .ui-pill { max-width: 100%; min-width: 0; }
.dafter .ui-pill__main, .dafter .ui-pill__text { min-width: 0; }
.dafter .ui-pill__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dworkpick { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; min-height: 46px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.dworkpick:hover { border-color: var(--border-strong); background: var(--card-hover); }
.dworkpick__text { display: grid; gap: 2px; min-width: 0; }
.dworkpick__text strong, .dworkpick__text span { overflow-wrap: anywhere; }
.dworkpick__text span { color: var(--muted); font-size: var(--fs-sm); }
.dworkpick > .ui-i { flex: none; color: var(--muted); }
.dwaitform { display: grid; gap: var(--sp-5); }
.dwaitform .ui-sheet__text { margin-bottom: var(--sp-1); }
.dworkpicker { display: grid; gap: var(--sp-5); }
.dworkfind { width: 100%; }
.dworkempty { margin: 0; padding: var(--sp-2) var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.dworkcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.dworkcol { min-width: 0; }
.dworkcol h3 { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.dworkchoices { display: grid; align-content: start; gap: var(--sp-1); }
.dworkchoice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.dworkchoice strong, .dworkchoice span { max-width: 100%; overflow-wrap: anywhere; }
.dworkchoice span { color: var(--muted); font-size: var(--fs-sm); }
.dworkchoice:hover { background: var(--panel); }
.dworkchoice.selected { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); color: var(--accent); }
.dworkchoice--add { flex-direction: row; align-items: center; color: var(--accent); }
.dworkchoice--add .ui-i { flex: none; }
@media (max-width: 760px) { .dworkcols { grid-template-columns: minmax(0, 1fr); } .dworkchoice { min-height: var(--touch); } }
/* phones: hold a card to pick it up, drop it on a lane in the Move bar */
@media (max-width: 760px) { .card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.card.lifted { opacity: .35; }
.dragghost { position: fixed; z-index: 1000; pointer-events: none; max-width: 70vw; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-lg); background: var(--card); color: var(--text); border: 2px solid var(--accent); box-shadow: 0 10px 26px rgba(0,0,0,.3); font-size: var(--fs-base); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: rotate(-2deg); }
.movebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,0,0,.25); padding: var(--sp-4) var(--sp-5) calc(12px + env(safe-area-inset-bottom)); }
.movebar .mvhead { font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-3); } .movebar .mvhint { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-3); text-align: center; }
.movebar .mvrow { display: flex; gap: var(--sp-3); } .droptgt { flex: 1 1 0; min-width: 0; min-height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--border); border-radius: var(--r-xl); font-weight: 600; font-size: var(--fs-md); padding: var(--sp-2); background: var(--panel); }
.droptgt.over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: scale(1.04); }

.cpill { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cpillgo { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; cursor: pointer; opacity: .85; }
.cpillgo:hover { background: var(--accent-soft); opacity: 1; }
.cmenurow { display: flex; gap: var(--sp-1); align-items: stretch; }
.cmenurow .cmenu { flex: 1; }
.cmenurow .cmenu.detail { flex: 0 0 auto; width: auto; font-size: var(--fs-sm); color: var(--muted); }
.cmenurow .cmenu { min-width: 0; justify-content: flex-start; }   /* "width: 100%" from .cmenu made Details squeeze the name */
.blist { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; } .brow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); } .brow .bname { flex: 1; font-weight: 600; overflow-wrap: anywhere; } .brow .bcur { font-size: var(--fs-sm); color: var(--muted); }
header #boardBtn.logo { display: inline-grid; width: auto; min-width: 32px; padding: 0 var(--sp-2); border: 0; color: var(--on-fill); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.bbadge { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 5px; border-radius: var(--r-sm); color: var(--on-fill); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; flex: 0 0 auto; }
.boardpop { left: 0; min-width: 320px; } .bpmanage { justify-content: flex-start; } .bphead { font-size: var(--fs-sm); color: var(--muted); padding: 2px var(--sp-2) var(--sp-2); }
.bprow, .bpmanage { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-md); padding: var(--sp-2); color: inherit; font: inherit; cursor: pointer; }
.bprow:hover, .bpmanage:hover { background: var(--accent-soft); } .bprow.cur .bpname { font-weight: 700; } .bpname { flex: 1; overflow-wrap: anywhere; } .bpmark { color: var(--accent); }
.bpmanage { border-top: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-base); }
header .boardwrap { order: 0; }

/* activity view */
.act { max-width: 900px; margin: 0 auto; }
.actbar { flex-wrap: wrap; } .actbar select, .actbar input[type=date] { min-height: 32px; } .actbar .chk { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-base); color: var(--muted); }
.actsum { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--panel); margin-bottom: var(--sp-5); font-size: var(--fs-md); }
.actnums { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-2); color: var(--muted); } .actnum b { color: var(--text); font-size: 18px; }
.actsec { border-top: 1px solid var(--border); padding: var(--sp-4) 0; }   /* ui.section */
.actdone .ui-section__title { color: var(--accent); }
.actcard { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; border: 0; background: transparent; padding: var(--sp-2) var(--sp-1); border-radius: var(--r-sm); color: var(--text); min-height: 0; }
.actcard:hover { background: var(--accent-soft); } .acttitle { font-weight: 600; flex: 0 1 auto; min-width: 0; } .actcard .ssub { color: var(--muted); font-size: var(--fs-sm); margin-left: auto; text-align: right; }
.actitem { margin-bottom: var(--sp-3); }
.actlog { list-style: none; margin: 0 0 0 46px; padding: 0; font-size: var(--fs-base); } .actlog li { padding: 2px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.actlog time { color: var(--muted); font-variant-numeric: tabular-nums; } .actlog b.agent { color: var(--accent); } .actlog li.dn { font-weight: 600; }
@media (max-width: 760px) { .actlog { margin-left: var(--sp-3); } .actcard { flex-wrap: wrap; } .actcard .ssub { margin-left: 0; width: 100%; text-align: left; } }
.mnlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.mnrow { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: var(--text); padding: var(--sp-3); min-height: 0; }
.mnrow:hover { border-color: var(--accent); } .mnrow.fresh { border-left: 3px solid var(--accent); }
.mnhead { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .mnhead .ssub { color: var(--muted); font-size: var(--fs-sm); margin-left: auto; }
.mndesc { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mncm { display: flex; flex-direction: column; gap: var(--sp-1); border-left: 2px solid var(--border); padding-left: var(--sp-3); }
.mnwho { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); } .mnwho time { color: var(--muted); }
.mnbody { white-space: pre-wrap; overflow-wrap: anywhere; }
.newssheet .newsintro { margin: 0 0 var(--sp-3); } .newsrow .mnbody { white-space: normal; } .newschanges { gap: var(--sp-1); } .newschanges .mnbody { color: var(--muted); font-size: var(--fs-sm); }
.cmcard.cmflash { animation: cmflash 2.4s ease-out; }
@keyframes cmflash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .cmcard.cmflash { animation: none; outline: 3px solid var(--accent); } }
@media (max-width: 420px) { header { column-gap: var(--sp-1); } #viewSw .ui-tab { min-width: 29px !important; padding: var(--sp-2) 2px; } }   /* six task views still fit on one row */

/* settings → checks */
.cklist { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-2); }
.ck { padding: var(--sp-1) var(--sp-4); border-radius: var(--r-md); background: var(--panel); }
.ckd { overflow-wrap: anywhere; }
.cknext { margin: var(--sp-3) 0 2px; font-size: var(--fs-base); padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--r-md) var(--r-md) 0; }
.cknext > b { display: block; margin: 0 0 5px; color: var(--text); }
.cknext ol { margin: 0 0 9px; padding-left: var(--sp-7); color: var(--text); line-height: 1.5; }
.ckactions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ckactions .btnlink { padding: var(--sp-2) var(--sp-4); }
.ckactions a.small { display: inline-flex; align-items: center; text-decoration: none; }
.cknote { margin-top: 7px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.ckseen { margin-top: 9px; color: var(--muted); }
.ckseen summary { cursor: pointer; }
.ckseen > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--sp-2); }

/* public board warning */
.pubwarn { max-width: 560px; border: 4px solid var(--danger); border-radius: 14px; padding: var(--sp-8) 26px; text-align: left; }
.pubwarn::backdrop { background: color-mix(in srgb, var(--danger) 45%, rgba(0,0,0,.6)); }
.pubwarn h2 { margin: var(--sp-2) 0 var(--sp-5); font-size: 26px; color: var(--danger); } .pubicon { font-size: 52px; line-height: 1; }
.pubwarn p { font-size: 15px; line-height: 1.5; } .pubwarn .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-6); }
.btnlink { display: inline-flex; align-items: center; padding: var(--sp-3) 14px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; }

/* the Filters badge counts filters that are on: not an alert, so not red */
header #filterBadge { background: var(--accent); }
.alkinds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-5); margin: var(--sp-3) 0; } @media (max-width: 520px) { .alkinds { grid-template-columns: 1fr; } }

/* ==== Keeptrack CRM: Today, People, Pipeline, person drawer, first-run wizard ==== */
#board.v-today, #board.v-people, #board.v-welcome { display: block; overflow-y: auto; padding: var(--sp-6) 18px 60px; }
#board > .today, .peoplev { max-width: 980px; margin: 0 auto; }
.todayhead { display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-2); } .todayhead h2 { margin: 0; font-size: 22px; }
.tsec { margin: 18px 0 var(--sp-3); gap: var(--sp-1); }   /* ui.section */
.prow { display: grid; grid-template-columns: minmax(160px, 1.3fr) auto minmax(160px, 1.6fr) auto; gap: var(--sp-2) 14px; align-items: center; padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--r-sm); }
.prow:hover, .prow:focus-visible { background: color-mix(in srgb, var(--panel) 60%, transparent); outline: none; }
.pwho { display: flex; flex-direction: column; min-width: 0; } .pwho .muted { font-size: var(--fs-sm); }
.pnext { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; min-width: 0; } .plast { font-size: var(--fs-sm); white-space: nowrap; }
.todaytail { display: grid; justify-items: end; align-items: center; min-width: 0; }
.todaytail > * { grid-area: 1 / 1; }
.taskactions { display: flex; align-items: center; gap: 5px; }
.todayactions { justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity .12s; }
.ttoday:hover .todayactions, .ttoday:focus-within .todayactions { opacity: 1; pointer-events: auto; }
.ttoday:hover .todaytail > .plast, .ttoday:focus-within .todaytail > .plast { opacity: 0; }
.quickstatus { width: 112px; min-height: 32px; padding: var(--sp-1) var(--sp-8) var(--sp-1) 7px; font-size: var(--fs-sm); }
.quickassign { position: relative; }
.quickassign summary { list-style: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.quickassign summary::-webkit-details-marker { display: none; }
.quickassign[open] summary { border-color: var(--accent); color: var(--accent); }
.quickassignmenu { position: absolute; z-index: 12; top: calc(100% + 5px); right: 0; width: 220px; display: grid; gap: 3px; padding: 7px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-hover); }
.quickassignmenu button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 7px; border: 0; background: transparent; text-align: left; }
.quickassignmenu .quickperson.on { background: var(--accent-soft); color: var(--accent); }
.quickassignmenu .quickagent { border-top: 1px solid var(--border); border-radius: 0; margin-top: 3px; padding-top: 7px; color: var(--accent); } .quickassignmenu .quickagent.on { background: var(--accent-soft); font-weight: 600; } .quickassignmenu .quickagent:disabled { opacity: .7; cursor: default; }
.quickassignmenu .quickunassign { color: var(--danger); border-top: 1px solid var(--border); border-radius: 0; margin-top: 3px; padding-top: 7px; }
.card:has(.quickassign[open]), .ttoday:has(.quickassign[open]) { content-visibility: visible; contain: none; z-index: 20; }
.ttoday:has(.quickassign[open]) { position: relative; }
.cinemaactions { justify-content: flex-start; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.stagepill.memberpill { --h: 265; }
.prow.pmember { opacity: .85; }
.stagepill { --h: 210; display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  background: hsl(var(--h) 70% 50% / .16); color: hsl(var(--h) 55% 38%); }
[data-theme="dark"] .stagepill, [data-theme="midnight"] .stagepill { color: hsl(var(--h) 70% 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stagepill { color: hsl(var(--h) 70% 72%); } }   /* theme follows the device: no data-theme to match */
.stagepill.closed { opacity: .7; }
.pbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); margin-bottom: var(--sp-3); max-width: 100%; } .psearch { min-width: 0; width: 100%; }
.padd { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); max-width: 100%; } .padd input { min-width: 0; width: 100%; }
.personform .required { color: var(--danger); font-size: 10px; margin-left: 5px; text-transform: uppercase; letter-spacing: .04em; }
#board.pipe .col h2 .psum { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.pcard { cursor: grab; } .pcard .ctitle { font-weight: 600; } .pcard .small { font-size: var(--fs-sm); margin-top: 3px; } .pcard .pval { font-size: var(--fs-sm); margin-top: var(--sp-1); font-weight: 600; }
.touch .tchan { font-weight: 600; } .touch.draft { border-style: dashed; }
.welcome { max-width: 640px; margin: var(--sp-4) auto; line-height: 1.5; } .welcome h2 { margin-top: 0; }
@media (max-width: 760px) {
  #board.v-today, #board.v-people, #board.v-welcome { padding: var(--sp-3) var(--sp-5) 90px; }
  .prow { grid-template-columns: 1fr auto; } .prow .pnext { grid-column: 1 / -1; } .prow .plast { display: none; }
  .ttoday .todaytail { grid-column: 1 / -1; justify-items: stretch; } .ttoday .todayactions { justify-content: flex-start; opacity: 1; pointer-events: auto; } .quickstatus { flex: 1; width: auto; }
  #board.pipe .col { display: block; margin-bottom: 14px; } #board.pipe .col h2 { display: flex; }
}
@media (max-width: 520px) {
  .pbar { grid-template-columns: minmax(0, 1fr); } .pbar select { width: 100%; }
}
@media (max-width: 420px) {
  .hfilters { grid-template-columns: minmax(60px, 1fr) repeat(6, 36px); gap: var(--sp-1); }
  .hfilters > button, .hfilters > .popwrap { width: 36px; min-width: 36px; }
}
@media (hover: none) { .ttoday .todayactions { opacity: 1; pointer-events: auto; } .ttoday .todaytail > .plast { display: none; } }

/* speed: the browser skips layout and paint for rows and cards that are off screen (big boards) */
.card, .trow, .prow, .pcard { content-visibility: auto; contain-intrinsic-size: auto 64px; }

/* help */
dialog.help { max-width: 860px; }
.help .hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4) 18px; }
.help h3 { font-size: var(--fs-md); margin: var(--sp-2) 0 2px; } .help p { margin: 0 0 var(--sp-2); font-size: var(--fs-md); line-height: 1.45; } .help .hlinks { margin-top: var(--sp-5); }
.help .hagent { grid-column: 1 / -1; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.help .hagentlinks { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-3) 0; }
.help .hagentlinks a { font-weight: 600; }
/* Strips under the header (#updateBar, #kitBar, #memberBar, #roBar, #sizeBar): each holds one ui.banner */
.kbbar { padding: var(--sp-2) 18px 0; } .kbbar[hidden] { display: none; }
.kbbar .morelink { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) { .kbbar { padding: var(--sp-2) var(--sp-3) 0; } }
.kb-ask .ui-sheet__text { white-space: pre-line; }   /* "From: …\nTo: …" keeps its line break */
/* read-only: no add boxes or delete buttons; drawer fields are disabled by JS */
body.ro .add, body.ro .ladd, body.ro .hadd, body.ro .padd, body.ro .fab { display: none !important; }
body.ro .card, body.ro .pcard { cursor: pointer; }

/* search */
dialog.qsearch { margin: 10vh auto auto; width: min(640px, calc(100vw - 32px)); max-width: none; max-height: 76vh; padding: 0; border-radius: 14px; overflow: hidden; flex-direction: column; }
dialog.qsearch[open] { display: flex; }
.qbar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border); }
.qbar > svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.qbar input[type=search] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; padding: var(--sp-4) 0; }
.qbar input[type=search]:focus, .qbar input[type=search]:focus-visible { outline: none; }
.qcancel { flex: 0 0 auto; border: 0 !important; background: transparent !important; color: var(--accent); font-weight: 600; padding: var(--sp-3); }
.qopts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6) var(--sp-1); font-size: var(--fs-base); }
.qchip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer; color: var(--text); }
.qchip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .qchip input { margin: 0; }
.qgos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); padding: 2px 1px var(--sp-1); }
.qhit.qgo { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-lg); font-weight: 600; }
.qhit.qgo svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.qhead { padding: var(--sp-5) 9px var(--sp-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { dialog.qsearch { margin: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; } .qhit { padding: 11px 9px; } }

.qres { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-3) 14px; }
.qres > * { flex: 0 0 auto; }   /* a phone keyboard makes this pane short: scroll full-height rows instead of shrinking their text over each other */
.qhit { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px var(--sp-3); text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); padding: 7px 9px; }
.qhit:hover, .qhit:focus, .qhit.first { background: var(--panel); border-color: var(--border); }
.qhit .qic { grid-row: span 2; } .qhit .qt { font-weight: 600; } .qhit .qsub { grid-column: 2 / -1; font-size: var(--fs-sm); color: var(--muted); }
.qarch { font-size: var(--fs-xs); padding: 1px 7px; border-radius: var(--r-pill); background: var(--panel); color: var(--muted); border: 1px dashed var(--border); white-space: nowrap; }

#btnSearch { flex: 0 0 auto; }
@media (max-width: 1400px) { #btnFilter .tx { display: none; } }
@media (max-width: 760px) { #btnSearch { order: 4; } }
/* archive */
dialog.archview { max-width: 640px; } .archview pre.atext { white-space: pre-wrap; font: inherit; background: var(--panel); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.archview .acm { white-space: pre-wrap; border-left: 3px solid var(--border); padding: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0; font-size: var(--fs-md); } .archview h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-1); }
#archBox .hint { margin-bottom: var(--sp-2); }

.ui-btn.showmore { display: flex; width: 100%; margin: var(--sp-2) 0; border: 1px dashed var(--border); color: var(--muted); }   /* ui.button ghost */
@media (max-width: 1340px) { .attnbtn .atx.short { display: none; } }

/* Primary destinations stay labelled; secondary view icons stay compact and never move when selected. */
@media (max-width: 1440px) { #viewSw .ui-tab:not(.viewprimary) { padding-left: var(--sp-3); padding-right: var(--sp-3); } }

/* ---- setup wizard ---- */
.wiz { max-width: 600px; margin: var(--sp-8) auto; padding: var(--sp-8) 28px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.wiz h2 { margin: 0 0 var(--sp-4); } .wiz h3 { font-size: 15px; margin: 18px 0 var(--sp-3); }
.wdots { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 18px; counter-reset: wd; }
.wdots li { flex: 1; font-size: var(--fs-sm); color: var(--muted); padding-top: var(--sp-3); border-top: 3px solid var(--border); counter-increment: wd; }
.wdots li::before { content: counter(wd) ". "; } .wdots li.on { color: var(--accent); border-color: var(--accent); font-weight: 700; } .wdots li.done { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.wpick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.wcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); text-align: left; padding: 14px; border: 2px solid var(--border); border-radius: var(--r-xl); background: var(--panel); cursor: pointer; font: inherit; color: inherit; }
.wcard .wic { font-size: var(--fs-2xl); } .wcard .muted { font-size: var(--fs-base); line-height: 1.4; }
.wcard.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); } .wcard.on b::after { content: " ✓"; color: var(--accent); }
.wlabel { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-base); font-weight: 600; color: var(--muted); margin-top: 14px; } .wlabel input, .wlabel select { font-size: 15px; padding: 9px var(--sp-4); }
.wbig { display: inline-block; margin: var(--sp-2) 0 var(--sp-1); padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent) !important; font-weight: 700; text-decoration: none; }
.wmini { padding-left: var(--sp-7); margin: var(--sp-4) 0; } .wmini li { margin: 5px 0; }
.wchecks { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-md); }
.wfoot { display: flex; align-items: center; gap: var(--sp-3); margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); } .wfoot .spacer { flex: 1; }
.wfoot button[hidden] { display: none; } .wfoot .primary { padding: 9px 18px; } .wfoot .primary:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) { .wiz { margin: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-xl); } .wpick { grid-template-columns: 1fr; } }
body.setup header > *:not(.boardwrap):not(.hutils) { display: none !important; }
body.setup .hutils > *:not(#btnHelp):not(#btnSettings) { display: none !important; }
body.setup header { justify-content: flex-start; } body.setup .hutils { margin-left: auto; } body.setup #btnHelp { margin-left: auto; }
@media (max-width: 1000px) { body.setup header { display: flex; } body.setup .hutils { display: flex; padding: 0; border: 0; } body.setup .hutils > #btnHelp, body.setup .hutils > #btnSettings { display: inline-flex !important; } }

/* Settings → Agents & integrations → @claude: the guided "Connect Claude" steps */
.cwsteps { list-style: none; padding: 0; margin: var(--sp-4) 0 0; counter-reset: none; }
.cw { border-top: 1px solid var(--border); }
.cwh { display: flex; align-items: center; gap: var(--sp-4); width: 100%; background: none; border: 0; padding: var(--sp-4) 2px; text-align: left; font-size: var(--fs-md); color: var(--text); cursor: pointer; min-height: var(--touch); }
.cwh b { flex: 1; } .cwst { color: var(--ok); font-weight: 700; }
.cwn { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-base); font-weight: 700; background: var(--panel); color: var(--muted); flex: none; }
.cw.open .cwn { background: var(--accent); color: var(--on-accent); } .cw.done .cwn { background: var(--ok); color: var(--on-fill); } .cw.done:not(.open) .cwh b { color: var(--muted); font-weight: 600; }
.cwb { display: none; padding: 0 2px var(--sp-5) 34px; font-size: var(--fs-md); } .cw.open .cwb { display: block; } .cwb p { margin: var(--sp-1) 0 var(--sp-3); }
.cwfoot { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); } .cwfoot.left { justify-content: flex-start; }
.cprows { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.cprow { display: flex; align-items: center; gap: var(--sp-3); } .cprow > span { width: 86px; flex: none; color: var(--muted); font-size: var(--fs-base); font-weight: 600; }
.cprow code { flex: 1; min-width: 0; background: var(--panel); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); white-space: pre-wrap; word-break: break-word; }
.cprow code.clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agtools { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-1); }
.agtools .ui-tabs { flex-wrap: wrap; overflow: visible; }   /* the tool names are long: wrap rather than scroll */
#agToolBody .cprow { margin-top: var(--sp-2); }
@media (max-width: 520px) { .cwb { padding-left: var(--sp-1); } .cprow { flex-wrap: wrap; } .cprow > span { width: 100%; } }
.cwlogh { margin: 14px 0 var(--sp-1); font-size: var(--fs-base); } .cwlog { max-height: 260px; overflow: auto; } .cwlog .ui-check { border-bottom: 1px solid var(--border); } .cwlog .ui-check__fix { word-break: break-word; }
/* activity lines in the comment stream (for example "Claude started a session") */
.cmact { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-1) var(--sp-5); font-size: var(--fs-base); color: var(--muted); }
.cmact .cmacti { width: 20px; display: inline-flex; justify-content: center; } .cmact a { color: var(--accent); font-weight: 600; } .cmact time { margin-left: auto; }
.cmact.bad { color: var(--danger); }
/* the card's history between comments (kit v66): compact rows on a timeline line, like a GitHub pull request */
.cmhrun { display: flex; flex-direction: column; gap: var(--sp-1); margin-left: 13px; padding: var(--sp-1) 0 var(--sp-1) var(--sp-5); border-left: 2px solid var(--border); }
.cmhist { position: relative; display: flex; align-items: baseline; min-height: 22px; padding-top: 2px; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.cmhist .cmhicon { position: absolute; left: calc(-1 * var(--sp-5) - 12px); top: 1px; border: 2px solid var(--card); box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); }
.cmhist .cmhicon svg { width: 12px; height: 12px; }
.cmhist .cmhtext { flex: 1; min-width: 0; overflow-wrap: anywhere; } .cmhist .cmhtext b { color: var(--text); font-weight: 600; }
.cmhist time { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-xs, var(--fs-sm)); }
.cmhist.bad, .cmhist.bad .cmhicon { color: var(--danger); }
.cmhrun .cmhmore { align-self: flex-start; margin-left: calc(-1 * var(--sp-2)); }
#cmHistBtn:not(.on) { opacity: .6; }
/* new since the card was opened (kit v66) */
.cmnewpill { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 600; line-height: 16px; flex: 0 0 auto; }
.cmcard.cmnew { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cmhist.cmnew .cmhtext b, .cmhist.cmnew .cmhtext { color: var(--text); } .cmhist.cmnew .cmhicon { background: var(--accent-soft); color: var(--accent); }
.cmact.cmnew { color: var(--text); }
.cmnewbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-base); font-weight: 600; box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.cmnewbar[hidden] { display: none; } .cmnewbar span { flex: 1; } .cmnewbar button { min-height: 28px; padding: 0 var(--sp-5); }
.cmhead .cmsess { margin-left: auto; font-size: var(--fs-sm); color: var(--accent); text-decoration: none; font-weight: 600; }

/* ---- colour themes: 3 colours (paper, ink, hero) or 5 (+ surface, line) ------------------------------------------------
   Each theme sets 3 colours (paper, ink, hero) or 5 colours (paper, surface, line, ink, hero).
   One shared rule below derives every board token (--bg, --panel, --card, --border, --muted ...)
   from those colours, so a new theme, or a theme imported from a DESIGN.md file, is 3 to 5 lines.
   "custom" is a theme imported from a DESIGN.md file: designmd.js and theme.js set its colours on <html>. */

:root[data-theme="paper"] { --paper: #f7f4ed; --ink: #23201b; --hero: #c2410c; --on-hero: #ffffff; }  /* 3-colour: Warm paper, dark ink, one vermilion accent. */
:root[data-theme="mono"] { --paper: #ffffff; --ink: #0a0a0a; --hero: #0a0a0a; --on-hero: #ffffff; }  /* 3-colour: Black and white only. The accent is the ink. */
:root[data-theme="iris"] { --paper: #fcfcfd; --ink: #16181d; --hero: #5e6ad2; --on-hero: #ffffff; }  /* 3-colour: Cool white with a soft violet. Calm SaaS look. */
:root[data-theme="forest"] { --paper: #f3f5f0; --ink: #1c2a21; --hero: #2f7d4f; --on-hero: #ffffff; }  /* 3-colour: Pale sage, deep green ink, green accent. */
:root[data-theme="ember"] { --paper: #0f1012; --ink: #ececec; --hero: #f5a524; --on-hero: #0f1012; }  /* 3-colour: Near-black with an amber accent. */
:root[data-theme="ink"] { --paper: #111318; --ink: #e6e8ee; --hero: #8b9bff; --on-hero: #111318; }  /* 3-colour: Dark blue-black with a periwinkle accent. */
:root[data-theme="studio"] { --paper: #f4f4f5; --surface: #ffffff; --line: #d4d4d8; --ink: #18181b; --hero: #2563eb; --on-hero: #ffffff; }  /* 5-colour: Light grey page, white cards, mid-grey borders, black text, one blue. */
:root[data-theme="newsprint"] { --paper: #ece7dc; --surface: #fbf9f4; --line: #cbc1ad; --ink: #1a1a1a; --hero: #b91c1c; --on-hero: #ffffff; }  /* 5-colour: Newspaper cream with a red masthead accent. */
:root[data-theme="blueprint"] { --paper: #eaf0f8; --surface: #ffffff; --line: #c3cfe2; --ink: #0f1e3d; --hero: #c4410c; --on-hero: #ffffff; }  /* 5-colour: Cool blue page, navy ink, orange accent. */
:root[data-theme="graphite"] { --paper: #0b0b0c; --surface: #161618; --line: #2e2e33; --ink: #ededed; --hero: #3dd68c; --on-hero: #0b0b0c; }  /* 5-colour: Dark grey with a mint accent. Good for long sessions. */
/* Light packs and light custom themes: cards lift towards white; status colours. Dark packs: cards lift towards the ink. */
:root[data-theme="paper"],
:root[data-theme="mono"],
:root[data-theme="iris"],
:root[data-theme="forest"],
:root[data-theme="studio"],
:root[data-theme="newsprint"],
:root[data-theme="blueprint"],
:root[data-theme="custom"] {
  --lift: #ffffff; --lift-pct: 70%; --danger: #c8312b; --ok: #1d7f4e; --warn: #a96a00; color-scheme: light;
}
:root[data-theme="ember"],
:root[data-theme="ink"],
:root[data-theme="graphite"],
:root[data-theme="custom"][data-mode="dark"] {
  --lift: var(--ink); --lift-pct: 7%; --danger: #ff7a70; --ok: #4fd49c; --warn: #e8b33a; color-scheme: dark;
}
:root[data-theme="paper"],
:root[data-theme="mono"],
:root[data-theme="iris"],
:root[data-theme="forest"],
:root[data-theme="ember"],
:root[data-theme="ink"],
:root[data-theme="studio"],
:root[data-theme="newsprint"],
:root[data-theme="blueprint"],
:root[data-theme="graphite"],
:root[data-theme="custom"] {
  --bg: var(--paper);
  --panel: color-mix(in srgb, var(--ink) 5%, var(--paper));
  --card: var(--surface, color-mix(in srgb, var(--lift) var(--lift-pct), var(--paper)));
  --card-hover: color-mix(in srgb, var(--ink) 3%, var(--card));
  --header: var(--card);
  --text: var(--ink);
  --muted: color-mix(in srgb, var(--ink) 62%, var(--paper));
  --border: var(--line, color-mix(in srgb, var(--ink) 16%, var(--paper)));
  --accent: var(--hero);
  --accent-soft: color-mix(in srgb, var(--hero) 14%, var(--paper));
  --on-accent: var(--on-hero);
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-hover: 0 6px 16px color-mix(in srgb, var(--ink) 16%, transparent);
}
/* Mono: the accent is the ink, so give soft accents a neutral grey and keep links underlined. */
:root[data-theme="mono"] { --accent-soft: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
:root[data-theme="mono"] a { text-decoration: underline; }
:root[data-theme="mono"] .tag.label { background: var(--ink) !important; color: var(--paper); }   /* labels go monochrome too */

/* ---- icons: inline SVG line icons (Lucide), sized to the text around them ---- */
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.ico .i, header .ic .i { width: 1.2em; height: 1.2em; }
.pubicon .i { width: 52px; height: 52px; color: var(--danger); }
#sThemeMsg.err { color: var(--danger); }
@media (max-width: 520px) { .bwiz .wpick { grid-template-columns: 1fr; } }
.wadv { margin-top: var(--sp-5); font-size: var(--fs-base); } .wadv summary { cursor: pointer; color: var(--muted); } .wme { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--warn); font-weight: 600; margin-top: var(--sp-3); font-size: var(--fs-md); }

/* ---- layout packs --------------------------------------------------------------------------------------
   theme.js sets <html data-layout="dock|classic">. A pack only rearranges the same elements with CSS: board.js
   always renders one header and one #dock (toasts, including Undo, come from ui.toast and sit above the dock). To add a pack: add its name to LAYOUTS in theme.js,
   an option to #sLayout in index.html, and a :root[data-layout="name"] block below. */

/* Shared by every layout: Today's shortcut cards */
.todaygo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin: 2px 0 18px; }
.tgo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-5); align-items: center; text-align: left; padding: var(--sp-5) 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.tgo:hover:not(:disabled) { box-shadow: var(--shadow-hover); }
.tgo > svg:first-child { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--accent); }
.tgo > svg:last-child { grid-row: 1 / 3; grid-column: 3; width: 18px; height: 18px; color: var(--muted); }
.tgo .tgt { grid-column: 2; font-weight: 700; font-size: var(--fs-md); } .tgo .tgs { grid-column: 2; font-size: var(--fs-base); color: var(--muted); }
.kbwidgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 18px; }
.kbwidget { min-width: 0; padding: var(--sp-5) 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.kwwhead { display: flex; align-items: center; min-width: 0; margin-bottom: var(--sp-3); }
.kwwhead h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.kwwtasks { grid-column: 1 / -1; padding-block: var(--sp-4); }
.kwwtasks .kwwhead { margin-bottom: var(--sp-2); }
.kwwstrip { display: flex; gap: var(--sp-2); min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.kwwtask { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--sp-2); max-width: min(360px, 78vw); min-height: 34px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); color: var(--text); box-shadow: none; }
.kwwstrip.thin .kwwtask { min-height: 29px; padding-block: 3px; font-size: var(--fs-sm); }
.kwwtask:hover { border-color: var(--border-strong); background: var(--card-hover); }
.kwwnum { flex: 0 0 auto; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.kwwtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kwwmeta { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-xs); }
.kwwprio { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--warn); }
.kwwprio[data-prio="high"] { background: var(--danger); } .kwwprio[data-prio="low"] { background: var(--ok); }
.kwwweatherbody { display: flex; align-items: center; gap: var(--sp-5); min-height: 54px; }
.kwwweatherhero { display: flex; flex: 0 0 auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-xl); }
.kwwweathericon { font-size: 28px; line-height: 1; }
.kwwweatherdetail { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.kwwweathercontrols { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.kwwweather > .hint { font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.kwwweatherdetail > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwwmetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.kwwmetrics.five { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; } .kwwmetrics.five .kwwmetric { padding: var(--sp-2) var(--sp-1); } .kwwmetrics.five .kwwmetric span { white-space: normal; overflow-wrap: anywhere; }
.kwwmetric { min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--panel); text-align: center; }
.kwwmetric strong, .kwwmetric span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwwmetric strong { font-size: var(--fs-lg); } .kwwmetric span { color: var(--muted); font-size: var(--fs-xs); }
.kwwmetric.active strong { color: var(--accent); } .kwwmetric.warn strong { color: var(--danger); } .kwwmetric.good strong { color: var(--ok); }
.kwwactive { width: 100%; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); overflow: hidden; border: 0; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); box-shadow: none; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.kwwproblem { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--warn); border-radius: var(--r-md); color: var(--warn); font-size: var(--fs-sm); }
.kwwproblem svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 760px) { .kbwidgets { grid-template-columns: minmax(0, 1fr); } .kwwtasks { grid-column: auto; } .kwwmetrics, .kwwmetrics.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#dock { display: none; }

/* Dock: a one-row header (board, clients, attention, filters, bell) and a floating tab bar at the bottom with
   Today, Kanban, People, Find and Menu. Tapping the active tab again lists that group's other views. */
:root[data-layout="dock"] { --dock-h: 62px; --dock-top: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); --dock-clear: calc(var(--dock-top) + 16px); }
:root[data-layout="dock"] #viewSw, :root[data-layout="dock"] #btnSearch, :root[data-layout="dock"] #btnUndo,
:root[data-layout="dock"] .mobilemore, :root[data-layout="dock"] .hutils { display: none !important; }
:root[data-layout="dock"] header { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-3); }
:root[data-layout="dock"] .hfilters { display: flex; flex: 1 1 auto; align-items: center; gap: var(--sp-3); min-width: 0; padding-top: 0; border-top: 0; }
:root[data-layout="dock"] .hfilters .clientwrap { flex: 1 1 auto; min-width: 0; }
:root[data-layout="dock"] #boardBtn { position: relative; }
:root[data-layout="dock"] #boardBtn[data-status="err"]::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); border: 2px solid var(--header); }
.subnav { display: none; }
:root[data-layout="dock"] .subnav:not([hidden]) { display: flex; flex: 0 0 auto; align-self: flex-start; margin: var(--sp-4) 18px 0; max-width: calc(100% - 24px); }   /* holds a ui.tabs (segmented) */
.subnav .ui-tab { flex: 1 1 auto; -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) { :root[data-layout="dock"] .subnav:not([hidden]) { align-self: stretch; margin: var(--sp-3) var(--sp-5) 0; } .subnav .ui-tabs { width: 100%; } }
:root[data-layout="dock"] #board { padding-bottom: var(--dock-clear); }
:root[data-layout="dock"] body.cinema #board { padding-bottom: 0; }
:root[data-layout="dock"] body.cinema .cinema-col .cards { padding-bottom: var(--dock-clear); }
:root[data-layout="dock"] .fab { bottom: calc(var(--dock-top) + 12px); }   /* "Add a task" sits above the dock, not on it */
:root[data-layout="dock"] #dock { display: flex; justify-content: center; position: fixed; z-index: var(--z-dock); left: 0; right: 0; bottom: 0; height: var(--dock-top); padding: 0 var(--sp-2) env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--border); background: var(--header); box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
:root[data-layout="dock"] body:has(#board.v-welcome) #dock { display: none; }
#dock .dtab { flex: 1 1 0; max-width: 112px; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 3px; padding: var(--sp-1) 2px; border: 0; border-radius: var(--r-xl); background: transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
#dock .dtab[hidden] { display: none; }
#dock .dtab svg { width: 22px; height: 22px; padding: var(--sp-1) var(--sp-6); box-sizing: content-box; border-radius: var(--r-pill); transition: background .15s; }
@media (hover: hover) { #dock .dtab:hover:not(.on) { color: var(--text); } #dock .dtab:hover:not(.on) svg { background: var(--panel); } }
#dock .dtab:focus:not(:focus-visible) { outline: none; }
#dock .dtab.on { color: var(--accent); } #dock .dtab.on svg { background: var(--accent-soft); }
#dock .dockpop { position: absolute; top: auto; left: auto; right: 8px; bottom: calc(100% + 8px); transform: none; width: 240px; max-width: calc(100vw - 16px); padding: var(--sp-2); }
#dock .dockpop button { -webkit-tap-highlight-color: transparent; width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 9px; border: 0; border-radius: var(--r-md); background: transparent; padding: var(--sp-4); color: var(--text); }
#dock .dockpop button:hover { background: var(--panel); } #dock .dockpop button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#dock .dockpop svg { width: 17px; height: 17px; }
.dockstatus { margin-top: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-1); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.dockstatus.err { color: var(--danger); font-weight: 600; }
@media (max-width: 760px) {
  /* the dock sits on top of fixed popovers: stop them above it and let them scroll (a long Filters list was unreachable) */
  :root[data-layout="dock"] .popover { top: 64px; max-height: calc(100vh - 64px - var(--dock-clear)); max-height: calc(100dvh - 64px - var(--dock-clear)); }
  :root[data-layout="dock"] body[data-view="board"] #board, :root[data-layout="dock"] body[data-view="list"] #board { padding-bottom: calc(var(--dock-top) + 84px); }   /* clear of the dock and the "Add a task" button */
  :root[data-layout="dock"] #dock .dockpop { top: auto; max-height: calc(100vh - var(--dock-top) - 80px); max-height: calc(100dvh - var(--dock-top) - 80px); }
}
header .cpillgo { min-width: 0; min-height: 0; padding: 0; }   /* the 40px phone tap size is for the pill, not the details icon inside it */

/* ---- "Show me around" tour: a dimmed screen with one highlighted part and a tip next to it ---------------- */
.tour { position: fixed; inset: 0; z-index: var(--z-dialog); }
.tour[hidden], .tourring[hidden] { display: none; }
.tour.dim { background: rgba(10, 15, 25, .55); }
.tourring { position: fixed; pointer-events: none; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(10, 15, 25, .55); transition: left .2s, top .2s, width .2s, height .2s; }
.tourtip { position: fixed; display: grid; gap: var(--sp-3); padding: var(--sp-6); border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.tourtip.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 24px)); }
.tourtip h3 { margin: 0; font-size: var(--fs-lg); text-wrap: balance; }
.tourtip p { margin: 0; color: var(--muted); line-height: 1.5; }
.tourfoot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-1); }
.tourfoot span { flex: 1; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.tourfoot button[hidden] { display: none; }
#tourSkip { border: 0; background: transparent; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tourring { transition: none; } }
.tourinvite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: 2px 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--accent-soft); }
.tourinvite > svg { color: var(--accent); width: 20px; height: 20px; flex: 0 0 auto; }
.tourinvite .ti { flex: 1 1 200px; font-weight: 600; }
.tourinvite .tix { border: 0; background: transparent; color: var(--muted); padding: var(--sp-1); display: inline-grid; place-items: center; }
.htour { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-5); color: var(--muted); }

/* Settings → Labels editor */
.lbled { margin-top: var(--sp-2); } .lbrows { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.lbrow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .lbrow input:not([type=color]) { flex: 1 1 120px; min-width: 0; }
.lbrow input[type=color] { width: 36px; min-width: 36px; height: 32px; padding: 2px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); cursor: pointer; }
.lbprev { flex: 0 0 auto; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbcnt { font-size: var(--fs-sm); white-space: nowrap; }
.lbdel { margin-left: auto; color: var(--danger); } .lbnew { padding-top: var(--sp-1); border-top: 1px dashed var(--border); }
@media (max-width: 520px) { .lbprev { display: none; } }

.memlist { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.memrow { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.memhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .memhead input { flex: 1 1 140px; min-width: 0; font-weight: 600; }
.memwhy { flex: 1 1 100%; margin: 0; }
.memtags { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.memmail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; } .memmail .ui-pill { max-width: 100%; overflow-wrap: anywhere; }
.memrow .ui-props__value input { width: 100%; max-width: 22rem; min-width: 0; }
.collist { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); } .colrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .colrow input { flex: 1 1 80px; min-width: 0; } .colrow .colcount { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; } .colrow .colmove { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); } .colrow .colmove select { flex: 1 1 140px; min-width: 0; }
.coladd { display: flex; gap: var(--sp-2); } .coladd input { flex: 1; min-width: 0; }

/* ---- utilities (last, so they win over a component's own margin) --------------------------------------------------
   Spacing utilities are numbered by --sp step: .mt-0 = no top margin. */
.mt-0 { margin-top: 0; } .fs-base { font-size: var(--fs-base); }

/* ---- Review Inbox (kit v41) ---------------------------------------------------------------------------------- */
#board.v-inbox { display: block; overflow-y: auto; padding: var(--sp-6, 16px) 18px 60px; }
.inbox { max-width: 860px; margin: 0 auto; }
.inbox__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inbox__head h2 { margin: 0; font-size: var(--fs-xl); }
.inbox__count { color: var(--muted); }
.inbox__hint { margin: 6px 0 12px; }
.inbox__filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 20px 0; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 10px); }
.inbox__filter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.inbox__filter select { min-height: 36px; }
.inbox__group { margin: 0 0 22px; }
.inbox__src { font-size: var(--fs-lg); margin: 0 0 8px; overflow-wrap: anywhere; line-height: 1.4; }
.inbox__technical { color: var(--muted); font-size: var(--fs-sm); margin: 8px 0 16px; overflow-wrap: anywhere; }
.inbox__technical summary, .prop__context summary { cursor: pointer; padding: 8px 0; }
.prop__context { margin-top: 6px; color: var(--muted); }
.prop__context div { white-space: pre-wrap; max-height: 240px; overflow: auto; padding: 8px; background: var(--bg); border-radius: var(--r-sm, 6px); }
.prop__changes h5 { font-size: var(--fs-sm); margin: 20px 0 8px; }
.inbox__gcount { color: var(--muted); font-weight: 400; }
.inbox__srclink { font-size: var(--fs-sm); }
.inbox__run { font-size: var(--fs-sm); font-weight: 600; margin: 10px 0 6px; }
.inbox__list { display: grid; gap: 10px; }
.prop { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 10px); padding: 20px; min-width: 0; }
.prop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inbox .ui-btn--ghost { color: var(--text); }
.prop > .ui-btn { text-align: left; white-space: normal; height: auto; overflow-wrap: anywhere; }
.prop--accepted, .prop--ignored { opacity: .85; }
.prop__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop__title { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.prop__for, .prop__reason, .prop__evidence, .prop__decision { margin: 6px 0 0; overflow-wrap: anywhere; }
.prop__meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 8px 0 0; font-size: var(--fs-sm); }
.prop__meta dt { color: var(--muted); }
.prop__meta dd { margin: 0; overflow-wrap: anywhere; }
.prop__flags { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.propflag { background: var(--warn-soft); color: var(--text); border-radius: var(--r-sm, 6px); padding: 4px 8px; font-size: var(--fs-sm); }
.proptbl { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: var(--fs-sm); table-layout: fixed; }
.proptbl th, .proptbl td { text-align: left; vertical-align: top; padding: 4px 6px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.proptbl thead th { color: var(--muted); font-weight: 600; border-top: 0; }
.proptbl tbody th { width: 22%; font-weight: 600; }
.propchanged { background: var(--accent-soft); }
.prop__approval { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.prop__plan { margin: 8px 0 4px; padding: 8px 12px; border-left: 3px solid var(--accent, #3b6cf6); background: var(--surface-2, rgba(59,108,246,.06)); border-radius: 6px; font-weight: 600; }
.prop__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* kit v44: questions (ask.*) answered in the Inbox and on Today */
.ask { display: grid; gap: 8px; margin-top: 8px; }
.ask__q { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ask__subject { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.ask__subject p { margin: 0; overflow-wrap: anywhere; }
.ask__links { margin: 0; padding-left: 18px; font-size: var(--fs-sm); }
.ask__link { overflow-wrap: anywhere; }
.ask__answers { display: flex; flex-wrap: wrap; gap: 8px; }
.ask__other { display: flex; gap: 8px; align-items: flex-start; }
.ask__other input, .ask__other textarea { flex: 1 1 auto; min-height: 36px; min-width: 0; box-sizing: border-box; }
.ask__note { min-height: 36px; width: 100%; box-sizing: border-box; }
/* kit v71: recommended option, lapsed questions, press results */
.ask__rec { margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; font-size: var(--fs-xs, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.prop__lapsed { margin: 6px 0 0; padding: 6px 10px; background: var(--warn-soft); border-radius: var(--r-sm, 6px); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.prop__press { margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.prop__press--ok { color: var(--ok); }
.prop__press--err { color: var(--danger); }
.inbox__bulklist { max-height: 50vh; overflow-y: auto; margin: 0 0 8px; padding-left: 22px; display: grid; gap: 6px; overflow-wrap: anywhere; }
.inbox__bulkq { font-weight: 600; }
.inbox__bulkwhy { display: block; font-size: var(--fs-sm); color: var(--muted); }
.inbox__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: var(--fs-sm); }
.propform { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.propform__row { display: grid; gap: 4px; font-size: var(--fs-sm); }
.propform__row input, .propform__row select, .propform__row textarea { min-height: 36px; width: 100%; box-sizing: border-box; }
.propform__fields { border: 1px solid var(--border); border-radius: var(--r-sm, 6px); padding: 6px 10px; display: grid; gap: 4px; }
.propform__chk { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.propform__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.propconf__pick { display: inline-flex; gap: 4px; margin-right: 8px; white-space: nowrap; }
#btnInbox { position: relative; }
#btnInbox.on { color: var(--accent); }
@media (max-width: 640px) {
  #board.v-inbox { padding: var(--sp-3, 8px) 12px 90px; }
  .prop__actions .ui-btn { min-height: var(--touch, 44px); flex: 1 1 auto; }
  .inbox__filters { display: grid; grid-template-columns: 1fr 1fr; }
  .inbox__filter { display: grid; }
  .inbox__filter select { min-height: 44px; width: 100%; }
  .prop { padding: 16px; }
  .proptbl thead { display: none; }
  .proptbl tr, .proptbl tbody, .proptbl th, .proptbl td { display: block; width: auto; }
  .proptbl tbody th { width: auto; padding-top: 14px; }
  .proptbl td { border: 0; padding: 8px 6px; }
  .proptbl td::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--fs-xs); margin-bottom: 4px; }
}
/* Today → To review (Review Inbox) */
.treview__hint { margin: 0 0 12px; font-size: var(--fs-sm); }
#board.v-today { overflow-anchor: none; } /* Explicit review anchors own restoration when the view is rebuilt. */
.treview .trow { content-visibility: visible; contain-intrinsic-size: none; } /* Five reviewed rows need their real height, including offscreen expanded evidence. */
.treview .trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 10px); flex-wrap: wrap; }
.trow__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.trow__text { display: grid; min-width: 0; flex: 1 1 220px; }
.trow__title { overflow-wrap: anywhere; font-weight: 600; }
.trow__meta { font-size: var(--fs-sm); margin-top: 4px; }
.trow__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.trow__foot { padding-top: 8px; }
.treview .trow > .prop { flex: 1 1 100%; width: 100%; margin: 4px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 16px 0 0; background: transparent; }
.treview .trow > .prop > .prop__top { display: none; } /* The parent preview already names this proposal. */
@media (max-width: 640px) { .trow__acts .ui-btn { min-height: var(--touch, 44px); } .trow__text { flex-basis: 100%; } .trow__acts { width: 100%; } .trow__acts .ui-btn { flex: 1; } }

/* Review Inbox count on the Today tab (header strip and phone dock) */
#viewSw .ui-tab[data-view="today"], #dock .dtab[data-grp="today"] { position: relative; }
#viewSw .ui-tab .todaycount, #dock .dtab .todaycount { top: 1px; right: 1px; }   /* inside the tab: the narrow header strip clips anything above it (header .badge would win otherwise) */

/* Pull requests panel (#dlgPrs): rows of linked pull requests with their live state */
.prsdialog > p { margin: var(--sp-4) 0; }
.prsbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.prgroup { margin-bottom: var(--sp-7); } .prgroup h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); } .prhint { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.prrow { padding: var(--sp-4) 0; border-top: 1px solid var(--border); display: grid; gap: var(--sp-3); }
.prtop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.prtitle { font-weight: 600; overflow-wrap: anywhere; } .prref { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.prtags, .prcards { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.prnote { margin: 0; font-size: var(--fs-sm); }
.prcard { max-width: 100%; text-align: left; overflow-wrap: anywhere; }
/* Today: Prep for call brief */
.tprep__bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.tprep__h { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-base); }
.tprep__h svg { width: 16px; height: 16px; color: var(--accent); } .tprep__h .muted { font-weight: 400; }
.tprep__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tprep__row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: transparent; border: 0; min-height: 44px; }
.tprep__row:hover, .tprep__row:focus-visible { background: var(--card-hover); }
.tprep__row b { font-weight: 600; overflow-wrap: anywhere; } .tprep__row .muted { font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* related cards (kit v52): possible duplicates and confirmed links, in the drawer and as a card chip */
.chip.relchip { display: inline-flex; align-items: center; gap: 3px; color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.chip.fupchip { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.drel { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.drel:last-child { border-bottom: 0; }
.drel__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drel__title { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.drel__title:hover, .drel__title:focus-visible { text-decoration: underline; }
.drel__acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* Markdown in descriptions and comments (kit v62): rendered blocks, the Raw/Formatted switch and the editor's Write/Preview bar */
.descview.md, .cmbody.md, .cmcard .cmbody.md { white-space: normal; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md .mdp { margin: 0 0 var(--sp-3); }
.md .mdh { margin: var(--sp-4) 0 var(--sp-2); line-height: 1.3; font-weight: 650; }
.md .mdh1 { font-size: 1.2em; } .md .mdh2 { font-size: 1.1em; } .md .mdh3, .md .mdh4, .md .mdh5, .md .mdh6 { font-size: 1em; }
.md .mdlist { margin: 0 0 var(--sp-3); padding-left: 1.4em; } .md .mdlist .mdlist { margin: var(--sp-1) 0 0; }
.md .mdlist li { margin: 2px 0; } .md li.mdtask { list-style: none; margin-left: -1.3em; } .md li.mdtask input { margin: 0 .35em 0 0; vertical-align: -1px; }
.md .mdquote { margin: 0 0 var(--sp-3); padding: 0 0 0 var(--sp-4); border-left: 3px solid var(--border); color: var(--muted); }
.md code { font-family: var(--font-mono); font-size: .9em; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.md .mdpre { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); overflow-x: auto; background: color-mix(in srgb, var(--text) 6%, transparent); white-space: pre; }
.md .mdpre code { padding: 0; background: none; }
.md .mdhr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }
.md .mdtable { overflow-x: auto; margin: 0 0 var(--sp-3); } .md table { border-collapse: collapse; font-size: .95em; }
.md th, .md td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; vertical-align: top; } .md th { font-weight: 650; background: color-mix(in srgb, var(--text) 4%, transparent); }
.descacts { display: inline-flex; gap: var(--sp-1); align-items: center; }
.mdbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.mdtabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-sm); background: var(--panel); }
.mdtab { border: 0; background: none; padding: 4px 10px; border-radius: 5px; font-size: var(--fs-base); color: var(--muted); cursor: pointer; min-height: 30px; }
.mdtab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mdtools { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.mdtool { border: 1px solid transparent; background: none; min-width: 30px; min-height: 30px; padding: 2px 7px; border-radius: 5px; font-size: var(--fs-base); color: var(--text); cursor: pointer; font-weight: 600; }
.mdtool:hover, .mdtab:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } .mdtool:focus-visible, .mdtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mdprev { min-height: 110px; }
.cmlinkadd { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0 var(--sp-3) var(--sp-3); } .cmlinkbtn { max-width: 100%; color: var(--muted); }

/* ---- Automations page (kit v70, #view=automations): one card per pack, with an n8n-style node diagram ---------------- */
#board.v-automations { display: block; overflow-y: auto; padding: var(--sp-6) 18px 60px; }
.autos { max-width: 1080px; margin: 0 auto; }
.autos__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4); }
.autos__head h2 { margin: 0; font-size: var(--fs-2xl); letter-spacing: -.01em; }
.autos__count { color: var(--muted); font-size: var(--fs-md); }
.autos__tools { margin-left: auto; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.autos__hint { color: var(--muted); max-width: 72ch; margin: var(--sp-3) 0 var(--sp-6); line-height: 1.5; }
.autos__note { margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--accent-soft); color: var(--text); font-size: var(--fs-md); }
.autos__list { display: grid; gap: var(--sp-3); }
.autorow, .runnerbox { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding-right: var(--sp-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); transition: box-shadow .15s, border-color .15s; }
.autorow:hover, .runnerbox:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.autorow__open { flex: 1; display: flex; align-items: center; gap: var(--sp-5); min-width: 0; min-height: 64px; padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-6); text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-radius: var(--r-lg); cursor: pointer; }
.autorow__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.runnerbox { margin-bottom: var(--sp-5); }
.autocard__blocked { margin-top: var(--sp-4); }
.autocard__head .autoswitch { margin-left: auto; }   /* the switch sits at the end of the head, its own size (ui.css) */
.runnercheck { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.autorow .autocard__icon, .runnerbox .autocard__icon { width: 40px; height: 40px; }
.autorow__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.autorow__text h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.autorow__summary { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.autorow__state, .runnerbox__state { flex: 0 0 auto; }
.autorow__open > svg:last-child { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }
.autocard.autocard--sheet { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.autocard.autocard--sheet:hover { box-shadow: none; }
.autocard { container-type: inline-size; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: var(--sp-7); transition: box-shadow .15s; }
.autocard:hover { box-shadow: var(--shadow-hover); }
.autocard__head { display: flex; align-items: center; gap: var(--sp-5); }
.autocard__icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent); }
.autocard__icon svg { width: 22px; height: 22px; }
.autocard__name { flex: 1; min-width: 0; }
.autocard__name h3 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.autocard__scope { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; overflow-wrap: anywhere; }
.autocard__state { flex: 0 0 auto; }
.autocard__summary { margin: var(--sp-5) 0 0; font-size: var(--fs-md); line-height: 1.5; overflow-wrap: anywhere; }
.autocard__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.autocard__fact { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-3); border-radius: var(--r-pill); background: var(--panel); color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.autocard__fact svg { width: 13px; height: 13px; flex: 0 0 auto; }
.autocard__never { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; color: var(--ok); font-size: var(--fs-sm); }
.autocard__never svg { width: 14px; height: 14px; flex: 0 0 auto; }
.autocard__status { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--panel); }
.autocard__status p { margin: 0; } .autocard__status p + p { margin-top: var(--sp-1); }
.autocard__run { font-weight: 600; overflow-wrap: anywhere; }
.autocard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.autocard__actions button { min-height: 36px; }
.autocard__link { margin-left: auto; color: var(--accent); font-size: var(--fs-sm); }
.autocard > .hint { overflow-wrap: anywhere; }

/* The flow diagram: vertical on narrow cards, a row of connected nodes on wide ones. Each kind has its own colour. */
.aflow { list-style: none; margin: var(--sp-6) 0 0; padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); border: 1px dashed var(--border);
  background-color: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--muted) 30%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.aflow__node { --k: var(--muted); position: relative; display: flex; gap: var(--sp-5); align-items: flex-start; padding-bottom: var(--sp-6); min-width: 0; }
.aflow__node:last-child { padding-bottom: 0; }
.aflow__node[data-kind="trigger"] { --k: var(--warn); } .aflow__node[data-kind="read"] { --k: var(--accent); }
.aflow__node[data-kind="check"] { --k: var(--muted); } .aflow__node[data-kind="agent"] { --k: #8b5cf6; } .aflow__node[data-kind="output"] { --k: var(--ok); }
.aflow__node:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 2px; background: color-mix(in srgb, var(--k) 45%, var(--border)); }
.aflow__icon { position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-lg);
  background: var(--card); color: var(--k); border: 2px solid var(--k); box-shadow: var(--shadow); }
.aflow__node[data-kind="trigger"] .aflow__icon { border-radius: 22px var(--r-lg) var(--r-lg) 22px; }   /* n8n draws a trigger with a round left side */
.aflow__icon svg { width: 20px; height: 20px; }
.aflow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.aflow__kind { color: var(--k); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.aflow__title { font-size: var(--fs-md); overflow-wrap: anywhere; }
.aflow__text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
@container (min-width: 620px) {
  .aflow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 28px; padding: var(--sp-7) var(--sp-5); }
  .aflow__node { flex-direction: column; align-items: center; text-align: center; padding-bottom: 0; }
  .aflow__node:not(:last-child)::after { left: calc(50% + 26px); right: auto; top: 21px; bottom: auto; width: calc(100% + 28px - 52px); height: 2px; }
  .aflow__node:not(:first-child)::before { content: ''; position: absolute; top: 17px; left: calc(50% - 31px); border: 5px solid transparent; border-left: 7px solid color-mix(in srgb, var(--k) 70%, var(--border)); }
  .aflow__body { align-items: center; }
}
@media (max-width: 760px) {
  #board.v-automations { padding: var(--sp-3) var(--sp-5) 90px; }
  .autocard { padding: var(--sp-6); }
  .autocard.autocard--sheet { padding: 0; }
  .autorow, .runnerbox { padding-right: var(--sp-4); }
  .autorow__open { padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-5); gap: var(--sp-4); }
  .autorow .autocard__icon, .runnerbox .autocard__icon { width: 36px; height: 36px; }
  .autos__tools { margin-left: 0; }
  .autocard__head { flex-wrap: wrap; }
  .autocard__link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .autocard, .autorow, .runnerbox { transition: none; } }

/* Review Inbox: a Markdown field (a card's details) renders as it will on the card (card #181) */
.proptbl td.propmd > :first-child { margin-top: 0; } .proptbl td.propmd > :last-child { margin-bottom: 0; }
.proptbl td.propmd .mdh { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-2); }