/* Battery Ranking, batteryranking.com.
   vestris.ai's warm cream, painted skies, serif voice and olive buttons, carrying
   the internal metrics dashboard's language: tonal linked cards (28px outer
   corners, 6px joins, 2px seams, no shadows), slate/clay/sage measure bars,
   Phosphor icons and hatching only for withheld values. Light mode only. */

@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin.5eb09b5ac0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-italic.5a51946dff.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin-ext.ee9eeb232c.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin.4c8b93f431.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --page: #f1efe6;
  --page-deep: #e9e6da;
  --surface: #fbfaf5;
  --surface-low: #f5f3eb;
  --control: #e7e4d8;
  --control-hover: #dedacb;
  --ink: #23251f;
  --ink-2: #55574d;
  --muted: #66685d;
  --hair: #e2dfd3;
  --axis: #b2b0a3;
  --olive: #5b5f47;
  --olive-hover: #484c37;
  --on-olive: #f6f4ec;
  --active: #4b7188;
  --standby: #9b7558;
  --charging: #537f73;
  --measure: var(--ink-2);
  --wash: #f3f1e9;
  --selected: #e4e6d6;
  --glass: rgba(251, 250, 245, .78);
  --glass-edge: rgba(91, 95, 71, .16);
  --hatch-ink: rgba(48, 54, 48, .35);
  --card-corner: 28px;
  --join-corner: 6px;
  --join-gap: 2px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header: 84px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
.m-active { --measure: var(--active); }
.m-standby { --measure: var(--standby); }
.m-charging { --measure: var(--charging); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); scrollbar-color: var(--axis) transparent; scrollbar-width: thin; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--olive); }
::selection { background: rgba(91, 95, 71, .22); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--axis); transition: text-decoration-color .2s, color .2s, background-color .2s; }
a:hover { text-decoration-color: var(--olive); }
/* Text-only links that open a new tab get an arrow after them. */
a[target='_blank']:not(:empty):not(:has(*))::after { content: "↗️"; display: inline-block; margin-inline-start: 0.125rem; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
.r-rank, .val { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite, .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.hatch-line { stroke: var(--hatch-ink); stroke-width: 1; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--olive); color: var(--on-olive); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- type */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; text-align: center; font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.1rem); color: var(--ink); }
.display em { font-style: italic; letter-spacing: -.015em; }
.display-hero { font-size: clamp(3rem, 1.5rem + 5.6vw, 6rem); line-height: .98; }
.display-left { text-align: left; }
.display-small { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); }
.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 44em; }

/* ---------------------------------------------------------------- buttons, links */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--olive); color: var(--on-olive);
  font: 500 .98rem/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
.button:hover { background: var(--olive-hover); color: var(--on-olive); }
.button:active { transform: translateY(1px); }
.button-soft { background: var(--control); color: var(--ink); }
.button-soft:hover { background: var(--control-hover); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--olive); }
.text-link .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.text-link:hover { color: var(--olive-hover); }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- header: the floating bar */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--header); padding: 12px var(--gutter) 0; pointer-events: none; }
.nav-bar { pointer-events: auto; max-width: var(--wrap); margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 20px; padding: 0 10px 0 18px;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 16px; }
@supports (backdrop-filter: blur(1px)) { .nav-bar { backdrop-filter: blur(18px) saturate(1.25); } }
@media (prefers-reduced-transparency: reduce) { .nav-bar { background: var(--surface); backdrop-filter: none; } }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }
.brand-icon { width: 26px; height: 26px; }
.brand-name { font-family: var(--serif); font-size: 1.62rem; letter-spacing: -.01em; line-height: 1; }
.site-nav { display: flex; gap: 2px; margin: 0 auto; }
.site-nav a { text-decoration: none; font-size: .95rem; padding: 8px 13px; border-radius: 10px; color: var(--ink); white-space: nowrap; }
.site-nav a:hover { background: var(--control); }
.site-nav a[aria-current="page"] { background: var(--control); }
.nav-menu { display: none; }
.search-header { width: 230px; flex: none; }
.search-header input { height: 40px; font-size: .92rem; padding: 0 34px 0 38px; background: var(--surface); }
.search-header .search-icon { left: 13px; width: 16px; height: 16px; }
.search-key { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 .8rem/1 var(--sans); color: var(--muted); pointer-events: none; }
.search-header input:focus ~ .search-key { opacity: 0; }

/* ---------------------------------------------------------------- search pill (dashboard) */
.search { position: relative; display: flex; align-items: center; }
.search input { width: 100%; height: 52px; border: 1px solid transparent; border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 1rem var(--sans);
  padding: 0 18px 0 48px; appearance: none; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(91, 95, 71, .14); }
.search input::-webkit-search-cancel-button { appearance: none; display: none; }
.search-clear { position: absolute; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; }
.search-clear:hover { background: var(--control); color: var(--ink); }
.search-clear:active { background: var(--selected); }
.search-clear .icon { width: 14px; height: 14px; }
.search:has(.search-clear:not([hidden])) input { padding-right: 52px; }
.search:has(.search-go):has(.search-clear:not([hidden])) input { padding-right: 136px; }
.search:has(.search-go) .search-clear { right: 96px; }
.search-large:has(.search-go) .search-clear { right: 114px; }
.search-header .search-clear { right: 6px; width: 28px; height: 28px; }
.search-header:has(.search-clear:not([hidden])) .search-key { display: none; }
.search-icon { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--ink-2); pointer-events: none; }
.search-go { position: absolute; right: 6px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--olive); color: var(--on-olive); font: 500 .92rem var(--sans); cursor: pointer; }
.search-go:hover { background: var(--olive-hover); }
.search:has(.search-go) input { padding-right: 112px; }
.search-large input { height: 62px; font-size: 1.06rem; padding-left: 52px; box-shadow: 0 0 0 1px var(--glass-edge); }
.search-large .search-icon { left: 20px; }
.search-large .search-go { height: 48px; right: 7px; padding: 0 22px; }
.search-list { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; text-align: left;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 16px; max-height: min(420px, 60vh); overflow: auto; }
@supports (backdrop-filter: blur(1px)) { .search-list { backdrop-filter: blur(24px) saturate(1.2); background: rgba(251, 250, 245, .94); } }
.search-header .search-list { left: auto; width: min(420px, 90vw); }
.search-list li { display: grid; grid-template-columns: 1fr auto; gap: 1px 16px; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.search-list li[aria-selected="true"], .search-list li:hover { background: var(--selected); }
.search-list .opt-name { font-size: .98rem; line-height: 1.3; }
.search-list .opt-sub { grid-column: 1; font-size: .78rem; color: var(--muted); }
.search-list .opt-rank { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-size: .78rem; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.search-list .opt-empty { display: block; color: var(--muted); cursor: default; font-size: .92rem; }
.search-list .opt-empty:hover { background: none; }

/* ---------------------------------------------------------------- ranking rows (dashboard) */
.rank-list { --cols: 44px minmax(150px, 1.55fr) minmax(110px, 1fr) repeat(3, minmax(108px, 1fr)); }
.rank-head { display: grid; grid-template-columns: var(--cols); gap: 16px; padding: 0 20px 10px; font-size: .8rem; color: var(--ink-2); align-items: end; }
.rank-head span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.rank-head .icon { width: 15px; height: 15px; color: var(--measure); }
.rank-head small { flex-basis: 100%; font-size: .72rem; color: var(--muted); padding-left: 21px; }
.rank-head .h-rank { justify-content: center; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--join-gap); }
.row-link { display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: center; min-height: 58px; padding: 8px 20px; background: var(--surface); border-radius: var(--join-corner);
  color: var(--ink); text-decoration: none; transition: background-color .15s; }
.row:first-child .row-link { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.row:last-child .row-link { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.row-link:hover { background: var(--wash); }
.row.is-current .row-link { background: var(--selected); }
.row-link:focus-visible { outline-offset: -2px; position: relative; z-index: 1; }
.r-rank { text-align: center; font-size: .92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.r-name { display: flex; flex-direction: column; min-width: 0; }
.r-brand { font-size: .74rem; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-model { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.r-score, .r-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.r-m .icon { display: none; }
.bar { width: 100%; height: 5px; }
.bar .track { fill: var(--control); }
.bar .fill { fill: var(--measure); }
.bar-index .fill { fill: var(--ink-2); }
.val { font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; min-width: 3.4em; }
.r-score .val { min-width: 2.6em; }
.unit { color: var(--muted); font-size: .8em; }
.table-note { font-size: .86rem; color: var(--muted); margin: 16px 0 0; max-width: 78ch; }

/* ---------------------------------------------------------------- shared sections */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(88px, 11vw, 150px) var(--gutter) 0; }
.section > .display { max-width: 18ch; margin: 0 auto; }
.section-more { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 28px 0 0; }
.section-more-center { justify-content: center; }
.card { background: var(--surface); border-radius: var(--card-corner); }

/* Keys: a drawn glyph and a few words, in place of a caption that explains a figure. */
.keys { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.keys-center { justify-content: center; }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key-bar::before, .key-crowd::before, .key-median::before, .key-dot::before, .key-top::before, .key-tick::before, .key-median-mark::before { content: ""; flex: none; }
.key-bar::before { width: 26px; height: 5px; border-radius: 3px; background: linear-gradient(to right, var(--ink-2) 0 62%, var(--control) 62%); }
.key-crowd::before { width: 16px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--measure) 16%, transparent); border: 1px solid color-mix(in srgb, var(--measure) 35%, transparent); }
.key-median::before { width: 18px; border-top: 1.5px dashed var(--ink-2); }
.measure .key-median::before { width: 0; height: 12px; border-top: 0; border-left: 1.5px dashed var(--ink-2); }
.key-dot::before { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.key-top::before { width: 18px; height: 2px; background: var(--ink); }
.key-tick::before { width: 1.5px; height: 14px; background: var(--ink-2); opacity: .6; }
.key-median-mark::before { width: 9px; height: 7px; background: var(--olive); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.list-meta { display: flex; flex-wrap: wrap; margin: 0; color: var(--ink-2); }

/* ---------------------------------------------------------------- home: hero */
.page-home main { margin-top: calc(-1 * var(--header)); }
.hero { position: relative; isolation: isolate; padding: calc(var(--header) + clamp(48px, 9vh, 112px)) var(--gutter) 0; }
.hero-sky { position: absolute; inset: 0 0 auto; height: min(1080px, 112svh); z-index: -1; overflow: hidden; }
.hero-painting { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(241, 239, 230, .38) 0%, rgba(241, 239, 230, .16) 38%, rgba(241, 239, 230, .55) 66%, var(--page) 94%); }
.hero-copy { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-copy .display-hero { margin-bottom: 26px; }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 32px; font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); color: #45473d; }
.hero-stats .num { color: var(--ink); font-weight: 500; }
.hero-stats > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--axis); vertical-align: .22em; }
/* Left-aligned meta lines: every item carries a leading dot, and the line is shifted
   left by one dot so the dot that would start a wrapped line is clipped. */
.list-meta, .phone-sub { margin-left: -28px !important; clip-path: inset(-6px -6px -6px 28px); }
.list-meta > span::before, .phone-sub > span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--axis); vertical-align: .22em; }
.hero-copy .search { max-width: 640px; margin: 0 auto; }
.hero-frame { max-width: var(--wrap); margin: clamp(56px, 8vh, 96px) auto 0; padding: 12px; border-radius: calc(var(--card-corner) + 12px); background: rgba(251, 250, 245, .5); border: 1px solid var(--glass-edge); }
@supports (backdrop-filter: blur(1px)) { .hero-frame { backdrop-filter: blur(16px) saturate(1.15); } }
.frame-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 8px 14px 16px; font-size: .86rem; }
.frame-title { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.frame-title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--charging); vertical-align: 1px; }
.frame-meta { color: var(--ink-2); }
.frame-all { margin-left: auto; font-size: .92rem; }
.hero[data-search] .frame-meta { display: none; }
.hero[data-search] .frame-title::before { background: var(--olive); }
.hero-empty { display: flex; justify-content: center; margin: 0; padding: 28px 20px; border-radius: var(--card-corner); background: var(--surface); }
.hero-frame .rank-head { padding-top: 0; }
.hero-frame .keys { margin: 12px 14px 4px; color: var(--ink-2); }
/* Hero headline: site.js brushes each changed word into the next headline with a
   stroke in that headline's measure colour. Every headline is two fixed rows; the
   size caps at the width that keeps the widest row on one line. The heading keeps
   the height of its tallest headline (set by site.js), so nothing below moves. Words become boxes (.ht-*) only while a stroke runs. */
