/* ============================================================
   CLAIREFIN TASKS — DESIGN SYSTEM 2026
   Cinzel · Lato · Warm Ivory · Restrained Gold
   ============================================================ */

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Surfaces */
  --page:        #F4F1EB;       /* warm page bg        */
  --canvas:      #FDFCF9;       /* main card surface   */
  --panel:       #FFFFFF;       /* raised panel        */
  --inset:       #F0EDE6;       /* recessed / nested   */
  --inset-mid:   #EAE6DE;       /* deeper inset        */

  /* Brand */
  --gold:        #C4A45A;
  --gold-dk:     #9E7F35;
  --gold-lt:     #D4B978;
  --gold-ghost:  rgba(196,164,90,.11);
  --gold-ring:   rgba(196,164,90,.22);
  --gold-sep:    rgba(196,164,90,.18);

  /* Text */
  --ink:         #1E1C18;
  --ink-mid:     #4A4640;
  --ink-soft:    #7A746A;
  --ink-faint:   #B0A898;

  /* State */
  --danger:      #A33424;
  --danger-bg:   rgba(163,52,36,.07);

  /* Shadows */
  --sh-page:   0 2px 20px rgba(30,28,24,.06), 0 1px 4px rgba(30,28,24,.04);
  --sh-card:   0 1px 8px rgba(30,28,24,.05), 0 1px 2px rgba(30,28,24,.04);
  --sh-float:  0 8px 32px rgba(30,28,24,.10), 0 2px 8px rgba(30,28,24,.06);

  /* Radii */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-full: 999px;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { text-decoration: none; color: inherit; }
textarea { resize: vertical; }

/* ── PAGE SHELL ─────────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  padding: 24px 20px 72px;
}

.container {
  max-width: 1340px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════════════════ */
.hero {
  background: var(--canvas);
  border: 1px solid var(--gold-sep);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-page);
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--gold-sep);
}

.hero-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--gold-ring);
  background: linear-gradient(145deg, #fff 0%, var(--inset) 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--gold);
  box-shadow: var(--sh-card);
}

.hero-icon svg { display: block; }



.hero h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 3px;
}

.hero-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

/* ── STATS ROW ──────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.stat-pill {
  padding: 16px 20px;
  border-right: 1px solid var(--gold-sep);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-pill:last-child { border-right: none; }

.stat-pill .label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
}

.stat-pill .value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-family: 'Cinzel', Georgia, serif;
}

/* ══════════════════════════════════════════════════════════
   MAIN TWO-COLUMN GRID
══════════════════════════════════════════════════════════ */
.main-grid {
  display: grid;
  gap: 20px;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--canvas);
  border: 1px solid var(--gold-sep);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-page);
  height: max-content;
  overflow: hidden;
}

.section-header {
  padding: 20px 22px 16px;
}

.section-header h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.project-create {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
}

.project-create input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}

.project-create input::placeholder { color: var(--ink-faint); }

.project-create input:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-ghost);
}

.project-create .icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}

.project-create .icon-btn:hover {
  background: var(--panel);
  border-color: var(--gold);
  color: var(--gold);
}

.project-sep {
  height: 1px;
  background: var(--gold-sep);
  margin: 0 14px 10px;
}

.project-list {
  display: flex;
  flex-direction: column;
  padding: 2px 10px 14px;
}

.project-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.project-btn {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-mid);
  transition: background .15s, border-color .15s, color .15s;
}

.project-btn:hover {
  background: var(--inset);
  color: var(--ink);
}

.project-btn.active {
  background: var(--gold-ghost);
  border-color: var(--gold-ring);
  color: var(--ink);
  font-weight: 700;
}

.project-btn.active .project-count { color: var(--gold-dk); }

.project-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--inset-mid);
  padding: 1px 7px;
  border-radius: var(--r-full);
  min-width: 20px;
  text-align: center;
}

.project-delete {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--ink-faint);
  transition: color .15s, background .15s;
}

.project-delete:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT CARD
══════════════════════════════════════════════════════════ */
.content-card {
  background: var(--canvas);
  border: 1px solid var(--gold-sep);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-page);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ══════════════════════════════════════════════════════════
   ADD TASK COMPOSER
══════════════════════════════════════════════════════════ */
.add-task {
  padding: 22px 24px 0;
  border-bottom: 1px solid var(--gold-sep);
  padding-bottom: 22px;
}

.composer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.composer-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--gold-ghost);
  border: 1px solid var(--gold-ring);
  display: grid;
  place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}

.label-strong {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-mid);
}

