/* Race Prints — In development workbench (admin / local / preview only).
 *
 * Two halves:
 *  1. `.rp-app…`  — the in-app workbench (rail, options, preview). Never printed.
 *  2. `.rp-page…` — the paper sheets. Shared by the on-screen preview and the
 *     standalone print document (see buildPrintDocument in race-prints-app.js),
 *     so what you see in the preview is what comes out of the printer.
 *
 * Sheet layouts use millimetres on purpose: the pagination in race-prints-app.js
 * counts rows per page with the same mm constants (see PAGE_MM / ROW_MM there).
 */

.race-prints-panel-head {
  margin: 0 0 6px;
}

/* The panel is the frame the top bar pins itself to (see .rp-topbar). */
.race-event-panel--race-prints {
  position: relative;
}

.race-event-nav__group[data-nav-group='in-development'] .race-event-siderail__section {
  color: #b45309;
}

/* Race Prints wants the room: the course-plan printer is three columns wide
   and a page preview reads better big. Only while this panel is the one on
   screen; every other panel keeps the shell's own column. (Markus: move this
   into the shell stylesheet if you prefer it there.) */
main.race-event-main:has(> #race-panel-race-prints:not([hidden])) {
  max-width: none;
}

/* ------------------------------------------------------------------ */
/* Workbench                                                           */
/* ------------------------------------------------------------------ */

/* Modes and the course plan's buttons ride the panel title's row, top
   right, so the worksheet keeps the whole height under it. */
.rp-topbar {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  .rp-topbar {
    position: static;
    justify-content: flex-start;
    margin: 0 0 10px;
  }
}

.rp-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rp-topbar__actions[hidden] {
  display: none;
}

.rp-modes {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 12px;
  background: #fff;
}

.rp-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 120px;
  padding: 5px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--text-muted, #5c6178);
  cursor: pointer;
}

.rp-mode span {
  font-size: 0.85rem;
  font-weight: 800;
}

.rp-mode small {
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.8;
}

.rp-mode:hover {
  background: var(--bg-subtle, #f0f5fb);
}

.rp-mode.is-on {
  background: var(--accent, #1c6c9e);
  color: #fff;
}

.rp-app {
  --rp-ui-border: var(--border-solid, #e2e8f0);
  --rp-ui-muted: var(--text-muted, #5c6178);
  --rp-ui-accent: var(--accent, #1c6c9e);
  --rp-ui-accent-soft: var(--noribel-blue-dim, rgba(142, 199, 237, 0.18));
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 16px;
  min-height: 560px;
  align-items: start;
}

@media (max-width: 960px) {
  .rp-app {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rp-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}

.rp-card {
  border: 1px solid var(--rp-ui-border);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
}

.rp-card__title {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rp-ui-muted);
}

.rp-summary {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}

.rp-summary strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.rp-summary__meta {
  color: var(--rp-ui-muted);
}

.rp-summary__warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.8rem;
  line-height: 1.4;
}

.rp-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rp-sheet-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.rp-sheet-item:hover {
  background: var(--bg-subtle, #f0f5fb);
}

.rp-sheet-item input {
  margin: 2px 0 0;
  accent-color: var(--rp-ui-accent);
}

.rp-sheet-item--off {
  cursor: default;
  opacity: 0.55;
}

.rp-sheet-item__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.rp-sheet-item__hint {
  display: block;
  font-size: 0.75rem;
  color: var(--rp-ui-muted);
  line-height: 1.35;
}

.rp-field {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.8rem;
}

.rp-field:last-child {
  margin-bottom: 0;
}

.rp-field__label {
  color: var(--rp-ui-muted);
  font-weight: 600;
}

.rp-field select,
.rp-field input[type='text'] {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--rp-ui-border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.8rem;
}

.rp-seg {
  display: inline-flex;
  border: 1px solid var(--rp-ui-border);
  border-radius: 8px;
  overflow: hidden;
}

.rp-seg button {
  flex: 1;
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  background: #fff;
  font: inherit;
  font-size: 0.74rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--rp-ui-muted);
  cursor: pointer;
}

.rp-seg button + button {
  border-left: 1px solid var(--rp-ui-border);
}

.rp-seg button[aria-pressed='true'] {
  background: var(--rp-ui-accent);
  color: #fff;
}

.rp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--rp-ui-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text, #0f1222);
  cursor: pointer;
}

.rp-btn:hover {
  background: var(--bg-subtle, #f0f5fb);
}

.rp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rp-btn--primary {
  background: var(--rp-ui-accent);
  border-color: var(--rp-ui-accent);
  color: #fff;
}

.rp-btn--primary:hover {
  background: var(--noribel-blue, #42abe0);
  border-color: var(--noribel-blue, #42abe0);
}

.rp-btn svg {
  width: 16px;
  height: 16px;
}

.rp-actions__hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--rp-ui-muted);
  line-height: 1.4;
}

.rp-status {
  font-size: 0.8rem;
  color: var(--rp-ui-muted);
  min-height: 1.2em;
}

.rp-status--error {
  color: #b91c1c;
}

/* Preview */

.rp-preview {
  position: relative;
  border: 1px solid var(--rp-ui-border);
  border-radius: 12px;
  background: #e5e9ef;
  padding: 20px;
  min-height: 560px;
  overflow: hidden;
}

.rp-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: var(--rp-ui-muted);
}

.rp-preview__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.rp-preview__empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--rp-ui-muted);
  font-size: 0.9rem;
}

/* Scaled page wrapper: JS sets --rp-scale and the wrapper size. */
.rp-scaler {
  position: relative;
  flex: 0 0 auto;
}

.rp-scaler > .rp-page {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--rp-scale, 1));
  transform-origin: top left;
  box-shadow:
    0 1px 2px rgba(11, 34, 51, 0.18),
    0 10px 30px rgba(11, 34, 51, 0.16);
}

/* ------------------------------------------------------------------ */
/* Pages (shared by preview + print document)                          */
/* ------------------------------------------------------------------ */

.rp-page {
  --rp-ink: #0b2233;
  --rp-ink-muted: #526273;
  --rp-ink-subtle: #8a98a6;
  --rp-line: #cfd8e0;
  --rp-line-strong: #0b2233;
  --rp-accent: #1c6c9e;
  --rp-accent-soft: #eaf4fb;
  --rp-zebra: #f6f9fb;
  box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  padding: 12mm 12mm 10mm;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--rp-ink);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 9.5pt;
  line-height: 1.3;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.rp-page--landscape {
  width: 297mm;
  height: 210mm;
}

.rp-page--letter {
  width: 215.9mm;
  height: 279.4mm;
}

.rp-page--letter.rp-page--landscape {
  width: 279.4mm;
  height: 215.9mm;
}

.rp-page * {
  box-sizing: border-box;
}

/* Header: fixed 20mm so pagination math is exact. */
.rp-page__head {
  flex: 0 0 auto;
  height: 20mm;
  margin-bottom: 4mm;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 2.5mm;
  border-bottom: 0.6mm solid var(--rp-line-strong);
}

.rp-page__head-main {
  min-width: 0;
}

.rp-page__eyebrow {
  margin: 0 0 1mm;
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-accent);
  white-space: nowrap;
}

