/* Franklin — Design System
   Paper (light) + Canvas (dark) themes
*/

:root {
  /* Paper (light) — default */
  --paper: #F5F0E6;
  --paper-light: #FBF8F1;
  --surface: #EBE4D3;
  --rule: #CEC5B3;
  --rule-soft: #E0D8C4;
  --ink: #1C1915;
  --secondary: #4A4436;
  --muted: #89806E;
  --hint: #B4AA94;
  --oxblood: #7A1C1C;
  --ink-blue: #1B3A5E;
  --forest: #0F5A3E;
  --rust: #A85B13;

  /* Dual-tone accent (flips in dark) */
  --bg: var(--paper);
  --bg-elev: var(--paper-light);
  --bg-surface: var(--surface);
  --text: var(--ink);
  --text-2: var(--secondary);
  --text-3: var(--muted);
  --accent-risk: var(--oxblood);
  --accent-link: var(--ink-blue);
  --accent-ok: var(--forest);
  --accent-warn: var(--rust);
  --badge-bg: var(--oxblood);
  --badge-fg: var(--paper);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  /* Type */
  --f-display: "Fraunces", "Noto Serif JP", "Times New Roman", serif;
  --f-body: "Source Serif 4", "Noto Serif JP", "Source Serif Pro", Georgia, serif;
  --f-ui: "Libre Franklin", "Noto Sans JP", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --tracking-caps: 0.12em;
  --tracking-micro: 0.08em;

  /* Radii */
  --r-card: 10px;
  --r-tile: 8px;
  --r-pill: 6px;
  --r-chip: 999px;
  --r-field: 8px;
  --r-btn: 8px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="canvas"] {
  --canvas: #070F1D;
  --bg: #070F1D;
  --bg-elev: #0F1E35;
  --bg-surface: #162A48;
  --rule: #243957;
  --rule-soft: #1C2F4B;
  --text: #F0E8D6;
  --text-2: #C4BCA6;
  --text-3: #7F91AC;
  --hint: #62748F;
  --accent-risk: #BE5C5C;
  --accent-link: #5E90D4;
  --accent-ok: #6DB084;
  --accent-warn: #DEAE52;
  --badge-bg: #DEAE52;
  --badge-fg: #070F1D;
  --btn-bg: #F0E8D6;
  --btn-fg: #070F1D;
}

* { box-sizing: border-box; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
body { overscroll-behavior-y: contain; }

img { max-width: 100%; display: block; }

::selection { background: var(--text); color: var(--bg); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 2px;
}

/* Shared layout */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.container-narrow {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px;
}
.container-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 480px) {
  .container, .container-wide, .container-narrow, .container-form {
    padding-left: 24px; padding-right: 24px;
  }
}
@media (min-width: 768px) {
  .container, .container-wide, .container-narrow, .container-form {
    padding-left: 48px; padding-right: 48px;
  }
}
@media (min-width: 1200px) {
  .container, .container-wide, .container-narrow, .container-form {
    padding-left: 96px; padding-right: 96px;
  }
}

section { padding: 120px 0; }
section.tight { padding: 80px 0; }
@media (max-width: 768px) {
  section { padding: 72px 0; }
  section.tight { padding: 56px 0; }
}
@media (max-width: 480px) {
  section { padding: 56px 0; }
  section.tight { padding: 40px 0; }
}

/* Safe-area helpers (notch / home indicator) */
.safe-top    { padding-top:    env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-left   { padding-left:   env(safe-area-inset-left); }
.safe-right  { padding-right:  env(safe-area-inset-right); }

/* Type */
.caps {
  font-family: var(--f-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 500;
  color: var(--text-3);
  font-size: 12px;
}
.caps-sm { font-size: 11px; }
.caps-md { font-size: 13px; }

.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--text);
  /* Section-level overrides set --display-size; clamp scales fluidly between mobile and that cap */
  font-size: clamp(28px, 4vw + 16px, var(--display-size, 48px));
  text-wrap: balance;
}

