/* =============================================================================
   ROB E BANK AI — Polish layer            [2026-08-03]
   =============================================================================
   Loaded LAST. Everything here is deliberately ADDITIVE — properties the
   strategy stylesheets do not already set — so it lifts all 17 workspaces at
   once without a rewrite and without fighting anything.

   The hard constraint that shaped this file: token adoption is very uneven.
   tradex.css (2013 lines) uses ZERO var(--) and 251 hardcoded hex; goon_x.css
   uses 2; bad_ute.css none. A :root-only change would brighten half the app
   and leave the biggest strategies behind — MORE inconsistency, not less. So
   the colour lift lives in theme.css tokens, and everything colour-agnostic
   (rhythm, depth cues, press feedback, focus, numeric alignment) lives here
   where it applies to every strategy regardless of how its CSS was written.

   Deliberately NOT done here: overriding box-shadow on cards. glow.css
   animates box-shadow on .card and on most .*-card classes; an override would
   silently stop the breathing glow everywhere.
   ============================================================================= */

/* ── 1. Numeric alignment ────────────────────────────────────────────────────
   The single biggest "neatness" win in the app. Proportional digits have
   different widths, so every live readout — price, P/L, stake, win rate,
   countdown — visibly jitters and shifts its neighbours on each update.
   Tabular figures lock digits to one width, so columns stay put while values
   change. Only bank_clerk.css and ads.css had this; now everything does. */
input[type="number"],
.card, .stat, .stat-val, .stat-value, .metric, .metric-val,
[class*="-stat"], [class*="-val"], [class*="-price"], [class*="-pl"],
[class*="-pct"], [class*="-count"], [class*="-balance"], [class*="-streak"],
[class*="-wins"], [class*="-rate"], [class*="-stake"], [class*="-profit"],
[class*="-digit"], [class*="-timer"], [class*="-countdown"], [class*="-ticks"],
table, td, th, code, .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 2. Press feedback ───────────────────────────────────────────────────────
   Nothing in the app reacted to being pressed, which is most of why it felt
   inert. A small, fast scale reads as a physical button giving way. Paired
   with the haptic pulse in haptics.js this is the "alive" the owner asked for.
   transform is untouched by the strategy stylesheets, so this is safe to apply
   to every button in the app. */
button, .btn, [role="button"], .toggle-switch, .strategy-row {
  transition: transform .12s cubic-bezier(.2, .8, .3, 1),
              filter .16s ease,
              box-shadow .18s ease;
}
button:not(:disabled):active,
.btn:not(.disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: scale(.978);
}
/* Bigger CTAs travel slightly less — a large surface scaling the same amount
   reads as a wobble rather than a press. */
.xt-run:active, .gt-run-btn:active, .bu-aloe-btn:active,
.auth-btn-primary:active, .at-run-btn:active, [data-haptic="exec"]:active {
  transform: scale(.99);
}

/* Interactive rows lift toward the cursor instead of only changing colour. */
.strategy-row:hover { transform: translateY(-1px); }

/* Disabled controls should look unavailable, not merely unresponsive. */
button:disabled, .btn.disabled, [aria-disabled="true"] {
  filter: saturate(.45) brightness(.82);
  cursor: not-allowed;
}

/* ── 3. Focus ────────────────────────────────────────────────────────────────
   There was no visible keyboard focus anywhere. :focus-visible only shows for
   keyboard users, so pointer users never see a ring. */
