HR
Subcontractor Roster
... page actions: .pdr-bar__pill, .pdr-bar__btn ...
.pdr-shell above is the previous standard, kept so the pages still on it
keep rendering while they are migrated. Do not put it on anything new.
────────────────────────────────────────────────────────────────────────── */
.pdr-bar{
position:sticky; top:0; z-index:200;
background:var(--navy); color:var(--white);
padding:12px 20px;
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
box-shadow:0 2px 8px rgba(0,0,0,.25);
font-family:var(--font);
}
.pdr-bar--static{position:static}
.pdr-bar__logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.pdr-bar__logo img{height:26px;display:block}
.pdr-bar__up{
font-size:12px;font-weight:600;color:rgba(255,255,255,.62);text-decoration:none;
flex-shrink:0;padding-left:12px;margin-left:2px;border-left:1px solid rgba(255,255,255,.22);
}
.pdr-bar__up:hover{color:var(--white)}
.pdr-bar__title{font-size:15px;font-weight:700;letter-spacing:.01em}
.pdr-bar__spacer{flex:1}
.pdr-bar__pill{
font-size:12px;font-weight:600;padding:5px 12px;border-radius:99px;
background:rgba(255,255,255,.14);color:var(--white);white-space:nowrap;
}
.pdr-bar__pill.is-done{background:rgba(27,115,64,.4);color:rgb(141,255,176)}
.pdr-bar__btn{
font:600 12.5px var(--font);padding:7px 14px;border-radius:var(--r-md);cursor:pointer;
border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);color:var(--white);
display:inline-flex;align-items:center;gap:6px;
}
.pdr-bar__btn:hover{background:rgba(255,255,255,.18)}
.pdr-bar__btn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:640px){
.pdr-bar{padding:10px 14px;gap:8px}
.pdr-bar__title{font-size:13px}
}
@media print{ .pdr-bar{display:none !important} }
/* ==========================================================================
PHONE BASELINE — Josh, 2026-09-05: "I tried it on my phone it looks not
good - go through all the pages for the phone".
Measured cause across ten pages that scrolled sideways at 375px: grid and
flex items default to min-width:auto, so ONE child wider than its share
drags the whole page out. calculator's .two-col resolved to a single 544px
column that way; insurance-savings pushed its export button past the edge
because the top bar could not wrap.
These rules are the shared floor. Pages still needing a real breakpoint
get one of their own.
==========================================================================*/
@media (max-width: 640px) {
html { -webkit-text-size-adjust: 100%; }
/* clip, not hidden: overflow:hidden on body creates a scroll container and
breaks position:sticky headers. clip does not. This is the backstop for
off-canvas drawers and carousels that live to the right of the viewport. */
/* both, because the slide decks position their next-slide peek absolutely
and body is not a containing block for it - clipping body alone leaves
scrolling sideways. */
html, body { overflow-x: clip; }
/* the min-width:auto fix - the single most common cause of sideways scroll */
body * { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
pre { overflow-x: auto; }
/* a wide table scrolls inside its own box instead of moving the page */
table { display: block; width: 100%; overflow-x: auto; }
/* header bars wrap instead of pushing their last button off the edge */
header, nav, .topbar, .topbar-in, .toolbar, .hdr-top { flex-wrap: wrap; }
/* thumbs are ~44px; anything a finger presses should be reachable */
button, .btn, [role="button"] { min-height: 36px; }
/* iOS Safari zooms the whole page in when you tap a field whose text is
under 16px, and then leaves it zoomed. That alone makes a form feel
broken on a phone. 16px is the threshold, not a style choice. */
input, select, textarea { font-size: 16px; }
}
/* --------------------------------------------------------------------------
Measured: a disabled button keeps its white label but swaps to a light
grey fill, which lands at 1.3:1 - the word vanishes. setup.html's "Next"
was the clearest case. Give every disabled control a readable label.
-------------------------------------------------------------------------- */
button:disabled, .btn:disabled, input:disabled, select:disabled,
button[disabled], .btn[disabled] {
color: var(--n-600) !important;
border-color: var(--n-300);
}
/* 2026-09-05: the label alone was not enough. A disabled button that keeps a
coloured fill (the checklists' green "Save & Export PDF") put grey on green
at 1.18:1 - the button read as an empty slab. Neutralise the fill too, so a
disabled control looks disabled in one consistent way across every page.
Measured after: 6.25:1 light, 8.36:1 dark. The dark app bar keeps its own
translucent treatment - a pale grey slab there would look like a bug. */
button:disabled, .btn:disabled, button[disabled], .btn[disabled] {
background: var(--n-100) !important;
background-image: none !important;
opacity: 1;
box-shadow: none;
}
.pdr-bar__btn[disabled] {
background: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.62) !important;
opacity: 1;
}
/* ==========================================================================
DARK THEME (experiment, 2026-09-05)
Every page now draws its greys and blues from the ramps above, so redefining
the ramps under [data-theme="dark"] flips a page without touching it. Pages
that still hardcode a hex stay light in those spots - that is the measure of
how far this gets us.
Warm dark, not blue-black: it is the eggshell palette inverted, so the
system still feels like one thing.
==========================================================================*/
:root[data-theme="dark"]{
--n-50: rgb(23,21,20); /* page canvas */
--n-100: rgb(32,30,28); /* section fill */
--n-200: rgb(52,48,45); /* hairline */
--n-300: rgb(74,69,64);
--n-400: rgb(120,113,105);
--n-500: rgb(158,150,140);
--n-600: rgb(190,183,173); /* muted text */
--n-700: rgb(216,210,202);
--n-900: rgb(245,243,240); /* ink */
--white: rgb(31,29,27); /* "card" surface - no longer literal white */
--paper: rgb(23,21,20);
--paper-2: rgb(32,30,28);
/* the brand ramp lifts so it still reads on a dark ground */
--pdr-50: rgb(18,30,44);
--pdr-100: rgb(24,44,66);
--pdr-200: rgb(32,62,94);
--pdr-300: rgb(58,110,164);
--pdr-400: rgb(90,150,208);
--pdr-500: rgb(120,175,228);
--pdr-600: rgb(150,196,240);
--pdr-700: rgb(180,214,246);
--pdr-800: rgb(16,26,38);
--pdr-900: rgb(12,20,30);
--green-bg: rgb(16,40,29);
--green-text: rgb(122,222,166);
--amber-bg: rgb(46,35,14);
--amber-text: rgb(240,190,110);
--danger: rgb(248,150,150);
--danger-bg: rgb(56,22,22);
}
:root[data-theme="dark"] body { background: var(--n-50); color: var(--n-900); }
/* --------------------------------------------------------------------------
Inside the app shell, a page must not draw its own branding: the shell
already shows the logo, the page name and the breadcrumb. .pdr-shell is the
breadcrumb bar shared by the internal pages, so hiding it here is what makes
"one header, one logo" true everywhere instead of page by page.
-------------------------------------------------------------------------- */
html[data-pdr-embedded] .pdr-shell { display: none !important; }
/* --------------------------------------------------------------------------
A page that is not finished says so, in one consistent shape. Drawn by
/assets/pdr-frame.js from 