/* Site-wide interface polish.
   Loaded last on purpose. Everything here is a cross-cutting rule that has to win over
   the per-area stylesheets -- form controls, dialog chrome, page headings -- rather than
   being repeated in each of them and drifting apart again. Area-specific styling stays
   in its own file; this is only for what must look the same everywhere. */

/* ---- Select controls -------------------------------------------------------------
   Every dropdown on the site drew the platform's own arrow, jammed against the right
   edge of the box and vertically off by a couple of pixels because the native control
   centres on its own box rather than ours. One chevron, one position, everywhere. */
:root{
  --select-chevron:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.25 1.75 6 6.25l4.75-4.5' fill='none' stroke='%236f6977' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;text-overflow:ellipsis}
select::-ms-expand{display:none}
/* Each of these sets `background` as a SHORTHAND in its own stylesheet, which resets
   background-image and background-position along with the colour -- so a single bare
   `select` rule here was silently wiped on exactly the dropdowns that needed it. They
   are named individually, and each gets room on the right so a long option name (a
   microphone's full device name, a class title) cannot run underneath the arrow. */
select,
.invite-form select,
.schedule-edit-row select,
.microphone-row select,
body.judging-test-open .microphone-row select,
.workspace-form select,
.review-add-row select{
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}
.invite-form select,.schedule-edit-row select,.microphone-row select,body.judging-test-open .microphone-row select{padding-right:38px}
.workspace-form select{padding-right:40px}
.review-add-row select{padding-right:28px;background-position:right 9px center;background-size:10px 7px}
select:focus-visible{outline:3px solid rgba(105,54,205,.18);outline-offset:1px;border-color:var(--purple)}

/* ---- Dialog chrome ---------------------------------------------------------------
   The close control was positioned by eye with `right`/`top` offsets and a font-size
   large enough that the glyph's own line box pushed it off centre. It is a fixed square
   with the glyph centred in it now, so it sits the same in every dialog. */
.close-control{
  right:16px; top:16px;
  width:38px; height:38px;
  display:grid; place-items:center;
  padding:0; line-height:1;
  border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--muted);
  font-size:1.25rem;
}
.close-control:hover{border-color:var(--purple);background:var(--purple-soft);color:var(--purple)}
.close-control:focus-visible{outline:3px solid rgba(105,54,205,.2);outline-offset:1px}

/* ---- The back button -------------------------------------------------------------
   One back button, the same on every page of every account: a square with the arrow
   centred in it, sitting in the normal flow of the header immediately left of the page
   title.

   There used to be three (a wide "Back to dashboard" pill, the owner dashboard's own, and
   the judging screen's), and the previous attempt to line titles up with their cards put
   the button out in the page margin with a negative offset. The margin is 5vw, which is
   narrower than the button at ordinary laptop widths -- so the button was cut in half by
   the edge of the window. It is never positioned outside its header now, and so it can
   never be clipped, crowd the title, or land somewhere unexpected.

   The arrow is an SVG drawn centred inside its own box. A text "←" never centres: the
   glyph's ink sits low and to one side of its line box, and that offset is what made every
   one of these look slightly wrong. */
