/* ============================================================ Guidant Power — Component Styles Buttons · chips · cards · tables · forms · modals Shell chrome · charts · overlays · pagination ============================================================ */ /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); border: none; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1; transition: background 0.15s, filter 0.15s, border-color 0.15s; white-space: nowrap; text-decoration: none; } .btn-primary { background: var(--guidant-navy); color: white; } .btn-primary:hover { background: var(--guidant-navy-dark); text-decoration: none; } .btn-yellow { background: var(--guidant-yellow); color: var(--guidant-navy); font-weight: 700; } .btn-yellow:hover { filter: brightness(0.94); text-decoration: none; } .btn-secondary { background: white; color: var(--guidant-navy); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--guidant-navy); text-decoration: none; } .btn-tertiary { background: transparent; color: var(--guidant-navy); padding-left: 0; padding-right: 0; } .btn-destructive { background: var(--color-open); color: white; } .btn-sm { padding: 5px 10px; font-size: 12px; } /* A button that is ONLY an icon — the remediation action on the worklist (2026-08-09). Square, so a column of them is a column rather than a ragged edge, and the icon is centred rather than sitting where a text baseline would put it. The accessible name lives in aria-label; nothing here renders a word. */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; } .btn-lg { padding: 12px 24px; font-size: 16px; } .btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ---- Status & severity chips ---- */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; white-space: nowrap; } /* An upload preview's Action chips. Three looks over seven verbs, because what a reviewer scanning a hundred rows needs from the colour is only "does this row add, change nothing, or take something away" — the word says which of the seven it is. Tinted like every other chip in the product rather than solid: a preview table is not louder than the pages around it. */ .chip-act-write { background: var(--wash-blue); color: var(--color-new); } .chip-act-none { background: var(--wash-grey); color: var(--ink-slate); } .chip-act-remove { background: var(--wash-red); color: var(--danger); } /* A retired site, in the Compliance column of Update Sites. Grey and quiet on purpose: it is not a compliance state and not work to do, it is the row saying it has left the programme. Same values as .chip-act-none rather than that class itself — the action chips belong to a preview table, and sharing a name would tie a permanent row state to a vocabulary of upload verbs. */ .chip-retired { background: var(--wash-grey); color: var(--ink-slate); } .chip-new { background: var(--wash-blue); color: var(--color-new); } .chip-open { background: var(--wash-red); color: var(--color-open); } .chip-in-progress { background: var(--wash-amber); color: var(--ink-amber); } .chip-complete { background: var(--wash-green); color: var(--color-complete); } .chip-deferred { background: var(--wash-slate); color: var(--color-deferred); } .chip-declined { background: var(--wash-grey); color: var(--color-declined); } /* Severity chips are keyed on the LEVEL, not on a name (view.SeverityClass). Renaming level 4 from "Serious" to whatever a product line calls it does not touch this file, and a line with its own vocabulary still gets the colour its position on the ladder earns. */ .chip-sev-5 { background: var(--wash-red); color: var(--color-sev-5); } .chip-sev-4 { background: var(--wash-orange); color: var(--color-sev-4); } .chip-sev-3 { background: var(--wash-amber); color: var(--color-sev-3); } .chip-sev-2 { background: var(--wash-green); color: var(--color-sev-2); } .chip-sev-1 { background: var(--wash-grey); color: var(--color-sev-1); } /* A count that is neither good nor bad — the ingest preview's "N unchanged". It borrowed the old .chip-na severity class until 2026-08-04, which meant a styling decision about severity silently restyled a number that has nothing to do with severity. */ .chip-neutral { background: var(--wash-grey); color: var(--ink-slate); } /* A retracted recommendation. Deliberately muted rather than alarming: the customer only sees this on work they already did, and the badge is a note about provenance, not a warning. */ .chip-withdrawn { background: var(--wash-grey); color: var(--color-declined); text-decoration: line-through; } .chip-current { background: var(--wash-mist); color: var(--ink-steel); } .chip-coming-due { background: var(--wash-amber); color: var(--ink-amber); } .chip-scheduled { background: var(--wash-green); color: var(--color-scheduled); } .chip-past-due { background: var(--wash-red); color: var(--color-past-due); } .chip-delinquent { background: var(--wash-crimson); color: var(--color-delinquent); } /* ---- Cards ---- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 14px; font-weight: 700; } .card-body { padding: 16px; } /* ---- KPI tiles ---- */ .kpi-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: box-shadow 0.15s; text-decoration: none; display: block; } .kpi-tile:hover { box-shadow: var(--shadow-md); text-decoration: none; } .kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .kpi-value { font-size: 28px; font-weight: 700; color: var(--guidant-navy); line-height: 1; } .kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } /* ---- Data tables ---- */ .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--surface-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } /* The ↕ glyph is dimmed until a column is the active sort. */ .data-table th.sortable { cursor: default; } .data-table th.sortable .sort-ind { opacity: 0.45; } /* The affordance is JS-owned on TIER A ONLY, and the gate is `data-list` — the marker list.js selects on. list.js sets data-sort-ready once it has bound its handlers, and only then does a header look clickable, so a click cannot land before anything is listening. This used to key off `.sortable` alone, which hid the glyph on the Tier B lists too: their headers are server-answered links, nothing ever sets data-sort-ready on those tables, and so /reports, /remediations and /equipment rendered a sort indicator that CSS never revealed (fixed 2026-08-07). The columns sorted correctly the whole time — the only thing missing was the mark that says they can, which is exactly the disparity this pass was opened against. */ .data-table[data-list] th.sortable .sort-ind { display: none; } .data-table[data-sort-ready] th.sortable { cursor: pointer; user-select: none; } .data-table[data-sort-ready] th.sortable:hover { color: var(--guidant-navy); } .data-table[data-sort-ready] th.sortable .sort-ind { display: inline; } .data-table th.sortable[aria-sort="ascending"] .sort-ind, .data-table th.sortable[aria-sort="descending"] .sort-ind { opacity: 1; color: var(--guidant-navy); } .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--surface); } .data-table tbody tr.row-link { cursor: pointer; } .data-table tbody tr.row-link:hover td a { text-decoration: underline; } /* A row that is deliberately inert: the Sites page's retired archive. Muted because the rows are * history rather than work, and given the DEFAULT cursor explicitly — the table beside it is * clickable, so a row that looked the same and did nothing would read as broken rather than as * closed. There is no :hover rule and nothing to underline: these rows carry no link at all, which * is what actually makes them unclickable (rows.js follows a row's first link). */ .data-table tbody tr.row-retired td { color: var(--text-secondary); opacity: 0.65; cursor: default; } /* ---- Forms ---- */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; color: var(--text-primary); background: white; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--guidant-navy); box-shadow: 0 0 0 3px rgba(27, 50, 94, 0.1); } .form-textarea { min-height: 80px; resize: vertical; } .form-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-required { color: var(--color-open); } /* ---- Notices above a form ---- What an upload page says after a POST: the applied summary, and the refusals that stop one. The four call sites (rosters, correlation ids) had been writing `.alert alert-success` and `.alert alert-danger` since those pages were built, and NEITHER CLASS EXISTED here — so an applied upload printed its summary as an unstyled line above the form and read as a page that had simply reloaded. That is what "no feedback on success" was. Deliberately quiet: an outline and a tinted ground, not a filled banner, because these sit above a form the operator is still working in. */ .alert { padding: 10px 14px; border: 1px solid; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; } .alert-success { border-color: var(--color-complete); background: var(--wash-green); color: var(--ink-green); } .alert-danger { border-color: var(--danger); background: var(--wash-red); color: var(--ink-red); } /* ---- The filter row ---- ONE row of dropdowns above a list, on every page that has filters (internal/layout/filters.templ, 2026-08-07). It replaced the stacked .filter-bar chip rows, which cost a third of the viewport on the pages with three axes and gave each of them an "All" chip that did not say what it cleared. A Tier B page's row is a
and a Tier A page's is a
; they are styled by the same rule because a reader must not be able to tell the tiers apart (routing-and-pages.md §The shared contract). It wraps, so a narrow viewport gets two short rows rather than a horizontal scroll. */ .filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } /* Sized to their content, not to the row: a dropdown stretched across the width of the page is a control that looks like it is missing something. The max stops the longest site name from pushing the rest of the axes onto a second line by itself. */ .filter-row .form-select, .filter-row .form-input { width: auto; max-width: 260px; padding: 5px 10px; font-size: 12px; } .filter-row .filter-text { min-width: 200px; } /* A date is eight characters and a picker glyph. Both ends of a range get the same width so the row reads as one control, and neither grows: the × sits inside the field, which is what replaced the Apply and Clear buttons that used to follow it. */ .date-field { position: relative; display: inline-flex; align-items: center; } .filter-row .date-input { width: 11rem; padding-right: 26px; } .field-clear { position: absolute; right: 4px; border: none; background: none; cursor: pointer; padding: 0 4px; line-height: 1; font-size: 15px; color: var(--text-secondary); } .field-clear:hover { color: var(--danger); } /* ---- Filter chips bar ---- NO LIST FILTERS WITH CHIPS ANY MORE (2026-08-07) — every axis is a dropdown in a .filter-row, and the dashboard's service-line chips went the same way. .filter-bar survives as a plain row of controls (the internal job workbench uses it); .filter-chip is currently rendered by nothing. Kept because a chip row is still the right control for a small fixed vocabulary and the next one should not be reinvented from scratch — but if it is still unused at the next sweep, delete it. */ .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; } /* A small form inside a card header — the dashboard panels' site picker. It borrows the compact scale a filter control has rather than the full-width one .form-select carries on a real form. */ .filter-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .filter-form .form-select { width: auto; max-width: 260px; padding: 5px 10px; font-size: 12px; } .filter-form-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; } .filter-chip { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: white; cursor: pointer; color: var(--text-secondary); transition: all 0.15s; white-space: nowrap; } .filter-chip:hover { border-color: var(--guidant-navy); color: var(--guidant-navy); } .filter-chip.active { background: var(--guidant-navy); color: white; border-color: var(--guidant-navy); } /* ---- Modals ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal { background: white; border-radius: var(--radius-lg); width: 520px; max-width: 100%; box-shadow: var(--shadow-lg); max-height: 92vh; display: flex; flex-direction: column; } .modal-sm { width: 420px; } .modal-lg { width: 680px; } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; } .modal-title { font-size: 16px; font-weight: 700; color: var(--guidant-navy); } .modal-close { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--text-secondary); line-height: 1; padding: 2px; flex-shrink: 0; margin-left: 12px; } .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; } /* One outcome in the remediation modal: a radio, its name, and the sentence saying what it does. The whole box is the label, so the sentence is part of the target rather than text beside it. A TWO-COLUMN GRID (2026-08-09), where it was a plain block. Two things were wrong with that. The sentence started at the box's left edge, under the radio rather than under the word it explains, so a column of options read as a ragged left margin. And the radio sat on the first text line, which put it against the name rather than against the option — noticeably off-centre on the options whose sentence wraps to two lines. The radio spans both rows and centres itself across them; the name and the sentence share the second column, so they start at the same x whatever the sentence's length. */ .outcome-option { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; cursor: pointer; } .outcome-option > input[type="radio"] { grid-row: 1 / span 2; align-self: center; margin: 0; } .outcome-option:hover { border-color: var(--guidant-navy); } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; } /* ---- Pagination ---- */ .pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); } .pagination-btns { display: flex; gap: 4px; } .page-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: white; cursor: pointer; font-size: 12px; transition: all 0.15s; } .page-btn:hover { border-color: var(--guidant-navy); color: var(--guidant-navy); } .page-btn.active { background: var(--guidant-navy); color: white; border-color: var(--guidant-navy); } /* Pager controls are anchors, so they must not look like body links. */ a.page-btn { text-decoration: none; color: var(--text-primary); } a.page-btn.active { color: white; } /* Prev/Next at the ends of the range render as spans rather than vanishing, so the control keeps its shape as the reader moves through the pages. */ .page-btn.disabled { opacity: 0.45; cursor: default; } .page-btn.disabled:hover { border-color: var(--border); color: var(--text-primary); } /* ---- Dashboard charts ------------------------------------------------------------------------- * * Every chart on the dashboard is divs with percentage heights, sized in Go * (feature/portfolio/view.go §Geometry). There is no charting library and no client-side drawing * code, so what is on screen is what the query returned. ONE shape is left after the 2026-08-21 * redesign — the trend chart's row of vertical stacked columns — where there were three. */ /* One legend per chart, above it. The trend chart's severity ramp and the mini-map's compliance colours are both keyed with this. */ .chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 11px; } .chart-legend-item { display: flex; align-items: center; gap: 5px; } /* THE TWO STACKED-BAR PANELS WENT ON 2026-08-21 (decision 29), and their CSS with them: the Scheduling Status bars, the Open Remediations by Age bars, the cadence timeline strip under each scheduling bar, and the container queries that hid a count too wide for its own slice. The dashboard draws no horizontal bars at all now — the scheduling reading is the mini-map's dot colours and the aging one is gone — so `.chart-rows`, `.chart-row*`, `.stack-*` and `.cadence-*` had no markup left. The legend above stays: the trend chart and the mini-map both key themselves with it. */ /* ---- The weekly trend chart -------------------------------------------------------------------- * * A counted y-axis beside a plot area that holds three layers: gridlines behind, columns, and a row * of tilted labels below. The axis, the gridlines and the column heights all divide by the same * SCALE — the top tick, not the tallest week — so a column's top and the label it lines up with * cannot drift apart. */ .trend-plot { display: flex; align-items: flex-start; gap: 6px; } .trend-yaxis { position: relative; width: 26px; height: 160px; flex-shrink: 0; } .trend-tick { position: absolute; right: 0; transform: translateY(50%); font-size: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .trend-area { position: relative; flex: 1; min-width: 0; } .trend-grid { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; } .trend-gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); opacity: 0.6; } .trend-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 160px; } .trend-column { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; } /* column-reverse is what puts the FIRST segment at the bottom, and the segments arrive worst-first (portfolio/view.go §trendBars). Reversing this quietly stands the ladder on its head. */ .trend-stack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; } .trend-column:hover .trend-stack { filter: brightness(1.08); } /* One label per week, tilted. The row mirrors .trend-chart's flex layout exactly — same gap, same flex basis — so label n sits under column n; changing one without the other shears the axis. Each label is absolutely positioned inside its own cell so its length cannot widen the cell and push every later column out of alignment. */ .trend-labels { display: flex; gap: 2px; height: 42px; margin-top: 4px; } .trend-label { flex: 1; min-width: 0; position: relative; } .trend-label > span { position: absolute; top: 0; right: 50%; transform: rotate(-60deg); transform-origin: top right; font-size: 9px; line-height: 1; white-space: nowrap; color: var(--text-secondary); } /* The standing figure at the right-hand end (portfolio/view.go §nowBar). It is a different KIND of number from the 52 weeks — what is open at this instant, not at the start of a week — so it gets a rule down its left edge and a little air, while keeping the same width, scale and colours as the columns it is read against. The class lands on the column AND on its label, and both get the same margin: the two rows mirror each other's flex layout, and shifting one alone shears the axis. */ .trend-column.trend-now, .trend-label.trend-now { margin-left: 10px; border-left: 1px dashed var(--border); padding-left: 10px; } /* Its label is the only one worth reading at a glance, so it sits upright and dark where the dates are tilted and grey. Same origin as the rotated ones, minus the rotation. */ .trend-label.trend-now > span { transform: none; right: auto; left: 10px; font-size: 10px; font-weight: 600; color: var(--text-primary); } /* ---- The dashboard's layout (2026-08-21, decision 29) ------------------------------------------ * * ONE grid holds all six cards; the spans make the three rows. The mini-map takes two columns * because the map is the card's whole content and wants the width, and the trend chart takes three * because it draws fifty-two columns and cannot be read at a third of the page. * * A single grid rather than three — the middle row's three cards line up with the two above them * only if one container is measuring all of them. `align-items: stretch` is the default and is what * makes cards in a row the same height whatever their contents; the scrolling card is what keeps the * longest of them from setting that height. */ .dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; /* HOW TALL THE MINI-MAP IS, and therefore how tall the top row is. Two other rules derive from it: the map's own max-width (its ratio applied to this) and the scrolling card's ceiling beside it. They are one number because the two cards share a grid row — change this and both follow. */ --dash-map-h: 420px; } .dash-map-card { grid-column: span 2; } .dash-wide { grid-column: 1 / -1; } /* The breakpoints live HERE rather than with the other grids in base.css, and that is not a filing choice: components.css loads after base.css, so an unconditional .dash-grid here beats a media query there and the page stayed three columns however narrow the window got. Two columns before one: the mini-map spanning both is still a map worth reading, where a one-column map is a strip. The spans are reset in the same breakpoint that changes the column count, or a card asks for three columns out of two and the grid grows an implicit one. */ @media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .dash-map-card { grid-column: span 2; } } @media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } .dash-map-card, .dash-wide { grid-column: auto; } } /* Every card leads with its count. Tabular figures because six of them sit in a grid and proportional digits make the row ragged. */ .dash-count { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* The count and the title are ONE element, because .card-header is a flex row that spreads its children to put a control at the far end — handed the pair loose, it parks them at opposite ends of the card. On the two cards whose heading navigates, the anchor wraps that element. */ .dash-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; } /* A card's name does not break. Four of the six are two words, and "Open Remediations" wrapped at its space the moment the grid dropped to two columns — a heading on two lines beside a count on one reads as two headings, and it changed the card's own height against its neighbours. */ .dash-head .card-title { white-space: nowrap; } .dash-head-link { color: inherit; text-decoration: none; min-width: 0; } .dash-head-link:hover { text-decoration: underline; } /* The whole mini-map card navigates (rows.js), so the pointer says so over all of it. */ .card.row-link { cursor: pointer; } .card.row-link:hover .dash-head-link { text-decoration: underline; } /* ---- The mini-map ------------------------------------------------------------------------------ * * The static US map at card size, with a dot per facility. The projection is the full map's * (sites/map.go §projectLatLong), so a facility sits in the same place on both. The dots are not * links and take no pointer events: the card itself is the link, and a dot swallowing the click * would make the card's destination depend on where in it a reader happened to press. */ /* AS BIG AS THE ROW ALLOWS, up to a ceiling. The card is two columns wide so the map has width to spend, but the SVG is 1.38:1 — unbounded, two columns of a wide screen make it tall enough to push the whole middle row below the fold, and a dashboard showing one card is not one. The box keeps the SVG's own ratio, so the image fills it exactly and the dots' percentages stay true; the ceiling is expressed as a max-width derived from that ratio, because capping the HEIGHT of a box with a fixed width would squash the picture instead of shrinking it. */ .dash-map { position: relative; width: 100%; aspect-ratio: 1028 / 746; /* The ceiling is expressed as a max-WIDTH derived from the SVG's ratio, because capping the height of a box with a fixed width would squash the picture instead of shrinking it. */ max-width: calc(var(--dash-map-h) * 1028 / 746); margin: 0 auto; } .dash-map-img { display: block; width: 100%; height: 100%; } .dash-dot { position: absolute; /* The dot is sized to be READ at card scale; the border stays 1.5px whatever the dot does, since it is a separator between overlapping dots rather than part of the mark, and thickening it with the dot would close the gaps a cluster needs. The margins are half the size, centring the dot on its facility's point. */ width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; border: 1.5px solid var(--card); box-shadow: 0 1px 2px rgba(14,25,47,0.25); pointer-events: none; } .dash-map-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; } /* ---- The severity list ------------------------------------------------------------------------- * * One row per level: the level's chip, and its count hard against the right-hand edge so the five * figures form a column the eye can add up. */ /* `dash-fill` lets a card's body take the card's full height, for the ONE card whose contents can use it: the scrolling list beside the map. Everything else is top-aligned, because a list of five and a list of two must start in the same place. */ .dash-fill { display: flex; flex-direction: column; } .dash-fill > .card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } .dash-levels { display: flex; flex-direction: column; } .dash-level { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; } .dash-level:last-child { border-bottom: none; } a.dash-level:hover { background: var(--surface); text-decoration: none; } .dash-level-n { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* ---- The three record lists -------------------------------------------------------------------- * * A row is an anchor, not a div wrapped in one: it is a single destination, so it should be * focusable and openable in a new tab without rows.js involved at all. * * The name takes the free space and truncates; the date and the service line are fixed-width facts * that must not be the thing that wraps. */ .dash-list { display: flex; flex-direction: column; } .dash-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 12px; color: inherit; text-decoration: none; } .dash-row:last-child { border-bottom: none; } .dash-row:hover { background: var(--surface); text-decoration: none; } .dash-row-date { flex-shrink: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .dash-row-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-row-line { flex-shrink: 0; color: var(--text-secondary); } .dash-row-span { flex-shrink: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* THE SCROLLING LIST — the Upcoming Inspections card only (page.templ §upcomingCard). How many rows show is the LAYOUT's answer rather than a row count of its own, which is what earned this card the place beside the map. `flex: 1` fills the card when the map is the taller of the two, and `min-height: 0` is what lets it shrink at all — a flex item's default `min-height: auto` refuses to go below its content. IT STILL NEEDS A CEILING, and that is the part that is easy to get wrong: a grid row is as tall as its tallest item, so with no cap a long list stretches the row and the MAP grows to match it. The cap is the map's own height plus its legend (10px margin + ~13px of text), which lands this card's height exactly on the map card's — flush, and never the one deciding the row. BELOW THE THREE-COLUMN BREAKPOINT the map takes a row of its own and this card sits beside a five-row one instead, so the cap falls back to six rows — what a five-row card plus its "see N more" line stands at — PLUS A SLIVER of the seventh, because macOS hides its scrollbars until something scrolls and a box cut exactly at a row boundary looks like a list that ends there. A row is ~30px at the card's font size. */ .dash-scroll { flex: 1; min-height: 0; max-height: 192px; overflow-y: auto; } @media (min-width: 1101px) { .dash-scroll { max-height: calc(var(--dash-map-h) + 24px); } } /* The last line of a capped card. Set apart from the rows above it: it is not a record. */ .dash-more { display: block; padding: 8px 4px 0; font-size: 12px; font-weight: 600; } /* ---- Combobox (web/static/js/combobox.js) ------------------------------------------------------ * * A text input over a scrollable listbox: the same job a