.label-muted {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* ── COMPOSER TASK ROW ──────────────────────────────────── */
.composer-main {
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color .2s;
}

.composer-main:focus-within {
  border-color: var(--gold-lt);
  box-shadow: 0 0 0 3px var(--gold-ghost), var(--sh-card);
}

.composer-title-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--inset);
  padding: 0 4px 0 16px;
}

.composer-title-row #taskInput {
  flex: 1;
  height: 52px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
}

.composer-title-row #taskInput::placeholder {
  color: var(--ink-faint);
  font-weight: 400;
}

.composer-title-row #taskInput:focus { outline: none; }

.composer-actions-row {
  display: flex;
  gap: 1px;
  padding: 8px 10px;
  background: var(--inset);
}

/* Selects inside the composer actions row */
.composer-actions-row select {
  height: 34px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-mid);
  cursor: pointer;
  transition: border-color .2s;
  min-width: 0;
  flex-shrink: 0;
}

.composer-actions-row select:focus {
  outline: none;
  border-color: var(--gold);
}

.c-select-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

/* ── DATE ROW ───────────────────────────────────────────── */
.composer-date-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.date-group {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

.date-group-label {
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--inset);
  height: 36px;
  display: flex;
  align-items: center;
  border-right: 1px solid #DDD8CE;
  white-space: nowrap;
}

.date-group input {
  height: 36px;
  border: none;
  background: transparent;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--ink-mid);
}

.date-group input:focus { outline: none; }

.date-group input + input {
  border-left: 1px solid var(--inset);
}

/* ── COMPOSER BOTTOM ROW ────────────────────────────────── */
.composer-bottom-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.composer-field-wrap {
  flex: 1;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: border-color .2s;
}

.composer-field-wrap:focus-within {
  border-color: var(--gold);
}

.composer-field-wrap input,
.composer-field-wrap textarea {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  resize: none;
}

.composer-field-wrap input::placeholder,
.composer-field-wrap textarea::placeholder { color: var(--ink-faint); }

.composer-field-wrap input:focus,
.composer-field-wrap textarea:focus { outline: none; }

.composer-field-wrap textarea {
  min-height: 70px;
}

/* ── COMPOSER FOOTER ────────────────────────────────────── */
.add-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* ── INPUTS GLOBAL (edit panels etc.) ───────────────────── */
.form-grid input,
.form-grid select,
.search-wrap input,
.subtask-add input,
.edit-grid input,
.edit-grid select,
.edit-panel textarea,
.edit-panel input[type="text"],
.add-task textarea {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 13px;
  transition: border-color .2s, box-shadow .2s;
}

.form-grid input:focus,
.form-grid select:focus,
.search-wrap input:focus,
.subtask-add input:focus,
.edit-grid input:focus,
.edit-grid select:focus,
.edit-panel textarea:focus,
.edit-panel input[type="text"]:focus,
.add-task textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-ghost);
}

.form-grid { display: grid; gap: 10px; }
.form-grid-top    { grid-template-columns: 1fr; }
.form-grid-mid    { grid-template-columns: 1fr; margin-top: 10px; }
.form-grid-bottom { grid-template-columns: 1fr; margin-top: 10px; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 22px;
  background: var(--gold);
  border: 1px solid var(--gold-dk);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
}

.primary-btn:hover {
  background: var(--gold-dk);
  border-color: var(--gold-dk);
  box-shadow: 0 4px 14px rgba(196,164,90,.28);
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-sm);
  color: var(--ink-mid);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .2s, color .2s;
}

.ghost-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
}

.subtask-add-btn,
.subtask-add button {
  height: 38px;
  padding: 0 14px;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mid);
  flex-shrink: 0;
  transition: border-color .2s, color .2s;
}

.subtask-add-btn:hover,
.subtask-add button:hover {
  border-color: var(--gold);
  color: var(--gold-dk);
}

.save-edit-btn {
  background: var(--gold);
  border: 1px solid var(--gold-dk);
  color: #fff;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  transition: background .2s;
}

.save-edit-btn:hover { background: var(--gold-dk); }

.cancel-edit-btn {
  height: 36px;
  padding: 0 16px;
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  transition: background .15s, color .15s;
}

.cancel-edit-btn:hover {
  background: var(--inset-mid);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════
   TOOLBAR / SEARCH / FILTERS
══════════════════════════════════════════════════════════ */
.toolbar {
  padding: 18px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-wrap {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.search-wrap input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 13.5px;
  box-shadow: var(--sh-card);
  transition: border-color .2s, box-shadow .2s;
}

.search-wrap input::placeholder { color: var(--ink-faint); }

.search-wrap input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-ghost), var(--sh-card);
}

