/* equyx — the Portfolio pane and the connector list.
 *
 * Kept in the app's own vocabulary rather than Folio's: the same panel, border
 * and accent variables every other pane uses, so a theme change moves this too.
 */

/* ---- the pane ---------------------------------------------------------- */
.pf-shell { padding: 16px 18px 28px; }
.pf-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-title b { font-size: 18px; }
.pf-title .muted { margin-left: 8px; font-size: 12px; }
.pf-act { margin-left: auto; display: flex; gap: 8px; }
.pf-wait { padding: 18px 0; color: var(--muted); font-size: 13px; }
.pf-err {
  margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.6;
  background: var(--bad-soft, rgba(255, 74, 46, .12)); color: var(--bad-ink, var(--bad));
}
.pf-small { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.pf-foot { margin-top: 16px; font-size: 11.5px; color: var(--faint, var(--muted)); line-height: 1.6; }

/* the empty state carries the promise, because this is the screen where a
   person decides whether to hand over access to their whole portfolio */
.pf-empty {
  max-width: 68ch; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2, var(--surface));
}
.pf-empty b { font-size: 15px; }
.pf-empty p { margin: 8px 0 12px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.pf-empty ul { margin: 0 0 16px; padding-left: 18px; font-size: 12.5px; line-height: 1.75; color: var(--muted); }

/* ---- the totals -------------------------------------------------------- */
.pf-totals { margin: 6px 0 20px; }
.pf-lab { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pf-big { font-size: clamp(30px, 6vw, 46px); font-weight: 700; line-height: 1.1; margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.pf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-chip {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; white-space: nowrap;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--border);
}
.pf-chip.up { background: var(--good-soft, rgba(0, 163, 109, .12)); color: var(--good-ink, var(--good)); border-color: transparent; }
.pf-chip.down { background: var(--bad-soft, rgba(255, 74, 46, .12)); color: var(--bad-ink, var(--bad)); border-color: transparent; }
.pf-chip.warn { background: var(--warn-soft, rgba(217, 119, 6, .12)); color: var(--warn, var(--amber)); border-color: transparent; }

/* ---- the findings ------------------------------------------------------ */
.pf-sec { margin-top: 22px; }
.pf-sec-h { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.pf-sec-h .muted { margin-left: 10px; font-size: 11.5px; font-weight: 400; }
.pf-finds { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.pf-find {
  padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong, var(--border));
  border-radius: 10px; background: var(--surface-2, var(--surface));
}
.pf-find.high { border-left-color: var(--bad); }
.pf-find.medium { border-left-color: var(--amber, #ffa028); }
.pf-find.low { border-left-color: var(--good); }
.pf-find-h { font-size: 13.5px; font-weight: 700; }
.pf-find-n { margin: 6px 0; font-family: var(--code); font-size: 17px; font-variant-numeric: tabular-nums; }
.pf-find-b { font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.pf-find-a { margin-top: 8px; font-size: 12.5px; line-height: 1.6; }

/* ---- the holdings table ------------------------------------------------ */
.pf-table td, .pf-table th { white-space: nowrap; }
.pf-table td.num, .pf-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-table td.up { color: var(--good-ink, var(--good)); }
.pf-table td.down { color: var(--bad-ink, var(--bad)); }
.pf-kind {
  margin-left: 8px; font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--surface-3, var(--surface)); color: var(--muted);
}

/* ---- the connector list ------------------------------------------------ */
.cl-wrap { margin-top: 26px; }
.cl-h { font-size: 15px; font-weight: 700; }
.cl-h .muted { margin-left: 10px; font-size: 11.5px; font-weight: 400; }
.cl-lede { margin: 6px 0 14px; font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 72ch; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cl-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2, var(--surface));
}
/* "not yet" said by a dashed outline, not by fading every word to ~3:1 (probe/_audit.mjs, 2026-09-30) */
.cl-card.soon { border-style: dashed; background: transparent; }
.cl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-tag {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--accent-soft, rgba(20, 88, 240, .12)); color: var(--accent, var(--amber));
}
.cl-name { font-size: 14px; font-weight: 700; }
.cl-ro {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  background: var(--good-soft, rgba(0, 163, 109, .14)); color: var(--good-ink, var(--good));
}
.cl-host { font-family: var(--code); font-size: 11px; color: var(--muted); }
.cl-reads { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.cl-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cl-meta i {
  font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3, var(--surface)); color: var(--muted); font-family: var(--code);
}
.cl-card .btn { margin-top: 8px; align-self: flex-start; }
.cl-soon { margin-top: 8px; font-size: 12px; color: var(--faint, var(--muted)); }

/* ---- the connect dialog ------------------------------------------------ */
.cl-scrim {
  position: fixed; inset: 0; z-index: 900; background: rgba(8, 10, 14, .55);
  display: grid; place-items: center; padding: 20px;
}
.cl-box {
  width: min(560px, 100%); padding: 20px 22px 18px;
  background: var(--panel, #fff); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.cl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cl-head b { font-size: 16px; display: block; }
.cl-head .cl-host { display: block; }
.cl-promise {
  margin: 0 0 16px; padding: 12px 14px 12px 32px; border-radius: 10px;
  background: var(--surface-2, var(--surface)); font-size: 12.5px; line-height: 1.7; color: var(--muted);
}
.cl-act { display: flex; gap: 10px; flex-wrap: wrap; }
.cl-err {
  margin-top: 12px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px;
  background: var(--bad-soft, rgba(255, 74, 46, .12)); color: var(--bad-ink, var(--bad));
}
.cl-small { margin-top: 14px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }

/* ---- the phone --------------------------------------------------------- */
@media (pointer: coarse), (max-width: 760px) {
  .pf-shell { padding: 14px 14px 26px; }
  .pf-act { margin-left: 0; width: 100%; }
  .pf-finds { grid-template-columns: minmax(0, 1fr); }
  .cl-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-scrim { padding: 0; place-items: stretch; }
  .cl-box { width: 100%; border-radius: 0; overflow-y: auto; }
}

/* ---- Connectors: the two capabilities, named before either card --------- */
/* A person on this screen is deciding how much of their money the software may
   touch. The two answers are very different and they are stated once, at the
   top, rather than twice in small print further down. */
.conn-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 14px 0 20px; }
.conn-cap {
  padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
}
.conn-cap-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
}
.conn-cap-b { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.conn-cap.trade { border-left: 3px solid var(--amber, #ffa028); }
.conn-cap.trade .conn-cap-h { color: var(--amber, #ffa028); }
.conn-cap.read { border-left: 3px solid var(--good, #00a36d); }
.conn-cap.read .conn-cap-h { color: var(--good-ink, var(--good)); }

/* the folded terms keep the body's reading measure rather than the fold's */
.conn-pane [data-fold="conn-terms"] { margin: 18px 0; }
.conn-pane [data-fold="conn-terms"] .foot-note { border: 0; margin: 0; padding: 0; }

/* the live card earns a little more presence than the eight that cannot be used */
.cl-card:not(.soon) { border-color: var(--accent-line, var(--border-strong)); }
.cl-card:not(.soon) .cl-tag { background: var(--accent, var(--amber)); color: var(--on-accent, #fff); }

@media (pointer: coarse), (max-width: 760px) {
  /* THE TWO CAPABILITY CARDS WERE 500px OF THE FIRST SCREEN. They say something
     worth saying, so neither is cut — they are set tighter, which brings the
     first account card up without losing a word. */
  .conn-caps { gap: 8px; margin: 10px 0 16px; }
  .conn-cap { padding: 10px 12px; }
  .conn-cap-h { font-size: 10.5px; }
  .conn-cap-b { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  /* a Connect button that fills half the card reads as a dialog, not a card */
  .cl-card .btn { width: 100%; justify-content: center; }
}


/* ---- a finished link ---------------------------------------------------- */
/* The screen changes shape when an account links, and that on its own is not
   an answer - a person who has just been through somebody else's sign-in wants
   to be told it worked. */
.pf-ok {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 16px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  background: var(--good-soft, rgba(0, 163, 109, .12)); color: var(--good-ink, var(--good));
}
.cl-on {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--good-ink, var(--good));
}

/* ---- the books ---------------------------------------------------------- */
/* One tab per asset book, because "everything you hold" is 95 rows across five
   very different things and a single table makes none of them readable. */
.pf-books { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.pf-book {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
  background: var(--surface-2, var(--surface)); color: inherit; border: 1px solid var(--border);
}
.pf-book:hover { border-color: var(--accent-line, var(--border-strong)); }
.pf-book.on { background: var(--accent, var(--amber)); color: var(--on-accent, #fff); border-color: transparent; }
.pf-book i {
  font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
  background: rgba(127, 127, 127, .22);
}
.pf-find.critical { border-left-color: var(--bad); }
@media (pointer: coarse), (max-width: 760px) {
  .pf-books { gap: 6px; }
  .pf-book { min-height: 40px; }
}

/* ======================================================================
   Holdings v2 — hero, tabs, KPI cards, charts, the one drawer.
   Phone first: every grid below is a single column until it has room, and
   the drawer is a full-height sheet on a phone and a side panel on a desk.
   ====================================================================== */

.pf-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.pf-conn .pf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good, #30a46c); }
.pf-conn.warn { color: var(--amber, #ffa028); border-color: var(--amber, #ffa028); }
.pf-conn.warn .pf-dot { background: var(--amber, #ffa028); }

.pf-hero { margin: 14px 0 6px; }
.pf-hero .pf-big { font-size: clamp(30px, 8vw, 54px); line-height: 1.04; font-weight: 700; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums; }
.pf-hero .pf-lab { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.pf-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: var(--surface-2, var(--surface)); }
.pf-chip.up { color: var(--good-ink, var(--good)); border-color: color-mix(in srgb, var(--good, #30a46c) 40%, transparent); }
.pf-chip.down { color: var(--bad-ink, var(--bad)); border-color: color-mix(in srgb, var(--bad, #e5484d) 40%, transparent); }
.pf-chip.warn { color: var(--amber, #ffa028); border-color: color-mix(in srgb, var(--amber, #ffa028) 45%, transparent); }
button.pf-chip { cursor: pointer; font: inherit; font-size: 12px; }

/* ---- the tab strip ---- */
.pf-tabs { display: flex; gap: 2px; margin: 16px 0 4px; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 13px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pf-tab:hover { color: var(--text); }
.pf-tab.on { color: var(--text); border-bottom-color: var(--accent, var(--amber)); }

/* ---- KPI cards ---- */
.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 16px 0; }
.pf-kpi { text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px;
  background: var(--surface-2, var(--surface)); font: inherit; }
.pf-kpi.tap { cursor: pointer; }
.pf-kpi.tap:hover { border-color: var(--accent-line, var(--border-strong)); }
.pf-kpi-l { font-size: 11.5px; color: var(--muted); }
.pf-kpi-v { font-size: clamp(19px, 4.6vw, 25px); font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.pf-kpi-v.up { color: var(--good-ink, var(--good)); }
.pf-kpi-v.down { color: var(--bad-ink, var(--bad)); }
.pf-kpi-v.warn { color: var(--amber, #ffa028); }
.pf-kpi-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ---- chart cards ---- */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.pf-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px 11px;
  background: var(--surface-2, var(--surface)); min-width: 0; }
.pf-card-h h3 { margin: 0; font-size: 14px; font-weight: 700; }
.pf-card-h p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pf-card-b { margin: 13px 0 6px; min-width: 0; }
.pf-card-f { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; border-top: 1px solid var(--border);
  padding-top: 9px; margin-top: 10px; }
.pf-card-f .muted { font-size: 10.5px; margin-left: auto; }

/* ---- the charts themselves ---- */
.pfc-none { font-size: 12px; color: var(--muted); padding: 18px 0; text-align: center; }
.pfc-donut { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: center; }
.pfc-svg { width: 148px; height: 148px; }
.pfc-slice { transition: opacity .12s; }
.pfc-slice.tap { cursor: pointer; }
.pfc-slice.tap:hover, .pfc-slice.tap:focus-visible { opacity: .75; outline: none; }
.pfc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.pfc-leg { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; gap: 7px; align-items: center;
  width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 11.5px;
  padding: 3px 4px; border-radius: 6px; text-align: left; cursor: pointer; }
.pfc-leg:disabled { cursor: default; }
.pfc-leg:hover:not(:disabled) { background: var(--surface-3, rgba(128,128,128,.10)); }
.pfc-leg i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.pfc-leg-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfc-leg-v { font-variant-numeric: tabular-nums; }
.pfc-leg-p { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

.pfc-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pfc-bar-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 74px; gap: 8px; align-items: center; font-size: 11.5px; }
.pfc-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pfc-bar-track { position: relative; height: 15px; border-radius: 4px; background: var(--surface-3, rgba(128,128,128,.10)); }
.pfc-bar { position: absolute; top: 2px; bottom: 2px; border: 0; border-radius: 3px; padding: 0; cursor: pointer; }
.pfc-bar:disabled { cursor: default; }
.pfc-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-strong, var(--border)); }
.pfc-bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.pfc-bar-v.up { color: var(--good-ink, var(--good)); }
.pfc-bar-v.down { color: var(--bad-ink, var(--bad)); }

.pfc-tree { width: 100%; height: 210px; display: block; }
.pfc-cell { transition: fill-opacity .12s; }
.pfc-cell.tap { cursor: pointer; }
.pfc-cell.tap:hover, .pfc-cell.tap:focus-visible { fill-opacity: .95; outline: none; }
.pfc-cell-t { font-size: 2.4px; font-weight: 700; fill: var(--text); pointer-events: none; }
.pfc-cell-p { font-size: 2.1px; fill: var(--text); opacity: .75; pointer-events: none; font-variant-numeric: tabular-nums; }

.pfc-water { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pfc-wrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 82px; gap: 8px; align-items: center; font-size: 11.5px; }
.pfc-wbar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--muted); opacity: .5; }
.pfc-wrow.base .pfc-wbar { background: var(--accent, #4c6ef5); opacity: .8; }
.pfc-wrow.up .pfc-wbar { background: var(--good, #30a46c); opacity: .8; }
.pfc-wrow.down .pfc-wbar { background: var(--bad, #e5484d); opacity: .8; }

/* ---- findings become buttons, so they open the drawer ---- */
.pf-find { text-align: left; width: 100%; font: inherit; cursor: pointer; }

/* ---- broker strip inside a book ---- */
.pf-brokers { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 4px; }
.pf-bk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; padding: 5px 11px; cursor: pointer; }
.pf-bk.on { border-color: var(--accent, var(--amber)); color: var(--text); }
/* muted grey at 70% opacity measured 2.9:1 (probe/_audit.mjs, 2026-09-30): a readable count pill instead */
.pf-bk i { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: var(--surface-2, var(--surface)); color: var(--text-2, var(--text)); }
.pf-table tr.tap { cursor: pointer; }
.pf-table tr.tap:hover { background: var(--surface-3, rgba(128,128,128,.08)); }

/* ---- the drawer ---- */
/* ---- the panel sits BESIDE the screen, it does not cover it -------------
   ⛔ THIS WAS A MODAL. A dark scrim over the page, so the figure you opened
   the panel to ask about was greyed out behind the thing asking about it. The
   wrapper now paints nothing and takes NO pointer events, so the table, the
   tabs and the charts stay visible and stay clickable; `.pf-shell.with-drawer`
   reserves the width so the content reflows into what is left instead of
   hiding under it. */
.pf-drawer-scrim {
  position: fixed; inset: 0; z-index: 90; background: none;
  display: flex; justify-content: flex-end; pointer-events: none;
}
.pf-drawer {
  pointer-events: auto;
  width: min(460px, 100%); height: 100%; background: var(--surface, #fff);
  border-left: 1px solid var(--border-strong, var(--border));
  box-shadow: -14px 0 34px rgba(0, 0, 0, .10);
  padding: 16px 18px 0;
  /* A COLUMN, SO THE COMPOSER CAN SIT AT THE BOTTOM. The panel used to scroll
     as one block, which put the place you type below however much answer there
     happened to be - a chat whose input moves is not a chat. */
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.pf-shell.with-drawer { padding-right: 478px; }
.pf-dr-h { display: flex; align-items: flex-start; gap: 10px; }
.pf-dr-h h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.25; }
.pf-dr-h .btn { margin-left: auto; flex: none; }
.pf-dr-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pf-dr-tabs { display: flex; gap: 2px; margin: 14px 0 0; border-bottom: 1px solid var(--border); }
.pf-dr-tab { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 11px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pf-dr-tab.on { color: var(--text); border-bottom-color: var(--accent, var(--amber)); }
.pf-dr-h, .pf-dr-tabs { flex: none; }
.pf-dr-body { padding-top: 14px; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
/* the Ask panel owns the whole remaining height so its log can grow into it */
.pf-dr-body > [data-pf-ask] { flex: 1; min-height: 0; }
.pf-dr-big { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-dr-big.up { color: var(--good-ink, var(--good)); }
.pf-dr-big.down { color: var(--bad-ink, var(--bad)); }
.pf-dr-big.warn { color: var(--amber, #ffa028); }
.pf-dr-p { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: 0 0 10px; }
.pf-dr-p code { font-family: var(--code, monospace); font-size: 11.5px; color: var(--text); }
.pf-dr-a { font-size: 12.5px; line-height: 1.6; }
.pf-dr-note { font-size: 11px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; }
.pf-dl { margin: 12px 0 0; display: grid; gap: 1px; }
.pf-dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pf-dl dt { color: var(--muted); margin: 0; }
.pf-dl dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-dl dd.up { color: var(--good-ink, var(--good)); }
.pf-dl dd.down { color: var(--bad-ink, var(--bad)); }
.pf-dr-list { list-style: none; margin: 0; padding: 0; }
.pf-dr-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pf-dr-list b { font-variant-numeric: tabular-nums; }
.pf-wi { display: block; margin: 14px 0 4px; font-size: 12.5px; }
.pf-wi input { width: 100%; margin-top: 7px; }
.pf-src { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.pf-src code { font-family: var(--code, monospace); font-size: 11.5px; }
.pf-src-h { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin: 12px 0 6px; }
.pf-json { font-family: var(--code, monospace); font-size: 11px; line-height: 1.5; overflow-x: auto;
  background: var(--surface-3, rgba(128,128,128,.08)); padding: 10px; border-radius: 8px; }
.pf-ask-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pf-ask-chip { border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted);
  font: inherit; font-size: 11.5px; padding: 6px 11px; cursor: pointer; }
.pf-ask-chip:hover:not(:disabled) { border-color: var(--accent, var(--amber)); color: var(--text); }
.pf-ask-form { display: flex; gap: 7px; }
.pf-ask-in { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; padding: 8px 10px; }
.pf-ask-out { margin-top: 12px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.pf-empty-sm { font-size: 12.5px; line-height: 1.65; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 10px; padding: 13px 14px; }

@media (pointer: coarse), (max-width: 760px) {
  /* A SHEET, NOT A SIDE PANEL. A 460px panel on a 390px screen is the whole
     screen with a sliver of scrim nobody can hit to dismiss it. */
  /* a phone has no room to put anything aside, so there it stays a sheet -
     and the shell must not reserve a width it does not have */
  .pf-shell.with-drawer { padding-right: 0; }
  .pf-drawer-scrim { align-items: flex-end; background: rgba(0, 0, 0, .38); pointer-events: auto; }
  .pf-drawer { width: 100%; height: 92vh; border-left: 0; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; box-shadow: 0 -12px 34px rgba(0, 0, 0, .35); }
  .pf-dr-tab { min-height: 44px; }
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-kpi { padding: 11px 12px; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  /* the donut stacks over its legend: 148px of circle beside a legend leaves
     the labels about 90px, which truncates every one of them */
  .pfc-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pfc-legend { width: 100%; }
  .pfc-bar-row, .pfc-wrow { grid-template-columns: 62px minmax(0, 1fr) 66px; font-size: 11px; }
  .pfc-tree { height: 240px; }
  .pf-tab { min-height: 44px; }
  .pf-bk { min-height: 36px; }
  .pf-ask-in { font-size: 16px; }
  .pf-ask-chip { min-height: 36px; }
}

/* ---- the Ask panel is a conversation ------------------------------------
   It was a question box over half a screen of nothing. A thread, suggestions
   that stay reachable, a follow-up bar, and a line saying which engine
   answered — the pattern the Digital Quality Twin console uses, in this app's
   vocabulary. The log grows and scrolls; the bar and the footer stay put. */
.pf-chat { display: flex; flex-direction: column; min-height: 0; }
/* THE LOG TAKES WHAT IS LEFT AND SCROLLS; EVERYTHING BELOW IT IS PINNED.
   A fixed `max-height` left a chat panel that was mostly empty space under a
   two-line answer, with the composer floating in the middle of it. */
.pf-chat-log {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 8px;
}
.pf-chat-sugg, .pf-chat-bar, .pf-chat-foot, .pf-chat + .pf-dr-note { flex: none; }
.pf-chat .pf-dr-note { flex: none; padding-bottom: 14px; }
.pf-chat-intro { font-size: 12.5px; line-height: 1.6; }
.pf-chat-intro b { color: var(--text); }

.pf-msg { font-size: 13px; line-height: 1.65; border-radius: 12px; padding: 9px 12px; max-width: 92%; }
.pf-msg.me {
  align-self: flex-end; background: var(--accent, var(--amber)); color: var(--on-accent, #fff);
  border-bottom-right-radius: 4px; white-space: pre-wrap;
}
.pf-msg.bot {
  align-self: flex-start; background: var(--surface-3, rgba(128,128,128,.10)); color: var(--text);
  border-bottom-left-radius: 4px;
}
.pf-msg.bot.bad { background: color-mix(in srgb, var(--bad, #e5484d) 14%, transparent); }
.pf-msg.busy { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pf-msg-t { white-space: pre-wrap; }
.pf-msg-f {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--muted);
}
.pf-msg-f b { color: var(--text); font-weight: 600; }
.pf-ground {
  margin: 8px 0 0; padding: 9px 10px; border-radius: 8px; max-height: 240px; overflow: auto;
  background: var(--surface, #fff); border: 1px solid var(--border);
  font-family: var(--code, monospace); font-size: 10.5px; line-height: 1.5; white-space: pre-wrap;
}

.pf-chat-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; align-items: center; }
.pf-chat-bar { display: flex; gap: 7px; margin: 10px 0 0; }
.pf-chat-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 9px 0 0; font-size: 11px; color: var(--muted);
}
.pf-chat-foot b { color: var(--text); }
.pf-chat-actions { margin-top: 10px; }

@media (pointer: coarse), (max-width: 760px) {
  /* the log takes what is left of the sheet rather than a fixed slice of the
     viewport, so the follow-up bar is always reachable with a thumb */
  .pf-chat-log { max-height: 52vh; }
  .pf-msg { max-width: 100%; font-size: 13.5px; }
  .pf-chat-bar .pf-ask-in { font-size: 16px; }
  .pf-chat-sugg .pf-ask-chip { min-height: 36px; }
}

/* ---- which engine is answering, on the settings screen ------------------
   "KEY SAVED" is a credential you have; it is not the one being used. The
   screen showed DeepSeek saved beside a selected xAI card and never said which
   would answer. */
.set-active {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--accent-line, var(--border-strong, var(--border)));
  background: var(--surface-2, var(--surface)); font-size: 12.5px;
}
.set-active b { color: var(--text); }
.set-active .muted { font-size: 11.5px; }
.eng-badge {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent, var(--amber)); color: var(--on-accent, #fff);
}
.eng-badge.saved { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* a ticker inside the holdings table: a link, and visibly one, without
   competing with the company name beside it */
.pf-tick { color: var(--accent, var(--amber)); font-weight: 600; text-decoration: none; }
.pf-tick:hover, .pf-tick:focus-visible { text-decoration: underline; }

/* ---- the holdings table, at EVERY width ---------------------------------
   ⛔ MEASURED at 1440px, not guessed: `.scr-table` is `table-layout: fixed`
   and `.pf-table` ships no `<colgroup>`, so nine columns take an equal ninth
   each — the instrument cell was 110px holding 265px of text, `overflow:
   visible`, `white-space: nowrap`. Its ink reached x=336 while the Units
   column began at x=181, so 155px of "Western Digital Corporation" printed
   straight over the number beside it.
   The first fix for this lived inside `@media (max-width: 760px)` and was
   therefore absent on every desktop, which is where the screenshot came from.
   These rules carry no media query on purpose: a cell may never draw outside
   itself at ANY width, and the phone block below only adds the minimum that
   forces the scroll.
   `auto` rather than `fixed` because the only text column in this table is the
   first one and every other column is a number — equal shares starve the one
   that needs the room. */
.pf-table { table-layout: auto; }
.pf-table td, .pf-table th { overflow: hidden; text-overflow: ellipsis; }
.pf-wide td:first-child, .pf-wide th:first-child { max-width: 340px; min-width: 190px; }

/* ---- the eye, beside the balance ---------------------------------------
   The control a bank app puts next to the number, in the place a hand already
   reaches. It is a toggle, so it carries `aria-pressed`, and the icon is the
   state rather than a decoration: an open eye means the figures are showing. */
.pf-bigrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-eye {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2, var(--surface));
  color: var(--muted); cursor: pointer; padding: 0;
}
.pf-eye:hover, .pf-eye:focus-visible { border-color: var(--accent, var(--amber)); color: var(--text); }
.pf-eye[aria-pressed="true"] { border-color: var(--accent, var(--amber)); color: var(--accent, var(--amber)); }
/* a masked figure keeps the row's rhythm instead of collapsing it */
.pf-big { font-variant-numeric: tabular-nums; }

@media (pointer: coarse), (max-width: 760px) {
  .pf-eye { width: 44px; height: 44px; }
}

/* between a phone and a wide desk there is not room for 460px beside the
   content; the panel narrows before it starts squeezing the table */
@media (min-width: 761px) and (max-width: 1200px) {
  .pf-drawer { width: min(400px, 46vw); }
  .pf-shell.with-drawer { padding-right: calc(min(400px, 46vw) + 18px); }
}

/* ---- a chart the analyst drew, inside the answer ------------------------
   It sits in the bubble rather than beside it, because it IS the answer to the
   question that was asked. The caption under it names the engine and states
   that every value was checked — a picture from a model needs its provenance
   attached to it, not two paragraphs away. */
.pf-msg-chart {
  margin: 12px 0 2px; padding: 11px 12px 9px; border-radius: 12px;
  background: var(--surface, #fff); border: 1px solid var(--border);
}
.pf-msg-chart figcaption { font-size: 12px; line-height: 1.45; }
.pf-msg-chart figcaption b { color: var(--text); font-size: 12.5px; }
.pf-msg-chart figcaption span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.pf-msg-chart-b { margin: 11px 0 8px; min-width: 0; }
.pf-msg-chart-b .pfc-tree { height: 150px; }
.pf-msg-chart-b .pfc-donut { grid-template-columns: 112px minmax(0, 1fr); }
.pf-msg-chart-b .pfc-svg { width: 112px; height: 112px; }
.pf-msg-chart-f {
  border-top: 1px solid var(--border); padding-top: 7px; margin-top: 4px;
  font-size: 10.5px; line-height: 1.5; color: var(--muted);
}

/* A REFUSAL IS A RESULT, AND IT IS SHOWN. A chart quietly dropped teaches a
   reader nothing; one refused in front of them, with the offending figure
   named, is the product proving the rule it claims to keep. */
.pf-msg-refused {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 9px; font-size: 12px; line-height: 1.55;
  border: 1px solid color-mix(in srgb, var(--amber, #ffa028) 45%, transparent);
  background: color-mix(in srgb, var(--amber, #ffa028) 10%, transparent);
  color: var(--text);
}
.pf-msg-refused b { color: var(--amber, #ffa028); }

@media (pointer: coarse), (max-width: 760px) {
  .pf-msg-chart-b .pfc-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pf-msg-chart-b .pfc-tree { height: 180px; }
}

/* ⓘ + Ask on every card (2026-09-28). Top-right of a tile or card, inline in a
   section heading and at the end of a verdict tile's vote row. The heading and
   label keep clear of it so a long title never runs underneath. */
.pf-kpi, .pf-card, .pf-find { position: relative; }
.pf-tools { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; z-index: 1; }
.pf-kpi .pf-kpi-l, .pf-find .pf-find-h, .pf-card-h h3, .pf-card-h p { padding-right: 78px; }
.pf-card-h p { padding-right: 0; }
.pf-sec-h > .pf-tools { position: static; float: right; margin-left: 8px; }
.pf-ib, .pf-askb { font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); line-height: 1; transition: color .12s, border-color .12s, background .12s; }
.pf-ib { width: 22px; height: 22px; border-radius: 50%; padding: 0; font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 700; font-size: 12.5px; display: inline-grid; place-items: center; }
.pf-askb { height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 600; }
.pf-ib:hover, .pf-askb:hover, .pf-ib:focus-visible, .pf-askb:focus-visible {
  color: var(--text); border-color: var(--accent-line, var(--border-strong, var(--border))); outline: none; }
.pf-askb:hover { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.pf-reading .pf-tools { display: none !important; }
.pf-shown { white-space: pre-wrap; font: inherit; font-size: 12.5px; line-height: 1.5; margin: 6px 0 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, var(--surface)); max-height: 46vh; overflow: auto; }
div.pf-find[role=button]:focus-visible, div.pf-kpi[role=button]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }