/* ============================================================
   DDC WORK HUB · Stylesheet
   ============================================================ */

/* ------------------------------------------------------------
   NIGHT DECK
   Dark is the app's real ground, not a fallback. The colour aura
   lives on the body, surfaces are translucent white over it, and
   orange is structural rather than decorative.

   There is no light theme. If one is ever wanted, set
   data-theme="light" on <html> and fill in the block at the end
   of this file. Nothing here depends on prefers-color-scheme,
   so a laptop in light mode still gets the dark app.
   ------------------------------------------------------------ */

:root {
  --bg: #0A0B10;
  --bg-deep: #07080C;

  /* Surfaces are white at low opacity so the aura shows through. */
  --card: rgba(255, 255, 255, 0.05);
  --card-hi: rgba(255, 255, 255, 0.075);
  --card-solid: #14161F;

  --sidebar-bg: rgba(0, 0, 0, 0.30);
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: rgba(253, 106, 2, 0.20);

  --text-primary: #F4F5FA;
  --text-secondary: #A7ABC0;
  --text-muted: #6E7389;
  --text-on-dark: rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.54);

  /* Brand orange, now with the gradient and the glow it needs to
     read as the primary action on a dark ground. */
  --accent: #FD6A02;
  --accent-2: #FFB020;
  --accent-hover: #FF7D1F;
  --accent-soft: rgba(253, 106, 2, 0.14);
  --accent-grad: linear-gradient(135deg, #FD6A02, #FFB020);
  --glow: 0 8px 22px -7px rgba(253, 106, 2, 0.55);
  --violet: #7C5CFF;
  --violet-grad: linear-gradient(135deg, #7C5CFF, #A78BFA);

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --input-bg: rgba(255, 255, 255, 0.045);
  --input-border: rgba(255, 255, 255, 0.14);

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 26px 60px -26px rgba(0, 0, 0, 0.92);

  --radius-sm: 10px;
  --radius: 15px;
  --radius-lg: 20px;

  /* Saturated, so colour carries meaning on its own. */
  --green: #2DE0A5;
  --green-bg: rgba(45, 224, 165, 0.14);
  --amber: #FFB020;
  --amber-bg: rgba(255, 176, 32, 0.15);
  --red: #FF4D6D;
  --red-bg: rgba(255, 77, 109, 0.15);
  --blue: #22D3EE;
  --blue-bg: rgba(34, 211, 238, 0.14);

  /* Washes and glass, named rather than written inline so the
     light theme at the end of this file can redefine them. */
  --dim-1: rgba(255, 255, 255, 0.022);
  --dim-2: rgba(255, 255, 255, 0.04);
  --dim-3: rgba(255, 255, 255, 0.07);
  --glass-bar: rgba(10, 11, 16, 0.55);
  --glass-bar-strong: rgba(10, 11, 16, 0.82);
  --glass-panel: rgba(20, 22, 31, 0.94);
  --glass-panel-soft: rgba(20, 22, 31, 0.78);
  --scrim: rgba(6, 7, 11, 0.72);
  --scroll: rgba(255, 255, 255, 0.14);
  --scroll-hi: rgba(255, 255, 255, 0.24);
  --focus: #FFB020;

  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --sidebar-w: 232px;
  --topbar-h: 60px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- LOGIN ---------- */
.auth-screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(46, 68, 150, 0.18), transparent 60%),
    radial-gradient(700px 420px at 100% 105%, rgba(253, 106, 2, 0.14), transparent 62%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 364px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px 30px 26px;
}
/* The lockup is a stacked one, mark over wordmark over tagline, so
   it is tall as well as wide. At 186px it filled most of a 320px
   content column and read as a poster with a form underneath. The
   brand block is centred so the card has a single axis: the field
   labels are left aligned by necessity, everything else is not. */
.auth-brand { margin-bottom: 24px; text-align: center; }
.auth-logo { display: block; width: 128px; height: auto; max-width: 100%; margin: 0 auto; }
.auth-sub {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  color: var(--text-secondary); letter-spacing: 0.16em; text-transform: uppercase;
  margin-top: 10px;
}

/* The app is dark, so the white wordmark is the one that shows.
   The black one stays in the markup for a future light theme. */
.on-light { display: none; }
.on-dark  { display: block; }
:root[data-theme="light"] .on-light { display: block; }
:root[data-theme="light"] .on-dark  { display: none; }
.auth-error {
  background: var(--red-bg); color: var(--red);
  border: 1px solid rgba(201, 53, 53, 0.2);
  border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 12.5px; line-height: 1.45;
  margin-bottom: 13px;
}
/* Left to the full card width this breaks "sign-up" across two
   lines with a hyphen, which reads as a typo. */
.auth-foot {
  font-size: 11.5px; color: var(--text-muted); text-align: center;
  margin-top: 15px; line-height: 1.5;
  max-width: 30ch; margin-left: auto; margin-right: auto;
  hyphens: none; -webkit-hyphens: none;
}

/* ---------- LAYOUT ---------- */
.app { display: flex; height: 100%; width: 100%; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  height: 100%; z-index: 120;
}
/* The logo file has almost no margin of its own, the circle sits
   4px from the top of its canvas. So the breathing room has to
   come from here or it reads as clipped. */
.sidebar-brand {
  padding: 22px 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sidebar-logo { display: block; width: 122px; height: auto; max-width: 100%; }
.sidebar-nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  cursor: pointer; border: none; background: none;
  width: 100%; text-align: left;
  color: var(--text-on-dark-muted);
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--sidebar-hover); color: var(--text-on-dark); }
.nav-item.active { background: var(--sidebar-active); color: #fff; }
.nav-item svg { flex-shrink: 0; }
.nav-count {
  margin-left: auto; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, 0.12); color: var(--text-on-dark);
  padding: 1px 7px; border-radius: 100px;
}

.sidebar-foot { padding: 12px 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.who { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.who-avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.who-text { min-width: 0; }
.who-name { font-size: 13px; font-weight: 500; color: var(--text-on-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: 10.5px; color: var(--text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-logout {
  width: 100%; padding: 7px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.06); color: var(--text-on-dark-muted);
  border: none; cursor: pointer; font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.btn-logout:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.topbar {
  height: var(--topbar-h); background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  padding: 0 22px; flex-shrink: 0;
}
.topbar-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; }
.content { flex: 1; overflow-y: auto; padding: 22px; min-height: 0; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: 7px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; transition: background .15s, color .15s, border-color .15s;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--input-bg); color: var(--text-primary); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b02d2d; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; padding: 10px; }
.btn-icon {
  padding: 5px; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, border-color .15s; line-height: 1;
}
.btn-icon:hover { color: var(--text-primary); }
.btn-icon.danger { color: var(--red); }
.btn-icon.danger:hover { background: var(--red-bg); }

/* ---------- CARDS ---------- */
.card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.card-header {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.card-header h2 { font-family: var(--font-display); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-value.sm { font-size: 18px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }

.client-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 16px; box-shadow: var(--shadow);
  transition: box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column;
}
.client-card:hover { box-shadow: var(--shadow-md); border-color: rgba(46, 109, 212, 0.22); }
.client-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.client-type { font-size: 12px; color: var(--text-secondary); }
.client-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 11px; margin-top: auto; border-top: 1px solid var(--border);
}
.client-line { font-size: 12px; color: var(--text-secondary); margin-top: 6px; display: flex; align-items: center; gap: 5px; }

/* ---------- BADGES ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-grey { background: var(--input-bg); color: var(--text-secondary); }

/* ---------- TASKS ---------- */
.task-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-check {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--input-border); border-radius: 5px;
  cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s; padding: 0;
}
.task-check.done { background: var(--green); border-color: var(--green); }
.task-check.done::after {
  content: ''; width: 4px; height: 8px; display: block;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; overflow-wrap: anywhere; }
.task-title.done { text-decoration: line-through; color: var(--text-muted); }
.task-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.task-meta-tag { font-size: 11.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.task-meta-tag.overdue { color: var(--red); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.p-high { background: var(--red); }
.p-medium { background: var(--amber); }
.p-low { background: var(--green); }

/* ---------- DELIVERABLES ---------- */
.month-nav { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; }
.month-label { font-family: var(--font-display); font-size: 14px; font-weight: 600; min-width: 92px; text-align: center; }
.month-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 3px 5px; display: flex; align-items: center; border-radius: 5px; }
.month-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--input-bg); }
.month-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ---------- TABLES ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  background: var(--input-bg); white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- VAULT ---------- */
.warn-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--amber-bg); border: 1px solid rgba(200, 127, 0, 0.22);
  border-radius: 7px; padding: 10px 14px; margin-bottom: 16px;
  font-size: 12.5px; color: var(--amber); line-height: 1.5;
}
.cred-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 15px; box-shadow: var(--shadow); }
.cred-label { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.cred-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 12.5px; }
.cred-key { color: var(--text-muted); min-width: 68px; flex-shrink: 0; }
.cred-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.cred-val.masked { letter-spacing: 2px; color: var(--text-muted); }
.group-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }

/* ---------- FILTERS ---------- */
.filter-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); flex-shrink: 0; }
.chip {
  padding: 4px 11px; border-radius: 100px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--card); color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--input-bg); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- FORMS ---------- */
