/* Corner Lot — one stylesheet for the marketing page, the player dashboard and the
   admin console. The palette is the game's own, so the site and the thing it advertises
   look like the same product. No inline styles anywhere: the content security policy
   forbids them, which is deliberate. */

:root {
  --backdrop: #16231f;
  --panel: #1d2c3b;
  --panel-raised: #26394b;
  --panel-sunken: #16232f;
  --divider: #33485d;

  --ink: #edf3f8;
  --ink-muted: #94a9bc;
  --ink-faint: #647c91;

  --gold: #e8b44a;
  --positive: #6fcf97;
  --negative: #eb6a5a;
  --info: #5fa9d8;
  --warning: #e8b44a;

  --lemonade: #e8b44a;
  --brick: #6b4a3c;
  --lawn: #2c4634;

  --radius: 10px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --max: 1120px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--backdrop);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---- Header ------------------------------------------------------------ */

header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(22, 35, 31, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; }
.brand .mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, var(--lemonade), #c98f2c);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.15);
}
.brand span { color: var(--ink); font-size: 1.05rem; }

nav.site { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav.site a { color: var(--ink-muted); font-size: 0.94rem; }
nav.site a:hover { color: var(--ink); text-decoration: none; }
nav.site a[aria-current="page"] { color: var(--ink); font-weight: 600; }
nav.site a.nav-play { color: #2a1f10; background: linear-gradient(180deg, #ffc94d, #f0a020); font-weight: 700;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 2px 0 #c07a00; }
nav.site a.nav-play:hover { color: #2a1f10; filter: brightness(1.05); }
.brand span { white-space: nowrap; }
@media (max-width: 760px) {
  /* On a phone the links get their own row, and scroll sideways rather than wrap. */
  header.site .wrap { height: auto; flex-wrap: wrap; row-gap: 0; padding-top: 12px; }
  header.site nav.site {
    order: 2; width: 100%; margin-left: 0; gap: 18px;
    overflow-x: auto; flex-wrap: nowrap; padding: 10px 0 12px;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  header.site nav.site::-webkit-scrollbar { display: none; }
  header.site nav.site a { white-space: nowrap; }
  footer.site nav { margin-left: 0; flex-wrap: wrap; }
}

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--gold); color: #1b2a38; }
.btn-primary:hover { background: #f0c162; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--divider); }
.btn-ghost:hover { border-color: var(--ink-faint); background: rgba(255,255,255,0.03); }

.btn-danger { background: var(--negative); color: #2a0f0c; }
.btn-small { padding: 7px 13px; font-size: 0.85rem; }

/* ---- Hero -------------------------------------------------------------- */

.hero { padding: 84px 0 64px; position: relative; overflow: hidden; }
.hero::after {
  /* A hint of the city grid behind the words. */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(111, 207, 151, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 207, 151, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  max-width: 16ch;
}
.hero h1 em { font-style: normal; color: var(--gold); }

.hero .lede { font-size: 1.2rem; color: var(--ink-muted); max-width: 54ch; margin: 0 0 30px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .cta .note { color: var(--ink-faint); font-size: 0.9rem; }

.stat-strip { display: flex; gap: 40px; margin-top: 46px; flex-wrap: wrap; }
.stat-strip div { display: flex; flex-direction: column; }
.stat-strip strong { font-size: 1.7rem; color: var(--ink); letter-spacing: -0.02em; }
.stat-strip span { font-size: 0.83rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- Sections ----------------------------------------------------------- */

section { padding: 64px 0; }
section.tinted { background: linear-gradient(180deg, rgba(29,44,59,0.55), rgba(29,44,59,0)); }

h2.section { font-size: 2rem; letter-spacing: -0.02em; margin: 0 0 10px; }
p.section { color: var(--ink-muted); max-width: 62ch; margin: 0 0 34px; font-size: 1.05rem; }

.grid { display: grid; gap: 20px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--ink-muted); font-size: 0.96rem; }
.card .glyph {
  width: 38px; height: 38px; border-radius: 9px; margin-bottom: 14px;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--panel-raised);
}

/* ---- Footer -------------------------------------------------------------- */

footer.site { border-top: 1px solid var(--divider); padding: 34px 0; color: var(--ink-faint); font-size: 0.9rem; }
footer.site .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer.site nav { margin-left: auto; display: flex; gap: 18px; }

/* ---- App shell (dashboard and console) ------------------------------------ */

.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.app aside {
  background: var(--panel-sunken);
  border-right: 1px solid var(--divider);
  padding: 22px 16px;
}
.app aside .brand { margin-bottom: 26px; }
.app aside button.tab {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 4px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--ink-muted); font: inherit; font-size: 0.95rem; cursor: pointer;
}
.app aside button.tab:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
.app aside button.tab.active { background: var(--panel-raised); color: var(--ink); font-weight: 600; }
.app main { padding: 28px 32px 80px; overflow-x: hidden; }

.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; }
.page-head .sub { color: var(--ink-faint); font-size: 0.94rem; }
.page-head .spacer { margin-left: auto; }

.panel {
  background: var(--panel); border: 1px solid var(--divider);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.panel h2 { margin: 0 0 14px; font-size: 1.05rem; letter-spacing: 0.01em; }
.panel .hint { color: var(--ink-faint); font-size: 0.88rem; margin: -6px 0 14px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kpi {
  background: var(--panel-sunken); border: 1px solid var(--divider);
  border-radius: 9px; padding: 15px 16px;
}
.kpi .label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint); }
.kpi .value { font-size: 1.65rem; letter-spacing: -0.02em; margin-top: 3px; }
.kpi .value.good { color: var(--positive); }
.kpi .value.bad { color: var(--negative); }
.kpi .foot { font-size: 0.82rem; color: var(--ink-faint); margin-top: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th {
  text-align: left; padding: 9px 10px; color: var(--ink-faint);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--divider); white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid rgba(51,72,93,0.4); vertical-align: top; }
tr:hover td { background: rgba(255,255,255,0.02); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600;
  background: var(--panel-raised); color: var(--ink-muted);
}
.chip.good { background: rgba(111,207,151,0.16); color: var(--positive); }
.chip.bad { background: rgba(235,106,90,0.16); color: var(--negative); }
.chip.warn { background: rgba(232,180,74,0.16); color: var(--warning); }
.chip.info { background: rgba(95,169,216,0.16); color: var(--info); }

form.stack { display: flex; flex-direction: column; gap: 12px; }
label { display: block; font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 5px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], textarea, select {
  width: 100%; padding: 10px 12px;
  background: var(--panel-sunken); color: var(--ink);
  border: 1px solid var(--divider); border-radius: 8px;
  font: inherit; font-size: 0.95rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
textarea { min-height: 92px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; }
.checkline { display: flex; align-items: center; gap: 8px; }
.checkline input { width: auto; }
.checkline label { margin: 0; }

.notice { padding: 11px 14px; border-radius: 8px; font-size: 0.92rem; margin-bottom: 14px; }
.notice.error { background: rgba(235,106,90,0.14); color: var(--negative); border: 1px solid rgba(235,106,90,0.3); }
.notice.ok { background: rgba(111,207,151,0.14); color: var(--positive); border: 1px solid rgba(111,207,151,0.3); }
.notice.info { background: rgba(95,169,216,0.12); color: var(--info); border: 1px solid rgba(95,169,216,0.28); }
.hidden { display: none !important; }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin-top: 10px; }
.spark i {
  flex: 1; background: var(--info); border-radius: 2px 2px 0 0; min-height: 2px;
  display: block; opacity: 0.85;
}
.spark i.alt { background: var(--gold); }

.msg { border-bottom: 1px solid rgba(51,72,93,0.4); padding: 12px 0; }
.msg:last-child { border-bottom: 0; }
.msg .meta { font-size: 0.82rem; color: var(--ink-faint); display: flex; gap: 8px; align-items: center; }
.msg .body { margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.unread .meta strong { color: var(--gold); }

.centered { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { justify-content: center; margin-bottom: 20px; }
.auth-switch { text-align: center; margin-top: 14px; font-size: 0.9rem; color: var(--ink-muted); }
.auth-switch button { background: none; border: 0; color: var(--gold); font: inherit; cursor: pointer; padding: 0; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .app aside { border-right: 0; border-bottom: 1px solid var(--divider); }
  .app aside button.tab { display: inline-block; width: auto; }
  .app main { padding: 20px 16px 60px; }
}

/* ---- Moderation queue -------------------------------------------------------
 *
 * Reported text is shown large and quoted rather than squeezed into a table cell.
 * Somebody has to actually read it to judge it, and a truncated column of hostile
 * messages is how a moderator ends up guessing.
 */
.report {
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
  background: var(--panel-sunken);
}

.report-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.report-body {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--warning);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--negative);
  color: #2a0f0c;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.badge.hidden { display: none; }

/* The one panel on the site whose button cannot be undone. It looks different on purpose. */
.danger-zone { border-color: rgba(235, 106, 90, 0.45); }
.danger-zone h2 { color: var(--negative); }

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
}
.row-between:last-child { border-bottom: none; }

/* ---- Long-form pages (support, privacy) -------------------------------------
 * Documents nobody wants to read, made as readable as possible: one column, a
 * measure that does not run past the eye, and generous spacing between ideas.
 */
body.doc { background: var(--backdrop); color: var(--ink); }

.prose { max-width: 68ch; padding: 40px 20px 80px; }
.prose h1 { font-size: 2rem; margin: 0 0 8px; }
.prose h2 { font-size: 1.25rem; margin: 36px 0 8px; color: var(--gold); }
.prose h3 { font-size: 1rem; margin: 22px 0 4px; color: var(--ink); }
.prose p, .prose li { color: var(--ink-muted); line-height: 1.65; }
.prose .lead { font-size: 1.1rem; color: var(--ink); margin-bottom: 28px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--info); }
.prose strong { color: var(--ink); }

/* The one line that tells a reader whose clock they are looking at. */
.zone-note { margin: 0 0 14px; }

/* The money gem. Sized to a digit and sitting on the baseline, in its own blues. */
svg.gem {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.12em;
  vertical-align: -0.08em;
}

/* Console charts: inline SVG, coloured from the palette so they match everything else. */
svg.chart { width: 100%; height: auto; display: block; margin-top: 8px; }
svg.chart .grid { stroke: var(--divider); stroke-width: 1; }
svg.chart .axis { fill: var(--ink-faint); font-size: 22px; }
.legend { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.hbars { display: grid; gap: 8px; margin-top: 8px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 10px; align-items: center; }
.hbar-label { color: var(--ink-muted); font-size: 14px; }
.hbar-track { background: var(--panel-sunken); border-radius: 4px; height: 12px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 4px; }
.hbar-value { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* ---- Messaging ---------------------------------------------------------------- */

.msg-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.msg-kind {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  padding: 14px; border-radius: 10px; border: 2px solid var(--divider);
  background: transparent; color: inherit; font: inherit;
}
.msg-kind span { font-size: 0.86em; opacity: 0.8; line-height: 1.35; }
.msg-kind .msg-kind-icon { font-size: 1.5em; opacity: 1; }
.msg-kind .chip { align-self: flex-start; opacity: 1; }
.msg-kind.active { border-color: var(--info); background: rgba(95,169,216,0.08); }
.msg-live { border-left: 4px solid rgba(255,255,255,0.18); padding: 10px 14px; margin: 10px 0; border-radius: 6px; background: rgba(255,255,255,0.03); }
.msg-live.bad { border-left-color: var(--negative); }
.msg-live.info { border-left-color: var(--info); }
.msg-live p { margin: 6px 0; }
.msg-live blockquote { margin: 8px 0; padding: 8px 12px; background: rgba(0,0,0,0.15); border-radius: 6px; }
.msg-live-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ---- Grids -------------------------------------------------------------------- */

.grid-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.grid-tools .grid-search { flex: 1 1 220px; min-width: 0; }
.grid-tools .grid-pick { flex: 0 1 auto; width: auto; }
.grid-tools .grid-count { margin-left: auto; white-space: nowrap; }
table.datagrid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.datagrid th.sortable:hover { color: var(--ink); }
table.datagrid th.sorted { color: var(--gold); }
table.datagrid { width: 100%; }

/* ---- Neighborhoods ------------------------------------------------------------- */

.skill-range { display: flex; align-items: center; gap: 10px; }
.skill-range input[type=range] { flex: 1; accent-color: var(--gold); }
.stepper { display: flex; gap: 6px; align-items: center; }
.stepper input { width: 80px; text-align: center; }
strong.good { color: var(--positive); }
strong.bad { color: var(--negative); }

/* ---- Growth -------------------------------------------------------------------- */

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 0.85rem; color: var(--ink-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.verdict { padding: 12px 14px; border-radius: 8px; border-left: 4px solid var(--divider); background: rgba(255,255,255,0.03); }
.verdict.good { border-left-color: var(--positive); }
.verdict.bad { border-left-color: var(--negative); }
.verdict.warn { border-left-color: var(--warning); }
.kpi .value.good, span.good { color: var(--positive); }
.kpi .value.bad, span.bad { color: var(--negative); }
.hbar-track.inline { display: inline-block; width: 80px; vertical-align: middle; }
svg.spark { display: block; }

pre.trace { white-space: pre-wrap; word-break: break-word; background: var(--panel-sunken); padding: 12px;
  border-radius: 8px; font-size: 0.8rem; max-height: 480px; overflow: auto; }

.subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.spacer { margin-left: auto; }

/* ---- Businesses tab ---- */
.biz-name { display: flex; gap: 11px; align-items: flex-start; min-width: 230px; max-width: 340px; }
.biz-how { color: var(--ink-faint); font-size: 0.84rem; margin-top: 2px; white-space: normal; }
.biz-icon { flex: none; border-radius: 50%; display: inline-block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.biz-icon-missing { width: 34px; height: 34px; line-height: 34px; text-align: center; font-weight: 700;
  background: var(--panel-raised); color: var(--ink-muted); }
.biz-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.biz-head h2 { margin: 0 0 4px; }
.biz-head p { margin: 8px 0 0; }
.biz-flavor { font-style: italic; color: var(--ink-muted); }
.biz-verdict { display: flex; gap: 8px; align-items: center; }
.chip.tier-1 { background: rgba(111,207,151,0.16); color: var(--positive); }
.chip.tier-2 { background: rgba(95,169,216,0.16); color: var(--info); }
.chip.tier-3 { background: rgba(232,180,74,0.16); color: var(--warning); }
.chip.tier-4 { background: rgba(196,120,230,0.18); color: #c99be6; }

.datagrid .good { color: var(--positive); }
.datagrid .bad { color: var(--negative); }
.biz-section { margin-top: 22px !important; }
.biz-name { cursor: pointer; border-radius: 8px; padding: 4px; margin: -4px; }
.biz-name:hover strong, .biz-name.open strong { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.biz-detail .skill-range .hint { width: 58px; flex: none; margin: 0; }
.biz-detail .skill-range .hint:last-child { text-align: right; }

/* English and Spanish side by side in the Messaging forms. */
.lang-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .lang-cols { grid-template-columns: 1fr; } }
.lang-col { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 10px;
  background: var(--panel-sunken); border: 1px solid var(--divider); }
.lang-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lang-head .hint { margin: 0 !important; font-size: 0.8rem; }
blockquote.es { border-left-color: var(--info); }

/* ---- Reports: usage, what's working, devices, referrals, feedback ------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-2 > .panel { margin: 0; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.usage-days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.datagrid td.heat { background: rgba(111, 207, 151, calc(var(--heat) * 0.55)); font-weight: 600; }
.bar-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); min-width: 120px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--positive); }
.stars { color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.fb-text { white-space: pre-wrap; max-width: 520px; line-height: 1.45; }
.fb-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* ---- The feedback page ---------------------------------------------------------------------- */
.feedback-form { max-width: 620px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kinds label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); cursor: pointer; font-weight: 600; }
.fb-kinds label:has(input:checked) { background: var(--gold); color: #2a1f10; }
.fb-kinds input { accent-color: #2a1f10; }
.fb-stars button { font-size: 30px; background: none; border: 0; color: var(--gold); cursor: pointer; padding: 0 3px; }
.chart-stack > .panel { margin-bottom: 16px; }