/* ========================================================================== RT — SHARED COMPONENT LAYER (batch 2 of the app-wide RT rollout, 2026-08-17) -------------------------------------------------------------------------- Source of truth for tokens : Design Reference/rt-design-system/tokens.json Token layer : static/css/rt-dashboard.css Loaded : globally, from templates/layouts/base.html, immediately after rt-dashboard.css. WHAT THIS FILE IS FOR Batch 1 made RT the app-wide default. Because the RT tokens are declared on body[data-ds="rt"] and every page is now that, the 29 screens that had never been migrated INHERITED the RT look for free — measured in a real browser: 6px radii, coral primary buttons, neutral table heads, flat bordered toolbars. So this file is deliberately NOT a restyle. It fixes the four RULE-LEVEL defects that tokens cannot express, each measured before it was touched, and each living in a component shared by all 19 master screens: 1 .master-page capped at 1280px -> a 180px dead right gutter at 1880px 2 .master-table-wrap still floating on a two-layer shadow with no border 3 the empty state rendered 1886px wide inside a 1280px scroll viewport, so "No employees yet" sat off-screen 4 every shared control below the 40px tap floor at 390px WHY A SEPARATE FILE AND NOT JUST main.css The canonical values ARE also corrected in main.css — this file does not fight it, it agrees with it. It exists because main.css is ~108KB and months old, so browsers hold it, and a stale cached copy has already shipped a visible defect to this user once (see the collectstatic/cached-CSS note in project memory). A brand-new filename has no cache entry and loads immediately, so the fixes land even on a stale main.css. Duplicating fifteen declarations is the right trade against that. SCOPE Everything is under body[data-ds="rt"], which is every page. Keeping the scope makes the file consistent with the other rt-*.css files and keeps it removable in one edit. ========================================================================== */ /* ========================================================================== 1 · PAGE WRAPPER — no dead gutters on a wide monitor -------------------------------------------------------------------------- .master-page was `max-width: 1280px; margin: 0 auto`. On a 1880px window the content body is 1640px wide, so the page centred at 1280 and left a MEASURED 180px dead band down each side while the table inside it was horizontally scrolling. The RT screen wrappers were fixed the same way on 2026-08-01 (.pd-wrap: padding 0, max-width 1920px) and this is the same fix arriving at the master screens, exactly as the rollout note predicted it would need to. Horizontal padding stays 0: .content-body already supplies 24px 32px, and adding more here is what produced the doubled-padding band on the dashboard. ========================================================================== */ body[data-ds="rt"] .master-page { max-width: 1920px; padding: 0 0 var(--space-4); margin: 0 auto; } /* Both hub screens (Settings and Reports) use .settings-page, NOT .master-page, so the rule above misses them entirely. There is no .reports-page class — assuming one is the easy mistake here. */ body[data-ds="rt"] .settings-page { max-width: 1920px; } /* A fixed three-column grid at 1920px stretches each tile to ~620px, which leaves the icon and two lines of copy adrift in a very wide box. auto-fit keeps the tile size honest and fills the row — the same reason the dashboard attention feed uses auto-fit rather than a hard column count. */ body[data-ds="rt"] .settings-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } /* ========================================================================== 2 · TABLE SHELL — the border carries the edge, not a shadow -------------------------------------------------------------------------- main.css says, in a comment, "Border removed — the soft shadow now defines the edge (floats on the wash)". That is the Notion Calendar reading. RT is the opposite: a 1px border defines the edge and elevation nearly vanishes. The visible symptom was a flat bordered .master-toolbar sitting directly above a table card floating on a two-layer shadow — two systems, 8px apart. RT also has no 12px radius anywhere, so --radius-lg resolves to 6px through the token layer; it is named rather than hardcoded so it tracks the tokens. ========================================================================== */ body[data-ds="rt"] .master-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); box-shadow: none; } /* The scroll-affordance fade on a wide table has to sit on the surface it fades, or it shows as a grey smear over the border. */ body[data-ds="rt"] .master-table-wrap--scrollable::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-background) 78%); } /* Table head: neutral fill, hairline rule, no uppercase (see the no-ALL-CAPS rule). Restated here because a stale main.css is the cache risk this file exists to cover. */ body[data-ds="rt"] .master-table thead th { background: var(--color-surface-secondary); color: var(--color-text-secondary); text-transform: none; border-bottom: 1px solid var(--color-border); } /* ========================================================================== 3 · EMPTY STATE — must not be pushed off the side of a wide table -------------------------------------------------------------------------- THE DEFECT, measured on Employee Master with zero employees: .master-table--wide min-width: 1800px -> table renders 1886px .master-empty-cell colspan across it -> empty state 1886px wide .master-table-wrap clientWidth 1280px -> visible viewport The empty state centres itself in 1886px, so its icon and both lines of copy sit at ~943px — beyond the 1280px the user can see. The message that tells a new user how to create their first record was only readable after scrolling right. It bites every wide master table in its zero-row state, which is exactly the state a first-time user is in. THE FIX A table with no rows has nothing to lay out, so it does not need the 1800px floor. :has() lets that be expressed in CSS with no template edit across 19 files and no JS. Where :has() is unsupported the rule simply does not apply and the behaviour is today's, so this degrades rather than breaks. .master-table--wide also sets `max-width: 180px; overflow: hidden; white-space: nowrap` on EVERY td. The empty cell is a td, so those have to be undone explicitly or the fix above just produces a 180px-wide clipped message instead of an off-screen one. ========================================================================== */ body[data-ds="rt"] .master-table:has(.master-empty-cell) { min-width: 0; width: 100%; /* table-layout:fixed is load-bearing, not tidiness. With `auto`, the table still cannot shrink below the MIN-CONTENT width of its 14 header cells — about 1000px — so at 390px the wrap kept scrolling and the empty message centred itself off-screen all over again. Dropping min-width alone fixed the 1880px case and left the phone case broken, which is precisely why this was measured at both widths and not just the one. */ table-layout: fixed; } /* A column header row with no rows under it is noise, and it is also the only thing forcing the table wider than the viewport in the empty state. Hiding it lets the empty message occupy the full visible width at every size, which is how every other RT empty state in the app already reads. */ body[data-ds="rt"] .master-table:has(.master-empty-cell) thead { display: none; } body[data-ds="rt"] .master-table--wide td.master-empty-cell, body[data-ds="rt"] .master-table td.master-empty-cell { max-width: none; overflow: visible; white-space: normal; } body[data-ds="rt"] .master-empty-state { max-width: 520px; margin-left: auto; margin-right: auto; } body[data-ds="rt"] .master-empty-title { color: var(--color-text-primary); } body[data-ds="rt"] .master-empty-desc { color: var(--color-text-muted); white-space: normal; } body[data-ds="rt"] .master-empty-icon { background: var(--color-surface-secondary); border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-lg); } /* ========================================================================== 4 · THE 40px TAP FLOOR — declared ONCE, for every screen in the app -------------------------------------------------------------------------- This is the part that stops being copied per screen. Every RT screen so far has carried its own copy of this block, because the shared controls live outside any screen's namespace: .theme-btn and .hamburger-btn are in the app chrome, .ch-btn / .ch-cycle are in the shared header, .ms-filter-* is the shared multi-select, .btn is the shared button, .modal-* is the shared dialog. Every one of them has been missed by at least one screen's block, and the executive screens shipped without one for six days. Now that RT is the only system there is no reason for that list to live anywhere but here, once. MEASURED at 390px on the master screens before writing this (with offsetHeight — getBoundingClientRect returns the TRANSFORMED box, and closed menus and modals carry a scale(), which has sent three builds chasing a ghost 38px): .btn 26-28 .btn-sm 26-28 .master-page-size 26 .theme-btn 32 .ch-btn 32 .master-dropdown-item 32/36 .master-action-btn 30 .master-search-input 34 .ms-filter-btn 34 .ms-filter-item 34 .hamburger-btn 36 The per-screen copies in the rt-*.css files are now redundant. They are left in place: they set the same 40px and their probes assert them, so removing them is churn with a test cost and no user-visible effect. min-height on an inline element does nothing, so anything that is a or an without a display gets one here. ========================================================================== */ @media (max-width: 900px) { /* Shared buttons and the shared dialog. */ body[data-ds="rt"] .btn, body[data-ds="rt"] .btn-sm, body[data-ds="rt"] .btn-primary, body[data-ds="rt"] .btn-secondary, body[data-ds="rt"] .btn-ghost { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } body[data-ds="rt"] .modal-close-btn { min-width: 40px; min-height: 40px; } /* App chrome. .hamburger-btn lives in .mobile-header, a SIBLING of .content-header — scoping it under a header class silently misses it. */ body[data-ds="rt"] .theme-btn { width: 40px; height: 40px; } body[data-ds="rt"] .hamburger-btn, body[data-ds="rt"] .hamburger { width: 40px; height: 40px; } body[data-ds="rt"] .ch-btn, body[data-ds="rt"] .ch-cycle { min-height: 40px; height: 40px; } /* Shared multi-select filter. */ body[data-ds="rt"] .ms-filter-btn { min-height: 40px; height: auto; } body[data-ds="rt"] .ms-filter-item { min-height: 40px; display: flex; align-items: center; } body[data-ds="rt"] .ms-filter-clear { min-height: 40px; } /* Master-screen controls. */ body[data-ds="rt"] .master-search-input { height: 40px; } body[data-ds="rt"] .master-page-size { min-height: 40px; height: 40px; } body[data-ds="rt"] .master-action-btn { min-width: 40px; min-height: 40px; height: 40px; } body[data-ds="rt"] .master-dropdown-item { min-height: 40px; display: flex; align-items: center; } body[data-ds="rt"] .master-filter-select { min-height: 40px; } body[data-ds="rt"] .master-pagination-nav .btn { min-height: 40px; min-width: 40px; } /* The toolbar stacks rather than squeezing four filters and three actions into 390px. The search box takes the full first row: it is the control people reach for first, and at a shared row width it was 90px wide. */ body[data-ds="rt"] .master-toolbar { flex-wrap: wrap; align-items: stretch; gap: var(--space-2); } body[data-ds="rt"] .master-search { flex: 1 1 100%; } /* THE FILTER ROW — this needed diagnosing, not guessing. main.css already sets `.master-toolbar-filters { flex-direction: column }` in its own mobile block. That was written when the filters were `.master-filter-select`, which the same block gives `width: 100%`. The selects were later replaced by the shared `.ms-filter` multi-select, which takes its width from its content — so in a column with centred alignment each one became a narrow pill on a row of its own: four pills, four rows, all centred, in a 390px viewport. Setting flex-wrap and justify-content is useless against flex-direction: column, which is why the first attempt at this measured as applied and changed nothing on screen. The direction itself has to go back to row. Two filters per row, each filling its half. */ body[data-ds="rt"] .master-toolbar-filters { flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; width: 100%; gap: var(--space-2); } body[data-ds="rt"] .master-toolbar-filters .ms-filter { flex: 1 1 calc(50% - var(--space-2)); min-width: 0; } body[data-ds="rt"] .master-toolbar-filters .ms-filter-btn { width: 100%; justify-content: space-between; } body[data-ds="rt"] .master-toolbar-actions { flex-wrap: wrap; justify-content: flex-start; width: 100%; } } /* ========================================================================== 4b · THE SAME 40px FLOOR ON EVERY TOUCH SCREEN (11-Sep-2026) The block above is width-scoped, so an iPad in landscape (1024–1366px) got 26px desktop buttons under a finger. This repeats ONLY the sizing rules for any coarse pointer, whatever the width. Layout changes (the stacked toolbar) stay in the width block — a wide tablet does not need them. ========================================================================== */ @media (pointer: coarse) { body[data-ds="rt"] .btn, body[data-ds="rt"] .btn-sm, body[data-ds="rt"] .btn-primary, body[data-ds="rt"] .btn-secondary, body[data-ds="rt"] .btn-ghost { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } body[data-ds="rt"] .modal-close-btn, body[data-ds="rt"] .master-action-btn, body[data-ds="rt"] .master-pagination-nav .btn { min-width: 40px; min-height: 40px; } body[data-ds="rt"] .theme-btn, body[data-ds="rt"] .hamburger-btn, body[data-ds="rt"] .hamburger { width: 40px; height: 40px; } body[data-ds="rt"] .ch-btn, body[data-ds="rt"] .ch-cycle, body[data-ds="rt"] .master-search-input, body[data-ds="rt"] .master-page-size { min-height: 40px; height: 40px; } body[data-ds="rt"] .ms-filter-btn, body[data-ds="rt"] .ms-filter-clear, body[data-ds="rt"] .master-filter-select { min-height: 40px; } body[data-ds="rt"] .ms-filter-btn { height: auto; } body[data-ds="rt"] .ms-filter-item, body[data-ds="rt"] .master-dropdown-item { min-height: 40px; display: flex; align-items: center; } /* Row and header tick boxes: 20px box; the cell padding supplies the rest. */ body[data-ds="rt"] .bulk-row, body[data-ds="rt"] .bulk-select-all { width: 20px; height: 20px; } } /* ========================================================================== 5 · TWO MORE SHARED CONTROLS, FOUND BY MEASURING BATCH 3's SCREENS -------------------------------------------------------------------------- Batch 3 was meant to be seven screens with bespoke inline CSS. Probing them found almost nothing screen-specific — but it did find two SHARED components below the tap floor, which is the same shape of defect batch 2 fixed and belongs in the same place rather than in seven templates. ========================================================================== */ /* .pms-check — a checkbox with its text label, the standard inline pattern. MEASURED on Email Notifications at 390px: nineteen of these, each a 20px label wrapping a 13px box. The LABEL is the tap target; the box never is, so raising the box would be both ugly and pointless. Defined as a class because the screen had it as an inline style, which no stylesheet can raise cleanly. The 24px minimum below is WCAG 2.5.8; the 40px floor at phone width is this project's own bar and lives in the media block further down. */ body[data-ds="rt"] .pms-check { /* main.css styles bare `label` with margin-bottom:6px, which is meant for a field CAPTION sitting above its input. A label that WRAPS its own control is not a caption, and that phantom 6px lifted this checkbox off the baseline of the button beside it — MEASURED top=0 bottom=6 against its flex parent on Email Notifications. */ margin-bottom: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: var(--font-size-sm); color: var(--color-text-primary); cursor: pointer; } body[data-ds="rt"] .pms-check input[type="checkbox"] { flex-shrink: 0; accent-color: var(--color-primary); } /* .pms-tab — the shared tab strip. MEASURED 38px: `padding: 10px 18px` with no min-height, two pixels under the floor, on EIGHT screens (Bell Curve, Enrollment, Finance, Approvals, HR Review, Increment Approval, Increments Review, Roles & Permissions). Two pixels is not worth eight per-screen overrides. Raised here once. Roles & Permissions was the screen that surfaced it, via its .rp-tab JS hook — the visuals were already coming from this shared component, so fixing .rp-tab would have fixed one screen and hidden the other seven. */ @media (max-width: 900px) { body[data-ds="rt"] .pms-tab { min-height: 40px; display: inline-flex; align-items: center; } body[data-ds="rt"] .pms-check { min-height: 40px; } } /* ========================================================================== ERROR MODAL — app-wide (2026-08-30) Replaces the top pink err-banner as the destination for every error. Declared here rather than in main.css because main.css is ~108KB and long cached; a new global component must not depend on a same-build main.css. The banner rules in main.css are left in place and unreferenced. Rules this component keeps: - deep red on pink, never coral (RT's danger sits too close to primary) - dismissed only by the X, Close or Esc — NEVER by a backdrop click, so a blocking error cannot be waved away by accident - no auto-dismiss - every error answers what happened, why, and how to resolve it ========================================================================== */ .pms-err-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); display: none; align-items: center; justify-content: center; z-index: 1200; padding: 3vh 3vw; } .pms-err-overlay.is-open { display: flex; } .pms-err { width: 560px; max-width: 100%; max-height: 92vh; background: var(--color-surface, #fff); border: 1px solid #F1B0B0; border-radius: var(--radius-lg, 8px); box-shadow: 0 1px 2px rgba(9, 9, 11, .04), 0 12px 34px -12px rgba(9, 9, 11, .28); display: flex; flex-direction: column; overflow: hidden; } .pms-err-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; background: #FDECEC; border-bottom: 1px solid #F1B0B0; flex: 0 0 auto; } .pms-err-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F4CCCC; color: #C00000; } .pms-err-title { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); line-height: var(--line-height-snug); color: #C00000; } .pms-err-code { margin: 3px 0 0; font-size: var(--fs-11, 11px); color: #C00000; opacity: .85; font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace); } .pms-err-code[hidden] { display: none !important; } .pms-err-x { margin-left: auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); color: #C00000; cursor: pointer; flex: 0 0 40px; } .pms-err-x:hover { background: #F4CCCC; } .pms-err-x:focus-visible { outline: 2px solid #C00000; outline-offset: 2px; } .pms-err-body { padding: 18px 20px 4px; overflow-y: auto; flex: 1 1 auto; } .pms-err-body section { margin-bottom: 16px; } .pms-err-body h4 { margin: 0 0 4px; font-size: var(--fs-12, 12px); font-weight: var(--font-weight-bold); color: var(--color-text-secondary, #3F3F46); } .pms-err-body p { margin: 0; font-size: var(--font-size-body); line-height: var(--line-height-normal); color: var(--color-text-secondary, #3F3F46); } .pms-err-body ol { margin: 6px 0 0; padding-left: 20px; font-size: var(--font-size-body); line-height: var(--line-height-relaxed); color: var(--color-text-secondary, #3F3F46); } .pms-err-body li { margin-bottom: 4px; } .pms-err-foot { padding: 14px 20px; border-top: 1px solid var(--color-border, #E4E4E7); display: flex; justify-content: flex-end; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; } .pms-err-foot .btn { min-height: 40px; } .pms-err-foot .btn--danger { background: #C00000; border-color: #C00000; color: #fff; } .pms-err-foot .btn--danger:hover { background: #A30000; border-color: #A30000; } @media (max-width: 560px) { .pms-err-head { padding: 14px 16px 12px; } .pms-err-body { padding: 14px 16px 4px; } .pms-err-foot { padding: 12px 16px; } .pms-err-foot .btn { flex: 1 1 auto; justify-content: center; } } /* ========================================================================== Bulk selection (multi-select + delete) — shared by all 18 Settings tables Markup: core/partials/bulk_th.html, bulk_td.html, bulk_bar.html. Behaviour: window.pmsBulk in app.js. Declared once here so every master gets the identical control, the 40px tap floor included. ========================================================================== */ .master-table .bulk-th, .master-table .bulk-td { width: 40px; min-width: 40px; max-width: 40px; padding-left: var(--space-3, 12px); padding-right: 0; text-align: center; vertical-align: middle; } /* .master-table--wide clips every td to 180px/ellipsis; the checkbox cell must stay visible and unclipped. */ .master-table .bulk-td { overflow: visible; white-space: nowrap; } .bulk-select-all, .bulk-row { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary, #f2542d); cursor: pointer; vertical-align: middle; } .bulk-select-all:focus-visible, .bulk-row:focus-visible { outline: 2px solid var(--color-primary, #f2542d); outline-offset: 2px; } /* A ticked row reads as selected without relying on the checkbox alone. */ .master-table tbody tr.bulk-selected > td { background: var(--color-primary-tint, rgba(242, 84, 45, 0.10)); } /* The action bar. Sits between the record count and the table, hidden until at least one row is ticked. */ .bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3, 12px); padding: var(--space-2, 8px) var(--space-4, 16px); margin-bottom: var(--space-3, 12px); background: var(--color-surface-secondary, #f4f4f5); border: 1px solid var(--color-border, #e4e4e7); border-radius: var(--radius-md, 6px); font-size: var(--font-size-sm); } .bulk-bar[hidden] { display: none; } .bulk-bar-count { font-weight: var(--font-weight-medium, 500); color: var(--color-text, #18181b); } .bulk-bar-spacer { flex: 1 1 auto; } .bulk-bar-link { background: none; border: 0; padding: 0 var(--space-1, 4px); min-height: 40px; color: var(--color-primary, #f2542d); font: inherit; font-weight: var(--font-weight-medium, 500); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .bulk-bar-link:hover { color: var(--color-primary-hover, #db4620); } .bulk-bar-link[hidden] { display: none; } .bulk-bar .btn { min-height: 40px; } .bulk-bar .btn-danger { background: var(--color-error, #dc2626); border-color: var(--color-error, #dc2626); color: #fff; } .bulk-bar .btn-danger:hover:not(:disabled) { background: var(--color-error-text, #991b1b); border-color: var(--color-error-text, #991b1b); } .bulk-bar .btn:disabled { opacity: .6; cursor: progress; } @media (max-width: 640px) { .bulk-bar-spacer { display: none; } .bulk-bar .btn { flex: 1 1 calc(50% - var(--space-3, 12px)); justify-content: center; } .bulk-bar-count, .bulk-bar-link { flex: 1 1 100%; text-align: left; } } /* ========================================================================== Scope picker (Assign Role modal) — cascading division → department / sub-division lists with search. Markup in core/assignment_modal.html. ========================================================================== */ .scope-picker .scope-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px); } .scope-picker .scope-head label { margin: 0; } .scope-picker .scope-count { font-weight: var(--font-weight-regular); color: var(--color-text-muted, #66666f); font-size: var(--font-size-xs); margin-left: var(--space-2, 8px); } .scope-picker .scope-link { background: none; border: 0; padding: 0; min-height: 24px; color: var(--color-primary, #f2542d); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium, 500); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .scope-picker .scope-search { width: 100%; margin: var(--space-2, 8px) 0; padding: 6px 10px; min-height: 34px; font: inherit; font-size: var(--font-size-sm); border: 1px solid var(--color-border, #e4e4e7); border-radius: var(--radius-sm, 4px); background: var(--color-background, #fff); } .scope-picker .scope-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--color-border, #e4e4e7); border-radius: var(--radius-sm, 4px); padding: var(--space-1, 4px) var(--space-3, 12px); } .scope-picker .scope-group-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium, 500); color: var(--color-text-muted, #66666f); padding: var(--space-2, 8px) 0 var(--space-1, 4px); border-bottom: 1px solid var(--color-border, #e4e4e7); margin-bottom: var(--space-1, 4px); } .scope-picker .scope-group--flat .scope-group-title { display: none; } .scope-picker .scope-item { display: flex; align-items: center; gap: var(--space-2, 8px); padding: var(--space-1, 4px) 0; font-size: var(--font-size-sm); cursor: pointer; margin: 0; } .scope-picker .scope-item input[type="checkbox"] { accent-color: var(--color-primary, #f2542d); width: 16px; height: 16px; margin: 0; flex: 0 0 16px; } .scope-picker .scope-prefix { color: var(--color-text-muted, #66666f); } .scope-picker .scope-group:not(.scope-group--flat) .scope-prefix { display: none; } .scope-picker .scope-item[hidden], .scope-picker .scope-group[hidden], .scope-picker .scope-none[hidden] { display: none; } .scope-picker .scope-empty { font-size: var(--font-size-xs); color: var(--color-text-muted, #66666f); margin: var(--space-2, 8px) 0; } /* ========================================================================== 5 · RESPONSIVE COMPONENTS — Phase 1 (11-Sep-2026) -------------------------------------------------------------------------- Plan: docs/responsive_phase1_component_plan_v1.md (approved by RT). Lives here, not in main.css, because this file loads on every page AFTER main.css and is not the long-cached one. Breakpoints are the three tokens only: phone ≤767px · tablet ≤1024px · desktop. Every component below is lifted from one that already ships; the source is named on each. ========================================================================== */ /* -------------------------------------------------------------------------- C2 · KPI strips — reflow only; the tile itself is untouched. Source: .hrv-kpi (HR Review), the canonical flat tile. One phone column put five tiles (≈800px) above the first record; two columns halve that. !important because each screen's own stylesheet loads later and sets 1fr at the same weight. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1100px) { body[data-ds="rt"] :is(.hrv-kpis, .fnr-kpis, .iap-kpis, .inc-metrics, .ms-kpis, .exr-kpis, .pay-kpis, .cfo-kpis, .ceo-kpis, .md-kpis, .eap-kpis) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* T4 · Appraisal Approval used private breakpoints (840px / 600px), so it was 2-up where every other strip was 3-up and 1-up where they were 2-up. It now reflows on the shared set. It keeps 4 / 2 / 1 rather than 5 / 3 / 2 because its card is horizontal — a figure beside a label — and needs the width. */ @media (min-width: 768px) and (max-width: 1100px) { body[data-ds="rt"] .summary-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 767px) { body[data-ds="rt"] .summary-grid { grid-template-columns: 1fr !important; } } /* Phone: ONE row of tiles that swipes sideways (Phase 2 D5, 01-Oct-2026, approved by RT). The 2-up grid stacked five or six tiles 400-560px deep, so Increments Approval put its first employee card at 938px on an 844px phone; the swipe row puts it at 433px. Each tile is 44% wide, so the edge of the third tile shows that there is more. */ @media (max-width: 767px) { body[data-ds="rt"] :is(.hrv-kpis, .fnr-kpis, .iap-kpis, .inc-metrics, .ms-kpis, .exr-kpis, .pay-kpis, .cfo-kpis, .ceo-kpis, .md-kpis, .eap-kpis) { display: flex !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 8px !important; padding-bottom: 4px; } body[data-ds="rt"] :is(.hrv-kpis, .fnr-kpis, .iap-kpis, .inc-metrics, .ms-kpis, .exr-kpis, .pay-kpis, .cfo-kpis, .ceo-kpis, .md-kpis, .eap-kpis) > * { flex: 0 0 44% !important; min-width: 0; scroll-snap-align: start; } } /* -------------------------------------------------------------------------- C2b · ONE TILE STANDARD — tile sizing review, 12-Sep-2026 (T1, T2, T3, T6) The C2 rule above reflows the strips together but says "the tile itself is untouched", and the tiles had drifted: padding ran 11px-20px across six conventions, the value was set at 20px, 24px or 36px, and the label was clamped on two screens and free on six — which is what made the same tile 72px tall on one screen and 115px on another. The standard is .hrv-kpi (HR Review), which C2 already names as canonical. !important follows C2's own precedent and for C2's reason: each screen's stylesheet and its template