/* Theme. a11y-init.js sets data-theme to the theme in force, light or dark, before anything renders, and "Match my
   device" is worked out there, so nothing below asks about the OS. Bulma flips its own colours from the same attribute.
   Colours that differ by theme are tokens in the two blocks here, and everything else uses the tokens.
   Chart colours follow the dataviz method and are checked with validate_palette.js against Bulma's surfaces
   (#ffffff and #14161a). Run it again if any of these change. */
:root {
  color-scheme: light;
  --rh-soft-l: 90%;
  --rh-bar: #f3f4f6;
  --viz-s1: #2a78d6;
  --viz-s2: #eb6834;
  --viz-s3: #1baf7a;
  --viz-s4: #eda100;
  --viz-s5: #e87ba4;
  --viz-s6: #008300;
  --viz-s7: #6250d6;
  --viz-s8: #e34948;
  --viz-other: #8b8a84;
  --viz-none: #c8c7c0;
  --viz-grid: var(--bulma-border-weak);
  --viz-axis: var(--bulma-border);
}
/* Bulma's "light" colours are fixed in both themes, which left pale bars on dark pages. These lightness values are
   what its is-light variants are built from, so moving them fixes its buttons, tags and notifications at once. */
html[data-theme="dark"] {
  color-scheme: dark;
  --rh-soft-l: 20%;
  --rh-bar: #1e2128;
  --bulma-text-weak-l: 62%;
  --bulma-light-l: 20%;
  --bulma-light-invert-l: 93%;
  --bulma-light-light-invert-l: 93%;
  --bulma-info-light-invert-l: 90%;
  --bulma-success-light-invert-l: 90%;
  --bulma-warning-light-invert-l: 90%;
  --bulma-danger-light-invert-l: 90%;
  --viz-s1: #3987e5;
  --viz-s2: #d95926;
  --viz-s3: #199e70;
  --viz-s4: #c98500;
  --viz-s5: #d55181;
  --viz-s6: #008300;
  --viz-s7: #9085e9;
  --viz-s8: #e66767;
  --viz-other: #8b8a84;
  --viz-none: #4b4c50;
}
html { background-color: var(--bulma-scheme-main); }
.navbar { --bulma-navbar-background-color: var(--rh-bar); border-bottom: 1px solid var(--bulma-border-weak); }
/* Bulma fixes this at 90%, whatever the theme. */
.notification.is-light:is(.is-info, .is-success, .is-warning, .is-danger) { --bulma-notification-background-l: var(--rh-soft-l); }
/* Bulma's hover makes this lighter in dark mode, which takes the white label below AA. */
.button.is-link { --bulma-hover-background-l-delta: -5%; --bulma-active-background-l-delta: -10%; }
/* A box is the page colour in dark mode, so an outline replaces the shadow that can't show there. */
html[data-theme="dark"] .box { --bulma-box-shadow: 0 0 0 1px var(--bulma-border); }
.notification .button.is-text { color: inherit; }
/* Bulma's own ring is a faint shadow that nearly vanishes on a dark page. */
:is(.button, .input, select):focus-visible { outline: 2px solid var(--bulma-text-strong); outline-offset: 2px; }
.site-main a:not(.button):not(.tabs a) { text-decoration: underline; }
input:-webkit-autofill {
  -webkit-text-fill-color: var(--bulma-text-strong);
  box-shadow: inset 0 0 0 100px var(--bulma-scheme-main-bis);
}

