/* The new design (owner, 2026-09-25) -- see ui-look.js. A3 on a desktop, B3 on a phone (<= 768px).
   Every rule is scoped to html.look-new: with Classic chosen none of it applies.
   The language is the coach page's (public/trial-coach.html): F45 Gotham, white page, ink text,
   square corners, thin lines instead of boxes and shadows, a column-heading row ruled in ink.
   It targets what the app pages share: .sidebar (+ .nav / .sidebar-nav, .nav-item, .nav a),
   .main / .app-main, .header / .topbar, table, .card, .stat. Each app keeps its own sidebar colour. */

@font-face { font-family: 'Coach Gotham'; src: url('https://assets.cdn.filesafe.space/JXvGSSNYRoySWRtn6UBO/media/691c2209c20a255411a8e894.otf') format('opentype'); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Coach Gotham'; src: url('https://assets.cdn.filesafe.space/JXvGSSNYRoySWRtn6UBO/media/691c2207c20a256818a8e857.otf') format('opentype'); font-weight: 600 900; font-style: normal; font-display: swap; }

/* ================= tokens (design system, 2026-09-25) =================
   Every colour in this file is one of these. A page moving onto the new look uses them too; a new colour is a new
   token here, never a hex in a rule. Scoped to html.look-new, so Classic is untouched. */
html.look-new {
  --ink:          #1B2140;                 /* text, rules under headings, primary lines */
  --text-2:       #374151;                 /* values in a detail grid */
  --muted:        #5B6270;                 /* secondary text, labels (6.2:1 on white, 5:1 on --select; was #6B7280, under 4.5:1 on a banded row) */
  --faint:        #9AA0AC;                 /* a dim mark / "none" -- not for text you must read (2.6:1) */
  --rule:         #DADDE3;                 /* hairlines between rows, field borders */
  --rule-soft:    #EEF0F3;                 /* lines inside a detail block */
  --paper:        #FFFFFF;                 /* the page */
  --wash:         #F7F8FA;                 /* hover, an open row */
  --tone-trial:   #1A1F4E;                 /* trial: F45 navy, bold (owner, 2026-09-30: fewer colours, classic F45) */
  --tone-blue:    #1A1F4E;                 /* informational: F45 navy, bold (was Challenge blue; classic F45 since 2026-09-30) */
  --tone-ok:      #1C6B33;                 /* done / good */
  --tone-warn:    #9A5B00;                 /* needs a person */
  --tone-bad:     #98211F;                 /* failed / wrong */
  --on-dark-rule: rgba(255,255,255,.14);   /* a hairline on the coloured sidebar */
  --band:         #F5F6F8;                 /* every other row of a table or row list */
  --hover:        #ECEEF2;                 /* the row under the pointer */
  --select:       #E4E8F2;                 /* a chosen row / month */
  --fs-meta:      12px;                    /* labels, column headings, badges, anything small -- the floor */
  --fs-body:      13px;                    /* table cells, fields, buttons */
  --fs-em:        15px;                    /* a row's name */
  --fs-sec:       18px;                    /* a section heading */
  --fs-title:     24px;                    /* the page title */
  --ctl-h:        32px;                    /* one height for every field and button */
  --ink-hover:    #2C3358;                 /* a primary button under the pointer */
  --tab-strip:    #F3F4F6;                 /* the strip the page tabs sit on */
  --tab-hover:    #E9EAEE;                 /* a tab under the pointer */
  --text-3:       #5B6270;                 /* a tab that is not open (= --muted since 2026-09-30: one grey) */
  --brand-red:    #D6001C;                 /* F45 red */
  --accent:       #D6001C;                 /* F45 red: the open tab's top edge (classic F45, owner 2026-09-30; sidebars keep their Challenge accent) */
  --danger-wash:  #FBEDEC;                 /* a danger button under the pointer */
  --ctl-h-cell:   26px;                    /* ... inside a table cell */
  /* charts: F45 colours + the F45 Challenge colours (owner, 2026-09-29) -- read by the SVG charts in membership.html */
  --chart-navy:   #1A1F4E;                 /* F45 navy: trials from leads */
  --chart-red:    #D6001C;                 /* F45 red (classic F45 again, owner 2026-09-30) */
  --chart-blue:   #6E7391;                 /* navy mid-tone: direct trials */
  --chart-pink:   #EB8A96;                 /* F45 red tint: class pack */
  --chart-magenta:#8C0013;                 /* dark F45 red: a fifth series */
  --chart-tint:   #BAB7CD;                 /* F45 navy tint: the volume behind (leads) */
  /* studios (owner, 2026-09-30: "too many colours"): no colour of their own any more -- a studio name is bold ink.
     F45 red on Mariahilf read as an error beside the red "failed" status. Three tokens, so one line brings a colour back. */
  --studio-mh:    #1B2140;
  --studio-nb:    #1B2140;
  --studio-fs8:   #1B2140;
  /* body scans (owner, 2026-09-30: "a narrow bar, slightly different colour"): a navy-tint lavender, so a scan
     reads as not-a-class at a glance beside the grey class cards */
  --scan-edge:    #9A9FB8;                 /* navy grey (was lavender, 2026-09-30) */
  --scan-bg:      #EEEFF4;
  --scan-ink:     #3A4060;                 /* text on --scan-bg (9:1) */
  --font: 'Coach Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ================= both: the page ================= */
html.look-new body {
  font-family: var(--font);
  font-synthesis: none; background: var(--paper); color: var(--ink);
}
html.look-new .main, html.look-new .app-main { background: var(--paper); }
html.look-new .header, html.look-new .topbar { background: var(--paper); border-bottom: 0; padding: 20px 24px 8px; }
html.look-new .header h1, html.look-new .header h2, html.look-new .topbar h1, html.look-new .topbar h2 {
  font-size: 24px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink);
}
html.look-new .header .view-help { font-size: 13px; color: var(--muted); margin-top: 4px; }
html.look-new .filters { background: var(--paper); border-bottom: 0; }
html.look-new .filters select, html.look-new .filters input { border-color: var(--rule); color: var(--ink); }
html.look-new .content { background: var(--paper); }

/* square: no rounded corners, no soft shadows */
html.look-new table, html.look-new .card, html.look-new .stat, html.look-new input, html.look-new select,
html.look-new textarea, html.look-new button, html.look-new .pill, html.look-new .tile { border-radius: 0; }
html.look-new .tile { box-shadow: none; }
html.look-new .card { box-shadow: none; }

/* tables: no box, a heading row ruled in ink, thin grey lines between rows */
html.look-new table { border: 0; background: var(--paper); box-shadow: none; }
html.look-new thead { background: var(--paper); }
html.look-new th {
  background: var(--paper); color: var(--muted); text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--ink);
}
html.look-new th:hover { color: var(--ink); }
html.look-new td { border-color: var(--rule); }
html.look-new tbody tr:hover td { background: var(--wash); }
html.look-new .stat { border: 0; border-top: 2px solid var(--ink); box-shadow: none; }
html.look-new .stat .label { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* the current section's views as tabs above the page (membership.html; ui-look.js fills it) */
.look-tabs { display: none; }
html.look-new .look-tabs:not([hidden]) {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin: 14px 24px 0; border-bottom: 1px solid var(--rule);
}
html.look-new .look-tabs::-webkit-scrollbar { display: none; }
html.look-new .look-tabs a {
  flex: 0 0 auto; padding: 8px 0 7px; margin: 0 22px -1px 0; border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap;
}
html.look-new .look-tabs a:hover { color: var(--ink); }
html.look-new .look-tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
html.look-new .look-tabs + .header { padding-top: 14px; }

/* ================= A3, desktop: the left sidebar stays, calmer ================= */
html.look-new .sidebar-section-title, html.look-new .nav-label, html.look-new .nav-group {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600;
}
html.look-new .nav-group.as-item { font-size: 14px; font-weight: 500; }
html.look-new .nav a, html.look-new .nav-item { font-size: 14px; }
html.look-new .nav a.sub { font-size: 13px; }
html.look-new .nav a.active, html.look-new .nav-item.active { font-weight: 700; }

/* ================= B3, phone: the sidebar is a navy strip across the top ================= */
@media (max-width: 768px) {
  html.look-new .app, html.look-new .app-layout, html.look-new body { flex-direction: column; }
  html.look-new .app-layout { display: flex; }
  html.look-new .sidebar {
    display: flex !important; transform: none !important; position: sticky !important; top: 0; z-index: 70;
    width: auto !important; height: auto !important; align-self: stretch;
    flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; padding: 0;
  }
  html.look-new .sidebar-logo { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 8px 12px; border: 0; }
  html.look-new .sidebar-logo .app-switch { margin-top: 0; flex: 1 1 auto; max-width: 220px; }
  html.look-new .sidebar-spacer { display: none; }
  html.look-new .sidebar-footer { border: 0; padding: 8px 12px; }
  html.look-new .sidebar-footer button { width: auto; min-height: 40px; }
  html.look-new .nav, html.look-new .sidebar-nav {
    order: 10; flex-basis: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0;
    overflow-x: auto; padding: 0; margin: 0; border-top: 1px solid var(--on-dark-rule); scrollbar-width: none;
  }
  html.look-new .nav::-webkit-scrollbar, html.look-new .sidebar-nav::-webkit-scrollbar { display: none; }
  html.look-new #navList { display: flex; flex-wrap: nowrap; }
  html.look-new .sidebar-section { display: contents; }
  html.look-new .sidebar-section-title, html.look-new .nav-label, html.look-new .nav-divider,
  html.look-new .nav-group-items, html.look-new .nav-group .chev { display: none !important; }
  html.look-new .nav a, html.look-new .nav-item, html.look-new .nav-group, html.look-new .nav-group.as-item {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px;
    margin: 0; padding: 10px 12px 8px; border: 0; border-bottom: 3px solid transparent; background: none;
    font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap;
  }
  html.look-new .nav a.active, html.look-new .nav-item.active, html.look-new .nav-group.has-active {
    color: var(--paper); border-bottom-color: currentColor; background: none;
  }
  html.look-new .mbar, html.look-new .nav-scrim { display: none !important; }
  html.look-new .sidebar #logPanel { display: none !important; }   /* myClubs' sync log: a desk tool, hidden on phones as before */
  html.look-new .header, html.look-new .topbar { padding: 14px 16px 6px; }
  html.look-new .header h1, html.look-new .header h2, html.look-new .topbar h1, html.look-new .topbar h2 { font-size: 20px; }
  html.look-new .look-tabs:not([hidden]) { margin: 10px 16px 0; }
  html.look-new .filters select, html.look-new .filters input, html.look-new .filters button { min-height: 44px; }
}

/* ================= the coach page's rows (membership.html rsHTML: person and event lists) ================= */
html.look-new .rs-list { max-width: 1180px; }
html.look-new .rs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 0 8px; border-bottom: 1px solid var(--ink); font-size: 13px; color: var(--muted); }
html.look-new .rs-bar select { font: inherit; font-size: 13px; color: var(--ink); border: 1px solid var(--rule); background: var(--paper); padding: 5px 8px; margin-left: 6px; }
html.look-new .rs-dir { font: inherit; font-size: 13px; color: var(--ink); border: 1px solid var(--rule); background: var(--paper); padding: 5px 10px; cursor: pointer; }
html.look-new .rs-row { border-bottom: 1px solid var(--rule); }
html.look-new .rs-line { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center; padding: 11px 4px; cursor: pointer; }
html.look-new .rs-line.rs-sel { grid-template-columns: 24px 180px minmax(0, 1fr) auto 16px; }
html.look-new .rs-line:hover .rs-name > b { text-decoration: underline; }
html.look-new .rs-line:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
html.look-new .rs-type { min-width: 0; padding-left: 8px; border-left: 3px solid var(--ink); color: var(--ink); }
html.look-new .rs-type b { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.look-new .rs-type small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.3; overflow: hidden; }   /* two lines, not an ellipsis: "Passed 200 · reached at 203 (500 ✓)" */
/* a badge standing as the type reads as the type's own text, not a chip */
html.look-new .rs-type b .badge { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: 0; }
html.look-new .rs-type[data-tone="trial"] { border-left-color: var(--tone-trial); } html.look-new .rs-type[data-tone="trial"] b { color: var(--tone-trial); }
html.look-new .rs-type[data-tone="blue"]  { border-left-color: var(--tone-blue); } html.look-new .rs-type[data-tone="blue"] b { color: var(--tone-blue); }
html.look-new .rs-type[data-tone="green"] { border-left-color: var(--tone-ok); } html.look-new .rs-type[data-tone="green"] b { color: var(--tone-ok); }
html.look-new .rs-type[data-tone="mid"]   { border-left-color: var(--tone-warn); } html.look-new .rs-type[data-tone="mid"] b { color: var(--tone-warn); }
html.look-new .rs-type[data-tone="bad"]   { border-left-color: var(--tone-bad); } html.look-new .rs-type[data-tone="bad"] b { color: var(--tone-bad); }
/* a badge in the bar decides its colour */
html.look-new .rs-type:has(.b-bad)  { border-left-color: var(--tone-bad); }
html.look-new .rs-type:has(.b-ok)   { border-left-color: var(--tone-ok); }
html.look-new .rs-type:has(.b-mid)  { border-left-color: var(--tone-warn); }
html.look-new .rs-type:has(.b-dim)  { border-left-color: var(--faint); }
html.look-new .rs-name { min-width: 0; }
html.look-new .rs-name > b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.look-new .rs-name > small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
html.look-new .rs-name > small i { font-style: normal; }
html.look-new .rs-key { text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.look-new .rs-key small { display: block; font-size: var(--fs-meta); font-weight: 500; color: var(--muted); margin-top: 2px; }
html.look-new .rs-none { color: var(--faint); }
html.look-new .rs-chev { font-size: 18px; color: var(--muted); text-align: right; }
html.look-new .rs-row.open { background: var(--wash); }
html.look-new .rs-detail { padding: 0 4px 0 198px; }
html.look-new .rs-row.open .rs-detail { padding-bottom: 16px; }
html.look-new .rs-line.rs-sel + .rs-detail { padding-left: 236px; }
html.look-new .rs-act { margin: 2px 0 10px; }
html.look-new .rs-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: 13px; margin: 0; }
html.look-new .rs-grid dt { color: var(--muted); }
html.look-new .rs-grid dd { margin: 0; font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; }   /* gray-700 (owner, 2026-09-25) */
html.look-new .rs-grid dd .clip { max-width: none; white-space: normal; }
html.look-new .rs-sec { font-size: 14px; font-weight: 700; padding: 20px 4px 5px; border-bottom: 1px solid var(--ink); }
html.look-new .rs-sec span { color: var(--muted); font-weight: 500; margin-left: 6px; }
html.look-new .rs-row.shirt-pending { box-shadow: inset 3px 0 0 var(--tone-warn); }   /* needs a person: a bar, not a fill */
@media (max-width: 768px) {
  html.look-new .rs-line { grid-template-columns: 116px minmax(0, 1fr) auto 10px; gap: 8px; }
  html.look-new .rs-line.rs-sel { grid-template-columns: 22px 110px minmax(0, 1fr) auto 10px; }
  html.look-new .rs-type b { font-size: 12px; } html.look-new .rs-type small { font-size: var(--fs-meta); }
  html.look-new .rs-name > b { font-size: 14px; }
  html.look-new .rs-key { font-size: 13px; white-space: normal; max-width: 96px; line-height: 1.2; }
  html.look-new .rs-detail, html.look-new .rs-line.rs-sel + .rs-detail { padding-left: 4px; }
  html.look-new .rs-bar select, html.look-new .rs-dir { min-height: 44px; }
}

