:root {
  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-md:    14px;
  --fs-base:  15px;
  --fs-lg:    16px;
  --fs-xl:    18px;
  --fs-2xl:   20px;
  --fs-3xl:   26px;
  --fs-4xl:   36px;
  --fs-5xl:   48px;
  --fs-6xl:   88px;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  --tracking-caps:    0.05em;
  --tracking-tight:   -0.01em;
  --tracking-display: -0.02em;
}

/* Ink and dots: a near-hueless ground, white surfaces, ink UI. Colour is for
   small marks with jobs — the six hues share one oklch lightness and chroma so
   none outshouts the others:
   green steady/healthy/easy · amber push/hard/attention · blue rest/unread ·
   teal run/latest read · violet ride/new/proposals · red failure. */
:root {
  --font-ui:   "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-read: "Literata", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --green:  oklch(0.53 0.15 150);
  --amber:  oklch(0.53 0.15 70);
  --blue:   oklch(0.53 0.15 255);
  --teal:   oklch(0.53 0.15 195);
  --violet: oklch(0.53 0.15 300);
  --red:    oklch(0.53 0.15 25);
  --gray:   #bfbdbb;

  --bg: #e7e6e3;
  --bg-surface: #ffffff;
  --bg-soft: #f2f1ee;
  --bg-hover: #f1f0ed;
  --bg-active: #ecebe8;
  --bg-selected: #f6f5f3;
  --border: #d7d5d3;
  --border-subtle: #ecebe8;
  --border-accent: #1c1a18;
  --border-accent-muted: #bfbdbb;
  --border-selected: #e3e1df;
  --text: #1c1a18;
  --text-body: #3a3835;
  --text-muted: #5f5d5a;
  --text-dimmed: #8d8c89;
  --link: var(--text);
  --link-hover: var(--text-muted);
  --on-link: #ffffff;
  --flash-bg: var(--bg-surface);
  --flash-border: var(--border);
  --flash-alert-bg: var(--bg-surface);
  --flash-alert-border: var(--red);
  --nav-bg: rgba(231, 230, 227, 0.88);
  --danger: var(--red);
  --danger-hover: oklch(0.45 0.15 25);
  --danger-border: color-mix(in srgb, var(--red) 35%, #ffffff);
  --danger-bg: color-mix(in srgb, var(--red) 8%, #ffffff);
  --success: var(--green);
  --badge-active-bg: var(--bg-soft);
  --badge-active-text: var(--text);
  --badge-inactive-bg: var(--bg-soft);
  --badge-inactive-text: var(--text-muted);
  --taken: var(--green);
}

[data-theme="dark"] {
  --green:  oklch(0.74 0.14 150);
  --amber:  oklch(0.74 0.14 70);
  --blue:   oklch(0.74 0.14 255);
  --teal:   oklch(0.74 0.14 195);
  --violet: oklch(0.74 0.14 300);
  --red:    oklch(0.74 0.14 25);
  --gray:   #4f4e4b;

  --bg: #1d1c1a;
  --bg-surface: #2c2b28;
  --bg-soft: #353431;
  --bg-hover: #353431;
  --bg-active: #3b3a37;
  --bg-selected: var(--bg-active);
  --border: #42413e;
  --border-subtle: #373633;
  --border-accent: #e9e7e5;
  --border-accent-muted: #5a5956;
  --border-selected: var(--border-accent-muted);
  --text: #e9e7e5;
  --text-body: #d3d1ce;
  --text-muted: #acaaa8;
  --text-dimmed: #7b7a78;
  --on-link: #1d1c1a;
  --nav-bg: rgba(29, 28, 26, 0.88);
  --danger-hover: oklch(0.82 0.12 25);
  --danger-border: color-mix(in srgb, var(--red) 35%, #2c2b28);
  --danger-bg: color-mix(in srgb, var(--red) 12%, #2c2b28);
  scrollbar-color: #4f4e4b transparent;
  color-scheme: dark;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  line-height: 1.5;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Only the application layout opts in (meta view-transition), so visits into the
   book's chrome-free layout cut instead of fading; the nav holds still */
nav {
  view-transition-name: nav;
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Page: the shared frame for every content page */

.page {
  max-width: 800px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
}

.page--wide {
  max-width: 1312px;
}

.page--wide.home {
  max-width: 1152px;
}

.page--sheet {
  max-width: 820px;
  margin-top: 2.5rem;
  padding: 2.75rem 3.5rem 2.5rem;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
}

.page--stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
}

.page--stack > .page-header {
  margin-bottom: 0;
}

.settings-content .page-header {
  margin-bottom: 1rem;
}

.page-breadcrumb {
  margin-bottom: 0.75rem;
  font-size: var(--fs-sm);
}

.page-breadcrumb a {
  color: var(--text-muted);
}

.page-breadcrumb a:hover {
  color: var(--text);
  text-decoration: none;
}

.page-eyebrow {
  margin-bottom: 0.15rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.page-summary {
  margin-top: 0.35rem;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.page-note {
  margin-bottom: 1.5rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.page--stack .page-note {
  margin-bottom: 0;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  font-size: var(--fs-sm);
}

.page-actions .button_to {
  margin: 0;
}

/* Long-form agent writing: reflections, notes, calibration documents */

.prose {
  max-width: 68ch;
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--text-body);
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.35rem;
}

/* Shared pieces: white panels on the ground, mono labels, and the dot — the
   only place a hue shows up unless it is data. */

.panel {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
}

.panel-title {
  margin-bottom: 1rem;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.label-note {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dimmed);
}

.mono { font-family: var(--font-mono); }

.dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray);
}

.dot--green  { background: var(--green); }
.dot--amber  { background: var(--amber); }
.dot--blue   { background: var(--blue); }
.dot--teal   { background: var(--teal); }
.dot--violet { background: var(--violet); }
.dot--red    { background: var(--red); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray);
}

.status--green::before  { background: var(--green); }
.status--amber::before  { background: var(--amber); }
.status--blue::before   { background: var(--blue); }
.status--teal::before   { background: var(--teal); }
.status--violet::before { background: var(--violet); }
.status--red::before    { background: var(--red); }

button.button-quiet {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
}

button.button-quiet:hover { background: var(--bg-hover); }
button.button-quiet:disabled { opacity: 0.5; cursor: default; }

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

/* Charts: inline SVG from ChartsHelper. Ink for points, teal for the latest. */

.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-dot          { fill: var(--text); }
.chart-dot--muted   { fill: var(--gray); }
.chart-dot--faint   { fill: var(--border); }
.chart-dot.is-latest { fill: var(--teal); }

.chart-bar           { fill: var(--gray); }
.chart-bar.is-latest { fill: var(--teal); }
.chart-bar--warn     { fill: var(--amber); }

.chart-band { fill: var(--bg-soft); }

.chart-ref {
  stroke: var(--border);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.chart-ref--median {
  stroke: var(--text-dimmed);
  stroke-dasharray: 5 5;
}

.chart-ref--segment {
  stroke: var(--text);
  stroke-width: 2.5;
}

.chart-dot.is-active {
  stroke: var(--text);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart-bar.is-active { fill: var(--text); }

.chart-plot {
  position: relative;
}

.chart-tip {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
  font-family: var(--font-mono);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  visibility: hidden;
  white-space: nowrap;
}

.chart-tip.is-shown { visibility: visible; }

.chart-tip-label {
  font-size: var(--fs-micro);
  color: var(--text-dimmed);

  &:empty { display: none; }
}

.chart-tip-value {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}

.chart-frame {
  position: relative;
  padding-left: 2.75rem;
}

.chart-axis {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-dimmed);
}

.chart-dates {
  display: flex;
  justify-content: space-between;
  padding-left: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-dimmed);
}

.chart-dates--weeks {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  padding-left: 0;
  text-align: center;
}

/* Nav */

nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

nav .wordmark {
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

nav .wordmark:hover {
  color: var(--text);
  text-decoration: none;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-sections,
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-sections a,
.nav-links a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-base);
}

.nav-sections a:hover,
.nav-sections a.active,
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  text-decoration: none;
}

.nav-settings {
  display: flex;
}

/* Flash */

.flash {
  max-width: 720px;
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
}

.flash-notice {
  background: var(--flash-bg);
  border: 1px solid var(--flash-border);
  color: var(--link);
}

.flash-alert {
  background: var(--flash-alert-bg);
  border: 1px solid var(--flash-alert-border);
  color: var(--danger);
}

.music-toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100vw - 2rem);
  z-index: 1000;
}

.music-toast a {
  color: inherit;
  font-weight: 600;
}

/* Feed container */

.feed-container {
  max-width: 760px;
  margin: 2.5rem auto 4rem;
  padding: 2.75rem 3.5rem 2.25rem;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
}

.digest-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
}

