/* Velo Version — public site theme.
   Loaded after app.css on public pages only (body.is-public), so the admin
   console keeps its own look while the visitor-facing pages get this one.

   Idea: the version number is the content. Structure is drawn with hairlines
   instead of nested cards, version strings are set in a mono face so they
   align down the column, and the single accent marks one thing only: the
   release that is current. */

:root {
  --ink: #141619;
  --ink-2: #45494f;
  --ink-3: #5f646b;
  --hair: #e3e5e8;
  --hair-strong: #c9cdd2;
  --rail: #fafbfb;
  --signal: #0f6b46;
  --signal-soft: #e8f2ed;
  --signal-wash: #f1f8f4;
  --surface: #fff;
  --hover: #f3f5f5;
  --on-ink: #fff;
  --on-ink-dim: rgba(255, 255, 255, .6);
  --on-ink-faint: rgba(255, 255, 255, .35);
  --on-signal: #fff;
  --release-edge: rgba(15, 107, 70, .14);
  --release-label: #2f6b50;
  --sans-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono-ui: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

/* dark theme: same tokens, new values. Chosen by the toggle (data-theme on <html>), else the system setting. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8eaed;
  --ink-2: #c3c7cc;
  --ink-3: #9aa0a6;
  --hair: #2a2e33;
  --hair-strong: #3b4046;
  --rail: #15181b;
  --signal: #3fb27f;
  --signal-soft: #15271e;
  --signal-wash: #12201a;
  --surface: #0e1113;
  --hover: #1b1f23;
  --on-ink: #0e1113;
  --on-ink-dim: rgba(14, 17, 19, .6);
  --on-ink-faint: rgba(14, 17, 19, .35);
  --on-signal: #08130d;
  --release-edge: rgba(63, 178, 127, .28);
  --release-label: #7fc9a5;
}

body.is-public {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans-ui);
  font-size: 15px;
  line-height: 1.55;
}

body.is-public a { color: inherit; }
body.is-public :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------------------------------------------------------------- chrome */
/* Three tracks so the search sits in the middle of the page, not after the
   wordmark. */
body.is-public .topbar {
  height: 60px; padding: 0 28px; border-bottom: 0;
  display: grid; grid-template-columns: 1fr minmax(280px, 460px) 1fr;
  align-items: center; gap: 24px;
}
body.is-public .topbar-left { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; }
body.is-public .brand-wrap { justify-self: start; }
body.is-public .topbar-spacer { display: block; }
body.is-public .brand-mark { width: 32px; height: 32px; border-radius: 8px; }
body.is-public .brand-text { white-space: nowrap; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
body.is-public .brand-wrap.home-link:hover .brand-text { color: var(--ink); }
body.is-public .brand-wrap { gap: 9px; }

body.is-public .topbar-spacer { justify-self: stretch; }

/* search: a labelled green pill at the end of the category track, opening a band beneath it */
body.is-public .category-search-toggle {
  background: var(--signal-soft); border: 0; padding: 0 14px 0 12px; margin: 0 0 0 4px;
  height: 36px; border-radius: 999px; gap: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--signal); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
body.is-public .category-search-toggle i { font-size: 14px; }
body.is-public .category-search-toggle:hover { background: var(--signal); color: var(--on-signal); }
body.is-public .category-search-toggle.is-open { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 1px 3px rgba(20, 22, 25, .10); }
body.is-public .global-search-panel {
  border-bottom: 1px solid var(--hair); background: var(--surface);
  padding: 14px 28px; display: flex; justify-content: center;
}
body.is-public .global-search-panel[hidden] { display: none; }
body.is-public .global-search-panel .global-search-box { width: min(620px, 100%); }
body.is-public .global-search-suggestions {
  border: 1px solid var(--hair); border-radius: 6px; box-shadow: 0 16px 32px rgba(20, 22, 25, .08);
  top: 42px; padding: 6px;
}
body.is-public .global-search-item { border-radius: 4px; font-weight: 500; }
body.is-public .global-search-item:hover { background: var(--rail); }
body.is-public .global-search-type {
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
body.is-public .global-search-box { width: 100%; }
body.is-public .search-input {
  height: 34px; border-radius: 4px; border: 1px solid var(--hair);
  background: var(--surface); font-size: 14px; padding: 0 12px; width: 100%;
}
body.is-public .search-input::placeholder { color: var(--ink-3); }
body.is-public .profile-dot { display: none; }

body.is-public .page-shell { padding: 0; }

/* categories: a segmented track; the selected one is a raised white pill */
body.is-public .category-strip {
  width: fit-content; max-width: calc(100% - 32px); margin: 14px auto; padding: 4px; gap: 2px;
  background: var(--rail); border: 1px solid var(--hair); border-radius: 999px;
  align-items: center; justify-content: flex-start;
}
body.is-public .category-pill {
  background: none; border: 0; border-radius: 999px; margin: 0; transform: none;
  padding: 8px 18px; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink-2); transition: background .15s, box-shadow .15s, color .15s;
}
body.is-public .category-pill:hover { background: rgba(20, 22, 25, .05); color: var(--ink); transform: none; border-color: transparent; }
body.is-public .category-pill.selected {
  background: var(--surface); color: var(--ink); border-color: transparent;
  box-shadow: 0 0 0 1px var(--hair), 0 1px 3px rgba(20, 22, 25, .10);
}
body.is-public .category-pill:focus-visible,
body.is-public .category-search-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
body.is-public .category-icon { display: inline-flex; font-size: 16px; }
/* wordmarks (Samsung) are wide; keep their aspect instead of squashing them
   into a square box */
body.is-public .category-logo {
  width: auto; height: 16px; max-width: 34px; object-fit: contain; display: block;
}
body.is-public .category-pill:not(.selected) .category-icon,
body.is-public .category-pill:not(.selected) .category-logo { opacity: .85; }
body.is-public .category-pill[data-category='cars'] .category-icon { color: #a85b2b; }
body.is-public .category-pill[data-category='apple'] .category-icon { color: #4a5056; }
body.is-public .category-pill[data-category='samsung'] .category-icon { color: #1f4fa8; }
body.is-public .category-pill[data-category='google'] .category-icon { color: #b2342b; }
body.is-public .soon-text { font-size: 11px; color: var(--ink-3); }

/* latest release: a tinted band so it reads before anything else */
body.is-public .home-utility-bar {
  background: var(--rail); border: 0; border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair); border-radius: 0;
  box-shadow: none; margin: 0; padding: 14px 28px; gap: 16px; font-size: 14px;
}
body.is-public .home-utility-label {
  color: var(--ink-3); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
body.is-public .home-utility-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
/* A slow breath: it sinks into the band's own background, then warms up to the green with a faint halo. */
@media (prefers-reduced-motion: no-preference) {
  body.is-public .home-utility-dot { animation: latest-dot-breathe 3.4s ease-in-out infinite; }
}
@keyframes latest-dot-breathe {
  0%, 100% { background: color-mix(in srgb, var(--signal) 18%, var(--rail)); box-shadow: 0 0 0 0 transparent; }
  50% { background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 20%, transparent); }
}
body.is-public .home-utility-name { font-weight: 600; font-size: 16px; color: var(--ink); }
body.is-public .home-utility-version {
  font-family: var(--mono-ui); font-variant-numeric: tabular-nums;
  background: none; border: 0; border-radius: 0; padding: 0;
  color: var(--signal); font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
}
body.is-public .home-utility-date { color: var(--ink-3); font-family: var(--mono-ui); font-size: 11px; opacity: .85; }
body.is-public .home-utility-separator { display: none; }
body.is-public a.home-utility-bar { text-decoration: none; }
body.is-public .home-utility-arrow {
  font-size: 14px; color: var(--ink-3); margin-left: 4px;
}
body.is-public a.home-utility-bar:hover { background: var(--hover); }
body.is-public a.home-utility-bar:hover .home-utility-name { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  body.is-public .home-utility-bar { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
  body.is-public .home-utility-copy { flex-wrap: wrap; row-gap: 2px; }
  body.is-public .home-utility-copy { width: 100%; }
}
body.is-public a.home-utility-bar:hover .home-utility-arrow {
  color: var(--ink); transform: translateX(3px);
}
body.is-public a.home-utility-bar:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  body.is-public a.home-utility-bar { transition: background .14s ease; }
  body.is-public .home-utility-arrow { transition: transform .14s ease, color .14s ease; }
}

/* ------------------------------------------------------------ main grid */
body.is-public .app-card {
  border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible;
}
body.is-public .brand-strip {
  gap: 26px; padding: 0 28px; border-bottom: 1px solid var(--hair);
}
body.is-public .brand-item {
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
  min-width: 0; padding: 11px 0 9px; gap: 8px; font-size: 14px; font-weight: 500;
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
body.is-public .brand-item:hover { background: none; border-color: transparent; color: var(--ink); transform: none; }
body.is-public .brand-item.active {
  background: none; color: var(--ink); box-shadow: none; border-bottom-color: #9ccbb3;
  /* the same fading green line as the history chart and the footer */
  border-image: linear-gradient(90deg, rgba(79, 157, 120, 0) 0, #9ccbb3 14%, #9ccbb3 86%, rgba(79, 157, 120, 0) 100%) 1;
}
body.is-public .brand-logo { width: 20px; height: 20px; filter: grayscale(1); opacity: .7; }
body.is-public .brand-item.active .brand-logo { filter: none; opacity: 1; }
body.is-public .landrover-brand-logo { width: 30px; height: 20px; }
body.is-public .brand-beta-pill { font-size: 10px; color: var(--ink-3); }

/* Release list stays narrow so the changelog starts right beside the version
   you just clicked instead of across the page. */
/* Column widths come from variables so each screen class below (M / L / XL) can set its own. */
body.is-public .content-grid.final-balance {
  --col-models: 200px; --col-list: 300px; --col-cards: 340px;
  grid-template-columns: var(--col-models) var(--col-list) minmax(0, 1fr);
  min-height: 0; align-items: start;
}

/* model rail */
/* Same trick as the Release history card: the surface and the hairline sit on a pseudo-element
   that dissolves toward the bottom, so the list fades into the page instead of ending on a hard edge. */
body.is-public .models-panel {
  position: relative; isolation: isolate; padding: 20px 0 32px; background: none; border-right: 0;
}
body.is-public .models-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--rail); border-right: 1px solid var(--hair);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
}
body.is-public .model-search-wrap { margin: 0 20px 6px; }
body.is-public .model-search-input {
  height: 32px; border-radius: 4px; border: 1px solid var(--hair); font-size: 13px;
}
body.is-public .family-title {
  font-size: 12px; font-weight: 400; color: var(--ink-3); margin: 20px 20px 4px;
  display: flex; align-items: center; gap: 8px;
}
body.is-public .family-logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
body.is-public .models-list { gap: 0; }
body.is-public .models-list.grouped .model-link { margin-left: 0; }
body.is-public .model-link {
  padding: 7px 20px; border-radius: 0; border: 0; font-size: 14px; color: var(--ink-2);
  font-weight: 400; gap: 0;
}
/* hover: the row lifts onto the white surface and a marker slides in */
body.is-public .model-link {
  box-shadow: inset 0 0 0 var(--signal);
}
body.is-public .model-link:hover {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 2px 0 0 var(--hair-strong);
  padding-left: 22px;
}
body.is-public .model-link:hover .v { color: var(--ink-2); }
body.is-public .model-link.active {
  background: var(--surface); color: var(--ink); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--signal);
}
@media (prefers-reduced-motion: no-preference) {
  body.is-public .model-link {
    transition: background .12s ease, color .12s ease, box-shadow .12s ease, padding-left .12s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.is-public .model-link:hover { padding-left: 20px; }
}
body.is-public .model-bullet { display: none; }

body.is-public .models-panel-footer-rss { margin: 24px 20px 0; padding-top: 14px; border-top: 1px solid var(--hair); }

/* ------------------------------------------------- release list (spine) */
body.is-public .releases-panel { padding: 22px 20px 32px; border-right: 1px solid var(--hair); }
body.is-public .hero-subtitle {
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink-3); margin-bottom: 2px;
}
body.is-public .hero-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }

body.is-public .release-box,
body.is-public .detail-box {
  border: 0; border-radius: 0; background: none; overflow: visible;
}
body.is-public .release-box-head { padding: 24px 0 8px; border-bottom: 0; }
body.is-public .release-box-title { font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* the spine: one continuous rule, a dot per release, filled on the current one.
   Version and date stack so the pair reads as one compact block. */
body.is-public .release-box.simplified-release-box > .release-row,
body.is-public .release-more-panel > .release-row {
  margin-left: 4px; padding: 10px 0 10px 18px;
  border-left: 1px solid var(--hair); border-bottom: 0; background: none;
  box-shadow: none; position: relative;
  display: block;
}
body.is-public .release-row::after {
  content: ""; position: absolute; left: -4px; top: 17px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--hair-strong);
}
body.is-public .release-row::before { display: none; }
body.is-public .release-row:hover { background: none; }
body.is-public .release-row:hover .release-version { color: var(--signal); }
body.is-public .release-row-featured::after { background: var(--signal); border-color: var(--signal); }
body.is-public .release-row.active { background: none; box-shadow: none; }
body.is-public .release-row.active .release-version { color: var(--signal); }
body.is-public .release-row.active::after { background: var(--signal); border-color: var(--signal); }

body.is-public .release-version {
  font-family: var(--mono-ui); font-size: 17px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink);
}
body.is-public .release-date {
  font-family: var(--mono-ui); font-size: 12px; font-weight: 400; color: var(--ink-3);
  min-height: 0; font-variant-numeric: tabular-nums;
  display: block; justify-content: flex-start; margin-top: 1px;
}
body.is-public .release-version-wrap { gap: 7px; }
body.is-public .release-pill {
  text-transform: lowercase; letter-spacing: 0; font-weight: 500; font-size: 11px;
  border-radius: 3px; padding: 2px 7px; border: 0;
  background: var(--signal-soft); color: var(--signal);
}
body.is-public .release-left { gap: 4px; }

/* "More releases" is the next bead on the spine rather than an underlined
   link hanging off the end of it. */
body.is-public .release-more-actions {
  padding: 0; justify-content: flex-start;
  margin-left: 4px; border-left: 1px solid var(--hair);
}
body.is-public .release-more-btn {
  position: relative; color: var(--ink-3); font-weight: 400; font-size: 13px;
  border: 0; border-radius: 0; padding: 12px 0 2px 18px;
}
body.is-public .release-more-btn::after {
  content: ""; position: absolute; left: -5px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface); border: 1px dashed var(--hair-strong);
}
body.is-public .release-more-btn:hover { color: var(--ink); }
body.is-public .release-more-btn:hover::after { border-color: var(--ink-3); }
body.is-public .release-more-btn i { display: none; }

/* follow / copy controls stay as quiet text */
body.is-public .release-follow-inline {
  border: 0; background: none; padding: 16px 0 0; gap: 12px; border-radius: 0;
}
body.is-public .release-follow-link { font-size: 13px; font-weight: 400; color: var(--ink-3); }
body.is-public .release-follow-link:hover { color: var(--ink); }
body.is-public .release-follow-link .rss-icon { color: var(--ink-3); }
body.is-public .release-copy-btn,
body.is-public .rss-copy-btn {
  border: 1px solid var(--hair); border-radius: 4px; background: var(--surface);
  color: var(--ink-3); font-size: 12px; font-weight: 400; padding: 3px 8px; transform: none;
}
body.is-public .release-copy-btn:hover,
body.is-public .rss-copy-btn:hover { color: var(--ink); background: var(--surface); transform: none; }
body.is-public .release-copy-btn.copied,
body.is-public .rss-copy-btn.copied { color: var(--signal); border-color: var(--signal-soft); background: var(--signal-soft); }

/* ------------------------------------------------------- release detail */
body.is-public .detail-sidebar {
  background: var(--surface); border-left: 0; padding: 22px 40px 40px 56px;
}
/* Changelog on the left, the facts beside it — the pane is wide enough that
   stacking them underneath wasted the right half of the page. */
/* The text column shrinks to its content (capped at a readable measure) so the
   facts sit right next to the changelog instead of against the far edge. */
body.is-public .simple-detail-content {
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-content: start; gap: 28px; align-items: stretch;
}
body.is-public .detail-main { min-width: 0; }
body.is-public .sticky-detail { position: sticky; top: 20px; }
body.is-public .simple-detail-box { min-height: 0; border-radius: 0; }
body.is-public .detail-simple-header { border-bottom: 0; background: none; }
body.is-public .detail-version {
  font-family: var(--mono-ui); font-size: 44px; font-weight: 500; line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
body.is-public .detail-inline-meta {
  padding: 0 0 20px; border-bottom: 0; font-size: 13px; color: var(--ink-3); gap: 2px;
}
body.is-public .detail-inline-meta .field-label { font-weight: 400; color: var(--ink-3); }
body.is-public .simple-section-title {
  font-size: 14px; font-weight: 600; padding: 0 0 10px; margin: 0;
}
body.is-public .plain-changelog-reading { padding: 0 0 8px; font-size: calc(14px * var(--cl-scale, 1)); line-height: 1.65; color: var(--ink-2); }
body.is-public .plain-changelog-reading ul { padding-left: 0; list-style: none; }
body.is-public .changelog-line {
  position: relative; padding: 0 0 0 16px; margin-bottom: 9px; border: 0;
  background: none; border-radius: 0; list-style: none; max-width: 72ch;
}
body.is-public .changelog-line { padding-left: 1.3em; }
body.is-public .changelog-line::before {
  content: ""; position: absolute; left: .2em; top: .62em; width: .42em; height: .42em; border-radius: 50%; background: var(--ink);
}
html[data-theme="dark"] body.is-public .changelog-line::before { background: var(--ink-2); }

/* what the release contains: colored boxes above the list, only for what the words clearly say */
body.is-public .cl-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
body.is-public .cl-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 9px; border: 1px solid; font: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: box-shadow .15s, filter .15s;
}
body.is-public .cl-chip i { font-size: 13px; }
body.is-public .cl-chip:hover { filter: brightness(.97); }
body.is-public .cl-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }
body.is-public .cl-chip.is-security { background: #fef1f1; border-color: #f8c4c4; color: #c0262d; }
body.is-public .cl-chip.is-new { background: #e8f2ed; border-color: #bfe0cf; color: #0f6b46; }
body.is-public .cl-chip.is-fix { background: #eaf1ff; border-color: #c9dbff; color: #2b59c3; }
body.is-public .cl-chip.is-improvement { background: #f1eefb; border-color: #d9d0f3; color: #5b3fb0; }
body.is-public .cl-chip.is-general { background: #f1f2f4; border-color: #dcdfe3; color: #4b5057; }
html[data-theme="dark"] body.is-public .cl-chip.is-security { background: #2d1517; border-color: #6a2a2e; color: #f08a8e; }
html[data-theme="dark"] body.is-public .cl-chip.is-new { background: #15271e; border-color: #245238; color: #5fcf9b; }
html[data-theme="dark"] body.is-public .cl-chip.is-fix { background: #14203a; border-color: #243a66; color: #8fb0f5; }
html[data-theme="dark"] body.is-public .cl-chip.is-improvement { background: #1c1830; border-color: #3a3163; color: #b3a0f0; }
html[data-theme="dark"] body.is-public .cl-chip.is-general { background: #1b1f23; border-color: #2f353b; color: #b7bcc2; }
/* a chip filters the list: matching lines stay (also the folded ones), the rest hide */
body.is-public .plain-changelog-reading.is-filtered .changelog-line { display: none; }
body.is-public .plain-changelog-reading.is-filtered .changelog-line.is-match { display: list-item; }

body.is-public .changelog-toggle-wrap { padding: 0; justify-content: flex-start; }
body.is-public .changelog-toggle-btn {
  background: none; color: var(--ink-2); border: 0; border-bottom: 1px solid var(--hair-strong);
  border-radius: 0; padding: 0 0 1px; font-size: 14px; font-weight: 400;
}
body.is-public .changelog-toggle-btn:hover { background: none; color: var(--ink); }

/* Source facts live in a popover on the release header instead of a side card */
body.is-public .detail-simple-header {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px;
  padding: 0 0 6px;
}
body.is-public .release-details-wrap { position: relative; flex: none; }
body.is-public .release-details-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px;
  background: var(--rail); border: 1px solid var(--hair-strong); border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
body.is-public .release-details-btn:hover {
  background: var(--surface); border-color: var(--ink-3); box-shadow: 0 1px 3px rgba(20, 22, 25, .10);
}
body.is-public .release-details-wrap.is-open .release-details-btn {
  background: var(--signal-soft); border-color: var(--signal); color: var(--signal); box-shadow: none;
}
body.is-public .release-details-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
body.is-public .release-details-icon { font-size: 14px; line-height: 1; }
body.is-public .release-details-caret { font-size: 10px; line-height: 1; transition: transform .15s; }
body.is-public .release-details-wrap.is-open .release-details-caret { transform: rotate(180deg); }
body.is-public .release-details {
  position: absolute; left: 0; top: calc(100% + 12px); z-index: 20; width: 320px; max-width: calc(100vw - 32px);
  padding: 18px 20px 16px; border: 1px solid var(--release-edge); border-radius: 22px;
  background: linear-gradient(180deg, var(--signal-wash) 0, var(--surface) 75%);
  /* layered: a tight contact shadow, a mid lift and a wide soft halo */
  box-shadow: 0 1px 2px rgba(20, 22, 25, .08), 0 8px 20px rgba(20, 22, 25, .10), 0 24px 56px rgba(20, 22, 25, .14);
  font-size: 14px; font-weight: 500; color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* little notch pointing at the button; the extra height bridges the gap for the pointer */
body.is-public .release-details::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
body.is-public .release-details::after {
  content: ""; position: absolute; top: -7px; left: 34px; width: 12px; height: 12px;
  background: var(--signal-wash); border-left: 1px solid var(--release-edge); border-top: 1px solid var(--release-edge);
  transform: rotate(45deg); border-top-left-radius: 3px;
}
body.is-public .release-details-wrap.is-open .release-details { opacity: 1; visibility: visible; transform: none; }
body.is-public .release-details-row { margin-bottom: 11px; line-height: 1.45; }
body.is-public .release-details-row span {
  display: block; margin-bottom: 1px; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--release-label);
}
body.is-public .release-details-link {
  display: inline-block; color: var(--signal); border-bottom: 1px solid rgba(15, 107, 70, .35);
  text-decoration: none; font-size: 14px; font-weight: 600;
}
body.is-public .release-details-link:hover { border-bottom-color: var(--signal); }
@media (prefers-reduced-motion: reduce) {
  body.is-public .release-details, body.is-public .release-details-caret,
  body.is-public .release-details-btn { transition: none; }
}

/* ------------------------------------------------------ release history */
body.is-public .detail-sidebar { container: detail / inline-size; }
/* Screen classes (viewport width). The changelog is the page: it keeps a readable measure and the two
   cards only sit beside it on screens that can hold both. Below 1400px (13" scaled to 1280, 14" scaled,
   small windows, tablets) the cards sit under the changelog, side by side while they fit.
     M   1400-1599  13" [1440/1470], 14" [1512]   changelog ~470-540px, cards 340
     L   1600-1899  15" [1710], 16" [1728]        wider side lists, changelog ~580px, cards 380 (stacked)
     XL  1900+      external 1920/2560            cards column 660-700: Release history | Your version side by side */
@media (min-width: 1400px) {
  body.is-public .simple-detail-content { grid-template-columns: fit-content(80ch) var(--col-cards); gap: 36px; }
}
@media (min-width: 1600px) {
  body.is-public .content-grid.final-balance { --col-models: 220px; --col-list: 340px; --col-cards: 380px; }
}
@media (min-width: 1900px) {
  body.is-public .content-grid.final-balance { --col-cards: minmax(660px, 700px); } /* room for the two cards side by side */
}
body.is-public .activity-panel {
  position: relative; isolation: isolate; align-self: start; padding: 20px 20px 14px;
}
/* The surface and its hairline live on a pseudo-element so they can dissolve toward the
   bottom: the card has no hard edge under the range buttons. */
body.is-public .activity-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--rail); border: 1px solid var(--hair); border-radius: 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}
body.is-public .activity-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 6px; }
body.is-public .activity-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* brand mark in a small chip, same language as the category and brand strips; wordmarks keep their aspect */
body.is-public .activity-logo {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px;
}
body.is-public .activity-logo img { width: auto; height: 18px; max-width: 28px; object-fit: contain; display: block; }
body.is-public .activity-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
body.is-public .activity-model { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-public .activity-summary { margin: 0 4px 14px; font-size: 13px; color: var(--ink-3); }
body.is-public .activity-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
body.is-public .activity-stat {
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
body.is-public .activity-stat-label { font-size: 11px; color: var(--ink-3); }
body.is-public .activity-stat-value {
  font-family: var(--mono-ui); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.15;
}
body.is-public .activity-stat-value small { font-size: 12px; color: var(--ink-3); margin-left: 1px; letter-spacing: 0; }
body.is-public .activity-chart {
  display: flex; align-items: flex-end; gap: 5px; height: 120px; padding: 0 4px;
  /* a soft green ground under the bars that fades out toward both ends */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, rgba(79, 157, 120, 0) 0, #9ccbb3 14%, #9ccbb3 86%, rgba(79, 157, 120, 0) 100%) 1;
}
body.is-public .activity-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: 0; }
body.is-public .activity-bar {
  display: block; width: 100%; max-width: 22px; border-radius: 999px 999px 4px 4px;
  background: #cfe6da; transform-origin: bottom; animation: activity-grow .45s cubic-bezier(.2, .8, .2, 1) both;
  transition: background .15s;
}
/* more releases in a bucket, deeper green */
body.is-public .activity-bar.tone-1 { background: #cfe6da; }
body.is-public .activity-bar.tone-2 { background: #9ccbb3; }
body.is-public .activity-bar.tone-3 { background: #4f9d78; }
body.is-public .activity-bar.tone-4 { background: var(--signal); }
body.is-public .activity-bar.is-empty { height: 0 !important; animation: none; }
body.is-public .activity-col:hover .activity-bar,
body.is-public .activity-col:focus-visible .activity-bar { filter: brightness(.92); }
body.is-public .activity-col:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 8px; }
body.is-public .activity-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5;
  min-width: 110px; padding: 8px 12px; background: var(--ink); color: var(--on-ink); border-radius: 14px;
  font-size: 12px; line-height: 1.45; white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s;
}
body.is-public .activity-col:hover .activity-tip,
body.is-public .activity-col:focus-within .activity-tip,
body.is-public .activity-col.is-open .activity-tip { pointer-events: auto; }
body.is-public .activity-tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
body.is-public .activity-tip a { display: block; font-family: var(--mono-ui); color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--on-ink-faint); text-underline-offset: 2px; padding: 2px 0; }
body.is-public .activity-tip a:hover, body.is-public .activity-tip a:focus-visible { text-decoration-color: var(--on-ink); outline: 0; }
body.is-public .activity-stat-note { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
body.is-public .activity-tip strong { display: block; font-weight: 500; color: var(--on-ink-dim); font-size: 11px; margin-bottom: 2px; }
body.is-public .activity-tip span { display: block; font-family: var(--mono-ui); }
body.is-public .activity-col:first-child .activity-tip,
body.is-public .activity-col:nth-child(2) .activity-tip { left: 0; transform: none; }
body.is-public .activity-col:last-child .activity-tip,
body.is-public .activity-col:nth-last-child(2) .activity-tip { left: auto; right: 0; transform: none; }
body.is-public .activity-col:hover .activity-tip,
body.is-public .activity-col:focus-within .activity-tip,
body.is-public .activity-col.is-open .activity-tip { opacity: 1; visibility: visible; }
body.is-public .activity-ticks { display: flex; gap: 5px; padding: 0 4px; margin-top: 6px; }
body.is-public .activity-tick {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: var(--mono-ui); font-variant-numeric: tabular-nums; color: var(--ink-3); line-height: 1.2;
}
body.is-public .activity-tick b { font-size: 11px; font-weight: 400; }
body.is-public .activity-tick i { font-size: 9px; font-style: normal; opacity: .75; min-height: 11px; }
body.is-public .activity-tick.is-today b { color: var(--ink); font-weight: 600; }
body.is-public .activity-note { margin: 10px 4px 0; font-size: 12px; color: var(--ink-3); }
/* same construction as the category strip: a rail track, the selected one a raised white pill */
body.is-public .activity-tabs {
  display: flex; gap: 2px; width: fit-content; margin: 16px auto 0; padding: 4px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 999px;
}
body.is-public .activity-tab {
  min-width: 44px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-family: var(--mono-ui); font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s, box-shadow .15s;
}
body.is-public .activity-tab:hover { background: rgba(20, 22, 25, .05); color: var(--ink); }
body.is-public .activity-tab.is-active { background: var(--signal-soft); color: var(--signal); box-shadow: 0 0 0 1px rgba(15, 107, 70, .25); }
body.is-public .activity-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@keyframes activity-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  body.is-public .activity-bar { animation: none; }
  body.is-public .activity-tip, body.is-public .activity-tab { transition: none; }
}

/* ------------------------------------------------------ popular section */
body.is-public .home-popular-section {
  border: 0; border-top: 1px solid var(--hair); border-radius: 0; box-shadow: none;
  background: none; margin: 0; padding: 32px 28px 36px;
}
body.is-public .home-popular-section-head { display: flex; align-items: baseline; justify-content: space-between; }
body.is-public .home-popular-section-title { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; text-transform: none; }
body.is-public .home-popular-count { font-family: var(--mono-ui); font-size: 12px; color: var(--ink-3); }
body.is-public .home-popular-sub { margin: 4px 0 20px; font-size: 13px; color: var(--ink-3); }

/* the busiest models as tiles, two columns read top to bottom (1-5 left, 6-10 right) */
body.is-public .pop-tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 10px 16px;
}
body.is-public .pop-tile {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 78px; align-items: center; gap: 14px; min-width: 0;
  padding: 14px 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
/* the soft green wash of the release timeline */
body.is-public .pop-tile:hover { border-color: var(--signal); background: var(--signal-soft); }
body.is-public .pop-tile:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
body.is-public .pop-rank { font-family: var(--mono-ui); font-size: 12px; color: var(--ink-3); }
body.is-public .pop-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.is-public .pop-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 6px; flex: none; }
body.is-public .pop-who-text { min-width: 0; }
body.is-public .pop-who-text b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-public .pop-who-text small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* featured: gift chip in the tone of the SOON chip */
body.is-public .pop-gift { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; margin-left: 8px; border: 1px solid #fed7aa; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
body.is-public .pop-ver { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--mono-ui); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: var(--signal); white-space: nowrap; }
body.is-public .pop-new { padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--signal-soft); color: var(--signal); }
body.is-public .pop-tile:hover .pop-new { background: var(--surface); }
body.is-public .pop-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; }
body.is-public .pop-spark i { width: 5px; border-radius: 2px; background: var(--hair-strong); display: block; }
body.is-public .pop-spark i.on { background: #9ccbb3; }
body.is-public .pop-tile:hover .pop-spark i.on { background: var(--signal); }
@media (prefers-reduced-motion: reduce) { body.is-public .pop-tile { transition: none; } }
@media (max-width: 1100px) { body.is-public .pop-tile { grid-template-columns: 22px minmax(0, 1fr) auto; } body.is-public .pop-spark { display: none; } }
@media (max-width: 760px) {
  body.is-public .home-popular-section { padding: 24px 16px 28px; }
  body.is-public .pop-tiles { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

/* ------------------------------------------------------- content pages */
body.is-public .info-page-shell { max-width: 720px; margin: 0 auto; padding: 56px 28px 24px; }
body.is-public .info-page-hero {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 24px;
}
body.is-public .simple-page-eyebrow {
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
body.is-public .simple-page-title { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0 0; }

/* ---------------------------------------------------------------- footer */
body.is-public .site-footer {
  background: none; border: 0; border-radius: 0;
  box-shadow: none; margin: 48px 0 0; padding: 20px 28px;
  /* the same soft green ground line as under the release-history bars, fading out toward both ends */
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, rgba(79, 157, 120, 0) 0, #9ccbb3 14%, #9ccbb3 86%, rgba(79, 157, 120, 0) 100%) 1;
}
body.is-public .site-footer-inner { margin: 0; align-items: baseline; }
body.is-public .footer-brand { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
body.is-public .footer-mark { width: 26px; height: 26px; flex: none; }
body.is-public .site-footer-copy { font-size: 13px; color: var(--ink-3); }
/* footer pages: icon + label, soft green wash on hover; right-aligned on wide screens, wraps under the tagline on narrow ones */
body.is-public .footer-nav-block { align-items: flex-end; }
body.is-public .footer-links { gap: 6px; justify-content: flex-end; }
body.is-public .footer-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
body.is-public .footer-links a i { font-size: 15px; color: var(--ink-3); transition: color .15s; }
body.is-public .footer-links a:hover { background: rgba(20, 22, 25, .05); border-color: var(--hair); color: var(--ink); }  /* light: the grey of the category pills */
body.is-public .footer-links a:hover i { color: var(--ink-2); }
html[data-theme="dark"] body.is-public .footer-links a:hover { background: rgba(63, 178, 127, .10); }  /* dark: the muted green wash */
html[data-theme="dark"] body.is-public .footer-links a:hover i { color: var(--signal); }
body.is-public .footer-links a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (max-width: 900px) {
  body.is-public .footer-nav-block { align-items: flex-start; }
  body.is-public .footer-links { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 1280px) {
  /* Three columns all the way down to tablets: the detail pane used to drop below a
     half-empty list here. Its own container query stacks the changelog above the chart. */
  body.is-public .content-grid.final-balance { grid-template-columns: 200px minmax(260px, 300px) minmax(0, 1fr); }
  body.is-public .detail-sidebar { grid-column: auto; border-top: 0; border-left: 1px solid var(--hair); padding-left: 24px; }
  body.is-public .sticky-detail { position: sticky; }
}
@media (max-width: 1040px) {
  body.is-public .content-grid.final-balance { grid-template-columns: 220px 1fr; }
  body.is-public .detail-sidebar { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hair); }
  body.is-public .sticky-detail { position: static; }
}
@media (max-width: 1040px) {
  body.is-public .detail-main { min-width: 0; }
  /* a bottom sheet: fixed at its static position it opened below the fold whenever the button sat low on the page,
     and a fixed box cannot be scrolled to, so the tap only turned the button green */
  body.is-public .release-details {
    position: fixed; left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
    transform: translateY(12px); z-index: 60;
  }
  body.is-public .release-details::after { display: none; }
}
@media (max-width: 900px) {
  body.is-public .topbar { padding: 0 16px; }
  body.is-public .brand-strip { padding: 0 16px; overflow-x: auto; }
  body.is-public .category-strip { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  body.is-public .category-pill { flex: none; }
  body.is-public .category-pill { padding: 8px 14px; white-space: nowrap; }
  body.is-public .content-grid.final-balance { grid-template-columns: 1fr; }
  body.is-public .models-panel { border-bottom: 1px solid var(--hair); padding-bottom: 20px; }
  body.is-public .models-panel::before { border-right: 0; -webkit-mask-image: none; mask-image: none; }
  body.is-public .releases-panel,
  body.is-public .detail-sidebar { padding: 20px 16px 28px; }
  body.is-public .detail-version { font-size: 36px; }
  body.is-public .home-utility-bar { flex-wrap: wrap; padding: 12px 16px; }
  body.is-public .home-popular-section { padding: 24px 16px; }
}
@media (max-width: 480px) {
  body.is-public .category-strip { gap: 0; }
  body.is-public .category-pill { padding: 8px 9px; gap: 5px; font-size: 14px; }
  body.is-public .activity-tick b { font-size: 10px; letter-spacing: -.03em; }
  body.is-public .activity-tick i { font-size: 8px; letter-spacing: -.03em; }
}

/* ---------------------------------------------------------------- error page */
body.is-public .error-page { padding-top: 72px; }
body.is-public .error-code {
  font-family: var(--mono-ui); font-size: clamp(72px, 14vw, 120px); font-weight: 500; line-height: 1; letter-spacing: -0.04em;
  color: var(--hair-strong); font-variant-numeric: tabular-nums;
}
body.is-public .error-page .page-rule { margin: 14px 0 22px; }
body.is-public .error-eyebrow { color: var(--signal); font-family: var(--mono-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
body.is-public .error-page .simple-page-title { margin-top: 8px; }
body.is-public .error-page-message { margin: 12px 0 0; max-width: 520px; font-size: 16px; color: var(--ink-2); line-height: 1.65; }
body.is-public .error-page-actions { margin: 24px 0 0; }
body.is-public .error-page-popular { margin-top: 48px; }
body.is-public .error-page-heading { font-size: 13px; font-weight: 500; color: var(--ink-3); margin: 0 0 12px; letter-spacing: .02em; }
body.is-public .error-page-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
body.is-public .error-page-list a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px;
  text-decoration: none; color: var(--ink); background: var(--surface); transition: border-color .15s, background .15s;
}
body.is-public .error-page-list a:hover { border-color: var(--signal); background: var(--signal-soft); }
body.is-public .error-card-logo { width: 24px; height: 24px; object-fit: contain; flex: none; border-radius: 6px; }
body.is-public .error-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.is-public .error-card-text strong { font-weight: 600; font-size: 14px; }
body.is-public .error-card-text span { font-size: 12px; color: var(--ink-3); font-family: var(--mono-ui); }

/* ---------------------------------------------------------------- small helpers */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font-size: 14px; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
body.is-public .release-empty, body.is-public .model-filter-empty { margin: 14px 4px 6px; font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: 460px; }
body.is-public .model-filter-empty { font-size: 13px; margin: 10px 20px; }

/* ---------------------------------------------------------------- "Your version" card */
/* Two equal cards: side by side when the row is wide, one above the other when it is not. */
body.is-public .insights-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px;
  align-items: start; align-self: start; max-width: 880px;
}
body.is-public .insights-row > .activity-panel { min-width: 0; }
/* Like the Release history card: surface and hairline live on a pseudo-element that dissolves downward. */
body.is-public .vc-card {
  position: relative; isolation: isolate; min-width: 0; padding: 23px 25px;
}
body.is-public .vc-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--surface), var(--rail)); border: 1px solid var(--hair); border-radius: 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}
body.is-public .vc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
body.is-public .vc-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
body.is-public .vc-saved { font-size: 11px; color: var(--ink-3); }
body.is-public .vc-select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface);
  font-family: var(--mono-ui); font-size: 14px; color: var(--ink);
}
body.is-public .vc-status { margin: 16px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
body.is-public .vc-status.is-ok { color: var(--signal); }
body.is-public .vc-when { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
body.is-public .vc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
body.is-public .vc-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--signal-soft); color: var(--signal); }
body.is-public .vc-chip.is-security { background: #fff4e5; color: #8a4b00; }
body.is-public .vc-spine { list-style: none; margin: 0 0 0 5px; padding: 0; border-left: 1px solid var(--hair); }
body.is-public .vc-spine li { position: relative; padding: 0 0 12px 18px; }
body.is-public .vc-spine li:last-child { padding-bottom: 0; }
body.is-public .vc-spine li::before {
  content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--ink-3);
}
body.is-public .vc-spine li.is-ahead::before { background: var(--signal); border-color: var(--signal); }
body.is-public .vc-spine li.is-you::before { background: #9b1c1c; border-color: #9b1c1c; }
body.is-public .vc-ver { font-family: var(--mono-ui); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
body.is-public a.vc-ver:hover { text-decoration: underline; }
body.is-public .vc-date { margin-left: 8px; font-family: var(--mono-ui); font-size: 12px; color: var(--ink-3); }
body.is-public .vc-tag { margin-left: 8px; padding: 1px 7px; border-radius: 3px; background: var(--signal-soft); color: var(--signal); font-size: 11px; }
body.is-public .vc-you { margin-left: 8px; font-size: 12px; color: var(--ink-3); }
body.is-public .vc-more { margin: 10px 0 0 5px; padding-left: 18px; font-size: 12px; color: var(--ink-3); }
body.is-public .vc-notify { margin-top: 14px; }
body.is-public .vc-notify-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* the soft green ground line from the release-history bars, closing the version list */
body.is-public .vc-ground {
  height: 2px; margin-top: 14px;
  background: linear-gradient(90deg, rgba(79, 157, 120, 0) 0, #9ccbb3 14%, #9ccbb3 86%, rgba(79, 157, 120, 0) 100%);
}
body.is-public .vc-result:empty + .vc-ground { display: none; }
body.is-public .vc-when strong { font-weight: 700; color: var(--ink); }
body.is-public .vc-notify-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--hair); border-radius: 999px;
  background: var(--surface); font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer;
}
body.is-public .vc-notify-btn:hover { border-color: rgba(15, 107, 70, .35); background: var(--signal-soft); }
body.is-public .vc-soon {
  padding: 1px 7px; border-radius: 999px; border: 1px solid #fed7aa; background: #fff7ed; color: #c2410c;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
body.is-public .vc-notify-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
body.is-public .vc-intro { margin: -4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
body.is-public .vc-help { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
body.is-public .vc-help summary { cursor: pointer; color: var(--signal); }
body.is-public .vc-help p { margin: 6px 0 0; white-space: pre-line; line-height: 1.5; }
body.is-public .vc-security { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #8a4b00; }
body.is-public .vc-fine { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------- model page extras */
body.is-public .crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-3); }
body.is-public .crumbs a { color: var(--ink-3); text-decoration: none; }
body.is-public .crumbs a:hover { color: var(--ink); text-decoration: underline; }
body.is-public .models-toggle, body.is-public .models-scrim, body.is-public .models-sheet-head { display: none; }
body.is-public .model-link-v { display: none; }
@media (max-width: 900px) {
  /* closed: the model you are on is a card with a clear Change button */
  body.is-public .models-panel { padding: 14px 16px 18px; }
  body.is-public .models-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--signal); border-radius: 14px; min-height: 72px;
  }
  body.is-public .models-toggle-thumb {
    flex: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--hair); background: var(--rail);
    display: grid; place-items: center; overflow: hidden;
  }
  body.is-public .models-toggle-thumb img { width: 30px; height: 30px; object-fit: contain; }
  body.is-public .models-toggle-thumb i { font-size: 22px; color: var(--signal); }
  body.is-public .models-toggle-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
  body.is-public .models-toggle-label { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
  body.is-public .models-toggle-current { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
  body.is-public .models-toggle-meta { font-family: var(--mono-ui); font-size: 11.5px; color: var(--ink-3); }
  body.is-public .models-toggle-change {
    flex: none; display: grid; justify-items: center; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--signal-soft); color: var(--signal);
    font-size: 11.5px; font-weight: 700;
  }
  body.is-public .models-toggle-change i { font-size: 14px; }
  body.is-public .models-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  body.is-public .models-panel:not(.is-open) .models-body { display: none; }

  /* open: a bottom sheet with big names (17px, 56px rows), group headers, the current model lit, its latest version on the right */
  body.models-sheet-open { overflow: hidden; }
  body.is-public .models-panel.is-open { z-index: 90; }
  body.is-public .models-panel.is-open .models-scrim { display: block; position: fixed; inset: 0; background: rgba(8, 10, 12, .55); z-index: 1; }
  body.is-public .models-panel.is-open .models-body {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 72px; z-index: 2; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
    padding: 22px 16px max(24px, env(safe-area-inset-bottom));
  }
  body.is-public .models-panel.is-open .models-body::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--hair-strong, #c9ccd0);
  }
  body.is-public .models-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 18px; font-weight: 700; }
  body.is-public .models-sheet-close {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none;
    color: var(--ink-3); font-size: 17px; cursor: pointer;
  }
  body.is-public .models-body .model-search-wrap { margin: 0 0 4px; }
  body.is-public .models-body .model-search-input { height: 46px; border-radius: 12px; font-size: 16px; padding: 0 14px; }
  body.is-public .models-body .family-title {
    margin: 20px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  }
  body.is-public .models-body .family-logo { width: 20px; height: 20px; }
  body.is-public .models-body .model-link {
    display: flex; align-items: center; min-height: 56px; padding: 0 12px; border-radius: 12px; font-size: 17px; font-weight: 600; color: var(--ink);
  }
  body.is-public .models-body .model-link.is-hidden { display: none; }
  body.is-public .models-body .model-link:hover { padding-left: 12px; background: var(--rail); box-shadow: none; }
  body.is-public .models-body .model-link.active { background: var(--signal-soft); box-shadow: inset 3px 0 0 var(--signal); }
  body.is-public .models-body .model-link::before {
    content: ""; flex: none; width: 7px; height: 7px; margin-right: 14px; border-radius: 50%; background: var(--hair-strong, #3a3f45);
  }
  body.is-public .models-body .model-link.active::before { background: var(--signal); }
  body.is-public .models-body .model-link-v {
    display: inline; margin-left: auto; padding-left: 12px; font-family: var(--mono-ui); font-size: 11.5px; font-weight: 500; color: var(--ink-3);
  }
  body.is-public .models-body .model-link.active .model-link-v { color: var(--signal); }
  body.is-public .models-panel-footer-rss { margin: 22px 4px 0; }
}
body.is-public .vc-notify-row { flex-wrap: wrap; }
body.is-public .vc-notify-btn { white-space: nowrap; }
/* on phones the personal card comes before the chart */
@container detail (max-width: 600px) { body.is-public .vc-card { padding: 20px 18px; } }
@media (max-width: 640px) { body.is-public .insights-row > .vc-card { order: -1; } }
body.is-public .detail-empty-text { margin: 8px 0 0; font-size: 14px; color: var(--ink-3); line-height: 1.5; max-width: 420px; }
body.is-public .checked-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
body.is-public .checked-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563eb; flex: none; }

/* ------------------------------------------------- site release notes (footer) */
body.is-public .site-version-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; flex: none;
  border: 1px solid var(--hair); border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--mono-ui); font-size: 12px; font-weight: 500; color: var(--ink-3);
}
body.is-public .site-version-btn:hover { color: var(--signal); border-color: var(--signal); }
body.is-public .site-version-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
body.is-public .site-version-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: min(560px, 80vh); padding: 0; border: 1px solid var(--hair);
  border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.14); overflow: hidden;
}
body.is-public .site-version-dialog[open] { display: flex; flex-direction: column; }
body.is-public .site-version-dialog::backdrop { background: rgba(6, 8, 10, .62); backdrop-filter: blur(2px); }
html[data-theme="dark"] body.is-public .site-version-dialog::backdrop { background: rgba(0, 0, 0, .72); }
body.is-public .site-version-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
body.is-public .site-version-head h2 { margin: 0 auto 0 0; font-size: 16px; font-weight: 600; }
body.is-public .site-version-head { gap: 10px; }
body.is-public .site-version-mark { width: 26px; height: 26px; border-radius: 6px; flex: none; }
body.is-public .site-version-close { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 14px; padding: 4px; }
body.is-public .site-version-close:hover { color: var(--ink); }
body.is-public .site-version-body { overflow-y: auto; padding: 4px 20px 16px; }
body.is-public .site-version-release { padding: 14px 0; border-bottom: 1px solid var(--hair); }
body.is-public .site-version-release:last-child { border-bottom: 0; }
body.is-public .site-version-line { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
body.is-public .site-version-num { font-family: var(--mono-ui); font-size: 18px; font-weight: 500; color: var(--signal); }
body.is-public .site-version-release:not(:first-child) .site-version-num { color: var(--ink); }
/* only the newest ten versions show; the rest unfold with the button */
body.is-public .site-version-release.is-older { display: none; }
body.is-public .site-version-body.is-expanded .site-version-release.is-older { display: block; }
body.is-public .site-version-more {
  display: block; margin: 8px 0 4px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair-strong);
}
body.is-public .site-version-more:hover { color: var(--ink); }
body.is-public .site-version-date { font-family: var(--mono-ui); font-size: 12px; color: var(--ink-3); }
body.is-public .site-version-release ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
body.is-public .site-version-release li + li { margin-top: 4px; }

/* ------------------------------------------------------- top bar right + theme toggle */
body.is-public .topbar-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
body.is-public .theme-toggle {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface);
  color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
}
/* search button in the top bar: phones only, the green pill in the category row is the desktop one */
body.is-public .topbar-search-btn {
  display: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface);
  color: var(--ink-2); align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
}
body.is-public .topbar-search-btn.is-open { color: var(--signal); border-color: var(--signal); }
body.is-public .topbar-search-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (max-width: 900px) {
  body.is-public .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  body.is-public .topbar-spacer { display: none; }
  body.is-public .topbar-search-btn { display: inline-flex; }
  body.is-public .category-search-toggle { display: none; }
  body.is-public .global-search-panel { padding: 12px 16px; }
  body.is-public .search-input { height: 42px; font-size: 16px; } /* 16px keeps iOS Safari from zooming on focus */
  body.is-public .global-search-suggestions { top: 48px; }
}
body.is-public .theme-toggle:hover { color: var(--ink); border-color: var(--hair-strong); }
body.is-public .theme-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ------------------------------------------------------------ dark: app.css leftovers
   app.css (shared with the admin console) hard-codes light surfaces and slate text; on public pages in dark
   mode those few rules are repointed at the tokens. */
