/* ══════════════════════════════════════════════════════════════════════
   Follow-to-unlock · Material 3 (Google) design system
   Mobile-first · light + dark · a11y-aware
   ══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens · light ─────────────────────────────────────────── */
:root {
  --primary:            #0b57d0;
  --on-primary:         #ffffff;
  --primary-container:  #d3e3fd;
  --on-primary-container:#041e49;

  --background:         #f8fafd;
  --surface:            #ffffff;
  --surface-container:  #f0f4f9;
  --surface-high:       #e9eef6;

  --on-surface:         #1f1f1f;
  --on-surface-variant: #444746;
  --outline-variant:    #dadce0;

  --error:              #b3261e;
  --error-container:    #fce8e6;
  --on-error-container: #8c1d18;

  --success:            #0d652d;
  --success-container:  #e6f4ea;
  --on-success-container:#0b4f22;

  --verified:           #1a73e8;
  --wa:                 #25d366;
  --on-wa:              #042a14;

  --ig: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

  /* shape */
  --r-card: 28px;
  --r-item: 20px;
  --r-btn:  100px;
  --r-sm:   16px;

  /* elevation */
  --e1: 0 1px 2px rgba(60,64,67,.16), 0 1px 3px 1px rgba(60,64,67,.08);
  --e2: 0 1px 3px rgba(60,64,67,.18), 0 4px 8px 3px rgba(60,64,67,.08);
  --e3: 0 4px 12px rgba(60,64,67,.14), 0 12px 28px rgba(60,64,67,.10);

  /* motion */
  --ease: cubic-bezier(.2,0,0,1);

  /* inline icons (masked, so they inherit theme colour) */
  --ic-lock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm240-200q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z'/></svg>");
  --ic-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
  --ic-doc:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520Z'/></svg>");
}

/* ── Design tokens · dark ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:            #a8c7fa;
    --on-primary:         #062e6f;
    --primary-container:  #0842a0;
    --on-primary-container:#d3e3fd;

    --background:         #131314;
    --surface:            #1e1f20;
    --surface-container:  #282a2c;
    --surface-high:       #333537;

    --on-surface:         #e3e3e3;
    --on-surface-variant: #c4c7c5;
    --outline-variant:    #444746;

    --error:              #f2b8b5;
    --error-container:    #3f2a29;
    --on-error-container: #f9dedc;

    --success:            #37864f;
    --success-container:  #1e3a28;
    --on-success-container:#c4eed0;

    --verified:           #a8c7fa;

    --e1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.3);
    --e2: 0 1px 3px rgba(0,0,0,.5), 0 4px 8px 3px rgba(0,0,0,.3);
    --e3: 0 4px 12px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.35);
  }
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

/* soft premium aura behind the card */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 0%,   rgba(11,87,208,.10), transparent 70%),
    radial-gradient(45% 35% at 85% 100%, rgba(188,24,136,.08), transparent 70%);
}

/* ── Layout ────────────────────────────────────────────────────────── */
.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.card {
  width: 100%;
  max-width: 448px;
  margin-top: auto;              /* safe vertical centring, never clips */
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px 24px 28px;
  box-shadow: var(--e3);
  text-align: center;
}

.foot {
  margin-bottom: auto;
  padding-top: 18px;
  font-size: 12px;
  color: var(--on-surface-variant);
}
.foot b { font-weight: 500; color: var(--on-surface); }

@media (max-width: 380px) {
  .card { padding: 26px 18px 22px; border-radius: 24px; }
}

/* ── Profile header ────────────────────────────────────────────────── */
.profile { margin-bottom: 26px; }

.avatar-ring {
  width: 100px; height: 100px;
  margin: 0 auto 14px;
  border-radius: 50%;
  padding: 3px;
  background: var(--ig);
  box-shadow: var(--e1);
}
.avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  font-size: 36px;
  background: var(--surface-container);
  border: 3px solid var(--surface);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

h1#creatorName {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 0 3px;
  font-size: 22px; font-weight: 500; letter-spacing: -.2px;
  line-height: 1.25;
}
.badge { display: inline-flex; width: 19px; height: 19px; flex: none; }
.badge svg { width: 100%; height: 100%; display: block; fill: var(--verified); }

.handle {
  margin: 0;
  font-size: 14px;
  color: var(--on-surface-variant);
}

/* First-paint skeletons — vanish on their own the moment app.js
   writes the real name/handle, so there is no placeholder flash. */
#nameText:empty,
#handle:empty {
  display: inline-block;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-high) 50%, var(--surface-container) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
