/*
 * Port of David's Hot List design (offline-internal/50_product/hot-list/):
 *   - design/reel-expansion/Main.dc.html (the feed's literal inline CSS values)
 *   - sandbox_flutter/lib/hot_list/* + lib/offline/theme/* (the more current
 *     source of truth where it disagrees with the static mockup - e.g. the
 *     tab row's 8px-radius pill and equal padding, not the mockup's fully
 *     round pill)
 *   - design/new-chip-lab (the chosen "H" update-badge variant)
 * Values are copied, not invented: colors/sizes below are quoted from those
 * files. Plain CSS, no build step, no framework.
 */

@font-face {
  font-family: "Satoshi";
  font-weight: 500;
  font-style: normal;
  src: url("./fonts/satoshi-500.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  font-weight: 700;
  font-style: normal;
  src: url("./fonts/satoshi-700.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Cabinet";
  font-weight: 800;
  font-style: normal;
  src: url("./fonts/cabinet-800.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Palette - quoted from sandbox_flutter/lib/offline/theme/theme_colors.dart
     and the literal values in Main.dc.html / new-chip-lab/index.html. */
  --ink: #191919; /* ThemeColors.gray900 */
  --ink2: #636363; /* ThemeColors.gray600 - meta lines */
  --ink3: #7c7c7c; /* ThemeColors.gray500 - card source/date line */
  --muted: #959595; /* ThemeColors.gray400 */
  --hairline: #ececec; /* ThemeColors.gray50 - card border */
  --pill-border: #dfdfdf; /* ThemeColors.gray100 - link-icon circle border */
  --frame-bg: #dfdfdf; /* ThemeColors.gray100 - main.dart's _PhoneFrame backdrop (same color, different role) */
  --page-bg: #f9f9f9; /* ThemeColors.gray05 */
  --surface: #ffffff;
  --tab-selected: #323232; /* ThemeColors.gray800 */
  --brand: #a76700; /* ThemeColors.yellow600 - link color */
  --brand-hover: #835100; /* ThemeColors.yellow700 */
  --shell-radius: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  /* main.dart's _PhoneFrame: ColoredBox(color: ThemeColors.gray100) is the
     desk backdrop OUTSIDE the phone-width column - "phones get the whole
     viewport... anything wider is a desk". Real content backgrounds
     (white for the rail pages, gray05 for the venue page) live on .page/
     .venue-page themselves, one layer in. */
  background: var(--frame-bg);
  color: var(--ink);
  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

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

/* main.dart's _PhoneFrame, read exactly (not just theme_app.dart's own
   background color, which is the SCAFFOLD's, one layer further in): a real
   phone (viewport <= phoneWidth(390) + 32 = 422px) gets the whole
   viewport, full width, no frame at all. Anything wider is a desk - center
   a fixed 390px-wide column, clipped (ClipRect: no border-radius, no
   box-shadow, no top margin - just a flat-edged column), on the gray100
   backdrop set on body above. Every screenshot in design/reel-expansion
   shows exactly this: a sharp-edged white phone column on a light gray
   desk background, not the router's own frame Taylor caught this repo
   inventing (480px, rounded corners, a box-shadow, a 24px top margin). */
.page {
  width: 100%;
  min-height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (min-width: 423px) {
  .page {
    max-width: 390px;
    margin: 0 auto;
  }
}

/* ScreenVenue: backgroundColor: ThemeColorRole.surfaceAlt (gray05) - the ONE
   surface in this app that isn't the plain white scaffold background. */
.venue-page {
  background: var(--page-bg);
  min-height: 100vh;
}

/* ---- Header shell: black, rounded bottom (SliverAppBar shape, screen_hot_list.dart) ---- */

.shell {
  background: #000000;
  border-radius: 0 0 var(--shell-radius) var(--shell-radius);
  position: sticky;
  top: 0;
  z-index: 10;
}

.shell-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 0 16px;
}

/* ThemeText.titleLarge: 18/22, w700 (not the mockup's plain 22px). */
.shell-title {
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
}

/* ---- Tab row (HotListTabRow: gray800 pill indicator, radius 8, equal padding) ---- */

.tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 16px 12px 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}

/* HotListTabRow._tab: unselected = bodyMedium (14/20, w500); selected =
   titleSmall (14/18, w700) on the gray800 pill - not one uniform style
   for both, and not the mockup's 15px. */
.tab {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "Satoshi", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
}
.tab.selected {
  background: var(--tab-selected);
  font-weight: 700;
  line-height: 18px;
}

/* ---- Rail page ---- */

.rail-subtitle {
  padding: 16px 16px 0 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink2);
}

.rail-spacer {
  height: 12px;
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink2);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
}

/* ---- The "H" update badge (design/new-chip-lab, variant H): kicker pill above the name ---- */

.new-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 8px;
}