html[data-theme="dark"] body.is-public .topbar,
html[data-theme="dark"] body.is-public .release-box,
html[data-theme="dark"] body.is-public .releases-panel,
html[data-theme="dark"] body.is-public .release-row-featured,
html[data-theme="dark"] body.is-public .release-copy-btn,
html[data-theme="dark"] body.is-public .rss-copy-btn,
html[data-theme="dark"] body.is-public .global-search-suggestions,
html[data-theme="dark"] body.is-public .model-search-input,
html[data-theme="dark"] body.is-public .brand-item:hover,
html[data-theme="dark"] body.is-public .site-footer { background: var(--surface); }
html[data-theme="dark"] body.is-public .brand-text,
html[data-theme="dark"] body.is-public .footer-brand,
html[data-theme="dark"] body.is-public .release-version,
html[data-theme="dark"] body.is-public .release-row-fresh .release-version,
html[data-theme="dark"] body.is-public .plain-changelog-reading,
html[data-theme="dark"] body.is-public .plain-changelog-reading strong,
html[data-theme="dark"] body.is-public .release-more-btn:hover { color: var(--ink); }
html[data-theme="dark"] body.is-public .release-copy-btn:hover,
html[data-theme="dark"] body.is-public .rss-copy-btn:hover,
html[data-theme="dark"] body.is-public .release-copy-btn,
html[data-theme="dark"] body.is-public .rss-copy-btn { color: var(--ink-2); border-color: var(--hair); }
html[data-theme="dark"] body.is-public .home-popular-name,
html[data-theme="dark"] body.is-public .content-page-body,
html[data-theme="dark"] body.is-public .hero-subtitle,
html[data-theme="dark"] body.is-public .global-search-item,
html[data-theme="dark"] body.is-public .global-search-empty-title,
html[data-theme="dark"] body.is-public .global-search-popular-btn { color: var(--ink); }
html[data-theme="dark"] body.is-public .home-popular-date,
html[data-theme="dark"] body.is-public .home-popular-brand,
html[data-theme="dark"] body.is-public .home-popular-section-title,
html[data-theme="dark"] body.is-public .release-date,
html[data-theme="dark"] body.is-public .release-row.active .release-date,
html[data-theme="dark"] body.is-public .release-follow-link,
html[data-theme="dark"] body.is-public .simple-meta-row .meta-date,
html[data-theme="dark"] body.is-public .field-label,
html[data-theme="dark"] body.is-public .simple-page-eyebrow,
html[data-theme="dark"] body.is-public .global-search-correction,
html[data-theme="dark"] body.is-public .global-search-empty-copy,
html[data-theme="dark"] body.is-public .global-search-group-title,
html[data-theme="dark"] body.is-public .global-search-popular,
html[data-theme="dark"] body.is-public .global-search-subtitle,
html[data-theme="dark"] body.is-public .global-search-type { color: var(--ink-2); }
html[data-theme="dark"] body.is-public .changelog-line,
html[data-theme="dark"] body.is-public .changelog-line * { color: var(--ink-2); }
html[data-theme="dark"] body.is-public .site-version-dialog { border-color: var(--hair-strong); box-shadow: 0 12px 40px rgba(0,0,0,.6); }