.digest-title {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.digest-progress {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.digest-pip {
  width: 6px;
  height: 16px;
  border-radius: 3px;
  background: var(--blue);
  transition: background 0.3s;
}

.digest-pip--read { background: var(--border); }

.digest-left {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.feed-container .empty {
  color: var(--text-muted);
  padding: 3rem 0;
  text-align: center;
}

/* Carousel */

.otd {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.otd-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  cursor: pointer;
  user-select: none;
}

.otd-head .otd-nav {
  margin-left: auto;
}

.otd-head .collapsible-chevron {
  margin-left: 0.5rem;
}

.collapsible--collapsed .otd-nav {
  visibility: hidden;
}

.otd-head:hover:not(:has(a:hover, .otd-nav:hover)) .collapsible-chevron {
  background: var(--bg-surface);
  color: var(--text);
}

.otd-head a { color: inherit; }

.carousel-stage {
  display: grid;
}

.carousel-slide {
  display: grid;
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  color: inherit;
  text-decoration: none;
}

.carousel-slide--active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-slide:hover {
  color: inherit;
  text-decoration: none;
}

.carousel-event {
  display: grid;
  grid-template-columns: minmax(0, 46rem) minmax(17.5rem, 1fr);
  overflow: hidden;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
}

.carousel-event-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 2.25rem 1.875rem;
}

.carousel-year {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-muted);
}

.carousel-text {
  font-family: var(--font-read);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--text);
}

.carousel-text p + p {
  margin-top: 0.75rem;
}

.carousel-thumb {
  position: relative;
  background: var(--bg-soft);
}

.carousel-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-thumb--broken {
  display: none;
}

.otd-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.carousel-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text);
  font-size: var(--fs-2xl);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-arrow:hover {
  background: var(--bg-surface);
  color: var(--text);
  text-decoration: none;
}

