/* Action Terminal: one invoice, two worlds. Loaded only on /terminal without ?console. Overrides the console styling
   app.css gives body[data-view="terminal"], hides the side menu, and takes the page. One family, four sizes, ink + blue
   + red, and green only on the one action. */
body[data-view="terminal"] { background: #fff; color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.45; }
body[data-view="terminal"] .shell, body[data-view="terminal"] .powered-badge { display: none; }
body[data-view="terminal"] .footer { background: var(--panel); border-top-color: var(--line); color: var(--ink-2); }
body[data-view="terminal"] .footer a, body[data-view="terminal"] .footer .link { color: var(--blue); }
body[data-view="terminal"] a { color: var(--blue); text-underline-offset: .15em; }
body[data-view="terminal"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 6px var(--ink); }
body[data-view="terminal"] ::selection { background: var(--focus); color: var(--ink); }
.sc-page { --w: 1200px; --pad: 32px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* top: one line, the switch, the one action */
.sc-worlds { display: flex; justify-content: center; gap: 0; padding: 28px var(--pad) 0; }
.sc-worlds .sc-switch__b { font-size: 19px; padding: 12px 28px; }
.sc-top { max-width: var(--w); margin: 0 auto; padding: 30px var(--pad) 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; }
.sc-title { margin: 0; font-size: 36px; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.sc-worlds { position: relative; }
.sc-worlds::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 50%; margin-top: 14px; border-top: 1px solid var(--line-soft); z-index: -1; }
.sc-switch__b:first-of-type { border-radius: 999px 0 0 999px; }
.sc-switch__b:last-of-type { border-radius: 0 999px 999px 0; }
.sc-switch__b { appearance: none; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; padding: 10px 22px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; position: relative; }
.sc-switch__b + .sc-switch__b { margin-left: -2px; }
.sc-switch__b:hover { color: var(--ink); }
.sc-switch__b[aria-selected="true"] { color: #fff; background: var(--red); border-color: var(--red); z-index: 1; }
.sc-switch__b[aria-selected="true"]:nth-child(2) { background: var(--blue); border-color: var(--blue); }
.sc-run { display: flex; align-items: center; gap: 16px; }
.sc-run__btn { appearance: none; display: inline-flex; align-items: center; gap: 10px; border: 0; background: var(--blue); color: #fff; font: inherit; font-size: 19px; font-weight: 700; padding: 13px 22px; box-shadow: 0 2px 0 var(--blue-dark); cursor: pointer; }
.sc-run__btn:hover { background: #0c585f; }
.sc-run__btn:active { transform: translateY(2px); box-shadow: none; }
.sc-skip { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 16px; color: var(--ink-2); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.sc-skip:hover { color: var(--ink); }

/* stage: three columns, generous space, no boxes around boxes */
.sc { max-width: var(--w); margin: 0 auto; padding: 28px var(--pad) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.sc-col { min-width: 0; }
.sc-h { margin: 0 0 14px; font-size: 19px; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }

/* reveal primitive: one ease, already visible by default for reduced motion */
.agent, .agent__facts > div, .agent__line, .bank, .pay__cop, .pay__done, .stamp, .close, .pp, .chk, .verdict, .conseq li, .flag, .bank__ask { opacity: 0; transform: translateY(6px); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
.is-on:not(.inv) { opacity: 1 !important; transform: none !important; }

/* the invoice: a PDF page in a viewer. Fixed width like a page; in the path it is scaled down with a transform,
   so the zoom-out is the same document getting smaller, not a reflow. */
.inv-wrap { position: relative; }
.inv { position: relative; width: 640px; margin: 0 auto; transform-origin: top left; background: #525659; padding: 0 0 28px; opacity: 0; transition: opacity .5s cubic-bezier(.16, 1, .3, 1); }
.inv.is-on { opacity: 1; }
.sc-page[data-stage="path"] .inv { margin: 0; }
.pdf__bar { display: flex; justify-content: space-between; padding: 8px 14px; background: #323639; color: #d8d8d8; font-size: 13px; }
.sheet { width: 584px; min-height: 780px; margin: 22px auto 0; background: #fff; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); padding: 44px 48px 28px; font-size: 13px; line-height: 1.45; color: var(--ink); display: flex; flex-direction: column; }
.sheet table { border-collapse: collapse; }
.sheet td, .sheet th { padding: 3px 0; vertical-align: top; }
.sheet__head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 34px; }
.sheet__co { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.sheet__addr { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.sheet__inv { text-align: right; flex: 0 0 auto; }
.sheet__title { font-size: 26px; font-weight: 700; letter-spacing: .06em; line-height: 1; margin-bottom: 10px; }
.sheet__inv table { margin-left: auto; font-size: 12.5px; }
.sheet__inv td { white-space: nowrap; padding: 2px 0; }
.sheet__inv td:first-child { color: var(--ink-2); padding-right: 18px; text-align: left; }
.sheet__inv td:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.sheet__to { margin-bottom: 28px; font-size: 13px; }
.sheet__to span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 3px; }
.sheet__lines { width: 100%; margin-bottom: 10px; }
.sheet__lines th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; }
.sheet__lines th:not(:first-child), .sheet__lines td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px; }
.sheet__lines tbody td { border-bottom: 1px solid var(--line-soft); padding: 8px 0; }
.sheet__totals { margin: 0 0 30px auto; min-width: 220px; }
.sheet__totals td { padding: 5px 0; color: var(--ink-2); }
.sheet__totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); padding-left: 28px; }
.sheet__total td { font-weight: 700; color: var(--ink) !important; font-size: 15px; border-top: 1.5px solid var(--ink); padding-top: 7px !important; }
.sheet__pay { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; }
.sheet__notice { margin: 0 0 12px; padding: 10px 12px; background: var(--amber-soft); color: var(--amber-ink); font-size: 12.5px; position: relative; transform-origin: left center; transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s; }
.sheet__notice.is-spot { transform: scale(1.4); z-index: 2; box-shadow: 0 14px 30px -10px rgba(11,12,12,.45), 0 0 0 2px var(--amber); background: #fff3e6; }
.sc-page[data-stage="path"] .sheet__notice { transition: none; }
.sheet__notice b { color: var(--ink); }
.sheet__pay table td:first-child { color: var(--ink-2); padding-right: 18px; }
.sheet__pay table td:last-child { font-variant-numeric: tabular-nums; }
.sheet__hidden { margin: 14px 0 0; padding: 6px 8px; font-size: 12.5px; color: #fff; background: #fff; opacity: 1; transform: none; transition: background .6s, color .6s; }
.sheet__hidden.is-on { color: var(--ink); background: var(--panel); }
.sheet__foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-2); }
.flag { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--red); }
.flag--hidden { color: var(--ink); }
.inv__scan { position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--blue); opacity: 0; pointer-events: none; }
.inv__scan.is-scan { animation: scan 1.5s cubic-bezier(.4, 0, .6, 1) 1 both; }
@keyframes scan { 0% { top: -4px; opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* two stages: the document alone, then the path */
.sc-page[data-stage="doc"] .sc { grid-template-columns: minmax(0, 1fr); }
.sc-page[data-stage="doc"] .sc-col--doc .sc-h { display: none; }
.sc-page[data-stage="doc"] .sc-col:not(.sc-col--doc) { display: none; }
.sc-page[data-stage="doc"] .inv { transform: none !important; overflow: visible; }
.sc-page[data-stage="doc"] .sc-title { }
.sc-page[data-stage="path"] .inv.is-zoom { transition: transform .8s cubic-bezier(.16, 1, .3, 1); }

/* the agent: text, not a widget */
.agent { font-size: 16px; }
.agent__who { margin: 0 0 12px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.agent__who span { font-weight: 400; color: var(--ink-2); }
.agent__facts { margin: 0 0 12px; }
.agent__facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.agent__facts dt { color: var(--ink-2); }
.agent__facts dd { margin: 0; }
.agent__acct dd { color: var(--red-dark); font-weight: 700; }
.agent__line { margin: 0 0 12px; }
.agent__line--last { padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* the bank */
.bank { position: relative; background: var(--panel); padding: 20px 22px 22px; }
.pay { display: grid; gap: 12px; font-size: 15px; }
.pay label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.pay input { font: inherit; font-size: 17px; padding: 8px 10px; border: 2px solid var(--ink); background: #fff; min-width: 0; caret-color: var(--blue); }
.pay input.is-type { outline: 3px solid var(--focus); outline-offset: 0; }
.pay__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay__done { margin: 14px 0 0; font-size: 16px; }
.stamp { display: block; margin: 14px 0 0; padding: 0; border: 0; text-transform: none; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--red); transform: translateY(6px) scale(1.12); }
.stamp.is-on { transition: opacity .3s, transform .45s cubic-bezier(.16, 1, .3, 1); }
.close { margin: 18px 0 0; font-size: 24px; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.close--after { color: var(--green-dark); }

/* the bank's desk: incoming, the call, the answer */
.bank__in, .bank__call, .bank__back { margin: 0 0 12px; opacity: 0; transform: translateY(6px); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
.bank__in b, .bank__call b, .bank__back b { display: block; }
.bank__call { padding: 10px 12px; background: #fff; border: 1px solid var(--line); }
.bank__call .num { color: var(--blue-dark); }
.pay { opacity: 0; transition: opacity .4s; } .pay.is-on { opacity: 1; }
.chk--bank { margin-top: 14px; }
.chk--bank li b { color: var(--ink-2); }
.chk--bank li[data-state="pass"] b { color: var(--ink); }

/* after: the passport, the checks, the verdict */
.bank__ask { margin: 0 0 12px; font-weight: 700; }
.bank__src { font-weight: 400; color: var(--ink-2); font-size: 14px; }
.pp { margin: 0 0 16px; background: #fff; border: 2px solid var(--blue); }
.pp > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 10px; padding: 8px 12px; font-size: 15px; border-bottom: 1px solid var(--line-soft); }
.pp > div:last-child { border-bottom: 0; }
.pp dt { color: var(--blue-dark); font-weight: 700; }
.pp dd { margin: 0; overflow-wrap: anywhere; }
.chk { list-style: none; margin: 0 0 16px; padding: 0; }
.chk li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 0 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; color: var(--ink-2); transition: color .2s; }
.chk li b { font-variant-numeric: tabular-nums; color: var(--ink); }
.chk li em { grid-column: 2; font-style: normal; color: var(--red-dark); font-weight: 700; }
.chk li em:empty { display: none; }
.chk li[data-state="checking"] { color: var(--ink); }
.chk li[data-state="checking"] b::after { content: " ·"; color: var(--blue); }
.chk li[data-state="pass"] { color: var(--ink); }
.chk li[data-state="pass"] b::after { content: " ✓"; color: var(--green); }
.chk li[data-state="fail"] { color: var(--red-dark); background: var(--red-soft); padding-left: 8px; margin-left: -8px; padding-right: 8px; margin-right: -8px; }
.chk li[data-state="fail"] b { color: var(--red); }
.chk li[data-state="fail"] b::after { content: " ✗"; }
.chk li[data-state="hold"] { color: var(--amber-ink); }
.chk li[data-state="skip"] { color: var(--line); }
.chk li[data-state="skip"] b { color: var(--line); }
.verdict { margin: 0 0 14px; }
.verdict__word { margin: 0; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--red); }
.verdict[data-decision="ESCALATE"] .verdict__word { color: var(--amber-ink); }
.verdict[data-decision="ALLOW"] .verdict__word { color: var(--green-dark); }
.verdict__why { margin: 8px 0 0; font-size: 17px; }
.conseq { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.conseq li { padding: 6px 0; border-top: 1px solid var(--line-soft); }

/* the page tints with the outcome */
.sc-page[data-state="lost"] .sc-h { border-bottom-color: var(--red); }
.sc-page[data-state="saved"] .sc-h { border-bottom-color: var(--green); }
.sc-foot { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad) 32px; font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1024px) { .sc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sc-col--bank { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .sc-page { --pad: 16px; }
  .inv { width: 100%; padding-bottom: 16px; }
  .sheet { width: calc(100% - 24px); min-height: 0; margin-top: 12px; padding: 22px 18px 16px; }
  .sheet__head { flex-wrap: wrap; }
  .sc-top { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
  .sc-title { font-size: 28px; }
  .sc-worlds { padding-top: 20px; } .sc-worlds .sc-switch__b { flex: 1; font-size: 15px; padding: 10px 8px; }
  .sc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pay__row { grid-template-columns: minmax(0, 1fr); }
  .stamp, .verdict__word { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .inv, .agent, .agent__facts > div, .agent__line, .bank, .pay__cop, .pay__done, .stamp, .close, .pp, .chk, .verdict, .conseq li, .flag, .bank__ask, .sheet__hidden, .sheet__notice, .chk li { transition: none; }
  .sheet__notice.is-spot { transform: none; }
  .inv__scan.is-scan, .pay__btn.is-go { animation: none; }
}
body[data-view="terminal"] .agent { border: 0; }