.back-button{
  flex:0 0 auto;
  width:clamp(42px,3.1vw,48px); height:clamp(42px,3.1vw,48px);
  min-width:0; min-height:0; margin:0; padding:0;
  display:grid; place-items:center; gap:0;
  border:1.5px solid #d6d0de; border-radius:12px;
  background:var(--card); color:var(--purple);
  box-shadow:0 1px 2px rgba(33,23,45,.05);
  line-height:0; cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.back-button:hover{border-color:var(--purple);background:var(--purple-soft)}
.back-button:focus-visible{outline:3px solid rgba(105,54,205,.22);outline-offset:2px}
.back-button .back-arrow{display:block;width:20px;height:20px;margin:0}
.back-button .back-label{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* The judging screen's older rule hid a <span> and set its own box; this wins over it. */
body.judging-test-open .back-button.back-control{width:clamp(42px,3.1vw,48px);height:clamp(42px,3.1vw,48px);min-height:0;padding:0;border-width:1.5px;font-size:0}

/* Every workspace header is the same three-part row: back button, title block, actions.
   The button is vertically centred on the title block so it reads as belonging to it. */
.operations-header{
  position:static;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(14px,1.4vw,22px);
  row-gap:14px;
  align-items:center;
}
.operations-header > .back-button{position:static;grid-column:1;align-self:center}
.operations-header > div:not(.operations-actions){grid-column:2;min-width:0}
.operations-header > .operations-actions{grid-column:3;justify-self:end;align-self:center}
@media (max-width:900px){
  /* Not enough width for the actions beside the title: they move under it, and the back
     button stays exactly where it is. */
  .operations-header{grid-template-columns:auto minmax(0,1fr)}
  .operations-header > .operations-actions{grid-column:1/-1;justify-self:stretch}
}
.owner-header{margin-bottom:22px}
/* The judging header reserved a fixed 68px column for the button, so its gap to the title
   was nearly twice every other page's. Same sizing rule as everywhere else. */
.test-header,body.judging-test-open .test-header{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(14px,1.4vw,22px)}

/* ---- Workspace forms -------------------------------------------------------------
   The form is a two-column grid whose cells stretch to the tallest in the row, so one
   field carrying a hint underneath it made its neighbour's label float away from its
   own box. Fields align to the top of their row, and the boxes line up across columns
   whether or not a field has anything written under it. */
.workspace-form{align-items:start}
.workspace-form label{align-content:start}
.workspace-form label small{margin-top:2px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.35}

/* ---- Printing placings -----------------------------------------------------------
   The printed placings are what the office pins up for riders and spectators, so the
   sheet carries only what they need: the show, each class, and who placed where. It used
   to print the app's own working copy -- "Show Manager", the instruction to verify the
   calculated order before publishing, how many tests had arrived, the final scheduled
   ride -- none of which means anything to the people reading the wall.

   Each class is a bordered card like the screen, starts its own page, and is never cut in
   half across a page break. A class too long for a single page continues onto the next
   with its column headings repeated, and a rider's row is never split. Only finished
   classes print: a class still in progress is not a final placing, and posting it as one
   would be wrong. */
.placings-print-title{display:none}
@media print{
  @page{margin:12mm 12mm 14mm}
  .app-header,.operations-header,.awards-live-summary,.toast,.back-button{display:none!important}
  html,body,.app-frame,.operations-screen,.operations-content{background:#fff!important;min-height:0!important}
  .operations-screen{padding:0!important;margin:0!important;max-width:none!important}
  .placings-print-title{display:block!important;margin:0 0 7mm}
  .placings-print-title h1{margin:0;color:#3b237d;font-size:22pt;letter-spacing:-.01em}
  .placings-print-title p{margin:1.5mm 0 0;color:#4a4452;font-size:11pt;font-weight:700}
  .awards-live-list{display:block!important;gap:0!important}
  .awards-live-card.in-progress{display:none!important}
  .awards-live-card{
    break-before:page; page-break-before:always;
    break-inside:avoid; page-break-inside:avoid;
    margin:0!important; padding:18px 22px!important;
    border:1px solid #cfc8d8!important; border-radius:14px!important;
    box-shadow:none!important; background:#fff!important;
  }
  .awards-live-card.print-first{break-before:auto;page-break-before:auto}
  .awards-live-card > header{break-after:avoid;page-break-after:avoid}
  .awards-live-card > header p,
  .awards-live-card .award-state,
  .awards-live-card .award-progress,
  .awards-live-card .final-ride-status,
  .awards-live-card > footer{display:none!important}
  .awards-data-table thead{display:table-header-group}
  .awards-data-table tr{break-inside:avoid;page-break-inside:avoid}
}

/* The role selector was as wide as the email field beside it for four short words. */
.invite-form{grid-template-columns:minmax(0,1fr) 190px 130px}
@media (max-width:700px){.invite-form{grid-template-columns:1fr}}

/* ---- Owner dashboard --------------------------------------------------------------
   Active shows are what this page is for; archived ones are the record and belong behind
   a tab rather than buried among them. */
.owner-show-tabs{flex:0 0 auto}
.owner-show-host,.owner-show-updated{margin:0;color:var(--muted);font-size:12px}
.owner-show-host strong{color:var(--ink);font-weight:800}
.owner-show-updated{font-size:11px}
.workspace-heading:has(.owner-show-tabs){flex-wrap:wrap;gap:12px}

/* ---- Collapsing a class ----------------------------------------------------------
   A class with eighteen riders ran off the bottom of the page and there was no way to
   fold it away. The control says what it does, on the class's own detail line, well away
   from the two order arrows on the right: pressing the wrong one there would reorder the
   running order of a show rather than just hide some rows. It used to be a tiny caret
   squeezed beside the class number, wider than its column, so it sat on top of the
   "Class" label and read as a stray dot. */
.class-collapse{
  margin-left:10px; padding:2px 10px; vertical-align:1px;
  border:1px solid #d9d1ea; border-radius:999px;
  background:var(--card); color:var(--purple);
  font:inherit; font-size:12px; font-weight:800; line-height:1.5;
}
.class-collapse:hover{border-color:var(--purple);background:var(--purple-soft)}
.class-collapse:focus-visible{outline:3px solid rgba(105,54,205,.22);outline-offset:2px}
.class-order-card.collapsed .order-rider-head,
.class-order-card.collapsed .order-riders,
.class-order-card.collapsed .order-break{display:none}

/* ---- File input ------------------------------------------------------------------
   The browser's own file control is a small grey button jammed against the left edge of
   the field with "No file chosen" crowding it. It gets the same box as every other field
   in the form, and the button inside it is styled like the app's own. */
.workspace-form input[type="file"]{
  width:100%; min-height:48px; padding:9px 12px;
  border:1px solid #dcd7e2; border-radius:10px; background:var(--card);
  color:var(--muted); font:inherit; font-size:13px;
}
.workspace-form input[type="file"]::file-selector-button{
  margin-right:12px; padding:0 15px; height:30px;
  border:1px solid #cfc6e3; border-radius:8px;
  background:var(--purple-soft); color:var(--purple);
  font:inherit; font-size:12px; font-weight:800; cursor:pointer;
}
.workspace-form input[type="file"]::file-selector-button:hover{border-color:var(--purple);background:#e7dffa}
.workspace-form input[type="file"]:focus-visible{outline:3px solid rgba(105,54,205,.14);border-color:var(--purple)}

/* ---- The example rider list ------------------------------------------------------ */
.upload-example{
  margin:0; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--card-muted);
}
.upload-example summary{color:var(--purple);font-size:12px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.upload-example p{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none}
.upload-example code{padding:1px 5px;border-radius:4px;background:var(--card);color:var(--purple);font-size:12px}
.upload-sample{width:100%;margin-top:12px;border-collapse:collapse;background:var(--card);border-radius:8px;overflow:hidden;font-size:12px}
.upload-sample th,.upload-sample td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.upload-sample th{background:var(--purple-soft);color:var(--purple);font-size:11px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.upload-sample td{color:var(--ink);font-weight:600}
.upload-sample tr:last-child td{border-bottom:0}
.file-note{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none}
.file-note strong{color:var(--ink)}

/* ---- Rounded dialogs that scroll -------------------------------------------------------
   Account & Profile -- the settings page every account opens -- had rounded corners on the
   left and square ones on the right. The dialog scrolls, and on Windows the scrollbar is
   painted as a square strip down the full right edge, straight over both rounded corners.
   The judge's final review dialog had the same fault.

   The scrollbar keeps its own column but its track is transparent and stops short of the
   corners by the radius, so only the thumb shows and the dialog's own rounded edge is what
   you see at every corner. The shadow is untouched, which clipping the dialog would not
   have allowed. iPad scrollbars overlay the content and never had this problem. */
.profile-dialog,.review-dialog{scrollbar-gutter:stable}
/* Chromium ignores every ::-webkit-scrollbar rule on an element that also sets the
   standard scrollbar-color or scrollbar-width -- including the track inset that keeps the
   corners round. So the standard properties are for browsers without the WebKit ones. */
@supports not selector(::-webkit-scrollbar){
  .profile-dialog,.review-dialog{scrollbar-width:thin;scrollbar-color:#cdc6d6 transparent}
}
.profile-dialog::-webkit-scrollbar,.review-dialog::-webkit-scrollbar{width:12px;background:transparent}
.profile-dialog::-webkit-scrollbar-track{background:transparent;margin-block:22px}
.review-dialog::-webkit-scrollbar-track{background:transparent;margin-block:12px}
.profile-dialog::-webkit-scrollbar-thumb,.review-dialog::-webkit-scrollbar-thumb{
  background:#cdc6d6; border-radius:999px;
  border:3px solid transparent; background-clip:padding-box;
}
.profile-dialog::-webkit-scrollbar-thumb:hover,.review-dialog::-webkit-scrollbar-thumb:hover{background:#a99fb6;background-clip:padding-box}
.profile-dialog::-webkit-scrollbar-corner,.review-dialog::-webkit-scrollbar-corner{background:transparent}

/* ---- Tables: columns that cannot drift --------------------------------------------------
   The standing rule for every table on the site: it fills the width it is given, and its
   columns line up with their headings at any window size, from a 49-inch monitor to a
   9-inch iPad. Every row of these tables is its own grid, so two things break that rule:

   1. A content-sized track ("auto" and friends) resolves differently on every row. Completed
      Tests had one on its actions column, so a row offering "Remove" and a row offering
      "Request removal" gave the other columns different widths -- the same fault that put
      the ring manager's "Novice" at x=823 on one row and x=876 on the next.
   2. A column head sitting outside a scrolling list. The list's scrollbar narrows only the
      rows. The judge's own schedule still had that inner scroller.

   Every cell is also walled in with min-width:0, so a long rider or horse name truncates
   inside its own column rather than pushing into the next. */
.schedule-head > *,.schedule-row > *,
.result-head > *,.result-row > *,
.order-rider-head > *,.order-rider > *{min-width:0}
.role-primary-panel .result-head,.role-primary-panel .result-row{
  grid-template-columns:minmax(200px,1.35fr) minmax(110px,.75fr) minmax(120px,.6fr) minmax(220px,1fr);
}
.role-primary-panel .result-row .result-actions{min-width:0;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:700px){
  .role-primary-panel .result-head,.role-primary-panel .result-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .role-primary-panel .result-head > :nth-child(n+3){display:none}
  .role-primary-panel .result-row > :nth-child(3){display:none}
  .role-primary-panel .result-row .result-actions{grid-column:1/-1;justify-content:flex-start}
}
/* The judge's schedule scrolls with the page like the manager's and office's. */
.judge-home-open #judgeHome .schedule-list{max-height:none;overflow:visible;padding-bottom:0}
#judgeHome .schedule-head{position:sticky;top:82px;z-index:4;background:var(--card-muted);box-shadow:0 1px 0 var(--line)}
/* The panel rounds its corners by clipping, but overflow:hidden also made it the box the
   sticky head measured its 82px from, so the head sat 82px down inside the panel, on top
   of the first rider in the list. clip rounds the corners without becoming that box. */
#judgeHome .schedule-panel{overflow:clip}
@supports not (overflow:clip){#judgeHome .schedule-panel{overflow:visible}}
@media (max-width:980px){#judgeHome .schedule-head{position:static}}

/* ---- iPad fixes, 2026-09-21 --------------------------------------------------------- */

/* A button waiting for its second press shows "Confirm" over what it will do, on two
   lines, instead of one line cut off at the edge of the button. */
.confirm-lines{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.12;white-space:nowrap}
.checkin-actions > .confirming{text-overflow:clip}
.checkin-item button.confirming{border-color:#c99400;background:#fff8e6;color:#8a6100;box-shadow:none}

/* Every status pill centres its words. A pill stretched to fill its column -- "Expected",
   "Checked in", "Scheduled" -- kept them against its left edge. */
.status-pill{justify-content:center;text-align:center}

/* The arena column had no size of its own and came out larger than the test, ride time
   and countdown around it. */
.ringmanager-grid .schedule-row .arena-cell{font-size:.78rem}

/* iPad Safari gives date and time boxes a built-in minimum width wider than half a form
   row, so a start and an end side by side ran into each other. */
.workspace-form label{grid-template-columns:minmax(0,1fr)}
.workspace-form input[type="date"],.workspace-form input[type="time"]{display:flex;align-items:center;min-width:0;max-width:100%}
.workspace-form input[type="date"]::-webkit-date-and-time-value,.workspace-form input[type="time"]::-webkit-date-and-time-value{text-align:left}
/* Every time and date box on the site, 2026-09-21. On an iPad their numbers sat above the
   middle of the box and in a different figure style from every other box. The rule above
   first made them display:block, which dropped the flex layout iPad Safari uses to centre
   the value; they are a centred flex row again. Safari also gives the value its own margins
   and figures, so it is told to use exactly the type of the box around it. */
input[type="date"],input[type="time"]{display:flex;align-items:center;font-family:inherit;font-weight:inherit;letter-spacing:inherit;font-variant-numeric:normal;line-height:normal}
input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value{margin:0;text-align:left;font:inherit;font-variant-numeric:normal;letter-spacing:inherit;line-height:normal}
/* iPad and iPhone only: their native date and time boxes ignore a width given to them until
   the native look is switched off. Tapping one still opens the picker. */
@supports (-webkit-touch-callout:none){.workspace-form input[type="date"],.workspace-form input[type="time"]{-webkit-appearance:none;appearance:none}}

/* Change Password: room under the heading, and the requirement list kept clear of the
   boxes. It was centred in a column narrower than itself, so it spilled back against them. */
.password-form h3{margin-bottom:8px}
.password-form{column-gap:32px}
.password-form [data-password-requirements]{justify-self:start;margin:26px 0 0}
/* The real cause of the crowding: each password box kept its built-in width (about 270px)
   even where its column is narrower, so on an iPad it ran under the list beside it. */
.password-form label{grid-template-columns:minmax(0,1fr)}
.password-form .password-field{min-width:0}

/* Dialogs scroll up and down only. On an iPad a slightly sideways swipe dragged the panel
   sideways before it snapped back, so scrolling down bobbed from side to side. Drawing a
   signature still works: the signature pads opt out of scrolling themselves. */
.modal > [role="dialog"],.modal > [role="alertdialog"]{overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}

/* A ride the judge has set aside, waiting for the Show Manager. */
.schedule-row.set-aside{opacity:.55}
.schedule-row.set-aside .rider-cell strong{text-decoration:line-through;text-decoration-thickness:1px}
.status-pill.set-aside,.ride-state.set-aside{background:#fff4dc;color:#7d5410}
.discard-requests{margin:0 0 14px;padding:14px 16px;border:1px solid #efd9a7;border-radius:14px;background:#fffaf0}
.discard-requests h3{margin:0 0 10px;color:#7d5410;font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.discard-request{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;padding:10px 0;border-top:1px solid #f1e3c2}
.discard-request:first-of-type{border-top:0;padding-top:0}
.discard-request strong{display:block;font-size:.92rem}
.discard-request span{display:block;margin-top:2px;color:var(--muted);font-size:.76rem}
.discard-request p{margin:6px 0 0;font-size:.8rem;line-height:1.4}
.discard-request-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.discard-request-actions button{min-height:42px;min-width:136px;padding:0 14px;border:1px solid #cfc5e2;border-radius:9px;background:var(--card);color:var(--purple);font-size:.76rem;font-weight:800}
.discard-request-actions .discard-eliminate{border-color:#e7c9cb;color:#9d3035}
.discard-request-actions button.confirming{border-color:#c99400;background:#fff8e6;color:#8a6100}
.discard-request-note{margin:0;color:var(--muted);font-size:.76rem}
@media (max-width:700px){.discard-request{grid-template-columns:1fr}.discard-request-actions{justify-content:flex-start}}

/* The same, in the dark theme: the light amber panels above would glare on a dark screen. */
:root[data-theme="dark"] .discard-requests{border-color:#5a4520;background:#2b2418}
:root[data-theme="dark"] .discard-requests h3,:root[data-theme="dark"] .judge-controls-section .judge-controls-note{color:#f3cf86}
:root[data-theme="dark"] .discard-request{border-top-color:#4a3c22}
:root[data-theme="dark"] .status-pill.set-aside,:root[data-theme="dark"] .ride-state.set-aside{background:#4a3a18;color:#ffe2a3}
:root[data-theme="dark"] .checkin-item button.confirming,:root[data-theme="dark"] .checkin-toggle.confirming,:root[data-theme="dark"] .discard-request-actions button.confirming{border-color:#c99400;background:#503b17;color:#ffe5a8}
:root[data-theme="dark"] .discard-request-actions button{border-color:#4b4552}
:root[data-theme="dark"] .discard-request-actions .discard-eliminate,:root[data-theme="dark"] .judge-controls-danger .discard-ride{border-color:#6b3a3e;color:#ffb3b8}
:root[data-theme="dark"] .judge-controls-danger .discard-ride:hover{background:#351f25}

/* ---- Voice review, office check-in and score buttons, 2026-09-21 --------------------- */

/* The score buttons draw their - and + instead of using the text characters, which sit
   off-centre in their circles because of how the font places them. */
.score-editor button{display:grid;place-items:center;padding:0;line-height:1}
.score-editor button svg{display:block;width:16px;height:16px}

/* Lines held back during the ride, at the top of the final review. */
.review-held-speech{margin:14px 0;padding:14px 16px;border:1px solid #efd9a7;border-radius:14px;background:#fffaf0}
.review-held-speech h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:#7d5410;font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.review-held-speech h3 span{min-width:20px;padding:1px 7px;border-radius:999px;background:#7d5410;color:#fff;font-size:.66rem;letter-spacing:0;text-align:center}
.review-held-speech>p{margin:0 0 10px;color:var(--muted);font-size:.8rem;line-height:1.4}
.held-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:10px 0;border-top:1px solid #f1e3c2}
.held-text{min-width:0}
.held-where{display:block;color:var(--muted);font-size:.72rem;font-weight:750}
.held-text q{display:block;margin:3px 0;color:var(--ink);font-size:.9rem;font-style:italic;overflow-wrap:anywhere}
.held-text small{color:var(--muted);font-size:.7rem}
.held-actions{display:flex;gap:8px}
.held-actions button{min-height:40px;min-width:88px;padding:0 14px;border:1px solid #cfc5e2;border-radius:9px;background:var(--card);color:var(--purple);font-size:.78rem;font-weight:800}
.held-actions .held-accept{border-color:var(--purple);background:var(--purple);color:#fff}
@media (max-width:700px){.held-line{grid-template-columns:1fr}.held-actions button{flex:1}}

/* Not yet checked in by the show office, so not yet able to ride. */
.status-pill.unchecked,.ride-state.unchecked{background:#f3f1f5;color:#6d6873;border:1px dashed #c9c3cf}
.checkin-toggle.office-first{border-style:dashed;color:#6d6873;font-weight:750}

:root[data-theme="dark"] .review-held-speech{border-color:#5a4520;background:#2b2418}
:root[data-theme="dark"] .review-held-speech h3{color:#f3cf86}
:root[data-theme="dark"] .review-held-speech h3 span{background:#f3cf86;color:#2b2418}
:root[data-theme="dark"] .held-line{border-top-color:#4a3c22}
:root[data-theme="dark"] .held-actions button{border-color:#4b4552}
:root[data-theme="dark"] .held-actions .held-accept{border-color:#8f6ae0;background:#6d3ed1}
:root[data-theme="dark"] .status-pill.unchecked,:root[data-theme="dark"] .ride-state.unchecked{background:#302b36;color:#c9c3cf;border-color:#5a5460}

/* Close buttons draw their X instead of using the × character, which sat off-centre in
   its square the same way the old score buttons did. */
.close-control .close-icon,.editor-close .close-icon{display:block;width:16px;height:16px}
.editor-close{font-size:0;padding:0}

/* Start the test over, in the judge's Controls. */
.judge-controls-button.judge-controls-restart{background:var(--card)}
.judge-controls-button.confirming{border-color:#c99400;background:#fff8e6;color:#8a6100}
:root[data-theme="dark"] .judge-controls-button.confirming{border-color:#c99400;background:#503b17;color:#ffe5a8}

/* ---- Show day, 2026-09-21 ------------------------------------------------------------- */

/* Completed Tests: the test was a bare cell in the page's base size, larger than the rider
   beside it. */
.result-row .test-cell{font-size:.78rem;color:var(--muted)}

/* The Show Manager's and office's schedules between 700px and about 1000px: the columns'
   minimum widths added up to more than the panel, so the status column ran off the right.
   The name and test columns now shrink; head and rows share this one template, and none
   of its tracks depends on what is in a row, so the columns cannot drift. */
@media (min-width:701px){
  #managerHome .schedule-head,#managerHome .schedule-row,#officeHome .schedule-head,#officeHome .schedule-row{grid-template-columns:70px minmax(0,1.5fr) minmax(0,1fr) 95px 112px}
  #judgeHome .schedule-head,#judgeHome .schedule-row{grid-template-columns:70px minmax(0,1.5fr) minmax(0,1fr) 110px 128px}
  #managerHome .schedule-row > *,#officeHome .schedule-row > *,#judgeHome .schedule-row > *{min-width:0}
}

/* The score buttons while recording, until the judge taps a movement's row. */
.score-editor.locked button{opacity:.38}

/* Ready to judge, on the judge's home. */
.judge-readiness{margin:14px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.judge-readiness:empty{display:none}
.judge-readiness h2{margin:0 0 8px;color:var(--muted);font-size:.68rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.judge-readiness ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;margin:0;padding:0;list-style:none}
.readiness-item{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:2px 8px;font-size:.8rem}
.readiness-item i{grid-row:1/3;width:18px;height:18px;margin-top:1px;display:grid;place-items:center;border-radius:50%;background:#e2f3ec;color:#15805f;font-style:normal;font-size:.7rem;font-weight:900}
.readiness-item i svg{display:block}
.readiness-item.warn i{background:#fff4dc;color:#8a6100}
.readiness-item.fail i{background:#fdeceb;color:#9d2610}
.readiness-item.wait i{background:var(--purple-soft);color:var(--purple)}
.readiness-item strong{font-weight:800}
.readiness-item span{grid-column:2;color:var(--muted);line-height:1.35}

/* Practice ride, on the judge's home. */
.practice-strip{margin:12px 0 0;padding:12px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px) auto;align-items:center;gap:10px 14px;border:1px dashed #cfc5e2;border-radius:14px;background:var(--card-muted)}
.practice-strip strong{display:block;font-size:.88rem}
.practice-strip span{display:block;margin-top:2px;color:var(--muted);font-size:.76rem}
.practice-strip select{min-height:40px;padding:0 36px 0 12px;border:1px solid #dcd7e2;border-radius:9px;background-color:var(--card);color:var(--ink);font:inherit;font-size:.8rem}
.practice-strip button{min-height:40px;white-space:nowrap}
@media (max-width:700px){.practice-strip{grid-template-columns:1fr}}

.feedback-details-note{margin:0;color:var(--muted);font-size:.74rem;line-height:1.4}
.practice-strip[hidden]{display:none}

/* The sync light beside the profile picture, on every account. */
.account-area{display:flex;align-items:center;gap:12px}
.header-sync-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 4px;border:0;background:none;color:var(--muted);font-size:.72rem;font-weight:800;white-space:nowrap}
.header-sync-badge[hidden]{display:none}
.header-sync-badge i{flex:none;width:9px;height:9px;border-radius:50%;background:#b7b1bf}
.header-sync-badge.green i{background:#1f9d6d;box-shadow:0 0 0 3px rgba(31,157,109,.16)}
.header-sync-badge.green{color:#15805f}
.header-sync-badge.yellow i{background:#e0a800;box-shadow:0 0 0 3px rgba(224,168,0,.18)}
.header-sync-badge.yellow{color:#8a6100}
.header-sync-badge.red i{background:#d33a2f;box-shadow:0 0 0 3px rgba(211,58,47,.16)}
.header-sync-badge.red{color:#9d2610}

/* The Show Manager's readiness page. */
.readiness-list{display:grid;gap:14px}
.readiness-group{padding:16px 20px;border:1px solid var(--line);border-left:4px solid #15805f;border-radius:14px;background:var(--card)}
.readiness-group.warn{border-left-color:#c99400}
.readiness-group.fail{border-left-color:#c2362d}
.readiness-group h2{margin:0 0 10px;font-size:1rem}
.readiness-group ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.readiness-group .readiness-item{font-size:.86rem}
.readiness-group .readiness-item i{grid-row:1/2;width:22px;height:22px;font-size:.8rem}
.readiness-group .readiness-item div{display:grid;gap:2px}
.readiness-group .readiness-item span{grid-column:auto}

:root[data-theme="dark"] .judge-readiness,:root[data-theme="dark"] .readiness-group{border-color:#4b4552;background:#211d27}
:root[data-theme="dark"] .practice-strip{border-color:#5a5460;background:#1c1921}
:root[data-theme="dark"] .readiness-item i{background:#173128;color:#8fe0c0}
:root[data-theme="dark"] .readiness-item.warn i{background:#4a3a18;color:#ffe2a3}
:root[data-theme="dark"] .readiness-item.fail i{background:#4a1f1d;color:#ffb3aa}

/* Spoken reminders switch in the judge's Controls. */
.spoken-reminders-toggle{display:flex;gap:10px;align-items:flex-start;margin-top:12px;cursor:pointer}
.spoken-reminders-toggle input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--purple)}
.spoken-reminders-toggle strong{display:block;font-size:.82rem}
.spoken-reminders-toggle small{display:block;margin-top:2px;color:var(--muted);font-size:.74rem;line-height:1.4}

/* The set-aside part of the review tray, folded away. */
.held-kept-off{margin-top:10px;border-top:1px solid #efd9a7;padding-top:8px}
.held-kept-off summary{display:flex;align-items:center;gap:8px;cursor:pointer;color:#7d5410;font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.held-kept-off summary span{min-width:20px;padding:1px 7px;border-radius:999px;background:#c9a15a;color:#fff;font-size:.66rem;letter-spacing:0;text-align:center}
.held-kept-off>p{margin:6px 0 8px;color:var(--muted);font-size:.78rem}
.held-line.kept-off q{color:var(--muted)}
:root[data-theme="dark"] .held-kept-off{border-color:#5a4520}
:root[data-theme="dark"] .held-kept-off summary{color:#f3cf86}

/* Setting up the judge's voice, in Controls. */
.voice-id-enrol ol{margin:6px 0 10px;padding-left:20px;font-size:.84rem;line-height:1.5}
.voice-id-meter{height:6px;margin:0 0 10px;border-radius:999px;background:var(--card-muted,#eee9f3);overflow:hidden}
.voice-id-meter i{display:block;height:100%;width:0;background:var(--purple);transition:width .08s linear}
.voice-id-actions{display:flex;gap:8px;flex-wrap:wrap}

/* A correction from the second listen, in the review, with its undo. */
.review-proofread{grid-column:1/-1;margin:2px 0 0;color:var(--muted);font-size:.74rem}
.review-proofread s{color:#9b5707}
.review-proofread b{color:var(--ink)}
.review-proofread button{margin-left:6px;padding:2px 8px;border:1px solid #dcd7e2;border-radius:999px;background:var(--card);color:var(--purple);font-size:.7rem;font-weight:800;cursor:pointer}


/* The owner dashboard. */
.owner-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.owner-tabs button{min-height:36px;padding:0 14px;border:1px solid #dcd7e2;border-radius:999px;background:var(--card);color:var(--ink);font-weight:750;font-size:.82rem;cursor:pointer}
.owner-tabs button.active{background:var(--purple);border-color:var(--purple);color:#fff}
.owner-switch-list{display:grid;gap:12px}
.owner-switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 14px;border:1px solid #ece8f1;border-radius:12px}
.owner-switch-row strong{display:block;font-size:.92rem}
.owner-switch-row p{margin:4px 0 0;color:var(--muted);font-size:.82rem;max-width:62ch}
.owner-switch-row p b{color:var(--ink)}
.owner-search{width:100%;max-width:420px;min-height:40px;margin:0 0 12px;padding:0 12px;border:1px solid #dcd7e2;border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.owner-table{display:grid;gap:0;overflow-x:auto}
.owner-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(160px,1.4fr) minmax(100px,.9fr) minmax(80px,.7fr) minmax(110px,.8fr) minmax(200px,1.2fr);gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid #eeeaf2;font-size:.82rem}
.owner-row.owner-head{color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.owner-row.revoked{opacity:.6}
.owner-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.owner-actions .confirming{border-color:#8b2f35;background:#8b2f35;color:#fff}
.owner-health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.owner-health-grid article{padding:12px 14px;border:1px solid #ece8f1;border-radius:12px}
.owner-health-grid span{display:block;color:var(--muted);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.owner-health-grid strong{display:block;margin-top:4px;font-size:.95rem}
.owner-feedback-list{display:grid;gap:10px}
.owner-feedback{padding:12px 14px;border:1px solid #ece8f1;border-radius:12px}
.owner-feedback header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.82rem}
.owner-feedback header span{color:var(--muted)}
.owner-feedback pre{margin:8px 0 0;white-space:pre-wrap;font:inherit;font-size:.84rem;line-height:1.45;max-height:320px;overflow:auto}
@media (max-width:700px){.owner-row{grid-template-columns:1fr 1fr}.owner-row.owner-head{display:none}.owner-actions{justify-content:flex-start;grid-column:1/-1}}
:root[data-theme="dark"] .owner-switch-row,:root[data-theme="dark"] .owner-health-grid article,:root[data-theme="dark"] .owner-feedback{border-color:#3a3540}
:root[data-theme="dark"] .owner-row{border-color:#3a3540}
/* Billing: the owner's prices, price scale and profit (owner dashboard), and the show manager's bill, payment method and history (Billing tool). */
.owner-billing h3{margin:26px 0 8px;font-size:1rem}.owner-billing-lead{margin:0 0 12px;color:var(--muted);font-size:.86rem}
.owner-billing-totals{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:14px}.owner-billing-totals strong{font-variant-numeric:tabular-nums}
.owner-billing-switch{margin-bottom:6px}
.owner-billing-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.owner-billing-model{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid #ece8f1;border-radius:12px;cursor:pointer}.owner-billing-model:has(input:checked){border:2px solid var(--purple);padding:11px 13px}
.owner-billing-model input{margin-top:3px;accent-color:var(--purple)}.owner-billing-model strong{display:block;font-size:.9rem}.owner-billing-model small{display:block;color:var(--muted);font-size:.78rem}
.owner-billing-inputs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.owner-billing-inputs label[hidden]{display:none}
.owner-billing-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}.owner-billing-actions span{color:var(--muted);font-size:.8rem}
.owner-billing-scale td,.owner-billing-scale th{font-variant-numeric:tabular-nums;white-space:nowrap}.owner-billing-scale td{padding:9px 12px}
.owner-billing-scale tr.at-minimum small{display:inline;margin:0 0 0 6px}
.owner-billing-scale td.profit{text-align:right}.owner-billing-scale td.profit>div{display:flex;align-items:center;gap:10px;justify-content:flex-end}.owner-billing-scale th:last-child{text-align:right}
.owner-billing-bar{display:inline-block;width:120px;height:8px;border-radius:4px;background:#f1edf5;overflow:hidden}.owner-billing-bar i{display:block;height:100%;background:#1f7a4d;border-radius:4px}
@media (max-width:700px){.owner-billing-bar{display:none}.owner-billing-scale th:nth-child(3),.owner-billing-scale td:nth-child(3),.owner-billing-scale th:nth-child(4),.owner-billing-scale td:nth-child(4){display:none}.owner-billing-scale td,.owner-billing-scale th{padding:8px 6px;font-size:.8rem}}
.billing-estimate{display:grid;gap:2px;margin-bottom:12px}.billing-estimate span,.billing-estimate small{color:var(--muted);font-size:.84rem}.billing-estimate strong{font-size:2rem;color:var(--purple);font-variant-numeric:tabular-nums}
.billing-lines td.amount{text-align:right;font-variant-numeric:tabular-nums;font-weight:750}
.billing-method{display:grid;gap:3px;margin-bottom:12px}.billing-method small{color:var(--muted)}
.billing-sheet{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:22px;align-items:start}.billing-sheet-price strong{display:block;font-size:2.2rem;color:var(--purple);line-height:1.1}.billing-sheet-price span{color:var(--muted)}
.billing-sheet ul{margin:0;padding-left:18px;display:grid;gap:6px}
.billing-history td{font-variant-numeric:tabular-nums}.billing-failure{color:#9d2610!important}
.show-day-checks{margin-bottom:22px}
@media (max-width:700px){.billing-sheet{grid-template-columns:1fr}.billing-history th:nth-child(3),.billing-history td:nth-child(3){display:none}}
:root[data-theme="dark"] .owner-billing-model{border-color:#3a3540}:root[data-theme="dark"] .owner-billing-bar{background:#2b2631}:root[data-theme="dark"] .owner-billing-bar i{background:#6fcf9c}
/* Scratched and no-show riders, listed apart below the riders still to ride: faded and struck through, with their status (and the ring manager's Restore) left at full strength. */
.schedule-group.withdrawn{border-top:1px solid var(--line)}.schedule-row.withdrawn>:not(.checkin-actions):not(.status-pill):not(.ride-state){opacity:.5}.schedule-row.withdrawn .rider-cell strong{text-decoration:line-through;text-decoration-thickness:1px}.ride-state.withdrawn{background:#fdeceb;color:#9d2610}
:root[data-theme="dark"] .ride-state.withdrawn{background:#4a221c;color:#ffb4a6}
.owner-message-from{margin:6px 0 0;font-size:.84rem}.owner-message-from a{color:var(--purple);font-weight:700}
/* Owner dashboard -> Voice logs (2026-09-26). */
.owner-voice-filter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.owner-voice-filter input[type="search"]{flex:1 1 260px;min-width:0;height:38px;padding:0 12px;border:1px solid #d8d4dd;border-radius:8px;background:var(--card);color:var(--ink)}
.owner-voice-filter label{display:flex;gap:8px;align-items:center;font-size:.82rem}
.owner-voice-list{display:grid;gap:8px}
.owner-voice-log{border:1px solid #ece8f1;border-radius:12px;padding:10px 14px}
.owner-voice-log summary{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,2fr) minmax(180px,1.4fr);gap:10px;cursor:pointer;font-size:.84rem}
.owner-voice-log summary span{color:var(--muted)}
.owner-voice-log-body{margin-top:10px}
.owner-voice-log-body pre{margin:8px 0 0;white-space:pre-wrap;font:inherit;font-size:.82rem;line-height:1.45;max-height:520px;overflow:auto}
@media (max-width:700px){.owner-voice-log summary{grid-template-columns:1fr}}
:root[data-theme="dark"] .owner-voice-log{border-color:#3a3540}
.workspace-form .checkbox-row{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.workspace-form .checkbox-row input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:0 0 auto;accent-color:var(--purple)}
.workspace-form .checkbox-row strong{display:block;font-size:.84rem;text-transform:none;letter-spacing:0}
.workspace-form .checkbox-row small{display:block;margin-top:2px;color:var(--muted);font-size:.76rem;font-weight:500;text-transform:none;letter-spacing:0}
.workspace-form .muted-note{margin:0;color:var(--muted);font-size:.8rem;font-weight:600}

/* Owner dashboard switches: purple when on, white when off (owner, 2026-09-27). */
.seq-toggle{position:relative;flex:0 0 auto;width:48px;height:28px;padding:0;border:1px solid #d6d0de;border-radius:999px;background:#fff;cursor:pointer;transition:background .18s,border-color .18s}
.seq-toggle span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#c9c1d4;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:transform .18s,background .18s}
.seq-toggle.on{background:var(--purple);border-color:var(--purple)}
.seq-toggle.on span{transform:translateX(20px);background:#fff}
.seq-toggle:focus-visible{outline:3px solid rgba(99,62,160,.3);outline-offset:2px}
.seq-toggle:disabled{opacity:.5;cursor:wait}
.owner-switch-row{transition:border-color .18s,background .18s}
.owner-switch-row.on{border-color:#d8c8ef;background:#faf7fe}
:root[data-theme="dark"] .seq-toggle{background:#2a2530;border-color:#4a4353}
:root[data-theme="dark"] .seq-toggle.on{background:var(--purple);border-color:var(--purple)}
:root[data-theme="dark"] .owner-switch-row.on{background:#2a2233;border-color:#4b3a63}

/* The show manager's Billing tool, and only while the owner has billing on. */
body:not(.billing-on) [data-open-tool="billing"]{display:none}
.billing-page{display:grid;gap:16px}
.billing-show{padding:22px 24px}
.billing-show-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.billing-show-top h2{margin:2px 0 0;font-size:1.3rem}.billing-show-top p{margin:2px 0 0;color:var(--muted);font-size:.84rem}
.billing-kicker{color:var(--purple);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.billing-total{text-align:right}.billing-total span{display:block;color:var(--muted);font-size:.78rem;font-weight:700}
.billing-total strong{display:block;font-size:2.2rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.billing-total small{color:var(--muted);font-size:.78rem}
.billing-progress{margin:18px 0 6px}.billing-progress-bar{height:8px;border-radius:999px;background:#eee9f4;overflow:hidden}
.billing-progress-bar i{display:block;height:100%;border-radius:999px;background:var(--purple);transition:width .3s}
.billing-progress span{display:block;margin-top:6px;color:var(--muted);font-size:.8rem}
.billing-breakdown{width:100%;margin-top:14px;border-collapse:collapse;font-size:.88rem}
.billing-breakdown th{padding:8px 0;border-bottom:1px solid #ece8f1;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-align:left;text-transform:uppercase}
.billing-breakdown td{padding:9px 0;border-bottom:1px solid #f1eef5}.billing-breakdown td:nth-child(2){color:var(--muted)}
.billing-breakdown .amount{text-align:right;font-variant-numeric:tabular-nums}
.billing-breakdown .total td{border-bottom:0;padding-top:12px;font-weight:800;color:var(--ink)}
.billing-empty{margin:14px 0 0;color:var(--muted);font-size:.88rem}
.billing-end{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #ece8f1}
.billing-end p{margin:0;color:var(--muted);font-size:.84rem}
.billing-end-button{min-width:140px}
.billing-end-button:disabled{background:#f1eef5;border:1px solid #ddd6e6;color:#6f6879;cursor:not-allowed;box-shadow:none;opacity:1}
.billing-card-on-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border:1px solid #e4dfeb;border-radius:14px;background:linear-gradient(135deg,#fbf9fe,#f4effa)}
.billing-card-on-file>svg{width:34px;height:34px;flex:0 0 auto;fill:none;stroke:var(--purple);stroke-width:1.6}
.billing-card-on-file>div:first-of-type{flex:1 1 200px}.billing-card-on-file strong{display:block;font-size:.95rem}.billing-card-on-file small{color:var(--muted);font-size:.8rem}
.billing-card-on-file.empty{background:#fcfbfd;border-style:dashed}
.billing-card-actions{display:flex;gap:8px}.billing-card-actions button:disabled{opacity:.5;cursor:not-allowed}
.billing-remove{color:#9d3035}
.billing-secure{display:flex;align-items:center;gap:8px;margin:12px 2px 0;color:var(--muted);font-size:.78rem}
.billing-secure svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8}
.billing-history small{display:block;color:var(--muted);font-size:.76rem}.billing-failure{color:#9d3035!important}
@media (max-width:700px){.billing-total{text-align:left}.billing-show{padding:18px}}
:root[data-theme="dark"] .billing-card-on-file{background:#241f2b;border-color:#3a3540}
:root[data-theme="dark"] .billing-progress-bar,:root[data-theme="dark"] .billing-end-button:disabled{background:#322b3a}

/* Show-day checks at the top of Show Details: light, only what needs doing (owner, 2026-09-27). */
.show-day-checks{margin-bottom:16px}
.readiness-summary{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-size:.9rem}
.readiness-summary.ok{background:#eef8f2;color:#1f6b45}.readiness-summary.warn{background:#fdf6e7;color:#8a5a00}.readiness-summary.fail{background:#fdf0f0;color:#9d3035}
.readiness-summary svg{width:18px;height:18px;flex:0 0 auto}
.readiness-again{margin-left:auto;padding:4px 12px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;opacity:.85}
.readiness-issues{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.readiness-issues li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:start;padding:10px 14px;border:1px solid #ece8f1;border-radius:10px;font-size:.84rem}
.readiness-issues li svg{width:16px;height:16px;margin-top:2px}.readiness-issues strong{display:block;font-weight:650}.readiness-issues span{display:block;color:var(--muted);font-size:.78rem}
.readiness-issues em{color:var(--muted);font-size:.7rem;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.readiness-all{margin-top:8px;font-size:.8rem}.readiness-all summary{cursor:pointer;color:var(--muted);font-weight:700}
.readiness-all ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px}.readiness-all li{display:flex;gap:8px;align-items:center;color:var(--muted)}.readiness-all li svg{width:14px;height:14px}
.readiness-checking{margin:0;padding:12px 16px;border-radius:12px;background:#f6f4f9;color:var(--muted);font-size:.86rem}
:root[data-theme="dark"] .readiness-issues li{border-color:#3a3540}

/* The owner's tier cards above the price table (2026-09-27): what each ride in a tier adds. */
.owner-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0 16px}
.owner-tier{display:grid;gap:6px;align-content:start;padding:16px 18px;border:1px solid #ece8f1;border-radius:12px;background:var(--card,#fff)}
.owner-tier-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.78rem;font-weight:700}
.owner-tier-head em{padding:2px 8px;border-radius:999px;background:#f3ecf8;color:var(--purple);font-size:.7rem;font-style:normal;font-weight:750}
.owner-tier strong{font-size:1.4rem;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.owner-tier strong small{margin-left:5px;color:var(--muted);font-size:.8rem;font-weight:600}
.owner-tier p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.4}
@media (max-width:700px){.owner-tiers{grid-template-columns:1fr}}
:root[data-theme="dark"] .owner-tier{border-color:#3a3540}:root[data-theme="dark"] .owner-tier-head em{background:#2a2233;color:#d9c8ff}
/* The owner's price table in plain words, and the Billing page preview (2026-09-27). */
.price-table{display:grid;border:1px solid #ece8f1;border-radius:12px;overflow:hidden}
.price-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,1fr) minmax(220px,1.6fr);gap:16px;align-items:center;padding:12px 18px;border-top:1px solid #f1eef5}
.price-row:first-child{border-top:0}
.price-head{background:#faf8fc;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.price-row strong{font-size:1rem;font-variant-numeric:tabular-nums}
.price-row em{margin-left:8px;padding:2px 8px;border-radius:999px;background:#f3ecf8;color:var(--purple);font-size:.7rem;font-style:normal;font-weight:750}
.price-pays{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.price-keep{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
.price-keep strong{color:#1f7a4d}.price-keep small{grid-column:1/-1;color:var(--muted);font-size:.74rem}
.price-bar{display:block;height:8px;border-radius:999px;background:#eef6f1;overflow:hidden}.price-bar i{display:block;height:100%;border-radius:999px;background:#3aa06a}
.owner-billing-preview-link{margin-top:8px;padding:0;border:0;background:none;color:var(--purple);font:inherit;font-size:.82rem;font-weight:750;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.billing-notice{margin:0;padding:10px 14px;border-radius:12px;background:#f3ecf8;color:#4e2f86;font-size:.86rem}
/* The non-payment protections (billing-api.js): what the show manager and judge are asked to do. */
/* Each is a card with an icon, what to do, and the button that does it. */
.billing-notice-warn,.billing-notice-action{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid;border-radius:14px;font-size:.86rem}
.billing-notice-warn{background:#fdf5ea;border-color:#f1d9b3;color:#6d3f07}.billing-notice-action{background:#f5f1fd;border-color:#e2d8f8;color:#3b237d}
.billing-notice-warn>svg,.billing-notice-action>svg{flex:0 0 auto;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.billing-notice-warn>svg{color:#b86b13}.billing-notice-action>svg{color:var(--purple)}
.billing-notice-warn>div,.billing-notice-action>div{flex:1 1 auto;display:grid;gap:2px;min-width:0}
.billing-notice-warn strong,.billing-notice-action strong{font-size:.95rem}
.billing-notice-warn>button,.billing-notice-action>button{flex:0 0 auto;margin-left:auto;font-size:1rem}
@media (max-width:620px){.billing-notice-warn,.billing-notice-action{flex-wrap:wrap}.billing-notice-warn>button,.billing-notice-action>button{width:100%;margin-left:0}}
.billing-end-text{flex:1 1 260px}.billing-end p.billing-autoclose{margin-top:6px}
/* Just after End show: the show's closed bill, with its status (managerEndedShow). */
.billing-ended{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0 0;color:var(--muted);font-size:.9rem}
/* Held while the show's bill is unpaid (resultsLockedNotice): a notice at the top of the screen,
   and each held button muted, with a lock. */
.results-locked-notice{margin-bottom:18px}
button[data-locked="true"]{opacity:.6;cursor:not-allowed}
button[data-locked="true"]::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
@media print{.results-locked-notice{display:none}}
/* A closed show (closed-show.js): the notice on Schedule, Show Details and Check-in, and the
   Corrections switch on the ended show's Billing card. */
.closed-show-notice{margin-bottom:18px}
.billing-corrections{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:.88rem}
.billing-corrections>svg{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:var(--purple);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.billing-corrections>div{flex:1 1 auto;display:grid;gap:2px;min-width:0}.billing-corrections span{color:var(--muted)}
.billing-corrections>button{flex:0 0 auto}
@media (max-width:620px){.billing-corrections{flex-wrap:wrap}.billing-corrections>button{width:100%}}
@media print{.closed-show-notice{display:none}}
/* Riders: an email linked to a rider account shows a lock where the remove button would be. */
.rider-email-linked{display:grid;place-items:center;width:36px;height:36px;color:var(--muted)}
.rider-email-linked svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rider-email-row input[readonly]{background:var(--card-muted,#f3f1f6);cursor:default}
/* In an editor during Corrections, the fields that can't change look it. */
.closed-editor-note{margin:0;padding:10px 14px;border-radius:12px;background:#f5f1fd;color:#3b237d;font-size:.88rem;font-weight:650}
.workspace-form input:disabled:not([type=radio]):not([type=checkbox]),.workspace-form select:disabled{background:var(--card-muted,#f3f1f6);color:var(--muted);border-style:dashed;cursor:not-allowed;opacity:1}
.workspace-form .status-choice input:disabled+span{opacity:.5;cursor:not-allowed}
:root[data-theme="dark"] .closed-editor-note{background:#2a2233;color:#e3d2f0}
/* The judge's next ride while scoring waits for the show manager's card: a small badge, and an
   Open button that plainly cannot be pressed. */
.next-person .scoring-closed{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 11px;border-radius:999px;background:#fdf5ea;color:#7a4508;font-size:.8rem;font-weight:650}
.next-person .scoring-closed svg{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.primary-action:disabled{background:#f1eef5;color:#8a8494;box-shadow:none;cursor:not-allowed}
:root[data-theme="dark"] .billing-notice-warn{background:#3a2a16;border-color:#5a4020;color:#f3d3a6}:root[data-theme="dark"] .billing-notice-action{background:#2a2233;border-color:#3f3452;color:#e3d2f0}
:root[data-theme="dark"] .next-person .scoring-closed{background:#3a2a16;color:#f3d3a6}:root[data-theme="dark"] .primary-action:disabled{background:#322b3a;color:#9a93a3}
@media (max-width:700px){.price-row{grid-template-columns:1fr 1fr;}.price-keep{grid-column:1/-1}}
:root[data-theme="dark"] .price-table,:root[data-theme="dark"] .price-row{border-color:#3a3540}:root[data-theme="dark"] .price-head{background:#241f2b}:root[data-theme="dark"] .billing-notice{background:#2a2233;color:#e3d2f0}
/* Riders (Show Manager and office): every rider's emails. The table keeps fixed columns that
   fill the width, head and rows alike. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.riders-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.riders-note{margin:0 0 14px}
.riders-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.riders-controls input[type=search]{flex:1 1 240px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font:inherit}
.riders-scope{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--card-muted)}
.riders-scope button{border:0;background:none;border-radius:999px;padding:8px 14px;font:inherit;font-weight:750;color:#625b68;cursor:pointer}
.riders-scope button[aria-pressed=true]{background:var(--card);color:var(--purple);box-shadow:0 1px 3px rgba(23,21,33,.12)}
.riders-table{display:table;table-layout:fixed;width:100%;margin:0}
.riders-table col.c-rider{width:24%}.riders-table col.c-emails{width:38%}.riders-table col.c-rides{width:10%}.riders-table col.c-status{width:16%}.riders-table col.c-action{width:12%}
.riders-table td{overflow-wrap:anywhere}
.riders-table tr.selected td{background:#faf8ff}
.riders-table .workspace-button-secondary{width:100%}
.email-chip{display:inline-block;max-width:100%;margin:2px 6px 2px 0;padding:4px 10px;border-radius:999px;background:var(--card-muted);font-size:13px;font-weight:650;overflow-wrap:anywhere}
.email-chip.joined{background:#e8f5f0;color:#0c7357}
.email-chip.unsubscribed{background:#f2f1f4;color:#8f8a99;text-decoration:line-through}
.status-pill.invited{background:#eef4fb;color:#285a8e}
.rider-email-rows{display:grid;gap:8px}
.rider-email-row{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem 36px;align-items:center;gap:10px}
.rider-email-row input{min-height:44px}
.rider-email-row small{color:var(--muted);font-size:.78rem;font-weight:700}
.rider-email-remove{display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.rider-email-remove:hover{background:#fdeceb;color:#9d2610}
.rider-email-remove:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
/* The editor glides into view under the sticky header when a rider is opened. */
.rider-editor-card{scroll-margin-top:100px;animation:riderEditorIn .25s ease-out}
@keyframes riderEditorIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rider-editor-card{animation:none}}
.riders-table tr{scroll-margin-top:100px}
.rider-editor-rides{margin:16px 0 0}
.rider-editor-rides summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--purple);font-weight:750;list-style:none}
.rider-editor-rides summary::-webkit-details-marker{display:none}
.rider-editor-rides summary::before{content:"\25B8";transition:transform .15s}
.rider-editor-rides[open] summary::before{transform:rotate(90deg)}
.rider-rides-table{width:100%;margin:10px 0 0;border-collapse:collapse;table-layout:fixed;font-size:.9rem}
.rider-rides-table col.c-show{width:50%}.rider-rides-table col.c-date{width:20%}.rider-rides-table col.c-class{width:30%}
.rider-rides-table th{padding:8px 12px;border-bottom:1px solid var(--line);color:#6d6574;font-size:11px;letter-spacing:.07em;text-transform:uppercase;text-align:left}
.rider-rides-table td{padding:10px 12px;border-bottom:1px solid #ece9ef;overflow-wrap:anywhere}
.rider-rides-table tr:last-child td{border-bottom:0}
.this-show-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--purple-soft);color:var(--purple);font-size:11px;font-weight:800;vertical-align:1px}
@media(max-width:760px){
  .riders-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .riders-table col.c-rider{width:34%}.riders-table col.c-emails{width:66%}.riders-table col.c-rides,.riders-table col.c-status,.riders-table col.c-action{width:0}
  .riders-table th:nth-child(n+3),.riders-table td:nth-child(n+3){display:none}
  .riders-table tbody tr{cursor:pointer}
  .riders-table tbody tr:active td{background:#f4f0fd}
  .rider-email-row{grid-template-columns:minmax(0,1fr) 36px}.rider-email-row small{grid-column:1/-1;grid-row:2}
  .rider-rides-table col.c-show{width:46%}.rider-rides-table col.c-date{width:24%}
}

/* ---- Phones, 2026-09-27 --------------------------------------------------------------
   On an iPhone the Show Manager's and office's dashboards were 717px wide on a 390px screen,
   so Safari shrank the whole page to fit and zoomed back in on every tap. The judge's home,
   Staff, the signed-tests list and a signed test had the same fault, hidden: a clipping
   panel or a table's own sideways scroller kept the page narrow while their columns sat
   past the right edge. The ring manager's list ran past a 375px screen. Up to 700px wide,
   nothing on a staff screen is wider than the screen. The judge's judging screen is left
   as it is. */
@media (max-width:700px){
  /* The dashboard is one column the width of the screen. A plain 1fr grew to its widest
     content, and the tool rail stretched with it. */
  .role-dashboard-shell{grid-template-columns:minmax(0,1fr)}
  /* The schedules keep #, rider and ride time, as the phone rules in overhaul.css and
     overhaul-voice.css meant. Those lost to the ID rules for wider screens, whose rider and
     test columns would not go below 220px and 150px (the 701px-and-up counterpart is under
     "Show day, 2026-09-21" above). */
  #managerHome .schedule-head,#managerHome .schedule-row,#officeHome .schedule-head,#officeHome .schedule-row,
  #judgeHome .schedule-head,#judgeHome .schedule-row{grid-template-columns:42px minmax(0,1fr) 92px}
  /* The judge's status (Waiting, Submitted, Set aside) goes under the rider's name. */
  #judgeHome .schedule-row{row-gap:6px}
  #judgeHome .schedule-row > :nth-child(5){grid-column:2/-1;justify-self:start}
  /* Show Day Schedule and Completed Tests share the width; their names wrap rather than
     widen it. */
  .dashboard-view-switch button{min-width:0;white-space:normal}

  /* The ring manager's check-in list. Six columns needed 345px before the rider's name got
     any, so on a phone the name column was 0px wide and the list ran past the edge of a
     375px screen. And overhaul.css hides every schedule head's fifth label (Ride time),
     which these rows keep, so each label sat over the wrong column. Each rider is now a card
     on one template shared by head and rows: number, rider and ride time; arena and
     countdown under the name; the check-in buttons two by two beneath. */
  .schedule-head.ringmanager,.ringmanager-grid .schedule-row{grid-template-columns:40px minmax(0,1fr) 84px;gap:4px 10px}
  body[data-account-role="ringmanager"] .ringmanager-grid .schedule-row{min-height:0;padding:10px 14px}
  .schedule-head.ringmanager{padding-left:14px;padding-right:14px}
  .schedule-head.ringmanager span:nth-child(5){display:block}
  .schedule-head.ringmanager span:nth-child(4),.schedule-head.ringmanager span:nth-child(n+6){display:none}
  .ringmanager-grid .schedule-row .ride-number{grid-column:1;grid-row:1/3}
  .ringmanager-grid .schedule-row .rider-cell{grid-column:2;grid-row:1}
  .ringmanager-grid .schedule-row .ride-time{grid-column:3;grid-row:1}
  .ringmanager-grid .schedule-row .arena-cell{grid-column:2;grid-row:2;color:var(--muted)}
  .ringmanager-grid .schedule-row .countdown-cell{grid-column:3;grid-row:2}
  .ringmanager-grid .schedule-row .checkin-actions{grid-column:1/-1;grid-row:3;margin-top:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The ring manager's Next card: the number, then the rider with the check-in state under
     the name. Its columns for wider screens left the name 18px. */
  body[data-account-role="ringmanager"] #ringmanagerNextRide{grid-template-columns:88px minmax(0,1fr);gap:4px 14px}
  body[data-account-role="ringmanager"] #ringmanagerNextRide > .next-number{grid-row:1/3}
  body[data-account-role="ringmanager"] #ringmanagerNextRide > .next-person{white-space:normal}
  body[data-account-role="ringmanager"] #ringmanagerNextRide > .status-pill{grid-column:2;justify-self:start}
  /* Placings: a long name wraps inside its own column on the narrowest phones. */
  .awards-live-card .data-table{margin:0 16px;width:calc(100% - 32px)}
  .awards-live-card .data-table th,.awards-live-card .data-table td{padding-left:8px;padding-right:8px;overflow-wrap:anywhere}

  /* Staff and the signed-tests list: each row is a small card with the same two columns.
     Staff: name and status, then email, role and buttons (a pending invitation's only name
     is its email, so the email stays). Signed tests: rider and ride time, then the test,
     status and buttons. */
  .people-table,.people-table tbody,.completed-table,.completed-table tbody{display:block;overflow:visible}
  .people-table thead,.completed-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .people-table tr,.completed-table tr{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:4px 12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
  .people-table tr:last-child,.completed-table tr:last-child{border-bottom:0}
  .people-table td,.completed-table td{min-width:0;padding:0;border:0;overflow-wrap:anywhere}
  .people-table td:nth-child(2),.people-table td:nth-child(3),.completed-table td:nth-child(2){grid-column:1;color:var(--muted);font-size:.86rem}
  .people-table td:nth-child(4),.completed-table td:nth-child(3){grid-column:2;grid-row:1;justify-self:end}
  .people-table td:nth-child(5),.completed-table td:nth-child(n+4),.completed-table td[colspan]{grid-column:1/-1}
  .people-table .table-actions,.completed-table .table-actions{justify-content:flex-start}
  .people-table .table-actions:empty{display:none}

  /* A signed test: #, movement and score, with the judge's comment under the movement. The
     coefficient and weighted total are in Test details and on the official PDF. Head and
     rows share one template. */
  .score-table,.score-table thead,.score-table tbody{display:block;overflow:visible}
  .score-table tr{display:grid;grid-template-columns:34px minmax(0,1fr) 52px;column-gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
  .score-table tbody tr:last-child{border-bottom:0}
  .score-table th,.score-table td{min-width:0;padding:0;border:0;overflow-wrap:anywhere}
  .score-table td:nth-child(1),.score-table th:nth-child(1),.score-table td:nth-child(3),.score-table th:nth-child(3){width:auto}
  .score-table th:nth-child(n+4),.score-table td:nth-child(4),.score-table td:nth-child(5){display:none}
  .score-table td:nth-child(6){grid-column:2/-1}
  .score-table td:nth-child(6):empty{display:none}
}
/* A long address in a show-day check wraps inside its card instead of stretching it. */
.readiness-issues li{grid-template-columns:18px minmax(0,1fr) auto}
.readiness-issues strong,.readiness-issues span{overflow-wrap:anywhere}