/*
  Stoa's stylesheet. One system, written down in docs/BRAND.md.

  Colors and fonts are custom properties from /api/brand.css (generated from brand/brand.json and a
  club's look), so a club that changes its colors gets the whole system in its colors. Everything
  else uses the tokens below. test/styles.test.js fails on raw font sizes, spacing, radii or shadows
  outside this :root block, so the system can't drift again.

  The rules that matter more than any value:
  - Hairlines, not boxes. Lists sit on the page, separated by 1px rules. At most two raised
    objects per screen (the next gathering, the composer, a sheet).
  - No capitals outside the wordmark, no middle dots. Labels differ by weight, not case or color.
  - Egyptian blue is the one color that acts, and marks where you are. Cinnabar is kept for
    destructive actions.
  - Ochre is for stars only and never carries text.
*/

@font-face {
  font-family: 'Tenor Sans';
  src: url('/fonts/tenor-sans.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Marcellus';
  src: url('/fonts/marcellus.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==== Tokens ===================================================================================== */

:root {
  --tab-bar: 4.25rem; /* the phone tab bar, which pages leave room for */
  color-scheme: light dark;

  /* Colors: fallbacks only. /api/brand.css sets the real values. */
  --color-background: #f7f8fa;
  --color-surface: #ffffff;
  --color-ink: #111a2e;
  --color-ink-soft: #4b5468;
  --color-line: #dce0e7;
  --color-primary: #24429b;
  --color-primary-deep: #1a3180;
  --color-on-primary: #fff;
  --color-accent: #b8321f;
  --color-highlight: #b9831b;
  --color-success: #2f6b50;
  --color-danger: #a3201a;
  --color-brand: var(--color-primary);
  --color-on-brand: var(--color-on-primary);
  --font-display: 'Literata', Georgia, serif;
  --font-body: 'Literata', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-mark: 'Literata', Georgia, serif;
  --size-base: 17px;
  --radius: 12px;

  /* Derived colors. */
  --rule: color-mix(in oklab, var(--color-line) 70%, var(--color-background));
  --raised: color-mix(in oklab, var(--color-surface) 60%, white);
  --wash: color-mix(in oklab, var(--color-primary) 6%, var(--color-background));
  --hover: color-mix(in srgb, var(--color-ink) 5%, transparent);
  --panel: var(--color-brand);
  --on-panel: var(--color-on-brand);
  --frieze: var(--color-primary);

  /* Type: eight roles. Sizes follow the viewport between a phone and a laptop. */
  --t-display: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  --t-title: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);
  --t-section: clamp(1.375rem, 1.27rem + 0.45vw, 1.625rem);
  --t-item: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --t-read: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --t-ui: 0.9375rem;
  --t-meta: 0.8125rem;
  --t-label: 0.875rem;
  --lh-display: 1.07;
  --lh-title: 1.14;
  --lh-section: 1.24;
  --lh-item: 1.3;
  --lh-read: 1.6;
  --lh-ui: 1.35;
  --track-tight: -0.02em;
  --track-snug: -0.01em;
  --track-none: 0em;

  /* Space: nine steps and nothing else. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Widths. */
  --w-read: 40rem;
  --w-form: 35rem;
  --w-page: 70rem;

  /* Shape: controls, cards and sheets, covers. */
  --r-control: calc(var(--radius) / 2);
  --r-card: var(--radius);
  --r-cover: 2px;

  /* Elevation: none at rest. One float for things above the page, one for covers. */
  --float:
    0 1px 2px color-mix(in srgb, var(--color-primary-deep) 10%, transparent),
    0 18px 40px -16px color-mix(in srgb, var(--color-primary-deep) 32%, transparent);
  --cover-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, transparent),
    0 6px 14px -6px color-mix(in srgb, var(--color-ink) 35%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);

  /* Motion: color changes are quick, things that move are a little slower. */
  --quick: 120ms;
  --move: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Ornaments: off by default. A club can turn on dentils or a meander. */
  --ornament-dentils: repeating-linear-gradient(90deg, currentColor 0 9px, transparent 9px 16px);
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.75' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='m13 13 4.5 4.5' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
  --ornament-meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h10V3H4v5h3V6' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3Cpath d='M12 1h12M12 11h12M14 11V3h6v5h-3V6' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --ornament: var(--ornament-dentils);
}

@media (prefers-color-scheme: dark) {
  :root {
    --raised: color-mix(in oklab, var(--color-surface) 92%, white);
    --rule: color-mix(in oklab, var(--color-line) 85%, var(--color-background));
    --wash: color-mix(in oklab, var(--color-brand) 16%, var(--color-background));
    --hover: color-mix(in srgb, white 6%, transparent);
    --panel: color-mix(in oklab, var(--color-brand) 88%, black);
    --on-panel: #f3f2ec;
    --float: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 24px 48px -16px rgb(0 0 0 / 0.7);
    --cover-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 18px -8px rgb(0 0 0 / 0.7);
  }
}

/* ==== Base ======================================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-ink);
  font: 400 var(--t-read) / var(--lh-read) var(--font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition:
    color var(--quick) ease,
    text-decoration-color var(--quick) ease;
}

a:hover {
  color: var(--color-primary-deep);
  text-decoration-color: currentColor;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--color-ink);
}

h1 {
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-weight: 400;
  letter-spacing: var(--track-tight);
}

h2 {
  font-size: var(--t-section);
  line-height: var(--lh-section);
  font-weight: 500;
  letter-spacing: var(--track-snug);
}

h3 {
  font-size: var(--t-item);
  line-height: var(--lh-item);
  font-weight: 500;
  letter-spacing: var(--track-snug);
}

p {
  margin: 0 0 var(--s4);
}

p:last-child {
  margin-bottom: 0;
}

img {
  max-width: 100%;
}

blockquote {
  margin: 0;
  font-style: italic;
  color: var(--color-ink);
}

cite {
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
  font-style: normal;
  color: var(--color-ink-soft);
}

cite::before {
  content: '— ';
}

blockquote cite {
  display: block;
  margin-top: var(--s1);
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: var(--s4);
  top: var(--s4);
  z-index: 50;
  padding: var(--s2) var(--s4);
  background: var(--raised);
  border-radius: var(--r-control);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

a,
button,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

/* ==== Type helpers ================================================================================ */

/* A label above a heading, in sentence case. The weight does the work, not capitals or color. */
.eyebrow {
  margin: 0 0 var(--s2);
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
  letter-spacing: var(--track-none);
  color: var(--color-ink-soft);
}

.lede {
  max-width: var(--w-read);
  font-size: var(--t-item);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.muted {
  color: var(--color-ink-soft);
}

.small {
  font-size: var(--t-meta);
}

.count {
  margin-left: var(--s2);
  font: 500 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.error {
  color: var(--color-danger);
}

.grow {
  flex: 1;
}

/* ==== Frame: header, page, footer ================================================================ */

.site-header,
main,
.site-footer {
  width: min(var(--w-page), 100% - var(--s6) * 2);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--s8);
}

.cornice {
  border-top: 1px solid var(--rule);
}

.ornament {
  display: block;
  height: 6px;
  color: var(--color-primary);
  background: var(--ornament);
  opacity: 0.45;
}

/* The lockup: the mark and the wordmark, the only capitals in Stoa. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--color-ink);
  text-decoration: none;
}

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

.brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.brand span {
  font: 600 var(--t-item) / 1 var(--font-mark);
  font-optical-sizing: auto;
  letter-spacing: var(--track-tight);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  font: 500 var(--t-ui) / 1 var(--font-ui);
}

.site-nav > a {
  position: relative;
  padding: var(--s3) 0;
  color: var(--color-ink-soft);
  text-decoration: none;
}

.site-nav > a:hover {
  color: var(--color-ink);
}

.site-nav > a[aria-current='page'] {
  color: var(--color-ink);
}

/* The page you're on: a short blue rule under its name. */
.site-nav > a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--s1) * -1);
  height: 2px;
  background: var(--frieze);
}

.nav-me {
  display: inline-flex;
}

.me-menu {
  position: relative;
}

.me-menu > summary {
  list-style: none;
  cursor: pointer;
  border-radius: 50%;
  transition: box-shadow var(--quick) ease;
}

.me-menu > summary::-webkit-details-marker {
  display: none;
}

.me-menu > summary:hover,
.me-menu[open] > summary {
  box-shadow: 0 0 0 3px var(--rule);
}

.me-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s3));
  z-index: 30;
  min-width: 15rem;
  max-width: min(18rem, 100vw - var(--s6));
  padding: var(--s1);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--float);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  animation: rise var(--move) var(--ease);
}

.me-menu-name {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding: var(--s3);
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
}

.me-menu-name strong {
  font-weight: 600;
}

.me-menu-name .muted {
  font-size: var(--t-meta);
}

.me-menu-panel ul {
  list-style: none;
  margin: 0;
  padding: var(--s1) 0 0;
}

.me-menu-panel li > a,
.me-menu-panel li > .link-button {
  display: block;
  width: 100%;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
  color: var(--color-ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
}

.me-menu-panel li > a:hover,
.me-menu-panel li > a[aria-current='page'],
.me-menu-panel li > .link-button:hover {
  background: var(--hover);
  color: var(--color-ink);
}

.me-menu-panel li:last-child {
  margin-top: var(--s1);
  padding-top: var(--s1);
  border-top: 1px solid var(--rule);
}

main {
  flex: 1;
  padding-bottom: var(--s7);
}

main:focus {
  outline: none;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding: var(--s5) 0 var(--s6);
  border-top: 1px solid var(--rule);
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
}

.site-footer p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin: 0;
}

.site-footer a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-ink);
}

/* ==== The Stoa panel ==============================================================================
   The recurring cartouche: a flat field of Egyptian blue, with the club's
   name set large. It heads the porch, the club's door, and the site. */

.panel,
.porch-head.beam {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--s5) 0 var(--s6);
  padding: var(--s7) var(--s6) var(--s6);
  background: var(--panel);
  color: var(--on-panel);
  border-radius: var(--r-card);
}

.panel-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
  margin: var(--s5) 0 0;
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
  opacity: 0.85;
}

.panel-facts em {
  font: italic 400 var(--t-ui) / var(--lh-ui) var(--font-body);
}

/* Light through the colonnade: soft bands across the panel, as if the sun came in between columns.
   app.js tilts them with the time of day (--sun-angle), and they fade out after dark (--sun). */
.panel::before,
.porch-head.beam::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30% -10%;
  pointer-events: none;
  background: repeating-linear-gradient(
    var(--sun-angle, 106deg),
    transparent 0 6rem,
    color-mix(in srgb, var(--on-panel) 6%, transparent) 6.25rem 10rem,
    transparent 10.25rem 15rem
  );
  opacity: var(--sun, 1);
  -webkit-mask: linear-gradient(180deg, #000, rgb(0 0 0 / 0.35));
  mask: linear-gradient(180deg, #000, rgb(0 0 0 / 0.35));
}

/* The stylobate: one plaster line where the columns would stand. */
.panel::after,
.porch-head.beam::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: var(--s6);
  right: var(--s6);
  bottom: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--on-panel) 22%, transparent);
}