#nameText:empty { width: 186px; height: 21px; vertical-align: -3px; }
#handle:empty   { width: 128px; height: 13px; margin-top: 5px; }

/* ── Typography ────────────────────────────────────────────────────── */
.q {
  margin: 0 0 6px;
  font-size: 20px; font-weight: 500; letter-spacing: -.2px;
  line-height: 1.3;
  color: var(--on-surface);
}
.supporting {
  margin: 0 0 20px;
  font-size: 14px; line-height: 1.55;
  color: var(--on-surface-variant);
}
.supporting.empty { margin: 20px 0 0; }

/* ── Hero icons ────────────────────────────────────────────────────── */
.hero-icon {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.hero-icon .ic { width: 36px; height: 36px; }
.hero-icon--info    { background: var(--primary-container); }
.hero-icon--info    .ic { fill: var(--on-primary-container); }
.hero-icon--error   { background: var(--error-container); }
.hero-icon--error   .ic { fill: var(--on-error-container); }
.hero-icon--success { background: var(--success-container); }
.hero-icon--success .ic { fill: var(--on-success-container); }

/* ── Buttons (Material 3) ──────────────────────────────────────────── */
.ic { width: 20px; height: 20px; flex: none; fill: currentColor; }

.btn {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 56px;
  margin: 0 0 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--r-btn);
  font: inherit;
  font-size: 15px; font-weight: 500; letter-spacing: .1px;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .2s var(--ease), transform .1s var(--ease);
}
.btn > span { min-width: 0; }
.btn::after {                     /* M3 state layer */
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.btn:hover::after  { opacity: .08; }
.btn:active::after { opacity: .12; }
.btn:active        { transform: scale(.985); }
.btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.btn-filled  { background: var(--primary);           color: var(--on-primary); box-shadow: var(--e1); }
.btn-filled:hover { box-shadow: var(--e2); }
.btn-tonal   { background: var(--primary-container); color: var(--on-primary-container); }
.btn-success { background: var(--success);           color: #fff; box-shadow: var(--e1); }
.btn-ig      { background: var(--ig);                color: #fff; box-shadow: var(--e1); }
.btn-wa      { background: var(--wa);                color: var(--on-wa); }

.btn-text {
  min-height: 48px;
  margin: 4px 0 0;
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  box-shadow: none;
}

/* ── Sidebar blurb (desktop only) ──────────────────────────────────── */
.blurb {
  display: none;
  margin: 16px 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--on-surface-variant);
}

/* ── Search field (M3 filled search bar) ───────────────────────────── */
.search {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  padding: 0 6px 0 16px;
  min-height: 52px;
  background: var(--surface-container);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search:focus-within {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: var(--e1);
}
.search-ic { width: 20px; height: 20px; flex: none; fill: var(--on-surface-variant); }

.search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--on-surface);
}
.search input::placeholder { color: var(--on-surface-variant); }
/* drop the browser's own search chrome so ours is the only affordance */
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.search-clear {
  position: relative;
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.search-clear svg { width: 18px; height: 18px; fill: var(--on-surface-variant); }
.search-clear::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0;
  transition: opacity .15s var(--ease);
}
.search-clear:hover::after  { opacity: .08; }
.search-clear:active::after { opacity: .12; }
.search-clear:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ── "showing N of M" line ─────────────────────────────────────────── */
.list-hint {
  margin: 14px 0 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--on-surface-variant);
  text-align: center;
}

/* ── Resource list (markup generated by app.js) ────────────────────── */
.list { display: grid; gap: 10px; text-align: left; }

.vcard {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 40px 12px 12px;
  background: var(--surface-container);
  border: 1px solid transparent;
  border-radius: var(--r-item);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .1s var(--ease);
  animation: fade .4s var(--ease) both;
}
.vcard:nth-child(1) { animation-delay: .02s; }
.vcard:nth-child(2) { animation-delay: .06s; }
.vcard:nth-child(3) { animation-delay: .10s; }
.vcard:nth-child(4) { animation-delay: .14s; }
.vcard:nth-child(5) { animation-delay: .18s; }
.vcard:nth-child(6) { animation-delay: .22s; }
.vcard:nth-child(7) { animation-delay: .26s; }
.vcard:nth-child(8) { animation-delay: .30s; }

.vcard:hover  { background: var(--surface-high); border-color: var(--outline-variant); }
.vcard:active { transform: scale(.99); }

/* trailing chevron */
.vcard::after {
  content: "";
  position: absolute; right: 14px; top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  background-color: var(--on-surface-variant);
  -webkit-mask: var(--ic-chev) center / contain no-repeat;
          mask: var(--ic-chev) center / contain no-repeat;
}

