/*
 * DramaKu website styles.
 * Colour, type, spacing and radius values come from the DramaKu design
 * system (design-system/project/tokens.json), Rose palette: the logo and the
 * site always use Rose, whatever palette a user picks in the app. Theme
 * follows the OS unless <html data-theme> overrides it (header toggle).
 */

/* ---------- Tokens: Rose light (default) ---------- */
:root {
  color-scheme: light;
  --background: #fff8f9;
  --surface: #ffffff;
  --surface-variant: #f6ecef;
  --outline: #e6dce0;
  --primary: #d12e58;
  --primary-container: #d12e58;
  --on-primary: #ffffff;
  --on-background: #1c1619;
  --on-surface-muted: #6b6166;
  --premium: #946010;
  --on-premium: #ffffff;
  --premium-soft: #fbf1e3;
  --error: #d1242f;
  --success: #18794e;
  --card-border: var(--outline);

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --touch-min: 48px;
  --top-bar-height: 64px;
  --content-max: 1080px;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Rose dark: system preference unless forced light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #0e0b0d;
    --surface: #1a1518;
    --surface-variant: #241d21;
    --outline: #2a2427;
    --primary: #f2557a;
    --primary-container: #d12e58;
    --on-primary: #ffffff;
    --on-background: #f3eef0;
    --on-surface-muted: #a39a9e;
    --premium: #e8a33d;
    --on-premium: #140d04;
    --premium-soft: #241a0e;
    --error: #ff6369;
    --success: #3dd68c;
    --card-border: transparent;
  }
}

/* ---------- Rose dark: forced by the theme toggle ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0e0b0d;
  --surface: #1a1518;
  --surface-variant: #241d21;
  --outline: #2a2427;
  --primary: #f2557a;
  --primary-container: #d12e58;
  --on-primary: #ffffff;
  --on-background: #f3eef0;
  --on-surface-muted: #a39a9e;
  --premium: #e8a33d;
  --on-premium: #140d04;
  --premium-soft: #241a0e;
  --error: #ff6369;
  --success: #3dd68c;
  --card-border: transparent;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 23px;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; color: var(--on-background); }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.25em; }
/* Design system focus-ring: a 2px gap in the background colour, then a 2px onBackground ring. */
:focus-visible { outline: 2px solid var(--on-background); outline-offset: 2px; }
::selection { background: var(--primary-container); color: var(--on-primary); }

/* While the non-default language is being applied, hide the swap.
   The animation reveals the page anyway if site.js never runs. */
html[data-pending] main, html[data-pending] .site-header, html[data-pending] .site-footer {
  visibility: hidden;
  animation: dk-reveal 0s linear 1.2s forwards;
}
@keyframes dk-reveal { to { visibility: visible; } }

.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--space-4));
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-full);
  background: var(--primary-container); color: var(--on-primary); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }
[hidden] { display: none !important; }

/* ---------- Type (design system scale, a step up for the web) ---------- */
.t-display { font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.02em; }
.t-headline { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.t-title { font-size: 18px; line-height: 24px; font-weight: 700; }
.t-subtitle { font-size: 16px; line-height: 22px; font-weight: 700; }

/* ---------- Wordmark and mark ---------- */
/* Outlined logo (design-system/project/assets/Logo/logo-wordmark.svg): "drama" takes the ink, "ku" is always Rose. */
.wordmark { display: block; height: 22px; width: auto; flex: none; }
.wordmark-drama { fill: var(--on-background); }
.wordmark-ku { fill: var(--primary); }
.logo-mark { width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm); background: var(--primary-container); color: #ffffff; }

/* ---------- Buttons ---------- */
.dk-btn {
  appearance: none; border: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: 0 var(--space-6); border-radius: var(--radius-full);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: transform 100ms var(--ease-standard), filter 100ms var(--ease-standard);
}
.dk-btn:hover { filter: brightness(.95); }
.dk-btn:active { transform: scale(.97); }
.dk-btn svg { width: 20px; height: 20px; flex: none; }
.dk-btn--primary { background: var(--primary-container); color: var(--on-primary); }
.dk-btn--tonal { background: var(--surface-variant); color: var(--on-background); }
/* outline is too pale for a control border (design system): outline buttons use onSurfaceMuted */
.dk-btn--outline { background: transparent; color: var(--on-background); box-shadow: inset 0 0 0 1px var(--on-surface-muted); }
.dk-btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 13px; }
.dk-icon-btn {
  appearance: none; border: 0; margin: 0; cursor: pointer; font: inherit;
  width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--on-background);
}
.dk-icon-btn:hover { background: var(--surface-variant); }
.dk-icon-btn svg { width: 24px; height: 24px; }

