/* Console.Matrix — /account/ shared styles.
   Self-contained on purpose: the marketing styles.css is 3 k lines and
   shipping it on a small auth page wastes bandwidth and pulls in rules
   tuned for the landing layout. The token palette mirrors :root in
   styles.css so the look stays continuous across the brand.

   Cross-device contract:
     * inputs use 16 px so iOS Safari does NOT auto-zoom on focus;
     * every clickable area is ≥ 44 px tall (Apple HIG / WCAG 2.5.5);
     * shell padding respects env(safe-area-inset-*) for iPhone notches;
     * background is FLAT — no big radial halos (matrix.site rule).
     * light theme: every green token collapses to charcoal #0a0a0a
       so cream-on-green is never unreadable. */

:root{
    color-scheme:dark;
    --bg:#040706;
    --bg-2:#070d09;
    --ink:#d6ffe1;
    --ink-dim:#7fb592;
    --green:#00ff85;
    --green-2:#00b85b;
    --green-soft:rgba(0,255,133,.12);
    --green-glow:rgba(0,255,133,.45);
    --red:#ff4060;
    --line:rgba(0,255,133,.22);
    --line-soft:rgba(0,255,133,.10);
    --card:rgba(8,18,12,.78);
    --input-bg:#070d09;
    --topbar-bg:rgba(4,7,6,.72);
    --primary-text:#031108;
    --radius:14px;
    --mono:"JetBrains Mono","Cascadia Mono",Consolas,Menlo,monospace;
    --display:"Orbitron","JetBrains Mono",sans-serif;
}

[data-theme="light"]{
    color-scheme:light;
    --bg:#f4ede0;
    --bg-2:#ede4d2;
    --ink:#0d0d0d;
    --ink-dim:#4a4a4a;
    /* `green` collapses to charcoal so accent text/icons stay legible on cream
       (matrix.site rule). The primary CTA still gets its own dark-on-cream
       look further down. */
    --green:#0a0a0a;
    --green-2:#0a0a0a;
    --green-soft:rgba(0,0,0,.05);
    --green-glow:rgba(0,0,0,.16);
    --line:rgba(0,0,0,.18);
    --line-soft:rgba(0,0,0,.09);
    --card:rgba(255,250,240,.92);
    --input-bg:#fbf6e8;
    --topbar-bg:rgba(239,232,216,.78);
    --primary-text:#efe8d8;
}

*{ box-sizing:border-box; }
html,body{
    margin:0; padding:0; background:var(--bg); color:var(--ink);
    font-family:var(--mono); min-height:100%;
    -webkit-text-size-adjust:100%;     /* don't auto-grow in landscape */
}
a{ color:var(--green); text-decoration:none; }
a:hover{ text-shadow:0 0 8px var(--green-glow); }
[data-theme="light"] a:hover{ text-shadow:none; text-decoration:underline; }

/* Flat backdrop. Matrix.site rule explicitly forbids big blurred radial
   halos behind sections; we honour it on the auth pages too. */
.bg-rain{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:var(--bg);
}

.topbar{
    position:sticky; top:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 22px;
    padding-left:max(22px, env(safe-area-inset-left));
    padding-right:max(22px, env(safe-area-inset-right));
    background:var(--topbar-bg);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; letter-spacing:.04em; color:var(--ink); }
.brand-prompt{ color:var(--green); text-shadow:0 0 12px var(--green-glow); }
[data-theme="light"] .brand-prompt{ text-shadow:none; }
.brand-text{ white-space:nowrap; }
.brand-text .dot{ color:var(--green); }
.topbar > a:not(.brand){ font-size:13px; }

.shell{
    min-height:calc(100vh - 52px); display:flex; align-items:center; justify-content:center;
    padding:32px 16px;
    padding-bottom:max(32px, env(safe-area-inset-bottom));
}
.card{
    width:100%; max-width:420px; background:var(--card);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 26px 22px;
    box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 22px rgba(0,255,133,.08);
}
[data-theme="light"] .card{
    box-shadow:0 14px 40px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
}
.card h1{
    margin:0 0 4px; font-family:var(--display); font-weight:700; font-size:22px;
    color:var(--ink); text-shadow:0 0 14px rgba(0,255,133,.18);
}
[data-theme="light"] .card h1{ text-shadow:none; }
.card .lead{ margin:0 0 18px; color:var(--ink-dim); font-size:13px; }