.thumb {
  width: 64px; height: 64px;
  flex: none;
  border-radius: 14px;
  object-fit: cover;
  background: var(--ig);
  display: block;
}

.vmeta { min-width: 0; }
.vmeta strong {
  display: block;
  font-size: 15px; font-weight: 500; line-height: 1.35;
  color: var(--on-surface);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vmeta span {
  display: flex; align-items: center; gap: 5px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--on-surface-variant);
}
.vmeta span::before {
  content: "";
  width: 13px; height: 13px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ic-lock) center / contain no-repeat;
          mask: var(--ic-lock) center / contain no-repeat;
}

/* "Includes setup guide" badge — shown only on cards whose resource has a
   guide. Informational: the guide itself stays behind the unlock. */
.vmeta .vguide { margin-top: 4px; color: var(--primary); font-weight: 500; }
.vmeta .vguide::before {
  -webkit-mask: var(--ic-doc) center / contain no-repeat;
          mask: var(--ic-doc) center / contain no-repeat;
}

/* ── Selected-resource strip (sel1 / sel2) ─────────────────────────── */
.selected-strip {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  padding: 10px 14px 10px 10px;
  background: var(--surface-container);
  border-radius: var(--r-sm);
  text-align: left;
}
.selected-strip:empty { display: none; }
.strip-thumb {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
  background: var(--ig);
  display: block;
}
.selected-strip strong {
  font-size: 14px; font-weight: 500; line-height: 1.35;
  color: var(--on-surface);
}

/* ── Notices ───────────────────────────────────────────────────────── */
.hint, .warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.55;
  text-align: left;
}
.hint { background: var(--surface-container); color: var(--on-surface-variant); }
.hint b { font-weight: 500; color: var(--on-surface); }
.hint-ic { fill: var(--on-surface-variant); }

.warn { background: var(--error-container); color: var(--on-error-container); }
.warn-ic { fill: var(--on-error-container); }
.hint .ic, .warn .ic { width: 18px; height: 18px; margin-top: 1px; }

/* ── Validation ring ───────────────────────────────────────────────── */
.ring {
  position: relative;
  width: 132px; height: 132px;
  margin: 4px auto 22px;
}
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring-track { stroke: var(--surface-high); }
.ring-fill {
  stroke: var(--primary);
  stroke-dasharray: 327;          /* 2πr, r = 52 */
  stroke-dashoffset: 327;
  animation: ringfill 5s linear forwards;    /* matches VALIDATE_SECONDS in app.js */
}
@keyframes ringfill { to { stroke-dashoffset: 0; } }

.ring-num {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-size: 34px; font-weight: 500; letter-spacing: -1px;
  color: var(--on-surface);
}
.ring-num i { font-size: 15px; font-weight: 400; font-style: normal; color: var(--on-surface-variant); }

/* shimmer placeholder rows */
.skeleton { display: grid; gap: 9px; margin-top: 22px; }
.skeleton span {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-high) 50%, var(--surface-container) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton span:nth-child(2) { width: 82%; margin: 0 auto; }
.skeleton span:nth-child(3) { width: 60%; margin: 0 auto; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Persistent WhatsApp CTA ───────────────────────────────────────── */
.wa-wrap {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--outline-variant);
}
.wa-label {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--on-surface-variant);
}
.btn-wa { font-size: 14.5px; margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   THE LAB · projects in flight
   ══════════════════════════════════════════════════════════════════════ */
.work {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--outline-variant);
  text-align: left;
}
.work-eyebrow {
  margin: 0;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary);
}
.work-title {
  margin: 9px 0 5px;
  font-size: 20px; font-weight: 500; letter-spacing: -.2px;
  color: var(--on-surface);
}
.work-sub {
  margin: 0 0 18px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--on-surface-variant);
}

.work-grid {
  counter-reset: proj;
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.work-item {
  counter-increment: proj;
  position: relative;
  padding: 14px 46px 15px 18px;
  background: var(--surface-container);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.work-item:hover { background: var(--surface-high); border-color: var(--outline-variant); }

/* accent spine */
.work-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ig);
}
/* 01 … 07 */
.work-item::after {
  content: counter(proj, decimal-leading-zero);
  position: absolute; top: 13px; right: 15px;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--on-surface-variant);
  opacity: .45;
}