.porch-head.beam h1,
.panel h1 {
  max-width: 18ch;
  color: inherit;
  font-size: var(--t-display);
  line-height: var(--lh-display);
}

.porch-head.beam .lede,
.panel .lede {
  margin: var(--s3) 0 0;
  color: inherit;
  opacity: 0.85;
  font-style: italic;
}

.porch-head.beam .ornament {
  display: none;
}

/* ==== Page heads ================================================================================== */

.porch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s5);
  padding: var(--s7) 0 var(--s5);
}

.porch-head .actions {
  margin: 0;
}

.porch-head h1 {
  font-size: var(--t-title);
}

.narrow {
  max-width: var(--w-form);
  padding: var(--s7) 0;
}

.narrow > h1 {
  margin-bottom: var(--s3);
}

.narrow > .lede {
  margin-bottom: var(--s5);
}

.narrow > .card,
.narrow > form.card {
  margin-top: var(--s5);
}

/* ==== Surfaces ==================================================================================== */

/* A card is a quiet sheet of marble. No shadow at rest: the hairline is enough. */
.card {
  padding: var(--s5);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

.card h2 {
  margin: 0 0 var(--s3);
  font-size: var(--t-item);
}

.card > p:last-child {
  margin-bottom: 0;
}

/* A gathering's Venn poll, on the plaster in the club's own look (src/venn-brand.js). Venn sets
   its height as it grows; until then it has room for a few dates. */
.venn-poll {
  margin: 0 0 var(--s5);
}
.venn-poll h2 {
  margin: 0 0 var(--s1);
  font-size: var(--t-section);
}
.venn-poll > p {
  margin: 0 0 var(--s3);
}
.venn-frame {
  display: block;
  /* Venn pads its page; this lines its cards up with the text above. */
  width: calc(100% + 2 * var(--s4));
  margin-inline: calc(-1 * var(--s4));
  height: 40rem;
  border: 0;
  color-scheme: normal;
}
.poll-progress p {
  margin: 0 0 var(--s2);
}

/* Sections on the page are bands, not boxes: a heading, then content on the plaster. */
.shelf-section,
.thread,
.reviews,
.band {
  margin: var(--s7) 0 0;
}

.shelf-section > h2,
.thread > h2,
.reviews-head h2,
.band > h2 {
  display: flex;
  align-items: baseline;
  margin: 0 0 var(--s4);
}

.thread > h2 + .muted {
  margin: calc(var(--s3) * -1) 0 var(--s4);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

/* Empty states: a line of plain text on a soft wash, with what to do next. */
.empty,
.card.empty,
p.empty {
  padding: var(--s5);
  background: var(--wash);
  border: 0;
  border-radius: var(--r-card);
  color: var(--color-ink-soft);
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
}

.card.empty h2 {
  color: var(--color-ink);
}

/* ==== Controls ==================================================================================== */

.field {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

label,
legend,
.label {
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink);
}

input,
textarea,
select {
  width: 100%;
  padding: var(--s3);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-ink) 20%, var(--color-line));
  border-radius: var(--r-control);
  transition:
    border-color var(--quick) ease,
    box-shadow var(--quick) ease;
}

textarea {
  font: 400 var(--t-read) / 1.5 var(--font-body);
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-ink-soft);
  opacity: 0.8;
}

input:hover,
textarea:hover,
select:hover {
  border-color: color-mix(in srgb, var(--color-ink) 35%, var(--color-line));
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}

input[readonly] {
  background: var(--wash);
  color: var(--color-ink-soft);
}

input[type='checkbox'],
input[type='radio'] {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
  box-shadow: none;
}

input[type='color'] {
  width: var(--s7);
  height: 2.5rem;
  padding: var(--s1);
}

input[type='range'] {
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--color-primary);
}

input[type='range']:focus {
  box-shadow: none;
}

input[type='datetime-local'],
input[type='date'],
input[type='time'] {
  min-height: 2.75rem;
}

input[type='file'] {
  padding: var(--s2);
  border-style: dashed;
  color: var(--color-ink-soft);
  font-size: var(--t-meta);
}

input[type='file']::file-selector-button {
  margin-right: var(--s3);
  padding: var(--s2) var(--s3);
  font: 600 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-ink);
  background: var(--raised);
  border: 1px solid var(--color-line);
  border-radius: var(--r-control);
  cursor: pointer;
}

select {
  appearance: none;
  padding-right: var(--s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%237a8090' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
  background-size: 12px;
}

fieldset {
  min-width: 0;
  margin: 0 0 var(--s4);
  padding: var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

legend {
  padding: 0 var(--s1);
}

.hint {
  margin: 0;
  font: 400 var(--t-meta) / 1.45 var(--font-ui);
  color: var(--color-ink-soft);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s2) 0 var(--s4);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.row {
  display: flex;
  gap: var(--s2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.form-status {
  margin: var(--s3) 0 0;
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-success);
}

.form-status:empty {
  margin: 0;
}

.form-status.error {
  color: var(--color-danger);
}

/* Buttons: one flat blue, one quiet outline, one danger, one link. No gradients, no glow. */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s3) var(--s4);
  font: 600 var(--t-ui) / 1 var(--font-ui);
  color: var(--color-on-brand);
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--r-control);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--quick) ease,
    border-color var(--quick) ease,
    color var(--quick) ease,
    transform var(--quick) ease;
}

button:hover,
.button:hover {
  color: var(--color-on-brand);
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  text-decoration: none;
}

button:active:not(:disabled),
.button:active {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.55;
  cursor: progress;
}

button.secondary,
.button.secondary {
  color: var(--color-ink);
  background: transparent;
  border-color: color-mix(in srgb, var(--color-ink) 22%, var(--color-line));
}

button.secondary:hover,
.button.secondary:hover {
  color: var(--color-ink);
  background: var(--hover);
  border-color: color-mix(in srgb, var(--color-ink) 40%, var(--color-line));
}

button.danger {
  color: var(--color-danger);
  background: transparent;
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-line));
}

button.danger:hover {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 7%, transparent);
  border-color: var(--color-danger);
}

button.small,
.button.small {
  min-height: 2.25rem;
  padding: var(--s2) var(--s3);
  font-size: var(--t-meta);
}

.link-button,
button.link-button {
  display: inline;
  min-height: 0;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
}

.link-button:hover,
button.link-button:hover {
  color: var(--color-primary-deep);
  background: none;
}

.actions .link-button,
form .link-button {
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.link-button.danger-link {
  color: var(--color-danger);
}

button.icon {
  min-width: 2.75rem;
  padding: var(--s2);
  color: var(--color-ink-soft);
  background: transparent;
  border-color: var(--rule);
}

button.icon:hover:not(:disabled) {
  color: var(--color-ink);
  background: var(--hover);
  border-color: var(--color-line);
}

/* A segmented choice: square-cornered, the chosen one filled. Used for RSVPs and post kinds. */
.segmented,
.rsvp {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: var(--s4) 0;
  padding: 3px;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
}

.segmented button,
.rsvp button,
.rsvp button.secondary {
  min-height: 2.5rem;
  padding: var(--s2) var(--s4);
  font-weight: 500;
  color: var(--color-ink-soft);
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-control) - 2px);
}

.segmented button:hover,
.rsvp button:hover {
  color: var(--color-ink);
  background: var(--hover);
}

.segmented button[aria-pressed='true'],
.rsvp button[aria-pressed='true'],
.rsvp button.chosen {
  color: var(--color-ink);
  background: var(--raised);
  box-shadow:
    0 0 0 1px var(--rule),
    0 1px 2px color-mix(in srgb, var(--color-ink) 10%, transparent);
}

.rsvp button[aria-pressed='true']::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
}

/* Star rating input: five 44px targets, halves by tapping the left of a star. */
.star-input {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
}

.star-input .star-buttons {
  display: inline-flex;
}

.star-input button {
  position: relative;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: var(--color-line);
  background: none;
  border: 0;
  font: 400 1.75rem / 1 var(--font-ui);
}

.star-input button:hover {
  background: none;
}

.star-input button .star-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-highlight);
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
}

.star-input output {
  min-width: 6rem;
  font: 500 var(--t-ui) / 1 var(--font-ui);
  color: var(--color-ink-soft);
}

/* ==== People ====================================================================================== */

.avatar {
  --size: 56px;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  object-fit: cover;
}

img.avatar {
  width: auto;
}

.avatar-initials {
  display: inline-grid;
  place-items: center;
  font: 600 calc(var(--size) * 0.36) / 1 var(--font-ui);
  color: var(--color-primary-deep);
  background: color-mix(in oklab, var(--color-primary) 14%, var(--color-surface));
}

.avatar-initials[data-pigment='0'] {
  --pigment: var(--color-primary);
}
.avatar-initials[data-pigment='1'] {
  --pigment: var(--color-accent);
}
.avatar-initials[data-pigment='2'] {
  --pigment: var(--color-highlight);
}
.avatar-initials[data-pigment='3'] {
  --pigment: var(--color-success);
}

.avatar-initials[data-pigment] {
  color: color-mix(in oklab, var(--pigment) 75%, var(--color-ink));
  background: color-mix(in oklab, var(--pigment) 14%, var(--color-surface));
}

/* Role and status tags: small, tinted, never outlined. */
.badge {
  display: inline-block;
  margin-left: var(--s2);
  padding: 3px var(--s2);
  font: 600 var(--t-meta) / 1.2 var(--font-ui);
  color: var(--color-primary-deep);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
  border-radius: var(--r-control);
  vertical-align: middle;
}

.badge.new {
  color: var(--color-success);
  background: color-mix(in oklab, var(--color-success) 12%, var(--color-surface));
}

.badge.cancelled {
  color: var(--color-danger);
  background: color-mix(in oklab, var(--color-danger) 10%, var(--color-surface));
}

.members {
  margin: 0;
}

.member-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.member {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  color: var(--color-ink);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}

.member-list > li:first-child .member {
  border-top: 0;
}

.member:hover {
  color: var(--color-ink);
}

.member:hover strong {
  color: var(--color-primary);
}

.member > span:not(.avatar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  min-width: 0;
}

.member .badge {
  margin: 0;
}

.member strong {
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
  transition: color var(--quick) ease;
}

.member .muted {
  flex-basis: 100%;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s7) 0 var(--s5);
}

.profile-head h1 {
  margin: 0;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s2) var(--s5);
  margin: var(--s5) 0;
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
}

.facts dt {
  font-weight: 600;
  color: var(--color-ink);
}