.rp-page__title {
  margin: 0;
  font-size: 17pt;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-page__subtitle {
  margin: 1mm 0 0;
  font-size: 9pt;
  color: var(--rp-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-page__head-side {
  flex: 0 0 auto;
  text-align: right;
  font-size: 8.5pt;
  color: var(--rp-ink-muted);
  line-height: 1.35;
}

.rp-page__head-side strong {
  display: block;
  font-size: 11pt;
  font-weight: 800;
  color: var(--rp-ink);
}

.rp-page__logo {
  max-height: 16mm;
  max-width: 40mm;
  object-fit: contain;
}

.rp-page__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Footer: fixed 6mm. */
.rp-page__foot {
  flex: 0 0 auto;
  height: 6mm;
  margin-top: 3mm;
  padding-top: 1.5mm;
  border-top: 0.25mm solid var(--rp-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6mm;
  font-size: 7.5pt;
  color: var(--rp-ink-subtle);
  white-space: nowrap;
}

.rp-page__foot span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-page__foot .rp-page__pageno {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--rp-ink-muted);
  font-weight: 600;
}

/* Generic table used by all list sheets. Rows are fixed-height in mm. */
.rp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9pt;
}

.rp-table th,
.rp-table td {
  padding: 0 1.8mm;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-table thead th {
  height: 6mm;
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-ink-muted);
  background: var(--rp-accent-soft);
  border-bottom: 0.35mm solid var(--rp-line-strong);
}

.rp-table tbody td {
  height: 5mm;
  border-bottom: 0.2mm solid var(--rp-line);
}

.rp-table tbody tr:nth-child(even) td {
  background: var(--rp-zebra);
}

.rp-table .rp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rp-table .rp-bib {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rp-table .rp-center {
  text-align: center;
}

.rp-table .rp-wrap {
  white-space: normal;
  line-height: 1.2;
}

.rp-table tr.rp-row--group td {
  height: 6mm;
  background: #fff;
  border-bottom: 0.35mm solid var(--rp-line-strong);
  font-weight: 800;
  font-size: 9pt;
  padding-top: 1mm;
}

.rp-table tr.rp-row--group + tr td {
  background: #fff;
}

.rp-mono {
  font-variant-numeric: tabular-nums;
}

.rp-muted {
  color: var(--rp-ink-muted);
}

.rp-subtle {
  color: var(--rp-ink-subtle);
}

.rp-empty {
  padding: 12mm 6mm;
  border: 0.3mm dashed var(--rp-line);
  border-radius: 2mm;
  text-align: center;
  color: var(--rp-ink-muted);
  font-size: 9.5pt;
}

/* Two side-by-side columns on one page (startlist by number). */
.rp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6mm;
  align-items: start;
}

/* ---- Cover / course overview ---- */

.rp-banner {
  display: block;
  width: 100%;
  height: 24mm;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 3mm;
}

.rp-banner--foot {
  margin: 3mm 0 0;
  height: 18mm;
}

.rp-facts {
  display: grid;
  grid-template-columns: repeat(var(--rp-facts-cols, 5), minmax(0, 1fr));
  gap: 3mm;
  margin: 0 0 5mm;
}

.rp-fact {
  padding: 2.5mm 3mm 2mm;
  border: 0.25mm solid var(--rp-line);
  border-left: 0.9mm solid var(--rp-accent);
  border-radius: 1.5mm;
  min-width: 0;
}

.rp-fact__label {
  display: block;
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rp-ink-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-fact__value {
  display: block;
  margin-top: 0.5mm;
  font-size: 13pt;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-fact__value small {
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--rp-ink-muted);
}

.rp-section-title {
  margin: 0 0 2mm;
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rp-ink-muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4mm;
}

.rp-section-title small {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rp-ink-subtle);
}

.rp-map {
  position: relative;
  width: 100%;
  border: 0.25mm solid var(--rp-line);
  border-radius: 2mm;
  overflow: hidden;
  background: #fbfcfd;
  margin-bottom: 4mm;
}

.rp-map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rp-map--streets {
  background: #f6f5f2;
}

.rp-map__base .cp-place circle {
  fill: #374151;
}

.rp-map__base .cp-place text {
  fill: #1f2937;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.rp-map__track-halo {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rp-map__track {
  fill: none;
  stroke: var(--rp-accent);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rp-map__neutral {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

.rp-map__km {
  fill: #fff;
  stroke: var(--rp-ink);
  stroke-width: 1;
}

.rp-map__km-label {
  font-size: 8px;
  font-weight: 700;
  fill: var(--rp-ink);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.rp-map__poi {
  fill: var(--rp-ink);
  stroke: #fff;
  stroke-width: 1.2;
}

.rp-map__poi-label {
  font-size: 7px;
  font-weight: 800;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}

.rp-map__end {
  stroke: #fff;
  stroke-width: 1.5;
}

.rp-map__end--start {
  fill: #15803d;
}

.rp-map__end--finish {
  fill: #0b2233;
}

.rp-map__end-label {
  font-size: 8px;
  font-weight: 800;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}

.rp-map__scale line {
  stroke: var(--rp-ink);
  stroke-width: 1.2;
}

.rp-map__scale text,
.rp-map__north text {
  font-size: 8px;
  font-weight: 700;
  fill: var(--rp-ink);
}

.rp-map__north path {
  fill: var(--rp-ink);
}

.rp-map__attrib {
  font-size: 6.5px;
  fill: var(--rp-ink-subtle);
}

.rp-profile {
  width: 100%;
  border: 0.25mm solid var(--rp-line);
  border-radius: 2mm;
  overflow: hidden;
  background: #fff;
  margin-bottom: 4mm;
}

.rp-profile svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rp-profile__area {
  fill: var(--rp-accent-soft);
}

.rp-profile__line {
  fill: none;
  stroke: var(--rp-accent);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.rp-profile__grid {
  stroke: var(--rp-line);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
}

.rp-profile__axis {
  font-size: 7px;
  fill: var(--rp-ink-muted);
}

.rp-cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4mm;
}

.rp-points .rp-table tbody td {
  height: 5.2mm;
}

.rp-point-idx {
  display: inline-block;
  min-width: 4.2mm;
  height: 4.2mm;
  line-height: 4.2mm;
  padding: 0 1mm;
  border-radius: 2.1mm;
  background: var(--rp-ink);
  color: #fff;
  font-size: 7pt;
  font-weight: 800;
  text-align: center;
}

.rp-hospitals {
  margin-top: 2mm;
}

.rp-hospitals__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 8.5pt;
}

.rp-hospitals__list li {
  height: 4.2mm;
  line-height: 4.2mm;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Startlist by team ---- */

.rp-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6mm;
  align-items: start;
}

.rp-team {
  break-inside: avoid;
  margin-bottom: 3mm;
}

.rp-team__head {
  display: flex;
  align-items: center;
  gap: 2mm;
  height: 7mm;
  padding: 0 1.5mm;
  border-bottom: 0.4mm solid var(--rp-line-strong);
  font-weight: 800;
  font-size: 9.5pt;
  white-space: nowrap;
  overflow: hidden;
}

.rp-team__head-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-team__count {
  flex: 0 0 auto;
  font-size: 7.5pt;
  font-weight: 700;
  color: var(--rp-ink-subtle);
}

.rp-team__jersey {
  flex: 0 0 auto;
  width: 6mm;
  height: 6mm;
  object-fit: contain;
}

.rp-team__riders {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-team__rider {
  display: grid;
  grid-template-columns: 9mm minmax(0, 1fr) 9mm;
  gap: 1.5mm;
  align-items: center;
  height: 5mm;
  padding: 0 1.5mm;
  border-bottom: 0.2mm solid var(--rp-line);
  font-size: 9pt;
  white-space: nowrap;
}

.rp-team__rider > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-team__rider .rp-bib {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rp-team__rider .rp-nat {
  font-size: 7.5pt;
  font-weight: 700;
  color: var(--rp-ink-muted);
  text-align: right;
}

.rp-name-last {
  font-weight: 700;
  text-transform: uppercase;
}

/* ---- Sign-on sheet ---- */

.rp-signon .rp-table tbody td {
  height: 9mm;
}

.rp-signon .rp-table tbody tr:nth-child(even) td {
  background: #fff;
}

.rp-signon .rp-table tbody tr.rp-row--group td {
  height: 6mm;
}

.rp-signon .rp-table td.rp-sign {
  border-left: 0.2mm solid var(--rp-line);
}

/* ---- Marshal sheet ---- */

.rp-marshals .rp-table {
  font-size: 8.5pt;
}

.rp-marshals .rp-table tbody td {
  height: 7mm;
}

.rp-marshals .rp-table td.rp-wrap {
  white-space: normal;
  line-height: 1.15;
  font-size: 8pt;
}

/* Empty cells meant to be filled in by hand get a faint write line. */
.rp-marshals .rp-table td.rp-fill:empty {
  background-image: linear-gradient(to top, var(--rp-line) 0.25mm, transparent 0.25mm);
  background-size: calc(100% - 3.6mm) 100%;
  background-repeat: no-repeat;
  background-position: 1.8mm 0;
}

/* Keep wrapped cells inside their fixed row height (2 lines max). */
.rp-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6.4mm;
}

.rp-tag {
  display: inline-block;
  padding: 0 1.4mm;
  border-radius: 1mm;
  border: 0.25mm solid var(--rp-line);
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rp-ink-muted);
  line-height: 3.8mm;
}

.rp-tag--police {
  color: #3730a3;
  border-color: #c7d2fe;
  background: #eef2ff;
}

.rp-tag--marshal {
  color: #1e40af;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.rp-tag--road_guard {
  color: #92400e;
  border-color: #fde68a;
  background: #fffbeb;
}

.rp-tag--volunteer {
  color: #065f46;
  border-color: #a7f3d0;
  background: #ecfdf5;
}

/* ------------------------------------------------------------------ */
/* Standalone print document (built by race-prints-app.js)             */
/* ------------------------------------------------------------------ */

.rp-print-doc {
  margin: 0;
  padding: 0;
  background: #fff;
}

.rp-print-doc .rp-page {
  break-after: page;
  page-break-after: always;
}

.rp-print-doc .rp-page:last-child {
  break-after: auto;
  page-break-after: auto;
}

.rp-print-doc .rp-page--landscape {
  page: rp-landscape;
}

.rp-print-doc .rp-page--portrait {
  page: rp-portrait;
}

@media screen {
  /* When the document is opened in a tab instead of printed, stack the pages nicely. */
  .rp-print-doc {
    background: #e5e9ef;
    padding: 12mm 0;
  }

  .rp-print-doc .rp-page {
    margin: 0 auto 10mm;
    box-shadow:
      0 1px 2px rgba(11, 34, 51, 0.18),
      0 10px 30px rgba(11, 34, 51, 0.16);
  }
}

@media print {
  .rp-print-doc {
    background: #fff;
    padding: 0;
  }

  .rp-print-doc .rp-page {
    margin: 0;
    box-shadow: none;
  }
}

/* ================================================================== */
/* Course plan (vector) — port of the CAC Sport "Print the course"      */
/* ================================================================== */

/* ---- the screen: settings either side, the sheet in the middle ---- */

.cp-root,
.rp-topbar__actions {
  --cp-bg2: #fff;
  --cp-bg3: var(--bg-subtle, #f0f5fb);
  --cp-border: var(--border-solid, #e2e8f0);
  --cp-text: var(--text, #0f1222);
  --cp-text2: var(--text-muted, #5c6178);
  --cp-text3: var(--text-subtle, #85899e);
  --cp-accent: var(--accent, #1c6c9e);
  --cp-accent2: var(--noribel-blue, #42abe0);
  position: relative;
}

.cp-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 560px;
  margin-top: 2px;
}

.cp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cp-hd-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.cp-hd-text h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.cp-hd-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cp-text3);
}

.cp-hd-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--cp-border);
  border-radius: 9px;
  background: var(--cp-bg2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cp-text);
  cursor: pointer;
}

.cp-btn:hover {
  background: var(--cp-bg3);
}

.cp-btn.primary {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: #fff;
}

.cp-btn.sm {
  min-height: 30px;
  padding: 0 9px;
  font-size: 0.76rem;
}

.cp-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Step back / step forward — see cpHistStep(). */
.cp-btn.icon-only {
  padding: 0 7px;
}

.cp-btn:disabled {
  opacity: 0.4;
  cursor: default;
  background: var(--cp-bg2);
}

.cp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cp-border);
  border-radius: 7px;
  background: var(--cp-bg2);
  color: var(--cp-text2);
  cursor: pointer;
  padding: 0;
}

.cp-icon-btn.sm {
  width: 24px;
  height: 24px;
}

.cp-icon-btn svg {
  width: 13px;
  height: 13px;
}

.cp-input {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--cp-border);
  border-radius: 7px;
  background: var(--cp-bg2);
  font: inherit;
  font-size: 12px;
  color: var(--cp-text);
}

.cp-in {
  width: 100%;
  box-sizing: border-box;
}

.cp-fl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text3);
}

/* ---- the bar across the top, the sheet, one panel on the right ----
   As CAC Sport's "Print the course" (25 Sep 2026): the left column of
   settings became a bar of small icons over the sheet, so the sheet gets
   the width and the height. What is typed or picked from a list stays in
   the one panel on the right. */
.cp-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  grid-template-rows: auto 1fr;
  gap: 8px 12px;
  align-items: start;
}

