/* SOURCE: css/00-foundation.css */

/* ============================================================
   TOKENS
   Heat ramp: colour encodes distance in time, not category.
   Today burns hottest; the horizon cools as it recedes.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --canvas:#E9EBF0;
  --canvas-2:#DFE2EA;
  --surface:#FFFFFF;
  --surface-2:#F5F6FA;
  --surface-3:#EDEFF4;

  --ink:#14161C;
  --ink-2:#474D5C;
  --ink-3:#7B8294;
  --ink-4:#A6ACBB;

  --line:#DCDFE8;
  --line-2:#C7CCD9;

  --c-queue:#4E84C4;
  --c-todo:#79808F;
  --c-today:#DC4A26;
  --c-tomorrow:#C68222;
  --c-soon:#12907E;
  --c-later:#4A59B8;

  --tag-red:#C94A45;
  --tag-orange:#D36B2D;
  --tag-amber:#B9861E;
  --tag-green:#4E8B4A;
  --tag-teal:#2D8D84;
  --tag-blue:#4E78C4;
  --tag-purple:#7659B8;
  --tag-pink:#B85685;

  --danger:#C8382C;
  --danger-soft:rgba(200,56,44,.09);

  --btn-primary-bg:#14161C;
  --btn-primary-ink:#FFFFFF;

  --sh-1:0 1px 2px rgba(18,20,26,.05), 0 1px 1px rgba(18,20,26,.04);
  --sh-2:0 2px 4px rgba(18,20,26,.05), 0 10px 24px -14px rgba(18,20,26,.24);
  --sh-3:0 4px 8px rgba(18,20,26,.06), 0 18px 40px -18px rgba(18,20,26,.32);
  --sh-modal:0 40px 90px -30px rgba(12,14,20,.45), 0 2px 10px rgba(12,14,20,.10);

  --grain:.028;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:#0C0E13;
  --canvas-2:#080A0E;
  --surface:#14171F;
  --surface-2:#1A1E28;
  --surface-3:#212635;

  --ink:#F1F3F8;
  --ink-2:#B4BBCA;
  --ink-3:#7B8398;
  --ink-4:#5C6478;

  --line:#232833;
  --line-2:#333A4A;

  --c-queue:#6FA8E8;
  --c-todo:#8B93A6;
  --c-today:#FF6B45;
  --c-tomorrow:#F0AE4C;
  --c-soon:#2FC3AB;
  --c-later:#828FEE;

  --tag-red:#F0716B;
  --tag-orange:#F28C52;
  --tag-amber:#E7B85B;
  --tag-green:#76B96E;
  --tag-teal:#55B8AD;
  --tag-blue:#78A3EE;
  --tag-purple:#A18AE6;
  --tag-pink:#DD7CAD;

  --danger:#FF6B5E;
  --danger-soft:rgba(255,107,94,.11);

  --btn-primary-bg:#F1F3F8;
  --btn-primary-ink:#0C0E13;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.35), 0 12px 28px -16px rgba(0,0,0,.7);
  --sh-3:0 4px 10px rgba(0,0,0,.4), 0 22px 46px -20px rgba(0,0,0,.8);
  --sh-modal:0 44px 100px -32px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.5);

  --grain:.05;
}

:root {
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:22px;
  --r-pill:999px;

  --font-display:"Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

* { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  min-height:100vh;
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 8% -8%, color-mix(in srgb, var(--c-today) 11%, transparent), transparent 62%),
    radial-gradient(900px 560px at 96% 4%, color-mix(in srgb, var(--c-later) 13%, transparent), transparent 60%),
    radial-gradient(800px 700px at 50% 108%, color-mix(in srgb, var(--c-soon) 9%, transparent), transparent 62%),
    linear-gradient(180deg, var(--canvas) 0%, var(--canvas-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* Fine tooth of noise so the large flat areas do not read as plastic. */
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background:color-mix(in srgb, var(--c-today) 26%, transparent); }

:focus-visible {
  outline:2px solid color-mix(in srgb, var(--c-later) 75%, var(--ink));
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- scrollbars ---------- */
* { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb {
  background:var(--line-2);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover { background:var(--ink-4); background-clip:content-box; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position:sticky;
  top:0;
  z-index:60;
  background:color-mix(in srgb, var(--canvas) 76%, transparent);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.topbar-inner {
  max-width:1560px;
  margin:0 auto;
  padding:14px 28px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.brand {
  display:flex;
  align-items:baseline;
  gap:11px;
  min-width:0;
}

.brand-wordmark {
  flex:none;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}

.brand-link {
  color:var(--ink);
  text-decoration:none;
  outline:none;
}
.brand-link:visited { color:var(--ink); }
.brand-link:focus-visible {
  outline:1px solid color-mix(in srgb, var(--line-2) 82%, transparent);
  outline-offset:4px;
  border-radius:3px;
}

.brand-period {
  display:inline-block;
  margin-left:.02em;
}

.brand-period-buds {
  color:var(--c-today);
  text-shadow:
    0 0 5px color-mix(in srgb, var(--c-today) 68%, transparent),
    0 0 12px color-mix(in srgb, var(--tag-pink) 34%, transparent);
}

.brand-period-pyips {
  color:#EFA53B;
  text-shadow:
    0 0 5px color-mix(in srgb, #EFA53B 70%, transparent),
    0 0 12px color-mix(in srgb, #EFA53B 32%, transparent);
}

.board-title-input {
  width:auto;
  min-width:0;
  max-width:min(420px, 32vw);
  flex:1 1 auto;
  font-family:var(--font-display);
  font-size:clamp(25px, 2.3vw, 30px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.08;
  color:var(--ink);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:2px 5px;
  outline:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.board-title-input:hover {
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border-color:var(--line);
}
.board-title-input:focus {
  background:var(--surface);
  border-color:var(--line-2);
  box-shadow:var(--sh-1);
}

/* ---------- composer ---------- */
.composer {
  flex:1 1 320px;
  min-width:260px;
  max-width:520px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 5px 5px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.composer:focus-within {
  border-color:color-mix(in srgb, var(--c-today) 50%, var(--line-2));
  box-shadow:var(--sh-2), 0 0 0 4px color-mix(in srgb, var(--c-today) 12%, transparent);
}
.composer svg { flex:none; color:var(--ink-4); }
#newTaskInput {
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-weight:450;
  padding:8px 0;
  outline:none;
}
#newTaskInput::placeholder { color:var(--ink-4); }
#newTaskInput:focus { box-shadow:none; border-color:transparent; background:transparent; }

.topbar-actions {
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}

/* ---------- buttons ---------- */
button {
  font:inherit;
  font-weight:500;
  color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:8px 13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  box-shadow:var(--sh-1);
  transition:background .15s var(--ease), border-color .15s var(--ease),
             color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}

/* The author-level display rule above overrides the browser's built-in
   [hidden] styling unless we restore it explicitly. */
button[hidden] {
  display:none !important;
}
button:hover { background:var(--surface-2); border-color:var(--line-2); color:var(--ink); }
button:active { transform:translateY(1px); box-shadow:none; }

.btn-primary {
  background:var(--btn-primary-bg);
  color:var(--btn-primary-ink);
  border-color:transparent;
  font-weight:600;
  padding:8px 16px;
  border-radius:var(--r-pill);
}
.btn-primary:hover {
  background:var(--btn-primary-bg);
  color:var(--btn-primary-ink);
  border-color:transparent;
  filter:brightness(1.18);
}

.btn-quiet {
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--ink-3);
}
.btn-quiet:hover { background:var(--surface); border-color:var(--line); }

.btn-danger { color:var(--danger); }
.btn-danger:hover {
  background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 40%, transparent);
  color:var(--danger);
}

.icon-btn { padding:9px; border-radius:var(--r-sm); }

.theme-sun { display:none; }
:root[data-theme="dark"] .theme-sun { display:block; }
:root[data-theme="dark"] .theme-moon { display:none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
  position:relative;
  z-index:1;
  max-width:1560px;
  margin:0 auto;
  padding:24px 28px 64px;
}

.data-status {
  position:fixed;
  z-index:1200;
  top:calc(
    var(--topbar-height, 58px) +
    var(--board-tabs-height, 50px) +
    12px
  );
  left:50%;
  width:max-content;
  max-width:min(560px, calc(100vw - 32px));
  min-height:0;
  margin:0;
  padding:9px 13px;
  display:flex;
  align-items:center;
  gap:0;
  transform:translate(-50%, -5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow-wrap:anywhere;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--ink-2);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-3);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  transition:
    opacity .16s var(--ease),
    transform .16s var(--ease),
    visibility .16s step-end;
}

.data-status:not(:empty) {
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
  transition:
    opacity .16s var(--ease),
    transform .16s var(--ease),
    visibility 0s step-start;
}

.data-status:not(:empty)::before {
  content:"›";
  flex:none;
  margin-right:7px;
  color:var(--c-soon);
  font-weight:700;
}

/* ============================================================
   SIGNATURE — the load bar.
   One line that shows how much of your work is imminent versus parked.
   It moves the moment you drag a card.
   ============================================================ */
.load {
  margin:0 0 22px;
  padding:15px 18px 14px;
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius:var(--r-lg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.load-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:11px;
}
.load-title {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.load-total {
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-3);
}
.load-total b {
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-right:4px;
}

.load-bar {
  display:flex;
  gap:3px;
  height:9px;
  border-radius:var(--r-pill);
  overflow:hidden;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.load-bar .seg {
  width:0%;
  background:var(--col);
  border-radius:var(--r-pill);
  transition:width .55s var(--ease-out);
}
.load-bar.is-empty { background:repeating-linear-gradient(115deg, transparent 0 7px, color-mix(in srgb, var(--ink) 8%, transparent) 7px 8px); }

.load-legend {
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin-top:11px;
}
.leg {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-3);
  transition:color .2s var(--ease), opacity .2s var(--ease);
}
.leg.is-zero { opacity:.42; }
.leg-dot {
  width:7px; height:7px;
  border-radius:2px;
  background:var(--col);
  flex:none;
}
.leg b { color:var(--ink); font-weight:700; }

/* ============================================================
   BOARD
   ============================================================ */
.board {
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--board-effective-columns, 4), minmax(0, 1fr));
  grid-auto-rows:1px;
  grid-auto-flow:row;
  column-gap:18px;
  row-gap:0;
  align-items:start;
}

/* Queue can be placed between logical board rows, but always spans full width. */
.queue-section {
  width:100%;
  min-width:0;
}

.column-stack { display:contents; }

.column {
  --col:var(--c-todo);
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:0 12px 12px;
  min-height:320px;
  margin-bottom:18px;
  grid-row-end:span var(--masonry-span, 338);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.column-stack .column { min-height:320px; }

/* Section color remains semantic, but the accent is now a short fading edge rather than a full-height stripe. */
.column::before {
  content:"";
  position:absolute;
  left:0;
  top:19%;
  bottom:19%;
  width:2px;
  border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--col), transparent);
  box-shadow:0 0 10px color-mix(in srgb, var(--col) 22%, transparent);
  pointer-events:none;
}

.col-todo     { --col:var(--c-todo); }
.col-later    { --col:var(--c-later); }
.col-today    { --col:var(--c-today); }
.col-tomorrow { --col:var(--c-tomorrow); }
.col-soon     { --col:var(--c-soon); }

/* Today gets one extra degree of presence — it is the column that matters now. */
.col-today {
  box-shadow:var(--sh-3), 0 0 0 1px color-mix(in srgb, var(--c-today) 22%, transparent);
}
.col-today::before { width:3px; box-shadow:0 0 12px color-mix(in srgb, var(--c-today) 28%, transparent); }

.column-head {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 4px 12px 8px;
  margin-bottom:10px;
  border-bottom:1px solid var(--line);
}

.col-heading { min-width:0; display:flex; flex-direction:column; gap:2px; }

.column-title-edit {
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.column-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--col);
  flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--col) 16%, transparent);
}

.column-title-input {
  width:100%;
  min-width:0;
  margin:-3px 0;
  padding:3px 5px;
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.25;
  color:var(--ink);
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  outline:none;
  box-shadow:none;
}

.column-title-input:hover {
  background:color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-color:var(--line);
}

.column-title-input:focus {
  background:var(--surface-2);
  border-color:color-mix(in srgb, var(--col) 58%, var(--line-2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--col) 13%, transparent);
}

.col-when {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-4);
  padding-left:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.col-count {
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  color:var(--col);
  background:color-mix(in srgb, var(--col) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--col) 24%, transparent);
  border-radius:var(--r-pill);
  padding:2px 9px;
  min-width:28px;
  text-align:center;
}
.col-count.is-zero {
  color:var(--ink-4);
  background:transparent;
  border-color:var(--line);
}

.dropzone {
  min-height:235px;
  border-radius:var(--r-md);
  transition:background .18s var(--ease), box-shadow .18s var(--ease);
}
.column-stack .dropzone { min-height:235px; }

.dropzone:empty::after {
  content:attr(data-empty);
  display:block;
  padding:26px 14px;
  text-align:center;
  font-size:12.5px;
  color:var(--ink-4);
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
  margin:2px;
}

.dropzone.over {
  background:color-mix(in srgb, var(--col) 9%, transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--col) 42%, transparent);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  position:relative;
  --card-edge-accent:var(--col);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:11px 12px 11px 13px;
  margin:0 0 9px;
  line-height:1.42;
  cursor:grab;
  user-select:none;
  box-shadow:var(--sh-1);
  transition:transform .14s var(--ease), box-shadow .16s var(--ease),
             background .16s var(--ease), border-color .16s var(--ease);
}
.card:hover {
  background:var(--surface-3);
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
  border-color:var(--line-2);
}
.card-edge-accent {
  position:absolute;
  left:-1px;
  top:19%;
  bottom:19%;
  width:2px;
  border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--card-edge-accent), transparent);
  box-shadow:0 0 9px color-mix(in srgb, var(--card-edge-accent) 22%, transparent);
  pointer-events:none;
  z-index:1;
}

.card:active { cursor:grabbing; }
.card.dragging {
  opacity:.4;
  transform:scale(.985);
  box-shadow:none;
}

.card.drag-group-member {
  opacity:.52;
}

.card-title {
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  padding-right:62px;
  overflow-wrap:anywhere;
}

.card-meta {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.03em;
  color:var(--ink-3);
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:2px 8px;
}
.chip svg { opacity:.8; }

.card-actions {
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:2px;
  opacity:.42;
  transition:opacity .16s var(--ease);
}
.card:hover .card-actions,
.card:focus-within .card-actions { opacity:1; }

.card-actions button {
  padding:5px;
  border:1px solid transparent;
  background:transparent;
  box-shadow:none;
  color:var(--ink-3);
  border-radius:7px;
}
.card-actions button:hover {
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}

.task-touch-drag-handle {
  display:none;
  place-items:center;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}

.task-touch-drag-handle:active {
  cursor:grabbing;
}

.delete-btn:hover {
  background:var(--danger-soft) !important;
  border-color:color-mix(in srgb, var(--danger) 38%, transparent) !important;
  color:var(--danger) !important;
}

@keyframes cardIn {
  from { opacity:0; transform:translateY(8px) scale(.985); }
  to   { opacity:1; transform:none; }
}

body.direct-pointer-dragging {
  user-select:none;
  -webkit-user-select:none;
  cursor:grabbing;
}

.direct-drag-preview {
  position:fixed !important;
  z-index:100000 !important;
  margin:0 !important;
  pointer-events:none !important;
  touch-action:none !important;
  opacity:.94 !important;
  transform:translate3d(0,0,0) scale(.985);
  transform-origin:top left;
  box-shadow:var(--sh-3) !important;
  transition:none !important;
  will-change:left, top;
  overflow:hidden;
}

.direct-drag-preview * {
  pointer-events:none !important;
}

@media (max-width:860px), (pointer:coarse) {
  .task-touch-drag-handle {
    display:grid;
  }

  .card-actions {
    opacity:1;
  }

  .card-title {
    padding-right:90px;
  }

  .task-touch-drag-handle,
  .section-board-drag-handle {
    min-width:34px;
    width:34px;
    height:34px;
  }

  .subtask-drag-handle {
    width:34px;
    height:34px;
  }

  .section-manager-grip,
  .board-manager-grip {
    min-width:34px;
    width:34px;
    height:34px;
  }
}
.card.enter {
  animation:cardIn .42s var(--ease-out) both;
  animation-delay:calc(min(var(--i, 0) * 26ms, 420ms));
}

/* SOURCE: css/10-modals-responsive.css */
/* ============================================================
   MODALS
   ============================================================ */
.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:color-mix(in srgb, var(--canvas-2) 62%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
.modal-backdrop.open { display:flex; animation:fadeIn .2s var(--ease) both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalIn {
  from { opacity:0; transform:translateY(14px) scale(.975); }
  to   { opacity:1; transform:none; }
}

.modal {
  --col:var(--c-later);
  position:relative;
  width:min(600px, 100%);
  max-height:86vh;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  padding:22px;
  box-shadow:var(--sh-modal);
  animation:modalIn .32s var(--ease-out) both;
}
.modal::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:linear-gradient(90deg, var(--col), color-mix(in srgb, var(--col) 25%, transparent));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}

.task-accent-todo     { --col:var(--c-todo); }
.task-accent-later    { --col:var(--c-later); }
.task-accent-today    { --col:var(--c-today); }
.task-accent-tomorrow { --col:var(--c-tomorrow); }
.task-accent-soon     { --col:var(--c-soon); }

.modal-header {
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}
.modal-header h3 {
  margin:0;
  flex:1;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
}

.close-modal {
  flex:none;
  padding:7px;
  border-radius:var(--r-sm);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--ink-3);
}
.close-modal:hover { background:var(--surface-2); border-color:var(--line); }

.notes-label {
  display:block;
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
}

input, textarea {
  font:inherit;
  color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:9px 11px;
  outline:none;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
input::placeholder, textarea::placeholder { color:var(--ink-4); }
input:focus, textarea:focus {
  background:var(--surface);
  border-color:color-mix(in srgb, var(--col, var(--c-later)) 55%, var(--line-2));
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--col, var(--c-later)) 14%, transparent);
}

.main-task-name-wrap { flex:1; min-width:0; }
.main-task-name {
  width:100%;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
}

.notes-input, .subtask-notes {
  width:100%;
  resize:vertical;
  line-height:1.55;
}
.notes-input { min-height:96px; }

.task-notes-area {
  margin-bottom:20px;
}
.task-notes-editor .notes-label {
  display:block;
  margin-bottom:6px;
}
.task-notes-editor .notes-input {
  height:96px;
  max-height:520px;
  margin-bottom:0;
  overflow-y:auto;
}
.task-notes-editor .notes-input.is-expanded {
  min-height:260px;
}
.task-note-actions {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:7px;
}
.add-task-note-btn,
.task-note-size-btn,
.remove-task-note-btn {
  padding:4px 9px;
  font-size:11.5px;
  font-weight:500;
  border-radius:var(--r-pill);
  box-shadow:none;
  background:transparent;
  color:var(--ink-3);
  border-color:var(--line);
}
.add-task-note-btn:hover,
.task-note-size-btn:hover {
  color:var(--col);
  border-color:color-mix(in srgb, var(--col) 42%, transparent);
  background:color-mix(in srgb, var(--col) 9%, transparent);
}
.remove-task-note-btn:hover {
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 35%, transparent);
  background:var(--danger-soft);
}

.subtask-add-preferences {
  min-height:30px;
  margin-top:2px;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--line);
}

.subtask-add-preferences-label {
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.subtask-position-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}

.subtask-position-label {
  min-width:38px;
  color:var(--ink-4);
  font-size:11px;
  font-weight:650;
  transition:color .15s var(--ease);
}

.subtask-position-bottom {
  text-align:right;
}

.subtask-position-top {
  text-align:left;
}

.subtask-add-preferences[data-position="bottom"] .subtask-position-bottom,
.subtask-add-preferences[data-position="top"] .subtask-position-top {
  color:var(--col);
}

.subtask-position-switch {
  position:relative;
  width:38px;
  height:22px;
  flex:none;
}

.subtask-position-switch input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}

.subtask-position-track {
  position:absolute;
  inset:0;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:var(--surface-3);
  transition:
    background .16s var(--ease),
    border-color .16s var(--ease),
    box-shadow .16s var(--ease);
}

.subtask-position-thumb {
  position:absolute;
  top:3px;
  left:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--ink-4);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:
    transform .16s var(--ease),
    background .16s var(--ease);
}

.subtask-position-switch input:checked + .subtask-position-track {
  background:color-mix(in srgb, var(--col) 18%, var(--surface-3));
  border-color:color-mix(in srgb, var(--col) 58%, var(--line-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--col) 8%, transparent);
}

.subtask-position-switch input:checked + .subtask-position-track .subtask-position-thumb {
  transform:translateX(16px);
  background:var(--col);
}

.subtask-position-switch input:focus-visible + .subtask-position-track {
  outline:2px solid color-mix(in srgb, var(--col) 55%, transparent);
  outline-offset:2px;
}

.subtask-position-toggle:hover .subtask-position-track {
  border-color:color-mix(in srgb, var(--col) 35%, var(--line-2));
}

.subtask-add {
  display:flex;
  gap:7px;
  margin-bottom:14px;
  padding-top:8px;
}
.subtask-add input { flex:1; min-width:0; }
#addSubtaskBtn {
  background:var(--btn-primary-bg);
  color:var(--btn-primary-ink);
  border-color:transparent;
  font-weight:600;
}
#addSubtaskBtn:hover { filter:brightness(1.18); background:var(--btn-primary-bg); color:var(--btn-primary-ink); }

.subtask-list { display:grid; gap:8px; }

.subtask-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  --subtask-edge-accent:var(--col);
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:8px 9px;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.subtask-card:hover { background:var(--surface-3); border-color:var(--line-2); }
.subtask-edge-accent {
  position:absolute;
  left:-1px;
  top:18%;
  bottom:18%;
  width:2px;
  border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--subtask-edge-accent), transparent);
  box-shadow:0 0 8px color-mix(in srgb, var(--subtask-edge-accent) 20%, transparent);
  pointer-events:none;
  z-index:1;
}

.subtask-card.dragging { opacity:.46; }

.subtask-card.subtask-drag-group-member {
  opacity:.2;
  filter:saturate(.35);
  pointer-events:none;
  border-style:dashed;
}

.subtask-card.subtask-drag-group-member .subtask-drag-handle {
  color:var(--col);
}

.subtask-card.dragging.subtask-drag-group-anchor {
  border-color:color-mix(in srgb, var(--col) 58%, var(--line-2));
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    inset 0 0 0 1px color-mix(in srgb, var(--col) 18%, transparent);
}

.subtask-card.is-selected {
  background:color-mix(in srgb, var(--c-queue) 6%, var(--surface-2));
  border-color:color-mix(in srgb, var(--c-queue) 40%, var(--line-2));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--c-queue) 18%, transparent);
}

.subtask-card.is-selected .subtask-name-input {
  background:color-mix(in srgb, var(--c-queue) 3%, var(--surface));
  border-color:color-mix(in srgb, var(--c-queue) 22%, var(--line));
}

.subtask-drag-handle {
  position:relative;
  display:grid;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  place-items:center;
  width:22px;
  height:26px;
  cursor:grab;
  color:var(--ink-4);
  border-radius:5px;
}
.subtask-drag-handle:hover { color:var(--col); background:color-mix(in srgb, var(--col) 10%, transparent); }
.subtask-drag-handle:active { cursor:grabbing; }

.subtask-drag-handle[data-drag-count]::after {
  content:attr(data-drag-count);
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  background:var(--col);
  color:var(--btn-primary-ink);
  border:2px solid var(--surface);
  box-shadow:var(--sh-1);
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}
.subtask-drag-handle,
.subtask-delete { margin-top:2px; }

