/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Offset anchor scroll position so fragment targets clear the sticky navbar (h-14 = 3.5rem).
   Use scroll-margin-top on the target instead of scroll-padding-top on html — the latter
   also affects browser-initiated caret-into-view scrolls during typing, which causes the
   page to scroll up by 3.5rem per keystroke when typing in inputs inside the sticky navbar
   (e.g. omnisearch). Apply to anything with an id so JS-driven scrollIntoView calls
   also clear the navbar (the :target selector only applies to browser-initiated fragment
   targets, not programmatic scrolls). */
[id] {
  /* Navbar is 3.5rem; add 1rem breathing room so the anchored
     element doesn't sit flush against the navbar bottom edge. */
  scroll-margin-top: 4.5rem;
}

/* Collapsible section chevron */
.collapsible-section > summary {
  list-style: none;
}
.collapsible-section > summary::-webkit-details-marker {
  display: none;
}
.collapsible-chevron {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.collapsible-section[open] > summary .collapsible-chevron {
  transform: rotate(90deg);
}

/* Section anchor link — hidden until heading is hovered */
.section-anchor {
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 1rem;
  text-decoration: none;
}
.collapsible-section > summary:hover .section-anchor {
  opacity: 1;
}

/* Subsection anchor link — same behaviour for h3 subheadings */
.subsection-heading:hover .section-anchor {
  opacity: 1;
}

/* Accuracy trend chart row: stacks on mobile, side-by-side on desktop.
   Column widths driven by per-element CSS variables set inline in the
   view, only applied when the row is in lg+ viewports. */
@media (min-width: 1024px) {
  .trend-chart-row .trend-chart-major {
    flex: 0 0 var(--trend-chart-major-basis, 50%);
    min-width: 0;
  }
  .trend-chart-row .trend-chart-minor {
    flex: 0 0 var(--trend-chart-minor-basis, 50%);
    min-width: 0;
  }
}

/* Icon-as-toggle control on the /ballots/:id trend chart. The SVG shape
   itself is the clickable toggle — no surrounding checkbox. Off state
   is grey outline; on state is fuchsia (#d946ef), chosen to avoid any
   UK political-party colour. */
.trend-toggle {
  user-select: none;
  color: #9ca3af; /* off: gray-400 — matches the icon outline/fill */
}
.trend-toggle[aria-pressed="true"] {
  color: #374151; /* on: gray-700 — clearly darker, reads as active */
}
.trend-toggle:focus-visible {
  outline: 2px solid #d946ef;
  outline-offset: 2px;
  border-radius: 3px;
}
.trend-toggle .shape-disc circle,
.trend-toggle .shape-triangle polygon {
  fill: #9ca3af;
  stroke: none;
}
.trend-toggle .shape-ring circle,
.trend-toggle .shape-square rect,
.trend-toggle .shape-star polygon,
.trend-toggle .shape-diamond polygon,
.trend-toggle .shape-question circle {
  stroke: #9ca3af;
}
.trend-toggle .shape-question text {
  fill: #9ca3af;
}
.trend-toggle[aria-pressed="true"] .shape-disc circle,
.trend-toggle[aria-pressed="true"] .shape-triangle polygon {
  fill: #d946ef;
}
.trend-toggle[aria-pressed="true"] .shape-ring circle,
.trend-toggle[aria-pressed="true"] .shape-square rect,
.trend-toggle[aria-pressed="true"] .shape-star polygon,
.trend-toggle[aria-pressed="true"] .shape-diamond polygon,
.trend-toggle[aria-pressed="true"] .shape-question circle {
  stroke: #d946ef;
}
.trend-toggle[aria-pressed="true"] .shape-question text {
  fill: #d946ef;
}

/* Shared grid layout for the Party / Classification / Share / Bar
   tables used by both the notional-results panel and the predecessor-
   actual detail fragment. Defined globally because the predecessor
   fragment is fetched stand-alone via XHR and has no accompanying
   <style> block of its own. */
.notional-grid {
  display: grid;
  grid-template-columns: 1fr auto 80px minmax(80px, 200px);
  border-top: 1px solid #e5e7eb;
}
/* .notional-grid-row may be either a <div> (no-source rows) or
   a <details> (has-source rows). Both are direct grid children
   that span all columns via subgrid. */
.notional-grid-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
.notional-grid-header > div {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.notional-grid-row > div {
  border-bottom: 1px solid #f3f4f6;
}
/* <summary> uses subgrid so cells align with columns */
details.notional-grid-row > summary.notional-summary {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  list-style: none;
  cursor: pointer;
}
details.notional-grid-row > summary.notional-summary::-webkit-details-marker {
  display: none;
}
details.notional-grid-row > summary.notional-summary::marker {
  display: none;
  content: "";
}
/* Disclosure chevron */
.notional-summary > .notional-name::before {
  content: "\203A";
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
  color: #9ca3af;
  margin-right: 0.25rem;
  transition: transform 0.15s ease;
}
details.notional-grid-row[open] > .notional-summary > .notional-name::before {
  transform: rotate(90deg);
}
/* Summary cell borders */
.notional-summary > div {
  border-bottom: 1px solid #f3f4f6;
}
/* Expanded predecessor sub-table: outer-grid sibling of the
   <details> (NOT inside it) so `grid-column: 1 / -1` spans the
   full table width — see commit history of the analysis-slot
   table for why subgrid clamps `1 / -1` on nested elements. */
.notional-sub-detail {
  grid-column: 1 / -1;
  border-bottom: 1px solid #e5e7eb;
  display: none;
}
details.notional-grid-row[open] + .notional-sub-detail {
  display: block;
}
/* Hover highlight */
.notional-summary:hover > div {
  background: #f9fafb;
}
/* Open state highlight */
details[open] > .notional-summary > div {
  background: #f0f9ff;
}
/* Alternate row shading. Stripes the data rows (every other
   <details>.notional-grid-row); also stripes the corresponding
   sub-detail so the visual band continues into the expanded
   section. nth-of-type counts <details> elements specifically,
   ignoring the sub-detail <div>s interleaved between them. */
details.notional-grid-row:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}
details.notional-grid-row:nth-of-type(odd) + .notional-sub-detail {
  background-color: rgba(0, 0, 0, 0.03);
}
/* Fallback for non-source (<div>) rows */
div.notional-grid-row:not(.notional-grid-header):nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.03);
}
/* Predecessor sub-row highlight — mirrors overlap-map-highlight.
   Colour comes from --color-focus (Area::COLOR_FOCUS) injected by the
   layout, mixed down to a 12% tint. */
