/* Accounts screen (#view-balancesheet): the account list grouped by kind, net worth by
   currency, and one account's page or a total's sheet beside the list or, on a narrow
   screen, in its place. */

/* ============================================================================
   Layout: the list, and the selected account's page.

   One column until there is room for two. .acct-layout.has-detail is the split: the list
   on the left at a fixed width, the page on the right, scrolling with the window and held
   under the navbar. The split starts at 600pt, the iPhone Duo open; below that the page
   takes the list's place. --acct-split tells the script which arrangement is showing.
   ============================================================================ */
.acct-layout {
  --acct-split: 0;
  --acct-list-w: 30rem;
}

.acct-detail-pane[hidden] {
  display: none;
}

/* The contents row's frosted band reaches past its links over whatever follows it
   (components.css), so the card starts below the band, its top edge and corners in view:
   as far below the links as Settings' first section. */
.page-toc:not([hidden]) + .acct-card {
  margin-top: var(--space-4);
}

@media (max-width: 600px) {
  .page-toc:not([hidden]) + .acct-card {
    margin-top: var(--space-3);
  }
}

/* A narrow screen shows the page in place of the list. */
.acct-layout.has-detail .acct-list-pane {
  display: none;
}

/* Except while it slides out as a page opens over it, or back in under one dragged away
   (phonemotion.js), and the page while it slides away, already hidden (base.css holds
   both fixed). Important to outrank [hidden]'s own, for the moment it slides. */
.acct-layout.has-detail .acct-list-pane.page-departing {
  display: block;
}

.acct-detail-pane.page-departing[hidden] {
  display: block !important;
}

@media (min-width: 600px) {
  .acct-layout {
    --acct-split: 1;
  }

  /* The list alone stays a column of its own rather than the whole window. */
  .acct-layout:not(.has-detail) .acct-list-pane {
    max-width: 52rem;
    margin: 0 auto;
  }

  .acct-layout.has-detail {
    display: grid;
    grid-template-columns: minmax(0, var(--acct-list-w)) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .acct-layout.has-detail .acct-list-pane {
    display: block;
  }

  /* Beside the list the page holds its place under the navbar and scrolls on its own,
     so a long list doesn't carry the account out of view. It is short enough to stay
     whole there with the window scrolled to its end, where the list's bottom stops it:
     taller, it would be pushed up under the navbar, its close button with it.
     --acct-below is the room the main container leaves under the list. */
  .acct-layout.has-detail .acct-detail-pane {
    position: sticky;
    top: calc(3.75rem + var(--space-4));
    max-height: calc(100vh - 3.75rem - var(--space-4) - var(--acct-below, 2rem));
    margin-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Beside the list the way back is the close button at the page's top right. */
  .acct-layout.has-detail .acct-back-bar {
    display: none;
  }

  .acct-layout.has-detail .acct-close {
    display: inline-flex;
  }

  .acct-layout.has-detail .acct-page-head {
    padding-right: 2.5rem;
  }

  /* Beside the page each row keeps to one line: a long name is cut short rather than
     wrapped, so the rows stay one height and the balances one column. */
  .acct-layout.has-detail :is(.acct-row-name, .acct-row-sub) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* On a laptop the list has room for the sheet with every period checked and the accounts'
   trend: the card keeps one width whichever are checked, so checking one never moves
   the boxes from under the pointer. Its contents keep a wider margin from its sides,
   which brings the names nearer their figures; the title, the controls and the foot
   line up with the sheet. */
@media (min-width: 1024px) {
  .acct-layout:not(.has-detail) {
    --acct-inset: 4.5rem;
  }

  .acct-layout:not(.has-detail) .acct-list-pane {
    max-width: 64rem;
  }

  .acct-layout:not(.has-detail) .acct-toolbar {
    --toolbar-pad-x: var(--acct-inset);
  }

  .acct-layout:not(.has-detail) .acct-list-foot {
    padding-left: var(--acct-inset);
    padding-right: var(--acct-inset);
  }
}

/* Up to 768pt the tab bar's room is left under the list (base.css). */
@media (min-width: 600px) and (max-width: 768px) {
  .acct-layout {
    --acct-below: 5.5rem;
  }
}

/* Until a laptop's width the list gives up room to the page: about a third of the
   screen, never under 14rem, and without the sparkline, so the name and balance keep
   what room there is. The page is then at least a small phone's width. */
@media (min-width: 600px) and (max-width: 1023px) {
  .acct-layout {
    --acct-list-w: clamp(14rem, 38%, 20rem);
  }

  .acct-layout.has-detail {
    gap: var(--space-4);
  }

  .acct-layout.has-detail {
    --acct-inset: var(--space-4);
  }

  .acct-layout.has-detail .acct-list-foot {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .acct-layout.has-detail .acct-row-link {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-2);
  }

  .acct-layout.has-detail .acct-spark {
    display: none;
  }

  .acct-layout.has-detail .acct-page {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }

  /* The narrow list puts the as-of control under the title, at its left; the picker
     opens rightwards from there, over the page, rather than off the screen's left edge. */
  .acct-layout.has-detail .acct-toolbar .bs-datepicker-popover {
    left: 0;
    right: auto;
  }
}

/* ============================================================================
   Beside a page on a laptop: the list alone, narrowed.

   From 1024px the list beside an account's page is the same table as the list alone,
   names and balances only, and every line in it keeps the height it has alone, so
   opening a page moves nothing up or down: the card narrows to the left and the page
   takes the room it leaves (splitmotion.js slides it). Above both cards the contents
   row keeps its width, its lines and its height. The changes and their boxes are put
   away until the page closes; their cells keep their lines' height, unseen. Every line
   of the sheet is one line from 1024px, alone or beside a page, a long name or note cut
   short, since the names' column is a different width in each.
   Below 1024px the split keeps the narrow sheet, each line on its own.
   ============================================================================ */
@media (min-width: 1024px) {
  /* The sheet's container query (below) asks how wide the box named acct-sheet is. Here
     that is the whole layout, wide enough for the table at any laptop width, rather than
     the sheet in its column. The account's and the totals' pages, in the layout too,
     share none of the sheet's classes. */
  #acct-layout.has-detail {
    container: acct-sheet / inline-size;
    /* The contents row's padding, taken back by its margins (components.css). */
    --acct-toc-pad: 8px;
  }

  #acct-layout.has-detail .acct-sheet {
    container: none;
  }

  /* Chrome's scroll anchoring kept something in the card still that it measured as
     moving, and scrolled the window about 40px as the page's chart and activity landed,
     though no line in the list moved. */
  #acct-layout.has-detail .acct-card {
    overflow-anchor: none;
  }

  /* The row is as wide as the list alone, its card's width, over both cards. */
  #acct-layout.has-detail #acct-toc {
    width: min(64rem, 100cqi);
  }

  /* The page starts level with the list's card, under the row, and holds that place under
     the row stuck beneath the navbar as the list scrolls. --page-toc-h is the row's height
     as drawn (pagetoc.js). */
  #acct-layout.has-detail .acct-detail-pane {
    --acct-page-top: calc(3.75rem + 1px + var(--page-toc-h, 48px) - var(--acct-toc-pad) + var(--space-4));
    margin-top: calc(var(--page-toc-h, 48px) - 2 * var(--acct-toc-pad) + var(--space-4));
    top: var(--acct-page-top);
    max-height: calc(100vh - var(--acct-page-top) - var(--acct-below, 2rem));
  }

  #acct-layout.has-detail:has(#acct-toc[hidden]) .acct-detail-pane {
    --acct-page-top: calc(3.75rem + var(--space-4));
    margin-top: 0;
  }

  #acct-layout.has-detail #acct-change-periods {
    display: none;
  }

  /* Name and balance. The change and trend cells keep their place in each line, so it is
     as tall as alone, but take no room and aren't drawn or read out. */
  #acct-layout.has-detail .acct-sheet-table {
    grid-template-columns:
      [name] minmax(0, 1fr)
      [balance] auto
      [c1d] 0 [c1m] 0 [c3m] 0 [c1y] 0
      [trend] 0
      [end-pad] var(--space-2)
      [end];
  }

  #acct-layout.has-detail .acct-sheet-table :is(.acct-change, .acct-col-change, .acct-spark, .acct-col-trend) {
    visibility: hidden;
    width: 0;
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Every line is one line, alone or beside a page: a long name, bank line or note is
     cut short, a heading's note before its name and count. Not a total's name, never
     long, whose label glides inside it (splitmotion.js) and would be cut off. */
  #acct-layout .acct-sheet-table :is(.acct-row-main > *, :is(.acct-group-name, .acct-side-name):not(:has(.acct-total-link)), .statement-holding-name, .statement-holding-name > *, .acct-currency-note) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #acct-layout .acct-sheet-table :is(.acct-group-name, .acct-side-name, .statement-holding-name) {
    flex-wrap: nowrap;
  }

  #acct-layout .acct-sheet-table :is(.acct-row-label, .acct-group-note) {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* As on the narrow sheet the list was here before: no hairline between accounts or
     under a group's heading, a name being near its figure. The heading's line is only
     made clear, so it keeps its height. */
  #acct-layout.has-detail .acct-rows > .acct-row + .acct-row::before {
    content: none;
  }

  #acct-layout.has-detail .acct-group-head {
    border-bottom-color: transparent;
  }

  /* The open account's wash, and a hovered one's, reach the card's edges, its bar at the
     left edge, as on the narrow sheet. */
  #acct-layout.has-detail .acct-sheet-table .acct-row-link {
    position: relative;
    isolation: isolate;
  }

  #acct-layout.has-detail .acct-sheet-table .acct-row > .acct-row-link {
    background: none;
    box-shadow: none;
  }

  #acct-layout.has-detail .acct-sheet-table .acct-row-link::after {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--acct-inset));
    z-index: -1;
    pointer-events: none;
    transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }

  #acct-layout.has-detail .acct-sheet-table .acct-row.is-selected > .acct-row-link::after {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  #acct-layout.has-detail .acct-sheet-table .acct-total-head::before,
  #acct-layout.has-detail .acct-sheet-table .acct-total-link::after {
    inset: 0 calc(-1 * var(--acct-inset));
  }

  /* The skeleton holds the column's width, not the layout's. */
  #acct-layout.has-detail .acct-sheet-table .skel-group {
    min-width: 0;
  }

  /* The foot stays one line, as alone: the day's note is cut short before the switch
     wraps under it. */
  #acct-layout.has-detail .acct-list-foot {
    flex-wrap: nowrap;
  }

  #acct-layout.has-detail .acct-list-foot > .u-meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #acct-layout.has-detail .acct-list-foot > label {
    flex: none;
  }
}

