:root {
  /* Dark theme — page is near-black, cards are slightly lighter so they
     "lift" off the background. Topbar is intentionally white (see .topbar
     overrides below) to invert against the page. */
  --fg: #e5e7eb;                /* body text — light gray on dark */
  --muted: #9ca3af;             /* secondary text */
  --bg: #0b1220;                /* page background — deep blue-slate */
  --card: #111827;              /* cards / tables / dialogs */
  --card-hover: #1a2436;        /* hover surface */
  --border: #1f2937;            /* subtle border on dark */
  --primary: #3b82f6;           /* slightly brighter blue for dark contrast */
  --primary-dark: #2563eb;
  --google: #4285F4;
  --yelp: #D32323;
  --tripadvisor: #00A680;       /* TripAdvisor brand green */
  --opentable: #DA3743;         /* OpenTable brand red */
  --resy: #cccccc;              /* Resy brand is near-black; use a lighter gray for visibility on dark bg */
  --combined: #fbbf24;          /* brighter mustard — was #ca8a04, too muddy on dark */
  --combined-dark: #d97706;
  --ok-bg: #064e3b;             /* dark green bg */
  --ok-fg: #86efac;             /* light green text */
  --err-bg: #7f1d1d;            /* dark red bg */
  --err-fg: #fecaca;            /* light red text */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.45;
}

