/* Enrollment order (#plan/order), spec/page-enrollment-order.md. References: L106 grouped list, SB253 severity
   counts and method footer, V132 fact strip and disclosure rows, V74 checklist state in words, ST48 the one
   requirement card, FL47 the order numeral column. Tokens only (spec/system.md); no new colours. */
.eo { max-width: 880px; container-type: inline-size; }
.eo-back { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; margin: 0 0 var(--s-2) -6px; padding: 0 6px; border-radius: var(--r-control); font: var(--t-label); color: var(--ink-2); text-decoration: none; }
.eo-back:hover { background: var(--surface-2); color: var(--ink); }
.eo-back .icon { width: 16px; height: 16px; }
.eo .skel { max-width: 100%; }
.eo-head { display: block; margin-bottom: var(--s-6); }
.eo-head .page-sub { margin-top: var(--s-1); }
.eo-head h1 { margin: 0; }

/* fact strip (V132): label over value, wide gaps, no dividers */
.eo-facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); margin: 0 0 var(--s-6); }
.eo-fact { min-width: 0; }
.eo-fact dt { margin: 0 0 2px; font: var(--t-label); font-weight: 400; color: var(--muted); }
.eo-fact dd { display: flex; align-items: center; gap: 6px; margin: 0; font: var(--t-body); color: var(--ink); white-space: nowrap; }
.eo-fic, .eo-gic, .eo-ric { display: inline-flex; flex: none; }
.eo-fic .icon, .eo-gic .icon { width: 16px; height: 16px; }
.eo-t-positive { color: var(--positive); }
.eo-t-warning { color: var(--warning); }
.eo-t-muted { color: var(--muted); }