.carousel-dot {
  padding: 0.3rem 0.65rem;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.carousel-dot:hover { background: var(--bg-surface); }

.carousel-dot--active,
.carousel-dot--active:hover {
  background: var(--text);
  color: var(--on-link);
}

.otd .nav-button {
  align-self: flex-start;
}

.collapsible-body {
  overflow: visible;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.collapsible-body--collapsed {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.collapsible-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: var(--fs-lg);
  color: var(--text-muted);
  transition: transform 0.3s ease, background 0.15s, color 0.15s;
}

.collapsible-chevron::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.collapsible--collapsed .collapsible-chevron {
  transform: rotate(-90deg);
}

.history-day-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.history-day-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.history-day-item,
.history-day-item:hover {
  color: inherit;
  text-decoration: none;
}

.nav-button,
form.nav-button button {
  display: inline-block;
  padding: 0.4rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

form.nav-button {
  display: inline;
}

.nav-button:hover,
form.nav-button button:hover {
  background: var(--bg-hover);
  color: var(--text);
  text-decoration: none;
}

form.nav-button--danger button {
  color: var(--danger);
  border-color: var(--danger-border);
}

form.nav-button--danger button:hover {
  background: var(--danger-bg);
  color: var(--danger-hover);
}

/* Date groups */

.date-group > .label {
  padding: 1.5rem 0 0.5rem;
}

/* Articles */

article.feed-item {
  position: relative;
  padding: 1.6rem 1.25rem 1.75rem;
  margin: 0 -1.25rem;
  border-top: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  scroll-margin-top: 3.5rem;
  transition: background 0.15s, opacity 0.3s;
}

article.feed-item.active {
  background: var(--bg-selected);
  border-top-color: transparent;
  box-shadow: inset 0 0 0 1px var(--border-selected);
}

article.feed-item.active + article.feed-item {
  border-top-color: transparent;
}

article.feed-item.read:not(.active) {
  opacity: 0.45;
}

.feed-item-content {
  min-width: 0;
}

.feed-item-content h3 {
  position: relative;
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0.5rem;
}

article.feed-item:not(.read) .feed-item-content h3::before,
article.feed-item.queued .feed-item-content h3::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

article.feed-item.queued .feed-item-content h3::before {
  background: var(--violet);
}

.feed-item-content h3 a {
  color: var(--text);
}

.feed-item-content h3 a:hover {
  color: var(--text-body);
}

.feed-item-meta {
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.feed-rating                    { display: none; margin-left: 0.5rem; vertical-align: 0.1em; }
.rated-up .feed-rating,
.rated-down .feed-rating        { display: inline-block; }
.rated-up .feed-rating          { background: var(--green); }

.feed-item-image {
  float: right;
  margin: 0.25rem 0 0.5rem 1.25rem;
}

.feed-item-image img {
  width: 160px;
  height: 120px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.feed-item-content .feed-item-summary {
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-body);
}

.feed-item-summary p + p {
  margin-top: 0.75rem;
}

.feed-item-summary img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-top: 0.35rem;
}

/* Agents */

.agent-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.3s;
}

.agent-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent-muted);
  color: inherit;
}

.agent-card h3 {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.agent-card-inactive {
  opacity: 0.6;
}

.agent-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-dimmed);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.agent-description {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.agent-card-meta {
  font-size: var(--fs-sm);
  color: var(--text-dimmed);
  white-space: nowrap;
}

.token-card {
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 1rem 0;
}

.token-card h3 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 0.35rem;
}

.token-card code {
  font-size: var(--fs-md);
  color: var(--text);
  word-break: break-all;
}

.section-heading {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin: 1.5rem 0 0.75rem;
}

.empty-message {
  font-size: var(--fs-md);
  color: var(--text-dimmed);
  margin-top: 1rem;
}

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

.nav-button--danger:hover {
  background: var(--danger-bg);
  color: var(--danger-hover);
}

/* Forms */

label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--fs-base);
  color: var(--text-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  margin-bottom: 0.75rem;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--border-accent);
}

button:not(nav button, .settings-nav-signout, .carousel-dot, .carousel-arrow, .album-hold, .album-file, .rotation-toggle, .story-action-btn, .button-quiet), input[type="submit"] {
  padding: 0.5rem 1.1rem;
  background: var(--text);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--on-link);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

button:not(nav button, .settings-nav-signout, .carousel-dot, .carousel-arrow, .album-hold, .album-file, .rotation-toggle, .story-action-btn, .button-quiet):hover, input[type="submit"]:hover {
  background: var(--text-body);
}

.form-actions {
  margin-top: 0.5rem;
}

.form-back {
  margin-top: 0.5rem;
  font-size: var(--fs-md);
}

.form-back a {
  color: var(--text-dimmed);
}

.form-back a:hover {
  color: var(--text-muted);
}

/* Login */

.login-container {
  max-width: 360px;
  margin: 4rem auto 0;
  padding: 0 1.5rem;
}

.login-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-form {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.login-field {
  margin-bottom: 1rem;
}

.login-field label {
  margin-bottom: 0.35rem;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}

.login-field input {
  margin-bottom: 0;
}

.login-actions {
  margin-top: 1.25rem;
}

.login-actions input[type="submit"] {
  width: 100%;
  padding: 0.6rem;
  font-size: var(--fs-lg);
}

/* Dialog */

dialog#story-dialog {
  max-width: 640px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  margin: auto;
}

dialog#story-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

@starting-style {
  dialog#story-dialog[open] {
    opacity: 0;
    transform: translateY(1rem);
  }
  dialog#story-dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
  }
}

dialog#story-dialog[open] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}

dialog#story-dialog[open]::backdrop {
  transition: background 0.2s, backdrop-filter 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}

/* Settings Layout */

.settings-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
  display: flex;
  gap: 2rem;
}

.settings-nav {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
}

.settings-nav-link {
  display: block;
  padding: 0.4rem 0.75rem;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background 0.1s, color 0.1s;
}

.settings-nav-link:hover {
  background: var(--bg-hover);
  color: var(--text);
  text-decoration: none;
}

.settings-nav-link.active {
  background: var(--bg-hover);
  color: var(--text);
  font-weight: 600;
}

.settings-content {
  flex: 1;
  min-width: 0;
}

.settings-nav .button_to {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.settings-nav-signout {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-lede {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-bottom: 1.5rem;
}

.settings-group {
  border: none;
  padding: 0;
  margin: 0 0 1.75rem;
}

.settings-group legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-dimmed);
}