.subtask-name-input {
  width:100%;
  min-width:0;
  min-height:30px;
  height:auto;
  resize:none;
  overflow:hidden;
  field-sizing:content;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  background:transparent;
  border-color:transparent;
  padding:5px 7px;
  font:inherit;
  font-size:13.5px;
  line-height:1.38;
}
.subtask-name-input:hover { background:var(--surface); border-color:var(--line); }

.subtask-delete {
  padding:5px;
  border-radius:6px;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--ink-4);
}
.subtask-delete:hover {
  background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 35%, transparent);
  color:var(--danger);
}

.subtask-notes-wrap {
  grid-column:2 / -1;
  display:grid;
  gap:7px;
  justify-items:start;
}
.subtask-notes { min-height:64px; font-size:13.5px; }

.add-subnote-btn, .remove-subnote-btn {
  grid-column:2 / 3;
  justify-self:start;
  padding:4px 9px;
  font-size:11.5px;
  font-weight:500;
  border-radius:var(--r-pill);
  box-shadow:none;
  background:transparent;
  color:var(--ink-3);
  border-color:var(--line);
}
.add-subnote-btn:hover {
  color:var(--col);
  border-color:color-mix(in srgb, var(--col) 42%, transparent);
  background:color-mix(in srgb, var(--col) 9%, transparent);
}

.empty-subtasks {
  padding:16px 12px;
  text-align:center;
  font-size:12.5px;
  color:var(--ink-4);
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
}

/* ---------- transfer modal ---------- */
.transfer-modal { --col:var(--c-soon); width:min(780px, 100%); }
.transfer-help {
  margin:0 0 12px;
  color:var(--ink-2);
  font-size:13.5px;
  line-height:1.6;
}
.transfer-help b { color:var(--ink); font-weight:600; }
.transfer-data-box {
  width:100%;
  min-height:300px;
  resize:vertical;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.55;
  padding:12px;
}
.transfer-actions {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
#copyBackupBtn, #importPastedBtn {
  background:var(--btn-primary-bg);
  color:var(--btn-primary-ink);
  border-color:transparent;
  font-weight:600;
}
#copyBackupBtn:hover, #importPastedBtn:hover {
  filter:brightness(1.18);
  background:var(--btn-primary-bg);
  color:var(--btn-primary-ink);
}

.kbd-hint {
  margin:18px 0 0;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-4);
  text-align:center;
}
kbd {
  font-family:var(--font-mono);
  font-size:10px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:5px;
  padding:1px 5px;
  color:var(--ink-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px) {
  .column { min-height:280px; }
  .dropzone { min-height:195px; }
}
@media (max-width:860px) {
  .topbar-inner { padding:12px 16px; gap:12px; }
  .composer { order:3; flex-basis:100%; max-width:none; }
  .topbar-actions { margin-left:auto; }
  .board-title-input { width:min(320px, 52vw); }
  .wrap { padding:20px 16px 56px; }
}
@media (max-width:640px) {
  .column, .column-stack .column { min-height:190px; }
  .dropzone, .column-stack .dropzone { min-height:115px; }
  .load-legend { gap:6px 14px; }
  .modal { padding:18px; border-radius:var(--r-lg); }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .card:hover { transform:none; }
}

/* Keep the remove-note action compact inside an expanded subtask note. */
.subtask-notes-wrap .remove-subnote-btn {
  grid-column:auto;
  justify-self:start;
  align-self:start;
  width:auto;
  height:auto;
  min-width:0;
  padding:4px 9px;
  border-radius:var(--r-pill);
}

/* SOURCE: css/20-queue-selection.css */
/* ============================================================
   QUEUE — horizontal bulk-entry inbox
   ============================================================ */
.queue-section {
  --col:var(--c-queue);
  position:relative;
  margin:0 0 18px;
  padding:0 12px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  overflow:hidden;
}

.queue-section::before {
  content:"";
  position:absolute;
  left:18px;
  right:auto;
  top:0;
  width:min(360px, 42%);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--col), transparent);
  box-shadow:0 0 10px color-mix(in srgb, var(--col) 20%, transparent);
}

.col-queue { --col:var(--c-queue); }

.queue-head {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 4px 12px 8px;
  border-bottom:1px solid var(--line);
}

.queue-composer {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:stretch;
  padding:12px 2px;
}

#queueBulkInput {
  width:100%;
  min-height:86px;
  resize:vertical;
  line-height:1.48;
  padding:10px 12px;
}

.queue-composer-actions {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  min-width:150px;
}

#addQueueLinesBtn {
  align-self:stretch;
  justify-content:center;
  min-width:150px;
}

.queue-strip {
  display:flex;
  align-items:stretch;
  gap:9px;
  min-height:126px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 8px;
  scroll-snap-type:x proximity;
}

.queue-strip .card {
  flex:0 0 clamp(230px, 24vw, 300px);
  min-width:0;
  margin:0;
  scroll-snap-align:start;
}

.queue-strip:empty::after {
  flex:1 0 100%;
  min-width:220px;
}

.queue-strip.over {
  background:color-mix(in srgb, var(--c-queue) 9%, transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c-queue) 42%, transparent);
}

.task-accent-queue { --col:var(--c-queue); }

@media (max-width:700px) {
  .queue-composer {
    grid-template-columns:1fr;
  }

  #addQueueLinesBtn {
    min-height:42px;
  }

  .queue-strip .card {
    flex-basis:min(82vw, 290px);
  }
}


/* Queue polish: compact action button and content-height horizontal cards. */
.queue-composer {
  align-items:start;
}

#addQueueLinesBtn {
  align-self:stretch;
  width:100%;
  min-width:0;
  min-height:0;
  height:auto;
  padding:8px 16px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  color:var(--c-queue);
  border:1px solid color-mix(in srgb, var(--c-queue) 38%, var(--line));
  box-shadow:var(--sh-1);
}

#addQueueLinesBtn:hover {
  background:color-mix(in srgb, var(--c-queue) 10%, var(--surface-2));
  color:var(--c-queue);
  border-color:color-mix(in srgb, var(--c-queue) 58%, var(--line-2));
  filter:none;
}

.queue-strip {
  align-items:flex-start;
  min-height:0;
}

.queue-strip .card {
  align-self:flex-start;
  height:auto;
  min-height:0;
}

@media (max-width:700px) {
  .queue-composer-actions {
    width:100%;
    min-width:0;
  }

  #addQueueLinesBtn {
    min-height:0;
    justify-self:stretch;
  }
}


/* Queue masonry layout: wrap naturally instead of scrolling forever. */
.queue-strip {
  display:block;
  column-width:250px;
  column-gap:10px;
  overflow:visible;
  padding:2px 2px 8px;
}

.queue-strip .card {
  display:inline-block;
  width:100%;
  height:auto;
  min-height:0;
  margin:0 0 10px;
  break-inside:avoid;
  page-break-inside:avoid;
  vertical-align:top;
}

.queue-strip:empty::after {
  display:block;
  width:100%;
  min-width:0;
  break-inside:avoid;
}

/* Queue drag target still highlights the whole masonry area. */
.queue-strip.over {
  background:color-mix(in srgb, var(--c-queue) 9%, transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c-queue) 42%, transparent);
}

@media (max-width:700px) {
  .queue-strip {
    column-width:210px;
    column-gap:9px;
  }

  .queue-strip .card {
    width:100%;
  }

  .queue-head {
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .queue-head-actions {
    width:100%;
    margin-left:0;
    flex-wrap:wrap;
  }

  .queue-comma-toggle {
    margin-right:auto;
  }
}


.queue-head-actions {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.queue-comma-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:16px;
  color:var(--ink-3);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.025em;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}

.queue-comma-toggle:hover {
  color:var(--ink-2);
}

.queue-toggle-switch {
  position:relative;
  width:34px;
  height:20px;
  flex:none;
}

.queue-toggle-switch input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}

.queue-toggle-track {
  position:absolute;
  inset:0;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:var(--surface-3);
  transition:
    background .16s var(--ease),
    border-color .16s var(--ease);
}

.queue-toggle-thumb {
  position:absolute;
  top:3px;
  left:3px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ink-4);
  transition:
    transform .16s var(--ease),
    background .16s var(--ease);
}

.queue-toggle-switch input:checked + .queue-toggle-track {
  background:color-mix(in srgb, var(--c-queue) 18%, var(--surface-3));
  border-color:color-mix(in srgb, var(--c-queue) 58%, var(--line-2));
}

.queue-toggle-switch input:checked + .queue-toggle-track .queue-toggle-thumb {
  transform:translateX(14px);
  background:var(--c-queue);
}

.queue-toggle-switch input:focus-visible + .queue-toggle-track {
  outline:2px solid color-mix(in srgb, var(--c-queue) 55%, transparent);
  outline-offset:2px;
}

.queue-clear-btn {
  padding:5px 10px;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--danger);
  border:1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  box-shadow:none;
  font-size:11.5px;
}

.queue-clear-btn:hover {
  background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 45%, var(--line));
  color:var(--danger);
}

.queue-composer-actions .queue-clear-btn {
  width:100%;
  justify-content:center;
  padding:7px 12px;
}


/* ============================================================
   TASK CONTEXT MENU
   ============================================================ */
.task-context-menu {
  position:fixed;
  z-index:1400;
  display:none;
  min-width:150px;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:var(--sh-modal);
}

.task-context-menu.open {
  display:grid;
  gap:2px;
  animation:contextMenuIn .12s var(--ease-out) both;
}

@keyframes contextMenuIn {
  from { opacity:0; transform:translateY(-3px) scale(.98); }
  to { opacity:1; transform:none; }
}

.task-context-menu button {
  width:100%;
  justify-content:flex-start;
  padding:8px 10px;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--ink-2);
}

.task-context-menu button:hover {
  background:var(--surface-2);
  border-color:transparent;
  color:var(--ink);
}

.task-context-menu .context-delete {
  color:var(--danger);
}

.task-context-menu .context-delete:hover {
  background:var(--danger-soft);
  color:var(--danger);
}


/* ============================================================
   BULK SELECTION
   ============================================================ */
#bulkSelectBtn[aria-pressed="true"] {
  color:var(--c-queue);
  border-color:color-mix(in srgb, var(--c-queue) 45%, var(--line-2));
  background:color-mix(in srgb, var(--c-queue) 10%, var(--surface));
}

.card.is-selected {
  background:color-mix(in srgb, var(--c-queue) 6%, var(--surface-2));
  border-color:color-mix(in srgb, var(--c-queue) 42%, var(--line-2));
  box-shadow:
    var(--sh-1),
    0 0 0 2px color-mix(in srgb, var(--c-queue) 22%, transparent);
}

.card.is-selected::after {
  content:"✓";
  position:absolute;
  right:9px;
  bottom:8px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--c-queue);
  color:#fff;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
  box-shadow:0 2px 8px color-mix(in srgb, var(--c-queue) 24%, transparent);
}

.card.is-selected .card-actions {
  opacity:1;
}

body.selection-mode .card {
  cursor:pointer;
}

body.selection-mode .card:active {
  cursor:pointer;
}


.bulk-delete-btn {
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 36%, var(--line));
  background:var(--danger-soft);
}

.bulk-delete-btn:hover:not(:disabled) {
  color:var(--danger);
  background:color-mix(in srgb, var(--danger) 17%, transparent);
  border-color:color-mix(in srgb, var(--danger) 52%, var(--line-2));
}

.bulk-delete-btn:disabled {
  opacity:.45;
  cursor:default;
  transform:none;
}

@media (max-width:860px) {
  .bulk-delete-btn:not([hidden]) {
    display:inline-flex;
  }
}


/* ============================================================
   COMPACT DESKTOP TOP BAR
   ============================================================ */
@media (min-width:1101px) {
  .topbar-inner {
    padding:9px 22px;
    gap:10px;
    flex-wrap:nowrap;
  }

  .brand {
    flex:0 1 auto;
    min-width:170px;
  }

  .brand-wordmark {
    font-size:20px;
  }

  .board-title-input {
    min-width:90px;
    max-width:360px;
    font-size:27px;
    padding:1px 4px;
  }

  .composer {
    flex:1 1 430px;
    min-width:250px;
    max-width:520px;
    padding:3px 4px 3px 12px;
  }

  #newTaskInput {
    padding:6px 0;
  }

  .btn-primary {
    padding:7px 13px;
  }

  .topbar-actions {
    flex:0 0 auto;
    margin-left:0;
    gap:5px;
    flex-wrap:nowrap;
  }

  .topbar-actions button {
    padding:7px 10px;
    font-size:13px;
  }

  .topbar-actions .icon-btn {
    padding:8px;
  }
}

/* At medium widths, allow a clean second row rather than cramming controls. */
@media (min-width:861px) and (max-width:1100px) {
  .topbar-inner {
    padding:10px 18px;
    gap:9px 12px;
  }

  .brand {
    flex:0 1 320px;
  }

  .composer {
    flex:1 1 360px;
    max-width:none;
  }

  .topbar-actions {
    flex-basis:100%;
    justify-content:flex-end;
    margin-left:0;
  }
}



/* Persistent sub-task selection indicator on board task cards. */
.card.has-selected-subtasks {
  outline:2px solid color-mix(in srgb, var(--c-queue) 68%, transparent);
  outline-offset:1px;
}

.subtask-selection-chip {
  color:color-mix(in srgb, var(--c-queue) 88%, white 12%);
  background:color-mix(in srgb, var(--c-queue) 18%, var(--surface));
  border-color:color-mix(in srgb, var(--c-queue) 72%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-queue) 28%, transparent),
    0 0 12px color-mix(in srgb, var(--c-queue) 30%, transparent);
  font-weight:800;
  letter-spacing:.035em;
}

.subtask-selection-chip[hidden] {
  display:none;
}

/* SOURCE: css/30-settings-managers.css */
/* ============================================================
   SETTINGS MODAL
   ============================================================ */
.modal.settings-modal {
  --col:var(--c-todo);
  width:min(430px, 100%);
}

.settings-actions {
  display:grid;
  gap:9px;
}

.settings-actions > button {
  width:100%;
  justify-content:flex-start;
  padding:11px 13px;
}

.settings-divider {
  height:1px;
  background:var(--line);
  margin:4px 0;
}

.settings-reset-btn {
  color:var(--danger);
  background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 30%, var(--line));
}

.settings-reset-btn:hover {
  color:var(--danger);
  background:color-mix(in srgb, var(--danger) 16%, transparent);
  border-color:color-mix(in srgb, var(--danger) 45%, var(--line-2));
}

.settings-danger-actions {
  display:grid;
  gap:9px;
}

.settings-danger-actions > button {
  width:100%;
  justify-content:flex-start;
  padding:11px 13px;
}

.settings-modal {
  width:min(500px, 100%);
}


.task-title-format-settings {
  display:grid;
  gap:11px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.task-title-format-heading {
  display:grid;
  gap:3px;
}

.task-title-format-heading strong {
  font-family:var(--font-display);
  font-size:14px;
}

.task-title-format-heading span {
  color:var(--ink-3);
  font-size:11px;
  line-height:1.45;
}

.task-title-format-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.task-title-format-row > span {
  min-width:0;
  display:grid;
  gap:2px;
}

.task-title-format-row strong {
  color:var(--ink-2);
  font-size:12px;
}

.task-title-format-row small {
  color:var(--ink-4);
  font-size:10.5px;
  line-height:1.35;
}

#taskTitleCapitalizationSelect {
  flex:none;
  width:174px;
  height:34px;
  padding:5px 8px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

@media (max-width:540px) {
  .task-title-format-row {
    align-items:stretch;
    flex-direction:column;
  }

  #taskTitleCapitalizationSelect {
    width:100%;
  }
}

.urgent-reminder-settings {
  display:grid;
  gap:11px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.urgent-reminder-heading > div {
  display:grid;
  gap:3px;
}

.urgent-reminder-heading strong {
  font-family:var(--font-display);
  font-size:14px;
}

.urgent-reminder-heading span,
.urgent-reminder-help {
  color:var(--ink-3);
  font-size:11px;
  line-height:1.45;
}

.urgent-reminder-time-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.urgent-reminder-time-row > span {
  min-width:0;
  display:grid;
  gap:2px;
}

.urgent-reminder-time-row strong {
  color:var(--ink-2);
  font-size:12px;
}

.urgent-reminder-time-row small {
  color:var(--ink-4);
  font-size:10.5px;
  line-height:1.35;
}

#urgentReminderTimeInput,
#pausedReminderTimeInput {
  flex:none;
  width:126px;
  height:34px;
  padding:5px 8px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

.urgent-reminder-help {
  margin:0;
}

@media (max-width:540px) {
  .urgent-reminder-time-row {
    align-items:stretch;
    flex-direction:column;
  }

  #urgentReminderTimeInput,
  #pausedReminderTimeInput {
    width:100%;
  }
}


.auto-backup-settings {
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.auto-backup-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.auto-backup-copy {
  min-width:0;
  display:grid;
  gap:3px;
}

.auto-backup-copy strong {
  font-family:var(--font-display);
  font-size:14px;
}

.auto-backup-copy span,
.auto-backup-meta,
.auto-backup-folder-state {
  color:var(--ink-3);
  font-size:11px;
  line-height:1.45;
}

.auto-backup-toggle {
  flex:none;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:700;
}

.auto-backup-toggle input {
  width:16px;
  height:16px;
  margin:0;
}

.auto-backup-folder-row {
  display:block;
}

.auto-backup-folder-copy {
  min-width:0;
  display:grid;
  gap:2px;
}

.auto-backup-folder-copy strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.auto-backup-storage-actions {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.auto-backup-storage-actions button {
  min-width:0;
  padding:8px 9px;
  white-space:normal;
}

.auto-backup-storage-actions button[hidden] {
  display:none !important;
}

.auto-backup-interval-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:12px;
}

.auto-backup-interval-row select {
  min-width:110px;
  padding:7px 9px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

.auto-backup-onboarding-modal {
  --col:var(--c-todo);
  width:min(520px, 100%);
}

.auto-backup-onboarding-body {
  display:grid;
  gap:13px;
}

.auto-backup-onboarding-body p {
  margin:0;
  color:var(--ink-2);
  font-size:13px;
  line-height:1.6;
}

.auto-backup-onboarding-note {
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.5;
}

.auto-backup-onboarding-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:4px;
}

.auto-backup-browser-support {
  display:grid;
  gap:4px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink-3);
  font-size:11px;
  line-height:1.45;
}

.auto-backup-browser-support strong {
  color:var(--ink-2);
  font-size:11px;
}

.auto-backup-browser-support[hidden] {
  display:none !important;
}

@media (max-width:540px) {
  .auto-backup-heading {
    flex-direction:column;
  }

  .auto-backup-folder-row {
    display:block;
  }

  .auto-backup-storage-actions {
    grid-template-columns:1fr;
  }

  .auto-backup-interval-row {
    align-items:stretch;
    flex-direction:column;
  }

  .auto-backup-interval-row select {
    width:100%;
  }

  .auto-backup-onboarding-actions {
    flex-direction:column-reverse;
  }

  .auto-backup-onboarding-actions button {
    width:100%;
  }
}

.auto-backup-file-manager-modal {
  --col:var(--c-todo);
  width:min(650px, 100%);
}

.auto-backup-file-manager-body {
  display:grid;
  gap:13px;
}

.auto-backup-manager-summary {
  display:grid;
  gap:3px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.auto-backup-manager-summary > span {
  color:var(--ink-3);
  font-size:11px;
  line-height:1.45;
}

.auto-backup-manager-summary > strong {
  color:var(--ink);
  font-size:14px;
}

.auto-backup-manager-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.auto-backup-manager-toolbar > div {
  display:flex;
  align-items:baseline;
  gap:8px;
}

.auto-backup-manager-toolbar strong {
  font-size:12px;
}

.auto-backup-manager-toolbar span {
  color:var(--ink-3);
  font-size:11px;
}

.auto-backup-managed-file-list {
  display:grid;
  gap:7px;
  max-height:min(45vh, 390px);
  overflow:auto;
  padding-right:2px;
}

.auto-backup-managed-file-row {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
}

.auto-backup-managed-file-row input {
  width:17px;
  height:17px;
  margin:0;
}

.auto-backup-managed-file-copy {
  min-width:0;
  display:grid;
  gap:3px;
}

.auto-backup-managed-file-copy strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.auto-backup-managed-file-copy span,
.auto-backup-managed-file-status {
  color:var(--ink-3);
  font-size:10.5px;
  line-height:1.35;
}

.auto-backup-managed-file-status[data-status="verified"] {
  color:var(--c-soon);
}

.auto-backup-managed-file-status[data-status="changed"],
.auto-backup-managed-file-status[data-status="unavailable"] {
  color:var(--c-tomorrow);
}

.auto-backup-manager-empty {
  padding:24px 14px;
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
  color:var(--ink-3);
  text-align:center;
  font-size:12px;
  line-height:1.5;
}

.auto-backup-manager-empty[hidden] {
  display:none !important;
}

.auto-backup-manager-primary-actions,
.auto-backup-manager-folder-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.auto-backup-manager-primary-actions button,
.auto-backup-manager-folder-actions button {
  min-height:38px;
}

.auto-backup-manager-folder-actions {
  padding-top:12px;
  border-top:1px solid var(--line);
}

.auto-backup-manager-folder-actions button[hidden] {
  display:none !important;
}

.auto-backup-manager-safety-note {
  margin:0;
  color:var(--ink-3);
  font-size:10.5px;
  line-height:1.45;
}

@media (max-width:540px) {
  .auto-backup-manager-toolbar {
    align-items:stretch;
    flex-direction:column;
  }

  .auto-backup-manager-toolbar button,
  .auto-backup-manager-primary-actions button,
  .auto-backup-manager-folder-actions button {
    width:100%;
  }

  .auto-backup-manager-folder-actions {
    flex-direction:column;
  }

  .auto-backup-managed-file-row {
    grid-template-columns:auto minmax(0, 1fr);
  }

  .auto-backup-managed-file-status {
    grid-column:2;
  }
}


/* v0.27: hidden really means hidden, despite the global button display rule. */
#deleteSelectedBtn[hidden] {
  display:none !important;
}

/* Give the desktop Add Task composer more room without increasing topbar height. */
@media (min-width:1101px) {
  .brand {
    flex:0 1 285px;
    min-width:180px;
  }

  .composer {
    flex:1 1 620px;
    min-width:360px;
    max-width:760px;
  }
}


/* ============================================================
   DIRECT SECTION ADD
   ============================================================ */
.column-head-actions {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
}

.section-board-drag-handle {
  width:28px;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  height:28px;
  min-width:28px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:var(--ink-4);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  cursor:grab;
}

.section-board-drag-handle:hover {
  color:var(--col);
  background:color-mix(in srgb, var(--col) 10%, transparent);
  border-color:color-mix(in srgb, var(--col) 24%, var(--line));
}

.section-board-drag-handle:active {
  cursor:grabbing;
}

.board.section-placement-active > section.column,
.board.section-placement-active > section.queue-section {
  opacity:.16;
  filter:saturate(.45);
  pointer-events:none;
}

.section-placement-grid {
  --placement-columns:4;
  position:absolute;
  inset:0;
  z-index:80;
  display:grid;
  grid-template-columns:repeat(var(--placement-columns), minmax(0, 1fr));
  grid-auto-rows:minmax(110px, auto);
  align-content:stretch;
  gap:18px;
  padding:2px;
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--canvas) 72%, transparent);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.section-placement-slot {
  position:relative;
  min-height:110px;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  border:2px dashed var(--line-2);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--surface) 76%, transparent);
  color:var(--ink-3);
  box-shadow:none;
}

.section-placement-slot:hover,
.section-placement-slot.is-over {
  border-color:color-mix(in srgb, var(--c-queue) 65%, var(--line-2));
  background:color-mix(in srgb, var(--c-queue) 10%, var(--surface));
  color:var(--ink);
  filter:none;
}