.display-hero[data-headlines] { display: flex; flex-direction: column; justify-content: flex-end; --brush: var(--ink-2);
  font-size: min(clamp(3rem, 1.5rem + 5.6vw, 6rem), calc((100vw - 2 * var(--gutter)) / 8.2)); }
.display-hero[data-measure="active"] { --brush: var(--active); }
.display-hero[data-measure="standby"] { --brush: var(--standby); }
.display-hero[data-measure="charging"] { --brush: var(--charging); }
.hero-words { display: block; }
.ht-word { position: relative; display: inline-block; white-space: nowrap; }
.ht-ink { display: inline-block; padding: .3em .15em .3em 0; margin: -.3em -.15em -.3em 0; }
.ht-new { position: absolute; top: 0; left: 0; }
.ht-brush { position: absolute; top: .1em; bottom: -.02em; left: 0; width: 0; pointer-events: none; background: var(--brush);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cfilter id='p' x='0' y='0' width='240' height='60' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125 .24' numOctaves='3' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 .12' result='streaks'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025 .1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1' result='m'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='m' scale='18' xChannelSelector='R' yChannelSelector='G' result='edge'/%3E%3CfeComposite in='streaks' in2='edge' operator='in'/%3E%3C/filter%3E%3Crect width='240' y='9' height='42' filter='url(%23p)'/%3E%3C/svg%3E") 0 50% / 4.8em 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cfilter id='p' x='0' y='0' width='240' height='60' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125 .24' numOctaves='3' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 .12' result='streaks'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025 .1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1' result='m'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='m' scale='18' xChannelSelector='R' yChannelSelector='G' result='edge'/%3E%3CfeComposite in='streaks' in2='edge' operator='in'/%3E%3C/filter%3E%3Crect width='240' y='9' height='42' filter='url(%23p)'/%3E%3C/svg%3E") 0 50% / 4.8em 100% repeat-x; }
.ht-probe { position: absolute; visibility: hidden; }
.ht-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* "backwards", not "both": a held transform would make each child a stacking context and trap overlays */
  .hero-copy > * { animation: rise .9s var(--ease) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-frame { animation: rise 1.1s var(--ease) .3s backwards; }
  .hero-painting { animation: settle 2.4s var(--ease) backwards; } /* not "both": a held blur slows every repaint over the sky */
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes settle { from { transform: scale(1.06); filter: blur(4px); } }

/* ---------------------------------------------------------------- method flow
   Stages are columns and measures are lanes; below 960px the grid transposes so
   stages become rows. Stage cards are linked like ranking rows. */
.flow { margin: 44px 0 0; }
.read-head .flow { margin-top: 28px; }
.flow-cap { margin: 0 0 12px 6px; font-size: .86rem; color: var(--ink-2); }
.flow-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--join-gap); }
.flow-stage { grid-row: 1 / 6; background: var(--surface); border-radius: var(--join-corner); }
.flow-stage.s1 { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.flow-stage.s5 { background: var(--selected); border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.s1 { grid-column: 1; } .s2 { grid-column: 2; } .s3 { grid-column: 3; } .s4 { grid-column: 4; } .s5 { grid-column: 5; }
.l1 { grid-row: 2; } .l2 { grid-row: 3; } .l3 { grid-row: 4; }
.flow-head { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 20px; padding: 20px 0 8px; font-size: .8rem; color: var(--ink-2); }
.flow-arrow { width: 15px; height: 15px; color: var(--axis); }
.flow-cell, .flow-foot { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; margin: 0 20px; padding: 10px 0; }
.flow-cell.l2, .flow-cell.l3, .flow-foot { border-top: 1px solid var(--hair); }
.flow-foot { grid-row: 5; padding-bottom: 18px; }
.flow-m { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .92rem; }
.flow-m .icon { width: 17px; height: 17px; color: var(--measure); }
.flow-v { margin-left: auto; font-size: 1.02rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-cell.s2 { gap: 8px; }
.flow-cell.s2::before { content: ""; flex: none; width: 14px; height: 5px; border-radius: 999px; background: var(--measure); }
.flow-cell.s2 .flow-v { margin-left: 0; }
.flow-bar { flex: 1 1 auto; min-width: 24px; height: 6px; }
.flow-bar .track { fill: var(--control); }
.flow-bar .fill, .flow-bar .seg { fill: var(--measure); }
.flow-w { flex: none; min-width: 2.7em; font-size: .8rem; color: var(--measure); font-variant-numeric: tabular-nums; }
.flow-foot .flow-w { color: var(--ink-2); }
.flow-foot .flow-v { font-weight: 500; }
.flow-score { grid-row: 2 / 6; align-self: center; margin: 0 24px; padding: 8px 0 20px; }
.flow-rug { margin: 0 0 14px; }
.rug { display: block; width: 100%; height: 28px; }
.rug-below { fill: var(--ink-2); opacity: .6; }
.rug-above { fill: var(--axis); opacity: .55; }
.rug-mark { stroke: var(--ink); stroke-width: 2; }
.flow-rug-keys { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: .74rem; color: var(--ink-2); }
.flow-rug-keys span { display: inline-flex; align-items: center; gap: 4px; }
.flow-rug-keys .icon { width: 13px; height: 13px; }
.flow-score-num { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(3.4rem, 2.6rem + 2vw, 4.6rem); line-height: .9; letter-spacing: -.02em; }
.flow-score .bar { height: 6px; }
.flow-score .bar .track { fill: var(--surface); }
.flow-rank { margin: 12px 0 0; font-size: .86rem; color: var(--ink-2); }
.flow-rank .num { color: var(--ink); }
@media (max-width: 960px) {
  .flow-grid { grid-template-columns: minmax(88px, .9fr) repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: var(--join-gap); }
  .flow-stage { grid-column: 1 / -1; }
  .flow-stage.s1 { grid-row: 1; border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
  .flow-stage.s2 { grid-row: 2; } .flow-stage.s3 { grid-row: 3; } .flow-stage.s4 { grid-row: 4 / 6; }
  .flow-stage.s5 { grid-row: 6; border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
  .flow-head { grid-column: 1; align-self: center; justify-content: flex-start; margin: 0; padding: 14px 6px 14px 18px; }
  .flow-head.s2 { grid-row: 2; } .flow-head.s3 { grid-row: 3; } .flow-head.s4 { grid-row: 4 / 6; } .flow-head.s5 { grid-row: 6; }
  .flow-arrow { display: none; }
  .flow-cell.s1 { grid-row: 1; } .flow-cell.s2 { grid-row: 2; } .flow-cell.s3 { grid-row: 3; } .flow-cell.s4 { grid-row: 4; }
  .flow-cell.l1 { grid-column: 2; } .flow-cell.l2 { grid-column: 3; } .flow-cell.l3 { grid-column: 4; }
  .flow-cell, .flow-foot { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 0; margin: 0; padding: 14px 8px; }
  .flow-cell.l2, .flow-cell.l3 { border-top: 0; }
  .flow-cell.s2 { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .flow-foot.s4 { grid-row: 5; grid-column: 2 / -1; flex-direction: row; align-items: center; gap: 10px; margin-right: 12px; padding-top: 10px; }
  .flow-m { flex-direction: column; align-items: flex-start; gap: 4px; font-size: .8rem; }
  .flow-m .icon { width: 15px; height: 15px; }
  .flow-v { margin-left: 0; font-size: .95rem; }
  .flow-cell .flow-bar { width: 100%; flex: none; }
  .flow-score.s5 { grid-row: 6; grid-column: 2 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; margin: 0 16px 0 8px; padding: 14px 0; }
  .flow-rug { grid-column: 1 / -1; margin: 0 0 4px; }
  .flow-score-num { grid-row: 2 / 4; margin: 0; font-size: 3rem; }
  .flow-rank { margin: 0; }
}

/* ---------------------------------------------------------------- home: fan chart */
.card-fan { margin-top: 44px; padding: clamp(16px, 3vw, 32px); }
.fan { margin: 0; }
.fan-frame { position: relative; }
/* Two first paints at their own pixel sizes; site.js swaps in one drawn to the plot's width. */
.fan-compact { display: none; }
@media (max-width: 619px) { .fan-wide { display: none; } .fan-compact { display: block; } }
.fan-plot .fc-svg { width: 100%; }
.fan-plot.is-line { cursor: pointer; }
.grid { stroke: var(--hair); stroke-width: 1; fill: none; }
.fan-lines { stroke: var(--active); stroke-opacity: .11; stroke-width: 1; fill: none; }
.fan-top { stroke: var(--ink); stroke-width: 2; fill: none; }
.fan-median { stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 6 5; fill: none; }
.fan-axis { stroke: var(--axis); stroke-width: 1.2; fill: none; }
.fan-hover { stroke: var(--olive); stroke-width: 2.8; fill: none; }
.axis-label { font: 400 13px var(--sans); fill: var(--muted); text-anchor: middle; }
.axis-label-y, .axis-label[text-anchor="end"] { text-anchor: end; }
.axis-label[text-anchor="start"] { text-anchor: start; }
.note-title { font: 500 15px var(--sans); fill: var(--ink); }
.note-text { font: 400 14px var(--sans); fill: var(--ink-2); }
.fan-note-right .note-title, .fan-note-right .note-text { text-anchor: end; }
.leader { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.leader-dot { fill: var(--ink); }
/* The top three named on their own lines: a rank badge at the leader's end, then the name. */
.fan-call { cursor: pointer; }
.call-badge { fill: var(--ink); }
.call-rank { font: 600 11px var(--sans); fill: var(--surface); text-anchor: middle; }
.call-name { font: 500 14px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.fan-call-small .call-rank { font-size: 10px; }
.fan-call-small .call-name { font-size: 13px; }
.fan-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(251, 250, 245, .95); border: 1px solid var(--glass-edge); border-radius: 14px; padding: 9px 14px; font-size: .88rem;
  line-height: 1.35; white-space: nowrap; transform: translate(14px, -50%); }
.fan-tip strong { display: block; font-weight: 500; }
.fan-tip span { font-size: .8rem; color: var(--ink-2); }
.axis-title { font: 500 13px var(--sans); fill: var(--ink-2); }
.fan figcaption { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: .84rem; color: var(--muted); }
.fan figcaption a { color: var(--ink-2); }
.hint-touch { display: none; }
@media (hover: none) { .hint-pointer { display: none; } .hint-touch { display: inline-flex; } }

/* ---------------------------------------------------------------- brand rows */
.brand-list { --brand-cols: minmax(110px, 1.1fr) 100px minmax(0, 3.4fr) 100px; margin-top: 44px; }
.brand-head { display: grid; grid-template-columns: var(--brand-cols); gap: 20px; padding: 0 24px 10px; font-size: .8rem; color: var(--ink-2); }
.brand-scale { display: flex; justify-content: space-between; padding: 0 2px; }
.brand-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--join-gap); }
.brand-rows a { display: grid; grid-template-columns: var(--brand-cols); gap: 20px; align-items: center; padding: 12px 24px; background: var(--surface);
  border-radius: var(--join-corner); text-decoration: none; transition: background-color .15s; }
.brand-rows li:first-child a { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.brand-rows li:last-child a { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.brand-rows a:hover { background: var(--wash); }
.brand-row-name { font-size: 1.04rem; }
.brand-row-count, .brand-row-median { font-size: .84rem; color: var(--muted); }
.brand-row-median { text-align: right; color: var(--ink-2); }
.brand-strip { width: 100%; height: 30px; }
.brand-strip path { vector-effect: non-scaling-stroke; }
.brand-strip .baseline { stroke: var(--axis); stroke-width: 1; }
.brand-strip .graduation { stroke: var(--axis); stroke-width: 1; }
.brand-strip .strip-ticks { stroke: var(--ink-2); stroke-opacity: .55; stroke-width: 1.5; }
.brand-strip .strip-median { fill: var(--olive); }

/* ---------------------------------------------------------------- home: what it takes to be ranked
   The closing painting, full bleed, with the hero's glass frame rising off its lower
   edge. One linked card per measure draws its minimums on scales the three cards
   share. site.js holds the fills at zero until the frame scrolls in, then draws them. */
.section-join { position: relative; isolation: isolate; margin-top: clamp(64px, 8vw, 120px); padding: clamp(120px, 15vw, 210px) var(--gutter) clamp(80px, 10vw, 140px); }
.join-sky { position: absolute; inset: 0 0 auto; height: clamp(520px, 44vw + 180px, 900px); z-index: -1; overflow: hidden; }
.join-painting { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.join-sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--page) 0%, rgba(241, 239, 230, .3) 20%, rgba(241, 239, 230, .1) 42%, rgba(241, 239, 230, .45) 70%, var(--page) 97%); }
.section-join > .display { max-width: 18ch; margin: 0 auto; }
.join-frame { max-width: var(--wrap); margin: clamp(48px, 7vw, 96px) auto 0; padding: 12px; border-radius: calc(var(--card-corner) + 12px); background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
@supports (backdrop-filter: blur(1px)) { .join-frame { backdrop-filter: blur(16px) saturate(1.15); } }
@media (prefers-reduced-transparency: reduce) { .join-frame { background: var(--surface-low); backdrop-filter: none; } }
.join-frame .frame-title::before { background: var(--olive); }
.gate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--join-gap); }
.gate-card { background: var(--surface); border-radius: var(--join-corner); padding: 24px 28px 28px; }
.gate-card:first-child { border-top-left-radius: var(--card-corner); }
.gate-card:last-child { border-top-right-radius: var(--card-corner); }
.gate-name { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; font: 500 1.08rem/1.3 var(--sans); }
.gate-name .icon { width: 20px; height: 20px; color: var(--measure); }
.gate-rules { margin: 0; display: grid; gap: 26px; }
.gate-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.gate-rule dt { font-size: .8rem; color: var(--ink-2); }
.gate-val { margin: 0; font-family: var(--serif); font-size: 2.05rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gate-val small { font: 400 .8rem var(--sans); letter-spacing: 0; color: var(--ink-2); }
.gate-fig { grid-column: 1 / -1; margin: 12px 0 0; }
.gate-fig svg { width: 100%; height: auto; overflow: visible; }
.gate-fig .gate-pips { width: auto; height: 22px; }
.gate-scale { display: flex; justify-content: space-between; margin-top: 3px; font-size: .8rem; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-track, .g-cell { fill: var(--control); }
.g-fill, .g-pip { fill: var(--measure); }
.g-trace { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; }
.g-tick { stroke: var(--axis); stroke-width: 1; }
.g-body { fill: none; stroke: var(--axis); stroke-width: 1.5; }
.g-nub { fill: var(--axis); }
.g-grow, .g-pop { transform-box: fill-box; }
.g-grow { transform-origin: 0 50%; }
.g-pop { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .gate[data-draw] .g-grow { transition: transform 1.2s var(--ease) calc(var(--gd, 0ms) + 260ms); }
  .gate[data-draw] .gate-rule:last-child .g-grow { transition-delay: calc(var(--gd, 0ms) + 480ms); }
  .gate[data-draw] .g-pop { transition: opacity .35s var(--ease) calc(var(--gd, 0ms) + var(--pd, 0ms)), transform .7s var(--ease) calc(var(--gd, 0ms) + var(--pd, 0ms)); }
  .gate[data-draw="wait"] .g-grow { transform: scaleX(0); }
  .gate[data-draw="wait"] .g-pop { opacity: 0; transform: scale(.3); }
  .gate-card:nth-child(2) { --gd: 110ms; }
  .gate-card:nth-child(3) { --gd: 220ms; }
  .g-pop:nth-of-type(2) { --pd: 55ms; } .g-pop:nth-of-type(3) { --pd: 110ms; } .g-pop:nth-of-type(4) { --pd: 165ms; }
  .g-pop:nth-of-type(5) { --pd: 220ms; } .g-pop:nth-of-type(6) { --pd: 275ms; } .g-pop:nth-of-type(n+7) { --pd: 330ms; }
}
.gate-source { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: var(--join-gap) 0 0; padding: 16px 16px 16px 28px;
  background: var(--surface); border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
.gate-source > p { margin: 0; }
.gate-source > p:first-child { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink-2); }
.gate-source .icon { width: 24px; height: 24px; color: var(--olive); }
.gate-source strong { font-weight: 500; color: var(--ink); }
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 820px) {
  .gate { grid-template-columns: 1fr; }
  .gate-card:first-child { border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
  .gate-card:last-child { border-radius: var(--join-corner); }
  .gate-name { margin-bottom: 18px; }
  .gate-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) {
  .section-join { padding-top: 96px; }
  .join-frame { padding: 6px; border-radius: calc(var(--card-corner) + 6px); margin-left: calc(-1 * var(--gutter) + 6px); margin-right: calc(-1 * var(--gutter) + 6px); }
  .gate-card { padding: 20px 22px 24px; }
  .gate-name { margin-bottom: 14px; }
  .gate-rules { grid-template-columns: 1fr; gap: 16px; }
  .gate-rule { grid-template-columns: minmax(0, 1fr) 4.6em; align-items: end; }
  .gate-rule dt { grid-column: 1 / -1; }
  .gate-fig { grid-column: 1; grid-row: 2; margin-top: 6px; }
  .gate-val { grid-column: 2; grid-row: 2; align-self: end; text-align: right; font-size: 1.7rem; }
  .gate-source { padding: 18px 18px 18px 22px; }
  .gate-actions, .gate-actions .button { width: 100%; }
}

/* ---------------------------------------------------------------- app card: QR for the Play listing */
.app-card { position: fixed; z-index: 25; right: 20px; bottom: 20px; display: grid; grid-template-columns: auto 234px; gap: var(--join-gap); padding: 9px; overflow: hidden; isolation: isolate;
  background: var(--page-deep); border: 1px solid var(--glass-edge); border-radius: var(--card-corner);
  visibility: hidden; opacity: 0; transform: translateY(16px) scale(.97); filter: blur(4px);
  transition: opacity .18s ease-in, transform .18s ease-in, filter .18s ease-in, visibility 0s .18s; }
.app-card[data-show] { visibility: visible; opacity: 1; transform: none; filter: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease), filter .5s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .app-card, .app-card[data-show] { transform: none; filter: none; } }
/* Cloud Study with Trees framing two frosted tiles joined like the dashboard's cards:
   the QR on the left, the question and the Play button on the right. */
.app-card-sky { position: absolute; inset: 0; z-index: -1; }
.app-card-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.app-card-qr, .app-card-body { background: rgba(251, 250, 245, .84); border: 1px solid rgba(251, 250, 245, .5); }
@supports (backdrop-filter: blur(1px)) { .app-card-qr, .app-card-body { backdrop-filter: blur(14px) saturate(1.15); } }
@media (prefers-reduced-transparency: reduce) { .app-card-qr, .app-card-body { background: var(--surface); backdrop-filter: none; } }
.app-card-qr { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 9px 9px 7px; color: var(--ink); text-decoration: none;
  border-radius: calc(var(--card-corner) - 9px) var(--join-corner) var(--join-corner) calc(var(--card-corner) - 9px); }
.app-qr { width: 120px; height: 120px; transition: transform .35s var(--ease); }
.app-card-qr:hover .app-qr { transform: scale(1.03); }
.qr-eye { stroke: var(--olive); stroke-width: 1; }
.qr-pupil { fill: var(--olive); }
.app-card-scan { font-size: .72rem; line-height: 1.3; color: var(--ink-2); }
.app-card-body { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px 14px 14px 18px;
  border-radius: var(--join-corner) calc(var(--card-corner) - 9px) calc(var(--card-corner) - 9px) var(--join-corner); }
.app-card-title { margin: 0; padding-right: 26px; font-family: var(--serif); font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.app-card-title em { font-style: italic; }
.app-card-app { margin: 6px 0 0; font-size: .8rem; line-height: 1.3; color: var(--ink-2); }
.app-card-app strong { font-weight: 600; color: var(--ink); }
.app-card-button { width: 100%; min-height: 40px; padding: 0 14px; font-size: .86rem; gap: 6px; white-space: nowrap; }
.app-card-button .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.app-card-button:hover .icon { transform: translateX(3px); }
.app-card-close { position: absolute; top: 15px; right: 15px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.app-card-close:hover { background: var(--control); color: var(--ink); }
.app-card-close:active { background: var(--control-hover); }
.app-card-close .icon { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- Battery Zen (/battery-zen/)
   The featured app, shown by using it: the hero's sky and serif, then a tour in which the
   steps scroll beside a sticky phone holding the app rebuilt in HTML (zen.css), and the
   dusk painting with the full cell to close. zen.js plays one scene per step; without it
   the dashboard stands still and the steps read as a list. On wide screens the hero is
   short enough for the phone to rise into the first view, as the home page's frame does. */
.page-zen main { margin-top: calc(-1 * var(--header)); }
.zen-hero { position: relative; isolation: isolate; padding: calc(var(--header) + clamp(56px, 12vh, 136px)) var(--gutter) clamp(48px, 9vh, 104px); text-align: center; }
@media (min-width: 900px) { .zen-hero { padding-top: calc(var(--header) + clamp(40px, 8vh, 104px)); padding-bottom: clamp(20px, 3vh, 40px); } }
.zen-hero-copy { max-width: 900px; margin: 0 auto; }
.zen-hero .display-hero { margin-bottom: 18px; }
.zen-promise { margin: 0 0 32px; font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); color: #45473d; }
.zen-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin: 0; }
.zen-actions .button .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.zen-actions .button:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .zen-hero-copy > * { animation: rise .9s var(--ease) backwards; }
  .zen-hero-copy > :nth-child(2) { animation-delay: .08s; }
  .zen-hero-copy > :nth-child(3) { animation-delay: .16s; }
}

.zen-tour { --zen-w: 340; position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 7vw, 120px); }
.zen-stage { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header) + 20px); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 14px; padding-bottom: 20px; }
.zen-stage .zen-frame { grid-column: 2; grid-row: 1; }
.zen-frame { padding: 4px; border-radius: calc(var(--zen-w) * 148px / 1084 + 4px); background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
.zen-device { position: relative; width: calc(var(--zen-w) * 1px); height: calc(var(--zen-w) * 2412px / 1084); border-radius: calc(var(--zen-w) * 148px / 1084); overflow: hidden; isolation: isolate; background: #ebe9de; }
.zen-scale { position: absolute; left: 0; top: 0; width: 1084px; height: 2412px; transform-origin: 0 0; transform: scale(calc(var(--zen-w) / 1084)); transition: opacity .15s ease; }
.zen-scale.is-cut { opacity: 0; }
/* zen.js measures the small viewport here to size the phone. */
.zen-svh { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
/* The rail: one button per screen, its bar filling as the scene plays, then Play again. */
.zen-rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
.zen-rail button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 11px; background: none; color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s; }
.zen-rail button:hover { background: var(--control); color: var(--ink); }
.zen-rail button[aria-current] { background: var(--surface); color: var(--olive); }
.zen-rail .icon { width: 18px; height: 18px; margin-top: -3px; }
.zen-rail-bar { position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
.zen-rail-bar > span { display: block; height: 100%; background: var(--olive); transform-origin: 0 50%; transform: scaleX(0); }
.zen-rail .zen-replay { margin-top: 4px; }
.zen-rail .zen-replay .icon { margin-top: 0; }
.zen-rail .zen-replay::before { content: ""; position: absolute; top: -5px; left: 10px; right: 10px; border-top: 1px solid var(--hair); }
.zen-tour:not(.is-live) .zen-rail { display: none; }
.zen-caption { display: none; }
.zen-steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0 0 18vh; }
.zen-step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 48px 0; }
/* Tall enough that, centred, it holds the phone where it sticks. */
.zen-step:first-child { min-height: max(64vh, calc(100vh - 2 * var(--header) - 40px)); }
.zen-step-title { max-width: 11ch; font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.4rem); transition: opacity .5s var(--ease); }
.zen-tour.is-live .zen-step:not([data-active]) .zen-step-title { opacity: .28; }
.zen-key { display: flex; align-items: flex-start; gap: 10px; max-width: 30em; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.zen-key .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--olive); }
.zen-key a { color: var(--ink); }
/* Keys: the screen's parts as linked tiles, lit while the phone shows them (zen.js). */
.zen-fig { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--join-gap); max-width: 36rem; margin: 0; padding: 0; list-style: none; transition: opacity .5s var(--ease); }
.zen-tile { position: relative; display: grid; align-content: space-between; gap: 18px; min-height: 96px; padding: 16px 16px 14px; border: 0; border-radius: var(--join-corner); background: var(--surface);
  color: var(--ink-2); font: 400 .86rem/1.3 var(--sans); text-align: left; transition: background-color .35s var(--ease), color .35s var(--ease); }
.zen-tile:first-child { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.zen-tile:last-child { border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.zen-tile .icon { width: 22px; height: 22px; color: var(--measure); transition: color .35s var(--ease); }
.zen-tile .icon + span + .icon { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; color: var(--olive); opacity: 0; transition: opacity .25s; }
.zen-tile[data-on], .zen-tile[aria-pressed="true"] { background: var(--selected); color: var(--ink); }
.zen-tile[data-on] > .icon:first-child, .zen-tile[aria-pressed="true"] > .icon:first-child { color: var(--olive); }
.zen-tile.m-active[aria-pressed="true"] > .icon:first-child, .zen-tile.m-standby[aria-pressed="true"] > .icon:first-child, .zen-tile.m-charging[aria-pressed="true"] > .icon:first-child { color: var(--measure); }
.zen-tile[data-done] .icon + span + .icon { opacity: 1; }
button.zen-tile:not(:disabled) { cursor: pointer; }
button.zen-tile:not(:disabled):hover { background: var(--control); color: var(--ink); }
button.zen-tile[aria-pressed="true"]:hover { background: var(--selected); }
button.zen-tile:focus-visible { outline-offset: -2px; position: relative; z-index: 1; }
.zen-tour.is-live .zen-step:not([data-active]) :is(.zen-fig, .zen-models) { opacity: .45; }
.zen-tour.is-live .zen-step:not([data-active]) :is(.zen-fig, .zen-models):is(:hover, :focus-within) { opacity: 1; }
/* The ranking step's two models: linked cards with rank, name, serif score and index bar. */
.zen-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--join-gap); max-width: 36rem; margin: 10px 0 0; padding: 0; list-style: none; transition: opacity .5s var(--ease); }
.zen-models a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rank score" "name score" "bar bar"; gap: 2px 12px; height: 100%; box-sizing: border-box;
  padding: 18px 20px 20px; border-radius: var(--join-corner); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.zen-models li:first-child a { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.zen-models li:last-child a { border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.zen-models a:hover { background: var(--wash); }
.zen-models a:focus-visible { outline-offset: -2px; }
.zen-model-rank { grid-area: rank; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.zen-model-name { grid-area: name; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.zen-model-score { grid-area: score; align-self: center; font: 400 2.4rem/1 var(--serif); letter-spacing: -.02em; }
.zen-models .bar { grid-area: bar; margin-top: 14px; }
.zen-device.is-pointing { cursor: pointer; }

.zen-close { position: relative; isolation: isolate; display: grid; justify-items: center; gap: clamp(24px, 4vw, 36px); margin-top: clamp(24px, 4vw, 64px);
  padding: clamp(110px, 13vw, 190px) var(--gutter) clamp(80px, 10vw, 140px); text-align: center; }
.zen-close > .display { max-width: 14ch; }
.zen-big { --zen-big-w: 200; position: relative; width: calc(var(--zen-big-w) * 1px); height: calc(var(--zen-big-w) * 216px / 132); }
.zen-big-scale { position: absolute; left: 0; top: 0; width: 264px; height: 432px; transform-origin: 0 0; transform: scale(calc(var(--zen-big-w) / 264)); }
.zen-big .za-bare { width: 264px; height: 432px; }
.zen-get { display: flex; align-items: center; gap: var(--join-gap); padding: 10px; border-radius: calc(var(--card-corner) + 10px); background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
@supports (backdrop-filter: blur(1px)) { .zen-get, .zen-frame { backdrop-filter: blur(16px) saturate(1.15); } }
@media (prefers-reduced-transparency: reduce) { .zen-get, .zen-frame { background: var(--surface-low); backdrop-filter: none; } }
.zen-qr { display: grid; justify-items: center; gap: 4px; padding: 10px 10px 8px; border-radius: var(--card-corner) var(--join-corner) var(--join-corner) var(--card-corner);
  background: var(--surface); color: var(--ink-2); font-size: .72rem; line-height: 1.3; text-decoration: none; }
.zen-get .zen-actions { align-self: stretch; padding: 0 26px; border-radius: var(--join-corner) var(--card-corner) var(--card-corner) var(--join-corner); background: var(--surface); }
@media (max-width: 1023px), (pointer: coarse) {
  .zen-qr { display: none; }
  .zen-get { padding: 0; border: 0; background: none; backdrop-filter: none; }
  .zen-get .zen-actions { padding: 0; background: none; }
}

/* Phones: the phone stays under the header with the step's heading above it; the steps
   become the scroll that moves the tour, kept for assistive technology. The stage stays
   clear so the hero's sky fades behind the phone, and the dusk painting spans the whole
   close rather than ending under its heading. */
@media (max-width: 899px) {
  .zen-tour { display: block; }
  .zen-stage { grid-template-columns: none; justify-items: center; gap: 10px; padding-bottom: 32px; }
  .zen-stage .zen-frame, .zen-rail { grid-column: auto; grid-row: auto; }
  .zen-rail { flex-direction: row; padding: 4px; }
  .zen-rail button { width: 38px; height: 38px; }
  .zen-rail .zen-replay { margin: 0 0 0 4px; }
  .zen-rail .zen-replay::before { top: 9px; bottom: 9px; left: -5px; right: auto; border-top: 0; border-left: 1px solid var(--hair); }
  .zen-fig { max-width: none; }
  .zen-step { min-height: 0; padding: 28px 0; gap: 12px; }
  .zen-step-title { max-width: none; font-size: clamp(2.1rem, 1.4rem + 3vw, 3rem); }
  .zen-tour.is-live .zen-stage { position: sticky; top: var(--header); z-index: 2; height: calc(100svh - var(--header)); align-content: start; padding: 4px 0 0; }
  .zen-tour.is-live .zen-caption { display: flex; align-items: flex-end; justify-content: center; min-height: 2.08em; margin: 0; font-size: clamp(1.8rem, 1.2rem + 3vw, 2.5rem); line-height: 1.02; }
  .zen-tour.is-live .zen-steps { position: relative; z-index: 1; margin-top: calc(var(--header) - 100svh); }
  .zen-tour.is-live .zen-step { min-height: 64svh; padding: 0; }
  .zen-tour.is-live .zen-step > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zen-tour.is-live .zen-step > :is(.zen-fig, .zen-models) { display: none; }
  .zen-close .join-sky { bottom: 0; height: auto; }
}
@media (max-width: 560px) { .zen-fig { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zen-tile, .zen-tile:first-child, .zen-tile:last-child { border-radius: var(--join-corner); }
  .zen-tile:first-child { border-top-left-radius: var(--card-corner); } .zen-tile:nth-child(2) { border-top-right-radius: var(--card-corner); }
  .zen-tile:nth-last-child(2):nth-child(odd) { border-bottom-left-radius: var(--card-corner); } .zen-tile:last-child { border-bottom-right-radius: var(--card-corner); }
  .zen-tile:last-child:nth-child(odd) { grid-column: span 2; border-bottom-left-radius: var(--card-corner); } }

/* ---------------------------------------------------------------- inner pages */
.sheet { max-width: var(--wrap); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(64px, 8vw, 110px); }
.sheet-narrow { max-width: calc(820px + 2 * var(--gutter)); }
.list-head, .read-head { margin-bottom: clamp(32px, 4vw, 48px); }
.list-head .display, .read-head .display { font-size: clamp(2.7rem, 1.6rem + 3.2vw, 4.4rem); margin-bottom: 18px; }
.list-head .lead, .read-head .lead { max-width: 42em; }
.updated { font-size: .86rem; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; }
.crumbs a { display: inline-block; text-decoration: none; padding: 5px 12px; border-radius: 999px; background: var(--control); color: var(--ink); }
.crumbs a:hover { background: var(--control-hover); }
.crumbs span { display: inline-block; padding: 5px 4px; color: var(--muted); }
.notice { background: var(--surface); border-radius: 22px; padding: 16px 20px; margin: 0 0 28px; }
.notice p { margin: 0; }

/* Rankings */
.ranking-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.ranking-controls .search { flex: 1 1 380px; max-width: 560px; }
/* Order menu, as the dashboard draws it: a pill opens a glass listbox 4px below, scaled from its corner */
.sort-control { display: flex; align-items: center; gap: 6px; }
.sort-toggle { display: inline-flex; align-items: center; height: 44px; padding: 0 12px 0 18px; border: 0; border-radius: 999px; background: var(--control); color: var(--ink);
  font: 400 .92rem var(--sans); cursor: pointer; transition: background-color .15s; }
.sort-prefix { color: var(--ink-2); white-space: pre; }
#sort-label { font-weight: 500; white-space: nowrap; }
.sort-toggle .chevron { width: 14px; height: 14px; margin-left: 6px; color: var(--ink-2); transition: transform .15s; }
.sort-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.sort-toggle:hover, .sort-toggle[aria-expanded="true"] { background: var(--control-hover); }
.sort-direction { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--control); color: var(--ink-2); cursor: pointer; transition: background-color .15s; }
.sort-direction:hover { background: var(--control-hover); color: var(--ink); }
.sort-direction[aria-pressed="true"] { background: var(--selected); color: var(--ink); }
.sort-direction .icon { width: 17px; height: 17px; }
.sort-layer { position: fixed; z-index: 45; inset: 0; }
.sort-scrim { position: absolute; inset: 0; touch-action: none; }
.sort-popup { position: absolute; width: max-content; transform-origin: var(--anchor-x, 0%) var(--anchor-y, 0%);
  animation: menu-scale-in 130ms cubic-bezier(.4, 0, .2, 1) both, menu-fade-in 110ms cubic-bezier(.4, 0, .2, 1) both; }
.sort-popup[data-phase="closing"] { animation: menu-scale-out 80ms cubic-bezier(.4, 0, .2, 1) both, menu-fade-out 80ms cubic-bezier(.4, 0, .2, 1) both; }
.sort-menu { min-width: min(200px, var(--menu-max-width, 200px)); max-width: min(280px, var(--menu-max-width, 280px)); overflow: hidden;
  background: var(--surface); border: 1px solid var(--glass-edge); border-radius: 16px; font: 400 .95rem/1.3 var(--sans); }
@supports (backdrop-filter: blur(1px)) { .sort-menu { backdrop-filter: blur(24px) saturate(1.2); background: rgba(251, 250, 245, .97); } }
@media (prefers-reduced-transparency: reduce) { .sort-menu { background: var(--surface); backdrop-filter: none; } }
.sort-items { max-height: var(--menu-max-height, calc(100dvh - 24px)); padding: 4px; overflow-y: auto; overscroll-behavior: contain; }
.sort-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.sort-menu button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-menu button > .icon { width: 18px; height: 18px; color: var(--ink-2); }
.sort-menu [data-sort="active"] > .icon:first-child { color: var(--active); }
.sort-menu [data-sort="standby"] > .icon:first-child { color: var(--standby); }
.sort-menu [data-sort="charging"] > .icon:first-child { color: var(--charging); }
.sort-menu button > .check { width: 16px; height: 16px; margin-left: auto; padding-left: 4px; box-sizing: content-box; color: var(--olive); visibility: hidden; }
.sort-menu button[aria-selected="true"] { color: var(--olive); font-weight: 500; }
.sort-menu button[aria-selected="true"] .check { visibility: visible; }
.sort-menu button:is(:hover, :focus-visible) { background: var(--wash); }
.sort-menu button:active { background: var(--selected); }
.sort-menu button:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }
@keyframes menu-scale-in { from { transform: var(--menu-enter-transform, scale(.85)); } to { transform: scale(1); } }
@keyframes menu-fade-in { from { opacity: var(--menu-enter-opacity, 0); } to { opacity: 1; } }
@keyframes menu-scale-out { from { transform: var(--menu-exit-transform, scale(1)); } to { transform: scale(.9); } }
@keyframes menu-fade-out { from { opacity: var(--menu-exit-opacity, 1); } to { opacity: 0; } }
.rank-head .is-sort { color: var(--ink); font-weight: 500; }
.results-status { min-height: 1.4em; font-size: .9rem; color: var(--ink-2); margin: 0 0 12px; }
.results-status:empty { margin: 0; min-height: 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; }
.pager-status { margin: 0; font-size: .84rem; color: var(--ink-2); }
.pager ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; font-size: .9rem; text-decoration: none;
  background: var(--control); font-variant-numeric: tabular-nums; }
.pager a:hover { background: var(--control-hover); }
.pager span[aria-current] { background: var(--olive); color: var(--on-olive); }
.more-row { margin-top: 16px; }

/* Phone */
.phone-head { margin-bottom: 32px; }
.phone-head .display { font-size: clamp(2.7rem, 1.5rem + 3.6vw, 4.8rem); margin-bottom: 14px; }
.phone-sub { display: flex; flex-wrap: wrap; color: var(--ink-2); margin: 0; }
.phone-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.phone-body > .cards { max-width: none; }
/* The evidence and battery cards sit beside the score as one linked stack; below
   1000px they join the bottom of the measure stack as two more linked cards. */
.phone-side { position: sticky; top: calc(var(--header) + 16px); display: grid; gap: var(--join-gap); }
@media (max-height: 959px) { .phone-side { position: static; } }
.evidence-card, .battery-card { background: var(--surface); padding: 24px 28px 28px; }
.evidence-card { border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
.battery-card { border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
.cap-value { margin: 0 0 12px; font-size: 1rem; color: var(--ink-2); }
.cap-value .num { font-family: var(--serif); font-size: 2.9rem; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.cap-unknown { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--muted); }
.ruler-capacity { --measure: var(--ink-2); }
.battery-card .keys { margin-top: 6px; gap: 4px 14px; font-size: .76rem; }
/* Five capacity labels crowd the 340px card; 0, 6,000 and 12,000+ stay. */
.battery-card .rule-axis-5 span:nth-child(even) { display: none; }
.battery-card .evidence { margin-top: 10px; }
.side-sub { margin: 14px 0 2px; padding-top: 14px; border-top: 1px solid var(--hair); font: 500 .9rem/1.3 var(--sans); }
.draws { margin: 0; display: grid; }
.draws div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 12px; padding: 7px 0; }
.draws dt { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.draws dt .icon { width: 16px; height: 16px; color: var(--measure); align-self: center; }
.draws dd { margin: 0; text-align: right; color: var(--ink-2); font-size: .9rem; }
.draws .est-approx { font-size: 1.1rem; margin-right: 3px; }
.draws .num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); font-size: 1rem; }
.draws small { display: block; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The three percentiles under the score, as in a ranking row. */
.score-parts { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.score-parts li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "i l n" "b b b"; align-items: center; gap: 6px 8px; }
.score-parts .icon { grid-area: i; width: 16px; height: 16px; color: var(--measure); }
.score-parts .part-label { grid-area: l; font-size: .86rem; color: var(--ink-2); }
.score-parts .num { grid-area: n; font-variant-numeric: tabular-nums; font-weight: 500; }
.score-parts .bar { grid-area: b; height: 6px; }
.score-card .keys { margin-top: 10px; }
@media (max-width: 520px) { .score-parts { grid-template-columns: 1fr; gap: 10px; } .score-parts li { grid-template-columns: 16px 88px minmax(0, 1fr) 40px; grid-template-areas: "i l b n"; } .score-parts .num { text-align: right; } }
.side-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 1.08rem/1.3 var(--sans); }
.side-title .icon { width: 20px; height: 20px; color: var(--ink-2); }
.evidence { margin: 0; display: grid; }
.evidence div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.evidence div:last-child { border-bottom: 0; }
.evidence dt { font-size: .84rem; color: var(--ink-2); }
.evidence dd { margin: 0; text-align: right; }
.evidence .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.phone-actions { margin: 18px 0 0; }
.phone-actions .button { width: 100%; }
.phone-actions .icon { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.phone-actions .button:hover .icon { transform: translateX(3px); }
@media (max-width: 999px) {
  .phone-body { grid-template-columns: 1fr; gap: var(--join-gap); }
  .phone-side { position: static; }
  .phone-body > .cards > .card:last-child { border-bottom-left-radius: var(--join-corner); border-bottom-right-radius: var(--join-corner); }
  .evidence-card { border-radius: var(--join-corner); }
}
.phone-sub strong { font-weight: 500; color: var(--ink); }
.code { font-size: .88em; background: var(--control); padding: 1px 7px; border-radius: 6px; }
.cards { display: grid; gap: var(--join-gap); }
.sheet-phone > .cards { max-width: 760px; }
.cards > .card { border-radius: var(--join-corner); padding: 24px 28px; }
.cards > .card:first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.cards > .card:last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.score-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.score-num { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.score-num .num { font-family: var(--serif); font-size: clamp(4rem, 3rem + 3vw, 5.6rem); line-height: .9; letter-spacing: -.02em; }
.score-of { font-size: .95rem; color: var(--ink-2); }
.score-rank { margin: 0; color: var(--ink-2); }
.score-rank .num { font-size: 1.25rem; font-weight: 400; color: var(--ink); }
.score-rule { display: block; width: 100%; height: auto; margin: 14px 0 2px; overflow: visible; }
.score-rule .baseline { stroke: var(--control); stroke-width: 6; stroke-linecap: round; }
.score-rule .score-fill { stroke: var(--ink-2); stroke-width: 6; stroke-linecap: round; }
.score-rule .scale-dot { fill: var(--axis); }
.score-rule .tick { stroke: none; }
.marker { stroke: var(--ink); stroke-width: 2; }
.marker-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 3; }
.marker-label { font: 500 14px var(--sans); fill: var(--ink); }
.measure h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 32px; font: 500 1.08rem/1.3 var(--sans); }
.measure-icon { width: 22px; height: 22px; margin-left: -32px; color: var(--measure); }
.weight { font-size: .82rem; font-weight: 400; color: var(--measure); }
.measure-context { margin: 2px 0 14px 32px; font-size: .82rem; color: var(--muted); }
.measure-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; color: var(--ink-2); }
.est-approx { font-family: var(--serif); font-size: 2rem; color: var(--muted); }
.est-value { font-family: var(--serif); font-size: clamp(2.3rem, 1.9rem + 1.2vw, 2.9rem); line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.ruler { display: block; width: 100%; height: auto; overflow: visible; }
.ruler .crowd { fill: var(--measure); fill-opacity: .16; stroke: var(--measure); stroke-opacity: .35; stroke-width: 1; }
.ruler .median { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.ruler .baseline { stroke: var(--axis); stroke-width: 1.2; }
.ruler .tick { stroke: var(--axis); stroke-width: 1; }
.ruler .unknown { fill: url(#hatch); stroke: var(--axis); stroke-dasharray: 4 3; }
.ruler .marker-off { font: 500 12px var(--sans); fill: var(--ink); text-anchor: end; }
/* Tick labels as HTML under a ruler: evenly spaced, ends flush, the same size at any width.
   Side margins match the drawing's inset (10 of 640 for rulers, 14 of 640 for the score). */
.rule-axis { position: relative; height: 1.35em; margin: 4px 1.5625% 0; font-size: .78rem; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.rule-axis-score { margin: 0 2.1875%; }
.rule-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rule-axis span:first-child { left: 0; transform: none; }
.rule-axis span:last-child { left: auto; right: 0; transform: none; }
.rule-axis-5 span:nth-child(2) { left: 25%; } .rule-axis-5 span:nth-child(3) { left: 50%; } .rule-axis-5 span:nth-child(4) { left: 75%; }
.rule-axis-7 span:nth-child(2) { left: 16.667%; } .rule-axis-7 span:nth-child(3) { left: 33.333%; } .rule-axis-7 span:nth-child(4) { left: 50%; }
.rule-axis-7 span:nth-child(5) { left: 66.667%; } .rule-axis-7 span:nth-child(6) { left: 83.333%; }
.measure .keys { margin-top: 6px; }
.measure-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); }
.measure-facts dt { font-size: .78rem; color: var(--muted); }
.measure-facts dd { margin: 2px 0 0; font-size: .95rem; color: var(--ink-2); }
.measure-facts .num { color: var(--ink); font-size: 1.05rem; }
.nearby { margin-top: clamp(56px, 7vw, 88px); }
.nearby > .display { margin-bottom: 24px; }

/* Ranking board: the list beside a sticky model panel, or the panel under its row */
.peek-slot { display: none; }
@media (min-width: 1180px) {
  .ranking-board.has-peek { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  .has-peek .peek-slot { display: block; position: sticky; top: calc(var(--header) + 12px); max-height: calc(100vh - var(--header) - 24px); overflow: auto; scrollbar-width: thin; }
  .has-peek .rank-list { --cols: 36px minmax(140px, 1.5fr) minmax(96px, 1fr) repeat(3, minmax(96px, 1fr)); }
  .has-peek .rank-head, .has-peek .row-link { gap: 12px; }
  .has-peek .rank-head { padding: 0 16px 10px; }
  .has-peek .row-link { padding: 8px 16px; }
}
.row.is-open .row-link { background: var(--selected); }
.peek { display: grid; gap: var(--join-gap); }
.peek:focus { outline: none; }
.peek-card { background: var(--surface); border-radius: var(--join-corner); padding: 18px 22px; }
.peek > :first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.peek > :last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.peek-head { display: flex; align-items: flex-start; gap: 10px; }
.peek-titles { flex: 1; min-width: 0; }
.peek-brand { margin: 0; font-size: .78rem; color: var(--muted); }
.peek-name { font: 500 1.08rem/1.3 var(--sans); overflow-wrap: anywhere; }
.peek-close { display: none; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; margin: -4px -8px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--control); color: var(--ink-2); cursor: pointer; }
.peek-close:hover { background: var(--control-hover); color: var(--ink); }
.peek-close .icon { width: 16px; height: 16px; }
[data-peek-live] .peek-close, .peek-host .peek-close { display: inline-flex; }
.peek-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 10px; }
.peek-num { font-family: var(--serif); font-size: 3.4rem; line-height: .9; letter-spacing: -.02em; }
.peek-of { font-size: .9rem; color: var(--ink-2); }
.peek-rank { margin-left: auto; font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-rank strong { font-weight: 500; color: var(--ink); }
.peek .bar { height: 6px; }
.peek-m-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 500; }
.peek-m-head .icon { width: 18px; height: 18px; color: var(--measure); }
.peek-m-head .weight { margin-left: auto; font-size: .76rem; }
.peek-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 6px 0 8px; }
.peek-est .est-approx { font-size: 1.4rem; }
.peek-val { font-family: var(--serif); font-size: 2rem; line-height: 1.05; letter-spacing: -.01em; }
.peek-val.peek-none { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); }
.peek-words { font-size: .82rem; color: var(--muted); }
.peek-pct { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0; font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-pct strong { font-weight: 500; color: var(--ink); }
.peek-facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-facts span { display: inline-flex; align-items: center; gap: 6px; }
.peek-facts .icon { width: 16px; height: 16px; }
.peek-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }
.peek-actions .button { min-height: 44px; padding: 0 18px; }
.peek-actions .icon { width: 16px; height: 16px; }
.rows > .peek-host { list-style: none; }
.peek-host .peek-card { background: var(--surface-low); }
.peek-host .peek > :first-child { border-top-left-radius: var(--join-corner); border-top-right-radius: var(--join-corner); }
.peek-host:not(:last-child) .peek > :last-child { border-bottom-left-radius: var(--join-corner); border-bottom-right-radius: var(--join-corner); }
.row:has(+ .peek-host:last-child) .row-link { border-bottom-left-radius: var(--join-corner); border-bottom-right-radius: var(--join-corner); }

/* Brands */
.all-brands { margin-top: clamp(48px, 6vw, 72px); }
.all-brands h2 { font-family: var(--serif); font-size: 2rem; margin-bottom: 18px; }
.maker-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--join-gap); }
.maker-grid li { background: var(--surface); padding: 12px 18px; border-radius: 14px; }
.maker-grid a { text-decoration: none; }
.maker-grid a:hover { text-decoration: underline; text-decoration-color: var(--olive); }
.maker-grid .sub { display: block; font-size: .78rem; color: var(--muted); }
/* Brands chart: lanes of model dots; the picker reuses the topic pills. */
.bchart-controls { display: grid; gap: 14px; margin-bottom: 20px; }
.bchart-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.bchart-measures, .bchart-brands { border: 0; margin: 0; padding: 0; min-width: 0; }
.bchart-measures { display: flex; flex-wrap: wrap; gap: 6px; }
.bchart-measures .topic span { gap: 8px; }
.bchart-measures .icon { width: 17px; height: 17px; color: var(--measure); }
.bchart-measures input:checked + span .icon { color: currentColor; }
.bchart-actions { display: flex; gap: 4px; margin: 0; }
.bchart-actions button { height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: 400 .9rem var(--sans); color: var(--ink-2); cursor: pointer; }
.bchart-actions button:hover { background: var(--control); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip span { display: inline-flex; align-items: baseline; gap: 7px; min-height: 34px; padding: 6px 13px; border-radius: 999px; background: var(--control); font-size: .88rem; line-height: 1.4; transition: background-color .15s; }
.chip small { font-size: .74rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip input:checked + span small { color: inherit; }
.chips-more { margin-top: 8px; }
.chips-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px; border-radius: 999px; font-size: .88rem; color: var(--ink-2); cursor: pointer; list-style: none; }
.chips-more summary::-webkit-details-marker { display: none; }
.chips-more summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.chips-more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.chips-more summary:hover { background: var(--control); color: var(--ink); }
.chips-more .chips { margin-top: 8px; }
.bchart { margin: 0; padding: 22px 26px 18px; background: var(--surface); border-radius: var(--card-corner); }
.bchart-frame { position: relative; }
.bchart-svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.bchart-svg:focus-visible { outline-offset: 8px; }
.bc-dot { fill: var(--measure); stroke: var(--surface); stroke-width: 1.5; }
.bc-median { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.bc-all { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.bc-rule { stroke: var(--hair); stroke-width: 1; fill: none; }
.bc-brand { text-decoration: none; }
.bc-brand:hover .bc-name { text-decoration: underline; text-decoration-color: var(--olive); }
.bc-name { font: 400 15px var(--sans); fill: var(--ink); }
.bc-count { font: 400 12px var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.bc-med { font: 400 13px var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.bc-hover { fill: none; stroke: var(--olive); stroke-width: 2.5; pointer-events: none; }
.bchart-plot.is-dot { cursor: pointer; }
.bchart-empty { margin: 0; padding: 40px 0; text-align: center; color: var(--muted); }
.bchart .keys { margin-top: 12px; }
.key-model::before, .key-brand-median::before, .key-all-median::before { content: ""; flex: none; }
.key-model::before { width: 9px; height: 9px; border-radius: 50%; background: var(--measure); }
.key-brand-median::before { width: 2.5px; height: 14px; border-radius: 2px; background: var(--ink); }
.key-all-median::before { height: 13px; border-left: 1.5px dashed var(--ink-2); }
@media (max-width: 640px) { .bchart { padding: 16px 14px 14px; border-radius: 22px; } }
.brand-figure { margin: 0 0 24px; padding: 18px 24px 16px; background: var(--surface); border-radius: var(--card-corner); }
.brand-figure .brand-strip { height: auto; }
.brand-figure .brand-scale { margin-bottom: 2px; font-size: .8rem; color: var(--ink-2); }
.brand-figure .keys { margin-top: 8px; justify-content: flex-start; }

/* Compare */
.compare-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--join-gap); }
.compare-slot { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; background: var(--surface); border-radius: var(--join-corner); }
.compare-slot:first-child { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.compare-slot:last-child { border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.compare-slot .search { flex: 1; min-width: 0; }
.compare-slot .search input { height: 44px; padding-left: 16px; background: var(--surface-low); }
.slot-letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--control); font-size: .85rem; font-weight: 600; flex: none; }
.compare-slot[data-filled] .slot-letter { background: var(--ink); color: var(--surface); }
.compare-chosen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; min-height: 44px; }
.compare-chosen a { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.compare-chosen a:hover { text-decoration: underline; }
.compare-clear { margin-left: auto; flex: none; border: 0; border-radius: 999px; height: 34px; padding: 0 14px; background: var(--control); font: 400 .85rem var(--sans); color: var(--ink); cursor: pointer; }
.compare-clear:hover { background: var(--control-hover); }
/* "Compare" from one phone asks for the second before opening the compare page. */
.pick-dialog { width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: clamp(16px, 12vh, 140px) auto auto; padding: 20px 20px 22px;
  border: 0; border-radius: var(--card-corner); background: var(--page); color: var(--ink); }
.pick-dialog::backdrop { background: rgba(35, 37, 31, .34); }
.pick-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px 6px; }
.pick-title { flex: 1; min-width: 0; margin: 2px 0 0; font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.1 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.pick-title em { font-style: italic; }
.pick-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--control); color: var(--ink-2); cursor: pointer; }
.pick-close:hover { background: var(--control-hover); color: var(--ink); }
.pick-close .icon { width: 16px; height: 16px; }
.pick-dialog .search { flex-wrap: wrap; align-items: flex-start; }
.pick-dialog .search-icon { top: 17px; }
.pick-dialog .search-clear { top: 10px; }
.pick-dialog .search-list { position: static; flex-basis: 100%; margin-top: 8px; max-height: min(360px, 48dvh); }
/* The compare page is the phone page's layout with one lettered value per phone: a glass
   head naming the phones, then the linked score and measure cards beside the Evidence and
   Battery stack. Every value carries its letter, as the rulers' markers do. */
.compare-out { margin-top: 24px; display: grid; gap: var(--join-gap); --label: 24%; }
.compare-body .cards > .card:first-child, .compare-body .evidence-card { border-top-left-radius: var(--join-corner); border-top-right-radius: var(--join-corner); }
.compare-body .phone-side.is-static { position: static; }
/* Sticks flush under the 60px nav bar (12px from the top), so no row shows between the two. */
.compare-head { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 12px 28px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
@media (prefers-reduced-transparency: reduce) { .compare-head { background: var(--surface); } }
.ch-item { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--ink); }
.ch-item .cmp-letter { width: 24px; height: 24px; margin: 0; font-size: .78rem; }
.ch-name { min-width: 0; font-size: .95rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ch-name small { display: block; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-item:hover .ch-name { text-decoration: underline; }
.measure-swatch { display: inline-block; width: 18px; height: 5px; border-radius: 999px; background: var(--measure); }
.cmp-letter { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--ink); color: var(--surface);
  font: 600 .72rem/1 var(--sans); letter-spacing: 0; align-self: center; }
.cmp-best { align-self: center; margin-left: 4px; padding: 2px 9px; border-radius: 999px; background: var(--selected); font: 400 .72rem/1.5 var(--sans); color: var(--ink); white-space: nowrap; }
.cmp-cols { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 14px 28px; }
.cmp-col { min-width: 0; }
/* Score card: the serif scores side by side, then the shared track, then each measure's
   percentiles as one bar per phone. */
.cmp-scores .score-num { align-items: center; gap: 0; }
.cmp-scores .score-num .num { font-size: clamp(3rem, 2.3rem + 2vw, 4.4rem); }
.cmp-scores .score-rank { margin: 12px 0 0; }
.cmp-brand { margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.compare-ruler { padding-top: 10px; }
.cmp-marker { stroke: var(--ink); stroke-width: 2; }
.cmp-label circle { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.cmp-label text { font: 600 11px var(--sans); fill: var(--surface); text-anchor: middle; }
.cmp-parts li { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.cmp-part-head { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.cmp-parts .icon { grid-area: auto; width: 16px; height: 16px; color: var(--measure); }
.cmp-part { display: grid; grid-template-columns: auto minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.cmp-part .cmp-letter, .cmp-facts .cmp-letter, .cmp-draw .cmp-letter { width: 18px; height: 18px; margin: 0; font-size: .64rem; }
.cmp-parts .bar { grid-area: auto; height: 6px; }
.cmp-parts .num { grid-area: auto; text-align: right; }
/* Measure cards: one serif estimate per phone, the words once under them. */
.cmp-ests .measure-est { align-items: center; gap: 4px 6px; margin: 0; }
.cmp-ests .cmp-letter { margin-right: 6px; }
.cmp-ests .est-approx { font-size: 1.6rem; }
.cmp-ests .est-value { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); white-space: nowrap; }
.compare-out[data-cols="3"] .cmp-ests .est-value { font-size: clamp(1.6rem, 1.25rem + .8vw, 2.1rem); }
.cmp-ests .est-words { font-size: .9rem; }
.cmp-words { margin: 8px 0 0; font-size: .86rem; color: var(--ink-2); }
.key-letter::before { content: "A"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 600 .58rem/1 var(--sans); }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp-table tr > :first-child { width: var(--label); }
.cmp-facts { margin-top: 16px; border-top: 1px solid var(--hair); font-size: .95rem; }
.cmp-facts thead th { padding: 12px 16px 2px 0; text-align: left; font-weight: 400; }
.cmp-facts th, .cmp-facts td { padding: 5px 16px 5px 0; text-align: left; vertical-align: baseline; }
.cmp-facts tbody th { font-weight: 400; font-size: .78rem; color: var(--muted); }
.cmp-facts td { color: var(--ink-2); }
.cmp-facts .num { color: var(--ink); font-size: 1.05rem; }
/* Side stack: who each letter is, then capacities and currents per phone. */
.cmp-evidence div { align-items: center; }
.cmp-evidence dt { display: flex; align-items: center; min-width: 0; }
.cmp-who { display: grid; min-width: 0; line-height: 1.3; }
.cmp-who a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--ink); font-size: .92rem; }
.cmp-who small a { font-size: .76rem; color: var(--muted); }
.cmp-who a:hover { text-decoration: underline; }
.cmp-evidence dd { white-space: nowrap; color: var(--ink-2); font-size: .9rem; }
.cmp-caps { margin: 0 0 12px; display: grid; }
.cmp-caps div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.cmp-caps dt { display: flex; align-items: baseline; color: var(--ink-2); font-size: .95rem; white-space: nowrap; }
.cap-num { margin-right: 5px; font-family: var(--serif); font-size: 2.3rem; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.cmp-caps .cap-unknown { font-size: 1.8rem; }
.cmp-caps dd { margin: 0; text-align: right; font-size: .8rem; color: var(--muted); }
.cmp-caps dd .num { color: var(--ink); font-weight: 500; font-size: .9rem; }
.cmp-draws > div { align-items: start; padding: 9px 0; }
.cmp-draws > div + div { border-top: 1px solid var(--hair); }
.cmp-draws dt { align-items: flex-start; }
.cmp-draws dt .icon { margin-top: 2px; }
.cmp-draws dd { display: grid; gap: 3px; justify-items: end; }
.cmp-draw { display: inline-flex; align-items: baseline; white-space: nowrap; }
.cmp-draw .cmp-letter { margin-right: 8px; }
.cmp-draw .num { margin-right: 3px; }
.compare-empty { color: var(--muted); margin-top: 24px; }

/* Method and other reading pages */
.read-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.read-index { position: sticky; top: calc(var(--header) + 16px); background: var(--surface); border-radius: 22px; padding: 12px; font-size: .9rem; }
.read-index ol { list-style: none; margin: 0; padding: 0; }
.read-index a { display: block; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-2); line-height: 1.35; }
.read-index a:hover { background: var(--wash); color: var(--ink); }
.read-index a[aria-current="true"] { background: var(--selected); color: var(--ink); }
.read-section { max-width: 820px; padding-bottom: clamp(40px, 5vw, 64px); }
.read-section h2 { display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); letter-spacing: -.015em; line-height: 1.05; margin-bottom: 20px; }
.read-section > p, .prose p, .prose li { max-width: 66ch; }
.read-section > p, .prose p { color: var(--ink-2); }
.read-section strong, .prose strong { color: var(--ink); font-weight: 500; }
.read-figure { margin: 28px 0; padding: clamp(16px, 2.6vw, 28px); background: var(--surface); border-radius: var(--card-corner); }
.read-figure figcaption { margin-top: 12px; font-size: .86rem; color: var(--muted); }
.method-fig { width: 100%; height: auto; overflow: visible; }
.method-fig .grid { stroke: var(--hair); }
.day-line { stroke: var(--measure); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.day-band { fill: var(--measure); }
.fig-note .leader { stroke: var(--measure); }
.fig-note .note-text { fill: var(--measure); font-weight: 500; }
.pool-bar { fill: var(--control); stroke: none; }
.pool-total { fill: var(--active); fill-opacity: .22; }
.pool-label { font: 500 13px var(--sans); fill: var(--ink-2); }
.pool-dim { font: 400 14px var(--sans); fill: var(--ink-2); }
.pool-sum { font: 500 15px var(--sans); fill: var(--ink); }
.pool-wrong { font: italic 400 14px var(--sans); fill: var(--muted); }
.dimension { stroke: var(--axis); stroke-width: 1; fill: none; }
.method-fig .baseline { stroke: var(--axis); stroke-width: 1.2; }
.pct-phone rect { fill: var(--surface-low); stroke: var(--axis); stroke-width: 1.2; }
.pct-phone.is-tied rect { fill: var(--control); }
.pct-phone.is-chosen rect { fill: var(--active); stroke: var(--active); }
.pct-rate { font: 400 13px var(--sans); fill: var(--ink-2); text-anchor: middle; }
.pct-unit { text-anchor: start; fill: var(--muted); }
.plate-back { fill: var(--surface-low); stroke: var(--hair); stroke-width: 1; }
.plate { fill: var(--measure); fill-opacity: .55; }
.measure-defs { margin: 28px 0; display: grid; gap: var(--join-gap); max-width: 820px; }
.measure-defs div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 16px 22px; background: var(--surface); border-radius: var(--join-corner); }
.measure-defs div:first-child { border-top-left-radius: 22px; border-top-right-radius: 22px; }
.measure-defs div:last-child { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
.measure-defs dt { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.measure-defs dd { margin: 0; color: var(--ink-2); }
.table-wrap { width: 100%; overflow-x: auto; }
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0 28px; background: var(--surface); border-radius: 22px; overflow: hidden; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--hair); }
.spec-table tr:last-child > * { border-bottom: 0; }
.spec-table thead th { font-size: .82rem; font-weight: 500; color: var(--measure, var(--muted)); }
.spec-table tbody th { font-weight: 400; color: var(--ink); }
.spec-table td { color: var(--ink-2); }
.limits { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: var(--join-gap); max-width: 820px; }
.limits li { padding: 16px 22px; background: var(--surface); border-radius: var(--join-corner); color: var(--ink-2); max-width: none; }
.limits li:first-child { border-top-left-radius: 22px; border-top-right-radius: 22px; }
.limits li:last-child { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
.faq { display: grid; gap: var(--join-gap); max-width: 980px; }
.faq-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; padding: 26px 28px 14px; background: var(--surface); border-radius: var(--join-corner); }
.faq-item:first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.faq-item:last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.faq-item h2 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; }
.faq-item p { color: var(--ink-2); }
.faq-a > :last-child { margin-bottom: 12px; }
.prose h2 { font-family: var(--serif); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.3rem); letter-spacing: -.01em; line-height: 1.1; margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }

/* Credits: one linked card, a specimen per row */
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--join-gap); }
.credit { display: grid; grid-template-columns: 132px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 24px; align-items: center;
  padding: 14px 24px 14px 14px; background: var(--surface); border-radius: var(--join-corner); }
