/* common.css — Assetry Editorial design system
   Replaces previous Plus Jakarta Sans theme. Editorial Mono aesthetic:
   Fraunces (display) + Geist (body) + Geist Mono (data) on marketing.
   Sans-only adaptation on app/dashboard pages: Fraunces is loaded but
   .editorial-display is opt-in — most app headings stay Geist for
   scannability. Class API preserved so existing markup keeps working. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

[data-theme="dark"] {
    --bg:#14130f; --bg-2:#1a1916;
    --fg:#f6f4ee; --fg-muted:#d7d4cb; --fg-subtle:#8b8881; --fg-faint:#5a5853;
    --paper:#14130f; --ink:#f6f4ee;
    --rule:rgba(246,244,238,0.10); --rule-strong:rgba(246,244,238,0.22);
    --border:rgba(246,244,238,0.10); --border-hover:rgba(246,244,238,0.20);
    --border-strong:rgba(246,244,238,0.32);
    --card:rgba(246,244,238,0.025); --card-hover:rgba(246,244,238,0.05);
    --nav-bg:rgba(20,19,15,0.78); --input-bg:rgba(246,244,238,0.04);
    --ring:rgba(246,244,238,0.28);
    --accent:#34d399;        /* desaturated emerald, single accent */
    --accent-soft:rgba(52,211,153,0.14);
    --accent-rule:rgba(52,211,153,0.35);
    --success:#34d399; --warn:#facc15; --danger:#f87171; --info:#60a5fa;
    --grain:rgba(246,244,238,0.04);
}
[data-theme="light"] {
    --bg:#f6f4ee; --bg-2:#ece9e0;
    --fg:#14130f; --fg-muted:#3a3833; --fg-subtle:#6b6862; --fg-faint:#8b8881;
    --paper:#f6f4ee; --ink:#14130f;
    --rule:rgba(20,19,15,0.10); --rule-strong:rgba(20,19,15,0.22);
    --border:rgba(20,19,15,0.10); --border-hover:rgba(20,19,15,0.22);
    --border-strong:rgba(20,19,15,0.32);
    --card:rgba(20,19,15,0.02); --card-hover:rgba(20,19,15,0.04);
    --nav-bg:rgba(246,244,238,0.85); --input-bg:rgba(20,19,15,0.03);
    --ring:rgba(20,19,15,0.30);
    --accent:#0e6b50;        /* deep emerald, the editorial ink accent */
    --accent-soft:rgba(14,107,80,0.10);
    --accent-rule:rgba(14,107,80,0.40);
    --success:#0e6b50; --warn:#a06c00; --danger:#b3261e; --info:#1d4ed8;
    --grain:rgba(20,19,15,0.04);
}

html { scroll-behavior:smooth; font-size:16px; }
body {
    background:var(--bg); color:var(--fg);
    font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:15px; line-height:1.6; letter-spacing:-0.005em;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
::selection { background:var(--accent); color:var(--bg); }

/* paper grain — subtle, fixed, pointer-events-none */
body::before {
    content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
    background-image:
        radial-gradient(var(--grain) 1px, transparent 1px),
        radial-gradient(var(--grain) 1px, transparent 1px);
    background-size:3px 3px, 7px 7px;
    background-position:0 0, 1px 2px;
    mix-blend-mode:multiply;
    opacity:0.45;
}

/* ---------- Typography utilities ---------- */
.editorial-display {
    font-family:'Fraunces', Georgia, serif;
    font-weight:300;
    letter-spacing:-0.035em;
    line-height:0.98;
    font-variation-settings:"opsz" 144;
}
.editorial-display em { font-style:italic; font-weight:400; color:var(--accent); }

.mono {
    font-family:'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--fg-subtle);
}
.serif { font-family:'Fraunces', Georgia, serif; font-weight:400; letter-spacing:-0.02em; }

/* ---------- Nav (hairline editorial bar, scroll-collapsible) ---------- */
nav {
    position:relative; z-index:40; background:var(--nav-bg);
    backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--rule); padding:0;
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    will-change:transform;
}
/* When the page is scrolled past the navbar, it detaches into a floating bar
   that auto-hides on scroll-down and slides back in on scroll-up. */
