/* ==========================================================================
   Arcane Network
   Deep indigo ground, antique gold for emission, violet for boosts.
   Mobile-first: most of this audience arrives on a phone, on metered data.
   ========================================================================== */

:root {
    --ink:        #0E0F1E;
    --ink-2:      #16182F;
    --ink-3:      #1E2140;
    --hairline:   #2A2E52;

    --sigil:      #D4A73C;   /* emission / mining */
    --sigil-dim:  #7A6224;
    --aether:     #7B5FE8;   /* boosts */
    --aether-dim: #453483;

    --parchment:  #ECE8DA;
    --ash:        #8E8BA8;
    --ash-dim:    #5A5878;

    --ember:      #C4553D;
    --verdant:    #4FA97F;

    --display: 'Fraunces', Georgia, serif;
    --body:    'Inter', system-ui, -apple-system, sans-serif;
    --data:    'JetBrains Mono', ui-monospace, monospace;

    --r-sm: 4px;
    --r-md: 10px;
    --r-lg: 16px;

    --wrap: 940px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ink);
    /* faint vignette — the sigil should feel lit from within a dark room */
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123, 95, 232, 0.10), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(212, 167, 60, 0.05), transparent 70%);
    background-attachment: fixed;
    color: var(--parchment);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--sigil); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--sigil);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }

/* eyebrow labels — small caps, wide tracking, used to mark sections */
.eyebrow {
    font-family: var(--data);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash-dim);
    margin: 0 0 10px;
}

.mono { font-family: var(--data); font-variant-numeric: tabular-nums; }
.muted { color: var(--ash); }
.small { font-size: 0.85rem; }
.center { text-align: center; }

/* ----------------------------------------------------------------- topbar */

.topbar {
    border-bottom: 1px solid var(--hairline);
    background: rgba(14, 15, 30, 0.9);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    gap: 14px;
}
.brand {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--parchment);
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 22px; height: 22px; flex: 0 0 22px; }

.navlinks { display: flex; gap: 20px; align-items: center; }
.navlinks a:not(.btn) {
    color: var(--ash);
    font-size: 0.88rem;
    font-weight: 500;
}
.navlinks a:not(.btn):hover,
.navlinks a:not(.btn).is-active { color: var(--parchment); text-decoration: none; }

/* A button in the nav keeps its own colours — .navlinks a used to win on
   specificity and washed the dark label out to grey. */
.navlinks .btn--gold { color: #17130A; }
.navlinks .btn--gold:hover { color: #17130A; }

/* mobile nav is handled by the tab bar — see the navigation section below */

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

.card {
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 22px;
    margin-bottom: 18px;
}
.card--flush { padding: 0; overflow: hidden; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.stat { }
.stat__label {
    font-family: var(--data);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash-dim);
    margin-bottom: 5px;
}
.stat__value {
    font-family: var(--data);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--parchment);
}
.stat__value--gold { color: var(--sigil); }
.stat__value--aether { color: var(--aether); }
.stat__sub { font-size: 0.78rem; color: var(--ash); }

/* ==========================================================================
   THE SIGIL — signature element
   A 24-hour cycle read as twelve rune segments, one per two hours. Idle it
   sits cold; mining, segments ignite in sequence; complete, the core burns
   and the whole seal becomes the claim control.
   ========================================================================== */

.sigil-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 4px;
}

.sigil {
    width: min(280px, 74vw);
    height: min(280px, 74vw);
    position: relative;
    display: block;
    background: none;
    border: 0;
    padding: 0;
    cursor: default;
    color: inherit;
}
.sigil[data-actionable="1"] { cursor: pointer; }

.sigil svg { width: 100%; height: 100%; display: block; overflow: visible; }

.sigil__ring-bg  { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.sigil__seg      { fill: none; stroke: var(--ink-3); stroke-width: 7; stroke-linecap: butt;
                   transition: stroke 0.5s ease, filter 0.5s ease; }
.sigil__seg.is-lit {
    stroke: var(--sigil);
    filter: drop-shadow(0 0 5px rgba(212, 167, 60, 0.55));
}
.sigil__outer {
    fill: none;
    stroke: var(--hairline);
    stroke-width: 1;
    stroke-dasharray: 2 7;
    transform-origin: 150px 150px;
}
.sigil__glyph { fill: var(--ash-dim); font-family: var(--data); font-size: 9px; letter-spacing: 0.1em; }
.sigil__core  { fill: none; stroke: var(--sigil-dim); stroke-width: 1.5; }

.sigil__readout {
    font-family: var(--data);
    fill: var(--parchment);
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
}
.sigil__caption {
    font-family: var(--data);
    fill: var(--ash-dim);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-anchor: middle;
}

/* state: actively mining — outer ring turns slowly */
.sigil.is-mining .sigil__outer { animation: sigil-rotate 90s linear infinite; }

/* state: cycle complete — core ignites, whole seal invites a tap */
.sigil.is-ready .sigil__core {
    stroke: var(--sigil);
    fill: rgba(212, 167, 60, 0.09);
    animation: sigil-breathe 2.6s ease-in-out infinite;
}
.sigil.is-ready .sigil__readout { fill: var(--sigil); font-size: 22px; }
.sigil.is-ready .sigil__outer { stroke: var(--sigil-dim); animation: sigil-rotate 30s linear infinite; }

@keyframes sigil-rotate { to { transform: rotate(360deg); } }
@keyframes sigil-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .sigil__outer, .sigil.is-ready .sigil__core { animation: none !important; }
    .sigil__seg { transition: none; }
}

