/* glen-design: v1 */
:root{ --op-chart-ink:var(--accent); }
.op-page{ display:grid; gap:var(--s5); }
.op-page .page-head{ margin-bottom:0; }
.op-page .btn{ min-height:var(--h-touch); }
.op-page .card,.op-page .btn{ transition:none; }
.op-hero{ display:grid; gap:var(--s4); }
.op-instruments{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
.op-instrument{ border:0; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:var(--s3); min-width:0; color:var(--ink); }
.op-instrument-top{ display:flex; flex-direction:column; gap:var(--s2); align-items:start; }
.op-instrument .label{ min-height:40px; }
.op-instrument .fig{ font-size:var(--fs-2xl); white-space:nowrap; }
.op-state{ font-size:var(--fs-micro); font-weight:600; padding:var(--s1) var(--s2); border-radius:var(--r-pill); background:var(--surface-3); }
.op-ok .op-state{ background:var(--ok-tint); color:var(--ok); }
.op-watch .op-state{ background:var(--warn-tint); color:var(--warn); }
.op-bad .op-state{ background:var(--bad-tint); color:var(--bad); }
.op-instrument[aria-pressed="true"]{ box-shadow:var(--shadow-1),inset 0 0 0 1px var(--accent); }
.op-target-text,.op-direction{ color:var(--ink-dim); font-size:var(--fs-sm); line-height:1.4; }
.op-gauge{ position:relative; display:block; height:24px; background:var(--surface-3); border-radius:var(--r-pill); margin:var(--s3) 0 var(--s1); }
.op-safe{ position:absolute; top:0; bottom:0; background:var(--ok-tint); border-radius:inherit; }
.op-gauge i{ position:absolute; left:0; top:10px; height:4px; width:var(--value); background:var(--accent); border-radius:var(--r-pill); }
.op-gauge b{ position:absolute; left:var(--target); top:-4px; bottom:-4px; width:2px; background:var(--ink-dim); }
.op-gauge em{ position:absolute; left:var(--value); top:5px; width:14px; height:14px; transform:translateX(-50%); border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--tint-2); }
.op-history{ display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr); gap:var(--s5); align-items:center; }
.op-history-copy{ display:grid; gap:var(--s3); }
.op-history-copy p{ margin:0; }
.op-plot{ width:100%; height:auto; overflow:visible; }
.op-plot text{ fill:var(--ink-dim); font:var(--fs-micro) var(--font-mono); }
.op-line{ fill:none; stroke:var(--op-chart-ink); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.op-target-line{ fill:none; stroke:var(--ink-dim); stroke-width:1.5; stroke-dasharray:5 5; }
.op-point{ fill:var(--accent); opacity:.3; transform-box:fill-box; transform-origin:center; }
.op-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
.op-wide{ grid-column:1/-1; }
.op-panel{ min-width:0; }
.op-panel-head{ display:grid; gap:var(--s2); margin-bottom:var(--s5); }
.op-panel-head p{ margin:0; }
.op-order-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
.op-legend{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); color:var(--ink-dim); font-size:var(--fs-sm); margin-bottom:var(--s3); }
.op-legend>span{ display:inline-flex; align-items:center; gap:var(--s2); }
.op-legend i{ display:inline-block; width:16px; height:6px; border-radius:2px; background:var(--accent); }
.op-legend .op-key-target{ background:repeating-linear-gradient(90deg,var(--ink-dim) 0 3px,transparent 3px 6px); }
.op-legend .op-key-low{ background:var(--bad-tint); box-shadow:inset 0 0 0 1px var(--bad); }
.op-legend .op-key-safe{ background:var(--ok-tint); box-shadow:inset 0 0 0 1px var(--ok); }
.op-legend .op-key-over{ background:var(--warn-tint); box-shadow:inset 0 0 0 1px var(--warn); }
.op-stock-row{ display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,2fr) 104px; gap:var(--s5); align-items:center; padding:var(--s4) 0; border-bottom:1px solid var(--line); }
.op-stock-name,.op-stock-value{ display:grid; gap:var(--s1); }
.op-stock-name small{ color:var(--ink-dim); font-size:var(--fs-sm); }
.op-stock-value{ text-align:right; font-size:var(--fs-sm); }
.op-stock-value>span{ color:var(--ink-dim); }
.op-bad .op-stock-value>span{ color:var(--bad); }
.op-warn .op-stock-value>span,.op-watch .op-stock-value>span{ color:var(--warn); }
.op-stock-track{ position:relative; height:24px; background:var(--surface-3); border-radius:var(--r-sm); overflow:hidden; }
.op-stock-track>span{ position:absolute; top:0; bottom:0; }
.op-stock-low{ background:var(--bad-tint); border-right:1px solid var(--bad); }
.op-stock-band{ background:var(--ok-tint); border-left:1px solid var(--ok); border-right:1px solid var(--ok); }
.op-stock-over{ background:var(--warn-tint); }
.op-stock-track>i{ position:absolute; left:0; top:10px; height:4px; background:var(--accent); border-radius:var(--r-pill); }
.op-stock-scale{ display:flex; justify-content:space-between; gap:var(--s2); margin-top:var(--s2); font-size:var(--fs-micro); color:var(--ink-dim); }
.op-stock-note{ grid-column:1/-1; margin:0; }
.op-table-wrap{ overflow-x:auto; }
.op-table{ width:100%; border-collapse:collapse; text-align:left; }
.op-table th,.op-table td{ padding:var(--s4) var(--s3); border-bottom:1px solid var(--line); }
.op-table thead th{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-dim); }
.op-table th:first-child{ padding-left:0; }
.op-table th:not(:first-child),.op-table td{ text-align:right; white-space:nowrap; }
.op-table tbody th{ font-weight:600; min-width:180px; }
.op-table th small{ display:block; font-weight:400; font-size:var(--fs-sm); color:var(--ink-dim); margin-top:var(--s1); }
.op-table td{ font-size:var(--fs-sm); }
.op-sites{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s3); }
.op-site{ display:grid; align-content:start; gap:var(--s2); padding:var(--s4); background:var(--surface-2); border-radius:var(--r-sm); }
.op-site p{ margin:0; }
.op-site-state{ font-size:var(--fs-micro); font-weight:600; color:var(--ok); }
.op-site-state.op-bad{ color:var(--bad); }.op-site-state.op-warn{ color:var(--warn); }
.op-focused{ outline:2px solid var(--accent); outline-offset:4px; }
.op-page button:disabled{ opacity:.4; pointer-events:none; }
@media(hover:hover) and (pointer:fine){
 .op-page .card:hover,.op-stock-row:hover,.op-site:hover,.op-table tbody tr:hover{ transform:translateY(-2px); }
 .op-page .btn:hover{ transform:translateY(-2px); }
 .op-point:hover{ transform:scale(1.25); opacity:1; }
 .op-instrument:hover{ box-shadow:var(--shadow-2),inset 0 0 0 1px var(--accent); }
}
.op-page button:active{ transform:scale(.97); }
@media(prefers-reduced-motion:no-preference){
 .op-page .card,.op-page button,.op-stock-row,.op-site,.op-table tbody tr,.op-point{ transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); }
 .op-instrument.reveal.in .op-gauge i{ animation:op-measure var(--dur-reveal) var(--ease-out) backwards; transform-origin:left; }
 .op-instrument.reveal.in .op-gauge em{ animation:op-land var(--dur-reveal) var(--ease-out) backwards; }
 @keyframes op-measure{ from{ clip-path:inset(0 100% 0 0); } }
 @keyframes op-land{ from{ opacity:0; } }
 .op-page button:active{ transition-duration:var(--dur-instant); }
}
@media(prefers-reduced-motion:reduce){ .op-page *{ animation:none!important; transition:none!important; } }
@media(max-width:1100px){ .op-instruments{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){
 .op-history,.op-order-grid{ grid-template-columns:1fr; } .op-stock-row{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); }
 .op-stock-chart{ grid-row:2; grid-column:1/-1; } .op-stock-value{ grid-column:2; grid-row:1; }
 .op-page .card{ padding:var(--s4); } .op-instruments{ gap:var(--s2); } .op-instrument .fig{ font-size:var(--fs-xl); }
 .op-instrument .label{ min-height:60px; } .op-instrument{ gap:var(--s2); } .op-sites{ grid-template-columns:1fr; }
 .op-grid,.op-page{ gap:var(--s4); }
}