/* raw.css — the Raw layout (.lay-line): a duplicate of Trade-Alert's row.
   Loaded alongside base.css. */

.trade.line {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    margin-bottom: 24px;
}

.tlhead {
    color: #1a1a1a;
    font-weight: 700;
    margin-bottom: 2px;
}

.tlhead.split {
    color: #1a1a1a;
}

/* Raw layout = Trade-Alert scheme. Page/header/text follow the active theme so it works on
           Dark/Blue/Light; the signature bits (green >>, pills, yellow NBBO highlight, green footer)
           stay fixed. Text inside the yellow highlight is forced dark so it stays readable. */
.lay-line .tlhead {
    color: var(--text);
    font-weight: 700;
}

.lay-line .trade.line {
    color: var(--text);
}

.lay-line .trade.line .arrow {
    color: #3aa63a;
    font-weight: 700;
}

.lay-line .trade.line .size {
    color: var(--text);
    font-weight: 700;
}

.lay-line .trade.line .sym {
    color: var(--text);
    font-weight: 700;
}

.lay-line .trade.line .exp {
    color: var(--text);
    font-weight: 700;
}

.lay-line .trade.line .strike {
    color: var(--text);
    font-weight: 700;
}

.lay-line .trade.line .px {
    color: var(--text);
    font-weight: 700;
}

.lay-line .trade.line .talias {
    color: var(--text);
}

.lay-line .trade.line .nb {
    color: var(--text);
}

.lay-line .trade.line .premb {
    color: var(--text);
    font-weight: 700;
}

.lay-line .trade.line .meta {
    color: var(--text);
}

.lay-line .trade.line .time {
    color: var(--text);
}

/* yellow NBBO highlight: fixed bg, and everything inside forced dark for contrast on any theme */
.lay-line .trade.line .hl {
    background: #fdf3a6;
    padding: 0 3px;
}

.lay-line .trade.line .hl,
.lay-line .trade.line .hl * {
    color: #1a1a1a;
}

.lay-line .oalert {
    color: #2e9e2e;
    margin-bottom: 16px;
    font-size: calc(var(--alert-fs, 13px) - 2px);
    letter-spacing: -0.3px;
}

.lay-line .trade.line .call {
    background: #4a72e8;
    color: #ffffff;
    font-weight: 700;
    padding: 1px 5px;
}

.lay-line .trade.line .put {
    background: #e85a5a;
    color: #ffffff;
    font-weight: 700;
    padding: 1px 5px;
}

.lay-line .trade.line .tape {
    background: #7ed957;
    color: #1a1a1a;
    font-weight: 700;
    padding: 1px 5px;
}
/* ==========================================================================================
   RAW layout — a duplicate of Trade-Alert's row.
   Written against the LIGHT theme, applied to all themes for now (dark/blue will want their
   own colours later — every colour here is a literal so they are easy to find and override).
   ========================================================================================== */

/* No box per alert and no separator — Trade-Alert's feed is a plain continuous list. */
.lay-line .trade.line {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 4px 8px;
    margin: 0 0 18px 0;         /* the gap between rows; slideIn() reads this, don't hardcode it */
    letter-spacing: 0;
    line-height: 1.35;
}

/* The alert is one line, but it WRAPS when the window is too narrow — nothing is ever cut off
   or hidden behind a scroll. */
.lay-line .ra1,
.lay-line .ra2,
.lay-line .ra3 {
    white-space: normal;
    overflow: visible;
    color: var(--text);
}