/* popular-search chips (app.css gives them a light fill) */
html[data-theme="dark"] body.is-public .global-search-popular-btn { background: var(--rail); border-color: var(--hair-strong); color: var(--ink); }
html[data-theme="dark"] body.is-public .global-search-popular-btn:hover { background: var(--hover); border-color: var(--ink-3); }
html[data-theme="dark"] body.is-public .global-search-item.active { background: var(--hover); }
/* Samsung's mark is a wide wordmark: show it wide instead of squeezing it into the 18px square */
body.is-public .family-logo[src*="groups/samsung"] { width: 46px; height: auto; }

@media (max-width: 640px) {
  body.is-public .category-search-label { display: none; }
  body.is-public .category-search-toggle { width: 36px; padding: 0; margin-left: 2px; }
}

/* Follow model, now inside the Your version card */
body.is-public .vc-follow { display: inline-flex; align-items: center; gap: 8px; }

/* theme switch: a slow, lamp-like fade, only while the switch happens */
html.theme-fading body.is-public,
html.theme-fading body.is-public * {
  transition: background-color .7s ease, color .7s ease, border-color .7s ease, fill .7s ease, box-shadow .7s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-fading body.is-public, html.theme-fading body.is-public * { transition: none !important; }
}

/* ------------------------------------------------------------ content pages (About, Contact, Privacy, Cookies, Baykus) */
body.is-public .simple-page-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
body.is-public .page-chip {
  width: 30px; height: 30px; border-radius: 9px; background: var(--signal-soft); color: var(--signal);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
body.is-public .simple-page-title { font-size: 38px; line-height: 1.15; margin-top: 14px; }
body.is-public .page-rule {
  height: 2px; margin-top: 22px; max-width: 360px;
  background: linear-gradient(90deg, rgba(79, 157, 120, 0) 0, #9ccbb3 14%, #9ccbb3 86%, rgba(79, 157, 120, 0) 100%);
}
body.is-public .content-page-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin-top: 8px; }
body.is-public .content-page-body { padding: 0; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
body.is-public .content-page-body > p:first-child:not(.page-meta), body.is-public .content-page-body > .page-meta + p { font-size: 18px; line-height: 1.65; color: var(--ink); }
body.is-public .page-meta { font-family: var(--mono-ui); font-size: 12px; letter-spacing: .02em; color: var(--ink-3); margin: 0 0 14px; }
body.is-public .content-page-body p { margin: 0 0 16px; }
body.is-public .content-page-body h2 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 34px 0 10px; letter-spacing: -0.01em; }
body.is-public .content-page-body ul, body.is-public .content-page-body ol { padding-left: 20px; margin: 0 0 16px; }
body.is-public .content-page-body li { margin-bottom: 6px; padding-left: 4px; }
body.is-public .content-page-body li::marker { color: var(--signal); }
body.is-public .content-page-body strong { color: var(--ink); font-weight: 600; }
body.is-public .content-page-body a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(79, 157, 120, .45); }
body.is-public .content-page-body a:hover { text-decoration-color: var(--signal); }
body.is-public .mono-callout {
  font-family: var(--mono-ui); font-size: 13px; line-height: 1.6; color: var(--ink); background: var(--rail);
  border: 1px solid var(--hair); border-left: 3px solid var(--signal); border-radius: 8px; padding: 12px 14px; overflow-wrap: anywhere;
}
body.is-public .about-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 6px; }
body.is-public .about-card { background: var(--rail); border: 1px solid var(--hair); border-radius: 14px; padding: 18px 16px; }
body.is-public .about-card i { font-size: 20px; color: var(--signal); }
body.is-public .about-card h3 { font-size: 15px; font-weight: 600; margin: 10px 0 6px; color: var(--ink); }
body.is-public .about-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
body.is-public .about-block h2 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 34px 0 10px; }
body.is-public .about-block ul { padding-left: 20px; margin: 0; line-height: 1.7; color: var(--ink-2); }
body.is-public .about-block li::marker { color: var(--signal); }
body.is-public .about-block a { color: var(--signal); text-underline-offset: 3px; }
body.is-public .about-fine { font-size: 14px; color: var(--ink-3); margin: 0; }
body.is-public .contact-cta { margin: 26px 0 0; }
body.is-public .contact-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: var(--signal);
  color: var(--on-signal); font-size: 14px; font-weight: 600; text-decoration: none;
}
body.is-public .contact-btn:hover { filter: brightness(1.08); }
/* the page body styles its links green and underlined; a button inside it keeps its own colours */
body.is-public .content-page-body a.contact-btn { color: var(--on-signal); text-decoration: none; }
/* a small aside, deliberately quiet */
body.is-public .contact-note { display: flex; align-items: center; gap: 7px; margin: 40px 0 0; font-size: 13px; color: var(--ink-3); }
body.is-public .contact-note-cat { flex: none; opacity: .8; }
body.is-public .page-back { margin: 18px 0 0; font-size: 14px; }
body.is-public .page-back a { color: var(--ink-3); text-decoration: none; }
body.is-public .page-back a:hover { color: var(--signal); }
@media (max-width: 720px) {
  body.is-public .about-cards { grid-template-columns: 1fr; }
  body.is-public .simple-page-title { font-size: 28px; margin-top: 12px; }
  body.is-public .info-page-shell { padding: 24px 20px 16px; }
  body.is-public .page-rule { margin-top: 16px; }
  /* About cards: compact rows (icon left, text right) instead of three tall boxes */
  body.is-public .about-cards { gap: 10px; margin-top: 24px; }
  body.is-public .about-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding: 14px; }
  body.is-public .about-card i { grid-row: 1 / span 2; font-size: 18px; line-height: 1.3; }
  body.is-public .about-card h3 { margin: 0 0 2px; }
  /* long pages: sections separated by a hairline so they scan */
  body.is-public .content-page-body h2 { margin: 28px 0 10px; padding-top: 22px; border-top: 1px solid var(--hair); }
  body.is-public .content-page-body > h2:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }
  body.is-public .content-page-body { overflow-wrap: anywhere; }
  body.is-public .page-callout { padding: 16px 16px 4px; margin-top: 26px; }
  /* Contact: a full-width, thumb-sized button */
  body.is-public .contact-btn { display: flex; justify-content: center; width: 100%; min-height: 48px; box-sizing: border-box; padding: 12px 16px; overflow-wrap: anywhere; text-align: center; }
  body.is-public .page-back { margin-top: 10px; }
  body.is-public .page-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
}
body.is-public .content-page-body li { margin: 0 0 2px; line-height: 1.65; }

