/* what is specific to the integration UI. The tokens, the type, the tables,
   the dot pill and the control chrome come from aleta.css, which the build
   copies in beside this file (docs/aleta/ui-styling.md § 7); nothing here
   redefines a token. */

.app { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.25rem var(--app-gutter-x) 2.5rem; }
header.bar { display: flex; align-items: baseline; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
header.bar h1 { margin: 0; }
header.bar .who { color: var(--muted-foreground); margin-left: auto; font-size: .8125rem; }
nav { display: flex; gap: .875rem; }
nav a { color: var(--muted-foreground); cursor: pointer; text-decoration: none; white-space: nowrap; }
nav a:hover { color: var(--foreground); }
nav a.active { color: var(--foreground); font-weight: 600; }
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: .875rem 1rem; margin: .625rem 0; }

/* this UI writes bare <button>; the design system's default is the outline
   variant, with .primary as the solid one. */
button { display: inline-flex; align-items: center; gap: .375rem; height: 2rem; padding: 0 .625rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); color: var(--foreground); font: inherit; font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: all 120ms; }
button:hover { background: var(--muted); }
button:active { transform: translateY(1px); }
button:disabled { pointer-events: none; opacity: .5; }
button.primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
button.primary:hover { background: color-mix(in srgb, var(--primary) 80%, transparent); }

/* the first UI's status pill draws its dot from the connection status as the
   class; scoped to the panel's <main class="app">, so the shared pill below
   (a .pill__dot span, src/ui/pill.ts) never gets a second dot. Goes with the
   first UI. */
.app .pill::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--muted-foreground); flex: none; }
.app .pill.active::before { background: var(--chart-positive); }
.app .pill.needsReauthorization::before, .app .pill.pendingAuthorization::before { background: var(--chart-warning); }
.app .pill.revoked::before, .app .pill.disconnected::before, .app .pill.abandoned::before { background: var(--chart-negative); }

/* the link surface (docs/ui/link-surface.md): the host page framed in the
   app's step 3 and on Re-authorize at one fixed height, nothing measured, and
   the host filling whatever frames it. Account Linking is an iframe sized by
   its iframe-style attribute (100vh: the host's own viewport, the frame). */
:root { --link-surface-h: 640px; }
/* the box is the aggregator's: its colour on the border and the label, never on an Aleta control; the content inside is at most 650px wide and responsive below, so the box stops at 700px (Michael, 2026-10-07) */
/* the label sits on the box's top edge, 1.5rem tall, so the box keeps 2.25rem above it: the label and .75rem of air under the text; the corner under the label is square on the box and on the frame inside it, the other three stay rounded */
.link-surface { position: relative; width: 100%; max-width: 700px; margin: 2.25rem 0 .25rem; border: 1px solid var(--aleta-turquoise); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--background); }
.link-surface__label { position: absolute; top: 0; left: -1px; transform: translateY(-100%); height: 1.5rem; padding: 0 .5rem; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--aleta-turquoise); color: #fff; font-size: .75rem; font-weight: 500; line-height: 1.5rem; }
.link-surface__frame { display: block; width: 100%; height: var(--link-surface-h); border: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); }
html:has(body.link-host), body.link-host { height: 100%; margin: 0; overflow: hidden; }
.link-host__box { width: 100%; height: 100vh; }
.link-host__box > iframe, .link-host__box > mstar-aggregation-consumer-accountsetup { display: block; width: 100%; height: 100%; border: 0; }
.link-host__line { margin: 0; padding: 1rem; }

/* the shared components of src/ui/, written once here and imported by the
   app's page (docs/ui/structure.md § Shared components). The pill's chrome,
   the tab bar and the empty state's type are aleta.css's; these add what the
   token block lacks. Tokens only. */

/* pill.ts: the two tones aleta.css has no dot for */
.pill__dot--muted { background: var(--muted-foreground); }
.pill__dot--running { background: var(--chart-warning); }
@media (prefers-reduced-motion: no-preference) {
  .pill__dot--running { animation: pill-pulse 1.6s ease-in-out infinite; }
}
@keyframes pill-pulse { 50% { opacity: .35; } }

/* table.ts: the head with its count, a row that is the link, the footer */
.table { margin: 0 0 1.5rem; }
/* a table's title is a section heading: small, black, the count grey, the
   same as the account page's section headings (W3.14) */
