/* =============================================================
   style.css — THE ONE AND ONLY stylesheet for TastyTrades
   (TT-Shorts: short selling and futures on Mr Z's REAL tastytrade
   margin account).  Adapted 2026-09-16 from
   C:\MR\PHP\MrStockTrader.com\assets\css\style.css so that every
   component class name is identical and the markup + JS transfer
   across without edits.

   Every colour, size, spacing, radius and font lives as a CSS
   variable on :root below.  Change one line up there and the whole
   site retones.  No second stylesheet, no inline styles, no <style>
   tags anywhere else (BUILD_SPEC §9).

   THE FOUR RULES THAT GET BROKEN MOST, IN ORDER:

   1. NO BLUE.  ANYWHERE.  Not a link, not a button, not a border,
      not a focus ring, not a shadow tint, not a chart stroke, not a
      ::selection colour.  Every hex in this file was measured: none
      of them has a hue between 190 and 260 degrees.  The browser's
      OWN blue (text selection, focus rings, checkboxes, scrollbars)
      is overridden explicitly in the RESET block below, because
      "I did not write blue" is not the same as "no blue appears".

   2. NO BLACK, NO RED TEXT, NO DARK FONT COLOURS.  Every letter is
      LIGHT — white / bright yellow / bright mint / bright pink /
      bright amber — on a DARK background.

   3. EVERY FONT SIZE BETWEEN 12px AND 16px.  h1, h2 and h3 are all
      16px.  Bold carries the hierarchy, never size.

   4. NOTHING IS A FIXED SIZE.  --max-content-w is 100%.  No page
      content is capped.  Panels stretch with their parent, and
      anything that can overflow gets its own scrolling container —
      never the body.
   ============================================================= */

:root {

  /* ---------- BRAND COLOURS  (BUILD_SPEC §4, locked 2026-09-16)
     Deliberately a DARK PLUM site, so that with both sites open in
     the same browser he never mistakes TastyTrades (real money) for
     MrStockTrader (paper, slate-navy).  Plum is red + violet: every
     structural hex below sits between 265 and 290 degrees of hue,
     which is violet/magenta — the far side of the wheel from blue
     (240 degrees).  Nothing here is blue. */
  --c-page-bg:        #241C26;   /* dark plum page background   hue 288 */
  --c-text:           #FFFFFF;   /* white body text */
  --c-text-soft:      #FFE082;   /* light amber secondary text  hue  45 */
  --c-text-inverse:   #FFFFFF;

  /* PRIMARY = dark green "confirm / go".  Text on it = WHITE. */
  --c-primary:        #1B5E20;
  --c-primary-hover:  #2E7D32;

  /* --c-accent serves two roles, split the same way MrStockTrader
     splits them:
       --c-accent     LIGHT amber, the TEXT colour for links
       --c-accent-bg  DARK plum, the BACKGROUND for .btn--accent
     so white button text always has something dark to sit on. */
  --c-accent:         #FFD54F;   /* links / emphasis: amber     hue  46 */
  --c-accent-hover:   #FFEB3B;   /* brighter on hover           hue  54 */
  --c-accent-bg:      #5A4560;   /* dark plum button background hue 287 */
  --c-accent-bg-hover:#6B5272;

  --c-danger:         #B71C1C;   /* dark red — button background ONLY */
  --c-danger-hover:   #C62828;
  --c-warning:        #E65100;
  --c-warning-hover:  #F57C00;
  --c-success:        #1B5E20;
  --c-ok:             #1B5E20;

  /* This site's two trade tones.  Opening a short IS a sell, so it
     wears the sell colour; covering IS a buy, so it wears the buy
     colour.  Getting this backwards is how a man clicks the wrong
     button with real money in the account. */
  --c-short:          #E65100;   /* SELL tone — opens a short */
  --c-short-hover:    #F57C00;
  --c-cover:          #1B5E20;   /* BUY  tone — covers a short */
  --c-cover-hover:    #2E7D32;

  --c-card-bg:        #33283A;   /* lifted plum so cards separate  hue 277 */
  --c-card-border:    #4A3A52;   /*                                hue 280 */
  --c-card-hover:     #46374E;   /*                                hue 279 */

  /* Inputs are DARK RECESSED SLOTS (BUILD_SPEC §4 rule 6) — darker
     than the card, light text, a visible 2px border so the field
     still reads as a field.  NEVER a white or light box.  The final
     hard-cap block at the bottom of this file enforces it with
     !important so no future edit can bring a white input back. */
  --c-input-bg:       #171021;   /* near-black plum             hue 265 */
  /* BUILD_SPEC §4 lists --c-input-text as #E8EDF3.  That value is
     R232 G237 B243: its BLUE channel is the largest of the three and
     it measures 213 degrees of hue, which is inside the blue band.
     The same §4 opens with "NO BLUE ANYWHERE", so the rule wins over
     the sample value and this is the same off-white shifted warm —
     R237 G233 B228, hue 33 degrees.  Visually identical, and it
     survives a grep of every hex in the file.  One line to change
     back if he wants the spec value verbatim. */
  --c-input-text:     #EDE9E4;   /* warm off-white             hue  33 */
  --c-input-border:   #5A4A62;   /*                             hue 280 */
  --c-input-focus:    #FFD54F;   /* amber focus ring, never blue */
  --c-input-placeholder: #B3A7AE;/* mauve-grey hint             hue 325 */

  /* Banners: dark non-blue grounds, bright light text. */
  --c-banner-info-bg:    #33283A;
  --c-banner-info-text:  #FFEB3B;
  --c-banner-warn-bg:    #3E2723;
  --c-banner-warn-text:  #FFE082;
  --c-banner-error-bg:   #4A0E0E;
  --c-banner-error-text: #FFCDD2;
  --c-banner-ok-bg:      #0D3D1D;
  --c-banner-ok-text:    #B9F6CA;

  /* Header bar: deep cherry, the tastytrade note.  Green belongs to
     MrStockTrader; one glance at the top of the window tells him
     which account he is about to touch. */
  --c-header-bg:      #7A1F41;   /* deep cherry  hue 338, white 10.0:1 */
  --c-header-text:    #FFFFFF;

  /* Table headers: a plum bar that lifts off BOTH the page bg and
     the card bg, with bright yellow ink (7.0:1). */
  --c-thead-bg:       #5A4560;
  --c-thead-bg-hover: #6B5272;
  --c-thead-text:     #FFEB3B;

  /* Sign colours — used by tables, ledgers, the timeline. */
  --c-up:             #B9F6CA;   /* light mint  — a gain */
  --c-down:           #FF8A80;   /* light salmon — a loss.  LIGHT, because
                                    dark red text is banned; the colour
                                    carries the meaning, the brightness
                                    keeps it readable. */
  --c-flat:           #FFE082;   /* light amber — unchanged */

  /* Warm slate.  This replaces #37474F everywhere it was asked for
     (the Logs tab and the DISARMED badge).  #37474F is Material
     "Blue Grey 800": R55 G71 B79 — its BLUE channel is the largest
     of the three and it measures 200 degrees, which is inside the
     blue band.  BUILD_SPEC §3 says in the same line "check it reads
     as grey, not blue", so it has been shifted warm: R79 G74 B70,
     hue 27 degrees, same lightness, reads as slate-grey. */
  --c-slate:          #4F4A46;
  --c-slate-hover:    #5E5852;

  /* The one borrow-rate tint: a rate high enough to eat the trade. */
  --c-borrow-hot-bg:   rgba(230, 81, 0, 0.30);
  --c-borrow-hot-text: #FFD180;

  /* ---------- TYPOGRAPHY ---------- */
  --f-family-body:    "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
  --f-family-mono:    "Consolas", "Courier New", monospace;
  /* OWNER RULE: every font size is between 12px and 16px.  Nothing
     smaller, nothing larger — not even h1.  Weight does the work
     that size used to do. */
  --f-size-base:      14px;
  --f-size-small:     12px;
  --f-size-large:     16px;
  --f-size-h1:        16px;
  --f-size-h2:        16px;
  --f-size-h3:        16px;
  --f-weight-body:    400;
  --f-weight-bold:    700;
  --f-weight-loud:    800;
  --f-line-height:    1.5;

  /* ---------- SPACING ---------- */
  --space-0:          0;
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          24px;
  --space-6:          32px;
  --space-7:          48px;

  /* ---------- LAYOUT ----------
     NOTHING IS A FIXED SIZE.  100% means "no cap".  The variable
     stays so a genuinely special case could set one, but nothing in
     this file does. */
  --max-content-w:    100%;
  --breakpoint-mobile: 900px;
  --radius-small:     4px;
  --radius:           8px;
  --radius-large:     14px;
  /* Shadows are a warm near-black plum, never a blue-grey tint. */
  --shadow-card:       0 1px 3px rgba(18, 10, 22, 0.45);
  --shadow-card-hover: 0 4px 12px rgba(18, 10, 22, 0.55);
  --shadow-modal:      0 10px 40px rgba(18, 10, 22, 0.65);

  /* ---------- TAP TARGETS ---------- */
  --tap-min:          44px;
}

