/* account view styles. Owner: account engineer. Base tokens and shared components: base.css. */

/* ---------- header ---------- */
.acct-head { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.acct-title { align-items: center; }
.acct-name { color: var(--text-2); font-size: 14px; }
.acct-title .community { font-size: 11px; }
.acct-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text-2); font-size: 12px; }
.acct-meta [data-tip] { cursor: help; }
.acct-sep { color: var(--text-3); }
.acct-ext { color: var(--text-2); }
.acct-ext:hover { color: var(--white); }
.acct-head .verdict { margin-top: 2px; }
.acct-cov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.acct-cov > .row { min-width: 0; }
.acct-cov .num { white-space: normal; }
.acct-cov-label { color: var(--text-3); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- main pane ---------- */
.acct-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acct-chart-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.acct-chart { min-height: 230px; }
.acct-explain { margin: 10px 0 0; color: var(--text-3); font-size: 12px; max-width: 96ch; }
.acct-explain--lead { margin: 0; color: var(--text-2); }
.acct-seg-n { margin-left: 5px; color: var(--text-3); }
.acct-calls .seg { flex-wrap: wrap; }
.acct-calls .seg button { white-space: nowrap; }
.seg button[aria-pressed="true"] .acct-seg-n { color: var(--text-2); }

/* svg marks (colours from the LIGHT design tokens) */
.acct-svg { display: block; overflow: visible; touch-action: pan-y; }
.acct-grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.acct-grid line.acct-zero { stroke: var(--text-3); stroke-dasharray: 1.5 3; }
.acct-axis text { fill: var(--text-2); font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.acct-axis-title { fill: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
.acct-tick line { stroke: var(--line); }
.acct-baseline { stroke: var(--line); shape-rendering: crispEdges; }
/* luck (pool spread, coin-flip band): the app-wide grey band. The account's middle half of calls: a light
   corridor with solid light edges, drawn over it, so the two never read as the same grey */
.acct-null { fill: var(--band); stroke: none; }
.acct-null-edge { fill: none; stroke: var(--band-edge); stroke-width: 1; }
.acct-iqr { fill: var(--corridor); stroke: none; }
.acct-iqr-edge { fill: none; stroke: var(--corridor-edge); stroke-width: 1.25; stroke-linejoin: round; }
.acct-median { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.acct-paths path { fill: none; stroke: var(--text); stroke-opacity: .16; stroke-width: 1; stroke-linejoin: round; }
.acct-paths--few path { stroke-opacity: .7; stroke-width: 1.5; }
.acct-path-label { fill: var(--text); font-family: var(--font-mono); font-size: 10.5px; }
.acct-path-end { fill: var(--text); }
.acct-entry { stroke: var(--neutral); stroke-width: 1; shape-rendering: crispEdges; }
.acct-step { fill: none; stroke: var(--text); stroke-width: 1.75; stroke-linejoin: round; }
.acct-step-end { fill: var(--text); }
.acct-tag rect { fill: var(--chip); stroke: var(--line); }
.acct-tag text { fill: var(--text); font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.acct-cross line { stroke: var(--neutral); stroke-width: 1; stroke-dasharray: 3 3; shape-rendering: crispEdges; }
.acct-cross circle { fill: var(--bg); stroke: var(--white); stroke-width: 1.5; }
.acct-overlay { fill: transparent; cursor: crosshair; }

/* window ribbon (track record) */
.acct-rib { stroke: none; }
.acct-rib--collected { fill: var(--band-edge); }
.acct-rib--partial { fill: rgba(245, 196, 98, .5); }
.acct-rib--not_collected { stroke: var(--line); stroke-width: 1; }
.acct-rib-label { fill: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
.acct-win-edge { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }

/* ---------- calls table ---------- */
.acct-calls .tbl td { vertical-align: middle; }
.acct-when { white-space: nowrap; }
.acct-time { color: var(--text-3); }
.acct-token { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.acct-post { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; }
.acct-excerpt { display: inline-block; max-width: 52ch; color: var(--text); }
.acct-postlink { color: var(--text-2); font-size: 12px; padding: 0 2px; }
.acct-postlink:hover { color: var(--blue); }
.acct-stance { display: inline-flex; align-items: baseline; gap: 5px; color: var(--text-2); white-space: nowrap; }
.acct-glyph { font-size: 9px; color: var(--text-2); }
.acct-stance--bear { color: var(--text); }
.acct-calls .pane-foot { line-height: 1.5; }

@media (max-width: 1200px) {
  .acct-excerpt { max-width: 34ch; }
}
@media (max-width: 720px) {
  .acct-calls .acct-col-opt { display: none; }
  .acct-hide-sm { display: none; }
  .acct-calls .tbl--dense td, .acct-calls .tbl--dense th { padding-left: 5px; padding-right: 5px; }
  .acct-calls .tbl { font-size: 12px; }
  .acct-when { white-space: normal; display: inline-flex; flex-direction: column; line-height: 1.25; }
  .acct-time { display: none; }
  .acct-yr { font-size: 10.5px; color: var(--text-3); }
  .acct-calls .seg button { padding: 0 7px; }
  .acct-calls .pane-body { padding-left: 8px; padding-right: 8px; }
  .acct-calls .tbl .chip { padding: 0 5px; }
  .acct-chart-top .seg { margin-left: auto; }
  .acct-name { font-size: 13px; }
}