/* Nirantar. Mobile first, thumb first.
   Brand tokens match the rest of the OS: teal 367e83, cream faf9f5, yellow ffde59.
   Dark is not a nicety here. Half the taps happen at 6am and at 11pm. */

:root {
    --teal: #367e83;
    --teal-dim: #2b666a;
    --yellow: #ffde59;
    --ink: #2a2a2a;
    --muted: #5a5a5a;
    --faint: #8a8a8a;
    --bg: #faf9f5;
    --surface: #ffffff;
    --line: #e6e4dd;
    --good: #2f9e5f;
    --floor: #d9a021;
    --bad: #d5473f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);
    --r: 14px;
    --tap: 48px;

    /* Display stack for the commit screens. Real condensed faces ship on iOS and
       Android, so this gets athletic editorial type with zero network requests,
       which matters because the app has to render in airplane mode. */
    --display: "Helvetica Neue Condensed Bold", "HelveticaNeue-CondensedBold",
               "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow",
               "Helvetica Neue", system-ui, sans-serif;

    /* The commit screens are always dark, in both themes. Choosing your 75 days
       should not look like the settings page you tapped through to get here. */
    --ground: #14171a;
    --ground-2: #1b1f23;
    --ink-on-ground: #f4f2ec;
    --muted-on-ground: #8e968f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --teal: #4a9ea4;
        --teal-dim: #3d888d;
        --ink: #eceae4;
        --muted: #a8a49b;
        --faint: #7d7970;
        --bg: #16181a;
        --surface: #1e2124;
        --line: #2e3236;
        --good: #46b877;
        --floor: #e0ab35;
        --bad: #e2635a;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .2);
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Room for the tab bar plus the iPhone home indicator. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
}

.hidden { display: none !important; }

/* --- Header ------------------------------------------------------- */

header {
    position: sticky; top: 0; z-index: 20;
    background: var(--teal);
    color: #fff;
    padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
}
header h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
header .sub { margin: 2px 0 0; font-size: 13px; opacity: .85; }