@media (min-width: 1024px) and (pointer: coarse) {
  #acct-layout.has-detail {
    --acct-toc-pad: 6px;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  #acct-layout.has-detail .acct-sheet-table .acct-row:not(.is-selected) > .acct-row-link:hover::after {
    background: var(--sunk);
  }
}

/* Under reduced motion base.css gives every change of style a transition of a moment,
   and the toolbar's and foot's padding, changing as the page opens, drew one frame at
   the old size: enough for Chrome's scroll anchoring to move the window. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #acct-layout :is(.acct-toolbar, .acct-list-foot, .acct-list-foot > *) {
    transition-property: none;
  }
}

/* While the card slides (splitmotion.js) it is drawn by a stand-in, .acct-slide-card,
   which narrows over the page lying under it, or widens back, and the names and figures
   glide from where they were. What is drawn where it ends up and doesn't glide waits and
   fades in once everything has arrived: the leaders, the sheet's rules, the changes
   coming back as the page closes, and the washes and focus rings. */
@media (min-width: 1024px) {
  #acct-layout.is-split-sliding .acct-list-pane {
    position: relative;
    z-index: 1;
  }

  #acct-layout.is-split-sliding .acct-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .acct-slide-card {
    position: absolute;
    top: var(--slide-card-top);
    left: var(--slide-card-left);
    width: var(--slide-card-width);
    height: var(--slide-card-height);
    z-index: -1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    pointer-events: none;
  }

  #acct-layout .acct-sheet-table {
    transition: --acct-leader var(--fade-dur) var(--ease-fade);
  }

  #acct-layout.is-split-sliding .acct-sheet-table {
    --acct-leader: transparent;
    transition: none;
  }

  #acct-layout :is(.acct-summary, .acct-side-head, .acct-group-head, .acct-sheet-head, .acct-list-foot) {
    transition: border-color var(--fade-dur) var(--ease-fade);
  }

  #acct-layout.is-split-sliding :is(.acct-summary, .acct-side-head, .acct-group-head, .acct-sheet-head, .acct-list-foot) {
    border-color: transparent;
    transition: none;
  }

  #acct-layout .acct-rows > .acct-row + .acct-row::before {
    transition: opacity var(--fade-dur) var(--ease-fade);
  }

  #acct-layout.is-split-sliding .acct-rows > .acct-row + .acct-row::before {
    opacity: 0;
    transition: none;
  }

  #acct-layout .acct-sheet-table :is(.acct-change, .acct-col-change, .acct-spark, .acct-col-trend) {
    transition: opacity var(--fade-dur) var(--ease-fade);
  }

  #acct-layout.is-split-sliding .acct-sheet-table :is(.acct-change, .acct-col-change, .acct-spark, .acct-col-trend) {
    opacity: 0;
    transition: none;
  }

  #acct-layout.is-split-sliding .acct-sheet-table .acct-row > .acct-row-link,
  #acct-layout.is-split-sliding .acct-sheet-table .acct-total-head::before,
  #acct-layout.has-detail.is-split-sliding .acct-sheet-table .acct-row.is-selected > .acct-row-link::after,
  #acct-layout.has-detail.is-split-sliding .acct-sheet-table .acct-row:not(.is-selected) > .acct-row-link:hover::after {
    background: transparent;
    box-shadow: none;
    transition: none;
  }

  #acct-layout.is-split-sliding .acct-sheet-table .acct-row-link:focus-visible,
  #acct-layout.is-split-sliding .acct-sheet-table .acct-total-link:focus-visible::after {
    outline-color: transparent;
  }
}

