/* app.css — invest's own styles on top of shared-ui (tokens.v1.css, base.v1.css).
   Phone first: the base rules are the phone layout; the desktop table layout
   arrives at 768px. Every color, size and face comes from a token. */

/* ---- identifiers ---------------------------------------------------------- */
.sym { font-family: var(--ui-font-mono); font-weight: var(--ui-weight-semibold); font-size: var(--ui-text-base); letter-spacing: 0; }
.quotes small { font-size: var(--ui-text-xs); }

/* ---- page head ------------------------------------------------------------ */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-2) var(--ui-space-6); margin-bottom: var(--ui-space-4); }
.page-head h1 { margin-bottom: var(--ui-space-1); }
.summary { max-width: 64ch; color: var(--ui-ink-muted); }
.refreshed { margin: 0; }
.jump { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: var(--ui-space-5); }
.jump .ui-chip { text-decoration: none; }
.jump .ui-chip:hover { color: var(--ui-accent); background: var(--ui-accent-soft); }
.signout { display: contents; }
.theme-toggle { padding: 0 var(--ui-space-2); }

/* ---- the meter: where today's price sits in its own history --------------- */
.meter { position: relative; height: 10px; width: 100%; border-radius: var(--ui-radius-pill); background: var(--ui-line); overflow: visible; }
.meter > i, .meter > b { position: absolute; top: 0; bottom: 0; display: block; }
.meter-buy  { left: 0;  min-width: 2px; background: var(--ui-ok-soft);   border-radius: var(--ui-radius-pill) 0 0 var(--ui-radius-pill); }
.meter-sell { right: 0; min-width: 2px; background: var(--ui-warn-soft); border-radius: 0 var(--ui-radius-pill) var(--ui-radius-pill) 0; }
.meter-tick { width: 1px; background: var(--ui-ink-faint); opacity: 0.6; }
.meter-mark { width: 4px; margin-left: -2px; top: -3px; bottom: -3px; border-radius: 2px; background: var(--ui-accent); outline: 2px solid var(--ui-surface); }
.meter.is-buy  .meter-mark { background: var(--ui-ok); }
.meter.is-sell .meter-mark { background: var(--ui-warn); }

/* ---- signals strip -------------------------------------------------------- */
.signals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ui-space-3); margin-bottom: var(--ui-space-8); }
.signal-card { display: flex; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-3) var(--ui-space-4); border: var(--ui-border-w) solid var(--ui-line); border-left-width: 3px; border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: inherit; text-decoration: none; }
.signal-card.is-buy  { border-left-color: var(--ui-ok); }
.signal-card.is-sell { border-left-color: var(--ui-warn); }
.signal-card:hover { border-color: var(--ui-line-strong); }
.signal-card:hover.is-buy  { border-left-color: var(--ui-ok); }
.signal-card:hover.is-sell { border-left-color: var(--ui-warn); }
.signal-top { display: flex; justify-content: space-between; align-items: center; }
.signal-price { font-size: var(--ui-text-xl); font-weight: var(--ui-weight-semibold); line-height: var(--ui-leading-tight); }

/* ---- groups --------------------------------------------------------------- */
.group { margin-top: var(--ui-space-8); scroll-margin-top: 64px; }
.group:first-child { margin-top: 0; }
.group-head { display: flex; align-items: baseline; gap: var(--ui-space-4); flex-wrap: wrap; margin-bottom: var(--ui-space-3); }
.group-head h2 { margin: 0; }
.group-head p { margin: 0; }

/* ---- quotes table, phone: each row is a small card ------------------------ */
.quotes { border-top: var(--ui-border-w) solid var(--ui-line); }
.quotes thead { display: none; }
.quotes tbody, .quotes tr.quote, .quotes tr.quote > td { display: block; }
.quotes tr.quote { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas:
    "symbol symbol price"
    "meter  meter  meter"
    "buy    sell   integral"
    "action action action";
    gap: var(--ui-space-1) var(--ui-space-4); padding: var(--ui-space-3) 0; border-bottom: var(--ui-border-w) solid var(--ui-line); cursor: pointer; }
.quotes tr.quote > td { padding: 0; border: 0; vertical-align: middle; }
.quotes tbody tr.quote:hover > td { background: transparent; }
.quotes tr.quote:hover { background: var(--ui-bg); }
.quotes tr.quote.is-open { background: var(--ui-accent-soft); }
.quotes .c-symbol { grid-area: symbol; }
.quotes .c-price { grid-area: price; text-align: right; font-weight: var(--ui-weight-semibold); }
.quotes .c-meter { grid-area: meter; padding-top: var(--ui-space-1) !important; }
.quotes .c-integral { grid-area: integral; text-align: right; }
.quotes .c-buy { grid-area: buy; }
.quotes .c-sell { grid-area: sell; }
.quotes tr.quote .c-buy, .quotes tr.quote .c-sell { font-size: var(--ui-text-sm); text-align: left; white-space: nowrap; }
.quotes .c-buy::before { content: "buy "; color: var(--ui-ink-muted); }
.quotes .c-sell::before { content: "sell "; color: var(--ui-ink-muted); }
.quotes .c-action { grid-area: action; font-size: var(--ui-text-sm); color: var(--ui-ink-muted); }
.quotes .c-action:empty { display: none; }
.quotes .c-change, .quotes .c-spark, .quotes .c-time { display: none !important; }