.chips { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .14);
    border-radius: 10px; padding: 7px 11px;
    font-size: 12px; line-height: 1.25; white-space: nowrap;
}
.chip b { display: block; font-size: 17px; font-weight: 700; }
.chip.hero { background: var(--yellow); color: #2a2a2a; }

/* --- Layout ------------------------------------------------------- */

main { padding: 16px 14px 8px; max-width: 720px; margin: 0 auto; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 14px;
}
.card h2 {
    margin: 0 0 12px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em; color: var(--teal);
}
.card h2 .aside { float: right; text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 500; }

.empty { color: var(--muted); font-size: 14px; margin: 0; }

/* --- Tasks -------------------------------------------------------- */

.task { padding: 13px 0; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; padding-bottom: 0; }
.task:first-child { padding-top: 0; }

.task-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.task-label { font-weight: 600; font-size: 15px; }
.task-target { font-size: 12px; color: var(--faint); white-space: nowrap; }
.task-floor { font-size: 12px; color: var(--muted); margin-top: 3px; }

.states { display: flex; gap: 8px; margin-top: 10px; }
.states button {
    flex: 1; min-height: var(--tap);
    border: 1.5px solid var(--line); background: transparent; color: var(--muted);
    border-radius: 11px; font: 600 13px/1 inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    transition: background .12s, border-color .12s, color .12s;
}
.states button small { font-weight: 500; font-size: 10.5px; opacity: .8; }
.states button[aria-pressed="true"][data-state="done"]   { background: var(--good);  border-color: var(--good);  color: #fff; }
.states button[aria-pressed="true"][data-state="floor"]  { background: var(--floor); border-color: var(--floor); color: #2a2a2a; }
.states button[aria-pressed="true"][data-state="missed"] { background: var(--bad);   border-color: var(--bad);   color: #fff; }

.weekly {
    display: inline-block; margin-top: 8px; font-size: 12px;
    background: rgba(54, 126, 131, .12); color: var(--teal);
    padding: 4px 9px; border-radius: 8px; font-weight: 600;
}

/* --- Forms -------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }

input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
    width: 100%; min-height: var(--tap);
    padding: 11px 13px;
    border: 1.5px solid var(--line); border-radius: 11px;
    background: var(--bg); color: var(--ink);
    font: 16px inherit;  /* 16px stops iOS zooming on focus */
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }

.btn {
    min-height: var(--tap); width: 100%;
    border: 0; border-radius: 11px; cursor: pointer;
    background: var(--teal); color: #fff;
    font: 700 15px/1 inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { background: var(--teal-dim); }
.btn.accent { background: var(--yellow); color: #2a2a2a; }
.btn.ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--line); }
.btn.danger { background: transparent; color: var(--bad); border: 1.5px solid var(--bad); }
.btn:disabled { opacity: .5; }
.btn + .btn { margin-top: 10px; }

.msg { margin: 12px 0 0; padding: 11px 13px; border-radius: 10px; font-size: 14px; }
.msg.ok { background: rgba(47, 158, 95, .12); color: var(--good); }
.msg.err { background: rgba(213, 71, 63, .12); color: var(--bad); }

/* --- Stat blocks -------------------------------------------------- */

/* Four across on a phone. A set of four stats that wraps to 3 + 1 leaves an
   orphan on its own row and reads as a layout bug. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: var(--bg); border-radius: 11px; padding: 10px 4px; text-align: center; }
.stat b { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; }
.stat span { font-size: 10.5px; color: var(--faint); }

@media (max-width: 340px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}

.verdict { border-left: 4px solid var(--line); padding: 2px 0 2px 13px; margin-top: 12px; }
.verdict h3 { margin: 0 0 4px; font-size: 15px; }
.verdict p { margin: 0; font-size: 13.5px; color: var(--muted); }
.verdict.on_track, .verdict.cutting { border-color: var(--good); }
.verdict.recomp { border-color: var(--teal); }
.verdict.too_fast, .verdict.gaining, .verdict.gaining_fat { border-color: var(--bad); }
.verdict.stalled, .verdict.slow, .verdict.flat { border-color: var(--floor); }
.verdict.building, .verdict.mixed { border-color: var(--line); }

/* --- Heatmap ------------------------------------------------------ */

.heat { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; }
.heat i {
    aspect-ratio: 1; border-radius: 4px; background: var(--line);
    display: block; position: relative;
}
.heat i[data-s="complete"] { background: var(--good); }
.heat i[data-s="floor"]    { background: var(--floor); }
.heat i[data-s="partial"]  { background: rgba(213, 71, 63, .45); }
.heat i[data-s="missed"]   { background: var(--bad); }
.heat i[data-today="1"]    { outline: 2px solid var(--teal); outline-offset: 1px; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend em { width: 11px; height: 11px; border-radius: 3px; display: inline-block; font-style: normal; }

/* --- Charts ------------------------------------------------------- */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .raw { fill: var(--faint); opacity: .5; }
.chart .line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .band { fill: var(--teal); opacity: .07; }
.chart .line.alt { stroke: var(--floor); stroke-dasharray: 5 4; }
.chart text { fill: var(--faint); font-size: 10px; }
.chart text.k-weight { fill: var(--teal); font-weight: 700; }
.chart text.k-waist { fill: var(--floor); font-weight: 700; }

/* --- Photos ------------------------------------------------------- */

.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; border-radius: 10px; display: block; background: var(--bg); }
.photo-grid figcaption { font-size: 11.5px; color: var(--faint); margin-top: 5px; text-align: center; }

/* --- Habits ------------------------------------------------------- */

.habit { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.habit:last-child { border-bottom: 0; padding-bottom: 0; }
.habit .grow { flex: 1; min-width: 0; }
.habit .name { font-weight: 600; font-size: 15px; }
.habit .meta { font-size: 12px; color: var(--faint); }
.habit .count { font-size: 25px; font-weight: 700; color: var(--teal); line-height: 1; }
.habit .count small { display: block; font-size: 10px; color: var(--faint); font-weight: 500; }

/* --- Commit screen (setup) ----------------------------------------
   Dark, high contrast, editorial. The old version dumped every task of every
   pack as grey bullets, which made four packs impossible to compare and read
   like a settings form. This leads with a stance and an intensity, and keeps
   the task list behind a disclosure. Details on demand, decision up front. */

/* The commit screen bleeds edge to edge and takes over the whole viewport, so
   main's padding and the tab bar's reserved space both have to stand down. */
body.setup-mode { padding-bottom: 0; background: var(--ground); }
body.setup-mode main { padding: 0; max-width: none; }
body.setup-mode nav.tabs { display: none; }

.commit {
    background: var(--ground);
    color: var(--ink-on-ground);
    padding: calc(8px + env(safe-area-inset-top)) 0 calc(28px + env(safe-area-inset-bottom));
    min-height: 100vh;
    /* Fine grain, inline so nothing is fetched. Keeps a large flat dark field
       from looking like dead plastic. */
    background-image:
        radial-gradient(120% 60% at 50% 0%, rgba(54,126,131,.30) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* --- Hero --------------------------------------------------------- */

.hero { text-align: center; padding: 30px 22px 26px; position: relative; }

.hero .ring { width: 150px; height: 150px; margin: 0 auto; display: block; }
/* The name means unbroken. The arc closing on load is the whole idea, said
   once, in the only place it can be said without words. */
.hero .ring circle.track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 5; }
.hero .ring circle.arc {
    fill: none; stroke: var(--yellow); stroke-width: 5; stroke-linecap: round;
    stroke-dasharray: 339; stroke-dashoffset: 339;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    animation: close-ring 1.5s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes close-ring { to { stroke-dashoffset: 0; } }

/* Optically centred inside the ring, and sized to sit INSIDE it. At 92px the
   numerals broke past the stroke on both sides, which reads as a bug rather
   than as a deliberate overlap. */
.hero .ring-wrap { position: relative; width: 150px; margin: 0 auto; }
.hero .count {
    position: absolute; inset: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-size: 62px; font-weight: 700; line-height: 1;
    letter-spacing: -.02em;
    /* The cap-height of a condensed face sits high, so nudge down to look centred. */
    padding-top: 3px;
}

.hero h1 {
    font-family: var(--display);
    font-size: 30px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .10em; margin: 14px 0 0;
}
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero .lede {
    font-size: 14px; line-height: 1.5; color: var(--muted-on-ground);
    margin: 10px auto 0; max-width: 30ch;
}

.section-rule {
    display: flex; align-items: center; gap: 12px;
    margin: 26px 22px 14px;
    font-family: var(--display);
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .18em; color: var(--muted-on-ground);
}
.section-rule::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }

/* --- Pack cards --------------------------------------------------- */

.packs { padding: 0 14px; }

.pack-wrap {
    position: relative;
    background: var(--ground-2);
    border: 1.5px solid rgba(255,255,255,.09);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .18s, background .18s;
    opacity: 0; transform: translateY(14px);
    animation: deal .5s cubic-bezier(.22,1,.36,1) forwards;
}
.pack-wrap:nth-child(1) { animation-delay: .30s; }
.pack-wrap:nth-child(2) { animation-delay: .38s; }
.pack-wrap:nth-child(3) { animation-delay: .46s; }
.pack-wrap:nth-child(4) { animation-delay: .54s; }

.pack-wrap:has(.pack[aria-pressed="true"]) {
    border-color: var(--yellow);
    background: linear-gradient(180deg, rgba(255,222,89,.13), rgba(255,222,89,.04));
}
.pack-wrap:has(.pack[aria-pressed="true"])::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--yellow); z-index: 2;
}

/* The disclosure is its own control, full width, 52px tall, with a chevron.
   Previously a 12px underlined span inside the select button: a ~14px tap
   target, under half the 44px minimum, where a near miss selected the pack
   instead of expanding it. */
.pack-more {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 52px;
    padding: 0 16px;
    background: rgba(255,255,255,.035);
    border: 0; border-top: 1px solid rgba(255,255,255,.09);
    color: var(--muted-on-ground); font: inherit; font-size: 13px;
    cursor: pointer; text-align: left;
}
.pack-more:active { background: rgba(255,255,255,.07); }
.pack-more svg {
    width: 20px; height: 20px; flex: 0 0 20px;
    stroke: currentColor; fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .22s;
}
.pack-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.pack {
    position: relative; display: block; width: 100%; text-align: left;
    background: none; border: 0;
    padding: 16px 16px 14px;
    color: inherit; font: inherit; cursor: pointer;
}
/* Deal the cards in rather than dropping four identical blocks at once. */
@keyframes deal { to { opacity: 1; transform: translateY(0); } }

.pack .rec {
    position: absolute; top: 0; right: 0;
    background: var(--yellow); color: #1a1a1a;
    font-family: var(--display); font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 5px 10px 5px 12px; border-bottom-left-radius: 12px;
}

.pack .pname {
    font-family: var(--display);
    font-size: 26px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .01em; line-height: 1; margin: 2px 0 0;
    padding-right: 92px;
}
.pack .stance {
    font-size: 15px; font-weight: 500; color: var(--ink-on-ground);
    margin: 7px 0 0; opacity: .82;
}

.meter { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; }
.meter .bars { display: flex; gap: 3px; }
.meter i {
    width: 20px; height: 5px; border-radius: 2px;
    background: rgba(255,255,255,.13); display: block;
}
.meter i.on { background: var(--yellow); }
.meter .lab {
    font-family: var(--display); font-size: 10.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-ground);
}

.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chips-row span {
    font-family: var(--display); font-size: 11px; font-weight: 700;
    letter-spacing: .09em;
    background: rgba(255,255,255,.07); color: var(--ink-on-ground);
    border-radius: 6px; padding: 5px 8px; opacity: .9;
}

.pack .more {
    margin: 13px 0 0; padding: 0; border: 0; background: none;
    color: var(--muted-on-ground); font: inherit; font-size: 12.5px;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tasklist {
    margin: 0; padding: 14px 16px 16px; list-style: none;
    border-top: 1px solid rgba(255,255,255,.09);
    background: rgba(0,0,0,.18);
    font-size: 13px; color: var(--muted-on-ground);
}
.tasklist li { margin-bottom: 10px; line-height: 1.4; }
.tasklist li:last-child { margin-bottom: 0; }
.tasklist b { color: var(--ink-on-ground); font-weight: 500; display: block; }
.tasklist i {
    font-style: normal; display: block; font-size: 11.5px; opacity: .7; margin-top: 2px;
}

/* --- Miss policy: two cards, never a native dropdown --------------
   This is the most consequential choice in the app. It was a <select>. */

.policy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px; }
.policy button {
    background: var(--ground-2); border: 1.5px solid rgba(255,255,255,.09);
    border-radius: 14px; padding: 14px 12px; cursor: pointer;
    color: var(--ink-on-ground); font: inherit; text-align: left;
    transition: border-color .18s, background .18s;
}
.policy button[aria-pressed="true"] {
    border-color: var(--teal);
    background: linear-gradient(180deg, rgba(54,126,131,.24), rgba(54,126,131,.08));
}
/* Both are spans, so without display:block the label and the description run
   together on one line as "TRACK BOTH It gets recorded...". */
.policy .pt {
    display: block;
    font-family: var(--display); font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
.policy .pd {
    display: block;
    font-size: 12px; line-height: 1.45; color: var(--muted-on-ground); margin-top: 6px;
}

/* --- Onboarding controls ------------------------------------------ */

.onb { padding: 0 14px; }
.onb label { color: var(--muted-on-ground); }
.onb label .opt {
    font-weight: 500; text-transform: none; letter-spacing: 0;
    color: var(--faint); font-size: 11px;
}
.onb input[type=number] {
    background: var(--ground-2); border: 1.5px solid rgba(255,255,255,.09);
    color: var(--ink-on-ground);
}
.onb input:focus { border-color: var(--teal); outline-color: var(--teal); }
.onb .hint { font-size: 12px; line-height: 1.5; color: var(--muted-on-ground); margin: 8px 0 0; }

/* Segmented control. Big targets, no native select anywhere near a health input. */
.seg { display: flex; gap: 8px; }
.seg button {
    flex: 1; min-height: var(--tap);
    background: var(--ground-2); border: 1.5px solid rgba(255,255,255,.09);
    border-radius: 11px; color: var(--muted-on-ground);
    font-family: var(--display); font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
}
.seg button[aria-pressed="true"] {
    background: var(--yellow); border-color: var(--yellow); color: #16181a;
}

.stack { display: flex; flex-direction: column; gap: 8px; }
.stack button {
    text-align: left; min-height: var(--tap);
    background: var(--ground-2); border: 1.5px solid rgba(255,255,255,.09);
    border-radius: 12px; padding: 12px 14px; cursor: pointer;
    color: var(--ink-on-ground); font: inherit;
}
.stack button[aria-pressed="true"] {
    border-color: var(--teal);
    background: linear-gradient(180deg, rgba(54,126,131,.24), rgba(54,126,131,.08));
}
.stack .pt {
    display: block; font-family: var(--display); font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
.stack .pd { display: block; font-size: 12.5px; color: var(--muted-on-ground); margin-top: 3px; }

.onb input[type=range] {
    width: 100%; min-height: 44px; padding: 0; background: none; border: 0;
    accent-color: var(--yellow);
}

/* --- Compact date and length -------------------------------------- */

.when { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; padding: 0 14px; }
.when label {
    font-family: var(--display); font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-ground);
}
.when input {
    background: var(--ground-2); border: 1.5px solid rgba(255,255,255,.09);
    color: var(--ink-on-ground);
}
.when input:focus { border-color: var(--teal); outline-color: var(--teal); }

/* --- Commit button ------------------------------------------------ */

.commit-go { padding: 20px 14px 0; }
.btn-commit {
    width: 100%; min-height: 60px; border: 0; border-radius: 15px; cursor: pointer;
    background: var(--yellow); color: #16181a;
    font-family: var(--display); font-size: 21px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .10em;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 6px 0 #c9a92f, 0 12px 26px rgba(255,222,89,.18);
    transition: transform .1s, box-shadow .1s;
}
.btn-commit:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9a92f; }
.btn-commit:disabled { opacity: .55; box-shadow: none; }
.commit-go .fineprint {
    text-align: center; font-size: 12px; color: var(--muted-on-ground);
    margin: 12px 0 0; line-height: 1.5;
}
.commit .msg { margin: 12px 14px 0; }

/* --- Tab bar ------------------------------------------------------ */

nav.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
nav.tabs a {
    flex: 1; text-align: center; text-decoration: none;
    color: var(--faint); font-size: 10.5px; font-weight: 600;
    padding: 9px 2px 7px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
nav.tabs a.on { color: var(--teal); }
nav.tabs svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Offline banner ----------------------------------------------- */

#offline {
    position: fixed; left: 12px; right: 12px; z-index: 40;
    bottom: calc(70px + env(safe-area-inset-bottom));
    background: var(--ink); color: var(--bg);
    border-radius: 11px; padding: 11px 14px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    box-shadow: var(--shadow);
}
#offline b { background: var(--yellow); color: #2a2a2a; border-radius: 7px; padding: 2px 7px; font-size: 12px; }

.pending { opacity: .55; }

/* --- Login -------------------------------------------------------- */

/* Same dark editorial language as the commit screen, so the first two things
   you ever see belong to the same app. */
.auth {
    position: fixed; inset: 0; overflow-y: auto;
    background: var(--ground); color: var(--ink-on-ground);
    background-image:
        radial-gradient(110% 55% at 50% 0%, rgba(54,126,131,.34) 0%, transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 26px calc(40px + env(safe-area-inset-bottom));
    text-align: center;
}
.auth .inner { max-width: 360px; margin: 0 auto; width: 100%; }

.auth .ring { width: 96px; height: 96px; margin: 0 auto; display: block; }
.auth .ring circle.track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 6; }
.auth .ring circle.arc {
    fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 251; stroke-dashoffset: 251;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    animation: close-ring-sm 1.6s cubic-bezier(.22,1,.36,1) .2s forwards;
}
@keyframes close-ring-sm { to { stroke-dashoffset: 0; } }

.auth h1 {
    font-family: var(--display);
    font-size: 44px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .13em; margin: 20px 0 0; line-height: 1;
}
.auth .tagline {
    font-family: var(--display);
    font-size: 13px; font-weight: 700; letter-spacing: .28em;
    text-transform: uppercase; color: var(--yellow);
    margin: 12px 0 0;
}
.auth p { color: var(--muted-on-ground); font-size: 14px; margin: 26px 0 22px; }
.auth form { text-align: left; }
.auth .field { margin-bottom: 12px; }
.auth label {
    font-family: var(--display); font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-ground);
}
.auth input {
    background: var(--ground-2); border: 1.5px solid rgba(255,255,255,.10);
    color: var(--ink-on-ground); text-align: center;
}
.auth input:focus { border-color: var(--teal); outline-color: var(--teal); }
.auth .btn-commit { min-height: 54px; font-size: 17px; }
.auth-foot {
    text-align: center; font-size: 12.5px; color: var(--muted-on-ground);
    margin: 16px 0 0 !important;
}
.auth-foot a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 620px) {
    .heat { grid-template-columns: repeat(25, 1fr); }
}