/* White topbar inverted against the dark page. */
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: #ffffff; color: #1a1a1a;
  padding: 12px 24px;
  border-bottom: 1px solid #e5e7eb;
}
.topbar .brand { font-weight: 700; color: #1a1a1a; text-decoration: none; font-size: 18px; }
.topbar nav { flex: 1; }
.topbar nav a { color: #4b5563; text-decoration: none; margin-right: 16px; }
.topbar nav a:hover { color: var(--primary); }

/* Admin page: collapsible sections within a single management view. */
.admin-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 16px; overflow: hidden;
}
.admin-section > summary {
  cursor: pointer; list-style: none;
  padding: 14px 18px; font-weight: 600; font-size: 16px;
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
}
.admin-section > summary::-webkit-details-marker { display: none; }
.admin-section > summary:hover { background: #f9fafb; }
.admin-section[open] > summary { border-bottom: 1px solid var(--border); }
.admin-section-disclosure {
  display: inline-block; color: var(--muted); font-size: 18px;
  transition: transform 0.15s ease; line-height: 1;
}
.admin-section[open] > summary .admin-section-disclosure { transform: rotate(90deg); }
.admin-section-body { padding: 16px 18px; }
.admin-section-count { margin-left: auto; }
.logout-form { margin: 0; }
/* Used on white topbar — readable + restrained. */
.btn-ghost { background: transparent; color: #4b5563; border-color: #d1d5db; }
.btn-ghost:hover { background: #f3f4f6; color: #1a1a1a; }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 32px; width: 100%; max-width: 380px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.login-card h1 { margin-top: 0; margin-bottom: 8px; font-size: 22px; }
.login-card .form { padding: 0; border: none; background: transparent; }
.login-card input[type="password"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 15px;
}

/* Page content max-width. Pulse is a data dashboard with 6-column grids
   of source cards — at 1100px each column was ~150px which left no
   horizontal breathing room. 1500px gives each of six columns ~230px,
   enough room for star-distribution rows ("5★ 632 (62%)") and the
   trends row to render cleanly. Phones and narrow laptops are still
   protected by the responsive breakpoints on the grid containers. */
.container { max-width: 1500px; margin: 0 auto; padding: 24px; }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 16px; gap: 16px;
}
.page-head h1 { margin: 0; }

h1 { font-size: 28px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 24px 0 12px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--err-fg); }

.callout {
  background: #422006; border: 1px solid #78350f; color: #fde68a;
  padding: 12px 16px; border-radius: 6px; margin-bottom: 16px;
}

/* The Upshot — AI narrative on the restaurant detail page. Sits above
   Recent Reviews, styled as an off-white callout so the AI commentary
   reads as paper-like, distinct from the surrounding dark UI. Text is
   explicitly black so contrast is high regardless of theme variables. */
.upshot-card {
  background: #fafaf7;
  color: #111;
  border: 1px solid #d4d4cf;
  border-left: 4px solid #f2a900;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
}
.upshot-card h2 { color: #111; }
.upshot-card .muted, .upshot-card .small { color: #555 !important; }
.upshot-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.upshot-body { color: #111; font-size: 14px; }
.upshot-body p {
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: #111;
  font-size: 14px;
}
/* Narrative paragraphs are italic so the summary reads visually as
   commentary, distinct from the data blocks above and the review list
   below. The Recommendations heading + bullets stay upright. */
.upshot-para { font-style: italic; color: #111; }
.upshot-recs-heading {
  margin: 14px 0 6px 0;
  font-size: 15px;
  font-style: normal;
  color: #111;
}
.upshot-bullets {
  margin: 0 0 8px 0;
  padding-left: 18px;
  font-style: normal;
  color: #111;
}
.upshot-bullets li { margin-bottom: 4px; line-height: 1.45; font-size: 14px; }

/* Upshot Q&A — follow-up question thread underneath the narrative. */
.upshot-qa {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #d4d4cf;
}
.upshot-qa-thread { margin-bottom: 10px; }
.upshot-qa-item {
  background: #fff;
  border: 1px solid #e8e8e3;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.upshot-qa-q {
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}
.upshot-qa-q::before { content: "Q: "; color: #888; font-weight: 700; }
.upshot-qa-a {
  color: #222;
  white-space: pre-wrap;
  line-height: 1.5;
}
.upshot-qa-a::before { content: "A: "; color: #888; font-weight: 700; }
.upshot-qa-form { display: flex; gap: 8px; align-items: flex-start; }
.upshot-qa-form textarea {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #d4d4cf;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 44px;
  background: #fff;
  color: #111;
}
.upshot-qa-form button { white-space: nowrap; }
.upshot-qa-status {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
  min-height: 14px;
}

/* Report download bar — appears under page-head on dashboard, restaurant,
   folder, and share-link pages. Small, unobtrusive, visible in both admin
   and read-only share-link modes. */
.report-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card-bg, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 13px;
  flex-wrap: wrap;
}
.report-bar-label { color: var(--muted, #9ca3af); }
.report-bar-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.report-bar-form select {
  padding: 4px 8px;
  font-size: 13px;
}
.callout a { color: #fbbf24; }
.callout.subtle { background: #1e3a8a; border-color: #3b82f6; color: #dbeafe; }

.flash {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 14px;
}
.flash-ok { background: var(--ok-bg); color: var(--ok-fg); }
.flash-error, .flash-message { background: var(--err-bg); color: var(--err-fg); }

.table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { background: #1a2436; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.table tr:last-child td { border-bottom: none; }
.table a { color: var(--fg); text-decoration: none; }
.table a:hover { color: var(--primary); }

.score { font-weight: 600; font-size: 16px; }
.score-strong { color: var(--primary); }
.score-combined { color: var(--combined); }
/* Keep the rating and (count) on the same line inside narrow 6-column
   tables — without this, tight cells wrap the (count) below the rating. */
.score-cell { display: inline-block; white-space: nowrap; }
.score-link { text-decoration: none; color: var(--primary); border-bottom: 1px dotted var(--primary); cursor: pointer; }
.score-link .score { color: var(--primary); }
.score-link:hover { border-bottom-style: solid; }
.card-link { color: var(--primary); text-decoration: none; font-weight: 600; border-bottom: 1px dotted var(--primary); }
.card-link:hover { border-bottom-style: solid; }
.review-link { color: var(--muted); text-decoration: none; font-size: 12px; margin-left: 8px; border-bottom: 1px dotted var(--muted); }
.review-link:hover { color: var(--primary); border-bottom-color: var(--primary); }

.btn {
  display: inline-block; padding: 8px 14px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--border); color: var(--fg);
  font-size: 14px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--card-hover); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--card); color: #fca5a5; border-color: #991b1b; }
.btn-danger:hover { background: #7f1d1d; color: #fff; }
.btn-small { padding: 4px 10px; font-size: 12px; }

.form { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 20px; max-width: 720px; }
.form label { display: block; margin-bottom: 16px; }
.form label > span { display: block; font-weight: 600; margin-bottom: 6px; }
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="search"],
.form select,
.form textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%; padding: 8px 10px;
  background: #0b1220; color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.form input::placeholder,
input::placeholder { color: #6b7280; }
.form small { display: block; margin-top: 4px; }
.form-actions { margin-top: 8px; }
.form-inline { display: flex; gap: 12px; align-items: flex-end; max-width: none; padding: 16px; margin-bottom: 16px; }
.form-inline label { flex: 1; margin-bottom: 0; }
.form-row { display: flex; gap: 12px; }
.form-row label { flex: 1; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 1000px) { .three-col { grid-template-columns: 1fr; } }

.pick { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
.pick:hover { background: var(--card-hover); }
.pick input { margin-top: 4px; }

.cards { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
/* When there are 4 cards (Google + Yelp + TripAdvisor + Combined), let
   each shrink to ~200px so they stay on one row on most screens but
   gracefully wrap on narrow ones. */
.cards-4 .card { flex: 1 1 200px; }
/* For 6 cards we drop flexbox in favor of grid — flex's intrinsic-width
   behavior leaves a gap on the right; grid with 1fr columns spans the
   full container so the row aligns flush with the star-distribution and
   trends rows below it. */
.cards-6 {
  display: grid;
  /* minmax(0, 1fr) is the safe shorthand for "strictly 1/6 of the row".
     Plain 1fr is shorthand for minmax(auto, 1fr) — the column can grow
     past 1fr to fit its content's min-content size. With six cards in
     a row, even small content overflow per column adds up to a visible
     overhang past the star-distribution row above. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.cards-6 .card { flex: none; min-width: 0; }
@media (max-width: 1400px) { .cards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .cards-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .cards-6 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; min-width: 160px; }
.card-label { font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }
.card-score { font-size: 32px; font-weight: 700; margin: 4px 0; }
/* Comparison chips under the score on each card. One line per delta so
   the 'vs all-time' and 'vs group' chips stack cleanly without
   wrapping. Smaller font + tighter padding so they don't compete with
   the rating. The cursor:help signals there's a tooltip on hover. */
.vs-comp { margin: 2px 0 0; }
.vs-comp .delta {
  font-size: 11px;
  padding: 1px 6px;
  cursor: help;
  white-space: nowrap;
}
.vs-comp + .vs-comp { margin-top: 3px; }

/* Compact comparison-window selector above the score cards. Matches the
   visual weight of the existing .window-selector but sits flush against
   the page-head, since it controls a different page region. */
.card-window-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 6px 10px;
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.card-window-selector .btn { text-decoration: none; }

.review-list { list-style: none; padding: 0; margin: 0; }
.review { padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); margin-bottom: 8px; }
.review-meta { font-size: 14px; margin-bottom: 6px; }
/* Match review body size to the data blocks above (KPI rows, etc.). */
.review-text { color: var(--fg); font-size: 14px; line-height: 1.5; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; margin-right: 6px; }
.badge-google { background: var(--google); }
.badge-yelp { background: var(--yelp); }
.badge-tripadvisor { background: var(--tripadvisor); }
.badge-opentable { background: var(--opentable); }
.badge-resy { background: var(--resy); color: #1f1410; }
.badge-combined { background: #f2a900; color: #1f1410; }

.actions { display: flex; gap: 8px; }
/* Wraps the 'Last refreshed' timestamp above the action buttons on the
   restaurant detail page so the operator can see at a glance how stale
   the data is. Right-aligned to match the right-flush page-head action
   column it sits in. */
.actions-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.last-refreshed { font-size: 12px; }
.footer { max-width: 1100px; margin: 24px auto; padding: 0 24px; color: var(--muted); }
.version-stamp { font-family: ui-monospace, monospace; font-size: 11px; opacity: 0.7; }

/* v2 additions */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #374151; color: #d1d5db; margin-left: 6px; vertical-align: middle; }
.pill-recommended { background: #065f46; color: #a7f3d0; }

.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0 16px; }

.dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.dist-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 880px) { .dist-grid-3 { grid-template-columns: 1fr; } }
.dist-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .dist-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .dist-grid-4 { grid-template-columns: 1fr; } }
/* minmax(0, 1fr) (not bare 1fr) is required to actually pin each column
   to 1/6 of the container. Bare 1fr is shorthand for minmax(auto, 1fr),
   meaning the track grows to its content's min-content size — which is
   exactly what was happening here. The dist-row inside each card has
   fixed 32px and 90px tracks plus a flexible bar, so its min-content
   width was pushing every column wider than the score-card row above. */
.dist-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dist-grid-6 .dist-card { min-width: 0; }
@media (max-width: 1400px) { .dist-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .dist-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .dist-grid-6 { grid-template-columns: 1fr; } }
.dist-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 18px 16px; }
/* Stack the source badge on top and the "N reviews pulled" label below.
   At 6 cards across, putting them on the same line crammed the badge
   against the count. Stacking gives each its own row and lets the
   card breathe vertically. */
.dist-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 14px;
}
.dist-row { display: grid; grid-template-columns: 32px 1fr 90px; align-items: center; gap: 10px; margin-bottom: 6px; }
.dist-label { font-weight: 600; font-size: 13px; }
.dist-bar { height: 10px; background: #1f2937; border-radius: 999px; overflow: hidden; }
.dist-fill { height: 100%; border-radius: 999px; }
.dist-5 { background: #16a34a; }
.dist-4 { background: #84cc16; }
.dist-3 { background: #eab308; }
.dist-2 { background: #f97316; }
.dist-1 { background: #dc2626; }
.dist-count { font-size: 13px; text-align: right; }

.review-negative { border-left: 3px solid var(--err-fg); }
.owner-reply { margin-top: 8px; padding: 8px 12px; background: var(--card-hover); border-left: 3px solid var(--primary); border-radius: 4px; font-size: 13px; }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.kpi-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1000px) { .kpi-grid-3 { grid-template-columns: 1fr; } }
/* Collapsible Graphs section — wraps the two trend charts under TRENDS
   so operators (or clients on a share link) can hide them when they
   only care about the numbers. */
.graphs-section {
  margin: 20px 0 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
}
.graphs-section > summary {
  cursor: pointer;
  padding: 12px 16px;
  /* Match the TRENDS / STAR DISTRIBUTION h2 size so it reads as a
     peer heading rather than a smaller sub-element. */
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  user-select: none;
}
.graphs-section > summary::-webkit-details-marker { display: none; }
.graphs-disclosure {
  display: inline-block;
  margin-right: 8px;
  /* Double the default arrow size so it reads as a chunky disclosure. */
  font-size: 2em;
  line-height: 1;
  vertical-align: -2px;
  transition: transform 0.15s ease;
}
.graphs-emoji {
  display: inline-block;
  margin-right: 6px;
  font-size: 1.1em;
}
.graphs-section[open] > summary .graphs-disclosure {
  transform: rotate(90deg);
}
.graphs-body { padding: 0 16px 16px; }
.graphs-body h3:first-child { margin-top: 4px; }

.kpi-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
/* TRENDS: 3 cards per row × 2 rows. Six cards squeezed into one row
   left no horizontal room for "(N reviews)" — the count would either
   overflow or break the word "reviews" mid-character. Three across
   gives each card ~2x the width, matching the target layout where
   label / big_number / (N reviews) fit side-by-side and the wrapping
   happens at word boundaries instead of mid-word.
   minmax(0, 1fr) (not bare 1fr) keeps each column locked to 1/3 of
   the row regardless of content min-size. */
.kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .kpi-grid-6 { grid-template-columns: 1fr; } }
/* Now that kpi-grid-6 is 3 cards across instead of 6, each card has
   real width. The kpi-row layout matches the target image: label on
   the left, big bold rating in the middle, "(N reviews)" on the right.
   When the card is narrow the count wraps cleanly to a second line at
   the space — "(1018 / reviews)" — not "revi / ews". The number stays
   single-line at the focal point.
   min-width: 0 on the card prevents long content from pushing the
   grid column wider than its 1fr allocation. */
.kpi-grid-6 .kpi-card { padding: 14px 16px; min-width: 0; }
.kpi-grid-6 .kpi-row {
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
  align-items: baseline;
}
.kpi-grid-6 .kpi-row .muted.small {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.kpi-grid-6 .kpi-row strong { font-size: 22px; white-space: nowrap; justify-self: center; }
.kpi-grid-6 .kpi-header { gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.kpi-grid-6 .delta { font-size: 11px; padding: 1px 5px; }
/* Match the dist-grid-4 breakpoints so the two grids stay visually
   aligned (same number of columns at any given viewport width). The
   kpi rows shrink their fixed-px columns + font size in the same
   media queries to keep all 4 cards readable when they get narrower. */
@media (max-width: 1100px) { .kpi-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .kpi-grid-4 { grid-template-columns: 1fr; } }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 16px; }
.kpi-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.kpi-rows { display: grid; gap: 6px; }
.kpi-row { display: grid; grid-template-columns: 130px 60px 1fr; align-items: baseline; gap: 8px; font-size: 14px; }
.kpi-row strong { font-size: 18px; }

/* When the kpi grid is 4-up, tighten each row so the content actually
   fits inside a quarter-width card. Activates only on .kpi-grid-4 so
   the 2- and 3-column variants are unchanged. */
.kpi-grid-4 .kpi-card { padding: 12px; }
.kpi-grid-4 .kpi-row { grid-template-columns: 90px 44px 1fr; gap: 6px; font-size: 13px; }
.kpi-grid-4 .kpi-row strong { font-size: 16px; }
.kpi-grid-4 .kpi-header { gap: 6px; margin-bottom: 8px; }
.kpi-grid-4 .delta { font-size: 11px; padding: 1px 5px; }

.delta { font-weight: 700; font-size: 14px; padding: 2px 8px; border-radius: 4px; }
.delta-up { color: var(--ok-fg); background: var(--ok-bg); }
.delta-down { color: var(--err-fg); background: var(--err-bg); }
.delta-flat { color: var(--muted); background: var(--card-hover); }

h3 { font-size: 14px; margin: 20px 0 8px; color: var(--fg); }
.chart-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 16px; height: 280px; margin-bottom: 16px; }
.chart-wrap-tall { height: 360px; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

.folder-section { margin-bottom: 28px; }
.folder-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.folder-header h2 { margin: 0; font-size: 18px; }
.folder-header h2 a { color: var(--fg); text-decoration: none; }
.folder-header h2 a:hover { color: var(--primary); }
.subtotal-row { background: var(--card-hover); font-weight: 500; }
.subtotal-row td { border-bottom: 2px solid var(--border); }
.subtotal-label { font-weight: 700; font-size: 15px; }

.inline-form { display: inline-flex; align-items: center; gap: 6px; }
.inline-form select, .inline-form input[type="text"] { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.form select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; width: 100%; }

/* v3 additions: 90-day scroll list + negative dropdown + theme bars */
.scroll-list {
  max-height: 520px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; background: var(--card);
}
.scroll-list-short { max-height: 360px; }
.scroll-list .review-list .review:last-child { margin-bottom: 0; }

.negative-dropdown {
  margin-top: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.negative-dropdown > summary {
  cursor: pointer; padding: 16px 20px;
  background: #3f1d1d; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  list-style: none;
  font-weight: 600;
}
.negative-dropdown > summary::-webkit-details-marker { display: none; }
.negative-dropdown > summary::before {
  content: "▶";
  display: inline-block;
  color: #fca5a5;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.negative-dropdown[open] > summary::before { transform: rotate(90deg); }
.negative-dropdown > summary:hover::before { color: #fecaca; }
.negative-dropdown[open] > summary { background: #4c1d1d; }
.negative-summary-label {
  color: #fca5a5;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.negative-body { padding: 16px; }
.negative-body h3:first-child { margin-top: 0; }

.themes-list { display: grid; gap: 6px; }
.theme-row {
  display: grid; grid-template-columns: 160px 1fr 110px;
  align-items: center; gap: 10px;
}
.theme-label { font-weight: 600; font-size: 13px; }
.theme-bar { height: 10px; background: #1f2937; border-radius: 999px; overflow: hidden; }
.theme-fill { height: 100%; background: #ef4444; border-radius: 999px;
              transition: background 0.15s ease; }
.theme-count { font-size: 13px; text-align: right; }

/* Clickable theme rows — filter the reviews list below on click */
.theme-row[data-theme-slug] {
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
  transition: background 0.1s ease;
}
.theme-row[data-theme-slug]:hover { background: #3f1d1d; }
.theme-row-active { background: #4c1d1d !important; }
.theme-row-active .theme-label { color: #fca5a5; }
.theme-row-active .theme-fill { background: #fca5a5; }

.theme-filter-status {
  background: #3f1d1d; border: 1px solid #7f1d1d;
  padding: 8px 12px; border-radius: 6px; margin-bottom: 12px;
  font-size: 13px; color: #fecaca;
}
.theme-filter-status a { color: #fca5a5; font-weight: 600; }
.theme-filter-status a:hover { text-decoration: underline; }

.source-filter-status {
  background: #1e3a8a; border: 1px solid #2563eb;
  padding: 8px 12px; border-radius: 6px; margin-bottom: 12px;
  font-size: 13px; color: #dbeafe;
}
.source-filter-status a { color: #93c5fd; font-weight: 600; }
.source-filter-status a:hover { text-decoration: underline; }

.window-selector {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 8px 12px;
  background: var(--card-hover); border: 1px solid var(--border); border-radius: 6px;
}
.window-selector .btn { text-decoration: none; }

/* Window selector inside The Upshot card — sits under the header,
   matches the light card theme rather than the surrounding dark UI. */
.upshot-window-selector {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 12px; padding: 6px 10px;
  background: #fff; border: 1px solid #e3e3dd; border-radius: 6px;
}
.upshot-window-selector .muted, .upshot-window-selector .small {
  color: #555 !important;
}
.upshot-window-selector .btn {
  text-decoration: none;
  color: #1f1410;
  background: #f4f4ef;
  border-color: #e3e3dd;
}
.upshot-window-selector .btn.btn-primary {
  background: #f2a900;
  color: #1f1410;
  border-color: #d99300;
}

/* Section headers (Restaurant Groups / Single Units) */
.section-block { margin-bottom: 32px; }
.section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 24px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Collapsible folder cards on the dashboard */
.folder-collapsible { background: transparent; }
.folder-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--border);
}
.folder-summary::-webkit-details-marker { display: none; }
.folder-summary:hover { background: var(--card-hover); }
.folder-disclosure {
  display: inline-block; color: var(--fg); font-size: 22px;
  transition: transform 0.15s ease; line-height: 1;
}
.folder-collapsible[open] > .folder-summary .folder-disclosure { transform: rotate(90deg); }
.folder-link {
  font-weight: 700; font-size: 16px; color: var(--fg); text-decoration: none;
}
.folder-link:hover { color: var(--primary); text-decoration: underline; }
.folder-summary-score { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; }
.folder-body { padding-top: 10px; }

/* Count footnote (Option C) */
.count-asterisk { color: var(--muted); font-weight: 600; margin-left: 1px; }
.count-footnote {
  margin-top: 18px; padding: 10px 14px;
  background: var(--card-hover); border: 1px solid var(--border); border-radius: 6px;
  line-height: 1.5;
}
.count-footnote sup { color: var(--muted); font-weight: 700; }

/* Edit-restaurant <dialog> */
.edit-dialog {
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 20px 24px; min-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.edit-dialog::backdrop { background: rgba(0,0,0,0.65); }
.edit-dialog h3 { margin: 0 0 12px; font-size: 16px; color: var(--fg); }
.edit-dialog label { display: block; margin-bottom: 14px; }
.edit-dialog label > span { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.edit-dialog input[type="text"],
.edit-dialog input[type="email"],
.edit-dialog select {
  width: 100%; padding: 8px 10px;
  background: #0b1220; color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.edit-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Admin Shared Links table — give the Label column enough room for a
   full first + last name without wrapping. */
.col-label { min-width: 150px; }

/* Share-link UI */
.share-password-wrap { max-width: 420px; margin: 60px auto; text-align: left; }
.share-password-wrap h1 { margin-bottom: 4px; }
.share-url-cell { font-size: 12px; word-break: break-all; }
.share-row-revoked { opacity: 0.55; }
.share-row-revoked code { text-decoration: line-through; }
.share-modal { max-width: 560px; }
.share-modal-link-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; background: #f9fafb; border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 6px;
}
.share-modal-link-row code { font-size: 12px; flex: 1; word-break: break-all; }
.share-section-heading { margin: 16px 0 6px; font-size: 13px; font-weight: 600;
                        text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* Sortable table headers */
.table.sortable th[data-sort] {
  cursor: pointer; user-select: none;
  transition: background-color 0.1s ease;
}
.table.sortable th[data-sort]:hover { background: #e5e7eb; }
.sort-arrow {
  display: inline-block; font-size: 11px;
  color: #9ca3af; margin-left: 2px;
}
.sort-arrow-active {
  color: var(--primary); font-size: 12px; font-weight: 700;
}