.settings-choices {
  display: flex;
  gap: 1.25rem;
}

.settings-choice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
  color: var(--text);
  cursor: pointer;
}

/* Feed badges */

.feed-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
}

.feed-badge--active {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
}

.feed-badge--inactive {
  background: var(--badge-inactive-bg);
  color: var(--badge-inactive-text);
}

.feed-detail-meta {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin: 1rem 0;
}

.form-field--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-field--checkbox input[type="checkbox"] {
  width: auto;
  margin-bottom: 0;
}

.form-field--checkbox label {
  display: inline;
  margin-bottom: 0;
}

.form-hint {
  color: var(--text-muted);
  font-size: var(--fs-md);
}

/* Events */

.event-flag {
  margin-right: 0.35rem;
}

/* Now: what today wants, below the albums */

.now {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  color: var(--text);
}

.now-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.75rem 2rem;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
}

.now--settled {
  grid-template-columns: none;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.now--settled .now-side {
  display: contents;
}

.now-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.now-heading {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.now-call-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.now .now-rest,
.now .now-link-button {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.now .now-link-button {
  background: var(--bg-soft);
  color: var(--text);
}

.now .now-link-button:hover {
  background: var(--bg-active);
}

.now-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--fs-base);
}

.now-events summary {
  cursor: pointer;
  list-style: none;
}

.now-events summary::-webkit-details-marker {
  display: none;
}

.now-events strong {
  font-weight: 600;
}

.now-events details p {
  margin: 0.5rem 0 0.25rem;
  font-family: var(--font-read);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-body);
}

.now-events details a {
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.now-date {
  display: inline-block;
  min-width: 4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.now-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
}

.now-item strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-md);
  font-weight: 600;
}

.now-item strong::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray);
}

.now-item--decision strong::before { background: var(--violet); }
.now-item--failure strong::before  { background: var(--red); }

.now-item span {
  color: var(--text-muted);
}

/* Albums */

.albums-panel {
  display: flex;
  flex-direction: column;
  padding: 1.875rem 2rem 2.125rem;
}

.albums-section + .albums-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.albums-heading {
  font-size: var(--fs-2xl);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 1rem;
}

.albums-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.albums-heading-row .albums-heading {
  margin-bottom: 0;
}

.rotation-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  gap: 0.4rem;
  line-height: 0;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.rotation-toggle-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.rotation-toggle-icon--action,
.rotation-toggle:is(:hover, :focus-visible) .rotation-toggle-icon--state {
  display: none;
}

.rotation-toggle:is(:hover, :focus-visible) .rotation-toggle-icon--action {
  display: block;
}

.rotation-toggle:is(:hover, :focus-visible) .rotation-toggle-label {
  opacity: 1;
}

.rotation-toggle--active {
  color: var(--text-dimmed);
  opacity: 0.7;
}

.rotation-toggle--active:is(:hover, :focus-visible) {
  opacity: 1;
  color: var(--amber);
}

.rotation-toggle--paused {
  color: var(--amber);
}

.rotation-toggle--paused:is(:hover, :focus-visible) {
  color: var(--text);
}

.albums-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}

.albums-grid turbo-frame {
  display: contents;
}

.album-card {
  min-width: 0;
}

.album-card:hover .album-artwork-wrap {
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
}

.album-artwork-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.album-info-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.album-info-link:hover {
  color: inherit;
  text-decoration: none;
}

.album-artwork-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-hover);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s;
}

.album-artwork {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The hold sticker sits on arbitrary artwork, so its paper and ink are fixed in
   both themes. Its ring fills over AlbumRotationJob::FAVORITE_PIN_THRESHOLD. */
.album-hold-form {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.album-hold {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transform: rotate(-8deg);
}

.album-hold svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.album-hold-ghost {
  fill: rgba(255, 255, 255, 0.18);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.25;
  stroke-dasharray: 3 2.5;
  opacity: 0;
  transition: opacity 140ms ease;
}

.album-hold-sticker {
  opacity: 0;
  transform: scale(0.85);
  transform-origin: 17px 17px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  transition: opacity 140ms ease, transform 140ms ease;
}

.album-hold-paper { fill: #f6f3ea; }

.album-hold-track {
  fill: none;
  stroke: rgba(28, 26, 24, 0.14);
  stroke-width: 2;
}

.album-hold-ring {
  fill: none;
  stroke: #1c1a18;
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 17px 17px;
}

.album-hold-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  color: #1c1a18;
  opacity: 0;
  transition: opacity 140ms ease;
}

.album-hold-label--free {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.album-artwork-wrap:hover .album-hold:not(.album-hold--held) :is(.album-hold-ghost, .album-hold-label--free),
.album-hold:not(.album-hold--held):focus-visible :is(.album-hold-ghost, .album-hold-label--free),
.album-hold--held :is(.album-hold-sticker, .album-hold-label--days) {
  opacity: 1;
}

.album-hold--held .album-hold-sticker {
  transform: none;
}

.album-hold--held:hover .album-hold-label--days {
  opacity: 0;
}

.album-hold--held:hover .album-hold-label--release {
  opacity: 1;
}

.album-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
  margin-top: 0.4rem;
}

.album-file {
  display: block;
  padding: 0.2rem 0;
  border: none;
  background: none;
  color: var(--text-dimmed);
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease;
}

.album-card:hover .album-file,
.album-file:focus-visible {
  opacity: 1;
}

.album-file:hover {
  color: var(--text);
}

.album-file-icon {
  width: 20px;
  height: 16px;
  overflow: visible;
}

.album-file-disc,
.album-file-jacket {
  fill: var(--bg-surface);
  stroke: currentColor;
  stroke-width: 1.25;
}

.album-file-hole { fill: currentColor; }

/* Rendered once by the file response: the disc slides into the jacket, then the
   control leaves, since a filed album has nothing left to file */
.album-file--filed {
  opacity: 1;
  animation: album-file-leave 200ms ease 520ms forwards;
}

.album-file--filed :is(.album-file-disc, .album-file-hole) {
  animation: album-file-tuck 220ms ease forwards;
}

.album-file--filed .album-file-jacket {
  animation: album-file-close 180ms ease 120ms forwards;
}

@keyframes album-file-tuck {
  to { transform: translateX(-5.5px); }
}

@keyframes album-file-close {
  to { fill: currentColor; }
}

@keyframes album-file-leave {
  to { opacity: 0; }
}

@media (hover: none) {
  .album-file { opacity: 1; }
}

.album-artwork-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmed);
  font-size: 2rem;
}

