/* ============================================================
   Stocky — landing (marketing) shared styles
   Layered on colors_and_type.css + components.css.
   Holds: marketing top bar, footer + disclaimer, honesty note,
   and the live mock-data mini-dashboard preview reused by every
   landing direction. Direction-specific hero/feature layout lives
   inline in each landing-*.html file.
   ============================================================ */

/* ---- reset for full-page marketing (overrides app shell) ---- */
html, body { margin: 0; }
body.lp {
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp a { text-decoration: none; }

/* shared fluid page gutter — matches the app shell */
.lp-wrap { width: 100%; max-width: 1220px; margin: 0 auto;
  padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }

/* ---------- Marketing top bar (lighter than the app appbar) ---------- */
.lp-bar { position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg-primary) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 0.5px solid var(--border-default); }
.lp-bar__in { display: flex; align-items: center; gap: 18px; height: 62px; }
.lp-brand { display: flex; align-items: center; gap: 10px; }
.lp-brand .stocky-icon { width: 26px; height: 26px; color: var(--text-primary); }
.lp-brand__word { font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.5px; color: var(--text-primary); }
.lp-bar__spacer { flex: 1; }
.lp-bar__links { display: flex; align-items: center; gap: 6px; }
.lp-signin { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-secondary);
  padding: 9px 12px; border-radius: var(--radius-sm); border-bottom: 0; }
.lp-signin:hover { color: var(--color-signal); background: var(--bg-surface); }
.lp-themebtn { width: 34px; height: 34px; display: inline-grid; place-items: center;
  border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm);
  cursor: pointer; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.lp-themebtn:hover { color: var(--color-signal); background: var(--bg-surface); }
.lp-themebtn .ic-moon { display: none; }
html[data-theme="dark"] .lp-themebtn .ic-sun { display: none; }
html[data-theme="dark"] .lp-themebtn .ic-moon { display: inline-grid; place-items: center; }

/* a CTA that carries an arrow */
.btn .arr { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arr { transform: translateX(2px); }

/* Buttons rendered as <a> must NOT inherit the editorial amber link hover
   (a:hover → color-highlight + underline). Keep the brand button hovers. */
a.btn:hover { border-bottom-color: transparent; }
a.btn--primary:hover { color: var(--bg-primary); opacity: 0.88; }
a.btn--secondary:hover { color: var(--color-signal); border-color: var(--color-signal); }
a.btn--tertiary:hover { color: var(--color-highlight); border-color: var(--color-highlight); }

/* eyebrow caption */
.lp-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--color-signal); }

/* ---------- Honesty note (near hero) ---------- */
.lp-honesty { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-size: 12px; line-height: 1.5; color: var(--text-muted);
  padding: 8px 13px; border: 0.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); }
.lp-honesty svg { color: var(--text-muted); flex: none; }
.lp-honesty b { color: var(--text-secondary); font-weight: 600; }

/* ---------- Feature blurb atoms ---------- */
.lp-feat__h { font-family: var(--font-heading); font-size: 16px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 5px; letter-spacing: -0.2px; }
.lp-feat__p { font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--text-secondary); margin: 0; }
.lp-feat__ic { width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none;
  display: grid; place-items: center; background: var(--signal-bg); color: var(--color-signal);
  margin-bottom: 14px; }

/* ---------- "How it works" steps ---------- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-step { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; }
.lp-step__n { font-family: var(--font-display); font-size: 13px; font-weight: 700;
  width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center;
  color: var(--color-signal); background: var(--signal-bg); }
.lp-step__t { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.lp-step__d { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 760px) {
  /* match "What it does" on phones: number chip on the left, title + copy on the right */
  .lp-steps { grid-template-columns: 1fr; gap: 0; }
  .lp-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; row-gap: 3px;
    align-items: start; padding: 18px 0; border-top: 0.5px solid var(--border-default); }
  .lp-step:first-child { border-top: 0; }
  .lp-step__n { grid-column: 1; grid-row: 1; }
  .lp-step__t { grid-column: 2; grid-row: 1; align-self: center; }
  .lp-step__d { grid-column: 2; grid-row: 2; }
}

/* ---------- Footer + persistent disclaimer ---------- */
.lp-foot { border-top: 0.5px solid var(--border-default); background: var(--bg-surface);
  margin-top: 8px; }
.lp-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px;
  padding: 44px 0 30px; }
.lp-foot__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.lp-foot__brand .stocky-icon { width: 22px; height: 22px; color: var(--text-primary); }
.lp-foot__brand b { font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-primary); letter-spacing: -0.3px; }
.lp-foot__tag { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--text-muted);
  max-width: 320px; margin: 0; }
.lp-foot__col h6 { font-family: var(--font-ui); font-size: 10px; letter-spacing: 1.25px;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.lp-foot__col a { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary);
  padding: 5px 0; border-bottom: 0; }
.lp-foot__col a:hover { color: var(--color-signal); }
.lp-disclaimer { border-top: 0.5px solid var(--border-default); padding: 16px 0 26px;
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-ui); font-size: 11.5px; line-height: 1.6; color: var(--text-muted); }
.lp-disclaimer svg { flex: none; margin-top: 2px; color: var(--text-muted); }
.lp-disclaimer b { color: var(--text-secondary); font-weight: 600; }
@media (max-width: 760px) { .lp-foot__grid { grid-template-columns: 1fr; gap: 22px; } }

