/* ──────────────────────────────────────────────────────────────────────────
   Refill route theme (cream + terracotta).

   Injected at runtime and scoped to the /refill route (see src/pages/Refill.tsx),
   the same way the FOMC gold theme is injected for /fomc. EVERY selector is
   namespaced under `.refill-page` so these rules never leak into the rest of the
   ivory/blue site. Ported from the standalone Refill PoC (refill_poc_v2).
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap');

.refill-page {
  --bg-cream: #FAF6F0;
  --ink: #1F1F1F;
  --ink-muted: #6B6B6B;
  --accent: #B65D3F;
  --accent-dark: #9B4F35;
  --bubble-npc: #F5EFE5;
  --border-soft: #E8E0D2;
  --ai-tag-bg: #EFE9DE;
  --banner: #EFE5D3;
  --refill-display: "General Sans", "Inter", system-ui, sans-serif;
  --refill-body: "Inter", system-ui, sans-serif;
  /* Matches /fomc's container exactly: 1024 outer − 32×2 gutters = 960px of
     content. All three product pages now share the same outer frame and content
     box (previously the content was equal at 960 but the outer widths differed). */
  --refill-maxw: 1024px;

  background: var(--bg-cream);
  color: var(--ink);
  font-family: var(--refill-body);
  font-optical-sizing: auto;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* very subtle linear texture on cream */
  background-image: repeating-linear-gradient(115deg, rgba(31, 31, 31, 0.012) 0 1px, transparent 1px 7px);
}

.refill-page .wrap { max-width: var(--refill-maxw); margin: 0 auto; padding: 0 32px; }
.refill-page section { padding: 64px 0; border-bottom: 1px solid var(--border-soft); }
.refill-page h1,
.refill-page h2,
.refill-page h3 { font-family: var(--refill-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); }
.refill-page h2 { font-size: 1.9rem; margin-bottom: 14px; }
.refill-page h3 { font-size: 1.15rem; margin-bottom: 8px; }
.refill-page p { color: var(--ink); max-width: 62ch; }
.refill-page .muted { color: var(--ink-muted); }
.refill-page .smallcaps { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-muted); font-weight: 600; font-size: .82rem; }
.refill-page .accent { color: var(--accent); }
.refill-page a { color: var(--accent); text-decoration: none; }
.refill-page a:hover { color: var(--accent-dark); }

/* ===== page language toggle (EN / KR) =====
   PageLangToggle is shared across /fomc, /refill and /survey, so it ships with
   the main site's Tailwind blue (bg-primary / text-primary) — the wrong palette
   on this terracotta page, where the pressed pill came out in the site's blue.
   These rules re-skin it in the Refill theme while it sits inside .refill-page,
   mirroring how /fomc re-skins it to gold. Scoped tightly to the toggle's
   role="group"+aria-pressed buttons so nothing else is caught. */
.refill-page [role="group"] {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
}
.refill-page [role="group"] button { font-family: var(--refill-body); }
.refill-page [role="group"] button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.refill-page [role="group"] button[aria-pressed="false"] {
  background: transparent;
  color: var(--ink-muted);
}
.refill-page [role="group"] button[aria-pressed="false"]:hover { color: var(--accent); }

