/* Sheaf real-mode shell — measured "ledger" token system (UX-SYSTEM).
   A cool neutral ramp plus an iris accent: quiet instrument surfaces, functional
   colors only for state. Replaces the Catppuccin-derived values, whose light
   theme failed measured contrast (fill 2.96:1, warn 2.31:1, line 1.61:1 on
   card; dark line 1.80:1). Enabled text pairs measure >=4.5:1 in both themes
   (computed fg/bg audit in docs/tasks/evidence/2026-09-22-ux-system); disabled
   controls dim under WCAG's inactive-component exemption. Borders that
   identify a control or carry state (--input fields, --primary selections,
   --focus ring) measure >=3:1; --line hairlines are supplementary separators
   between already-distinct surfaces (>=2.6:1).
   Type: Inter body, Manrope display. Six fixed size steps (--fs-*) plus one
   fluid display step; component numerals (amount, price, stat, brand, stamp)
   stay component literals. Radii: --radius-sm/--radius/--radius-lg.
   Mono is for addresses, hashes, code and numeric entry only.
   Dark is the default theme. */
:root{
  --bg:#eceef1; --bg2:#e0e3e8; --card:#f7f8fa; --secondary:#e3e5ea;
  --ink:#333749; --ink2:#525a6d; --line:#7e8594; --input:#6d7284;
  --seal:#b3274a; --seal-ink:#ffffff; --fill:#1e6f42; --warn:#8a5b09;
  --warning:#6b4a08; --warning-bg:#f3e9d2;
  --primary:#5b48d8; --primary-ink:#ffffff; --violet:#6b5be0; --focus:#5b48d8;
  --scrim:rgb(51 55 73/.45);
  --radius-sm:6px; --radius:12px; --radius-lg:20px;
  --fs-meta:12px; --fs-small:13px; --fs-ui:14px; --fs-body:16px; --fs-sub:17px; --fs-title:21px;
  --fs-display:clamp(29px,4vw,38px);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Manrope","Inter","Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14151b; --bg2:#0e0f15; --card:#1d1e28; --secondary:#2a2c38;
    --ink:#d6d9e6; --ink2:#a9aec2; --line:#666a80; --input:#848aa0;
    --seal:#ff93a6; --seal-ink:#241016; --fill:#8fd6a6; --warn:#e9bd78;
    --warning:#e9bd78; --warning-bg:#2c2937;
    --primary:#a597ff; --primary-ink:#161226; --violet:#a08fff; --focus:#a597ff;
    --scrim:rgb(10 10 16/.55); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14151b; --bg2:#0e0f15; --card:#1d1e28; --secondary:#2a2c38;
  --ink:#d6d9e6; --ink2:#a9aec2; --line:#666a80; --input:#848aa0;
  --seal:#ff93a6; --seal-ink:#241016; --fill:#8fd6a6; --warn:#e9bd78;
  --warning:#e9bd78; --warning-bg:#2c2937;
  --primary:#a597ff; --primary-ink:#161226; --violet:#a08fff; --focus:#a597ff;
  --scrim:rgb(10 10 16/.55); color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eceef1; --bg2:#e0e3e8; --card:#f7f8fa; --secondary:#e3e5ea;
  --ink:#333749; --ink2:#525a6d; --line:#7e8594; --input:#6d7284;
  --seal:#b3274a; --seal-ink:#ffffff; --fill:#1e6f42; --warn:#8a5b09;
  --warning:#6b4a08; --warning-bg:#f3e9d2;
  --primary:#5b48d8; --primary-ink:#ffffff; --violet:#6b5be0; --focus:#5b48d8;
  --scrim:rgb(51 55 73/.45); color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#top{position:relative;z-index:1}

/* type: Manrope headings, Inter body */
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.2;margin:0 0 12px;letter-spacing:-.01em}
h1{font-size:var(--fs-display);letter-spacing:-.03em}
h2{font-size:var(--fs-title);font-weight:600}
h3{font-size:var(--fs-sub);font-weight:600}
.hero h1{font-size:var(--fs-display);letter-spacing:-.03em}
.hero .no{color:var(--seal)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.seal[data-order-status="RESTING"],.seal[data-order-status="FILLED"]{background:var(--fill);color:var(--seal-ink)}.seal[data-order-status="EXPIRED"],.seal[data-order-status="REFUSED"]{background:var(--seal);color:var(--seal-ink)}
.fields:has([data-current-key="revision"]) .btn,.fields:has([data-current-key="expiry"]) .btn{display:none}
.dim{color:var(--ink2)} .small{font-size:var(--fs-small)} .tiny{font-size:var(--fs-meta)} .err{color:var(--seal)} .pos{color:var(--fill)} .neg{color:var(--seal)}
/* Field errors are their own line, never concatenated with a neighbouring hint (the
   compose fieldset's bare <small> siblings rendered error text inline after the
   balance line). Empty errors collapse to zero height. */
.field-error{display:block;color:var(--seal);margin-top:4px} .field-error:empty{margin-top:0}
.lede{max-width:52ch;font-size:var(--fs-sub);color:var(--ink2);margin:10px 0 18px}
.lab{display:block;font-size:var(--fs-small);font-weight:500;color:var(--ink2);margin:0 0 8px}
.eyebrow{display:block;font-size:var(--fs-meta);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);margin:0 0 8px;line-height:1.7}

/* nav */
#top{position:relative;z-index:35;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid var(--line)}
#top .brand{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:-.047em;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
#top .brand .mark{flex-shrink:0}
#top .brand>span{text-transform:lowercase}
#top .brand .mark{width:34px;height:38px;color:var(--primary)}
.brand-dot{color:var(--primary)}
#top .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin-left:auto}
#top .wallet{display:flex;align-items:center;gap:6px}
#top .balances{flex-basis:100%;font-family:var(--mono);font-size:var(--fs-meta);text-align:right;color:var(--ink2)}
.wallet-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--radius);min-height:44px;padding:10px 17px;background:var(--secondary);color:var(--ink);font-family:var(--sans);font-size:var(--fs-ui);font-weight:600;cursor:pointer}.wallet-chip.connected{background:var(--card)}.network-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 auto}.wallet-chip:has(.network-dot:not([hidden])) .network-dot{background:var(--fill)}#wallet-actions{display:flex;gap:6px}
.bal b{color:var(--ink);font-weight:500} .bal i{font-style:normal}

.hero{padding:clamp(24px,6vh,64px) 0;max-width:820px}

/* controls: the landing page's replay button is the model */
.btn{font-family:var(--sans);font-size:var(--fs-ui);font-weight:600;padding:10px 17px;min-height:44px;border:1px solid var(--line);background:var(--secondary);color:var(--ink);border-radius:var(--radius);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.2}
.btn:hover:not([disabled]){border-color:var(--ink)} .btn[disabled]{cursor:not-allowed;color:var(--ink2);border-color:var(--line);box-shadow:none}
.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);padding:12px 18px;min-height:48px;box-shadow:0 4px 15px color-mix(in srgb,var(--primary) 12%,transparent);transition:transform .18s,box-shadow .18s,filter .18s} .btn.danger{border-color:var(--seal);color:var(--seal)}
/* A disabled control keeps its shape but drops the accent surface: washed-out
   primary read as a broken button and clipped the label's contrast. The blocker
   sentence beside it (prepare-note / submit-status) carries the reason. */
