/* ── Scale-o-Tron Website ── */
/* Static HTML/CSS/vanilla JS. Mobile-first, renders full-width on desktop. */

:root {
    /* Neutral site palette (dark default) */
    --clr-bg:        #0d0d0d;
    --clr-surface:   #1a1a1a;
    --clr-card:      #1e1e1e;
    --clr-border:    #333;
    --clr-text:      #e8e8e8;
    --clr-muted:     #9a9a9a;
    --clr-header-bg: rgba(13,13,13,.85);
    --radius:        14px;
    --max-w:         860px;
    --font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* App accent colors — sampled from Scale-o-Tron's Assets.xcassets so the
       site's key colors match the calculator on-device. Light-appearance
       values; dark-appearance variants are applied under the dark-scheme
       block below. */
    --clr-success:  #34c759; /* SuccessGreen */
    --clr-operator: #66a6ff; /* OperatorKeyBackground */
    --clr-danger:   #ff3b30; /* DangerRed */
    --clr-warning:  #ffcc00; /* WarningYellow */
    --clr-neutral:  #8e8e93; /* NeutralKeyBackground */

    --clr-accent:   var(--clr-success);
    --clr-accent2:  var(--clr-operator);
    --clr-warn:     var(--clr-warning);
}

/* ── Dark appearance variants (system default is dark for this site) ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --clr-success:  #59b059;
        --clr-operator: #578dd9;
        --clr-danger:   #ff453a;
        --clr-warning:  #ffd60a;
    }
}
:root[data-theme="dark"] {
    --clr-success:  #59b059;
    --clr-operator: #578dd9;
    --clr-danger:   #ff453a;
    --clr-warning:  #ffd60a;
}

/* ── Light appearance ── */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --clr-bg:        #f5f5f7;
        --clr-surface:   #fff;
        --clr-card:      #fff;
        --clr-border:    #d2d2d7;
        --clr-text:      #1d1d1f;
        --clr-muted:     #6e6e73;
        --clr-header-bg: rgba(245,245,247,.85);
    }
}
:root[data-theme="light"] {
    --clr-bg:        #f5f5f7;
    --clr-surface:   #fff;
    --clr-card:      #fff;
    --clr-border:    #d2d2d7;
    --clr-text:      #1d1d1f;
    --clr-muted:     #6e6e73;
    --clr-header-bg: rgba(245,245,247,.85);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

/* ── Layout ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
.container-wide { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

/* ── Header / Nav ── */
header {
    position: sticky; top: 0; z-index: 100;
    background: var(--clr-header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border);
}
nav {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1080px; margin: 0 auto; padding: .75rem 1.25rem;
    gap: .75rem;
}
nav .logo { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
nav .logo span { color: var(--clr-accent); }
nav ul { list-style: none; display: flex; gap: 1.25rem; flex-wrap: wrap; }
nav ul a { color: var(--clr-muted); font-size: .88rem; transition: color .2s; }
nav ul a:hover, nav ul a[aria-current="page"] { color: var(--clr-text); text-decoration: none; }

.nav-controls { display: flex; align-items: center; gap: .5rem; }

#theme-toggle {
    background: transparent; color: var(--clr-muted); border: 1px solid var(--clr-border);
    border-radius: 6px; padding: .3rem .55rem; font-size: .9rem; cursor: pointer;
    line-height: 1; transition: color .2s, border-color .2s;
    min-width: 44px; min-height: 36px;
}
#theme-toggle:hover { color: var(--clr-text); border-color: var(--clr-muted); }

#lang-switcher {
    background: transparent; color: var(--clr-muted); border: 1px solid var(--clr-border);
    border-radius: 6px; padding: .3rem .5rem; font-size: .82rem; cursor: pointer;
    min-height: 36px;
}
#lang-switcher:hover { color: var(--clr-text); border-color: var(--clr-muted); }

