/* ═══════════════════════════════════════════════════════════════
   KARMA — Design System
   Light mode (default): dark sidebar + warm white content
   Dark mode: full dark with warm dark tones
   Font: Inter (UI) + Instrument Serif (logo)
   Accent: #f06a6a coral
   Icons: Lucide outline (nav) + filled (status)
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif&display=swap');

/* ── CSS Variables — Light Mode ─────────────────────────────── */
:root {
  /* Sidebar — Theme C: True dark, no blue/purple tint */
  --sb-bg:        #111110;
  --sb-border:    #1c1c1a;
  --sb-txt:       #a8a89e;
  --sb-txt-hover: #d8d8d0;
  --sb-txt-act:   #f5f5f2;
  --sb-hover:     #191918;
  --sb-active:    #1e1e1c;
  --sb-section:   #555550;
  --sb-width:     220px;

  /* Content */
  --bg:           #f7f6f1;
  --surface:      #fafaf8;
  --surface2:     #f2f1ec;
  --border:       #e4e2db;
  --border2:      #d4d1c8;

  /* Text */
  --txt:          #1a1a18;
  --txt2:         #3a3a36;
  --txt3:         #72726c;
  --txt4:         #a8a8a0;

  /* Accent — coral */
  --accent:       #f06a6a;
  --accent-h:     #e55555;
  --accent-soft:  rgba(240,106,106,.08);
  --accent-s2:    rgba(240,106,106,.15);

  /* Status */
  --green:        #00c853;
  --green-s:      rgba(0,200,83,.1);
  --amber:        #f59e0b;
  --amber-s:      rgba(245,158,11,.1);
  --red:          #ef4444;
  --red-s:        rgba(239,68,68,.08);
  --blue:         #3b82f6;
  --blue-s:       rgba(59,130,246,.1);

  /* Phase colours */
  --ph-initiate:    #3b82f6;
  --ph-procurement: #d97706;
  --ph-sbc:         #06b6d4;
  --ph-dbc:         #4f46e5;
  --ph-brd:         #8b5cf6;
  --ph-contract:    #f97316;
  --ph-design:      #ec4899;
  --ph-development: #14b8a6;
  --ph-qa:          #f59e0b;
  --ph-uat:         #10b981;
  --ph-go_live:     #22c55e;

  /* Shadows */
  --sh-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --sh-lg:  0 10px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --sh-xl:  0 20px 60px rgba(0,0,0,.15);

  /* Radius */
  --r4:  4px;
  --r6:  6px;
  --r8:  8px;
  --r10: 10px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;

  /* Topbar height */
  --topbar-h: 52px;

  /* Transition */
  --ease:   all .15s ease;
  --ease-s: all .2s ease;
}

/* ── Dark Mode Variables ─────────────────────────────────────── */
[data-theme="dark"] {
  --sb-bg:        #0e0e0d;
  --sb-border:    #1a1a18;
  --sb-txt:       #8a8a86;
  --sb-txt-hover: #c8c8c4;
  --sb-txt-act:   #f2f2ee;
  --sb-hover:     #141412;
  --sb-active:    #181816;
  --sb-section:   #4a4a48;

  --bg:           #1a1a18;
  --surface:      #242420;
  --surface2:     #2e2e2a;
  --border:       #2e2e2a;
  --border2:      #3a3a36;

  --txt:          #f2f2f7;
  --txt2:         #aeaeb2;
  --txt3:         #636366;
  --txt4:         #3a3a3c;

  --accent-soft:  rgba(240,106,106,.12);
  --accent-s2:    rgba(240,106,106,.2);

  --green-s:      rgba(0,200,83,.12);
  --amber-s:      rgba(245,158,11,.12);
  --red-s:        rgba(239,68,68,.12);
  --blue-s:       rgba(59,130,246,.12);

  --sh-sm:  0 1px 3px rgba(0,0,0,.3);
  --sh-md:  0 4px 12px rgba(0,0,0,.4);
  --sh-lg:  0 10px 32px rgba(0,0,0,.5);
  --sh-xl:  0 20px 60px rgba(0,0,0,.6);
}

/* ── Reset + Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
svg { display: block; flex-shrink: 0; }

/* ── App Layout ──────────────────────────────────────────────── */
.app-wrap {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sb-width);
  min-width: var(--sb-width);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 50;
  scrollbar-width: none;
  transition: transform .2s ease;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Logo */
.sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--sb-border);
  text-decoration: none;
  flex-shrink: 0;
}
.sb-logo-icon {
  width: 30px; height: 30px; flex-shrink: 0;
}
.sb-logo-text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.15rem;
  color: var(--sb-txt-act);
  letter-spacing: -.02em;
  line-height: 1;
}
.sb-logo-tagline {
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--sb-txt);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* Nav sections */
.sb-nav { padding: 8px 0; flex: 1; }
.sb-section-hdr {
  padding: 10px 16px 4px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sb-section);
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  font-size: .88rem;
  font-weight: 450;
  color: var(--sb-txt);
  text-decoration: none;
  transition: var(--ease);
  position: relative;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.sb-item svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.sb-item:hover {
  background: var(--sb-hover);
  color: var(--sb-txt-act);
}
.sb-item.active {
  background: var(--sb-active);
  color: var(--sb-txt-act);
  font-weight: 600;
}
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 2.5px;
  background: #e8a020;
  border-radius: 0 2px 2px 0;
}
.sb-badge {
  margin-left: auto;
  font-size: .64rem;
  font-weight: 700;
  background: rgba(232,160,32,.18);
  color: #e8a020;
  padding: 1px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.sb-pf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sb-footer {
  padding: 8px 0;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}

/* Mobile sidebar overlay */
.sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 49;
  backdrop-filter: blur(2px);
}
.sb-backdrop.open { display: block; }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
}
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r6);
  color: var(--txt3);
  transition: var(--ease);
}
.hamburger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.hamburger:hover { background: var(--surface2); }
.topbar-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -.02em;
}
.topbar-spacer { flex: 1; }

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border2);
  border-radius: 20px;
  background: none;
  cursor: pointer;
  font-size: .75rem;
  color: var(--txt3);
  font-family: inherit;
  transition: var(--ease);
  white-space: nowrap;
}
.theme-toggle svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Quick add */
.topbar-quick-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background: #0d9488;
  color: #fff;
  border: none;
  border-radius: var(--r8);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: var(--ease);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(13,148,136,.25);
}
.topbar-quick-add svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.5; }
.topbar-quick-add:hover { background: #0f766e; }

/* ── Main content ────────────────────────────────────────────── */
.main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
}
.page-content {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r8);
  font-size: .82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); }
.btn-primary svg { stroke: #fff; }
.btn-secondary {
  background: var(--surface);
  color: var(--txt2);
  border: 1px solid var(--border2);
}
.btn-secondary:hover { border-color: var(--border2); background: var(--surface2); }
.btn-ghost { background: none; color: var(--txt3); }
.btn-ghost:hover { background: var(--surface2); color: var(--txt); }
.btn-danger { background: var(--red-s); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: .76rem; }
.btn-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  border-radius: var(--r6); color: var(--txt3);
  transition: var(--ease);
}
.btn-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.btn-icon:hover { background: var(--surface2); color: var(--txt); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.form-input, .form-select, .form-textarea {
  padding: 8px 12px;
  border: 1.5px solid var(--border2);
  border-radius: var(--r8);
  background: var(--surface);
  color: var(--txt);
  font-size: .84rem;
  font-family: inherit;
  outline: none;
  transition: border .12s, box-shadow .12s;
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--txt4); }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.form-row { display: flex; gap: 12px; }
.form-row .form-field { flex: 1; min-width: 0; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-wrap {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-wrap.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--r12);
  width: 520px; max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sh-xl);
  animation: modalIn .15s ease both;
}
@keyframes modalIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-head {
  display: flex; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
}
.modal-title { font-size: 1rem; font-weight: 700; color: var(--txt); flex: 1; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r10);
  box-shadow: var(--sh-sm);
}
.card-pad { padding: 16px; }

/* ── Badges / Pills ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px;
  font-size: .71rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.b-ontrack  { background: rgba(0,200,83,.1);  color: #00a846; }
.b-atrisk   { background: rgba(245,158,11,.1);color: #c87f00; }
.b-completed{ background: rgba(148,163,184,.1);color: #64748b; }
.b-onhold   { background: rgba(139,92,246,.1); color: #7c3aed; }
.b-inprog   { background: rgba(59,130,246,.1); color: #2563eb; }

/* Priority badges */
.pb-high   { background: rgba(239,68,68,.08);   color: var(--red); }
.pb-medium { background: rgba(245,158,11,.08);  color: var(--amber); }
.pb-low    { background: rgba(100,116,139,.08); color: #64748b; }

/* ── Phase pills ─────────────────────────────────────────────── */
.phase-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r6);
  font-size: .72rem; font-weight: 700;
  white-space: nowrap;
}
.phase-pill svg { width: 9px; height: 9px; flex-shrink: 0; }
/* States */
.phase-done    { opacity: 1; }
.phase-active  { opacity: 1; }
.phase-pending { opacity: .35; }
.phase-na      { opacity: .25; text-decoration: line-through; filter: grayscale(1); }

/* Phase by type */
.ph-initiate    { background: rgba(59,130,246,.12);  color: var(--ph-initiate); }
.ph-procurement { background: rgba(217,119,6,.12);   color: var(--ph-procurement); }
.ph-sbc         { background: rgba(6,182,212,.12);   color: var(--ph-sbc); }
.ph-dbc         { background: rgba(79,70,229,.12);   color: var(--ph-dbc); }
.ph-brd         { background: rgba(139,92,246,.12);  color: var(--ph-brd); }
.ph-contract    { background: rgba(249,115,22,.12);  color: var(--ph-contract); }
.ph-design      { background: rgba(236,72,153,.12);  color: var(--ph-design); }
.ph-development { background: rgba(20,184,166,.12);  color: var(--ph-development); }
.ph-qa          { background: rgba(245,158,11,.12);  color: var(--ph-qa); }
.ph-uat         { background: rgba(16,185,129,.12);  color: var(--ph-uat); }
.ph-go_live     { background: rgba(34,197,94,.12);   color: var(--ph-go_live); }

/* ── Checkbox — Asana style ──────────────────────────────────── */
.k-chk {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #c8c8c0; /* always visible */
  background: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: var(--ease);
}
.k-chk:hover:not(.done) { border-color: var(--green) !important; background: var(--green-s); }
.k-chk.done { background: var(--green); border-color: var(--green) !important; }
.k-chk.done::after {
  content: '';
  display: block;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}

/* ── Task table — Asana exact ───────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl-row {
  height: 40px;
  border-bottom: 1px solid #e8e8e8;
  transition: background .08s;
  cursor: pointer;
  background: #fff;
}
[data-theme="dark"] .tbl-row { background:#1c1c1e; border-bottom:1px solid #2c2c2e; }
.tbl-row:hover { background: #f6f6f6; }
[data-theme="dark"] .tbl-row:hover { background: #2c2c2e; }
.tbl-row:hover .t-chk:not(.is-done) { border-color: #adadad !important; }
.t-chk:not(.is-done) { border-color: #d0d0d0; }
.tbl-row.tbl-row-done { opacity: .5; }
.tbl-row.tbl-row-done:hover { opacity: .82; }
.tbl td { padding: 0 8px; vertical-align: middle; }
.tbl th {
  padding: 8px 8px;
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  color: #9e9e9e; text-align: left;
  border-bottom: 2px solid #e8e8e8;
  white-space: nowrap; background: #fff;
}
[data-theme="dark"] .tbl th { color:#636366; border-bottom-color:#38383a; background:#1c1c1e; }
.tc-chk { width: 44px; text-align: center; padding: 0 !important; }
.tc-name { min-width: 280px; padding: 0 8px 0 0 !important; }
.tc-date { width: 110px; }
.tc-assignee { width: 140px; }
.tc-priority { width: 100px; }
.tc-status { width: 110px; }

/* Task title */
.tc-title, .tc-title-inp {
  font-size: .88rem; font-weight: 400;
  color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; padding: 3px 4px; border-radius: 4px;
  transition: background .1s; display: block;
}
[data-theme="dark"] .tc-title, [data-theme="dark"] .tc-title-inp { color: #f2f2f7; }
.tc-title:hover, .tc-title-inp:hover { background: rgba(0,0,0,.04); }
.tc-title.done, .tc-title-inp.done { text-decoration: line-through; color: #9e9e9e; }

/* ── Assignee cell — fixed size, never a big blob ────────────── */
.tc-assignee-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; cursor: pointer;
  border-radius: 4px; transition: background .1s;
  overflow: hidden;
}
.tc-assignee-cell:hover { background: rgba(0,0,0,.04); }
.tc-avatar {
  width: 22px; height: 22px; min-width: 22px; max-width: 22px;
  border-radius: 50%;
  background: #f06a6a; color: #fff;
  font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  line-height: 1;
}
.tc-assignee-name {
  font-size: .78rem; color: #555;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 90px;
}
[data-theme="dark"] .tc-assignee-name { color: #aeaeb2; }
.tc-ph-assignee {
  width: 22px; height: 22px; min-width: 22px; max-width: 22px;
  border-radius: 50%;
  border: 1.5px dashed #d0d0d0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #ccc; flex-shrink: 0;
}
.tc-ph-assignee svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Section header */
.sec-hdr-cell { padding: 0; }
.sec-hdr-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 8px;
  border-top: 2px solid #e8e8e8;
  cursor: pointer; transition: background .1s;
  background: #fff;
}
[data-theme="dark"] .sec-hdr-inner { border-top-color: #38383a; background: #1c1c1e; }
.sec-hdr-inner:hover { background: #f6f6f6; }
[data-theme="dark"] .sec-hdr-inner:hover { background: #2c2c2e; }
.sec-hdr-inner:hover .sec-actions { opacity: 1; }
.sec-arrow {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  border-radius: 4px; color: var(--txt4); padding: 0;
}
.sec-arrow svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform .2s; }
.sec-arrow.collapsed svg { transform: rotate(-90deg); }
.sec-name {
  font-size: .84rem; font-weight: 700; color: var(--txt);
}
.sec-count {
  font-size: .68rem; color: var(--txt4);
  background: var(--surface2); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 20px; flex-shrink: 0;
}
.sec-actions {
  display: flex; gap: 4px; margin-left: auto;
  opacity: 0; transition: opacity .15s;
}
.sec-action-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); cursor: pointer;
  color: var(--txt4); font-size: .75rem;
  transition: var(--ease); flex-shrink: 0;
}
.sec-action-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.sec-action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sec-action-btn.del:hover { border-color: var(--red); color: var(--red); background: var(--red-s); }
.sec-na-badge {
  font-size: .72rem; font-weight: 700;
  background: rgba(0,0,0,.06); color: var(--txt4);
  padding: 1px 7px; border-radius: 20px; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Add task row */
.add-task-cell { padding: 2px 8px; }
.add-task-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--txt4);
  background: none; border: none; cursor: pointer;
  padding: 7px 6px; font-family: inherit;
  transition: color .12s;
}
.add-task-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.add-task-btn:hover { color: var(--txt2); }

