/* ==========================================================================
   APPEARANCE CONTRACT LAYER
   Owns: compact topbar controls, appearance option grids, accent swatches,
   and the Neo Brutalism interactive surface (hover/active states).
   The full token system and layout live in styles.css.
   Presentation only: no runtime behavior changes.
   ========================================================================== */

/* --- Compact topbar controls (appearance contract) --- */
.topbar .header-meta{display:flex;align-items:center;flex-wrap:nowrap;gap:8px}
.topbar .icon-button{padding:0!important;border:2px solid var(--line)!important;line-height:1;font-size:15px}
.topbar .icon-button:hover{transform:translateY(-1px)}

/* --- Appearance option grids (theme / style / accent pickers) --- */
.appearance-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-choice-grid .appearance-option{min-height:58px!important}
.appearance-option{cursor:pointer}
.appearance-option b{display:block;font-size:13px}
.appearance-option small{display:block;margin-top:5px}
.appearance-swatch{display:inline-block;width:15px;height:15px;border-radius:5px;border:2px solid var(--line-strong);margin-right:8px;vertical-align:-2px}
.appearance-option.active .appearance-swatch{outline:2px solid var(--text);outline-offset:1px}
.appearance-accent-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.appearance-accent-grid .appearance-option{min-height:52px!important;padding:10px 12px!important;text-align:center}
.appearance-accent-grid .appearance-option b{font-size:11.5px}
.appearance-accent-grid .appearance-option i{font-style:normal}
.appearance-accent-grid .appearance-option.active{outline:2px solid var(--text);outline-offset:-5px;padding:9px 11px!important}
.appearance-accent-grid .appearance-option.active .appearance-swatch{border-color:var(--text)}

/* --- One-line appearance chips (theme / style / accent / toggles) --- */
.chip-option{border:var(--border-w) solid var(--line);border-radius:999px;background:var(--surface-2)}
.chip-option b{display:inline;font-size:inherit}
.chip-option .appearance-swatch{width:12px;height:12px;border-radius:4px;border-width:2px}
.settings-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;padding:5px 11px;min-height:30px;border:var(--border-w) solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:10.5px;font-weight:800;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
/* `.settings-toggle` restates the `.chip-option` chip verbatim because every
   element carrying it also carries `chip-option`; the only rules that need the
   name are the Neo and per-card variants further down. Keeping one copy here
   means the two can never disagree about what a settings toggle looks like. */
.settings-toggle:hover{border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px)}
.settings-toggle.active{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}

/* --- Neo Brutalism interactive surface (contract selectors) --- */
html[data-style="neo"] .primary-button,
html.neo-mode .primary-button,
html[data-style="neo"] .secondary-button,
html.neo-mode .secondary-button,
html[data-style="neo"] .text-button,
html.neo-mode .text-button,
html[data-style="neo"] .nav-button,
html.neo-mode .nav-button,
html[data-style="neo"] .filter-button,
html.neo-mode .filter-button,
html[data-style="neo"] .impact-filter,
html.neo-mode .impact-filter,
html[data-style="neo"] .trade-detail-button,
html.neo-mode .trade-detail-button,
html[data-style="neo"] .settings-toggle,
html.neo-mode .settings-toggle,
html[data-style="neo"] .chip-option,
html.neo-mode .chip-option,
html[data-style="neo"] .collapse-control,
html.neo-mode .collapse-control,
html[data-style="neo"] input,
html.neo-mode input,
html[data-style="neo"] select,
html.neo-mode select,
html[data-style="neo"] #page-tools .settings-input,
html.neo-mode #page-tools .settings-input{
  border:2px solid var(--line-strong)!important;border-radius:7px!important;
  box-shadow:2px 2px 0 var(--line-strong)!important;background:var(--surface);
}

/* ExpandableControl siblings: the contract owns size and radius, Neo supplies
   only the ink border, the hard shadow and the surface background. */
html[data-style="neo"] .icon-button,
html.neo-mode .icon-button,
html[data-style="neo"] .expand-button,
html.neo-mode .expand-button{
  border:2px solid var(--line-strong)!important;
  box-shadow:2px 2px 0 var(--line-strong)!important;
  background:var(--surface);
}
html[data-style="neo"] .primary-button,html.neo-mode .primary-button{background:var(--accent-fill)!important;color:var(--on-accent)!important}
html[data-style="neo"] .nav-button.active,html.neo-mode .nav-button.active,
html[data-style="neo"] .filter-button.active,html.neo-mode .filter-button.active,
html[data-style="neo"] .impact-filter.active,html.neo-mode .impact-filter.active{
  background:var(--accent-fill)!important;color:var(--on-accent)!important;border-color:var(--line-strong)!important;
}
html[data-style="neo"] .appearance-option.active,html.neo-mode .appearance-option.active,
html[data-style="neo"] .settings-toggle.active,html.neo-mode .settings-toggle.active{
  background:var(--accent-soft)!important;outline:2px solid var(--accent);outline-offset:-3px;
}
html[data-style="neo"] .text-button,html.neo-mode .text-button{padding:8px 12px;background:var(--surface)!important;min-height:44px}
html[data-style="neo"] [data-style-choice],html.neo-mode [data-style-choice],
html[data-style="neo"] [data-theme-choice],html.neo-mode [data-theme-choice],
html[data-style="neo"] [data-accent-choice],html.neo-mode [data-accent-choice],
html[data-style="neo"] button,html.neo-mode button{cursor:pointer}
html[data-style="neo"] .primary-button:hover,html.neo-mode .primary-button:hover,
html[data-style="neo"] .secondary-button:hover,html.neo-mode .secondary-button:hover,
html[data-style="neo"] .icon-button:hover,html.neo-mode .icon-button:hover,
html[data-style="neo"] .text-button:hover,html.neo-mode .text-button:hover,
html[data-style="neo"] .nav-button:hover,html.neo-mode .nav-button:hover,
html[data-style="neo"] .filter-button:hover,html.neo-mode .filter-button:hover,
html[data-style="neo"] .impact-filter:hover,html.neo-mode .impact-filter:hover,
html[data-style="neo"] .expand-button:hover,html.neo-mode .expand-button:hover,
html[data-style="neo"] .trade-detail-button:hover,html.neo-mode .trade-detail-button:hover,
html[data-style="neo"] .settings-toggle:hover,html.neo-mode .settings-toggle:hover,
html[data-style="neo"] .appearance-option:hover,html.neo-mode .appearance-option:hover,
html[data-style="neo"] .chip-option:hover,html.neo-mode .chip-option:hover,
html[data-style="neo"] .collapse-control:hover,html.neo-mode .collapse-control:hover{
  transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line-strong)!important;
}
html[data-style="neo"] .primary-button:active,html.neo-mode .primary-button:active,
html[data-style="neo"] .secondary-button:active,html.neo-mode .secondary-button:active,
html[data-style="neo"] .icon-button:active,html.neo-mode .icon-button:active,
html[data-style="neo"] .text-button:active,html.neo-mode .text-button:active,
html[data-style="neo"] .nav-button:active,html.neo-mode .nav-button:active,
html[data-style="neo"] .filter-button:active,html.neo-mode .filter-button:active,
html[data-style="neo"] .impact-filter:active,html.neo-mode .impact-filter:active,
html[data-style="neo"] .expand-button:active,html.neo-mode .expand-button:active,
html[data-style="neo"] .trade-detail-button:active,html.neo-mode .trade-detail-button:active,
html[data-style="neo"] .settings-toggle:active,html.neo-mode .settings-toggle:active,
html[data-style="neo"] .appearance-option:active,html.neo-mode .appearance-option:active,
html[data-style="neo"] .chip-option:active,html.neo-mode .chip-option:active,
html[data-style="neo"] .collapse-control:active,html.neo-mode .collapse-control:active{
  transform:translate(3px,3px);box-shadow:0 0 0 var(--line-strong)!important;
}

/* Tool collapse controls use the same ExpandableControl contract as every other
   page (40px, 10px radius, one border). The Neo trigger treatment comes from the
   shared html[data-style="neo"] .collapse-control rules; this file no longer
   defines a competing control size or radius anywhere. */

/* --- Reduced motion + compact mirrors --- */
html[data-reduce-motion="true"] *,html[data-reduce-motion="true"] *::before,html[data-reduce-motion="true"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  scroll-behavior:auto!important;transition-duration:.01ms!important;
}

/* --- Small screens --- */
@media(max-width:560px){
  .topbar .header-meta{gap:5px}
  .appearance-style-grid{grid-template-columns:1fr}
  .appearance-accent-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}


/* --- Shell + compact topbar regression guard -----------------------------
   The dashboard shell is not an interactive control. Neo Brutalism should
   not apply an accent/ink perimeter to the whole application, and the
   topbar utility buttons must stay compact rather than inheriting the
   heavier Neo button treatment.
*/
.app{
  border:0!important;
  outline:0!important;
}
html[data-style="neo"] .app,
html.neo-mode .app{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
/* Size and radius come from the shared ExpandableControl contract; Neo only
   supplies the flat ink treatment for the topbar utility buttons. */
html[data-style="neo"] .topbar .icon-button,
html.neo-mode .topbar .icon-button{
  padding:0!important;
  border:2px solid var(--line)!important;
  box-shadow:none!important;
  transform:none;
}
html[data-style="neo"] .topbar .icon-button:hover,
html.neo-mode .topbar .icon-button:hover{
  transform:translateY(-1px)!important;
  box-shadow:none!important;
}
html[data-style="neo"] .topbar .icon-button:active,
html.neo-mode .topbar .icon-button:active{
  transform:none!important;
  box-shadow:none!important;
}


/* ==========================================================================
   MULTIBOT FOUNDATION CONTRACT v5
   One component geometry across Home / Signals / History / Calendar / Tools.
   Theme/style layers may change visual treatment; they do not change layout
   contracts. Presentation only.
   ========================================================================== */

:root{
  --ui-page-gap:16px;
  --ui-section-gap:12px;
  --ui-control-h:var(--ui-collapse-size);
  --ui-row-h:64px;
  --ui-outer-r:var(--f-outer-radius);
  --ui-inner-r:var(--f-inner-radius);
  --ui-control-r:var(--ui-collapse-radius);
  --ui-pill-h:28px;
  --ui-pad-x:16px;
  --ui-pad-y:12px;
  --ui-gap:8px;
  --ui-border:1px solid var(--line);
}

/* ---------- Global type hierarchy ---------------------------------------- */
body,
button,input,select{font-family:var(--font)}
.page-heading h1{font-size:22px!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-.035em!important}
.eyebrow{font-size:11px!important;line-height:1.15!important;font-weight:700!important;letter-spacing:.15em!important}
.section-heading h2,
.workspace-heading h2{font-size:15px!important;line-height:1.2!important;font-weight:650!important;letter-spacing:-.02em!important}
.section-note{font-size:11px!important;line-height:1.45!important}
.workspace-count{font-size:12px!important;font-weight:600!important;color:var(--muted)!important}
.metric-card span{font-size:11px!important;font-weight:650!important;letter-spacing:.06em!important}
.metric-card strong{font-size:14px!important;line-height:1.15!important;font-weight:700!important;font-variant-numeric:tabular-nums!important}

/* ---------- Shared page/workspace geometry ------------------------------- */
.page{min-width:0}
.page>*+*{margin-top:var(--ui-page-gap)!important}

#page-signals .signals-workspace,
#page-history .history-workspace,
#page-calendar .calendar-workspace,
#page-tools .tool-card{
  min-width:0!important;
  border:var(--border-w) solid var(--line)!important;
  border-radius:var(--ui-outer-r)!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-soft)!important;
  overflow:hidden!important;
}

#page-signals .signals-workspace,
#page-history .history-workspace,
#page-calendar .calendar-workspace{
  padding:0!important;
}

#page-tools .tools-layout{
  display:grid!important;
  gap:var(--ui-section-gap)!important;
  min-width:0!important;
}

/* ---------- Shared section header ---------------------------------------- */
#page-signals .workspace-heading,
#page-history .workspace-heading,
#page-calendar .calendar-agenda-bar,
#page-tools .tool-card>.section-heading{
  min-height:52px!important;
  margin:0!important;
  padding:12px var(--ui-pad-x)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border-bottom:var(--ui-border)!important;
  background:var(--surface)!important;
}

#page-calendar .calendar-agenda-bar{
  background:var(--surface-2)!important;
}

#page-tools .tool-card>.section-heading{
  cursor:pointer;
}

#page-tools .tool-card>.section-heading>div{min-width:0}
#page-tools .tool-card>.section-heading .eyebrow{margin:0 0 4px!important}
#page-tools .tool-card>.section-heading h2{margin:0!important}
#page-tools .tool-card>.section-heading .section-note{margin:4px 0 0!important;max-width:680px}
#page-tools .tool-card>.section-heading .tool-tag{
  flex:none;
  min-height:var(--ui-pill-h)!important;
  padding:5px 10px!important;
}

/* ---------- Shared inner surfaces ---------------------------------------- */
#page-overview .metric-card,
#page-overview .chart-card,
#page-signals .signal-card,
#page-history .trade-card,
#page-history .live-trade-row,
#page-history .scan-history-row,
#page-calendar .calendar-item,
#page-tools .backtest-section,
#page-tools .backtest-status,
#page-tools .universe-grid,
#page-tools .account-grid,
#page-tools .rule-list{
  border-radius:var(--ui-inner-r)!important;
}

/* Remove accidental card-within-card elevation. */
#page-overview .chart-card,
#page-signals .signal-card,
#page-history .trade-card,
#page-history .live-trade-row,
#page-history .scan-history-row,
#page-tools .backtest-section,
#page-tools .backtest-status,
#page-tools .universe-grid,
#page-tools .account-grid,
#page-tools .rule-list{
  box-shadow:none!important;
}

/* ---------- One shared button contract ----------------------------------- */
#page-overview .secondary-button,
#page-overview .primary-button,
#page-signals .secondary-button,
#page-history .secondary-button,
#page-calendar .secondary-button,
#page-tools .primary-button,
#page-tools .secondary-button{
  min-height:var(--ui-control-h)!important;
  padding:8px 14px!important;
  border-radius:var(--ui-control-r)!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1!important;
}