/* A leader's colour, registered so it can fade (the table sets it). */
@property --acct-leader {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

/* How far a name or figure is from where it lands as the card slides (splitmotion.js). */
@property --split-dx {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ============================================================================
   Banner, toolbar and the as-of control
   ============================================================================ */

/* --toolbar-pad-x is read by the date picker, which on a phone reaches back across
   this padding to fill the card; the two change together. */
.bs-nav-toolbar {
  --toolbar-pad-x: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--toolbar-pad-x) var(--space-2);
  /* Its own top corners, for when the card stops clipping (below). */
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.acct-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The as-of date is a secondary control: a quiet button, not a headline. */
.acct-asof-prefix {
  color: var(--ink-3);
  font-weight: 500;
}

/* On a wide screen the picker opens under its trigger at the card's right edge. */
@media (min-width: 601px) {
  .acct-toolbar .bs-datepicker-popover {
    left: auto;
    right: 0;
  }
}

/* The card clips its overflow to its rounded corners, which also cut off the open date
   picker whenever the list was shorter than the picker. While the picker is open the
   card lets it hang out below; the toolbar rounds its own top corners instead. */
.table-container:has(> .bs-nav-toolbar .bs-datepicker-popover:not([hidden])) {
  overflow: visible;
}

/* ============================================================================
   The periods each figure's change is shown over: a checkbox each in the toolbar.
   ============================================================================ */
/* In the toolbar. On a phone, where the as-of control drops to a line of its own, the
   boxes take the room beside the title. Wider, the as-of control keeps its place beside
   the title, where its picker opens without running off the screen, and the boxes
   follow it, onto the next line when there is no room. */
.acct-change-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

@media (min-width: 601px) {
  .acct-toolbar .bs-datepicker-anchor {
    order: 1;
    margin-left: auto;
  }

  .acct-toolbar .acct-add-btn {
    order: 1;
  }

  .acct-change-bar {
    order: 2;
    margin-left: 0;
  }
}

/* Add account sits beside the as-of control: after it on a wide screen (above), and at
   the end of its line on a phone. */
.acct-add-btn {
  gap: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* On a phone the as-of control's line is shared with Add account, which says only "Add"
   there (its name stays "Add account") and has a fixed width, so the date picker, hung
   from the as-of control, can reach past it to the card's right edge as it does with the
   line to itself. */
@media (max-width: 600px) {
  .acct-toolbar {
    --acct-add-w: 5rem;
  }

  .acct-add-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* With the button, exactly a line: the pair leave the title's line to themselves. */
  .acct-toolbar .bs-datepicker-anchor {
    flex: 1 1 calc(100% - var(--space-3) - var(--acct-add-w));
  }

  .acct-toolbar .acct-add-btn {
    justify-content: center;
    width: var(--acct-add-w);
  }

  .acct-toolbar .bs-datepicker-popover {
    right: calc(-1 * (var(--toolbar-pad-x) + var(--space-3) + var(--acct-add-w)));
  }
}

/* Where the picker opens in the page's flow (below 600pt, components.css), it reaches
   past Add account by its margin rather than its offset, and the button keeps to the top
   of the line the open picker makes tall. */
@media (max-width: 599px) {
  .acct-toolbar .bs-datepicker-popover {
    right: auto;
    margin-right: calc(-1 * (var(--toolbar-pad-x) + var(--space-3) + var(--acct-add-w)));
  }

  .acct-toolbar:has(.bs-datepicker-popover:not([hidden])) .acct-add-btn {
    align-self: flex-start;
  }
}

/* Beside an account page until a laptop's width the as-of control is under the title, at
   its left, where its picker opens rightwards (above). */
@media (min-width: 600px) and (max-width: 1023px) {
  .acct-layout.has-detail .acct-toolbar .bs-datepicker-anchor {
    margin-left: 0;
  }
}

.acct-change-bar-label {
  margin-right: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

/* Read out but not shown where the list is narrow: a phone, and beside an account page. */
@media (max-width: 600px) {
  .acct-change-bar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  .acct-layout.has-detail .acct-change-bar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Each period is a checkbox in a pill the whole of which takes the tap. */
.acct-period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 2.75rem;
  min-height: 32px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.acct-period:hover {
  background: var(--sunk);
}

.acct-period:has(input:checked) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.acct-period:has(input:focus-visible) {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.acct-period input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

@media (pointer: coarse) {
  .acct-period {
    min-height: 44px;
  }
}

/* ============================================================================
   The sheet (#acct-sheet, drawn by balancesheet.js): net worth, then the two sides it is
   made of, Assets and Debts, each with its total and its groups of accounts, then the
   groups counted in neither.

   Narrow, on a phone and beside an account's page below 1024px, each line stands on its
   own: its name at the left, and at the right its balance with its change over each
   period checked stacked under it. From 46rem the sheet is one table (a container query
   on the sheet, or on the whole layout beside a page on a laptop): .acct-sheet-table is a grid
   whose columns every line shares through subgrid, the name, the balance, a column per
   period and the accounts' trend. A figure column is as wide as its widest figure, the
   figures right-aligned in it so their cents stack and its name centred over it. The
   table fills the card, the names taking the room the figures leave, and a dotted leader
   runs from each name across to its balance.

   Every period's change is drawn; data-change-periods and data-chart-period on
   .acct-layout say which show, so checking another redraws nothing.
   ============================================================================ */
.acct-layout {
  /* The list's edge inset (narrower on a phone and beside an account's page), and the
     step each level is set in by: a group under its side, an account under its group. */
  --acct-inset: 1.25rem;
  --acct-step: 1rem;
}

.acct-sheet {
  container: acct-sheet / inline-size;
}

/* --acct-level is how many steps in a group's accounts start: one in a group of its own,
   two in a group under a side. A group's heading starts a step out from its accounts, and
   a side's at the edge. */
.acct-sheet-table {
  --acct-level: 0;
}

.acct-group {
  --acct-level: 1;
}

.acct-side .acct-group {
  --acct-level: 2;
}

/* Column names: only the table has them. */
.acct-sheet-head {
  display: none;
}

@keyframes statementPulse {
  0% {
    background-color: var(--accent-soft);
  }
  100% {
    background-color: transparent;
  }
}

.statement-updated-pulse {
  animation: statementPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Net worth, the first line ---- */
/* The room around a total's heading (net worth's here, the sides' below) is the heading's
   own padding, as much above as below, so its wash fills its row as an account's does
   and its text sits in the middle. */
.acct-summary {
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.acct-summary:empty {
  display: none;
}

.acct-group.acct-group-networth {
  padding: 0;
}

.acct-group-networth .acct-group-head {
  margin-bottom: 0;
  padding: var(--space-3) 0;
  border-bottom: 0;
  font-size: 20px;
}

/* Net worth reads first: the figure a size up from every other total. */
.acct-group-networth .acct-group-total-line {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.02em;
}

/* Why a sheet in more than one currency has more than one of every total: one quiet
   line, since the totals themselves already show it. Neutral: nothing needs doing. */
.acct-currency-note {
  margin: 0 var(--acct-inset) var(--space-3);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.acct-currency-note[hidden] {
  display: none;
}

/* ---- Sides, groups and their headings ---- */
.acct-groups {
  padding: 0 0 var(--space-2);
}

/* Assets and Debts: the sheet's two sections, in the display face with a firmer rule
   under them than any group's. */
.acct-side {
  padding: 0;
}

.acct-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 var(--acct-inset);
  padding: var(--space-4) 0;
  border-bottom: 2px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.acct-side-head .acct-group-total-line {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* A group's heading reads like a side's, a size down: a group of its own (Needs a type,
   Possible duplicates and the folded ones) with a rule under it, a group under a side
   set in, without one. */
.acct-group {
  padding: var(--space-8) 0 var(--space-1);
}

.acct-groups > .acct-group:first-child {
  padding-top: var(--space-4);
}

.acct-groups > .acct-side:first-child > .acct-side-head {
  padding-block: var(--space-3);
}

.acct-side .acct-group {
  padding: var(--space-4) 0 0;
}

.acct-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 var(--acct-inset) var(--space-1);
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.acct-side .acct-group-head {
  margin-left: calc(var(--acct-inset) + var(--acct-step));
  padding-bottom: var(--space-1);
  border-bottom: 0;
}

.acct-group-name,
.acct-side-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
}

.acct-group-note,
.acct-group-count {
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* In a folded group's heading: how many of its accounts need a sign-in. */
.acct-group-attn {
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--attn);
}

/* A heading's figures: per currency its total, then its changes. They cannot be added
   into one. */
.acct-group-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-figure);
  white-space: nowrap;
}

/* Net worth's line and the sides' headings open the total's sheet (totalpage.js). The
   name is the link, and its box is stretched over the heading, figures and all, above
   them, so a press anywhere on the heading opens it; the fold of other currencies sits
   above that again. The heading's own wash, for hover and for the sheet being open, is
   behind its text. A heading can't be one link as an account's row is, since the fold is
   a button, but its wash looks like a row's: square, the heading's full height, and
   across the card's width from the heading set in from both sides. */
.acct-total-head {
  position: relative;
  isolation: isolate;
}

.acct-total-head::before,
.acct-total-link::after {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--acct-inset));
}

.acct-total-head::before {
  z-index: -1;
  transition: background-color var(--dur) var(--ease-out);
}

.acct-total-link::after {
  z-index: 1;
}

.acct-total-head .acct-fold {
  position: relative;
  z-index: 2;
}

.acct-total-link {
  color: inherit;
  text-decoration: none;
}

/* What of a total's name glides as the list makes room for a page (splitmotion.js):
   moving, the link itself would hold its stretched box in its own. */
.acct-total-label {
  display: inline-block;
}

/* The name's own box is shorter than a finger, so on a touch screen it is grown to 44pt,
   without moving anything. */
@media (pointer: coarse) {
  .acct-total-link {
    padding-block: var(--space-2);
    margin-block: calc(-1 * var(--space-2));
  }
}

/* Where a pointer hovers only, as for an account's row (.acct-row-link:hover). */
@media (hover: hover) {
  .acct-total-head:hover::before {
    background: var(--sunk);
  }
}

.acct-total-link:focus-visible {
  outline: none;
}

.acct-total-link:focus-visible::after {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.acct-total-head.is-selected::before {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---- Rows ---- */
.acct-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acct-row {
  position: relative;
}

/* A hairline between one account and the next, from where their names start, so the eye
   keeps to its line across to the figures. */
.acct-rows > .acct-row + .acct-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--acct-rule-start, 0);
  right: var(--acct-rule-end, 0);
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  pointer-events: none;
}

.acct-row-link {
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

/* Only where a pointer hovers: on a phone a tapped row kept it, and iOS's picture of the
   list for its swipe back showed the account just opened greyed out. */
@media (hover: hover) {
  .acct-row-link:hover {
    background: var(--sunk);
  }
}

.acct-row-link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.acct-row.is-selected > .acct-row-link {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Shown beneath an account's page as a swipe takes it back (phonemotion.js), the list no
   longer marks the account as open: it stayed marked until the route back caught up. */
.acct-list-pane.is-revealed .acct-row.is-selected > .acct-row-link {
  background: none;
  box-shadow: none;
}

.acct-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acct-row-name {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.acct-row-sub {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* Whose the account is, as a quiet tag after its name: one name, or several for a joint
   account (household.js). It never wraps inside itself; the name gives way first. */
.acct-row-owner {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--ink-2);
  white-space: nowrap;
  vertical-align: 1px;
  flex: none;
}

/* A day to three behind says how old it is behind half an amber dot (ageNote); past
   three days the dot is whole and the line amber (attentionNote): one dot filling up. */
.acct-row-age {
  color: var(--ink-2);
  font-weight: 500;
}

.acct-row-age::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.35rem;
  border: 1.5px solid var(--attn);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--attn) 50%, transparent 50%);
  vertical-align: 0.06em;
}

/* Only a row that needs looking at says so, in amber. */
.acct-row-attn {
  color: var(--attn);
}

.acct-row-attn::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.1em;
}

.acct-row-amount {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.acct-row-closed {
  font-weight: 400;
  color: var(--ink-3);
}

.acct-spark {
  display: block;
  width: 4.5rem;
  height: 1.5rem;
  overflow: visible;
}

.acct-spark-line {
  stroke: var(--chart-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acct-side-debts .acct-spark-line,
.acct-group-excluded .acct-spark-line,
.acct-group-duplicates .acct-spark-line {
  stroke: var(--ink-3);
}

/* ---- Changes ---- */
.acct-row-changes,
.acct-group-changes {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acct-change {
  display: none;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}

.acct-change-period {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.acct-change.is-none .acct-change-value {
  color: var(--ink-3);
  font-weight: 400;
}

/* A change's percentage, quieter than the amount beside it. */
.acct-change-pct {
  font-weight: 400;
  color: var(--ink-3);
}

.acct-layout[data-change-periods~="1d"] :is(.acct-change, .acct-col-change)[data-period="1d"],
.acct-layout[data-change-periods~="1m"] :is(.acct-change, .acct-col-change)[data-period="1m"],
.acct-layout[data-change-periods~="3m"] :is(.acct-change, .acct-col-change)[data-period="3m"],
.acct-layout[data-change-periods~="1y"] :is(.acct-change, .acct-col-change)[data-period="1y"] {
  display: inline-flex;
}

/* A row's chart covers the longest period checked; with only the past day, or nothing,
   checked there is none. */
.acct-layout:not([data-chart-period="1m"]) :is(.acct-spark, .acct-col-trend)[data-period="1m"],
.acct-layout:not([data-chart-period="3m"]) :is(.acct-spark, .acct-col-trend)[data-period="3m"],
.acct-layout:not([data-chart-period="1y"]) :is(.acct-spark, .acct-col-trend)[data-period="1y"] {
  display: none;
}

/* ---- Holdings, controls and notes under a row ---- */

/* A control that acts on the row sits under it, outside the link. */
.acct-row-control {
  margin: 0 var(--acct-inset) var(--space-2) var(--acct-indent, var(--acct-inset));
}

select.acct-row-control {
  width: calc(100% - var(--acct-indent, var(--acct-inset)) - var(--acct-inset));
  max-width: 24rem;
}

/* Under a hand-entered value that is months old: a quiet way to its balance history. The
   age itself is an ordinary note, since an old value is not a problem. */
.acct-row-update {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-top: calc(-1 * var(--space-2));
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.acct-row-update:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.acct-row-update:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (pointer: coarse) {
  .acct-row-update {
    min-width: 44px;
    min-height: 44px;
    margin-top: calc(-1 * var(--space-3));
  }
}

/* Under a row in Needs a type: the type its name suggests, and Use to take it. The picker
   below it stays for any other type. */
.acct-type-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
}

.acct-type-guess strong {
  font-weight: 600;
  color: var(--ink);
}

.acct-type-sep {
  color: var(--ink-3);
}

.acct-type-use {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.acct-type-use:hover {
  text-decoration-color: currentColor;
}

.acct-type-use:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.acct-type-use:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.acct-type-suggest-all {
  margin: 0 var(--acct-inset) var(--space-2);
}

@media (pointer: coarse) {
  .acct-type-use {
    min-width: 44px;
    min-height: 44px;
  }

  .acct-type-suggest-all .btn {
    min-height: 44px;
  }
}

/* Where the balance came from and when, while "Show Data Source" is on. */
.row-timestamp-detail {
  font-size: var(--fs-label);
  color: var(--ink-3);
}

.row-timestamp-provider {
  font-weight: 600;
  color: var(--ink-2);
}

/* Groups that add to no total read quieter than those that do. Possible duplicates are a
   question waiting on an answer, so their note is amber, the colour for "needs you"; the
   accent would have read as a gain. */
.acct-group-duplicates .acct-group-note,
.acct-group-unknown .acct-group-note {
  color: var(--attn);
}

.acct-group-excluded .acct-row-amount,
.acct-group-duplicates .acct-row-amount,
.acct-group-excluded .acct-group-total,
.acct-group-duplicates .acct-group-total {
  color: var(--ink-3);
}

/* Closed accounts, and those left out of net worth: collapsed under their heading. */
details.acct-group > summary {
  cursor: pointer;
  list-style: none;
  min-height: 2.75rem;
  align-items: center;
}

details.acct-group > summary::-webkit-details-marker {
  display: none;
}

/* The arrow follows the name, so the name lines up with the other groups' and the total
   stands at the right edge with theirs. */
details.acct-group > summary .acct-group-name::after {
  content: "";
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 0.25rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}

details.acct-group[open] > summary .acct-group-name::after {
  transform: translateY(0.1rem) rotate(-135deg);
}

details.acct-group > summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.acct-empty {
  padding: var(--space-6) 1.25rem;
}

.acct-list-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 1.25rem;
  border-top: 1px solid var(--line);
}

/* ---- Folds: the currencies after the first, where the list is narrow ----
   On a phone and beside an account's page a sheet in several currencies keeps the
   accounts near the top: each total in other currencies than its first folds into one
   line under it that opens on them (headTotalsHTML). The table shows every currency. */
.acct-fold {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.acct-fold-chevron {
  flex: none;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease-out);
}

.acct-fold[aria-expanded="true"] .acct-fold-chevron {
  transform: rotate(180deg);
}

.acct-fold:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.acct-fold-more {
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
  white-space: nowrap;
}

.acct-group-fold {
  justify-content: flex-end;
  min-height: 1.5rem;
}

@media (pointer: coarse) {
  .acct-fold {
    min-height: 44px;
  }
}

/* ============================================================================
   Narrow: each line on its own.
   ============================================================================ */
@container acct-sheet (width < 46rem) {
  .acct-group,
  .acct-row {
    --acct-indent: calc(var(--acct-inset) + var(--acct-level) * var(--acct-step));
  }

  /* A name is never far from its figure here: no hairline runs between one account and
     the next, nor under a group's heading. */
  .acct-rows > .acct-row + .acct-row::before {
    content: none;
  }

  .acct-group-head {
    border-bottom: 0;
  }

  /* The whole row is one link: name and bank, sparkline, balance. The balance stands on
     the name's line, its changes under it. */
  .acct-row-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem minmax(6.5rem, max-content);
    align-items: start;
    column-gap: var(--space-3);
    min-height: 3.5rem;
    padding: var(--space-2) var(--acct-inset) var(--space-2) var(--acct-indent);
  }

  .acct-row-link > .acct-spark {
    align-self: center;
  }

  .acct-layout[data-chart-period="none"] .acct-row-link {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .acct-row-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
  }

  .acct-row-changes,
  .acct-group-changes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .acct-group-changes {
    margin-bottom: 2px;
  }

  .acct-row-closed {
    grid-column: -2 / -1;
  }

  /* Under a balance, a period with nothing to compare with is left out. */
  .acct-layout[data-change-periods] .acct-change.is-none[data-period] {
    display: none;
  }

  .acct-fold {
    display: flex;
  }

  .acct-group-total:has(> .acct-group-fold[aria-expanded="false"]) > .acct-other-currency {
    display: none;
  }

  .acct-summary:has(.acct-group-fold[aria-expanded="false"]) .acct-currency-note {
    display: none;
  }
}

/* ============================================================================
   Wide: one table.
   ============================================================================ */
@container acct-sheet (width >= 46rem) {
  .acct-sheet-table {
    --acct-col-gap: 1.75rem;
    --acct-leader: color-mix(in srgb, var(--ink-3) 35%, transparent);
    display: grid;
    grid-template-columns:
      [name] 1fr
      [balance] auto
      [c1d] auto [c1m] auto [c3m] auto [c1y] auto
      [trend] auto
      [end-pad] var(--space-2)
      [end];
    padding: 0 var(--acct-inset);
  }

  /* Every line, and everything holding lines, spans the table and shares its columns. */
  .acct-sheet-table :is(.acct-sheet-head, .acct-summary, .skel-summary, .acct-groups, .acct-side, .acct-group, .acct-group-head, .acct-side-head, .acct-rows, .acct-row, .acct-row-link, .statement-holdings, .statement-holding-row) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: normal;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* A heading's name starts where the rows' washes do, so its wash reaches past it, a
     little further on the left for the open sheet's bar. */
  .acct-sheet-table .acct-total-head::before,
  .acct-sheet-table .acct-total-link::after {
    inset: 0 calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-3));
  }

  /* A folded group's rows join the table too; the closed group still hides them. */
  .acct-sheet-table details.acct-group::details-content {
    display: contents;
  }

  .acct-sheet-table details.acct-group:not([open]) > :not(summary) {
    display: none;
  }

  /* Lines that span the table rather than sit in its columns. */
  .acct-sheet-table :is(.acct-currency-note, .empty-state, .skel-group, .acct-type-suggest-all) {
    grid-column: 1 / -1;
    margin-inline: 0;
  }

  .acct-sheet-table .acct-row-control {
    grid-column: name / end;
    justify-self: start;
    margin-left: calc(var(--acct-level) * var(--acct-step));
    margin-right: 0;
  }

  .acct-sheet-table select.acct-row-control {
    width: 20rem;
    max-width: 100%;
  }

  /* The wrappers a narrow line stacks its figures in give their cells to the table. */
  .acct-sheet-table :is(.acct-group-total, .acct-group-changes, .acct-row-figures, .acct-row-changes) {
    display: contents;
  }

  /* Every currency has its line; no folds. */
  .acct-sheet-table .acct-fold {
    display: none;
  }

  .acct-sheet-table .statement-row-dots {
    display: none;
  }

  /* Which column each cell is in. A heading's currencies each take a line of the table,
     their total and changes on it in turn; an account's cells are all on its first. */
  .acct-sheet-table :is(.acct-group-name, .acct-side-name, .acct-row-main, .statement-holding-name) {
    grid-column: name;
  }

  .acct-sheet-table :is(.acct-col-balance, .acct-group-total-line, .acct-row-amount, .statement-holding-value) {
    grid-column: balance;
  }

  .acct-sheet-table :is(.acct-change, .acct-col-change)[data-period="1d"] {
    grid-column: c1d;
  }

  .acct-sheet-table :is(.acct-change, .acct-col-change)[data-period="1m"] {
    grid-column: c1m;
  }

  .acct-sheet-table :is(.acct-change, .acct-col-change)[data-period="3m"] {
    grid-column: c3m;
  }

  .acct-sheet-table :is(.acct-change, .acct-col-change)[data-period="1y"] {
    grid-column: c1y;
  }

  .acct-sheet-table :is(.acct-spark, .acct-col-trend) {
    grid-column: trend;
  }

  .acct-sheet-table .acct-row-link :is(.acct-row-main, .acct-spark, .acct-row-amount, .acct-change) {
    grid-row: 1;
  }

  /* Each level's names start a step further in. */
  .acct-sheet-table :is(.acct-group-name, .acct-side-name) {
    padding-left: calc(max(0, var(--acct-level) - 1) * var(--acct-step));
  }

  .acct-sheet-table .acct-row-main {
    padding-left: calc(var(--acct-level) * var(--acct-step));
  }

  .acct-sheet-table .statement-holding-name {
    padding-left: calc((var(--acct-level) + 1) * var(--acct-step));
  }

  .acct-rows > .acct-row {
    --acct-rule-start: calc(var(--acct-level) * var(--acct-step));
  }

  /* Figures stand at their column's right edge, so their digits line up; a column's
     name is centred over them. The room between columns is each cell's own. */
  .acct-sheet-table :is(.acct-group-total-line, .acct-row-amount, .statement-holding-value, .acct-change) {
    justify-self: end;
    margin-left: var(--acct-col-gap);
    text-align: right;
  }

  .acct-sheet-table :is(.acct-col-balance, .acct-col-change, .acct-col-trend) {
    justify-self: stretch;
    margin-left: var(--acct-col-gap);
    text-align: center;
  }

  /* A dotted leader runs from each name across to its balance, as in a printed
     statement, so the eye keeps to the line across a wide card: from the end of the name
     to its column's edge, and on in the balance's own cell up to the figure. The balance
     column starts where the names' ends, so the two meet. Not after a folded group's
     name, which ends in its arrow, nor beside a total in a second currency, which has no
     name on its line. */
  .acct-sheet-table :is(.acct-col-balance, .acct-group-total-line, .acct-row-amount, .statement-holding-value) {
    margin-left: 0;
  }

  .acct-sheet-table .acct-col-balance {
    padding-left: var(--space-3);
  }

  .acct-sheet-table :is(.acct-row-name, .acct-side-name, section.acct-group > .acct-group-head .acct-group-name, .statement-holding-name) {
    display: flex;
    align-items: baseline;
  }

  .acct-sheet-table :is(.acct-row-link .acct-row-amount:not(.acct-row-closed), section.acct-group > .acct-group-head .acct-group-total > .acct-group-total-line:first-child, .acct-side-head .acct-group-total > .acct-group-total-line:first-child, .statement-holding-value) {
    display: flex;
    align-items: baseline;
    justify-self: stretch;
    justify-content: flex-end;
  }

  .acct-sheet-table :is(.acct-row-name, .acct-side-name, section.acct-group > .acct-group-head .acct-group-name, .statement-holding-name)::after,
  .acct-sheet-table :is(.acct-row-link .acct-row-amount:not(.acct-row-closed), section.acct-group > .acct-group-head .acct-group-total > .acct-group-total-line:first-child, .acct-side-head .acct-group-total > .acct-group-total-line:first-child, .statement-holding-value)::before {
    content: "";
    flex: 1 1 0;
    min-width: 0;
    align-self: baseline;
    height: 2px;
    background-image: radial-gradient(circle, var(--acct-leader) 0.9px, transparent 1.25px);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    background-position: left center;
  }

  .acct-sheet-table :is(.acct-row-name, .acct-side-name, section.acct-group > .acct-group-head .acct-group-name, .statement-holding-name)::after {
    margin-left: var(--space-3);
  }

  .acct-sheet-table :is(.acct-row-link .acct-row-amount:not(.acct-row-closed), section.acct-group > .acct-group-head .acct-group-total > .acct-group-total-line:first-child, .acct-side-head .acct-group-total > .acct-group-total-line:first-child, .statement-holding-value)::before {
    margin-right: var(--space-3);
  }

  .acct-sheet-table .acct-spark {
    align-self: center;
    margin-left: var(--acct-col-gap);
  }

  /* An amount over its percentage, the period's name left to be read out: the column's
     name says it. */
  .acct-sheet-table .acct-change {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
  }

  .acct-sheet-table .acct-change-period {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .acct-sheet-table .acct-change-value {
    font-size: 13px;
  }

  .acct-sheet-table .acct-change-pct {
    min-height: 1lh;
  }

  /* The column names. */
  .acct-sheet-head {
    padding: var(--space-3) 0 var(--space-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .acct-col-change {
    display: none;
  }

  .acct-sheet-head > * {
    grid-row: 1;
  }

  .acct-sheet-head:has(+ .acct-summary:empty) {
    display: none;
  }

  .acct-group-networth .acct-group-head {
    font-size: 21px;
  }

  .acct-group-networth .acct-group-total-line {
    font-size: 21px;
  }

  .acct-side-head,
  .acct-group-head {
    align-items: baseline;
    row-gap: 0;
  }

  .acct-side .acct-group-head {
    padding-bottom: var(--space-1);
  }

  .acct-row-link {
    align-items: baseline;
    min-height: 3.25rem;
    padding-block: var(--space-2);
  }

  .acct-rows > .acct-row + .acct-row::before {
    right: 0;
  }

  /* A closed account says when it closed where its balance would be, without widening
     the balance column for it. */
  .acct-sheet-table .acct-row-closed {
    grid-column: balance / end;
    justify-self: start;
    margin-left: var(--acct-col-gap);
  }

  .acct-sheet-table .statement-holding-row {
    padding-block: 0.2rem;
  }

  .acct-sheet-table .statement-holdings {
    margin-bottom: var(--space-2);
  }

  /* The skeleton holds a table's width until the figures land. */
  .acct-sheet-table .skel-group {
    min-width: min(40rem, 100cqi - 2 * var(--acct-inset));
  }
}

/* The accounts' trend takes a column where there is room for it. */
@container acct-sheet (46rem <= width < 56rem) {
  .acct-sheet-table :is(.acct-spark, .acct-col-trend) {
    display: none;
  }
}

/* ============================================================================
   Per-asset rows under a crypto account. Indented under their account and quieter
   than it, because they explain the figure above rather than add to it.
   ============================================================================ */
.statement-holdings {
  margin: 0 0 var(--space-2);
}

.statement-holding-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.2rem var(--acct-inset, 1.25rem) 0.2rem calc(var(--acct-indent, 1.25rem) + 1rem);
  font-size: var(--fs-meta);
  color: var(--ink-2);
}

.statement-holding-name {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
}

.statement-holding-asset {
  font-weight: 600;
  color: var(--ink-2);
}

.statement-holding-qty {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.statement-holding-price {
  white-space: nowrap;
}

.statement-holding-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.statement-holding-unpriced {
  font-style: italic;
  color: var(--ink-3);
}

.statement-row-dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--border-strong);
  margin: 0 0.6rem 0.3rem;
  min-width: 1.5rem;
  opacity: 0.4;
}

/* On a phone "quantity @ price" rarely fits beside the asset and its value. Every row
   gets the same two lines instead: asset and value on top, quantity @ price underneath. */
@media (max-width: 640px) {
  .statement-holding-row {
    display: grid;
    grid-template-columns: auto minmax(1.5rem, 1fr) auto;
    row-gap: 0.1rem;
    padding-left: calc(var(--acct-indent, 1.25rem) + 0.75rem);
  }

  .statement-holding-name {
    display: contents;
  }

  .statement-holding-asset {
    grid-column: 1;
    grid-row: 1;
  }

  .statement-holding-row .statement-row-dots {
    grid-column: 2;
    grid-row: 1;
  }

  .statement-holding-value {
    grid-column: 3;
    grid-row: 1;
  }

  .statement-holding-qty {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--fs-label);
  }
}

/* ============================================================================
   One account's page, and a total's sheet, which is drawn the same
   ============================================================================ */
.history-chart-wrap {
  position: relative;
}

.acct-detail-pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}

/* An account's page slides in a little as it opens (balancesheet.js adds the class only
   then, and not under reduced motion), fading on the even curve fades take, as the
   Review pane's transaction does. The fade ends last, and the class goes with it. */
@keyframes acctPageIn {
  from { transform: translateX(12px); }
  to { transform: none; }
}

@keyframes acctPageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.acct-detail-pane.is-entering {
  animation: acctPageIn var(--dur) var(--ease-out), acctPageFade var(--fade-dur) var(--ease-fade);
}

.acct-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.acct-back {
  gap: var(--space-1);
  padding-left: var(--space-2);
}

/* Shown only beside the list (the split view above); a phone has the back button. */
.acct-close {
  display: none;
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--radius-full);
  line-height: 1;
}

.acct-close:hover {
  background: var(--sunk);
}

@media (pointer: coarse) {
  .acct-close {
    top: var(--space-2);
    right: var(--space-2);
    min-width: 44px;
    min-height: 44px;
  }
}

/* On a phone the page takes the list's place, and the way back stays in reach: the bar
   holding it sticks under the navbar, across the card's width, and the details scroll
   beneath it. */
.acct-back-bar {
  position: sticky;
  top: calc(3.75rem + 1px);
  z-index: 5;
  display: flex;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--surface);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

/* Scrolled to from a row's Update link (updateAccountValue), the balance history comes to
   rest under the back bar, which stays stuck under the navbar, not behind it. */
@media (max-width: 599px) {
  #modal-acc-history {
    scroll-margin-top: 4.5rem;
  }
}

.acct-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.acct-page-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.acct-page-sub > span:empty {
  display: none;
}

.acct-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 650;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.acct-page-title:focus {
  outline: none;
}

.acct-page-status {
  font-size: var(--fs-meta);
  color: var(--ink-2);
}

.acct-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
}

.acct-hero-amount {
  font-family: var(--font-display);
  font-size: var(--fs-hero-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-figure);
  font-variant-numeric: tabular-nums;
}

.acct-hero-change {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.acct-hero-change.is-up {
  color: var(--accent);
}

.acct-hero-asof {
  margin-top: calc(-1 * var(--space-3));
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.acct-hero-asof:empty {
  display: none;
}

@media (min-width: 1024px) {
  .acct-hero-amount {
    font-size: 2.75rem;
  }
}

/* The period control: a segmented control on the sunk fill. */
.acct-range {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--space-2);
  background: var(--sunk);
  border-radius: var(--radius-full);
}

.acct-range-btn {
  min-width: 3rem;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 600;
  cursor: pointer;
}

.acct-range-btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.acct-range-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.acct-chart-svg {
  display: block;
  width: 100%;
  height: 200px;
  overflow: visible;
  touch-action: pan-y;
}

.acct-chart-svg[hidden] {
  display: none;
}

.acct-chart-line {
  stroke: var(--chart-line);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.acct-chart-area {
  fill: var(--accent-soft);
  opacity: 0.6;
}

.acct-chart-end,
.acct-chart-dot {
  fill: var(--chart-line);
  stroke: var(--surface);
  stroke-width: 2;
}

.acct-chart-crosshair {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* In the chart's place, at the chart's height, so the page below does not move when a
   chart turns out to have nothing to draw. */
.acct-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin: 0;
  padding: var(--space-6) 0;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  text-align: center;
}

.acct-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.acct-fact dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.acct-fact dd {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ink);
}

.acct-block-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.acct-block .statement-holding-row {
  padding-left: 0;
  padding-right: 0;
}

.acct-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* At most ACCOUNT_ACTIVITY_ROWS rows (accountdialog.js), each one line of name over one
   of date, cut short with an ellipsis rather than wrapped, so the list's height is known
   before its rows are: the room loadAccountExtras keeps for them is exactly what they
   take. */
#account-page,
#total-page {
  --acct-activity-row-h: 3.5rem;
  --acct-activity-more-h: 2.75rem;
}

.acct-activity-row {
  box-sizing: border-box;
  height: var(--acct-activity-row-h);
}

/* The whole row is the link to the transaction in Review's detail. */
.acct-activity-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-sizing: border-box;
  height: 100%;
  padding: var(--space-2) 0;
  color: inherit;
  text-decoration: none;
}

.acct-activity-link:hover .acct-activity-desc {
  text-decoration: underline;
}

/* Review's toast (transactions.css) with words alone: no Undo button to make room for. */
.acct-toast {
  padding: var(--space-3) var(--space-4);
}

#acct-activity > .skel-row {
  box-sizing: border-box;
  height: var(--acct-activity-row-h);
}