.sigil-meta {
    text-align: center;
    margin-top: 14px;
    font-family: var(--data);
    font-size: 0.8rem;
    color: var(--ash);
}
.sigil-meta strong { color: var(--sigil); font-weight: 500; }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    text-align: center;
}
.btn:hover { text-decoration: none; }
.btn[disabled], .btn.is-busy { opacity: 0.5; cursor: not-allowed; }

.btn--gold   { background: var(--sigil); color: #17130A; }
.btn--gold:hover:not([disabled]) { background: #E4B94D; }

.btn--aether { background: var(--aether); color: #fff; }
.btn--aether:hover:not([disabled]) { background: #8D74F0; }

.btn--ghost  { background: transparent; border-color: var(--hairline); color: var(--parchment); }
.btn--ghost:hover:not([disabled]) { border-color: var(--ash-dim); }

.btn--block { display: flex; width: 100%; }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: 15px; }
.field label {
    display: block;
    font-size: 0.82rem;
    color: var(--ash);
    margin-bottom: 6px;
    font-weight: 500;
}
.field input, .field select {
    width: 100%;
    padding: 12px 14px;
    background: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    color: var(--parchment);
    font-family: var(--body);
    font-size: 1rem;
}
.field input:focus, .field select:focus {
    outline: none;
    border-color: var(--sigil-dim);
}
.field .hint { font-size: 0.76rem; color: var(--ash-dim); margin-top: 5px; }

.copyrow { display: flex; gap: 8px; }
.copyrow input {
    flex: 1;
    font-family: var(--data);
    /* 16px is the floor — Safari zooms the whole page when a focused input is
       smaller, and the invite link is a field people tap constantly. */
    font-size: 16px;
    min-width: 0;
}

/* ----------------------------------------------------------------- notes */

.note {
    padding: 12px 15px;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: var(--ink-3);
    font-size: 0.88rem;
    margin-bottom: 15px;
}
.note--bad  { border-color: rgba(196, 85, 61, 0.5);  background: rgba(196, 85, 61, 0.10); }
.note--good { border-color: rgba(79, 169, 127, 0.5); background: rgba(79, 169, 127, 0.10); }

.pill {
    display: inline-block;
    font-family: var(--data);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    color: var(--ash);
}
.pill--gold   { border-color: var(--sigil-dim);  color: var(--sigil); }
.pill--aether { border-color: var(--aether-dim); color: var(--aether); }
.pill--good   { border-color: rgba(79,169,127,0.5); color: var(--verdant); }

/* ---------------------------------------------------------------- tables */

.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th {
    text-align: left;
    font-family: var(--data);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ash-dim);
    font-weight: 400;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hairline);
}
.table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--ink-3);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table .num { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: right; }
.table .pos { color: var(--verdant); }
.table .neg { color: var(--ember); }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--ash);
}
.empty h3 { color: var(--parchment); }

/* --------------------------------------------------------- halving meter */

.meter {
    height: 5px;
    background: var(--ink-3);
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 8px;
}
.meter__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sigil-dim), var(--sigil));
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* --------------------------------------------------------------- landing */

.hero { padding: 56px 0 40px; text-align: center; }
.hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.6rem);
    max-width: 15ch;
    margin-inline: auto;
}
.hero p {
    color: var(--ash);
    max-width: 52ch;
    margin: 0 auto 26px;
    font-size: 1.05rem;
}
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.ledgerstrip {
    display: flex;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
    padding: 22px 0 6px;
    border-top: 1px solid var(--hairline);
    margin-top: 40px;
}

.steps { counter-reset: step; }
.step {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ink-3);
}
.step:last-child { border-bottom: 0; }
.step__n {
    font-family: var(--data);
    font-size: 0.72rem;
    color: var(--sigil-dim);
    padding-top: 3px;
    flex: 0 0 26px;
}
.step__body h3 { margin-bottom: 3px; }
.step__body p { margin: 0; color: var(--ash); font-size: 0.92rem; }

/* ---------------------------------------------------------------- footer */

.footer {
    border-top: 1px solid var(--hairline);
    margin-top: 50px;
    padding: 26px 0 40px;
    color: var(--ash-dim);
    font-size: 0.82rem;
}
.footer a { color: var(--ash); }

.toast-host {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 32px);
    max-width: 400px;
}
.toast {
    background: var(--ink-3);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: 0.88rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    animation: toast-in 0.2s ease;
}
.toast--bad  { border-color: rgba(196, 85, 61, 0.6); }
.toast--good { border-color: rgba(212, 167, 60, 0.6); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }


/* ------------------------------------------------------- password fields */

.pwwrap { position: relative; display: block; }

.pwwrap input {
    padding-right: 52px;          /* room for the toggle */
}

.pwtoggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--ash);
    cursor: pointer;
    padding: 0;
}
.pwtoggle:hover { color: var(--parchment); background: rgba(255,255,255,.04); }
.pwtoggle:active { background: rgba(255,255,255,.07); }
.pwtoggle svg { width: 19px; height: 19px; display: block; }
.pwtoggle .pwtoggle__off { display: none; }
.pwtoggle[aria-pressed="true"] .pwtoggle__on  { display: none; }
.pwtoggle[aria-pressed="true"] .pwtoggle__off { display: block; }
.pwtoggle[aria-pressed="true"] { color: var(--sigil); }

