/* Tokens measured from the prototype on 15 October. Verdana for numbers,
   labels, headings and tables; Trebuchet MS for body and captions. */
:root {
    --navy: #001489;
    --navy-deep: #000a3d;
    --navy-glass: rgba(0, 20, 137, .09);
    --lime: #C0D900;
    --lime-dark: #7d8f00;
    --magenta: #C91273;
    --teal: #0891b2;
    --tx: #2d3561;
    --tx-soft: #6b7280;
    --bg: #eef1f9;
    --border: #dde3f2;
    --white: #ffffff;
    --r: 10px;
    --r-lg: 14px;
    --shadow: 0 2px 14px rgba(0, 20, 137, .09);
    --font-display: Verdana, Geneva, sans-serif;
    --font-body: "Trebuchet MS", Trebuchet, sans-serif;
    /* names the earlier screens still use */
    --panel: var(--white);
    --line: var(--border);
    --ink: var(--tx);
    --muted: var(--tx-soft);
    --red: #dc2626;
    --red-bg: #fdecec;
    --amber: #d97706;
    --green: #16a34a;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--tx);
    background: var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 14px; color: var(--tx); background: var(--bg); }
a { color: var(--navy); }
h1, h2, h3 { font-family: var(--font-display); color: var(--navy); line-height: 1.25; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h1:focus { outline: none; }
.muted { color: var(--tx-soft); margin-top: 0; }

/* ---- frame ------------------------------------------------------------- */
.screen { width: min(1024px, 100%); margin: 0 auto; min-height: 100vh; background: var(--bg); }
.content { padding: 15px 18px 32px; }

/* ---- header ------------------------------------------------------------ */
.bar-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    height: 44px; padding: 0 16px;
    background: var(--navy-deep); color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.bar-top-left, .bar-top-right, .bar-context-left, .bar-context-right {
    display: flex; align-items: center; min-width: 0;
}
.bar-top-left, .bar-top-right { gap: 10px; }
.bar-context-left { gap: 8px; }
.bar-context-right { gap: 10px; flex: 0 0 auto; }
.logo-mark {
    width: 22px; height: 22px; border-radius: 6px; background: var(--lime); flex: 0 0 auto;
}
.poc-pill {
    font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--magenta);
    background: rgba(201, 18, 115, .14); border: 1px solid rgba(201, 18, 115, .55);
    border-radius: 20px; padding: 2px 8px;
}
.who-name {
    font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, .78);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem;
}
.signout-form { margin: 0; }
.outline-pill {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px;
    background: transparent; color: #fff; text-decoration: none; cursor: pointer;
    font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
    padding: 4px 10px; line-height: 1.2;
}
.bar-context {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 50px; padding: 0 18px; background: var(--white);
    border-bottom: 1px solid var(--border);
}
.wordmark { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--navy); }
.bar-sep { width: 1px; height: 18px; background: var(--border); flex: 0 0 auto; }
.poc-badge {
    font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .04em;
    color: var(--white); background: var(--magenta); border-radius: 5px; padding: 3px 7px; flex: 0 0 auto;
}
.context-line {
    font-family: var(--font-body); font-size: 10.5px; color: var(--tx-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.header-filters select,
.pl-banner select {
    font-family: var(--font-body); font-size: 11.5px; font-weight: 400; color: var(--navy);
    height: 36px; border: 1px solid var(--border); border-radius: var(--r);
    background: var(--white); padding: 0 8px; max-width: 200px;
}
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--navy); color: #fff; border: 2px solid var(--lime);
    font-family: var(--font-display); font-weight: 700; font-size: 11px;
}

/* ---- screen tabs ------------------------------------------------------ */
.screen-tabs {
    display: flex; align-items: stretch; height: 44px; padding: 0 18px;
    background: var(--white); box-shadow: inset 0 -2px 0 var(--border);
    overflow-x: auto; overflow-y: hidden;
}
.screen-tabs a {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 0 14px;
    text-decoration: none; color: var(--tx-soft);
    font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
    border-bottom: 3px solid transparent; white-space: nowrap;
}
.screen-tabs a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--lime); }
.tab-code { font-family: var(--font-display); font-size: 9px; font-weight: 700; color: var(--magenta); }

/* ---- programme lead banner -------------------------------------------- */
.pl-banner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    background: var(--navy); color: rgba(255, 255, 255, .85);
    padding: 8px 18px; font-family: var(--font-body); font-size: 11.5px;
}
.pl-tag {
    font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
    color: var(--navy); background: var(--lime); border-radius: 5px; padding: 3px 8px;
}
.pl-banner select { height: 32px; max-width: 260px; }