.acct-activity-row + .acct-activity-row {
  border-top: 1px solid var(--line);
}

.acct-activity-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acct-activity-desc {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
}

.acct-activity-meta {
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.acct-activity-desc,
.acct-activity-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-activity-more {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--acct-activity-more-h);
  border-top: 1px solid var(--line);
}

.acct-activity-more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.acct-activity-more-link:hover {
  text-decoration: underline;
}

.acct-activity-amount {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acct-activity-empty {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  padding: var(--space-2) 0;
}

.acct-chart-empty[hidden],
.acct-chart-hint[hidden] {
  display: none;
}

/* What a day on a total's chart does. */
.acct-chart-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

/* A finger's taps only read the chart's days (bindChartPointer): the month ends below
   are its way to a past balance sheet. */
@media (pointer: coarse) {
  .acct-chart-hint {
    display: none;
  }
}

/* While another day's balance sheet loads (markDayLoading in balancesheet.js), the
   figures it will replace grey out, after a quarter second so a quick answer doesn't
   flash them, and come back at once when it lands. The rows can still be pressed. */
#view-balancesheet [aria-busy="true"]:is(#bs-net-worth-summary, #bs-corporate-statement, .acct-hero, .acct-hero-asof, #acct-facts, #total-key, #total-days-section) {
  opacity: 0.5;
  transition: opacity 150ms ease 250ms;
}