.icon-button,
.expand-button{
  width:var(--ui-collapse-size)!important;
  height:var(--ui-collapse-size)!important;
  min-width:var(--ui-collapse-size)!important;
  min-height:var(--ui-collapse-size)!important;
  border-radius:var(--ui-collapse-radius)!important;
}

.expand-button{
  font-size:0!important;
}


/* ---------- Shared pills/status contract -------------------------------- */
.status-badge,
.inline-status,
.tool-tag,
.legend-chip,
.hero-pills span,
.live-open-badge,
.impact-pill,
.trade-status,
.backtest-rating{
  min-height:var(--ui-pill-h)!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:650!important;
  white-space:nowrap;
}

/* ---------- Signals ------------------------------------------------------- */
#page-signals .signals-date-list{padding:10px 12px 12px!important}
#page-signals .signal-date-group{margin:0 0 10px!important}
#page-signals .signal-date-toggle{
  min-height:52px!important;
  width:100%!important;
  margin:0!important;
  padding:10px 14px!important;
  border-radius:var(--ui-inner-r)!important;
  border:var(--ui-border)!important;
  background:var(--surface-2)!important;
  box-shadow:none!important;
}
#page-signals .signal-date-events{display:grid;gap:8px!important;padding:8px 0 0!important}
#page-signals .signal-card{
  min-height:var(--ui-row-h)!important;
  padding:10px 12px!important;
  border:var(--ui-border)!important;
  background:var(--surface)!important;
}
#page-signals .signal-card .signal-main{min-width:0}
#page-signals .signal-card .signal-symbol{font-size:15px!important;font-weight:650!important}
#page-signals .signal-card .signal-meta{font-size:12px!important;color:var(--muted)!important}
#page-signals .signal-card .signal-action,
#page-signals .signal-card .signal-status{font-size:11px!important;font-weight:650!important}

/* ---------- History ------------------------------------------------------- */
#page-history .history-workspace+.history-workspace{margin-top:var(--ui-section-gap)!important}
#page-history .history-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px 12px!important;
  background:var(--surface-2)!important;
  border-bottom:var(--ui-border)!important;
}
#page-history .history-summary-grid .metric-card{
  min-height:48px!important;
  padding:9px 11px!important;
  box-shadow:none!important;
  background:var(--surface)!important;
}
#page-history .history-date-list,
#page-history .history-live-list{padding:10px 12px 12px!important}
#page-history .history-date-group{margin:0 0 10px!important}
#page-history .history-date-toggle{
  min-height:52px!important;
  width:100%!important;
  margin:0!important;
  padding:10px 14px!important;
  border-radius:var(--ui-inner-r)!important;
  border:var(--ui-border)!important;
  background:var(--surface-2)!important;
  box-shadow:none!important;
}
#page-history .history-date-rows{display:grid;gap:8px!important;padding:8px 0 0!important}
#page-history .trade-card,
#page-history .live-trade-row,
#page-history .scan-history-row{
  min-height:var(--ui-row-h)!important;
  padding:10px 12px!important;
  border:var(--ui-border)!important;
  background:var(--surface)!important;
}
#page-history .trade-row-main b,
#page-history .live-trade-row b{font-size:15px!important;font-weight:650!important}
#page-history .trade-row-main small,
#page-history .live-trade-row small,
#page-history .scan-history-row small{font-size:12px!important;color:var(--muted)!important}
#page-history .trade-row-price b{font-size:13px!important;font-weight:650!important}

/* ---------- Calendar ------------------------------------------------------ */
#page-calendar .calendar-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px 12px!important;
  background:var(--surface-2)!important;
}
#page-calendar .calendar-summary-grid .metric-card{
  min-height:48px!important;
  padding:9px 11px!important;
  box-shadow:none!important;
  background:var(--surface)!important;
}
#page-calendar .calendar-date-list{padding:10px 12px 12px!important}
#page-calendar .calendar-date-group{margin:0 0 10px!important}
#page-calendar .calendar-date-toggle{
  min-height:52px!important;
  width:100%!important;
  margin:0!important;
  padding:10px 14px!important;
  border-radius:var(--ui-inner-r)!important;
  border:var(--ui-border)!important;
  background:var(--surface-2)!important;
  box-shadow:none!important;
}
#page-calendar .calendar-date-events{display:grid;gap:8px!important;padding:8px 0 0!important}
#page-calendar .calendar-item{
  min-height:74px!important;
  padding:9px 10px!important;
  border:var(--ui-border)!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-calendar .calendar-meta{min-height:34px!important;margin-bottom:3px!important}
#page-calendar .calendar-time-value{font-size:13px!important;font-weight:650!important}
#page-calendar .calendar-event>.calendar-title{font-size:13px!important;line-height:1.25!important;font-weight:600!important}
#page-calendar .calendar-details{
  margin-top:7px!important;
  padding-top:7px!important;
  gap:8px!important;
}
#page-calendar .calendar-details>div,
#page-calendar .calendar-details>span{
  min-height:34px!important;
  padding:7px 9px!important;
  border-radius:var(--ui-inner-r)!important;
  border:var(--ui-border)!important;
  background:var(--surface-2)!important;
}

/* ---------- Tools --------------------------------------------------------- */
#page-tools .tool-card{
  padding:0!important;
}
#page-tools .tool-body{
  padding:12px!important;
}
#page-tools .settings-row{
  min-height:52px!important;
  padding:10px var(--ui-pad-x)!important;
  border-bottom:var(--ui-border)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
#page-tools .settings-row:last-child{border-bottom:0!important}
#page-tools .settings-label{
  font-size:12px!important;
  font-weight:650!important;
  color:var(--text)!important;
}
#page-tools .settings-inline{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
#page-tools .settings-input{
  min-height:var(--ui-control-h)!important;
  padding:7px 11px!important;
  border-radius:var(--ui-control-r)!important;
  border:var(--ui-border)!important;
  background:var(--surface)!important;
  font-size:11px!important;
}
#page-tools .chip-option,
#page-tools .settings-toggle{
  min-height:var(--ui-control-h)!important;
  padding:7px 12px!important;
  border-radius:var(--ui-control-r)!important;
  font-size:11px!important;
  font-weight:600!important;
}
#page-tools .appearance-swatch{width:12px!important;height:12px!important}

#page-tools .backtest-controls{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto!important;
  gap:10px!important;
  align-items:end!important;
}
#page-tools .backtest-controls label{
  display:grid!important;
  gap:6px!important;
  color:var(--muted)!important;
  font-size:11px!important;
  font-weight:650!important;
}
#page-tools .backtest-controls select{
  width:100%!important;
  min-height:var(--ui-control-h)!important;
  padding:8px 11px!important;
  border-radius:var(--ui-control-r)!important;
  border:var(--ui-border)!important;
  background:var(--surface)!important;
  font-size:12px!important;
}
#page-tools .backtest-status{
  margin-top:10px!important;
  padding:10px 12px!important;
  min-height:40px!important;
  font-size:11px!important;
}
#page-tools .backtest-results{
  margin-top:10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#page-tools .backtest-section{
  margin:0 0 10px!important;
  padding:12px!important;
  border:var(--ui-border)!important;
  background:var(--surface)!important;
}
#page-tools .backtest-section:last-child{margin-bottom:0!important}
#page-tools .backtest-summary,
#page-tools .backtest-metrics{
  gap:8px!important;
}
#page-tools .backtest-summary>div,
#page-tools .backtest-metrics>div{
  min-height:48px!important;
  padding:9px 10px!important;
  border:var(--ui-border)!important;
  border-radius:var(--ui-inner-r)!important;
  background:var(--surface-2)!important;
}
#page-tools .backtest-trades{
  border:var(--ui-border)!important;
  border-radius:var(--ui-inner-r)!important;
  /* The capped, touch-scrollable long-list contract from styles.css section 17
     must survive this layer. `overflow:hidden!important` outranked its
     `overflow-y:auto!important`, so a 20-trade backtest rendered 960px of rows
     inside a 420px box and 12 of them could never be reached, while
     `scrollbar-gutter:stable` still painted a dead 12px empty track. */
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#page-tools .backtest-trade-row{
  min-height:58px!important;
  padding:9px 10px!important;
  border-bottom:var(--ui-border)!important;
}
#page-tools .backtest-trade-row:last-child{border-bottom:0!important}

#page-tools .universe-grid,
#page-tools .account-grid,
#page-tools .rule-list{
  border:var(--ui-border)!important;
  background:var(--surface-2)!important;
  overflow:hidden!important;
}
#page-tools .asset-category{
  padding:10px 12px!important;
  border-bottom:var(--ui-border)!important;
}
#page-tools .asset-category:last-child{border-bottom:0!important}
#page-tools .asset-category-label{
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  color:var(--accent-strong)!important;
}
#page-tools .asset-category-items{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
}
#page-tools .asset-category-items>span{
  min-height:32px!important;
  display:flex!important;
  align-items:center!important;
  padding:6px 8px!important;
  font-size:12px!important;
  font-weight:550!important;
  border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)!important;
}
#page-tools .account-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}
#page-tools .account-grid>article{
  min-height:58px!important;
  padding:10px 12px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:3px 12px!important;
  align-items:center!important;
  border-bottom:var(--ui-border)!important;
  background:var(--surface)!important;
}
#page-tools .account-grid>article:last-child{border-bottom:0!important}
#page-tools .account-grid>article b{font-size:13px!important;font-weight:650!important}
#page-tools .account-grid>article span,
#page-tools .account-grid>article small{font-size:11px!important;color:var(--muted)!important}

#page-tools .rule-list{display:grid!important;grid-template-columns:1fr!important}
#page-tools .rule-list>div{
  min-height:52px!important;
  padding:9px 12px!important;
  display:grid!important;
  gap:3px!important;
  border-bottom:var(--ui-border)!important;
  background:var(--surface)!important;
}
#page-tools .rule-list>div:last-child{border-bottom:0!important}
#page-tools .rule-list b{font-size:12px!important;font-weight:650!important}
#page-tools .rule-list span{font-size:11px!important;color:var(--muted)!important}

/* Removed with the Runtime card: `.diagnostic-grid` and `.schedule-inline`
   described tiles and a candle-shift strip that no markup renders any more.
   The release modal was the last thing that emitted the schedule markup, into
   a `hidden` element nothing ever revealed, so that went too. */

/* ---------- Home: same metric/card contract, richer content allowed -------- */
#page-overview>.metric-grid{gap:8px!important}
#page-overview .section-block{padding:14px!important;border-radius:var(--ui-outer-r)!important}
#page-overview .chart-card{padding:12px!important}
#page-overview .section-heading{min-height:40px!important;margin-bottom:8px!important}
#page-overview .text-button{min-height:var(--ui-control-h)!important;padding:8px 12px!important;font-size:11px!important}

/* ---------- Desktop/mobile shell alignment ------------------------------- */
@media(max-width:760px){
  :root{
    --ui-outer-r:var(--f-outer-radius);
    --ui-inner-r:var(--f-inner-radius);
    --ui-control-h:var(--ui-collapse-size);
    --ui-pad-x:14px;
  }
  .page-heading{gap:10px!important}
  .page-heading h1{font-size:22px!important}
  .page-heading .secondary-button{flex:none!important}
  #page-history .history-summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #page-calendar .calendar-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #page-tools .backtest-controls{
    grid-template-columns:1fr!important;
  }
  #page-tools .backtest-controls .primary-button{width:100%!important}
}
@media(max-width:560px){
  .page>*+*{margin-top:12px!important}
  #page-signals .signals-date-list,
  #page-history .history-date-list,
  #page-history .history-live-list,
  #page-calendar .calendar-date-list{padding:8px!important}
  #page-signals .workspace-heading,
  #page-history .workspace-heading,
  #page-calendar .calendar-agenda-bar{min-height:50px!important;padding:11px 14px!important}
  /* Superseded: `#page-tools .tool-card>.section-heading` used to take a 50px
     min-height and 11px padding here, so a Tools heading measured one height on
     a phone and another on a desktop. The shared contract has no breakpoint. */
  #page-history .history-summary-grid,
  #page-calendar .calendar-summary-grid{
    gap:8px!important;
    padding:8px!important;
  }
  #page-history .history-summary-grid .metric-card,
  #page-calendar .calendar-summary-grid .metric-card{min-height:46px!important;padding:8px 10px!important}
  #page-tools .tool-body{padding:10px!important}
  #page-tools .settings-row{padding:9px 14px!important;align-items:flex-start!important}
  #page-tools .settings-inline{justify-content:flex-end!important}
  #page-tools .asset-category-items{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #page-calendar .calendar-item{min-height:72px!important}
  #page-calendar .calendar-details{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* ========================================================================== 
   HOME PAGE — NEO-SAFE SURFACE CONTRACT
   Home is the reference page for Neo Brutalism. Keep enough separation for
   ink borders/shadows so controls and nested surfaces never visually collide.
   ========================================================================== */
#page-overview .metric-grid{gap:10px!important}
#page-overview .section-block{overflow:visible!important}
#page-overview .chart-card{box-shadow:none!important;overflow:hidden!important}
#page-overview .section-heading{min-width:0!important}
#page-overview .section-heading>.text-button{flex:0 0 auto!important}

html[data-style="neo"] #page-overview .hero,
html[data-style="neo"] #page-overview .section-block{
  border:2px solid var(--line-strong)!important;
  box-shadow:3px 3px 0 var(--line-strong)!important;
}
html[data-style="neo"] #page-overview .metric-card,
html[data-style="neo"] #page-overview .chart-card{
  border:2px solid var(--line-strong)!important;
}
html[data-style="neo"] #page-overview .metric-card{
  box-shadow:2px 2px 0 var(--line-strong)!important;
}
html[data-style="neo"] #page-overview .chart-card{
  box-shadow:none!important;
}
html[data-style="neo"] #page-overview .hero-pills{
  gap:10px!important;
}
html[data-style="neo"] #page-overview .hero-pills span{
  border:2px solid var(--line-strong)!important;
  box-shadow:2px 2px 0 var(--line-strong)!important;
}
html[data-style="neo"] #page-overview .metric-grid.four{
  column-gap:10px!important;
  row-gap:10px!important;
}
html[data-style="neo"] #page-overview .text-button{
  border:2px solid var(--line-strong)!important;
  box-shadow:2px 2px 0 var(--line-strong)!important;
  background:var(--surface)!important;
}
html[data-style="neo"] #page-overview .section-heading>.text-button:active{
  transform:translate(2px,2px)!important;
  box-shadow:0 0 0 var(--line-strong)!important;
}
@media(max-width:900px){
  html[data-style="neo"] #page-overview .hero-pills{row-gap:10px!important}
}
@media(max-width:560px){
  #page-overview .metric-grid{gap:9px!important}
  html[data-style="neo"] #page-overview .metric-grid.four{gap:9px!important}
  html[data-style="neo"] #page-overview .hero-pills{gap:9px!important}
}


