/* How we clean FAERS (rules/page.js, story.js, homes.js): only what the stylesheets before this one
   do not draw, from the page's tokens alone, in light and dark. After responsive.css, so an opened
   rule keeps its own spacing at every width. SPDX-License-Identifier: Apache-2.0 */

.oa-m-page { flex-shrink: 0; }
.oa-m-line { display: block; margin-bottom: var(--space-8); line-height: 1.6; }
.oa-m-cite-menu { width: min(420px, calc(100vw - 32px)); }
.oa-m-cite { margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); color: var(--ink); font-size: var(--text-md); line-height: var(--leading); }
.oa-m-cite-menu .menu-footnote a { color: var(--link); }


/* a level: its number, its claim and one line, then its drawing */
.oa-m-level { scroll-margin-top: 72px; }
.oa-m-level-head { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-6); align-items: start; margin: var(--space-6) 0 var(--space-9); }
.oa-m-level-head h2 { font-size: var(--text-lg, 18px); }
.oa-m-level-head .oa-claim-sub { margin-top: var(--space-1); }

/* how one level leads into the next */
.oa-m-flow { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: var(--space-6) 0; color: var(--accent-deep); }
.oa-m-flow-line { width: 2px; height: 32px; background: var(--accent-line); }
.oa-m-flow-words { padding: var(--space-2) var(--space-6); border: var(--hairline) solid var(--accent-line); border-radius: var(--radius-pill); background: var(--accent-soft); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.oa-m-flow .icon, .oa-m-flow .icon svg { width: 18px; height: 18px; }

/* 1. the funnel: each band as wide as what is left, centred on the page */
.oa-m-funnel { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.oa-m-band-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; gap: var(--space-8); align-items: center; }
.oa-m-band-row .oa-m-band { grid-column: 2; }
.oa-m-band-row .oa-m-out { grid-column: 3; }
.oa-m-band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 76px; padding: var(--space-4); border: 0; background: var(--accent-soft); color: var(--accent-deep); font: inherit; cursor: pointer; transition: background var(--motion-fast); }
.oa-m-band:hover { background: color-mix(in srgb, var(--accent) 22%, var(--accent-soft)); }
.oa-m-band-row[data-last="true"] .oa-m-band { background: var(--accent); color: var(--on-accent); }
.oa-m-band-num { font-size: var(--text-brand); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; line-height: 1.1; }
.oa-m-band-unit { font-size: var(--text-sm); }
.oa-m-band:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.oa-m-out { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.4; }
.oa-m-out strong { color: var(--ink); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.oa-m-out-rules { display: block; margin-top: var(--space-1); padding: 0; border: 0; background: none; font: inherit; text-align: inherit; cursor: pointer; }
.oa-m-out-rules:empty { display: none; }
.oa-m-out-rules:hover .oa-m-rules-mark { color: var(--accent-deep); }

/* 2. read one way: four tiles, FDA's value over ours, the change in one colour, worded on the bar */
.oa-m-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.oa-m-tile { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-7); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-fast); }
.oa-m-tile:hover { border-color: var(--accent-line); }
.oa-m-tile:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.oa-m-kind { margin: 0; }
.oa-m-change { margin-top: auto; color: var(--ink); font-size: var(--text-sm); line-height: 1.4; }
.oa-m-ba { display: flex; flex-direction: column; gap: var(--space-2); }
.oa-m-ba-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
.oa-m-ba-who { align-self: center; color: var(--ink-faint); font-size: var(--text-xs); }
.oa-m-ba-bar { display: flex; gap: 2px; min-width: 0; }
.oa-m-seg { min-width: 0; padding: var(--space-2) var(--space-3); border-radius: 3px; background: var(--mist); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.25; overflow-wrap: anywhere; }
.oa-m-seg b { color: var(--ink); font-weight: var(--weight-medium); white-space: nowrap; }
.oa-m-seg-changed { background: var(--accent); color: var(--on-accent); }
.oa-m-seg-changed b { color: var(--on-accent); }
.oa-m-two { display: flex; flex-direction: column; gap: 2px; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.4; }
.oa-m-two b { color: var(--ink); font-size: var(--text-base); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.oa-m-two-to b { color: var(--accent-deep); }

/* every card: claim, how to read it, the chart, three short lines */
.oa-m-title { margin: 0; font-size: var(--text-base); line-height: 1.35; }
.oa-m-read { margin: calc(-1 * var(--space-2)) 0 var(--space-2); color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.4; }
.oa-m-card { gap: var(--space-4); }
.oa-m-lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; padding-top: var(--space-4); border-top: var(--hairline) solid var(--line); font-size: var(--text-sm); line-height: 1.4; }
.oa-m-lines dt { color: var(--ink-faint); font-weight: var(--weight-medium); }
.oa-m-lines dd { margin: 0; color: var(--ink-soft); }
.oa-m-did { display: inline; color: var(--link); text-decoration: none; }
.oa-m-did:hover { text-decoration: underline; }