/* The day the list shows, marked on an account's chart and the totals': its date over the
   mark, in the mark's colour. */
.acct-chart-asof-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--chart-net-worth);
}

/* A day on an account's chart or the totals' opens its balance sheet. */
#acct-chart,
#total-chart {
  cursor: pointer;
}

/* The totals' chart: the sheet's own total in the accent, drawn over the other two,
   which are thinner, grey and named at their ends. The key and the readout colour their
   dots the same way. */
.acct-chart-line.acct-chart-other {
  stroke: var(--ink-3);
  stroke-width: 1.75;
  opacity: 0.7;
}

:is(.acct-chart-end, .acct-chart-dot).acct-chart-other {
  fill: var(--ink-3);
}

.acct-chart-other-label {
  font-size: 11px;
  fill: var(--ink-3);
}

.dot-marker.acct-dot-main {
  background-color: var(--chart-line);
}

.dot-marker.acct-dot-other {
  background-color: var(--ink-3);
}

/* The key to the totals' chart: each total's dot and name, its figure, its change over
   the period, and the switch that draws its line, in columns. */
.total-key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: var(--space-4);
  row-gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-sm);
  font-variant-numeric: tabular-nums;
}

.total-key-item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  margin: 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color var(--dur) var(--ease-out);
}

/* Each row but its switch is a button that moves the sheet onto its total. */
.total-key-row {
  display: grid;
  grid-column: 1 / 4;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.total-key-item:has(.total-key-row:hover) {
  background: var(--sunk);
}

.total-key-row:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.total-key-item.is-focused {
  background: var(--accent-soft);
}

/* The sheet's own line is always drawn: its switch is held on. */
.total-key-switch .switch-input:disabled {
  cursor: default;
}

.total-key-row.is-focused .total-key-name {
  font-weight: 600;
  color: var(--ink);
}

.total-key-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
}