/* ---------- Final Home polish: preserve structure, refine visual weight ----- */
/* Mobile tap/focus must not create a second ring around the active destination.
   Keyboard focus remains visible through :focus-visible. */
button:focus:not(:focus-visible){outline:none!important}

/* Empty states no longer need a width patch here: the source rule in
   styles.css declares `border:var(--border-w) solid var(--line)`, so Neo gets
   its 2px from the same declaration as everything else instead of a second
   hardcoded rule. The consolidated block at the tail of this file is what
   pins the empty state to the content-tile treatment. */

/* Home empty activity should feel like an in-card state, not a full-size panel. */
#page-overview .overview-activity .empty-state{
  min-height:0!important;
  padding:18px 14px!important;
}
@media(max-width:560px){
  #page-overview .overview-activity .empty-state{padding:16px 12px!important}
}


/* ==========================================================================
   CALENDAR — HISTORY PARITY / CARD FOUNDATION
   History is the frozen mobile reference. Calendar keeps its own content
   semantics but uses the same workspace/date-group/inner-card geometry.
   ========================================================================== */
#page-calendar .calendar-workspace{overflow:hidden!important}
#page-calendar .calendar-agenda-status{
  min-height:52px!important;padding:10px var(--ui-pad-x)!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  border-bottom:var(--ui-border)!important;background:var(--surface)!important;
}
#page-calendar .calendar-agenda-status .calendar-status{min-width:0!important;flex:1 1 auto!important}
#page-calendar .calendar-agenda-status .inline-status{
  width:100%!important;min-height:32px!important;padding:6px 10px!important;
  border:var(--ui-border)!important;border-radius:999px!important;background:var(--surface-2)!important;
}
#page-calendar .calendar-source{flex:none!important;min-height:36px!important}
#page-calendar .calendar-summary-grid{
  padding:10px 12px!important;gap:var(--grid-gap)!important;background:var(--surface-2)!important;
}
#page-calendar .calendar-summary-grid .metric-card{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  min-width:0!important;min-height:58px!important;padding:9px 11px!important;
  border:var(--border-w) solid var(--line)!important;border-radius:var(--ui-inner-r)!important;
  background:var(--surface)!important;box-shadow:var(--shadow-soft)!important;
}
#page-calendar .calendar-summary-grid .metric-card span{min-width:0!important;max-width:68%!important;overflow-wrap:anywhere!important}
#page-calendar .calendar-summary-grid .metric-card strong{flex:none!important;margin-left:auto!important;text-align:right!important}
#page-calendar .calendar-agenda-bar{
  min-height:52px!important;padding:11px var(--ui-pad-x)!important;background:var(--surface)!important;
}
#page-calendar .calendar-date-list{padding:8px 12px 12px!important;background:var(--surface-2)!important}
#page-calendar .calendar-date-group{border:0!important;margin:0!important}
#page-calendar .calendar-date-toggle{
  position:relative!important;z-index:1!important;width:100%!important;min-height:64px!important;
  margin:0 0 8px!important;padding:10px 12px!important;
  border:var(--border-w) solid var(--line)!important;border-radius:var(--ui-inner-r)!important;
  background:var(--surface-2)!important;box-shadow:var(--shadow-soft)!important;
}
#page-calendar .calendar-date-group.is-open>.calendar-date-toggle{background:var(--surface-2)!important;border-color:var(--line)!important}
#page-calendar .calendar-date-toggle span{min-width:0!important}
#page-calendar .calendar-date-toggle b{font-size:13px!important;font-weight:750!important}
#page-calendar .calendar-date-toggle small{font-size:10.5px!important;line-height:1.25!important}
#page-calendar .calendar-date-toggle i{
  width:var(--ui-collapse-size)!important;height:var(--ui-collapse-size)!important;border-radius:var(--ui-collapse-radius)!important;flex:none!important;
}
#page-calendar .calendar-date-events{display:grid!important;gap:8px!important;padding:0 0 8px!important}
#page-calendar .calendar-item{
  display:block!important;min-width:0!important;padding:0!important;
  border:var(--border-w) solid var(--line)!important;border-left-width:4px!important;
  border-radius:var(--ui-inner-r)!important;background:var(--surface)!important;
  box-shadow:var(--shadow-soft)!important;overflow:hidden!important;
}
#page-calendar .calendar-item.impact-high{border-left-color:var(--negative)!important}
#page-calendar .calendar-item.impact-medium{border-left-color:var(--warning)!important}
#page-calendar .calendar-item.impact-low{border-left-color:var(--positive)!important}
#page-calendar .calendar-item.impact-holiday{border-left-color:var(--accent)!important}

/* ==========================================================================
   INNER SURFACE CONTRACT — completes the foundation.css surface parity rules.

   Language: a white outer card always contains one soft-grey body/gutter, and
   every content row inside that gutter stays white. This is exactly what the
   Tools workspace and the Calendar already did; Home, Signals and History
   never received the grey body, which is why their cards read as white
   rectangles drawn on white paper (a frame inside an identical frame).

   Radius comes from the foundation contract (14px outer / 11px inner), so
   nothing here re-declares a competing geometry value.
   ========================================================================== */

/* Home: the nested panel / metric well inside a section card. */
#page-overview .section-block .chart-card,
#page-overview .section-block .metric-grid,
#page-overview #overviewSignals{
  background:var(--f-inner-bg)!important;
  border-radius:var(--f-inner-radius)!important;
  padding:8px!important;
}
#page-overview .section-block .chart-card{padding:12px!important}

/* Signals / History: the list body between the card heading and the rows. */
#page-signals .signals-date-list,
#page-history .history-date-list,
#page-history .history-live-list{
  background:var(--f-inner-bg)!important;
  border-radius:var(--f-inner-radius)!important;
}

/* Date headers carry a 40px control; give it the same clearance every other
   row gets instead of the 6px it had at 52px. They are a control sitting on
   the grey body, so they take the white control surface exactly like every
   white control on a Tools body, instead of grey-on-grey. */
#page-signals .signal-date-toggle[class],
#page-history .history-date-toggle[class],
#page-calendar .calendar-date-toggle[class]{
  min-height:56px!important;
  height:56px!important;
  background:var(--surface)!important;
}

/* One open state for all three date families. Calendar used to open grey while
   Signals and History opened accent-tinted. */
#page-signals .signal-date-group.is-open > .signal-date-toggle[class],
#page-history .history-date-group.is-open > .history-date-toggle[class],
#page-calendar .calendar-date-group.is-open > .calendar-date-toggle[class]{
  background:var(--accent-softer)!important;
}

/* Retire the pre-contract 34px flex floor and let the calendar meta contain
   the 40px control instead of being 1px shorter than it. */
#page-calendar .calendar-meta[class]{
  min-height:0!important;
  height:auto!important;
}
/* Superseded: `.calendar-meta .expand-button` used to be pinned with
   `flex:0 0 auto` so the chevron survived the meta strip. The chevron is in
   `.calendar-event-head` now and is held by the `.calendar-item
   .expand-button` rule below instead. */

#page-calendar .calendar-item{position:relative!important}
/* The event chevron belongs to its own row. It was absolutely positioned at
   `top:calc(50% - 20px)` — the vertical centre of the *card* — so a collapsed
   card put the control in the middle of an otherwise empty box, and an expanded
   one floated it between the title and the detail grid. It was the only control
   in the app whose position did not track the row it belonged to; every other
   expandable (signals, history, routing, Tools) keeps its chevron pinned to the
   title row. The card stays the positioning context, the control joins the meta
   row, and it is still pushed to the far edge by the same `margin-left:auto`. */
#page-calendar .calendar-item .expand-button{
  position:static!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  margin:0 0 0 auto!important;
  z-index:auto!important;
}

/* ---------- Remaining surface-radius drift --------------------------------
   These still carried a pre-contract 10px/12px surface radius (or nothing)
   while every other surface moved to the foundation inner radius. Interactive
   controls are untouched here: they keep --ui-control-r / --ui-collapse-radius
   so the single-control geometry from the expandable-control contract stands. */
#page-overview .section-block .chart-card[class],
#page-overview .section-block .metric-grid[class],
#page-overview #overviewSignals[class],
#page-signals .signals-date-list[class],
#page-history .history-date-list[class],
#page-history .history-live-list[class],
#page-history .history-summary-grid .metric-card[class],
#page-calendar .calendar-date-list[class],
#page-calendar .calendar-summary-grid .metric-card[class],
#page-calendar .calendar-item[class],
#page-tools .universe-grid[class],
#page-tools .account-grid[class],
#page-tools .rule-list[class],
#page-tools .backtest-controls[class],
#page-tools .asset-category-label[class]{
  border-radius:var(--f-inner-radius)!important;
}

/* .text-button was the one control missing from the shared button contract, so
   it fell back to --radius-xs and, in Neo, to a hard-coded 7px. */
html .text-button[class]{
  border-radius:var(--ui-control-r)!important;
}

/* Nested chips/panels that were painted the same colour as their parent, so
   they only existed as a 1px outline.
   The backtest form takes the same grey body treatment as the
   Markets/Accounts/Rules panels it sits beside, which is what lets its
   controls be genuinely white instead of white-on-white. */
#page-overview .hero-pills span{
  background:var(--f-inner-bg)!important;
}
#page-tools .backtest-controls[class]{
  background:var(--f-inner-bg)!important;
}
#page-tools .backtest-controls select{
  background:var(--surface)!important;
}
#page-calendar .calendar-meta{
  min-width:0!important;min-height:0!important;margin:0!important;
  padding:4px 9px 7px!important;gap:8px!important;
}
#page-calendar .calendar-time-value{flex:0 0 58px!important;font-size:13px!important;font-weight:750!important}
#page-calendar .currency-code,#page-calendar .impact-pill{
  flex:none!important;min-height:28px!important;display:inline-flex!important;align-items:center!important;
}
/* Superseded: the event chevron lived at the end of the meta strip and was
   pushed to the far edge with `margin-left:auto`. It now shares the title row
   in `.calendar-event-head`, whose box is declared once in the collapsed-event
   block further down this sheet, beside the title and meta it sits between. */
#page-calendar .calendar-title{
  display:block!important;min-width:0!important;margin:0!important;
  font-size:13px!important;line-height:1.3!important;font-weight:700!important;overflow-wrap:anywhere!important;
}
#page-calendar .calendar-details{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;
  margin:0 9px 9px!important;padding:7px 0 0!important;border-top:var(--ui-border)!important;
}
#page-calendar .calendar-details>span{
  min-width:0!important;padding:6px 8px!important;border:var(--ui-border)!important;
  border-radius:var(--ui-control-r)!important;background:var(--surface-2)!important;font-size:9.5px!important;
}
#page-calendar .calendar-details b{font-size:10.5px!important}
@media(max-width:560px){
  #page-calendar .calendar-agenda-status{padding:9px 12px!important;align-items:stretch!important}
  #page-calendar .calendar-agenda-status .inline-status{min-height:34px!important}
  #page-calendar .calendar-source{align-self:center!important}
  #page-calendar .calendar-summary-grid{padding:8px!important;gap:8px!important}
  #page-calendar .calendar-summary-grid .metric-card{min-height:56px!important;padding:8px 10px!important}
  #page-calendar .calendar-date-list{padding:8px!important}
  #page-calendar .calendar-date-toggle{min-height:64px!important;margin-bottom:8px!important}
  #page-calendar .calendar-date-toggle i{width:40px!important;height:40px!important}
  #page-calendar .calendar-meta{min-height:0!important;padding:4px 9px 7px!important;gap:7px!important}
  #page-calendar .calendar-time-value{flex-basis:56px!important;font-size:13px!important}
  #page-calendar .calendar-title{font-size:13px!important}
  #page-calendar .calendar-details{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:0 9px 9px!important}
  #page-calendar .calendar-details>span{padding:6px!important}
}
@media(max-width:390px){
  #page-calendar .calendar-agenda-status{flex-wrap:wrap!important}
  #page-calendar .calendar-status{flex-basis:100%!important}
  #page-calendar .calendar-source{margin-left:0!important}
  #page-calendar .calendar-summary-grid .metric-card{padding-inline:8px!important}
  /* Superseded: the impact pill was hidden below 390px only because the
     chevron shared this strip and the two together did not fit. The chevron has
     its own row now, so impact -- the reason a reader scans this card -- stays
     visible at every width. */
  #page-calendar .calendar-details{grid-template-columns:1fr 1fr!important}
}


/* ==========================================================================
   CALENDAR COMPACT V2
   History / Signals are the geometry reference. Calendar content is dense:
   no oversized rows, no oversized type, no large empty status/source area.
   ========================================================================== */

/* Status/source area: compact, contained, never allowed to create a tall blank panel. */
#page-calendar #calendarStatus{
  min-width:0!important;
  min-height:44px!important;
  height:44px!important;
  margin:0!important;
  padding:6px 12px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}
#page-calendar #calendarStatus .inline-status{
  min-width:0!important;
  width:100%!important;
  min-height:32px!important;
  height:32px!important;
  padding:6px 10px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  overflow:hidden!important;
}
#page-calendar #calendarStatus .inline-status b{
  flex:none!important;
  font-size:10.5px!important;
}
#page-calendar #calendarStatus .inline-status small{
  min-width:0!important;
  flex:1 1 auto!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10.5px!important;
  line-height:1.2!important;
}

/* The provider/source link should be a small footer row, not an empty half-card. */
#page-calendar .calendar-source{
  min-height:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  border-bottom:var(--ui-border)!important;
}
#page-calendar .calendar-source a,
#page-calendar .calendar-source button{
  min-height:28px!important;
  padding:4px 0!important;
  font-size:11px!important;
}