.notional-pred-row.notional-map-highlight > td {
  background-color: color-mix(in srgb, var(--color-focus) 12%, transparent) !important;
}

/* Sync run step list: hide native disclosure marker on <summary> so
   our own rotating chevron is the only indicator. Tailwind's list-none
   handles list-style on Chromium/Firefox, but Safari needs the
   ::-webkit-details-marker pseudo too. */
[data-sync-poll-step-slug] > details > summary::-webkit-details-marker {
  display: none;
}
[data-sync-poll-step-slug] > details > summary::marker {
  content: "";
}

/* Dolt diff noise-toggle: timestamp/id changes are hidden by default.
   `.diff-noise-shown` (toggled by diff_noise_toggle_controller) reveals
   them. Rows whose only changes are noise (.diff-noise-only) are also
   hidden until the toggle is on. */
[data-controller~="diff-noise-toggle"] .diff-noise {
  display: none;
}
[data-controller~="diff-noise-toggle"] tr.diff-noise-only {
  display: none;
}
[data-controller~="diff-noise-toggle"].diff-noise-shown .diff-noise {
  display: revert;
}
[data-controller~="diff-noise-toggle"].diff-noise-shown tr.diff-noise-only {
  display: table-row;
}

/* Loading spinner for the change-history Turbo Frame while it fetches
   the next page. Turbo sets aria-busy="true" on the frame during fetch
   and clears it on render — no JS needed. */
turbo-frame#dolt-history[aria-busy="true"] {
  position: relative;
}
turbo-frame#dolt-history[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
turbo-frame#dolt-history[aria-busy="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  border: 2px solid #d1d5db;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: dolt-history-spin 0.6s linear infinite;
  z-index: 1;
}
@keyframes dolt-history-spin {
  to { transform: rotate(360deg); }
}