/* ================= buttons: one primary, one secondary, as on the coach page ================= */
html.look-new .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; padding: 8px 14px; }
html.look-new .btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
html.look-new .btn-secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font-weight: 600; padding: 7px 13px; font-size: 13px; }
html.look-new .btn-secondary:hover { background: var(--tab-strip); }
html.look-new .btn:focus-visible, html.look-new .btn-secondary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ================= tabs that read as tabs (owner, 2026-09-25): the Cockpit's and the section tabs ==========
   A light strip with the tabs on it; the open one is a white box joined to the page below it. */
html.look-new .ck-tabs, html.look-new .look-tabs:not([hidden]) {
  background: var(--tab-strip); border: 0; border-bottom: 1px solid var(--ink); padding: 4px 4px 0; gap: 2px; margin-bottom: 0;
}
html.look-new .ck-tabs button, html.look-new .look-tabs a {
  margin: 0 0 -1px; padding: 9px 16px 8px; border: 1px solid transparent; border-bottom: 0; background: none;
  font-size: 14px; font-weight: 600; color: var(--text-3); text-decoration: none;
}
html.look-new .ck-tabs button:hover, html.look-new .look-tabs a:hover { color: var(--ink); background: var(--tab-hover); }
html.look-new .ck-tabs button.on, html.look-new .look-tabs a.on {
  background: var(--paper); color: var(--ink); border-color: var(--ink); border-top: 3px solid var(--accent); padding-top: 7px;
}
html.look-new .ck-tabs button span { color: var(--muted); }
html.look-new .look-tabs + .header { padding-top: 16px; }