/* Summary metrics follow History's compact metric geometry. */
#page-calendar .calendar-summary-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  padding:8px 12px!important;
}
#page-calendar .calendar-summary-grid .metric-card{
  min-height:46px!important;
  height:46px!important;
  padding:7px 10px!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:none!important;
}
#page-calendar .calendar-summary-grid .metric-card span{
  font-size:10.5px!important;
  line-height:1.15!important;
  letter-spacing:.045em!important;
}
#page-calendar .calendar-summary-grid .metric-card strong{
  font-size:13px!important;
}

/* Agenda heading = same density as History section headings. */
#page-calendar .calendar-agenda-bar{
  min-height:50px!important;
  height:50px!important;
  padding:10px 14px!important;
}
#page-calendar .calendar-agenda-bar .eyebrow{
  font-size:10.5px!important;
}
#page-calendar .calendar-agenda-bar .workspace-count{
  font-size:11px!important;
}

/* Date group: compact 52px row, exactly like Signals / History. */
#page-calendar .calendar-date-list{
  padding:8px!important;
}
#page-calendar .calendar-date-group{
  margin:0 0 8px!important;
}
#page-calendar .calendar-date-toggle{
  min-height:52px!important;
  height:52px!important;
  margin:0!important;
  padding:8px 12px!important;
  border-radius:var(--ui-inner-r)!important;
  box-shadow:none!important;
}
#page-calendar .calendar-date-toggle span{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
}
#page-calendar .calendar-date-toggle b{
  font-size:12.5px!important;
  line-height:1.15!important;
  font-weight:700!important;
}
#page-calendar .calendar-date-toggle small{
  font-size:10.5px!important;
  line-height:1.15!important;
}

/* --- Every mid-card edge is rounded, not just card boundaries -------------
   overflow:clip rounds a band only where the band meets the card edge. Bands
   and tiles that end mid-card (summary strips, tool bodies, detail rows,
   tiles) still painted square corners inside a rounded card — the surviving
   "square border with a rounded grey fill" mix. Each surface now carries the
   token of its own level: full-bleed bands the outer radius, card interiors
   and rows the inner radius, chips the small radius. */
#page-signals .signals-workspace > .workspace-heading,
#page-history .history-workspace > .workspace-heading,
#page-calendar .calendar-workspace > .workspace-heading,
#page-history .history-summary-grid,
#page-calendar .calendar-summary-grid,
#page-calendar .calendar-agenda-status,
#page-calendar .calendar-agenda-bar,
#page-tools .tool-collapse > .section-heading,
#page-tools .tool-collapse.is-open > .tool-body,
#page-tools .tools-appearance > .section-heading{
  border-radius:var(--ui-outer-r)!important;
}
#page-overview .signal-card .expand-content,
#page-signals .signal-card .expand-content,
#page-calendar .calendar-date-group .calendar-details,
#page-tools .account-grid > article,
#page-tools .rule-list > div{
  border-radius:var(--ui-inner-r)!important;
}
html #page-overview .detail-grid > div,
html #page-signals .detail-grid > div,
html #page-overview .detail-grid > div > span,
html #page-signals .detail-grid > div > span,
html #page-overview .overview-signals .signal-card.expanded .detail-grid > div,
html #page-signals .signal-card.expanded .detail-grid > div{
  border-radius:var(--radius-xs)!important;
}

/* --- Banding is not a boundary -------------------------------------------
   A zebra rule on the universe rows (nth-child odd, higher specificity than
   the tone rule below) repainted the tint the row group had surrendered, so
   Tools read as grey rows on a grey body again. The banding goes; the row
   separator hairline stays. */
html #page-tools .universe-grid > .asset-category:nth-child(odd),
html #page-tools .universe-grid > .asset-category:nth-child(even){
  background:transparent!important;
}

/* --- Freshness washes are pills -------------------------------------------
   The signals badge rule declared a wash but no radius, so the pill rendered
   square; the FRESH badge also carried a stray copy of the warning wash (fixed
   at the source rule in foundation.css), painting both states the same amber. */
html #page-overview .detail-grid b.fresh,
html #page-overview .detail-grid b.stale,
html #page-signals .detail-grid b.fresh,
html #page-signals .detail-grid b.stale{
  border-radius:999px!important;
}

/* ==========================================================================
   ROUND-2 DESIGN CONTRACT — corners, tone, control state, small print.
   ========================================================================== */

/* --- One chevron, one state ----------------------------------------------
   foundation.css opens the glyph with `.is-open .collapse-control::after`, a
   DESCENDANT selector. That leaked the open glyph onto every chevron nested
   inside an expanded container — the per-signal and per-event buttons — which
   is why those arrows never appeared to rotate. Re-assert the closed glyph for
   controls that are themselves closed; a control carrying its own open state is
   excluded, so opening one still rotates through the shared 0.2s transition. */
.is-open .collapse-control:not(.is-open):not([aria-expanded="true"])::after{
  transform:translateY(-2px) rotate(45deg);
}

/* --- Small box, full-size pointer target ---------------------------------
   The visual control is compact; the pointer target stays 44px. */
.collapse-control::before,
.topbar .icon-button::before{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:var(--ui-collapse-tap)!important;
  height:var(--ui-collapse-tap)!important;
  transform:translate(-50%,-50%)!important;
  border-radius:inherit;
}

/* --- One ExpandableControl, at every width -------------------------------
   foundation.css still owns this rule, but that file ends one closing brace
   short, so everything after the stray brace is swallowed: the canonical
   `.collapse-control` box AND its chevron never reach the parser. A phone
   only looked correct because the `max-width:560px` / `max-width:760px`
   queries re-supply the same geometry, which is why the defect is invisible
   at 390px and obvious at 1440px, where the control collapses to an empty
   14x4 box with no chevron at all. Re-declared here, in a file that parses,
   with the same token values, so every control on every page and every width
   is 32x32 with one chevron that rotates. Neo still supplies its own ink
   treatment: its selectors are more specific than this rule. */
html .collapse-control{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  width:var(--ui-collapse-size)!important;
  min-width:var(--ui-collapse-size)!important;
  max-width:var(--ui-collapse-size)!important;
  height:var(--ui-collapse-size)!important;
  min-height:var(--ui-collapse-size)!important;
  max-height:var(--ui-collapse-size)!important;
  flex:0 0 var(--ui-collapse-size)!important;
  font-style:normal;
  font-size:0;
  color:var(--muted);
  background:var(--surface-2);
  border:var(--ui-collapse-border)!important;
  border-radius:var(--ui-collapse-radius)!important;
  transform:none!important;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
html .collapse-control::after{
  content:""!important;
  display:block!important;
  width:var(--ui-collapse-icon-size)!important;
  height:var(--ui-collapse-icon-size)!important;
  box-sizing:border-box!important;
  border-right:var(--ui-collapse-icon-weight) solid currentColor!important;
  border-bottom:var(--ui-collapse-icon-weight) solid currentColor!important;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
html .collapse-control.is-open::after,
html .collapse-control[aria-expanded="true"]::after{
  transform:translateY(2px) rotate(-135deg);
}
html .collapse-control:hover,
html .collapse-control:focus-visible{
  color:var(--accent-strong);
  border-color:var(--accent)!important;
  background:var(--accent-soft);
}
html .collapse-control:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  html .collapse-control,
  html .collapse-control::after{transition:none!important}
}

/* --- Tools sections: one accordion at every width ------------------------
   The Tools section behaviour (body collapse + pointer cursor) is authored
   inside `max-width:760px` / `max-width:560px` media queries, so above that
   width the section body never collapsed and the heading advertised a
   disclosure it could not deliver. The control itself is handled by the shared
   contract above; this makes the accordion behave identically on a phone and
   on a desktop. */
html #page-tools .tool-collapse>.section-heading{cursor:pointer}
html #page-tools .tool-collapse:not(.is-open)>.tool-body{display:none!important}

/* --- Cards own their corners ---------------------------------------------
   A full-bleed tinted band inside a rounded card was a square poking through a
   rounded corner: the "square border with a rounded grey fill" mix. Clip (never
   scroll) the card so every band inherits the card radius. */
#page-overview .section-block[class],
#page-signals .signals-workspace[class],
#page-history .history-workspace[class],
#page-calendar .calendar-workspace[class],
#page-tools .tool-card[class],
#page-tools .tool-body[class]{
  overflow:clip!important;
}

/* --- A boundary has to change tone ---------------------------------------
   A row group already sitting on the tinted body must not repaint that same
   tint, or three levels collapse into one flat grey mass held together by
   decorative hairlines. */
#page-tools .asset-category[class],
#page-tools .backtest-controls[class]{
  background:transparent!important;
}

/* --- Small print belongs to one tier -------------------------------------
   `small` declared no size of its own, so it inherited the browser's 1.2 ratio
   and rendered at 9.16667px / 10.4167px. Pin it to the 10.5px tier; every
   class-qualified `small` rule is more specific and keeps its own snapped size. */
small{
  font-size:10.5px!important;
}

/* --- Type-scale floor -----------------------------------------------------
   The dashboard declared 27 font sizes. Everything below the smallest step of
   the scale collapsed onto it here, so the sub-10px tier (7.5 / 8 / 8.2 / 8.5 /
   8.7 / 9px) is gone and no label renders under 9.5px.
   The declarations themselves live in regions of this file and of
   foundation.css/styles.css that the editing tools cannot reach, so the
   selectors are named explicitly and prefixed with `html` to carry one extra
   type-selector of specificity over the rule being replaced. */
html #page-signals .signal-card.expanded .detail-grid span,
html #page-signals .signal-card.expanded .reason span,
html #page-signals .signal-card.expanded .reason>span,
html #page-history .history-scan-identity small,
html #page-history .history-scan-status,
html #page-history .history-scan-metrics span,
html #page-history .history-scan-metrics b,
html #page-history .history-summary-grid .metric-card span,
html #page-history .history-summary-grid .metric-card small,
html .brand-copy small,
html .mobile-nav .nav-button,
html .status-badge,
html .hero-pills span,
html #page-tools .asset-category-label,
html #page-tools .tool-universe .asset-category-label,
html #page-tools .tools-appearance .settings-label,
html #page-tools .tools-appearance .chip-option,
html #page-tools .tool-settings .settings-label,
html #page-tools .tool-settings .settings-hint,
html #page-tools .tool-settings .chip-option,
html #page-calendar .calendar-details>span,
html #page-calendar .calendar-details>span b,
html #page-tools .tool-backtest .backtest-metrics>div span,
html #page-tools .tool-backtest .backtest-section-heading>span,
html #page-tools .tool-backtest .backtest-rating{
  font-size:9.5px!important;
}

/* --- Titles sit on two steps, not five -----------------------------------
   Card and row titles land on the 14px step, section titles on the 17px
   display step, so the hierarchy is page 22 > section 17 > title 14 > body 12.5
   instead of 15 / 13.5 / 13 drifting apart everywhere. */
/* The rules being replaced live in regions of foundation.css and styles.css
   that cannot be edited, so these carry a page id to outrank them. */
html #page-overview .signal-leading strong,
html #page-signals .signal-leading strong,
html .signal-leading strong,
html #page-signals .signal-date-toggle b,
html #page-history .history-date-toggle b,
html #page-calendar .calendar-date-toggle b,
html .signal-date-toggle b,
html .history-date-toggle b,
html .calendar-date-toggle b,
html #page-history .history-summary-grid .metric-card strong,
html #page-calendar .calendar-summary-grid .metric-card strong,
html #page-tools .account-grid b{
  font-size:14px!important;
}
html .section-heading h2,
html #page-overview .section-heading h2,
html #page-signals .section-heading h2,
html #page-history .section-heading h2,
html #page-calendar .section-heading h2,
html #page-tools .section-heading h2,
html .hero h2{
  font-size:17px!important;
}

/* --- Tools sections: one accordion at every width ------------------------
   The Tools section geometry (control box, chevron glyph, body collapse and
   the pointer cursor) is authored inside `max-width:760px` / `max-width:560px`
   media queries. Above that width the control had no styling at all: it
   measured 14x4 with `content:none`, so it rendered as a small dead box with
   no chevron, and the section body never collapsed, leaving a button that
   could not do anything. This restores the same behaviour, with the same
   declarations the phone already uses, from 561px up. Scoped to wide viewports
   deliberately: the mobile cascade is already correct and is left untouched. */
@media(min-width:561px){
  html #page-tools .tool-collapse>.section-heading>.collapse-control{
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    box-sizing:border-box!important;
    width:var(--ui-collapse-size)!important;
    min-width:var(--ui-collapse-size)!important;
    max-width:var(--ui-collapse-size)!important;
    height:var(--ui-collapse-size)!important;
    min-height:var(--ui-collapse-size)!important;
    max-height:var(--ui-collapse-size)!important;
    flex:0 0 var(--ui-collapse-size)!important;
    font-style:normal;
    font-size:0;
    color:var(--muted);
    background:var(--surface-2);
    border:var(--ui-collapse-border)!important;
    border-radius:var(--ui-collapse-radius)!important;
    transform:none!important;
  }
  html #page-tools .tool-collapse>.section-heading>.collapse-control::after{
    content:""!important;
    display:block!important;
    width:var(--ui-collapse-icon-size)!important;
    height:var(--ui-collapse-icon-size)!important;
    box-sizing:border-box!important;
    border-right:var(--ui-collapse-icon-weight) solid currentColor!important;
    border-bottom:var(--ui-collapse-icon-weight) solid currentColor!important;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .2s ease;
  }
  html #page-tools .tool-collapse>.section-heading>.collapse-control.is-open{
    color:var(--accent-strong);
    border-color:var(--accent);
    background:var(--accent-soft);
  }
  html #page-tools .tool-collapse>.section-heading>.collapse-control.is-open::after{
    transform:translateY(2px) rotate(-135deg);
  }
  html #page-tools .tool-collapse>.section-heading{cursor:pointer}
  html #page-tools .tool-collapse:not(.is-open)>.tool-body{display:none!important}
}