/* hero */
.refill-page .hero { padding: 8px 0 56px; border-bottom: none; }
.refill-page .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.refill-page .hero h1 { font-size: 3rem; margin-bottom: 20px; }
.refill-page .hero h1 .accent { color: var(--accent); }
.refill-page .hero .lede { font-size: 1.12rem; color: var(--ink-muted); max-width: 48ch; margin-bottom: 28px; }
.refill-page .cta { display: inline-block; background: var(--accent); color: #fff; font-family: var(--refill-body); font-weight: 600; padding: 14px 26px; border-radius: 28px; font-size: 1rem; transition: background .12s ease; }
.refill-page .cta:hover { background: var(--accent-dark); color: #fff; }
.refill-page .cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.refill-page .cta-secondary { color: var(--accent); font-weight: 600; }

/* phone mockup */
.refill-page .phone { width: 326px; margin: 0 auto; background: var(--bg-cream); border: 11px solid #201d1a; border-radius: 48px; box-shadow: 0 26px 60px -24px rgba(31, 31, 31, .4); overflow: hidden; }
.refill-page .phone-inner { padding: 13px 13px 14px; }
.refill-page .app-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 12px; }
.refill-page .app-header .title { font-family: var(--refill-display); font-weight: 600; font-size: .98rem; }
.refill-page .icon-btn { width: 26px; height: 26px; color: var(--ink-muted); }
.refill-page .roster { display: flex; gap: 14px; padding: 4px 2px 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 12px; }
.refill-page .coworker { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.refill-page .mono { width: 34px; height: 34px; border-radius: 999px; background: #A79E92; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: .85rem; font-family: var(--refill-display); }
.refill-page .coworker .nm { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }

/* situation beat */
.refill-page .beat { background: var(--banner); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.refill-page .beat .beat-tag { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.refill-page .beat .beat-body { font-size: .82rem; color: var(--ink); line-height: 1.45; }

/* chat bubbles */
.refill-page .msg { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 78%; }
.refill-page .msg .who { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.refill-page .msg .who .nm { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.refill-page .ai-pill { background: var(--ai-tag-bg); color: var(--ink-muted); font-size: .56rem; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; font-weight: 600; }
.refill-page .bubble { padding: 10px 13px; border-radius: 16px; font-size: .83rem; line-height: 1.42; }
.refill-page .bubble.npc { background: var(--bubble-npc); color: var(--ink); }
.refill-page .msg.player { margin-left: auto; align-items: flex-end; }
.refill-page .bubble.player { background: var(--accent); color: #fff; }
.refill-page .mono.sm { width: 22px; height: 22px; font-size: .66rem; }
.refill-page .compose { display: flex; align-items: center; gap: 8px; margin-top: 10px; border: 1px solid var(--border-soft); border-radius: 999px; padding: 6px 6px 6px 14px; }
.refill-page .compose .ph { color: var(--ink-muted); font-size: .8rem; flex: 1; }
.refill-page .send { width: 30px; height: 30px; border-radius: 999px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; }

/* compact hero phone — tuned to read like a real phone screen: shorter and
   denser than the default. The phone auto-sizes to its content (no fixed
   height), so tightening the spacing only shortens it — nothing is clipped. */
.refill-page .phone.compact .phone-inner { padding: 11px 12px 9px; }
.refill-page .phone.compact .app-header { padding: 3px 4px 7px; }
.refill-page .phone.compact .app-header .title { font-size: .9rem; }
.refill-page .phone.compact .icon-btn { width: 21px; height: 21px; }
.refill-page .phone.compact .roster { gap: 12px; padding: 2px 2px 6px; margin-bottom: 7px; }
.refill-page .phone.compact .coworker { gap: 3px; }
.refill-page .phone.compact .mono { width: 29px; height: 29px; font-size: .76rem; }
.refill-page .phone.compact .coworker .nm { font-size: .55rem; }
.refill-page .phone.compact .beat { padding: 7px 10px; margin-bottom: 7px; }
.refill-page .phone.compact .beat .beat-tag { margin-bottom: 3px; }
.refill-page .phone.compact .beat .beat-body { font-size: .7rem; line-height: 1.3; }
.refill-page .phone.compact .msg { max-width: 87%; margin-bottom: 0; }
.refill-page .phone.compact .msg .who { margin-bottom: 1px; }
.refill-page .phone.compact .bubble { font-size: .7rem; padding: 6px 10px; line-height: 1.3; }
.refill-page .phone.compact .compose { margin-top: 7px; padding: 5px 5px 5px 12px; }
.refill-page .phone.compact .compose .ph { font-size: .76rem; }
.refill-page .phone.compact .send { width: 27px; height: 27px; }

/* ── one shell height for both locales ──────────────────────────────────────
   English is the taller of the two: the same scene costs it ~4 more lines than
   Korean (the situation banner alone runs 5 lines against 4). Left to size
   itself the mockup came out 73px shorter on /refill/kr, which showed up as the
   phone visibly shrinking when you flipped the language toggle.

   So the shell is pinned to English's natural height and Korean is brought up to
   meet it. English is untouched — 651px is what it already measured. It's a
   `min-height`, not a `height`: on a narrow column where even English overruns,
   the phone grows rather than clipping the conversation. */
.refill-page .phone.compact { min-height: 651px; display: flex; }
.refill-page .phone.compact .phone-inner { flex: 1; display: flex; flex-direction: column; }
.refill-page .phone.compact .thread { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: space-between; }

/* Korean carries more meaning per line, so at the shared metrics it left ~73px
   of slack. Rather than pour that into the gaps — which reads as bubbles adrift
   in a half-empty screen — it's spent on the type itself: roomier leading and
   taller bubbles, the density Korean text wants anyway. That closes all but a
   few px, which `space-between` above absorbs invisibly. Line lengths are
   untouched, so nothing rewraps. */
.refill-page[lang="ko"] .phone.compact .beat .beat-body { line-height: 1.44; }
.refill-page[lang="ko"] .phone.compact .bubble { line-height: 1.44; padding: 8px 10px; }
.refill-page[lang="ko"] .phone.compact .thread { gap: 5px; }

/* steps */
.refill-page .step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--border-soft); }
.refill-page .step:last-child { border-bottom: none; }
.refill-page .step-n { font-family: var(--refill-display); font-weight: 700; font-size: 2rem; color: var(--accent); line-height: 1; }
.refill-page .step-body p { margin-top: 4px; color: var(--ink-muted); max-width: none; }

/* two-col compare */
.refill-page .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.refill-page .card { background: #fff; border: 1px solid var(--border-soft); border-radius: 12px; padding: 22px; }
.refill-page .card h3 { color: var(--ink); }
.refill-page .card ul { list-style: none; margin-top: 10px; padding: 0; }
.refill-page .card li { padding-left: 20px; position: relative; margin-bottom: 8px; color: var(--ink-muted); font-size: .95rem; }
.refill-page .card li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.refill-page .card.dim { background: transparent; }

/* metric row */
.refill-page .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.refill-page .metric { border-top: 2px solid var(--accent); padding-top: 14px; }
.refill-page .metric .num { font-family: var(--refill-display); font-weight: 700; font-size: 1.9rem; color: var(--ink); }
.refill-page .metric .lbl { color: var(--ink-muted); font-size: .88rem; margin-top: 4px; }

/* closing CTA */
.refill-page .closing { text-align: left; padding: 72px 0; border-bottom: none; }
.refill-page .closing h2 { font-size: 2rem; max-width: none; }

@media (max-width: 760px) {
  .refill-page .hero-grid,
  .refill-page .cols,
  .refill-page .metrics { grid-template-columns: 1fr; }
  .refill-page .hero h1 { font-size: 2.3rem; }
  .refill-page section { padding: 48px 0; }
  .refill-page .phone { margin-top: 12px; }
}