.facts dd {
  margin: 0;
  color: var(--color-ink-soft);
}

.tags,
.word-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li,
.word-list li {
  padding: var(--s1) var(--s2);
  font: 500 var(--t-meta) / 1.4 var(--font-ui);
  background: var(--wash);
  border-radius: var(--r-control);
}

.word-list.avoid li {
  color: var(--color-ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--color-danger);
}

.photo-field {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

/* ==== Books ======================================================================================= */

.cover {
  display: block;
  flex: none;
  object-fit: cover;
  background: var(--color-line);
  border-radius: var(--r-cover);
  box-shadow: var(--cover-shadow);
}

.cover-S {
  width: 40px;
  height: 60px;
}

.cover-M {
  width: 72px;
  height: 108px;
}

.cover-L {
  width: 160px;
  height: 240px;
}

/* A book without a cover gets a bound cloth: one of four pigments, the title in a band across the
   top third, the author under it. The same title always gets the same cloth. */
.cover-blank {
  --cloth: var(--color-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
  color: #f4f1e8;
  text-align: left;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.18) 0 5%, rgb(255 255 255 / 0.07) 5% 6%, transparent 6%),
    linear-gradient(to bottom, transparent 0 78%, rgb(0 0 0 / 0.08) 78% 79%, transparent 79%),
    color-mix(in oklab, var(--cloth) 90%, black);
}

.cover-blank[data-tone='1'] {
  --cloth: color-mix(in oklab, var(--color-primary) 60%, #0c1530);
}
.cover-blank[data-tone='2'] {
  --cloth: color-mix(in oklab, var(--color-accent) 75%, #2a0a06);
}
.cover-blank[data-tone='3'] {
  --cloth: color-mix(in oklab, var(--color-success) 85%, #06140e);
}

.cover-title {
  display: block;
  margin: 14cqi 10cqi 0 12cqi;
  font: 500 clamp(0.5rem, 12cqi, 1.75rem) / 1.12 var(--font-display);
  letter-spacing: var(--track-snug);
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: balance;
}

.cover-author {
  display: block;
  margin: 5cqi 10cqi 0 12cqi;
  font: 500 clamp(0.375rem, 7.5cqi, 0.75rem) / 1.25 var(--font-ui);
  opacity: 0.78;
}

.cover-S.cover-blank > span {
  display: none;
}

/* The real cover art sits over the cloth and fades in once it has loaded. */
.cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.cover-blank.has-art .cover-art {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cover-art {
    transition: none;
  }
}

.book-list,
.mini-books,
.gathering-list,
.search-results {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A book in a list: the cover, then title in the reading face and the author in the interface face. */
.book {
  display: flex;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}

.book-list > .book:first-child {
  border-top: 0;
  padding-top: 0;
}

.book-body {
  display: grid;
  align-content: start;
  gap: var(--s1);
  min-width: 0;
}

.book h3 {
  font-size: var(--t-item);
}

.book h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.book h3 a:hover {
  color: var(--color-primary);
}

.book .muted,
.mini-books .muted {
  margin: 0;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.book blockquote {
  margin-top: var(--s2);
  max-width: var(--w-read);
  font-size: var(--t-ui);
  line-height: 1.5;
}

.book .check {
  margin: var(--s2) 0 0;
}

.mini-books a {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  color: var(--color-ink);
  text-decoration: none;
}

.mini-books a:hover strong {
  color: var(--color-primary);
}

.mini-books span {
  display: grid;
  gap: var(--s1);
}

.mini-books strong {
  font: 500 var(--t-item) / var(--lh-item) var(--font-display);
  letter-spacing: var(--track-snug);
}

.mini-books li + li {
  margin-top: var(--s4);
}

.result {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s2);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}

.result:hover {
  color: var(--color-ink);
  background: var(--hover);
}

.result span {
  display: grid;
}

.result strong {
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-display);
}

.picked {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.picked h1,
.picked h2 {
  margin: 0;
}

.picked p {
  margin: 0;
}

.manual {
  margin-top: var(--s5);
}

/* The Painted Wall: every book the club has read, hung on a rail. */
.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--s6) var(--s5);
  list-style: none;
  margin: 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--color-ink);
}

.wall .cover {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

.wall a {
  display: grid;
  gap: var(--s2);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--move) var(--ease);
}

.wall a:hover {
  transform: translateY(-3px);
}

/* Every book on the wall also links out to its page on Amazon, under the cover. */
.wall li {
  display: grid;
  align-content: start;
  gap: var(--s1);
}

.wall a.wall-amazon {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  justify-self: start;
  min-height: 2.75rem;
  font: 500 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-underline-offset: 0.2em;
}

.wall a.wall-amazon:hover {
  transform: none;
  text-decoration-color: currentColor;
}

.wall-amazon .out {
  font-size: 0.9em;
}

.wall-note {
  margin-top: var(--s4);
}

/* Search the shelf: one quiet field under the page title, filtering as you type. */
.shelf-find {
  margin: 0 0 var(--s6);
}

.shelf-find-field {
  position: relative;
  display: block;
  max-width: var(--w-form);
}

.shelf-find-field::before {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--s3);
  width: 1.15em;
  height: 1.15em;
  translate: 0 -50%;
  background: var(--color-ink-soft);
  -webkit-mask: var(--icon-search) center / contain no-repeat;
  mask: var(--icon-search) center / contain no-repeat;
  pointer-events: none;
}

.shelf-find input {
  padding-left: calc(var(--s3) + 1.15em + var(--s2));
  font-size: max(16px, 1rem);
  min-height: 2.75rem;
}

.shelf-find-status:empty {
  display: none;
}

.shelf-find-status {
  margin: var(--s2) 0 0;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.wall-rating {
  display: flex;
  align-items: center;
  min-height: var(--t-item);
  gap: var(--s1);
  font: 500 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-ink-soft);
}

/* Stars: five glyphs filled to the rating, in yellow ochre. Ochre never carries text. */
.stars {
  --fill: 0%;
  display: inline-block;
  font-size: var(--t-item);
  line-height: 1;
  letter-spacing: 0.06em;
  color: transparent;
  background: linear-gradient(90deg, var(--color-highlight) var(--fill), var(--color-line) var(--fill));
  -webkit-background-clip: text;
  background-clip: text;
}

.stars-small {
  font-size: var(--t-meta);
}

@media (forced-colors: active) {
  .stars {
    color: CanvasText;
    background: none;
  }
}

/* ==== Votes and rankings ========================================================================== */

.ranking {
  display: grid;
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  counter-reset: rank;
}

.ranking li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}

ol.ranking li::before {
  counter-increment: rank;
  content: counter(rank);
  width: var(--s5);
  font: 400 var(--t-item) / 1 var(--font-display);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.ranking-preview {
  border-style: dashed;
}

.ranked-book {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.unranked {
  margin-top: var(--s5);
}

.results {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.results li {
  display: grid;
  gap: var(--s1);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.bar {
  display: block;
  width: var(--w);
  min-width: 4px;
  height: 6px;
  background: var(--color-primary);
  border-radius: var(--r-cover);
}

.winner {
  padding: var(--s5);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

.club-ranking {
  margin-top: var(--s6);
}

/* A vote in progress: a band of wash with the question and one action. */
.vote-callout,
.start-vote {
  margin: var(--s5) 0;
}

.vote-callout {
  background: var(--wash);
  border-color: transparent;
}

/* ==== Gatherings ================================================================================== */

/* The date stone: a small calendar leaf. Month on blue, the day large, the weekday under it. */
.stone {
  display: inline-grid;
  justify-items: center;
  align-content: start;
  flex: none;
  width: 4.5rem;
  overflow: hidden;
  padding-bottom: var(--s2);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  font-family: var(--font-ui);
  text-align: center;
}

.stone span {
  font: 500 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-ink-soft);
}

.stone span:first-child {
  justify-self: stretch;
  padding: var(--s1) 0;
  margin-bottom: var(--s1);
  font-weight: 600;
  color: var(--color-on-brand);
  background: var(--color-brand);
}

.stone strong {
  margin: 0 0 var(--s1);
  font: 400 2rem / 1.1 var(--font-display);
  letter-spacing: var(--track-tight);
  color: var(--color-ink);
}

.stone.pending span:first-child {
  color: var(--color-ink-soft);
  background: var(--rule);
}

.stone.pending strong {
  color: var(--color-ink-soft);
}

.stone.cancelled {
  opacity: 0.55;
}

/* The next gathering: the one raised object on the porch. */
.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding: var(--s5);
}

.feature-body {
  display: grid;
  gap: var(--s1);
  min-width: 0;
}

.feature .eyebrow {
  margin-bottom: var(--s1);
}

.feature h2 {
  font-size: var(--t-section);
}

.feature h2 a {
  color: var(--color-ink);
  text-decoration: none;
}

.feature h2 a:hover {
  color: var(--color-primary);
}

.feature p {
  margin: 0;
}

.when {
  margin: 0;
  font: 500 var(--t-ui) / 1.45 var(--font-ui);
  color: var(--color-ink);
}

.feature .muted {
  font: 400 var(--t-ui) / 1.45 var(--font-ui);
}

.going {
  font: 400 var(--t-meta) / 1.45 var(--font-ui);
  color: var(--color-ink-soft);
}

.feature .button {
  justify-self: start;
  margin-top: var(--s4);
}

.attendee-stack {
  display: inline-flex;
  align-items: center;
  margin-right: var(--s2);
  vertical-align: middle;
}

.attendee-stack .avatar {
  width: 24px;
  height: 24px;
  --size: 24px;
  margin-left: calc(var(--s2) * -0.75);
  box-shadow: 0 0 0 2px var(--raised);
}

.attendee-stack .avatar:first-child {
  margin-left: 0;
}

.gathering-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) 0;
  color: var(--color-ink);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}

.gathering-list > li:first-child .gathering-row {
  border-top: 0;
}

.gathering-row:hover {
  color: var(--color-ink);
}

.gathering-row:hover strong {
  color: var(--color-primary);
}

.gathering-row > span:not(.stone) {
  display: grid;
  gap: var(--s1);
  min-width: 0;
}

.gathering-row strong {
  font: 500 var(--t-item) / var(--lh-item) var(--font-display);
  letter-spacing: var(--track-snug);
  transition: color var(--quick) ease;
}

.gathering-row .muted {
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.gathering-row .stone {
  width: 3.5rem;
}

.gathering-row .stone strong {
  font-size: var(--t-item);
}

.gathering-row .stone span:last-child {
  display: none;
}

.gathering-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  padding: var(--s7) 0 var(--s5);
}

.gathering-head h1 {
  margin: 0;
}

.gathering-head .lede {
  margin: var(--s2) 0 0;
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
}

.gathering .picked {
  padding: var(--s4) 0;
  border-block: 1px solid var(--rule);
  color: var(--color-ink);
  text-decoration: none;
}

.gathering .picked h2 {
  font-size: var(--t-item);
}

.gathering .picked:hover h2 {
  color: var(--color-primary);
}

.gathering > .card {
  margin: var(--s5) 0;
}

.when.big {
  font: 400 var(--t-item) / var(--lh-item) var(--font-display);
}

.attendees {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
}

.attendees h3 {
  margin-bottom: var(--s2);
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
}

.attendees ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.attendees li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.questions {
  margin: 0;
  padding-left: var(--s5);
}

.questions li {
  margin-bottom: var(--s2);
}

.recap {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--wash);
  border-radius: var(--r-card);
}

