/* Aka landing page. Tokens and fonts live in base.css.
   Frame: the app's own dashboard. A fixed sidebar on the left (logo, section links, download);
   to its right a page header with the sample nickname field, a row of KPI tiles, the histogram
   card (a bar for every year, newest on the right; the early years are locked), the mentions
   of the picked year under it, and then every section as a dashboard card.
   Flat colour only; mint marks the nickname where it was found and the one action. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 15px/1.5 var(--sans); }
h1, h2, h3, p, ul, ol, dl, dt, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { flex: none; width: 16px; height: 16px; }
mark { padding: 1px 5px; border-radius: 5px; background: var(--hit); color: var(--hit-ink); font-weight: 700; }
:focus-visible { outline: 2px solid var(--hit); outline-offset: 2px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--bg); font-weight: 700; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; }
:root { --side: 232px; --pad: 32px; --gap: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--hit); color: var(--hit-ink); font: 700 15px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: #8AF3D3; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn--quiet { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.btn--quiet:hover { background: #283945; }
.btn--wide { width: 100%; height: 44px; }
.btn--lg { padding: 0 22px; font-size: 16px; }
.note { font-size: 13px; color: var(--text-3); }
.tag { display: inline-flex; flex: none; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--panel-2); font-size: 12px; font-weight: 700; color: var(--text-2); }
.redact { display: block; width: 104px; height: 22px; border-radius: 6px; background: var(--panel-2); }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }

/* ---------- sidebar ---------- */

.side { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; flex-direction: column; width: var(--side); padding: 18px 14px 14px; overflow-y: auto; background: var(--bg); }
.logo { display: inline-flex; align-items: center; align-self: flex-start; gap: 11px; min-height: 44px; padding: 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.logo img { border-radius: 8px; background: var(--panel-2); }
.side__nav { display: grid; gap: 2px; margin-top: 22px; }
.side__nav a { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 11px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); transition: background-color .15s ease-out, color .15s ease-out; }
.side__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side__nav a:hover { background: var(--panel); color: var(--text); }
.side__nav a.is-on { background: var(--panel-2); color: var(--text); }
.side__nav a.is-on svg { color: var(--hit); }
.side__get { display: grid; gap: 4px; margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.side__name { font-size: 14px; font-weight: 700; }
.side__get .note { font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.side__get .btn { margin-top: 10px; }

/* ---------- page header ---------- */

/* The line beside the sidebar belongs to the page column, so it runs the whole length of the page. */
.main, .foot { margin-left: var(--side); border-left: 1px solid var(--line); }
.main { padding: 26px var(--pad) 0; }
.main > *, .foot__in { max-width: 1360px; margin-inline: auto; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; }
.head__text { min-width: 0; }
h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.022em; font-weight: 800; text-wrap: balance; }
.lede { max-width: 62ch; margin-top: 8px; color: var(--text-2); text-wrap: pretty; }
.head__tools { display: flex; flex: none; gap: 10px; }
.field { display: flex; align-items: center; gap: 10px; width: 268px; height: 48px; padding: 0 4px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field > svg { color: var(--text-3); }
.field__nick { flex: 1; min-width: 0; font: 500 15px var(--mono); letter-spacing: -.01em; }
.field__again { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.field__again:hover { background: var(--panel-2); color: var(--text); }

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

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 22px; }
.kpi { position: relative; padding: 15px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.kpi dt { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-2); }
.kpi__v { margin-top: 3px; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 13px; color: var(--text-3); }
.kpi--lock { border: 1px dashed rgba(255, 255, 255, .26); background: none; transition: border-color .15s ease-out; }
.kpi--lock:hover { border-color: var(--hit); }
.first { display: grid; gap: 4px; width: 100%; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--text-2); font: 500 13px/1.5 var(--sans); text-align: left; cursor: pointer; }
.first::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.first:focus-visible { outline: none; }
.first:focus-visible::after { outline: 2px solid var(--hit); outline-offset: 2px; }

/* ---------- the histogram ---------- */

.chart { margin-top: var(--gap); padding: 18px 20px 12px; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.chart h2 { font-size: 16px; line-height: 1.5; letter-spacing: 0; font-weight: 700; }
.key { display: flex; gap: 20px; font-size: 13px; color: var(--text-2); }
.key li { display: inline-flex; align-items: center; gap: 8px; }
.key li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--bar); }
.key .key__pick::before { background: var(--hit); }
.key .key__lock::before { border: 1.5px dashed var(--text-3); background: none; }