/* ---- line 1: the contract ---- */
/* the leading >> carries the same highlight as the side badge: green ask, red bid */
.lay-line .ra-arrow {
    display: inline-block;
    padding: 0 3px;
    font-weight: 700;
    color: #000;
    border-radius: 2px;
}
.lay-line .ra-arrow.ask   { background: #ccff99; }   /* sampled from Trade-Alert */
.lay-line .ra-arrow.above { background: #8fd14f; }   /* above ask — darker green */
.lay-line .ra-arrow.bid   { background: #ff9999; }
.lay-line .ra-arrow.dp    { background: #c9b6f0; }   /* dark pool */
.lay-line .ra-arrow.fil   { background: #a8d8ea; }   /* SEC filing */
.lay-line .ra-size   { color: #1a7f37; font-weight: 700; }
.lay-line .ra-sym    { color: var(--text); font-weight: 700; }
.lay-line .ra-exp    { color: var(--text); }
.lay-line .ra-strike { color: var(--text); font-weight: 700; }
/* plain text, NOT the chip the card/grid layouts use — Trade-Alert doesn't highlight these */
.lay-line .ra-cp,
.lay-line .ra-cp.ra-call,
.lay-line .ra-cp.ra-put {
    background: none;
    color: var(--text);
    padding: 0;
    border-radius: 0;
    font-weight: 400;
}
.lay-line .ra-px     { color: var(--text); font-weight: 700; }

/* ---- line 2: the fill ---- */
.lay-line .ra-side {
    display: inline-block;
    padding: 0 5px;
    font-weight: 700;
    color: #000;
    border-radius: 2px;
}
.lay-line .ra-side.ask   { background: #ccff99; }   /* their green ASK, sampled */
.lay-line .ra-side.above { background: #8fd14f; }   /* above ask — darker green */
.lay-line .ra-side.bid   { background: #ff9999; }   /* their red BID, sampled  */

.lay-line .ra-venue { font-weight: 700; color: var(--text); }
.lay-line .ra-time  { color: var(--text); }
.lay-line .ra-iv    { color: var(--text); font-weight: 700; }

/* the whole NBBO block is yellow-highlighted, venue included — as theirs is */
.lay-line .ra-nbbo,
.lay-line .ra-hl {
    background: #ffff99;
    padding: 0 4px;
    color: #000;
    border-radius: 2px;
}

/* SPREAD / COMPLEX — their slate-purple chip, sampled */
.lay-line .ra-tag {
    display: inline-block;
    background: #666699;
    color: #fff;
    padding: 0 5px;
    font-weight: 700;
    border-radius: 2px;
}

/* their orange chip (SSR) — kept for when we have something to put in that slot */
.lay-line .ra-ssr {
    display: inline-block;
    background: #ff9900;
    color: #000;
    padding: 0 5px;
    font-weight: 700;
    border-radius: 2px;
}

.lay-line .ra-vega  { color: var(--text); font-weight: 700; }
.lay-line .ra-prem  { color: var(--text); font-weight: 700; }

/* ---- line 3: the underlying reference ---- */
.lay-line .ra-ref   { color: var(--text); font-weight: 700; }
.lay-line .ra-noref { color: #999; }
.lay-line .ra-delta { color: var(--text); }
.lay-line .ra-hedge { color: var(--text); }
.lay-line .ra-type  { color: var(--text); font-weight: 700; }
.lay-line .ra-oi    { color: var(--text); font-weight: 700; }
.lay-line .ra-gex   { color: var(--text); font-weight: 700; }
.lay-line .ra-dark  { color: var(--text); font-weight: 700; }
.lay-line .ra-cong  { color: var(--text); font-weight: 700; }
.lay-line .ra-ins   { color: var(--text); font-weight: 700; }
.lay-line .ra-8k    { color: var(--text); font-weight: 700; }
.lay-line .ra-13d   { color: var(--text); font-weight: 700; }
.lay-line .ra-sv    { color: var(--text); font-weight: 700; }

/* header line above the alert — SWEEP DETECTED / COMPLEX / SPREAD DETECTED, same as card+grid */
.lay-line .ra-head {
    font-weight: 700;
    letter-spacing: 0;
    margin: 0;
    line-height: 1.35;          /* same as the row, so the two sit on equal leading */
}

/* The chips are inline-block. Left on the default baseline alignment their boxes push the line
   box taller than the plain text above them, which is what opened the gap under the header. */
.lay-line .ra-arrow,
.lay-line .ra-side,
.lay-line .ra-tag,
.lay-line .ra-nbbo { vertical-align: baseline; line-height: 1.35; }
.lay-line .trade.line .ra-head,
.lay-line .trade.line .ra-head.sweep,
.lay-line .trade.line .ra-head.complex {
    color: var(--text);
    font-weight: 700;
}

/* ==========================================================================================
   RAW — theme variants.
   The base rules above are Trade-Alert's own palette, sampled from their screenshot: saturated
   fills with black text, which is right on a white page and far too loud on a dark one. These
   restate the same roles in each theme's own register — same meaning, same positions, readable
   contrast — rather than punching bright yellow through a dark background.
   ========================================================================================== */

/* ---- dark ---- */
/* The fills stay Trade-Alert's own — bright green, bright yellow. They are the point of the
   layout and dimming them was wrong. What changes on dark is only the TEXT sitting on them:
   black on a bright fill, never black on the page's grey. */
.theme-dark.lay-line .ra-side,
.theme-dark.lay-line .ra-arrow,
.theme-dark.lay-line .ra-nbbo,
.theme-dark.lay-line .ra-hl,
.theme-dark.lay-line .ra-ssr { color: #000; }

.theme-dark.lay-line .ra-side.ask,
.theme-dark.lay-line .ra-arrow.ask     { background: #ccff99; }
.theme-dark.lay-line .ra-side.above,
.theme-dark.lay-line .ra-arrow.above   { background: #8fd14f; }
.theme-dark.lay-line .ra-side.bid,
.theme-dark.lay-line .ra-arrow.bid     { background: #ff9999; }
.theme-dark.lay-line .ra-arrow.dp      { background: #c9b6f0; }

.theme-dark.lay-line .ra-nbbo,
.theme-dark.lay-line .ra-hl  { background: #ffff99; }

.theme-dark.lay-line .ra-tag { background: #666699; color: #fff; }
.theme-dark.lay-line .ra-ssr { background: #ff9900; }

/* ---- blue ---- */
.theme-blue.lay-line .ra-side,
.theme-blue.lay-line .ra-arrow,
.theme-blue.lay-line .ra-nbbo,
.theme-blue.lay-line .ra-hl,
.theme-blue.lay-line .ra-ssr { color: #000; }

.theme-blue.lay-line .ra-side.ask,
.theme-blue.lay-line .ra-arrow.ask     { background: #ccff99; }
.theme-blue.lay-line .ra-side.above,
.theme-blue.lay-line .ra-arrow.above   { background: #8fd14f; }
.theme-blue.lay-line .ra-side.bid,
.theme-blue.lay-line .ra-arrow.bid     { background: #ff9999; }
.theme-blue.lay-line .ra-arrow.dp      { background: #c9b6f0; }

.theme-blue.lay-line .ra-nbbo,
.theme-blue.lay-line .ra-hl  { background: #ffff99; }

.theme-blue.lay-line .ra-tag { background: #666699; color: #fff; }
.theme-blue.lay-line .ra-ssr { background: #ff9900; }

/* The leading >> as a filled chip crowds the size beside it — two green blocks butting together.
   On the dark themes it is the COLOUR that carries the side, not a fill. */
.theme-dark.lay-line .ra-arrow,
.theme-blue.lay-line .ra-arrow {
    background: none;
    padding: 0;
}
.theme-dark.lay-line .ra-arrow.ask,
.theme-blue.lay-line .ra-arrow.ask     { background: none; color: #ccff99; }
.theme-dark.lay-line .ra-arrow.above,
.theme-blue.lay-line .ra-arrow.above   { background: none; color: #8fd14f; }
.theme-dark.lay-line .ra-arrow.bid,
.theme-blue.lay-line .ra-arrow.bid     { background: none; color: #ff9999; }
.theme-dark.lay-line .ra-arrow.dp,
.theme-blue.lay-line .ra-arrow.dp      { background: none; color: #c9b6f0; }
.theme-dark.lay-line .ra-arrow.fil,
.theme-blue.lay-line .ra-arrow.fil     { background: none; color: #a8d8ea; }

/* contract size: white on the dark themes, where the green sat too close to the arrow beside it */
.theme-dark.lay-line .ra-size,
.theme-blue.lay-line .ra-size { color: #ffffff; font-weight: 700; }