/* the one appointment card (ST48), said once for the page */
.eo-gate { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.eo-gate--warn { background: var(--warning-subtle); }
.eo-gate p { flex: 1; margin: 0; font: var(--t-meta); color: var(--ink); }
.eo-gate .btn { flex: none; }
.eo-gate-ic { display: inline-flex; flex: none; color: var(--muted); }
.eo-gate--warn .eo-gate-ic { color: var(--warning); }
.eo-gate-ic .icon { width: 18px; height: 18px; }
/* W20: the board's own gaps, said once above the list, and the summary line in place of three counts */
.eo-board { align-items: flex-start; }
.eo-board-t { flex: 1; min-width: 0; }
.eo-board-t p { margin: 0; font: var(--t-meta); color: var(--ink); }
.eo-board-t p + p { margin-top: var(--s-1, 4px); }
.eo-summary { flex: 1 1 320px; }
.eo-fact.eo-summary dd { white-space: normal; align-items: flex-start; }
.eo-method { max-width: var(--w-read); margin: 0 0 var(--s-6); font: var(--t-meta); color: var(--muted); }

/* groups (L106): a quiet header band with icon, name and count */
.eo-group { margin: 0 0 var(--s-8); }
.eo-ghead { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--r-control); }
.eo-ghead h2 { margin: 0; font: var(--t-item); }
.eo-gn { font: var(--t-meta); color: var(--muted); }
.eo-gnote { max-width: var(--w-read); margin: var(--s-2) var(--s-3) 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.eo-list { margin: var(--s-2) 0 0; padding: 0; list-style: none; }

/* rows (FL47 numeral column, SB253 problem then affected thing) */
.eo-group:has(+ .eo-foot) .eo-row:last-child { border-bottom: 0; } /* the footer rule is the one hairline there */
.eo-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: var(--s-3); padding: var(--s-4) var(--s-3) var(--s-3); border-bottom: 1px solid var(--line); }
.eo-n { font: 600 22px/28px var(--font-ui); color: var(--ink); text-align: left; }
.eo-body { min-width: 0; }
.eo-body > p { margin: 0; }
.eo-l1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); }
.eo-code { margin: 0; font: var(--t-item); line-height: 28px; white-space: nowrap; }
.eo-parts { font: var(--t-meta); color: var(--ink-2); }
.eo-when { margin: 2px 0 0 !important; font: var(--t-meta); color: var(--muted); overflow-wrap: anywhere; }
.eo-why { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.eo-why li { display: flex; align-items: flex-start; gap: var(--s-2); font: var(--t-meta); color: var(--ink); overflow-wrap: anywhere; }
.eo-ric .icon { width: 14px; height: 14px; margin-top: 3px; }
.eo-fix { white-space: nowrap; font-weight: 500; }
.eo-ok { margin: var(--s-2) 0 0 !important; font: var(--t-meta); color: var(--ink); }
.eo-read { margin: var(--s-2) 0 0 !important; font: var(--t-label); font-weight: 400; color: var(--muted); }
.eo-review { align-self: start; display: inline-flex; align-items: center; min-height: 28px; font: var(--t-label); white-space: nowrap; }

/* disclosure (V132 chevron rows). Motion: sheet preset for the panel, popover preset for the chevron. */
.eo-more-btn { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; margin: var(--s-1) 0 0 -6px; padding: 0 6px; border: 0; background: transparent; border-radius: var(--r-control); font: var(--t-label); color: var(--accent); cursor: pointer; }
.eo-more-btn:hover { background: var(--surface-2); }
.eo-more-btn .icon { width: 14px; height: 14px; transition: transform var(--eo-pop-ms, var(--dm-popover-ms, 368ms)) var(--eo-pop-ease, var(--dm-popover-ease, linear)); }
.eo-more-btn[aria-expanded="true"] .icon { transform: rotate(90deg); }
.eo-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--eo-sheet-ms, var(--dm-sheet-ms, 735ms)) var(--eo-sheet-ease, var(--dm-sheet-ease, linear)); }
.eo-more[data-open="true"] { grid-template-rows: 1fr; }
.eo-more-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--eo-sheet-ms, 735ms); }
.eo-more[data-open="true"] .eo-more-in { visibility: visible; transition-delay: 0s; }
.eo-more-pad { padding: var(--s-2) 0 var(--s-1); }
.eo-part { margin: 0 0 var(--s-3); }
.eo-part h4 { margin: 0 0 var(--s-1); font: var(--t-label); color: var(--ink); }
.eo-part h4 .t-muted { font-weight: 400; }
.eo-reads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s-6); margin: 0; }
.eo-reads > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 4px 0; border-bottom: 1px solid var(--line); font: var(--t-label); font-weight: 400; }
.eo-reads dt { color: var(--muted); }
.eo-reads dd { margin: 0; color: var(--ink); text-align: right; }
.eo-alt-lead { margin: var(--s-2) 0 var(--s-1); font: var(--t-meta); color: var(--ink); }
.eo-alts { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.eo-alts li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); font: var(--t-meta); }
.eo-alts a { font-weight: 500; }
.eo-cover { margin: var(--s-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* footer (SB253 "How are these suggestions generated?"): two short columns */
.eo-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); margin-top: var(--s-2); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.eo-foot h2 { margin: 0 0 var(--s-1); font: var(--t-item); }
.eo-foot p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.eo-foot-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.eo-foot-act .btn .icon { width: 14px; height: 14px; }

/* no pass and signed out: labs.js freeHTML's offer block */
.eo-offer { padding: var(--s-4) var(--s-6) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.eo-offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.eo-offer-t h2 { margin: 0; font: var(--t-h2); color: var(--ink); max-width: 520px; }
.eo-offer-t p { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.eo-offer-act { flex: none; display: flex; gap: var(--s-2); padding-top: 2px; }
.eo-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; list-style: none; border-top: 1px solid var(--line); }
.eo-checks li { display: flex; align-items: flex-start; gap: var(--s-2); font: var(--t-meta); color: var(--ink); }
.eo-checks .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.eo-offer-note { max-width: 600px; margin: var(--s-4) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.eo-empty { max-width: var(--w-read); }

/* 390 and 320 (spec 3): facts in two columns, Review section under the reasons, card button full width */
@container (max-width: 600px) {
  .eo-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
  .eo-fact dd { white-space: normal; flex-wrap: wrap; }
  .eo-fact dd.eo-appt { display: block; }
  .eo-summary { grid-column: 1 / -1; }
  .eo-appt .eo-rel { display: block; } /* the relative part sits under the time as one value, no row gap */
  .eo-back { min-height: 44px; }
  .eo-gate { flex-wrap: wrap; }
  .eo-gate p { flex-basis: calc(100% - 30px); }
  .eo-gate .btn { flex-basis: 100%; justify-content: center; min-height: 44px; }
  .eo-row { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-2); padding-left: var(--s-1); padding-right: 0; }
  .eo-n { font-size: 20px; }
  .eo-review { grid-column: 2; min-height: 44px; }
  .eo-more-btn { min-height: 44px; }
  .eo-reads { grid-template-columns: minmax(0, 1fr); }
  .eo-foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .eo-offer { padding: var(--s-4); }
  .eo-offer-head { flex-direction: column; gap: var(--s-3); }
  .eo-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .eo-more, .eo-more-in, .eo-more-btn .icon { transition: none; }
}