/* live match indicator on the confirm field */
.pwmatch {
    font-size: 0.76rem;
    margin-top: 5px;
    min-height: 1.1em;
    font-family: var(--data);
}
.pwmatch--ok  { color: var(--verdant); }
.pwmatch--bad { color: var(--ember); }

/* ==========================================================================
   Auth panes
   ========================================================================== */

.authpane { max-width: 430px; margin: 24px auto 0; }
.authpane h1 { font-size: 1.9rem; margin-bottom: 6px; }
.authpane > p.muted { margin: 0 0 20px; }

/* ==========================================================================
   Landing page
   The hero is the sigil, running. Everything else stays quiet around it.
   ========================================================================== */

.lander { padding-top: 10px; }

.lede {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px;
    align-items: center;
    padding: 40px 0 30px;
}
@media (max-width: 820px) {
    .lede { grid-template-columns: 1fr; gap: 26px; text-align: center; padding-top: 22px; }
}

.lede h1 {
    font-size: clamp(2.3rem, 6.4vw, 3.5rem);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.lede h1 em {
    font-style: normal;
    color: var(--sigil);
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
.lede__copy > p {
    color: var(--ash);
    font-size: 1.06rem;
    margin: 0 0 24px;
    max-width: 46ch;
}
@media (max-width: 820px) { .lede__copy > p { margin-inline: auto; } }

.lede__actions { display: flex; gap: 11px; flex-wrap: wrap; }
@media (max-width: 820px) { .lede__actions { justify-content: center; } }

.lede__trust {
    margin: 22px 0 0;
    font-family: var(--data);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--ash-dim);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
@media (max-width: 820px) { .lede__trust { justify-content: center; } }
.lede__trust span { display: inline-flex; align-items: center; gap: 6px; }
.lede__trust span::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--sigil-dim);
}

/* --- the demo seal ------------------------------------------------------ */

.demo { display: flex; flex-direction: column; align-items: center; }

.demo__seal {
    width: min(330px, 78vw);
    height: min(330px, 78vw);
    position: relative;
}
.demo__seal svg { width: 100%; height: 100%; overflow: visible; }

.demo__ring   { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.demo__seg    { fill: none; stroke: var(--ink-3); stroke-width: 7;
                transition: stroke .35s ease, filter .35s ease; }
.demo__seg.is-lit { stroke: var(--sigil); filter: drop-shadow(0 0 6px rgba(212,167,60,.5)); }
.demo__ward   { fill: none; stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 7;
                transform-origin: 150px 150px; animation: sigil-rotate 80s linear infinite; }
.demo__core   { fill: none; stroke: var(--sigil-dim); stroke-width: 1.5; transition: all .5s ease; }
.demo__seal.is-full .demo__core {
    stroke: var(--sigil);
    fill: rgba(212,167,60,.11);
}
.demo__label  { font-family: var(--data); fill: var(--ash-dim); font-size: 9px;
                letter-spacing: .2em; text-anchor: middle; }
.demo__value  { font-family: var(--data); fill: var(--parchment); font-size: 27px;
                text-anchor: middle; font-variant-numeric: tabular-nums; }
.demo__seal.is-full .demo__value { fill: var(--sigil); }

.demo__caption {
    margin-top: 16px;
    font-family: var(--data);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

@media (prefers-reduced-motion: reduce) {
    .demo__ward { animation: none; }
    .demo__seg { transition: none; }
}

/* --- live numbers ------------------------------------------------------- */

.pulse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin: 8px 0 34px;
}
@media (max-width: 620px) { .pulse { grid-template-columns: repeat(2, 1fr); } }

.pulse__cell { background: var(--ink-2); padding: 18px 16px; }
.pulse__k {
    font-family: var(--data); font-size: .63rem; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ash-dim); margin-bottom: 6px;
}
.pulse__v {
    font-family: var(--data); font-size: 1.4rem; color: var(--parchment);
    font-variant-numeric: tabular-nums;
}
.pulse__v--gold { color: var(--sigil); }

/* --- section framing ---------------------------------------------------- */

.band { padding: 40px 0 10px; }
.band__head { max-width: 50ch; margin-bottom: 22px; }
.band__head h2 { margin-bottom: 8px; }
.band__head p { color: var(--ash); margin: 0; }

/* --- halving ladder ----------------------------------------------------- */

.ladder { display: grid; gap: 0; }

.rung {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--ink-3);
}
.rung:last-child { border-bottom: 0; }

.rung__at {
    font-family: var(--data);
    font-size: .82rem;
    color: var(--ash-dim);
    font-variant-numeric: tabular-nums;
}
.rung__name { font-weight: 500; }
.rung__note { font-size: .8rem; color: var(--ash-dim); }
.rung__rate {
    font-family: var(--data);
    font-size: .92rem;
    color: var(--ash);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rung.is-now { border-left: 2px solid var(--sigil); padding-left: 14px; margin-left: -16px; }
.rung.is-now .rung__at,
.rung.is-now .rung__rate { color: var(--sigil); }
.rung.is-now .rung__name { color: var(--parchment); }
.rung.is-past { opacity: .45; }

/* --- rate composition --------------------------------------------------- */

.recipe { display: grid; gap: 10px; }

.recipe__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--ink);
}
.recipe__row--total { border-color: var(--sigil-dim); background: rgba(212,167,60,.05); }