.brand-mark { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand-mark span { color: var(--lime); }

/* ---- tables ----------------------------------------------------------- */
.table-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
    padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left;
    font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--navy);
    vertical-align: middle;
}
table.grid th {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .2px;
    color: #fff; background: var(--navy); white-space: nowrap; border-bottom-color: var(--navy);
}
table.grid tbody tr:hover td { background: #f5f7ff; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid .n { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td a { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--navy); text-decoration: none; }
table.grid td a:hover { text-decoration: underline; }
.site-line { display: block; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
    font-family: var(--font-display); font-size: 9.5px; font-weight: 400; color: var(--navy);
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 2px 7px;
    white-space: nowrap;
}
table.grid td.flag { color: var(--magenta); font-weight: 700; }
table.grid tr.stale td { background: var(--red-bg); }
table.grid tr.stale td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.tag {
    margin-left: .5rem; font-size: .7rem; color: var(--navy); background: rgba(0, 20, 137, .08);
    border-radius: 999px; padding: .1rem .5rem; vertical-align: middle;
}
.note { font-size: .82rem; color: var(--muted); margin-top: 1rem; }

/* Week links under a section, not the screen tabs. */
.filters { display: flex; align-items: center; gap: .4rem; margin: 0 0 1rem; }

table.checkins th.day, table.checkins td.day { text-align: center; white-space: nowrap; }
table.checkins th.day .dow { display: block; }
table.checkins th.day .dom {
    display: block; font-weight: 700; color: #fff;
    text-transform: none; letter-spacing: 0; font-size: .85rem;
}
table.checkins th.day.asof { box-shadow: inset 0 3px 0 var(--lime); }
table.checkins th.day a.sort {
    display: inline-grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
    column-gap: .2rem; text-decoration: none;
}
table.checkins th.day a.sort .dow { grid-column: 1; grid-row: 1; }
table.checkins th.day a.sort .arrow { grid-column: 2; grid-row: 1; margin-left: 0; }
table.checkins th.day a.sort .dom { grid-column: 1 / -1; grid-row: 2; }
table.checkins td.day { vertical-align: middle; font-variant-numeric: tabular-nums; }
table.checkins .stamp { display: block; line-height: 1.3; }
table.checkins .count { display: block; font-weight: 700; }
table.checkins .of { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; }
table.checkins .kind {
    font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
}
table.checkins td.none { background: var(--red-bg); }
table.checkins th:first-child, table.checkins td:first-child {
    position: sticky; left: 0; z-index: 1; min-width: 9rem;
    box-shadow: 1px 0 0 var(--line);
}
table.checkins th:first-child { z-index: 2; }
table.checkins td:first-child { background: var(--panel); font-weight: 600; }
table.checkins tbody tr:hover td:first-child { background: #f5f7ff; }

.summary { margin: 1.25rem 0 0; }

.filter-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.filter-form select {
    font-family: var(--font-body); font-size: 11.5px; font-weight: 400; color: var(--navy);
    height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r);
    background: var(--white); max-width: 200px;
}


table.grid th button.sort,
table.grid th a.sort {
    font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
    text-transform: uppercase; color: #fff; background: none; border: 0;
    padding: 0; cursor: pointer; text-decoration: none;
}
table.grid th button.sort:hover,
table.grid th a.sort:hover { text-decoration: underline; }

table.milestones th.tick, table.milestones td.tick { text-align: center; white-space: nowrap; }
table.milestones .when { display: block; margin-top: .15rem; font-size: .72rem; color: var(--muted); font-weight: 500; }
table.milestones th:first-child, table.milestones td:first-child {
    position: sticky; left: 0; z-index: 1; min-width: 9rem;
    box-shadow: 1px 0 0 var(--line);
}
table.milestones th:first-child { z-index: 2; background: var(--navy); }
table.milestones td:first-child { background: var(--panel); font-weight: 600; }
table.milestones tbody tr:hover td:first-child { background: #f5f7ff; }
.box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 4px;
    font-size: .85rem; font-weight: 700; line-height: 1; vertical-align: middle;
}
.box.done { background: var(--lime); color: var(--navy-deep); }
.box.open { border: 1.5px solid #c5cbe0; background: #fff; }

.muted-inline { color: var(--tx-soft); font-size: .85em; }
table.grid th .arrow { margin-left: .3rem; opacity: .85; }

/* PL1 follow-up: wrap the headers so the table stays inside the card. */
table.grid.fit { table-layout: fixed; }
table.grid.fit col.mentor { width: 22%; }
table.grid.fit col.partner { width: 20%; }
table.grid.fit col.count { width: 14.5%; }
table.grid.fit.week col.mentor { width: 18%; }
table.grid.fit.week col.partner { width: 16%; }
table.grid.fit.week col.count { width: 13.2%; }
/* M1 incomplete days: the count columns are sized to their one-line headers
   (with the sort arrow); the YeBoneer column takes the rest and its names wrap. */
table.grid.fit.incomplete col.count { width: 9.5rem; }
table.grid.fit.incomplete th, table.grid.fit.incomplete th a.sort { white-space: nowrap; }
table.grid.fit th { white-space: normal; vertical-align: bottom; line-height: 1.35; }
table.grid.fit th a.sort { white-space: normal; }
table.grid.fit td { overflow-wrap: break-word; }

.tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin: 12px 0 4px;
}
.tile {
    display: flex; flex-direction: column; gap: 4px; padding: 13px 12px;
    background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow);
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border); border-top: 3px solid var(--navy);
}
.tile-feature {
    background: linear-gradient(135deg, rgba(0, 20, 137, .09), rgba(0, 20, 137, .04));
    border-top-color: rgba(0, 20, 137, .15);
}
.tile-lime { border-top-color: var(--lime); }
.tile-navy { border-top-color: var(--navy); }
.tile-teal { border-top-color: var(--teal); }
.tile-label {
    font-family: var(--font-display); font-size: 9.5px; font-weight: 400; color: var(--navy);
    text-transform: uppercase; letter-spacing: .45px;
}
.tile-value {
    font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--navy); line-height: 1.15;
}
.tile-suffix { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--tx-soft); }
.tile-caption { font-family: var(--font-body); font-size: 10px; font-weight: 400; color: var(--tx-soft); }