.cp-top {
  grid-column: 1 / -1;
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 4px 8px;
  min-height: 40px;
  background: var(--cp-bg2);
  border: 1px solid var(--cp-border);
  border-radius: 10px;
}

.cp-view {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-side-r {
  grid-column: 2;
  grid-row: 2;
}

.cp-top-g {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.cp-top-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--cp-border);
}

.cp-top-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  min-width: 30px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  font: inherit;
  color: var(--cp-text2);
  cursor: pointer;
}

.cp-top-btn svg {
  width: 17px;
  height: 17px;
}

.cp-top-btn span {
  font-size: 11.5px;
  font-weight: 700;
}

.cp-top-btn:hover {
  background: var(--cp-bg3);
  color: var(--cp-text);
}

.cp-top-btn.open {
  border-color: var(--cp-accent2);
  color: var(--cp-text);
}

/* A switch that is on wears the accent, like a lit tool. */
.cp-top-sw {
  color: var(--cp-text3);
}

.cp-top-sw:has(input:checked) {
  background: rgba(66, 171, 224, 0.14);
  border-color: rgba(66, 171, 224, 0.5);
  color: var(--cp-accent);
}

.cp-top-zoom {
  margin-left: auto;
}

.cp-top-zoom .cp-vb-pct {
  margin-left: 4px;
}

.cp-pop {
  position: absolute;
  z-index: 40;
  width: 300px;
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding: 10px 12px;
  background: var(--cp-bg2);
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(11, 34, 51, 0.22);
}

.cp-pop[hidden] {
  display: none;
}

.cp-pop-h {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text3);
}

/* The balloon over a bar button — fixed to the window, outside the tool. */
.cp-tip {
  position: fixed;
  z-index: 1200;
  max-width: 260px;
  padding: 5px 9px;
  border-radius: 7px;
  pointer-events: none;
  background: #0f172a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s;
}

.cp-tip.show {
  opacity: 1;
  transform: none;
}