/* Google Play button: Google's official badge artwork (assets/img/play-badge-<lang>.png, swapped with the language).
   The PNG carries Google's required clear space, so it is drawn larger than the visible badge. */
.store-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.play-badge { display: inline-block; margin: -12px -12px -12px -10px; border-radius: 12px; line-height: 0; }
.play-badge img { display: block; height: 80px; width: auto; }
.web-badge { min-height: 56px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--background);
  border-bottom: 1px solid var(--outline);
}
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2);
  min-height: var(--top-bar-height);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch-min); margin-right: auto;
  text-decoration: none; border-radius: var(--radius-sm);
}
.topbar-actions { display: flex; align-items: center; gap: var(--space-1); }
.lang-btn { min-width: var(--touch-min); padding: 0 var(--space-3); }

.site-nav { order: 3; flex-basis: 100%; }
.site-nav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0 0 var(--space-2); padding: 0; overflow-x: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-full); color: var(--on-background); text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.site-nav a:hover { background: var(--surface-variant); }
.site-nav a[aria-current="page"] { background: var(--primary-container); color: var(--on-primary); }

@media (min-width: 720px) {
  .site-nav { order: 0; flex-basis: auto; margin-right: auto; }
  .site-nav ul { margin: 0; }
  .brand { margin-right: var(--space-6); }
}

/* ---------- Main + sections ---------- */
main { flex: 1; padding: var(--space-8) 0 var(--space-16); }
main:focus { outline: none; }
.section { margin-top: var(--space-16); }
.section:first-child { margin-top: 0; }
.section-header { margin-bottom: var(--space-5); display: grid; gap: var(--space-2); max-width: 40em; }
.section-header p { color: var(--on-surface-muted); }

/* Hero */
.hero { display: grid; gap: var(--space-8); align-items: center; }
.hero__text { display: grid; gap: var(--space-5); justify-items: start; }
.hero__lede { font-size: 17px; line-height: 27px; color: var(--on-surface-muted); max-width: 34em; }
.hero__note { font-size: 13px; line-height: 18px; color: var(--on-surface-muted); }
.hero__shot { justify-self: center; width: min(280px, 72vw); margin: 0; }
.hero__shot img {
  display: block; width: 100%; height: auto; box-sizing: border-box;
  border: 8px solid var(--surface); border-radius: 36px; outline: 1px solid var(--outline);
  box-shadow: 0 24px 64px rgba(209, 46, 88, .22);
}
@media (min-width: 760px) {
  .hero { grid-template-columns: 1.35fr 1fr; gap: var(--space-12); }
  .hero .t-display { font-size: 46px; line-height: 52px; }
  .hero__shot { width: 300px; }
}


/* Cards */
.card-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dk-card {
  display: grid; align-content: start; gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-md); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--card-border);
}
.dk-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-full); margin-bottom: var(--space-2);
  display: grid; place-items: center; background: var(--surface-variant); color: var(--primary);
}
.dk-card__icon svg { width: 24px; height: 24px; }
.dk-card p { color: var(--on-surface-muted); font-size: 14px; line-height: 21px; }