.table__head { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); }
/* a count after a heading (table.ts's counted): secondary, grey, in parentheses */
.count { color: var(--muted-foreground); font-weight: 400; }
/* a name cell (a column declared `name` in table.ts: account, portfolio,
   entity, client, institution, security, description) is one line, at most
   300px, cut with an ellipsis, its full text in its title; a data cell (a
   date, an instant, an amount, a pill, a link, a button) is its content's
   width and never cut (W2.3). A header is one line cut too. A table is as
   wide as its content and never stretched: one narrower than the page simply
   ends (W3.4). The name sits in cell__name, one line clamped with an ellipsis
   that may break anywhere, so a name column gives way when the page is short
   rather than pushing the table past it. A cell with cell--wrap wraps even in
   a name column (W2.2). */
.table table { width: auto; }
/* a table wider than the page (the Accounts tree's aligned columns at 800px)
   scrolls sideways inside its own box rather than the page; while a row's
   quiet menu is open the box stops clipping, so the menu shows whole */
.table__scroll { overflow-x: auto; }
.table__scroll:has(details[open]) { overflow: visible; }
.table .table--fixed { table-layout: fixed; }
.table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a name gives way down to 10rem and no further (2026-10-14: at 800px the
   institutions and accounts read "Evergreen Ban…"); past that the table
   scrolls sideways in its own box */
.table td.cell--name { max-width: 300px; min-width: 10rem; }
/* the mapping column of a connection's linked accounts holds a client ›
   entity › portfolio › account path; the table is narrow, so it may run to
   500px before the ellipsis (W3.13) */
.table td.cell--name.col--mapping { max-width: 500px; }
/* the institution search: a row is an institution's full name, longer than an account's (2026-10-06) */
.flow .table td.cell--name.col--institution { max-width: 575px; }
/* a name in bold is 500, not the browser's 700: table name cells and every bold in a flow, which is always a name (2026-10-06) */
.table td.cell--name strong, .flow strong { font-weight: 500; }
.table .cell__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; overflow-wrap: anywhere; }
/* a wrapping cell breaks between words, never inside one ("Investme nt" at
   800px, 2026-10-14): its narrowest is its longest word */
.table td.cell--wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* a row's cells start at its top, on one baseline: a cell of several lines
   (a connection's accounts, a pill with its reason) runs down from the first
   line, and a row whose cells are each one line keeps the padding above and
   below equal, so it still reads centred; text, a pill and a button's label
   sit on the same line (Michael, 2026-10-14) */
.table td { vertical-align: baseline; }
.table__link { cursor: pointer; }
.table__link:focus-visible { outline-offset: -2px; }
.table__foot { padding: .5rem 0; border-top: 1px solid var(--border); }

/* states.ts: the one action under an empty state */
.empty__next { margin-top: .75rem; }
.error-state__retry { height: auto; padding: 0; border: 0; background: none; font-size: .75rem; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.error-state__retry:hover { background: none; text-decoration-color: var(--foreground); }

/* slideover.ts: one panel over the right edge, a scrim behind it */
.slideover__scrim { position: fixed; inset: 0; z-index: 10; background: color-mix(in srgb, var(--aleta-ink) 35%, transparent); }
.slideover { position: fixed; top: 0; right: 0; bottom: 0; z-index: 11; display: flex; flex-direction: column; width: min(480px, 100vw); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-dropdown); }
.slideover__bar { display: flex; align-items: center; gap: .5rem; padding: .75rem var(--app-gutter-x); border-bottom: 1px solid var(--border); }
.slideover__bar h2 { margin: 0; font-size: 1rem; }
.slideover__close { margin-left: auto; width: 2rem; justify-content: center; padding: 0; border-color: transparent; }
.slideover__body { flex: 1; overflow: auto; padding: 1rem var(--app-gutter-x) 2rem; }

/* a flow page's sections read as the account page's (W3.29): the heading
   small, black, 600; the text with more line-height; the statements apart */
.flow h3 { font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); margin: 1.5rem 0 .5rem; }
.flow p, .flow li { line-height: 1.6; }
.flow li { margin: .5rem 0; }
/* confirm.ts: the flow page's frame */
.confirm { max-width: 44rem; }
.confirm__data { margin: 0; padding-left: 1.25rem; }
.confirm__review { color: var(--muted-foreground); }
.confirm__todo { display: inline-block; margin: 0 0 .5rem; padding: .125rem .5rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-foreground); font-size: .75rem; font-weight: 500; }
.confirm__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }

