/* Design tokens, lifted verbatim from the approved prototype.
   Retyped once from memory and the palette came out cool and corporate when the
   original is warm — ground #f6f5f3 not #f6f7f9, ink #1a1916 not #16191d. That one
   difference made the whole application feel wrong, so these are copied, not
   reinterpreted. Change them here and the app re-skins from one place. */

:root{
  color-scheme:light;
  /* Typography is tokenised so the whole app re-skins from one place. The Font
     control in the top bar is a prototype aid for choosing these — it would not
     ship; whichever pairing wins simply becomes the default here. */
  --font-display:Inter,"Segoe UI",sans-serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ground:#f6f5f3;
  --surface:#ffffff;
  --surface-2:#efedea;
  --line:#dedad4;
  --line-soft:#eae7e2;
  --ink:#1a1916;
  --ink-2:#55514a;
  --ink-3:#847e75;
  --heat:#e2560d;
  --heat-soft:#fdeadf;
  --on-heat:#ffffff;
  --on-accent:#14151a;
  --cool:#0d7ba6;
  --today:#0a5fd6;
  --scrim:rgba(26,25,22,.45);
  /* Furnace sections. These point at existing hues rather than new literals, so
     they follow the palette into dark mode without a second set of values. */
  --f-brain:var(--s-hold);      /* purple */
  --f-active:var(--s-done);     /* green  */
  --f-forged:var(--heat);       /* orange — the forge's own colour */
  --f-archived:var(--s-stuck);  /* red    */
  /* width of the timeline's task-name column; the rows add a 5px bucket rail
     on top of it, which is what --lane-off accounts for */
  --lane-w:270px;
  --lane-off:calc(var(--lane-w) + 5px);
  /* vivid fills — used for bars, rails, dots and chips.
     Anywhere one of these is TEXT it is mixed toward --ink, so it stays readable
     in both themes without dulling the fills. */
  --s-notstarted:#a3a8b0;
  --s-progress:#2f80ed;
  --s-done:#00c875;
  --s-stuck:#ff3d57;
  --s-hold:#a259ff;
  --b-infra:#2f80ed;
  --b-sec:#e8368f;
  --b-imp:#00b894;
  --b-innov:#f97316;
  --b-other:#8892a6;
  --radius:10px;
  --shadow:0 1px 2px rgba(26,25,22,.06),0 4px 14px rgba(26,25,22,.05);
  --shadow-lg:0 10px 40px rgba(26,25,22,.16),0 2px 8px rgba(26,25,22,.08);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#14151a;
    --surface:#1c1e24;
    --surface-2:#252830;
    --line:#333740;
    --line-soft:#2a2d35;
    --ink:#eceae6;
    --ink-2:#adaaa3;
    --ink-3:#8f8b83;
    --heat:#ff8038;
    --heat-soft:#3f2312;
    --on-heat:#1c0e03;
    --on-accent:#14151a;
    --cool:#45b4dd;
    --today:#6fb0ff;
    --scrim:rgba(0,0,0,.66);
    --s-notstarted:#aeb3bb;
    --s-progress:#4d97ff;
    --s-done:#1ed98c;
    --s-stuck:#ff5c6b;
    --s-hold:#b478ff;
    --b-infra:#4d97ff;
    --b-sec:#ff5fae;
    --b-imp:#1fd3ab;
    --b-innov:#ff8f3d;
    --b-other:#9aa5bd;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --shadow-lg:0 10px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#14151a;
  --surface:#1c1e24;
  --surface-2:#252830;
  --line:#333740;
  --line-soft:#2a2d35;
  --ink:#eceae6;
  --ink-2:#adaaa3;
  --ink-3:#8f8b83;
  --heat:#ff8038;
  --heat-soft:#3f2312;
  --on-heat:#1c0e03;
  --on-accent:#14151a;
  --cool:#45b4dd;
  --today:#6fb0ff;
  --scrim:rgba(0,0,0,.66);
  --s-notstarted:#aeb3bb;
  --s-progress:#4d97ff;
  --s-done:#1ed98c;
  --s-stuck:#ff5c6b;
  --s-hold:#b478ff;
  --b-infra:#4d97ff;
  --b-sec:#ff5fae;
  --b-imp:#1fd3ab;
  --b-innov:#ff8f3d;
  --b-other:#9aa5bd;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --shadow-lg:0 10px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
}