/* Collapsed event: compact two-row card, not a large panel. */
#page-calendar .calendar-date-events{
  gap:7px!important;
  padding:7px 0 0!important;
}
#page-calendar .calendar-item{
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  border-radius:var(--ui-inner-r)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#page-calendar .calendar-event{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
}
#page-calendar .calendar-event-head{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:9px 9px 0!important;
}
#page-calendar .calendar-meta{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:5px 9px 7px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
#page-calendar .calendar-time-value{
  flex:0 0 54px!important;
  width:54px!important;
  font-size:12.5px!important;
  line-height:1!important;
  font-weight:700!important;
}
#page-calendar .calendar-meta .news-dot{
  width:8px!important;
  height:8px!important;
  min-width:8px!important;
}
#page-calendar .currency-code,
#page-calendar .impact-pill{
  min-height:26px!important;
  height:26px!important;
  padding:5px 9px!important;
  border-radius:9px!important;
  font-size:10.5px!important;
  line-height:1!important;
}


/* The event title is the row's primary line and the chevron's own line. It
   used to be indented 70px to clear a control that sat on the strip above it,
   so the longest titles were ellipsised against a gutter with nothing in it.
   Now it takes the full width beside the control and wraps instead of
   truncating: an economic event name is the reason the row exists. */
#page-calendar .calendar-title,
#page-calendar .calendar-event>.calendar-title,
#page-calendar .calendar-event-head>.calendar-title{
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  font-size:12.5px!important;
  line-height:1.25!important;
  font-weight:600!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#page-calendar .calendar-event-head>.calendar-title{flex:1 1 auto!important}
#page-calendar .calendar-event-head>.expand-button{flex:0 0 auto!important}

/* Expanded state adds only the information requested; collapsed state remains dense. */
#page-calendar .calendar-details{
  margin:0 9px 8px!important;
  padding:6px 0 0!important;
  gap:6px!important;
  border-top:var(--ui-border)!important;
}
#page-calendar .calendar-details>span{
  min-height:32px!important;
  height:32px!important;
  padding:6px 7px!important;
  border-radius:10px!important;
  font-size:9px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#page-calendar .calendar-details b{
  font-size:10px!important;
}

/* Keep impact as a restrained edge signal; don't let theme styling inflate the card. */
#page-calendar .calendar-item.impact-high,
#page-calendar .calendar-item.impact-medium,
#page-calendar .calendar-item.impact-low,
#page-calendar .calendar-item.impact-holiday{
  border-left-width:4px!important;
}

/* Mobile: same scale, only narrower. */
@media(max-width:560px){
  #page-calendar #calendarStatus{
    min-height:42px!important;
    height:42px!important;
    padding:5px 8px!important;
  }
  #page-calendar #calendarStatus .inline-status{
    height:32px!important;
    min-height:32px!important;
    padding:6px 9px!important;
  }
  #page-calendar #calendarStatus .inline-status b,
  #page-calendar #calendarStatus .inline-status small{
    font-size:10px!important;
  }
  #page-calendar .calendar-source{
    min-height:34px!important;
    height:34px!important;
    padding:0 12px!important;
  }
  #page-calendar .calendar-source a,
  #page-calendar .calendar-source button{
    font-size:10.5px!important;
  }
  #page-calendar .calendar-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:8px!important;
  }
  #page-calendar .calendar-summary-grid .metric-card{
    min-height:46px!important;
    height:46px!important;
    padding:7px 9px!important;
  }
  #page-calendar .calendar-summary-grid .metric-card span{
    font-size:10px!important;
  }
  #page-calendar .calendar-summary-grid .metric-card strong{
    font-size:13px!important;
  }
  #page-calendar .calendar-agenda-bar{
    min-height:48px!important;
    height:48px!important;
    padding:9px 12px!important;
  }
  #page-calendar .calendar-date-list{
    padding:8px!important;
  }
  #page-calendar .calendar-date-toggle{
    min-height:52px!important;
    height:52px!important;
    padding:8px 10px!important;
  }
  #page-calendar .calendar-meta{
    min-height:0!important;
    height:auto!important;
    padding:4px 8px 6px!important;
    gap:6px!important;
  }
  #page-calendar .calendar-time-value{
    flex-basis:54px!important;
    width:54px!important;
    font-size:12.5px!important;
  }
  #page-calendar .currency-code,
  #page-calendar .impact-pill{
    min-height:25px!important;
    height:25px!important;
    padding:5px 8px!important;
    font-size:10px!important;
  }
  #page-calendar .calendar-event-head{padding:8px 8px 0!important}
  #page-calendar .calendar-title,
  #page-calendar .calendar-event>.calendar-title{
    font-size:12.5px!important;
  }
  #page-calendar .calendar-details{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    margin:0 8px 8px!important;
  }
  #page-calendar .calendar-details>span{
    padding:6px!important;
    font-size:8.5px!important;
  }
  #page-calendar .calendar-details b{
    font-size:9.5px!important;
  }
}

@media(max-width:390px){
  /* Superseded: the impact pill was dropped and the title was indented 66px
     below this width. Both were concessions to the chevron sharing the meta
     strip; the chevron has its own row now, so impact stays and the title
     keeps the full width of the card. */
  #page-calendar .calendar-title,
  #page-calendar .calendar-event>.calendar-title{
    font-size:12px!important;
  }
  #page-calendar .calendar-details{
    grid-template-columns:1fr 1fr!important;
  }
}


/* ==========================================================================
   TOOLS — APPEARANCE COMPACT PASS 1
   Scoped to Appearance only. Keep other Tools sections and frozen pages intact.
   ========================================================================== */
/* Superseded: this block gave the Appearance heading its own `min-height:0`,
   its own padding, `align-items:flex-start` and a 16px title, so it rendered a
   visibly different size block from every other Tools card. The one heading
   contract now lives at the end of this sheet. The explanatory note it used to
   sit under the title, which made the heading the tallest on the page, moved to
   the card's foot where it is a footnote rather than part of the heading. */
#page-tools .tools-appearance>.section-note{
  margin:0!important;
  padding:10px var(--ui-heading-pad-x) 12px!important;
  border-top:var(--border-w) solid var(--line)!important;
  max-width:100%!important;
  font-size:10.5px!important;
  line-height:1.25!important;
}

#page-tools .tools-appearance .settings-row{
  min-height:46px!important;
  padding:6px var(--ui-heading-pad-x)!important;
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:initial!important;
  gap:8px!important;
  box-sizing:border-box!important;
}
#page-tools .tools-appearance .settings-label{
  min-width:0!important;
  font-size:10.5px!important;
  line-height:1!important;
  letter-spacing:.11em!important;
  color:var(--text)!important;
}
#page-tools .tools-appearance .settings-inline{
  min-width:0!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:5px!important;
  flex-wrap:wrap!important;
}
#page-tools .tools-appearance .chip-option,
#page-tools .tools-appearance .settings-toggle,
#page-tools .tool-settings .chip-option{
  min-height:32px!important;
  height:32px!important;
  padding:5px 10px!important;
  border-radius:10px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:600!important;
  box-sizing:border-box!important;
}
#page-tools .tools-appearance .appearance-swatch{
  width:11px!important;
  height:11px!important;
  min-width:11px!important;
  margin-right:0!important;
  border-radius:4px!important;
}

/* Accent needs only enough height for its natural second line.
   `:nth-of-type(4)` counted the section heading as a div, so it targeted the
   Accent row by coincidence; `:has()` on the row's own label cannot drift. */
#page-tools .tools-appearance .settings-row:has(.settings-inline[aria-label="Accent color"]){
  align-items:center!important;
}

@media(max-width:560px){
  #page-tools .tools-appearance>.section-note{
    padding:10px var(--ui-heading-pad-x) 12px!important;
    font-size:10px!important;
    line-height:1.2!important;
  }
  #page-tools .tools-appearance .settings-row{
    min-height:44px!important;
    padding-block:6px!important;
    padding-inline:var(--ui-heading-pad-x)!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:7px!important;
  }
  #page-tools .tools-appearance .settings-inline{
    gap:5px!important;
  }
  #page-tools .tools-appearance .chip-option,
  #page-tools .tools-appearance .settings-toggle,
  #page-tools .tool-settings .chip-option{
    min-height:32px!important;
    height:32px!important;
    padding-inline:9px!important;
    font-size:10.5px!important;
  }
}


/* ==========================================================================
   TOOLS — APPEARANCE THEME READABILITY FREEZE
   Structure/geometry is frozen. This pass only guarantees readable control
   foregrounds across Modern/Neo + Light/Dark + accent combinations.
   ========================================================================== */
#page-tools .tools-appearance .chip-option,
#page-tools .tools-appearance .settings-toggle,
#page-tools .tool-settings .chip-option{
  color:var(--text)!important;
  background:var(--surface-2)!important;
  border-color:var(--line)!important;
  -webkit-text-fill-color:var(--text)!important;
}
#page-tools .tools-appearance .chip-option.active,
#page-tools .tools-appearance .settings-toggle.active,
#page-tools .tool-settings .chip-option.active{
  color:var(--on-accent)!important;
  background:var(--accent-fill)!important;
  border-color:var(--accent-fill)!important;
  -webkit-text-fill-color:var(--on-accent)!important;
}
#page-tools .tools-appearance .chip-option.active .appearance-swatch,
#page-tools .tools-appearance .settings-toggle.active .appearance-swatch{
  border-color:var(--on-accent)!important;
}
html[data-style="neo"] #page-tools .tools-appearance .chip-option,
html.neo-mode #page-tools .tools-appearance .chip-option,
html[data-style="neo"] #page-tools .tool-settings .chip-option,
html.neo-mode #page-tools .tool-settings .chip-option,
html[data-style="neo"] #page-tools .tools-appearance .settings-toggle,
html.neo-mode #page-tools .tools-appearance .settings-toggle{
  color:var(--text)!important;
  background:var(--surface-2)!important;
  border-color:var(--line-strong)!important;
  -webkit-text-fill-color:var(--text)!important;
}
html[data-style="neo"] #page-tools .tools-appearance .chip-option.active,
html.neo-mode #page-tools .tools-appearance .chip-option.active,
html[data-style="neo"] #page-tools .tool-settings .chip-option.active,
html.neo-mode #page-tools .tool-settings .chip-option.active,
html[data-style="neo"] #page-tools .tools-appearance .settings-toggle.active,
html.neo-mode #page-tools .tools-appearance .settings-toggle.active{
  color:var(--on-accent)!important;
  background:var(--accent-fill)!important;
  border-color:var(--line-strong)!important;
  -webkit-text-fill-color:var(--on-accent)!important;
}


/* ==========================================================================
   TOOLS — BACKTEST COMPACT / MOBILE DENSITY FREEZE
   Backtest only. Keep the existing DOM/API/rendering intact; this is a
   presentation contract for compact mobile geometry and safe text flow.
   ========================================================================== */
/* Superseded: Backtest carried a 46px heading with a 15px title, so it rendered
   the smallest block on the page beside its 17px neighbours, and it was the only
   card whose tag was dropped on a narrow phone. The one heading contract is at
   the end of this sheet. */
#page-tools .tool-backtest>.tool-body{
  padding:9px!important;
}
#page-tools .tool-backtest>.tool-body>.section-note{
  margin:0 0 7px!important;
  font-size:10.5px!important;
  line-height:1.3!important;
}
#page-tools .tool-backtest .backtest-controls{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  min-width:0!important;
}
#page-tools .tool-backtest .backtest-controls label{
  min-width:0!important;
  gap:3px!important;
  font-size:10px!important;
  line-height:1.15!important;
}
#page-tools .tool-backtest .backtest-controls select{
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  height:36px!important;
  padding:5px 9px!important;
  border-radius:10px!important;
  font-size:11.5px!important;
  line-height:1.2!important;
}
#page-tools .tool-backtest .backtest-controls .primary-button{
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  height:36px!important;
  padding:5px 10px!important;
  border-radius:10px!important;
  font-size:11.5px!important;
}
#page-tools .tool-backtest .backtest-status{
  min-width:0!important;
  min-height:34px!important;
  margin-top:7px!important;
  padding:7px 9px!important;
  font-size:10px!important;
  line-height:1.25!important;
}
#page-tools .tool-backtest .backtest-results{
  min-width:0!important;
  margin-top:7px!important;
  padding:0!important;
  gap:7px!important;
  background:transparent!important;
}
#page-tools .tool-backtest .backtest-section{
  min-width:0!important;
  margin:0!important;
  padding:8px!important;
  border-radius:10px!important;
}
#page-tools .tool-backtest .backtest-summary{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
}
#page-tools .tool-backtest .backtest-summary>div{
  min-width:0!important;
  min-height:42px!important;
  padding:6px 8px!important;
  border-radius:9px!important;
}
#page-tools .tool-backtest .backtest-summary>div span,
#page-tools .tool-backtest .backtest-metrics>div span{
  display:block!important;
  min-width:0!important;
  font-size:9px!important;
  line-height:1.1!important;
  overflow-wrap:anywhere!important;
}
#page-tools .tool-backtest .backtest-summary b{
  margin-top:2px!important;
  font-size:11.5px!important;
  line-height:1.15!important;
}
#page-tools .tool-backtest .backtest-curve-section .chart-head{
  min-width:0!important;
  gap:6px!important;
  margin-bottom:4px!important;
}
#page-tools .tool-backtest .backtest-curve-section .chart-head>div{
  min-width:0!important;
}
#page-tools .tool-backtest .backtest-curve-section .chart-head strong{
  font-size:13px!important;
  line-height:1.15!important;
}
#page-tools .tool-backtest .backtest-curve-section .chart-head small{
  display:block!important;
  margin-top:2px!important;
  font-size:9.5px!important;
  line-height:1.2!important;
}
#page-tools .tool-backtest .backtest-curve-section .chart-head>span{
  flex:0 0 auto!important;
  font-size:9.5px!important;
}
#page-tools .tool-backtest .backtest-curve-section svg{
  display:block!important;
  width:100%!important;
  height:120px!important;
  max-height:120px!important;
}
#page-tools .tool-backtest .backtest-section-heading{
  min-width:0!important;
  margin-bottom:6px!important;
  padding-bottom:6px!important;
  gap:7px!important;
}
#page-tools .tool-backtest .backtest-section-heading>div{
  min-width:0!important;
}
#page-tools .tool-backtest .backtest-section-heading h3{
  margin-top:2px!important;
  font-size:14px!important;
  line-height:1.15!important;
}
#page-tools .tool-backtest .backtest-section-heading>span{
  flex:0 0 auto!important;
  font-size:9px!important;
}
#page-tools .tool-backtest .backtest-rating{
  min-height:25px!important;
  padding:5px 8px!important;
  font-size:9px!important;
}
#page-tools .tool-backtest .backtest-metrics{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
}
#page-tools .tool-backtest .backtest-metrics>div{
  min-width:0!important;
  min-height:42px!important;
  padding:6px 8px!important;
  border-radius:9px!important;
}
#page-tools .tool-backtest .backtest-metrics>div:last-child{
  grid-column:1/-1!important;
}
#page-tools .tool-backtest .backtest-metrics b{
  display:block!important;
  min-width:0!important;
  margin-top:2px!important;
  font-size:14px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#page-tools .tool-backtest .backtest-trades{
  min-width:0!important;
  max-height:420px!important;
  border-radius:9px!important;
}
#page-tools .tool-backtest .backtest-trade-row{
  min-width:0!important;
  min-height:48px!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  gap:6px!important;
  padding:7px 8px!important;
}
#page-tools .tool-backtest .backtest-trade-row>div{
  min-width:0!important;
}
#page-tools .tool-backtest .backtest-trade-row b{
  display:block!important;
  min-width:0!important;
  font-size:10.5px!important;
  line-height:1.15!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-tools .tool-backtest .backtest-trade-row small{
  display:block!important;
  min-width:0!important;
  margin-top:2px!important;
  font-size:9.5px!important;
  line-height:1.15!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-tools .tool-backtest .backtest-trade-row>strong{
  flex:0 0 auto!important;
  font-size:10.5px!important;
  white-space:nowrap!important;
}
@media(max-width:390px){
  #page-tools .tool-backtest>.tool-body{
    padding:8px!important;
  }
  #page-tools .tool-backtest .backtest-section{
    padding:7px!important;
  }
  #page-tools .tool-backtest .backtest-curve-section svg{
    height:108px!important;
    max-height:108px!important;
  }
}