.hero.is-robinhood { background: #6b2069; }
.hero.is-robinhood .title, .hero.is-robinhood .subtitle { color: #fff; }
.service-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.service-row .help { flex-basis: 100%; margin: 0; }
.wizard-steps { padding-left: 1.5rem; list-style: decimal; }
.wizard-steps li { margin-bottom: 0.5rem; }
.wizard-connect summary,
.prompt-details summary { cursor: pointer; }
.wizard-connect code { overflow-wrap: anywhere; }
.prompt-text { box-sizing: border-box; font-family: inherit; }

/* Layout */
.navbar-brand { flex-wrap: wrap; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

/* Toasts */
.toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: min(24rem, calc(100vw - 2rem));
}

/* Accessibility panel */
.a11y-panel {
  position: fixed;
  top: 4rem;
  right: 1rem;
  z-index: 40;
  width: min(20rem, calc(100vw - 2rem));
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
.a11y-panel[hidden] { display: none; }

/* Keeps the honeypot off screen; hiding it with display:none lets simple bots skip it. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Accessibility preferences. Bulma builds its colours from these lightness variables. */
html[data-a11y-text="large"] { font-size: 125%; }
html[data-a11y-text="extra-large"] { font-size: 150%; }

html[data-a11y-contrast="high"] {
  --bulma-text-l: 5%;
  --bulma-text-strong-l: 0%;
  --bulma-text-weak-l: 15%;
  --bulma-border-l: 25%;
  --bulma-border-weak-l: 45%;
}
html[data-a11y-contrast="low"] {
  --bulma-text-l: 38%;
  --bulma-text-strong-l: 30%;
  --bulma-text-weak-l: 45%;
}
html[data-theme="dark"][data-a11y-contrast="high"] {
  --bulma-text-l: 95%;
  --bulma-text-strong-l: 100%;
  --bulma-text-weak-l: 85%;
  --bulma-border-l: 75%;
  --bulma-border-weak-l: 55%;
  --bulma-light-invert-l: 100%;
  --bulma-light-light-invert-l: 100%;
  --bulma-info-light-invert-l: 100%;
  --bulma-success-light-invert-l: 100%;
  --bulma-warning-light-invert-l: 100%;
  --bulma-danger-light-invert-l: 100%;
}
html[data-theme="dark"][data-a11y-contrast="low"] {
  --bulma-text-l: 68%;
  --bulma-text-strong-l: 75%;
  --bulma-text-weak-l: 60%;
}
html[data-a11y-contrast="high"] a:not(.button):not(.navbar-item) { text-decoration: underline; }

html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.captcha { display: block; margin-bottom: 0.5rem; }

/* Tool views. The chart colours are the --viz tokens at the top of this file. */
.viz-s1 { --viz-fill: var(--viz-s1); }
.viz-s2 { --viz-fill: var(--viz-s2); }
.viz-s3 { --viz-fill: var(--viz-s3); }
.viz-s4 { --viz-fill: var(--viz-s4); }
.viz-s5 { --viz-fill: var(--viz-s5); }
.viz-s6 { --viz-fill: var(--viz-s6); }
.viz-s7 { --viz-fill: var(--viz-s7); }
.viz-s8 { --viz-fill: var(--viz-s8); }
.viz-other { --viz-fill: var(--viz-other); }
.viz-none { --viz-fill: var(--viz-none); }

.viz-swatch {
  display: inline-block;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--viz-fill);
  vertical-align: baseline;
}
.viz-mark { fill: var(--viz-fill); }
.viz-baseline { stroke: var(--viz-axis); stroke-width: 1; }
.viz-gridline { stroke: var(--viz-grid); stroke-width: 1; }
.viz-peak { fill: var(--bulma-text); font-weight: 600; }
.viz-tick { fill: var(--bulma-text-weak); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.viz-hit { fill: transparent; cursor: default; outline: none; }
.viz-hit[role="button"] { cursor: pointer; }
.viz-hit:hover { fill: var(--viz-grid); fill-opacity: 0.45; }
.viz-hit:focus-visible { stroke: var(--bulma-text-strong); stroke-width: 2; }

.viz-chart { position: relative; }
.viz-chart.is-refreshing .viz-bands { opacity: 0.5; }
.viz-band { margin-bottom: 0.75rem; }
.viz-band svg { display: block; width: 100%; overflow: visible; }
.viz-band-title { display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: baseline; margin-bottom: 0.125rem; }
.viz-band-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bulma-text-strong);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.viz-band-plain { color: var(--bulma-text-strong); font-weight: 600; }
.viz-note { color: var(--bulma-text-weak); font-size: 0.875rem; }

.viz-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.75rem; }
.viz-controls .breadcrumb { margin-bottom: 0; }
.viz-crumb {
  padding: 0 0.5em;
  border: 0;
  background: none;
  color: var(--bulma-link-text);
  font: inherit;
  cursor: pointer;
}
.viz-crumb[aria-current="page"] { color: var(--bulma-text-strong); cursor: default; font-weight: 600; }
.viz-spacer { flex: 1 1 auto; }

.viz-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.viz-legend-item {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--bulma-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.viz-legend-item:hover { border-color: var(--viz-axis); }
.viz-legend-item[aria-pressed="false"] { color: var(--bulma-text-weak); text-decoration: line-through; }
.viz-legend-item[aria-pressed="false"] .viz-swatch { background: none; box-shadow: inset 0 0 0 1px var(--viz-axis); }

.viz-tooltip {
  position: fixed;
  z-index: 45;
  max-width: 16rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--viz-axis);
  border-radius: 6px;
  background: var(--bulma-scheme-main);
  box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.2);
  color: var(--bulma-text);
  font-size: 0.8125rem;
  pointer-events: none;
}
.viz-tooltip-title { color: var(--bulma-text-strong); font-weight: 600; }
.viz-tooltip-row { display: flex; gap: 0.5rem; align-items: center; }
.viz-tooltip-row strong { font-variant-numeric: tabular-nums; }
.viz-key { flex: none; width: 0.75rem; height: 2px; background: var(--viz-fill); }

