/* ===================================================================
   panel-readability.css — collapsible side-panel sections + readable
   type floor. Loaded AFTER mod-menu.css / right-panel.css so it wins
   on equal-specificity ties. No panel-width changes anywhere here.
   =================================================================== */

/* ── Readable type floor (panel-scoped custom-property override) ──────
   Bumps every var-based label in the panels to a ~12px floor at once.
   Hardcoded 9–11px rules are floored separately in the panel CSS files. */
.left-panel,
.right-panel {
  --text-2xs: 0.75rem;    /* 11px → 12px */
  --text-xs:  0.8125rem;  /* 13px (unchanged, already legible) */
}

/* ===================================================================
   Reusable accordion  (.panel-accordion inside [data-accordion-group])
   =================================================================== */
.panel-accordion {
  border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
}
.panel-accordion:first-child { border-top: 0; }

.panel-accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 11px 2px;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-text-2, #cfcfcf);
  font: inherit;
  text-align: left;
  transition: color var(--t-fast, 0.18s) ease;
}
.panel-accordion__head:hover { color: var(--c-text-1, #fff); }
.panel-accordion__head:focus-visible {
  outline: 2px solid var(--c-accent-bright, #5b9dff);
  outline-offset: 2px;
  border-radius: 4px;
}

.panel-accordion__title {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: inherit;
}

/* optional collapsed-state summary (e.g. "518 HP") — fades out when open */
.panel-accordion__meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-3, #8a8a8a);
  white-space: nowrap;
  transition: opacity var(--t-fast, 0.18s) ease;
}
.panel-accordion.is-open .panel-accordion__meta { opacity: 0; }

/* handmade monochrome chevron — the trigger symbol (replaces the ▾ glyph).
   currentColor keeps it on-palette; it rotates 180° when the section opens. */
.panel-accordion__chevron {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--c-text-3, #8a8a8a);
  transition: transform var(--t-fast, 0.18s) ease, color var(--t-fast, 0.18s) ease;
}
.panel-accordion__head:hover .panel-accordion__chevron { color: var(--c-text-1, #fff); }
.panel-accordion.is-open .panel-accordion__chevron { transform: rotate(180deg); }
.panel-accordion__chevron svg { display: block; width: 100%; height: 100%; }

.panel-accordion__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.2s ease;
}
.panel-accordion.is-open .panel-accordion__body {
  max-height: 1500px;
  opacity: 1;
  padding-bottom: var(--sp-3, 12px);
}

@media (prefers-reduced-motion: reduce) {
  .panel-accordion__body,
  .panel-accordion__chevron,
  .panel-accordion__head { transition: none; }
}

/* ── Handmade icon set (icons.js sprite) — monochrome line glyphs ─────
   Sized to the surrounding text; inherits colour via currentColor. */
.mvi {
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  vertical-align: -0.24em;
  flex: none;
  fill: none;
  /* bright monochrome so the glyphs pop on dark glass — overridable per context */
  color: var(--mvi-color, #eef0f3);
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Readable floor for panel cards styled by components.css ──────────
   These render inside the right panel but live in the global stylesheet,
   so we floor them here (scoped) rather than bumping components.css and
   inflating navbar/badges app-wide. */
.maint-section__title,
.maint-item__desc,
.maint-item__fix-name { font-size: 12px; }
.maint-section__engine,
.maint-item__sev,
.maint-item__fix-label,
.maint-item__fix-cost,
.maint-item__cta { font-size: 12px; }