.recipe__op {
    font-family: var(--data);
    font-size: .95rem;
    color: var(--ash-dim);
    width: 14px;
    flex: 0 0 14px;
}
.recipe__what { flex: 1; font-size: .92rem; }
.recipe__what small { display: block; color: var(--ash-dim); font-size: .76rem; }
.recipe__num {
    font-family: var(--data);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.recipe__row--total .recipe__num { color: var(--sigil); font-size: 1.05rem; }

/* --- closing call ------------------------------------------------------- */

.close {
    text-align: center;
    padding: 48px 22px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background:
        radial-gradient(ellipse 70% 90% at 50% 0%, rgba(212,167,60,.08), transparent 70%),
        var(--ink-2);
    margin: 34px 0 10px;
}
.close h2 { font-size: 1.7rem; margin-bottom: 10px; }
.close p { color: var(--ash); max-width: 44ch; margin: 0 auto 22px; }

/* ==========================================================================
   MOBILE PASS
   Most of this audience arrives on a phone, on metered data, often on a
   360px-wide screen. Breakpoints: 900 tablet, 640 phone, 400 small phone.
   ========================================================================== */

/* --- overflow guard ----------------------------------------------------- */

html, body { max-width: 100%; overflow-x: hidden; }

/* Anything that can push past the viewport gets clamped rather than causing
   a sideways scroll on the whole page. */
img, svg, video, canvas, iframe { max-width: 100%; }
pre, code { overflow-x: auto; }

/* Long emails and invite links are the usual culprits for blown-out layouts */
.table td, .stat__value, .rung__name, .pulse__v { overflow-wrap: anywhere; }

/* --- safe areas (notched iPhones) --------------------------------------- */
/* layout.php sets viewport-fit=cover, which puts content under the notch and
   the home indicator unless we pad for them explicitly. */

.wrap {
    padding-left:  max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
}
.footer { padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom))); }
.toast-host { bottom: max(24px, calc(16px + env(safe-area-inset-bottom))); }

/* --- iOS zoom-on-focus -------------------------------------------------- */
/* Safari zooms the page when a focused input is under 16px. Every input has
   to clear that bar, including the monospaced ones. */

.field input,
.field select,
.copyrow input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    font-size: 16px;
}

/* --- tap targets -------------------------------------------------------- */
/* 44px is the smallest reliably hittable target with a thumb. */

.btn { min-height: 44px; }
.pwtoggle { width: 42px; height: 42px; }
.navlinks a:not(.btn) { min-height: 44px; display: flex; align-items: center; }

/* ==========================================================================
   Tablet and below
   ========================================================================== */

@media (max-width: 900px) {
    .lede { gap: 30px; }
    .band { padding: 30px 0 6px; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.3rem; }
}

/* --- nav drawer --------------------------------------------------------- */



/* ==========================================================================
   Phone
   ========================================================================== */