nav.nav-floating {
    position:fixed; top:0; left:0; right:0;
}
nav.nav-hidden { transform:translateY(-100%); }
nav .wrap {
    max-width:1320px; margin:0 auto; padding:1.25rem 2rem;
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
}
@media (max-width: 600px) { nav .wrap { padding:0.9rem 1.1rem; } }

/* nav-issue: right-side cluster holding language + theme controls */
.nav-issue {
    display:flex; align-items:baseline; gap:18px;
}

.theme-btn {
    background:none; border:none; padding:0;
    font-family:'Geist Mono', ui-monospace, monospace;
    font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--fg-subtle); cursor:pointer; line-height:1.4;
    transition:color 0.15s ease;
}
.theme-btn:hover { color:var(--fg); }

.nav-lang {
    background:none; border:none; padding:0;
    font-family:'Geist Mono', ui-monospace, monospace;
    font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--fg-subtle); cursor:pointer; line-height:1.4;
    transition:color 0.15s ease; outline:none;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.nav-lang:hover { color:var(--fg); }
.nav-lang option { background:var(--bg); color:var(--fg); text-transform:none; }
/* footer-internal nav: reset the global sticky-nav rule so footer
   link rows don't get sticky-positioned at the top of the viewport */
footer nav {
    position:static !important; background:transparent !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    border:none !important; padding:0 !important; z-index:auto !important;
}
nav a.brand {
    color:var(--fg); text-decoration:none;
    font-family:'Fraunces', Georgia, serif; font-weight:500;
    letter-spacing:-0.02em; font-size:1.25rem; line-height:1;
}
nav a.brand sup {
    font-family:'Geist Mono', monospace; font-size:0.65rem; font-weight:400;
    color:var(--fg-faint); margin-left:0.3rem; vertical-align:super;
    text-transform:uppercase; letter-spacing:0.06em;
}
.nav-right { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.nav-link {
    color:var(--fg-subtle); text-decoration:none; font-size:0.875rem;
    padding:0.25rem 0; border-radius:0; transition:color .15s ease;
    font-weight:400; position:relative; line-height:1.4;
}
.nav-link:hover { color:var(--fg); }
.nav-link.active { color:var(--fg); }
.nav-link.active::after {
    content:""; position:absolute; left:0; right:0; bottom:-0.55rem; height:2px;
    background:var(--accent);
}
.nav-badge {
    padding:0.1rem 0.45rem; border:1px solid var(--rule); border-radius:0;
    font-family:'Geist Mono', monospace; font-size:0.58rem; color:var(--fg-subtle);
    letter-spacing:0.08em; font-weight:400; text-transform:uppercase; line-height:1.5;
}

.ws-switcher {
    background:transparent; border:1px solid var(--rule); border-radius:0;
    padding:0.4rem 0.7rem; color:var(--fg);
    font-family:'Geist Mono', monospace; font-size:0.78rem; font-weight:400;
    cursor:pointer; min-width:170px;
    text-transform:uppercase; letter-spacing:0.06em;
    transition:border-color .15s ease;
}
.ws-switcher:hover { border-color:var(--border-hover); }
.ws-switcher:focus-visible { outline:1px solid var(--ring); outline-offset:2px; }

/* ---------- Layout ---------- */
main { max-width:1180px; margin:0 auto; padding:3.5rem 1.75rem 6rem; }

/* ---------- Page header (editorial eyebrow) ---------- */
.page-eyebrow {
    display:inline-flex; align-items:center; gap:0.5rem;
    color:var(--fg-subtle); font-family:'Geist Mono', monospace;
    font-size:0.7rem; font-weight:400;
    letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1rem;
}
.page-eyebrow::before {
    content:"—"; color:var(--accent); font-weight:500;
}

h1 {
    font-family:'Fraunces', Georgia, serif;
    font-size:clamp(2rem, 4.4vw, 3.25rem); font-weight:400;
    letter-spacing:-0.035em; line-height:1.02; margin-bottom:0.6rem;
}
h1 em { font-style:italic; font-weight:400; color:var(--accent); }

h2 {
    font-family:'Geist', sans-serif;
    font-size:1.05rem; font-weight:500; letter-spacing:-0.005em;
    margin-bottom:1rem; color:var(--fg);
}
h3 {
    font-family:'Geist', sans-serif;
    font-size:0.95rem; font-weight:500; letter-spacing:-0.005em; margin-bottom:0.4rem;
}
.lead {
    color:var(--fg-muted); margin-bottom:2.5rem; max-width:62ch;
    font-size:1.0625rem; line-height:1.55;
}

/* ---------- Cards (hairline-first, editorial) ---------- */
.card {
    border:1px solid var(--rule); border-radius:0;
    background:transparent;
    padding:1.6rem; margin-bottom:1rem;
    transition:border-color .18s ease, background-color .18s ease;
}
.card:hover { border-color:var(--border-hover); background:var(--card-hover); }
.card.flat:hover { border-color:var(--rule); background:transparent; }
.card.tappable { cursor:pointer; }
.card.tappable:hover { background:var(--card-hover); }
.card.tappable:active { transform:translateY(1px); }
.card-title { font-weight:500; font-size:0.98rem; letter-spacing:-0.005em; }
.card-meta {
    color:var(--fg-subtle); font-family:'Geist Mono', monospace;
    font-size:0.75rem; margin-top:0.25rem;
    letter-spacing:0.04em; text-transform:uppercase;
}
.card-row { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }

/* Stat / KPI card — editorial ledger style */
.kpi {
    border:0; border-top:1px solid var(--rule); border-radius:0;
    background:transparent;
    padding:1.5rem 1.4rem 1.4rem 0;
    transition:none;
}
.kpi:hover { background:transparent; }
.kpi-label {
    color:var(--fg-subtle); font-family:'Geist Mono', monospace;
    font-size:0.7rem; font-weight:400;
    letter-spacing:0.08em; text-transform:uppercase;
}
.kpi-value {
    font-family:'Fraunces', Georgia, serif;
    font-size:2.25rem; font-weight:400; letter-spacing:-0.04em;
    margin-top:0.5rem; line-height:1; font-variant-numeric:tabular-nums;
}
.kpi-value sup, .kpi-value .u {
    font-family:'Geist Mono', monospace; font-size:0.85rem;
    font-weight:400; color:var(--fg-subtle); margin-left:0.15rem; vertical-align:super;
}
.kpi-delta {
    font-family:'Geist Mono', monospace; font-size:0.72rem;
    color:var(--fg-subtle); margin-top:0.4rem;
    letter-spacing:0.04em;
}
.kpi-delta.up { color:var(--accent); }
.kpi-delta.down { color:var(--danger); }

/* ---------- Grids ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.grid-asym-7-5 { display:grid; grid-template-columns:7fr 5fr; gap:2rem; }
.grid-asym-5-7 { display:grid; grid-template-columns:5fr 7fr; gap:2rem; }
@media (max-width:880px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } .grid-asym-7-5, .grid-asym-5-7 { grid-template-columns:1fr; gap:1.25rem; } }
@media (max-width:600px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* hairline ledger — replaces 3-equal-card row clichés */
.ledger { display:grid; grid-template-columns:1fr; }
@media (min-width:760px) { .ledger.cols-3 { grid-template-columns:repeat(3,1fr); } .ledger.cols-4 { grid-template-columns:repeat(4,1fr); } }
.ledger > * {
    padding:1.4rem 1.5rem 1.4rem 0;
    border-top:1px solid var(--rule);
}
@media (min-width:760px) {
    .ledger.cols-3 > *, .ledger.cols-4 > * { border-top:0; border-left:1px solid var(--rule); padding:0 1.5rem; }
    .ledger.cols-3 > *:first-child, .ledger.cols-4 > *:first-child { border-left:0; padding-left:0; }
}

/* ---------- Forms ---------- */
label {
    display:block; color:var(--fg-subtle);
    font-family:'Geist Mono', monospace;
    font-size:0.7rem; font-weight:400;
    text-transform:uppercase; letter-spacing:0.08em;
    margin-bottom:0.5rem;
}
input[type=text], input[type=url], input[type=email], input[type=number], input[type=password],
input[type=datetime-local], input[type=tel], select, textarea {
    width:100%; padding:0.72rem 0; background:transparent;
    border:0; border-bottom:1px solid var(--rule); border-radius:0;
    color:var(--fg);
    font-family:'Geist', sans-serif; font-size:0.95rem; font-weight:400;
    transition:border-color .15s ease;
}
input::placeholder, textarea::placeholder { color:var(--fg-faint); font-weight:400; }
textarea { min-height:88px; resize:vertical; line-height:1.5; padding-top:0.5rem; }
input:hover, select:hover, textarea:hover { border-bottom-color:var(--border-hover); }
input:focus, select:focus, textarea:focus {
    outline:none; border-bottom-color:var(--accent); box-shadow:none;
}
select { cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:1.4rem;
    background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b8881' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 0.1rem center;
}

.field { display:grid; gap:0.4rem; margin-bottom:0.4rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px) { .field-row { grid-template-columns:1fr; } }

/* ---------- Buttons (editorial: rectilinear, no rounded corners) ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
    padding:0.78rem 1.4rem; border:1px solid var(--ink); border-radius:0;
    background:var(--ink); color:var(--paper);
    font-family:'Geist', sans-serif; font-size:0.875rem; font-weight:500;
    cursor:pointer; text-decoration:none; letter-spacing:-0.005em;
    transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
    user-select:none;
}
.btn:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:1px solid var(--ring); outline-offset:3px; }
.btn.ghost { background:transparent; color:var(--fg); border-color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--paper); }
.btn.subtle { background:transparent; color:var(--fg-subtle); border-color:var(--rule); }
.btn.subtle:hover { color:var(--fg); border-color:var(--border-hover); background:transparent; }
.btn.small { padding:0.5rem 0.95rem; font-size:0.78rem; }
.btn.danger { background:transparent; border-color:var(--danger); color:var(--danger); }
.btn.danger:hover { background:var(--danger); color:#fff; }
.btn[disabled], .btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.actions { display:flex; gap:0.7rem; flex-wrap:wrap; align-items:center; margin-top:1.4rem; }

/* legacy: preserve .btn.primary alias */
.btn.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.primary:hover { background:var(--accent); border-color:var(--accent); }

/* ---------- Rows / list items ---------- */
.row {
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    padding:0.95rem 0; border-bottom:1px solid var(--rule);
}
.row:last-child { border-bottom:none; }
.row .label {
    color:var(--fg-subtle); font-family:'Geist Mono', monospace;
    font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
    margin:0; font-weight:400;
}
.row .value { font-weight:500; font-size:0.92rem; font-family:'Geist Mono', monospace; }

/* ---------- Pills (square-edged tags, editorial) ---------- */
.pill {
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.18rem 0.55rem; border-radius:0;
    font-family:'Geist Mono', monospace; font-size:0.66rem;
    font-weight:400; text-transform:uppercase; letter-spacing:0.08em;
    border:1px solid var(--rule); color:var(--fg-subtle); background:transparent;
}
.pill.success, .pill.accent { color:var(--accent); border-color:var(--accent-rule); background:var(--accent-soft); }
.pill.warn { color:var(--warn); border-color:rgba(160,108,0,0.3); background:rgba(160,108,0,0.08); }
.pill.danger { color:var(--danger); border-color:rgba(179,38,30,0.3); background:rgba(179,38,30,0.06); }
.pill.muted { background:transparent; color:var(--fg-subtle); border-color:var(--rule); }

/* ---------- Empty state (gallery-style, hairline) ---------- */
.empty {
    border:1px solid var(--rule); border-radius:0;
    padding:3.5rem 1.5rem; text-align:left; color:var(--fg-subtle);
    background:transparent;
}
.empty-icon {
    width:40px; height:40px; margin:0 0 1.1rem;
    display:flex; align-items:center; justify-content:center;
    border-radius:0; background:transparent; color:var(--fg-subtle);
    border:1px solid var(--rule);
}
.empty-title {
    color:var(--fg); font-family:'Fraunces', Georgia, serif;
    font-weight:400; font-size:1.4rem; margin-bottom:0.5rem; letter-spacing:-0.02em;
}
.empty-body { font-size:0.95rem; max-width:46ch; margin:0 0 1.4rem; line-height:1.55; }

.muted { color:var(--fg-subtle); font-size:0.88rem; }

/* ---------- Banners (left-rule, no background flood) ---------- */
.banner {
    padding:1rem 1.2rem 1rem 1rem; border:0;
    border-left:2px solid var(--rule);
    margin-bottom:1.5rem; background:transparent;
    display:flex; gap:0.85rem; align-items:flex-start;
    font-size:0.92rem; color:var(--fg-muted);
}
.banner svg { flex-shrink:0; margin-top:0.15rem; opacity:0.85; }
.banner.success { border-left-color:var(--accent); color:var(--fg); }
.banner.warn { border-left-color:var(--warn); color:var(--fg); }
.banner.danger { border-left-color:var(--danger); color:var(--fg); }
.banner a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; font-weight:500; }