.toolbar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-group,
.view-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-chip,
.view-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: background .15s, border-color .15s, color .15s;
}

.filter-chip:hover,
.view-chip:hover {
  background: var(--panel);
  border-color: var(--gold-ring);
  color: var(--ink);
}

.filter-chip.active,
.view-chip.active {
  background: var(--gold-ghost);
  border-color: var(--gold-ring);
  color: var(--gold-dk);
  font-weight: 700;
}

.sort-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px 0 12px;
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--ink-soft);
  font-size: 12.5px;
  transition: border-color .15s;
}

.sort-wrap:has(select:focus) {
  border-color: var(--gold-ring);
}

.sort-wrap select {
  border: none;
  background: transparent;
  padding: 0;
  height: auto;
  width: auto;
  color: var(--ink-soft);
  font-size: 12.5px;
  cursor: pointer;
}

.sort-wrap select:focus { outline: none; }

/* ══════════════════════════════════════════════════════════
   PROGRESS + BULK ACTIONS
══════════════════════════════════════════════════════════ */
.progress-wrap {
  padding: 14px 24px 0;
}

.progress-bar {
  height: 2px;
  background: var(--inset-mid);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-bar > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 100%);
  transition: width .5s var(--ease);
  border-radius: var(--r-full);
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 24px 0;
}

.bulk-actions button {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: background .15s, border-color .15s, color .15s;
}

.bulk-actions button:hover {
  background: var(--panel);
  border-color: var(--gold-ring);
  color: var(--ink);
}

.bulk-actions .ghost {
  background: transparent;
  color: var(--ink-faint);
}

.bulk-actions .ghost:hover {
  background: var(--danger-bg);
  border-color: transparent;
  color: var(--danger);
}

/* ══════════════════════════════════════════════════════════
   TASK LIST
══════════════════════════════════════════════════════════ */
#mainView {
  padding: 16px 24px 24px;
}

/* ── TASK CARD ───────────────────────────────────────────── */
.todo-card {
  background: var(--panel);
  border: 1px solid #E6E0D6;
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(30,28,24,.04);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
  overflow: hidden;
}

.todo-card:last-child { margin-bottom: 0; }

.todo-card:hover {
  border-color: var(--gold-ring);
  box-shadow: 0 4px 18px rgba(196,164,90,.10), 0 1px 4px rgba(30,28,24,.06);
  transform: translateY(-1px);
}

.todo-main {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* ── CHECKBOX STRIPE ─────────────────────────────────────── */
.todo-check-wrap {
  display: flex;
  align-items: flex-start;
  padding: 18px 4px 18px 18px;
  flex-shrink: 0;
}

.todo-check {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── CARD BODY ───────────────────────────────────────────── */
.todo-body {
  flex: 1;
  min-width: 0;
  padding: 17px 0 17px 12px;
}

.todo-text {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  word-break: break-word;
  line-height: 1.45;
}

.todo-text.done {
  text-decoration: line-through;
  color: var(--ink-faint);
}

/* ── TASK BODY SECTIONS ──────────────────────────────────── */

/* ── DATE & METADATA ROW (UNIFIED) ───────────────────────── */
.todo-dates {
  margin-top: 10px;
}

.card-unified-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.card-date-cluster {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin-right: 4px;
}

.date-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
}

.date-value {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-mid);
}

.date-sep {
  font-size: 10px;
  color: var(--ink-faint);
  margin: 0 2px;
}