.section-placement-slot.is-source {
  border-style:solid;
  border-color:color-mix(in srgb, var(--ink-4) 38%, var(--line));
  opacity:.58;
}

.section-placement-slot.is-empty {
  background:color-mix(in srgb, var(--surface) 48%, transparent);
}

.section-placement-slot.is-empty .section-placement-slot-name {
  color:var(--ink-4);
  font-weight:500;
}

.section-placement-queue-marker,
.section-placement-queue-top {
  grid-column:1 / -1;
  min-height:54px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:var(--r-lg);
  border:2px solid color-mix(in srgb, var(--c-queue) 34%, var(--line));
  background:color-mix(in srgb, var(--c-queue) 9%, var(--surface));
  color:var(--ink);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
}

.section-placement-queue-marker {
  pointer-events:none;
}

.section-placement-queue-top {
  border-style:dashed;
  cursor:grab;
}

.section-placement-queue-top:hover,
.section-placement-queue-top.is-over {
  border-color:color-mix(in srgb, var(--c-queue) 72%, var(--line-2));
  background:color-mix(in srgb, var(--c-queue) 16%, var(--surface));
}

.section-placement-queue-top.is-source {
  border-style:solid;
  opacity:.64;
}

.section-placement-slot.is-queue-source-row {
  border-color:color-mix(in srgb, var(--c-queue) 52%, var(--line-2));
  background:color-mix(in srgb, var(--c-queue) 8%, var(--surface));
}

.section-placement-slot-index {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-4);
}

.section-placement-slot-name {
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  color:var(--ink);
  overflow-wrap:anywhere;
}

body.section-board-dragging .card {
  pointer-events:none;
}

.section-add-btn {
  width:27px;
  height:27px;
  min-width:27px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--col) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--col) 28%, var(--line));
  color:var(--col);
  box-shadow:none;
  font-size:18px;
  font-weight:400;
  line-height:1;
}

.section-add-btn:hover {
  background:color-mix(in srgb, var(--col) 18%, transparent);
  border-color:color-mix(in srgb, var(--col) 48%, var(--line-2));
  color:var(--col);
}

.section-add-modal {
  width:min(460px, 100%);
}

.section-add-form {
  display:flex;
  gap:8px;
}

.section-add-form input {
  flex:1;
  min-width:0;
}

.section-add-form .btn-primary {
  flex:none;
}

.section-add-modal.task-accent-todo     { --col:var(--c-todo); }
.section-add-modal.task-accent-later    { --col:var(--c-later); }
.section-add-modal.task-accent-today    { --col:var(--c-today); }
.section-add-modal.task-accent-tomorrow { --col:var(--c-tomorrow); }
.section-add-modal.task-accent-soon     { --col:var(--c-soon); }

@media (max-width:520px) {
  .section-add-form {
    display:grid;
    grid-template-columns:1fr;
  }

  .section-add-form .btn-primary {
    justify-content:center;
  }
}


/* v0.30: direct-add button replaces the decorative section dot. */
.section-add-inline {
  flex:none;
  width:23px;
  height:23px;
  min-width:23px;
  font-size:16px;
  margin-right:1px;
}


/* ============================================================
   QUEUE MOVE-ALL CONTROL
   ============================================================ */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.queue-move-all {
  display:flex;
  align-items:center;
  gap:6px;
}

#queueMoveTarget {
  max-width:150px;
  min-width:110px;
  height:30px;
  padding:4px 28px 4px 9px;
  border-radius:var(--r-pill);
  font-size:11.5px;
  color:var(--ink-2);
  background:var(--surface-2);
  border:1px solid var(--line);
}

#moveAllQueueBtn {
  height:30px;
  padding:5px 11px;
  white-space:nowrap;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--c-queue) 9%, transparent);
  color:var(--c-queue);
  border:1px solid color-mix(in srgb, var(--c-queue) 30%, var(--line));
  box-shadow:none;
  font-size:11.5px;
}

#moveAllQueueBtn:hover:not(:disabled) {
  background:color-mix(in srgb, var(--c-queue) 16%, transparent);
  border-color:color-mix(in srgb, var(--c-queue) 48%, var(--line-2));
  color:var(--c-queue);
}

#moveAllQueueBtn:disabled,
#queueMoveTarget:disabled {
  opacity:.45;
  cursor:default;
}

@media (max-width:900px) {
  .queue-head {
    align-items:flex-start;
  }

  .queue-head-actions {
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .queue-move-all {
    order:2;
    flex-basis:100%;
    justify-content:flex-end;
  }
}


/* ============================================================
   TASK SECTION PICKER
   One shared dropdown lives in the task modal. Its six option
   labels are refreshed only when section names change.
   ============================================================ */
.task-section-field {
  display:flex;
  align-items:center;
  gap:8px;
  margin:-3px 0 16px;
}

.task-section-field .notes-label {
  margin:0;
  flex:none;
}

#taskSectionSelect {
  width:auto;
  min-width:110px;
  max-width:170px;
  height:30px;
  padding:4px 28px 4px 9px;
  font-size:11.5px;
  color:var(--ink-2);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  outline:none;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}

#taskSectionSelect:focus {
  background:var(--surface);
  border-color:color-mix(in srgb, var(--col, var(--c-later)) 55%, var(--line-2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--col, var(--c-later)) 12%, transparent);
}


/* v0.38 copy/paste context menus */
#sectionContextMenu {
  min-width:190px;
  max-width:min(320px, calc(100vw - 16px));
}

#sectionContextMenu button,
#taskContextMenu button {
  white-space:nowrap;
}


/* ============================================================
   TOPBAR COPY / PASTE
   ============================================================ */
#copySelectedBtn[hidden],
#bulkPasteBtn[hidden] {
  display:none !important;
}

.bulk-copy-btn,
.bulk-paste-btn {
  white-space:nowrap;
}

.bulk-copy-btn {
  color:var(--c-queue);
  background:color-mix(in srgb, var(--c-queue) 8%, var(--surface));
  border-color:color-mix(in srgb, var(--c-queue) 28%, var(--line));
}

.bulk-copy-btn:hover:not(:disabled) {
  color:var(--c-queue);
  background:color-mix(in srgb, var(--c-queue) 15%, var(--surface));
  border-color:color-mix(in srgb, var(--c-queue) 45%, var(--line-2));
}

.bulk-paste-btn {
  color:var(--c-soon);
  background:color-mix(in srgb, var(--c-soon) 8%, var(--surface));
  border-color:color-mix(in srgb, var(--c-soon) 28%, var(--line));
}

.bulk-paste-btn:hover {
  color:var(--c-soon);
  background:color-mix(in srgb, var(--c-soon) 15%, var(--surface));
  border-color:color-mix(in srgb, var(--c-soon) 45%, var(--line-2));
}

.bulk-paste-modal {
  --col:var(--c-soon);
  width:min(390px, 100%);
}

.bulk-paste-form {
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px 10px;
  align-items:end;
}

.bulk-paste-destination-row {
  grid-column:1;
  display:grid;
  grid-template-columns:92px minmax(0, 1fr);
  align-items:center;
  gap:8px;
}

.bulk-paste-destination-row[hidden] {
  display:none;
}

.bulk-paste-form .notes-label {
  margin:0;
  flex:none;
}

#bulkPasteTarget,
#bulkPasteSubtaskTarget {
  width:100%;
  min-width:0;
  height:30px;
  padding:4px 28px 4px 9px;
  font-size:11.5px;
  color:var(--ink-2);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}

#bulkPasteConfirmBtn {
  grid-column:2;
  grid-row:1 / span 2;
  flex:none;
  padding:7px 12px;
}

@media (max-width:520px) {
  .bulk-paste-form {
    grid-template-columns:1fr;
  }

  .bulk-paste-destination-row {
    grid-template-columns:1fr;
    gap:4px;
  }

  #bulkPasteConfirmBtn {
    grid-column:1;
    grid-row:auto;
    justify-self:end;
  }
}


/* v0.43 selection controls */
#contextDeselectBtn[hidden] {
  display:none !important;
}


/* ============================================================
   TASK TAGS
   ============================================================ */
.task-meta-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:-3px 0 16px;
  min-width:0;
}

.task-meta-row .task-section-field {
  margin:0;
  flex:none;
}

.task-tags-area {
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
  flex-wrap:wrap;
  padding-top:0;
}

.add-task-tag-btn {
  height:30px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-3);
  border:1px dashed var(--line-2);
  box-shadow:none;
  font-size:11.5px;
  white-space:nowrap;
}

.add-task-tag-btn:hover {
  color:var(--col);
  background:color-mix(in srgb, var(--col) 8%, transparent);
  border-color:color-mix(in srgb, var(--col) 42%, var(--line-2));
}

.task-tag-entry {
  display:flex;
  align-items:center;
  gap:5px;
}

.task-tag-entry[hidden] {
  display:none !important;
}

#taskTagInput {
  width:112px;
  height:30px;
  padding:4px 9px;
  border-radius:var(--r-pill);
  font-size:11.5px;
}

#saveTaskTagBtn {
  height:30px;
  padding:4px 9px;
  border-radius:var(--r-pill);
  font-size:11.5px;
}

.task-tags-list {
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  min-width:0;
}

.task-tag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  max-width:180px;
  padding:3px 5px 3px 9px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--col) 10%, var(--surface-2));
  color:var(--ink-2);
  border:1px solid color-mix(in srgb, var(--col) 26%, var(--line));
  font-size:11.5px;
}

.task-tag-text {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.task-tag-remove {
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink-4);
  box-shadow:none;
  font-size:13px;
  line-height:1;
}

.task-tag-remove:hover {
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  color:var(--danger);
}

@media (max-width:620px) {
  .task-meta-row {
    flex-wrap:wrap;
    gap:8px;
  }

  .task-tags-area {
    flex-basis:100%;
  }
}


#addTaskTagBtn[hidden] {
  display:none !important;
}


/* ============================================================
   TAGS ON BOARD CARDS
   ============================================================ */
.card-tags {
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  margin-top:7px;
  padding-right:28px;
}

.card-tag {
  display:inline-flex;
  align-items:center;
  max-width:150px;
  min-height:21px;
  padding:2px 7px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--col) 10%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--col) 24%, var(--line));
  color:var(--ink-3);
  font-size:10.5px;
  line-height:1.2;
}

.card-tag-text {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.queue-strip .card-tags {
  padding-right:24px;
}


/* ============================================================
   TAG SUGGESTIONS
   ============================================================ */
.task-tag-entry-wrap {
  position:relative;
  flex:none;
}

.task-tag-entry-wrap[hidden],
.task-tag-suggestions[hidden] {
  display:none !important;
}

.task-tag-suggestions {
  position:absolute;
  left:0;
  top:calc(100% + 5px);
  z-index:1505;
  display:grid;
  min-width:180px;
  max-width:min(300px, calc(100vw - 32px));
  max-height:220px;
  overflow:auto;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:var(--sh-modal);
}

.task-tag-suggestion {
  width:100%;
  min-height:30px;
  padding:6px 9px;
  justify-content:space-between;
  gap:14px;
  background:transparent;
  border:0;
  border-radius:var(--r-sm);
  box-shadow:none;
  color:var(--ink-2);
  font-size:11.5px;
  text-align:left;
}

.task-tag-suggestion:hover,
.task-tag-suggestion.is-active {
  background:color-mix(in srgb, var(--col) 10%, var(--surface-2));
  color:var(--ink);
}

.task-tag-suggestion-name {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.task-tag-suggestion-count {
  flex:none;
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--ink-4);
}

.task-tag-suggestions-empty {
  padding:7px 9px;
  color:var(--ink-4);
  font-size:11px;
}


/* ============================================================
   GLOBAL TAG COLORS + TAG MANAGER
   ============================================================ */
.tag-color-picker{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tag-color-picker-compact{margin-top:7px;padding-left:2px}
.tag-color-choice{
  --choice-color:var(--tag-blue);
  width:18px;height:18px;min-width:18px;padding:0;display:block;
  border-radius:50%;background:var(--choice-color);border:2px solid transparent;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--choice-color) 38%,var(--line));
}
.tag-color-choice:hover{transform:scale(1.08);filter:none}
.tag-color-choice.is-selected{
  border-color:var(--surface);
  box-shadow:0 0 0 2px var(--ink),0 0 0 3px color-mix(in srgb,var(--choice-color) 45%,transparent);
}
.tag-color-dot,.tag-suggestion-dot{
  --tag-color:var(--tag-blue);
  display:inline-block;width:10px;height:10px;min-width:10px;border-radius:50%;
  background:var(--tag-color);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tag-color) 34%,var(--line));
}
.task-tag,.card-tag{
  background:color-mix(in srgb,var(--tag-color,var(--col)) 11%,var(--surface-2));
  border-color:color-mix(in srgb,var(--tag-color,var(--col)) 35%,var(--line));
}
.task-tag{color:color-mix(in srgb,var(--tag-color,var(--ink-2)) 48%,var(--ink))}
.card-tag{color:color-mix(in srgb,var(--tag-color,var(--ink-3)) 55%,var(--ink))}
.tag-manager-modal{--col:var(--c-later);width:min(760px,100%)}
.tag-manager-modal .modal-header{align-items:flex-start}
.tag-manager-help{margin:4px 0 0;color:var(--ink-3);font-size:12px}
.tag-manager-list{display:grid;gap:8px;max-height:min(62vh,560px);overflow:auto;padding-right:3px}
.tag-manager-empty{padding:28px 12px;text-align:center;color:var(--ink-4);border:1px dashed var(--line-2);border-radius:var(--r-md)}
.tag-manager-row{
  display:grid;grid-template-columns:minmax(150px,1fr) auto auto auto;
  align-items:center;gap:12px;padding:9px 10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md)
}
.tag-manager-name-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.tag-manager-name{min-width:0;width:100%;height:32px;padding:5px 8px;font-size:12px}
.tag-manager-count{min-width:68px;text-align:right;color:var(--ink-4);font-family:var(--font-mono);font-size:9.5px;white-space:nowrap}
.tag-manager-colors{display:flex;align-items:center;gap:5px}
.tag-manager-colors .tag-color-choice{width:17px;height:17px;min-width:17px}
.tag-manager-delete{
  width:30px;height:30px;min-width:30px;padding:0;display:grid;place-items:center;
  color:var(--danger);background:transparent;border-color:transparent;box-shadow:none
}
.tag-manager-delete:hover{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 25%,var(--line))}
.task-tag-suggestion-main{display:flex;align-items:center;gap:7px;min-width:0}
@media(max-width:700px){
  .tag-manager-row{grid-template-columns:minmax(0,1fr) auto}
  .tag-manager-colors{grid-column:1/-1}
}


/* ============================================================
   TAG SPOTLIGHT
   ============================================================ */
.card {
  transition:
    opacity .16s var(--ease),
    filter .16s var(--ease),
    background .16s var(--ease),
    border-color .16s var(--ease),
    box-shadow .16s var(--ease),
    transform .16s var(--ease);
}

.card.tag-filter-dimmed {
  opacity:.28;
  filter:grayscale(.82) saturate(.35);
}

.card.tag-filter-match {
  opacity:1;
  filter:none;
}

.card.tag-filter-match .card-tag.is-filter-active {
  box-shadow:
    0 0 0 1px var(--surface),
    0 0 0 2px var(--tag-color);
}

.card-tag {
  cursor:pointer;
  box-shadow:none;
}

button.card-tag {
  font:inherit;
}

.card-tag:hover {
  background:color-mix(in srgb, var(--tag-color, var(--col)) 18%, var(--surface-2));
  border-color:color-mix(in srgb, var(--tag-color, var(--col)) 52%, var(--line-2));
  color:var(--ink);
}

.card.tag-filter-dimmed:hover {
  opacity:.46;
}

@media (prefers-reduced-motion:reduce) {
  .card { transition:none; }
}


/* ============================================================
   CUSTOM SECTIONS
   ============================================================ */
.column.custom-column {
  min-height:320px;
}

.custom-column .col-when {
  color:var(--ink-4);
}

/* ============================================================
   SECTION MANAGER + BOARD ORDER
   ============================================================ */
.section-manager-modal {
  --col:var(--c-queue);
  width:min(830px, 100%);
}

.section-manager-modal .modal-header {
  align-items:flex-start;
}

.section-manager-help {
  margin:4px 0 0;
  color:var(--ink-3);
  font-size:12px;
}

.section-manager-add {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

#sectionManagerNewName {
  flex:1;
  min-width:0;
}

.section-manager-list {
  display:grid;
  gap:7px;
  max-height:min(62vh, 560px);
  overflow:auto;
  padding-right:3px;
}

.section-manager-row {
  --section-color:var(--c-todo);
  display:grid;
  grid-template-columns:auto auto minmax(120px,1fr) auto auto auto;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}

.section-manager-row.is-dragging {
  opacity:.42;
}

.section-manager-row.is-drag-over {
  border-color:color-mix(in srgb, var(--section-color) 55%, var(--line-2));
  background:color-mix(in srgb, var(--section-color) 8%, var(--surface-2));
}

.section-manager-grip {
  width:26px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  height:30px;
  display:grid;
  place-items:center;
  cursor:grab;
  color:var(--ink-4);
  border-radius:6px;
  user-select:none;
}

.section-manager-grip:active {
  cursor:grabbing;
}

.section-manager-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--section-color);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--section-color) 15%, transparent);
}

.section-manager-name {
  min-width:0;
  height:32px;
  padding:5px 8px;
  font-size:12px;
}

.section-manager-colors {
  display:flex;
  align-items:center;
  gap:5px;
}

.section-manager-colors .section-color-choice {
  width:17px;
  height:17px;
  min-width:17px;
}

.section-manager-count {
  min-width:58px;
  text-align:right;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:9.5px;
  white-space:nowrap;
}


.section-manager-delete {
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  display:grid;
  place-items:center;
  color:var(--danger);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

.section-manager-delete:hover {
  color:var(--danger);
  background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 25%, var(--line));
}

.board > .queue-section {
  grid-column:1 / -1;
  width:100%;
  min-width:0;
  margin:0 0 18px;
  grid-row-end:span var(--queue-masonry-span, 1);
}


@media (max-width:560px) {
  .section-manager-add {
    align-items:stretch;
    flex-direction:column;
  }

  .section-manager-row {
    grid-template-columns:auto auto minmax(0,1fr) auto auto;
  }

  .section-manager-colors {
    grid-column:3 / -1;
    grid-row:2;
    justify-self:start;
  }
}


/* ============================================================
   SECTION DELETE SAFETY
   ============================================================ */
.section-manager-delete:disabled {
  opacity:.28;
  cursor:not-allowed;
  color:var(--ink-4);
  background:transparent;
  border-color:transparent;
}

.section-manager-delete:disabled:hover {
  color:var(--ink-4);
  background:transparent;
  border-color:transparent;
}

.section-delete-warning-modal {
  --col:var(--danger);
  width:min(590px, 100%);
}

.section-delete-warning-modal .modal-header {
  align-items:flex-start;
}

.section-delete-warning-kicker {
  margin:4px 0 0;
  color:var(--danger);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.section-delete-warning-box {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:18px;
  border:2px solid color-mix(in srgb, var(--danger) 55%, var(--line));
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--danger) 11%, var(--surface-2));
  color:var(--danger);
}

.section-delete-warning-box > svg {
  margin-top:1px;
}

.section-delete-warning-box strong {
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:17px;
  line-height:1.35;
}

.section-delete-warning-box p {
  margin:0;
  color:var(--ink-2);
  font-size:13px;
  line-height:1.55;
}

.section-delete-warning-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

.section-delete-confirm-btn {
  min-width:235px;
  justify-content:center;
}

@media (max-width:520px) {
  .section-delete-warning-actions {
    align-items:stretch;
    flex-direction:column-reverse;
  }

  .section-delete-warning-actions > button {
    width:100%;
    justify-content:center;
  }

  .section-delete-confirm-btn {
    min-width:0;
  }
}


/* ============================================================
   STYLED APP WARNINGS / CONFIRMATIONS
   ============================================================ */
.app-dialog-backdrop {
  z-index:2200;
}

.app-dialog-modal {
  --col:var(--danger);
  width:min(590px, 100%);
}

.app-dialog-modal .modal-header {
  align-items:flex-start;
}

.app-dialog-warning-box p[hidden],
#appDialogCancelBtn[hidden] {
  display:none !important;
}


/* ============================================================
   SESSION UNDO / REDO
   ============================================================ */
.history-actions {
  display:grid;
  grid-template-columns:repeat(2, 168px);
  gap:5px;
  flex:none;
}

.history-slot {
  display:block;
  width:168px;
  min-width:168px;
  height:34px;
}

.history-btn {
  width:100%;
  height:34px;
  min-width:0;
  padding:7px 11px;
  justify-content:flex-start;
  overflow:hidden;
}

.history-btn > span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.history-btn[hidden] {
  display:none !important;
}

@media (max-width:1100px) {
  .history-actions {
    grid-template-columns:repeat(2, 158px);
  }

  .history-slot {
    width:158px;
    min-width:158px;
  }
}

@media (max-width:640px) {
  .history-actions {
    grid-template-columns:repeat(2, 148px);
  }

  .history-slot {
    width:148px;
    min-width:148px;
  }

  .history-btn {
    font-size:12px;
  }
}

/* ============================================================
   BROWSER NAVIGATION SETTINGS
   ============================================================ */
.browser-navigation-settings {
  display:grid;
  gap:14px;
}

.browser-navigation-heading {
  display:grid;
  gap:3px;
}

.browser-navigation-heading strong {
  font-family:var(--font-display);
  font-size:14px;
}

.browser-navigation-heading span {
  color:var(--ink-3);
  font-size:11px;
  line-height:1.45;
}

.browser-navigation-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.browser-navigation-toggle-row > span:first-child {
  min-width:0;
  display:grid;
  gap:2px;
}

.browser-navigation-toggle-row strong {
  color:var(--ink-2);
  font-size:12px;
}

.browser-navigation-toggle-row small {
  color:var(--ink-4);
  font-size:10.5px;
  line-height:1.35;
}

.browser-navigation-toggle-control {
  flex:none;
}

.browser-navigation-toggle-control input {
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--accent);
}

/* Experimental browser/device Back diagnostics. Retained but hidden in normal builds for future field diagnosis. */
.browser-navigation-setting-title-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.experimental-setting-badge {
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:2px 7px;
  border:1px solid color-mix(in srgb, var(--c-tomorrow) 48%, var(--line));
  border-radius:999px;
  background:color-mix(in srgb, var(--c-tomorrow) 12%, var(--surface));
  color:var(--ink-2);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
}

.browser-navigation-debug-badge[hidden] {
  display:none !important;
}

.browser-navigation-debug-badge {
  position:fixed;
  left:10px;
  bottom:10px;
  z-index:100000;
  display:grid;
  gap:1px;
  min-width:150px;
  max-width:min(300px, calc(100vw - 20px));
  padding:7px 9px;
  border:1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius:10px;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow:0 5px 18px rgba(0,0,0,.16);
  color:var(--ink-2);
  pointer-events:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.browser-navigation-debug-kicker {
  color:var(--accent);
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.2;
  text-transform:uppercase;
}

.browser-navigation-debug-badge strong {
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.25;
}

.browser-navigation-debug-badge small {
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:8.5px;
  line-height:1.25;
}

@media (max-width:640px) {
  .browser-navigation-debug-badge {
    left:7px;
    bottom:7px;
    min-width:132px;
    padding:6px 8px;
    border-radius:9px;
  }

  .browser-navigation-debug-badge strong {
    font-size:10px;
  }

  .browser-navigation-debug-badge small {
    font-size:8px;
  }
}

/* ============================================================
   v0.1.63 modern Settings workspace
   ============================================================ */
.modal.settings-modal {
  --col:var(--c-todo);
  width:min(940px, 100%);
  height:min(86vh, 820px);
  max-height:min(86vh, 820px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}

.settings-modal::before {
  z-index:2;
  left:22px;
  right:auto;
  width:min(300px, 42%);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--col), transparent);
  box-shadow:0 0 10px color-mix(in srgb, var(--col) 20%, transparent);
}