/* the small charts */
.oa-m-mini { display: flex; flex-direction: column; gap: var(--space-3); }
.oa-m-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.oa-m-lab { overflow: hidden; color: var(--ink-faint); font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis; }
.oa-m-num { color: var(--ink-soft); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.oa-m-bar { display: flex; gap: 1px; height: 14px; overflow: hidden; border-radius: 3px; }
.oa-m-bar i { display: block; min-width: 2px; height: 100%; }
.oa-m-fill { background: var(--accent); }
.oa-m-card .oa-m-row { grid-template-columns: 160px minmax(0, 1fr) auto; }

/* 3. the questions as a choice; one path below, top to bottom */
.oa-m-picker { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-4); }
.oa-m-pick { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink-soft); font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.35; text-align: left; cursor: pointer; transition: border-color var(--motion-fast); }
.oa-m-pick:hover { border-color: var(--accent-line); color: var(--ink); }
.oa-m-pick:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.oa-m-pick .oa-step-n { flex: 0 0 auto; width: 26px; height: 26px; font-size: var(--text-xs); }
.oa-m-pick[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); color: var(--accent-deep); }
.oa-m-pick[aria-selected="true"] .oa-step-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.oa-m-path { display: flex; flex-direction: column; max-width: 820px; margin: var(--space-9) auto 0; }
.oa-m-path-clean { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-4); }
.oa-m-box { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-fast); }
.oa-m-box:hover { border-color: var(--accent-line); }
.oa-m-box:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.oa-m-box[data-step="clean"] { background: var(--accent-soft); border-color: var(--accent-line); }
.oa-m-box-name { font-size: var(--text-md); font-weight: var(--weight-medium); }
.oa-m-count { color: var(--ink-soft); font-size: var(--text-sm); }
.oa-m-count b { color: var(--ink); font-size: var(--text-base); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.oa-m-down { display: flex; justify-content: center; height: 22px; color: var(--accent); }
.oa-m-down .icon, .oa-m-down .icon svg { width: 18px; height: 18px; }
.oa-m-answer { gap: var(--space-3); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.oa-m-answer-title { font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.35; }
.oa-m-answer .oa-m-read { margin: 0; }
.oa-m-answer .oa-m-row { grid-template-columns: 220px minmax(0, 1fr) auto; }
.oa-m-answer .oa-m-bar { height: 18px; }
.oa-m-note { color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* rules in the story: the quiet line on a closed box, an opened box */
.oa-m-rules-mark { display: block; margin-top: var(--space-1); color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.4; }
.oa-m-dialog { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 48px); }
.oa-m-dialog .dialog-body { gap: var(--space-8); overflow-y: auto; }
.oa-m-rules-group { display: flex; flex-direction: column; gap: var(--space-3); }
.oa-m-rules-group .oa-card-sub { margin: 0; }
.oa-m-rules-group .oa-rule-group { margin: 0; }
.oa-m-under { color: var(--ink-faint); font-size: var(--text-sm); line-height: 1.4; }
.oa-m-under strong { color: var(--ink-soft); font-weight: var(--weight-medium); }
.oa-m-foot { margin-top: var(--space-11); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); align-items: center; }
.oa-m-page > #limits { margin-top: var(--space-12); }
/* the Rebuild bar rides at the foot of an open box, as it does at the foot of the page */
.oa-m-dialog > .oa-rebuild-slot { position: static; margin: 0 var(--space-6) var(--space-6); }

/* an opened rule, in three parts: the decision, the why, a quiet foot */
.oa-rule-body.oa-m-rule-body { display: flex; flex-direction: column; gap: var(--space-8); max-width: 900px; }
.oa-m-dialog .oa-rule-body.oa-m-rule-body { padding: var(--space-2) var(--space-6) var(--space-8) calc(var(--space-6) + 18px + var(--space-5)); }
.oa-m-decide { display: flex; flex-direction: column; gap: var(--space-2); }
.oa-m-decide:empty { display: none; }
.oa-m-state { margin: 0; color: var(--ink); font-size: var(--text-row); line-height: var(--leading); }
.oa-m-state strong { font-weight: var(--weight-strong); }
.oa-m-decide .oa-rule-value { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding: var(--space-3) 0; }
.oa-m-decide .oa-rule-value:last-child { border-bottom: 0; }
.oa-m-decide .oa-rule-value-label { flex: 1 1 260px; }
.oa-m-decide .oa-rule-value-set { min-height: 0; }
.oa-m-decide .oa-rule-value-problem { flex: 1 1 100%; }
.oa-m-why { display: flex; flex-direction: column; gap: var(--space-7); }
.oa-m-why > .oa-m-lines { margin: 0; padding-top: 0; border-top: 0; }
.oa-m-why .oa-rule-plain { max-width: 68ch; }
.oa-m-why-above { margin: 0; color: var(--ink-soft); font-size: var(--text-md); }
.oa-m-rule-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.oa-m-moved { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-7); margin: 0; font-size: var(--text-sm); }
.oa-m-moved div { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline; min-width: 0; }
.oa-m-moved dt { color: var(--ink-faint); }
.oa-m-moved dd { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.oa-m-moved dd .oa-fda { display: block; margin: 0; }
.oa-m-rule-foot .oa-rule-links { margin: 0; }

@media (min-width: 768px) {
  dialog.oa-m-dialog { width: min(920px, calc(100vw - 32px)); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .oa-m-band-row { grid-template-columns: 180px minmax(0, 1fr) 180px; gap: var(--space-6); }
  .oa-m-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .oa-m-band-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .oa-m-band-row .oa-m-band, .oa-m-band-row .oa-m-out { grid-column: 1; }
  .oa-m-band { min-height: 64px; }
  .oa-m-out { margin-bottom: var(--space-3); text-align: center; }
  .oa-m-tiles, .oa-m-picker, .oa-m-path-clean { grid-template-columns: minmax(0, 1fr); }
  .oa-m-lines { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .oa-m-lines dd { margin-bottom: var(--space-3); }
  .oa-m-card .oa-m-row, .oa-m-answer .oa-m-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .oa-m-card .oa-m-lab, .oa-m-answer .oa-m-lab { grid-column: 1 / -1; color: var(--ink-soft); white-space: normal; }
  .oa-m-dialog .oa-rule-body.oa-m-rule-body { padding-left: var(--space-5); padding-right: var(--space-5); }
}