/* Finance: market overview cards, movers, watchlist/holdings table, search results, alerts dialog; stock page hero, chart, figures, news. */
#body { display: flex; flex-direction: column; gap: 16px }
.tab-panel { display: flex; flex-direction: column; gap: 16px }
/* sources: header button with a summary dot, dialog with one row per source; --success is the theme's extended colour */
.src-btn { position: relative } .src-btn .dot { position: absolute; right: 7px; top: 7px; width: 9px; height: 9px; border: 2px solid var(--surface); box-sizing: content-box }
.src { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--outline-variant) } .src:first-child { border-top: 0 }
.src-text { display: flex; flex-direction: column; flex: 1 } .src-text b { font-weight: 500 } .src .switch { margin-left: auto }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--outline-variant); flex: none } .dot.on { background: var(--success) } .dot.some { background: var(--tertiary) }
.up { color: var(--primary) } .down { color: var(--error) }
.sect { display: flex; align-items: center; gap: 8px; margin-top: 8px } .sect .ms { color: var(--primary); font-size: 22px }
.empty { padding: 16px 20px } .foot { font-size: 12px } .foot .ms { font-size: 16px; vertical-align: -4px; margin-right: 4px }
code { padding: 1px 6px; border-radius: 4px; background: var(--surface-container-highest) }
.setup { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px } .setup .title { display: flex; align-items: center; gap: 10px } .setup .title .ms { color: var(--primary) }

/* market overview */
.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.ov { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s } .ov:hover { box-shadow: var(--e1) }
.ov .note { opacity: .7 }
.ov-price { display: flex; align-items: baseline; gap: 8px } .ov-price b { font-size: 20px }
.ov-spark .spark { width: 100%; height: 32px }
.spark polyline { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke: var(--primary) } .spark.down polyline { stroke: var(--error) }

/* movers */
.movers { padding: 16px 20px 12px } .movers .title { margin-bottom: 8px }
.mover-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px }
.mover { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 8px } .mover:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent) }
.mover-text { flex: 1; min-width: 0; display: flex; flex-direction: column } .mover-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.ins-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px }
.outliers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px }
.outlier-col h4 { display: flex; align-items: center; gap: 6px; margin: 6px 4px 2px } .outlier-col h4 .ms { font-size: 18px }
.mover-price { font-size: 12px; margin-right: 10px; text-align: right } .mover-price small { display: block; font-size: 11px } /* P/E under the price (Market outliers) */
@media (max-width: 700px) { .outliers { grid-template-columns: 1fr } }

/* upcoming earnings: date block | asset | when */
/* one grid for the whole list (rows are subgrids), so every row's columns line up with the widest entry */
.earn-list { display: grid; grid-template-columns: 44px 1fr auto auto; column-gap: 14px }
.earn-group { grid-column: 1 / -1; margin: 10px 4px 2px } .earn-group:first-child { margin-top: 0 }
.earn { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 14px; align-items: center; padding: 8px 4px; border-radius: 8px } .earn:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent) }
.earn-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; border-radius: 12px; background: var(--surface-container-highest); color: var(--primary); line-height: 1.1 }
.earn-date small { font-size: 10px; text-transform: uppercase; letter-spacing: .5px } .earn-date b { font-size: 17px }
.earn-trend { display: flex; align-items: center; justify-content: flex-end; gap: 8px } .earn-trend .spark { width: 64px; height: 24px; flex: none } .earn-trend small { min-width: 52px; text-align: right; font-size: 12px }
.earn-pay { font-size: 12px; white-space: nowrap; padding-right: 12px } /* dividends: payment date, left-aligned so the dates line up */
.earn-when { display: flex; flex-direction: column; align-items: flex-end; text-align: right } .earn-when > span { font-weight: 500 }
.tag { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; background: var(--tertiary-container); color: var(--on-tertiary-container); vertical-align: 1px }
@media (max-width: 700px) { .earn-list { display: flex; flex-direction: column } .earn { grid-template-columns: 44px 1fr auto } .earn-trend small { min-width: 0 } .earn-pay { width: 80px; padding-right: 0 } .earn-when { grid-column: 2 / -1; align-items: flex-start; text-align: left; flex-direction: row; gap: 6px; flex-wrap: wrap } }