/* ==========================================================================
   COLLAPSIBLE CONTROL — SINGLE VISUAL/STATE CONTRACT
   Geometry comes from foundation.css. This layer supplies only theme
   appearance plus the shared state selectors used by every expandable family.
   ========================================================================== */
html[data-style="neo"] .collapse-control,
html.neo-mode .collapse-control{
  border:2px solid var(--line-strong)!important;
  border-radius:var(--ui-collapse-radius)!important;
  box-shadow:2px 2px 0 var(--line-strong)!important;
}
html[data-style="neo"] .collapse-control:hover,
html.neo-mode .collapse-control:hover{
  transform:none!important;
  box-shadow:3px 3px 0 var(--line-strong)!important;
}
html[data-style="neo"] .collapse-control:active,
html.neo-mode .collapse-control:active{
  transform:none!important;
  box-shadow:0 0 0 var(--line-strong)!important;
}
html[data-style="neo"] .collapse-control::after,
html.neo-mode .collapse-control::after{
  border-right-width:2px!important;
  border-bottom-width:2px!important;
}

/* All date-group families share one 52px row and one 40px control. */
#page-signals .signal-date-toggle,
#page-history .history-date-toggle,
#page-calendar .calendar-date-toggle{
  min-height:52px!important;
  height:52px!important;
  width:100%!important;
  margin:0!important;
  padding:8px 12px!important;
  border-radius:var(--ui-inner-r)!important;
}
#page-signals .signal-date-toggle .collapse-control,
#page-history .history-date-toggle .collapse-control,
#page-calendar .calendar-date-toggle .collapse-control{
  width:var(--ui-collapse-size)!important;
  min-width:var(--ui-collapse-size)!important;
  max-width:var(--ui-collapse-size)!important;
  height:var(--ui-collapse-size)!important;
  min-height:var(--ui-collapse-size)!important;
  max-height:var(--ui-collapse-size)!important;
  border-radius:var(--ui-collapse-radius)!important;
}

/* The state owner differs by markup, but the visual state is identical:
   Tools uses the control's aria-expanded; date groups use the parent button. */
html[data-reduce-motion="true"] .collapse-control::after{
  transition:none!important;
}

/* ==========================================================================
   One treatment for grey gutter panels.

   Measured across all five tabs: a grey panel at nesting depth 1 is
   borderless everywhere -- metric-grid, stack, signals-date-list,
   history-summary-grid, history-date-list, history-live-list,
   calendar-summary-grid, calendar-date-list and tool-body all render with no
   border. `.chart-card` was the single exception and drew one, so "Signal
   activity" read as a different kind of box from every panel beside it.

   The rule applied here: a grey gutter panel carries no outline of its own --
   the fill change is what separates it -- and the contents inside it carry the
   borders (chips, buttons, tiles). Controls at depth 2 keep their own.

   Two rules here were grouping .chart-card with genuinely bordered cards,
   which is where the stray outline came from.
   ========================================================================== */
html #page-overview .chart-card,
html #page-overview .section-block .chart-card{
  border:0!important;
}

/* ==========================================================================
   Expanded signal: ONE outline, not three.

   Five successive rules redefine `.signal-card.expanded .detail-grid`, and the
   last to win left it at `border:1px solid var(--line)` on `--surface`.
   `.reason` finished the same way, and `.expand-content` adds its own
   `border-top`. The card already carries a 1px border, so expanding a signal
   drew a doubled line under the header plus a second outline around the grid
   and the reason block -- three white boxes stacked inside one card.

   The card is the only surface that gets an outline. What opens beneath it is
   interior: it keeps a fill and a radius, and the grid's own nth-child
   hairlines still separate cells, so the table still reads without a second
   frame competing with the card edge.

   These three declarations stay here rather than moving into the consolidated
   definition in foundation.css. Neo declares a 2px border on this element from
   foundation.css, and this rule only beats it because the `html` prefix matches
   Neo's specificity and this sheet loads later. Moving border, radius or
   background into foundation.css would hand the border back to Neo.
   ========================================================================== */
html #page-signals .signal-card.expanded .expand-content,
html #page-overview .overview-signals .signal-card.expanded .expand-content,
html[data-style="neo"] #page-signals .signal-card.expanded .expand-content,
html[data-style="neo"] #page-overview .overview-signals .signal-card.expanded .expand-content{
  border-top:0!important;
}
html #page-signals .signal-card.expanded .detail-grid,
html #page-overview .overview-signals .signal-card.expanded .detail-grid,
html #page-signals .signal-card.expanded .reason,
html #page-overview .overview-signals .signal-card.expanded .reason,
html[data-style="neo"] #page-signals .signal-card.expanded .detail-grid,
html[data-style="neo"] #page-overview .overview-signals .signal-card.expanded .detail-grid,
html[data-style="neo"] #page-signals .signal-card.expanded .reason,
html[data-style="neo"] #page-overview .overview-signals .signal-card.expanded .reason{
  border:0!important;
  background:var(--surface-2)!important;
  border-radius:var(--radius-sm)!important;
}

/* ==========================================================================
   Expanded signal: the detail cells draw a COMPLETE grid or no grid at all.

   foundation.css:3022 sets the cells to `border:0` on `--surface`, then the
   very next two rules put hairlines back:

       .detail-grid>div:nth-child(n+3) { border-top:1px solid var(--line) }
       .detail-grid>div:nth-child(even){ border-left:1px solid var(--line) }

   Those hairlines only ever made sense against an enclosing frame -- they are
   the interior lines of a bordered table, and the grid itself used to supply
   that frame. The frame is gone (see the rule above), so what is left is a set
   of partial lines with nothing to anchor them: no top edge on the first row,
   no right or bottom edge anywhere. Measured at 390px, eleven cells came back
   as cell 1 with no border, cell 2 with a left edge only, cell 3 with a top
   edge only, cell 4 with both -- which is the "some have a border, some don't"
   read. Because the lines are positional, the pattern is also wrong the moment
   the column count changes: the grid is 3 / 2 / 1 columns at different
   breakpoints, and `nth-child(even)` has no idea which one it is looking at.

   The cells are separate tiles, so separate them the way every other tile
   group in the app is separated -- with a gap and a fill, not with lines. The
   grid goes back to being a plain grey gutter and the white tiles sit in it.
   Every selector variant that ever won the cascade is listed explicitly,
   because all of these declarations are `!important` and are therefore
   separated by specificity rather than by source order.
   ========================================================================== */
html #page-signals .signal-card .detail-grid,
html #page-overview .overview-signals .signal-card .detail-grid,
html #page-signals .signal-card.expanded .detail-grid,
html #page-overview .overview-signals .signal-card.expanded .detail-grid,
html[data-style="neo"] #page-signals .signal-card .detail-grid,
html[data-style="neo"] #page-overview .overview-signals .signal-card .detail-grid,
html[data-style="neo"] #page-signals .signal-card.expanded .detail-grid,
html[data-style="neo"] #page-overview .overview-signals .signal-card.expanded .detail-grid{
  gap:6px!important;
  padding:6px!important;
  background:var(--surface-2)!important;
}
html #page-signals .signal-card .detail-grid>div,
html #page-overview .overview-signals .signal-card .detail-grid>div,
html #page-signals .signal-card.expanded .detail-grid>div,
html #page-overview .overview-signals .signal-card.expanded .detail-grid>div,
html[data-style="neo"] #page-signals .signal-card .detail-grid>div,
html[data-style="neo"] #page-overview .overview-signals .signal-card .detail-grid>div,
html[data-style="neo"] #page-signals .signal-card.expanded .detail-grid>div,
html[data-style="neo"] #page-overview .overview-signals .signal-card.expanded .detail-grid>div,
html #page-signals .signal-card .detail-grid>div:nth-child(even),
html #page-overview .overview-signals .signal-card .detail-grid>div:nth-child(even),
html #page-signals .signal-card.expanded .detail-grid>div:nth-child(even),
html #page-overview .overview-signals .signal-card.expanded .detail-grid>div:nth-child(even),
html #page-signals .signal-card .detail-grid>div:nth-child(n+3),
html #page-overview .overview-signals .signal-card .detail-grid>div:nth-child(n+3),
html #page-signals .signal-card.expanded .detail-grid>div:nth-child(n+3),
html #page-overview .overview-signals .signal-card.expanded .detail-grid>div:nth-child(n+3),
html[data-style="neo"] #page-signals .signal-card .detail-grid>div:nth-child(even),
html[data-style="neo"] #page-signals .signal-card.expanded .detail-grid>div:nth-child(even),
html[data-style="neo"] #page-signals .signal-card .detail-grid>div:nth-child(n+3),
html[data-style="neo"] #page-signals .signal-card.expanded .detail-grid>div:nth-child(n+3),
html[data-style="neo"] #page-overview .overview-signals .signal-card .detail-grid>div:nth-child(even),
html[data-style="neo"] #page-overview .overview-signals .signal-card.expanded .detail-grid>div:nth-child(even),
html[data-style="neo"] #page-overview .overview-signals .signal-card .detail-grid>div:nth-child(n+3),
html[data-style="neo"] #page-overview .overview-signals .signal-card.expanded .detail-grid>div:nth-child(n+3){
  border:0!important;
  border-radius:var(--radius-xs)!important;
  background:var(--surface)!important;
}

/* ==========================================================================
   Empty states: the dashed outline goes.

   Why it was there: `.empty-state` was written in the original component pass
   with `border:2px dashed var(--line-strong)`. A dashed outline is the
   conventional "placeholder, nothing here" affordance, and that is the only
   reason it existed.

   Why it had to go:

   1. It was the ONLY dashed or dotted border in the codebase. Every other
      boundary in the app is a solid hairline, so the empty state was the one
      box on the screen drawn in a different language.
   2. The 2px was a literal, so it bypassed `--border-w` and hardcoded Neo's
      weight into Modern. (The override above had already thinned it to 1px
      while leaving the dash behind -- the dash was never revisited.)
   3. A 1px dashed line at phone scale stops reading as an affordance and
      starts reading as a rendering artefact; dashes alias badly on the
      low-DPR screens this dashboard is mostly used on.
   4. It contradicted the grey-gutter rule directly above: an empty state sits
      INSIDE `.history-summary-grid` / `.history-live-list`, which are grey
      borderless gutters, so it was a gutter child drawing its own outline.

   What it is now: exactly what `.metric-card` is -- a white tile with a solid
   `--border-w` hairline and an inner radius. In History the three metric cards
   and the two empty states then read as the same kind of box, which is the
   whole point: an empty History is the same layout with different contents.
   Neo keeps its 2px through `--border-w` rather than a second hardcoded rule.
   ========================================================================== */
html .empty-state,
html #page-history .history-empty-state,
html #page-overview .overview-activity .empty-state{
  border:var(--border-w) solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--surface)!important;
}

/* ==========================================================================
   One surface contract, applied to the panels that were still off-contract.

   Home is the reference and it is simple:

     gutter (grey, holds other things)  -> --surface-2, NO border, inner radius
     tile   (white, holds content)      -> --surface,   --border-w hairline
     interior block inside a tile       -> --surface-2, NO border

   Three kinds of box broke that, all on Tools and Calendar:

   1. GREY ON GREY WITH A BORDER. `.universe-grid`, `.account-grid` and
      `.rule-list` are all painted `--surface-2` and all carried a 1px border
      -- while sitting inside
      `.tool-body`, which is *also* `--surface-2`. Two greys on top of each
      other cannot be separated by a fill, so the border was the only thing
      doing any work: a line floating in the middle of a flat grey field, with
      no fill change behind it. That is the "grey on grey / floating border"
      read. They are gutters, so they now carry no outline, exactly like
      `.history-summary-grid` and `.calendar-summary-grid`.

   2. SOME TILES BORDERED, SOME NOT. The tiles inside those grids were drawn as
      a borderless table: `gap:0`, `border-right` + `border-bottom` per tile,
      then `:nth-child(2n)` dropping the right edge and
      `:nth-last-child(-n+2)` dropping the bottom one. Measured in the live
      DOM, the Runtime card's four tiles (that card has since been removed)
      came back as

          [0] border-top 0px    [1] border-top 0px
          [2] border-top 1px    [3] border-top 1px

      -- same fill, same radius, two different treatments in one group. Those
      hairlines only ever made sense against an enclosing frame, and there
      isn't one. Each tile now carries the same complete hairline as
      `.metric-card`, and the positional edge-dropping is neutralised. The
      `.rule-list` zebra (`:nth-child(odd)`) goes with it: alternating row
      fills inside a bordered box was a second, older answer to the same
      question.

   3. AN OUTLINE WITH NO FILL. `.backtest-controls` was transparent with a 1px
      border: a frame drawn around nothing, floating on the grey gutter. It is
      a content block, so it is a tile now.

   Selector prefixes carry `html` (one extra type) because every declaration
   below competes with an `!important` rule of equal intent; the nth-child
   variants are named explicitly for the same reason specificity, not source
   order, decides between two `!important` declarations.
   ========================================================================== */