/* ─── Unified mobile heading scale ───────────────────────────────────
   On phones, every section h1/h2 lands at the same size for rhythm,
   and step-level h3 sits one notch below for hierarchy. Inline styles
   with clamp() get overridden here. */
@media (max-width: 768px) {
  .display,
  .hero-title-centered { font-size: 40px !important; line-height: 1.1 !important; }
  .step-h3 { font-size: 30px !important; line-height: 1.12 !important; }
  /* On mobile, hide hard-coded line breaks inside section titles so text-wrap:balance
     can flow the title naturally without orphaning a single trailing word. */
  .display br { display: none; }
  /* Title line system: on mobile both halves render inline so the heading flows
     as one balanced paragraph. On desktop each half is its own block (see below). */
  .display .title-line { display: inline; }
  .display .title-sep { display: inline; }
}
@media (min-width: 769px) {
  .display .title-line { display: block; }
  .display .title-sep { display: none; }
}
/* In JA there's never a space between the two halves — Japanese doesn't use
   inter-segment spaces and an extra space can push terminal punctuation to
   its own line. */
:root[lang="ja"] .display .title-sep { display: none !important; }

/* JA display headings are denser than EN at the same point size (each kanji
   fills ~1em), so they need a tighter mobile size to keep terminal punctuation
   from overflowing to its own line. */
@media (max-width: 768px) {
  :root[lang="ja"] .display,
  :root[lang="ja"] .hero-title-centered { font-size: 32px !important; }
}
@media (max-width: 480px) {
  :root[lang="ja"] .display,
  :root[lang="ja"] .hero-title-centered { font-size: 26px !important; }
}
@media (max-width: 360px) {
  :root[lang="ja"] .display,
  :root[lang="ja"] .hero-title-centered { font-size: 24px !important; }
}
@media (max-width: 480px) {
  .display,
  .hero-title-centered { font-size: 32px !important; }
  .step-h3 { font-size: 26px !important; }
}
@media (max-width: 360px) {
  .display,
  .hero-title-centered { font-size: 28px !important; }
  .step-h3 { font-size: 24px !important; }
}

/* ─── Japanese line-break safety ─────────────────────────────────────
   For display headings: word-break:keep-all stops the browser from
   breaking inside a CJK word (e.g. チーム, まで), while line-break:strict
   enforces kinsoku-shori so small kana (ァィゥェォャュョッー) never
   land at the start of a line. text-wrap:balance is dropped for JA so
   it doesn't override these constraints by trying to equalize line lengths. */
:root[lang="ja"] .display,
:root[lang="ja"] .step-h3,
:root[lang="ja"] .hero-title-centered {
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* Drop text-wrap balance/pretty for JA — both can orphan a single
     punctuation mark (。、) on its own line when keep-all is active. */
  text-wrap: wrap;
}
/* Body copy uses normal word-break so long Japanese paragraphs can still
   wrap, but keeps strict line-break for kinsoku-shori. */
:root[lang="ja"] .body-lg,
:root[lang="ja"] .reveal p,
:root[lang="ja"] .card p {
  line-break: strict;
  overflow-wrap: normal;
}

/* Belt-and-suspenders: apply kinsoku-shori everywhere in JA mode so small
   kana (ァィゥェォャュョッー) and terminal punctuation (。、) are never
   orphaned to the start of a line in pills, captions, list items, etc. */
:root[lang="ja"] body {
  line-break: strict;
}

.body-lg {
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-2);
}
.body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
}
@media (max-width: 480px) {
  .body-lg { font-size: 17px; }
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.italic { font-style: italic; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), filter 180ms var(--ease);
  background: var(--btn-bg);
  color: var(--btn-fg);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
@media (hover: hover) {
  .btn:hover { transform: scale(0.98); filter: brightness(0.92); }
}
.btn:active { transform: scale(0.96); filter: brightness(0.92); }
.btn.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}
@media (hover: hover) {
  .btn.secondary:hover { border-color: var(--text); filter: none; }
}
.btn.secondary:active { border-color: var(--text); filter: none; }
.btn.full { width: 100%; }
.btn svg { flex: none; }