/* the selected tile (the filter the list below follows) is shown by its outline; the old ' ×' after the
   label read as a stray character (owner, 2026-09-25: "??") */
html.look-new .stat.pick.on .label::after { content: none; }
html.look-new .stat.pick.on { border: 1px solid var(--ink); border-top-width: 3px; box-shadow: none; }

/* ================= the sidebar shows the section headings only (owner, 2026-09-25) =================
   Their views are the tabs above the page (ui-look.js); a heading reads as a menu item, the one holding
   the current view as the active one. Phones (B3) already did this. */
html.look-new #navList .nav-group-items { display: none !important; }
html.look-new #navList .nav-group .chev { display: none; }
@media (min-width: 769px) {
  html.look-new #navList .nav-group, html.look-new #navList .nav-group.as-item {
    margin: 0; padding: 10px 16px; border: 0; border-left: 3px solid transparent;
    font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.82);   /* .65 was under 4.5:1 on the lighter sidebars */
  }
  html.look-new #navList .nav-group:hover { background: rgba(255,255,255,.05); color: var(--paper); }
  html.look-new #navList .nav-group.has-active { color: var(--paper); font-weight: 700; background: rgba(255,255,255,.08); border-left-color: var(--app-accent, var(--accent)); }
}

/* =====================================================================================================
   The system (owner, 2026-09-25: "rows banded, all tables the same look and feel; buttons, dates and fields
   are poor; fonts not harmonious; standard text in Gotham Narrow"). One component each, for every page that
   loads this file. Page rules keep layout (widths, alignment, which column is numeric); these decide the look.
   ===================================================================================================== */