.plot { --plot: 244px; --labels: 30px; --axis: 38px; position: relative; margin-top: 8px; padding: 26px 0 0 var(--axis); }
.grid { position: absolute; inset: auto 0 var(--labels) var(--axis); height: var(--plot); pointer-events: none; }
.grid i { position: absolute; inset: auto 0 calc(var(--f) * var(--plot)) 0; height: 1px; background: var(--line); }
.grid i::before { content: attr(data-v); position: absolute; right: 100%; top: 0; margin-right: 10px; translate: 0 -50%; font: 500 11px/1 var(--mono); color: var(--text-3); }
/* The locked years sit in a well, so the cliffhanger reads at a glance. */
.zone { position: absolute; left: var(--axis); bottom: var(--labels); width: calc((100% - var(--axis)) * var(--share, .5)); height: calc(var(--plot) + 14px); padding: calc(14px + var(--plot) * .17 - 14px) 14px 0; border-radius: 10px; background: var(--bg); pointer-events: none; transition: opacity .4s ease-out; }
.zone p { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 8px; background: var(--panel-2); font-size: 13px; color: var(--text-2); }
.zone b { font-weight: 700; color: var(--text); }
.js .dig:not(.is-done) .zone { opacity: 0; }

.years { position: relative; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); }
.years li { display: grid; grid-template-rows: var(--plot) var(--labels); }
.bar { --inset: 5px; position: relative; align-self: end; height: max(6px, calc(var(--f) * var(--plot))); margin: 0 var(--inset); padding: 0; border: 0; border-radius: 6px 6px 2px 2px; background: var(--bar); cursor: pointer; transition: height .5s cubic-bezier(.2, .8, .2, 1), background-color .15s ease-out, border-color .15s ease-out; }
.bar::before { content: attr(data-n); position: absolute; left: 50%; bottom: 100%; translate: -50% -6px; font: 500 12px/1 var(--mono); color: var(--text-2); opacity: 0; transition: opacity .15s ease-out; }
.bar:hover { background: #56707D; }
.bar:hover::before, .bar.is-on::before { opacity: 1; }
.bar.is-on { background: var(--hit); }
.bar.is-on::before { color: var(--hit); }
/* A locked year is an outline. It is drawn on the pseudo-element, so the button keeps its full width. */
.bar.is-locked, .bar.is-locked:hover { background: none; }
.bar.is-locked::before { content: ""; inset: 0; translate: none; border: 1.5px dashed var(--text-3); border-radius: inherit; opacity: 1; transition: border-color .15s ease-out; }
.bar.is-locked:hover::before { border-color: var(--text); }
.bar.is-locked.is-on::before { border-color: var(--hit); }
/* The whole column is the target, label included, however short the bar is. */
.bar::after { content: ""; position: absolute; inset: auto calc(var(--inset) * -1) calc(var(--labels) * -1); height: calc(var(--plot) + var(--labels)); }
.bar:focus-visible { outline: none; }
.bar:focus-visible::after { outline: 2px solid var(--hit); outline-offset: -2px; border-radius: 8px; }
.js .years li:not(.is-up) .bar { height: 0; }
.js .years li:not(.is-up) .bar::before { content: none; }
.years span { align-self: center; font: 500 12px/1 var(--mono); text-align: center; color: var(--text-3); }
.years li.is-on span { color: var(--text); }

/* ---------- the mentions of the picked year ---------- */

.found { margin-top: 10px; }
.found__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.found__head { display: flex; align-items: baseline; gap: 10px; padding-left: 2px; }
.found__head b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.found__head span { font-size: 14px; color: var(--text-2); }
.step { display: flex; gap: 6px; }
.step button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text-2); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.step button:hover { background: var(--panel-2); color: var(--text); }
.step button:disabled { opacity: .4; cursor: default; }
.step button:disabled:hover { background: var(--panel); color: var(--text-2); }
.hits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); min-height: 148px; margin-top: 6px; }
.hits[hidden] { display: none; }
.hit { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); animation: rise .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.hit:nth-child(2) { animation-delay: .06s; }
.hit:nth-child(3) { animation-delay: .12s; }
.hit__k { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 12px/1 var(--mono); word-spacing: -.3em; color: var(--text-3); }
.hit__k span:first-child { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--panel-2); font: 700 12px/1 var(--sans); word-spacing: 0; color: var(--text-2); }
.hit__q { font-size: 17px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
.hit__w { font-size: 13px; color: var(--text-3); }
.hit--more { grid-template-rows: none; align-content: center; gap: 2px; border: 1px dashed rgba(255, 255, 255, .26); background: none; }
.hit--more b { font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.hit--more span { font-size: 14px; color: var(--text-2); }
.sheet { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; min-height: 148px; margin-top: 6px; padding: 20px 24px; border: 1px solid var(--hit); border-radius: 12px; background: var(--panel); animation: rise .35s cubic-bezier(.2, .8, .2, 1); }
.sheet[hidden] { display: none; }
.sheet h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; }
.sheet p { max-width: 70ch; margin-top: 6px; color: var(--text-2); text-wrap: pretty; }
.sheet .actions { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }

/* ---------- other names, and where the mentions were: two cards ---------- */

h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.018em; font-weight: 800; text-wrap: balance; }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); margin-top: 40px; }
.panel { display: flex; flex-direction: column; padding: 24px; }
.panel > p { max-width: 52ch; margin-top: 8px; color: var(--text-2); text-wrap: pretty; }

