/* ============================================================
   Macro provenance — "How we worked this out"

   Provenance is carried by the row's LEFT EDGE: solid rule, dashed rule, or no rule with a tinted
   fill. Hue is already spoken for — the macro palette means "which macro" and must never be
   borrowed to mean anything else — so this uses an axis nothing else in the app uses, and one that
   survives greyscale.
   ============================================================ */

/* ---------- The entry point (design option 2b) ---------- */

.prov-entry {
  display: flex;
  align-items: center;
  gap: var(--fs-spacing-sm);
  width: 100%;
  min-height: 48px; /* mobile tap target */
  padding: var(--fs-spacing-sm) var(--fs-spacing-md);
  border: none;
  border-top: 1px solid var(--fs-border-default);
  background: transparent;
  color: var(--fs-text-secondary);
  font-size: var(--fs-font-size-sm);
  text-align: left;
}

.prov-entry:hover {
  background: var(--fs-bg-hover);
}

.prov-entry:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: -2px;
}

.prov-entry-text {
  flex: 1 1 auto;
}

.prov-entry-glyph {
  color: var(--fs-text-muted);
}

.prov-entry-chevron {
  font-size: 0.75rem;
  color: var(--fs-text-muted);
}

/* ---------- Desktop presentation ----------
   ONE shell, restyled. Above 576px the bottom sheet becomes a centred dialog: same component, same
   focus/Escape/scroll-lock behaviour, no second copy of the ladder in the DOM. 576px matches where
   the host card itself switches, so the panel always agrees with the layout around it.

   Two traps this block has to clear, both learned the hard way:

   1. NO `::deep`. That is a Blazor scoped-CSS construct, stripped only inside a `.razor.css` file.
      In a plain global stylesheet the browser reads it as an unknown pseudo-element, and one
      invalid selector in a comma-separated list invalidates the WHOLE rule — so the previous
      version silently did nothing while the neighbouring drag-handle rule still applied, leaving a
      full-width sheet with its drag affordance removed.

   2. `!important`, deliberately. The rule being overridden is
      `.mobile-bottom-sheet.open .sheet-container` in a scoped stylesheet, which the Blazor build
      rewrites with a `[b-hash]` attribute — so it outweighs anything reachable by class alone. It
      also sets `transform` through a keyframe animation, and animations beat ordinary declarations
      outright. `!important` is the only thing that wins both, and scoping it under `.prov-shell`
      keeps it off every other sheet on the page.

   3. `.closing` alongside `.open`. CloseAsync swaps one class for the other and then waits 250ms
      for the animation — but the component's own `display:none` reapplied the instant `.open` left,
      so the dialog vanished while the close still blocked. */

@media (min-width: 576px) {
  /* MobileBottomSheet hides ITSELF above 769px — `display: none !important` in its own stylesheet,
     because it was built as a mobile-only container. Restyling the sheet into a desktop dialog is
     therefore not enough: without this the panel is simply absent on desktop, which no unit or
     bUnit test can see because neither applies stylesheets. Found by rendering it in a browser.

     `.open` in the selector is deliberate — a closed panel must stay hidden. Three classes beats
     the two in the rule being overridden, so this wins on specificity rather than on load order. */
  .prov-shell .mobile-bottom-sheet.open,
  .prov-shell .mobile-bottom-sheet.closing {
    display: block !important;
  }

  .prov-shell .mobile-bottom-sheet.open .sheet-container,
  .prov-shell .mobile-bottom-sheet.closing .sheet-container,
  .prov-shell .sheet-container {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    animation: none !important;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: 88%;
    margin: 0;
    border-radius: var(--fs-radius-xl);
    box-shadow: var(--fs-shadow-lg);
  }

  /* The drag affordance is meaningless once the panel is centred — swiping a dialog down is not a
     gesture anyone reaches for, and the handle advertises one the shape no longer supports. */
  .prov-shell .sheet-drag-handle {
    display: none;
  }
}

/* ---------- The ladder ---------- */

.prov-inputs {
  margin: 0 0 var(--fs-spacing-lg);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-secondary);
}

.prov-row {
  padding: var(--fs-spacing-md) 0 var(--fs-spacing-md) var(--fs-spacing-md);
  border-top: 1px solid var(--fs-border-default);
}

.prov-row:first-of-type {
  border-top: none;
}

/* The three treatments. Solid = firm, dashed = provisional, fill-without-rule = an input. */
.prov-row--research {
  border-left: 3px solid var(--fs-primary);
}

.prov-row--estimated {
  border-left: 3px dashed var(--fs-text-muted);
}

.prov-row--userset {
  border-left: 3px solid transparent;
  background: var(--fs-bg-tertiary);
}

.prov-row-origin {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
}

.prov-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-spacing-sm);
  margin-top: var(--fs-spacing-xs);
}

.prov-row-label {
  font-weight: 600;
}

.prov-row-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prov-row-subtitle {
  margin: 2px 0 0;
  font-size: var(--fs-font-size-xs);
  color: var(--fs-text-secondary);
}

.prov-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-spacing-xs);
  min-height: 44px;
  margin-top: var(--fs-spacing-xs);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fs-primary);
  font-size: var(--fs-font-size-xs);
  font-weight: 600;
}

.prov-row-toggle:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}

.prov-row-chevron {
  transition: transform 0.2s ease;
}

.prov-row-chevron.open {
  transform: rotate(180deg);
}

.prov-row-working {
  margin-top: var(--fs-spacing-xs);
  padding: var(--fs-spacing-sm) var(--fs-spacing-md);
  background: var(--fs-bg-secondary);
  border-radius: var(--fs-radius-sm);
  font-size: var(--fs-font-size-xs);
  overflow-x: auto;
}

.prov-step {
  display: flex;
  gap: var(--fs-spacing-sm);
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.prov-step-rounding {
  text-align: right;
  color: var(--fs-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- The plain note ----------
   A verbatim-quote block lived here too (.prov-row-research / -quote / -abstract), gated on a row
   property nothing ever set. It shipped unreachable, so it was removed rather than left as markup
   and CSS the panel could never render. Attribution is on the citation line instead. */

.prov-row-note {
  margin-top: var(--fs-spacing-sm);
  font-size: var(--fs-font-size-xs);
  display: flex;
  gap: var(--fs-spacing-sm);
}

.prov-row-note p {
  margin: 0;
  color: var(--fs-text-secondary);
}

.prov-row-citation {
  margin: var(--fs-spacing-sm) 0 0;
  font-size: 0.6875rem;
  color: var(--fs-text-muted);
}

/* ---------- Demoted working and footnote ---------- */

.prov-demoted {
  margin-top: var(--fs-spacing-lg);
  padding: var(--fs-spacing-sm) var(--fs-spacing-md);
  background: var(--fs-bg-secondary);
  border-radius: var(--fs-radius-sm);
  font-size: var(--fs-font-size-xs);
}

.prov-demoted summary {
  cursor: pointer;
  color: var(--fs-text-secondary);
  font-weight: 600;
}

.prov-demoted-note {
  margin: var(--fs-spacing-xs) 0 0;
  color: var(--fs-text-muted);
}

.prov-footnote {
  margin: var(--fs-spacing-lg) 0 0;
  font-size: 0.6875rem;
  color: var(--fs-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .prov-row-chevron {
    transition: none;
  }
}

/* The two-state maintenance line sits above the ladder, in the same register as the inputs summary
   it follows — a statement about the whole panel rather than about any one row. */
.prov-maintenance-line {
  margin: 0 0 var(--fs-spacing-lg);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-text-primary);
}