/* table.ts: a sortable header is a quiet button */
.table__sort { height: auto; padding: 0; border: 0; background: none; font-size: inherit; font-weight: inherit; color: inherit; }
.table__sort:hover { background: none; color: var(--foreground); }

/* components/fedby.ts: the value of the account page's Fed by row (W2.6):
   the feeder as a nested facts table under "… feeds this account", its
   quiet menu (the host's quiet-menu) just right of it, opening to the
   right, its entries links; each row mapped there that does not feed on a
   line of its own after it, its "not feeding" in the to-do's colour (W3.30,
   2026-10-14) */
.fedby .facts { margin: 0; }
.fedby__feeder, .fedby__other { display: flex; align-items: flex-start; gap: .5rem; }
.fedby__feeds { margin: 0 0 .25rem; font-weight: 500; }
.fedby__other { margin-top: 1rem; }
.fedby--none { display: inline-flex; align-items: center; gap: .25rem; }
.fedby__not { font-size: .8125rem; color: var(--chart-warning); font-weight: 500; }
.fedby__not a { color: inherit; }
.fedby .quiet-menu { margin-left: 0; }
.fedby .quiet-menu > summary { line-height: 1.25rem; }
.fedby .quiet-menu__list { left: 0; right: auto; }
.fedby .quiet-menu__list > a { display: block; padding: .375rem .625rem; border-radius: var(--radius-md); color: var(--foreground); white-space: nowrap; text-decoration: none; }
.fedby .quiet-menu__list > a:hover { background: var(--muted); }

/* components/tasks-strip.ts: one row per task, the resolve actions under it */
.strip { margin: 0 0 1.5rem; }
.strip__rows { margin: 0; padding: 0; list-style: none; }
.strip__row { padding: .625rem 0; border-bottom: 1px solid var(--border); }
.strip__row:last-child { border-bottom: 0; }
.strip__row .micro { margin: .25rem 0 .375rem; }
.strip__input { max-width: 16rem; }
.strip__keep { display: inline-flex; align-items: center; gap: .375rem; margin-right: .75rem; }

/* pages/task.ts: the subject in sections, a duplicate pair side by side */
.task-subject { margin: 0 0 1.5rem; }
.task-subject h2 { margin: 0 0 .625rem; font-size: 1rem; }
.task-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: .75rem 0; }
.task-pair__side h3 { margin: 0 0 .625rem; font-size: .9375rem; color: var(--foreground); }
.task-pair__side .facts { margin-bottom: .875rem; }

/* a page's heading row, both owners' pages: the title, its tabs or kind, the actions at the end */
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head__end { margin-left: auto; }
.page-head__kind { font-size: .875rem; font-weight: 400; margin-left: .375rem; }

/* facts.ts, the label/value table (W2.7), and the slide-overs' <dl class="facts">:
   the label column sized to its content, the labels lighter and slightly
   smaller than the values, the values in the foreground colour. A value is one
   line (facts__line) or wraps (facts__wrap, and a bare dd). compact is the
   secondary metadata at the right of a page head: smaller, the values muted,
   the labels lighter still. A facts table nested in a value sits flush. */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: .375rem 1rem; margin: 0 0 1.25rem; font-size: .8125rem; color: var(--foreground); }
.facts > dt { font-size: .75rem; color: var(--muted-foreground); }
.facts > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts > dd.facts__line { white-space: nowrap; overflow-wrap: normal; }
.facts > dd.facts__wrap { white-space: normal; }
.facts dd > .facts { margin: 0; }
.facts--compact { grid-template-columns: max-content max-content; gap: .125rem .75rem; font-size: .75rem; line-height: 1rem; color: var(--muted-foreground); }
.facts--compact > dt { font-size: .6875rem; color: color-mix(in srgb, var(--muted-foreground) 70%, var(--background)); }
.facts--compact .iso__time { color: inherit; }
/* a raw record folded under a slide-over's facts */
.slideover__body h3 { margin-top: 1.25rem; }
.raw { margin-top: 1.25rem; font-size: .8125rem; }
.raw pre { overflow: auto; padding: .75rem; border-radius: var(--radius-md); background: var(--surface-frame); font-size: .75rem; }

