/* Page layout: top bar, dashboard grid, header/KPI cards, chart + indicators, dev tools.
 * Breakpoints (no CSS variables in media queries): 1024, 768 (tablet), 560 (phone); the chart and its
 * Indicators card span the whole row at every width. Every grid track uses minmax(0, ...) so a wide child never widens the page
 * (CLAUDE.md "CSS Grid min-content" gotcha). */

.skip-link {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-xxl)); z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-weight: var(--fw-label-lg);
}
.skip-link:focus { top: var(--space-sm); text-decoration: none; }


/* ===================== Top app bar ===================== */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  background: var(--bg);
}
.topbar__inner {
  display: flex; align-items: center; gap: var(--space-md);
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-sm) var(--page-pad);
  min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--primary); }
.brand-name { font-size: var(--fs-headline-sm); font-weight: var(--fw-display-sm); letter-spacing: -0.01em; }
.topbar__search {
  display: flex; align-items: center; gap: var(--space-sm);
  flex: 1 1 auto; min-width: 0; max-width: 640px; margin: 0 auto;
}
.topbar__actions { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; }
.account-btn { width: var(--control-height); height: var(--control-height); }

.asset-type-toggle { flex-shrink: 0; }
.symbol-selector-container { position: relative; flex: 1 1 auto; min-width: 0; }
#custom-symbol-input { text-transform: uppercase; padding-right: var(--space-xxl); }
#custom-symbol-input::placeholder { text-transform: none; }
.clear-button { position: absolute; right: var(--space-xxs); width: 36px; height: 36px; color: var(--text-secondary); }
.clear-button svg { width: 18px; height: 18px; }
#symbol-error {
  display: none; position: absolute; left: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-popover);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-field);
  background: var(--surface); color: var(--error); font-size: var(--fs-body-sm);
  border: 1px solid var(--error);
}

/* Chart tabs: the top bar's second row (ui/tab-strip.js). It is inside the sticky header, so it is always
   reachable and ui/topbar.js counts it in --topbar-offset. The + stays put while the tabs scroll. */
.topbar__tabs {
  display: flex; align-items: center; gap: var(--space-sm);
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--page-pad) var(--space-sm);
}
.chart-tabs {
  display: flex; align-items: center; gap: var(--space-xs); flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  /* room for the focus ring inside the scroller (see .chip-row--scroll) */
  padding: var(--space-xs); margin: calc(-1 * var(--space-xs));
}
.chart-tabs::-webkit-scrollbar { display: none; }
.chart-tabs__new { width: 36px; height: 36px; position: relative; }
.chart-tabs__new.is-locked::after {
  content: "\1F512"; position: absolute; top: -2px; right: -2px; font-size: 9px; line-height: 1; pointer-events: none;
}

.topbar-menu { position: relative; }
.topbar-menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-popover); }

/* ===================== Page shell & grid ===================== */
.app-shell {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-sm) var(--page-pad) var(--space-xl);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter);
}
.app-shell > * { grid-column: 1 / -1; }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }

/* Price card + 4 range KPIs (Rod, 2026-10-14): one row from 1024 px (price card sized to its content, KPIs share the rest); below that a
   swipeable row where the next card peeks in. Card widths use container units of the row itself. */
.dash-summary { display: grid; grid-template-columns: fit-content(36%) minmax(0, 1fr); gap: var(--gutter); min-width: 0; }
.dash-summary:focus-visible { outline: var(--focus-ring-width) solid var(--primary); outline-offset: var(--focus-ring-gap); border-radius: var(--radius-card); }
.dash-header { display: flex; min-width: 0; }
.dash-header > .price-card { flex: 1 1 auto; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); min-width: 0; }