.form-group { margin-bottom: 13px; }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--input-border); border-radius: 7px;
  font-family: var(--font-body); font-size: 13.5px;
  color: var(--text-primary); background: var(--input-bg);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-textarea { resize: vertical; min-height: 66px; line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }

/* ---------- MODAL ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(12, 20, 34, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; backdrop-filter: blur(4px);
}
.modal-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  width: 100%; max-width: 480px; max-height: 88vh;
  display: flex; flex-direction: column;
}
.modal-head { padding: 16px 18px 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-title { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- TOAST ---------- */
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 2000;
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #fff;
  box-shadow: var(--shadow-md); animation: fadeUp .18s ease;
  max-width: calc(100vw - 44px);
}
.toast-success { background: var(--green); }
.toast-error { background: var(--red); }
.toast-info { background: var(--sidebar-active); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- STATES ---------- */
.empty-state { text-align: center; padding: 52px 24px; color: var(--text-secondary); }
.empty-state h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.empty-state p { font-size: 13px; margin-bottom: 18px; line-height: 1.55; max-width: 380px; margin-inline: auto; }
.loading-box { text-align: center; padding: 64px 24px; color: var(--text-secondary); font-size: 14px; }
.locked-box {
  text-align: center; padding: 56px 24px; color: var(--text-secondary);
  max-width: 420px; margin: 0 auto;
}
.locked-box h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 14px 0 6px; }
.locked-box p { font-size: 13px; line-height: 1.55; }
.boot-error {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--bg); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; font-size: 14px; line-height: 1.6;
}
.boot-error code { background: var(--input-bg); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ---------- MOBILE ---------- */
.bottom-nav { display: none; }
.scrim { display: none; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%); transition: transform .22s ease;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(12, 20, 34, 0.5); z-index: 110; }
  .menu-btn { display: inline-flex; }
  .topbar {
    padding: env(safe-area-inset-top, 0px) 14px 0;
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  }
  /* Room at the bottom for the tab bar and the quick add button,
     so the last row of a list is never sitting underneath one. */
  .content { padding: 14px 16px calc(140px + env(safe-area-inset-bottom, 0px)); }
  /* box-sizing is border-box everywhere, so the home-indicator
     padding has to be ADDED to the height, not left to eat into
     it. Written as 58px the bar kept its 58px of chrome and gave
     the icons and labels whatever was left, which on a notched
     iPhone is 24px, and the labels were cut in half. */
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    background: var(--sidebar-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bnav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: none; background: none; cursor: pointer; padding: 6px 4px;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-display); font-size: 10px; font-weight: 500;
    transition: color .15s;
    /* Six tabs across a narrow phone. Never let a label wrap onto a
       second line: it shoves the icons out of alignment. */
    min-width: 0; white-space: nowrap;
  }
  .bnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .bnav-item.active { color: #fff; }
  .form-row { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  th, td { padding: 9px 11px; }
  /* Above the tab bar and the quick add button, not behind them. */
  /* It used to float in the middle of the list, covering whichever
     task happened to be there. It now sits on the same line as the
     quick-add button and stops short of it, so the bottom of the
     screen reads as one row of controls rather than a slab dropped
     on top of the work. */
  .toast {
    left: 14px;
    right: calc(16px + 56px + 12px);   /* clear of the round + button */
    bottom: calc(58px + 18px + env(safe-area-inset-bottom, 0px));
    text-align: left;
  }
  /* Without an action there is no button to dodge, so it can use
     the full width. */
  .toast:not(.has-action) { right: 14px; text-align: center; }
}

/* Smallest phones still in use. Six bottom-bar labels fit at 9px. */
@media (max-width: 380px) {
  .bnav-item { font-size: 9px; padding: 6px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Avatars ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 600; line-height: 1;
}
.assignees { display: inline-flex; gap: 3px; }

/* ---------- Page headings ---------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.page-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.2px; }
.page-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }

/* The one-line summary under a page title. Carries the numbers
   so the sections below do not have to be preceded by a panel. */
.stat-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stat-line b { font-weight: 600; color: var(--text-primary); }
.stat-line .s-bad  { color: var(--red); }
.stat-line .s-warn { color: var(--amber); }
.stat-line .s-sep  { color: var(--text-muted); font-style: normal; opacity: .6; }

/* Cards on Today sit closer together now the panel is gone. */
.section { margin-bottom: 12px; }
.card-header { padding: 12px 16px 10px; }

/* ---------- Card sections ---------- */
.section { margin-bottom: 14px; }
.rows { padding: 0 16px; }
.row-empty { padding: 18px 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.row-actions { display: flex; gap: 5px; flex-shrink: 0; }
.card-note { font-size: 11.5px; color: var(--text-muted); }
.muted { color: var(--text-muted); }

/* ---------- Priority dots ---------- */
.p-urgent { background: #9333EA; }
.p-high   { background: var(--red); }
.p-normal { background: var(--text-muted); }
.p-low    { background: var(--green); }

/* ---------- Clients ---------- */
.client-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.client-counts { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.overdue-pill {
  background: var(--red-bg); color: var(--red);
  padding: 1px 7px; border-radius: 100px; font-size: 11px; font-weight: 600;
}

/* ---------- Team ---------- */
.person-cell { display: flex; align-items: center; gap: 10px; }
.person-name { font-weight: 500; font-size: 13.5px; }
.person-role { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.load-bar { height: 6px; background: var(--input-bg); border-radius: 3px; overflow: hidden; min-width: 60px; }
.load-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }

/* ---------- Checkbox grid ---------- */
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.checkbox-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 7px;
  background: var(--input-bg); font-size: 13px; cursor: pointer;
  transition: border-color .15s;
}
.checkbox-item:hover { border-color: var(--text-muted); }
.checkbox-item input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* ---------- Auth extras ---------- */
.btn-ms {
  background: var(--card); color: var(--text-primary);
  border: 1px solid var(--input-border); font-weight: 500; gap: 9px;
}
.btn-ms:hover { background: var(--input-bg); }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 16px; color: var(--text-muted); font-size: 11.5px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Sidebar footer ---------- */
.who {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px; margin-bottom: 8px; border: none; border-radius: 8px;
  background: none; cursor: pointer; text-align: left;
  transition: background .15s;
}
.who:hover { background: rgba(255, 255, 255, 0.07); }
.who-text { min-width: 0; display: block; }
.who-name {
  display: block; font-size: 13px; font-weight: 500; color: var(--text-on-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-role { display: block; font-size: 10.5px; color: var(--text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.push-btn {
  width: 100%; padding: 8px; margin-bottom: 8px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.06); color: var(--text-on-dark-muted);
  border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  transition: background .15s, color .15s;
}
.push-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.push-btn.is-on { color: #7BE8B8; border-color: rgba(123, 232, 184, 0.3); }
.push-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Nav labels ---------- */
.nav-item span { flex: 1; }

@media (max-width: 860px) {
  .btn-text { display: none; }
  .page-head { margin-bottom: 16px; }
}

/* ============================================================
   CLICKABLE TITLES AND DETAIL VIEWS
   ============================================================ */

/* Titles are buttons now, so strip the button chrome back off */
.task-title, .client-name {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  font-family: inherit; color: inherit; text-align: left;
  cursor: pointer; overflow-wrap: anywhere;
}
.task-title { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; }
.client-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.task-title:hover, .client-name:hover { color: var(--accent); }
.task-title.done { text-decoration: line-through; color: var(--text-muted); }
.task-title.done:hover { color: var(--text-secondary); }

.task-meta-tag svg { display: block; opacity: .65; }

.client-note {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Detail modal ---------- */
.detail-grid {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 18px;
}
.detail-row {
  display: grid; grid-template-columns: 104px 1fr; gap: 12px;
  padding: 9px 12px; background: var(--card); align-items: center;
}
.detail-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.detail-value { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.detail-section-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 7px;
}
.detail-desc {
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px;
  overflow-wrap: anywhere;
}
.detail-desc.empty { color: var(--text-muted); font-style: italic; white-space: normal; }

.detail-people { display: flex; flex-wrap: wrap; gap: 6px; }
.person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 100px; padding: 2px 10px 2px 3px; font-size: 12px;
}

.detail-list {
  margin: 0; padding-left: 18px;
  font-size: 13px; line-height: 1.7; color: var(--text-secondary);
}
.detail-list li { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .detail-row { grid-template-columns: 88px 1fr; gap: 10px; }
}

/* ============================================================
   SEARCH AND SORT TOOLBAR
   ============================================================ */

.toolbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 12px;
}

.search-wrap {
  position: relative; flex: 1 1 240px; min-width: 0;
  display: flex; align-items: center;
}
.search-wrap svg {
  position: absolute; left: 11px; color: var(--text-muted); pointer-events: none;
}
.search-input {
  width: 100%; padding: 9px 12px 9px 34px;
  border: 1px solid var(--input-border); border-radius: 7px;
  font-family: var(--font-body); font-size: 13.5px;
  color: var(--text-primary); background: var(--input-bg);
  outline: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-input::placeholder { color: var(--text-muted); }

.toolbar-select {
  width: auto; flex: 0 1 auto; max-width: 190px;
  padding-right: 30px; font-size: 13px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 51%, calc(100% - 11px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.result-count {
  font-size: 12px; color: var(--text-muted); margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.chip-clear { color: var(--accent); border-color: var(--accent-soft); }
.chip-clear:hover { background: var(--accent-soft); }

@media (max-width: 860px) {
  .toolbar { gap: 8px; }
  .search-wrap { flex: 1 1 100%; }
  .toolbar-select { flex: 1 1 calc(50% - 4px); max-width: none; }
}

/* ============================================================
   ARCHIVED CLIENTS
   ============================================================ */

/* Archived reads as set aside, not broken: quieter, never illegible. */
.client-card.archived { background: var(--input-bg); border-style: dashed; box-shadow: none; }
.client-card.archived .client-name { color: var(--text-secondary); }
.client-card.archived:hover { box-shadow: var(--shadow); }

.chip-count {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 100px; font-size: 10.5px; font-weight: 600;
  background: var(--input-bg); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.chip.active .chip-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ============================================================
   RICH TEXT FIELD
   ============================================================ */

.rt {
  border: 1px solid var(--input-border); border-radius: 7px;
  background: var(--input-bg); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.rt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.rt-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 5px 6px; border-bottom: 1px solid var(--border);
  background: var(--card);
}
.rt-btn {
  min-width: 28px; height: 26px; padding: 0 7px;
  border: none; border-radius: 5px; background: none;
  color: var(--text-secondary); cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.rt-btn:hover { background: var(--input-bg); color: var(--text-primary); }
.rt-btn[data-md="bold"] { font-weight: 700; }
.rt-btn[data-md="italic"] { font-style: italic; font-family: Georgia, serif; }
.rt-btn[data-md="head"] { font-weight: 700; }
.rt-btn[data-md="code"] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.rt-preview-toggle {
  margin-left: auto; font-size: 12px; font-weight: 500;
  color: var(--accent); padding: 0 9px;
}
.rt-preview-toggle:hover { background: var(--accent-soft); color: var(--accent); }

.rt-input {
  border: none; border-radius: 0; background: transparent;
  min-height: 108px; display: block;
}
.rt-input:focus { border: none; box-shadow: none; }

.rt-preview {
  padding: 11px 12px; min-height: 108px;
  font-size: 13.5px; line-height: 1.6;
}
.rt-hint {
  padding: 0 12px 8px; margin: 0;
  font-size: 11px; color: var(--text-muted);
}

/* ---------- Rendered markdown ---------- */
.prose { white-space: normal; overflow-wrap: anywhere; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 9px; line-height: 1.6; }
.prose h3, .prose h4, .prose h5 {
  font-family: var(--font-display); font-weight: 600;
  margin: 14px 0 6px; line-height: 1.3;
}
.prose h3 { font-size: 15px; }
.prose h4 { font-size: 14px; }
.prose h5 { font-size: 13px; color: var(--text-secondary); }
.prose ul, .prose ol { margin: 0 0 9px; padding-left: 20px; }
.prose li { margin-bottom: 3px; line-height: 1.55; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.prose blockquote {
  margin: 0 0 9px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--border); color: var(--text-secondary);
}
.prose hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* The detail pane keeps pre-wrap for plain text, but rendered
   markdown must not, or every newline doubles up. */
.detail-desc.prose { white-space: normal; }

/* ============================================================
   FOCUS PANEL  (replaces four equal stat tiles)
   ============================================================ */

.focus {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.focus-lead {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 17px; border-bottom: 1px solid var(--border);
}
.focus.bad  .focus-lead { background: var(--red-bg); }
.focus.warn .focus-lead { background: var(--amber-bg); }
.focus.good .focus-lead { background: var(--green-bg); }

.focus-n {
  font-family: var(--font-display); font-size: 34px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.focus.bad  .focus-n { color: var(--red); }
.focus.warn .focus-n { color: var(--amber); }
.focus.good .focus-n { color: var(--green); }
.focus-x { font-size: 13.5px; line-height: 1.45; color: var(--text-primary); }

.focus-rest { display: flex; }
.focus-cell { flex: 1; padding: 11px 16px; border-right: 1px solid var(--border); }
.focus-cell:last-child { border-right: none; }

/* ============================================================
   GROUPED TASK VIEW
   ============================================================ */

.grp-list { display: flex; flex-direction: column; gap: 7px; }
.grp {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.grp.open { box-shadow: var(--shadow); }

.grp-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 11px 14px; border: none; background: none; cursor: pointer;
  text-align: left; font-family: var(--font-body); color: inherit;
  transition: background .12s;
}
.grp-head:hover { background: var(--input-bg); }
.grp-chev { display: flex; color: var(--text-muted); flex-shrink: 0; }
.grp-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grp-count {
  margin-left: auto; font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.grp .rows { border-top: 1px solid var(--border); padding-top: 2px; }

/* ============================================================
   TABLE TASK VIEW
   ============================================================ */

.task-table { min-width: 720px; }
.task-table td { font-size: 13px; }
.tcell-check { width: 34px; padding-right: 0; }
.tcell-act { width: 40px; text-align: right; }
.tcell-title { min-width: 240px; }
.tcell-title .dot { margin-right: 6px; vertical-align: middle; }
.link-title {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: inherit; text-align: left;
}
.link-title:hover { color: var(--accent); }
.tcell-title svg { margin-left: 5px; vertical-align: -1px; color: var(--text-muted); }
.due-late { color: var(--red); font-weight: 600; }

/* ============================================================
   VIEW SWITCH
   ============================================================ */

.seg {
  display: inline-flex; padding: 2px; gap: 2px; flex-shrink: 0;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 8px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: none; border-radius: 6px; cursor: pointer;
  background: none; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  transition: background .13s, color .13s;
}
.seg-btn:hover { color: var(--text-primary); }
.seg-btn.on { background: var(--card); color: var(--text-primary); box-shadow: var(--shadow); }
.seg-btn svg { flex-shrink: 0; }

@media (max-width: 860px) {
  .focus-rest { flex-wrap: wrap; }
  .focus-cell { flex: 1 1 33%; border-right: 1px solid var(--border); }
  .focus-n { font-size: 30px; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; justify-content: center; }
}
@media (max-width: 460px) {
  .seg-btn span { display: none; }
}

/* ============================================================
   REPEATING TASKS
   ============================================================ */

.rep-list { display: flex; flex-direction: column; gap: 8px; }
.rep {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow);
}
.rep.paused { background: var(--input-bg); box-shadow: none; border-style: dashed; }
.rep.paused .rep-title { color: var(--text-secondary); }
.rep-main { flex: 1; min-width: 0; }

.rep-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rep-cadence {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px 8px; border-radius: 100px;
}
.rep-cadence svg { flex-shrink: 0; }

.rep-title {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  margin-bottom: 7px; overflow-wrap: anywhere;
}
.rep-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rep-client { font-size: 12px; color: var(--text-secondary); font-weight: 500; }

/* ============================================================
   FILES ON A TASK
   ============================================================ */

.att {
  border: 1px dashed var(--input-border); border-radius: var(--radius-sm);
  padding: 11px 12px; transition: border-color .15s, background .15s;
}
.att.over { border-color: var(--accent); background: var(--accent-soft); }

.att-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px; margin-bottom: 10px;
}
.att-list:empty { display: none; }
.att-empty { grid-column: 1 / -1; font-size: 12.5px; }

.att-item { position: relative; margin: 0; min-width: 0; }
.att-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-muted);
}
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-missing { border-style: dashed; }

.att-item figcaption { margin-top: 5px; min-width: 0; }
.att-name {
  display: block; font-size: 11.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-meta { display: block; font-size: 10.5px; color: var(--text-muted); }

.att-del {
  position: absolute; top: 5px; right: 5px;
  background: var(--card); opacity: 0; transition: opacity .13s;
}
.att-item:hover .att-del, .att-del:focus-visible { opacity: 1; }

.att-foot { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.att-add { cursor: pointer; flex-shrink: 0; }

/* Touch screens have no hover, so the remove button always shows. */
@media (hover: none) {
  .att-del { opacity: 1; }
}

/* ---------- Buttons mid-request ---------- */
.btn-icon:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.is-busy { position: relative; color: transparent !important; }
.is-busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--text-muted); border-top-color: transparent;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-busy::after { animation: none; } }

/* ============================================================
   NIGHT DECK · TREATMENT
   Everything above is structure. This section is the look: the
   aura, the glass, the gradients and the state colour. It sits
   last so it wins without any !important.
   ============================================================ */

/* ---------- The aura ----------
   A fixed wash of orange, violet and cyan behind everything. It
   is what the translucent panels are translucent against, and
   the single biggest reason this does not read as a grey admin
   panel. Fixed, so it does not scroll or repaint on every row. */
body {
  background: var(--bg);
  font-feature-settings: 'ss01' 1;
}
body::before {
  content: '';
  position: fixed;
  inset: -18vh -8vw auto -8vw;
  height: 88vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 56% at 14% 0%,  rgba(253, 106, 2, 0.34), transparent 70%),
    radial-gradient(44% 52% at 82% 2%,  rgba(124, 92, 255, 0.32), transparent 70%),
    radial-gradient(42% 46% at 50% 24%, rgba(34, 211, 238, 0.15), transparent 72%);
}
body::after {
  content: '';
  position: fixed;
  inset: auto -8vw -22vh 40vw;
  height: 46vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(44% 60% at 70% 100%, rgba(253, 106, 2, 0.14), transparent 70%);
}
/* Only the two page roots need lifting above the aura. The modal,
   toast and bottom nav are position:fixed with their own z-index
   already, and giving them position:relative would drop the modal
   into the page flow. */
/* position:relative is enough to lift these above the aura, which
   paints at z-index 0 earlier in the document. Do NOT add a
   z-index here. Giving .app its own stacking context traps the
   sidebar's z-index:120 inside it, and the mobile scrim then
   paints over the sidebar instead of under it, blurring the menu
   you just opened. */
.app, .auth-screen { position: relative; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.sidebar-brand { border-bottom: 1px solid var(--border); padding: 24px 18px 20px; }
.sidebar-foot  { border-top: 1px solid var(--border); }

.nav-item {
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background .15s, color .15s, box-shadow .15s;
}
.nav-item:hover { background: var(--sidebar-hover); }
.nav-item.active {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(90deg, rgba(253, 106, 2, 0.26), rgba(253, 106, 2, 0.03));
  box-shadow: inset 0 0 0 1px rgba(253, 106, 2, 0.24);
}
/* The lit rail. Sits in the 10px sidebar-nav padding. */
.nav-item { position: relative; }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -6px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px;
  background: var(--accent-grad);
  box-shadow: 0 0 14px rgba(253, 106, 2, 0.65);
}
/* The layout rule above gives every span inside a nav item
   flex:1, which stretches the count into a long bar. */
.nav-item .nav-count { flex: 0 0 auto; }
.nav-item.active svg { color: var(--accent-2); }
.nav-count {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.08); color: var(--text-on-dark-muted);
}
.nav-item.active .nav-count { background: rgba(253, 106, 2, 0.22); color: var(--accent-2); }

.who-avatar, .avatar { border-radius: 32%; }
.who:hover { background: var(--sidebar-hover); }
.btn-logout, .push-btn { border-radius: 10px; background: rgba(255, 255, 255, 0.055); }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--glass-bar);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 700; letter-spacing: -0.03em; font-size: 18px; }

/* ---------- Buttons ---------- */
.btn { border-radius: 11px; font-weight: 600; letter-spacing: -0.005em; }
.btn-primary {
  background: var(--accent-grad);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #FF7D1F, #FFC043);
  box-shadow: 0 10px 26px -7px rgba(253, 106, 2, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-ghost {
  background: var(--card); color: var(--text-secondary);
  border: none; box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn-ghost:hover:not(:disabled) { background: var(--card-hi); color: var(--text-primary); }
.btn-danger { background: linear-gradient(135deg, #FF4D6D, #FF7A92); color: #2A0410; }
.btn-danger:hover:not(:disabled) { background: linear-gradient(135deg, #FF6480, #FF8EA3); }
.btn-icon {
  background: var(--card); border: none; border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn-icon:hover { background: var(--card-hi); }
.btn-ms {
  background: var(--card); color: var(--text-primary);
  border: none; box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn-ms:hover { background: var(--card-hi); }

/* ---------- Glass surfaces ----------
   Hairlines come from an inset shadow, not a border, so panels
   sit on the aura instead of being fenced off from it. */
.card, .stat-tile, .client-card, .cred-card,
.grp, .rep, .focus, .month-nav {
  background: var(--card);
  border: none;
  box-shadow: var(--shadow), inset 0 0 0 1px var(--border);
}
.card { overflow: hidden; }
.client-card:hover, .grp-head:hover, .rep:hover {
  background: var(--card-hi);
}
.client-card:hover { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-strong); }
/* Archived reads as set aside: dimmer, not fenced off. The dashed
   border the old theme used turns into a bright white cage on a
   dark ground, so it goes. */
.client-card.archived, .rep.paused {
  border: 0;
  background: var(--dim-1);
  box-shadow: inset 0 0 0 1px var(--border);
  opacity: .72;
}
.client-card.archived:hover, .rep.paused:hover { opacity: 1; }
.card-header { border-bottom: 1px solid var(--border); }
.card-header h2 { font-weight: 700; letter-spacing: -0.02em; font-size: 14.5px; }
.grp-head:hover { background: var(--card-hi); }

/* ---------- Numbers read as data ---------- */
.stat-value, .focus-n, .num, .grp-count, .result-count,
.chip-count, .month-label, .cred-val, .load-pct, td .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.stat-value { font-weight: 700; letter-spacing: -0.04em; font-size: 26px; }
.focus-n { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.05em; }
.stat-label { color: var(--text-muted); letter-spacing: 0.09em; }
.page-title { font-weight: 800; letter-spacing: -0.035em; font-size: 21px; }

/* ---------- Task rows carry their state on the edge ---------- */
.task-row {
  position: relative;
  padding: 11px 0 11px 4px;
  border-bottom: 1px solid var(--border);
}
.task-row::before {
  content: '';
  position: absolute;
  left: -16px; top: 0; bottom: 0; width: 3px;
  background: var(--tone, transparent);
}
.task-row.s-late  { --tone: linear-gradient(180deg, #FF4D6D, #FF8FA3); }
.task-row.s-today { --tone: linear-gradient(180deg, #FD6A02, #FFB020); }
.task-row.s-soon  { --tone: linear-gradient(180deg, #22D3EE, #7DE9FA); }
.task-row.s-done  { --tone: linear-gradient(180deg, #2DE0A5, #A3E635); opacity: .62; }
.task-row:hover { background: var(--dim-1); }

.task-title { font-weight: 600; font-size: 14px; letter-spacing: -0.012em; }
.task-check { border: 2px solid var(--input-border); border-radius: 7px; width: 19px; height: 19px; }
.task-check:hover { border-color: var(--green); }
.task-check.done {
  background: linear-gradient(135deg, #2DE0A5, #A3E635);
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(45, 224, 165, 0.6);
}
.task-check.done::after { border-color: #06281C; }
.task-meta-tag { color: var(--text-muted); }
.task-meta-tag.overdue { color: var(--red); font-weight: 700; }
/* Due today is not late yet. Amber, not rose. */
.task-meta-tag.overdue.today { color: var(--amber); }

/* ---------- Reminders ---------- */
/* A reminder shared with someone else is the one case where
   "private" stops being true, so it is marked on the row rather
   than left to be discovered. */
.task-meta-tag.shared { color: var(--blue); font-weight: 600; }
.task-meta-tag.shared .avatar { margin-right: 2px; }
.task-meta-tag.as-link {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-muted); min-width: 0;
}
/* The ellipsis lives on the inner span because the tag itself is a
   flex container, and text-overflow does nothing on one of those. */
.as-link-x { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-meta-tag.as-link:hover { color: var(--text-primary); text-decoration: underline; }

.rem-privacy {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 14px; padding: 9px 13px;
  border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
}
.rem-privacy svg { flex: 0 0 auto; opacity: .7; }

/* The nudge on Today. A row, not a card: it is a pointer to
   somewhere else, not content in its own right. */
.rem-strip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 14px; padding: 11px 14px;
  border: none; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; font-size: 12.5px; color: var(--text-secondary);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
  transition: background .15s, box-shadow .15s;
}
.rem-strip:hover { background: var(--card-hi); box-shadow: inset 0 0 0 1px var(--border-strong); }
.rem-strip b { color: var(--text-primary); font-weight: 700; }
.rem-strip-ico { display: flex; color: var(--amber); }
.rem-strip-go { margin-left: auto; display: flex; color: var(--text-muted); }

/* ---------- Filters ---------- */
.chip {
  border: none; background: var(--card); color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 6px 13px; font-weight: 500;
}
.chip:hover { background: var(--card-hi); color: var(--text-primary); }
.chip.active {
  background: var(--violet-grad); color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(124, 92, 255, 0.7);
}
.chip.active .chip-count { background: rgba(255, 255, 255, 0.24); color: #fff; }
.chip-count { background: var(--dim-3); color: var(--text-muted); }
.chip-clear {
  color: var(--accent-2); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(253, 106, 2, 0.3);
}
.chip-clear:hover { background: rgba(253, 106, 2, 0.22); color: var(--accent-2); }

.seg {
  background: var(--card); border: none;
  box-shadow: inset 0 0 0 1px var(--border); border-radius: 999px; padding: 3px;
}
.seg-btn { border-radius: 999px; font-weight: 600; }
.seg-btn.on {
  background: var(--card-hi); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* ---------- Inputs ---------- */
.form-input, .form-select, .form-textarea, .search-input, .rt {
  border: none;
  box-shadow: inset 0 0 0 1px var(--input-border);
  border-radius: 10px;
  background: var(--input-bg);
}
.form-input:focus, .form-select:focus, .form-textarea:focus, .search-input:focus {
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft);
}
.rt:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }
.rt-bar { background: var(--dim-2); border-bottom: 1px solid var(--border); }
.rt-btn:hover { background: var(--card-hi); }
.rt-preview-toggle { color: var(--accent-2); }
.rt-preview-toggle:hover { background: var(--accent-soft); color: var(--accent-2); }
.form-select option { background: var(--card-solid); color: var(--text-primary); }
.form-label { color: var(--text-secondary); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em; }
.checkbox-item {
  border: none; box-shadow: inset 0 0 0 1px var(--input-border);
  border-radius: 10px; background: var(--input-bg);
}
.checkbox-item:hover { box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--card-hi); }

/* ---------- Modal ---------- */
.modal-overlay { background: var(--scrim); backdrop-filter: blur(6px); }
.modal-box {
  background: var(--glass-panel);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: none;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-strong);
}
.modal-head, .modal-foot { border-color: var(--border); }
.modal-title { font-weight: 700; letter-spacing: -0.025em; }
.detail-grid {
  background: var(--border); border: none;
  box-shadow: inset 0 0 0 1px var(--border);
}
.detail-row { background: var(--dim-1); }
.detail-desc {
  background: var(--input-bg); border: none;
  box-shadow: inset 0 0 0 1px var(--border);
}
.person-chip {
  background: var(--input-bg); border: none;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ---------- Tables ---------- */
th {
  background: var(--dim-2);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.09em;
}
td { border-bottom: 1px solid var(--border); }
tbody tr:hover td { background: var(--dim-1); }
.due-late { color: var(--red); }

/* ---------- Bars ---------- */
.load-bar { background: var(--dim-3); border-radius: 99px; height: 5px; }
.load-fill { background: var(--accent-grad); }

/* ---------- Toast ----------
   The saturated colours are light, so the text on them is dark. */
/* A toast is a receipt, not an alarm. The old one was a bright
   gradient slab in an otherwise dark app, which made completing a
   task look like something had gone wrong. It is now the same glass
   as every other panel, and the tone is carried by a single stripe
   down the left edge, the way the task rows already do it. */
.toast {
  border-radius: 12px; font-weight: 600;
  background: var(--glass-panel);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  color: var(--text-primary);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-strong);
  border-left: 3px solid var(--tone, var(--border-strong));
}
.toast-success { --tone: var(--green); }
.toast-error   { --tone: var(--red); }
.toast-info    { --tone: var(--accent); }

/* A toast with an Undo is a control, not an announcement, so it
   gets room to be read and a button that looks pressable. */
.toast.has-action { display: flex; align-items: center; gap: 14px; padding-right: 8px; }
/* Takes the slack, so the button lands against the right edge
   instead of floating in the middle with dead space after it. */
.toast-msg { flex: 1 1 auto; min-width: 0; }
/* The only filled element on the toast, because it is the only
   thing with a deadline. Pale-on-pale did not read as a button. */
.toast-action {
  flex: 0 0 auto; border: none; cursor: pointer;
  padding: 7px 14px; border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--text-primary); color: var(--bg);
  transition: opacity .13s;
  min-height: 34px;                 /* a thumb-sized target */
}
.toast-action:hover { opacity: .86; }
.toast-action:active { transform: translateY(1px); }

/* A tile you can press needs to say so before it is pressed. */
.stat-tile.tappable { cursor: pointer; transition: box-shadow .14s, transform .14s; }
.stat-tile.tappable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-tile.tappable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-tile .stat-note { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.done-note {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 14px; padding: 9px 13px; border-radius: 10px;
  font-size: 12.5px; color: var(--text-secondary);
  background: var(--green-bg);
}
.done-note svg { flex: 0 0 auto; color: var(--green); }

/* ---------- Badges ---------- */
.badge { font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; }
.badge-grey { background: var(--dim-3); color: var(--text-secondary); }
.overdue-pill { font-family: var(--font-mono); font-weight: 700; }

/* ---------- Login ---------- */
.auth-screen { background: transparent; }
.auth-card {
  background: var(--glass-panel-soft);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: none;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-strong);
  border-radius: var(--radius-lg);
}
.auth-sub { color: var(--accent-2); letter-spacing: 0.14em; font-weight: 600; }
.auth-error {
  background: var(--red-bg); color: var(--red);
  border: none; box-shadow: inset 0 0 0 1px rgba(255, 77, 109, 0.32);
}
.auth-divider::before, .auth-divider::after { background: var(--border); }

/* ---------- Repeating ---------- */
.rep-cadence {
  color: var(--violet); background: rgba(124, 92, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.32);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
}
.rep-title { font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Files ---------- */
.att { border: 1px dashed var(--input-border); border-radius: var(--radius-sm); }
.att.over { border-color: var(--accent); background: var(--accent-soft); }
.att-thumb {
  background: var(--input-bg); border: none;
  box-shadow: inset 0 0 0 1px var(--border); border-radius: 9px;
}
/* Solid, because it sits on top of a photograph. */
.att-del { background: var(--glass-panel); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- Credentials ---------- */
.cred-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 7px; flex-wrap: wrap;
}
.cred-head .detail-section-label { margin-bottom: 0; }
.cred-tools { display: flex; gap: 6px; flex-shrink: 0; }
.cred-shield {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; border-radius: var(--radius-sm);
  background: rgba(124, 92, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.26);
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}
.cred-body { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; }
.cred-body p, .cred-body li { overflow-wrap: anywhere; }
.cred-body strong { font-family: var(--font-body); font-weight: 700; color: var(--accent-2); }

/* ---------- Prose ---------- */
.prose code {
  background: var(--dim-3); border: none;
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-mono);
}
.prose blockquote { border-left-color: var(--accent); color: var(--text-secondary); }
.prose a { color: var(--blue); }

/* ---------- Focus panel ---------- */
.focus-lead { border-bottom: 1px solid var(--border); }
.focus.bad  .focus-lead { background: linear-gradient(100deg, rgba(255, 77, 109, 0.16), transparent 70%); }
.focus.warn .focus-lead { background: linear-gradient(100deg, rgba(255, 176, 32, 0.16), transparent 70%); }
.focus.good .focus-lead { background: linear-gradient(100deg, rgba(45, 224, 165, 0.16), transparent 70%); }
.focus-cell { border-right: 1px solid var(--border); }

/* ---------- Mobile ---------- */
.bottom-nav {
  background: var(--glass-bar-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid var(--border);
}
.bnav-item { color: var(--text-muted); font-weight: 600; }
.bnav-item.active { color: var(--accent-2); }
.scrim { background: var(--scrim); backdrop-filter: blur(3px); }

/* ---------- Misc ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); }
::selection { background: rgba(253, 106, 2, 0.34); }
.boot-error code { background: var(--dim-3); font-family: var(--font-mono); }
.warn-banner {
  background: var(--amber-bg); border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.3);
  border-radius: var(--radius-sm); color: var(--amber);
}
.p-normal { background: var(--text-muted); }
.p-urgent { background: var(--violet); }

/* ============================================================
   DAY DECK · the light theme
   Same app, lit from the front. The sidebar stays near-black in
   both themes, because that is what carries the brand and it
   reads well either way. Everything else flips.

   Dark is still the default. This only applies when the toggle
   has written data-theme="light" onto <html>.
   ============================================================ */

:root[data-theme="light"] {
  --bg: #F4F5FA;
  --bg-deep: #EDEEF5;

  --card: #FFFFFF;
  --card-hi: #FBFBFE;
  --card-solid: #FFFFFF;

  --text-primary: #11131C;
  --text-secondary: #4E5468;
  --text-muted: #80869A;

  /* The sidebar is dark in both themes, so these stay put. */
  --sidebar-bg: #11131C;
  --sidebar-hover: rgba(255, 255, 255, 0.07);

  --accent-soft: rgba(253, 106, 2, 0.12);
  --glow: 0 8px 20px -8px rgba(253, 106, 2, 0.45);

  --border: rgba(14, 17, 28, 0.10);
  --border-strong: rgba(14, 17, 28, 0.17);
  --input-bg: #F0F1F7;
  --input-border: rgba(14, 17, 28, 0.14);

  --shadow: 0 1px 2px rgba(14, 17, 28, 0.05), 0 8px 20px -14px rgba(14, 17, 28, 0.22);
  --shadow-md: 0 2px 6px rgba(14, 17, 28, 0.07), 0 26px 50px -26px rgba(14, 17, 28, 0.32);

  /* Saturated reads bright on a dark ground and thin on a light
     one, so the status colours come down a few steps to keep
     their contrast against white. */
  --green: #0B8F63;
  --green-bg: rgba(11, 143, 99, 0.12);
  --amber: #A96505;
  --amber-bg: rgba(169, 101, 5, 0.12);
  --red: #D11843;
  --red-bg: rgba(209, 24, 67, 0.11);
  --blue: #0B7C93;
  --blue-bg: rgba(11, 124, 147, 0.12);
  --violet: #5B3FD6;
  --violet-grad: linear-gradient(135deg, #6D4DF2, #9B7BFF);

  --dim-1: rgba(14, 17, 28, 0.028);
  --dim-2: rgba(14, 17, 28, 0.045);
  --dim-3: rgba(14, 17, 28, 0.07);
  --glass-bar: rgba(255, 255, 255, 0.72);
  --glass-bar-strong: rgba(255, 255, 255, 0.90);
  --glass-panel: rgba(255, 255, 255, 0.97);
  --glass-panel-soft: rgba(255, 255, 255, 0.86);
  --scrim: rgba(22, 25, 38, 0.42);
  --scroll: rgba(14, 17, 28, 0.18);
  --scroll-hi: rgba(14, 17, 28, 0.30);
  --focus: #D45400;

  color-scheme: light;
}

/* The aura is the same wash, turned down. At full strength on a
   near-white ground it looks like a printing fault. */
:root[data-theme="light"] body::before { opacity: .42; }
:root[data-theme="light"] body::after  { opacity: .34; }

/* The sidebar keeps its dark treatment, so its own text and
   dividers must not follow the light text tokens. */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .bottom-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="light"] .sidebar-brand,
:root[data-theme="light"] .sidebar-foot {
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="light"] .bottom-nav {
  background: #11131C;
  border-top-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="light"] .nav-count { color: rgba(255, 255, 255, 0.6); }

/* On white, a hairline alone is not enough to lift a card off
   the page. Give the surfaces their shadow back. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat-tile,
:root[data-theme="light"] .client-card,
:root[data-theme="light"] .cred-card,
:root[data-theme="light"] .grp,
:root[data-theme="light"] .rep,
:root[data-theme="light"] .focus,
:root[data-theme="light"] .month-nav {
  box-shadow: var(--shadow), inset 0 0 0 1px var(--border);
}
:root[data-theme="light"] .client-card.archived,
:root[data-theme="light"] .rep.paused {
  background: #F7F8FC;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Dark text on the saturated toast gradients stays, but the
   gradients themselves get a shade more depth on white. */
:root[data-theme="light"] .toast { box-shadow: var(--shadow-md); }

/* ---------- The toggle itself ---------- */
.theme-btn { flex-shrink: 0; }
.theme-btn .ico-sun { display: none; }
.theme-btn .ico-moon { display: block; }
:root[data-theme="light"] .theme-btn .ico-sun { display: block; }
:root[data-theme="light"] .theme-btn .ico-moon { display: none; }

/* A small lock on the client card when credentials are on file. */
.cred-flag {
  display: inline-flex; align-items: center;
  color: var(--violet); opacity: .85;
}

/* ---------- Client access (Team page) ---------- */
.access-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-body); font-size: 12.5px;
}
.access-btn:hover { background: var(--card-hi); color: var(--text-primary); }
.access-btn svg { opacity: .6; }
.access-btn .num { font-weight: 700; color: var(--text-primary); }

.access-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.access-tools .form-hint { margin: 0 0 0 auto; }

/* Amber on white is too pale to read. Anywhere the dark theme
   uses the light end of the orange ramp for text, the light
   theme uses the dark end. */
:root[data-theme="light"] .cred-body strong,
:root[data-theme="light"] .rt-preview-toggle,
:root[data-theme="light"] .chip-clear,
:root[data-theme="light"] .auth-sub,
:root[data-theme="light"] .bnav-item.active {
  color: #C25200;
}
:root[data-theme="light"] .rt-preview-toggle:hover { color: #C25200; }

/* ---------- Today stat tiles ---------- */
/* The tone bar is the only colour on the tile, so a row of four
   reads as one object with four states rather than four boxes. */
.stat-tile { position: relative; overflow: hidden; }
.stat-tile::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--tone, transparent);
}
.stat-tile.t-bad  { --tone: linear-gradient(90deg, #FF4D6D, #FF8FA3); }
.stat-tile.t-warn { --tone: var(--accent-grad); }
.stat-tile.t-info { --tone: linear-gradient(90deg, #22D3EE, #7DE9FA); }
.stat-tile.t-good { --tone: linear-gradient(90deg, #2DE0A5, #A3E635); }
.stat-tile.t-bad  .stat-value { color: var(--red); }
.stat-tile.t-warn .stat-value { color: var(--amber); }
.stat-tile.t-info .stat-value { color: var(--blue); }
.stat-tile.t-good .stat-value { color: var(--green); }
/* A zero is not news. Let it sit back. */
.stat-tile .stat-value:not(:empty) { line-height: 1.05; }
.stat-note {
  font-size: 11.5px; color: var(--text-muted); margin-top: 3px;
  font-family: var(--font-mono);
}

/* The parked card is deliberately quiet. It is a backlog, not a
   to-do list, and it should not compete with today's work. */
.grp.section { margin-top: 14px; }
.grp-head .grp-name { font-weight: 600; }

/* ============================================================
   SEARCH EVERYTHING
   One box over clients, tasks, repeating work and people. It
   sits above the modal layer because you can open it from
   anywhere, including with a detail panel already open.
   ============================================================ */

.search-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}

.search-box {
  width: 100%; max-width: 620px;
  display: flex; flex-direction: column; max-height: 72vh;
  background: var(--glass-panel);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-strong);
  overflow: hidden;
}

.search-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-bar-icon { display: flex; color: var(--text-muted); flex-shrink: 0; }
.search-bar-input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font-body); font-size: 16px; color: var(--text-primary);
  padding: 2px 0;
}
.search-bar-input::placeholder { color: var(--text-muted); }
.search-esc {
  flex-shrink: 0; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--text-muted); background: var(--dim-3);
  padding: 4px 8px; border-radius: 6px;
}
.search-esc:hover { color: var(--text-primary); }

.search-results { overflow-y: auto; padding: 8px; min-height: 0; }
.search-empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.search-empty b { color: var(--text-secondary); }

.sr-group + .sr-group { margin-top: 6px; }
.sr-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 10px 5px; margin: 0;
}
.sr-more { font-size: 12px; color: var(--text-muted); padding: 4px 10px 6px; margin: 0; font-family: var(--font-mono); }

.sr {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 10px;
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); color: inherit;
}
.sr:hover { background: var(--dim-2); }
/* Keyboard selection has to read differently from hover, or you
   cannot tell where Enter will take you while the mouse rests
   somewhere else. */
.sr.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(253, 106, 2, 0.32);
}
.sr[data-quiet] .sr-title { color: var(--text-secondary); }
.sr[data-quiet] .sr-icon { opacity: .5; }

.sr-icon { display: flex; flex-shrink: 0; color: var(--text-muted); }
.sr.on .sr-icon { color: var(--accent); }
.sr-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sr-title {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-sub {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-meta {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
}

.search-hint {
  display: flex; gap: 16px; flex-wrap: wrap; flex-shrink: 0;
  margin: 0; padding: 9px 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-muted);
}
.search-hint b { font-family: var(--font-mono); font-weight: 500; color: var(--text-secondary); }
/* A statement, not a shortcut list, so it does not sit on the same
   row as the keys or wear their monospace. */
.search-note { border-top: none; padding-top: 0; font-style: italic; opacity: .85; }

@media (max-width: 860px) {
  .search-overlay { padding-top: 6vh; }
  .search-box { max-height: 82vh; }
  .search-hint { display: none; }
}

/* ---------- Search field in the top bar ---------- */
/* The title stops stretching so the search can take the space
   between it and the actions, which is the only dead area on
   the bar. */
.topbar-title { flex: 0 0 auto; }
.topbar-actions { margin-left: auto; }

.topbar-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
  margin-left: 10px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  border: none; border-radius: 10px; cursor: pointer;
  background: var(--input-bg);
  box-shadow: inset 0 0 0 1px var(--input-border);
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 13.5px;
  text-align: left;
  transition: background .14s, box-shadow .14s, color .14s;
}
.topbar-search:hover {
  background: var(--card-hi);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.topbar-search:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }

.ts-icon { display: flex; flex-shrink: 0; }
.ts-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ts-kbd {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em;
  padding: 3px 7px; border-radius: 5px;
  background: var(--dim-3); color: var(--text-muted);
}

/* On a phone the bar has no room for a field, so it becomes the
   icon it always was underneath. */
@media (max-width: 860px) {
  .topbar-search {
    flex: 0 0 auto; max-width: none; margin-left: 4px;
    padding: 7px; border-radius: 9px;
  }
  .ts-label, .ts-kbd { display: none; }
}

/* ---------- Selecting several ---------- */
.row-pick { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; padding: 2px; }
.row-pick input, .grp-pick input {
  width: 17px; height: 17px; margin: 0; cursor: pointer;
  accent-color: var(--accent);
}
.grp-pick { display: flex; align-items: center; padding: 0 2px 0 12px; cursor: pointer; }
/* The group header is a button, so its checkbox is a sibling in a
   flex row rather than a child. Nesting one inside the other would
   mean every tick also collapsed the group. */
.grp { display: flex; flex-wrap: wrap; align-items: stretch; }
/* .grp-head carries width:100% for the old block layout. As a flex
   child that would shove the checkbox onto its own line. */
.grp > .grp-head { flex: 1 1 auto; width: auto; min-width: 0; }
.grp > .rows, .grp > .row-empty, .grp > .grp-foot { flex: 0 0 100%; }

.task-row.picked, tr.picked { background: var(--accent-soft); }
.tcell-pick { width: 34px; }

.bulkbar {
  /* Starts where the content starts. A full-width bar would sit on
     top of the sidebar's own footer, which is where Sign out is. */
  position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--card-solid, var(--card));
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.bulkbar-inner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto;
}
.bulk-n {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--text-primary); white-space: nowrap;
}
.bulk-gap { flex: 1; min-width: 0; }
.bulkbar .btn[disabled] { opacity: .4; pointer-events: none; }
/* Content has to clear the bar, or the last row sits under it and
   cannot be ticked. */
body.has-bulkbar .content { padding-bottom: 110px; }

.bulk-warn {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 0 0 14px; padding: 11px 13px; border-radius: 10px;
  font-size: 13px; line-height: 1.55;
  background: var(--red-bg); color: var(--red);
}
.bulk-warn svg { flex: 0 0 auto; margin-top: 2px; }

.toolbar-inset { padding: 0 14px 12px; margin: 0; }
.row-more { margin: 2px 14px 12px; }

@media (max-width: 860px) {
  /* Above the tab bar, and the quick add button steps aside.
     No sidebar to dodge here: it is off-screen until opened. */
  .bulkbar { left: 0; bottom: 58px; padding-bottom: 10px; }
  body.has-bulkbar .fab { display: none; }
  body.has-bulkbar .content { padding-bottom: 180px; }
  .bulkbar .btn-text { display: none; }
  .bulk-n { font-size: 12px; }
}

/* ---------- The guide ---------- */
/* 480px is right for a form, where every field is one line. This is
   a page of prose in two columns, so it gets room. */
.modal-box.is-wide { max-width: 740px; }


/* The sidebar stays dark in both themes, so this one is written
   against that rather than against the theme tokens. */
.side-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 10px; padding: 8px 10px;
  border: none; border-radius: 9px; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  background: none; color: rgba(255, 255, 255, 0.52);
  transition: background .14s, color .14s;
}
.side-link:hover { background: var(--sidebar-hover); color: #fff; }
.side-link-ico { display: flex; flex-shrink: 0; }

.guide-lead {
  margin: 0 0 20px; font-size: 13.5px; line-height: 1.65;
  color: var(--text-secondary);
}
.guide-lead b { color: var(--text-primary); }

.guide-sec { margin-bottom: 22px; }
.guide-sec h3 {
  margin: 0 0 4px; font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-2);
}
.guide-note {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
}

/* Two columns on a wide dialog, one on a phone. The term column is
   fixed so the descriptions line up down the page. */
.guide-list { display: grid; grid-template-columns: 150px 1fr; gap: 9px 16px; margin: 0; }
.guide-list dt {
  font-size: 12.5px; font-weight: 700; color: var(--text-primary);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.guide-list dd {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary);
}
.guide-list dd b { color: var(--text-primary); font-weight: 600; }
.guide-list code {
  font-family: var(--font-mono); font-size: 11.5px;
  padding: 1px 5px; border-radius: 5px;
  background: var(--dim-3); color: var(--text-primary);
}
.guide-list kbd {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px;
  background: var(--dim-3); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border);
}
.guide-foot {
  margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
}

@media (max-width: 620px) {
  .guide-list { grid-template-columns: 1fr; gap: 3px; }
  .guide-list dd { margin-bottom: 9px; }
}

/* ---------- One person's page ---------- */
.person-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.person-head .avatar { flex: 0 0 auto; }
.person-name.as-open {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.person-name.as-open:hover { color: var(--accent); text-decoration: underline; }

.carry { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.carry-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; padding: 7px 8px 7px 13px;
  border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--dim-2); color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
}
.carry-chip:hover { background: var(--card-hi); color: var(--text-primary); }
.carry-chip.is-flat { cursor: default; }
.carry-n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--dim-3); color: var(--text-primary);
}

/* ---------- Finished per week ---------- */
/* One series, so no legend: the card heading names it. Thin bars
   with rounded tops standing on a baseline, a recessive grid, and
   labels only on the busiest week and the current one. Everything
   else answers on hover, because a number over every bar is noise
   rather than information. */
/* Cards clip their contents so rows sit flush inside the rounded
   corners. The tooltip on the tallest bar rises past the top of
   the plot, so this one card must not clip, or the tooltip is cut
   in half exactly when the bar is most interesting. */
.card.has-chart { overflow: visible; }
.wk-wrap { padding: 4px 16px 0; }
.wk { position: relative; height: 150px; margin-bottom: 10px; }

.wk-grid { position: absolute; inset: 0 0 26px 0; display: flex; flex-direction: column; justify-content: space-between; }
.wk-gridline { position: relative; border-top: 1px dashed var(--border); }
.wk-gridline i {
  position: absolute; top: -8px; left: 0;
  font-family: var(--font-mono); font-size: 10px; font-style: normal;
  color: var(--text-muted); background: var(--card-solid); padding-right: 6px;
}

.wk-bars { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 6px; }
.wk-col {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  position: relative; cursor: default;
}
.wk-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wk-value {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-secondary); margin-bottom: 4px;
}
/* The track keeps every column the same height so the bars share a
   baseline, and shows the gap in a quiet week rather than hiding it. */
.wk-track {
  width: 58%; max-width: 46px; flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 1.5px solid var(--border-strong);
}
.wk-bar {
  width: 100%; border-radius: 4px 4px 0 0;
  background: var(--violet);
  transition: filter .13s;
}
/* The current week is the same series in an unfinished period, not
   a different thing, so it keeps the hue and says "still counting"
   with a hatch instead. A second colour here would read as a second
   category, and the orange that first went in here also failed the
   lightness band in dark and the 3:1 contrast floor in light. The
   hatch never carries the meaning alone: the column is labelled
   "this week" underneath and the tooltip says so too. */
.wk-col.now .wk-bar {
  background:
    repeating-linear-gradient(135deg,
      var(--violet) 0 5px,
      color-mix(in srgb, var(--violet) 55%, transparent) 5px 10px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .wk-col.now .wk-bar { background: var(--violet); opacity: .72; }
}
.wk-col.now .wk-x { color: var(--text-secondary); font-weight: 600; }
.wk-col:hover .wk-bar, .wk-col:focus-visible .wk-bar { filter: brightness(1.15); }
.wk-x {
  margin-top: 7px; height: 19px;
  font-size: 10px; color: var(--text-muted); white-space: nowrap;
}
.wk-tip {
  position: absolute; bottom: calc(100% - 22px); left: 50%; transform: translateX(-50%);
  opacity: 0; pointer-events: none; transition: opacity .12s;
  padding: 7px 10px; border-radius: 8px; white-space: nowrap; z-index: 5;
  font-size: 11.5px; font-weight: 600; line-height: 1.45; text-align: center;
  background: var(--card-solid); color: var(--text-primary);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-strong);
}
.wk-tip i { font-style: normal; font-weight: 500; color: var(--text-muted); }
.wk-col:hover .wk-tip, .wk-col:focus-visible .wk-tip { opacity: 1; }

.wk-caveat {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 14px; font-size: 11.5px; line-height: 1.55; color: var(--text-muted);
}
.wk-caveat svg { flex: 0 0 auto; margin-top: 2px; }

.wk-totals {
  display: flex; gap: 10px; padding: 0 16px 16px;
  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 2px;
}
.wk-totals div { flex: 1; min-width: 0; }
.wk-totals .num { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.wk-totals label {
  display: block; margin-top: 2px;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}

@media (max-width: 860px) {
  .wk { height: 128px; }
  .wk-x { font-size: 9px; }
  .wk-totals .num { font-size: 17px; }
}

/* ---------- Calendar ---------- */
/* A month grid, not an agenda list. The point of it is the shape of
   the month: where the clear runs are and where three deadlines
   have piled onto one Thursday. A list cannot show that. */
.cal-wrap { margin-bottom: 16px; }

.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { margin-bottom: 6px; }
.cal-head-cell {
  text-align: center; padding: 4px 0;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.cal-head-short { display: none; }

.cal-day {
  position: relative; min-height: 116px; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 7px 6px; border-radius: 11px; cursor: pointer;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
  transition: background .13s, box-shadow .13s;
}
.cal-day:hover { background: var(--card-hi); }
.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Days either side of the month are context, not content. */
.cal-day.out { background: transparent; box-shadow: inset 0 0 0 1px var(--dim-2); }
.cal-day.out .cal-num { opacity: .35; }
.cal-day.out .cal-chip { opacity: .5; }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-day.on { box-shadow: inset 0 0 0 1.5px var(--text-secondary); background: var(--card-hi); }
.cal-day.is-today.on { box-shadow: inset 0 0 0 2px var(--accent); }

.cal-num {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary); line-height: 1;
}
.cal-day.is-today .cal-num { color: var(--accent-2); }

.cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip {
  display: flex; align-items: baseline; gap: 4px; width: 100%;
  border: none; cursor: pointer; text-align: left;
  padding: 3px 6px; border-radius: 6px;
  font: inherit; font-size: 11px; line-height: 1.3;
  background: var(--dim-2); color: var(--text-secondary);
  border-left: 2.5px solid var(--text-muted);
}
.cal-chip:hover { filter: brightness(1.25); }
.cal-chip-t { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; opacity: .8; }
.cal-chip-x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.k-task { border-left-color: var(--violet); }
.cal-chip.k-rem  { border-left-color: var(--blue); }
.cal-chip.k-late { border-left-color: var(--red); color: var(--red); background: var(--red-bg); }
.cal-chip.k-done { border-left-color: var(--green); text-decoration: line-through; opacity: .6; }

.cal-more { font-size: 10px; color: var(--text-muted); padding-left: 2px; }

/* The phone version of the same cell: no room for words, so the
   day carries dots and the list below carries the detail. */
.cal-dots { display: none; gap: 3px; align-items: center; margin-top: auto; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: inline-block; }
.cal-dot.k-task { background: var(--violet); }
.cal-dot.k-rem  { background: var(--blue); }
.cal-dot.k-late { background: var(--red); }
.cal-dot.k-done { background: var(--green); }
.cal-dot-n { font-size: 9px; color: var(--text-muted); }
.cal-count { display: none; }

.cal-legend { display: flex; gap: 12px; align-items: center; margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 7px; height: 7px; border-radius: 50%; }

.cal-hint { font-size: 12.5px; color: var(--text-muted); margin: 4px 2px; }
.cal-panel { margin-top: 2px; }

@media (max-width: 1100px) {
  .cal-day { min-height: 96px; }
  .cal-chip-x { font-size: 10.5px; }
}

@media (max-width: 860px) {
  .cal-head, .cal-grid { gap: 4px; }
  .cal-head-long { display: none; }
  .cal-head-short { display: inline; }
  .cal-day { min-height: 54px; padding: 5px 4px; border-radius: 9px; align-items: center; }
  .cal-num { font-size: 12px; }
  .cal-items, .cal-more { display: none; }
  .cal-dots { display: flex; margin-bottom: 2px; }
  .cal-legend { width: 100%; margin: 6px 0 0; justify-content: flex-start; }
}

/* ---------- Quick capture ---------- */
/* Quick add is the most used thing in the app and the only action
   that means the same thing on every tab, so it is the one solid
   button on the bar and it never moves. Everything else up there
   is a ghost, because two filled buttons side by side is two
   buttons competing and neither one winning. */
.capture-cta {
  flex-shrink: 0;
  padding: 9px 15px 9px 13px;
  background: var(--accent-grad);
  color: #fff; font-weight: 700; font-size: 13.5px;
  box-shadow: var(--glow);
}
.capture-cta:hover { filter: brightness(1.07); }
.capture-cta:active { transform: translateY(1px); }
.cap-cta-ico, .cap-cta-mic { display: flex; flex-shrink: 0; }
/* The microphone is the half of this nobody would guess at. It is
   quieter than the plus because it is a hint, not a second button. */
.cap-cta-mic { opacity: .72; margin-left: 1px; }
.cap-cta-text { white-space: nowrap; }

/* The phone gets a thumb-sized button above the tab bar instead.
   The bar up top is already carrying a title, a search icon and a
   theme toggle at 390px wide. */
.fab { display: none; }
@media (max-width: 860px) {
  .capture-cta { display: none; }
  .fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; z-index: 95;
    bottom: calc(58px + 18px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border: none; border-radius: 18px;
    cursor: pointer; color: #fff;
    background: var(--accent-grad);
    box-shadow: 0 10px 26px -8px rgba(253, 106, 2, 0.75);
  }
  .fab:active { transform: scale(0.94); }
}

/* The box around this is `overflow: hidden` with a max-height, and
   the search results pane next to it carries `overflow-y: auto`.
   This one never did, so a photo that produced four tasks drew two
   and silently clipped the rest with no way to reach them.
   min-height stays as the empty-state floor; in a flex column it
   also lets the pane shrink to that and scroll instead of pushing
   the box past its max-height. */
.capture-read {
  padding: 16px;
  min-height: 92px;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Stops the page behind the overlay scrolling once this hits its
     end, which on a phone reads as the dialog jumping. */
  overscroll-behavior: contain;
}

.capture-blank, .cap-blank-title {
  color: var(--text-muted); font-size: 13.5px; line-height: 1.6; margin: 0;
}
.capture-blank b {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--dim-3); padding: 1px 5px; border-radius: 4px;
}

.cap-title {
  margin: 0 0 11px; font-size: 16px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--text-primary);
  overflow-wrap: anywhere;
}
.cap-blank-title { font-style: italic; }

.cap-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cap-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  background: var(--dim-3); color: var(--text-secondary);
}
.cap-chip svg { opacity: .8; }
.cap-chip .avatar { width: 16px; height: 16px; font-size: 7px; }

/* Each chip wears the colour of the thing it sets, so the preview
   reads at a glance rather than needing to be parsed. */
.c-client { background: rgba(124, 92, 255, 0.16); color: var(--violet); }
.c-due    { background: var(--accent-soft); color: var(--accent-2); }
.c-none   { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted); }
.c-rem    { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.cap-chip.p-urgent { background: rgba(255, 77, 109, 0.18); color: var(--red); font-weight: 700; }
.cap-chip.p-high   { background: var(--red-bg); color: var(--red); }
.cap-chip.p-low    { background: var(--green-bg); color: var(--green); }
:root[data-theme="light"] .c-due { color: #C25200; }

/* ---------- Quick capture: voice and photo ---------- */
.capture-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.cap-tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.cap-tool:hover:not(:disabled) { background: var(--card-hi); color: var(--text-primary); }
.cap-tool:disabled { opacity: .4; cursor: not-allowed; }
.cap-tool-icon { display: flex; }

/* Recording is a state you can forget you are in, so it is the
   loudest thing on the panel while it lasts. */
.cap-tool.rec {
  background: linear-gradient(135deg, #FF4D6D, #FF8FA3);
  color: #2A0410; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(255, 77, 109, 0.7);
}
.cap-tool-note { font-size: 12px; color: var(--text-muted); margin-left: auto; }

.cap-rec { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 14px; color: var(--text-primary); }
.cap-rec b { font-family: var(--font-mono); font-size: 15px; }
.cap-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red);
  animation: capPulse 1.1s ease-in-out infinite;
}
@keyframes capPulse { 50% { opacity: .25; transform: scale(.8); } }

.cap-busy { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-secondary); font-size: 14px; }
.cap-spin {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cap-dot, .cap-spin { animation: none; }
}

.cap-error { margin: 0; color: var(--red); font-size: 13.5px; line-height: 1.55; }
.cap-heard {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  background: var(--dim-2); color: var(--text-muted);
  font-size: 12.5px; line-height: 1.55;
}

/* ---------- Review cards ---------- */
.cap-cards { display: flex; flex-direction: column; gap: 9px; }
.cap-card {
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
  display: flex; flex-direction: column; gap: 9px;
}
.cap-card.off { opacity: .45; }

.cap-card-top { display: flex; align-items: center; gap: 9px; }
.cap-use input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.cap-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }

.cap-kind, .cap-flag {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
}
.cap-kind { background: rgba(124, 92, 255, 0.16); color: var(--violet); }
.cap-flag { background: var(--amber-bg); color: var(--amber); }

/* Task or reminder, on the review card. It reads like the badge it
   replaced until you notice it is clickable, which is the point:
   the model's guess is visible, and overridable. */
.cap-kind-sw {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: var(--dim-2); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background .15s, color .15s;
}
.cap-kind-sw.on { background: rgba(124, 92, 255, 0.16); color: var(--violet); box-shadow: none; }
.cap-kind-sw input { width: 12px; height: 12px; accent-color: var(--violet); cursor: pointer; margin: 0; }

.cap-card-row { display: flex; gap: 7px; flex-wrap: wrap; }
.cap-card-row .cap-field { flex: 1 1 130px; min-width: 0; }
.cap-field {
  padding: 7px 10px; border: 0; border-radius: 8px;
  background: var(--input-bg); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--input-border);
  font-family: var(--font-body); font-size: 13px; outline: none;
}
.cap-field:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }

.cap-whos { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-who {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 5px; border-radius: 999px; cursor: pointer;
  background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 12.5px; color: var(--text-muted);
}
.cap-who input { display: none; }
.cap-who .avatar { width: 18px; height: 18px; font-size: 8px; }
.cap-who.on {
  background: var(--accent-soft); color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(253, 106, 2, 0.32); font-weight: 600;
}
:root[data-theme="light"] .cap-who.on { color: #C25200; }

.cap-note { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.cap-warn { color: var(--amber); }

.cap-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border);
}

@media (max-width: 860px) {
  .cap-card-row .cap-field { flex: 1 1 100%; }
  .cap-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- What each person handles ---------- */
.person-handles, .person-handles-flat {
  display: block; max-width: 34ch; margin-top: 3px;
  font-size: 11.5px; line-height: 1.4; color: var(--text-muted);
  text-align: left; overflow-wrap: anywhere;
}
.person-handles {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-body);
}
.person-handles:hover { color: var(--accent-2); }
:root[data-theme="light"] .person-handles:hover { color: #C25200; }


/* ---------- Login card: two fixes ---------- */

/* A literal row of dots makes an empty password field look like a
   filled one, so people press Sign in on nothing and wonder why it
   failed. The field still has a placeholder for screen readers and
   for anyone who turns styling off; it just does not draw one. */
#login-password::placeholder { color: transparent; }

/* App-wide the primary button is a gradient with a glow, which is
   right on a dense screen. Here it sits a few centimetres under the
   orange logo mark and the two compete, so on this card only it
   flattens to solid accent. */
.auth-card .btn-primary {
  background: var(--accent);
  box-shadow: none;
}
.auth-card .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: none;
}

/* ---------- Trash ---------- */
/* The countdown is the only thing on the row that is urgent, so it
   is the only thing that gets colour, and only once it is close. */
.trash-row .task-title { opacity: .82; }
.trash-left { color: var(--text-muted); }
.trash-soon { color: var(--amber); font-weight: 600; }