/* The trade simulator: dark only, phone first, one card. Colours are the board's; the result is never green or red:
   a share of reshuffled paths is not money and must not look like a win or a loss. */
:root {
  --ground: #06080B; --surface: #11151C; --ink: #E8EFF6; --muted: #8494A8; --dim: #4F5C6A; --hair: #1C2330;
  --steel: #7E8FA3; --warn: #E0B25A;
  --up: rgb(8, 153, 129); --dn: #F23645;     /* TradingView's own up and down, used inside the chart only, never on the number */
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.5 var(--sans); }
[hidden] { display: none !important; }
main { max-width: 66rem; margin: 0 auto;
       padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
header { min-height: 44px; display: flex; align-items: center; }
.brand { font: 500 13px var(--mono); letter-spacing: .32em; color: var(--muted); text-decoration: none; text-transform: uppercase; }
.card { background: var(--surface); border-radius: 10px; padding: 18px 16px 16px; display: grid; gap: 16px; }
.card .is { border-top: 1px solid var(--hair); padding-top: 14px; }
.card .is h2 { margin: 0 0 4px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card .is p { margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 820px) {                        /* room for both: the inputs left, the result right */
  .card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "in out" "is out";
          grid-template-rows: auto 1fr; gap: 20px 28px; padding: 24px; align-items: start; }
  .in { grid-area: in; } .out { grid-area: out; } .card .is { grid-area: is; border-top: 1px solid var(--hair); padding-top: 14px; }
  .out { border-left: 1px solid var(--hair); padding-left: 28px; }
  .result { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
}
h1 { margin: 0 0 6px; font: 600 22px/1.25 var(--sans); }
.lede { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
form#f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.full { grid-column: 1 / -1; }
label { display: grid; gap: 4px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
input, select { width: 100%; min-height: 44px; border-radius: 6px; border: 1px solid var(--hair); background: var(--ground);
                color: var(--ink); font: 400 16px var(--sans); padding: 8px 10px; text-transform: none; letter-spacing: 0; }
/* The market list: Safari (WebKit) draws its own grey system box unless the native look is switched off, so it is
   switched off everywhere and the arrow drawn here, from two gradients (no image file; the site's CSP allows no data: images). */
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--ground); color: var(--ink);
         border: 1px solid var(--hair); border-radius: 6px; padding-right: 36px; cursor: pointer;
         background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
         background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
select option { background-color: var(--surface); color: var(--ink); }
input:focus-visible, select:focus-visible, button:focus-visible, .side label:has(input:focus-visible) { outline: 2px solid var(--steel); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--warn); }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; }
.side label { display: block; text-transform: none; letter-spacing: 0; }
.side input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.side span { display: flex; align-items: center; justify-content: center; min-height: 42px; font: 500 15px var(--sans);
             color: var(--muted); cursor: pointer; }
.side input:checked + span { background: var(--hair); color: var(--ink); }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.example { margin: 0; font-size: 13px; color: var(--ink); background: var(--ground); border: 1px dashed var(--dim); border-radius: 6px; padding: 8px 10px; }
.hint.bad { color: var(--warn); }
.result { border-top: 1px solid var(--hair); padding-top: 14px; }
.num { font: 300 64px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }   /* never green or red */
.numlbl { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
#fan { display: block; width: 100%; height: auto; }
#fan .bg { fill: rgb(19, 23, 34); }                                                       /* the platform's chart: TradingView's dark */
#fan .grid { stroke: #ffffff; stroke-opacity: .06; stroke-width: .6; }
#fan .axline { stroke: #2a2e39; stroke-width: 1; }
#fan .ax { font: 400 8px var(--mono); fill: #b2b5be; }
#fan .up { fill: var(--up); stroke: var(--up); } #fan .dn { fill: var(--dn); stroke: var(--dn); }
#fan .wick { stroke-width: .8; }
#fan .tpbox { fill: var(--up); fill-opacity: .2; } #fan .slbox { fill: var(--dn); fill-opacity: .2; }   /* the position tool */
#fan .entryline { stroke: #b2b5be; stroke-width: .8; }
#fan .boxlbl { font: 500 7.5px var(--sans); fill: #ffffff; fill-opacity: .9; }
#fan .tag.tp { fill: var(--up); } #fan .tag.sl { fill: var(--dn); } #fan .tag.en { fill: #5d606b; }
#fan .tagtxt { font: 500 8px var(--mono); fill: #ffffff; }
#fan .brk { stroke: #b2b5be; stroke-opacity: .5; stroke-width: .8; stroke-dasharray: 3 3; }   /* a broken price axis */
#fan .brkcut { stroke: #b2b5be; stroke-width: 1; }
#fan .lvl { stroke-width: 1.2; } #fan .lvl.tp { stroke: var(--up); } #fan .lvl.sl { stroke: var(--dn); }
#fan .grip { fill-opacity: .9; } #fan .grip.tp { fill: var(--up); } #fan .grip.sl { fill: var(--dn); }
#fan .grab { fill: rgb(0, 0, 0); fill-opacity: 0; cursor: ns-resize; touch-action: none; }   /* a thumb-sized grab area */
#fan.dragging { cursor: ns-resize; touch-action: none; }
#fan text { font: 400 9px var(--mono); fill: var(--muted); }
.facts { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.not { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.yard { margin: 8px 0 10px; font-size: 14px; color: var(--muted); }
.yard b { color: var(--ink); font-weight: 500; }
.not b { color: var(--ink); font-weight: 500; }
.facts b { color: var(--ink); font-weight: 500; }
.notes { padding: 18px 2px 0; max-width: 46rem; }
.notes h2 { margin: 18px 0 4px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.notes p, .notes li { font-size: 14px; color: var(--muted); margin: 0; }
.notes ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.notes b { color: var(--ink); font-weight: 500; }
.ask { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 14px; }
details { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 12px; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 500 11px var(--mono); letter-spacing: .14em;
          text-transform: uppercase; color: var(--muted); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--ink); }
details[open] summary::before { content: "‘2"; }
.ask label { font: 400 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.ask .row { display: flex; gap: 8px; margin-top: 8px; }
.ask button { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--hair); background: var(--surface);
              color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.small { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 380px) { form#f { grid-template-columns: 1fr 1fr; } .num { font-size: 56px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }