/* order-sim.css — A Girl & Her Futures™
 * The simulated order ticket and terminal (shared/order-sim.js). The frame comes from
 * chart-workspace.css (.cw), so it feels like the Lesson 7 workspace. */

.lc-q-in .os-cards,.lc-q-in .os-demo,.lc-q-in .os-demos,.lc-q-in .os,.lc-q-in .os-why,.lc-q-in .os-reveal,.lc-q-in .os-queue,.lc-q-in .os-end,.lc-q-in .os-optional{font-size:1rem;line-height:1.4;font-family:var(--font-body)}
.os-i1{fill:var(--fg-e0607a,#E0607A)}.os-i2{fill:var(--fg-fde8ed,#FDE8ED)}.os-i3{fill:var(--fg-ffffff,#FFFFFF);stroke:var(--fg-e0607a,#E0607A);stroke-width:3}.os-i4{fill:var(--fg-2c1810,#2C1810)}

/* Order cards */
.os-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.os-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:2px solid var(--ln-e3d3cb,#E3D3CB);background:var(--bg-ffffff,#FFFFFF);border-radius:18px;padding:16px;text-align:left;cursor:pointer;color:var(--fg-2c1810,#2C1810);transition:border-color .15s,box-shadow .15s}
.os-ico{width:44px;height:44px;display:block}.os-ico svg{display:block;width:100%;height:100%}
.os-card small{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-8a7069,#8A7069)}
.os-card b{font-size:1.08rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.os-cline{font-size:.9rem;color:var(--fg-5a4740,#5A4740)}
.os-card[aria-pressed="true"]{border-color:var(--ln-e0607a,#E0607A);background:var(--bg-fff6f3,#FFF6F3);box-shadow:0 8px 20px rgba(224,96,122,.16)}
.os-card.seen:not([aria-pressed="true"]){border-color:var(--ln-2e9a8e,#2E9A8E)}
.os-card:focus-visible,.os-dbtn:focus-visible,.os-seg button:focus-visible,.os-submit:focus-visible,.os-ticket input:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px}
.os-mini{border:1.5px solid var(--ln-e3d3cb,#E3D3CB);border-radius:16px;background:var(--bg-ffffff,#FFFFFF);padding:10px 14px;display:flex;flex-direction:column;gap:6px;animation:lcIn .3s forwards}
.os-mini svg{display:block;width:100%;max-height:130px}
.lc-q-in .os-mini p{margin:0;font-size:.98rem;color:var(--fg-5a4740,#5A4740)}
.os-mgrid{stroke:var(--fg-f3ece8,#F3ECE8);stroke-width:1}
.os-mt{font-size:12px;font-weight:700;fill:var(--fg-8a7069,#8A7069)}
.os-mlevel{stroke:var(--fg-5b53b8,#5B53B8);stroke-width:2.5;stroke-dasharray:7 5}.os-mlevel.stop{stroke:var(--fg-f5a857,#F5A857)}
.os-mprice{fill:var(--fg-2c1810,#2C1810)}
.os-mord rect{fill:var(--fg-2e9a8e,#2E9A8E)}.os-mord text{font-size:12px;font-weight:900;fill:var(--fg-ffffff,#FFFFFF)}
.os-mord{animation:osShoot 1.4s ease-in-out infinite}
@keyframes osShoot{0%{transform:translateX(0)}55%,100%{transform:translateX(170px)}}
.os-mfill{font-size:13px;font-weight:800;fill:var(--fg-1f7a70,#1F7A70);animation:osBlink 1.4s infinite}
@keyframes osBlink{0%,50%{opacity:0}60%,100%{opacity:1}}
.os-mwalk{fill:var(--fg-2c1810,#2C1810);animation:osWalk 2.6s ease-in-out infinite alternate}
@keyframes osWalk{0%{transform:translate(0,0)}100%{transform:translate(220px,40px)}}
.os-mwait{font-size:13px;font-weight:800;fill:var(--fg-5b53b8,#5B53B8)}
.os-mrise{fill:var(--fg-2c1810,#2C1810);animation:osRise 2.2s ease-in-out infinite}
@keyframes osRise{0%{transform:translate(0,0)}60%,100%{transform:translate(200px,-62px)}}
.os-mact{font-size:13px;font-weight:800;fill:var(--fg-b5671d,#B5671D);animation:osBlink 2.2s infinite}

/* Terminal */
.os-quote{font-size:.84rem;color:var(--fg-5a4740,#5A4740);white-space:nowrap}
.os-quote b{color:var(--fg-2c1810,#2C1810)}
.os-body{display:grid;grid-template-columns:minmax(0,1fr)}
.os-body:has(.os-ticket){grid-template-columns:minmax(0,1fr) 220px}
.os-body:has(.os-ticket) .os-chart{aspect-ratio:auto;min-height:260px}
.os-chart{position:relative;aspect-ratio:600/230;min-height:180px}
.os-chart svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.os-line{fill:none;stroke:var(--fg-2c1810,#2C1810);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.os-now{fill:var(--fg-e0607a,#E0607A)}
.os-lasttag rect{fill:var(--fg-2c1810,#2C1810)}.os-lasttag text{font-size:11px;font-weight:800;fill:var(--fg-ffffff,#FFFFFF)}
.os-lv line{stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.os-lv.limit line{stroke:var(--fg-5b53b8,#5B53B8)}.os-lv.limit rect{fill:var(--fg-5b53b8,#5B53B8)}
.os-lv.stop line{stroke:var(--fg-f5a857,#F5A857)}.os-lv.stop rect{fill:var(--fg-f5a857,#F5A857)}
.os-lv text{font-size:11px;font-weight:800;fill:var(--fg-ffffff,#FFFFFF)}
.os-lv .os-lvname{fill:var(--fg-5a4740,#5A4740);font-size:11px}
.os-fill circle{fill:var(--fg-2e9a8e,#2E9A8E);stroke:var(--fg-ffffff,#FFFFFF);stroke-width:2.5}
.os-status{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--ln-efe3dd,#EFE3DD);background:var(--bg-fffaf8,#FFFAF8);font-size:.92rem;color:var(--fg-5a4740,#5A4740)}
.os-status b{color:var(--fg-2c1810,#2C1810)}
.os-status span:not(.os-dot) span{color:var(--fg-8a7069,#8A7069)}
.os-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--bg-cdbfba,#CDBFBA)}
.os-status.work .os-dot{background:var(--bg-f5a857,#F5A857);animation:osPulse 1s infinite}
.os-status.ok{background:var(--bg-e3f6f3,#E3F6F3)}.os-status.ok .os-dot{background:var(--bg-2e9a8e,#2E9A8E)}
.os-status.no{background:var(--dbg-fff6f2,#FFF6F2)}.os-status.no .os-dot{background:var(--dbg-e0607a,#E0607A)}
@keyframes osPulse{50%{opacity:.35}}
.os-ticket{border-left:1px solid var(--ln-efe3dd,#EFE3DD);background:var(--bg-fffaf8,#FFFAF8);padding:12px;display:flex;flex-direction:column;gap:10px}
.os-th{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-8a7069,#8A7069)}
.os-seg{display:flex;gap:4px;background:var(--bg-f1e6e1,#F1E6E1);border-radius:12px;padding:3px}
.os-seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:9px 4px;font:800 .86rem var(--font-body);color:var(--fg-2c1810,#2C1810);cursor:pointer}
.os-side button[data-side="buy"][aria-pressed="true"]{background:var(--bg-2e9a8e,#2E9A8E);color:var(--fg-ffffff,#FFFFFF)}
.os-side button[data-side="sell"][aria-pressed="true"]{background:var(--dbg-d9536f,#D9536F);color:var(--dfg-ffffff,#FFFFFF)}
.os-type button[aria-pressed="true"]{background:var(--bg-ffffff,#FFFFFF);color:var(--fg-b83d61,#B83D61);box-shadow:0 2px 6px rgba(44,24,16,.12)}
.os-pricef{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:700;color:var(--fg-5a4740,#5A4740)}
.os-pricef[hidden]{display:none}
.os-pricef input{border:2px solid var(--ln-e3d3cb,#E3D3CB);border-radius:10px;padding:9px 10px;font:800 1rem var(--font-body);color:var(--fg-2c1810,#2C1810);background:var(--bg-ffffff,#FFFFFF);width:100%}
.lc-q-in .os-qty{margin:0;font-size:.8rem;color:var(--fg-8a7069,#8A7069)}
.os-submit{border:0;background:var(--bg-2c1810,#2C1810);color:var(--fg-ffffff,#FFFFFF);border-radius:999px;padding:11px 12px;font:800 .92rem var(--font-body);cursor:pointer}
.os-submit:disabled{opacity:.45;cursor:default}

/* Demos and the no-fill story */
.os-demos{display:flex;gap:8px;flex-wrap:wrap}
.os-dbtn{flex:1 1 160px;border:2px solid var(--ln-e3d3cb,#E3D3CB);background:var(--bg-ffffff,#FFFFFF);border-radius:14px;padding:10px 12px;font:800 .92rem var(--font-body);color:var(--fg-2c1810,#2C1810);cursor:pointer}
.os-dbtn.on{border-color:var(--ln-e0607a,#E0607A);background:var(--bg-fff6f3,#FFF6F3)}
.os-dbtn:disabled{opacity:.6;cursor:default}
.os-why{display:flex;justify-content:center}.os-why[hidden]{display:none}
.os-why .v2-btn{flex:none}
.os-reveal{display:flex;flex-direction:column;gap:10px;align-items:flex-start;animation:lcIn .3s forwards}
.os-reveal[hidden],.os-queue[hidden],.os-end[hidden],.os-optional[hidden]{display:none}
.os-qbox{border:2px solid var(--ln-5b53b8,#5B53B8);background:var(--bg-f6f5fd,#F6F5FD);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;animation:lcIn .3s forwards}
.os-qbox small{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-5b53b8,#5B53B8)}
.os-qrow{display:flex;gap:5px;flex-wrap:wrap}
.os-qrow i{width:30px;height:30px;border-radius:8px;background:var(--bg-e4e2f8,#E4E2F8);display:grid;place-items:center;font-style:normal;font-size:.62rem;font-weight:900;color:var(--fg-ffffff,#FFFFFF)}
.os-qrow i.done{background:var(--bg-2e9a8e,#2E9A8E)}
.os-qrow i.you{background:var(--bg-e0607a,#E0607A)}
.lc-q-in .os-qbox p{margin:0;font-size:.95rem;color:var(--fg-2c1810,#2C1810)}
.os-end{display:flex;flex-direction:column;gap:12px}
.os-instr{font-weight:600}
.lc-q-in .os-optional{border:1.5px dashed var(--ln-e3d3cb,#E3D3CB);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.os-optional>small{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-8a7069,#8A7069)}
.os-yn{display:flex;gap:10px}.os-yn .s2-opt{flex:1}
.lc-q-in .os-oa{margin:0;font-weight:600}.os-oa.good{color:var(--fg-1f7a70,#1F7A70)}.os-oa.bad{color:var(--dfg-b83a57,#B83A57)}

@container (max-width:620px){
  .os-body:has(.os-ticket){grid-template-columns:minmax(0,1fr)}
  .os-ticket{border-left:0;border-top:1px solid var(--ln-efe3dd,#EFE3DD)}
  .os-quote span{display:none}
  .os-chart{aspect-ratio:auto;height:220px;min-height:0}
  .os-body:has(.os-ticket) .os-chart{min-height:0}
}
@media (max-width:640px){
  .os-cards{grid-template-columns:1fr}
  .os-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i s" "i b" "i l";column-gap:12px;row-gap:0;align-items:center;padding:12px 14px}
  .os-card .os-ico{grid-area:i}.os-card small{grid-area:s}.os-card b{grid-area:b}.os-card .os-cline{grid-area:l}
}
@media (prefers-reduced-motion:reduce){
  .os-mord,.os-mfill,.os-mwalk,.os-mrise,.os-mact,.os-status.work .os-dot,.os-mini,.os-reveal,.os-qbox{animation:none;opacity:1}
}