/* Palette borrowed from Jedd Social. Editorial direction: flat print colour, serif headlines, mono for every deadline. */
:root {
  --canvas: #f6f4ef;
  --card: #ffffff;
  --ink: #253b57;
  --ink-strong: #12305a;
  --muted: #5b6676;
  --line: #e5e7df;
  --brand: #2b7d64;
  --brand-dark: #1f6650;
  --forest: #12305a;
  --sage: #52a087;
  --sage-wash: #e9f4ef;
  --cream: #fffaf0;
  --sand: #e9d9b4;
  --sand-deep: #f5e9cc;
  --gold: #7d5b1f;

  --red: #b9452c;    --red-bg: #fdefe9;    --red-line: #f1cbbd;
  --amber: #7d5b1f;  --amber-bg: #fffaf0;  --amber-line: #e9d9b4;
  --green: #2b7d64;  --green-bg: #ecf5f0;  --green-line: #bfe0d3;
  --blue: #436e60;   --blue-bg: #f0f3ea;   --blue-line: #dedfd5;

  --radius: 18px;
  --shadow: 0 1px 3px rgb(20 20 30 / 4%), 0 8px 24px -8px rgb(20 20 30 / 8%);
  --display: 'Schibsted Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Instrument Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: #e9ebe3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; color: var(--ink-strong); }

/* ---------- desktop pitch panel ---------- */
.pitch { max-width: 380px; display: none; }
.pitch-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 800; color: var(--brand); font-size: 15px;
}
.pitch-mark::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--sand); }
.pitch h2 { font-size: 42px; line-height: 1.05; margin: 18px 0 24px; font-weight: 800; letter-spacing: -0.03em; padding-top: 18px; border-top: 3px solid var(--brand); }
.pitch h2 em { font-style: normal; color: var(--brand); }
.pitch ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; }
.pitch li { padding-left: 34px; position: relative; color: var(--muted); font-weight: 500; line-height: 1.4; }
.pitch li::before {
  content: '✓'; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--brand);
}
.pitch-link { display: inline-block; margin-top: 24px; padding: 12px 16px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; }
.pitch-link:hover { background: var(--brand-dark); }
.pitch-note { margin-top: 18px; font-size: 12px; color: var(--muted); }
@media (min-width: 960px) { .pitch { display: block; } }

/* ---------- phone frame ---------- */
.phone {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 520px) {
  body { overflow: hidden; }
  /* On laptops the app sits in a clean panel that always matches the window height — no device bezel, no scaling. */
  .phone {
    flex: none;
    width: 400px;
    height: calc(100dvh - 48px);
    max-height: 880px;
    border-radius: 28px;
    border: 1px solid #d9dccf;
    box-shadow: 0 20px 50px -24px rgb(36 61 59 / 30%);
  }
}

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 14px;
  background: #fff;
  color: var(--ink-strong);
  border-bottom: 3px solid var(--sage);
}
.logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--sand); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.agency { font-size: 12px; font-weight: 600; color: var(--brand-dark); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.help {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--brand-dark); font-weight: 800; font-size: 13px;
}

.screen { flex: 1; overflow-y: auto; padding: 4px 16px 24px; scroll-behavior: smooth; }

.tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  border-top: 1px solid var(--line); background: var(--card);
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
}
.tabs a { text-align: center; padding: 10px 2px; font-size: 12px; font-weight: 700; color: var(--muted); border-radius: 12px; }
.tabs a.active { color: var(--brand-dark); background: var(--sage-wash); }

/* ---------- typography blocks ---------- */
.hero { padding: 18px 4px 14px; }
.hero h1 { font-size: 30px; line-height: 1.08; font-weight: 800; }
.hero.compact h1 { font-size: 25px; font-weight: 700; }
.eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.lede { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.fineprint { color: var(--muted); font-size: 11px; text-align: center; margin: 18px 0 4px; line-height: 1.5; }
.fineprint a { color: var(--brand); font-weight: 700; }
.back { display: inline-block; margin: 14px 0 0; font-size: 14px; font-weight: 700; color: var(--brand); }
.link { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--brand); font-size: 14px; }