.price-card { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.price-card__title { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; flex-wrap: wrap; }
.price-symbol {
  font-size: var(--fs-title-md); font-weight: var(--fw-title-md); color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.current-price {
  font-size: var(--fs-display-sm); font-weight: var(--fw-display-sm); line-height: 1.15; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; min-height: 1.15em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.price-change-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-sm); min-height: 1.45em; }
.price-change { font-size: var(--fs-body-md); }
.price-change-ref { font-size: var(--fs-body-sm); color: var(--text-secondary); white-space: nowrap; }
.price-card-meta { font-size: var(--fs-body-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-card-meta span { color: var(--text); font-variant-numeric: tabular-nums; }
.dash-kpis .kpi { justify-content: center; }
/* Loading: the value slots keep their final size and show a shimmer instead of text. */
.dash-header.is-loading .current-price,
.dash-kpis.is-loading .kpi__value,
.dash-kpis.is-loading .kpi__meta {
  color: transparent; border-radius: var(--radius-field); width: 70%;
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%);
  background-size: 400% 100%; animation: ts-shimmer 1.6s linear infinite;
}
.dash-kpis.is-loading .kpi__meta { width: 50%; }
.dash-kpis.is-loading .kpi__value svg { visibility: hidden; }

.cross-pair-trigger-btn { flex-shrink: 0; }

/* ===================== Chart card head: timeframe + chart type, then Live + status ===================== */
.chart-card__timeframes { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.chart-type-select { width: auto; min-width: 152px; flex: 0 0 auto; margin-left: auto; }
/* The native timeframe <select> stays in the DOM as the source of truth for dashboard.js and
   plan.js; the visible control is the pill radiogroup (static/ui/timeframe-pills.js). */
.timeframe-select-native {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden;
}

/* ===================== Workspace: chart + indicators ===================== */
/* At every width the indicators card hangs off the bottom of the chart card as one surface, so the
   indicators read as part of the chart they are drawn on and the chart gets the whole row (a side
   column left a blank strip under it on desktop). */
.workspace { row-gap: 0; }
.workspace > .chart-card, .workspace > .indicators-card { grid-column: 1 / -1; }
.workspace > .chart-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: var(--space-md); }
.indicators-card { display: flex; flex-direction: column; gap: var(--space-md); }
.workspace > .indicators-card {
  align-self: stretch; padding-top: var(--space-md);
  border-top: 1px solid var(--outline-variant); border-top-left-radius: 0; border-top-right-radius: 0;
}
.indicators-panel { display: flex; flex-direction: column; gap: var(--space-sm); }
.indicators-header { margin-bottom: 0; }
.indicators-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.indicators-list:empty::before {
  content: "No indicators on the chart. Tap Add, or apply an indicator set.";
  color: var(--text-secondary); font-size: var(--fs-body-sm);
}
.indicator-item {
  display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 100%;
  padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-md);
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg);
}
.indicator-item .indicator-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A chip's name opens that indicator's settings (indicator-ui-enhanced.js _wireChipEditing). */
.indicator-chip-edit {
  padding: var(--space-xxs) 0; border: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer; text-align: left;
}
.indicator-chip-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.remove-indicator-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary); font-size: var(--fs-body-md); line-height: 1; cursor: pointer;
}
.remove-indicator-btn:hover { background: var(--hover-wash); color: var(--error); }