@media (max-width: 1180px) {
  .cp-wrap {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}

@media (max-width: 880px) {
  .cp-wrap {
    grid-template-columns: 1fr;
  }
  .cp-view,
  .cp-side-r {
    grid-column: 1;
    grid-row: auto;
  }
  .cp-side {
    position: static;
    height: auto;
    max-height: none;
  }
  .cp-preview {
    height: auto;
    min-height: 360px;
  }
  .cp-pop {
    width: min(300px, calc(100vw - 40px));
  }
}

.cp-side {
  padding: 12px;
  background: var(--cp-bg2);
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  height: calc(100vh - 230px);
  min-height: 420px;
  position: sticky;
  top: 8px;
}

.cp-vb-pct {
  font-size: 11px;
  font-weight: 800;
  color: var(--cp-text2);
  font-variant-numeric: tabular-nums;
  background: var(--cp-bg2);
  border: 1px solid var(--cp-border);
  border-radius: 7px;
  padding: 4px 8px;
}

.cp-preview {
  position: relative;
  padding: 13px;
  overflow: auto;
  background: #e5e9ef;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  display: flex;
  height: calc(100vh - 230px);
  min-height: 420px;
}

.cp-pages {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cp-stage {
  position: relative;
  flex: 0 0 auto;
  margin: auto;
}

.cp-stage > .cp-sheet {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.cp-busy {
  margin: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-text3);
  padding: 40px 0;
}

.cp-busy-over {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(229, 233, 239, 0.75);
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-text2);
}

/* A redraw that takes a moment: the old sheet stays, this says it is coming. */
.cp-busy-chip {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 7;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.cp-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--cp-text2);
}

/* margin guides */
.cp-guides {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

.cp-guide {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}

.cp-guide::before {
  content: '';
  position: absolute;
  background: #e11dbb;
  opacity: 0.55;
}

.cp-guide:hover::before,
.cp-guide.set::before {
  opacity: 0.95;
}

.cp-guide-t,
.cp-guide-b {
  left: 0;
  right: 0;
  height: 9px;
  margin-top: -4px;
  cursor: row-resize;
}

.cp-guide-l,
.cp-guide-r {
  top: 0;
  bottom: 0;
  width: 9px;
  margin-left: -4px;
  cursor: col-resize;
}

.cp-guide-t::before,
.cp-guide-b::before {
  left: 0;
  right: 0;
  top: 4px;
  height: 1px;
}

.cp-guide-l::before,
.cp-guide-r::before {
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
}

.cp-guide i {
  position: absolute;
  font: 700 9.5px/1 system-ui, sans-serif;
  font-style: normal;
  color: #fff;
  background: #e11dbb;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}

.cp-guide i:empty {
  display: none;
}

.cp-guide-t i {
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
}

.cp-guide-b i {
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
}

.cp-guide-l i {
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}

.cp-guide-r i {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

/* panel controls */
.cp-lbl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text3);
  margin-top: 4px;
}

.cp-lbl b {
  font-size: 11px;
  color: var(--cp-text2);
  letter-spacing: 0;
}

.cp-range {
  width: 100%;
  accent-color: var(--cp-accent);
  margin: -2px 0 2px;
}

.cp-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Never narrower than its longest word (Golazo 469075c). */
.cp-seg-b {
  flex: 1 1 56px;
  min-width: min-content;
  min-height: 38px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-bg3);
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  padding: 6px 7px;
  color: var(--cp-text2);
  cursor: pointer;
  line-height: 1.2;
}

.cp-seg-b:hover {
  color: var(--cp-text);
}

.cp-seg-b.on {
  background: var(--cp-accent);
  border-color: transparent;
  color: #fff;
}

.cp-switches {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cp-sw {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cp-text2);
  padding: 5px 4px;
  border-radius: 6px;
  cursor: pointer;
}

.cp-sw:hover {
  background: var(--cp-bg3);
  color: var(--cp-text);
}

.cp-sw input {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--cp-accent);
}

.cp-kind-ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: -2px;
}

.cp-kind-n {
  font-style: normal;
  font-size: 10px;
  color: var(--cp-text3);
}

.cp-sec {
  border-top: 1px solid var(--cp-border);
  padding-top: 7px;
  margin-top: 1px;
}

.cp-sec:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.cp-sec > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text2);
  padding: 3px 0;
  user-select: none;
}

.cp-sec > summary::-webkit-details-marker {
  display: none;
}

.cp-sec > summary::marker {
  content: '';
}

.cp-sec > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.12s ease;
}

.cp-sec[open] > summary::before {
  transform: rotate(90deg);
}

.cp-sec-b {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 0 6px;
}

.cp-sec-b > .cp-lbl:first-child {
  margin-top: 0;
}

.cp-tpl-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 8px;
}

.cp-tpl {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-tpl select {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-sub {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cp-text3);
  line-height: 1.4;
}

.cp-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cp-accent);
  cursor: pointer;
  text-decoration: underline;
}

.cp-margins {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cp-margins label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cp-margins span {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text2);
}

.cp-margins .cp-input {
  min-width: 0;
  padding: 5px 6px;
  font-size: 12px;
  text-align: center;
}

.cp-inks {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}

.cp-ink {
  aspect-ratio: 1;
  border-radius: 5px;
  border: 2px solid transparent;
  background: var(--i);
  cursor: pointer;
  padding: 0;
}

.cp-ink.on {
  border-color: var(--cp-text);
  box-shadow: 0 0 0 2px var(--cp-bg2);
}

/* The gravel sectors' line: each button draws its own line above its name,
   three to a row. */
.cp-gravel-styles .cp-seg-b {
  flex: 1 1 30%;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
}

.cp-gravel-styles svg {
  width: 48px;
  height: 13px;
  flex-shrink: 0;
  overflow: visible;
}

/* The gravel sectors' free colour, beside their swatches. */
.cp-gravel-own {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cp-text2);
}

.cp-gravel-own input {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--cp-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.cp-logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-logo-chip {
  position: relative;
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 7px;
  padding: 4px 6px;
}

.cp-logo-chip img {
  height: 22px;
  max-width: 64px;
  object-fit: contain;
  display: block;
}

.cp-logo-chip button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.cp-logo-add {
  justify-content: flex-start;
  cursor: pointer;
}

.cp-boards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.cp-board {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  background: var(--cp-bg3);
  cursor: pointer;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--cp-text3);
}

.cp-board input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cp-board img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.45;
}

.cp-board.on {
  border-color: var(--cp-accent);
  background: #eaf4fb;
  color: var(--cp-text);
}

.cp-board.on img {
  opacity: 1;
}

.cp-board-sw {
  display: block;
}

.cp-laps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cp-lap {
  min-width: 34px;
  min-height: 34px;
  padding: 0 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  background: var(--cp-bg3);
  color: var(--cp-text3);
}

.cp-lap.on {
  border-color: transparent;
  color: #fff;
  background: var(--cp-accent);
}

.cp-lap-km {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  gap: 1px;
  padding: 3px 6px;
  line-height: 1;
}

.cp-lap-km i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  opacity: 0.62;
}

.cp-lap-km b {
  font-size: 11px;
  font-weight: 800;
}

.cp-pass-hd {
  margin-top: 9px;
  color: var(--cp-text2);
}

.cp-pass-n {
  font-weight: 800;
  color: var(--cp-text3);
  font-variant-numeric: tabular-nums;
}

.cp-dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-pal-open {
  width: 100%;
  justify-content: center;
}

/* floating palette */
.cp-pal {
  position: fixed;
  z-index: 60;
  width: 330px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--cp-bg2);
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(11, 34, 51, 0.25);
}

.cp-pal[hidden] {
  display: none;
}

.cp-pal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cp-border);
  cursor: move;
  font-size: 12px;
  user-select: none;
}

