/* AV Dawson Discovery App — single-file design system.
*
* Palette pulled directly from the official Port of Middlesbrough logo SVG:
* #CE0E2D signal red (shield + CTAs)
* #323E48 gunmetal (wordmark + body text)
* #FFFFFF white (backgrounds + negative space)
*
* Legacy variable names (--navy, --teal) are kept as aliases so existing
* rule references keep working without a big sweep across the file — they
* now resolve to the AV Dawson palette.
*/
:root {
/* Brand primitives */
--av-red: #ce0e2d;
--av-red-dark: #a40b24;
--av-slate: #323e48;
--av-slate-dark: #1f272e;
--av-white: #ffffff;
/* Semantic vars — legacy aliases kept for backwards-compat. */
--navy: var(--av-slate); /* headings / topbar */
--navy-dark: var(--av-slate-dark);
--teal: var(--av-red); /* primary CTA */
--teal-dark: var(--av-red-dark);
--ink: #1c2733;
--ink-soft: #5a6771;
--paper: #f4f5f6; /* warm off-white, matches AV site */
--line: #dce0e3;
--warn: #b45309;
--warn-bg: #fef3c7;
--ok: #0d7f3a;
--ok-bg: #d8f3df;
--danger: var(--av-red);
--danger-bg: #fddede;
--info: #1f5d9f;
--info-bg: #dbe9f7;
--radius: 8px;
--shadow: 0 1px 2px rgba(50, 62, 72, .06), 0 6px 18px rgba(50, 62, 72, .08);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
color: var(--ink);
background: var(--paper);
line-height: 1.5;
font-size: 16px;
}
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.9rem; margin: 0 0 .5rem; color: var(--navy); }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; color: var(--navy); }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--navy); }
p { margin: 0 0 .75rem; }
small { color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.main { padding: 2rem 1.25rem 3rem; }
/* Top bar */
.topbar {
background: var(--navy);
color: #fff;
box-shadow: var(--shadow);
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: .9rem 1.25rem;
}
.brand {
display: flex;
align-items: center;
gap: .6rem;
color: #fff;
font-weight: 600;
}
.brand:hover { text-decoration: none; }
/* Brand mark: now a shield image lifted straight from the official Port
* of Middlesbrough logo. Falls back to the old red pill if the image
* fails to load. */
.brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: transparent;
padding: 0;
border-radius: 4px;
}
.brand-mark img,
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name {
text-transform: uppercase;
letter-spacing: .08em;
font-size: .92rem;
}
.topnav {
display: flex;
align-items: center;
gap: 1rem;
}
.topnav a { color: #dfe6ee; }
.topnav a:hover { color: #fff; text-decoration: none; }
.topnav .who { color: #9fb3cc; font-size: .9rem; }
/* Buttons */
.btn {
display: inline-block;
padding: .55rem 1rem;
border-radius: var(--radius);
border: 1px solid transparent;
font-weight: 600;
cursor: pointer;
font-size: .95rem;
line-height: 1.2;
text-align: center;
transition: background .15s, border-color .15s, color .15s;
}
.btn-lg { padding: .8rem 1.4rem; font-size: 1.05rem; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); text-decoration: none; color: #fff; }
.btn-secondary { background: #6c757d; color: #fff; }
.btn-secondary:hover { background: #5a6268; text-decoration: none; color: #fff; }
.btn-danger { background: #dc3545; color: #fff; }
.btn-danger:hover { background: #c82333; text-decoration: none; color: #fff; }
.btn-ghost {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .3);
}
main .btn-ghost {
color: var(--navy);
border-color: var(--line);
background: #fff;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
main .btn-ghost:hover { background: var(--paper); }
/* Cards */
.card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
margin-bottom: 1.25rem;
}
.card.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
/* Forms */
.form label {
display: block;
margin-bottom: 1rem;
font-weight: 600;
color: var(--navy);
}
.form input,
.form select,
.form textarea,
textarea {
display: block;
width: 100%;
margin-top: .3rem;
padding: .65rem .8rem;
border: 1px solid var(--line);
border-radius: 8px;
font: inherit;
color: var(--ink);
background: #fff;
}
.form textarea, textarea { resize: vertical; font-family: var(--font); }
.form input:focus, .form select:focus, .form textarea:focus, textarea:focus {
outline: 2px solid var(--teal);
border-color: var(--teal);
}
.form-actions {
display: flex;
gap: .75rem;
align-items: center;
margin-top: 1rem;
flex-wrap: wrap;
}
/* Flash messages */
.flash-stack { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.flash {
padding: .75rem 1rem;
border-radius: 8px;
border: 1px solid;
font-size: .95rem;
}
.flash-info { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.flash-success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.flash-warning { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.flash-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
/* Day 30 (C.6 #3): developer-facing breadcrumb on /signup/pending,
gated to DEMO_MODE/DEBUG by app/routes/signup.py. Muted grey +
monospace so it's visibly distinct from real flashes — no
end user should ever mistake this for real product chrome.
Single new class this window; remaining C.5 banked slot rolls
forward (the admin-card / admin-muted-box pair, no leading dots
in this comment so the Day 27 C.5 discipline test's substring
guard doesn't false-positive on a documentation reference, are
still carried in the backlog). */
.flash-debug-breadcrumb {
background: #f3f4f6;
border-color: #9ca3af;
color: #374151;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .85rem;
white-space: pre-wrap;
word-break: break-all;
}
/* Hero */
.hero {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 2rem;
align-items: start;
margin-top: 1rem;
}
.hero h1 { font-size: 2.4rem; line-height: 1.15; }
.hero .lede { font-size: 1.15rem; color: var(--ink-soft); }
.hero-bullets { padding-left: 1.1rem; color: var(--ink-soft); margin: 1rem 0 1.5rem; }
.hero-bullets li { margin: .25rem 0; }
.hero-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow);
}
/* Dashboard */
.dash-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.25rem;
}
.dash-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1.6fr 1fr; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td {
text-align: left;
padding: .6rem .5rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.table th { color: var(--ink-soft); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.progress {
width: 100%;
height: 8px;
background: var(--line);
border-radius: 999px;
overflow: hidden;
margin-bottom: .3rem;
}
.progress .bar {
height: 100%;
background: var(--teal);
transition: width .3s;
}
.progress-large { min-width: 220px; }
.pill {
display: inline-block;
padding: .2rem .55rem;
border-radius: 999px;
font-size: .8rem;
font-weight: 600;
background: var(--line);
color: var(--ink);
}
.pill-in_progress { background: var(--info-bg); color: var(--info); }
.pill-completed { background: var(--ok-bg); color: var(--ok); }
.pill-abandoned { background: var(--danger-bg); color: var(--danger); }
.theme-list { list-style: none; padding: 0; margin: 0; }
.theme-list li {
display: flex; justify-content: space-between;
padding: .45rem 0;
border-bottom: 1px solid var(--line);
}
.theme-list li:last-child { border-bottom: 0; }
.theme-count { font-weight: 700; color: var(--navy); }
.booking-list { list-style: none; padding: 0; margin: 0; }
.booking-list li {
padding: .6rem 0;
border-bottom: 1px solid var(--line);
}
.booking-list li:last-child { border-bottom: 0; }
/* Interview */
.interview-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.question {
font-size: 1.4rem;
color: var(--navy);
margin: .5rem 0 1rem;
}
.theme-tag {
display: inline-block;
padding: .2rem .6rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: var(--line);
color: var(--ink);
}
.theme-process { background: #dbe9f7; color: #1f5d9f; }
.theme-data_location { background: #e6e0f7; color: #5a3dab; }
.theme-pain_point { background: #fddede; color: #a8261e; }
.theme-time_spent { background: #fff4cc; color: #9c6b00; }
.theme-business_impact { background: #d8f3df; color: #156c3c; }
.theme-risk_safety { background: #fde2e2; color: #8b1d1d; }
.theme-labour_cost { background: #e4e1fa; color: #3a2f8a; }
.history { list-style: none; padding: 0; margin: 0; }
.history li {
padding: .9rem 0;
border-bottom: 1px solid var(--line);
}
.history li:last-child { border-bottom: 0; }
.history .q { font-weight: 600; color: var(--navy); margin: .4rem 0 .25rem; }
.history .a { color: var(--ink); white-space: pre-wrap; }
.summary { white-space: pre-wrap; color: var(--ink); }
/* Calendar slots */
.slot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: .75rem;
margin-top: 1rem;
}
.slot {
display: block;
padding: .75rem 1rem;
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-align: center;
font-weight: 600;
background: #fff;
transition: border-color .15s, background .15s;
}
.slot input { display: none; }
.slot:hover { border-color: var(--teal); }
.slot:has(input:checked) {
border-color: var(--teal);
background: #fde8eb; /* soft rose — tints the new red palette */
color: var(--teal-dark);
}
/* Footer */
.footer {
padding: 1.5rem 0;
color: var(--ink-soft);
text-align: center;
border-top: 1px solid var(--line);
background: #fff;
}
/* Responsive */
@media (max-width: 780px) {
.hero, .grid-2 { grid-template-columns: 1fr; }
.topnav { gap: .5rem; font-size: .9rem; }
.topnav .who { display: none; }
h1 { font-size: 1.6rem; }
.hero h1 { font-size: 1.9rem; }
}
.day-heading {
margin: 1.25rem 0 0.5rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--teal, #0a7a7a);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Dictation (mic input for interview answers) ---------------------------- */
.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;
}
.dictation-wrap { position: relative; }
.dictation-wrap textarea[data-dictation] {
padding-right: 3rem;
}
.dictation-btn {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #fff;
color: #444;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background-color 120ms, color 120ms, transform 120ms, box-shadow 120ms;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dictation-btn:hover { background: #f6f7f9; color: #111; }
.dictation-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.dictation-icon { width: 1.125rem; height: 1.125rem; }
.dictation-dot {
display: none;
position: absolute;
top: 0.15rem;
right: 0.15rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #dc2626;
}
.dictation-btn.is-recording {
background: #dc2626;
color: #fff;
border-color: #b91c1c;
animation: dictationPulse 1.4s ease-out infinite;
}
.dictation-btn.is-recording .dictation-dot {
display: block;
background: #fff;
animation: dictationDot 1s ease-in-out infinite;
}
@keyframes dictationPulse {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@keyframes dictationDot {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.dictation-interim {
min-height: 1.25em;
margin-top: 0.35rem;
font-size: 0.9rem;
color: #6b7280;
font-style: italic;
padding: 0 0.25rem;
}
.dictation-interim:empty { margin-top: 0; }
/* Whisper voice input button (all qtypes) --------------------------------- */
.iv-voice-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.5rem 0 0;
}
.iv-voice-btn {
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #fff;
color: #666;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background-color 120ms, color 120ms, box-shadow 120ms;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
.iv-voice-btn:hover { background: #f6f7f9; color: #111; }
.iv-voice-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.iv-mic-icon { width: 0.875rem; height: 0.875rem; }
.iv-voice-btn.is-recording {
background: #dc2626;
color: #fff;
border-color: #b91c1c;
animation: dictationPulse 1.4s ease-out infinite;
}
.iv-voice-status {
font-size: 0.8rem;
color: #6b7280;
font-style: italic;
}
/* =========================================================================
* AV Dawson brand: hero photography & watermarks
*
* Uses the official Port of Middlesbrough aerial photo (served from our
* own /static so we don't hot-link their CDN) as a background, muted
* under a gunmetal overlay so foreground text stays legible.
* ========================================================================= */
/* Full-bleed hero for landing + login pages. */
.hero-brand {
position: relative;
isolation: isolate;
margin: -2rem -1.25rem 2rem; /* cancel .main's padding */
padding: 4rem 1.25rem;
color: #fff;
overflow: hidden;
background:
linear-gradient(135deg,
rgba(50, 62, 72, .78) 0%,
rgba(50, 62, 72, .62) 60%,
rgba(206, 14, 45, .35) 100%),
url("../img/hero-port-aerial.webp") center/cover no-repeat,
var(--av-slate); /* fallback while image loads */
}
.hero-brand::before {
content: "";
position: absolute;
inset: 0;
background: url("../img/hero-port-aerial.jpg") center/cover no-repeat;
z-index: -1;
opacity: 0; /* WebP first; JPEG covers if WebP fails */
}
.hero-brand h1,
.hero-brand h2,
.hero-brand h3 { color: #fff; }
.hero-brand .lede { color: rgba(255, 255, 255, .9); }
.hero-brand .muted { color: rgba(255, 255, 255, .75); }
/* Smaller variant — a banner strip at the top of the dashboard.
* ~180px tall on desktop, compresses gracefully on mobile. */
.hero-strip {
position: relative;
margin: -2rem -1.25rem 1.5rem;
padding: 2rem 1.25rem;
min-height: 170px;
display: flex;
align-items: center;
color: #fff;
background:
linear-gradient(90deg,
rgba(50, 62, 72, .85) 0%,
rgba(50, 62, 72, .55) 55%,
rgba(206, 14, 45, .30) 100%),
url("../img/hero-port-aerial.webp") center/cover no-repeat,
var(--av-slate);
}
.hero-strip h1 { color: #fff; margin: 0 0 .25rem; }
.hero-strip p { color: rgba(255, 255, 255, .85); margin: 0; }
/* Very soft full-page watermark for the interview-review / completion
* pages — visible but never competes with content. */
.watermark-soft {
position: relative;
isolation: isolate;
}
.watermark-soft::before {
content: "";
position: fixed;
inset: 0;
background: url("../img/hero-port-aerial.webp") center/cover no-repeat;
opacity: .06;
z-index: -1;
pointer-events: none;
}
/* Mobile: swap to the small hero variant to save bandwidth. */
@media (max-width: 780px) {
.hero-brand,
.hero-strip {
background-image:
linear-gradient(135deg,
rgba(50, 62, 72, .82) 0%,
rgba(50, 62, 72, .65) 60%,
rgba(206, 14, 45, .38) 100%),
url("../img/hero-port-aerial-small.webp");
background-size: cover;
background-position: center;
}
.hero-brand { padding: 3rem 1.25rem; }
}
/* Buttons & headings: AV Dawson's site uses uppercase tracking-wide
* for almost all UI chrome. Applied narrowly to preserve readability
* in body copy. */
.btn { text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
.btn-lg { font-size: .95rem; letter-spacing: .06em; }
.topnav a:not(.who):not(.brand) {
text-transform: uppercase;
letter-spacing: .06em;
font-size: .82rem;
font-weight: 600;
}
h1, h2 { letter-spacing: -0.01em; } /* tighten at display size */
.card h2, .card h3 { text-transform: none; } /* keep content headings readable */
/* Brand accent strip under the topbar — subtle red line tying the UI to
* the AV Dawson wordmark colour. */
.topbar { border-bottom: 3px solid var(--av-red); }
/* =============================================================
Multi-choice & scale question widgets (Phase A)
============================================================= */
.choice-group{border:0;padding:0;margin:0;display:grid;gap:.5rem}
.choice{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;
border:1px solid var(--border,#d4d8df);border-radius:8px;cursor:pointer;
background:var(--card-bg,#fff);transition:background .12s,border-color .12s}
.choice:hover{background:var(--card-hover,#f5f7fb)}
.choice input{margin-top:.2rem;flex:0 0 auto}
.choice span{flex:1 1 auto;line-height:1.4}
.choice:has(input:checked){
border-color:var(--accent,#0b5fff);
background:var(--accent-soft,#eef3ff)}
.choice-other{margin-top:.25rem;width:100%;padding:.6rem .8rem;
border:1px solid var(--border,#d4d8df);border-radius:8px;font:inherit}
.scale-group{border:0;padding:0;margin:0}
.scale-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.scale-pip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.35rem;padding:.85rem .4rem;border:1px solid var(--border,#d4d8df);border-radius:8px;cursor:pointer;text-align:center;background:var(--card-bg,#fff);transition:background .12s,border-color .12s,transform .08s}
.scale-pip:hover{background:var(--card-hover,#f5f7fb)}
.scale-pip:has(input:checked){border-color:var(--accent,#0b5fff);background:var(--accent-soft,#eef3ff);transform:translateY(-1px)}
.scale-pip input{position:absolute;opacity:0;pointer-events:none}
.scale-num{font-size:1.25rem;font-weight:600;color:var(--accent,#0b5fff);line-height:1}
.scale-label{font-size:.78rem;color:var(--muted,#6b7280);line-height:1.2;min-height:1.2em}
.scale-comment{display:grid;gap:.35rem;margin-top:.9rem}
.scale-comment span{font-size:.85rem;color:var(--muted,#6b7280)}
.scale-comment input{padding:.6rem .8rem;border:1px solid var(--border,#d4d8df);border-radius:8px;font:inherit}
@media (max-width:520px){.scale-row{gap:.25rem}.scale-pip{padding:.6rem .2rem}.scale-num{font-size:1.05rem}.scale-label{font-size:.7rem}}
/* =============================================================
Admin dashboard (Phase A/4)
============================================================= */
.admin-head{margin-bottom:1.25rem}
.admin-head h1{margin:0 0 .25rem 0}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:.75rem;margin-bottom:1.25rem}
.kpi{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.1rem;
background:var(--card-bg,#fff);border:1px solid var(--border,#d4d8df);
border-radius:10px;text-decoration:none;color:inherit;
transition:transform .08s,border-color .12s,box-shadow .12s}
a.kpi:hover{border-color:var(--accent,#0b5fff);transform:translateY(-1px);
box-shadow:0 2px 10px rgba(0,0,0,.04)}
.kpi-num{font-size:2rem;font-weight:700;color:var(--accent,#0b5fff);line-height:1}
.kpi-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted,#6b7280);font-weight:600}
.kpi-sub{font-size:.78rem;color:var(--muted,#6b7280);margin-top:.15rem}
.admin-needs h3{margin:1rem 0 .5rem 0;font-size:.95rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#6b7280)}
.admin-list{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.admin-list li{padding:.55rem .8rem;border:1px solid var(--border,#d4d8df);
border-radius:8px;background:var(--card-bg,#fff);
display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.admin-list li a{font-weight:600}
/* Admin form-group — Day 18 (Path C.5).
Shared label+input+hint block for /admin/settings and
/platform/tenants/* forms. Replaces ~14 duplicated inline
`style="margin:1rem 0;"` / `style="margin:1.25rem 0;"` blocks
across settings.html, tenant_detail.html, tenant_new.html.
The hint (class="muted") is naturally small-font via the
global .muted rule; we add a tighter size here to match the
inline-style original (`font-size:0.85rem`) so the visual is
byte-for-byte the same as before the refactor. */
.admin-form-group{margin:1.25rem 0}
.admin-form-group > .muted{font-size:.85rem}
/* Admin "What we inferred about you" sub-block — Day 27 (α-8, C.5 slot 3 of N).
Visual treatment for the inferred-fields sub-block nested
inside the Day 24 origin panel on the admin home page.
Provides spacing + a subtle top border so the sub-block reads
as a distinct chunk from the four base fields rendered above
it, while staying inside the panel's red-accented card so the
"data we collected" + "data we inferred" hierarchy is one
visual unit. Muted text colour mirrors the panel's existing
"muted" CTA copy below.
The C.5 budget for Day 27 has two slots banked from Day 25 +
Day 26; this spends ONE. The second rolls forward to Day 28
(see ledger). */
.admin-inferred-block{margin:.5rem 0 .75rem 0;padding:.6rem .75rem;
border-top:1px dashed var(--border,#d4d8df);
background:rgba(255,255,255,.6);border-radius:6px;
color:var(--muted,#6b7280)}
.admin-inferred-block strong{color:inherit}
/* Day 28 (Epic α-9) — inline edit form for the inferred fields.
Sits inside the .admin-inferred-block container; visual chrome
reads as "this is a form, distinct from the read view above"
without leaving the panel. The C.5 budget for Day 28 has two
slots banked from Days 25 + 26 + 27; α-9 spends ONE on this
class. The remaining banked slot (now from Day 27 only,
since Day 25 + 26's slot was spent on Day 27) rolls forward
to Day 29. See ledger.
We deliberately reset ``color`` back to body text here — the
parent .admin-inferred-block's muted text colour is right for
read-only paragraphs, but form labels need the higher-contrast
default. Inputs/textareas inherit the body font via the inline
style="font-family:inherit" on the elements themselves. */
.admin-inferred-edit{margin-top:.5rem;padding:.5rem 0;
color:var(--text,#111827)}
.admin-inferred-edit label{font-size:.9rem}
.admin-inferred-edit input[type="text"],
.admin-inferred-edit textarea{
border:1px solid var(--line,#d4d8df);border-radius:4px;
background:#fff;color:inherit}
/* Signup colour-picker row — Day 19 (Path C.6, friction item #2).
The /signup form's brand-colour field pairs the native
with a read-only hex mirror so the
user can see the chosen value in plain text. On wider
viewports the two sit side-by-side; on narrow (≤640px)
they stack so neither gets cramped. See Day 12 friction
note #2 and Day 19 ledger entry. */
.signup-colour-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.signup-colour-row input[type="color"]{flex:0 0 auto;width:3rem;height:2.25rem;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
.signup-colour-row input[type="text"]{flex:1 1 8rem;min-width:0;padding:.5rem;font-family:monospace}
@media (max-width:640px){
.signup-colour-row{flex-direction:column;align-items:stretch;gap:.4rem}
.signup-colour-row input[type="color"]{width:100%;height:2.5rem}
}
.tag{display:inline-block;padding:.1rem .5rem;border-radius:999px;
font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tag-ok{background:#dcfce7;color:#065f46}
.tag-warn{background:#fef3c7;color:#92400e}
.alert{padding:.75rem 1rem;border-radius:8px;margin:.5rem 0 1rem 0;
border:1px solid transparent}
.alert-warning{background:#fffaeb;border-color:#fcd34d;color:#78350f}
.coverage-grid{display:grid;gap:.5rem;margin-top:.75rem}
.coverage-row{display:grid;grid-template-columns:180px 1fr 130px;gap:.75rem;
align-items:center}
.coverage-bar{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden}
.coverage-bar .bar{height:100%;background:var(--accent,#0b5fff);
transition:width .3s ease}
.coverage-num{font-variant-numeric:tabular-nums;font-size:.88rem}
@media (max-width:640px){
.coverage-row{grid-template-columns:1fr;gap:.25rem}
.coverage-num{font-size:.8rem}
}
.activity{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.activity li{padding:.75rem 1rem;border:1px solid var(--border,#d4d8df);
border-radius:8px;background:var(--card-bg,#fff)}
.activity-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
font-size:.85rem;margin-bottom:.35rem}
.activity .q{margin:.15rem 0;font-weight:600}
.activity .a{margin:0;color:var(--muted,#444);white-space:pre-wrap}
.admin-shortcuts{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.admin-shortcuts li{padding:.55rem .8rem;border:1px solid var(--border,#d4d8df);
border-radius:8px}
.inline{display:inline}
.btn-sm{padding:.3rem .6rem;font-size:.75rem}
/* =============================================================
Mention banner (Phase B/3)
============================================================= */
.mention-banners{display:grid;gap:.6rem;margin-bottom:1.25rem}
.mention-banner{display:flex;flex-wrap:wrap;justify-content:space-between;
align-items:center;gap:1rem;padding:1rem 1.25rem;
background:linear-gradient(90deg,#eef3ff 0%,#fff 60%);
border-left:4px solid var(--accent,#0b5fff)}
.mention-text{flex:1 1 260px;color:#1f2937}
.mention-text em{color:#374151}
.mention-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
@media (max-width:520px){.mention-banner{padding:.85rem 1rem}
.mention-actions{width:100%;justify-content:flex-start}}
/* =============================================================
Filter tabs (Phase B/5)
============================================================= */
.filter-tabs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
margin-bottom:.5rem}
.filter-tabs .tab{display:inline-flex;gap:.4rem;align-items:center;
padding:.35rem .75rem;border-radius:999px;text-decoration:none;
color:inherit;border:1px solid var(--border,#d4d8df);background:#fff;
font-size:.85rem;transition:background .12s,border-color .12s}
.filter-tabs .tab:hover{background:#f5f7fb}
.filter-tabs .tab.active{background:var(--accent,#0b5fff);color:#fff;
border-color:var(--accent,#0b5fff)}
.filter-tabs .tab.active .tag{background:rgba(255,255,255,.2);color:#fff}
/* =============================================================
Fact list on /admin/knowledge
============================================================= */
.fact-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.fact{padding:.85rem 1rem;border:1px solid var(--border,#d4d8df);
border-radius:8px;background:#fff;border-left-width:4px}
.fact.conf-high{border-left-color:#10b981}
.fact.conf-medium{border-left-color:#f59e0b}
.fact.conf-low{border-left-color:#9ca3af}
.fact-head{display:flex;gap:.5rem;align-items:center;margin-bottom:.25rem}
.conf-tag{display:inline-block;padding:.08rem .45rem;border-radius:4px;
font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.conf-high{background:#dcfce7;color:#065f46}
.conf-medium{background:#fef3c7;color:#92400e}
.conf-low{background:#e5e7eb;color:#374151}
.fact-text{margin:.1rem 0;font-weight:600}
.fact-evidence{margin:.2rem 0;font-size:.9rem}
.fact-source{margin:.35rem 0 0 0;font-size:.78rem}
.numbers{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.78rem;color:#1f2937;background:#f3f4f6;padding:.05rem .35rem;
border-radius:4px}
/* =============================================================
/admin/analytics — charts, heatmap, funnel, network
============================================================= */
/* Two-column layout on desktop, stacked on mobile. */
.analytics-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 820px) {
.analytics-row { grid-template-columns: 1fr; }
}
.analytics-card { margin-bottom: 0; }
/* Chart.js canvas wants an explicit parent height or it collapses to 0. */
.chart-wrap {
position: relative;
height: 320px;
margin-top: .75rem;
}
/* --- Discovery funnel ------------------------------------------------- */
.funnel {
display: flex;
flex-direction: column;
gap: .5rem;
margin-top: .75rem;
}
.funnel-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: .75rem;
align-items: center;
}
.funnel-label {
font-size: .85rem;
color: var(--ink-soft);
font-weight: 600;
}
.funnel-bar {
height: 28px;
background: #f3f4f6;
border-radius: 6px;
overflow: hidden;
}
.funnel-fill {
height: 100%;
background: linear-gradient(90deg, var(--av-red), var(--av-red-dark));
color: #fff;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 .75rem;
font-weight: 700;
font-size: .9rem;
min-width: 2rem;
transition: width .3s ease;
}
@media (max-width: 640px) {
.funnel-row { grid-template-columns: 1fr; gap: .15rem; }
}
/* --- Heatmap ---------------------------------------------------------- */
.heatmap-wrap {
overflow-x: auto;
margin-top: .5rem;
}
.heatmap {
border-collapse: separate;
border-spacing: 3px;
font-size: .85rem;
width: 100%;
min-width: 720px;
}
.heatmap th {
text-align: center;
font-weight: 600;
padding: .35rem .25rem;
vertical-align: bottom;
}
.heatmap thead th:first-child,
.heatmap tbody td.who { text-align: left; }
.heatmap-head {
display: inline-block;
padding: .15rem .5rem;
border-radius: 999px;
font-size: .72rem;
letter-spacing: .03em;
text-transform: uppercase;
font-weight: 700;
}
.heatmap td.who {
padding: .4rem .6rem;
background: #fff;
border-radius: 6px;
white-space: nowrap;
}
.heatmap td.who a { font-weight: 700; }
.heatmap td.cell {
position: relative;
width: 52px;
height: 40px;
border-radius: 6px;
text-align: center;
color: #fff;
font-weight: 700;
/* We set --cell-op inline per-row; this emulates colour*alpha by
fading the cell over a white backdrop via a pseudo-element. */
background-clip: padding-box;
box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, calc(1 - var(--cell-op, 0)));
}
.heatmap td.cell .cell-n {
position: relative;
/* When the cell is faded to near-white, make the number dark so it
stays legible; otherwise keep it white. */
color: var(--ink);
mix-blend-mode: difference;
filter: invert(1);
}
.heatmap td.row-total {
text-align: center;
font-weight: 700;
color: var(--navy);
padding: 0 .6rem;
}
/* --- Mention network -------------------------------------------------- */
.mention-network {
width: 100%;
height: 520px;
border: 1px solid var(--line);
border-radius: 8px;
margin-top: .5rem;
background: #fafbfc;
}
@media (max-width: 640px) {
.mention-network { height: 380px; }
}
/* =============================================================
/admin/blueprint — readiness donut, module cards, mermaid, checklist
============================================================= */
/* --- Readiness scorecard: donut on the left, sub-scores on the right --- */
.readiness-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 1.5rem;
align-items: center;
}
@media (max-width: 720px) {
.readiness-grid { grid-template-columns: 1fr; }
}
.readiness-donut {
position: relative;
text-align: center;
}
/* Big number + band label layered on top of the Chart.js donut.
The canvas sits in .chart-wrap (height:220px set inline), and this
block absolute-positions over the same space. */
.readiness-band {
margin-top: -170px;
padding-bottom: 40px;
position: relative;
z-index: 1;
pointer-events: none;
}
.readiness-num {
font-size: 2.6rem;
font-weight: 800;
line-height: 1;
color: var(--navy);
}
.readiness-num span { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.readiness-label {
font-size: .88rem;
color: var(--ink-soft);
margin-top: .3rem;
font-weight: 600;
}
.readiness-band-ready .readiness-num { color: #065f46; }
.readiness-band-nearly .readiness-num { color: #92400e; }
.readiness-band-early .readiness-num { color: #9a3412; }
.readiness-band-seed .readiness-num { color: #374151; }
/* Sub-score rows on the right of the readiness card. */
.sub-row { margin: .75rem 0 1rem; }
.sub-head {
display: flex;
align-items: baseline;
gap: .6rem;
margin-bottom: .2rem;
font-size: .92rem;
}
.sub-num {
margin-left: auto;
font-weight: 700;
color: var(--navy);
font-variant-numeric: tabular-nums;
}
.sub-bar {
height: 8px;
background: #eef2f7;
border-radius: 999px;
overflow: hidden;
}
.sub-fill {
height: 100%;
background: linear-gradient(90deg, #3730a3, #1e40af);
transition: width .3s ease;
}
.sub-detail {
font-size: .78rem;
margin-top: .25rem;
}
/* --- Elevator + users ------------------------------------------------ */
.blueprint-hero .elevator {
font-size: 1.1rem;
color: var(--navy);
line-height: 1.5;
margin: .5rem 0 1rem;
font-weight: 500;
}
.user-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: .75rem;
margin-top: .5rem;
}
.user-card {
background: #f8fafc;
border: 1px solid var(--line);
border-radius: 8px;
padding: .75rem 1rem;
}
.user-role {
font-weight: 700;
color: var(--navy);
margin-bottom: .2rem;
}
.user-card p { margin: .2rem 0 .4rem; font-size: .92rem; }
/* --- Mermaid diagram wrapper ----------------------------------------- */
.mermaid-wrap {
margin-top: .75rem;
padding: 1rem;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 8px;
overflow: auto;
}
/* Mermaid
is only visible until the library renders an SVG into
it; we keep its pre-render content readable just in case. */
.mermaid {
background: transparent;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .8rem;
margin: 0;
}
/* --- Module cards ---------------------------------------------------- */
.module-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
margin-top: .5rem;
}
.module-card {
background: #ffffff;
border: 1px solid var(--line);
border-left-width: 4px;
border-radius: 8px;
padding: 1rem 1.1rem;
}
.module-card.conf-high { border-left-color: #10b981; }
.module-card.conf-medium { border-left-color: #f59e0b; }
.module-card.conf-low { border-left-color: #9ca3af; }
.module-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: .5rem;
margin-bottom: .2rem;
}
.module-head h3 { margin: 0; font-size: 1.05rem; }
.module-card ul { padding-left: 1.2rem; margin: .25rem 0 .6rem; }
.module-card ul li { margin: .1rem 0; }
.module-card strong { font-size: .82rem; color: var(--navy); }
.chip-row {
display: flex;
flex-wrap: wrap;
gap: .3rem;
margin: .25rem 0 .5rem;
}
.chip {
display: inline-flex;
align-items: center;
padding: .15rem .55rem;
border-radius: 6px;
font-size: .78rem;
font-weight: 600;
border: 1px solid transparent;
}
.chip-data { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.chip-integ { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; }
/* --- Risks + recommendations + checklist ----------------------------- */
.risk-list, .rec-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.risk-list li {
padding: .65rem .8rem;
border: 1px solid var(--line);
border-left: 3px solid var(--av-red);
border-radius: 6px;
background: #fff;
margin-bottom: .5rem;
}
.risk-list .mitigation {
font-size: .85rem;
color: #065f46;
margin-top: .2rem;
}
.rec-list { display: flex; flex-direction: column; gap: .5rem; }
.rec {
display: flex;
gap: .6rem;
align-items: flex-start;
padding: .55rem .8rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
}
.rec-dot {
flex: 0 0 auto;
width: .55rem; height: .55rem; margin-top: .45rem;
border-radius: 50%;
background: var(--ink-soft);
}
.rec-high .rec-dot { background: #dc2626; }
.rec-medium .rec-dot { background: #f59e0b; }
.checklist { list-style: none; padding: 0; margin: .5rem 0 0; }
.checklist li {
padding: .55rem .9rem;
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: .35rem;
background: #fff;
font-size: .95rem;
}
.checklist .check-ok { background: #ecfdf5; border-color: #a7f3d0; }
.checklist .check-todo { background: #fafafa; color: var(--ink-soft); }
.checklist .check-final {
font-weight: 700;
font-size: 1.02rem;
margin-top: .5rem;
}
/* Theme tag colors (shared across admin pages) */
.theme-tag{display:inline-block;padding:.12rem .55rem;border-radius:999px;
font-size:.72rem;font-weight:600;letter-spacing:.03em;
background:#eef2ff;color:#3730a3}
.theme-process{background:#dbeafe;color:#1e40af}
.theme-data_location{background:#ede9fe;color:#5b21b6}
.theme-pain_point{background:#fee2e2;color:#991b1b}
.theme-time_spent{background:#fef3c7;color:#92400e}
.theme-business_impact{background:#dcfce7;color:#065f46}
.theme-risk_safety{background:#fee2e2;color:#991b1b}
.theme-labour_cost{background:#e0e7ff;color:#3730a3}
.theme-other{background:#e5e7eb;color:#374151}
/* =========================================================================
* Tenant branding: photo-less hero variant
*
* When APP_BRAND_SHOW_HERO_PHOTO is off (e.g. white-label / demo tenants
* that don't own any site photography), the welcome page hero is
* rendered with `hero-brand--no-photo` alongside `hero-brand`. This
* override:
* - removes the Teesport aerial background,
* - paints a solid navy + accent-colour gradient using the CSS vars
* already injected by base.html,
* - overlays a subtle diagonal-stripe pattern so the block still
* looks finished rather than a flat rectangle.
* Everything else (white text, typography, padding) is inherited from
* the base .hero-brand rules.
* ========================================================================= */
.hero-brand.hero-brand--no-photo {
background:
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.04) 0,
rgba(255, 255, 255, 0.04) 2px,
transparent 2px,
transparent 24px
),
linear-gradient(135deg, var(--av-slate) 0%, var(--av-slate-dark) 100%);
}
.hero-brand.hero-brand--no-photo::before { content: none; }
/* Same treatment for the dashboard banner strip — solid tenant colours,
* no Teesport photo. */
.hero-strip.hero-strip--no-photo {
background:
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.04) 0,
rgba(255, 255, 255, 0.04) 2px,
transparent 2px,
transparent 24px
),
linear-gradient(135deg, var(--av-slate) 0%, var(--av-slate-dark) 100%);
}
/* And neutralise the soft watermark on interview-review pages for
* white-label tenants — a faint tint of the slate colour is plenty. */
body[data-tenant-photo="0"] .watermark-soft::before {
background: linear-gradient(180deg, var(--av-slate) 0%, transparent 100%);
opacity: .04;
}
/* ------------------------------------------------------------------
* Day 33 — Epic ε-2: interview progress nav indicator.
*
* C.5 fresh-slot spend declared explicitly. Day 32 inherited zero
* banked C.5 slots, spent zero, banked zero — Day 33 inherits ZERO.
* `.interview-progress` is Day 33's first (and only) fresh slot;
* the cost ledger documents the spend.
*
* Visual contract: small font-size, muted colour, centred text, gentle
* top/bottom margin. Sits above the question prompt on `/interview/ask`
* and reads as a sub-heading; doesn't compete visually with the
*
below it.
*
* Rendered HTML shape (from `app/templates/interview/ask.html`):
*
* Question 3 of ~15
*
* ------------------------------------------------------------------ */
.interview-progress {
margin: 0 0 .75rem 0;
font-size: .9rem;
color: var(--av-muted, #6b7280);
text-align: center;
letter-spacing: .01em;
}
/* ------------------------------------------------------------------
* Day 119 — A2: visual progress bar for interview ask page.
*
* Replaces the header's text-only "N answered" with a track + fill
* bar and a compact summary line showing question count and theme
* coverage. Sits in the `.interview-header` right column.
* ------------------------------------------------------------------ */
.interview-progress-bar {
min-width: 220px;
text-align: right;
}
.progress-bar-track {
width: 100%;
height: 10px;
background: var(--line, #e5e7eb);
border-radius: 999px;
overflow: hidden;
margin-bottom: .35rem;
}
.progress-bar-fill {
height: 100%;
background: var(--teal, #14b8a6);
border-radius: 999px;
transition: width .4s ease;
min-width: 2px;
}
.progress-bar-text {
font-size: .8rem;
color: var(--av-muted, #6b7280);
white-space: nowrap;
}
/* Day 119 — A3: secondary action row (save & continue, send reminder). */
.form-actions-secondary {
margin-top: .5rem;
display: flex;
gap: .75rem;
align-items: center;
flex-wrap: wrap;
}
.form-actions-secondary .inline {
display: inline;
}
/* ------------------------------------------------------------------
* Day 57 — Epic ε-4: skip-a-theme button on /interview/ask.
*
* Lives at the bottom of the question card, separate
* ------------------------------------------------------------------ */
.skip-theme-form {
margin: 1rem 0 0 0;
padding-top: .75rem;
border-top: 1px dashed var(--av-muted, #cbd5e1);
text-align: center;
}
.skip-theme-btn {
font-size: .85rem;
color: var(--av-muted, #6b7280);
font-weight: 400;
}
/* ------------------------------------------------------------------
* Day 58 — Epic ε-5: streaming Claude responses (SSE).
*
* The "Drafting your next question…" intermediate page sits
* between the answer-POST and the next-question GET; it shows a
* spinner + a status line that updates as ``event: status`` ticks
* arrive on the SSE stream. Pure cosmetic surface for the new
* ``app/templates/interview/preparing.html``.
*
* C.5 fresh-slot spend declared explicitly. Day 57 (ε-4) inherited
* 0 banked / spent 2 (skip-theme-form, skip-theme-btn) / banked 0
* — Day 58 inherits ZERO. Spends FOUR fresh slots:
*
* 1. .prepare-card — wider container tone, content
* centred
* 2. .prepare-spinner — pure-CSS rotating ring (no GIFs,
* no extra HTTP)
* 3. .prepare-heading — heading override (tighter margin
* so heading sits closer to spinner)
* 4. .prepare-status — live region styling (slightly
* muted, centred, italic)
*
* Plus two helper blocks (.prepare-hint, .prepare-fallback) that
* piggyback on existing utility-class shapes — those are NOT new
* C.5 slots, just incidental selectors using existing shared rules.
* Counted as four fresh slots; banks zero. Day 59 inherits ZERO.
*
* @keyframes prepare-spin lives in this block too — scoped name
* (``prepare-spin``) won't collide with any existing animation.
*
* Rendered HTML shape (from `app/templates/interview/preparing.html`):
*
*
*
*
* ------------------------------------------------------------------ */
.prepare-card {
text-align: center;
max-width: 32rem;
margin: 2rem auto;
}
.prepare-heading {
margin-top: .75rem;
margin-bottom: .5rem;
}
.prepare-status {
font-style: italic;
color: var(--av-muted, #6b7280);
min-height: 1.25rem; /* prevents layout-shift as text changes */
}
.prepare-hint {
font-size: .875rem;
color: var(--av-muted, #6b7280);
margin-top: 1rem;
}
.prepare-fallback {
margin-top: 1.5rem;
}
.prepare-spinner {
display: inline-block;
width: 2.5rem;
height: 2.5rem;
border: 3px solid rgba(0, 0, 0, .1);
border-top-color: var(--av-accent, #2563eb);
border-radius: 50%;
animation: prepare-spin 0.9s linear infinite;
}
@keyframes prepare-spin {
to { transform: rotate(360deg); }
}
/* Respect reduced-motion preference — replace the spin with a
gentle pulse so users who've asked for less animation still see
"something is happening" without the rotating ring. */
@media (prefers-reduced-motion: reduce) {
.prepare-spinner {
animation: prepare-pulse 1.6s ease-in-out infinite;
}
@keyframes prepare-pulse {
0%, 100% { opacity: .35; }
50% { opacity: 1; }
}
}
/* ------------------------------------------------------------------
* Day 59 — Epic ε-4 admin surfacing.
*
* Sibling to the Day-57 .skip-theme-* selectors. This one is the
* ADMIN-side surface: a small "(N skipped)" suffix in the
* /admin/ "Discovery coverage" rows that fires when one or more
* respondents have hit the Day-57 skip-a-theme button on a
* question of that theme. Renders ONLY when the count > 0 — a
* zero-skip row is byte-identical to the Day 11 shape
* (regression-pinned by tests/test_day59_admin_skip_surface.py).
*
* One fresh C.5 slot. Day 58 inherited 0 / spent 4 / banked 0;
* Day 59 inherits 0, spends 1 fresh slot, banks 0. Documented
* in the Day-59 cost-ledger entry.
*
* Visual posture: amber/orange tone, small font, italic.
* Deliberately distinct from .muted (the percentage suffix
* alongside) so the operator's eye lands on the skip count even
* at a glance. Matches the "it's signal, not noise" reading
* Day 59's prompt called for.
*
* Rendered HTML shape (from `app/templates/admin/home.html`):
* · 2 skipped
*
* ------------------------------------------------------------------ */
.coverage-skipped {
margin-left: .35rem;
font-size: .8rem;
font-style: italic;
color: #b45309; /* amber-700 — distinct from .muted */
}
/* ------------------------------------------------------------------
* Day 60 — Epic ε-5 admin surfacing.
*
* The "Streaming-path utilisation" KPI tile on /admin/ renders one
* line summarising the rolling-7-day share of next-question
* generations that used the SSE streaming path. Two render shapes:
*
* * Non-zero data: "% streamed ( of )" — pct in
* a slightly larger weight to draw the eye, count in .muted.
* * Zero data: a single italic "(no data yet …)" line, .muted
* posture (operator can tell from the typography that this is
* "nothing to show" rather than "0%").
*
* Visual posture: percentage at .95rem semi-bold so the headline
* number reads cleanly even when the surrounding muted count is
* present. Single C.5 slot — no separate selector for the count
* span (it reuses the existing .muted utility).
*
* Rendered HTML shape (from `app/templates/admin/home.html`):
*