.btn.primary[disabled],.btn.danger[disabled]{background:var(--secondary);color:var(--ink2);border-color:var(--line);box-shadow:none}
.btn.primary:hover:not([disabled]){border-color:var(--primary);filter:brightness(.94)}
.btn.primary:active:not([disabled]){transform:translateY(1px)}
@media (hover:hover){.btn.primary:hover:not([disabled]){box-shadow:0 7px 22px color-mix(in srgb,var(--primary) 20%,transparent);transform:translateY(-2px)}.wallet-chip:hover{border-color:var(--primary);box-shadow:0 3px 12px #00000008}}
.btn.big{padding:13px 22px;font-size:var(--fs-body)} .btn.small{padding:6px 10px;font-size:var(--fs-meta)} .btn.tiny{padding:3px 7px;font-size:var(--fs-meta)}
.icon-button{min-width:44px;min-height:44px;border:0;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--ink2);cursor:pointer;padding:0}
.icon-button:hover{background:var(--secondary)}
/* v6 chrome: the strip is a full-bleed sibling of main, not a card inside it. */
.demo-strip{border-bottom:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink2)}
.demo-strip>div{max-width:1200px;margin:auto;min-height:43px;display:flex;align-items:center;gap:10px}

.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.page-heading .eyebrow{margin:0 0 7px}
.page-heading h1{margin:0;font-size:var(--fs-display);font-weight:700;letter-spacing:-1.5px;line-height:1.2;max-width:760px}
.page-heading p{margin-top:11px;color:var(--ink2);font-size:var(--fs-body);max-width:650px}
.inp,.sel,textarea.inp{font-family:var(--sans);font-size:var(--fs-ui);padding:8px 10px;min-height:44px;border:1px solid var(--input);border-radius:var(--radius);background:var(--card);color:var(--ink);width:100%}
.inp.short{width:120px} .sel.small{padding:4px 6px;font-size:var(--fs-meta);width:auto}
label{display:block;font-size:var(--fs-small);color:var(--ink2);margin:6px 0} label .inp,label .sel{margin-top:4px}
label.radio{display:flex;gap:8px;align-items:flex-start;color:var(--ink)} label.radio input{margin-top:4px}
.row{display:flex;align-items:center} .gap{gap:10px}

/* cards, legs, panel rows: the landing page's card and rows */
.card{background:linear-gradient(135deg,color-mix(in srgb,var(--card) 97%,var(--violet) 3%),var(--card));border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent) inset,0 10px 34px #00000005;transition:border-color .2s,box-shadow .2s;padding:16px 18px;margin:12px 0}
.leg{border:1px solid var(--line);background:var(--card);border-radius:var(--radius-sm);padding:12px 16px;margin:10px 0}
.net{margin:14px 0;padding-top:10px;border-top:1px solid var(--line)}
.field{margin:14px 0}
.field>.lab{margin-bottom:6px}
.row.mono{flex-wrap:wrap;overflow-wrap:anywhere}
.compose{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.9fr);gap:32px} .compose aside{position:sticky;top:104px;align-self:start}
@media (max-width:900px){.compose{grid-template-columns:1fr}.compose aside{position:static}}
.blockers{color:var(--seal);margin:8px 0 0;padding-left:18px;font-size:var(--fs-small)} .errs{margin-top:8px}
.notice{display:flex;align-items:flex-start;gap:10px;padding:14px 17px;background:var(--warning-bg);color:var(--warning);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:24px;font-size:var(--fs-ui)}
.chip{display:inline-block;font-size:var(--fs-meta);font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--card)}
.chip.fill{border-color:var(--fill);color:var(--fill)} .chip.seal,.chip.block{border-color:var(--seal);color:var(--seal)} .chip.warn{border-color:var(--warn);color:var(--warn)}
.recent{margin-top:38px}
.order-list{padding:0 22px 16px}
.order-list>p{padding:19px 0 0}
.order-name{flex:1;min-width:0}
.order-name small{font-size:var(--fs-meta);margin-top:4px}
.recent-order-state{display:block;color:var(--ink2)}
.icon-button[hidden]{display:none}

