/* Terranova — Signals from the Deep Green
   Single-screen hero. Mobile-first; breakpoints follow Tailwind's
   sm 640 / md 768 / lg 1024, all min-width. */

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

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  /* The hero is the first screen (100dvh); the weekly-sweep list flows below it,
     so the page scrolls vertically. Horizontal scroll stays locked. */
  overflow-x: hidden;
  overflow-y: auto;
  background: #c2ccd3;
  color: #000;
  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }

/* ── Background video ────────────────────────────────────────────────────────
   100% opacity. No overlay, scrim, tint, gradient or darkening layer above it
   at any breakpoint. */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

.glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ── Hero shell ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  color: #000;
  pointer-events: none;   /* only interactive children opt back in */
}

.icon { flex: none; }

/* ── Vertical rules (>=768px only) ───────────────────────────────────────── */
.rule {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
}
.rule--left  { left: 1.25rem; }
.rule--right { right: 1.25rem; }
.rule__seg { width: 1px; background: rgba(0, 0, 0, 0.2); }
.rule__seg--end { height: 15%; }
.rule__seg--mid { flex: 1 1 0%; }
.rule__plus {
  font-size: 0.75rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.4);
  padding: 0.25rem 0;
}
@media (min-width: 768px) { .rule { display: flex; } }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
}
.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #000;
  background: none;
  border: 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 300ms;
}
.nav__item:hover { opacity: 0.6; }
.nav__label { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.025em; }
.nav__label--menu { display: none; }   /* hamburger is icon-only on mobile */
.nav__dot { width: 8px; height: 8px; border-radius: 9999px; background: #000; }

@media (min-width: 640px) {
  .nav { padding: 1.25rem 1.5rem; }
  .nav__label--menu { display: inline; }
}
@media (min-width: 768px) { .nav { padding: 1.5rem 3rem; } }

/* ── Bottom row ──────────────────────────────────────────────────────────── */
.hero-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1.25rem 1.5rem;   /* matches .nav so columns align with the navbar */
}
@media (min-width: 640px) { .hero-bottom { padding: 0 1.5rem 2rem; } }
/* Mobile: the card shares this column with the intro copy, so let the bottom row
   fill the remaining height and the card shrink to fit rather than overflow the
   fold. The card's fixed 520px becomes a flex-basis it can shrink below; its
   settle list still scrolls to reach every endpoint. */
@media (max-width: 767.98px) {
  .hero-bottom { flex: 1 1 auto; min-height: 0; margin-top: 0; justify-content: flex-end; }
  .card { flex: 1 1 auto; min-height: 12rem; max-height: none; }
}
@media (min-width: 768px) {
  .hero-bottom {
    flex: 1;
    margin-top: 0;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 3rem;
    padding: 2rem 3rem 3rem;
  }
  .lede { align-self: flex-start; }   /* copy pinned top-left */
  .card { align-self: flex-end; }     /* card pinned bottom-right */
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.lede { max-width: 24rem; }
.lede__title {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #000;
}
.lede__body {
  margin-top: 0.75rem;
  max-width: 280px;
  font-size: 0.75rem;
  line-height: 1.625;
  color: rgba(0, 0, 0, 0.6);
}
@media (min-width: 640px)  { .lede__title { font-size: 1.5rem; }   .lede__body { font-size: 0.875rem; } }
@media (min-width: 768px)  { .lede__title { font-size: 1.875rem; } .lede__body { margin-top: 1rem; } }
@media (min-width: 1024px) { .lede__title { font-size: 2.25rem; } }

/* ── Chamfered button ────────────────────────────────────────────────────── */
.chamfer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  height: 44px;
  margin-top: 1.5rem;
  padding: 0 1.25rem;
  color: #000;
  text-decoration: none;
  pointer-events: auto;
  transition: opacity 300ms;
}
.chamfer:hover { opacity: 0.7; }

/* mobile-only frosted backing, clipped to the same chamfer silhouette */
.chamfer__glass {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chamfer__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chamfer__label { position: relative; font-size: 0.75rem; letter-spacing: 0.025em; }
.chamfer .icon { position: relative; }

@media (min-width: 640px) {
  .chamfer { width: 260px; height: 48px; padding: 0 1.5rem; }
  .chamfer__label { font-size: 0.875rem; }
  /* the frosted fill exists only below 640px; above it, the hairline remains */
  .chamfer__glass {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
  }
}
@media (min-width: 768px) { .chamfer { margin-top: 2rem; } }

/* ── Liquid-glass card ───────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* content sits under the header (no wave to push against) */
  width: 340px;
  max-width: 100%;
  height: 520px;
  /* Never taller than the viewport, so the card's bottom (and the settle list's
     scroll region) is always on-screen. Without this the fixed 520px overflowed
     below the fold and body{overflow:hidden} clipped it — the lower endpoints
     were unreachable. The settle list then scrolls inside the card. */
  max-height: calc(100dvh - 8.5rem);
  padding: 2rem;
  border-radius: 48px;
  overflow: hidden;                 /* clips the duplicate to the card */
  background: transparent;          /* the refraction IS the fill */
  border: 1px solid rgba(47, 47, 47, 0.15);
  pointer-events: auto;
  animation: fade-slide-up-card 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fade-slide-up-card {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* full-viewport-aligned copy of the backdrop; left/top/width/height are
   written every frame by glass-card.js */
#dup-video-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#dup-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: url(#liquid-glass-refraction);
}

.card__frost {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 48px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.3),
              inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  transition: background 400ms;
}
.card.group:hover .card__frost { background: rgba(255, 255, 255, 0.1); }