/* ---------- type: Gotham Narrow, two cuts only (Book 400, Bold 700), nothing under 12px ----------
   Form controls do not inherit the page font by themselves -- that is where Arial leaked in. Monospace ids
   and codes read as a second typeface; they stay aligned with tabular figures instead. */
html.look-new :is(input, select, textarea, button, optgroup) { font-family: var(--font); font-synthesis: none; }
html.look-new :is(code, kbd, samp, pre, .mono, td.mono) { font-family: var(--font); font-variant-numeric: tabular-nums; }
html.look-new :is(td.mono, .mono) { font-size: var(--fs-meta); }
html.look-new :is(.badge, .cf-util, .tile .k, .tile .s, .legend, .hint) { font-size: var(--fs-meta); }
html.look-new small { font-size: max(var(--fs-meta), .83em); }
html.look-new .badge { letter-spacing: 0; text-transform: none; }

/* ---------- tables: ink heading rule, banded rows, no boxes ----------
   Every data table. Layout tables (the condition grid, form grids, the roster grid) are left out.
   Rows that carry a state (a section heading, a total, a row waiting on staff) are not banded and not
   counted, so the stripes stay even around them. */
html.look-new table:not(.tg-conds, .af-form, .rg) {
  border: 0; border-radius: 0; box-shadow: none; background: var(--paper); border-collapse: collapse; font-size: var(--fs-body);
}
html.look-new table:not(.tg-conds, .af-form, .rg) > thead { background: var(--paper); }
html.look-new table:not(.tg-conds, .af-form, .rg) th {
  background: var(--paper); color: var(--muted); font-size: var(--fs-meta); font-weight: 700; text-transform: none; letter-spacing: 0;
  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--ink); white-space: nowrap;
}
html.look-new table:not(.tg-conds, .af-form, .rg) th:hover { color: var(--ink); }
html.look-new table:not(.tg-conds, .af-form, .rg) td {
  font-size: var(--fs-body); padding: 8px 12px; border: 0; background: transparent;
}
html.look-new table:not(.tg-conds, .af-form, .rg) > tbody > tr:nth-child(even of :not(.fz-sec, .ms-sec, .subtotal, .tot, .selected-month, .editing)) > td { background: var(--band); }
html.look-new table:not(.tg-conds, .af-form, .rg) > tbody > tr:not(.fz-sec, .ms-sec):hover > td { background: var(--hover); }
html.look-new table:not(.tg-conds, .af-form, .rg) > tbody > tr:last-child > td { border-bottom: 1px solid var(--rule); }
/* rows that mean something */
html.look-new table:not(.tg-conds, .af-form, .rg) tr:is(.fz-sec, .ms-sec) > td { background: var(--paper); border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; padding-top: 22px; }
html.look-new table:not(.tg-conds, .af-form, .rg) tr:is(.subtotal, .tot) > td { background: var(--paper); border-top: 1px solid var(--ink); font-weight: 700; }
html.look-new table:not(.tg-conds, .af-form, .rg) tr:is(.selected-month, .editing) > td { background: var(--select); }
html.look-new table:not(.tg-conds, .af-form, .rg) tr.shirt-pending > td:first-child { box-shadow: inset 3px 0 0 var(--tone-warn); }
/* a row that needs a person: a bar on its left edge, never a fill (so the stripes still read) */
html.look-new tr:is(.on-account, .todo, :has(> td.cf-need)) > td:first-child { box-shadow: inset 3px 0 0 var(--tone-warn); }
html.look-new tr.po-err > td:first-child { box-shadow: inset 3px 0 0 var(--tone-bad); }
html.look-new :is(th, td):is(.tot, .grp.tot) { background: transparent; }
html.look-new table:not(.tg-conds, .af-form, .rg) td.tot { font-weight: 700; }
html.look-new table:not(.tg-conds, .af-form, .rg) tr:is(.row-accepted, .row-rejected) .actions { background: inherit; }

/* the row lists (Milestones, Sales, Trials ...) and the coach list band the same way */
html.look-new .rs-row { border-bottom: 0; }
html.look-new :is(.rs-list, .tc-list) .rs-row:nth-child(even of .rs-row) { background: var(--band); }
html.look-new :is(.rs-list, .tc-list) .rs-row:not(.open):hover { background: var(--hover); }
html.look-new :is(.rs-list, .tc-list) .rs-row.open { background: var(--select); }
html.look-new :is(.rs-list, .tc-list) .rs-row:last-child { border-bottom: 1px solid var(--rule); }

