:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f1f0eb;
  --surface-3: #e8e6df;
  --border: #e3e1d9;
  --border-strong: #d3d0c5;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --text-faint: #9a9a94;
  --accent: #f88d50;
  --accent-strong: #e8733a;
  --accent-soft: #fdece0;
  --accent-text: #b5560f;
  --good: #1f9254;
  --good-soft: #e7f6ee;
  --warn: #b5730a;
  --warn-soft: #fbf1de;
  --critical: #c23b3b;
  --critical-soft: #fbecec;
  --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.04);
  --shadow-md: 0 4px 16px rgba(20, 20, 15, 0.10), 0 1px 2px rgba(20, 20, 15, 0.06);
  --radius-lg: 10px;
  --radius-md: 7px;
  --radius-sm: 5px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c0e;
    --surface: #17171a;
    --surface-2: #1e1e22;
    --surface-3: #29292e;
    --border: #2c2c30;
    --border-strong: #3a3a40;
    --text: #f5f5f7;
    --text-muted: #a4a4a9;
    --text-faint: #6f6f75;
    --accent: #f88d50;
    --accent-strong: #ffab74;
    --accent-soft: #3a2416;
    --accent-text: #ffab74;
    --good: #3ecb7e;
    --good-soft: #123023;
    --warn: #e0a123;
    --warn-soft: #33260c;
    --critical: #f2564a;
    --critical-soft: #3a1a1a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --bg: #0c0c0e;
  --surface: #17171a;
  --surface-2: #1e1e22;
  --surface-3: #29292e;
  --border: #2c2c30;
  --border-strong: #3a3a40;
  --text: #f5f5f7;
  --text-muted: #a4a4a9;
  --text-faint: #6f6f75;
  --accent: #f88d50;
  --accent-strong: #ffab74;
  --accent-soft: #3a2416;
  --accent-text: #ffab74;
  --good: #3ecb7e;
  --good-soft: #123023;
  --warn: #e0a123;
  --warn-soft: #33260c;
  --critical: #f2564a;
  --critical-soft: #3a1a1a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
body {
  font-family: var(--font);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--text);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}
header .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
header .logo { height: 22px; width: auto; display: block; }
header .portal-title { color: var(--text-muted); font-weight: 600; }
header nav { display: flex; align-items: center; gap: 2px; }
header nav a {
  color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 100px; transition: background .15s ease, color .15s ease;
}
header nav a:hover { background: var(--surface-2); color: var(--text); }
.daily-btn {
  font-size: 13.5px; font-weight: 700; padding: 7px 14px; border-radius: 100px; border: none;
  cursor: pointer; color: #fff; transition: filter .15s ease;
}
.daily-btn:hover { background: inherit; filter: brightness(0.92); }
.daily-btn.pending { background: var(--critical); }
.daily-btn.submitted { background: var(--good); }

dialog.daily-dialog {
  /* Explicit centering instead of relying on the browser's own <dialog> UA-stylesheet centering
     (usually margin:auto on a fixed inset) - that's inconsistent enough across mobile Safari/
     Chrome that it was landing pinned to the bottom of the screen instead of centered. */
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  border: 1px solid var(--surface-3); border-radius: 14px; padding: 22px 24px; width: min(480px, 92vw);
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25); background: var(--surface); color: var(--text);
}
/* A near-black backdrop barely dims an already near-black page (see --bg) - without this it's
   genuinely centered but doesn't read as a focused modal, just content sitting on the page. */
dialog.daily-dialog::backdrop { background: rgba(0,0,0,0.75); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 15px; }
.dialog-close {
  background: none; border: none; color: var(--text-muted); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 2px 6px;
}
.dialog-close:hover { background: var(--surface-2); border-radius: 6px; }

.quick-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.quick-add-row button { padding: 6px 12px; font-size: 13px; }

details.checkin-cell { min-width: 70px; }
details.checkin-cell > summary { cursor: pointer; white-space: nowrap; }
details.checkin-cell[open] > summary { color: var(--accent-text); }
details.checkin-cell form { white-space: normal; width: 240px; }

/* profile avatar + dropdown, top-right of header */
details.profile-menu { position: relative; display: inline-block; background: none; border: none; box-shadow: none; padding: 0; margin: 0 0 0 6px; }
details.profile-menu > summary { list-style: none; padding: 0; display: block; border-radius: 100px; }
details.profile-menu > summary::-webkit-details-marker { display: none; }
details.profile-menu > summary::before { content: none; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--accent), var(--accent-strong));
  color: white; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.profile-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 110;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 14px 16px; min-width: 160px;
}
.profile-dropdown .profile-name { font-weight: 650; font-size: 14px; }
.profile-dropdown a { color: var(--critical); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.profile-dropdown a:hover { text-decoration: underline; }

main { padding: 28px 24px 60px; max-width: 1180px; margin: 0 auto; }
main:has(.login-box) {
  min-height: calc(100vh - 60px);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%);
  padding: 40px 24px;
}