/* ---------- Footer ---------- */
footer {
    max-width:1320px; margin:0 auto; padding:2.5rem 1.75rem 3rem;
    border-top:1px solid var(--rule);
    display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:1rem;
    color:var(--fg-subtle); font-size:0.82rem;
}
footer .brand-mark {
    font-family:'Fraunces', Georgia, serif; font-size:1rem; font-weight:500;
    letter-spacing:-0.01em; color:var(--fg);
}
footer .brand-mark sup {
    font-family:'Geist Mono', monospace; font-size:0.55em; font-weight:400;
    color:var(--fg-faint); margin-left:0.3em; vertical-align:super;
    text-transform:uppercase; letter-spacing:0.06em;
}
footer a { color:var(--fg-subtle); text-decoration:none; transition:color .15s ease; margin-right:1.2rem; }
footer a:hover { color:var(--accent); }
footer .colophon {
    font-family:'Geist Mono', monospace; font-size:0.7rem; color:var(--fg-faint);
    width:100%; margin-top:1rem; letter-spacing:0.04em;
}

/* ---------- Avatar ---------- */
.avatar {
    width:40px; height:40px; border-radius:0;
    background:var(--ink);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Geist Mono', monospace; font-weight:500; font-size:0.78rem;
    color:var(--paper); letter-spacing:0; flex-shrink:0;
}

