/* ============================================================================
Eltrove "Desk" design system — the single shared stylesheet for the website.
Tokens are the EXACT app values (iOS Theme.swift). Every page links this file
instead of pasting its own token block, so the web can't drift from the app.
Fonts (load once per page in , before this file):
========================================================================== */
:root{
/* Palette — mirrors iOS Theme.swift exactly. */
--ink:#0A0A0B; /* Desk.ink — page background */
--panel:#111113; /* Desk.panel — cards */
--line:rgba(255,255,255,0.085); /* Desk.hairline */
--txt:#F2F0EA; /* Desk.txt — primary text */
--mut:#B4B0A8; /* Desk.mut — secondary text */
--dim:#5C5A55; /* deep-muted labels (web-only helper) */
--gold:#C9A227; /* Desk.gold */
--gold-lt:#E8C766; /* Desk.goldLt */
--up:#7FB58F; /* Desk.up (green) */
--dn:#C96A5A; /* Desk.dn (red) */
--serif:'Newsreader',Georgia,serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
--sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
--radius:2px; /* the whole system is sharp-cornered */
--tabbar-h:64px; /* mobile bottom tab bar height */
--maxw:1200px; /* desktop content max width */
--tap:44px; /* min touch target */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
background:var(--ink);color:var(--txt);
font-family:var(--sans);font-size:15px;line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;border-radius:var(--radius)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ── Typography helpers ──────────────────────────────────────────────────── */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.gold{color:var(--gold-lt)} .up{color:var(--up)} .dn{color:var(--dn)} .mut{color:var(--mut)} .dim{color:var(--dim)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.12}
.pg-title{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--txt)}
.pg-sub{font-size:14px;color:var(--mut);line-height:1.6;max-width:62ch;margin-top:8px}
/* ── Buttons (radius-2, gold-fill primary, panel outline) ────────────────── */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:var(--gold-lt);color:var(--ink);border:none;border-radius:var(--radius);cursor:pointer;
padding:12px 20px;min-height:var(--tap);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.btn-primary:hover{background:var(--gold)}
.btn-primary:disabled{opacity:.45;cursor:default}
.btn-out{display:inline-flex;align-items:center;justify-content:center;gap:7px;
background:var(--panel);color:var(--txt);cursor:pointer;padding:11px 16px;min-height:var(--tap);
border:1px solid var(--line);border-radius:var(--radius);
font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.btn-out:hover{border-color:rgba(201,162,39,0.45);color:var(--gold-lt)}
.btn-out.active{color:var(--gold-lt);border-color:rgba(201,162,39,0.5)}
.btn-out:disabled{opacity:.55;cursor:default}
.btn-mini{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--txt);background:var(--panel);
border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;min-height:36px;cursor:pointer}
.btn-mini:hover{color:var(--gold-lt)}
.btn-link{background:none;border:none;color:var(--gold-lt);font-family:var(--mono);font-size:11px;font-weight:500;
letter-spacing:.06em;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:5px}
/* ── Cards / chips / fields ──────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card + .card{margin-top:12px}
.chip{display:inline-flex;align-items:center;flex-shrink:0;padding:8px 13px;border:1px solid var(--line);
border-radius:var(--radius);background:var(--panel);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
color:var(--txt);cursor:pointer;white-space:nowrap;min-height:36px}
.chip:hover{border-color:rgba(201,162,39,0.45);color:var(--gold-lt)}
.chip.active{color:var(--gold-lt);border-color:rgba(201,162,39,0.5)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.field{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:0 14px}
.field input{flex:1;background:none;border:none;color:var(--txt);padding:13px 0;font-family:var(--sans);font-size:16px;outline:none;min-width:0}
.field input::placeholder{color:var(--dim)}
/* ── Plus crown badge (Canva-style paid marker), mirrors iOS PlusBadge ───── */
.plus-badge{display:inline-flex;align-items:center;gap:4px;color:var(--gold-lt);
font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;
padding:3px 7px;border:1px solid rgba(232,199,102,0.5);border-radius:999px}
/* The MEMBER mark. Same lockup, fill inverted: outlined = you can see it but not use
it, solid = it is yours. A crown means "locked", so it has to go once you own the
thing, but removing it and leaving bare text made a paid account look emptier than
a free one. This is the state that replaces it. Mirrors iOS PlusMemberBadge. */
.plus-member{display:inline-flex;align-items:center;gap:4px;color:var(--ink);
background:var(--gold-lt);font-family:var(--mono);font-size:9px;font-weight:600;
letter-spacing:.1em;padding:3px 8px;border-radius:999px;vertical-align:middle}
/* ── Empty state (mirrors iOS DeskEmptyState) ────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:40px 16px;color:var(--mut)}
.empty .empty-title{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--txt)}
.empty .empty-msg{font-size:13px;line-height:1.5;max-width:38ch}
/* ── Skeleton shimmer (mirrors iOS .shimmering) ──────────────────────────── */
.skeleton{position:relative;overflow:hidden;background:var(--line);border-radius:var(--radius)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);animation:sk 1.4s infinite}
@keyframes sk{100%{transform:translateX(100%)}}
/* ── Freshness chip ("Updated N min ago") ────────────────────────────────── */
.fresh{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mut)}
.fresh .dot{width:6px;height:6px;border-radius:50%;background:var(--up)}
.fresh.stale .dot{background:var(--gold)}
/* ── Layout: content wrapper ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
hr,.hairline{border:0;border-top:1px solid var(--line)}
/* ── Top masthead (marketing + shell) ────────────────────────────────────── */
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line)}
.mast .brand{font-family:var(--mono);font-size:13px;letter-spacing:.34em;color:var(--txt);text-transform:uppercase}
.mast .brand b{color:var(--gold);font-weight:600}
.mast nav{display:flex;align-items:center;gap:22px}
.mast nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.mast nav a:hover,.mast nav a.active{color:var(--gold-lt)}
/* ── Mobile bottom tab bar (hidden on desktop, shown < 860px) ─────────────── */
.tabbar{display:none}
.tabbar-spacer{display:none}
@media (max-width:860px){
.mast nav{display:none} /* desktop nav hides; bottom bar takes over */
.wrap{padding:0 16px}
.tabbar{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
background:rgba(17,17,19,0.96);backdrop-filter:blur(12px);
border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom); /* iPhone home-bar safe area */
}
.tabbar a{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-height:var(--tabbar-h);color:var(--mut);
font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.tabbar a.active{color:var(--gold-lt)}
.tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.tabbar-spacer{display:block;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
}
/* ── Desktop-only / mobile-only visibility helpers ───────────────────────── */
.only-mobile{display:none}
@media (max-width:860px){ .only-desktop{display:none} .only-mobile{display:revert} }