:focus-visible {
  outline: 2px solid var(--gold-bright, #f9c750);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus:not(:focus-visible) { outline: none; }

/* ── 4. The page itself ──────────────────────────────────────────────────────
   A flat near-black field is what made a gold UI read as cheap rather than
   rich: with nothing behind them the cards had nothing to sit ON. Two very
   soft warm pools at the top give the page depth and let the gold cards read
   as lit objects. fixed attachment so it does not slide under scroll. */
body {
  background-image:
    radial-gradient(1100px 620px at 50% -12%, rgba(214, 150, 46, .10), transparent 62%),
    radial-gradient(760px 520px at 12% 4%, rgba(150, 96, 24, .07), transparent 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ── 5. Metal on the primary actions ─────────────────────────────────────────
   A flat fill reads as a coloured rectangle; a slight vertical sheen reads as
   a machined surface. background-image only — the underlying background-color
   each strategy sets still shows through and stays in charge of the hue. */
.xt-run, .gt-run-btn, .bu-aloe-btn, .auth-btn-primary, .at-run-btn,
.bc-buy-btn, .promo-cta, [data-haptic="exec"] {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .16) 0%,
    rgba(255, 255, 255, .04) 42%,
    rgba(0, 0, 0, .10) 100%);
  background-blend-mode: overlay;
}

/* ── 5b. Card elevation ──────────────────────────────────────────────────────
   These panels had a flat 1px edge and NO shadow at all, so they sat in the
   page rather than on it — the single biggest reason the workspaces read as
   cheap. A hairline of warm light along the top edge plus a soft drop below
   makes each one a lit object.

   Every class here was checked first: none carries an existing box-shadow, and
   none is animated by glow.css. That mattered — glow.css breathes box-shadow
   on .card and the Trade X / Goon X card classes, and setting box-shadow on
   those would have silently stopped the animation app-wide. Those are
   deliberately absent from this list. */
.at-calc-card, .at-info-block, .bg-hc-block,
.bu-card, .bu-inner-card, .bu-summary-card, .bu-analyzer-card,
.bu-settings-card, .bu-exec-card,
.dl-auto-card, .dl-inner-card, .gx-module-block,
.ld-ana-box, .ld-analysis-card, .ld-auto-card, .ld-chart-card,
.ld-outcomes-card, .ld-setup-card, .xt-box {
  box-shadow: inset 0 1px 0 rgba(255, 226, 168, .07),
              0 10px 28px rgba(0, 0, 0, .42);
}

/* ── 6. Text and edges ───────────────────────────────────────────────────────
   Small caps labels get their letterspacing evened out, and gold headings get
   the faintest lift off the background. */
h1, h2, h3, .card-title, .section-title {
  letter-spacing: -0.005em;
}
.card-title, .section-title, [class*="-title"] {
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* ── 7. Chrome ───────────────────────────────────────────────────────────────
   Default scrollbars and selection are the two places a themed app usually
   leaks its default browser look. */
* { scrollbar-color: rgba(210, 152, 48, .45) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(226, 166, 58, .55), rgba(160, 112, 32, .40));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(249, 199, 80, .75), rgba(190, 134, 40, .55));
  background-clip: padding-box;
}
::selection { background: rgba(226, 166, 58, .30); color: #fff8e8; }

/* Inputs pick up the brand on focus rather than staying browser-grey. */
input:focus, select:focus, textarea:focus {
  border-color: var(--border-bright, rgba(232, 172, 64, .9)) !important;
  box-shadow: 0 0 0 3px rgba(226, 166, 58, .14);
}

/* ── 9. Out-of-service strategies ────────────────────────────────────────────
   Maintenance and disabled strategies collect in their own section at the
   bottom of the list, behind a divider, with a status pill where the toggle
   would be. A dead toggle invites clicking and then explains nothing; a pill
   says what is going on at a glance.

   Only genuinely out-of-service statuses land here. admin_only / premium_only
   / subscription tiers stay in the main list — those are working strategies
   the user could get access to, and burying them under "Disabled" would be
   both inaccurate and bad for sales. */
.strategy-oos {
  border-top: 1px solid rgba(226, 182, 104, .18);
  padding-top: 14px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 10px);
}
.strategy-oos-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted, rgba(208, 180, 136, .64));
  margin-bottom: 2px;
}

.strategy-row.strategy-oos-row {
  opacity: .55;
  background: linear-gradient(135deg, rgba(30, 26, 20, .55), rgba(12, 10, 8, .85));
  border-color: rgba(226, 182, 104, .14);
  cursor: not-allowed;
}
/* The whole row is inert, but the pill must stay readable rather than
   inheriting the dimming twice over. */