/* ── STATUS CHIPS ── */
.todo-status {
  display: none;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Default chip */
.status-chip {
  background: var(--inset);
  border-color: #E0D9CE;
  color: var(--ink-soft);
}

/* Status variants */
.status-ontme  { background: #EEF6EE; border-color: #B6D9B6; color: #2E7A2E; }
.status-overdue{ background: #FDF0EE; border-color: rgba(163,52,36,.3); color: var(--danger); }
.status-done   { background: var(--inset-mid); border-color: #D8D2C8; color: var(--ink-faint); }

/* Priority variants */
.badge-pri-high { background: #FEF6E8; border-color: rgba(196,164,90,.5); color: var(--gold-dk); }
.badge-pri-med  { background: #FDFCF4; border-color: rgba(196,164,90,.28); color: var(--gold); }
.badge-pri-low  { background: var(--inset); border-color: #E0D9CE; color: var(--ink-faint); }

/* Other variants */
.badge-recur   { background: #EEF3FB; border-color: #C0CFE8; color: #3355A0; }
.badge-starred { background: #FFFBE8; border-color: rgba(196,164,90,.5); color: var(--gold-dk); }
.badge-proj    { background: var(--inset); border-color: #E0D9CE; color: var(--ink-soft); }
.badge-subtask { background: var(--inset); border-color: #E0D9CE; color: var(--ink-soft); }

/* ── NOTES ────────────────────────────────────────────────── */
.todo-notes-row {
  margin-top: 8px;
  white-space: pre-wrap;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.4;
  padding: 6px 10px;
  background: var(--inset);
  border-left: 1px solid var(--gold-sep);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* ── TAGS ─────────────────────────────────────────────────── */
.todo-tags-row {
  display: none;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  background: var(--gold-ghost);
  border: 1px solid var(--gold-ring);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-dk);
  letter-spacing: .02em;
}

/* Legacy compat — keep selectable but invisible */
.meta-row, .tag-row, .notes-row { display: none !important; }

/* ── CARD ACTIONS ────────────────────────────────────────── */
.todo-actions {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 12px 12px 0;
  flex-shrink: 0;
}

.todo-actions button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink-faint);
  transition: color .15s, background .15s;
}

.todo-actions button:hover {
  color: var(--ink-mid);
  background: var(--inset);
}

.star-btn.active {
  color: var(--gold);
}

.star-btn.active svg {
  fill: rgba(196,164,90,.2);
}

.todo-actions .delete-btn:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

.icon-expand {
  transition: transform .25s var(--ease);
}

.expand-btn.expanded .icon-expand {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════
   SUBTASK PANEL
══════════════════════════════════════════════════════════ */
.subtask-panel {
  background: var(--inset);
  border-top: 1px solid #E6E0D6;
  padding: 16px 18px;
}

.subtask-panel.hidden,
.edit-panel.hidden { display: none; }

.subtask-add {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.subtask-add input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid #DDD8CE;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
  transition: border-color .2s;
}

.subtask-add input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-ghost);
}

.subtask-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.subtask-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid #E6E0D6;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  transition: border-color .15s;
}

.subtask-row:hover { border-color: var(--gold-ring); }

.subtask-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
}

.subtask-text.done {
  text-decoration: line-through;
  color: var(--ink-faint);
}

.subtask-delete {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--ink-faint);
  transition: color .15s, background .15s;
}

.subtask-delete:hover {
  color: var(--danger);
  background: var(--danger-bg);
}

/* ══════════════════════════════════════════════════════════
   EDIT PANEL
══════════════════════════════════════════════════════════ */
.edit-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--inset);
  border-top: 1px solid #E6E0D6;
}

.edit-panel input[type="text"] {
  font-size: 14px;
  font-weight: 500;
  height: 40px;
}

.edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════ */
.empty-state {
  padding: 64px 32px;
  text-align: center;
}

.empty-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--inset);
  border: 1px solid var(--gold-sep);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: var(--ink-faint);
}

.empty-state h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink-mid);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 320px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   CALENDAR VIEW
══════════════════════════════════════════════════════════ */
.calendar-top,
.day-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 1px solid #E6E0D6;
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--sh-card);
}

.nav-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-actions button {
  height: 32px;
  padding: 0 13px;
  background: var(--inset);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: border-color .15s, color .15s;
}

.nav-actions button:hover {
  border-color: var(--gold-ring);
  color: var(--gold-dk);
}

.calendar-grid-wrap {
  overflow: hidden;
  border: 1px solid #E6E0D6;
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--sh-card);
}

.calendar-weekdays,
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.calendar-weekdays {
  background: var(--inset);
  border-bottom: 1px solid #E6E0D6;
}

.calendar-weekdays div {
  padding: 10px 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

.calendar-cell {
  min-height: 120px;
  border-right: 1px solid #EDE8E0;
  border-bottom: 1px solid #EDE8E0;
  padding: 8px;
  background: var(--panel);
}

.calendar-cell.muted { background: var(--inset); }

.calendar-cell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.calendar-day-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--ink-soft);
}

.calendar-day-num.today {
  background: var(--gold);
  color: #fff;
  font-weight: 700;
}

.calendar-count {
  font-size: 10px;
  color: var(--gold-dk);
  background: var(--gold-ghost);
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-weight: 700;
}

.calendar-task {
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid #EDE8E0;
  background: var(--inset);
  border-radius: var(--r-xs);
  padding: 4px 7px;
  font-size: 11px;
  color: var(--ink);
  margin-bottom: 3px;
  transition: border-color .15s;
  line-height: 1.4;
}

.calendar-task:hover { border-color: var(--gold); }
.calendar-task.done { background: var(--inset-mid); color: var(--ink-faint); text-decoration: line-through; }