/* The browser's own rule for [hidden] is display:none, but ANY author rule setting
   display beats it — and .backdrop sets display:flex. Without this the modal is visible
   on load and closeModal() silently does nothing, because setting .hidden = true has no
   effect on something CSS has already told to be a flex container. Lifted from the
   prototype, which has it for exactly this reason. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.25; }
button { font: inherit; }
code { font-family: var(--font-mono); font-size: .92em; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--heat); border-color: var(--heat); color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.lg { font-size: 15px; padding: 12px 22px; }
.btn.sm { font-size: 12.5px; padding: 6px 11px; }
.btn:disabled { opacity: .6; cursor: default; }

.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }

/* ---------- the gate: sign in, not authorised, error ---------- */
.gate {
  max-width: 480px; margin: 14vh auto; padding: 36px 32px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--heat); border-radius: var(--radius);
  box-shadow: var(--shadow); text-align: center;
}
.gate-mark {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--heat); border: 1px solid var(--line); border-radius: 5px;
  padding: 4px 9px; margin-bottom: 18px;
}
.gate-mark.warn { color: var(--s-stuck); }
.gate h1 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.gate .lede { color: var(--ink-2); font-size: 14.5px; margin: 0 0 22px; }
.gate .btn { margin: 0 4px; }
.gate .foot { color: var(--ink-3); font-size: 12.5px; margin: 20px 0 0; }
.gate-detail {
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; margin-bottom: 20px;
}
.gate-detail .k {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.gate-detail code { font-size: 13px; color: var(--ink); word-break: break-all; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 22px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.brand {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--ink); background: none; border: 0; cursor: pointer; padding: 0;
}
.modnav { display: flex; gap: 2px; flex-wrap: wrap; }
.modnav button {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: none; border: 0; border-radius: 7px;
  padding: 7px 12px; cursor: pointer;
}
.modnav button:hover { background: var(--surface-2); color: var(--ink); }
.modnav button[aria-current="page"] { background: var(--heat-soft); color: var(--heat); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.whoami { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--s-notstarted); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.who-text { display: flex; flex-direction: column; line-height: 1.25; }
.who-text .nm { font-size: 13px; font-weight: 600; }
.who-text .sub { font-size: 11px; color: var(--ink-3); }

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 26px 22px 60px; }
.hero h1 { font-size: 28px; font-weight: 700; }
.hero .lede { color: var(--ink-2); font-size: 15px; margin: 6px 0 0; }

.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h2 { font-size: 24px; font-weight: 700; }
.page-head p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }

/* ---------- module cards ---------- */
.mod-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 26px;
}
.mod-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--rail, var(--heat)); border-radius: var(--radius);
  padding: 20px 18px; text-align: left; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mod-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mod-card h3 { font-size: 18px; font-weight: 700; }
.mod-card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.mod-card .meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  margin-top: auto; padding-top: 6px;
}
.pill {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px; margin-left: 8px; vertical-align: 3px;
}