.chain { display: grid; margin-top: auto; padding-top: 20px; }
.chain li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; min-height: 68px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.chain b { align-self: end; font: 500 19px/1.3 var(--mono); letter-spacing: -.02em; }
.chain span { align-self: start; font-size: 13px; color: var(--text-2); }
.chain .chain__n { grid-area: 1 / 2 / 3 / 3; display: inline-flex; align-self: center; align-items: center; gap: 7px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chain .chain__aka { position: relative; display: block; min-height: 0; padding: 7px 0 7px 44px; border: 0; background: none; font: 500 13px/20px var(--mono); color: var(--hit); }
.chain .chain__aka::before { content: ""; position: absolute; inset: 0 auto 0 25px; width: 2px; background: var(--panel-2); }
.chain .is-cut { border: 1px dashed rgba(255, 255, 255, .26); background: none; }
.chain .redact { width: 132px; height: 20px; margin: 3px 0 5px; }

.split { display: flex; gap: 3px; height: 44px; margin-top: 20px; }
.split i { flex: 0 0 0; border-radius: 4px; background: #EEF3F2; }
.split i:first-child { border-radius: 10px 4px 4px 10px; }
.split i:last-child { border-radius: 4px 10px 10px 4px; }
.split i:nth-child(2), .legend li:nth-child(2) i { background: #B4C2C6; }
.split i:nth-child(3), .legend li:nth-child(3) i { background: #7F9199; }
.split i:nth-child(4), .legend li:nth-child(4) i { background: #53666F; }
.split i:nth-child(5), .legend li:nth-child(5) i { background: #35454E; }
.js .places .split { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.3, .7, .2, 1) .15s; }
.js .places.is-in .split { clip-path: inset(0 0 0 0); }
.legend { display: grid; flex: 1; grid-auto-rows: minmax(46px, 1fr); gap: 6px; margin-top: 14px; }
.legend li { display: grid; grid-template-columns: 12px 112px minmax(0, 1fr) 40px 38px; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 10px; background: var(--bg); }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: #EEF3F2; }
.legend h3 { font-size: 15px; font-weight: 700; }
.legend p { font-size: 14px; line-height: 1.35; color: var(--text-2); }
.legend b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; }
.legend span { font: 500 12px var(--mono); text-align: right; color: var(--text-3); }

/* ---------- questions: one card, question left, answer right ---------- */

.faq { margin-top: var(--gap); padding-bottom: 10px; }
.faq__rows { display: grid; margin-top: 16px; }
/* The answers start on the same line as the right-hand card above. */
.faq__rows > div { display: grid; grid-template-columns: calc((100% + 70px) * 5 / 12 - 34px) minmax(0, 1fr); gap: 6px 32px; padding: 16px 18px; border-radius: 10px; }
.faq__rows > div:nth-child(odd) { background: var(--bg); }
.faq dt { font-size: 16px; font-weight: 700; }
.faq dd { max-width: 64ch; color: var(--text-2); text-wrap: pretty; }

/* ---------- closing: one more KPI tile, a large one ---------- */

.final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); align-items: end; gap: 32px 56px; margin-top: var(--gap); padding: 24px 24px 26px; }
.final__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.final h2 { margin-top: 6px; font-size: clamp(36px, 4vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
.final .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.mini { position: relative; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: end; gap: 5px; height: 148px; }
.mini i { height: max(5px, calc(var(--f) * 112px)); border-radius: 4px 4px 1px 1px; background: #35454E; }
.mini i:first-of-type { background: var(--hit); }
.mini::before { content: ""; position: absolute; left: calc((100% - 75px) / 32); bottom: 11px; width: 1px; height: 96px; background: var(--text-3); }
.mini__tip { position: absolute; left: 0; top: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 8px; background: var(--panel-2); font-size: 13px; font-weight: 600; color: var(--text); }
.mini__tip svg { color: var(--text-2); }

.foot { padding: 18px var(--pad) 28px; }
.foot__in { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-3); }

.js [data-reveal] { opacity: 0; translate: 0 14px; transition: opacity .6s ease-out, translate .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (max-width: 1180px) {
  .head { flex-direction: column; align-items: stretch; }
  .head__tools { align-self: flex-start; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .faq__rows > div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .final { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  :root { --pad: 16px; --gap: 12px; }
  html { scroll-padding-top: 76px; }
  .side { position: sticky; inset: 0 auto auto; overflow: visible; flex-direction: row; align-items: center; justify-content: space-between; width: auto; height: 64px; padding: 0 var(--pad) 0 8px; border-bottom: 1px solid transparent; transition: border-color .2s ease-out; }
  .side.is-stuck { border-bottom-color: var(--line); }
  .side__nav, .side__get p { display: none; }
  .side__get { display: block; margin: 0; padding: 0; border: 0; background: none; }
  .side__get .btn { width: auto; margin: 0; padding: 0 16px; }
  .main, .foot { margin-left: 0; border-left: 0; }
  .main { padding-top: 10px; }
  h1 { font-size: 28px; }
  .head__tools { align-self: stretch; }
  .head__tools .btn { display: none; }
  .field { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  .kpi { padding: 13px 14px 12px; }
  .kpi__v { font-size: 26px; }
  /* Edge to edge, so each of the sixteen columns is a full 24px wide under a thumb. */
  .chart { margin-inline: calc(var(--pad) * -1); padding: 16px 0 8px; border-inline: 0; border-radius: 0; }
  .card__head { padding: 0 var(--pad); }
  .key { gap: 14px; }
  .plot { --plot: 150px; --labels: 28px; --axis: 0px; padding-top: 22px; }
  .grid i::before { display: none; }
  .zone { height: calc(var(--plot) + 10px); padding: calc(10px + var(--plot) * .17 - 14px) 8px 0; border-radius: 0 10px 10px 0; }
  .zone p { padding: 0 9px 0 7px; font-size: 12px; }
  .bar { --inset: 2px; border-radius: 4px 4px 1px 1px; }
  .bar::before { font-size: 11px; }
  .bar:not(.is-locked, .is-on):hover::before { opacity: 0; }
  .years .c { display: none; }
  .years span { font-size: 11px; }
  .step button { width: 44px; height: 44px; }
  .hits { grid-template-columns: minmax(0, 1fr); }
  .sheet { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .sheet .actions .btn { flex: 1 1 auto; }
  .panel { padding: 20px 16px 16px; }
  .legend li { grid-template-columns: 12px minmax(0, 1fr) auto 34px; gap: 2px 10px; padding: 9px 12px; }
  .legend p { grid-area: 2 / 2 / 3 / 5; }
  .legend b { grid-area: 1 / 3; }
  .legend span { grid-area: 1 / 4; }
  .faq__rows > div { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .final { gap: 28px; padding: 20px 16px; }
  .final .actions .btn { width: 100%; }
  .mini { height: 124px; gap: 4px; }
  .mini i { height: max(5px, calc(var(--f) * 88px)); }
  .mini::before { left: calc((100% - 60px) / 32); height: 72px; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .js .places .split { clip-path: none; transition: none; }
  .bar, .zone, .btn { transition: none; }
  .hit, .sheet { animation: none; }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1900px) { .main > *, .foot__in { max-width: min(1360px + (100vw - 1900px) * .9, 1960px); } }
/* ---------- end every screen size ---------- */