.calendar-task .mini {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}

.mini-badge {
  font-size: 9.5px;
  padding: 1px 5px;
  background: var(--inset-mid);
  border-radius: var(--r-xs);
  color: var(--ink-soft);
}

/* ══════════════════════════════════════════════════════════
   DAY VIEW
══════════════════════════════════════════════════════════ */
.day-layout { display: grid; gap: 16px; }

.day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-card,
.summary-card {
  background: var(--panel);
  border: 1px solid #E6E0D6;
  border-radius: var(--r-lg);
  padding: 16px 20px;
  box-shadow: var(--sh-card);
}

.summary-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-card .summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}

.summary-card .summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  font-family: 'Cinzel', Georgia, serif;
}

/* ══════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .app-shell { padding: 36px 36px 80px; }

  .hero-inner { flex-direction: row; }

  .hero-top { flex: 1; border-bottom: none; border-right: 1px solid var(--gold-sep); }

  .stats-grid {
    grid-template-columns: repeat(6, 1fr);
    flex-shrink: 0;
    min-width: 500px;
  }

  .stats-grid .stat-pill { border-bottom: none; border-right: 1px solid var(--gold-sep); }
  .stats-grid .stat-pill:last-child { border-right: none; }

  .main-grid { grid-template-columns: 272px 1fr; }

  .form-grid-top    { grid-template-columns: 1fr; }
  .form-grid-mid    { grid-template-columns: repeat(2, 1fr); }
  .form-grid-bottom { grid-template-columns: 1fr 1.2fr; }

  .toolbar-controls {
    flex-direction: row;
    align-items: center;
  }

  .calendar-top,
  .day-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .day-layout { grid-template-columns: minmax(0,1fr) 280px; }
  .edit-grid  { grid-template-columns: repeat(5, 1fr); }

  .c-select-group { flex-wrap: nowrap; }
  .composer-date-row { flex-wrap: nowrap; }
  .composer-bottom-row { flex-wrap: nowrap; }
}

@media (max-width: 599px) {
  .app-shell { padding: 12px 10px 48px; }
  
  /* ── Header & Stats Mobile ── */
  .hero-inner { padding-top: 10px; }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* ── Main Layout Mobile ── */
  .main-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }
  .stat-pill {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gold-sep);
  }
  .stats-grid .stat-pill:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .stats-grid .stat-pill:nth-child(even),
  .stats-grid .stat-pill:last-child {
    border-right: none;
  }
  
  /* ── Add Task Forms Mobile ── */
  .add-task { padding: 16px 16px 0; padding-bottom: 16px; }
  
  .c-select-group select {
    flex: 1 1 100%;
    min-width: 100%;
    margin-bottom: 8px;
  }
  .c-select-group { margin-bottom: -8px; }
  
  .composer-date-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .date-group { display: flex; width: 100%; }
  .date-group input { flex: 1; min-width: 0; border-left: 1px solid var(--inset) !important; padding: 0 8px; font-size: 11.5px; }
  
  .composer-bottom-row { flex-direction: column; }
  .composer-field-wrap { width: 100%; min-width: 0; }
  
  /* ── Toolbar & Filters Mobile ── */
  .toolbar { padding: 14px 16px 0; }
  .toolbar-controls { flex-direction: column; align-items: stretch; gap: 14px; }
  
  .filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: -6px; /* hide scrollbar visually by offsetting */
    -webkit-overflow-scrolling: touch;
  }
  .filter-group::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; }
  
  .right-controls { width: 100%; justify-content: space-between; }
  .bulk-actions { justify-content: flex-start; padding: 12px 16px 0; }
  
  /* ── Task Card Mobile ── */
  #mainView { padding: 16px 12px 24px; }
  
  .todo-main {
    flex-wrap: wrap;
  }
  .todo-check-wrap {
    padding: 16px 8px 16px 14px;
  }
  .todo-body {
    flex: 1;
    min-width: 0;
    padding: 15px 14px 15px 0;
  }
  
  /* Move actions to a dedicated mobile bottom bar */
  .todo-actions {
    width: 100%;
    margin-top: 0;
    padding: 8px 12px;
    border-top: 1px solid #EAE3D6;
    background: #FDFCF8;
    justify-content: flex-end;
    gap: 8px;
    border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  }
  
  /* Touch sizing */
  .todo-actions button {
    height: 40px;
    width: 40px;
  }
  /* Center checkbox with smaller padding */
  .todo-check { width: 22px; height: 22px; margin-top: 0; }
  
  /* Edit panel Mobile */
  .edit-grid { grid-template-columns: 1fr; }
}