h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 0; text-wrap: balance; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin-top: 32px; border-bottom: none; padding-bottom: 0; }
h3 { font-size: 14px; font-weight: 650; color: var(--text-muted); }

/* collapsible sections - chevron drawn in CSS, no markup changes needed */
details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
details summary {
  cursor: pointer; font-weight: 650; font-size: 15px; padding: 14px 0;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  flex-shrink: 0;
}
details[open] > summary::before { transform: rotate(45deg); }
details.has-alerts {
  border-color: color-mix(in srgb, var(--critical) 35%, var(--border));
  background: var(--critical-soft);
}
details.has-alerts > summary { color: var(--critical); }
details.has-alerts > summary::before { border-color: var(--critical); }
details.has-alerts table { background: var(--surface); }

/* Edit / Log next step / History: small buttons that never move. Each opens a floating panel
   below itself (like the profile menu) instead of pushing the row down. */
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-top .card-info { flex: 1 1 auto; min-width: 0; }
.card-actions { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; flex-wrap: wrap; position: relative; }
details.edit-toggle {
  display: inline-block; background: none; border: none; box-shadow: none;
  padding: 0; margin: 0; flex-shrink: 0;
}
details.edit-toggle > summary {
  list-style: none; font-weight: 600; font-size: 13px; padding: 6px 13px;
  border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
details.edit-toggle > summary::before { content: none; }
details.edit-toggle > summary::-webkit-details-marker { display: none; }
details.edit-toggle > summary::after {
  content: "▾"; font-size: 10px; color: var(--text-faint); transition: transform .15s ease;
}
details.edit-toggle > summary:hover { background: var(--surface-3); border-color: var(--text-faint); }
details.edit-toggle[open] > summary {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text);
}
details.edit-toggle[open] > summary::after { transform: rotate(180deg); color: var(--accent); }
details.edit-toggle .card {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 108;
  width: min(440px, 90vw); max-height: 70vh; overflow-y: auto;
  margin-top: 0; margin-bottom: 0;
}

.table-scroll { overflow-x: auto; margin-bottom: 16px; }
.table-scroll table { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; white-space: nowrap; }
th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); background: none; }
tr:hover { background: var(--surface-2); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, border-color .15s ease;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; background: var(--accent-soft); color: var(--accent-text); }
.badge-green, .badge-active, .badge-done, .badge-approved, .badge-paid { background: var(--good-soft); color: var(--good); }
.badge-amber, .badge-pending, .badge-working, .badge-under_review { background: var(--warn-soft); color: var(--warn); }
.badge-red, .badge-unpaid, .badge-changes_needed, .badge-exhausted, .badge-expired, .badge-not_started, .badge-overdue { background: var(--critical-soft); color: var(--critical); }
.badge-not-started { background: var(--surface-2); color: var(--text-muted); }

/* row-wise client/editor health tint - a box-shadow on the first cell instead of a <tr> border,
   since borders render inconsistently with border-collapse across browsers */
tr.row-green td:first-child { box-shadow: inset 3px 0 0 var(--good); }
tr.row-amber td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.row-red td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
tr.row-red { background: var(--critical-soft); }

.step-progress { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 2px; }
.step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.step-dot.filled { background: var(--accent); }
.step-dot.done { background: var(--good); }
.step-dot.rework { background: var(--warn); }

form.inline { display: inline; }
/* Every label is its own self-contained unit (text above, control below) that wraps as one
   piece - this is what keeps a field's text and its input from splitting onto different lines
   when the container gets narrow (a floating panel, a phone screen). */
