/*
 * Hearth Record's shared tokens: the roles every look fills in with its own values.
 *
 * Ink and paper carry everything. The ember is the role for facts that need attention, and each look
 * gives it its own colour. Nothing is ever colored "safe". Every look is light only.
 */

:root {
  color-scheme: light;

  /* Day. Contrast against paper in the comments. */
  --paper: #fbfbf9;                    /* the page */
  --surface: #ffffff;                  /* what floats: the search panel, cards, the toast */
  --sunken: #f2f1ec;                   /* quiet ground: the provider's area, fields */
  --ink: #17130f;                      /* text and headings: 17.8:1 */
  --ink-2: #4d463f;                    /* secondary text and sources: 9.0:1 */
  --ink-3: #6b625a;                    /* the quietest text allowed: 5.8:1 */
  --line: rgb(23 19 15 / 0.09);        /* dividers that carry meaning */
  --line-2: rgb(23 19 15 / 0.16);      /* borders on controls */
  --hover: rgb(23 19 15 / 0.045);      /* the glide under a pointer */
  --press: rgb(23 19 15 / 0.08);

  --ember: #ff5a1f;                    /* the hearth: fills and glows, never small text */
  --ember-ink: #b4380a;                /* ember as text: 5.8:1 */
  --ember-wash: #fbe8df;               /* behind a flag: ink on it is 15.6:1 */
  --ember-mark: rgb(255 90 31 / 0.26); /* the marker stroke under a fact that needs attention */
  --ember-glow: rgb(255 90 31 / 0.16);

  --error: #b42318;                    /* interface errors only, never the record: 6.4:1 */

  --shadow-1: 0 1px 2px rgb(23 19 15 / 0.05), 0 1px 1px rgb(23 19 15 / 0.03);
  --shadow-2: 0 1px 2px rgb(23 19 15 / 0.05), 0 8px 24px -10px rgb(23 19 15 / 0.16);
  --shadow-3: 0 2px 4px rgb(23 19 15 / 0.04), 0 18px 48px -16px rgb(23 19 15 / 0.24), 0 48px 96px -40px rgb(23 19 15 / 0.22);
  --backdrop: rgb(23 19 15 / 0.3);
  --glass: rgb(251 251 249 / 0.74);

  /* Type. Each look sets one family for all three roles. */
  --font-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-text);
  --font-mono: var(--font-text);
  --display-weight: 600;

  /* The one primary action per screen, and the text on it. Each look sets its own. */
  --accent: var(--ink);
  --on-accent: var(--paper);

  --step--2: 0.75rem;                                   /* 12: keyboard hints */
  --step--1: 0.875rem;                                  /* 14: sources, notes */
  --step-0: 1.0625rem;                                  /* 17: reading text */
  --step-1: 1.1875rem;                                  /* 19: leads */
  --step-2: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);     /* card names, small headings */
  --step-3: clamp(1.5rem, 1.25rem + 1vw, 2rem);         /* a record's questions, section heads */
  --step-4: clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem);  /* a record's name, page titles */
  --step-5: clamp(2.125rem, 1.45rem + 2.7vw, 3.5rem);   /* the home page's one line */
  --fig: clamp(2rem, 1.6rem + 1.5vw, 3rem);             /* big figures */

  --leading-tight: 1.06;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --track-display: -0.012em;

  /* Space, on a 4px grid. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 76rem;
  --measure: 42rem;
  --nav-h: 4rem;

  /* Radius by rank: the bigger the thing, the softer its corner. */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 20px;
  --r-4: 28px;
  --r-pill: 999px;

  /* Motion. Cubic-bezier first, so browsers without linear() still ease. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --spring: var(--ease-out);
  --spring-snappy: var(--ease-out);
  --spring-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-1: 120ms;
  --t-2: 220ms;
  --t-3: 420ms;
  --t-4: 700ms;
  --t-5: 1100ms;
  --t-spring: 640ms;
  --t-snappy: 430ms;
  --t-bouncy: 770ms;
  --stagger: 70ms;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* Damped springs, sampled. Soft settles in 640ms without a visible overshoot, snappy in 430ms; bouncy overshoots 16%. */
    --spring: linear(0, 0.024, 0.083, 0.164, 0.256, 0.351, 0.445, 0.532, 0.612, 0.684, 0.746, 0.799, 0.844, 0.882, 0.912, 0.937, 0.956, 0.971, 0.982, 0.991, 0.997, 1.001, 1.004, 1.006, 1.007, 1.007, 1.007, 1.007, 1.006, 1.005, 1.005, 1.004, 1.003, 1.003, 1.002, 1.002, 1);
    --spring-snappy: linear(0, 0.02, 0.073, 0.148, 0.235, 0.329, 0.424, 0.516, 0.602, 0.681, 0.751, 0.812, 0.864, 0.908, 0.943, 0.972, 0.994, 1.01, 1.021, 1.029, 1.034, 1.036, 1.036, 1.035, 1.032, 1.029, 1.026, 1.023, 1.019, 1.016, 1.013, 1.01, 1.008, 1.006, 1.004, 1.003, 1);
    --spring-bouncy: linear(0, 0.053, 0.186, 0.362, 0.551, 0.73, 0.884, 1.005, 1.09, 1.142, 1.164, 1.163, 1.146, 1.12, 1.089, 1.058, 1.03, 1.008, 0.991, 0.98, 0.974, 0.972, 0.974, 0.978, 0.983, 0.988, 0.993, 0.997, 1, 1.003, 1.004, 1.005, 1.004, 1.004, 1.003, 1.002, 1);
  }
}

/* Night: the hearth in the dark. The ember glows more, never louder. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #100e0c;
  --surface: #1a1714;
  --sunken: #0a0907;
  --ink: #ece6df;                      /* 15.6:1, a little softer than white on the dark */
  --ink-2: #bdb3a8;                    /* 9.3:1 */
  --ink-3: #958b80;                    /* 5.8:1 */
  --line: rgb(243 238 232 / 0.09);
  --line-2: rgb(243 238 232 / 0.17);
  --hover: rgb(243 238 232 / 0.05);
  --press: rgb(243 238 232 / 0.09);
  --ember: #ff6b2c;
  --ember-ink: #ff956a;                /* 9.0:1 */
  --ember-wash: #361d11;               /* ink on it: 13.6:1 */
  --ember-mark: rgb(255 107 44 / 0.36);
  --ember-glow: rgb(255 107 44 / 0.24);
  --error: #ff8a7a;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px -10px rgb(0 0 0 / 0.6);
  --shadow-3: 0 0 0 1px rgb(243 238 232 / 0.06), 0 24px 64px -16px rgb(0 0 0 / 0.75);
  --backdrop: rgb(5 4 3 / 0.62);
  --glass: rgb(16 14 12 / 0.72);
}

/* Element defaults: type, links, focus, page transitions, and the reveal every section shares. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
  background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-body);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* A word longer than its line (an address on the web, a file's name, "Children/Adolescents,") breaks where it
     meets the line's end, so no page is wider than its screen. */
  overflow-wrap: break-word;
  overflow-x: clip;
  transition: background-color var(--t-3) var(--ease-out), color var(--t-3) var(--ease-out);
}

main {
  flex: 1;
}

main:focus {
  outline: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--leading-snug);
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--step-0);
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

p,
li,
dd {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

strong,
b {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.07em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out);
}

@media (hover: hover) {
  a:hover {
    text-decoration-color: currentColor;
  }
}

abbr[title] {
  text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.2em;
  cursor: help;
}

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 460;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.35em;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--ember-mark);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 6px;
}

/* An icon sits on the text's baseline and takes its color. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

/* ---------- Layout ---------- */

.page {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose > * + * {
  margin-top: var(--s-4);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.008em;
}

.note {
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.55;
}

.sub {
  display: block;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 400;
}

.nowrap {
  white-space: nowrap;
}

.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-snappy) var(--spring-snappy);
}

.skip:focus {
  transform: none;
}

/* ---------- Arrivals ---------- */

/*
 * Anything marked data-reveal rises in once, as it scrolls into view, staggered with its neighbours
 * (the script sets --i). Hidden only once the head script has said JavaScript runs; if the main script
 * then never arrives, everything shows after 2.5s anyway.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise, 22px));
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-4) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    transform var(--t-5) var(--spring) calc(var(--i, 0) * var(--stagger));
}

.js:not(.ready) [data-reveal] {
  animation: failsafe 1ms 2.5s forwards;
}

@keyframes failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

/* What is there at first paint arrives in order, without waiting for any script. */
.arrive {
  animation: arrive var(--t-4) var(--ease-out) both;
  animation-delay: calc(60ms + var(--i, 0) * 60ms);
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ---------- Page to page ---------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-leave 240ms var(--ease-in) both;
}

::view-transition-new(root) {
  animation: vt-enter 560ms var(--ease-out) both;
}

::view-transition-group(*) {
  animation-duration: var(--t-spring);
  animation-timing-function: var(--spring);
}

::view-transition-group(record-title) {
  animation-duration: 720ms;
}

@keyframes vt-leave {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes vt-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* A theme change is revealed by a circle from the switch; nothing else moves while it happens. */
html.theme-shift * {
  view-transition-name: none !important;
}

html.theme-shift body,
html.theme-shift *,
html.theme-shift *::before,
html.theme-shift *::after {
  transition: none !important;
}

html.theme-shift::view-transition-old(root),
html.theme-shift::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.theme-shift::view-transition-old(root) {
  z-index: 1;
}

html.theme-shift::view-transition-new(root) {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* The pieces every page is built from: the bar, search, buttons, the record and its parts. */

/* ---------- The bar ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  view-transition-name: site-nav;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  opacity: 0;
  transition: opacity var(--t-3) var(--ease-out);
}

.nav.is-scrolled::before {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .nav::before {
    transition: none;
    animation: glass-in linear both;
    animation-timeline: scroll(root);
    animation-range: 0 72px;
  }
}

@keyframes glass-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.nav__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
}

.mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  overflow: visible;
}

.mark__arch {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The ember breathes: slowly, and only by scale and light, so it costs the page nothing. */
.mark__ember {
  fill: var(--ember);
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: breathe 4.2s var(--ease-in-out) infinite;
}

.mark__glow {
  fill: var(--ember);
  opacity: 0.28;
  filter: blur(2.5px);
  transform-box: fill-box;
  transform-origin: 50% 80%;
  animation: glow 4.2s var(--ease-in-out) infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12, 1.16);
  }
}

@keyframes glow {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(1);
  }

  50% {
    opacity: 0.42;
    transform: scale(1.5);
  }
}

@media (hover: hover) {
  .brand:hover .mark__ember {
    animation-duration: 1.4s;
  }
}

.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 2.5rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 520;
  text-decoration: none;
  transition: color var(--t-2) var(--ease-out);
}

.nav__link[aria-current="page"] {
  color: var(--ink);
}

@media (hover: hover) {
  .nav__link:hover {
    color: var(--ink);
  }
}

.nav__link > * {
  position: relative;
  z-index: 1;
}

.nav__link .icon {
  display: none;
}

/* The page you are on sits on a pill that glides from link to link as you move between pages. */
.nav__pill {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  border-radius: inherit;
  background: var(--press);
  view-transition-name: nav-pill;
}

.nav__link--search {
  display: none;
}

/* One soft pill follows the pointer across a row of links (see glide in the script). */
.glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--gw, 0);
  height: var(--gh, 0);
  border-radius: var(--r-pill);
  background: var(--hover);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--gx, 0), var(--gy, 0));
  transition:
    opacity var(--t-2) var(--ease-out),
    transform var(--t-spring) var(--spring),
    width var(--t-spring) var(--spring),
    height var(--t-spring) var(--spring);
}

.glide.is-on {
  opacity: 1;
}

.glide.is-fresh {
  transition: opacity var(--t-2) var(--ease-out);
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.badge:empty {
  display: none;
}

.badge.is-bump {
  animation: bump var(--t-bouncy) var(--spring-bouncy);
}

@keyframes bump {
  0% {
    transform: scale(0.6);
  }

  100% {
    transform: scale(1);
  }
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 2.5rem;
  padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.9375rem;
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--t-2) var(--ease-out),
    color var(--t-2) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy),
    box-shadow var(--t-3) var(--ease-out);
}

@media (hover: hover) {
  .search-trigger:hover {
    border-color: color-mix(in srgb, var(--ink) 28%, transparent);
    color: var(--ink);
    box-shadow: var(--shadow-2);
  }
}

.search-trigger:active {
  transform: scale(0.97);
}

.search-trigger__text {
  min-width: 7.5rem;
  text-align: left;
}

.search-trigger kbd + kbd {
  margin-left: -0.3rem;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  transition:
    background-color var(--t-2) var(--ease-out),
    color var(--t-2) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .icon-btn:hover {
    background: var(--hover);
    color: var(--ink);
  }
}

.icon-btn:active {
  transform: scale(0.92);
}

/* Sun and moon are one drawing: the moon's shadow slides in, the rays fold away. */
.theme-icon {
  width: 1.25rem;
  height: 1.25rem;
  overflow: visible;
}

.theme-icon__disc {
  fill: currentColor;
  transform-origin: 12px 12px;
  transition: transform var(--t-bouncy) var(--spring-bouncy);
}

.theme-icon__shade {
  transform: translate(8px, -8px);
  transition: transform var(--t-bouncy) var(--spring);
}

.theme-icon__rays {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: center;
  transition: transform var(--t-bouncy) var(--spring-bouncy), opacity var(--t-2) var(--ease-out);
}

[data-theme="dark"] .theme-icon__disc {
  transform: scale(1.45);
}

[data-theme="dark"] .theme-icon__shade {
  transform: translate(0, 0);
}

[data-theme="dark"] .theme-icon__rays {
  opacity: 0;
  transform: rotate(-60deg) scale(0.5);
}

/* Reading progress on a record: a hairline of ember that fills as you read. */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  .progress {
    opacity: 1;
    animation: progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes progress {
  to {
    transform: scaleX(1);
  }
}

@media (max-width: 720px) {
  .nav__links {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    justify-content: space-around;
    gap: 0;
    padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    view-transition-name: tab-bar;
  }

  .nav__link {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    height: 3.5rem;
    padding: 0;
    border-radius: var(--r-3);
    font-size: 0.75rem;
  }

  .nav__link .icon {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
  }

  .nav__link--search {
    display: inline-flex;
  }

  .nav__link .badge {
    position: absolute;
    top: 0.3rem;
    left: calc(50% + 0.35rem);
    min-width: 1.1rem;
    height: 1.1rem;
    font-size: 0.6875rem;
  }

  .search-trigger {
    display: none;
  }

  .glide {
    display: none;
  }

  body {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition:
    background-color var(--t-2) var(--ease-out),
    border-color var(--t-2) var(--ease-out),
    color var(--t-2) var(--ease-out),
    box-shadow var(--t-3) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .btn:hover {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
  }
}

.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-1);
  transition-duration: var(--t-1);
}

.btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

@media (hover: hover) {
  .btn--primary:hover {
    border-color: var(--accent);
  }
}

.btn--quiet {
  border-color: transparent;
  background: none;
  box-shadow: none;
}

@media (hover: hover) {
  .btn--quiet:hover {
    border-color: transparent;
    background: var(--hover);
    box-shadow: none;
    transform: none;
  }
}

.btn--small {
  min-height: 2.25rem;
  padding: 0 var(--s-4);
  font-size: 0.875rem;
}

.btn .icon {
  transition: transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .btn:hover .icon--arrow {
    transform: translateX(3px);
  }
}

/* ---------- Search ---------- */

.field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 3.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  view-transition-name: search-field;
  transition:
    border-color var(--t-3) var(--ease-out),
    box-shadow var(--t-3) var(--ease-out),
    transform var(--t-spring) var(--spring);
}

.field:focus-within {
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line-2));
  box-shadow: 0 0 0 4px var(--ember-glow), var(--shadow-3);
}

.field__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  flex: none;
  color: var(--ink-3);
}

.field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  outline: none;
}

.field__input::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.field__go {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: 0.375rem;
  flex: none;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  transition: transform var(--t-snappy) var(--spring-snappy), background-color var(--t-2) var(--ease-out);
}

@media (hover: hover) {
  .field__go:hover {
    transform: scale(1.06);
  }
}

.field__go:active {
  transform: scale(0.94);
}

.field__go .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.field-error {
  margin-top: var(--s-3);
  color: var(--error);
  font-size: var(--step--1);
  font-weight: 520;
}

.field-error[hidden] {
  display: none;
}

/* The palette: ⌘K from anywhere. A native dialog, so focus and Escape behave. */
.palette {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100svh - 6rem));
  margin: 12svh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition:
    opacity var(--t-2) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy),
    overlay var(--t-2) allow-discrete,
    display var(--t-2) allow-discrete;
}

.palette[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

@starting-style {
  .palette[open] {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

.palette::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition:
    opacity var(--t-3) var(--ease-out),
    overlay var(--t-3) allow-discrete,
    display var(--t-3) allow-discrete;
}

.palette[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .palette[open]::backdrop {
    opacity: 0;
  }
}

.palette__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4) 0 var(--s-5);
  border-bottom: 1px solid var(--line);
}

.palette__bar .icon {
  color: var(--ink-3);
}

.palette__input {
  flex: 1;
  min-width: 0;
  height: 3.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--step-1);
  outline: none;
}

.palette__input::placeholder {
  color: var(--ink-3);
}

.palette__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.palette__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-2);
}

.palette__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--step--2);
}

.palette__foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Results, in the palette, under the home search and on the search page. */
.hits {
  position: relative;
}

.hits__group + .hits__group {
  margin-top: var(--s-3);
}

.hits__label {
  padding: var(--s-2) var(--s-3) var(--s-1);
  color: var(--ink-3);
  font-size: var(--step--1);
  font-weight: 560;
}

.hits__label span {
  font-weight: 400;
}

.hit {
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  color: inherit;
  text-decoration: none;
  animation: hit-in var(--t-3) var(--ease-out) both;
  animation-delay: calc(min(var(--i), 10) * 28ms);
}

/* A result that was already showing before the last keystroke stays still; only new ones arrive. */
.hit.is-kept {
  animation: none;
}

@keyframes hit-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.hit__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-2);
  background: var(--sunken);
  color: var(--ink-2);
  transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

.hit__name {
  display: block;
  overflow: hidden;
  font-weight: 560;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit__name mark {
  border-radius: 3px;
  background: none;
  color: inherit;
  text-decoration: underline 2px var(--ember);
  text-underline-offset: 0.2em;
}

.hit__where,
.hit__facts {
  display: block;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit__facts {
  color: var(--ink-3);
}

.hit__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 14rem;
  color: var(--ember-ink);
  font-size: var(--step--2);
  font-weight: 560;
  line-height: 1.3;
}

.hit__flag::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-glow);
}

.hit__text {
  min-width: 0;
}

.hit__end {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.hit__go {
  color: var(--ink-3);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

.hit.is-active {
  background: var(--hover);
}

@media (hover: hover) {
  .hit:hover {
    background: var(--hover);
  }
}

.hit.is-active .hit__icon {
  background: var(--ink);
  color: var(--paper);
  transform: scale(1.04);
}

@media (hover: hover) {
  .hit:hover .hit__icon {
    background: var(--ink);
    color: var(--paper);
    transform: scale(1.04);
  }
}

.hit.is-active .hit__go {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .hit:hover .hit__go {
    opacity: 1;
    transform: none;
  }
}

.suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-4);
}

.suggest .chip {
  height: 2.25rem;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .suggest .chip:hover {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
    background: var(--hover);
  }
}

.suggest .chip:active {
  transform: scale(0.95);
}

.hits__empty {
  padding: var(--s-6) var(--s-4);
  color: var(--ink-2);
  text-align: center;
}

.hits__empty strong {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--ink);
  font-size: var(--step-1);
}

.hits__more {
  display: block;
  margin: var(--s-2) var(--s-3) var(--s-1);
  color: var(--ink-2);
  font-size: var(--step--1);
}

@media (max-width: 600px) {
  .hit {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .hit__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .hit__end {
    grid-column: 2;
  }

  .hit__end:not(:has(.hit__flag)) {
    display: none;
  }

  .hit__go {
    display: none;
  }

  .palette {
    margin-top: var(--s-4);
    max-height: calc(100svh - 2rem);
  }
}

/* ---------- Toasts ---------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  width: min(28rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  animation: toast-in var(--t-spring) var(--spring) both;
}

.toast.is-out {
  animation: toast-out var(--t-3) var(--ease-in) both;
}

.toast__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 4px rgb(255 90 31 / 0.25);
}

.toast__text {
  flex: 1;
  min-width: 0;
  padding-block: var(--s-1);
  line-height: 1.35;
}

.toast button {
  flex: none;
  height: 2rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 16%, transparent);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .toast button:hover {
    background: color-mix(in srgb, var(--paper) 26%, transparent);
  }
}

.toast button:active {
  transform: scale(0.95);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

@media (max-width: 720px) {
  .toasts {
    bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}

/* ---------- The record's header ---------- */

.rh {
  position: relative;
  padding-top: clamp(var(--s-6), 5vw, var(--s-8));
  padding-bottom: var(--s-6);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
}

@media (hover: hover) {
  .crumbs a:hover {
    color: var(--ink);
  }
}

.crumbs .icon--chevron {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--ink-3);
}

.crumbs__kind {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-1);
  background: var(--sunken);
  color: var(--ink);
}

.crumbs__kind .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.rh__title {
  max-width: 22ch;
  margin-top: var(--s-5);
  font-size: var(--step-4);
  view-transition-name: record-title;
}

.rh__where {
  max-width: var(--measure);
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.45;
}

.rh__address {
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.rh__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

.rh__official {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
}

/* A button that reads as a quiet link: the guide, "Clear all". */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 540;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: color var(--t-2) var(--ease-out), text-decoration-color var(--t-2) var(--ease-out);
}

@media (hover: hover) {
  .link-btn:hover {
    color: var(--ink);
    text-decoration-color: currentColor;
  }
}

.link-btn .icon {
  width: 1rem;
  height: 1rem;
}

/* Flags: what the agency itself flagged, on the ember. */
.flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2rem;
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--ember-wash);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 540;
  line-height: 1.3;
}

.flag::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--ember);
  animation: ember-pulse 2.8s var(--ease-in-out) infinite;
}

@keyframes ember-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--ember-glow);
  }

  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}

/* ---------- Identifiers and copying ---------- */

.idents {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ident {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-1) 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--step--1);
}

.ident__label {
  color: var(--ink-2);
}

.ident code {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.copy {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .copy:hover {
    background: var(--hover);
    color: var(--ink);
  }
}

.copy:active {
  transform: scale(0.9);
}

.copy .icon {
  grid-area: 1 / 1;
  width: 1.05rem;
  height: 1.05rem;
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-bouncy) var(--spring-bouncy);
}

.copy .icon--check {
  opacity: 0;
  transform: scale(0.4) rotate(-20deg);
  stroke-width: 2.2;
}

.copy.is-done .icon--copy {
  opacity: 0;
  transform: scale(0.4);
}

.copy.is-done .icon--check {
  opacity: 1;
  transform: none;
}

.copy__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-1);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 560;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) scale(0.9);
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

.copy.is-done .copy__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Watch ---------- */

.watch {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.watch__note {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.watch-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: 0 var(--s-5) 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 580;
  box-shadow: var(--shadow-1);
  transition:
    background-color var(--t-3) var(--ease-out),
    border-color var(--t-3) var(--ease-out),
    color var(--t-3) var(--ease-out),
    box-shadow var(--t-3) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .watch-btn:hover {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
    box-shadow: var(--shadow-2);
  }
}

.watch-btn:active {
  transform: scale(0.96);
}

.watch-btn[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.watch-btn__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
}

.watch-btn__icon .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.watch-btn__icon .icon circle {
  transition: fill var(--t-3) var(--ease-out), stroke var(--t-3) var(--ease-out);
}

.watch-btn[aria-pressed="true"] .watch-btn__icon .icon circle {
  fill: var(--ember);
  stroke: var(--ember);
}

.watch-btn.is-pop .watch-btn__icon {
  animation: pop var(--t-bouncy) var(--spring-bouncy);
}

@keyframes pop {
  0% {
    transform: scale(0.55);
  }

  100% {
    transform: scale(1);
  }
}

/* Eight sparks from the ember when something is first watched: one element, its shadows scaled outward. */
.burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 -15px 0 var(--ember), 10.6px -10.6px 0 var(--ember), 15px 0 0 var(--ember), 10.6px 10.6px 0 var(--ember),
    0 15px 0 var(--ember), -10.6px 10.6px 0 var(--ember), -15px 0 0 var(--ember), -10.6px -10.6px 0 var(--ember);
}

.watch-btn.is-pop .burst {
  animation: burst 620ms var(--ease-out) both;
}

@keyframes burst {
  0% {
    opacity: 1;
    transform: scale(0.35);
  }

  70% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

/* ---------- At a glance ---------- */

.glance {
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}

.glance__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-2);
}

@media (max-width: 600px) {
  .glance__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile__link {
    padding: var(--s-4);
  }

  .tile__label {
    font-size: var(--step--1);
  }

  .tile__go {
    display: none;
  }
}

.tile {
  --i: 0;
  min-width: 0;
}

.tile__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--t-3) var(--ease-out),
    box-shadow var(--t-3) var(--ease-out),
    transform var(--t-spring) var(--spring);
}

@media (hover: hover) {
  .tile__link:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
  }
}

.tile__value {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fig);
  letter-spacing: -0.04em;
  line-height: 1;
}

.tile__value--words {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.tile__unit {
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.tile__label {
  margin-top: var(--s-3);
  font-weight: 540;
  line-height: 1.35;
}

.tile__base {
  margin-top: auto;
  padding-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.tile__go {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  color: var(--ink-3);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .tile__link:hover .tile__go {
    opacity: 1;
    transform: none;
  }
}

.tile--attention .tile__value {
  color: var(--ember-ink);
}

.tile--attention .tile__link {
  border-color: color-mix(in srgb, var(--ember) 30%, var(--line));
  background:
    radial-gradient(120% 90% at 0% 0%, var(--ember-glow), transparent 60%),
    var(--surface);
}

.glance__note {
  margin-top: var(--s-4);
}


/* ---------- The record's body: a contents rail, then the questions ---------- */

.record-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  padding-top: var(--s-5);
}

@media (min-width: 1100px) {
  .record-body {
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: var(--s-7);
  }
}

.toc {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  align-self: start;
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-2) var(--gutter);
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}

.toc ul {
  position: relative;
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.toc ul::-webkit-scrollbar {
  display: none;
}

.toc a {
  position: relative;
  z-index: 1;
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 520;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-2) var(--ease-out);
}

.toc a.is-active {
  color: var(--ink);
}

@media (hover: hover) {
  .toc a:hover {
    color: var(--ink);
  }
}

.toc__ind {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--tw, 0);
  height: var(--th, 0);
  border-radius: var(--r-pill);
  background: var(--press);
  opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition:
    transform var(--t-spring) var(--spring),
    width var(--t-spring) var(--spring),
    height var(--t-spring) var(--spring),
    opacity var(--t-2) var(--ease-out);
}

.toc.is-live .toc__ind {
  opacity: 1;
}

@media (min-width: 1100px) {
  .toc {
    top: calc(var(--nav-h) + var(--s-6));
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .toc ul {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-left: var(--s-4);
    border-left: 1px solid var(--line);
  }

  .toc a {
    padding: 0.45rem 0;
    border-radius: 0;
  }

  .toc__ind {
    left: -1px;
    width: 2px;
    border-radius: 2px;
    background: var(--ink);
    transform: translateY(var(--ty, 0));
  }
}

/* ---------- Questions and rows ---------- */

.q {
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

.record-body__main > .q:first-child {
  border-top: 0;
  padding-top: var(--s-4);
  content-visibility: visible;
}

.q > h2 {
  max-width: 24ch;
  margin-bottom: var(--s-6);
}

.q__intro {
  max-width: var(--measure);
  margin: calc(-1 * var(--s-4)) 0 var(--s-6);
  color: var(--ink-2);
}

.row {
  display: grid;
  gap: var(--s-3);
}

.row + .row,
.row + .findings,
.findings + .row,
.table-wrap + .row,
.row + .table-wrap,
.more + .row,
.row + .more,
.findings + .more,
.more + .more,
.table-wrap + .more {
  margin-top: var(--s-6);
}

.row__body {
  min-width: 0;
  max-width: var(--measure);
}

.row__body > h3 + .note,
.row__body > h3 + p {
  margin-top: var(--s-2);
}

.row--quiet .row__body {
  color: var(--ink-2);
}

@media (min-width: 1000px) {
  .row {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--s-7);
  }
}

/* A fact's source: publisher, dataset, date, schedule. Darkens when you read the fact it belongs to. */
.src {
  align-self: start;
  padding-left: var(--s-4);
  border-left: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.5;
  transition: color var(--t-3) var(--ease-out), border-color var(--t-3) var(--ease-out);
}

.src p + p {
  margin-top: var(--s-2);
}

.src a {
  color: inherit;
}

@media (hover: hover) {
  .row:hover > .src {
    border-color: var(--ink-3);
    color: var(--ink);
  }
}

@media (max-width: 999px) {
  .src {
    margin-top: var(--s-1);
  }
}

.said {
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure);
}

.said li {
  position: relative;
  padding-left: var(--s-5);
}

.said li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0.15rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ink-3);
}

/* The ember marker under a fact that needs attention. It draws itself in as the fact arrives. */
.hl {
  padding: 0 0.08em;
  background-color: transparent;
  background-image: linear-gradient(var(--ember-mark), var(--ember-mark));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.5em;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 900ms var(--ease-out) 260ms;
}

.js [data-reveal]:not(.is-in) .hl {
  background-size: 0% 0.5em;
}

.attention {
  margin-top: var(--s-4);
  max-width: var(--measure);
}

/* A big figure, never alone: its baseline, its bars and its date come with it. */
.fig__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
}

.fig__num {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fig);
  letter-spacing: -0.04em;
  line-height: 1;
}

.fig__label {
  max-width: 26ch;
  font-size: var(--step-1);
  font-weight: 540;
  line-height: 1.3;
}

.fig__base {
  margin-top: var(--s-3);
  color: var(--ink-2);
}

.fig__when {
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.bars {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  max-width: 34rem;
  margin-top: var(--s-5);
  font-size: var(--step--1);
}

.bar {
  display: contents;
}

.bar__track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--sunken);
}

.bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(var(--v, 0));
  transform-origin: 0 50%;
  transition: transform 1200ms var(--ease-out) calc(200ms + var(--d, 0ms));
}

.bar--base .bar__fill {
  background: var(--ink-3);
}

.js [data-reveal]:not(.is-in) .bar__fill {
  transform: scaleX(0);
}

.bar__text {
  color: var(--ink-2);
}

.bar__text strong {
  color: var(--ink);
}

/* ---------- Findings ---------- */

.findings {
  display: grid;
  gap: var(--s-3);
}

.findings > details,
.more {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  transition: border-color var(--t-3) var(--ease-out), box-shadow var(--t-3) var(--ease-out);
}

@media (hover: hover) {
  .findings > details:hover,
  .more:hover {
    border-color: var(--line-2);
  }
}

.findings > details[open] {
  box-shadow: var(--shadow-2);
}

.findings > details > summary,
.more > summary,
.quote-more > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-4) 3.5rem var(--s-4) var(--s-5);
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-2) var(--ease-out);
}

.findings > details > summary::-webkit-details-marker,
.more > summary::-webkit-details-marker,
.quote-more > summary::-webkit-details-marker {
  display: none;
}

.findings > details > summary::after,
.more > summary::after,
.quote-more > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s-5);
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.4rem;
  border-right: 1.6px solid var(--ink-2);
  border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform var(--t-snappy) var(--spring-snappy);
}

.findings > details[open] > summary::after,
.more[open] > summary::after,
.quote-more[open] > summary::after {
  transform: translateY(4px) rotate(225deg);
}

@media (hover: hover) {
  .findings > details > summary:hover,
  .more > summary:hover {
    background: var(--hover);
  }
}

.findings > details::details-content,
.more::details-content,
.quote-more::details-content {
  height: 0;
  overflow: clip;
  transition:
    height var(--t-4) var(--ease-out),
    content-visibility var(--t-4) allow-discrete;
}

.findings > details[open]::details-content,
.more[open]::details-content,
.quote-more[open]::details-content {
  height: auto;
}

.group__title {
  font-weight: 600;
}

.group__count {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.finding-list {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-2) var(--s-5) var(--s-5);
}

.finding {
  display: grid;
  gap: var(--s-2);
  max-width: var(--measure);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.finding:first-child {
  padding-top: var(--s-2);
  border-top: 0;
}

.finding__quote {
  padding-left: var(--s-4);
  border-left: 2px solid var(--line-2);
  color: var(--ink-2);
}

.finding__meta {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.quote-more > summary {
  padding: var(--s-2) 2.5rem var(--s-2) 0;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 540;
}

.quote-more > summary::after {
  right: var(--s-3);
}

.quote-more[open] > .finding__quote {
  margin-top: var(--s-2);
}

.more > summary {
  font-weight: 560;
}

.more > :not(summary) {
  padding: 0 var(--s-5) var(--s-5);
}

.more > .table-wrap {
  padding-inline: var(--s-3);
}

.recall-summary {
  max-width: var(--measure);
  font-weight: 500;
}

.recall-body {
  padding-top: var(--s-2);
}

.recall-body > p {
  max-width: var(--measure);
}

/* ---------- Tables ---------- */

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table caption {
  padding-bottom: var(--s-3);
  color: var(--ink-2);
  font-size: var(--step--1);
  text-align: left;
}

.table th,
.table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  border-bottom-color: var(--line-2);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 540;
}

.table tbody th {
  font-weight: 500;
}

.table .n {
  padding-right: 0;
  text-align: right;
}

.table td.n + td,
.table th.n + th {
  padding-left: var(--s-4);
}

.table tbody tr {
  transition: background-color var(--t-2) var(--ease-out);
}

@media (hover: hover) {
  .table tbody tr:hover {
    background: var(--hover);
  }
}

.table .is-this {
  background: var(--sunken);
}

.table .is-this th,
.table .is-this td {
  font-weight: 640;
}

.table .is-this th::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--ink);
  vertical-align: 0.12em;
}

/* ---------- What a provider adds, on its own ground ---------- */

.provider-area {
  margin-block: var(--s-7) 0;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border: 1px dashed var(--line-2);
  border-radius: var(--r-4);
  background: var(--sunken);
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.provider-area h2 {
  font-size: var(--step-2);
}

.provider-area > p {
  max-width: var(--measure);
  margin-top: var(--s-3);
  color: var(--ink-2);
}

.provider-area__slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.provider-area__slots > div {
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--paper);
}

.provider-area__slots h3 {
  font-size: var(--step-0);
}

.provider-area__slots p {
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

/* ---------- Sources ---------- */

.source-list {
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
}

.source-list li {
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.source-list li:last-child {
  border-bottom: 0;
}

.source-list .note {
  margin-top: var(--s-1);
}

/* ---------- The VIN check ---------- */

.vin-check {
  max-width: 34rem;
}

.vin-check label {
  display: block;
  font-weight: 600;
}

.vin-check__hint {
  margin-top: var(--s-1);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.vin-check__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.vin-check input {
  flex: 1 1 14rem;
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--t-2) var(--ease-out), box-shadow var(--t-3) var(--ease-out);
}

.vin-check input:focus {
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line-2));
  outline: none;
  box-shadow: 0 0 0 4px var(--ember-glow);
}

.vin-check input[aria-invalid="true"] {
  border-color: var(--error);
}

/* ---------- Footer ---------- */

.foot {
  margin-top: var(--s-9);
  padding-block: var(--s-7) var(--s-8);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.foot__grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .foot__grid {
    grid-template-columns: 1.1fr 1.6fr 1fr;
    gap: var(--s-7);
  }
}

.foot__brand .brand {
  color: var(--ink);
}

.foot__brand p {
  max-width: 24ch;
  margin-top: var(--s-3);
}

.foot__text p + p {
  margin-top: var(--s-3);
}

.foot__links {
  display: grid;
  align-content: start;
  gap: var(--s-2);
}

.foot__links a {
  text-decoration: none;
}

@media (hover: hover) {
  .foot__links a:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

/* ---------- When findings happened: a month grid, on each source's own ladder ---------- */

.heat {
  max-width: 34rem;
  margin: var(--s-5) 0 0;
}

.heat__grid {
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
  width: 100%;
}

.heat__grid th {
  color: var(--ink-3);
  font-size: var(--step--2);
  font-weight: 500;
  text-align: center;
}

.heat__grid tbody th {
  width: 2.5rem;
  padding-right: var(--s-2);
  text-align: right;
}

.heat__cell,
.heat__chip {
  --heat: 0;
  height: 1.5rem;
  border-radius: 4px;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-snappy) var(--spring-snappy), box-shadow var(--t-2) var(--ease-out);
}

.heat__cell {
  padding: 0;
  cursor: default;
}

.heat__cell--none {
  background: none;
}

.heat__cell--clear {
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* Cited: the ember, as deep as the step the source gave it. */
.heat__cell--cited {
  background: color-mix(in srgb, var(--ember) calc(var(--heat) * 100%), var(--sunken));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ember) 40%, transparent);
}