.settings-modal-header {
  flex:0 0 auto;
  align-items:center;
  margin:0;
  padding:21px 24px 17px;
  border-bottom:1px solid var(--line);
}

.settings-modal-header > div:first-child {
  min-width:0;
  display:grid;
  gap:3px;
}

.settings-modal-header h3 {
  font-size:21px;
}

.settings-modal-header p,
.settings-page-heading p,
.settings-subheading span {
  margin:0;
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.45;
}

.settings-layout {
  flex:1 1 auto;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  min-height:0;
  max-height:none;
}

.settings-sidebar {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 12px;
  border-right:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

.settings-nav-btn {
  width:100%;
  min-height:40px;
  justify-content:flex-start;
  padding:9px 12px;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:var(--ink-3);
  font-weight:650;
}

.settings-nav-btn:hover {
  border-color:var(--line);
  background:var(--surface);
  color:var(--ink);
}

.settings-nav-btn.is-active,
.settings-nav-btn[aria-current="page"] {
  border-color:color-mix(in srgb, var(--c-todo) 24%, var(--line));
  background:color-mix(in srgb, var(--c-todo) 10%, var(--surface));
  color:var(--ink);
}

.settings-content {
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:24px 28px 32px;
}

.settings-page {
  display:none;
  min-width:0;
}

.settings-page.is-active {
  display:block;
}

.settings-page-heading {
  display:grid;
  gap:4px;
  margin-bottom:20px;
}

.settings-page-heading h4 {
  margin:0;
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:-.02em;
}

.settings-group,
.settings-section {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.settings-group + .settings-subheading,
.settings-section + .settings-subheading,
.settings-details + .settings-subheading {
  margin-top:24px;
}

.settings-row {
  min-height:66px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px, 220px);
  align-items:center;
  gap:24px;
  padding:12px 2px;
  border-bottom:1px solid var(--line);
}

.settings-row:last-child {
  border-bottom:0;
}

.settings-row-copy {
  min-width:0;
  display:grid;
  gap:3px;
}

.settings-row-copy strong,
.settings-subheading strong {
  color:var(--ink-2);
  font-size:13px;
}

.settings-row-copy small {
  color:var(--ink-4);
  font-size:11px;
  line-height:1.45;
}

.settings-row-title-line {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.settings-control-slot {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}

.settings-column-stepper {
  display:grid;
  grid-template-columns:32px 42px 32px;
  align-items:center;
  gap:5px;
}

.settings-column-stepper button {
  width:32px;
  height:30px;
  min-width:32px;
  padding:0;
  justify-content:center;
}

#sectionColumnsValue {
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
}

.settings-control-slot select,
.settings-control-slot input[type="time"] {
  width:100%;
  max-width:190px;
  min-height:36px;
  padding:6px 9px;
  color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

.settings-row-action {
  min-width:118px;
  justify-content:center;
}

.settings-subheading {
  display:grid;
  gap:3px;
  margin:0 0 8px;
}

.settings-danger-group {
  border-color:color-mix(in srgb, var(--danger) 25%, var(--line));
}

.settings-switch {
  position:relative;
  flex:none;
  width:42px;
  height:24px;
  display:inline-flex;
}

.settings-switch input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.settings-switch-track {
  width:42px;
  height:24px;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:var(--surface-3, var(--surface-2));
  transition:background .16s var(--ease), border-color .16s var(--ease);
}

.settings-switch-track::after {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent);
  transition:transform .16s var(--ease);
}

.settings-switch input:checked + .settings-switch-track {
  border-color:color-mix(in srgb, var(--c-todo) 58%, var(--line));
  background:var(--c-todo);
}

.settings-switch input:checked + .settings-switch-track::after {
  transform:translateX(18px);
}

.settings-switch input:focus-visible + .settings-switch-track {
  outline:2px solid color-mix(in srgb, var(--c-todo) 48%, transparent);
  outline-offset:2px;
}

.settings-switch-state {
  width:24px;
  text-align:right;
  color:var(--ink-4);
  font-size:10.5px;
  font-weight:700;
}

.settings-section.storage-health-settings,
.settings-section.auto-backup-settings {
  gap:0;
  padding:0;
  border-left:0;
  border-right:0;
  border-radius:0;
  background:transparent;
}

.storage-health-heading {
  align-items:center;
  padding:12px 2px 10px;
}

.storage-meter {
  height:11px;
  margin:0 2px 10px;
}

.storage-health-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 2px 12px;
  color:var(--ink-4);
  font-size:11px;
}

.storage-health-summary strong {
  color:var(--ink-2);
  font-family:var(--font-mono);
  font-size:11px;
}

.settings-details {
  border-top:1px solid var(--line);
}

.settings-details summary {
  min-height:42px;
  display:flex;
  align-items:center;
  cursor:pointer;
  color:var(--ink-3);
  font-size:11.5px;
  font-weight:650;
  list-style:none;
}

.settings-details summary::-webkit-details-marker {
  display:none;
}

.settings-details summary::after {
  content:"+";
  margin-left:auto;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:15px;
}

.settings-details[open] summary::after {
  content:"−";
}

.settings-details[open] > :not(summary) {
  margin-bottom:12px;
}

.storage-health-grid {
  margin-top:2px;
}

.auto-backup-heading.settings-row {
  padding-left:2px;
  padding-right:2px;
}

.auto-backup-folder-row {
  padding:12px 2px;
  border-top:1px solid var(--line);
}

.auto-backup-storage-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 2px 12px;
}

.auto-backup-storage-actions button {
  flex:0 1 auto;
}

.auto-backup-interval-row {
  font-size:inherit;
}

.auto-backup-details {
  padding:0 2px;
}

.settings-advanced-backups {
  margin-top:24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.settings-advanced-backups p {
  margin:0 0 10px;
  color:var(--ink-4);
  font-size:11px;
  line-height:1.5;
}

.settings-advanced-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.settings-advanced-actions button {
  flex:1 1 180px;
}

.transfer-modal {
  width:min(650px, 100%);
}

.transfer-modal .modal-header > div:first-child {
  min-width:0;
  display:grid;
  gap:4px;
}

.transfer-help {
  margin:0;
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.45;
}

.transfer-data-label {
  display:block;
  margin-bottom:6px;
  color:var(--ink-3);
  font-size:11px;
  font-weight:650;
}

.transfer-data-box {
  min-height:240px;
  font-family:var(--font-mono);
  font-size:11px;
}

.transfer-actions {
  justify-content:flex-end;
}

@media (max-width:720px) {
  .modal.settings-modal {
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    padding:0;
  }

  .settings-modal-header {
    padding:18px 18px 14px;
  }

  .settings-layout {
    display:block;
    min-height:0;
    max-height:none;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  .settings-sidebar {
    position:sticky;
    top:0;
    z-index:2;
    flex-direction:row;
    overflow-x:auto;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid var(--line);
    background:var(--surface);
  }

  .settings-nav-btn {
    flex:0 0 auto;
    width:auto;
    min-height:38px;
    padding:8px 11px;
  }

  .settings-content {
    overflow:visible;
    padding:20px 18px 28px;
  }

  .settings-row {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding:13px 2px;
  }

  .settings-control-slot {
    justify-content:flex-start;
  }

  .settings-control-slot select,
  .settings-control-slot input[type="time"],
  .settings-row-action {
    width:100%;
    max-width:none;
  }

  .settings-switch-state + .settings-switch,
  .settings-row-control .settings-switch {
    width:42px;
  }

  .settings-row-control:has(.settings-switch) {
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  .settings-row-control:has(.settings-switch) .settings-control-slot {
    justify-content:flex-end;
  }

  .storage-health-grid {
    grid-template-columns:1fr;
  }

  .storage-health-general {
    grid-template-columns:1fr;
  }
}

/* Keep the Settings close action anchored to the far edge of the header. */
.settings-modal-header > div:first-child {
  flex:1 1 auto;
}

/* SOURCE: css/40-workspace-content.css */
/* ============================================================
   MULTI-BOARD TABS
   ============================================================ */
.board-tabs-shell {
  position:sticky;
  top:var(--topbar-height, 58px);
  z-index:55;
  background:color-mix(in srgb, var(--canvas) 92%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
}

.board-tabs-inner {
  max-width:1560px;
  margin:0 auto;
  padding:8px 28px 7px;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.board-tabs-list {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
}

.board-tab {
  flex:0 0 auto;
  max-width:220px;
  padding:7px 12px;
  border-radius:var(--r-pill);
  box-shadow:none;
  background:transparent;
  border-color:transparent;
  color:var(--ink-3);
  font-weight:600;
}

.board-tab > span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.board-tab:hover {
  background:var(--surface);
  border-color:var(--line);
}

.board-tab.is-active {
  background:var(--surface);
  border-color:var(--line-2);
  color:var(--ink);
  box-shadow:var(--sh-1);
}

.board-tabs-controls {
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
}

.board-more-wrap {
  position:relative;
}

.board-more-btn,
.board-add-tab-btn {
  height:34px;
  box-shadow:none;
}

.board-more-btn {
  width:190px;
  max-width:190px;
  min-width:190px;
  overflow:hidden;
}

#boardMoreLabel {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#boardMoreBtn[hidden],
.board-tab[hidden] {
  display:none !important;
}

.board-more-btn.is-active {
  color:var(--ink);
  border-color:var(--line-2);
  background:var(--surface);
}

.board-add-tab-btn {
  width:34px;
  padding:0;
  justify-content:center;
  border-radius:50%;
  font-size:19px;
  line-height:1;
}

.board-more-menu {
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:1500;
  width:min(300px, calc(100vw - 32px));
  max-height:360px;
  overflow:auto;
  padding:6px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--sh-modal);
  display:none;
}

.board-more-menu.open {
  display:grid;
  gap:3px;
}

.board-more-item {
  width:100%;
  justify-content:flex-start;
  box-shadow:none;
  border-color:transparent;
  background:transparent;
  overflow:hidden;
}

.board-more-item > span:first-child {
  overflow:hidden;
  text-overflow:ellipsis;
}

.board-more-item .board-more-check {
  margin-left:auto;
  color:var(--c-today);
  font-family:var(--font-mono);
  font-size:10px;
}

.board-manager-modal {
  --col:var(--c-today);
  width:min(760px, 100%);
}

.new-board-modal {
  --col:var(--c-today);
  width:min(520px, 100%);
}

.board-manager-list {
  display:grid;
  gap:7px;
  margin-top:14px;
}

.board-manager-row {
  display:grid;
  grid-template-columns:28px minmax(180px,1fr) auto auto auto auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.board-manager-row.is-active {
  border-color:color-mix(in srgb, var(--c-today) 55%, var(--line));
  background:color-mix(in srgb, var(--c-today) 7%, var(--surface-2));
}

.board-manager-row.is-dragging {
  opacity:.48;
}

.board-manager-grip {
  width:28px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  height:30px;
  padding:0;
  justify-content:center;
  cursor:grab;
  box-shadow:none;
  border-color:transparent;
  background:transparent;
}

.board-manager-name {
  width:100%;
  min-width:0;
}

.board-manager-count,
.board-manager-active {
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--ink-4);
  white-space:nowrap;
}

.board-manager-active {
  color:var(--c-today);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.board-manager-action {
  width:32px;
  height:32px;
  padding:0;
  justify-content:center;
}

.board-manager-action:disabled {
  opacity:.28;
  cursor:not-allowed;
}

@media (max-width:860px) {
  .board-tabs-inner { padding:8px 16px 7px; }
}

@media (max-width:620px) {
  .board-manager-row {
    grid-template-columns:26px minmax(120px,1fr) auto auto auto;
  }
  .board-manager-active { display:none; }
}


/* ============================================================
   FIXED TWO-ROW TOPBAR
   ============================================================ */
.topbar-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  padding:9px 22px 10px;
}

.topbar-row {
  width:100%;
  min-width:0;
}

.topbar-primary-row {
  display:grid;
  grid-template-columns:auto minmax(120px, 1fr) auto;
  align-items:center;
  gap:10px;
}

.topbar-secondary-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:34px;
}

.brand {
  flex:none;
  min-width:0;
  max-width:min(500px, 42vw);
  overflow:hidden;
}

.board-title-input {
  width:auto;
  min-width:0;
  max-width:min(420px, 32vw);
  field-sizing:content;
  overflow:hidden;
  text-overflow:ellipsis;
}

.composer {
  width:100%;
  min-width:120px;
  max-width:none;
  flex:none;
}

.topbar-primary-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex:none;
}

.topbar-primary-actions button,
.topbar-selection-actions button {
  padding:7px 10px;
  font-size:13px;
}

.topbar-primary-actions .icon-btn {
  width:44px;
  height:44px;
  padding:0;
  justify-content:center;
}

.topbar-primary-actions .icon-btn svg {
  width:20px;
  height:20px;
}

.history-actions {
  flex:none;
  margin-right:auto;
}

.topbar-selection-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin-left:auto;
  flex:0 0 auto;
  flex-basis:auto;
  flex-wrap:nowrap;
}

@media (max-width:860px) {
  .topbar-inner {
    padding:10px 16px;
  }

  .topbar-primary-row {
    grid-template-columns:auto minmax(80px,1fr) auto;
    gap:8px;
  }

  .composer {
    min-width:80px;
  }

  .topbar-secondary-row {
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .topbar-selection-actions {
    margin-left:auto;
  }
}

@media (max-width:640px) {
  .topbar-primary-row {
    grid-template-columns:1fr auto;
  }

  .brand {
    grid-column:1 / -1;
  }

  .composer {
    grid-column:1;
  }

  .topbar-primary-actions {
    grid-column:2;
  }

  .topbar-secondary-row {
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }

  .history-actions {
    justify-self:start;
  }

  .topbar-selection-actions {
    justify-self:end;
    flex-wrap:wrap;
  }
}


/* ---------- app footer ---------- */
.app-footer {
  --footer-sky:#59b9ed;
  --footer-periwinkle:#8d7de4;
  --footer-orchid:#d968bb;
  --footer-coral:#ec796b;
  --footer-gold:#e7b55d;
  --footer-mint:#58cda5;
  position:relative;
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 46%, var(--canvas));
}

.app-footer::before {
  content:"";
  position:absolute;
  left:22%;
  width:56%;
  top:-2px;
  height:2px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--footer-sky) 11%,
    var(--footer-periwinkle) 31%,
    var(--footer-orchid) 49%,
    var(--footer-coral) 66%,
    var(--footer-gold) 82%,
    var(--footer-mint) 94%,
    transparent 100%);
  box-shadow:0 0 12px color-mix(in srgb, var(--footer-periwinkle) 18%, transparent);
}

.app-footer-inner {
  max-width:1560px;
  margin:0 auto;
  padding:15px 28px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--ink-4);
  font-size:11.5px;
  line-height:1.4;
}

.app-footer-copyright { min-width:0; }

.app-footer-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  min-width:0;
}

.app-footer-links {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.app-footer-version {
  flex:none;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:650;
  white-space:nowrap;
}

.app-footer-static,
.app-footer-link { font:inherit; white-space:nowrap; }
.app-footer-static { color:var(--ink-3); cursor:default; }

.app-footer-link,
.app-footer-brand-link {
  --footer-accent:var(--footer-sky);
  display:inline-flex;
  align-items:center;
  padding:4px 5px;
  border:0;
  border-radius:6px;
  background:transparent;
  box-shadow:none;
  color:var(--ink-3);
  font-weight:650;
  text-decoration:none;
  text-shadow:none;
  cursor:pointer;
  transition:color .17s var(--ease), background .17s var(--ease), text-shadow .17s var(--ease);
}

.app-footer-links .app-footer-link:nth-child(1) { --footer-accent:var(--footer-sky); }
.app-footer-links .app-footer-link:nth-child(2) { --footer-accent:var(--footer-mint); }
.app-footer-links .app-footer-link:nth-child(3) { --footer-accent:var(--footer-periwinkle); }
.app-footer-links .app-footer-link:nth-child(4) { --footer-accent:var(--footer-gold); }
.app-footer-links .app-footer-link:nth-child(5) { --footer-accent:var(--footer-orchid); }
.app-footer-links .app-footer-link:nth-child(6) { --footer-accent:var(--footer-coral); }
.app-footer-links .app-footer-link:nth-child(7) { --footer-accent:var(--footer-mint); }
.app-footer-brand-link { --footer-accent:var(--footer-sky); }

.app-footer-link:hover,
.app-footer-link:focus-visible,
.app-footer-brand-link:hover,
.app-footer-brand-link:focus-visible {
  color:var(--footer-accent);
  background:color-mix(in srgb, var(--footer-accent) 6%, transparent);
  text-decoration:none;
  text-shadow:0 0 14px color-mix(in srgb, var(--footer-accent) 24%, transparent);
}

.app-footer-link:focus-visible,
.app-footer-brand-link:focus-visible {
  outline:2px solid color-mix(in srgb, var(--footer-accent) 42%, transparent);
  outline-offset:3px;
}

.info-modal {
  width:min(520px, calc(100vw - 32px));
}

.info-modal-body {
  padding:2px 2px 4px;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.65;
}

.info-modal-body p {
  margin:0;
}

.info-modal-body p + p {
  margin-top:12px;
}

.info-modal-body a {
  color:var(--c-queue);
  font-weight:650;
  text-decoration:none;
}

.info-modal-body a:hover {
  text-decoration:underline;
}

@media (max-width:640px) {
  .app-footer-inner {
    padding:14px 18px 16px;
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }

  .app-footer-right {
    width:100%;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }

  .app-footer-links {
    justify-content:flex-start;
    gap:13px;
  }
}



/* ============================================================
   FEATURES SHOWCASE
   ============================================================ */
.features-backdrop {
  z-index:2325;
  padding:24px;
}

.features-modal {
  --col:var(--c-queue);
  --feature-accent:var(--c-queue);
  --feature-accent-soft:color-mix(in srgb, var(--feature-accent) 12%, var(--surface));
  --feature-accent-faint:color-mix(in srgb, var(--feature-accent) 5%, transparent);

  /* Wider marketing palette. Surfaces/text still come from the active app theme. */
  --feature-cyan:hsl(190 82% 51%);
  --feature-blue:hsl(214 89% 61%);
  --feature-sky:hsl(202 92% 60%);
  --feature-indigo:hsl(238 78% 68%);
  --feature-violet:hsl(266 80% 68%);
  --feature-orchid:hsl(286 74% 64%);
  --feature-magenta:hsl(320 78% 61%);
  --feature-rose:hsl(344 82% 62%);
  --feature-red:hsl(2 78% 60%);
  --feature-orange:hsl(24 91% 58%);
  --feature-amber:hsl(42 92% 55%);
  --feature-lime:hsl(86 65% 50%);
  --feature-emerald:hsl(152 67% 48%);
  --feature-teal:hsl(171 69% 46%);

  width:min(1220px, calc(100vw - 48px));
  height:min(92vh, 980px);
  max-height:none;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:var(--surface);
  border-color:color-mix(in srgb, var(--c-queue) 18%, var(--line-2));
  box-shadow:
    0 34px 100px rgba(0,0,0,.34),
    0 0 0 1px color-mix(in srgb, var(--c-queue) 5%, transparent);
}

.features-modal::before {
  z-index:3;
  height:4px;
  background:
    linear-gradient(
      90deg,
      var(--feature-cyan),
      var(--feature-blue),
      var(--feature-violet),
      var(--feature-magenta),
      var(--feature-orange),
      var(--feature-amber),
      var(--feature-emerald)
    );
}

.features-modal-header {
  position:relative;
  z-index:2;
  min-width:0;
  padding:17px 20px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--feature-blue) 7%, var(--surface)),
      color-mix(in srgb, var(--feature-violet) 5%, var(--surface)) 45%,
      color-mix(in srgb, var(--feature-magenta) 5%, var(--surface))
    );
}

.features-modal-brand {
  min-width:0;
  display:grid;
  gap:3px;
}

.features-modal-kicker,
.features-eyebrow,
.feature-card-kicker {
  color:var(--feature-accent, var(--c-queue));
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.115em;
  text-transform:uppercase;
}

.features-modal-brand strong {
  color:var(--ink);
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:-.022em;
}

.features-modal-scroll {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--feature-cyan) 9%, transparent), transparent 24%),
    radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--feature-violet) 7%, transparent), transparent 25%),
    radial-gradient(circle at 45% 58%, color-mix(in srgb, var(--feature-emerald) 4%, transparent), transparent 28%),
    var(--surface);
}

.features-hero {
  position:relative;
  overflow:hidden;
  padding:64px 58px 52px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--feature-violet) 14%, transparent), transparent 26%),
    radial-gradient(circle at 96% 85%, color-mix(in srgb, var(--feature-magenta) 9%, transparent), transparent 23%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--feature-cyan) 11%, var(--surface)),
      color-mix(in srgb, var(--feature-blue) 5%, var(--surface)) 38%,
      color-mix(in srgb, var(--feature-violet) 7%, var(--surface)) 72%,
      var(--surface)
    );
}

.features-hero::after {
  content:"";
  position:absolute;
  right:-70px;
  top:-100px;
  width:320px;
  height:320px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--feature-violet) 30%, transparent);
  box-shadow:
    0 0 0 40px color-mix(in srgb, var(--feature-cyan) 4%, transparent),
    0 0 0 82px color-mix(in srgb, var(--feature-magenta) 3%, transparent);
  pointer-events:none;
}

.features-hero::before {
  content:"";
  position:absolute;
  left:-105px;
  bottom:-150px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:color-mix(in srgb, var(--feature-emerald) 7%, transparent);
  filter:blur(2px);
  pointer-events:none;
}

.features-hero > * {
  position:relative;
  z-index:1;
}

.features-hero .features-eyebrow {
  --feature-accent:var(--feature-cyan);
}

.features-hero h2 {
  max-width:850px;
  margin:11px 0 17px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(32px, 4.5vw, 56px);
  line-height:1.01;
  letter-spacing:-.052em;
}

.features-hero > p {
  max-width:860px;
  margin:0;
  color:var(--ink-2);
  font-size:15.5px;
  line-height:1.74;
}

.features-proof-row {
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.features-proof-row span,
.feature-chips span {
  border:1px solid color-mix(in srgb, var(--feature-accent, var(--c-queue)) 22%, var(--line));
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--feature-accent, var(--c-queue)) 7%, var(--surface));
  color:var(--ink-3);
  font-size:10.5px;
  font-weight:700;
}

.features-proof-row span {
  --feature-accent:var(--feature-blue);
  padding:7px 10px;
}

.features-proof-row span:nth-child(2) { --feature-accent:var(--feature-violet); }
.features-proof-row span:nth-child(3) { --feature-accent:var(--feature-magenta); }
.features-proof-row span:nth-child(4) { --feature-accent:var(--feature-amber); }
.features-proof-row span:nth-child(5) { --feature-accent:var(--feature-emerald); }

.features-section {
  padding:50px 44px 58px;
  border-bottom:1px solid var(--line);
}

.features-section-heading {
  max-width:820px;
  margin:0 0 30px;
}

.features-section-heading .features-eyebrow {
  --feature-accent:var(--feature-violet);
}

.features-minor-section .features-section-heading .features-eyebrow {
  --feature-accent:var(--feature-emerald);
}

.features-section-heading h2,
.features-closing h2 {
  margin:8px 0 10px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.04em;
}

.features-section-heading > p,
.features-closing > p {
  margin:0;
  color:var(--ink-3);
  font-size:13.5px;
  line-height:1.68;
}

/* ---------- major marketing cards ---------- */
.features-major-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:15px;
}