.section-heading {
    display: flex; align-items: center; gap: 8px;
    margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.content > .sr-only + .section-heading { margin-top: 2px; }
.section-heading h2 {
    margin: 0; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--navy);
}
.section-number {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--navy); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 10px;
}
.section-rule { flex: 1; height: 2px; background: linear-gradient(to right, var(--lime), transparent); }
.section-heading h2 { flex: 0 0 auto; }
.section-meta {
    font-family: var(--font-body); font-size: 10.5px; font-weight: 400; color: var(--tx-soft);
    text-align: right; max-width: 46%;
}
.section-actions { flex: 0 0 auto; }

.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.card-row .card-span { grid-column: 1 / -1; }
.card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow); overflow: hidden;
}
.card-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.card-head h3 {
    margin: 0; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--navy);
}
.card-count { color: var(--tx-soft); font-weight: 400; }
.card-hint { font-family: var(--font-body); font-size: 10.5px; font-weight: 400; color: var(--tx-soft); text-align: right; }
.card-row > .card { min-width: 0; }
.card + .card-row, .card-row + .card-row { margin-top: 12px; }
.card-body { padding: 12px 14px 14px; }
.card-body.flush { padding: 0; }
.card-body.flush > .muted { margin: 0; padding: 12px 14px; }
.card-body.flush .show-all { padding: 8px 14px 12px; }
.card .table-wrap { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.card .empty, .card .muted { margin: 0; }

.note-box {
    margin-top: 18px; background: var(--navy-glass); border-left: 3px solid var(--navy);
    border-radius: var(--r); padding: 10px 12px;
}
.note-box h2 {
    margin: 0 0 4px; font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--navy);
}
.note-box p { margin: 0; font-family: var(--font-body); font-size: 11px; color: var(--tx); line-height: 1.45; }

.panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 12px 14px; }

/* PL1 share chart: name, then a 0-100% bar. The percent is the tooltip. */
.sharechart {
    display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) 1fr;
    column-gap: 8px; row-gap: 5px; align-items: center;
}
.sharechart .who {
    font-family: var(--font-body); font-size: 10px; text-align: right; color: var(--tx);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sharechart .track {
    position: relative; height: 12px; border-radius: 2px;
    background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 20%);
}
.sharechart .bar { display: block; height: 12px; background: var(--navy); border-radius: 2px; }
.sharechart .axis {
    grid-column: 2; position: relative; height: 16px;
    font-family: var(--font-body); font-size: 9px; color: var(--tx-soft);
}
.sharechart .axis span { position: absolute; top: 0; transform: translateX(-50%); }
.sharechart .axis span:first-child { transform: none; }
.sharechart .axis span:last-child { transform: translateX(-100%); }

