/* ============================================================ PBC COMPONENTS — the approved visual vocabulary ------------------------------------------------------------ Phase 2 of the UI redesign. Consumes pbc-tokens.css ONLY. Load order: pbc-tokens.css MUST come first. NAMESPACE Every class is prefixed `pbc-`. The app runs on Bootstrap; never style a bare .btn/.card/.table/.badge — that would reach into Bootstrap and break existing screens. RTL Written with logical properties (inline-start/end, padding- inline, margin-inline) so the same rules mirror correctly under for Arabic. No separate RTL sheet. RULES - No hardcoded colour, spacing, radius, or type size. Tokens only. - Every interactive element needs a :focus-visible ring. - Colour never carries meaning alone — always pair it with text or an icon (colour-blind + print safe). ============================================================ */ /* ========================================================== BASE ========================================================== */ .pbc-scope{ font-family:var(--pbc-font-body); font-size:var(--pbc-text-md); line-height:var(--pbc-leading-normal); color:var(--pbc-ink-body); -webkit-font-smoothing:antialiased; } .pbc-h1,.pbc-h2,.pbc-h3{ font-family:var(--pbc-font-heading); font-weight:var(--pbc-weight-heading); color:var(--pbc-ink-heading); letter-spacing:var(--pbc-tracking-tight); line-height:var(--pbc-leading-tight); margin:0; } .pbc-h1{font-size:var(--pbc-text-2xl)} .pbc-h2{font-size:var(--pbc-text-xl)} .pbc-h3{font-size:var(--pbc-text-lg);font-weight:var(--pbc-weight-semibold)} .pbc-muted{color:var(--pbc-ink-muted)} .pbc-faint{color:var(--pbc-ink-faint)} .pbc-label-caps{ font-size:var(--pbc-text-xs); font-weight:var(--pbc-weight-bold); letter-spacing:var(--pbc-tracking-caps); text-transform:uppercase; color:var(--pbc-ink-muted); } /* ========================================================== BUTTONS ========================================================== */ .pbc-btn{ display:inline-flex;align-items:center;justify-content:center; gap:var(--pbc-space-2); height:var(--pbc-control-h); padding-inline:var(--pbc-space-5); border:var(--pbc-border-width) solid transparent; border-radius:var(--pbc-radius-btn); font-family:inherit; font-size:var(--pbc-text-base); font-weight:var(--pbc-weight-semibold); line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none; transition:background-color var(--pbc-transition), border-color var(--pbc-transition), color var(--pbc-transition); } .pbc-btn:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} .pbc-btn[disabled],.pbc-btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none} .pbc-btn--primary{background:var(--pbc-brand-600);color:var(--pbc-ink-on-brand);box-shadow:var(--pbc-shadow-sm)} .pbc-btn--primary:hover{background:var(--pbc-brand-700);color:var(--pbc-ink-on-brand)} .pbc-btn--secondary{background:var(--pbc-surface);color:var(--pbc-ink-body);border-color:var(--pbc-border)} .pbc-btn--secondary:hover{border-color:var(--pbc-border-strong);background:var(--pbc-surface-hover);color:var(--pbc-ink-body)} .pbc-btn--ghost{background:transparent;color:var(--pbc-ink-muted)} .pbc-btn--ghost:hover{background:var(--pbc-surface-hover);color:var(--pbc-brand-accent)} /* fill is danger-600, NOT 500: white on the bright 500 is 3.97:1, below AA. */ /* §K K-4.22 (§14.290, owner-approved 2026-08-07) — the fill is the PINNED call-decline pair, not the theme-flipping danger ramp. In light they are the SAME hexes (#B01818 / #8A1212), so nothing the owner approved moves; in dark, --pbc-danger-600 flips to #F2A3A3 — an INK colour — which is what painted every dark Delete/Not-approve button as a pale pink slab (§14.267 carry-over, now closed). White stays 7.02:1 on the fill. */ .pbc-btn--danger{background:var(--pbc-call-decline);color:var(--pbc-ink-on-brand)} .pbc-btn--danger:hover{background:var(--pbc-call-decline-hover);color:var(--pbc-ink-on-brand)} /* LOW-EMPHASIS DESTRUCTIVE (§K K-4.12). The system had only a FILLED danger button, which is too loud for a per-row "remove" that already sits behind a confirm — a field builder with six sections would have shown six red slabs. This keeps the red as a signal without shouting. ⚠ NEVER give this the matte finish: it has no fill, so the overlay's dark bottom stop would just print grey (see the --pbc-btn-matte note). `--pbc-danger-600` is an INK token that flips per theme (#B01818 light, #F2A3A3 dark) — correct here because this is text, not a fill. Measured 7.02:1 light / 7.42:1 dark on the surface, and 5.78 / 5.38 on the hover. */ .pbc-btn--danger-quiet{background:transparent;color:var(--pbc-danger-600)} .pbc-btn--danger-quiet:hover{background:var(--pbc-surface-hover);color:var(--pbc-danger-600)} /* ★ --send: the chat composer's send button. A THIRD filled variant rather than a colour applied by hand inside pbc-chat.css, so it inherits the global matte finish and geometry like every other button (owner, 2026-07-29: "buttons are decided — matte, and it's already applied globally — so don't style chat's buttons by hand"). The colour is the owner's decision to keep chat's original brighter blue for the things the USER sends. White on it is 5.58:1; the hover step is darker (7.13:1), never lighter — going lighter is what breaks white labels. */ .pbc-btn--send{background:var(--pbc-chat-mine);color:var(--pbc-ink-on-brand)} .pbc-btn--send:hover{background:var(--pbc-chat-mine-hover);color:var(--pbc-ink-on-brand)} /* ── MATTE FINISH (owner decision 2026-07-29) ───────────────────────────── See the `--pbc-btn-matte` block in pbc-tokens.css for what this is and how to retire it. Applied here ONLY to the two FILLED variants. --secondary, --ghost and --inverse are excluded on purpose: they are white or transparent, so the overlay's dark bottom stop would print grey shading onto a light button instead of shaping a colour. --inverse especially — it exists to stay bright against the login gradient (see its own note below). Uses `background-image`, never the `background` shorthand, so each variant keeps its own background-color and its own :hover colour change. */ .pbc-btn--primary, .pbc-btn--danger, .pbc-btn--send{ background-image:var(--pbc-btn-matte); box-shadow:var(--pbc-btn-matte-lip),var(--pbc-shadow-sm); } /* ⚠ The :hover rules above use the `background` SHORTHAND, and the shorthand resets background-image to `none`. Without this the finish would flicker off the moment the pointer touched the button. Re-asserted rather than rewriting those hovers to background-color, so nothing existing changes behaviour. */ .pbc-btn--primary:hover, .pbc-btn--danger:hover, .pbc-btn--send:hover{ background-image:var(--pbc-btn-matte); } .pbc-btn--sm{height:var(--pbc-control-h-sm);padding-inline:var(--pbc-space-3);font-size:var(--pbc-text-sm)} .pbc-btn--lg{height:var(--pbc-control-h-lg);padding-inline:var(--pbc-space-6);font-size:var(--pbc-text-lg)} .pbc-btn--icon{width:var(--pbc-control-h);padding-inline:0;flex:none} .pbc-btn--icon.pbc-btn--sm{width:var(--pbc-control-h-sm)} .pbc-btn--block{width:100%} /* loading state — spinner replaces nothing, sits before the label */ .pbc-btn.is-loading{pointer-events:none;opacity:.75} .pbc-btn.is-loading::before{ content:'';width:14px;height:14px;flex:none; border:2px solid currentColor;border-top-color:transparent; border-radius:var(--pbc-radius-pill); animation:pbc-spin var(--pbc-duration-slow) linear infinite; } @keyframes pbc-spin{to{transform:rotate(360deg)}} /* ========================================================== FORM CONTROLS ========================================================== */ .pbc-field{display:flex;flex-direction:column;gap:var(--pbc-space-1-5)} .pbc-field__label{ font-size:var(--pbc-text-sm); font-weight:var(--pbc-weight-semibold); color:var(--pbc-ink-heading); } /* small red text -> the deep red; the bright 500 is 3.97:1, below AA. */ .pbc-field__label .pbc-req{color:var(--pbc-danger-600);margin-inline-start:var(--pbc-space-0-5)} .pbc-field__hint{font-size:var(--pbc-text-sm);color:var(--pbc-ink-muted)} .pbc-field__error{ font-size:var(--pbc-text-sm);color:var(--pbc-danger-600); display:flex;align-items:center;gap:var(--pbc-space-1-5); } .pbc-input,.pbc-select,.pbc-textarea{ width:100%; padding-block:0; padding-inline:var(--pbc-space-3); height:var(--pbc-control-h); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-btn); background:var(--pbc-surface); color:var(--pbc-ink-body); font-family:inherit; font-size:var(--pbc-text-base); transition:border-color var(--pbc-transition),box-shadow var(--pbc-transition); } .pbc-textarea{height:auto;min-height:96px;padding-block:var(--pbc-space-2-5);resize:vertical;line-height:var(--pbc-leading-normal)} .pbc-input::placeholder,.pbc-textarea::placeholder{color:var(--pbc-ink-faint)} .pbc-input:hover,.pbc-select:hover,.pbc-textarea:hover{border-color:var(--pbc-border-strong)} .pbc-input:focus,.pbc-select:focus,.pbc-textarea:focus{ outline:none;border-color:var(--pbc-brand-accent);box-shadow:var(--pbc-focus-ring); } .pbc-input[disabled],.pbc-select[disabled],.pbc-textarea[disabled]{ background:var(--pbc-surface-soft);color:var(--pbc-ink-disabled);cursor:not-allowed; } .pbc-input.is-invalid,.pbc-select.is-invalid,.pbc-textarea.is-invalid{border-color:var(--pbc-danger-500)} .pbc-input.is-invalid:focus{box-shadow:0 0 0 var(--pbc-focus-ring-width) var(--pbc-danger-100)} /* select needs its own caret, mirrored for RTL */ .pbc-select{ appearance:none; padding-inline-end:var(--pbc-space-8); background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-size:5px 5px,5px 5px; background-repeat:no-repeat; background-position:right var(--pbc-space-4) center, right calc(var(--pbc-space-4) - 5px) center; color:var(--pbc-ink-body); } [dir="rtl"] .pbc-select{ background-position:left calc(var(--pbc-space-4) - 5px) center, left var(--pbc-space-4) center; } /* search input with leading icon */ .pbc-search{position:relative;display:flex;align-items:center} .pbc-search .pbc-input{padding-inline-start:var(--pbc-space-10)} .pbc-search__icon{ position:absolute;inset-inline-start:var(--pbc-space-3); color:var(--pbc-ink-faint);pointer-events:none;display:flex; } /* checkbox / radio. Styled for BOTH the labelled .pbc-check wrapper and bare checkboxes inside a permission matrix cell — the matrix has no room for labels, and unstyled native boxes there looked broken next to styled ones. */ /* §K K-4.14 — .pbc-table--ticks is the THIRD consumer of this same look: a table whose cells hold a bare checkbox or radio under a column heading, with no room for a per-control label (the status editors' Default / Terminal / Cancellation columns). It is added to the selector lists below rather than given its own declarations, so there is still exactly ONE definition of what a tick looks like. ★ Ticks here are deliberately LARGER (owner, 2026-08-03) — set as a scoped custom property so the shared width/height below need no variant. ★ A RADIO in this context stays SQUARE and wears the same checkmark as its neighbours (owner: "they should all be the same, not the circle"). That is automatic: the round-radio overrides are scoped to .pbc-check, which this is not — so do NOT add .pbc-table--ticks to those two rules. The input stays a real radio, which is what keeps "exactly one default" working. */ .pbc-table--ticks{--pbc-tick:22px} .pbc-table--ticks td input[type="checkbox"], .pbc-table--ticks td input[type="radio"]{cursor:pointer} .pbc-table--ticks td input::after{width:12px;height:12px} .pbc-check{display:inline-flex;align-items:center;gap:var(--pbc-space-2-5);cursor:pointer;font-size:var(--pbc-text-base)} .pbc-check input, .pbc-matrix td input[type="checkbox"], .pbc-table--ticks td input[type="checkbox"], .pbc-table--ticks td input[type="radio"]{ appearance:none;margin:0;flex:none; width:var(--pbc-tick);height:var(--pbc-tick); border:1.5px solid var(--pbc-border-strong); background:var(--pbc-surface); border-radius:var(--pbc-radius-xs); cursor:pointer; display:grid;place-content:center; transition:background-color var(--pbc-transition),border-color var(--pbc-transition); } .pbc-check input[type="radio"]{border-radius:var(--pbc-radius-pill)} .pbc-check input::after, .pbc-matrix td input[type="checkbox"]::after, .pbc-table--ticks td input::after{ content:'';width:11px;height:11px;transform:scale(0); transition:transform var(--pbc-duration-instant) var(--pbc-ease-out); background:var(--pbc-ink-on-brand); clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%); } .pbc-check input[type="radio"]::after{ clip-path:none;border-radius:var(--pbc-radius-pill);width:8px;height:8px; } .pbc-check input:checked, .pbc-matrix td input[type="checkbox"]:checked, .pbc-table--ticks td input:checked{background:var(--pbc-brand-600);border-color:var(--pbc-brand-600)} .pbc-check input:checked::after, .pbc-matrix td input[type="checkbox"]:checked::after, .pbc-table--ticks td input:checked::after{transform:scale(1)} .pbc-check input:focus-visible, .pbc-matrix td input[type="checkbox"]:focus-visible, .pbc-table--ticks td input:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} .pbc-check input[disabled], .pbc-matrix td input[type="checkbox"][disabled], .pbc-table--ticks td input[disabled]{background:var(--pbc-surface-soft);border-color:var(--pbc-border);cursor:not-allowed} /* toggle switch */ .pbc-switch{display:inline-flex;align-items:center;gap:var(--pbc-space-2-5);cursor:pointer} .pbc-switch input{ appearance:none;margin:0;flex:none;position:relative; width:var(--pbc-switch-w);height:var(--pbc-switch-h); border-radius:var(--pbc-radius-pill); background:var(--pbc-neutral-500);cursor:pointer; transition:background-color var(--pbc-transition); } /* Knob moves via inset-inline-start, NOT translate: a directional translate needs a [dir="rtl"] override, which silently failed to apply and left the knob sliding the wrong way in Arabic. A logical inset mirrors on its own, with no override to forget. */ .pbc-switch input::after{ content:'';position:absolute;top:3px;inset-inline-start:3px; width:calc(var(--pbc-switch-h) - 6px);height:calc(var(--pbc-switch-h) - 6px); border-radius:var(--pbc-radius-pill); background:var(--pbc-surface);box-shadow:var(--pbc-shadow-xs); transition:inset-inline-start var(--pbc-transition); } .pbc-switch input:checked{background:var(--pbc-brand-600)} .pbc-switch input:checked::after{ inset-inline-start:calc(var(--pbc-switch-w) - var(--pbc-switch-h) + 3px); } .pbc-switch input:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} .pbc-switch input[disabled]{opacity:.5;cursor:not-allowed} .pbc-switch__text{font-size:var(--pbc-text-base);color:var(--pbc-ink-body)} /* ========================================================== PILLS / BADGES — outline style, colour + text always paired ========================================================== */ .pbc-pill{ display:inline-flex;align-items:center;gap:var(--pbc-space-1-5); border-radius:var(--pbc-radius-pill); padding-block:var(--pbc-space-1); padding-inline:var(--pbc-space-3); font-size:var(--pbc-text-sm); font-weight:var(--pbc-weight-semibold); line-height:var(--pbc-leading-snug); border:var(--pbc-border-width) solid transparent; white-space:nowrap; } .pbc-pill__dot{width:7px;height:7px;border-radius:var(--pbc-radius-pill);background:currentColor;flex:none} .pbc-pill--info {background:var(--pbc-info-100); color:var(--pbc-info-600); border-color:var(--pbc-info-border)} .pbc-pill--warning{background:var(--pbc-warning-100);color:var(--pbc-warning-600);border-color:var(--pbc-warning-border)} .pbc-pill--success{background:var(--pbc-success-100);color:var(--pbc-success-600);border-color:var(--pbc-success-border)} .pbc-pill--danger {background:var(--pbc-danger-100); color:var(--pbc-danger-600); border-color:var(--pbc-danger-border)} .pbc-pill--neutral{background:var(--pbc-neutral-100);color:var(--pbc-neutral-600);border-color:var(--pbc-neutral-border)} /* There is deliberately NO gold/accent pill. Owner chose "no warm accent" (2026-07-22): "needs attention" is the WARNING pill — a semantic state, not a decorative colour. Adding a 6th accent pill would reintroduce a colour that means nothing on its own. */ /* count badge */ .pbc-count{ display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:20px;padding-inline:var(--pbc-space-1-5); border-radius:var(--pbc-radius-pill); background:var(--pbc-neutral-100);color:var(--pbc-ink-muted); font-size:var(--pbc-text-xs);font-weight:var(--pbc-weight-bold); } .pbc-count--brand{background:var(--pbc-brand-600);color:var(--pbc-ink-on-brand)} /* fill is danger-600, NOT 500: white on the bright 500 is 3.97:1, below AA. */ .pbc-count--danger{background:var(--pbc-danger-600);color:var(--pbc-ink-on-brand)} /* ========================================================== AVATAR ========================================================== */ .pbc-avatar{ width:var(--pbc-avatar);height:var(--pbc-avatar);flex:none; border-radius:var(--pbc-radius-pill); background:linear-gradient(135deg,var(--pbc-brand-900),var(--pbc-brand-500)); color:var(--pbc-ink-on-brand); display:flex;align-items:center;justify-content:center; font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-bold); overflow:hidden; } .pbc-avatar img{width:100%;height:100%;object-fit:cover} .pbc-avatar--sm{width:var(--pbc-avatar-sm);height:var(--pbc-avatar-sm);font-size:var(--pbc-text-xs)} .pbc-avatar--lg{width:var(--pbc-avatar-lg);height:var(--pbc-avatar-lg);font-size:var(--pbc-text-base)} .pbc-avatar-stack{display:flex} .pbc-avatar-stack .pbc-avatar{border:2px solid var(--pbc-surface);margin-inline-start:-9px} .pbc-avatar-stack .pbc-avatar:first-child{margin-inline-start:0} /* ========================================================== CARD ========================================================== */ .pbc-card{ background:var(--pbc-surface); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-card); box-shadow:var(--pbc-shadow-sm); } .pbc-card__head{ display:flex;align-items:center;gap:var(--pbc-space-3); padding:var(--pbc-space-5) var(--pbc-card-pad); border-bottom:var(--pbc-border-width) solid var(--pbc-border-subtle); } .pbc-card__title{font-size:var(--pbc-text-lg);font-weight:var(--pbc-weight-semibold);color:var(--pbc-ink-heading)} .pbc-card__body{padding:var(--pbc-card-pad)} .pbc-card__foot{ display:flex;align-items:center;gap:var(--pbc-space-3); padding:var(--pbc-space-4) var(--pbc-card-pad); border-top:var(--pbc-border-width) solid var(--pbc-border-subtle); background:var(--pbc-surface-soft); border-end-start-radius:var(--pbc-radius-card); border-end-end-radius:var(--pbc-radius-card); } /* ========================================================== ⚠⚠ A FLUSH BODY MUST CLIP, OR THE CARD'S ROUNDED CORNERS ARE PAINTED OVER SQUARE. Owner-reported 2026-08-08 (§K K-4.26). ---------------------------------------------------------- `.pbc-card` is rounded (16px) but does NOT clip — deliberately, because things inside it are allowed to escape. A padded `.pbc-card__body` is safe: nothing reaches the corner. A FLUSH body is the opposite — its content sits directly on the card's edge, and everything in there paints an opaque background the full width of the box: .pbc-table thead th -> --pbc-surface-soft .pbc-table--zebra tr -> --pbc-surface / --pbc-row-stripe tbody tr:hover -> --pbc-row-hover .pbc-row / .pbc-row:hover Each of those is a SQUARE rectangle, so it covers the card's curve and the card reads as a square box with a rounded outline behind it. ★ THIS WAS ALWAYS TRUE — it only became VISIBLE when the outline went from 1.26:1 to 2.37:1 in this same slice. At the old strength there was no line to see the mismatch against. Treat a contrast change as a magnifying glass over every geometry bug the old faintness was hiding. THE FIX IS ON THE BODY, NOT THE CARD, AND NOT THE TABLE: · not `.pbc-card{overflow:hidden}` — that would clip anything a card is allowed to overflow, and an overflow context on a calendar ancestor collapses FullCalendar's month grid outright (see the standing warning in pbc-calendar.css). · not the table — `.pbc-table-wrap` owns `overflow-x:auto` for wide tables, and rounding individual corner cells would need a selector per table type, per corner, per first/last row. · the flush body clips ONE box and covers tables, datatables and `.pbc-row` lists alike. The radius is applied per EDGE, not per box: only the corners that actually touch the card's own edge are rounded, so a flush body sitting under a `.pbc-card__head` (or above a `__foot`, which rounds its own end corners already) keeps its interior corners square — which is correct there. ✅ Safe with the row-actions menu: `.pbc-rowacts__menu` is `position:fixed`, laid out against the viewport, so no ancestor's overflow can clip it — that is exactly why it was made fixed (K-4.11 add. 1). Verified: no flush body contains a sticky header or a Bootstrap dropdown. ========================================================== */ .pbc-card__body--flush{padding:0;overflow:hidden} .pbc-card > .pbc-card__body--flush:first-child{ border-start-start-radius:var(--pbc-radius-card); border-start-end-radius:var(--pbc-radius-card); } .pbc-card > .pbc-card__body--flush:last-child{ border-end-start-radius:var(--pbc-radius-card); border-end-end-radius:var(--pbc-radius-card); } .pbc-spacer{margin-inline-start:auto} /* ========================================================== PAGE HEADER + BREADCRUMB ========================================================== */ /* .pbc-crumb / .pbc-crumb__sep were deleted with the breadcrumbs themselves (§K K-4.14, owner 2026-08-02: "remove all breadcrumbs on all pages"). The markup is gone from all 81 blades, so the component had zero consumers. */ .pbc-pagehead{display:flex;align-items:flex-start;gap:var(--pbc-space-4);margin-bottom:var(--pbc-section-gap)} .pbc-pagehead__title{font-family:var(--pbc-font-heading);font-weight:var(--pbc-weight-heading);font-size:var(--pbc-text-2xl);color:var(--pbc-ink-heading);letter-spacing:var(--pbc-tracking-tight);line-height:var(--pbc-leading-tight)} .pbc-pagehead__sub{font-size:var(--pbc-text-base);color:var(--pbc-ink-muted);margin-top:var(--pbc-space-1)} /* ========================================================== LIST ROWS — the airy two-line pattern ========================================================== */ .pbc-list{display:flex;flex-direction:column} .pbc-row{ display:flex;align-items:center;gap:var(--pbc-space-3); padding-block:var(--pbc-row-pad-y); padding-inline:var(--pbc-space-4); border-bottom:var(--pbc-border-width) solid var(--pbc-border-subtle); text-decoration:none;color:inherit; transition:background-color var(--pbc-transition); } .pbc-row:last-child{border-bottom:none} .pbc-row:hover{background:var(--pbc-surface-hover)} .pbc-row.is-selected{background:var(--pbc-surface-active)} .pbc-row:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring);border-radius:var(--pbc-radius-sm)} /* ⚠⚠ THE `display:block` ON THE NEXT TWO IS LOAD-BEARING — DO NOT REMOVE IT. Both were inline, so in any consumer that renders them as (or inside a table cell) the title ran straight into its own sub-line — "Priya NairClaims" — and `margin-top` was inert because margins do nothing on an inline box. This is the FOURTH sighting of the same defect class in the component layer: `.pbc-notif__t/__m/__when` (K-4.OVERLAYS), `.pbc-step__title/__desc` (K-4.9), `.pbc-ccase__s` (K-4.24, worked around per-screen), and this one — found again while building the P-7 picker rows (§14.295). Every static check passed all four times; it is only ever caught by LOOKING. Fixed at the definition here so the fifth consumer does not have to work around it. §14.297 / K-4.29. */ .pbc-row__main{min-width:0;flex:1} .pbc-row__title{display:block;font-size:var(--pbc-text-base);font-weight:var(--pbc-weight-semibold);color:var(--pbc-ink-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pbc-row__sub{display:block;font-size:var(--pbc-text-sm);color:var(--pbc-ink-muted);margin-top:var(--pbc-space-0-5)} /* group header inside a list (status-grouped case list) */ .pbc-group{ display:flex;align-items:center;gap:var(--pbc-space-2); padding-block:var(--pbc-space-2-5); padding-inline:var(--pbc-space-4); background:var(--pbc-surface-soft); border-bottom:var(--pbc-border-width) solid var(--pbc-border-subtle); font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-semibold); color:var(--pbc-ink-muted); } /* ========================================================== FILTER BAR — chips with live counts ========================================================== */ .pbc-filterbar{ display:flex;align-items:center;gap:var(--pbc-space-1);flex-wrap:wrap; padding:var(--pbc-space-2); background:var(--pbc-surface-soft); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-btn); } .pbc-chip{ display:inline-flex;align-items:center;gap:var(--pbc-space-2); height:var(--pbc-control-h-sm); padding-inline:var(--pbc-space-3); border-radius:var(--pbc-radius-sm); border:var(--pbc-border-width) solid transparent; background:transparent;color:var(--pbc-ink-muted); font-family:inherit;font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-semibold); cursor:pointer;white-space:nowrap; transition:background-color var(--pbc-transition),color var(--pbc-transition); } .pbc-chip:hover{background:var(--pbc-surface);color:var(--pbc-ink-heading)} .pbc-chip.is-active{background:var(--pbc-surface);color:var(--pbc-ink-heading);border-color:var(--pbc-border);box-shadow:var(--pbc-shadow-xs)} .pbc-chip:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} /* ========================================================== TABS ========================================================== */ .pbc-tabs{display:flex;align-items:center;gap:var(--pbc-space-6);border-bottom:var(--pbc-border-width) solid var(--pbc-border)} .pbc-tab{ display:inline-flex;align-items:center;gap:var(--pbc-space-2); padding-block:var(--pbc-space-3); border:none;background:none;cursor:pointer; font-family:inherit;font-size:var(--pbc-text-base);font-weight:var(--pbc-weight-medium); color:var(--pbc-ink-muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--pbc-transition),border-color var(--pbc-transition); } .pbc-tab:hover{color:var(--pbc-ink-heading)} .pbc-tab.is-active{color:var(--pbc-brand-accent);border-bottom-color:var(--pbc-brand-accent);font-weight:var(--pbc-weight-semibold)} .pbc-tab:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring);border-radius:var(--pbc-radius-xs)} /* ========================================================== PHASE BAR — chevron progression (the case detail centrepiece) ========================================================== */ .pbc-phases{display:flex;align-items:stretch;gap:var(--pbc-space-1);overflow-x:auto} .pbc-phase{ /* min-width is deliberately small: a workflow can have 6–8 phases, and with the larger type a fixed 120px min forced the whole bar to scroll on a 1280px screen. Long phase names ellipsis instead; the current phase is allowed to grow so it always reads in full. */ flex:1 1 0;min-width:84px; display:flex;align-items:center;justify-content:center;gap:var(--pbc-space-2); padding-block:var(--pbc-space-2-5); padding-inline:var(--pbc-space-4); background:var(--pbc-neutral-100); color:var(--pbc-ink-muted); font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-semibold); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%); } .pbc-phase.is-current{flex-grow:1.6} [dir="rtl"] .pbc-phase{clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 50%,100% 100%,12px 100%,0 50%)} .pbc-phase:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)} [dir="rtl"] .pbc-phase:first-child{clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%)} .pbc-phase.is-done{background:var(--pbc-success-100);color:var(--pbc-success-600)} .pbc-phase.is-current{background:var(--pbc-brand-600);color:var(--pbc-ink-on-brand)} /* ========================================================== STEPPER — vertical checklist (setup wizard) ========================================================== */ .pbc-steps{display:flex;flex-direction:column} .pbc-step{display:flex;gap:var(--pbc-space-3);padding-block:var(--pbc-space-3);position:relative} .pbc-step__marker{ width:22px;height:22px;flex:none;border-radius:var(--pbc-radius-pill); border:2px solid var(--pbc-border-strong);background:var(--pbc-surface); display:grid;place-content:center; font-size:var(--pbc-text-xs);font-weight:var(--pbc-weight-bold);color:var(--pbc-ink-faint); } .pbc-step__rail{ position:absolute;inset-inline-start:10px;top:34px;bottom:-4px; width:2px;background:var(--pbc-border); } .pbc-step:last-child .pbc-step__rail{display:none} /* ⚠ display:block is LOAD-BEARING (§K K-4.9, 2026-08-02). Both are rendered as s; while they were inline the title and its description ran onto ONE line ("Starting pointCloned a template") and the desc's margin-top was inert. Same defect class as .pbc-notif__t/__m/__when in K-4.OVERLAYS. Latent since K-2 — the component had no consumer in the app, so it was never seen. */ .pbc-step__title{display:block;font-size:var(--pbc-text-base);font-weight:var(--pbc-weight-semibold);color:var(--pbc-ink-heading)} .pbc-step__desc{display:block;font-size:var(--pbc-text-sm);color:var(--pbc-ink-muted);margin-top:var(--pbc-space-0-5)} .pbc-step.is-done .pbc-step__marker{background:var(--pbc-success-500);border-color:var(--pbc-success-500);color:var(--pbc-ink-on-brand)} .pbc-step.is-done .pbc-step__rail{background:var(--pbc-success-500)} /* ⚠ NO STRIKETHROUGH ON A COMPLETED STEP — owner's decision 2026-08-02, do not re-add. A struck-out title reads as "cancelled"; a wizard step you can still go back and edit is finished, not withdrawn. The green marker carries "done". */ .pbc-step.is-done .pbc-step__title{color:var(--pbc-ink-muted)} .pbc-step.is-current .pbc-step__marker{border-color:var(--pbc-brand-accent);color:var(--pbc-brand-accent)} .pbc-step.is-locked{opacity:.55} /* ========================================================== WIZARD TRACKER — the horizontal sibling of .pbc-steps §K K-4.9 (2026-08-02). Owner picked option D from PBC Mockup/setup-wizard-options.html: markers spread across the full width, labels centred underneath, the connecting rail filling in behind you. ⚠ It is a SEPARATE component from .pbc-steps on purpose. .pbc-steps is vertical and carries a per-step description; this one is horizontal and label-only. Do not try to make one serve both — that is how the portal's .pbc-step ended up clashing with this file's in the first place. RTL: the rail uses logical inset properties, so it reverses with the document. There is no separate RTL rule and there must not be one. ========================================================== */ .pbc-wizbar{display:flex;align-items:flex-start;gap:var(--pbc-space-1)} .pbc-wizbar__step{ flex:1 1 0;min-width:0;position:relative; display:flex;flex-direction:column;align-items:center; gap:var(--pbc-space-2);text-align:center; } /* The rail is drawn from this step's marker toward the NEXT one. Because every step is flex:1 1 0 they are equal width, so reaching -50% + 20px lands exactly on the next marker's edge. */ .pbc-wizbar__step::after{ content:"";position:absolute;top:14px;height:2px; inset-inline-start:calc(50% + 20px); inset-inline-end:calc(-50% + 20px); background:var(--pbc-border); } .pbc-wizbar__step:last-child::after{display:none} .pbc-wizbar__marker{ width:30px;height:30px;flex:none; border-radius:var(--pbc-radius-pill); border:2px solid var(--pbc-border-strong); background:var(--pbc-surface); display:grid;place-content:center; font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-bold); color:var(--pbc-ink-faint); } .pbc-wizbar__label{ font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-medium); color:var(--pbc-ink-muted);line-height:var(--pbc-leading-snug); } /* ⚠⚠ THE FILL IS success-500 AND MUST STAY. Measured 2026-08-02, all four ways: success-500 #2F8F6B → white glyph 3.99:1, marker-vs-card 3.99:1 light / 3.70:1 dark — clears the 3:1 non-text bar everywhere (the glyph is an icon, aria-hidden; the step's state is carried by aria-current + the label). Darkening it to fix the glyph BREAKS DARK MODE: #256F53 gives a 6.04:1 glyph but the marker then sits at 2.45:1 on the dark card and disappears. And `--pbc-success-600` is NOT an option — it FLIPS to #7FD3B2 in dark (an ink colour), so as a fill it prints a pastel mint tick. Same trap as --pbc-call-accept in K-4.OVERLAYS. success-500 does not flip. Leave it. */ .pbc-wizbar__step.is-done .pbc-wizbar__marker{ background:var(--pbc-success-500);border-color:var(--pbc-success-500); color:var(--pbc-ink-on-brand); } .pbc-wizbar__step.is-done::after{background:var(--pbc-success-500)} .pbc-wizbar__step.is-done .pbc-wizbar__label{color:var(--pbc-ink-body)} /* Solid brand-600 fill, never steel — a steel fill under white ink is 3.91:1. */ .pbc-wizbar__step.is-current .pbc-wizbar__marker{ background:var(--pbc-brand-600);border-color:var(--pbc-brand-600); color:var(--pbc-ink-on-brand); } .pbc-wizbar__step.is-current .pbc-wizbar__label{ color:var(--pbc-ink-heading);font-weight:var(--pbc-weight-semibold); } /* Narrow: the markers and rail still tell the story, so only the step you are on keeps its label. Five labels below ~640px wrap into an unreadable stack. */ @media (max-width:640px){ .pbc-wizbar__label{display:none} .pbc-wizbar__step.is-current .pbc-wizbar__label{display:block} } /* ---------------------------------------------------------- CHOICE TILES — a grid of "pick one of these" cards. §K K-4.9. Built for wizard Step 1 (pick a template), and deliberately generic: the organisation wizard has the same shape. NOT Bootstrap's .row/.col — those bring a 12-column gutter system that fights the token rhythm (trap 3). A tile is a flat bordered surface, not a nested .pbc-card, so it does not stack a second shadow inside a card body. ---------------------------------------------------------- */ .pbc-optgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--pbc-space-4); } .pbc-optcard{ display:flex;flex-direction:column;gap:var(--pbc-space-2); padding:var(--pbc-space-4); background:var(--pbc-surface); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-chip); transition:border-color var(--pbc-transition); } .pbc-optcard:hover{border-color:var(--pbc-border-strong)} .pbc-optcard__title{ font-size:var(--pbc-text-base);font-weight:var(--pbc-weight-semibold); color:var(--pbc-ink-heading); } .pbc-optcard__desc{ font-size:var(--pbc-text-sm);color:var(--pbc-ink-muted); line-height:var(--pbc-leading-snug); } /* margin-top:auto pins the actions to the bottom so tiles of different text lengths still line their buttons up. Block axis — unrelated to the inline auto-margin trap in §14.265. */ .pbc-optcard__foot{ display:flex;gap:var(--pbc-space-2);flex-wrap:wrap; margin-top:auto;padding-top:var(--pbc-space-2); } /* ---------------------------------------------------------- INSET PANEL — a well nested INSIDE a card, for a drawer or a settings sub-form. §K K-4.12, built for the field builder's per-field settings drawer. Deliberately NOT a nested .pbc-card: a card inside a card inside a table cell stacks a second shadow and a second border radius, which reads as clutter. A sunken well says "this belongs to the row above it". ---------------------------------------------------------- */ .pbc-inset{ display:flex;flex-direction:column;gap:var(--pbc-space-2); padding:var(--pbc-space-4); background:var(--pbc-surface-sunken); border:var(--pbc-border-width) solid var(--pbc-border-subtle); border-radius:var(--pbc-radius-chip); } /* ========================================================== CRITERION ROW — one line of "what is still needed" ---------------------------------------------------------- §K K-4.26 (§14.294). Ported from the approved gallery specimen (`enduser-case-detail-options.html`, decision 4-A) rather than re-derived. One row = a state icon + a sentence, used inside `.pbc-inset` under the phase bar on the case page. ⚠ NOT `.pbc-check` — that is a real checkbox the user can click. These are read-only facts the workflow engine decided; making them look clickable would invite people to try. ⚠ `display:flex` with `align-items:flex-start` so a wrapping sentence keeps its icon on the first line rather than centring it against a two-line block. ========================================================== */ .pbc-crit{ display:flex;align-items:flex-start;gap:var(--pbc-space-2-5); font-size:var(--pbc-text-base); color:var(--pbc-ink-body); } .pbc-crit > i{ color:var(--pbc-ink-faint); margin-block-start:3px; /* optical: line the glyph up with the cap height */ flex:none; } /* Done reads as "already handled": the tick carries the colour, the words go quiet. No strikethrough — the owner ruled that out for wizard steps (§K K-4.9) and the reasoning is the same here: finished is not cancelled. */ .pbc-crit.is-done{color:var(--pbc-ink-muted)} .pbc-crit.is-done > i{color:var(--pbc-success-600)} /* ========================================================== ACTIVITY TIMELINE — case history ========================================================== */ .pbc-timeline{display:flex;flex-direction:column;gap:var(--pbc-space-2)} .pbc-timeline__date{ align-self:flex-start; padding-block:var(--pbc-space-1);padding-inline:var(--pbc-space-3); border-radius:var(--pbc-radius-pill); background:var(--pbc-neutral-100);color:var(--pbc-ink-muted); font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-semibold); margin-block:var(--pbc-space-3) var(--pbc-space-1); } .pbc-event{ display:flex;align-items:flex-start;gap:var(--pbc-space-3); padding:var(--pbc-space-3) var(--pbc-space-4); background:var(--pbc-surface); border:var(--pbc-border-width) solid var(--pbc-border-subtle); border-radius:var(--pbc-radius-chip); } .pbc-event__text{flex:1;font-size:var(--pbc-text-base);color:var(--pbc-ink-body);line-height:var(--pbc-leading-snug)} .pbc-event__actor{font-weight:var(--pbc-weight-semibold);color:var(--pbc-ink-heading)} .pbc-event__time{font-size:var(--pbc-text-sm);color:var(--pbc-ink-faint);white-space:nowrap} /* ========================================================== MODAL ========================================================== */ .pbc-scrim{position:fixed;inset:0;background:var(--pbc-overlay);z-index:var(--pbc-z-overlay)} .pbc-modal{ width:100%;max-width:var(--pbc-modal-w); background:var(--pbc-surface); border-radius:var(--pbc-radius-modal); box-shadow:var(--pbc-shadow-lg); overflow:hidden; } .pbc-modal--sm{max-width:var(--pbc-modal-w-sm)} .pbc-modal--lg{max-width:var(--pbc-modal-w-lg)} .pbc-modal__head{display:flex;align-items:flex-start;gap:var(--pbc-space-3);padding:var(--pbc-card-pad)} .pbc-modal__icon{ width:44px;height:44px;flex:none;border-radius:var(--pbc-radius-chip); background:var(--pbc-brand-100);color:var(--pbc-brand-accent); display:grid;place-content:center; } .pbc-modal__icon--danger{background:var(--pbc-danger-100);color:var(--pbc-danger-600)} .pbc-modal__title{font-size:var(--pbc-text-lg);font-weight:var(--pbc-weight-semibold);color:var(--pbc-ink-heading)} .pbc-modal__sub{font-size:var(--pbc-text-sm);color:var(--pbc-ink-muted);margin-top:var(--pbc-space-1)} .pbc-modal__body{padding-inline:var(--pbc-card-pad);padding-bottom:var(--pbc-space-5)} .pbc-modal__foot{ display:flex;align-items:center;justify-content:flex-end;gap:var(--pbc-space-3); padding:var(--pbc-space-4) var(--pbc-card-pad); border-top:var(--pbc-border-width) solid var(--pbc-border-subtle); background:var(--pbc-surface-soft); } /* ========================================================== INLINE ALERT / TOAST ========================================================== */ .pbc-alert{ display:flex;align-items:flex-start;gap:var(--pbc-space-3); padding:var(--pbc-space-3) var(--pbc-space-4); border-radius:var(--pbc-radius-chip); border:var(--pbc-border-width) solid transparent; font-size:var(--pbc-text-base); border-inline-start-width:3px; } .pbc-alert__title{font-weight:var(--pbc-weight-semibold);display:block} .pbc-alert--info {background:var(--pbc-info-100); color:var(--pbc-info-600); border-color:var(--pbc-info-border)} .pbc-alert--success{background:var(--pbc-success-100);color:var(--pbc-success-600);border-color:var(--pbc-success-border)} .pbc-alert--warning{background:var(--pbc-warning-100);color:var(--pbc-warning-600);border-color:var(--pbc-warning-border)} .pbc-alert--danger {background:var(--pbc-danger-100); color:var(--pbc-danger-600); border-color:var(--pbc-danger-border)} .pbc-toast{ display:flex;align-items:center;gap:var(--pbc-space-3); padding:var(--pbc-space-3) var(--pbc-space-4); background:var(--pbc-surface); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-chip); box-shadow:var(--pbc-shadow-popover); max-width:420px; } /* ========================================================== EMPTY STATE ========================================================== */ .pbc-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; padding:var(--pbc-space-16) var(--pbc-space-6); gap:var(--pbc-space-2); } .pbc-empty__icon{ width:52px;height:52px;border-radius:var(--pbc-radius-chip); background:var(--pbc-neutral-100);color:var(--pbc-ink-faint); display:grid;place-content:center;margin-bottom:var(--pbc-space-2); } .pbc-empty__title{font-size:var(--pbc-text-lg);font-weight:var(--pbc-weight-semibold);color:var(--pbc-ink-heading)} .pbc-empty__text{font-size:var(--pbc-text-base);color:var(--pbc-ink-muted);max-width:38ch} .pbc-empty__actions{display:flex;gap:var(--pbc-space-3);margin-top:var(--pbc-space-4)} /* ========================================================== LOADING — skeletons + spinner ========================================================== */ .pbc-skeleton{ background:linear-gradient(90deg, var(--pbc-neutral-100) 25%, var(--pbc-surface-sunken) 37%, var(--pbc-neutral-100) 63%); background-size:400% 100%; border-radius:var(--pbc-radius-xs); animation:pbc-shimmer 1.4s ease infinite; } @keyframes pbc-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}} .pbc-skeleton--text{height:12px;margin-block:var(--pbc-space-1)} .pbc-skeleton--title{height:16px;width:40%} .pbc-skeleton--circle{border-radius:var(--pbc-radius-pill)} .pbc-spinner{ width:20px;height:20px;flex:none; border:2px solid var(--pbc-border-strong);border-top-color:var(--pbc-brand-accent); border-radius:var(--pbc-radius-pill); animation:pbc-spin var(--pbc-duration-slow) linear infinite; } @media (prefers-reduced-motion:reduce){ .pbc-skeleton,.pbc-spinner,.pbc-btn.is-loading::before{animation:none} } /* ========================================================== PROGRESS ========================================================== */ .pbc-progress{height:6px;background:var(--pbc-neutral-100);border-radius:var(--pbc-radius-pill);overflow:hidden} .pbc-progress__bar{height:100%;background:var(--pbc-brand-accent);border-radius:var(--pbc-radius-pill);transition:width var(--pbc-duration-base) var(--pbc-ease-out)} .pbc-progress__bar--success{background:var(--pbc-success-500)} /* ========================================================== DROPDOWN MENU ========================================================== */ .pbc-menu{ min-width:200px;padding:var(--pbc-space-1-5); background:var(--pbc-surface); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-chip); box-shadow:var(--pbc-shadow-popover); } .pbc-menu__item{ display:flex;align-items:center;gap:var(--pbc-space-2-5);width:100%; padding-block:var(--pbc-space-2);padding-inline:var(--pbc-space-3); border:none;background:none;cursor:pointer;text-align:start; border-radius:var(--pbc-radius-sm); font-family:inherit;font-size:var(--pbc-text-base);color:var(--pbc-ink-body); } .pbc-menu__item:hover{background:var(--pbc-surface-hover);color:var(--pbc-ink-heading)} .pbc-menu__item:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} .pbc-menu__item--danger{color:var(--pbc-danger-600)} .pbc-menu__sep{height:1px;background:var(--pbc-border-subtle);margin-block:var(--pbc-space-1-5)} /* ========================================================== SIDEBAR NAV ========================================================== */ .pbc-sidebar{ width:var(--pbc-sidebar-w);flex:none; background:var(--pbc-sidebar-bg); border-inline-end:var(--pbc-border-width) solid var(--pbc-sidebar-border); padding:var(--pbc-space-4); display:flex;flex-direction:column; } .pbc-nav__group{ font-size:var(--pbc-text-xs);font-weight:var(--pbc-weight-bold); letter-spacing:var(--pbc-tracking-caps);text-transform:uppercase; /* No opacity here: at .8 this 11.5px uppercase label dropped to 4.21:1 against the top of the sidebar gradient. Full strength = 5.64:1. */ color:var(--pbc-brand-300); padding-block:var(--pbc-space-2);padding-inline:var(--pbc-space-3); margin-top:var(--pbc-space-3); } .pbc-nav__item{ display:flex;align-items:center;gap:var(--pbc-space-3); padding-block:var(--pbc-space-2-5);padding-inline:var(--pbc-space-3); border-radius:var(--pbc-radius-sm); color:var(--pbc-sidebar-ink); font-size:var(--pbc-text-base);font-weight:var(--pbc-weight-medium); text-decoration:none;cursor:pointer; margin-bottom:var(--pbc-space-1); transition:background-color var(--pbc-transition),color var(--pbc-transition); } .pbc-nav__item:hover{background:var(--pbc-sidebar-hover);color:var(--pbc-sidebar-ink-strong)} .pbc-nav__item.is-active{background:var(--pbc-sidebar-active);color:var(--pbc-sidebar-ink-strong);font-weight:var(--pbc-weight-semibold);position:relative} /* §K A3 / NV-1 D (§14.336) — the edge bar. See the twin rule on `#sidebar-nav .nav-link:not(.collapsed)` further down THIS FILE: both are consumers of the same design and must always be changed together, or the design-system nav and the live shell nav drift apart. */ .pbc-nav__item.is-active::before{content:"";position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--pbc-brand-300)} .pbc-nav__item:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} .pbc-nav__badge{margin-inline-start:auto} /* ========================================================== PERMISSION MATRIX ========================================================== */ .pbc-matrix{width:100%;border-collapse:collapse} .pbc-matrix th{ text-align:start; padding-block:var(--pbc-space-3);padding-inline:var(--pbc-space-4); font-size:var(--pbc-text-xs);font-weight:var(--pbc-weight-bold); letter-spacing:var(--pbc-tracking-caps);text-transform:uppercase; color:var(--pbc-ink-muted); border-bottom:var(--pbc-border-width) solid var(--pbc-border); } .pbc-matrix th:not(:first-child),.pbc-matrix td:not(:first-child){ text-align:center;width:var(--pbc-matrix-col); } .pbc-matrix td{ padding-block:var(--pbc-cell-pad-y);padding-inline:var(--pbc-space-4); border-bottom:var(--pbc-border-width) solid var(--pbc-border-subtle); font-size:var(--pbc-text-base);color:var(--pbc-ink-body); } .pbc-matrix tbody tr:hover{background:var(--pbc-surface-hover)} .pbc-matrix__section td{ font-size:var(--pbc-text-sm);font-weight:var(--pbc-weight-bold); letter-spacing:var(--pbc-tracking-caps);text-transform:uppercase; color:var(--pbc-ink-heading);background:var(--pbc-surface-soft); padding-block:var(--pbc-space-2-5); } .pbc-matrix__section:hover td{background:var(--pbc-surface-soft)} /* the matrix is the densest screen in the app — give its ticks a bigger hit area than the default checkbox */ .pbc-matrix td input[type="checkbox"]{width:22px;height:22px} /* ========================================================== AUTH SHELL — the signed-out screens (login first, K-4) ---------------------------------------------------------- OWNER DIRECTION 2026-07-25 (revision 2, replaced the split layout): ONE page, the WHOLE page blue, everything in a single centred column — logo, then PBC, then the slogan, then the form directly underneath. ⚠ THE FORM SITS ON THE BRAND, NOT ON WHITE. That inverts every ink decision, so the rules below are load-bearing: - gradient is --pbc-brand-gradient-deep. The plain --pbc-brand-gradient ends in steel and white on steel is 3.91:1. - all copy uses --pbc-sidebar-ink-strong, which holds 5.9:1 even on the lightest stop. --pbc-sidebar-ink measures 3.26:1 there and must NOT be used. - the INPUTS stay light with dark ink on purpose. A translucent dark input looks better but Safari's autofill forces its own light background and keeps the author's text colour, so autofilled credentials render white-on-white — invisible. The owner uses Safari with a password manager. Legibility beats the darker look. - the button is therefore INVERSE (light fill, navy ink): a brand-600 button would be nearly invisible against the lower half of the gradient (2.5:1 edge). Logical properties throughout, so it mirrors under RTL. NOTE: guests are always served English today (SetLocale localizes authenticated users only), so RTL here is future-proofing, not a live path. ========================================================== */ .pbc-auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--pbc-space-12) var(--pbc-space-5); background:var(--pbc-brand-gradient-deep); } /* the single centred column */ .pbc-auth__box{ width:100%; max-width:400px; display:flex; flex-direction:column; align-items:center; text-align:center; } /* --- brand stack: logo → name → slogan --- */ .pbc-auth__brand{ display:flex;flex-direction:column;align-items:center; gap:var(--pbc-space-3); margin-bottom:var(--pbc-space-8); } .pbc-auth__logo{ width:132px;height:132px; object-fit:contain; } /* an organisation without a logo gets its initials in the same footprint */ .pbc-auth__monogram{ width:132px;height:132px; border-radius:var(--pbc-radius-pill); background:var(--pbc-on-brand-fill); border:var(--pbc-border-width) solid var(--pbc-on-brand-border); display:grid;place-items:center; font-family:var(--pbc-font-heading); font-weight:var(--pbc-weight-heading); font-size:var(--pbc-text-3xl); color:var(--pbc-sidebar-ink-strong); overflow:hidden; } .pbc-auth__monogram img{width:100%;height:100%;object-fit:cover;background:var(--pbc-surface)} .pbc-auth__wordmark{ font-family:var(--pbc-font-heading); font-weight:var(--pbc-weight-heading); font-size:var(--pbc-text-3xl); letter-spacing:var(--pbc-tracking-tight); line-height:var(--pbc-leading-tight); color:var(--pbc-sidebar-ink-strong); } .pbc-auth__tagline{ font-size:var(--pbc-text-md); line-height:var(--pbc-leading-relaxed); color:var(--pbc-sidebar-ink-strong); max-width:32ch; margin:0; } .pbc-auth__brandfoot{ font-size:var(--pbc-text-xs); letter-spacing:var(--pbc-tracking-caps); text-transform:uppercase; color:var(--pbc-sidebar-ink-strong); } /* --- the form, directly under the brand stack --- */ .pbc-auth__fields{ width:100%; display:flex;flex-direction:column; gap:var(--pbc-space-5); text-align:start; } /* labels are ON the brand here, so they invert */ .pbc-auth .pbc-field__label{color:var(--pbc-sidebar-ink-strong)} .pbc-auth__row{ display:flex;align-items:center;justify-content:space-between; gap:var(--pbc-space-4);flex-wrap:wrap; } .pbc-auth .pbc-check{color:var(--pbc-sidebar-ink-strong)} .pbc-auth__link{ font-size:var(--pbc-text-sm); font-weight:var(--pbc-weight-semibold); color:var(--pbc-sidebar-ink-strong); text-decoration:underline; border-radius:var(--pbc-radius-xs); } .pbc-auth__link:hover{color:var(--pbc-sidebar-ink-strong);text-decoration:none} .pbc-auth__link:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} .pbc-auth__foot{ margin-top:var(--pbc-space-10); font-size:var(--pbc-text-xs); letter-spacing:var(--pbc-tracking-caps); text-transform:uppercase; color:var(--pbc-sidebar-ink-strong); } .pbc-auth__foot b{font-weight:var(--pbc-weight-bold)} /* alerts keep their own light surfaces — they must read as notices, and they already pass AA on their own tints */ .pbc-auth .pbc-alert{width:100%;margin-bottom:var(--pbc-space-5);text-align:start} /* --- small screens --- */ @media (max-width:600px){ .pbc-auth{padding:var(--pbc-space-8) var(--pbc-space-4);min-height:100dvh} .pbc-auth__logo,.pbc-auth__monogram{width:96px;height:96px} .pbc-auth__monogram{font-size:var(--pbc-text-2xl)} .pbc-auth__wordmark{font-size:var(--pbc-text-2xl)} .pbc-auth__brand{margin-bottom:var(--pbc-space-6)} } /* ========================================================== INVERSE BUTTON — for solid brand/navy backgrounds A primary (brand-600) button on the login page would sit at ~2.5:1 against the gradient behind it and read as a flat patch. The inverse is a light fill with brand ink: 18:1 against the page, 8.6:1 for its own label. ========================================================== */ .pbc-btn--inverse{ background:var(--pbc-surface); color:var(--pbc-brand-700); box-shadow:var(--pbc-shadow-sm); } .pbc-btn--inverse:hover{background:var(--pbc-brand-100);color:var(--pbc-brand-800)} /* ========================================================== AUTH FOOTER ROW — terms · privacy · language ---------------------------------------------------------- One row under the "Powered by PBC" credit (owner, K-4). The language picker is a

disclosure, not a Bootstrap dropdown: the guest layout does NOT load Bootstrap, and this must not depend on JS at all.

is keyboard-accessible and closes on Escape natively. Everything here sits ON the brand gradient, so all ink is --pbc-sidebar-ink-strong (5.9:1 at the worst stop). The open list flips to a normal light surface so the language names read as a menu, not as more page furniture. ========================================================== */ .pbc-auth__meta{ margin-top:var(--pbc-space-3); display:flex;align-items:center;justify-content:center; flex-wrap:wrap; gap:var(--pbc-space-2) var(--pbc-space-4); font-size:var(--pbc-text-xs); } .pbc-auth__meta a, .pbc-auth__meta summary{ color:var(--pbc-sidebar-ink-strong); text-decoration:none; cursor:pointer; } .pbc-auth__meta a:hover, .pbc-auth__meta summary:hover{text-decoration:underline} .pbc-auth__meta a:focus-visible, .pbc-auth__meta summary:focus-visible{ outline:none;box-shadow:var(--pbc-focus-ring);border-radius:var(--pbc-radius-xs); } /* --- language disclosure --- */ .pbc-langmenu{position:relative} .pbc-langmenu > summary{ list-style:none; display:inline-flex;align-items:center;gap:var(--pbc-space-1-5); } .pbc-langmenu > summary::-webkit-details-marker{display:none} .pbc-langmenu > summary::after{ content:''; width:0;height:0; border-inline-start:4px solid transparent; border-inline-end:4px solid transparent; border-top:5px solid currentColor; transition:transform var(--pbc-transition); } .pbc-langmenu[open] > summary::after{transform:rotate(180deg)} .pbc-langmenu__list{ position:absolute; bottom:calc(100% + var(--pbc-space-2)); inset-inline-start:50%; transform:translateX(-50%); z-index:var(--pbc-z-dropdown); min-width:180px; background:var(--pbc-surface); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-sm); box-shadow:var(--pbc-shadow-popover); padding:var(--pbc-space-1); display:flex;flex-direction:column; text-align:start; } [dir="rtl"] .pbc-langmenu__list{transform:translateX(50%)} .pbc-langmenu__item{ display:flex;align-items:center;justify-content:space-between; gap:var(--pbc-space-3); width:100%; padding:var(--pbc-space-2) var(--pbc-space-3); background:none;border:0; border-radius:var(--pbc-radius-xs); font-family:inherit; font-size:var(--pbc-text-sm); color:var(--pbc-ink-body); text-align:start; cursor:pointer; } .pbc-langmenu__item:hover{background:var(--pbc-surface-hover)} .pbc-langmenu__item:focus-visible{outline:none;box-shadow:var(--pbc-focus-ring)} .pbc-langmenu__item[aria-current="true"]{ color:var(--pbc-brand-accent); font-weight:var(--pbc-weight-semibold); background:var(--pbc-surface-active); } /* the tick on the language already in use */ .pbc-langmenu__item[aria-current="true"]::after{content:'✓';font-size:var(--pbc-text-sm)} /* explanatory paragraph on an auth screen (forgot-password's instructions). On the brand, so it takes the strong sidebar ink like everything else here. */ .pbc-auth__note{ font-size:var(--pbc-text-sm); line-height:var(--pbc-leading-relaxed); color:var(--pbc-sidebar-ink-strong); margin:0 0 var(--pbc-space-6); text-align:start; } /* ========================================================== AUTH DOCUMENT — terms / privacy, rendered from markdown A readable light column on the brand page. The prose comes from markdown, so this is the ONE place the component layer styles bare elements — scoped inside .pbc-doc so it cannot reach Bootstrap or any app screen. ========================================================== */ .pbc-auth--doc{align-items:flex-start} .pbc-auth__doc{ width:100%; max-width:var(--pbc-modal-w-lg); background:var(--pbc-surface); border-radius:var(--pbc-radius-card); box-shadow:var(--pbc-shadow-lg); padding:var(--pbc-card-pad-lg); text-align:start; color:var(--pbc-ink-body); } .pbc-auth__doc h1,.pbc-auth__doc h2,.pbc-auth__doc h3{ font-family:var(--pbc-font-heading); font-weight:var(--pbc-weight-heading); color:var(--pbc-ink-heading); letter-spacing:var(--pbc-tracking-tight); line-height:var(--pbc-leading-tight); margin:var(--pbc-space-8) 0 var(--pbc-space-3); } .pbc-auth__doc h1{font-size:var(--pbc-text-2xl);margin-top:0} .pbc-auth__doc h2{font-size:var(--pbc-text-xl)} .pbc-auth__doc h3{font-size:var(--pbc-text-lg)} .pbc-auth__doc p,.pbc-auth__doc li{ font-size:var(--pbc-text-md); line-height:var(--pbc-leading-relaxed); margin:0 0 var(--pbc-space-4); } .pbc-auth__doc ul,.pbc-auth__doc ol{padding-inline-start:var(--pbc-space-6);margin:0 0 var(--pbc-space-4)} .pbc-auth__doc a{color:var(--pbc-brand-accent)} .pbc-auth__doc strong{color:var(--pbc-ink-heading);font-weight:var(--pbc-weight-semibold)} .pbc-auth__doc hr{border:0;border-top:var(--pbc-border-width) solid var(--pbc-border);margin:var(--pbc-space-8) 0} /* ========================================================== STAT TILE — a headline number that drills into a filtered list ---------------------------------------------------------- Added K-4 (2026-07-25) for the dashboard; the gallery had no stat pattern because it hadn't come up when K-2 was built. The number leads, the label follows underneath — the reverse of the old dashboard, where a coloured icon chip competed with the figure for attention. Colour appears ONLY when a number means something is wrong (--alert), never decoratively. ========================================================== */ .pbc-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--pbc-space-6); /* Owner, 2026-07-25: "the spacing between the boxes and what's underneath is way too low". There was literally ZERO gap here — .pbc-stats and the content below it were siblings with no margin between them. */ margin-block-end:var(--pbc-space-8); } /* COMPACT ROW — owner, 2026-08-08 (§K K-4.31): "the four boxes … are too wide, they have too much blank space in them right now. Make them a little bit more narrow, but keep them all centred at the same time." The default track is `1fr`, so four tiles stretch to fill whatever width the page has and the number ends up marooned at one end of the tile with its icon at the other. Here each tile is capped and the ROW is centred, so a short row of numbers sits under the middle of the header instead of being stretched across it. ⚠ `minmax(0,220px)` — the 0 floor is what lets a tile shrink on a narrow window; `repeat(auto-fit,...)` still re-flows them onto two lines when there is no room. ⚠ Deliberately a MODIFIER: both dashboards want the full-width version, and they are already owner-approved. Do not move this onto `.pbc-stats` itself. */ .pbc-stats--compact{ /* ⚠ REVISED 2026-08-08 (§K K-4.33) AFTER THE OWNER LOOKED AT IT. The first cut capped each tile at 220px and CENTRED the row, which made the row narrower than the page — so the first tile's outline sat well inside the left edge while the tab pills below started at the container edge, and the two rows read as misaligned. Owner: "all these tabs should start exactly at the same line as the first box starts with the outline." Four equal 1fr tracks fix all three of their notes at once: the row spans the container, so its FIRST and LAST edges land exactly on the tab row's and the cards' below (nothing to keep in sync by hand — they share the container); each tile ends up a little WIDER than the 220px cap; and the gap grows. ⚠ Do not put `justify-content` back — with 1fr tracks there is no free space to distribute, and a stale centring rule would be a puzzle for the next reader rather than a no-op. */ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--pbc-space-8); } /* `repeat(4,…)` cannot re-flow on its own, so the break points are explicit. Two-up before one-up: four tiles going straight to a single column wastes a whole screen of height on a tablet. */ @media (max-width:1100px){ .pbc-stats--compact{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .pbc-stats--compact{grid-template-columns:1fr} } /* Shorter tiles — owner: "the space on top and on the bottom of those boxes is a little bit too much between the content of these boxes and the top and the bottom line." The INLINE padding stays at the card's 28px so the number keeps its margin from the edge; only the block padding comes in. */ .pbc-stats--compact .pbc-stat{padding-block:var(--pbc-space-5)} .pbc-stat{ /* Owner, 2026-07-25: the icon goes in the blank space to the RIGHT of the number and label, and bigger than it was on the options page. So the tile is a ROW — a text column on the start side, the icon on the end side — rather than one stacked column. `space-between` pins the icon to the far edge so every tile's icon lines up down the row, whatever width its number is. */ display:flex;flex-direction:row;align-items:center;justify-content:space-between; gap:var(--pbc-space-4); padding:var(--pbc-card-pad); background:var(--pbc-surface); border:var(--pbc-border-width) solid var(--pbc-border); border-radius:var(--pbc-radius-card); box-shadow:var(--pbc-shadow-xs); text-decoration:none; color:inherit; transition:border-color var(--pbc-transition),box-shadow var(--pbc-transition); } /* A tile is a link on the end-user dashboard and a