label {
  display: inline-flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--text-muted); font-weight: 500;
  margin: 0 12px 12px 0; vertical-align: top; max-width: 100%;
}
input, select, textarea, button { font-family: inherit; font-size: 14px; padding: 8px 11px; }
input, select, textarea {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
button {
  cursor: pointer; background: var(--accent); color: white; border: none;
  border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 600;
  box-shadow: var(--shadow-sm); transition: background .15s ease, transform .12s ease;
}
button:hover { background: var(--accent-strong); }
button.secondary { background: var(--surface-2); color: var(--text); box-shadow: none; }
button.secondary:hover { background: var(--surface-3); }
/* A link that should look like a button - e.g. "View Checklist & Editing SOP" opening an
   external doc in a new tab, where a <button> (which can't navigate on its own) doesn't fit. */
a.secondary {
  display: inline-flex; align-items: center; cursor: pointer; text-decoration: none;
  background: var(--surface-2); color: var(--text); border: none;
  border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 600;
}
a.secondary:hover { background: var(--surface-3); }

.flags { color: var(--critical); font-size: 12px; font-weight: 600; }

.login-box {
  width: 100%; max-width: 380px; margin: 0 auto;
  background: var(--surface); padding: 40px 36px 32px;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.login-logo { height: 30px; width: auto; display: block; margin-bottom: 22px; }
.login-box h1 { font-size: 22px; margin-bottom: 6px; }
.login-box input { width: 100%; margin-bottom: 12px; padding: 11px 13px; }
.error { color: var(--critical); margin-bottom: 12px; font-size: 13.5px; font-weight: 500; }
.muted { color: var(--text-faint); font-size: 13px; }

/* ---------- client kanban ---------- */
.kanban-board {
  display: flex; gap: 14px; overflow-x: auto; align-items: flex-start;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  /* CSS-only left/right scroll cues, no JS: two fade layers scroll WITH the content
     (background-attachment: local) to mask the edges, two shadow layers stay fixed to the
     viewport (background-attachment: scroll) so they only show while there's actually more
     to reveal in that direction - the classic Lea Verou "scroll shadow" trick. */
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
  background-position: left, right, left, right;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.kanban-column { flex: 0 0 240px; }
.kanban-column h3 { font-size: 14px; margin-bottom: 10px; }
.client-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.add-video-btn {
  padding: 9px 18px; border-radius: 100px; border: none;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.add-video-btn:hover { filter: brightness(0.94); }
.kanban-card { margin-bottom: 10px; padding: 12px 14px; }
.kanban-card.kanban-needs-review { border-color: var(--critical); background: var(--critical-soft); }
.kanban-card details { margin-top: 8px; }
.kanban-card details summary { font-size: 12.5px; cursor: pointer; color: var(--accent-text); }
.kanban-card ul { margin-top: 6px; padding-left: 18px; font-size: 12.5px; }

/* ---------- editor sidebar + detail layout ---------- */
main:has(.editor-shell) { max-width: none; padding: 0; }
.editor-shell { display: flex; align-items: flex-start; }
.editor-sidebar {
  width: 280px; flex-shrink: 0; border-right: 1px solid var(--border);
  height: calc(100vh - 60px); overflow-y: auto; position: sticky; top: 60px;
  padding: 18px 12px; background: var(--surface);
}
.editor-sidebar h3 {
  margin: 18px 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-faint);
}
.editor-sidebar h3:first-of-type { margin-top: 4px; }
.editor-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--text); font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.editor-nav-item:hover { background: var(--surface-2); }
.editor-nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.editor-nav-item .nav-flag {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px;
  background: var(--critical); color: #fff; font-size: 10px; font-weight: 700;
}
.editor-main { flex: 1 1 auto; padding: 28px 32px 60px; min-width: 0; max-width: 900px; }

.project-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; flex-shrink: 0; vertical-align: middle; }

/* ---------- deliverable groups (episodes) ---------- */
.count-pill { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--text-faint); background: var(--surface-2); border-radius: 100px; padding: 1px 7px; }

