/* =========================================================
Fursapoa YWQC — Design System
========================================================= */
:root {
/* Palette — drawn from the FursaPoa YWQC logo:
deep forest green (Fursa / Y / woman), olive-leaf green (Poa / W / youth /
crescent), and an earth-brown accent (the leafed Q — soil & agrifoods). */
--color-primary: #0b5228; /* deep forest green — the woman silhouette / "Fursa" */
--color-primary-hover: #0f6531;
--color-mid: #357f2e;
--color-leaf: #6ba32b; /* olive-leaf green — "Poa" / youth / crescent */
--color-leaf-soft: #e7f2d0;
--color-earth: #6e3d17; /* earth brown — the leafed "Q", soil / agrifoods */
--color-earth-soft: #efe3d6;
--color-warm: #F07828;
--color-warm-hover: #d96820;
--color-warm-soft: #fde6d4;
--color-ink: #1F2933;
--color-muted: #5F6B6B;
--color-faint: #94a39d;
--color-page: #F7F9F4;
--color-card: #FFFFFF;
--color-border: #E4EADD;
--color-border-strong: #d2dac3;
--color-success: #2E7D32;
--color-success-soft: #e3f1e4;
--color-warning: #C9821B;
--color-warning-soft: #fcefd5;
--color-danger: #B5391E;
--color-danger-soft: #f8dfd6;
--color-info: #2A6F97;
--color-info-soft: #dfecf4;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* Radii */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 18px;
--radius-pill: 999px;
/* Shadow */
--shadow-sm: 0 1px 2px rgba(22, 64, 30, 0.04);
--shadow-md: 0 4px 12px rgba(22, 64, 30, 0.06), 0 1px 3px rgba(22, 64, 30, 0.04);
--shadow-lg: 0 12px 32px rgba(22, 64, 30, 0.10), 0 4px 8px rgba(22, 64, 30, 0.04);
/* Type */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* Layout */
--sidebar-w: 256px;
--topbar-h: 64px;
}
/* =========================================================
Reset & base
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--color-page);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: 14.5px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
color: var(--color-ink);
font-weight: 600;
letter-spacing: -0.01em;
}
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 20px; line-height: 1.25; }
h3 { font-size: 16px; line-height: 1.3; }
h4 { font-size: 14px; line-height: 1.35; }
p { margin: 0; }
a { color: var(--color-mid); text-decoration: none; }
a:hover { color: var(--color-primary); text-decoration: underline; }
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
/* =========================================================
Utilities
========================================================= */
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
font-weight: 600;
color: var(--color-muted);
}
/* Text for a screen reader only. Not display:none — that removes it from the accessibility
tree too, which is the opposite of the point. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.muted { color: var(--color-muted); }
.faint { color: var(--color-faint); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-lg { font-size: 16px; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.spacer { flex: 1; }
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
/* =========================================================
Cards
========================================================= */
.card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
}
.card-flush { padding: 0; overflow: hidden; }
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.card-header h3 { font-size: 15px; }
.card-body { padding: var(--space-5); }
/* =========================================================
Stat tiles
========================================================= */
.stat {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.stat-label {
font-size: 12px;
font-weight: 500;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.stat-value {
font-size: 30px;
font-weight: 600;
color: var(--color-ink);
letter-spacing: -0.02em;
line-height: 1.1;
}
.stat-trend {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--color-muted);
}
.stat-trend.up { color: var(--color-success); }
.stat-trend.down { color: var(--color-danger); }
.stat-trend.flat { color: var(--color-muted); }
.stat-trend::before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.stat-trend.up::before { border-bottom: 5px solid var(--color-success); }
.stat-trend.down::before { border-top: 5px solid var(--color-danger); }
.stat-trend.flat::before {
border: none;
width: 8px;
height: 2px;
background: var(--color-muted);
}
/* =========================================================
Badges (status pills)
========================================================= */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
background: var(--color-border);
color: var(--color-ink);
white-space: nowrap;
}
.badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-muted);
}
.badge.success { background: var(--color-success-soft); color: var(--color-success); }
.badge.success::before { background: var(--color-success); }
.badge.warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge.warning::before { background: var(--color-warning); }
.badge.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge.danger::before { background: var(--color-danger); }
.badge.info { background: var(--color-info-soft); color: var(--color-info); }
.badge.info::before { background: var(--color-info); }
.badge.leaf { background: var(--color-leaf-soft); color: var(--color-primary); }
.badge.leaf::before { background: var(--color-leaf); }
.badge.neutral { background: #eef1ea; color: var(--color-muted); }
.badge.neutral::before { background: var(--color-faint); }
.badge.earth { background: var(--color-earth-soft); color: var(--color-earth); }
.badge.earth::before { background: var(--color-earth); }
.badge.plain { background: transparent; padding-left: 0; padding-right: 0; }
.badge.plain::before { display: none; }
/* =========================================================
Buttons
========================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
border-radius: var(--radius-md);
border: 1px solid transparent;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
white-space: nowrap;
text-decoration: none;
line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-warm {
background: var(--color-warm);
color: #fff;
border-color: var(--color-warm);
}
.btn-warm:hover { background: var(--color-warm-hover); border-color: var(--color-warm-hover); }
.btn-secondary {
background: #fff;
color: var(--color-ink);
border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-page); border-color: var(--color-faint); }
.btn-ghost {
background: transparent;
color: var(--color-muted);
border-color: transparent;
}
.btn-ghost:hover { background: var(--color-page); color: var(--color-ink); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btn-icon { padding: 8px; width: 36px; }
/* =========================================================
Tables
========================================================= */
.table-wrap {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-card);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
}
.table-scroll {
overflow-x: auto;
max-height: 520px;
overflow-y: auto;
}
table.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13.5px;
}
.data-table thead th {
position: sticky;
top: 0;
background: var(--color-page);
color: var(--color-muted);
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
padding: 10px 16px;
border-bottom: 1px solid var(--color-border);
z-index: 1;
}
.data-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
color: var(--color-ink);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(125, 196, 32, 0.04); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .nowrap { white-space: nowrap; }
/* =========================================================
Form inputs
========================================================= */
.input,
.select,
.textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: #fff;
color: var(--color-ink);
font-size: 13.5px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder,
.textarea::placeholder { color: var(--color-faint); }
.input:focus,
.select:focus,
.textarea:focus {
outline: none;
border-color: var(--color-mid);
box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}
.textarea { resize: vertical; min-height: 90px; }
.field-label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--color-muted);
margin-bottom: 4px;
}
.search {
position: relative;
min-width: 240px;
}
.search .input {
padding-left: 36px;
}
.search::before {
content: '';
position: absolute;
left: 12px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Segmented filter */
.segmented {
display: inline-flex;
background: var(--color-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding: 3px;
gap: 2px;
}
.segmented button {
background: transparent;
border: none;
padding: 6px 14px;
border-radius: var(--radius-pill);
font-size: 12.5px;
color: var(--color-muted);
cursor: pointer;
font-weight: 500;
}
.segmented button:hover { color: var(--color-ink); }
.segmented button.active {
background: #fff;
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
/* =========================================================
Sidebar / Top bar / App shell
========================================================= */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
.sidebar {
background: var(--color-primary);
color: #d8e5d4;
padding: var(--space-5) var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
position: sticky;
top: 0;
height: 100vh;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
font-weight: 600;
font-size: 15px;
padding: 0 6px;
}
.sidebar-brand .logo {
width: 34px;
height: 34px;
border-radius: 8px;
background: #fff; /* the emblem sits on a light chip on the dark rail */
display: grid;
place-items: center;
color: var(--color-primary);
font-weight: 700;
font-size: 14px;
overflow: hidden;
flex: 0 0 auto;
}
.sidebar-brand .logo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-section {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.45);
padding: var(--space-3) 6px var(--space-2);
}
.sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius-md);
color: rgba(255,255,255,0.78);
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-link:hover {
background: rgba(255,255,255,0.08);
color: #fff;
text-decoration: none;
}
.sidebar-link.active {
background: rgba(125, 196, 32, 0.18);
color: #fff;
}
.sidebar-link .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-leaf);
}
.topbar {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 0 var(--space-6);
height: var(--topbar-h);
background: #fff;
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 10;
}
.topbar .role-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 5px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 500;
}
.topbar .role-chip .avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-leaf-soft);
color: var(--color-primary);
display: grid;
place-items: center;
font-weight: 600;
font-size: 12px;
}
.main-area {
display: flex;
flex-direction: column;
min-width: 0;
}
.content {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* =========================================================
Modal
========================================================= */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(31, 41, 51, 0.42);
display: grid;
place-items: center;
z-index: 50;
padding: var(--space-5);
}
.modal {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header,
.modal-footer {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-footer {
border-bottom: none;
border-top: 1px solid var(--color-border);
justify-content: flex-end;
gap: var(--space-2);
}
.modal-body {
padding: var(--space-5);
overflow-y: auto;
}
/* =========================================================
Empty state
========================================================= */
.empty {
padding: var(--space-7) var(--space-5);
text-align: center;
color: var(--color-muted);
}
.empty h4 { color: var(--color-ink); margin-bottom: 4px; }
/* =========================================================
Sidebar — grouped stakeholder nav
========================================================= */
.sidebar { overflow-y: auto; }
.sidebar-brand .meta {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.sidebar-brand .meta small {
font-size: 11px;
font-weight: 400;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: var(--space-3); }
.nav-group .label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.4);
padding: var(--space-2) 12px;
font-weight: 600;
}
.sidebar-link .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: currentColor;
opacity: 0.85;
}
.sidebar-link .label-text { flex: 1; }
.sidebar-link .right-tag {
font-size: 10px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
font-weight: 500;
letter-spacing: 0.02em;
}
.sidebar-link.active .right-tag {
background: rgba(125,196,32,0.25);
color: #fff;
}
.sidebar-footer {
margin-top: auto;
padding: var(--space-3) 6px var(--space-2);
font-size: 11px;
color: rgba(255,255,255,0.45);
line-height: 1.4;
}
/* =========================================================
Topbar — global filters
========================================================= */
.topbar .filter {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
font-size: 13px;
color: var(--color-ink);
background: #fff;
cursor: pointer;
}
.topbar .filter:hover { background: var(--color-page); }
.topbar .filter .icon { width: 14px; height: 14px; color: var(--color-muted); }
.topbar .filter .caret { width: 12px; height: 12px; color: var(--color-faint); }
.topbar .topbar-title {
font-size: 14px;
color: var(--color-muted);
font-weight: 500;
}
.topbar .topbar-title strong { color: var(--color-ink); font-weight: 600; }
/* =========================================================
Context strip — "you are seeing data for ..."
========================================================= */
.context-strip {
background: linear-gradient(180deg, #fff 0%, var(--color-page) 100%);
border-bottom: 1px solid var(--color-border);
padding: var(--space-4) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.context-strip .ident {
display: flex;
align-items: center;
gap: var(--space-3);
}
.context-strip .role-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--color-leaf-soft);
color: var(--color-primary);
display: grid; place-items: center;
}
.context-strip .role-icon .icon { width: 20px; height: 20px; }
.context-strip h1 {
font-size: 20px;
margin-bottom: 2px;
}
.context-strip .ident .sub {
display: flex; gap: 6px; align-items: center;
color: var(--color-muted);
font-size: 12.5px;
}
.context-strip .ident .sub .dot {
width: 3px; height: 3px; border-radius: 50%;
background: var(--color-faint);
display: inline-block;
}
.context-strip .scope-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: var(--color-leaf-soft);
color: var(--color-primary);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.02em;
}
.context-strip .scope-tag .icon { width: 12px; height: 12px; }
/* =========================================================
Connections strip — the platform's "you're plugged into..." row
========================================================= */
.connections {
padding: var(--space-3) var(--space-6) 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.connect-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
text-decoration: none;
color: inherit;
min-width: 0;
}
.connect-card:hover {
border-color: var(--color-leaf);
box-shadow: var(--shadow-md);
text-decoration: none;
transform: translateY(-1px);
}
.connect-card .ci {
width: 34px; height: 34px;
border-radius: 8px;
background: var(--color-leaf-soft);
color: var(--color-primary);
display: grid; place-items: center;
flex-shrink: 0;
}
.connect-card .ci .icon { width: 16px; height: 16px; }
.connect-card .body { display: flex; flex-direction: column; min-width: 0; }
.connect-card .body .val {
font-size: 16px; font-weight: 600; color: var(--color-ink);
line-height: 1.15;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.connect-card .body .lbl {
font-size: 11.5px; color: var(--color-muted);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.connect-card .arrow {
margin-left: auto;
color: var(--color-faint);
flex-shrink: 0;
}
.connect-card:hover .arrow { color: var(--color-primary); }
.connect-card .arrow .icon { width: 14px; height: 14px; }
/* =========================================================
Stage stepper — the seven operating stages
========================================================= */
.stage-strip {
padding: var(--space-3) var(--space-6) var(--space-3);
background: #fff;
border-bottom: 1px solid var(--color-border);
}
.stage-strip .stage-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.stage-strip .stage-header h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-muted);
font-weight: 600;
}
.stage-strip .stage-header .season {
font-size: 12px;
color: var(--color-muted);
}
.stage-strip .stage-header .season strong { color: var(--color-ink); font-weight: 600; }
.stages {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
position: relative;
}
.stage {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
padding: 6px 4px 0;
}
.stage + .stage::before {
content: '';
position: absolute;
left: -50%;
top: 18px;
width: 100%;
height: 2px;
background: var(--color-border);
z-index: 0;
}
.stage.done + .stage::before,
.stage.done + .stage.done::before,
.stage.done + .stage.active::before {
background: var(--color-leaf);
}
.stage .node {
width: 32px; height: 32px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--color-border);
display: grid; place-items: center;
font-size: 12px; font-weight: 600;
color: var(--color-faint);
position: relative;
z-index: 1;
transition: all 0.15s ease;
}
.stage .node .icon { width: 14px; height: 14px; }
.stage.done .node {
background: var(--color-leaf);
border-color: var(--color-leaf);
color: #fff;
}
.stage.active .node {
background: #fff;
border-color: var(--color-warm);
color: var(--color-warm);
box-shadow: 0 0 0 4px var(--color-warm-soft);
}
.stage.upcoming .node {
background: #fff;
border-color: var(--color-border-strong);
}
.stage .name {
font-size: 11.5px;
margin-top: 6px;
color: var(--color-muted);
font-weight: 500;
letter-spacing: 0.01em;
}
.stage.done .name { color: var(--color-primary); }
.stage.active .name { color: var(--color-warm); font-weight: 600; }
/* =========================================================
Placeholder card — used by stub views in Prompt 1
========================================================= */
.placeholder {
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-card);
padding: var(--space-6);
text-align: center;
color: var(--color-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.placeholder .ph-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: var(--color-leaf-soft);
color: var(--color-primary);
display: grid; place-items: center;
}
.placeholder .ph-icon .icon { width: 26px; height: 26px; }
.placeholder h3 { color: var(--color-ink); }
.placeholder .ph-list {
display: flex; flex-wrap: wrap; gap: var(--space-2);
justify-content: center;
margin-top: var(--space-2);
}
/* Icon sizing helper */
[data-lucide] { stroke-width: 2; }
.icon-sm [data-lucide], .icon[data-lucide] { width: 14px; height: 14px; }
/* =========================================================
Page-nav bar — the trail out of a page
=========================================================
Sits under the top bar and above the content. The sidebar answers "what else can I
open"; this answers "what is this page part of, and how do I leave it". Before it, a
deep page had no rendered exit at all and the browser's Back button was the only one. */
.pagenav {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-6);
min-height: 44px;
background: var(--color-card);
border-bottom: 1px solid var(--color-border);
font-size: 12.5px;
position: sticky;
top: var(--topbar-h);
z-index: 9;
}
.pagenav-back {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 4px 11px 4px 8px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
background: var(--color-page);
color: var(--color-ink);
font-weight: 600;
white-space: nowrap;
}
.pagenav-back:hover {
background: var(--color-leaf-soft);
border-color: var(--color-leaf);
color: var(--color-primary);
text-decoration: none;
}
.pagenav-back .icon { width: 14px; height: 14px; }
.pagenav-back-label {
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
}
/* The trail itself. It scrolls sideways rather than wrapping: a breadcrumb that wraps to a
second line changes the height of every page it appears on, and the crumb that matters
most — the last one — is the one that would be pushed down. */
.pagenav-trail {
display: flex;
align-items: center;
gap: 0;
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.pagenav-trail::-webkit-scrollbar { display: none; }
.pagenav-crumb {
display: flex;
align-items: center;
flex: 0 0 auto;
color: var(--color-muted);
white-space: nowrap;
}
.pagenav-crumb + .pagenav-crumb::before {
content: "";
width: 5px; height: 5px;
margin: 0 10px;
border-top: 1.5px solid var(--color-border-strong);
border-right: 1.5px solid var(--color-border-strong);
transform: rotate(45deg);
flex: 0 0 auto;
}
.pagenav-crumb > a,
.pagenav-crumb > span {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 6px;
border-radius: var(--radius-md);
color: inherit;
}
.pagenav-crumb > a:hover {
background: var(--color-leaf-soft);
color: var(--color-primary);
text-decoration: none;
}
.pagenav-crumb .icon { width: 13px; height: 13px; }
.pagenav-crumb.is-current {
color: var(--color-ink);
font-weight: 600;
}
/* The page you are on is not a link, and the crumb before it is already reachable through
Back — so on a narrow screen the middle of the trail folds away and the two ends stay. */
.pagenav-crumb.is-current > span > span {
max-width: 34ch;
overflow: hidden;
text-overflow: ellipsis;
}
/* The drawer handle. Off on a wide screen: the sidebar is already there. */
.topbar-burger,
.sidebar-close {
display: none;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
flex: 0 0 auto;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
color: var(--color-ink);
cursor: pointer;
}
.topbar-burger:hover { background: var(--color-page); }
.topbar-burger .icon,
.sidebar-close .icon { width: 18px; height: 18px; }
.sidebar-close {
align-self: flex-end;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
color: #fff;
}
.sidebar-close:hover { background: rgba(255, 255, 255, 0.2); }
.nav-scrim {
display: none;
position: fixed;
inset: 0;
z-index: 55;
background: rgba(31, 41, 51, 0.45);
}
/* =========================================================
Narrow screens — the sidebar becomes a drawer
=========================================================
It used to become a full-width block *above* the content, so a phone reader scrolled
through the whole navigation rail, the ecosystem list and the footer before reaching the
page they had opened — and had no way back to it except scrolling up. A drawer is off
the page until asked for, and closes on the backdrop, on Esc, and on any link inside. */
@media (max-width: 920px) {
.app-shell { grid-template-columns: 1fr; }
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(86vw, 300px);
height: 100%;
z-index: 60;
overflow-y: auto;
box-shadow: var(--shadow-lg, 0 18px 48px rgba(15, 32, 20, 0.28));
transform: translateX(-100%);
transition: transform 0.18s ease;
}
.app-shell.nav-open .sidebar { transform: none; }
.app-shell.nav-open .nav-scrim { display: block; }
.topbar-burger,
.sidebar-close { display: inline-flex; }
/* The header stops being one 64px line. Three filter selects, a bell, a name chip and a
sign-out button do not fit across a phone, and with a fixed height they were simply cut
off the right-hand edge. */
.topbar {
height: auto;
min-height: var(--topbar-h);
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
padding: var(--space-3) var(--space-4);
}
.topbar .spacer { display: none; }
/* One line, truncated. Wrapping the org name here pushes the whole header down and the
page identity is repeated in the trail and the context strip below anyway. */
.topbar-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#topbar-filters { order: 10; flex: 1 1 100%; flex-wrap: wrap; }
#topbar-filters .filter { flex: 1 1 8rem; min-width: 0; }
#topbar-filters .filter select { min-width: 0; width: 100%; }
/* Sticky offsets assume a fixed-height header; this one is no longer fixed. */
.pagenav { position: static; padding: 0 var(--space-4); }
/* .dash-wrap sits inside .content and both pad, which on a desktop is a deliberate
inset and on a 390px screen is 64px of the width gone. The inner one keeps it; every
page inside the app shell uses .dash-wrap (landing and no-access replace the whole
body block and never reach here). */
.content { padding: 0; }
.dash-wrap { padding: var(--space-4); }
}
@media (max-width: 560px) {
.topbar .role-chip span:not(.avatar) { display: none; }
.topbar .role-chip { padding: 4px; border: 0; }
.pagenav-back-label { max-width: 12ch; }
/* Only the first and last crumbs survive: Home is the way out, the last one is where you
are, and everything between is one tap away through Back. */
.pagenav-crumb:not(:first-child):not(:last-child) { display: none; }
.pagenav-crumb:last-child:not(:first-child)::before { margin: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
.sidebar { transition: none; }
}
/* =========================================================
Map component — themed SVG choropleth
========================================================= */
.map-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.map-card .map-header {
padding: var(--space-4) var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.map-card .map-header h3 { font-size: 15px; }
.map-card .map-header .meta {
font-size: 12px;
color: var(--color-muted);
}
.map-svg-wrap {
position: relative;
background:
radial-gradient(ellipse at 30% 20%, rgba(125, 196, 32, 0.05) 0%, transparent 60%),
linear-gradient(180deg, #f9fbf5 0%, #f1f5ea 100%);
flex: 1;
min-height: 360px;
}
.map-svg-wrap svg {
width: 100%;
height: 100%;
display: block;
}
.map-country {
fill: #fff;
stroke: var(--color-border-strong);
stroke-width: 0.5;
transition: fill 0.15s ease;
}
.map-country.pilot { fill: var(--color-leaf-soft); stroke: var(--color-leaf); }
.map-country.dimmed { fill: #fafbf6; opacity: 0.6; }
.map-county {
fill: #fff;
stroke: #dee5d2;
stroke-width: 0.4;
transition: fill 0.15s ease, stroke 0.15s ease;
cursor: default;
}
.map-county.pilot {
fill: var(--color-leaf-soft);
stroke: var(--color-leaf);
stroke-width: 1;
cursor: pointer;
}
.map-county.pilot:hover {
fill: #d3eba8;
stroke: var(--color-primary);
}
.map-county.heat-1 { fill: #f1f7e6; }
.map-county.heat-2 { fill: #d8ebb1; }
.map-county.heat-3 { fill: #b3dc72; }
.map-county.heat-4 { fill: #7dc420; }
.map-county.heat-5 { fill: var(--color-mid); }
.map-county.active {
stroke: var(--color-warm);
stroke-width: 1.6;
}
.map-country-border {
fill: none;
stroke: var(--color-primary);
stroke-width: 1.1;
stroke-linejoin: round;
pointer-events: none;
}
.map-graticule {
fill: none;
stroke: #eef2e6;
stroke-width: 0.4;
stroke-dasharray: 2 3;
}
.map-hub-pin {
cursor: pointer;
}
.map-hub-pin .pin-ring {
fill: rgba(240, 120, 40, 0.15);
stroke: var(--color-warm);
stroke-width: 1.5;
transform-origin: center;
animation: pinPulse 2.6s ease-out infinite;
}
.map-hub-pin .pin-dot {
fill: var(--color-warm);
stroke: #fff;
stroke-width: 2;
}
.map-hub-pin .pin-label {
font-size: 11px;
font-weight: 600;
fill: var(--color-primary);
text-anchor: middle;
paint-order: stroke;
stroke: #fff;
stroke-width: 3px;
stroke-linejoin: round;
}
@keyframes pinPulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(2.6); opacity: 0; }
}
.map-country-label {
font-size: 10px;
font-weight: 600;
fill: var(--color-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
text-anchor: middle;
pointer-events: none;
}
.map-tooltip {
position: absolute;
pointer-events: none;
background: var(--color-primary);
color: #fff;
border-radius: 8px;
padding: 8px 12px;
font-size: 12.5px;
line-height: 1.4;
box-shadow: var(--shadow-md);
transform: translate(-50%, calc(-100% - 10px));
opacity: 0;
transition: opacity 0.12s ease;
white-space: nowrap;
z-index: 5;
}
.map-tooltip.show { opacity: 1; }
.map-tooltip strong { display: block; color: #fff; font-weight: 600; font-size: 13px; }
.map-tooltip .sub { color: rgba(255,255,255,0.78); font-size: 11.5px; }
.map-legend {
display: flex;
align-items: center;
gap: 6px;
padding: 8px var(--space-5);
border-top: 1px solid var(--color-border);
font-size: 11px;
color: var(--color-muted);
background: var(--color-page);
}
.map-legend .scale {
display: inline-flex;
border-radius: 4px;
overflow: hidden;
}
.map-legend .scale span {
width: 22px;
height: 10px;
display: inline-block;
}
.map-legend .right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.map-legend .right .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-warm);
box-shadow: 0 0 0 3px rgba(240,120,40,0.18);
}
/* =========================================================
Overview page
========================================================= */
.overview-wrap {
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.welcome {
background:
radial-gradient(ellipse at top right, rgba(125, 196, 32, 0.18) 0%, transparent 60%),
linear-gradient(120deg, var(--color-primary) 0%, #1a4f24 50%, #20602a 100%);
color: #fff;
border-radius: var(--radius-xl);
padding: var(--space-6);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-5);
position: relative;
overflow: hidden;
}
.welcome::before {
content: '';
position: absolute;
right: -80px; bottom: -80px;
width: 320px; height: 320px;
border-radius: 50%;
background: rgba(125, 196, 32, 0.12);
pointer-events: none;
}
.welcome h1 {
color: #fff;
font-size: 30px;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: var(--space-3);
}
.welcome .lead {
color: rgba(255, 255, 255, 0.85);
font-size: 15px;
line-height: 1.55;
max-width: 600px;
}
.welcome .pill-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: var(--space-4);
}
.welcome .pill-row .pill {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
.welcome .side {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
position: relative;
z-index: 1;
}
.welcome .side h4 {
color: #fff;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.welcome .side .row {
display: flex; align-items: center; gap: 8px;
color: rgba(255,255,255,0.88);
font-size: 13.5px;
}
.welcome .side .row .icon { color: var(--color-leaf); width: 16px; height: 16px; }
@media (max-width: 920px) {
.welcome { grid-template-columns: 1fr; }
}
.overview-stat-row {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-3);
}
@media (max-width: 1200px) { .overview-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .overview-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.overview-main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-4);
}
@media (max-width: 1100px) { .overview-main { grid-template-columns: 1fr; } }
.hub-list { display: flex; flex-direction: column; gap: var(--space-2); }
.hub-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-card);
cursor: pointer;
transition: transform 0.1s ease, border-color 0.1s ease;
}
.hub-row:hover { border-color: var(--color-leaf); transform: translateX(2px); }
.hub-row .pin {
width: 30px; height: 30px;
border-radius: 8px;
background: var(--color-warm-soft);
color: var(--color-warm);
display: grid; place-items: center;
flex-shrink: 0;
}
.hub-row .pin .icon { width: 15px; height: 15px; }
.hub-row .body { display: flex; flex-direction: column; min-width: 0; }
.hub-row .body strong { font-size: 13.5px; color: var(--color-ink); }
.hub-row .body small { color: var(--color-muted); font-size: 11.5px; }
.hub-row .right { margin-left: auto; text-align: right; }
.hub-row .right .num { font-weight: 600; font-size: 14px; line-height: 1.1; color: var(--color-ink); }
.hub-row .right .sub { font-size: 11px; color: var(--color-muted); }
/* =========================================================
Info-flow diagram
========================================================= */
.iflow {
display: flex;
flex-direction: column;
gap: 0;
padding: var(--space-5);
}
.iflow-row {
display: grid;
gap: var(--space-3);
}
.iflow-actors { grid-template-columns: repeat(3, 1fr); }
.iflow-platform-row { grid-template-columns: 2.4fr 1fr; gap: var(--space-4); }
.iflow-card {
background: var(--color-card);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 6px;
cursor: default;
text-align: left;
text-decoration: none;
color: inherit;
transition: all 0.15s ease;
position: relative;
}
.iflow-card h4 {
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.iflow-card h4 .icon { width: 16px; height: 16px; color: currentColor; }
.iflow-card .sub { font-size: 12px; color: var(--color-muted); }
.iflow-card.actor {
background: var(--color-leaf-soft);
border-color: #c8e29a;
color: var(--color-primary);
}
.iflow-card.platform {
background: #efeeff;
border-color: #c8c6e8;
color: #322a76;
text-align: center;
align-items: center;
}
.iflow-card.platform h4 { font-size: 16px; }
.iflow-card.platform .sub { color: #5b528f; }
.iflow-card.data {
background: var(--color-leaf-soft);
border-color: #c8e29a;
color: var(--color-primary);
text-align: center;
align-items: center;
}
.iflow-card.msg {
background: var(--color-warm-soft);
border-color: #f3b888;
color: #944613;
text-align: center;
align-items: center;
}
.iflow-card.farmer {
background: #e8f6df;
border-color: #b9d692;
color: var(--color-primary);
text-align: center;
align-items: center;
}
.iflow-card .chips {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 4px;
}
.iflow-card .chips a {
font-size: 11.5px;
background: rgba(255,255,255,0.65);
border: 1px solid currentColor;
border-radius: 999px;
padding: 2px 9px;
text-decoration: none;
color: inherit;
font-weight: 500;
transition: background 0.12s ease;
}
.iflow-card .chips a:hover {
background: #fff;
text-decoration: none;
}
.iflow-arrow {
height: 36px;
display: grid;
place-items: center;
position: relative;
}
.iflow-arrow .line {
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent 0%, var(--color-border-strong) 30%, var(--color-border-strong) 70%, transparent 100%);
}
.iflow-arrow.bi .line {
background: linear-gradient(180deg, var(--color-border-strong) 0%, var(--color-border-strong) 100%);
}
.iflow-arrow .head {
position: absolute;
bottom: 0;
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--color-border-strong);
}
.iflow-arrow.bi .head.top {
top: 0; bottom: auto;
border-top: none;
border-bottom: 6px solid var(--color-border-strong);
}
.iflow-row.iflow-arrows-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.iflow-row.iflow-arrows-3 > .iflow-arrow { width: 100%; }
.iflow-legend {
display: flex;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-3);
margin-top: var(--space-2);
border-top: 1px dashed var(--color-border);
font-size: 11.5px;
color: var(--color-muted);
}
.iflow-legend .swatch {
display: inline-flex; align-items: center; gap: 6px;
}
.iflow-legend .sq {
width: 12px; height: 12px; border-radius: 3px;
border: 1px solid currentColor;
background: currentColor;
}
.iflow-legend .swatch.actor { color: #c8e29a; }
.iflow-legend .swatch.platform{ color: #c8c6e8; }
.iflow-legend .swatch.msg { color: #f3b888; }
/* =========================================================
"What this is / What this is not" panel
========================================================= */
.is-isnot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
@media (max-width: 760px) { .is-isnot { grid-template-columns: 1fr; } }
.is-isnot .card { padding: var(--space-5); }
.is-isnot .card.is { border-top: 4px solid var(--color-leaf); }
.is-isnot .card.isnot { border-top: 4px solid var(--color-warm); }
.is-isnot h3 { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.is-isnot h3 .icon { width: 18px; height: 18px; }
.is-isnot .card.is h3 .icon { color: var(--color-mid); }
.is-isnot .card.isnot h3 .icon { color: var(--color-warm); }
.is-isnot ul { padding-left: var(--space-4); margin: 0; color: var(--color-ink); }
.is-isnot li { margin-bottom: 6px; font-size: 13.5px; }
/* =========================================================
Activity feed
========================================================= */
.activity { display: flex; flex-direction: column; gap: var(--space-2); }
.activity-row {
display: flex; gap: var(--space-3); align-items: flex-start;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
}
.activity-row:last-child { border-bottom: none; }
.activity-row .ic {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--color-leaf-soft);
color: var(--color-primary);
display: grid; place-items: center;
flex-shrink: 0;
}
.activity-row .ic.warn { background: var(--color-warm-soft); color: var(--color-warm); }
.activity-row .ic.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.activity-row .ic.info { background: var(--color-info-soft); color: var(--color-info); }
.activity-row .ic .icon { width: 15px; height: 15px; }
.activity-row .body { flex: 1; min-width: 0; }
.activity-row .body strong { display: block; font-size: 13.5px; color: var(--color-ink); }
.activity-row .body small { font-size: 12px; color: var(--color-muted); }
.activity-row .time {
font-size: 11px; color: var(--color-faint);
white-space: nowrap;
}
.section-title {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600; color: var(--color-ink);
margin-bottom: var(--space-3);
}
.section-title .icon { width: 16px; height: 16px; color: var(--color-mid); }
.chart-box {
position: relative;
height: 280px;
}
/* =========================================================
Phase upgrade: landing, shell controls, drawers, demo actions
========================================================= */
.app-shell.landing-mode {
display: block;
}
.app-shell.landing-mode .sidebar,
.app-shell.landing-mode .topbar,
.app-shell.landing-mode .pagenav {
display: none;
}
.landing {
min-height: 100vh;
padding: var(--space-6);
background:
radial-gradient(circle at 18% 12%, rgba(125, 196, 32, 0.16), transparent 34%),
linear-gradient(180deg, #f9fbf5 0%, var(--color-page) 100%);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.landing-hero {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
gap: var(--space-5);
align-items: stretch;
}
.landing-copy {
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 320px;
}
.landing-brand {
display: flex;
align-items: center;
gap: var(--space-3);
}
.landing-brand .logo-mark {
width: 44px;
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
background: #fff;
color: var(--color-primary);
font-weight: 800;
overflow: hidden;
flex: 0 0 auto;
}
.landing-brand .logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.landing-brand strong,
.landing-copy h1 { color: #fff; }
.landing-brand small {
display: block;
color: rgba(255,255,255,0.68);
font-size: 12px;
}
.landing-copy h1 {
max-width: 720px;
font-size: 42px;
line-height: 1.05;
margin-top: var(--space-6);
}
.landing-copy p {
color: rgba(255,255,255,0.82);
max-width: 760px;
font-size: 15px;
line-height: 1.6;
margin-top: var(--space-3);
}
.landing-pills {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
margin-top: var(--space-5);
}
.landing-pills span,
.guardrail-badge,
.demo-badge {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
}
.landing-pills span {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.16);
color: #fff;
}
.landing-pills .guardrail-badge {
background: var(--color-warm-soft);
border-color: rgba(240,120,40,0.35);
color: var(--color-warm);
}
.guardrail-badge {
background: var(--color-warm-soft);
color: var(--color-warm);
}
.demo-badge {
background: var(--color-info-soft);
color: var(--color-info);
width: fit-content;
}
.landing-snapshot {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-5);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.landing-snapshot h3 {
display: flex;
align-items: center;
gap: 8px;
}
.snapshot-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.snapshot-grid div {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
background: var(--color-page);
}
.snapshot-grid strong {
display: block;
font-size: 28px;
color: var(--color-primary);
}
.snapshot-grid small {
color: var(--color-muted);
font-size: 12px;
}
.role-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-4);
}
.role-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-3);
}
.role-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
color: inherit;
text-decoration: none;
min-height: 230px;
box-shadow: var(--shadow-sm);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.role-card:hover {
transform: translateY(-2px);
border-color: var(--color-leaf);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.role-card-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.role-card-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: grid;
place-items: center;
color: var(--color-primary);
background: var(--color-leaf-soft);
}
.role-card h2 {
font-size: 16px;
}
.role-card p {
color: var(--color-muted);
font-size: 13px;
}
.role-meta {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--color-muted);
font-size: 12px;
}
.role-card-footer {
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 3px;
}
.role-card-footer strong {
color: var(--color-primary);
}
.role-card-footer small {
color: var(--color-muted);
font-size: 11.5px;
}
@media (max-width: 1180px) {
.role-grid,
.role-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.landing { padding: var(--space-4); }
.landing-copy h1 { font-size: 32px; }
.role-grid,
.role-strip { grid-template-columns: 1fr; }
}
.filter-select select {
appearance: none;
border: none;
background: transparent;
color: var(--color-ink);
font-weight: 500;
cursor: pointer;
outline: none;
max-width: 170px;
}
.notify-wrap {
position: relative;
}
.notify-dot {
min-width: 18px;
height: 18px;
border-radius: 999px;
background: var(--color-warm);
color: #fff;
font-size: 10px;
display: inline-grid;
place-items: center;
margin-left: -4px;
}
.notify-popover {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 340px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 40;
overflow: hidden;
}
.np-head {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.np-head small {
color: var(--color-muted);
}
.np-item {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--color-border);
}
.np-item:last-child { border-bottom: none; }
.np-item:hover {
background: var(--color-page);
text-decoration: none;
}
.np-ico {
width: 30px;
height: 30px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--color-leaf-soft);
color: var(--color-primary);
}
.np-item.warning .np-ico { background: var(--color-warning-soft); color: var(--color-warning); }
.np-item.danger .np-ico { background: var(--color-danger-soft); color: var(--color-danger); }
.np-item.info .np-ico { background: var(--color-info-soft); color: var(--color-info); }
.np-item.success .np-ico { background: var(--color-success-soft); color: var(--color-success); }
.np-item strong {
display: block;
font-size: 13px;
}
.np-item small {
color: var(--color-muted);
font-size: 11.5px;
}
.stage {
border: none;
background: transparent;
font-family: inherit;
cursor: pointer;
}
.stage:focus-visible,
.role-card:focus-visible,
.sidebar-link:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
.phone-tab:focus-visible {
outline: 3px solid rgba(125,196,32,0.45);
outline-offset: 2px;
}
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(31,41,51,0.36);
z-index: 80;
opacity: 0;
transition: opacity 0.18s ease;
display: flex;
justify-content: flex-end;
}
.drawer-backdrop.show { opacity: 1; }
.drawer {
width: min(520px, 100vw);
height: 100%;
background: #fff;
box-shadow: var(--shadow-lg);
transform: translateX(24px);
transition: transform 0.18s ease;
display: flex;
flex-direction: column;
}
.drawer-backdrop.show .drawer { transform: translateX(0); }
.drawer-header,
.drawer-footer {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.drawer-footer {
border-bottom: none;
border-top: 1px solid var(--color-border);
justify-content: flex-end;
}
.drawer-body {
padding: var(--space-5);
overflow-y: auto;
}
.callout {
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-leaf);
border-radius: var(--radius-md);
padding: var(--space-3);
background: var(--color-page);
color: var(--color-ink);
font-size: 13px;
display: flex;
gap: var(--space-2);
align-items: flex-start;
}
.callout.warn { border-left-color: var(--color-warm); background: var(--color-warm-soft); }
.callout.danger { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.stage-metric-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}
.stage-metric-grid div {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
background: #fff;
}
.stage-metric-grid strong {
display: block;
font-size: 20px;
color: var(--color-primary);
}
.stage-metric-grid small {
color: var(--color-muted);
font-size: 11px;
}
.stage-detail-status {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-transform: capitalize;
}
.stage-detail-status.done { background: var(--color-success-soft); color: var(--color-success); }
.stage-detail-status.active { background: var(--color-warm-soft); color: var(--color-warm); }
.stage-detail-status.upcoming { background: #eef1ea; color: var(--color-muted); }
.photo-empty {
min-height: 220px;
border-radius: var(--radius-md);
background: var(--color-leaf-soft);
color: var(--color-primary);
display: grid;
place-items: center;
text-align: center;
padding: var(--space-5);
}
.mini-timeline {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.mini-timeline div {
border-left: 3px solid var(--color-border);
padding: var(--space-2) var(--space-3);
}
.mini-timeline div.done { border-left-color: var(--color-leaf); }
.mini-timeline div.active { border-left-color: var(--color-warm); background: var(--color-warm-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mini-timeline strong { display: block; }
.mini-timeline small { color: var(--color-muted); }
.toast.info { background: var(--color-info); }
.toast.warning { background: var(--color-warning); }
.toast.danger { background: var(--color-danger); }
.toast.success { background: var(--color-primary); }
.toast.info .icon,
.toast.warning .icon,
.toast.danger .icon,
.toast.success .icon { color: #fff; }
.sms-reply {
border-top: 1px solid #d9d9df;
}
@media print {
body * { visibility: hidden; }
.report-preview,
.report-preview * { visibility: visible; }
.report-preview {
position: absolute;
inset: 0;
width: 100%;
box-shadow: none;
border: none;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
.chart-box.tall { height: 320px; }
.chart-box.short { height: 220px; }
/* =========================================================
Dashboard layouts (Coordinator and beyond)
========================================================= */
.dash-wrap {
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.dash-grid {
display: grid;
gap: var(--space-4);
}
.dash-grid-2 { grid-template-columns: 2fr 1fr; }
.dash-grid-3 { grid-template-columns: 1.6fr 1fr 1fr; }
.dash-grid-12 { grid-template-columns: 1fr 2fr; }
.dash-grid-21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) {
.dash-grid-2, .dash-grid-3, .dash-grid-12, .dash-grid-21 {
grid-template-columns: 1fr;
}
}
/* The per-role aggregation charts. Sized by content rather than by a fixed column count,
because how many a dashboard has is a view decision: one goes full width, two sit side
by side, and a narrow window stacks them — with no class to keep in step. */
.chart-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
/* Between a chart's title and its canvas: what the aggregation is of, and whose scope it
reflects. These charts are role-scoped, so "demand" means something different on each
dashboard and the chart has to say which — and it is where an exclusion (expired offers,
a folded tail) gets declared instead of silently disappearing. */
.chart-note {
font-size: 12px;
color: var(--color-muted);
margin: -4px 0 var(--space-3);
line-height: 1.45;
}
.kpi-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
}
@media (max-width: 920px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Donut comparison block */
.donut-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-4);
align-items: center;
}
@media (max-width: 720px) { .donut-row { grid-template-columns: 1fr; } }
.donut-row .legend-list {
display: flex; flex-direction: column; gap: 8px;
font-size: 13px;
}
.donut-row .legend-list .li {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.donut-row .legend-list .swatch {
width: 10px; height: 10px; border-radius: 3px;
}
.donut-row .legend-list .li strong { font-weight: 600; }
.donut-row .legend-list .li .pct { margin-left: auto; color: var(--color-muted); font-size: 12px; }
/* Matching board */
.match-list { display: flex; flex-direction: column; gap: var(--space-2); }
.match-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1.4fr;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.match-row .col { display: flex; flex-direction: column; gap: 2px; }
.match-row .col small { font-size: 11.5px; color: var(--color-muted); }
.match-row .col strong { font-size: 13.5px; color: var(--color-ink); }
.match-row .link {
display: grid; place-items: center;
height: 24px;
position: relative;
}
.match-row .link::before {
content: '';
position: absolute;
left: 8px; right: 8px;
top: 50%;
height: 2px;
background: linear-gradient(90deg, var(--color-leaf), var(--color-warm));
}
.match-row .link .badge {
position: relative;
background: #fff;
padding: 2px 8px;
}
@media (max-width: 720px) { .match-row { grid-template-columns: 1fr; } .match-row .link::before { display:none; } }
/* Compose / broadcast form */
.compose {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 760px) { .compose { grid-template-columns: 1fr; } }
.compose .field-group { display: flex; flex-direction: column; gap: var(--space-2); }
.channel-toggle { display: flex; gap: 8px; }
.channel-toggle .opt {
flex: 1;
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
cursor: pointer;
font-size: 13.5px;
font-weight: 500;
color: var(--color-muted);
user-select: none;
}
.channel-toggle .opt .icon { width: 16px; height: 16px; }
.channel-toggle .opt.active {
border-color: var(--color-mid);
color: var(--color-primary);
background: var(--color-leaf-soft);
}
.audience-count {
background: var(--color-leaf-soft);
border: 1px solid var(--color-leaf);
color: var(--color-primary);
padding: 10px 14px;
border-radius: var(--radius-md);
display: flex; align-items: center; gap: 10px;
font-size: 13.5px;
}
.audience-count strong { font-size: 18px; font-weight: 600; color: var(--color-primary); }
/* Feedback inbox row */
.fb-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
}
.fb-row .severity {
width: 6px;
align-self: stretch;
border-radius: 3px;
}
.fb-row .severity.high { background: var(--color-danger); }
.fb-row .severity.medium { background: var(--color-warning); }
.fb-row .severity.low { background: var(--color-info); }
.fb-row .body strong { display: block; font-size: 13.5px; color: var(--color-ink); margin-bottom: 2px; }
.fb-row .body small { color: var(--color-muted); font-size: 12px; }
.fb-row .actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Filter chips bar (above tables) */
.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-bar .chip {
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-muted);
cursor: pointer;
font-weight: 500;
}
.chip-bar .chip:hover { border-color: var(--color-leaf); color: var(--color-ink); }
.chip-bar .chip.active { background: var(--color-leaf-soft); color: var(--color-primary); border-color: var(--color-leaf); }
/* Toast (broadcast confirmation) */
.toast {
position: fixed;
right: var(--space-5);
bottom: var(--space-5);
background: var(--color-primary);
color: #fff;
padding: 12px 16px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: flex; align-items: center; gap: 10px;
font-size: 13.5px;
z-index: 100;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .icon { color: var(--color-leaf); width: 16px; height: 16px; }
/* =========================================================
Variety catalog (KEPHIS/KALRO)
========================================================= */
.variety-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-4);
}
.variety-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.variety-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.variety-card .photo {
position: relative;
aspect-ratio: 4 / 3;
background:
linear-gradient(135deg, #d8ebb1 0%, #b3dc72 100%);
overflow: hidden;
}
.variety-card .photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.variety-card .photo .photo-placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
color: var(--color-primary);
font-size: 12px;
font-weight: 500;
background:
repeating-linear-gradient(45deg, #d8ebb1 0px, #d8ebb1 12px, #cbe39d 12px, #cbe39d 24px);
}
.variety-card .photo .photo-placeholder .icon { width: 30px; height: 30px; opacity: 0.5; }
.variety-card .photo .cert {
position: absolute;
top: 8px; right: 8px;
background: rgba(22, 64, 30, 0.9);
color: #fff;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
display: inline-flex; align-items: center; gap: 4px;
backdrop-filter: blur(4px);
}
.variety-card .photo .cert .icon { width: 11px; height: 11px; }
.variety-card .photo .crop-tag {
position: absolute;
bottom: 8px; left: 8px;
background: rgba(255,255,255,0.94);
color: var(--color-primary);
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.variety-card .body { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.variety-card .body h3 { font-size: 15px; margin: 0; color: var(--color-ink); }
.variety-card .body .tagline { font-size: 12.5px; color: var(--color-muted); }
.variety-card .body .traits {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 4px;
}
.variety-card .body .traits .trait {
font-size: 11px;
background: var(--color-leaf-soft);
color: var(--color-primary);
padding: 2px 8px;
border-radius: 999px;
}
.variety-card .body .stats {
display: grid; grid-template-columns: 1fr 1fr;
gap: 6px 12px;
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px dashed var(--color-border);
font-size: 12px;
}
.variety-card .body .stats .row {
display: flex; flex-direction: column;
}
.variety-card .body .stats .row small { color: var(--color-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.variety-card .body .stats .row strong { color: var(--color-ink); font-weight: 600; font-size: 13px; }
.variety-card .body .breeder {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px;
color: var(--color-muted);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
margin-top: var(--space-2);
}
.variety-card .body .breeder .icon { width: 12px; height: 12px; color: var(--color-mid); }
/* Variety drawer / detail */
.variety-detail-img {
width: 100%; max-height: 320px;
object-fit: cover; object-position: center;
border-radius: var(--radius-md);
background: var(--color-leaf-soft);
}
.cost-band {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--color-warm-soft);
color: var(--color-warm);
padding: 4px 10px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
}
/* Availability list */
.avail-list { display: flex; flex-direction: column; gap: var(--space-2); }
.avail-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
}
.avail-row .ico {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--color-leaf-soft);
color: var(--color-primary);
display: grid; place-items: center;
}
.avail-row .ico .icon { width: 14px; height: 14px; }
.avail-row .body strong { font-size: 13px; color: var(--color-ink); }
.avail-row .body small { color: var(--color-muted); font-size: 11.5px; }
.avail-row .qty { font-weight: 600; color: var(--color-ink); }
.avail-row .price { font-size: 12px; color: var(--color-muted); }
/* =========================================================
Partner — donor report preview
========================================================= */
.report-preview {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.report-preview .head {
border-bottom: 2px solid var(--color-primary);
padding-bottom: var(--space-3);
}
.report-preview .head .logo {
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid);
font-weight: 600;
}
.report-preview .head h2 { margin-top: 4px; }
.report-preview .head .sub { color: var(--color-muted); font-size: 13px; margin-top: 4px; }
.report-preview .section h4 {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--color-mid);
margin-bottom: 6px;
}
.report-preview .mini-stat {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.report-preview .mini-stat .ms {
text-align: center;
padding: var(--space-3);
background: var(--color-leaf-soft);
border-radius: var(--radius-md);
}
.report-preview .mini-stat .ms strong { display: block; font-size: 22px; color: var(--color-primary); font-weight: 600; }
.report-preview .mini-stat .ms small { font-size: 11px; color: var(--color-muted); }
.anonymous-banner {
background: var(--color-info-soft);
border: 1px solid #b8d4e3;
color: var(--color-info);
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 13px;
display: flex; align-items: center; gap: 10px;
}
.anonymous-banner .icon { width: 16px; height: 16px; }
/* =========================================================
Farmer phone mockup
========================================================= */
.phone-stage {
display: grid;
grid-template-columns: 360px 1fr;
gap: var(--space-5);
padding: var(--space-5) var(--space-6);
align-items: start;
}
@media (max-width: 920px) { .phone-stage { grid-template-columns: 1fr; justify-items: center; } }
.phone-frame {
width: 360px;
height: 720px;
border-radius: 42px;
background: #1a1a1a;
padding: 14px;
position: relative;
box-shadow:
0 28px 60px -20px rgba(20, 30, 20, 0.4),
0 8px 24px rgba(20, 30, 20, 0.18);
display: flex;
flex-direction: column;
}
.phone-frame::before {
content: '';
position: absolute;
top: 18px; left: 50%;
transform: translateX(-50%);
width: 120px; height: 24px;
background: #1a1a1a;
border-radius: 0 0 18px 18px;
z-index: 2;
}
.phone-frame .phone-screen {
flex: 1;
background: var(--color-page);
border-radius: 30px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.phone-status {
height: 38px;
background: transparent;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 24px 4px;
font-size: 11px;
font-weight: 600;
color: var(--color-ink);
position: relative;
z-index: 1;
}
.phone-status .right { display: flex; gap: 4px; align-items: center; }
.phone-status .right .icon { width: 12px; height: 12px; }
.phone-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Channel switcher */
.phone-tabs {
display: flex;
gap: 4px;
padding: 0 var(--space-3) var(--space-3);
margin-top: var(--space-2);
}
.phone-tab {
flex: 1;
padding: 7px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
font-size: 11.5px;
color: var(--color-muted);
cursor: pointer;
font-weight: 500;
text-align: center;
display: flex; align-items: center; justify-content: center; gap: 4px;
}
.phone-tab .icon { width: 12px; height: 12px; }
.phone-tab.active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
/* WhatsApp UI */
.wa-header {
background: #075E54;
color: #fff;
padding: 10px 14px;
display: flex; align-items: center; gap: 10px;
font-size: 13px;
}
.wa-header .avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--color-leaf);
color: var(--color-primary);
display: grid; place-items: center;
font-weight: 600; font-size: 12px;
}
.wa-header .name { display: flex; flex-direction: column; line-height: 1.1; flex: 1; }
.wa-header .name small { font-size: 10.5px; opacity: 0.75; }
.wa-header .icons { display: flex; gap: 8px; }
.wa-header .icons .icon { width: 16px; height: 16px; }
.wa-body {
flex: 1;
background:
repeating-linear-gradient(45deg, #ECE5DD 0px, #ECE5DD 12px, #E5DDD2 12px, #E5DDD2 13px),
#ECE5DD;
padding: 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 12px;
color: #303030;
}
.wa-msg {
background: #fff;
padding: 8px 10px 4px;
border-radius: 8px;
max-width: 86%;
align-self: flex-start;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
position: relative;
}
.wa-msg.me {
background: #DCF8C6;
align-self: flex-end;
}
.wa-msg .time {
font-size: 10px;
color: #999;
text-align: right;
margin-top: 2px;
}
.wa-msg .quick { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.wa-msg .quick button {
background: transparent;
border: 1px solid #25D366;
color: #075E54;
padding: 6px 8px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.wa-input {
display: flex; gap: 8px;
padding: 8px 12px;
background: #F0F0F0;
align-items: center;
}
.wa-input .input {
background: #fff;
border-radius: 20px;
padding: 7px 12px;
font-size: 12px;
flex: 1;
border: none;
}
.wa-input .send {
width: 30px; height: 30px;
background: #25D366;
color: #fff;
border-radius: 50%;
display: grid; place-items: center;
border: none;
}
.wa-input .send .icon { width: 14px; height: 14px; }
/* USSD UI */
.ussd-screen {
flex: 1;
background: #1a1a1a;
color: #b8e986;
font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 12.5px;
line-height: 1.5;
position: relative;
}
.ussd-screen .session {
border: 1px solid #2a4d18;
padding: 14px;
border-radius: 4px;
background: #0d1a09;
white-space: pre-wrap;
flex: 1;
}
.ussd-screen .session strong { color: #ffd479; }
.ussd-screen .actions { display: flex; gap: 8px; }
.ussd-screen .actions button {
flex: 1;
background: #2a4d18;
color: #b8e986;
border: 1px solid #4a7e2c;
padding: 8px;
border-radius: 4px;
font-family: inherit;
font-size: 12px;
cursor: pointer;
}
.ussd-screen .reply-input {
background: #0d1a09;
border: 1px solid #2a4d18;
color: #b8e986;
padding: 8px;
border-radius: 4px;
font-family: inherit;
font-size: 12px;
}
/* SMS UI */
.sms-list {
flex: 1;
background: #f5f5f7;
padding: 10px;
overflow-y: auto;
display: flex; flex-direction: column;
gap: 6px;
font-size: 12px;
}
.sms-msg {
background: #fff;
padding: 8px 10px;
border-radius: 12px;
max-width: 86%;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
color: #1c1c1e;
align-self: flex-start;
position: relative;
}
.sms-msg.me { background: #007aff; color: #fff; align-self: flex-end; }
.sms-msg .meta { font-size: 9.5px; color: #8e8e93; margin-bottom: 3px; }
.sms-msg.me .meta { color: rgba(255,255,255,0.7); }
/* Right side panel for phone view */
.phone-info {
display: flex; flex-direction: column;
gap: var(--space-4);
}
/* =========================================================
Test page (Prompt 1 acceptance — legacy, no longer used by index)
========================================================= */
.test-page {
max-width: 1100px;
margin: 0 auto;
padding: var(--space-7) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.test-page header h1 {
font-size: 28px;
}
.test-page .sample-row {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) { .test-page .sample-row { grid-template-columns: 1fr; } }
.chart-box {
position: relative;
height: 280px;
}
/* ── Floating chat widget ──────────────────────────────────────────────────
The stakeholder counterpart to the WhatsApp chatbot: leading questions in the
corner instead of a form. Uses the existing palette tokens so it reads as part
of the shell rather than a bolted-on third-party bubble. */
/* Scoped to the widget deliberately. A bare `[x-cloak]` rule would newly apply to the
topbar notification popup and the signup form, which have always carried x-cloak with no
such rule — if Alpine ever failed to initialise on a page, those would go from a brief
flash of content to permanently invisible. Not a change worth making as a side effect. */
.fp-widget[x-cloak] { display: none !important; }
.fp-widget {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 900;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: .6rem;
font-size: .9rem;
}
.fp-widget__launcher {
position: relative;
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .7rem 1.1rem;
border: none;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(11, 82, 40, .28);
transition: background .15s ease, transform .15s ease;
}
.fp-widget__launcher:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.fp-widget__launcher:focus-visible { outline: 3px solid var(--color-leaf); outline-offset: 2px; }
.fp-widget__launcher-icon { display: inline-flex; }
/* Unseen-nudge dot — drops away for good once the panel has been opened. */
.fp-widget__dot {
position: absolute;
top: .45rem; right: .55rem;
width: .5rem; height: .5rem;
border-radius: 50%;
background: var(--color-warm);
box-shadow: 0 0 0 2px var(--color-primary);
}
.fp-widget__panel {
width: min(23rem, calc(100vw - 2.5rem));
max-height: min(30rem, calc(100vh - 6rem));
display: flex;
flex-direction: column;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 18px 46px rgba(31, 41, 51, .18);
overflow: hidden;
}
.fp-widget__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
padding: .8rem 1rem;
background: var(--color-primary);
color: #fff;
}
.fp-widget__title { margin: 0; font-weight: 650; font-size: .92rem; }
.fp-widget__sub { margin: .1rem 0 0; font-size: .74rem; opacity: .82; }
.fp-widget__close {
border: none; background: none; color: #fff;
font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0 .15rem;
}
.fp-widget__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fp-widget__log {
flex: 1 1 auto;
overflow-y: auto;
padding: .9rem 1rem;
display: flex;
flex-direction: column;
gap: .5rem;
background: var(--color-page);
}
.fp-widget__turn { display: flex; }
.fp-widget__turn p {
margin: 0;
padding: .5rem .75rem;
border-radius: 12px;
max-width: 88%;
line-height: 1.45;
}
.fp-widget__turn--bot { justify-content: flex-start; }
.fp-widget__turn--bot p {
background: var(--color-card);
border: 1px solid var(--color-border);
border-bottom-left-radius: 3px;
color: var(--color-ink);
}
.fp-widget__turn--me { justify-content: flex-end; }
.fp-widget__turn--me p {
background: var(--color-leaf-soft);
border: 1px solid var(--color-border-strong);
border-bottom-right-radius: 3px;
color: var(--color-ink);
}
.fp-widget__typing { display: inline-flex; gap: .22rem; align-items: center; }
.fp-widget__typing span {
width: .38rem; height: .38rem; border-radius: 50%;
background: var(--color-faint);
animation: fp-widget-bounce 1.1s infinite ease-in-out;
}
.fp-widget__typing span:nth-child(2) { animation-delay: .15s; }
.fp-widget__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes fp-widget-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: .5; }
30% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.fp-widget__typing span { animation: none; }
.fp-widget__launcher { transition: none; }
}
.fp-widget__foot {
flex: 0 0 auto;
padding: .75rem 1rem .9rem;
border-top: 1px solid var(--color-border);
background: var(--color-card);
display: flex;
flex-direction: column;
gap: .5rem;
}
.fp-widget__options { display: flex; flex-wrap: wrap; gap: .4rem; }
.fp-widget__opt {
padding: .42rem .7rem;
border: 1px solid var(--color-primary);
border-radius: 999px;
background: transparent;
color: var(--color-primary);
font: inherit;
font-size: .84rem;
cursor: pointer;
}
.fp-widget__opt:hover:not(:disabled) { background: var(--color-leaf-soft); }
.fp-widget__opt:disabled { opacity: .5; cursor: default; }
.fp-widget__form { display: flex; gap: .4rem; }
.fp-widget__input {
flex: 1 1 auto;
min-width: 0;
padding: .5rem .65rem;
border: 1px solid var(--color-border-strong);
border-radius: 8px;
font: inherit;
color: var(--color-ink);
}
.fp-widget__input:focus-visible { outline: 2px solid var(--color-leaf); outline-offset: 1px; }
.fp-widget__send, .fp-widget__restart {
padding: .5rem .85rem;
border: none;
border-radius: 8px;
background: var(--color-primary);
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.fp-widget__send:disabled { opacity: .45; cursor: default; }
.fp-widget__restart { align-self: flex-start; }
/* Typeahead for lists longer than the panel (counties, farmers, varieties). */
.fp-widget__search { margin-bottom: var(--space-2); }
.fp-widget__search .fp-widget__input { width: 100%; }
.fp-widget__skip, .fp-widget__hint {
background: none; border: none; padding: 0; text-align: left;
font-size: .78rem; color: var(--color-muted);
}
.fp-widget__skip { cursor: pointer; text-decoration: underline; align-self: flex-start; }
.fp-widget__hint { margin: 0; }
@media (max-width: 30rem) {
.fp-widget { right: .75rem; bottom: .75rem; left: .75rem; align-items: stretch; }
.fp-widget__panel { width: auto; }
.fp-widget__launcher { align-self: flex-end; }
}
/* ── Demand statements: provenance + review queue ──────────────────────────
Only the pieces the shell did not already have. Tiles reuse .kpi-row/.stat,
tables reuse .table-wrap/.data-table. */
.statements-tiles { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82em; }
/* Status and channel pills. A bare `.pill` only existed scoped to .welcome. */
.data-table .pill,
.pill-ok, .pill-warn, .pill-muted,
.pill-group, .pill-chatbot, .pill-web, .pill-coordinator {
display: inline-block;
padding: .12rem .5rem;
border-radius: 999px;
font-size: 11px;
font-weight: 650;
letter-spacing: .01em;
white-space: nowrap;
border: 1px solid transparent;
}
.pill-ok { background: var(--color-leaf-soft); color: var(--color-primary); border-color: var(--color-border-strong); }
.pill-warn { background: var(--color-warm-soft); color: var(--color-warm-hover); border-color: #f6d3b4; }
.pill-muted { background: #eef0ee; color: var(--color-muted); border-color: var(--color-border); }
.pill-group { background: var(--color-leaf-soft); color: var(--color-primary); }
.pill-chatbot { background: #e2eef8; color: #1c5480; }
.pill-web { background: var(--color-earth-soft); color: var(--color-earth); }
.pill-coordinator { background: #eef0ee; color: var(--color-muted); }
.callout-warn {
display: flex;
align-items: flex-start;
gap: .5rem;
border-left: 3px solid var(--color-warm);
background: var(--color-warm-soft);
padding: .7rem .9rem;
border-radius: var(--radius-sm, 6px);
margin: 0;
}
.filter-row {
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: center;
}
.filter-row input[type="search"],
.filter-row select {
padding: .4rem .55rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm, 6px);
font: inherit;
font-size: .88rem;
color: var(--color-ink);
background: var(--color-card);
}
.filter-row input[type="search"] { min-width: 15rem; }
/* Review actions sit stacked in the last cell; each is its own form so HTMX can
swap the row without a shared submit hijacking the others. */
.statement-actions { min-width: 15rem; }
.statement-actions .inline-form {
display: flex;
gap: .35rem;
align-items: center;
margin-bottom: .3rem;
}
.statement-actions select {
padding: .3rem .4rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm, 6px);
font: inherit;
font-size: .82rem;
max-width: 11rem;
}
.data-table .meta { display: block; font-size: 11px; color: var(--color-muted); }
.empty-cell { padding: var(--space-5); color: var(--color-muted); text-align: center; }
.pager { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; padding: .6rem 1rem; }
/* Log out is a POST form (Django 5 refuses GET), but it must sit in a nav row exactly where
the link it replaced did — so the form itself is not a layout box. */
.logout-form { display: inline; margin: 0; padding: 0; border: 0; }
.logout-form > button { cursor: pointer; }
/* =========================================================
Partner console
---------------------------------------------------------
A denser layout than the shared role dashboards: a donor reads this the way they read a
board pack, so the work is done by alignment and hierarchy rather than by new colour. Every
value below is an existing token — there is no palette here, deliberately.
========================================================= */
.pconsole { display: flex; flex-direction: column; gap: var(--space-5); }
/* --- header + filter bar --- */
.pconsole-head {
position: sticky;
top: 0;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.pconsole-ident { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pconsole-ident h1 { font-size: 20px; line-height: 1.2; margin: 0; color: var(--color-ink); }
.pconsole-ident .sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-muted); }
.pconsole-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.pconsole-filter { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.pconsole-filter > span {
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.pconsole-filter select {
padding: 6px 10px;
font: inherit;
font-size: 13px;
color: var(--color-ink);
background: var(--color-page);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
min-width: 148px;
}
.pconsole-filter select:focus-visible {
outline: 2px solid var(--color-leaf);
outline-offset: 1px;
}
/* --- KPI band --- */
.pconsole-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
gap: var(--space-3);
}
.pkpi {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-4);
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.pkpi-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
}
.pkpi-value { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--color-ink); }
/* The sparkline inherits the trend colour from .stat-trend's sibling, so a falling series
reads as falling without needing a second encoding. */
.pspark { width: 100%; height: 22px; margin-top: var(--space-2); color: var(--color-faint); }
.pkpi .stat-trend.up ~ .pspark { color: var(--color-success); }
.pkpi .stat-trend.down ~ .pspark { color: var(--color-danger); }
/* --- hero row --- */
.pconsole-hero { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); }
.pconsole-hero .chart-box { min-height: 260px; }
@media (max-width: 1100px) {
.pconsole-hero { grid-template-columns: 1fr; }
}
/* --- tab strip --- */
.ptab-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-4);
}
.ptab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--color-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-pill);
cursor: pointer;
}
.ptab:hover { background: var(--color-page); color: var(--color-ink); }
.ptab:focus-visible { outline: 2px solid var(--color-leaf); outline-offset: 2px; }
.ptab.active {
color: var(--color-primary);
background: var(--color-leaf-soft);
border-color: var(--color-leaf);
}
.psection { display: flex; flex-direction: column; gap: var(--space-4); }
.psection .chart-box { min-height: 280px; }
.psection .table-scroll { overflow-x: auto; }
/* --- print: the donor pack --- */
/* Tabs cannot exist on paper, so the printed view stacks every section instead. Both come
from one donor_pack call, so the paper and the screen carry the same figures. */
.pconsole-print-sections { display: none; }
.pconsole-print .pconsole-print-sections { display: block; }
.pconsole-print .ptab-strip,
.pconsole-print #ppanel { display: none; }
.pprint-heading {
margin: var(--space-6) 0 var(--space-3);
padding-bottom: var(--space-2);
font-size: 16px;
color: var(--color-primary);
border-bottom: 2px solid var(--color-leaf);
}
@media print {
.sidebar, .topbar, .pagenav, .nav-scrim, .pconsole-filters, .ptab-strip, #ppanel,
.widget-launcher { display: none !important; }
.pconsole-head { position: static; box-shadow: none; }
.pconsole-print-sections { display: block; }
.psection { break-inside: avoid; }
.pprint-heading { break-before: page; }
.card, .pkpi { box-shadow: none; border-color: var(--color-border-strong); }
}
/* =========================================================
Partner console: historical / reference panels
Power BI embeds and the Tanzania archive. Both use the standard .card
shell so they sit in the console's normal rhythm -- spacing comes from
.pconsole's flex gap, never from ad-hoc margins that fight it.
========================================================= */
.pref-panel .card-header {
flex-wrap: wrap;
}
.pref-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-mid);
background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
border: 1px solid var(--color-border);
white-space: nowrap;
}
.pref-note {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--color-muted);
}
.pref-note + .pref-note { margin-top: var(--space-2); }
/* The embed itself: full bleed inside the card, and tall. Power BI reports
carry their own chrome and legends, so a short frame makes them unreadable. */
.pbi-frame {
position: relative;
width: 100%;
height: clamp(560px, 78vh, 900px);
border: 0;
border-top: 1px solid var(--color-border);
background: var(--color-bg-subtle, #f8fafc);
}
.pbi-frame iframe {
position: relative;
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Behind the iframe, not after it: a blocked embed paints nothing, and an unexplained
700px void reads as a broken page rather than a blocked one. */
.pbi-fallback {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
align-items: center;
justify-content: center;
padding: var(--space-5);
text-align: center;
color: var(--color-muted);
background:
repeating-linear-gradient(135deg,
rgba(11, 82, 40, 0.03) 0 10px, transparent 10px 20px),
var(--color-page);
}
.pbi-fallback .icon { width: 30px; height: 30px; color: var(--color-faint); }
.pbi-fallback p { max-width: 46ch; margin: 0; font-size: 13px; line-height: 1.6; }
.pbi-fallback strong { font-size: 15px; color: var(--color-ink); }
.pbi-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--color-border);
font-size: 12.5px;
}
@media (max-width: 700px) {
.pbi-frame { height: clamp(420px, 70vh, 620px); }
}
/* Archive tables share the console's table styling; only the density differs. */
.psection-archive .pconsole-kpis { margin-bottom: var(--space-4); }
.psection-archive .section-title { margin-top: var(--space-5); }
.psection-archive .section-title:first-of-type { margin-top: 0; }
/* =========================================================
Partner console v2 — "The Season Room"
---------------------------------------------------------
Appended as a layer rather than forked into the v1 block above, so the eight sections keep
rendering exactly as they did while the new bands go in around them.
Still no new palette. Every colour below resolves to a token declared at the top of this
file: the leaf and forest greens carry the brand, the warm and danger tokens carry urgency,
and the earth token appears only where money does. What makes this read as a paid product
is density, alignment and typographic hierarchy — not hue.
Three rules the v2 markup relies on:
· severity is carried by an icon and a word before it is carried by a colour, so the page
survives greyscale printing and colour-vision deficiency;
· every number is tabular-nums, so columns of figures align on the decimal;
· motion is diagnostic only, 180ms, and switched off under prefers-reduced-motion.
========================================================= */
.pconsole .num,
.pconsole .pkpi-value,
.pconsole .pspine-value,
.pconsole .pgap-value,
.pconsole .pfoot-value { font-variant-numeric: tabular-nums; }
/* --- loading skeletons -----------------------------------------------------
Shape, not spinners. Eight panels landing at different times must not make the page jump,
and a reader should be able to tell a slow panel from an empty one before it resolves. */
.pskeleton { padding: var(--space-5); }
.pskeleton-label { margin: 0 0 var(--space-3); font-size: 12.5px; color: var(--color-muted); }
.pskeleton-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.pskeleton-bar {
height: 14px;
border-radius: var(--radius-sm);
background: linear-gradient(90deg, var(--color-page) 0%, var(--color-border) 50%, var(--color-page) 100%);
background-size: 200% 100%;
animation: pshimmer 1.4s ease-in-out infinite;
}
.pskeleton-bar:nth-child(2) { width: 82%; }
.pskeleton-bar:nth-child(3) { width: 64%; }
@keyframes pshimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* --- L0 · the verdict ------------------------------------------------------
The first 400px must state what is true and what is at risk. The left rail is the only
place on this page where a colour is load-bearing, and even there the icon and the word
carry the same message. */
.pverdict {
display: grid;
grid-template-columns: 44px 1fr;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-card);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-faint);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.pverdict-critical { border-left-color: var(--color-danger); background: linear-gradient(90deg, var(--color-danger-soft) 0%, var(--color-card) 42%); }
.pverdict-warning { border-left-color: var(--color-warning); background: linear-gradient(90deg, var(--color-warning-soft) 0%, var(--color-card) 42%); }
.pverdict-watch { border-left-color: var(--color-info); background: linear-gradient(90deg, var(--color-info-soft) 0%, var(--color-card) 42%); }
.pverdict-good { border-left-color: var(--color-success); background: linear-gradient(90deg, var(--color-success-soft) 0%, var(--color-card) 42%); }
.pverdict-mark {
display: grid;
place-items: center;
width: 44px; height: 44px;
border-radius: var(--radius-md);
background: var(--color-card);
border: 1px solid var(--color-border);
}
.pverdict-critical .pverdict-mark { color: var(--color-danger); border-color: var(--color-danger); }
.pverdict-warning .pverdict-mark { color: var(--color-warning); border-color: var(--color-warning); }
.pverdict-watch .pverdict-mark { color: var(--color-info); border-color: var(--color-info); }
.pverdict-good .pverdict-mark { color: var(--color-success); border-color: var(--color-success); }
.pverdict-mark .icon { width: 22px; height: 22px; }
.pverdict-body { min-width: 0; }
.pverdict-headline {
margin: 0;
font-size: 20px;
line-height: 1.32;
font-weight: 600;
color: var(--color-ink);
text-wrap: balance;
}
.pverdict-detail { margin: var(--space-2) 0 0; font-size: 14px; color: var(--color-muted); }
.pverdict-action {
display: flex; align-items: flex-start; gap: 6px;
margin: var(--space-3) 0 0;
font-size: 13.5px; font-weight: 500; color: var(--color-primary);
}
.pverdict-action .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pverdict-tools { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.pverdict-tools > details { min-width: 0; }
.pverdict-tools summary,
.pfinding-why summary,
.ptiers summary {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
font-size: 12.5px; font-weight: 600;
color: var(--color-muted);
background: var(--color-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
cursor: pointer;
list-style: none;
}
.pverdict-tools summary::-webkit-details-marker,
.pfinding-why summary::-webkit-details-marker,
.ptiers summary::-webkit-details-marker { display: none; }
.pverdict-tools summary:hover, .ptiers summary:hover { border-color: var(--color-border-strong); color: var(--color-ink); }
.pverdict-tools summary .icon { width: 14px; height: 14px; }
.pverdict-evidence, .pfinding-why > dl {
margin-top: var(--space-3);
padding: var(--space-4);
background: var(--color-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.pverdict-evidence dl, .pfinding-why dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px var(--space-4);
margin: var(--space-2) 0 0;
font-size: 12.5px;
}
.pverdict-evidence dt, .pfinding-why dt { color: var(--color-muted); }
.pverdict-evidence dd, .pfinding-why dd {
margin: 0; color: var(--color-ink); font-weight: 500;
font-variant-numeric: tabular-nums;
}
.pfinding-list { list-style: none; margin: var(--space-3) 0 0; padding: 0;
display: flex; flex-direction: column; gap: var(--space-3); }
.pfinding { display: grid; grid-template-columns: 10px 1fr; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-page); border: 1px solid var(--color-border);
border-radius: var(--radius-md); }
.pfinding-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--color-faint); }
.pfinding-critical .pfinding-dot { background: var(--color-danger); }
.pfinding-warning .pfinding-dot { background: var(--color-warning); }
.pfinding-watch .pfinding-dot { background: var(--color-info); }
.pfinding-good .pfinding-dot { background: var(--color-success); }
.pfinding-headline { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-ink); }
.pfinding-detail { margin: 2px 0 0; font-size: 12.5px; color: var(--color-muted); }
.pfinding-action { margin: 4px 0 0; font-size: 12.5px; color: var(--color-primary); }
.pfinding-why { margin-top: var(--space-2); }
.pfinding-why summary { padding: 3px 8px; font-size: 11.5px; }
/* --- explain-this popovers -------------------------------------------------
A rather than a JS popover: keyboard-operable, printable, and working before
Alpine has booted. Generated from console.METRIC_META, so it cannot drift from the code. */
.pmetric { display: inline-block; position: relative; margin-left: 4px; vertical-align: middle; }
.pmetric > summary {
display: inline-grid; place-items: center;
width: 16px; height: 16px;
color: var(--color-faint);
cursor: help;
list-style: none;
}
.pmetric > summary::-webkit-details-marker { display: none; }
.pmetric > summary:hover { color: var(--color-primary); }
.pmetric > summary .icon { width: 13px; height: 13px; }
.pmetric[open] > summary { color: var(--color-primary); }
.pmetric-body {
position: absolute;
z-index: 40;
top: 22px; left: -8px;
width: min(340px, 78vw);
padding: var(--space-4);
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--color-ink);
background: var(--color-card);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.pmetric-body p { margin: 4px 0 var(--space-3); color: var(--color-muted); }
.pmetric-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--space-3); margin: 0; }
.pmetric-body dt { color: var(--color-muted); font-weight: 600; }
.pmetric-body dd { margin: 0; }
.pmetric-body code {
font-size: 11.5px;
background: var(--color-page);
padding: 1px 4px;
border-radius: 4px;
overflow-wrap: anywhere;
}
/* --- L1 · the clock + vitals ----------------------------------------------- */
.proom-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4); }
.proom-mid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 1180px) { .proom-top { grid-template-columns: 1fr; } }
.pclock { display: flex; flex-direction: column; gap: var(--space-3); }
.pclock-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pclock-season { font-size: 12px; color: var(--color-muted); }
.pclock-headline {
margin: 0;
padding: var(--space-3) var(--space-4);
font-size: 14px;
border-radius: var(--radius-md);
background: var(--color-page);
border-left: 3px solid var(--color-faint);
}
.pclock-headline.pclock-critical { background: var(--color-danger-soft); border-left-color: var(--color-danger); }
.pclock-headline.pclock-warn { background: var(--color-warning-soft); border-left-color: var(--color-warning); }
.pclock-headline.pclock-ok { background: var(--color-leaf-soft); border-left-color: var(--color-leaf); }
.pclock-headline.pclock-done,
.pclock-headline.pclock-muted { color: var(--color-muted); }
/* The rail is a list, so it reads correctly to a screen reader and survives printing. */
.pclock-rail { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.pclock-stage {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: var(--space-3) 4px;
text-align: center;
border-radius: var(--radius-sm);
background: var(--color-page);
border: 1px solid var(--color-border);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.pclock-stage.is-current { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pclock-mark { display: grid; place-items: center; width: 26px; height: 26px;
border-radius: 50%; background: var(--color-card);
border: 1px solid var(--color-border-strong); color: var(--color-muted); }
.pclock-mark .icon { width: 14px; height: 14px; }
.pclock-name { font-size: 11.5px; font-weight: 600; color: var(--color-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pclock-state { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--color-muted); }
.pclock-days { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
color: var(--color-ink); }
.pclock-done .pclock-mark { color: var(--color-success); border-color: var(--color-success); }
.pclock-done { opacity: 0.72; }
.pclock-ok .pclock-mark { color: var(--color-leaf); border-color: var(--color-leaf); }
.pclock-warn { background: var(--color-warning-soft); border-color: var(--color-warning); }
.pclock-warn .pclock-mark { color: var(--color-warning); border-color: var(--color-warning); }
.pclock-critical { background: var(--color-danger-soft); border-color: var(--color-danger); }
.pclock-critical .pclock-mark { color: var(--color-danger); border-color: var(--color-danger); }
.pclock-critical .pclock-days { color: var(--color-danger); }
.pclock-muted { opacity: 0.6; }
/* The purpose line is visually hidden until hover or focus, and always present for a screen
reader — a stage nobody can interpret is a bare slug.
Clipped rather than `visibility: hidden` or `display: none`, deliberately: both of those
remove the element from the accessibility tree, which would hide the only explanation of
what a stage means from exactly the readers who cannot hover to find it. */
.pclock-tip, .pfresh-tip {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.pclock-stage:hover .pclock-tip,
.pclock-stage:focus-visible .pclock-tip,
.pclock-stage:focus-within .pclock-tip,
.pfresh-cell:hover .pfresh-tip,
.pfresh-cell:focus-visible .pfresh-tip,
.pfresh-cell:focus-within .pfresh-tip {
width: 236px; height: auto;
padding: var(--space-3); margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
z-index: 30;
font-size: 11.5px;
line-height: 1.45;
text-align: left;
color: var(--color-ink);
background: var(--color-card);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.pclock-stage:hover .pclock-tip,
.pclock-stage:focus-visible .pclock-tip,
.pclock-stage:focus-within .pclock-tip {
bottom: calc(100% + 6px); left: 50%;
transform: translateX(-50%);
}
.pclock-stage { cursor: default; }
.pclock-stage:focus-visible { outline: 2px solid var(--color-leaf); outline-offset: 2px; }
.pclock-bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.pclock-bar > span { display: block; height: 100%; background: var(--color-leaf); }
.pvitals { display: flex; flex-direction: column; gap: var(--space-3); }
.pvitals .pconsole-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pvitals .pkpi { box-shadow: none; background: var(--color-page); }
.pvitals .pkpi-value { font-size: 22px; }
/* --- L2 · the spine -------------------------------------------------------- */
.pspine { display: flex; flex-direction: column; gap: var(--space-4); }
.pspine-weak { font-size: 12px; color: var(--color-warning); display: inline-flex; align-items: center; gap: 5px; }
.pspine-weak .icon { width: 14px; height: 14px; }
.pspine-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
list-style: none; margin: 0; padding: 0;
gap: var(--space-3);
}
.pspine-station { position: relative; }
.pspine-body {
height: 100%;
display: flex; flex-direction: column; gap: 4px;
padding: var(--space-4);
background: var(--color-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.pspine-station.is-empty .pspine-body { border-style: dashed; }
.pspine-station.is-no_activity .pspine-body { border-color: var(--color-warning); background: var(--color-warning-soft); }
.pspine-station.is-not_collected .pspine-body { border-color: var(--color-border-strong); }
.pspine-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
text-transform: uppercase; color: var(--color-muted); }
.pspine-value { font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--color-ink); }
.pspine-value em { font-size: 12px; font-style: normal; font-weight: 500;
color: var(--color-muted); margin-left: 4px; }
.pspine-bar { height: 5px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.pspine-bar > span { display: block; height: 100%; background: var(--color-leaf);
transition: width 320ms ease; }
.pspine-station.is-empty .pspine-bar > span { background: var(--color-border-strong); }
/* ``margin-bottom: auto`` is what stops the short stations ending in 200px of nothing.
The rail stretches every card to the tallest one, so a station with a one-line note used
to print its conversion figure directly under it and leave a dead tail below. The auto
margin pushes whatever follows the note — the gap reason, the conversion — to the foot of
the card, so the slack sits between the two blocks instead of after both. A station whose
note is its last child is unaffected. */
.pspine-note { margin: 2px 0 auto; font-size: 11.5px; color: var(--color-muted); }
.pspine-gap { margin: var(--space-2) 0 0; font-size: 11.5px; display: flex; gap: 5px; align-items: flex-start; }
.pspine-gap .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.pspine-gap-no_activity { color: var(--color-danger); }
.pspine-gap-not_collected { color: var(--color-muted); }
/* The connector. A percentage only where the unit is unchanged; a bare arrow otherwise. */
.pspine-link {
position: absolute;
top: 50%; left: calc(var(--space-3) * -1);
transform: translate(-40%, -50%);
z-index: 2;
}
.pspine-conv, .pspine-unit-break {
display: inline-grid; place-items: center;
min-width: 34px; height: 20px; padding: 0 5px;
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--color-primary);
background: var(--color-card);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
}
.pspine-conv.is-low { color: var(--color-danger); border-color: var(--color-danger); }
.pspine-unit-break { color: var(--color-faint); font-weight: 500; }
@media (max-width: 700px) { .pspine-link { display: none; } }
.pspine-chart { min-height: 220px; }
.data-table tr.is-empty td { color: var(--color-muted); }
/* --- the gap in money ------------------------------------------------------ */
.pgap { display: flex; flex-direction: column; gap: var(--space-4); }
.pgap-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.pgap-head {
display: flex; flex-direction: column; gap: 2px;
padding: var(--space-4);
background: var(--color-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
/* Money is the one place the earth token appears — the soil-and-agrifoods mark, used where
the page talks about what something costs and nowhere else. */
.pgap-head-money { background: var(--color-earth-soft); border-color: var(--color-earth); }
.pgap-head-money .pgap-value { color: var(--color-earth); }
.pgap-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
text-transform: uppercase; color: var(--color-muted); }
.pgap-value { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--color-ink); }
.pgap-value em { font-size: 13px; font-style: normal; color: var(--color-muted); }
.pcell-basis { font-size: 11.5px; color: var(--color-muted); }
.data-table tr.is-short td { background: var(--color-warning-soft); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.data-table tr.is-short td { background: color-mix(in srgb, var(--color-warning-soft) 45%, transparent); }
}
/* --- L4 · the evidence deck ------------------------------------------------ */
.pdeck { display: flex; flex-direction: column; gap: var(--space-4); }
.pdeck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.pcard {
display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-4);
background: var(--color-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: box-shadow 180ms ease, border-color 180ms ease;
}
.pcard:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pcard-name { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-ink); }
.pcard-sub { margin: 1px 0 0; font-size: 11.5px; color: var(--color-muted); }
.pcard-evidence {
flex: none;
padding: 3px 8px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
border-radius: var(--radius-pill);
border: 1px solid var(--color-border-strong);
color: var(--color-muted);
background: var(--color-card);
}
.pev-repeated { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-soft); }
.pev-observed { color: var(--color-info); border-color: var(--color-info); background: var(--color-info-soft); }
.pev-none { color: var(--color-muted); }
.pcard-block { display: flex; flex-direction: column; gap: 3px;
padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.pcard-block:first-of-type { border-top: 0; padding-top: 0; }
.pcard-block-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--color-faint); }
.pcard-line { margin: 0; font-size: 12.5px; color: var(--color-ink); }
.pcard-missing { margin: 0; font-size: 11.5px; color: var(--color-muted); font-style: italic; }
.pcard-warn { color: var(--color-danger); display: inline-flex; align-items: center; gap: 4px; }
.pcard-warn .icon { width: 13px; height: 13px; }
.pcard-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.pcard-delta.up { color: var(--color-success); }
.pcard-delta.down { color: var(--color-danger); }
.pcard-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
list-style: none; margin: 2px 0 0; padding: 0; font-size: 11.5px;
color: var(--color-muted); }
.pcard-stats em { font-style: normal; font-weight: 700; color: var(--color-ink);
font-variant-numeric: tabular-nums; }
/* The realisation gauge. Deliberately a bar rather than a dial: a dial implies a target
somebody set, and catalogue potential is a ceiling, not a goal. */
.pgauge { height: 8px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.pgauge-fill { display: block; height: 100%; background: var(--color-leaf); transition: width 320ms ease; }
.pfit { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px;
font-size: 11.5px; }
.pfit li { display: flex; gap: 5px; align-items: flex-start; }
.pfit .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.pfit-ok { color: var(--color-success); }
.pfit-watch { color: var(--color-warning); }
.pfit-unknown { color: var(--color-muted); }
.pcard-foot { display: flex; flex-wrap: wrap; gap: 4px; padding-top: var(--space-3);
border-top: 1px solid var(--color-border); }
.pchip { padding: 2px 7px; font-size: 10.5px; font-weight: 600; border-radius: var(--radius-pill);
color: var(--color-muted); background: var(--color-card); border: 1px solid var(--color-border); }
.pchip-ok { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-soft); }
.pchip-warn { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-soft); }
/* --- the margin model ------------------------------------------------------ */
.pmargin { display: flex; flex-direction: column; gap: var(--space-4); }
.pmargin-lead { margin: 0; font-size: 14px; color: var(--color-ink); }
.pmargin-assumptions {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-page);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
}
.pmargin-assumptions-label { display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--color-muted); }
.pmargin-assumptions-label .icon { width: 14px; height: 14px; }
.pmargin-assumptions input[type="number"] {
width: 96px; padding: 6px 8px; font: inherit; font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--color-ink); background: var(--color-card);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
/* --- telemetry ------------------------------------------------------------- */
.ptelemetry { display: flex; flex-direction: column; gap: var(--space-3); }
.ptel-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ptel-tab { padding: 5px 11px; font-size: 12.5px; font-weight: 600; text-decoration: none;
color: var(--color-muted); background: var(--color-page);
border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.ptel-tab.active { color: var(--color-primary); border-color: var(--color-primary);
background: var(--color-leaf-soft); }
.ptel-side { display: flex; flex-wrap: wrap; gap: var(--space-5); }
/* --- the map --------------------------------------------------------------- */
.pmap-card { display: flex; flex-direction: column; gap: var(--space-3); }
.pmap-metric { margin: 0; }
.pmap-frame { position: relative; min-height: 380px; border-radius: var(--radius-md);
background: var(--color-page); border: 1px solid var(--color-border); overflow: hidden; }
/* --- freshness ------------------------------------------------------------- */
.pfresh-grid td { position: relative; }
.pfresh-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pfresh-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px;
border-radius: 50%; background: var(--color-success); }
.pfresh-stale .pfresh-dot { background: var(--color-warning); }
.pfresh-never .pfresh-dot { background: var(--color-danger); }
.pfresh-stale { color: var(--color-warning); }
.pfresh-never { color: var(--color-danger); }
/* Positioned by the shared clipped-tooltip rule above; only the anchor differs. */
.pfresh-cell:hover .pfresh-tip,
.pfresh-cell:focus-visible .pfresh-tip,
.pfresh-cell:focus-within .pfresh-tip { bottom: calc(100% - 4px); left: 0; }
.pfresh-cell:focus-visible { outline: 2px solid var(--color-leaf); outline-offset: -2px; }
/* --- provenance ------------------------------------------------------------ */
.pprov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-4); margin-top: var(--space-4); }
.pprov-block { display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-4); background: var(--color-page);
border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pprov-block .data-table { background: var(--color-card); }
.chart-box-sm { min-height: 160px; }
/* --- footprint + tiers ------------------------------------------------------
A locked panel keeps its real headline count. A grey box teaches the reader nothing and
reads as a page that is broken rather than a feature they have not bought. */
.pfootprint { display: flex; flex-direction: column; gap: var(--space-4); }
.pfoot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.pfoot-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: var(--space-4); background: var(--color-page);
border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pfoot-tile .icon { width: 17px; height: 17px; color: var(--color-leaf); margin-bottom: 2px; }
.pfoot-value { font-size: 22px; font-weight: 600; color: var(--color-ink); }
.pfoot-label { font-size: 11.5px; color: var(--color-muted); }
.ptiers { margin-top: var(--space-2); }
.ptiers .data-table th.is-current, .ptiers .pt-cell.is-current {
background: var(--color-leaf-soft);
}
.ptiers .pt-cell { text-align: center; }
.ptiers .pt-cell .icon { width: 15px; height: 15px; color: var(--color-success); }
.plocked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
padding: var(--space-5); background: var(--color-page);
border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.plocked-real { display: flex; flex-direction: column; gap: 2px; }
.plocked-note { margin: 0; flex: 1 1 260px; font-size: 12.5px; color: var(--color-muted);
display: flex; gap: 6px; align-items: flex-start; }
.plocked-note .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
/* --- compare mode ---------------------------------------------------------- */
.pcompare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4); font-size: 12.5px;
background: var(--color-info-soft); border: 1px solid var(--color-info);
border-radius: var(--radius-md); color: var(--color-ink); }
.pcompare-bar .icon { width: 15px; height: 15px; color: var(--color-info); }
.pcompare-vs { color: var(--color-muted); font-style: italic; }
.pcompare-panel { margin-top: var(--space-4); padding-top: var(--space-4);
border-top: 1px dashed var(--color-border-strong); }
.pcompare-title { margin: 0 0 var(--space-3); font-size: 13px; color: var(--color-muted); }
.pcaption { caption-side: top; text-align: left; padding-bottom: var(--space-2);
font-size: 11.5px; color: var(--color-muted); }
/* --- print: the board pack -------------------------------------------------
The screen's tabs cannot survive paper, so print flattens them. The verdict, the clock and
the spine lead, because those are the three things a board reads. */
@media print {
.pverdict { break-inside: avoid; box-shadow: none; }
.pclock, .pspine, .pdeck, .pgap, .pfresh { break-inside: avoid; }
.pcard { break-inside: avoid; }
.pmetric, .pverdict-tools, .pmargin-assumptions, .ptel-tabs, .pmap-metric,
.ptiers summary { display: none !important; }
.pverdict-evidence, .pfinding-list { display: block !important; }
.pclock-tip, .pfresh-tip { display: none; }
.pskeleton { display: none; }
.pdeck-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.pskeleton-bar { animation: none; }
.pclock-stage, .pspine-bar > span, .pgauge-fill, .pcard { transition: none; }
.pclock-stage.is-current { transform: none; }
}
/* --- map island: trial marks + legend --------------------------------------
A hub and a demonstration site are different kinds of thing. Distinguished by shape
before colour, so the difference survives greyscale and colour-vision deficiency. */
.map-trial-mark { fill: var(--color-earth); stroke: var(--color-card); stroke-width: 1.2; }
.map-trial-mark.is-planned { fill: var(--color-faint); }
.map-trial-mark.is-harvested { fill: var(--color-success); }
.map-legend {
position: absolute; left: var(--space-3); bottom: var(--space-3);
display: flex; flex-wrap: wrap; gap: var(--space-3);
padding: 6px 10px;
font-size: 11.5px; color: var(--color-muted);
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.map-legend { background: color-mix(in srgb, var(--color-card) 92%, transparent); }
}
.map-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.map-legend .swatch { width: 9px; height: 9px; display: inline-block; }
.map-legend .swatch.hub { border-radius: 50%; background: var(--color-primary); }
.map-legend .swatch.trial {
background: var(--color-earth);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.map-legend-metric { font-style: italic; }
/* --- the board pack cover (print only) ------------------------------------- */
.pcover { display: none; }
@media print {
.pcover { display: block; break-after: page; padding-top: var(--space-6); }
.pcover-eyebrow { margin: 0; font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--color-muted); }
.pcover-title { margin: var(--space-2) 0 0; font-size: 34px; line-height: 1.1;
color: var(--color-primary); }
.pcover-scope { margin: var(--space-2) 0 0; font-size: 14px; color: var(--color-muted); }
.pcover-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-5);
margin: var(--space-6) 0; font-size: 12.5px; }
.pcover-meta dt { color: var(--color-muted); font-weight: 600; }
.pcover-meta dd { margin: 0; }
.pcover-verdict h2 { font-size: 15px; margin: 0 0 var(--space-3); }
.pcover-verdict ol { margin: 0; padding-left: 1.2em; font-size: 12.5px; line-height: 1.6; }
.pcover-verdict li { margin-bottom: var(--space-2); }
.pcover-note { margin-top: var(--space-6); font-size: 11.5px; color: var(--color-muted);
border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.pprint-heading { break-before: page; }
}
/* --- the shared method footer ----------------------------------------------
Every section states its denominator, its freshness and its assembly time. A figure whose
age nobody can state is a figure nobody can act on. */
.pmethod {
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px dashed var(--color-border);
font-size: 11.5px;
color: var(--color-muted);
}
.pmethod-item { display: inline-flex; align-items: center; gap: 5px; }
.pmethod-item .icon { width: 13px; height: 13px; }
.pmethod-when { margin-left: auto; font-variant-numeric: tabular-nums; }
.pspec { margin-top: var(--space-5); }
.pdelta-up { color: var(--color-success); }
.pdelta-down { color: var(--color-danger); }
.pdelta-flat { color: var(--color-muted); }
/* =========================================================
Partner console — L5 tab band
---------------------------------------------------------
.ptab-strip already carries a bottom divider and a margin, which only reads as a
header rail when something frames it. Nothing did: .pconsole-tabs had no rule, so
the strip and the htmx-swapped #ppanel — the largest region of the page — sat
straight on --color-page between two bordered cards. Same shell as .card, with the
strip pulled full-bleed so the divider meets the card edge like .card-header does.
========================================================= */
.pconsole-tabs {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
}
.pconsole-tabs .ptab-strip {
margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
padding: var(--space-3) var(--space-5);
gap: var(--space-1) var(--space-2);
}
/* Print keeps the sections, drops the chrome: the band is a page region, not a card. */
.pconsole-print .pconsole-tabs {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
@media print {
.pconsole-tabs { box-shadow: none; border-color: var(--color-border-strong); }
}
/* --- variety cards: pin the chip footer -------------------------------------
.pdeck-grid stretches every card to the tallest in its row, so a short card left
its chips floating mid-air above the leftover space. */
.pcard-foot { margin-top: auto; }
/* --- console tables: say that they scroll -----------------------------------
The panels in .pconsole-hero and the margin/telemetry pair are narrower than their
tables, so columns run under the panel edge. The scroll already worked; nothing
showed it. Local-attachment gradients mask themselves away at each end, so the
shadow appears only on the side that still has content off-screen. */
.pconsole .table-scroll {
background:
linear-gradient(to right, var(--color-card) 40%, rgba(255, 255, 255, 0)) 0 0 / 28px 100% no-repeat local,
linear-gradient(to left, var(--color-card) 40%, rgba(255, 255, 255, 0)) 100% 0 / 28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(22, 64, 30, 0.20), rgba(22, 64, 30, 0)) 0 0 / 18px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(22, 64, 30, 0.20), rgba(22, 64, 30, 0)) 100% 0 / 18px 100% no-repeat scroll;
}
/* --- season clock: wrap stage names instead of clipping them ----------------
Seven stages share the hero's left column, so nowrap+ellipsis cut every label to
about five characters ("Anch…", "Mark…"). Two lines fit the rail; the tooltip still
carries the full text. */
.pconsole .pclock-name {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =========================================================
Partner console v3 - executive polish
---------------------------------------------------------
This layer keeps the v2 data contract intact and upgrades the shell around it:
clearer command hierarchy, a visible trust strip, denser controls, and responsive
surfaces that still feel like a board pack when the HTMX panels resolve.
========================================================= */
.dash-wrap.pconsole {
--pconsole-radius: 8px;
--pconsole-border: rgba(210, 218, 195, 0.9);
--pconsole-panel: rgba(255, 255, 255, 0.96);
position: relative;
isolation: isolate;
width: 100%;
max-width: 1520px;
margin: 0 auto;
gap: var(--space-4);
}
.dash-wrap.pconsole::before {
content: "";
position: absolute;
inset: calc(var(--space-6) * -1);
z-index: -1;
background:
linear-gradient(90deg, rgba(11, 82, 40, 0.035) 1px, transparent 1px),
linear-gradient(180deg, rgba(11, 82, 40, 0.03) 1px, transparent 1px),
linear-gradient(135deg, #fbfcf7 0%, #f2f6ea 52%, #f8fafc 100%);
background-size: 44px 44px, 44px 44px, auto;
}
.pconsole,
.pconsole * {
letter-spacing: 0;
}
.pconsole .card,
.pconsole .pkpi,
.pconsole .pverdict,
.pconsole-tabs,
.pconsole .pcard,
.pconsole .pgap-head,
.pconsole .pfoot-tile,
.pconsole .pprov-block,
.pconsole .plocked,
.pconsole .pmargin-assumptions,
.pconsole .pmap-frame,
.pconsole .chart-box,
.pconsole .table-scroll {
border-radius: var(--pconsole-radius);
}
.pconsole .card,
.pconsole-tabs,
.pconsole .pverdict {
border-color: var(--pconsole-border);
box-shadow: 0 10px 30px rgba(31, 41, 51, 0.06), 0 1px 2px rgba(31, 41, 51, 0.04);
}
.pconsole .card-header {
padding: 15px 18px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcf7 100%);
}
.pconsole .section-title {
margin-bottom: 0;
align-items: center;
}
.pconsole-head {
top: calc(var(--topbar-h) + var(--space-2));
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
gap: 0;
padding: 0;
overflow: clip;
background: rgba(255, 255, 255, 0.94);
border-color: rgba(210, 218, 195, 0.95);
border-radius: var(--pconsole-radius);
box-shadow: 0 18px 40px rgba(31, 41, 51, 0.08);
backdrop-filter: blur(18px) saturate(1.08);
}
.pconsole-head-main {
display: grid;
grid-template-columns: minmax(280px, 1.05fr) minmax(440px, 1.45fr);
gap: var(--space-4);
align-items: center;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
background:
linear-gradient(90deg, rgba(231, 242, 208, 0.68), rgba(255, 255, 255, 0.78) 36%, rgba(223, 236, 244, 0.52));
}
.pconsole .role-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
color: #fff;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-mid) 100%);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--pconsole-radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(11, 82, 40, 0.18);
}
.pconsole .role-icon .icon {
width: 22px;
height: 22px;
}
.pconsole-title-stack {
min-width: 0;
}
.pconsole-eyebrow {
margin: 0 0 2px;
color: var(--color-mid);
font-size: 11px;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
}
.pconsole-ident h1 {
font-size: 24px;
line-height: 1.12;
}
.pconsole-ident .sub {
max-width: 68ch;
margin-top: 5px;
font-size: 13px;
color: var(--color-muted);
overflow-wrap: anywhere;
}
.pconsole-trust-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-2);
}
.ptrust {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 54px;
padding: 9px 11px;
color: var(--color-ink);
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(210, 218, 195, 0.9);
border-radius: var(--pconsole-radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ptrust > .icon {
flex: 0 0 auto;
width: 17px;
height: 17px;
color: var(--color-mid);
}
.ptrust span {
display: block;
min-width: 0;
}
.ptrust strong,
.ptrust small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ptrust strong {
font-size: 13px;
font-weight: 700;
color: var(--color-ink);
}
.ptrust small {
margin-top: 1px;
font-size: 11px;
color: var(--color-muted);
}
.pconsole-filters {
display: grid;
/* Both tracks are shrinkable. With ``auto`` on the second the action buttons claimed
their max-content width, and below about 1200px that overran the row and printed the
Compare and Export buttons straight over the season and county selects. */
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
gap: var(--space-3);
align-items: end;
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.88);
}
.pconsole-filterset {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: var(--space-3);
min-width: 0;
}
.pconsole-filter {
min-width: 0;
}
.pconsole-filter > span {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--color-muted);
font-size: 11px;
}
.pconsole-filter > span .icon {
width: 12px;
height: 12px;
color: var(--color-mid);
}
.pconsole-filter select,
.pmargin-assumptions input[type="number"] {
width: 100%;
min-height: 38px;
padding: 8px 10px;
color: var(--color-ink);
background: #fff;
border-color: var(--color-border-strong);
border-radius: var(--pconsole-radius);
box-shadow: inset 0 1px 0 rgba(31, 41, 51, 0.02);
}
.pconsole-filter select:hover,
.pmargin-assumptions input[type="number"]:hover {
border-color: var(--color-faint);
}
.pconsole-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
}
.pconsole-actions .btn {
min-height: 38px;
border-radius: var(--pconsole-radius);
}
.pconsole-actions .btn-primary {
box-shadow: 0 8px 18px rgba(11, 82, 40, 0.18);
}
.pconsole-actions > .meta {
flex-basis: 100%;
text-align: right;
font-size: 11px;
}
.pconsole-anchors {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding: 9px var(--space-5) 10px;
background: #fff;
scrollbar-width: thin;
}
.pconsole-anchors a {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 6px;
min-height: 32px;
padding: 6px 10px;
color: var(--color-muted);
background: var(--color-page);
border: 1px solid transparent;
border-radius: var(--pconsole-radius);
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
}
.pconsole-anchors a:hover,
.pconsole-anchors a:focus-visible {
color: var(--color-primary);
background: var(--color-leaf-soft);
border-color: var(--color-border-strong);
text-decoration: none;
}
.pconsole-anchors .icon {
width: 14px;
height: 14px;
}
.pconsole [id^="ppanel-"],
.pconsole-tabs,
.pref-panel {
scroll-margin-top: 220px;
}
.pconsole-overview {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
gap: var(--space-4);
align-items: stretch;
}
.pconsole-overview > * {
min-width: 0;
}
.pconsole-verdict-slot .pverdict,
.pconsole-overview .pvitals {
height: 100%;
}
.pverdict-critical { --pverdict-tone: var(--color-danger); --pverdict-soft: var(--color-danger-soft); }
.pverdict-warning { --pverdict-tone: var(--color-warning); --pverdict-soft: var(--color-warning-soft); }
.pverdict-watch { --pverdict-tone: var(--color-info); --pverdict-soft: var(--color-info-soft); }
.pverdict-good { --pverdict-tone: var(--color-success); --pverdict-soft: var(--color-success-soft); }
.pconsole .pverdict {
position: relative;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--space-4);
overflow: hidden;
padding: var(--space-5);
border-left-width: 1px;
background:
linear-gradient(135deg, var(--pverdict-soft, var(--color-page)) 0%, rgba(255, 255, 255, 0.96) 34%, #fff 100%);
}
.pconsole .pverdict::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--pverdict-tone, var(--color-faint));
}
.pconsole .pverdict-mark {
width: 56px;
height: 56px;
border-radius: var(--pconsole-radius);
background: rgba(255, 255, 255, 0.88);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.pconsole .pverdict-mark .icon {
width: 25px;
height: 25px;
}
.pconsole .pverdict-headline {
max-width: 62ch;
font-size: 22px;
line-height: 1.25;
}
.pconsole .pverdict-detail {
max-width: 76ch;
color: var(--color-ink);
}
.pconsole .pverdict-action {
width: fit-content;
padding: 8px 10px;
color: var(--color-primary);
background: rgba(231, 242, 208, 0.72);
border: 1px solid rgba(107, 163, 43, 0.3);
border-radius: var(--pconsole-radius);
}
.pconsole .pverdict-tools summary,
.pconsole .pfinding-why summary,
.pconsole .ptiers summary {
border-radius: var(--pconsole-radius);
}
.pvitals {
padding: var(--space-4);
background: linear-gradient(180deg, #ffffff 0%, #fbfcf7 100%);
}
.pvitals-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.pvitals-head .pref-badge {
margin-top: 1px;
}
.pvitals .pconsole-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.pvitals .pkpi {
min-height: 118px;
padding: 13px;
background: #fff;
border-color: rgba(210, 218, 195, 0.9);
box-shadow: none;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.pvitals .pkpi:hover {
border-color: var(--color-border-strong);
box-shadow: 0 8px 20px rgba(31, 41, 51, 0.06);
transform: translateY(-1px);
}
.pvitals .pkpi-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
color: var(--color-muted);
}
.pvitals .pkpi-value {
margin-top: 2px;
font-size: 23px;
}
.pvitals .stat-trend {
align-items: flex-start;
min-height: 34px;
line-height: 1.35;
}
.proom-clock {
display: block;
}
.proom-clock .pclock {
gap: var(--space-4);
padding: var(--space-4);
}
.proom-clock .pclock-head {
align-items: center;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.proom-clock .pclock-rail {
gap: var(--space-2);
}
.proom-clock .pclock-stage {
min-height: 118px;
justify-content: center;
padding: var(--space-3) var(--space-2);
background: #fff;
}
.proom-clock .pclock-stage.is-current {
box-shadow: 0 12px 24px rgba(31, 41, 51, 0.08);
}
.proom-clock .pclock-bar {
height: 8px;
background: #e8eee0;
}
.pconsole .pskeleton {
min-height: 160px;
background: rgba(255, 255, 255, 0.86);
}
.pconsole .chart-box {
min-height: 280px;
padding: var(--space-3);
background: linear-gradient(180deg, #fbfcf7 0%, #fff 100%);
border: 1px solid var(--color-border);
}
.pconsole .chart-box canvas {
max-width: 100%;
}
.pconsole .table-scroll {
border: 1px solid var(--color-border);
background-color: #fff;
}
.pconsole table.data-table {
background: #fff;
}
.pconsole .data-table thead th {
background: #f4f8ed;
color: var(--color-primary);
font-weight: 700;
}
.pconsole .data-table tbody td {
padding-top: 11px;
padding-bottom: 11px;
}
.pconsole .pdeck-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.pconsole .pcard {
background: #fff;
border-color: rgba(210, 218, 195, 0.95);
}
.pconsole .pcard:hover {
box-shadow: 0 10px 24px rgba(31, 41, 51, 0.07);
}
.pconsole .pgap-head,
.pconsole .pfoot-tile,
.pconsole .pprov-block,
.pconsole .pmargin-assumptions,
.pconsole .plocked {
background: #fff;
}
.pconsole .pgap-head-money {
background: var(--color-earth-soft);
}
.pconsole .pmap-frame {
min-height: 430px;
background:
linear-gradient(90deg, rgba(42, 111, 151, 0.04) 1px, transparent 1px),
linear-gradient(180deg, rgba(42, 111, 151, 0.04) 1px, transparent 1px),
#f8fbf7;
background-size: 36px 36px, 36px 36px, auto;
}
.pconsole-tabs {
padding: 0;
overflow: hidden;
}
.pconsole-tabs .ptab-strip {
margin: 0;
padding: var(--space-3) var(--space-4);
background: linear-gradient(180deg, #ffffff 0%, #fbfcf7 100%);
}
.pconsole-tabs #ppanel {
padding: var(--space-4);
}
.pconsole .ptab {
border-radius: var(--pconsole-radius);
}
.pconsole .ptab.active {
box-shadow: inset 0 -2px 0 var(--color-leaf);
}
.pref-panel {
border-radius: var(--pconsole-radius);
}
.pconsole .pbi-frame {
height: clamp(620px, 76vh, 920px);
background: #f8fafc;
}
.anonymous-banner {
align-items: flex-start;
border-radius: var(--pconsole-radius);
background: linear-gradient(90deg, var(--color-info-soft) 0%, #fff 100%);
}
@media (max-width: 1320px) {
.pconsole-head-main {
grid-template-columns: 1fr;
}
.pconsole-trust-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pconsole-overview {
grid-template-columns: 1fr;
}
.pvitals .pconsole-kpis {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Below this the filters and the actions cannot share a row without one crushing the
other, so they stack: selects first, then the buttons they act on. */
.pconsole-filters {
grid-template-columns: 1fr;
}
.pconsole-actions {
justify-content: flex-start;
}
.pconsole-actions > .meta {
text-align: left;
}
}
@media (max-width: 700px) {
.pconsole-filterset {
grid-template-columns: 1fr;
}
}
@media (max-width: 1080px) {
.pconsole-filters {
grid-template-columns: 1fr;
}
.pconsole-actions {
justify-content: flex-start;
}
.pconsole-actions > .meta {
text-align: left;
}
}
@media (max-width: 820px) {
.dash-wrap.pconsole {
padding: var(--space-4);
}
.pconsole-head {
position: static;
}
.pconsole-head-main,
.pconsole-filters,
.pconsole-anchors {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
.pconsole-filterset,
.pconsole-trust-strip,
.pvitals .pconsole-kpis {
grid-template-columns: 1fr;
}
.pconsole-ident {
align-items: flex-start;
}
.pconsole-ident h1 {
font-size: 21px;
}
.pconsole .pverdict {
grid-template-columns: 1fr;
}
.pconsole .pverdict-mark {
width: 46px;
height: 46px;
}
.pconsole .pverdict-headline {
font-size: 19px;
}
.proom-mid {
grid-template-columns: 1fr;
}
.proom-clock .pclock-rail {
overflow-x: auto;
padding-bottom: var(--space-1);
}
.proom-clock .pclock-stage {
flex: 0 0 104px;
}
.pconsole-tabs #ppanel {
padding: var(--space-3);
}
.pconsole .pdeck-grid {
grid-template-columns: 1fr;
}
}
@media print {
.dash-wrap.pconsole::before,
.pconsole-anchors,
.pconsole-trust-strip {
display: none !important;
}
.pconsole-head {
position: static;
box-shadow: none;
}
.pconsole-head-main {
display: block;
padding: 0 0 var(--space-3);
border-bottom: 1px solid var(--color-border-strong);
background: transparent;
}
.pconsole-overview {
display: block;
}
.pconsole-overview .pvitals {
margin-top: var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.pvitals .pkpi {
transition: none;
}
.pvitals .pkpi:hover {
transform: none;
}
}
/* =========================================================
Sidebar: the ecosystem strip
---------------------------------------------------------
The other stakeholders on the platform, for a reader whose role cannot open their pages.
Deliberately not styled as disabled navigation. Greyed-out buttons read as "denied" or
"paywalled" and invite a click that goes nowhere; this is a described list that reads as
context. It is quieter than the nav above it in every dimension — smaller type, no hover
affordance, no pointer cursor — so nobody mistakes it for something to press.
========================================================= */
.nav-eco { margin-top: var(--space-4); padding-top: var(--space-3);
border-top: 1px solid rgba(255, 255, 255, 0.10); }
.eco-list { list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: var(--space-2); }
.eco-item {
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 2px var(--space-2);
padding: 5px 10px;
border-radius: var(--radius-sm);
cursor: default;
}
.eco-item .icon { width: 14px; height: 14px; opacity: 0.55; }
.eco-name { font-size: 12.5px; font-weight: 500; opacity: 0.72; }
/* The count is the point of this block: a number makes it evidence rather than a menu. */
.eco-count {
justify-self: end;
min-width: 20px;
padding: 1px 6px;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.12);
opacity: 0.85;
}
.eco-blurb {
grid-column: 2 / -1;
font-size: 10.5px;
line-height: 1.35;
opacity: 0.45;
}
.eco-note {
margin: var(--space-3) 10px 0;
font-size: 10.5px;
line-height: 1.4;
opacity: 0.4;
}
@media print { .nav-eco { display: none; } }
/* =========================================================
Data origin — which countries the figures were collected in
---------------------------------------------------------
The partner console reports across a border. Before this band the page named
counties and never countries, so Mbeya sat beside Busia with nothing to say one
is Tanzanian. Two surfaces carry it: chips in the sticky header, which survive
scrolling, and the band below the header, which carries the counts.
========================================================= */
/* --- the chips in the sticky header --- */
.pgeo-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 5px 0 0;
}
.pgeo-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px 2px 6px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.6;
color: var(--color-primary);
text-decoration: none;
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.pgeo-chip:hover,
.pgeo-chip:focus-visible {
background: #fff;
border-color: var(--color-leaf);
transform: translateY(-1px);
}
/* --- the flag itself ---
An inline SVG, not the regional-indicator emoji: Chrome on Windows ships no flag
glyphs and renders the emoji as bare tofu letters, and this console is read by
sponsors on managed Windows laptops. Sized in em so it tracks whatever text it
sits beside. */
.flagicon {
display: inline-block;
flex: 0 0 auto;
width: 1.5em;
height: 1em;
vertical-align: -0.12em;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.14);
}
/* A country with no drawing gets its ISO code rather than a guessed flag. */
.flagicon-code {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 1.9em;
height: 1.25em;
padding: 0 0.35em;
font-size: 0.75em;
font-weight: 700;
letter-spacing: .04em;
color: var(--color-primary);
background: var(--color-leaf-soft);
border-radius: var(--radius-sm);
box-shadow: none;
}
/* --- the band --- */
.pgeo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
}
.pgeo-country {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
background: linear-gradient(150deg, rgba(231, 242, 208, 0.42), rgba(255, 255, 255, 0.9) 62%);
border: 1px solid var(--pconsole-border, var(--color-border));
border-radius: var(--pconsole-radius, var(--radius-md));
box-shadow: var(--shadow-sm);
}
.pgeo-country-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
}
.pgeo-flag {
display: inline-flex;
font-size: 26px;
line-height: 1;
filter: drop-shadow(0 2px 5px rgba(31, 41, 51, 0.2));
}
.pgeo-country-name { min-width: 0; }
.pgeo-country-name h4 {
margin: 0;
font-size: 15.5px;
font-weight: 650;
line-height: 1.2;
color: var(--color-ink);
}
/* The county list is the fine print of the country name, so it truncates rather than
wrapping the card into a different height from its neighbour. */
.pgeo-country-name .meta {
margin: 2px 0 0;
overflow: hidden;
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.pgeo-share {
padding: 3px 9px;
font-size: 12.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-primary);
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
}
.pgeo-bar {
height: 6px;
overflow: hidden;
background: rgba(11, 82, 40, 0.09);
border-radius: var(--radius-pill);
}
.pgeo-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-leaf));
border-radius: inherit;
}
.pgeo-figures {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2) var(--space-3);
margin: 0;
}
.pgeo-figures > div {
padding-top: var(--space-2);
border-top: 1px solid rgba(210, 218, 195, 0.7);
}
.pgeo-figures dt {
font-size: 10px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-muted);
}
.pgeo-figures dd {
margin: 2px 0 0;
font-size: 17px;
font-weight: 650;
font-variant-numeric: tabular-nums;
line-height: 1.2;
color: var(--color-ink);
}
.pgeo-figures dd small {
font-size: 11px;
font-weight: 500;
color: var(--color-muted);
}
.pgeo-note {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: 0;
padding: 0 var(--space-5) var(--space-4);
}
.pgeo-note .icon { flex: 0 0 auto; margin-top: 1px; }
/* A country column is a label, not a figure — it stays legible when the table scrolls. */
.pgeo-cell {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.pgeo-cell .flagicon { font-size: 13px; }
@media (max-width: 640px) {
.pgeo-grid { padding: var(--space-3) var(--space-4); }
.pgeo-note { padding: 0 var(--space-4) var(--space-3); }
}
/* Print: the band is part of the board pack — a donor reading the paper copy needs the
provenance as much as the reader on screen, so it is never one of the print-hidden bits. */
@media print {
.pgeo-country { background: none; box-shadow: none; border-color: var(--color-border-strong); }
.pgeo-bar > span { background: var(--color-primary); }
}
/* =========================================================
Demonstration Network — browse
---------------------------------------------------------
These rules used to live in a {% block extra_css %} inside the page template,
which base.html did not define. The block was silently discarded and the page
rendered as an unstyled list of links. base.html defines it now, but the rules
belong here regardless: cached with the rest of the design system, and out of
reach of a base template that forgets a block.
========================================================= */
.dnet { display: flex; flex-direction: column; gap: var(--space-5); }
.dnet-eyebrow {
margin: 0;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--color-primary);
}
/* --- where the demonstrations are --- */
.dnet-origin {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
gap: var(--space-4);
align-items: center;
padding: var(--space-4) var(--space-5);
background: linear-gradient(120deg, rgba(231, 242, 208, 0.5), rgba(255, 255, 255, 0.94) 58%);
}
.dnet-origin-lead { display: flex; gap: var(--space-3); align-items: flex-start; }
.dnet-origin-lead > .icon { flex: 0 0 auto; margin-top: 2px; color: var(--color-primary); }
.dnet-origin-lead .meta { margin: 3px 0 0; }
.dnet-origin-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.dnet-origin-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px var(--space-2);
align-items: center;
padding: var(--space-3);
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.dnet-origin-item .flagicon { grid-row: span 3; font-size: 20px; align-self: start; }
.dnet-origin-name { font-size: 14px; font-weight: 650; color: var(--color-ink); }
.dnet-origin-count { font-size: 12px; font-weight: 600; color: var(--color-primary); }
.dnet-origin-item .meta { font-size: 11px; }
@media (max-width: 900px) {
.dnet-origin { grid-template-columns: 1fr; }
}
/* --- toolbar --- */
.dnet-preamble { max-width: 78ch; }
.dnet-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.dnet-search { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* The icon sits inside the control rather than beside it, so the search and the county
filter read as one instrument instead of three loose parts. */
.dnet-field { position: relative; display: flex; align-items: center; }
.dnet-field > .icon {
position: absolute;
left: 11px;
width: 15px;
height: 15px;
pointer-events: none;
color: var(--color-faint);
}
.dnet-field input,
.dnet-field select {
padding: 8px 14px 8px 32px;
font: inherit;
font-size: 13px;
color: var(--color-ink);
background: var(--color-card);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
transition: border-color .15s ease, box-shadow .15s ease;
}
.dnet-field input { min-width: 240px; }
.dnet-field input:focus-visible,
.dnet-field select:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(11, 82, 40, 0.13);
}
.dnet-count { font-size: 12.5px; color: var(--color-muted); }
.dnet-count strong { font-size: 15px; color: var(--color-ink); }
/* --- the grid --- */
.dnet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-4);
}
.dcard {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dcard:hover {
transform: translateY(-3px);
border-color: var(--color-border-strong);
box-shadow: var(--shadow-lg);
}
/* --- the media header --- */
.dcard-media {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-3);
aspect-ratio: 16 / 9;
background-color: #e7f2d0;
background-size: cover;
background-position: center;
text-decoration: none;
}
/* A card with no photograph does not get a photo-shaped hole. It collapses to a slim
band — enough to carry the trial kind, not enough to look like a failed image. */
.dcard-media-empty {
aspect-ratio: auto;
min-height: 0;
align-items: center;
background-image:
repeating-linear-gradient(135deg,
rgba(11, 82, 40, 0.05) 0 6px, transparent 6px 12px);
}
.dcard-kind {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
color: var(--color-primary);
background: rgba(255, 255, 255, 0.92);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
}
.dcard-kind .icon { width: 13px; height: 13px; }
.dcard-media-count {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
font-size: 11px;
font-weight: 600;
color: var(--color-ink);
background: rgba(255, 255, 255, 0.92);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
}
.dcard-media-count .icon { width: 12px; height: 12px; }
/* --- body --- */
.dcard-body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-2);
align-items: flex-start;
padding: var(--space-4);
}
.dcard-title { margin: 0; font-size: 15.5px; line-height: 1.32; letter-spacing: -0.01em; }
.dcard-title a { color: var(--color-ink); text-decoration: none; }
.dcard-title a:hover { color: var(--color-primary); }
.dcard-objective {
flex: 1;
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--color-muted);
}
.dcard-chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* --- footer --- */
.dcard-foot {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px var(--space-3);
padding: var(--space-3) var(--space-4);
font-size: 11.5px;
color: var(--color-muted);
background: var(--color-page);
border-top: 1px solid var(--color-border);
}
.dcard-place,
.dcard-plots {
display: inline-flex;
gap: 6px;
align-items: center;
min-width: 0;
}
/* The place is the one line that must never wrap into two — it is what tells the reader
which country's rules the trial ran under. */
.dcard-place > span {
overflow: hidden;
font-weight: 600;
color: var(--color-ink);
text-overflow: ellipsis;
white-space: nowrap;
}
.dcard-plots .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.dcard-season,
.dcard-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --- chips + the evidence ladder ---
Three states and none of them is "proven": the colour ladder stops at amber on
purpose, so nothing on this page can be mistaken for a recommendation. */
.chip {
display: inline-block;
padding: 3px 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
color: var(--color-muted);
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
}
.chip-crop { color: var(--color-primary); border-color: var(--color-leaf); background: #fbfdf6; }
.ev {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
border-radius: var(--radius-pill);
}
.ev-none { color: #6b7280; background: #f1f3f5; }
.ev-observed { color: #9a6414; background: #fff4e0; }
.ev-repeated { color: #3f6212; background: var(--color-leaf-soft); }
@media (max-width: 560px) {
.dnet-field input { min-width: 0; width: 100%; }
.dnet-search { width: 100%; }
.dnet-field { flex: 1; }
.dcard-foot { grid-template-columns: 1fr; }
}
/* Country groups inside the county table. The heading row is what carries the rule the
figures obey — each country is read on its own, and the subtotals stop at the border. */
.pgeo-group-head > th {
padding: var(--space-2) var(--space-3);
text-align: left;
background: linear-gradient(90deg, var(--color-leaf-soft), rgba(255, 255, 255, 0.6));
border-top: 1px solid var(--color-border-strong);
}
.pgeo-group:first-of-type .pgeo-group-head > th { border-top: 0; }
.pgeo-group-head .pgeo-cell {
font-size: 12.5px;
font-weight: 700;
color: var(--color-primary);
}
.pgeo-group-sub {
display: block;
margin-top: 1px;
font-size: 10.5px;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
text-transform: none;
color: var(--color-muted);
}