/* Expression builder. Colours follow the same light/dark tokens as the other labs. */
.arch-expression{--expr-surface:var(--arch-surface,var(--play-stage,#fff));--expr-ink:var(--arch-ink,var(--ink,#17243c));--expr-muted:var(--arch-muted,var(--ink-2,#58677d));--expr-line:var(--arch-field-line,var(--ink-3,#6c7c92));--expr-soft:var(--arch-soft-line,var(--play-line,#d7dfec));--expr-focus:var(--arch-focus,var(--accent,#2457d6));--expr-on:var(--arch-primary-ink,var(--on-ink,#fff));--expr-good:var(--arch-good,var(--ok,#1f7a4b));--expr-bad:var(--arch-bad,var(--bad,#a33a2a));display:grid;gap:18px;min-width:0;color:var(--expr-ink);font-size:16px;line-height:1.6}
.arch-expression *{box-sizing:border-box}
.arch-expression [hidden]{display:none!important}
.arch-lab .arch-expression :is(p,h4){margin:0}
.arch-expression h4{font-size:18px;font-weight:650;line-height:1.4}
.arch-expression button,.arch-expression select{font:inherit;line-height:1.4;min-width:44px;min-height:44px;max-width:100%;border:1px solid var(--expr-line);background:var(--expr-surface);color:var(--expr-ink);cursor:pointer;border-radius:12px;scroll-margin-block:120px}
.arch-expression button{padding:10px 14px;white-space:normal}
.arch-expression :is(button,select):focus-visible{outline:3px solid var(--expr-focus);outline-offset:3px}
.arch-expression button[aria-disabled=true]{opacity:.5;cursor:default}
.arch-expression :is(.expr-parts,.expr-actions){display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.arch-expression .expr-parts button{flex:1 1 190px;text-align:center}
.arch-expression .expr-parts button[aria-pressed=true],.arch-expression .expr-primary{background:var(--expr-ink);border-color:var(--expr-ink);color:var(--expr-on);font-weight:650}
.arch-expression .expr-part-rule{color:var(--expr-muted);font-size:15px}
.arch-expression .expr-section{display:grid;gap:12px;min-width:0;padding:16px 0;border-top:1px solid var(--expr-soft)}
.arch-expression .expr-help{font-size:15px;color:var(--expr-muted)}
.arch-expression .expr-small{font-size:14px;color:var(--expr-muted)}
.arch-expression .expr-removal{display:flex;flex-wrap:wrap;gap:8px}
.arch-expression .expr-digit-choice{width:48px;height:48px;min-width:48px;padding:0;font-size:22px;font-weight:600;border-radius:12px}
.arch-expression .expr-digit-choice[aria-pressed=true]{text-decoration:line-through;text-decoration-thickness:3px;background:var(--expr-ink);color:var(--expr-on);border-color:var(--expr-ink)}
.arch-expression .expr-chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;min-width:0;padding-block:5px}
.arch-expression .expr-unit{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;flex-wrap:wrap}
.arch-expression .expr-number-wrap{display:inline-flex;align-items:center;min-width:0;max-width:100%;flex-wrap:wrap}
.arch-expression .expr-number{width:46px;height:46px;min-width:46px;padding:0;font-size:22px;font-weight:600;border-radius:10px}
.arch-expression .expr-number[aria-pressed=true]{outline:3px solid var(--expr-focus);outline-offset:2px;background:var(--expr-ink);color:var(--expr-on);border-color:var(--expr-ink)}
.arch-expression .expr-bracket{font-size:26px;line-height:1.2;color:var(--expr-ink);overflow-wrap:anywhere;max-width:100%}
.arch-expression .expr-bracket:empty{display:none}
.arch-expression .expr-chain select{width:57px;height:46px;min-width:57px;padding:4px 3px;font-size:23px;text-align:center;border-radius:10px}
.arch-expression .expr-chain select.expr-joined{width:112px;min-width:112px;font-size:16px}
.arch-expression .expr-selection-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
.arch-expression .expr-selection{font-size:15px;font-weight:600;flex:1 1 180px}
.arch-expression .expr-selection-row button{font-size:14px}
.arch-expression .expr-groups{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.arch-expression .expr-groups:empty{display:none}
.arch-expression .expr-group-chip{font-size:16px;border-radius:10px;text-align:left;overflow-wrap:anywhere}
.arch-expression .expr-summary{display:grid;gap:14px;min-width:0;padding:18px 16px;border:1px solid var(--expr-soft);border-radius:16px;background:var(--expr-surface)}
.arch-expression .expr-preview{display:flex;flex-wrap:wrap;gap:3px 6px;align-items:baseline;min-width:0;font-size:23px;line-height:1.7;font-variant-numeric:tabular-nums}
.arch-expression .expr-preview-term{max-width:100%;overflow-wrap:anywhere}
.arch-expression .expr-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.arch-expression .expr-totals>div{display:grid;gap:3px;min-width:0}
.arch-expression .expr-totals span{font-size:14px;color:var(--expr-muted)}
.arch-expression .expr-value{font-size:25px;line-height:1.3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.arch-expression .expr-summary>.expr-primary{justify-self:start}
.arch-expression .expr-verdict{min-width:0}
.arch-expression .expr-verdict:empty{display:none}
.arch-expression .expr-verdict>p{font-weight:600}
.arch-expression .expr-good{color:var(--expr-good)}
.arch-expression .expr-bad{color:var(--expr-bad)}
.arch-expression .expr-checks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.arch-expression .expr-checks li{display:flex;align-items:flex-start;gap:9px;font-size:14px;min-width:0}
.arch-expression .expr-checks li>div{min-width:0}
.arch-expression .expr-checks li p{margin-top:2px;color:var(--expr-muted)}
.arch-expression .expr-check-mark{flex:0 0 18px;font-size:19px;font-weight:700;line-height:1.3;color:var(--expr-bad)}
.arch-expression .expr-checks li[data-pass=true] .expr-check-mark{color:var(--expr-good)}
.arch-expression .expr-notice{font-size:14px;color:var(--expr-muted)}
.arch-expression .expr-notice:empty{display:none}
@media(max-width:430px){.arch-expression{gap:14px}.arch-expression .expr-summary{padding:14px 12px}.arch-expression .expr-actions button{flex:1 1 150px}.arch-expression .expr-preview{font-size:22px}.arch-expression .expr-chain{gap:10px 6px}}

.arch-expression .expr-sign{position:relative;display:inline-flex;flex:0 0 auto}
.arch-expression .expr-join-icon{display:none;pointer-events:none}
.arch-expression .expr-reading{font-size:14px;font-weight:600;color:var(--expr-muted)}
@media(max-width:360px){
 .arch-expression .expr-unit{gap:4px}
 .arch-expression .expr-number{width:44px;height:44px;min-width:44px;font-size:22px}
 .arch-expression .expr-chain select,.arch-expression .expr-chain select.expr-joined{width:44px;height:44px;min-width:44px;font-size:22px;padding:0;text-align:center;appearance:none;-webkit-appearance:none}
 .arch-expression .expr-chain select.expr-joined{color:transparent}
 .arch-expression .expr-chain select.expr-joined option{color:var(--expr-ink)}
 .arch-expression .expr-join-icon{display:block;position:absolute;inset:0;text-align:center;line-height:44px;font-size:22px;color:var(--expr-ink)}
}