.recap p {
  white-space: pre-wrap;
}

/* A cancelled gathering keeps its page, quieter, with its title struck through. */
.gathering.is-cancelled .gathering-head h1 {
  color: var(--color-ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.gathering.is-cancelled .stone {
  opacity: 0.55;
}

.gathering-actions {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.edit-area:empty {
  display: none;
}

.edit-gathering {
  margin-top: var(--s6);
  scroll-margin-top: var(--s6);
}

.edit-gathering .row {
  align-items: flex-start;
}

.edit-gathering .row > .field {
  flex: 1;
  min-width: 0;
}

.export-line {
  grid-column: 2;
  margin-top: var(--s4);
}

.remove-member p {
  margin-top: 0;
}

.book-link {
  color: var(--color-ink);
  text-decoration: none;
}

.mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
}

.times {
  display: grid;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  padding-left: var(--s5);
}

.times li {
  display: flex;
  gap: var(--s2);
}

/* A month on one page: the almanac. */
.almanac {
  margin-top: var(--s6);
}

.almanac-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.almanac-head h2 {
  font-size: var(--t-item);
}

.almanac-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  font: 400 var(--t-meta) / 1.3 var(--font-ui);
}

.almanac-grid > * {
  min-height: 5.5rem;
  padding: var(--s2);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.almanac-grid .dow {
  min-height: 0;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.almanac-grid .out {
  color: color-mix(in srgb, var(--color-ink-soft) 50%, transparent);
}

.almanac-grid .today .day {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-on-brand);
  background: var(--color-brand);
  border-radius: 50%;
}

.almanac-grid a {
  display: block;
  margin-top: var(--s1);
  padding: var(--s1) var(--s2);
  font-weight: 500;
  color: var(--color-primary-deep);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
  border-radius: var(--r-control);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==== Talk ======================================================================================== */

.review-list,
.posts,
.replies {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.review,
.post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}

.posts > .post:first-child,
.review-list > .review:first-child {
  border-top: 0;
  padding-top: 0;
}

.post-main {
  min-width: 0;
}

.review-head,
.post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
  margin: 0 0 var(--s1);
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
}

.review-head strong,
.post-head strong {
  font: 600 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink);
}

.post-head .badge {
  margin: 0;
}

.review-body,
.post-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.spoiler {
  font-style: italic;
}

.quote-text {
  margin: var(--s2) 0 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--color-line);
  font-size: var(--t-item);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Pinned posts and announcements: a wash and a blue rule, not another box. */
.post.pinned,
.post-announcement {
  margin: 0 calc(var(--s4) * -1);
  padding: var(--s4);
  background: var(--wash);
  border-top-color: transparent;
  border-radius: var(--r-card);
}

.post.pinned + .post,
.post-announcement + .post {
  border-top-color: transparent;
}

.posts > .post.pinned:first-child,
.posts > .post-announcement:first-child {
  padding-top: var(--s4);
}

.replies {
  margin-top: var(--s3);
  padding-left: var(--s4);
  border-left: 1px solid var(--rule);
}

.replies .post {
  padding: var(--s2) 0;
  border-top: 0;
}

.post-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s4);
  margin-top: var(--s2);
  font: 500 var(--t-meta) / 1 var(--font-ui);
}

.post-tools .link-button,
.post-tools a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--color-ink-soft);
  text-decoration: none;
}

.post-tools .link-button:hover,
.post-tools a:hover {
  color: var(--color-ink);
}

.reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
}

.reaction,
.react-pick summary,
.react-pick button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 var(--s2);
  font: 500 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  cursor: pointer;
}

.reaction:hover,
.react-pick summary:hover,
.react-pick button:hover {
  color: var(--color-ink);
  background: var(--hover);
  border-color: var(--color-line);
}

.reaction.mine {
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
  border-color: color-mix(in oklab, var(--color-primary) 35%, var(--color-line));
}

.react-pick {
  position: relative;
}

.react-pick summary {
  list-style: none;
  color: var(--color-ink-soft);
}

.react-pick summary::-webkit-details-marker {
  display: none;
}

.react-pick[open] > div {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--s1));
  left: 0;
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--float);
  animation: rise var(--move) var(--ease);
}

.react-pick[open] > div button {
  border-color: transparent;
  font-size: var(--t-item);
}

/* The composer: the one place you write, raised while you're in it. */
.composer {
  margin-top: var(--s5);
  padding: var(--s2) var(--s4) var(--s4);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  transition:
    border-color var(--quick) ease,
    box-shadow var(--quick) ease;
}

.composer:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--rule));
  box-shadow: var(--float);
}

.composer > .field:first-child {
  margin: 0;
}

.composer > .field:first-child label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.composer textarea,
.composer textarea:focus,
.composer textarea:hover {
  min-height: 4.5rem;
  padding: var(--s2) 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

.composer-row .field {
  margin: 0;
}

.composer-row .segmented {
  margin: 0 auto 0 0;
}

.composer-row .page-field {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.composer-row .page-field input {
  width: 6rem;
  padding: var(--s2);
}

.reply-form,
.edit-form {
  margin-top: var(--s3);
}

.reply-form textarea,
.edit-form textarea {
  min-height: 0;
}

.reply-form button[type='submit'] {
  margin-top: var(--s2);
}

/* ==== The porch =================================================================================== */

.porch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--s6) var(--s7);
  align-items: start;
}

.porch-main {
  min-width: 0;
}

.porch-main > .thread {
  margin-top: var(--s7);
}

/* The side column is a run of short, labeled bands separated by hairlines. */
.porch-aside {
  display: grid;
  gap: 0;
}

.porch-aside > section {
  padding: var(--s5) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}

.porch-aside > section:first-child {
  padding-top: 0;
  border-top: 0;
}

.porch-aside > section > h2 {
  display: flex;
  align-items: baseline;
  margin: 0 0 var(--s3);
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
  letter-spacing: var(--track-none);
  color: var(--color-ink);
}

.porch-aside .vote-callout,
.porch-aside > section.vote-callout:first-child {
  padding: var(--s4);
  margin: 0 0 var(--s4);
  background: var(--wash);
  border: 0;
  border-radius: var(--r-card);
}

.porch-aside .vote-callout + section {
  border-top: 0;
  padding-top: 0;
}

.porch-aside .vote-callout p {
  margin: 0 0 var(--s3);
  font: 400 var(--t-item) / var(--lh-item) var(--font-display);
}

.porch-aside .invite p {
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
  color: var(--color-ink-soft);
}

.invite-line {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0 var(--s2);
}

.invite-line code {
  flex: 1;
  min-width: 0;
  padding: var(--s2) var(--s3);
  overflow: hidden;
  font: 500 var(--t-meta) / 1.6 var(--font-ui);
  color: var(--color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--wash);
  border-radius: var(--r-control);
}

.invite .link-button {
  font: 500 var(--t-meta) / 1.6 var(--font-ui);
}

.invite-status {
  display: block;
  margin-top: var(--s1);
  font: 500 var(--t-meta) / 1.4 var(--font-ui);
  color: var(--color-success);
}

.welcome-note {
  margin-bottom: var(--s5);
  padding: var(--s5);
  background: var(--wash);
  border-radius: var(--r-card);
}

.welcome-note h2 {
  margin-bottom: var(--s2);
  font-size: var(--t-item);
}

.welcome-note p {
  white-space: pre-wrap;
}

.welcome-note > a {
  font: 500 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

/* An organizer's nudge to write one: a line on the plaster, not a box. */
.welcome-note.empty {
  padding: 0 0 var(--s4);
  background: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
}

/* ==== A book ====================================================================================== */

.book-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s6);
  align-items: end;
  padding: var(--s7) 0 var(--s6);
  border-bottom: 1px solid var(--rule);
}

.book-hero-text h1 {
  margin: 0 0 var(--s2);
  font-size: var(--t-display);
  line-height: var(--lh-display);
}

.book-hero .lede {
  margin: 0 0 var(--s4);
  font: 500 var(--t-ui) / 1.4 var(--font-ui);
  color: var(--color-ink-soft);
}

.book-hero blockquote {
  max-width: var(--w-read);
  font-size: var(--t-item);
  line-height: 1.5;
}

.book-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: var(--s7);
  align-items: start;
}

.book-main {
  max-width: var(--w-read);
}

.book-main .description {
  margin: var(--s6) 0 0;
}

.book-aside {
  position: sticky;
  top: var(--s5);
  padding-top: var(--s6);
}

.book-aside .facts {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}

.book-aside .facts dd {
  margin-bottom: var(--s3);
}

.book-aside .actions {
  flex-direction: column;
  align-items: stretch;
  margin-top: var(--s4);
}

.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s4);
}

.reviews-head h2 {
  margin: 0;
}

.club-average {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font: 500 var(--t-ui) / 1 var(--font-ui);
}

.review-form {
  margin-bottom: var(--s5);
}

.review-form h3 {
  margin-bottom: var(--s3);
}

.amazon {
  font: 400 var(--t-meta) / 1.5 var(--font-ui);
}

/* ==== Forms that stand alone (join, set up, sign in) ============================================== */

/* The signed-out way in on a hosted Stoa or a private club: one calm column, the app's icon, a
   short welcome and the ways in. On a phone it sits on the plaster; wider, it becomes a sheet. */
/* The icon is the brand here, so the header's lockup steps aside. */
body:has(main > .auth) .site-header,
body:has(main > .auth) .cornice {
  display: none;
}

body:has(main > .auth) .site-footer {
  flex-direction: row;
  justify-content: center;
  border-top: 0;
}

.auth {
  display: grid;
  justify-items: center;
  align-content: start;
  padding: var(--s8) 0 var(--s6);
}

.auth-panel {
  width: 100%;
  max-width: 25rem;
}

.auth-head {
  margin-bottom: var(--s6);
  text-align: center;
}

.auth-mark {
  display: block;
  margin: 0 auto var(--s5);
  border-radius: var(--r-control);
  box-shadow: var(--cover-shadow);
}

.auth-head h1 {
  margin: 0;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
}

.auth-sub {
  margin: var(--s2) 0 0;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
}

.auth-switch,
.auth-note {
  max-width: 25rem;
  margin: 0;
  text-align: center;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
  text-wrap: balance;
}