/* watchlist + holdings table */
.list { padding: 4px 0 }
.f-row { display: grid; grid-template-columns: minmax(160px, 2fr) 130px 1fr 1fr 1.4fr; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--outline-variant) }
.f-row:has([data-unwatch]) { grid-template-columns: minmax(160px, 2fr) 130px 1fr 1fr 1.4fr 32px }
.f-head { border-top: 0; padding-top: 0; padding-bottom: 0 }
/* sortable headers: a text button per column with the sort arrow; on phones a select instead */
.f-head > span:first-child .sort-btn { margin-left: -4px }
/* market subheaders inside the table (M3 list subheader) */
.f-group { display: flex; align-items: center; gap: 16px; padding: 12px 20px 10px; background: var(--surface-container-high); border-top: 1px solid var(--outline-variant); border-left: 3px solid var(--primary) }
.f-group + .f-row { border-top: 0 }
.f-group-name { flex: 1; display: flex; align-items: baseline; gap: 10px } .f-group-name b { font-size: 15px; font-weight: 500; color: var(--primary) } .f-group-name small { font-size: 12px }
/* tabs with icons and counts */
.tabs a { gap: 8px } .tabs a .ms { font-size: 20px }
.tabs .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 500; background: var(--surface-container-highest); color: var(--on-surface-variant) }
.tabs a.on .count { background: var(--secondary-container); color: var(--on-secondary-container) }
/* Upcoming card: the shared secondary tabs (core/base.css) run edge to edge at its top */
.up-card .sec-tabs { margin: -16px -20px 0; padding: 0 8px }
.up-note { margin: 10px 4px 6px; font-size: 12px }
@media (max-width: 700px) { .sec-tab { padding: 0 12px; text-transform: capitalize } .sec-tab .ms, .up-word { display: none } }
.f-row > :not(.f-name) { text-align: right; justify-content: flex-end }
.f-head > span:first-child { text-align: left }
.f-name { display: flex; flex-direction: column; min-width: 0 } .f-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .f-name:hover b { color: var(--primary); text-decoration: underline }
.trend { display: flex; align-items: center; gap: 8px } .trend small { font-size: 12px; min-width: 44px; text-align: right }
.trend .spark { width: 84px; height: 28px; flex: none }

/* search */
.search { display: flex; flex-direction: column; gap: 8px; margin-top: -8px }
.search-bar { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px 0 16px; border-radius: 28px; background: var(--surface-container-high) }
.search-bar .field { flex: 1; border: 0; padding: 0; height: 100% } .search-bar .field:focus { border: 0; padding: 0 }
.results { display: flex; flex-direction: column; padding: 4px 0 }
.result { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 20px } .result + .result { border-top: 1px solid var(--outline-variant) }
.result-text { flex: 1; min-width: 0; display: flex; flex-direction: column } .result-text:hover b { color: var(--primary) }

/* alerts dialog */
.dialog .row { display: flex; align-items: center; gap: 10px; margin: 12px 0 16px }

#move { width: 90px }
.rule { display: grid; grid-template-columns: 1fr 1.3fr 110px 32px; gap: 8px; align-items: center; margin: 8px 0 }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { height: 32px; padding: 0 16px; border: 1px solid var(--outline); border-radius: 8px; background: transparent; cursor: pointer; font-weight: 500 }
.chip.on { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent }

/* stock page */
.logo-img { object-fit: contain; padding: 8px; background: #fff }
.hero { padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 12px }
.hero-main { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap }
.hero-price { font-size: 40px; line-height: 48px }
.hero-chg { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 500 } .hero-chg .ms { font-size: 20px }
.hero-note { width: 100%; color: var(--on-surface-variant) }
.chart svg { width: 100%; height: auto; display: block; font-size: 11px }
.chart .area { fill: var(--primary); opacity: .1 } .chart .line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round }
.chart .down .area { fill: var(--error) } .chart .down .line { stroke: var(--error) } .chart .down .end { fill: var(--error) }
.chart .grid { stroke: var(--outline-variant) } .chart .axis { fill: var(--on-surface-variant) }
.chart .mark { stroke: var(--surface-container-low); stroke-width: 2 } .chart .mark.buy { fill: var(--tertiary) } .chart .mark.sell { fill: var(--on-surface) }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12px; color: var(--on-surface-variant) } .chart-legend span { display: inline-flex; align-items: center; gap: 6px }
.chart-legend .mk { width: 10px; height: 10px; border-radius: 50%; display: inline-block } .chart-legend .mk.buy { background: var(--tertiary) } .chart-legend .mk.sell { background: var(--on-surface) }
.chart .end { fill: var(--primary); font-weight: 500; font-size: 12px } .chart .cross { stroke: var(--on-surface); stroke-dasharray: 3 3; opacity: .6 }
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px }
.fig b.up { color: var(--primary) } .fig b.down { color: var(--error) }
.about-text { margin: 2px 0 4px; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden } .about-text.open { display: block }
.about .btn { margin-left: -12px } .about-meta { font-size: 12px; margin-top: 4px }

