/* Lantern Bay admin: Pori's operator desk (pori/.ai/specs/admin-dashboard-design.md), a white quiet page. One accent for
   "now" (Lantern Bay's harbour teal, deepened to read as an action), gray for "before", green / amber / red only for
   outcome and health. Inter 4.1 (SIL OFL 1.1, fonts/OFL.txt), self-hosted, the same subset as Pori. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff; --panel: #ffffff; --sunk: #f7f7f8; --sunk-2: #f0f0f2;
  --line: #e7e7ea; --line-strong: #d6d6db; --grid: #f1f1f3;
  --ink: #111116; --ink-2: #44444f; --muted: #696975;
  --accent: #0f6e8c; --accent-hover: #0b5a73; --accent-ink: #ffffff; --accent-soft: #e6f3f7; --accent-ring: rgba(15, 110, 140, .22);
  --prev: #a1a1ab; --good: #137a3a; --good-soft: #eaf7ef; --warn: #a8530a; --warn-dot: #e08a0b; --warn-soft: #fff6e8;
  --bad: #d42a2a; --bad-soft: #fdf0f0; --quiet: #c7c7cf;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(17, 17, 22, .05);
  --shadow-sm: 0 1px 2px rgba(17, 17, 22, .06), 0 1px 1px rgba(17, 17, 22, .03);
  --shadow-pop: 0 12px 28px -8px rgba(17, 17, 22, .28), 0 3px 8px -2px rgba(17, 17, 22, .12);
  --ring: 0 0 0 3px var(--accent-ring);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
  --t-display: 600 30px/36px var(--font); --t-title: 700 26px/32px var(--font); --t-section: 600 15px/22px var(--font);
  --t-body: 400 14px/20px var(--font); --t-label: 500 13px/18px var(--font); --t-caption: 400 12.5px/18px var(--font);
  --t-micro: 500 11.5px/16px var(--font);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: var(--t-body); color: var(--ink); background: var(--bg); font-variant-numeric: tabular-nums; font-feature-settings: "cv11"; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
a { color: var(--accent); text-underline-offset: 3px; }
h1 { font: var(--t-title); letter-spacing: -.022em; margin: 0; }
h2 { font: var(--t-section); letter-spacing: -.006em; margin: 0; }
h3 { font: var(--t-label); font-weight: 600; color: var(--ink-2); margin: 20px 0 8px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font-size: 12.5px; }

.demo-banner { background: var(--warn-soft); color: var(--warn); font: var(--t-label); text-align: center; padding: 6px 16px; border-bottom: 1px solid #efd3ac; }

/* Top bar */
.top { border-bottom: 1px solid var(--line); }
.topbar, main, .filters-inner { max-width: 1320px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.topbar { display: flex; align-items: center; gap: 12px; height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-word { font: 700 17px/22px var(--font); letter-spacing: -.02em; }
.brand-name { font: 600 15px/20px var(--font); color: var(--ink-2); padding-left: 8px; border-left: 1px solid var(--line); }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; font: var(--t-caption); color: var(--muted); }

/* Sign-in */
body:not(.signed-in) { background: radial-gradient(120% 60% at 50% -10%, #e6f3f7 0%, #fff6e8 40%, #ffffff 72%) no-repeat; min-height: 100vh; }
body:not(.signed-in) .top { border-bottom: 0; }
.sign-in { max-width: 400px; margin: 72px auto 0; padding: 36px 32px 28px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.sign-in > p.muted { margin: 8px auto 24px; max-width: 34ch; }
button.google { width: 100%; height: 42px; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-xs); font-weight: 600; }
button.google:hover { background: var(--sunk); }
.sign-in-foot { margin: 20px 0 0; font: var(--t-caption); color: var(--muted); }

/* Controls */
button { font: 550 14px/20px var(--font); cursor: pointer; background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: var(--r-md); padding: 6px 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(17, 17, 22, .14); }
button:hover { background: var(--accent-hover); }
button:focus-visible { outline: none; box-shadow: var(--ring); }
button.small { padding: 3px 10px; font-size: 13px; }
button.ghost { background: var(--bg); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-xs); }
button.ghost:hover { background: var(--sunk); border-color: var(--line-strong); }
button .icon { stroke: currentColor; margin-right: 6px; vertical-align: -1px; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
select { font: var(--t-body); font-size: 13px; color: var(--ink); height: 28px; padding: 3px 28px 3px 10px; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-xs); appearance: none; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23696975' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center; }
select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input.switch { appearance: none; width: 30px; height: 18px; margin: 0; border-radius: var(--r-pill); background: var(--quiet); position: relative; cursor: pointer; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .22); transition: transform .15s ease-out; }
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(12px); }
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--sunk-2); border-radius: var(--r-md); }
.seg button { background: transparent; color: var(--ink-2); border: 0; box-shadow: none; font: 500 13px/20px var(--font); padding: 3px 10px; border-radius: var(--r-sm); white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 17, 22, .1), 0 0 0 1px rgba(17, 17, 22, .05); }