.feature-major-card {
  --feature-accent:var(--feature-blue);
  min-width:0;
  padding:23px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--feature-accent) 19%, var(--line));
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--feature-accent) 7%, var(--surface-2)),
      color-mix(in srgb, var(--feature-accent) 2%, var(--surface)) 62%
    );
  box-shadow:
    var(--sh-1),
    inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
  transition:
    transform .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .18s var(--ease);
}

.feature-major-card::after {
  content:"";
  position:absolute;
  right:-52px;
  top:-64px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:color-mix(in srgb, var(--feature-accent) 7%, transparent);
  pointer-events:none;
}

.feature-major-card:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--feature-accent) 38%, var(--line));
  box-shadow:
    0 16px 36px rgba(0,0,0,.12),
    inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}

.feature-icon {
  width:44px;
  height:44px;
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--feature-accent) 33%, var(--line));
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--feature-accent) 17%, var(--surface)),
      color-mix(in srgb, var(--feature-accent) 7%, var(--surface-2))
    );
  color:var(--feature-accent);
  box-shadow:0 8px 18px color-mix(in srgb, var(--feature-accent) 10%, transparent);
}

.feature-icon svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.feature-major-card h3 {
  position:relative;
  z-index:1;
  margin:4px 0 9px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.18;
  letter-spacing:-.026em;
}

.feature-major-card p {
  position:relative;
  z-index:1;
  margin:0;
  color:var(--ink-2);
  font-size:12.5px;
  line-height:1.65;
}

.feature-major-card p + p {
  margin-top:9px;
}

.feature-major-card code {
  padding:1px 4px;
  border:1px solid color-mix(in srgb, var(--feature-accent) 18%, var(--line));
  border-radius:5px;
  background:color-mix(in srgb, var(--feature-accent) 5%, var(--surface-2));
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.92em;
}

.feature-chips {
  position:relative;
  z-index:1;
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.feature-chips span {
  padding:4px 7px;
  font-size:9.5px;
}

/* major-card palette */
.feature-accent-cyan    { --feature-accent:var(--feature-cyan); }
.feature-accent-blue    { --feature-accent:var(--feature-blue); }
.feature-accent-sky     { --feature-accent:var(--feature-sky); }
.feature-accent-indigo  { --feature-accent:var(--feature-indigo); }
.feature-accent-violet  { --feature-accent:var(--feature-violet); }
.feature-accent-orchid  { --feature-accent:var(--feature-orchid); }
.feature-accent-magenta { --feature-accent:var(--feature-magenta); }
.feature-accent-rose    { --feature-accent:var(--feature-rose); }
.feature-accent-red     { --feature-accent:var(--feature-red); }
.feature-accent-orange  { --feature-accent:var(--feature-orange); }
.feature-accent-amber   { --feature-accent:var(--feature-amber); }
.feature-accent-lime    { --feature-accent:var(--feature-lime); }
.feature-accent-emerald { --feature-accent:var(--feature-emerald); }
.feature-accent-teal    { --feature-accent:var(--feature-teal); }

/* ---------- minor-feature masonry ---------- */
.features-minor-section {
  background:
    radial-gradient(circle at 5% 8%, color-mix(in srgb, var(--feature-emerald) 5%, transparent), transparent 20%),
    radial-gradient(circle at 92% 72%, color-mix(in srgb, var(--feature-violet) 5%, transparent), transparent 22%),
    color-mix(in srgb, var(--surface-2) 66%, var(--surface));
}

.features-minor-grid {
  display:block;
  columns:2;
  column-gap:15px;
}

.feature-minor-group {
  --feature-accent:var(--feature-blue);
  min-width:0;
  margin:0 0 15px;
  padding:20px 20px 18px;
  display:inline-block;
  width:100%;
  box-sizing:border-box;
  break-inside:avoid;
  page-break-inside:avoid;
  vertical-align:top;
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--feature-accent) 17%, var(--line));
  border-radius:18px;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--feature-accent) 5%, var(--surface)),
      var(--surface) 46%
    );
  box-shadow:
    0 8px 24px rgba(0,0,0,.055),
    inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
}

.feature-minor-group::before {
  content:"";
  position:absolute;
  left:0;
  top:20%;
  bottom:20%;
  width:2px;
  border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--feature-accent), transparent);
  box-shadow:0 0 9px color-mix(in srgb, var(--feature-accent) 20%, transparent);
}

.feature-minor-group::after {
  content:"";
  position:absolute;
  right:-54px;
  top:-58px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:color-mix(in srgb, var(--feature-accent) 5%, transparent);
  pointer-events:none;
}

.feature-minor-group h3 {
  position:relative;
  z-index:1;
  margin:0 0 13px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:-.02em;
}

.feature-minor-group ul {
  position:relative;
  z-index:1;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.feature-minor-group li {
  position:relative;
  padding-left:19px;
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.5;
}

.feature-minor-group li::before {
  content:"";
  position:absolute;
  left:1px;
  top:.57em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--feature-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--feature-accent) 10%, transparent),
    0 0 10px color-mix(in srgb, var(--feature-accent) 14%, transparent);
}

.feature-minor-group li strong {
  color:var(--ink);
  font-weight:700;
}

.feature-minor-group code {
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.93em;
}

/* minor-card palette */
.minor-accent-cyan    { --feature-accent:var(--feature-cyan); }
.minor-accent-blue    { --feature-accent:var(--feature-blue); }
.minor-accent-sky     { --feature-accent:var(--feature-sky); }
.minor-accent-indigo  { --feature-accent:var(--feature-indigo); }
.minor-accent-violet  { --feature-accent:var(--feature-violet); }
.minor-accent-orchid  { --feature-accent:var(--feature-orchid); }
.minor-accent-magenta { --feature-accent:var(--feature-magenta); }
.minor-accent-rose    { --feature-accent:var(--feature-rose); }
.minor-accent-red     { --feature-accent:var(--feature-red); }
.minor-accent-orange  { --feature-accent:var(--feature-orange); }
.minor-accent-amber   { --feature-accent:var(--feature-amber); }
.minor-accent-lime    { --feature-accent:var(--feature-lime); }
.minor-accent-emerald { --feature-accent:var(--feature-emerald); }
.minor-accent-teal    { --feature-accent:var(--feature-teal); }

/* ---------- closing ---------- */
.features-closing {
  position:relative;
  overflow:hidden;
  padding:52px 58px 62px;
  background:
    radial-gradient(circle at 85% 28%, color-mix(in srgb, var(--feature-magenta) 9%, transparent), transparent 27%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--feature-indigo) 7%, var(--surface)),
      color-mix(in srgb, var(--feature-cyan) 5%, var(--surface)) 48%,
      color-mix(in srgb, var(--feature-emerald) 6%, var(--surface))
    );
}

.features-closing .features-eyebrow {
  --feature-accent:var(--feature-magenta);
}

.features-closing h2 {
  max-width:790px;
}

.features-closing p {
  max-width:890px;
}

@media (max-width:860px) {
  .features-backdrop {
    padding:12px;
  }

  .features-modal {
    width:min(100%, calc(100vw - 24px));
    height:min(95vh, 1000px);
  }

  .features-hero {
    padding:44px 28px 38px;
  }

  .features-section {
    padding:38px 23px 46px;
  }

  .features-major-grid {
    grid-template-columns:1fr;
  }

  .features-minor-grid {
    columns:1;
  }

  .features-closing {
    padding:40px 28px 46px;
  }
}

@media (max-width:520px) {
  .features-modal-header {
    padding:14px 15px 12px;
  }

  .features-modal-brand strong {
    font-size:16px;
  }

  .features-hero {
    padding:35px 20px 31px;
  }

  .features-hero h2 {
    font-size:32px;
  }

  .features-section {
    padding:31px 16px 39px;
  }

  .feature-major-card {
    padding:18px;
    grid-template-columns:1fr;
  }

  .feature-icon {
    width:40px;
    height:40px;
  }

  .feature-minor-group {
    margin-bottom:12px;
    padding:17px 16px 15px;
  }

  .features-closing {
    padding:35px 20px 41px;
  }
}


/* ============================================================
   ROADMAP SHOWCASE
   Public-facing product direction. Planned items are intentionally
   separated from current capabilities and exploratory ideas.
   ============================================================ */
.roadmap-backdrop {
  z-index:2330;
  padding:24px;
}

.roadmap-modal {
  --road-blue:hsl(214 89% 61%);
  --road-cyan:hsl(190 82% 51%);
  --road-violet:hsl(266 80% 68%);
  --road-magenta:hsl(320 78% 61%);
  --road-orange:hsl(24 91% 58%);
  --road-amber:hsl(42 92% 55%);
  --road-emerald:hsl(152 67% 48%);
  --road-teal:hsl(171 69% 46%);
  --road-ink:var(--ink);

  width:min(1180px, calc(100vw - 48px));
  height:min(92vh, 960px);
  max-height:none;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:var(--surface);
  border-color:
    color-mix(in srgb, var(--road-blue) 19%, var(--line-2));
  box-shadow:
    0 34px 100px rgba(0,0,0,.34),
    0 0 0 1px
      color-mix(in srgb, var(--road-cyan) 5%, transparent);
}

.roadmap-modal::before {
  z-index:3;
  height:4px;
  background:
    linear-gradient(
      90deg,
      var(--road-cyan),
      var(--road-blue),
      var(--road-violet),
      var(--road-magenta),
      var(--road-orange),
      var(--road-amber),
      var(--road-emerald)
    );
}

.roadmap-header {
  position:relative;
  z-index:2;
  min-width:0;
  padding:17px 20px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--road-cyan) 7%, var(--surface)),
      color-mix(in srgb, var(--road-violet) 5%, var(--surface)) 48%,
      color-mix(in srgb, var(--road-magenta) 5%, var(--surface))
    );
}

.roadmap-brand {
  min-width:0;
  display:grid;
  gap:3px;
}

.roadmap-kicker,
.roadmap-eyebrow,
.roadmap-stage-kicker {
  color:var(--road-blue);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.115em;
  text-transform:uppercase;
}

.roadmap-brand strong {
  color:var(--ink);
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:-.022em;
}

.roadmap-scroll {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  background:
    radial-gradient(
      circle at 9% 0%,
      color-mix(in srgb, var(--road-cyan) 8%, transparent),
      transparent 23%
    ),
    radial-gradient(
      circle at 91% 20%,
      color-mix(in srgb, var(--road-violet) 7%, transparent),
      transparent 24%
    ),
    var(--surface);
}

.roadmap-hero {
  position:relative;
  overflow:hidden;
  padding:60px 56px 46px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(
      circle at 83% 20%,
      color-mix(in srgb, var(--road-violet) 14%, transparent),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 82%,
      color-mix(in srgb, var(--road-emerald) 10%, transparent),
      transparent 23%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--road-cyan) 10%, var(--surface)),
      color-mix(in srgb, var(--road-blue) 5%, var(--surface)) 42%,
      color-mix(in srgb, var(--road-violet) 7%, var(--surface)) 78%,
      var(--surface)
    );
}

.roadmap-hero::after {
  content:"";
  position:absolute;
  width:390px;
  height:390px;
  right:-145px;
  top:-185px;
  border-radius:50%;
  border:
    1px solid
    color-mix(in srgb, var(--road-violet) 34%, transparent);
  box-shadow:
    0 0 0 45px
      color-mix(in srgb, var(--road-cyan) 4%, transparent),
    0 0 0 92px
      color-mix(in srgb, var(--road-magenta) 3%, transparent);
  pointer-events:none;
}

.roadmap-hero > * {
  position:relative;
  z-index:1;
}

.roadmap-hero .roadmap-eyebrow {
  color:var(--road-cyan);
}

.roadmap-hero h2 {
  max-width:870px;
  margin:11px 0 16px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1;
  letter-spacing:-.052em;
}

.roadmap-hero > p {
  max-width:860px;
  margin:0;
  color:var(--ink-2);
  font-size:15.5px;
  line-height:1.74;
}

.roadmap-version-row {
  margin-top:25px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.roadmap-version-pill,
.roadmap-foundation-chip,
.roadmap-card-tags span,
.roadmap-lab-card span {
  border:1px solid
    color-mix(in srgb, var(--road-blue) 22%, var(--line));
  border-radius:var(--r-pill);
  background:
    color-mix(in srgb, var(--road-blue) 7%, var(--surface));
  color:var(--ink-3);
  font-size:10.5px;
  font-weight:700;
}

.roadmap-version-pill {
  padding:7px 10px;
}

.roadmap-version-pill strong {
  color:var(--ink);
}

.roadmap-journey {
  margin-top:34px;
  padding:15px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:7px;
  border:1px solid
    color-mix(in srgb, var(--road-blue) 17%, var(--line));
  border-radius:18px;
  background:
    color-mix(in srgb, var(--surface-2) 76%, transparent);
  box-shadow:var(--sh-1);
}

.roadmap-journey-step {
  min-width:0;
  position:relative;
  padding:13px 12px 12px;
  border-radius:13px;
  background:
    color-mix(in srgb, var(--surface) 80%, transparent);
}

.roadmap-journey-step:not(:last-child)::after {
  content:"→";
  position:absolute;
  right:-8px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  color:var(--ink-4);
  font-weight:900;
}

.roadmap-journey-step span {
  display:block;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.roadmap-journey-step strong {
  display:block;
  margin-top:4px;
  color:var(--ink);
  font-size:11.5px;
  line-height:1.25;
}

.roadmap-foundation {
  padding:25px 44px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--road-emerald) 6%, var(--surface)),
      var(--surface)
    );
}

.roadmap-foundation-icon {
  flex:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid
    color-mix(in srgb, var(--road-emerald) 34%, var(--line));
  border-radius:14px;
  color:var(--road-emerald);
  background:
    color-mix(in srgb, var(--road-emerald) 9%, var(--surface));
}

.roadmap-foundation-icon svg {
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
}

.roadmap-foundation-copy {
  min-width:0;
}

.roadmap-foundation-copy strong {
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
}

.roadmap-foundation-copy p {
  margin:4px 0 11px;
  color:var(--ink-3);
  font-size:12.5px;
  line-height:1.58;
}

.roadmap-foundation-chips {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.roadmap-foundation-chip {
  --chip-accent:var(--road-emerald);
  padding:6px 9px;
  border-color:
    color-mix(in srgb, var(--chip-accent) 24%, var(--line));
  background:
    color-mix(in srgb, var(--chip-accent) 7%, var(--surface));
}

.roadmap-stage {
  --road-stage-accent:var(--road-blue);
  padding:48px 44px 52px;
  border-bottom:1px solid var(--line);
}

.roadmap-stage:nth-of-type(even) {
  background:
    color-mix(in srgb, var(--surface-2) 42%, var(--surface));
}

.roadmap-stage-heading {
  max-width:820px;
  margin-bottom:27px;
}

.roadmap-stage-heading-top {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
}

.roadmap-stage-kicker {
  color:var(--road-stage-accent);
}

.roadmap-status {
  padding:4px 8px;
  border:1px solid
    color-mix(in srgb, var(--road-stage-accent) 28%, var(--line));
  border-radius:var(--r-pill);
  background:
    color-mix(in srgb, var(--road-stage-accent) 8%, var(--surface));
  color:var(--road-stage-accent);
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.085em;
  text-transform:uppercase;
}

.roadmap-stage-heading h2 {
  margin:0 0 8px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:31px;
  line-height:1.08;
  letter-spacing:-.04em;
}

.roadmap-stage-heading p {
  margin:0;
  color:var(--ink-3);
  font-size:13.5px;
  line-height:1.68;
}

.roadmap-card-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:13px;
}

.roadmap-card {
  min-width:0;
  position:relative;
  overflow:hidden;
  padding:20px 19px 18px;
  border:1px solid
    color-mix(in srgb, var(--road-stage-accent) 18%, var(--line));
  border-radius:17px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--road-stage-accent) 6%, var(--surface-2)),
      var(--surface) 67%
    );
  box-shadow:var(--sh-1);
  transition:
    transform .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .18s var(--ease);
}

.roadmap-card::after {
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-53px;
  top:-57px;
  border-radius:50%;
  background:
    color-mix(in srgb, var(--road-stage-accent) 7%, transparent);
  pointer-events:none;
}

.roadmap-card:hover {
  transform:translateY(-2px);
  border-color:
    color-mix(in srgb, var(--road-stage-accent) 37%, var(--line));
  box-shadow:0 14px 32px rgba(0,0,0,.11);
}

.roadmap-card-icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border:1px solid
    color-mix(in srgb, var(--road-stage-accent) 30%, var(--line));
  border-radius:12px;
  color:var(--road-stage-accent);
  background:
    color-mix(in srgb, var(--road-stage-accent) 9%, var(--surface));
}

.roadmap-card-icon svg {
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.65;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.roadmap-card h3 {
  position:relative;
  z-index:1;
  margin:0 0 7px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.2;
  letter-spacing:-.022em;
}

.roadmap-card p {
  position:relative;
  z-index:1;
  margin:0;
  color:var(--ink-3);
  font-size:12px;
  line-height:1.62;
}

.roadmap-card-tags {
  position:relative;
  z-index:1;
  margin-top:13px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.roadmap-card-tags span {
  padding:5px 8px;
  border-color:
    color-mix(in srgb, var(--road-stage-accent) 20%, var(--line));
  background:
    color-mix(in srgb, var(--road-stage-accent) 6%, var(--surface));
  font-size:9.5px;
}

.roadmap-stage-launch {
  --road-stage-accent:var(--road-cyan);
}

.roadmap-stage-history {
  --road-stage-accent:var(--road-violet);
}

.roadmap-stage-day {
  --road-stage-accent:var(--road-orange);
}

.roadmap-stage-momentum {
  --road-stage-accent:var(--road-emerald);
}

.roadmap-stage-cloud {
  --road-stage-accent:var(--road-blue);
}

.roadmap-stage-anywhere {
  --road-stage-accent:var(--road-teal);
}

.roadmap-labs {
  padding:48px 44px 44px;
  background:
    radial-gradient(
      circle at 93% 8%,
      color-mix(in srgb, var(--road-magenta) 8%, transparent),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--road-violet) 5%, var(--surface)),
      var(--surface)
    );
}

.roadmap-labs .roadmap-stage-heading {
  margin-bottom:24px;
}

.roadmap-labs .roadmap-stage-kicker {
  color:var(--road-magenta);
}

.roadmap-labs-grid {
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;
}

.roadmap-lab-card {
  min-width:0;
  padding:16px 14px;
  border:1px solid
    color-mix(in srgb, var(--road-violet) 18%, var(--line));
  border-radius:15px;
  background:
    color-mix(in srgb, var(--road-violet) 4%, var(--surface));
}

.roadmap-lab-card strong {
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-size:12.5px;
}

.roadmap-lab-card p {
  margin:0;
  color:var(--ink-4);
  font-size:10.5px;
  line-height:1.5;
}