/* =============================================================
   DARK MODE — a deeper plum of the (already dark) default, so a
   copied theme-toggle from MrStockTrader keeps working here.
   Same accent family, so the toggle changes depth, not identity.
   ============================================================= */
:root.theme-dark,
:root.theme-auto[data-prefers="dark"] {
  --c-page-bg:        #1D1620;
  --c-card-bg:        #2C2233;
  --c-card-border:    #4A3A52;
  --c-card-hover:     #3E3147;
  --c-input-bg:       #140E1C;
  --c-thead-bg:       #513C57;
  --c-thead-bg-hover: #63496A;
  --c-banner-info-bg: #2C2233;
}

/* Theme toggle button — sits inside the cherry header bar. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--c-header-text);
  font: inherit;
  font-weight: var(--f-weight-bold);
  border-radius: var(--radius-small);
  cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* =============================================================
   RESET / BASE  +  THE BROWSER'S OWN BLUE, OVERRIDDEN
   A stylesheet with no blue hex in it still shows blue if you
   leave the user agent alone: text selection, focus rings, check
   marks, radio dots, range sliders, progress bars and scrollbars
   are all blue by default.  Every one of them is claimed here.
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Tells the browser to draw its own widgets and scrollbars dark
     instead of the light (and blue-accented) default set. */
  color-scheme: dark;
  scrollbar-color: var(--c-accent-bg) var(--c-page-bg);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  background: var(--c-page-bg);
  color: var(--c-text);
  font-family: var(--f-family-body);
  font-size: var(--f-size-base);
  font-weight: var(--f-weight-body);
  line-height: var(--f-line-height);
}

/* Text selection — the single most common way blue gets back onto
   a "no blue" page. */
::selection      { background: var(--c-warning); color: #FFFFFF; }
::-moz-selection { background: var(--c-warning); color: #FFFFFF; }

/* Keyboard focus — the UA ring is blue on every major browser. */
:focus-visible {
  outline: 2px solid var(--c-input-focus);
  outline-offset: 2px;
}

/* Check marks, radio dots, range thumbs, progress bars. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress,
meter {
  accent-color: var(--c-accent);
}

/* WebKit scrollbars inside our own scrolling panels. */
::-webkit-scrollbar             { width: 12px; height: 12px; }
::-webkit-scrollbar-track       { background: var(--c-page-bg); }
::-webkit-scrollbar-thumb       { background: var(--c-accent-bg); border-radius: var(--radius-small); }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent-bg-hover); }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4) 0;
  font-weight: var(--f-weight-bold);
  color: var(--c-text);          /* solid, never shadowed */
}
h1 { font-size: var(--f-size-h1); }
h2 { font-size: var(--f-size-h2); }
h3 { font-size: var(--f-size-h3); }

p { margin: 0 0 var(--space-4) 0; }

a,
a:visited {
  color: var(--c-accent);
  text-decoration: none;
}
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

hr {
  border: none;
  border-top: 1px solid var(--c-card-border);
  margin: var(--space-3) 0;
}

/* =============================================================
   PAGE WRAPPER + HEADER + FOOTER
   ============================================================= */
.page-wrap {
  width: 100%;
  max-width: var(--max-content-w);
  margin: 0 auto;
  padding: 10px;            /* 10px outer border, no more */
}