/* ---------- empty state ---------- */
.empty {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 44px 16px; text-align: center; color: var(--ink-3);
}
.empty h4 { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.empty p { margin: 0 auto; max-width: 46ch; font-size: 13.5px; }

@media (max-width: 640px) {
  .topbar { padding: 10px 16px; }
  .wrap { padding: 20px 16px 48px; }
  .who-text { display: none; }
  .gate { margin: 6vh 16px; padding: 28px 20px; }
}


/* ====== The Forge Floor ======
   Colour pairs and table rules taken from the approved prototype rather than
   rewritten. The first attempt reinterpreted them — pale inset chips instead of
   filled cells, headings repeated inside every bucket instead of one pinned row —
   and the result did not read like the design Jag signed off. ====== */

/* Priority colours, matching the label colours on the Monday board. Dark
   foreground on every one, so all four stay legible in light and dark.
   Shared by the filled table cell and the chip used on Furnace cards. */
.p-low{--pbg:#ffc400;--pfg:#3a2c00}
.p-medium{--pbg:#00c875;--pfg:#02341f}
.p-important,.p-high{--pbg:#58a6ff;--pfg:#06254d}
.p-urgent,.p-critical{--pbg:#ff5c69;--pfg:#4d0007}

/* Status fills, same treatment as priority and the same hues as the timeline
   bars and kanban, so one status reads the same colour everywhere. */
.st-notstarted{--sbg:#c9ccd2;--sfg:#2b2e33}
.st-inprogress{--sbg:#4d97ff;--sfg:#05224d}
.st-done{--sbg:#00c875;--sfg:#02341f}
.st-stuck{--sbg:#ff5c69;--sfg:#4d0007}
.st-onhold{--sbg:#b478ff;--sfg:#2a0b52}

/* ---------- table: one colour-coded section per bucket ---------- */
.tablewrap{overflow-x:auto;padding-bottom:4px}
.bucket-stack{display:flex;flex-direction:column;gap:16px}
/* Same trick as the timeline: the column headings live outside the container
   that scrolls sideways, so they can actually pin to the page. */
.th-headwrap{position:sticky;z-index:20;overflow:hidden;
  top:calc(env(safe-area-inset-top,0px) + var(--topbar-h,52px));
  background:var(--ground);padding-top:10px;margin-bottom:12px;
  border-bottom:1px solid var(--line)}
table.col-head,table.bucket-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:14px}
table.col-head th{text-align:center;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  padding:0 10px 7px;font-weight:600}
.bucket-card{background:var(--surface);border:1px solid var(--line);
  border-left:5px solid var(--rail);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.bucket-head{display:flex;align-items:center;gap:11px;padding:11px 14px;
  background:color-mix(in srgb,var(--rail) 15%,var(--surface));
  border-bottom:1px solid color-mix(in srgb,var(--rail) 30%,var(--line))}
.bucket-head h3{font-family:var(--font-display);font-size:14.5px;font-weight:700;letter-spacing:-.005em;
  color:color-mix(in srgb,var(--rail) 74%,var(--ink))}
.bucket-head .count{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}
.bucket-head .addbtn{margin-left:auto}
.chev{width:22px;height:22px;border-radius:5px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:inherit;flex:none;padding:0}
.chev:hover{background:color-mix(in srgb,var(--rail) 22%,transparent)}
.chev svg{width:12px;height:12px;transition:transform .15s ease}
.is-collapsed .chev svg{transform:rotate(-90deg)}
.bucket-card.is-collapsed .bucket-head{border-bottom:0}
.addbucket{border:1px dashed var(--line);border-radius:var(--radius);background:none;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-3);
  padding:14px;cursor:pointer;text-align:center}
.addbucket:hover{color:color-mix(in srgb,var(--heat) 84%,var(--ink));border-color:var(--heat);
  background:color-mix(in srgb,var(--heat) 5%,transparent)}
.swatchrow{display:flex;flex-wrap:wrap;gap:8px}
.swatchrow button{width:30px;height:30px;border-radius:8px;cursor:pointer;padding:0;
  border:2px solid transparent;background:var(--sw);opacity:.5}
.swatchrow button:hover{opacity:.85}
.swatchrow button.on{opacity:1;border-color:color-mix(in srgb,var(--ink) 60%,transparent)}
.bucket-empty{padding:15px;font-size:13px;color:var(--ink-3);font-style:italic}
.bucket-table tbody td{padding:8px 14px;border-bottom:1px solid var(--line-soft);
  vertical-align:middle;overflow:hidden}
.bucket-table tbody tr:last-child td{border-bottom:0}
.bucket-table tbody tr:hover td{background:color-mix(in srgb,var(--rail) 6%,var(--surface))}
/* one line per task keeps the rows a uniform, scannable height; the note is on
   the row's tooltip and in the edit form rather than taking up two lines here */
td.task{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:right}
.note-icon{width:12px;height:12px;margin-left:7px;vertical-align:-1px;
  color:var(--cool);opacity:.85}
/* The date itself carries the progress fill — a chip sized to the text rather
   than a wash across the whole cell. The fill shows how far through its own
   window a task is: green once delivered, red once past its end date. */
td.dates{white-space:nowrap;font-family:var(--font-mono);
  font-size:12px;color:var(--ink-2);padding-left:10px;padding-right:10px}
.dchip{position:relative;display:inline-block;padding:4px 8px;border-radius:5px;
  overflow:hidden;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--c) 45%,var(--line))}
.dchip .prog{position:absolute;left:0;top:0;bottom:0;width:var(--pct);
  background:color-mix(in srgb,var(--c) 26%,transparent);
  border-right:2px solid var(--c);pointer-events:none}
.dchip .prog.zero{border-right:0}
.dchip .dtxt{position:relative}
/* status and priority each fill their whole cell, the way the Monday board reads */
td.prio-cell,td.status-cell{text-align:center;vertical-align:middle;
  font-weight:700;font-size:12px;letter-spacing:.02em;
  padding-left:8px;padding-right:15px}
/* both are editable in place: click the cell to pick a different value */
td.prio-cell.editable,td.status-cell.editable{cursor:pointer;position:relative}
td.prio-cell.editable::after,td.status-cell.editable::after{content:"";position:absolute;
  right:6px;top:50%;margin-top:-2px;opacity:.45;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor}
td.prio-cell.editable:hover::after,td.status-cell.editable:hover::after{opacity:.95}

.cellmenu{position:fixed;z-index:120;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--shadow-lg);padding:5px;
  display:flex;flex-direction:column;gap:3px}
.cellmenu-opt{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  border:1px solid transparent;border-radius:5px;padding:7px 11px;cursor:pointer;
  text-align:left;white-space:nowrap;
  background:var(--pbg,var(--sbg));color:var(--pfg,var(--sfg))}
.cellmenu-opt:hover{filter:brightness(1.07)}
.cellmenu-opt.is-current{border-color:color-mix(in srgb,var(--ink) 50%,transparent)}
td.prio-cell{background:var(--pbg);color:var(--pfg);
  border-bottom:1px solid color-mix(in srgb,var(--pfg) 22%,var(--pbg))}
td.status-cell{background:var(--sbg);color:var(--sfg);
  border-bottom:1px solid color-mix(in srgb,var(--sfg) 22%,var(--sbg))}
.bucket-table tbody tr:hover td.prio-cell{background:var(--pbg)}
.bucket-table tbody tr:hover td.status-cell{background:var(--sbg)}
.bucket-table tbody tr:last-child td.prio-cell,
.bucket-table tbody tr:last-child td.status-cell{border-bottom:0}
/* owners: overlapping avatars, picked from the members directory only */
td.owner-cell{font-size:13px;color:var(--ink-2);text-align:center}
td.owner-cell.editable{cursor:pointer}
.owners{display:flex;align-items:center;justify-content:center;min-width:0}
.owners .nm{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.owners .more{margin-left:7px;font-family:var(--font-mono);font-size:11px;
  color:var(--ink-3);font-weight:600}
/* named "unassigned" rather than "empty" — the page-level .empty state carries
   44px of block padding, and a shared class name was stretching the row */
.owners.unassigned{color:var(--ink-3);font-style:italic;font-size:12.5px}
.owners{min-height:24px}
td.owner-cell.editable:hover .owners{opacity:.75}
.avatar-sm{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:9.5px;font-weight:700;color:#fff;flex:none;
  background:var(--ac);box-shadow:0 0 0 2px var(--surface);margin-left:-7px}

/* Shell glue the prototype did not need, because it was one file with its own layout. */
.tablewrap { overflow-x: auto; padding-bottom: 4px; }
.th-headwrap { top: 53px; }           /* this shell's top bar is 53px, not the prototype's 52 */
.note-icon { color: var(--cool); font-size: 7px; margin-left: 7px; vertical-align: 2px; }
.loading { color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; padding: 30px 0; }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.banner {
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--heat); border-radius: 8px;
  padding: 13px 15px; margin-bottom: 18px; font-size: 13.5px; color: var(--ink-2);
}
.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; max-width: 380px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-left: 3px solid var(--s-stuck); border-radius: 9px;
  padding: 11px 14px; font-size: 13px; box-shadow: var(--shadow-lg);
}
/* ---------- modal ---------- */
.backdrop{position:fixed;inset:0;z-index:100;background:var(--scrim);
  display:flex;align-items:flex-start;justify-content:center;padding:20px 16px;overflow-y:auto}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);width:100%;max-width:640px;margin:auto;overflow:hidden}
.modal.wide{max-width:780px}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.modal-head h3{font-size:16.5px;font-weight:700;flex:1}
.modal-head .x{font:inherit;font-size:20px;line-height:1;background:none;border:0;
  color:var(--ink-3);cursor:pointer;padding:2px 6px;border-radius:6px}
.modal-head .x:hover{background:var(--line);color:var(--ink)}
.modal-body{padding:18px;max-height:min(66vh,620px);overflow-y:auto}
.modal-foot{display:flex;align-items:center;gap:9px;padding:14px 18px;
  border-top:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.modal-foot .spacer{margin-left:auto}
.modal-foot .hint{font-size:12.5px;color:var(--ink-3);font-family:var(--font-mono)}

.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%;
}
.field textarea{resize:vertical;min-height:74px;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--heat);outline-offset:-1px;border-color:var(--heat)}
.field .err{font-size:12px;color:var(--s-stuck);font-weight:600}
.fg-hint{font-size:12px;color:var(--ink-3);font-style:italic}
.chipset{display:flex;flex-wrap:wrap;gap:6px}
.chipset label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);
  font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;background:var(--surface)}
