/* Expression layer, applied to page instruments. Rules in expression.css.
   Each block names the page and the script that drives it. */

/* ---- Shared controls ---------------------------------------------------- */
.ed .ex-btn { font-family:var(--font-mono); font-size:var(--ed-label); letter-spacing:.16em; text-transform:uppercase; min-width:6.5rem; padding:10px 16px; color:var(--bg-page, #111312); background:var(--ed-accent); border:1px solid var(--ed-accent); cursor:pointer; }
.ed .ex-btn[aria-pressed="true"] { color:var(--ed-accent); background:transparent; }
.ed .ex-btn:focus-visible, .ed .ex-chip:focus-visible { outline:2px solid var(--ed-ink); outline-offset:3px; }
.ed .ex-range { flex:1; width:100%; accent-color:var(--ed-accent); cursor:ew-resize; }
.ed .ex-chip { font-family:var(--font-mono); font-size:var(--ed-label); letter-spacing:.12em; text-transform:uppercase; padding:9px 14px; color:var(--ed-body); background:transparent; border:1px solid var(--ed-rule-strong); cursor:pointer; transition:color var(--ex-quick, 240ms) var(--ex-ease), border-color var(--ex-quick, 240ms) var(--ex-ease), background-color var(--ex-quick, 240ms) var(--ex-ease); }
.ed .ex-chip[aria-pressed="true"] { color:var(--bg-page, #111312); background:var(--ed-accent); border-color:var(--ed-accent); }

/* ---- /predictions, js/ex-record.js: the strip ---------------------------- */
/* Scoped: the switcher flips data-variant live, and an armed strip must not
   leave its bars at zero in the Current view, which has to match live. */
html:not([data-variant="current"]) .ed .ex-pt-armed .pt__bar { transform:scaleY(0); transform-origin:bottom; }
html:not([data-variant="current"]) .ed .ex-pt-armed .pt__bar.is-on { transform:none; transition:transform var(--ex-base, 520ms) var(--ex-ease-out); }
html:not([data-variant="current"]) .ed .ex-pt-armed .pt__bar:hover, html:not([data-variant="current"]) .ed .ex-pt-armed .pt__bar:focus-visible { filter:brightness(1.25); }
html[data-variant="current"] .ed .pt .ex-readout { display:none; }

/* ---- /predictions, js/ex-record.js: Scrub the record ---------------------- */
.ed .ex-scrub { margin:var(--space-8) 0; padding:24px; border:1px solid var(--ed-rule-strong); }
.ed .ex-scrub__head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.ed .ex-scrub__label { font-family:var(--font-mono); font-size:var(--ed-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ed-quiet); }
.ed .ex-scrub__year { font-family:var(--font-display); font-size:var(--ed-numeral); line-height:.9; color:var(--ed-accent); font-variant-numeric:tabular-nums; }
.ed .ex-scrub__sum { margin:var(--space-3) 0 var(--space-6); font-size:var(--ed-lede); color:var(--ed-ink); }
.ed .ex-scrub__tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(4.25rem, 1fr)); gap:6px; }
.ed .ex-tile { display:flex; align-items:center; justify-content:center; height:2.6rem; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-decoration:none; color:var(--ed-quiet); border:1px dashed var(--ed-rule-strong); transition:color 220ms var(--ex-ease), background-color 220ms var(--ex-ease), border-color 220ms var(--ex-ease), transform 260ms var(--ex-ease-out); transform:scale(.92); }
.ed .ex-tile.is-due { border-style:solid; border-color:var(--ed-accent); color:var(--ed-ink); transform:none; }
.ed .ex-tile--correct.is-due { background:var(--ed-accent); color:var(--bg-page, #111312); }
.ed .ex-tile--partly.is-due { background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--ed-accent) 55%, transparent) 0 3px, transparent 3px 7px); }
.ed .ex-tile--wrong.is-due { background:var(--mo-warning); border-color:var(--mo-warning); color:var(--bg-page, #111312); }
.ed .ex-tile--open { }
.ed .ex-tile:hover, .ed .ex-tile:focus-visible { outline:2px solid var(--ed-ink); outline-offset:2px; }
.ed .ex-scrub__controls { display:flex; align-items:center; gap:14px; margin-top:var(--space-6); }
.ed .ex-scrub__note { margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--ed-quiet); }

/* ---- /manufacturing/economics: Where the money goes (static since Model A retired) -- */
.ed .ex-model { margin:var(--space-8) 0; padding:24px; border:1px solid var(--ed-rule-strong); }
.ed .ex-model__head { display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap; margin-bottom:var(--space-4); }
.ed .ex-model__label { font-family:var(--font-display); font-size:var(--ed-h3); color:var(--ed-ink); }
.ed .ex-model__stamp { font-family:var(--font-mono); font-size:var(--ed-label); letter-spacing:.14em; text-transform:uppercase; color:var(--mo-warning); }
.ed .ex-model__switch { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-6); }
.ed .ex-model__stage { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:var(--space-6); }
.ed .ex-model__col { display:flex; flex-direction:column; gap:8px; }
.ed .ex-model__coltitle { font-family:var(--font-mono); font-size:var(--ed-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ed-quiet); margin-bottom:2px; }
.ed .ex-line { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--ed-rule-strong); transition:opacity 260ms var(--ex-ease), border-color 260ms var(--ex-ease), background-color 260ms var(--ex-ease), box-shadow 260ms var(--ex-ease); }
.ed .ex-line__name { color:var(--ed-ink); font-weight:500; }
.ed .ex-line__tag { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ed-quiet); }
.ed .ex-line.is-earn { border-color:var(--ed-accent); background:color-mix(in srgb, var(--ed-accent) 12%, transparent); box-shadow:inset 3px 0 0 var(--ed-accent); }
.ed .ex-line.is-earn .ex-line__tag { color:var(--ed-accent); }
.ed .ex-line.is-cost { }
.ed .ex-line.is-off { opacity:.4; border-style:dashed; }
.ed .ex-line.is-swap { animation:ex-swap 380ms var(--ex-ease-out) both; animation-delay:calc(var(--ex-i, 0) * 40ms); }
@keyframes ex-swap { from { transform:translateX(-8px); } to { transform:none; } }
.ed .ex-model--armed .ex-line { opacity:0; transform:translateY(10px); }
.ed .ex-model--armed.ex-in .ex-line { opacity:1; transform:none; transition:opacity 420ms var(--ex-ease-out), transform 520ms var(--ex-ease-out); }
.ed .ex-model--armed.ex-in .ex-line.is-off { opacity:.4; }
.ed .ex-model__tally { margin:var(--space-6) 0 0; font-size:var(--ed-lede); color:var(--ed-ink); }

