/* Account sheet layout (wave V2 owner: sheets). js/v2/sheets/account*.mjs.
   Stocks shot 4: the foundation draws every component (sheet header, large
   inline title, hero, change line, period control, sections, cells, action
   sheet); this file only lays them out. Tokens only. */

/* ---------------------------------------------------------------- page */
.acc {
  display: flex; flex-direction: column; gap: var(--gap-group);
  padding-top: var(--radius-xs);
}
.acc > .ui-sec + .ui-sec,
.acc-returns > .ui-sec { margin-top: 0; }
.acc .acc-strong { font-weight: 600; }
.acc .muted { color: var(--label-2); }
.acc .acc-wrap { white-space: normal; }
.acc .ui-cell-label:has(> .acc-wrap) { white-space: normal; }

/* ---------------------------------------------------------------- top: value, change, period, chart */
.acc-top { display: flex; flex-direction: column; }
.acc-head .ui-hero { padding-top: 0; }
/* section titles wrap instead of truncating (N20); the change line stays one
   line each so scrubbing never moves the chart */
.acc .ui-sec-title { white-space: normal; }
.acc-seg { padding: var(--cell-pad-y) var(--margin) 0; }
/* the visible "Update value" capsule under the change line (N6) */
.acc-update-row { display: flex; padding: var(--cell-pad-y) var(--margin) 0; }
.acc-chart {
  position: relative;
  margin-top: var(--cell-pad-y);
  padding: 0 var(--margin);
  --chart-halo: var(--cell);
}
/* the expand button ends the caption row ("+1 190 € over 1 year  ⤢") */
.acc-chart .viz-caps { padding-right: var(--tap-min); }
.acc-expand {
  position: absolute; right: calc(var(--margin) - var(--radius-sm)); bottom: calc(var(--radius-sm) * -1);
  width: var(--tap-min); height: var(--tap-min);
  color: var(--label-2);
}
.acc-chip-slot {
  display: flex; justify-content: center;
  padding: 0 var(--margin);
}
.acc-chip-slot:not(:empty) { padding-top: var(--radius-sm); }

/* ---------------------------------------------------------------- value cells */
.acc-amtpct { display: inline-flex; align-items: baseline; gap: var(--radius-xs); }
.acc-pct { color: var(--label-2); }
.acc-stack { display: inline-flex; flex-direction: column; align-items: flex-end; }
.acc-stack-sub { font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2); }

/* returns: the "How this is measured" disclosure is one row of the group */
.acc-info { display: block; padding: 0; }
.acc-info-sum {
  list-style: none; cursor: pointer;
  justify-content: space-between;
}
.acc-info-sum::-webkit-details-marker { display: none; }
.acc-info-ico { display: grid; place-items: center; color: var(--label-2); }
.acc-info-ico .ui-ico { width: var(--icon); height: var(--icon); }
.acc-info[open] .acc-info-ico { color: var(--label); }
.acc-info-body {
  display: flex; flex-direction: column; gap: var(--radius-sm);
  padding: 0 var(--cell-pad-x) var(--cell-pad-y);
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
}
.acc-info-body p { margin: 0; }
.acc-info-sum:focus-visible { outline: var(--focus-ring) solid var(--tint); outline-offset: calc(var(--focus-ring) * -1); }

/* ---------------------------------------------------------------- rows with a bar under the label line */
.acc-barrow { flex-direction: column; align-items: stretch; gap: var(--radius-sm); }
.acc-barrow-head { display: flex; align-items: center; gap: var(--cell-pad-y); }
.acc-bar { width: 100%; }
.acc-bar .viz-gate { padding: 0; margin: 0; }
.acc-pbar { width: 100%; }

/* loan balance in the chart grammar: one 2 px line, a dotted today rule, captions */
.acc-amort-wrap { display: flex; flex-direction: column; gap: var(--radius-xs); width: 100%; }
.acc-amort { display: block; width: 100%; height: calc(var(--row-min) * 1.25); overflow: visible; }
.acc-amort-line {
  fill: none; stroke: var(--label-2); stroke-width: var(--viz-net-stroke);
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.acc-amort-today {
  stroke: var(--label-3); stroke-width: calc(var(--hairline) * 2);
  stroke-dasharray: var(--viz-grid-dash); vector-effect: non-scaling-stroke;
}

.acc-empty { margin: 0 var(--margin); background: var(--cell-2); border-radius: var(--radius-section); }

/* ---------------------------------------------------------------- level 2 */
.acc-l2 { padding-top: var(--cell-pad-y); }
.acc-l2 .ui-row.is-current .ui-cell-label { font-weight: 600; }
.acc-l2 > .ui-footnote { margin: 0 calc(var(--margin) + var(--cell-pad-x)); }
.acc-note-box { padding: 0; }
.acc-note {
  display: block; width: 100%; min-height: calc(var(--row-min) * 4);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border: 0; outline: none; resize: vertical;
  background: transparent; color: var(--label);
  font: var(--t-body); letter-spacing: var(--tr-body);
}
.acc-note::placeholder { color: var(--label-3); }
.acc-note-box:focus-within { box-shadow: inset 0 0 0 var(--focus-ring) var(--tint); }

/* ---------------------------------------------------------------- ⋯ menu: hairlines between its actions */
.acc-menu .acc-menu-btn + .acc-menu-btn::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hairline);
  background: var(--sep); transform: scaleY(0.5); transform-origin: 0 0;
}