/*
 * KomikID / KomiKu website styles.
 * Colour, type, spacing, radius and shadow values come from the KomikID
 * design system tokens (ds/komikid/tokens.json). KomikID uses the `komikid-*`
 * palette, KomiKu uses the `mono-*` palette (its app default; the KomiKu logo
 * has no hue). Theme follows the OS unless <html data-theme> overrides it.
 */

/* ---------- Tokens: KomikID light (default) ---------- */
:root {
  color-scheme: light;
  --background: #fefcfc;
  --surface: #f3edf0;
  --surface-variant: #e5cacf;
  --outline: #d9ccd4;
  --primary: #d32f30;
  --on-primary: #ffffff;
  --secondary: #4f6578;
  --on-secondary: #ffffff;
  --shimmer-base: var(--surface-variant);
  --shimmer-highlight: var(--surface);

  --on-background: #1d1b20;
  --on-surface-muted: #625e68;
  --success: #2e7d32;
  --warning: #e68900;
  --error: #b3261e;
  --scrim: #00000080;
  --premium: #1d1b20;
  --on-premium: #f2c14e;
  --premium-outline: #1d1b20;
  --shadow-1: 0 1px 2px #1d1b201f, 0 1px 3px #1d1b2014;
  --shadow-2: 0 4px 12px #1d1b201f, 0 2px 4px #1d1b2014;

  --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;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

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

/* KomiKu light: Monokrom palette */
:root[data-brand="komiku"] {
  --background: #ffffff;
  --surface: #f4f3f6;
  --surface-variant: #d8d6dc;
  --outline: #d9d6de;
  --primary: #1d1b20;
  --on-primary: #ffffff;
  --secondary: #6b6770;
  --on-secondary: #ffffff;
}

/* ---------- Dark: system preference unless forced light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #1d1b20;
    --surface: #2b292d;
    --surface-variant: #46292e;
    --outline: #3d3b3f;
    --primary: #ff6b6b;
    --on-primary: #111111;
    --secondary: #8aa1b5;
    --on-secondary: #111111;
    --shimmer-base: var(--surface);
    --shimmer-highlight: var(--surface-variant);
    --on-background: #eeecf1;
    --on-surface-muted: #9a96a1;
    --success: #66bb6a;
    --warning: #ffb74d;
    --error: #ff8a80;
    --scrim: #00000099;
    --premium: #2e2614;
    --premium-outline: #f2c14e80;
    --shadow-1: 0 1px 2px #00000066;
    --shadow-2: 0 4px 12px #00000080;
  }
  :root[data-brand="komiku"]:not([data-theme="light"]) {
    --background: #121214;
    --surface: #202022;
    --surface-variant: #3a3a3c;
    --outline: #333335;
    --primary: #f2f2f2;
    --on-primary: #111111;
    --secondary: #b0acb6;
    --on-secondary: #111111;
  }
}

/* ---------- Dark: forced by the theme toggle ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #1d1b20;
  --surface: #2b292d;
  --surface-variant: #46292e;
  --outline: #3d3b3f;
  --primary: #ff6b6b;
  --on-primary: #111111;
  --secondary: #8aa1b5;
  --on-secondary: #111111;
  --shimmer-base: var(--surface);
  --shimmer-highlight: var(--surface-variant);
  --on-background: #eeecf1;
  --on-surface-muted: #9a96a1;
  --success: #66bb6a;
  --warning: #ffb74d;
  --error: #ff8a80;
  --scrim: #00000099;
  --premium: #2e2614;
  --premium-outline: #f2c14e80;
  --shadow-1: 0 1px 2px #00000066;
  --shadow-2: 0 4px 12px #00000080;
}
:root[data-brand="komiku"][data-theme="dark"] {
  --background: #121214;
  --surface: #202022;
  --surface-variant: #3a3a3c;
  --outline: #333335;
  --primary: #f2f2f2;
  --on-primary: #111111;
  --secondary: #b0acb6;
  --on-secondary: #111111;
}

/* ---------- 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: 22px;
  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; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary); color: var(--on-primary); }

/* While a non-default brand or 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: kd-reveal 0s linear 1.2s forwards;
}
@keyframes kd-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);
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.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); color: var(--on-primary); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* Brand-dependent visibility */
html[data-ios="no"] .only-ios { display: none !important; }
[hidden] { display: none !important; }

/* Theme-dependent logo: on-light by default, on-dark in dark theme */
.logo--on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo--on-light { display: none; }
  :root:not([data-theme="light"]) .logo--on-dark { display: block; }
}
:root[data-theme="dark"] .logo--on-light { display: none; }
:root[data-theme="dark"] .logo--on-dark { display: block; }

/* ---------- Type styles (tokens) ---------- */
.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-lg { font-size: 20px; line-height: 26px; font-weight: 700; }
.t-title { font-size: 16px; line-height: 22px; font-weight: 700; }
.t-body-sm { font-size: 13px; line-height: 18px; }
.muted { color: var(--on-surface-muted); }

/* ---------- Buttons (kd-btn) ---------- */
.kd-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: 18px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: transform 100ms var(--ease-standard), filter 100ms var(--ease-standard);
}
.kd-btn:hover { filter: brightness(.96); }
.kd-btn:active { transform: scale(.97); filter: brightness(.94); }
.kd-btn svg { width: 20px; height: 20px; flex: none; }
.kd-btn--primary { background: var(--primary); color: var(--on-primary); }
.kd-btn--tonal { background: var(--surface); color: var(--on-background); }
.kd-btn--outline { background: transparent; color: var(--on-background); box-shadow: inset 0 0 0 1px var(--outline); }
.kd-btn--premium { background: var(--on-premium); color: #1d1b20; }
.kd-btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 13px; }
.kd-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);
}
.kd-icon-btn:hover { background: var(--surface); }
.kd-icon-btn svg { width: 24px; height: 24px; }

