/**
 * Surf Shack — staff portal skin.
 *
 * GENERATED by tools/genstaff.py. Do not hand-edit: regenerate.
 *
 * WHY THIS IS A SEPARATE FILE. Another agent is working inside
 * `includes/modules/staff-portal/class-staff-portal.php` (497 KB, 589 styled rules).
 * Editing that file would collide with their work and risk the live front desk, so this
 * reads their CSS and emits an override keyed to THEIR selectors instead.
 *
 * It fails safe. If they rename or delete a rule, our override for it simply stops
 * matching — it cannot break their markup and cannot resurrect a component they removed.
 * The worst case is a dead rule. Regenerate after they land changes.
 *
 * `!important` throughout, and not out of laziness: the portal's CSS is inline in the
 * page, so it prints after any enqueued stylesheet and wins on order at equal specificity.
 *
 * One selector carries a doubled class — `.ssr-cal-chip.hold.hold`. Where THEIR
 * declaration is already `!important`, ours does not win by also being `!important`:
 * between two important declarations the cascade resumes, specificity ties, and their
 * later source order takes it. Repeating the last class buys one point of specificity
 * and changes nothing about what the selector matches. The generator finds these rather
 * than guessing — the first run of this file shipped that rule silently losing.
 *
 * ---------------------------------------------------------------------------
 * PASS 1 — COLOUR. 106 fixes. Stage 2 work, which needs no decision.
 *
 *   4 muted greys  #4A6B7E #7A8A92 #6B7A88 #5A6E76  -> --muted #5A7482
 *   a 4th teal     #2C6E71                          -> #357B7D
 *   brand as text  #3D8D90 (3.88:1)                 -> #357B7D (4.91:1)
 *   a navy         #0B3D57                          -> --ink #1F3E4A
 *   FOUR reds      #C0392B #A32D2D #C0453B #E24B4A  -> the one red #B42318
 *   orange as text #E8902A (2.6:1)                  -> #B85E10 (4.52:1)
 *
 * ---------------------------------------------------------------------------
 * PASS 2 — ONE HAIRLINE, ONE GROUND. 59 + 7 fixes, and the reason the portal
 * now reads as one product rather than several.
 *
 *   14 neutral border values -> --hairline #D8E6E6
 *      #CBE5DC (x27) #E7EFED #EEF3F1 #E9F0EE #EEF4F2 #E3EAE8 #DCEBE7 #CBD9D6
 *      #DCEAE6 #D6E4DF #CBD0D6 #CBD8DE #D8E2E7 #DFE4E7
 *   5 near-white panel grounds -> --recessed #F4F9F8
 *      #FAFDFC #FBFDFC #F9FCFB #F7FBFA #F6F7F8
 *
 * Before this, a card edge, a table rule and a list divider sitting side by side were
 * three different shades. Nothing in the app meant anything by that — it is simply what
 * happens when 589 rules are written over months — but it is the first thing the eye
 * reads, before any content.
 *
 * Property-aware, and that is the whole safety argument: the same hex is a different
 * decision as `color`, as a border and as a background. #E7EFED becomes the hairline
 * where it draws a rule and stays exactly as it is where it fills the calendar nav.
 *
 * SEMANTICS ARE NOT FLATTENED. Every hue-carrying value is untouched — the activity
 * coding (open / guided / spa / volleyball / league / party), the warn and danger tints,
 * the brand #3D8D90. And only SOLID borders are unified: every dashed border in this
 * portal marks a state (blocked, unblockable, multi-slot), so #B9BCC2 and #B9D8D4 are
 * not in the map at all.
 *
 * ---------------------------------------------------------------------------
 * TWO THINGS THE RENDERED CHECK CAUGHT THAT READING THE FILE DID NOT.
 *
 * The portal ships some CSS by string concatenation, so a rule written as
 * `$css .= '.ssr-cal-mcell{...}'` reaches the harvester with the literal fragment
 * `' . '` glued to its front. Thirteen rules went out that way in the first build —
 * invalid selectors, dropped by every browser, and among them the borders of the
 * week and month grids. They were in the file, served, and doing nothing.
 *
 * And `.ssr-cb-back` is declared twice with different colours, because two screens
 * each print their own <style>. In the live page only one block exists per screen, so
 * each gets the colour it was designed with. This stylesheet is unconditional, so
 * carrying both would repaint one screen's back button to the other's intention.
 * Where their CSS disagrees with itself, NEITHER value ships — see drop_conflicts().
 *
 * Both were found by rendering their CSS against this file in a browser and reading
 * computed styles, which is now `tools/cascade.js`. It is the third time this session
 * that a correct-looking stylesheet was measured to be losing, and the only method
 * that has ever caught it.
 *
 * ---------------------------------------------------------------------------
 * THE SCOPE BUG, found by Nick from the rendered app on 15 Aug.
 *
 * This generator used an allowlist of thirteen `.ssr-` prefixes, and it was the wrong
 * shape. It missed 320 selector hits across whole screens — the app shell, header and
 * tab bar (`.ssr-staff`, 73 rules), Open hours (`.ssr-wk`), pricing, search, rosters,
 * leagues, holidays and the login screen. Everything in this portal is namespaced and
 * this file is enqueued on /staff/* only, so naming prefixes one at a time protected
 * nothing and silently skipped half the app. Now: any `.ssr-`/`.ssl-` selector.
 *
 * Coverage went from 119 rules to 323 on that one change.
 *
 * ---------------------------------------------------------------------------
 * THE FILL MOVES, NOT THE LABEL. 29 selectors paint `color:#fff` on a fill that cannot
 * carry it — every primary button in the app, the login button, the calendar's today
 * pill, the open-activity chips. White on #3D8D90 is 3.88:1 and white on #E8902A is
 * 2.63:1; 15px/700 is not "large text", so 4.5 is the bar for all of them.
 *
 * Same correction Nick set for the site chrome: keep the label white, move the fill to
 * the same hue at a value white reads on — #357B7D (4.91:1) and #C25700 (4.51:1).
 * Applied ONLY where the rule also sets a white color, so #3D8D90 keeps every role
 * where nothing has to be read against it.
 *
 * ---------------------------------------------------------------------------
 * BASE LAYER — see base_layer() in the generator.
 *
 * `/staff/?tab=volleyball` renders `<button class="ssr-mgr-btn ssr-mgr-btn-sync">` and
 * `<a class="ssr-mgr-btn ssr-mgr-btn-ghost">`, but that screen never echoes mgr_css().
 * Measured on the live page: the Save button was Arial, `2px outset`, #f0f0f0,
 * `padding:1px 6px` — a raw browser button — and the leagues link was #0000EE. Nothing
 * was wrong with their CSS; it simply was not on the page. Their blocks are inline and
 * per-screen, ours is enqueued on all of them, so mgr_css() is lifted verbatim at build
 * time as a base layer with NO !important: where their block does print, theirs still
 * wins on source order and nothing changes.
 *
 * That one hoist is also what un-cramps the "Courts & capacity" card — `.ssr-mgr-f`
 * puts the label above the field and gives it a 48px control, which was there all along.
 *
 * ---------------------------------------------------------------------------
 * PASS 3 — KEYBOARD FOCUS. See the block at the foot of this file. 497 KB of portal CSS
 * contains exactly one `:focus` rule; the rest of the app has no visible focus position
 * at all.
 *
 * ---------------------------------------------------------------------------
 * PASS 4 — TYPE AND RADIUS. Stage 3, released by Nick on 15 Aug: "this is all
 * staff-app side so use product system, enforce."
 *
 * The hold existed because `visual-language.md` §3.2 names the portal's 13/14px body
 * as "the sharpest conflict" in the system — *"a 17px staff portal would be a
 * materially worse tool"*. That warning is about imposing the MARKETING floor of 17.
 * The product scale has 12 and 14 in it, so enforcing it here does not inflate the
 * portal. It lands where it should:
 *
 *   140 type fixes.  18 distinct sizes -> 5 steps.  12 · 14 · 17 · 20 · 24
 *     13px (x44, the dominant body size) -> 14      +1px, not +4
 *     10 / 10.5 / 11 / 11.5 / 12.5       -> 12      the floor
 *     15 -> 14 · 16 -> 17 · 18 -> 17 · 19/21 -> 20 · 22/26 -> 24
 *
 *   158 radius fixes, ALL TO 4px. Revised 15 Aug, Nick: "10px is too round for
 *     staff side / product / app screens." The portal is a dense tool read at
 *     arm's length on a wall tablet, and at 10px every chip, cell and button in
 *     a booking grid read softer than the information it carried. 4px is what
 *     the Creative system already uses, so there is now ONE radius on the site.
 *
 *     Expressed as a rule, not a lookup table: >4px and <100px becomes 4px.
 *     Pills (999px) and circles (50%) stay — an avatar or a status pill is a
 *     SHAPE, not a rounded rectangle. So does anything 4px or under, because
 *     the portal uses small radii to JOIN segmented controls (`6px 6px 2px 2px`
 *     becomes `4px 4px 2px 2px`, keeping the join). That exclusion matters more
 *     at a 4px system radius than it did at 10, not less: the gap between "a
 *     corner" and "a join" is now only 2px.
 *
 * Checked before shipping: not one of the sizes that grows is inside a fixed
 * `height`, `line-height` or `max-height` that it would now overflow. That was the
 * real risk in a dense booking grid, and it is measured rather than assumed.
 *
 * ---------------------------------------------------------------------------
 * ALSO SETTLED, same instruction: one control fill (#EEF3F6 -> #E7EFED, dropping
 * the only cool grey in an otherwise entirely mint app) and one overlay elevation
 * (see the foot of this file). Raised and sticky elevations are left alone — three
 * tiers is a system; four values for two of them was not.
 *
 * @package SurfShack\Core
 */