/* a highlighted panel inside a content page (Baykus: block it or get in touch) */
body.is-public .page-callout {
  margin: 34px 0 8px; padding: 22px 24px 8px; background: var(--rail); border: 1px solid var(--hair);
  border-left: 3px solid var(--signal); border-radius: 12px;
}
body.is-public .page-callout h2 { margin: 0 0 12px; font-size: 19px; }
body.is-public .page-callout p { font-size: 15px; color: var(--ink); }
body.is-public .page-chip-cat { display: block; }

/* Your version card: Notify on the left, Follow model + Copy on the right, one line */
body.is-public .vc-notify-row { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
body.is-public .vc-follow { margin-left: auto; flex: none; gap: 6px; }
body.is-public .vc-follow .release-follow-link { white-space: nowrap; font-size: 13px; }
@media (max-width: 300px) { body.is-public .vc-notify-row { flex-wrap: wrap; } }

/* copy confirmation: a green glow ring that expands and fades, colours easing back to neutral */
body.is-public .release-copy-btn, body.is-public .rss-copy-btn {
  transition: background-color .7s ease, border-color .7s ease, color .7s ease, box-shadow .7s ease;
}
body.is-public .release-copy-btn.copied, body.is-public .rss-copy-btn.copied {
  background: var(--signal-soft); border-color: var(--signal); color: var(--signal);
  transition-duration: .12s; animation: copy-glow .95s ease-out;
}
@keyframes copy-glow {
  0% { box-shadow: 0 0 0 0 rgba(63, 178, 127, .55); transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { box-shadow: 0 0 0 12px rgba(63, 178, 127, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-public .release-copy-btn.copied, body.is-public .rss-copy-btn.copied { animation: none; }
}
/* dark: warm chips */
html[data-theme="dark"] body.is-public .vc-chip.is-security { background: #2b2112; color: #e0a24f; }
html[data-theme="dark"] body.is-public .vc-soon,
html[data-theme="dark"] body.is-public .pop-gift { background: #2b2112; border-color: #5a3d17; color: #e0a24f; }
html[data-theme="dark"] body.is-public .release-copy-btn.copied,
html[data-theme="dark"] body.is-public .rss-copy-btn.copied { background: var(--signal-soft); border-color: var(--signal); color: var(--signal); }
body.is-public .vc-notify-row .vc-notify-btn { padding: 6px 11px; gap: 6px; }
body.is-public .vc-follow { gap: 4px; }

/* language switcher on the footer pages */
body.is-public .lang-switch { display: inline-flex; gap: 4px; padding: 3px; background: var(--rail); border: 1px solid var(--hair); border-radius: 999px; }
body.is-public .lang-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); text-decoration: none;
  transition: background .15s, color .15s;
}
body.is-public .lang-link img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); display: block; }
body.is-public .lang-link:hover { color: var(--ink); }
body.is-public .lang-link.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(20, 22, 25, .08); }
body.is-public .lang-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* language switch on the title line, right beside the title */

/* Your version card: Notify, Follow model and Copy on one line */
body.is-public .vc-notify-row .vc-notify-btn { padding: 6px 10px; gap: 6px; font-size: 12px; }
body.is-public .vc-follow { gap: 6px; }
body.is-public .vc-follow .release-follow-link { font-size: 12px; white-space: nowrap; }

/* copy confirmation pill above the button: "Copied RSS feed" */
body.is-public .release-copy-btn, body.is-public .rss-copy-btn, body.is-public .cl-tool { position: relative; }
body.is-public .copy-toast {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 5px 10px; border-radius: 999px; background: var(--signal); color: var(--on-signal); font-size: 12px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 6px 18px rgba(20, 22, 25, .18); animation: copy-toast 1.6s ease both; z-index: 5;
}
body.is-public .copy-toast.is-failed { background: #b42318; color: #fff; }
@keyframes copy-toast {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  14% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-public .copy-toast { animation: copy-toast-fade 1.6s linear both; }
  @keyframes copy-toast-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}

/* text pages carry the language flags too: on phones the version pill keeps only its icon so nothing overlaps */
@media (max-width: 480px) { body.is-public .topbar.has-lang .site-version-btn span { display: none; } }
/* very narrow phones: the flags need the room, the version stays one tap away on the home page */
@media (max-width: 400px) { body.is-public .topbar.has-lang .site-version-btn { display: none; } }
@media (max-width: 480px) { body.is-public .topbar-right .lang-link span { display: none; } body.is-public .topbar-right .lang-link { padding: 4px 7px; } }

/* dark: hover is a muted green wash (the light-theme tints are invisible on a dark surface) */
html[data-theme="dark"] body.is-public .category-pill:hover:not(.selected),
html[data-theme="dark"] body.is-public .activity-tab:hover:not(.is-active),
html[data-theme="dark"] body.is-public .global-search-item:hover { background: rgba(63, 178, 127, .10); color: var(--ink); }
html[data-theme="dark"] body.is-public .model-link:hover { background: rgba(63, 178, 127, .10); box-shadow: inset 2px 0 0 rgba(63, 178, 127, .55); }

/* "on this page": the headings of a long text page as quiet pills */
body.is-public .page-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
body.is-public .content-page-body .page-toc a {
  padding: 5px 12px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
body.is-public .content-page-body .page-toc a:hover { background: var(--signal-soft); border-color: var(--signal); color: var(--signal); }
body.is-public .content-page-body h2[id] { scroll-margin-top: 84px; }
body.is-public .content-page-body .page-meta + .about-cards, body.is-public .content-page-body > .about-cards { margin-top: 26px; }

/* changelog tools: text size (magnifier, then - and +) and copy, on the heading row */
body.is-public .cl-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
body.is-public .cl-head .simple-section-title { padding: 0; margin-right: auto; }
body.is-public .cl-tools { display: flex; align-items: center; gap: 4px; }
body.is-public .cl-tool {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--ink-3); font-size: 15px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
body.is-public .cl-tool:hover, body.is-public .cl-tool[aria-expanded="true"] { background: var(--signal-soft); color: var(--signal); border-color: var(--hair); }
body.is-public .cl-tool.is-copied { background: var(--signal-soft); color: var(--signal); border-color: var(--signal); }
body.is-public .cl-tool:focus-visible, body.is-public .cl-zoom button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
body.is-public .cl-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--hair-strong); border-radius: 999px; background: var(--surface); margin-right: 4px; }
body.is-public .cl-zoom[hidden] { display: none; }
body.is-public .cl-zoom button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
body.is-public .cl-zoom button:hover:not(:disabled) { background: var(--signal-soft); color: var(--signal); }
body.is-public .cl-zoom button:disabled { opacity: .35; cursor: default; }
body.is-public .cl-zoom .cl-zoom-reset { width: auto; border-radius: 999px; padding: 0 10px 0 6px; font: inherit; font-size: 12px; color: var(--ink-3); }
body.is-public .cl-zoom-value { min-width: 42px; text-align: center; font-family: var(--mono-ui); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { body.is-public .cl-head { flex-wrap: wrap; } body.is-public .cl-tools { width: 100%; justify-content: flex-end; } }

/* the Beta notice on the About page: a calm blue panel with a small blue tag, so it reads as information, not as a warning */
body.is-public .page-beta {
  --beta-bg: #eef4ff; --beta-bd: #c7d7fb; --beta-ink: #2b59c3;
  display: flex; gap: 14px; align-items: flex-start; margin: 30px 0 8px; padding: 16px 20px;
  background: var(--beta-bg); border: 1px solid var(--beta-bd); border-radius: 12px;
}
html[data-theme="dark"] body.is-public .page-beta { --beta-bg: #14203a; --beta-bd: #2c4378; --beta-ink: #8fb0f5; }
body.is-public .page-beta-tag {
  flex: none; margin-top: 2px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--beta-bd); background: var(--surface);
  color: var(--beta-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
}
body.is-public .page-beta p { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
body.is-public .page-beta p:last-child { margin-bottom: 0; }
body.is-public .page-beta a { color: var(--beta-ink); }
@media (max-width: 600px) { body.is-public .page-beta { flex-direction: column; gap: 8px; padding: 14px 16px; } }

/* phones, upright: the footer pages become big tiles, three to a row; on their side they sit in one row of five */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  body.is-public .site-footer-inner { flex-direction: column; align-items: stretch; }
  body.is-public .footer-nav-block { order: 1; }
  body.is-public .footer-brand-block { order: 2; margin-top: 22px; align-self: flex-start; }
  body.is-public .footer-nav-block { width: 100%; }
  body.is-public .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
  @media (min-width: 601px) { body.is-public .footer-links { grid-template-columns: repeat(5, 1fr); } }
  body.is-public .footer-links a {
    flex-direction: column; justify-content: center; gap: 6px; padding: 14px 4px; min-height: 76px; text-align: center;
    border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); font-size: 13px;
  }
  body.is-public .footer-links a i { font-size: 19px; color: var(--signal); }
}

/* footer: copyright under the logo block, "Powered by solar" centred at the very bottom (desktop and phone) */
body.is-public .site-footer-legal { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
/* copyright line, with the small credit underneath and the green globe at the end of it */
body.is-public .site-footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
body.is-public .footer-solar { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 10.5px; font-weight: 600; }
body.is-public .footer-solar i { font-size: 12px; color: var(--signal); line-height: 1; }

/* latest release band: the newest five take turns, one fading into the next (same look as a single band) */
body.is-public .home-utility-rotator { display: grid; }
body.is-public .home-utility-rotator > .home-utility-bar { grid-area: 1 / 1; }
body.is-public .home-utility-rotator.is-rotating > .home-utility-bar {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
body.is-public .home-utility-rotator.is-rotating > .home-utility-bar.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 1.2s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  body.is-public .home-utility-rotator.is-rotating > .home-utility-bar { transition: none; }
}

/* search: a close button and recent searches exist for the phone sheet only */
body.is-public .global-search-close { display: none; }
body.is-public .global-search-recent-head { display: flex; justify-content: space-between; align-items: center; }
body.is-public .global-search-clear { border: 0; background: none; color: var(--signal); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 4px; }
body.is-public .global-search-recent {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
body.is-public .global-search-recent i { color: var(--ink-3); }
body.is-public .global-search-recent:hover, body.is-public .global-search-recent:focus-visible { background: var(--rail); }

/* phones and tablets: search opens as a sheet over the page (grab bar, 44px field, 48px rows), the page behind stays put */
@media (max-width: 900px) {
  body.search-sheet-open { overflow: hidden; }
  body.is-public .global-search-panel:not([hidden]) {
    position: fixed; inset: 0; z-index: 80; display: block; padding: 0; border: 0; background: rgba(8, 10, 12, .45);
  }
  body.is-public .global-search-panel .global-search-box {
    position: absolute; left: 0; right: 0; bottom: 0; top: 64px; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
    padding: 26px 16px max(20px, env(safe-area-inset-bottom));
  }
  body.is-public .global-search-panel .global-search-box::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--hair-strong, #c9ccd0);
  }
  body.is-public .global-search-close {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 14px; right: 6px; width: 44px; height: 44px;
    border: 0; background: none; color: var(--ink-3); font-size: 16px; cursor: pointer; z-index: 2;
  }
  body.is-public .global-search-panel .search-input { height: 44px; border-radius: 12px; padding-right: 48px; }
  body.is-public .global-search-suggestions {
    position: static; display: none; margin-top: 10px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; max-height: none;
  }
  body.is-public .global-search-suggestions.visible { display: block; }
  body.is-public .global-search-item { min-height: 48px; border-radius: 10px; }
}

/* changelog on a phone (upright or sideways): chips scroll sideways on one line, the list folds after six lines behind "Show all N changes" */
body.is-public .changelog-toggle-wrap.is-phone-only { display: none; }
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  body.is-public .cl-summary { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-bottom: 2px; }
  body.is-public .cl-summary::-webkit-scrollbar { display: none; }
  body.is-public .cl-chip { flex: none; min-height: 36px; }
  body.is-public .changelog-line.is-phone-extra { display: none; }
  body.is-public .plain-changelog-reading.is-expanded .changelog-line.is-phone-extra { display: list-item; }
  body.is-public .changelog-toggle-wrap.is-phone-only { display: flex; }
  body.is-public .changelog-toggle-wrap { padding: 0; margin-top: 12px; }
  body.is-public .changelog-toggle-btn { width: 100%; min-height: 46px; text-align: center; border: 1px solid var(--hair); border-radius: 12px; }
}