/* ticker-drawer module styles — was injected at runtime by injectStyles() via
   document.createElement('style'). A script-created <style> is still a
   <style> element to the CSP, so style-src-elem 'self' would refuse it and
   this panel would render unstyled. Verbatim; only the delivery changed.
   Linked AFTER utilities.css, which is where the injected block landed. */
#tk-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0;
    pointer-events: none; transition: opacity .18s ease; z-index: 900; }
  #tk-overlay.open { opacity: 1; pointer-events: auto; }
  #tk-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 460px; max-width: 92vw;
    background: var(--bg); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(0,0,0,.4);
    transform: translateX(100%); transition: transform .22s ease; z-index: 901;
    display: flex; flex-direction: column; }
  #tk-drawer.open { transform: translateX(0); }
  .tk-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex;
    align-items: flex-start; justify-content: space-between; gap: 10px; }
  .tk-sym { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: var(--fg); }
  .tk-price { font-size: 13px; color: var(--dim); margin-top: 2px; }
  .tk-close { background: none; border: 1px solid var(--line); color: var(--dim); cursor: pointer;
    width: 26px; height: 26px; border-radius: 4px; font-size: 15px; line-height: 1; }
  .tk-close:hover { color: var(--fg); border-color: var(--fg); }
  .tk-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px;
    font-weight: 700; letter-spacing: .5px; border: 1px solid var(--line); }
  .tk-chip.bull { color: var(--green); border-color: var(--green); }
  .tk-chip.bear { color: var(--red); border-color: var(--red); }
  .tk-chip.neutral { color: var(--dim); }
  .tk-chip.proxy { color: var(--warn); border-color: var(--warn); }
  .tk-chip.live { color: var(--accent); border-color: var(--accent); }
  .tk-score { font-size: 26px; font-weight: 800; line-height: 1; }
  .tk-tabs { display: flex; border-bottom: 1px solid var(--line); }
  .tk-tab { flex: 1; padding: 10px 6px; background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--dim); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
  .tk-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
  .tk-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
  .tk-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
  .tk-row .k { color: var(--dim); }
  .tk-row .v { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
  .tk-src { font-size: 9px; color: var(--dim2); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; margin-left: 5px; text-transform: uppercase; }
  .tk-sec { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--dim); margin: 16px 0 6px; }
  .tk-sec:first-child { margin-top: 0; }
  .tk-levels { display: flex; flex-wrap: wrap; gap: 5px; }
  .tk-lvl { font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  .tk-lvl.res { color: var(--red); } .tk-lvl.sup { color: var(--green); }
  .tk-optbl { width: 100%; border-collapse: collapse; font-size: 11px; }
  /* Every .tk-optbl is wrapped in this (Epic Q / Q1). terminal.css pairs an
     unconditional `table{min-width:480px}` with `.table-wrap{overflow-x:auto}`
     so wide tables SCROLL rather than squish — but the drawer's three tables
     never got the wrapper, so at 390px they inherited the 480px floor with
     nothing to scroll them and painted 138.20px past the right edge of the
     screen. The options ladder lost `Put vol` and `Put OI`; the peers table
     lost `Day` and `1M`; the unusual-options table lost `Premium`. The columns
     were not squeezed, they were off-screen, and the only way to reach them was
     to discover a horizontal scroll on the whole tab body. */
  .tk-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tk-optbl th { text-align: right; color: var(--dim); font-weight: 600; padding: 4px 4px; border-bottom: 1px solid var(--line); }
  .tk-optbl th:first-child { text-align: left; }
  .tk-optbl td { text-align: right; padding: 4px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  .tk-optbl td:first-child { text-align: left; font-weight: 700; }
  .tk-drivers { margin: 6px 0 0; padding-left: 16px; }
  .tk-drivers li { font-size: 11px; color: var(--fg); margin: 3px 0; }
  .tk-note { font-size: 13px; line-height: 1.55; color: var(--fg); white-space: pre-wrap; }
  .tk-empty { color: var(--dim); font-size: 12px; padding: 12px 0; }
  .tk-loading { color: var(--dim); font-size: 12px; padding: 20px 0; text-align: center; }
  .tk-chg { font-weight: 700; font-variant-numeric: tabular-nums; }
  .tk-chg.up { color: var(--green); } .tk-chg.down { color: var(--red); }
  .tk-session { font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; color: var(--dim); margin-left: 6px; }
  .tk-fund-note { font-size: 12px; line-height: 1.5; color: var(--fg); border: 1px solid var(--line);
    border-radius: 6px; padding: 9px 11px; margin-bottom: 12px; }
  .tk-fund-badge { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--warn); display: block; margin-top: 6px; }
  /* ── Phone (Epic Q / Q1) ────────────────────────────────────────────────
     `width:100vw` alone did NOT make this full-bleed: the base rule's
     `max-width:92vw` still capped it, so at a 390px viewport the drawer
     measured 358.80px and 31.20px of the phone was dead backdrop. Measured,
     not reasoned about — the width the media query asked for and the width the
     cascade produced were two different numbers for as long as this rule has
     existed. `max-width:none` is what actually releases it. */
  @media (max-width: 480px) {
    #tk-drawer { width: 100vw; max-width: none; border-left: none; }

    /* Tap targets. design-system.css already floors button HEIGHT at 44px on
       phones, which is why these two measured 26x44 rather than 26x26 — the
       width was never floored, so the drawer's close and alert buttons were
       26px wide on a touch screen. */
    .tk-close { width: 44px; height: 44px; }

    /* The SEC-filing form links measured 8.36x14, 22.64x14 and 31.89x14 — below
       WCAG 2.2 AA 2.5.8's 24x24 minimum, not merely below the 44px comfort bar.
       A row link is a target, so it gets a target's box; the row grows to suit
       rather than the link being squeezed into the text line. */
    .tk-row a { display: inline-flex; align-items: center; justify-content: flex-end;
      min-width: 44px; min-height: 44px; }

    /* The 480px floor terminal.css puts on every table is a desktop-era blanket.
       Inside .tk-tblwrap it is no longer load-bearing — the wrapper scrolls
       whatever the natural width turns out to be — and releasing it lets the
       narrow tables (peers, unusual options) simply fit, so only the strike
       ladder still has to be scrolled. */
    .tk-tblwrap .tk-optbl { min-width: 0; }
  }