.roadmap-lab-card span {
  display:inline-block;
  margin-top:10px;
  padding:4px 7px;
  border-color:
    color-mix(in srgb, var(--road-magenta) 23%, var(--line));
  background:
    color-mix(in srgb, var(--road-magenta) 6%, var(--surface));
  color:var(--road-magenta);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.roadmap-disclaimer {
  padding:27px 44px 34px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}

.roadmap-disclaimer strong {
  display:block;
  color:var(--ink);
  font-size:12px;
}

.roadmap-disclaimer p {
  max-width:840px;
  margin:5px 0 0;
  color:var(--ink-4);
  font-size:10.5px;
  line-height:1.58;
}

@media (max-width:900px) {
  .roadmap-card-grid {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .roadmap-labs-grid {
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .roadmap-journey {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .roadmap-journey-step:not(:last-child)::after {
    display:none;
  }
}

@media (max-width:640px) {
  .roadmap-backdrop {
    padding:0;
  }

  .roadmap-modal {
    width:100vw;
    height:100dvh;
    max-height:none;
    border-radius:0;
  }

  .roadmap-header {
    padding:14px 15px 12px;
  }

  .roadmap-brand strong {
    font-size:16px;
  }

  .roadmap-hero {
    padding:36px 20px 31px;
  }

  .roadmap-hero h2 {
    font-size:33px;
  }

  .roadmap-journey {
    grid-template-columns:1fr;
  }

  .roadmap-foundation {
    padding:23px 18px;
  }

  .roadmap-stage,
  .roadmap-labs {
    padding:34px 16px 39px;
  }

  .roadmap-stage-heading h2 {
    font-size:26px;
  }

  .roadmap-card-grid,
  .roadmap-labs-grid {
    grid-template-columns:1fr;
  }

  .roadmap-disclaimer {
    padding:24px 18px 30px;
  }
}


/* ---------- documentation ---------- */
.documentation-backdrop {
  z-index:2300;
  padding:24px;
}

.documentation-modal {
  width:min(1180px, calc(100vw - 48px));
  height:min(86vh, 900px);
  margin:auto;
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
}

.documentation-header {
  min-width:0;
  padding:18px 20px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--line);
}

.documentation-heading {
  min-width:0;
}

.documentation-title-row {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.documentation-title-row h2 {
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.2;
}

.documentation-version {
  flex:none;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--ink-4);
  background:var(--surface-2);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
}

.documentation-heading p {
  margin:4px 0 0;
  color:var(--ink-4);
  font-size:11px;
}

.documentation-header-actions {
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
}

.documentation-header-actions > button:not(.close-modal) {
  min-height:34px;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
}

.documentation-toolbar {
  min-width:0;
  padding:10px 20px;
  display:grid;
  grid-template-columns:minmax(220px, 440px) auto 1fr;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}

.documentation-search-wrap {
  position:relative;
  min-width:0;
}

.documentation-search-wrap > svg {
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink-4);
  pointer-events:none;
}

.documentation-search-wrap input {
  width:100%;
  height:36px;
  padding:7px 62px 7px 34px;
  border-radius:10px;
  background:var(--surface);
}

.documentation-search-wrap > button {
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  min-height:26px;
  padding:4px 7px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--ink-4);
  font-size:10px;
}

.documentation-search-wrap > button:hover {
  color:var(--ink);
  background:var(--surface-3);
}

.documentation-mobile-nav {
  display:none;
  min-width:0;
}

.documentation-mobile-nav label {
  color:var(--ink-4);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.documentation-mobile-nav select {
  width:100%;
  min-width:0;
}

.documentation-search-status {
  min-width:0;
  justify-self:end;
  color:var(--ink-4);
  font-size:10.5px;
  text-align:right;
}

.documentation-layout {
  min-height:0;
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
}

.documentation-sidebar {
  min-height:0;
  padding:16px 12px 18px;
  overflow:auto;
  border-right:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

.documentation-sidebar-label {
  padding:0 9px 8px;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.documentation-toc {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.documentation-toc button {
  width:100%;
  padding:7px 9px;
  justify-content:flex-start;
  text-align:left;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:var(--ink-3);
  font-size:11.5px;
  font-weight:600;
}

.documentation-toc button:hover,
.documentation-toc button.is-active {
  color:var(--ink);
  background:var(--surface-3);
  border-color:var(--line);
}

.documentation-toc button[hidden] {
  display:none !important;
}

.documentation-scroll {
  min-height:0;
  overflow:auto;
  scroll-behavior:smooth;
  scroll-padding-top:22px;
  background:var(--surface);
}

.documentation-content {
  width:min(780px, calc(100% - 48px));
  margin:0 auto;
  padding:28px 0 58px;
}

.docs-section {
  padding:0 0 30px;
  margin:0 0 30px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:24px;
}

.docs-section:last-child {
  margin-bottom:0;
  border-bottom:0;
}

.docs-section[hidden] {
  display:none !important;
}

.docs-section h2 {
  margin:0 0 12px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.25;
}

.docs-section h3 {
  margin:22px 0 8px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:16px;
}

.docs-section p,
.docs-section li {
  color:var(--ink-2);
  font-size:14px;
  line-height:1.7;
}

.docs-section p {
  margin:0 0 12px;
}

.docs-section ul,
.docs-section ol {
  margin:10px 0 16px;
  padding-left:24px;
}

.docs-lead {
  color:var(--ink) !important;
  font-size:15px !important;
  line-height:1.75 !important;
}

.docs-section strong {
  color:var(--ink);
}

.docs-section code {
  padding:.12em .34em;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--surface-2);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.9em;
  overflow-wrap:anywhere;
}

.docs-callout {
  --docs-callout-accent:var(--c-queue);
  position:relative;
  margin:16px 0 20px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}
.docs-callout::before {
  content:"";
  position:absolute;
  left:-1px;
  top:20%;
  bottom:20%;
  width:2px;
  border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--docs-callout-accent), transparent);
  box-shadow:0 0 9px color-mix(in srgb, var(--docs-callout-accent) 20%, transparent);
  pointer-events:none;
}

.docs-callout > strong {
  display:block;
  margin-bottom:4px;
  font-family:var(--font-display);
  font-size:13px;
}

.docs-callout > p {
  margin:0;
  font-size:12.5px;
  line-height:1.6;
}

.docs-callout-tip { --docs-callout-accent:var(--tag-green); }
.docs-callout-note { --docs-callout-accent:var(--c-queue); }
.docs-callout-important { --docs-callout-accent:var(--tag-amber); }

.docs-example {
  margin:14px 0 18px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.docs-example > strong {
  font-family:var(--font-display);
  font-size:12px;
}

.docs-example > code {
  max-width:100%;
  white-space:normal;
}

.docs-example > span {
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.5;
}

.docs-table {
  width:100%;
  margin:14px 0 22px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:12px;
}

.docs-table th,
.docs-table td {
  padding:9px 11px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}

.docs-table th + th,
.docs-table td + td {
  border-left:1px solid var(--line);
}

.docs-table th {
  background:var(--surface-2);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:11.5px;
}

.docs-table td {
  color:var(--ink-2);
  line-height:1.5;
}

.docs-table tr:last-child td {
  border-bottom:0;
}

.docs-shortcuts-table td:first-child {
  width:38%;
  color:var(--ink);
  white-space:normal;
}

.docs-section.is-search-match {
  border-radius:var(--r-md);
}

.documentation-content mark {
  padding:0 .08em;
  border-radius:3px;
  background:color-mix(in srgb, var(--tag-amber) 30%, transparent);
  color:inherit;
}

.documentation-no-results {
  width:min(620px, calc(100% - 48px));
  margin:60px auto;
  padding:24px;
  text-align:center;
  border:1px dashed var(--line-2);
  border-radius:var(--r-lg);
  color:var(--ink-3);
}

.documentation-no-results strong {
  display:block;
  margin-bottom:6px;
  color:var(--ink);
  font-family:var(--font-display);
}

.documentation-no-results p {
  margin:0 0 14px;
  color:var(--ink-4);
  font-size:12px;
}

body.documentation-open {
  overflow:hidden;
}

@media (max-width:760px) {
  .documentation-backdrop {
    padding:12px;
  }

  .documentation-modal {
    width:calc(100vw - 24px);
    height:min(90vh, 900px);
    border-radius:var(--r-lg);
  }

  .documentation-header {
    padding:15px 14px 12px;
    align-items:flex-start;
  }

  .documentation-title-row {
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }

  .documentation-header-actions > button:not(.close-modal) span {
    display:none;
  }

  .documentation-toolbar {
    padding:10px 14px;
    grid-template-columns:1fr;
    gap:8px;
  }

  .documentation-mobile-nav {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px;
  }

  .documentation-search-status {
    justify-self:start;
    text-align:left;
  }

  .documentation-layout {
    grid-template-columns:1fr;
  }

  .documentation-sidebar {
    display:none;
  }

  .documentation-content {
    width:calc(100% - 32px);
    padding-top:22px;
  }

  .docs-section h2 {
    font-size:19px;
  }
}

@media print {
  body.documentation-open > *:not(#documentationBackdrop) {
    display:none !important;
  }

  body.documentation-open {
    overflow:visible !important;
    background:#fff !important;
  }

  body.documentation-open #documentationBackdrop {
    position:static !important;
    display:block !important;
    padding:0 !important;
    background:#fff !important;
  }

  body.documentation-open .documentation-modal {
    width:100% !important;
    height:auto !important;
    display:block !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
  }

  body.documentation-open .documentation-header {
    padding:0 0 18px !important;
    border-bottom:1px solid #bbb !important;
  }

  body.documentation-open .documentation-heading h2,
  body.documentation-open .docs-section h2,
  body.documentation-open .docs-section h3 {
    color:#111 !important;
  }

  body.documentation-open .documentation-heading p,
  body.documentation-open .documentation-version,
  body.documentation-open .docs-section p,
  body.documentation-open .docs-section li {
    color:#222 !important;
  }

  body.documentation-open .documentation-header-actions,
  body.documentation-open .documentation-toolbar,
  body.documentation-open .documentation-sidebar,
  body.documentation-open .documentation-no-results {
    display:none !important;
  }

  body.documentation-open .documentation-layout,
  body.documentation-open .documentation-scroll {
    display:block !important;
    overflow:visible !important;
  }

  body.documentation-open .documentation-content {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:22px 0 0 !important;
  }

  body.documentation-open .docs-section {
    display:block !important;
    break-inside:avoid-page;
  }

  body.documentation-open .documentation-content mark {
    padding:0 !important;
    background:transparent !important;
  }

  body.documentation-open .docs-callout,
  body.documentation-open .docs-example,
  body.documentation-open .docs-table {
    background:#fff !important;
    color:#111 !important;
    border-color:#bbb !important;
  }

  body.documentation-open .docs-table th,
  body.documentation-open .docs-table td {
    background:#fff !important;
    color:#111 !important;
    border-color:#bbb !important;
  }
}


/* ---------- notifications ---------- */
.notification-bell-btn { position:relative; }

.notification-badge {
  position:absolute;
  top:2px;
  right:1px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--surface);
  border-radius:999px;
  background:var(--c-today);
  color:#fff;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}

.notification-badge[hidden] {
  display:none !important;
}

.notification-panel {
  position:fixed;
  z-index:2150;
  width:min(380px, calc(100vw - 24px));
  max-height:min(520px, calc(100vh - 90px));
  display:none;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:0 18px 48px rgba(0,0,0,.24);
}

.notification-panel.open {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.notification-panel-header {
  min-height:51px;
  padding:10px 12px 9px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}

.notification-panel-header > div {
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:7px;
}

.notification-panel-actions {
  flex:none;
  display:flex;
  align-items:center;
  gap:3px;
}

.notification-panel-header strong {
  color:var(--ink);
  font-family:var(--font-display);
  font-size:14px;
}

.notification-panel-header span {
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:9.5px;
}

.notification-panel-header button {
  min-height:29px;
  padding:5px 8px;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:var(--ink-3);
  font-size:10.5px;
}

.notification-panel-header button:hover:not(:disabled) {
  border-color:var(--line);
  background:var(--surface-3);
  color:var(--ink);
}

.notification-panel-header button:disabled {
  opacity:.38;
  cursor:default;
}

.notification-list {
  min-height:0;
  overflow:auto;
}

.notification-item {
  width:100%;
  min-height:74px;
  padding:11px 13px;
  display:grid;
  grid-template-columns:9px minmax(0,1fr);
  gap:9px;
  text-align:left;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:var(--surface);
  box-shadow:none;
  color:inherit;
}

.notification-item:last-child { border-bottom:0; }
.notification-item:hover { background:var(--surface-2); }

.notification-item.is-unread {
  background:color-mix(in srgb, var(--c-queue) 7%, var(--surface));
}

.notification-item.is-unread:hover {
  background:color-mix(in srgb, var(--c-queue) 11%, var(--surface));
}

.notification-item-dot {
  width:7px;
  height:7px;
  margin-top:7px;
  border-radius:50%;
  background:transparent;
}

.notification-item.is-unread .notification-item-dot {
  background:var(--c-queue);
}

.notification-item-copy { min-width:0; }

.notification-item-title-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.notification-item-title {
  min-width:0;
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.notification-item-time {
  flex:none;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:8.5px;
}

.notification-item-summary {
  margin-top:3px;
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--ink-3);
  font-size:10.5px;
  line-height:1.45;
}

.notification-empty-state {
  min-height:190px;
  padding:30px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--ink-4);
}

.notification-empty-state[hidden] {
  display:none !important;
}

.notification-empty-state svg {
  margin-bottom:10px;
  opacity:.6;
}

.notification-empty-state strong {
  margin-bottom:4px;
  color:var(--ink-2);
  font-family:var(--font-display);
  font-size:13px;
}

.notification-empty-state span {
  max-width:250px;
  font-size:10.5px;
  line-height:1.5;
}

.notification-detail-modal {
  width:min(560px, calc(100vw - 32px));
}

.notification-detail-heading { min-width:0; }

.notification-detail-kicker {
  margin-bottom:5px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.notification-severity-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--c-queue);
}

.notification-detail-backdrop[data-severity="warning"] .notification-severity-dot {
  background:var(--tag-amber);
}

.notification-detail-backdrop[data-severity="urgent"] .notification-severity-dot {
  background:var(--c-today);
}

.notification-detail-body { padding:3px 1px 2px; }

.notification-detail-body p {
  margin:0;
  white-space:pre-line;
  color:var(--ink-2);
  font-size:13.5px;
  line-height:1.65;
}

.notification-detail-body time {
  display:block;
  margin-top:15px;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:9.5px;
}

.notification-detail-actions {
  padding-top:17px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.notification-detail-action-buttons {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin-left:auto;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.notification-detail-action-buttons button {
  min-height:34px;
  padding:7px 12px;
}

#keepPausedNotificationBtn {
  background:color-mix(in srgb, var(--c-queue) 9%, var(--surface));
  border-color:color-mix(in srgb, var(--c-queue) 32%, var(--line));
  color:var(--ink-2);
}

#keepPausedNotificationBtn:hover {
  background:color-mix(in srgb, var(--c-queue) 15%, var(--surface-2));
  border-color:color-mix(in srgb, var(--c-queue) 50%, var(--line-2));
}

#dismissNotificationBtn {
  color:var(--ink-3);
}

.notification-paused-reschedule {
  display:flex;
  align-items:flex-end;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}

.notification-paused-reschedule[hidden],
.notification-paused-reschedule-custom[hidden] {
  display:none !important;
}

.notification-paused-reschedule select,
.notification-paused-reschedule input {
  min-height:34px;
  border:1px solid var(--line-2);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--ink-2);
  font:600 11px/1.2 var(--font-ui);
  outline:none;
}

.notification-paused-reschedule select {
  width:150px;
  padding:0 29px 0 10px;
}

.notification-paused-reschedule input {
  width:142px;
  padding:0 8px;
}

.notification-paused-reschedule select:hover,
.notification-paused-reschedule select:focus,
.notification-paused-reschedule input:hover,
.notification-paused-reschedule input:focus {
  border-color:color-mix(in srgb, var(--c-queue) 62%, var(--line-2));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--c-queue) 13%, transparent);
}

.notification-paused-reschedule-custom {
  display:flex;
  align-items:center;
  gap:6px;
}

.notification-paused-reschedule-custom button {
  min-height:34px;
}


@media (max-width:520px) {
  .notification-detail-actions {
    align-items:stretch;
  }

  .notification-paused-reschedule {
    flex:1 1 100%;
  }

  .notification-detail-action-buttons {
    width:100%;
    justify-content:flex-end;
    margin-left:0;
  }

  .notification-detail-action-buttons button {
    padding-left:10px;
    padding-right:10px;
    font-size:11px;
  }
}

@media (max-width:640px) {
  .notification-panel {
    width:calc(100vw - 20px);
    max-height:min(540px, calc(100vh - 82px));
  }
}


/* ---------- TEMPORARY notification test controls ----------
   Remove this block and #notificationTestRow when notification
   development/testing is complete.
   ---------------------------------------------------------- */
.notification-test-row[hidden] {
  display:none !important;
}

.notification-test-row-secondary {
  margin-top:6px;
}

.notification-test-row {
  margin:0 0 12px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.notification-test-label {
  margin-right:2px;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.notification-test-row button {
  min-height:29px;
  padding:5px 9px;
  font-size:10.5px;
}

@media (max-width:640px) {
  .notification-test-row {
    align-items:flex-start;
  }

  .notification-test-label {
    width:100%;
  }
}

/* SOURCE: css/50-responsive-completion.css */
/* ============================================================
   v0.107 SMALL-SCREEN / MOBILE RESPONSIVE CLEANUP
   ============================================================ */
@media (max-width:640px) {
  /* Avoid automatic input zoom on mobile Safari and keep controls
     comfortably tappable across small phone widths. */
  input:not(.board-title-input):not(.column-title-input),
  select,
  textarea {
    font-size:16px;
  }

  /* ---------- top bar ---------- */
  .topbar-inner {
    padding:10px 10px 11px;
    gap:9px;
  }

  .topbar-primary-row {
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px 8px;
    align-items:center;
  }

  .brand {
    grid-column:1;
    min-width:0;
    max-width:100%;
    gap:8px;
  }

  .brand-wordmark {
    font-size:18px;
  }

  .board-title-input {
    width:100%;
    max-width:100%;
    min-width:0;
    font-size:clamp(20px, 6vw, 23px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .topbar-primary-actions {
    grid-column:2;
    grid-row:1;
    gap:2px;
  }

  .topbar-primary-actions .icon-btn {
    width:38px;
    height:38px;
  }

  .topbar-primary-actions .icon-btn svg {
    width:18px;
    height:18px;
  }

  .composer {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    min-width:0;
    padding:4px 4px 4px 11px;
    gap:5px;
  }

  #newTaskInput {
    min-width:0;
    padding:7px 0;
  }

  #addTaskBtn {
    flex:none;
    padding:8px 13px;
    font-size:12.5px;
  }

  .topbar-secondary-row {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    min-height:0;
  }

  .history-actions {
    width:100%;
    min-width:0;
    margin:0;
    justify-self:stretch;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .history-slot {
    width:auto;
    min-width:0;
  }

  .history-btn {
    justify-content:center;
    padding-inline:8px;
  }

  .topbar-selection-actions {
    width:100%;
    min-width:0;
    margin:0;
    justify-self:stretch;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
  }

  .topbar-selection-actions button {
    width:100%;
    min-width:0;
    min-height:42px;
    justify-content:center;
    padding:9px 8px;
    font-size:11.5px;
  }

  #bulkPasteBtn:not([hidden]) {
    grid-column:1 / -1;
    min-height:44px;
  }

  .topbar-selection-actions button > span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ---------- board tabs ---------- */
  .board-tabs-inner {
    padding:6px 10px;
    gap:5px;
  }

  .board-tabs-list {
    gap:4px;
  }

  .board-tab {
    max-width:min(42vw, 150px);
    padding:7px 10px;
  }

  .board-tabs-controls {
    gap:4px;
  }

  .board-more-btn {
    width:clamp(92px, 28vw, 124px);
    min-width:92px;
    max-width:124px;
    padding-inline:9px;
  }

  /* ---------- general modal sizing ---------- */
  .modal-backdrop {
    padding:8px;
  }

  .modal {
    width:calc(100vw - 16px);
    max-width:none;
    max-height:calc(100dvh - 16px);
    padding:14px;
    border-radius:var(--r-lg);
  }

  .modal-header {
    gap:8px;
    margin-bottom:14px;
  }

  .close-modal {
    width:36px;
    height:36px;
    padding:0;
    justify-content:center;
  }

  /* ---------- task modal ---------- */
  #taskModalBackdrop .modal {
    width:calc(100vw - 16px);
  }

  .main-task-name-wrap {
    min-width:0;
  }

  .main-task-name {
    width:100%;
    min-width:0;
  }

  .task-meta-row {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:9px;
  }

  .task-meta-row .task-section-field {
    width:100%;
    min-width:0;
  }

  #taskSectionSelect {
    width:100%;
    max-width:none;
    min-height:42px;
  }

  .task-tags-area {
    width:100%;
    min-width:0;
  }

  .add-task-tag-btn {
    min-height:38px;
  }

  .task-tag-entry-wrap,
  .task-tag-entry {
    max-width:100%;
  }

  #taskTagInput {
    width:min(180px, 48vw);
    min-width:0;
  }

  /* ---------- Queue ---------- */
  .queue-section {
    padding-inline:9px;
  }

  .queue-composer {
    gap:7px;
    padding:9px 1px;
  }

  .queue-composer-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    width:100%;
  }

  #addQueueLinesBtn {
    width:100%;
    min-height:40px;
  }

  .queue-composer-actions .queue-clear-btn {
    width:auto;
    min-width:112px;
    min-height:40px;
    padding-inline:13px;
  }

  .queue-strip:empty::after {
    padding:21px 12px;
  }

  /* ---------- Section Manager ---------- */
  .section-manager-modal,
  .board-manager-modal {
    width:calc(100vw - 16px);
  }

  .section-manager-list,
  .board-manager-list {
    max-width:100%;
    overflow-x:hidden;
  }

  .section-manager-row {
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:6px;
    padding:8px;
  }

  .section-manager-name {
    min-width:0;
    width:100%;
  }

  .section-manager-count {
    grid-column:3;
    grid-row:2;
    justify-self:start;
    min-width:0;
    text-align:left;
  }

  .section-manager-colors {
    grid-column:3 / -1;
    grid-row:3;
    max-width:100%;
    flex-wrap:wrap;
  }

  .section-manager-delete {
    grid-column:4;
    grid-row:1 / span 2;
  }

  /* ---------- Board Manager ---------- */
  .board-manager-row {
    grid-template-columns:auto minmax(0,1fr) auto auto;
    gap:6px;
    padding:8px;
  }

  .board-manager-name {
    min-width:0;
    width:100%;
  }

  .board-manager-count {
    grid-column:2;
    grid-row:2;
    justify-self:start;
  }

  .board-manager-active {
    display:none;
  }

  /* ---------- Documentation ---------- */
  .documentation-backdrop {
    padding:6px;
  }

  .documentation-modal {
    width:calc(100vw - 12px);
    height:calc(100dvh - 12px);
    border-radius:var(--r-lg);
  }

  .documentation-header {
    padding:13px 12px 10px;
    gap:8px;
  }

  .documentation-title-row h2 {
    font-size:18px;
  }

  .documentation-toolbar {
    padding:8px 12px;
    gap:7px;
  }

  .documentation-mobile-nav {
    grid-template-columns:1fr;
    gap:4px;
  }

  .documentation-mobile-nav label {
    margin:0;
  }

  #documentationSectionSelect {
    width:100%;
    min-width:0;
  }

  .documentation-content {
    width:calc(100% - 24px);
    padding-top:18px;
  }
}

@media (max-width:420px) {
  .topbar-selection-actions button,
  .history-btn {
    font-size:11px;
  }

  .board-tab {
    max-width:40vw;
  }

  .board-more-btn {
    width:96px;
    min-width:96px;
    max-width:96px;
  }

  .queue-composer-actions {
    grid-template-columns:minmax(0,1fr);
  }

  .queue-composer-actions .queue-clear-btn {
    width:100%;
  }

  .section-manager-row {
    grid-template-columns:auto minmax(0,1fr) auto;
  }

  .section-manager-dot {
    display:none;
  }

  .section-manager-name {
    grid-column:2;
  }

  .section-manager-count {
    grid-column:2;
  }

  .section-manager-colors {
    grid-column:2 / -1;
  }

  .section-manager-delete {
    grid-column:3;
  }
}



/* ============================================================
   v0.108 MOBILE CONTAINMENT + FLOATING STATUS TOAST
   ============================================================ */
@media (max-width:640px) {
  /* Status messages float above the phone safe-area instead of
     occupying layout space near the top of the board. */
  .data-status {
    top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
    width:auto;
    max-width:calc(100vw - 24px);
    padding:9px 12px;
    border-radius:var(--r-md);
    font-size:11px;
    text-align:left;
    transform:translate(-50%, 5px);
  }

  .data-status:not(:empty) {
    transform:translate(-50%, 0);
  }

  /* CSS columns can create an unexpectedly wide empty Queue box at
     phone widths. Use one contained Queue column on small screens. */
  .queue-section {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }

  .queue-strip {
    width:100%;
    max-width:100%;
    min-width:0;
    column-width:auto;
    column-count:1;
    column-gap:0;
    overflow:hidden;
  }

  .queue-strip:empty::after {
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
  }

  .queue-strip .card {
    width:100%;
    max-width:100%;
  }

  /* SECTION label keeps its own column; the select consumes only
     the remaining space instead of 100% plus the label width. */
  .task-meta-row .task-section-field {
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:center;
    gap:10px;
  }

  .task-section-field .notes-label {
    min-width:0;
  }

  #taskSectionSelect {
    width:100%;
    min-width:0;
    max-width:100%;
    padding-left:12px;
    padding-right:38px;
  }
}



/* ============================================================
   v0.110 REMAINING NARROW-SCREEN VISUAL FIXES
   ============================================================ */
@media (max-width:640px) {
  /* The generic empty-state pseudo-element carries a 2px margin.
     width:100% plus that margin can exceed its container, so give
     Queue an explicit contained width. */
  .queue-strip:empty::after {
    width:calc(100% - 4px);
    max-width:calc(100% - 4px);
    min-width:0;
    margin:2px;
  }

  /* Use our own arrow on the task Section selector at phone widths.
     Native select arrows are positioned differently by each browser
     and can sit too close to a rounded control edge. */
  #taskSectionSelect {
    -webkit-appearance:none;
    appearance:none;
    background-color:var(--surface-2);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
      linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
    padding-right:42px;
  }

  #taskSectionSelect:focus {
    background-color:var(--surface);
  }
}



/* ============================================================
   v0.111 DEFINITIVE NARROW-SCREEN QUEUE + SECTION SELECT FIXES
   ============================================================ */
@media (max-width:640px) {
  /*
    Empty Queue:
    The Queue normally uses CSS multi-column layout for cards.
    Generated empty-state content can inherit awkward multicol sizing
    in narrow Chromium viewports. When Queue is empty, remove the
    container from multicol layout entirely and let the message flex
    inside the actual available content width.
  */
  .queue-strip:empty {
    display:flex;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:2px 0 8px;
    margin:0;
    columns:auto;
    column-width:auto;
    column-count:auto;
    column-gap:normal;
    overflow:hidden;
  }

  .queue-strip:empty::after {
    flex:1 1 auto;
    width:auto;
    max-width:none;
    min-width:0;
    margin:2px;
  }

  /*
    Task Section selector:
    Keep SECTION on the left, but do not let the selector expand across
    the whole modal. It may shrink below 220px on very small phones.
  */
  .task-meta-row .task-section-field {
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0, 220px);
    justify-content:start;
    align-items:center;
    gap:10px;
  }

  #taskSectionSelect {
    width:100%;
    min-width:0;
    max-width:220px;
    justify-self:start;
  }
}



/* ============================================================
   v0.112 MANAGER → SETTINGS NAVIGATION
   ============================================================ */
.manager-header-nav {
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:9px;
}

.manager-header-copy {
  min-width:0;
}

.manager-back-btn {
  flex:none;
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--ink-3);
}

.manager-back-btn:hover {
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--ink);
}

.manager-back-btn:focus-visible {
  outline:2px solid color-mix(in srgb, var(--c-queue) 55%, transparent);
  outline-offset:2px;
}

@media (max-width:640px) {
  .manager-header-nav {
    gap:7px;
  }

  .manager-back-btn {
    width:38px;
    height:38px;
    min-width:38px;
  }
}



/* ============================================================
   v0.113 MANAGER MODAL HEADER ALIGNMENT
   ============================================================ */
.tag-manager-modal .modal-header,
.board-manager-modal .modal-header,
.section-manager-modal .modal-header {
  align-items:flex-start;
}

.tag-manager-modal .modal-header > .manager-header-nav,
.board-manager-modal .modal-header > .manager-header-nav,
.section-manager-modal .modal-header > .manager-header-nav {
  flex:1 1 auto;
  min-width:0;
}

