/* ==========================================================================
   Kwahisa mobile app — the Mobile Ring design system.
   Source of truth: Kwahisa Mobile Ring.dc.html (newest revision).
   §3 of the redesign brief: every colour, radius and size in the app comes
   from THIS token block. No literal hex anywhere else.
   ========================================================================== */

:root {
    /* Surfaces */
    --bg-void: #05070a;
    --bg-app: #0b111b;
    --bg-raised: #141f2e;
    --bg-sunken: #0e1622;
    --bg-elevated: #182434;

    /* Text */
    --fg: #e9eff8;
    --fg-muted: #7e8da0;
    --fg-faint: #54627a;
    --fg-soft: #cbd0d6;

    /* Module accents — one per module, never reassigned */
    --acc-money: #34b39a;
    --acc-biashara: #e6b23c;
    --acc-kampuni: #4d8ef0;
    --acc-vicoba: #ef8236;
    --acc-invest: #57c98a;
    --acc-gigs: #e06aa6;
    --acc-community: #8b7cf0;
    --acc-academy: #4dc7d6;
    --acc-more: #7e8da0;
    --acc-home: #9fb2cd;

    /* Brand & semantic */
    --brand: #ffa458;
    --brand-deep: #ef8236;
    --brand-gradient: linear-gradient(150deg, #ffa458, #ef8236);
    --positive: #34b39a;
    --positive-soft: #8fd9b0;
    --negative: #ff6b6b;
    --warning: #e6b23c;

    /* Strokes, fills, shadows */
    --hairline: 1px solid rgba(255, 255, 255, .08);
    --hairline-2: 1px solid rgba(255, 255, 255, .1);
    --hairline-strong: 1px solid rgba(255, 255, 255, .14);
    --shadow-card: 0 6px 16px rgba(0, 0, 0, .35);
    --shadow-float: 0 10px 26px rgba(0, 0, 0, .5);
    --shadow-hub: 0 10px 26px rgba(239, 130, 54, .4);
    --scrim: rgba(5, 8, 13, .55);
    --arc-stroke: rgba(255, 164, 88, .22);
    --detent-stroke: rgba(255, 255, 255, .4);
    --pill-chip-bg: rgba(255, 255, 255, .05);
    --well: rgba(255, 255, 255, .03);
    --label-pill-bg: rgba(0, 0, 0, .5);
    --home-bar: rgba(255, 255, 255, .25);

    /* Radii */
    --r-card: 16px;
    --r-inner: 14px;
    --r-tile: 10px;
    --r-pill: 20px;
    --r-track: 3px;

    /* Type */
    --font-ui: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ==========================================================================
   §4 — the shell. One fixed frame, one scrolling region, nothing selects,
   nothing zooms, no scrollbars, safe areas respected.
   ========================================================================== */

* { box-sizing: border-box; }
::-webkit-scrollbar { display: none; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg-void);
    scrollbar-width: none;
}

body {
    font-family: var(--font-ui);
    color: var(--fg);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
}

/* Genuinely copyable values re-enable selection */
.selectable { user-select: text; -webkit-user-select: text; }

/* Focus rings for keyboards only */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

button { font-family: inherit; border: 0; background: none; color: inherit; padding: 0; }

/* --- Top bar ----------------------------------------------------------- */
#topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 14px;
    border-bottom: var(--hairline);
    z-index: 10;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-hex {
    width: 22px; height: 22px; display: inline-block;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, #ffa458, #ef8236);
}
.brand-word { font-size: 14px; font-weight: 700; color: var(--fg); letter-spacing: -.01em; }
#chip {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acc-home);
    background: var(--pill-chip-bg);
    border: var(--hairline-2);
    padding: 5px 10px;
    border-radius: var(--r-pill);
    transition: color .24s ease;
}

/* --- The one scrolling region ------------------------------------------ */
#stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 18px 18px 140px;
    /* The prototype's scroll region starts 10px below the top bar
     * (content pinned at 92px inside the phone; bar ends at 82). */
    margin-top: 10px;
}

/* Screen change: the prototype animates the whole screen container once
 * (kwRise .35s ease both). Per-card animations are NOT used: a filled
 * card animation's transform would permanently beat .pressable:active,
 * killing the press-depress. .rise stays in markup as an inert marker. */
.screen { display: flex; flex-direction: column; gap: 14px; animation: kwRise .35s ease both; }
@keyframes kwRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kwPillFade { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes kwFade { from { opacity: 0; } to { opacity: 1; } }

/* --- Shared patterns (§6) ---------------------------------------------- */
.card {
    background: var(--bg-raised);
    border: var(--hairline);
    border-radius: var(--r-card);
    padding: 14px;
}
.card-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-raised);
    border: var(--hairline);
    border-radius: var(--r-inner);
    padding: 13px 14px;
}
.pressable { transition: transform 120ms ease, background 120ms ease; cursor: pointer; }
.pressable:active { transform: scale(.97); background: var(--bg-elevated); }