.work-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-btn);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
}
.work-item h3 {
  margin: 9px 0 5px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.1px;
  color: var(--on-surface);
}
.work-item p {
  margin: 0;
  font-size: 13px; line-height: 1.58;
  color: var(--on-surface-variant);
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP (≥900px) — a different layout, not a stretched phone:
   sticky profile sidebar on the left, wide two-column resource grid right.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .shell { padding: 48px 32px; }

  /* One item per column-1 row and NO row-spanning item. An earlier version
     put the profile in row 1 and the CTA in row 2 with .pane-main spanning
     both; row heights were then driven by the spanning item and the columns
     collided. Each area here is independent, so overlap is impossible. */
  .card {
    max-width: 1060px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas:
      "side main"
      "work work"
      "cta  cta";
    column-gap: 48px;
    row-gap: 26px;
    padding: 44px 48px;
    text-align: left;
  }

  .pane-left { grid-area: side; align-self: start; }
  .pane-main { grid-area: main; min-width: 0; }

  /* The Lab spans the full width underneath both columns */
  .work { grid-area: work; margin-top: 4px; padding-top: 30px; }

  /* CTA closes the page full-width, button kept to a sane size */
  .wa-wrap { grid-area: cta; margin-top: 0; padding-top: 26px; text-align: center; }
  .wa-wrap .btn-wa { max-width: 430px; margin-inline: auto; }
  .work-title { font-size: 23px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* sidebar profile */
  .profile { margin-bottom: 0; text-align: center; }
  .avatar-ring { width: 116px; height: 116px; }
  .avatar { font-size: 42px; }
  h1#creatorName { font-size: 24px; }
  .blurb { display: block; text-align: center; }

  /* browse stage takes the full width */
  #picker { text-align: left; }
  #picker .q { font-size: 26px; }
  #picker .supporting { margin-bottom: 22px; }
  .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .list-hint { text-align: left; }

  /* single-action stages stay narrow + centred; full width would look lost */
  #escape, #step1, #loading, #failed, #step2 {
    max-width: 460px;
    margin-inline: auto;
    text-align: center;
  }

  .foot { padding-top: 22px; }
}

/* ── Motion ────────────────────────────────────────────────────────── */
.fade { animation: fade .4s var(--ease) both; }
@keyframes fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ring-fill { animation: none; stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOW-TO-USE GUIDE · overlay sheet + infographic content
   Bottom sheet on phones, centred dialog on desktop.
   ══════════════════════════════════════════════════════════════════════ */
body.no-scroll { overflow: hidden; }

.sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  animation: fade .25s var(--ease) both;
}
.sheet-panel {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--e3);
  animation: sheetUp .32s var(--ease) both;
}
@keyframes sheetUp { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }

.sheet-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--outline-variant);
}
.sheet-heads { flex: 1; min-width: 0; }
.sheet-eyebrow {
  margin: 0 0 3px;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary);
}
.sheet-title { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.2px; color: var(--on-surface); }
.sheet-x {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--surface-container); color: var(--on-surface-variant);
  cursor: pointer; transition: background .18s var(--ease);
}
.sheet-x svg { width: 20px; height: 20px; fill: currentColor; }
.sheet-x:hover { background: var(--surface-high); }
.sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  text-align: left;
}

/* ── parsed guide content ──────────────────────────────────────────── */
.g-h { margin: 22px 0 10px; font-size: 15px; font-weight: 500; letter-spacing: -.1px; color: var(--on-surface); }
.g-h:first-child { margin-top: 0; }
.g-p { margin: 0 0 12px; font-size: 14px; line-height: 1.62; color: var(--on-surface-variant); }

.g-step {
  display: flex; gap: 14px;
  margin: 0 0 10px; padding: 14px 16px;
  background: var(--surface-container);
  border-radius: var(--r-sm);
}
.g-step > div { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; color: var(--on-surface); }
.g-num {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 500;
}

.g-list { margin: 0 0 14px; padding-left: 20px; }
.g-list li { margin: 0 0 7px; font-size: 14px; line-height: 1.6; color: var(--on-surface-variant); }

.g-call {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 12px; padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px; line-height: 1.55;
}
.g-call b {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.g-call--tip  { background: var(--primary-container); color: var(--on-primary-container); }
.g-call--warn { background: var(--error-container);   color: var(--on-error-container); }

.g-code {
  margin: 0 0 14px; padding: 14px 16px;
  background: var(--surface-high);
  border-radius: var(--r-sm);
  overflow-x: auto;
}
.sheet-body code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--surface-high);
  padding: 2px 6px; border-radius: 6px;
}
.g-code code { background: none; padding: 0; white-space: pre; line-height: 1.6; color: var(--on-surface); }
.sheet-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

@media (min-width: 900px) {
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 28px; max-height: 84vh; }
  .sheet-head { padding: 24px 26px 16px; }
  .sheet-body { padding: 22px 26px 28px; }
}