/* NiftyOPT terminal — the dashboard's faces (IBM Plex Sans, JetBrains Mono), the /oi page's palette
   brightened, and a light theme with the same meanings (the chart colours are the matching table in
   terminal.js). One screen, positions below. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root, :root[data-theme="dark"] {
  --ground: #0d1117; --panel: #151c27; --ink: #f4f7fb; --muted: #a3b3c6; --line: #2c3849; --grid: #1f2a38;
  --call: #ff7a5c; --put: #3ddc97; --spot: #b4c0cf; --chip: #1e2836; --amber: #fbbf24;
  --up: #34d399; --down: #f87171; --blue: #60a5fa; --blue-ink: #93c5fd; --zoom-bg: rgba(21, 28, 39, .9); --crude: #22d3ee; --crude-soft: rgba(34, 211, 238, .32);
}
:root[data-theme="light"] {
  --ground: #f3f5f8; --panel: #ffffff; --ink: #0b1220; --muted: #3f4d5e; --line: #cfd8e3; --grid: #e3e8ef;
  --call: #c8401f; --put: #0b8a55; --spot: #33404f; --chip: #e8edf3; --amber: #b3400a;
  --up: #15803d; --down: #c81e1e; --blue: #2563eb; --blue-ink: #1e3a8a; --zoom-bg: rgba(255, 255, 255, .92); --crude: #0891b2; --crude-soft: rgba(8, 145, 178, .28);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 14px/1.4 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex-grow: 1; }
a { color: var(--spot); }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* top bar */
.top { display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.q { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.big { font-size: 22px; font-weight: 600; }
.mid { font-size: 16px; font-weight: 600; }
.links { display: flex; gap: 14px; font-size: 12px; white-space: nowrap; }
@media (max-width: 1400px) { .links a:last-child { display: none; } }
@media (max-width: 1260px) { .top { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 8px 18px; } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); align-self: center; }
.dot.on { background: var(--put); box-shadow: 0 0 0 3px rgba(63, 185, 138, .18); }
.dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(227, 179, 65, .18); }

