/* orders.css: refinery fuel grades, the fuel depot and City Orders (js/orders.js).
   Same look as the LiveOps cards (css/liveops.css): NatureJAB theme tokens from css/style.css, with fallbacks. */
.or-card{margin:10px 0;padding:10px 12px;background:var(--panel-deep,#22231c);border:1px solid var(--panel-edge,#2a2b24);color:var(--ink,#fafafa);text-align:left}
.or-card.or-mini{margin:10px 0 6px;padding:8px 10px}
.or-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.or-head h3,.or-sec h4{margin:0;font-family:var(--font-mono,monospace);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--nj-orange,#ff5b1f)}
.or-sec{margin-top:10px;padding-top:10px;border-top:1px solid var(--nj-line,#2a2b24)}
.or-mini .or-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.or-sec h4{margin-bottom:6px;color:var(--nj-grey,#a8a393)}
.or-note{display:block;margin:6px 0 0;font-size:11px;color:var(--nj-grey,#a8a393);line-height:1.4}

/* orders */
.or-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.or-order{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:6px 8px;background:var(--panel,#1a1b15);border:1px solid var(--nj-line,#2a2b24);border-inline-start:3px solid var(--or-c,#e0b23a)}
.or-ic{font-size:18px;text-align:center;line-height:1}
.or-tx{min-width:0}
.or-tx p{margin:1px 0 4px;font-size:13px;line-height:1.35}
.or-from{display:block;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--nj-green,#5dba63)}
.or-pay{display:block;font-size:11px;color:var(--nj-grey,#a8a393);line-height:1.3}
.or-bar{position:relative;height:6px;background:var(--panel-deep,#22231c);border:1px solid var(--nj-line,#2a2b24);margin-bottom:3px}
.or-bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--or-c,#e0b23a);transition:width .5s ease-out}
.or-act{text-align:end}
.or-go{min-height:40px;min-width:76px;padding:0 12px;font-family:var(--font-mono,monospace);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.or-need,.or-lock,.or-done{display:inline-block;max-width:96px;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.5px;line-height:1.3;color:var(--nj-grey,#a8a393)}
.or-done{color:var(--nj-green,#5dba63);font-weight:700}
.or-order.ready{border-color:var(--nj-green,#5dba63);border-inline-start-color:var(--or-c,#e0b23a)}
.or-order.done{opacity:.7}
.or-order.locked .or-tx p{color:var(--nj-grey,#c9c3b2)}

/* depot tanks */
.or-depot{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.or-tank{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;background:var(--panel,#1a1b15);border:1px solid var(--nj-line,#2a2b24)}
.or-cyl{position:relative;width:22px;height:30px;border:2px solid var(--or-c,#e0b23a);border-radius:6px 6px 3px 3px;overflow:hidden;background:rgba(0,0,0,.25)}
.or-cyl i{position:absolute;left:0;right:0;bottom:0;background:var(--or-c,#e0b23a);transition:height .5s ease-out}
.or-tank b{font-family:var(--font-mono,monospace);font-size:14px;line-height:1.1;color:var(--ink,#fafafa)}
.or-tank small{font-size:11px;color:var(--nj-grey,#a8a393)}
.or-tank.locked{opacity:.4}

/* grade picker */
.or-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.or-g{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:58px;padding:6px 2px;background:var(--panel,#1a1b15);border:1px solid var(--nj-line,#58606a);border-radius:3px;color:var(--ink,#fafafa);font:inherit;cursor:pointer}
.or-g span{font-size:16px;line-height:1.1}
.or-g b{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.5px}
.or-g small{font-size:11px;color:var(--nj-grey,#a8a393);line-height:1.2;text-align:center}
.or-g.on{border:2px solid var(--or-c,#e0b23a);background:var(--panel-deep,#22231c)}
.or-g.locked{opacity:.45;cursor:default}
.or-g:focus-visible,.or-go:focus-visible{outline:2px solid var(--nj-orange,#ff5b1f);outline-offset:2px}

/* stamps */
.or-stamps{margin-top:10px;padding-top:10px;border-top:1px solid var(--nj-line,#2a2b24)}
.or-stamps>small{display:block;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--nj-grey,#a8a393);margin-bottom:4px}
.or-stamps .or-note{margin:0}
.or-srow{display:flex;gap:6px;flex-wrap:wrap}
.or-stamp{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px dashed var(--nj-orange,#ff5b1f);font-size:11px}
.or-stamp i{font-style:normal;font-size:14px}
.or-stamp b{font-weight:600}
.or-stamp em{font-style:normal;font-family:var(--font-mono,monospace);font-size:11px;color:var(--nj-grey,#a8a393)}
.or-thanks{margin:8px 0 0;font-size:12px;color:var(--nj-green,#5dba63);min-height:0}
.or-thanks:empty{display:none}
.or-thanks.on{animation:or-pop .6s ease-out 1}
@keyframes or-pop{0%{transform:scale(1)}35%{transform:scale(1.04)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.or-thanks.on{animation:none}.or-bar i,.or-cyl i{transition:none}}
@media (max-width:360px){.or-order{grid-template-columns:22px 1fr}.or-act{grid-column:2;text-align:start}}
[dir="rtl"] .or-card{text-align:right}