/* Inline add row */
.inline-add-row td { background: var(--surface2); }
.inline-add-inp {
  width: 100%; border: none; outline: none;
  font-size: 15px; font-family: inherit;
  color: var(--txt); background: transparent; padding: 4px 0;
}
.inline-add-inp::placeholder { color: var(--txt4); }

/* ── Briefing bar ────────────────────────────────────────────── */
.briefing-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r10);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--sh-sm); flex-wrap: wrap; margin-bottom: 16px;
}
.briefing-label {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--txt4); white-space: nowrap;
}
.briefing-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: filter .12s; white-space: nowrap;
}
.briefing-chip:hover { filter: brightness(.92); }
.bc-red   { background: rgba(239,68,68,.1);   color: var(--red); }
.bc-amber { background: rgba(245,158,11,.1);  color: var(--amber); }
.bc-blue  { background: rgba(59,130,246,.1);  color: var(--blue); }
.bc-green { background: rgba(0,200,83,.1);    color: var(--green); }

/* ── Attention strip ─────────────────────────────────────────── */
.attention-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r8);
  background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15);
  margin-bottom: 12px; flex-wrap: wrap;
}
.attn-item {
  display: flex; align-items: center; gap: 6px;
  font-size: .76rem; color: var(--red);
}
.attn-dismiss {
  margin-left: auto; width: 20px; height: 20px;
  border: none; background: none; cursor: pointer;
  color: var(--red); border-radius: 4px; opacity: .6;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}

/* ── Dashboard grid ──────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

/* Project pulse card */
.pulse-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r10); margin-bottom: 8px;
  box-shadow: var(--sh-sm); transition: var(--ease);
  cursor: pointer;
}
.pulse-card:hover { border-color: var(--border2); box-shadow: var(--sh-md); }
.rag-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.rag-green { background: var(--green); box-shadow: 0 0 6px rgba(0,200,83,.35); }
.rag-amber { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,.35); }
.rag-red   { background: var(--red);   box-shadow: 0 0 6px rgba(239,68,68,.35); }
.pulse-name { font-size: .82rem; font-weight: 600; color: var(--txt); flex: 1; min-width: 0; }
.pulse-meta { font-size: .7rem; color: var(--txt4); }

/* ── Toast ───────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--r10);
  background: var(--txt); color: var(--bg);
  font-size: .82rem; font-weight: 500;
  box-shadow: var(--sh-lg);
  animation: toastIn .2s ease both;
  pointer-events: auto;
  max-width: 320px;
}
.toast.error { background: var(--red); color: #fff; }
.toast.success { background: var(--green); color: #fff; }
@keyframes toastIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeUp {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Detail panel ────────────────────────────────────────────── */
.detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px; max-width: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--sh-xl);
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease;
}
.detail-panel.open { transform: translateX(0); }
/* Panel inner layout: header sticky, body scrolls */
#task-panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dp-swipe-hint  { flex-shrink: 0; }
.dp-head  { flex-shrink: 0; }
.dp-body  { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dp-foot  { flex-shrink: 0; }
.dp-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.3); z-index: 99;
}
.dp-overlay.open { display: block; }

/* ── Logbook ─────────────────────────────────────────────────── */
.lb-quick-add {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  background: var(--surface); border-bottom: 1px solid #e8e8e8;
  flex-wrap: wrap; gap: 8px;
}
.lb-type-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.lb-type-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border2);
  background: none; cursor: pointer; font-size: .76rem;
  font-weight: 500; color: var(--txt3); font-family: inherit;
  transition: var(--ease); white-space: nowrap;
}
.lb-type-chip.active, .lb-type-chip:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
}
.lb-input-row { display: flex; gap: 8px; flex: 1; min-width: 200px; }
.lb-inp {
  flex: 1; border: 1.5px solid var(--border2);
  border-radius: var(--r8); padding: 8px 12px;
  font-size: 15px; font-family: inherit;
  color: var(--txt); background: var(--surface);
  outline: none; transition: border .12s, box-shadow .12s;
}
.lb-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lb-inp::placeholder { color: var(--txt4); }

/* Logbook feed */
.lb-feed { padding: 16px 20px; display: flex; flex-direction: column; gap: 1px; }
.lb-entry {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r10); overflow: hidden;
  transition: var(--ease); box-shadow: var(--sh-sm);
  margin-bottom: 8px;
}
.lb-entry:hover { border-color: var(--border2); }
.lb-entry-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer;
}
.lb-type-icon {
  width: 30px; height: 30px; border-radius: var(--r8);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .9rem;
}
.lb-entry-title { font-size: .84rem; font-weight: 600; color: var(--txt); flex: 1; min-width: 0; }
.lb-entry-time { font-size: .7rem; color: var(--txt4); white-space: nowrap; }
.lb-entry-body { padding: 0 14px 12px 54px; font-size: .82rem; color: var(--txt3); line-height: 1.6; }
.lb-entry-detail {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  display: none;
}
.lb-entry.expanded .lb-entry-detail { display: block; }

/* Type colours */
.lb-note     { background: rgba(59,130,246,.1);  color: var(--blue); }
.lb-meeting  { background: rgba(16,185,129,.1);  color: var(--ph-uat); }
.lb-decision { background: rgba(34,197,94,.1);   color: var(--green); }
.lb-risk     { background: rgba(239,68,68,.1);   color: var(--red); }
.lb-call     { background: rgba(245,158,11,.1);  color: var(--amber); }

/* ── Overview pipeline ───────────────────────────────────────── */
.ov-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh-sm);
}
.ov-table { border-collapse: collapse; min-width: 900px; width: 100%; }
.ov-table th {
  padding: 10px 12px; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--txt4); text-align: left; white-space: nowrap;
  border-bottom: 1px solid #e8e8e8;
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.ov-table th:first-child {
  position: sticky; left: 0; z-index: 6;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.ov-proj-cell {
  position: sticky; left: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 10px 14px; min-width: 200px;
  white-space: nowrap;
  z-index: 4;
}
.ov-proj-name {
  font-size: .84rem; font-weight: 600; color: var(--txt);
  text-decoration: none; display: block;
  transition: color .12s;
}
.ov-proj-name:hover { color: var(--accent); }
.ov-sub .ov-proj-name {
  font-size: .78rem; font-weight: 400; color: var(--txt3);
  padding-left: 14px;
}
.ov-phase-cell { padding: 8px 8px; border-bottom: 1px solid #e8e8e8; }
.ov-row:hover .ov-proj-cell,
.ov-row:hover td { background: var(--surface2); }
.ov-row:hover .ov-proj-cell { background: var(--surface2); }
.ov-pf-hdr td {
  background: var(--bg);
  padding: 6px 14px;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--txt4); border-bottom: 1px solid #e8e8e8;
}
.ov-rag { margin-left: 6px; }

/* ── Meetings ────────────────────────────────────────────────── */
.mtg-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r10); padding: 14px 16px;
  margin-bottom: 10px; box-shadow: var(--sh-sm);
  cursor: pointer; transition: var(--ease);
}
.mtg-card:hover { border-color: var(--border2); box-shadow: var(--sh-md); }
.mtg-card-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mtg-title { font-size: .88rem; font-weight: 600; color: var(--txt); flex: 1; }
.mtg-status {
  font-size: .68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; flex-shrink: 0;
}
.mtg-scheduled  { background: var(--blue-s);  color: var(--blue); }
.mtg-completed  { background: var(--green-s); color: var(--green); }
.mtg-cancelled  { background: rgba(148,163,184,.1); color: #64748b; }
.mtg-meta { display: flex; gap: 14px; font-size: .76rem; color: var(--txt3); flex-wrap: wrap; }
.mtg-meta-item { display: flex; align-items: center; gap: 5px; }
.mtg-meta-item svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.mtg-minutes { font-size: .78rem; color: var(--txt3); margin-top: 8px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Project header ──────────────────────────────────────────── */
.proj-sticky {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  margin: -24px -28px 0;
  padding: 16px 28px 0;
}
.proj-crumb {
  display: flex; align-items: center; gap: 5px;
  font-size: .73rem; color: var(--txt4); margin-bottom: 10px;
  flex-wrap: wrap;
}
.proj-crumb a { color: var(--txt4); transition: color .12s; }
.proj-crumb a:hover { color: var(--txt2); }
.proj-crumb-sep { color: var(--border2); }
.proj-title-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.proj-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.proj-title {
  font-size: 1.15rem; font-weight: 700;
  color: var(--txt); letter-spacing: -.02em;
}
.proj-tabs {
  display: flex; gap: 0; margin: 0 -28px;
  padding: 0 28px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; border-top: 1px solid var(--border);
  margin-top: 0;
}
.proj-tabs::-webkit-scrollbar { display: none; }
.proj-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: .82rem; font-weight: 500;
  color: var(--txt3); text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap; transition: var(--ease);
  margin-bottom: -1px; -webkit-tap-highlight-color: transparent;
}
.proj-tab svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; opacity: .6; }
.proj-tab:hover { color: var(--txt); border-bottom-color: var(--border2); }
.proj-tab.active { color: var(--txt); font-weight: 600; border-bottom-color: var(--accent); }
.proj-tab.active svg { opacity: 1; }

/* ── Cloud tags ──────────────────────────────────────────────── */
.cloud-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.cloud-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px;
  font-size: .68rem; font-weight: 600;
  background: var(--surface2); color: var(--txt3);
  border: 1px solid var(--border); cursor: pointer;
  transition: var(--ease);
}
.cloud-tag:hover, .cloud-tag.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: rgba(240,106,106,.3);
}

/* ── Inline date picker ──────────────────────────────────────── */
/* date picker — see bottom of file */

/* ── Status dropdown ─────────────────────────────────────────── */
/* status drop — see bottom of file */

/* ── Inline edit ─────────────────────────────────────────────── */
.k-inline-inp {
  border: 1.5px solid var(--accent); border-radius: 4px;
  padding: 3px 6px; font-size: inherit; font-family: inherit;
  background: var(--surface); color: var(--txt);
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
  line-height: 1.4; width: 100%;
  font-size: max(16px, .88rem);
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--txt4); }

/* ── Login page ──────────────────────────────────────────────── */
.login-body {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  background: var(--sb-bg);
}
.login-card {
  background: var(--surface); border-radius: var(--r16);
  padding: 40px; width: 380px; max-width: calc(100vw - 32px);
  box-shadow: var(--sh-xl);
}
.login-logo {
  display: flex; align-items: center; gap: 10px;
  justify-content: center; margin-bottom: 32px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%); z-index: 50;
    transition: transform .2s ease;
    box-shadow: var(--sh-xl);
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: flex; }
  .topbar { padding: 0 16px; }
  .page-content { padding: 16px; }
  .proj-sticky { margin: -16px -16px 0; padding: 12px 16px 0; }
  .proj-tabs { margin: 0 -16px; padding: 0 16px; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media(max-width: 600px) {
  .th-hide-sm, .td-hide-sm { display: none !important; }
  .modal-wrap { align-items: flex-end; padding: 0; }
  .modal { border-radius: var(--r16) var(--r16) 0 0; max-height: 92vh; }
  .form-row { flex-direction: column; }
  .k-dp {
    position: fixed !important;
    bottom: 0 !important; top: auto !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; border-radius: var(--r16) var(--r16) 0 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    animation: slideUp .2s ease both;
  }
  .k-status-drop {
    position: fixed !important;
    bottom: 0 !important; top: auto !important;
    left: 0 !important; right: 0 !important;
    min-width: 100%; border-radius: var(--r16) var(--r16) 0 0;
    animation: slideUp .2s ease both;
  }
  .ksd-opt { padding: 14px 20px; font-size: .88rem; }
  .lb-type-chips { gap: 4px; }
  .lb-type-chip { padding: 7px 10px; font-size: .8rem; }
}
@media(hover: none) {
  .k-chk:not(.done) { border-color: var(--border2); }
  .pi-tile:hover { transform: none; }
}
@supports(padding-bottom: env(safe-area-inset-bottom)) {
  .toast-container { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ── Login page — Karma dark ─────────────────────────────── */
.login-body { background: #0c0c12 !important; }
/* Override any old login styles that may exist */
.login-bg { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PAGE
═══════════════════════════════════════════════════════════════ */
.settings-layout {
  display: flex;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 24px;
}
.settings-nav {
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 20px;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 80px;
  height: fit-content;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--r8);
  font-size: .84rem;
  color: var(--txt3);
  text-decoration: none;
  transition: var(--ease);
  font-weight: 500;
}
.settings-nav-item svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; flex-shrink: 0;
}
.settings-nav-item:hover { background: var(--bg); color: var(--txt); }
.settings-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.settings-content {
  flex: 1;
  padding-left: 28px;
  min-width: 0;
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  margin-bottom: 16px;
  overflow: hidden;
}
.settings-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
}
.settings-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 3px;
}
.settings-card-desc {
  font-size: .8rem;
  color: var(--txt3);
}
.settings-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-card-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Tag pills in settings */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 20px;
  font-size: .8rem; color: var(--txt);
  cursor: default;
}
.tag-pill-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: none; border: none;
  color: var(--txt4); cursor: pointer;
  transition: all .12s; padding: 0;
  font-size: .9rem; line-height: 1;
}
.tag-pill-del:hover { background: var(--red-s); color: var(--red); }

/* Notification toggles */
.notif-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
}
.notif-row:last-child { border-bottom: none; }
.notif-label { font-size: .85rem; color: var(--txt); font-weight: 500; }
.notif-desc  { font-size: .77rem; color: var(--txt3); margin-top: 2px; }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle {
  width: 40px; height: 22px;
  background: var(--border2);
  border-radius: 11px; position: relative;
  transition: background .2s; cursor: pointer;
  border: none; padding: 0; flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(18px); }

/* Mobile settings */
@media(max-width: 768px) {
  .settings-layout { flex-direction: column; padding: 16px; }
  .settings-nav {
    width: 100%; min-width: 0; flex-direction: row;
    flex-wrap: wrap; padding-right: 0;
    border-right: none; border-bottom: 1px solid #e8e8e8;
    padding-bottom: 12px; margin-bottom: 16px;
    position: static;
  }
  .settings-content { padding-left: 0; }
}