/* Specificity note, learned the hard way on the first pass:

   These tiles are generated by app.js as bare <article>/<div>/<span> with NO
   class attribute, so the `[class]` trick used elsewhere in this file silently
   never matches them. And the competing declarations are `!important`, so
   source order decides nothing -- only specificity does. The confirmed
   ancestor chain is

       section.tool-card.tool-<x> > div.tool-body > div.<grid> > <tile>

   so every selector below names that chain. `html body` + two classes in the
   chain outranks the higher-specificity pile-up above on class count, which
   is what that pile-up actually competes with. */
html body #page-tools .tool-universe .tool-body .universe-grid,
html body #page-tools .tool-accounts .tool-body .account-grid,
html body #page-tools .tool-rules .tool-body .rule-list{
  border:0!important;
  border-radius:var(--radius-sm)!important;
}
html body #page-tools .tool-universe .tool-body .universe-grid>span,
html body #page-tools .tool-accounts .tool-body .account-grid>article,
html body #page-tools .tool-rules .tool-body .rule-list>div,
html body #page-tools .tool-rules .tool-body .rule-list>div:nth-child(odd),
html body #page-tools .tool-rules .tool-body .rule-list>div:last-child,
html body #page-tools .tool-accounts .tool-body .account-grid>article:last-child{
  border:var(--border-w) solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--surface)!important;
}
html body #page-tools .tool-backtest .tool-body .backtest-controls{
  border:var(--border-w) solid var(--line)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--surface)!important;
}

/* ==========================================================================
   The Appearance panel: one frame, hairline separators, no inset boxes.

   `.tools-appearance` is a card and already declares its own 1px border at
   `--radius`. But every `.settings-row` inside it was ALSO a complete bordered
   box, inset by `margin:0 10px`. Measured live on the THEME row:

       T=1px R=1px B=1px L=1px  radius=11px  margin=8px/8px

   So the panel drew its frame, then drew four more frames inside it, each
   pulled in from the edges. That is the border you can see floating inside
   the panel -- and because the rows carry `--radius-sm` while the panel is
   `--radius`, the two outlines have different corner shapes at the same time,
   which is the "square border then round border" read.

   The rows are not cards. They are one continuous surface divided by hairlines,
   so:

     - the panel's own border is the only outline
     - rows lose their left/right/bottom edges, their radius and their inset
     - the heading's existing bottom border separates it from row one
     - each later row gets a single `border-top` hairline

   The heading bottom border and the first row's top border used to sit one
   pixel apart and drew the same line twice; the first row no longer adds one.
   ========================================================================== */
html #page-tools .tools-appearance>.settings-row,
html #page-tools .tools-appearance .settings-row{
  border:0!important;
  border-radius:0!important;
  margin-left:0!important;
  margin-right:0!important;
  background:transparent!important;
}
html #page-tools .tools-appearance>.section-heading+.settings-row{
  border-top:0!important;
  border-radius:0!important;
}
html #page-tools .tools-appearance>.settings-row+.settings-row{
  border-top:var(--border-w) solid var(--line)!important;
}

/* ==========================================================================
   Expanded calendar event: the divider was a border around nothing.

   `.calendar-details` is a layout row that holds the ACTUAL / FORECAST /
   PREVIOUS chips -- it is not a surface. But it declared a border anyway, on
   an element with no fill at all. Measured live:

       T=1px R=- B=- L=-   radius=11px   fill=transparent   margin-left=66px
       children: 3 spans, each a full 1px box at radius 10px on --surface-2

   Three things made that one line read as a floating artefact rather than a
   divider:

     1. it was an outline with NO fill behind it -- the same class of defect as
        the Tools gutters, a border doing work that no fill was doing
     2. it carried `--radius-sm`, so a single top edge rendered with rounded
        ends, which does not read as a straight divider
     3. it was inset 66px to align under the event title while the chips
        inside start further right at x=91, so it lined up with nothing

   The chips already carry the structure (they are bordered tiles on a white
   card), and the card supplies the only outline. So the row loses its border
   and its radius and stops pretending to be a box. This is the same rule that
   removed `.expand-content`'s top border on Signals: one outline per card, and
   the interior is separated by what it contains.
   ========================================================================== */
html #page-calendar .calendar-details,
html #page-calendar .calendar-date-group .calendar-details,
html[data-style="neo"] #page-calendar .calendar-details,
html[data-style="neo"] #page-calendar .calendar-date-group .calendar-details,
html[data-style="material3"] #page-calendar .calendar-details,
html[data-style="material3"] #page-calendar .calendar-date-group .calendar-details{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}


/* ==========================================================================
   TOOLS — "BOT SETTINGS" LAYOUT & HIERARCHY REPAIR
   Ten defects measured on the running dashboard at 390x844 and 406x1440
   (modern / light / rose). Each rule below replaces a superseded declaration
   rather than adding to it.
   ========================================================================== */

/* --- (1) Heading: title, tag and chevron stay on one line ----------------
   foundation.css puts `flex-wrap:wrap` on every `.section-heading`, so on a
   phone the 17px title, the 112px session tag and the 32px chevron no longer
   fit and the chevron dropped onto a line of its own (heading 101px tall).
   The tag is the only thing that can give, so it shrinks to the same step the
   Backtest card already uses and the title is allowed to shrink too.
   ---------------------------------------------------------------------- */
#page-tools .tool-collapse>.section-heading>div{
  flex:1 1 auto!important;
  min-width:0!important;
}
html #page-tools .tool-card>.section-heading{
  flex-wrap:nowrap!important;
}
/* Superseded: the settings tag used to be the only shrunk one, so it rendered a
   10px pill beside the Markets card's 11px one. The tag contract is now declared
   once for every card; see "ONE HEADING CONTRACT" at the end of this sheet. */

/* --- (2) One gutter: body padding + row inset = the heading inset ---------
   Two sheets gave the same card heading a 12px and a 16px horizontal inset,
   so full-width cards and column cards in the same page started their text at
   different x positions; the expanded body then added 8px of its own and each
   settings row another 14px, putting row labels 10px right of the eyebrow
   above them. One inset is declared once and used by every card, row, group
   label and note.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings{--ui-settings-inset:calc(var(--ui-heading-pad-x) - 8px)}
#page-tools .tool-settings .settings-row,
#page-tools .tool-settings .settings-group>.settings-label,
#page-tools .tool-settings .settings-group>.section-note{
  padding-inline:var(--ui-settings-inset)!important;
}
#page-tools .tool-settings .settings-row{
  align-items:center!important;
}

/* --- (3) Account rows: labelled fields, one grid, one row each -----------
   Three bare number boxes and a second, differently sized "<name> budget"
   row described one account. It is now one row: the account name and its
   Remove action, then three equally wide fields that each say what they hold,
   then the derived numbers the server will apply.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-account{
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
#page-tools .tool-settings .settings-account-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-account .settings-label{
  font-size:11.5px!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
}
#page-tools .tool-settings .settings-account-fields{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-field{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-field-label{
  font-size:9.5px!important;
  line-height:1!important;
  font-weight:650!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
}
#page-tools .tool-settings .settings-field .settings-input{
  width:100%!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-account .settings-hint{
  text-align:left!important;
  line-height:1.3!important;
}
#page-tools .tool-settings .settings-inline .settings-input{
  flex:1 1 96px!important;
}

/* --- (4) New York session selects share the control contract -------------
   These were 36px OS-native selects at 12px with the platform bevel and its
   own chevron, sitting in a card whose other controls are 32px at 11px. Start
   and end share a row; "Right now" is a read-only status, so it spans both.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .backtest-controls{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
/* Superseded: `grid-column:1/-1` gave "Right now" a row of its own, so the
   session rendered as a start/end pair plus a full-width third control while
   every other row in the card was a single line -- and a rule that only
   checked `grid-template-columns` could not see it. It is the third of three
   32px controls and shares the line. */
#page-tools .tool-settings .settings-session-live{
  grid-column:auto!important;
}
#page-tools .tool-settings .backtest-controls label{
  position:relative!important;
}
#page-tools .tool-settings .backtest-controls label::after{
  content:""!important;
  position:absolute!important;
  right:10px!important;
  top:calc(100% - 16px)!important;
  width:6px!important;
  height:6px!important;
  border-right:1.5px solid var(--muted)!important;
  border-bottom:1.5px solid var(--muted)!important;
  transform:translateY(-50%) rotate(45deg)!important;
  pointer-events:none!important;
}
#page-tools .tool-settings .backtest-controls select{
  appearance:none!important;
  -webkit-appearance:none!important;
  min-height:var(--ui-control-h)!important;
  height:var(--ui-control-h)!important;
  padding:0 26px 0 10px!important;
  border-radius:var(--ui-control-r)!important;
  font-size:11px!important;
  line-height:1!important;
}
@media(max-width:560px){
  #page-tools .tool-settings .backtest-controls label::after{
    top:calc(100% - 15px)!important;
  }
}

/* --- (5) Save / Reset carry different weight and show the dirty state -----
   Both used to be the same grey chip, so the two destructive outcomes looked
   identical, and nothing on screen changed until you scrolled 2,200px to a
   status line. Save is now the card's only accent button and the Changes row
   carries a live "Unsaved changes" badge.
   ---------------------------------------------------------------------- */
/* Superseded: the Changes card and its "Unsaved changes" badge are gone. Save
   and Reset live in every card that owns data now, so the dirty state is
   carried by the Save button the operator's hand is already on. */
#page-tools .tool-settings .settings-actions .primary-button.is-dirty{
  box-shadow:0 0 0 2px var(--accent-soft)!important;
}

/* --- (6) Reorder buttons stop looking like routing options ---------------
   `↑` / `↓` are actions, not choices, and the disabled ones looked enabled
   because no sheet had a `:disabled` rule for them at all.
   ---------------------------------------------------------------------- */
html #page-tools .tool-settings .settings-move{
  width:var(--ui-collapse-size)!important;
  min-width:var(--ui-collapse-size)!important;
  height:var(--ui-collapse-size)!important;
  min-height:var(--ui-collapse-size)!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:700!important;
  background:var(--surface)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
}
html #page-tools .tool-settings .settings-move:hover:not(:disabled){
  border-color:var(--accent)!important;
  color:var(--accent)!important;
  -webkit-text-fill-color:var(--accent)!important;
  transform:none!important;
}
/* The pressed state. Feedback is a fill, not a scale or a translate: the hover
   rule above pins `transform:none`, because this control's geometry is fixed
   (like every other disclosure in the app, only the chevron may move). Colour
   and surface carry the press instead. */
html #page-tools .tool-settings .settings-move:active:not(:disabled){
  background:var(--accent-soft)!important;
  border-color:var(--accent)!important;
  color:var(--accent)!important;
  -webkit-text-fill-color:var(--accent)!important;
}
html #page-tools .tool-settings .settings-move:disabled{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  color:var(--muted)!important;
  -webkit-text-fill-color:var(--muted)!important;
  opacity:.45!important;
  cursor:not-allowed!important;
  transform:none!important;
}
html[data-style="neo"] #page-tools .tool-settings .settings-move,
html.neo-mode #page-tools .tool-settings .settings-move,
html[data-style="neo"] #page-tools .tool-settings .settings-move:disabled,
html.neo-mode #page-tools .tool-settings .settings-move:disabled{
  background:var(--surface)!important;
  border-color:var(--line-strong)!important;
}

/* --- (7) Row labels: less condensed, one weight -------------------------
   Every `.settings-label` inherited `letter-spacing:.13em` and rendered at
   9.5px/650, which is 1.24px of tracking per character on a 10px cap height.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-label{
  letter-spacing:.09em!important;
  font-weight:600!important;
  line-height:1.2!important;
}

/* --- (8) One mobile clearance, not three ---------------------------------
   foundation.css reserves `--f-mobile-nav-clearance` on both `body` and
   `main`, and styles.css reserves another `92px` on `.app`, so the Tools page
   ended in 244px of empty background under the last card. `.app` is the shell
   that owns the space around the fixed nav, so the two inner reservations
   collapse into it.
   ---------------------------------------------------------------------- */
@media(max-width:900px){
  #main-content{padding-bottom:0!important}
  body{padding-bottom:0!important}
}

/* --- (9) Routing: one block per rule -------------------------------------
   Three rows per rule repeated the account name three times and put a
   three-way exclusive choice beside two arrow buttons painted like it. Each
   rule is now one block: the name and its own reorder buttons on a heading,
   then a captioned group for strategies, asset groups and the session window.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-rule{
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
#page-tools .tool-settings .settings-rule-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-rule .settings-label{
  font-size:11.5px!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-rule-move{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex:none!important;
}
#page-tools .tool-settings .settings-rule-group{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-rule-group>.settings-field-label{
  flex:0 0 auto!important;
  width:66px!important;
}
#page-tools .tool-settings .settings-rule-group>.settings-inline{
  flex:1 1 auto!important;
  min-width:0!important;
  justify-content:flex-start!important;
}

/* --- (10) The card has one left edge -------------------------------------
   Rows line up with the heading eyebrow, but the session grid and the status
   box were still reading from the body's own 8px inset. They take the same
   inset so nothing in the card starts where nothing else does.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-group>.backtest-controls,
#page-tools .tool-settings>.tool-body>.backtest-status{
  padding-inline:var(--ui-settings-inset)!important;
}
/* "Right now" reports state; it cannot be changed, so it does not advertise a
   dropdown the way the two editable hours do. */
#page-tools .tool-settings .settings-session-live::after{
  content:none!important;
}