/* Filters: one compact sticky row */
.filters { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.5) blur(10px); -webkit-backdrop-filter: saturate(1.5) blur(10px); border-bottom: 1px solid var(--line); }
.filters-inner { padding-top: 10px; padding-bottom: 10px; }
.filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.field { display: flex; align-items: center; gap: 8px; margin: 0; }
.field-label { font: var(--t-micro); color: var(--muted); white-space: nowrap; }
.field.toggle { cursor: pointer; font: var(--t-label); color: var(--ink-2); }
.refresh { margin-left: auto; }
.filters-note { margin: 8px 0 0; font: var(--t-caption); color: var(--muted); }

/* Page */
main { padding-bottom: 72px; }
#status { margin: 0; font: var(--t-caption); }
#status:not(:empty) { margin: 16px 0 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--sunk); color: var(--ink-2); }
#status.warn:not(:empty) { background: var(--bad-soft); color: var(--bad); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 32px 0 10px; }
.page-line { margin: 6px 0 0; color: var(--ink-2); }
.as-of { font: var(--t-caption); color: var(--muted); }
.sources { margin: 0 0 20px; font: var(--t-caption); color: var(--muted); }
.group-title { font: 600 18px/26px var(--font); letter-spacing: -.012em; margin: 32px 0 12px; }

.source { display: inline-block; font: 600 10.5px/16px var(--font); letter-spacing: .02em; padding: 0 6px; border-radius: var(--r-sm); white-space: nowrap; cursor: help; background: var(--sunk-2); color: var(--ink-2); }
.source.missing { background: var(--warn-soft); color: var(--warn); }
.source.waiting { background: var(--accent-soft); color: var(--accent); }
.source.error { background: var(--bad-soft); color: var(--bad); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; margin: 0 0 16px; min-width: 0; box-shadow: var(--shadow-xs); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head > div:first-child { min-width: 0; flex: 1 1 220px; }
.card-note { margin: 4px 0 0; font: var(--t-caption); color: var(--muted); max-width: 80ch; }
.card-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-foot { margin: 14px 0 0; font: var(--t-caption); color: var(--muted); }
.card-foot:empty { display: none; }
.subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 20px 0 8px; }
.subhead h3 { margin: 0; }
.grid { display: grid; gap: 16px; align-items: start; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); }
.grid > .card { margin-bottom: 0; }
.empty { margin: 8px 0 0; padding: 16px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); background: var(--sunk); }
.empty.warn { color: var(--warn); border-color: #efd3ac; background: var(--warn-soft); }

/* KPIs: one strip, display figures, the change beside each */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.kpi { padding: 18px 20px 16px; min-height: 124px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; min-width: 0; display: flex; flex-direction: column; }
.kpi-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-label { font: var(--t-label); color: var(--ink-2); }
.kpi-figure { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 8px; }
.kpi-value { font: var(--t-display); letter-spacing: -.028em; font-variation-settings: "opsz" 32; }
.kpi-line { margin: auto 0 0; font: var(--t-caption); color: var(--muted); }
.delta { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/20px var(--font); padding: 0 7px; border-radius: var(--r-pill); white-space: nowrap; }
.delta .icon { stroke-width: 1.8; }
.delta.good { color: var(--good); background: var(--good-soft); }
.delta.bad { color: var(--bad); background: var(--bad-soft); }
.delta.flat { color: var(--muted); background: var(--sunk-2); }

/* Insights */
.insights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 0 32px; }
.insight { display: grid; grid-template-columns: 8px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--grid); align-items: start; }
.insight-dot { margin-top: 6px; }
.insight.tone-bad .insight-dot { fill: var(--bad); }
.insight.tone-warn .insight-dot { fill: var(--warn-dot); }
.insight.tone-good .insight-dot { fill: var(--good); }
.insight.tone-info .insight-dot { fill: var(--accent); }
.insight-text { margin: 0; font-weight: 550; }
.insight-rule { margin: 2px 0 0; font: var(--t-caption); color: var(--muted); }
details.more { margin-top: 8px; }
details.more summary { cursor: pointer; font: var(--t-label); color: var(--accent); width: max-content; }