/* The daily chart fills the card, and grows when the mentor chart beside it is taller. */
.card-row > .card:has(.linechart) {
    align-self: stretch; display: flex; flex-direction: column;
}
.card:has(.linechart) > .card-head { flex: 0 0 auto; }
.card:has(.linechart) > .card-body {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.linechart {
    flex: 1; display: grid; min-height: 320px; margin: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: minmax(280px, 1fr) auto;
    column-gap: 6px; row-gap: 8px;
    font-family: var(--font-body);
}
.linechart-y { grid-column: 1; grid-row: 1; position: relative; }
.linechart-y span {
    position: absolute; right: 0; transform: translateY(-50%);
    font-size: 9px; line-height: 1; color: var(--tx-soft);
}
.linechart-plot { grid-column: 2; grid-row: 1; position: relative; min-height: 0; }
.linechart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.linechart .grid-line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.linechart .area { fill: var(--navy-glass); stroke: none; }
.linechart .series {
    fill: none; stroke: var(--navy); stroke-width: 2; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round;
}
.linechart-plot .dot {
    position: absolute; width: 12px; height: 12px; box-sizing: border-box;
    border: 2px solid var(--navy); border-radius: 50%; background: var(--lime);
    transform: translate(-50%, -50%);
}
.linechart-x { grid-column: 2; grid-row: 2; position: relative; height: 16px; }
.linechart-x span {
    position: absolute; top: 0; transform: translateX(-50%);
    font-size: 9px; line-height: 16px; color: var(--tx-soft); white-space: nowrap;
}
.linechart-x span.current { color: var(--navy); font-weight: 700; }

.pager { display: flex; justify-content: space-between; margin: 0 0 .75rem; font-size: .9rem; }
.pager a { text-decoration: none; font-weight: 600; }
.pager .disabled { color: var(--muted); opacity: .6; }

/* M2 day types: colour plus the times, so colour is never the only signal. */
table.checkins td.both { background: #eef6c4; }
table.checkins td.one { background: #fdf0d5; }
table.checkins td.none { background: var(--red-bg); }
table.grid tfoot td { font-weight: 600; background: #f7f8fc; border-top: 2px solid var(--line); }
table.grid tr.flagged td:first-child { box-shadow: inset 3px 0 0 var(--magenta); }
.swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; border: 1px solid var(--line); }
.swatch.both { background: #eef6c4; }
.swatch.one { background: #fdf0d5; }
.swatch.none { background: var(--red-bg); }
.legend { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0; margin: .75rem 0 0; font-size: .85rem; color: var(--muted); }
.show-all { margin: .6rem 0 0; font-size: .88rem; }
.show-all a { font-weight: 600; text-decoration: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- sign in ---------------------------------------------------------- */
.auth {
    min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.auth-hero {
    display: flex; flex-direction: column; justify-content: space-between; padding: 3rem;
    color: #fff; background:
        radial-gradient(circle at 85% 15%, rgba(192, 217, 0, .22), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(201, 18, 115, .25), transparent 40%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.auth-hero .brand-mark { font-size: 1.6rem; }
.auth-hero h2 { color: #fff; font-size: 2rem; max-width: 22rem; margin: 0 0 1rem; }
.auth-hero h2 em { font-style: normal; color: var(--lime); }
.auth-hero p { max-width: 26rem; opacity: .8; line-height: 1.5; }
.auth-hero .foot { font-size: .8rem; opacity: .55; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg); }
.login {
    width: 100%; max-width: 24rem; padding: 2.25rem 2rem;
    background: var(--panel); border-radius: 14px; box-shadow: var(--shadow);
}
.login h1 { font-size: 1.4rem; }
.login label { display: block; margin-top: 1.1rem; font-weight: 600; font-size: .9rem; }
.login input:not([type=hidden]) {
    display: block; width: 100%; margin-top: .4rem; padding: .7rem .8rem; font: inherit;
    border: 1px solid var(--line); border-radius: 8px; background: #fbfcff;
}
.login input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.login button[type=submit] {
    margin-top: 1.6rem; width: 100%; padding: .8rem; font: inherit; font-weight: 700;
    color: var(--navy-deep); background: var(--lime); border: 0; border-radius: 8px; cursor: pointer;
}
.login button[type=submit]:hover { filter: brightness(.95); }
.login .help { margin-top: 1.25rem; font-size: .82rem; color: var(--muted); }
.alert { color: var(--red); background: var(--red-bg); padding: .65rem .8rem; border-radius: 8px; font-size: .9rem; }
.validation-message { color: var(--red); font-size: .82rem; margin-top: .25rem; }

.empty { padding: 2rem; text-align: center; color: var(--muted); background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow); }

#blazor-error-ui { display: none; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---- loading ---------------------------------------------------------- */
.loading-overlay {
    position: fixed; inset: 0; z-index: 30;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.loading-overlay[hidden] { display: none; }
.loading-spinner {
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--navy) 18%, transparent);
    border-top-color: var(--navy); border-right-color: var(--lime-dark);
    animation: yebo-spin .7s linear infinite;
}
@keyframes yebo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .loading-spinner { animation-duration: 2.4s; }
}

@media (max-width: 768px) {
    .card-row { grid-template-columns: 1fr; }
    .who-name { display: none; }
    .context-line { max-width: 8rem; }
}
@media (max-width: 640px) {
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .auth { grid-template-columns: 1fr; }
    .auth-hero { padding: 1.75rem; min-height: auto; }
    .auth-hero h2 { font-size: 1.4rem; }
    .auth-hero p, .auth-hero .foot { display: none; }
}