/* --- (11) An "Add ..." row pairs a label with one action -----------------
   `space-between` is right for a label and a value, but it pushed the lone
   "+ New account" button 196px from the label it belongs to. The two add
   rows start their action right after the label instead.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-row:has(#addAccountButton),
#page-tools .tool-settings .settings-row:has(#addAssetButton){
  justify-content:flex-start!important;
  gap:10px!important;
}

/* ==========================================================================
   TOOLS — ONE HEADING CONTRACT FOR EVERY CARD

   Measured before this block (390x844, modern/light/rose), one row per card:

     card        height   padding      title   tag
     appearance    64      9px 12px     15px    --
     backtest      51      9px 12px     15px    hidden below 390
     universe      57     11px 12px     17px    11px
     accounts      57     11px 12px     17px    --
     settings      55     11px 12px     15px    10px
     rules         57     11px 12px     17px    --
     runtime       57     11px 12px     17px    --

   Four different heights and two different title sizes on one page, because
   four separate blocks had each claimed the heading: Appearance, Backtest and
   the settings cards set their own padding and a 15/16px title, which outranked
   the 17px step that `html #page-tools .section-heading h2` already declared.
   Those blocks are gone; this is the only heading geometry in the layer, and it
   deliberately has no breakpoint, so a card cannot be one size on a phone and
   another on a desktop.

   Three values, one relationship: the body is inset 8px, and every row inside
   it takes `--ui-heading-pad-x - 8px`, so row text always lands on the same x
   as the eyebrow above it whatever the inset becomes.
   ========================================================================== */
:root{
  --ui-heading-h:56px;
  --ui-heading-pad-y:10px;
  --ui-heading-pad-x:14px;
}
#page-tools .tool-card>.section-heading,
#page-tools .tools-appearance>.section-heading{
  min-height:var(--ui-heading-h)!important;
  padding-block:var(--ui-heading-pad-y)!important;
  padding-inline:var(--ui-heading-pad-x)!important;
  gap:12px!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
}
#page-tools .tool-card>.section-heading h2,
#page-tools .tools-appearance>.section-heading h2{
  margin:0!important;
  font-size:17px!important;
  line-height:1.15!important;
  font-weight:650!important;
  letter-spacing:-.02em!important;
}
#page-tools .tool-card>.section-heading .eyebrow,
#page-tools .tools-appearance>.section-heading .eyebrow{
  margin:0 0 4px!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.13em!important;
}
/* The tag is content, not geometry: one pill size everywhere so "Fixed" and
   "08:00-17:00 NY" cannot render at two different sizes beside each other. */
#page-tools .tool-card>.section-heading .tool-tag,
#page-tools .tools-appearance>.section-heading .tool-tag{
  flex:0 1 auto!important;
  min-width:0!important;
  height:28px!important;
  min-height:28px!important;
  padding:5px 9px!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  border-radius:999px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* --- (14) Reorder says what it is ----------------------------------------
   `↑` / `↓` were 32px of transparent nothing on the muted colour, so they read
   as decoration rather than as the controls that decide which account catches
   a trade first. They take the project's chip surface, a readable glyph, a
   hover/screen-reader name from `title`/`aria-label`, and a "Move" caption in
   front of the pair so the row explains itself without spending a line.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-rule-move{
  gap:6px!important;
}
#page-tools .tool-settings .settings-rule-move::before{
  content:"Move"!important;
  color:var(--muted)!important;
  font-size:9.5px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}
/* The summary is a full-width sentence under the rule's name now, not a third
   column that wrapped into a tall ragged block beside it. */
#page-tools .tool-settings .settings-rule>.settings-rule-summary{
  flex:none!important;
  width:100%!important;
}

/* --- (15) Per-account performance lives beside its own limits -------------
   The Accounts card showed live balances in one grid and the limits in
   another, so reading a book and changing it were two different places. The
   grid is the performance line for each account (balance, trades used, risk
   left, closed, win rate) and the editor sits directly under it, derived from
   the same trade ledger Home already reads -- no extra request.
   ---------------------------------------------------------------------- */
#page-tools .account-grid>article strong.account-pnl{
  font-size:11.5px!important;
  font-weight:650!important;
  line-height:1.2!important;
  font-variant-numeric:tabular-nums!important;
  text-align:right!important;
  white-space:nowrap!important;
}
#page-tools .account-grid>article strong.account-pnl.positive{color:var(--positive)!important}
#page-tools .account-grid>article strong.account-pnl.negative{color:var(--negative)!important}

/* The 9.5px chip step is declared on `html #page-tools .tool-settings
   .chip-option`, which carries an extra `html` type selector. The reorder
   button is a chip, so it inherited that group's 9.5px muted glyph and my
   unprefixed rule lost on specificity: the arrows stayed unreadable even after
   they gained a surface. Same reach, so the glyph is a glyph and not a chip
   label. */
/* --- (12) Every card that owns data owns its Save ------------------------
   There was one Changes card holding Save and Reset, so adding an asset in the
   Assets card meant scrolling to a different card to commit it, and the only
   status line sat at the bottom of a 2,000px page. Save, Reset and the status
   line now live inside the card whose data they write.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  margin-top:10px!important;
  padding:10px var(--ui-settings-inset) 0!important;
  border-top:var(--ui-border)!important;
}
#page-tools .tool-settings .settings-actions-status{
  flex:1 1 150px!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.35!important;
  color:var(--muted)!important;
  overflow-wrap:anywhere!important;
}
#page-tools .tool-settings .settings-actions-status.loading{color:var(--warning)!important}
#page-tools .tool-settings .settings-actions-status.success{color:var(--positive)!important}
#page-tools .tool-settings .settings-actions-status.error{color:var(--negative)!important}
/* The read-only grid and the editor for the same thing are one card, so the
   editor reads as a labelled second half rather than a second component. */
#page-tools .tool-settings .universe-grid+.settings-group,
#page-tools .tool-settings .account-grid+.settings-group{
  margin-top:10px!important;
  padding-top:10px!important;
  border-top:var(--ui-border)!important;
}
#page-tools .tool-settings .settings-group-head{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:4px 10px!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-group-head>.settings-label{min-width:0!important}

/* --- (13) A routing row is a summary until it is being edited -------------
   Three captioned chip groups per rule measured ~170px each, so four rules
   buried the routing order -- the thing that actually decides trades -- under
   ~680px of chips that only matter while editing. A row now states its own
   contract on one line and opens in place when it is worked on. A row with
   nothing ticked is not blank either: the summary spells out "every strategy /
   every asset group", which is what the prose note used to explain instead.
   ---------------------------------------------------------------------- */
#page-tools .tool-settings .settings-rule-summary{
  min-width:0!important;
  margin:0!important;
  color:var(--muted)!important;
  font-size:11px!important;
  line-height:1.3!important;
  overflow-wrap:anywhere!important;
}
#page-tools .tool-settings .settings-rule>.settings-rule-body{
  display:none!important;
  flex-direction:column!important;
  gap:8px!important;
  min-width:0!important;
}
#page-tools .tool-settings .settings-rule.is-open>.settings-rule-body{display:flex!important}
/* The chips say the same thing as the summary, so it steps aside while open. */
#page-tools .tool-settings .settings-rule.is-open .settings-rule-summary{display:none!important}
/* Three fields on one line at every width: the session is three 32px controls,
   which fit side by side on the narrowest phone this project supports. */
#page-tools .tool-settings .session-controls{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:end!important;
}
#page-tools .tool-settings .session-controls label{gap:4px!important}
#page-tools .tool-settings .session-controls select{
  height:var(--ui-control-h)!important;
  min-height:var(--ui-control-h)!important;
  padding:0 9px!important;
  font-size:11px!important;
  font-weight:650!important;
}

/* ==========================================================================
   TOOLS — READ THE SCREEN, NOT THE IDENTIFIER

   Two defects measured on the running dashboard at 390x844 and 1440x900
   (modern / light / emerald). Each rule replaces a superseded declaration
   rather than adding to it.

   The third defect on this screen -- an account id printed raw and in three
   casings at once (`NY_SESSION` in the performance grid, `ny_session` in the
   limits editor, `SWEEP_4H` in routing) -- is fixed in `app.js`
   (`ACCOUNT_LABELS`), because that is where the accounts are rendered. The raw
   id stays in each row's `title` and `data-rule-account`, so nothing about the
   contract or the routing payload changes.
   ========================================================================== */

/* --- (16) A money field says it holds money -----------------------------
   `type=number` printed `100000`, `20` and `2000` side by side, and the
   summary line underneath printed `₹1,00,000 · 20 trades · ₹2,000 risk`. The
   input cannot be formatted -- a number input rejects any prefix -- so the
   unit goes inside the control instead, on the two money fields only. The
   trade cap stays unadorned because it is a count, and the adornment is a
   pseudo-element, so it is never submitted and never lands in the payload.
   ---------------------------------------------------------------------- */
html #page-tools .tool-settings .settings-field{
  position:relative!important;
}
html #page-tools .tool-settings .settings-field-money::before{
  content:"₹"!important;
  position:absolute!important;
  left:10px!important;
  top:calc(100% - 16px)!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
  color:var(--muted)!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:650!important;
}
html #page-tools .tool-settings .settings-field-money>.settings-input{
  padding-left:23px!important;
}

/* --- (17) The category rail sizes to its own word ------------------------
   `.asset-category` is a fixed `132px minmax(0,1fr)` at desktop and `108px
   minmax(0,1fr)` on a phone, so "Crypto" -- six letters -- spent a third of
   the row on its label and still left its single ticker in half of what was
   left over. The rail now takes its own width and the symbol grid takes the
   rest, so the wide name pays for the wide name.

   `.universe-grid` also declared `repeat(3, ...) / repeat(2, ...)` for
   columns that never existed: `#page-tools .universe-grid` sets
   `display:block!important` later in styles.css, so every category rendered
   full width and the declaration was inert at both widths. It is deleted at
   the source rather than overridden; the container is a stack of rows.

   Letting the rail take its own width fixed the cost and created the
   jitter, because `auto` lets the label choose where the content column
   starts. Measured at 390x844, inside a 366px card: the first ticker began
   at 139 / 94 / 125 / 91 / 84 for Indian Equities / Indices / Commodities /
   Crypto / Forex -- five starts, a 55px swing down one list. The same 55px
   measured at 1440x900 inside the 513px Tools card. Separately,
   `align-items:center` floated the label 62px below its first ticker row on
   Indian Equities (8 lines of tickers) and 18px on Forex; only the
   single-line categories lined up, and only by accident.

   So the rail survives only where there is room for it. At 560px and under
   the category is a single column: the label takes its own row and every
   ticker starts at the card's left edge. Above 560px the rail stays, but it
   is one width for every category rather than `auto`, so the ticker column
   starts in the same place on every row. `minmax(102px, max-content)` is
   102px for all five labels today -- 102px is the measured width of "Indian
   Equities", the longest -- and grows rather than clips if the universe ever
   gains a longer name.

   That reintroduces a fixed rail where the previous pass had `auto`, so the
   trade is worth stating. That pass measured its cost at 390x844: 108px of a
   348px row. There is no rail at that width now, so the cost is only paid
   where there is room -- at 561px the card is 537px and the rail is 19% of
   it, at 1440 the card is 513px and the rail is 20%. Paying a fifth of the
   row for a column that lines up beats paying it and having the content
   start in five different places.
   ---------------------------------------------------------------------- */
html #page-tools .tool-universe .universe-grid>.asset-category{
  grid-template-columns:minmax(102px,max-content) minmax(0,1fr)!important;
  align-items:start!important;
}
html #page-tools .tool-universe .asset-category-label{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
}
@media(max-width:560px){
  html #page-tools .tool-universe .universe-grid>.asset-category{
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:6px!important;
  }
  html #page-tools .tool-universe .asset-category-label{
    justify-self:start!important;
  }
}
/* --- (18) The ticker grid had four columns and rendered two --------------
   `.asset-category-items` is declared in thirteen places, every one of them
   `!important`, and the winner at desktop was
   `#page-tools .tool-universe .asset-category-items { repeat(2, ...) }` --
   which carries no media query. Its `@media(min-width:761px) repeat(4, ...)`
   in the same sheet sits on `#page-tools .asset-category-items`, one class
   less specific, so the media rule lost on specificity rather than on
   order and the escalation to four columns was dead everywhere above
   761px as well as below it.

   Measured before this: 2 columns at 1440x900 and at 390x844 alike. At
   1440 the Tools card is 513px, the ticker track 365px, and each of the two
   columns was 176px wide holding a 14px ticker -- 15 tickers wrapped over
   8 rows and made the category 155px tall to say 15 words.
   ---------------------------------------------------------------------- */
@media(min-width:761px){
  html #page-tools .tool-universe .asset-category-items{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
/* --- (19) The notifications channels are one compact contract -------------
   A channel row was four stacked bands (name + Remove, three equal fields,
   a chip cloud, an Enabled row) and printed the only Telegram chat id in
   clear text. It is now three lines: one head line (name, transport chip,
   Enabled, Remove/Default), one field line whose address is redacted for
   Telegram exactly like a webhook, and the event toggles as a wrapping
   grid -- matching the tint > white > tint contract the other Tools cards
   already follow.
   ---------------------------------------------------------------------- */
html #page-tools .tool-notifications .settings-account{
  gap:7px!important;
}
html #page-tools .tool-notifications .settings-account .settings-type-chip{
  display:inline-block!important;
  margin-left:7px!important;
  padding:2px 7px!important;
  border:var(--border-w) solid var(--line)!important;
  border-radius:999px!important;
  background:var(--surface-2)!important;
  font-size:8.5px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  vertical-align:1px!important;
  color:var(--muted)!important;
}
html #page-tools .tool-notifications .settings-account .settings-default-chip{
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  padding:3px 10px!important;
  border:var(--border-w) solid var(--line)!important;
  border-radius:999px!important;
  background:var(--surface-2)!important;
  font-size:9.5px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
}
html #page-tools .tool-notifications .settings-account.is-default .settings-account-fields{
  grid-template-columns:1fr!important;
}
html #page-tools .tool-notifications .settings-notify-events{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;
  gap:6px!important;
  width:100%!important;
}
html #page-tools .tool-notifications .settings-notify-events .chip-option{
  justify-content:center!important;
  width:100%!important;
  border-radius:var(--radius-xs)!important;
}