/* fetch-1519: shared Asset condition reader, scoped to its independent Assets mode. */ .asset-condition-reader { min-width: 0; } .rail-menu-shared > button { display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-height-touch); width: 100%; text-align: left; } .asset-condition-reader .pgh { margin-bottom: var(--s-3); } .asset-condition-reader .btn.icon-btn { width: var(--control-height-touch); min-width: var(--control-height-touch); height: var(--control-height-touch); min-height: var(--control-height-touch); } .asset-condition-reader :is(.btn, .pgh-back, .pgh-search-x, input) { min-height: var(--control-height-touch); } .asset-condition-row { display: grid; grid-template-columns: minmax(10rem, 1fr) 8rem minmax(14rem, 1.3fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-width: 0; min-height: var(--control-height-touch); padding: var(--s-3) var(--s-4); border: 0; border-bottom: 1px solid var(--line); background: var(--surface-card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .asset-condition-row:first-child { border-radius: var(--r-m) var(--r-m) 0 0; } .asset-condition-row:last-child { border-radius: 0 0 var(--r-m) var(--r-m); } .asset-condition-row:hover { background: var(--wash); } .asset-condition-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .asset-condition-name { display: block; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .asset-condition-venue { display: block; min-width: 0; color: var(--muted); font-size: var(--t-sub); font-weight: 400; } .asset-condition-venue .vchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .asset-condition-status { font-size: var(--t-sub); font-weight: 600; } .asset-condition-status--bad { color: var(--bad-fg); } .asset-condition-status--warn { color: var(--warn-fg); } .asset-condition-counts { display: grid; gap: var(--s-1); min-width: 0; color: var(--muted); font-size: var(--t-sub); font-variant-numeric: tabular-nums; } .asset-condition-counts > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .asset-condition-loading, .asset-condition-feedback { margin: var(--s-3) 0; font-size: var(--t-body); overflow-wrap: anywhere; } .asset-condition-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; } .asset-condition-dialog { box-sizing: border-box; width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-card); color: var(--ink); overflow: auto; } .asset-condition-dialog::backdrop { background: color-mix(in srgb, var(--navy-dark) 45%, transparent); } .asset-condition-dialog-head { display: flex; gap: var(--s-3); justify-content: space-between; align-items: flex-start; } .asset-condition-dialog-head h2 { margin: 0; min-width: 0; font-family: Inter, sans-serif; font-size: var(--t-section); overflow-wrap: anywhere; } .asset-condition-dialog :is(.btn, .icon-btn) { min-height: var(--control-height-touch); min-width: var(--control-height-touch); } .asset-condition-detail-venue { margin: var(--s-3) 0; overflow-wrap: anywhere; } .asset-condition-facts { margin: var(--s-4) 0; } .asset-condition-facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); } .asset-condition-facts dt { color: var(--muted); font-size: var(--t-sub); } .asset-condition-facts dd { margin: 0; font-size: var(--t-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } @media (max-width: 640px) { .asset-condition-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2); padding: var(--s-3); } .asset-condition-counts { grid-column: 1 / -1; } .asset-condition-row > .ci { grid-column: 3; grid-row: 1; } .asset-condition-status { grid-column: 2; grid-row: 1; } .asset-condition-name { grid-column: 1; grid-row: 1; } .asset-condition-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); padding: var(--s-4); } .asset-condition-facts > div { grid-template-columns: 6rem minmax(0, 1fr); } } /* fetch-1304: CRM calendar matches share the existing header and record doors. */ .cl-fill { min-width: 0; } .cl-fill h2 { margin: 0 0 var(--s-2); font: 600 var(--t-section)/1.4 Inter, sans-serif; color: var(--text-heading); } .cl-fill-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-4); margin-block: var(--s-4); } .cl-fill-heading p { margin: 0; font-size: var(--t-body); color: var(--muted); } .cl-fill-controls { display: flex; flex-wrap: wrap; gap: var(--s-3); } .cl-fill-controls label { display: grid; gap: var(--s-1); font-size: var(--t-sub); color: var(--muted); } .cl-fill-controls .sel { min-height: var(--control-height-touch); font-size: var(--t-body); } .cl-fill-summary { margin: var(--s-3) 0 var(--s-1); font-size: var(--t-body); font-weight: 600; font-variant-numeric: tabular-nums; } .cl-fill-meta { color: var(--muted); font-size: var(--t-sub); line-height: 1.6; margin: var(--s-1) 0; overflow-wrap: anywhere; } .cl-fill-explain { margin-block: var(--s-3) var(--s-4); font-size: var(--t-sub); line-height: 1.6; } .cl-fill-explain summary, .cl-fill-rates summary { cursor: pointer; min-height: var(--control-height-touch); display: list-item; align-content: center; color: var(--navy); } .cl-fill-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); } .cl-fill-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.42fr); gap: var(--s-4); padding: var(--s-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-m); } .cl-fill-main, .cl-fill-next { min-width: 0; } .cl-fill-date { font-size: var(--t-sub); font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; } .cl-fill-row h3 { margin: var(--s-2) 0 var(--s-1); font-size: var(--t-section); font-weight: 600; color: var(--text-heading); overflow-wrap: anywhere; } .cl-fill-reason { margin: var(--s-3) 0 var(--s-2); font-size: var(--t-body); line-height: 1.6; } .cl-fill-rates { font-size: var(--t-sub); line-height: 1.6; } .cl-fill-rates p { margin: var(--s-1) 0; color: var(--muted); } .cl-fill-next { border-left: 1px solid var(--line); padding-left: var(--s-4); } .cl-fill-strength { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-sub); color: var(--muted); } .cl-fill-next dl { margin-block: var(--s-3); font-size: var(--t-sub); line-height: 1.6; } .cl-fill-next dt { color: var(--muted); } .cl-fill-next dd { margin: 0 0 var(--s-2); overflow-wrap: anywhere; } .cl-fill .btn { min-height: var(--control-height-touch); } @media (max-width: 640px) { .cl-fill-heading { display: block; } .cl-fill-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--s-3); } .cl-fill-controls .sel { min-width: 0; width: 100%; font-size: 1rem; } .cl-fill-row { grid-template-columns: minmax(0, 1fr); padding: var(--s-3); gap: var(--s-3); } .cl-fill-next { border-left: 0; border-top: 1px solid var(--line); padding: var(--s-3) 0 0; } .cl-fill-next .btn { width: 100%; } } /* fetch-1233: one compact header owns the event/venue scope and active tool. */ .readiness-workspace { min-width: 0; } /* fetch-1280: event identity owns the view chooser; each tool owns its controls. */ .evt-view-switch { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); color: var(--muted); font: 500 var(--t-sub)/1.4 Inter, sans-serif; } .evt-view-switch .sel { width: auto; min-width: 0; min-height: var(--control-height-sm); padding-block: 0; font-size: var(--t-sub); color: var(--text-heading); } /* fetch-1500 (Jack): a small control, the size of its words */ .evt-view-label { display: block; margin-bottom: var(--s-2); color: var(--muted); font-size: var(--t-sub); } .event-operations-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); } .event-operations-tools .btn { min-height: var(--control-height-touch); white-space: normal; } /* fetch-1287: the isolated saved timeline keeps every reader control touch-sized. */ .saved-timeline-reader .btn { min-height: var(--control-height-touch); } .readiness-workspace--embedded { margin: 0; } .beo-editor.beo-editor--staff { grid-template-columns: minmax(0, 1fr); } .beo-editor--staff .beo-editor-edge { justify-content: space-between; } @media (max-width: 640px) { .evt-view-switch { display: flex; width: 100%; } .evt-view-switch .sel { flex: 1; min-width: 0; min-height: var(--control-height-touch); font-size: 1rem; } /* fetch-1500: small on a desktop, a thumb target here */ .event-operations-tools .btn { flex: 1 1 auto; } } .readiness-header.pgh { display: grid; gap: var(--s-2); padding: var(--s-3); margin: 0 0 var(--s-3); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; } .readiness-header.pgh > :is(.pgh-top, .pgh-tabs, .pgh-nav) { margin: 0; min-width: 0; } .readiness-header.pgh .pgh-top { gap: var(--s-2); align-items: center; flex-wrap: nowrap; } .readiness-header.pgh .pgh-titles { flex: 1 1 auto; } .readiness-header.pgh .pgh-h { font-size: var(--t-section); font-family: Inter, sans-serif; } .readiness-header.pgh .pgh-h--link { min-height: var(--control-height-touch); } .readiness-header.pgh .pgh-nav { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2); } .readiness-header.pgh .pgh-navfield { flex: 1 1 8rem; min-width: 0; width: auto; } .readiness-header.pgh .pgh-navfield:has(#readinessEvent) { flex: 2 1 14rem; } .readiness-header.pgh .sel { min-width: 0; width: 100%; } .readiness-header.pgh :is(.btn, .pgh-tab, .sel, .pgh-more) { min-height: var(--control-height-touch); } .readiness-header.pgh .pgh-tabs { gap: var(--s-3); overflow: visible; flex-wrap: wrap; } .readiness-header.pgh .pgh-tab { font-size: var(--t-body); padding-block: var(--s-2); } .readiness-header.pgh .pgh-nav--tail .btn { flex: 0 1 auto; white-space: normal; } .readiness-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; } .readiness-main, .readiness-reference, .readiness-crew { min-width: 0; } .readiness-main > .tlw-layout { display: block; } .readiness-workspace .readiness-reference > .tlb-rail { position: static; margin: 0; } .readiness-crew .card { margin-top: 0; } .readiness-crew .grid { grid-template-columns: minmax(0, 1fr); } .readiness-crew :is(input, select, textarea, .btn) { min-height: var(--control-height-touch); } .readiness-main .event-diagrams { margin-top: 0; } #readinessCoveragePanel { margin-top: var(--s-4); } @media (min-width: 1100px) { .readiness-header.pgh { grid-template-columns: minmax(0, 1fr) minmax(26rem, 40rem); gap: var(--s-2) var(--s-4); } .readiness-header.pgh > .pgh-top { grid-column: 1; grid-row: 1; } .readiness-header.pgh > .pgh-nav:not(.pgh-nav--tail) { grid-column: 2; grid-row: 1; align-self: center; } .readiness-header.pgh > .pgh-tabs { grid-column: 1; grid-row: 2; } .readiness-header.pgh > .pgh-nav--tail { grid-column: 2; grid-row: 2; justify-content: end; } .readiness-header.pgh .pgh-navfield:has(#readinessEvent) { min-width: 19rem; } .readiness-layout--reference { grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); } .readiness-reference, .readiness-crew { position: sticky; top: var(--s-3); } } @media (max-width: 640px) { .readiness-header.pgh { padding-inline: 0; } .readiness-header.pgh .pgh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); } .readiness-header.pgh .pgh-tab { min-width: 0; padding: var(--s-2) var(--s-1); white-space: normal; font-size: var(--t-sub); } .readiness-header.pgh > .pgh-nav:not(.pgh-nav--tail) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } #linenHeader .readiness-header.pgh > .pgh-nav:not(.pgh-nav--tail) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); } .readiness-header.pgh .pgh-navfield { width: 100%; } .readiness-header.pgh .pgh-acts { gap: var(--s-1); } .readiness-header.pgh .pgh-acts .btn { padding-inline: var(--s-2); } .readiness-header.pgh :is(input, select) { font-size: 1rem; } .readiness-workspace .readiness-crew :is(input, select, textarea) { font-size: 1rem; } } /* fetch-1235: the approved subject tiles, within the shared header. */ .readiness-header.pgh { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-5); gap: var(--s-4); } .readiness-header.pgh .pgh-top { display: contents; } .readiness-header.pgh .pgh-h { font-size: var(--t-title); } .readiness-header.pgh > :is(.pgh-scope, .pgh-tiles) { margin: 0; min-width: 0; } .readiness-header.pgh .pgh-scope { display: block; } .readiness-header.pgh .pgh-scope::before { content: 'Venue'; display: block; color: var(--muted); font-size: var(--t-sub); margin-bottom: var(--s-1); } .readiness-header.pgh .pgh-scope-choices:empty, .readiness-header.pgh .pgh-acts:empty { display: none; } .readiness-header.pgh :is(.pgh-picker-trigger, .pgh-picker-list .pgh-chip) { min-height: var(--control-height-touch); font-size: var(--t-body); } .readiness-header.pgh .pgh-picker-list { right: 0; left: auto; width: 100%; max-width: 100%; } .readiness-header.pgh .pgh-picker-list .pgh-chip { color: var(--navy-dark); border-color: transparent; gap: var(--s-2); } .readiness-header.pgh .pgh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } .readiness-header.pgh .pgh-tile { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 4.75rem; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); color: var(--navy-dark); text-align: left; font: inherit; cursor: pointer; } .readiness-header.pgh .pgh-tile > .ci { flex: 0 0 auto; color: var(--navy); } .readiness-header.pgh .pgh-tile > span { min-width: 0; } .readiness-header.pgh .pgh-tile strong { display: block; font-size: var(--t-body); font-weight: 600; } .readiness-header.pgh .pgh-tile small { display: block; font-size: var(--t-sub); color: var(--muted); margin-top: var(--s-1); } .readiness-header.pgh .pgh-tile:hover { background: var(--wash); } .readiness-header.pgh .pgh-tile[aria-pressed="true"] { border-color: var(--navy); background: var(--wash); } .readiness-header.pgh .pgh-tile[aria-pressed="true"]::after { content: ''; position: absolute; bottom: 0; left: var(--s-3); right: var(--s-3); height: 3px; background: var(--gold); border-radius: var(--r-s) var(--r-s) 0 0; } @media (min-width: 1100px) { .readiness-header.pgh { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem) minmax(10rem, 13rem) auto; align-items: center; } .readiness-header.pgh .pgh-titles { grid-column: 1; grid-row: 1; } .readiness-header.pgh .pgh-tiles { grid-column: 2; grid-row: 1; } .readiness-header.pgh .pgh-scope { grid-column: 3; grid-row: 1; } .readiness-header.pgh .pgh-acts { grid-column: 4; grid-row: 1; } .readiness-header.pgh > .pgh-tabs { grid-column: 1; grid-row: 2; gap: var(--s-3); } .readiness-header.pgh > .pgh-nav:not(.pgh-nav--tail) { grid-column: 2; grid-row: 2; } .readiness-header.pgh > .pgh-nav--tail { grid-column: 3 / 5; grid-row: 2; } #linenHeader .readiness-header.pgh > .pgh-nav--tail { grid-column: 4; grid-row: 1; align-self: end; } #linenHeader .readiness-header.pgh .pgh-acts { grid-column: 3 / 5; grid-row: 2; justify-content: end; } #linenHeader .readiness-header.pgh > .pgh-nav:not(.pgh-nav--tail) { grid-column: 1 / 3; grid-row: 2; max-width: 16rem; } } @media (max-width: 1099px) { .readiness-header.pgh { grid-template-columns: minmax(0, 1fr); } .readiness-header.pgh .pgh-titles { order: 0; } .readiness-header.pgh .pgh-tiles { order: 1; } .readiness-header.pgh .pgh-scope { order: 2; } .readiness-header.pgh > .pgh-nav:not(.pgh-nav--tail) { order: 3; display: flex; } .readiness-header.pgh > .pgh-tabs { order: 4; } .readiness-header.pgh > .pgh-nav--tail { order: 5; } .readiness-header.pgh .pgh-acts { order: 6; justify-content: end; } #linenHeader .readiness-header.pgh { grid-template-columns: minmax(0, 1fr) auto; } #linenHeader .readiness-header.pgh :is(.pgh-titles, .pgh-tiles, .pgh-acts), #linenHeader .readiness-header.pgh > .pgh-nav:not(.pgh-nav--tail) { grid-column: 1 / -1; } #linenHeader .readiness-header.pgh .pgh-scope { grid-column: 1; } #linenHeader .readiness-header.pgh > .pgh-nav--tail { grid-column: 2; order: 2; align-self: end; } } @media (max-width: 640px) { .readiness-header.pgh { padding: var(--s-4); } .readiness-header.pgh .pgh-tile { gap: var(--s-2); padding: var(--s-3) var(--s-2); } .readiness-header.pgh .pgh-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .readiness-header.pgh .pgh-tab { font-size: var(--t-sub); } .readiness-header.pgh .pgh-acts { flex-wrap: wrap; } } :root { --navy: #384a61; /* deep navy — header, primary text accents */ --navy-dark: #242b42; /* darker navy for hovers */ --gold: #c09267; /* warm gold accent */ --gold-dark: #8c6145; /* gold hover */ --ink: #1a1a1a; --muted: #707373; --line: #e7dfcf; /* fetch-145 (audit №2): ONE hairline — the brand-warm one wins */ --bg: #f0e8e0; /* warm off-white background */ /* ---- fetch-145: token layer from Brutal Audit №2 §3. New code references these; old literals get swept opportunistically per screen touched. ---- */ /* fetch-794: the separator below was a COMMA until v5.394, which made this ONE declaration — --t-mid took the value "13px , --t-sub: 12px" (not a valid length) and --t-sub was never defined at all. 216 rules across portal.css/index.html/timesheets.html/staff.html asked for var(--t-sub) and silently inherited their parent's size for 44 builds. Regression from fetch-704, which added --t-mid; before that this line was correct. Keep each declaration semicolon-terminated and keep comments OUT of the middle of one. */ --t-display: 27px; --t-title: 22px; --t-section: 17px; --t-body: 14px; --t-mid: 13px; /* fetch-704 (Amanda #2): the half-step where a 12px label and a 14px option meet */ --t-sub: 12px; --t-label: 11px; /* floor: 10.5px */ /* fetch-1196: the figure a page is ABOUT. The Labor Forecast's largest number was smaller than the caps label over it (1.09 : 1); against --t-label this is 2.9 : 1. Two structural rules beside it, as color-mix on tokens - --line is 1.3 : 1 on white and --hair 1.2 : 1, and neither reads as a line under a table head. */ --t-figure: 2rem; --rule: color-mix(in srgb, var(--brand-blue-traditional) 30%, var(--paper)); --rule-soft: color-mix(in srgb, var(--brand-blue-traditional) 14%, var(--paper)); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --r-s: 6px; --r-m: 10px; --r-l: 14px; --hair: #f0ece4; --wash: #faf8f4; --paper: #ffffff; /* fetch-644: the one white. Panels that must read as "a form" sitting on a --wash card. */ --pipe-orange: #d97706; /* fetch-400 (Amanda): Hold=orange on calendar/pipeline (hex moved from .st-hold border — ratchet-neutral) */ --ok-bg: #dcfce7; --ok-fg: #166534; --warn-bg: #fef3c7; --warn-fg: #92400e; --bad-bg: #fee2e2; --bad-fg: #991b1b; --info-bg: #dbeafe; --info-fg: #1e40af; --mute-bg: #eef1f5; --mute-fg: #475569; --w-narrow: 1100px; --w-mid: 1440px; --w-wide: 1900px; /* ---- fetch-284 (UI audit Phase 1): brand-semantic aliases over the raw tokens above. Additive — nothing is restyled; new/migrated code references these names so intent is legible and a future palette change happens in one place. Raw --navy/--gold stay valid. ---- */ --brand-blue-traditional: #384a61; --brand-blue-deep: #242b42; --brand-gold-light: #f5c48a; --brand-gold-dark: #8c6145; --brand-gold-mid: #c09267; --brand-pink: #f0e8e0; --brand-stone: #707373; --pipe-blue: #2563eb; --pipe-purple: #7c3aed; /* fetch-425: pipeline stage colors tokenized (match cal-chip Tentative/Definite) */ --surface-nav: var(--brand-blue-traditional); --surface-nav-strong: var(--brand-blue-deep); --text-heading: var(--brand-blue-deep); --action-primary: var(--brand-blue-traditional); --focus-ring: #b57943; /* gold-forward, meets contrast on both pink page + white cards */ --to-taken: var(--brand-blue-traditional); --to-booked: var(--muted); --to-left: var(--hair); /* fetch-1312: the balance's bar is progressHTML, which draws taken / booked / left in exactly these three tokens - the key's swatches ride these aliases, so retune the meter and the aliases together or the key stops naming the bar */ /* fetch-673: time-off lifecycle. Built from existing tokens on purpose — a new hex here is a new literal to sweep later. Deliberately NOT the ok/warn/bad ramp: taken/booked/left are lifecycle, not status. */ /* fetch-496: --surface-card was REFERENCED 13 times and never DEFINED — every one of those rules has silently been running on its fallback since fetch-284, so a palette change would have missed all 13 card surfaces. Defining it costs one raw colour, and the stray fallback on .client-card below is dropped in the same change, so the debt ratchet nets zero. (The ratchet counts comment text too — it counted the example that used to sit in this sentence, which is how I found that out.) */ --surface-card: #fff; --control-height-sm: 32px; --control-height-md: 40px; --control-height-touch: 44px; --control-height-icon: 36px; /* fetch-1289: the icon button on a desktop (a phone takes --control-height-touch) */ } /* ---- fetch-284: GLOBAL KEYBOARD FOCUS (audit's most urgent a11y gap — the app had no :focus-visible system; only mouse users were served). :focus-visible fires for keyboard/AT navigation but NOT mouse clicks, so it adds a clear ring for keyboard users without putting outlines on every clicked button. Covers real controls + the many clickable containers. ---- */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 3px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [data-workspace]:focus-visible, [data-tab]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .cmd-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* command palette input: inset so the ring stays inside the modal edge */ /* ---- fetch-284: opt-in primitives — the common inline recipes as named classes. Pages adopt them as they're touched; nothing legacy is forced to change. ---- */ .notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-m); font-size: 13px; border-left: 3px solid var(--mute-fg); background: var(--wash); } .notice--ok { background: var(--ok-bg); color: var(--ok-fg); border-left-color: var(--ok-fg); } .notice--warn { background: var(--warn-bg); color: var(--warn-fg); border-left-color: var(--warn-fg); } .notice--bad { background: var(--bad-bg); color: var(--bad-fg); border-left-color: var(--bad-fg); } .notice--info { background: var(--info-bg); color: var(--info-fg); border-left-color: var(--info-fg); } /* ---- fetch-673: THE TIME-OFF BALANCE STRIP. One primitive, used wherever a time-off decision is made. Taken / booked / left are LIFECYCLE states, not status, so they get their own three colours and never the ok/warn/bad ramp — and every one is paired with a number, so the bar is a summary and never the record. `--` means NOT TRACKED, which is not zero: vacation is tracked for a list of people, and an allowance row is what puts someone on it. ---- */ .tob { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hair); } .tob-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-1); } .tob-head b { font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .tob-head em { font-style: normal; font-size: var(--t-sub); font-weight: 650; color: var(--navy); } .tob > .pg { margin-top: 0; } /* fetch-1312: the balance is progressHTML now; the strip's own padding spaces it */ .tob-key { display: flex; gap: var(--s-3); margin-top: var(--s-1); flex-wrap: wrap; } .tob-key span { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-sub); color: var(--navy); } .tob-key i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .tob-key .t { background: var(--to-taken); } .tob-key .b { background: var(--to-booked); } .tob-key .l { background: var(--to-left); border: 1px solid var(--line); } .tob-after { margin: var(--s-1) 0 0; font-size: var(--t-sub); line-height: 1.45; color: var(--navy); } /* ---- fetch-675 · the allowance screen. Same three-colour vocabulary as .tob above, deliberately: this is the screen where the number is SET and that is the screen where the number is READ, and two palettes for one fact would teach people the wrong thing. ---- */ .toa-t { width: 100%; border-collapse: collapse; } .toa-t th { text-align: left; font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; } .toa-t td { padding: var(--s-2); border-bottom: 1px solid var(--hair); font-size: var(--t-sub); color: var(--navy); vertical-align: middle; } .toa-t tr:last-child td { border-bottom: 0; } .toa-nm { font-weight: 650; } .toa-sub { display: block; color: var(--muted); font-size: var(--t-sub); overflow-wrap: anywhere; } .toa-n { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; } .toa-left-ok { color: var(--ok-fg); } .toa-left-warn { color: var(--warn-fg); } .toa-left-bad { color: var(--bad-fg); } .toa-unset { color: var(--warn-fg); font-weight: 650; } .toa-mini { display: block; width: 92px; } /* fetch-1312: holds the one meter's drawing (progressHTML o.bare) */ .toa-mini .dg-meter { margin-top: 0; } /* fetch-1336: HR's review flag, her listed dates, and the edit form's check box */ .toa-flag { display: block; margin-top: var(--s-1); color: var(--warn-fg); font-size: var(--t-sub); font-weight: 650; overflow-wrap: anywhere; } .toa-dates { margin-top: var(--s-1); font-size: var(--t-sub); color: var(--muted); } .toa-dates summary { cursor: pointer; } .toa-date { display: inline-block; margin: var(--s-1) var(--s-1) 0 0; padding: 0 var(--s-1); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--navy); font-variant-numeric: tabular-nums; } .toa-date-past { color: var(--muted); border-color: var(--hair); } .toa-chk { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-sub); color: var(--muted); font-weight: 700; min-height: 36px; } .my-toa { margin-bottom: var(--s-3); } .my-toa-h { font-weight: 700; margin-bottom: var(--s-2); } .my-toa-num { font-size: var(--t-body); margin-bottom: var(--s-1); font-variant-numeric: tabular-nums; } .my-toa-num strong { font-size: var(--t-section); } .my-toa-up { margin-top: var(--s-1); } .toa-empty { padding: var(--s-4) var(--s-2); text-align: center; color: var(--muted); font-size: var(--t-sub); line-height: 1.6; } .toa-form { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-end; } .toa-f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 128px; } .toa-f label { font-size: var(--t-sub); color: var(--muted); font-weight: 700; } .toa-wrap { overflow-x: auto; } /* ---- fetch-676 · SEVEN COLUMNS DO NOT FIT A PHONE. Measured at 390px on v5.326: the name cell ran to 85px (three lines), and BOTH the "Left" number and the Edit button sat off the right edge. .toa-wrap does scroll — but nothing says so, so the number people open this screen FOR reads as missing rather than as scrolled. Under 640px the table stops being a table: one stacked card per person, the four numbers as labelled pairs, then the bar, then Edit. Nothing off-screen, and the page still never scrolls sideways. The is visually hidden, NOT display:none — screen readers keep the column names. The edit row keeps its own rule below, because a colspan means nothing once cells are display:block and without it Save/Cancel would land in the wrong place. ---- */ @media (max-width: 640px) { .toa-wrap { overflow-x: visible; } .toa-t, .toa-t tbody, .toa-t tr, .toa-t td { display: block; width: 100%; } .toa-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .toa-t tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); } .toa-t tr:last-child { border-bottom: 0; } .toa-t td { border-bottom: 0; padding: 0; } .toa-t td[data-toal] { display: inline-flex; align-items: baseline; gap: var(--s-1); width: auto; margin: var(--s-2) var(--s-3) 0 0; } .toa-t td[data-toal]::before { content: attr(data-toal); font-size: var(--t-label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .toa-nm { font-size: var(--t-body); } .toa-mini { width: 100%; margin-top: var(--s-2); } .toa-t td:last-child { margin-top: var(--s-2); } .toa-t td:last-child .btn { width: 100%; } .toa-t td[colspan] { margin-top: var(--s-2); } /* the edit row: already a block, just space it */ .toa-t td:empty { display: none; } /* the spacer cell the edit row emits */ } /* fetch-994: guidance gets its own row; controls cannot squeeze it into a phone column. */ .toa-head-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "intro intro intro" "year search add"; align-items: end; gap: var(--s-3); margin-bottom: var(--s-3); } .toa-intro { grid-area: intro; min-width: 0; } .toa-year { grid-area: year; } .toa-search { grid-area: search; } .toa-head-row > .btn { grid-area: add; } .toa-head-row .toa-f { min-width: 0; } .toa-head-row .sel { width: 100%; min-width: 0; } .toa-head-row :is(.sel, .btn) { min-height: var(--control-height-touch); } .toa-hint { font-size: var(--t-sub); line-height: 1.5; } .toa-note { margin: var(--s-2) 0 0; font-size: var(--t-sub); } #toaUnset { min-height: var(--control-height-touch); margin-top: var(--s-2); } .toa-f-wide { flex: 1; min-width: 220px; } .toa-f-mid { flex: 1; min-width: 180px; } .toa-f-wider { flex: 2; min-width: 200px; } @media (max-width: 640px) { .toa-head-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "intro intro" "year search" "add add"; } .card .toa-t td { max-width: none; white-space: normal; } .card .toa-t td[data-toal] { white-space: nowrap; } .toa-t .btn { min-height: var(--control-height-touch); } .toa-nm { overflow-wrap: anywhere; } .toa-form { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .toa-form .toa-f { min-width: 0; } .toa-form :is(.sel, .btn) { width: 100%; min-width: 0; min-height: var(--control-height-touch); } } .tob-after b { font-weight: 650; } .tob-over { color: var(--bad-fg); font-weight: 700; } .tob .notice { margin: 0; } /* fetch-673: so the strip needs no inline margin */ .empty-state { text-align: center; padding: 34px 20px; max-width: 460px; margin: 0 auto; color: var(--muted); } .empty-state .es-emoji { font-size: 32px; margin-bottom: 8px; } .empty-state .es-title { font-size: 16px; font-weight: 600; color: var(--text-heading); margin-bottom: 5px; } .tnum { font-variant-numeric: tabular-nums; } /* money/time/counts — audit typography rec */ /* ---- fetch-285 (UI audit Phase 2): the shared page header. One place for every list/board page's title, context, and primary action — the audit's headline fix ("Calendar has almost no page-level identity"; "Insights stacks controls before the main heading"). Rendered in the shell so it lands on every eligible page at once; pages with their own hero (Home) or record title (details) opt out via the render gate. ---- */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); } .page-header .ph-titles { min-width: 0; } .page-header .ph-title { font-size: 22px; font-weight: 700; color: var(--text-heading); line-height: 1.15; letter-spacing: -0.01em; margin: 0; } /* fetch-441: now an

— reset the UA margin */ .page-header .ph-context { font-size: 12.5px; color: var(--text-secondary, #5f6872); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .page-header .ph-context .ph-dot { color: var(--line); } .page-header .ph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } @media (max-width: 640px) { .page-header .ph-title { font-size: 19px; } .page-header { margin-bottom: 11px; } } /* ---- fetch-288: Clients / CRM view ---- */ .client-list { display: flex; flex-direction: column; gap: 8px; } .client-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card); cursor: pointer; transition: .12s; } .client-card:hover { border-color: var(--brand-blue-traditional); box-shadow: 0 4px 14px rgba(36,43,66,.07); } .cl-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-nav); color: #fff; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-family: 'Cormorant Garamond', Georgia, serif; } .cl-name { font-weight: 700; font-size: var(--t-body); color: var(--text-heading); overflow-wrap: anywhere; } .cl-detail-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } #clientTitle { margin: 0; } .cl-choice { width: 100%; text-align: left; font: inherit; } .cl-choice .cl-line2, .cl-choice .cl-line3 { display: block; } /* fetch-1010: explain a contact-only Directory match without adding another card action. */ .cl-contact-match { display: grid; gap: var(--s-1); min-width: 0; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hair); overflow-wrap: anywhere; white-space: normal; font-size: var(--t-sub); line-height: 1.5; } .cl-contact-match-value { color: var(--text-heading); font-weight: 600; } .cl-contact-match-source { color: var(--muted); } @media (max-width: 640px) { .client-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; } .client-card.cl-choice { grid-template-columns: minmax(0, 1fr); } .client-card .cl-main { overflow-wrap: anywhere; } .client-card .cl-right { grid-column: 2; text-align: left; white-space: normal; } } .cl-event-row { display: flex; width: 100%; min-height: var(--control-height-touch); align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .cl-event-row:hover { background: var(--wash); } .cl-event-date { flex: 0 0 92px; font-size: var(--t-sub); } .cl-event-main { flex: 1; min-width: 0; overflow-wrap: anywhere; } .cl-event-meta { display: block; font-size: var(--t-sub); } .cl-event-quote { font-size: var(--t-sub); white-space: nowrap; } @media (max-width: 640px) { .btn[data-clientback], .btn.cl-tl-ev, #clientClearFilters { min-height: var(--control-height-touch); } .cl-event-row { flex-wrap: wrap; column-gap: var(--s-2); } .cl-event-date { flex-basis: 100%; } .cl-event-main { flex-basis: calc(100% - 6rem); } .cl-event-quote { margin-left: auto; } } .card .cl-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } /* fetch-915: the client profile - the timeline takes the width, What we know sits beside it; one column under 900px */ .cl-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: var(--s-3); align-items: start; margin-top: var(--s-3); } @media (max-width: 900px) { .cl-profile-grid { grid-template-columns: minmax(0, 1fr); } } .cl-tl-item { padding: var(--s-2) 0; border-top: 1px solid var(--hair); } .card-kicker + .cl-tl-item { border-top: 0; } .cl-tl-ev { margin-left: auto; } .cl-kpi { flex: 1 1 90px; min-width: 90px; background: var(--wash); border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; text-align: center; } .cl-kpi-v { font-size: 19px; font-weight: 700; color: var(--text-heading); } .cl-kpi-l { font-size: 11px; color: var(--text-secondary, #5f6872); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; } /* fetch-1002: relationship profile — upcoming work first, contacts beside events, then a readable communication history. Record scope keeps the list and sales dock intact. */ .cl-record { min-width: 0; } .cl-record .cl-record-header { align-items: flex-start; gap: var(--s-3); margin: 0 0 var(--s-3); padding-bottom: var(--s-3); } .cl-record-header .ph-titles { flex: 1 1 18rem; } .cl-record .cl-record-header .ph-title { font-size: var(--t-title); line-height: 1.25; overflow-wrap: anywhere; } .cl-record .cl-record-header .ph-context { font-size: var(--t-sub); line-height: 1.5; overflow-wrap: anywhere; } .cl-record .btn { min-height: var(--control-height-touch); min-width: var(--control-height-touch); max-width: 100%; white-space: normal; font-size: var(--t-sub); line-height: 1.4; } .cl-record .cl-section-nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); } .cl-record .cl-section-nav button { min-height: var(--control-height-touch); padding: var(--s-2) var(--s-1); border: 0; border-radius: var(--r-s); background: transparent; color: var(--navy); font: inherit; font-size: var(--t-sub); font-weight: 600; cursor: pointer; } .cl-record .cl-section-nav button:hover { background: var(--wash); } .cl-record .cl-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); } .cl-record .cl-next-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; margin: 0; padding: var(--s-4); } .cl-record .cl-next-card p { margin: 0; font-size: var(--t-body); line-height: 1.5; overflow-wrap: anywhere; } .cl-record .cl-next-card .btn { margin-top: auto; } .cl-record .cl-next-card .cl-next-title { color: var(--text-heading); font-size: var(--t-section); font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; } .cl-record .cl-next-card .cl-next-meta { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; font-variant-numeric: tabular-nums; } .cl-record .cl-record-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); grid-template-areas: "events contacts" "activity facts"; gap: var(--s-4); align-items: start; } .cl-record-layout > .card { min-width: 0; margin: 0; padding: var(--s-5); } .cl-record .cl-events { grid-area: events; } .cl-record .cl-contacts { grid-area: contacts; } .cl-record .cl-timeline { grid-area: activity; } .cl-record .cl-facts { grid-area: facts; } .cl-record section[id] { scroll-margin-top: var(--s-5); } .cl-record .cl-section-title { margin: 0; color: var(--text-heading); font: 650 var(--t-section)/1.35 Inter, sans-serif; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; } .cl-record .cl-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); } .cl-record .cl-section-head > :not(h2) { color: var(--muted); font-size: var(--t-sub); line-height: 1.5; font-variant-numeric: tabular-nums; } .cl-record .cl-event-group + .cl-event-group { margin-top: var(--s-5); } .cl-record .cl-event-group h3 { margin: 0 0 var(--s-2); color: var(--text-heading); font: 600 var(--t-body)/1.5 Inter, sans-serif; } .cl-record .cl-event-row { padding: var(--s-3) var(--s-1); border-radius: var(--r-s); font-size: var(--t-body); line-height: 1.5; } .cl-record .cl-event-row:last-child { border-bottom: 0; } .cl-record .cl-event-date, .cl-record .cl-event-quote { font-variant-numeric: tabular-nums; } .cl-record .cl-event-meta { margin-top: var(--s-1); line-height: 1.5; } .cl-record .cl-quote-note { display: block; margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--t-sub); line-height: 1.5; } .cl-record .cl-detail-grid { gap: 0; } .cl-record .cl-contact { min-width: 0; padding: var(--s-4) 0; border-top: 1px solid var(--hair); overflow-wrap: anywhere; } .cl-record .cl-contact:last-child { padding-bottom: 0; } .cl-record .cl-contact > strong { display: block; color: var(--text-heading); font-size: var(--t-body); line-height: 1.5; } .cl-record .cl-contact-lines { display: grid; gap: var(--s-1); margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sub); line-height: 1.6; } .cl-record .cl-contact-lines p { margin: 0; } .cl-record .cl-contact-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } .cl-record .cl-contact-actions a { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; } .cl-record .cl-contact-source { display: block; margin-top: var(--s-2); text-align: left; overflow-wrap: anywhere; } .cl-record .cl-activity-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: end; margin-bottom: var(--s-4); } .cl-record .cl-filter-field, .cl-portal-invite--page .cl-filter-field, .pdx-draft .cl-filter-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; color: var(--text-heading); font-size: var(--t-sub); font-weight: 600; line-height: 1.5; } .cl-record .cl-filter-field :is(input, select), .cl-portal-invite--page .cl-filter-field :is(input, select), .pdx-draft .cl-filter-field :is(input, select) { width: 100%; min-width: 0; min-height: var(--control-height-touch); height: auto; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--ink); font: inherit; font-size: var(--t-body); font-weight: 400; } .cl-record .cl-tl-item { padding: var(--s-4) 0; } .cl-record .cl-tl-item .row { flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); } .cl-record .cl-sum { font-size: var(--t-body); line-height: 1.6; overflow-wrap: anywhere; } .cl-record .cl-activity-meta { display: block; margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--t-sub); line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .cl-record .cl-activity-notes { margin: var(--s-2) 0 0; font-size: var(--t-body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } /* fetch-1008: capture outreach beside its relationship history. */ .cl-record #clientOutreachOpen { color: var(--action-primary); } .cl-record .cl-outreach-form { margin: var(--s-3) 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); } .cl-record .cl-outreach-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .cl-record .cl-outreach-fields:has(#clientOutreachDate) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-record .cl-outreach-note { grid-column: 1 / -1; } .cl-record .cl-outreach-form textarea { width: 100%; min-width: 0; min-height: 7rem; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-card); color: var(--ink); font: inherit; font-size: var(--t-body); font-weight: 400; line-height: 1.5; resize: vertical; } .cl-record #clientOutreachEffect { margin: var(--s-3) 0; line-height: 1.6; overflow-wrap: anywhere; } .cl-record #clientOutreachError { margin: var(--s-3) 0; overflow-wrap: anywhere; } .cl-record .cl-outreach-actions, .cl-portal-invite--page .cl-outreach-actions, .pdx-draft .cl-outreach-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .cl-record .cl-tl-ev { flex: 0 1 auto; overflow-wrap: anywhere; } .cl-record .cl-section-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hair); } /* fetch-1096: the Customer portal card on a client profile - the client record, its event links and its logins */ .cl-record .cl-portal { margin: 0 0 var(--s-4); padding: var(--s-5); } .cl-portal-record + .cl-portal-record { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); } .cl-portal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); } .cl-portal-head strong { display: block; color: var(--text-heading); font-size: var(--t-body); line-height: 1.5; } .cl-portal-h { margin: var(--s-4) 0 var(--s-2); color: var(--text-heading); font-size: var(--t-sub); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .cl-portal-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--hair); } .cl-portal-main { display: grid; flex: 1 1 14rem; gap: var(--s-1); min-width: 0; overflow-wrap: anywhere; } .cl-portal-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); } .cl-portal .btn { min-height: var(--control-height-touch); } .cl-portal-link, .cl-portal-invite, .cl-portal-close { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--wash); } .cl-portal-close { flex-basis: 100%; } .cl-portal-consequence { margin: 0; color: var(--ink); font-size: var(--t-body); line-height: 1.5; } .cl-portal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); } @media (max-width: 640px) { .cl-record .cl-portal { padding: var(--s-4); } .cl-portal-fields { grid-template-columns: minmax(0, 1fr); } .cl-portal-actions .btn, .cl-portal-row > .btn, .cl-portal .cl-outreach-actions .btn { flex: 1 1 8rem; } .cl-docs .cl-portal-actions:has(.btn + .btn) { flex-basis: 100%; } /* fetch-1154: two presses take their own line, side by side, instead of stacking in the sliver beside the badge */ } @media print { .cl-record .cl-portal-link, .cl-record .cl-portal-invite, .cl-record .cl-portal-close, .cl-record .cl-portal .btn { display: none !important; } } .cl-record .pdx-prop { padding: var(--s-3) 0; } .cl-record .pdx-prop-l { font-size: var(--t-sub); line-height: 1.5; text-transform: none; letter-spacing: normal; } .cl-record .pdx-prop-v { margin-top: var(--s-1); font-size: var(--t-body); line-height: 1.5; font-variant-numeric: tabular-nums; } .cl-record .empty-state { width: 100%; padding: var(--s-4) var(--s-2); font-size: var(--t-sub); line-height: 1.6; } .cl-record .empty-state .es-title { font-size: var(--t-body); } @media (max-width: 1024px) { .cl-record .cl-record-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "events" "contacts" "activity" "facts"; } } @media (max-width: 640px) { .cl-record .cl-record-header { flex-direction: column; } .cl-record-header .ph-titles { flex-basis: auto; width: 100%; } .cl-record .cl-section-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); } .cl-record .cl-section-nav button { text-align: left; } .cl-record .cl-next-grid { grid-template-columns: minmax(0, 1fr); } .cl-record-layout > .card { padding: var(--s-4); } .cl-record .cl-activity-filters { grid-template-columns: minmax(0, 1fr); } .cl-record .cl-filter-field :is(input, select) { font-size: max(var(--t-body), 1rem); } .cl-record .cl-outreach-fields:has(#clientOutreachDate) { grid-template-columns: minmax(0, 1fr); } .cl-record .cl-outreach-form textarea { font-size: max(var(--t-body), 1rem); } .cl-record .cl-outreach-actions .btn { flex: 1 1 7rem; } .cl-record .cl-tl-ev { margin-left: 0; } .cl-record .cl-contact-actions .btn { flex: 1 1 5rem; } .cl-record .cl-event-main { flex-basis: 100%; } .cl-record .cl-event-quote { margin-left: 0; } .cl-record .cl-section-footer .btn { flex: 1 1 10rem; } } @media print { .cl-record .cl-section-nav, .cl-record .cl-activity-filters, .cl-record .cl-section-footer, .cl-record-header .ph-actions, .cl-record .cl-contact-actions { display: none !important; } .cl-record .cl-outreach-form, .cl-record #clientOutreachOpen, .cl-record #clientOutreachState button { display: none !important; } .cl-record .cl-next-grid, .cl-record .cl-record-layout { display: block; } .cl-record .cl-next-card, .cl-record-layout > .card { margin-bottom: var(--s-4); padding: var(--s-3); box-shadow: none; } .cl-record .cl-next-card, .cl-record .cl-contact, .cl-record .cl-tl-item, .cl-record .cl-event-row, .cl-record .pdx-prop { break-inside: avoid; } .cl-record .cl-section-title, .cl-record .cl-event-group h3 { break-after: avoid; } } * { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* fetch-454 (Jacki's phone screenshot): iOS Safari font-boosting inflated table text into overlapping chaos — q.html already had this guard, the portal didn't */ /* fetch-818 (page-header Phase 1): form controls do not inherit font-family — that is the UA stylesheet, not a bug here — and .btn never set one, so every button, input, select and textarea in the portal rendered in the browser's default UI font while the body text beside it was Inter. Eighteen individual controls in this file already carry `font-family: inherit` as one-off hand-fixes; this is the reset that made all of them unnecessary. Element-level specificity, declared early, so every existing class rule still wins. */ button, input, select, textarea, optgroup { font-family: inherit; } .wrap { max-width: none; margin: 0 auto; padding: 0 22px 60px; } /* fetch-139: full-screen like Reserve — was capped at 900px */ @media (min-width: 2000px) { .wrap { max-width: var(--w-wide); } } /* don't go silly on ultrawides */ .wrap.w-narrow { max-width: var(--w-narrow); } /* fetch-140: reading/form pages keep a comfortable centered column */ .wrap.w-mid { max-width: var(--w-mid); } /* fetch-145 (audit fix №3): documents-with-chrome — event detail, BEO editor, prep, invoices */ .brandbar { background: #242b42; margin: 0 -22px 0; padding: 8px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #f5c48a, #8c6145) 1; } .brandlogo { height: 34px; width: auto; display: block; } /* fetch-200: real logo in the brandbar · fetch-491: 42→34, the bar earns its height by carrying the workspace now */ /* fetch-491 (Jack): "the Crystal brand Bar is taking up too much space by itself - the department drop down tab has room to live in there as well". Measured at 390px: the bar was 72.7px carrying a 42px logo and a logout button, and its content already ran 356px wide in a 350px box — so the chip only fits if the mark gives up room. */ .ws-slot { display: flex; align-items: center; min-width: 0; } .wordmark { display: flex; flex-direction: column; line-height: 1; } .wm-crystal { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 27px; letter-spacing: 7px; background: linear-gradient(100deg, #f5c48a 10%, #8c6145 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .wm-sub { font-size: 8.5px; letter-spacing: 4.2px; color: #fff; margin: 3px 0 0 2px; font-weight: 600; } /* fetch-514 — THE ACCOUNT MENU (brand bar). Gold as jewelry, not paint. Signature Gold (mid) as a FILL on the deep-blue bar reads brown — mid-gold and deep blue sit too close in luminance. The bar's own bottom border already solves this: it runs Signature Gold light → dark. So the account control uses the LIGHT end as a hairline + text, which is unmistakably gold on navy, and keeps Log out from being the loudest thing in the header. */ .acct { position: relative; display: inline-flex; } .brandbar .acct-btn { background: transparent; border: 1px solid var(--brand-gold-mid); color: var(--brand-gold-light); font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-height-sm); } .brandbar .acct-btn:hover { background: rgba(245,196,138,.12); border-color: var(--brand-gold-light); color: var(--brand-gold-light); } .brandbar .acct-btn[aria-expanded="true"] { background: rgba(245,196,138,.16); border-color: var(--brand-gold-light); } .acct-caret { font-size: var(--t-sub); opacity: .75; } .acct-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 232px; background: var(--surface-card, White); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 10px 28px rgba(36,43,66,.22); padding: var(--s-1); } .acct-who { padding: 8px 10px 6px; font-size: var(--t-sub); color: var(--muted); overflow-wrap: anywhere; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .acct-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; min-height: var(--control-height-md); } .acct-item:hover { background: var(--wash); } .acct-sep { height: 1px; background: var(--line); margin: 4px 2px; } .acct-out { color: var(--bad-fg); font-weight: 600; } /* fetch-515 — PHONE: the tab row folds into the menu; the chip becomes ☰. Both glyphs are always in the DOM and CSS picks one, so rotating the phone needs no re-render. Desktop is untouched: tab row visible, chip shows initials, and the menu's tab section is hidden (it is still rendered, just not shown). */ /* fetch-516 (Jack): "my desktop view still has the initials as the drop down tab - i want the 3 lines there". ☰ everywhere — one control, one meaning, on every screen size. */ .acct-burger { display: inline-block; font-size: var(--t-section); line-height: 1; } .acct-init { display: none; } .acct-sec { padding: 6px 10px 4px; font-size: var(--t-sub); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .acct-tab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .acct-tab.on { font-weight: 700; background: var(--wash); } .acct-check { color: var(--brand-gold-dark); font-weight: 700; } #acctTabs { display: none; } @media (max-width: 640px) { #tabSlot { display: none; } /* the row folds away — 44px back on every screen */ #acctTabs { display: block; } .acct-menu { min-width: 244px; max-height: 74vh; overflow-y: auto; } } @media (min-width: 641px) and (max-width: 900px) { .acct { display: none; } } /* fetch-936: in the tablet band the tab row is on screen and the bottom bar holds the account rows, so the ☰ would open an empty card */ .brandbar .titles .tagline { color: #c8d4e4; font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; margin-left: 6px; } .brandbar .titles .wm-diamond { background: linear-gradient(100deg, #f5c48a, #8c6145); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 9px; } @media (max-width: 560px) { .brandbar .titles { display: none; } } /* v1.8 (Jack): loans on the phone — rows wrap instead of jamming, buttons get real tap targets */ @media (max-width: 640px) { .loan-card .row { flex-wrap: wrap; } .loan-card .row > div:last-child { justify-content: flex-start; width: 100%; } .loan-card .btn { padding: 8px 12px; } } /* ---- v1.9 (Jack): PHONE HARDENING PASS ----------------------------------------------- Global net against unwrapped text + sideways scroll on small screens. Desktop untouched (everything lives behind the max-width guard). The page-by-page polish list is in the PHONE TARGETS project doc — Jack walks each page on his phone, we fix what the net misses. */ @media (max-width: 640px) { html, body { overflow-x: hidden; } .row { flex-wrap: wrap; } .row > div, .grid > div, .brief-card > *, .attn-row > div { min-width: 0; } .card, .brief-card, .attn-block, .brief-item { overflow-wrap: break-word; word-break: break-word; } .bi-title, .bi-sub, .be-name, .be-meta, .attn-row strong { overflow-wrap: anywhere; } /* v2.0 (Jack's phone screenshots): tables SCROLL SIDEWAYS with readable cells — the v1.9 word-break was crushing columns into one-letter-per-line stacks and splitting dollar amounts mid-number. Cells never break words; the whole table pans instead. */ .card table, .beo2 table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .card table th, .card table td, .beo2 table th, .beo2 table td { word-break: normal; overflow-wrap: normal; white-space: nowrap; } .card table td { max-width: 260px; } .rpt-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rpt-tbl th, .rpt-tbl td { word-break: normal; overflow-wrap: normal; white-space: nowrap; } input, select, textarea { font-size: 16px; } /* stops the iOS zoom-on-focus jump */ /* fetch-614 (Jack: "Can we eliminate being able to pinch and zoom (or the reason we need to) on the phone? It bugs me on almost every page"). THE RULE ABOVE HAS BEEN LOSING. iOS Safari zooms the page whenever you focus a control whose computed font-size is under 16px, and `input` alone is specificity (0,0,1) — every component rule that sets its own size beats it. Sixteen of them did, including .field input/select/textarea, which is the form primitive used on nearly every screen. So the fix was there and it was overridden almost everywhere: tap a field, the page jumps, pinch back out. That is the "almost every page" part, and it is not a per-screen bug. Three :not()s carry this to (0,3,1), which outranks every class-level rule in the file. #pSearch is named because an id beats any number of them. Checkboxes and radios are excluded — they have no text and iOS never zooms for them. NOT doing user-scalable=no: iOS has ignored it since iOS 10, and taking zoom away from someone who needs it is a WCAG failure. Remove the reason, keep the ability. tests/phone-zoom.mjs is the gate that keeps this from rotting a seventeenth time. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select:not([multiple]):not([size]):not([hidden]), textarea:not([hidden]):not([disabled]):not([aria-hidden="true"]), input#pSearch { font-size: 16px; } .grid { grid-template-columns: 1fr; } .brief-cols { grid-template-columns: 1fr; } .attn-grid { grid-template-columns: 1fr; } .spend-cols { grid-template-columns: 1fr; } .btn { padding: 8px 12px; } /* real tap targets everywhere */ img, canvas, svg { max-width: 100%; height: auto; } /* v2.1: asset QR / photos never widen the page */ } /* Cormorant renders lighter/smaller than Georgia — compensate on display elements */ .brief-hello { font-size: 26px; font-weight: 600; } .dash-section-title { font-weight: 700; } .qv-title, .wiki-card-title, .be-title { font-weight: 700; } .headwrap { padding-top: 18px; } h1 { font-size: 20px; margin: 0 0 2px; } h1, h2, .empty-state .es-title { text-wrap: balance; } /* fetch-431 (Taste polish): no orphaned words in headings; harmless where nowrap governs */ .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; } .tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; } .tabbtn { padding: 8px 14px; font-size: 14px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } .tabbtn.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 600; } /* fetch-497 — the tab row moves into the brand bar and SCROLLS instead of wrapping. The wrap was a real bug, not just a preference: between 721px and ~900px the row broke onto two lines and a TABLET carried more chrome (160px) than a phone did. nowrap + overflow-x kills that at every width, which is why this rule is not inside a query. */ .tabslot { flex: 1 1 auto; min-width: 0; /* a scrolling strip with a hard edge reads as a truncated word, not as "there is more this way". The fade is the only affordance a scroller gets on a trackpad, where no scrollbar ever appears. Keywords not literals — the debt ratchet counts raw colours. */ -webkit-mask-image: linear-gradient(to right, Black calc(100% - 22px), transparent); mask-image: linear-gradient(to right, Black calc(100% - 22px), transparent); } .tabslot .tabbar { border-bottom: 0; margin: 0; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabslot .tabbar::-webkit-scrollbar { display: none; } .tabslot .tabbtn { flex: 0 0 auto; white-space: nowrap; color: var(--brand-pink); padding: 7px 12px; border-bottom: 2px solid transparent; border-radius: var(--r-s) var(--r-s) 0 0; } .tabslot .tabbtn:hover { color: White; background: rgba(255, 255, 255, .07); } .tabslot .tabbtn.active { color: White; border-bottom-color: var(--brand-gold-light); font-weight: 600; } /* keyword, not a literal — the debt ratchet counts raw colours and this screen adds none */ /* phone: the bar wraps and the strip takes its own full-width line — same two rows as before, but both navy, and the pink toolbar row above the content is gone. Squeezing tabs beside the chip on a 390px screen would leave them ~80px of runway, which is worse than the full-width scroller they have today. */ @media (max-width: 720px) { .brandbar { flex-wrap: wrap; row-gap: 2px; padding-bottom: 0; } .tabslot { order: 3; flex-basis: 100%; margin: 0 -20px; padding: 0 20px; } .tabslot .tabbtn { padding: 12px 14px; min-height: 44px; } } /* ---- Workspace nav (fetch-68) ---- */ .wsbar { display: flex; gap: 3px; flex-wrap: wrap; margin: 4px 0 12px; background: var(--navy); border-radius: 11px; padding: 5px; } /* fetch-490: the workspace row collapses into a chip on the tab row. Measured at a true 390px with the mobile rules live: brandbar 72.7 + wsbar 54 (+16 margins) + tabbar 45.1 (+16) = 221.8px of chrome above content, 26% of an 844px phone. The wsbar row is the 70px that leaves. */ /* fetch-1067: department identity is plain text. Navigation lives in the rail and bottom bar. */ .wschip { display: inline-flex; align-items: center; min-height: var(--control-height-touch); color: var(--brand-pink); font-size: var(--t-section); font-weight: 600; line-height: 1.2; white-space: nowrap; } .ws-slot { gap: var(--s-2); } /* Contextual history remains available on phones and installed apps without a browser Back. */ .af-backrow { max-width: 640px; margin: 10px auto 0; } /* fetch-550: the recap/QR page's Back-to-portal row (logged-in devices only) */ .wsback { display: none; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--s-1); min-width: var(--control-height-touch); height: var(--control-height-touch); padding: 0 var(--s-1); border: 0; border-radius: var(--r-s); background: transparent; color: var(--brand-gold-light); font-family: inherit; cursor: pointer; } .wsback:hover, .wsback:active { background: rgba(245, 196, 138, .12); } .wsback .wsback-a { font-size: var(--t-section); line-height: 1; } .wsback .wsback-t { font-size: var(--t-sub); font-weight: 600; } @media (max-width: 359px) { .wsback .wsback-t { display: none; } } @media (max-width: 640px) { .wsback { display: inline-flex; } } /* fetch-526 — THE INSTALLED APP, AT ANY WIDTH. manifest.json is display:"standalone", so a portal added to a home screen or installed on a desktop runs in a window with NO browser back button. fetch-526 retires the in-page "← Back to …" buttons at every width on the strength of the browser's own control — which is precisely the control a standalone window does not have. Hiding them there and showing nothing would strand somebody on a detail page, so the chip appears instead. Measured, not assumed: manifest.json line 7. */ @media (display-mode: standalone) { .wsback { display: inline-flex; } } /* ...and the same answer as a CLASS, because the media query alone is not testable here. Playwright in this sandbox cannot emulate display-mode (CDP reports false, and headless Chromium ignores --app), so a rule that only exists inside that media query can be read but never PROVEN. body.is-standalone is set from the same signal in render(), plus navigator.standalone for an iOS home-screen portal, and probe526c asserts the chip actually appears at 1440px with the class on. Belt and braces, one of which has a gate. */ body.is-standalone .wsback { display: inline-flex; } /* fetch-879 — THE CRYSTAL RAIL (Direction A, ruled 09-01: "A now + B later"). Desktop-only: every rule lives behind ≥901px, so phone and tablet pay no inset and keep today's chrome. Spec: docs/sidebar-nav/BUILD-TICKET.md · ratified look: docs/sidebar-nav/mockup-A-the-rail.html. Grammar: fill/edge-bar = place (this rail), underline = view (the tab row) — never traded. */ /* fetch-932 — DIRECTION B, THE PHONE/TABLET BOTTOM BAR (Jack's 09-01 "A now + B later", built 09-04 when retiring Crystal Core made it a blocker: below 901px there was NO department switcher except the Crystal chip → Core, measured at zero visible workspace controls across six access tiers and every width from 360 to 900px). Same markup, two orientations. railHTML() has no width guard, so these buttons already shipped to the phone DOM and were hidden by `display:none` alone — this reveals them horizontally instead of drawing a second component. SEVEN slots is the ceiling: at 320px seven are 45.7px against the 44px touch minimum, eight would be 40px, and the desktop's nine would be 43px — already broken. So the three utility slots stay hidden here and fold into the .rail-more overflow. */ .cse-rail { display: none; } @media (max-width: 900px) { /* GRID, not flex. With `flex: 1 1 0` on all seven the overflow still came out 8px narrower than the six departments (measured 38.9 vs 46.9 at 320px) — flex was resolving their content differently. `grid-auto-columns: 1fr` makes every track identical no matter how many slots the viewer's permissions produce, which is the property that matters here. */ .cse-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 0; padding: 0; background: var(--brand-blue-deep); border-top: 1px solid rgba(245, 196, 138, .14); padding-bottom: env(safe-area-inset-bottom, 0px); } /* the iOS home indicator sits under the bar, not over the last row of it */ /* the vertical rail's furniture has no meaning on a horizontal bar */ .cse-rail .rail-sep, .cse-rail .rail-gap, .cse-rail .rail-tip { display: none; } /* .rail-slot, NOT bare [data-workspace]: the overflow's menu items carry data-workspace too (so the rail's one binder wires them), and a bare attribute selector hid them as well — the menu measured 14px tall with nothing in it. */ .cse-rail .rail-slot[data-workspace="wiki"], .cse-rail .rail-slot[data-workspace="admin"], .cse-rail .rail-slot[data-workspace="notes"] { display: none; } /* they ride the overflow here */ /* every rule below restates what the ≥901px block declares, because that block does not apply here and a