/* Admin Suite v2 redesign: the older screens (tally, labor, coach, calls, hub, admin, library pages, reports,
   sign-in) in the design system, and usable on a phone (390 px). Loaded last. Written under the app's CSP.
   Everything is scoped to the page body (body.rd main.rd-main) and leaves the redesigned screens' own pieces alone:
   their tables are .mx/.tbl, inputs .i, buttons .btn, filters .rd-filters, notices .rd-ok/.rd-warn.
   Old classes that redesign.css also uses for something else (.grid, .stack, .months, .legend, .check, .entry) are
   put back here for the older screens. No figure changes: colour only restates what the old screens marked. */

/* ---- page frame and type ---- */
body.rd main.rd-main > h1:first-child, body.rd main.rd-main > .view-as-banner + h1 { margin-bottom: .5rem; }
body.rd main.rd-main h1 { margin-bottom: .5rem; }
body.rd main.rd-main h2 { margin: 1.6rem 0 .6rem; }
body.rd main.rd-main h3 { margin: 1.2rem 0 .4rem; }
body.rd main.rd-main .card > h2:first-child, body.rd main.rd-main .card > h3:first-child { margin-top: 0; }
body.rd main.rd-main .muted, body.rd main.rd-main .hint { color: var(--muted); }
body.rd main.rd-main .hint { font-size: .86rem; }
body.rd main.rd-main pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .86rem/1.5 var(--font-text); color: var(--ink-2); background: none; margin: .4rem 0; }
body.rd main.rd-main ul, body.rd main.rd-main ol { padding-left: 1.2rem; }
body.rd main.rd-main li { margin: .2rem 0; }
body.rd main.rd-main dl { grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.4rem; margin: .8rem 0; }
body.rd main.rd-main dt { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
body.rd main.rd-main dd { margin: 0; overflow-wrap: anywhere; }
body.rd main.rd-main details > summary { cursor: pointer; color: var(--navy); padding: .4rem 0; }
body.rd main.rd-main img { max-width: 100%; height: auto; }
body.rd main.rd-main iframe, body.rd main.rd-main video, body.rd main.rd-main audio { max-width: 100%; }

/* sections: a thin rule above, no box (the bridge in redesign.css already flattens .card) */
body.rd main.rd-main .card { margin: 1.4rem 0; padding: 1.1rem 0 .4rem; }
body.rd main.rd-main .card h2 a { color: var(--navy); }
body.rd main.rd-main .card.landing { border-left: 2px solid var(--steel); border-top: 0; padding: .5rem 1rem; background: var(--navy-soft); }

/* notices: a left rule and a pale ground, as .warnbox/.okbox */
body.rd main.rd-main .notice:not(.rd-ok):not(.rd-warn) { background: #fffaf1; border: 0; border-left: 2px solid var(--warn); border-radius: 0; padding: .65rem 1rem; margin: 1rem 0; }
body.rd main.rd-main .notice.ok:not(.rd-ok) { background: #f3faf6; border-left-color: var(--ok); }
body.rd main.rd-main .notice.error { background: #fdf3f1; border-left-color: var(--bad); }
body.rd main.rd-main .bad-text { color: var(--bad); }
body.rd main.rd-main .badge { background: none; color: var(--steel); border: 1px solid #c7dbe8; border-radius: 2px; padding: 0 .35rem; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
body.rd main.rd-main .badge.hub-owner_only { color: var(--own); border-color: #d8d1ea; background: none; }
body.rd main.rd-main .badge.hub-client { color: var(--ok); border-color: #c4e1d1; background: none; }
body.rd main.rd-main .concern { border-radius: 2px; font-weight: 600; }

/* ---- buttons: navy, square-ish; .secondary is the ghost ---- */
body.rd main.rd-main button:not(.btn):not(.link), body.rd main.rd-main .button,
body.rd main.rd-main input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.4rem; padding: .45rem 1rem;
  font: inherit; font-weight: 500; line-height: 1.2; color: #fff; background: var(--navy); border: 1px solid var(--navy); border-radius: 3px;
  cursor: pointer; text-decoration: none; vertical-align: middle; }
body.rd main.rd-main button:not(.btn):not(.link):hover, body.rd main.rd-main .button:hover { background: #073a59; text-decoration: none; }
body.rd main.rd-main button.secondary, body.rd main.rd-main .button.secondary { background: #fff; color: var(--navy); border-color: #cfd8de; }
body.rd main.rd-main button.secondary:hover, body.rd main.rd-main .button.secondary:hover { background: #fff; border-color: var(--navy); }
body.rd main.rd-main button.small, body.rd main.rd-main .button.small { min-height: 2rem; padding: .25rem .7rem; font-size: .84rem; }
body.rd main.rd-main button.link { min-height: 0; color: var(--navy); text-decoration: none; }
body.rd main.rd-main button.link:hover { text-decoration: underline; }
body.rd main.rd-main button:disabled { opacity: .5; cursor: not-allowed; }
body.rd main.rd-main p > .button + .button, body.rd main.rd-main p > button + button { margin-left: .3rem; }

/* ---- forms: labels above, thin-ruled inputs ---- */
body.rd main.rd-main form label { color: var(--ink-2); font-size: .9rem; }
/* :where() keeps these at the weight of a plain element rule, so each screen's own widths (app.css) still apply */
body.rd main.rd-main :where(input:not(.i):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=file]), select:not(.i), textarea:not(.i)) {
  min-height: 2.4rem; padding: .45rem .6rem; font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  border: 1px solid #cfd8de; border-radius: 3px; }
body.rd main.rd-main textarea { max-width: 100%; }
body.rd main.rd-main label > input:not([type=checkbox]):not([type=radio]), body.rd main.rd-main label > select, body.rd main.rd-main label > textarea { margin-top: .25rem; }
body.rd main.rd-main input:not(.i):focus, body.rd main.rd-main select:not(.i):focus, body.rd main.rd-main textarea:not(.i):focus { border-color: var(--steel); outline: none; box-shadow: 0 0 0 3px #e3eef5; }
body.rd main.rd-main input[type=file] { max-width: 100%; font: inherit; font-size: .9rem; }
body.rd main.rd-main input[type=checkbox], body.rd main.rd-main input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--navy); vertical-align: -2px; }
body.rd main.rd-main input.bad { border: 1px solid var(--bad); background: #fdf3f1; }
body.rd main.rd-main fieldset { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: .4rem 0 .2rem; margin: .8rem 0; min-width: 0; }
body.rd main.rd-main legend { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .5rem .4rem .3rem 0; }
body.rd main.rd-main label.check, body.rd main.rd-main label.inline { display: inline-flex; align-items: center; gap: .4rem; margin: .25rem 1.1rem .25rem 0; font-size: .9rem; color: var(--ink); }
/* redesign.css's .stack spaces its children 2rem apart: an older form.stack wants its own rhythm */
body.rd main.rd-main form.stack > * + * { margin-top: 0; }
body.rd main.rd-main form.stack > label { display: block; margin: .7rem 0; }
body.rd main.rd-main form.stack > button { margin-top: .6rem; }
/* filter rows: wrap, aligned on their inputs */
body.rd main.rd-main .filters:not(.rd-filters), body.rd main.rd-main .pickers:not(.rd-filters), body.rd main.rd-main .inline-form, body.rd main.rd-main form.row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1.1rem; margin: .8rem 0 1rem; }
body.rd main.rd-main .filters:not(.rd-filters) > label, body.rd main.rd-main .pickers:not(.rd-filters) > label, body.rd main.rd-main .inline-form > label { margin: 0; min-width: 0; max-width: 100%; }
body.rd main.rd-main .filters > fieldset, body.rd main.rd-main .pickers > fieldset { flex: 1 1 100%; margin: .2rem 0; }
body.rd main.rd-main .filters > fieldset > label:not(.inline) { display: inline-block; margin: 0 1rem .3rem 0; vertical-align: bottom; }
body.rd main.rd-main .sitepick label.inline, body.rd main.rd-main .rr-sites label.inline { margin: .2rem 1rem .2rem 0; }
body.rd main.rd-main .rr-sites fieldset { border: 0; border-top: 1px solid var(--rule); padding: .4rem 0; }
body.rd main.rd-main .modes, body.rd main.rd-main .quick { margin: .6rem 0; font-size: .9rem; color: var(--muted); }
body.rd main.rd-main .modes strong { color: var(--navy); border-bottom: 2px solid var(--navy); font-weight: 600; }

/* ---- tables: the design system's .tbl, for every older table ---- */
body.rd main.rd-main table:not(.mx):not(.tbl) { border-collapse: collapse; background: none; font-size: .9rem; font-variant-numeric: tabular-nums; margin: .4rem 0 1rem; }
body.rd main.rd-main table:not(.mx):not(.tbl) th, body.rd main.rd-main table:not(.mx):not(.tbl) td { padding: .55rem .7rem .55rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
body.rd main.rd-main table:not(.mx):not(.tbl) thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
body.rd main.rd-main table:not(.mx):not(.tbl) tbody th { font-weight: 500; color: var(--ink-2); }
body.rd main.rd-main table:not(.mx):not(.tbl) tfoot td, body.rd main.rd-main table:not(.mx):not(.tbl) tfoot th { font-weight: 600; border-top: 1px solid var(--ink); border-bottom: 0; }
body.rd main.rd-main table:not(.mx):not(.tbl) td.num, body.rd main.rd-main table:not(.mx):not(.tbl) th.num { text-align: right; }
body.rd main.rd-main tr.muted td { color: var(--muted); }
body.rd main.rd-main table td input:not([type=checkbox]):not([type=radio]), body.rd main.rd-main table td select { min-height: 2.2rem; }
/* resources' bordered tables, brought to the same ruled look (resources.css loads after this file: hence body.rd) */
body.rd main.rd-main table.res-table { width: 100%; }
body.rd main.rd-main table.res-table th, body.rd main.rd-main table.res-table td { border: 0; border-bottom: 1px solid var(--rule-2); padding: .55rem .7rem .55rem 0; }
body.rd main.rd-main table.res-table tr:first-child th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--ink); }
body.rd main.rd-main table.res-table tr.res-deleted td { color: var(--muted); }
body.rd main.rd-main .res-grid select.res-open { background: #f3faf6; } body.rd main.rd-main .res-grid select.res-locked { background: #fdf3f1; }

/* the report grids (sales, revenue, labor, OPC reports): old colours kept as meaning, toned to the palette */
body.rd main.rd-main .report-wrap, body.rd main.rd-main .wide { overflow-x: auto; margin: .4rem 0 1rem; -webkit-overflow-scrolling: touch; }
body.rd main.rd-main .report-wrap > table, body.rd main.rd-main .wide > table { margin: 0; }
body.rd main.rd-main table.report th, body.rd main.rd-main table.report td { padding: .4rem .7rem; font-size: .86rem; }
body.rd main.rd-main table.report thead th { text-align: right; }
body.rd main.rd-main table.report thead th:first-child { text-align: left; }
body.rd main.rd-main table.report tr.section th { background: var(--navy); color: #fff; font-family: var(--font-text); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: .45rem .7rem; }
body.rd main.rd-main table.report tr.hl td:not(.goal) { background: #fff0b8; }
body.rd main.rd-main table.report .goal.rs { background: #f7eef6; } body.rd main.rd-main table.report .goal.site { background: #fffaea; } body.rd main.rd-main table.report .goal.opc { background: #eef6f0; }
body.rd main.rd-main table.report.compare td.up, body.rd main.rd-main .rr-up { background: #e8f5ec; color: var(--ok); }
body.rd main.rd-main table.report.compare td.down, body.rd main.rd-main .rr-down { background: #fbecea; color: var(--bad); }
body.rd main.rd-main .rr-nodata { background: #fff4db; color: var(--warn); }
body.rd main.rd-main table.report.labor th.month { border-left: 1px solid var(--rule); text-align: center; }
body.rd main.rd-main table.report tr.total th, body.rd main.rd-main table.report tr.total td { border-top: 1px solid var(--ink); }
/* call scoring grid: redesign.css's .grid is a CSS grid; this one is a table */
body.rd main.rd-main table.grid { display: table; gap: 0; font-size: .8rem; }
body.rd main.rd-main table.grid td { padding: .35rem .4rem .35rem 0; }
body.rd main.rd-main table.grid select, body.rd main.rd-main table.grid input, body.rd main.rd-main table.grid textarea { display: inline-block; width: auto; max-width: 10rem; min-height: 2rem; padding: .2rem .3rem; font-size: .8rem; }
body.rd main.rd-main table.offerings input { max-width: 7rem; } body.rd main.rd-main table.offerings input.wide { max-width: 16rem; }
body.rd main.rd-main tr.saving { background: #fffaf1; } body.rd main.rd-main tr.saved-ok { background: #f3faf6; } body.rd main.rd-main tr.save-failed { background: #fdf3f1; }

/* charts and their legends (revenue reports): redesign.css's .legend/.chart are the new matrix's */
body.rd main.rd-main figure.viz { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 1rem 0 0; margin: 1.4rem 0; }
body.rd main.rd-main figure.viz figcaption { font-family: var(--font-brand); font-weight: 400; font-size: 1.05rem; color: var(--ink); }
body.rd main.rd-main ul.legend { gap: .3rem 1.2rem; font-size: .8rem; color: var(--ink-2); }

/* ---- tabs and step links: the design system's underlined segments ---- */
body.rd main.rd-main .coach-tabs { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; border-bottom: 1px solid var(--rule); margin: .6rem 0 1.2rem; }
body.rd main.rd-main .coach-tabs a { margin: 0 0 -1px; padding: .45rem 0; color: var(--muted); border-bottom: 2px solid transparent; font-size: .92rem; }
body.rd main.rd-main .coach-tabs a.on { color: var(--navy); border-bottom-color: var(--navy); font-weight: 500; }
body.rd main.rd-main .coach-tabs a:hover { color: var(--navy); text-decoration: none; }
body.rd main.rd-main .res-tabs, body.rd main.rd-main .res-people { gap: .3rem 1.3rem; border-bottom: 1px solid var(--rule); }
body.rd main.rd-main .res-tabs a, body.rd main.rd-main .res-people a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .45rem 0; margin-bottom: -1px; color: var(--muted); background: none; }
body.rd main.rd-main .res-tabs a.on, body.rd main.rd-main .res-people a.on { color: var(--navy); background: none; border-bottom-color: var(--navy); }
body.rd main.rd-main .rr-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }

/* ---- the daily tally (src/sales/pages.mjs) ---- */
body.rd main.rd-main details.panel { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; margin: 0; padding: 0 0 .8rem; }
body.rd main.rd-main details.panel > summary { font-family: var(--font-brand); font-weight: 400; font-size: 1.12rem; color: var(--navy); padding: .9rem 0 .4rem; }
body.rd main.rd-main .tally fieldset { border-top: 0; margin: .2rem 0 .4rem; padding: 0; }
body.rd main.rd-main .thead span { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
body.rd main.rd-main .trow { border-top: 1px solid var(--rule-2); font-size: .95rem; }
body.rd main.rd-main .trow input { min-height: 2.75rem; padding: .4rem .2rem; font-family: var(--font-brand); font-size: 1.1rem; text-align: center; }
body.rd main.rd-main .tally .savebar { margin-top: .5rem; }
body.rd main.rd-main .savebar button { width: 100%; max-width: 24rem; min-height: 3rem; font-size: 1.05rem; }
body.rd main.rd-main nav.days, body.rd main.rd-main nav.months { gap: .3rem; margin: .8rem 0; padding-bottom: .3rem; }
body.rd main.rd-main nav.days a, body.rd main.rd-main nav.months a { min-width: 2.6rem; padding: .35rem .25rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); }
body.rd main.rd-main nav.days a.done { border-color: #a9cbb8; }
body.rd main.rd-main nav.days a i { color: var(--ok); }
body.rd main.rd-main nav.days a.on, body.rd main.rd-main nav.months a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
body.rd main.rd-main nav.days a.on span, body.rd main.rd-main nav.days a.on i, body.rd main.rd-main nav.months a.on i { color: #fff; }
body.rd main.rd-main nav.days a.step { border: 0; background: none; color: var(--navy); }
/* revenue and labor entry rows (entryPage: styled here only) */
body.rd main.rd-main .frow { border-top: 1px solid var(--rule-2); padding: .3rem 0; grid-template-columns: minmax(0, 1fr) 9rem; }
body.rd main.rd-main .frow input { text-align: right; font-variant-numeric: tabular-nums; }
body.rd main.rd-main .frow.derived output { font-family: var(--font-brand); font-weight: 400; color: var(--navy); }
body.rd main.rd-main details.log, body.rd main.rd-main details.news { border-top: 1px solid var(--rule); margin-top: 1.4rem; padding-top: .3rem; }

/* ---- coach, hub, calls ---- */
body.rd main.rd-main .coach-note { border-left: 2px solid var(--rule); padding-left: .9rem; }
body.rd main.rd-main .hub-summary { color: var(--ink-2); }
body.rd main.rd-main .scroll { max-width: 100%; }
body.rd main.rd-main .admin-history { border-top: 1px solid var(--rule); }

/* ---- library sub-pages (src/resources/pages.mjs) ---- */
body.rd main.rd-main .res-cards { gap: 0 2rem; }
body.rd main.rd-main .res-card { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 1rem 0 1.2rem; background: none; }
body.rd main.rd-main .res-card:hover { border-top-color: var(--navy); text-decoration: none; }
body.rd main.rd-main .res-card strong { font-family: var(--font-brand); font-weight: 400; font-size: 1.1rem; color: var(--navy); }
body.rd main.rd-main .res-card span { color: var(--ink-2); font-size: .88rem; }
body.rd main.rd-main .res-list li { border-bottom-color: var(--rule-2); padding: .5rem 0; }
body.rd main.rd-main .res-heading { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 0; background: none; margin: 0; }
body.rd main.rd-main .res-heading summary { font-weight: 500; padding: .7rem 0; }
body.rd main.rd-main .res-icon { border-radius: 2px; }
body.rd main.rd-main .res-q { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: .6rem 0; background: none; }
body.rd main.rd-main .res-q legend { padding: .4rem 0; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); font-weight: 500; }
body.rd main.rd-main .res-ans { padding: .35rem 0; font-size: .95rem; color: var(--ink); }
body.rd main.rd-main .res-wof { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 1.2rem 0; background: none; }
body.rd main.rd-main .res-wof-story { background: var(--navy-soft); border-left: 2px solid var(--steel); border-radius: 0; }
body.rd main.rd-main .res-thumbs a.on { border-color: var(--navy); }
body.rd main.rd-main .res-passed { color: var(--ok); } body.rd main.rd-main .res-failed { color: var(--bad); }

/* ---- signed out: sign-in, set and forgotten password (no menu: one centred column) ---- */
body.rd .main > main.rd-main:only-child, body.rd div:not(.shell) > .main main.rd-main { max-width: 30rem; margin: 0 auto; padding-top: 3rem; }
body.rd div:not(.shell) > .main > .phone-top { display: flex; justify-content: center; padding: 2.2rem 1rem 0; border: 0; position: static; }
body.rd div:not(.shell) > .main > .phone-top img { width: 260px; max-width: 80%; height: auto; }
body.rd div:not(.shell) > .main main.rd-main form input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { display: block; width: 100%; max-width: none; }
body.rd div:not(.shell) > .main main.rd-main form button { width: 100%; margin-top: .6rem; min-height: 2.8rem; }
body.rd div:not(.shell) > .main main.rd-main .card .button { width: 100%; min-height: 2.8rem; }

/* ---- phone ---- */
@media (max-width: 760px) {
  body.rd main.rd-main h2 { margin-top: 1.3rem; }
  /* a wide table scrolls inside itself, never the page */
  body.rd main.rd-main table:not(.mx):not(.tbl) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.rd main.rd-main .report-wrap > table, body.rd main.rd-main .wide > table, body.rd main.rd-main .scrollx > table { display: table; overflow: visible; }
  body.rd main.rd-main .wide { margin: .4rem 0 1rem; }
  body.rd main.rd-main table:not(.mx):not(.tbl) th, body.rd main.rd-main table:not(.mx):not(.tbl) td { padding-right: .8rem; }
  /* cells keep a readable width, so a many-column table scrolls sideways instead of folding each cell into a tall strip */
  body.rd main.rd-main table:not(.mx):not(.tbl):not(.report) th, body.rd main.rd-main table:not(.mx):not(.tbl):not(.report) td { min-width: 6.5rem; }
  body.rd main.rd-main table:not(.mx):not(.tbl) thead th { white-space: nowrap; }
  body.rd main.rd-main table td form.inline { display: inline-block; margin: .1rem .2rem .1rem 0; }
  body.rd main.rd-main table:not(.mx):not(.tbl) td:has(> form.inline) { white-space: nowrap; }
  body.rd main.rd-main table td form.inline input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { display: inline-block; width: 13rem; vertical-align: middle; }
  /* forms stack; everything tappable */
  body.rd main.rd-main .filters:not(.rd-filters), body.rd main.rd-main .pickers:not(.rd-filters), body.rd main.rd-main .inline-form, body.rd main.rd-main form.row { gap: .6rem; align-items: stretch; }
  body.rd main.rd-main .filters:not(.rd-filters) > label, body.rd main.rd-main .pickers:not(.rd-filters) > label, body.rd main.rd-main .inline-form > label { flex: 1 1 100%; }
  body.rd main.rd-main .filters > fieldset > label:not(.inline) { display: block; margin: 0 0 .5rem; }
  body.rd main.rd-main form label > input:not([type=checkbox]):not([type=radio]):not([type=hidden]), body.rd main.rd-main form label > select,
  body.rd main.rd-main form label > textarea { display: block; width: 100%; max-width: 100%; }
  body.rd main.rd-main :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { min-height: 2.6rem; font-size: 1rem; max-width: 100%; }
  body.rd main.rd-main table.grid select, body.rd main.rd-main table.grid input, body.rd main.rd-main table.grid textarea { min-height: 2.5rem; }
  body.rd main.rd-main button:not(.btn):not(.link), body.rd main.rd-main .button { min-height: 2.6rem; }
  body.rd main.rd-main button.small, body.rd main.rd-main .button.small { min-height: 2.5rem; }
  body.rd main.rd-main .filters:not(.rd-filters) > button, body.rd main.rd-main .inline-form > button { flex: 1 1 100%; }
  body.rd main.rd-main label.check, body.rd main.rd-main label.inline { min-height: 2.5rem; margin-right: 1.2rem; }
  body.rd main.rd-main input[type=checkbox], body.rd main.rd-main input[type=radio] { width: 1.25rem; height: 1.25rem; }
  body.rd main.rd-main .res-ans { min-height: 2.5rem; display: flex; align-items: center; gap: .5rem; }
  body.rd main.rd-main dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.rd main.rd-main dd { margin-bottom: .6rem; }
  body.rd main.rd-main .coach-tabs a, body.rd main.rd-main .res-tabs a, body.rd main.rd-main .res-people a { padding: .6rem 0; }
  body.rd main.rd-main .modes a, body.rd main.rd-main .quick a { display: inline-block; padding: .35rem 0; }
  body.rd main.rd-main .rr-steps > * { flex: 1 1 auto; }
  body.rd main.rd-main .rr-two { gap: 1rem; } body.rd main.rd-main .rr-two > div { flex-basis: 100%; min-width: 0; }
  body.rd main.rd-main .res-wof-text { flex-basis: 100%; }
  body.rd main.rd-main .frow { grid-template-columns: minmax(0, 1fr) 8rem; }
  body.rd main.rd-main .savebar { bottom: 3.6rem; }
  body.rd main.rd-main .view-as-banner form { display: block; margin-top: .4rem; }
  body.rd div:not(.shell) > .main main.rd-main { padding-top: 1.6rem; }
}

/* A long unbroken string (an address, a link, a pasted email subject) breaks rather than pushing the page sideways on a
   phone (/hub/unmatched on real data). break-word only breaks where nothing else fits, and does not shrink table columns. */
body.rd main.rd-main { overflow-wrap: break-word; }

/* 10 Star (src/tenstar/pages.mjs): the specialist's ten modules, a quiz, and the coach's written answers. */
.ts-mods { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.ts-mod { display: flex; gap: .9rem; padding: .8rem .9rem; background: #fff; border: 1px solid var(--rule); border-radius: 6px; }
.ts-n { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: var(--navy); }
.ts-b { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.ts-t { font-weight: 600; }
.ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.ts-quiz ol { padding-left: 1.3rem; display: grid; gap: .9rem; }
.ts-q .ts-p { font-weight: 500; margin-bottom: .35rem; }
.ts-q .ts-f { display: grid; gap: .25rem; }
.ts-q .ts-f select, .ts-q .ts-f textarea { max-width: 36rem; width: 100%; }
.ts-w { margin: .4rem 0 .6rem; padding-left: .6rem; border-left: 2px solid var(--rule); }
.play-note:not([hidden]) { margin: .5rem 0; }
@media (max-width: 640px) { .ts-mod { padding: .7rem; gap: .6rem; } .ts-n { flex-basis: 1.6rem; height: 1.6rem; font-size: .85rem; } }

/* Sales sheets by photo (src/sales/sheet-pages.mjs): the panel on the tally page and the check page. */
body.rd main.rd-main .sheets .ready { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; margin-bottom: .8rem; border: 1px solid var(--warn); background: #fffaf0; text-decoration: none; }
body.rd main.rd-main .sheets .dropzone { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; margin: .6rem 0; border: 1px dashed var(--rule-2, #999); }
body.rd main.rd-main .sheets .dropzone input[type=file] { font-size: 1rem; }
body.rd main.rd-main .sheets button[type=submit] { min-height: 3rem; width: 100%; max-width: 24rem; font-size: 1.05rem; }
body.rd main.rd-main .sheetlist { list-style: none; padding: 0; margin: .8rem 0 0; }
body.rd main.rd-main .sheetlist li { padding: .4rem 0; border-top: 1px solid var(--rule-2, #ddd); }
body.rd main.rd-main .sheetsplit { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { body.rd main.rd-main .sheetsplit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  body.rd main.rd-main .sheetphotos { position: sticky; top: 1rem; } }
body.rd main.rd-main .sheetimg { display: block; width: 100%; height: auto; margin: .4rem 0; border: 1px solid var(--rule-2, #ddd); }
body.rd main.rd-main .trow input.unsure { background: #fff4d6; border-color: var(--warn); }
body.rd main.rd-main .trow .checkme { display: block; color: var(--warn); font-size: .75rem; }
body.rd main.rd-main button.link { background: none; border: 0; padding: .6rem 0; color: inherit; text-decoration: underline; cursor: pointer; }
/* On a phone the photo stays in view while the boxes scroll beneath it (scroll or tap it to read it whole). */
@media (max-width: 899px) { body.rd main.rd-main .sheetphotos { position: sticky; top: 0; z-index: 2; max-height: 38vh; overflow: auto; margin: 0; padding: .4rem .6rem; }
  body.rd main.rd-main .sheetphotos h2, body.rd main.rd-main .sheetphotos p { display: none; } }

/* Searching the words of the hub (src/hub/pages.mjs wordsPage; the client page's box, src/redesign/views.mjs). */
body.rd .words-search { display: flex; gap: .5rem; align-items: center; margin: .2rem 0 .9rem; max-width: 34rem; }
body.rd .words-search input[name=q] { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--rule); font: inherit; padding: .3rem .1rem; background: transparent; color: var(--ink); }
body.rd main.rd-main form.hub-words input[name=q] { min-width: min(24rem, 100%); }
body.rd main.rd-main .hub-hit p { margin: .2rem 0; }
body.rd main.rd-main .hub-passage { color: var(--ink-2); font-size: .9rem; max-width: 52rem; white-space: pre-line; }
body.rd main.rd-main mark { background: #fbeaa5; color: inherit; padding: 0 .1em; border-radius: 2px; }
body.rd main.rd-main mark#hit { scroll-margin-top: 6rem; }