.auth-switch {
  margin-top: var(--s5);
}

.auth-switch a {
  font-weight: 600;
}

.auth-note {
  margin-top: var(--s3);
  font-size: var(--t-meta);
}

/* The porch you are about to step onto: a small colonnade under the way in. */
.auth-stoa {
  width: min(100%, 15rem);
  aspect-ratio: 480 / 209;
  margin-top: var(--s7);
  background: color-mix(in srgb, var(--color-brand) 11%, transparent);
  -webkit-mask: url('/img/colonnade.svg') center / contain no-repeat;
  mask: url('/img/colonnade.svg') center / contain no-repeat;
}

@media (min-width: 640px) {
  .auth {
    padding-top: var(--s9);
  }
  .auth-panel {
    max-width: 27rem;
    padding: var(--s6);
    background: var(--raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    box-shadow: var(--float);
  }
}

/* "Already a member?" under the landing page of a self-hosted Stoa. */
.signin {
  max-width: 28rem;
  margin: 0 0 var(--s7);
}

.signin h2 {
  margin-bottom: var(--s4);
}

.signin-email button,
.signin-ways .providers .button,
.signin-password button[type='submit'],
.narrow form.card > button[type='submit'] {
  width: 100%;
}

.signin-password button[type='submit'] {
  margin-top: var(--s2);
}

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

.label-row .link-button {
  font: 500 var(--t-meta) / var(--lh-ui) var(--font-ui);
  text-decoration: none;
}

.label-row .link-button:hover {
  text-decoration: underline;
}

.signin-code,
.another-device {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.signin-ways .signin-code {
  text-align: center;
}

.signin-ways .signin-code[open] {
  text-align: start;
}

.signin-code summary {
  cursor: pointer;
  list-style: none;
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-primary);
}

.signin-code[open] summary {
  text-align: center;
}

.signin-code summary::-webkit-details-marker {
  display: none;
}

.signin-code form {
  margin-top: var(--s4);
}

.signin-code .hint {
  margin: 0 0 var(--s4);
}

.signin-code button[type='submit'] {
  width: 100%;
}

.signin-code input[name='code'] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

.login-code .code {
  margin: var(--s2) 0;
  font:
    600 var(--t-section) / 1.2 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.12em;
}

.providers {
  display: grid;
  gap: var(--s2);
}

.button.provider {
  color: var(--color-ink);
  background: var(--raised);
  border-color: color-mix(in srgb, var(--color-ink) 18%, var(--color-line));
  font-weight: 500;
}

.button.provider:hover {
  color: var(--color-ink);
  background: var(--hover);
  border-color: color-mix(in srgb, var(--color-ink) 35%, var(--color-line));
}

.provider-icon {
  display: inline-flex;
  flex: none;
}

/* "or", between two ways in. Lower case; a hairline either side. */
.or {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0;
  font: 400 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-ink-soft);
}

.or::before,
.or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--rule);
}

.club-choices {
  display: grid;
  gap: var(--s2);
  list-style: none;
  padding: 0;
}

.club-choices button {
  width: 100%;
  justify-content: flex-start;
}

.recover-links code {
  font-size: var(--t-meta);
  word-break: break-all;
}

/* ==== Settings and your account ==================================================================
   Settings are a document: titled sections separated by rules, not a stack of cards. */

.account {
  display: grid;
  gap: 0;
  margin-top: var(--s6);
}

.account > h2 {
  margin: 0 0 var(--s3);
}

.account > .card,
.settings-section {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--s2) var(--s6);
  padding: var(--s6) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}

.account > .card > h3,
.settings-section > h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font: 600 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.account > .card > *:not(h3),
.settings-section > *:not(h3) {
  grid-column: 2;
}

.account > details.card {
  display: block;
}

.account > .actions {
  margin: 0;
  padding: var(--s6) 0;
  border-top: 1px solid var(--rule);
}

.settings-page {
  max-width: 52rem;
}

.account h3 + .hint,
.account .card > p {
  margin-top: 0;
}

.pending-email {
  margin: 0 0 var(--s4);
  font: 400 var(--t-meta) / 1.4 var(--font-ui);
  color: var(--color-ink-soft);
}

.device-list,
.identity-list {
  display: grid;
  list-style: none;
  margin: 0 0 var(--s2);
  padding: 0;
}

.device-list li,
.identity-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.device-list li > span,
.identity-list li > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
}

.device-list li .muted {
  flex-basis: 100%;
  font-size: var(--t-meta);
}

.device-list .device-all {
  justify-content: flex-end;
  border-bottom: 0;
}

.email-kinds {
  display: grid;
  gap: var(--s1);
  margin: 0 0 var(--s3) var(--s5);
  padding: 0;
  border: 0;
}

.email-kinds .check {
  margin: 0;
}

.email-kinds:disabled {
  opacity: 0.5;
}

.delete-account > summary {
  cursor: pointer;
  font: 600 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-danger);
}

.delete-account[open] > summary {
  margin-bottom: var(--s3);
}

/* ==== Help ======================================================================================== */

.help {
  max-width: var(--w-read);
}

.help h2 {
  margin: var(--s6) 0 var(--s3);
  scroll-margin-top: var(--s4);
}

.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.faq {
  border-bottom: 1px solid var(--rule);
}

.faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) 0;
  cursor: pointer;
  list-style: none;
  font: 600 var(--t-ui) / 1.4 var(--font-ui);
}

.faq > summary::-webkit-details-marker {
  display: none;
}

.faq > summary::after,
.more-fields > summary::after,
details.disclosure > summary::after {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--s1);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--quick) ease;
  opacity: 0.6;
}

.faq[open] > summary::after,
.more-fields[open] > summary::after,
details.disclosure[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.faq > p {
  margin: 0 0 var(--s4);
}

/* Optional fields fold away behind one line. */
.more-fields {
  margin: var(--s1) 0 var(--s4);
  border-top: 1px solid var(--rule);
}

.more-fields > summary,
.manual > summary,
details.disclosure > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  min-height: 3rem;
  padding: var(--s3) 0 var(--s2);
  cursor: pointer;
  list-style: none;
  font: 600 var(--t-ui) / var(--lh-ui) var(--font-ui);
  color: var(--color-primary);
}

.more-fields > summary::after,
details.disclosure > summary::after {
  margin-left: auto;
}

.manual > summary::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}

.manual[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.more-fields > summary::-webkit-details-marker,
.manual > summary::-webkit-details-marker,
details.disclosure > summary::-webkit-details-marker {
  display: none;
}

.more-fields > summary .muted {
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.more-fields[open] > summary {
  margin-bottom: var(--s3);
}

/* ==== The signed-out welcome ====================================================================== */

.porch {
  padding: var(--s8) 0 var(--s4);
}

.porch h1 {
  max-width: 14ch;
  margin-bottom: var(--s4);
  font-size: var(--t-display);
  line-height: var(--lh-display);
}

.colonnade {
  margin: var(--s7) 0 0;
  border-top: 1px solid var(--color-ink);
}

.colonnade .entablature {
  display: none;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.pillars li {
  padding: var(--s5) var(--s5) var(--s5) 0;
}

.pillars li + li {
  padding-left: var(--s5);
  border-left: 1px solid var(--rule);
}

.pillars h2 {
  margin-bottom: var(--s2);
  font-size: var(--t-item);
}

.pillars p {
  margin: 0;
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
  color: var(--color-ink-soft);
}

.stylobate {
  display: none;
}

.origin {
  max-width: var(--w-read);
  margin: var(--s7) 0;
}

.origin h2 {
  margin-bottom: var(--s2);
  font-size: var(--t-item);
}

.origin p {
  color: var(--color-ink-soft);
}

/* ==== The club's look ============================================================================ */

/* The club's look editor (Settings, organizers only). Groups are set apart by a rule, not a box. */
.club-look {
  border-bottom: 1px solid var(--rule);
}

.brand-form fieldset {
  margin: var(--s5) 0 0;
  padding: var(--s4) 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}

.brand-form legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s3);
  padding: 0;
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
}

.brand-form legend + * {
  clear: both;
}

.brand-form details {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.brand-form details > summary {
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
}

.brand-form details > fieldset {
  margin-top: var(--s3);
  padding-top: 0;
  border-top: 0;
}

.brand-form details > fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.brand-form .actions {
  margin-top: var(--s5);
}

.brand-form .grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--s1) var(--s4);
}

.color-field {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.color-field label {
  font-weight: 500;
}

.color-field input[type='text'] {
  width: 6.5rem;
  padding: var(--s1) var(--s2);
  font-size: var(--t-meta);
}

/* ==== Sheets, the tab bar and the install card ==================================================== */

.tab-bar {
  display: none;
}

dialog.sheet {
  width: min(30rem, 100%);
  max-height: min(85svh, 45rem);
  margin: auto;
  padding: 0;
  color: var(--color-ink);
  background: var(--raised);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--float);
  overscroll-behavior: contain;
}

dialog.sheet::backdrop {
  background: rgb(10 14 24 / 0.45);
}

.sheet-body {
  padding: var(--s2) var(--s5) var(--s5);
}

.sheet-grip {
  display: none;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s2);
}

.sheet-head h2 {
  margin: var(--s2) 0;
}

button.sheet-close {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: var(--t-section);
  font-weight: 400;
  color: var(--color-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 50%;
}

button.sheet-close:hover {
  color: var(--color-ink);
  background: var(--hover);
}

.sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sheet-list li + li {
  border-top: 1px solid var(--rule);
}

.sheet-choice,
button.sheet-choice {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s3);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--s2) var(--s1);
  font: 400 var(--t-ui) / 1.3 var(--font-ui);
  color: var(--color-ink);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--r-control);
}

.sheet-choice:hover,
button.sheet-choice:hover,
.sheet-choice:active {
  color: var(--color-ink);
  background: var(--hover);
  text-decoration: none;
}

.sheet-choice.plain {
  min-height: 3rem;
}

.choice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 9%, var(--color-surface));
  border-radius: var(--r-control);
}

.choice-icon svg,
.tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-text {
  display: grid;
  gap: 2px;
}

.choice-text strong {
  font-weight: 600;
}

.choice-text span {
  font-size: var(--t-meta);
  color: var(--color-ink-soft);
}

.sheet-me {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s1) 0 var(--s4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}

.sheet-me p {
  display: grid;
  margin: 0;
  line-height: 1.3;
}

.invite-link {
  font-size: var(--t-ui);
  word-break: break-all;
}

.install-steps {
  padding-left: var(--s5);
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
}

.install-steps li {
  margin-bottom: var(--s2);
}

.install-card {
  margin-top: var(--s5);
}

.install-card h2 {
  font-size: var(--t-item);
}

.install-card .actions {
  margin-top: var(--s3);
}