/* ---------- Skeleton ---------- */
@keyframes shimmer {
    0% { background-position:-200% 0; }
    100% { background-position:200% 0; }
}
.skeleton {
    border-radius:0; height:1rem; width:100%;
    background:linear-gradient(90deg,var(--card) 0%,var(--card-hover) 50%,var(--card) 100%);
    background-size:200% 100%; animation:shimmer 1.6s linear infinite;
}

/* ---------- Editorial section heading (used across pages) ---------- */
.section-head {
    display:grid; grid-template-columns:1fr; gap:1.5rem;
    margin:3rem 0 2rem;
}
@media (min-width:880px) {
    .section-head { grid-template-columns:200px 1fr; gap:3rem; align-items:baseline; }
}
.section-head .kicker {
    display:flex; flex-direction:column; gap:0.4rem;
    color:var(--fg-subtle);
}
.section-head .kicker .num {
    font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:300;
    font-size:2.5rem; color:var(--accent); line-height:1;
}
.section-head h2 {
    font-family:'Fraunces', Georgia, serif; font-weight:300;
    font-size:clamp(1.75rem, 3vw, 2.5rem); letter-spacing:-0.03em;
    line-height:1.05; margin:0; color:var(--fg);
}
.section-head h2 em { font-style:italic; font-weight:400; color:var(--accent); }

/* link in editorial body */
.link-ed {
    color:var(--fg); text-decoration:none;
    border-bottom:1px solid var(--fg);
    padding-bottom:2px; font-size:0.875rem;
    transition:color .15s ease, border-color .15s ease;
}
.link-ed:hover { color:var(--accent); border-bottom-color:var(--accent); }
.link-ed::after { content:" →"; }

/* ---------- Hairlines & dividers ---------- */
.hr-rule { border:0; border-top:1px solid var(--rule); margin:2rem 0; }
.hr-rule.strong { border-top-color:var(--rule-strong); }

/* ---------- Mobile ---------- */
@media (max-width:600px) {
    main { padding:2.25rem 1.1rem 4rem; }
    .row { flex-direction:column; align-items:flex-start; gap:0.35rem; }
    nav .wrap { padding:0.85rem 1.1rem; }
    .nav-right { gap:1rem; }
    .nav-link { font-size:0.85rem; }
    h1 { font-size:1.85rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
    html { scroll-behavior:auto; }
}