.strategy-row.strategy-oos-row .toggle-switch,
.strategy-row.strategy-oos-row .btn-how-to-use,
.strategy-row.strategy-oos-row .rob-yt-slot { display: none; }
.strategy-row.strategy-oos-row:hover { transform: none; }
.strategy-row.strategy-oos-row .strategy-icon { filter: grayscale(.85); }
.strategy-row.strategy-oos-row .strategy-name { color: var(--text-muted, #b9a179); }

.strategy-oos-pill {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 1;
}
.strategy-oos-pill[data-tone="warn"] {
  background: rgba(239, 68, 68, .16);
  border: 1px solid rgba(239, 68, 68, .34);
  color: #fca5a5;
}
.strategy-oos-pill[data-tone="soon"] {
  background: rgba(226, 166, 58, .16);
  border: 1px solid rgba(226, 166, 58, .36);
  color: #f6c96a;
}
.strategy-oos-warn {
  font-size: 10px;
  color: #fca5a5;
  margin-top: 3px;
  line-height: 1.4;
}

/* ── 10. Mobile / cross-device consistency ───────────────────────────────────
   The app is one fixed-width column on desktop and the same column on a phone,
   so the layout does not change shape — what breaks on small screens is text
   and controls being squeezed. These rules keep the SAME look rather than
   introducing a separate mobile design. */
@media (max-width: 560px) {
  .strategy-row {
    /* let a long name wrap instead of shoving the toggle off the edge */
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .strategy-row-left { min-width: 0; flex: 1 1 60%; }
  .strategy-name, .strategy-desc {
    overflow-wrap: anywhere;
  }
  .strategy-oos-pill {
    /* on a narrow row the pill drops to its own line, full width, so it never
       collides with the name */
    margin-left: 0;
    flex: 1 1 100%;
    text-align: center;
  }
}

/* NO blanket touch-target floor. There used to be a
   `@media (pointer: coarse) { button … { min-height: 40px } }` rule here, and
   the owner's own iPhone screenshots killed it: the 44x24 toggle pills became
   tall boxes with the knob stuck at the top, Guide chips blew up into fat
   circles, and inside every workspace SOME controls grew while the exempted
   dense grids didn't — neighbouring buttons in visibly different sizes.

   Two lessons, both hard-won on 2026-08-04:
   - `pointer: coarse` fires ONLY on real touch hardware. A browser-pane
     "mobile" preview emulates the screen size but NOT the coarse pointer, so
     any damage inside that media query is invisible in every desktop test and
     ships straight to phones. Real-device screenshots are the only proof.
   - a mature UI full of deliberately-sized controls cannot take a blanket
     resize. If a specific control is genuinely hard to tap, grow ITS padding
     or overlay a ::after hit-area on it — one control at a time, never a
     floor over everything. */

/* Never let anything push the page sideways — a horizontal scrollbar is the
   single most obvious "broken on mobile" signal. Wide content scrolls inside
   its own container instead. */
html, body { overflow-x: hidden; }
table, pre, .xt-hist, .bu-stream, .gx-scan-body, .sx-board {
  max-width: 100%;
  overflow-x: auto;
}

/* ── 11. Hero card — shorter on a phone, and more expensive everywhere ───────
   Measured on a 375x812 phone before this: the hero was 402px, exactly HALF
   the screen. The description alone ran to SEVEN lines (125px, 31% of the
   card) and the three action buttons wrapped into 89px (22%). So the card
   pushed the actual product below the fold on every phone.

   The fix is progressive disclosure rather than cutting the copy: three lines
   with a soft fade, and a More control for anyone who wants the rest. Reading
   less by default is also what premium products do — a wall of text is the
   least expensive-looking thing on a page. */
.hero-tiers { align-items: stretch; }
.hero-tier {
  /* Prices sit on a shared baseline no matter how tall the term label wraps —
     three tiles with prices at three different heights was the main thing
     making the row look homemade. */
  justify-content: flex-start;
}
.hero-tier-price {
  margin-top: auto;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* The save badge sits on its own baseline across tiles, so tiles WITHOUT one
   do not collapse shorter than their neighbours. */
.hero-tier-save { margin-top: auto; }

@media (max-width: 560px) {
  .hero-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-bottom: 6px;
    position: relative;
  }
  .hero-card.hero-expanded .hero-desc {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }
  .hero-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0 0 8px;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--gold-bright, #f9c750);
    cursor: pointer;
  }
  .hero-more::after { content: '▾'; font-size: 9px; }
  .hero-card.hero-expanded .hero-more::after { content: '▴'; }

  /* Actions: one clear primary across the top, the two enquiry routes side by
     side beneath. Previously all three wrapped unevenly into three ragged
     rows. */
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .hero-actions > #btn-hero-autotrader { grid-column: 1 / -1; }
  .hero-actions > .btn { justify-content: center; margin: 0; }
  /* mobile.css sends the WhatsApp button full-width; the grid handles it now */
  .hero-actions .btn-wa { flex: unset; }
}

/* Desktop keeps the full copy — there is room for it there. */
@media (min-width: 561px) {
  .hero-more { display: none; }
}

/* ── 8. Motion and accessibility ─────────────────────────────────────────────
   Everything above degrades to static for anyone who has asked their system
   to reduce motion. This also covers glow.css's breathing animations, which
   previously ran regardless. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  button:active, .btn:active, [role="button"]:active,
  .strategy-row:hover { transform: none !important; }
}

/* Coarse pointers (phones) have no hover, so hover-lift would stick after a
   tap. Press feedback still applies — that is the one that matters on touch. */
@media (hover: none) {
  .strategy-row:hover { transform: none; }
}