/* Store buttons */
.store-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store-btn { min-height: 56px; padding: 0 var(--space-6) 0 var(--space-5); gap: var(--space-3); text-align: left; }
.store-btn svg { width: 24px; height: 24px; }
.store-btn__text { display: grid; line-height: 16px; }
.store-btn__text small { font-size: 11px; font-weight: 600; opacity: .85; }
.store-btn__text b { font-size: 16px; line-height: 20px; font-weight: 700; }
.store-btn--play { background: var(--on-background); color: var(--background); }

/* ---------- Header (kd-topbar) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--background);
  border-bottom: 1px solid var(--outline);
}
.kd-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;
  color: var(--on-background); text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.kd-topbar__brand { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.03em; }
.kd-topbar__brand i { font-style: normal; color: var(--primary); }
.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; }
.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); }
.site-nav a[aria-current="page"] { background: var(--surface-variant); }

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

/* ---------- Main + sections ---------- */
main { flex: 1; padding: var(--space-8) 0 var(--space-12); }
main:focus { outline: none; }
.section { margin-top: var(--space-12); }
.section:first-child { margin-top: 0; }
.section-header { margin-bottom: var(--space-5); display: grid; gap: var(--space-1); }

/* Hero */
.hero { display: grid; gap: var(--space-6); align-items: center; }
.hero__text { display: grid; gap: var(--space-4); justify-items: start; }
.hero__lede { font-size: 17px; line-height: 26px; color: var(--on-surface-muted); max-width: 34em; }
.hero__note { font-size: 13px; line-height: 18px; color: var(--on-surface-muted); }
.hero__art {
  justify-self: center; width: min(280px, 72vw); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%; background: var(--surface);
}
.hero__art img { width: 78%; height: auto; }
@media (min-width: 720px) {
  .hero { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); }
  .hero .t-display { font-size: 44px; line-height: 50px; }
  .hero__art { width: 320px; }
}

/* 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--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kd-card {
  display: grid; align-content: start; gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--surface);
}
.kd-card__icon {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: var(--space-2);
  display: grid; place-items: center; background: var(--background); color: var(--primary);
}
.kd-card__icon svg { width: 24px; height: 24px; }
.kd-card p { color: var(--on-surface-muted); font-size: 14px; line-height: 20px; }

/* Premium band (kd-gate--premium look) */
.kd-gate--premium {
  display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--premium); color: var(--on-premium); box-shadow: inset 0 0 0 1px var(--premium-outline);
}
.kd-gate--premium h2 { color: var(--on-premium); }
.kd-gate--premium ul { display: grid; gap: var(--space-2); list-style: none; padding: 0; color: var(--on-premium); }
.kd-gate--premium li { display: flex; gap: var(--space-2); align-items: flex-start; }
.kd-gate--premium li svg { width: 20px; height: 20px; flex: none; color: var(--on-premium); margin-top: 1px; }
.kd-gate--premium p { color: var(--on-premium); }
@media (min-width: 720px) { .kd-gate--premium { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--space-8); } }

/* Callout (kd-callout) */
.kd-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); font-size: 14px; line-height: 20px;
}
.kd-callout svg { width: 20px; height: 20px; flex: none; margin-top: 0; color: var(--on-background); }
.kd-callout--warn { box-shadow: inset 3px 0 0 var(--warning); }

/* Badge (kd-badge) */
.kd-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs);
  font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: var(--surface-variant); color: var(--on-background);
}

/* Contact block */
.contact-card {
  display: grid; gap: var(--space-3); justify-items: start;
  padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface);
}
.contact-card p { color: var(--on-surface-muted); }
.email-link { font-weight: 700; color: var(--on-background); }

/* About split */
.split { display: grid; gap: var(--space-6); align-items: center; }
.split__art { justify-self: center; width: 180px; }
@media (min-width: 720px) { .split { grid-template-columns: 1fr 220px; } .split__art { width: 220px; } }

/* ---------- Prose (legal + help) ---------- */
.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 > :first-child { margin-top: 0; }
.prose h2 { font-size: 20px; line-height: 26px; font-weight: 700; margin-top: var(--space-6); scroll-margin-top: 120px; }
.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 strong { font-weight: 700; }
.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; }
.kd-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-full); background: var(--background); color: var(--on-background);
  box-shadow: inset 0 0 0 1px var(--outline); font-size: 14px; font-weight: 600; text-decoration: none;
}
.kd-chip[aria-current="page"] { background: var(--on-background); color: var(--background); box-shadow: none; }

/* Steps (delete account) */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; 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); 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); }
.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); color: var(--on-background); }
.faq__body a { font-weight: 700; }

/* Empty state (404) */
.kd-state { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding-top: var(--space-12); }
.kd-state img { width: 160px; height: auto; }
.kd-state p { color: var(--on-surface-muted); max-width: 28em; }

/* Share landing (share.html) */
.share-actions { display: grid; gap: var(--space-3); width: 100%; max-width: 360px; }
.share-actions:not(:has(> :not([hidden]))) { display: none; }
.kd-state .share-status { color: var(--on-background); font-weight: 600; }
.share-status:empty { display: none; }
.share .store-row { justify-content: center; }

/* ---------- 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; gap: 0; }
.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; }
}

/* ---------- Inspection deterrent (assets/js/deter.js sets data-deter) ---------- */
/* Legal pages keep their text selectable: people quote and copy it. */
[data-deter] main { -webkit-user-select: none; user-select: none; }
[data-deter] main .legal-nav ~ .page-head,
[data-deter] main .legal-nav ~ .prose { -webkit-user-select: text; user-select: text; }

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