/* research cards */
.research { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } .research .fig-card:last-child:nth-child(odd) { grid-column: 1 / -1 }
.fig-card-head small { margin-left: auto; text-align: right }
.rbody { padding: 12px 20px 14px; border-top: 1px solid var(--outline-variant) } .r-next { margin: 2px 0 8px }
.rtable small { font-size: 12px } /* research tables are .dt (core/base.css) */
.rbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 6px 0 8px } .rbar i { display: block }
.b0 { background: var(--primary) } .b1 { background: color-mix(in srgb, var(--primary) 55%, transparent) } .b2 { background: var(--outline-variant) } .b3 { background: color-mix(in srgb, var(--error) 55%, transparent) } .b4 { background: var(--error) }
.rlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--on-surface-variant) } .rlegend span { display: inline-flex; align-items: center; gap: 5px } .rlegend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block }
@media (max-width: 900px) { .research { grid-template-columns: 1fr } .research .fig-card:last-child:nth-child(odd) { grid-column: auto } .rtable th:nth-child(5), .rtable td:nth-child(5) { display: none } }

/* figure groups: one card per group with a header row; cells inside are separated by hairlines */
.fig-card { padding: 0 }
.fig-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px } .fig-card-head .ms { color: var(--primary); font-size: 22px }
/* A fixed number of columns per screen width, so the column lines can be painted on the grid itself and run through the empty
   cells of the last row. Each cell paints its own background and right/bottom line on top; the grid overhangs the card by 2px so the
   outermost lines are clipped. */
.fig-card .figs { --cols: 6; grid-template-columns: repeat(var(--cols), 1fr); gap: 0; border-top: 1px solid var(--outline-variant); margin: 0 -2px -2px 0;
  background-image: linear-gradient(to right, var(--outline-variant) 1px, transparent 1px); background-size: calc(100% / var(--cols)) 100%; background-position: -1px 0 }
.fig-card .fig { background: var(--surface-container-low); border-radius: 0; padding: 14px 20px; border-right: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant) }
@media (max-width: 1000px) { .fig-card .figs { --cols: 4 } }
.range-ends small { font-size: 11px; opacity: .8 }
.fig { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px } .fig b { font-size: 18px; line-height: 24px }
.fig.range { grid-column: span 2 } .fig-card .fig.range { padding-right: 24px }
.range-bar { position: relative; height: 6px; margin: 12px 0 6px; border-radius: 3px; background: var(--surface-container-highest) }
.range-bar i { position: absolute; top: -5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface-container-low) }
.range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-surface-variant) }
.position { padding: 16px 20px } .position .title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px } .position .title .ms { color: var(--primary) }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px } .pos-grid b { display: block; font-size: 16px } .pos-grid small { display: block }
.position .btn { margin-left: -12px } .position .btn .ms { margin: 0 -8px 0 0 }
.sect-row { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.seg { display: inline-flex; border: 1px solid var(--outline); border-radius: 20px; overflow: hidden; height: 36px }
.seg-btn { width: 44px; border: 0; background: transparent; color: var(--on-surface); cursor: pointer; display: grid; place-items: center } .seg-btn + .seg-btn { border-left: 1px solid var(--outline) }
.seg-btn.on { background: var(--secondary-container); color: var(--on-secondary-container) } .seg-btn .ms { font-size: 20px }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px }
.news-card { display: flex; flex-direction: column } .news-card img, .news-card .ph-img.wide { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; font-size: 32px }
.news-card-body { padding: 12px 16px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1 } .news-card-body small { margin-top: auto }
.news-sum { font-size: 13px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical }
.news-card:hover .news-title { color: var(--primary) }
.news { padding: 4px 0 }
.news-row { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--outline-variant) } .news-row:first-child { border-top: 0 }
.news-row:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent) }
.news-row img, .ph-img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--surface-container-highest) }
.ph-img { display: grid; place-items: center; color: var(--primary) }
.news-text { display: flex; flex-direction: column; min-width: 0 } .news-title { font-weight: 500 }

@media (max-width: 700px) {
  .f-head { display: none }
  .f-group { flex-wrap: wrap; gap: 4px 12px } .f-group-name { flex-basis: 100% }
  .tabs a .ms { display: none }
  .f-row, .f-row:has([data-unwatch]) { grid-template-columns: 1fr 1fr; gap: 6px 12px }
  .f-name { grid-column: 1 / -1 }
  .f-row > span:not(.f-name) { display: flex; justify-content: space-between; text-align: left }
  .f-row > span[data-l]::before { content: attr(data-l); color: var(--on-surface-variant); font-size: 12px; margin-right: 8px }
  .f-row > .trend { grid-column: 1 / -1; justify-content: flex-start } .f-row > .trend::before { content: 'Trend'; color: var(--on-surface-variant); font-size: 12px; margin-right: auto }
  .f-row > [data-unwatch] { grid-column: 1 / -1; justify-self: end }
  .hero-price { font-size: 32px; line-height: 40px }
  .fig.range { grid-column: 1 / -1 } .fig-card .figs { --cols: 2 }
  .rule { grid-template-columns: 1fr 1fr; } .rule input { grid-column: 1 } .rule [data-del] { grid-column: 2; justify-self: end }
}

