/* GENERATED by Scripts/sync_design_system.py from PageSoar's ui/css/02-controls.css (source sha256 1f6301e30c37b5df), theme: Nowlark (dark and orange).
   DO NOT EDIT. The design system is PageSoar's; Nowlark differs only by the theme in that script, and
   tests/test_the_design_system_is_pagesoars.py fails if this file is not what the script produces. */
/* ==========================================================================
   02-controls.css — the form controls a platform draws its own way, drawn by
   PageSoar instead: the select, the checkbox and the radio button.

   ONE SHEET FOR THE APP AND THE FRONT DOOR. The front door serves this file
   unchanged as /_fd/css/controls.css, so a checkbox on the sign-in page and one
   on the Bulk screen are the same checkbox (frontdoor/front_door._static_path).

   Why they are drawn here at all:
   - Safari ignores a native select's height and padding, so a select beside a text
     field sat shorter than it (the owner, 2026-09-18).
   - A native checkbox's own border is too faint on the dark surfaces (WCAG 1.4.11
     wants 3:1), and the fix used to be an outline around it, which drew a square
     inside a square (the owner, 2026-09-18: "broken looking check boxes").
   Every value is a token.
   ========================================================================== */

/* ── select ─────────────────────────────────────────────────────────────── */
/* The two :not()s give this the weight to outlast a class rule's `background`
   shorthand, which would otherwise wipe the chevron and leave no arrow at all. */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;background-image:var(--select-chevron);
  background-repeat:no-repeat;background-position:var(--select-chevron-pos);background-size:var(--select-chevron-size);
  padding-right:var(--select-pad-end)}

/* ── checkbox and radio ─────────────────────────────────────────────────── */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;box-sizing:border-box;
  display:inline-grid;place-content:center;width:var(--sp-4);height:var(--sp-4);margin:0;vertical-align:middle;
  border:var(--bw) solid var(--control-line);border-radius:var(--r-check);background:var(--surface);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--hover-line)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:var(--bw-2) solid var(--ring);
  outline-offset:var(--bw-2)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:var(--op-dim);cursor:not-allowed}

/* The tick: two sides of a box, turned. */
input[type=checkbox]::before{content:"";box-sizing:border-box;width:var(--sp-15);height:var(--sp-25);
  border:solid var(--on-fill);border-width:0 var(--bw-2) var(--bw-2) 0;
  transform:translateY(calc(var(--bw) * -1)) rotate(45deg) scale(0);transition:transform var(--dur-fast) var(--ease-out)}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate{background:var(--brand);border-color:var(--brand)}
input[type=checkbox]:checked::before{transform:translateY(calc(var(--bw) * -1)) rotate(45deg) scale(1)}
/* Some of a group chosen: a bar, not a tick. */
input[type=checkbox]:indeterminate::before{width:var(--sp-2);height:var(--bw-2);border:0;background:var(--on-fill);
  transform:none}

/* The radio's dot. */
input[type=radio]::before{content:"";width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--brand);
  transform:scale(0);transition:transform var(--dur-fast) var(--ease-out)}
input[type=radio]:checked{border-color:var(--brand)}
input[type=radio]:checked::before{transform:scale(1)}

@media (prefers-reduced-motion: reduce){
  input[type=checkbox],input[type=radio],input[type=checkbox]::before,input[type=radio]::before{transition:none}
}

/* ── disclosure (details / summary) ─────────────────────────────────────── */
/* ONE CHEVRON FOR EVERY DISCLOSURE. The browser's own marker is a small black
   triangle that ignores the type scale and the appearance, and six kinds of
   <details> still showed it (the owner, 2026-09-25: "poorly styled accordions with
   those little triangle icons left over from the initial build"). Three more drew
   their own "▸ ▾ ▴" text glyphs, each a different size. Now the marker is gone
   everywhere and one drawn chevron follows the summary's text colour, pointing down
   when closed and up when open, the same direction as the task rows' chevron.
   Kinds with their own mark opt out: the audit's passing row (.passwrap, the task
   rows' 28px chevron), the site FAQ's plus (.s-q) and the site menu's burger
   (.s-menu). tests/js/test_extra_content_opens_in_a_dialog.js holds every
   <summary> on screen to this. */
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details:not(.passwrap):not(.s-q):not(.s-menu):not(.hdmenu)>summary{display:flex;align-items:center;gap:var(--sp-2)}
details:not(.passwrap):not(.s-q):not(.s-menu):not(.hdmenu)>summary::after{content:"";flex:none;box-sizing:border-box;
  width:var(--sp-15);height:var(--sp-15);border:solid currentColor;border-width:0 var(--bw-2) var(--bw-2) 0;
  transform:translateY(calc(var(--sp-05) * -1)) rotate(45deg);transition:transform var(--dur-fast) var(--ease-out)}
details[open]:not(.passwrap):not(.s-q):not(.s-menu)>summary::after{transform:translateY(var(--sp-05)) rotate(180deg) rotate(45deg)}
@media (prefers-reduced-motion: reduce){details>summary::after{transition:none}}

/* A TEXT BOX SCROLLS DOWN, NEVER SIDEWAYS. Safari drew a horizontal scrollbar under the
   Check new copy box (the owner, 2026-09-19: "only vertical scroll bar is allowed").
   Every textarea wraps, long words included, and hides sideways overflow. */
textarea{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden;overflow-y:auto}

