/*
 * Trading Boy — brutalist theme. Hard edges, no radius, no gradients, thick
 * black borders, chunky offset shadows, monospace data. Brand orange/blue from
 * the logo serve as the loud accents against ink-black structure.
 */

:root {
  --tb-orange:        #f7991c;
  --tb-orange-deep:   #e2540b;
  --tb-gold:          #ffc23d;
  --tb-blue:          #3f9bcf;
  --tb-blue-light:    #bfe3f5;
  --tb-navy:          #14222c;
  --tb-ink:           #0b0f12;
  --tb-paper:         #f3f1e8;
  --tb-surface:       #ffffff;
  --tb-text:          #0b0f12;
  --tb-muted:         #555f66;
  --tb-pos:           #138a3e;
  --tb-neg:           #d11f12;
  --tb-shadow:        5px 5px 0 var(--tb-ink);
  --tb-shadow-sm:     3px 3px 0 var(--tb-ink);
  --tb-border:        3px solid var(--tb-ink);
  --tb-mono:          ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tb-text);
  background: var(--tb-paper);
  -webkit-font-smoothing: antialiased;
}

/* --- Header --- */
.tb-header {
  background: var(--tb-surface);
  border-bottom: 5px solid var(--tb-ink);
}
.tb-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tb-logo { display: inline-flex; align-items: center; }
.tb-logo__img { height: 60px; width: auto; display: block; }
.tb-logo__img--mobile { display: none; }
/* Hard-stop colour band — no gradient. */
.tb-header__accent {
  height: 10px;
  background: var(--tb-orange);
}

