/* sys pages (0.36 layout pass): Online, Devices & Access, Systems check, Data & Backups, Concessions & Vendors,
   Sponsors, Print & Export, Results & Awards (with the recap and leaders), Quick start guide, Tournaments. */

/* ---- page titles: the one line under the title sits close to it inside the header row */
.page-head > div > .page-sub { margin: 2px 0 0; }
.page-head > div > h1 { margin: 0; }

/* ---- a small switch (inline, next to a word) */
.switch.sm { width: 36px; height: 20px; }
.switch.sm span::before { width: 14px; height: 14px; }
.switch.sm input:checked + span::before { transform: translateX(16px); }
.sw-inline, .vd-on, .sp-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; white-space: nowrap; }
.sp-sw.is-off { color: var(--muted); }

/* ---- Online: "What the public sees" (every public switch in one place) and Connections */
.wps { scroll-margin-top: 16px; }
.wps .card-head { align-items: center; margin-bottom: 2px; }
.wps .card-head .btn svg.ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.wps-sub { margin: 0 0 4px; }
.wps-where { display: inline-block; margin-left: 6px; font-size: 12.5px; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.wps-where:hover { color: #1a43bd; }
.wps.wps-flash { animation: wps-flash 1.6s ease-out 1; }
@keyframes wps-flash { 0% { box-shadow: 0 0 0 6px rgba(47, 107, 255, .35); } 100% { box-shadow: 0 0 0 0 rgba(47, 107, 255, 0); } }
.ol-row > div { min-width: 0; }
.ol-row > .switch { flex: none; }
/* the state on another page, with its link to the Online card */
.wps-link { line-height: 1.7; }
.wps-link a { font-weight: 600; }
.dv-pubstate { margin: -4px 0 12px; color: var(--muted); }
.dv-pubstate b.dv-on { color: #067647; }
.dv-pubstate b.dv-off { color: #b42318; }
.dv-pubstate a { font-weight: 600; }
.dv-sw .sw-row { padding: 4px 0; }

/* ---- Data & Backups: "Manage tournaments →" and the Danger zone at the bottom */
.dt-manage { font-weight: 600; font-size: 14px; white-space: nowrap; }
.dt-danger { padding: 0; border-color: #fecdca; }
.dt-danger > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 16px 20px; cursor: pointer; border-radius: var(--radius); }
.dt-danger > summary::-webkit-details-marker { display: none; }
.dt-danger > summary:hover { background: #fffbfa; }
.dt-danger > summary:focus-visible { outline: 2px solid #b42318; outline-offset: -2px; }
.dt-danger .dt-chev { color: #b42318; font-size: 12px; display: inline-block; transition: transform .15s; }
.dt-danger[open] .dt-chev { transform: rotate(90deg); }
.dt-danger > summary > b { color: #b42318; font-size: 16px; }
.dt-danger-body { padding: 0 20px 16px; }
.dt-danger-body h2 { margin-top: 0; }

/* ---- Concessions & Vendors / Sponsors */
.vd-settings .wps-link { flex: 1 1 260px; }
.sp-strip { margin: 12px 0 0; }
.sp-fields .row.sp-sws { gap: 8px 18px; }
.sp-fields .row.sp-btns { gap: 6px; align-items: center; }
.sp-del { margin-left: auto; }

/* ---- Print & Export: the custom sign in its own window */
.modal.sign-modal { width: min(1060px, 100%); }
.sign-modal .pc-sign { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.sign-modal .pc-sign > p { margin-top: 0; }
.sign-modal .modal-foot .sign-clear { margin-right: auto; }

/* ---- Results: standings rank (phone cards), Awards, Leaders */
.st-rank { display: none; }
.st-note { margin: 10px 0 16px; }
@media (max-width: 1000px) { .standings .st-race { display: none; } }
.sw-inline { font-size: 14px; }
.ld-where { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; position: relative; }
.ld-where-l { font-size: 15px; }
.ld-pickwrap { position: relative; }
.ld-pick { font-weight: 600; }
.ld-sp { flex: 1; }
.ld-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 6px; width: 360px; max-width: calc(100vw - 32px); }
.ld-pi { display: flex; gap: 12px; align-items: flex-start; padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.ld-pi:hover { background: #f2f4f7; }
.ld-pi small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.ld-pi .switch { flex: none; margin-top: 1px; }
.ld-pnote { border-top: 1px solid #e4e7ec; margin: 6px 6px 2px; padding: 8px 6px 4px; font-size: 12.5px; color: var(--muted); }
.ld-hr { display: flex; gap: 6px; align-items: center; flex: none; }
.ld-eye { display: inline-grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #344054; font-size: 16px; cursor: pointer; flex: none; }
.ld-eye:hover { border-color: #98a2b3; }
.ld-eye:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 1px; }
.ld-eye.off { color: #8a4b00; background: #fff4e0; border-color: #f5d9a8; }

/* ---- Quick start guide: finished and later phases fold to one line; the current one is open with "Now" */
.gd-fold { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.gd-fold:hover { background: #f8fafc; }
.gd-fold .gd-n.ok { background: #16a34a; }
.gd-fold.later .gd-n { background: #98a2b3; }
.gd-fold .gd-fh { font-size: 16px; font-weight: 700; }
.gd-fold .gd-fc { color: var(--muted); font-size: 14px; }
.gd-fold .gd-fc b { color: #067647; }
.gd-fold .gd-chev { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.gd-phase.now { margin-top: 18px; }
.gd-now { background: #e0ebff; color: var(--brand, #2563eb); font-size: 12px; }
.gd-hide { margin-left: auto; font-weight: 400; }
.gd-acts { display: flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.gd-mdone svg.ic { color: #16a34a; }
.gd-hand { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---- phones: nothing runs off the edge */
@media (max-width: 640px) {
  .dt-btns, .off-card .row, .sp-fields .row, .dt-danger-body .row, .vd-body .row, .aw-picks { flex-wrap: wrap; }
  .dt-btns > .btn, .off-card .row > .btn, .dt-danger-body .row > .btn { max-width: 100%; }
  .page-head > div:first-child { min-width: 0; }
  /* Online: a row with a drop-down stacks (the text on top, the drop-down under it) */
  .ol-row { flex-wrap: wrap; }
  .ol-row > div { flex: 1 1 200px; }
  .ol-row select { min-width: 0; width: 100%; flex: 1 1 100%; }
  .wps .card-head { flex-wrap: wrap; gap: 8px; }
  .wps-where { display: table; margin: 4px 0 0; white-space: normal; }
  /* Data & Backups */
  .dt-btns > .btn { flex: 1 1 auto; white-space: normal; }
  .dt-backups code { word-break: break-all; }
  .off-card .card-head { flex-wrap: wrap; }
  .off-dest form select { max-width: none; flex: 1 1 100%; }
  .off-dest form input { flex: 1 1 100%; min-width: 0; width: 100%; }
  .dt-danger > summary, .dt-danger-body { padding-left: 14px; padding-right: 14px; }
  .purge-list { grid-template-columns: 1fr; }
  .dt-danger-body .row .btn { white-space: normal; text-align: left; height: auto; }
  /* Sponsors: one column, fields full width, buttons on their own line */
  .sp-item { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .sp-img { height: 96px; }
  .sp-fields { min-width: 0; }
  .sp-fields > input { width: 100%; box-sizing: border-box; min-width: 0; margin: 0; }
  .sp-preview { grid-template-columns: 1fr; }
  /* Concessions & Vendors: the stand's row wraps */
  .vd-head { gap: 8px 10px; }
  .vd-title { min-width: 0; flex: 1 1 100%; }
  .vd-title > div { min-width: 0; }
  .vd-codechip { flex: 0 1 auto; }
  .vd-actions { margin-left: 0; flex-wrap: wrap; }
  .vd-settings .vd-set-row { align-items: stretch; }
  .vd-settings .field.sm { flex: 1 1 100%; }
  /* Devices & Access */
  .dv-mode { flex-wrap: wrap; }
  .dv-pubstate { margin-top: 0; }
  /* Results: standings and awards as cards */
  .table.m-cards tr[hidden] { display: none !important; }
  .standings.m-cards tr.st-team td.m-title::after { content: none; }
  .standings.m-cards .st-rank { display: inline; font-weight: 800; color: var(--muted); margin-right: 2px; }
  .standings.m-cards .st-chev { position: absolute; right: 14px; top: 14px; color: #98a2b3; }
  .standings.m-cards td.st-total { font-size: 15px; order: -1; margin-right: 6px; }
  .standings.m-cards td.st-pill { flex: 1 1 100%; }
  .standings.m-cards tr.st-break td { flex: 1 1 100%; overflow-x: auto; }
  .aw-weights.m-cards td.m-sub .pill { vertical-align: 1px; }
  .aw-weights .aw-pl-w { display: inline; }
  .aw-picks .field { flex: 1 1 100%; }
  .aw-picks .field select { width: 100%; }
  .ld-where { gap: 8px; }
  .ld-pickwrap { flex: 1 1 100%; }
  .ld-pick { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }
  .ld-grid { grid-template-columns: 1fr; }
  .ld-head { flex-wrap: wrap; }
  /* Director's recap */
  .rc-bar .field.inline { flex: 1 1 100%; flex-wrap: wrap; }
  .rc-bar .field.inline select { width: 100%; max-width: none; flex: 1 1 100%; }
  .rc-kv td:last-child { overflow-wrap: anywhere; }
  .rc .grid2 { grid-template-columns: minmax(0, 1fr); }
  .rc .grid2 > .card { min-width: 0; }
  .rc-mats.m-cards tr { column-gap: 14px; padding: 10px 4px; }
  .rc-mats.m-cards tr.rc-slow { background: #fff7e6; }
  .rc-mats.m-cards td.m-title { font-size: 15px; }
  /* Devices → All connected devices as cards */
  .dv-table.m-cards tr { column-gap: 12px; }
  .dv-table.m-cards td.dv-ua { flex: 1 1 100%; }
  .dv-table.m-cards td.m-title { padding-right: 4px !important; }
  #dv-all > .card-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* Quick start guide */
  .gd-step { flex-wrap: wrap; }
  .gd-body { flex: 1 1 calc(100% - 40px); }
  .gd-acts { flex: 1 1 100%; justify-content: flex-start; padding-left: 34px; }
  .gd-fold { flex-wrap: wrap; gap: 6px 10px; }
  .gd-fold .gd-fh { flex: 1 1 calc(100% - 44px); }
  .gd-fold .gd-fc { padding-left: 38px; }
  .gd-fold .gd-dot { display: none; }
  /* the custom sign editor on a phone */
  .modal.sign-modal .sign-editor { grid-template-columns: 1fr; }
}
.aw-pl-w { display: none; }
/* QR cards one to a row on a narrow phone */
@media (max-width: 480px) {
  .qr-grid { grid-template-columns: 1fr; }
  .qr-grid .qr-card .dv-mini small { display: inline; }
}
/* (shell) a long page name in the phone top bar ("Concessions & Vendors") widened the whole page: the column may
   shrink below its content, and the name ends in "…" instead */
@media (max-width: 900px) {
  .admin { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Print & Export: a tick box with its ? next to it (the ? outside the label, so it doesn't tick the box) */
.pc-check { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.pc-check > .help-wrap { flex: none; }
.pc-check > .pc-check-note { flex: 1 1 100%; padding-left: 30px; font-size: 12px; line-height: 1.35; }

/* ---- Results & Awards: one line instead of an empty tab or a card per undecided weight */
.rs-empty { padding: 18px 20px; }
.rs-empty p { margin: 0; }
.rs-empty-line { margin: 0; padding: 4px 18px 16px; }
.rs-waiting { margin-top: 4px; }
.aw-weights:has(> tbody:empty) { display: none; }
/* ---- Tournaments: the hub note is one paragraph beside its icon */
.tl-hubnote { align-items: flex-start; }
.tl-hubnote svg.ic { margin-top: 1px; }
.tl-hubnote > span { min-width: 0; }
/* Danger zone: after a reset, what was cleared */
.purge-item .ok-tag { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: #067647; background: #ecfdf3; border: 1px solid #abefc6; border-radius: 99px; padding: 0 8px; }
.purge-item.cleared { border-color: #abefc6; background: #f6fef9; }
.btn.purge-done { background: #ecfdf3; border-color: #abefc6; color: #05603a; opacity: 1; cursor: default; }
.purge-last { margin: 10px 0 0; font-size: 13px; color: #05603a; background: #ecfdf3; border: 1px solid #abefc6; border-radius: 10px; padding: 8px 12px; }