/* ═══════════════════════════════════════════════════════════
   Stickup — design system
   Concept: scruffy always-on sticky note → clean structured tasks.
   Warm honey accent (the note) on cool ink (the structure). Both themes.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}

:root {
  --font: "Geist", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", "SF Mono", monospace;

  /* Signature accent — sticky-note honey */
  --accent: #f2b03d;
  --accent-strong: #e49b21;
  --accent-soft: rgba(242, 176, 61, .14);
  --on-accent: #1b1405;

  /* Semantic state (separate from accent) */
  --ok: #37d399;
  --info: #5ab8ff;      /* in progress */
  --idle: #8b95a3;      /* to do */
  --danger: #fb7185;

  --r-xs: 7px; --r-sm: 10px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px; --s7: 56px;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 19px; --fs-xl: 26px; --fs-2xl: 40px;
  --maxw: 1180px;
}

/* Dark (default) — cool ink ground */
:root, :root[data-theme="dark"] {
  --bg: #0f1115;
  --bg-2: #12151a;
  --surface: #171a20;
  --surface-2: #1e222a;
  --border: #272c35;
  --border-soft: #20242c;
  --text: #eceef2;
  --text-dim: #98a1ad;
  --text-faint: #69727e;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .75);
  --glow: 0 0 0 1px var(--border), 0 20px 50px -28px rgba(0, 0, 0, .8);
  --note-bg: #f4c657; --note-ink: #3a2c07;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f6f2; --bg-2: #f2f0ea; --surface: #ffffff; --surface-2: #f6f5f1;
    --border: #e6e3db; --border-soft: #efede7; --text: #1a1915; --text-dim: #5f5a4f;
    --text-faint: #948d7d; --shadow: 0 18px 40px -26px rgba(40, 34, 20, .28);
    --glow: 0 0 0 1px var(--border), 0 22px 48px -30px rgba(40, 34, 20, .3);
    --accent-strong: #b6771a; --on-accent: #241a04;
    --note-bg: #ffd868; --note-ink: #4a3708;
  }
}
:root[data-theme="light"] {
  --bg: #f7f6f2; --bg-2: #f2f0ea; --surface: #ffffff; --surface-2: #f6f5f1;
  --border: #e6e3db; --border-soft: #efede7; --text: #1a1915; --text-dim: #5f5a4f;
  --text-faint: #948d7d; --shadow: 0 18px 40px -26px rgba(40, 34, 20, .28);
  --glow: 0 0 0 1px var(--border), 0 22px 48px -30px rgba(40, 34, 20, .3);
  --accent-strong: #b6771a; --on-accent: #241a04;
  --note-bg: #ffd868; --note-ink: #4a3708;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.55;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -0.02em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── App bar ─────────────────────────────────────────────── */
.appbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap; row-gap: var(--s2);
}
.appbar .brand { white-space: nowrap; }
.tabs a { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 680; letter-spacing: -0.03em; }
.brand .dot {
  width: 12px; height: 12px; border-radius: 4px; transform: rotate(-8deg);
  background: linear-gradient(150deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 10px var(--accent-soft);
}
.spacer, .appbar .spacer { flex: 1; }

.tabs { display: flex; gap: 2px; margin-left: var(--s3); }
.tabs a {
  padding: 7px 13px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 550;
  color: var(--text-dim);
}
.tabs a:hover { background: var(--surface-2); color: var(--text); }
.tabs a.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }

.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 560; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); white-space: nowrap;
}
.chip .led { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.chip.ok .led { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.chip.err .led { background: var(--danger); box-shadow: 0 0 9px var(--danger); }
.badge-stub {
  padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  color: var(--on-accent); background: var(--accent);
}

/* ── Buttons / inputs ────────────────────────────────────── */
.btn {
  font: inherit; font-size: var(--fs-sm); font-weight: 560; cursor: pointer; white-space: nowrap;
  padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); transition: .16s ease;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color: transparent; color: var(--on-accent); font-weight: 640;
  box-shadow: 0 8px 20px -10px var(--accent);
}
.btn--primary:hover { filter: brightness(1.05); border-color: transparent; }
.btn--icon { padding: 8px 10px; line-height: 1; }
.btn.htmx-request { opacity: .55; pointer-events: none; }

select, input[type=text], input[type=password] {
  font: inherit; font-size: var(--fs-sm); padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); width: 100%;
}
select { cursor: pointer; padding: 5px 9px; width: auto; font-size: var(--fs-xs); color: var(--text-dim); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Layout / cards ──────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--s5); }
.page-narrow { max-width: 560px; margin: 0 auto; }
.layout { display: grid; grid-template-columns: 1fr 330px; gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); }
.card > .card-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; row-gap: var(--s2); }
.card > .card-head h2 { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.card > .card-head .sub { color: var(--text-faint); font-size: var(--fs-xs); }
.card > .card-body { padding: var(--s4); }
.side { display: flex; flex-direction: column; gap: var(--s5); }

.toolbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); flex-wrap: wrap; }
.section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); font-weight: 680; margin-bottom: var(--s2); }
.empty { color: var(--text-faint); font-size: var(--fs-sm); padding: var(--s5) 0; text-align: center; }