/* ── Hero ── */
.hero { text-align: center; padding: 4.5rem 1.25rem 3rem; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; color: var(--clr-accent); }
.hero .tagline { font-size: 1.1rem; color: var(--clr-muted); max-width: 560px; margin: 0 auto 2rem; }
.hero .cta { display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.hero-help-links { margin-top: 1rem; font-size: .92rem; color: var(--clr-muted); }
.hero-help-links a { font-weight: 600; }
.hero-help-links span { margin: 0 .5rem; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .75rem 1.5rem; border-radius: 10px; min-height: 44px;
    font-weight: 600; font-size: .95rem; transition: background .2s, transform .1s;
    border: none; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--clr-accent); color: #fff; }
.btn-primary:hover { background: #2db84e; }
.btn-secondary { background: var(--clr-card); color: var(--clr-text); border: 1px solid var(--clr-border); }
.btn-secondary:hover { background: var(--clr-border); }

/* Apple's "Download on the App Store" badge. Artwork is used unmodified;
   Apple asks for at least 40px height and clear space of a quarter of it. */
.appstore-badge { display: inline-block; line-height: 0; margin: 12px; transition: transform .1s; }
.appstore-badge:hover { transform: translateY(-1px); }
.appstore-badge img { height: 48px; width: auto; display: block; }

/* ── Sections ── */
section { padding: 3.5rem 0; }
section + section { border-top: 1px solid var(--clr-border); }
.section-title { font-size: 1.65rem; font-weight: 700; margin-bottom: .5rem; }
.section-subtitle { color: var(--clr-muted); margin-bottom: 2rem; max-width: 600px; }

/* ── Cards / Feature Grid ── */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { background: var(--clr-card); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 1.5rem; }
.card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.card p  { color: var(--clr-muted); font-size: .92rem; }
.card .icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; margin-bottom: .75rem;
}
.icon-success  { background: color-mix(in srgb, var(--clr-success) 18%, transparent); color: var(--clr-success); }
.icon-operator { background: color-mix(in srgb, var(--clr-operator) 18%, transparent); color: var(--clr-operator); }
.icon-warning  { background: color-mix(in srgb, var(--clr-warning) 22%, transparent); color: #a97a00; }
@media (prefers-color-scheme: dark) { .icon-warning { color: var(--clr-warning); } }
:root[data-theme="dark"] .icon-warning { color: var(--clr-warning); }

/* ── FAQ / Accordion ── */
details { border-bottom: 1px solid var(--clr-border); }
details summary { padding: 1rem 0; cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; color: var(--clr-accent); font-weight: 700; }
details[open] summary::before { content: "− "; }
details .answer { padding: 0 0 1rem; color: var(--clr-muted); font-size: .92rem; line-height: 1.7; }

/* ── Guide steps ── */
.step { display: flex; gap: 1.25rem; margin-bottom: 2rem; align-items: flex-start; }
.step-number {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--clr-accent); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: .92rem;
}
.step-content h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.step-content p  { color: var(--clr-muted); font-size: .92rem; }

/* ── Footer ── */
footer { margin-top: 2rem; border-top: 1px solid var(--clr-border); padding: 2rem 0; text-align: center; color: var(--clr-muted); font-size: .82rem; }
footer .footer-links { margin-bottom: .75rem; }
footer .footer-links a { color: var(--clr-muted); margin: 0 .6rem; }
footer .footer-links a:hover { color: var(--clr-text); }

/* ── Legal pages ── */
.legal { max-width: 700px; margin: 0 auto; }
.legal h2 { margin-top: 2rem; margin-bottom: .5rem; font-size: 1.2rem; }
.legal p, .legal li { color: var(--clr-muted); font-size: .92rem; line-height: 1.75; }
.legal ul { padding-left: 1.25rem; margin: .5rem 0; }

/* ── Changelog ── */
.release { margin-bottom: 2rem; }
.release h3 { font-size: 1.1rem; margin-bottom: .75rem; }
.release ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.release li { display: flex; gap: .6rem; align-items: flex-start; color: var(--clr-text); font-size: .93rem; }
.release .cat-icon { flex-shrink: 0; width: 22px; text-align: center; font-size: 1rem; line-height: 1.5; }
.cat-feature .cat-icon { color: var(--clr-warning); }
:root:not([data-theme="dark"]) .cat-feature .cat-icon { color: #a97a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cat-feature .cat-icon { color: var(--clr-warning); } }
:root[data-theme="dark"] .cat-feature .cat-icon { color: var(--clr-warning); }
.cat-bugfix .cat-icon { color: var(--clr-operator); }

/* ── Utilities ── */
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Responsive ── */
@property --nav-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --nav-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes nav-edge-fade {
    0% { --nav-fade-start: 0px; --nav-fade-end: 32px; }
    10%, 90% { --nav-fade-start: 32px; --nav-fade-end: 32px; }
    100% { --nav-fade-start: 32px; --nav-fade-end: 0px; }
}
@media (max-width: 640px) {
    /* Two-row header: logo + controls on top, links on their own scrollable row. */
    nav { flex-wrap: wrap; row-gap: .5rem; }
    nav ul {
        order: 3; flex-basis: 100%;
        flex-wrap: nowrap; justify-content: space-between; gap: .9rem;
        overflow-x: auto; white-space: nowrap;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    nav ul::-webkit-scrollbar { display: none; }
    /* Edge fade hints that the link row scrolls. Driven by the row's own scroll
       position, so it only appears when the links overflow (the timeline is
       inactive otherwise) and each edge clears once scrolled to that end. */
    @supports (animation-timeline: scroll()) {
        nav ul {
            -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--nav-fade-start), #000 calc(100% - var(--nav-fade-end)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--nav-fade-start), #000 calc(100% - var(--nav-fade-end)), transparent);
            animation: nav-edge-fade linear both;
            animation-timeline: scroll(self inline);
        }
    }
    nav ul a { font-size: .85rem; }
    .hero { padding: 3rem 1rem 2rem; }
    .step { flex-direction: column; gap: .5rem; }
}