/* ---------- fields: text, search, number, date, select, textarea, and the dropdown buttons that act as selects ---------- */
html.look-new :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=button], [type=submit], [type=reset]), select, textarea, .msd-btn, .ms-btn, .ss-btn, .sp-btn):not(.tc-sel, .attr):not(:is(.sidebar, .mbar, .app-switch, .login-card, .pin, .sa-host) *) {
  box-sizing: border-box; min-height: var(--ctl-h); padding: 0 10px; border: 1px solid var(--rule); border-radius: 0;
  background-color: var(--paper); color: var(--ink); font-size: var(--fs-body); font-weight: 400; line-height: 1.2; box-shadow: none;
}
html.look-new textarea:not(.tc-sel, .attr):not(:is(.sidebar, .mbar, .app-switch, .login-card, .pin, .sa-host) *) { padding: 8px 10px; line-height: 1.45; min-height: 64px; }   /* same weight as the field rule above, or its 32px wins */
html.look-new :is(input, select, textarea, .msd-btn, .ms-btn, .ss-btn, .sp-btn):not(.tc-sel, .attr):not(:is(.sidebar, .mbar, .app-switch, .login-card, .pin, .sa-host) *):hover { border-color: var(--muted); }
html.look-new :is(input, select, textarea):not(.tc-sel, .attr):not(:is(.sidebar, .mbar, .app-switch, .login-card, .pin, .sa-host) *):focus,
html.look-new :is(.msd-btn, .ms-btn, .ss-btn, .sp-btn):focus-visible { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
html.look-new :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html.look-new :is(input, select, textarea):disabled { background-color: var(--wash); color: var(--muted); cursor: not-allowed; }
/* one chevron for every select and select-like button */
html.look-new :is(select, .msd-btn, .ms-btn, .ss-btn, .sp-btn):not(.tc-sel):not(:is(.sidebar, .mbar, .app-switch, .login-card, .pin, .sa-host) *) {
  -webkit-appearance: none; appearance: none; padding-right: 28px !important; cursor: pointer; text-align: left;   /* !important: the field rule above outranks this one */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231B2140' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
html.look-new :is(.msd-btn, .ms-btn, .ss-btn, .sp-btn) > :is(.chev, .caret, svg, span[aria-hidden=true]) { display: none; }
html.look-new .msd-btn .k { color: var(--muted); font-weight: 400; }
html.look-new .msd-pop { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }
/* dates: tabular figures, the calendar icon in ink, one width for a date */
html.look-new input:is([type=date], [type=datetime-local], [type=month], [type=time]) { font-variant-numeric: tabular-nums; color-scheme: light; padding-right: 6px; }
html.look-new input[type=date] { width: 9.5em; }
html.look-new input:is([type=date], [type=datetime-local], [type=month], [type=time])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; margin-left: 4px; }
html.look-new input:is([type=date], [type=datetime-local], [type=month], [type=time]):hover::-webkit-calendar-picker-indicator { opacity: 1; }
html.look-new input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
/* checkboxes and radios in ink */
html.look-new input:is([type=checkbox], [type=radio]) { accent-color: var(--ink); width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -2px; cursor: pointer; }
/* in a table cell: the same field, one step smaller */
html.look-new table td :is(input:not([type=checkbox], [type=radio]), select, .msd-btn, .ss-btn):not(.tc-sel, .attr):not(:is(.sidebar, .mbar) *) { min-height: var(--ctl-h-cell); font-size: var(--fs-meta); padding-left: 6px; }
html.look-new table td select:not(.tc-sel):not(:is(.sidebar, .mbar) *) { width: auto; max-width: 100%; padding-right: 24px !important; background-position: right 8px center; }

/* ---------- buttons: three kinds and nothing else ----------
   Secondary (default) = white, ink line.  Primary = ink fill -- the one thing to do here, and a chosen option.
   Danger = red line and text.  Quiet = a word that acts, underlined on hover.  Icon = ×, ✎, ◀ ▶. */
html.look-new :is(.btn, .btn-secondary, .btn-outline, button:is(.btn-sm, .btn-green, .btn-navy, .btn-accept, .btn-reject, .btn-danger, .ghost-btn, .edit-btn), .btn-sm,
  .wg-copy, .bl-back, .rs-dir, .fz-ok, .fz-no, .fz-cert, .fz-errbtn, .af-ask-ok, .af-ask-no, button:is(.edit, .pick, .del, .reset, .cancel),
  .rc-open, .rc-ign, .cal-nav, .wg-pick-btn, button:not([class], [aria-label=Close])):not(:is(.sidebar, .mbar, .look-tabs, .app-switch, .nav, .msd-acts, .ck-tabs, .seg, .login-card, .pin, .sa-host) *) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ctl-h); height: auto; padding: 0 14px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink); font-size: var(--fs-body); font-weight: 700; line-height: 1.2;
  text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; white-space: nowrap; text-decoration: none;
}
html.look-new :is(.btn, .btn-secondary, .btn-outline, .btn-sm, .ghost-btn, .edit-btn, .wg-copy, .bl-back, .rs-dir, .fz-cert, .fz-errbtn,
  .af-ask-no, button:is(.edit, .pick, .reset, .cancel), .rc-open, .rc-ign, .cal-nav, .wg-pick-btn, button:not([class], [aria-label=Close])):not(:is(.sidebar, .mbar, .look-tabs, .app-switch, .nav, .ck-tabs, .seg, .login-card, .pin, .sa-host) *):hover:not(:disabled) { background: var(--wash); }