.album-info {
  min-width: 0;
}

.album-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-artist {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .feed-container {
    padding: 0.75rem 1rem 3rem;
  }

  .settings-layout {
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1rem 3rem;
  }

  .settings-nav {
    flex-direction: row;
    width: 100%;
    gap: 0.25rem;
    padding-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
  }

  nav {
    padding: 0.5rem 1rem;
  }

  .feed-item-image img {
    width: 100px;
    height: 75px;
  }

  .carousel-date {
    font-size: 36px;
  }

  .albums-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1rem;
  }

  .page {
    margin-top: 1rem;
    padding: 0 1rem;
  }

  .page--stack {
    gap: 1.25rem;
  }

  .otd-head {
    flex-wrap: wrap;
  }

  .otd-head .otd-nav {
    order: 1;
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }

  .otd-nav .carousel-arrow {
    width: 32px;
    height: 32px;
  }

  .otd-head .collapsible-chevron {
    margin-left: auto;
  }

  .collapsible--collapsed .otd-nav {
    display: none;
  }

  .carousel-event {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .carousel-dot {
    padding: 0.3rem 0.45rem;
  }

  .carousel-thumb {
    order: -1;
    aspect-ratio: 16 / 10;
  }

  .carousel-event-body {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .carousel-text {
    font-size: var(--fs-lg);
  }

  .albums-panel {
    padding: 1.25rem 1.25rem 1.5rem;
  }

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

  .now--settled {
    grid-auto-flow: row;
  }

  .now-card {
    padding: 1.25rem;
  }

  .tq-call {
    flex-wrap: wrap;
  }
}

/* Story action buttons */
.story-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--text-dimmed);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
  margin-left: auto;
  padding: 0;
}

.story-action-btn:hover {
  opacity: 1;
  color: var(--border-accent);
  border-color: var(--border-accent);
  background: var(--border-accent-muted);
}

.story-action-btn.taken {
  opacity: 0.7;
  color: var(--taken);
  border-color: var(--taken);
  cursor: default;
}

/* Job Status */

.job-status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.job-status-card {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
}

.job-status--green {
  color: var(--text-muted);
}

.job-status--yellow {
  border-color: var(--amber);
  color: var(--amber);
}

.job-status--red {
  border-color: var(--red);
  color: var(--red);
}

.job-status-name {
  font-weight: 600;
}

.job-status-detail {
  display: flex;
  gap: 0.375rem;
  color: inherit;
  opacity: 0.8;
}

.job-status-error {
  font-style: italic;
}

/* Health Indicator (nav dot) */

.health-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-indicator--green { background: var(--green); }
.health-indicator--yellow { background: var(--amber); }
.health-indicator--red { background: var(--red); }

/* Health Page */

.health-section-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 0.75rem;
  margin-top: 2rem;
}

.health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.health-panel {
  padding: 1.625rem 1.875rem 1rem;
}

.health-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-accent);
  white-space: nowrap;
}

.health-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.health-table tr:last-child td {
  border-bottom: none;
}

.health-dot {
  width: 30px;
  text-align: center;
}

.health-job-name { font-weight: 600; }
.health-ago { color: var(--text-muted); white-space: nowrap; }
.health-message { color: var(--text-muted); }
.health-records { color: var(--text-muted); text-align: right; }
.health-interval { color: var(--text-dimmed); white-space: nowrap; }
.health-muted { color: var(--text-dimmed); }
.health-error { color: var(--red); }


.health-run-message {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.health-details {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text);
}

.health-details strong { font-weight: 600; }
.health-details em { color: var(--text-muted); }
.health-details ul { list-style: none; padding: 0; }
.health-details li { padding: 0.125rem 0; }

.health-details-link {
  color: var(--text-muted);
}

.health-details-link:hover { color: var(--text); }

.nav-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Training */

.training-base {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.base-tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.375rem 1.5rem;
}

.base-tile--lead {
  grid-row: span 2;
  padding: 1.75rem 1.875rem;
}

.base-tile--mix {
  grid-column: span 2;
}

.base-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.base-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.base-value {
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.base-value--lead {
  font-size: var(--fs-6xl);
  letter-spacing: -0.04em;
}

.base-context {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.35;
}

.base-context .mono {
  font-size: var(--fs-xs);
  color: var(--text-dimmed);
}

.base-caption {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

.base-value.metric-warn { color: var(--amber); }

.training-trends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.training-trends .base-figure {
  margin-bottom: auto;
}

.evidence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.evidence .label {
  margin-right: 0.5rem;
}

.evidence-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  font-size: var(--fs-md);
}

.evidence-key { color: var(--text-muted); }

.evidence-pill strong {
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}

.evidence-note {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dimmed);
}