/* Charts */
.chart { position: relative; margin: 4px 0 0; }
.plot { display: block; width: 100%; overflow: visible; font-family: var(--font); }
.plot .gridline { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.plot .axis { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.plot .tick { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.plot .bar.accent { fill: var(--accent); }
.plot .area { fill: var(--accent); opacity: .09; }
.plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .line.accent { stroke: var(--accent); }
.plot .line.prev { stroke: var(--prev); stroke-width: 1.5; stroke-dasharray: 4 4; }
.plot .dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.plot .dot.prev { stroke: var(--prev); }
.plot .rule { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.plot .rule-label { font-size: 11px; fill: var(--bad); font-weight: 600; }
.plot .crosshair { stroke: var(--ink); stroke-width: 1; opacity: .3; shape-rendering: crispEdges; }
.plot .hit { fill: transparent; cursor: crosshair; }
.tip { position: absolute; top: 4px; z-index: 3; pointer-events: none; min-width: 176px; max-width: 260px; padding: 10px 12px; background: rgba(17, 17, 22, .94); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-pop); font: var(--t-caption); }
.tip-title { font-weight: 600; margin-bottom: 6px; }
.tip-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; color: #c9c9d1; }
.tip-row strong { color: #fff; font-weight: 600; }
.tip-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); color: #c9c9d1; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: none; }
.key.prev { height: 0; border-top: 2px dashed var(--prev); border-radius: 0; background: none; width: 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font: var(--t-caption); color: var(--ink-2); margin: 0 0 8px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* Bars, figures, tables, reviews */
.bars { display: grid; grid-template-columns: minmax(96px, 30%) minmax(60px, 1fr) auto auto; column-gap: 12px; row-gap: 2px; }
.bars-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 5px 8px; margin: 0 -8px; border-radius: var(--r-sm); font-size: 13.5px; }
.bars-row:hover { background: var(--sunk); }
.bars-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bars-value { text-align: right; font-weight: 600; }
.bars-note { color: var(--muted); font-size: 12.5px; }
.track { display: flex; height: 8px; border-radius: var(--r-pill); background: var(--sunk-2); overflow: hidden; }
.track > .fill { display: block; border-radius: var(--r-pill); min-width: 2px; }
.fill.accent { background: var(--accent); }
.figures { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 6px 0 16px; }
.figure { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font: var(--t-caption); color: var(--muted); }
.figure strong { display: flex; align-items: center; gap: 8px; font: 600 24px/30px var(--font); color: var(--ink); letter-spacing: -.022em; }
.pill { display: inline-block; font: 600 11.5px/18px var(--font); padding: 0 7px; border-radius: var(--r-pill); background: var(--sunk-2); color: var(--ink-2); white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font: var(--t-micro); color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; overflow-wrap: anywhere; }
th.num, td.num { text-align: right; }
tbody tr:hover td { background: var(--sunk); }
tbody tr:last-child td { border-bottom: 0; }
.reviews { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; }
.reviews li { border-top: 1px solid var(--grid); padding: 10px 0; }
.reviews p { margin: 4px 0 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.stars { color: var(--warn-dot); letter-spacing: 1px; }

/* Loading: shapes of what is coming */
.loading { pointer-events: none; }
.loading .page-head > div { display: grid; gap: 10px; }
.sk { display: block; height: 12px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--sunk-2) 0%, #f8f8fa 50%, var(--sunk-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.loading .page-head .sk:first-child { height: 26px; }
.loading .kpi { gap: 12px; }
.sk-card { display: grid; gap: 12px; }
.sk-block { height: 200px; border-radius: var(--r-md); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } * { transition: none !important; } }

@media (max-width: 640px) {
  .topbar, main, .filters-inner { padding-left: 16px; padding-right: 16px; }
  .who span { display: none; }
  .filters { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .filters-row { flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .filters-row > * { flex: none; }
  .filters .field-label { display: none; }
  .refresh { margin-left: 0; }
  h1 { font-size: 22px; line-height: 28px; }
  .card { padding: 16px; }
  .kpi { padding: 14px; min-height: 112px; }
  .kpi-value { font-size: 24px; line-height: 30px; }
  .bars { grid-template-columns: minmax(72px, 32%) minmax(40px, 1fr) auto; }
  .bars-note { display: none; }
}