/* ============================================================
   Live mini-dashboard preview  (.mini)
   A compact, faithful render of the signed-in app: app strip,
   watchlist with sparklines + badges, a detail card with a
   candlestick and a grounded Stocky line. Pure CSS/SVG, no JS.
   ============================================================ */
.mini { border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-primary); overflow: hidden; font-family: var(--font-ui);
  width: 100%; }
.mini__chrome { display: flex; align-items: center; gap: 10px; height: 42px;
  padding: 0 14px; border-bottom: 0.5px solid var(--border-default); background: var(--bg-surface); }
.mini__dots { display: flex; gap: 6px; }
.mini__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mini__brand { display: flex; align-items: center; gap: 7px; font-family: var(--font-display);
  font-weight: 700; font-size: 12px; color: var(--text-primary); letter-spacing: -0.2px; }
.mini__brand .stocky-icon { width: 17px; height: 17px; color: var(--text-primary); }
.mini__chrome-sp { flex: 1; }
.mini__nav { font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.3px; }
.mini__bell { position: relative; color: var(--text-muted); }
.mini__bell .dot { position: absolute; top: -3px; right: -4px; width: 13px; height: 13px;
  border-radius: 999px; background: var(--data-down); color: var(--bg-primary);
  font-family: var(--font-display); font-size: 8px; font-weight: 700; display: grid; place-items: center;
  border: 1.5px solid var(--bg-surface); }

.mini__body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; }
@media (max-width: 560px) { .mini__body { grid-template-columns: 1fr; } }
.mini__list { border-right: 0.5px solid var(--border-default); padding: 6px 0; min-width: 0; }
.mini__row { display: grid; grid-template-columns: 1fr auto 52px 60px; align-items: center; gap: 9px;
  padding: 9px 14px; cursor: default; }
.mini__row + .mini__row { border-top: 0.5px solid var(--border-default); }
.mini__row--sel { background: var(--signal-bg); box-shadow: inset 2px 0 0 var(--color-signal); }
.mini__sym { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-primary); display: block; }
.mini__co { font-family: var(--font-body); font-size: 10px; color: var(--text-muted); display: block; margin-top: 1px; }
.mini__last { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 12px;
  color: var(--text-primary); text-align: right; }
.mini__chg { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 11.5px;
  font-weight: 600; text-align: right; }
.mini__chg.up { color: var(--data-up); } .mini__chg.down { color: var(--data-down); } .mini__chg.flat { color: var(--data-flat); }
.mini__spark { display: block; margin-left: auto; }
.mini__sparkslot { margin-left: auto; line-height: 0; }

.mini__detail { padding: 13px 15px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.mini__dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mini__dsym { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-primary); letter-spacing: -0.3px; line-height: 1; }
.mini__dco { font-family: var(--font-body); font-size: 10.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; }
.mini__dprice { text-align: right; }
.mini__dlast { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-primary); line-height: 1; letter-spacing: -0.3px; }
.mini__ddelta { font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--data-up); margin-top: 4px; }
.mini__chart { border: 0.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: 8px; }
.mini__chart svg { display: block; width: 100%; height: auto; }
/* design-system candlestick (compact card view) inside the preview */
.mini__chartsvg .axis text { font-family: var(--font-display); font-size: 8px; fill: var(--text-muted); }
.mini__chartsvg .axis .domain { stroke: var(--border-strong); }
.mini__chartsvg .axis line { stroke: var(--border-default); }
.mini__chartsvg .up { fill: var(--data-up); stroke: var(--data-up); }
.mini__chartsvg .down { fill: var(--data-down); stroke: var(--data-down); }
.mini__seg { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); overflow: hidden; }
.mini__seg span { font-size: 9.5px; padding: 4px 10px; color: var(--text-muted); border-right: 1px solid var(--border-default); }
.mini__seg span:last-child { border-right: 0; }
.mini__seg span.on { background: var(--signal-bg); color: var(--color-signal); }
.mini__chartcap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.mini__chartcap .lbl { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

/* grounded Stocky line inside the preview */
.mini__say { display: grid; grid-template-columns: 46px 1fr; gap: 8px; font-family: var(--font-display);
  font-size: 11.5px; line-height: 1.55; padding-top: 2px; }
.mini__say .pre { color: var(--color-highlight); font-weight: 700; }
.mini__say .body { color: var(--text-secondary); }
.mini__say .nup { color: var(--data-up); font-weight: 600; }
.mini__chip { font-family: var(--font-ui); font-size: 9px; font-weight: 600; padding: 1px 6px;
  border-radius: 999px; letter-spacing: 0.2px; }
.mini__chip--src { color: var(--anno-source); background: var(--anno-source-bg); }
.mini__chip--unv { color: var(--color-highlight); background: var(--highlight-bg); }

/* ============================================================
   RESPONSIVE — marketing bar on phones
   The landing bar carries theme + "Sign in" + a wide "Create account"
   button, which overruns ~360px. Tighten the gutters/padding, bump the
   theme toggle to the 44px touch floor, and drop the redundant text
   "Sign in" link on the landing page only (it stays in the hero + footer;
   the auth pages keep their single bar link intact).
   ============================================================ */
@media (max-width: 600px) {
  .lp-wrap { padding-left: 16px; padding-right: 16px; }
  .lp-bar__in { gap: 10px; }
  .lp-bar__links { gap: 4px; }
  .lp-themebtn { width: 40px; height: 40px; }
  .lp-bar__links .btn--primary { padding: 10px 14px; }
  body[data-screen-label="Landing"] .lp-bar .lp-signin { display: none; }
}