@media (max-width: 640px) {

    body { font-size: 15.5px; }

    .wrap {
        padding-left:  max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    .card { padding: 17px 15px; border-radius: 12px; margin-bottom: 14px; }

    /* Primary actions go full width — thumbs, not cursors */
    .lede__actions { flex-direction: column; align-items: stretch; }
    .lede__actions .btn { width: 100%; }
    .close .btn { width: 100%; }

    .lede { padding: 14px 0 22px; }
    .lede h1 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
    .lede__copy > p { font-size: 1rem; }
    .lede__trust { gap: 10px 14px; font-size: 0.68rem; }

    .demo__seal { width: min(300px, 82vw); height: min(300px, 82vw); }

    /* --- live numbers: two up, tighter --- */
    .pulse { margin-bottom: 26px; border-radius: 12px; }
    .pulse__cell { padding: 14px 12px; }
    .pulse__v { font-size: 1.15rem; }
    .pulse__k { font-size: 0.58rem; letter-spacing: 0.11em; }

    /* --- halving ladder: label above, numbers below --- */
    .rung {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding: 13px 0;
    }
    .rung__at {
        grid-column: 1 / -1;
        order: -1;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .rung.is-now { margin-left: -13px; padding-left: 11px; }

    /* --- rate recipe: stack the operator out of the flow --- */
    .recipe__row { flex-wrap: wrap; padding: 12px 14px; row-gap: 4px; }
    .recipe__what { flex: 1 1 auto; min-width: 0; }
    .recipe__num { flex: 0 0 auto; margin-left: auto; }

    .step { gap: 12px; padding: 15px 0; }
    .step__n { flex-basis: 20px; }

    .close { padding: 34px 18px; margin: 24px 0 6px; }
    .close h2 { font-size: 1.45rem; }

    .authpane { margin-top: 12px; }
    .authpane h1 { font-size: 1.65rem; }

    .sigil { width: min(260px, 80vw); height: min(260px, 80vw); }
    .sigil-meta { font-size: 0.85rem; }

    .stat__value { font-size: 1.2rem; }

    /* --- tables become stacked cards --- */
    /* A four-column table at 360px is unreadable however you scroll it. Rows
       become cards; each cell carries its own label from data-label. */
    .table--stack thead { display: none; }
    .table--stack,
    .table--stack tbody,
    .table--stack tr,
    .table--stack td { display: block; width: 100%; }

    .table--stack tr {
        border: 1px solid var(--hairline);
        border-radius: 10px;
        padding: 6px 2px;
        margin-bottom: 10px;
        background: var(--ink);
    }
    .table--stack tr:last-child { margin-bottom: 0; }

    .table--stack td {
        border: 0;
        padding: 7px 13px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        text-align: left;
    }
    .table--stack td::before {
        content: attr(data-label);
        font-family: var(--data);
        font-size: 0.62rem;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--ash-dim);
        flex: 0 0 auto;
    }
    /* Cells with no label span the full width as a heading row */
    .table--stack td[data-label=""]::before,
    .table--stack td:not([data-label])::before { content: none; }

    .table--stack td.num { text-align: right; }
    .table--stack .tablewrap { overflow: visible; }

    /* --- admin tables keep scrolling, but say so --- */
    .adminbar .wrap { height: auto; padding-block: 10px; gap: 14px; row-gap: 8px; }
    .tablewrap--scroll { position: relative; }
}

/* ==========================================================================
   Small phone (360px and under)
   ========================================================================== */

@media (max-width: 400px) {
    .wrap {
        padding-left:  max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .card { padding: 15px 13px; }

    .pulse { grid-template-columns: 1fr 1fr; }
    .pulse__v { font-size: 1.05rem; }

    .lede h1 { font-size: 1.85rem; }
    .demo__seal { width: min(270px, 84vw); height: min(270px, 84vw); }
    .sigil { width: min(240px, 84vw); height: min(240px, 84vw); }

    .copyrow { flex-direction: column; }
    .copyrow .btn { width: 100%; }

    .btn { padding-inline: 16px; font-size: 0.92rem; }

    .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Landscape phone — vertical space is the scarce thing, not width
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .lede { padding: 12px 0; }
    .demo__seal { width: min(210px, 44vw); height: min(210px, 44vw); }
    .sigil { width: 190px; height: 190px; }
    .hero, .band { padding-block: 18px; }
    .topbar { position: static; }
}


/* --- admin member search ------------------------------------------------ */

.adminsearch { display: flex; gap: 10px; }
.adminsearch input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    background: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    color: var(--parchment);
    font-family: var(--body);
    font-size: 16px;
}
.adminsearch input:focus { outline: none; border-color: var(--sigil-dim); }

@media (max-width: 640px) {
    .adminsearch { flex-direction: column; }
    .adminsearch .btn { width: 100%; }
}


/* ==========================================================================
   NAVIGATION
   Desktop: a horizontal bar. Phone: a bottom tab bar.

   No hamburger. This is a daily-habit app with five destinations, and the one
   people open it for — Mine — should be a thumb-reach away, not behind a tap
   that hides where they are. A drawer also costs a tap on every single
   navigation, which for a once-a-day loop is most of the interaction.
   ========================================================================== */

.topbar__inner { gap: 12px; }

.brand__mark { flex: 0 0 22px; }

/* --- balance pill ------------------------------------------------------- */

.balpill {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 13px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--ink);
    font-family: var(--data);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-height: 34px;
    align-content: center;
}
.balpill:hover { border-color: var(--sigil-dim); text-decoration: none; }
.balpill__n { color: var(--sigil); font-size: 0.92rem; }
.balpill__s { color: var(--ash-dim); font-size: 0.66rem; letter-spacing: 0.08em; }

/* --- desktop links ------------------------------------------------------ */

.navlinks--out { margin-left: auto; }
.btn--sm { padding: 8px 15px; font-size: 0.86rem; min-height: 38px; }

/* --- bottom tab bar ----------------------------------------------------- */

.tabbar { display: none; }

@media (max-width: 720px) {

    /* The desktop link row gives way to the tabs entirely. */
    .navlinks { display: none; }
    .navlinks--out { display: flex; margin-left: auto; gap: 10px; align-items: center; }
    .navlinks--out a:not(.btn) { font-size: 0.86rem; }

    .balpill { margin-left: auto; }

    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: rgba(22, 24, 47, 0.97);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--hairline);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 2px 8px;
        min-height: 56px;
        color: var(--ash-dim);
        text-decoration: none;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    .tab:hover { text-decoration: none; }

    .tab__i { display: block; width: 22px; height: 22px; }
    .tab__i svg { width: 100%; height: 100%; display: block; }

    .tab__t {
        font-family: var(--data);
        font-size: 0.6rem;
        letter-spacing: 0.05em;
        line-height: 1;
    }

    .tab.is-active { color: var(--sigil); }

    /* A short rule on the active tab — clearer than colour alone for anyone
       who can't distinguish gold from grey. */
    .tab.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--sigil);
    }

    .tab:active { background: rgba(255, 255, 255, 0.03); }

    /* Clear the bar so the last row of content isn't trapped under it. */
    body.has-tabs { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
    body.has-tabs .footer { margin-bottom: 6px; }

    /* Toasts sit above the tabs, not behind them. */
    body.has-tabs .toast-host {
        bottom: calc(56px + 14px + env(safe-area-inset-bottom));
    }
}

/* Narrow phones: labels shrink before they wrap. */
@media (max-width: 380px) {
    .tab__t { font-size: 0.55rem; letter-spacing: 0.02em; }
    .tab__i { width: 20px; height: 20px; }
    .brand__word { display: none; }
    .balpill { padding: 6px 10px; }
}