/* ==== Notes on the Painted Wall =================================================================== */

/* A band of plaster with notes pinned to it: ideas and answers, often from members who can't come.
   Tiles are flat (not raised); each wears its author's pigment along the top edge. */
.painted-wall {
  margin: var(--s7) 0;
  padding: var(--s5) var(--s4);
  background: var(--wash);
  border-radius: var(--r-card);
}

.painted-wall > h2 {
  margin-top: 0;
}

.painted-wall > p.muted {
  margin: 0 0 var(--s4);
  max-width: var(--w-read);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.wall-invite {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  color: var(--on-panel);
  background: var(--panel);
  border-radius: var(--r-card);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.wall-invite p {
  margin: 0;
}

.wall-invite .wall-invite-title {
  margin-bottom: var(--s1);
  font: 500 var(--t-item) / var(--lh-item) var(--font-display);
}

.wall-host-note {
  margin: 0 0 var(--s4);
  padding-left: var(--s3);
  border-left: 3px solid var(--color-success);
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.notes {
  columns: 15rem auto;
  column-gap: var(--s4);
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
}

.note {
  --pigment: var(--color-primary);
  break-inside: avoid;
  display: grid;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  padding: var(--s4);
  background: var(--color-surface);
  border-top: 3px solid var(--pigment);
  border-radius: var(--r-control);
  animation: rise var(--move) var(--ease) both;
}

.note.is-away {
  --pigment: var(--color-highlight);
}

.note.is-raised {
  --pigment: var(--color-success);
}

.note p {
  margin: 0;
}

.note-prompt {
  font: italic 400 var(--t-ui) / var(--lh-ui) var(--font-display);
  color: var(--color-ink-soft);
}

.note-body {
  font: 400 var(--t-read) / 1.5 var(--font-body);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.note-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.note-by .badge {
  margin-left: 0;
}

.note-name {
  font-weight: 600;
}

.badge.away {
  color: var(--color-ink);
  background: color-mix(in oklab, var(--color-highlight) 18%, var(--color-surface));
}

.note-from {
  font-family: var(--font-ui);
}

.note-replies {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: var(--s2) 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.note-replies .link-button {
  margin-left: var(--s2);
}

.note-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.note-tools .reactions {
  margin: 0;
}

button.raise {
  min-height: 2.25rem;
  padding: var(--s1) var(--s3);
  font: 600 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-success);
  background: transparent;
  border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-line));
}

button.raise:hover {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border-color: var(--color-success);
}

button.raise.on,
button.raise.on:hover {
  color: var(--color-on-primary);
  background: var(--color-success);
  border-color: var(--color-success);
}

.raised-seal {
  font: 600 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-success);
}

.raised-seal::before,
button.raise.on::before {
  content: '\2713';
  margin-right: var(--s1);
}

.note-composer {
  padding: var(--s4);
  background: var(--color-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

.note-composer .field {
  margin-bottom: 0;
}

.note-composer textarea {
  min-height: 5.5rem;
}

.prompt-pick {
  margin-bottom: var(--s3);
}

.prompt-pick-label {
  margin: 0 0 var(--s2);
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
}

.prompt-pick [role='group'] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

button.prompt-chip {
  min-height: 2.75rem;
  max-width: 100%;
  padding: var(--s2) var(--s3);
  font: 500 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink);
  text-align: left;
  background: transparent;
  border-color: var(--color-line);
}

button.prompt-chip:hover {
  color: var(--color-ink);
  background: var(--hover);
}

button.prompt-chip[aria-pressed='true'] {
  color: var(--color-primary-deep);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
  border-color: var(--color-primary);
}

.note-composer .composer-row {
  justify-content: space-between;
}

.note-count {
  font-variant-numeric: tabular-nums;
}

.away-nudge {
  margin: var(--s3) 0 0;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.wall-notes {
  font: 500 var(--t-meta) / 1.2 var(--font-ui);
  color: var(--color-primary);
}

.place-it {
  margin: var(--s5) 0 0;
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

/* ==== Ranking: placing a book, the seal and the reveal =========================================== */

.rankings .ranking .grow {
  display: grid;
  gap: var(--s1);
  min-width: 0;
}

.rank-title {
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

button.why {
  justify-self: start;
  text-align: left;
  font: italic 400 var(--t-meta) / var(--lh-ui) var(--font-display);
  color: var(--color-ink-soft);
  text-decoration: none;
}

button.why.small {
  font: 500 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-primary);
  text-decoration: underline;
}

.rankings .ranking textarea {
  width: 100%;
  font-size: max(16px, 1rem);
}

.ranking li.just-placed {
  animation: placed 1.2s var(--ease);
}

@keyframes placed {
  from {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  }
}

.empty-rank {
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

ol.ranking li.empty-rank::before {
  content: none;
}

/* Which stayed with you more? Two covers side by side, one tap each. */
.place-box:empty {
  display: none;
}

.placer {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: var(--s5) var(--s4);
  text-align: center;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--float);
  animation: rise var(--move) var(--ease);
}

.placer p {
  margin: 0;
}

.placer-q {
  font: 500 var(--t-section) / var(--lh-section) var(--font-display);
  letter-spacing: var(--track-snug);
}

.placer-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  margin: var(--s3) 0;
}

button.placer-pick {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s2);
  height: 100%;
  padding: var(--s3);
  color: var(--color-ink);
  background: var(--color-surface);
  border-color: var(--rule);
  white-space: normal;
}

button.placer-pick:hover {
  color: var(--color-ink);
  background: var(--color-surface);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.placer-pick .cover {
  width: 7rem;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  box-shadow: var(--cover-shadow);
}

.placer-title {
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.placer-or {
  font: italic 400 var(--t-ui) / 1 var(--font-display);
  color: var(--color-ink-soft);
}

/* The seal: the club's lists, closed until an organizer reveals them. Deep blue, like the wall. */
.sealed,
.reveal {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s2);
  margin: var(--s5) 0 var(--s7);
  padding: var(--s6) var(--s4);
  text-align: center;
  color: var(--on-panel);
  background: var(--panel);
  border-radius: var(--r-card);
  box-shadow: var(--float);
}

.sealed p,
.reveal p,
.sealed h2,
.reveal h2 {
  margin: 0;
  color: inherit;
}

.sealed h2,
.reveal h2 {
  font: 500 var(--t-section) / var(--lh-section) var(--font-display);
  letter-spacing: var(--track-snug);
}

.sealed-note,
.reveal-kicker {
  max-width: 30rem;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  opacity: 0.85;
}

.seal-mark {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--s2);
  color: var(--on-panel);
  opacity: 0.9;
}

.tally-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  max-width: 20rem;
  margin: var(--s2) 0;
}

.tally-dots span {
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--on-panel) 60%, transparent);
  border-radius: 50%;
}

.tally-dots span.on {
  background: var(--on-panel);
  border-color: var(--on-panel);
}

button.on-panel-button {
  margin-top: var(--s3);
  color: var(--panel);
  background: var(--on-panel);
  border-color: var(--on-panel);
}

button.on-panel-button:hover {
  color: var(--panel);
  background: color-mix(in srgb, var(--on-panel) 88%, var(--panel));
  border-color: transparent;
}

.sealed .link-button.on-panel,
.reveal .link-button.on-panel {
  margin-top: var(--s3);
  color: var(--on-panel);
  font: 500 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.sealed .actions,
.reveal .actions {
  justify-content: center;
  margin-top: var(--s2);
}

.sealed .ranking-preview {
  width: 100%;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px dashed color-mix(in srgb, var(--on-panel) 40%, transparent);
}

.sealed .results,
.sealed .results .muted,
.sealed .results a {
  color: var(--on-panel);
  text-align: left;
}

.sealed .bar {
  background: var(--on-panel);
}

/* The podium: second, first, third. The first plinth stands tallest. */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: end;
  gap: var(--s3);
  width: 100%;
  max-width: 32rem;
  margin: var(--s5) 0 var(--s3);
  padding: 0;
  list-style: none;
}

.plinth {
  display: grid;
  justify-items: center;
  gap: var(--s1);
  min-width: 0;
}

.plinth-book .cover {
  width: 100%;
  max-width: 6rem;
  height: auto;
  aspect-ratio: 2 / 3;
  box-shadow: var(--cover-shadow);
}

.plinth-1 .plinth-book .cover {
  max-width: 8.5rem;
}

.plinth-book {
  display: grid;
  justify-items: center;
  width: 100%;
}

.plinth-place {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--s7);
  margin-top: var(--s2);
  font: 500 var(--t-title) / 1 var(--font-display);
  color: var(--panel);
  background: var(--on-panel);
  border-radius: var(--r-control) var(--r-control) 0 0;
}

.plinth-1 .plinth-place {
  min-height: var(--s9);
}

.plinth-2 .plinth-place {
  min-height: var(--s8);
}

.plinth-title {
  font: 600 var(--t-meta) / var(--lh-ui) var(--font-ui);
  overflow-wrap: anywhere;
}

.reveal .plinth .muted,
.sealed .plinth .muted {
  color: inherit;
  opacity: 0.8;
}

.reveal-why {
  display: grid;
  gap: var(--s2);
  max-width: 30rem;
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  font: italic 400 var(--t-read) / 1.5 var(--font-display);
}

.reveal-why .muted {
  color: inherit;
  opacity: 0.8;
  font-style: normal;
  font-family: var(--font-ui);
}

/* Unveiling, third to first, then the title. Only when motion is welcome (see rankings.js). */
.reveal.is-revealing .plinth {
  animation: unveil 700ms var(--ease) both;
  animation-delay: calc(var(--step) * 900ms + 200ms);
}

.reveal.is-revealing h2,
.reveal.is-revealing .reveal-why,
.reveal.is-revealing .actions {
  animation: rise 600ms var(--ease) both;
  animation-delay: 2.9s;
}

@keyframes unveil {
  from {
    opacity: 0;
    transform: translateY(var(--s6)) scale(0.96);
    filter: blur(6px);
  }
}

.reveal-confirm p {
  margin: 0 0 var(--s3);
}

/* Everyone's picks, after the reveal. Hairlines, not boxes. */
.picks {
  margin-top: var(--s7);
}

.pick-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pick {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}

.pick p {
  margin: 0;
}

.pick-who {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.pick-first {
  font: 500 var(--t-item) / var(--lh-item) var(--font-display);
}

.pick-why {
  margin: 0;
  padding-left: var(--s3);
  border-left: 3px solid var(--color-primary);
  font: italic 400 var(--t-read) / 1.5 var(--font-display);
}

.pick-all summary {
  font: 500 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-primary);
  cursor: pointer;
}