.cp-pal-bd {
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-note-add {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-note-add .cp-btn {
  flex: 1 1 0;
  min-width: 0;
}

.cp-note-img {
  justify-content: center;
  cursor: pointer;
}

.cp-note-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-note-list:empty {
  display: none;
}

.cp-note-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-note-row .cp-input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 5px 7px;
  font-size: 12px;
}

.cp-note-k {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text2);
  width: 46px;
}

.cp-note-sp {
  flex: 1 1 auto;
}

.cp-note-col {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--cp-border);
  border-radius: 5px;
  background: none;
  cursor: pointer;
}

.cp-note-col.off {
  position: relative;
  opacity: 0.5;
}

.cp-note-col.off::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 5px;
  background: linear-gradient(to top right, transparent 44%, var(--cp-text3) 44%, var(--cp-text3) 56%, transparent 56%);
  pointer-events: none;
}

.cp-note-sz {
  flex: 0 0 52px !important;
  text-align: center;
}

.cp-note-sub {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-left: 46px;
  font-size: 10px;
  font-weight: 700;
  color: var(--cp-text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cp-note-sub select {
  flex: 1 1 60px;
  min-width: 0;
  padding: 4px 5px;
  font-size: 11px;
}

.cp-note-none {
  font-size: 10px;
  font-weight: 700;
  color: var(--cp-text3);
}

.cp-note-b {
  flex: 0 0 auto;
  width: 24px;
  height: 26px;
  font-size: 12px;
  background: var(--cp-bg3);
  border: 1px solid var(--cp-border);
  border-radius: 5px;
  color: var(--cp-text2);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}

.cp-note-b.f-bold {
  font-weight: 800;
}

.cp-note-b.f-italic {
  font-style: italic;
  font-family: Georgia, serif;
}

.cp-note-b.f-underline {
  text-decoration: underline;
}

.cp-note-b.on {
  background: var(--cp-accent);
  border-color: transparent;
  color: #fff;
}

.cp-note-key {
  text-transform: none;
  letter-spacing: 0;
}

.cp-note-key .cp-input[type='text'] {
  flex: 1 1 80px;
  min-width: 0;
  padding: 4px 6px;
  font-size: 11px;
}

.cp-note-tick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  color: var(--cp-text2);
}

.cp-note-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 5px;
  padding: 2px;
}

.cp-note-ico.empty {
  display: block;
}

/* sign picker */
.cp-sign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 8px;
}

.cp-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  background: var(--cp-bg2);
  font: inherit;
  font-size: 9.5px;
  color: var(--cp-text2);
  cursor: pointer;
}

.cp-sign img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.cp-sign span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-sign.on {
  border-color: var(--cp-accent);
  background: #eaf4fb;
}

/* modal + toast */
.cp-modal-back {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(11, 34, 51, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cp-modal {
  width: min(520px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(11, 34, 51, 0.35);
  color: var(--cp-text);
}

.cp-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cp-border);
  font-size: 15px;
}

.cp-modal-bd {
  padding: 14px 16px;
  overflow-y: auto;
}

.cp-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--cp-border);
}

.cp-dlsws {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border-top: 1px solid var(--cp-border);
  padding-top: 6px;
}

.cp-dlsw {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 2px;
  cursor: pointer;
}

.cp-dlsw + .cp-dlsw {
  border-top: 1px solid var(--cp-border);
}

.cp-dlsw input {
  margin-top: 3px;
  flex: none;
}

.cp-dlsw strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}

.cp-dlsw small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--cp-text3);
}

.cp-dl-paper {
  margin-top: 4px;
  padding: 10px 12px 11px;
  border-radius: 9px;
  background: var(--cp-bg3);
  border: 1px solid var(--cp-border);
}

.cp-dl-paper[hidden] {
  display: none;
}

.cp-dl-lbl {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text3);
  margin: 0 0 6px;
}

.cp-dl-note {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--cp-text3);
}