/* Landscape phones have almost no vertical room — trim the tabs down. */
@media (max-height: 500px) and (orientation: landscape) {
    .tab { min-height: 44px; padding: 5px 2px; }
    .tab__t { display: none; }
    body.has-tabs { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   ADMIN — tabs, charts, geo bars
   ========================================================================== */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--hairline);
}
.tabs__t {
    padding: 10px 16px;
    color: var(--ash);
    font-size: 0.9rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.tabs__t:hover { color: var(--parchment); text-decoration: none; }
.tabs__t.is-on { color: var(--sigil); border-bottom-color: var(--sigil); }

.rangebar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.rangebar__b {
    padding: 7px 14px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--ash);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
.rangebar__b:hover { color: var(--parchment); text-decoration: none; }
.rangebar__b.is-on { border-color: var(--sigil-dim); color: var(--sigil); }

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 6px;
    min-height: 44px;
}
.check input { width: 18px; height: 18px; accent-color: var(--sigil); flex: 0 0 18px; }

/* --- bar chart, pure CSS ------------------------------------------------- */

.chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 150px;
    padding-top: 8px;
}
.chart__col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.chart__stack { display: flex; gap: 1px; align-items: flex-end; width: 100%; height: 100%; }
.chart__bar {
    flex: 1;
    background: var(--aether-dim);
    border-radius: 2px 2px 0 0;
    min-height: 0;
    transition: background 0.15s ease;
}
.chart__bar--gold { background: var(--sigil-dim); }
.chart__col:hover .chart__bar { background: var(--aether); }
.chart__col:hover .chart__bar--gold { background: var(--sigil); }

.chart__legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-family: var(--data);
    font-size: 0.68rem;
    color: var(--ash-dim);
    align-items: center;
}
.chart__legend .sw {
    display: inline-block; width: 9px; height: 9px; border-radius: 2px;
    background: var(--aether-dim); margin-right: 6px;
}
.chart__legend .sw--gold { background: var(--sigil-dim); }

/* --- country bars -------------------------------------------------------- */

.geo {
    display: grid;
    grid-template-columns: 22px 1fr 90px 54px;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--ink-3);
}
.geo:last-child { border-bottom: 0; }
.geo__f { font-size: 1.05rem; line-height: 1; }
.geo__n { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo__bar { height: 5px; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
.geo__bar i { display: block; height: 100%; background: var(--aether); border-radius: 999px; }
.geo__bar i.is-gold { background: var(--sigil); }
.geo__v { font-size: 0.82rem; text-align: right; color: var(--ash); }

@media (max-width: 640px) {
    .chart { height: 110px; }
    .geo { grid-template-columns: 20px 1fr 46px; gap: 8px; }
    .geo__bar { display: none; }
}

/* --- the SMTP master switch ---------------------------------------------
   The single most consequential control in the panel, so it gets its own card
   and states its condition in words. A small checkbox was too easy to miss. */

.bigswitch {
    border-color: var(--ember);
    background:
        radial-gradient(ellipse 70% 90% at 0% 0%, rgba(196, 85, 61, 0.10), transparent 70%),
        var(--ink-2);
}
.bigswitch.is-on {
    border-color: var(--sigil-dim);
    background:
        radial-gradient(ellipse 70% 90% at 0% 0%, rgba(212, 167, 60, 0.10), transparent 70%),
        var(--ink-2);
}

.bigswitch__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.bigswitch__state {
    font-family: var(--display);
    font-size: 1.2rem;
    color: var(--parchment);
    margin-bottom: 4px;
}
.bigswitch__state strong { color: var(--ember); font-weight: 600; }
.bigswitch.is-on .bigswitch__state strong { color: var(--sigil); }

.bigswitch__note {
    margin: 0;
    font-size: 0.86rem;
    color: var(--ash);
    max-width: 52ch;
}

@media (max-width: 640px) {
    .bigswitch__row { flex-direction: column; align-items: stretch; }
    .bigswitch__row .btn { width: 100%; }
}

/* ==========================================================================
   AUTH PAGES — sign in, create account, reset
   These are the first surface a member touches, and previously they were a
   bare card with default field spacing. Given the whole product is built
   around one seal, the auth pages should feel like part of it.
   ========================================================================== */

.authpane {
    max-width: 430px;
    margin: 30px auto 0;
}

/* A small seal above the heading — the same geometry as the dashboard sigil,
   at a size where it reads as a mark rather than a diagram. */
.authmark {
    width: 46px;
    height: 46px;
    margin: 0 auto 18px;
    display: block;
}
.authmark circle, .authmark path { vector-effect: non-scaling-stroke; }

.authpane > h1 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 8px;
}
.authpane > p.muted {
    text-align: center;
    margin: 0 auto 22px;
    max-width: 34ch;
    font-size: 0.94rem;
}

.authcard {
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 26px 24px 24px;
    margin-bottom: 16px;
}

/* Fields get more room to breathe than the compact admin forms. */
.authcard .field { margin-bottom: 18px; }
.authcard .field:last-of-type { margin-bottom: 22px; }

.authcard .field label {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ash);
    margin-bottom: 7px;
}