/* Rule / divider */
.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
}
.rule-soft { background: var(--rule-soft); }

/* Pill / badge */
.badge {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--badge-bg);
  color: var(--badge-fg);
  line-height: 1;
}
.badge.soft {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
.badge.ok { background: var(--accent-ok); color: var(--bg); }
.badge.warn { background: var(--accent-warn); color: var(--bg); }
.badge.link-col { background: var(--accent-link); color: var(--bg); }

/* Card */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
}

@media (max-width: 768px) {
  .impact-card { padding: 20px 18px !important; }
  .impact-card.is-compact { padding: 16px 14px !important; }
  .impact-card-title { font-size: 22px !important; }
}
@media (max-width: 480px) {
  .impact-card { padding: 18px 14px !important; }
  .impact-card-title { font-size: 20px !important; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Nav link underline */
.nav-link {
  position: relative;
  font-family: var(--f-ui);
  font-size: 14px;
  color: var(--text);
  padding: 12px 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 4px; right: auto;
  bottom: 8px;
  height: 1px;
  width: 0;
  background: var(--text);
  transition: width 240ms var(--ease);
}
@media (hover: hover) {
  .nav-link:hover::after { width: calc(100% - 8px); }
}

/* Form */
.field-label {
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 6px;
}
.field {
  width: 100%;
  font-family: var(--f-ui);
  font-size: 16px; /* >=16px keeps iOS Safari from auto-zooming on focus */
  color: var(--text);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  padding: 14px 14px;
  outline: none;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field:focus {
  border-color: var(--accent-link);
  box-shadow: 0 0 0 1px var(--accent-link);
}
.field.error {
  border-color: var(--accent-risk);
  box-shadow: 0 0 0 1px var(--accent-risk);
}
textarea.field { resize: vertical; min-height: 64px; line-height: 1.5; }
select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--text-3) 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* KPI tile */
.kpi {
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
  padding: 16px 18px;
  background: var(--bg-elev);
}
.kpi .label {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.kpi .value {
  font-family: var(--f-mono);
  font-size: 22px;
  color: var(--text);
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .kpi { padding: 10px 12px; }
  .kpi .value { font-size: 16px; }
  .kpi .label { font-size: 9px; margin-bottom: 4px; }
}
.kpi .delta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
}
.kpi .delta.neg { color: var(--accent-risk); }
.kpi .delta.pos { color: var(--accent-ok); }

/* Data row (three stats sep by vertical rule) */
.data-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--rule);
  margin-top: 20px;
  border-radius: 0 0 var(--r-card) var(--r-card);
  overflow: hidden;
}
.data-row > div {
  padding: 16px 18px;
  border-right: 1px solid var(--rule);
}
.data-row > div:last-child { border-right: 0; }
.data-row .label {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.data-row .value {
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--text);
}
@media (max-width: 480px) {
  .data-row > div { padding: 12px 14px; }
  .data-row .value { font-size: 15px; }
}

/* Hover lift (personas) — hover on pointer devices, press feedback on touch */
.hover-lift {
  transition: transform 260ms var(--ease), border-color 260ms var(--ease);
  touch-action: manipulation;
}
@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-2px);
    border-color: var(--text-3);
  }
}
.hover-lift:active {
  transform: translateY(1px);
  border-color: var(--text-3);
  transition-duration: 120ms;
}

/* SVG stripe placeholder */
.placeholder {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--rule-soft) 0 1px,
      transparent 1px 10px
    ),
    var(--bg-elev);
  border: 1px dashed var(--rule);
  color: var(--text-3);
  font-family: var(--f-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 16px;
}

/* Scrollbar in canvas */
[data-theme="canvas"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="canvas"] ::-webkit-scrollbar-thumb {
  background: var(--rule); border-radius: 0;
}
[data-theme="canvas"] ::-webkit-scrollbar-track { background: transparent; }