/* buy price: under the price on list rows, and a line in the asset page's hero */
.price-v { display: inline-flex; flex-direction: column; align-items: flex-end }
.buy-at { font-size: 12px; color: var(--on-surface-variant); white-space: nowrap } .buy-at.hit { color: var(--success); font-weight: 500 }
.buy-line { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 -8px } .buy-line > .ms { font-size: 18px; color: var(--primary) }
.buy-line .hit { color: var(--success); font-weight: 500 } .buy-line .btn { margin-left: -12px } .buy-line span + .btn { margin-left: 0 }
.buy-field { display: flex; align-items: center; gap: 10px; margin-top: 16px } .buy-field .field { flex: 1 }

/* signals across your lists */
.sig-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 2px 24px }
.sig > .ms { font-size: 20px } .sig > .ms.up { color: var(--primary) } .sig > .ms.down { color: var(--error) }
.sig-what { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 13px } .sig-what small { font-size: 12px }
.sig-what .up { color: var(--primary) } .sig-what .down { color: var(--error) }

/* screener: the screens as single-select chips (M3 filter chips; leading check when chosen), then a data table (core/base.css .dt) */
.scr-chips { margin: 4px 0 2px }
.scr-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 8px }
.scr-chips .chip .ms { font-size: 18px } .scr-chips .chip small { font-weight: 400; color: var(--on-surface-variant) } .scr-chips .chip.on small { color: inherit }
.scr-chips .chip:not(.on):hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }
.scr td:first-child { width: 100%; max-width: 0 } /* the name takes the room left and ellipsizes */
.scr td:not(:first-child), .scr th { white-space: nowrap } .scr td small { font-size: 12px }
.scr .f-name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.scr td .icon-btn { margin: -4px -8px -4px 0 }
/* Ideas: the market to scan, an M3 segmented button with text (single select, check on the chosen segment), the scan rules button after it */
.region { display: flex; align-items: center; gap: 12px; flex-wrap: wrap } .region .icon-btn { margin-left: auto }
/* Ideas: the background P/E lookups, an M3 determinate linear progress indicator (the top bar's tokens) with its count under it */
.fill-progress { display: flex; flex-direction: column; gap: 6px }
.fill-track { height: 4px; border-radius: 2px; background: var(--secondary-container); overflow: hidden }
.fill-track i { display: block; height: 100%; border-radius: 2px; background: var(--primary) }
.fill-progress small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px } .fill-progress .ms { font-size: 16px }
/* Scan rules dialog: one setting per row, label (with its supporting text) left, control right */
.scan-rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--outline-variant) }
.scan-rule > span { display: flex; flex-direction: column; gap: 2px } .scan-rule small { font-size: 12px } .scan-rule select { width: 140px }
.scan-fixed { margin-top: 12px; font-size: 12px }
.seg-text { height: 40px; max-width: 100%; overflow-x: auto }
.seg-text .seg-btn { width: auto; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 500; white-space: nowrap } .seg-text .seg-btn .ms { font-size: 18px }
@media (max-width: 700px) { .seg-text .seg-btn { padding: 0 10px } }
.scr-chips .menu-chip { padding-right: 4px } /* Matches: the trailing dropdown arrow sits closer to the edge */
/* Penny stocks: a short risk label at the right end of the tab's note line, in the error role */
.up-note:has(.risk-note) { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap }
.risk-note { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--error); font-weight: 500; white-space: nowrap }
.risk-note .ms { font-size: 16px }
/* Your notes (stock page): the reread reminder, two text areas (M3 outlined text fields, several lines), the actions */
.notes .rbody { display: flex; flex-direction: column; gap: 12px }
.note-field { display: flex; flex-direction: column; gap: 4px }
.note-field textarea.field { height: auto; min-height: 64px; padding: 12px 16px; font: inherit; line-height: 20px; resize: vertical } .note-field textarea.field:focus { padding: 11px 15px }
.note-due { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--tertiary-container); color: var(--on-tertiary-container) }
.note-actions { display: flex; justify-content: flex-end; gap: 8px }
.scr td.match-tags { white-space: normal; min-width: 140px; color: var(--on-surface-variant) }

/* sector gaps: one row per sector, its largest companies as chips */
.gap { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--outline-variant) }
.gap:first-of-type { border-top: 0 }
.gap-names { display: flex; flex-wrap: wrap; gap: 8px }
.gap-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 280px } .gap-chip small { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gap-chip:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }

@media (max-width: 700px) {
  .scr .scr-cap { display: none }
  .sig-list { grid-template-columns: 1fr } .sig { flex-wrap: wrap } .sig-what { align-items: flex-start; text-align: left; width: 100%; padding-left: 30px }
  .gap { grid-template-columns: 1fr }
}