.evidence-pill .sparkline {
  margin: 0;
  color: var(--text-dimmed);
}

.stat-warn { color: var(--amber) !important; }
.stat-good { color: var(--green) !important; }

.steer-note {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.75rem;
  padding: 1.5rem 1.875rem;
}

.steer-note-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.steer-note-lead {
  display: block;
  max-width: 68ch;
  font-family: var(--font-read);
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--text);
}

.training-notes {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: var(--fs-md);
}

.training-notes li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.5rem;
}

.training-notes a { color: var(--text-muted); }

.training-notes-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dimmed);
  padding-top: 0.15rem;
}

.training-log {
  padding: 1.625rem 1.875rem 1rem;
}

.training-log-head,
.training-week-head,
.training-activity {
  display: grid;
  grid-template-columns: 5.5rem 4.5rem minmax(0, 1fr) 6rem 6rem 6rem 5rem 12rem;
  column-gap: 1.25rem;
  align-items: baseline;
}

.training-log-head {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.training-log .num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.training-week-head {
  padding: 1.1rem 0 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.training-week-head .num { font-weight: 500; }

.training-week-label {
  grid-column: span 3;
  font-size: var(--fs-lg);
  font-weight: 650;
}

.training-week-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-dimmed);
}

.training-activity {
  padding: 0.75rem 0.5rem;
  margin: 0 -0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: inherit;
  text-decoration: none;
}

.training-activity:hover {
  background: var(--bg-hover);
  color: inherit;
  text-decoration: none;
}

.ta-date {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.ta-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ta-name { font-weight: 500; }

.training-log .ta-dim { color: var(--text-dimmed); }

.training-log .num .dot { margin-right: 0.4rem; }

.ta-metrics {
  display: flex;
  align-items: baseline;
}

.ta-metric {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-body);
  white-space: nowrap;
}

.ta-metric.metric-warn { color: var(--amber); }

/* A loop read off a short course — the point still trends, but says so. */
.ta-partial {
  margin-left: 0.25rem;
  opacity: 0.65;
}

/* Activity#intensity_band: green = easy, gray = moderate, amber = hard
   (intensity, not error). Unclassified stays faint so it reads "no data,"
   never moderate. */
.band-easy     { background: var(--green); }
.band-moderate { background: var(--gray); }
.band-hard     { background: var(--amber); }
.band-none     { background: var(--border); }

.mix-bar {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 22px;
}

.mix-seg {
  min-width: 4px;
  border-radius: var(--radius-md);
}

.mix-legend {
  display: flex;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.mix-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.mix-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sparkline {
  display: block;
  color: var(--text-dimmed);
  overflow: visible;
}

.now-call-foot .button_to:last-child {
  margin-left: auto;
}

/* The day's call (charter: Steady / Push / Rest) — the banner above the prescription. */
.tq-call {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tq-call-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.tq-call-label::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gray);
}

.tq-call--steady .tq-call-label::before { background: var(--green); }
.tq-call--push   .tq-call-label::before { background: var(--amber); }
.tq-call--rest   .tq-call-label::before { background: var(--blue); }

.tq-call-blurb {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* The one honest line under the banner — a veto reason, freshness numbers, or a
   held-intensity note. Ordinary Steady days render nothing here. */
.tq-why {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-body);
}

.tq-item {
  padding: 1rem 0 0;
  border-top: 1px solid var(--border-subtle);
}

.tq-lead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tq-icon { display: none; }

.tq-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}

.tq-band { margin-left: auto; }

.tq-band--push::before       { background: var(--amber); }
.tq-band--instrument::before { background: var(--teal); }
.tq-band--banked::before     { background: var(--gray); }

.tq-target {
  margin-top: 0.4rem;
  font-family: var(--font-read);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-body);
}

.tq-reason {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* Chain wax — on home only when the next ride would reach the threshold; the
   tracker itself lives on /training. */
.tq-wax {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: none;
}

.tq-wax--warning { color: var(--amber); }
.tq-wax--due     { color: var(--danger); }

button.tq-wax-btn {
  padding: 0.1rem 0.45rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  color: var(--text-dimmed);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

button.tq-wax-btn:hover {
  background: none;
  color: var(--border-accent);
  border-color: var(--border-accent-muted);
}

.note-bias {
  margin-left: 0.5rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--border-accent-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-micro);
  color: var(--border-accent);
}

/* Review */

.nav-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  vertical-align: 1px;
}

.nav-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}

.review {
  max-width: 760px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.review-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.review-needs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--bg-active);
  border: 1px solid var(--border-accent-muted);
  border-radius: var(--radius-lg);
}

.review-needs h2 {
  font-size: var(--fs-xl);
  margin: 0;
}

.review-asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.review-ask {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 0;
}

.review-ask + .review-ask {
  border-top: 1px solid var(--border);
}

.review-ask-title {
  margin: 0.2rem 0 0.15rem;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.review-ask-detail {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.5;
}

.review-ask-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.review-ask--settled .review-ask-title {
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--text-muted);
}

.review-findings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.review-finding summary {
  cursor: pointer;
}

.review-finding .prose {
  margin: 0.5rem 0 0.75rem 1.1rem;
}

.review-sub {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.review-sub-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.review-sub-head h3 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.review-sub-head a {
  font-size: var(--fs-sm);
}

.review-next {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--fs-md);
  line-height: 1.5;
}

.review-decision-action {
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--link);
  color: var(--on-link);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.review-decision-action:hover {
  background: var(--link-hover);
  color: var(--on-link);
  text-decoration: none;
}

.review-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.review-section-head h2 {
  font-size: var(--fs-xl);
  margin: 0;
}

.review-section-head a {
  font-size: var(--fs-sm);
}