/* receipt and seal: the landing page's receipt and stamp */
.receipt{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;margin-bottom:18px;position:relative;box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
.receipt.no{border-color:var(--seal)} .receipt.warn{border-color:var(--warn)} .receipt.yes{border-color:var(--fill)}
.receipt h1{font-size:clamp(20px,2.6vw,30px);line-height:1.1;padding-right:150px}
.seal{float:right;margin:2px 0 12px 16px;transform:rotate(-8deg);font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.04em;border:3px solid currentColor;padding:5px 12px;border-radius:4px;text-transform:uppercase;overflow-wrap:normal;background:color-mix(in srgb,var(--card) 70%,transparent)}
.receipt.no .seal{color:var(--seal)} .receipt.warn .seal{color:var(--warn)} .receipt.yes .seal{color:var(--fill)}
@media (max-width:640px){.seal{float:none;display:inline-block;margin-bottom:10px;transform:rotate(-4deg);max-width:100%;font-size:18px;letter-spacing:0;overflow-wrap:anywhere}.receipt h1{padding-right:0}}
.bigfact{margin:14px 0} .bigfact b{font-family:var(--disp);font-weight:800;font-size:clamp(36px,7vw,72px);line-height:1;display:block}
pre{white-space:pre-wrap;word-break:break-all;background:var(--bg2);padding:8px;border-radius:var(--radius-sm);font-family:var(--mono)}
details summary{cursor:pointer;color:var(--ink2)}
/* touch and small screens. Same tokens, same type system: only the targets, the wrapping
   and the scroll regions change. The submit button deliberately stays below the disclosure
   panel rather than floating: nothing is submittable before the panel has been seen. */
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn.small,.btn.tiny{min-height:44px;padding:8px 12px}
  .sel,.inp{min-height:44px} label.radio{padding:5px 0} label.radio input{width:18px;height:18px}
  details summary{padding:4px 0}
}
@media (max-width:760px){
  .inp,.sel,textarea.inp{font-size:16px}
  .row{flex-wrap:wrap} .inp.short{width:110px}
  p.mono,.card p.mono,.bal{overflow-wrap:anywhere}
  .receipt{padding:18px}
  .compose{gap:24px}
}
@media (max-width:700px){
  #top{gap:10px}
  #top .right{gap:8px;flex-wrap:wrap} #top .balances{gap:12px}
}
@media (max-width:560px){
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Composer labels wrap instead of shrinking market and side options. */
#compose .row{flex-wrap:wrap}#compose .row>label{flex:1 1 170px;min-width:0}#compose .row select{width:100%}

/* Folded from mobile.css (B22): one stylesheet serves all widths. The max-width:420px
expiry-chips override is dropped — flex-wrap already lays the chips out narrow. */
/* Mobile constraints for the provisional client; brand tokens come from styles.css. */
main{width:min(100% - 24px,760px);margin:auto;padding-bottom:40px}.card,fieldset,.receipt{min-width:0;max-width:100%}fieldset{margin:16px 0;padding:12px;border:1px solid var(--line)}.lab{display:block;margin:12px 0}.inp{display:block;width:100%;min-width:0;font-size:16px;min-height:44px}.btn{min-height:44px;margin:6px 0;white-space:normal}#submit{position:static;width:100%;transform:none}.row{padding-bottom:12px;border-bottom:1px solid var(--line)}.mono,pre,p,span{overflow-wrap:anywhere}pre{white-space:pre-wrap;max-width:100%}table{width:100%;table-layout:fixed}td,th{overflow-wrap:anywhere;text-align:left;padding:6px} [hidden]{display:none!important}
html{overflow-x:hidden}
/* Review and policy disclosure values include unbroken addresses and base-unit amounts. */
.card dl,.card dt,.card dd{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.card dd{margin-inline-start:0}
.notice{overflow-wrap:anywhere}
/* Exact-amount approval labels contain full addresses on narrow screens. */
.btn{max-width:100%;overflow-wrap:anywhere}
#package-submit{position:static;width:100%;transform:none}
.receipt dl,.receipt dt,.receipt dd{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.receipt dd{margin-inline-start:0}
/* The current-step sentence is a quiet status line, not a second sticky bar: the
   step strip already carries position, so this region only announces what to do
   next (role="status" on the element, core-owned text). */
.compose-step{margin:0 0 14px;padding:0;font-size:var(--fs-small);color:var(--ink2);overflow-wrap:anywhere}
#advanced-legs{margin:8px 0}
#advanced-legs summary,#advanced-raw summary,#advanced-expiry summary,#context-stack>summary{font-size:var(--fs-meta);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
#expiry-minus,#expiry-plus{min-width:44px;min-height:44px}#amount-helpers{padding-top:4px;border:0}
.expiry-stepper{display:grid;grid-template-columns:44px minmax(84px,1fr) 44px;align-items:end;gap:6px}.expiry-stepper .lab{margin:0}#price-unit{margin-left:6px}
#compose.collapsed > :not(h2):not(#edit-compose):not(#compose-summary):not(.steps):not(#errors){display:none}
/* Order progress step bar: Build / Prepare / Review strip across the composer card
   top, back-navigation only (v6 mock .steps, globals.css:7; tokens mapped per the
   header comment). Negative margins cancel .card padding so the bar is full-bleed. */
.steps{display:flex;background:var(--secondary);padding:17px 28px;gap:40px;border-bottom:1px solid var(--line);margin:-16px -18px 16px}
.steps button{display:flex;align-items:center;gap:9px;font:inherit;font-size:var(--fs-small);color:var(--ink2);min-height:44px;background:none;border:0;padding:0;cursor:pointer}
.steps button:disabled{cursor:not-allowed;opacity:.55}
.steps button>span{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:var(--fs-meta)}
.steps button.current{color:var(--primary);font-weight:600}
.steps button.current>span{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.steps button.done>span{color:var(--primary);background:var(--card)}
/* Prepare pane: shown at stage 1 while the provisional read resolves; carries the
   Review-order transition (fresh read) — v6 mock .button-note, globals.css:16. */
#prepare-pane{margin-top:16px}
.button-note{font-size:var(--fs-meta);color:var(--ink2);margin-top:8px;text-align:center}

/* v6 real-mode shell chrome: header/nav/mobile/footer/skip, badge and availability
   primitives per the component inventory. Structure/token parity from source; rendered
   pixel parity is NOT claimed (captures blocked on the missing mock lib/). Dialog and
   composer field primitives land with their first real consumer, not before. */
.skip{position:fixed;top:-100px;left:20px;background:var(--primary);color:var(--primary-ink);padding:14px;z-index:60;border-radius:var(--radius)}
.skip:focus{top:12px}
#top{min-height:86px}
.header-inner{max-width:1248px;min-height:86px;padding:0 24px;margin:auto;display:flex;align-items:center;gap:65px}
.desktop-nav{display:flex;gap:32px;align-self:stretch;align-items:center}
.desktop-nav a{font-size:var(--fs-ui);color:var(--ink2);height:100%;display:flex;align-items:center;position:relative;text-decoration:none}
.desktop-nav a.active{color:var(--ink);font-weight:600}
.desktop-nav a.active:after{content:'';height:3px;background:var(--primary);position:absolute;bottom:0;left:0;right:0;border-radius:var(--radius-sm)}
.desktop-nav span[aria-disabled="true"]{font-size:var(--fs-ui);color:var(--ink2);opacity:.55;cursor:not-allowed;min-height:44px;display:inline-flex;align-items:center}
.network{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--ink2)}
.network-icon{font-size:22px;color:var(--primary)}
main{width:min(100% - 24px,1200px);padding-top:36px}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;width:min(100% - 24px,1200px);margin:28px auto 0;padding:30px 0 24px;color:var(--ink2);font-size:var(--fs-meta);border-top:1px solid var(--line)}
footer span:first-child{display:inline-flex;align-items:center;gap:8px}
footer .mark{width:22px;height:24px;color:var(--primary)}
.mobile-nav{display:none}
.badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--fs-meta);font-weight:500;padding:3px 8px;color:var(--ink2)}
.demo-badge{color:var(--warning);background:var(--warning-bg);border-color:transparent;letter-spacing:.5px;font-weight:600}
/* Mock trade-leg rows are borderless and separated by a top rule, not boxed. */
.leg-group{border:0;padding:0;margin:8px 0}
.leg-group>legend{font-size:var(--fs-meta);font-weight:600;letter-spacing:1.8px;color:var(--ink2);padding:0;margin-bottom:4px}
.simple-leg{padding:0 0 12px;margin:0;border:0;min-width:0;animation:step-arrive .22s ease-out}
.simple-leg+.simple-leg{padding-top:20px;border-top:1px solid var(--line)}
.trade-leg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:27px;margin-bottom:6px}
.trade-eyebrow{font-size:var(--fs-meta);font-weight:600;letter-spacing:1.8px;color:var(--ink2);text-transform:uppercase}
/* market-side / market-identity / select-control / side-tabs — mock values. */
.market-side{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px;gap:12px;flex-wrap:wrap}
.market-identity{display:flex;align-items:center;min-width:0;gap:8px}
.select-control{min-height:44px;height:auto;border:1px solid var(--input);font-size:var(--fs-ui);border-radius:var(--radius);color:var(--ink);box-shadow:none;max-width:100%;white-space:normal;background:var(--card)}
.market-identity .select-control{border:0;padding:0;font-size:var(--fs-body);font-weight:600;width:auto;min-width:0}
.market-identity .field-error{margin-left:8px}
/* G5 custom picker (mock Radix select): hidden native select stays the model; the
   trigger carries .select-control so it inherits the same identity styling. */
