/* Short interest (tools/build.py, page_investor_short()): page-only styles, so the shared stylesheet and every other
   page stay as they are. The panels reuse Stock's short-activity pieces (.sh-lead, .sh-compare, .sh-footer). */
.si-page { font-variant-numeric: tabular-nums; }
.si-page .eyebrow { margin: 0 0 6px; }
.si-page .section-head { align-items: baseline; margin-bottom: 10px; }
.si-date { font-size: .76rem; color: var(--muted); }
.si-page .panel.reg.si-panel { margin-bottom: 0; }
.si-page > section { margin-bottom: 30px; }
.si-two > section { margin-bottom: 30px; }

/* the comparison tables: listings across, measures down; figures right-aligned and never broken */
.si-tbl { width: 100%; border-collapse: collapse; margin: 18px 0 0; }
.si-tbl th, .si-tbl td { padding: 8px 0 8px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: right; vertical-align: top;
  font: 500 .84rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.si-tbl thead th { border-top: 0; padding-top: 0; font-weight: 600; }
.si-tbl tr > :first-child { padding-left: 0; text-align: left; font-weight: 400; font-size: .78rem; color: var(--muted); }
.si-leg [hidden] { display: none; }
.si-tbl small { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); }
.si-tbl .si-strong td { font-weight: 600; }
.si-tbl-b { margin-top: 0; }

/* a chart with its controls and key (si_chart()). All three need script, so the block appears only when it runs.
   Wide: the key and the controls share the line above the plot. Phone: controls, plot, then the key under it. */
.si-chart { display: none; }
.jsp .si-chart { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "leg pills" "fig fig"; align-items: center; gap: 8px 14px; margin: 18px 0 0; }
.si-chart .si-pills { grid-area: pills; margin: 0; }
/* a chart with two settings (borrowing: the measure and the period): one row, the measure first */
.si-chart .si-ctl { grid-area: pills; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.si-chart .si-ctl .si-pills { grid-area: auto; }
.si-chart .si-leg { grid-area: leg; margin: 0; font-family: var(--sans); font-size: .74rem; }
.si-chart .si-fig { grid-area: fig; position: relative; min-width: 0; }
.si-leg .si-k-ref { width: 14px; height: 0; border-top: 2px dashed var(--muted); border-radius: 0; vertical-align: 3px; }
.si-leg .si-k-bar { opacity: .75; }
.si-plot { --si-h: 230; min-height: 230px; }
.si-plot .chart { margin: 0; }
.si-svg { touch-action: pan-y; cursor: crosshair; overflow: visible; }
.si-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dc.si-svg .yl, .dc.si-svg .xl { font: 500 10.5px var(--mono); }   /* drawn at the width shown, so the type is the type at every width */
.si-svg .si-ref { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; }
.si-svg path.ln.s1 { stroke-width: 2.4; }
.si-svg .px-mark.s2 { fill: var(--s2); } .si-svg .px-mark.s4 { fill: var(--s4); }
.si-svg rect.s3 { fill: var(--s3); fill-opacity: .75; }
/* a chart drawn again because its width changed is shown at once: no second draw-in */
.js svg.si-svg.si-still path.ln { stroke-dasharray: none !important; animation: none !important; }
.js svg.si-svg.si-still circle.end { visibility: visible !important; animation: none !important; }
.si-fig .fc-read { min-height: 2.8em; }      /* two lines reserved on a phone, so a tap never moves the page */
@media (max-width: 520px) {
  .jsp .si-chart { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pills" "fig" "leg"; gap: 10px; }
}
.si-page .sh-compare dt .sh-nb { white-space: nowrap; }
.si-page .sh-compare { margin-top: 16px; }
.si-foot { margin-top: 16px; }

/* the disclosed short interests: one two-line row per holder */
.si-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "meta sec" "qual qual"; column-gap: 12px; row-gap: 1px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.4; }
.si-row:first-child { border-top: 0; padding-top: 0; }
.si-held .si-foot { margin-top: 4px; }
.si-name { grid-area: name; font-weight: 500; }
.si-val { grid-area: val; text-align: right; font-weight: 600; }
.si-meta { grid-area: meta; font-size: .76rem; color: var(--muted); }
.si-meta span { white-space: nowrap; }
.si-sec { grid-area: sec; text-align: right; font-size: .76rem; color: var(--muted); }
.si-qual { grid-area: qual; font-size: .76rem; color: var(--muted); }   /* why the figure is the last one: a line of its own, so it cannot be read as the short interest's */
.si-lead .si-calc { margin-top: 6px; }

/* from 940px the positions panel puts its figures beside its chart; the two panels under it end on one line */
@media (min-width: 940px) {
  .si-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "lead chart" "tbl chart" "foot foot"; column-gap: 40px; align-items: start; }
  .si-hero .si-lead { grid-area: lead; }
  .si-hero .si-tbl { grid-area: tbl; }
  .si-hero .si-foot { grid-area: foot; }
  /* the chart fills its column, so both sides of the panel end on one line (his note, 4 Oct 2026: "this chart looks too
     high compared with the left side"): the figure takes the row left under the key, and short.js draws the plot as
     tall as that room — never shorter than 310 */
  .jsp .si-hero .si-chart { grid-area: chart; align-self: stretch; grid-template-rows: auto minmax(0, 1fr); margin: 0; padding-left: 40px; border-left: 1px solid var(--line); }
  .si-hero .si-fig { align-self: stretch; display: flex; flex-direction: column; }
  .si-hero .si-plot { flex: 1 1 auto; --si-h: 310; min-height: 310px; }
  .si-two { margin-bottom: 0; }
  .si-two .si-panel { display: flex; flex-direction: column; }
  .si-two .si-panel > :nth-last-child(2) { margin-bottom: 16px; }
  .si-two .si-foot { margin-top: auto; }
}
/* a phone: three figure columns and their label in about 300px — the gutters close, then the type steps down a size */
@media (max-width: 430px) {
  .si-tbl th, .si-tbl td { padding-left: 8px; }
  .si-tbl thead th { font-size: .8rem; }
}
@media (max-width: 389px) {
  .si-tbl th, .si-tbl td { padding-left: 6px; font-size: .78rem; }
  .si-tbl thead th { font-size: .76rem; }
  .si-tbl tr > :first-child { font-size: .72rem; }
  .si-tbl small { font-size: .66rem; }
}
@media (max-width: 374px) {
  .si-page .panel.reg.si-panel { padding-left: 14px; padding-right: 14px; }   /* the table needs 293px: the panel gives up 12 of its gutter */
}
@media (max-width: 339px) {
  .si-tbl tr > :first-child { white-space: normal; }
}