.review-headline {
  font-size: var(--fs-lg);
  line-height: 1.6;
  font-weight: 600;
}

.review-diff {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--fs-md);
  line-height: 1.5;
}

.review-diff li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
}

.review-diff-added::before {
  content: "+";
  font-weight: 700;
  color: var(--green);
}

.review-diff-removed::before {
  content: "−";
  font-weight: 700;
  color: var(--red);
}

.review-diff-removed,
.review-diff-revised {
  color: var(--text-muted);
}

.review-diff-revised::before {
  content: "~";
  font-weight: 700;
  color: var(--amber);
}

.review-section-actions {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.review-pushbacks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-pushback-said {
  font-size: var(--fs-md);
  color: var(--text-muted);
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
  white-space: pre-line;
}

.review-pushback-reply {
  margin-top: 0.4rem;
}

.review-pushback-waiting {
  margin-top: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.review-pushback-form textarea {
  font-family: var(--font-read);
}

.review-runs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
}

.review-runs--failed {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* Styleguide */

.sg-type {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.sg-type-row {
  display: grid;
  grid-template-columns: 7rem 3rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
}

.sg-type-row > span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sg-type-row code,
.sg-type-px {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.sg-radius {
  width: 4.5rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.sg-frame {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.sg-frame .page-header {
  margin-bottom: 0;
}

nav.sg-nav {
  position: static;
  border-radius: var(--radius-md);
}

.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.5rem;
}

.sg-swatch {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--tracking-caps);
}

.sg-chip {
  height: 44px;
  margin-bottom: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.sg-value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--text-dimmed);
}

.sg-value--unset {
  opacity: 0.5;
  text-transform: none;
  font-style: italic;
}

/* Book */

.book {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 220px;
  align-items: start;
}

.book-rail,
.book-edge {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.book-rail {
  padding: 1rem;
  border-right: 1px solid var(--border);
}

.book-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.book-rail-head .book-rail-heading {
  margin: 0;
}

.book .book-rail-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.45rem;
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.book .book-rail-toggle:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--text-dimmed);
}

.book-rail-toggle-count {
  display: none;
  font-size: var(--fs-micro);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.book-rail-folded .book {
  grid-template-columns: 2.5rem minmax(0, 1fr) 220px;
}

.book-rail-folded .book-rail {
  padding: 1rem 0.3rem;
}

.book-rail-folded .book-main {
  padding-inline: 1rem;
}

.book-rail-folded .book-rail > :not(.book-rail-head),
.book-rail-folded .book-rail-head .book-rail-heading {
  display: none;
}

.book-rail-folded .book-rail-head {
  justify-content: center;
}

.book-rail-folded .book-rail-toggle-icon {
  transform: scaleX(-1);
}

.book-rail-folded .book-rail-toggle-count {
  display: block;
}

.book-edge {
  padding: 1.5rem 1rem 4rem;
  border-left: 1px solid var(--border);
}

.book-edge-section,
.book-edge-chapter {
  display: flex;
  gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  color: var(--text-muted);
  border-left: 2px solid transparent;
}

.book-edge-section {
  margin-top: 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.book-edge-section:first-child {
  margin-top: 0;
}

.book-edge-chapter {
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
}

.book-edge-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-edge-pages {
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--fs-micro);
  color: var(--text-dimmed);
  font-variant-numeric: tabular-nums;
}

.book-edge-section:hover,
.book-edge-chapter:hover {
  color: var(--link);
  text-decoration: none;
}

.book-edge--current {
  color: var(--text);
  border-left-color: var(--border-accent);
}

.book .book-search-input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.book .book-search-input:focus {
  outline: none;
  border-color: var(--border-accent);
}

.book-filters {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.book-filter {
  margin: 0;
}

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

.book-filter span {
  display: block;
  padding: 0.15rem 0.6rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.book-filter span:hover {
  color: var(--text);
}

.book-filter input:checked + span {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--text-dimmed);
}

.book-filter input:focus-visible + span {
  outline: 2px solid var(--border-accent);
}

.book-rail-heading {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.25rem 0 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.book-rail-count {
  font-weight: 500;
  color: var(--text-dimmed);
  font-variant-numeric: tabular-nums;
}

.book-awaiting,
.book-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.book-awaiting {
  min-height: 6rem;
  padding-bottom: 4rem;
}

.book-results {
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.book-rail-album {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.35rem;
  border-radius: var(--radius-md);
}

.book-rail-album[data-album-id] {
  cursor: grab;
}

.book-rail-album:hover {
  background: var(--bg-hover);
}

.book-rail-artwork {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-hover);
}

.book-rail-play {
  position: relative;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius-sm);
}

.book-rail-play .book-rail-artwork {
  display: block;
}

.book-rail-play::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.15s;
}

.book-rail-play:hover::after {
  opacity: 1;
}

.book-rail-artwork.book-rail-artwork--empty {
  display: grid;
  place-items: center;
  color: var(--text-dimmed);
}

.book-rail-info {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.book-rail-title,
.book-rail-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-rail-title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.book-rail-artist {
  display: flex;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.book-rail-album .book-rail-action {
  padding: 0 0.35rem;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
}

.book-rail-album:hover .book-rail-action {
  opacity: 1;
}

.book-rail-album .book-rail-action:hover {
  color: var(--link);
}

.book-rail-jump {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: inherit;
}

.book-rail-jump:hover {
  color: inherit;
  text-decoration: none;
}

.book-rail-state {
  flex-shrink: 0;
  font-size: var(--fs-micro);
  color: var(--text-dimmed);
}

.book-rail-empty {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.book-rail-more {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
}

.book-main {
  min-width: 0;
  padding: 1.5rem 2rem 70vh;
}

.book-empty {
  max-width: 34rem;
  color: var(--text-muted);
}

.book-section,
.book-chapter,
.book-album {
  scroll-margin-top: 1rem;
}

.book-section {
  margin-bottom: 3rem;
}

.book-section-header,
.book-chapter-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.book-section-header {
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--border-accent);
}

.book-name-form {
  flex: 1;
  min-width: 0;
}

.book .book-section-name,
.book .book-chapter-name {
  width: 100%;
  padding: 0.1rem 0.3rem;
  margin: 0 0 0 -0.3rem;
  font: inherit;
  color: var(--text);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.book .book-section-name:hover,
.book .book-chapter-name:hover {
  border-color: var(--border);
}

.book .book-section-name:focus,
.book .book-chapter-name:focus {
  outline: none;
  border-color: var(--border-accent);
  background: var(--bg-surface);
}

.book .book-section-name {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.book-chapter {
  margin-bottom: 2rem;
}

.book-chapter-header {
  margin-bottom: 0.6rem;
}

.book .book-chapter-name {
  font-size: var(--fs-base);
  font-weight: 600;
}

.book .book-chapter-name::placeholder {
  color: var(--text-dimmed);
  font-weight: 400;
  font-style: italic;
}

.book-chapter-count {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--text-dimmed);
}

.book-controls {
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.book-section-header:hover .book-controls,
.book-chapter-header:hover .book-controls,
.book-controls:focus-within,
.book-controls:has([data-armed]) {
  opacity: 1;
}

.book .book-control {
  padding: 0.15rem 0.5rem;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.book .book-control:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--text-dimmed);
}

.book .book-control[data-armed] {
  color: var(--on-link);
  background: var(--danger);
  border-color: var(--danger);
}

.book .book-control--danger:hover {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.book-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 1.25rem;
}

.book-page {
  position: relative;
  padding: 0.9rem 0.9rem 1.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.book-page-sleeves {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem 0.75rem;
  align-items: start;
}

.book-sleeve {
  aspect-ratio: 1;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.book-page-footer {
  position: absolute;
  right: 0.7rem;
  bottom: 0.25rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-micro);
  color: var(--text-dimmed);
}

.book .book-page-remove {
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
}

.book .book-page-remove:hover {
  color: var(--danger);
}

.book-page-number {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.book-handle {
  flex-shrink: 0;
  color: var(--text-dimmed);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.book-handle:hover {
  color: var(--text);
}

.book-section-handle {
  font-size: var(--fs-2xl);
}

.book-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.book-toolbar-lead {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.book-back {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.book-back:hover {
  color: var(--text);
  text-decoration: none;
}

.book-stats {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.book--public {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.book--public .book-toolbar {
  align-items: baseline;
}

.book--public .book-album {
  cursor: auto;
}

.book-title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

@media (max-width: 800px) {
  .book--public {
    grid-template-columns: minmax(0, 1fr);
  }

  .book--public .book-main {
    padding-inline: 1rem;
  }

  .book--public .book-edge {
    display: none;
  }
}

.book-outline-show,
.book-outline .book-outline-hide {
  display: none;
}

.book-outline .book-outline-show {
  display: inline;
}

.book-outline .book-pages {
  display: none;
}

.book-outline .book-section {
  margin-bottom: 1.5rem;
}

.book-outline .book-chapter {
  margin: 0 0 0 1.5rem;
  padding: 0.15rem 0;
}

.book-outline .book-chapter-header {
  margin: 0;
}

.book-target.book-sleeve {
  background: var(--border-accent-muted);
  border: 1px solid var(--border-accent);
}

.book-target.book-album .book-album-cover {
  box-shadow: -5px 0 0 var(--border-accent);
}

.book-rail.book-target {
  background: var(--border-accent-muted);
}

.book .sortable-chosen.book-section,
.book .sortable-chosen.book-chapter,
.book .sortable-chosen.book-page {
  background: var(--bg-hover);
}

.book-album {
  position: relative;
  min-width: 0;
  cursor: grab;
}

.book-album-cover {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.book-album-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-album-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-dimmed);
}

.book-album:target .book-album-cover {
  animation: book-flash 1.8s ease-out;
}

@keyframes book-flash {
  0%, 50% { box-shadow: 0 0 0 4px var(--border-accent); }
  100% { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
}

.book-album-pop {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  z-index: 20;
  width: 13rem;
  padding: 0.6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(0.85);
  transition: opacity 0.12s, transform 0.12s, visibility 0s 0.12s;
}

.book-album:hover .book-album-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  transition: opacity 0.15s 0.35s, transform 0.15s 0.35s, visibility 0s 0.35s;
}

.book--holding .book-album-pop {
  display: none;
}

.book-album-pop img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.book-album-pop-info {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
  line-height: 1.3;
}

.book-album-pop-title {
  font-size: var(--fs-md);
  font-weight: 600;
}

.book-album-pop-artist {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.book-album-pop-year {
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--text-dimmed);
  font-variant-numeric: tabular-nums;
}

.book-rail-year {
  flex-shrink: 0;
  margin-left: 0.35rem;
  color: var(--text-dimmed);
  font-variant-numeric: tabular-nums;
}

.book-album-info {
  margin-top: 0.3rem;
  font-size: var(--fs-micro);
  line-height: 1.25;
}

.book-album-title,
.book-album-artist {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-album-title {
  font-weight: 600;
}

.book-album-artist {
  color: var(--text-muted);
}

.book .sortable-ghost {
  opacity: 0.35;
}

.book-new-section {
  display: flex;
  gap: 0.5rem;
  max-width: 27rem;
}

.book .book-new-section-input {
  flex: 1;
  margin: 0;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}