.market-identity{position:relative}
.select-native{display:none!important}
.picker-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;color:var(--ink)}
/* The market-row trigger keeps its pair label on one line and never collapses
   under flex pressure; the side tabs yield or wrap instead (M1). */
.market-identity .picker-trigger{white-space:nowrap;min-width:max-content}
.picker-trigger svg{flex-shrink:0;opacity:.5}
.picker-list{position:absolute;z-index:60;min-width:160px;max-height:240px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 8px 24px rgb(0 0 0/.3)}
.picker-option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-size:var(--fs-ui);color:var(--ink);cursor:default;user-select:none}
.picker-option[data-active]{background:var(--secondary)}
.picker-option[aria-disabled="true"]{opacity:.5}
.picker-check{margin-left:auto;width:14px;display:inline-flex;visibility:hidden}
.picker-option[aria-selected="true"] .picker-check{visibility:visible}
/* Standalone picker context (Advanced execution mode): framed like a select,
   explainer stacked beneath the trigger as in the mock. */
.picker-wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.picker-wrap>.picker-trigger{border:1px solid var(--input);border-radius:var(--radius);background:var(--card);min-height:44px;padding:8px 10px;font-size:var(--fs-ui);min-width:220px;justify-content:space-between;box-shadow:none}
.side-tabs{min-height:52px;background:var(--secondary);border:1px solid var(--line);padding:3px;border-radius:var(--radius);display:inline-flex;min-width:0}
.side-tabs button{font:inherit;font-size:var(--fs-small);padding:5px 17px;min-height:44px;min-width:44px;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--ink2);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-tabs button[data-state="active"]{color:var(--primary);background:var(--card)}
/* Inline expiry chips — mock .expiry/.label-row/.duration-options. */
.expiry{margin-top:24px}
.label-row{display:flex;align-items:center;justify-content:space-between;color:var(--ink2);margin-bottom:10px;font-size:var(--fs-ui)}
.label-row label{color:var(--ink);font-weight:500}
.label-row svg{width:15px;height:15px}
.duration-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.duration-options button{font:inherit;font-size:var(--fs-ui);border:1px solid var(--line);border-radius:var(--radius);min-height:40px;background:var(--card);color:var(--ink);cursor:pointer}
.duration-options button.selected{border-color:var(--primary);background:var(--secondary);color:var(--primary);font-weight:600}
/* Example-prices rail — mock .context-markets/.snapshot-row. */
.context-markets{padding:24px;background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.context-markets .section-title{margin-bottom:7px}
.snapshot-row{font:inherit;display:flex;align-items:center;width:100%;gap:10px;text-align:left;padding:16px 0;border-bottom:1px solid var(--line);background:transparent;border-left:0;border-right:0;border-top:0;color:inherit;cursor:pointer;transition:background .18s}
.snapshot-row>span:not(.pair){flex:1;min-width:0}
.snapshot-row strong{font-size:var(--fs-small);font-weight:600;display:block}
.snapshot-row small{display:block;color:var(--ink2);font-size:var(--fs-meta);margin-top:3px;line-height:1.5}
.snapshot-row b{font-size:var(--fs-ui);font-weight:500}
.snapshot-row:hover{background:color-mix(in srgb,var(--secondary) 50%,transparent)}
.leg-direction{display:flex;align-items:center;justify-content:center;gap:20px;font-size:var(--fs-ui);color:var(--ink2);margin:8px 0 0}
/* amount-box / price-box — mock bordered field cards. Paired side by side only at
   >=1280 where the compose column leaves room; single column below (mock shape).
   Field containers take the --input border, not the hairline --line. */
.leg-fields{display:grid;gap:10px}
@media (min-width:1280px){.leg-fields{grid-template-columns:1fr 1fr}}
.amount-box,.price-box{border:1px solid var(--input);border-radius:var(--radius);padding:15px 17px;background:var(--bg);transition:border-color .12s}
.price-box{background:var(--card)}
.amount-box:focus-within,.price-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);transition:box-shadow .18s,border-color .18s}
.amount-box label,.price-box label{font-size:var(--fs-ui);color:var(--ink2);display:block;font-weight:500}
.amount-line{display:flex;align-items:center;gap:10px;margin:5px 0 6px}
.amount-line input{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:36px;letter-spacing:-1px;font-weight:500;min-width:0;width:100%;background:transparent;border:0;padding:0;outline:0;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.4}
.price-line{display:flex;align-items:center;justify-content:space-between;gap:15px}
.price-line input{font-family:Inter,"Segoe UI",Arial,sans-serif;min-width:0;width:100%;font-size:24px;line-height:1.5;border:0;background:transparent;padding:2px 0;color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
.price-line>span{color:var(--ink2);font-size:var(--fs-ui);white-space:nowrap}
.asset-label{display:flex;align-items:center;gap:7px;font-weight:600;font-size:var(--fs-ui);white-space:nowrap}
.input-hint{font-size:var(--fs-ui);color:var(--ink2);display:block}
.input-hint:empty{display:none}
.hint-fills{display:flex;gap:12px;margin-top:4px}
.hint-fills .text-button{min-height:44px;min-width:44px;font-size:var(--fs-small);padding:0}
.reference-price{display:flex;align-items:center;gap:4px;color:var(--primary);font-size:var(--fs-ui);min-height:44px;background:none;border:0;padding:0;cursor:pointer}
.reference-price:hover{text-decoration:underline}
.tiny-source{font-size:var(--fs-meta);color:var(--ink2);display:block;line-height:1.6}
.amount-line input:focus-visible,.price-line input:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}
.add-trade{border:1px dashed var(--line);background:transparent;border-radius:var(--radius);display:flex;width:100%;align-items:center;gap:8px;color:var(--primary);padding:11px 14px;min-height:44px;font-size:var(--fs-ui);cursor:pointer;margin-top:4px}
.add-trade .count{margin-left:auto;color:var(--ink2);font-size:var(--fs-meta)}
.add-trade:hover:enabled{background:var(--secondary);border-color:var(--primary)}
.add-trade:disabled{cursor:default;color:var(--ink2)}
.title-actions{display:flex;align-items:center;gap:10px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-title h2,.section-title h3{margin:0}
.review-leg{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.review-leg>div{min-width:0}
.review-leg strong{display:block;overflow-wrap:anywhere}
.review-leg p{margin:6px 0 0;color:var(--ink2);overflow-wrap:anywhere}
.review-trade{padding:12px 0;border-bottom:1px solid var(--line)}
.review-trade strong{display:block;overflow-wrap:anywhere}
.review-trade p{margin:6px 0 0;color:var(--ink2);overflow-wrap:anywhere}
.bounds-inset{background:color-mix(in srgb,var(--card) 60%,transparent);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:14px 0}
.bounds-inset>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0}
.bounds-inset>div>span{overflow-wrap:normal}
.bounds-inset strong{overflow-wrap:anywhere;text-align:right}
.fill-success{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:14px 0;overflow-wrap:anywhere}
.review-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:14px 0}
.review-meta>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.review-meta>div>span{overflow-wrap:normal}
.review-meta strong{overflow-wrap:anywhere;text-align:right}
#setup-rows{grid-template-columns:1fr}
.execution-evidence{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:14px 0}
.execution-evidence h3{margin-top:0}
.decision-context{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:14px 0}
.decision-context h2{margin-top:0}
.decision-context-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.decision-context-rows li{overflow-wrap:anywhere}
.timeline{position:relative}
.timeline-item{position:relative;padding-left:22px}
.timeline-item::before{content:"";position:absolute;left:6px;top:20px;bottom:-4px;width:2px;background:var(--line)}
.timeline-item:last-child::before{display:none}
.timeline-item::after{content:"";position:absolute;left:2px;top:6px;width:10px;height:10px;border-radius:50%;border:2px solid var(--ink2);background:var(--card)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}
.stat{padding:25px;margin:0}
.stat>span{display:block;font-size:var(--fs-ui);color:var(--ink2);margin-bottom:6px}
.stat-head{margin-bottom:6px}
.stat-head>span:first-child{color:var(--ink2);overflow-wrap:normal;font-size:var(--fs-ui)}
.stat-icon{display:inline-flex;vertical-align:-3px;margin-left:6px}
.orders-stats .stat>strong{font-family:var(--sans);font-weight:500;font-size:38px}
.orders-stats .stat>small{font-size:var(--fs-meta)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search{position:relative}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:inline-flex;color:var(--ink2);pointer-events:none}
.search .inp{padding-left:36px}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;background:color-mix(in srgb,var(--card) 60%,transparent);border:1px solid var(--line);border-radius:var(--radius);padding:5px}
.filter-tabs .btn{border-color:transparent;background:none}
/* Primary text on a primary tint measured 3.98:1 in dark — the selected state
   uses the secondary surface instead, matching duration-options. */