/* pages/connections.ts: a client's tables under its name, the previous ones folded, the owner chooser */
.connections-client { margin: 0; }
.connections-client > h2 { margin: 0 0 .75rem; font-size: 1rem; }
/* the Feeds and Used to feed cells (W3.10): one line per entry, the total on
   its own last line, muted; the cell wraps between lines, never into the next
   column, and each line is cut with an ellipsis at the name cell's 300px */
.feeds__line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the tables of a perspective line up down the page (W3.12, as W3.11 for the
   Accounts tree): every column a minimum width, keyed by the column (table.ts
   `key`, so an Owner column before it does not shift it), the name columns
   fixed (min and max equal, the ellipsis or the wrap within). By connection
   and the previous fold share one set: their columns match. */
/* the institution columns of the Connections page are 350px (W3.39) */
.connections--by-connection :is(th, td).col--institution,
.connections--by-client :is(th, td).col--institution { min-width: 350px; max-width: 350px; }
.connections--by-institution :is(th, td).col--feeds,
.connections--by-client :is(th, td).col--feeds { min-width: 240px; max-width: 240px; }
.connections--by-connection :is(th, td).col--feeds { min-width: 200px; max-width: 200px; }
:is(.connections--by-connection, .connections--by-institution) :is(th, td).col--owner { min-width: 180px; max-width: 180px; }
:is(.connections--by-connection, .connections--by-institution, .connections--by-client) :is(th, td).col--status { min-width: 130px; }
:is(.connections--by-connection, .connections--by-institution, .connections--by-client) :is(th, td).col--expires { min-width: 100px; }
:is(.connections--by-connection, .connections--by-institution, .connections--by-client) :is(th, td).col--when { min-width: 150px; }
:is(.connections--by-connection, .connections--by-institution, .connections--by-client) :is(th, td).col--tasks { min-width: 60px; }
.connections--by-institution :is(th, td).col--via { min-width: 120px; }
.connections--by-institution :is(th, td).col--authorized-by { min-width: 180px; }
.connections--by-institution :is(th, td).col--since { min-width: 140px; }
.connections-previous { margin: .5rem 0 1.5rem; }
.connections-previous > summary { cursor: pointer; }
.connections-previous > summary > .table__head { display: inline; }
.choices { margin: 0; padding-left: 1.25rem; }
.choices li { margin: .375rem 0; }

/* pages/connection.ts: the account page's shape (W2.8, W3.25): the name and
   the menu over the primary facts and the metadata; the menu's flow links as
   its buttons; the banner of an ended connection */
/* the primary table and the metadata table start on one line under the
   head, the metadata a fixed 150px right of the primary table (W3.25, as the
   account page's W3.19), and under it when the page is too narrow for both */