/* primary */
html.look-new :is(.btn:not(.btn-outline, .btn-secondary, .btn-text, .btn-danger, .btn-reject, .cancel, .btn-sm.btn-outline), .btn-green, .btn-navy, .btn-accept, .fz-ok, .af-ask-ok,
  button:is(.on, .active, [aria-pressed=true]):not(.nav-item, .nav-group, .subtab, .pill, .stat)):not(:is(.sidebar, .mbar, .look-tabs, .app-switch, .nav, .ck-tabs, .seg, .login-card, .pin, .sa-host) *) {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
html.look-new :is(.btn:not(.btn-outline, .btn-secondary, .btn-text, .btn-danger, .btn-reject, .cancel), .btn-green, .btn-navy, .btn-accept, .fz-ok, .af-ask-ok):not(:is(.sidebar, .mbar, .look-tabs, .app-switch, .nav, .ck-tabs, .seg, .login-card, .pin, .sa-host) *):hover:not(:disabled) { background: var(--ink-hover); border-color: var(--ink-hover); }
/* danger */
html.look-new :is(.btn-danger, .btn-reject, .fz-no, button.del):not(:is(.sidebar, .mbar) *) { background: var(--paper); border-color: var(--tone-bad); color: var(--tone-bad); }
html.look-new :is(.btn-danger, .btn-reject, .fz-no, button.del):not(:is(.sidebar, .mbar) *):hover:not(:disabled) { background: var(--danger-wash); }
/* small, and inside a table cell */
html.look-new :is(.btn-sm, td :is(.btn, .fz-ok, .fz-no, .fz-cert, button:is(.edit, .pick, .del, .reset, .cancel), .rc-open, .rc-ign, .edit-btn, .wg-copy, button:not([class], [aria-label=Close])),
  .cf .cf-src button):not(:is(.sidebar, .mbar) *) { min-height: var(--ctl-h-cell); height: auto; padding: 0 10px; font-size: var(--fs-meta); }
/* quiet: a word that acts */
html.look-new :is(.btn-text, .linkish, .ms-link, .bt-link, .bl-link, .fz-undo, .sp-show, .msd-acts button):not(:is(.sidebar, .mbar) *) {
  background: none; border: 0; padding: 0 2px; min-height: 0; color: var(--ink); font-size: var(--fs-body); font-weight: 700; cursor: pointer;   /* not inherit: in a heading it read as one */
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; box-shadow: none;
}
html.look-new :is(.btn-text, .linkish, .ms-link, .bt-link, .bl-link, .fz-undo, .sp-show, .msd-acts button):not(:is(.sidebar, .mbar) *):hover { text-decoration-color: currentColor; }
/* icon */
html.look-new :is(.af-x, .tn-x, .pe-x, .pv-close, .sub-icon-btn, .remove-slot, button[aria-label=Close], .day-meta-row .edit-btn):not(:is(.sidebar, .mbar) *) {
  background: none; border: 0; box-shadow: none; padding: 0 4px; min-height: 24px; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
html.look-new :is(.af-x, .tn-x, .pe-x, .pv-close, .sub-icon-btn, .remove-slot, button[aria-label=Close]):hover { color: var(--ink); }
/* every button: disabled and keyboard focus */
html.look-new button:disabled, html.look-new .btn:disabled { opacity: .45; cursor: not-allowed; }
html.look-new :is(button, .btn, a.btn):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.look-new .sidebar :is(button, a):focus-visible { outline-color: var(--paper); }

/* ---------- phone: fingers, not pointers ---------- */
@media (max-width: 768px) {
  /* the field rule above is heavy (html.look-new :is(input:not(...)):not(...):not(...)), so these repeat its chain to win */
  html.look-new :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=button], [type=submit], [type=reset]), select, .msd-btn, .ms-btn, .ss-btn, .sp-btn):not(.tc-sel, .attr):not(:is(.sidebar, .mbar, .app-switch, .login-card, .pin, .sa-host) *):not(td *) { min-height: 40px; }
  html.look-new :is(.btn, button:not([class])):not(:is(.sidebar, .mbar, td) *) { min-height: 40px; }
  html.look-new :is(input, select, textarea):not([type=checkbox], [type=radio], [type=range]) { font-size: 16px !important; }   /* iOS zooms into anything smaller; !important because table and page rules are heavier */
}

