/* A ThinkOrSwim-like shell: charcoal panels with thin borders, a tab strip, dense grey type,
   orange for the active selection, green and red reserved for the market. */
:root {
  --bg: #161616; --panel: #202020; --panel-head: #2a2a2a; --line: #353535; --line-soft: #2a2a2a;
  --text: #d6d6d6; --dim: #9a9a9a; --accent: #f0892b; --blue: #4a90d9;
  --up: #3bb34a; --down: #d9403a; --flat: #9a9a9a;
}
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 13px; }
a { color: var(--blue); }
code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85em; color: #c8c8c8; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.dim { color: var(--dim); }
.nowrap { white-space: nowrap; }

.tos-shell { display: grid; grid-template-rows: 36px 1fr 22px; min-height: 100vh; }
.tos-top { display: flex; align-items: stretch; gap: 18px; background: #262626; border-bottom: 1px solid var(--line); padding: 0 12px; }
.tos-brand { align-self: center; font-weight: 600; letter-spacing: .06em; color: #f1f1f1; }
.tos-brand span { font-weight: 400; color: var(--dim); margin-left: 6px; letter-spacing: 0; }
.tos-tabs { display: flex; gap: 2px; }
.tos-tab { display: flex; align-items: center; padding: 0 16px; color: var(--dim); text-decoration: none; border-bottom: 2px solid transparent; }
.tos-tab:hover { color: var(--text); background: #2d2d2d; }
.tos-tab.active { color: #fff; border-bottom-color: var(--accent); background: #1b1b1b; }
.tos-top-right { margin-left: auto; align-self: center; display: flex; gap: 14px; }
.tos-main { padding: 8px; }
.tos-status { display: flex; gap: 16px; align-items: center; padding: 0 12px; background: #1b1b1b; border-top: 1px solid var(--line); color: var(--dim); }

.tos-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.tos-panel-head { background: var(--panel-head); border-bottom: 1px solid var(--line); padding: 5px 10px; font-size: 12px; letter-spacing: .03em; color: #e0e0e0; display: flex; align-items: center; gap: 8px; }
.tos-panel-body { padding: 10px; }
.tos-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tos-table th { text-align: left; color: var(--dim); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.tos-table td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tos-table tr:last-child td { border-bottom: 0; }

/* chart workspace */
.tos-work { display: grid; grid-template-columns: 290px minmax(0, 1fr) 340px; gap: 8px; align-items: start; }
@media (max-width: 1200px) { .tos-work { grid-template-columns: minmax(0, 1fr); } }
/* Each column stacks its panels with the same 8px gap the grid uses between columns; nothing stretches
   to the viewport, so the watchlist and the plan panel sit one under the other and the page scrolls. */
.tos-side, .tos-right, .tos-center { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tos-side .tos-panel, .tos-right .tos-panel { flex: 0 0 auto; }
.watch { width: 100%; border-collapse: collapse; }
.watch td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.watch tr:hover td { background: #262626; }
.watch tr.sel td { background: #2b2415; }
.watch .sym { font-weight: 600; color: #fff; }
.watch .num { text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.watch .up { color: var(--up); } .watch .down { color: var(--down); }
.stage-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.tos-center { display: flex; flex-direction: column; min-height: 0; }
.tos-chart-block { display: flex; flex-direction: column; }
.tos-toolbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel-head); border: 1px solid var(--line); border-bottom: 0; border-radius: 3px 3px 0 0; flex-wrap: wrap; }
.tos-toolbar .sym { font-weight: 700; color: #fff; font-size: 14px; margin-right: 8px; }
.tos-toolbar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg button { background: #1f1f1f; color: var(--dim); border: 0; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--text); background: #2a2a2a; }
.seg button.on { color: #fff; background: #3a2a14; }
.seg-btn { background: #1f1f1f; color: var(--dim); border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; margin-left: 6px; }
.seg-btn:hover { color: #fff; background: #2a2a2a; }
.seg-label { color: var(--dim); font-size: 11px; margin: 0 4px 0 8px; letter-spacing: .04em; }
.tos-toolbar .studies { margin-left: auto; color: var(--dim); font-size: 11px; }
.chart-frame { flex: 0 0 auto; background: #1b1b1b; border: 1px solid var(--line); border-radius: 0 0 3px 3px; position: relative; }
.chart-svg { width: 100%; height: 100%; display: block; }
.chart-svg text { font-family: "JetBrains Mono", ui-monospace, monospace; fill: #a8a8a8; font-size: 11px; }
.chart-svg .hit { fill: transparent; cursor: crosshair; }
.chart-svg { user-select: none; touch-action: none; }
.readout { position: absolute; top: 6px; left: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: #c8c8c8; pointer-events: none; display: flex; gap: 12px; }
.readout b { font-weight: 500; color: #fff; }
.readout .up { color: var(--up); } .readout .down { color: var(--down); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--dim); font-size: 11px; align-items: center; padding: 4px 8px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* layer panel */
.layers { display: flex; flex-direction: column; gap: 8px; }
.layer h4 { margin: 0; background: var(--panel-head); border-bottom: 1px solid var(--line); padding: 4px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #bcbcbc; font-weight: 600; }
.layer { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.layer dl { display: grid; grid-template-columns: max-content 1fr; gap: 1px 12px; margin: 0; padding: 6px 8px; }
.layer dt { color: var(--dim); }
.layer dd { margin: 0; color: var(--text); word-break: break-all; }
.layer .hot { color: var(--accent); }

/* plan page */
.tos-page { display: flex; flex-direction: column; gap: 10px; max-width: 1500px; }
.plan-intro p { margin: 0 0 8px 0; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 10px; color: var(--dim); }
.plan-params { color: #c8c8c8; }
.plan-no { display: inline-block; min-width: 20px; text-align: center; background: var(--accent); color: #111; border-radius: 2px; font-weight: 700; font-size: 11px; }
.plan-row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; padding: 10px; }
@media (max-width: 900px) { .plan-row { grid-template-columns: 1fr; } }
.plan-photo img { width: 100%; display: block; border: 1px solid var(--line); border-radius: 3px; background: #000; }
.plan-summary { margin: 0 0 10px 0; }
.tag { font-style: normal; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; border: 1px solid; white-space: nowrap; }
.tag.coded { color: var(--up); border-color: var(--up); }
.tag.parameter { color: var(--accent); border-color: var(--accent); }
.tag.trial { color: var(--blue); border-color: var(--blue); }
.tag.context { color: var(--dim); border-color: var(--dim); }

/* signals */
.sig { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 2px; white-space: nowrap; color: #111; background: #555; }
.sig.enter { background: var(--up); } .sig.add { background: #2d7a36; color: #fff; } .sig.trim { background: var(--accent); }
.sig.exit { background: var(--down); color: #fff; } .sig.hold { background: #3a3a3a; color: #ddd; } .sig.out { background: #2a2a2a; color: #9a9a9a; }
.today .tos-panel-head { border-left: 3px solid #555; }
.today.enter .tos-panel-head, .today.add .tos-panel-head { border-left-color: var(--up); }
.today.exit .tos-panel-head { border-left-color: var(--down); }
.today.trim .tos-panel-head { border-left-color: var(--accent); }
.today-sig { font-size: 22px; font-weight: 700; letter-spacing: .06em; color: #fff; margin-bottom: 4px; }
.today.enter .today-sig, .today.add .today-sig { color: var(--up); }
.today.exit .today-sig { color: var(--down); }
.today.trim .today-sig { color: var(--accent); }
.today.out .today-sig { color: var(--dim); }
.today-why { color: var(--text); margin-bottom: 6px; }
.today-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--dim); }
.spark { width: 100%; height: 48px; display: block; background: #1b1b1b; border: 1px solid var(--line); border-radius: 2px; margin-bottom: 8px; }
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 2px 0; } .kv td:first-child { color: var(--dim); } .kv td:last-child { text-align: right; }
.kv .up { color: var(--up); } .kv .down { color: var(--down); }
.watch td:last-child { text-align: right; }

.watch-scroll { overflow: auto; max-height: 440px; }
.screen .sym a { color: #fff; text-decoration: none; font-weight: 600; }
.screen .sym a:hover { color: var(--accent); }
.screen td.num, .screen th.num { text-align: right; }

/* company panel */
.company { margin-top: 0; }
.co-name { color: #fff; font-weight: 600; font-size: 13px; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.co-tile { background: #1b1b1b; border: 1px solid var(--line-soft); border-radius: 3px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.co-tile span { color: var(--dim); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-family: Inter, system-ui, sans-serif; }
.co-tile b { color: var(--text); font-weight: 500; font-size: 12px; }
.co-range { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; color: var(--dim); font-size: 11px; }
.co-bar { position: relative; flex: 1; height: 6px; background: #2a2a2a; border-radius: 3px; }
.co-bar i { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px; background: var(--accent); border-radius: 1px; }
.co-summary { margin: 8px 0 0; color: var(--text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.co-summary.open { display: block; }