.pick-all ol {
  margin: var(--s2) 0 0;
  padding-left: var(--s5);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

@media (max-width: 480px) {
  .painted-wall {
    margin-inline: calc(var(--s4) * -1);
    border-radius: 0;
  }
  .placer-pair {
    gap: var(--s2);
  }
  .podium {
    gap: var(--s2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal.is-revealing .plinth,
  .reveal.is-revealing h2,
  .reveal.is-revealing .reveal-why,
  .reveal.is-revealing .actions {
    animation: none;
  }
}

/* ==== Motion ====================================================================================== */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(40%);
    opacity: 0.4;
  }
}

@keyframes draw-check {
  from {
    stroke-dashoffset: 24;
  }
}

.done-check {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  vertical-align: -3px;
  animation: draw-check 300ms var(--ease) both;
}

/* Toast: one line at the bottom, with Undo where it helps. */
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
  max-width: calc(100% - var(--s6));
  padding: var(--s3) var(--s4);
  color: var(--color-surface);
  background: var(--color-ink);
  border-radius: var(--r-card);
  box-shadow: var(--float);
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
  transform: translateX(-50%);
  animation: rise var(--move) var(--ease);
}

.toast button {
  min-height: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
}

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ==== Dark ======================================================================================== */

@media (prefers-color-scheme: dark) {
  .lockup-tile.on-ink {
    background: #0b0e13;
  }
  .cover-blank {
    color: #efece2;
  }
  .stone span:first-child,
  .almanac-grid .today .day {
    color: #fff;
  }
}

/* ==== Small screens =============================================================================== */

@media (max-width: 860px) {
  .porch-layout,
  .book-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .book-columns {
    gap: 0;
  }
  .book-aside {
    position: static;
    padding-top: var(--s5);
  }
  .book-aside .actions {
    flex-direction: row;
  }
  .account > .card,
  .settings-section {
    grid-template-columns: minmax(0, 1fr);
  }
  .account > .card > h3,
  .settings-section > h3,
  .account > .card > *:not(h3),
  .settings-section > *:not(h3) {
    grid-column: 1;
    grid-row: auto;
  }
  .account > .card > h3,
  .settings-section > h3 {
    margin-bottom: var(--s2);
  }
}

@media (max-width: 640px) {
  .site-header,
  main,
  .site-footer {
    width: min(var(--w-page), 100% - var(--s5) * 2);
  }
  .site-header {
    min-height: 3.5rem;
  }
  .brand img {
    width: 24px;
    height: 24px;
  }
  .site-nav {
    gap: var(--s4);
  }
  .panel,
  .porch-head.beam {
    margin: var(--s4) 0 var(--s5);
    padding: var(--s6) var(--s5) var(--s5);
  }
  .panel::after,
  .porch-head.beam::after {
    left: var(--s5);
    right: var(--s5);
    bottom: var(--s3);
  }
  .porch-head {
    padding: var(--s6) 0 var(--s4);
  }
  .narrow,
  .profile-head,
  .gathering-head {
    padding-top: var(--s6);
  }
  .card {
    padding: var(--s4);
  }
  .feature {
    gap: var(--s4);
    padding: var(--s4);
  }
  .feature .stone {
    width: 3.75rem;
  }
  .feature .stone strong {
    font-size: var(--t-section);
  }
  .feature .stone span:last-child {
    display: none;
  }
  .book-hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
    padding: var(--s6) 0 var(--s5);
  }
  .book-hero .cover-L {
    width: 96px;
    height: 144px;
  }
  .book-hero-text h1 {
    font-size: var(--t-title);
    line-height: var(--lh-title);
  }
  .site-footer {
    flex-direction: column;
  }
  .pillars li,
  .pillars li + li {
    padding: var(--s4) 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .type-scale li,
  .voice-pairs li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
  .almanac-grid > * {
    min-height: 3.5rem;
    padding: var(--s1);
  }
  .almanac-grid a {
    padding: 2px;
    font-size: 0;
    height: 6px;
  }
  /* On a phone the club's state (vote, up next, members, invite) comes before the conversation. */
  .porch-main {
    display: contents;
  }
  .porch-aside {
    order: 2;
    margin-top: var(--s5);
  }
  .porch-main > .thread {
    order: 3;
    margin-top: var(--s5);
  }
  .post.pinned,
  .post-announcement {
    margin: 0;
  }
}

@media (max-width: 360px) {
  .brand span {
    display: none;
  }
}

/* Phones: the tab bar, bottom sheets and touch-sized controls. Under 720px the header links move to
   a tab bar within reach of a thumb, with Create in the middle. */
@media (max-width: 720px) {
  .has-tabs .site-nav {
    display: none;
  }
  .has-tabs .site-header {
    justify-content: center;
    padding-top: env(safe-area-inset-top);
  }
  .has-tabs {
    padding-bottom: calc(var(--tab-bar) + env(safe-area-inset-bottom));
  }
  .has-tabs .site-footer {
    margin-top: var(--s6);
  }

  /* The tab bar is opaque: nothing ghosts through it. */
  .tab-bar {
    position: fixed;
    z-index: 20;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    padding: var(--s1) max(var(--s2), env(safe-area-inset-left)) max(var(--s1), env(safe-area-inset-bottom))
      max(var(--s2), env(safe-area-inset-right));
    background: var(--color-background);
    border-top: 1px solid var(--rule);
    font: 500 0.6875rem / 1 var(--font-ui);
  }

  .tab-bar.tab-bar-short {
    grid-template-columns: repeat(4, 1fr);
  }

  .typing .tab-bar {
    display: none;
  }

  .tab,
  button.tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    min-height: 3.25rem;
    padding: var(--s1) 0;
    font: inherit;
    color: var(--color-ink-soft);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--r-control);
  }

  .tab:hover,
  button.tab:hover {
    color: var(--color-ink);
    background: transparent;
  }

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

  /* The tab you're on gets a short blue rule at the top edge. */
  .tab[aria-current='page']::before {
    content: '';
    position: absolute;
    top: calc(var(--s1) * -1 - 1px);
    left: 30%;
    right: 30%;
    height: 2px;
    background: var(--frieze);
  }

  .tab-me[aria-current='page'] .avatar {
    box-shadow: 0 0 0 2px var(--color-ink);
  }

  .tab-create {
    color: var(--color-ink);
  }

  /* Create: a flat blue square in its slot. No glow, no float. */
  .tab-create-disc {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2rem;
    color: var(--color-on-brand);
    background: var(--color-brand);
    border-radius: var(--r-control);
  }

  .tab-create:active .tab-create-disc {
    transform: scale(0.94);
  }

  dialog.sheet {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: var(--r-card) var(--r-card) 0 0;
  }

  .sheet-body {
    padding-bottom: max(var(--s5), env(safe-area-inset-bottom));
  }

  .sheet-grip {
    display: block;
    width: 2.25rem;
    height: 4px;
    margin: var(--s2) auto 0;
    background: var(--color-line);
    border-radius: 2px;
  }

  .reaction,
  .react-pick summary,
  .react-pick button,
  .post-tools .link-button,
  .post-tools a {
    min-width: 2.75rem;
    min-height: 2.5rem;
  }

  input,
  textarea,
  select {
    font-size: max(16px, 1rem); /* under 16px, iPhones zoom into the field */
  }

  input[type='radio'],
  input[type='checkbox'] {
    width: 22px;
    height: 22px;
  }

  label.check {
    min-height: 2.75rem;
  }

  details > summary {
    min-height: 2.75rem;
  }

  .form-submit {
    position: sticky;
    z-index: 2;
    bottom: calc(var(--tab-bar) + env(safe-area-inset-bottom));
    margin: 0 calc(var(--s4) * -1);
    padding: var(--s3) var(--s4);
    background: linear-gradient(to top, var(--raised) 70%, transparent);
  }

  .typing .form-submit {
    bottom: 0;
  }

  .form-submit button,
  form.card > button[type='submit'] {
    width: 100%;
    min-height: 3rem;
  }

  .segmented,
  .rsvp {
    display: grid;
    width: 100%;
  }

  .toast {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  dialog.sheet[open] {
    animation: sheet-up var(--move) var(--ease);
  }
}

.delete-account > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  list-style: none;
}

.delete-account > summary::-webkit-details-marker {
  display: none;
}

/* ==== Home with no club yet, and joining while signed in ========================================= */

.porch-head.lobby-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.lobby-head .eyebrow {
  color: inherit;
  opacity: 0.8;
}

/* Start a club is the one raised thing; joining sits beside it on the plaster. */
.lobby {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
  margin: var(--s6) 0 var(--s5);
}

.lobby .card > .eyebrow {
  margin: 0 0 var(--s1);
}

.lobby .card > p {
  color: var(--color-ink-soft);
}

.lobby-join {
  scroll-margin-top: var(--s8);
}

.lobby-join.card {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: var(--s5) 0 0;
}

.lobby form .field:last-of-type {
  margin-bottom: var(--s4);
}

.lobby-join .hint,
.join-as .hint {
  margin: var(--s4) 0 0;
}

.lobby-meanwhile {
  margin: var(--s4) 0 var(--s7);
}

.lobby-meanwhile h2 {
  margin: 0 0 var(--s3);
  font-size: var(--t-section);
}

.lobby-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lobby-next-link {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  height: 100%;
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
  color: var(--color-ink);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
  text-decoration: none;
  transition: color var(--quick);
}

.lobby-next-link:hover,
.lobby-next-link:focus-visible {
  color: var(--color-primary);
}

.lobby-next-link strong {
  display: block;
  margin-bottom: var(--s1);
  font-weight: 600;
}

.lobby-next-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s6);
  height: var(--s6);
  color: var(--color-primary);
}

.lobby-next-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 860px) {
  .lobby {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    margin-top: var(--s5);
  }

  .lobby-next {
    grid-template-columns: minmax(0, 1fr);
  }
}

.join-as-who {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin-bottom: var(--s4);
}

.join-as-who p {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-ui);
  line-height: var(--lh-ui);
}

.join-as-who .muted {
  font-size: var(--t-meta);
}

.plinth-book,
.plinth-book:hover {
  text-decoration: none;
}
/* ==== Your books ===================================================================================
   A person's own shelf (reading.js): find a book, what's on the go, what's next in their order, and
   a log of what they've read. On a laptop the page card sits beside it. */

.your-books {
  display: grid;
  gap: var(--s6);
  align-items: start;
}

@media (min-width: 860px) {
  .your-books {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: var(--s7);
  }
  .your-books > :not(.page-card) {
    grid-column: 1;
  }
  .your-books > .page-card {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: var(--s5);
  }
}

.reading-page {
  padding-bottom: var(--s6);
}

.add-book .search-results:not(:empty) {
  margin-top: var(--s2);
}

.add-book .manual {
  margin-top: var(--s3);
}