.authcard .field input {
    padding: 14px 15px;
    border-radius: 11px;
    background: var(--ink);
    border-color: var(--ink-3);
    transition: border-color .15s ease, background .15s ease;
}
.authcard .field input:hover { border-color: var(--hairline); }
.authcard .field input:focus {
    border-color: var(--sigil-dim);
    background: #0B0C18;
}

.authcard .hint { font-size: 0.75rem; margin-top: 6px; }

/* The forgot-password link belongs beside the field, not stacked under it
   as another hint — that reads as instructions rather than an action. */
.authcard .hint a { color: var(--ash); }
.authcard .hint a:hover { color: var(--sigil); }

.authcard .btn--block { padding-block: 14px; font-size: 0.98rem; }

.authfoot {
    text-align: center;
    font-size: 0.88rem;
    color: var(--ash-dim);
    margin: 0;
}
.authfoot a { color: var(--sigil); font-weight: 500; }

/* Separator between the form and the alternate action. */
.authsep {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0 16px;
    color: var(--ash-dim);
    font-family: var(--data);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.authsep::before, .authsep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

@media (max-width: 640px) {
    .authpane { margin-top: 14px; }
    .authpane > h1 { font-size: 1.55rem; }
    .authcard { padding: 22px 18px 20px; border-radius: 13px; }
    .authmark { width: 40px; height: 40px; margin-bottom: 14px; }
}

/* --- brand image slots (admin) ------------------------------------------- */

.brandslot {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--ink);
}
.brandslot__label {
    font-family: var(--data);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash-dim);
    margin-bottom: 10px;
}
.brandslot__prev {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(45deg, var(--ink-3) 25%, transparent 25%, transparent 75%, var(--ink-3) 75%) 0 0/14px 14px,
        linear-gradient(45deg, var(--ink-3) 25%, transparent 25%, transparent 75%, var(--ink-3) 75%) 7px 7px/14px 14px,
        var(--ink-2);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    overflow: hidden;
    padding: 8px;
}
.brandslot__prev img { max-height: 100%; max-width: 100%; object-fit: contain; }
.brandslot__none { font-size: 0.74rem; color: var(--ash-dim); text-align: center; }

.brandslot input[type="file"] {
    width: 100%;
    font-size: 0.76rem;
    color: var(--ash);
}
.brandslot input[type="file"]::file-selector-button {
    background: var(--ink-3);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--parchment);
    padding: 7px 11px;
    margin-right: 9px;
    cursor: pointer;
    font-family: var(--body);
    font-size: 0.78rem;
}
.brandslot input[type="file"]::file-selector-button:hover { border-color: var(--ash-dim); }
.brandslot .hint { margin-top: 8px; }

/* ==========================================================================
   SOCIAL FOLLOW TASKS
   ========================================================================== */

.tasklead { max-width: 480px; margin: 6px auto 20px; text-align: center; }
.tasklead h1 { font-size: 1.8rem; margin-bottom: 8px; }
.tasklead > p.muted { max-width: 42ch; margin: 0 auto 20px; font-size: 0.95rem; }

.taskprog { display: flex; align-items: center; gap: 12px; }
.taskprog__bar {
    flex: 1; height: 6px; background: var(--ink-3);
    border-radius: 999px; overflow: hidden;
}
.taskprog__bar i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--sigil-dim), var(--sigil));
    border-radius: 999px; transition: width .4s ease;
}

.tasklist { max-width: 480px; margin: 0 auto 16px; }

.task {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    transition: border-color .2s ease, opacity .2s ease;
}
.task.is-done { border-color: rgba(79,169,127,.4); opacity: .7; }

.task__i { width: 24px; height: 24px; flex: 0 0 24px; }
.task__i svg { width: 100%; height: 100%; display: block; }

.task__t { flex: 1; min-width: 0; line-height: 1.3; }
.task__t strong { display: block; font-weight: 500; font-size: 0.95rem; }
.task__t small { color: var(--ash-dim); font-size: 0.78rem; font-family: var(--data); }

.task__a { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; }
.task__a .btn { padding: 8px 13px; font-size: 0.82rem; min-height: 38px; }
.task__confirm[disabled] { min-width: 84px; }

.taskfoot { max-width: 480px; margin: 0 auto; }

@media (max-width: 480px) {
    .task { flex-wrap: wrap; gap: 10px 12px; }
    .task__t { flex: 1 1 auto; }
    .task__a { flex: 1 1 100%; }
    .task__a .btn { flex: 1; }
}

/* --- footer channel links ------------------------------------------------ */

.footsocial { display: flex; gap: 16px; margin: 0 0 12px; }
.footsocial a { width: 19px; height: 19px; display: block; opacity: .75; }
.footsocial a:hover { opacity: 1; }
.footsocial svg { width: 100%; height: 100%; display: block; }


/* ==========================================================================
   ADMIN — social channel cards
   Each channel is a card rather than a row: the link is the important field
   and deserves the full width, and the state needs to be readable at a glance
   without decoding two unlabelled checkboxes.
   ========================================================================== */

.chanlist { display: grid; gap: 10px; }

.chan {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--ink);
    padding: 14px 16px 12px;
    transition: border-color .18s ease;
}
.chan:hover { border-color: var(--ash-dim); }

/* An unconfigured channel is inert, so it recedes. */
.chan--unset { opacity: .62; }
.chan--unset:hover { opacity: 1; }
.chan--live { border-left: 2px solid var(--sigil); padding-left: 15px; }
.chan--hidden { border-left: 2px solid var(--ash-dim); padding-left: 15px; }