/* ---------- every app's sidebar in its Challenge shade (app-switch.js sets --app-bg / --app-accent) ---------- */
html.look-new[data-app] .sidebar { background: var(--app-bg) !important; }
html.look-new[data-app] :is(.nav a.active, .nav-item.active, #navList .nav-group.has-active) { border-left-color: var(--app-accent) !important; }
html.look-new[data-app] .nav a.cockpit { background: rgba(236, 0, 140, .16) !important; border-left-color: var(--app-accent) !important; }
html.look-new .ck-tabs button.on { border-bottom-color: var(--accent); }

/* ---------- a studio's name is always its colour (ui-look.js tags every exact studio name) ---------- */
html.look-new .st-mh { color: var(--studio-mh) !important; font-weight: 700; }
html.look-new .st-nb { color: var(--studio-nb) !important; font-weight: 700; }
html.look-new .st-fs8 { color: var(--studio-fs8) !important; font-weight: 700; }

/* ---------- status marks: coloured bold text, never a filled chip (the Freezes rule, everywhere) ---------- */
html.look-new .badge, html.look-new [class*="badge-"] { background: none !important; border: 0; padding: 0; border-radius: 0; font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
html.look-new .badge + .badge { margin-left: 8px; }
/* page tabs (Data's sub-tabs) read like the tabs above every page */
html.look-new .subtab { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
html.look-new .subtab.active { color: var(--ink); border-bottom-color: var(--ink); }

/* the suggestion list that replaces the browser's <datalist> popup (ui-look.js) */
.lk-sugg { position: fixed; z-index: 10001; max-height: 260px; overflow-y: auto; background: var(--paper, #FFFFFF); border: 1px solid var(--ink, #1B2140);
  font: 13px/1.3 'Coach Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink, #1B2140); box-sizing: border-box; }
.lk-sugg [data-v] { padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.lk-sugg [data-v]:hover, .lk-sugg [data-v].on { background: var(--hover, #ECEEF2); }

/* =====================================================================================================
   The pages outside the apps (owner, 2026-09-25: "do the sign-in screen and the other pages too")
   ===================================================================================================== */

/* ---------- a page's own password / PIN gate: public/signin.js draws the one sign-in (".sa-*", end of this file) ---------- */

/* ---------- standalone page headers (amanda, fs8-figures, coach): the app header's type, no caps ---------- */
html.look-new .header :is(h1, h2) { letter-spacing: 0; text-transform: none; }
html.look-new .header :is(h1, h2) span { color: inherit; }
html.look-new .header :is(.ctx, .date) { color: var(--muted); font-size: 13px; }
html.look-new .wrap h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
html.look-new :is(td.grptot, td.key) { background: transparent; font-weight: 700; }
html.look-new th .basis { font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }
html.look-new td.mon .sub { font-size: var(--fs-meta); }
html.look-new :is(.note, .basis-note, .loading, .msg) { color: var(--muted); font-size: 13px; }
/* amanda's multi-select panel and the phone's studio switch */
html.look-new .ms-panel { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }
html.look-new .ms-search { border-radius: 0; font-size: var(--fs-body); }
html.look-new .ms-group { font-size: var(--fs-meta); text-transform: none; letter-spacing: 0; color: var(--muted); }
html.look-new .ms-opt .cnt { font-size: var(--fs-meta); }
html.look-new .seg { border: 1px solid var(--ink); border-radius: 0; }
html.look-new .seg button { background: var(--paper); color: var(--ink); border: 0; font-weight: 700; min-height: 40px; border-radius: 0; }
html.look-new .seg button + button { border-left: 1px solid var(--ink); }
html.look-new .seg button.on { background: var(--ink); color: var(--paper); }

/* ---------- the myClubs dashboard's studio dropdown and empty state (coach.html, removed 2026-09-29, shared them) ---------- */
html.look-new .filters-desktop { display: none; }                       /* studio pills -> the dropdown the phone already had */
html.look-new .filters:has(.filters-mobile) { padding: 8px 24px 12px; border-bottom: 0; }
html.look-new .filters-mobile { display: block; width: auto; }
html.look-new .studio-select { width: auto; min-width: 220px; text-transform: none; letter-spacing: 0; border-width: 1px; }
html.look-new .class-time { color: var(--ink); font-variant-numeric: tabular-nums; }
html.look-new .empty-state { color: var(--muted); }
@media (max-width: 600px) { html.look-new .studio-select { width: 100%; } }
/* ================= Member administration tables (Freezes, Memberships, SEPA) — owner, 2026-09-25 =================
   Flat like the Milestones rows: no tinted rows for the ordinary state, no filled chips, section headings as a
   bold line over a dark rule. A row that needs a person keeps a mark — a bar on its left edge, not a fill. */
html.look-new .fz tr.fz-fin td, html.look-new .fz tr.fz-open td { background: none; }
html.look-new .fz tr.fz-sec td { background: none; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); padding-top: 22px; }
html.look-new .fz tr.fz-sec td span { color: var(--muted); font-weight: 500; }
html.look-new .fz tr.fz-unconfirmed td, html.look-new .fz tr.fz-combo-miss td { background: none; }
html.look-new .fz tr.fz-unconfirmed td:first-child { box-shadow: inset 3px 0 0 var(--tone-warn); }
html.look-new .fz tr.fz-combo-miss td:first-child { box-shadow: inset 3px 0 0 var(--tone-bad); }
html.look-new .cf td.cf-need { background: none; }
/* Milestones: the page paints its own amber / green row fills; the system says bar + banding instead */
html.look-new table:not(.tg-conds, .af-form, .rg) tr:is(.shirt-pending, .shirt-received) > td { background: transparent; }   /* the band / hover rules are heavier, so these rows stripe like the rest */
html.look-new .shirt-new { background: none; padding: 0; font-size: var(--fs-meta); color: var(--tone-warn); }
html.look-new .fz .badge, html.look-new .rs-key .badge { background: none; border: 0; padding: 0; font-weight: 700; }
html.look-new .fz .badge + .badge { margin-left: 8px; }
/* status badges everywhere read as coloured bold text in the tone tokens -- never a filled chip, never a page hex */
html.look-new .badge:is(.b-ok, .b-processed, .b-bad, .b-error, .b-mid, .b-dim) { background: none; border: 0; padding: 0; font-weight: 700; }
html.look-new .badge:is(.b-ok, .b-processed) { color: var(--tone-ok); }
html.look-new .badge:is(.b-bad, .b-error) { color: var(--tone-bad); }
html.look-new .badge.b-mid { color: var(--tone-warn); }
html.look-new .badge.b-dim { color: var(--muted); }

/* ================= Coaches: one row per coach, + opens the form (owner, 2026-09-25: "cards collapsable, rows just like in other tables") ================= */
html.look-new .tc-list { margin-bottom: 24px; }
html.look-new .tc-coach > .tc-detail { display: none; }
/* the open form starts at the row's left edge, level with the status text (owner, 2026-09-29: "left alignment";
   the 198px indent under the name column left a blank strip) */
html.look-new .tc-coach.open > .tc-detail { display: block; padding: 4px 4px 18px 15px; }
html.look-new .tc-coach.tc-off { opacity: 1; }
html.look-new .tc-coach.tc-off .rs-name > b { color: var(--muted); }
html.look-new .tc-detail .wg-rows { background: none; border: 0; border-top: 1px solid var(--rule); }
html.look-new .tc-detail .wg-row { padding: 8px 0; border-top: 0; border-bottom: 1px solid var(--rule-soft); }
html.look-new .tc-detail .wg-row .k { color: var(--muted); font-weight: 500; }
html.look-new .tc-detail .tc-pin { background: none; border-bottom: 2px solid var(--ink); }
@media (max-width: 700px) {
  html.look-new .tc-coach.open > .tc-detail { padding-left: 4px; }
  html.look-new .tc-detail .tc-row { grid-template-columns: 1fr; }
}
/* the Source cell's Save sits outside .fz-act, so it never got the table's button shape */
html.look-new .cf .cf-src input { border: 1px solid var(--rule); height: 26px; box-sizing: border-box; }
html.look-new .cf td.cf-need .cf-src input { border-color: var(--tone-warn); }
html.look-new .cf .cf-src button { font: inherit; font-size: 12px; font-weight: 600; height: 26px; padding: 0 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }

/* ================= the sign-in (owner, 2026-09-28: "uniform login page") =================
   ONE sign-in screen for every page: the apps (public/auth.js, name + PIN or password) and the pages with their
   own key (coach page, F45 overview, FS8 figures — public/signin.js). A white page, the column on the left edge of
   centre with the app's colour as its left bar (--sa-app), both logos, "Sign in", "StudioHub · <app>", square
   fields, one ink button. Not scoped to html.look-new: it must look the same before ui-look.js has run. */
.sa-host { position: fixed !important; inset: 0 !important; z-index: 10000 !important; background: var(--paper, #FFFFFF) !important;
  align-items: center; justify-content: center; flex-direction: column; padding: 16px; box-sizing: border-box;
  font-family: var(--font, 'Coach Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif); font-synthesis: none; color: var(--ink, #1B2140); }
.sa-host:not([hidden]):not([style*="display: none"]):not([style*="display:none"]) { display: flex; }
.sa-host[hidden], .sa-host [hidden] { display: none !important; }
.sa-box { width: 100%; max-width: 340px; box-sizing: border-box; text-align: left; padding: 4px 0 4px 22px;
  border-left: 6px solid var(--sa-app, #1B2140); background: none; border-radius: 0; box-shadow: none; }
.sa-logos { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.sa-logos img { display: block; filter: brightness(0); opacity: .9; }
.sa-title { font-weight: 700; font-size: 24px; line-height: 1.15; margin: 0; color: var(--ink, #1B2140); }
.sa-app { font-size: 15px; color: var(--muted, #6B7280); margin: 2px 0 26px; }
.sa-sub { display: block; font-size: 13px; font-weight: 700; margin: 0 0 6px; color: var(--ink, #1B2140); }
.sa-host .sa-input { display: block; width: 100%; box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule, #DADDE3); border-radius: 0;
  font: inherit; font-size: 16px; letter-spacing: normal; text-align: left; color: var(--ink, #1B2140); background: var(--paper, #FFFFFF); outline: none; margin: 0 0 12px; box-shadow: none; }
.sa-host .sa-input:hover, .sa-host .sa-digit:hover { border-color: var(--muted, #6B7280); }
.sa-host .sa-input:focus, .sa-host .sa-digit:focus { border-color: var(--ink, #1B2140); box-shadow: inset 0 0 0 1px var(--ink, #1B2140); }
.sa-pins { display: flex; gap: 10px; margin: 0 0 4px; }
.sa-host .sa-digit { width: 54px; height: 60px; min-height: 60px; box-sizing: border-box; padding: 0; border: 1px solid var(--rule, #DADDE3); border-radius: 0; font: inherit; font-size: 26px; font-weight: 700;
  letter-spacing: normal; text-align: center; color: var(--ink, #1B2140); background: var(--paper, #FFFFFF); outline: none; box-shadow: none; -webkit-text-security: disc; }
.sa-host .sa-digit:disabled { background: var(--band, #F5F6F8); }
/* the panel itself is a light grey with a soft shade, so it stands off the white page (owner, 2026-09-29: "slightly
   different colour (grey) with light shading -- the outer box"); the fields stay white inside it */
.sa-box { background: var(--band, #F5F6F8) !important; padding: 26px 28px 24px 24px !important; box-shadow: 0 2px 12px rgba(27, 33, 64, .10) !important; }
.sa-host .sa-btn { display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; border: 1px solid var(--ink, #1B2140); border-radius: 0; background: var(--ink, #1B2140); color: var(--paper, #FFFFFF);
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; }
.sa-host .sa-btn:hover { background: var(--ink-hover, #2C3358); } .sa-host .sa-btn:disabled { opacity: .45; cursor: default; }
.sa-host .sa-btn:focus-visible, .sa-host .sa-link:focus-visible, .sa-apps a:focus-visible { outline: 2px solid var(--ink, #1B2140); outline-offset: 2px; }
.sa-host .sa-link { display: inline-block; width: auto; height: auto; min-height: 32px; margin: 10px 0 0; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink, #1B2140); cursor: pointer; background: none; border: 0;
  text-decoration: underline; text-decoration-color: var(--rule, #DADDE3); text-underline-offset: 3px; }
.sa-host .sa-link:hover { text-decoration-color: currentColor; background: none; }
.sa-step + .sa-err:empty { margin: 0; }
.sa-err { color: var(--tone-bad, #98211F); font-size: 13px; font-weight: 700; min-height: 18px; margin-top: 10px; }
.sa-note { font-size: 15px; color: var(--muted, #6B7280); }
.sa-apps { list-style: none; padding: 0; margin: 12px 0 4px; border-top: 1px solid var(--ink, #1B2140); }
.sa-apps a { display: flex; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--rule, #DADDE3); color: var(--ink, #1B2140); font-weight: 700; text-decoration: none; }
.sa-apps a::after { content: '\203A'; color: var(--muted, #6B7280); }
.sa-apps a:hover { background: var(--band, #F5F6F8); }
.sa-na .sa-sub { font-weight: 400; color: var(--muted, #6B7280); font-size: 15px; }

/* ---------- motion: none for people who asked their system for less (owner brief 2026-09-29: best practices) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- links without a class of their own: ink, not the browser's blue / purple (owner, 2026-09-30: fewer colours).
   :where() = no specificity, so any page rule that colours a link still wins. ---------- */
:where(html.look-new) :where(a:link, a:visited) { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 2px; }
:where(html.look-new) :where(a:link, a:visited):hover { text-decoration-color: currentColor; }