.oauth{ display:grid; gap:10px; margin-bottom:18px; }
.oauth button{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--input-bg); color:var(--ink); border:1px solid var(--line);
    border-radius:10px; padding:12px 14px; min-height:44px;       /* WCAG / Apple HIG touch target */
    font:600 14px var(--mono); line-height:1.2; cursor:pointer;
    transition:border-color .15s, box-shadow .15s, background .15s;
    -webkit-tap-highlight-color:transparent;
}
.oauth button:hover{ border-color:var(--green); box-shadow:0 0 14px rgba(0,255,133,.18); }
[data-theme="light"] .oauth button:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); }
.oauth button > span{
    /* Two-line wrapping is OK; never let text shove buttons off-screen on 320 px phones. */
    overflow-wrap:anywhere; min-width:0; text-align:center;
}
.oauth button svg{ width:18px; height:18px; flex:0 0 18px; }

.divider{ display:flex; align-items:center; gap:10px; color:var(--ink-dim); font-size:11px; margin:14px 0; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--line-soft); }

form{ display:grid; gap:10px; }
label{ font-size:12px; color:var(--ink-dim); }
input[type="text"], input[type="email"], input[type="password"]{
    width:100%; background:var(--input-bg); color:var(--ink);
    border:1px solid var(--line); border-radius:8px;
    padding:12px 12px;
    /* 16 px keeps iOS Safari from auto-zooming the page on focus. */
    font-family:var(--mono); font-size:16px; line-height:1.2;
    min-height:44px;
    -webkit-appearance:none; appearance:none;
    transition:border-color .15s, box-shadow .15s;
}
input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,255,133,.12); }
[data-theme="light"] input:focus{ box-shadow:0 0 0 3px rgba(0,0,0,.08); }

.btn-primary{
    margin-top:6px; padding:12px 14px; min-height:44px; cursor:pointer;
    background:linear-gradient(180deg, rgba(0,255,133,.92), rgba(0,184,91,.92));
    color:var(--primary-text); font:700 15px var(--mono); letter-spacing:.02em;
    border:1px solid rgba(0,255,133,.6); border-radius:10px;
    box-shadow:0 0 0 1px rgba(0,255,133,.2), 0 8px 22px rgba(0,255,133,.18);
    transition:transform .08s ease, box-shadow .15s;
    -webkit-tap-highlight-color:transparent;
}
[data-theme="light"] .btn-primary{
    background:linear-gradient(180deg,#1a1a1a,#000);
    border:1px solid rgba(0,0,0,.4);
    box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.18);
}
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(0,255,133,.35), 0 10px 28px rgba(0,255,133,.28); }
[data-theme="light"] .btn-primary:hover{ box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.22); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary[disabled]{ opacity:.6; cursor:wait; }

.foot{ margin-top:14px; text-align:center; color:var(--ink-dim); font-size:13px; }
.foot a{ color:var(--green); }

.alert{
    margin:0 0 14px; padding:10px 12px; border-radius:8px;
    border:1px solid rgba(255,64,96,.4); background:rgba(255,64,96,.08);
    color:#ffd4dc; font-size:13px; word-break:break-word;
}
[data-theme="light"] .alert{
    border-color:rgba(154,26,42,.4); background:rgba(154,26,42,.08);
    color:#5b0d18;
}
.alert.ok{
    border-color:rgba(0,255,133,.4); background:rgba(0,255,133,.08); color:var(--ink);
}
[data-theme="light"] .alert.ok{
    border-color:rgba(0,0,0,.3); background:rgba(0,0,0,.05); color:var(--ink);
}

.done-status{ font-size:14px; color:var(--ink-dim); margin:8px 0 0; }
.done-status code{ color:var(--green); }

/* Authed-already banner (login.html / signup.html on revisit). */
.authed{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 12px; margin:0 0 14px;
    border-radius:8px; border:1px solid var(--line);
    background:var(--green-soft); color:var(--ink); font-size:13px;
}
.authed .grow{ flex:1; min-width:0; }
.authed b{ color:var(--green); }
[data-theme="light"] .authed b{ color:#0a0a0a; }
.authed a{ color:var(--green); white-space:nowrap; }

/* Narrow viewports: tighten the card padding so 320 px phones still
   have room for two-word OAuth labels. */
@media (max-width:380px){
    .card{ padding:22px 18px 18px; }
    .topbar{ padding:12px 16px; }
    .brand-text{ font-size:14px; }
}