/* OI Board: the Chart tab (drawn by chart.js on TradingView Lightweight Charts 5.2.1).
   Shared by Chart and My Space; owned by the chart side of the split (DESIGN.md 2.5, 8). Every selector is scoped under :is(#chartview,#myspace),
   and every colour is a token from index.html used by name: this file defines no colour.
   Placement of :is(#chartview,#myspace)'s five children (phone column, desktop grid) is index.html's job (2.3). */

/* ---------- sections ---------- */
:is(#chartview,#myspace) section,:is(#chartview,#myspace) aside{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;margin:0}

/* ---------- chart cards (index chart, option chart) ---------- */
:is(#chartview,#myspace) .ch-card{display:flex;flex-direction:column;gap:0;min-width:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
@media (max-width:767px){
  /* full-bleed on a phone: hairlines top and bottom only */
  :is(#chartview,#myspace) .ch-card{margin-inline:calc(-1*var(--gutter));border-left:0;border-right:0;border-radius:0;box-shadow:none}
}

/* head row: legend left, tools right */
:is(#chartview,#myspace) .ch-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3) 6px}
:is(#chartview,#myspace) .ch-tools{display:flex;align-items:center;gap:var(--sp-1);flex:none}
:is(#chartview,#myspace) .ch-tools .icon-btn{width:28px;height:28px;font-size:16px;border-radius:var(--r-sm)}
:is(#chartview,#myspace) .ch-tools .btn{min-height:28px;padding:0 10px;font-size:var(--fs-12);border-radius:var(--r-sm)}
@media (max-width:767px),(hover:none){:is(#chartview,#myspace) .ch-zoom{display:none}}

/* OHLC legend: fixed height so nothing below moves as the values change */
:is(#chartview,#myspace) .ch-legend{flex:1 1 auto;min-width:0;height:38px;display:grid;align-content:center;
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id chg" "ohlc ohlc";column-gap:var(--sp-3);row-gap:2px;
  font-size:var(--fs-12);line-height:18px;color:var(--fg-2);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
:is(#chartview,#myspace) .lg-id{grid-area:id;min-width:0;overflow:hidden;text-overflow:ellipsis}
:is(#chartview,#myspace) .lg-sym{font-size:var(--fs-13);font-weight:var(--fw-sb);color:var(--fg);letter-spacing:-.005em}
:is(#chartview,#myspace) .lg-meta{color:var(--fg-2)}
:is(#chartview,#myspace) .lg-ohlc{grid-area:ohlc;display:flex;gap:10px;min-width:0;overflow:hidden}
:is(#chartview,#myspace) .lg-p{display:inline-flex;align-items:baseline;gap:4px}
:is(#chartview,#myspace) .lg-k{color:var(--fg-3)}
:is(#chartview,#myspace) .lg-v{color:var(--fg);font-weight:var(--fw-m)}
:is(#chartview,#myspace) .lg-chg{grid-area:chg;font-weight:var(--fw-sb);text-align:right}
:is(#chartview,#myspace) .lg-chg.up{color:var(--up-text)}
:is(#chartview,#myspace) .lg-chg.dn{color:var(--dn-text)}
:is(#chartview,#myspace) .lg-chg.flat{color:var(--fg-2)}
:is(#chartview,#myspace) .op-legend{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "ohlc"}
/* one line only when the chart card itself is wide enough (at 1024-1100 px the main column is not, and the
   close price was cut off); older browsers without container queries keep the two-line layout */
:is(#chartview,#myspace) .ch-head{container-type:inline-size}
@container (min-width:720px){
  :is(#chartview,#myspace) .ch-legend{height:28px;grid-template-columns:auto auto auto minmax(0,1fr);grid-template-areas:"id ohlc chg .";column-gap:14px}
  :is(#chartview,#myspace) .op-legend{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"id ohlc ."}
}

/* the plot: fixed height; the LWC canvas sits in .ch-host, a message overlays it without destroying it */
:is(#chartview,#myspace) .ch-plot{position:relative;min-width:0;outline:none;-webkit-tap-highlight-color:transparent}
:is(#chartview,#myspace) .ch-plot:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
:is(#chartview,#myspace) .ch-host{position:absolute;top:0;right:0;bottom:0;left:8px}
:is(#chartview,#myspace) .ch-msg{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;margin:0;
  padding:var(--sp-4);background:var(--surface)}
:is(#chartview,#myspace) #ch-plot{height:400px;height:clamp(260px,48vh,400px);height:clamp(260px,48svh,400px)}
:is(#chartview,#myspace) #op-plot{height:300px}
@media (min-width:768px){
  :is(#chartview,#myspace) #ch-plot{height:440px}
  :is(#chartview,#myspace) #op-plot{height:340px}
}
@media (min-width:1024px){
  :is(#chartview,#myspace) #ch-plot{height:clamp(440px,calc(100vh - var(--header-h) - 220px),640px);height:clamp(440px,calc(100svh - var(--header-h) - 220px),640px)}
  :is(#chartview,#myspace) #op-plot{height:380px}
}
@media (max-height:500px) and (max-width:1023px){
  :is(#chartview,#myspace) #ch-plot{height:clamp(220px,calc(100vh - 120px),300px);height:clamp(220px,calc(100svh - 120px),300px)}
  :is(#chartview,#myspace) #op-plot{height:260px}
}

/* attribution (TradingView's licence asks for a visible link on the page that shows the charts) */
:is(#chartview,#myspace) .ch-attr{margin:0;padding:4px var(--sp-3) var(--sp-2);text-align:right;font-size:var(--fs-11);line-height:16px;color:var(--fg-3)}
:is(#chartview,#myspace) .ch-attr a,:is(#chartview,#myspace) .ch-lic a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
:is(#chartview,#myspace) .ch-attr a:hover,:is(#chartview,#myspace) .ch-lic a:hover{color:var(--fg-2);text-decoration-color:currentColor}

/* ---------- key levels, the rejected-push card, the two notes ---------- */
:is(#chartview,#myspace) #ch-side{gap:var(--sp-4)}
:is(#chartview,#myspace) .ch-levels:empty{display:none}
:is(#chartview,#myspace) .lv-h{margin:0 0 var(--sp-2);font-size:var(--fs-12);font-weight:var(--fw-sb);color:var(--fg-3);line-height:18px}
:is(#chartview,#myspace) .lv-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:column;
  grid-template-rows:repeat(var(--rows,4),auto);column-gap:var(--sp-5);row-gap:6px}
@media (min-width:600px) and (max-width:1023px){:is(#chartview,#myspace) .lv-list{max-width:560px;column-gap:var(--sp-8)}}
:is(#chartview,#myspace) .lv-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0;font-size:var(--fs-12);line-height:18px}
:is(#chartview,#myspace) .lv-n{flex:1 1 auto;min-width:0;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#chartview,#myspace) .lv-v{flex:none;color:var(--fg);font-weight:var(--fw-sb);white-space:nowrap;font-variant-numeric:tabular-nums}
/* level keys: a short rule in the level's own style and colour */
:is(#chartview,#myspace) .lvk{flex:none;width:16px;height:0;border-top:1px solid var(--fg-3)}
:is(#chartview,#myspace) .lvk-cw{border-top:2px dashed var(--call)}
:is(#chartview,#myspace) .lvk-pw{border-top:2px dashed var(--put)}
:is(#chartview,#myspace) .lvk-mp{border-top:2px dotted var(--fg-2)}
:is(#chartview,#myspace) .lvk-op{border-top:1px solid var(--fg-3)}
:is(#chartview,#myspace) .lvk-yh,:is(#chartview,#myspace) .lvk-yl{border-top:1px dashed var(--fg-3)}
:is(#chartview,#myspace) .lvk-pc{border-top:1px dotted var(--fg-3)}
:is(#chartview,#myspace) .ch-notes{display:flex;flex-direction:column;gap:var(--sp-2)}
:is(#chartview,#myspace) .ch-notes .note:empty{display:none}

/* ---------- desk trades ---------- */
:is(#chartview,#myspace) #ch-desk{gap:var(--sp-2)}
:is(#chartview,#myspace) #ch-trades{display:flex;flex-direction:column;min-width:0}
:is(#chartview,#myspace) #ch-trades .empty{padding:var(--sp-4) 0;text-align:left}
:is(#chartview,#myspace) .tr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:start;
  width:auto;margin:0 calc(-1*var(--sp-3));padding:10px var(--sp-3);text-align:left;color:var(--fg);font:inherit;
  background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease)}
:is(#chartview,#myspace) .tr-row:hover{background:var(--surface-2)}
:is(#chartview,#myspace) .tr-row[aria-current="true"]{box-shadow:inset 2px 0 0 var(--accent)}
:is(#chartview,#myspace) .tr-row:focus-visible{outline-offset:-2px}
:is(#chartview,#myspace) .tr-dot{width:8px;height:8px;margin:7px 0 0;border-radius:50%;background:var(--fg)}
:is(#chartview,#myspace) .tr-dot.tr-w{background:var(--up)}
:is(#chartview,#myspace) .tr-dot.tr-l{background:var(--dn)}
:is(#chartview,#myspace) .tr-dot.tr-paper{opacity:.6}
:is(#chartview,#myspace) .tr-main{display:flex;flex-direction:column;gap:1px;min-width:0}
:is(#chartview,#myspace) .tr-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-14);line-height:22px}
:is(#chartview,#myspace) .tr-t b{font-weight:var(--fw-sb)}
:is(#chartview,#myspace) .tr-sub{font-size:12.5px;line-height:1.45;color:var(--fg-2)}
:is(#chartview,#myspace) .tr-pk{font-size:12.5px;line-height:1.45;font-weight:var(--fw-sb);color:var(--fg)}
:is(#chartview,#myspace) .tr-pnl{font-size:var(--fs-14);line-height:22px;font-weight:var(--fw-sb);white-space:nowrap;text-align:right}

/* ---------- one option ---------- */
:is(#chartview,#myspace) .op-h{row-gap:var(--sp-2)}
:is(#chartview,#myspace) .op-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
:is(#chartview,#myspace) .kpick{display:inline-flex;align-items:center;gap:2px}
:is(#chartview,#myspace) .kpick > span{min-width:7rem;padding:0 var(--sp-1);text-align:center;font-size:var(--fs-14);font-weight:var(--fw-sb);
  font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:379px){     /* a narrow phone: the strike stepper on its own row, then Call/Put and ATM */
  :is(#chartview,#myspace) .op-h > h2{flex-basis:100%}
  :is(#chartview,#myspace) .op-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%}
  :is(#chartview,#myspace) .kpick{grid-column:1/-1;display:flex}
  :is(#chartview,#myspace) .kpick > span{flex:1 1 auto}
  :is(#chartview,#myspace) .op-tools .seg{display:flex}
  :is(#chartview,#myspace) .op-tools .seg button{flex:1 1 0}
}

/* ---------- footer: licence notice on its own line ---------- */
:is(#chartview,#myspace) .ch-lic{display:block;margin-top:var(--sp-1)}

/* ---------- desktop: cards in the grid that index.html lays out ---------- */
@media (min-width:1024px){
  :is(#chartview,#myspace) .ch-levels,:is(#chartview,#myspace) #ch-desk,:is(#chartview,#myspace) #ch-option{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-1)}
  :is(#chartview,#myspace) .ch-levels{padding:var(--card-pad)}
  :is(#chartview,#myspace) .lv-list{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none;row-gap:0}
  :is(#chartview,#myspace) .lv-row{padding:5px 0;border-top:1px solid var(--line)}
  :is(#chartview,#myspace) .lv-row:first-child{border-top:0}
  :is(#chartview,#myspace) #ch-desk{padding:var(--sp-4) var(--sp-4) var(--sp-2)}
  :is(#chartview,#myspace) .tr-row{margin:0 calc(-1*var(--sp-4));padding:10px var(--sp-4)}
  :is(#chartview,#myspace) #ch-option{padding:var(--sp-4) var(--sp-4) 0;overflow:hidden}
  /* the option chart closes the card: full width, a hairline above */
  :is(#chartview,#myspace) #ch-option .op-card{margin:var(--sp-1) calc(-1*var(--sp-4)) 0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
}