.connection-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 150px; margin-bottom: var(--section-gap); }
/* the page's sections sit 3rem apart, the data tables included (W3.26) */
.connection-page .table, .connection-page .strip { margin-bottom: var(--section-gap); }
.connection-top__main { flex: 0 0 auto; min-width: 0; }
/* the menu beside the name, as the account page's */
.page-head > .connection-menu { margin-left: 0; }
.connection-top .facts { margin: 0; }
.connection-meta code { font-size: inherit; }
.connection-menu .quiet-menu__list a { display: flex; align-items: center; height: 2rem; padding: 0 .625rem; border-radius: var(--radius-lg); color: var(--foreground); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.connection-menu .quiet-menu__list a:hover { background: var(--muted); }
.connection-job--failed { color: var(--destructive); }
.connection-ended { margin-bottom: 1rem; }
.feeds__list { margin: 0; padding-left: 1.25rem; font-size: .875rem; }
.feeds__list li { margin: .25rem 0; }
/* the connection page's to-do fact, in the warning tone, text only (W3.21);
   an undecided row's bold Map and its quiet menu (W3.22, W3.23) */
.connection-todo { color: var(--chart-warning); font-weight: 500; }
/* a mapped row that does not feed (2026-10-14): the to-do's colour, its task link inheriting it */
.connection-not-feeding { color: var(--chart-warning); font-weight: 500; }
.connection-not-feeding a { color: inherit; }
.connection-account-actions { flex-wrap: nowrap; }
.connection-account-menu { margin-left: 0; }

/* pages/flows/: the connect flow's steps, a choice as buttons, the lists to pick from, the fields */
.steps { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted-foreground); }
.steps [aria-current="step"] { color: var(--foreground); font-weight: 600; }
.flow-search { margin: .75rem 0 1rem; }
.flow-search input { min-width: 18rem; }
.flow-fields { max-width: 28rem; margin: .5rem 0 1rem; }
.flow-fields .micro { margin: .75rem 0 0; }
.flow-structure { margin: 0 0 1rem; }
.flow-aside { margin-top: 1.25rem; font-size: .875rem; }
.flow-aside > summary { cursor: pointer; }
.segmented { display: inline-flex; flex-wrap: wrap; margin: .375rem 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.segmented__item { height: auto; padding: .25rem .625rem; border: 0; border-radius: 0; background: var(--background); color: var(--muted-foreground); font-size: .8125rem; font-weight: 400; }
.segmented__item + .segmented__item { border-left: 1px solid var(--border); }
.segmented__item[aria-pressed="true"] { background: var(--muted); color: var(--foreground); font-weight: 600; }
/* the rows of step 4 share the list's columns (below), so every row's head
   lines up with the others' as a table's cells do; what is under a head
   spans the row */
.found { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; grid-template-columns: fit-content(400px) 6rem 6rem fit-content(300px) minmax(0, 1fr); }
.found__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: .75rem 0; border-bottom: 1px solid var(--border); }
/* a choice under the head keeps its own width (the segmented control is
   inline), as it had in a block row; only the head stretches over the columns */
.found__row > * { grid-column: 1 / -1; justify-self: start; }
.found__row > .found__cells { justify-self: stretch; }
/* step 3 reads the accounts only, a table; the question follows at a section's distance */
.found--seen { margin: 0 0 var(--section-gap); }
.found--seen .table { margin: 0; }
/* the accounts found: the table's columns and the head of each mapping row
   (step 4) share these widths, so a row's head reads as the table's cells:
   the name as wide as the longest up to 400px (Michael, 2026-10-14: no set
   width), the official name up to a name cell's 300px, the same right
   padding, the same size; a name is one line cut with an ellipsis, as in the
   table */
.table td.cell--name.col--found-name { max-width: 400px; }
.table .col--found-kind, .table .col--found-currency { width: 6rem; }
.found__cells { display: grid; grid-template-columns: subgrid; font-size: .8125rem; }
.found__cells > span { min-width: 0; padding-right: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found__cells strong { font-weight: 500; }
.found__row > .micro { display: block; margin-top: .25rem; }
.flow-fields .field + .micro + .field { margin-top: 1rem; }
.found__bulk { margin: 0 0 1.25rem; }
.found__done { margin-top: 1rem; }
/* found.ts: who authorized, the block at the top of the found page (docs/ui/flows.md § Who authorized); the choices as radios, the pick or the name under the chosen one */
.declare { margin: 0 0 1.25rem; }
.declare__options { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: .75rem 0; }
.declare__option { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.declare__detail { max-width: 28rem; margin: 0 0 .25rem 1.5rem; }
.declare--closed .row { align-items: center; }
.targets, .choices-list { margin: .25rem 0 1rem; padding: 0; list-style: none; }
.targets li, .choices-list li { margin: .25rem 0; }
.targets__item { height: auto; max-width: 100%; padding: .375rem .625rem; white-space: normal; text-align: left; font-weight: 400; }
.choices-list__item { display: inline-block; padding: .375rem .625rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground); text-decoration: none; }
.choices-list__item[aria-current="true"] { border-color: var(--foreground); font-weight: 600; }

/* Sections (W3.36). Every section-level block of a page sits --section-gap
   below the last: a titled table, a tasks strip, a group of the Connections
   page (one institution, one client), the previous fold, a page's data row.
   The one explicit exception: the tables *inside* a client group of the
   by-client perspective (one per entity) are parts of that section and sit
   half a gap apart. Page-local rules (the account page's sections, the
   accounts tree) say the same with the same token. */
.shell__main .table, .shell__main .strip, .connections-client, .connections-previous, .connection-top, .account-top { margin-bottom: var(--section-gap); }
.connections-client .table { margin-bottom: calc(var(--section-gap) / 2); }