/* ---- Venue block (VenueHeader + VenueUpdateScrollerFull) ---- */

.venue {
  padding: 20px 16px 0 16px;
  display: flex;
  flex-direction: column;
}

/* The row's own chosen photo (ACCEPTANCE.md's "Every row shows a photo") -
   same gradient placeholder David's card-media uses for "no image yet",
   reused here as the no-photo state when build-feed's photo.url is null
   (never a broken <img>). */
.venue-photo {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #d9d2c5, #b9a98f);
}
.venue-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue-name-row {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* VenueHeader's default nameStyle is headlineSmall (20/24) on the rail
   scroller; screen_venue.dart's _Header passes headlineLarge (26/32) for
   the drill-down page only - see the .venue-page override below. */
.venue-name {
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.venue-name:hover {
  text-decoration: underline;
}
.venue-page .venue-name {
  font-size: 26px;
  line-height: 32px;
}

.stage-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 12px;
}

/* VenueHeader: Gap(ThemeSpacing.xxs) = 2px above the meta line, not the
   mockup's 6px. */
.venue-meta {
  margin-top: 2px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink2);
}

/* VenueHeader: Gap(ThemeSpacing.sm) = 8px above the links row, not 16px. */
.venue-links {
  margin-top: 8px;
  display: flex;
  gap: 12px;
}