.row-toggle { display: inline-flex; align-items: center; gap: var(--ui-space-2); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.row-toggle .ui-chip { font-size: var(--ui-text-xs); padding: 0 var(--ui-space-2); }

/* ---- detail row with the chart -------------------------------------------- */
tr.detail > td { padding: 0 !important; border-bottom: var(--ui-border-w) solid var(--ui-line); display: block; }
.quotes tbody tr.detail:hover > td { background: transparent; }
.detail-body { padding: var(--ui-space-3) 0 var(--ui-space-4); }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
.detail-title { display: flex; align-items: baseline; gap: var(--ui-space-3); }
.range { display: inline-flex; }
.range .ui-btn { border-radius: 0; margin-left: -1px; }
.range .ui-btn:first-child { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); margin-left: 0; }
.range .ui-btn:last-child { border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.range .ui-btn[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-accent); position: relative; z-index: 1; }
.chart { position: relative; min-height: 240px; }
.chart[aria-busy="true"]::after { content: "Loading…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-ink-faint); font-size: var(--ui-text-sm); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--ui-font-sans); font-size: var(--ui-text-xs); }
.chart .grid line { stroke: var(--ui-chart-grid); }
.chart .axis text { fill: var(--ui-chart-ink-muted); }
.chart .axis line { stroke: var(--ui-chart-axis); }
.chart .price-line { fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .integral-line { fill: none; stroke: var(--ui-chart-ink-muted); stroke-width: 1.5; stroke-linejoin: round; }
.chart .zone-buy  { fill: var(--ui-ok-soft); }
.chart .zone-sell { fill: var(--ui-warn-soft); }
.chart .target-buy  { stroke: var(--ui-ok);   stroke-width: 1; stroke-dasharray: 4 4; }
.chart .target-sell { stroke: var(--ui-warn); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .target-label-buy  { fill: var(--ui-ok);   font-weight: var(--ui-weight-medium); }
.chart .target-label-sell { fill: var(--ui-warn); font-weight: var(--ui-weight-medium); }
.chart .panel-label { fill: var(--ui-chart-ink-muted); font-weight: var(--ui-weight-medium); }
.chart .crosshair line { stroke: var(--ui-line-strong); stroke-dasharray: 2 3; }
.chart .crosshair circle { fill: var(--ui-surface-raised); stroke-width: 2; }
.chart .crosshair .dot-price { stroke: var(--ui-accent); }
.chart .crosshair .dot-integral { stroke: var(--ui-chart-ink-muted); }
.chart .hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.chart-tip { position: absolute; top: 0; left: 0; pointer-events: none; transform: translate(-50%, 0); padding: var(--ui-space-1) var(--ui-space-2); border: var(--ui-border-w) solid var(--ui-line-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface-raised); box-shadow: var(--ui-shadow-pop); font-size: var(--ui-text-xs); line-height: 1.4; white-space: nowrap; color: var(--ui-ink); }
.chart-tip b { font-weight: var(--ui-weight-semibold); }
.chart-tip .tip-date { color: var(--ui-ink-muted); }
.chart-empty { padding: var(--ui-space-6); text-align: center; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }

/* ---- sparklines ----------------------------------------------------------- */
.spark { width: 100px; height: 24px; }
.spark polyline { fill: none; stroke: var(--ui-ink-faint); stroke-width: 1.25; stroke-linejoin: round; }
.quote.is-buy .spark polyline  { stroke: var(--ui-ok); }
.quote.is-sell .spark polyline { stroke: var(--ui-warn); }

/* ---- symbols admin -------------------------------------------------------- */
.symbols thead { display: none; }
.symbols tbody, .symbols tr, .symbols td { display: block; }
.symbols tr { display: grid; grid-template-columns: auto auto auto 1fr auto; grid-template-areas:
    "symbol  symbol  source  source  edit"
    "cmc     cmc     cmc     cmc     edit"
    "watch   buy     sell    sell    sell"
    "buyint  sellint sellint sellint sellint"
    "history history history history history";
    gap: var(--ui-space-1) var(--ui-space-3); min-width: 0; padding: var(--ui-space-3) 0; border-bottom: var(--ui-border-w) solid var(--ui-line); }
.symbols td { padding: 0 !important; border: 0 !important; }
.symbols .s-symbol { grid-area: symbol; }
.symbols .s-source { grid-area: source; color: var(--ui-ink-muted); align-self: baseline; }
.symbols .s-cmc { grid-area: cmc; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.symbols .s-cmc:empty { display: none; }
.symbols .s-flag, .symbols .s-int { font-size: var(--ui-text-sm); white-space: nowrap; }
.symbols .s-history { white-space: normal; }
.symbols .sym { overflow-wrap: anywhere; }
.symbols .s-flag::before, .symbols .s-int::before { content: attr(data-label) ": "; color: var(--ui-ink-muted); }
.symbols [data-label="Watching"] { grid-area: watch; }
.symbols [data-label="Buy alerts"] { grid-area: buy; }
.symbols [data-label="Sell alerts"] { grid-area: sell; }
.symbols td[data-label="Buy at"] { grid-area: buyint; text-align: left; }
.symbols td[data-label="Sell at"] { grid-area: sellint; text-align: left; }
.symbols .s-history { grid-area: history; font-size: var(--ui-text-sm); }
.symbols .s-edit { grid-area: edit; align-self: start; }
.symbols tr.is-unwatched .sym, .symbols tr.is-unwatched .s-source { color: var(--ui-ink-faint); }
.symbols tr:target { background: var(--ui-accent-soft); }

/* ---- edit form ------------------------------------------------------------ */
.edit { max-width: 640px; }
.edit h1 { margin-bottom: var(--ui-space-4); }
.edit-form { display: flex; flex-direction: column; gap: var(--ui-space-5); padding: var(--ui-space-5); }
.edit-grid { display: grid; grid-template-columns: 1fr; gap: var(--ui-space-4); }
.edit-flags { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ui-space-2); }
.edit-flags legend { padding: 0; margin-bottom: var(--ui-space-2); }
.edit-actions { margin-top: var(--ui-space-2); }

/* ---- login ---------------------------------------------------------------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--ui-space-6) var(--ui-gutter); }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--ui-space-4); padding: var(--ui-space-6); }
.login-card h1 { font-size: var(--ui-text-xl); }
.login-card p { margin-top: calc(-1 * var(--ui-space-2)); font-size: var(--ui-text-sm); }
.login-error { padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-sm); background: var(--ui-bad-soft); color: var(--ui-bad); font-size: var(--ui-text-sm); }
.login-back { align-self: center; }

/* ---- desktop: dense tables ------------------------------------------------ */
@media (min-width: 768px) {
    .quotes thead { display: table-header-group; }
    .quotes tbody { display: table-row-group; }
    .quotes tr.quote { display: table-row; padding: 0; border: 0; }
    .quotes tr.quote > td { display: table-cell; padding: var(--ui-space-2) var(--ui-space-2); border-bottom: var(--ui-border-w) solid var(--ui-line); }
    .quotes tr.quote.is-open > td { background: var(--ui-accent-soft); }
    .quotes tbody tr.quote:hover > td { background: var(--ui-bg); }
    .quotes tr.quote.is-open:hover > td { background: var(--ui-accent-soft); }
    .quotes .c-change, .quotes .c-spark, .quotes .c-time { display: table-cell !important; }
    .quotes tr.quote .c-buy, .quotes tr.quote .c-sell { display: table-cell; font-size: var(--ui-text-sm); text-align: right; }
    .quotes .c-buy::before, .quotes .c-sell::before { content: none; }
    .quotes .c-action:empty { display: table-cell; }
    .quotes .c-price { font-weight: var(--ui-weight-regular); }
    /* the meter column absorbs the slack; every other column hugs its content */
    .quotes tr.quote > td, .quotes th { white-space: nowrap; }
    .quotes .c-meter { width: 100%; min-width: 160px; padding-top: var(--ui-space-2) !important; }
    .quotes .c-symbol { min-width: 7em; }
    .quotes .c-integral { padding-left: var(--ui-space-3); }
    .quotes .c-buy, .quotes .c-sell { padding-left: var(--ui-space-4); }
    .quotes .c-spark { width: 108px; padding-left: var(--ui-space-4); }
    .quotes thead th { top: 48px; z-index: 2; }
    .quotes tr.quote { scroll-margin-top: 60px; }
    .quotes .c-time { white-space: nowrap; font-size: var(--ui-text-sm); }
    .quotes .c-action { white-space: nowrap; font-size: var(--ui-text-sm); }
    .quotes th.c-symbol { padding-left: var(--ui-space-2); }
    .quotes th a { color: inherit; }
    .quotes th a:hover { color: var(--ui-accent); }
    .quotes tr.quote > td.c-symbol { padding-left: var(--ui-space-2); }
    tr.detail > td { display: table-cell; padding: 0 var(--ui-space-2) !important; }
    .detail-body { padding: var(--ui-space-4) 0 var(--ui-space-5); }
    .chart { min-height: 300px; }
    .meter { height: 8px; }
    .meter-mark { top: -3px; bottom: -3px; }

    .symbols thead { display: table-header-group; }
    .symbols tbody { display: table-row-group; }
    .symbols tr { display: table-row; }
    .symbols td { display: table-cell; padding: var(--ui-space-1) var(--ui-space-2) !important; border-bottom: var(--ui-border-w) solid var(--ui-line) !important; }
    .symbols .s-flag::before, .symbols .s-int::before { content: none; }
    .symbols .s-int, .symbols td[data-label="Buy at"], .symbols td[data-label="Sell at"] { text-align: right; }
    .symbols .s-cmc:empty { display: table-cell; }
    .symbols .s-history { white-space: nowrap; }
    .symbols .s-edit { text-align: right; }

    .edit-grid { grid-template-columns: 1fr 1fr; }
    .edit-wide { grid-column: 1 / -1; }
}