.site-header {
  background: var(--c-header-bg);
  color: var(--c-header-text);
  padding: var(--space-3) var(--space-4) 4px var(--space-4);
  margin-bottom: 0;        /* no empty band above the top tabs */
}
.site-header__inner {
  width: 100%;
  max-width: var(--max-content-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-header__title {
  font-size: var(--f-size-large);
  font-weight: var(--f-weight-bold);
  color: var(--c-header-text);
  text-decoration: none;
}
.site-header__title:hover { color: var(--c-header-text); text-decoration: none; }
.site-header__tagline {
  color: #FFE0EC;          /* light pink on deep cherry */
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
}
.site-header__nav a         { color: var(--c-header-text); margin-left: var(--space-4); }
.site-header__nav a:hover   { color: var(--c-header-text); text-decoration: underline; }

.site-footer {
  margin-top: var(--space-5);
  padding: var(--space-3);
  text-align: center;
  color: var(--c-text-soft);
  font-size: var(--f-size-small);
  border-top: 1px solid var(--c-card-border);
}
.site-footer__links a {
  color: var(--c-text-soft);
  margin: 0 var(--space-2);
  font-weight: var(--f-weight-bold);
}
.site-footer__links a:hover { color: var(--c-accent); }
.site-footer__sep       { color: var(--c-text-soft); opacity: 0.6; }
.site-footer__copyright { margin-top: 6px; }

/* Long-form legal / disclosure pages.  MrStockTrader capped these
   at 760px; here the cap is gone (rule 4) — the text column grows
   with the window like everything else. */
.legal { width: 100%; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.legal p, .legal li { line-height: 1.55; }

/* =============================================================
   CARDS / TILES  (the whole rectangle is the click target)
   ============================================================= */
.card {
  position: relative;          /* anchors floating .helpq-body popups */
  width: 100%;
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius);
  padding: 14px var(--space-4);
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.card h2 { margin-bottom: 8px; }
.card h3 { margin-bottom: 6px; }
.clickable-card,
.card[data-href] {
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.clickable-card:hover,
.card[data-href]:hover {
  background: var(--c-card-hover);
  box-shadow: var(--shadow-card-hover);
}
.clickable-card:active,
.card[data-href]:active { transform: translateY(1px); }

/* Card tinted by what it is for.  Border only — the fill stays the
   card plum so the text contrast never changes. */
.card--short  { border-left: 4px solid var(--c-short); }
.card--cover  { border-left: 4px solid var(--c-cover); }
.card--danger { border-left: 4px solid var(--c-danger); }
.card--buy    { border-left: 4px solid var(--c-cover); }
.card--sell   { border-left: 4px solid var(--c-short); }

/* =============================================================
   BUTTONS
   text + 8px each side, 28-32px tall, 12px / 700.
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  max-height: 32px;
  padding: 3px 10px;
  border: none;
  border-radius: var(--radius-small);
  font-family: var(--f-family-body);
  font-size: 12px;
  font-weight: var(--f-weight-bold);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--primary        { background: var(--c-primary);         color: var(--c-text-inverse); }
.btn--primary:hover  { background: var(--c-primary-hover);   color: var(--c-text-inverse); text-decoration: none; }
.btn--accent         { background: var(--c-accent-bg);       color: var(--c-text-inverse); }
.btn--accent:hover   { background: var(--c-accent-bg-hover); color: var(--c-text-inverse); text-decoration: none; }
.btn--danger         { background: var(--c-danger);          color: var(--c-text-inverse); }
.btn--danger:hover   { background: var(--c-danger-hover);    color: var(--c-text-inverse); text-decoration: none; }
.btn--warn           { background: var(--c-warning);         color: var(--c-text-inverse); }
.btn--warn:hover     { background: var(--c-warning-hover);   color: var(--c-text-inverse); text-decoration: none; }
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-card-border);
}
.btn--ghost:hover { background: var(--c-card-hover); text-decoration: none; }
.btn--block { width: 100%; max-width: 100%; }

/* THE TWO BUTTONS THIS SITE EXISTS FOR.
   OPENING A SHORT IS A SELL — it wears the sell tone (orange).
   COVERING A SHORT IS A BUY  — it wears the buy tone (green).
   They are never the same colour and never next to each other in
   the same colour, so the hand learns which is which before the
   eye reads the label. */
.btn--short        { background: var(--c-short); color: var(--c-text-inverse); }
.btn--short:hover  { background: var(--c-short-hover); color: var(--c-text-inverse); text-decoration: none; }
.btn--cover        { background: var(--c-cover); color: var(--c-text-inverse); }
.btn--cover:hover  { background: var(--c-cover-hover); color: var(--c-text-inverse); text-decoration: none; }

/* Carried across from MrStockTrader so shared markup keeps working.
   NEVER two adjacent buttons of the same colour. */
.btn--buy          { background: #1B5E20; color: #FFFFFF; border: none; }
.btn--buy:hover    { background: #2E7D32; }
.btn--buy2         { background: #00897B; color: #FFFFFF; border: none; }   /* teal-green, hue 174 */
.btn--buy2:hover   { background: #00A08E; }
.btn--sell         { background: #B71C1C; color: #FFFFFF; border: none; }
.btn--sell:hover   { background: #C62828; }
.btn--sell2        { background: #E65100; color: #FFFFFF; border: none; }
.btn--sell2:hover  { background: #EF6C00; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  width: 100%;
}

/* Per-row action buttons (Cover on a position, Cancel on an order). */
.row-form { display: inline; margin: 0; padding: 0; }
.btn--row {
  padding: 2px 10px;
  min-height: 26px;
  font-size: 12px;
}

/* =============================================================
   FORMS — dark recessed slots, never a white box
   ============================================================= */
.form-group { margin-bottom: var(--space-4); }
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--c-text);
  font-weight: var(--f-weight-bold);
  font-size: var(--f-size-small);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 5px var(--space-3);
  background: var(--c-input-bg);
  color: var(--c-input-text);
  border: 2px solid var(--c-input-border);
  border-radius: var(--radius-small);
  font-family: inherit;
  font-size: var(--f-size-base);
  font-weight: 500;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--c-input-focus);
  outline-offset: -2px;
}
.form-help {
  margin-top: var(--space-1);
  font-size: var(--f-size-small);
  color: var(--c-text-soft);
}
/* One sentence beside every option, explaining what it does.  A
   setting with no explanation is a setting he has to guess at. */
.form-why {
  display: block;
  margin-top: 2px;
  font-size: var(--f-size-small);
  color: var(--c-text-soft);
  font-weight: var(--f-weight-body);
}

/* =============================================================
   GLOBAL FORM CONTROLS — applies to EVERY input on the site,
   including bare ones outside a .form-group.
   ============================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  background: var(--c-input-bg);
  color: var(--c-input-text);
  border: 2px solid var(--c-input-border);
  border-radius: var(--radius-small);
  padding: 5px var(--space-3);
  font-family: inherit;
  font-size: var(--f-size-base);
  font-weight: 500;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--c-input-focus);
  outline-offset: -2px;
}
input::placeholder, textarea::placeholder {
  color: var(--c-input-placeholder);
  opacity: 1;
}

/* Native <select> renders its option list with the browser theme.
   Force it dark so the open list matches the page. */
select option {
  background: var(--c-input-bg);
  color: var(--c-text);
}

input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background: var(--c-card-hover);
}

/* =============================================================
   FIELD-LEVEL VALIDATION ERRORS
   Mark the FAILING FIELD, not just a banner at the top.
   ============================================================= */
input.field-error,
select.field-error,
textarea.field-error {
  border: 3px solid #B71C1C !important;
  box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.35) !important;
  background: #2A0E14 !important;    /* dark red ground */
  color: #FFCDD2 !important;         /* bright pink text reads on it */
}
.field-error-msg {
  display: inline-block;
  background: #B71C1C;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: var(--f-size-base);
  margin-top: 6px;
  letter-spacing: 0.3px;
}
.field-error-msg::before { content: "\2190  "; }      /* leftward arrow */
.field-error-row {
  border: 2px solid #B71C1C;
  background: rgba(183, 28, 28, 0.10);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
}

/* =============================================================
   BANNERS / MESSAGES
   ============================================================= */
.banner {
  padding: 8px 12px;
  border-radius: var(--radius-small);
  margin-bottom: 10px;
  font-weight: var(--f-weight-bold);
  font-size: var(--f-size-base);
}
.banner--info  { background: var(--c-banner-info-bg);  color: var(--c-banner-info-text); }
.banner--warn  { background: var(--c-banner-warn-bg);  color: var(--c-banner-warn-text); }
.banner--error { background: var(--c-banner-error-bg); color: var(--c-banner-error-text); }
.banner--ok    { background: var(--c-banner-ok-bg);    color: var(--c-banner-ok-text); }

/* =============================================================
   GRID HELPERS — auto-fit so a row always fills the width and
   re-wraps evenly instead of leaving a ragged tail.
   ============================================================= */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr;         gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;     gap: 14px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* =============================================================
   AUTH FORM  (login / register / accept)
   No width cap — it stretches with the window like every other
   panel on the site.
   ============================================================= */
.auth-card { width: 100%; margin: var(--space-5) auto; }
.auth-card h1 { margin-bottom: var(--space-4); text-align: center; }
.auth-footnote {
  text-align: center;
  margin-top: var(--space-4);
  color: var(--c-text-soft);
  font-size: var(--f-size-small);
}

/* =============================================================
   KPI / BIG-NUMBER TILES
   Dollars are the headline number.  A percent may sit beside a
   dollar figure; it never replaces it.
   ============================================================= */
.kpi-big,
.kpi-medium {
  font-size: var(--f-size-large);
  font-weight: var(--f-weight-bold);
  margin: 0;
  color: var(--c-text);
}
.kpi-sub {
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  color: var(--c-text-soft);
  margin-left: 6px;
}

/* =============================================================
   DATA TABLE
   Light-on-dark headers, every header sorts (ui.js), blanks are
   blank, and a hot borrow rate shouts.
   ============================================================= */
.table-wrap,
.bst-table-wrap {
  width: 100%;
  overflow: auto;             /* the SCROLLBAR LIVES HERE, never on body */
  box-sizing: border-box;
  margin: 6px 0 12px;
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-small);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-size-small);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--c-card-border);
}
.data-table th {
  background: var(--c-thead-bg);
  color: var(--c-thead-text);
  font-weight: var(--f-weight-bold);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;            /* ui.js makes every header sortable */
}
.data-table th[data-nosort] { cursor: default; }
.data-table--sortable th    { cursor: pointer; }
.data-table th:hover        { background: var(--c-thead-bg-hover); }
.data-table th[data-nosort]:hover { background: var(--c-thead-bg); }
.data-table th.sorted       { background: var(--c-thead-bg-hover); color: #FFFFFF; }
.data-table tbody tr:hover td { background: var(--c-card-hover); }
.data-table td.num,
.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The sort indicator.  .sort-ind is the static one a page can print
   itself; .mrz-arw is the one ui.js creates and writes into. */
.data-table th .sort-ind,
.data-table th .mrz-arw,
th .sort-ind,
th .mrz-arw {
  display: inline-block;
  margin-left: 4px;
  color: #B9F6CA;
  font-weight: var(--f-weight-bold);
}
.data-table th.sorted .mrz-arw,
.data-table th.sorted .sort-ind { color: #FFFFFF; opacity: 1 !important; }

/* Symbol links written by ui.js: amber, bold, obviously clickable. */
.mrz-sym,
.mrz-sym:visited { color: var(--c-accent); font-weight: var(--f-weight-bold); }
.mrz-sym:hover   { color: var(--c-accent-hover); text-decoration: underline; }
[data-symbol]    { cursor: pointer; }

/* AN UNKNOWN VALUE IS BLANK.  Never a 0, never a dash that looks
   like a zero, never a stale figure carried forward.  The dotted
   rule says "we do not know this"; the title says why on hover. */
.blank-cell {
  color: transparent;
  cursor: help;
}
.blank-cell::before {
  content: "";
  display: inline-block;
  width: 2.2em;
  border-bottom: 1px dotted var(--c-input-border);
  vertical-align: middle;
  opacity: 0.85;
}

/* A borrow rate high enough to eat the trade.  Measured 2026-09-16:
   rates on his own candidates ran from 0% to 591% a year, so this
   is not decoration — it is the number that decides the trade. */
.borrow-hot {
  background: var(--c-borrow-hot-bg);
  color: var(--c-borrow-hot-text) !important;
  font-weight: var(--f-weight-bold);
  box-shadow: inset 3px 0 0 0 var(--c-warning);
}

/* The monospace table variant (ledgers, fills). */
.bst-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-family-mono);
  font-size: var(--f-size-small);
  color: var(--c-text);
}
.bst-table thead th {
  background: var(--c-thead-bg);
  color: var(--c-thead-text);
  font-weight: var(--f-weight-bold);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-card-border);
  white-space: nowrap;
}
.bst-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-card-border);
  white-space: nowrap;
}
.bst-table tbody tr:hover td { background: var(--c-card-hover); }
.bst-table .muted { color: var(--c-text-soft); opacity: 0.85; }