.card__head, .card__body { position: relative; z-index: 2; }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.card__title { font-size: 1rem; font-weight: 500; letter-spacing: -0.025em; }
.card__index { font-size: 0.75rem; color: rgba(0, 0, 0, 0.4); }
.card__body { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1rem;
              flex: 1; min-height: 0; }   /* min-height:0 で子のスクロールを許可 */
.finding__title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.025em; }
.finding__text { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.625; color: rgba(0, 0, 0, 0.5); }

@media (min-width: 640px) { .card__title { font-size: 1.125rem; } }
@media (min-width: 768px) {
  .card__head { padding-bottom: 1rem; }
  .card__title { font-size: 1.25rem; }
  .card__body { gap: 1rem; margin-top: 1.25rem; }
  .finding__title { font-size: 1rem; }
  .finding__text { font-size: 0.875rem; margin-top: 0.375rem; }
}

/* ── Slide-in menu ───────────────────────────────────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  pointer-events: none;
  /* delayed on close so the slide-out finishes before the layer goes inert */
  transition: visibility 0s linear 500ms;
}
.menu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 500ms;
}
.menu.is-open .menu__backdrop { opacity: 1; }

.menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5rem 2rem;
  background: #f5f4f0;
  transform: translateX(-100%);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu.is-open .menu__panel { transform: translateX(0); }
@media (min-width: 640px) { .menu__panel { width: 380px; padding: 1.5rem 2.5rem; } }

.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  margin-bottom: 3rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.875rem;
  color: #000;
  cursor: pointer;
  transition: opacity 300ms;
}
.menu__close:hover { opacity: 0.6; }

.menu__nav { display: flex; flex-direction: column; }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #000;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms, transform 500ms;
}
.menu__linkText {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  transition: transform 300ms;
}
.menu__link:hover .menu__linkText { transform: translateX(8px); }
.menu__arrow { opacity: 0; transform: translateX(8px); transition: opacity 300ms, transform 300ms; }
.menu__link:hover .menu__arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 640px) { .menu__linkText { font-size: 1.875rem; } }

.menu.is-open .menu__link { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 150ms; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 225ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 300ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 375ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 450ms; }