.chipset label:has(input:checked){border-color:var(--cool);color:var(--cool);
  background:color-mix(in srgb,var(--cool) 10%,transparent)}
.chipset input{width:auto;margin:0;accent-color:var(--cool)}
.chipset label .avatar-sm{width:19px;height:19px;font-size:8px;margin-left:0;box-shadow:none}

/* the form picks up the same colours the board uses, so what you choose here
   looks like what you will see in the table */
.choicerow{display:flex;flex-wrap:wrap;gap:7px}
.choice-btn{font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:7px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;
  border:2px solid transparent;opacity:.45;transition:opacity .1s ease;
  background:var(--pbg,var(--sbg));color:var(--pfg,var(--sfg))}
.choice-btn:hover{opacity:.8}
.choice-btn.on{opacity:1;border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
.choice-btn.bucket{opacity:.55;
  background:color-mix(in srgb,var(--sw) 16%,var(--surface));
  color:color-mix(in srgb,var(--sw) 76%,var(--ink));
  border-color:color-mix(in srgb,var(--sw) 32%,transparent)}
.choice-btn.bucket:hover{opacity:.85}
.choice-btn.bucket.on{opacity:1;border-color:var(--sw);
  background:color-mix(in srgb,var(--sw) 26%,var(--surface))}

/* wizard */
.choices{display:flex;flex-direction:column;gap:9px}
.choice{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);
  border-radius:9px;padding:12px 14px;cursor:pointer;background:var(--surface)}