.cp-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.cp-toast {
  padding: 9px 14px;
  border-radius: 9px;
  background: #0b2233;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}

.cp-toast.on {
  opacity: 1;
  transform: none;
}

.cp-toast.err {
  background: #b91c1c;
}

.cp-toast.ok {
  background: #15803d;
}

/* ---- the sheet (fixed inks: paper, not screen) ---- */

.cprint-hidden {
  position: fixed;
  left: -20000px;
  top: 0;
  pointer-events: none;
  opacity: 0;
}

.cp-sheet {
  --cp-off: calc(var(--cp-edge, 0px) + var(--cp-safe, 14px));
  --cp-off-t: var(--cp-off);
  --cp-off-r: var(--cp-off);
  --cp-off-b: var(--cp-off);
  --cp-off-l: var(--cp-off);
  position: relative;
  background: #fff;
  color: #1f2937;
  overflow: hidden;
  /* The brand kit sets --cp-font-body / --cp-font-head on the sheet
     (cpBrandVars()); without one the sheet is in the system face. */
  font-family: var(--cp-font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
  box-shadow: 0 6px 24px rgba(11, 34, 51, 0.28);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.cp-sheet * {
  box-sizing: border-box;
}

.cp-sheet .cp-map {
  position: absolute;
  inset: 0;
  display: block;
}

.cp-sheet .cp-head {
  position: absolute;
  left: var(--cp-off-l);
  top: var(--cp-off-t);
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: calc(8px * var(--cp-head, 1));
  max-width: 62%;
}

.cp-sheet .cp-head.right {
  left: auto;
  right: var(--cp-off-r);
  flex-direction: row;
  text-align: right;
}

.cp-sheet .cp-head-logos,
.cp-sheet .cp-head-txt {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
}

.cp-sheet .cp-head-logos {
  padding: calc(9px * var(--cp-head, 1)) calc(12px * var(--cp-head, 1));
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-sheet .cp-head-txt {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.cp-sheet .cp-head-bar {
  padding: calc(8px * var(--cp-head, 1)) calc(14px * var(--cp-head, 1)) calc(9px * var(--cp-head, 1));
}

.cp-sheet .cp-head-body {
  padding: calc(9px * var(--cp-head, 1)) calc(14px * var(--cp-head, 1)) calc(11px * var(--cp-head, 1));
  min-width: calc(250px * var(--cp-head, 1));
}

.cp-sheet .cp-head h1 {
  margin: 0;
  font-size: calc(18px * var(--cp-head, 1) * var(--cp-head-ts, 1));
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  line-height: 1.15;
  font-family: var(--cp-font-head, inherit);
  /* A long name wraps inside its plate; the plate follows the name. */
  overflow-wrap: anywhere;
  white-space: normal;
}

.cp-sheet .cp-head-bar h1 {
  color: inherit;
}

.cp-sheet .cp-head p {
  margin: calc(3px * var(--cp-head, 1)) 0 0;
  font-size: calc(11px * var(--cp-head, 1) * var(--cp-head-ts, 1));
  font-weight: 600;
  color: #6b7280;
}

.cp-sheet .cp-head-sub {
  margin-top: 0 !important;
}

.cp-sheet .cp-head-note {
  margin: calc(6px * var(--cp-head, 1)) 0 0 !important;
  font-size: calc(9.5px * var(--cp-head, 1) * var(--cp-head-ts, 1)) !important;
  font-weight: 600;
  font-style: italic;
  color: #94a3b8;
  line-height: 1.3;
}

.cp-sheet .cp-head-stats {
  display: grid;
  gap: calc(6px * var(--cp-head, 1));
  margin-top: calc(8px * var(--cp-head, 1));
}

.cp-sheet .cp-head-stats.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.cp-sheet .cp-head-stats.two {
  grid-template-columns: 1fr 1fr;
}

.cp-sheet .cp-head-stats.one {
  grid-template-columns: 1fr;
  max-width: 50%;
}

.cp-sheet .cp-head-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3px * var(--cp-head, 1));
  padding: calc(7px * var(--cp-head, 1)) calc(6px * var(--cp-head, 1)) calc(8px * var(--cp-head, 1));
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #f8fafc;
}

.cp-sheet .cp-head-stat b {
  font-size: calc(13.5px * var(--cp-head, 1) * var(--cp-head-ts, 1));
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  white-space: nowrap;
}

.cp-sheet .cp-elev-line {
  display: block;
  flex: 0 0 auto;
}

.cp-sheet .cp-head .cp-elev-line {
  width: calc(20px * var(--cp-head, 1) * var(--cp-head-ts, 1));
  height: calc(20px * var(--cp-head, 1) * var(--cp-head-ts, 1));
}

.cp-sheet .cp-head-qr {
  background: #fff;
  border-radius: 3px;
  padding: 6px;
  flex: 0 0 auto;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
  line-height: 0;
}

.cp-sheet .cp-head-qr-txt {
  display: block;
  max-width: 110px;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.3;
  color: #6b7280;
  word-break: break-all;
}

.cp-sheet .cp-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  height: 100%;
  min-height: 0;
}

.cp-sheet .cp-logos img {
  height: calc(100% * var(--cp-logo, 1));
  max-height: calc(100% * var(--cp-logo, 1));
  width: auto;
  max-width: calc(130px * var(--cp-logo, 1));
  object-fit: contain;
  display: block;
}

.cp-sheet .cp-head-logos:only-child .cp-logos img {
  height: calc(34px * var(--cp-logo, 1) * var(--cp-head, 1));
}

/* the key */
.cp-sheet .cp-key {
  position: absolute;
  left: var(--cp-off-l);
  bottom: calc(var(--cp-foot-h, 0px) + var(--cp-edge, 0px) + 12px);
  z-index: 3;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  min-width: calc(150px * var(--cp-key, 1));
  max-width: 34%;
}

.cp-sheet .cp-key-hd {
  background: var(--cp-brand, #0f172a);
  color: var(--cp-brand-on, #fff);
  font-family: var(--cp-font-head, inherit);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 4px 10px;
}

.cp-sheet .cp-key-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 11px 9px;
  font-size: 8.5px;
  font-weight: 700;
  color: #374151;
}

.cp-sheet .cp-key-rows span {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* The words of a row: a bilingual label breaks onto a second line rather
   than running out of the box. */
.cp-sheet .cp-key-t {
  font-style: normal;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.cp-sheet .cp-key-sw {
  width: 22px;
  height: 12px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.cp-sheet img.cp-key-sw {
  height: 14px;
}

.cp-sheet .cp-key .cp-key-hd {
  font-size: calc(8.5px * var(--cp-key, 1));
  padding: calc(4px * var(--cp-key, 1)) calc(10px * var(--cp-key, 1));
}

.cp-sheet .cp-key .cp-key-rows {
  gap: calc(5px * var(--cp-key, 1));
  padding: calc(8px * var(--cp-key, 1)) calc(11px * var(--cp-key, 1)) calc(9px * var(--cp-key, 1));
  font-size: calc(8.5px * var(--cp-key, 1));
}

.cp-sheet .cp-key .cp-key-rows span {
  gap: calc(7px * var(--cp-key, 1));
}

.cp-sheet .cp-key .cp-key-sw {
  width: calc(22px * var(--cp-key, 1));
  height: calc(12px * var(--cp-key, 1));
}

.cp-sheet .cp-key img.cp-key-sw {
  height: calc(14px * var(--cp-key, 1));
}

.cp-sheet .cp-key-rows .cp-key-grp {
  font-weight: 800;
  color: #0f172a;
  margin-top: calc(2px * var(--cp-key, 1));
}

/* The gradient bands of a profile painted by gradient: small chips, two by row. */
.cp-sheet .cp-key-rows .cp-key-grades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(3px * var(--cp-key, 1)) calc(8px * var(--cp-key, 1));
  padding-left: calc(9px * var(--cp-key, 1));
}

.cp-sheet .cp-key-grades i {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--cp-key, 1));
  font-style: normal;
  white-space: nowrap;
}

.cp-sheet .cp-key-grades svg {
  width: calc(9px * var(--cp-key, 1));
  height: calc(9px * var(--cp-key, 1));
  flex-shrink: 0;
}

.cp-sheet .cp-key-rows .cp-key-in {
  padding-left: calc(9px * var(--cp-key, 1));
}

.cp-sheet .cp-key-rows .cp-key-plate {
  width: calc(18px * var(--cp-key, 1));
  height: calc(18px * var(--cp-key, 1));
  border-radius: 50%;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #fff;
  gap: 0;
}

.cp-sheet .cp-key-rows .cp-key-plate img.cp-key-sw {
  width: calc(13px * var(--cp-key, 1));
  height: calc(13px * var(--cp-key, 1));
}

/* passage times */
.cp-sheet .cp-times {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  min-width: 190px;
  max-width: 38%;
}

.cp-sheet .cp-times-tbl {
  border-collapse: collapse;
  width: 100%;
  font-size: 7.6px;
  line-height: 1.25;
}

.cp-sheet .cp-times-tbl th {
  font-size: 6.6px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  text-align: left;
  padding: 5px 6px 3px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.cp-sheet .cp-times-tbl td {
  padding: 2px 6px;
  border-bottom: 1px solid #f1f5f9;
  color: #1f2937;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-sheet .cp-times-tbl .n,
.cp-sheet .cp-times-tbl th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cp-sheet .cp-times-tbl tbody tr:first-child td,
.cp-sheet .cp-times-tbl tbody tr:last-child td {
  font-weight: 800;
}

.cp-sheet .cp-times-more {
  margin: 2px 6px 4px;
  font-size: 7px;
  color: #64748b;
}

/* insets in the corner opposite the heading */
.cp-sheet .cp-insets {
  position: absolute;
  top: var(--cp-off-t);
  right: var(--cp-off-r);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  max-width: 40%;
}

.cp-sheet .cp-insets.left {
  right: auto;
  left: var(--cp-off-l);
  align-items: flex-start;
}

.cp-sheet .cp-inset {
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
}

.cp-sheet .cp-inset-t {
  background: var(--cp-brand, #0f172a);
  color: var(--cp-brand-on, #fff);
  font-family: var(--cp-font-head, inherit);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cp-sheet .cp-inset-t b {
  background: #fff;
  color: #0f172a;
  border-radius: 2px;
  padding: 0 4px;
  font-size: 8.5px;
  letter-spacing: 0;
}

.cp-sheet .cp-inset-map {
  display: block;
}

.cp-sheet .cp-inset-prof {
  padding: 3px 6px 5px;
}

/* the profile band and the partners' strip */
.cp-sheet .cp-partners {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--cp-band-b, 18px) + var(--cp-edge, 0px));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(22px * var(--cp-partner, 1));
  flex-wrap: wrap;
  padding: 6px var(--cp-off-r) 6px var(--cp-off-l);
  background: #fff;
}

.cp-sheet .cp-partners img {
  height: calc(26px * var(--cp-partner, 1));
  width: auto;
  max-width: calc(120px * var(--cp-partner, 1));
  object-fit: contain;
}

/* The band's white and its fade are painted in the map SVG (cpBandSvg), so
   they survive the printer and the SVG export; this box only lays out. */
.cp-sheet .cp-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--cp-band-b, 18px) + var(--cp-partners-h, 0px) + var(--cp-edge, 0px));
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 6px var(--cp-off-r) 22px var(--cp-off-l);
  background: transparent;
}

/* The maker's mark: a dark plate in the safe corner, on the band's bottom row. */
.cp-sheet .cp-credit {
  position: absolute;
  right: var(--cp-off-r);
  bottom: var(--cp-off-b);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  border-radius: 3.5px;
  background: #0b2233;
}

.cp-sheet .cp-credit-l {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 5.2px;
  font-weight: 700;
  letter-spacing: 0.85px;
  color: #ffffff;
  opacity: 0.62;
  white-space: nowrap;
  line-height: 1;
}

.cp-sheet .cp-credit img {
  display: block;
  object-fit: contain;
}

.cp-sheet .cp-profile {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.cp-sheet .cp-zooms {
  flex: 0 0 auto;
  width: 31%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.cp-sheet .cp-zoom {
  position: relative;
  padding-top: 9px;
}

.cp-sheet .cp-zoom-t {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.cp-sheet .cp-place circle {
  fill: #374151;
}

.cp-sheet .cp-place text {
  fill: #1f2937;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.cp-sheet .cp-km text,
.cp-sheet .cp-chip text {
  paint-order: normal;
}

.cp-sheet .cp-fail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  z-index: 1;
}

.cp-sheet .cp-road-name {
  pointer-events: none;
}

.cp-sheet .cp-notes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.cp-sheet .cp-notes .cp-note {
  pointer-events: auto;
  cursor: move;
}

.cp-sheet .cp-notes .cp-note-h {
  cursor: nwse-resize;
}

.cp-preview .cp-sheet .cp-key,
.cp-preview .cp-sheet [data-cp-mark] {
  cursor: move;
}

/* paper wrapper for downloads with margins */
.cp-paper {
  background: #fff;
  overflow: hidden;
}

.cp-paper > .cp-fit {
  position: absolute;
  transform-origin: top left;
}

.cp-paper > .cp-fit > .cp-sheet {
  box-shadow: none;
}

.cp-paper > .cp-fit > svg {
  display: block;
}

/* ---- the profile figure (cpp-) ---- */

.cpp-plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: stretch;
}

.cpp-svg {
  width: 100%;
  height: 84px;
  display: block;
  overflow: visible;
}

.cp-inset-prof .cpp-svg,
.cp-zoom .cpp-svg {
  height: 46px;
}

.cpp-yax {
  position: relative;
  min-width: 34px;
  margin-top: var(--cpp-sky, 0px);
  font-size: 9.5px;
  font-weight: 700;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.cpp-ytick {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.cpp-canvas {
  min-width: 0;
  position: relative;
  padding-top: var(--cpp-sky, 0px);
}

.cpp-grid {
  stroke: #e2e8f0;
  stroke-width: 1;
}

.cpp-grid.vg {
  opacity: 0.5;
}

.cpp-grid.hg {
  opacity: 0.75;
}

.cpp-area {
  stroke: none;
}

.cpp-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

.cpp-neutral {
  fill: currentColor;
  opacity: 0.12;
}

.cpp-zero {
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-dasharray: 4 3;
  fill: none;
}

.cpp-xax {
  grid-column: 2;
  position: relative;
  height: 14px;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.cpp-tick {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.cpp-tick-end {
  font-weight: 800;
  color: #374151;
}

.cpp-tick-zero {
  color: #f59e0b;
}

.cpp-wpax {
  grid-column: 2;
  position: relative;
  height: 12px;
  margin-top: 1px;
}

.cpp-wpkm {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 8.5px;
  font-weight: 800;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cpp-mark {
  position: absolute;
  top: 1px;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
  line-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cpp-mark img {
  display: block;
  width: 16px;
  height: 16px;
  order: 1;
}

.cpp-mark b {
  display: block;
  font-size: 11px;
  line-height: 1;
  order: 1;
}

.cpp-end {
  position: absolute;
  top: 1px;
  bottom: 0;
  pointer-events: none;
  line-height: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cpp-end.start {
  left: 0;
  transform: translateX(-50%);
}

.cpp-end.finish {
  right: 0;
  transform: translateX(50%);
}

.cpp-end.top {
  bottom: auto;
  top: 0;
  display: block;
}

.cpp-end.top.start,
.cpp-end.top.finish {
  transform: none;
}

.cpp-end img {
  display: block;
  width: 19px;
  height: 19px;
  order: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.cp-zoom .cpp-end img {
  width: 15px;
  height: 15px;
}

.cpp-km0 {
  position: absolute;
  top: 1px;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
  line-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cpp-km0 img {
  display: block;
  width: 19px;
  height: 19px;
  order: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.cpp-mark > i,
.cpp-end > i,
.cpp-km0 > i {
  display: block;
  width: 1px;
  flex: 1 1 auto;
  min-height: 14px;
  order: 2;
  /* a fine, quiet dotted stem — the sign should read, the line should not */
  color: #94a3b8;
  opacity: 0.55;
  background-image: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 4px);
  background-repeat: repeat-y;
  background-size: 1px 4px;
}

/* the print document built by cpPrint() */
.cp-print-doc {
  margin: 0;
  padding: 0;
  background: #fff;
}

/* ================================================================== */
/* 27 Sep 2026 — a pre-press check, a locator map, a brand kit, a       */
/* poster style, screen and own sizes, a version stamp, sector numbers  */
/* ================================================================== */

/* THE BRAND KIT. The accent is a rule, not a colour for words: a yellow
   accent is unreadable as type on white, and as a 2 px line over each
   figure it is the brand without the risk. */
.cp-sheet.cp-branded .cp-head-stat {
  border-top: 2px solid var(--cp-brand-accent, #e2e8f0);
}

.cp-sheet.cp-branded .cp-key-hd {
  border-bottom: 2px solid var(--cp-brand-accent, transparent);
}

/* A WORD ACROSS THE SHEET, over everything and in the way of nothing. */
.cp-sheet .cp-wm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* THE VERSION STAMP: the credit's row, bottom left. The plate, frame and
   ink come from the palette, written on the element. */
.cp-sheet .cp-stamp {
  position: absolute;
  left: var(--cp-off-l);
  bottom: var(--cp-off-b);
  z-index: 3;
  display: flex;
  align-items: center;
  max-width: 55%;
  padding: 0 6px;
  border: 0.6px solid #cbd5e1;
  border-radius: 3.5px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 6.4px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

/* THE SECTORS: the number plate in a table. The table is as wide as its
   rows — the column's 38 % would clip it. */
.cp-sheet .cp-sec-no {
  display: inline-block;
  min-width: 13px;
  padding: 0 3px;
  border-radius: 3px;
  text-align: center;
  font-weight: 800;
  font-size: 7px;
  line-height: 11px;
  font-variant-numeric: tabular-nums;
}

.cp-sheet .cp-sec-stars svg {
  display: inline-block;
  vertical-align: middle;
}

.cp-sheet .cp-gtable {
  max-width: none;
  width: max-content;
}

.cp-sheet .cp-gtable .cp-times-tbl td {
  max-width: 160px;
}

.cp-sheet .cp-locator {
  line-height: 0;
}

/* A heading or corner card somebody dragged: on its own, where it was put
   (cpCardPos()); the grab shows it can be. */
.cp-sheet .cp-card-free {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

.cp-sheet .cp-card-free > * {
  max-width: none;
}

.cp-preview .cp-sheet [data-cp-card] {
  cursor: move;
}

/* ---- THE POSTER ----
   Every card goes dark with the ground, the lettering light, the thin
   frames a shade above the card. The course glows in the map itself
   (CP_PALETTES.poster) and the band under the profile is painted in the
   paper's colour (cpBandSvg); this is only the furniture. */
.cp-sheet.cp-poster {
  background: #0b1220;
  color: #e5edf7;
}

.cp-sheet.cp-poster .cp-head-logos,
.cp-sheet.cp-poster .cp-head-txt,
.cp-sheet.cp-poster .cp-key,
.cp-sheet.cp-poster .cp-times,
.cp-sheet.cp-poster .cp-inset,
.cp-sheet.cp-poster .cp-head-qr {
  background: #111c2e;
  box-shadow: 0 0 0 1px #26354b, 0 6px 20px rgba(0, 0, 0, 0.45);
}

.cp-sheet.cp-poster .cp-head h1 {
  color: #f8fafc;
  letter-spacing: -0.02em;
  font-size: calc(24px * var(--cp-head, 1) * var(--cp-head-ts, 1));
  font-weight: 900;
}

.cp-sheet.cp-poster .cp-head-bar h1 {
  color: inherit;
}

.cp-sheet.cp-poster .cp-head p {
  color: #9fb0c6;
}

.cp-sheet.cp-poster .cp-head-note {
  color: #7c8ba1 !important;
}

.cp-sheet.cp-poster .cp-head-stat {
  background: #0d1726;
  border-color: #26354b;
}

.cp-sheet.cp-poster .cp-head-stat b {
  color: #f8fafc;
}

.cp-sheet.cp-poster .cp-head .cp-elev-line {
  stroke: #9fb0c6;
}

.cp-sheet.cp-poster .cp-key-hd,
.cp-sheet.cp-poster .cp-inset-t {
  background: var(--cp-brand, #1e2b40);
}

.cp-sheet.cp-poster .cp-key-rows {
  color: #cbd5e1;
}

.cp-sheet.cp-poster .cp-key-rows .cp-key-grp {
  color: #f1f5f9;
}

.cp-sheet.cp-poster .cp-times-tbl th {
  color: #8fa0b7;
  border-bottom-color: #26354b;
}

.cp-sheet.cp-poster .cp-times-tbl td {
  color: #dbe4ef;
  border-bottom-color: #18253a;
}

.cp-sheet.cp-poster .cp-head-qr-txt,
.cp-sheet.cp-poster .cp-times-more,
.cp-sheet.cp-poster .cp-zoom-t {
  color: #8fa0b7;
}

.cp-sheet.cp-poster .cp-place circle {
  fill: #9fb0c6;
}

.cp-sheet.cp-poster .cp-place text {
  fill: #dbe4ef;
  stroke: #0b1220;
}

.cp-sheet.cp-poster .cp-partners {
  background: #0b1220;
}

.cp-sheet.cp-poster .cpp-yax,
.cp-sheet.cp-poster .cpp-xax,
.cp-sheet.cp-poster .cpp-wpkm,
.cp-sheet.cp-poster .cpp-tick-end {
  color: #8fa0b7;
}

.cp-sheet.cp-poster .cpp-grid {
  stroke: #1f2d44;
}

.cp-sheet.cp-poster .cp-fail {
  color: #64748b;
}

/* ---- the panel's new controls ---- */
.cp-btn[hidden] {
  display: none;
}

.cp-dl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.cp-custom {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cp-custom .cp-input {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
  font-size: 12px;
  text-align: center;
}

.cp-custom span {
  color: var(--cp-text3);
  font-weight: 800;
}

.cp-custom .cp-seg-b {
  flex: 0 0 auto;
  min-height: 30px;
}

.cp-arrow-styles .cp-seg-b {
  flex: 1 1 30%;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
}

.cp-arrow-styles svg {
  flex-shrink: 0;
  overflow: visible;
}

.cp-sectors {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.cp-sector-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.cp-sector-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cp-text2);
}

.cp-sector-row small {
  font-size: 10px;
  font-weight: 700;
  color: var(--cp-text3);
  font-variant-numeric: tabular-nums;
}

.cp-sectors .cp-sec-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

.cp-brand-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cp-brand-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cp-text2);
}

.cp-brand-row input[type='color'] {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--cp-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.cp-brand-draft {
  color: #b45309;
}

/* ---- THE CHECK ----
   A line per finding, the colour of how bad; the badge on its button says
   how many at a glance. The highlight lives in the stage, never the sheet. */
.cp-pf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-pf-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cp-text2);
  background: var(--cp-bg3);
  border: 1px solid var(--cp-border);
  border-left-width: 3px;
  border-radius: 7px;
  padding: 6px 8px;
  cursor: pointer;
}

.cp-pf-row:hover:not(:disabled) {
  color: var(--cp-text);
  border-color: var(--cp-accent2);
}

.cp-pf-row:disabled {
  cursor: default;
}

.cp-pf-row i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--cp-text3);
}

.cp-pf-row.err {
  border-left-color: #ef4444;
}

.cp-pf-row.err i {
  background: #ef4444;
}

.cp-pf-row.warn {
  border-left-color: #f59e0b;
}

.cp-pf-row.warn i {
  background: #f59e0b;
}

.cp-pf-row.info {
  border-left-color: #38bdf8;
}

.cp-pf-row.info i {
  background: #38bdf8;
}

.cp-pf-ok {
  margin: 2px 0;
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
}

.cp-pf-ask {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
}

.cp-top-btn[data-cp-pop='check'] {
  position: relative;
}

.cp-pf-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background: #64748b;
  pointer-events: none;
}

.cp-pf-badge.err {
  background: #ef4444;
}

.cp-pf-badge.warn {
  background: #f59e0b;
  color: #1f2937;
}

.cp-pf-badge.ok {
  background: #22c55e;
}

.cp-pf-badge[hidden] {
  display: none;
}

.cp-pf-hl {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  border: 2px solid #f59e0b;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  animation: cpPfPulse 0.9s ease-in-out 3;
}

.cp-pf-hl.err {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.cp-pf-hl.info {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

@keyframes cpPfPulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-pf-hl {
    animation: none;
  }
}

/* The corner tables grow with their own dial, --cp-tbl (cpTableScale()):
   the type, the padding, the number plates and the stars as one. */
.cp-sheet .cp-times { min-width: calc(170px * var(--cp-tbl, 1)); }
.cp-sheet .cp-times .cp-key-hd { font-size: calc(8.5px * var(--cp-tbl, 1)); padding: calc(4px * var(--cp-tbl, 1)) calc(10px * var(--cp-tbl, 1)); }
.cp-sheet .cp-times-tbl { font-size: calc(7.6px * var(--cp-tbl, 1)); }
.cp-sheet .cp-times-tbl th { font-size: calc(6.6px * var(--cp-tbl, 1)); padding: calc(5px * var(--cp-tbl, 1)) calc(6px * var(--cp-tbl, 1)) calc(3px * var(--cp-tbl, 1)); }
.cp-sheet .cp-times-tbl td { padding: calc(2px * var(--cp-tbl, 1)) calc(6px * var(--cp-tbl, 1)); max-width: calc(120px * var(--cp-tbl, 1)); }
.cp-sheet .cp-times-more { font-size: calc(7px * var(--cp-tbl, 1)); }
.cp-sheet .cp-times-tbl .cp-sec-no { min-width: calc(13px * var(--cp-tbl, 1)); padding: 0 calc(3px * var(--cp-tbl, 1)); font-size: calc(7px * var(--cp-tbl, 1)); line-height: calc(11px * var(--cp-tbl, 1)); }
.cp-sheet .cp-sec-stars svg { width: calc(34px * var(--cp-tbl, 1)); height: calc(7px * var(--cp-tbl, 1)); }