.heat__cell:focus-visible,
.heat__cell.is-read {
  transform: scale(1.18);
  box-shadow: inset 0 0 0 1px var(--ink);
  outline: none;
}

@media (hover: hover) {
  .heat__cell:hover {
    transform: scale(1.18);
    box-shadow: inset 0 0 0 1px var(--ink);
    outline: none;
  }
}

.heat__pad {
  background: none;
  box-shadow: none;
}

.heat__read {
  min-height: 1.5em;
  margin-top: var(--s-3);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 540;
}

.heat__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--step--2);
}

.heat__key {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.heat__chip {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

.heat__key--ramp {
  gap: 2px;
}

.heat__key--ramp span:last-child {
  margin-left: var(--s-2);
}

/* The same months, small, on a card in a list. */
.strip {
  display: flex;
  gap: 2px;
  height: 1.1rem;
}

.strip__cell {
  --heat: 0;
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--sunken);
}

.strip__cell--none {
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
}

.strip__cell--cited {
  background: color-mix(in srgb, var(--ember) calc(var(--heat) * 100%), var(--sunken));
}

.rcard__heat {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.rcard__heat-words {
  color: var(--ink-2);
  font-size: var(--step--2);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .heat__cell,
  .heat__chip {
    height: 1.15rem;
  }

  .heat__grid {
    border-spacing: 2px;
  }
}

/* The screens: home, the places hub, the finders, what changed, search, the watch list, how it works, not found. */

/* ---------- Home: one line, one search, then doors into the record ---------- */

.home-hero {
  position: relative;
  isolation: isolate;
  max-width: 62rem;
  padding-block: clamp(var(--s-6), 5vw, var(--s-8)) clamp(var(--s-4), 2.5vw, var(--s-6));
}

/* The hearth's light, low and slow behind the search. It brightens while you type. */
.home-hero__glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8rem;
  z-index: -1;
  width: min(44rem, 100%);
  margin-inline: auto;
  aspect-ratio: 1;
  pointer-events: none;
  animation: hearth 10s var(--ease-in-out) infinite;
  transition: translate var(--t-5) var(--spring);
}

.home-hero__glow::before,
.home-hero__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ember-glow), transparent 72%);
  opacity: 0.3;
}

.home-hero__glow::after {
  opacity: 0;
  transition: opacity var(--t-4) var(--ease-out);
}

.home-hero:has(.field:focus-within) .home-hero__glow {
  translate: 0 -2rem;
}

.home-hero:has(.field:focus-within) .home-hero__glow::after {
  opacity: 0.5;
}

@keyframes hearth {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }
}

.home-hero__title {
  max-width: 30ch;
  font-size: var(--step-5);
}

.home-hero__lead {
  max-width: 38rem;
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.5;
}

.hero__search {
  position: relative;
  z-index: 5;
  max-width: 40rem;
  margin-top: var(--s-6);
}

.field--hero {
  height: 3.75rem;
}

.home-hero__try {
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: var(--step--1);
}

/* Results as you type, under the field. */
.drop {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: 0;
  right: 0;
  max-height: min(28rem, 60svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.985);
  transform-origin: 50% 0;
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

.drop.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.block {
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
}

.home-hero + .block {
  padding-top: var(--s-5);
}

.block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}

.block__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 540;
  text-decoration: none;
}

@media (hover: hover) {
  .block__more:hover {
    color: var(--ink);
  }
}

.block__more .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .block__more:hover .icon {
    transform: translateX(3px);
  }
}

/* Doors: a kind of place or thing, what its record covers, and how many the record holds. */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.doors > li {
  min-width: 0;
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--t-3) var(--ease-out),
    box-shadow var(--t-3) var(--ease-out),
    transform var(--t-spring) var(--spring);
}

@media (hover: hover) {
  a.door:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
  }
}

a.door:active {
  transform: translateY(-1px) scale(0.99);
}

.door__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-2);
  background: var(--sunken);
  color: var(--ink);
  transition:
    background-color var(--t-3) var(--ease-out),
    color var(--t-3) var(--ease-out),
    transform var(--t-bouncy) var(--spring-bouncy);
}

.door__icon .icon {
  width: 1.4rem;
  height: 1.4rem;
}

@media (hover: hover) {
  a.door:hover .door__icon {
    background: var(--ink);
    color: var(--paper);
    transform: rotate(-6deg) scale(1.06);
  }
}

.door__name {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.door__line {
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.5;
}

.door__demo {
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.5;
}

.door__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
}

.door__count {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.door__count b {
  margin-right: 0.2em;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.door__go {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--sunken);
  color: var(--ink-2);
  transition:
    background-color var(--t-3) var(--ease-out),
    color var(--t-3) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy);
}

.door__go .icon {
  width: 1.05rem;
  height: 1.05rem;
}

@media (hover: hover) {
  a.door:hover .door__go {
    background: var(--ink);
    color: var(--paper);
    transform: translateX(2px);
  }
}

.door--later {
  border-style: dashed;
  background: none;
}

.door--later .door__icon {
  background: none;
  color: var(--ink-3);
}

.doors--hub {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  margin-top: 0;
}

/* Every record answers the same questions: a few words, the guide's button, and real records turning over. */
.example {
  display: grid;
  align-items: center;
  gap: var(--s-7);
}

@media (min-width: 1000px) {
  .example {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-8);
  }
}

.example__text p {
  max-width: 34rem;
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.5;
}

.example__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* The record, answering: one real record per phrase, stacked like the phrases. */
.stage {
  position: relative;
}

.scenes {
  display: grid;
}

.scene {
  --i: 0;
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.98);
  transition:
    opacity 520ms var(--ease-out),
    transform 900ms var(--spring),
    visibility 0s linear 900ms,
    box-shadow var(--t-3) var(--ease-out),
    border-color var(--t-3) var(--ease-out);
}

.scene.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.scene.is-off {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  transition-duration: 320ms, 420ms, 0s;
  transition-delay: 0s, 0s, 420ms;
  transition-timing-function: var(--ease-in);
}

@media (hover: hover) {
  .scene:hover {
    border-color: var(--line-2);
  }
}

.scene > * {
  transition: opacity 600ms var(--ease-out), transform 900ms var(--spring);
  transition-delay: calc(140ms + var(--i) * 60ms);
}

.scene:not(.is-on) > * {
  opacity: 0;
  transform: translateY(10px);
  transition-delay: 0s;
}

.scene__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 540;
}

.scene__kind {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.scene__kind .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ink);
}

.scene__open {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--ink-3);
  transition: color var(--t-2) var(--ease-out);
}

.scene__open .icon {
  transition: transform var(--t-snappy) var(--spring-snappy);
}

@media (hover: hover) {
  .scene:hover .scene__open {
    color: var(--ink);
  }
}

@media (hover: hover) {
  .scene:hover .scene__open .icon {
    transform: translateX(3px);
  }
}

.scene__name {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

.scene__where {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

.scene__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.scene__fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  font-size: var(--step--1);
  line-height: 1.35;
}

.scene__fact b {
  font-family: var(--font-text);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.scene__fact b small {
  margin-left: 0.15em;
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
}

.scene__fact--attention b {
  color: var(--ember-ink);
}

.scene__fact--attention::after {
  content: "";
  order: -1;
  width: 0.5rem;
  height: 0.5rem;
  margin-bottom: var(--s-1);
  border-radius: 50%;
  background: var(--ember);
  animation: ember-pulse 2.8s var(--ease-in-out) infinite;
}

.scene__src {
  margin-top: var(--s-5);
  color: var(--ink-3);
  font-size: var(--step--2);
}

@media (max-width: 480px) {
  .scene__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scene__fact:nth-child(3) {
    display: none;
  }
}

.stage__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.dots {
  display: flex;
  gap: var(--s-1);
}

.dot {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
}

.dot::before,
.dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  right: 0.25rem;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: var(--line-2);
}

.dot::after {
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.dot[aria-current="true"]::after {
  animation: dot-fill var(--scene-ms, 5200ms) linear both;
}

.stage.is-paused .dot[aria-current="true"]::after,
.stage.is-held .dot[aria-current="true"]::after {
  animation-play-state: paused;
}

@keyframes dot-fill {
  to {
    transform: scaleX(1);
  }
}

.pause .icon--play {
  display: none;
}

.stage.is-paused .pause .icon--play {
  display: block;
}

.stage.is-paused .pause .icon--pause {
  display: none;
}


/* ---------- Home: what's new, and the promises ---------- */

.fresh {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (min-width: 900px) {
  .fresh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fresh__col {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
}

.fresh__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step-1);
}

.fresh__when {
  margin-top: var(--s-1);
  color: var(--ink-3);
  font-size: var(--step--1);
}

.fresh__list {
  display: grid;
  margin-top: var(--s-3);
}

.fresh-item {
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}

.fresh-item__what {
  display: block;
  font-weight: 540;
  line-height: 1.4;
}

a.fresh-item__what {
  text-decoration: none;
}

@media (hover: hover) {
  a.fresh-item__what:hover {
    text-decoration: underline;
  }
}

.fresh-item__where {
  margin-top: 0.15rem;
  color: var(--ink-2);
  font-size: var(--step--1);
}

.fresh__list--wide {
  max-width: 52rem;
}

.changes-grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 1100px) {
  .changes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.change-group h3 {
  font-size: var(--step-1);
}

.change-group .note {
  margin-top: var(--s-1);
}

.promise-list {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 900px) {
  .promise-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }
}

.promise-list li {
  position: relative;
  padding-left: var(--s-5);
}

.promise-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ember);
}

.promise-list h3 {
  font-size: var(--step-1);
}

.promise-list p {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

.promises > p {
  margin-top: var(--s-6);
}

/* ---------- The guide: how to read a record, behind a button ---------- */

.guide {
  width: min(60rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition:
    opacity var(--t-2) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy),
    overlay var(--t-2) allow-discrete,
    display var(--t-2) allow-discrete;
}

.guide[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

@starting-style {
  .guide[open] {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}

.guide::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-3) var(--ease-out), overlay var(--t-3) allow-discrete, display var(--t-3) allow-discrete;
}

.guide[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .guide[open]::backdrop {
    opacity: 0;
  }
}

.guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--line);
}

.guide__head h2 {
  font-size: var(--step-2);
}

.guide__body {
  display: grid;
  gap: var(--s-6);
  padding: var(--s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 820px) {
  .guide__body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

.guide__steps {
  display: grid;
}

.guide__step {
  grid-area: 1 / 1;
}

.guide__step.is-on {
  animation: step-in var(--t-4) var(--spring) both;
}

.guide__step.is-back {
  animation-name: step-back;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes step-back {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}

.guide__n {
  color: var(--ink-3);
  font-size: var(--step--1);
  font-weight: 540;
}

.guide__step h3 {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--display-weight);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
}

.guide__step p:last-child {
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.5;
}

.guide__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
}

.guide__dots {
  display: flex;
  gap: 6px;
  margin-right: auto;
}

.guide__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--line-2);
  transition: width var(--t-spring) var(--spring), background-color var(--t-3) var(--ease-out);
}

.guide__dot.is-on {
  width: 24px;
  background: var(--ink);
}

.guide .spec {
  position: relative;
  top: auto;
  background: var(--paper);
  box-shadow: none;
}

.guide .spec__name {
  font-size: var(--step-2);
}

.guide .spec__part {
  margin-top: var(--s-3);
  padding: var(--s-3);
}

.guide .fig__num {
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
}

.guide .fig__label {
  font-size: var(--step-0);
}

.guide .bars {
  margin-top: var(--s-3);
}

.guide .fig__base {
  margin-top: var(--s-2);
  font-size: var(--step--1);
}

@media (max-width: 819px) {
  .guide__body {
    padding: var(--s-4);
  }

  .guide .spec {
    padding: var(--s-4);
  }

  .guide .spec .bars {
    display: none;
  }
}

.spec {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-6));
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}

.spec__crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.spec__name a {
  text-decoration: none;
}

@media (hover: hover) {
  .spec__name a:hover {
    text-decoration: underline;
  }
}

.spec__name {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.spec__where {
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.spec__part {
  position: relative;
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-3);
  transition: opacity var(--t-3) var(--ease-out), transform var(--t-spring) var(--spring);
}

.spec[data-at] .spec__part:not(.is-lit) {
  opacity: 0.38;
}

.spec[data-at] .spec__part.is-lit {
  transform: scale(1.015);
}

.spec__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rw, 0);
  height: var(--rh, 0);
  border: 2px solid var(--ink);
  border-radius: var(--r-3);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--rx, 0), var(--ry, 0));
  transition:
    transform var(--t-spring) var(--spring),
    width var(--t-spring) var(--spring),
    height var(--t-spring) var(--spring),
    opacity var(--t-2) var(--ease-out),
    border-color var(--t-3) var(--ease-out);
}

.spec[data-at] .spec__ring {
  opacity: 1;
}

.spec[data-at="attention"] .spec__ring {
  border-color: var(--ember);
}

.spec__fig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}

.spec__fig b {
  font-family: var(--font-text);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.spec__fig span {
  max-width: 22ch;
  font-weight: 540;
  line-height: 1.3;
}

.spec__fig .bars {
  flex-basis: 100%;
  margin-top: var(--s-3);
}

.spec__base {
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.spec__src .src {
  border-left-color: var(--line-2);
}

.spec__provider {
  border: 1px dashed var(--line-2);
  background: var(--sunken);
  font-size: var(--step--1);
}

.spec__provider strong {
  display: block;
  margin-bottom: var(--s-1);
}


/* ---------- Lists of places and things ---------- */

.page-head {
  padding-top: clamp(var(--s-6), 6vw, var(--s-8));
  padding-bottom: var(--s-6);
}

.page-head h1 {
  max-width: 18ch;
  font-size: var(--step-4);
}

.page-head .lead {
  max-width: 40rem;
  margin-top: var(--s-4);
  color: var(--ink-2);
}


/* ---------- Finders: filter a kind of place down to a handful ---------- */

.finder__head {
  padding-bottom: var(--s-5);
}

.finder__head .crumbs {
  margin-bottom: var(--s-4);
}

.finder__head .lead {
  max-width: 46rem;
}

.finder__bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-3) var(--gutter);
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}

.finder__search {
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  gap: var(--s-2);
  height: 2.75rem;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-3);
  transition: border-color var(--t-3) var(--ease-out), box-shadow var(--t-3) var(--ease-out);
}

.finder__search:focus-within {
  border-color: color-mix(in srgb, var(--ember) 55%, var(--line-2));
  box-shadow: 0 0 0 4px var(--ember-glow);
}

.finder__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  outline: none;
}

.finder__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.finder__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.finder__sort::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.35rem;
  border-right: 1.6px solid var(--ink-2);
  border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(45deg);
  pointer-events: none;
}

.finder__sort select {
  height: 2.75rem;
  padding: 0 2.5rem 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 540;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.finder__filters-btn {
  display: none;
}

@media (max-width: 999px) {
  .finder__filters-btn {
    display: inline-flex;
  }

  .finder__sort > span {
    display: none;
  }
}

.finder__layout {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-5);
}

@media (min-width: 1000px) {
  .finder__layout {
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: var(--s-7);
  }
}

.filters {
  position: sticky;
  top: calc(var(--nav-h) + 5rem);
  align-self: start;
  max-height: calc(100svh - var(--nav-h) - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--s-2);
  scrollbar-width: thin;
}

@media (max-width: 999px) {
  .filters {
    display: none;
  }
}

.filters__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s-3);
}

.filters__head h2 {
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.facet {
  min-width: 0;
  margin: 0;
  padding: var(--s-4) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.facet legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s-3);
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.facet legend + * {
  clear: left;
}

.facet__note {
  margin-top: var(--s-2);
  color: var(--ink-3);
  font-size: var(--step--2);
  line-height: 1.45;
}

.check,
.switch {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  cursor: pointer;
  transition: opacity var(--t-3) var(--ease-out);
}

.check__label {
  flex: 1;
}

.check__n {
  color: var(--ink-3);
  font-size: var(--step--1);
  transition: color var(--t-2) var(--ease-out);
}

.check.is-empty,
.switch.is-empty {
  opacity: 0.42;
}

.check input {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--ink-3);
  border-radius: 5px;
  background: var(--surface);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

.check input:active {
  transform: scale(0.88);
}

.check input:checked {
  border-color: var(--ink);
  background: var(--ink);
}

.check input:checked::after {
  content: "";
  width: 0.55rem;
  height: 0.3rem;
  margin-top: -0.12rem;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg);
  animation: tick var(--t-bouncy) var(--spring-bouncy);
}

@keyframes tick {
  from {
    transform: rotate(-45deg) scale(0.3);
  }
}

.switch input {
  position: relative;
  width: 2.1rem;
  height: 1.25rem;
  flex: none;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--line-2);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--t-3) var(--ease-out);
}

.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-snappy) var(--spring-snappy);
}

.switch input:checked {
  background: var(--ink);
}

.switch input:checked::after {
  transform: translateX(0.85rem);
}

.switch .check__label {
  order: -1;
}

/* One choice among a few: a pill glides to it. */
.seg {
  position: relative;
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sunken);
}

.seg__opt {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.seg__opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg__opt span {
  display: block;
  padding: 0.4rem 0.2rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 560;
  white-space: nowrap;
  transition: color var(--t-2) var(--ease-out);
}

.seg__opt input:checked + span {
  color: var(--ink);
}

.seg__opt input:focus-visible + span {
  outline: 2px solid var(--ember);
  outline-offset: 1px;
}

.seg__opt.is-empty span {
  opacity: 0.42;
}

.seg__pill {
  position: absolute;
  top: 3px;
  left: 0;
  width: var(--sw, 0);
  height: calc(100% - 6px);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateX(var(--sx, 0));
  transition: transform var(--t-spring) var(--spring), width var(--t-spring) var(--spring), opacity var(--t-2) var(--ease-out);
}

.seg.is-live .seg__pill {
  opacity: 1;
}

/* A slider: everything up to a number. */
.range {
  display: grid;
  gap: var(--s-1);
}

.range input {
  width: 100%;
  height: 1.75rem;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.range input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--fill, 100%) 100% no-repeat, var(--line-2);
}

.range input::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: var(--line-2);
}

.range input::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: var(--ink);
}

.range input::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: calc(2px - 0.625rem);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--t-snappy) var(--spring-snappy);
}

.range input::-moz-range-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
}

.range input:active::-webkit-slider-thumb {
  transform: scale(1.18);
}

.range output {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.range output strong {
  color: var(--ink);
}

.filters__done {
  display: none;
}

.finder__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.5rem;
}

.finder__count {
  margin-right: var(--s-2);
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-shown] {
}

.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.active-chips button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.55rem 0 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 540;
  animation: chip-in var(--t-bouncy) var(--spring-bouncy) both;
  transition: background-color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}

@media (hover: hover) {
  .active-chips button:hover {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
    background: var(--hover);
  }
}

.active-chips .icon {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--ink-3);
}

@keyframes chip-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

.rcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.rcard-item {
  min-width: 0;
}

.rcard-item[hidden] {
  display: none;
}

.rcard-item.is-new {
  animation: card-in var(--t-4) var(--spring) both;
  animation-delay: calc(min(var(--i, 0), 8) * 40ms);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

.rcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--t-3) var(--ease-out),
    box-shadow var(--t-3) var(--ease-out),
    transform var(--t-spring) var(--spring);
}

@media (hover: hover) {
  .rcard:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
  }
}

.rcard:active {
  transform: translateY(-1px) scale(0.99);
}

.rcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 540;
}

.rcard__kind {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.rcard__kind .icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ink);
}

.rcard__go {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--sunken);
  transition: background-color var(--t-3) var(--ease-out), color var(--t-3) var(--ease-out), transform var(--t-snappy) var(--spring-snappy);
}

.rcard__go .icon {
  width: 0.95rem;
  height: 0.95rem;
}

@media (hover: hover) {
  .rcard:hover .rcard__go {
    background: var(--ink);
    color: var(--paper);
    transform: translateX(2px);
  }
}

.rcard__name {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.rcard__where {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.rcard__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.rcard__where + .rcard__stats {
  margin-top: var(--s-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.3;
}

.stat > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.stat b {
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat b small {
  margin-left: 0.15em;
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
}

.stat--attention b {
  color: var(--ember-ink);
}

.rcard__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  color: var(--ember-ink);
  font-size: 0.8125rem;
  font-weight: 560;
  line-height: 1.35;
}

.rcard__flag::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 50%;
  background: var(--ember);
}

.finder__more {
  display: flex;
  justify-content: center;
  margin-top: var(--s-5);
}

.finder__more [hidden] {
  display: none;
}

.finder__none {
  max-width: 36rem;
  padding: var(--s-7) 0;
}

.finder__none[hidden] {
  display: none;
}

.finder__none h3 {
  font-size: var(--step-2);
}

.finder__none p {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

.finder__none .btn {
  margin-top: var(--s-4);
}

.finder__source {
  margin-top: var(--s-7);
}

.no-js .filters,
.no-js .finder__bar {
  display: none;
}

/* On phones the filters rise in a sheet from the bottom. */
.sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 88svh;
  margin: 0;
  padding: var(--s-5) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--r-4) var(--r-4) 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  transform: translateY(100%);
  transition:
    transform var(--t-spring) var(--spring),
    overlay var(--t-spring) allow-discrete,
    display var(--t-spring) allow-discrete;
}

.sheet[open] {
  transform: none;
}

.sheet:focus {
  outline: none;
}

@starting-style {
  .sheet[open] {
    transform: translateY(100%);
  }
}

.sheet::backdrop {
  background: var(--backdrop);
  opacity: 0;
  transition: opacity var(--t-3) var(--ease-out), overlay var(--t-3) allow-discrete, display var(--t-3) allow-discrete;
}

.sheet[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .sheet[open]::backdrop {
    opacity: 0;
  }
}

.sheet .filters__done {
  position: sticky;
  bottom: 0;
  display: flex;
  width: 100%;
  margin-top: var(--s-5);
}

/* ---------- Search page ---------- */

.search-page__field {
  max-width: 44rem;
}

.search-page__note {
  max-width: 44rem;
  margin-top: var(--s-4);
}

.search-page .hits {
  max-width: 52rem;
  margin-top: var(--s-6);
}

.results-count {
  margin-bottom: var(--s-4);
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Watch list ---------- */

.w-list {
  display: grid;
  gap: var(--s-2);
  max-width: 52rem;
}

.w-item {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--t-4) var(--ease-out),
    opacity var(--t-3) var(--ease-out),
    transform var(--t-4) var(--spring);
}

.w-item.is-leaving {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateX(24px);
}

.w-item__inner {
  min-height: 0;
  overflow: hidden;
}

.w-list.is-settled .w-card {
  animation: none;
}

.w-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  animation: arrive var(--t-4) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.w-card .hit__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.w-card__name {
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) {
  .w-card__name:hover {
    text-decoration: underline;
  }
}

.w-card__line {
  margin-top: var(--s-1);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.w-card__latest {
  margin-top: var(--s-2);
  color: var(--ink-3);
  font-size: var(--step--1);
}

@media (max-width: 600px) {
  .w-card {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .w-card .btn {
    grid-column: 2;
    justify-self: start;
  }
}

.empty {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  max-width: 34rem;
  padding: var(--s-7) 0;
}

.empty[hidden] {
  display: none;
}

.empty .mark {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--ink-3);
}

.empty .mark__ember,
.empty .mark__glow {
  fill: var(--ink-3);
  animation: none;
}

.empty h2 {
  font-size: var(--step-3);
}

.empty p {
  color: var(--ink-2);
}

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* ---------- How it works ---------- */

.rules {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.rule {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .rule {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--s-7);
  }
}

.rule h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--display-weight);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.rule p {
  color: var(--ink-2);
}

/* ---------- Not found ---------- */

.lost {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  max-width: 40rem;
  padding-block: clamp(var(--s-7), 10vw, var(--s-9));
}

.lost .mark {
  width: 4.5rem;
  height: 4.5rem;
}

.lost .mark__ember {
  animation: flicker 3.2s steps(1) infinite, breathe 4.2s var(--ease-in-out) infinite;
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }

  41% {
    opacity: 0.55;
  }

  43% {
    opacity: 1;
  }

  71% {
    opacity: 0.7;
  }

  72% {
    opacity: 1;
  }
}

.lost h1 {
  font-size: var(--step-4);
}

.lost p {
  color: var(--ink-2);
  font-size: var(--step-1);
}

.lost .field {
  margin-top: var(--s-4);
}

/* ---------- Side by side: pick a few, then read the same facts in columns ---------- */

.pick {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 560;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-snappy) var(--spring-snappy), color var(--t-2) var(--ease-out);
}

.rcard-item {
  position: relative;
}

.pick:focus-within,
.pick:has(:checked) {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .rcard-item:hover .pick {
    opacity: 1;
    transform: none;
  }
}

.pick:has(:checked) {
  color: var(--ink);
}

.pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pick__box {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid var(--ink-3);
  border-radius: 5px;
  color: transparent;
  transition: background-color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out);
}

.pick__box .icon {
  width: 0.8rem;
  height: 0.8rem;
  stroke-width: 2.6;
}

.pick:has(:checked) .pick__box {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.pick:has(:focus-visible) .pick__box {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

@media (hover: none) {
  .pick {
    opacity: 1;
    transform: none;
  }
}

/* The tray: what you have chosen, and the way into the comparison. */
.tray {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  transform: translateX(-50%);
  animation: tray-in var(--t-spring) var(--spring) both;
}

.tray[hidden] {
  display: none;
}

@keyframes tray-in {
  from {
    opacity: 0;
    transform: translate(-50%, 22px);
  }
}

.tray__count {
  font-weight: 600;
  white-space: nowrap;
}

.tray__max {
  color: var(--ink-3);
  font-weight: 400;
}

.tray__list {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 34rem;
}

.tray__list::-webkit-scrollbar {
  display: none;
}

.tray__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 12rem;
  padding: 0.25rem 0.5rem 0.25rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sunken);
  font-size: 0.8125rem;
  animation: chip-in var(--t-bouncy) var(--spring-bouncy) both;
}

.tray__list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tray__list button {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
}

@media (hover: hover) {
  .tray__list button:hover {
    background: var(--press);
    color: var(--ink);
  }
}

.tray__list .icon {
  width: 0.8rem;
  height: 0.8rem;
}

@media (max-width: 720px) {
  .tray {
    bottom: calc(5rem + env(safe-area-inset-bottom));
    padding-left: var(--s-4);
  }

  .tray__list {
    display: none;
  }
}

/* The comparison itself: one column per place, one row per published fact. */
.cmp {
  width: min(72rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity var(--t-2) var(--ease-out),
    transform var(--t-snappy) var(--spring-snappy),
    overlay var(--t-2) allow-discrete,
    display var(--t-2) allow-discrete;
}

.cmp[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

@starting-style {
  .cmp[open] {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

.cmp::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-3) var(--ease-out), overlay var(--t-3) allow-discrete, display var(--t-3) allow-discrete;
}

.cmp[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .cmp[open]::backdrop {
    opacity: 0;
  }
}

.cmp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.cmp__head h2 {
  font-size: var(--step-2);
}

.cmp__body {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
}

.cmp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cmp__table th,
.cmp__table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.cmp__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  border-bottom-color: var(--line-2);
  box-shadow: 0 1px 0 var(--line-2);
}

.cmp__table tbody th {
  position: sticky;
  left: 0;
  min-width: 13rem;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 500;
}

.cmp__name {
  display: block;
  max-width: 16rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
}

@media (hover: hover) {
  .cmp__name:hover {
    text-decoration: underline;
  }
}

.cmp__where {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 400;
}

.cmp__none {
  color: var(--ink-3);
}

/* The place that leads on a row the source lets us order: marked, never scored. */
.cmp__lead {
  font-weight: 640;
}

.cmp__lead::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--ember);
  vertical-align: 0.15em;
}

.cmp__note {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.cmp__legend {
  padding: var(--s-3) var(--s-5) 0;
  color: var(--ink-2);
  font-size: var(--step--1);
}

.finder__hint {
  margin-left: auto;
  color: var(--ink-3);
  font-size: var(--step--2);
}

@media (max-width: 720px) {
  .finder__hint {
    display: none;
  }
}

/* ---------- Soft Studio: its typeface ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/looks/satoshi/satoshi-normal-300-0.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/looks/satoshi/satoshi-normal-400-1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/looks/satoshi/satoshi-normal-500-2.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/looks/satoshi/satoshi-normal-700-3.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/looks/satoshi/satoshi-normal-900-4.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/*
 * Soft Studio, after the Goaling sample 09-soft-studio. Laid over the shared stylesheet in this look's own
 * copy of the site, so every rule here applies to every page of it.
 *
 * The sample's one container is the double bezel built from flat tone steps: a 6px seat (#D2D6DC) around a
 * white plate, radii concentric (seat 30, plate 24, wells 16, pills full). Nothing at rest has a line
 * between things or a shadow; only what floats (sheets, cards, the palette, toasts) casts one soft shadow.
 * Satoshi for every word: 400 text, 500 interface, 700 titles, 900 display, at 13, 15, 18, 28 and 56px,
 * with room around everything: 22px between plates, 28 to 30px inside them, 56px at the page's sides.
 * International orange is the one signal: the knob nested in every primary pill and the lamp on what
 * needs attention. It is never a colour for "fine", and a visit with nothing cited stays neutral grey.
 */

/* ---------- Tokens: the sample's Silver, then the shared roles they fill ---------- */

:root {
  --ss-ground: #dfe2e6;
  --ss-seat: #d2d6dc;
  --ss-seat-deep: #c6cbd2;
  --ss-plate: #ffffff;
  --ss-well: #f0f1f3;
  --ss-well-2: #e5e7ea;
  --ss-ink: #1b1e23;
  --ss-muted: #50565f;
  --ss-rule: #e9ebee;
  --ss-closed: #8e949c;
  --ss-signal: #ff5a1f;
  --ss-signal-ink: #b53a0b;
  --ss-signal-tint: #ffe7dc;
  --ss-scrim: rgb(27 30 35 / 0.24);
  --ss-float: 0 40px 100px -40px rgb(17 20 26 / 0.42), 0 12px 32px -20px rgb(17 20 26 / 0.22); /* only what floats */
  /* The graphite of a primary pill, a badge, a pressed choice and the shortlist's tray, with white on it; a mark
     drawn on an ink fill (a ticked box); the icon on the orange knob, the same in either light; the mark's tile. */
  --ss-pill: #1b1e23;
  --ss-on-ink: #ffffff;
  --ss-on-signal: #1b1e23;
  --ss-mark-tile: #1b1e23;
  /* A month on a grid or a strip with a visit and nothing cited, and the outline of one with no visit; an empty
     track of steps. */
  --ss-cell: #d2d6dc;
  --ss-track: #e5e7ea;
  /* A switch that is off: its track, and its knob. */
  --ss-switch-off: #e5e7ea;
  --ss-switch-knob: #ffffff;
  /* The places hub's shares: six tones of the ink, the largest share the strongest. */
  --ss-share-0: #1b1e23;
  --ss-share-1: #3d434c;
  --ss-share-2: #5d646e;
  --ss-share-3: #7d8490;
  --ss-share-4: #9ca3ae;
  --ss-share-5: #bcc2cb;
  --ss-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ss-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ss-tray-w: 264px;
  --ss-bezel: 6px;
  --ss-gap: 22px;
  --ss-main-x: 56px;
  /* The page's sides, clear of a phone's rounded corners and its notch when it lies on its side. */
  --ss-edge-l: max(var(--ss-main-x), env(safe-area-inset-left, 0px));
  --ss-edge-r: max(var(--ss-main-x), env(safe-area-inset-right, 0px));
  /* On a phone a sheet stops short of the top, so a strip of the dimmed page stays in view above it. */
  --ss-sheet-top: calc(36px + env(safe-area-inset-top, 0px));
  --ss-t1: 0.8125rem;
  --ss-t2: 0.9375rem;
  --ss-t3: 1.125rem;
  --ss-t4: 1.75rem;
  --ss-t5: 3.5rem;


  --font-text: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-text);
  --font-mono: var(--font-text);
  --display-weight: 700;
  --track-display: -0.012em;
  --step--2: 0.75rem;
  --step--1: var(--ss-t1);
  --step-0: var(--ss-t2);
  --step-1: var(--ss-t2);
  --step-2: var(--ss-t3);
  --step-3: var(--ss-t4);
  --step-4: var(--ss-t5);
  --step-5: var(--ss-t5);
  --fig: var(--ss-t4);
  --leading-tight: 0.94;
  --leading-snug: 1.24;
  --leading-body: 1.55;
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 16px;
  --r-4: 24px;
  --nav-h: 0px;
  --measure: 68ch;

  /* One spring, everything under 400ms. */
  --ease-out: var(--ss-out);
  --ease-in-out: var(--ss-out);
  --spring: var(--ss-spring);
  --spring-snappy: var(--ss-spring);
  --spring-bouncy: var(--ss-spring);
  --t-1: 140ms;
  --t-2: 180ms;
  --t-3: 220ms;
  --t-4: 360ms;
  --t-5: 380ms;
  --t-spring: 380ms;
  --t-snappy: 260ms;
  --t-bouncy: 300ms;
  --stagger: 38ms;
  --rise: 12px;
}

/* The shared roles these fill, set again on any theme, so the shared sheet's own night (tokens.css) never takes them. */
:root,
:root[data-theme] {
  --paper: var(--ss-ground);
  --surface: var(--ss-plate);
  --sunken: var(--ss-well);
  --ink: var(--ss-ink);
  --ink-2: var(--ss-muted);
  --ink-3: var(--ss-muted);
  --line: var(--ss-rule);
  --line-2: var(--ss-well-2);
  --hover: var(--ss-well);
  --press: var(--ss-well-2);
  --accent: var(--ss-pill);
  --on-accent: #ffffff;
  --ember: var(--ss-signal);
  --ember-ink: var(--ss-signal-ink);
  --ember-wash: var(--ss-signal-tint);
  --ember-mark: var(--ss-signal-tint);
  --ember-glow: rgb(255 90 31 / 0.2);
  --error: var(--ss-signal-ink);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: var(--ss-float);
  --backdrop: var(--ss-scrim);
  --glass: var(--ss-ground);
}

/*
 * Soft Studio at night: the same tray, seats, plates and wells, in graphite. The tone steps keep their order: a
 * seat sits deeper than the tray, a plate lifts above it, a well sinks into its plate. Text keeps AA on every one
 * of them. The orange knob is unchanged, and the colour kept for what needs attention stays kept for it: its
 * text lightens to read on the dark, and its wash darkens.
 */
:root[data-theme=dark] {
  color-scheme: dark;
  --ss-ground: #14161a;
  --ss-seat: #0d0f12;
  --ss-seat-deep: #08090b;
  --ss-plate: #1e2126;
  --ss-well: #17191d;
  --ss-well-2: #101215;
  --ss-ink: #e6e8eb;
  --ss-muted: #a2a8b1;
  --ss-rule: #2c3036;
  --ss-closed: #7a8089;
  --ss-signal-ink: #ff8f63;
  --ss-signal-tint: #3b2016;
  --ss-scrim: rgb(0 0 0 / 0.56);
  --ss-float: 0 40px 100px -40px rgb(0 0 0 / 0.85), 0 12px 32px -20px rgb(0 0 0 / 0.7);
  --ss-pill: #3d424a;
  --ss-on-ink: #14161a;
  --ss-mark-tile: #2b2f36;
  --ss-cell: #3a3f47;
  --ss-track: #2c3036;
  --ss-switch-off: #3a3f47;
  --ss-switch-knob: #c9ced5;
  --ss-share-0: #e6e8eb;
  --ss-share-1: #c2c7ce;
  --ss-share-2: #9ea4ad;
  --ss-share-3: #7c828b;
  --ss-share-4: #5d636b;
  --ss-share-5: #454a51;
  --ember-glow: rgb(255 90 31 / 0.28);
}

/*
 * The two colours beside the graphite, silver, white and orange: cobalt for Places,
 * sage for People. Things keeps the orange, the signal, as a recall is what needs attention. Each comes in three
 * tones: the drawing's fill, an ink that keeps AA (4.5:1) on white, on a well and on its own wash, and the wash.
 */
:root {
  --hk-places: #3a63f0;
  --hk-places-ink: #2747c4;
  --hk-places-tint: #e6ecfd;
  --hk-people: #7aa98f;
  --hk-people-ink: #2f6a52;
  --hk-people-tint: #e3f0e8;
}

:root[data-theme=dark] {
  --hk-places: #6f8cff;
  --hk-places-ink: #a9bcff;
  --hk-places-tint: #1e2745;
  --hk-people: #7fb89a;
  --hk-people-ink: #9ed2b5;
  --hk-people-tint: #1b2a23;
}

/* A page's accent, by its pillar (pillars.ts): a page about a place, a person's care or a thing takes its colour; a
   page about none keeps the greys, and the orange stays for every page's one primary action. */
:root {
  --hk-c: var(--ss-closed);
  --hk-c-ink: var(--ss-ink);
  --hk-c-tint: var(--ss-well);
}

:root[data-pillar=places] {
  --hk-c: var(--hk-places);
  --hk-c-ink: var(--hk-places-ink);
  --hk-c-tint: var(--hk-places-tint);
}

:root[data-pillar=people] {
  --hk-c: var(--hk-people);
  --hk-c-ink: var(--hk-people-ink);
  --hk-c-tint: var(--hk-people-tint);
}