.viz-events { margin: 0; padding: 0; list-style: none; }
.viz-event {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--viz-grid);
}
.viz-event-time { color: var(--bulma-text-weak); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.viz-event-head { display: flex; flex-wrap: wrap; gap: 0.125rem 0.5rem; align-items: center; font-size: 0.875rem; }
.viz-event-title { overflow-wrap: anywhere; color: var(--bulma-text-strong); }
.viz-event-meta { overflow-wrap: anywhere; color: var(--bulma-text-weak); font-size: 0.8125rem; }

.viz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.viz-tile { padding: 0.75rem; border: 1px solid var(--viz-grid); border-radius: 6px; }
.viz-tile-label { color: var(--bulma-text-weak); font-size: 0.8125rem; }
.viz-tile-value { color: var(--bulma-text-strong); font-size: 1.375rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.viz-numeric { font-variant-numeric: tabular-nums; }
.viz-service { display: inline-flex; gap: 0.375rem; align-items: center; white-space: nowrap; }

.viz-steps { margin: 0.5rem 0 0.75rem; padding: 0; list-style: none; }
.viz-step {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 0.75rem;
  padding: 0.25rem 0;
}
.viz-step .viz-band-link { align-self: start; justify-self: start; white-space: nowrap; }
.viz-journey-head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; }
.viz-recall-result { margin-top: 1rem; }
.viz-search-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem 0.75rem; }
.viz-search-filters .select select { width: 100%; }
.viz-search-result { grid-template-columns: 6rem minmax(0, 1fr); }
.viz-search-result .viz-band-link { align-self: start; justify-self: start; }
.viz-search-service { display: inline-flex; gap: 0.375rem; align-items: center; margin-right: 0.5rem; }
.viz-match {
  padding: 0 0.0625rem;
  border-radius: 2px;
  background: var(--bulma-warning-soft);
  color: var(--bulma-text-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.tool-manage > summary { cursor: pointer; font-weight: 600; margin-bottom: 0.75rem; }
.tool-sample-banner { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }

@media (forced-colors: active) {
  .viz-mark { fill: CanvasText; }
  .viz-swatch { background: CanvasText; }
}
.viz .tabs ul { flex-wrap: wrap; }
.viz-numeric { white-space: nowrap; }
/* These headings take focus from script after an import, to move screen readers, so they need no ring. */
.viz h2[tabindex="-1"]:focus, .viz h3[tabindex="-1"]:focus { outline: none; }

/* ===== UX review additions (see docs/ux-review.md) ===== */
.service-row .service-note { color: var(--bulma-text); }
/* Bulma's tabs refuse to shrink, which cut off the last tab on a phone. */
.viz .tabs { white-space: normal; }
.viz .tabs ul { flex-shrink: 1; min-width: 0; }
.viz-empty-note { margin-top: 0.75rem; }
/* The file inputs are invisible, so their visible parts show keyboard focus for them. */
.file-input:focus-visible ~ .file-cta,
.tool-restore-button:has(input:focus-visible) { outline: 2px solid var(--bulma-text-strong); outline-offset: 2px; }
#tool-upload.is-dragging { outline: 2px dashed var(--bulma-link); outline-offset: 2px; }
#tool-upload .file-name { height: auto; max-width: none; white-space: normal; }
#tool-upload .file.has-name .file-label { align-items: stretch; }
#wizard-done:focus { outline: none; }
.table-container:focus-visible { outline: 2px solid var(--bulma-text-strong); outline-offset: 2px; }
/* ===== End of UX review additions ===== */

/* Compact footer: Bulma's default padding is 6rem at the bottom. */
footer.footer { padding: 0.75rem 1.5rem; }
footer.footer .buttons { justify-content: center; margin-bottom: 0; }
footer.footer .buttons .button { margin-bottom: 0; }

/* ===== Wizard service list and icons =====
   Theme tokens for the list are here so the section stands alone. Icons come from templatetags/icons.py and fill with
   currentColor, so they follow the text in every theme. In forced colours the shading goes and the dividers remain. */
:root { --rh-zebra: #eceef2; }
html[data-theme="dark"] { --rh-zebra: #22252d; }
html[data-a11y-contrast="high"] { --rh-zebra: #e1e4e9; }
html[data-theme="dark"][data-a11y-contrast="high"] { --rh-zebra: #2d313b; }
/* Low contrast mode has greyer text, so paler shading keeps it readable. */
html[data-a11y-contrast="low"] { --rh-zebra: #f6f7f9; }
html[data-theme="dark"][data-a11y-contrast="low"] { --rh-zebra: #1a1d22; }

.rh-icon { flex: none; width: 1em; height: 1em; vertical-align: -0.125em; }

.service-list {
  margin-bottom: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--bulma-border);
  border-radius: 6px;
}
.service-list .service-row { padding: 0.75rem 1rem; }
.service-list .service-row + .service-row { border-top: 1px solid var(--bulma-border-weak); }
/* Counts only the rows on show, so the pattern holds if a row is hidden. A browser without "of" shows no shading. */
.service-list .service-row:nth-child(even of :not(.is-hidden, [hidden])) { background-color: var(--rh-zebra); }
.service-list .service-row .help { color: var(--bulma-text); }

.service-row .checkbox { display: inline-flex; flex: 0 0 11rem; gap: 0.5rem; align-items: center; }
.service-row .checkbox .rh-icon { font-size: 1.25rem; }

/* wizard.js swaps the Bulma colour class on this tag, and that choice of class also picks the icon. */
.service-row .service-status { gap: 0.375em; min-width: 7rem; border: 1px solid var(--bulma-border); }
.service-status .rh-icon { display: none; }
.service-status.is-light .service-status-icon-none,
.service-status.is-warning .service-status-icon-requested,
.service-status.is-success .service-status-icon-received { display: inline-block; }

.service-row .button { gap: 0.375em; }
.service-row .button .rh-icon { margin: 0; }
.service-list-note { margin-bottom: 1rem; }
/* ===== End of wizard service list and icons ===== */