.group-toggle { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s ease; }
.group-toggle svg { width: 8px; height: 8px; }
.group-toggle.open { transform: rotate(90deg); }
.group-children { padding-left: 18px; overflow: hidden; }
.group-children.collapsed { display: none; }
.group-children .editor-nav-item { font-size: 13px; padding: 7px 10px; }
.stage-tick { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.stage-tick.done { background: var(--good); }
.stage-tick.progress { background: var(--accent); }
.stage-tick.pending { background: var(--border-strong); }

/* Per-task "..." options menu in the sidebar (mark done / rename / delete). Deliberately NOT
   the .edit-toggle popout pattern (position: absolute) - that's clipped by .editor-sidebar's own
   overflow-y: auto the moment a row scrolls near the bottom. This expands in-flow instead. */
.sidebar-row { display: flex; align-items: center; gap: 2px; }
.sidebar-row .editor-nav-item { flex: 1 1 auto; min-width: 0; }
.sidebar-kebab {
  flex-shrink: 0; background: none; border: none; box-shadow: none;
  padding: 0; margin: 0; border-radius: 0;
}
.sidebar-kebab > summary {
  list-style: none; cursor: pointer; padding: 4px 7px; border-radius: var(--radius-sm);
  color: var(--text-faint); font-weight: 700; font-size: 13px;
}
.sidebar-kebab > summary::before { content: none; }
.sidebar-kebab > summary::-webkit-details-marker { display: none; }
.sidebar-kebab > summary:hover { background: var(--surface-2); color: var(--text); }
.sidebar-kebab[open] > summary { background: var(--surface-2); color: var(--text); }
/* Stacked full-width rows, not an inline input+button row - the sidebar is too narrow (280px,
   less padding) for those to sit side by side without overflowing (input text and the button
   both got clipped at the sidebar's edge). Panel background is --surface, one step lighter than
   the buttons' own --surface-2, so a button is visible against it instead of blending in. */
.sidebar-kebab-panel {
  margin: 4px 0 8px; padding: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 6px;
}
.sidebar-kebab-panel form { display: flex; flex-direction: column; gap: 6px; }
.sidebar-kebab-panel input[type="text"] { width: 100%; }
.sidebar-kebab-panel button { width: 100%; text-align: left; }

/* ---------- editor portal: Notion-style flat rows ----------
   Scoped to body.role-editor so the manager/owner/client views (not part of this pass) keep
   their existing boxed look. Notion's own list rows carry no border or shadow of their own -
   just padding and a hover tint - and its inline actions (the "..." menu, block controls) stay
   invisible until you're actually pointed at that row, not permanently-visible chip buttons. */
body.role-editor .task-list { display: flex; flex-direction: column; }
body.role-editor .task-row-flat {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px; margin: 0 -6px;
  border-radius: var(--radius-sm); position: relative;
}
body.role-editor .task-row-flat:hover { background: var(--surface-2); }
body.role-editor .task-checkbox {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer;
  flex-shrink: 0; position: relative; margin: 0; transition: background .12s ease, border-color .12s ease;
}
body.role-editor .task-checkbox:checked { background: var(--good); border-color: var(--good); }
body.role-editor .task-checkbox:checked::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 8px;
  border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
body.role-editor .task-checkbox:disabled { cursor: default; opacity: 0.6; }
body.role-editor .task-row-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px;
  text-decoration: none; color: var(--text); font-size: 13.5px;
}
body.role-editor .task-row-link > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.role-editor .task-row-link .muted { flex-shrink: 0; font-size: 12px; }
body.role-editor .done-text { text-decoration: line-through; color: var(--text-faint); }
/* the "..." only shows once you're pointed at (or already have open) its own row */
body.role-editor .task-row-flat .edit-toggle { opacity: 0; transition: opacity .1s ease; }
body.role-editor .task-row-flat:hover .edit-toggle,
body.role-editor .task-row-flat .edit-toggle[open] { opacity: 1; }
body.role-editor .add-task-toggle { margin-top: 4px; }

/* Edit / Log next step / +Add subtask / History / Comments triggers - a plain low-emphasis
   label instead of a permanently bordered chip button, so five of them in a row read as a
   toolbar, not a wall of buttons. Still gets a background the moment it's hovered or open. */
body.role-editor details.edit-toggle > summary {
  background: none; border: none; padding: 5px 8px; font-weight: 600; color: var(--text-muted);
}
body.role-editor details.edit-toggle > summary:hover { background: var(--surface-2); color: var(--text); }
body.role-editor details.edit-toggle[open] > summary { background: var(--surface-2); border: none; color: var(--accent-text); }
body.role-editor .badge { padding: 2px 8px; font-size: 10.5px; }
/* The Alerts box on Overview - flatten it the same way, scoped by id so the manager/owner
   dashboard's own #alerts (out of scope this pass) keeps its current boxed look. */
body.role-editor #alerts {
  background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; margin-bottom: 22px;
}
body.role-editor #alerts.has-alerts { background: none; }
body.role-editor #alerts > summary { padding: 2px 0 10px; font-size: 14px; }
body.role-editor #alerts td .badge { padding: 2px 8px; font-size: 10.5px; }
body.role-editor .editor-sidebar { padding: 14px 8px; }
body.role-editor .editor-nav-item { padding: 6px 8px; font-size: 13px; }
body.role-editor .group-children .editor-nav-item { padding: 5px 8px; font-size: 12.5px; }
body.role-editor button { box-shadow: none; }
body.role-editor .sidebar-kebab-panel button { padding: 6px 10px; font-size: 12.5px; }
/* A touchscreen has no hover to reveal the "..." with - this is a PWA editors use on phones,
   so keep it visible there regardless of viewport width (tablets can be wide and still touch). */