.microlabel {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.hero-num {
    font-size: 30px; font-weight: 800; color: var(--fg);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile-num { font-size: 15px; font-weight: 700; color: var(--fg); margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-num-big { font-size: 17px; font-weight: 800; color: var(--fg); margin-top: 6px; font-variant-numeric: tabular-nums; }

.track { height: 6px; border-radius: var(--r-track); background: var(--bg-sunken); overflow: hidden; }
.track-fill { height: 100%; border-radius: var(--r-track); background: var(--brand); }

.chev { color: var(--fg-faint); font-size: 14px; }
.icon-chip {
    width: 34px; height: 34px; border-radius: var(--r-tile);
    display: grid; place-items: center; font-size: 15px; flex: 0 0 auto;
}
.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.row-title { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.row-sub { font-size: 11px; color: var(--fg-muted); }
.mono-val { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); }
.band-chip {
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .04em;
    padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.info-card { border-radius: var(--r-inner); padding: 13px 14px; font-size: 11.5px; line-height: 1.55; }
.screen-h1 { font-size: 18px; font-weight: 800; color: var(--fg); }
.tab-row { display: flex; gap: 18px; border-bottom: var(--hairline); padding-bottom: 2px; }
.tab {
    font-size: 13px; font-weight: 700; color: var(--fg-muted);
    padding-bottom: 9px; border-bottom: 2px solid transparent; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: color .24s ease, border-color .24s ease;
}
.tab.on { color: var(--fg); }

.empty-state { font-size: 12px; line-height: 1.6; color: var(--fg-faint); padding: 6px 2px; }
.loading-line { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--fg-faint); }

/* --- Ring (§5) ---------------------------------------------------------- */
#ring-backdrop {
    position: fixed; inset: 0; z-index: 40;
    background: var(--scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity .28s ease;
    touch-action: none;
}
#ring-svg { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
#ring-readout {
    position: fixed; left: 50%; transform: translateX(-50%);
    z-index: 42; text-align: center; pointer-events: none; width: 260px;
}
.readout-name { font-size: 17px; font-weight: 800; }
.readout-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--fg-muted); margin-top: 3px; }
.readout-idle { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--fg-faint); }

.ring-mod {
    position: fixed; width: 56px; height: 56px; z-index: 43;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ring-disc {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--bg-raised);
    border: var(--hairline-strong);
    box-shadow: var(--shadow-card);
    display: grid; place-items: center;
}
.ring-name {
    font-size: 9.5px; font-weight: 700; color: var(--fg);
    background: var(--label-pill-bg);
    padding: 2px 7px; border-radius: 8px; white-space: nowrap;
}

#coachmark {
    position: fixed; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
    color: var(--fg);
    background: var(--bg-raised);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 8px 13px; border-radius: var(--r-pill);
    white-space: nowrap; z-index: 41;
    animation: kwPillFade .3s ease both;
}

#hub-wrap {
    position: fixed; bottom: calc(28px + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%); z-index: 44;
}
#hub {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--brand-gradient);
    display: grid; place-items: center;
    box-shadow: var(--shadow-hub);
    touch-action: none;
    cursor: pointer;
}
#hub svg { transition: transform .25s ease; }

/* --- Login gate (owner directive: log in first, then the app) ----------- */
#gate {
    position: fixed; inset: 0; z-index: 60;
    background: var(--bg-app);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: kwFade .3s ease both;
}
.gate-box { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gate-hex {
    width: 48px; height: 48px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--brand-gradient);
    margin-bottom: 4px;
}
.gate-word { font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: .4em; color: var(--fg); margin-left: .4em; }
.gate-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--fg-muted); margin-bottom: 10px; }
.gate-input {
    width: 100%;
    padding: 13px 15px;
    background: var(--well);
    border: 1px solid rgba(255, 164, 88, .28);
    border-radius: 8px;
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: 13.5px;
    outline: none;
}
.gate-input:focus { border-color: rgba(255, 164, 88, .6); }
.gate-btn {
    width: 100%;
    padding: 14px;
    background: var(--brand-gradient);
    color: var(--bg-app);
    font-family: var(--font-mono);
    font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
    border-radius: 8px; text-align: center; cursor: pointer;
    transition: transform 120ms ease;
}
.gate-btn:active { transform: scale(.97); }
.gate-err { font-family: var(--font-mono); font-size: 10.5px; color: var(--negative); min-height: 14px; }
.gate-note { font-size: 11px; color: var(--fg-faint); text-align: center; line-height: 1.6; }
.gate-note a { color: var(--brand); text-decoration: none; }

/* --- Sheet + toast (existing surfaces, re-tokened) ---------------------- */
#sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: var(--scrim); animation: kwFade .24s ease both; }
#sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    background: var(--bg-elevated);
    border-radius: var(--r-card) var(--r-card) 0 0;
    border-top: var(--hairline-2);
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    animation: kwSheetUp .3s ease both;
}
@keyframes kwSheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-title { font-size: 14px; font-weight: 800; color: var(--fg); margin-bottom: 12px; }
.sheet-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.sheet-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: var(--fg-muted); text-transform: uppercase; }
.sheet-input {
    padding: 12px 13px; background: var(--bg-sunken);
    border: var(--hairline-2); border-radius: var(--r-tile);
    color: var(--fg); font-family: var(--font-ui); font-size: 13px; outline: none;
}
.sheet-input:focus { border-color: rgba(255, 164, 88, .5); }
#toast {
    position: fixed; left: 50%; bottom: calc(112px + env(safe-area-inset-bottom));
    transform: translateX(-50%); z-index: 55;
    background: var(--bg-elevated); border: var(--hairline-2);
    color: var(--fg); font-size: 12px;
    padding: 10px 16px; border-radius: var(--r-pill);
    box-shadow: var(--shadow-float);
    animation: kwPillFade .3s ease both;
    max-width: 86vw; text-align: center;
}
.hidden { display: none !important; }

/* --- Reduced motion: near-zero durations, positional tracking intact ---- */
@media (prefers-reduced-motion: reduce) {
    .rise, .screen, #coachmark, #toast, #sheet, #sheet-backdrop, #gate { animation-duration: .01s !important; animation-delay: 0s !important; }
    #ring-backdrop, #chip, .tab, #hub svg { transition-duration: .01s !important; }
}