templates/data-app/examples/finance/content/dashboard/example.css

.finance-example-page {
  --data-app-layout-intent: wide;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%; min-height: 0; overflow: hidden;
}
.finance-hero {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  width: 100%;
  /* Watchlist track + middle content + supporting rail + workspace gutters/gap. */
  max-width: calc(320px + 960px + 270px + 96px);
  margin-inline: auto;
  height: 100%; min-height: 0;
  min-width: 0;
  align-items: start;
  gap: 0;
}

.finance-left-rail { display: flex; flex-direction: column; min-width: 0; height: 100%; min-height: 0; padding: 24px 0 24px 32px; }
.finance-watchlist-card { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.finance-watchlist-card > .component-header { flex: none; margin-bottom: 16px; }
.finance-main-column { display: grid; min-width: 0; gap: 32px; padding-right: 0; }
.finance-stock-list { display: grid; align-content: start; gap: 3px; min-height: 0; overflow-y: auto; margin-inline: -8px; padding: 2px; scrollbar-width: thin; overscroll-behavior: contain; }
.finance-stock-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(68px, auto);
  width: 100%;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.finance-stock-list button:hover { background: var(--control-hover); }
.finance-stock-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.finance-stock-list button[aria-pressed="true"] {
  border-color: var(--border);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}
.finance-stock-list button > span { display: grid; min-width: 0; gap: 2px; }
.finance-stock-list strong { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.finance-stock-list small { overflow: hidden; color: var(--secondary); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.finance-nav-quote { justify-items: end; }
.finance-nav-quote small { color: var(--positive); }
.finance-nav-quote small[data-negative] { color: var(--negative); }
.finance-watch-spark { width: 48px; height: 24px; overflow: visible; }
.finance-watch-spark polyline { stroke: var(--positive); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.finance-watch-spark[data-negative] polyline { stroke: var(--negative); }
.finance-watch-median { stroke: var(--positive); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; vector-effect: non-scaling-stroke; }
.finance-watch-spark[data-negative] .finance-watch-median { stroke: var(--negative); }

.finance-chart-panel { min-width: 0; }
.finance-chart-panel > .component-header { display: none; }
.finance-chart-panel .component-title { font-size: 18px; font-weight: 600; }
.finance-chart-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: start;
  gap: 20px;
  margin-bottom: 0;
}
.finance-security-summary { display: grid; grid-column: 1; gap: 8px; min-width: 0; }
.finance-security-title { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.finance-security-title strong { overflow: hidden; color: var(--text); font-size: 36px; font-weight: 600; letter-spacing: -.035em; line-height: 40px; text-overflow: ellipsis; white-space: nowrap; }
.finance-security-title span { color: color-mix(in srgb, var(--secondary) 68%, transparent); font-size: 14px; font-weight: 500; line-height: 20px; }
.finance-security-price { display: flex; align-items: baseline; gap: 10px; }
.finance-security-price strong { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 24px; }
.finance-security-price span { color: var(--positive); font-size: 14px; font-weight: 500; line-height: 20px; }
.finance-security-price span[data-negative] { color: var(--negative); }
.finance-timeframes {
  grid-column: 2;
  align-self: start;
  justify-self: end;
  margin-top: 20px;
}

.finance-combined-chart { position: relative; width: calc(100% - 56px); min-width: 0; isolation: isolate; }
.finance-combined-chart > svg { position: relative; z-index: 0; display: block; width: 100%; height: auto; min-height: 430px; overflow: visible; touch-action: none; }
.finance-grid-line { stroke: var(--border); stroke-dasharray: 4 6; stroke-width: 1; }
.finance-axis-label { fill: var(--secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.finance-date-label { dominant-baseline: auto; }
.finance-candle[data-direction="up"] { --candle-color: var(--positive); }
.finance-candle[data-direction="down"] { --candle-color: var(--negative); }
.finance-candle-wick { stroke: var(--candle-color); stroke-width: 1; }
.finance-candle-body { fill: var(--candle-color); }
.finance-volume-bar { fill: color-mix(in srgb, var(--text) 13%, var(--surface)); }
.finance-position-marker line { pointer-events: none; stroke-width: 1; }
.finance-position-marker line[data-kind="basis"] { stroke: var(--chart-1); stroke-dasharray: 5 5; }
.finance-position-marker line[data-kind="last"] { stroke: var(--positive); stroke-dasharray: 5 3; }
.finance-position-name { fill: var(--secondary); font-size: 10px; font-weight: 500; }
.finance-position-value-bg[data-kind="basis"] { fill: var(--chart-1); }
.finance-position-value-bg[data-kind="last"] { fill: var(--positive); }
.finance-position-value { fill: white; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.finance-story-marker { cursor: pointer; outline: none; }
.finance-story-marker line { stroke: url(#finance-story-stem); stroke-width: 1.4; }
.finance-story-marker circle { fill: var(--surface-raised); stroke: var(--secondary); stroke-width: 1; }
.finance-story-flag { color: var(--text); pointer-events: none; }
.finance-story-marker:is([data-active], :focus-visible) line { stroke: var(--text); stroke-width: 1.6; }
.finance-story-marker:is([data-active], :focus-visible) circle { fill: var(--text); stroke: var(--text); }
.finance-story-marker:is([data-active], :focus-visible) .finance-story-flag { color: var(--surface); }
.finance-hover-band {
  fill: color-mix(in srgb, var(--text) 5%, transparent);
  stroke: none;
  pointer-events: none;
}
.finance-chart-tooltip {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 190px;
  max-width: min(220px, calc(100% - 24px));
  gap: 5px;
  pointer-events: none;
  border: 0;
  transform: translate(12px, calc(-100% - 12px));
}
.finance-chart-tooltip[data-horizontal="end"] { transform: translate(calc(-100% - 12px), calc(-100% - 12px)); }
.finance-chart-tooltip[data-vertical="below"] { transform: translate(12px, 12px); }
.finance-chart-tooltip[data-horizontal="end"][data-vertical="below"] { transform: translate(calc(-100% - 12px), 12px); }
.finance-chart-tooltip > strong { margin-bottom: 3px; font-size: 12px; }
.finance-chart-tooltip > span { display: flex; justify-content: space-between; gap: 20px; color: var(--secondary); font-size: 12px; }
.finance-chart-tooltip b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.finance-story-tooltip {
  position: absolute;
  z-index: 20;
  display: grid;
  width: min(184px, calc(100% - 24px));
  gap: 4px;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: translate(15px, -12px);
}
.finance-story-tooltip[data-horizontal="end"] { transform: translate(calc(-100% - 15px), -12px); }
.finance-story-tooltip time { color: var(--secondary); font-size: 12px; line-height: 16px; }
.finance-story-tooltip strong { font-size: 12px; font-weight: 600; line-height: 17px; }
.finance-story-tooltip p { margin: 0; color: var(--secondary); font-size: 12px; line-height: 17px; }
.finance-statistics { min-width: 0; }
.finance-statistics h2 { margin: 0 0 20px; font-size: 18px; font-weight: 600; }
.finance-market-metrics h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.finance-market-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}
.finance-market-metrics section { min-width: 0; }
.finance-market-metrics dl { display: grid; min-width: 0; gap: 9px; margin: 0; }
.finance-market-metrics dd[data-tone="negative"] { color: var(--negative); }
.finance-market-metrics dd[data-tone="positive"] { color: var(--positive); }
.finance-market-metrics dl > div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 16px; }
.finance-market-metrics dt { color: var(--secondary); font-size: 14px; font-weight: 500; white-space: nowrap; }
.finance-market-metrics dd { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.finance-stories-card { position: relative; min-width: 0; }
.finance-stories-card .component-title { font-size: var(--text-md-size); line-height: var(--text-md-line); }
.finance-stories-card > .component-header { margin-bottom: 14px; padding-right: 112px; }
.finance-stories-card > .component-header > .menu-trigger { top: 0; right: 76px; transform: none; }
.finance-story-controls { position: absolute; top: 0; right: 0; display: flex; gap: 4px; }
.finance-story-controls button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--control); color: var(--text); cursor: pointer; font: inherit; }
.finance-story-controls button:hover { background: var(--control-hover); }
.finance-story-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.finance-story-controls button:disabled { opacity: .35; cursor: default; background: transparent; }
.finance-story-list { display: flex; gap: 12px; overflow-x: auto; padding: 1px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.finance-story-list[data-fade-start] { --fade-start: 24px; }
.finance-story-list[data-fade-end] { --fade-end: 24px; }
.finance-story-list { mask-image: linear-gradient(to right, transparent, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent); }
.finance-story-list::-webkit-scrollbar { display: none; }
.finance-news-card { flex: 0 0 280px; min-width: 0; scroll-snap-align: start; }
.finance-news-card > a { display: flex; flex-direction: column; height: 100%; gap: 10px; color: var(--text); text-decoration: none; }
.finance-news-card > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.finance-news-card:has(a:hover) { --card-surface-border: var(--border-strong); }
.finance-news-card:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -3px; }
.finance-news-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--secondary); font-size: 12px; }
.finance-news-source { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--secondary); font-size: 12px; }
.finance-story-list time { color: var(--secondary); font-size: 12px; }
.finance-story-list strong { font-size: 14px; font-weight: 600; }
.finance-story-list p { margin: 0; color: var(--secondary); font-size: 14px; line-height: 1.4; }

.finance-right-rail { display: grid; min-width: 0; gap: 12px; padding: 58px 0 25px; }
.dashboard-component.finance-rail-card { min-width: 0; align-self: start; }
.finance-rail-card > .component-header { margin-bottom: 16px; }
.finance-rail-card .component-title { font-size: 14px; font-weight: 600; }
.finance-analyst-card { display: grid; gap: 12px; }
.finance-analyst-card > .component-header { margin-bottom: 0; }
.finance-analyst-heading { display: flex; align-items: baseline; gap: 12px; }
.finance-analyst-heading strong { color: var(--positive); font-size: 20px; font-weight: 600; }
.finance-analyst-heading strong[data-neutral] { color: var(--secondary); }
.finance-consensus-renderer .bar-family-segmented { gap: 12px; padding: 0; }

.finance-planner-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dashboard-component.finance-planner-card,
.dashboard-component.finance-market-card { padding-bottom: 20px; }
.finance-planner-card > .component-header { margin-bottom: 0; }
.finance-order-side { width: 100%; height: 32px; }
.finance-order-side button { min-height: 0; height: 100%; }
.finance-share-input { display: grid; height: 32px; min-height: 32px; overflow: hidden; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--control); transition: border-color 120ms ease, box-shadow 120ms ease; }
.finance-share-input:hover { border-color: var(--border-strong); background: var(--control-hover); }
.finance-share-input:has(input:focus-visible):not(:where([data-input-modality="pointer"] *)) { border-color: var(--border-strong); box-shadow: var(--control-focus-ring, 0 0 0 1px var(--border-strong)); }
.finance-share-input span { min-width: 0; padding-left: 16px; color: var(--secondary); font-size: 14px; }
.finance-share-input input { width: 100%; height: 30px; padding: 0 16px 0 8px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; appearance: textfield; }
.finance-share-input input::-webkit-inner-spin-button, .finance-share-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.finance-planner-card :is(.data-slider-bound, .data-slider-value) { font-size: 14px; }
.finance-outlook-slider { --data-slider-control-height: 32px; --data-slider-inline-label-width: 132px; }
.finance-outlook-chart { display: grid; gap: 6px; margin-inline: -20px; padding: 21px 20px 0; border-top: 1px solid var(--border); }
.finance-outlook-chart > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.finance-outlook-chart span { font-size: 14px; font-weight: 500; }
.finance-outlook-chart svg { display: block; width: 100%; height: 92px; overflow: visible; }
.finance-outlook-labels { display: flex; justify-content: space-between; gap: 8px; color: var(--secondary); }
.finance-outlook-labels span { font-size: 12px; font-weight: 400; }
.finance-outlook-chart text { fill: var(--secondary); font-size: 14px; }
.finance-outlook-zero { stroke: var(--border-strong); stroke-dasharray: 3 4; stroke-width: 1; }
.finance-outlook-segment { color: var(--positive); }
.finance-outlook-segment[data-negative] { color: var(--negative); }
.finance-outlook-segment path { fill: color-mix(in srgb, currentColor 9%, transparent); }
.finance-outlook-segment line { stroke: currentColor; stroke-width: 1.5; }
.finance-outlook-segment circle { fill: var(--surface-raised); stroke: currentColor; stroke-width: 1.5; }
.finance-outlook-values { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 6px; container-type: inline-size; }
.finance-outlook-values strong { color: var(--positive); font-size: clamp(14px, 7cqi, 20px); font-weight: 600; line-height: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-outlook-values strong[data-negative] { color: var(--negative); }

.finance-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 32px; height: 100%; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 32px 64px; }
.finance-workspace:focus:not(:focus-visible), :root[data-input-modality="pointer"] .finance-workspace:focus { outline: none; }
.finance-right-rail { align-items: start; }
@media (min-width: 821px) and (max-width: 1050px) { .finance-workspace .finance-right-rail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1280px) {
  .finance-hero { grid-template-columns: 274px minmax(0, 1fr); }
  .finance-left-rail { padding-left: 24px; }
  .finance-workspace { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .finance-right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding-top: 0; }
}

@media (max-width: 820px) {
  .finance-example-page { padding: 0; }
  .finance-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; }
  .finance-left-rail { height: auto; padding: 12px 16px 0; }
  .finance-watchlist-card { max-height: none; }
  .finance-watchlist-card > .component-header { margin-bottom: 8px; }
  .finance-stock-list { display: flex; flex: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .finance-stock-list button { flex: 0 0 270px; }
  .finance-chart-toolbar { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .finance-timeframes { grid-column: 1; overflow-x: auto; align-self: stretch; justify-self: stretch; margin-top: 0; }
  .finance-example-page .finance-timeframes button { flex: 1 0 auto; min-width: 44px; padding-inline: 10px; }
  .finance-main-column { padding-right: 0; }
  .finance-combined-chart { width: calc(100% - 56px); }
  .finance-workspace { padding: 20px 16px 40px; }
  .finance-right-rail { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .finance-combined-chart > svg { min-height: 360px; }
  .finance-market-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .finance-news-card { flex-basis: min(82vw, 280px); }
}

@media (max-width: 520px) {
  .finance-example-page { padding: 0; }
  .finance-market-metrics { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .finance-market-metrics dl:nth-child(n) { padding: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .finance-stock-list button { scroll-behavior: auto; }
}