/* Shared styles for the static guide pages (the app itself is styled in index.html). */
:root {
  --bg: #FFFDF5; --surface: #fff; --text: #000; --line: #000; --on-accent: #000; --dot: rgba(0, 0, 0, .85);
  --yellow: #FFD23F; --coral: #FF6B6B; --sky: #74B9FF; --green: #88D498; --orange: #FFA552; --lavender: #B8A9FA;
  --border: 3px solid var(--line); --border-thin: 2px solid var(--line);
  --shadow-sm: 3px 3px 0 0 var(--line); --shadow: 5px 5px 0 0 var(--line); --shadow-lg: 8px 8px 0 0 var(--line);
  --f-display: "Syne", "Archivo Black", Impact, sans-serif;
  --f-head: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "Space Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] { --bg: #141414; --surface: #242424; --text: #FFFDF5; --line: #FFFDF5; --dot: rgba(255, 253, 245, .28); color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #141414; --surface: #242424; --text: #FFFDF5; --line: #FFFDF5; --dot: rgba(255, 253, 245, .28); color-scheme: dark; }
}
* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; }
body { font: 17px/1.65 var(--f-body); color: var(--text); background: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-font-smoothing: antialiased; }
a { color: inherit; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.ic { width: 20px; height: 20px; flex: none; }

.top { display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: var(--surface); border-bottom: var(--border); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 20px var(--f-display); text-transform: uppercase; }
.brand img { width: 38px; height: 38px; box-shadow: var(--shadow-sm); }
.top .grow { flex: 1; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px; font: 700 15px var(--f-head); text-decoration: none;
  color: var(--on-accent); background: var(--yellow); border: var(--border); box-shadow: var(--shadow); transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--line); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.alt { background: var(--surface); color: var(--text); }

main { max-width: 860px; margin: 0 auto; padding: 36px max(18px, env(safe-area-inset-left)) 64px; }
.crumbs { font: 400 13px var(--f-mono); margin-bottom: 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; }
h1 { font: 800 clamp(32px, 5.4vw, 54px)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 18px; }
h1 mark { background: var(--yellow); color: var(--on-accent); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
h2 { font: 800 clamp(22px, 3vw, 30px)/1.1 var(--f-display); text-transform: uppercase; margin: 46px 0 12px; }
h3 { font: 700 19px/1.3 var(--f-head); margin: 26px 0 6px; }
.lead { font-size: 19px; }
article > p, article > ul, main > p { background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
.box { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 18px 22px; margin: 24px 0; }
.box.tip { border-left-width: 12px; border-left-color: var(--green); }
.box.warn { border-left-width: 12px; border-left-color: var(--orange); }
.box > :first-child { margin-top: 0; } .box > :last-child { margin-bottom: 0; }
ol.steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: 14px; }
ol.steps > li { counter-increment: s; position: relative; background: var(--surface); border: var(--border); box-shadow: var(--shadow-sm); padding: 14px 16px 14px 64px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--yellow); color: var(--on-accent); border: var(--border-thin); font: 800 18px var(--f-display); }
kbd { font: 700 13px var(--f-mono); padding: 1px 6px; border: 2px solid #000; background: var(--yellow); color: #000; }
code { font: 400 15px var(--f-mono); background: var(--surface); border: 1px solid var(--line); padding: 0 4px; }
.cta { margin: 40px 0; padding: 24px; background: var(--lavender); color: var(--on-accent); border: var(--border); box-shadow: var(--shadow-lg); }
.cta h2 { margin-top: 0; }
.cta .row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn.alt { background: #fff; color: #000; }
details { background: var(--surface); border: var(--border); box-shadow: var(--shadow-sm); margin: 12px 0; }
summary { cursor: pointer; padding: 12px 16px; font: 700 16px var(--f-head); }
details p { margin: 0; padding: 0 16px 14px; }
.related ul { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.related a { display: inline-block; padding: 8px 12px; background: var(--surface); border: var(--border); box-shadow: var(--shadow-sm); text-decoration: none; }

footer { border-top: var(--border); background: var(--surface); padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
footer .in { max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font: 400 12px var(--f-mono); }
footer .sig { display: flex; flex-wrap: wrap; gap: 10px; }
footer .sig a { padding: 6px 10px; border: 2px solid #000; color: #000; text-decoration: none; box-shadow: 3px 3px 0 0 var(--line); font: 700 12px var(--f-mono); }
footer .sig a:first-child { background: var(--sky); } footer .sig a:last-child { background: var(--coral); }
@media (max-width: 600px) { .top .btn span { display: none; } .brand span { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; transform: none; } }

/* language picker + right-to-left */
.langs select { font: 700 14px var(--f-head); color: var(--text); background: var(--surface); border: var(--border); box-shadow: var(--shadow-sm);
  padding: 8px 10px; min-height: 44px; max-width: 170px; cursor: pointer; }
:root:lang(ja) { --f-display: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; --f-head: var(--f-display); }
:root:lang(ko) { --f-display: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --f-head: var(--f-display); }
:root:lang(zh-Hans) { --f-display: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --f-head: var(--f-display); }
:root:lang(zh-Hant) { --f-display: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --f-head: var(--f-display); }
:root:lang(ar) { --f-display: "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --f-head: var(--f-display); --f-body: var(--f-display); }
:root:is(:lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant), :lang(ar)) :is(h1, h2) { letter-spacing: 0; }
[dir="rtl"] ol.steps > li { padding: 14px 64px 14px 16px; }
[dir="rtl"] ol.steps > li::before { left: auto; right: 14px; }
[dir="rtl"] .box.tip, [dir="rtl"] .box.warn { border-left-width: 3px; border-right-width: 12px; }
[dir="rtl"] .box.tip { border-right-color: var(--green); } [dir="rtl"] .box.warn { border-right-color: var(--orange); }
@media (max-width: 600px) { .langs select { max-width: 110px; } }