/* portal.css — portal-only additions. www/custom.css stays the canonical
   design system (loaded before this file); keep this file SMALL. */

/* Server-rendered SVG blocks (broadcast profile, DNA, intel) carry fixed
   pixel widths designed for wide cards — scale them into their container on
   small viewports instead of stretching the page. The decorative hero orb
   likewise must never widen the document. */
main svg { max-width: 100%; height: auto; }
.hm-orb { pointer-events: none; max-width: 100vw; }
body { overflow-x: hidden; }

/* htmx loading indicator contract */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Legal/document body links inherit the brand accent */
.legal-doc a { color: #4F46E5; text-decoration: underline; }
.dark .legal-doc a { color: #818CF8; }
.legal-doc h2 { font-weight: 800; margin-top: 1.5rem; color: inherit; }
.legal-doc ul { list-style: disc; padding-left: 1.25rem; }

/* Consent banner — explicit rules, NOT Tailwind utilities: the compiled
   tailwind.css only carries classes present in the Shiny sources at build
   time, and the banner's positioning utilities weren't all in it — the
   banner rendered mid-page, clipped off the left edge, overlapping content
   (caught by screenshot inspection, invisible to overflow/JS asserts). */
#p3-consent-banner{position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:rgba(15,23,42,.97);color:#e2e8f0;border-top:1px solid #334155;
  padding:1rem;}
#p3-consent-banner>div{max-width:56rem;margin:0 auto;display:flex;
  flex-wrap:wrap;align-items:center;gap:.75rem;font-size:12px;}
#p3-consent-banner p{flex:1 1 220px;margin:0;line-height:1.5;}
#p3-consent-banner button{cursor:pointer;border:none;}

/* Stage-results table inks (shared builder mod_races._stage_results_html).
   The builder used to hard-code dark-surface colors inline — near-white
   rider names were invisible on the light-mode white panel. Light values
   first, dark restores the Shiny palette. */
.p3-sr-name { color: #0f172a; }
.p3-sr-team { color: #64748b; }
.p3-sr-gap  { color: #334155; }
.p3-sr-p1 { color: #b45309; }
.p3-sr-p2 { color: #475569; }
.p3-sr-p3 { color: #92400e; }
.p3-sr-pn { color: #64748b; }
.dark .p3-sr-name { color: #f1f5f9; }
.dark .p3-sr-team { color: #94a3b8; }
.dark .p3-sr-gap  { color: #cbd5e1; }
.dark .p3-sr-p1 { color: #fbbf24; }
.dark .p3-sr-p2 { color: #cbd5e1; }
.dark .p3-sr-p3 { color: #d97706; }
.dark .p3-sr-pn { color: #64748b; }
.p3-ink-hi { color: #0f172a; }
.dark .p3-ink-hi { color: #f1f5f9; }

/* CARBON dark-embed: several str()-reused Shiny blocks (stage route-intel,
   flyover chrome) style themselves with SEMI-TRANSPARENT dark backgrounds —
   correct over Shiny's always-dark body, washed-out grey over the portal's
   light body. In light mode, give their outer panel the opaque color the
   transparency would have produced over the dark body. Dark mode keeps the
   native blend. */
html:not(.dark) .p3-dark-embed > div {
  background: linear-gradient(170deg, #12112f 0%, #0b1120 100%) !important;
}

/* CARBON selects: str()-reused ui.input_select/input_selectize markup arrives
   without Shiny's Bootstrap, so the native select inherited the dark wrapper's
   light ink over the browser's light bg (unreadable on the dashboard card).
   Reproduce Bootstrap 5 .form-select exactly as the Shiny app computes it
   (white field + dark ink + caret), both themes — that IS the Shiny look. */
.shiny-input-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: block; width: 100%;
  padding: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: rgb(29, 31, 33); background-color: #fff;
  border: 1px solid rgb(141, 149, 158); border-radius: .375rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center;
  background-size: 16px 12px;
}

/* CARBON text inputs/textareas/date fields: same gap as the selects above —
   lifted ui.input_text/_text_area/_date markup arrives without Shiny's
   Bootstrap+shiny.css. Values are the COMPUTED styles read off the live
   Shiny app (magazine search field, 2026-09-01): container 300px cap +
   16px stack gap, label 2px gap, field 1px #8d959e border / 3px radius /
   6x12 padding / 15px ink on white. */
.shiny-input-container:not(.shiny-input-container-inline) {
  width: 300px; max-width: 100%; margin-bottom: 16px;
}
.shiny-input-container label { display: inline-block; margin-bottom: 2px; }
.shiny-input-container input.form-control,
.shiny-input-container textarea.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: block; width: 100%;
  padding: 6px 12px;
  font-size: 15px; font-weight: 400; line-height: 1.5;
  color: rgb(29, 31, 33); background-color: #fff;
  border: 1px solid rgb(141, 149, 158); border-radius: 3px;
}
.shiny-input-container textarea.form-control { height: auto; }

/* ===================================================================
   SHELL CHROME — the sport switcher next to the logo.
   Copied deliberately from core/static/css/p3rf.css rather than loading
   that file: it is the platform's component layer (.card/.btn/.badge/
   table), and cycling's lifted Shiny HTML already ships .btn and .wide
   classes of its own that it would restyle. These three rules are the
   only part of it cycling's header needs. Keep them in step with core.
   =================================================================== */
.nav-sport-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--accent-soft);
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-sport-chip:hover { background: var(--accent-ring); }
.nav-sport-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: 0 0 auto; }
.nav-sport-current { color: var(--accent-color) !important; background: var(--accent-soft); }
.active-dropdown { opacity: 1 !important; transform: scale(1) !important; pointer-events: auto !important; }