/* IconPill: 44pt tap target, borderCard (gray50) - not the mockup's 56px/gray100. */
.link-pill {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.link-pill svg {
  width: 18px;
  height: 18px;
}

/* ---- Timeline: horizontal scroller of cards on the rail page, vertical stack on the venue page ---- */

.timeline {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  padding-right: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.timeline::-webkit-scrollbar {
  display: none;
}
.timeline .card {
  flex: 0 0 82%;
  scroll-snap-align: start;
}

.timeline.vertical {
  flex-direction: column;
  overflow-x: visible;
  padding-right: 0;
}
.timeline.vertical .card {
  flex: none;
}

.card {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* screen_venue.dart:148-172 (media_container.dart): 4/3, not 16/10; the
   slot is only ever rendered when there IS a picture (renderCard omits it
   entirely otherwise) - this background is MediaContainer's own gray100,
   showing only while an image is still loading, never a stand-in for "no
   photo". */
.card-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pill-border); /* ThemeColors.gray100 */
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* model.dart:160-178 / layouts.dart:592-665: the card's own credited
   carousel - up to 8 pictures, swipeable, one slide per picture. Rendered
   only when a card has more than one picture (renderCard); a single
   picture stays a plain <img>, no scroller chrome. */
.card-media-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.card-media-track::-webkit-scrollbar {
  display: none;
}
.card-media-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}
.card-media .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-media .play span {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SocialProofText: bodyMedium (14/20), one line, ellipsized - not the
   mockup's 13/18 with no truncation. */
.card-source {
  margin-top: 12px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-headline {
  margin-top: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--ink);
}

.card-narrative {
  margin-top: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink2);
}

/* ---- Venue (drill-down) page ---- */
/* screen_venue.dart:24-26 / theme_app_bar.dart:6-10: a bare white app bar
   with a black back arrow, no title, no tabs - never the black rail-page
   shell, and never a "Back" text label (Flutter's default AppBar back
   affordance is icon-only). */

.venue-appbar {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 8px;
}

.venue-page-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.venue-page-back svg {
  width: 22px;
  height: 22px;
}

.venue-page .venue {
  padding-bottom: 24px;
}

/* Mobile-first: no horizontal page scroll at 375px (the venue name already
   ellipsizes on overflow rather than needing a smaller override). */
@media (max-width: 375px) {
  .timeline .card {
    flex-basis: 88%;
  }
}

/* ---- The map (screen_map.dart / map_card_workshop.dart) ---- */

.shell-action {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* The map fills the page under the shell. */
.page.map-mode {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.page.map-mode .shell {
  position: relative;
  z-index: 2;
}
.map-host {
  flex: 1;
  position: relative;
  margin-top: -16px; /* the map runs up under the shell's rounded bottom */
  min-height: 0;
}
.map-root,
.map-canvas {
  position: absolute;
  inset: 0;
}
.map-canvas {
  background: #e5e3df;
}

/* SM:803-821: "Nothing on this tab has an address yet", top 16. */
.map-empty {
  position: absolute;
  top: 32px;
  left: 16px;
  right: 16px;
  margin: 0 auto;
  width: fit-content;
  background: var(--surface);
  border-radius: 8px;
  padding: 8px 12px;
  font: 500 14px/20px "Satoshi", sans-serif;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
}

/* Name labels above zoom 15 (SM:923-956): 120 wide, gray900 at alpha 240, 6px radius, white
   hairline, labelMedium w800 white, ellipsized. */
.map-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-label {
  position: absolute;
  width: 120px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #ffffff;
  background: rgba(25, 25, 25, 0.94);
  color: #ffffff;
  font: 800 12px/16px "Satoshi", sans-serif;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The card dock: slides up 300ms ease-in-out (SM:172-182), pinned to the bottom. */
.map-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 8px;
  transform: translateY(140%);
  transition: transform 300ms ease-in-out;
  touch-action: pan-x;
}
.map-dock.up {
  transform: translateY(0);
}
.map-pager {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2%;
}
.map-pager::-webkit-scrollbar {
  display: none;
}
.map-page {
  flex: none;
  scroll-snap-align: center;
  padding: 0 2.5px;
  box-sizing: border-box;
}
/* MCW:240-257: 10px radius, two (0,3) blur-7 shadows, white. */
.map-card {
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1), 0 3px 7px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.map-card-media {
  background: #dfdfdf;
  flex: none;
}
.map-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.map-card-footer {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}
.map-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.map-card-titles {
  min-width: 0;
}
.map-card-name {
  font: 700 16px/20px "Satoshi", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-card-date {
  margin-top: 3px;
  font: 500 14px/20px "Satoshi", sans-serif;
  color: var(--ink2);
}
.map-card-city {
  flex: none;
  font: 500 14px/20px "Satoshi", sans-serif;
  color: var(--tab-selected);
}
.map-card-headline {
  min-width: 0;
  font: 700 14px/18px "Satoshi", sans-serif;
  color: var(--tab-selected);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-card-close {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  width: 24px;
  height: 24px;
  flex: none;
  cursor: pointer;
}

/* ---- Votes (David's votes lab, approved 2026-09-07; offline-internal
   95_agent_ops/superpowers/specs/2026-09-07-hot-list-votes-design.md) ---- */
:root {
  --yellow25: #fff2d8; /* ThemeColors.yellow25 - the lit pill's fill */
  --yellow50: #ffe9bd; /* ThemeColors.yellow50 - the lit pill's border */
  --yellow600: #a76700; /* ThemeColors.yellow600 - the lit pill's ink */
  --amber: #ffbd54; /* ThemeColors.yellow200 - the budget dots */
}

/* The vote pill: one more pill in the doors row, 44 tall, auto width, the
   place's score inside. Hairline and ink until you vote; lit after; 38% when
   the day is spent (scheme 3 · Lit). */
.vote-pill {
  position: relative;
  height: 44px;
  min-width: 44px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: #ffffff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.vote-pill .vote-arrow { display: inline-flex; }
.vote-pill.lit {
  background: var(--yellow25);
  border-color: var(--yellow50);
  color: var(--yellow600);
}
.vote-pill.spent {
  opacity: 0.38;
  cursor: default;
}
.vote-pill.pop { animation: vote-pop 250ms ease-out; }
@keyframes vote-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.vote-float {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 14px;
  color: var(--yellow600);
  pointer-events: none;
  animation: vote-float 700ms ease-out forwards;
}
@keyframes vote-float {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -26px); }
}

/* On The Hot List tab the rank is in the name, in secondary ink. */
.venue-rank { color: var(--ink2); }

/* The votes pill: black, five amber dots that hollow out, VOTES; a button,
   bottom right of the page, 16 in and 20 up. */
.budget-pill {
  position: fixed;
  right: max(16px, calc((100vw - 390px) / 2 + 16px));
  bottom: 20px;
  z-index: 20;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.budget-pill.hero {
  position: static;
  box-shadow: none;
  cursor: default;
  margin: 4px auto 16px;
}
.budget-dots { display: inline-flex; gap: 5px; }
.budget-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--amber);
  border: 1.5px solid var(--amber);
  box-sizing: border-box;
}
.budget-dot.hollow { background: transparent; }
.budget-word {
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* The explainer and sign-in sheet: the app's bottom sheet, centred
   (the achievement-sheet shape). */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 200ms;
}
.sheet-scrim.open { background: rgba(0, 0, 0, 0.45); }
.sheet {
  width: 100%;
  max-width: 390px;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  transform: translateY(100%);
  transition: transform 220ms ease-out;
}
.sheet-scrim.open .sheet { transform: translateY(0); }
/* The welcome sheet: three-quarters of the screen, its points left-aligned. */
.sheet.welcome {
  min-height: 75vh;
  max-height: 92vh;
  overflow-y: auto;
  text-align: left;
}
.welcome-kicker { margin-top: 0; margin-bottom: 8px; }
.welcome-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.welcome-list li {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink2);
  padding-left: 18px;
  position: relative;
}
.welcome-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow600);
}
.welcome-lead { font-weight: 700; color: var(--ink); }
.welcome-byline {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink3);
}
.welcome-wordmark { height: 14px; width: auto; display: block; }
.sheet-headline {
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
  color: var(--ink);
}
.sheet-body {
  margin-top: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink2);
}
.sheet-caps {
  margin-top: 16px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink3);
}
.sheet-button {
  margin-top: 20px;
  height: 52px;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: #ffffff;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.sheet-button:disabled { opacity: 0.5; cursor: default; }
.sheet-input {
  margin-top: 16px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--pill-border);
  padding: 0 16px;
  font-family: "Satoshi", sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  text-align: left;
}
.sheet-input.code {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 22px;
}
.sheet-input:focus { outline: 2px solid var(--yellow50); border-color: var(--yellow600); }
.turnstile { margin-top: 12px; min-height: 0; }
.sheet-error {
  margin-top: 10px;
  min-height: 0;
  font-weight: 500;
  font-size: 14px;
  color: #b3261e;
}
.sheet-error:empty { display: none; }
.sheet-fine {
  margin-top: 12px;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink3);
}
.sheet-fine a { color: var(--ink3); text-decoration: underline; }
.sheet-link {
  margin-top: 12px;
  background: none;
  border: none;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--yellow600);
  cursor: pointer;
}