.tag-manager-modal .modal-header > .close-modal,
.board-manager-modal .modal-header > .close-modal,
.section-manager-modal .modal-header > .close-modal {
  flex:none;
  margin-left:auto;
  align-self:flex-start;
}



/* ============================================================
   v0.115 CHANGELOG
   ============================================================ */
.changelog-backdrop {
  padding:18px;
}

.changelog-modal {
  width:min(780px, 100%);
  max-height:min(86vh, 900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.changelog-header {
  margin-bottom:10px;
}

.changelog-subtitle {
  margin:3px 0 0;
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
}

.changelog-intro {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  padding:10px 12px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
  color:var(--ink-3);
  font-size:11.5px;
}

.changelog-current-version {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:var(--r-pill);
  color:var(--c-soon);
  background:color-mix(in srgb, var(--c-soon) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--c-soon) 32%, var(--line));
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
}

.changelog-timeline {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:5px 5px 14px 2px;
}

.changelog-entry {
  --timeline-color:var(--ink-4);
  position:relative;
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:15px;
  padding:0 0 18px;
}

.changelog-entry::before {
  content:"";
  position:absolute;
  left:72px;
  top:18px;
  bottom:-2px;
  width:1px;
  background:var(--line-2);
}

.changelog-entry:last-child::before {
  display:none;
}

.changelog-version {
  position:relative;
  padding-top:1px;
  color:var(--ink-3);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  text-align:right;
  white-space:nowrap;
}

.changelog-version::after {
  content:"";
  position:absolute;
  top:6px;
  right:-20px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--timeline-color);
  box-shadow:0 0 0 3px var(--surface);
}

.changelog-entry.is-current {
  --timeline-color:var(--c-soon);
}

.changelog-entry.is-current .changelog-version {
  color:var(--c-soon);
}

.changelog-entry-body {
  min-width:0;
  padding:10px 12px;
  margin-top:-6px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.changelog-entry.is-current .changelog-entry-body {
  border-color:color-mix(in srgb, var(--c-soon) 68%, var(--line));
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--c-soon) 11%, var(--surface-2)),
    color-mix(in srgb, var(--c-soon) 4%, var(--surface-2)) 58%,
    var(--surface-2));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-soon) 28%, transparent),
    0 0 20px color-mix(in srgb, var(--c-soon) 34%, transparent),
    0 0 46px color-mix(in srgb, var(--c-soon) 20%, transparent),
    0 16px 40px -26px color-mix(in srgb, var(--c-soon) 86%, transparent);
}

.changelog-entry.is-current .changelog-version::after {
  background:var(--c-soon);
  border-color:color-mix(in srgb, var(--c-soon) 78%, white);
  box-shadow:
    0 0 0 3px var(--surface),
    0 0 12px color-mix(in srgb, var(--c-soon) 70%, transparent),
    0 0 24px color-mix(in srgb, var(--c-soon) 42%, transparent);
}

.changelog-entry-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
}

.changelog-entry-head strong {
  color:var(--ink);
  font-size:12px;
}

.changelog-current-badge {
  padding:2px 7px;
  border-radius:var(--r-pill);
  color:var(--c-soon);
  background:color-mix(in srgb, var(--c-soon) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--c-soon) 30%, var(--line));
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.changelog-notes {
  margin:0;
  padding-left:17px;
  color:var(--ink-3);
  font-size:12px;
  line-height:1.55;
}

.changelog-notes li + li {
  margin-top:4px;
}

@media (max-width:640px) {
  .changelog-backdrop {
    padding:8px;
  }

  .changelog-modal {
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    padding:14px;
  }

  .changelog-entry {
    grid-template-columns:54px minmax(0,1fr);
    gap:12px;
  }

  .changelog-entry::before {
    left:47px;
  }

  .changelog-version {
    font-size:9.5px;
  }

  .changelog-version::after {
    right:-17px;
  }

  .changelog-entry-body {
    padding:9px 10px;
  }
}



/* ============================================================
   v0.117 SUB-TASK MULTI-SELECTION RELIABILITY
   ============================================================ */
.subtask-card {
  position:relative;
}

.subtask-card.is-selected::after {
  content:"Selected";
  position:absolute;
  right:38px;
  top:7px;
  padding:2px 6px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--c-queue);
  background:color-mix(in srgb, var(--c-queue) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--c-queue) 24%, var(--line));
  pointer-events:none;
}

@media (max-width:640px) {
  .subtask-card.is-selected::after {
    right:36px;
    top:6px;
  }
}



/* ============================================================
   v0.121 COMPLETION SYSTEM
   ============================================================ */
.bulk-complete-btn,
.task-complete-btn,
.context-done {
  color:var(--c-soon);
}

.bulk-complete-btn {
  border-color:color-mix(in srgb, var(--c-soon) 35%, var(--line));
  background:color-mix(in srgb, var(--c-soon) 8%, var(--surface));
}

.bulk-complete-btn:hover:not(:disabled) {
  color:var(--c-soon);
  border-color:color-mix(in srgb, var(--c-soon) 52%, var(--line-2));
  background:color-mix(in srgb, var(--c-soon) 14%, var(--surface));
}

.bulk-complete-btn:disabled {
  opacity:.45;
  cursor:default;
  transform:none;
}

.complete-btn:hover {
  color:var(--c-soon) !important;
  background:color-mix(in srgb, var(--c-soon) 10%, var(--surface)) !important;
  border-color:color-mix(in srgb, var(--c-soon) 35%, var(--line)) !important;
}

.task-completion-actions {
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.task-complete-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 13px;
  border-color:color-mix(in srgb, var(--c-soon) 38%, var(--line));
  background:color-mix(in srgb, var(--c-soon) 9%, var(--surface-2));
  font-weight:650;
}

.task-complete-btn:hover {
  color:var(--c-soon);
  border-color:color-mix(in srgb, var(--c-soon) 58%, var(--line-2));
  background:color-mix(in srgb, var(--c-soon) 15%, var(--surface-2));
}

.subtask-card {
  grid-template-columns:auto auto minmax(0,1fr) auto;
}

.subtask-complete-btn {
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  margin-top:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  border-color:var(--line);
  box-shadow:none;
  color:var(--ink-4);
}

.subtask-complete-btn:hover {
  color:var(--c-soon);
  border-color:color-mix(in srgb, var(--c-soon) 50%, var(--line));
  background:color-mix(in srgb, var(--c-soon) 8%, var(--surface));
}

.subtask-complete-btn.is-completed {
  color:var(--surface);
  border-color:var(--c-soon);
  background:var(--c-soon);
}

.subtask-card.is-completed {
  opacity:.72;
}

.subtask-card.is-completed .subtask-name-input {
  color:var(--ink-4);
  text-decoration:none;
}

.subtask-card.is-completed.completed-subtask-strike .subtask-name-input {
  text-decoration:line-through;
  text-decoration-thickness:1px;
}

.subtask-card.is-completed .subtask-notes {
  opacity:.74;
}

.subtask-notes-wrap {
  grid-column:3 / -1;
}

.add-subnote-btn,
.remove-subnote-btn {
  grid-column:3 / 4;
}

.card-title {
  padding-right:88px;
}

@media (max-width:860px), (pointer:coarse) {
  .card-title {
    padding-right:124px;
  }

  .subtask-complete-btn {
    width:34px;
    height:34px;
    min-width:34px;
  }
}

@media (max-width:640px) {
  .task-completion-actions {
    position:sticky;
    bottom:-14px;
    margin-inline:-14px;
    padding:10px 14px 14px;
    background:linear-gradient(
      to bottom,
      color-mix(in srgb, var(--surface) 84%, transparent),
      var(--surface) 34%
    );
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .task-complete-btn {
    width:100%;
  }
}



/* ============================================================
   v0.123 URGENT FLAGS
   ============================================================ */
.card.is-urgent {
  background:
    color-mix(in srgb, var(--danger) 5%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 36%, var(--line));
  --card-edge-accent:var(--col);
  box-shadow:
    var(--sh-1),
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 14%, transparent);
}

.card.is-urgent:hover {
  background:
    color-mix(in srgb, var(--danger) 8%, var(--surface-3));
  border-color:
    color-mix(in srgb, var(--danger) 46%, var(--line-2));
  --card-edge-accent:var(--col);
  box-shadow:
    var(--sh-2),
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 20%, transparent);
}

.card.is-urgent.is-selected {
  box-shadow:
    var(--sh-1),
    0 0 0 2px color-mix(in srgb, var(--c-queue) 22%, transparent),
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 14%, transparent);
}

.urgent-chip {
  color:var(--danger);
  background:
    color-mix(in srgb, var(--danger) 9%, transparent);
  border-color:
    color-mix(in srgb, var(--danger) 34%, var(--line));
  font-weight:700;
}

.subtask-urgent-chip {
  color:var(--danger);
  background:
    color-mix(in srgb, var(--danger) 7%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 34%, var(--line));
  border-style:dashed;
  font-weight:700;
}

.subtask-urgent-chip .subtask-urgent-list-mark {
  display:inline-grid;
  place-items:center;
  width:13px;
  height:13px;
  margin-right:-1px;
  border-radius:4px;
  background:
    color-mix(in srgb, var(--danger) 10%, transparent);
}

.card.has-urgent-subtasks:not(.is-urgent) {
  box-shadow:
    var(--sh-1),
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 8%, transparent);
}

.card.has-urgent-subtasks:not(.is-urgent):hover {
  box-shadow:
    var(--sh-2),
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 13%, transparent);
}

.context-urgent {
  color:var(--danger) !important;
}

.task-context-menu .context-urgent:hover {
  color:var(--danger) !important;
  background:
    color-mix(in srgb, var(--danger) 9%, var(--surface-2));
}

.task-urgent-field {
  flex:none;
  min-width:0;
}

.task-urgent-toggle {
  min-height:30px;
  padding:4px 10px;
  gap:6px;
  border-radius:var(--r-pill);
  background:transparent;
  border:1px solid var(--line-2);
  box-shadow:none;
  color:var(--ink-3);
  font-size:11.5px;
  white-space:nowrap;
}

.task-urgent-toggle:hover {
  color:var(--danger);
  border-color:
    color-mix(in srgb, var(--danger) 40%, var(--line-2));
  background:
    color-mix(in srgb, var(--danger) 7%, transparent);
}

.task-urgent-toggle.is-urgent {
  color:var(--danger);
  border-color:
    color-mix(in srgb, var(--danger) 48%, var(--line-2));
  background:
    color-mix(in srgb, var(--danger) 11%, var(--surface-2));
  font-weight:700;
}

.subtask-card {
  grid-template-columns:
    auto auto minmax(0,1fr) auto auto;
}

.subtask-card.is-urgent {
  background:
    color-mix(in srgb, var(--danger) 5%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 32%, var(--line));
  box-shadow:
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 11%, transparent);
}

.subtask-card.is-urgent.is-completed {
  background:
    color-mix(in srgb, var(--danger) 3%, var(--surface-2));
}

.subtask-urgent-btn {
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  display:grid;
  place-items:center;
  align-self:start;
  border-radius:8px;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--ink-4);
}

.subtask-urgent-btn:hover {
  color:var(--danger);
  border-color:
    color-mix(in srgb, var(--danger) 28%, var(--line));
  background:
    color-mix(in srgb, var(--danger) 8%, transparent);
}

.subtask-urgent-btn.is-urgent {
  color:var(--danger);
  border-color:
    color-mix(in srgb, var(--danger) 38%, var(--line));
  background:
    color-mix(in srgb, var(--danger) 10%, transparent);
}

.subtask-card.is-selected::after {
  right:72px;
}

@media (max-width:620px) {
  .task-urgent-field {
    flex:0 0 auto;
  }

  .task-urgent-toggle {
    min-height:38px;
  }
}

@media (max-width:860px), (pointer:coarse) {
  .subtask-urgent-btn {
    width:34px;
    height:34px;
    min-width:34px;
  }
}

@media (max-width:640px) {
  .subtask-card.is-selected::after {
    right:78px;
  }
}


.subtask-urgent-btn:disabled {
  opacity:.48;
  cursor:default;
  transform:none;
}

.subtask-urgent-btn:disabled:hover {
  color:var(--ink-4);
  border-color:transparent;
  background:transparent;
}



/* ============================================================
   v0.124 TASK HEADER CONTROLS
   ============================================================ */
#taskModalBackdrop .task-modal-header {
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
}

#taskModalBackdrop .main-task-name-wrap {
  flex:1 1 auto;
  min-width:0;
}

.task-header-controls {
  flex:none;
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:22px;
}

.task-header-control-label {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.task-header-urgent-toggle,
#taskModalBackdrop .task-close-btn {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:12px;
  box-shadow:none;
}

.task-header-urgent-toggle {
  color:var(--ink-4);
  background:var(--surface-2);
  border:1px solid var(--line);
}

.task-header-urgent-toggle:hover {
  color:var(--danger);
  background:
    color-mix(in srgb, var(--danger) 7%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 32%, var(--line-2));
}

.task-header-urgent-toggle.is-urgent {
  color:var(--danger);
  background:
    color-mix(in srgb, var(--danger) 12%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 48%, var(--line-2));
  box-shadow:
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 12%, transparent);
}

.task-header-urgent-toggle.is-urgent:hover {
  background:
    color-mix(in srgb, var(--danger) 17%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 62%, var(--line-2));
}

/* Chrome on touch devices can retain :hover after a tap. A cleared Urgent
   button must therefore render neutral even while that synthetic hover state
   is stuck; genuinely urgent buttons keep the existing red active styling. */
@media (hover:none) {
  .task-header-urgent-toggle:not(.is-urgent):hover {
    color:var(--ink-4);
    background:var(--surface-2);
    border-color:var(--line);
    box-shadow:none;
  }
}

#taskModalBackdrop .task-close-btn {
  color:var(--ink-3);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-3) 82%, transparent),
      var(--surface-2)
    );
  border:1px solid var(--line);
  box-shadow:
    0 1px 0
      color-mix(in srgb, #fff 7%, transparent),
    0 4px 12px rgba(0,0,0,.10);
}

#taskModalBackdrop .task-close-btn:hover {
  color:var(--danger);
  background:
    color-mix(in srgb, var(--danger) 8%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 34%, var(--line-2));
  box-shadow:
    0 5px 16px rgba(0,0,0,.14);
}

#taskModalBackdrop .task-close-btn:active,
.task-header-urgent-toggle:active {
  transform:translateY(1px);
}

#taskModalBackdrop .task-close-btn:focus-visible,
.task-header-urgent-toggle:focus-visible {
  outline:3px solid
    color-mix(in srgb, var(--col) 28%, transparent);
  outline-offset:3px;
}

#taskModalBackdrop .task-meta-row {
  align-items:flex-start;
}

#taskModalBackdrop .task-tags-area {
  padding-top:20px;
}

/* The old metadata-row urgency wrapper no longer exists in v0.124. */
#taskModalBackdrop .task-urgent-field {
  display:none;
}

@media (max-width:640px) {
  #taskModalBackdrop .task-modal-header {
    gap:14px;
  }

  .task-header-controls {
    gap:14px;
    margin-top:21px;
  }

  .task-header-urgent-toggle,
  #taskModalBackdrop .task-close-btn {
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    border-radius:13px;
  }

  .task-header-urgent-toggle svg,
  #taskModalBackdrop .task-close-btn svg {
    width:20px;
    height:20px;
  }
}

@media (max-width:420px) {
  #taskModalBackdrop .task-modal-header {
    gap:12px;
  }

  .task-header-controls {
    gap:12px;
  }

  .task-header-urgent-toggle,
  #taskModalBackdrop .task-close-btn {
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
  }
}



/* ============================================================
   v0.125 TASK HEADER / META ALIGNMENT POLISH
   ============================================================ */

/* Restore the tag controls to the same control baseline as Section. */
#taskModalBackdrop .task-tags-area {
  padding-top:0;
}

/*
  Keep the title-to-flag spacing controlled by the modal-header gap.
  Only increase the spacing inside the control group: flag -> close.
*/
.task-header-controls {
  gap:22px;
}

/* Keep the Urgent flag at its current size. */
.task-header-urgent-toggle {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}

/* Make only the close control smaller. */
#taskModalBackdrop .task-close-btn {
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  border-radius:10px;
}

#taskModalBackdrop .task-close-btn svg {
  width:16px;
  height:16px;
}

@media (max-width:640px) {
  .task-header-controls {
    gap:24px;
  }

  .task-header-urgent-toggle {
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }

  #taskModalBackdrop .task-close-btn {
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    border-radius:11px;
  }

  #taskModalBackdrop .task-close-btn svg {
    width:17px;
    height:17px;
  }
}

@media (max-width:420px) {
  .task-header-controls {
    gap:22px;
  }

  .task-header-urgent-toggle {
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
  }

  #taskModalBackdrop .task-close-btn {
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
  }
}



/* ============================================================
   v0.126 CONTEXT MENU URGENT COLOR
   ============================================================ */
.task-context-menu .context-urgent {
  color:var(--ink-2) !important;
}

.task-context-menu .context-urgent:hover {
  color:var(--ink) !important;
  background:var(--surface-2);
}





/* ============================================================
   v0.128 FILLED PENNANT FINAL
   ============================================================ */

/*
  Final header layout:
  task name -> filled pennant -> larger gap -> smaller close button.
  The task-name-to-flag spacing stays at the existing modal-header gap.
*/
#taskModalBackdrop .task-header-controls {
  margin-top:22px;
  gap:22px;
}

.task-header-urgent-toggle {
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:12px;
}

#taskModalBackdrop .task-close-btn {
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  border-radius:10px;
}

#taskModalBackdrop .task-close-btn svg {
  width:16px;
  height:16px;
}

@media (max-width:640px) {
  #taskModalBackdrop .task-header-controls {
    gap:24px;
    margin-top:21px;
  }

  .task-header-urgent-toggle {
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }

  #taskModalBackdrop .task-close-btn {
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    border-radius:11px;
  }

  #taskModalBackdrop .task-close-btn svg {
    width:17px;
    height:17px;
  }
}

@media (max-width:420px) {
  #taskModalBackdrop .task-header-controls {
    gap:22px;
  }

  .task-header-urgent-toggle {
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
  }

  #taskModalBackdrop .task-close-btn {
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
  }
}



/* ============================================================
   v0.1.64 COMPLETED + PAUSED TASK SETTINGS
   ============================================================ */
.task-behavior-settings-modal {
  --col:var(--c-soon);
  width:min(860px, 100%);
  max-height:min(86vh, 780px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}

.paused-task-settings-modal {
  --col:var(--c-later);
}

.task-behavior-settings-modal::before {
  z-index:2;
  left:22px;
  right:auto;
  width:min(300px, 42%);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--col), transparent);
  box-shadow:0 0 10px color-mix(in srgb, var(--col) 20%, transparent);
}

.task-behavior-settings-header {
  flex:0 0 auto;
  align-items:flex-start;
  margin:0;
  padding:21px 24px 17px;
  border-bottom:1px solid var(--line);
}

.task-behavior-settings-header > .manager-header-nav {
  flex:1 1 auto;
  min-width:0;
}

.task-behavior-settings-header > .close-modal {
  flex:none;
  margin-left:auto;
  align-self:flex-start;
}

.task-behavior-settings-header .manager-header-copy {
  display:grid;
  gap:3px;
}

.task-behavior-settings-header h3 {
  font-size:21px;
}

.task-behavior-settings-header .section-manager-help {
  margin:0;
  color:var(--ink-3);
  font-size:11.5px;
  line-height:1.45;
}

.task-behavior-settings-body {
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:24px 30px 32px;
}

.task-behavior-settings-section + .task-behavior-settings-section {
  margin-top:26px;
}

.task-behavior-settings-heading {
  display:grid;
  gap:3px;
  margin:0 0 8px;
}

.task-behavior-settings-heading strong {
  color:var(--ink-2);
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:-.01em;
}

.task-behavior-settings-heading span {
  color:var(--ink-4);
  font-size:11px;
  line-height:1.45;
}

.task-behavior-settings-list {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.task-behavior-settings-row {
  min-height:62px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px, 220px);
  align-items:center;
  gap:24px;
  padding:11px 2px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}

.task-behavior-settings-row:last-child {
  border-bottom:0;
}

.task-behavior-settings-row[hidden] {
  display:none !important;
}

.task-behavior-settings-copy {
  min-width:0;
  display:grid;
  gap:3px;
}

.task-behavior-settings-copy strong {
  color:var(--ink-2);
  font-size:13px;
}

.task-behavior-settings-copy small {
  color:var(--ink-4);
  font-size:11px;
  line-height:1.45;
}

.task-behavior-settings-control {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}

.task-behavior-settings-control select,
.task-behavior-settings-control input[type="time"] {
  width:100%;
  max-width:200px;
  min-height:38px;
  padding:7px 9px;
  color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

.task-behavior-settings-row-control .task-behavior-settings-control {
  min-width:76px;
}

@media (max-width:720px) {
  .task-behavior-settings-modal {
    width:100%;
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    padding:0;
  }

  .task-behavior-settings-header {
    padding:18px 18px 14px;
  }

  .task-behavior-settings-body {
    padding:20px 18px 28px;
  }

  .task-behavior-settings-row {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding:13px 2px;
  }

  .task-behavior-settings-control {
    justify-content:flex-start;
  }

  .task-behavior-settings-control select,
  .task-behavior-settings-control input[type="time"] {
    width:100%;
    max-width:none;
  }

  .task-behavior-settings-row-control {
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  .task-behavior-settings-row-control .task-behavior-settings-control {
    justify-content:flex-end;
  }
}

.card-title-row {
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:7px;
}

.card-title-row .card-title {
  flex:1 1 auto;
  min-width:0;
}

.completed-check {
  flex:none;
  width:18px;
  height:18px;
  margin-top:1px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--ink-3);
}

.card.is-completed.completed-muted {
  background:
    color-mix(in srgb, var(--ink-4) 7%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--ink-4) 28%, var(--line));
  --card-edge-accent:var(--ink-4);
  box-shadow:var(--sh-1);
  color:var(--ink-3);
}

.card.is-completed.completed-muted:hover {
  background:
    color-mix(in srgb, var(--ink-4) 9%, var(--surface-3));
  border-color:
    color-mix(in srgb, var(--ink-4) 38%, var(--line-2));
  --card-edge-accent:var(--ink-4);
}

.card.is-completed.completed-muted .card-title,
.card.is-completed.completed-muted .card-meta,
.card.is-completed.completed-muted .chip {
  color:var(--ink-3);
}

.card.is-completed.completed-muted .card-tag {
  filter:grayscale(.75);
  color:var(--ink-3);
}

.card.is-completed.completed-opacity {
  opacity:.42;
}

.card.is-completed.completed-opacity:hover,
.card.is-completed.completed-opacity:focus-within {
  opacity:.54;
}

.card.is-completed.completed-strike .card-title {
  text-decoration:line-through;
  text-decoration-thickness:1.3px;
  text-decoration-color:currentColor;
}

.card.is-completed.completed-drag-disabled {
  cursor:pointer;
}

.card.is-completed.completed-drag-disabled:active {
  cursor:pointer;
}

.card.is-completed .completed-check {
  color:var(--c-soon);
}

.card.is-completed.completed-muted .completed-check {
  color:var(--ink-3);
}

.card.is-completed .complete-btn.is-completed,
.task-complete-btn.is-completed {
  color:var(--c-soon);
  border-color:
    color-mix(in srgb, var(--c-soon) 38%, var(--line));
  background:
    color-mix(in srgb, var(--c-soon) 8%, var(--surface-2));
}

#taskUrgentToggleBtn:disabled {
  opacity:.5;
  cursor:default;
  transform:none;
}

#taskUrgentToggleBtn:disabled:hover {
  color:var(--ink-4);
  background:var(--surface-2);
  border-color:var(--line);
}

