/** Phase 1 foundations, shared by React and explicitly opted-in static pages.
 * Keep this opt-in: externally generated articles own their presentation.
 * Shared shell geometry is opt-in too; plate faces and charts remain local.
 */
@import './shell.css';

@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

.mw-foundations {
  font-family: 'Jost', system-ui, sans-serif;
  --focus-ring: 2px solid var(--color-action);
  --focus-ring-offset: 2px;
}

/* Minimum hit geometry also covers controls injected by existing controllers. */
.mw-foundations :is(button, [role='button'], summary) {
  min-height: var(--spacing-control);
  min-width: var(--spacing-control);
}
.mw-foundations :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']), select, textarea) {
  min-height: var(--spacing-control);
}
.mw-foundations :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):not(.plate-input):not(#plate-input):not([id^='reg-input-']):not(.tyre-pill-input):not(.bento-num), select, textarea) {
  font-size: var(--text-control);
  line-height: var(--text-control--line-height);
}
.mw-foundations :is(input, select, textarea):not(.plate-input):not(#plate-input):not([id^='reg-input-'])::placeholder {
  color: var(--color-muted);
  opacity: 1;
}
.mw-foundations :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

/* Compatibility for existing action class recipes (including runtime strings).
 * Restrict to actionable elements: brand artwork and data marks keep their blue.
 */
.mw-foundations :is(button, a).bg-brand {
  background-color: var(--color-action);
  border-color: var(--color-action);
}
.mw-foundations :is(button, a):is(.bg-brand, .bg-action):hover {
  background-color: var(--color-action-hover);
  border-color: var(--color-action-hover);
}
.mw-foundations :is(button, a).text-brand { color: var(--color-action); }
.mw-foundations :is(button, a):is(.text-brand, .text-action):hover { color: var(--color-action-hover); }
.mw-foundations a:is(.bg-brand, .bg-action, .border-btn-border) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-control);
}
.mw-foundations :is(button, a).border-btn-border { border-color: var(--color-control-border); }

/* The shared chrome keeps its 63px header; the report keeps 56px at offset 0. */
.mw-foundations .mw-menu-btn { width: var(--spacing-control); height: var(--spacing-control); }
.mw-foundations .mw-menu-btn.is-open { background: var(--color-action); }
.mw-foundations #mw-tabnav-strip > :is(.mw-pill, .mw-nav-pill) {
  min-height: var(--spacing-control);
  border-color: var(--color-control-border);
}
.mw-foundations #mw-tabnav-strip > :is(.mw-pill, .mw-nav-pill):is(.is-active, .active, [aria-current]) {
  background: var(--color-action);
  border-color: var(--color-action);
}
.mw-foundations #mw-tabnav-strip > :is(.mw-pill, .mw-nav-pill):is(.is-active, .active, [aria-current]):hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}
.mw-foundations #mw-tabnav-strip > :is(.mw-pill, .mw-nav-pill):focus-visible {
  box-shadow: none;
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}
.mw-foundations :is(.mw-menu-item, .mw-menu-subitem, .mw-logo) { min-height: var(--spacing-control); }
.mw-foundations #mw-footer a { display: inline-flex; align-items: center; min-height: var(--spacing-control); }
.mw-foundations #mw-footer a:hover { color: var(--color-action); }

/* Standalone field boundaries and essential helper text, excluding plates and
 * numeric fields grouped inside their own visible input shell. */
.mw-foundations :is(input, select, textarea):not(.plate-input):not(#plate-input):not([id^='reg-input-']):not(.tyre-pill-input):not(.bento-num):not([type='range']):not([type='checkbox']):not([type='radio']) {
  border-color: var(--color-control-border);
}
.mw-foundations :is(p, small, label).text-faint { color: var(--color-muted); }
.mw-foundations :is(.tool-bottom-nav-item, .bottom-nav-tab).active { color: var(--color-action); }
.mw-foundations :is(.tool-bottom-nav-item, .bottom-nav-tab):not(.active):not(.is-active) { color: var(--color-muted); }

.mw-foundations :is(input, select, textarea):is([aria-invalid='true'], .border-danger, .border-danger-fg, .border-red-500) {
  border-color: var(--color-danger-fg);
}
.mw-foundations :is(p, label, small).text-danger { color: var(--color-danger-fg); }
.mw-foundations :is(p, li) > a { text-decoration: underline; text-underline-offset: 2px; }

/* Phase 2: state and focus must survive local clipping and scrolling. */
.mw-foundations :is(button, a, input, select, textarea, summary, [tabindex]) {
  scroll-margin: 4px;
  scroll-margin-block-start: 24px;
}
.mw-foundations :is([role='tablist'], .overflow-auto, .overflow-x-auto, .overflow-y-auto, .tab-strip, #mw-tabnav-strip, [data-mw-tabnav-strip]) {
  scroll-padding: 4px;
}
.mw-foundations :is(.overflow-hidden, .overflow-auto, .overflow-x-auto, .overflow-y-auto, .tab-strip, #mw-tabnav-strip, [data-mw-tabnav-strip], .mw-menu-sub, .mw-dialog-content) :focus-visible,
.mw-foundations [role='tabpanel']:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: -4px;
}
.mw-foundations :is(.overflow-auto, .overflow-x-auto, .overflow-y-auto, .mw-dialog-content) :is(button, a, input, select, textarea, summary, [tabindex]) {
  scroll-margin: 4px;
}
/* Selected blue controls need a white inner ring; focus remains distinct from selection. */
.mw-foundations :is(button, a, [role='tab']):is(.bg-action, .bg-brand, [aria-selected='true'], .is-active, .active):focus-visible {
  outline-color: var(--color-ink);
  box-shadow: inset 0 0 0 2px white;
}
.mw-foundations :is([role='tab'][aria-selected='true'], button[aria-pressed='true'], [role='button'][aria-pressed='true']) {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mw-foundations label:has(> input:is([type='radio'], [type='checkbox'])) {
  min-height: var(--spacing-control);
  min-width: var(--spacing-control);
  display: inline-flex;
  align-items: center;
}
.mw-foundations input[type='range'] { min-height: var(--spacing-control); }
.mw-foundations :is(a.mw-nav-pill, a.help-pill, a.legal-pill) { min-height: var(--spacing-control); }
.mw-foundations .mw-strip-wrap:focus-within .mw-strip-fade { opacity: 0; }

/* Vertical menus have no alternative scroll affordance; retain their scrollbar. */
.mw-foundations .mw-menu-sub { scrollbar-width: auto; }
.mw-foundations .mw-menu-sub::-webkit-scrollbar { display: block; }
/* MPG strips have no edge fades. Their local scrollbar also signals more modes. */
.mw-foundations.mpg-calculator-page .tab-strip { scrollbar-width: thin; }
.mw-foundations.mpg-calculator-page .tab-strip::-webkit-scrollbar { display: block; height: 6px; }

@media (prefers-reduced-motion: reduce) {
  html:has(> body.mw-foundations),
  .mw-foundations, .mw-foundations *, .mw-foundations *::before, .mw-foundations *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .mw-foundations :is(button, a):hover { transform: none !important; }
}