/* --- head --- */

.chan__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.chan__i {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--chan, var(--ash));
    /* Fallback first — color-mix() is recent, and a chunk of the Android
       browsers this audience uses will skip the two lines below it. */
    background: var(--ink-3);
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--chan, #8E8BA8) 14%, transparent);
    border-color: color-mix(in srgb, var(--chan, #8E8BA8) 30%, transparent);
}
.chan__i svg { width: 17px; height: 17px; display: block; }

.chan__name {
    font-weight: 500;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
}

.chan__state { flex: 0 0 auto; }

.chan__test {
    font-family: var(--data);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ash);
    white-space: nowrap;
    padding: 4px 8px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    flex: 0 0 auto;
}
.chan__test:hover { color: var(--sigil); border-color: var(--sigil-dim); text-decoration: none; }

/* --- fields --- */

.chan__body {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 10px;
    margin-bottom: 12px;
}

.chan__field label {
    display: block;
    font-family: var(--data);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ash-dim);
    margin-bottom: 5px;
}
.chan__opt { text-transform: none; letter-spacing: 0; opacity: .7; }

.chan__field input {
    width: 100%;
    padding: 10px 12px;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--parchment);
    font-family: var(--body);
    font-size: 16px;                 /* below this, iOS zooms on focus */
    transition: border-color .15s ease;
}
.chan__field input::placeholder { color: var(--ash-dim); opacity: .55; }
.chan__field input:hover { border-color: var(--ash-dim); }
.chan__field input:focus { outline: none; border-color: var(--sigil-dim); background: var(--ink); }
.chan__field--url input { font-family: var(--data); font-size: 15px; }

/* --- toggles --- */

.chan__toggles {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 11px;
    border-top: 1px solid var(--ink-3);
}

/* A real switch. Native checkboxes at 18px on a dark ground are hard to read
   and give no sense of on/off at a glance. */
.sw {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    min-height: 32px;
}
.sw input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.sw__track {
    width: 34px; height: 19px;
    flex: 0 0 34px;
    background: var(--ink-3);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    position: relative;
    transition: background .18s ease, border-color .18s ease;
}
.sw__dot {
    position: absolute;
    top: 2px; left: 2px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--ash);
    transition: transform .18s ease, background .18s ease;
}
.sw input:checked + .sw__track {
    background: rgba(212, 167, 60, .22);
    border-color: var(--sigil-dim);
}
.sw input:checked + .sw__track .sw__dot {
    transform: translateX(15px);
    background: var(--sigil);
}
.sw input:focus-visible + .sw__track {
    outline: 2px solid var(--sigil);
    outline-offset: 2px;
}
.sw__label { font-size: 0.84rem; color: var(--ash); }
.sw input:checked ~ .sw__label { color: var(--parchment); }

@media (prefers-reduced-motion: reduce) {
    .sw__track, .sw__dot { transition: none; }
}

@media (max-width: 620px) {
    .chan { padding: 13px 13px 11px; }
    .chan__body { grid-template-columns: 1fr; gap: 9px; }
    .chan__toggles { gap: 8px 18px; }
    .chan__name { font-size: 0.9rem; }
    .chan__test { display: none; }   /* the link is right there in the field */
}

/* ==========================================================================
   DISPLAY AD SLOTS
   An ad that shifts the page when it loads is worse than no ad — the member
   taps the wrong thing and blames the site. Each inline slot reserves space
   and collapses cleanly when the network returns nothing.
   ========================================================================== */

.adslot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 16px;
    min-height: 0;
    overflow: hidden;
}
.adslot:empty { display: none; margin: 0; }
.adslot > * { max-width: 100%; }

/* A faint rule marks it as paid space rather than site content, which keeps
   members from reading an ad as something Arcane is telling them. */
.adslot--dashboard_mid,
.adslot--page_bottom {
    border-top: 1px solid var(--ink-3);
    border-bottom: 1px solid var(--ink-3);
    padding: 12px 0;
}

.adslot--page_top { margin-top: 2px; }

@media (max-width: 640px) {
    .adslot { margin-bottom: 13px; }
    .adslot--dashboard_mid, .adslot--page_bottom { padding: 10px 0; }
}

/* --- admin placement rows ------------------------------------------------ */

.adrow {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--ink);
    padding: 13px 15px;
    margin-bottom: 10px;
}
.adrow--live { border-left: 2px solid var(--sigil); padding-left: 14px; }
.adrow--off  { border-left: 2px solid var(--ash-dim); padding-left: 14px; }

.adrow__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.adrow__name { font-weight: 500; font-size: 0.93rem; flex: 1; min-width: 120px; }
.adrow__sw { margin-left: auto; }

.adrow__hint {
    margin: 0 0 9px;
    font-size: 0.78rem;
    color: var(--ash-dim);
    line-height: 1.5;
}

.adrow textarea, .adstxt {
    width: 100%;
    padding: 10px 12px;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--parchment);
    font-family: var(--data);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
}
.adrow textarea:focus, .adstxt:focus {
    outline: none;
    border-color: var(--sigil-dim);
    background: var(--ink);
}
.adrow textarea::placeholder, .adstxt::placeholder { color: var(--ash-dim); opacity: .5; }