.menu__foot {
  margin-top: auto;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms, transform 500ms;
}
.menu.is-open .menu__foot { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.menu__footLabel {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: rgba(0, 0, 0, 0.4);
}
.menu__mail { font-size: 0.875rem; color: rgba(0, 0, 0, 0.7); text-decoration: none; transition: color 300ms; }
.menu__mail:hover { color: #000; }

/* ── Live card contents ──────────────────────────────────────────────────── */
.stats { display: flex; gap: 1.25rem; }
.stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat__n { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(0, 0, 0, 0.45); }

/* The list carries every settlement of the day, so it scrolls inside the card
   rather than being cut — the hero itself still never scrolls. */
.settle {
  list-style: none; margin: 0; padding: 0 0.5rem 0 0;
  display: flex; flex-direction: column; gap: 0.625rem;
  overflow-y: auto; flex: 1; min-height: 0;
  scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.settle::-webkit-scrollbar { width: 4px; }
.settle::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 2px; }
.settle__row { display: flex; flex-direction: column; gap: 0.1875rem; }
.settle__head { display: flex; align-items: baseline; gap: 0.5rem; }
.settle__name {
  font-size: 0.75rem; color: rgba(0, 0, 0, 0.75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.settle__cost {
  flex: none; font-size: 0.6875rem; color: rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}
/* Figures lifted verbatim from the response body. */
.settle__facts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.375rem; }
.settle__facts span {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.625rem; line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.04);
  padding: 0 0.3125rem; border-radius: 4px;
  white-space: nowrap;
}
.settle__facts--raw {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.625rem; color: rgba(0, 0, 0, 0.4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settle__tx {
  flex: none; font-size: 0.6875rem; color: rgba(0, 0, 0, 0.75);
  text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  font-variant-numeric: tabular-nums;
}
.settle__tx:hover { color: #000; }
.settle__tx--none { color: rgba(0, 0, 0, 0.3); border-bottom-color: transparent; }
/* Degraded (paid but fallback) / errored rows carry their reason, not a fact list. */
.settle__row--bad .settle__name { color: rgba(0, 0, 0, 0.55); }
.settle__badge {
  font-size: 0.5625rem; letter-spacing: 0.02em; vertical-align: 1px;
  padding: 0 0.25rem; border-radius: 4px; white-space: nowrap;
  background: rgba(176, 106, 0, 0.14); color: #8a5300;
}
.settle__reason {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.625rem; line-height: 1.5; color: #8a5300;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── Weekly sweep detail (below the hero) ─────────────────────────────────────
   Frosted glass over the fixed background video: as you scroll, this panel
   slides up over the hero's video (which stays put), blurring it through the
   glass — the same liquid-glass language as the hero, not an abrupt white block. */
.sweep {
  position: relative;
  z-index: 5;                 /* above the fixed bg-video */
  color: #000;
  /* Barely-there tint like the hero glass — the video shows through, blurred. */
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  backdrop-filter: blur(40px) saturate(1.4);
  /* a soft glass edge catching light, not a hard rule */
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 16px 30px -16px rgba(255, 255, 255, 0.4);
  padding: 3.5rem 1.25rem 5rem;
}
@media (min-width: 768px) { .sweep { padding: 4.5rem 3rem 6rem; } }
.sweep__inner { max-width: 60rem; margin: 0 auto; }
.sweep__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.sweep__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.025em; margin: 0; }
.sweep__sub { margin: 0.25rem 0 0; font-size: 0.8125rem; color: rgba(0, 0, 0, 0.55); }
.sweep__scope { margin: 0 0 0.625rem; font-size: 0.8125rem; line-height: 1.55; color: rgba(0, 0, 0, 0.72); font-weight: 500; max-width: 48rem; }
.sweep__desc { margin: 0 0 1.5rem; font-size: 0.75rem; line-height: 1.65; color: rgba(0, 0, 0, 0.5); max-width: 48rem; }
.sweep__desc:empty, .sweep__scope:empty { display: none; }
.sweep__scope code, .sweep__desc code {
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em;
  background: rgba(0, 0, 0, 0.05); padding: 0 0.25rem; border-radius: 4px;
}
.sweep__tabs { display: flex; gap: 0.5rem; }
.sweep__tab {
  font-size: 0.75rem; padding: 0.3125rem 0.75rem; border-radius: 9999px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; color: rgba(0, 0, 0, 0.6);
}
.sweep__tab[aria-selected="true"] { background: #000; color: #fff; border-color: #000; }
.sweep__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px; overflow: hidden;
}
@media (min-width: 640px) { .sweep__list { grid-template-columns: 1fr 1fr; } }
.sweep__item {
  display: flex; align-items: baseline; gap: 0.625rem;
  padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.22);
  font-variant-numeric: tabular-nums;
}
.sweep__idx { font-size: 0.625rem; color: rgba(0, 0, 0, 0.35); min-width: 2.25rem; }
.sweep__ticker {
  font-size: 0.8125rem; color: rgba(0, 0, 0, 0.8); font-weight: 500; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sweep__amt { font-size: 0.6875rem; color: rgba(0, 0, 0, 0.45); }
.sweep__txlink {
  font-size: 0.6875rem; color: rgba(0, 0, 0, 0.7); text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.sweep__txlink:hover { color: #000; }
.sweep__txlink--none { color: rgba(0, 0, 0, 0.3); border-bottom-color: transparent; }
/* Financial highlights per row (百万円). Wraps to a full-width second line. */
.sweep__fin {
  flex-basis: 100%; margin-top: 0.125rem;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.625rem; color: rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums;
}
.sweep__fin--none { color: rgba(0, 0, 0, 0.35); font-style: italic; }
.sweep__unit { color: rgba(0, 0, 0, 0.4); }
.sweep__foot { margin-top: 1.25rem; text-align: center; }
.sweep__more {
  font-size: 0.8125rem; padding: 0.5rem 1.25rem; border-radius: 9999px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.2); background: transparent; color: rgba(0, 0, 0, 0.7);
}
.sweep__more:hover { border-color: #000; color: #000; }

/* Weekly sweep rows lead the list — the per-call settlement evidence. */
.settle__empty { font-size: 0.75rem; color: rgba(0, 0, 0, 0.45); }
.settle__more { font-size: 0.6875rem; }
.settle__more a { color: rgba(0, 0, 0, 0.5); text-decoration: none; }
.settle__more a:hover { color: #000; }

@media (min-width: 768px) {
  .stat__n { font-size: 1.25rem; }
  .settle__name { font-size: 0.8125rem; }
}

/* ── Status pills / daily markers ────────────────────────────────────────── */
.pill {
  flex: none;
  font-size: 0.6875rem; padding: 2px 7px; border-radius: 6px; border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.pill--ok  { color: #1f7a3f; border-color: rgba(31, 122, 63, 0.45); background: rgba(31, 122, 63, 0.08); }
.pill--pay { color: #8a6a12; border-color: rgba(138, 106, 18, 0.45); background: rgba(138, 106, 18, 0.08); }
.chip-on {
  flex: none; font-size: 0.6875rem; padding: 2px 7px; border-radius: 6px;
  color: #1f7a3f; border: 1px solid rgba(31, 122, 63, 0.4); background: rgba(31, 122, 63, 0.07);
  white-space: nowrap;
}
.chip-off { flex: none; font-size: 0.6875rem; color: rgba(0, 0, 0, 0.25); }

/* ── Endpoints overlay ───────────────────────────────────────────────────── */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear 500ms;
}
.sheet.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 500ms;
}
.sheet.is-open .sheet__backdrop { opacity: 1; }

.sheet__panel {
  position: absolute; top: 0; right: 0;
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: #f5f4f0;
  transform: translateX(100%);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sheet.is-open .sheet__panel { transform: translateX(0); }
@media (min-width: 768px) { .sheet__panel { width: 720px; } }

.sheet__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sheet__title { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.025em; }
.sheet__close {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 0; font: inherit; font-size: 0.875rem; color: #000;
  cursor: pointer; transition: opacity 300ms;
}
.sheet__close:hover { opacity: 0.6; }

.sheet__lede {
  flex: none; padding: 1rem 1.5rem 0;
  font-size: 0.75rem; line-height: 1.7; color: rgba(0, 0, 0, 0.6);
}
.sheet__lede .pill, .sheet__lede .chip-on { display: inline-block; vertical-align: baseline; }

.sheet__scroll { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 2.5rem; }
@media (min-width: 768px) {
  .sheet__bar { padding: 2rem 2.5rem 1rem; }
  .sheet__lede { padding: 1rem 2.5rem 0; }
  .sheet__scroll { padding: 1.5rem 2.5rem 3rem; }
}

.grp { padding: 1.25rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.grp:last-child { border-bottom: 0; }
.grp__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.grp__name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; }
.grp__host { font-size: 0.75rem; color: rgba(0, 0, 0, 0.45); }
.grp__note { margin-top: 0.875rem; font-size: 0.6875rem; line-height: 1.7; color: rgba(0, 0, 0, 0.5); }

.ep { padding: 0.75rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.ep:last-of-type { border-bottom: 0; }
.ep__top { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; }
.ep__code { font-size: 0.8125rem; letter-spacing: -0.01em; word-break: break-all; }
.ep__m { color: rgba(0, 0, 0, 0.4); }
.ep__p { color: rgba(0, 0, 0, 0.9); }
.ep__price { flex: none; font-size: 0.8125rem; font-weight: 500; color: #8a6a12; font-variant-numeric: tabular-nums; }
.ep__top .chip-on, .ep__top .chip-off { margin-left: auto; }
.ep__desc { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.6; color: rgba(0, 0, 0, 0.5); }

/* ── Response samples ────────────────────────────────────────────────────── */
.ep__sample { margin-top: 0.5rem; }
.sample__none { font-size: 0.6875rem; color: rgba(0, 0, 0, 0.35); margin: 0; }

.sample { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.5); }
.sample__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.75rem; cursor: pointer; list-style: none;
  font-size: 0.6875rem; color: rgba(0, 0, 0, 0.7);
}
.sample__sum::-webkit-details-marker { display: none; }
.sample__sum::before { content: '▸'; margin-right: 0.375rem; color: rgba(0, 0, 0, 0.4); }
.sample[open] .sample__sum::before { content: '▾'; }
.sample__meta { color: rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; }
.sample__tx { color: rgba(0, 0, 0, 0.7); text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
.sample__tx:hover { color: #000; }

.sample__pre {
  margin: 0; padding: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  max-height: 260px; overflow: auto;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.6875rem; line-height: 1.5; color: rgba(0, 0, 0, 0.75);
  white-space: pre; tab-size: 2;
}
.sample__note {
  margin: 0; padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.6875rem; line-height: 1.6; color: rgba(0, 0, 0, 0.5);
}
.sample__note code { color: rgba(0, 0, 0, 0.7); word-break: break-all; }

.menu__ident {
  display: block; margin-bottom: 0.5rem;
  font-size: 0.75rem; line-height: 1.6; color: rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}