.credit:first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.credit:last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.credit-art { display: grid; place-items: center; height: 76px; border-radius: 16px; background: var(--surface-low); overflow: hidden; }
.credit:first-child .credit-art { border-top-left-radius: 20px; }
.credit:last-child .credit-art { border-bottom-left-radius: 20px; }
.credit-painting { width: 100%; height: 100%; object-fit: cover; }
.credit-glyph { color: var(--ink); line-height: 1; }
.credit-serif { font: 400 2.6rem var(--serif); letter-spacing: -.02em; }
.credit-sans { font: 500 2.1rem var(--sans); letter-spacing: -.03em; }
.credit-zen-sans { font: 400 2.1rem "Google Sans", var(--sans); letter-spacing: -.02em; }
.credit-zen-title { font: 400 2.1rem "Bricolage Grotesque", var(--sans); letter-spacing: -.02em; }
.credit-icons { display: flex; gap: 8px; font-size: 1.35rem; color: var(--ink-2); }
.credit-work { display: flex; flex-direction: column; min-width: 0; }
.credit-title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; letter-spacing: -.01em; }
.credit-title cite { font-style: italic; }
.credit-by { font-size: .84rem; color: var(--muted); line-height: 1.35; }
.credit-use { font-size: .9rem; color: var(--ink-2); }
.credit-rights { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .9rem; color: var(--ink-2); }
.credit-rights a { display: inline-flex; align-items: center; gap: 6px; color: var(--olive); text-decoration: none; }
.credit-rights a:hover { color: var(--olive-hover); text-decoration: underline; }
.credit-rights .icon { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .credit { grid-template-columns: 96px minmax(0, 1fr); padding: 12px 18px 12px 12px; align-items: start; }
  .credit-art { grid-row: span 3; height: 72px; }
  .credit-use { font-size: .84rem; }
  .credit-icons { gap: 4px; font-size: 1.1rem; }
}