/* NO ZOOM ON TAP. iOS Safari zooms the whole page when a text field under 16px takes
   focus, and leaves it zoomed: the sign-in card then ran off both edges of the owner's
   iPhone (2026-09-19). On touch screens and narrow widths every field is at least
   --fs-input-touch. The app and the front door both load this sheet.
   :not(#_) gives the rule an id's weight, so no class-level size (".field", ".inp")
   can win over it on a phone: the role select kept 14px under ".field" without it. */
@media (max-width: 820px), (pointer: coarse){
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea):not(#_){
    font-size:var(--fs-input-touch)}
}

/* On a touch screen the md control height IS the finger's target: every field, and the md button that acts on it,
   grows to 44px together, so they stay one height (70-system.css) and a field needs no invisible layer, which a
   replaced element cannot draw (queue 278: 36px fields were the largest group of small targets left). */
@media (pointer: coarse){:root{--ctl-h:var(--touch-target)}}

/* A FINGER'S TARGET IS 44PX EVEN WHERE THE CONTROL IS SMALLER (Apple's minimum; measured on pagesoar.com at 375px,
   2026-09-28: every screen's mini buttons were 30px tall, its breadcrumbs 21px). On a touch
   screen an invisible layer grows each small control's hit area to at least 44x44 around its centre, so nothing
   moves: inset percentages are of the control's own box, and min() leaves a control already that big alone. */
@media (pointer: coarse){
  :is(.btn:not(.wsrow-open),.crumb,button.bpill,button.scoreinfo,a.addr){position:relative}
  :is(.btn:not(.wsrow-open),.crumb,button.bpill,button.scoreinfo,a.addr)::before{content:"";position:absolute;
    inset:min(0px,calc((100% - var(--touch-target)) / 2)) min(0px,calc((100% - var(--touch-target)) / 2))}
}
/* A small button stacked over its own words (a list row: the button, then its caption) keeps its layer's reach clear of
   them, or a tap on the caption's first line pressed the button (Impeccable read the caption as covered, /results/dashboards
   at 320, queue 278). */
@media (pointer: coarse){.errrow>.btn.sm{margin-bottom:calc((var(--touch-target) - var(--ctl-h-sm)) / 2)}}

/* ── date field ─────────────────────────────────────────────────────────── */
/* ONE WAY TO SHOW A DATE, IN A FIELD TOO. A native date input writes the date in the
   machine's own format (08/27/2026 on a US Mac) beside every other date in the app
   reading "27 Aug 2026" (the owner, 2026-09-25). dateField() (00-core.js) keeps the
   native input, and so its picker and its keyboard, and lays fmtDate's words over its
   own digits, which are drawn in no colour. The field's shape is the app's one field
   (70-system.css); this sheet only swaps what it shows. */
.datefield{position:relative;display:inline-flex;align-items:center;min-width:0}
.datefield>input[type=date]{color:transparent;-webkit-text-fill-color:transparent;cursor:pointer;min-width:var(--size-40)}
/* iOS Safari draws a date field's value in its own part and colours it from the text fill, not from color: the
   Report card's From and To read "31 Aug 2026" over iOS's own "Aug 31, 2026" on an iPhone (2026-09-29). */
.datefield>input[type=date]::-webkit-date-and-time-value{color:transparent;-webkit-text-fill-color:transparent}
.datefield>input[type=date]::-webkit-datetime-edit{color:transparent}
.datefield>input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:var(--op-dim)}
.datefield>input[type=date]:focus::-webkit-datetime-edit{color:transparent}
.datefield>.dateshow{position:absolute;inset-inline-start:var(--sp-3);top:50%;transform:translateY(-50%);
  cursor:pointer;color:var(--ink);font-size:var(--fs-body);white-space:nowrap}

/* ── every CTA: no underline, in any state ────────────────────────────────
   The owner, 2026-09-24 (item 59): "You can't have it have an underline". A button, a link
   in a button's clothes, a link-styled button and any link standing in a row of actions is
   marked as an action by its colour and weight, never by an underline at rest, on hover, on
   focus or on press; focus keeps its ring. A link inside a sentence, a page's title or
   address in a list, and the navigation and footer links are not actions and are not here.
   In THIS sheet because the app and the front door share it, so the judgement is made once.
   tests/js/test_every_cta_is_plain_and_stacks_right.js reads every rendered surface and every
   loaded rule for it. */
:is(button,.btn,.hguide,
  .d-btn,.cw-btn,.s-more,.btnrow a,.sheetfoot a,.storyactions a,.rowend a,.acts a,.rvfoot a,.sechd-side a,.hpacts a,
  .pagehead-a a,.wsrow-a a,.s-hero-a a,.s-cta-a a):is(:any-link,:hover,:focus,:focus-visible,:active,:not(a)){
  text-decoration:none}

/* A TOOLTIP, for what a row is worth (the owner, 2026-10-08): any element with data-tip shows it on hover and on
   keyboard focus, so it is not a mouse-only hint. Not on a popover's button (infoTip, aria-controls naming its
   panel): there data-tip holds the panel's id, and the hint printed "tip12" over every "Why?" (found 2026-10-17). */
[data-tip]:not([aria-controls]){position:relative}
[data-tip]:not([aria-controls])::after{content:attr(data-tip);position:absolute;left:var(--sp-3);bottom:calc(100% + var(--sp-1));z-index:var(--z-popover);
  width:max-content;max-width:var(--size-56);padding:var(--sp-2) var(--sp-3);border-radius:var(--r);
  background:var(--ink);color:var(--surface);font-size:var(--fs-sm);font-weight:var(--fw-regular);line-height:var(--lh-base);
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out)}
[data-tip]:not([aria-controls]):hover::after,[data-tip]:not([aria-controls]):focus-visible::after{opacity:1;visibility:visible}