/* ── Logo fix — coral accent bg not purple ──────────────────── */
.sb-logo-icon {
  background: rgba(240,106,106,.1) !important;
  border-color: rgba(240,106,106,.15) !important;
}
.sb-logo-icon svg path {
  stroke: #f06a6a !important;
}

/* ── Alert helpers ──────────────────────────────────────────── */
.alert {
  padding: 10px 14px; border-radius: var(--r8);
  font-size: .84rem; display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.alert-success {
  background: rgba(0,200,83,.1); border: 1px solid rgba(0,200,83,.2);
  color: #00a846;
}
.alert-error {
  background: var(--red-s); border: 1px solid rgba(239,68,68,.2);
  color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════
   MY TASKS — Asana-style rows
═══════════════════════════════════════════════════════════════ */

/* Asana circle checkbox */
.mt-chk {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c0c0b8; /* always visible */
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
  transition: all .15s;
}
.mt-row:hover .mt-chk:not(.done) {
  border-color: #b3b3b3;
}
.mt-chk:hover:not(.done) {
  border-color: var(--green) !important;
  background: rgba(0,200,83,.08);
}
.mt-chk.done {
  background: var(--green);
  border-color: var(--green) !important;
}
.mt-chk.done::after {
  content: '';
  display: block;
  width: 5px; height: 8px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}

/* My tasks row */
.mt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  transition: background .1s;
  min-height: 44px;
}
.mt-row:hover { background: var(--bg); }

/* Task title */
.mt-title {
  font-size: .88rem;
  font-weight: 400;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-title.done {
  text-decoration: line-through;
  color: var(--txt3);
}

/* Meta row — project pill + section */
.mt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* Project pill — Asana style coloured tag */
.mt-proj {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Due date */
.mt-due {
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.mt-due.overdue { color: var(--red); }
.mt-due.today   { color: #f59e0b; }
.mt-due.upcoming, .mt-due.soon { color: var(--txt3); }

/* Recurrence icon */
.mt-recur-icon {
  width: 12px; height: 12px;
  stroke: var(--txt4); fill: none; stroke-width: 2;
  flex-shrink: 0;
}

/* Group headers */
.mt-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
  cursor: pointer;
  user-select: none;
}
.mt-group-hdr:hover .mt-add-inline { opacity: 1; }
.mt-add-inline {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: none; border: 1px solid var(--border2);
  cursor: pointer; color: var(--txt3);
  opacity: 0; transition: opacity .15s, background .15s;
  margin-left: 2px;
}
.mt-add-inline:hover { background: var(--bg); color: var(--txt); opacity: 1; }

/* Empty state */
.mt-empty {
  padding: 12px 16px;
  font-size: .82rem;
  color: var(--txt3);
}

/* Inline add input */
.mt-add-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid #e8e8e8;
  background: var(--bg);
}
.mt-inline-inp {
  flex: 1; border: none; outline: none;
  font-size: .88rem; font-family: inherit;
  background: transparent; color: var(--txt);
  font-size: 16px; /* prevent iOS zoom */
}
.mt-inline-btn {
  font-size: .78rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: var(--r6);
  padding: 4px 12px; cursor: pointer; font-family: inherit;
}
.mt-inline-cancel {
  font-size: .78rem; color: var(--txt3);
  background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 4px 8px;
}

/* Mobile */
@media(max-width: 768px) {
  .mt-row { padding: 10px 12px; min-height: 52px; }
  .mt-chk { width: 22px; height: 22px; }
  .mt-chk:not(.done) { border-color: #ccc; } /* always show on touch */
}

/* ── Overview hide toggle in project cards ──────────────────── */
.proj-overview-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--txt3);
  cursor: pointer; padding: 4px 0;
  user-select: none;
}
.proj-overview-toggle input { accent-color: var(--accent); cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   LOGO — Black on light, White on dark
═══════════════════════════════════════════════════════════════ */
.sb-logo-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: #ffffff;  /* white bg in light mode (dark sidebar) */
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.sb-logo-mark svg {
  width: 18px; height: 18px;
}
.sb-logo-diamond {
  fill: none;
  stroke: #000000;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.sb-logo-check {
  stroke: #000000;
}

/* Dark mode — invert: black bg, white mark */
[data-theme="dark"] .sb-logo-mark {
  background: #ffffff;
}
[data-theme="dark"] .sb-logo-diamond { stroke: #000; }
[data-theme="dark"] .sb-logo-check   { stroke: #000; }

/* Logo text */
.sb-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--sb-border);
  text-decoration: none; flex-shrink: 0;
}
.sb-logo-text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.1rem;
  color: var(--sb-txt-act);
  letter-spacing: -.02em; line-height: 1;
}
.sb-logo-tagline {
  font-size: .5rem; font-weight: 700;
  letter-spacing: .14em;
  color: var(--sb-txt);
  text-transform: uppercase;
  display: block; margin-top: 3px;
}

/* ── My Tasks checkbox — always visible border ──────────────── */
/* Already invisible: show on row hover in CSS above.
   On touch devices always show it */
@media(hover: none) {
  .myt-chk:not(.done) { border-color: #d0d0d0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   REPEAT / RECURRENCE PICKER — Asana style
═══════════════════════════════════════════════════════════════ */
.dp-repeat-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 4px 0 0;
}
.dp-repeat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #e8e8e8;
  min-height: 38px;
}
.dp-repeat-row:last-child { border-bottom: none; }
.dp-repeat-lbl {
  width: 72px;
  min-width: 72px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--txt3);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dp-repeat-sel {
  flex: 1;
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 6px 28px 6px 10px;
  font-size: .84rem;
  color: var(--txt);
  background: var(--surface);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color .15s;
}
.dp-repeat-sel:focus { border-color: var(--accent); }
.dp-repeat-inp {
  flex: 1;
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: .84rem;
  color: var(--txt);
  background: var(--surface);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.dp-repeat-inp:focus { border-color: var(--accent); }
.dp-repeat-clear {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none; background: none;
  cursor: pointer; color: var(--txt4);
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; flex-shrink: 0;
}
.dp-repeat-clear:hover { background: var(--red-s); color: var(--red); }

/* Day of week chips */
.dp-dow-chips {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.dp-dow-chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border2);
  background: var(--surface);
  font-size: .74rem; font-weight: 600;
  color: var(--txt3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  font-family: inherit;
  flex-shrink: 0;
}
.dp-dow-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.dp-dow-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Repeat display in attrs row */
#dp-repeat-display {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  transition: background .12s;
  cursor: pointer;
}
#dp-repeat-display:hover { background: var(--bg); }

/* Mobile */
@media(max-width: 600px) {
  .dp-repeat-lbl { width: 56px; min-width: 56px; font-size: .68rem; }
  .dp-dow-chip   { width: 28px; height: 28px; font-size: .68rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DATE PICKER — Asana Repeats row
═══════════════════════════════════════════════════════════════ */

/* Date picker popup */
.k-dp {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08);
  width: 268px;
  padding: 12px 12px 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  z-index: 9999;
}
[data-theme="dark"] .k-dp {
  background: #2c2c2e;
  border-color: #3a3a3c;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* Header */
.kdp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.kdp-nav {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: none; cursor: pointer;
  font-size: 1rem; color: #666;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.kdp-nav:hover { background: #f0f0f0; }
[data-theme="dark"] .kdp-nav { color: #aeaeb2; }
[data-theme="dark"] .kdp-nav:hover { background: #3a3a3c; }
.kdp-month { font-size: .85rem; font-weight: 600; color: #1a1a1a; }
[data-theme="dark"] .kdp-month { color: #f2f2f7; }

/* Day name header */
.kdp-days-hdr {
  display: grid; grid-template-columns: repeat(7,1fr);
  text-align: center;
  font-size: .68rem; font-weight: 600;
  color: #9e9e9e; margin-bottom: 4px;
}
[data-theme="dark"] .kdp-days-hdr { color: #636366; }

/* Calendar grid */
.kdp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; }
.kdp-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .79rem; border-radius: 50%;
  cursor: pointer; color: #1a1a1a;
  transition: background .1s, color .1s;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .kdp-cell { color: #f2f2f7; }
.kdp-cell:hover:not(.other) { background: #f0f0f0; }
[data-theme="dark"] .kdp-cell:hover:not(.other) { background: #3a3a3c; }
.kdp-cell.other   { color: transparent; pointer-events: none; }
.kdp-cell.today   { font-weight: 700; color: #0071e3; }
[data-theme="dark"] .kdp-cell.today { color: #0a84ff; }
.kdp-cell.selected { background: #0071e3 !important; color: #fff !important; font-weight: 600; }
[data-theme="dark"] .kdp-cell.selected { background: #0a84ff !important; }
.kdp-cell.past    { color: #c0c0c0; }
[data-theme="dark"] .kdp-cell.past { color: #48484a; }
.kdp-cell.weekend { color: #999; }

/* Footer */
.kdp-foot {
  display: flex; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #e8e8e8;
  margin-top: 6px;
}
[data-theme="dark"] .kdp-foot { border-top-color: #38383a; }
.kdp-clear, .kdp-today {
  font-size: .78rem; color: #666;
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 5px;
  font-family: inherit; transition: all .1s;
}
.kdp-clear:hover { color: #e8384f; background: #fff2f2; }
.kdp-today:hover { color: #0071e3; background: #f0f4ff; }
[data-theme="dark"] .kdp-clear  { color: #aeaeb2; }
[data-theme="dark"] .kdp-today  { color: #aeaeb2; }
[data-theme="dark"] .kdp-today:hover  { color: #0a84ff; background: rgba(10,132,255,.1); }
[data-theme="dark"] .kdp-clear:hover  { color: #ff6b6b; background: rgba(232,56,79,.1); }

/* ── Asana Repeats row ──────────────────────────────────────── */
.kdp-repeat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  border-top: 1px solid #e8e8e8;
  margin-top: 8px;
}
[data-theme="dark"] .kdp-repeat-row { border-top-color: #38383a; }

.kdp-repeat-ico {
  width: 13px; height: 13px;
  stroke: #9e9e9e; fill: none; stroke-width: 2;
  flex-shrink: 0;
}
.kdp-repeat-lbl {
  font-size: .78rem; font-weight: 500;
  color: #666; flex-shrink: 0;
  min-width: 52px;
}
[data-theme="dark"] .kdp-repeat-lbl { color: #aeaeb2; }
.kdp-repeat-right { flex: 1; }

.kdp-freq-sel {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 5px 22px 5px 8px;
  font-size: .8rem;
  color: #1a1a1a;
  background: #ffffff;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: border-color .12s;
}
.kdp-freq-sel:focus { border-color: #0071e3; }
[data-theme="dark"] .kdp-freq-sel {
  background-color: #3a3a3c;
  border-color: #48484a;
  color: #f2f2f7;
}

/* Day of week row */
.kdp-dow-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
  border-top: 1px solid #f0f0f0;
  flex-wrap: wrap;
}
[data-theme="dark"] .kdp-dow-wrap { border-top-color: #38383a; }
.kdp-dow-lbl {
  font-size: .72rem; color: #9e9e9e;
  min-width: 52px; flex-shrink: 0;
}
[data-theme="dark"] .kdp-dow-lbl { color: #636366; }
.kdp-dow-chips { display: flex; gap: 3px; }
.kdp-dow-chip {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid #e0e0e0;
  background: #ffffff;
  font-size: .76rem; font-weight: 600;
  color: #666;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.kdp-dow-chip:hover {
  border-color: #0071e3;
  color: #0071e3;
  background: #f0f4ff;
}
.kdp-dow-chip.active {
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #fff !important;
}
[data-theme="dark"] .kdp-dow-chip {
  background: #3a3a3c;
  border-color: #48484a;
  color: #aeaeb2;
}
[data-theme="dark"] .kdp-dow-chip.active {
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  color: #fff !important;
}

/* Mobile */
@media(max-width: 768px) {
  .k-dp { width: 100% !important; border-radius: 16px 16px 0 0 !important; }
  .kdp-cell { height: 38px; font-size: .82rem; }
  .kdp-dow-chip { width: 32px; height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT LIST TASK ROW — Complete fix
   t-chk = circle checkbox in project list view
═══════════════════════════════════════════════════════════════ */
.t-chk {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid #b8b8b0; /* always visible like Asana */
  background: #ffffff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
  transition: border-color .12s, background .12s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
[data-theme="dark"] .t-chk { background: #1c1c1e; border-color: #48484a; }
.t-chk:hover:not(.is-done) {
  border-color: #00c853 !important;
  background: rgba(0,200,83,.06);
}
.t-chk.is-done {
  background: #00c853 !important;
  border-color: #00c853 !important;
}
.t-chk.is-done::after {
  content: '';
  position: absolute;
  width: 5px; height: 8px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
  display: block;
}

/* Ensure task rows inside lt-table have correct styling */
.lt-table .tbl-row {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .lt-table .tbl-row {
  background: #1c1c1e;
  border-bottom: 1px solid #2c2c2e;
}
.lt-table .tbl-row:hover { background: var(--surface2); }
[data-theme="dark"] .lt-table .tbl-row:hover { background: #2c2c2e; }

/* Ensure avatar is always small and never overflows */
.tc-avatar,
.tc-avatar * {
  max-width: 22px !important;
  max-height: 22px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: .68rem !important;
  overflow: hidden;
}
/* Kill any inherited img or broken image inside avatar */
.tc-avatar img { display: none; }

/* Vertical lines between key columns — subtle like Asana */
.lt-table .tc-date,
.lt-table .tc-assignee,
.lt-table .tc-priority,
.lt-table .tc-status {
  border-left: 1px solid #f0f0f0;
}
[data-theme="dark"] .lt-table .tc-date,
[data-theme="dark"] .lt-table .tc-assignee,
[data-theme="dark"] .lt-table .tc-priority,
[data-theme="dark"] .lt-table .tc-status {
  border-left-color: #2c2c2e;
}
.lt-th-cell {
  border-left: 1px solid #f0f0f0;
}
[data-theme="dark"] .lt-th-cell { border-left-color: #2c2c2e; }

/* Row height — tight like Asana */
.lt-table .tbl-row { height: 46px; }
.lt-table td { padding: 0 12px; vertical-align: middle; }
.lt-table .tc-chk { padding: 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   PROJECT LIST — Missing task row element CSS
═══════════════════════════════════════════════════════════════ */

/* Task name wrapper */
.tc-name-wrap {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden;
}

/* Subtask count badge */
.tc-sub-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .68rem; color: #9e9e9e;
  background: #f5f5f5; border: 1px solid #e8e8e8;
  padding: 1px 6px; border-radius: 20px; flex-shrink: 0;
  white-space: nowrap;
}
[data-theme="dark"] .tc-sub-badge { background: #2c2c2e; border-color: #38383a; color: #636366; }
.tc-sub-badge svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Milestone */
.tc-milestone-diamond { color: #f06a6a; font-size: .9rem; display: block; text-align: center; }

/* Due date values */
.tc-due-val {
  font-size: .8rem; font-weight: 500; white-space: nowrap;
}
.tc-due-val.overdue  { color: #e8384f; }
.tc-due-val.today    { color: #fd612c; }
.tc-due-val.upcoming,
.tc-due-val.soon     { color: #9e9e9e; }
.tc-ph { font-size: .8rem; color: #ccc; }

/* Priority button */
.tc-priority-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-size: .78rem; font-weight: 500; color: #555;
  padding: 3px 6px; border-radius: 4px;
  font-family: inherit; transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .tc-priority-btn { color: #aeaeb2; }
.tc-priority-btn:hover { background: rgba(0,0,0,.05); }
.tc-p-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.p-high   .priority-label { color: #e8384f; }
.p-medium .priority-label { color: #f59e0b; }
.p-low    .priority-label { color: #94a3b8; }

/* Status pill */
.tc-status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px;
  font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: filter .12s;
  white-space: nowrap;
}
.tc-status-pill:hover { filter: brightness(.9); }

/* Status dropdown */
.k-status-drop {
  background: #ffffff; border: 1px solid #e0e0e0;
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  overflow: hidden; min-width: 140px;
  animation: fadeUp .12s ease both;
}
[data-theme="dark"] .k-status-drop { background: #2c2c2e; border-color: #3a3a3c; }
.ksd-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: .82rem; color: #1a1a1a;
  cursor: pointer; transition: background .1s;
}
[data-theme="dark"] .ksd-opt { color: #f2f2f7; }
.ksd-opt:hover { background: #f6f6f6; }
[data-theme="dark"] .ksd-opt:hover { background: #3a3a3c; }
.ksd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Section title for lt-sec */
.lt-sec-name {
  font-size: .84rem; font-weight: 700; color: #1a1a1a; cursor: text;
}
[data-theme="dark"] .lt-sec-name { color: #f2f2f7; }
.lt-sec-count {
  font-size: .7rem; color: #9e9e9e;
  background: #f5f5f5; border: 1px solid #e8e8e8;
  padding: 1px 7px; border-radius: 20px;
}
[data-theme="dark"] .lt-sec-count { background: #2c2c2e; border-color: #38383a; }

/* Add task button in section */
.lt-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; color: #9e9e9e;
  background: none; border: none; cursor: pointer;
  padding: 7px 6px; font-family: inherit;
  transition: color .12s;
  -webkit-tap-highlight-color: transparent;
}
.lt-add-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; flex-shrink: 0; }
.lt-add-btn:hover { color: #1a1a1a; }
[data-theme="dark"] .lt-add-btn:hover { color: #f2f2f7; }

/* Add section button */
.lt-add-section-btn {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 24px; padding: 10px 14px;
  border: 2px dashed #e0e0e0; border-radius: 8px;
  background: none; cursor: pointer;
  font-size: .82rem; font-weight: 500; color: #9e9e9e;
  font-family: inherit; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.lt-add-section-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.lt-add-section-btn:hover { border-color: #0071e3; color: #0071e3; background: rgba(0,113,227,.04); }

/* Inline add row */
.asana-add-row td { padding: 4px 8px; background: #fafafa; }
[data-theme="dark"] .asana-add-row td { background: #2c2c2e; }
.t-chk-ghost {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px dashed #d0d0d0; display: inline-block;
}
.asana-add-inp {
  width: 100%; border: none; outline: none;
  font-size: 15px; font-family: inherit;
  color: #1a1a1a; background: transparent; padding: 4px 0;
}
[data-theme="dark"] .asana-add-inp { color: #f2f2f7; }
.asana-add-inp::placeholder { color: #bbb; }
.asana-add-hint { font-size: .72rem; color: #bbb; margin-left: 8px; }

/* Toolbar */
.lt-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid #e8e8e8;
  background: #ffffff; flex-wrap: wrap;
  position: sticky; top: var(--ph-h,108px); z-index: 10;
}
[data-theme="dark"] .lt-toolbar { background: #1c1c1e; border-bottom-color: #2c2c2e; }
.lt-filters { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.lt-search-wrap { position: relative; max-width: 200px; flex: 1; min-width: 120px; }
.lt-search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; stroke: #9e9e9e; fill: none; stroke-width: 2; pointer-events: none; }
.lt-search-inp {
  width: 100%; padding: 6px 10px 6px 28px;
  border: 1px solid #e0e0e0; border-radius: 7px;
  font-size: .8rem; background: #ffffff; color: #1a1a1a;
  outline: none; font-family: inherit; transition: border-color .12s;
}
[data-theme="dark"] .lt-search-inp { background: #2c2c2e; border-color: #3a3a3c; color: #f2f2f7; }
.lt-search-inp:focus { border-color: #0071e3; }
.lt-filter-sel {
  border: 1px solid #e0e0e0; border-radius: 7px;
  padding: 6px 22px 6px 9px; font-size: .8rem;
  background: #ffffff; color: #1a1a1a; outline: none;
  cursor: pointer; appearance: none; font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
  white-space: nowrap;
}
[data-theme="dark"] .lt-filter-sel { background-color: #2c2c2e; border-color: #3a3a3c; color: #f2f2f7; }
.lt-clear { font-size: .77rem; color: #e8384f; text-decoration: none; white-space: nowrap; }

/* Section action buttons */
.lt-sec-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #e8e8e8; border-radius: 5px; background: #f5f5f5;
  cursor: pointer; color: #9e9e9e; font-size: .78rem;
  transition: all .12s; flex-shrink: 0;
}
[data-theme="dark"] .lt-sec-btn { background: #2c2c2e; border-color: #38383a; color: #636366; }
.lt-sec-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.lt-sec-btn:hover { border-color: #0071e3; color: #0071e3; background: rgba(0,113,227,.05); }
.lt-sec-btn-del:hover { border-color: #e8384f !important; color: #e8384f !important; background: rgba(232,56,79,.05) !important; }
.lt-sec-actions { display: flex; gap: 4px; margin-left: auto; opacity: 0; transition: opacity .15s; }
.lt-sec-inner:hover .lt-sec-actions { opacity: 1; }
.lt-sec-budget { font-size: .75rem; font-weight: 600; color: #555; margin-left: auto; white-space: nowrap; }
[data-theme="dark"] .lt-sec-budget { color: #aeaeb2; }

/* ═══════════════════════════════════════════════════════════════
   INLINE ADD — Asana style (no page reload)
═══════════════════════════════════════════════════════════════ */
.inline-add-row td {
  padding: 4px 0 4px 0;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}
[data-theme="dark"] .inline-add-row td { background: #2c2c2e; border-bottom-color: #38383a; }
.inline-add-inp {
  flex: 1; border: none; outline: none;
  font-size: 15px; font-family: inherit;
  color: #1a1a1a; background: transparent;
  padding: 6px 0; width: 100%;
}
[data-theme="dark"] .inline-add-inp { color: #f2f2f7; }
.inline-add-inp::placeholder { color: #bbb; }

/* Subtask indent */
.inline-sub-row td { background: #f5f5f5; }
[data-theme="dark"] .inline-sub-row td { background: #252525; }

/* ── Task row hover actions ─────────────────────────────────── */
.tc-row-actions {
  display: flex; align-items: center; gap: 2px;
  opacity: 0; transition: opacity .12s;
  margin-left: auto; flex-shrink: 0;
}
.tbl-row:hover .tc-row-actions { opacity: 1; }
.tc-action-btn {
  width: 24px; height: 24px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  background: #ffffff;
  cursor: pointer; color: #9e9e9e;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; flex-shrink: 0; padding: 0;
}
[data-theme="dark"] .tc-action-btn { background: #2c2c2e; border-color: #38383a; color: #636366; }
.tc-action-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.tc-action-btn:hover { border-color: #0071e3; color: #0071e3; background: rgba(0,113,227,.05); }

/* Subtask row indent */
.subtask-row .tc-title-inp { padding-left: 8px; }

/* ── Section rename input ───────────────────────────────────── */
.sec-rename-inp {
  border: none; outline: none;
  font-size: .84rem; font-weight: 700;
  color: inherit; background: transparent;
  width: 200px; font-family: inherit; padding: 0;
}

/* ── My Tasks vertical column lines ────────────────────────── */
.myt-table-hdr > div[style*="border-left"],
.myt-col-due,
.myt-col-proj,
.myt-col-pri {
  border-left: 1px solid #f0f0f0;
}
[data-theme="dark"] .myt-col-due,
[data-theme="dark"] .myt-col-proj,
[data-theme="dark"] .myt-col-pri {
  border-left-color: #2c2c2e;
}

/* ═══════════════════════════════════════════════════════════════
   POPUPS — Definitive polished styles
   Calendar · Status drop · Priority drop · Modals
   Apple/Linear design language
═══════════════════════════════════════════════════════════════ */

/* ── Shared popup base ─────────────────────────────────────── */
.k-dp,
.k-status-drop,
.k-priority-drop {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.05),
    0 4px 6px rgba(0,0,0,.05),
    0 12px 32px rgba(0,0,0,.12);
  animation: popIn .12s cubic-bezier(.2,.8,.3,1) both;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
[data-theme="dark"] .k-dp,
[data-theme="dark"] .k-status-drop,
[data-theme="dark"] .k-priority-drop {
  background: #2c2c2e;
  border-color: rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 4px 6px rgba(0,0,0,.2),
    0 12px 32px rgba(0,0,0,.5);
}
@keyframes popIn {
  from { opacity:0; transform: scale(.96) translateY(-4px); }
  to   { opacity:1; transform: scale(1)   translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   CALENDAR DATE PICKER
══════════════════════════════════════════════════════════════ */
.k-dp {
  width: 280px;
  padding: 14px 14px 10px;
  overflow: hidden;
}

/* Month nav */
.kdp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kdp-month {
  font-size: .88rem;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -.01em;
}
[data-theme="dark"] .kdp-month { color: #f2f2f7; }
.kdp-nav {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid #e8e8e8;
  background: #ffffff;
  cursor: pointer;
  font-size: .9rem;
  color: #555;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
  line-height: 1;
}
.kdp-nav:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
  color: #1a1a1a;
}
[data-theme="dark"] .kdp-nav {
  background: #3a3a3c;
  border-color: #48484a;
  color: #aeaeb2;
}
[data-theme="dark"] .kdp-nav:hover { background: #48484a; color: #f2f2f7; }

/* Day name header */
.kdp-days-hdr {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  text-align: center;
  font-size: .65rem;
  font-weight: 700;
  color: #b0b0b0;
  letter-spacing: .04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
[data-theme="dark"] .kdp-days-hdr { color: #636366; }

/* Day grid */
.kdp-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 2px;
}
.kdp-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  border-radius: 8px;
  cursor: pointer;
  color: #1a1a1a;
  font-weight: 400;
  transition: background .08s, color .08s;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .kdp-cell { color: #f2f2f7; }
.kdp-cell:hover:not(.other):not(.selected) {
  background: #f0f0f0;
}
[data-theme="dark"] .kdp-cell:hover:not(.other):not(.selected) {
  background: #3a3a3c;
}
.kdp-cell.other {
  color: transparent !important;
  pointer-events: none;
}
.kdp-cell.past { color: #c8c8c8; }
[data-theme="dark"] .kdp-cell.past { color: #48484a; }
.kdp-cell.weekend:not(.selected) { color: #888; }
[data-theme="dark"] .kdp-cell.weekend:not(.selected) { color: #636366; }
.kdp-cell.today:not(.selected) {
  color: #0071e3;
  font-weight: 700;
  background: rgba(0,113,227,.08);
  border-radius: 8px;
}
[data-theme="dark"] .kdp-cell.today:not(.selected) {
  color: #0a84ff;
  background: rgba(10,132,255,.12);
}
.kdp-cell.selected {
  background: #0071e3 !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 8px;
}
[data-theme="dark"] .kdp-cell.selected {
  background: #0a84ff !important;
}

/* Repeats row */
.kdp-repeat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
  border-top: 1px solid #f0f0f0;
  margin-top: 10px;
}
[data-theme="dark"] .kdp-repeat-row { border-top-color: #3a3a3c; }
.kdp-repeat-ico {
  width: 13px; height: 13px;
  stroke: #aaa; fill: none; stroke-width: 2; flex-shrink: 0;
}
.kdp-repeat-lbl {
  font-size: .78rem; font-weight: 500;
  color: #777; flex-shrink: 0; min-width: 52px;
}
[data-theme="dark"] .kdp-repeat-lbl { color: #aeaeb2; }
.kdp-repeat-right { flex: 1; }
.kdp-freq-sel {
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 7px;
  padding: 5px 24px 5px 9px;
  font-size: .8rem; color: #1a1a1a;
  background: #fafafa;
  font-family: inherit;
  outline: none; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  transition: border-color .12s;
}
.kdp-freq-sel:focus { border-color: #0071e3; background: #fff; }
[data-theme="dark"] .kdp-freq-sel {
  background-color: #3a3a3c; border-color: #48484a; color: #f2f2f7;
}

/* Day chips row */
.kdp-dow-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0 2px;
  border-top: 1px solid #f5f5f5;
  flex-wrap: wrap;
}
[data-theme="dark"] .kdp-dow-wrap { border-top-color: #3a3a3c; }
.kdp-dow-lbl { font-size: .7rem; color: #aaa; min-width: 52px; flex-shrink: 0; }
.kdp-dow-chips { display: flex; gap: 4px; }
.kdp-dow-chip {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #e8e8e8;
  background: #ffffff;
  font-size: .72rem; font-weight: 700;
  color: #777; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.kdp-dow-chip:hover { border-color: #0071e3; color: #0071e3; background: #f0f4ff; }
.kdp-dow-chip.active { background: #0071e3; border-color: #0071e3; color: #fff; }
[data-theme="dark"] .kdp-dow-chip { background: #3a3a3c; border-color: #48484a; color: #aeaeb2; }
[data-theme="dark"] .kdp-dow-chip.active { background: #0a84ff; border-color: #0a84ff; color: #fff; }

/* Footer */
.kdp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid #f0f0f0;
}
[data-theme="dark"] .kdp-foot { border-top-color: #3a3a3c; }
.kdp-clear, .kdp-today {
  font-size: .78rem;
  color: #888;
  background: none; border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 7px;
  font-family: inherit;
  font-weight: 500;
  transition: all .1s;
}
.kdp-clear:hover { color: #e8384f; background: rgba(232,56,79,.08); }
.kdp-today:hover { color: #0071e3; background: rgba(0,113,227,.08); }
[data-theme="dark"] .kdp-clear, [data-theme="dark"] .kdp-today { color: #aeaeb2; }
[data-theme="dark"] .kdp-today:hover { color: #0a84ff; background: rgba(10,132,255,.1); }
[data-theme="dark"] .kdp-clear:hover { color: #ff6b6b; background: rgba(255,107,107,.1); }

/* ══════════════════════════════════════════════════════════════
   STATUS DROPDOWN
══════════════════════════════════════════════════════════════ */
.k-status-drop {
  overflow: hidden;
  min-width: 170px;
  padding: 5px 0;
}
.ksd-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  font-size: .83rem;
  color: #1a1a1a;
  cursor: pointer;
  transition: background .08s;
  font-weight: 400;
}
[data-theme="dark"] .ksd-opt { color: #f2f2f7; }
.ksd-opt:hover { background: #f5f5f5; }
[data-theme="dark"] .ksd-opt:hover { background: #3a3a3c; }
.ksd-opt.active { font-weight: 600; }
.ksd-dot {
  width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.ksd-check {
  margin-left: auto;
  width: 14px; height: 14px;
  stroke: #0071e3; fill: none; stroke-width: 2.5;
}
[data-theme="dark"] .ksd-check { stroke: #0a84ff; }

/* ══════════════════════════════════════════════════════════════
   MODALS — Apple sheet style
══════════════════════════════════════════════════════════════ */
.modal-wrap {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: #ffffff;
  border-radius: 16px;
  width: 520px; max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 8px 16px rgba(0,0,0,.08),
    0 24px 64px rgba(0,0,0,.16);
  animation: modalIn .18s cubic-bezier(.2,.8,.3,1) both;
}
[data-theme="dark"] .modal {
  background: #2c2c2e;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 8px 16px rgba(0,0,0,.3),
    0 24px 64px rgba(0,0,0,.6);
}
@keyframes modalIn {
  from { transform: scale(.96) translateY(8px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);   opacity: 1; }
}
.modal-head {
  display: flex; align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
}
[data-theme="dark"] .modal-head { border-bottom-color: #3a3a3c; }
.modal-title {
  font-size: .95rem; font-weight: 700;
  color: #1a1a1a; flex: 1;
  letter-spacing: -.01em;
}
[data-theme="dark"] .modal-title { color: #f2f2f7; }
.modal-body {
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  border-radius: 0 0 16px 16px;
}
[data-theme="dark"] .modal-foot {
  border-top-color: #3a3a3c;
  background: #252527;
}

/* Form elements inside modals */
.form-label {
  font-size: .78rem; font-weight: 600;
  color: #555; display: block; margin-bottom: 5px;
  letter-spacing: .01em;
}
[data-theme="dark"] .form-label { color: #aeaeb2; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e8e8e8;
  border-radius: 9px;
  font-size: .875rem;
  color: #1a1a1a;
  background: #ffffff;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: #3a3a3c;
  border-color: #48484a;
  color: #f2f2f7;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0,113,227,.12);
  background: #fff;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10,132,255,.2);
  background: #3a3a3c;
}
.form-input::placeholder { color: #b8b8b8; }
[data-theme="dark"] .form-input::placeholder { color: #636366; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}
.form-field { display: flex; flex-direction: column; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: .85rem; font-weight: 600;
  font-family: inherit;
  cursor: pointer; border: none;
  transition: all .12s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; flex-shrink: 0; }
.btn-primary { background: #0d9488; color: #ffffff; }
.btn-primary:hover { background: #0f766e; }
.btn-primary:active { transform: scale(.98); background: #115e59; }
.btn-secondary {
  background: #f5f5f5; color: #555; border: 1px solid #e8e8e8;
}
.btn-secondary:hover { background: #ececec; color: #333; }
[data-theme="dark"] .btn-secondary { background: #3a3a3c; color: #aeaeb2; border-color: #48484a; }
[data-theme="dark"] .btn-secondary:hover { background: #48484a; color: #f2f2f7; }
.btn-danger { background: rgba(232,56,79,.1); color: #e8384f; }
.btn-danger:hover { background: #e8384f; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: 7px; }
.btn-icon {
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: none; border: none; cursor: pointer;
  color: #888; transition: all .1s;
}
.btn-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-icon:hover { background: #f0f0f0; color: #1a1a1a; }
[data-theme="dark"] .btn-icon { color: #636366; }
[data-theme="dark"] .btn-icon:hover { background: #3a3a3c; color: #f2f2f7; }

/* Mobile popups — bottom sheet */
@media(max-width: 600px) {
  .modal-wrap { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    width: 100%;
  }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .k-dp {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 32px rgba(0,0,0,.15);
  }
  .k-status-drop {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  }
  .ksd-opt { padding: 14px 20px; font-size: .9rem; }
  .kdp-cell { font-size: .85rem; }
  .kdp-dow-chip { width: 34px; height: 34px; }
}

/* ── Font size readability overrides (Asana-level comfort) ───── */

/* Base already 15px — boost key small text */
.tc-status-pill   { font-size: .75rem !important; }
.tc-pri-badge     { font-size: .72rem !important; }
.lt-th-cell       { font-size: .75rem !important; padding: 0 12px !important; }
.lt-sec-hdr       { font-size: .76rem !important; }

/* Task title — comfortable reading */
.tc-title-inp     { font-size: 14px !important; }
.tc-title-text    { font-size: 14px !important; }

/* My Tasks */
.myt-row td       { padding: 10px 12px !important; font-size: .88rem !important; }
.myt-title        { font-size: .92rem !important; }

/* Sidebar */
.sb-item          { font-size: .88rem !important; padding: 7px 12px !important; }
.sb-section-hdr   { font-size: .69rem !important; }

/* Dashboard */
.proj-item-row    { font-size: .88rem !important; padding: 8px 12px !important; }

/* Project header */
.ph-title         { font-size: 1.4rem !important; }
.ph-bstat-lbl     { font-size: .77rem !important; }
.ph-bstat-val     { font-size: .92rem !important; }

/* Overview */
.ov2-proj-name    { font-size: .94rem !important; }
.ov2-phase        { font-size: .72rem !important; }
.ov2-task-count   { font-size: .76rem !important; }

/* Settings */
.settings-nav-item { font-size: .88rem !important; }
.settings-card-title { font-size: 1rem !important; }

/* Subproject cards */
.sps-name         { font-size: .88rem !important; }

/* Modals */
.modal-title      { font-size: 1rem !important; }
.form-label       { font-size: .79rem !important; }
.form-input, .form-select { font-size: .92rem !important; }

/* Buttons */
.btn              { font-size: .86rem !important; }
.btn-sm           { font-size: .8rem !important; }

/* Topbar */
.topbar-title     { font-size: 1rem !important; font-weight: 600 !important; }
.theme-toggle-text { font-size: .82rem !important; }

/* ── Polish pass — crisp enterprise UI ───────────────────────── */

/* Project list task row — priority badge */
.tc-pri-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 5px;
  font-size: .72rem; font-weight: 700;
  border: 0.5px solid; cursor: pointer;
  font-family: inherit; background: none;
  transition: filter .12s; white-space: nowrap;
}
.tc-pri-high { background: rgba(239,68,68,.08);  color: #b91c1c; border-color: rgba(239,68,68,.25) !important; }
.tc-pri-med  { background: rgba(245,158,11,.08); color: #92400e; border-color: rgba(245,158,11,.25) !important; }
.tc-pri-low  { background: var(--surface2); color: var(--txt4); border-color: var(--border) !important; }
.tc-pri-badge:hover { filter: brightness(.92); }

/* Project list — due date pill */
.tc-due-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 5px;
  font-size: .75rem; font-weight: 600;
  border: 0.5px solid;
}
.tc-due-pill.overdue { background: rgba(239,68,68,.08); color: #b91c1c; border-color: rgba(239,68,68,.25); }
.tc-due-pill.today   { background: rgba(245,158,11,.08); color: #92400e; border-color: rgba(245,158,11,.25); }

/* Status pill — now has dot inside */
.tc-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  font-size: .74rem; font-weight: 600;
  cursor: pointer; transition: filter .12s;
  white-space: nowrap; border: 0.5px solid transparent;
}

/* Section header — crisper */
.lt-sec-inner {
  border-top: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
}
[data-theme="dark"] .lt-sec-inner { background: #1c1c1e !important; }
.lt-sec-name { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; }
.lt-sec-count {
  font-size: .69rem; font-weight: 600;
  background: var(--surface2); color: var(--txt3);
  border: 0.5px solid var(--border);
  padding: 1px 7px; border-radius: 20px;
}

/* My tasks priority badge */
.myt-pri-badge {
  font-size: .72rem; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  border: 0.5px solid; display: inline-flex;
  align-items: center; white-space: nowrap;
}
.myt-pri-high { background: rgba(239,68,68,.08);  color: #b91c1c; border-color: rgba(239,68,68,.25); }
.myt-pri-med  { background: rgba(245,158,11,.08); color: #92400e; border-color: rgba(245,158,11,.25); }
.myt-pri-low  { background: var(--surface2); color: var(--txt4); border-color: var(--border); }

/* My tasks pill — border fix */
.myt-pill {
  border: 0.5px solid;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* Project list row hover — left accent */
.lt-table .tbl-row { position: relative; }
.lt-table .tbl-row td:first-child { 
  border-left: 2.5px solid transparent;
  transition: border-color .12s;
}
.lt-table .tbl-row:hover td:first-child { border-left-color: var(--accent); }

/* Task title — always weight 500 */
.tc-title-inp, .tc-title-text { font-weight: 500 !important; }
.dt-title { font-weight: 400 !important; }
.myt-name { font-weight: 400 !important; }

/* Sidebar — tighter section header */
.sb-section-hdr {
  padding: 10px 16px 3px;
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--sb-section);
}

/* ── Design refresh — proposed changes ──────────────────────── */

/* Project pills in dashboard: always neutral grey */
.dt-proj-pill { background: rgba(0,0,0,.04) !important; color: var(--txt3) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="dark"] .dt-proj-pill { background: rgba(255,255,255,.06) !important; color: var(--txt3) !important; border-color: rgba(255,255,255,.1) !important; }

/* My tasks pill: same neutral */
.myt-pill { background: rgba(0,0,0,.04) !important; color: var(--txt3) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="dark"] .myt-pill { background: rgba(255,255,255,.06) !important; color: var(--txt3) !important; border-color: rgba(255,255,255,.1) !important; }

/* Priority badges: neutral, no background */
.dt-pri-badge { background: none !important; border-color: transparent !important; }
.dt-pri-high  { color: var(--txt3) !important; }
.dt-pri-med   { color: var(--txt4) !important; }
.dt-pri-low   { color: var(--txt4) !important; opacity: .7; }
.tc-pri-badge { background: none !important; border-color: transparent !important; color: var(--txt3) !important; }
.myt-pri-badge { background: none !important; border-color: transparent !important; color: var(--txt3) !important; }

/* Task titles: always 400 weight */
.dt-title, .tc-title-inp, .tc-title-text, .myt-name, .mt-title { font-weight: 400 !important; }

/* Status pills: dot + label, no background */
.tc-status-pill {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  gap: 6px;
  font-weight: 500 !important;
}

/* Overview: 3-state phase colours */
.ov2-phase.state-done    { background: #e6f9f0 !important; color: #085041 !important; border: 0.5px solid rgba(16,185,129,.25) !important; }
.ov2-phase.state-active  { background: #e8f5fe !important; color: #075985 !important; border: 0.5px solid rgba(59,130,246,.25) !important; }
.ov2-phase.state-pending { background: rgba(0,0,0,.04) !important; color: var(--txt4) !important; border: 0.5px solid rgba(0,0,0,.08) !important; }
.ov2-phase.state-na      { background: rgba(0,0,0,.03) !important; color: var(--txt4) !important; border: 0.5px dashed rgba(0,0,0,.1) !important; opacity: .5 !important; }
[data-theme="dark"] .ov2-phase.state-done    { background: rgba(16,185,129,.12) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,.2) !important; }
[data-theme="dark"] .ov2-phase.state-active  { background: rgba(59,130,246,.12) !important; color: #93c5fd !important; border-color: rgba(59,130,246,.2) !important; }
[data-theme="dark"] .ov2-phase.state-pending { background: rgba(255,255,255,.04) !important; color: var(--txt3) !important; border-color: rgba(255,255,255,.08) !important; }

/* RAG dot: larger with ring */
.ov2-rag { width: 11px !important; height: 11px !important; box-shadow: 0 0 0 3px rgba(128,128,128,.15), 0 0 5px currentColor !important; }

/* Sidebar amber active */
.sb-item.active::before { background: #e8a020 !important; }
.sb-badge { background: rgba(232,160,32,.18) !important; color: #e8a020 !important; }

/* Warm borders on topbar + tables */
.topbar { border-bottom-color: var(--border) !important; }
.tbl-row { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
.tbl-row:hover { background: var(--surface2) !important; }

/* tbl header */
.tbl th { background: var(--surface) !important; border-bottom-color: var(--border2) !important; }
[data-theme="dark"] .tbl th { background: var(--surface) !important; }

/* Section header inner warm */
.lt-sec-inner { background: var(--surface) !important; border-top-color: var(--border2) !important; }

/* Briefing bar warm */
.briefing-bar { background: var(--surface) !important; border-color: var(--border) !important; }

/* Dashboard task tabs warm */
.dash-task-tabs { background: var(--surface) !important; border-color: var(--border) !important; }
.dash-task-list { background: var(--surface) !important; border-color: var(--border) !important; }
.dt-row { border-bottom-color: var(--border) !important; }
.dt-row:hover { background: var(--surface2) !important; }

/* ════════════════════════════════════════════════════════════
   MY TASKS — shared styles + mobile redesign
════════════════════════════════════════════════════════════ */

/* Meta row: project pill + section + priority — below task name */
.myt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.myt-sep { font-size: .72rem; color: var(--border2); }

/* Mobile: hide topbar title (page has its own header) */
@media (max-width: 768px) {
  #topbar-title { display: none !important; }
}

/* Mobile: project header breadcrumb — hide, title already in topbar */
@media (max-width: 768px) {
  /* Breadcrumb — show on mobile, compact */
  .ph-crumb {
    display: flex !important;
    font-size: .68rem;
    margin-bottom: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .ph-crumb::-webkit-scrollbar { display: none; }
  .ph-crumb-cur { 
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ph-wrap {
    padding: 8px 14px 0;
    top: 52px; /* below topbar */
  }
  @media (display-mode: standalone) {
    .ph-wrap {
      top: calc(52px + env(safe-area-inset-top));
    }
  }
}

/* Mobile: My Tasks table → dashboard-style rows */
@media (max-width: 768px) {
  /* Hide table chrome */
  .myt-thead  { display: none !important; }
  .myt-td-due { display: none !important; }

  /* Each row becomes a flex row like dt-row */
  .myt-table  { display: block; width: 100%; }
  .myt-table tbody { display: block; }
  .myt-row    {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px !important;
    border-bottom: 0.5px solid var(--border) !important;
    background: var(--surface);
    cursor: pointer;
    position: relative;
  }
  .myt-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2.5px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transition: transform .15s;
  }
  .myt-row:hover::before { transform: scaleY(1); }
  .myt-row:hover { background: var(--surface2) !important; }
  .myt-row.myt-done { opacity: .5; }

  /* Checkbox cell */
  .myt-td-chk {
    display: flex !important;
    align-items: flex-start;
    padding: 2px 0 0 0 !important;
    border: none !important;
    width: 20px !important;
    flex-shrink: 0;
  }

  /* Name cell — takes all remaining space */
  .myt-td-name {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    border: none !important;
  }

  /* Task name */
  .myt-name {
    font-size: .9rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    color: var(--txt) !important;
  }
  .myt-name.done {
    text-decoration: line-through;
    color: var(--txt4) !important;
  }

  /* Meta below name */
  .myt-meta {
    margin-top: 4px;
  }

  /* Group headers */
  .myt-group-hdr { display: table-row !important; }
  .myt-group-hdr td { display: table-cell !important; padding: 8px 14px !important; }

  /* Page head */
  .myt-head { padding: 14px !important; }
}

/* ════════════════════════════════════════════════════════════
   PWA SAFE AREA — iOS status bar padding
   Applies when running in standalone PWA mode (no browser chrome)
════════════════════════════════════════════════════════════ */

/* Detect standalone PWA mode */
@media (display-mode: standalone) {

  /* Push topbar down below iOS status bar */
  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }

  /* Sidebar also needs to clear the status bar */
  .sidebar {
    padding-top: env(safe-area-inset-top);
  }

  /* Bottom safe area for home indicator */
  .page-content {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Bottom sheets and modals */
  .modal-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  /* Task detail panel */
  .detail-panel {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Also push dp-head down so close button isn't under status bar */
  .dp-head {
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  /* Toast stays above home indicator */
  .toast-container {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Also handle notch on landscape */
@media (display-mode: standalone) and (orientation: landscape) {
  .topbar {
    padding-left: calc(24px + env(safe-area-inset-left));
  }
  .sidebar {
    padding-left: env(safe-area-inset-left);
  }
}

/* ════════════════════════════════════════════════════════════
   CHASE / FOLLOW-UP — amber accent, pins to top of dashboard
════════════════════════════════════════════════════════════ */
.dt-chase-section {
  border-bottom: 0.5px solid var(--border);
  background: var(--surface);
}
.dt-chase-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #b07800;
  background: rgba(232,160,32,.06);
  border-bottom: 0.5px solid rgba(232,160,32,.2);
}
.dt-chase-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8a020;
  box-shadow: 0 0 0 2px rgba(232,160,32,.25);
  flex-shrink: 0;
}
.dt-chase-count {
  background: rgba(232,160,32,.15);
  color: #b07800;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
}
.dt-row-chase {
  border-left: 2.5px solid #e8a020 !important;
}
.dt-row-chase::before { display: none !important; }
.dt-chase-indicator {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .7;
}
.dt-body {
  flex: 1;
  min-width: 0;
}

/* Task detail panel — Chase toggle */
.dp-chase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 0.5px solid var(--border);
}
.dp-chase-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  color: var(--txt2);
  font-weight: 500;
}
.dp-chase-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  padding: 0;
}
.dp-chase-toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.dp-chase-toggle[data-on="0"] {
  background: var(--border2);
}
.dp-chase-toggle[data-on="0"]::after { left: 2px; }
.dp-chase-toggle[data-on="1"] {
  background: #e8a020;
}
.dp-chase-toggle[data-on="1"]::after { left: 18px; }

/* ── Task detail panel — project picker ─────────────────────── */
.dp-proj-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .71rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .12s;
}
.dp-proj-pill:hover { opacity: .8; }

.dp-proj-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r10);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
  padding-bottom: 6px;
}
.dp-proj-group {
  padding: 8px 12px 3px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt4);
}
.dp-proj-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  font-size: .83rem;
  color: var(--txt2);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .1s;
}
.dp-proj-opt:hover { background: var(--surface2); color: var(--txt); }
.dp-proj-opt.is-current { color: #0d9488; font-weight: 600; }

/* ── Project picker search ───────────────────────────────────── */
.dp-proj-search {
  width: 100%;
  border: 1px solid var(--border2);
  border-radius: var(--r6);
  padding: 7px 10px;
  font-size: .84rem;
  font-family: inherit;
  color: var(--txt);
  background: var(--surface2);
  outline: none;
}
.dp-proj-search:focus {
  border-color: #0d9488;
  background: var(--surface);
}
.dp-proj-list {
  max-height: 260px;
  overflow-y: auto;
  padding-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════
   MOBILE UX FIXES — FAB, swipe, overscroll, touch
════════════════════════════════════════════════════════════ */

/* Prevent double-tap zoom on buttons */
button, a { touch-action: manipulation; }

/* Prevent pull-to-refresh conflicting with scroll */
.page-content { overscroll-behavior-y: contain; }
.dash-task-list { overscroll-behavior-y: contain; }
.al-feed { overscroll-behavior-y: contain; }
.myt-table { overscroll-behavior-y: contain; }

/* Use dynamic viewport height (accounts for Safari toolbar) */
.app-wrap { min-height: 100dvh; }
.sidebar  { min-height: 100dvh; }

/* ── FAB — Floating Action Button (mobile only) ─────────────── */
.fab {
  display: none;
}
@media (max-width: 768px) {
  .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0d9488;
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(13,148,136,.4), 0 2px 4px rgba(0,0,0,.2);
    transition: transform .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .fab:active {
    transform: scale(0.93);
    box-shadow: 0 2px 8px rgba(13,148,136,.3);
  }
  .fab svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
  }
  /* Push content up so FAB doesn't cover last item */
  .page-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ── Swipe indicator on task panel ──────────────────────────── */
.dp-swipe-hint {
  display: none;
}
@media (max-width: 768px) {
  .detail-panel {
    border-radius: 16px 16px 0 0;
    top: auto !important;
    height: 92dvh;
    border-left: none;
    border-top: 0.5px solid var(--border);
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.32,.72,0,1);
  }
  .detail-panel.open {
    transform: translateY(0);
  }
  .dp-swipe-hint {
    display: flex;
    justify-content: center;
    padding: 10px 0 0;
    flex-shrink: 0;
  }
  .dp-swipe-hint::before {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border2);
  }
  .dp-overlay.open {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

/* ── Overview safe area fix ──────────────────────────────────── */
@media (display-mode: standalone) {
  #ov-settings-drawer {
    padding-top: env(safe-area-inset-top);
  }
}

/* ── Overview phases — scroll horizontally on mobile ─────────── */
@media (max-width: 600px) {
  .ov2-phases {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 4px;
  }
  .ov2-phases::-webkit-scrollbar { display: none; }
  .ov2-phase { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════
   BULK COMPLETE — selection mode styles
════════════════════════════════════════════════════════════ */
.bulk-selected {
  background: rgba(13,148,136,.15) !important;
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 2px rgba(13,148,136,.3) !important;
}

/* Pull to refresh animation */
#ptr-indicator svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   MORNING DIGEST BANNER
════════════════════════════════════════════════════════════ */
.mg-digest {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r10);
  margin-bottom: 16px;
  overflow: hidden;
  animation: alFadeIn .3s ease;
}
.mg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 0.5px solid var(--border);
}
.mg-greeting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--txt);
}
.mg-dismiss {
  width: 26px; height: 26px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt3);
  flex-shrink: 0;
  padding: 0;
  transition: all .12s;
}
.mg-dismiss:hover { background: var(--surface); color: var(--txt); }
.mg-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.mg-section {}
.mg-section-health { opacity: .8; }
.mg-section-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt3);
  margin-bottom: 8px;
}
.mg-pills { display: flex; gap: 5px; margin-left: 4px; }
.mg-pill {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}
.mg-pill-red   { background: rgba(239,68,68,.1);  color: #b91c1c; }
.mg-pill-teal  { background: rgba(13,148,136,.1); color: #0f766e; }
.mg-pill-grey  { background: var(--surface2);     color: var(--txt3); }
.mg-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: opacity .12s;
}
.mg-task:last-child { border-bottom: none; }
.mg-task:hover { opacity: .75; }
.mg-task-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mg-task-title {
  flex: 1;
  font-size: .84rem;
  font-weight: 400;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-task-due {
  font-size: .72rem;
  font-weight: 600;
  flex-shrink: 0;
}
.mg-due-red   { color: #e8384f; }
.mg-due-amber { color: #e8a020; }
.mg-all-clear {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--txt3);
  padding: 4px 0;
}
.mg-health-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mg-health-pill {
  font-size: .74rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--surface2);
  color: var(--txt3);
  border: 0.5px solid var(--border);
}

@media (max-width: 768px) {
  .mg-task-title { font-size: .82rem; }
  .mg-digest { border-radius: 0; margin: 0 -14px 16px; border-left: none; border-right: none; }
}

/* ── Task detail panel — breadcrumb ─────────────────────────── */
.dp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.dp-bc-item {
  font-size: .72rem;
  color: var(--txt4);
  font-weight: 500;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-bc-link {
  text-decoration: none;
  color: var(--txt3);
  transition: color .1s;
}
.dp-bc-link:hover { color: var(--txt); }
.dp-bc-sep {
  font-size: .72rem;
  color: var(--border2);
  flex-shrink: 0;
}

/* ── My Tasks — Chase indicator ──────────────────────────────── */
.myt-row.myt-chase {
  border-left: 2.5px solid #e8a020 !important;
  background: rgba(232,160,32,.03);
}
.myt-row.myt-chase:hover {
  background: rgba(232,160,32,.07) !important;
}
.myt-chase-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8a020;
  box-shadow: 0 0 0 2px rgba(232,160,32,.2);
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
  top: -1px;
}

/* ════════════════════════════════════════════════════════════
   EOD — Sidebar link + Mobile banner
════════════════════════════════════════════════════════════ */

/* Sidebar EOD link — subtle amber tint when active */
.sb-eod { color: var(--txt3) !important; }
.sb-eod.active,
.sb-eod:hover {
  color: #e8a020 !important;
  background: rgba(232,160,32,.08) !important;
}
.sb-eod svg { stroke: currentColor !important; }

/* Mobile EOD banner — fixed at bottom, above FAB */
.eod-mobile-banner {
  display: none;
}
@media (max-width: 768px) {
  .eod-mobile-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    background: rgba(17,17,16,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.5px solid rgba(232,160,32,.3);
    border-radius: 12px;
    padding: 12px 16px;
    color: #e8a020;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    z-index: 40;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    font-family: inherit;
  }
  .eod-mobile-banner span { flex: 1; }
  .eod-mobile-banner svg { flex-shrink: 0; stroke: #e8a020; fill: none; }
}





/* ════════════════════════════════════════════════════════════
   TASK ROW — Asana-style date chip + recurring icon
════════════════════════════════════════════════════════════ */

/* Date cell wrapper */
.tc-date-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* Due date chip — Asana style */
.tc-due-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 20px;
  white-space: nowrap;
  color: #8a8a85;
  background: transparent;
  transition: background .1s;
}
.tc-date-wrap:hover .tc-due-chip { background: rgba(0,0,0,.05); }
[data-theme="dark"] .tc-date-wrap:hover .tc-due-chip { background: rgba(255,255,255,.07); }

/* Calendar icon inside chip */
.tc-due-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Colour states — matching Asana exactly */
.tc-due-chip.overdue {
  color: #e8384f;
  background: #fff2f3;
}
[data-theme="dark"] .tc-due-chip.overdue {
  color: #ff6b6b;
  background: rgba(232,56,79,.12);
}
.tc-due-chip.today {
  color: #fd612c;
  background: #fff5f0;
}
[data-theme="dark"] .tc-due-chip.today {
  color: #ff8c5a;
  background: rgba(253,97,44,.12);
}
.tc-due-chip.soon {
  color: #0d9488;
  background: transparent;
}
.tc-due-chip.upcoming {
  color: #8a8a85;
  background: transparent;
}

/* Empty date — truly invisible, show calendar icon on row hover */
.tc-due-empty {
  display: none;
  align-items: center;
  color: #c8c8c2;
}
.tbl-row:hover .tc-due-empty {
  display: inline-flex;
}

/* Recurring — next_due shown in muted colour (not a manual deadline) */
.tc-due-chip.tc-due-recur {
  color: #8a8a85;
  background: transparent;
  opacity: .8;
}

/* Recurring icon */
.tc-recur-icon {
  display: inline-flex;
  align-items: center;
  color: #8a8a85;
  flex-shrink: 0;
}
.tc-recur-icon svg {
  width: 11px;
  height: 11px;
}
/* Teal when today, red when overdue */
.tc-due-chip.overdue ~ .tc-recur-icon { color: #e8384f; }
.tc-due-chip.today ~ .tc-recur-icon   { color: #fd612c; }





/* ════════════════════════════════════════════════════════════
   TASK TABLE — name column fix (table-layout:fixed set in show.php)
════════════════════════════════════════════════════════════ */
.lt-table .tc-name {
  min-width: 0 !important; /* override global 280px — fixed layout uses colgroup widths */
  overflow: hidden;
}
.lt-table .tc-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.lt-table .tc-title-inp,
.lt-table .tc-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}






/* ── Health module ─────────────────────────────────────────── */
.health-page {}
.health-header { padding: 20px 20px 0; background: var(--surface); }
.health-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.4rem;
  color: var(--txt);
}
.health-date { font-size: .8rem; color: var(--txt3); margin-top: 2px; }
.health-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: .5px solid var(--border);
  padding: 0 20px;
}
.health-tab {
  padding: 10px 14px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--txt3);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: all .1s;
}
.health-tab.active { color: var(--txt); border-bottom-color: var(--txt); font-weight: 600; }
.health-tab-content { display: none; }
.health-tab-content.active { display: block; }
.h-section { padding: 14px 20px; border-bottom: .5px solid var(--border); }
.h-section-title { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt4); margin-bottom: 8px; }
.h-streak-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface2); border-radius: 8px; }
.h-streak-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.h-streak-num { font-family: 'Instrument Serif', serif; font-size: 1.6rem; color: var(--txt); line-height: 1; }
.h-streak-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt4); }
.h-streak-div { width: 1px; height: 36px; background: var(--border2); }
.h-routine-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.h-routine-lbl { font-size: .72rem; color: var(--txt3); }
.h-routine-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.h-routine-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.h-group-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt4); padding: 8px 0 4px; }
.h-check-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: .5px solid var(--border); cursor: pointer; }
.h-check-item:last-of-type { border-bottom: none; }
.h-check-item.done .h-item-name { text-decoration: line-through; color: var(--txt4); }
.h-item-name { font-size: .86rem; color: var(--txt2); flex: 1; }
.h-item-freq { font-size: .68rem; color: var(--txt4); }
.h-chk { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.h-chk svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 2.5; }
.h-chk.done { background: var(--accent); border-color: var(--accent); }

/* N/A state — visually distinct from done */
.h-check-item.na { opacity: .55; cursor: default; }
.h-check-item.na .h-item-name { text-decoration: line-through; color: var(--txt4); font-style: italic; }
.h-chk.na {
  background: var(--surface2);
  border: 1.5px dashed var(--border2);
  color: var(--txt4);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
/* N/A button — appears on hover */
.h-na-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: .62rem;
  font-weight: 600;
  color: var(--txt4);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: border-color .1s, color .1s, background .1s;
  letter-spacing: .02em;
  margin-left: auto;
}
.h-na-btn:hover { border-color: var(--txt3); color: var(--txt2); background: var(--surface2); }
.h-check-item.na .h-na-btn {
  border-color: var(--accent);
  color: var(--accent);
  font-size: .68rem;
}

/* Date selector for logging previous days */
.hcl-date-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 0 10px;
  margin-bottom: 4px;
  border-bottom: .5px solid var(--border);
}
.hcl-date-lbl { font-size: .72rem; color: var(--txt4); }
.hcl-date-inp {
  font-size: .78rem;
  padding: 3px 8px;
  border: 1px solid var(--border2);
  border-radius: 5px;
  background: var(--surface2);
  color: var(--txt);
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.hcl-date-inp:focus { border-color: var(--accent); }
.h-session-card { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); margin-bottom: 8px; }
.h-session-top { display: flex; align-items: center; gap: 8px; }
.h-session-type { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: rgba(13,148,136,.1); color: var(--accent); }
.h-session-name { font-size: .82rem; color: var(--txt2); font-weight: 500; flex: 1; }
.h-session-dur { font-size: .72rem; color: var(--txt4); }
.h-session-notes { font-size: .75rem; color: var(--txt3); margin-top: 4px; }
.h-log-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; border: 1.5px dashed var(--border2); background: none; cursor: pointer; font-size: .82rem; color: var(--txt3); font-family: inherit; width: 100%; margin-bottom: 6px; transition: all .15s; }
.h-log-btn:hover { border-color: var(--accent); color: var(--accent); }
.h-log-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.h-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.h-metric-card { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.h-metric-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt4); margin-bottom: 3px; }
.h-metric-input { width: 100%; border: none; background: none; font-size: 1.1rem; font-weight: 600; color: var(--txt); outline: none; font-family: 'DM Mono', monospace; }
.h-metric-unit { font-size: .68rem; color: var(--txt4); margin-top: 1px; }
.h-breathing-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: .5px solid var(--border); margin-top: 4px; }
.h-breathing-label { font-size: .82rem; color: var(--txt2); }
.h-breathing-btns { display: flex; gap: 6px; }
.h-breath-btn { padding: 4px 14px; border-radius: 6px; border: 1px solid var(--border2); background: none; cursor: pointer; font-size: .78rem; font-family: inherit; color: var(--txt3); transition: all .15s; }
.h-breath-btn.active-yes { background: rgba(232,56,79,.1); color: var(--red); border-color: rgba(232,56,79,.3); }
.h-breath-btn.active-no  { background: rgba(13,148,136,.1); color: var(--accent); border-color: rgba(13,148,136,.3); }
.h-save-btn { width: 100%; padding: 10px; border-radius: 8px; background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: .82rem; font-weight: 600; font-family: inherit; margin-top: 10px; }
.h-settings-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: .5px solid var(--border); font-size: .82rem; }
.h-settings-name { flex: 1; color: var(--txt2); }
.h-settings-group { font-size: .7rem; color: var(--txt4); }
.h-settings-freq { font-size: .68rem; color: var(--amber); }

/* ── Log session modal muscle chips ───────────────────────── */
.h-combo-chips, .h-muscle-chips, .h-cardio-chips, .h-dur-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.h-combo-chip, .h-muscle-chip, .h-cardio-chip, .h-dur-chip {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  font-size: .75rem;
  color: var(--txt3);
  cursor: pointer;
  font-family: inherit;
  transition: all .1s;
}
.h-combo-chip.active, .h-muscle-chip.active, .h-cardio-chip.active, .h-dur-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.h-muscle-group-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--txt4); margin: 10px 0 5px; }
.h-dur-custom { width: 80px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface2); font-size: .75rem; color: var(--txt); outline: none; font-family: inherit; }

/* ── FAB ───────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  z-index: 50;
  transition: transform .15s, box-shadow .15s;
}
.fab svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; }
.fab:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
@media(max-width: 768px) { .fab { display: flex; } }

/* ── Responsive tweaks ─────────────────────────────────────── */
@media(max-width: 768px) {
  .dt-row { padding: 10px 16px; }
  .briefing-bar { padding: 9px 16px; }
  .health-ring-bar { padding: 10px 16px; }
  .dt-chase-hdr { padding: 7px 16px; }
  .dash-task-tabs .dash-tab { padding: 9px 12px; }
  .h-section { padding: 12px 16px; }
  .page-header-bar { padding: 16px 16px 12px; }
  .wr-card { border-right: none; }
}

/* ── Detail panel chase toggle ─────────────────────────────── */
.dp-chase-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-family: inherit;
  color: var(--txt3);
  transition: all .15s;
  white-space: nowrap;
  font-weight: 500;
}
.dp-chase-toggle:hover {
  border-color: rgba(232,160,32,.5);
  background: rgba(232,160,32,.06);
  color: var(--txt2);
}
.dp-chase-toggle.on {
  background: rgba(232,160,32,.12);
  border-color: rgba(232,160,32,.4);
  color: #92650a;
}
.dp-chase-on { font-weight: 700; }
.dp-chase-off { color: var(--txt4); font-weight: 400; }

/* ── FAB visible on mobile ─────────────────────────────────── */
.fab { display: none !important; } /* hidden - toolbar has Add task */

/* ── Health events (global, for history tab) ───────────────── */
.he-event-timeline {
  position: relative;
  padding-left: 20px;
}
.he-event-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.he-tl-item {
  position: relative;
  padding: 10px 0 10px 16px;
  border-bottom: .5px solid var(--border);
}
.he-tl-item:last-child { border-bottom: none; }
.he-tl-dot {
  position: absolute;
  left: -17px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

/* ── Book detail panel ─────────────────────────────────────── */
.dp-book-panel {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: .5px solid var(--border);
  background: var(--surface);
}
.dp-book-cover-wrap { flex-shrink: 0; }
.dp-book-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-book-progress-section {
  padding: 10px 16px 14px;
  border-bottom: .5px solid var(--border);
  background: var(--surface);
}
.dp-star-rating { display: flex; gap: 2px; align-items: center; }
.dp-star { color: var(--txt4); transition: color .1s; }
.dp-star.lit { color: var(--amber); }
.dp-star:hover { color: var(--amber); }

/* ── Checkbox touch target isolation ───────────────────────── */
.dt-row { isolation: isolate; }
.dt-row .k-chk { z-index: 2; position: relative; }
.dt-row .dt-body { padding-left: 4px; }

/* ── New task modal success state ──────────────────────────── */
#new-task-modal .btn-primary[style*="var(--accent)"] {
  background: var(--accent) !important;
}

.hm-spark {
  background: var(--surface2);
  border-radius: 6px;
  padding: 6px 8px;
}
.hm-spark svg { width: 100%; height: 36px; display: block; overflow: visible; }
.hm-spark-lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--txt4); margin-bottom: 2px;
}
.hm-spark-val { font-size: .78rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.hm-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.hm-table th {
  text-align: left; padding: 5px 8px;
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--txt4);
  border-bottom: 1.5px solid var(--border2);
}
.hm-table td { padding: 5px 8px; border-bottom: .5px solid var(--border); color: var(--txt2); }
.hm-month-row td {
  background: var(--surface2); color: var(--txt4);
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 4px 8px;
}


/* ── Health Metrics sparklines (Today tab) ─────────────────── */
.hm-spark-section {}
.hm-spark-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}
@media(max-width:540px){ .hm-spark-grid { grid-template-columns: repeat(2,1fr); } }
.hm-spark-card {
  background: var(--surface2);
  border-radius: 8px;
  padding: 8px 10px;
}
.hm-spark-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.hm-spark-lbl2 { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--txt4); }
.hm-spark-val2 { font-size: .9rem; font-weight: 700; }
.hm-spark-unit { font-size: .65rem; font-weight: 400; color: var(--txt4); margin-left: 2px; }

/* ── Health Metrics log form (Metrics tab) ─────────────────── */
.hm-log-form { margin-bottom: 4px; }
.hm-log-row {
  display: grid;
  grid-template-columns: 140px repeat(4,1fr) auto;
  gap: 10px;
  align-items: end;
}
/* Tablet: 3 columns */
@media(max-width:860px) and (min-width:541px) {
  .hm-log-row { grid-template-columns: 1fr 1fr 1fr; }
  .hm-log-field-btn { grid-column: span 3; text-align: right; }
  .hm-log-field-btn button { width: auto; }
}
/* Mobile: clean card list — label left, large input right, Save full width at bottom */
@media(max-width:540px) {
  .hm-log-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .hm-log-field {
    flex-direction: row;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    min-height: 52px;
  }
  .hm-log-field:last-child { border-bottom: none; }
  .hm-log-field .hm-lbl {
    flex: 0 0 100px;
    margin-bottom: 0;
    font-size: .78rem;
    color: var(--txt2);
  }
  .hm-log-field .hm-inp {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    color: var(--txt);
    min-width: 0;
    -webkit-appearance: none;
  }
  .hm-log-field .hm-inp:focus { outline: none; color: var(--accent); }
  .hm-log-field .hm-inp::placeholder { color: var(--txt4); font-weight: 400; font-size: .9rem; }
  /* Date field — hide it on mobile, auto-use today */
  .hm-log-field:first-child { display: none; }
  .hm-log-field-btn {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .hm-log-field-btn button {
    width: 100%;
    padding: 13px;
    font-size: .9rem;
    border-radius: 8px;
  }
  /* Remove the empty label spacer */
  .hm-log-field-btn .hm-lbl { display: none; }
}
.hm-log-field { display: flex; flex-direction: column; gap: 4px; }
.hm-pagination { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.hm-page-btn {
  padding: 4px 10px; border-radius: 5px; font-size: .78rem;
  border: 1px solid var(--border2); color: var(--txt3);
  text-decoration: none; cursor: pointer;
  transition: all .1s;
}
.hm-page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm-page-btn:hover:not(.active) { border-color: var(--txt3); color: var(--txt); }

/* ── Health module ─────────────────────────────────────────── */
.health-page {}
.health-header { padding: 20px 20px 0; background: var(--surface); }
.health-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.4rem;
  color: var(--txt);
}
.health-date { font-size: .8rem; color: var(--txt3); margin-top: 2px; }
.health-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: .5px solid var(--border);
  padding: 0 20px;
}
.health-tab {
  padding: 10px 14px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--txt3);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: all .1s;
}
.health-tab.active { color: var(--txt); border-bottom-color: var(--txt); font-weight: 600; }
.health-tab-content { display: none; }
.health-tab-content.active { display: block; }
.h-section { padding: 14px 20px; border-bottom: .5px solid var(--border); }
.h-section-title { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt4); margin-bottom: 8px; }
.h-streak-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface2); border-radius: 8px; }
.h-streak-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.h-streak-num { font-family: 'Instrument Serif', serif; font-size: 1.6rem; color: var(--txt); line-height: 1; }
.h-streak-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt4); }
.h-streak-div { width: 1px; height: 36px; background: var(--border2); }
.h-routine-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.h-routine-lbl { font-size: .72rem; color: var(--txt3); }
.h-routine-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.h-routine-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.h-group-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt4); padding: 8px 0 4px; }
.h-check-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: .5px solid var(--border); cursor: pointer; }
.h-check-item:last-of-type { border-bottom: none; }
.h-check-item.done .h-item-name { text-decoration: line-through; color: var(--txt4); }
.h-item-name { font-size: .86rem; color: var(--txt2); flex: 1; }
.h-item-freq { font-size: .68rem; color: var(--txt4); }
.h-chk { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.h-chk svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 2.5; }
.h-chk.done { background: var(--accent); border-color: var(--accent); }

/* N/A state — visually distinct from done */
.h-check-item.na { opacity: .55; cursor: default; }
.h-check-item.na .h-item-name { text-decoration: line-through; color: var(--txt4); font-style: italic; }
.h-chk.na {
  background: var(--surface2);
  border: 1.5px dashed var(--border2);
  color: var(--txt4);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
/* N/A button — appears on hover */
.h-na-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: .62rem;
  font-weight: 600;
  color: var(--txt4);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: border-color .1s, color .1s, background .1s;
  letter-spacing: .02em;
  margin-left: auto;
}
.h-na-btn:hover { border-color: var(--txt3); color: var(--txt2); background: var(--surface2); }
.h-check-item.na .h-na-btn {
  border-color: var(--accent);
  color: var(--accent);
  font-size: .68rem;
}

/* Date selector for logging previous days */
.hcl-date-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 0 10px;
  margin-bottom: 4px;
  border-bottom: .5px solid var(--border);
}
.hcl-date-lbl { font-size: .72rem; color: var(--txt4); }
.hcl-date-inp {
  font-size: .78rem;
  padding: 3px 8px;
  border: 1px solid var(--border2);
  border-radius: 5px;
  background: var(--surface2);
  color: var(--txt);
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.hcl-date-inp:focus { border-color: var(--accent); }
.h-session-card { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); margin-bottom: 8px; }
.h-session-top { display: flex; align-items: center; gap: 8px; }
.h-session-type { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: rgba(13,148,136,.1); color: var(--accent); }
.h-session-name { font-size: .82rem; color: var(--txt2); font-weight: 500; flex: 1; }
.h-session-dur { font-size: .72rem; color: var(--txt4); }
.h-session-notes { font-size: .75rem; color: var(--txt3); margin-top: 4px; }
.h-log-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; border: 1.5px dashed var(--border2); background: none; cursor: pointer; font-size: .82rem; color: var(--txt3); font-family: inherit; width: 100%; margin-bottom: 6px; transition: all .15s; }
.h-log-btn:hover { border-color: var(--accent); color: var(--accent); }
.h-log-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.h-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.h-metric-card { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.h-metric-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt4); margin-bottom: 3px; }
.h-metric-input { width: 100%; border: none; background: none; font-size: 1.1rem; font-weight: 600; color: var(--txt); outline: none; font-family: 'DM Mono', monospace; }
.h-metric-unit { font-size: .68rem; color: var(--txt4); margin-top: 1px; }
.h-breathing-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: .5px solid var(--border); margin-top: 4px; }
.h-breathing-label { font-size: .82rem; color: var(--txt2); }
.h-breathing-btns { display: flex; gap: 6px; }
.h-breath-btn { padding: 4px 14px; border-radius: 6px; border: 1px solid var(--border2); background: none; cursor: pointer; font-size: .78rem; font-family: inherit; color: var(--txt3); transition: all .15s; }
.h-breath-btn.active-yes { background: rgba(232,56,79,.1); color: var(--red); border-color: rgba(232,56,79,.3); }
.h-breath-btn.active-no  { background: rgba(13,148,136,.1); color: var(--accent); border-color: rgba(13,148,136,.3); }
.h-save-btn { width: 100%; padding: 10px; border-radius: 8px; background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: .82rem; font-weight: 600; font-family: inherit; margin-top: 10px; }
.h-settings-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: .5px solid var(--border); font-size: .82rem; }
.h-settings-name { flex: 1; color: var(--txt2); }
.h-settings-group { font-size: .7rem; color: var(--txt4); }
.h-settings-freq { font-size: .68rem; color: var(--amber); }

/* ── Log session modal muscle chips ───────────────────────── */
.h-combo-chips, .h-muscle-chips, .h-cardio-chips, .h-dur-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.h-combo-chip, .h-muscle-chip, .h-cardio-chip, .h-dur-chip {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  font-size: .75rem;
  color: var(--txt3);
  cursor: pointer;
  font-family: inherit;
  transition: all .1s;
}
.h-combo-chip.active, .h-muscle-chip.active, .h-cardio-chip.active, .h-dur-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.h-muscle-group-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--txt4); margin: 10px 0 5px; }
.h-dur-custom { width: 80px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface2); font-size: .75rem; color: var(--txt); outline: none; font-family: inherit; }

/* ── FAB ───────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  z-index: 50;
  transition: transform .15s, box-shadow .15s;
}
.fab svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; }
.fab:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
@media(max-width: 768px) { .fab { display: flex; } }

/* ── Responsive tweaks ─────────────────────────────────────── */
@media(max-width: 768px) {
  .dt-row { padding: 10px 16px; }
  .briefing-bar { padding: 9px 16px; }
  .health-ring-bar { padding: 10px 16px; }
  .dt-chase-hdr { padding: 7px 16px; }
  .dash-task-tabs .dash-tab { padding: 9px 12px; }
  .h-section { padding: 12px 16px; }
  .page-header-bar { padding: 16px 16px 12px; }
  .wr-card { border-right: none; }
}

/* ── Detail panel chase toggle ─────────────────────────────── */
.dp-chase-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-family: inherit;
  color: var(--txt3);
  transition: all .15s;
  white-space: nowrap;
  font-weight: 500;
}
.dp-chase-toggle:hover {
  border-color: rgba(232,160,32,.5);
  background: rgba(232,160,32,.06);
  color: var(--txt2);
}
.dp-chase-toggle.on {
  background: rgba(232,160,32,.12);
  border-color: rgba(232,160,32,.4);
  color: #92650a;
}
.dp-chase-on { font-weight: 700; }
.dp-chase-off { color: var(--txt4); font-weight: 400; }

/* ── FAB visible on mobile ─────────────────────────────────── */
.fab { display: none !important; } /* hidden - toolbar has Add task */

/* ── Health events (global, for history tab) ───────────────── */
.he-event-timeline {
  position: relative;
  padding-left: 20px;
}
.he-event-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.he-tl-item {
  position: relative;
  padding: 10px 0 10px 16px;
  border-bottom: .5px solid var(--border);
}
.he-tl-item:last-child { border-bottom: none; }
.he-tl-dot {
  position: absolute;
  left: -17px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

/* ── Book detail panel ─────────────────────────────────────── */
.dp-book-panel {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: .5px solid var(--border);
  background: var(--surface);
}
.dp-book-cover-wrap { flex-shrink: 0; }
.dp-book-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-book-progress-section {
  padding: 10px 16px 14px;
  border-bottom: .5px solid var(--border);
  background: var(--surface);
}
.dp-star-rating { display: flex; gap: 2px; align-items: center; }
.dp-star { color: var(--txt4); transition: color .1s; }
.dp-star.lit { color: var(--amber); }
.dp-star:hover { color: var(--amber); }

/* ── Checkbox touch target isolation ───────────────────────── */
.dt-row { isolation: isolate; }
.dt-row .k-chk { z-index: 2; position: relative; }
.dt-row .dt-body { padding-left: 4px; }

/* ── New task modal success state ──────────────────────────── */
#new-task-modal .btn-primary[style*="var(--accent)"] {
  background: var(--accent) !important;
}

/* ── Health metrics log form fields ──────────────────────────── */
.hm-lbl {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt4);
  margin-bottom: 4px;
}
.hm-unit { font-weight: 400; text-transform: none; letter-spacing: 0; }
.hm-inp {
  width: 100%;
  padding: 7px 10px;
  font-size: .88rem;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--txt);
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.hm-inp:focus { border-color: var(--accent); }
.hm-inp::-webkit-inner-spin-button,
.hm-inp::-webkit-outer-spin-button { -webkit-appearance: none; }
.hm-log-field-btn { align-self: flex-end; }

/* ── Smart Task Sheet ─────────────────────────────────────────── */
#ts-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:300;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
#task-sheet{
  position:fixed;bottom:0;left:0;right:0;
  z-index:301;background:var(--surface);
  border-radius:20px 20px 0 0;
  max-height:75vh;          /* cap at 75% — not full screen */
  flex-direction:column;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.15);
}
#task-sheet.ts-open{transform:translateY(0)}

@media(min-width:600px){
  #task-sheet{
    bottom:auto;left:50%;right:auto;top:50%;
    width:440px;max-width:calc(100vw - 40px);
    border-radius:14px;
    transform:translate(-50%,-48%) scale(.96);
    opacity:0;pointer-events:none;
    transition:transform .2s ease,opacity .16s ease;
    max-height:80vh;
  }
  #task-sheet.ts-open{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;pointer-events:auto;
  }
}

.ts-handle-row{display:flex;justify-content:center;padding:10px 0 4px;flex-shrink:0}
.ts-handle-bar{width:36px;height:4px;border-radius:2px;background:var(--border2)}
@media(min-width:600px){.ts-handle-row{display:none}}

.ts-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.ts-head-title{font-size:.92rem;font-weight:700;color:var(--txt)}
.ts-close-btn{
  width:30px;height:30px;border-radius:8px;background:var(--surface2);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--txt3);transition:all .12s;
}
.ts-close-btn:hover{background:var(--bg);color:var(--txt)}
.ts-close-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}

.ts-body{
  padding:10px 16px 6px;display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;flex:1;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.ts-foot{
  display:flex;gap:8px;padding:8px 16px;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  border-top:1px solid var(--border);flex-shrink:0;background:var(--surface);
}
.ts-btn-cancel{
  padding:12px 16px;border:1.5px solid var(--border2);border-radius:12px;
  background:none;color:var(--txt3);font-size:.86rem;font-weight:500;
  cursor:pointer;font-family:inherit;
}
.ts-btn-add{
  flex:1;padding:12px;border:none;border-radius:12px;
  background:var(--accent);color:#fff;font-size:.9rem;font-weight:700;
  cursor:pointer;font-family:inherit;box-shadow:0 4px 12px rgba(14,165,233,.28);
}
.ts-btn-add:disabled{opacity:.6}

.ts-field{display:flex;flex-direction:column;gap:6px}
.ts-lbl{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt4)}

/* Title */
.ts-title-inp{
  width:100%;font-size:1rem;font-weight:500;padding:11px 14px;
  border:1.5px solid var(--border2);border-radius:12px;
  background:var(--surface2);color:var(--txt);outline:none;
  transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box;
}
.ts-title-inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}
.ts-title-inp::placeholder{color:var(--txt4);font-weight:400}
.ts-title-inp.ts-title-error{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}

/* Chips container */
.ts-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Base chip */
.ts-chip{
  padding:5px 11px;border-radius:20px;font-size:.77rem;font-weight:500;
  border:1.5px solid var(--border2);background:var(--surface2);color:var(--txt3);
  cursor:pointer;white-space:nowrap;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;transition:all .12s;
}

/* Project chips — uniform indigo style matching mockup */
.ts-proj-chip{
  color:rgba(99,102,241,.8);
  border-color:rgba(99,102,241,.2);
  background:rgba(99,102,241,.06);
  opacity:.7;
}
.ts-proj-chip.ts-proj-chip-on{
  color:#6366f1;border-color:#6366f1;
  background:rgba(99,102,241,.12);
  font-weight:700;opacity:1;border-width:2px;
}
.ts-proj-chip:not(.ts-proj-chip-on):hover{opacity:.9}
.ts-proj-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;
}

/* Search chip */
.ts-chip-search{
  border-style:dashed;color:var(--txt4);font-size:.72rem;
  background:none;
}
.ts-chip-search:hover{color:var(--txt3);border-color:var(--txt3)}

/* Section chips */
.ts-sec-chip{color:var(--txt3);border-color:var(--border2);background:var(--surface2);font-size:.74rem}
.ts-sec-chip.ts-chip-on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);font-weight:600}

/* Due date chips — each colour */
.ts-chip-red   {color:#ef4444;border-color:rgba(239,68,68,.2);background:rgba(239,68,68,.06)}
.ts-chip-amber {color:#d97706;border-color:rgba(245,158,11,.2);background:rgba(245,158,11,.06)}
.ts-chip-blue  {color:#0ea5e9;border-color:rgba(14,165,233,.2);background:rgba(14,165,233,.06)}
.ts-chip-green {color:#00c853;border-color:rgba(0,200,83,.2);background:rgba(0,200,83,.06)}
.ts-chip-indigo{color:#6366f1;border-color:rgba(99,102,241,.2);background:rgba(99,102,241,.06)}
.ts-chip-grey  {color:#6b7280;border-color:rgba(107,114,128,.2);background:rgba(107,114,128,.06)}
.ts-chip-none  {color:var(--txt3);border-color:var(--border2);background:var(--surface2)}

/* Active state */
.ts-chip.ts-chip-on{font-weight:700;border-width:2px}
.ts-chip-red.ts-chip-on   {background:rgba(239,68,68,.12);border-color:#ef4444}
.ts-chip-amber.ts-chip-on {background:rgba(245,158,11,.14);border-color:#f59e0b}
.ts-chip-blue.ts-chip-on  {background:rgba(14,165,233,.12);border-color:#0ea5e9}
.ts-chip-green.ts-chip-on {background:rgba(0,200,83,.14);border-color:#00c853}
.ts-chip-indigo.ts-chip-on{background:rgba(99,102,241,.12);border-color:#6366f1}
.ts-chip-grey.ts-chip-on  {background:rgba(107,114,128,.1);border-color:#6b7280}
.ts-chip-none.ts-chip-on  {background:var(--surface2);border-color:var(--txt3);color:var(--txt2)}

/* Search input */
.ts-search-inp{
  width:100%;font-size:.9rem;padding:10px 12px 10px 32px;
  border:1.5px solid var(--accent);border-radius:10px;
  background:var(--surface);color:var(--txt);outline:none;
  box-sizing:border-box;font-family:inherit;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.ts-search-icon{
  position:absolute;left:30px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:2;pointer-events:none;
}
.ts-dropdown{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.18);
  z-index:500;max-height:220px;overflow-y:auto;
}
/* Dropup — appears above the search input */
.ts-dropup{
  top:auto;
  bottom:calc(100% + 4px);
  box-shadow:0 -8px 32px rgba(0,0,0,.18);
}
.ts-dd-item{
  padding:9px 12px;cursor:pointer;font-size:.84rem;color:var(--txt);
  display:flex;align-items:center;gap:8px;border-bottom:.5px solid var(--border);
}
.ts-dd-item:hover{background:var(--surface2)}
.ts-dd-item:last-child{border-bottom:none}
.ts-dd-port{font-size:.7rem;color:var(--txt4);flex-shrink:0}

/* Date picker */
.ts-date-inp{
  font-size:.78rem;padding:5px 9px;
  border:1px solid var(--border2);border-radius:20px;
  background:var(--surface2);color:var(--txt);cursor:pointer;outline:none;font-family:inherit;
}

/* Assignee avatars */
.ts-result-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;cursor:pointer;
  font-size:.86rem;color:var(--txt);
  border-bottom:.5px solid var(--border);
}
.ts-result-item:last-child{border-bottom:none}
.ts-result-item:hover,.ts-result-item:active{background:var(--surface2)}
.ts-av-chips{gap:8px}
.ts-av{
  width:32px;height:32px;border-radius:50%;
  font-size:.65rem;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;border:2.5px solid transparent;
  transition:all .15s;font-family:inherit;background:none;
}
.ts-av:hover{transform:scale(1.1)}
.ts-av.ts-av-on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ts-av-lbl{font-size:.74rem;color:var(--txt3)}

/* More toggle */
.ts-more-toggle{
  display:flex;align-items:center;gap:5px;
  font-size:.79rem;font-weight:500;color:var(--txt4);
  cursor:pointer;padding:6px 0;border-top:1px solid var(--border);
}
.ts-more-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .2s}
.ts-more-toggle:hover{color:var(--txt3)}

/* Day-of-week chips */
.ts-dow-chip{
  width:28px;height:28px;border-radius:50%;font-size:.72rem;font-weight:600;
  border:1.5px solid var(--border2);background:var(--surface2);color:var(--txt3);
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
}
.ts-dow-chip.ts-chip-on{background:var(--accent);border-color:var(--accent);color:#fff}

/* Desc / freq */
.ts-desc-ta{
  width:100%;font-size:.86rem;padding:9px 12px;
  border:1px solid var(--border2);border-radius:9px;
  background:var(--surface2);color:var(--txt);
  resize:vertical;outline:none;font-family:inherit;box-sizing:border-box;
}
.ts-desc-ta:focus{border-color:var(--accent)}
.ts-freq-sel{
  font-size:.84rem;padding:7px 10px;
  border:1px solid var(--border2);border-radius:9px;
  background:var(--surface2);color:var(--txt);outline:none;font-family:inherit;
}