/* Italian and Japanese guides (tools/generate-international-guides.js) in the
   V5 look (2026-09-28). These pages have their own small markup (header,
   main.guide, footer) and do not load styles.css, so the site tokens are
   defined here; v5.css and v5-site.css provide the device frames. */

:root {
    --bg-primary: #08080d; --bg-secondary: #0e0e16; --bg-card: #14141e; --bg-card-hover: #1a1a28; --bg-elevated: #1e1e2c;
    --text-primary: #f0f0f5; --text-secondary: #9a9aab; --text-muted: #6a6a80;
    --accent: #f59e0b; --accent-light: #fbbf24; --accent-glow: rgba(245, 158, 11, 0.12);
    --border: rgba(255, 255, 255, 0.07); --border-light: rgba(255, 255, 255, 0.12);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    --ig-glow: rgba(245, 158, 11, 0.16); --ig-glow-2: rgba(99, 102, 241, 0.12);
    color-scheme: dark;
}
[data-theme="light"] {
    --bg-primary: #f8f8fb; --bg-secondary: #eeeef4; --bg-card: #ffffff; --bg-card-hover: #f4f4fa; --bg-elevated: #ffffff;
    --text-primary: #111118; --text-secondary: #55556a; --text-muted: #8a8a9a;
    --accent-glow: rgba(245, 158, 11, 0.1);
    --border: rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.12);
    --ig-glow: rgba(245, 158, 11, 0.14); --ig-glow-2: rgba(99, 102, 241, 0.08);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg-primary); color: var(--text-primary);
    font-family: var(--font); font-size: 17px; line-height: 1.7; overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
body::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 55% at 18% 0%, var(--ig-glow), transparent 70%),
        radial-gradient(50% 50% at 88% 8%, var(--ig-glow-2), transparent 70%);
}
a { color: var(--accent); }
img { max-width: 100%; height: auto; }

/* ---------- Top bar ---------- */
body > header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px max(24px, calc((100vw - 1180px) / 2)); padding-right: max(190px, calc((100vw - 1180px) / 2 + 170px));
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--border);
}
body > header a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 650; }
body > header a:hover { color: var(--text-primary); }
body > header .brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--text-primary); font-size: 19px; font-weight: 850; letter-spacing: -0.02em;
}
body > header .brand img { width: 34px; height: 34px; border-radius: 9px; }
/* Language flags, added by generate-french-site.js inside the bottom nav. */
nav[data-international-guides] .lang-switcher {
    position: fixed !important; top: 16px !important; right: max(20px, calc((100vw - 1180px) / 2)) !important; z-index: 11;
    gap: 4px !important;
}
nav[data-international-guides] .lang-switcher a { font-size: 20px; line-height: 1; padding: 4px; border-radius: 8px; text-decoration: none; }
nav[data-international-guides] .lang-switcher a:hover { background: var(--bg-card-hover); }

/* ---------- Guide ---------- */
main.guide { max-width: 860px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 24px 40px; }
.guide .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.guide .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.guide h1 {
    margin: 16px 0 20px; font-size: clamp(38px, 6vw, 68px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 900;
    text-wrap: balance; overflow-wrap: break-word;
    background: linear-gradient(95deg, var(--text-primary) 30%, var(--accent-light) 78%, #fde68a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0 .06em .14em .02em; margin-left: -.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[lang="ja"] .guide h1 { letter-spacing: 0; line-height: 1.25; font-size: clamp(32px, 5vw, 54px); }
.guide .lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; color: var(--text-secondary); margin: 0 0 22px; }
.guide .notice {
    margin: 0 0 26px; padding: 18px 22px; border-radius: 18px; font-size: 14.5px; line-height: 1.65; color: var(--text-secondary);
    background: var(--bg-card); border: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 44px rgba(0, 0, 0, 0.18);
}
.guide .buy {
    display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b 55%, #f97316); color: #1a1204;
    font-weight: 800; font-size: 16px; text-decoration: none;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.32); transition: transform .18s ease, box-shadow .18s ease;
}
.guide .buy:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.42); }
.guide section > .buy:last-child { margin-top: 26px; }
.guide h2 {
    margin: 64px 0 14px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 850;
    text-wrap: balance;
}
html[lang="ja"] .guide h2 { letter-spacing: 0; line-height: 1.35; }
.guide p, .guide li { color: var(--text-secondary); line-height: 1.85; }
.guide p { margin: 0 0 16px; }
.guide strong { color: var(--text-primary); }
.guide a:not(.buy) { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.guide ol, .guide ul { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: ig; }
.guide ol > li, .guide ul > li {
    position: relative; margin: 0 0 10px; padding: 14px 18px 14px 56px; border-radius: 16px;
    background: var(--bg-card); border: 1px solid var(--border);
}
.guide ol > li::before {
    counter-increment: ig; content: counter(ig);
    position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #1a1204;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.guide ul > li::before {
    content: ""; position: absolute; left: 24px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* Real LocoLink 2.0 screens, wider than the text column. */
.ig-band { width: min(1080px, calc(100vw - 32px)); margin: 44px 0 64px 50%; transform: translateX(-50%); }
.ig-band .v5-band-stage { margin-top: 0; }

/* ---------- Footer ---------- */
body > footer {
    max-width: 860px; margin: 40px auto 0; padding: 32px 24px 12px; border-top: 1px solid var(--border);
    color: var(--text-muted); font-size: 14px; text-align: center;
}
body > footer a { color: var(--text-secondary); text-decoration: none; }
body > footer a:hover { color: var(--text-primary); }
body > footer .languages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
body > footer .languages a {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); font-weight: 650;
}
nav[data-international-guides] { color: var(--text-muted); padding-bottom: 40px !important; }
nav[data-international-guides] > a { color: var(--text-secondary); text-decoration: none; }

@media (max-width: 640px) {
    body { font-size: 16px; }
    body > header { padding: 12px 16px; padding-right: 150px; }
    body > header a:not(.brand) { display: none; }
    nav[data-international-guides] .lang-switcher { top: 14px !important; right: 12px !important; gap: 0 !important; }
    nav[data-international-guides] .lang-switcher a { font-size: 18px; padding: 4px 3px; }
    main.guide { padding: 40px 16px 32px; }
    .guide ol > li, .guide ul > li { padding: 12px 14px 12px 48px; }
    .guide ol > li::before { left: 12px; top: 12px; }
    .guide ul > li::before { left: 20px; top: 24px; }
    /* Narrower, so the tilted phone stays inside the screen. */
    .ig-band { width: calc(100vw - 56px); margin: 32px 0 48px 50%; }
}