/* ---- Homepage status plate: the stage track, CSS only -------------------- */
.ed .ex-hero-plate .ex-port { max-width: none; margin: 1.1rem 0 1.2rem; }
.ed .ex-plate-link { color: var(--ed-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms var(--ed-ease); }
.ed .ex-plate-link:hover, .ed .ex-plate-link:focus-visible { border-bottom-color: currentColor; }
.ed .ex-hero-plate .ex-track { margin: 0 0 1rem; }
.ed .ex-track__v { display: block; margin-top: 2px; font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ed-ink); }
.ed .ex-track__stop--now .ex-track__v { color: var(--ed-ink); }
.ed .ex-track { position:relative; display:grid; grid-template-columns:repeat(3, 1fr); margin:var(--space-4) 0 var(--space-6); padding-top:6px; }
.ed .ex-track__rail { position:absolute; left:6px; right:calc(33.33% - 6px); top:11px; height:1px; background:repeating-linear-gradient(90deg, var(--ed-rule-strong) 0 4px, transparent 4px 8px); transform-origin:left; animation:ex-draw 900ms var(--ex-ease-out) 300ms both; }
.ed .ex-track__stop { position:relative; display:flex; flex-direction:column; gap:8px; font-family:var(--font-mono); font-size:var(--ed-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ed-quiet); }
.ed .ex-track__dot { width:12px; height:12px; border-radius:50%; border:1px solid var(--ed-rule-strong); background:var(--bg-page, #111312); transition:background-color 220ms var(--ex-ease), border-color 220ms var(--ex-ease); }
.ed .ex-track__stop--now { color:var(--ed-accent); }
.ed .ex-track__stop--now .ex-track__dot { background:var(--ed-accent); border-color:var(--ed-accent); animation:ex-ping 900ms var(--ex-ease-out) 900ms both; }
@keyframes ex-draw { from { transform:scaleX(0); } to { transform:none; } }
@keyframes ex-ping { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ed-accent) 60%, transparent); } 100% { box-shadow:0 0 0 14px transparent; } }
.ed .ed-plate-data--status:has(.ed-kpi__row:nth-child(1):hover) .ex-track__stop--1,
.ed .ed-plate-data--status:has(.ed-kpi__row:nth-child(2):hover) .ex-track__stop--2,
.ed .ed-plate-data--status:has(.ed-kpi__row:nth-child(3):hover) .ex-track__stop--3 { color:var(--ed-ink); }
.ed .ed-plate-data--status:has(.ed-kpi__row:nth-child(2):hover) .ex-track__stop--2 .ex-track__dot,
.ed .ed-plate-data--status:has(.ed-kpi__row:nth-child(3):hover) .ex-track__stop--3 .ex-track__dot { border-color:var(--ed-accent); }