.today-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s5); }
@media (max-width: 760px) { .today-grid { grid-template-columns: 1fr; } }
.note-raw {
  font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.7; white-space: pre-wrap;
  background: var(--bg-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: var(--s4); color: var(--text-dim); min-height: 130px;
  max-height: 440px; overflow: auto;
}

/* ── Task rows ───────────────────────────────────────────── */
.task { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border-soft); }
.task:last-child { border-bottom: 0; }
.task .num {
  flex: none; width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint);
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.task .body { flex: 1; min-width: 0; }
.task .name { font-weight: 520; }
.task .comment { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-dim); border-left: 2px solid var(--info); padding-left: var(--s2); }
.task .meta { margin-top: 7px; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.task .meta a { font-size: var(--fs-xs); }
.task .synced { font-size: var(--fs-xs); color: var(--text-faint); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--complete { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.pill--in_progress { color: var(--info); background: color-mix(in srgb, var(--info) 15%, transparent); }
.pill--todo { color: var(--idle); background: color-mix(in srgb, var(--idle) 16%, transparent); }

.state { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; }
.state--new { color: var(--accent); background: var(--accent-soft); }
.state--changed { color: var(--info); background: color-mix(in srgb, var(--info) 15%, transparent); }
.state--synced { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }

.sync-ind { padding: var(--s2) var(--s4); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.sync-banner { margin: var(--s2) var(--s4) 0; padding: 6px 10px; border-radius: 8px; font-size: var(--fs-xs); }
.sync-banner--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.sync-banner--err { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
form.htmx-request .btn--primary { opacity: .55; cursor: wait; }

/* ── History rows ────────────────────────────────────────── */
.run, .logline { display: flex; gap: var(--s2); align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.run:last-child, .logline:last-child { border-bottom: 0; }
.run .when, .logline .when { color: var(--text-faint); font-size: var(--fs-xs); flex: none; font-family: var(--mono); }
.run .r-ok { color: var(--ok); font-weight: 700; } .run .r-err { color: var(--danger); font-weight: 700; }
.run .counts { color: var(--text-dim); margin-left: auto; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.run .synced { color: var(--text-faint); font-size: var(--fs-xs); }
.logline .lvl { font-size: 10px; font-weight: 800; text-transform: uppercase; flex: none; width: 34px; }
.logline .lvl.info { color: var(--accent); } .logline .lvl.warn { color: var(--info); } .logline .lvl.error { color: var(--danger); }
.logline .msg { color: var(--text-dim); word-break: break-word; }

.datenav { display: flex; gap: var(--s2); flex-wrap: wrap; }
.datenav a { padding: 5px 11px; border-radius: 999px; font-size: var(--fs-xs); border: 1px solid var(--border); color: var(--text-dim); font-family: var(--mono); }
.datenav a:hover { border-color: var(--accent); color: var(--text); }
.datenav a.active { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 650; }

/* ── Settings form ───────────────────────────────────────── */
.settings-form { display: flex; flex-direction: column; gap: var(--s4); }
.settings-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: 560; color: var(--text-dim); }
.settings-form .hint { font-size: var(--fs-xs); font-weight: 450; color: var(--text-faint); }
.conn { font-size: var(--fs-sm); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: var(--s4); }
.conn.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.conn.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* ═══ LOGIN ══════════════════════════════════════════════ */
.login-body { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; }
@media (max-width: 820px) { .login-body { grid-template-columns: 1fr; } .login-showcase { display: none; } }

/* left — capture → structure showcase */
.login-showcase {
  position: relative; padding: var(--s7); display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(160deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--border-soft); overflow: hidden;
}
.login-showcase::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 0);
  background-size: 26px 26px; mask-image: radial-gradient(120% 90% at 20% 20%, #000, transparent 75%);
}
.login-wordmark { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 680; letter-spacing: -0.03em; position: relative; z-index: 1; }
.login-wordmark .dot { width: 15px; height: 15px; border-radius: 5px; transform: rotate(-8deg); background: linear-gradient(150deg, var(--accent), var(--accent-strong)); box-shadow: 0 3px 14px var(--accent-soft); }

.showcase-stage { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s4); margin: var(--s5) 0; flex-wrap: wrap; }
.sticky {
  width: 234px; padding: 20px 20px 24px; border-radius: 4px 4px 4px 14px; transform: rotate(-3deg);
  background: linear-gradient(170deg, var(--note-bg), color-mix(in srgb, var(--note-bg) 82%, #000));
  color: var(--note-ink); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .55); font-family: var(--mono);
}
.sticky .s-head { font-weight: 700; font-size: 13px; margin-bottom: 12px; opacity: .85; }
.sticky .s-line { font-size: 12.5px; line-height: 1.9; display: flex; gap: 7px; }
.sticky .s-line .m { opacity: .6; }
.sticky .s-line.done { text-decoration: line-through; opacity: .62; }

.arrow { color: var(--accent); font-size: 26px; z-index: 1; }

.structured { display: flex; flex-direction: column; gap: 9px; min-width: 210px; }
.srow { display: flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; backdrop-filter: blur(4px); }
.srow .tick { width: 15px; height: 15px; border-radius: 5px; flex: none; display: grid; place-items: center; font-size: 9px; font-weight: 900; }
.srow .tick.ok { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.srow .tick.prog { background: color-mix(in srgb, var(--info) 20%, transparent); color: var(--info); }
.srow .tick.todo { background: color-mix(in srgb, var(--idle) 20%, transparent); color: var(--idle); }
.srow .r-name { flex: 1; color: var(--text); }
.srow .r-bot { font-size: 9px; }

.login-tag { position: relative; z-index: 1; max-width: 420px; }
.login-tag h1 { font-size: var(--fs-2xl); line-height: 1.05; font-weight: 640; }
.login-tag h1 .hl { color: var(--accent); }
.login-tag p { color: var(--text-dim); font-size: var(--fs-md); margin: var(--s3) 0 0; }

/* right — sign in */
.login-panel { display: grid; place-items: center; padding: var(--s6); }
.login-card { width: min(370px, 92vw); }
.login-card .lc-brand { display: none; }
@media (max-width: 820px) { .login-card .lc-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--s5); } .login-card .lc-brand .dot { width: 14px; height: 14px; border-radius: 5px; transform: rotate(-8deg); background: linear-gradient(150deg, var(--accent), var(--accent-strong)); } }
.login-card h2 { font-size: var(--fs-xl); font-weight: 640; }
.login-card .lc-sub { color: var(--text-faint); font-size: var(--fs-sm); margin: 6px 0 var(--s5); }
.login-card code { font-family: var(--mono); font-size: var(--fs-xs); background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
.login-card .btn--primary { width: 100%; justify-content: center; margin-top: var(--s2); padding: 11px; }
.login-foot { margin-top: var(--s5); font-size: var(--fs-xs); color: var(--text-faint); text-align: center; }

/* ── Searchable ClickUp pickers (combobox) ───────────────────── */
.combo { position: relative; }
.combo-search { width: 100%; }
.combo-clear {
  position: absolute; top: 7px; right: 8px; z-index: 3;
  font: inherit; font-size: var(--fs-xs); color: var(--text-faint);
  background: transparent; border: 0; cursor: pointer; padding: 2px 6px;
  border-radius: var(--r-xs);
}
.combo-clear:hover { color: var(--text); background: var(--bg-2); }
.combo-spin {
  position: absolute; top: 10px; right: 8px; z-index: 2;
  font-size: var(--fs-xs); color: var(--text-faint); pointer-events: none;
}
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.combo-opts {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.combo-opts:empty { display: none; }
.combo-opt {
  display: flex; align-items: baseline; gap: var(--s2); text-align: left;
  padding: 9px 11px; background: transparent; border: 0; cursor: pointer;
  color: var(--text); font: inherit; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-soft);
}
.combo-opt:last-child { border-bottom: 0; }
.combo-opt:hover { background: var(--accent-soft); }
.combo-opt-name { font-weight: 560; }
.combo-opt-path { color: var(--text-faint); font-size: var(--fs-xs); }
.combo-msg { padding: 9px 11px; font-size: var(--fs-xs); color: var(--text-faint); }
.combo-msg.err { color: var(--danger); }

/* ── Editable task (inline) ──────────────────────────────────── */
.btn--mini { padding: 5px 12px; font-size: var(--fs-xs); }
.task-edit { display: inline-block; }
.task-edit > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: var(--fs-xs); color: var(--text-dim);
  padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
}
.task-edit > summary::-webkit-details-marker { display: none; }
.task-edit > summary:hover { color: var(--text); border-color: var(--accent); }
.task-edit[open] > summary { color: var(--text); border-color: var(--accent); }
.edit-form {
  display: grid; grid-template-columns: 1fr 10em; gap: var(--s3);
  margin-top: var(--s3); padding: var(--s3); width: min(560px, 100%);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.edit-form label { display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-xs); font-weight: 560; color: var(--text-dim); }
.edit-form label:first-of-type { grid-column: 1 / -1; }   /* name spans full width */
.edit-actions {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3);
  justify-content: space-between;
}
.edit-actions .hint { font-size: 11px; color: var(--text-faint); flex: 1; }

/* ── Auto-sync card ──────────────────────────────────────────── */
.autosync-row { display: flex; align-items: center; gap: var(--s4); justify-content: space-between; }
.switch { flex-direction: row !important; align-items: center; gap: var(--s3) !important;
  font-weight: 450 !important; color: var(--text) !important; cursor: pointer; }
.switch input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.every { flex-direction: row !important; align-items: center; gap: 6px !important;
  white-space: nowrap; color: var(--text-dim) !important; }
.every input[type=number] {
  width: 5em; font: inherit; font-size: var(--fs-sm); padding: 6px 8px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* auto-sync mode (interval vs specific times) */
.asx { display: flex; align-items: center; gap: var(--s4); justify-content: space-between; flex-wrap: wrap; }
.asx-when { display: flex; align-items: center; gap: var(--s3); }
.asx-when select { }
.asx[data-mode="interval"] .when-daily { display: none; }
.asx[data-mode="daily"] .when-interval { display: none; }
.asx-when input[type=text] {
  font: inherit; font-size: var(--fs-sm); padding: 6px 8px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* range-pull control */
.range-pull { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.range-pull input[type=date] {
  font: inherit; font-size: var(--fs-xs); padding: 5px 8px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* ── Routing page ────────────────────────────────────────────── */
.chips-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.wl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 11px; font-size: var(--fs-sm);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.wl-chip small { color: var(--text-faint); font-size: var(--fs-xs); }
.wl-x { border: 0; background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.wl-x:hover { color: var(--danger); background: var(--bg-2); }
.add-row { display: flex; align-items: flex-start; gap: var(--s3); margin-top: var(--s3); }
.rules-wrap { overflow-x: auto; }
table.rules { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.rules th { text-align: left; font-weight: 560; color: var(--text-faint);
  font-size: var(--fs-xs); padding: 6px 10px; border-bottom: 1px solid var(--border); }
table.rules td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.rules code { background: var(--surface-2); padding: 2px 7px; border-radius: var(--r-xs); }
.rule-off { opacity: .45; }
.rule-actions { white-space: nowrap; text-align: right; }
.rule-actions form { margin-left: 4px; }
.add-rule {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-soft);
}
.add-rule label { display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-xs); font-weight: 560; color: var(--text-dim); }
.add-rule > label:nth-child(1) { flex: 1 1 130px; }
.add-rule > label:nth-child(4) { flex: 1 1 200px; }   /* parent combo */
.route-dim { color: var(--text-faint); }
.route-result {
  margin-top: var(--s3); padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.route-result--rule { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.route-arrow { color: var(--accent); font-weight: 700; }
.route-src { color: var(--text-faint); font-size: var(--fs-xs);
  margin-left: auto; padding: 2px 8px; background: var(--bg-2); border-radius: var(--r-xs); }

/* route badge on a task row */
.route-badge {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.route-badge em { font-style: normal; color: var(--text-faint); font-size: 11px; margin-left: 4px; }
.route-badge--rule { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.route-badge--manual { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.route-badge--none { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }

.est-badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }

/* ── AI suggestions panel ────────────────────────────────────── */
.ai-panel { margin-top: var(--s3); border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.ai-panel-head { padding: 8px 12px; font-size: var(--fs-sm); font-weight: 560;
  border-bottom: 1px solid var(--border-soft); }
.ai-sug { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.ai-sug:last-child { border-bottom: 0; }
.ai-sug-num { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ai-reason { flex: 1; min-width: 120px; font-size: var(--fs-xs); }
.ai-apply { display: flex; gap: 6px; margin: 0; }

/* date tab with remove ✕ — hidden until you hover the tab, muted (not stark) */
.datetab { display: inline-flex; align-items: center; gap: 1px; }
.datetab-x { border: 0; background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; border-radius: var(--r-xs);
  opacity: 0; transition: opacity .12s, color .12s; }
.datetab:hover .datetab-x { opacity: .55; }
.datetab-x:hover { opacity: 1; color: var(--danger); }

/* daily totals */
.totals { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; }
.totals b { color: var(--text); font-weight: 600; }

/* backfill range calendar */
.cal-wrap { position: relative; }
.cal-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: var(--s3); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.cal-head #cal-title { font-size: var(--fs-sm); font-weight: 600; }
.cal-nav { border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: var(--r-xs); cursor: pointer; width: 26px; height: 26px; line-height: 1; }
.cal-nav:hover { border-color: var(--accent); }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow span { text-align: center; font-size: 10px; color: var(--text-faint); padding: 2px 0; }
.cal-d, .cal-x { aspect-ratio: 1; border: 0; background: transparent; border-radius: var(--r-xs);
  font: inherit; font-size: var(--fs-xs); color: var(--text); cursor: pointer; }
.cal-d:hover { background: var(--accent-soft); }
.cal-in { background: var(--accent-soft); }
.cal-sel { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cal-x { cursor: default; }
.cal-foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--border-soft); }
.cal-range { flex: 1; font-size: 11px; color: var(--text-dim); }