/* Quick indicator sets (static/quick-indicators-bar.js): a titled chip group. */
.quick-indicators-bar { display: flex; flex-direction: column; }
.quick-indicators-bar .quick-indicators-content { display: flex; flex-direction: column; gap: var(--space-sm); }
.quick-indicators-bar .quick-indicators-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.quick-indicators-bar .title-text { font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm); color: var(--text); }
.quick-indicators-bar .toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.quick-indicators-bar .toggle-btn:hover { background: var(--hover-wash); color: var(--text); }
.quick-indicators-bar .toggle-btn svg { transition: transform var(--motion-normal) var(--ease-emphasized); }
.quick-indicators-bar.collapsed .toggle-btn svg { transform: rotate(180deg); }
.quick-indicators-bar.collapsed .quick-indicators-sets { display: none; }
.quick-indicators-bar .quick-indicators-sets { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.quick-indicators-bar .indicator-set-chip {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.quick-indicators-bar .indicator-set-chip:hover { color: var(--text); background: var(--hover-wash); }
.quick-indicators-bar .indicator-set-chip.active { background: var(--neutral-pill); color: var(--on-neutral-pill); border-color: transparent; }
.quick-indicators-bar .set-indicator-count {
  min-width: 20px; padding: 0 var(--space-xs); border-radius: var(--radius-pill);
  background: var(--hover-wash); font-size: var(--fs-label-sm); text-align: center;
}
.quick-indicators-bar .indicator-set-chip.active .set-indicator-count { background: var(--disabled-bg); }
.quick-indicators-bar .bar-buttons { display: flex; gap: var(--space-xs); width: 100%; }
.quick-indicators-bar .new-set-btn, .quick-indicators-bar .manage-sets-btn {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px;
  padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--primary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.quick-indicators-bar .new-set-btn:hover, .quick-indicators-bar .manage-sets-btn:hover { background: var(--hover-wash); }
.quick-indicators-bar .new-set-btn svg, .quick-indicators-bar .manage-sets-btn svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.quick-indicators-bar .loading-placeholder, .quick-indicators-bar .error-message { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.quick-indicators-bar .error-message { color: var(--error); }

/* ===================== Developer tools ===================== */
.devtools { display: flex; flex-direction: column; gap: var(--space-sm); }
.debug-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: var(--touch-target); padding: var(--space-xs) var(--space-md);
  cursor: pointer; user-select: none; color: var(--text);
}
/* Hover-capable pointers only: on touch the hover sticks after a tap and leaves a grey box. */
@media (hover: hover) { .debug-header:hover { background: var(--surface-hover); } }
.debug-header-toggle { background: none; border: 0; padding: var(--space-xs) 0; color: inherit; cursor: pointer; text-align: left; }
.debug-header-title { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm); white-space: nowrap; }
.debug-header-title > span { color: var(--text-secondary); font-size: var(--fs-label-sm); }
.debug-header-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.debug-content {
  height: 240px; overflow-y: auto; padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono); font-size: var(--fs-body-sm); line-height: 1.5;
  border-top: 1px solid var(--outline-variant);
}
.cache-tools-content { padding: var(--space-sm) var(--space-md) var(--space-md); border-top: 1px solid var(--outline-variant); }
.cache-tools-hint { margin-bottom: var(--space-sm); color: var(--text-secondary); font-size: var(--fs-body-sm); }

.app-footer { text-align: center; color: var(--text-secondary); font-size: var(--fs-body-sm); padding-top: var(--space-sm); }
/* A link inside a sentence needs more than colour to stand out (axe link-in-text-block). */
.app-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.app-footer a:hover { color: var(--text); }

/* ===================== Responsive ===================== */
@media (max-width: 1023px) {
  .topbar__search { max-width: none; }
  .dash-summary {
    display: flex; container-type: inline-size;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .dash-summary::-webkit-scrollbar { display: none; }
  .dash-header, .dash-kpis { display: flex; gap: inherit; flex: 0 0 auto; }
  .dash-summary .price-card, .dash-summary .kpi { scroll-snap-align: start; flex: 0 0 auto; }
  /* The price card is as wide as its content (Rod, 2026-10-14: a fixed share left a big empty
     right half), capped so a long symbol or price still lets the next card peek in. */
  .dash-summary .price-card { width: max-content; min-width: 38cqi; max-width: 86cqi; }
  .dash-summary .kpi { width: 38cqi; }
}

@media (max-width: 767px) {
  :root {
    --page-pad: var(--space-md);
    --toolbar-btn-pad-v: 11px;
    --toolbar-btn-pad-h: 13px;
  }
  /* One-row top bar (UX review 2026-10-14; two rows took ~190 px): logo mark, search, ÷, menu,
     account. Crypto/Stocks lives in the search dropdown here (dashboard.js setupAssetTypePlacement). */
  .topbar__inner { gap: var(--space-sm); padding-top: var(--space-sm); padding-bottom: var(--space-sm); min-height: 0; }
  .topbar__search { flex: 1 1 auto; min-width: 0; margin: 0; }
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topbar__actions { gap: 0; }
  .dash-summary .price-card { min-width: 46cqi; }
  .dash-summary .kpi { width: 46cqi; }
  .current-price { font-size: var(--fs-display-sm); }
  .chart-type-select { min-width: 0; }
}

@media (max-width: 559px) {
  .dash-grid, .dash-summary { gap: var(--space-sm); }
  .workspace { row-gap: 0; }
  .app-shell { gap: var(--space-sm); }
  .card:not(.card--flush) { padding: var(--space-md); }
  .dash-kpis .kpi { padding: var(--space-sm) var(--space-md); }
  .kpi__value { font-size: var(--fs-title-md); }
  .asset-type-toggle .chip { padding: var(--space-xs) var(--space-sm); }
  .range-pill { min-width: 34px; padding: var(--space-xs) var(--space-xs); }
  .range-pills { justify-content: space-between; flex: 1 1 auto; }
  .debug-header { flex-wrap: wrap; padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
}

/* Short landscape screens (a phone on its side, the Hermes iframe at 844x390): the sticky header has two rows
   now (chart tabs), so both are made compact or the chart would no longer fit under them. */
@media (orientation: landscape) and (max-height: 560px) {
  .topbar__inner { min-height: 0; padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .topbar__tabs { padding-bottom: var(--space-xs); }
  .chart-tab { min-height: 28px; padding-top: 0; padding-bottom: 0; }
  .chart-tabs__new { width: 28px; height: 28px; }
}