@media (hover: none) {
  body.role-editor .task-row-flat .edit-toggle { opacity: 1; }
}

.expand-btn { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); cursor: pointer; flex-shrink: 0; }
.group-members { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.group-members.collapsed { display: none; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 13px; }
.member-row .d-title { font-size: 13px; margin: 0; flex: 1; }

.delivery-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; margin-top: 14px; }
.post-date-row { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.post-date-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; }
.post-date-value { font-size: 15px; font-weight: 650; }
.delivery-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; }
.delivery-item + .delivery-item { border-top: 1px solid var(--border); }
.delivery-item .d-title { font-weight: 600; font-size: 13.5px; width: 130px; flex-shrink: 0; }
.tracker { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 220px; }
.tracker-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); }
.tracker-seg.done { background: var(--good); }
.tracker-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-strong); flex-shrink: 0; }
.tracker-dot.done { background: var(--good); border-color: var(--good); }
.tracker-dot.current { background: var(--accent); border-color: var(--accent); }
.stage-label { font-size: 12px; color: var(--text-muted); width: 110px; text-align: right; flex-shrink: 0; }
.stage-label.current { color: var(--accent-text); font-weight: 650; }
.stage-label.done { color: var(--good); font-weight: 650; }
.stage-label.notstarted { color: var(--text-faint); }
.stage-date { font-size: 11px; color: var(--text-faint); width: 66px; text-align: right; flex-shrink: 0; }

.task-progress-header { margin: 4px 0 18px; }
.task-progress-bar { background: var(--surface-2); border-radius: 100px; height: 6px; overflow: hidden; margin-top: 6px; max-width: 320px; }
.task-progress-fill { background: var(--good); height: 100%; }

.task-row-list { display: flex; flex-direction: column; gap: 2px; }
.task-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
  border: 1px solid transparent;
}
.task-row:hover { background: var(--surface-2); border-color: var(--border); }
.task-row-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid; flex-shrink: 0; }
.task-row-body { display: flex; flex-direction: column; gap: 2px; }
.task-row-title { font-weight: 600; font-size: 14px; }

/* ---------- client list/calendar views ---------- */
.view-toggle { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 100px; flex-shrink: 0; }
.view-toggle a { padding: 7px 16px; border-radius: 100px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--text-muted); }
.view-toggle a:hover { color: var(--text); }
.view-toggle a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.calendar-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.calendar-nav a { font-weight: 700; text-decoration: none; color: var(--text-muted); padding: 4px 12px; border-radius: 8px; background: var(--surface-2); }
.calendar-nav a:hover { background: var(--surface-3); }
.calendar-nav strong { font-size: 15px; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-weekday { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); text-align: center; padding-bottom: 4px; }
.calendar-day { min-height: 92px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.calendar-day.out-of-month { opacity: 0.4; }
.calendar-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.calendar-day-num { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.calendar-video-chip {
  display: block; font-size: 11.5px; padding: 3px 6px; margin-bottom: 3px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  header { flex-wrap: wrap; gap: 8px; padding: 10px 14px; row-gap: 6px; }
  header .brand { flex: 1 1 auto; }
  header .portal-title { display: none; }
  header nav { flex-wrap: wrap; gap: 2px; order: 3; flex-basis: 100%; }
  header nav a { padding: 6px 9px; font-size: 12.5px; }
  main { padding: 16px 14px 40px; }
  h1 { font-size: 21px; }
  details { padding: 2px 14px; }
  details summary { font-size: 14px; padding: 12px 0; }
  .card { padding: 13px 14px; }
  .card-top { gap: 8px; }
  .card-actions { width: 100%; }
  /* the floating panel goes full-width under the card instead of a fixed box that could
     overflow a narrow screen regardless of which button opened it */
  details.edit-toggle .card {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    width: auto; max-width: none; max-height: 60vh;
  }
  .profile-dropdown { right: -10px; }
  label { margin-right: 8px; }
  .login-box { padding: 32px 22px 26px; }
  .calendar-grid { gap: 4px; }
  .calendar-day { min-height: 56px; padding: 4px; }
  .calendar-weekday { font-size: 10px; }
  .calendar-video-chip { font-size: 10px; padding: 2px 4px; }
  .client-toolbar { flex-direction: column; align-items: stretch; }
  .view-toggle { justify-content: center; }
  .editor-shell { flex-direction: column; }
  .editor-sidebar { width: 100%; height: auto; max-height: 260px; position: static; border-right: none; border-bottom: 1px solid var(--border); }
  .editor-main { padding: 18px 14px 40px; max-width: none; }
}