/* Backstop workspace: the homepage's paper, ink, orange and editorial type. */
.sandbox-page { min-height:100vh; background:var(--paper); }
.app-mode-bar { display:flex; justify-content:center; gap:9px; padding:7px 14px; background:var(--ink); color:var(--paper); font:600 9px/1.4 var(--mono); letter-spacing:.13em; text-align:center; }
.app-mode-bar::before { content:""; align-self:center; width:5px; height:5px; background:var(--orange); border-radius:50%; }
.app-topbar { position:sticky; z-index:20; top:0; display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:24px; padding:12px clamp(18px,3vw,44px); border-bottom:1px solid var(--rule); background:var(--paper); }
.app-brand { display:inline-flex; flex:0 0 auto; align-items:center; gap:11px; color:var(--ink); font:750 21px/1 var(--display); letter-spacing:-.045em; text-decoration:none; }
.app-brand .brand-mark { width:34px; height:34px; }
.app-brand small { display:block; margin-top:7px; color:var(--muted); font:600 8px/1 var(--mono); letter-spacing:.13em; }
.app-topbar-state { display:flex; align-items:center; gap:18px; }
.environment-pill,.state-chip { display:inline-flex; min-height:27px; align-items:center; gap:7px; padding:5px 8px; border:1px solid var(--rule); border-radius:2px; color:var(--muted); font:650 9px/1.3 var(--mono); letter-spacing:.055em; white-space:normal; }
.environment-pill { color:var(--green); border-color:var(--green); }
.environment-pill>span,.session-indicator { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--green); }
.role-switch { display:flex; align-items:center; gap:9px; color:var(--muted); font:600 10px/1.4 var(--mono); }
.role-switch select { min-height:40px; padding:8px 30px 8px 10px; border:1px solid var(--rule); border-radius:2px; background:var(--surface); color:var(--ink); font:500 12px var(--body); }
.app-topbar .theme-toggle { width:40px; height:40px; border-radius:50%; }
.sandbox-layout { display:grid; min-height:calc(100vh - 104px); grid-template-columns:216px minmax(0,1fr); }
.app-sidebar { position:sticky; top:76px; display:flex; height:calc(100vh - 76px); flex-direction:column; padding:34px 18px 20px; border-right:1px solid var(--rule); background:var(--paper); }
.sidebar-label { margin:0 10px 24px; color:var(--muted); font:600 9px/1.4 var(--mono); letter-spacing:.16em; }
.workspace-nav { display:grid; gap:6px; counter-reset:workspace; }
.workspace-nav button { position:relative; display:flex; min-height:48px; align-items:center; gap:13px; padding:11px 10px; border:1px solid transparent; border-radius:2px; background:transparent; color:var(--muted); cursor:pointer; font:550 12px/1.4 var(--body); text-align:left; transition:background-color .18s,border-color .18s,color .18s; }
.workspace-nav button>span { display:none; }
.workspace-nav button::before { counter-increment:workspace; content:counter(workspace,decimal-leading-zero); color:var(--muted); font:500 9px var(--mono); }
.workspace-nav button[aria-selected="true"] { border-color:var(--rule); background:var(--surface); color:var(--ink); }
.workspace-nav button[aria-selected="true"]::before { color:var(--orange-text); }
.workspace-nav button[aria-selected="true"]::after { position:absolute; left:-19px; top:11px; bottom:11px; width:3px; background:var(--orange); content:""; }
.workspace-nav button:hover { border-color:var(--rule); color:var(--ink); }
.sidebar-foot { display:flex; align-items:flex-start; gap:9px; margin-top:auto; padding:18px 8px 0; border-top:1px solid var(--rule); }
.sidebar-foot .session-indicator { margin-top:5px; }
.sidebar-foot strong,.sidebar-foot small { display:block; }
.sidebar-foot strong { font-size:11px; font-weight:550; }
.sidebar-foot small { margin-top:5px; color:var(--muted); font-size:10px; }
.app-main { width:min(1400px,100%); min-width:0; margin:0 auto; padding:25px clamp(22px,3.4vw,60px) 30px; }
.app-alert { display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--rule); color:var(--ink); font-size:11px; }
.app-alert strong { flex-shrink:0; color:var(--orange-text); font:600 9px var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.app-alert span { color:var(--muted); }
.connection-status { min-height:27px; padding:9px 0 0; color:var(--muted); font:500 10px/1.5 var(--mono); }
.connection-status[data-state="success"],.inline-message[data-state="success"] { color:var(--green); }
.connection-status[data-state="error"],.inline-message[data-state="error"] { color:#a12616; }
:root[data-theme="dark"] .connection-status[data-state="error"],:root[data-theme="dark"] .inline-message[data-state="error"] { color:#ff9a83; }
.workspace-panel { outline:none; }
.workspace-panel[hidden] { display:none; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:36px 0 34px; }
.page-heading .eyebrow { margin:0 0 18px; color:var(--orange-text); font:600 9px/1.4 var(--mono); letter-spacing:.12em; }
.page-heading h1 { margin:0 0 18px; font:750 clamp(42px,5.1vw,72px)/.96 var(--display); letter-spacing:-.065em; }
.page-heading h1 em { color:var(--orange-text); font-family:var(--serif); font-weight:500; letter-spacing:-.06em; }
.page-heading p:not(.eyebrow) { max-width:540px; margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.page-heading>.state-chip { margin-top:3px; max-width:190px; }
.overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.overview-card,.content-card { min-width:0; border:1px solid var(--rule); border-radius:2px; background:var(--surface); }
.overview-card { position:relative; display:flex; min-height:148px; flex-direction:column; align-items:flex-start; gap:10px; padding:22px; transition:transform .2s var(--ease-out),border-color .2s; }
.overview-card::before { position:absolute; top:-1px; left:22px; width:22px; height:2px; background:var(--orange); content:""; }
.overview-card:hover { transform:translateY(-3px); border-color:var(--rule-strong); }
.overview-card>span { color:var(--muted); font:600 9px/1.5 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.overview-card>strong { max-width:100%; overflow-wrap:anywhere; font:650 clamp(21px,2.2vw,31px)/1.2 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.045em; }
.overview-card>small { color:var(--muted); font-size:11px; }
.content-card { margin-bottom:16px; padding:clamp(20px,2.2vw,32px); }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:24px; }
.card-heading .eyebrow,.detail-card>.eyebrow { margin-bottom:8px; color:var(--orange-text); font:600 9px/1.4 var(--mono); letter-spacing:.1em; }
.card-heading h2,.detail-card h2 { margin:0; font:650 23px/1.15 var(--display); letter-spacing:-.045em; }
.plain-note { color:var(--muted); font-size:12px; line-height:1.7; }
.two-column-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(270px,.85fr); align-items:start; gap:18px; }
.two-column-layout .content-card { margin:0; }
.detail-card { position:sticky; top:98px; overflow:hidden; background:#191815; color:#f1eee5; border-color:#35332c; }
.detail-card h2 { color:#f1eee5; }
.detail-card>.eyebrow { color:#ff9a83; }
.detail-card .detail-list dt { color:#b9b2a6; }
.detail-card .detail-list dd { color:#f1eee5; }
.detail-card .detail-list>div { border-color:#454139; }
.detail-card .state-chip { color:#f1eee5; border-color:#5f594d; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.form-grid label,.pool-choice { display:grid; gap:9px; color:var(--ink); font:550 12px/1.4 var(--body); }
.form-grid input,.form-grid select,.pool-choice select { width:100%; min-height:52px; padding:12px; border:1px solid var(--rule-strong); border-radius:2px; background:var(--paper); color:var(--ink); font:500 14px/1.4 var(--body); transition:border-color .2s,box-shadow .2s; }
.form-grid input:focus,.form-grid select:focus { border-color:var(--orange-text); }
.form-grid #amount-input { min-height:72px; font:550 34px/1.2 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.form-grid input[aria-invalid="true"] { border-color:#b42318; box-shadow:0 0 0 1px #b42318; }
.form-grid label small,.field-unit { color:var(--muted); font:500 10px/1.5 var(--mono); }
.coverage-check { display:flex; gap:12px; margin:24px 0 16px; padding:17px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.coverage-icon { display:grid; width:25px; height:25px; flex-shrink:0; place-items:center; color:var(--green); font-size:20px; }
.coverage-check strong { font-size:12px; font-weight:600; }
.coverage-check p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.reserve-explainer { margin-top:27px; padding:0 0 0 15px; border-left:2px solid #ff7653; font-size:12px; }
.reserve-explainer p { margin:7px 0 0; color:#b9b2a6; line-height:1.65; }
.action-row { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 8px; }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; gap:10px; padding:12px 17px; border:1px solid var(--rule-strong); border-radius:2px; cursor:pointer; font:650 10px/1.4 var(--mono); letter-spacing:.025em; text-transform:uppercase; transition:transform .18s var(--ease-out),background-color .18s,border-color .18s; }
.button-primary { border-color:var(--orange); background:var(--orange); color:#171613; }
.button-primary::after { content:"\2197"; margin-left:6px; font-size:16px; }
.button-primary:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--orange-light); background:var(--orange-light); color:#171613; }
.button-secondary { background:transparent; color:var(--ink); }
.button-secondary:hover:not(:disabled) { border-color:var(--orange-text); background:var(--paper-deep); }
.button:disabled { cursor:not-allowed; opacity:.48; }
.button[aria-busy="true"] { cursor:progress; }
.button[aria-busy="true"]::before { width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; content:""; animation:app-spin .7s linear infinite; }
@keyframes app-spin { to { transform:rotate(360deg); } }
.inline-message { min-height:20px; margin:9px 0; color:var(--muted); font-size:12px; }
.payment-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:25px 0 0; padding:20px 0 0; border-top:1px solid var(--rule); list-style:none; counter-reset:flow; }
.payment-progress li { display:grid; gap:10px; color:var(--muted); font:500 9px/1.4 var(--mono); }
.payment-progress li::before { content:counter(flow,decimal-leading-zero); counter-increment:flow; color:var(--orange-text); font-size:10px; }
.detail-list { display:grid; margin:22px 0; }
.detail-list>div { display:grid; grid-template-columns:minmax(85px,.8fr) minmax(0,1.2fr); gap:12px; padding:13px 0; border-bottom:1px solid var(--rule); }
.detail-list dt { color:var(--muted); font-size:11px; }
.detail-list dd { min-width:0; margin:0; overflow-wrap:anywhere; font-size:12px; font-weight:550; }
.detail-list code { font:10px/1.5 var(--mono); }
.claim-card { margin-top:18px; }
.claim-card .card-heading { margin-bottom:14px; }
.activity-list { display:grid; margin:0; padding:0; list-style:none; }
.activity-list li { position:relative; min-height:44px; padding:12px 10px 12px 25px; border-bottom:1px solid var(--rule); color:var(--muted); font-size:12px; }
.activity-list li::before { position:absolute; top:18px; left:3px; width:6px; height:6px; border:1px solid var(--rule-strong); border-radius:50%; content:""; }
.activity-list li[data-state="done"] { color:var(--ink); }
.activity-list li[data-state="done"]::before { border-color:var(--green); background:var(--green); }
.activity-list li[data-state="pending"]::before { border-color:var(--orange); background:var(--orange); }
.empty-state { color:var(--muted)!important; }.empty-state::before { display:none; }
.table-scroll { width:100%; overflow-x:auto; border:1px solid var(--rule); }
.table-scroll table { width:100%; border-collapse:collapse; text-align:left; }
.table-scroll th,.table-scroll td { min-width:118px; padding:15px 12px; border-bottom:1px solid var(--rule); font-size:12px; }
.table-scroll th { background:var(--paper); color:var(--muted); font:600 9px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.table-scroll tr:last-child td { border-bottom:0; }
.pool-choice { max-width:390px; margin-bottom:24px; }
.pool-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.utilization-block { display:grid; gap:12px; margin-top:24px; }
.utilization-block>div { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.utilization-block strong { color:var(--ink); font-family:var(--mono); }
.utilization-block progress { width:100%; height:6px; accent-color:var(--orange); }
.notice-inline { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:20px; padding:16px; border:1px solid var(--rule); border-left:2px solid var(--orange); background:var(--paper); font-size:11px; }
.notice-inline span { color:var(--muted); }
.evidence-details,.technical-details { margin-top:20px; border-top:1px solid var(--rule); }
.evidence-details summary,.technical-details summary { min-height:44px; padding:15px 0; color:var(--ink); cursor:pointer; font-size:12px; font-weight:600; }
.evidence-details p,.technical-details p { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.reconciliation-result { padding:18px; border:1px solid var(--rule); background:var(--paper); font:550 12px/1.65 var(--mono); }
.reconciliation-result[data-status="PASS"] { border-color:var(--green); color:var(--green); }
.reconciliation-result[data-status="WARNING"],.reconciliation-result[data-status="NOT_VERIFIABLE"] { border-color:#996b12; color:#76520e; }
.reconciliation-result[data-status="FAIL"] { border-color:#b42318; color:#a12616; }
:root[data-theme="dark"] .reconciliation-result[data-status="WARNING"],:root[data-theme="dark"] .reconciliation-result[data-status="NOT_VERIFIABLE"] { color:#f0c66c; }
:root[data-theme="dark"] .reconciliation-result[data-status="FAIL"] { color:#ff9a83; }
.finding-list { display:grid; gap:10px; margin:16px 0; padding:0; list-style:none; }
.finding-list li { padding:15px; border:1px solid var(--rule); border-left:2px solid #b42318; font-size:12px; }
.finding-list li p { margin:6px 0 0; color:var(--muted); }
.finding-list li strong { font:600 10px/1.5 var(--mono); }
.check-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.check-list li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:11px; }
.check-list span:last-child { color:var(--muted); font-family:var(--mono); }
.app-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:32px; padding-top:18px; border-top:1px solid var(--rule); color:var(--muted); font:500 9px/1.5 var(--mono); letter-spacing:.025em; }
.app-footer a { display:inline-flex; min-height:32px; align-items:center; color:var(--ink); text-underline-offset:4px; }.app-footer>span { color:var(--muted); }
@media(max-width:1100px) { .sandbox-layout{grid-template-columns:190px minmax(0,1fr)} .app-sidebar{padding-inline:12px}.workspace-nav button[aria-selected="true"]::after{left:-13px}.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-column-layout{grid-template-columns:1fr}.detail-card{position:static}.page-heading>.state-chip{max-width:140px} }
@media(max-width:780px) { .app-topbar{position:static;flex-wrap:wrap;gap:14px}.app-topbar-state{flex-wrap:wrap;gap:10px}.sandbox-layout{display:block}.app-sidebar{position:sticky;z-index:15;top:0;display:block;height:auto;padding:8px 12px;border-right:0;border-bottom:1px solid var(--rule)}.sidebar-label,.sidebar-foot{display:none}.workspace-nav{display:flex;gap:5px;overflow-x:auto}.workspace-nav button{min-width:max-content;min-height:44px;padding:9px 12px;font-size:11px}.workspace-nav button[aria-selected="true"]::after{display:none}.page-heading{margin-block:30px}.app-main{padding-inline:22px}.page-heading h1{font-size:clamp(42px,8vw,64px)} }
@media(max-width:560px) { .app-mode-bar{font-size:8px;letter-spacing:.08em}.app-topbar{padding:14px}.app-brand{font-size:20px}.app-topbar-state{width:100%;justify-content:space-between}.environment-pill{font-size:8px;padding:5px 6px}.role-switch{gap:6px;font-size:9px}.role-switch select{max-width:145px;font-size:11px}.app-topbar .theme-toggle{width:36px;height:36px}.app-main{padding:16px 14px 25px}.app-alert{align-items:flex-start;flex-direction:column;gap:5px}.page-heading{flex-direction:column;gap:16px}.page-heading h1{font-size:46px}.page-heading>.state-chip{max-width:none}.form-grid{grid-template-columns:1fr}.content-card{padding:22px 18px}.overview-card{min-height:135px;padding:17px}.overview-card>strong{font-size:23px}.card-heading{flex-wrap:wrap;gap:12px}.card-heading h2{font-size:22px}.pool-metrics{grid-template-columns:1fr}.action-row>.button{flex:1 1 100%}.payment-progress{gap:4px}.payment-progress li{font-size:8px}.app-footer{flex-direction:column;align-items:flex-start} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }


/* The same type-led identity, adapted to a working application. */
.page-heading h1 { font-weight:700; letter-spacing:-.065em; }
.page-heading h1 em { font-family:var(--serif); font-size:1.12em; font-weight:400; line-height:.93; }
.page-heading .eyebrow { display:flex; gap:10px; align-items:center; }
.page-heading .eyebrow::before { content:""; width:18px; height:1px; background:var(--orange); flex-shrink:0; }
.app-brand { font-family:var(--display); font-weight:750; }
.app-main { position:relative; }
.detail-card { box-shadow:8px 8px 0 color-mix(in srgb,var(--ink) 7%,transparent); }
.detail-card::after { content:""; position:absolute; bottom:0; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg,transparent 0 9px,#ff7653 9px 10px,transparent 10px 19px); opacity:.55; }
.card-heading h2 { font-weight:650; }.overview-card>strong { font-weight:650; }
.workspace-nav button[aria-selected="true"] { background:color-mix(in srgb,var(--orange) 7%,var(--surface)); }
.workspace-nav button[aria-selected="true"]::after { animation:bs-rail-in 350ms cubic-bezier(.16,1,.3,1) both; transform-origin:center; }
@keyframes bs-rail-in { from{transform:scaleY(.2)}to{transform:scaleY(1)} }
.form-grid #amount-input { font-family:var(--display); font-weight:550; }
.action-row .button { letter-spacing:.02em; }
@media(max-width:560px) { .page-heading h1 { font-size:44px; }.detail-card { box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 7%,transparent); } }
@media(prefers-reduced-motion:reduce) { .workspace-nav button[aria-selected="true"]::after { animation:none; } }
.payment-observatory { position:relative; overflow:hidden; padding:24px 28px 18px; margin-bottom:26px; border:1px solid #4b4237; background:#191815; color:#f1eee5; }
.observatory-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.observatory-heading .eyebrow { color:#ff987b; margin:0 0 7px; }
.observatory-heading h2 { margin:0; color:#f1eee5; font:600 clamp(18px,2vw,25px)/1.2 var(--display); letter-spacing:-.045em; }
.observatory-state { padding:7px 10px; border:1px solid #786e60; color:#f1eee5; font:600 10px var(--mono); }
.payment-observatory .protocol-canvas { max-width:540px; margin:-12px auto -20px; }
.observatory-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #4c4337; padding-top:12px; }
.observatory-footer p { max-width:540px; margin:0; color:#d0c7b8; font:400 11px/1.7 var(--body); }
.observatory-footer .motion-toggle { flex-shrink:0; color:#f1eee5; border-color:#786e60; }
.observatory-footer .motion-toggle:hover { color:#ff987b; border-color:#ff987b; }
.payment-observatory[data-flow-phase="payment"] .payment-energy,.payment-observatory[data-flow-phase="refund"] .refund-energy { animation-iteration-count:2; }
.page-heading h1 em { font-family:var(--body); font-size:1em; font-weight:500; }
@media(max-width:560px) { .payment-observatory { padding:18px 15px 14px; }.observatory-heading { align-items:flex-start; }.observatory-heading h2 { max-width:170px; }.observatory-footer { gap:12px; }.payment-observatory .protocol-canvas { margin:2px auto -2px; } }
.wallet-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,auto); gap:14px 28px; margin:16px 0 32px; padding:24px; border:1px solid var(--rule); border-left:3px solid var(--orange); background:var(--surface); }
.wallet-copy .eyebrow { margin:0 0 10px; }.wallet-copy h2 { margin:0; font:650 24px/1.2 var(--display); letter-spacing:-.045em; }.wallet-copy>p:last-child { margin:12px 0 0; color:var(--muted); font:500 11px/1.7 var(--mono); overflow-wrap:anywhere; }
.wallet-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; max-width:540px; }.wallet-controls label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; }.wallet-controls select { max-width:170px; min-height:34px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); padding:6px 8px; font:500 11px var(--body); }.wallet-controls .action-row { margin:0; width:100%; gap:10px; }.wallet-controls .button { min-height:40px; padding:11px 14px; font-size:9px; }
.wallet-message,.wallet-boundary { grid-column:1/-1; margin:0; font-size:11px; line-height:1.7; }.wallet-message:empty { display:none; }.wallet-message { color:var(--orange-text); }.wallet-boundary { padding-top:12px; border-top:1px solid var(--rule); color:var(--muted); }
.wallet-panel [hidden] { display:none!important; }
.wallet-diagnostics { grid-column:1/-1; color:var(--muted); font-size:11px; }.wallet-diagnostics summary { min-height:32px; padding:6px 0; cursor:pointer; }.wallet-diagnostics pre { margin:6px 0 0; padding:12px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; font:500 10px/1.7 var(--mono); }
.wallet-panel[data-wallet-state="testnet"] #wallet-status { color:var(--green); border-color:var(--green); }
@media(max-width:1100px) { .wallet-panel { grid-template-columns:1fr; }.wallet-controls { max-width:none; } }
@media(max-width:560px) { .wallet-panel { padding:20px 16px; }.wallet-controls .action-row { flex-wrap:wrap; }.wallet-copy h2 { font-size:22px; } }