/* Keys band: premium colour, never primary (design system) */
.keys-band {
  display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg); background: var(--premium-soft);
  box-shadow: inset 0 0 0 1px var(--premium);
}
.keys-band__head { display: grid; gap: var(--space-3); align-content: start; }
.keys-band__head p { color: var(--on-background); max-width: 30em; }
.keys-band__icon { width: 44px; height: 44px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--premium); color: var(--on-premium); }
.keys-band__icon svg { width: 24px; height: 24px; }
.keys-band ol { list-style: none; padding: 0; counter-reset: key; display: grid; gap: var(--space-3); }
.keys-band li { counter-increment: key; display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; }
.keys-band li::before {
  content: counter(key); width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--premium); color: var(--on-premium);
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.keys-band li span { padding-top: 5px; font-weight: 600; }
@media (min-width: 760px) { .keys-band { grid-template-columns: 1fr 1fr; padding: var(--space-8); align-items: center; } }

/* Callout */
.dk-callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--surface-variant); font-size: 14px; line-height: 21px;
}
.dk-callout svg { width: 20px; height: 20px; flex: none; color: var(--on-background); }
.dk-callout--warn { box-shadow: inset 3px 0 0 var(--premium); }

/* Contact block */
.contact-card {
  display: grid; gap: var(--space-3); justify-items: start;
  padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--card-border);
}
.contact-card p { color: var(--on-surface-muted); max-width: 38em; }
.contact-card .store-row { margin-top: var(--space-1); }
.email-link { font-weight: 700; color: var(--on-background); }

/* ---------- Prose (legal + help + about) ---------- */
.page-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); max-width: 44em; }
.page-head p { color: var(--on-surface-muted); }
.prose { max-width: 44em; display: grid; gap: var(--space-4); }
.prose h2 { font-size: 20px; line-height: 26px; font-weight: 700; margin-top: var(--space-6); scroll-margin-top: 140px; }
.prose h3 { font-size: 16px; line-height: 22px; font-weight: 700; margin-top: var(--space-2); }
.prose ul, .prose ol { display: grid; gap: var(--space-2); }
.prose dl { display: grid; gap: var(--space-3); margin: 0; }
.prose dt { font-weight: 700; }
.prose dd { margin: 0; color: var(--on-surface-muted); }

.legal-nav { margin-bottom: var(--space-6); }
.legal-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.dk-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-full); background: var(--surface-variant); color: var(--on-background);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.dk-chip[aria-current="page"] { background: var(--primary-container); color: var(--on-primary); }

/* Steps (delete account) */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-3); }
.prose .steps { gap: var(--space-3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; }
.steps li::before {
  content: counter(step); width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary-container); color: var(--on-primary);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps li span { padding-top: 5px; }

/* FAQ */
.faq { display: grid; gap: var(--space-2); max-width: 44em; }
.faq details { border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) var(--space-4); font-size: 16px; line-height: 22px; font-weight: 700;
  border-radius: var(--radius-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; transition: transform 200ms var(--ease-standard); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq__body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.faq__body a { font-weight: 700; }

/* Centered state (404, share) */
.dk-state { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding-top: var(--space-12); }
.dk-state p { color: var(--on-surface-muted); max-width: 30em; }
.dk-state__icon {
  width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center;
  background: var(--primary-container); color: #ffffff;
}
.dk-state__icon svg { width: 48px; height: 48px; }
.dk-state__icon--muted { background: var(--surface-variant); color: var(--on-surface-muted); }

/* Share landing */
.share-card {
  width: 100%; max-width: 440px; display: grid; justify-items: center; gap: var(--space-4);
  padding: var(--space-8) var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-border);
}
.share-actions { display: grid; gap: var(--space-3); width: 100%; max-width: 320px; }
.share-actions:not(:has(> :not([hidden]))) { display: none; }
.share-actions .dk-btn { width: 100%; }
.dk-state .share-status { color: var(--on-background); font-weight: 600; }
.share-status:empty { display: none; }
.share .store-row { justify-content: center; }
.share-note { font-size: 13px; line-height: 19px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--outline); padding: var(--space-8) 0 var(--space-6); font-size: 14px; line-height: 20px; }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; display: grid; gap: var(--space-2); align-content: start; }
.footer-brand p { color: var(--on-surface-muted); max-width: 28em; }
.site-footer h2 { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--on-surface-muted); margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; padding: 0; display: grid; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-background); text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.footer-legal { margin-top: var(--space-6); color: var(--on-surface-muted); font-size: 13px; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0s !important; }
}