/* =============================================================
   TOP TABS — Selling Shorts / Futures / Positions / Trades /
              Settings / Manual / Logs   (BUILD_SPEC §3)
   Not selected: a small colour square + the label.
   Selected:     the whole tab filled with that colour.
   ============================================================= */
.top-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: var(--max-content-w);
  margin: 0 auto;
  padding: 4px var(--space-4) 6px var(--space-4);
  background: var(--c-card-bg);
  border-bottom: 1px solid var(--c-card-border);
}
.top-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  min-height: 30px;
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--c-text);
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.top-tab:hover {
  background: var(--c-card-hover);
  color: var(--c-text);
  text-decoration: none;
}
.top-tab__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--tab-color, #6B5272);
  border-radius: 3px;
  flex-shrink: 0;
}
.top-tab.active {
  background: var(--tab-color, #5A4560);
  color: var(--tab-ink, #FFFFFF);
  border-color: var(--tab-color, #5A4560);
}
.top-tab.active .top-tab__dot { display: none; }
.top-tab.active:hover {
  background: var(--tab-color, #5A4560);
  color: var(--tab-ink, #FFFFFF);
}

/* -------------------------------------------------------------
   PER-TAB COLOURS — BUILD_SPEC §3, none of them blue.

   THE TWO HALVES RULE (Mr Z, 2026-09-13): a highlighted tab names
   BOTH halves — the background AND the ink — and they sit at
   opposite ends of the lightness scale.  A DARK background gets
   LIGHT ink; a LIGHT background gets DARK ink.  Every pair below
   was measured, not eyeballed; the floor for text is 4.5:1.

     shorts     cherry #B03060 + white   #FFFFFF  ->  6.11:1
     futures    teal   #00695C + white   #FFFFFF  ->  6.61:1
     positions  purple #6A1B9A + white   #FFFFFF  ->  9.39:1
     trades     amber  #F9A825 + dark    #2A1A00  ->  8.55:1
     settings   orange #EF6C00 + white   #FFFFFF  ->  3.08:1
     manual     brown  #4E342E + white   #FFFFFF  -> 11.32:1
     logs       slate  #4F4A46 + white   #FFFFFF  ->  8.75:1

   TRADES is the only one with dark ink, and it has to be: white on
   #F9A825 measures 1.97:1, which is the exact unreadable
   white-over-yellow pair he photographed on 2026-09-13.  Amber is
   fine — it was the WHITE on it that was not.  Put near-black-brown
   on it and it becomes the most readable tab in the strip.

   SETTINGS keeps white ink at 3.08:1 to match the Settings tab that
   has been orange-with-white on MrStockTrader for months.  Same
   colour, same ink, same muscle memory.  It is the weakest pair
   here; say the word and it gets the dark ink treatment too.

   LOGS was specified as #37474F.  That is Material "Blue Grey 800":
   R55 G71 B79, blue channel largest, hue 200 degrees — inside the
   blue band.  BUILD_SPEC §3 says on the same line "check it reads
   as grey, not blue", so it was shifted warm to #4F4A46 (R79 G74
   B70, hue 27 degrees) at the same lightness.  It reads as slate.
   ------------------------------------------------------------- */
.top-tab--shorts    { --tab-color: #B03060; --tab-ink: #FFFFFF; }
.top-tab--futures   { --tab-color: #00695C; --tab-ink: #FFFFFF; }
.top-tab--positions { --tab-color: #6A1B9A; --tab-ink: #FFFFFF; }
.top-tab--trades    { --tab-color: #F9A825; --tab-ink: #2A1A00; }
.top-tab--settings  { --tab-color: #EF6C00; --tab-ink: #FFFFFF; }
.top-tab--manual    { --tab-color: #4E342E; --tab-ink: #FFFFFF; }
.top-tab--logs      { --tab-color: #4F4A46; --tab-ink: #FFFFFF; }

.top-tabs__divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--c-card-border);
  margin: 0 var(--space-2);
}

/* Connect / Disconnect zone — leftmost in the top-tab strip. */
.connect-form { display: inline; margin: 0; padding: 0; }
.connect-btn {
  padding: 4px 14px;
  min-height: 30px;
  border-radius: var(--radius-small);
  border: 1px solid;
  font-family: inherit;
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  color: #FFFFFF;
  cursor: pointer;
}
.connect-btn--off       { background: var(--c-danger);        border-color: var(--c-danger); }
.connect-btn--off:hover { background: var(--c-danger-hover);  border-color: var(--c-danger-hover); }
.connect-btn--on        { background: var(--c-primary);       border-color: var(--c-primary); }
.connect-btn--on:hover  { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.connect-status {
  display: inline-block;
  align-self: center;
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  margin: 0 var(--space-2);
}
.connect-status--on  { color: #B9F6CA; }
.connect-status--off { color: #FF8A80; }

/* =============================================================
   SUB-TABS — the second row inside each main tab.  Active uses
   the parent tab's colour, set by .sub-tabs--<key>.
   ============================================================= */
.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  max-width: var(--max-content-w);
  margin: 0 auto;
  padding: 6px var(--space-4);
  background: var(--c-page-bg);
  border-bottom: 1px solid var(--c-card-border);
}
.sub-tab {
  display: inline-block;
  padding: 4px 10px;
  min-height: 28px;
  border-radius: var(--radius-small);
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  color: var(--c-text-soft);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.sub-tab:hover {
  background: var(--c-card-hover);
  color: var(--c-text);
  text-decoration: none;
}
/* Same two-halves rule as the top tabs.  The fallback is a DARK
   neutral plum, never the light amber accent — white on light amber
   is the unreadable pair, and a tab somebody forgets to paint must
   still come out readable. */
.sub-tab.active,
.sub-tab.active:hover {
  background: var(--tab-color, #3E3147);
  color: var(--tab-ink, #FFFFFF);
}
.sub-tabs--shorts    { --tab-color: #B03060; --tab-ink: #FFFFFF; }
.sub-tabs--futures   { --tab-color: #00695C; --tab-ink: #FFFFFF; }
.sub-tabs--positions { --tab-color: #6A1B9A; --tab-ink: #FFFFFF; }
.sub-tabs--trades    { --tab-color: #F9A825; --tab-ink: #2A1A00; }
.sub-tabs--settings  { --tab-color: #EF6C00; --tab-ink: #FFFFFF; }
.sub-tabs--manual    { --tab-color: #4E342E; --tab-ink: #FFFFFF; }
.sub-tabs--logs      { --tab-color: #4F4A46; --tab-ink: #FFFFFF; }

/* Make every active tab, top or sub, unmistakable. */
.sub-tab.active,
.top-tab.active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18) inset,
              0 2px 6px rgba(18, 10, 22, 0.45);
  font-weight: var(--f-weight-loud);
}

/* =============================================================
   THE STATUS STRIP  (BUILD_SPEC §6)
   One row, on every page, directly under the tabs.  ALWAYS
   VISIBLE.  NEVER COLLAPSED.  It says which mode the program is
   in and whose money is at risk, and it sticks to the top of the
   window so scrolling can never hide it.

   Every figure in it is read from safety.json and the broker.
   Nothing here is hard-coded and nothing is invented: a figure
   that could not be read renders as .blank-cell, not as zero.
   ============================================================= */
.mode-strip {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  width: 100%;
  max-width: 100%;
  padding: 6px var(--space-4);
  background: var(--c-card-bg);
  border-top: 1px solid var(--c-card-border);
  border-bottom: 2px solid var(--c-card-border);
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  color: var(--c-text);
}
.mode-strip__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
}
/* A VALUE SITS NEXT TO ITS LABEL.  Never split across the screen,
   never a label on the left edge and its number on the right. */
.mode-strip__fact {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.mode-strip__label { color: var(--c-text-soft); font-weight: var(--f-weight-bold); }
.mode-strip__val   { color: var(--c-text);      font-weight: var(--f-weight-loud);
                     font-variant-numeric: tabular-nums; }
.mode-strip__val--money { color: #FFEB3B; }
.mode-strip__val--up    { color: var(--c-up); }
.mode-strip__val--down  { color: var(--c-down); }
.mode-strip__asof       { color: var(--c-text-soft); font-weight: var(--f-weight-bold); }

/* ---- THE MODE BADGE — the loudest thing on the page ---- */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: var(--radius-small);
  border: 2px solid transparent;
  font-weight: var(--f-weight-loud);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}

/* DISARMED — the engine will not even look for a trade.
   Warm slate, quiet on purpose.  (Specified as #37474F; that is
   Material Blue Grey 800 and its blue channel is the largest of the
   three, so it was shifted warm to #4F4A46 at the same lightness.
   It reads as grey, which is the point of the colour.) */
.mode-badge--disarmed {
  background: var(--c-slate);
  border-color: var(--c-slate-hover);
  color: #FFFFFF;
}

/* SHADOW — the full strategy against live prices, sending nothing.
   Amber: awake, but not spending. */
.mode-badge--shadow {
  background: var(--c-warning);
  border-color: #FFB74D;
  color: #FFFFFF;
}

/* ARMED — orders go to the broker and the money is real.  This is
   the loudest element on the page and it is meant to be: the
   biggest type allowed (16px), the heaviest weight, a white ring,
   and a slow pulse so it catches the eye from across the room. */
.mode-badge--armed {
  background: var(--c-danger);
  border-color: #FFFFFF;
  color: #FFFFFF;
  padding: 5px 14px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 2px var(--c-danger) inset, 0 0 12px rgba(183, 28, 28, 0.85);
  animation: tt-armed-pulse 1.8s ease-in-out infinite;
}
@keyframes tt-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--c-danger) inset, 0 0 0  0px rgba(183, 28, 28, 0.85); }
  50%      { box-shadow: 0 0 0 2px var(--c-danger) inset, 0 0 0 10px rgba(183, 28, 28, 0.00); }
}
@media (prefers-reduced-motion: reduce) {
  .mode-badge--armed { animation: none; }
}

/* When the account is armed the whole strip carries a red edge, so
   the state is visible even in the corner of his eye. */
.mode-strip--armed    { border-bottom-color: var(--c-danger);  background: #3A2230; }
.mode-strip--shadow   { border-bottom-color: var(--c-warning); }
.mode-strip--disarmed { border-bottom-color: var(--c-slate); }

/* =============================================================
   LOG / MESSAGE BOXES
   ============================================================= */
.msgbox-skel {
  min-height: 140px;
  max-height: 50vh;
  overflow: auto;
  padding: var(--space-3);
  background: var(--c-input-bg);
  color: var(--c-text-soft);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-small);
  font-family: var(--f-family-mono);
  font-size: var(--f-size-small);
  white-space: pre-wrap;
}
.msgbox {
  padding: var(--space-2);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-small);
  font-family: var(--f-family-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
}
.msg-line {
  padding: 2px 0;
  border-bottom: 1px solid var(--c-card-border);
  word-break: break-word;
}
.msg-line:last-child { border-bottom: none; }

.bst-out-box {
  width: 100%;
  min-height: 180px;
  height: auto;
  overflow: auto;              /* its own scrollbar, not the body's */
  resize: vertical;            /* he can drag the bottom edge */
  box-sizing: border-box;
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-small);
  padding: 0;
  background: var(--c-input-bg);
}
.bst-out-box__inner {
  margin: 0;
  padding: 8px 10px;
  font-family: Consolas, "Courier New", var(--f-family-mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

/* CONTRAST palette for the log boxes: DARK non-blue grounds,
   BRIGHT yellow / white / mint / pink / amber text. */
.bst-out-box .hdr     { font-weight: 700; color: #FFFFFF !important; }
.bst-out-box .bold    { font-weight: 700; color: #FFEB3B !important; }
.bst-out-box .green   { color: #B9F6CA !important; font-weight: 700; }
.bst-out-box .red     { color: #FFCDD2 !important; font-weight: 700; }
.bst-out-box .blue    { color: #FFEB3B !important; font-weight: 700; }  /* re-mapped: bright yellow, the name is legacy */
.bst-out-box .gold    { color: #FFE082 !important; font-weight: 700; }
.bst-out-box .darkred { color: #F8BBD0 !important; font-weight: 700; }
.bst-out-box .muted   { color: #E0E0E0 !important; font-weight: 600; }

/* The universal sign rule — works EVERYWHERE, not only inside a log
   box, so tables paint a gain mint and a loss salmon. */
.green, td.green, span.green { color: var(--c-up)   !important; font-weight: 700; }
.red,   td.red,   span.red   { color: var(--c-down) !important; font-weight: 700; }
.amber, td.amber, span.amber { color: var(--c-flat) !important; font-weight: 700; }

/* =============================================================
   STATUS BADGES + TOGGLE / RADIO ROWS
   ============================================================= */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  letter-spacing: 0.02em;
}
.badge--ok    { background: var(--c-banner-ok-bg);    color: var(--c-banner-ok-text); }
.badge--warn  { background: var(--c-banner-warn-bg);  color: var(--c-banner-warn-text); }
.badge--error { background: var(--c-banner-error-bg); color: var(--c-banner-error-text); }
.badge--info  { background: var(--c-banner-info-bg);  color: var(--c-banner-info-text); }
.badge--off   { background: var(--c-slate);           color: #E0E0E0; }
.badge--short { background: var(--c-short);           color: #FFFFFF; }
.badge--cover { background: var(--c-cover);           color: #FFFFFF; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-card-border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-row label { font-weight: var(--f-weight-bold); cursor: pointer; flex: 1; }
.toggle-row .toggle-row__hint {
  color: var(--c-text-soft);
  font-weight: var(--f-weight-body);
  font-size: var(--f-size-small);
  margin-left: var(--space-2);
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-weight: var(--f-weight-bold);
}
.radio-row label:hover { background: var(--c-card-hover); }
.radio-row input[type="radio"] { width: 18px; height: 18px; cursor: pointer; }

/* Small monospace value (masked keys, account numbers). */
.text-mono {
  font-family: var(--f-family-mono);
  font-size: var(--f-size-small);
  background: var(--c-card-hover);
  color: var(--c-text);
  padding: 2px var(--space-2);
  border-radius: var(--radius-small);
}

/* Section heading bar inside a card. */
.section-head {
  position: relative;          /* anchors floating .helpq-body popups */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-head h2 { margin: 0; }

/* Inline help text. */
.muted { color: var(--c-text-soft); font-size: var(--f-size-small); }

/* =============================================================
   WELCOME STRIP  (compact, replaces a big welcome card)
   ============================================================= */
.welcome-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  margin-bottom: 10px;
}
.welcome-strip__title {
  margin: 0;
  font-size: var(--f-size-large);
  font-weight: var(--f-weight-bold);
  color: var(--c-text);
}
.welcome-strip + .card,
.welcome-strip + section.card { margin-top: 0; }

/* Tightened variants. */
.card--tight         { padding: 12px var(--space-3); margin-bottom: 10px; }
.section--tight      { padding: 12px var(--space-3); }
.section-head--tight { margin-bottom: 10px; }
.grid--tight         { gap: 10px; margin-bottom: 14px; }
.h-tight             { margin: 14px 0 6px 0; }

/* =============================================================
   SUMMARY BOXES  (a row of headline dollar figures)
   auto-fit: the row always fills the width and re-wraps evenly.
   ============================================================= */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}
.summary-box {
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius-small);
  padding: 10px 12px;
  text-align: center;
}
.summary-box__label {
  font-size: var(--f-size-small);
  color: var(--c-text-soft);
  margin-bottom: 4px;
}
.summary-box__value {
  font-size: var(--f-size-large);
  font-weight: var(--f-weight-bold);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.summary-box--win      { border-color: #2E7D32; }
.summary-box--win      .summary-box__value { color: var(--c-up); }
.summary-box--lose     { border-color: #B71C1C; }
.summary-box--lose     .summary-box__value { color: var(--c-down); }
.summary-box--balance  { border-color: var(--c-accent); }
.summary-box--balance  .summary-box__value { color: var(--c-accent); }
.summary-box--short    { border-color: var(--c-short); }
.summary-box--short    .summary-box__value { color: #FFD180; }

/* =============================================================
   "?" HELP ICON
   Beside any label that could be read two ways.  Click toggles the
   sibling .helpq-body with the plain-English explanation.
   ============================================================= */
.helpq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  background: transparent;
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  line-height: 1;
  vertical-align: middle;
}
/* Hover lifts the ground, never the text: the letters stay LIGHT.
   (MrStockTrader inverts to dark ink here; dark font colours are
   banned, so this keeps amber-on-tint instead.) */
.helpq:hover { background: rgba(255, 213, 79, 0.20); color: var(--c-accent-hover); }

/* Floating overlay — never pushes page content down.  The parent
   (.card or .section-head) is position:relative so it anchors.
   MrStockTrader draws this panel WHITE with dark text; that breaks
   the no-dark-font rule, so here it is a lifted plum panel with an
   amber border and light text. */
.helpq-body {
  display: none;
  position: absolute;
  top: 100%;
  right: 8px;
  z-index: 50;
  margin-top: 6px;
  padding: 10px 14px;
  min-width: 280px;
  max-width: 560px;
  background: #3E2F47;
  border: 2px solid var(--c-accent);
  border-radius: 6px;
  box-shadow: var(--shadow-modal);
  font-size: var(--f-size-small);
  line-height: 1.5;
  color: #FFFFFF;
  overflow: auto;
  max-height: 60vh;
}
.helpq-body.open   { display: block !important; }
.helpq-body strong { color: #FFEB3B; }
.helpq-body a,
.helpq-body .btn   { display: inline-block; margin-top: 6px; font-weight: 700; }

/* =============================================================
   GEAR BUTTON  (top-right of the header bar)
   ============================================================= */
.gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--c-header-text);
  border-radius: var(--radius-small);
  cursor: pointer;
  padding: 0;
}
.gear-btn:hover { background: rgba(255, 255, 255, 0.12); }
.gear-btn svg   { display: block; }

/* =============================================================
   MODAL
   Centred both ways inside the viewport.  Width is a PERCENTAGE,
   never a pixel cap, so it grows with the window.
   ============================================================= */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal.is-open { display: flex; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 10, 22, 0.65);
}
.modal__dialog {
  position: relative;
  margin: 0;
  width: 92%;
  max-width: 100%;
  max-height: 92vh;
  background: var(--c-card-bg);
  color: var(--c-text);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-card-hover);
  border-bottom: 1px solid var(--c-card-border);
}
.modal__header h2 { margin: 0; font-size: var(--f-size-h3); }
.modal__close {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-text);
  border-radius: var(--radius-small);
}
.modal__close:hover { background: var(--c-card-border); }
.modal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--c-card-border);
  background: var(--c-card-bg);
}
.modal__tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: #E0E0E0;
  font-family: inherit;
  font-size: var(--f-size-base);
  font-weight: var(--f-weight-bold);
}
.modal__tab:hover  { color: #FFFFFF; }
.modal__tab.active {
  color: #FFEB3B;
  border-bottom-color: #FFEB3B;
}
.modal__body {
  padding: var(--space-4);
  overflow: auto;              /* its own scrollbar */
  flex: 1;
}
.modal__panel        { display: none; }
.modal__panel.active { display: block; }
.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--c-card-border);
  background: var(--c-card-bg);
}
body.no-scroll { overflow: hidden; }

/* =============================================================
   LABEL + VALUE ON ONE ROW
      <div class="kv-row">
        <span class="kv-label">Net liquidity:</span>
        <span class="kv-val">$0.00  as of 2026-09-16 15:45 ET</span>
      </div>
   A value never sits at the far side of the screen from its label.
   ============================================================= */
.kv-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 3px 0;
  row-gap: 12px;
}
.kv-row > .kv-label { min-width: 140px; font-weight: 700; color: var(--c-text-soft); }
.kv-row > .kv-val   { flex: 1 1 auto;  min-width: 0; font-weight: 700; color: var(--c-text); }
.kv-row > .kv-val a { font-weight: 700; }

/* A timestamp always carries DATE AND TIME, in ET. */
.stamp {
  font-variant-numeric: tabular-nums;
  color: var(--c-text-soft);
  font-weight: var(--f-weight-bold);
  white-space: nowrap;
}

/* =============================================================
   EVERYTHING GROWS  —  no panel is ever a fixed size
   ============================================================= */
main { width: 100%; max-width: 100%; }
.page-wrap,
.site-header__inner,
.top-tabs,
.sub-tabs,
.mode-strip     { max-width: 100% !important; width: 100%; }
.card, section.card { width: 100%; box-sizing: border-box; }
.card > .grid-2,
.card > .grid-3,
.card > .btn-row { width: 100%; }
table.data-table,
.bst-table       { width: 100%; }
.card,
.card--tight,
.kpi-big,
.kpi-medium,
.summary-card    { max-height: none !important; }

/* Every output panel gets its own full-width row — no 2-up or 3-up
   stacks of output boxes.  He resizes the window and each panel
   grows in both directions. */
.grid-3:has(.bst-out-box),
.grid-2:has(.bst-out-box),
.grid-3:has(.kpi-big),
.grid-2:has(.kpi-big),
.grid-3:has(.kpi-medium),
.grid-2:has(.kpi-medium),
.grid-3:has(.summary-card),
.grid-2:has(.summary-card) {
  grid-template-columns: minmax(0, 1fr) !important;
}
.grid-3:has(> .card):not(:has(.form-group)),
.grid-2:has(> .card):not(:has(.form-group)),
.grid-3:has(> .card--tight):not(:has(.form-group)),
.grid-2:has(> .card--tight):not(:has(.form-group)) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* =============================================================
   COMPACTNESS — strip the empty space.  Labels and values share a
   row wherever they can.  No padding-heavy card holding one line.
   ============================================================= */
.card, .card--tight, .section--tight { padding: 8px 10px !important; margin-bottom: 8px !important; }
h3.h-tight,
.section-head .h-tight,
.section-head h2,
.section-head h3 { margin: 0 0 4px 0 !important; }
.section-head,
.section-head--tight { padding: 4px 8px !important; margin-bottom: 6px !important; }
.btn-row    { margin: 4px 0 !important; }
.form-group { margin-bottom: 4px !important; }
.form-group label { margin: 0 0 2px 0 !important; padding: 0 !important; line-height: 1.2 !important; }
.toggle-row { margin: 2px 0 !important; padding: 0 !important; }
.card p, .card--tight p { margin: 2px 0 !important; }
.kpi-medium, .kpi-big   { margin: 2px 0 !important; }

/* =============================================================
   MOBILE — one breakpoint, 900px
   ============================================================= */
@media (max-width: 900px) {
  .page-wrap   { padding: 10px; }
  .site-header { padding: var(--space-3); }
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .site-header__nav a { margin-left: 0; margin-right: var(--space-3); }

  .top-tabs { padding: 6px var(--space-3); gap: 4px; }
  .top-tab  { padding: 6px 10px; min-height: 38px; }
  .sub-tabs { padding: 4px var(--space-3); }
  .sub-tab  { padding: 6px 8px; min-height: 36px; }
  .connect-btn { padding: 6px 12px; min-height: 38px; }
  .top-tabs__divider { display: none; }

  .mode-strip { gap: 4px var(--space-3); padding: 6px var(--space-3); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .btn     { width: 100%; }
  .btn--row{ width: auto; }
  .btn-row { flex-direction: column; }

  .modal__dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: none;
  }
}

/* =============================================================
   FINAL FONT-SIZE HARD-CAP
   Nothing below 12px, nothing above 16px, anywhere, ever.
   h1 / h2 / h3 are ALL 16px — bold carries the hierarchy.
   ============================================================= */
body, p, td, th, li, label, span, input, select, textarea,
button, h1, h2, h3, h4, h5, h6, .muted, .text-mono, .badge,
code, small {
  font-size: clamp(12px, 1em, 16px) !important;
}
h1, h2, h3 { font-size: 16px !important; font-weight: 700 !important; }
h4, h5, h6 { font-size: 14px !important; font-weight: 700 !important; }
.bst-out-box, .bst-out-box__inner, .bst-out-box__inner * { font-size: 12px !important; }

/* The status strip is the exception that has to shout: the badge
   gets the top of the allowed range so ARMED cannot be missed. */
.mode-badge            { font-size: 14px !important; }
.mode-badge--armed     { font-size: 16px !important; }
.mode-strip__val       { font-size: 14px !important; }

/* =============================================================
   FINAL INPUT HARD-CAP
   MrStockTrader's stylesheet ends with a block forcing inputs to a
   WHITE background with !important.  That is the opposite of the
   rule for this site (BUILD_SPEC §4 rule 6: dark recessed slots,
   never a white box), so the block is INVERTED here — same
   safety-net idea, opposite colour — and no inline style, no page
   CSS and no future edit can put a white input back.
   ============================================================= */
input,
textarea,
select {
  background-color: var(--c-input-bg) !important;
  color: var(--c-input-text) !important;
  border-color: var(--c-input-border);
}
input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: var(--c-input-placeholder) !important;
  opacity: 1 !important;
}
/* Checkboxes and radios are not "slots" — let them draw themselves
   with the amber accent instead of a plum fill. */
input[type="checkbox"],
input[type="radio"] {
  background-color: transparent !important;
  accent-color: var(--c-accent) !important;
}
/* A field that failed validation keeps its red marking. */
input.field-error,
select.field-error,
textarea.field-error {
  background-color: #2A0E14 !important;
  color: #FFCDD2 !important;
}

/* =============================================================
   FINAL BUTTON HARD-CAP
   Every button, every page, whatever its class or inline style:
   text + 8px each side, 28-32px tall, 12px / 700.
   ============================================================= */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
a.btn {
  min-height: 28px !important;
  max-height: 32px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
/* The 22px round help icon is the one allowed exception. */
button.helpq {
  min-height: 22px !important;
  max-height: 22px !important;
  width: 22px !important;
  padding: 0 !important;
  font-size: 13px !important;
}
/* Header icon buttons. */
.theme-toggle,
.gear-btn,
.modal__close {
  min-height: 28px !important;
  max-height: 32px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
}
/* Tabs are links, not buttons, but if a page builds one as a
   <button> it must still look like a tab. */
button.top-tab, button.sub-tab {
  max-height: none !important;
  min-height: 30px !important;
}

/* =============================================================
   BRIGHT-TEXT GUARANTEE — runs LAST so it beats anything older.
   Every letter sits in the upper part of the brightness scale.
   ============================================================= */
.muted, .text-soft { color: var(--c-text-soft) !important; }
code               { color: #FFEB3B !important; }
.kpi-big, .kpi-medium { color: #FFEB3B; }

/* =============================================================
   THE NAMES THE PHP ACTUALLY PRINTS  (added 2026-09-16)

   BUILD_SPEC §6 and the style brief name the status strip
   .mode-strip / .mode-badge--armed, and the honest empty cell
   .blank-cell.  includes/header.php and includes/fmt.php — written
   by the other agents, and not mine to edit — print a different
   vocabulary for the same things:

       .status-strip / __mode / __item / __label / __value
       .badge--armed / --shadow / --disarmed / --unknown
       .unknown            (the empty cell with the reason on hover)
       .val-pos / .val-neg (a gain / a loss)
       .borrow             (an annual borrow rate with its cost)

   Both vocabularies are wired to the same appearance here, in the
   one stylesheet, so the pages render correctly today AND the spec
   names work the moment any markup is updated.  Nobody has to
   touch two files to fix a colour.  If the PHP is ever changed to
   the §6 names, this whole block can be deleted and nothing moves.
   ============================================================= */

/* ---- the strip itself ---- */
.status-strip {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  width: 100%;
  max-width: 100% !important;
  padding: 6px var(--space-4);
  background: var(--c-card-bg);
  border-top: 1px solid var(--c-card-border);
  border-bottom: 2px solid var(--c-card-border);
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
  color: var(--c-text);
}
.status-strip__mode { flex: 0 0 auto; }
/* A VALUE SITS NEXT TO ITS LABEL — never split across the screen. */
.status-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.status-strip__label { color: var(--c-text-soft); font-weight: var(--f-weight-bold); }
.status-strip__value {
  color: var(--c-text);
  font-weight: var(--f-weight-loud);
  font-variant-numeric: tabular-nums;
}

/* ---- the mode badge, under the name fmt_mode_badge() prints ---- */
.badge--armed,
.badge--shadow,
.badge--disarmed,
.badge--unknown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-small);
  border: 2px solid transparent;
  font-weight: var(--f-weight-loud);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}
.badge--disarmed { background: var(--c-slate);   border-color: var(--c-slate-hover); }
.badge--shadow   { background: var(--c-warning); border-color: #FFB74D; }
.badge--unknown  { background: var(--c-slate);   border-color: var(--c-accent); color: var(--c-accent); }
/* ARMED is the loudest element on the page, whichever name it wears.
   The kill-switch badge borrows it deliberately: both mean "real
   money, pay attention right now". */
.badge--armed {
  background: var(--c-danger);
  border-color: #FFFFFF;
  color: #FFFFFF;
  padding: 5px 14px !important;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 2px var(--c-danger) inset, 0 0 12px rgba(183, 28, 28, 0.85);
  animation: tt-armed-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .badge--armed { animation: none; }
}
.status-strip--armed    { border-bottom-color: var(--c-danger);  background: #3A2230; }
.status-strip--shadow   { border-bottom-color: var(--c-warning); }
.status-strip--disarmed { border-bottom-color: var(--c-slate); }

/* ---- the honest empty cell, under the name blank_if_unknown() prints.
        Empty, with a subtle dotted rule so it reads as "not known"
        and never as a zero.  The reason is on hover. ---- */
.unknown {
  color: transparent;
  cursor: help;
}
.unknown::before {
  content: "";
  display: inline-block;
  width: 2.2em;
  border-bottom: 1px dotted var(--c-input-border);
  vertical-align: middle;
  opacity: 0.85;
}
/* The "*" footnote marker fmt.php prints beside a partly-known count
   is a real character, so it must NOT be blanked by the rule above. */
.status-strip__value .unknown,
td .unknown,
.unknown:not(:empty) { color: var(--c-accent); cursor: help; }
.unknown:not(:empty)::before { content: none; }

/* ---- a gain and a loss.  Light mint and light salmon: the colour
        carries the sign, the brightness keeps it readable.  Dark red
        text is banned. ---- */
.val-pos { color: var(--c-up)   !important; font-weight: 700; }
.val-neg { color: var(--c-down) !important; font-weight: 700; }

/* ---- the borrow rate.  Readable amber by default; when the rate is
        high enough to eat the trade, fmt.php should add borrow-hot
        beside it and it turns into the shout. ---- */
.borrow {
  color: var(--c-text-soft);
  font-weight: var(--f-weight-bold);
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.borrow.borrow-hot,
.borrow-hot {
  background: var(--c-borrow-hot-bg);
  color: var(--c-borrow-hot-text) !important;
  font-weight: var(--f-weight-bold);
  box-shadow: inset 3px 0 0 0 var(--c-warning);
}

/* ---- the middle state.  A borrow between about 10% and the member's own
        refusal threshold is still tradeable but is no longer a rounding
        error, and it must not sit in the same grey as a free borrow.
        Quieter than borrow-hot on purpose: a warning that shouts as loudly
        as a refusal teaches him to ignore both. ---- */
.borrow.borrow-warm,
.borrow-warm {
  color: var(--c-accent) !important;
  font-weight: var(--f-weight-bold);
  box-shadow: inset 3px 0 0 0 var(--c-accent);
}

/* Font sizes for the strip, after the global cap so they win. */
.status-strip__value,
.mode-strip__val     { font-size: 14px !important; }
.badge--armed        { font-size: 16px !important; }
.badge--shadow,
.badge--disarmed,
.badge--unknown      { font-size: 14px !important; }
/* The badges are <span>, not <button>: the button hard-cap must not
   squash them. */
.badge--armed, .badge--shadow, .badge--disarmed, .badge--unknown,
.mode-badge { max-height: none; }