.tb-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.tb-nav__link {
  color: var(--tb-ink);
  text-decoration: none;
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tb-nav__link:hover { color: var(--tb-orange-deep); text-decoration: underline; text-decoration-thickness: 3px; }
.tb-nav__link.is-active { color: var(--tb-orange-deep); text-decoration: underline; text-decoration-thickness: 3px; }

/* --- Nav dropdowns --- */
.tb-dropdown { position: relative; display: flex; align-items: center; }
.tb-dropdown__toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.tb-dropdown__menu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  min-width: 180px;
  z-index: 40;
  background: var(--tb-surface);
  border: var(--tb-border);
  box-shadow: var(--tb-shadow-sm);
}
.tb-dropdown__link {
  display: block;
  padding: .65rem .9rem;
  color: var(--tb-ink);
  text-decoration: none;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--tb-ink);
}
.tb-dropdown__link:last-child { border-bottom: none; }
.tb-dropdown__link:hover { background: var(--tb-gold); }
.tb-dropdown__menu form { margin: 0; }
.tb-dropdown__signout {
  display: block;
  width: 100%;
  text-align: left;
  padding: .65rem .9rem;
  background: var(--tb-ink);
  color: var(--tb-surface);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tb-dropdown__signout:hover { background: #c0392b; }

/* --- Buttons --- */
.tb-btn {
  display: inline-block;
  border: var(--tb-border);
  border-radius: 0;
  padding: .6rem 1.15rem;
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none;
  background: var(--tb-surface);
  color: var(--tb-ink);
  box-shadow: var(--tb-shadow-sm);
  transition: transform .04s ease, box-shadow .04s ease;
}
.tb-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tb-ink); }
.tb-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--tb-ink); }
.tb-btn--primary { background: var(--tb-orange); color: var(--tb-ink); }
.tb-btn--ghost { background: var(--tb-surface); color: var(--tb-ink); }
.tb-btn--danger { background: var(--tb-ink); color: var(--tb-surface); }
.tb-btn--danger:hover { background: #c0392b; }

/* Inline row actions: keep button_to forms on one line */
.row-actions { display: flex; gap: .4rem; align-items: center; }
.row-actions form { margin: 0; }

/* --- Layout --- */
.tb-main { max-width: 1080px; margin: 0 auto; padding: 1.75rem 1.25rem; }

/* --- Flash --- */
.tb-flash { border: var(--tb-border); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; font-weight: 700; box-shadow: var(--tb-shadow-sm); }
.tb-flash--notice { background: var(--tb-gold); color: var(--tb-ink); }
.tb-flash--alert  { background: var(--tb-neg); color: #fff; }

/* --- Dashboard --- */
.dash__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.dash__head h1 { font-size: 2.25rem; margin: 0; color: var(--tb-ink); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
.dash__sub { color: var(--tb-muted); margin: .15rem 0 0; font-family: var(--tb-mono); font-size: .85rem; }

.badge { display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; padding: .25rem .6rem; border: var(--tb-border); text-transform: uppercase; }
.badge--paper { background: var(--tb-orange); color: var(--tb-ink); }
.badge--live  { background: var(--tb-blue); color: var(--tb-ink); }
.badge--real  { background: var(--tb-neg); color: #fff; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.card {
  background: var(--tb-surface);
  border: var(--tb-border);
  border-radius: 0;
  padding: 1.1rem;
  box-shadow: var(--tb-shadow);
  min-width: 0;
}
/* A standalone stat card that hugs its content instead of filling the row. */
.card--fit { display: inline-block; min-width: 220px; margin-top: 1rem; }
.card__label { font-family: var(--tb-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tb-muted); font-weight: 700; }
.card__value { font-family: var(--tb-mono); font-size: 1.6rem; font-weight: 800; margin-top: .4rem; color: var(--tb-ink); }

.section-title { font-size: 1.25rem; color: var(--tb-ink); margin: 1.75rem 0 .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }

.chart-wrap { height: 420px; background: var(--tb-surface); border: var(--tb-border); box-shadow: var(--tb-shadow); touch-action: none; }

/* --- Full-screen chart workspace (charts#show) --- */
.chart-body { margin: 0; padding: 0; background: var(--tb-bg); }
.chart-workspace { display: flex; flex-direction: column; height: 100dvh; }
.chart-topbar { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: var(--tb-border); background: var(--tb-surface); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-topbar__back { font-family: var(--tb-mono); font-size: 1.3rem; line-height: 1; text-decoration: none; color: var(--tb-ink); padding: .2rem .55rem; border: var(--tb-border); flex: 0 0 auto; }
.chart-topbar__symbol { flex: 0 0 auto; }
.chart-topbar__input { font-family: var(--tb-mono); font-size: 16px; width: 6.5rem; padding: .3rem .5rem; border: var(--tb-border); text-transform: uppercase; }
.chart-topbar__periods { display: flex; gap: .15rem; flex: 0 0 auto; }
.chart-period { font-family: var(--tb-mono); font-size: .78rem; padding: .35rem .5rem; min-height: 34px; background: var(--tb-surface); border: var(--tb-border); cursor: pointer; white-space: nowrap; }
.chart-period:hover { background: rgba(0,0,0,0.04); }
.chart-period.is-active { background: var(--tb-ink); color: var(--tb-surface); }
.chart-topbar__spacer { flex: 1 1 auto; }
.chart-tool--labeled { font-family: var(--tb-mono); padding: .35rem .6rem; }
.chart-indicators { flex: 0 0 auto; }
/* Fixed, not absolute: the topbar is a scroll container (overflow-x: auto),
   which would clip an absolutely-positioned dropdown. */
.chart-indicators__panel { position: fixed; top: 3.2rem; left: .5rem; z-index: 30; display: flex; gap: 1rem; padding: .75rem; background: var(--tb-surface); border: var(--tb-border); box-shadow: var(--tb-shadow); max-height: 70dvh; overflow-y: auto; }
/* display: flex above would override the UA's [hidden] rule and leave the
   "closed" panel painted (and swallowing clicks). */
.chart-indicators__panel[hidden] { display: none; }
.chart-indicators__group { min-width: 11rem; }
.chart-indicators__title { font-family: var(--tb-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(0,0,0,0.5); margin-bottom: .4rem; }
.chart-indicators__item { display: flex; align-items: center; justify-content: space-between; gap: .45rem; font-family: var(--tb-mono); font-size: .82rem; padding: .3rem 0; white-space: nowrap; }
.chart-indicators__check { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.chart-indicators__params { font-family: var(--tb-mono); font-size: .78rem; width: 6.5rem; padding: .2rem .35rem; border: var(--tb-border); }
@media (max-width: 700px) {
  .chart-indicators__panel { right: .5rem; flex-direction: column; gap: .5rem; }
}
.chart-workspace__main { display: flex; flex: 1 1 auto; min-height: 0; }
.chart-sidebar { flex: 0 0 auto; border-right: var(--tb-border); background: var(--tb-surface); overflow-y: auto; }
.chart-sidebar .chart-toolbar { flex-direction: column; overflow-x: visible; padding: .25rem; margin: 0; }
.chart-sidebar .chart-toolbar__spacer { border-left: none; border-top: var(--tb-border); flex: 0 0 .5rem; width: 100%; }
.chart-surface { flex: 1 1 auto; min-width: 0; min-height: 0; background: var(--tb-surface); touch-action: none; }
.chart-surface[data-error]::after { content: "Chart unavailable: " attr(data-error); display: block; padding: 1rem; font-family: var(--tb-mono); color: var(--tb-ink); }
.chart-workspace__empty { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; }

@media (max-width: 700px) {
  .chart-workspace__main { flex-direction: column; }
  .chart-sidebar { border-right: none; border-bottom: var(--tb-border); overflow-y: visible; }
  .chart-sidebar .chart-toolbar { flex-direction: row; overflow-x: auto; }
  .chart-sidebar .chart-toolbar__spacer { border-top: none; border-left: var(--tb-border); width: auto; flex: 0 0 .5rem; }
}

/* Top 8 grid + journal notes */
.top-eight { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .6rem; }
.top-eight__slot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; background: var(--tb-surface); border: var(--tb-border); box-shadow: var(--tb-shadow); font-family: var(--tb-mono); }
.top-eight__slot--empty { color: rgba(0,0,0,0.25); box-shadow: none; }
.top-eight__name { text-decoration: none; font-weight: 700; }
.top-eight__remove { position: absolute; top: 2px; right: 4px; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--tb-neg); }
.journal-entry { margin-bottom: .6rem; }
.journal-entry__meta { font-family: var(--tb-mono); font-size: .72rem; color: rgba(0,0,0,0.5); display: flex; justify-content: space-between; margin-bottom: .3rem; }
.journal-entry__delete { background: none; border: none; color: var(--tb-neg); font-family: var(--tb-mono); font-size: .72rem; cursor: pointer; }
@media (max-width: 700px) { .top-eight { grid-template-columns: repeat(2, 1fr); } }

/* Drawing toolbar: single scrollable row, finger-sized targets on touch. */
.chart-toolbar { display: flex; align-items: center; gap: .25rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: .35rem; -webkit-overflow-scrolling: touch; }
.chart-tool { font-family: var(--tb-mono); font-size: .78rem; padding: .35rem; min-height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--tb-surface); border: var(--tb-border); cursor: pointer; }
.chart-tool svg { display: block; }
.chart-tool svg .f { fill: currentColor; stroke: none; }
.chart-tool:hover { background: rgba(0,0,0,0.04); }
.chart-tool.is-active { background: var(--tb-ink); color: var(--tb-surface); }
.chart-tool--muted { color: rgba(0,0,0,0.55); }
.chart-toolbar__spacer { flex: 0 0 .75rem; border-left: var(--tb-border); align-self: stretch; }
.chart-toolbar__status { font-family: var(--tb-mono); font-size: .75rem; color: rgba(0,0,0,0.5); white-space: nowrap; }
.chart-wrap[data-error]::after { content: "Chart unavailable: " attr(data-error); display: block; padding: 1rem; font-family: var(--tb-mono); color: var(--tb-ink); }
.chart-wrap--short { height: 280px; }
.chart-legend { display: flex; gap: 1.25rem; margin-bottom: .5rem; font-family: var(--tb-mono); font-size: .85rem; }
.chart-legend__item { display: flex; align-items: center; gap: .4rem; }
.chart-swatch { width: 14px; height: 3px; display: inline-block; }
.chart-swatch--entry { background: #1a1a1a; }
.chart-swatch--stop { background: #c0392b; }
.chart-swatch--target { background: #2e7d32; }
.chart-swatch--buy { background: var(--tb-pos); }
.chart-swatch--sell { background: var(--tb-neg); }
.chart-swatch--shadow { background: #8a919a; }

/* overflow-x lets wide tables scroll sideways on small screens instead of
   clipping columns (row action buttons must stay reachable on phones). */
.table-wrap { background: var(--tb-surface); border: var(--tb-border); border-radius: 0; overflow-x: auto; box-shadow: var(--tb-shadow); }
table.tb-table { width: 100%; border-collapse: collapse; font-family: var(--tb-mono); }
.tb-table th, .tb-table td { text-align: right; padding: .7rem .9rem; font-size: .9rem; border-bottom: 2px solid var(--tb-ink); white-space: nowrap; }
.tb-table th { background: var(--tb-ink); color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.tb-table th:first-child, .tb-table td:first-child { text-align: left; }
.tb-table tr:last-child td { border-bottom: none; }
.pos { color: var(--tb-pos); font-weight: 800; }
.neg { color: var(--tb-neg); font-weight: 800; }
.muted { color: var(--tb-muted); }

.notice-box { background: var(--tb-gold); border: var(--tb-border); border-radius: 0; padding: 1rem; box-shadow: var(--tb-shadow-sm); font-weight: 600; }
.error-box  { background: var(--tb-neg); border: var(--tb-border); border-radius: 0; padding: 1rem; color: #fff; box-shadow: var(--tb-shadow-sm); font-weight: 600; }
code { background: var(--tb-ink); color: #fff; padding: .1rem .35rem; border-radius: 0; font-size: .85em; font-family: var(--tb-mono); }

/* --- Auth card --- */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tb-paper);
}
.auth { width: 100%; max-width: 420px; margin: 2rem auto; padding: 0 1rem; }
.auth__brand { text-align: center; margin-bottom: -0.5rem; }
.auth__logo { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.auth__card { background: var(--tb-surface); border: var(--tb-border); border-radius: 0; padding: 2rem; box-shadow: var(--tb-shadow); }
.auth__title { text-align: center; color: var(--tb-ink); margin: 0 0 1.5rem; font-size: 1.4rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.auth__intro { margin: -0.5rem 0 1.5rem; color: var(--tb-muted); font-size: .82rem; line-height: 1.55; text-align: center; }
.auth__field { margin-bottom: 1.1rem; }
.auth__field label { display: block; font-family: var(--tb-mono); font-size: .75rem; font-weight: 700; color: var(--tb-ink); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .06em; }
.auth__field input {
  width: 100%; padding: .7rem .8rem; font-size: .95rem;
  border: var(--tb-border); border-radius: 0; background: var(--tb-surface);
  font-family: var(--tb-mono);
}
.auth__field input:focus { outline: none; box-shadow: var(--tb-shadow-sm); }

/* Checkbox toggle rows: opt out of the block/full-width field styling. */
.auth__field label.toggle-row { display: flex; align-items: center; gap: .65rem; margin-bottom: 0; cursor: pointer; }
.auth__field .toggle-row input[type="checkbox"] {
  width: 22px; height: 22px; flex: 0 0 auto; margin: 0; padding: 0;
  accent-color: var(--tb-orange); border: var(--tb-border); box-shadow: none;
}
.auth .tb-btn--primary { width: 100%; text-align: center; }
.auth__alt { text-align: center; margin-top: 1.25rem; font-size: .8rem; font-family: var(--tb-mono); text-transform: uppercase; letter-spacing: .04em; }
.auth__alt a { color: var(--tb-orange-deep); font-weight: 700; }

/* --- Admin forms & data blocks --- */
.json-block {
  font-family: var(--tb-mono);
  font-size: .82rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tb-ink);
}
.form-card { max-width: 560px; }
.form-card select, .json-input {
  width: 100%; padding: .6rem .7rem; font-size: .95rem;
  border: var(--tb-border); border-radius: 0; background: var(--tb-surface);
  font-family: var(--tb-mono);
}
.json-input { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.form-card select:focus, .json-input:focus { outline: none; box-shadow: var(--tb-shadow-sm); }

.tb-pagination { display: flex; gap: .8rem; align-items: center; margin-top: 1.25rem; }
.tb-pagination__info { font-family: var(--tb-mono); font-weight: 700; font-size: .85rem; }

.inline-form { display: flex; gap: .6rem; align-items: stretch; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
/* Flatten wrapper forms (form_with, button_to) so their controls align as flex items. */
.inline-form form { display: contents; }
.inline-form__input {
  padding: .55rem .7rem; font-size: .9rem; font-family: var(--tb-mono);
  border: var(--tb-border); border-radius: 0; background: var(--tb-surface);
  text-transform: uppercase;
}
select.inline-form__input { font-weight: 700; box-shadow: var(--tb-shadow-sm); cursor: pointer; }
.inline-form__label { align-self: center; color: var(--tb-muted); font-family: var(--tb-mono); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* Stacked filter rows (e.g. the report page) read as one control block. */
.inline-form + .inline-form { margin-top: -0.75rem; }
.inline-form__input:focus { outline: none; box-shadow: var(--tb-shadow-sm); }

/* Keep button_to forms inline in table cells. */
.tb-table form { display: inline; margin: 0; }
.tb-table .tb-btn { padding: .35rem .7rem; font-size: .72rem; box-shadow: 2px 2px 0 var(--tb-ink); }
.tb-table .tb-btn:hover { box-shadow: 3px 3px 0 var(--tb-ink); }
.tb-table .tb-btn:active { box-shadow: 0 0 0 var(--tb-ink); }

/* --- Mobile --- */
/* On phones the header keeps only the logo; navigation moves to a fixed
   bottom tab bar (app-style) with a "More" sheet for secondary pages. */
.tb-bottomnav { display: none; }

@media (max-width: 700px) {
  .tb-nav { display: none; }
  .tb-header__inner { justify-content: center; padding: .55rem .9rem; }
  .tb-logo__img--desktop { display: none; }
  .tb-logo__img--mobile { display: block; height: 56px; }

  /* Card list: rows become stacked cards so wide tables need no sideways scroll. */
  .table-wrap:has(.tb-table--cards) { background: none; border: none; box-shadow: none; overflow: visible; }
  .tb-table--cards, .tb-table--cards tbody { display: block; }
  .tb-table--cards thead { display: none; }
  .tb-table--cards tr {
    display: flex;
    flex-direction: column;
    background: var(--tb-surface);
    border: var(--tb-border);
    box-shadow: var(--tb-shadow-sm);
    padding: .3rem .85rem .65rem;
    margin-bottom: 1rem;
  }
  .tb-table--cards tr:last-child { margin-bottom: 0; }
  .tb-table--cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px dashed #d8d4c6;
    white-space: normal;
    text-align: right;
  }
  .tb-table--cards tr:last-child td { border-bottom: 1px dashed #d8d4c6; }
  .tb-table--cards tr td:last-child { border-bottom: none; }
  .tb-table--cards td[data-label]::before {
    content: attr(data-label);
    color: var(--tb-muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .tb-table--cards tr td.cardlist__title {
    order: -1;
    font-size: 1.2rem;
    text-align: left;
    justify-content: flex-start;
    border-bottom: 2px solid var(--tb-ink);
    padding: .55rem 0 .45rem;
  }
  .tb-table--cards td.row-actions { justify-content: flex-end; gap: .6rem; padding-top: .65rem; }

  .tb-main { padding: 1.1rem .9rem calc(4.6rem + env(safe-area-inset-bottom)); }
  .dash__head h1 { font-size: 1.6rem; }
  .card__value { font-size: 1.15rem; }
  .card { padding: .85rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .chart-wrap { height: 320px; }
  .chart-wrap--short { height: 240px; }

  /* 16px floor stops iOS Safari from auto-zooming focused inputs. */
  .auth__field input, .form-card select, .json-input, .inline-form__input, select { font-size: 16px; }

  .tb-bottomnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--tb-surface);
    border-top: 5px solid var(--tb-ink);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tb-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .55rem 0 .5rem;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tb-ink);
    text-decoration: none;
    font-family: var(--tb-mono);
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .tb-bottomnav__item svg { width: 21px; height: 21px; }
  .tb-bottomnav__item.is-active { background: var(--tb-orange); }

  .tb-sheet {
    position: fixed;
    left: .6rem; right: .6rem;
    bottom: calc(4.4rem + env(safe-area-inset-bottom));
    z-index: 60;
    background: var(--tb-surface);
    border: var(--tb-border);
    box-shadow: var(--tb-shadow);
    padding: .4rem;
  }
  .tb-sheet__link {
    display: block;
    padding: .8rem .9rem;
    color: var(--tb-ink);
    text-decoration: none;
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--tb-ink);
  }
  .tb-sheet__link:active { background: var(--tb-gold); }
  .tb-sheet form { margin: 0; }
  .tb-sheet__signout {
    display: block;
    width: 100%;
    text-align: left;
    padding: .8rem .9rem;
    background: var(--tb-ink);
    color: var(--tb-surface);
    border: none;
    cursor: pointer;
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-family: inherit;
  }
}

/* ---- Order ticket ------------------------------------------------------ */
/* Desktop: a hard-edged card. Mobile: a full-height sheet. Same DOM. */

.mono { font-family: var(--tb-mono); font-variant-numeric: tabular-nums; }

.ticket {
  max-width: 30rem;
  background: var(--tb-surface);
  border: var(--tb-border);
  box-shadow: var(--tb-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.ticket__head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; border-bottom: var(--tb-border); padding-bottom: .6rem; }
.ticket__symbol { font-size: 1.6rem; font-weight: 900; letter-spacing: .02em; }
.ticket__name { display: block; font-size: .75rem; color: #555; }
.ticket__quote { text-align: right; }
.ticket__last { display: block; font-size: 1.25rem; font-weight: 800; }
.ticket__last--stale { font-size: .8rem; color: var(--tb-neg); }
.ticket__change { font-size: .8rem; }

.ticket__section { border: none; margin: 0; padding: 0; }
.ticket__label { font-family: var(--tb-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .35rem; }
.ticket__label--accent { color: var(--tb-orange); }
.ticket__sublabel { font-size: .75rem; font-weight: 700; }
.ticket__row-between { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }

.ticket__segment { display: grid; grid-template-columns: 1fr 1fr; border: var(--tb-border); }
.ticket__segment-opt { text-align: center; }
.ticket__segment-opt input { position: absolute; opacity: 0; }
.ticket__segment-opt span { display: block; padding: .55rem 0; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.ticket__segment-opt--buy input:checked + span { background: var(--tb-pos); color: var(--tb-surface); }
.ticket__segment-opt--sell input:checked + span { background: var(--tb-neg); color: var(--tb-surface); }
.ticket__segment-opt input:focus-visible + span { outline: 3px solid var(--tb-blue); outline-offset: -3px; }

.ticket__chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.ticket__chip input { position: absolute; opacity: 0; }
.ticket__chip span { display: inline-block; padding: .35rem .6rem; border: 2px solid var(--tb-ink); font-weight: 700; font-size: .8rem; white-space: nowrap; cursor: pointer; background: var(--tb-surface); }
.ticket__chip input:checked + span { background: var(--tb-ink); color: var(--tb-surface); }
.ticket__chip input:focus-visible + span { outline: 3px solid var(--tb-blue); outline-offset: 1px; }

.ticket__mini-segment { display: inline-flex; border: 2px solid var(--tb-ink); }
.ticket__mini-segment label { position: relative; }
.ticket__mini-segment input { position: absolute; opacity: 0; }
.ticket__mini-segment span { display: inline-block; padding: .2rem .55rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.ticket__mini-segment input:checked + span { background: var(--tb-ink); color: var(--tb-surface); }
.ticket__mini-segment input:focus-visible + span { outline: 3px solid var(--tb-blue); }

.ticket__input {
  font-family: var(--tb-mono);
  border: var(--tb-border);
  border-radius: 0;
  padding: .45rem .55rem;
  width: 100%;
  background: var(--tb-surface);
  font-size: 16px; /* iOS: prevent focus zoom */
}
.ticket__input:focus-visible { outline: 3px solid var(--tb-blue); outline-offset: 1px; }
.ticket__input--big { font-size: 1.4rem; font-weight: 800; }
.ticket__input--ro { display: inline-block; background: var(--tb-paper); }
.ticket__select { font-family: inherit; }
.ticket__amount { display: flex; align-items: center; gap: .5rem; }
.ticket__amount .ticket__input { flex: 1; min-width: 0; }
.ticket__unit { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ticket__est { font-size: .8rem; white-space: nowrap; }
.ticket__pricefield { display: flex; gap: .5rem; align-items: center; }
.ticket__midbtn { padding: .35rem .6rem; font-size: .75rem; }

.ticket__risk { border-left: 6px solid var(--tb-orange); background: var(--tb-paper); padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.ticket__risk-headline { font-size: 1.05rem; font-weight: 800; }
.ticket__risk-dollars { font-size: 1.15rem; font-weight: 900; }
.ticket__slider { width: 100%; accent-color: var(--tb-orange); height: 2rem; }
.ticket__derived { margin: 0; font-weight: 800; }
.ticket__hint-inline { display: block; font-size: .7rem; font-weight: 400; color: #555; }

.ticket__bracket { border: var(--tb-border); padding: .7rem; }
.ticket__bracket-legs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .4rem; }
.ticket__leg { display: flex; flex-direction: column; gap: .25rem; }
.ticket__leg-r { font-size: .75rem; }

.ticket__toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; }
.ticket__costs { border-top: 2px solid var(--tb-ink); padding-top: .6rem; font-size: .85rem; display: flex; flex-direction: column; gap: .25rem; }

.ticket__cta { width: 100%; padding: .9rem; font-size: 1.05rem; }
.ticket__cta:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ticket__visibility { font-size: .72rem; text-align: center; color: #555; margin: 0; }

.ticket__err { color: var(--tb-neg); font-size: .78rem; font-weight: 700; margin: .25rem 0 0; }
.ticket__hint { font-size: .72rem; color: #555; margin: .3rem 0 0; }
.ticket__hint--warn { color: var(--tb-orange); font-weight: 700; }
.ticket__notice { border: 2px solid var(--tb-ink); background: var(--tb-paper); padding: .45rem .6rem; font-size: .8rem; margin: 0; }
.ticket__notice--warn { border-color: var(--tb-orange); }
.ticket__block-reason { color: var(--tb-neg); font-weight: 800; font-size: .85rem; margin: 0; }

.ticket__rejected { border: 3px solid var(--tb-neg); padding: .7rem; }
.ticket__rejected-title { font-weight: 900; text-transform: uppercase; color: var(--tb-neg); margin: 0 0 .3rem; }
.ticket__rejected-msg { font-size: .78rem; margin: 0 0 .3rem; word-break: break-word; }
.ticket__rejected-hint { font-size: .85rem; margin: 0; }

/* Review state: editing sections give way to the summary */
.ticket--reviewing .ticket__section,
.ticket--reviewing .ticket__cta,
.ticket--reviewing .ticket__visibility { display: none; }
.ticket__review { display: flex; flex-direction: column; gap: .7rem; }
.ticket__review[hidden] { display: none; }
.ticket__review-rows { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; border: var(--tb-border); padding: .6rem; }
.ticket__maxloss { display: flex; justify-content: space-between; align-items: baseline; border: 3px solid var(--tb-neg); padding: .6rem .7rem; }
.ticket__maxloss-num { font-size: 1.7rem; font-weight: 900; color: var(--tb-neg); }

.ticket__slide { position: relative; border: var(--tb-border); background: var(--tb-paper); height: 3.2rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ticket__slide-text { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; pointer-events: none; }
.ticket__slide-handle {
  position: absolute; left: 4px; top: 4px; bottom: 4px; width: 3.4rem;
  background: var(--tb-orange); border: 2px solid var(--tb-ink); border-radius: 0;
  font-size: 1.3rem; font-weight: 900; cursor: grab; touch-action: none;
}
.ticket__slide-handle:focus-visible { outline: 3px solid var(--tb-blue); }
.ticket__slide-handle:disabled { cursor: wait; }
@media (prefers-reduced-motion: no-preference) {
  .ticket__slide-handle { transition: transform .05s linear; }
}
.ticket__back { width: 100%; }

.ticket__result-line { font-size: 1rem; font-weight: 800; margin: 0; }
.ticket__result-line--filled { color: var(--tb-pos); }
.ticket__result-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Chart overlay: the ticket floats over the workspace */
.chart-ticket-panel {
  position: fixed; top: 3.2rem; right: .6rem; z-index: 70;
  max-height: calc(100dvh - 4rem); overflow-y: auto;
}
.chart-ticket-panel[hidden] { display: none; }

@media (max-width: 700px) {
  .ticket { max-width: none; }
  .chart-ticket-panel { left: .4rem; right: .4rem; top: auto; bottom: .4rem; max-height: 88dvh; }
}

.chart-tool--trade { background: var(--tb-orange); font-weight: 900; }

/* --- Scanner / watchlists --- */
.scan-tabs { display: flex; border: var(--tb-border); margin: 0 0 1rem; }
.scan-tabs__tab {
  flex: 1; text-align: center; padding: .7rem; font-weight: 800; text-transform: uppercase;
  text-decoration: none; color: var(--tb-ink); background: var(--tb-surface);
}
.scan-tabs__tab.is-on { background: var(--tb-ink); color: var(--tb-paper); }
.scan-chip-row { display: flex; justify-content: space-between; align-items: baseline; margin: .4rem 0; }
.scan-chip-row__label, .scan-fresh { font: 700 .72rem/1.4 var(--tb-mono); text-transform: uppercase; color: var(--tb-muted); }
.scan-chip-row__manage { font-weight: 800; font-size: .8rem; }
.scan-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .8rem; }
.scan-chips form { display: inline; margin: 0; }
.scan-chip {
  flex: 0 0 auto; border: var(--tb-border); background: var(--tb-surface); padding: .45rem .7rem;
  font-weight: 800; text-transform: uppercase; text-decoration: none; color: var(--tb-ink); font-size: .78rem;
  font-family: inherit; cursor: pointer;
}
.scan-chip.is-on { background: var(--tb-orange); }
.scan-chip.is-pinned::before { content: "★ "; }
.scan-chip--new { border-style: dashed; }
.scan-filter-card {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  border: var(--tb-border); background: var(--tb-surface); box-shadow: var(--tb-shadow-sm);
  padding: .8rem 1rem; margin-bottom: .8rem;
}
.scan-filter-card__kicker { font: 700 .68rem var(--tb-mono); text-transform: uppercase; color: var(--tb-muted); }
.scan-filter-card__summary { margin: .3rem 0 0; font-weight: 700; }
.scan-now { width: 100%; padding: .9rem; font-size: 1rem; margin-bottom: .6rem; }
.scan-badge {
  display: inline-block; border: 2px solid var(--tb-ink); padding: .1rem .35rem;
  font: 700 .65rem var(--tb-mono); text-transform: uppercase; margin: 0 .2rem .2rem 0;
}
.scan-select-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.scan-filters { display: grid; gap: .8rem; margin: 1rem 0; }
.scan-filters fieldset { border: var(--tb-border); padding: .7rem; display: grid; gap: .4rem; }
.scan-filters legend { font-weight: 800; text-transform: uppercase; }
.scan-filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 700; }
@media (min-width: 800px) {
  .scan-filters { grid-template-columns: 1fr 1fr; }
}

.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.strategy-card h2 { margin-top: 0; }
.strategy-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.strategy-form { max-width: 850px; }
.strategy-form fieldset { border: 2px solid var(--tb-ink, #111); padding: 16px; margin: 20px 0; min-width: 0; }
.strategy-form input, .strategy-form select, .strategy-form textarea { width: 100%; min-width: 0; font-size: 16px; }
.strategy-form input[type=submit] { width: auto; }
.strategy-curve { display: block; width: 100%; max-width: 400px; height: 85px; }
.strategy-sample { font-family: monospace; }
/* Conditional ticket controls must remain hidden even when their normal
   layout uses flex/grid. Keep the chips inside narrow phone viewports. */
.ticket [hidden] { display: none !important; }
.ticket fieldset { min-width: 0; }
.ticket__chips { flex-wrap: wrap; }
.strategy-form textarea { border: var(--tb-border); padding: .7rem; font-family: inherit; resize: vertical; }
.rule-builder [hidden] { display: none !important; }
.rule-builder .rule-condition { border-width: 1px; background: var(--tb-paper, #fff); }
.rule-builder .rule-comparison { max-width: 320px; margin: 16px 0; }
.rule-group { margin: 24px 0; }
.rule-condition legend { font-weight: bold; padding: 0 6px; }
.rule-condition button { margin-top: 12px; }
.strategy-starters { margin: 24px 0; }
.strategy-starters summary { cursor: pointer; font-weight: bold; margin-bottom: 16px; }

/* The builder shows one decision at a time; optional controls stay folded. */
.strategy-wizard { max-width: 760px; margin: 0 auto; scroll-margin-top: 16px; }
.strategy-wizard [hidden] { display: none !important; }
.wizard-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 2px solid var(--tb-ink); background: var(--tb-surface); }
.wizard-progress button { border: 0; border-right: 1px solid var(--tb-ink); padding: 12px 4px; background: transparent; color: var(--tb-muted); cursor: pointer; font-family: inherit; font-weight: 700; font-size: .8rem; line-height: 1.3; }
.wizard-progress button:last-child { border-right: 0; }
.wizard-progress button span { display: block; font: 800 1rem var(--tb-mono); margin-bottom: 3px; }
.wizard-progress button[aria-current] { background: var(--tb-orange); color: var(--tb-ink); }
.wizard-progress button:focus-visible, .wizard-review button:focus-visible { outline: 3px solid var(--tb-blue); outline-offset: -3px; }
.wizard-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .75rem; margin: 12px 0; }
.wizard-panel { padding: 28px; margin: 0; }
.wizard-panel h2 { margin: 6px 0 12px; font-size: clamp(1.35rem, 4vw, 1.85rem); line-height: 1.2; }
.wizard-panel h2:focus { outline: none; }
.wizard-eyebrow { display: block; text-transform: uppercase; letter-spacing: .08em; font: 700 .7rem var(--tb-mono); margin: 0; color: var(--tb-muted); }
.strategy-wizard fieldset.wizard-fields { border: 0; padding: 0; margin: 20px 0 0; }
.wizard-fields:disabled { opacity: .7; }
.wizard-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.strategy-wizard .auth__field { margin-bottom: 18px; }
.strategy-wizard .auth__field label { font-size: .75rem; }
.strategy-wizard select { min-height: 44px; border: 2px solid var(--tb-ink); background: var(--tb-surface); color: var(--tb-ink); padding: 9px 8px; font-family: var(--tb-mono); }
.wizard-hint { color: var(--tb-muted); font-size: .8rem; line-height: 1.5; margin: 18px 0 0; }
.wizard-advanced { border-top: 1px solid #c9c8c1; margin-top: 18px; padding: 14px 0 0; }
.wizard-advanced > summary, .operand-advanced > summary { cursor: pointer; font-weight: 700; font-size: .85rem; padding: 4px 0; }
.wizard-advanced[open] > summary { margin-bottom: 18px; }
.strategy-wizard .rule-group { margin: 0; }
.strategy-wizard .rule-condition { border: 2px solid var(--tb-ink); margin: 0 0 14px; background: var(--tb-surface); }
.rule-condition > summary { padding: 16px; cursor: pointer; list-style: none; position: relative; }
.rule-condition > summary::-webkit-details-marker { display: none; }
.rule-condition > summary strong { display: block; padding-right: 35px; margin-top: 7px; line-height: 1.5; overflow-wrap: anywhere; }
.rule-edit-hint { position: absolute; top: 14px; right: 14px; font-size: .75rem; text-decoration: underline; }
.rule-condition[open] > summary { border-bottom: 1px solid #c9c8c1; background: var(--tb-paper); }
.rule-editor { padding: 18px; }
.rule-operand-main { display: flex; flex-wrap: wrap; align-items: start; gap: 12px; }
.rule-operand-main > .auth__field:first-child { flex: 1 1 170px; }
.rule-operand-main > .auth__field:not(:first-child) { flex: 1 1 80px; max-width: 120px; }
.operand-advanced { margin: -6px 0 20px; }
.operand-advanced > summary { color: var(--tb-muted); font-size: .75rem; }
.operand-advanced[open] > summary { margin-bottom: 12px; }
.rule-editor-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.rule-remove, .wizard-footnote button, .wizard-review button { border: 0; background: none; color: var(--tb-muted); text-decoration: underline; cursor: pointer; font: inherit; padding: 8px 0; }
.rule-remove { font-size: .8rem; }
.wizard-review { border-top: 2px solid var(--tb-ink); margin: 22px 0; }
.wizard-review section { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 16px 0; border-bottom: 1px solid #c9c8c1; }
.wizard-review h3 { margin: 0; align-self: center; font-size: .9rem; }
.wizard-review p { grid-column: 1 / -1; margin: 0; line-height: 1.65; font-size: .9rem; overflow-wrap: anywhere; }
.wizard-review button { font-size: .8rem; }
.wizard-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 22px; }
.wizard-actions [data-strategy-wizard-target=back] { margin-right: auto; }
.wizard-footnote { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .7rem; color: var(--tb-muted); margin-top: 12px; }
.strategy-wizard ~ .strategy-starters { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
  .wizard-panel { padding: 20px 16px; }
  .wizard-progress button { font-size: .7rem; padding: 9px 2px; }
  .rule-editor { padding: 14px; }
  .strategy-wizard .rule-operand-main > .auth__field:first-child { flex-basis: 140px; }
  .wizard-actions .tb-btn { font-size: .8rem; padding: .8rem 1rem; }
}
/* Searchable, multiple-symbol selection in the strategy wizard. */
.symbol-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 2px solid var(--tb-ink); background: white; cursor: text; }
.symbol-input:focus-within { outline: 2px solid var(--tb-ink); outline-offset: 2px; }
.symbol-chips { display: contents; }
.symbol-chip { padding: .35rem .65rem; min-height: 44px; border: 1px solid var(--tb-ink); background: var(--tb-paper); color: var(--tb-ink); font: inherit; cursor: pointer; }
.strategy-form .symbol-input input { flex: 1 1 170px; width: auto; min-width: 0; max-width: 100%; min-height: 44px; padding: 6px; border: 0; outline: 0; box-shadow: none; }
.watchlist-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.strategy-form .watchlist-choice { display: flex; align-items: center; gap: 8px; padding: 10px; min-height: 44px; border: 2px solid var(--tb-ink); font: inherit; text-transform: none; letter-spacing: normal; cursor: pointer; }
.watchlist-choice:has(input:checked) { background: var(--tb-blue-light); }
.strategy-form .watchlist-choice input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--tb-ink); }
.symbol-results { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow-y: auto; border: 2px solid currentColor; }
.symbol-results li { display: flex; flex-direction: column; padding: .65rem; cursor: pointer; border-bottom: 1px solid #aaa; overflow-wrap: anywhere; }
.symbol-results li:hover, .symbol-results li[aria-selected="true"] { background: #e4ebcf; color: #111; }
.symbol-results li span { font-size: .85rem; }

/* Each condition has its own visual choose / configure / compare flow. */
.rule-editor button { margin-top: 0; }
.rule-condition[open] > summary { padding: 12px 16px; }
.rule-condition[open] > summary strong { display: none; }
.condition-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.condition-steps button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-bottom: 3px solid #ddd; padding: 10px 4px; background: none; color: var(--tb-muted); font: inherit; font-size: .78rem; cursor: pointer; }
.condition-steps button[aria-current=step] { color: var(--tb-ink); border-color: var(--tb-orange); font-weight: 800; }
.condition-steps button span { font-family: monospace; }
.indicator-intro { font-weight: 750; font-size: 1.1rem; margin: 0 0 16px; }
.indicator-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.comparison-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.indicator-card { display: grid; align-content: start; justify-items: start; gap: 7px; text-align: left; min-height: 126px; padding: 14px; border: 2px solid #d5d7d6; background: white; color: var(--tb-ink); font: inherit; cursor: pointer; }
.indicator-card svg { width: 30px; height: 30px; color: var(--tb-orange-deep); }
.indicator-card strong { font-size: .85rem; }
.indicator-card span { font-size: .72rem; line-height: 1.45; color: var(--tb-muted); }
.indicator-card:hover, .indicator-card:focus-visible { border-color: var(--tb-ink); box-shadow: 3px 3px 0 var(--tb-ink); }
.indicator-card[aria-pressed=true] { border-color: var(--tb-ink); background: #fff4df; }
.indicator-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #d5d7d6; margin-bottom: 18px; }
.indicator-heading svg { width: 38px; height: 38px; color: var(--tb-orange-deep); }
.indicator-heading h4 { margin: 3px 0 0; font-size: 1.25rem; }
.indicator-change { margin-left: auto; background: none; border: 0; text-decoration: underline; font: inherit; font-size: .75rem; cursor: pointer; min-height: 44px; }
.indicator-output p { font-size: .85rem; font-weight: 700; margin: 0 0 10px; }
.indicator-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.indicator-options button { flex: 1 1 100px; min-height: 44px; padding: 10px; font: inherit; font-size: .8rem; background: white; border: 2px solid #d5d7d6; color: var(--tb-ink); cursor: pointer; }
.indicator-options button[aria-pressed=true] { background: var(--tb-blue-light); border-color: var(--tb-ink); font-weight: 750; }
.indicator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.strategy-form .indicator-fields .auth__field { min-width: 0; }
.indicator-fields small { font-size: .72rem; line-height: 1.45; color: var(--tb-muted); }
.indicator-value-preview { margin-top: 18px; padding: 12px; background: var(--tb-paper); border-left: 3px solid var(--tb-orange); font-size: .82rem; line-height: 1.6; overflow-wrap: anywhere; }
.condition-navigation { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 20px 0 8px; }
.condition-navigation [data-condition-back] { margin-right: auto; }
.logic-composer { margin: 0 0 24px; padding: 16px; background: var(--tb-paper); border: 2px solid var(--tb-ink); }
.logic-heading h3 { margin: 0 0 8px; font-size: 1rem; }
.logic-heading p, .logic-help { font-size: .78rem; line-height: 1.5; color: var(--tb-muted); }
.logic-equation { font: 700 1rem/1.6 monospace; overflow-wrap: anywhere; padding: 12px; border-left: 3px solid var(--tb-orange); background: white; }
.logic-block { min-width: 0; padding: 10px; background: white; border: 1px solid #c9c8c1; border-left: 3px solid var(--tb-blue); }
.logic-block-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logic-operators { display: flex; gap: 3px; }
.logic-operators button { min-height: 40px; padding: 6px 10px; border: 1px solid var(--tb-ink); font: 700 .75rem monospace; background: white; cursor: pointer; }
.logic-operators button[aria-pressed=true] { background: var(--tb-ink); color: white; }
.logic-block-header > button, .logic-condition > button { border: 0; background: none; font: inherit; font-size: .7rem; text-decoration: underline; cursor: pointer; padding: 8px 0; }
.logic-block-header > button { margin-left: auto; }
.logic-match-help { font-size: .7rem; color: var(--tb-muted); margin: 8px 0; }
.logic-children { display: grid; gap: 8px; }
.logic-condition { display: grid; grid-template-columns: 22px 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; }
.logic-condition > span { font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.logic-condition > strong { font: 700 .8rem monospace; }
.strategy-form .logic-select { margin: 0; display: flex; align-items: center; min-height: 40px; cursor: pointer; }
.strategy-form .logic-select input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--tb-ink); }
.logic-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.logic-actions button { font-size: .72rem; padding: 10px; }
.logic-actions span { font-size: .7rem; color: var(--tb-muted); }
@media (max-width: 600px) {
  .logic-composer { padding: 10px; }
  .logic-block { padding: 8px 5px; }
  .logic-condition { grid-template-columns: 18px 14px minmax(0, 1fr); gap: 5px; }
  .logic-condition > button { grid-column: 3; justify-self: start; }
  .logic-operators button { padding: 6px 8px; }
}
@media (max-width: 600px) {
  .indicator-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicator-card { padding: 12px 10px; min-height: 124px; }
  .indicator-fields { grid-template-columns: minmax(0, 1fr); }
  .condition-steps button { font-size: .66rem; flex-direction: column; gap: 4px; }
  .condition-navigation .tb-btn { padding: .7rem .8rem; font-size: .72rem; }
}

/* Guided calculations stay compact until the user opens a value. */
.workflow-check { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; }
.workflow-check input { width: auto; }
.expression-card { border: 1px solid currentColor; padding: .8rem; margin: .7rem 0; }
.expression-card > summary { cursor: pointer; font-weight: 700; text-transform: capitalize; }
.expression-node { border-left: 3px solid #f79b13; padding: .65rem; margin: .5rem 0; min-width: 0; }
.expression-choices { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.expression-choices button { border: 1px solid #bbc0c5; padding: .45rem .6rem; background: white; color: #152632; cursor: pointer; }
.expression-choices button[aria-pressed=true] { background: #f79b13; border-color: #152632; }
.expression-field { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; font-size: .85rem; }
.expression-field input, .expression-field select { min-width: 0; width: 100%; }
.expression-preview { overflow-wrap: anywhere; font-size: .85rem; color: #53616d; }
.expression-settings { margin: .5rem 0; }
@media (max-width: 600px) { .expression-node { padding: .35rem; } .expression-choices button { font-size: .75rem; } }

/* Executed trade summary stays compact; details expand without hiding the chart. */
.chart-trades { flex: 0 0 auto; padding: .6rem 1rem; border-bottom: 1px solid #ddd8cd; background: #faf8f4; max-height: 32vh; overflow: auto; font-size: .8rem; }
.chart-trades > small { color: #666; }
.chart-trades__tabs { display: flex; gap: .4rem; overflow-x: auto; padding: .35rem 0; }
.chart-trades__tabs button { white-space: nowrap; border: 1px solid #ccc; border-radius: .5rem; background: white; padding: .3rem .6rem; cursor: pointer; }
.chart-trades__tabs button[aria-pressed="true"] { border-color: #2962ff; background: #edf2ff; }
.chart-trades__card { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: baseline; }
.chart-trades__card > strong, .chart-trades__card > details { flex-basis: 100%; }
.chart-trades__warning { color: #a3261d; font-weight: 700; }
.chart-trades__stop { color: #a3261d; }
.chart-trades__target { color: #25652a; }
.chart-trades__indicators { border: 0; padding: .4rem 0 0; margin: .5rem 0 0; display: flex; gap: .5rem 1rem; flex-wrap: wrap; }
.chart-trades__indicators[hidden] { display: none; }
.chart-trades__indicators legend { font-weight: 700; }
.chart-trades__indicators label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.chart-trades__indicators input { margin: 0; }
.chart-trades__swatch { width: 1rem; height: 3px; flex-shrink: 0; }
.chart-trades__indicator-toggle { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; cursor: pointer; }
.chart-trades__indicator-toggle[hidden] { display: none; }

.chart-candle-status { display: block; padding: .25rem .5rem; color: #666; font-size: .7rem; }
.chart-workspace__main { position: relative; }
.chart-workspace__main > .chart-candle-status { position: absolute; top: 0; right: 0; z-index: 1; background: #faf8f4dd; pointer-events: none; }

/* AI drafting stays a focused conversation; the existing wizard owns the review. */
.ai-workspace { max-width: 780px; margin: 0 auto; }
.ai-provider { font-size: .85rem; color: var(--tb-muted); margin: 1.5rem 0; }
.ai-compose { margin: 1.5rem 0; }
.ai-compose textarea { width: 100%; resize: vertical; font: inherit; line-height: 1.6; }
.ai-compose h2, .ai-ready h2 { margin-top: 0; }
.ai-conversation { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.ai-message { padding: 1.25rem; border: var(--tb-border); overflow-wrap: anywhere; }
.ai-message--user { background: var(--tb-blue-light); margin-left: 2rem; }
.ai-message--assistant { background: var(--tb-surface); margin-right: 2rem; }
.ai-message-text { white-space: pre-wrap; line-height: 1.65; margin-top: .6rem; }
.ai-message li { padding: .35rem 0; line-height: 1.5; }
.ai-ready { border-left: 8px solid var(--tb-orange); margin: 1.5rem 0; }
.ai-recent { display: grid; gap: 1rem; }
.ai-recent a { display: flex; justify-content: space-between; gap: 1rem; text-decoration: none; }
.ai-settings-actions, .ai-footer { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.ai-entry { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; }
.ai-entry p { margin: .4rem 0 0; }
.ai-entry .tb-btn { flex-shrink: 0; }
@media (max-width: 600px) {
  .ai-entry { align-items: stretch; flex-direction: column; }
  .ai-message--user { margin-left: .5rem; }
  .ai-message--assistant { margin-right: .5rem; }
  .ai-recent a { flex-direction: column; }
}
.ai-compose textarea { border: var(--tb-border); border-radius: 0; background: var(--tb-surface); color: var(--tb-text); padding: .8rem; font-size: 1rem; }
.ai-compose textarea:focus-visible { outline: 2px solid var(--tb-blue); outline-offset: 3px; }
.ai-compose input:disabled { opacity: .55; cursor: wait; }
.ai-history summary { cursor: pointer; font-weight: 700; padding: .5rem 0; }

/* Editable indicator instances and deliberate preview/apply. */
.chart-indicators__panel { display: block; width: min(540px, calc(100vw - 32px)); max-height: 75vh; overflow-y: auto; }
.indicator-add-grid, .indicator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.indicator-instance, .notification-device { padding: 16px 0; border-bottom: 1px solid var(--line, #dedbd3); }
.indicator-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.indicator-instance small { display: block; }
.indicator-editor { width: min(660px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; padding: 24px; border: 1px solid #ddd8cb; border-radius: 16px; background: #faf8f4; color: #1a1a1a; }
.indicator-editor::backdrop { background: rgb(11 15 18 / 45%); }
.indicator-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.indicator-field input, .indicator-field select { padding: 10px; min-width: 0; border: 1px solid #c5c1b8; border-radius: 6px; background: white; color: #1a1a1a; }
.indicator-editor details { margin: 20px 0; }
.indicator-editor fieldset { border: 1px solid #ddd8cb; padding: 12px; margin: 12px 0; }
.indicator-legend { position: absolute; top: 34px; left: 55px; right: 70px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; max-height: 90px; overflow-y: auto; }
.indicator-legend button { pointer-events: auto; font-size: 10px; padding: 3px 7px; background: rgb(250 248 244 / 90%); }
.chart-workspace__main { position: relative; }
.logic-select[hidden], .logic-actions[hidden] { display: none; }
.strategy-starting-choices { margin-bottom: 24px; }
@media (max-width: 600px) { .indicator-fields { grid-template-columns: 1fr; } .indicator-editor { padding: 16px; } }
.ai-conversation { grid-template-columns: minmax(0, 1fr); }
.ai-message, .ai-revision-diff { min-width: 0; max-width: 100%; }
.ai-revision-diff .tb-table { white-space: normal; }
.ai-revision-diff td, .ai-revision-diff th { overflow-wrap: anywhere; }
.notification-preferences .toggle-row { display: flex; gap: 10px; margin: 14px 0; align-items: flex-start; }
.notification-preferences fieldset { margin: 20px 0; padding: 16px; border: 1px solid #c5c1b8; }
.notification-device .form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.logic-condition:has(> .logic-select[hidden]) { grid-template-columns: 20px minmax(0, 1fr) auto; }
@media (max-width: 600px) {
  .logic-condition:has(> .logic-select[hidden]) { grid-template-columns: 14px minmax(0, 1fr); }
  .logic-condition:has(> .logic-select[hidden]) > button { grid-column: 2; }
}
.strategy-fields > label { display: flex; flex-direction: column; gap: 8px; font-size: .85rem; }
.strategy-fields > label > input, .strategy-fields > label > select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #c5c1b8; background: white; }
.position-chart-workspace .indicator-legend { position: static; margin: 8px 0; }
.ai-revision-diff table { table-layout: fixed; }
.ai-revision-diff td, .ai-revision-diff th { white-space: normal; padding: 8px; font-size: .75rem; }
.ai-revision-diff th:first-child { width: 40%; }

/* Chart controls and legends occupy their own rows, keeping candle wicks clear. */
.chart-preferences { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 12px; background: var(--tb-surface); color: var(--tb-ink); font-size: 12px; }
.chart-preferences label { display: flex; gap: 6px; align-items: center; }
.chart-preferences select { background: var(--tb-surface); color: var(--tb-ink); padding: 5px; }
.chart-workspace > .indicator-legend { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; max-height: 60px; flex-shrink: 0; background: var(--tb-surface); padding: 4px 12px; }
.indicator-legend button { background: var(--tb-surface); color: var(--tb-ink); flex-shrink: 0; white-space: nowrap; }
.chart-workspace .indicator-legend--pane, .position-chart-workspace .indicator-legend--pane { position: absolute; top: 2px; left: 8px; right: 8px; margin: 0; flex-wrap: nowrap; max-height: 30px; overflow-x: auto; overflow-y: hidden; }
.indicator-legend small { opacity: .65; }
.session-key { display: flex; align-items: center; gap: 6px; }
.session-key i { width: 10px; height: 10px; display: inline-block; border: 1px solid #8590a0; }
.session-key--pre { background: #7467d244; } .session-key--post { background: #cf8f3144; }
[data-theme="dark"] { --tb-surface: #161b22; --tb-bg: #10141a; --tb-ink: #e4e9f0; --tb-border: 1px solid #3b4554; --line: #3b4554; color: var(--tb-ink); background: var(--tb-bg); color-scheme: dark; }
[data-theme="dark"] :is(.indicator-editor, .indicator-field input, .indicator-field select, .chart-topbar__input, .chart-candle-status, .chart-tool, .chart-ticket-panel, .trade-chart-card) { background: #161b22; color: #e4e9f0; border-color: #3b4554; }
[data-theme="dark"] .muted, [data-theme="dark"] small { color: #aeb9c8; }
[data-theme="dark"] .chart-period { color: #e4e9f0; } [data-theme="dark"] .chart-period.is-active { color: #161b22; }

[data-theme="dark"] .chart-trades, [data-theme="dark"] .chart-trades__tabs button { background: #161b22; color: #e4e9f0; border-color: #3b4554; }
[data-theme="dark"] .chart-trades__warning, [data-theme="dark"] .chart-trades__stop { color: #ff8b88; }
[data-theme="dark"] .chart-trades__target { color: #73d8b0; }

.chart-session-notes { display: flex; gap: 6px 16px; flex-wrap: wrap; padding: 0 12px 8px; font-size: 12px; }
.study-sets { border-top: 1px solid #8590a044; gap: 10px; }
.study-sets select { max-width: 240px; }
[data-study-error] { color: #c33225; }
[data-study-state] { font-weight: 600; }
.study-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.study-sets .chart-tool:disabled { opacity: .45; cursor: not-allowed; }

.chart-tool { flex-shrink: 0; }
.chart-options > summary { display: none; }
@media (max-width: 600px) {
  .chart-options > summary { display: list-item; padding: 8px 12px; font-size: 13px; cursor: pointer; }
  .study-sets[data-has-active="false"] [data-study-action]:not([data-study-action="new"]) { display: none; }
  .chart-workspace__main > .chart-candle-status { max-width: 100%; font-size: 10px; }
}

.staged-card { border:2px solid var(--ink, #0b1113); padding:20px; margin:18px 0; background:#faf9f5; }
.staged-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.staged-heading h3 { margin:0; }
.staged-window { margin-top:24px; gap:20px; }
.staged-card label { display:grid; gap:8px; margin-bottom:18px; }
.staged-card input[type=number], .staged-card select { width:100%; box-sizing:border-box; padding:12px; border:1px solid #b9b9b0; background:#fff; color:#0b1113; font:inherit; }

/* Staged execution separates fill actions and price tiers into readable cards. */
.stage-fill-actions { border-top: 2px solid var(--ink, #111); margin-top: 1.25rem; padding-top: 1rem; display: grid; gap: 1rem; }
.stage-fill-actions h4 { margin: 0; }
.risk-tier-card .strategy-fields { margin-top: 1rem; }
[data-tier-list] > .staged-card + .staged-card { margin-top: 1.5rem; }
[data-tier-list] > button { margin-top: 1rem; }
[data-staged-only] > .workflow-check { margin-bottom: 1.25rem; }
.execution-timeline { list-style: none; padding: 0; display: grid; gap: 1rem; }
.execution-timeline li { padding: 1rem; border: 2px solid var(--ink, #111); display: grid; gap: .5rem; overflow-wrap: anywhere; }
.execution-timeline time { color: var(--muted, #666); font-size: .85rem; }
.execution-timeline dl { margin: 0; display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr); gap: .4rem 1rem; }
.execution-timeline dd { margin: 0; }