.filter-tabs .btn[aria-pressed="true"]{border-color:var(--primary);color:var(--primary);background:var(--secondary)}
.stat>strong{display:block;font-size:32px;font-family:var(--sans);font-weight:600}
.stat>small{display:block;margin-top:6px}
.dashboard{padding:22px}
.dashboard-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px;flex-wrap:wrap}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap}
.filter-tabs .btn[aria-pressed="true"]{border-color:var(--primary);color:var(--primary)}
.search{display:flex;align-items:center;gap:9px;color:var(--ink2)}
.market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.market-card{padding:26px}
.market-card:hover,.stat:hover{border-color:color-mix(in srgb,var(--violet) 50%,var(--line));box-shadow:0 14px 35px #0000000b}
.market-card h2{font-size:var(--fs-title);margin:30px 0 20px}
.pair{display:inline-flex;align-items:center;flex-shrink:0}
.pair .token+.token{margin-left:-8px;border:2px solid var(--card)}
.token.small{width:28px;height:28px;font-size:16px}
.token{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:0;overflow:hidden;flex-shrink:0;background:var(--secondary);color:var(--primary);white-space:nowrap}
/* Asset-identity glyph tints follow the theme family: iris MON, ledger blue
   quote, warn amber — measured >=5:1 glyph-on-tint in both themes. */
.token.mon{background:color-mix(in srgb,#5b48d8 16%,#f7f8fa);color:#5b48d8}
.token.usdc{background:color-mix(in srgb,#1f5fb8 16%,#f7f8fa);color:#1f5fb8}
.token.ausd{background:color-mix(in srgb,#8a5b09 18%,#f7f8fa);color:#6b4a08}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .token.mon{background:#a597ff;color:#1d1e28}:root:not([data-theme="light"]) .token.usdc{background:#8fbbe9;color:#1d1e28}:root:not([data-theme="light"]) .token.ausd{background:#e9bd78;color:#1d1e28}}
:root[data-theme="dark"] .token.mon{background:#a597ff;color:#1d1e28}:root[data-theme="dark"] .token.usdc{background:#8fbbe9;color:#1d1e28}:root[data-theme="dark"] .token.ausd{background:#e9bd78;color:#1d1e28}
.diamond{width:13px;height:13px;border:3px solid currentColor;transform:rotate(45deg);border-radius:3px;flex-shrink:0}
.market-rule{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:22px;padding-top:16px;font-size:var(--fs-small)}
.market-rule>span{color:var(--ink2)}
.tiny-source{font-size:var(--fs-meta);color:var(--ink2);display:block;line-height:1.6;margin-top:8px}
.disclosure{display:flex;align-items:flex-start;gap:11px;background:var(--secondary);padding:17px;border-radius:var(--radius);margin:22px 0;font-size:var(--fs-small);color:var(--ink2)}
.disclosure p{margin-top:7px}
.disclosure svg{color:var(--primary);flex-shrink:0;margin-top:2px}
.btn.full{width:100%;display:flex;justify-content:center}
.market-card .btn{margin-top:25px}
.token-catalog{padding:24px;margin-top:28px}
.token-catalog>.muted{line-height:1.65}
.token-directory-row{padding:20px 0;border-bottom:1px solid var(--line)}
.token-directory-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.token-directory-title .token{font-size:14px}
.token-directory-title .badge{margin-left:auto}
.token-directory-row p{margin:10px 0;color:var(--ink2)}
code{font-family:var(--mono)}
/* F5: the address is atomic — it scrolls inside its own strip instead of wrapping
   mid-string into the page edge. padding-bottom keeps the strip's own scrollbar
   clear of the glyphs. */
.token-directory-row code{display:block;white-space:nowrap;overflow-x:auto;overflow-y:hidden;font-size:var(--fs-small);padding-bottom:4px;scrollbar-width:thin}
.token-directory-row small{display:block;margin-top:8px;color:var(--ink2)}
.empty-state{text-align:center;padding:60px 20px}
.market-grid .empty-state{grid-column:1/-1}
.order-row{display:flex;gap:14px;align-items:center;width:100%;padding:19px 0;border-bottom:1px solid var(--line)}
.order-row a{display:inline-flex;align-items:center;color:inherit;text-decoration:none;flex:1;min-width:0}
.order-row strong{display:block;overflow-wrap:break-word}
.order-row small{display:block;color:var(--ink2);flex-basis:100%}
.order-row .badge{margin-left:auto;white-space:nowrap;flex-shrink:0}
.order-row .badge svg{width:13px;height:13px}
.order-row .pair{display:inline-flex;flex-shrink:0;align-items:center}
.order-row>div{min-width:0;flex:1}
.dashboard .filter-tabs{flex-wrap:wrap}
.dashboard .filter-tabs .btn{white-space:normal;flex:1;overflow-wrap:normal}
.order-row .chev{color:var(--ink2);font-size:var(--fs-sub);display:inline-flex}
.order-row .chev svg{width:17px;height:17px}
.order-row strong{font-size:var(--fs-ui);font-weight:500}
@media (max-width:1023px){.market-grid{gap:15px}.market-card{padding:20px}}
@media (max-width:767px){.stat-grid{grid-template-columns:1fr}.market-grid{grid-template-columns:1fr;gap:18px}.market-card{padding:23px}.token-catalog{padding:20px 16px}.token-directory-title .badge{margin-left:0}.order-row{flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:10px 0}.order-row .badge{margin-left:0}}
@media (max-width:1270px){
  .header-inner{gap:40px}
}
@media (max-width:1023px){
  .header-inner{gap:25px;flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
  .network{display:none}
  .desktop-nav{order:3;flex-basis:100%;height:auto}
  .desktop-nav a{height:auto;min-height:44px;padding:6px 0}
}
@media (max-width:767px){
  #top{height:auto;min-height:70px}
  .header-inner{min-height:70px;padding:12px 17px;gap:10px;flex-wrap:wrap;row-gap:8px}
  #top .brand{font-size:30px}
  #top .brand .mark{width:29px;height:34px}
  .desktop-nav{display:none}
  .review-meta{grid-template-columns:1fr}
  .execution-evidence,.decision-context{padding:14px}
  .market-card .pair .token{width:32px;height:32px;font-size:14px}
  .token.small{width:24px;height:24px;font-size:14px}
  .pair .token+.token{margin-left:-6px}
  .market-card h2{margin:18px 0 12px}
  .stat{border-radius:var(--radius-lg);padding:15px 12px}
  .token-directory-title .token{width:30px;height:30px;font-size:14px}
  .demo-strip>div{margin:0 17px;min-height:49px;flex-wrap:wrap;gap:5px 7px;padding:6px 0}
  .page-heading{margin-bottom:23px;gap:15px;align-items:flex-start}
  .page-heading .eyebrow{letter-spacing:1.5px;margin-bottom:6px}
  .page-heading .demo-badge{display:none}
  #theme-toggle.icon-button{width:36px;min-width:36px}
  .page-heading h1{letter-spacing:-1.1px;line-height:1.18}
  .page-heading p{line-height:1.6;margin-top:8px}
  .wallet-chip{padding:8px 10px;font-size:var(--fs-meta);min-height:40px;gap:6px}

  .mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:8px 20px calc(8px + env(safe-area-inset-bottom))}
  .mobile-nav a,.mobile-nav span[aria-disabled="true"]{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:var(--fs-meta);color:var(--ink2);text-decoration:none;min-width:44px;min-height:44px;justify-content:center;padding:0}
  .mobile-nav a.active{color:var(--primary)}
  .mobile-nav span[aria-disabled="true"]{opacity:.55}
  footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  main{width:min(100% - 32px,1200px);padding-top:27px}
  /* The fixed mobile nav would otherwise paint over a focused control when the
     browser scrolls it to the viewport's last line. */
  html{scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}
.page-heading .badge{white-space:nowrap;flex-shrink:0}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:30px}
.page-heading>div{min-width:0}
.page-heading h1,.page-heading .eyebrow,.page-heading p,.receipt dd{overflow-wrap:anywhere}
.detail-grid>*{min-width:0}
.page-heading h1{margin:4px 0 8px}
.page-heading p{margin:6px 0}
.text-button{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--primary);cursor:pointer;font:inherit;min-height:44px;padding:10px 0;text-decoration:none}
.text-button[disabled]{opacity:.55;cursor:not-allowed}
.back{margin-bottom:12px}
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
@media (max-width:1023px){.detail-grid{grid-template-columns:1fr}}
.timeline{padding:24px}
.timeline h2{margin-top:0}
.timeline-item{display:flex;gap:12px;padding-bottom:20px}
.timeline-item strong{display:block}
.timeline-item small{color:var(--ink2)}
/* F2: the derived block-time anchor sits under the raw block, never fused to it. */
.timeline-item .anchor,.review-meta .anchor{display:block}

/* Plan context panels — exact v6 mock rules from mock-app/app/globals.css
   (.workspace/.context-column/.plan-overview/.plan-trades/.plan-outcomes/
   .plan-number/.plan-boundary/.source/.muted/.section-title/.text-button). Mock
   variable names mapped to shell vars (background->--bg, foreground->--ink,
   card->--card, muted-foreground->--ink2, border->--line, input->--input,
   secondary->--secondary, primary->--primary, violet->--violet). */
.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
.workspace>#compose{min-width:0;margin:0}
.context-column{display:grid;gap:20px;min-width:0;animation:surface-arrive .45s .1s ease-out both;font-family:Inter,'Segoe UI',Arial,sans-serif}
.context-column p{margin:0}
/* The shell's folded mobile rule forces p/span overflow-wrap:anywhere; the mock
   default is normal, with anywhere only on the classes that set it below. */
.context-column p,.context-column span{overflow-wrap:normal}
.context-column svg{flex-shrink:0}
.muted{font-size:var(--fs-ui);color:var(--ink2);line-height:1.6}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.section-title h2,.section-title h3{margin:0}
.section-title h2{letter-spacing:-.5px;line-height:1.3}
p.source{font-size:var(--fs-meta);line-height:1.6;color:var(--ink2);display:flex;align-items:flex-start;gap:5px;margin-top:12px}
p.source svg{width:13px;height:13px;flex-shrink:0;margin-top:2px}
/* The sourced book read's window can carry an unbreakable hash; wrap it like
   the other provenance footnotes so the column cannot overflow and clip. */
.context-markets p.source{overflow-wrap:anywhere}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0;background:none;border:none;color:var(--primary);font:inherit;font-size:var(--fs-small);font-weight:500;min-height:40px;cursor:pointer}
.text-button:hover{text-decoration:underline;text-underline-offset:4px}
.plan-overview{padding:24px;border-radius:var(--radius-lg);margin:0;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 97%,var(--violet) 3%),var(--card));box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent) inset,0 10px 34px #00000005;transition:border-color .2s,box-shadow .2s}
.plan-overview>.muted{line-height:1.65}
.plan-trades{list-style:none;padding:0;margin:20px 0}
.plan-trades li{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);animation:step-arrive .22s ease-out}
.plan-number{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--secondary);color:var(--primary);flex-shrink:0;font-size:var(--fs-ui)}
.plan-trades strong{display:flex;align-items:center;gap:12px}
.plan-trades small{display:block;font-size:var(--fs-small);color:var(--ink2);margin-top:6px;overflow-wrap:anywhere}
.far-from-book{margin:8px 0 0;font-size:var(--fs-small);color:var(--warn)}
.plan-outcomes>div{padding:12px 0;border-top:1px solid var(--line)}
.plan-outcomes span,.plan-outcomes strong{display:block;overflow-wrap:anywhere}
.plan-outcomes span{font-size:var(--fs-small);color:var(--ink2);margin-bottom:5px}
.plan-outcomes strong{font-size:var(--fs-sub)}
p.plan-boundary{font-size:var(--fs-small);display:flex;gap:9px;margin-top:16px;color:var(--ink2)}
.plan-boundary svg{flex-shrink:0}
/* N-07 height pass: the reference stack (overview + markets) rides in
   one disclosure. client.js syncs .open on (min-width:768px) so the panels are
   always expanded at desktop, where the summary is hidden; below 768 the summary
   names the panels inside. The 20px grid gap preserves the column rhythm. */
#context-stack{display:grid;gap:20px}
#context-stack>summary{cursor:pointer}
@media (min-width:768px){#context-stack>summary{display:none}}
@keyframes surface-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes step-arrive{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (max-width:1270px){
  .workspace{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px}
  .context-markets{padding:20px}
}
@media (max-width:1023px){
  .market-identity .pair{display:none}
  .snapshot-row .pair{display:none}
  .context-markets{padding:16px}
}
@media (max-width:767px){
  .workspace{display:flex;flex-direction:column;gap:24px}
  .context-column{width:100%}
  .section-title{margin-bottom:10px;gap:8px}
  .plan-overview{padding:20px 16px}
  .market-side{gap:8px;margin-bottom:10px}
  .market-identity{gap:5px}
  .market-identity .pair{display:inline-flex}
  .market-identity .select-control{font-size:var(--fs-ui)}
  .side-tabs button{padding:5px 11px;font-size:var(--fs-meta)}
  .expiry{margin-top:12px}
  .duration-options{gap:5px}
  .duration-options button{min-height:44px}
  .leg-direction{gap:16px}
  .amount-box,.price-box{padding:13px 14px}
  .context-markets{padding:18px}
  .context-markets .snapshot-row .pair{display:inline-flex}
  .snapshot-row{padding:13px 0;gap:8px}
  .snapshot-row strong{font-size:var(--fs-ui)}
  .snapshot-row small{font-size:var(--fs-meta)}
  .steps{padding:10px 20px;justify-content:space-between;gap:14px}
  .steps button{font-size:var(--fs-meta);gap:7px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .context-column,.plan-trades li,.simple-leg{animation:none}
}

@media (max-width:767px){.desktop-only{display:none!important}}
#order-rows .order-row small{font-size:var(--fs-meta);margin-top:4px}
#order-rows .order-row a{display:flex}
#recent-rows .recent-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
#recent-rows .recent-row strong{overflow-wrap:break-word;font-size:var(--fs-small);font-weight:500;min-width:0}
#recent-rows .recent-row small{color:var(--ink2);white-space:nowrap;flex-shrink:0}
.recent-orders .btn.small{margin-top:12px}
.recent-orders .empty-state{padding:32px 20px}
@media (max-width:767px){.stat-grid.orders-stats{grid-template-columns:repeat(3,1fr);gap:12px}.orders-stats .stat{padding:16px}.orders-stats .stat>strong{font-size:29px}.stat-head>span:first-child{font-size:var(--fs-meta)}.stat-head .stat-icon svg{width:15px}.order-row .chev svg{width:14px}#order-rows .order-row .pair{display:none}#order-rows .order-row{gap:10px;padding:16px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}.order-list .order-row{gap:10px;padding:16px 0}.order-list .order-row .pair{display:none}}

/* Orders open-by-link dialog — v6 mock .sheaf-dialog treatment on app tokens. */
.open-link{margin:16px auto 0}
.dialog-overlay{position:fixed;inset:0;z-index:60;background:var(--scrim);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.sheaf-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:61;display:grid;gap:16px;width:100%;max-width:min(512px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--line) 70%,var(--ink) 30%);background:color-mix(in srgb,var(--card) 95%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 24px 90px #00000035,0 1px 0 #cdd6f41c inset;animation:dialog-arrive .24s cubic-bezier(.2,.8,.2,1)}
.sheaf-dialog .muted{font-size:var(--fs-ui)}
.dialog-icon{width:48px;height:48px;border-radius:var(--radius);background:var(--secondary);color:var(--primary);display:grid;place-items:center}
.dialog-icon svg{width:24px;height:24px}
.dialog-close{position:absolute;top:12px;right:12px;width:40px;height:40px;min-width:40px;min-height:40px}
/* Connect chooser: the injected-wallet option is primary; the note names the
   blocker and remedy when no provider exists, so it hides only while empty. */
#connect-wallet-note{margin:0}
#connect-wallet-note:empty{display:none}
#connect-passkey-block{display:grid;gap:8px}
#connect-passkey-block p{margin:0}
.link-input{min-height:48px;border:1px solid var(--input);border-radius:var(--radius);padding:12px;background:var(--card);color:var(--ink);width:100%;font-size:var(--fs-body)}
/* Agent access dialog (mock plan-entry.tsx agent-dialog/agent-boundary). */
.agent-dialog form{display:grid;gap:12px}
.agent-dialog fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.agent-dialog .check{display:flex;align-items:center;gap:8px;font-size:var(--fs-ui)}
.agent-boundary{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);background:var(--secondary);font-size:var(--fs-small);color:var(--ink2)}
.agent-boundary svg{color:var(--primary);flex-shrink:0;margin-top:2px}
.agent-boundary p{margin:0}
#agent-credential{display:grid;gap:10px}
.agent-dialog .field-error:empty,#agent-message:empty,#agent-grants-message:empty,#agent-drafts-message:empty{display:none}
.agent-grants{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.agent-grants h3{margin:0;font-size:var(--fs-body)}
.agent-grant-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.agent-grant-rows li{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:var(--radius)}
.agent-grant-rows p{margin:0}
.agent-grant-rows .badge,.agent-grant-rows li>button{justify-self:start}
.agent-grants[hidden],#agent-drafts-more[hidden]{display:none}
#agent-credential[hidden],#agent-form[hidden],#agent-disconnected[hidden]{display:none}
@keyframes dialog-arrive{from{opacity:0;scale:.97}to{opacity:1;scale:1}}
@media (prefers-reduced-transparency:reduce){.sheaf-dialog{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}.dialog-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Sign dialog: the reviewed-terms summary scrolls inside the dialog so Confirm/Back stay visible at 390px; .sheaf-dialog's own scroll stays as fallback. */
#sign-dialog{display:flex;flex-direction:column}
#sign-dialog #sign-summary{overflow-y:auto;min-height:0;flex-shrink:1}
#sign-dialog .sign-actions{display:grid;gap:16px}
/* Recovery words: ordered list, two columns at handset width so all 24 words
   stay readable at 360/390 without horizontal scroll or mid-word wrapping. */
.recovery-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;margin:0;padding:0 0 0 1.6em;font-family:var(--mono);font-size:var(--fs-ui);line-height:1.9}
@media (min-width:640px){.recovery-words{grid-template-columns:repeat(3,minmax(0,1fr))}}
#recovery-dialog .sign-actions{display:grid;gap:12px}
/* N-04b revoke control: the confirmation lists exactly the three measured facts. */
#revoke-dialog .sign-actions{display:grid;gap:16px}
.revoke-effects{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--fs-ui);line-height:1.5}
.revoke-effects li{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius)}
.revoke-controls #revoke-status:empty{display:none}
.revoke-controls #revoke-status p{font-size:var(--fs-small);color:var(--ink2);margin:8px 0 0}
#sign-dialog>:not(#sign-summary){flex-shrink:0}
/* Trade shell: heading note and plan entry (mock sheaf.tsx:59-60,71). The sample
   affordance is one field-level marker plus the standing core-owned status line
   under the Build title — the separate banner card is gone. */
.plan-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 22px}
.plan-actions .btn{display:inline-flex;align-items:center;gap:8px}
#sample-plan-line{margin:-6px 0 14px;color:var(--ink2)}
#sample-plan-line:empty{display:none}
footer .text-button{font-size:var(--fs-meta);min-height:44px;min-width:44px;justify-content:flex-start}
/* Top notice (mock sheaf.tsx:57) and messages kept beside their action. */
.notice>svg{margin-top:2px;flex-shrink:0}
.notice button{margin-left:auto;min-width:32px;min-height:32px;color:inherit}
.button-note{display:flex;align-items:center;justify-content:center;gap:5px}
.button-note svg{width:13px;height:13px;color:var(--primary)}
.action-message{margin:8px 0 0;font-size:var(--fs-small);color:var(--warning)}
.action-message[data-kind="bad"]{color:var(--seal)}
.action-message[data-kind="ok"]{color:var(--fill)}
@media (max-width:767px){.notice{font-size:var(--fs-small);padding:12px;gap:8px}}
/* Prepare checklist + funding context (mock globals.css:99-102,7). The review
   trades section is a plain rule-separated block — no card inside the card. */
.constraint-review{margin:20px 0;overflow-wrap:anywhere}
.constraint-review>.muted{margin:8px 0;font-size:var(--fs-ui)}
.constraint-row{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--fs-ui);overflow-wrap:anywhere}
.checklist{margin:23px 0}
.check-item{display:flex;align-items:flex-start;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.check-icon{border:1px solid var(--line);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink2)}
.check-icon.ready{color:var(--primary);background:var(--secondary);border-color:transparent}
.check-item strong{font-size:var(--fs-body);font-weight:600}
.check-item p{font-size:var(--fs-small);color:var(--ink2);margin:4px 0 0}
/* D1e-2: nested raw-fields details (mock globals.css). */
#advanced-raw{margin:14px 0}
/* UX-PREP: stage-specific context panels — Prepare (funding/approval/next step) and
   Review (signed bounds once) reuse the constraint-row language of the Build panels.
   The next-step lead is a rule-separated block, not a tinted card-in-card. */
.context-stage h4{font-size:var(--fs-meta);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin:16px 0 0}
.context-group{margin-top:10px}
.context-group .constraint-row{padding:10px 0}
.context-next{display:flex;flex-direction:column;gap:4px;padding:4px 0 12px;border-bottom:1px solid var(--line);margin:6px 0 4px}
.context-next strong{font-size:var(--fs-ui);font-weight:600}
.context-next span{font-size:var(--fs-small);line-height:1.5;color:var(--ink2)}
.context-stage>.muted{font-size:var(--fs-small);line-height:1.6;margin-top:14px}
/* .context-column p/span resets overflow-wrap to normal; stage rows can carry
   unbreakable values (spender addresses, max-uint allowances, hashes) — restore
   wrapping on every text element inside these panels. */
.context-stage p,.context-stage span,.context-stage strong{overflow-wrap:anywhere}

/* UX pass 2026-09-18: order rows scan in three lines; the anchor is the row, so it carries
   the no-underline rule itself. Values keep whole words (break-word, not anywhere). */
a.order-row{color:inherit;text-decoration:none;border-radius:var(--radius)}
a.order-row:hover{background:color-mix(in srgb,var(--card) 70%,var(--primary) 6%)}
a.order-row:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.order-list .order-name strong{font-size:var(--fs-body);font-weight:600;line-height:1.35}
.order-list .order-row-terms{display:block;color:var(--ink);font-size:var(--fs-small);margin-top:4px}
.order-list .order-row-timing{display:block;color:var(--ink2);font-size:var(--fs-meta);margin-top:4px}
.order-list .recent-order-state{font-size:var(--fs-small)}
.order-list .order-row .chip{flex-shrink:0}
.bounds-inset strong{overflow-wrap:break-word;white-space:nowrap;flex-shrink:0}
/* Review meta values carry full provenance sentences (pinned expiry, policy read) —
   they must wrap within the row rather than overflow the card. */
.review-meta strong{overflow-wrap:anywhere}
.bounds-inset>div>span,.review-meta>div>span{min-width:0}
details.provenance{margin-top:8px}
details.provenance>summary{cursor:pointer;font-size:var(--fs-meta);color:var(--ink2)}
/* F3: monitoring provenance as definition rows — label / value pairs, every fact kept. */
.monitor-provenance{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 14px;margin:10px 0 0;font-size:var(--fs-meta)}
.monitor-provenance dt{color:var(--ink2);font-weight:500;white-space:nowrap}
.monitor-provenance dd{margin:0;overflow-wrap:anywhere}
.plan-actions{margin-bottom:18px}
@media (max-width:767px){.order-list .order-row{flex-wrap:wrap;align-items:flex-start;gap:8px 12px}.order-list .order-name{flex:1 1 calc(100% - 64px)}.order-list .order-row .chev{order:2;align-self:center}.order-list .order-row .chip{order:3;flex:0 0 auto}}

/* Landing (/about, DV-V2-15): the two prescribed routes side by side, then the
   conditions and the served-deployment fact table. Everything reuses the shell
   tokens; only layout is added. */
.landing-routes{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.route-card{display:flex;flex-direction:column}
.route-card .btn{align-self:flex-start;margin:4px 0 10px}
.route-card p:last-child{margin-bottom:0}
.landing-order-id{overflow-wrap:anywhere;color:var(--ink2)}
.landing-conditions ul{margin:0;padding-left:20px;display:grid;gap:8px}
.landing-facts{display:grid;margin:6px 0 0}
.landing-facts .fact{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:16px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.landing-facts .fact:last-child{border-bottom:0}
.landing-facts dt{color:var(--ink2);font-size:var(--fs-small);font-weight:500}
.landing-facts dd{margin:0;overflow-wrap:anywhere}
@media (max-width:767px){.landing-routes{grid-template-columns:1fr;gap:18px}}
@media (max-width:520px){.landing-facts .fact{grid-template-columns:1fr;gap:2px}}