.choice:has(input:checked){border-color:var(--heat);background:var(--heat-soft)}
.choice input{margin-top:3px;accent-color:var(--heat);flex:none}
.choice .c-t{font-size:14px;font-weight:600;display:block}
.choice .c-d{font-size:12.5px;color:var(--ink-2);display:block;margin-top:2px}
.choice .c-n{font-family:var(--font-mono);font-size:11.5px;color:var(--heat);
  font-weight:600;display:block;margin-top:5px}
.wsec{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.wsec > h4{font-size:13px;font-weight:700;margin-bottom:4px}
.wsec > p{font-size:12.5px;color:var(--ink-3);margin:0 0 12px}
.opts{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.opt{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.opt input{accent-color:var(--heat);flex:none;margin:0}
/* .opt is a <label>, so inside a .field it would otherwise inherit the small
   uppercase mono styling meant for field captions */
.field label.opt{font-family:var(--font-body);font-size:13.5px;font-weight:400;
  text-transform:none;letter-spacing:normal;color:var(--ink);line-height:1.45;
  align-items:flex-start}
/* `.field input` sets width:100%, which would stretch the tick box itself and
   squeeze the label to one character per line */
.field .opt input[type="checkbox"]{width:auto;flex:none;margin:1px 0 0}
.field .opts{gap:10px;margin-bottom:0}
.field .opts .fg-hint{margin-top:2px}
.picklist{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pl-group{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:700;font-size:12.5px}
.pl-group .rail{width:3px;height:13px;border-radius:2px;background:var(--rail);flex:none}
.pl-group .tog{margin-left:auto;font:inherit;font-size:11.5px;font-weight:600;color:var(--cool);
  background:none;border:0;cursor:pointer;padding:2px 5px;border-radius:5px}
.pl-group .tog:hover{background:var(--surface)}
.pl-item{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:13.5px;
  border-bottom:1px solid var(--line-soft);cursor:pointer}
.pl-item:hover{background:var(--surface-2)}
.pl-item input{accent-color:var(--heat);flex:none}
.pl-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-item .oc{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);flex:none}
.pl-item:has(input:not(:checked)) .nm{color:var(--ink-3);text-decoration:line-through}

.confirm-txt{font-size:14.5px;line-height:1.55;margin:0}
.confirm-txt b{font-weight:600}


.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%;
}
.field textarea{resize:vertical;min-height:74px;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--heat);outline-offset:-1px;border-color:var(--heat)}
.field .err{font-size:12px;color:var(--s-stuck);font-weight:600}
.fg-hint{font-size:12px;color:var(--ink-3);font-style:italic}
.chipset{display:flex;flex-wrap:wrap;gap:6px}
.chipset label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);
  font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;background:var(--surface)}
