/* ==========================================================================
   Mythic Dashboard - design system
   Palette: black + cream + gold, matching the sites (Prestige/FLB/etc.)
   Typography: Playfair Display for headings + numeric callouts, Inter for UI.
   ========================================================================== */

:root {
  --ink:        #0f1216;
  --ink-2:      #24272d;
  --text:       #2b2f36;
  --text-2:     #5b616b;
  --muted:      #8b909a;
  --line:       #e4e2db;
  --line-2:     #efece3;
  --bg:         #f8f6ef;
  --card:       #ffffff;
  --cream:      #fbf9f2;
  --cream-2:    #f6f4ec;
  --gold:       #c9a35c;
  --gold-2:     #ccb7a3;
  --gold-soft:  rgba(201, 163, 92, 0.12);
  --gold-mid:   rgba(201, 163, 92, 0.35);
  --blue:       #2c4f89;
  --green:      #2f7d4f;
  --red:        #b0413e;
  --amber:      #c67d2c;
  --shadow-1:   0 1px 2px rgba(15,20,30,.05), 0 2px 8px rgba(15,20,30,.04);
  --shadow-2:   0 4px 14px rgba(15,20,30,.07), 0 12px 28px rgba(15,20,30,.06);
  --radius:     10px;
  --radius-lg:  14px;
  --sidebar:    240px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body.dash {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Sidebar --------------------------------------------------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar);
  background: #000;
  color: #eaeaea;
  padding: 22px 14px 18px;
  display: flex; flex-direction: column;
  border-right: 1px solid #14161a;
  z-index: 10;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 24px;
  border-bottom: 1px solid #1a1c22;
  margin-bottom: 18px;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gold); color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 20px;
}
.brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 500; color: #fff;
  letter-spacing: -0.005em;
}
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-foot { border-top: 1px solid #1a1c22; padding-top: 12px; margin-top: 14px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  color: #bfc0c5;
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.nav-item svg { flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: #14171d; color: #fff; }
.nav-item.is-active {
  background: rgba(201,163,92,0.14);
  color: #fff;
}
.nav-item.is-active svg { color: var(--gold); opacity: 1; }

/* ---------- Main + topbar --------------------------------------------- */
.main {
  margin-left: var(--sidebar);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.topbar {
  height: 64px;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.topbar-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em;
}
.topbar-right { display: flex; align-items: center; gap: 20px; }
.notif { position: relative; color: var(--text-2); }
.notif:hover { color: var(--ink); }
.notif .badge {
  position: absolute; top: -4px; right: -6px;
  background: var(--red); color: #fff;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.topbar-user-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}

.page { padding: 32px; max-width: 1400px; }

/* ---------- Section headings ------------------------------------------ */
.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 18px;
}
.section-lede {
  color: var(--text-2);
  font-size: 14px;
  margin: -10px 0 24px;
}

/* ---------- Financial pills (Overview) -------------------------------- */
.pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1100px) { .pills { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pills { grid-template-columns: 1fr; } }

.pill {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 20px 20px;
  box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.pill::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--gold);
  opacity: .82;
}
.pill-label {
  font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2);
  font-weight: 700;
  margin-bottom: 8px;
}
.pill-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px; font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.pill-sub {
  margin-top: 6px;
  font-size: 12.5px; color: var(--muted);
}
.pill.pill-danger .pill-value { color: var(--red); }

/* ---------- Table (Account Breakdown, Billing, etc.) ------------------ */
.tbl-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.tbl {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 14px;
}
.tbl thead th {
  background: var(--cream);
  color: var(--text-2);
  font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.tbl thead th.num { text-align: right; }
.tbl tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
.tbl tbody tr:hover td { background: var(--cream); }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td .acct-name {
  font-weight: 600; color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15.5px; letter-spacing: -0.005em;
}
.tbl td .acct-slug { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Status pill */
.stat-pill {
  display: inline-block; padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.stat-coming_soon    { background: #eeeae0; color: #7a6b47; border-color: #ddd6c0; }
.stat-planning       { background: #e6efff; color: #2c4f89; border-color: #cadbf7; }
.stat-in_development { background: #fff2dc; color: #955a12; border-color: #f4dbaa; }
.stat-in_review      { background: #f0e4ff; color: #5a3a86; border-color: #ddcaf0; }
.stat-live           { background: #e2f3e5; color: #22633f; border-color: #b7dfc2; }
.stat-live_seo       { background: var(--gold-soft); color: #7a5622; border-color: var(--gold-mid); }

/* Task badge in table */
.tbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  background: var(--gold); color: #111;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.tbadge.zero { background: #ecece6; color: var(--muted); }
.tbadge.reopened { background: var(--red); color: #fff; }

/* ---------- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink); color: #fff;
}
.btn-primary:hover { background: #000; }
.btn-gold {
  background: var(--gold); color: #111;
}
.btn-gold:hover { background: #b7913f; }
.btn-outline {
  background: transparent; color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost {
  background: transparent; color: var(--text-2);
}
.btn-ghost:hover { background: var(--cream); color: var(--ink); }

/* ---------- Login page ------------------------------------------------
   FIX: earlier version omitted font-family on body.login, so labels,
   inputs, checkbox text, and the sign-in button fell through to the
   browser's default serif. Every UI element in this block now inherits
   from body.login's Inter stack (matching body.dash); h1 keeps its
   explicit Playfair. Also: readable subtitle contrast, gold accent on
   checkbox and focus rings, autofill preserved on the dark surface,
   and a mobile breakpoint at 420px.
   ------------------------------------------------------------------- */
body.login {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #000;
  color: #eaeaea;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  background: #141618;
  border: 1px solid #24272d;
  border-radius: 14px;
  padding: 40px 36px 32px;
  width: 100%; max-width: 400px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.login-brand {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 28px;
}
.login-brand .brand-mark {
  width: 48px; height: 48px; border-radius: 12px; font-size: 26px;
  margin-bottom: 14px;
}
.login-brand h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 26px; color: #fff;
  margin: 6px 0 0;
  letter-spacing: -0.005em;
}
.login-brand p {
  font-family: inherit;
  color: #adb2bb; font-size: 13px;
  margin: 8px 0 0;
  letter-spacing: 0.01em;
}
.login-card label {
  font-family: inherit;
  display: block; color: #cfd2d8;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.login-card input[type=email],
.login-card input[type=password],
.login-card input[type=text] {
  font-family: inherit;
  width: 100%; padding: 12px 14px;
  background: #0a0a0a; color: #fff;
  border: 1px solid #2a2d33;
  border-radius: 10px;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-card input::placeholder { color: #6b6f77; }
.login-card input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 163, 92, 0.18);
}
/* Autofill: keep dark surface + white text instead of Chrome's yellow */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #fff;
}
.login-card .field { margin-bottom: 18px; }
.login-card .check {
  font-family: inherit;
  display: flex; align-items: center; gap: 10px;
  color: #cfd2d8; font-size: 13.5px;
  letter-spacing: 0.005em;
  margin: 4px 0 24px;
  cursor: pointer;
}
.login-card .check input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  margin: 0;
}
.login-card .btn {
  font-family: inherit;
  width: 100%; justify-content: center;
  padding: 13px 18px;
  background: var(--gold); color: #111;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.login-card .btn:hover { background: #b7913f; }
.login-card .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 163, 92, 0.35), 0 0 0 5px rgba(0, 0, 0, 0.9);
}
.login-error {
  font-family: inherit;
  background: rgba(176,65,62,0.16);
  border: 1px solid rgba(176,65,62,0.35);
  color: #ffb1af;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* Login: mobile breakpoint — tighter padding, no overflow at 375px viewports */
@media (max-width: 420px) {
  body.login { padding: 16px; }
  .login-card { padding: 32px 24px 28px; border-radius: 12px; }
  .login-brand { margin-bottom: 24px; }
  .login-brand .brand-logo { max-width: 170px; }
  .login-brand h1 { font-size: 24px; }
}

/* ---------- Forms (generic) ------------------------------------------- */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=number],
.form-row input[type=date],
.form-row input[type=url],
.form-row select,
.form-row textarea {
  padding: 10px 12px;
  /* Warm, lightly-tinted field so every form on the dashboard reads as one
     system. Slightly lighter than the older .acct-form cream (#faf5ea);
     matches the AUD-013/014 .form-input rule below so .form-row and the
     newer .form-field vocabulary produce visually identical controls. */
  background: #fcfaf3;
  border: 1px solid #d9cfba;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--gold-mid);
  box-shadow: 0 0 0 3px rgba(201,163,92,0.22);
}
.form-row textarea { min-height: 100px; resize: vertical; }

/* ---------- Utility --------------------------------------------------- */
.stack > * + * { margin-top: 24px; }
.row { display: flex; gap: 16px; align-items: center; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); }
.big-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* 2026-08-22  White Mythic Enterprises logo replaces the "M" mark */
.brand-logo {
  display: block;
  max-width: 160px;
  width: 100%;
  height: auto;
}
.login-brand .brand-logo {
  max-width: 200px;
  margin-bottom: 14px;
}
.brand { justify-content: center; padding-bottom: 20px; }
/* ==========================================================================
   Mythic Dashboard - Account Detail additions
   Appended to dash.css via <link> in phase 2.
   ========================================================================== */

/* Account header */
.acct-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap; gap: 16px;
}
.acct-head-title {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.acct-head-title h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 28px; margin: 0;
  color: var(--ink); letter-spacing: -0.01em;
}
.acct-head-urls a {
  font-size: 13px; color: var(--blue);
  margin-right: 14px;
}
.acct-head-urls a:hover { text-decoration: underline; }

.card-inner {
  padding: 22px 26px;
}

/* Active plan strip */
.plan-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 900px) { .plan-stats { grid-template-columns: repeat(2, 1fr); } }
.plan-stat-l {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.plan-stat-v {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 24px;
  color: var(--ink); letter-spacing: -0.005em;
}

/* Post-an-update tabbar + panes */
.tabbar {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.tabbar .tab {
  padding: 9px 16px 11px;
  border: none; background: transparent;
  color: var(--text-2);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tabbar .tab:hover { color: var(--ink); }
.tabbar .tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.pane { display: none; }
.pane.is-active { display: block; }
.pane-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 900px) { .pane-grid { grid-template-columns: repeat(2, 1fr); } }
.form-row-check {
  display: flex; align-items: flex-end; padding-bottom: 8px;
}
.check-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text);
}

/* Weekly calendar */
.wcal { display: flex; flex-direction: column; gap: 22px; }
.wcal-month {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  padding: 16px 18px;
}
.wcal-month-h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 19px;
  margin: 0 0 12px;
  color: var(--ink); letter-spacing: -0.005em;
}
.wcal-week {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.wcal-week-h {
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.wcal-empty { color: var(--muted); font-size: 12.5px; font-style: italic; }
.wcal-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.wcal-blog-h {
  margin: 10px 0 4px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.wcal-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  padding: 3px 0;
}
.wcal-item.is-done { color: var(--muted); }
.wcal-item.is-done .wcal-title { text-decoration: line-through; }
.wcal-check {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
}
.wcal-check.on {
  background: var(--green); border-color: var(--green);
}

/* Task cards */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.task-card:hover { border-color: var(--gold-mid); }
.task-card.is-reopened {
  border-left: 3px solid var(--red);
  background: rgba(176,65,62,0.03);
}
.task-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.task-title {
  font-weight: 600; color: var(--ink);
  font-size: 14.5px;
  margin-bottom: 6px;
}
.task-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12px;
}
.task-body {
  margin-top: 8px; color: var(--text);
  font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap;
}
.task-url {
  margin-top: 6px;
  font-size: 12px; color: var(--blue);
  word-break: break-all;
}
.task-actions .btn { padding: 6px 14px; font-size: 12.5px; }

/* Chips */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #e4e2db; color: #6a6a6a;
}
.chip-seo   { background: rgba(201,163,92,0.18); color: #7a5622; }
.chip-dev   { background: rgba(74,109,165,0.18); color: #2c4f89; }
.chip-blog  { background: rgba(47,125,79,0.18);  color: #22633f; }
.chip-owner { background: rgba(198,125,44,0.18); color: #955a12; }
.chip-reopened { background: rgba(176,65,62,0.16); color: var(--red); }

/* Done list */
.done-list {
  list-style: none; padding: 0; margin: 0;
}
.done-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--text-2);
}
.done-list li:last-child { border-bottom: none; }
.done-list li span:nth-child(2) { text-decoration: line-through; }
.done-check {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
  flex-shrink: 0;
}
.done-check::after {
  content: ''; position: absolute;
  left: 3px; top: 6px;
  width: 4px; height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transform-origin: center;
}

/* =============================================================================
   AUD-013 / AUD-014: shared form-control system.
   One vocabulary for every dashboard form so equivalent controls look
   identical across pages. Replaces the per-page inline-style duplication and
   the divergent .acct-form / #task-detail-modal per-scope rules.
   Coexists with the older generic .form-row rules above — those still work
   for legacy markup; new code should use .form-field / .form-input / etc.
   ============================================================================= */

/* Field wrapper */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

/* Standardized input / select / textarea. All three share height, padding,
   border, radius, focus state — the only difference is textarea min-height.
   Warm cream field on load, brightens to white on focus with a gold ring.
   Matches the .form-row rule above so both vocabularies render identically. */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d9cfba;
  border-radius: 8px;
  background: #fcfaf3;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing: border-box;
}
.form-textarea { min-height: 88px; resize: vertical; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--gold-mid);
  box-shadow: 0 0 0 3px rgba(201,163,92,0.22);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: rgba(0,0,0,0.03);
  color: var(--muted);
  cursor: not-allowed;
}
/* Compact variant for in-table editable rows (e.g. settings-qbo mappings). */
.form-input-sm { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; }
/* Mono variant when the value is a code / id. */
.form-input-mono { font-family: 'SF Mono', Menlo, monospace; }

/* Label above field. Also matches bare <label> inside .form-field. */
.form-label,
.form-field > label {
  display: block;
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}
/* Inline hint next to a label (was `<span class="muted" style="font-weight:400;">`). */
.form-label .hint,
.form-field > label .hint { color: var(--muted); font-weight: 400; margin-left: 4px; }

/* Two-column grid; collapses to one column below 720px. */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 14px;
}
@media (max-width: 720px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* Button row at the bottom of a form. */
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Compact horizontal toolbar for filter rows (e.g. tasks kanban filter).
   Reusable: any .form-input/.form-select/.form-textarea placed inside a
   .filter-bar shrinks to its content width instead of stretching to 100%.
   Combine with .form-input-sm for the compact height. */
.filter-bar {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-bar .form-input,
.filter-bar .form-select,
.filter-bar .form-textarea { width: auto; }

/* --- Modal shell (used by tasks new/edit modal, task-detail modal, etc.) --- */
.modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal-panel {
  background: #fff;
  border-radius: 12px;
  padding: 26px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.modal-panel-lg { max-width: 640px; }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.modal-head .section-title { margin: 0; font-size: 18px; }
.modal-close {
  background: none; border: none;
  font-size: 24px; color: var(--muted);
  cursor: pointer; line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: var(--ink); }

/* --- Alert banners (page-level flash / error messages) --- */
.alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  border: 1px solid transparent;
  margin-bottom: 14px;
}
.alert:last-child { margin-bottom: 0; }
.alert-success {
  background: rgba(47,125,79,0.16);
  border-color: rgba(47,125,79,0.35);
  color: #22633f;
}
.alert-warning {
  background: rgba(198,125,44,0.16);
  border-color: rgba(198,125,44,0.35);
  color: #955a12;
}
.alert-error {
  background: rgba(176,65,62,0.10);
  border-color: rgba(176,65,62,0.35);
  color: #8f2e2e;
}

/* --- Danger-styled outline button (delete / void / danger-zone). --- */
.btn.btn-danger-outline {
  color: var(--red);
  border-color: rgba(176,65,62,0.4);
}
.btn.btn-danger-outline:hover {
  background: rgba(176,65,62,0.06);
  border-color: rgba(176,65,62,0.55);
}

/* Task type: Review (added 2026-09-18). Teal, distinct from the gold SEO chip,
   the purple Digital Strategy chip and the blue DEV chip at the same opacity so
   the row reads as one family. Contrast checked against the chip background. */
.chip-review { background: rgba(38,124,124,0.18); color: #1b5c5c; }

/* Kanban card: who the task is for (added 2026-09-18).
   Deliberately quiet: one small line under the type chip, so it reads at a
   glance without competing with the title or crowding the card. */
.kanban-card-assignee {
    font-size: 11.5px;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--muted, #7b8794);
    margin: 4px 0 2px;
}

/* =====================================================================
   Scrape & Build (added 2026-09-18).

   Built from the existing vocabulary: .tbl-wrap/.card-inner for surfaces,
   .section-title for headings, .form-* for inputs, .alert-* for messages.
   What is new here is only what the stage list actually needs, and it uses
   the same tokens as everything else so the screen reads as one system.

   The stage colours are deliberately quiet. A stage that has not run is not
   a problem and must not look like one; only a genuine failure is red.
   ===================================================================== */

.bhead { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.bhead-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bprogress { margin: 16px 0 4px; font-size: 14px; color: var(--text-2); }
.bform { max-width: 560px; }
.brow { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.brow form { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
/* A file path or a URL is one long unbreakable token. Left alone it pushes
   its container past the viewport on a phone, which is what it did on the
   first responsive pass of this screen. It must wrap anywhere. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere; word-break: break-word;
}
.tight { margin: 8px 0 0; padding-left: 20px; }
.tight li { margin-bottom: 3px; }
.bsub { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--text-2); font-weight: 700; margin: 22px 0 10px; }

.bstages { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bstage {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; background: var(--card);
}
.bstage-row-failed  { border-color: rgba(176,65,62,0.4); background: rgba(176,65,62,0.03); }
.bstage-row-complete{ border-color: rgba(47,125,79,0.32); }

.bstage-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bstage-n {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-2);
}
.bstage-label { font-weight: 600; font-size: 15px; color: var(--ink); }
.bstage-badge {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.bstage-ok    { background: rgba(47,125,79,0.16);  color: #22633f; }
.bstage-bad   { background: rgba(176,65,62,0.12);  color: #8f2e2e; }
.bstage-muted { background: rgba(0,0,0,0.05);      color: var(--muted); }
.bstage-ok-text  { color: #22633f; font-weight: 600; }
.bstage-bad-text { color: #8f2e2e; font-weight: 600; }

.bstage-blurb  { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.bstage-detail { margin: 6px 0 0; font-size: 13.5px; color: var(--ink); }
.bstage-src    { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

.bstage-counts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; }
.bstage-counts > div { display: flex; flex-direction: column; }
.bstage-counts dt { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
                    color: var(--text-2); font-weight: 700; }
.bstage-counts dd { margin: 2px 0 0; font-size: 14px; color: var(--ink);
                    font-variant-numeric: tabular-nums; }

.bstage-how { margin-top: 10px; }
.bstage-how summary { cursor: pointer; font-size: 13px; color: var(--blue); }
.bstage-cmd {
  margin: 8px 0 4px; padding: 10px 12px; background: var(--cream);
  border: 1px solid var(--line-2); border-radius: 8px;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* A table has a minimum width its columns cannot go below. Rather than let it
   push the page sideways, give it its own scroller: the page stays put and the
   table scrolls within it. The overflow probe in the QA harness skips elements
   whose own overflow-x is auto or scroll, for exactly this reason. */
.btable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bevents { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.bevents li { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.bevents li:last-child { border-bottom: none; }

.bfinish { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bdanger { margin-top: 20px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.bdanger > summary { cursor: pointer; font-size: 13px; color: var(--red); font-weight: 600; }
.bdanger-body { margin-top: 12px; max-width: 620px; font-size: 13.5px; }

/* Nothing on this screen may force the page wider than the phone it is on. */
.bhead, .bhead > div, .bstage, .bevents li, .bdanger-body { min-width: 0; }
.bstage-detail, .bstage-blurb, .bstage-src, .bprogress { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .bhead { flex-direction: column; }
  .bhead-actions { width: 100%; }
  .bstage-badge { margin-left: 0; }
  .bstage-counts { gap: 6px 16px; }
  .brow { gap: 18px; }
  .brow form { max-width: 100%; }
  .bform { max-width: 100%; }
}

/* =====================================================================
   Responsive shell (added 2026-09-18).

   THE PROBLEM THIS FIXES
     .sidebar is position:fixed at var(--sidebar), 240px, and .main carries a
     matching margin-left. Those never changed with the viewport, so at 390px
     the sidebar took 240 of 390 and every page on BOTH portals rendered into
     150px. Measured on Overview, Accounts, Billing, Reports, My Tasks, Scrape
     & Build and the owner board: identical on all of them.

   THE FIX
     Above 900px: nothing changes. The rules below live entirely inside a
     max-width media query, and the toggle button is display:none by default,
     so 1024, 1440, 1920 and 2560 render exactly as before.

     At 900px and below: the sidebar becomes an off-canvas drawer and .main
     takes the full width. The drawer keeps the same black panel, the same nav
     items and the same gold active state, so it is the dashboard's own
     navigation moved, not a second design.

   WHY 900 AND NOT 768
     At 768 the old layout left 528px of content, which was usable but tight.
     Moving the breakpoint above it means a small tablet gets the full 768px
     and the drawer, which is better than what it had. 1024 keeps the fixed
     sidebar, so the desktop experience Daniel uses is untouched.

   BOTH PORTALS
     The owner portal loads this stylesheet and uses the same .sidebar/.main/
     .topbar markup, so it inherits all of this. There is one implementation.
   ===================================================================== */

/* The hamburger. Hidden above the breakpoint, so it costs the desktop layout
   nothing and cannot be tabbed to there. */
.navtoggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 4px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ink);
  cursor: pointer; flex: 0 0 auto;
}
.navtoggle:hover { background: var(--cream); }
.navtoggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.navtoggle svg { display: block; }

.nav-scrim { display: none; }

@media (max-width: 900px) {
  .navtoggle { display: inline-flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 180ms ease;
    width: min(var(--sidebar), 82vw);
    box-shadow: none;
    z-index: 40;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0,0,0,0.45);
  }

  /* The content takes the whole viewport. This is the line that gives a phone
     back the 240px the fixed column was holding. */
  .main { margin-left: 0; }

  .nav-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 35;
  }
  .nav-scrim[hidden] { display: none; }
  body.nav-open { overflow: hidden; }

  /* Topbar at small sizes: the page title is the thing worth keeping, so the
     user's name steps back rather than pushing the row wider than the screen.
     The overflow measured here before this change was the user block. */
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar-title { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 12px; min-width: 0; }
  .topbar-user { min-width: 0; }
  .topbar-user-name { display: none; }

  /* Page padding follows, so content is not pinned to the glass. */
  .page { padding: 20px 16px 40px; }
  .card-inner { padding: 18px 16px; }
}

/* A phone, rather than a small tablet. Tables keep their own scroller so the
   PAGE never scrolls sideways. */
@media (max-width: 640px) {
  /* Every table gets its own horizontal scroller on a phone, not just the ones
     that happen to sit in a .tbl-wrap. A table has a minimum width its columns
     cannot go below, so without this it pushes the PAGE sideways. Reports was
     the page that proved it: four .tbl tables outside a wrapper.
     display:block is what makes overflow-x apply to a table element at all. */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .pills { gap: 14px; }
  .row.between { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}