/* Contact: the address is the page's one action. */
.contact-email { margin: 0; background: var(--surface); border-radius: var(--card-corner); padding: clamp(22px, 3.4vw, 36px); font: 400 clamp(1.6rem, 5vw, 2.5rem)/1.15 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.contact-email a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .14em; }
.contact-email a:hover { color: var(--olive); }
.contact-tips { margin-top: 40px; }

/* Pill pickers (brands chart, full charge) */
.topic, .chip { position: relative; }
.topic input, .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.topic span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--control); font-size: .94rem; transition: background-color .15s; }
.topic input:hover + span, .chip input:hover + span { background: var(--control-hover); }
.topic input:checked + span, .chip input:checked + span { background: var(--olive); color: var(--on-olive); }
.topic input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 2px; }
.sheet-missing .search { max-width: 600px; margin-bottom: 24px; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--hair); margin-top: clamp(40px, 6vw, 80px); }
.page-home .site-footer { margin-top: 0; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
.footer-brand p { color: var(--ink-2); max-width: 30ch; margin-top: 14px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.footer-brand p em { font-style: italic; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-nav h2 { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.footer-nav a { display: block; text-decoration: none; padding: 4px 0; color: var(--ink); font-size: .95rem; }
.footer-nav a:hover { color: var(--olive); }
.footer-meta { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 36px; }
.fine { font-size: .78rem; color: var(--muted); text-align: center; text-wrap: balance; margin: 0; padding-top: 18px; border-top: 1px solid var(--hair); }

/* ---------------------------------------------------------------- responsive */
/* Six destinations and the header search share one row from 1170px. */
@media (max-width: 1169px) { .search-header { display: none; } }
@media (max-width: 1080px) {
  .read-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .read-index { position: static; margin-bottom: 36px; }
  .read-index ol { columns: 2; column-gap: 16px; }
}
@media (max-width: 900px) {
  /* One row: the brand and a Menu pill whose glass panel drops under the bar. */
  .nav-bar { position: relative; padding: 0 10px 0 14px; }
  .site-nav { display: none; }
  .nav-menu { display: block; margin-left: auto; }
  .nav-menu summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 16px; border-radius: 10px; background: var(--control); font-size: .95rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu summary .icon { width: 15px; height: 15px; transition: transform .15s; }
  .nav-menu[open] summary .icon { transform: rotate(180deg); }
  .nav-menu-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--glass-edge); border-radius: 16px; }
  .nav-menu-panel a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 1rem; }
  .nav-menu-panel a:hover, .nav-menu-panel a[aria-current="page"] { background: var(--control); }
  .nav-menu-panel .icon { width: 17px; height: 17px; color: var(--ink-2); }
  .brand-name { font-size: 1.45rem; }
  .rank-list { --cols: 28px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .rank-head { gap: 0 12px; padding: 0 16px 8px 10px; font-size: .76rem; }
  .rank-head > :nth-child(-n+3) { display: none; }
  .rank-head .m-active { grid-column: 2; } .rank-head .m-standby { grid-column: 3; } .rank-head .m-charging { grid-column: 4; }
  .rank-head .icon { display: none; }
  .rank-head small { padding-left: 0; font-size: .72rem; }
  .row-link { grid-template-areas: "rank name name score" ". a s c"; grid-template-columns: var(--cols); gap: 6px 12px; padding: 12px 16px 12px 10px; }
  .r-rank { grid-area: rank; align-self: start; padding-top: 14px; }
  .r-name { grid-area: name; }
  .r-score { grid-area: score; grid-template-columns: 1fr; gap: 4px; }
  .r-score .val { order: -1; font-size: 1rem; }
  .r-m { grid-template-columns: 14px minmax(16px, 1fr) auto; gap: 6px; }
  .r-m .icon { display: block; width: 14px; height: 14px; color: var(--measure); }
  .r-m.m-active { grid-area: a; } .r-m.m-standby { grid-area: s; } .r-m.m-charging { grid-area: c; }
  .r-m .val { min-width: 0; font-size: .82rem; }
  .brand-head { display: none; }
  .brand-rows a { grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 18px; }
  .brand-rows .brand-strip { grid-column: 1 / -1; }
  .brand-row-median { grid-column: 2; grid-row: 1; }
  .brand-row-count { grid-row: 2; grid-column: 1; margin-top: -4px; }
  .compare-slots { grid-template-columns: 1fr; }
  .compare-slot:first-child { border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
  .compare-slot:last-child { border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
  .faq-item { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero { padding-top: calc(var(--header) + 36px); }
  .hero-frame { padding: 6px; border-radius: calc(var(--card-corner) + 6px); margin-left: calc(-1 * var(--gutter) + 6px); margin-right: calc(-1 * var(--gutter) + 6px); }
  .hero[data-search] .hero-frame { margin-top: 20px; }
  .frame-bar { padding: 8px 12px 12px; }
  .search .search-go { display: none; }
  .search:has(.search-go) input { padding-right: 18px; }
  .search:has(.search-go) .search-clear { right: 10px; }
  .search:has(.search-go):has(.search-clear:not([hidden])) input { padding-right: 52px; }
  .row-link { gap: 6px 10px; padding: 12px 14px 12px 8px; }
  .rank-head { gap: 0 10px; padding: 0 14px 8px 8px; }
  .r-m { grid-template-columns: 13px minmax(12px, 1fr) auto; gap: 5px; }
  .r-m .icon { width: 13px; height: 13px; }
  .r-m .val { font-size: .78rem; }
  .hero-stats { flex-direction: column; gap: 2px; }
  .hero-stats > span + span::before { display: none; }
  .spec-table th, .spec-table td { padding: 11px 10px; }
  .compare-out { --label: 34%; }
  .compare-head { gap: 8px 12px; padding: 10px 20px; }
  .ch-item { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 4px; }
  .ch-name { font-size: .8rem; }
  .ch-name small { display: none; }
  /* Values stack one phone per line, each still led by its letter. */
  .cmp-cols { grid-template-columns: 1fr; gap: 8px; }
  .cmp-scores .cmp-col { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .cmp-scores .score-rank { margin: 0; }
  .cmp-scores .score-num .num { font-size: 2.8rem; }
  .cmp-facts { font-size: .86rem; }
  .cmp-facts th, .cmp-facts td { padding-right: 8px; }
  .spec-table tr > :first-child { padding-left: 16px; }
  .measure-defs div { grid-template-columns: 1fr; gap: 4px; }
  .read-index ol { columns: 1; }
  .pager { flex-direction: column; align-items: flex-start; }
  .fan-note { display: none; }
  .cards > .card { padding: 20px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  /* Quick chips scroll sideways in one row, so the chart they drive comes up a screen sooner.
     The opened "more brands" list still wraps: the reader asked to see all of them. */
  .bchart-brands > .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .bchart-brands > .chips::-webkit-scrollbar { display: none; }
  .bchart-brands > .chips .chip { flex: none; }
}
@media (max-width: 400px) {
  /* Three measures share 320 to 400px: each value sits beside its icon, its bar runs under both. */
  .r-m { grid-template-columns: 13px minmax(0, 1fr); grid-template-areas: "i v" "b b"; gap: 4px 5px; }
  .r-m .icon { grid-area: i; }
  .r-m .bar { grid-area: b; }
  .r-m .val { grid-area: v; min-width: 0; text-align: left; font-size: .84rem; }
  .r-m .unit { font-size: .85em; }
  /* Seven tick labels crowd a phone-width ruler; every second one stays. */
  .rule-axis-7 span:nth-child(even) { display: none; }
}
/* Touch: the small pills, links and buttons grow to a 40 to 44px target without moving the layout. */
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .crumbs a { padding: 10px 14px; }
  .crumbs span { padding: 10px 4px; }
  .chip span { min-height: 40px; padding: 10px 14px; }
  .chips-more summary { min-height: 40px; }
  .bchart-actions button, .compare-clear { height: 40px; }
  .footer-nav a { padding: 10px 0; }
  .read-index a { padding: 10px 12px; }
  .text-link { padding-block: 10px; margin-block: -10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .site-header, .footer-nav, .search, .ranking-controls, .pager, .hero-sky, .join-sky, .app-card, .zen-rail { display: none; } body { background: #fff; } }

/* ---------------------------------------------------------------- full-charge chart (/full-charge/) */
/* Four group colours, validated together for colour-vision separation and 3:1 on the surface.
   They mark chosen groups only: never measures, buttons or text. */
.page-charge { --g0: #2b5fa8; --g1: #d0702e; --g2: #22a07a; --g3: #7d3470; }
.fc-s0 { --g: var(--g0); }
.fc-s1 { --g: var(--g1); }
.fc-s2 { --g: var(--g2); }
.fc-s3 { --g: var(--g3); }
.fc-controls { display: grid; gap: 14px; margin-bottom: 20px; }
.fc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.fc-spans { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fc-actions button { display: inline-flex; align-items: center; gap: 7px; }
.fc-actions .icon { width: 16px; height: 16px; }
.fc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fc-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fc-chosen:empty { display: none; }
.fc-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 4px 0 14px; border-radius: 999px; background: var(--surface); font-size: .92rem; }
.fc-chip button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.fc-chip button:hover { background: var(--control); color: var(--ink); }
.fc-chip .icon { width: 14px; height: 14px; }
.fc-swatch { display: inline-block; flex: none; width: 16px; height: 4px; border-radius: 2px; background: var(--g); vertical-align: middle; }
.fc-add { flex: 1 1 260px; max-width: 420px; }
.fc-add input { height: 42px; font-size: .94rem; padding: 0 18px 0 44px; }
.fc-add input:disabled { opacity: .6; }
.fc-quick legend { padding: 0; margin-bottom: 6px; font-size: .8rem; color: var(--ink-2); }
.fc-quick .chip input:disabled { cursor: default; }
.fc-quick .chip input:disabled + span { opacity: .45; }
.fc { margin: 0; padding: 22px 26px 18px; background: var(--surface); border-radius: var(--card-corner); }
.fc-frame { position: relative; }
.fc-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.fc-svg:focus-visible { outline-offset: 8px; }
.fc-plot.is-line { cursor: pointer; }
.fan-lines.fc-quiet { stroke: var(--ink); stroke-opacity: .07; }
.fc-g { fill: none; stroke: var(--g); stroke-width: 1.2; }
.fc-g.fc-one { stroke-width: 2.6; }
.fc-halo { fill: none; stroke: var(--surface); stroke-width: 7; stroke-linecap: round; }
.fc-gm { fill: none; stroke: var(--g); stroke-width: 3; stroke-linecap: round; }
.fc-end { fill: var(--g); stroke: var(--surface); stroke-width: 2; }
.fc .fan-tip strong { display: flex; align-items: center; gap: 8px; }
.key-line::before, .key-group::before { content: ""; flex: none; }
.key-line::before { width: 18px; height: 1.5px; background: var(--ink); opacity: .3; }
.key-group::before { width: 18px; height: 3px; border-radius: 2px; background: var(--ink-2); }
.fc-summary { margin-top: 20px; }
.fc-table { width: 100%; border-collapse: separate; border-spacing: 0 var(--join-gap); font-size: .92rem; }
.fc-table thead th { padding: 0 20px 4px; text-align: left; font-weight: 400; font-size: .8rem; color: var(--ink-2); }
.fc-table tbody th, .fc-table td { padding: 14px 20px; background: var(--surface); text-align: left; font-weight: 400; vertical-align: middle; }
.fc-table tbody th { border-radius: var(--join-corner) 0 0 var(--join-corner); }
.fc-table tbody td:last-child { border-radius: 0 var(--join-corner) var(--join-corner) 0; }
.fc-table tbody tr:first-child th { border-top-left-radius: var(--card-corner); }
.fc-table tbody tr:first-child td:last-child { border-top-right-radius: var(--card-corner); }
.fc-table tbody tr:last-child th { border-bottom-left-radius: var(--card-corner); }
.fc-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--card-corner); }
.fc-table .fc-swatch { margin-right: 12px; }
.fc-name { font-weight: 500; }
.fc-kind { display: block; margin-left: 28px; font-size: .78rem; color: var(--muted); }
.fc-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-dim { font-size: .84rem; color: var(--muted); white-space: nowrap; }
/* Full screen keeps the span, the chosen groups and the add field; the plot takes the rest. */
.fc-stage:fullscreen { display: flex; flex-direction: column; padding: clamp(12px, 2vw, 24px) clamp(16px, 3vw, 32px); background: var(--page); overflow: auto; }
.fc-stage::backdrop { background: #f1efe6; }
.fc-stage:fullscreen .fc-quick { display: none; }
.fc-stage:fullscreen .fc-controls { margin-bottom: 12px; }
.fc-stage:fullscreen .fc, .fc-stage:fullscreen .fc-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fc-stage:fullscreen .fc-plot { flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 640px) {
  .fc { padding: 16px 10px 14px; border-radius: 22px; }
  .fc-add { max-width: none; }
  .fc-table thead { display: none; }
  .fc-table, .fc-table tbody, .fc-table tr { display: block; }
  .fc-table tr { margin-bottom: var(--join-gap); }
  .fc-table tbody th, .fc-table td { display: block; border-radius: 0 !important; padding: 10px 16px; }
  .fc-table tbody th { padding-top: 14px; }
  .fc-table td:empty { display: none; }
  .fc-table td::before { content: attr(data-h); display: block; font-size: .74rem; color: var(--muted); }
  .fc-table tbody tr:first-child th { border-radius: 22px 22px 0 0 !important; }
  .fc-table tbody tr:last-child > :last-child { border-radius: 0 0 22px 22px !important; }
}
@media (pointer: coarse) { .fc-chip { min-height: 44px; } .fc-chip button { width: 40px; height: 40px; } }