.total-key-figure {
  font-weight: 600;
  color: var(--ink-figure);
  text-align: right;
}

.total-key-change {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  text-align: right;
}

.total-key-change.is-up {
  color: var(--accent);
}

/* $0 across an account's chart or the totals', when it is inside it. */
.acct-chart-zero line {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
  shape-rendering: crispEdges;
}

.acct-chart-zero text {
  font-size: 11px;
  fill: var(--ink-3);
}

/* The month end the list is showing. */
.total-day.is-current .acct-activity-desc {
  color: var(--accent);
}

/* While an account's chart and recent activity load (accountdialog.js), what follows the
   activity keeps its place in the layout but is not shown, so it can neither be seen
   moving nor tapped in the wrong place as the rows arrive above it. Opacity rather than
   visibility: visibility is inherited, and every field's transition on "all" would then
   animate its return, which WebKit never finishes inside a closed <details>. */
.acct-page.is-loading #acct-activity-section ~ * {
  opacity: 0;
  pointer-events: none;
}

/* While the activity loads, and after it lands when the hold's bound ended it first
   (is-reserved, accountdialog.js), the list keeps the room its most rows and See all take,
   so nothing below it moves once Save can be tapped. */
#acct-activity-section:is(.is-loading, .is-reserved) .acct-activity {
  /* 5 is ACCOUNT_ACTIVITY_ROWS. */
  min-height: calc(5 * var(--acct-activity-row-h) + var(--acct-activity-more-h));
}