:root[data-pillar=things] {
  --hk-c: var(--ss-signal);
  --hk-c-ink: var(--ss-signal-ink);
  --hk-c-tint: var(--ss-signal-tint);
}

/* ---------- Base ---------- */

body.ss {
  position: relative;
  padding-left: var(--ss-tray-w);
  background: var(--ss-ground);
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.55;
  transition: none;
}

.ss main.page {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 44px var(--ss-edge-r) 56px var(--ss-edge-l);
}

.ss h1 {
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.ss h2 {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
}

.ss h3 {
  font-size: var(--ss-t2);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.ss strong,
.ss b {
  font-weight: 700;
}

.ss :focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
  border-radius: 10px;
}

.ss ::selection {
  background: var(--ss-signal-tint);
  color: var(--ss-ink);
}

.ss .icon {
  stroke-width: 1.5;
}

.ss .note,
.ss .sub {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.ss .lead {
  max-width: 68ch;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.55;
  letter-spacing: 0;
}

.ss kbd {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss code {
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ss .skip {
  border-radius: 999px;
  background: var(--ss-pill);
  color: #ffffff;
}

/* The brand mark keeps still here: in this look nothing moves at rest. */
.ss .mark__ember,
.ss .mark__glow {
  animation: none;
}

.ss .mark__glow {
  display: none;
}

/* ---------- The tray ---------- */

.ss-tray {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: var(--ss-tray-w);
  height: auto;
  margin: 0;
  padding: 18px 14px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background: var(--ss-seat);
  color: var(--ss-ink);
  scrollbar-width: none;
}

.ss-tray::-webkit-scrollbar {
  display: none;
}

.ss-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 2px 4px 2px 8px;
}

.ss-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ss-ink);
  text-decoration: none;
}

.ss-brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  background: var(--ss-mark-tile);
  color: #ffffff;
}

.ss-brand-mark .mark {
  width: 22px;
  height: 22px;
}

.ss-brand-word {
  font-size: var(--ss-t3);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

/* The way out of the menu on a phone, as out of every dialog: the orange knob on its graphite ring, holding a clear X. */
.ss-tray-close {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-pill);
  color: var(--ss-on-signal);
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .ss-tray-close .icon {
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  background: var(--ss-signal);
  color: var(--ss-on-signal);
  stroke-width: 2.4;
}

.ss-tray-close:active {
  transform: scale(0.94);
}

.ss .ss-tray-close:focus-visible {
  outline-offset: 3px;
  border-radius: 50%;
}

@media (hover: hover) {
  .ss-tray-close:hover {
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }
}

/* Day and night: a round button in the tray's head beside the mark, in the phone's bar, and on the splash's top
   line. Without a script the page keeps the day, so the switch isn't shown. */
.ss-tray-theme {
  margin-left: auto;
}

.no-js .theme-toggle {
  display: none;
}

.ss .theme-toggle .theme-icon {
  width: 20px;
  height: 20px;
}

/* Search, as the sample's Capture: the shell's one primary pill, with its orange knob. */
.ss-capture {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 8px 0 18px;
  flex: none;
  border-radius: 999px;
  background: var(--ss-pill);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms var(--ss-spring);
}

.ss-capture:active {
  transform: scale(0.97);
}

.ss-capture .ss-keys {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: color-mix(in srgb, #ffffff 70%, transparent);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss-capture .ss-knob {
  width: 36px;
  height: 36px;
  margin-left: auto;
}

.ss-capture .ss-knob .icon {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .ss-capture:hover .ss-knob {
    transform: scale(1.06);
  }
}

.ss-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ss-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--ss-ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms var(--ss-out);
}

.ss-nav-link .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ss-muted);
}

/* A kind whose name is long ("Rehab and long-term care hospitals") takes a second line in the tray, never an ellipsis. */
.ss-nav-link .ss-label {
  padding-block: 9px;
  line-height: 1.25;
  white-space: normal;
}

.ss-nav-link[aria-current] {
  background: var(--ss-plate);
  font-weight: 700;
}

.ss-nav-link[aria-current] .icon {
  color: var(--ss-ink);
}

@media (hover: hover) {
  .ss-nav-link:not([aria-current]):hover {
    background: color-mix(in srgb, var(--ss-plate) 55%, transparent);
  }
}

.ss-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-nav-count,
.ss .ss-tray .badge {
  margin-left: auto;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ss .ss-tray .badge {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
}

.ss .ss-tray .badge:empty {
  display: none;
}

.ss-tray-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

/* The sample's round chip: here, how much of the record is nationwide. A white plate seated in the tray. */
.ss-cov {
  display: block;
  margin-bottom: 4px;
  padding: 12px 14px 14px;
  border-radius: 20px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  text-decoration: none;
  transition: transform 140ms var(--ss-spring);
}

.ss-cov:active {
  transform: scale(0.98);
}

.ss-cov[aria-current] {
  box-shadow: inset 0 0 0 2px var(--ss-ink);
}

.ss-cov-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ss-cov-name {
  font-weight: 700;
}

.ss-cov-left {
  font-size: var(--ss-t1);
  font-weight: 700;
  white-space: nowrap;
}

.ss-cov-meta {
  display: block;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.ss-cov-steps {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.ss-cov-steps i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--ss-track);
}

.ss-cov-steps i.is-full {
  background: var(--ss-ink);
}

/* The bench: the sample's corner of round buttons and white pills, top right of the page. */
.ss-bench {
  position: absolute;
  z-index: 6;
  top: 22px;
  right: var(--ss-main-x);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-topbar {
  display: none;
}

.ss-round,
.ss-burger {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--ss-plate);
  color: var(--ss-ink);
  transition: transform 140ms var(--ss-spring);
}

.ss-round:active,
.ss-burger:active {
  transform: scale(0.94);
}

.ss-burger i {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ss-ink);
}

.ss-burger i:nth-child(1) {
  top: 18px;
}

.ss-burger i:nth-child(2) {
  top: 24px;
}

/* Reading progress on a record: a graphite hairline across the top of the workspace. */
.ss .progress {
  position: fixed;
  z-index: 40;
  top: 0;
  left: var(--ss-tray-w);
  right: 0;
  bottom: auto;
  height: 3px;
  background: var(--ss-ink);
}

/* The foot: the independence line and the links, on a plate at the bottom of every page. */
.ss-foot {
  padding: 0 var(--ss-edge-r) calc(44px + env(safe-area-inset-bottom, 0px)) var(--ss-edge-l);
}

.ss-foot-core {
  display: grid;
  gap: 22px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.5;
}

@media (min-width: 1100px) {
  .ss-foot-core {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 32px;
  }
}

.ss-foot-brand p {
  max-width: 26ch;
  margin-top: 12px;
}

.ss-foot-words p + p {
  margin-top: 10px;
}

.ss-foot-links {
  display: grid;
  align-content: start;
  gap: 6px;
}

.ss-foot-links a {
  color: var(--ss-ink);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) {
  .ss-foot-links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

/* ---------- Plates, wells and pills ---------- */

.ss-plate {
  min-width: 0;
  padding: var(--ss-bezel);
  border-radius: 30px;
  background: var(--ss-seat);
}

.ss-core {
  position: relative;
  height: 100%;
  min-width: 0;
  padding: 28px 30px 30px;
  border-radius: 24px;
  background: var(--ss-plate);
}

.ss-plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 32px;
  margin-bottom: 18px;
}

.ss-h-plate {
  flex: 1 0 auto;
  max-width: 100%;
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
}

.ss-h-note {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss-display {
  font-size: var(--ss-t5);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.ss-meta {
  display: block;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.ss-ink {
  color: var(--ss-ink);
}

.ss-mid {
  font-weight: 500;
}

.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 38px;
  padding: 0 18px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ss-spring), background-color 180ms var(--ss-out);
}

.ss-btn:active {
  transform: scale(0.97);
}

.ss-btn .icon {
  width: 17px;
  height: 17px;
}

.ss-btn-white {
  background: var(--ss-plate);
}

.ss-btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: var(--ss-t1);
}

.ss-btn-sm .icon {
  width: 16px;
  height: 16px;
  color: var(--ss-muted);
}

.ss-btn-primary {
  padding: 0 5px 0 20px;
  background: var(--ss-pill);
  color: #ffffff;
}

.ss-btn-sm.ss-btn-primary {
  padding: 0 4px 0 14px;
}

.ss-knob {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--ss-signal);
  color: var(--ss-on-signal);
  transition: transform 260ms var(--ss-spring);
}

.ss-btn-sm .ss-knob {
  width: 24px;
  height: 24px;
}

/* A pill never runs past its line: where its words are wider than a phone's line (a small phone's, or any in the
   iPhone app's large type), they take a second line, its knob beside them. */
@media (max-width: 640px) {
  .ss-btn {
    max-width: 100%;
    height: auto;
    min-height: 38px;
    padding-block: 5px;
    line-height: 1.2;
    white-space: normal;
  }

  .ss-btn-sm {
    min-height: 32px;
    padding-block: 7px;
    line-height: 1.25;
  }

  .ss-btn-sm.ss-btn-primary {
    padding-block: 4px;
  }
}

.ss-knob .icon {
  width: 16px;
  height: 16px;
  color: var(--ss-on-signal);
  stroke-width: 1.8;
}

/* The way out of every dialog: search's own orange knob on its graphite ring, holding a clear X. */
.ss .ss-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-pill);
  color: var(--ss-on-signal);
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .ss-close .icon {
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  background: var(--ss-signal);
  color: var(--ss-on-signal);
  stroke-width: 2.4;
}

.ss .ss-close:active {
  transform: scale(0.94);
}

.ss .ss-close:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 3px;
  border-radius: 50%;
}

@media (hover: hover) {
  .ss .ss-close:hover {
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }

  .ss-btn:hover {
    background: var(--ss-well-2);
  }

  .ss-btn-white:hover {
    background: var(--ss-well);
  }

  .ss-btn-primary:hover {
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }

  .ss-btn-primary:hover .ss-knob {
    transform: translate(2px, -1px) scale(1.06);
  }
}

.ss-lamp {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--ss-signal);
}

/* A row that scrolls sideways fades at each side with more past it (43-cues.js): no line, no shadow. */
.ss .has-more-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.ss .has-more-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
  mask-image: linear-gradient(to right, transparent, #000 36px);
}

.ss .has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

/* Shared parts that are one element take their plate from a 6px seat border: the inner corner is then
   exactly 24px inside a 30px seat. */
.ss .q,
.ss .rcard,
.ss .door,
.ss .filters,
.ss .w-card,
.ss .empty,
.ss .finder__source,
.ss .search-page .hits:not(:empty) {
  border: var(--ss-bezel) solid var(--ss-seat);
  border-radius: 30px;
  background: var(--ss-plate);
  box-shadow: none;
}

/* ---------- Motion: plates settle into the tray ---------- */

@keyframes ss-settle {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ss-settle,
.ss .arrive {
  animation: ss-settle 360ms var(--ss-spring) backwards;
  animation-delay: calc(var(--i, 0) * 38ms);
}

.ss::view-transition-old(root) {
  animation-duration: 160ms;
}

.ss::view-transition-new(root) {
  animation-duration: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  .ss-settle,
  .ss .arrive {
    animation: ss-fade 160ms linear backwards;
  }
}

@keyframes ss-fade {
  from {
    opacity: 0;
  }
}

/* ---------- Pages: their heads ---------- */

.ss .page-head,
.ss-page-head {
  padding: 0 0 36px;
}

.ss .page-head h1,
.ss .rh__title,
.ss .lost h1 {
  max-width: min(18ch, calc(100% - 250px));
  font-size: var(--ss-t5);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.ss .page-head .lead {
  max-width: 68ch;
  margin-top: 16px;
  color: var(--ss-ink);
}

.ss .crumbs {
  gap: 2px;
  margin-left: -8px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .crumbs a {
  padding: 4px 8px;
  border-radius: 10px;
}

@media (hover: hover) {
  .ss .crumbs a:hover {
    background: var(--ss-plate);
    color: var(--ss-ink);
  }
}

.ss .crumbs .icon--chevron {
  width: 14px;
  height: 14px;
  color: var(--ss-muted);
}

.ss .crumbs__kind {
  width: 28px;
  height: 28px;
  margin: 0 4px 0 8px;
  border-radius: 50%;
  background: var(--ss-plate);
}

.ss .crumbs__kind .icon {
  width: 16px;
  height: 16px;
}

/* ---------- The home page ---------- */

.ss-home-head .hero__search {
  max-width: 44rem;
  margin-top: 22px;
}

.ss-lead {
  max-width: 66ch;
  margin-top: 14px;
  color: var(--ss-ink);
}

.ss-since {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
}

.ss-since-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ss-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ss-gap);
}

.ss-s4 { grid-column: span 4; }
.ss-s5 { grid-column: span 5; }
.ss-s7 { grid-column: span 7; }
.ss-s8 { grid-column: span 8; }
.ss-s12 { grid-column: 1 / -1; }

.ss-rows li + li {
  margin-top: 6px;
}

.ss-nrow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

@media (hover: hover) {
  .ss-nrow:hover {
    background: var(--ss-well-2);
  }
}

.ss-nrow:active {
  transform: scale(0.99);
}

@media (hover: hover) {
  .ss-nrow:hover .ss-knob {
    transform: translate(2px, -1px) scale(1.06);
  }
}

.ss-n-ico,
.ss-s-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ss-plate);
}

.ss-n-ico .icon {
  width: 20px;
  height: 20px;
}

.ss-grow {
  min-width: 0;
}

.ss-n-title {
  display: block;
  font-weight: 500;
  line-height: 1.35;
}

.ss-n-detail {
  display: block;
  margin-top: 2px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.4;
}

.ss-n-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.ss-n-count b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ss-n-count span {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.3;
  white-space: nowrap;
}

.ss-num {
  font-variant-numeric: proportional-nums;
}

.ss-num + .ss-meta {
  margin-top: 10px;
}

.ss-meter {
  display: flex;
  gap: 4px;
  height: 58px;
  margin-top: 18px;
}

.ss-seg {
  display: flex;
  align-items: flex-end;
  min-width: 6px;
  flex-basis: 0;
  padding: 8px 10px;
  overflow: hidden;
  border-radius: 14px;
  container-type: inline-size;
}

.ss-seg span {
  font-size: var(--ss-t1);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

@container (max-width: 96px) {
  .ss-seg span {
    display: none;
  }
}

.ss-tone-0 { background: var(--ss-pill); color: #ffffff; }
.ss-tone-1 { background: var(--ss-muted); color: #ffffff; }
.ss-tone-2 { background: var(--ss-closed); color: var(--ss-ink); }
.ss-tone-3 { background: #b9bec6; color: var(--ss-ink); }
.ss-tone-4 { background: var(--ss-seat); color: var(--ss-ink); }
.ss-tone-5 { background: var(--ss-well-2); color: var(--ss-ink); }

.ss-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  margin-top: 12px;
}

.ss-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--ss-t1);
}

.ss-legend i {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 4px;
}

.ss-legend b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.ss-sub-h {
  margin-top: 20px;
}

.ss-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.ss-q {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out);
}

@media (hover: hover) {
  a.ss-q:hover {
    background: var(--ss-well-2);
  }
}

.ss-q.is-later {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--ss-well-2);
}

.ss-q-l {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss-q-l .icon {
  width: 15px;
  height: 15px;
}

.ss-q-a {
  font-weight: 700;
}

.ss-q-s {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.35;
}

/* The sample's round: here, the guide's four steps, each a seat with its number on a disc. */
.ss-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  counter-reset: step;
}

.ss-steps li,
.ss-promises li {
  min-width: 0;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss-steps li {
  counter-increment: step;
}

.ss-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--ss-pill);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.ss-steps li.is-signal::before {
  background: var(--ss-signal);
  color: var(--ss-on-signal);
}

.ss-st-name {
  display: block;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.ss-st-text {
  display: block;
  margin-top: 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

/* Beside the example record the four steps sit two by two. */
.ss-read .ss-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ss-promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ss-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100% - 46px);
  color: var(--ss-ink);
  text-decoration: none;
}

.ss-example .ss-big {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
  text-wrap: balance;
}

@media (hover: hover) {
  .ss-example:hover .ss-big {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
  }
}

.ss-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 6px;
  margin: 6px 0 2px;
}

.ss-meter-cell {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ss-well);
}

.ss-meter-cell.is-signal {
  background: var(--ss-signal-tint);
}

.ss-m-val {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--ss-t3);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ss-m-val .ss-lamp {
  align-self: center;
}

.ss-m-val small {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  letter-spacing: 0;
}

.ss-m-label {
  display: block;
  margin-top: 2px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.35;
}

.ss-example-go {
  margin-top: auto;
  padding-top: 6px;
}

@media (hover: hover) {
  .ss-example:hover .ss-btn-white {
    background: var(--ss-well);
  }
}