.chipset label:has(input:checked){border-color:var(--cool);color:var(--cool);
  background:color-mix(in srgb,var(--cool) 10%,transparent)}
.chipset input{width:auto;margin:0;accent-color:var(--cool)}
.chipset label .avatar-sm{width:19px;height:19px;font-size:8px;margin-left:0;box-shadow:none}

/* the form picks up the same colours the board uses, so what you choose here
   looks like what you will see in the table */
.choicerow{display:flex;flex-wrap:wrap;gap:7px}
.choice-btn{font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:7px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;
  border:2px solid transparent;opacity:.45;transition:opacity .1s ease;
  background:var(--pbg,var(--sbg));color:var(--pfg,var(--sfg))}
.choice-btn:hover{opacity:.8}
.choice-btn.on{opacity:1;border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
.choice-btn.bucket{opacity:.55;
  background:color-mix(in srgb,var(--sw) 16%,var(--surface));
  color:color-mix(in srgb,var(--sw) 76%,var(--ink));
  border-color:color-mix(in srgb,var(--sw) 32%,transparent)}
.choice-btn.bucket:hover{opacity:.85}
.choice-btn.bucket.on{opacity:1;border-color:var(--sw);
  background:color-mix(in srgb,var(--sw) 26%,var(--surface))}
/* Shell glue for the modal markup. */
.spacer { flex: 1; }
.btn.danger { color: var(--s-stuck); border-color: color-mix(in srgb, var(--s-stuck) 35%, var(--line)); }
.btn.danger:hover { background: color-mix(in srgb, var(--s-stuck) 10%, var(--surface)); }
.btn.danger-solid { background: var(--s-stuck); border-color: var(--s-stuck); color: #fff; }
.btn.danger-solid:hover { filter: brightness(1.07); }
.confirm-txt { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset label {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px 6px 9px;
  font-size: 13px; cursor: pointer; background: var(--surface);
  font-family: var(--font-body); font-weight: 500; letter-spacing: normal;
  text-transform: none; color: var(--ink-2);
}
.chipset label:hover { background: var(--surface-2); }
/* The checkbox must not inherit .field input{width:100%}, which stretches it across the
   row and squashes the name to one character per line. */
.chipset input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.chipset .avatar-sm { margin-left: 0; box-shadow: none; }
.editable-row { cursor: pointer; }
.bucket-head .btn.sm { margin-left: 10px; padding: 4px 10px; font-size: 12px; }