/* ---- Homepage 03, js/ex-mi.js: the index fills axis by axis -------------- */
.ed .ex-mi-armed tbody tr { transition:opacity 260ms var(--ex-ease), background-color 260ms var(--ex-ease); opacity:.5; }
.ed .ex-mi-armed tbody tr.is-adding { opacity:1; background:color-mix(in srgb, var(--ed-band-accent, var(--ed-accent)) 16%, transparent); }
.ed .ex-mi-armed tbody tr.is-zero { opacity:1; background:color-mix(in srgb, var(--mo-warning) 18%, transparent); }
.ed .ex-mi-armed tbody tr.is-added { opacity:1; }
.ed .ex-mi-armed .ed-mi__num { font-variant-numeric:tabular-nums; }

@media (max-width: 640px) {
  .ed .ex-model__stage { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-variant="current"]) .ed .ex-pt-armed .pt__bar, .ed .ex-model--armed .ex-line { opacity:1; transform:none; }
  .ed .ex-line.is-swap, .ed .ex-track__rail, .ed .ex-track__dot { animation:none; }
}
@media (max-width: 959px) {
  .ed .ex-hero-plate { margin-top: 1.75rem; }
}

/* ---- Homepage: the opening panel's foot link, and folded detail ------------ */
.ed .ex-plate-foot { margin: .8rem 0 0; }
.ed .ex-more { margin-top: .9rem; }
.ed .ex-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .55rem; }
.ed .ex-more > summary::-webkit-details-marker { display: none; }
.ed .ex-more > summary::before { content: "+"; font-family: var(--font-mono); color: var(--ed-accent); }
.ed .ex-more[open] > summary::before { content: "\2212"; }
.ed .ex-more[open] > summary { margin-bottom: .8rem; }
.ed .ex-more--band > summary::before { color: var(--ed-band-accent, var(--ed-accent)); }
.ed .ex-more > summary:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 3px; }

/* ---- /onboard: the open invitations, grouped (src/lib/open-invitations.mjs) */
.ed .invite-group { margin-top: var(--space-8); }
.ed .invite-group:first-of-type { margin-top: 0; }
.ed .invite-group > .kicker { margin: 0 0 var(--space-3); }

/* ---- /onboard/<id>: one open invitation's brief */
.ed .invite-intro { margin: var(--space-4) 0 0; max-width: 40rem; font-size: var(--text-sm); color: var(--ed-quiet); }
.ed .invite-actions { margin: var(--space-6) 0 0; }
.ed .invite-prose { max-width: 44rem; margin: 0; font-size: var(--ed-lede); color: var(--ed-ink); }
.ed .invite-list { max-width: 44rem; margin: 0; padding: 0; list-style: none; counter-reset: inv; }
.ed .invite-list li { padding: .85rem 0 .85rem 1.6rem; border-top: 1px solid var(--ed-rule); position: relative; color: var(--ed-body); }
.ed .invite-list li:last-child { border-bottom: 1px solid var(--ed-rule); }
.ed .invite-list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: .6rem; height: 1px; background: var(--ed-accent); }
.ed .invite-list--numbered li { counter-increment: inv; }
.ed .invite-list--numbered li::before { content: counter(inv, decimal-leading-zero); width: auto; height: auto; background: none; top: .95rem; font-family: var(--font-mono); font-size: var(--ed-label); letter-spacing: .1em; color: var(--ed-accent); }
.ed .invite-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.ed .invite-links a { font-family: var(--font-mono); font-size: var(--ed-label); letter-spacing: .06em; color: var(--ed-accent); }