/* Playbook additions on top of the Affinitas design system (vendor/affinitas.css, version 1.1.0).
The base system is mobile-first with a bottom tab bar (see DESIGN.md); Playbook is a desk-first,
data-dense internal tool (like Atlas), so it adds one new shell variant, a left sidebar, built from
the same custom properties. Colours, radii, shadows, type and the light and dark themes all come
from the system's tokens: nothing here redefines them. Where a rule needs a colour it uses a token
(--surface, --border, --navy-*, --on-primary...), so it follows the theme; the sidebar is the one
surface that stays navy in both themes (--navy-950). */
/* The one deliberate deviation from the system, to propose upstream: in the light theme --grey-600
(#6b7482) measures 4.44 on the page canvas and 4.36 on --navy-50 against the 4.5 that WCAG AA asks of
small text (it passes on white, 4.77). This value passes on all three. The dark theme is unaffected:
its own rule is more specific than this one. */
:root { --grey-600: #667085; }
.pb-shell {
display: flex;
min-height: 100vh;
background: var(--canvas);
}
.pb-sidebar {
flex: none;
width: 248px;
background: var(--navy-950);
color: rgba(255, 255, 255, 0.82);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.pb-sidebar__brand {
display: flex;
padding: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* "Integration Dashboard" (brand.js) is longer than the old "Playbook": in the 248px sidebar it keeps one line with a
lighter tracking, still uppercase and tracked as the design system asks. */
.pb-sidebar__brand .brand__sub { white-space: nowrap; letter-spacing: 0.06em; }
.pb-nav {
padding: 10px 10px 20px;
flex: 1;
}
.pb-nav__section {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
padding: 14px 10px 6px;
}
.pb-nav a,
.pb-nav__parent {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
padding: 9px 10px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.78);
font-size: 0.88rem;
font-weight: 500;
margin-bottom: 2px;
}
.pb-nav a span,
.pb-nav__parent {
display: flex;
align-items: center;
gap: 9px;
}
.pb-nav__parent { justify-content: space-between; }
.pb-nav a i,
.pb-nav__parent i {
width: 16px;
height: 16px;
flex: none;
}
.pb-nav a:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.pb-nav a.is-active {
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-weight: 700;
}
/* A count badge: danger fill with the "on primary" text colour, so it passes AA in both themes. */
.badge-count { background: var(--danger); color: var(--on-primary); }
.pb-nav .badge-count {
margin-left: auto;
background: rgba(255, 255, 255, 0.16);
color: #fff;
border-radius: var(--radius-pill);
padding: 1px 7px;
font-size: 0.68rem;
font-weight: 700;
}
.pb-nav__parent {
color: rgba(255, 255, 255, 0.55);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding-bottom: 2px;
margin-top: 4px;
}
.pb-nav__parent.is-active {
color: rgba(255, 255, 255, 0.85);
}
.pb-nav__parent i {
width: 14px;
height: 14px;
}
.pb-nav__group > summary { list-style: none; cursor: pointer; }
.pb-nav__group > summary::-webkit-details-marker { display: none; }
.pb-nav__chevron { width: 12px !important; height: 12px !important; transition: transform 0.15s ease; }
.pb-nav__group[open] > summary .pb-nav__chevron { transform: rotate(180deg); }
/* ---------------------------------------------------------- topbar search */
.pb-search { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; background: var(--canvas); }
.pb-search i { width: 16px; height: 16px; color: var(--grey-600); flex: none; }
.pb-search input { border: none; background: transparent; outline: none; font-size: 0.86rem; width: 100%; color: var(--navy-900); }
.pb-search input:focus { outline: none; }
.pb-search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 360px; overflow-y: auto; z-index: 50; }
.pb-search__section { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-600); padding: 8px 12px 2px; }
.pb-search__results a { display: block; padding: 8px 12px; font-size: 0.86rem; color: var(--navy-900); text-decoration: none; }
.pb-search__results a:hover { background: var(--navy-50); }
.pb-search__sub { display: block; font-size: 0.74rem; color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .pb-search { display: none; } }
/* ---------------------------------------------------------- demo environment marker */
.pb-demo-badge { display: inline-block; flex: none; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--gold); background: var(--gold-soft);
color: var(--navy-900); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; cursor: help; }
.pb-demo-badge__short { display: none; }
@media (max-width: 560px) { .pb-demo-badge__long { display: none; } .pb-demo-badge__short { display: inline; } }
/* ---------------------------------------------------------- impersonation (administrators, test environments) */
/* A bar of its own, fixed above the top bar while an administrator is browsing as someone else (the top bar is already
full at laptop widths). Gold is the system's "attention". */
.pb-impersonating { position: sticky; top: 0; z-index: 11; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 0 16px; background: var(--gold-soft); border-bottom: 1px solid var(--gold); color: var(--navy-900); font-size: 0.86rem; }
.pb-impersonating > svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.pb-impersonating__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-impersonating form { display: flex; flex: none; }
.pb-impersonating__stop { border: 0; border-radius: var(--radius-pill); padding: 4px 14px; background: var(--navy-900); color: var(--on-primary);
font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.pb-impersonating__stop:hover { background: var(--accent); }
.pb-main--impersonating .pb-topbar { top: 40px; }
@media (max-width: 560px) { .pb-impersonating__role { display: none; } }
/* ---------------------------------------------------------- light / dark button */
.pb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--grey-600); cursor: pointer; flex: none; }
.pb-theme-toggle[hidden] { display: none; }
.pb-theme-toggle:hover { background: var(--navy-50); color: var(--navy-900); }
.pb-theme-toggle svg { width: 18px; height: 18px; }
/* It shows the theme it would switch to: the moon in the light theme, the sun in the dark one. */
:root[data-theme="dark"] .pb-theme-toggle__moon, :root:not([data-theme="dark"]) .pb-theme-toggle__sun { display: none; }
/* ---------------------------------------------------------- notification bell */
.pb-bell { position: relative; }
.pb-bell__button { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; position: relative; color: var(--grey-600); }
.pb-bell__button::-webkit-details-marker { display: none; }
.pb-bell__button:hover { background: var(--navy-50); }
.pb-bell__count { position: absolute; top: 2px; right: 2px; background: var(--danger); color: var(--on-primary); font-size: 0.62rem; font-weight: 700; border-radius: 999px; min-width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.pb-bell__panel { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 400px; overflow-y: auto; z-index: 50; }
.pb-bell__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--navy-900); }
.pb-bell__item { display: block; border-bottom: 1px solid var(--border); }
.pb-bell__item button { width: 100%; text-align: left; background: none; border: none; padding: 10px 14px; font-size: 0.82rem; color: var(--navy-900); cursor: pointer; }
.pb-bell__item button:hover { background: var(--navy-50); }
.pb-bell__item.is-unread button { font-weight: 600; background: var(--gold-soft); }
.pb-bell__time { display: block; font-size: 0.7rem; color: var(--grey-600); font-weight: 400; margin-top: 2px; }
.pb-nav__sublist {
display: flex;
flex-direction: column;
padding-left: 8px;
margin-bottom: 4px;
}
.pb-nav__sublist a {
padding-left: 24px;
}
.pb-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.pb-topbar {
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 24px;
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
}
.pb-breadcrumb {
font-size: 0.86rem;
color: var(--grey-600);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The search box keeps a usable width when the bar gets busy (the demo badge, the buttons); the page name gives way. */
@media (min-width: 861px) { .pb-search { min-width: 200px; } }
.pb-breadcrumb a {
color: var(--grey-600);
}
.pb-breadcrumb a:hover {
color: var(--accent);
}
.pb-content {
padding: 24px;
max-width: 1400px;
width: 100%;
margin: 0 auto;
}
/* ---------------------------------------------------------- RAG + level + phase */
.rag-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.rag-dot--green { background: var(--success); }
.rag-dot--amber { background: var(--gold); }
.rag-dot--red { background: var(--danger); }
.rag-dot--grey { background: var(--grey-400); }
.level-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.level-badge--integrate { background: var(--navy-900); color: var(--on-primary); }
.level-badge--collaborate { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.phase-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 0.7rem;
font-weight: 700;
}
.phase-badge--discovery { background: var(--navy-100); color: var(--navy-900); }
.phase-badge--alignment { background: var(--navy-700); color: var(--on-primary); }
.phase-badge--activation { background: var(--accent); color: var(--on-primary); }
.phase-badge--review { background: var(--navy-900); color: var(--on-primary); }
.phase-badge--bau { background: var(--navy-50); color: var(--grey-600); border: 1px solid var(--border); }
.status-pill {
display: inline-flex;
padding: 2px 9px;
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
}
.status-pill--pending { background: var(--navy-50); color: var(--grey-600); }
.status-pill--progress { background: var(--gold-soft); color: var(--gold); }
.status-pill--negotiation { background: var(--navy-100); color: var(--accent-dark); }
.status-pill--completed { background: var(--success-soft); color: var(--success-text); }
.overdue { color: var(--danger); font-weight: 700; }
/* ---------------------------------------------------------- progress + heatmap */
.pbar {
height: 8px;
border-radius: var(--radius-pill);
background: var(--navy-100);
overflow: hidden;
}
.pbar > i { display: block; height: 100%; border-radius: var(--radius-pill); }
.pbar--green > i { background: var(--success); }
.pbar--amber > i { background: var(--gold); }
.pbar--red > i { background: var(--danger); }
.pbar--grey > i { background: var(--grey-400); }
/* Compact where the room is short, roomier where it is not: the matrix never goes below 580px (a school column of 160px
and ten areas of 38px with a 0.6rem header, which fits a laptop at a glance; it was 850) and grows with its card up to
920px, so on a wide screen it is not a small block stuck to the left. The longest header, an area code of five letters,
fits in 38px; a school name longer than its column wraps. */
.heat-table { width: 100%; min-width: 580px; max-width: 860px; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.heat-table th { font-size: 0.6rem; color: var(--grey-600); text-transform: uppercase; padding-bottom: 4px; cursor: default; }
.heat-table th:first-child, .heat-table td:first-child { width: 160px; }
/* School names go up to ~46 characters ("MXCAM · Euroamerican School Monterrey Campestre"): smaller type
that may wrap to two or three lines so a name never runs over the cells. */
.heat-table td:first-child { font-size: 0.76rem; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.heat-table th:not(:first-child), .heat-table td:not(:first-child) { width: 38px; }
.heat-cell {
height: 30px;
border-radius: var(--radius-xs);
font-size: 0.7rem;
font-weight: 700;
text-align: center;
line-height: 30px;
}
.heat-cell--green { background: var(--success-soft); color: var(--success-text); box-shadow: inset 0 0 0 1px var(--success-border); }
.heat-cell--amber { background: var(--gold-soft); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--gold); }
.heat-cell--red { background: var(--danger-soft); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger-border); }
.heat-cell--grey { background: var(--navy-50); color: var(--grey-600); box-shadow: inset 0 0 0 1px var(--border); }
/* Native checkboxes/radios pick up the accent colour for free — no custom markup needed. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
/* Custom-styled file input: the native "Choose File" button can't be recoloured directly (it's
OS chrome), so the input is visually hidden and a styled label stands in for it — the classic,
accessible pattern (the real still receives focus/click/keyboard input). */
.file-input { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.file-input input[type="file"] {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.file-input__button {
display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border);
color: var(--navy-900); font-weight: 600; font-size: 0.82rem; padding: 8px 14px;
border-radius: var(--radius-sm); transition: background 0.15s ease, border-color 0.15s ease; flex: none;
}
.file-input__button i { width: 14px; height: 14px; }
.file-input:hover .file-input__button, .file-input input[type="file"]:focus + .file-input__button {
background: var(--navy-50); border-color: var(--accent); color: var(--accent);
}
.file-input__name { font-size: 0.82rem; color: var(--grey-600); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input__name.has-file { color: var(--navy-900); font-weight: 600; }
/* ---------------------------------------------------------- KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
/* ---------------------------------------------------------- misc */
.table-plain { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table-plain th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-600); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table-plain td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table-plain tr:hover td { background: var(--navy-50); }
.table-plain tr.row-link { cursor: pointer; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
/* Print view — mirrors the source HTML dashboard's @media print block: chrome and controls
disappear, the content column takes the full page width. */
@media print {
.pb-sidebar, .pb-topbar, .toolbar, .tabs, .no-print { display: none !important; }
.pb-content { max-width: 100%; padding: 0; }
.card { box-shadow: none; border: 1px solid var(--border); break-inside: avoid; }
body { background: #fff; }
}
/* A fixed repeat(N,1fr) grid overflows on narrow viewports (ae-mockup is mobile-first — see
DESIGN.md); auto-fit/minmax wraps to fewer columns instead of clipping. */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
/* ---------------------------------------------------------- error / empty states */
.state-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--canvas); padding: 24px; }
.state-card { max-width: 440px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 32px; box-shadow: var(--shadow-sm); }
.state-card__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.state-card__icon--error { background: var(--danger-soft); color: var(--danger-text); }
.state-card__icon--restricted { background: var(--navy-50); color: var(--navy-900); }
.state-card h1 { font-size: 1.15rem; margin: 0 0 8px; }
.state-card p { color: var(--grey-600); font-size: 0.9rem; margin: 0 0 22px; }
.state-card__actions { display: flex; gap: 10px; justify-content: center; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--grey-600); }
.empty-state__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-50); color: var(--navy-900); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.empty-state h3 { color: var(--navy-900); font-size: 1rem; margin: 0 0 6px; }
.empty-state p { font-size: 0.86rem; margin: 0 0 16px; }
/* ---------------------------------------------------------- slide-over drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(6, 20, 40, 0.55); backdrop-filter: blur(2px); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 560px; background: var(--surface); z-index: 41;
box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; }
.drawer--wide { max-width: 760px; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.drawer__body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }
.drawer__close { color: var(--grey-600); font-size: 1.3rem; line-height: 1; text-decoration: none; padding: 4px 8px; border-radius: var(--radius-sm); }
.drawer__close:hover { background: var(--navy-50); color: var(--navy-900); }
@media (max-width: 640px) { .drawer, .drawer--wide { max-width: 100%; } }
/* ---------------------------------------------------------- layout with long names / wide tables */
/* A table wider than its card scrolls inside the card instead of pushing the whole page sideways. */
.card:has(> table), details:has(> table) { overflow-x: auto; }
/* A button label is one unit: the row of buttons wraps, the words inside a button do not. */
.btn, .file-input__button { white-space: nowrap; }
/* Dense list tables: one line per cell, except the cells marked .wrap (names and free text). */
.table-plain--dense th, .table-plain--dense td { white-space: nowrap; }
.table-plain--dense td.wrap { white-space: normal; min-width: 220px; }
/* The schools list: every column fits the 1180 px page, so nothing is hidden behind a horizontal scroll.
Cells wrap by default; dates, badges, bars and dots (.nw) stay on one line. The school code and the
region sit under the name and the location instead of taking a column each. */
.table-plain--fit th, .table-plain--fit td { padding: 10px 8px; }
.table-plain--fit td.nw { white-space: nowrap; }
.table-plain--fit th.num, .table-plain--fit td.num { text-align: center; }
.table-plain--fit .cell-sub { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--grey-600); margin-top: 2px; }
.table-plain--fit .fin-status { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.table-plain--fit .fin-status .muted { font-size: 0.8rem; }
/* A school below the completion its phase expects: the same amber and red as the heat map, with an icon
so the state is not carried by colour alone. */
.progress-flag { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.progress-flag svg { width: 12px; height: 12px; flex: none; }
.progress-flag--amber { background: var(--gold-soft); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--gold); }
.progress-flag--red { background: var(--danger-soft); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger-border); }
.table-plain .progress-flag { margin-top: 0; margin-left: 6px; }
/* In the schools list the flag goes under the bar, so it does not widen the table. */
.table-plain--fit .progress-flag { display: flex; width: fit-content; margin: 4px 0 0; }
/* The four phases sit side by side where the card is wide enough, two by two where it is not (not three and one). */
.phase-pipeline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* The system's .list-row has three columns from 620 px (name, who, action) for a wide row. A pipeline card has
only the name and its figures, so it gets the whole width instead of a third of it. */
.phase-pipeline .list-row { grid-template-columns: 1fr; }
.phase-pipeline .list-row__sub.overdue { font-weight: 600; }
/* Under a phase's name in the pipeline: its days and the completion it expects. */
.phase-col__rule { margin-top: 2px; font-size: 0.72rem; color: var(--grey-600); }
/* Schools closed as BAU, shown on request under the four phases (a row of its own, so the phases keep their columns).
Grey: there is nothing left to evaluate, so no status colour. */
.phase-closed { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.phase-closed .phase-closed__list { margin-top: 6px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.phase-closed .list-row { opacity: 0.85; }
/* The status of a task changed in place in the Functions list: a select drawn like the status pill (same colours), with room to
tap. It is only there for who may change it; everyone else sees the pill. */
/* A private item (privacy.js): a small lock before its text, in every list. */
.icon-private { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--grey-600); }
.field > .check-pill { align-self: flex-start; }
.check-pill .icon-private { margin-right: 4px; }
/* "Add a task to this school" (an extra task, outside the shared playbook and every percentage). */
.extra-task { margin: 0 0 12px; }
.extra-task > summary { display: inline-flex; list-style: none; cursor: pointer; }
.extra-task > summary::-webkit-details-marker { display: none; }
.extra-task__form { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--navy-50); }
.extra-task__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.pill--extra { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
@media (max-width: 640px) { .extra-task__row { grid-template-columns: 1fr; } }
.fn-status { margin: 0; }
.fn-status__select { min-height: 36px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.fn-status__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---------------------------------------------------------- visits and meetings
Written for a phone first: it is filled in on the way out of a school. One column, big touch targets, the actions within
thumb's reach; wider screens only spread the same blocks out. Tokens only. */
.visit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.visit-card { display: block; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--navy-900); text-decoration: none; }
.visit-card:hover { box-shadow: var(--shadow); }
.visit-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visit-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.visit-card__date { margin-left: auto; font-size: 0.8rem; color: var(--grey-600); }
.visit-card__title { margin-top: 8px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.visit-card__school { margin-top: 2px; font-size: 0.82rem; color: var(--grey-600); }
.visit-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.8rem; color: var(--grey-600); }
.visit-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.visit-card__meta svg { width: 14px; height: 14px; flex: none; }
.visit-card__open { color: var(--gold); font-weight: 600; }
.visit-kind { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.visit-kind--visit { background: var(--navy-900); color: var(--on-primary); }
.visit-kind--meeting { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.visit-kind--call { background: var(--navy-100); color: var(--navy-900); }
:is(.visit-form, .pane-form) .field__label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; }
:is(.visit-form, .pane-form) :is(input:not([type=checkbox], [type=radio], [type=file]), select, textarea) { width: 100%; max-width: 100%; min-height: 44px; }
/* A school's next steps on its Overview (schoolPaneRoutes.js): the text, who and by when, then what can be done with it. */
.next-step { flex-direction: column; align-items: stretch; gap: 6px; }
.next-step form { display: inline; }
.next-step__add > summary { list-style: none; width: fit-content; }
.next-step__add > summary::-webkit-details-marker { display: none; }
.next-step__add[open] > summary { margin-bottom: 12px; }
/* The Help page (help.js) and the ? in the top bar. */
.pb-help { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--grey-600); }
.pb-help:hover { background: var(--navy-50); color: var(--navy-900); }
.pb-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-help :is(i, svg) { width: 20px; height: 20px; }
.help { display: flex; flex-direction: column; gap: var(--space-2xl); }
.help [hidden] { display: none !important; }
/* The head: the title, what the page is for, and the search. */
.help-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: var(--space-xl); align-items: end; padding: 28px; border-radius: var(--radius-lg); background: var(--navy-50); border: 1px solid var(--border); }
.help-head__title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 2rem; letter-spacing: -0.015em; line-height: 1.2; color: var(--navy-900); }
.help-head__lead { margin: 0; max-width: 60ch; color: var(--grey-800); }
.help-head__q { display: inline-flex; vertical-align: -4px; color: var(--accent); }
.help-head__q :is(i, svg) { width: 18px; height: 18px; }
.help-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sm); }
.help-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-search :is(i, svg) { flex: none; width: 18px; height: 18px; color: var(--grey-600); }
.help-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--navy-900); font: inherit; outline: none; }
.help-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 18px; border-radius: var(--radius); background: var(--gold-soft); color: var(--navy-900); }
.help-empty :is(i, svg) { width: 18px; height: 18px; }
/* The topics as tiles, grouped like the menu. */
.help-group__title { margin: 0; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-600); }
.help-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.help-tile { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--navy-900); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; }
.help-tile:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.help-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-tile__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.help-tile__title { font-weight: 600; }
.help-tile__summary { font-size: 0.84rem; line-height: 1.45; color: var(--grey-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.help-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--navy-50); color: var(--accent); }
.help-icon :is(i, svg) { width: 20px; height: 20px; }
.help-icon--lg { width: 52px; height: 52px; border-radius: var(--radius); }
.help-icon--lg :is(i, svg) { width: 26px; height: 26px; }
.help-icon--gold { background: var(--gold-soft); color: var(--navy-900); }
/* One topic: its head, then its blocks side by side where there is room. */
.help-topic { display: flex; flex-direction: column; gap: var(--space-lg); padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); scroll-margin-top: 90px; }
.help-topic:focus { outline: none; }
.help-topic:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--navy-100), var(--shadow); }
.help-topic__head { display: flex; align-items: flex-start; gap: 16px; }
.help-topic__title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1.2; }
.help-topic__summary { margin: 0; max-width: 70ch; color: var(--grey-600); }
.help-here { display: none; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--navy-900); font-size: 0.72rem; font-weight: 700; }
.help-here :is(i, svg) { width: 13px; height: 13px; }
.help-topic:target .help-here { display: inline-flex; }
.help-topic__sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.help-block { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius); background: var(--navy-50); }
.help-block__heading { margin: 0; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; }
.help-points { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.help-points li { position: relative; padding-left: 20px; font-size: 0.92rem; line-height: 1.5; }
.help-points li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.help-top { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 0.84rem; color: var(--grey-600); text-decoration: none; }
.help-top:hover { color: var(--accent); }
.help-top :is(i, svg) { width: 15px; height: 15px; }
/* The glossary as tiles, the questions as an accordion. */
.help-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; }
.help-term { padding: 16px; border-radius: var(--radius); background: var(--navy-50); border-left: 3px solid var(--gold); }
.help-term dt { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.help-term dd { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--grey-800); }
.help-faq { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.help-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.help-faq summary :is(i, svg) { flex: none; width: 18px; height: 18px; color: var(--grey-600); transition: transform .15s; }
.help-faq[open] summary :is(i, svg) { transform: rotate(180deg); }
.help-faq[open] { border-color: var(--accent); }
.help-faq p { margin: 0; padding: 0 16px 16px; color: var(--grey-800); max-width: 80ch; }
@media (max-width: 860px) { .help-head { grid-template-columns: 1fr; padding: 20px; } .help-topic { padding: 20px; } }
@media (max-width: 640px) { .help-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .help-tile { flex-direction: column; gap: 8px; padding: 12px; } .help-tile__summary { display: none; } .help-tile__title { font-size: 0.9rem; line-height: 1.3; } .help-head__title { font-size: 1.6rem; } .help-topic__head { gap: 12px; } .help-icon--lg { width: 44px; height: 44px; } .help-topic__sections { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .help-tile, .help-faq summary :is(i, svg) { transition: none; } .help-tile:hover { transform: none; } }
/* Loading DD items from Excel, on the DD register (administrators). */
.dd-import { margin-bottom: 16px; }
.dd-import__summary { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-weight: 600; list-style: none; }
.dd-import__summary::-webkit-details-marker { display: none; }
.dd-import__summary :is(i, svg) { width: 18px; height: 18px; color: var(--accent); }
.dd-import__list { margin: 8px 0 0; padding-left: 18px; }
/* The Exports page. */
.export-form { max-width: 760px; }
.export-form [hidden] { display: none; }
.export-form__list { margin: 0; padding-left: 18px; color: var(--grey-600); font-size: 0.9rem; }
.check-pill input[type=radio] { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--accent); }
/* A task's sub-actions in its drawer (functionReview.js): each one a button that ticks or unticks it. */
.step-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.step-check { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--navy-900); font: inherit; text-align: left; cursor: pointer; }
.step-check:hover:not(:disabled) { background: var(--navy-50); }
.step-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-check:disabled { cursor: default; }
.step-check > :is(i, svg) { flex: none; width: 20px; height: 20px; color: var(--grey-600); }
.step-check.is-done > :is(i, svg) { color: var(--success); }
.step-check.is-done .step-check__text { color: var(--grey-600); text-decoration: line-through; }
.step-check__text { overflow-wrap: anywhere; }
.step-check__by { display: block; font-size: 0.78rem; color: var(--grey-600); }
.step-count { font-size: 0.74rem; color: var(--grey-600); white-space: nowrap; }
/* The comment and risk flag of a school's function (Areas tab and Functions list). */
.area-status { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--navy-50); }
.area-status__comment { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.area-status__meta { font-size: 0.78rem; color: var(--grey-600); }
.risk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.risk-pill i { width: 14px; height: 14px; }
.risk-pill--green { background: var(--surface); color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.risk-pill--amber { background: var(--surface); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.risk-pill--red { background: var(--danger); color: var(--on-primary); }
.area-status-form > summary { list-style: none; width: fit-content; }
.area-status-form > summary::-webkit-details-marker { display: none; }
.area-status-form[open] > summary { margin-bottom: 12px; }
/* The timeline of a function at a school: one bar per domain, from its first to its last due date, and today. */
.timeline { display: grid; grid-template-columns: minmax(120px, 32%) 1fr; gap: 6px 12px; align-items: center; font-size: 0.8rem; }
.timeline__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline__track { position: relative; height: 14px; border-radius: var(--radius-pill); background: var(--navy-50); }
.timeline__bar { position: absolute; top: 2px; bottom: 2px; min-width: 6px; border-radius: var(--radius-pill); background: var(--accent); }
.timeline__bar--done { background: var(--success); }
.timeline__bar--late { background: var(--danger); }
.timeline__today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--gold); }
.timeline__scale { display: flex; justify-content: space-between; grid-column: 2; color: var(--grey-600); font-size: 0.74rem; }
@media (max-width: 640px) { .timeline { grid-template-columns: 1fr; } .timeline__scale { grid-column: 1; } }
/* Risks and opportunities to EBITDA on the Financials tab. */
.table-scroll { overflow-x: auto; }
.bridge-table td.num, .bridge-table th.num { text-align: right; white-space: nowrap; }
.bridge-table tr.bridge-table__total td { font-weight: 700; border-top: 2px solid var(--border); }
.bridge-kind--risk { color: var(--danger); }
.bridge-kind--opportunity { color: var(--success); }
.visit-form__row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.visit-form__item { display: grid; grid-template-columns: minmax(0, 1fr) 220px 170px auto; gap: 8px; align-items: center; }
.visit-form__link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.visit-form__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.check-group { display: flex; flex-wrap: wrap; gap: 8px; }
.check-group--scroll { max-height: 190px; overflow-y: auto; padding: 2px; }
.check-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: 0.88rem; cursor: pointer; }
.check-pill input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--accent); }
.check-pill:has(input:checked) { border-color: var(--accent); background: var(--navy-50); font-weight: 600; }
.check-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-pill--small { min-height: 36px; padding: 4px 12px; }
/* A searchable multiple choice (views/partials/multi_select.ejs): a search box with a drop-down under it, and what is chosen
listed below, one chip each, with a button to remove it. Made for a long list of people. */
.msel__ui[hidden], .msel__list[hidden] { display: none; }
.msel__box { position: relative; }
.msel__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.msel__option, .msel__none { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); }
.msel__option { cursor: pointer; }
.msel__option:hover, .msel__option.is-active { background: var(--navy-50); }
.msel__none { color: var(--grey-600); }
.msel__chosen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.msel__chosen:empty { display: none; }
.msel__chip { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 6px 4px 14px; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--navy-50); font-size: 0.88rem; font-weight: 600; }
.msel__chip button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--grey-600); cursor: pointer; }
.msel__chip button:hover { background: var(--navy-100); color: var(--navy-900); }
.msel__chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msel__chip button i { width: 16px; height: 16px; }
.msel__note:empty { display: none; }
.visit-detail__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.visit-detail__lines { margin: 4px 0 0; padding-left: 18px; }
.visit-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.visit-photo { display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--navy-50); }
.visit-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.visit-photo__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: 0.78rem; }
.visit-detail__done { color: var(--grey-600); text-decoration: line-through; }
@media (max-width: 640px) {
.visit-list { grid-template-columns: 1fr; }
.visit-form__row, .visit-form__item, .visit-form__link { grid-template-columns: 1fr; }
/* The save buttons stay at the bottom of the screen while the form is long. */
.visit-form__actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--canvas); border-top: 1px solid var(--border); }
.visit-form__actions .btn { flex: 1 1 140px; min-height: 46px; justify-content: center; }
}
/* An area card reached from a link with #area-… stops below the sticky top bar. */
.area-card { scroll-margin-top: 80px; }
/* The conversion under a local-currency figure: small and grey, information only. The number is the lightest grey
that still reads (--grey-600); the approximate sign is smaller and lighter (--grey-400), decoration only. */
.fin-conv { margin-top: 2px; font-size: 0.78rem; line-height: 1.3; color: var(--grey-600); overflow-wrap: anywhere; }
.fin-conv__approx { font-size: 0.85em; color: var(--grey-400); }
/* The same figures again below the cards, in the same groups, order and icons, all grey and with no status colour. */
.fin-converted { margin: 6px 0 22px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--navy-50); }
.fin-converted__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.fin-converted__head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--grey-600); }
.fin-converted__head .muted { font-size: 0.8rem; }
.fin-converted__group + .fin-converted__group { margin-top: 14px; }
.fin-converted .fin-group__head h4 { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--grey-600); }
.fin-converted .fin-icon { background: var(--surface); color: var(--grey-600); }
.fin-card--converted { background: var(--surface); }
.fin-card--converted .fin-card__label, .fin-card--converted .fin-num, .fin-card--converted .fin-num--target { color: var(--grey-600); }
/* Reference values: smaller than the figures above, and never split in the middle of a number. */
.fin-card--converted .fin-num, .fin-card--converted .fin-num--target { font-size: 1.1rem; overflow-wrap: normal; white-space: nowrap; }
.fin-card--converted .fin-icon { background: var(--navy-50); color: var(--grey-600); }
/* Value creation by kind of value (partials/vc_by_type.ejs): a small table with a plain bar for the share of the total.
The bar uses the accent colour, not a status colour: it says how much, not whether it is good. */
.vc-types { margin-top: 18px; }
.vc-types__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vc-types__head h3 { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--navy-900); }
.vc-types__scroll { overflow-x: auto; }
.vc-types__table th.num, .vc-types__table td.num { text-align: right; white-space: nowrap; }
.vc-types__share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.vc-types__share .pbar { flex: 1; min-width: 60px; }
.pbar--accent > i { background: var(--accent); }
/* Value created read across schools (partials/vc_report.ejs): the two blocks side by side where there is room, a
stacked bar for realised and pipeline, and a link when initiatives are past their quarter. */
.vc-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 8px 24px; }
.vc-stack { display: flex; height: 8px; min-width: 90px; border-radius: var(--radius-pill); background: var(--navy-50); overflow: hidden; }
.vc-stack > i { display: block; height: 100%; }
.vc-stack__real { background: var(--accent); }
.vc-stack__pipe { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.vc-legend { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.74rem; color: var(--grey-600); }
.vc-legend span { width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.vc-legend span:first-child { margin-left: 0; }
.vc-legend__real { background: var(--accent); }
.vc-legend__pipe { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.vc-late { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--navy-900); text-decoration: none; font-size: 0.88rem; box-shadow: inset 0 0 0 1px var(--gold); }
.vc-late svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.vc-late span { flex: 1; }
.vc-late:hover { text-decoration: underline; }
.vc-list-table.table-plain--fit th.num, .vc-list-table.table-plain--fit td.num { text-align: right; }
/* Form controls look like the design system's field wherever they are placed. The design system styles a
select, input or textarea only inside .field or .toolbar, so a control in a heading row, an inline form or
a table cell fell back to the browser's own look. This is that same look with no specificity of its own
(:where), so .field, .toolbar, .fx-input, the unit boxes of the Financials form and any inline style still win. */
:where(main :is(select, textarea, input:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=submit], [type=button], [type=range], [type=color]))) {
min-height: 42px; min-width: 0; max-width: 100%; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); font: inherit; color: inherit;
}
:where(main textarea) { min-height: 96px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
:where(main :is(select, textarea, input):focus) { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
:where(main :is(select, textarea, input):disabled) { background: var(--canvas); color: var(--grey-600); }
/* A control that sits beside a small button (a heading row) matches the button's height. */
.control--sm { min-height: 36px; padding: 0 10px; font-size: 0.85rem; }
/* Tab strips wider than the page (a school has 8 tabs) scroll on their own, with each label on one line. */
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tabs__tab { white-space: nowrap; flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
/* A select whose longest option is wider than its column (e.g. "Name (email)") must not stretch the column. */
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
/* Grid items may shrink below their content's minimum width, so inline `1fr` columns never push the page wider. */
.split > * { min-width: 0; }
/* Playbook templates: area list beside the catalogue on wide screens, stacked below the breakpoint. */
@media (min-width: 860px) { .split--templates { grid-template-columns: 280px minmax(0, 1fr); } }
/* Two-column layouts stack on a phone: a wide main column beside a narrower one, and paired form fields. */
@media (min-width: 1020px) { .split--main-side { grid-template-columns: 1.6fr 1fr; } }
@media (min-width: 560px) { .split--halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* ---------------------------------------------------------- phone layout (up to 860px) */
.pb-account { display: flex; align-items: center; gap: 14px; }
/* The account menu is a native : its summary is the system's .account__trigger without the marker. */
.pb-account-menu > summary { list-style: none; cursor: pointer; }
.pb-account-menu > summary::-webkit-details-marker { display: none; }
.pb-account-menu[open] > summary .account__caret { transform: rotate(180deg); }
.pb-account-menu[open] > summary { background: var(--navy-50); border-color: var(--border); }
.pb-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pb-menu-btn { display: none; }
@media (max-width: 860px) {
/* The sidebar becomes a header with a menu button; the navigation opens below it (no JavaScript). */
.pb-shell { flex-direction: column; }
.pb-sidebar { position: relative; width: 100%; height: auto; overflow: visible; z-index: 20; }
.pb-sidebar__brand { padding: 10px 16px; border-bottom: 0; }
.pb-menu-btn { display: grid; place-items: center; position: absolute; top: 8px; right: 12px; width: 40px; height: 40px;
border-radius: var(--radius-sm); color: #fff; cursor: pointer; }
.pb-menu-btn:hover, .pb-menu-toggle:checked + .pb-menu-btn { background: rgba(255, 255, 255, 0.12); }
.pb-menu-toggle:focus-visible + .pb-menu-btn { outline: 2px solid #fff; outline-offset: 2px; }
.pb-nav, .pb-sidebar__foot { display: none; }
.pb-menu-toggle:checked ~ .pb-nav { display: block; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pb-menu-toggle:checked ~ .pb-sidebar__foot { display: block; }
/* The top bar keeps the page name (shortened if needed), the bell, the currency and Sign out. */
.pb-topbar { padding: 0 16px; gap: 10px; }
.pb-breadcrumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-account { gap: 8px; flex: none; }
.pb-content { padding: 16px; }
/* Search stays reachable on a phone: its own full-width row under the header. */
.pb-topbar { flex-wrap: wrap; height: auto; min-height: var(--header-height); padding-block: 8px; }
.pb-search { display: flex; order: 3; flex: 1 1 100%; max-width: none; }
/* Touch-sized targets. */
.btn, .btn--sm { min-height: 40px; }
.tabs__tab { min-height: 44px; display: inline-flex; align-items: center; }
.pb-nav a, .pb-nav__parent { min-height: 44px; }
}
/* ---------------------------------------------------------- keyboard focus */
/* Every control shows where the keyboard is; the sidebar is dark, so its ring is white. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-sidebar :focus-visible { outline-color: #fff; }
.pb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* ---------------------------------------------------------- info icon + help popover */
.info { position: relative; display: inline-block; flex: none; }
.info > summary { list-style: none; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--grey-600); }
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover, .info[open] > summary { background: var(--navy-100); color: var(--navy-900); }
.info > summary svg { width: 16px; height: 16px; }
.info__pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: -8px; width: min(290px, 78vw); background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px 12px; font-size: 0.82rem; font-weight: 400;
line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--grey-800); }
.fin-card__head .info__pop { left: auto; right: -8px; }
/* On a phone the help text spans the width of the row that holds its icon, right under it. It is anchored to
that row (not fixed to the screen: a fixed box with an automatic position stays where it was laid out
when the page scrolls). */
@media (max-width: 560px) {
.info { position: static; }
.fin-card__head, .fin-group__head, .fin-row__name { position: relative; }
.info__pop, .fin-card__head .info__pop { left: 0; right: 0; width: auto; }
}
/* ---------------------------------------------------------- financial figures: groups, cards, edit form */
.fin-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-100); color: var(--navy-900); display: grid; place-items: center;
font-weight: 700; font-size: 1.05rem; flex: none; }
.fin-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; flex: none; }
.fin-icon svg { width: 18px; height: 18px; }
.fin-icon--sm { width: 26px; height: 26px; border-radius: 7px; }
.fin-icon--sm svg { width: 15px; height: 15px; }
.fin-group { margin-bottom: 22px; }
.fin-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fin-group__head h3 { font-size: 1rem; margin: 0; font-weight: 600; color: var(--navy-900); }
.fin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.fin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fin-card__head { display: flex; align-items: center; gap: 8px; }
.fin-card__label { font-weight: 600; color: var(--navy-900); font-size: 0.92rem; }
.fin-card__head .info { margin-left: auto; }
.fin-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fin-values--single { grid-template-columns: 1fr; }
.fin-cap { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-600); font-weight: 600; }
.fin-num { font-size: 1.45rem; font-weight: 700; color: var(--navy-900); line-height: 1.2; overflow-wrap: anywhere; }
/* The target used to be a line of small print; it now has almost the weight of the actual. */
.fin-num--target { font-size: 1.3rem; color: var(--grey-800); }
.fin-foot { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--grey-800); }
.fin-foot--muted { color: var(--grey-600); }
.fin-group--form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.fin-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; align-items: end; padding: 12px 0; border-top: 1px solid var(--border); }
.fin-rows > .fin-row:first-child { border-top: 0; }
.fin-row--single { grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); }
.fin-row__name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy-900); min-height: 42px; }
.fin-in label { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600); font-weight: 600; margin-bottom: 4px; }
.fin-in__box { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.fin-in__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.fin-in__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 12px; font: inherit; color: var(--navy-900); min-height: 42px; }
.fin-in__unit { padding: 0 12px; color: var(--grey-600); font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
.fin-form__actions { display: flex; gap: 10px; position: sticky; bottom: 0; background: var(--canvas); padding: 12px 0; border-top: 1px solid var(--border); }
.fin-in, .fin-row__name { min-width: 0; }
.fin-in__box input { width: 100%; }
@media (max-width: 640px) {
.fin-row, .fin-row--single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fin-row__name { grid-column: 1 / -1; min-height: 0; }
.fin-row--single .fin-in { grid-column: 1 / -1; }
}
/* ---------------------------------------------------------- needs-attention strip, freshness, trends */
.attention { margin-bottom: 16px; }
.attention h2 { margin-bottom: 10px; }
.attention__clear { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--success-text); font-weight: 600; }
.attention__clear svg { width: 18px; height: 18px; }
.attention__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.attention__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--navy-50); color: var(--navy-900); text-decoration: none; font-size: 0.9rem; }
.attention__item:hover { border-color: var(--accent); background: var(--surface); }
.attention__icon { color: var(--navy-700); display: grid; place-items: center; flex: none; }
.attention__icon svg { width: 18px; height: 18px; }
.attention__text { flex: 1; min-width: 0; font-weight: 600; }
.attention__go { width: 16px; height: 16px; color: var(--grey-600); flex: none; }
.freshness { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 0.8rem; color: var(--grey-600); white-space: nowrap; }
.freshness svg { width: 14px; height: 14px; }
.trend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--accent); }
.trend__spark svg { display: block; }
.trend__text { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; color: var(--grey-600); }
.trend__text svg { width: 14px; height: 14px; }
.trend--good .trend__text { color: var(--success-text); }
.trend--bad .trend__text { color: var(--danger-text); }
/* ---------------------------------------------------------- welcome card */
.welcome { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; margin-bottom: 16px; }
.welcome h2 { font-size: 1.15rem; margin: 2px 0 4px; }
.welcome__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.welcome__steps a { display: flex; align-items: center; gap: 10px; color: var(--navy-900); text-decoration: none; font-size: 0.9rem; padding: 4px 0; }
.welcome__steps a:hover { color: var(--accent); }
@media (max-width: 860px) { .welcome { grid-template-columns: 1fr; } .welcome__dismiss { justify-self: start; } }
/* ---------------------------------------------------------- version + "What's new" panel */
.pb-sidebar__foot { margin-top: auto; padding: 10px 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pb-version { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: rgba(255, 255, 255, 0.75);
font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.pb-version:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.pb-version svg { width: 14px; height: 14px; }
/* A native