/* ===== BASE LAYER, lifted verbatim from mgr_css() — see base_layer() for
   why. No !important: where their block prints, theirs still wins. ===== */
.ssr-mgr{font-family:var(--ssr-font);color:#1f3e4a;max-width:860px;margin:0 auto;}
		.ssr-mgr-sync{margin:0 0 14px;}
		.ssr-mgr-btn-sync{background:#3D8D90;color:#fff;border:0;border-radius:10px;padding:13px 22px;font-weight:700;font-size:15px;}
		.ssr-mgr h2{margin:0 0 4px;font-size:22px;}
		.ssr-mgr-sub{color:#4A6B7E;margin:0 0 16px;font-size:14px;}
		.ssr-mgr-flag{background:#fff7ed;border:1px solid #f6d9b0;color:#9a5a12;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-weight:600;}
		.ssr-mgr-pinchip{display:inline-block;background:#fff;border:1px solid #f0d3a8;border-radius:999px;padding:3px 11px;margin:3px 4px 0 0;font-weight:600;}
		.ssr-mgr-msg{background:#eaf7f0;border:1px solid #b8e0cd;color:#1f6b45;border-radius:10px;padding:10px 12px;margin-bottom:14px;}
		.ssr-mgr-search{width:100%;box-sizing:border-box;font-size:16px;min-height:48px;padding:11px 14px;border:1px solid #cbe5dc;border-radius:10px;margin:0 0 12px;}
		.ssr-mgr-table{width:100%;border-collapse:collapse;}
		.ssr-mgr-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#7a8a92;padding:6px 8px;border-bottom:2px solid #e7efed;}
		.ssr-mgr-table td{border-bottom:1px solid #eef3f1;text-align:left;padding:12px 8px;vertical-align:middle;font-size:14px;}
		.ssr-mgr-name{color:#1f3e4a;text-decoration:none;}
		.ssr-mgr-name:hover{color:#3D8D90;text-decoration:underline;}
		.ssr-mgr-actions{text-align:right;white-space:nowrap;}
		.ssr-mgr-inlineform{display:inline;}
		.ssr-mgr-em{color:#7a8a92;font-size:12px;}
		.ssr-mgr-ok{color:#2faa6a;font-weight:700;}
		.ssr-mgr-no{color:#b32d2e;font-weight:700;}
		.ssr-mgr-btn{display:inline-block;padding:9px 16px;border:none;border-radius:8px;background:#3D8D90;color:#fff;font-weight:600;cursor:pointer;margin-left:6px;text-decoration:none;font-family:inherit;font-size:14px;}
		.ssr-mgr-btn-ghost{background:#eef3f6;color:#1f3e4a;}
		.ssr-mgr-back{display:inline-block;color:#3D8D90;text-decoration:none;font-weight:600;margin:0 0 8px;}
		.ssr-mgr-hidden{margin:16px 0;}
		.ssr-mgr-hidden summary{cursor:pointer;color:#4A6B7E;font-weight:600;padding:8px 0;}
		.ssr-mgr-edit{max-width:520px;margin-top:8px;}
		.ssr-mgr-f{display:block;margin:0 0 14px;}
		.ssr-mgr-f > span{display:block;font-size:13px;color:#4A6B7E;margin:0 0 5px;font-weight:600;}
		.ssr-mgr-f input,.ssr-mgr-f select{width:100%;box-sizing:border-box;font-size:16px;min-height:48px;padding:11px 14px;border:1px solid #cbe5dc;border-radius:10px;font-family:inherit;background:#fff;}
		.ssr-mgr-f2{display:flex;gap:12px;}
		.ssr-mgr-f2 .ssr-mgr-f{flex:1;}
		.ssr-mgr-check{display:flex;align-items:center;gap:10px;margin:4px 0 16px;font-size:14px;color:#1f3e4a;}
		.ssr-mgr-check input{width:22px;height:22px;}
		.ssr-mgr-editbtns{display:flex;gap:10px;align-items:center;margin-top:6px;}
		.ssr-mgr-editbtns .ssr-mgr-btn{margin-left:0;}
		.ssr-mgr-tools{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px;}
		.ssr-mgr-toolbtn{display:inline-block;background:#eef3f6;color:#1f3e4a;border:1px solid #cbe5dc;border-radius:10px;padding:12px 16px;font-weight:600;text-decoration:none;font-size:14px;}
		.ssr-mgr-toolbtn:hover{background:#e2eaee;}
		.ssr-mgr-toolbtn{font-family:inherit;cursor:pointer;line-height:1.1;}
		.ssr-mgr-toolform{display:inline;margin:0;}
		.ssr-mgr-toolicon{display:inline-flex;align-items:center;gap:7px;}
		.ssr-mgr-toolicon svg{flex:none;}
		.ssr-mgr-flaglink{display:block;text-decoration:none;}
		.ssr-mgr-flaglink:hover{background:#fdeede;}
		.ssr-mgr-h3{font-size:15px;margin:18px 0 8px;color:#1f3e4a;}
		.ssr-mgr-capin{width:80px;padding:8px;border:1px solid #cbe5dc;border-radius:8px;font-size:15px;}
		.ssr-mgr-nsbadge{display:inline-block;background:#fee2e2;color:#991b1b;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;}
		.ssr-mgr-logwrap{max-height:420px;overflow:auto;border:1px solid #eef3f1;border-radius:10px;margin-top:6px;}
		.ssr-mgr-log td{font-size:13px;}
		.ssr-mgr-log thead th{position:sticky;top:0;background:#fff;}
/* ===== end base layer ===== */

.ssr-home-slot{border:0.5px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-home-slot .sl-lbl{font-size:12px !important}
.ssr-home-slot.next .sl-lbl{color:#5A7482 !important}
.ssr-home-slot .sl-time{font-size:20px !important}
.ssr-home-slot .sl-c{font-size:14px !important;color:#5A7482 !important}
.ssr-home-big{border-radius:4px !important;font-size:20px !important}
.ssr-home-big.primary{background:#357B7D !important}
.ssr-home-big.secondary{border:1.5px solid #D8E6E6 !important}
.ssr-home-signupbtn{border-radius:4px !important;color:#8A5A22 !important;font-size:14px !important}
.ssr-signup-card{border-radius:4px !important}
.ssr-signup-x{color:#5A7482 !important}
.ssr-signup-card h3{font-size:24px !important}
.ssr-signup-card p{color:#5A7482 !important}
.ssr-signup-qr{border-radius:4px !important}
.ssr-signup-url{color:#8A5A22 !important;font-size:14px !important}
.ssr-home-mgr{color:#5A7482 !important;font-size:14px !important}
.ssr-home-mgr span{background:#E7EFED !important;color:#5A7482 !important;font-size:12px !important}
.ssr-cal-book{color:#357B7D !important;border-radius:4px !important}
.ssr-cal-chip.hold.hold{color:#B42318 !important;border:1px dashed #B42318 !important}
.ssr-cb-panel{border-radius:4px !important}
.ssr-cb-x{font-size:24px !important;color:#5A7482 !important}
.ssr-cb-svcbtn{border:2px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-svcbtn.open.on{color:#8A5A22 !important}
.ssr-cb-svcbtn.guided.on{color:#357B7D !important}
.ssr-cb-steplbl{font-size:14px !important;color:#5A7482 !important}
.ssr-cb-rtile small{font-size:12px !important}
.ssr-cb-rtile{border:2px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-cb-rt-ic{font-size:24px !important}
.ssr-cb-rtile.open{color:#8A5A22 !important}
.ssr-cb-rtile.guided{color:#357B7D !important}
.ssr-cb-rchip{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-more{border-top:1px solid #D8E6E6 !important}
.ssr-cb-morelbl{font-size:12px !important}
.ssr-cb-morebtn{border:1.5px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-rrow{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-rrow span{color:#5A7482 !important}
.ssr-cb-chosen{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-newtoggle{color:#357B7D !important}
.ssr-cb-newform input{font-size:17px !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-createbtn{background:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-cb-confirm{border-radius:4px !important;font-size:14px !important}
.ssr-cb-confirm.sellbook{background:#C25700 !important}
.ssr-cb-qs-lbl{color:#5A7482 !important}
.ssr-cb-qs-sel{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-cb-qs-total{font-size:14px !important}
.ssr-cb-qs-total strong{font-size:24px !important}
.ssr-cb-qsbtn{border-radius:4px !important;font-size:14px !important}
.ssr-cb-qsbtn.card{background:#357B7D !important}
.ssr-cb-qsbtn.cash{background:#E7EFED !important}
.ssr-cb-confirm.paid{background:#357B7D !important}
.ssr-cb-confirm.hold{color:#B42318 !important;border:1px solid #B42318 !important}
.ssr-cb-msg{font-size:14px !important}
.ssr-cb-blockrow{border-top:1px solid #D8E6E6 !important}
.ssr-cb-blkdiv{font-size:12px !important}
.ssr-cb-blockbtn{color:#B42318 !important;border-radius:4px !important;font-size:14px !important}
.ssr-cb-blockbtn.danger{background:#B42318 !important;border-color:#B42318 !important}
.ssr-cb-blkall{background:#F4F9F8 !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-blkrow{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cb-rblk-warn{border-left:3px solid #B42318 !important;border-radius:4px !important;font-size:14px !important}
.ssr-cal-unrblk{font-size:12px !important}
.ssr-ros-panel{border-radius:4px !important}
.ssr-ros-x{font-size:24px !important;color:#5A7482 !important}
.ssr-ros-panel h3{font-size:17px !important}
.ssr-ros-row{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-ros-link{font-size:14px !important}
.ssr-ros-go{color:#357B7D !important;font-size:17px !important}
.ssr-ros-rm{color:#B42318 !important;font-size:20px !important}
.ssr-ros-b{font-size:12px !important}
.ssr-ros-b.no{color:#B42318 !important}
.ssr-ros-b.hold{color:#8A5A22 !important}
.ssr-ros-empty{color:#5A7482 !important}
.ssr-ros-add{background:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-cal-legend{color:#5A7482 !important}
.ssr-cal-nav{font-size:17px !important}
.ssr-cal-hrow{border-bottom:1px solid #D8E6E6 !important}
.ssr-cal-hrow:target{border-radius:4px !important}
.ssr-cal-hr{color:#5A7482 !important;font-size:14px !important}
.ssr-cal-hbody{border-radius:4px !important}
.ssr-cal-party{border-radius:4px !important}
.ssr-cal-party.start{border-radius:4px 4px 2px 2px !important}
.ssr-cal-party-nm{font-size:12px !important}
.ssr-cal-party-tm{font-size:12px !important;color:#357B7D !important}
.ssr-tl-lane{border-top:1px solid #D8E6E6 !important}
.ssr-tl-lane .ssr-tl-hr{font-size:12px !important;color:#5A7482 !important}
.ssr-tl-lane .ssr-tl-blk{font-size:12px !important}
.ssr-tl-lane .ssr-tl-unblk{border:1px solid #D8E6E6 !important;color:#357B7D !important;border-radius:4px !important;font-size:12px !important}
.ssr-tl-ev{border-radius:4px !important}
.ssr-tl-ev-s{font-size:12px !important}
.ssr-cal-blk-lbl{font-size:14px !important}
.ssr-cal-unblk{border:1px solid #D8E6E6 !important;color:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-cal-unrblk{border-radius:4px !important;font-size:12px !important}
.ssr-cal-blockday{color:#B42318 !important;font-size:14px !important}
.ssr-cal-unblockday{border:1px solid #D8E6E6 !important;color:#357B7D !important;font-size:14px !important}
.ssr-cal-blk-pill{font-size:14px !important}
.ssr-cal-empty{font-size:14px !important}
.ssr-cal-today{background:#357B7D !important}
.ssr-cal-grp{border-radius:4px !important}
.ssr-cal-chip{font-size:14px !important;background:#C25700 !important}
.ssr-cal-chip.block{border-radius:4px !important}
.ssr-cal-wtable th,.ssr-cal-wtable td{border:1px solid #D8E6E6 !important}
.ssr-cal-wtable th a span{font-size:17px !important}
.ssr-cal-pill{border-radius:4px !important;background:#C25700 !important}
.ssr-cal-mdow{color:#5A7482 !important}
.ssr-cal-mcell{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cal-mnum{font-size:14px !important}
.ssr-cal-flag{font-size:14px !important}
.ssr-mgr-addform{border:0.5px solid #D8E6E6 !important;border-radius:4px !important;background:#F4F9F8 !important}
.ssr-mgr-addform input,.ssr-mgr-addform select{font-size:17px !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-mgr-addbtn{background:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-mgr-danger{border-radius:4px !important}
.ssr-mgr-btn-sync{background:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-mgr h2{font-size:24px !important}
.ssr-mgr-sub{color:#5A7482 !important}
.ssr-mgr-flag{color:#8A5A22 !important;border-radius:4px !important}
.ssr-mgr-msg{border-radius:4px !important}
.ssr-mgr-search{font-size:17px !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-mgr-table th{color:#5A7482 !important;border-bottom:2px solid #D8E6E6 !important}
.ssr-mgr-table td{border-bottom:1px solid #D8E6E6 !important}
.ssr-mgr-name:hover{color:#357B7D !important}
.ssr-mgr-em{color:#5A7482 !important}
.ssr-mgr-btn{border-radius:4px !important;background:#357B7D !important}
.ssr-mgr-btn-ghost{background:#E7EFED !important}
.ssr-mgr-back{color:#357B7D !important}
.ssr-mgr-hidden summary{color:#5A7482 !important}
.ssr-mgr-f > span{font-size:14px !important;color:#5A7482 !important}
.ssr-mgr-f input,.ssr-mgr-f select{font-size:17px !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-mgr-toolbtn{background:#E7EFED !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-mgr-h3{font-size:14px !important}
.ssr-mgr-capin{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-mgr-nsbadge{font-size:12px !important}
.ssr-mgr-logwrap{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-mgr-log td{font-size:14px !important}
.ssr-set-sub{color:#5A7482 !important}
.ssr-set-card{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-set-ic{border-radius:4px !important;color:#357B7D !important}
.ssr-set-badge{background:#B42318 !important}
.ssr-set-desc{color:#5A7482 !important;font-size:14px !important}
.ssr-set-arrow{font-size:24px !important}
.ssr-dev-card{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-dev-model{font-size:17px !important}
.ssr-dev-kiosk{color:#357B7D !important}
.ssr-dev-namelbl{font-size:14px !important;color:#5A7482 !important}
.ssr-dev-name{font-size:17px !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-dev-save{background:#357B7D !important;border-radius:4px !important}
.ssr-dev-identify{background:#E7EFED !important;border-radius:4px !important}
.ssr-dev-forget{color:#B42318 !important;border-radius:4px !important}
.ssr-dev-meta{color:#5A7482 !important}
.ssr-dev-url{font-size:12px !important}
.ssr-pb-subnav{background:#E7EFED !important;border-radius:4px !important}
.ssr-pb-subnav a{border-radius:4px !important;color:#5A7482 !important;font-size:14px !important}
.ssr-pb-card{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pb-card h3{font-size:17px !important}
.ssr-pb-pick{color:#5A7482 !important}
.ssr-pb-row2 label{color:#5A7482 !important}
.ssr-pb-pkgprice{font-size:17px !important;color:#357B7D !important}
.ssr-pb-pkgfacts li{font-size:12px !important;color:#5A7482 !important}
.ssr-pb input,.ssr-pb select{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pb-warn{font-size:12px !important;border-radius:4px !important}
.ssr-pb-warn button{font-size:12px !important}
.ssr-pb-pkg{background:#F4F9F8 !important;border:1.5px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pb-pkgname{font-size:17px !important}
.ssr-pb-pkgmeta{color:#357B7D !important}
.ssr-pb-pkgdesc{font-size:14px !important;color:#5A7482 !important}
.ssr-pb-stepper button{border-radius:4px !important;border:1.5px solid #D8E6E6 !important;font-size:24px !important;color:#357B7D !important}
.ssr-pb-glim{font-size:12px !important;color:#5A7482 !important}
.ssr-pb-chip{background:#F4F9F8 !important;border:1.5px solid #D8E6E6 !important;font-size:14px !important}
.ssr-pb-chip.on{background:#357B7D !important}
.ssr-pb-addon{border:1.5px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pb-addon b{color:#357B7D !important}
.ssr-pb-totalbar{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pb-trow{font-size:14px !important;color:#5A7482 !important}
.ssr-pb-trow.ssr-pb-dep b{font-size:14px !important;color:#357B7D !important}
.ssr-pres-fixed{color:#5A7482 !important;font-size:14px !important}
.ssr-pres-hint{color:#5A7482 !important;font-size:14px !important}
.ssr-pres-grp.multi{border-radius:4px !important}
.ssr-pres-grplbl{font-size:12px !important}
.ssr-pres-grip{font-size:14px !important}
.ssr-pres-ic{border-radius:4px !important}
.ssr-pres-slot{font-size:12px !important;color:#357B7D !important}
.ssr-pres-row select,.ssr-pres-row input{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pres-when{font-size:14px !important;color:#5A7482 !important}
.ssr-pres-same{color:#5A7482 !important}
.ssr-pres-move button{background:#E7EFED !important;border:1px solid #D8E6E6 !important;border-radius:4px !important;color:#5A7482 !important;font-size:12px !important}
.ssr-pres-x{border-radius:4px !important;color:#B42318 !important;font-size:14px !important}
.ssr-pres-add button{color:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-pres-none{color:#5A7482 !important;font-size:14px !important;background:#F4F9F8 !important;border-radius:4px !important}
.ssr-pres-total{font-size:14px !important;color:#5A7482 !important}
.ssr-pb-trow.build b{color:#357B7D !important}
.ssr-pres-chip{font-size:12px !important}
.ssr-pres-chip button{color:#B42318 !important}
.ssr-pres-foodnone{font-size:12px !important}
.ssr-pres-chip em{color:#357B7D !important}
.ssr-pb-sq-n{font-size:14px !important}
.ssr-pb-sq-p{font-size:12px !important;color:#5A7482 !important}
.ssr-pb-preset button{background:#E7EFED !important;border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important;color:#357B7D !important}
.ssr-pb-preset-msg{font-size:12px !important;color:#5A7482 !important}
.ssr-pb-pkgres{font-size:12px !important;color:#357B7D !important}
.ssr-pres-row{background:#F4F9F8 !important;border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pres-row .ssr-pres-x{color:#B42318 !important;font-size:14px !important}
.ssr-pres-warn{border-radius:4px !important;font-size:14px !important}
.ssr-pres-none{color:#5A7482 !important;font-size:14px !important}
.ssr-pb-save{background:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-pb-msg{color:#B42318 !important;font-size:14px !important}
.ssr-pb-empty{color:#5A7482 !important}
.ssr-pb-litem{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pb-litop b{font-size:17px !important}
.ssr-pb-stat{font-size:12px !important}
.ssr-pb-stat-booked{color:#357B7D !important}
.ssr-pb-limeta{color:#5A7482 !important;font-size:14px !important}
.ssr-pb-litot{color:#5A7482 !important;font-size:14px !important}
.ssr-pr-changes{font-size:12px !important;color:#5A7482 !important}
.ssr-price-name{font-size:14px !important}
.ssr-price-val{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-price-tab{border:1px solid #D8E6E6 !important;color:#5A7482 !important;font-size:14px !important}
/* [Ivywild 2026-08-18, Nick] "button / tab text should be white on active state."
   The rule above sets `color:#5A7482 !important` on every price tab, and this one only ever
   replaced the BACKGROUND -- so an active tab was slate-grey text on a #357B7D fill, about 2:1,
   which is why "Open Flow" reads as a smudge in the Pass pricing control. The active state has to
   restate the ink as well as the fill; an !important base colour cannot be escaped by inheritance. */
.ssr-price-tab.active{background:#357B7D !important;border-color:#357B7D !important;color:#fff !important}
.ssr-pp-advsum{font-size:14px !important}
.ssr-pp-ghostbtn{color:#5A7482 !important;border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-pp-ghostbtn:hover{color:#357B7D !important}
.ssr-pp-sub{color:#5A7482 !important;font-size:14px !important}
.ssr-pp-warn{border-radius:4px !important;font-size:14px !important}
.ssr-pp-card{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pres-when b{color:#5A7482 !important}
.ssr-pp-auto{font-size:14px !important;color:#5A7482 !important}
.ssr-pp-auto em{color:#357B7D !important}
.ssr-pp-add{color:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-pp-row2 label{font-size:14px !important}
.ssr-pp select{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pp-dep{font-size:14px !important}
.ssr-pp-dep input{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pp-hint{color:#5A7482 !important}
.ssr-pp-prow{background:#F4F9F8 !important;border-radius:4px !important}
.ssr-pp-pname{font-size:17px !important}
.ssr-pp-pmeta{color:#357B7D !important}
.ssr-pp-pkgtop .pp-f-name{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pp-act{color:#357B7D !important}
.ssr-pp-grid label{font-size:12px !important;color:#5A7482 !important}
.ssr-pp-grid input{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-pp-desclbl{font-size:12px !important;color:#5A7482 !important}
.ssr-pp-desclbl textarea{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pp-addon .pp-a-name{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pp-addon label{font-size:14px !important}
.ssr-pp-addon label input{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-pp-addon .pp-a-type{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-pp-del{color:#B42318 !important;border-radius:4px !important;font-size:17px !important}
.ssr-pp-save{background:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-pp-cancel{color:#5A7482 !important}
.ssr-pp-delbtn{color:#B42318 !important;border-radius:4px !important}
.ssr-pp-msg{font-size:14px !important}
.ssr-pd-comp h4,.ssr-pd-complog h4{font-size:14px !important;color:#5A7482 !important}
.ssr-pd-comprow select,.ssr-pd-comprow input{border-radius:4px !important}
.ssr-pd-complog ul{font-size:14px !important}
.ssr-pd-edit{background:#E7EFED !important;border-radius:4px !important;font-size:14px !important}
.ssr-pd-lbl{font-size:12px !important}
.ssr-pd-grid2 b{font-size:14px !important}
.ssr-pd-reserved{color:#357B7D !important;border-radius:4px !important;font-size:14px !important}
.ssr-pd-money .ssr-pd-mrow{color:#5A7482 !important}
.ssr-pd-acth{font-size:17px !important}
.ssr-pd-btn{border-radius:4px !important;font-size:14px !important}
.ssr-pd-btn.primary{background:#357B7D !important}
.ssr-pd-btn.ghost{border:1.5px solid #D8E6E6 !important}
.ssr-pd-paidfull{border-radius:4px !important}
.ssr-pd-cancel{color:#B42318 !important;font-size:14px !important}
.ssr-pd-cancelled{border-radius:4px !important}
.ssr-wk-openlbl{font-size:14px !important;color:#5A7482 !important}
.ssr-hol-row input[type=date],.ssr-hol-row input[type=text]{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-hol-to{font-size:14px !important;color:#5A7482 !important}
.ssr-hol-an{font-size:14px !important;color:#5A7482 !important}
.ssr-hol-x{color:#B42318 !important;border-radius:4px !important;font-size:17px !important}
.ssr-sd-row{border-radius:4px !important}
.ssr-sd-row input,.ssr-sd-row select,.ssr-sd-datebtn{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-sd-dash{color:#5A7482 !important}
.ssr-sd-annual{font-size:14px !important;color:#5A7482 !important}
.ssr-sd-x{color:#B42318 !important;border-radius:4px !important;font-size:17px !important}
.ssr-cal-pop{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-cal-nav{border-radius:4px !important;font-size:17px !important;color:#357B7D !important}
.ssr-cal-dow{font-size:12px !important}
.ssr-cal-day{border-radius:4px !important;font-size:14px !important}
.ssr-cal-day.is-start,.ssr-cal-day.is-end{background:#357B7D !important}
.ssr-cal-hint{font-size:12px !important;color:#5A7482 !important}
.ssr-cal-done{background:#357B7D !important;border-radius:4px !important}
.ssr-set2 .ssr-scard{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-set2 .ssr-scard-h{font-size:17px !important}
.ssr-set2 .ssr-scard-d{font-size:14px !important;color:#5A7482 !important}
.ssr-set2 .ssr-flr-sub{border-top:1px solid #D8E6E6 !important}
.ssr-set2 .ssr-adv2{border-top:1px solid #D8E6E6 !important}
.ssr-set2 .ssr-adv2>summary:before{color:#357B7D !important;font-size:14px !important}
.ssr-lg-row{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-lg-name{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important}
.ssr-lg-x{color:#B42318 !important;border-radius:4px !important;font-size:17px !important}
.ssr-lg-day{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:14px !important;color:#5A7482 !important}
.ssr-lg-day.on{background:#357B7D !important}
.ssr-lg-fld{color:#5A7482 !important}
.ssr-lg-fld input,.ssr-lg-fld select{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-lg-self{font-size:14px !important;color:#5A7482 !important}
.ssl-card{border-radius:4px !important}
.ssl-brand{color:#357B7D !important}
.ssl-card label{color:#5A7482 !important}
.ssl-card input{border:1px solid #D8E6E6 !important;border-radius:4px !important;background:#F4F9F8 !important}
.ssl-btn{background:#357B7D !important;border-radius:4px !important;font-size:17px !important}
.ssl-err{border-radius:4px !important}
.ssr-lock-title{font-size:24px !important}
.ssr-lock-sub{font-size:14px !important}
.ssr-lock-err{font-size:14px !important}
.ssr-lock-k{border-radius:4px !important;font-size:24px !important}
.ssr-lock-logout{font-size:14px !important}
.ssr-search-ov-panel{border-radius:4px !important}
.ssr-search-ov-x{color:#5A7482 !important}
.ssr-search-rrow{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-search-rrow b{font-size:17px !important}
.ssr-search-rrow span{font-size:12px !important;color:#5A7482 !important}
.ssr-identify-sub{font-size:17px !important}
.ssr-staff-gate{border:1px solid #D8E6E6 !important;border-radius:4px !important;font-size:17px !important}
.ssr-staff-logout{border-radius:4px !important}
.ssr-staff-lockicon{border-radius:4px !important}
.ssr-staff-search{background:#357B7D !important}
.ssr-staff-nav{border-top:1px solid #D8E6E6 !important}
.ssr-staff-nav-search{border:1px solid #D8E6E6 !important;color:#5A7482 !important}
.ssr-staff-nav-btn{border-radius:4px !important;color:#5A7482 !important}
.ssr-staff-nav-btn:hover{color:#357B7D !important}
.ssr-staff-nav-btn.active{color:#B85E10 !important}
.ssr-staff-btn{border-radius:4px !important}
.ssr-staff-btn-primary{background:#357B7D !important}
.ssr-ofc-track{border:1px solid #D8E6E6 !important;border-radius:4px !important}
.ssr-ofc-track h4{font-size:14px !important}
.ssr-ofc-count{font-size:14px !important}
.ssr-ofc-track .ssr-skills td{border-bottom:1px solid #D8E6E6 !important}
.ssr-cal-mfree{font-size:12px !important}

/* ---------------------------------------------------------------------------
 * KEYBOARD FOCUS. 497 KB of portal CSS contains exactly one `:focus` rule, on
 * the login card's text input — everywhere else, a keyboard or a barcode
 * scanner moves through the app with no visible position at all. That is a
 * front-desk tool used at speed, so this is not a nicety.
 *
 * Not invented: it is their own login treatment, promoted app-wide. Their ring
 * is rgba(61,141,144,.18), which is almost invisible against white on a
 * wall-mounted tablet in daylight, so the ring is the solid brand teal instead
 * — #3D8D90 is 3.88:1 on white, past the 3:1 bar for a non-text indicator.
 *
 * `:focus-visible`, so it never appears on a touch or a mouse click, and
 * `!important` because their `outline:none` is inline and prints later.
 *
 * This stylesheet loads on /staff/* only, so the bare selector is scoped by
 * enqueue rather than by specificity.
 * ------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #3D8D90 !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
 * ONE OVERLAY ELEVATION. The portal floated things at two: .ssr-cb-panel at
 * 0 18px 50px rgba(0,0,0,.3), .ssr-cal-pop at 0 14px 40px rgba(0,0,0,.22).
 * Identical intent — "this is above the page" — expressed as two sets of
 * arbitrary numbers, so the sell sheet and the calendar popover cast visibly
 * different shadows on the same screen.
 *
 * The lighter one survives. 30% black under a 50px blur is a heavy shadow for a
 * light product surface; it reads as a dialog on a dark app, and this app is
 * white cards on a mint ground.
 *
 * The other two elevations are left alone because they are different tiers, not
 * drift: .ssr-pb-subnav a.on is a raised control (0 1px 3px) and .ssr-pb-totalbar
 * is a sticky bar lifting off the content below it (0 -2px 14px). Three tiers —
 * raised, sticky, overlay — is a system. Four values for two of them was not.
 * ------------------------------------------------------------------------- */
.ssr-cb-panel, .ssr-cal-pop {
  box-shadow: 0 14px 40px rgba(0,0,0,.22) !important;
}

/* ===========================================================================
 * HAND-AUTHORED LAYER — the things the portal never styled at all.
 *
 * Everything above this point is derived from their CSS. This part cannot be:
 * you cannot override a rule that was never written. The portal renders native
 * <input type=checkbox>, <select> and unclassed <input> in several places and
 * leaves them at browser defaults, so on the Open hours screen the checkboxes
 * are Chrome blue, the dropdowns are Arial with a system chrome, and none of it
 * belongs to the same product as the card it sits in.
 *
 * Scoped by enqueue: this stylesheet loads on /staff/* only.
 * ======================================================================== */


/* ---------------------------------------------------------------------------
 * 1. CHECKBOXES AND RADIOS.
 *
 * `accent-color` is the whole fix and it is the right one — it recolours the
 * native control without replacing it, so the checkbox keeps its own focus
 * behaviour, its indeterminate state, and every assistive-technology hook that
 * a div-with-a-tick throws away.
 *
 * #3D8D90 rather than #357B7D: this is a filled shape, not text, so 3:1 is the
 * bar and the brand value clears it at 3.88. The tick inside is drawn white by
 * the browser against that fill.
 *
 * 18px because the default is 13px on Windows, and these are tapped on a tablet
 * at the front desk. Still well under the 44px target the LABEL provides.
 * ------------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #3D8D90;
  width: 18px;
  height: 18px;
  margin: 0 2px 0 0;
  vertical-align: middle;
  cursor: pointer;
  flex: none;
}
/* The label is the real hit target — make it one. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { cursor: pointer; }


/* ---------------------------------------------------------------------------
 * 2. SELECTS.
 *
 * The Open hours screen has fourteen of them and not one rule anywhere in the
 * portal touches a <select> outside `.ssr-mgr-f`. Measured before this: Arial,
 * system border, 0px radius, 1px padding.
 *
 * `appearance:none` plus an inline SVG chevron rather than a wrapper element,
 * because the markup is generated in PHP and we do not own it. The SVG is a
 * data URI so there is no second request and nothing to 404 on production.
 *
 * `padding-right:34px` reserves the chevron's space so a long option label can
 * never run under it.
 * ------------------------------------------------------------------------- */
select {
  font-family: inherit;
  font-size: 14px;
  color: #1F3E4A;
  background-color: #fff;
  border: 1px solid #D8E6E6;
  border-radius: 4px;
  padding: 9px 34px 9px 12px;
  min-height: 40px;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A7482' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .16s cubic-bezier(.22,.61,.36,1);
}
select:hover { border-color: #B9D3D3; }
select:disabled { background-color: #F4F9F8; color: #5A7482; cursor: not-allowed; }
/* The option list itself is drawn by the OS; only its text colour is ours. */
select option { color: #1F3E4A; }


/* ---------------------------------------------------------------------------
 * 3. TEXT AND NUMBER INPUTS THAT NO RULE REACHES.
 *
 * `.ssr-mgr-f input` and friends are already styled by the base layer above, so
 * this only catches the strays — and deliberately does NOT use !important, so
 * any portal rule that does exist still wins.
 * ------------------------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="password"], textarea {
  font-family: inherit;
  font-size: 14px;
  color: #1F3E4A;
  background: #fff;
  border: 1px solid #D8E6E6;
  border-radius: 4px;
  padding: 9px 12px;
  min-height: 40px;
  box-sizing: border-box;
  transition: border-color .16s cubic-bezier(.22,.61,.36,1);
}
input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #B9D3D3; }
input::placeholder, textarea::placeholder { color: #5A7482; opacity: 1; }
/* A number field the user can only ever type 1–2 digits into does not need to
   be as wide as a name field. The portal sizes these individually where it
   cares; this stops the ones it forgot from stretching across a card. */
input[type="number"] { max-width: 96px; }
.ssr-mgr-f input[type="number"], .ssr-pres-row input[type="number"] { max-width: none; }


/* ---------------------------------------------------------------------------
 * 4. BUTTONS WITH NO CLASS AT ALL.
 *
 * A real browser default leaked through on the settings screens: `2px outset`,
 * #f0f0f0, Arial, `padding:1px 6px`. Anything carrying a portal class is left
 * alone — this is a floor, not a repaint.
 * ------------------------------------------------------------------------- */
button:not([class]), input[type="submit"]:not([class]) {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #357B7D;
  border: 0;
  border-radius: 4px;
  padding: 10px 18px;
  min-height: 40px;
  cursor: pointer;
  transition: background-color .16s cubic-bezier(.22,.61,.36,1);
}
button:not([class]):hover, input[type="submit"]:not([class]):hover { background: #2C6A6C; }
button:not([class]):disabled { opacity: .45; cursor: not-allowed; }


/* ---------------------------------------------------------------------------
 * 5. THE PARTY RUNNING-ORDER ROW OVERLAPPED ITSELF.
 *
 * Measured on /staff/?tab=parties&pkg=pkg_surfspa at 1200px: the row is
 * `grid-template-columns:18px 150px 184px 104px 132px`, and `.ssr-pres-when`
 * — `white-space:nowrap`, holding "for" + a 62px number field + "hr" — needs
 * about 120px. It overran its 104px track by 16px, and `.ssr-pres-ctl` is
 * `justify-self:end`, so the "same time" label was drawn 30px ON TOP of "hr".
 * That is the illegible row in Nick's screenshot, and it is a fixed-track
 * problem rather than a font-size one.
 *
 * Two fixed tracks become `auto`, so each sizes to its own content, and the
 * select/description column takes the slack with `minmax(0,1fr)` — the
 * `minmax(0,...)` rather than a bare `1fr` because a bare `1fr` has a min-content
 * floor and would push the row wide again instead of letting the select shrink.
 *
 * `.ssr-pres-grp.multi` is untouched in spirit: it restyles the row to `18px 1fr`
 * and stacks these children vertically, which is correct and does not overlap.
 *
 * !important on these two, unlike everything else in this hand-written layer: they
 * override a rule their inline CSS already sets, and inline prints later. A first
 * deploy without it measured as unchanged on the live page — 18px 150px 184px 104px
 * 132px, overlap now 50px because `.ssr-pres-ctl{gap:10px}` had landed and widened it.
 * Fourth time this session. Deployed is not applied.
 * ------------------------------------------------------------------------- */
.ssr-pres-row {
  grid-template-columns: 18px 150px minmax(0, 1fr) auto auto !important;
}
.ssr-pres-grp.multi .ssr-pres-row {
  grid-template-columns: 18px 1fr !important;
}
/* Give the label room to breathe now that its column is content-sized. */
.ssr-pres-ctl { gap: 10px; }
.ssr-pres-when { justify-self: start; }


/* ---------------------------------------------------------------------------
 * 6. TAP TARGETS ON THE MANAGER BUTTONS.
 *
 * `.ssr-mgr-btn` is `padding:9px 16px` at 14px, which measures 31px tall on the
 * live page. These are the Save and navigation buttons on every settings screen,
 * and the settings screens are used on the same wall-mounted tablet as the front
 * desk. 31px is under any reasonable finger target.
 *
 * 40px rather than the 44px guideline, because 44 would visibly out-size the
 * `.ssr-mgr-btn-sync` primary beside it and these are secondary controls. It
 * matches the 40px floor the inputs and selects above already use, so a row of
 * a field and its button lines up.
 *
 * Scoped to `.ssr-mgr-btn` deliberately: the calendar's chips and pills are
 * dense information, not controls, and giving them a 40px floor would wreck the
 * booking grid.
 * ------------------------------------------------------------------------- */
.ssr-mgr-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ---------------------------------------------------------------------------
 * 7. CLIPPED CALENDAR BANDS — fade, not a hard edge.
 *
 * Nick, 15 Aug: "handle off-grid bookings gracefully. maybe faded out instead of
 * abrupt cutting off."
 *
 * The substance is already handled in class-staff-portal.php and handled well: bands
 * are clamped to the posted-hours window, a clipped edge gets `.clip-t` / `.clip-b`,
 * the band's real window is prepended to its subtitle, and anything falling WHOLLY
 * outside the window is listed under the grid rather than dropped. None of that is
 * touched here.
 *
 * What is left is how the clipped edge looks. It renders as `2px dashed currentColor`
 * with the corners squared off — a deliberate "continues past this point" mark, and
 * a reasonable one, but at a glance it reads as a border rather than as continuation,
 * which is what makes it feel abrupt.
 *
 * A mask fades the band out into the grid edge instead, which is the thing it is
 * actually doing: the booking does not stop there, the view does.
 *
 * 14px of fade, deliberately short. A top-clipped band carries its label at the top,
 * and a long fade would take the label with it — the point is to soften the edge, not
 * to hide the booking. The dashes come off; the subtitle keeps the real times, so
 * nothing that was communicated is lost.
 *
 * `.ssr-tl .ssr-tl-ev.clip-t` is (0,3,0) against their (0,2,0), so this wins on the
 * cascade rather than on !important.
 *
 * -webkit-mask-image alongside mask-image for the Android WebView the tablets run.
 * ------------------------------------------------------------------------- */
.ssr-tl .ssr-tl-ev.clip-t {
  border-top: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
.ssr-tl .ssr-tl-ev.clip-b {
  border-bottom: 0;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 14px);
          mask-image: linear-gradient(to top, transparent 0, #000 14px);
}
/* A band clipped at BOTH ends — a party that starts before opening and runs past
   close. Two mask-images do not compose, so the pair needs its own gradient. */
.ssr-tl .ssr-tl-ev.clip-t.clip-b {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
/* A mask is a visual effect and Safari/WebView have historically dropped it under
   reduced-motion-adjacent accessibility settings. The dashed edge is the fallback
   that still says "there is more", so it comes back if masking is unsupported. */
@supports not (mask-image: linear-gradient(#000, #000)) {
  .ssr-tl .ssr-tl-ev.clip-t { border-top: 2px dashed currentColor; }
  .ssr-tl .ssr-tl-ev.clip-b { border-bottom: 2px dashed currentColor; }
}


/* =========================================================================== *
 * HAND LAYER — contrast repairs, 16 Aug.
 *
 * Appended by hand, NOT generated by tools/genstaff.py. If that script ever
 * regenerates this file, re-apply this block.
 *
 * Nick, 16 Aug, on the day calendar's booking panel: "these labels are illegible."
 * They were, and a sweep of the whole screen found five distinct failures against
 * WCAG AA — measured, not eyeballed, compositing each colour against its real
 * background:
 *
 *   .ssr-tl-closed          #A9B7BD on #F3FAF7   1.94:1   (11px)  worst on the page
 *   .ssr-pty-rows label     #7A8A92 on #FFFFFF   3.57:1   (14px)  Nick's report
 *   .ssr-staff-nav-label    #B85E10 on #FDEBD2   3.87:1   (12.8px)
 *   .ssr-pty-go             #FFFFFF on #3D8D90   3.88:1   (14px)
 *   .ssr-cal-nav            #357B7D on #E7EFED   4.20:1   (17px)
 *
 * Every replacement below is an existing Product token — nothing new is invented —
 * and each one is stated with the ratio it now measures.
 *
 * !important throughout, for the reason the generated part of this file already gives:
 * the portal's own CSS is inline and prints after this stylesheet. The first cut of this
 * block omitted it and two of the five silently lost the cascade — .ssr-pty-go stayed at
 * 3.88:1 and .ssr-cal-nav at 4.20:1 while the other three took.
 * =========================================================================== */

/* "Closed" on a timeline lane. 1.94:1 is not a legibility problem, it is invisible
   text !important; muted ink takes it to 4.68:1 on that lane wash. */
.ssr-tl .ssr-tl-closed {
  color: #5A7482 !important;
}

/* The booking panel's field labels — Package, Guests, Hours, When, Phone, Email,
   Food, Swag. First span in each row is the label, second is the value; only the
   label was under-inked. #5A7482 measures 4.94:1 on white. */
.ssr-pty-rows li > span:first-child {
  color: #5A7482 !important;
}

/* Active nav pill. The accent-on-sand pairing needs the darker sand ink to clear the
   floor: #8A5A22 on #FDEBD2 is 5.05:1. */
.ssr-staff-nav-btn.active .ssr-staff-nav-label,
.ssr-staff-nav-btn.active {
  color: #8A5A22 !important;
}

/* "Open the booking". #3D8D90 is the legacy brand teal that fails AA as a fill under
   white text, the same failure the activity buttons had. #357B7D is the same hue at
   a darker value: 4.97:1. */
.ssr-pty-go {
  background-color: #357B7D !important;
  border-color: #357B7D !important;
}

/* Calendar prev/next. Rather than invent a darker teal outside the palette, the
   control gets a white ground, which takes the existing #357B7D to 4.92:1 and gives
   the arrows a proper button edge. */
.ssr-cal-nav {
  background-color: #FFFFFF !important;
  border: 1px solid #D8E6E6 !important;
}


/* =========================================================================
 * Active states restate their ink.
 *
 * The failure above is structural, not particular: this stylesheet sets `color: ... !important`
 * on a lot of base controls, so any active rule that changes only the background leaves the
 * inactive ink on a dark fill. These are the filled active states in the staff app; the nav pill
 * is deliberately excluded because it is dark-on-sand by design and already documented above.
 * ========================================================================= */
.ssr-staff-app .ssr-price-tab.active,
.ssr-staff-app .ssr-cal-vbtn.active,
.ssr-staff-app .ssr-seg.active,
.ssr-staff-app [role="tab"][aria-selected="true"],
.ssr-staff-app .ssr-tab.is-on,
.ssr-staff-app .ssr-pill.is-on {
	color: #fff !important;
}