.my-shelf-head {
  display: grid;
  gap: var(--s1);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.my-shelf-head h2 {
  font-size: var(--t-section);
}

.my-shelf-head p,
.my-shelf .empty {
  margin: 0;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.my-shelf .empty {
  padding-top: var(--s3);
}

.my-shelf .book-list {
  padding-top: var(--s4);
}

.my-book-cover {
  flex: none;
  line-height: 0;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}

.order-buttons {
  display: inline-flex;
  gap: var(--s1);
}

.order-buttons button.icon {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
}

.next-tag {
  margin: 0;
  font: 600 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-primary);
}

/* The log: a column of entries under a quiet year, each with what the reader wrote. */
.log-year + .log-year {
  margin-top: var(--s5);
}

.log-year-head {
  margin: var(--s4) 0 0;
  font: 600 var(--t-label) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
}

.log {
  list-style: none;
  margin: 0;
  padding: 0;
}

.log-entry {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}

.log-entry:last-child {
  border-bottom: 0;
}

.log-head {
  display: flex;
  gap: var(--s4);
}

.log-head h3 {
  font-size: var(--t-item);
}

.log-head h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.log-head h3 a:hover {
  color: var(--color-primary);
}

.log-head .muted,
.log-date {
  margin: 0;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.log-date {
  color: var(--color-ink-soft);
}

.log-note {
  max-width: var(--w-read);
  margin-top: var(--s3);
}

.log-note .note {
  margin: 0 0 var(--s3);
  font-size: var(--t-read);
  line-height: var(--lh-read);
  white-space: pre-line;
}

.log-note .note:last-child {
  margin-bottom: 0;
}

.log-note-short {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.log-note-short .note {
  display: inline;
  font-size: var(--t-ui);
}

.log-note-short .note + .note::before {
  content: ' ';
}

/* Who can see your books. */
.page-card h2 {
  font-size: var(--t-item);
}

.page-card .segmented {
  display: grid;
  margin: var(--s3) 0 var(--s4);
}

.page-card .actions {
  margin-top: var(--s3);
}

.prefixed {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-line);
  border-radius: var(--r-control);
  background: var(--color-surface);
}

.prefixed:focus-within {
  box-shadow: var(--ring);
  border-color: var(--color-primary);
}

.prefixed .prefix {
  display: flex;
  align-items: center;
  padding: 0 0 0 var(--s3);
  font: 400 var(--t-ui) / 1 var(--font-ui);
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.prefixed input {
  min-width: 0;
  flex: 1;
  padding-left: 1px;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.prefixed input:focus {
  outline: none;
  box-shadow: none;
}

.handle-form .hint {
  margin-top: 0;
}

/* One of your books. */
.my-book-page .picked h1 {
  font-size: var(--t-title);
  line-height: var(--lh-title);
}

.my-book-page .segmented {
  display: grid;
  margin-top: 0;
}

.read-fields[hidden] {
  display: none;
}

.quiet-actions {
  justify-content: space-between;
  margin-top: var(--s4);
}

/* Adding a club book to your own. */
.keep-book {
  margin-top: var(--s4);
}

.keep-done {
  margin: var(--s4) 0 0;
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

/* The no-club home: your books first, then the way into a club. */
.lobby-together-head {
  max-width: var(--w-read);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}

.lobby-together-head h2 {
  font-size: var(--t-section);
}

.lobby-together-head p {
  margin: var(--s2) 0 0;
}

/* A reader's page: a column to read, like a small journal. */
.reader-page {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: var(--s7) 0;
}

.private-note {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
  background: var(--wash);
  border-radius: var(--r-control);
}

.reader-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.reader-head h1 {
  font-size: var(--t-title);
  line-height: var(--lh-title);
}

.reader-head .muted {
  margin: var(--s1) 0 0;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.reader-head .lede {
  margin: var(--s3) 0;
}

.reader-page > section {
  margin-top: var(--s6);
}

.reader-page h2 {
  font-size: var(--t-section);
}

.cover-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}

.cover-row li {
  display: grid;
  gap: var(--s1);
  max-width: 9rem;
}

.cover-row strong {
  margin-top: var(--s2);
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-display);
}

.cover-row .muted {
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.reader-next .mini-books {
  margin-top: var(--s4);
}

.reader-next .mini-books li {
  display: flex;
  gap: var(--s4);
}

.reader-foot {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

@media (max-width: 640px) {
  .reader-head {
    flex-direction: column;
    gap: var(--s4);
  }
  .reader-page {
    padding-top: var(--s5);
  }
}

/* ==== Finding a book ===============================================================================
   Hand-picked shelves (discover.js): rows of covers you scroll sideways on the no-club home, lists
   with a reason per book on /discover, and a sheet for each book. Buttons here are bare: the cover
   is the thing you tap. */

button.plain {
  display: block;
  min-height: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
}

button.plain:hover {
  color: inherit;
  background: none;
}

.tick {
  color: var(--color-success);
  font-weight: 700;
}

.see-all {
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
  white-space: nowrap;
}

.pick-shelf {
  margin-top: var(--s6);
}

.pick-shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}

.pick-shelf-head h3 {
  margin: 0;
  font-size: var(--t-item);
}

.pick-shelf > .muted {
  margin: var(--s1) 0 0;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

/* A row of covers that scrolls sideways and runs to the edge of a phone screen. */
.cover-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 7.5rem;
  gap: var(--s4);
  list-style: none;
  margin: var(--s3) calc(var(--s4) * -1) 0;
  padding: var(--s2) var(--s4) var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--s4);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.cover-scroll::-webkit-scrollbar {
  display: none;
}

.cover-scroll li {
  scroll-snap-align: start;
}

.cover-card {
  display: grid;
  gap: var(--s1);
  width: 100%;
}

button.cover-card:focus-visible {
  outline: none;
}

button.cover-card:focus-visible .cover {
  box-shadow: var(--ring), var(--cover-shadow);
}

.cover-card-art {
  position: relative;
  display: block;
  margin-bottom: var(--s1);
}

.cover-card .cover {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  transition: transform var(--move) var(--ease);
}

.cover-card:hover .cover {
  transform: translateY(-3px);
}

.cover-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-display);
}

.cover-card .muted {
  overflow: hidden;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.on-list {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font: 700 0.75rem / 1 var(--font-ui);
  color: #fff;
  background: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}

@media (min-width: 721px) {
  .cover-scroll {
    grid-auto-columns: 8.5rem;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* The sheet for one book. */
.pick-sheet {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  margin-bottom: var(--s4);
}

.pick-sheet .cover {
  width: 88px;
  height: 132px;
}

.pick-prize {
  display: inline-block;
  margin: 0 0 var(--s2);
  padding: 2px var(--s2);
  font: 600 var(--t-meta) / 1.4 var(--font-ui);
  color: var(--color-highlight);
  background: color-mix(in srgb, var(--color-highlight) 12%, transparent);
  border-radius: var(--r-control);
}

.pick-facts {
  margin: 0 0 var(--s2);
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
}

.book-reason {
  margin: 0;
  padding-left: var(--s3);
  border-left: 3px solid var(--color-primary);
  font: italic 400 var(--t-read) / 1.45 var(--font-display);
}

.pick-have {
  margin: var(--s2) 0;
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.pick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

/* /discover */
.discover-head {
  padding: var(--s7) 0 var(--s4);
}

.discover-head h1 {
  margin: 0 0 var(--s3);
}

.discover-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s5);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

button.chip {
  min-height: 2.25rem;
  padding: var(--s2) var(--s3);
  font: 500 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--s5);
}

button.chip:hover {
  color: var(--color-ink);
  background: var(--hover);
  border-color: var(--rule);
}

button.chip[aria-pressed='true'] {
  color: var(--color-on-brand);
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.discover-body {
  display: grid;
  gap: var(--s7);
  margin: var(--s5) 0 var(--s6);
}

@media (min-width: 900px) {
  .discover-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s7);
  }
}

.discover-shelf {
  scroll-margin-top: var(--s7);
}

.discover-shelf h2 {
  margin: 0 0 var(--s1);
  font-size: var(--t-section);
}

.discover-shelf > .muted {
  margin: 0 0 var(--s3);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.pick-list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.pick-list-rows li {
  border-bottom: 1px solid var(--rule);
}

button.pick-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) var(--s4);
  align-items: start;
  width: 100%;
  padding: var(--s4) 0;
}

button.pick-row:hover strong {
  color: var(--color-primary);
}

.pick-row-body {
  display: grid;
  gap: 2px;
}

.pick-row-body strong {
  font: 500 var(--t-item) / var(--lh-item) var(--font-display);
}

.pick-row-body .muted {
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.pick-row-why {
  margin-top: var(--s1);
  font: 400 var(--t-ui) / 1.45 var(--font-body);
  color: var(--color-ink-soft);
}

.pick-row-have {
  grid-column: 2;
  font: 600 var(--t-meta) / 1 var(--font-ui);
  color: var(--color-success);
}

.show-more {
  margin-top: var(--s3);
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.discover-foot {
  margin: 0 0 var(--s7);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

/* The no-club home. */
.home-books {
  margin-top: var(--s5);
}

.home-start h2,
.home-discover > h2,
.club-invite h2 {
  margin: 0 0 var(--s1);
  font-size: var(--t-section);
}

.home-start > .muted,
.home-discover > .muted {
  margin: 0 0 var(--s4);
  font: 400 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

.home-import {
  margin: var(--s3) 0 0;
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
  color: var(--color-ink-soft);
}

.home-desk .my-shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}

.home-next {
  padding-top: var(--s4);
}

.home-next > .eyebrow {
  margin: 0;
}

.home-next .book-list {
  border: 0;
}

.home-next > .muted {
  margin: 0 0 var(--s2);
  font: 400 var(--t-meta) / var(--lh-ui) var(--font-ui);
}

.home-search {
  margin-top: var(--s4);
}

.club-invite {
  margin: var(--s6) 0;
}

.club-invite > p {
  margin: 0 0 var(--s4);
  color: var(--color-ink-soft);
}

.club-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

@media (max-width: 480px) {
  .club-invite-actions > * {
    flex: 1 1 100%;
  }
}

.home-discover {
  margin: var(--s7) 0 var(--s6);
}

.home-shelves-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
}

.books-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  font: 500 var(--t-ui) / var(--lh-ui) var(--font-ui);
}

/* /me/import */
.import-steps {
  margin: var(--s5) 0;
  padding-left: var(--s5);
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
}

.import-steps li + li {
  margin-top: var(--s3);
}

.file-button {
  cursor: pointer;
}

.file-button:has(+ input:focus-visible) {
  box-shadow: var(--ring);
}

.import-status {
  margin: var(--s5) 0;
}

.import-preview p {
  margin: 0 0 var(--s3);
  font: 400 var(--t-ui) / 1.5 var(--font-ui);
}

.import-preview p strong {
  font: 600 var(--t-item) / var(--lh-item) var(--font-display);
}

.import-done {
  font: 600 var(--t-item) / var(--lh-item) var(--font-ui);
}