/* Live Twice — AI character dashboard.

   REskinned 2026-09-10 to the Fan Page Portal's system (James: "make it like
   the fan page reporting dashboard with how it looks"). Tokens, type scale,
   topbar, tabs, tiles, cards and table.data are lifted verbatim from
   fanpage_portal/site/assets/app.css so the two reporting surfaces read as one
   product rather than two designs — including the BLUE accent, which is that
   portal's, not livetwice.co.uk's red.

   That portal's own note applies here unchanged: clean professional product UI
   in the Linear/Stripe register — one grotesque, one spacing scale, one radius
   scale, one accent used only functionally, structure through surfaces and
   spacing rather than heavy rules. There is never a second accent on a page.

   What is NEW here, because the fan page portal has no equivalent: the finding
   cards (.find), which carry the "do more / cooling / do less" reasoning. They
   are built from the same card primitive so they do not read as an import. */

@import url('/assets/fonts.css');

:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --border: #e7e7e9;
  --border-soft: #f0f0f2;
  --text: #18181b;
  --text-2: #5f5f68;
  --text-3: #707078;

  --accent: #1b4dff;
  --accent-hover: #173fd6;
  --accent-tint: rgba(27, 77, 255, 0.07);
  --accent-line: rgba(27, 77, 255, 0.18);

  --ok: #15803d;   --ok-bg: #f0fdf4;   --ok-bd: #d3f0dd;
  --warn: #b45309; --warn-bg: #fffbeb; --warn-bd: #f7e6bb;
  --chg: #be123c;  --chg-bg: #fff1f2;  --chg-bd: #fadde2;

  --r-card: 10px;
  --r-ctl: 7px;
  --shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-lift: 0 4px 14px rgba(24, 24, 27, 0.07);

  --wrap: 1128px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* [hidden] MUST WIN. Any class that sets `display` beats the browser's own
   `[hidden] { display: none }`, so `.banner { display: flex }` would leave a
   banner permanently on screen even with the attribute correctly set. */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--text); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center; flex: none;
  overflow: hidden;
}
.brand-mark img { width: 62%; height: auto; }
.brand-name { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.brand-sub { font-size: 11.5px; color: var(--text-3); line-height: 1.3; white-space: nowrap; }

.topnav { display: flex; gap: 4px; margin-left: 4px; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; background: none; border: 0;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  padding: 6px 10px; border-radius: var(--r-ctl);
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.tab:hover { color: var(--text); background: var(--surface); }
.tab[aria-selected='true'] { color: var(--accent); background: var(--accent-tint); }

.account { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { text-align: right; line-height: 1.25; }
.who b { display: block; font-size: 12.5px; font-weight: 600; }
.who span { font-size: 11px; color: var(--text-3); }

/* ---------- layout ------------------------------------------------------ */

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

.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sec-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.sec-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sec-head .aside { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.lede { font-size: 13.5px; color: var(--text-2); margin-bottom: 24px; max-width: 68ch; }
.sec { margin-bottom: 34px; }

.empty {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 44px 28px;
  text-align: center;
  color: var(--text-2);
  font-size: 13.5px;
}
.empty strong { display: block; font-size: 16px; color: var(--text); margin-bottom: 6px; font-weight: 600; }

/* ---------- window switch ----------------------------------------------- */
/* A segmented control rather than the portal's tabs: these are three views of
   the SAME page, where the tabs above change which page you are on. Using tab
   styling for both would say the two do the same thing. */
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; }
.seg button {
  appearance: none; background: var(--bg); border: 0;
  border-right: 1px solid var(--border);
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  padding: 7px 13px; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--surface); color: var(--text); }
.seg button[aria-pressed='true'] { background: var(--accent); color: #fff; font-weight: 600; }
.seg-label { font-size: 12px; color: var(--text-3); }
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 28px; }
.controls .spacer { flex: 1 1 auto; }

/* ---------- banner ------------------------------------------------------ */
/* Status is WORDED, never colour alone. The tint reinforces the sentence. */
.banner {
  border: 1px solid var(--warn-bd); background: var(--warn-bg);
  border-radius: var(--r-card); padding: 13px 16px;
  font-size: 13px; color: #7a4708; margin-top: 22px;
}
.banner b { color: var(--warn); }

/* ---------- tiles ------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.tile {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg); box-shadow: var(--shadow);
  padding: 16px 18px;
}
.tile .t-label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.tile .t-value {
  font-size: 27px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin: 6px 0 3px; line-height: 1.1;
}
.tile .t-value.muted { color: var(--text-3); font-size: 22px; }
.tile .t-sub { font-size: 12px; color: var(--text-3); }

/* ---------- cards ------------------------------------------------------- */

.card {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 24px;
}
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.card-head h3 { font-size: 14px; font-weight: 600; }
.card-head .aside { margin-left: auto; font-size: 12px; color: var(--text-3); }
.card-head .handle { font-size: 12.5px; color: var(--text-3); }
.card-body { padding: 18px; }
.card-body .tiles { margin-bottom: 0; }
.card-body .tiles + .lede { margin: 20px 0 0; }

/* ---------- finding cards ----------------------------------------------- */

.finds { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 24px; }
.find {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg); box-shadow: var(--shadow);
  padding: 16px 18px;
  transition: box-shadow 0.14s, border-color 0.14s;
}
.find:hover { box-shadow: var(--shadow-lift); border-color: #dededf; }
.find .who-line {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 7px;
}
.find h3 { font-size: 14.5px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.find .ev { font-size: 12.5px; color: var(--text-2); margin-top: 8px; }
.find .why { font-size: 12.5px; color: #8a4b06; margin-top: 8px; font-weight: 500; }
.find .quote {
  font-size: 12.5px; color: var(--text-2); margin-top: 10px;
  padding-left: 11px; border-left: 2px solid var(--border);
}
.find .meta { font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
.find.up { border-top: 2px solid var(--accent); }
.find.cool { background: var(--warn-bg); border-color: var(--warn-bd); }
.find.down { border-top: 2px solid var(--chg); }
.find.fix { border-top: 2px solid var(--warn); }

/* ---------- tables ------------------------------------------------------ */

/* tabindex="0" on .tablewrap in the markup, or the scroll region is
   keyboard-unreachable — the a11y audit's standing finding. */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td {
  text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
table.data tr:last-child td { border-bottom: 0; }
table.data th {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  background: var(--surface); text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; vertical-align: bottom;
}
table.data tbody tr:hover { background: var(--surface); }
table.data td.num, table.data th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.data td.cap { color: var(--text-2); min-width: 280px; }
.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--accent); cursor: pointer;
}
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- charts ------------------------------------------------------ */
/* One series, one hue. Nothing on this dashboard encodes identity by colour —
   the bars are MAGNITUDE, drawn in a single accent, sorted by value, and each
   carries its printed number so length is never the only encoding. */

.spark { width: 100%; height: 44px; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .dot { fill: var(--accent); }
.spark-cap { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }

.bars { display: grid; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 148px 1fr auto; align-items: center; gap: 14px; font-size: 13px; }
.bar-track { background: var(--surface-2); border-radius: 4px; height: 14px; }
.bar-fill { background: var(--accent); border-radius: 4px; height: 14px; min-width: 3px; }
.bar-val { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12.5px; }

/* ---------- foot -------------------------------------------------------- */

.foot {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-3); max-width: 84ch; line-height: 1.6;
}

/* ---------- login ------------------------------------------------------- */

.auth { max-width: 380px; margin: 15vh auto 0; padding: 0 24px; }
.auth .brand-mark { margin-bottom: 22px; }
.auth h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.auth p { font-size: 13.5px; color: var(--text-2); margin-top: 8px; }
.auth label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin: 24px 0 7px; }
/* Every text-ish type, not a hand-picked two. `type='email'` was missed on the
   first pass and the field rendered at the browser's default width beside a
   full-width button — the kind of thing that reads as broken rather than as a
   style bug. */
input[type='password'], input[type='text'], input[type='email'],
input[type='number'], input[type='tel'], input[type='search'] {
  font: inherit; font-size: 13.5px; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--bg); color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); outline: none; }
.btn {
  appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-ctl);
  transition: background 0.12s, border-color 0.12s, opacity 0.12s; white-space: nowrap;
}
.btn:hover { background: var(--surface); }
.btn-primary {
  width: 100%; margin-top: 16px; padding: 10px 14px;
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-plain {
  width: 100%; margin-top: 10px; padding: 9px 14px;
  background: none; border-color: transparent; color: var(--text-2); font-weight: 500;
}
.btn-plain:hover { background: var(--surface); color: var(--text); }
.flash { margin-top: 16px; font-size: 13px; color: var(--chg); }

@media (max-width: 640px) {
  .wrap, .topbar-in { padding-left: 16px; padding-right: 16px; }
  .bar-row { grid-template-columns: 104px 1fr auto; }
  .tile .t-value { font-size: 24px; }
}