/* first screen: the chart column and the heatmap */
.row { display: flex; gap: 12px; padding: 10px 14px; height: calc(100vh - 52px); min-height: 680px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.chartcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; user-select: none; }
.heatcol { flex: 0 0 470px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; position: relative; }
.row.heat-max .heatcol { flex-basis: 54%; }
.row.heat-min .heatcol { flex-basis: 38px; padding: 0; }
.row.heat-min .heatcol > :not(.strip) { display: none; }
.strip { display: none; }
.row.heat-min .strip { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; }
.strip span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.strip:hover { color: var(--ink); }

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 30px; }
h1, h2 { margin: 0; font-weight: 600; white-space: nowrap; }
h1 { font-size: 16px; }
h2 { font-size: 15px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { font-size: 12px; padding: 6px 11px; border: 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.seg button:disabled { opacity: .4; cursor: default; }
.seg.sm button { padding: 3px 10px; }
/* the crude switch: the track fills and the knob moves right when the line is on */
.switch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.switch .track { position: relative; flex: 0 0 auto; width: 24px; height: 14px; border-radius: 7px; background: var(--line); transition: background .15s; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: left .15s, background .15s; }
.switch[aria-checked="true"] { color: var(--ink); }
.switch[aria-checked="true"] .track { background: var(--crude-soft); }
.switch[aria-checked="true"] .knob { left: 12px; background: var(--crude); }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .knob { transition: none; } }
.crude-val:empty { display: none; }
/* the chart's bar keeps one row: when it is narrow the change on the crude switch goes first, then the name shortens to CL */
.chartbar { container-type: inline-size; }
.switch .crude-short { display: none; }
@container (max-width: 830px) { .crude-val { display: none; } }
@container (max-width: 760px) { .switch .crude-long { display: none; } .switch .crude-short { display: inline; } }
.oiplot.dragging, .oiplot.dragging * { cursor: grabbing !important; }
.icon { border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer;
  width: 28px; height: 28px; padding: 0; font-size: 15px; line-height: 1; }
.icon:hover { color: var(--ink); background: var(--chip); }
.icon.theme { font-size: 16px; }

.mu { position: relative; height: 40px; flex: 0 0 auto; overflow: hidden; }
.mu .w { position: absolute; top: 1px; height: 38px; border-right: 1px solid var(--panel); overflow: hidden; display: flex;
  flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 0; color: #fff; }
.mu .t { font-size: 10px; font-weight: 500; opacity: .95; }
.mu .t.v { font-size: 8px; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; }
.mu .s { font-size: 11.5px; font-weight: 700; }
.mu .name { position: absolute; left: 0; top: 12px; text-align: right; font-size: 11px; color: var(--muted); }

.facts { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.fact { background: var(--chip); border-radius: 3px; padding: 4px 9px; font-size: 12.5px; color: var(--muted); }
.fact b { font-weight: 600; color: var(--ink); }
.fact b.call { color: var(--call); } .fact b.put { color: var(--put); }

.legs { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; align-items: center; }
.legs:empty { display: none; }
.legs .lp { padding: 3px 8px; border-radius: 3px; font: 600 11.5px/16px 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.plot { position: relative; flex: 0 0 auto; }
.plot svg { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.oiplot { flex: 1 1 auto; min-height: 240px; }
.gapplot { height: 88px; }
.vixplot { height: 80px; }
.ovl { position: absolute; inset: 0; pointer-events: none; }
.ovl div { position: absolute; font: 500 11px/14px 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ovl .tag { padding: 0 4px; border-radius: 2px; }
.ovl .note { color: var(--blue-ink); }
.ovl .auc { color: var(--muted); writing-mode: vertical-rl; }
.ovl .last { font-size: 12px; font-weight: 600; }
.zoom { position: absolute; left: 80px; bottom: 10px; display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  background: var(--zoom-bg); }
.zoom button { width: 26px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 14px; line-height: 1; }
.zoom button:hover { background: var(--chip); }
.sub { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sub .seg { margin-left: auto; }
.times { position: relative; height: 14px; flex: 0 0 auto; }
.times div { position: absolute; top: 0; width: 44px; text-align: center; font: 500 11px/14px 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }

.heatbody { position: relative; flex: 1 1 auto; min-height: 200px; }
.heatbody svg { position: absolute; left: 0; top: 0; }
.heatbody .ovl div { font-size: 12px; line-height: 15px; }
.heatbody .ovl .k { font-size: 12px; text-align: center; }
.heatbody .ovl .stale { opacity: .45; }
.heatbody .ovl .empty { inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font: 13px/1.4 system-ui, sans-serif; white-space: normal; text-align: center; }
.legend { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* positions, below the first screen */
.pos { margin: 0 14px 18px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.pos.min .posbody { display: none; }
.posbody table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.posbody th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0 12px 6px 0; }
.posbody td { padding: 5px 12px 5px 0; border-top: 1px solid var(--grid); }
.posbody .num { text-align: right; }
.posbody .sell { color: var(--amber); } .posbody .buy { color: var(--blue); }
.posbody .win { color: var(--put); } .posbody .loss { color: var(--call); }
.posbody .none { color: var(--muted); padding: 6px 0; }

@media (max-width: 1100px) {
  .row { flex-direction: column; height: auto; }
  .chartcol { min-height: 760px; }
  .heatcol, .row.heat-max .heatcol { flex-basis: auto; min-height: 560px; }
  .row.heat-min .heatcol { min-height: 38px; }
  .row.heat-min .strip span { writing-mode: horizontal-tb; transform: none; }
  .top { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 10px 18px; }
}

/* SENSEX: the PIN box */
.pinform { display: flex; gap: 6px; align-items: center; }
.pinform input { width: 90px; padding: 3px 6px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 4px; }
.pinform button { padding: 3px 10px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; font: inherit; }
.pinform button:focus-visible, .pinform input:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
.pinform[hidden] { display: none; }