/* Today banner */
.hero.banner {
  position: relative; overflow: hidden;
  margin: 14px 0 14px; padding: 20px 18px 18px; border-radius: 22px;
  background: var(--sage-wash);
  border: 1px solid var(--green-line);
  color: var(--ink);
}
.hero.banner::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand); }
.hero.banner .eyebrow { color: var(--brand-dark); }
.hero.banner .lede { color: var(--ink); }
.hero.banner .lede strong { color: #fff; background: var(--red); padding: 1px 8px; border-radius: 999px; }

/* ---------- cards & lists ---------- */
.stack { display: grid; gap: 10px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-top: 12px; display: block; border: 1px solid var(--line); }
.stack .card { margin-top: 0; }
.card h2 { font-size: 16px; margin-bottom: 12px; font-weight: 700; }
.chev { color: var(--sage); font-size: 22px; margin-left: 8px; }

.task {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; border: 1px solid var(--line);
}
.task-icon {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
.task.red .task-icon { background: var(--red); color: #fff; }
.task.amber .task-icon { background: var(--sand); color: var(--gold); }
.task.blue .task-icon { background: var(--blue-bg); color: var(--blue); }
.task.green .task-icon { background: var(--brand); color: #fff; }
.task.red { border-color: var(--red-line); }
.task.amber { background: var(--cream); border-color: var(--amber-line); }
.task-body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.task-addr { font-size: 12px; color: var(--muted); font-weight: 600; }
.task-title { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--ink-strong); }
.task-detail { font-size: 13px; color: var(--muted); line-height: 1.35; }

.listing-row, .run { display: flex; align-items: center; }
.lr-main { flex: 1; display: grid; gap: 4px; min-width: 0; }
.lr-addr { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink-strong); }
.lr-sub { font-size: 13px; color: var(--muted); }

.badge {
  justify-self: start; display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; border: 1px solid transparent;
}
.badge.red { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
.badge.amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.badge.green { background: var(--green-bg); color: var(--green); border-color: var(--green-line); }
.badge.blue { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-line); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- status + ring ---------- */
.status {
  display: flex; gap: 14px; align-items: center;
  border-radius: var(--radius); padding: 14px; margin-top: 4px; border: 1px solid transparent;
}
.status.slim { margin: 12px 0; }
.status h3 { font-size: 17px; margin-bottom: 4px; font-weight: 700; }
.status p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.status.red { background: var(--red-bg); border-color: var(--red-line); }
.status.amber { background: var(--amber-bg); border-color: var(--amber-line); }
.status.green { background: var(--green-bg); border-color: var(--green-line); }
.status.blue { background: var(--blue-bg); border-color: var(--blue-line); }
.status.red h3 { color: var(--red); }
.status.amber h3 { color: var(--gold); }
.status.green h3 { color: var(--brand-dark); }
.status.blue h3 { color: var(--blue); }

.ring { position: relative; flex: none; width: 92px; height: 92px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgb(255 255 255 / 85%); stroke-width: 11; }
.ring-fill { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.ring.red .ring-fill { stroke: var(--red); }
.ring.amber .ring-fill { stroke: #b88a2e; }
.ring.green .ring-fill { stroke: var(--brand); }
.ring.blue .ring-fill { stroke: var(--sage); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-label strong { font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.ring-label span { max-width: 62px; margin: 2px auto 0; line-height: 1.2; font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 12px; padding: 0 0 14px; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.step.done:not(:last-child)::after { background: var(--sage); }
.step .dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cfd3c6; background: var(--card); margin-top: 1px; z-index: 1; }
.step.done .dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px var(--sage-wash); }
.step.bad .dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.step strong { display: block; font-size: 14px; color: var(--ink-strong); }
.step small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.log li { font-size: 13px; line-height: 1.4; padding-left: 12px; border-left: 2px solid var(--sage-wash); }
.log time { display: block; font-size: 11px; color: var(--brand); font-weight: 700; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.facts li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.facts span { color: var(--muted); }
.facts strong { text-align: right; color: var(--ink-strong); }

/* ---------- buttons ---------- */
.actions { display: grid; gap: 8px; margin: 14px 0 4px; }
.btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card);
  padding: 13px 14px; border-radius: 14px; font-weight: 700; font-size: 14px; color: var(--ink-strong);
}
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.primary.danger { background: var(--red); border-color: var(--red); }
.btn.warn { border-color: var(--sand); background: var(--cream); color: var(--gold); }
.btn.small { width: auto; padding: 6px 12px; font-size: 12px; }
.btn.block { margin-top: 14px; }
.btn:active { transform: translateY(1px); }
.row { display: flex; gap: 8px; margin-top: 10px; }
.row .btn { flex: 1; }
.row .btn.small { flex: none; margin-left: auto; }

/* ---------- ad checklist ---------- */
.check {
  display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer;
}
.check strong { display: block; font-size: 14px; color: var(--ink-strong); }
.check small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.check .box { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid #cfd3c6; display: grid; place-items: center; font-weight: 800; color: #fff; }
.check.done { border-color: var(--green-line); background: var(--sage-wash); cursor: default; }
.check.done .box { background: var(--brand); border-color: var(--brand); }

/* ---------- vendor view ---------- */
.vendor-mode .tabs, .vendor-mode .topbar { display: none; }
.vendor-mode .screen { background: var(--cream); }
.vendor-banner {
  position: sticky; top: 0; z-index: 5; margin: 0 -16px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--sand-deep); color: var(--gold); font-size: 12px; font-weight: 700;
  border-bottom: 1px solid var(--sand);
}
.vendor-banner a { color: var(--brand-dark); font-size: 14px; font-weight: 800; }
.vendor-banner span { opacity: 0.7; }
.vendor .brand { font-family: var(--display); font-weight: 800; color: var(--brand); margin: 18px 0 6px; }
.vendor h1 { font-size: 27px; margin-bottom: 10px; font-weight: 800; }
.vendor > p { font-size: 14px; line-height: 1.5; }
.rec { border-top: 4px solid var(--brand); }
.rec .big { font-family: var(--display); font-size: 38px; font-weight: 800; margin: 4px 0 8px; color: var(--brand-dark); letter-spacing: -0.02em; }
.rec ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.choices { border: 0; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.choices label { display: block; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; font-weight: 700; font-size: 14px; }
.choices label:has(input:checked) { border-color: var(--brand); background: var(--sage-wash); }
.choices input[type='radio'] { accent-color: var(--brand); }
.choices input[type='number'] { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; }
.sig { width: 100%; height: 120px; background: var(--card); border: 1.5px dashed var(--sage); border-radius: 12px; touch-action: none; }

/* ---------- run sheet ---------- */
.runsheet { list-style: none; margin: 0; padding: 0; }
.runsheet .card { margin-top: 0; }
.run { gap: 12px; }
.run.muted { opacity: 0.55; }
.run-time {
  flex: none; width: 64px; padding: 8px 0; border-radius: 12px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  background: var(--sage-wash); color: var(--brand-dark);
}
.travel { font-size: 12px; color: var(--muted); padding: 6px 0 6px 80px; font-weight: 600; }

/* ---------- bidding ---------- */
.bid-now { font-size: 46px !important; font-variant-numeric: tabular-nums; color: var(--brand-dark) !important; }
.bidders .chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.bidders .chip.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.bid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.bid-grid .btn.primary, .bid-grid .btn.warn { grid-column: 1 / -1; }
.bids { max-height: 220px; overflow: auto; }

/* ---------- overlay sheet, tour + toast ---------- */
.scrim { position: absolute; inset: 0; background: rgb(26 46 44 / 45%); z-index: 10; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; max-height: 92%; overflow-y: auto;
  background: var(--canvas); border-radius: 24px 24px 0 0; padding: 22px 18px 26px;
  box-shadow: 0 -10px 30px rgb(26 46 44 / 25%);
}
.sheet h2 { font-size: 22px; margin-bottom: 8px; font-weight: 800; }
.sheet > p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 13px; margin: 12px 0; }
.field input { padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 16px; }

.sheet.tour { padding-top: 0; }
.tour-head {
  margin: 0 -18px 14px; padding: 22px 18px 18px; border-radius: 24px 24px 0 0;
  background: var(--sage-wash); border-bottom: 1px solid var(--green-line);
}
.tour-head .eyebrow { color: var(--brand-dark); }
.tour-head h2 { color: var(--ink-strong); }
.tour-head p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.tour-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: tour; }
.tour-list li { counter-increment: tour; }
.tour-list button {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 12px 12px 48px; position: relative;
}
.tour-list button:hover { border-color: var(--sage); }
.tour-list button::before {
  content: counter(tour); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 8px;
  background: var(--sand); color: var(--gold); font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.tour-list strong { font-family: var(--display); font-size: 15px; color: var(--ink-strong); }
.tour-list small { font-size: 12px; color: var(--muted); line-height: 1.4; }

.toast {
  position: absolute; left: 16px; right: 16px; bottom: 80px; z-index: 20;
  background: var(--card); color: var(--ink-strong); border: 1px solid var(--line); box-shadow: 0 10px 30px -10px rgb(36 61 59 / 35%); border-radius: 14px; padding: 12px 14px;
  font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s; pointer-events: none;
  border-left: 4px solid var(--brand);
}
.toast.show { opacity: 1; transform: none; }

/* ---------- editorial details ---------- */
/* Times, dates and countdowns read like a docket. */
.eyebrow, .log time, .run-time, .ring-label strong, .bid-now, .travel { font-family: var(--mono); }
.eyebrow { letter-spacing: 0.04em; font-weight: 500; }
.bid-now { font-weight: 600 !important; letter-spacing: -0.03em; }
.ring-label strong { font-weight: 600; font-size: 16px; }
.task-title, .lr-addr, .status h3, .tour-list strong, .card h2 { font-family: var(--display); font-weight: 600; }
.task-title { font-size: 17px; }
.hero h1 { font-weight: 600; }
.hero.banner h1 { font-size: 34px; color: var(--ink-strong); }

/* Signboard stickers: square, solid, uppercase — like the AUCTION / SOLD stickers on a board. */
.badge { border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 700; padding: 4px 8px; border: 0; }
.badge.red { background: var(--red); color: #fff; }
.badge.amber { background: var(--sand); color: var(--ink-strong); }
.badge.green { background: var(--brand); color: #fff; }
.badge.blue { background: var(--blue-bg); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); }
.hero.banner .lede strong { border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; padding: 2px 7px; }

/* Flat cards with hairline rules instead of soft shadows. */
.card, .task { box-shadow: none; border-color: #dcdfd4; }
.task { border-radius: 12px; border-left-width: 4px; }
.task.red { border-left-color: var(--red); }
.task.amber { border-left-color: #c9a35c; }
.task.blue { border-left-color: var(--sage); }
.task.green { border-left-color: var(--brand); }
.task-icon { border-radius: 6px; }
.status { border-radius: 12px; }
.tabs a.active { border-radius: 8px; }

/* ---------- logo ---------- */
.logo img { display: block; height: 26px; width: auto; }
.pitch-logo { display: block; width: 220px; height: auto; }
.agency { color: var(--muted) !important; }
.help { background: var(--sage-wash) !important; }

/* ---------- brand green #52a087 as the main colour ---------- */
.hero.banner { background: var(--sage); border-color: var(--sage); }
.hero.banner::after { background: var(--ink-strong); }
.hero.banner h1, .hero.banner .lede { color: #fff; }
.hero.banner .eyebrow { color: rgb(255 255 255 / 85%); }
.tabs a.active { background: var(--sage); color: #fff; }
.pitch-link { background: var(--sage); }
.pitch-link:hover { background: var(--brand); }
.pitch h2 { border-top-color: var(--sage); }
.pitch li::before { background: var(--sage); }
.run-time { background: var(--sage); color: #fff; }

/* Today: traffic-light overview. */
.today-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 2px 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.link-btn { border: 0; background: none; color: var(--brand); font-weight: 700; font-size: 12px; cursor: pointer; font-family: var(--sans); }
.lights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.light {
  display: grid; justify-items: start; gap: 2px; text-align: left; cursor: pointer;
  padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card);
  transition: opacity 0.15s, transform 0.15s;
}
.light .lamp { width: 14px; height: 14px; border-radius: 50%; margin-bottom: 6px; }
.light.red .lamp { background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.light.amber .lamp { background: #e0a43a; box-shadow: 0 0 0 4px var(--amber-bg); }
.light.green .lamp { background: var(--sage); box-shadow: 0 0 0 4px var(--sage-wash); }
.light strong { font-family: var(--display); font-size: 28px; line-height: 1; color: var(--ink-strong); }
.light small { font-size: 12px; font-weight: 600; color: var(--muted); }
.light.red { border-color: var(--red-line); }
.light.amber { border-color: var(--amber-line); }
.light.green { border-color: var(--green-line); }
.light.on.red { background: var(--red); border-color: var(--red); }
.light.on.amber { background: #e0a43a; border-color: #e0a43a; }
.light.on.green { background: var(--sage); border-color: var(--sage); }
.light.on strong, .light.on small { color: #fff; }
.light.on .lamp { background: #fff; box-shadow: none; }
.light.dim { opacity: 0.55; }
.empty { text-align: center; color: var(--muted); padding: 30px 0; font-weight: 600; }

/* Slim traffic lights: one compact row so listings get the space. */
.lights { gap: 6px; margin-bottom: 10px; }
.light { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px; }
.light .lamp { width: 9px; height: 9px; margin: 0; flex: none; }
.light.red .lamp, .light.amber .lamp, .light.green .lamp { box-shadow: none; }
.light strong { font-family: var(--mono); font-size: 14px; }
.light small { font-size: 11px; white-space: nowrap; }
.today-head { margin: 10px 2px 6px; }

/* Welcome intro: a full screen of its own, not a sheet over the app. */
.intro {
  position: absolute; inset: 0; z-index: 12; overflow-y: auto;
  background: var(--canvas); padding: 28px 20px 24px; text-align: center;
}
.intro-logo { display: block; width: 96px; height: 96px; margin: 4px auto 14px; }
.intro .eyebrow { color: var(--brand); }
.intro h2 { font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 10px; }
.intro-lede { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; }
.intro-try { margin: 0 0 8px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.intro .tour-list { text-align: left; }

.pitch-cta { display: block; width: fit-content; margin-top: 24px; padding: 14px 20px; border-radius: 12px; background: var(--sand); color: var(--ink-strong); font-weight: 800; font-size: 15px; }
.pitch-cta:hover { background: #dfcb9c; }
.pitch-cta + .pitch-link { margin-top: 10px; background: none !important; color: var(--brand); padding: 4px 0; }
.intro-cta { display: block; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--sand); color: var(--ink-strong); font-weight: 800; font-size: 14px; }

.pitch-made { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
.pitch-made a, .intro-made a { color: var(--brand); font-weight: 700; }
.intro-made { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* Proof checklist: automatic checks vs agent-added screenshots. */
.check-main { flex: 1; min-width: 0; }
.check-cta { flex: none; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--sage-wash); color: var(--brand-dark); white-space: nowrap; }
.check.upload .check-cta { background: var(--sand); color: var(--ink-strong); }
.check:not(.done) .box { color: var(--muted); font-size: 14px; }