/* The settings sections follow the page's own blocks. */
.acct-page .acc-section {
  margin-top: var(--space-2);
}

.acc-settings-actions {
  display: flex;
  justify-content: flex-end;
}

.acct-error-details {
  font-size: var(--fs-meta);
  color: var(--ink-2);
}

.acct-error-details > summary {
  cursor: pointer;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

/* An account that no longer exists: only its heading and the ways back. */
.acct-page.is-missing > :not(.acct-back-bar):not(.acct-close):not(.acct-page-head) {
  display: none;
}

@media (max-width: 600px) {
  .bs-nav-toolbar,
  .acct-summary {
    --toolbar-pad-x: 1rem;
  }

  .acct-layout {
    --acct-inset: 1rem;
  }

  /* A group under a side starts at the edge, a size down from the side's heading rather
     than a step in, so its accounts keep one step and the names their room beside the
     figures. */
  .acct-side .acct-group {
    --acct-level: 1;
  }

  .acct-side .acct-group-head {
    margin-left: var(--acct-inset);
  }

  .acct-list-foot {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .acct-row-link {
    grid-template-columns: minmax(0, 1fr) 3rem auto;
    column-gap: var(--space-2);
  }

  .acct-spark {
    width: 3rem;
  }

  /* On a phone the page stays a card inset in the page gutter, as each card on Settings
     and Activity is, with their padding. */
  .acct-page {
    padding: var(--space-4) var(--space-3);
  }
}

/* The smallest phones drop the sparkline: name and balance are what has to fit. */
@media (max-width: 374px) {
  .acct-row-link {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .acct-spark {
    display: none;
  }
}

/* ============================================================================
   Loading: the tab's skeleton (drawAccountsSkeleton in balancesheet.js) and an account
   page's chart and activity (drawAccountExtrasSkeleton in accountdialog.js), each in the
   box its content will fill.
   ============================================================================ */
.skel-group {
  padding: var(--space-3) 0 var(--space-1);
}

.skel-group + .skel-group {
  border-top: 1px solid var(--line);
}

.skel-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.4706em;
  padding: var(--space-1) 1.25rem;
  font-size: var(--fs-meta);
}

.skel-rows {
  margin: 0;
  padding: 0;
}

.skel-rows .skel-row {
  padding-inline: 1.25rem;
}

.skel-rows .skel-row + .skel-row {
  border-top: 0;
}

.skel-fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 2px;
  font-size: var(--fs-body-sm);
}

/* Over the chart's box, which keeps its height while empty. */
.skel-acct-chart {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

#acct-activity .skel-row {
  min-height: 3rem;
  padding-inline: 0;
}