.ss-new {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ss-new > div {
  min-width: 0;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss-new-h {
  margin-bottom: 10px;
}

.ss-new .ss-s-ico {
  background: var(--ss-plate);
}

.ss-new a {
  text-decoration: none;
}

@media (hover: hover) {
  .ss-new a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.ss-since-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 4px 0;
}

.ss-since-list li + li {
  margin-top: 8px;
}

.ss-s-ico {
  width: 28px;
  height: 28px;
  background: var(--ss-well);
}

.ss-s-ico .icon {
  width: 16px;
  height: 16px;
}

.ss-s-title {
  display: block;
  font-weight: 700;
  line-height: 1.35;
}

a.ss-s-title {
  text-decoration: none;
}

@media (hover: hover) {
  a.ss-s-title:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.ss-s-detail {
  display: block;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.4;
}

/* ---------- Shared controls ---------- */

.ss .btn {
  min-height: 40px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  font-weight: 500;
  box-shadow: none;
  transition: transform 140ms var(--ss-spring), background-color 180ms var(--ss-out);
}

@media (hover: hover) {
  .ss .btn:hover {
    border: 0;
    background: var(--ss-well);
    box-shadow: none;
    transform: none;
  }
}

.ss .btn:active {
  transform: scale(0.97);
}

/* On a white plate or sheet a plain pill takes the well tone, as the sample's do. */
.ss .q .btn,
.ss .rcard .btn,
.ss .w-card .btn,
.ss .filters .btn,
.ss .finder__none .btn,
.ss .guide .btn,
.ss .cmp .btn,
.ss .sheet .btn,
.ss .palette .btn,
.ss .empty .btn,
.ss-core .btn {
  background: var(--ss-well);
}

@media (hover: hover) {
  .ss .q .btn:hover,
  .ss .rcard .btn:hover,
  .ss .w-card .btn:hover,
  .ss .filters .btn:hover,
  .ss .finder__none .btn:hover,
  .ss .guide .btn:hover,
  .ss .cmp .btn:hover,
  .ss .sheet .btn:hover,
  .ss .palette .btn:hover,
  .ss .empty .btn:hover,
  .ss-core .btn:hover {
    background: var(--ss-well-2);
  }
}

.ss .btn--small {
  min-height: 34px;
  height: 34px;
  padding: 0 14px;
  font-size: var(--ss-t1);
}

.ss .btn[disabled] {
  color: var(--ss-muted);
  cursor: default;
}

/* Every primary pill: graphite, with the orange knob nested at its end. */
.ss .btn.btn--primary {
  gap: 12px;
  padding: 0 5px 0 20px;
  background: var(--ss-pill);
  color: #ffffff;
}

.ss .btn.btn--primary::after {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--ss-signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1e23' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 260ms var(--ss-spring);
}

@media (hover: hover) {
  .ss .btn.btn--primary:hover {
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }
}

@media (hover: hover) {
  .ss .btn.btn--primary:hover::after {
    transform: translate(2px, -1px) scale(1.06);
  }
}

.ss .btn.btn--primary[disabled]::after {
  background-color: var(--ss-closed);
}

.ss .link-btn {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

@media (hover: hover) {
  .ss .link-btn:hover {
    color: var(--ss-ink);
  }
}

.ss .icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: var(--ss-muted);
}

@media (hover: hover) {
  .ss .icon-btn:hover {
    background: var(--ss-well);
    color: var(--ss-ink);
  }
}

.ss .badge {
  background: var(--ss-pill);
  color: #ffffff;
}

/* ---------- Search: the field, as you type, the palette ---------- */

.ss .field {
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  box-shadow: none;
  view-transition-name: none;
}

.ss .field--hero {
  height: 60px;
}

.ss .field:focus-within {
  border: 0;
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
  box-shadow: none;
}

.ss .field__icon {
  width: 52px;
  color: var(--ss-muted);
}

/* The field shows its own focus ring, so the input inside it doesn't draw a second one. */
.ss .field__input:focus-visible,
.ss .finder__search input:focus-visible,
.ss .palette__input:focus-visible {
  outline: none;
}

/* What is typed, and the placeholder, stop short of the button and end in an ellipsis rather than pass under it.
   A plain text box everywhere, so no browser's own search styling widens it. */
.ss .field__input {
  padding-right: 10px;
  overflow: hidden;
  font-size: var(--ss-t2);
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.ss .field__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.ss .field__input::placeholder {
  overflow: hidden;
  color: var(--ss-muted);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The search button is a primary pill: its word, then the orange knob holding the arrow. */
.ss .field__go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: 44px;
  margin-right: 8px;
  padding: 0 6px 0 20px;
  border-radius: 999px;
  background: var(--ss-pill);
  color: #ffffff;
  font-weight: 500;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .field__go::before {
  content: "Search";
}

.ss .field__go .icon {
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  background: var(--ss-signal);
  color: var(--ss-on-signal);
  stroke-width: 1.8;
  transition: transform 260ms var(--ss-spring);
}

@media (hover: hover) {
  .ss .field__go:hover {
    transform: none;
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }
}

@media (hover: hover) {
  .ss .field__go:hover .icon {
    transform: translateX(2px);
  }
}

.ss .field__go:active {
  transform: scale(0.97);
}

/* The field is a container: where it is narrow, its button is the knob alone, so the words keep the room. */
.ss .field {
  container-type: inline-size;
}

@container (max-width: 30rem) {
  .ss .field .field__go {
    gap: 0;
    padding: 0 6px;
  }

  .ss .field .field__go::before {
    content: none;
  }
}

.ss .drop {
  top: calc(100% + 8px);
  padding: 8px;
  border: 0;
  border-radius: 22px;
  background: var(--ss-plate);
  box-shadow: var(--ss-float);
  transform: scale(0.97) translateY(-4px);
  transition: opacity 160ms var(--ss-out), transform 220ms var(--ss-spring);
}

.ss .drop.is-open {
  transform: none;
}

.ss .hits__label {
  padding: 8px 12px 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .hit {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 52px;
  padding: 7px 12px;
  border-radius: 14px;
}

.ss .hit.is-active {
  background: var(--ss-well);
}

@media (hover: hover) {
  .ss .hit:hover {
    background: var(--ss-well);
  }
}

.ss .hit__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ss-well);
  color: var(--ss-ink);
}

.ss .hit.is-active .hit__icon {
  background: var(--ss-plate);
  color: var(--ss-ink);
  transform: none;
}

@media (hover: hover) {
  .ss .hit:hover .hit__icon {
    background: var(--ss-plate);
    color: var(--ss-ink);
    transform: none;
  }
}

.ss .hit__icon .icon {
  width: 18px;
  height: 18px;
}

/* A recall's name is a sentence of CPSC's or FDA's: it takes two lines before an ellipsis, so its hazard isn't cut off. */
.ss .hit__name {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ss .hit__name mark {
  text-decoration: underline 2px var(--ss-ink);
}

.ss .hit__facts {
  color: var(--ss-muted);
}

.ss .hit__flag {
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .hit__flag::before {
  width: 10px;
  height: 10px;
  box-shadow: none;
}

/* On a phone a result's name takes up to three lines, and its line two, before an ellipsis: a home provider's
   name is its town and ZIP code, the only words that tell it from the next one. */
@media (max-width: 600px) {
  .ss .hit__name,
  .ss .hit__where {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .ss .hit__name {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* The palette's first words to try: pills like every other in the look, round at the ends, not a browser's own
   square buttons. */
.ss .suggest .chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font: inherit;
  font-size: var(--ss-t1);
  font-weight: 500;
  cursor: pointer;
}

@media (hover: hover) {
  .ss .suggest .chip:hover {
    border: 0;
    background: var(--ss-well-2);
  }
}

.ss .palette {
  width: min(640px, calc(100vw - 32px));
  overflow: clip;
  border: 0;
  border-radius: 28px;
  background: var(--ss-plate);
  box-shadow: var(--ss-float);
  transform: scale(0.94) translateY(6px);
  transition:
    opacity 200ms var(--ss-out),
    transform 340ms var(--ss-spring),
    overlay 340ms allow-discrete,
    display 340ms allow-discrete;
}

.ss .palette[open] {
  transform: none;
}

@starting-style {
  .ss .palette[open] {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
}

.ss .palette::backdrop {
  background: var(--ss-scrim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The field in its well, and beside it, not in it, the way out. */
.ss .palette__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 10px 4px;
}

.ss .palette__bar {
  flex: 1;
  min-width: 0;
  gap: 12px;
  padding: 0 16px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-well);
}

/* Its input draws no ring of its own (as in every field), so the well draws it, as the other fields do. */
.ss .palette__bar:focus-within {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

.ss .palette__bar .icon {
  color: var(--ss-muted);
}

.ss .palette__input {
  height: 52px;
  overflow: hidden;
  font-size: var(--ss-t2);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.ss .palette__input::placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss .palette__body {
  padding: 6px 8px 8px;
}

.ss .palette__foot {
  border-top: 0;
  padding: 10px 22px 16px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .hits__empty {
  color: var(--ss-muted);
}

/* ---------- A record: its head, on the tray's ground ---------- */

.ss .rh {
  padding: 0 0 28px;
}

.ss .rh__title {
  margin-top: 16px;
}

.ss .rh__where {
  max-width: 700px;
  margin-top: 16px;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
}

.ss .rh__address {
  margin-top: 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

/* Flags are lamps: what the agency itself flagged, in words, on the signal's tint. */
.ss .flags {
  gap: 6px;
  margin-top: 16px;
}

.ss .flag {
  min-height: 30px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: var(--ss-signal-tint);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .flag::before {
  width: 10px;
  height: 10px;
  background: var(--ss-signal);
  animation: none;
}

.ss .rh__actions {
  gap: 10px 14px;
  margin-top: 20px;
}

.ss .rh__official {
  gap: 6px 18px;
  margin-top: 14px;
  color: var(--ss-muted);
}

.ss .watch {
  gap: 6px;
}

.ss .watch-btn {
  min-height: 40px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  font-weight: 500;
  box-shadow: none;
}

@media (hover: hover) {
  .ss .watch-btn:hover {
    border: 0;
    background: var(--ss-well);
    box-shadow: none;
  }
}

.ss .watch-btn[aria-pressed="true"] {
  background: var(--ss-pill);
  color: #ffffff;
}

.ss .watch-btn[aria-pressed="true"] .watch-btn__icon .icon circle {
  fill: #ffffff;
  stroke: #ffffff;
}

.ss .burst {
  box-shadow:
    0 -15px 0 var(--ss-closed), 10.6px -10.6px 0 var(--ss-closed), 15px 0 0 var(--ss-closed), 10.6px 10.6px 0 var(--ss-closed),
    0 15px 0 var(--ss-closed), -10.6px 10.6px 0 var(--ss-closed), -15px 0 0 var(--ss-closed), -10.6px -10.6px 0 var(--ss-closed);
}

.ss .watch__note {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .idents {
  gap: 6px;
}

.ss .ident {
  min-height: 40px;
  padding: 0 4px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  font-size: var(--ss-t1);
}

.ss .ident__label {
  color: var(--ss-muted);
}

.ss .copy {
  width: 32px;
  height: 32px;
  color: var(--ss-muted);
}

@media (hover: hover) {
  .ss .copy:hover {
    background: var(--ss-well);
  }
}

.ss .copy__tip {
  border-radius: 10px;
  background: var(--ss-pill);
  color: #ffffff;
  font-weight: 500;
}

/* At a glance: one plate, its figures seated side by side in a well tray. */
.ss .glance {
  margin-bottom: 16px;
  padding: 22px 24px 20px;
  border: var(--ss-bezel) solid var(--ss-seat);
  border-radius: 30px;
  background: var(--ss-plate);
}

.ss .glance__list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 22px;
  background: var(--ss-well);
}

.ss .tile__link {
  padding: 16px 18px 16px;
  border: 0;
  border-radius: 17px;
  background: var(--ss-plate);
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

/* Under the pointer a tile settles a third of the way into its well, from its own tones in either light: #fafafb by
   day, and at night a graphite a shade under its plate, so its light words never land on white. */
@media (hover: hover) {
  .ss .tile__link:hover {
    border: 0;
    background: color-mix(in srgb, var(--ss-plate) 67%, var(--ss-well));
    box-shadow: none;
    transform: none;
  }
}

.ss .tile__link:active {
  transform: scale(0.985);
}

.ss .tile__value {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: proportional-nums;
  /* Its words sit in a row with the attention lamp, so a word wider than the tile ("Children/Adolescents,") breaks
     at the tile's edge rather than widening the page. */
  overflow-wrap: anywhere;
}

.ss .tile__value--words {
  font-size: 1.75rem;
}

.ss .tile__unit {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  letter-spacing: 0;
}

.ss .tile__label {
  margin-top: 8px;
  font-weight: 500;
}

.ss .tile__base {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .tile__go {
  top: 16px;
  right: 16px;
  color: var(--ss-muted);
}

.ss .tile--attention .tile__link {
  border: 0;
  background: var(--ss-signal-tint);
}

.ss .tile--attention .tile__value {
  color: var(--ss-ink);
}

.ss .tile--attention .tile__value::before {
  content: "";
  order: -1;
  width: 12px;
  height: 12px;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: var(--ss-signal);
}

.ss .glance__note {
  margin-top: 12px;
}

/* ---------- A record's body: the contents as tray links, the questions as plates ---------- */

.ss .record-body {
  gap: var(--ss-gap);
  padding-top: 0;
}

@media (min-width: 1100px) {
  .ss .record-body {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 28px;
  }
}

.ss .toc {
  top: calc(var(--nav-h) + 10px);
  margin-inline: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-seat);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ss .toc ul {
  gap: 2px;
}

.ss .toc a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .toc a.is-active {
  color: var(--ss-ink);
}

@media (hover: hover) {
  .ss .toc a:hover {
    color: var(--ss-ink);
  }
}

.ss .toc a.is-active {
  font-weight: 700;
}

.ss .toc__ind {
  border-radius: 999px;
  background: var(--ss-plate);
}

@media (min-width: 1100px) {
  .ss .toc {
    top: 24px;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .ss .toc ul {
    padding-left: 0;
    border-left: 0;
  }

  .ss .toc a {
    height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: var(--ss-t2);
  }

  .ss .toc__ind {
    left: 0;
    width: var(--tw, 0);
    border-radius: 14px;
    transform: translate(var(--tx, 0), var(--ty, 0));
  }
}

/* Every question is laid out from the start (the shared sheet skips the ones out of view and guesses their
   height), so a link from the contents lands on its question rather than past it. */
.ss .q {
  margin-top: var(--ss-gap);
  padding: 28px 30px 30px;
  content-visibility: visible;
}

.ss .record-body__main > .q:first-child {
  margin-top: 0;
  padding-top: 28px;
}

.ss .q > h2 {
  max-width: none;
  margin-bottom: 18px;
  font-size: var(--ss-t3);
}

.ss .q__intro {
  max-width: var(--measure);
  margin: -8px 0 18px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

/* A fact is a well; its source sits beside it on a small white plate of its own. */
.ss .row {
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--ss-well);
}

@media (min-width: 1000px) {
  .ss .row {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 32px;
  }
}

.ss .row + .row,
.ss .row + .findings,
.ss .findings + .row,
.ss .table-wrap + .row,
.ss .row + .table-wrap,
.ss .more + .row,
.ss .row + .more,
.ss .findings + .more,
.ss .more + .more,
.ss .table-wrap + .more,
.ss .row + .provider-area {
  margin-top: 10px;
}

.ss .row--quiet .row__body {
  color: var(--ss-muted);
}

.ss .row__body > h3 + .note,
.ss .row__body > h3 + p {
  margin-top: 4px;
}

.ss .src {
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--ss-plate);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.45;
}

@media (hover: hover) {
  .ss .row:hover > .src {
    color: var(--ss-ink);
  }
}

.ss .said {
  gap: 6px;
}

.ss .said li {
  padding-left: 18px;
}

.ss .said li::before {
  top: 0.62em;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--ss-muted);
}

/* A source's own long words (a web address, a dataset's id, a rule's citation) break where they must rather
   than push a phone's page wider than its screen. */
.ss .said,
.ss .findings,
.ss .finding-list,
.ss .source-list {
  grid-template-columns: minmax(0, 1fr);
}

.ss .said li,
.ss .source-list li,
.ss .findings > details > summary,
.ss .finding,
.ss .finding-list > p {
  overflow-wrap: anywhere;
}

.ss .ident {
  max-width: 100%;
}

.ss .ident > :not(.copy) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* What needs attention: the lamp and the signal's tint, never the signal as text. */
.ss .hl {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--ss-signal-tint);
  background-image: none;
  transition: none;
}

.ss .attention {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ss-signal-tint);
}

.ss .attention::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--ss-signal);
}

.ss .attention .hl {
  padding: 0;
  background: none;
}

.ss .fig__line {
  gap: 4px 14px;
}

.ss .fig__num {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: proportional-nums;
}

.ss .fig__label {
  font-size: var(--ss-t2);
  font-weight: 500;
}

.ss .fig__base {
  margin-top: 8px;
  color: var(--ss-ink);
}

.ss .fig__when {
  margin-top: 2px;
  color: var(--ss-muted);
}

/* The sample's bars: 14px tracks on white, the figure in graphite, its baseline in the closed tone. */
.ss .bars {
  gap: 8px 12px;
  margin-top: 14px;
}

.ss .bar__track {
  height: 14px;
  border-radius: 7px;
  background: var(--ss-plate);
}

.ss .bar__fill {
  border-radius: 7px;
  background: var(--ss-ink);
  transition: transform 380ms var(--ss-spring) calc(120ms + var(--d, 0ms));
}

.ss .bar--base .bar__fill {
  background: var(--ss-closed);
}

.ss .bar__text {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-variant-numeric: tabular-nums;
}

/* When findings happened: empty months are outlines, visits with nothing cited are neutral grey, and
   only cited months take the signal, as deep as the step the source gave them. */
.ss .heat {
  margin-top: 14px;
}

.ss .heat__grid th {
  color: var(--ss-muted);
  font-size: 13px;
  font-weight: 500;
}

.ss .heat__cell,
.ss .heat__chip {
  border-radius: 6px;
  background: var(--ss-cell);
  box-shadow: none;
}

.ss .heat__cell--none,
.ss .heat__chip.heat__cell--none {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-cell);
}

.ss .heat__cell--clear {
  background: var(--ss-cell);
  box-shadow: none;
}

.ss .heat__cell--cited {
  background: color-mix(in srgb, var(--ss-signal) calc(var(--heat) * 100%), var(--ss-plate));
  box-shadow: none;
}

/* The month being read: under the pointer, in focus, or the one last tapped on a touch screen. */
.ss .heat__cell:focus-visible,
.ss .heat__cell.is-read {
  box-shadow: inset 0 0 0 2px var(--ss-ink);
  outline: none;
}

@media (hover: hover) {
  .ss .heat__cell:hover {
    box-shadow: inset 0 0 0 2px var(--ss-ink);
    outline: none;
  }
}

.ss .heat__read {
  margin-top: 10px;
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .heat__legend {
  gap: 6px 16px;
  color: var(--ss-muted);
  font-size: 13px;
}

.ss .strip__cell {
  border-radius: 3px;
  background: var(--ss-cell);
}

.ss .strip__cell--none {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-cell);
}

.ss .strip__cell--cited {
  background: color-mix(in srgb, var(--ss-signal) calc(var(--heat) * 100%), var(--ss-plate));
}

/* Findings and long lists open in wells; each finding is a white bubble inside. */
.ss .findings {
  gap: 6px;
}

.ss .findings > details,
.ss .more {
  border: 0;
  border-radius: 16px;
  background: var(--ss-well);
}

@media (hover: hover) {
  .ss .findings > details:hover,
  .ss .more:hover {
    border: 0;
  }
}

.ss .findings > details[open] {
  box-shadow: none;
}

.ss .findings > details > summary,
.ss .more > summary {
  padding: 14px 52px 14px 16px;
}

@media (hover: hover) {
  .ss .findings > details > summary:hover,
  .ss .more > summary:hover {
    background: var(--ss-well-2);
  }
}

.ss .findings > details > summary::after,
.ss .more > summary::after,
.ss .quote-more > summary::after {
  border-color: var(--ss-muted);
}

.ss .group__title {
  font-weight: 700;
}

.ss .group__count {
  color: var(--ss-muted);
}

.ss .finding-list {
  gap: 6px;
  padding: 0 8px 8px;
}

.ss .finding {
  gap: 6px;
  max-width: none;
  padding: 12px 14px;
  border-top: 0;
  border-radius: 14px;
  background: var(--ss-plate);
}

.ss .finding:first-child {
  padding-top: 12px;
}

.ss .finding__quote {
  padding: 8px 12px;
  border-left: 0;
  border-radius: 4px 14px 14px 14px;
  background: var(--ss-well);
  color: var(--ss-ink);
}

.ss .finding__meta {
  color: var(--ss-muted);
}

.ss .more > :not(summary) {
  padding: 0 16px 16px;
}

.ss .more > .table-wrap,
.ss .row .table-wrap {
  margin: 0 8px 8px;
  padding: 4px 8px;
  border-radius: 14px;
  background: var(--ss-plate);
}

/* Tables: light row rules, this place's own row seated in a well. */
.ss .table {
  font-size: var(--ss-t2);
  font-variant-numeric: tabular-nums;
}

.ss .table caption {
  padding: 4px 0 10px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .table th,
.ss .table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--ss-rule);
}

.ss .table thead th {
  border-bottom-color: var(--ss-rule);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .table tbody th {
  font-weight: 500;
}

@media (hover: hover) {
  .ss .table tbody tr:hover {
    background: var(--ss-well);
  }
}

.ss .table .is-this {
  background: var(--ss-well);
}

.ss .table .is-this th,
.ss .table .is-this td {
  font-weight: 700;
}

.ss .table .is-this th::before {
  background: var(--ss-ink);
}

/*
 * Where a table is wider than its box (on a phone, or in a narrow sheet) each row reads as a short list instead:
 * its first cell as the line's title, then each of the rest under its column's name, a figure at the end of
 * its name's line as it sits in its column. Nothing is off the screen, and nothing needs scrolling sideways.
 */
.ss .table-wrap {
  container-type: inline-size;
}

@container (max-width: 30rem) {
  .ss .table:not(.th-ratings),
  .ss .table:not(.th-ratings) tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .ss .table:not(.th-ratings) caption {
    display: block;
  }

  .ss .table:not(.th-ratings) thead {
    display: none;
  }

  .ss .table:not(.th-ratings) tr {
    display: block;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--ss-rule);
  }

  .ss .table:not(.th-ratings) tr.is-this {
    margin: 4px 0;
    padding-inline: 12px;
    border-bottom: 0;
    border-radius: 12px;
  }

  .ss .table:not(.th-ratings) th,
  .ss .table:not(.th-ratings) td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ss .table:not(.th-ratings) tbody th {
    font-weight: 700;
  }

  .ss .table:not(.th-ratings) td {
    margin-top: 6px;
  }

  .ss .table:not(.th-ratings) td::before {
    content: attr(data-label);
    display: block;
    color: var(--ss-muted);
    font-size: var(--ss-t1);
    font-weight: 500;
  }

  /* A figure at the end of its column's name; where the two don't fit side by side, on the line under it, whole. */
  .ss .table:not(.th-ratings) td.n {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0 14px;
    text-align: right;
  }

  .ss .table:not(.th-ratings) td.n::before {
    flex: 1 1 auto;
    text-align: left;
  }

  .ss .table:not(.th-ratings) td:empty {
    display: none;
  }

  /*
   * A table of one figure a line keeps its lines: the name, and the figure at its end, as the caption says. The name
   * keeps at least 10rem beside its figure; where the two don't fit so (a figure in words, "57.25% (worse than the
   * national rate)", or large type), the figure takes the line under its name, still at its end, and wraps its words
   * there, so neither is ever squeezed to a letter a line or runs past the table.
   */
  .ss .table:not(.th-ratings) tr:has(> td.n:only-of-type) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
  }

  .ss .table:not(.th-ratings) tr:has(> td.n:only-of-type) th {
    flex: 1 1 10rem;
    min-width: 0;
  }

  .ss .table:not(.th-ratings) tr:has(> td.n:only-of-type) td {
    flex: 0 1 auto;
    margin-top: 0;
    margin-left: auto;
    text-wrap: balance;
  }

  .ss .table:not(.th-ratings) tr:has(> td.n:only-of-type) td::before {
    content: none;
  }
}

/* What a provider adds: recessed into the tray tone, below the seated record, with its own white plates. */
.ss .provider-area {
  margin-top: var(--ss-gap);
  padding: 22px 24px 24px;
  border: 0;
  border-radius: 30px;
  background: var(--ss-seat);
}

.ss .provider-area h2 {
  font-size: var(--ss-t3);
}

.ss .provider-area > p {
  margin-top: 6px;
  color: var(--ss-ink);
}

.ss .provider-area__slots {
  gap: 6px;
  margin-top: 14px;
}

.ss .provider-area__slots > div {
  padding: 16px 18px 18px;
  border-radius: 24px;
  background: var(--ss-plate);
}

.ss .provider-area__slots p {
  color: var(--ss-muted);
}

.ss .source-list {
  gap: 6px;
}

.ss .source-list li {
  padding: 12px 14px;
  border-bottom: 0;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .vin-check input {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  font-family: var(--font-text);
  font-weight: 500;
}

.ss .vin-check input:focus {
  border: 0;
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- Finders ---------- */

.ss .finder__head {
  padding-bottom: 18px;
}

.ss .finder__head .crumbs {
  margin-bottom: 12px;
}

.ss .finder__bar {
  top: calc(var(--nav-h) + 0px);
  gap: 8px;
  margin-inline: 0;
  padding: 10px 0;
  border: 0;
  background: var(--ss-ground);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ss .finder__search {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-muted);
}

.ss .finder__search:focus-within {
  border: 0;
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
  box-shadow: none;
}

.ss .finder__search input {
  font-size: var(--ss-t2);
  font-weight: 500;
}

.ss .finder__sort {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .finder__sort select {
  height: 48px;
  padding: 0 40px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  font-size: var(--ss-t2);
  font-weight: 500;
}

.ss .finder__sort::after {
  border-color: var(--ss-muted);
}

.ss .finder__filters-btn {
  height: 48px;
  min-height: 48px;
}

.ss .finder__layout {
  gap: var(--ss-gap);
  margin-top: 8px;
}

@media (min-width: 1000px) {
  .ss .finder__layout {
    grid-template-columns: 18.5rem minmax(0, 1fr);
  }
}

.ss .filters {
  top: calc(var(--nav-h) + 76px);
  max-height: calc(100svh - var(--nav-h) - 92px);
  padding: 18px 16px 16px;
  scrollbar-width: none;
}

.ss .filters::-webkit-scrollbar {
  display: none;
}

.ss .filters__head {
  align-items: center;
  padding: 0 4px 10px;
}

.ss .filters__head h2 {
  font-size: var(--ss-t3);
  font-weight: 700;
}

.ss .facet {
  margin-top: 6px;
  padding: 12px 14px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .facet legend {
  margin-bottom: 8px;
  font-size: var(--ss-t2);
  font-weight: 700;
}

.ss .facet__note {
  margin-top: 6px;
  color: var(--ss-muted);
  font-size: 13px;
}

.ss .check,
.ss .switch {
  padding: 5px 0;
  font-size: var(--ss-t2);
}

/* Every count as wide as the widest a list holds, so the switches beside them stand in one column. */
.ss .check__n {
  min-width: 3.6em;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* A choice that would leave nothing stays readable (AA), in the muted ink, as a control with nowhere to go is. */
.ss .check.is-empty,
.ss .switch.is-empty {
  opacity: 1;
}

.ss .check.is-empty .check__label,
.ss .switch.is-empty .check__label {
  color: var(--ss-muted);
}

.ss .check input {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ss-closed);
  border-radius: 7px;
  background: var(--ss-plate);
}

.ss .check input:checked {
  border-color: var(--ss-ink);
  background: var(--ss-ink);
}

.ss .check input:checked::after {
  border-color: var(--ss-on-ink);
  animation: none;
}

.ss .switch input {
  width: 38px;
  height: 22px;
  background: var(--ss-switch-off);
}

.ss .switch input::after {
  width: 18px;
  height: 18px;
  background: var(--ss-switch-knob);
  box-shadow: none;
}

.ss .switch input:checked {
  background: var(--ss-ink);
}

.ss .switch input:checked::after {
  background: var(--ss-plate);
  transform: translateX(16px);
}

.ss .seg {
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-seat);
}

.ss .seg__opt span {
  padding: 7px 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .seg__opt input:checked + span {
  color: var(--ss-ink);
  font-weight: 700;
}

.ss .seg__pill {
  top: 4px;
  height: calc(100% - 8px);
  background: var(--ss-plate);
  box-shadow: none;
}

/* An option that would leave nothing: its word still readable (AA) in either light, and lighter than the rest. */
.ss .seg__opt.is-empty span {
  font-weight: 400;
  opacity: 1;
}

.ss .range input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(var(--ss-ink), var(--ss-ink)) 0 0 / var(--fill, 100%) 100% no-repeat, var(--ss-well-2);
}

.ss .range input::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ss-well-2);
}

.ss .range input::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--ss-ink);
}

.ss .range input::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 0;
  background: var(--ss-ink);
  box-shadow: 0 0 0 4px var(--ss-plate);
}

.ss .range input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  background: var(--ss-ink);
}

.ss .range output {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .finder__status {
  gap: 8px 12px;
  min-height: 40px;
}

.ss .finder__count {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .finder__count [data-shown] {
  font-weight: 900;
}

.ss .active-chips {
  gap: 6px;
}

/* The filters in use sit on the list's white plate, so each takes the well white plates give their buttons and reads
   as a pill, not as loose words. */
.ss .active-chips button {
  height: 34px;
  padding: 0 10px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-well);
  font-size: var(--ss-t1);
  font-weight: 500;
}

@media (hover: hover) {
  .ss .active-chips button:hover {
    border: 0;
    background: var(--ss-well-2);
  }
}

.ss .finder__hint {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .rcards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: var(--ss-gap);
  margin-top: 10px;
}

.ss .rcard {
  gap: 6px;
  padding: 18px 20px 20px;
  transition: border-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

@media (hover: hover) {
  .ss .rcard:hover {
    border-color: var(--ss-seat-deep);
    box-shadow: none;
    transform: none;
  }
}

.ss .rcard:active {
  transform: scale(0.99);
}

.ss .rcard__top {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .rcard__go {
  width: 34px;
  height: 34px;
  background: var(--ss-well);
}

@media (hover: hover) {
  .ss .rcard:hover .rcard__go {
    background: var(--ss-pill);
    color: #ffffff;
    transform: none;
  }
}

.ss .rcard__name {
  margin-top: 6px;
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
}

.ss .rcard__where {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

/* The card's figures are the sample's meters: wells, the number heavy, its words beneath. */
.ss .rcard__stats {
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 0;
}

.ss .rcard__where + .rcard__stats {
  margin-top: 8px;
}

.ss .stat {
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ss-well);
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.3;
}

.ss .stat b {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ss-ink);
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.ss .stat b small {
  color: var(--ss-muted);
  font-size: 13px;
  font-weight: 500;
}

.ss .stat--attention {
  background: var(--ss-signal-tint);
}

.ss .stat--attention b {
  color: var(--ss-ink);
}

.ss .stat--attention b::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: var(--ss-signal);
}

.ss .rcard__flag {
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .rcard__flag::before {
  width: 10px;
  height: 10px;
}

.ss .rcard__heat {
  gap: 6px;
  margin-top: 6px;
  padding: 12px;
  border-top: 0;
  border-radius: 14px;
  background: var(--ss-well);
}

.ss .rcard__heat-words {
  color: var(--ss-muted);
  font-size: 13px;
}

.ss .pick {
  top: 18px;
  right: 18px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: var(--ss-pill);
  color: #ffffff;
  box-shadow: none;
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .pick:has(:checked) {
  color: #ffffff;
}

.ss .pick__box {
  width: 18px;
  height: 18px;
  border: 1.5px solid color-mix(in srgb, #ffffff 70%, transparent);
  border-radius: 6px;
}

.ss .pick:has(:checked) .pick__box {
  border-color: #ffffff;
  background: #ffffff;
  color: #1b1e23;
}

.ss .finder__more {
  margin-top: 18px;
}

.ss .finder__none {
  max-width: 40rem;
  margin-top: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .finder__none h3 {
  font-size: var(--ss-t3);
}

.ss .finder__none p {
  color: var(--ss-muted);
}

.ss .finder__source {
  margin-top: var(--ss-gap);
  padding: 16px 18px;
}

.ss .finder__source .src {
  padding: 0;
  background: none;
}

/* On a phone the filters rise in a sheet, as the sample's sheets do, stopping short of the top as every sheet does. */
.ss .sheet {
  max-height: calc(100dvh - var(--ss-sheet-top));
  padding: 0 max(18px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  border-radius: 26px 26px 0 0;
  background: var(--ss-plate);
  box-shadow: var(--ss-float);
  transition:
    transform 380ms var(--ss-spring),
    overlay 380ms allow-discrete,
    display 380ms allow-discrete;
}

.ss .sheet::backdrop {
  background: var(--ss-scrim);
}

/* In the sheet the head stays at the top while the filters scroll: the handle, the title, Clear all, and the way
   out. Beside the list, where the same filters sit in a column, there is nothing to close. */
.ss .filters__close {
  display: none;
}

.ss .sheet .filters__head {
  position: sticky;
  z-index: 2;
  top: 0;
  justify-content: flex-start;
  gap: 14px;
  padding: 26px 0 10px 4px;
  background: var(--ss-plate);
}

.ss .sheet .filters__head::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: var(--ss-well-2);
}

.ss .sheet .filters__head h2 {
  margin-right: auto;
}

.ss .sheet .filters__close {
  display: grid;
}

/* The compare tray: a graphite pill, like the sample's toasts, with its own white primary pill, centred on
   the workspace rather than the window. */
.ss .tray {
  left: calc(50% + var(--ss-tray-w) / 2);
  gap: 12px;
  padding: 6px 6px 6px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-pill);
  color: #ffffff;
  box-shadow: var(--ss-float);
}

.ss .tray__count {
  font-weight: 700;
}

.ss .tray__max {
  color: color-mix(in srgb, #ffffff 70%, transparent);
}

.ss .tray__list li {
  border: 0;
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color: #ffffff;
}

.ss .tray__list button {
  color: color-mix(in srgb, #ffffff 70%, transparent);
}

@media (hover: hover) {
  .ss .tray__list button:hover {
    background: color-mix(in srgb, #ffffff 18%, transparent);
    color: #ffffff;
  }
}

.ss .tray .btn.btn--primary {
  background: var(--ss-plate);
  color: var(--ss-ink);
}

@media (hover: hover) {
  .ss .tray .btn.btn--primary:hover {
    background: var(--ss-well);
  }
}

.ss .tray .icon-btn {
  color: color-mix(in srgb, #ffffff 70%, transparent);
}

@media (hover: hover) {
  .ss .tray .icon-btn:hover {
    background: color-mix(in srgb, #ffffff 14%, transparent);
    color: #ffffff;
  }
}

/* Side by side opens as a sheet rising from the bottom of the workspace, with its grabber. */
.ss .cmp,
.ss .guide {
  position: fixed;
  inset: 14px 14px 0 auto;
  width: min(1120px, calc(100vw - var(--ss-tray-w) - 56px));
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 32px 32px 0 0;
  background: var(--ss-plate);
  box-shadow: var(--ss-float);
  transform: translateY(64px);
  transition:
    opacity 240ms var(--ss-out),
    transform 380ms var(--ss-spring),
    overlay 380ms allow-discrete,
    display 380ms allow-discrete;
}

.ss .guide {
  width: min(900px, calc(100vw - var(--ss-tray-w) - 56px));
}

.ss .cmp[open],
.ss .guide[open] {
  transform: none;
}

@starting-style {
  .ss .cmp[open],
  .ss .guide[open] {
    opacity: 0;
    transform: translateY(64px);
  }
}

.ss .cmp::before,
.ss .guide::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 50%;
  width: 44px;
  height: 5px;
  margin-left: -22px;
  border-radius: 3px;
  background: var(--ss-well-2);
}

.ss .cmp::backdrop,
.ss .guide::backdrop {
  background: var(--ss-scrim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ss .cmp__head,
.ss .guide__head {
  padding: 18px 16px 6px 28px;
  border-bottom: 0;
}

.ss .cmp__head h2,
.ss .guide__head h2 {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .cmp__body {
  margin: 8px 16px 0;
}

.ss .cmp__table {
  font-size: var(--ss-t2);
  font-variant-numeric: tabular-nums;
}

.ss .cmp__table th,
.ss .cmp__table td {
  padding: 12px;
  border-bottom: 1px solid var(--ss-rule);
}

.ss .cmp__table thead th {
  background: var(--ss-plate);
  border-bottom-color: var(--ss-rule);
  box-shadow: 0 1px 0 var(--ss-rule);
}

.ss .cmp__table tbody th {
  background: var(--ss-plate);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .cmp__name {
  font-size: var(--ss-t3);
  font-weight: 700;
}

.ss .cmp__where {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .cmp__none {
  color: var(--ss-muted);
}

/* The one that leads on a line: marked in graphite, never in the signal, since it is not a warning. */
.ss .cmp__lead {
  font-weight: 700;
}

.ss .cmp__lead::after {
  width: 7px;
  height: 7px;
  background: var(--ss-ink);
}

.ss .cmp__note,
.ss .cmp__legend {
  border-top: 0;
  padding: 12px 28px 22px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

/* ---------- The guide, as a sheet ---------- */

.ss .guide__body {
  gap: 24px;
  padding: 10px 28px 18px;
}

.ss .guide .spec {
  padding: 18px 20px 20px;
  border: 0;
  border-radius: 22px;
  background: var(--ss-well);
  box-shadow: none;
}

.ss .spec__crumb {
  color: var(--ss-muted);
  font-weight: 500;
}

.ss .guide .spec__name,
.ss .spec__name {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
}

.ss .spec__part {
  border-radius: 16px;
  background: var(--ss-plate);
}

.ss .spec__provider {
  border: 0;
  background: var(--ss-seat);
}

.ss .spec__ring {
  border-radius: 16px;
  border-color: var(--ss-ink);
}

.ss .spec[data-at="attention"] .spec__ring {
  border-color: var(--ss-signal);
}

.ss .guide__n {
  color: var(--ss-muted);
  font-weight: 500;
}

.ss .guide__step h3 {
  margin-top: 8px;
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .guide__step p:last-child {
  color: var(--ss-muted);
  font-size: var(--ss-t2);
}

.ss .guide__foot {
  gap: 10px;
  padding: 12px 28px 24px;
  border-top: 0;
}

.ss .guide__dot {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--ss-well-2);
}

.ss .guide__dot.is-on {
  width: 18px;
  background: var(--ss-ink);
}

/* ---------- Places hub, what changed, search, watch, how it works, not found ---------- */

.ss .doors {
  gap: var(--ss-gap);
}

.ss .doors--hub {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.ss .door {
  gap: 6px;
  padding: 18px 20px 20px;
  transition: border-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

@media (hover: hover) {
  .ss a.door:hover {
    border-color: var(--ss-seat-deep);
    box-shadow: none;
    transform: none;
  }
}

.ss a.door:active {
  transform: scale(0.99);
}

.ss .door__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ss-well);
}

@media (hover: hover) {
  .ss a.door:hover .door__icon {
    background: var(--ss-well);
    color: var(--ss-ink);
    transform: none;
  }
}

.ss .door__name {
  margin-top: 10px;
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .door__line,
.ss .door__demo {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .door__foot {
  padding-top: 12px;
}

.ss .door__count {
  color: var(--ss-muted);
}

.ss .door__count b {
  font-size: var(--ss-t3);
  font-weight: 900;
}

.ss .door__go {
  width: 34px;
  height: 34px;
  background: var(--ss-well);
  color: var(--ss-ink);
}

@media (hover: hover) {
  .ss a.door:hover .door__go {
    background: var(--ss-pill);
    color: #ffffff;
    transform: none;
  }
}

.ss .changes-grid {
  gap: 6px;
}

.ss .change-group {
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .change-group .note {
  margin-top: 4px;
}

.ss .fresh__list {
  gap: 6px;
  margin-top: 10px;
}

.ss .fresh-item {
  padding: 10px 12px;
  border-top: 0;
  border-radius: 12px;
  background: var(--ss-plate);
}

.ss .fresh__list--wide .fresh-item {
  background: var(--ss-well);
}

.ss .fresh-item__what {
  font-weight: 700;
}

.ss .fresh-item__where {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .search-page__note {
  margin-top: 12px;
}

.ss .search-page .hits:not(:empty) {
  max-width: 52rem;
  margin-top: 24px;
  padding: 10px;
}

.ss .results-count {
  margin: 8px 12px 10px;
  font-size: var(--ss-t3);
  font-weight: 700;
}

.ss .w-list {
  gap: var(--ss-gap);
}

.ss .w-card {
  gap: 14px;
  padding: 16px 18px;
}

.ss .w-card .hit__icon {
  width: 44px;
  height: 44px;
}

.ss .w-card__name {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .w-card__line {
  color: var(--ss-ink);
}

.ss .w-card__latest {
  color: var(--ss-muted);
}

.ss .empty {
  max-width: 40rem;
  padding: 26px 28px 28px;
}

.ss .empty .mark {
  width: 48px;
  height: 48px;
  color: var(--ss-muted);
}

.ss .empty h2 {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .empty p {
  color: var(--ss-muted);
}

.ss .rules {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 6px;
  margin-top: 0;
}

.ss .rule {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 16px 16px;
  border-bottom: 0;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .rule h3 {
  font-size: var(--ss-t2);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.ss .rule p {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .lost {
  gap: 14px;
  max-width: 44rem;
  padding: 0 0 32px;
}

.ss .lost .mark {
  width: 56px;
  height: 56px;
}

.ss .lost .mark__ember {
  animation: none;
}

.ss .lost p {
  color: var(--ss-ink);
  font-size: var(--ss-t2);
}

/* ---------- Toasts ---------- */

.ss .toast {
  min-height: 48px;
  padding: 6px 6px 6px 20px;
  background: var(--ss-pill);
  color: #ffffff;
  font-size: var(--ss-t2);
  font-weight: 500;
  box-shadow: 0 24px 50px -24px rgb(17 20 26 / 0.5); /* it floats */
}

.ss .toast__dot {
  background: color-mix(in srgb, #ffffff 75%, transparent);
  box-shadow: none;
}

.ss .toast button {
  height: 36px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
  font-weight: 700;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1320px) {
  :root {
    --ss-tray-w: 248px;
    --ss-main-x: 36px;
  }
}

@media (max-width: 1180px) {
  .ss-s4,
  .ss-s5,
  .ss-s7,
  .ss-s8 {
    grid-column: 1 / -1;
  }

  .ss-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Drawn for the iPhone app (?embed=ios): there is no site bar, so nothing is kept clear for one. */
html[data-embed] {
  --nav-h: 0px;
}

/* A phone, or a narrow window: the tray folds away behind the menu button and rises as a drawer. */
@media (max-width: 960px) {
  :root {
    --ss-main-x: 18px;
    --nav-h: 68px;
  }

  body.ss {
    padding-left: 0;
  }

  .ss main.page {
    padding: 4px var(--ss-edge-r) 32px var(--ss-edge-l);
  }

  .ss-topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 68px;
    padding: 12px max(14px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px));
    background: var(--ss-ground);
  }

  .ss-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ss-bench {
    display: none;
  }

  .ss-tray {
    z-index: 70;
    width: min(320px, 86vw);
    padding: max(18px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    box-shadow: var(--ss-float);
    transform: translateX(-102%);
    transition:
      transform 380ms var(--ss-spring),
      overlay 380ms allow-discrete,
      display 380ms allow-discrete;
  }

  .ss-tray:not(:popover-open) {
    display: none;
  }

  .ss-tray:popover-open {
    transform: none;
  }

  @starting-style {
    .ss-tray:popover-open {
      transform: translateX(-102%);
    }
  }

  .ss-tray::backdrop {
    background: var(--ss-scrim);
  }

  .ss-tray-close {
    display: grid;
    width: 44px;
    height: 44px;
  }

  .ss-tray-theme {
    display: none;
  }

  .ss .progress {
    left: 0;
  }

  .ss .page-head h1,
  .ss .rh__title,
  .ss .lost h1 {
    max-width: none;
  }

  .ss .cmp {
    inset: 10px 0 0 0;
    width: auto;
    border-radius: 26px 26px 0 0;
  }

  .ss .tray {
    left: 50%;
  }

  /*
   * Every dialog is a sheet laid over the page: it rises from the foot with its top corners rounded, stops short
   * of the top so a strip of the dimmed page stays in view, and carries a handle that says it is a card on top.
   * Its contents keep clear of the notch and the home bar.
   */
  .ss .fd-sheet::before,
  .ss .fd-cmp::before,
  .ss .palette::before,
  .ss .guide::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--ss-well-2);
    pointer-events: none;
  }

  .ss .palette {
    inset: var(--ss-sheet-top) 0 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-radius: 26px 26px 0 0;
    transform: translateY(32px);
  }

  .ss .palette[open] {
    transform: none;
  }

  @starting-style {
    .ss .palette[open] {
      opacity: 0;
      transform: translateY(32px);
    }
  }

  .ss .palette__top {
    margin: 22px 12px 4px 14px;
  }
}

/* The smallest phones: the bar keeps the mark without the word, so the switch, search and the menu all fit. */
@media (max-width: 359px) {
  .ss-topbar .ss-brand-word {
    display: none;
  }
}

/* A phone's keys have no arrow keys, Escape, Enter or a shortcut for search to hint at. */
@media (hover: none) and (pointer: coarse) {
  .ss .palette__foot,
  .ss-capture .ss-keys,
  .ss .hr-every kbd {
    display: none;
  }
}

/* A phone on its side has little height to spare: the bar scrolls away with the page, and only a record's
   contents stay at the top while its questions are read. */
@media (max-width: 960px) and (max-height: 500px) {
  :root {
    --nav-h: 0px;
  }

  .ss-topbar {
    position: relative;
  }
}

@media (max-width: 720px) {
  body.ss {
    padding-bottom: 0;
  }

  .ss .tray {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .ss .toasts {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  :root {
    --ss-t5: 2.5rem;
    --ss-gap: 14px;
  }

  .ss-display,
  .ss .page-head h1,
  .ss .rh__title,
  .ss .lost h1 {
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  .ss-plate {
    border-radius: 26px;
  }

  .ss-core {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .ss .q,
  .ss .rcard,
  .ss .door,
  .ss .filters,
  .ss .w-card,
  .ss .empty,
  .ss .glance,
  .ss .finder__source {
    border-radius: 26px;
  }

  .ss .q,
  .ss .glance {
    padding: 18px 16px;
  }

  .ss-nrow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ss-n-ico,
  .ss-nrow .ss-n-count span {
    display: none;
  }

  .ss-nrow .ss-btn {
    display: none;
  }

  .ss-new,
  .ss-promises,
  .ss-steps,
  .ss-read .ss-steps {
    grid-template-columns: 1fr;
  }

  .ss-steps li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 12px;
  }

  .ss-steps li::before {
    grid-row: span 2;
    margin: 0;
  }

  .ss-since > p {
    width: 100%;
  }

  .ss .field__icon {
    width: 36px;
  }

  .ss .field__go {
    padding: 0 5px 0 16px;
  }

  .ss .glance__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A tile left over takes the line's whole width, as a list's facts do, never half of it beside nothing. */
  .ss .glance__list > .tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .ss .tile__link {
    padding: 14px;
  }

  .ss .tile__value {
    font-size: 1.75rem;
  }

  .ss .tile__value--words {
    font-size: var(--ss-t3);
  }

  .ss .rcard__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ss .stat b {
    font-size: var(--ss-t2);
  }

  .ss-foot-core {
    padding: 18px 16px;
  }
}

/* An example figure's baseline, under its label: a number never stands alone. */
.ss-m-base {
  display: block;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- Touch ---------- */

/* A phone zooms into any field set under 16px when it is tapped: what is typed is 16px there, and the
   placeholder keeps the look's 15px. */
@media (pointer: coarse), (max-width: 640px) {
  .ss .field__input,
  .ss .palette__input,
  .ss .vin-check input {
    font-size: 16px;
  }

  .ss .field__input::placeholder,
  .ss .palette__input::placeholder {
    font-size: var(--ss-t2);
  }
}

/*
 * A finger's reach: on a touch screen every control answers a tap 44px tall and wide at least. A small one keeps
 * its look, and an invisible margin of its own reaches out to 44px around it; one that sits in a row that scrolls
 * reaches into the row's own padding, which the row lends it without moving.
 */
@media (pointer: coarse) {
  .ss-brand {
    min-width: 44px;
    min-height: 44px;
  }

  .ss .crumbs a,
  .ss .ss-btn,
  .ss .hr-pill,
  .ss .hr-chip,
  .ss .rc-pill,
  .ss .watch-btn,
  .ss .rc-back,
  .ss .rc-step,
  .ss .copy,
  .ss .link-btn,
  .ss .fd-view__opt,
  .ss .fd-round,
  .ss .fd-cmp__remove,
  .ss .suggest .chip,
  .ss .active-chips button,
  .ss .rc-side__all,
  .ss .rc-side__list a,
  .ss .ss-foot-links a,
  .ss .rc-side .toc a,
  .ss .table a,
  .ss .pg-tracker a,
  .ss .ss-try a,
  .ss .fd-cmp__name {
    position: relative;
  }

  .ss .crumbs a::after,
  .ss .ss-btn::after,
  .ss .hr-pill::after,
  .ss .hr-chip::after,
  .ss .rc-pill::after,
  .ss .watch-btn::after,
  .ss .rc-back::after,
  .ss .rc-step::after,
  .ss .copy::after,
  .ss .link-btn::after,
  .ss .fd-view__opt::after,
  .ss .fd-round::after,
  .ss .fd-cmp__remove::after,
  .ss .suggest .chip::after,
  .ss .active-chips button::after,
  .ss .rc-side__all::after,
  .ss .rc-side__list a::after,
  .ss .ss-foot-links a::after,
  .ss .rc-side .toc a::after,
  .ss .table a::after,
  .ss .pg-tracker a::after,
  .ss .ss-try a::after,
  .ss .fd-cmp__name::after {
    content: "";
    position: absolute;
    inset: min(0px, calc(50% - 22px));
  }

  /* (A record's row of contents and a list's order lend their options 44px in rules of their own files, after
     the rules there that would otherwise undo them: record.css and finder.css.) */

  /* A trail sits just under the bar, so its links reach down into the room below them rather than under the bar;
     a trail that takes two lines keeps them 44px apart, so neither line's reach is the other's. */
  .ss .crumbs {
    row-gap: 16px;
  }

  .ss .crumbs a::after {
    z-index: 1;
    top: -4px;
    bottom: -12px;
  }

  /* A slider answers a finger along a 44px band, its track and knob drawn as they are. */
  .ss .range input {
    height: 44px;
  }

  /* The foot's links stand 44px apart, so each one's reach is its own and not shared with the next. */
  .ss .ss-foot-links {
    gap: 0;
  }

  .ss .ss-foot-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* The menu's places and things, one a finger's height each. */
  .ss-nav-link {
    min-height: 44px;
  }

  /* A filter's choices are rows a finger can take, and a choice among a few is 44px tall in its seat. */
  .ss .check,
  .ss .switch {
    min-height: 44px;
  }

  .ss .seg__opt span {
    padding-block: 10px;
  }

  .ss .seg__opt input {
    inset: -4px 0;
  }

  /* Fields and pills that were a few pixels short take the 44px outright. */
  .ss .fd-search,
  .ss .fd-filters-btn,
  .ss .vin-check .btn,
  .ss .quote-more > summary {
    min-height: 44px;
  }

  .ss .fd-search,
  .ss .fd-filters-btn {
    height: 44px;
  }
}

/*
 * Soft Studio: the splash, and the shell between pages. Laid over look.css; the build adds it after it.
 *
 * The home page is the sample's sign-in made into a way in: no tray, a slim top line, the wordmark on a
 * white plate with the search, the two side cards in one seat, and a card for every kind of place and
 * thing. Every card is a plate in its 6px seat; at rest nothing has a shadow, and the orange is only the
 * knob that appears on the card under the pointer and the lamp on new findings.
 */

/* ---------- Page to page: under 400ms, and the shell stays where it is ---------- */

/* The pseudo-elements belong to the document's root, so they are styled there, not under body.ss. */
::view-transition-old(root) {
  animation-duration: 160ms;
}

::view-transition-new(root) {
  animation-duration: 320ms;
}

::view-transition-group(*) {
  animation-duration: 340ms;
  animation-timing-function: var(--ss-spring);
}

::view-transition-group(record-title) {
  animation-duration: 380ms;
}

/* The tray, the corner pill and the phone's bar are the same on every page, so they hold still while the
   page beside them changes. */
.ss-tray {
  view-transition-name: ss-tray;
}

.ss-bench {
  view-transition-name: ss-bench;
}

.ss-topbar {
  view-transition-name: ss-topbar;
}

/* ---------- The tray, serving the flow ---------- */

/* The kind a record sits under stays lit while you read it, a step quieter than the page you're on. */
.ss-nav-link[aria-current="location"] {
  background: color-mix(in srgb, var(--ss-plate) 62%, transparent);
}

.ss-nav-link[aria-current] .ss-nav-count {
  color: var(--ss-ink);
}

/* ---------- The splash ---------- */

body.ss-splash {
  padding-left: 0;
}

.ss-splash main.page {
  padding: 0 var(--ss-edge-r) 40px var(--ss-edge-l);
}

.ss-splash-top {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px var(--ss-edge-r) 16px var(--ss-edge-l);
}

.ss-splash-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-tool {
  position: relative;
  height: 44px;
}

.ss-tool .icon {
  width: 18px;
  height: 18px;
  color: var(--ss-ink);
}

/* Day and night, a round tool beside the three that carry their words on a wide screen. */
.ss-tool--theme {
  width: 44px;
  padding: 0;
  border-radius: 50%;
}

.ss-tool-keys {
  display: inline-flex;
  gap: 2px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss-splash .badge,
.ss-side-head .badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-well-2);
  color: var(--ss-ink);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ss-splash .badge:empty {
  display: none;
}


/* ---------- The home page: a header with search, a card each for places, people and things, the promises ---------- */

.hk {
  display: grid;
  gap: var(--ss-gap);
}

/* The header: the wordmark and what the record is for, then the search and the words to try. */
.hk-hero .ss-core {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 18px 44px;
  padding: 26px 28px 24px 34px;
}

.hk-word {
  font-size: clamp(2.25rem, 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.hk-purpose {
  max-width: 42ch;
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
  text-wrap: pretty;
}

.hk-hero .hero__search {
  max-width: none;
  margin: 0;
}

/* On the white plate the field sits in a well, so it reads as a place to type; what is typed is 16px, so a phone
   never zooms into it. */
.hk-hero .field {
  background: var(--ss-well);
}

.hk-hero .field__input {
  font-size: 1rem;
}

.hk-hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 12px;
  padding-left: 6px;
}

.hk-try {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.hk-try a {
  color: var(--ss-ink);
  font-weight: 500;
}

/* What is new in the record: the one orange lamp on the page, as it marks what needs attention. */
.hk-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  text-decoration: none;
}

.hk-new b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hk-new .icon {
  width: 15px;
  height: 15px;
  color: var(--ss-muted);
  transition: transform 260ms var(--ss-spring);
}

/* ---------- The three cards ---------- */

.hk-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ss-gap);
}

/* A card is its seat, the white plate inside it, and its drawing in a well inside that: 30, 24 and 16, each 6 or 8
   inside the last. Its colour is its own: the drawing's wash, its kinds' marks, and the seat under the pointer. */
.hk-card {
  --hk-c: var(--hk-places);
  --hk-c-ink: var(--hk-places-ink);
  --hk-c-tint: var(--hk-places-tint);
  position: relative;
  display: flex;
  min-width: 0;
  padding: var(--ss-bezel);
  border-radius: 30px;
  background: var(--ss-seat);
  transition: background-color 220ms var(--ss-out), transform 260ms var(--ss-spring);
}

.hk-card--people {
  --hk-c: var(--hk-people);
  --hk-c-ink: var(--hk-people-ink);
  --hk-c-tint: var(--hk-people-tint);
}

.hk-card--things {
  --hk-c: var(--ss-signal);
  --hk-c-ink: var(--ss-signal-ink);
  --hk-c-tint: var(--ss-signal-tint);
}

.hk-card-core {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border-radius: 24px;
  background: var(--ss-plate);
}

.hk-art {
  display: grid;
  place-items: end center;
  height: 120px;
  padding: 8px 10px 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--hk-c-tint);
  transition: background-color 220ms var(--ss-out);
}

.hk-art-svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: 108px;
  overflow: visible;
}

/* The drawing: graphite line on white, the card's colour for what it is about, and a softer step of it. */
.hk-art-svg .a-line {
  fill: none;
  stroke: var(--ss-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hk-art-svg .a-paper {
  fill: var(--ss-plate);
}

.hk-art-svg .a-fill {
  fill: var(--hk-c);
}

.hk-art-svg .a-soft {
  fill: color-mix(in srgb, var(--hk-c) 32%, var(--ss-plate));
}

.hk-art-svg .a-ink {
  fill: var(--ss-ink);
}

.hk-art-svg .a-signal {
  fill: var(--ss-signal);
}

.hk-art-svg .a-cross {
  fill: none;
  stroke: var(--ss-plate);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.hk-art-svg .a-pulse {
  fill: none;
  stroke: var(--hk-c-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 130;
}

.hk-art-svg .a-tag-mark {
  fill: none;
  stroke: var(--ss-on-signal);
  stroke-width: 2;
  stroke-linecap: round;
}

.hk-art-svg .a-tag-dot {
  fill: var(--ss-on-signal);
}

.hk-art-svg .a-lit {
  transition: fill 260ms var(--ss-out) calc(var(--d, 0) * 50ms);
}

.hk-art-svg .a-lit.is-on {
  fill: color-mix(in srgb, var(--hk-c) 42%, var(--ss-plate));
}

.hk-art-svg .a-tag {
  transform-box: view-box;
  transform-origin: 170px 49px;
}

.hk-art-svg .a-car,
.hk-art-svg .a-bottle,
.hk-art-svg .a-leaf {
  transform-box: fill-box;
  transition: transform 420ms var(--ss-spring);
}

.hk-art-svg .a-leaf {
  transform-origin: 0% 100%;
}

.hk-art-svg .a-bottle {
  transform-origin: 50% 100%;
}

/* The head: the card's name and its line, and the way to every one of them where there is a page for it. */
.hk-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 16px 8px 14px 12px;
}

.hk-card-title {
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hk-card-all {
  grid-column: 2;
  grid-row: 1;
}

.hk-card-all .icon {
  width: 14px;
  height: 14px;
  margin-right: -4px;
}

.hk-card-line {
  grid-column: 1 / -1;
  max-width: 46ch;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
  text-wrap: pretty;
}

/* The kinds: each a well with its mark, its name, its count and what the count means; all of them always shown. On a
   desktop the three cards stand the same height, and a card with fewer kinds gives each of them more room. */
.hk-kinds {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(min(142px, 100%), 1fr));
  align-content: stretch;
  gap: 6px;
}

.hk-kinds > li {
  display: flex;
  min-width: 0;
}

.hk-kind {
  display: grid;
  flex: 1;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-areas: "ico name" "count count";
  align-content: center;
  gap: 8px 9px;
  min-width: 0;
  min-height: 44px;
  padding: 11px 12px 11px 11px;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.hk-kind-ico {
  grid-area: ico;
  align-self: center;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hk-c-tint);
  color: var(--hk-c-ink);
  transition: background-color 180ms var(--ss-out);
}

.hk-kind-ico .icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.hk-kind-name {
  grid-area: name;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-wrap: balance;
  transition: color 180ms var(--ss-out);
}

.hk-kind-count {
  grid-area: count;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
}

.hk-kind-n {
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hk-kind-unit {
  color: var(--ss-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.hk-kind-line {
  grid-area: line;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.4;
  text-wrap: pretty;
}

/* A kind not live yet: in its place, quieter, and not a link. */
.hk-kind.is-later {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-well-2);
}

.hk-kind.is-later .hk-kind-name {
  color: var(--ss-muted);
}

.hk-kind.is-later .hk-kind-ico {
  background: var(--ss-well);
  color: var(--ss-muted);
}

/* The People card's three, one to a line: the mark, the name and what it holds, and the count at the end. */
.hk-kinds--rows {
  grid-template-columns: minmax(0, 1fr);
}

.hk-kinds--rows .hk-kind {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "ico name count" "ico line count";
  gap: 3px 14px;
  padding: 14px 16px 14px 12px;
}

.hk-kinds--rows .hk-kind-ico {
  width: 34px;
  height: 34px;
  margin-top: 0;
}

.hk-kinds--rows .hk-kind-ico .icon {
  width: 18px;
  height: 18px;
}

.hk-kinds--rows .hk-kind-name {
  font-size: 0.9375rem;
}

.hk-kinds--rows .hk-kind-count {
  flex-direction: column;
  align-items: flex-end;
  align-self: center;
}

.hk-kinds--rows .hk-kind-n {
  font-size: 1.375rem;
}

a.hk-kind:active {
  transform: scale(0.98);
  background: var(--hk-c-tint);
}

a.hk-kind:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
  border-radius: 16px;
}

/* What the counts cover: kept behind the card's button, opened in place. */
.hk-covers {
  position: relative;
  margin-top: 6px;
}

.hk-kinds + .hk-covers {
  margin-top: auto;
  padding-top: 6px;
}

.hk-covers-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out);
}

.hk-covers-btn::-webkit-details-marker {
  display: none;
}

.hk-covers-btn .icon {
  width: 16px;
  height: 16px;
  color: var(--ss-muted);
  transition: transform 260ms var(--ss-spring);
}

.hk-covers[open] .hk-covers-btn {
  background: var(--ss-well);
}

.hk-covers[open] .hk-covers-btn .icon {
  transform: rotate(180deg);
}

.hk-covers-btn:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

.hk-covers-list {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.hk-covers-list dt {
  font-weight: 700;
}

.hk-covers-list dd {
  color: var(--ss-muted);
}

.hk-covers-what,
.hk-covers-from {
  display: block;
}

.hk-covers-what {
  color: var(--ss-ink);
}

/* ---------- The cards when touched, hovered or reached by the keyboard ---------- */

/* A card's drawing is always there; it plays once as it comes into view (the arrivals script marks it in, but it
   doesn't rise in as other parts do), and again when it is tapped (50-home.js) or hovered. */
.js .hk-art-svg[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}

.hk-art-svg.is-in .a-lit:not(.is-on) {
  animation: hk-glow 1200ms var(--ss-out) calc(300ms + var(--d, 0) * 70ms) both;
}

.hk-art-svg.is-in .a-pulse {
  animation: hk-draw 1100ms var(--ss-out) 250ms both;
}

.hk-art-svg.is-in .a-tag {
  animation: hk-swing 1300ms var(--ss-out) 300ms both;
}

.hk-art.is-play .a-lit:not(.is-on) {
  animation: hk-glow-again 1200ms var(--ss-out) calc(var(--d, 0) * 60ms) both;
}

.hk-art.is-play .a-pulse {
  animation: hk-draw-again 1000ms var(--ss-out) both;
}

.hk-art.is-play .a-tag {
  animation: hk-swing-again 1300ms var(--ss-out) both;
}

.hk-art.is-play .a-dot {
  animation: hk-blink 900ms ease-in-out calc(var(--d, 0) * 150ms) 2;
}

@keyframes hk-glow {
  40% {
    fill: color-mix(in srgb, var(--hk-c) 60%, var(--ss-plate));
  }
}

@keyframes hk-glow-again {
  40% {
    fill: color-mix(in srgb, var(--hk-c) 60%, var(--ss-plate));
  }
}

@keyframes hk-draw {
  from {
    stroke-dashoffset: 130;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hk-draw-again {
  from {
    stroke-dashoffset: 130;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hk-swing {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(14deg);
  }

  45% {
    transform: rotate(-9deg);
  }

  70% {
    transform: rotate(4deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes hk-swing-again {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(14deg);
  }

  45% {
    transform: rotate(-9deg);
  }

  70% {
    transform: rotate(4deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes hk-blink {
  50% {
    opacity: 0.25;
  }
}

@media (hover: hover) {
  /* A lift with its colour washed into the seat; the drawing wakes. */
  .hk-card:hover {
    background: color-mix(in srgb, var(--hk-c) 28%, var(--ss-seat));
    transform: translateY(-2px);
  }

  .hk-card:hover .a-lit {
    fill: color-mix(in srgb, var(--hk-c) 55%, var(--ss-plate));
  }

  .hk-card:hover .a-pulse {
    animation: hk-draw-again 1000ms var(--ss-out) both;
  }

  .hk-card:hover .a-dot {
    animation: hk-blink 900ms ease-in-out calc(var(--d, 0) * 150ms) infinite;
  }

  .hk-card:hover .a-tag {
    animation: hk-swing-again 1300ms var(--ss-out) both;
  }

  .hk-card:hover .a-car {
    transform: translateX(5px);
  }

  .hk-card:hover .a-bottle {
    transform: rotate(-6deg);
  }

  .hk-card:hover .a-leaf {
    transform: scale(1.12);
  }

  a.hk-kind:hover {
    background: var(--hk-c-tint);
  }

  a.hk-kind:hover .hk-kind-ico {
    background: var(--ss-plate);
  }

  a.hk-kind:hover .hk-kind-name {
    color: var(--hk-c-ink);
  }

  .hk-covers-btn:hover {
    background: var(--ss-well);
  }

  .hk-new:hover .icon {
    transform: translateX(3px);
  }

  .hk-new:hover span {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

/* The keyboard wakes a card as the pointer does. */
.hk-card:has(:focus-visible) {
  background: color-mix(in srgb, var(--hk-c) 28%, var(--ss-seat));
}

/* ---------- What the record promises ---------- */

.hk-promises .ss-plate-head .ss-btn {
  margin-left: auto;
}

.hk-promises .hk-promise-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hk-promise-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico name" "ico text";
  align-content: start;
  gap: 0 12px;
  padding: 14px 16px 16px 14px;
}

.hk-promise-ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ss-plate);
  color: var(--ss-ink);
}

.hk-promise-ico .icon {
  width: 17px;
  height: 17px;
}

.hk-promise-list .ss-st-name {
  grid-area: name;
  align-self: center;
}

.hk-promise-list .ss-st-text {
  grid-area: text;
}

/* ---------- On a desktop, what the counts cover opens over the card, so the three stay the same height ---------- */

@media (min-width: 1100px) {
  .hk-covers[open] .hk-covers-list {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: calc(100% + 6px);
    left: 0;
    max-height: min(420px, 70vh);
    overflow: auto;
    border-radius: 16px;
    background: var(--ss-plate);
    box-shadow: var(--ss-float), 0 0 0 1px var(--ss-well-2);
    overscroll-behavior: contain;
  }
}

/* ---------- Narrower screens: the cards one under another ---------- */

@media (max-width: 1099px) {
  .hk-hero .ss-core {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .hk-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .hk-kinds {
    flex: none;
  }

  .hk-kinds + .hk-covers {
    margin-top: 6px;
  }

  .hk-promises .hk-promise-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .ss-splash-top {
    padding: 14px var(--ss-edge-r) 14px var(--ss-edge-l);
  }

  .ss-tool {
    width: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .ss-tool-label,
  .ss-tool-keys {
    display: none;
  }

  .ss-tool .badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--ss-pill);
    color: #ffffff;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .hk-hero .ss-core {
    padding: 22px 18px 18px;
  }

  .hk-word {
    font-size: 2.125rem;
  }

  .hk-purpose {
    margin-top: 8px;
    font-size: 0.9375rem;
  }

  .hk-hero-foot {
    padding-left: 4px;
  }

  /* On a phone the search button is its knob alone, so the field keeps room for what you type. */
  .hk-hero .field__go {
    gap: 0;
    padding: 0 6px;
  }

  .hk-hero .field__go::before {
    content: none;
  }

  .hk-card {
    border-radius: 26px;
  }

  .hk-card-core {
    padding: 6px;
    border-radius: 20px;
  }

  .hk-art {
    height: 104px;
    border-radius: 14px;
  }

  .hk-art-svg {
    height: 94px;
  }

  .hk-card-head {
    padding: 14px 6px 12px 10px;
  }

  .hk-card-title {
    font-size: 1.25rem;
  }

  .hk-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hk-kind {
    padding: 10px 10px 11px;
  }

  .hk-kinds--rows {
    grid-template-columns: minmax(0, 1fr);
  }

  .hk-kinds--rows .hk-kind {
    padding: 11px 14px 11px 10px;
  }

  .hk-kinds--rows .hk-kind {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 3px 10px;
  }

  .hk-kinds--rows .hk-kind-ico {
    width: 30px;
    height: 30px;
  }

  .hk-kinds--rows .hk-kind-n {
    font-size: 1.1875rem;
  }

  .hk-promises .hk-promise-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The top line keeps the mark alone beside its tools, since the wordmark is the first thing on the plate below it. */
.ss-splash-top .ss-brand-word {
  display: none;
}

/* The smallest phones: a kind's mark gives its name the room, and the plates give their wells a little more. */
@media (max-width: 400px) {
  .hk-kinds:not(.hk-kinds--rows) .hk-kind {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "count";
  }

  .hk-kinds:not(.hk-kinds--rows) .hk-kind-ico {
    display: none;
  }

  /* The People card's three: the count under the name, as on the other cards, so the line has the width. */
  .hk-kinds--rows .hk-kind {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas: "ico name" "ico count" "ico line";
    gap: 4px 10px;
  }

  .hk-kinds--rows .hk-kind-count {
    flex-direction: row;
    align-items: baseline;
  }

  .hk-kinds--rows .hk-kind-n {
    font-size: 1.125rem;
  }
}

@media (max-width: 374px) {
  .hk-hero .ss-core {
    padding-inline: 14px;
  }

  .hk-word {
    font-size: 1.875rem;
  }
}

/* Below 360px the top line holds the mark and five round tools (Sign in among them, while accounts are open) in its
   width, each still 44px, by standing them closer. */
@media (max-width: 359px) {
  .ss-splash-top {
    gap: 4px;
  }

  .ss-splash-tools {
    gap: 3px;
  }
}

@media (pointer: coarse) {
  .hk-new {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-card,
  .hk-kind,
  .hk-art-svg .a-lit,
  .hk-art-svg .a-car,
  .hk-art-svg .a-bottle,
  .hk-art-svg .a-leaf,
  .hk-covers-btn .icon {
    transition: none;
  }

  .hk-art-svg *,
  .hk-art * {
    animation: none !important;
  }

  @media (hover: hover) {
    .hk-card:hover {
      transform: none;
    }

    .hk-card:hover .a-car,
    .hk-card:hover .a-bottle,
    .hk-card:hover .a-leaf {
      transform: none;
    }
  }
}

/*
 * Soft Studio: the finders, after the sample's Goals (the summary plate), Requests (the tracker plate), its
 * goal sheet and its decision card. Laid over look.css; the build adds it after it.
 *
 * The flow: the head says what the list is; the summary plate says how many are shown and offers the
 * filters most families start with as wells you press; the list is one plate of rows, each opening its
 * record in a sheet over the list; the shortlist rides at the foot as a graphite pill and opens side by
 * side as the centred card. Orange stays the knob and the attention lamp, never "fine".
 */

/* ---------- The head ---------- */

.ss .fd-head {
  padding: 0 0 30px;
}

.ss .fd-head .crumbs {
  margin-bottom: 14px;
}

.ss .fd-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
}

.ss .fd-title {
  font-size: var(--ss-t5);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.ss .fd-head__act {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

.ss .fd-head__hint {
  max-width: 22rem;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.4;
  text-align: right;
}

.ss .fd-head__hint[hidden],
.ss .fd-head__act .ss-btn[hidden] {
  display: none;
}

.ss .fd-head__act .ss-btn-primary {
  height: 42px;
}

.ss .fd-scope {
  max-width: 68ch;
  margin-top: 18px;
  font-size: var(--ss-t2);
  line-height: 1.5;
}

.ss .fd-coverage {
  max-width: 68ch;
  margin-top: 6px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.45;
}

/* ---------- The summary plate: how many, and the filters most people start with ---------- */

.ss .fd-summary {
  margin-bottom: var(--ss-gap);
}

.ss .fd-summary__core {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px 36px;
  padding: 20px 20px 20px 32px;
}

.ss .fd-summary__count {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.ss .fd-summary__n {
  font-size: var(--ss-t5);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.ss .fd-summary__of {
  display: grid;
  gap: 2px;
  max-width: 13rem;
  font-size: var(--ss-t2);
  font-weight: 500;
  line-height: 1.3;
}

.ss .fd-summary__of span {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 400;
}

.ss .fd-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 10px;
}

.ss .fd-quick__btn {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 6px;
  min-height: 92px;
  padding: 16px 46px 16px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .fd-quick__n {
  font-size: var(--ss-t4);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ss .fd-quick__label {
  font-size: var(--ss-t1);
  font-weight: 500;
  line-height: 1.35;
}

.ss .fd-quick__tick {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ss-plate);
  color: transparent;
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out), transform 260ms var(--ss-spring);
}

.ss .fd-quick__tick .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

/* Pressed: inverted to graphite, as the sample marks the option you chose. */
.ss .fd-quick__btn[aria-pressed="true"] {
  background: var(--ss-pill);
  color: #ffffff;
}

.ss .fd-quick__btn[aria-pressed="true"] .fd-quick__tick {
  color: var(--ss-ink);
  transform: scale(1.06);
}

.ss .fd-quick__btn.is-empty {
  color: var(--ss-muted);
}

.ss .fd-quick__btn:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .ss .fd-quick__btn:hover {
    background: var(--ss-well-2);
  }

  .ss .fd-quick__btn[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--ss-pill) 88%, var(--ss-plate));
  }
}

/* ---------- The body: the filters plate beside the list plate ---------- */

.ss .fd-body {
  display: grid;
  gap: var(--ss-gap);
  align-items: start;
}

/* The words the cards use, between the summary and the list, keep the plates' own gap below them too. */
.ss .terms + .fd-body {
  margin-top: var(--ss-gap);
}

@media (min-width: 1000px) {
  .ss .fd-body {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
}

.ss .fd-filters {
  top: 16px;
  max-height: calc(100svh - 32px);
}

.ss .fd-list__core {
  padding: 20px;
}

.ss .fd-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 4px 0 18px 8px;
}

.ss .fd-list__title {
  margin-right: 4px;
  font-size: var(--ss-t3);
  font-weight: 700;
}

.ss .fd-search {
  display: flex;
  flex: 1 1 14rem;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-muted);
  transition: background-color 180ms var(--ss-out);
}

.ss .fd-search .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.ss .fd-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--ss-ink);
  font: inherit;
  font-size: var(--ss-t2);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.ss .fd-search input::placeholder {
  overflow: hidden;
  color: var(--ss-muted);
  opacity: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 16px where a phone would zoom into a smaller field when it is tapped; the placeholder keeps 15px. */
@media (pointer: coarse), (max-width: 640px) {
  .ss .fd-search input {
    font-size: 16px;
  }

  .ss .fd-search input::placeholder {
    font-size: var(--ss-t2);
  }
}

.ss .fd-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.ss .fd-search:focus-within {
  background: var(--ss-well-2);
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

.ss .fd-filters-btn {
  display: none;
  height: 42px;
}

.ss .fd-filters-btn .badge:empty {
  display: none;
}

.ss .fd-filters-btn .badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ss-pill);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* The order: the sample's segmented switch, the chosen one a white pill. A fieldset is as wide as its options
   unless told otherwise, so on a phone it is held to its line and scrolls inside it, fading where there's more. */
.ss .fd-sort {
  display: flex;
  gap: 2px;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 0;
  border-radius: 999px;
  background: var(--ss-well-2);
  scrollbar-width: none;
}

.ss .fd-sort::-webkit-scrollbar {
  display: none;
}

.ss .fd-sort__opt {
  position: relative;
  flex: none;
}

.ss .fd-sort__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ss .fd-sort__opt span[aria-hidden] {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out);
}

.ss .fd-sort__opt input:checked + span {
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-weight: 700;
}

.ss .fd-sort__opt input:focus-visible + span {
  outline: 2px solid var(--ss-ink);
  outline-offset: 1px;
}

@media (hover: hover) {
  .ss .fd-sort__opt input:not(:checked):hover + span {
    color: var(--ss-ink);
  }
}

.ss .fd-list .active-chips {
  margin: 0 0 12px 4px;
}

.ss .fd-list .active-chips[hidden] {
  display: none;
}

/* ---------- The rows: one per result, each a well that opens its record ---------- */

.ss .fd-list {
  container-type: inline-size;
}

.ss .fd-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .fd-item {
  position: relative;
}

.ss .fd-item[hidden] {
  display: none;
}

.ss .fd-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px 18px;
  padding: 20px 20px 20px 18px;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .fd-row:active {
  transform: scale(0.995);
}

@media (hover: hover) {
  .ss .fd-row:hover {
    background: var(--ss-well-2);
  }

  .ss .fd-row:hover .fd-row__name {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }
}

.ss .fd-row:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
  border-radius: 16px;
}

.ss .fd-row__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ss-plate);
}

.ss .fd-row__icon .icon {
  width: 20px;
  height: 20px;
}

/* A word longer than the row ("FoShanShiNanHaiQuNuoAiTongZhuangShangHang", a company's name as CPSC gives it)
   breaks at the row's edge rather than widening the page. */
.ss .fd-row__main {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding-right: 136px;
  overflow-wrap: anywhere;
}

.ss .fd-row__kind {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  line-height: 1.4;
}

.ss .fd-row__name {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
}

.ss .fd-row__where {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.4;
}

.ss .fd-row__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-top: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--ss-signal-tint);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 500;
  line-height: 1.3;
}

.ss .fd-row__facts,
.ss .fd-row__heat {
  grid-column: 2;
}

.ss .fd-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ss .fd-row__facts:empty {
  display: none;
}

.ss .fd-fact {
  display: grid;
  align-content: start;
  gap: 2px;
  flex: 1 1 9.5rem;
  min-width: 0;
  max-width: 15rem;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ss-plate);
  /* A fact in words ("Children/Adolescents, young adults and adults") breaks a word wider than its card. */
  overflow-wrap: anywhere;
}

.ss .fd-fact b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ss-t3);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ss .fd-fact b small {
  margin-left: 2px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  letter-spacing: 0;
}

.ss .fd-fact > span {
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* A figure that needs attention: the lamp beside it and the tint behind it, never a colour for "fine". */
.ss .fd-fact.is-attention {
  background: var(--ss-signal-tint);
}

.ss .fd-fact.is-attention > span {
  color: var(--ss-ink);
}

.ss .fd-row__heat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.ss .fd-row__heat .strip {
  flex: none;
}

.ss .fd-row__heat-words {
  flex: 1 1 14rem;
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Wide lists: the figures sit beside the name, the strip under them. */
@container (min-width: 860px) {
  .ss .fd-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .ss .fd-row__main {
    padding-right: 0;
  }

  .ss .fd-row__facts {
    grid-column: 3;
    grid-row: 1;
    padding-right: 136px;
  }

  .ss .fd-row__heat {
    grid-column: 2 / 4;
  }
}

/* The shortlist pin: a white pill on the row, graphite with a check once the place is on your list. */
.ss .fd-pin {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font: inherit;
  font-size: var(--ss-t1);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .fd-pin .icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.ss .fd-pin .icon--check,
.ss .fd-pin[aria-pressed="true"] .icon--plus {
  display: none;
}

.ss .fd-pin[aria-pressed="true"] .icon--check {
  display: block;
}

.ss .fd-pin[aria-pressed="true"] {
  background: var(--ss-pill);
  color: #ffffff;
}

.ss .fd-pin:active {
  transform: scale(0.96);
}

/* A finger's reach: the pill keeps its size, and what answers a tap grows to 44px around it. */
@media (pointer: coarse) {
  .ss .fd-pin:not(.fd-pin--sheet)::after {
    content: "";
    position: absolute;
    inset: -5px -3px;
  }
}

.ss .fd-pin.is-pop {
  animation: fd-pop 300ms var(--ss-spring);
}

@keyframes fd-pop {
  40% {
    transform: scale(1.08);
  }
}

@media (hover: hover) {
  .ss .fd-pin:hover {
    background: var(--ss-seat);
  }

  .ss .fd-pin[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }
}

/* Rows that arrive when the filters change settle in, a few apart. */
.ss .fd-item.is-new {
  animation: ss-settle 320ms var(--ss-spring) backwards;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.ss .finder__more {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.ss .finder__more [hidden] {
  display: none;
}

.ss .fd-none {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 26px 22px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .fd-none[hidden] {
  display: none;
}

.ss .fd-none h3 {
  font-size: var(--ss-t3);
}

.ss .fd-none p {
  max-width: 34rem;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .fd-source {
  margin-top: var(--ss-gap);
  padding: 16px 22px;
  border-radius: 24px;
  background: var(--ss-seat);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .fd-source .src {
  margin: 0;
}

/* ---------- The shortlist tray: a graphite pill on the workspace, not the window ---------- */

.ss .fd-tray {
  position: fixed;
  z-index: 40;
  bottom: 20px;
  left: calc(var(--ss-tray-w) + (100vw - var(--ss-tray-w)) / 2);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(60rem, calc(100vw - var(--ss-tray-w) - 40px));
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  background: var(--ss-pill);
  color: #ffffff;
  box-shadow: var(--ss-float); /* taste-skill-ignore: the tray floats over the page */
  transform: translateX(-50%);
  transition: transform 360ms var(--ss-spring), opacity 220ms var(--ss-out), display 360ms allow-discrete, overlay 360ms allow-discrete;
}

.ss .fd-tray[hidden] {
  display: none;
}

@starting-style {
  .ss .fd-tray {
    opacity: 0;
    transform: translate(-50%, 18px);
  }
}

.ss .fd-tray__title {
  display: grid;
  flex: none;
  font-size: var(--ss-t1);
  font-weight: 700;
  line-height: 1.2;
}

.ss .fd-tray__title > span {
  color: rgb(255 255 255 / 0.6);
  font-weight: 500;
}

.ss .fd-tray__list {
  display: flex;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.ss .fd-tray__list::-webkit-scrollbar {
  display: none;
}

.ss .fd-tray__list li {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  max-width: 15rem;
  height: 34px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .fd-tray__list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss .fd-tray__list button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgb(255 255 255 / 0.75);
  cursor: pointer;
}

.ss .fd-tray__list button .icon {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .ss .fd-tray__list button:hover {
    background: rgb(255 255 255 / 0.16);
    color: #ffffff;
  }
}

.ss .fd-tray__hint {
  flex: none;
  color: rgb(255 255 255 / 0.66);
  font-size: var(--ss-t1);
  white-space: nowrap;
}

.ss .fd-tray__hint[hidden],
.ss .fd-tray .ss-btn[hidden] {
  display: none;
}

/* On graphite the primary pill turns white, its knob still orange: white in either light, so its words stay graphite. */
.ss .fd-tray .ss-btn-primary {
  flex: none;
  background: #ffffff;
  color: #1b1e23;
}

@media (hover: hover) {
  .ss .fd-tray .ss-btn-primary:hover {
    background: #f0f1f3;
  }
}

.ss .fd-round {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring), opacity 180ms var(--ss-out);
}

.ss .fd-round .icon {
  width: 18px;
  height: 18px;
}

.ss .fd-round:active {
  transform: scale(0.94);
}

/* Nothing to step to: an outline in the quiet tone, its arrow still readable (AA), in either light. */
.ss .fd-round:disabled {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-cell);
  color: var(--ss-muted);
  cursor: default;
}

.ss .fd-round--dark {
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
}

@media (hover: hover) {
  .ss .fd-round:not(:disabled):hover {
    background: var(--ss-well-2);
  }

  .ss .fd-round--dark:not(:disabled):hover {
    background: rgb(255 255 255 / 0.18);
  }
}

body.ss.has-tray main.page {
  padding-bottom: 112px;
}

/* With the tray up, a toast rises above it rather than over it. */
body.ss.has-tray .toasts {
  bottom: calc(86px + env(safe-area-inset-bottom));
}

/* ---------- Side by side: the centred card of the sample's decision, one plate per place ---------- */

/* The head stays in view, with its way out, while the plates scroll under it. */
.ss .fd-cmp {
  flex-direction: column;
  width: min(78rem, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100svh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  overflow: clip;
  border: 0;
  border-radius: 30px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  box-shadow: var(--ss-float); /* taste-skill-ignore: the card floats over the page */
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: transform 380ms var(--ss-spring), opacity 220ms var(--ss-out), display 380ms allow-discrete, overlay 380ms allow-discrete;
}

.ss .fd-cmp[open] {
  display: flex;
  opacity: 1;
  transform: none;
}

@starting-style {
  .ss .fd-cmp[open] {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
}

.ss .fd-cmp::backdrop {
  background: var(--ss-scrim);
}

.ss .fd-cmp__head {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px 12px;
  padding: 24px 24px 18px;
}

.ss .fd-cmp__head .ss-btn {
  margin-top: 6px;
}

.ss .fd-cmp__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 24px 24px;
  overflow: auto;
  overscroll-behavior: contain;
}

.ss .fd-cmp__head h2 {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ss .fd-cmp__lede {
  max-width: 40rem;
  margin-top: 6px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .fd-cmp__shared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 16px;
  background: var(--ss-well);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .fd-cmp__shared > .icon {
  width: 16px;
  height: 16px;
}

/* The words keep a line's width of their own: where there isn't room beside them, the button takes the next line. */
.ss .fd-cmp__shared > span {
  flex: 1 1 12rem;
}

/* The plates share their rows, so a line reads straight across however long its words are. */
.ss .fd-cmp__grid {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(14rem, 1fr));
  grid-template-rows: auto repeat(var(--rows), auto);
  column-gap: 10px;
  overflow-x: auto;
}

.ss .fd-cmp__col {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  padding: 18px 18px 6px;
  border-radius: 24px;
  background: var(--ss-well);
  animation: ss-settle 340ms var(--ss-spring) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.ss .fd-cmp__top {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  padding-bottom: 14px;
}

.ss .fd-cmp__name {
  color: var(--ss-ink);
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
  text-decoration: none;
}

@media (hover: hover) {
  .ss .fd-cmp__name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.ss .fd-cmp__where {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .fd-cmp__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-top: 6px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ss .fd-cmp__remove .icon {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .ss .fd-cmp__remove:hover {
    background: var(--ss-seat);
  }
}

.ss .fd-cmp__cell {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 11px 0 12px;
  border-top: 1px solid var(--ss-well-2);
}

.ss .fd-cmp__label {
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.35;
}

.ss .fd-cmp__value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ss-t2);
  font-weight: 500;
  line-height: 1.4;
}

.ss .fd-cmp__cell.is-none .fd-cmp__value {
  color: var(--ss-muted);
  font-weight: 400;
}

.ss .fd-cmp__cell.is-lead .fd-cmp__value {
  font-weight: 700;
}

/* The one that leads a line: a small ink disc with a check, beside the figure. Not a rating, so never coloured. */
.ss .fd-cmp__lead {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--ss-pill);
  color: #ffffff;
}

.ss .fd-cmp__lead .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.ss .fd-cmp__note {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.45;
}

/* ---------- The record sheet: a record opened over the list, after the sample's goal sheet ---------- */

/* A sheet and side by side clip rather than hide what overflows them: a hidden overflow can still be scrolled
   by a link inside, which slid the bar and its way out off the top. Only their bodies scroll. */

.ss .fd-sheet {
  position: fixed;
  inset: 12px 12px 12px auto;
  display: none;
  flex-direction: column;
  width: min(62rem, calc(100vw - 24px - var(--ss-tray-w) / 2));
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow: clip;
  border: 0;
  border-radius: 28px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  box-shadow: var(--ss-float); /* taste-skill-ignore: the sheet floats over the list */
  opacity: 0;
  transform: translateX(48px);
  transition: transform 380ms var(--ss-spring), opacity 220ms var(--ss-out), display 380ms allow-discrete, overlay 380ms allow-discrete;
}

.ss .fd-sheet[open] {
  display: flex;
  opacity: 1;
  transform: none;
}

@starting-style {
  .ss .fd-sheet[open] {
    opacity: 0;
    transform: translateX(48px);
  }
}

.ss .fd-sheet::backdrop {
  background: var(--ss-scrim);
  opacity: 0;
  transition: opacity 220ms var(--ss-out), display 380ms allow-discrete, overlay 380ms allow-discrete;
}

.ss .fd-sheet[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .ss .fd-sheet[open]::backdrop {
    opacity: 0;
  }
}

html.has-sheet {
  overflow: hidden;
}

.ss .fd-sheet__bar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px 26px;
}

.ss .fd-sheet__trail {
  display: flex;
  flex: 1 1 12rem;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .fd-sheet__trail > span:first-child {
  flex: none;
}

.ss .fd-sheet__trail .icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.ss .fd-sheet__name {
  overflow: hidden;
  color: var(--ss-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss .fd-sheet__pos {
  flex: none;
  margin-right: 2px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ss .fd-sheet__moves {
  display: flex;
  gap: 4px;
}

.ss .fd-pin--sheet {
  position: static;
  height: 38px;
  background: var(--ss-well);
}

@media (hover: hover) {
  .ss .fd-pin--sheet:hover {
    background: var(--ss-well-2);
  }
}

.ss .fd-sheet__body {
  flex: 1;
  min-height: 0;
  padding: 18px 30px 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  scrollbar-width: thin;
}

.ss .fd-sheet__body > .fd-sheet__record {
  max-width: none;
}

.ss .fd-sheet__body.is-ready > .fd-sheet__record {
  animation: fd-arrive 300ms var(--ss-spring) backwards;
}

@keyframes fd-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* While it opens: the row's own words, and quiet wells where the record will be. */
.ss .fd-sheet__wait {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding-top: 12px;
}

.ss .fd-sheet__wait-kind,
.ss .fd-sheet__wait-where,
.ss .fd-sheet__wait-note {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .fd-sheet__wait-name {
  max-width: 20ch;
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ss .fd-sheet__wait-note {
  margin-top: 10px;
}

.ss .fd-sheet__wait-plate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}

.ss .fd-sheet__wait-plate span {
  height: 96px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .fd-sheet__fail {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-top: 16px;
}

.ss .fd-sheet__fail h2 {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ss .fd-sheet__fail p {
  color: var(--ss-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ss .fd-sheet,
  .ss .fd-cmp {
    transform: none;
    transition: opacity 160ms linear, display 160ms allow-discrete, overlay 160ms allow-discrete;
  }

  .ss .fd-tray {
    transition: opacity 160ms linear, display 160ms allow-discrete, overlay 160ms allow-discrete;
  }

  @starting-style {
    .ss .fd-sheet[open],
    .ss .fd-cmp[open] {
      transform: none;
    }

    .ss .fd-tray {
      transform: translateX(-50%);
    }
  }

  .ss .fd-item.is-new,
  .ss .fd-cmp__col,
  .ss .fd-sheet__body.is-ready > .fd-sheet__record,
  .ss .fd-pin.is-pop {
    animation: none;
  }
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1180px) {
  .ss .fd-summary__core {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 999px) {
  .ss .fd-filters-btn {
    display: inline-flex;
  }

  .ss .fd-list__head .fd-sort {
    order: 3;
    width: 100%;
  }
}

/*
 * The tray folds away below 960px, so the shortlist and the sheets take the whole width. Each sheet rises from the
 * foot and stops short of the top (look.css draws its handle), so the dimmed list stays in view above it.
 */
@media (max-width: 960px) {
  /* As wide as what it holds, up to the screen's width: from the middle of the screen a pill would otherwise be held
     to the half to its right, and its clear button pushed out past its end onto the page. */
  .ss .fd-tray {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }

  .ss .fd-sheet {
    inset: var(--ss-sheet-top) 0 0;
    width: auto;
    padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    border-radius: 26px 26px 0 0;
    transform: translateY(32px);
  }

  .ss .fd-sheet[open] {
    transform: none;
  }

  @starting-style {
    .ss .fd-sheet[open] {
      transform: translateY(32px);
    }
  }

  .ss .fd-sheet__bar {
    padding-top: 24px;
  }

  .ss .fd-sheet__body {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  .ss .fd-cmp {
    width: 100%;
    max-height: calc(100dvh - var(--ss-sheet-top));
    margin: auto 0 0;
    padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    border-radius: 26px 26px 0 0;
  }

  .ss .fd-cmp__head {
    padding: 26px 14px 16px 18px;
  }

  .ss .fd-cmp__scroll {
    padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .ss .fd-cmp__grid {
    scroll-snap-type: x mandatory;
    grid-template-columns: repeat(var(--n), minmax(15rem, 82%));
  }

  .ss .fd-cmp__col {
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  /* Save this search and Compare side by side where they fit, Compare on the line under it where they don't. */
  .ss .fd-head__act {
    flex-wrap: wrap;
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
  }

  .ss .fd-head__hint {
    display: none;
  }

  /* A list that keeps nothing says so on a phone too: it is where the shortlist would be. */
  .ss .fd-head__hint.fd-head__hint--keeps {
    display: block;
    max-width: none;
    text-align: left;
  }

  .ss .fd-summary__core {
    padding: 16px;
  }

  .ss .fd-summary__count {
    gap: 12px;
  }

  /* The quick filters share one column of counts, as wide as the widest: no count runs into its words, which keep
     the summary's 12px from it, and every button's words still start on one line. */
  .ss .fd-quick {
    grid-template-columns: minmax(4.25rem, max-content) minmax(0, 1fr);
  }

  .ss .fd-quick__btn {
    grid-column: 1 / -1;
    grid-template-columns: minmax(4.25rem, max-content) minmax(0, 1fr);
    grid-template-columns: subgrid;
    grid-template-rows: none;
    align-items: center;
    column-gap: 12px;
    min-height: 0;
    padding: 12px 44px 12px 14px;
  }

  .ss .fd-quick__tick {
    top: 50%;
    margin-top: -13px;
  }

  .ss .fd-list__core {
    padding: 10px;
  }

  .ss .fd-list__head {
    padding-left: 6px;
  }

  .ss .fd-list__title {
    flex: 1 0 100%;
  }

  .ss .fd-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .ss .fd-row__icon {
    display: none;
  }

  .ss .fd-row__main {
    padding-right: 0;
  }

  .ss .fd-row__facts,
  .ss .fd-row__heat {
    grid-column: 1;
  }

  /* The kind shares its line with the shortlist pill, so the name always starts below the pill, never under it. */
  .ss .fd-row__kind {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin-top: -4px;
    padding-right: 118px;
  }

  .ss .fd-pin {
    top: 10px;
    right: 10px;
  }

  /* The facts fill their lines: two to a line, and one left over the line's whole width, never a part of it. */
  .ss .fd-fact {
    flex-basis: 7rem;
    max-width: none;
  }

  .ss .fd-tray {
    gap: 8px;
    padding-left: 16px;
  }

  .ss .fd-tray__list {
    display: none;
  }

  .ss .fd-tray__title {
    flex: 1;
  }

  /* The way out sits at the top right, on the trail's line; stepping through the list takes the line below. */
  .ss .fd-sheet__bar {
    row-gap: 10px;
    padding: 24px 12px 10px 18px;
  }

  .ss .fd-sheet__trail {
    flex: 1 1 calc(100% - 64px);
  }

  .ss .fd-sheet__close {
    order: 1;
  }

  .ss .fd-sheet__pos,
  .ss .fd-sheet__moves,
  .ss .fd-pin--sheet,
  .ss .fd-sheet__bar [data-sheet-page] {
    order: 2;
  }

  .ss .fd-sheet__pos {
    margin-right: auto;
  }

  .ss .fd-sheet__bar .fd-round {
    width: 44px;
    height: 44px;
  }

  .ss .fd-pin--sheet {
    height: 44px;
  }

  .ss .fd-sheet__body {
    padding: 12px 16px calc(40px + env(safe-area-inset-bottom, 0px));
  }

  /* Side by side: the title, and at its right the way out; copying a link takes the line below. */
  .ss .fd-cmp__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ss .fd-cmp__head > div {
    grid-row: 1;
    grid-column: 1;
  }

  .ss .fd-cmp__close {
    grid-row: 1;
    grid-column: 2;
  }

  .ss .fd-cmp__head .ss-btn {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0;
  }

  .ss .fd-cmp__head h2 {
    font-size: var(--ss-t4);
  }
}

/* A count of thousands leaves its words too little room beside it on the smallest phones, and one of tens or
   hundreds of thousands on more of them: there the list's count and each quick filter's take their own lines above
   their words, as the quick filters' do on a wide screen. The list's whole count (data-figures, its characters) is
   the widest any of the plate's counts can be, so the plate keeps one shape however the filters change them. */
@media (max-width: 359px) {
  .ss .fd-summary:is([data-figures="5"], [data-figures="6"], [data-figures="7"]) .fd-summary__count {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ss .fd-summary:is([data-figures="5"], [data-figures="6"], [data-figures="7"]) .fd-quick {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss .fd-summary:is([data-figures="5"], [data-figures="6"], [data-figures="7"]) .fd-quick__btn {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    align-items: start;
    padding: 14px 44px 14px 14px;
  }

  .ss .fd-summary:is([data-figures="5"], [data-figures="6"], [data-figures="7"]) .fd-quick__tick {
    top: 12px;
    margin-top: 0;
  }
}

@media (min-width: 360px) and (max-width: 389px) {
  .ss .fd-summary:is([data-figures="6"], [data-figures="7"]) .fd-summary__count {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ss .fd-summary[data-figures="7"] .fd-quick {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss .fd-summary[data-figures="7"] .fd-quick__btn {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    align-items: start;
    padding: 14px 44px 14px 14px;
  }

  .ss .fd-summary[data-figures="7"] .fd-quick__tick {
    top: 12px;
    margin-top: 0;
  }
}

@media (min-width: 390px) and (max-width: 419px) {
  .ss .fd-summary[data-figures="7"] .fd-summary__count {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* The smallest phones: opening the record as a page sits beside the way out, on the trail's line, so stepping
   through the list and the shortlist keep the line below to themselves rather than leave one button on a third. */
@media (max-width: 359px) {
  .ss .fd-sheet__trail {
    flex-basis: calc(100% - 116px);
  }

  .ss .fd-sheet__bar [data-sheet-page] {
    order: 1;
  }
}

/* The side-by-side card takes focus on its own head when it opens, so no ring lands on a place's name. */
.fd-cmp__head:focus {
  outline: none;
}

.fd-cmp__head:focus-visible {
  outline: none;
}

/* ---------- The list read as rows: the sample's tracker plate (requests.png) ---------- */

/* Cards or rows: a two-way switch beside the order. Without a script the list stays as cards, so the switch hides. */
.ss .fd-view {
  display: none;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ss-well);
}

.js .ss .fd-view {
  display: inline-flex;
}

.ss .fd-view__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ss-muted);
  font: inherit;
  font-size: var(--ss-t1);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out);
}

.ss .fd-view__opt .icon {
  width: 16px;
  height: 16px;
}

.ss .fd-view__opt[aria-pressed="true"] {
  background: var(--ss-plate);
  color: var(--ss-ink);
}

.ss .fd-view__opt:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ss .fd-view__opt[aria-pressed="false"]:hover {
    color: var(--ss-ink);
  }
}

/* As cards, a row's cells and the column heads stay out of sight. */
.ss .fd-row__cells,
.ss .fd-rows__head {
  display: none;
}

/* As rows: one line each, the same columns for every place, and a head that names them. The last column holds a
   record's months, all 36 of them: a 2px mark and a 1px gap a month where the list has the room, and as little as
   1px a mark in a narrow window, so the row never runs wider than the page. */
.ss .fd-list[data-view="list"] {
  --fd-cols: minmax(140px, 2fr) repeat(var(--fd-n, 4), minmax(58px, 1fr)) minmax(72px, 108px);
}

.ss .fd-list[data-view="list"] .fd-rows__head {
  display: grid;
  grid-template-columns: var(--fd-cols);
  gap: 14px;
  padding: 4px 60px 12px 16px;
  border-bottom: 1px solid var(--ss-rule);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  line-height: 1.3;
}

.ss .fd-list[data-view="list"] .fd-rows {
  gap: 0;
}

.ss .fd-list[data-view="list"] .fd-item + .fd-item {
  border-top: 1px solid var(--ss-rule);
}

.ss .fd-list[data-view="list"] .fd-row {
  grid-template-columns: var(--fd-cols);
  align-items: center;
  gap: 14px;
  padding: 16px 60px 16px 16px;
  border-radius: 14px;
  background: transparent;
}

@media (hover: hover) {
  .ss .fd-list[data-view="list"] .fd-row:hover {
    background: var(--ss-well);
  }
}

.ss .fd-list[data-view="list"] .fd-row__icon,
.ss .fd-list[data-view="list"] .fd-row__kind,
.ss .fd-list[data-view="list"] .fd-row__facts,
.ss .fd-list[data-view="list"] .fd-row__heat-words {
  display: none;
}

.ss .fd-list[data-view="list"] .fd-row__main {
  grid-column: 1;
  gap: 2px;
  padding: 0;
}

.ss .fd-list[data-view="list"] .fd-row__name {
  font-size: var(--ss-t2);
  line-height: 1.3;
}

.ss .fd-list[data-view="list"] .fd-row__where {
  font-size: var(--ss-t1);
}

.ss .fd-list[data-view="list"] .fd-row__flag {
  margin-top: 4px;
  padding: 0;
  background: none;
  font-size: var(--ss-t1);
}

/* The cells join the row's own grid, one column each. */
.ss .fd-list[data-view="list"] .fd-row__cells {
  display: contents;
}

.ss .fd-cell {
  display: block;
  min-width: 0;
  font-size: var(--ss-t1);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.ss .fd-cell__head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ss .fd-cell__v {
  color: var(--ss-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* A silent source reads as such, quietly; it is never left blank or shown as a zero. */
.ss .fd-cell.is-silent .fd-cell__v {
  color: var(--ss-muted);
  font-weight: 400;
}

.ss .fd-list[data-view="list"] .fd-row__heat {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
}

.ss .fd-list[data-view="list"] .fd-row__heat .strip {
  width: 100%;
  gap: 1px;
}

.ss .fd-list[data-view="list"] .fd-row__heat .strip__cell {
  min-width: 1px;
}

/* The shortlist pin folds to its mark, centred on the row. */
.ss .fd-list[data-view="list"] .fd-pin {
  top: 50%;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  transform: translateY(-50%);
}

.ss .fd-list[data-view="list"] .fd-pin [data-pin-word] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ss .fd-list[data-view="list"] .fd-pin:active {
  transform: translateY(-50%) scale(0.94);
}

/* Narrow lists: each row stacks its name over its cells, which name themselves. */
@container (max-width: 640px) {
  .ss .fd-list[data-view="list"] .fd-rows__head {
    display: none;
  }

  .ss .fd-list[data-view="list"] .fd-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 14px 60px 14px 14px;
  }

  .ss .fd-list[data-view="list"] .fd-row__main,
  .ss .fd-list[data-view="list"] .fd-row__heat {
    grid-column: 1 / -1;
  }

  .ss .fd-list[data-view="list"] .fd-cell__head {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--ss-muted);
    font-size: 0.75rem;
    white-space: normal;
  }

  .ss .fd-list[data-view="list"] .fd-pin {
    top: 14px;
    transform: none;
  }

  .ss .fd-list[data-view="list"] .fd-pin:active {
    transform: scale(0.94);
  }
}

/* As rows, the list takes the page's whole width: its filters wait behind the Filters pill (with its count,
   and the chips above the rows), in a sheet from the side, as the record's sheet comes in. */
@media (min-width: 1000px) {
  .ss .fd-body:has(.fd-list[data-view="list"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss .fd-body:has(.fd-list[data-view="list"]) > .fd-filters {
    display: none;
  }

  .ss .fd-list[data-view="list"] .fd-filters-btn {
    display: inline-flex;
  }

  .ss .sheet[data-filter-sheet] {
    inset: 12px 12px 12px auto;
    width: min(25rem, calc(100vw - 24px));
    height: auto;
    max-height: none;
    padding: 0 24px 24px;
    border-radius: 30px;
    transform: translateX(calc(100% + 24px));
  }

  .ss .sheet[data-filter-sheet][open] {
    transform: none;
  }

  @starting-style {
    .ss .sheet[data-filter-sheet][open] {
      transform: translateX(calc(100% + 24px));
    }
  }

  /* A panel from the side has no handle: it is put away with its knob, a tap beside it, or Escape. */
  .ss .sheet[data-filter-sheet] .filters__head {
    padding-top: 22px;
  }

  .ss .sheet[data-filter-sheet] .filters__head::before {
    display: none;
  }
}

/* The sheet is a container, not a control: focus moves inside it, so it draws no ring of its own. */
.ss .sheet[data-filter-sheet]:focus,
.ss .sheet[data-filter-sheet]:focus-visible {
  outline: none;
}

/*
 * A finger's reach for the order of a list (look.css holds the rest): each option a little taller, and its radio
 * reaching into the switch's own padding, so every option answers a tap across the whole 44px bar. These follow the
 * option's own rule above, which would otherwise set its padding back.
 */
@media (pointer: coarse) {
  .ss .fd-sort__opt span[aria-hidden] {
    padding-block: 10px;
  }

  .ss .fd-sort__opt input {
    inset: -4px 0;
    height: auto;
  }
}

/* On a phone side by side's small buttons take a line each, and stand 44px apart, so neither's reach is the other's. */
@media (pointer: coarse) and (max-width: 640px) {
  .ss .fd-cmp__head {
    row-gap: 12px;
  }
}

/*
 * Soft Studio: a record's page. Laid over look.css; the build adds it after it.
 *
 * The body of the sample's goal sheet, set out wide: above the record, the way back to the list it came
 * from; then its name at 72px 900, what it is, and its actions as pills; the short answer as the first
 * seated plate; the questions as plates, each fact in a well with its source on a small white plate
 * beside it; and a seated column of the contents, who runs it, and where the facts come from. A record
 * shown in a sheet over a list (inside .in-sheet) is the same body, a container query narrower.
 */

/* ---------- The record as one container ---------- */

.ss .record {
  container: record / inline-size;
}

/* The record's head has its own guide pill, so the shell's corner button stays off record pages. */
html[data-record] .ss-bench {
  display: none;
}

/* ---------- Above it: the trail, or the way back to a list ---------- */

.ss .rc-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 40px;
  margin: 0 0 28px;
}

.ss .rc-context.has-list .rc-context__trail {
  display: none;
}

.ss .rc-context__list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ss .rc-context__list[hidden] {
  display: none;
}

.ss .rc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .rc-back .icon {
  width: 18px;
  height: 18px;
  transition: transform 260ms var(--ss-spring);
}

.ss .rc-count {
  margin-left: auto;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ss .rc-steps {
  display: inline-flex;
  gap: 6px;
}

.ss .rc-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ss-plate);
  color: var(--ss-ink);
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .rc-step .icon {
  width: 18px;
  height: 18px;
}

.ss .rc-step.is-end {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-cell);
  color: var(--ss-muted);
}

@media (hover: hover) {
  .ss .rc-back:hover,
  .ss a.rc-step:hover {
    background: var(--ss-well);
  }

  .ss .rc-back:hover .icon {
    transform: translateX(-2px);
  }
}

.ss .rc-back:active,
.ss a.rc-step:active {
  transform: scale(0.97);
}

/* ---------- The head: the name, what it is, and what you can do ---------- */

.ss .rc-head {
  padding: 0 0 32px;
}

.ss .rc-head .rh__title {
  max-width: min(20ch, 100%);
  margin-top: 0;
}

.ss .rc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.ss .rc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .rc-pill .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.ss .rc-pill--quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-cell);
}

@media (hover: hover) {
  .ss .rc-pill:hover {
    background: var(--ss-well);
  }

  .ss .rc-pill--quiet:hover {
    background: var(--ss-plate);
  }
}

.ss .rc-pill:active,
.ss .rc-actions .watch-btn:active {
  transform: scale(0.97);
}

/* The shortlist pill: a plus, then a check once it is on the list, graphite like Watch when on. */
.ss .rc-shortlist__icon {
  display: grid;
  width: 18px;
  height: 18px;
}

.ss .rc-shortlist__icon .icon {
  grid-area: 1 / 1;
  transition: opacity 180ms var(--ss-out), transform 260ms var(--ss-spring);
}

.ss .rc-shortlist .icon--check,
.ss .rc-shortlist[aria-pressed="true"] .icon--plus {
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
}

.ss .rc-shortlist[aria-pressed="true"] .icon--check {
  opacity: 1;
  transform: none;
}

.ss .rc-shortlist[aria-pressed="true"] {
  background: var(--ss-pill);
  color: #ffffff;
}

@media (hover: hover) {
  .ss .rc-shortlist[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }
}

/* Watch and the shortlist need the script; without it the page still reads in full. */
.no-js .rc-shortlist,
.no-js .rc-pill[data-guide-open] {
  display: none;
}

.ss .rc-actions .watch-btn {
  height: 38px;
  min-height: 38px;
}

.ss .rc-actions__note {
  margin-top: 10px;
}

/* ---------- The short answer: the first seated plate ---------- */

.ss .rc-answer {
  padding: 28px 30px 26px;
  border: var(--ss-bezel) solid var(--ss-seat);
  border-radius: 30px;
  background: var(--ss-plate);
}

.ss .rc-answer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  margin-bottom: 18px;
}

.ss .rc-answer__head h2 {
  font-size: var(--ss-t3);
}

.ss .rc-answer__when {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .rc-answer__tiles {
  margin: 0;
}

/* The last 24 months, as one strip in a well, with the sentence that says what it shows. */
.ss .rc-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 26rem) auto;
  grid-template-areas:
    "label marks go"
    "words marks go";
  align-items: center;
  gap: 2px 22px;
  margin-top: 10px;
  padding: 16px 20px 16px 22px;
  border-radius: 22px;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .rc-strip__label {
  grid-area: label;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .rc-strip__words {
  grid-area: words;
  font-weight: 500;
  line-height: 1.4;
}

.ss .rc-strip .strip {
  grid-area: marks;
  gap: 3px;
  height: 30px;
}

.ss .rc-strip .strip__cell {
  min-width: 3px;
  border-radius: 4px;
}

.ss .rc-strip__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  white-space: nowrap;
}

.ss .rc-strip__go .icon {
  width: 16px;
  height: 16px;
  transition: transform 260ms var(--ss-spring);
}

@media (hover: hover) {
  .ss .rc-strip:hover {
    background: var(--ss-well-2);
  }

  .ss .rc-strip:hover .rc-strip__go {
    color: var(--ss-ink);
  }

  .ss .rc-strip:hover .rc-strip__go .icon {
    transform: translateX(3px);
  }
}

.ss .rc-strip:active {
  transform: scale(0.995);
}

.ss .rc-answer__note {
  margin-top: 16px;
}

/* ---------- The body: the questions, and a seated column beside them ---------- */

.ss .rc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ss-gap);
  margin-top: var(--ss-gap);
}

.ss .rc-main {
  min-width: 0;
}

.ss .rc-side {
  display: grid;
  gap: var(--ss-bezel);
  align-content: start;
  padding: var(--ss-bezel);
  border-radius: 30px;
  background: var(--ss-seat);
}

.ss .rc-side__plate {
  min-width: 0;
  padding: 22px 22px 20px;
  border-radius: 24px;
  background: var(--ss-plate);
}

.ss .rc-side__h {
  margin-bottom: 12px;
  font-size: var(--ss-t2);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* The contents: a plain list in the column, the one being read on a well that glides between them. */
.ss .rc-side .toc {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.ss .rc-side .toc ul {
  position: relative;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.ss .rc-side .toc a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  font-weight: 500;
}

.ss .rc-side .toc a.is-active {
  color: var(--ss-ink);
}

@media (hover: hover) {
  .ss .rc-side .toc a:hover {
    color: var(--ss-ink);
  }
}

.ss .rc-side .toc a.is-active {
  font-weight: 700;
}

.ss .rc-side .toc__ind {
  top: 0;
  left: 0;
  width: var(--tw, 0);
  height: var(--th, 0);
  border-radius: 12px;
  background: var(--ss-well);
  transform: translate(var(--tx, 0), var(--ty, 0));
}

/* Who runs it: a few plain lines, the record's own number, and their source. */
.ss .rc-side__lines {
  display: grid;
  gap: 6px;
}

.ss .rc-side__lines li {
  font-size: var(--ss-t1);
  line-height: 1.45;
}

.ss .rc-side__idents {
  margin-top: 12px;
}

.ss .rc-side .ident {
  min-height: 36px;
  background: var(--ss-well);
}

.ss .rc-side__facts .src {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ss-well);
}

/* Where it comes from: each dataset on its line, with its publisher and date. */
.ss .rc-side__list {
  display: grid;
}

.ss .rc-side__list li {
  display: grid;
  gap: 1px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ss-rule);
  font-size: var(--ss-t1);
  line-height: 1.4;
}

.ss .rc-side__list li:first-child {
  padding-top: 0;
}

.ss .rc-side__list a {
  color: var(--ss-ink);
  font-weight: 500;
}

.ss .rc-side__list span {
  color: var(--ss-muted);
}

.ss .rc-side__all {
  display: inline-flex;
  margin-top: 10px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

@media (hover: hover) {
  .ss .rc-side__all:hover {
    color: var(--ss-ink);
  }
}

/* Wide: the column stands beside the questions and stays in view as they scroll. */
@container record (min-width: 1000px) {
  .ss .rc-body {
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
  }

  .ss .rc-side {
    position: sticky;
    top: 20px;
    grid-column: 2;
    grid-row: 1;
  }

  .ss .rc-main {
    grid-column: 1;
    grid-row: 1;
  }
}

/*
 * Narrower (a sheet over a list, a tablet, a phone): the column folds under the short answer. Its plates
 * become the body's own, so the contents can stay in view as a row of chips while the questions scroll,
 * and who runs it and the sources sit side by side above them.
 */
@container record (max-width: 999.98px) {
  .ss .rc-side {
    display: contents;
  }

  .ss .rc-side__plate {
    border: var(--ss-bezel) solid var(--ss-seat);
    border-radius: 30px;
  }

  .ss .rc-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss .rc-side__toc {
    position: sticky;
    top: calc(var(--nav-h) + 8px);
    z-index: 12;
    grid-column: 1 / -1;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--ss-seat);
  }

  .ss .rc-side__toc .rc-side__h {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ss .rc-side .toc ul {
    flex-direction: row;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ss .rc-side .toc a {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: var(--ss-t1);
    white-space: nowrap;
  }

  .ss .rc-side .toc__ind {
    border-radius: 999px;
    background: var(--ss-plate);
  }

  /* The questions come before who runs it and the sources: a reader wants the record, not its metadata. */
  .ss .rc-side__toc {
    order: 1;
  }

  .ss .rc-main {
    order: 2;
    grid-column: 1 / -1;
  }

  .ss .rc-side__facts {
    order: 3;
  }

  .ss .rc-side__sources {
    order: 4;
  }

  /* A question opened from the contents lands below the contents' bar, not under it. */
  .ss .rc-main .q,
  .ss .record > .provider-area {
    scroll-margin-top: 48px;
  }

  .in-sheet .rc-main .q,
  .in-sheet .record > .provider-area {
    scroll-margin-top: 80px;
  }
}

@container record (max-width: 560px) {
  .ss .rc-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss .rc-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label go"
      "marks marks"
      "words words";
    gap: 8px 12px;
  }
}

/* What a provider adds, below the record, on its own recessed plate. */
.ss .record > .provider-area {
  margin-top: var(--ss-gap);
}

/* ---------- The foot: the previous and next records in your list ---------- */

.ss .rc-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--ss-gap);
}

.ss .rc-pager[hidden] {
  display: none;
}

.ss .rc-pager__card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 22px 26px 24px;
  border-radius: 24px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .rc-pager__card--next {
  grid-column: 2;
  justify-items: end;
  text-align: right;
}

.ss .rc-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .rc-pager__dir .icon {
  width: 16px;
  height: 16px;
  transition: transform 260ms var(--ss-spring);
}

.ss .rc-pager__name {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
}

@media (hover: hover) {
  .ss .rc-pager__card:hover {
    background: var(--ss-well);
  }

  .ss .rc-pager__card--prev:hover .rc-pager__dir .icon {
    transform: translateX(-3px);
  }

  .ss .rc-pager__card--next:hover .rc-pager__dir .icon {
    transform: translateX(3px);
  }
}

.ss .rc-pager__card:active {
  transform: scale(0.99);
}

/* ---------- In a sheet over a list ---------- */

.in-sheet .rc-head {
  padding-bottom: 20px;
}

.in-sheet .rc-head .rh__title {
  max-width: none;
  font-size: clamp(2rem, 4cqi, 2.75rem);
  view-transition-name: none;
}

.in-sheet .rc-side__toc {
  top: 0;
}

/* In the sheet the record sits on white, not on the tray, so its pills take the well that white plates give their
   buttons, and still read as pills; pressed, they keep their graphite. */
.in-sheet .rc-pill:not(.rc-pill--quiet):not([aria-pressed="true"]),
.in-sheet .rc-actions .watch-btn:not([aria-pressed="true"]) {
  background: var(--ss-well);
}

@media (hover: hover) {
  .in-sheet .rc-pill:not(.rc-pill--quiet):not([aria-pressed="true"]):hover,
  .in-sheet .rc-actions .watch-btn:not([aria-pressed="true"]):hover {
    background: var(--ss-well-2);
  }
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
  .ss .rc-context {
    margin-bottom: 16px;
  }

  .ss .rc-back {
    padding-right: 14px;
  }

  .ss .rc-actions {
    gap: 6px;
  }

  /* A pill whose words are wider than its line (an agency's own search, in the iPhone app's large type) takes a
     second line rather than run past the screen. */
  .ss .rc-pill,
  .ss .rc-actions .watch-btn {
    max-width: 100%;
    height: auto;
    min-height: 36px;
    padding: 4px 14px 4px 12px;
    font-size: var(--ss-t1);
    line-height: 1.2;
    white-space: normal;
  }

  .ss .rc-answer {
    padding: 18px 16px 16px;
    border-radius: 26px;
  }

  .ss .rc-side__plate {
    padding: 16px 14px 14px;
  }

  .ss .rc-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss .rc-pager__card--next {
    grid-column: auto;
  }

  .ss .rc-pager__name {
    font-size: var(--ss-t2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss .rc-shortlist__icon .icon,
  .ss .rc-back .icon,
  .ss .rc-strip__go .icon,
  .ss .rc-pager__dir .icon {
    transition: none;
  }
}

/* ---------- The month grid: the years' column wide enough for its four digits ---------- */

.ss .heat__corner {
  width: 2.75rem;
}

.ss .heat__grid tbody th {
  width: auto;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}

/* A figure and its unit read as one: "24.3%", "2 of 5". The shared tile spaces its parts with a gap. */
.ss .rc-answer .tile__value {
  column-gap: 0;
}

.ss .rc-answer .tile__unit {
  margin-left: 6px;
}

.ss .rc-answer .tile--attention .tile__value::before {
  margin-right: 10px;
}

/* On a phone the way back takes its own line; its place in the list and the steps share the next. */
@media (max-width: 560px) {
  .ss .rc-back {
    flex: 1 1 100%;
  }

  .ss .rc-count {
    margin: 0 auto 0 4px;
  }
}

/* ---------- A directory's services: each of its own categories a well, each service on a plate, its definition beneath ---------- */

.ss .hr-services {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ss .hr-services > .more > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ss .hr-services__head {
  color: var(--ss-ink);
  font-weight: 700;
}

.ss .hr-services__n {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-variant-numeric: tabular-nums;
}

.ss .hr-services .hr-services__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
}

.ss .hr-service {
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ss-plate);
}

.ss .hr-service__name {
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ss .hr-service__def {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.5;
}

/*
 * A finger's reach on a record (look.css holds the rest). The row of contents lends its links the seat's padding,
 * so each reaches 44px in the bar; this follows the list's own rule above, which would otherwise set its padding
 * back and cut every link to 36px. On a phone the record's pills stand 8px apart, so each wrapped line of them is
 * 44px from the next and no pill's reach is shared.
 */
@media (pointer: coarse) {
  .ss .rc-side__toc .toc ul {
    margin-block: -4px;
    padding-block: 4px;
  }
}

@media (pointer: coarse) and (max-width: 640px) {
  .ss .rc-actions {
    gap: 8px;
  }
}

/*
 * Soft Studio: the pages either side of a record. The places hub, what changed, search, the watch list,
 * how it works, the guide and not found. Laid over look.css; the build adds it after it.
 *
 * Everything here is the sample's own vocabulary: plates seated in the tray, wells for rows, graphite
 * pills with the orange knob for the one primary action, and the orange lamp only on what needs attention.
 */

/* ---------- Shared on these pages ---------- */

.ss .pg-head {
  padding-bottom: 32px;
}

.ss .pg-head__actions {
  margin-top: 20px;
}

/* A plate's own grid: its head, then its parts, 16px apart. */
.ss .pg-total .ss-core,
.ss .pg-src .ss-core,
.ss .pg-about .ss-core,
.ss .pg-start .ss-core,
.ss .pg-note .ss-core,
.ss .pg-lost .ss-core {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss .pg-src .ss-plate-head,
.ss .pg-about .ss-plate-head,
.ss .pg-start .ss-plate-head {
  margin-bottom: 0;
}

/* A tag on a plate: a well with its words. */
.ss .pg-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  white-space: nowrap;
}

/* The kinds as small white pills, where a page has nothing of its own to show. */
.ss .pg-kindlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .pg-kindlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 6px;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .pg-kindlink__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ss-plate);
}

.ss .pg-kindlink__icon .icon {
  width: 17px;
  height: 17px;
}

.ss .pg-kindlink:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .ss .pg-kindlink:hover {
    background: var(--ss-well-2);
  }
}

/* ---------- Places: every kind, with its count on the record ---------- */

.ss .pg-total__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
}

.ss .pg-total__n {
  font-size: var(--ss-t5);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.ss .pg-total__words {
  flex: 1 1 22rem;
  max-width: 44rem;
  color: var(--ss-muted);
}

.ss .pg-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: var(--ss-gap);
  margin: var(--ss-gap) 0 0;
  padding: 0;
  list-style: none;
}

.ss .pg-kind {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .pg-kind__core {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.ss .pg-kind__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.ss .pg-kind__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ss-well);
}

.ss .pg-kind__icon .icon {
  width: 22px;
  height: 22px;
}

.ss .pg-kind__name {
  display: block;
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.ss .pg-kind__count {
  display: block;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .pg-kind__count b {
  color: var(--ss-ink);
  font-size: var(--ss-t3);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.ss .pg-kind__line {
  display: block;
  margin-top: 4px;
}

.ss .pg-kind__demo,
.ss .pg-kind__src {
  display: block;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.ss .pg-kind__demo {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ss-well);
}

.ss .pg-kind__demo b {
  color: var(--ss-ink);
  font-weight: 700;
}

.ss .pg-kind__go {
  display: block;
  margin-top: auto;
  padding-top: 20px;
}

.ss .pg-kind__go .ss-btn {
  pointer-events: none;
}

.ss .pg-kind:active {
  transform: scale(0.995);
}

@media (hover: hover) {
  .ss .pg-kind:hover {
    background: var(--ss-seat-deep);
  }

  .ss .pg-kind:hover .ss-btn {
    background: var(--ss-pill);
    color: #ffffff;
  }

  .ss .pg-kind:hover .ss-btn .icon {
    color: #ffffff;
    transform: translateX(2px);
  }
}

.ss .pg-cross .ss-core {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.ss .pg-cross__text {
  flex: 1 1 22rem;
}

/* ---------- What changed ---------- */

.ss .pg-changes {
  display: flex;
  flex-direction: column;
  gap: var(--ss-gap);
}

.ss .pg-changes .pg-head,
.ss .pg-changes .pg-show {
  margin: 0;
}

/* The switch: radio buttons drawn as the sample's segmented control, so it works with no script. */
.ss .pg-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ss-seat);
}

.ss .pg-seg__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ss-muted);
  font: inherit;
  font-size: var(--ss-t1);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out);
}

.ss .pg-seg__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ss .pg-seg__n {
  color: var(--ss-muted);
  font-variant-numeric: tabular-nums;
}

.ss .pg-seg__opt:has(input:checked),
.ss .pg-seg__opt[aria-pressed="true"] {
  background: var(--ss-plate);
  color: var(--ss-ink);
}

.ss .pg-seg__opt:has(input:focus-visible) {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ss .pg-seg__opt:hover {
    color: var(--ss-ink);
  }
}

/* The switch shows one kind of change at a time: whole plates, and the blocks inside them. */
.ss .pg-changes:has(#show-finding:checked) [data-shows]:not([data-shows~="finding"]),
.ss .pg-changes:has(#show-rating:checked) [data-shows]:not([data-shows~="rating"]),
.ss .pg-changes:has(#show-licence:checked) [data-shows]:not([data-shows~="licence"]),
.ss .pg-changes:has(#show-recall:checked) [data-shows]:not([data-shows~="recall"]),
.ss .pg-changes:has(#show-finding:checked) .pg-block:not([data-show="finding"]),
.ss .pg-changes:has(#show-rating:checked) .pg-block:not([data-show="rating"]),
.ss .pg-changes:has(#show-licence:checked) .pg-block:not([data-show="licence"]),
.ss .pg-changes:has(#show-recall:checked) .pg-block:not([data-show="recall"]) {
  display: none;
}

.ss .pg-src__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ss-well);
  vertical-align: -10px;
}

.ss .pg-src__icon .icon {
  width: 18px;
  height: 18px;
}

.ss .pg-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss .pg-block + .pg-block {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ss-rule);
}

.ss .pg-block__title {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .pg-block__head .ss-meta {
  max-width: 54rem;
  margin-top: 4px;
}

/* Changes by the day they happened. */
.ss .pg-days,
.ss .pg-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .pg-days {
  gap: 22px;
}

.ss .pg-day__date {
  margin-bottom: 8px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .pg-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .pg-row__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ss-plate);
  color: var(--ss-muted);
}

.ss .pg-row__icon .icon {
  width: 18px;
  height: 18px;
}

/* A finding needs attention: the signal's ink, on the mark beside it. */
.ss .pg-row__icon.is-attention {
  color: var(--ss-signal-ink);
}

.ss .pg-row__text {
  min-width: 0;
}

.ss .pg-row__what {
  display: block;
  font-weight: 500;
}

.ss a.pg-row__what {
  color: var(--ss-ink);
  text-decoration: none;
}

@media (hover: hover) {
  .ss a.pg-row__what:hover {
    text-decoration: underline 2px var(--ss-ink);
    text-underline-offset: 3px;
  }
}

.ss .pg-row__where {
  display: block;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

/* Where a change has one, the row is the link to the agency's own record. */
.ss a.pg-row__text {
  color: inherit;
  text-decoration: none;
}

.ss .pg-row__out {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ss-plate);
  color: var(--ss-muted);
  transition: background-color 180ms var(--ss-out), color 180ms var(--ss-out);
}

.ss .pg-row__out .icon {
  width: 15px;
  height: 15px;
}

@media (hover: hover) {
  .ss .pg-row:has(a.pg-row__text:hover) {
    background: var(--ss-well-2);
  }

  .ss .pg-row:has(a.pg-row__text:hover) .pg-row__out {
    background: var(--ss-pill);
    color: #ffffff;
  }

  .ss a.pg-row__text:hover .pg-row__what {
    text-decoration: underline 2px var(--ss-ink);
    text-underline-offset: 3px;
  }
}

.ss .pg-row:has(a.pg-row__text:focus-visible) {
  background: var(--ss-well-2);
}

.ss .pg-src__note,
.ss .pg-src__text {
  max-width: 54rem;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.ss .pg-src__text {
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.5;
}

.ss .pg-src__source .src {
  margin: 0;
}

/* ---------- Search ---------- */

.ss .pg-search {
  display: flex;
  flex-direction: column;
  gap: var(--ss-gap);
  max-width: none;
}

.ss .pg-search .search-box {
  max-width: 44rem;
}

.ss .pg-search__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.ss .pg-search .search-page__note {
  flex: 1 1 24rem;
  max-width: 44rem;
  margin: 0;
}

/* The results are plates of their own, so the list itself is not another plate. */
.ss .pg-search .hits,
.ss .pg-search .hits:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: var(--ss-gap);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.ss .pg-seg[hidden] {
  display: none;
}

/* One plate per kind of result, with a way into that whole list. */
.ss .pg-group .ss-plate-head {
  gap: 4px 10px;
  margin-bottom: 10px;
}

.ss .pg-group__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--ss-well);
}

.ss .pg-group__icon .icon {
  width: 18px;
  height: 18px;
}

.ss .pg-group .ss-h-plate {
  flex: 0 1 auto;
}

.ss .pg-group .ss-h-note {
  font-variant-numeric: tabular-nums;
}

.ss .pg-group__all {
  margin-left: auto;
}

.ss .pg-group .items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .pg-golist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ss .pg-golist__item {
  gap: 10px;
}

.ss .pg-golist__item .icon:last-child {
  color: var(--ss-muted);
}

.ss .pg-search .results-count {
  margin: 0;
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .pg-search__order {
  margin: 0;
}

.ss .pg-search .hits__empty {
  max-width: 44rem;
  padding: 20px 22px;
  border-radius: 24px;
  background: var(--ss-plate);
  color: var(--ss-muted);
  text-align: left;
}

.ss .pg-search .hits__empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ss-ink);
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .pg-search .suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ss .pg-start[hidden] {
  display: none;
}

/* The search page's own result rows sit directly on their plate. */
.ss .pg-group .hit {
  background: none;
}

@media (hover: hover) {
  .ss .pg-group .hit:hover {
    background: var(--ss-well);
  }
}

/* A whole list, offered among the results: its name leads, not a record's facts. */
.ss .hit--go .hit__name {
  font-weight: 700;
}

/* ---------- The watch list ---------- */

.ss .pg-watch {
  display: flex;
  flex-direction: column;
  gap: var(--ss-gap);
}

.ss .pg-watch__count {
  margin: 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .pg-watch__count:empty {
  display: none;
}

.ss .w-list {
  max-width: none;
  gap: var(--ss-gap);
}

.ss .w-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 18px 20px;
}

.ss .w-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ss-well);
}

.ss .w-card__icon .icon {
  width: 22px;
  height: 22px;
}

.ss .w-card__text {
  min-width: 0;
}

.ss .w-card__name {
  display: inline-block;
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.24;
  text-decoration: none;
}

@media (hover: hover) {
  .ss .w-card__name:hover {
    text-decoration: underline 2px var(--ss-ink);
    text-underline-offset: 3px;
  }
}

.ss .w-card__line {
  margin-top: 2px;
  color: var(--ss-ink);
}

.ss .w-card__latest {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ss-well);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.ss .w-card__since {
  color: var(--ss-ink);
  font-weight: 500;
}

.ss .w-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ss .w-card__open .icon {
  width: 15px;
  height: 15px;
}

.ss .w-card__stop {
  background: none;
  color: var(--ss-muted);
}

@media (hover: hover) {
  .ss .w-card__stop:hover {
    background: var(--ss-well);
    color: var(--ss-ink);
  }
}

.ss .pg-empty {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: none;
  padding: 26px 28px 28px;
}

.ss .pg-empty[hidden] {
  display: none;
}

.ss .pg-empty h2 {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .pg-empty p {
  max-width: 44rem;
  margin-top: 8px;
  color: var(--ss-muted);
}

.ss .pg-note .ss-core {
  background: var(--ss-well);
}

.ss .pg-note .ss-meta {
  max-width: 54rem;
}

/* ---------- How it works ---------- */

.ss .pg-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .pg-rule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: var(--ss-well);
}

.ss .pg-rule h3 {
  font-size: var(--ss-t2);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.ss .pg-rule p {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

/* The sources, as the sample's tracker: a row per file, grouped under its publisher. */
.ss .pg-tracker {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ss .pg-tracker th,
.ss .pg-tracker td {
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

.ss .pg-tracker thead th {
  padding: 0 12px 10px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  white-space: nowrap;
}

.ss .pg-tracker tbody th,
.ss .pg-tracker tbody td {
  border-top: 1px solid var(--ss-rule);
  font-weight: 400;
}

.ss .pg-tracker tbody th[scope="row"] {
  font-weight: 500;
}

.ss .pg-tracker .n {
  color: var(--ss-muted);
  text-align: right;
  white-space: nowrap;
}

.ss .pg-tracker__group th {
  padding: 22px 12px 8px;
  border-top: 0;
}

.ss .pg-tracker tbody:first-of-type .pg-tracker__group th {
  padding-top: 4px;
}

.ss .pg-tracker__pub {
  font-weight: 700;
}

.ss .pg-tracker__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .pg-tracker td:first-child,
.ss .pg-tracker th:first-child {
  padding-left: 2px;
}

.ss .pg-tracker td:last-child,
.ss .pg-tracker th:last-child {
  padding-right: 2px;
}

.ss .pg-about .prose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 44rem;
}

/* A plate's heading grows along its head's line; here it heads a paragraph in the plate's column, so it keeps its
   own height and its words stay with it, however tall the plate beside makes this one. */
.ss .pg-about__sub {
  flex: none;
  margin-top: 10px;
}

.ss .pg-about-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: var(--ss-gap);
}

/* The page's plates follow one another down it with the look's own gap between them, so no two seats touch; the
   pair's own two keep the pair's gap. */
.ss .pg-about + .pg-about,
.ss .pg-about + .pg-about-pair {
  margin-top: var(--ss-gap);
}

.ss .pg-about-pair > .pg-about {
  margin-top: 0;
}

.ss .pg-about .table-wrap {
  margin: 0;
  overflow-x: auto;
  container-type: inline-size;
}

/* On a phone each file reads as a short entry: its name, then how often it changes and its latest date. */
@container (max-width: 30rem) {
  .ss .pg-tracker,
  .ss .pg-tracker tbody {
    display: block;
  }

  .ss .pg-tracker thead {
    display: none;
  }

  .ss .pg-tracker tr {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 12px 2px;
    border-top: 1px solid var(--ss-rule);
  }

  .ss .pg-tracker tr.pg-tracker__group {
    display: block;
    padding: 22px 2px 8px;
    border-top: 0;
  }

  .ss .pg-tracker tbody:first-of-type tr.pg-tracker__group {
    padding-top: 4px;
  }

  .ss .pg-tracker tbody th,
  .ss .pg-tracker tbody td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ss .pg-tracker tbody th[scope="row"] {
    flex: 1 0 100%;
  }

  .ss .pg-tracker tbody td {
    color: var(--ss-muted);
    font-size: var(--ss-t1);
  }

  /* A file's latest date sits in its entry's words, so it wraps as they do in large type, not past the screen. */
  .ss .pg-tracker tbody td.n {
    text-align: left;
    white-space: normal;
  }

  .ss .pg-tracker tbody td::before {
    content: attr(data-label) ": ";
  }

  .ss .pg-tracker tbody td:empty {
    display: none;
  }
}

/* ---------- The guide, as the sample's centred card ---------- */

.ss .guide {
  width: min(62rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: clip;
  border: 0;
  border-radius: 28px;
  background: var(--ss-plate);
  box-shadow: var(--ss-float);
  transform: scale(0.94) translateY(6px);
  transition:
    opacity 200ms var(--ss-out),
    transform 340ms var(--ss-spring),
    overlay 340ms allow-discrete,
    display 340ms allow-discrete;
}

.ss .guide[open] {
  transform: none;
}

@starting-style {
  .ss .guide[open] {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
}

.ss .guide::backdrop {
  background: var(--ss-scrim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ss .guide__head {
  align-items: flex-start;
  padding: 22px 22px 0 24px;
  border-bottom: 0;
}

.ss .guide__head h2 {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .guide__title .ss-meta {
  max-width: 34rem;
  margin-top: 4px;
}

/* The way out is the orange knob (look.css), at the card's top right. */
.ss .guide__close {
  margin: -4px -2px 0 auto;
}

.ss .guide__foot {
  padding: 14px 24px 22px;
}

/* The dots on the left, Back and Next on the right. */
.ss .guide__dots {
  margin-right: auto;
}

.ss .guide__back {
  background: var(--ss-well);
}

/* On the first step there is nowhere back to: an outline in the quiet tone, its word still readable (AA). */
.ss .guide__back[disabled] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-cell);
  color: var(--ss-muted);
  cursor: default;
}

/* On a phone the guide is one column: the step's words stay at the top while the record in miniature scrolls
   under them with its part marked, so what is said and what it points at are read together. */
@media (max-width: 819px) {
  .ss .guide__body {
    gap: 12px;
    padding-top: 0;
  }

  .ss .guide__steps {
    position: sticky;
    z-index: 2;
    top: 0;
    order: -1;
    padding: 12px 0 10px;
    background: var(--ss-plate);
  }
}

/* The smallest phones keep Back and Next on one line: the dots go, since each step says which of four it is. */
@media (max-width: 374px) {
  .ss .guide__dots {
    display: none;
  }
}

/* ---------- Not found ---------- */

.ss .pg-lost {
  max-width: 48rem;
}

.ss .pg-lost .ss-core {
  padding: 26px 28px 28px;
}

.ss .pg-lost__mark .mark {
  width: 48px;
  height: 48px;
  color: var(--ss-muted);
}

.ss .pg-lost__title {
  max-width: none;
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .pg-lost__text {
  max-width: 40rem;
  color: var(--ss-muted);
}

.ss .pg-lost__search .search-box {
  max-width: 34rem;
}

/* A field standing on a white plate takes the well, so it doesn't vanish into it. */
.ss .pg-lost__search .field,
.ss .pg-note .field {
  background: var(--ss-well);
}

.ss .pg-lost__home {
  margin-top: 2px;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 960px) {
  .ss .pg-kind__name {
    font-size: var(--ss-t3);
  }

  /* The guide is a sheet over the page, as every dialog is here (look.css draws its handle). */
  .ss .guide {
    inset: var(--ss-sheet-top) 0 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
    border-radius: 26px 26px 0 0;
    transform: translateY(32px);
  }

  .ss .guide[open] {
    transform: none;
  }

  @starting-style {
    .ss .guide[open] {
      opacity: 0;
      transform: translateY(32px);
    }
  }

  .ss .guide__head {
    flex: none;
    padding: 24px 14px 0 20px;
  }

  .ss .guide__body {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ss .guide__foot {
    flex: none;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  .ss .pg-total__n {
    font-size: 2.5rem;
  }

  .ss .pg-row {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 10px;
  }

  .ss .pg-row__icon {
    width: 32px;
    height: 32px;
  }

  .ss .pg-row__out {
    display: none;
  }

  .ss .w-card {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: 12px;
  }

  .ss .w-card__icon {
    width: 40px;
    height: 40px;
  }

  .ss .w-card__actions {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ss .pg-seg {
    width: 100%;
  }

  .ss .pg-seg__opt {
    padding: 0 12px;
  }

  .ss .pg-group__all {
    margin-left: 0;
  }

  /* The guide's foot: its dots, then Back and Next on one line, where a thumb is. */
  .ss .guide__foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 10px;
  }

  .ss .guide__dots {
    grid-area: 1 / 1;
    margin: 0;
  }

  .ss .guide__back {
    grid-area: 1 / 2;
    justify-self: end;
  }

  .ss .guide__next {
    grid-area: 1 / 3;
  }

  .ss .pg-lost .ss-core,
  .ss .pg-empty {
    padding: 20px 18px 22px;
  }
}

/* Soft Studio: the live site's own pieces. Laid over the other stylesheets; the build adds it last. */

/* ---------- A page's head, with the one primary action beside its title ---------- */

.ss .hr-head .crumbs {
  margin-bottom: 14px;
}

.ss .hr-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.ss .hr-head__all {
  margin-bottom: 6px;
}

.ss .hr-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 6px 14px;
}

/* ---------- Search first: one big field, its suggestions, and pills to start from ---------- */

.ss .hr-find {
  margin-bottom: var(--ss-gap);
}

.ss .hr-find .ss-core {
  padding: 30px 30px 26px;
}

.ss .hr-find__title {
  margin: 0 0 16px;
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .hr-find .hero__search {
  max-width: none;
  margin-top: 0;
}

/* On a white plate the field is a well. */
.ss .hr-find .field {
  background: var(--ss-well);
}

.ss .hr-find .field:focus-within {
  background: var(--ss-well-2);
}

.ss .hr-find .field__input {
  font-size: var(--ss-t3);
}

.ss .hr-try,
.ss .hr-places {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}

.ss .hr-places {
  margin: 0 0 var(--ss-gap);
}

.ss .hr-try__lead {
  margin-right: 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .hr-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .hr-places .hr-pill {
  background: var(--ss-plate);
}

.ss .hr-pill b,
.ss .hr-pill__where {
  color: var(--ss-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ss .hr-pill:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .ss .hr-pill:hover {
    background: var(--ss-well-2);
  }
}

/* The suggestions: places with their counts, then names; the last line searches every match. */
.ss .hr-drop {
  max-height: min(34rem, 64svh);
}

.ss .hr-hit__n {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ss .hit.is-active .hr-hit__n {
  background: var(--ss-plate);
}

@media (hover: hover) {
  .ss .hit:hover .hr-hit__n {
    background: var(--ss-plate);
  }
}

.ss .hr-every {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 500;
  text-decoration: none;
}

.ss .hr-every .icon {
  width: 16px;
  height: 16px;
  color: var(--ss-muted);
}

.ss .hr-every kbd {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ss-well);
  color: var(--ss-muted);
  font: inherit;
  font-size: 0.75rem;
}

@media (hover: hover) {
  .ss .hr-every:hover {
    background: var(--ss-well);
  }
}

/* ---------- States, as cards ---------- */

.ss .hr-states {
  margin-top: 8px;
}

.ss .hr-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .hr-state {
  display: flex;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .hr-state__core {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 18px;
}

.ss .hr-state__name {
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.ss .hr-state__n {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .hr-state__n b {
  margin-right: 2px;
  color: var(--ss-ink);
  font-size: var(--ss-t3);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ss .hr-state:active {
  transform: scale(0.985);
}

.ss .hr-state:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ss .hr-state:hover {
    background: var(--ss-seat-deep);
  }
}

/* ---------- A state: its biggest places as cards, and every one from A to Z ---------- */

.ss .hr-top {
  display: grid;
  gap: var(--ss-gap);
  margin-bottom: var(--ss-gap);
}

@media (min-width: 1100px) {
  .ss .hr-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ss .hr-cards,
.ss .hr-place-hits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .hr-cards > li,
.ss .hr-place-hits > li {
  display: flex;
}

/* Three places named or fewer: the plate as wide as its head and its tiles, the tiles sharing it, never one small
   tile in a plate the page's width. A phone's plate takes the width as every plate does. */
@media (min-width: 641px) {
  .ss .hr-results--few {
    width: fit-content;
    max-width: 100%;
  }

  .ss .hr-results--few .hr-place-hits {
    grid-template-columns: repeat(var(--n, 1), minmax(11.5rem, 1fr));
  }
}

.ss .hr-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px 14px;
  border-radius: 18px;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .hr-card__ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--ss-plate);
}

.ss .hr-card__ico .icon {
  width: 17px;
  height: 17px;
}

.ss .hr-card__name {
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.25;
}

.ss .hr-card__n {
  margin-top: 4px;
  font-size: var(--ss-t4);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}

.ss .hr-card__where {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.35;
}

.ss .hr-card--place .hr-card__n {
  order: 3;
  margin-top: 8px;
}

.ss .hr-card:active {
  transform: scale(0.98);
}

.ss .hr-card:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ss .hr-card:hover {
    background: var(--ss-well-2);
  }
}

.ss .hr-az__head {
  gap: 12px 18px;
}

.ss .hr-az__find {
  flex: 0 1 19rem;
  margin-left: auto;
}

.ss .hr-az__tabs {
  margin: 0 0 20px;
}

.ss .hr-az__set-name {
  display: none;
  margin: 18px 0 10px;
  font-size: var(--ss-t2);
  font-weight: 700;
}

/* One set at a time, as its tab says; while a name is typed, every set, each under its name. */
.ss .hr-az [data-az-off],
.ss .hr-az:has(input[value="counties"]:checked) [data-az-set="cities"] {
  display: none;
}

.ss .hr-az:has(input[value="counties"]:checked) [data-az-set="counties"],
.ss .hr-az.is-filtering [data-az-set] {
  display: block;
}

.ss .hr-az.is-filtering .hr-az__tabs {
  display: none;
}

.ss .hr-az.is-filtering .hr-az__set-name {
  display: block;
}

.ss .hr-az__group {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0;
}

.ss .hr-az__group[hidden],
.ss .hr-chips li[hidden] {
  display: none;
}

.ss .hr-az__letter {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  background: var(--ss-well-2);
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  font-weight: 700;
}

.ss .hr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .hr-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .hr-chip b {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ss .hr-chip:active {
  transform: scale(0.97);
}

.ss .hr-chip:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ss .hr-chip:hover {
    background: var(--ss-well-2);
  }
}

.ss .hr-areas__none {
  margin: 16px 0 0;
  color: var(--ss-muted);
}

.ss .hr-areas__none[hidden] {
  display: none;
}

/* ---------- A long list without a script: its pages ---------- */

.ss .fd-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
}

.ss .fd-pages[hidden] {
  display: none;
}

.ss .fd-pages__at {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-variant-numeric: tabular-nums;
}

/* ---------- Search: the places a query names, then each kind's matches ---------- */

.ss .hr-results {
  margin-bottom: var(--ss-gap);
}

.ss .hr-results .ss-plate-head .ss-btn {
  margin-left: auto;
}

.ss .hr-name-hits {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .hr-none__title {
  margin: 0 0 8px;
  font-size: var(--ss-t3);
  font-weight: 700;
}

.ss .hr-none {
  margin: 0 0 16px;
  color: var(--ss-muted);
}

/* ---------- A kind of place not live yet: shown, said, and not a link ---------- */

.ss-kcard.is-later .ss-card-core {
  background: var(--ss-well);
}

.ss-kcard.is-later .ss-card-name,
.ss-kcard.is-later .ss-card-ico .icon {
  color: var(--ss-muted);
}

.ss .pg-kind.is-later {
  opacity: 0.86;
}

.ss .pg-kind.is-later .ss-core {
  background: var(--ss-well);
}

/* On a phone a suggested place keeps its count beside it; only the arrow goes. */
@media (max-width: 600px) {
  .ss .hr-hit {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  }

  .ss .hr-hit .hit__end,
  .ss .hr-hit .hit__end:not(:has(.hit__flag)) {
    display: flex;
    grid-column: auto;
  }

  .ss .hr-hit .hit__go {
    display: none;
  }
}

@media (max-width: 640px) {
  .ss .hr-find .ss-core {
    padding: 22px 18px 20px;
  }

  /* 16px, so a phone doesn't zoom in when the field is tapped; the placeholder keeps 15px (look.css). */
  .ss .hr-find .field__input {
    font-size: 16px;
  }

  .ss .hr-az__find {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .ss .hr-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ss .hr-state__core {
    padding: 14px 14px 14px;
  }

  .ss .hr-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss .hr-az__group {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ss .hr-head__all {
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------- Things: the hub's kinds, a recall's model years, a model year's crash ratings ---------- */

.ss .th-list .hr-card__ico {
  margin-bottom: 12px;
  background: var(--ss-well);
}

.ss .th-list__line {
  margin-top: 6px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.43;
}

.ss .th-latest {
  margin-top: var(--ss-gap);
}

.ss .th-promise {
  max-width: 54rem;
  margin: 0 6px var(--ss-gap);
}

/* The model years an NHTSA recall names: each a small pill into its page. */
.ss .th-named__row {
  align-items: start;
}

.ss .th-years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.ss .th-years .hr-chip {
  height: 30px;
  padding: 0 12px;
  background: var(--ss-plate);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .ss .th-years .hr-chip:hover {
    background: var(--ss-pill);
    color: #ffffff;
  }
}

.ss .th-older {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

/* A model year's ratings: NHTSA's safety concerns sit directly beneath the stars of the version they qualify. */
/* A long title, a recall's sentence or two, set smaller and wider than a name. */
.ss .rc-head .rh__title:has(.rh__long) {
  max-width: 46ch;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.in-sheet .rc-head .rh__title:has(.rh__long) {
  font-size: clamp(1.5rem, 3cqi, 2rem);
}

.ss .th-ratings td.n {
  white-space: nowrap;
}

.ss .th-ratings td.n .sub,
.ss .th-ratings th .sub {
  display: block;
  margin-top: 2px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 400;
  white-space: normal;
}

.ss .th-ratings tbody tr:has(+ .th-concern) th,
.ss .th-ratings tbody tr:has(+ .th-concern) td {
  border-bottom: 0;
}

.ss .th-concern td {
  padding: 0 12px 14px 0;
}

.ss .th-concern__label {
  display: block;
  margin-bottom: 4px;
  color: var(--ss-signal-ink);
  font-size: var(--ss-t1);
  font-weight: 700;
}

.ss .th-concern .said {
  margin: 0;
}

.ss .th-makes {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .ss .th-ratings,
  .ss .th-ratings tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .ss .th-ratings caption {
    display: block;
  }

  .ss .th-ratings thead {
    display: none;
  }

  .ss .th-ratings tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ss-rule);
  }

  .ss .th-ratings tr.th-concern {
    display: block;
    padding-top: 0;
  }

  .ss .th-ratings th,
  .ss .th-ratings td,
  .ss .th-ratings td.n + td {
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .ss .th-ratings th {
    grid-column: 1 / -1;
    font-weight: 700;
  }

  .ss .th-ratings td.n::before {
    display: block;
    color: var(--ss-muted);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .ss .th-ratings td.n:nth-of-type(1)::before { content: 'Overall'; }
  .ss .th-ratings td.n:nth-of-type(2)::before { content: 'Frontal crash'; }
  .ss .th-ratings td.n:nth-of-type(3)::before { content: 'Side crash'; }
  .ss .th-ratings td.n:nth-of-type(4)::before { content: 'Rollover'; }
}

/* ---------- The iPhone app's own pages (?embed=ios): its chrome stands where the bar and the tray would ---------- */

html[data-embed] body.ss {
  padding-left: 0;
}

html[data-embed] .ss main.page {
  padding-top: 18px;
}

/* ---------- FDA's recalls: its own definitions quoted, the codes to check, the states its words name ---------- */

/* A definition of FDA's, quoted: the agency's words on a white plate in the row's well, who said it and where beneath. */
.ss .fda-quote {
  margin: 14px 0 0;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: var(--ss-plate);
}

.ss .fda-quote blockquote {
  margin: 0;
}

.ss .fda-quote blockquote p {
  margin: 0;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.5;
}

.ss .fda-quote figcaption {
  margin-top: 8px;
}

.ss .fda-cite {
  margin: 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  overflow-wrap: anywhere;
}

/* Lot and serial numbers run long and have no spaces to break at: they break where they must. */
.ss .fda-codes {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ss .fda-states {
  margin-top: 10px;
}

.ss .fda-states .hr-chip {
  padding: 0 14px;
  background: var(--ss-plate);
}

/* A list's years (FDA's, and NHTSA's older vehicles'): the one shown is the dark pill, the others open their own year. */
.ss .th-years-nav {
  margin: 0 0 var(--ss-gap);
}

.ss .th-years-nav .hr-pill {
  height: 44px;
  background: var(--ss-plate);
  font-variant-numeric: tabular-nums;
}

/* Decades of years: the earlier ones a tap away, wrapping in a row of their own once open. */
.ss .th-years-more > summary {
  list-style: none;
  cursor: pointer;
}

.ss .th-years-more > summary::-webkit-details-marker {
  display: none;
}

.ss .th-years-more[open] {
  flex-basis: 100%;
}

.ss .th-years-more__all {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ss .th-years-nav .hr-pill.is-current {
  background: var(--ss-pill);
  color: #ffffff;
}

.ss .th-years-nav .hr-pill.is-current b {
  color: rgba(255, 255, 255, 0.72);
}

/* A list the record doesn't publish yet: a card that says so, and isn't a link. */
.ss .th-list.is-later .hr-state__name {
  color: var(--ss-muted);
}

.ss .th-list.is-later .hr-card__ico .icon {
  opacity: 0.55;
}

@media (hover: hover) {
  .ss div.hr-state.is-later:hover {
    background: var(--ss-seat);
  }
}

/* The smallest phones: a state's name keeps inside its plate. Two plates to a line leave a name under 100px there,
   narrower than "Massachusetts" at 18px, so the names step down to 15px in a plate whose sides give a little, and
   "Massachusetts" fits whole; a longer word would break rather than leave its plate. */
@media (max-width: 359px) {
  .ss .hr-state__core {
    padding-inline: 12px;
  }

  .ss .hr-state__name {
    font-size: 0.9375rem;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* A finger's reach (look.css holds the rest): a line of place pills stands 10px from the next, so each pill's
   44px reach is its own. */
@media (pointer: coarse) {
  .ss .hr-try,
  .ss .hr-places {
    gap: 10px;
  }
}

/*
 * Soft Studio: what a list covers, and what a word means. Laid over the rest; the build adds it last.
 *
 * A state's list that holds only part of what the state licenses says so on a small white plate under its head,
 * on the state's page, its lists and every record from it. Nothing here is orange: a gap in a list is a fact
 * about the list, not an alarm about a place.
 */

/* ---------- What a state's list covers ---------- */

.ss .hr-scope {
  max-width: 72ch;
  margin-top: 18px;
}

.ss .hr-scope__core {
  padding: 16px 20px 18px;
}

.ss .hr-scope__label {
  margin: 0 0 4px;
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.ss .hr-scope__text {
  margin: 0;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.55;
}

/* What a kind's count covers, on its page: the same plate, and under its words the source of any figure it cites. */
.ss .hr-counted__src {
  margin-top: 10px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.45;
}

.ss .hr-counted__src .src {
  padding: 0;
  background: none;
}

.ss .hr-counted__src p {
  margin: 0;
}

/* In a record's head the note sits between where the place is and what you can do with it. */
.ss .rc-head .hr-scope {
  margin: 16px 0 4px;
}

/* A state's card on its kind's page, when its list is only part of what the state licenses. */
.ss .hr-state__part {
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  line-height: 1.35;
}

@media (max-width: 640px) {
  .ss .hr-scope {
    margin-top: 14px;
  }

  .ss .hr-scope__core {
    padding: 14px 16px 16px;
  }
}

/* On a list or a record, the few words show and the rest opens on a tap. */
.ss .hr-scope--compact .hr-scope__core {
  padding: 0;
}

.ss .hr-scope__more > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 24px;
  list-style: none;
  cursor: pointer;
}

.ss .hr-scope__more > summary::-webkit-details-marker {
  display: none;
}

.ss .hr-scope__more > summary .hr-scope__label {
  margin: 0;
}

.ss .hr-scope__tag {
  color: var(--ss-ink);
  font-size: var(--ss-t2);
}

.ss .hr-scope__why {
  margin-left: auto;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ss .hr-scope__more[open] .hr-scope__why {
  text-decoration: none;
}

.ss .hr-scope__more > summary:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

.ss .hr-scope__more > .hr-scope__text {
  padding: 0 18px 16px;
}

/* ---------- What a word means, a tap away ---------- */

.ss .term {
  position: relative;
}

.ss .term__btn {
  position: relative;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}

/* A finger's reach around a word that is only a line tall, as every small control has on a touch screen (look.css). */
@media (pointer: coarse) {
  .ss .term__btn::after {
    position: absolute;
    inset: min(0px, calc(50% - 22px));
    content: "";
  }
}

.ss .term__btn[aria-expanded="true"] {
  text-decoration-style: solid;
}

.ss .term__btn:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

.ss .term__tip {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  display: block;
  width: max-content;
  max-width: min(22rem, calc(100vw - 24px));
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: var(--ss-plate);
  box-shadow: var(--ss-float);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  white-space: normal;
  transform: translateX(var(--term-shift, 0));
}

.ss .term__tip[hidden] {
  display: none;
}

.ss .term__src {
  color: var(--ss-muted);
}

@media (max-width: 640px) {
  /* On a phone the meaning opens in the text's own flow, the width of the column. */
  .ss .term__tip {
    position: static;
    width: auto;
    max-width: none;
    margin: 8px 0 6px;
    border: 2px solid var(--ss-seat);
    background: var(--ss-plate);
    box-shadow: none;
    transform: none;
  }
}

/* ---------- The words a record uses, in one closed list ---------- */

.ss .terms {
  margin-top: 14px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .terms__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 16px;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.ss .terms__head::-webkit-details-marker {
  display: none;
}

.ss .terms__head .icon {
  width: 18px;
  height: 18px;
}

.ss .terms__n {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--ss-plate);
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-variant-numeric: tabular-nums;
}

.ss .terms__head:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

.ss .terms__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 4px 16px 16px;
}

.ss .terms__item dt {
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  font-weight: 700;
}

.ss .terms__item dd {
  margin: 2px 0 0;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.5;
}

.ss .terms__item .term__src {
  font-size: var(--ss-t1);
}

/* ---------- A page's one line on what it gives you ---------- */

.ss .hr-sub {
  max-width: 68ch;
  margin-top: 8px;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  line-height: 1.5;
}

/*
 * Soft Studio: the free accounts. The sign-in sheet is a card over the dimmed page on a wide screen and a sheet
 * rising from the foot on a phone, closed with the orange knob as every dialog is. Its ways in are full-width pills a
 * thumb can't miss: Google's and Apple's in their own brands' colours, as their sign-in rules ask, then the emailed
 * link as the graphite primary pill with its orange knob. Pages are plates in the silver tray; rows sit in wells.
 * Every colour here is one of the look's tokens, so a dark theme that redraws the tokens redraws these too.
 */

/* ---------- The sign-in sheet ---------- */

.ss .hr-sheet {
  width: min(30rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 28px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  box-shadow: var(--ss-float);
  opacity: 0;
  transform: scale(0.94) translateY(6px);
  transition:
    opacity 200ms var(--ss-out),
    transform 340ms var(--ss-spring),
    overlay 340ms allow-discrete,
    display 340ms allow-discrete;
}

.ss .hr-sheet[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  .ss .hr-sheet[open] {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
}

.ss .hr-sheet::backdrop {
  background: var(--ss-scrim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ss .hr-sheet__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 18px 4px 26px;
}

.ss .hr-sheet__title {
  flex: 1;
  min-width: 0;
}

.ss .hr-sheet__title h2 {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .hr-sheet__title .ss-meta {
  margin-top: 8px;
  font-size: var(--ss-t2);
  line-height: 1.5;
}

/* The way out: the orange knob, at the card's top right. */
.ss .hr-sheet__close {
  margin: -2px 0 0;
}

.ss .hr-sheet__body {
  padding: 18px 26px 24px;
}

@media (prefers-reduced-motion: reduce) {
  .ss .hr-sheet,
  .ss .hr-sheet[open] {
    transition: none;
    transform: none;
  }
}

/* On a phone the sheet rises from the foot and stops short of the top, with a handle that says it is a card on top. */
@media (max-width: 960px) {
  .ss .hr-sheet {
    inset: auto 0 0;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--ss-sheet-top));
    margin: 0;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-radius: 26px 26px 0 0;
    transform: translateY(32px);
  }

  .ss .hr-sheet[open] {
    transform: none;
  }

  @starting-style {
    .ss .hr-sheet[open] {
      opacity: 0;
      transform: translateY(32px);
    }
  }

  .ss .hr-sheet::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--ss-well-2);
    pointer-events: none;
  }

  .ss .hr-sheet__head {
    padding: 26px 14px 2px 20px;
  }

  .ss .hr-sheet__title h2 {
    font-size: 1.5rem;
  }

  .ss .hr-sheet__body {
    padding: 16px 20px 22px;
  }
}

/* ---------- The ways in ---------- */

.ss .hr-signin {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss .hr-signin__brands {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Google's and Apple's pills: each brand's own colours and mark, full width and 48px tall. */
.ss .hr-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: var(--ss-t2);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 140ms var(--ss-spring), background-color 180ms var(--ss-out), box-shadow 180ms var(--ss-out);
}

.ss .hr-brand:active {
  transform: scale(0.98);
}

.ss .hr-brand-mark {
  width: 20px;
  height: 20px;
  flex: none;
}

.ss .hr-brand--google {
  background: #ffffff;
  color: #1f1f1f;
  box-shadow: inset 0 0 0 1px #747775;
}

.ss .hr-brand--apple {
  background: #000000;
  color: #ffffff;
}

.ss .hr-brand--apple .hr-brand-mark {
  width: 17px;
  height: 20px;
  margin-top: -3px;
}

.ss .hr-brand:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ss .hr-brand--google:hover {
    background: #f8fafd;
  }

  .ss .hr-brand--apple:hover {
    background: #2b2b2b;
  }
}

/* On a dark page each brand turns to its own dark-ground pill. */
:root[data-theme="dark"] .ss .hr-brand--google {
  background: #131314;
  color: #e3e3e3;
  box-shadow: inset 0 0 0 1px #8e918f;
}

:root[data-theme="dark"] .ss .hr-brand--apple {
  background: #ffffff;
  color: #000000;
}

.ss .hr-signin__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .hr-signin__or::before,
.ss .hr-signin__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ss-well-2);
}

.ss .hr-signin__email {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss .hr-signin__email[hidden] {
  display: none;
}

.ss .hr-label {
  font-size: var(--ss-t1);
  font-weight: 500;
}

/* A field a phone won't zoom into: 16px words, 48px tall, in its well. */
.ss .hr-input {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-ink);
  font: inherit;
  font-size: 16px;
  transition: background-color 180ms var(--ss-out), box-shadow 180ms var(--ss-out);
}

.ss .hr-input::placeholder {
  color: var(--ss-closed);
}

.ss .hr-input:focus-visible {
  outline: none;
  background: var(--ss-well-2);
  box-shadow: 0 0 0 2px var(--ss-ink);
}

/* Turnstile's widget, at the full width of the form; it holds its place while it loads. */
.ss .hr-turnstile {
  min-height: 65px;
}

.ss .hr-turnstile:empty {
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .hr-signin__go {
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding-left: 22px;
}

.ss .hr-signin__go:disabled {
  opacity: 0.6;
  cursor: progress;
}

.ss .hr-signin__error {
  margin: 0;
}

.ss .hr-signin__sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .hr-signin__sent[hidden] {
  display: none;
}

.ss .hr-signin__sent:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 3px;
}

.ss .hr-signin__sent h3 {
  font-size: var(--ss-t3);
  font-weight: 700;
}

.ss .hr-signin__sent-mark .icon,
.ss .hr-big-mark .icon {
  width: 28px;
  height: 28px;
  color: var(--ss-muted);
}

.ss .hr-signin__print {
  margin: 16px 0 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.5;
}

.ss .hr-signin__print a {
  color: var(--ss-ink);
}

/* ---------- Pages: sign-in, the account, privacy and terms, and short notices ---------- */

.ss .hr-acct-head h1 {
  max-width: none;
}

.ss .hr-signin-plate {
  max-width: 34rem;
}

/* Sign-in on a wide screen: the ways in, and beside them what an account keeps, so neither half of the page is
   left empty. One column where the two don't fit side by side, what it keeps under the ways in. */
.ss .hr-signin-grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: var(--ss-gap);
  align-items: start;
}

.ss .hr-signin-grid .hr-signin-plate {
  max-width: none;
}

.ss .hr-keeps .ss-core {
  padding: 28px 28px 26px;
}

.ss .hr-keeps .hr-row__icon .icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 960px) {
  .ss .hr-signin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss .hr-signin-grid > .ss-plate {
    max-width: 34rem;
  }
}

@media (max-width: 640px) {
  .ss .hr-keeps .ss-core {
    padding: 22px 18px 22px;
  }

  .ss .hr-signin-grid > .ss-plate {
    max-width: none;
  }
}

.ss .hr-signin-plate .ss-core,
.ss .hr-card-plate .ss-core {
  padding: 28px 28px 26px;
}

.ss .hr-card-plate {
  max-width: 38rem;
}

.ss .hr-card-plate .ss-core {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ss .hr-plate-title {
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.ss .hr-notice-text p + p {
  margin-top: 8px;
}

/* What just happened, said once at the top: a well, its lamp only when something didn't work. */
.ss .hr-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 48rem;
  margin: 0 0 var(--ss-gap);
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--ss-plate);
  font-weight: 500;
}

.ss .hr-notice--warn::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--ss-signal);
}

.ss .hr-card-plate .hr-notice {
  margin: 0;
  background: var(--ss-well);
}

.ss .hr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ss .hr-inline-form {
  display: inline-flex;
}

.ss .hr-continue,
.ss .hr-trial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.ss .hr-trial .hr-input {
  max-width: 24rem;
}

/* The account: its plates in two columns on a wide screen, one on a phone. */
.ss .hr-acct-grid,
.ss .hr-legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ss-gap);
  align-items: start;
}

.ss .hr-acct .ss-core,
.ss .hr-legal .ss-core {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ss .hr-acct .ss-plate-head,
.ss .hr-legal .ss-plate-head {
  margin-bottom: 0;
}

/* Rows in wells: an icon, what it is, and what can be done with it. */
.ss .hr-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .hr-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .hr-row__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ss-plate);
}

.ss .hr-row__icon .icon,
.ss .hr-row__icon .hr-brand-mark {
  width: 18px;
  height: 18px;
  color: var(--ss-ink);
}

.ss .hr-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ss .hr-row__name {
  overflow-wrap: anywhere;
  color: var(--ss-ink);
  font-weight: 700;
}

.ss a.hr-row__name,
.ss .hr-row__name a {
  text-decoration: none;
}

@media (hover: hover) {
  .ss a.hr-row__name:hover,
  .ss .hr-row__name a:hover,
  .ss .hr-row__line a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.ss .hr-row__line {
  overflow-wrap: anywhere;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.45;
}

.ss .hr-row__line a {
  color: inherit;
}

.ss .hr-row__acts {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  gap: 8px;
  margin-top: 6px;
}

.ss .hr-row__acts .ss-btn {
  background: var(--ss-plate);
}

.ss .hr-row.is-muted .hr-row__icon {
  opacity: 0.55;
}

.ss .hr-relay {
  margin: 0;
}

/* Deleting is behind one more press, and says plainly what it does. */
.ss .hr-delete {
  margin: 0;
}

.ss .hr-delete__open {
  list-style: none;
}

.ss .hr-delete__open::-webkit-details-marker {
  display: none;
}

.ss .hr-delete__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--ss-well);
}

/* The graphite of a primary pill, in either light. */
.ss .ss-btn.hr-danger {
  background: var(--ss-pill);
  color: #ffffff;
}

.ss .hr-import {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .hr-import[hidden] {
  display: none;
}

.ss .hr-import__text {
  font-weight: 500;
}

/* The watch list's own page, before signing in: the way to keep one, shown once the script knows no one is. */
.js .ss .hr-watch-signin:not(.is-shown) {
  display: none;
}

.ss .pg-watch > .hr-import {
  margin-bottom: var(--ss-gap);
}

/* Privacy and terms: plates of plain words, at a reading measure. */
.ss .hr-prose {
  max-width: 62ch;
}

.ss .hr-prose ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 1.1em;
}

.ss .hr-prose li::marker {
  color: var(--ss-muted);
}

.ss .hr-prose p + p {
  margin-top: 10px;
}

.ss .hr-legal#kept {
  grid-column: 1 / -1;
}

/* ---------- Saving a list as a search ---------- */

.ss .hr-save .icon {
  color: var(--ss-ink);
}

.ss .hr-save[aria-pressed="true"] .icon {
  fill: var(--ss-ink);
}

.ss .hr-save:disabled {
  opacity: 0.6;
}

.ss .hr-head__save {
  float: right;
  margin: 4px 0 12px 16px;
}

.ss [data-compare-keep][aria-pressed="true"] .icon {
  fill: currentColor;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 960px) {
  .ss .hr-acct-grid,
  .ss .hr-legal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ss .hr-signin-plate .ss-core,
  .ss .hr-card-plate .ss-core,
  .ss .hr-acct .ss-core,
  .ss .hr-legal .ss-core {
    padding: 22px 18px 22px;
  }

  .ss .hr-row {
    padding: 12px;
  }

  .ss .hr-row__acts {
    grid-column: 1 / -1;
  }

  .ss .hr-head__save {
    float: none;
    margin: 0 0 14px;
  }

  .ss .hr-plate-title {
    font-size: 1.5rem;
  }
}

/* A finger's reach on a touch screen: the small pills reach out to 44px, as everywhere else. */
@media (pointer: coarse) {
  .ss .hr-signin__print a,
  .ss .hr-row__name,
  .ss .hr-row__line a {
    position: relative;
  }

  .ss .hr-signin__print a::after,
  .ss .hr-row__line a::after {
    content: "";
    position: absolute;
    inset: min(0px, calc(50% - 22px));
  }

  .ss .hr-input {
    min-height: 52px;
  }
}

/* In the well that says to check one's email, its one pill stands on white. */
.ss .hr-signin__sent .ss-btn {
  background: var(--ss-plate);
}

/* Some of the look's own classes set a display; what the script hides stays hidden. */
.ss .hr-card-plate [hidden],
.ss .hr-signin [hidden],
.ss .hr-sheet [hidden],
.ss .hr-acct [hidden] {
  display: none !important;
}

/* In a well, a plain pill stands on white. */
.ss .hr-import .ss-btn:not(.ss-btn-primary),
.ss .hr-delete__body .ss-btn:not(.hr-danger) {
  background: var(--ss-plate);
}

/* Side by side, with a comparison to keep: the title, copying a link, keeping it, and the way out, on one line. */
.ss .fd-cmp__head:has([data-compare-keep]) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

/* On a phone the title and the way out keep the first line; copying and keeping take a line each below. */
@media (max-width: 640px) {
  .ss .fd-cmp__head:has([data-compare-keep]) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ss .fd-cmp__head [data-compare-keep] {
    grid-row: 3;
  }
}

/* Privacy and terms open with a plate across the page, and none is left alone on a line. */
.ss .hr-legal-grid > :first-child,
.ss .hr-legal-grid > #kept ~ :last-child {
  grid-column: 1 / -1;
}

/*
 * Soft Studio: search. The list a query asks for first, then every kind of place and thing it matches, each a
 * first page of its own with the rest a tap away, and the suggestions as someone types.
 */

/* ---------- Search: the list a query asks for, first ---------- */

.ss .hr-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.ss .hr-lead__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ss-well);
}

.ss .hr-lead__ico .icon {
  width: 22px;
  height: 22px;
}

.ss .hr-lead__text {
  flex: 1 1 16rem;
  min-width: 0;
}

.ss .hr-lead__title {
  margin: 0;
  font-size: var(--ss-t4);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.ss .hr-lead__where {
  display: block;
  margin-top: 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  font-weight: 400;
  letter-spacing: 0;
}

.ss .hr-lead__n {
  margin: 6px 0 0;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
}

.ss .hr-lead__n b {
  color: var(--ss-ink);
  font-size: var(--ss-t3);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ss .hr-lead__none {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.5;
}

.ss .hr-lead__go {
  flex: none;
}

.ss .hr-lead__also {
  margin: 22px 0 10px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 700;
}

.ss .hr-results__h {
  margin: 30px 0 12px;
  font-size: var(--ss-t3);
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ss .hr-card--none .hr-card__where {
  color: var(--ss-muted);
}

/* A suggestion that is a whole list: its count reads like a place's. */
.ss .hr-hit--lead .hit__name {
  font-weight: 700;
}

@media (max-width: 480px) {
  .ss .hr-lead__go {
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------- The search page: every kind's first results, the rest a tap away ---------- */

/* What matched, counted, under the field. */
.ss .sr-summary {
  max-width: 62ch;
  margin: 0 0 var(--ss-gap);
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  line-height: 1.5;
}

.ss .sr-summary a {
  color: var(--ss-ink);
}

/* The tabs: the look's segmented control, each a link, so they work without the script. */
.ss .sr-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--ss-gap);
}

.ss .sr-tabs .pg-seg__opt {
  color: var(--ss-muted);
  text-decoration: none;
}

.ss .sr-tabs .pg-seg__opt[aria-current="true"] {
  background: var(--ss-plate);
  color: var(--ss-ink);
}

.ss .sr-tabs .pg-seg__opt[aria-current="true"] .pg-seg__n {
  color: var(--ss-ink);
}

/* A kind of result there are none of: its words stay readable (AA) by day and at night, as every control with
   nowhere to go keeps them, and quieter than a tab that leads somewhere: lighter, with its 0. */
.ss .sr-tabs .pg-seg__opt.is-none {
  cursor: default;
  font-weight: 400;
}

.ss .sr-tabs a.pg-seg__opt:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ss .sr-tabs a.pg-seg__opt:hover {
    color: var(--ss-ink);
  }
}

/* A tab shows only its own groups. */
.ss .sr .is-off {
  display: none;
}

.ss .sr-group__head {
  flex-wrap: wrap;
  row-gap: 8px;
}

.ss .sr-group__head .sr-group__list {
  margin-left: auto;
}

.ss .sr-rows .hit {
  scroll-margin-top: calc(var(--nav-h, 0px) + 16px);
}

/* "Show more": a well on the white plate, the next count in its words and what is still to come beside them. */
.ss .sr-more {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.ss .sr-more__btn {
  height: auto;
  min-height: 44px;
  padding: 8px 18px;
  background: var(--ss-well);
  white-space: normal;
}

.ss .sr-more__left {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 400;
}

.ss .sr-more__btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

@media (hover: hover) {
  .ss .sr-more__btn:hover {
    background: var(--ss-well-2);
  }
}

/* A group's own pages, for a browser without the script. */
.ss .sr-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

/* ---------- Suggestions ---------- */

/* A list the words ask for that has none of its kind there: said, quietly. */
.ss .hr-hit--none .hit__name {
  color: var(--ss-muted);
}

/* Any field that suggests holds its suggestions under it, over what follows. */
.ss .search-box[data-suggest-box] {
  position: relative;
  z-index: 5;
}

/* On a touch screen the tabs answer a finger: 44px tall. */
@media (pointer: coarse) {
  .ss .sr-tabs .pg-seg__opt {
    height: 44px;
  }
}

@media (max-width: 600px) {
  /* Four kinds of result don't fit a phone's line: two lines of two, never three and one, in a seat whose corners
     follow its pills'. A search of things has three, and they share one line. */
  .ss .sr-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: 22px;
  }

  .ss .sr-tabs:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ss .sr-tabs .pg-seg__opt {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 10px;
  }

  .ss .sr-more__btn {
    width: 100%;
    justify-content: space-between;
  }

  .ss .sr-group__head .sr-group__list {
    margin-left: 0;
  }
}

/* On a touch screen the tabs are 44px tall, so the seat's corners round to match theirs. */
@media (pointer: coarse) and (max-width: 600px) {
  .ss .sr-tabs {
    border-radius: 26px;
  }
}

/* The smallest phones: three tabs don't fit a line with a count of four figures, so two share the first line and
   the third takes the whole of the second. */
@media (max-width: 359px) {
  .ss .sr-tabs:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss .sr-tabs:not(:has(> :nth-child(4))) > :last-child {
    grid-column: 1 / -1;
  }
}

/*
 * CPSC's reports of harm (demo/render/reports.ts): a group's summary plate with its monthly bars and how badly anyone
 * was hurt, the reports as wells in a plate, each with the company's words set apart, and the lists of brands and
 * product types. Flat bars in the pillar's ink, no glow; the orange lamp only on a death, a hospital stay or an ER visit.
 */

/* ---------- The plain words every page of reports leads with ---------- */

.ss .rp-plain {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 760px;
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  line-height: 1.45;
}

.ss .rp-plain__icon {
  flex: none;
  padding-top: 1px;
  color: var(--ss-muted);
}

.ss .rp-plain__icon .icon {
  width: 18px;
  height: 18px;
}

/* ---------- A group: the summary plate ---------- */

.ss .rp-summary {
  margin-top: 18px;
}

.ss .rp-summary .rc-answer__tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

.ss .rp-who {
  margin: 18px 0 0;
  padding: 0;
}

.ss .rp-who > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--ss-rule);
}

.ss .rp-who dt {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 600;
  line-height: 1.5;
}

.ss .rp-who dd {
  margin: 0;
  min-width: 0;
  font-size: var(--ss-t2);
  overflow-wrap: anywhere;
}

.ss .rp-who__also {
  color: var(--ss-muted);
}

.ss .rp-glance {
  display: grid;
  align-items: start;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 900px) {
  .ss .rp-glance {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.ss .rp-glance__part {
  min-width: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .rp-glance__h {
  margin: 0 0 10px;
  font-size: var(--ss-t2);
  font-weight: 700;
}

.ss .rp-glance__note {
  margin-top: 10px;
  font-size: var(--ss-t1);
}

/* The monthly bars: one column a month, its number over it, its month under it. */

.ss .rp-chart {
  margin: 0;
  container-type: inline-size;
}

.ss .rp-chart__words {
  margin: 0 0 12px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  line-height: 1.45;
}

.ss .rp-chart__bars {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  height: 140px;
}

.ss .rp-bar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  text-align: center;
}

.ss .rp-bar__n {
  min-height: 15px;
  color: var(--ss-ink);
  font-size: 0.625rem;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 15px;
  white-space: nowrap;
}

.ss .rp-bar__track {
  position: relative;
  display: block;
  margin-top: 2px;
  border-bottom: 1px solid var(--ss-closed);
}

.ss .rp-bar__fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--v) * 100%);
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--hk-c-ink, var(--ss-signal-ink));
}

.ss .rp-bar.is-none .rp-bar__fill {
  display: none;
}

.ss .rp-bar__m {
  padding-top: 4px;
  color: var(--ss-muted);
  font-size: 0.6875rem;
  line-height: 1.2;
}

.ss .rp-bar__mm {
  display: none;
}

@container (min-width: 420px) {
  .ss .rp-bar__mm {
    display: inline;
  }
}

.ss .rp-chart__axis {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .rp-behind {
  margin-top: 12px;
}

.ss .rp-glance .hk-counted__btn,
.ss .rc-main .rp-behind .hk-counted__btn {
  background: var(--ss-plate);
}

.ss .rp-sources .hk-counted__btn,
.ss .fd-source .rp-behind .hk-counted__btn {
  background: var(--ss-plate);
}

.ss .rp-behind__body {
  margin-top: 10px;
}

.ss .rp-table {
  max-height: 22rem;
  overflow: auto;
  border-radius: 12px;
  background: var(--ss-plate);
}

.ss .rp-table .table {
  width: 100%;
}

.ss .rp-table caption {
  padding: 10px 12px 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  text-align: left;
}

/* How badly anyone was hurt: a short label, its count, and a flat bar under them. */

.ss .rp-sev {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss .rp-sev__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
}

.ss .rp-sev__label {
  min-width: 0;
  font-size: var(--ss-t2);
}

.ss .rp-sev__n {
  font-size: var(--ss-t2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ss .rp-sev__track {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--ss-plate);
  overflow: hidden;
}

.ss .rp-sev__fill {
  display: block;
  width: calc(var(--v) * 100%);
  min-width: 3px;
  height: 100%;
  border-radius: 999px;
  background: var(--hk-c-ink, var(--ss-signal-ink));
}

.ss .rp-lamp {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--ss-signal);
  vertical-align: 1px;
}

/* ---------- A group: the reports, each a well, as CPSC published it ---------- */

.ss .rp-reports {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ss .rp-report {
  min-width: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .rp-report__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ss .rp-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 700;
}

.ss .rp-report__dates {
  margin: 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .rp-report__product {
  margin: 12px 0 0;
  font-size: var(--ss-t1);
  overflow-wrap: anywhere;
}

.ss .rp-report__k {
  color: var(--ss-muted);
  font-weight: 600;
}

.ss .rp-report__text {
  max-width: 72ch;
  margin-top: 10px;
  font-size: var(--ss-t2);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ss .rp-report__text p {
  margin: 0;
  white-space: pre-line;
}

.ss .rp-report__text p + p {
  margin-top: 8px;
}

.ss .rp-report__details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.75rem), 1fr));
  grid-auto-flow: row dense;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--ss-rule);
}

.ss .rp-d {
  min-width: 0;
}

.ss .rp-d--wide {
  grid-column: 1 / -1;
}

.ss .rp-d dt {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 600;
}

.ss .rp-d dd {
  margin: 1px 0 0;
  font-size: var(--ss-t1);
  overflow-wrap: break-word;
}

/* The company's comments: on a white plate of their own, said to be the company's words. */

.ss .rp-company {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ss-rule);
  border-radius: 12px;
  background: var(--ss-plate);
}

.ss .rp-company__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 700;
}

.ss .rp-company__who .icon {
  width: 16px;
  height: 16px;
}

.ss .rp-company__text {
  margin-top: 6px;
  font-size: var(--ss-t2);
  overflow-wrap: anywhere;
}

.ss .rp-company__text p {
  margin: 0;
  white-space: pre-line;
}

.ss .rp-company__text p + p {
  margin-top: 6px;
}

.ss .rp-report__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: 12px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .rp-report__no {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ss .rp-report__out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--ss-ink);
  font-weight: 600;
}

.ss .rp-report__out .icon {
  width: 16px;
  height: 16px;
}

/* The pages of a group's reports. */

.ss .rp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 12px;
}

.ss .rp-pager__at {
  margin: 0;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
}

.ss .rp-pager__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ss .rp-pager .hr-pill {
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
}

.ss .rp-pager .hr-pill.is-current {
  background: var(--ss-pill);
  color: #ffffff;
  font-weight: 700;
}

.ss .rp-pager__gap {
  color: var(--ss-muted);
}

.ss .rp-disclaimer {
  margin: 0;
  font-size: var(--ss-t2);
  line-height: 1.55;
}

.ss .rp-disclaimer p {
  margin: 0;
}

/* ---------- A product type's brands, and every product type ---------- */

.ss .rp-list__head {
  flex-wrap: wrap;
  gap: 10px 16px;
}

.ss .rp-sort {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 4px;
  border-radius: 999px;
  background: var(--ss-well-2);
}

.ss .rp-sort a,
.ss .rp-sort__on {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.ss .rp-sort__on {
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-weight: 700;
}

.ss .rp-n {
  margin-right: 8px;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ss .rp-list__note {
  margin-top: 12px;
}

.ss .rp-kind + .rp-kind {
  margin-top: 18px;
}

.ss .rp-kind__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 8px;
  font-size: var(--ss-t3);
}

.ss .rp-kind__n {
  color: var(--ss-muted);
  font-size: var(--ss-t1);
  font-weight: 500;
}

.ss .rp-kind .hr-name-hits {
  margin: 0;
}

.ss .rp-way .hr-pill,
.ss .rp-kinds .hr-pill {
  height: auto;
  min-height: 34px;
  padding: 6px 14px;
  white-space: normal;
}

.ss .rp-way .hr-pill .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ---------- Phones: nothing narrower than a thumb ---------- */

@media (max-width: 640px), (pointer: coarse) {
  .ss .rp-pager .hr-pill,
  .ss .rp-pager__step,
  .ss .rp-sort a,
  .ss .rp-sort__on,
  .ss .rp-way .hr-pill,
  .ss .rp-kinds .hr-pill,
  .ss .rp-report__out,
  .ss .rp-behind .hk-counted__btn {
    min-height: 44px;
  }

  .ss .rp-pager .hr-pill {
    min-width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  .ss .rp-who > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .ss .rp-report {
    padding: 14px 14px 12px;
  }

  .ss .rp-glance__part {
    padding: 14px;
  }

  .ss .rp-sort {
    margin-left: 0;
  }
}

/* A kind's list of recalls: its way into the kind's reports, between the list's summary and the list. */
.ss .rp-way {
  margin: 14px 0 18px;
}

/* Every product type, as the makes are: a chip each with its count, a long name wrapping inside its chip. */
.ss .rp-chips .hr-chip {
  height: auto;
  min-height: 36px;
  padding: 6px 6px 6px 14px;
  line-height: 1.3;
  white-space: normal;
}

.ss .rp-chips .hr-chip b {
  flex: none;
}

/* A product type's brands: rows without a mark, the number at the end; found as you type where there are many. */
.ss .rp-brands .hit {
  grid-template-columns: minmax(0, 1fr) auto;
}

.ss .rp-find {
  flex: 1 1 14rem;
  max-width: 22rem;
}

@media (max-width: 640px), (pointer: coarse) {
  .ss .rp-chips .hr-chip {
    min-height: 44px;
  }
}

/* ==========================================================================
   The reports for a normal reader (Oct 28, 2026): the search first, rows over tiles, a word with every icon, the way
   back named, nothing on hover alone, and words big enough to read: 17px to read, 15px the smallest.
   ========================================================================== */

/* ---------- The way back, and a list page's head ---------- */

.ss .rp-back {
  margin: 0 0 10px;
}

.ss .rp-back__a {
  min-height: 44px;
  padding: 0 18px 0 14px;
  font-size: 1rem;
  font-weight: 600;
  white-space: normal;
  text-align: left;
}

.ss .rp-back__a .icon {
  flex: none;
}

.ss .rp-head .lead,
.ss .rp-lead {
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.ss .rp-lead__note {
  font-weight: 600;
}

.ss .rp-cpsc-line {
  max-width: 44rem;
  margin: 8px 0 0;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  line-height: 1.45;
}

/* ---------- The search: one large labelled field, its button, words to try ---------- */

.ss .rp-search {
  margin: 0;
}

.ss .rp-search__label {
  display: block;
  margin: 0;
  color: var(--ss-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.ss .rp-search__hint {
  margin: 4px 0 0;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
}

.ss .rp-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.ss .rp-search__field {
  position: relative;
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  min-width: 0;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--ss-well);
  box-shadow: inset 0 0 0 2px #6b717a;
}

.ss .rp-search__field:focus-within {
  box-shadow: inset 0 0 0 3px var(--ss-ink);
}

.ss .rp-search__field .icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  color: var(--ss-muted);
}

.ss .rp-search__field input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ss-ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
}

.ss .rp-search__field input::placeholder {
  color: #6b717a;
  opacity: 1;
}

.ss .rp-search__go {
  height: 56px;
  min-height: 56px;
  padding: 0 6px 0 22px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.ss .rp-search__go .ss-knob {
  width: 36px;
  height: 36px;
}

.ss .rp-search__go--quiet {
  padding: 0 22px;
  background: var(--ss-well-2);
}

.ss .rp-search--in {
  margin: 4px 0 14px;
}

.ss .rp-search--in .rp-search__label {
  font-size: 1.0625rem;
}

.ss .rp-search--in .rp-search__field,
.ss .rp-search--in .rp-search__go {
  min-height: 48px;
  height: 48px;
}

.ss .rp-search--in .rp-search__field input {
  height: 44px;
}

.ss .rp-search__try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}

.ss .rp-search__try-lead {
  margin-right: 4px;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  font-weight: 600;
}

.ss .rp-try {
  height: auto;
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--ss-t2);
  font-weight: 600;
  white-space: normal;
}

/* ---------- Rows: a name and its lines, the number at the end, a slim bar under ---------- */

.ss .rp-rows {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ss .rp-row {
  min-width: 0;
  scroll-margin-top: 90px;
}

.ss .rp-row__a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "text n go" "bar bar bar";
  align-items: center;
  gap: 4px 12px;
  min-height: 56px;
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  background: var(--ss-well);
  color: var(--ss-ink);
  text-decoration: none;
  transition: background-color 180ms var(--ss-out), transform 140ms var(--ss-spring);
}

.ss .rp-row__a:has(.rp-row__icon) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "icon text n go" "bar bar bar bar";
}

@media (hover: hover) {
  .ss .rp-row__a:hover {
    background: var(--ss-well-2);
  }
}

.ss .rp-row__a:active {
  transform: scale(0.99);
}

.ss .rp-row__a:focus-visible {
  outline: 3px solid var(--ss-ink);
  outline-offset: 2px;
}

.ss .rp-row__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ss-plate);
  color: var(--hk-c-ink, var(--ss-signal-ink));
}

.ss .rp-row__icon .icon {
  width: 22px;
  height: 22px;
}

.ss .rp-row__text {
  grid-area: text;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ss .rp-row__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ss .rp-row__line {
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ss .rp-cpsc {
  font-size: var(--ss-t2);
}

.ss .rp-row__n {
  grid-area: n;
  display: grid;
  justify-items: end;
  text-align: right;
}

.ss .rp-row__n b {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.ss .rp-row__n span {
  color: var(--ss-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.ss .rp-row__go {
  grid-area: go;
  display: grid;
  place-items: center;
  color: var(--ss-muted);
}

.ss .rp-row__go .icon {
  width: 18px;
  height: 18px;
}

.ss .rp-row__bar {
  grid-area: bar;
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ss-plate);
  overflow: hidden;
}

.ss .rp-row__bar > span {
  display: block;
  width: calc(var(--v) * 100%);
  min-width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--hk-c-ink, var(--ss-signal-ink));
}

.ss .rp-row.is-quiet .rp-row__n b {
  color: var(--ss-muted);
}

.ss .rp-list .ss-plate-head {
  margin-bottom: 2px;
}

.ss .rp-list__note {
  margin: 4px 0 0;
  font-size: var(--ss-t2);
}

/* "Show all" and "Show more": buttons in words, and the rest of the list under them. */

.ss .rp-more {
  margin-top: 12px;
}

.ss .rp-more__btn {
  height: auto;
  min-height: 48px;
  padding: 8px 18px;
  background: var(--ss-well-2);
  font-size: var(--ss-t2);
  font-weight: 600;
  white-space: normal;
  text-align: left;
  list-style: none;
}

.ss .rp-more__btn::-webkit-details-marker {
  display: none;
}

.ss .rp-more[open] .rp-more__btn .icon {
  transform: rotate(180deg);
}

.ss .rp-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 14px 0 0;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
}

.ss .rp-step__more {
  min-height: 48px;
  padding: 0 18px;
  background: var(--ss-well-2);
  font-size: var(--ss-t2);
  font-weight: 700;
}

.ss .rp-found,
.ss .rp-none {
  margin: 4px 0 6px;
  font-size: var(--ss-t2);
}

.ss .rp-mended {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 44rem;
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--ss-plate);
  font-size: 1rem;
}

.ss .rp-mended .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ss-muted);
}

.ss .rp-tips {
  margin: 10px 0 16px;
  padding-left: 1.2em;
  font-size: 1rem;
  line-height: 1.6;
}

.ss .rp-about,
.ss .rp-ready {
  max-width: 44rem;
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}

.ss .rp-about__n {
  margin-top: 8px;
  font-size: var(--ss-t2);
}

/* The sort, as two words in a seat: each a full target. */
.ss .rp-sort a,
.ss .rp-sort__on {
  min-height: 40px;
  font-size: var(--ss-t2);
}

/* ---------- A group's page: the figures as rows, CPSC's words in sight, Watch the plain next step ---------- */

.ss .rp-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr));
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.ss .rp-fig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ss-well);
}

.ss .rp-fig__v {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ss .rp-fig__l {
  color: var(--ss-muted);
  font-size: var(--ss-t2);
}

.ss .rp-who dt {
  font-size: var(--ss-t2);
}

.ss .rp-who dd {
  font-size: 1rem;
}

.ss .rp-who__also {
  display: block;
  margin-top: 2px;
  font-size: var(--ss-t2);
}

.ss .rp-spell {
  margin-top: 6px;
}

.ss .rp-spellings {
  margin: 0;
  color: var(--ss-muted);
  font-size: var(--ss-t2);
  overflow-wrap: anywhere;
}

.ss .rp-sev__cpsc {
  grid-column: 1 / -1;
  color: var(--ss-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}

.ss .rp-glance__note,
.ss .rp-chart__words,
.ss .rp-chart__axis {
  font-size: var(--ss-t2);
}

.ss .rp-notrecall {
  font-weight: 600;
}

/* Watch: the page's one primary pill, graphite with its orange knob; once on, a white pill with its ring. */
.ss .rp .rc-actions .watch-btn {
  height: auto;
  min-height: 48px;
  padding: 6px 20px 6px 8px;
  background: var(--ss-pill);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.ss .rp .rc-actions .watch-btn .watch-btn__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ss-signal);
  color: var(--ss-on-signal);
}

.ss .rp .rc-actions .watch-btn[aria-pressed="true"] {
  background: var(--ss-plate);
  color: var(--ss-ink);
  box-shadow: inset 0 0 0 2px var(--ss-ink);
}

.ss .rp .rc-actions .watch-btn[aria-pressed="true"] .watch-btn__icon {
  background: var(--ss-ink);
  color: #ffffff;
}

@media (hover: hover) {
  .ss .rp .rc-actions .watch-btn:not([aria-pressed="true"]):hover {
    background: color-mix(in srgb, var(--ss-pill) 86%, var(--ss-plate));
  }
}

.ss .rp .rc-pill {
  min-height: 44px;
}

.ss .rp-watch-why {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 8px;
  order: 1;
  margin: 0 0 4px;
  color: var(--ss-ink);
  font-size: var(--ss-t2);
}

/* Watch, then what it does, then the other pills. */
.ss .rp .rc-actions > :not(.watch-btn):not(.rp-watch-why) {
  order: 2;
}

/* The column's links and the copy button, each a full target. */
.ss .rp .rc-side__list a,
.ss .rp .rc-side__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ss .rp .copy {
  min-width: 44px;
  min-height: 44px;
}

.ss .rp-watch-why .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ss-muted);
}

/* The contents of a group's page wrap onto lines, never scrolling sideways out of sight. */
@media (max-width: 1100px) {
  .ss .rp .rc-side .toc ul {
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
  }

  .ss .rp .rc-side .toc a {
    height: auto;
    min-height: 44px;
    background: var(--ss-plate);
    font-size: var(--ss-t2);
  }

  .ss .rp .rc-side .toc__ind {
    display: none;
  }
}

/* A report: its words big enough to read. */
.ss .rp-report__text {
  font-size: 1.0625rem;
}

.ss .rp-report__dates,
.ss .rp-report__product,
.ss .rp-report__foot,
.ss .rp-d dt,
.ss .rp-d dd,
.ss .rp-pill,
.ss .rp-company__who,
.ss .rp-pager__at {
  font-size: var(--ss-t2);
}

.ss .rp-company__text,
.ss .rp-disclaimer {
  font-size: 1rem;
}

.ss .rp-report__out {
  min-height: 44px;
}

/* ---------- Phones: 320 to 430 wide, nothing clipped, every target a thumb's ---------- */

@media (max-width: 560px) {
  .ss .rp-search__label {
    font-size: 1.125rem;
  }

  .ss .rp-search__row {
    flex-direction: column;
  }

  .ss .rp-search__field {
    flex-basis: auto;
  }

  .ss .rp-search__go {
    justify-content: space-between;
    width: 100%;
  }

  .ss .rp-row__a {
    gap: 4px 10px;
    padding: 12px 10px 12px 14px;
  }

  /* On a phone the name has the whole line; the number and its words sit under it, then the bar. */
  .ss .rp-row__a,
  .ss .rp-row__a:has(.rp-row__icon) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text go" "n go" "bar bar";
  }

  .ss .rp-row__icon {
    display: none;
  }

  .ss .rp-row__n {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0 6px;
    margin-top: 2px;
    text-align: left;
  }

  .ss .rp-row__n b {
    font-size: 1.0625rem;
  }

  .ss .rp-row__n span {
    font-size: var(--ss-t2);
  }

  .ss .rp-step__more,
  .ss .rp-more__btn {
    width: 100%;
    justify-content: space-between;
  }

  .ss .rp .rc-actions .watch-btn {
    width: 100%;
  }
}

@media (max-width: 640px), (pointer: coarse) {
  .ss .rp-sort a,
  .ss .rp-sort__on,
  .ss .rp-try,
  .ss .rp-back__a,
  .ss .rp-about-plate .hk-counted__btn,
  .ss .rp-list .hk-counted__btn {
    min-height: 44px;
  }
}

/*
 * Soft Studio: one system across the site (Oct 23, 2026). The home page's parts on every page: a page about a
 * place, a person's care or a thing takes its pillar's colour as its accent (look.css: --hk-c, --hk-c-ink and
 * --hk-c-tint, from the page's data-pillar), with the pillar's small drawing at its head; every other page keeps the
 * greys, with the orange for its one primary action. Laid over every other sheet, so it comes last.
 */

/* ---------- Type: the home page's modest scale ---------- */

:root {
  --ss-t5: 2.5rem;
}

@media (max-width: 640px) {
  :root {
    --ss-t5: 2rem;
  }

  .ss .pg-total__n {
    font-size: var(--ss-t5);
  }
}

.ss .page-head h1,
.ss .rh__title,
.ss .lost h1,
.ss .fd-title {
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

/* ---------- A page's small drawing, at its head ---------- */

.hk-head-art {
  float: right;
  display: grid;
  place-items: end center;
  width: 224px;
  height: 84px;
  margin: 2px 0 14px 28px;
  padding: 6px 10px 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--hk-c-tint);
}

.hk-head-art .hk-art-svg {
  width: 100%;
  max-width: 260px;
  height: 78px;
}

/* A record's head opens with its drawing; it keeps below the corner's "How to read a record". */
.rh > .hk-head-art {
  margin-top: 30px;
}

/* A list's head holds its title and its actions in one row; the drawing sits beside the row, never over it. */
.fd-head > .hk-head-art {
  margin-top: 8px;
}

@media (max-width: 960px) {
  .hk-head-art,
  .rh > .hk-head-art,
  .fd-head > .hk-head-art {
    float: none;
    width: auto;
    height: 64px;
    margin: 12px 0 14px;
    padding: 4px 8px 0;
    border-radius: 14px;
  }

  .hk-head-art .hk-art-svg {
    height: 58px;
  }

  .rh > .hk-head-art {
    margin-top: 4px;
  }
}

/* ---------- What a count covers: behind a button, as on the home page's cards ---------- */

.hk-counted {
  margin-top: 16px;
}

.hk-counted__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px 0 16px;
  border-radius: 999px;
  background: var(--ss-plate);
  color: var(--ss-ink);
  font-size: var(--ss-t1);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: background-color 180ms var(--ss-out);
}

.hk-counted__btn::-webkit-details-marker {
  display: none;
}

.hk-counted__btn .icon {
  width: 16px;
  height: 16px;
  color: var(--ss-muted);
  transition: transform 260ms var(--ss-spring);
}

.hk-counted[open] .hk-counted__btn .icon {
  transform: rotate(180deg);
}

.hk-counted__btn:focus-visible {
  outline: 2px solid var(--ss-ink);
  outline-offset: 2px;
}

.ss .hk-counted > .hr-counted {
  max-width: 760px;
  margin-top: 10px;
}

@media (hover: hover) {
  .hk-counted__btn:hover {
    background: var(--hk-c-tint);
  }
}

@media (pointer: coarse) {
  .hk-counted__btn {
    min-height: 44px;
  }
}

/* ---------- The tray: Places, People and Things, as on the home page ---------- */

.ss-nav-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 2px;
  color: var(--ss-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ss-nav-title::before {
  content: "";
  width: 12px;
  height: 4px;
  flex: none;
  border-radius: 2px;
  background: var(--hk-places);
}

.ss-nav-title[data-pillar=people]::before {
  background: var(--hk-people);
}

.ss-nav-title[data-pillar=things]::before {
  background: var(--ss-signal);
}

.ss-nav-link[aria-current][data-pillar=places] .icon {
  color: var(--hk-places-ink);
}

.ss-nav-link[aria-current][data-pillar=people] .icon {
  color: var(--hk-people-ink);
}

.ss-nav-link[aria-current][data-pillar=things] .icon {
  color: var(--ss-signal-ink);
}

@media (hover: hover) {
  .ss-nav-link[data-pillar=places]:not([aria-current]):hover {
    background: color-mix(in srgb, var(--hk-places-tint) 80%, transparent);
  }

  .ss-nav-link[data-pillar=people]:not([aria-current]):hover {
    background: color-mix(in srgb, var(--hk-people-tint) 80%, transparent);
  }

  .ss-nav-link[data-pillar=things]:not([aria-current]):hover {
    background: color-mix(in srgb, var(--ss-signal-tint) 80%, transparent);
  }
}

/* ---------- A pillar's pages: its colour on their marks, and under the pointer ---------- */

/* A part about one pillar on a page of another (People's kinds among the places) keeps its own colour. */
.ss [data-pillar=places] {
  --hk-c: var(--hk-places);
  --hk-c-ink: var(--hk-places-ink);
  --hk-c-tint: var(--hk-places-tint);
}

.ss [data-pillar=people] {
  --hk-c: var(--hk-people);
  --hk-c-ink: var(--hk-people-ink);
  --hk-c-tint: var(--hk-people-tint);
}

.ss [data-pillar=things] {
  --hk-c: var(--ss-signal);
  --hk-c-ink: var(--ss-signal-ink);
  --hk-c-tint: var(--ss-signal-tint);
}

.ss .pg-kind[data-pillar] .pg-kind__icon,
:root[data-pillar] .ss .pg-kindlink[data-pillar] .pg-kindlink__icon {
  background: var(--hk-c-tint);
  color: var(--hk-c-ink);
}

@media (hover: hover) {
  .ss a.pg-kind[data-pillar]:hover {
    background: color-mix(in srgb, var(--hk-c) 28%, var(--ss-seat));
  }
}

/* The marks beside a place's or a thing's name take the pillar's wash and ink, as the home page's kinds do. */
:root[data-pillar] .ss .fd-row__icon,
:root[data-pillar] .ss .hr-card__ico,
:root[data-pillar] .ss .pg-row__icon,
:root[data-pillar] .ss .pg-kind__icon,
:root[data-pillar] .ss .hit__icon,
:root[data-pillar] .ss .pg-kindlink__icon,
:root[data-pillar] .ss .crumbs__kind,
:root[data-pillar] .ss .door__icon {
  background: var(--hk-c-tint);
  color: var(--hk-c-ink);
}

:root[data-pillar] .ss .fd-row__icon .icon,
:root[data-pillar] .ss .hr-card__ico .icon,
:root[data-pillar] .ss .pg-row__icon .icon,
:root[data-pillar] .ss .pg-kind__icon .icon,
:root[data-pillar] .ss .hit__icon .icon,
:root[data-pillar] .ss .crumbs__kind .icon {
  color: var(--hk-c-ink);
}

/* A plate that is a link (a state, a city, a record's card) washes its seat in the pillar's colour under the pointer. */
@media (hover: hover) {
  :root[data-pillar] .ss .rcard:has(a:hover) {
    border-color: color-mix(in srgb, var(--hk-c) 28%, var(--ss-seat));
    background-color: var(--ss-plate);
  }

  :root[data-pillar] .ss a.hr-card:hover {
    background: color-mix(in srgb, var(--hk-c) 28%, var(--ss-seat));
  }

  /* The line under a card's name is grey at rest; on the washed seat by day the grey falls below AA, so it takes the ink. */
  :root[data-pillar] .ss a.hr-card:hover .hr-card__where {
    color: var(--ss-ink);
  }

  :root[data-pillar] .ss .hr-pill:hover,
  :root[data-pillar] .ss .hr-chip:hover {
    background: var(--hk-c-tint);
  }
}

/* The search on a pillar's page: its field in a well, its focus ring the pillar's ink. */
:root[data-pillar] .ss .hr-find .field:focus-within {
  outline-color: var(--hk-c-ink);
}

/* A record whose title is a sentence or two (CPSC's, FDA's) sets it smaller still, so the short answer shows soon. */
.ss .rc-head .rh__title:has(.rh__long) {
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.15;
}

/* ---------- A kind's states, and the recall lists: one plate of tiles, as the home page's cards hold their kinds ---------- */

.ss .hr-states {
  margin-top: 0;
  padding: 20px 22px 22px;
  border: var(--ss-bezel) solid var(--ss-seat);
  border-radius: 30px;
  background: var(--ss-plate);
}

.ss .hr-states .hr-section-head {
  margin: 0 2px 14px;
}

.ss .hr-states .hr-state-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: 6px;
}

.ss .hr-states .hr-state {
  padding: 0;
  border-radius: 16px;
  background: var(--ss-well);
}

.ss .hr-states .hr-state .ss-core {
  gap: 3px;
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: transparent;
}

.ss .hr-states .hr-state__name {
  font-size: 0.9375rem;
  transition: color 180ms var(--ss-out);
}

.ss .hr-states .hr-state__n b {
  font-size: 1.0625rem;
  font-weight: 800;
}

.ss .hr-states .hr-card__ico {
  margin-bottom: 6px;
}

.ss .hr-states .th-list__line {
  font-size: 0.75rem;
}

.ss .hr-states .hr-state.is-later {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ss-well-2);
}

.ss .hr-states .hr-state:focus-visible {
  outline-offset: 2px;
  border-radius: 16px;
}

@media (hover: hover) {
  .ss .hr-states a.hr-state:hover {
    background: var(--hk-c-tint);
  }

  .ss .hr-states a.hr-state:hover .hr-state__name {
    color: var(--hk-c-ink);
  }

  .ss .hr-states div.hr-state.is-later:hover {
    background: transparent;
  }
}

@media (max-width: 640px) {
  .ss .hr-states {
    padding: 16px 14px 14px;
    border-radius: 26px;
  }

  .ss .hr-states .hr-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss .hr-states .hr-state .ss-core {
    padding: 11px 12px 12px;
  }
}

/* A record's contents: the part you're reading is marked in the pillar's wash. */
:root[data-pillar] .ss .rc-side .toc__ind {
  background: var(--hk-c-tint);
}

/* The places hub: a kind's coverage and source, in full on its own page behind "What the count covers", is two lines
   on its card, so the cards stay compact; the rest of its words are still there for a screen reader. */
.ss .pg-kind__src {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Side by side: the mark on the figure that leads takes the pillar's ink, the tick the plate's. */
:root[data-pillar] .ss .fd-cmp__lead {
  background: var(--hk-c-ink);
  color: var(--ss-plate);
}