/* v0.132 — completed parent sub-tasks are locked until the parent is reopened. */
.subtask-card.parent-read-only {
  cursor:default;
}

.subtask-card.parent-read-only .subtask-name-input[readonly],
.subtask-card.parent-read-only .subtask-notes[readonly] {
  cursor:default;
  color:var(--ink-3);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

.subtask-card.parent-read-only .subtask-name-input[readonly]:hover,
.subtask-card.parent-read-only .subtask-notes[readonly]:hover,
.subtask-card.parent-read-only .subtask-name-input[readonly]:focus,
.subtask-card.parent-read-only .subtask-notes[readonly]:focus {
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

.subtask-add[hidden],
.subtask-card [hidden] {
  display:none !important;
}



/* ============================================================
   v0.137 localStorage health meter
   ============================================================ */
.storage-health-settings {
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
}

.storage-health-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.storage-health-copy {
  min-width:0;
  display:grid;
  gap:3px;
}

.storage-health-copy strong {
  font-family:var(--font-display);
  font-size:14px;
}

.storage-health-copy span,
.storage-health-note,
.storage-health-general span,
.storage-health-stat span {
  color:var(--ink-4);
  font-size:11px;
  line-height:1.45;
}

.storage-health-percent {
  flex:none;
  color:var(--ink-2);
  font-family:var(--font-mono);
  font-size:14px;
}

.storage-meter {
  width:100%;
  height:12px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
}

.storage-meter-fill {
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--c-soon);
  transition:width .2s ease;
}

.storage-health-settings[data-level="caution"] .storage-meter-fill {
  background:var(--c-tomorrow);
}

.storage-health-settings[data-level="warning"] .storage-meter-fill {
  background:var(--c-today);
}

.storage-health-settings[data-level="critical"] .storage-meter-fill {
  background:var(--danger);
}

.storage-health-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

.storage-health-stat,
.storage-health-general {
  min-width:0;
  display:grid;
  gap:2px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
}

.storage-health-stat strong,
.storage-health-general strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ink-2);
  font-family:var(--font-mono);
  font-size:11px;
}

.storage-health-general {
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}

.storage-health-note {
  margin:0;
}

.storage-health-settings > button {
  width:100%;
  justify-content:center;
}

@media (max-width:540px) {
  .storage-health-grid {
    grid-template-columns:1fr;
  }

  .storage-health-general {
    grid-template-columns:1fr;
  }
}


@media (max-width:520px) {
  .subtask-add-preferences {
    justify-content:space-between;
  }

  .subtask-position-toggle {
    gap:6px;
  }
}



/* ============================================================
   v0.1.5 PAUSED TASKS
   ============================================================ */
.task-completion-actions {
  justify-content:space-between;
  gap:12px;
}

.task-pause-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 13px;
  color:var(--ink-3);
  border-color:color-mix(in srgb, var(--ink-4) 38%, var(--line));
  background:color-mix(in srgb, var(--ink-4) 8%, var(--surface-2));
  font-weight:650;
}

.task-pause-btn:hover:not(:disabled),
.task-pause-btn.is-paused {
  color:var(--ink-2);
  border-color:color-mix(in srgb, var(--ink-4) 58%, var(--line-2));
  background:color-mix(in srgb, var(--ink-4) 15%, var(--surface-2));
}

.task-pause-btn:disabled {
  opacity:.45;
  cursor:default;
  transform:none;
}

.card.is-paused.paused-muted {
  background:color-mix(in srgb, var(--ink-4) 8%, var(--surface-2));
  border-color:color-mix(in srgb, var(--ink-4) 30%, var(--line));
  --card-edge-accent:var(--ink-4);
  box-shadow:var(--sh-1);
  color:var(--ink-3);
}

.card.is-paused.paused-muted:hover {
  background:color-mix(in srgb, var(--ink-4) 10%, var(--surface-3));
  border-color:color-mix(in srgb, var(--ink-4) 40%, var(--line-2));
  --card-edge-accent:var(--ink-4);
}

.card.is-paused.paused-muted .card-title,
.card.is-paused.paused-muted .card-meta {
  color:var(--ink-3);
}

.card.is-paused.paused-muted .chip:not(.paused-chip):not(.paused-reminder-chip):not(.urgent-chip):not(.subtask-urgent-chip):not(.subtask-selection-chip) {
  color:var(--ink-3);
}

.card.is-paused.paused-muted .card-tag {
  filter:grayscale(.72);
  color:var(--ink-3);
}

.card.is-paused.paused-opacity {
  opacity:1;
}

.card.is-paused.paused-opacity .card-title-row,
.card.is-paused.paused-opacity .card-tags,
.card.is-paused.paused-opacity .card-actions {
  opacity:.48;
}

.card.is-paused.paused-opacity .card-meta .chip:not(.paused-chip):not(.paused-reminder-chip):not(.urgent-chip):not(.subtask-urgent-chip):not(.subtask-selection-chip) {
  opacity:.48;
}

.card.is-paused.paused-opacity:hover .card-title-row,
.card.is-paused.paused-opacity:hover .card-tags,
.card.is-paused.paused-opacity:hover .card-actions,
.card.is-paused.paused-opacity:focus-within .card-title-row,
.card.is-paused.paused-opacity:focus-within .card-tags,
.card.is-paused.paused-opacity:focus-within .card-actions {
  opacity:.62;
}

.card.is-paused.paused-opacity:hover .card-meta .chip:not(.paused-chip):not(.paused-reminder-chip):not(.urgent-chip):not(.subtask-urgent-chip):not(.subtask-selection-chip),
.card.is-paused.paused-opacity:focus-within .card-meta .chip:not(.paused-chip):not(.paused-reminder-chip):not(.urgent-chip):not(.subtask-urgent-chip):not(.subtask-selection-chip) {
  opacity:.62;
}

.paused-chip {
  color:var(--ink-3);
  background:color-mix(in srgb, var(--ink-3) 10%, transparent);
  border-color:color-mix(in srgb, var(--ink-3) 36%, var(--line));
  font-weight:700;
}

.card.is-paused.paused-muted .paused-chip {
  color:var(--ink-3);
}

.card.is-paused.paused-muted .urgent-chip,
.card.is-paused.paused-muted .subtask-urgent-chip {
  color:var(--danger);
}

.card.is-paused.is-urgent.paused-muted {
  background:color-mix(in srgb, var(--danger) 5%, var(--surface-2));
  border-color:color-mix(in srgb, var(--danger) 36%, var(--line));
  --card-edge-accent:var(--col);
  box-shadow:
    var(--sh-1),
    inset 0 0 0 1px color-mix(in srgb, var(--danger) 14%, transparent);
}

.card.is-paused.is-urgent.paused-muted:hover {
  background:color-mix(in srgb, var(--danger) 8%, var(--surface-3));
  border-color:color-mix(in srgb, var(--danger) 46%, var(--line-2));
  --card-edge-accent:var(--col);
  box-shadow:
    var(--sh-2),
    inset 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent);
}

@media (max-width:640px) {
  .task-completion-actions {
    gap:8px;
  }

  .task-pause-btn,
  .task-complete-btn {
    width:auto;
    flex:1 1 0;
  }
}

/* ============================================================
   v0.1.12 COMPACT PER-TASK PAUSED REMINDERS
   ============================================================ */
.task-pause-actions {
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  gap:8px;
  flex-wrap:wrap;
}

.task-pause-reminder-control {
  display:flex;
  align-items:center;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
}

.task-pause-reminder-control[data-state="inactive"] {
  display:none;
}

#pauseReminderSelect {
  width:auto;
  min-width:128px;
  max-width:196px;
  min-height:38px;
  padding:7px 30px 7px 10px;
  border:1px solid color-mix(in srgb, var(--ink-4) 34%, var(--line));
  border-radius:var(--r-md);
  background-color:color-mix(in srgb, var(--surface-2) 94%, var(--ink-4) 6%);
  color:var(--ink-2);
  font-size:12px;
  font-weight:650;
}

#pauseReminderSelect:not(:disabled):hover,
#pauseReminderSelect:not(:disabled):focus {
  border-color:color-mix(in srgb, var(--c-later) 45%, var(--line-2));
  background-color:var(--surface-3);
}

.task-pause-reminder-custom[hidden] {
  display:none !important;
}

.task-pause-reminder-custom {
  display:flex;
  align-items:center;
  gap:6px;
}

.task-pause-reminder-custom input {
  min-width:138px;
  min-height:38px;
  padding:7px 9px;
  font-size:12px;
}

.task-pause-reminder-custom button {
  min-height:38px;
  padding:7px 10px;
  font-size:11px;
}

.paused-reminder-chip {
  color:var(--c-later) !important;
  background:color-mix(in srgb, var(--c-later) 11%, var(--surface-2));
  border-color:color-mix(in srgb, var(--c-later) 42%, var(--line));
  font-weight:700;
}

.card.is-paused.has-pause-reminder {
  --card-edge-accent:color-mix(in srgb, var(--c-later) 62%, var(--ink-4));
}

@media (max-width:720px) {
  .task-completion-actions {
    align-items:stretch;
    flex-direction:column;
  }

  .task-pause-actions {
    width:100%;
  }

  .task-complete-btn {
    width:100%;
  }
}

@media (max-width:480px) {
  .task-pause-actions {
    align-items:stretch;
    flex-direction:column;
  }

  .task-pause-btn,
  .task-pause-reminder-control,
  #pauseReminderSelect {
    width:100%;
    max-width:none;
  }

  .task-pause-reminder-custom {
    width:100%;
  }

  .task-pause-reminder-custom input {
    flex:1 1 auto;
    min-width:0;
  }
}

.card.is-paused.paused-muted.has-pause-reminder:hover {
  --card-edge-accent:color-mix(in srgb, var(--c-later) 72%, var(--ink-4));
}

.card.is-paused.paused-reminder-revealed {
  opacity:1;
  background:var(--surface-2);
  border-color:var(--line);
  --card-edge-accent:color-mix(in srgb, var(--c-later) 68%, var(--col));
  color:var(--ink);
}

.card.is-paused.paused-reminder-revealed:hover {
  opacity:1;
  background:var(--surface-3);
  border-color:var(--line-2);
  --card-edge-accent:color-mix(in srgb, var(--c-later) 78%, var(--col));
}

.card.is-paused.paused-reminder-revealed .card-title,
.card.is-paused.paused-reminder-revealed .card-meta {
  color:inherit;
}

.card.is-paused.paused-reminder-revealed .paused-chip {
  color:var(--ink-3) !important;
}

.card.is-paused.paused-reminder-revealed .paused-reminder-chip {
  color:var(--c-later) !important;
}

.card.is-paused.paused-reminder-revealed .urgent-chip,
.card.is-paused.paused-reminder-revealed .subtask-urgent-chip {
  color:var(--danger) !important;
}

.card.is-paused.is-urgent.paused-reminder-revealed {
  background:
    color-mix(in srgb, var(--danger) 5%, var(--surface-2));
  border-color:
    color-mix(in srgb, var(--danger) 36%, var(--line));
  --card-edge-accent:var(--col);
  box-shadow:
    var(--sh-1),
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 14%, transparent);
}

.card.is-paused.is-urgent.paused-reminder-revealed:hover {
  background:
    color-mix(in srgb, var(--danger) 8%, var(--surface-3));
  border-color:
    color-mix(in srgb, var(--danger) 46%, var(--line-2));
  --card-edge-accent:var(--col);
  box-shadow:
    var(--sh-2),
    inset 0 0 0 1px
      color-mix(in srgb, var(--danger) 20%, transparent);
}

.card.pause-reminder-due-glow {
  overflow:visible;
}

/*
  Reminder attention is edge-only by construction: this pseudo-element has no
  background, border, mask, or fill. Its outer shadows are clipped out of the
  card's own box, so animated light can move around the edges without ever
  painting across the task face or replacing the card's Urgent shadow.
*/
.card.pause-reminder-due-glow::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:none;
  border:0;
  box-shadow:
    0 0 18px 2px color-mix(in srgb, var(--c-later) 34%, transparent),
    0 0 42px 3px color-mix(in srgb, var(--c-later) 16%, transparent),
    -30px -12px 34px -18px color-mix(in srgb, var(--c-later) 78%, transparent),
    24px 8px 34px -18px color-mix(in srgb, var(--c-later) 34%, transparent),
    8px 27px 38px -18px color-mix(in srgb, var(--c-later) 52%, transparent);
  animation:
    pause-reminder-edge-sweep 5.6s ease-in-out
      var(--pause-reminder-attention-delay, 0s) infinite,
    pause-reminder-attention-fade 17s linear
      var(--pause-reminder-attention-delay, 0s) 1 both;
}

@keyframes pause-reminder-edge-sweep {
  0%, 100% {
    box-shadow:
      0 0 18px 2px color-mix(in srgb, var(--c-later) 34%, transparent),
      0 0 42px 3px color-mix(in srgb, var(--c-later) 16%, transparent),
      -30px -12px 34px -18px color-mix(in srgb, var(--c-later) 78%, transparent),
      24px 8px 34px -18px color-mix(in srgb, var(--c-later) 34%, transparent),
      8px 27px 38px -18px color-mix(in srgb, var(--c-later) 52%, transparent);
  }
  25% {
    box-shadow:
      0 0 18px 2px color-mix(in srgb, var(--c-later) 34%, transparent),
      0 0 42px 3px color-mix(in srgb, var(--c-later) 16%, transparent),
      24px -16px 34px -18px color-mix(in srgb, var(--c-later) 78%, transparent),
      30px 15px 36px -18px color-mix(in srgb, var(--c-later) 52%, transparent),
      -14px 25px 34px -18px color-mix(in srgb, var(--c-later) 30%, transparent);
  }
  50% {
    box-shadow:
      0 0 18px 2px color-mix(in srgb, var(--c-later) 34%, transparent),
      0 0 42px 3px color-mix(in srgb, var(--c-later) 16%, transparent),
      27px 17px 36px -18px color-mix(in srgb, var(--c-later) 70%, transparent),
      -5px 30px 38px -18px color-mix(in srgb, var(--c-later) 56%, transparent),
      -28px -3px 34px -18px color-mix(in srgb, var(--c-later) 30%, transparent);
  }
  75% {
    box-shadow:
      0 0 18px 2px color-mix(in srgb, var(--c-later) 34%, transparent),
      0 0 42px 3px color-mix(in srgb, var(--c-later) 16%, transparent),
      -25px 18px 36px -18px color-mix(in srgb, var(--c-later) 74%, transparent),
      -30px -10px 34px -18px color-mix(in srgb, var(--c-later) 48%, transparent),
      13px -25px 34px -18px color-mix(in srgb, var(--c-later) 34%, transparent);
  }
}

@keyframes pause-reminder-attention-fade {
  0%, 88.235294% { opacity:1; }
  100% { opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  .card.pause-reminder-due-glow::before {
    animation:
      pause-reminder-attention-fade 17s linear
      var(--pause-reminder-attention-delay, 0s) 1 both;
  }
}



.card.is-paused.paused-muted .subtask-selection-chip,
.card.is-paused.paused-reminder-revealed .subtask-selection-chip {
  color:color-mix(in srgb, var(--c-queue) 88%, white 12%);
  opacity:1;
}

/* ============================================================
   TOUCH MULTI-SELECTION
   The touch UI is keyed to the actual input that entered selection,
   never to viewport width or generic desktop Selection Mode.
   ============================================================ */
.item-selection-check {
  display:none;
  place-items:center;
  width:38px;
  height:38px;
  min-width:38px;
  padding:0;
  border-radius:50%;
  border:3px solid color-mix(in srgb, var(--c-queue) 66%, var(--line-2));
  background:color-mix(in srgb, var(--c-queue) 5%, var(--surface));
  color:transparent;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--c-queue) 12%, transparent),
    0 3px 10px rgba(0,0,0,.12);
  z-index:5;
}

.item-selection-check svg {
  width:20px;
  height:20px;
  opacity:0;
  transform:scale(.72);
  transition:
    opacity .12s var(--ease),
    transform .12s var(--ease);
}

.item-selection-check[aria-pressed="true"] {
  color:#fff;
  border-color:var(--c-queue);
  background:var(--c-queue);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-queue) 18%, transparent),
    0 4px 12px color-mix(in srgb, var(--c-queue) 24%, transparent);
}

.item-selection-check[aria-pressed="true"] svg {
  opacity:1;
  transform:scale(1);
}

body.touch-selection-mode .task-selection-check,
body.touch-selection-mode .subtask-selection-check {
  display:grid;
}

.task-selection-check {
  position:absolute;
  right:9px;
  top:9px;
  bottom:auto;
}

/* Touch mode replaces the classic desktop markers with real controls. */
body.touch-selection-mode .card.is-selected::after,
body.touch-selection-mode .subtask-card.is-selected::after {
  display:none;
}

body.touch-selection-mode .subtask-card {
  grid-template-columns:minmax(0,1fr) 38px;
  gap:8px 10px;
  padding-top:10px;
  padding-bottom:10px;
}

body.touch-selection-mode .subtask-card .subtask-name-input {
  grid-column:1;
  grid-row:1;
}

body.touch-selection-mode .subtask-card .subtask-selection-check {
  grid-column:2;
  grid-row:1;
  justify-self:end;
  align-self:start;
  margin:0;
}

body.touch-selection-mode .subtask-card .subtask-notes-wrap {
  grid-column:1;
  grid-row:2;
  width:100%;
}

.subtask-selection-check {
  align-self:start;
  margin-top:0;
}

body.touch-selection-mode .subtask-card,
body.touch-selection-mode .subtask-name-input {
  cursor:pointer;
}

/* ============================================================
   TOUCH SELECTION MODE
   ============================================================ */
.selection-open-label,
.mobile-selection-tray {
  display:none;
}

body.touch-selection-mode .task-touch-drag-handle,
body.touch-selection-mode .subtask-drag-handle {
  display:none !important;
  pointer-events:none !important;
}

body.touch-selection-mode .card .complete-btn,
body.touch-selection-mode .card .delete-btn {
  display:none !important;
  pointer-events:none !important;
}

body.touch-selection-mode .card .card-tag {
  pointer-events:none;
  opacity:.48;
}

body.touch-selection-mode #taskModalBackdrop.open .main-task-name,
body.touch-selection-mode #taskModalBackdrop.open #taskSectionSelect,
body.touch-selection-mode #taskModalBackdrop.open #addTaskTagBtn,
body.touch-selection-mode #taskModalBackdrop.open #taskTagEntry,
body.touch-selection-mode #taskModalBackdrop.open #taskTagsList,
body.touch-selection-mode #taskModalBackdrop.open #addTaskNoteBtn,
body.touch-selection-mode #taskModalBackdrop.open #taskNotesEditor,
body.touch-selection-mode #taskModalBackdrop.open #subtaskAddPreferences,
body.touch-selection-mode #taskModalBackdrop.open #subtaskAddRow,
body.touch-selection-mode #taskModalBackdrop.open .task-completion-actions {
  pointer-events:none;
  opacity:.48;
}

/* The normal phone footer is sticky for convenient task editing. During touch
   Selection Mode a fixed selection tray already owns the viewport bottom, so
   keeping this disabled footer sticky makes it float across sub-task rows. */
body.touch-selection-mode #taskModalBackdrop.open .task-completion-actions {
  position:static;
  bottom:auto;
}

body.touch-selection-mode #taskModalBackdrop.open .subtask-name-input,
body.touch-selection-mode #taskModalBackdrop.open .subtask-notes {
  pointer-events:none;
  caret-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  resize:none;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  outline:none;
}

body.touch-selection-mode #taskModalBackdrop.open .subtask-name-input:hover,
body.touch-selection-mode #taskModalBackdrop.open .subtask-name-input:focus,
body.touch-selection-mode #taskModalBackdrop.open .subtask-notes:hover,
body.touch-selection-mode #taskModalBackdrop.open .subtask-notes:focus {
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  outline:none;
}

body.touch-selection-mode #taskModalBackdrop.open .subtask-complete-btn,
body.touch-selection-mode #taskModalBackdrop.open .subtask-urgent-btn,
body.touch-selection-mode #taskModalBackdrop.open .subtask-delete,
body.touch-selection-mode #taskModalBackdrop.open .add-subnote-btn,
body.touch-selection-mode #taskModalBackdrop.open .remove-subnote-btn {
  display:none !important;
  pointer-events:none !important;
}

body.touch-selection-mode .topbar-selection-actions {
  display:none;
}

/*
  Touch Selection Mode already owns the primary action surface at the bottom.
  Remove the normal sticky app header so selection does not trap a quarter of
  a phone viewport between two persistent toolbars. Board tabs stay available
  and move to the top edge until the normal header returns.
*/
body.touch-selection-mode .topbar {
  display:none;
}

body.touch-selection-mode .board-tabs-shell {
  top:0;
}

body.touch-selection-mode .card {
  min-height:58px;
}

body.touch-selection-mode .card-actions {
  top:9px;
  right:60px;
  opacity:1;
}

body.touch-selection-mode .card-actions .open-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:auto;
  min-width:72px;
  height:38px;
  min-height:38px;
  padding:0 10px;
  border-color:color-mix(in srgb, var(--c-queue) 34%, var(--line));
  background:color-mix(in srgb, var(--c-queue) 9%, var(--surface));
  color:color-mix(in srgb, var(--c-queue) 82%, var(--ink));
  font-weight:750;
}

body.touch-selection-mode .card-actions .selection-open-label {
  display:inline;
  font-family:var(--font-ui);
  font-size:11px;
  line-height:1;
}

body.touch-selection-mode .card-title {
  padding-right:142px;
}

body.touch-selection-mode main {
  padding-bottom:170px;
}

body.touch-selection-mode #taskModalBackdrop .modal {
  padding-bottom:170px;
}

body.touch-selection-mode .mobile-selection-tray:not([hidden]) {
  position:fixed;
  left:max(8px, env(safe-area-inset-left));
  right:max(8px, env(safe-area-inset-right));
  bottom:max(8px, env(safe-area-inset-bottom));
  z-index:1120;
  display:grid;
  gap:7px;
  padding:8px;
  border:1px solid color-mix(in srgb, var(--c-queue) 38%, var(--line-2));
  border-radius:16px;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow:0 14px 40px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--c-queue) 10%, transparent);
  backdrop-filter:blur(15px) saturate(1.2);
  -webkit-backdrop-filter:blur(15px) saturate(1.2);
}

.mobile-selection-tray.is-suspended {
  display:none !important;
}

.mobile-selection-summary {
  min-height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  color:var(--ink-2);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  letter-spacing:.025em;
}

.mobile-selection-actions {
  display:flex;
  gap:6px;
}

.mobile-selection-actions + .mobile-selection-actions {
  margin-top:1px;
}

.mobile-selection-actions-primary button {
  flex-basis:25%;
}

.mobile-selection-actions-secondary button {
  flex-basis:33.333%;
}

.mobile-selection-actions button {
  flex:1 1 0;
  min-width:0;
  min-height:48px;
  padding:6px 3px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  border-radius:11px;
  font-size:10px;
  font-weight:700;
  line-height:1;
}

.mobile-selection-actions button svg {
  width:18px;
  height:18px;
}

.mobile-selection-actions button[hidden] {
  display:none;
}

.mobile-selection-actions button:disabled {
  opacity:.4;
  cursor:default;
  transform:none;
}

.mobile-selection-more-menu:not([hidden]) {
  position:absolute;
  right:8px;
  bottom:calc(100% + 8px);
  width:min(260px, calc(100vw - 32px));
  z-index:1121;
  display:grid;
  gap:5px;
  padding:7px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}

.mobile-selection-more-menu button {
  width:100%;
  min-height:44px;
  justify-content:flex-start;
  gap:8px;
  padding:9px 11px;
}

.mobile-selection-delete {
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 34%, var(--line));
  background:var(--danger-soft);
}