/* EasyRep portal. Hand-written, no build step, no framework. */

:root {
  --bg: #ffffff;
  --sidebar-bg: #f4f5f7;
  --border: #e2e5ea;
  --text: #1c1f23;
  --muted: #6b7280;
  --accent: #0a6b4a;
  --panel: #ffffff;
  --ok-bg: #e7f5ee;
  --ok-text: #0a6b4a;
  --warn-bg: #fdf1dc;
  --warn-text: #8a5a00;
  --error-bg: #fdecec;
  --error-text: #a11b1b;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --info-bg: #e8f0fb;
  --info-text: #1f4f8f;
  --on-accent: #ffffff;
  --idle-bg: #eef0f3;
  --idle-text: #5b6470;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --sidebar-bg: #1d2025;
    --border: #2c3038;
    --text: #e6e8ea;
    --muted: #9aa1ab;
    --accent: #4fd1a0;
    --panel: #1d2025;
    --ok-bg: #123227;
    --ok-text: #4fd1a0;
    --warn-bg: #33280f;
    --warn-text: #e0b24d;
    --error-bg: #3a1a1a;
    --error-text: #f08b8b;
    --info-bg: #17263a;
    --info-text: #8fb8ee;
    --on-accent: #0b1f17;
    --idle-bg: #262a31;
    --idle-text: #a3aab4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.shell { display: flex; min-height: 100vh; }

/* Sidebar ---------------------------------------------------------------- */

.sidebar {
  width: 260px;
  flex: 0 0 260px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
}

.brand {
  display: block;
  font-size: 17px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  margin: 0 10px 26px;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.nav-link:hover { color: var(--text); }

.nav-link.active {
  background: var(--panel);
  color: var(--accent);
  font-weight: 620;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}

/* A section with pages: its label, and a chevron that opens them (EASYREP-PORTFOLIO-WORKSPACE-002).
   The section you are in is drawn open by the server; the others are closed until opened. */
.nav-row { display: flex; align-items: center; gap: 2px; }
.nav-row > .nav-link { flex: 1 1 auto; min-width: 0; }
.nav-group > .nav-row { margin-top: 6px; }
.nav-row:has(> .nav-parent.active) { background: var(--panel); border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / 6%); }
.nav-row > .nav-parent.active { background: transparent; box-shadow: none; }
.subnav { display: flex; flex-direction: column; gap: 2px; }
.nav-group:not(.open) > .subnav { display: none; }
.subnav-link { padding-left: 26px; font-size: 14px; }

.nav-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.nav-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
}
.nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.nav-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-toggle::before { transition: none; } }

/* An entry that enters a workspace rather than opening a list, and the workspace's own menu, whose
   way back to EasyRep is a link with its arrow (EASYREP-PORTFOLIO-WORKSPACE-003). */
.nav-link.has-enter { display: flex; align-items: center; justify-content: space-between; }
.nav-enter { color: var(--muted); font-weight: 400; }
.sidebar-workspace { border-top: 3px solid var(--accent); }
.ws-back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 22px;
  font-size: 17px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
}
.ws-back::before { content: "\2190"; color: var(--accent); font-weight: 600; }
.ws-back:hover { color: var(--accent); }
.ws-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
/* A member's workspace names EasyRep without leading back to it (EASYREP-USERS-009). */
.ws-brand { margin: 0 10px 22px; font-size: 17px; font-weight: 650; color: var(--text); }

/* The Portfolio workspace's menu, after Parqet's (EASYREP-PORTFOLIO-DASHBOARD-001): a dark slate band in both
   colour schemes, the portfolio on screen at the top with its pick, icon lines, and a rule before ETFs. */
.sidebar-portfolio {
  --pf-side: #2f3946;
  --pf-side-text: #eef1f5;
  --pf-side-muted: #b3bcc8;
  --pf-side-hover: rgb(255 255 255 / 7%);
  --pf-side-active: rgb(255 255 255 / 12%);
  --pf-side-rule: rgb(255 255 255 / 14%);
  --pf-side-accent: #6fdcbc;
  background: var(--pf-side);
  color: var(--pf-side-text);
  border-right-color: var(--pf-side);
  border-top-color: var(--pf-side-accent);
}
@media (prefers-color-scheme: dark) {
  .sidebar-portfolio { --pf-side: #1f262f; border-right-color: var(--border); }
}
.sidebar-portfolio .ws-back,
.sidebar-portfolio .ws-brand,
.sidebar-portfolio .nav-link:hover,
.sidebar-portfolio .ws-pick summary { color: var(--pf-side-text); }
.sidebar-portfolio .ws-back::before { color: var(--pf-side-accent); }
.sidebar-portfolio .ws-back:hover { color: var(--pf-side-accent); }
.sidebar-portfolio .nav { gap: 4px; }
.sidebar-portfolio .nav-link { color: var(--pf-side-text); font-weight: 600; padding: 10px 12px; border-radius: 8px; }
.sidebar-portfolio .nav-link:hover { background: var(--pf-side-hover); }
.sidebar-portfolio .nav-link.active { background: var(--pf-side-active); color: var(--pf-side-text); box-shadow: none; }
.sidebar-portfolio .nav-link.active .icon { color: var(--pf-side-accent); }
.nav-link.nav-icon { display: flex; align-items: center; gap: 14px; }
.nav-link.nav-icon .icon { flex: none; color: var(--pf-side-muted, var(--muted)); }
.nav-rule { border: 0; border-top: 1px solid var(--pf-side-rule, var(--border)); margin: 12px 4px; width: auto; }
.sidebar-portfolio .sidebar-foot, .sidebar-portfolio .linkbutton { color: var(--pf-side-muted); }
.sidebar-portfolio .sidebar-foot strong { color: var(--pf-side-text); }
.sidebar-portfolio :focus-visible { outline: 3px solid color-mix(in srgb, var(--pf-side-accent) 70%, transparent); outline-offset: 2px; }

.ws-pick { position: relative; margin: 0 0 18px; }
.ws-pick summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; list-style: none;
}
.ws-pick summary::-webkit-details-marker { display: none; }
.ws-pick summary:hover { background: var(--pf-side-hover); }
.ws-pick summary .icon { flex: none; color: var(--pf-side-muted); transition: transform .15s; }
.ws-pick[open] summary .icon { transform: rotate(180deg); }
.ws-pick-text { display: flex; flex-direction: column; min-width: 0; }
.ws-pick-label { color: var(--pf-side-accent); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ws-pick-name { font-size: 16px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.ws-pick-why { display: block; color: var(--pf-side-muted); font-size: 13px; }
.ws-pick-off { padding: 0 10px; }
.ws-pick-list {
  list-style: none; margin: 6px 0 0; padding: 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--pf-side) 82%, #000); border: 1px solid var(--pf-side-rule);
}
.ws-pick-list ul { list-style: none; margin: 0; padding: 0; }
.ws-pick-list ul + .ws-pick-head { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--pf-side-rule); }
.ws-pick-head {
  margin: 4px 10px 4px; color: var(--pf-side-muted); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.ws-pick-list a {
  display: flex; flex-direction: column; padding: 7px 10px; border-radius: 7px;
  color: var(--pf-side-text); text-decoration: none; font-weight: 600;
}
.ws-pick-list a small { color: var(--pf-side-muted); font-weight: 400; font-size: 12.5px; }
.ws-pick-list a:hover { background: var(--pf-side-hover); }
/* The one on screen is written in the accent, as Parqet marks it. */
.ws-pick-list a[aria-current] { color: var(--pf-side-accent); }
@media (prefers-reduced-motion: reduce) { .ws-pick summary .icon { transition: none; } }

.sidebar-foot {
  margin-top: auto;
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
}
/* Lines kept at the foot of a workspace's menu, above the sign-out (Portfolios & views). */
.nav-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.sidebar-portfolio .nav-bottom { border-top-color: var(--pf-side-rule); }
.sidebar-foot.sidebar-foot-under { margin-top: 14px; }

/* Main ------------------------------------------------------------------- */

.main { flex: 1 1 auto; min-width: 0; }

.topbar { padding: 30px 36px 18px; border-bottom: 1px solid var(--border); }
.topbar h1 { margin: 0; font-size: 22px; font-weight: 640; overflow-wrap: anywhere; }
.summary { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.content { padding: 26px 36px 60px; display: flex; flex-direction: column; gap: 20px; }

/* Panels ----------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  max-width: 860px;
}

.panel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 620; }
.count { color: var(--muted); font-weight: 500; }

.panel-pending { border-style: dashed; }
.pending-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-error { background: var(--error-bg); border-color: var(--error-text); }

.status { margin: 0 0 14px; font-weight: 620; }
.status-ok { color: var(--ok-text); }
.status-error { color: var(--error-text); }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }

/* Facts and chips -------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 9px 18px;
  margin: 0;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 13px;
}

.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); }

@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; }
  /* On a phone the navigation is a compact band above the page, not a first screen of its own:
     the sections wrap in rows, and only the current section's pages are listed (EASYREP-PORTFOLIO-JOBS-007). */
  .sidebar { padding: 12px 14px 10px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { margin: 0 6px 8px; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .nav-group { display: contents; }
  /* The chevron is for a pointer; the band lists only the current section's pages. The row around
     a label goes, so the label carries its own highlight again. */
  .nav-row { display: contents; }
  .nav-row > .nav-link { flex: 0 0 auto; }
  .nav-row:has(> .nav-parent.active) { background: none; box-shadow: none; }
  .nav-row > .nav-parent.active { background: var(--panel); box-shadow: 0 1px 2px rgb(0 0 0 / 6%); }
  .nav-toggle { display: none; }
  .ws-back { margin: 0 6px 8px; }
  /* The Portfolio workspace's band: the pick on one line under the way back, the lines wrap, the rule goes. */
  .ws-pick { margin: 0 0 6px; }
  .ws-pick summary { padding: 4px 6px; }
  .ws-pick-text { flex-direction: row; align-items: baseline; gap: 8px; }
  .ws-pick-label { font-size: 13px; }
  .ws-pick-name { font-size: 15px; }
  .nav-rule { display: none; }
  .sidebar-portfolio .nav-link { padding: 6px 10px; }
  .nav-link.nav-icon { gap: 8px; }
  .nav-link.nav-icon .icon { width: 16px; height: 16px; }
  .nav-link.has-enter { display: block; }
  .nav-enter { margin-left: 4px; }
  .nav-link { padding: 6px 10px; }
  .subnav { display: none; }
  .nav-group:has(.active) .subnav { display: flex; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; gap: 2px 4px; order: 1;
    margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--border); }
  .subnav-link { padding-left: 10px; font-size: 13.5px; }
  .nav-bottom { margin-top: 4px; padding-top: 4px; }
  .sidebar-foot.sidebar-foot-under { margin-top: 8px; }
  .sidebar-foot { margin-top: 8px; padding: 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .sidebar-foot .signout { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
  .sidebar-foot .mono { margin: 0; }
  .content, .topbar { padding-left: 20px; padding-right: 20px; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 10px; }
}

/* Sign-out control ------------------------------------------------------- */

.signout { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.linkbutton {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}

/* Login ------------------------------------------------------------------ */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--sidebar-bg);
}

.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 34px 32px;
  width: 100%;
  max-width: 360px;
}

.login-brand { margin: 0; font-size: 19px; font-weight: 650; }
.login-sub { margin: 4px 0 22px; font-size: 14px; }

.login-card label {
  display: block;
  margin: 0 0 5px;
  font-size: 13px;
  color: var(--muted);
}

.login-card input {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.login-card button[type="submit"] {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.login-card button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

.login-error {
  background: var(--error-bg);
  color: var(--error-text);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 18px;
  font-size: 14px;
}

/* Data grid -------------------------------------------------------------- */

.scroll { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }

.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
.grid th, .grid td {
  text-align: left;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.grid th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  position: sticky;
  top: 0;
  background: var(--panel);
}
.grid tbody tr:hover { background: var(--sidebar-bg); }
.grid .num { text-align: right; padding-right: 18px; }
.grid .zero { color: var(--muted); }
.grid .null { color: var(--muted); }
.small { font-size: 12px; white-space: normal; }

.pager { display: flex; gap: 16px; align-items: baseline; margin: 16px 0 0; font-size: 13px; }

.badge-fail { background: var(--error-bg); color: var(--error-text); }
.diverged { color: var(--warn-text); }
.note {
  background: var(--warn-bg);
  color: var(--warn-text);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 14px 0 0;
  font-size: 13px;
}

.console {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0 0;
  max-height: 460px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  /* A report prints columns; wrapping would break every row in two, so a
     long line scrolls sideways instead, as in a terminal. */
  white-space: pre;
}
button.run {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
button.run:hover:not(:disabled) { border-color: var(--accent); }
button.run:disabled { opacity: .45; cursor: not-allowed; }

.stages { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: var(--muted); }
.stages li { margin-bottom: 4px; }
.problems { margin: 6px 0 0; padding-left: 20px; }
.problems li { margin-bottom: 5px; }
.field { margin-bottom: 18px; max-width: 520px; }
.field > label { display: block; margin-bottom: 5px; font-size: 13px; color: var(--muted); }
.field select, .field .newvalue {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.field .newvalue { margin-top: 6px; }
.field .check { display: inline-flex; gap: 7px; align-items: center; color: var(--text); font-size: 13px; }
.req { color: var(--error-text); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* Edit / Run tabs -------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: flex-end;
  margin-bottom: -1px;
}

/* The form must not create a box of its own, or its button would stack below
   the Edit tab instead of sitting beside it. */
.tabform { display: contents; }

.tab {
  display: inline-block;
  padding: 13px 32px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: var(--sidebar-bg);
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  font-weight: 640;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.tab:hover { color: var(--text); background: var(--panel); }

.tab.active {
  background: var(--panel);
  color: var(--text);
}

.tabrun { color: var(--accent); }
.tabrun:hover { color: var(--accent); }

.panel-saved { background: var(--ok-bg); border-color: var(--ok-text); }
.footnote { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.inlineform { display: inline; margin-left: 12px; }
.linkbutton.danger { color: var(--error-text); }
.namefield { max-width: 320px; }

/* Documentation ---------------------------------------------------------- */

.doclinks { margin: 16px 0 0; padding-left: 20px; line-height: 1.9; }

.tablabel {
  margin: 0 4px 0 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--sidebar-bg);
  font-size: 12.5px;
}
.chip-write { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-text); }

/* The process flow */

.overview {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.overview-side { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.overview-side .tablabel { flex-basis: 100%; margin-bottom: 4px; }
.overview-arrow { color: var(--muted); font-size: 22px; }

/* Run details: a label-and-value list rather than a sentence, so job, run,
   status, code and start time can each be read at a glance. */
.rundetails {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1.2rem;
  margin: 0 0 1rem;
}
.rundetails dt {
  font-weight: 600;
  color: var(--muted, #5a5a5a);
}
.rundetails dd { margin: 0; }

/* Results: pick a format, then download it. */
.resultform {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.resultform select { padding: 0.3rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Portfolio -------------------------------------------------------------- */

/* One column: the menu holds the portfolio pick and the views (EASYREP-PORTFOLIO-DASHBOARD-001). */
.portfolio-workspace {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 1500px;
}

.portfolio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portfolio-toolbar .portfolio-meta { margin: 0; }

/* The period button (EASYREP-PORTFOLIO-DASHBOARD-002): a disclosure of links, opening below and to the left. */
.period-button { position: relative; flex: none; }
.period-button summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 12px 7px 16px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
  font-weight: 650; cursor: pointer; list-style: none; white-space: nowrap;
}
.period-button summary::-webkit-details-marker { display: none; }
.period-button summary:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--border)); }
.period-button summary:focus-visible, .period-button > ul a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px;
}
.period-button summary .icon { color: var(--muted); transition: transform .15s; }
.period-button[open] summary .icon { transform: rotate(180deg); }
.period-button > ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; max-height: 70vh; overflow: auto;
  list-style: none; margin: 0; padding: 6px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
}
.period-button > ul a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 10px;
  border-radius: 6px; color: var(--text); text-decoration: none;
}
.period-button > ul a small { color: var(--muted); font-size: 12px; font-weight: 600; }
.period-button > ul a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.period-button > ul a[aria-current] { background: var(--ok-bg); color: var(--ok-text); font-weight: 650; }
.period-button > ul a[aria-current] small { color: var(--ok-text); }
@media (prefers-reduced-motion: reduce) { .period-button summary .icon { transition: none; } }

/* The settings button beside the period (EASYREP-PORTFOLIO-PRICES-004): the same button, opening a panel that
   says where every holding's close comes from. */
.settings-button summary { padding: 7px 14px 7px 12px; }
.settings-button[open] > summary .icon { transform: none; }
.settings-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(820px, calc(100vw - 48px));
  max-height: 75vh; overflow: auto; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
}
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
                 margin-bottom: 6px; }
.settings-title { margin: 0; font-weight: 700; font-size: 16px; }
.source-pick > ul { min-width: 280px; }
.source-pick > ul a span, .source-pick > ul a small { white-space: nowrap; }
.settings-lead { margin: 0 0 10px; color: var(--muted); }
.settings-rule { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.settings-table-wrap { overflow-x: auto; }
.settings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.settings-table th, .settings-table td {
  padding: 8px 10px 8px 0; border-top: 1px solid var(--border); text-align: left; vertical-align: top;
}
.settings-table thead th { border-top: 0; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.settings-table tbody th { font-weight: 650; min-width: 160px; }
.settings-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.settings-table td:last-child { white-space: normal; min-width: 180px; }
.settings-table small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.settings-check { font-weight: 600; }
.settings-ok { color: var(--ok-text); }
.settings-warn { color: var(--warn-text); }
.settings-na { color: var(--muted); font-weight: 400; }
/* On a phone the panel opens in place, the width of the card, below the buttons, so its own button stays in reach
   to close it again. */
@media (max-width: 640px) {
  .dash-actions { min-width: 0; max-width: 100%; }
  .settings-button[open] { flex-basis: 100%; min-width: 0; max-width: 100%; }
  .settings-panel { position: static; width: auto; min-width: 0; max-height: none; margin-top: 8px; padding: 14px;
                    box-shadow: none; }
}


.portfolio-eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}




.portfolio-allocation-scroll:focus-visible,
.portfolio-income-scroll:focus-visible,
.portfolio-activity-scroll:focus-visible,
.portfolio-table-scroll:focus-visible,
.nav-link:focus-visible,
.brand:focus-visible,
.linkbutton:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}




/* The dashboard, after Parqet's (EASYREP-PORTFOLIO-DASHBOARD-003) ------------------------------------------ */

:root {
  --dash-bg: #f3f4f6;
  --dash-up: #0e8a5f;
  --dash-up-bg: #d9f5e8;
  --dash-down: #c43d3d;
  --dash-down-bg: #fbe3e3;
  --dash-capital: #9aa3ae;
  --dash-bench: #6b7280;
  --ring-0: #0b3d57; --ring-1: #2e4b7a; --ring-2: #5b4a91; --ring-3: #8f4a99; --ring-4: #c24b86;
  --ring-5: #e3566b; --ring-6: #f57b4b; --ring-7: #f5a524; --ring-8: #0e8a73; --ring-rest: #94a3b8; --ring-cash: #1d6fb8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --dash-bg: #111316;
    --dash-up: #4fd1a0;
    --dash-up-bg: #143528;
    --dash-down: #f08b8b;
    --dash-down-bg: #3d1d1d;
    --dash-capital: #7d8794;
    --dash-bench: #a3aab4;
    --ring-0: #4ba3c7; --ring-1: #6d8fd6; --ring-2: #9b87e0; --ring-3: #c784cf; --ring-4: #e47fb0;
    --ring-5: #f08b8b; --ring-6: #f5a37a; --ring-7: #f2c35b; --ring-8: #4fd1a0; --ring-rest: #6b7280; --ring-cash: #7fb6ea;
  }
}

.dash { max-width: 1520px; gap: 26px; }
.dash-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / 5%); min-width: 0; }
.dash-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.dash-section { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-section-head h2 { margin: 0; font-size: 19px; font-weight: 600; }
.dash-section-head a { color: var(--accent); font-weight: 600; text-decoration: none; }
.dash-section-head a:hover { text-decoration: underline; }
.dash-section-head a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.dash-head-note { color: var(--muted); font-size: 13px; }
.dash-head-links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.dash-tab-link { margin-left: auto; align-self: center; padding: 0 2px; color: var(--accent); font-weight: 600; text-decoration: none;
  white-space: nowrap; }
.dash-tab-link:hover { text-decoration: underline; }
.dash-tab-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.dash-count { font-size: 14px; font-weight: 600; margin-left: 6px; }
.dash-empty { margin: 0; padding: 22px; color: var(--muted); }
.dash-up { color: var(--dash-up); }
.dash-down { color: var(--dash-down); }
.dash-na { color: var(--warn-text); }

.dash-badge { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-badge-up { background: var(--dash-up-bg); color: var(--dash-up); }
.dash-badge-down { background: var(--dash-down-bg); color: var(--dash-down); }
.dash-badge-flat, .dash-badge-na { background: var(--idle-bg); color: var(--idle-text); }

/* The header: the ring, the name, the key figures and the period. */
.dash-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding: 30px 32px; align-items: center; }
.dash-ring { position: relative; margin: 0; width: 100%; max-width: 300px; aspect-ratio: 1; }
.dash-ring svg { width: 100%; height: 100%; display: block; }
.dash-ring-track { fill: none; stroke: var(--idle-bg); stroke-width: 34; }
.dash-ring-slice { fill: none; stroke-width: 34; }
.dash-ring-total small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.dash-ring-total { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 22%; text-align: center;
  font-size: clamp(18px, 2.2vw, 28px); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-ring-slice.ring-0 { stroke: var(--ring-0); } .dash-ring-slice.ring-1 { stroke: var(--ring-1); }
.dash-ring-slice.ring-2 { stroke: var(--ring-2); } .dash-ring-slice.ring-3 { stroke: var(--ring-3); }
.dash-ring-slice.ring-4 { stroke: var(--ring-4); } .dash-ring-slice.ring-5 { stroke: var(--ring-5); }
.dash-ring-slice.ring-6 { stroke: var(--ring-6); } .dash-ring-slice.ring-7 { stroke: var(--ring-7); }
.dash-ring-slice.ring-8 { stroke: var(--ring-8); } .dash-ring-slice.ring-rest { stroke: var(--ring-rest); }
.dash-ring-slice.ring-cash { stroke: var(--ring-cash); }
.dash-dot.ring-0, .dash-bar .ring-0 { background: var(--ring-0); } .dash-dot.ring-1, .dash-bar .ring-1 { background: var(--ring-1); }
.dash-dot.ring-2, .dash-bar .ring-2 { background: var(--ring-2); } .dash-dot.ring-3, .dash-bar .ring-3 { background: var(--ring-3); }
.dash-dot.ring-4, .dash-bar .ring-4 { background: var(--ring-4); } .dash-dot.ring-5, .dash-bar .ring-5 { background: var(--ring-5); }
.dash-dot.ring-6, .dash-bar .ring-6 { background: var(--ring-6); } .dash-dot.ring-7, .dash-bar .ring-7 { background: var(--ring-7); }
.dash-dot.ring-8, .dash-bar .ring-8 { background: var(--ring-8); } .dash-dot.ring-rest, .dash-bar .ring-rest { background: var(--ring-rest); }
.dash-dot.ring-cash, .dash-bar .ring-cash { background: var(--ring-cash); }

.dash-hero-body { min-width: 0; }
.dash-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.dash-hero-head h1 { margin: 0; font-size: 28px; font-weight: 500; overflow-wrap: anywhere; }
.dash-facts { margin: 6px 0 0; color: var(--muted); }
.dash-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-actions .portfolio-update { margin: 0; }
.dash-button { min-height: 40px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.dash-button:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--border)); }
.dash-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.dash-reason { margin: 16px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 14px; }
.dash-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; }

.dash-kpis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; margin: 22px 0 0; }
.dash-kpi { margin: 0; min-width: 0; }
.dash-kpi dt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.dash-kpi dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-big { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.1; }
.dash-mid { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; }
.dash-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; margin: 18px 0 0; }
.dash-pairs div { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.dash-pairs dt { color: var(--muted); }
.dash-pairs dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* The charts, in a card with tabs; the tabs are radio buttons, so they need no script. */
.dash-tablist { display: flex; gap: 6px; padding: 0 18px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--dash-bg) 60%, var(--panel)); border-radius: 12px 12px 0 0; overflow-x: auto; }
.dash-tablist label, .dash-tab-on { display: inline-flex; align-items: center; gap: 8px; padding: 14px 8px 12px; margin-bottom: -1px;
  color: var(--muted); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.dash-tab-on, #dash-tab-value:checked ~ .dash-tablist label[for="dash-tab-value"],
#dash-tab-drawdown:checked ~ .dash-tablist label[for="dash-tab-drawdown"] { color: var(--accent); border-bottom-color: var(--accent); cursor: default; }
#dash-tab-value:focus-visible ~ .dash-tablist label[for="dash-tab-value"],
#dash-tab-drawdown:focus-visible ~ .dash-tablist label[for="dash-tab-drawdown"] { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -3px; }
.dash-panel { padding: 18px 18px 14px; }
.dash-tabs .dash-panel-drawdown, #dash-tab-drawdown:checked ~ .dash-panel-value { display: none; }
#dash-tab-drawdown:checked ~ .dash-panel-drawdown { display: block; }
.dash-chart { display: block; width: 100%; height: auto; aspect-ratio: 640 / 260; overflow: visible; }
.dash-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-axis { stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-zero { stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dash-line { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash-line-value { stroke: var(--text); }
.dash-line-capital { stroke: var(--dash-capital); }
.dash-line-bench { stroke: var(--dash-bench); stroke-width: 1.5; }
.dash-line-perf { stroke: none; }
.dash-line-drawdown { stroke: var(--dash-down); stroke-width: 1.5; }
.dash-area { stroke: none; }
.dash-area-up { fill: color-mix(in srgb, var(--dash-up) 70%, transparent); }
.dash-area-down { fill: color-mix(in srgb, var(--dash-down) 70%, transparent); }
.dash-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; list-style: none; margin: 10px 0 0; padding: 0; color: var(--muted); font-size: 13px; }
.dash-legend li { display: inline-flex; align-items: center; gap: 8px; }
.dash-key { display: inline-block; width: 26px; height: 0; border-top: 3px solid; }
.dash-key-value { border-color: var(--text); }
.dash-key-capital { border-color: var(--dash-capital); }
.dash-key-bench { border-color: var(--dash-bench); border-top-style: dashed; }
.dash-key-perf { height: 10px; border: 0; background: linear-gradient(to bottom, var(--dash-up) 50%, var(--dash-down) 50%); border-radius: 2px; }
.dash-key-drawdown { height: 10px; border: 0; background: var(--dash-down); border-radius: 2px; }

/* The returns and the allocation. */
.dash-table-card { padding: 6px 20px 12px; }
.dash-figures { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dash-figures thead th { padding: 12px 0 6px; color: var(--muted); font-size: 13px; font-style: italic; font-weight: 400; text-align: left; }
.dash-figures thead th.num { text-align: right; }
.dash-figures th[scope="row"] { font-weight: 400; text-align: left; padding: 8px 12px 8px 0; }
.dash-figures th[scope="row"] .portfolio-meta { display: block; }
.dash-figures td { padding: 8px 0 8px 12px; text-align: right; white-space: nowrap; }
.dash-figures tbody tr + tr > * { border-top: 1px solid var(--border); }
.dash-since th[scope="rowgroup"] { padding: 18px 0 4px; color: var(--muted); font-size: 13px; font-style: italic; font-weight: 400; text-align: left; }
.dash-total th, .dash-total td { font-weight: 700; }
.dash-plain { color: var(--text); }

.dash-alloc { list-style: none; margin: 0; padding: 6px 20px; }
.dash-alloc li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 70px; align-items: center; gap: 4px 14px; padding: 13px 0; }
.dash-alloc li + li { border-top: 1px solid var(--border); }
.dash-alloc-label { font-weight: 600; overflow-wrap: anywhere; }
.dash-alloc-share { color: var(--muted); }
.dash-alloc .dash-bar { grid-column: 2 / -1; }
.dash-dot { width: 12px; height: 12px; border-radius: 50%; }
.dash-bar { display: block; height: 4px; border-radius: 2px; background: var(--idle-bg); overflow: hidden; }
.dash-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--accent); max-width: 100%; }

/* Lists: the latest activities, the top movers, the cash accounts. */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; }
.dash-list li + li { border-top: 1px solid var(--border); }
.dash-list li > div { display: flex; flex-direction: column; min-width: 0; }
.dash-list li > div:first-child strong { overflow-wrap: anywhere; }
.dash-list li > div > span { color: var(--muted); font-size: 13.5px; }
.dash-list li > .num { align-items: flex-end; gap: 3px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.dash-kind { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--idle-bg); color: var(--idle-text); }
.dash-kind-trade { background: var(--info-bg); color: var(--info-text); }
.dash-kind-income { background: var(--dash-up-bg); color: var(--dash-up); }
.dash-kind-cost { background: var(--warn-bg); color: var(--warn-text); }

/* The securities. */
.dash-securities { width: 100%; min-width: 860px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dash-securities thead th { padding: 14px 10px 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-align: left; vertical-align: bottom; }
.dash-securities thead th span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.dash-securities thead th.num { text-align: right; }
.dash-securities tbody > tr > * { padding: 14px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.dash-securities tbody th { text-align: left; font-weight: 400; max-width: 360px; }
.dash-securities tbody th strong { display: block; overflow-wrap: anywhere; }
.dash-sec-meta { display: block; color: var(--muted); font-size: 12.5px; }
.dash-securities td.num { text-align: right; white-space: nowrap; }
.dash-securities td.num > strong, .dash-securities td.num > span { display: block; }
.dash-securities td.num > span { color: var(--muted); font-size: 13px; margin-top: 2px; }
.dash-securities td.num > .dash-badge { margin-top: 4px; }
.dash-units { display: inline-block; padding: 0 6px; border-radius: 5px; background: var(--idle-bg); color: var(--idle-text); }
.dash-share { min-width: 110px; }
.dash-share .dash-bar { margin: 6px 0 4px auto; width: 80px; }
.one-at-a-time { margin: 12px 0 0; padding-left: 20px; }

@media (max-width: 1100px) {
  .dash-row { grid-template-columns: minmax(0, 1fr); }
  .dash-hero { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px; }
  .dash-kpis { justify-content: flex-start; gap: 14px 32px; }
  .dash-kpi-main { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .dash-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .dash-ring { max-width: 220px; margin: 0 auto; }
  .dash-hero-head h1 { font-size: 23px; }
  .dash-kpis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
  .dash-kpi dd { white-space: normal; overflow-wrap: anywhere; }
  .dash-kpi-main { grid-column: 1 / -1; }
  .dash-pairs { grid-template-columns: minmax(0, 1fr); }
  .dash-table-card { padding: 4px 14px 10px; }
  .dash-list li { padding: 12px 14px; }
  .dash-alloc { padding: 4px 14px; }
  .dash-alloc li { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .dash-alloc li > .num:not(.dash-alloc-share) { grid-column: 2 / -1; grid-row: 2; color: var(--muted); font-size: 13px; }
  .dash-alloc .dash-bar { grid-row: 3; }
  .dash-panel { padding: 12px 10px 10px; }
  .dash-tablist { padding: 0 10px; }
  .dash-figures td { white-space: normal; }
}

/* Analysis, after Parqet's Analyse (EASYREP-PORTFOLIO-ANALYSIS-004): a heading, a line, and a row of tabs that
   stays at the top while the page scrolls. On a phone the row scrolls sideways inside itself, never the page. */
.an-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-eyebrow { margin: 0; color: var(--accent); font-size: 13px; font-weight: 650; }
.an-head h1 { margin: 0; font-size: 28px; font-weight: 500; overflow-wrap: anywhere; }
.an-lead { margin: 4px 0 0; color: var(--muted); }
.an-tabs { position: sticky; top: 0; z-index: 10; display: flex; gap: 30px; margin-top: -10px; overflow-x: auto;
  scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--border); }
.an-tabs::-webkit-scrollbar { display: none; }
.an-tabs a { flex: none; margin-bottom: -1px; padding: 14px 2px 11px; border-bottom: 2px solid transparent; color: var(--muted);
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.an-tabs a:hover { color: var(--text); }
.an-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.an-tabs a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -3px; }
.an-note { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 95ch; }
.an-section-head { align-items: center; }
.an-subhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.an-more { color: var(--accent); font-weight: 600; text-decoration: none; }
.an-more:hover { text-decoration: underline; }
.an-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.an-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.an-span { margin-left: 10px; color: var(--muted); font-size: 14px; font-weight: 400; }

/* A switch of links, as Parqet's Q/M and its period row: the option on screen is filled. */
.an-switch { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  overflow: hidden; }
.an-switch a { min-width: 34px; padding: 5px 11px; color: var(--muted); font-size: 13.5px; font-weight: 650; text-align: center;
  text-decoration: none; }
.an-switch a + a { border-left: 1px solid var(--border); }
.an-switch a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.an-switch a[aria-current] { color: var(--ok-text); background: var(--ok-bg); }
.an-switch a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -3px; }

/* The month tables (EASYREP-PORTFOLIO-ANALYSIS-005, 006). A cell's shade says how large its figure is - green and
   red for a return, as the dashboard's, blue and orange for capital moved, which is neither good nor bad - and the
   figure with its sign is printed in every cell, so the colour never carries the meaning alone. The steps were
   checked for text contrast (4.5:1 or more) in both modes. */
:root {
  --heat-up-1: #dff4e9; --heat-up-2: #b0e5ca; --heat-up-3: #66c99b; --heat-up-4: #13805a;
  --heat-down-1: #fde5e3; --heat-down-2: #f7bcb6; --heat-down-3: #ec8178; --heat-down-4: #b93a33;
  --heat-in-1: #dbeafc; --heat-in-2: #a8cbf5; --heat-in-3: #5a9ae6; --heat-in-4: #1c5cab;
  --heat-out-1: #fde8d6; --heat-out-2: #f9c79c; --heat-out-3: #ef9455; --heat-out-4: #a84c0c;
  --heat-strong-text: #ffffff;
  --bar-in: #2a78d6; --bar-out: #d9692a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --heat-up-1: #173a2c; --heat-up-2: #1e5a40; --heat-up-3: #256f4d; --heat-up-4: #4fd1a0;
    --heat-down-1: #3f1f1f; --heat-down-2: #6a2b2b; --heat-down-3: #934040; --heat-down-4: #f08b8b;
    --heat-in-1: #15283f; --heat-in-2: #1e4371; --heat-in-3: #2b609e; --heat-in-4: #7fb6ea;
    --heat-out-1: #3b2512; --heat-out-2: #5e3719; --heat-out-3: #8a4f1f; --heat-out-4: #f2a35f;
    --heat-strong-text: #101317;
    --bar-in: #3987e5; --bar-out: #d95926;
  }
}
.an-heat-card { padding: 4px 0; overflow: hidden; }
.an-heat { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.an-heat thead th { padding: 12px 6px 10px; color: var(--text); font-size: 13px; font-weight: 650; text-align: center; }
.an-heat th[scope="row"] { position: sticky; left: 0; z-index: 1; padding: 10px 14px; background: var(--panel); font-weight: 500; text-align: left; }
.an-heat thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.an-heat th[scope="row"] a { color: var(--text); text-decoration: none; }
.an-heat th[scope="row"] a:hover { color: var(--accent); text-decoration: underline; }
.an-heat tbody > tr > * { border-top: 1px solid var(--border); }
.an-heat .an-beside { color: var(--muted); font-weight: 500; }
.heat { padding: 10px 6px; text-align: center; white-space: nowrap; border-left: 2px solid var(--panel); }
.heat a { color: inherit; text-decoration: none; }
.heat a:hover { text-decoration: underline; }
.heat-none { color: var(--muted); }
.heat-na { color: var(--warn-text); }
.heat-flat, .heat-plain { color: var(--text); }
.heat-plain { color: var(--muted); }
.heat-plain-strong { color: var(--text); font-weight: 700; }
.an-heat tfoot th { position: sticky; left: 0; z-index: 1; padding: 10px 14px; background: var(--panel); text-align: left; }
.heat-mark { margin-left: 1px; }
.heat-up-1 { background: var(--heat-up-1); } .heat-up-2 { background: var(--heat-up-2); }
.heat-up-3 { background: var(--heat-up-3); } .heat-up-4 { background: var(--heat-up-4); color: var(--heat-strong-text); }
.heat-down-1 { background: var(--heat-down-1); } .heat-down-2 { background: var(--heat-down-2); }
.heat-down-3 { background: var(--heat-down-3); } .heat-down-4 { background: var(--heat-down-4); color: var(--heat-strong-text); }
.heat-in-1 { background: var(--heat-in-1); } .heat-in-2 { background: var(--heat-in-2); }
.heat-in-3 { background: var(--heat-in-3); } .heat-in-4 { background: var(--heat-in-4); color: var(--heat-strong-text); }
.heat-out-1 { background: var(--heat-out-1); } .heat-out-2 { background: var(--heat-out-2); }
.heat-out-3 { background: var(--heat-out-3); } .heat-out-4 { background: var(--heat-out-4); color: var(--heat-strong-text); }
.an-heat tfoot > tr > * { border-top: 2px solid var(--border); font-weight: 700; }
.an-heat tfoot .heat { background: none; }
.an-notes { margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 13px; }
/* Activities narrowed to one month, from Analysis > Capital (EASYREP-PORTFOLIO-ANALYSIS-007). */
.portfolio-month-filter { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--info-bg); color: var(--info-text); font-size: 14px; }
.portfolio-month-all { color: inherit; font-weight: 650; }

/* Performance and risk (EASYREP-PORTFOLIO-METRICS-002): the measure at the left, then per period the portfolio and
   the benchmark; a rule before each period's pair and before the money rows. */
.an-risk { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.an-risk thead th { padding: 12px 12px 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-align: right; vertical-align: bottom; white-space: nowrap; }
.an-risk thead .an-risk-period { color: var(--text); font-size: 14px; letter-spacing: 0; text-transform: none; text-align: center; }
.an-risk thead .an-risk-period span { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.an-risk tbody > tr > * { padding: 11px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.an-risk tbody th { min-width: 210px; font-weight: 600; text-align: left; }
.an-risk tbody th > span { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.an-risk td.num { text-align: right; white-space: nowrap; }
.an-risk td small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.an-risk .an-risk-first { border-left: 1px solid var(--border); }
.an-risk tr.an-risk-group > * { border-top: 2px solid var(--border); }
.an-risk td.dash-na { color: var(--warn-text); }


/* The bar charts: a bar per month from a zero line, its month a hover area with the figures as a tooltip. */
.an-chart-card { padding: 18px 18px 14px; }
.an-chart { overflow-x: auto; }
.an-bars { display: block; width: 100%; min-width: 600px; height: auto; overflow: visible; }
.an-hit { fill: transparent; }
.an-slot:hover .an-hit { fill: color-mix(in srgb, var(--text) 6%, transparent); }
/* A month's label in the band above the plot, while the pointer is on the month (EASYREP-PORTFOLIO-METRICS-004). */
.an-tip { display: none; pointer-events: none; }
.an-slot:hover .an-tip { display: inline; }
.an-tip rect { fill: var(--panel); stroke: color-mix(in srgb, var(--text) 22%, var(--border)); stroke-width: 1; }
.an-tip text { fill: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.an-tip .an-tip-head { font-weight: 650; }
.an-tip .an-tip-line { fill: var(--muted); }
.an-bar-up { fill: var(--dash-up); }
.an-bar-down { fill: var(--dash-down); }
.an-bar-in { fill: var(--bar-in); }
.an-bar-out { fill: var(--bar-out); }
.an-xtick { text-anchor: middle; }
.an-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.an-key-in { background: var(--bar-in); }
.an-key-out { background: var(--bar-out); }
.an-key-up { background: var(--dash-up); }
.an-key-down { background: var(--dash-down); }

/* Trades (EASYREP-PORTFOLIO-TRADES-004): the filter in one row, the sums as tiles, the lists and the table. Whether a
   trade led its benchmark is a sign and a word on a tint, never the colour alone. */
.tr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tr-holding { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.tr-holding label { color: var(--muted); font-size: 13.5px; font-weight: 650; }
.tr-holding select, .tr-choice select { min-height: 34px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.tr-holding select { width: 260px; }
.tr-holding .dash-button, .tr-choice .dash-button { min-height: 34px; padding: 4px 12px; }
.tr-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: hidden; }
.tr-tile { min-width: 0; margin: 0; padding: 16px 20px; }
.tr-tile + .tr-tile { border-left: 1px solid var(--border); }
.tr-tile dt { color: var(--muted); font-size: 13.5px; }
.tr-tile dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.tr-tile dd strong { display: block; font-size: 22px; font-weight: 600; }
.tr-tile dd span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.tr-list li > .num strong { font-weight: 650; }
.tr-list li > .num span { color: var(--muted); font-size: 13px; }
.tr-link { color: var(--text); text-decoration: none; }
.tr-link:hover { color: var(--accent); text-decoration: underline; }
.tr-lead { font-size: 12.5px; }
.tr-lead.tr-lead-led { color: var(--dash-up); }
.tr-lead.tr-lead-lagged { color: var(--dash-down); }
.tr-table { min-width: 980px; }
.tr-table > * > tr > * { padding-left: 8px; padding-right: 8px; }
.tr-table td { font-size: 14px; }
.tr-table td:not(.num) { white-space: nowrap; }
.tr-table tbody th { min-width: 190px; }
.tr-table .tr-plain { font-weight: 400; }
.tr-verdict { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.dash-securities td.num > .tr-verdict { display: inline-block; margin-top: 4px; color: inherit; font-size: 12px; }
.tr-verdict-led { background: var(--dash-up-bg); color: var(--dash-up); }
.tr-verdict-lagged { background: var(--dash-down-bg); color: var(--dash-down); }
.tr-verdict-even, .tr-verdict-na { background: var(--idle-bg); color: var(--idle-text); }
.tr-choices { min-width: 640px; }
.tr-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-choice select { width: min(420px, 100%); }
.tr-choice select:disabled, .tr-choice .dash-button:disabled { opacity: .55; cursor: not-allowed; }
.tr-back { align-self: flex-start; font-size: 14px; }
/* The dashboard's Trades card (EASYREP-PORTFOLIO-TRADES-006): its sums in a line above the trades. */
.dash-trades-summary { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 14px 22px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dash-trades-summary .dash-up, .dash-trades-summary .dash-down { font-weight: 650; }
.tr-course { min-width: 560px; }
.tr-sale line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.tr-sale circle { fill: var(--panel); stroke: var(--text); stroke-width: 1.5; }
.tr-key-sale { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--text); border-radius: 50%; }
.tr-periods { min-width: 620px; }
.tr-path { min-width: 480px; }
.tr-path thead th { text-transform: none; letter-spacing: 0; font-size: 13px; }
.tr-notice, .tr-problem { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.tr-notice { background: var(--ok-bg); color: var(--ok-text); }
.tr-problem { background: var(--warn-bg); color: var(--warn-text); }
@media (max-width: 900px) {
  .tr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-tile:nth-child(3) { border-left: 0; }
  .tr-tile:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .tr-holding { width: 100%; }
  .tr-holding select { flex: 1 1 0; width: auto; min-width: 0; }
  .tr-tile { padding: 12px 14px; }
  .tr-tile dd strong { font-size: 18px; }
}
@media (max-width: 720px) {
  .an-head h1 { font-size: 23px; }
  .an-tabs { gap: 22px; }
  .an-chart-card { padding: 12px 10px 10px; }
  .an-span { display: block; margin: 2px 0 0; }
}

.portfolio-dashboard { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.portfolio-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  min-height: 170px;
  padding: 30px 34px;
  overflow: hidden;
  border-radius: 14px;
  color: #f7fffc;
  background:
    radial-gradient(circle at 85% 0%, rgb(58 206 154 / 28%), transparent 38%),
    linear-gradient(130deg, #16352f 0%, #0b5140 100%);
  box-shadow: 0 14px 34px rgb(10 58 45 / 14%);
}

.portfolio-hero .portfolio-eyebrow { color: #7ce2bc; }
.portfolio-hero h2 { margin: 0; font-size: clamp(25px, 3vw, 38px); line-height: 1.15; }

.portfolio-identity { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.portfolio-identity span {
  padding: 3px 9px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  color: #d4eee5;
  font-size: 12px;
}

.portfolio-asof-group { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.portfolio-asof { text-align: right; white-space: nowrap; }
.portfolio-asof span { display: block; color: #acd2c5; font-size: 12px; }
.portfolio-asof .portfolio-asof-note { margin-top: 8px; }
.portfolio-asof strong { display: block; margin-top: 3px; font-size: 17px; }
.portfolio-asof .portfolio-freshness { display: inline-flex; margin-top: 8px; }

.portfolio-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.portfolio-metric {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: 0 5px 18px rgb(19 35 31 / 4%);
}

.portfolio-metric > span { display: block; color: var(--muted); font-size: 12px; }
.portfolio-metric > strong {
  display: block;
  margin: 5px 0 1px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
}
.portfolio-metric small { color: var(--muted); font-size: 11px; }
.portfolio-metric-unavailable { border-color: var(--warn-text); }
.portfolio-metric-unavailable > strong { color: var(--warn-text); }

.portfolio-notice,
.portfolio-state,
.portfolio-account-coverage,
.portfolio-allocations,
.portfolio-recent,
.portfolio-income,
.portfolio-activity,
.portfolio-holdings {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.portfolio-notice { padding: 16px 20px; border-color: var(--warn-text); background: var(--warn-bg); }
.portfolio-notice h3 { margin: 0 0 3px; color: var(--warn-text); font-size: 14px; }
.portfolio-notice p { margin: 0; font-size: 13px; }
.portfolio-notice ul { margin: 8px 0 0; padding-left: 20px; font-size: 12px; }

.portfolio-state { min-height: 260px; padding: 34px; }
.portfolio-state h2 { margin: 0 0 8px; font-size: 25px; }
.portfolio-state p { max-width: 620px; }
.portfolio-state-error { border-color: var(--error-text); }

.portfolio-account-coverage { overflow: hidden; }
.portfolio-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.portfolio-account-grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: start;
  gap: 4px;
  padding: 15px 20px 18px;
  border-right: 1px solid var(--border);
}
.portfolio-account-grid article:last-child { border-right: 0; }
.portfolio-account-grid article > span:not(.portfolio-meta, .portfolio-freshness, .portfolio-reason) {
  color: var(--muted);
  font-size: 12px;
}

.portfolio-allocations { overflow: hidden; }
.portfolio-allocation-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
.portfolio-largest,
.portfolio-allocation-card {
  min-width: 0;
  padding: 20px 22px;
  background: var(--panel);
}
.portfolio-largest { grid-column: 1 / -1; }
.portfolio-largest h4,
.portfolio-allocation-card h4 { margin: 0 0 14px; font-size: 17px; }
.portfolio-largest ol { margin: 0; padding: 0; list-style: none; }
.portfolio-largest li {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.portfolio-largest li:first-child { border-top: 0; }
.portfolio-largest li > div:first-child { min-width: 0; }
.portfolio-largest li span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.portfolio-largest .num { flex: 0 0 auto; font-variant-numeric: tabular-nums; text-align: right; }
.portfolio-allocation-scroll { max-width: 100%; overflow-x: auto; }
.portfolio-allocation-card table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}
.portfolio-allocation-card th,
.portfolio-allocation-card td { padding: 9px 8px; border-top: 1px solid var(--border); text-align: left; vertical-align: middle; }
.portfolio-allocation-card thead th {
  border-top: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.portfolio-allocation-card th:first-child { width: 48%; }
.portfolio-allocation-card th:nth-child(2) { width: 28%; }
.portfolio-allocation-card th:nth-child(3) { width: 24%; }
.portfolio-allocation-card tbody th { overflow-wrap: anywhere; font-weight: 680; }
.portfolio-allocation-card .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.portfolio-allocation-card progress {
  width: 100%;
  min-width: 48px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sidebar-bg);
  vertical-align: middle;
}
.portfolio-allocation-card progress::-webkit-progress-bar { background: var(--sidebar-bg); }
.portfolio-allocation-card progress::-webkit-progress-value { background: var(--accent); }
.portfolio-allocation-card progress::-moz-progress-bar { background: var(--accent); }
.portfolio-allocation-percent {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.portfolio-freshness {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-text);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.4;
  white-space: nowrap;
}
.portfolio-freshness-stale,
.portfolio-freshness-stale-close,
.portfolio-freshness-stale-fx,
.portfolio-freshness-quarantined { background: var(--warn-bg); color: var(--warn-text); }
.portfolio-freshness-missing,
.portfolio-freshness-missing-mapping,
.portfolio-freshness-unsupported-source,
.portfolio-freshness-missing-close,
.portfolio-freshness-missing-fx,
.portfolio-freshness-invalid-fx { background: var(--error-bg); color: var(--error-text); }

.portfolio-activity-overview {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
}
.portfolio-recent,
.portfolio-income,
.portfolio-activity { overflow: hidden; }
.portfolio-activity-list { margin: 0; padding: 0; list-style: none; }
.portfolio-activity-list li {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
}
.portfolio-activity-list li:last-child { border-bottom: 0; }
.portfolio-activity-main { min-width: 0; }
.portfolio-activity-date {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
}
.portfolio-activity-amount {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.portfolio-activity-amount span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.portfolio-reversal {
  display: inline-flex;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 10px;
  font-weight: 720;
  vertical-align: 1px;
}
.portfolio-income-scroll,
.portfolio-activity-scroll { max-width: 100%; overflow-x: auto; }
.portfolio-income table,
.portfolio-activity-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.portfolio-income table { min-width: 680px; }
.portfolio-activity-table { min-width: 1260px; }
.portfolio-income th,
.portfolio-income td,
.portfolio-activity-table th,
.portfolio-activity-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.portfolio-income thead th,
.portfolio-activity-table thead th {
  background: var(--sidebar-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.portfolio-income .num,
.portfolio-activity-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.portfolio-inline-warning,
.portfolio-source-note {
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
}
.portfolio-inline-warning { background: var(--warn-bg); color: var(--warn-text); }
.portfolio-source-note { border-top: 1px solid var(--border); border-bottom: 0; }
.portfolio-activity-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.portfolio-activity-totals article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  background: var(--panel);
}
.portfolio-activity-totals span,
.portfolio-activity-totals small { color: var(--muted); font-size: 10px; }
.portfolio-activity-totals strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.portfolio-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.portfolio-pagination a,
.portfolio-pagination span[aria-disabled="true"] {
  min-width: 70px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
}
.portfolio-pagination span[aria-disabled="true"] { color: var(--muted); opacity: .65; }

.portfolio-holdings { overflow: hidden; }
.portfolio-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px 15px;
  border-bottom: 1px solid var(--border);
}
.portfolio-section-head h3 { margin: 0; font-size: 20px; }
.portfolio-count { color: var(--muted); font-size: 12px; }

.portfolio-empty { padding: 46px 22px 54px; text-align: center; }
.portfolio-empty strong { font-size: 16px; }
.portfolio-empty p { margin: 5px 0 0; color: var(--muted); }

.portfolio-table-scroll { max-width: 100%; overflow-x: auto; }
.portfolio-table { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 13px; }
.portfolio-table th,
.portfolio-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.portfolio-table th {
  background: var(--sidebar-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.portfolio-table tbody tr:last-child td { border-bottom: 0; }
.portfolio-table tbody tr:hover { background: color-mix(in srgb, var(--sidebar-bg) 55%, transparent); }
.portfolio-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portfolio-meta,
.portfolio-reason { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; white-space: normal; }
.portfolio-reason { max-width: 240px; margin-left: auto; color: var(--warn-text); }
.portfolio-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sidebar-bg);
  color: var(--muted);
  font-size: 11px;
  text-transform: capitalize;
}
.portfolio-na { color: var(--warn-text); }

@media (max-width: 1100px) {
  .portfolio-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-allocation-overview { grid-template-columns: 1fr; }
  .portfolio-largest { grid-column: auto; }
  .portfolio-activity-overview { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .portfolio-workspace { gap: 16px; }
  .portfolio-hero { min-height: 0; padding: 24px 20px; align-items: start; flex-direction: column; }
  .portfolio-asof { text-align: left; }
  .portfolio-metrics { grid-template-columns: 1fr; }
  .portfolio-account-grid { grid-template-columns: 1fr; }
  .portfolio-account-grid article { border-right: 0; border-bottom: 1px solid var(--border); }
  .portfolio-account-grid article:last-child { border-bottom: 0; }
  .portfolio-section-head { padding-left: 16px; padding-right: 16px; }
  .portfolio-largest,
  .portfolio-allocation-card { padding: 17px 16px; }
  .portfolio-activity-list li { padding-left: 16px; padding-right: 16px; }
  .portfolio-pagination { flex-wrap: wrap; }
}

/* Repository: the map ---------------------------------------------------- */

:root {
  --lane-you: #2563eb;      --lane-you-bg: #e8effd;
  --lane-web: #0a6b4a;      --lane-web-bg: #e7f5ee;
  --lane-runner: #7c3aed;   --lane-runner-bg: #f1eafe;
  --lane-script: #c2410c;   --lane-script-bg: #fdeee6;
  --lane-database: #0e7490; --lane-database-bg: #e3f4f8;
  --lane-result: #4b5563;   --lane-result-bg: #eef0f3;
  --area-0: #c2410c; --area-1: #0a6b4a; --area-2: #7c3aed;
  --area-3: #2563eb; --area-4: #4b5563; --area-5: #0e7490;
  --lw: 28px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lane-you: #7aa2ff;      --lane-you-bg: #1b2440;
    --lane-web: #4fd1a0;      --lane-web-bg: #123227;
    --lane-runner: #b79bff;   --lane-runner-bg: #2a2140;
    --lane-script: #f0a060;   --lane-script-bg: #3a2616;
    --lane-database: #5ccfe6; --lane-database-bg: #12303a;
    --lane-result: #b3bac4;   --lane-result-bg: #262a31;
    --area-0: #f0a060; --area-1: #4fd1a0; --area-2: #b79bff;
    --area-3: #7aa2ff; --area-4: #b3bac4; --area-5: #5ccfe6;
  }
}

.panel-wide { max-width: 1180px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); max-width: 1180px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.crumb-sep { opacity: .6; }

.area-0 { --area: var(--area-0); } .area-1 { --area: var(--area-1); } .area-2 { --area: var(--area-2); }
.area-3 { --area: var(--area-3); } .area-4 { --area: var(--area-4); } .area-5 { --area: var(--area-5); }
.area-index {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--area, var(--muted)); color: var(--panel); font-size: 12px; font-weight: 700;
}

.entry {
  display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap; margin-right: 4px;
}
.entry-portal { color: var(--lane-web); border-color: var(--lane-web); background: var(--lane-web-bg); }
.entry-command-line { color: var(--lane-script); border-color: var(--lane-script); background: var(--lane-script-bg); }
.entry-by-hand { color: var(--lane-you); border-color: var(--lane-you); background: var(--lane-you-bg); }

/* Level 0: the areas */
.areamap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.6fr);
  gap: 10px; align-items: stretch; margin-top: 14px;
}
.areamap-arrow { align-self: center; color: var(--muted); font-size: 22px; }
.areamap-consumers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.areatile {
  border: 1px solid var(--border); border-top: 4px solid var(--area); border-radius: 10px;
  background: var(--sidebar-bg); padding: 12px 14px; display: flex; flex-direction: column; min-width: 0;
}
.areatile-head { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.areatile-head a { color: var(--text); text-decoration: none; }
.areatile-head a::after { content: " ›"; color: var(--muted); }
.areatile-head a:hover { color: var(--area); }
.areatile-summary { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.areatile-flows { margin: 0 0 10px; padding-left: 16px; font-size: 13px; line-height: 1.6; flex: 1 1 auto; }
.areatile-flows a { color: var(--text); }
.areatile-flows a:hover { color: var(--area); }
.areatile-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.areatile-compact .areatile-summary { display: none; }
.areatile-compact .areatile-flows { font-size: 12.5px; }

.lanelegend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 6px 18px; font-size: 13px; }
.lanelegend li { display: grid; grid-template-columns: 10px 76px 1fr; gap: 8px; align-items: baseline; }

.lane-you { --lanecolor: var(--lane-you); } .lane-web { --lanecolor: var(--lane-web); }
.lane-runner { --lanecolor: var(--lane-runner); } .lane-script { --lanecolor: var(--lane-script); }
.lane-database { --lanecolor: var(--lane-database); } .lane-result { --lanecolor: var(--lane-result); }

/* Level 1: an area's flows */
.areatabs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1180px; }
.areatab {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 550;
}
.areatab:hover { color: var(--text); border-color: var(--area); }
.areatab.active { color: var(--text); border-color: var(--area); background: var(--sidebar-bg); }
.areatab .area-index { flex-basis: 20px; width: 20px; height: 20px; font-size: 11px; }

.flowlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 10px; }
.flowcard-link {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--area); border-radius: 10px;
  background: var(--panel); color: var(--text); text-decoration: none;
}
.flowcard-link:hover { border-color: var(--area); box-shadow: 0 1px 0 var(--border); }
.flowcard-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flowcard-title { font-weight: 650; font-size: 14.5px; margin-right: auto; }
.flowcard-summary { font-size: 13px; }
.flowcard-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

.strip { display: inline-flex; align-items: center; gap: 3px; }
.strip-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--lanecolor); flex: 0 0 9px;
}

/* Level 2: a flow, step by step */
.flowhead { border-top: 4px solid var(--area); }
.flowhead-grid { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.flowhead-grid .facts { flex: 1 1 520px; }
.facts-compact { grid-template-columns: 140px 1fr; gap: 6px 16px; font-size: 14px; }
@media (max-width: 720px) {
  .facts-compact { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
}
.openbtn {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--accent); border-radius: 7px;
  color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; background: var(--ok-bg);
}
.openbtn:hover { filter: brightness(.97); }
.flowhead-open { margin: 0; }

.legendbox { margin: -4px 0 12px; }
.legendbox summary { cursor: pointer; color: var(--muted); }

.seq-lanes { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 4px 0 6px; }
.seq-lanehead { width: calc(var(--lanes) * var(--lw)); display: flex; }
.lanehead {
  width: var(--lw); height: 74px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: flex-start; color: var(--lane-c);
}

.seq { list-style: none; margin: 0; padding: 0; }
.seq-row {
  display: grid; grid-template-columns: calc(var(--lanes) * var(--lw)) minmax(0, 1fr); column-gap: 14px;
}
.rail {
  position: relative;
  background-image: repeating-linear-gradient(to right,
    transparent 0, transparent calc(var(--lw) / 2 - .5px),
    var(--border) calc(var(--lw) / 2 - .5px), var(--border) calc(var(--lw) / 2 + .5px),
    transparent calc(var(--lw) / 2 + .5px), transparent var(--lw));
}
.rail-line, .rail-link { position: absolute; background: var(--muted); opacity: .55; }
.rail-line { left: calc(var(--lane) * var(--lw) + var(--lw) / 2 - 1px); width: 2px; top: 0; bottom: 0; }
.seq-first .rail-line { top: 18px; }
.seq-last .rail-line { bottom: auto; height: 18px; }
.seq-first.seq-last .rail-line { display: none; }
.rail-link { top: 0; height: 2px; left: calc(var(--lo) * var(--lw) + var(--lw) / 2 - 1px); width: calc(var(--span) * var(--lw) + 2px); }
.seq-first .rail-link { display: none; }
.rail-dot {
  position: absolute; top: 12px; left: calc(var(--lane) * var(--lw) + var(--lw) / 2 - 7px);
  width: 14px; height: 14px; border-radius: 50%; background: var(--lanecolor); border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--lanecolor);
}

.seq-card {
  margin: 0 0 10px; padding: 10px 14px 12px; border: 1px solid var(--border); border-left: 3px solid var(--lane-c);
  border-radius: 8px; background: var(--panel); min-width: 0; scroll-margin-top: 90px; overflow-wrap: anywhere;
}
.seq-row:target .seq-card { box-shadow: 0 0 0 2px var(--lane-c); }
.seq-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seq-n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lanecolor); color: var(--panel); font-size: 11.5px; font-weight: 700; flex: 0 0 22px;
}
.seq-title { font-size: 14.5px; overflow-wrap: anywhere; }
.seq-open { margin-left: auto; }
.lanechip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 4px; color: var(--lane-c); background: var(--lane-bg);
}
.lanechip-you, .lanecard-you { --lane-c: var(--lane-you); --lane-bg: var(--lane-you-bg); }
.lanechip-web, .lanecard-web { --lane-c: var(--lane-web); --lane-bg: var(--lane-web-bg); }
.lanechip-runner, .lanecard-runner { --lane-c: var(--lane-runner); --lane-bg: var(--lane-runner-bg); }
.lanechip-script, .lanecard-script { --lane-c: var(--lane-script); --lane-bg: var(--lane-script-bg); }
.lanechip-database, .lanecard-database { --lane-c: var(--lane-database); --lane-bg: var(--lane-database-bg); }
.lanechip-result, .lanecard-result { --lane-c: var(--lane-result); --lane-bg: var(--lane-result-bg); }
.lanehead.lanechip-you, .lanehead.lanechip-web, .lanehead.lanechip-runner, .lanehead.lanechip-script,
.lanehead.lanechip-database, .lanehead.lanechip-result { background: none; padding: 0; border-radius: 0; }

.seq-routes { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.route {
  font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 4px;
  background: var(--lane-web-bg); color: var(--lane-web); overflow-wrap: anywhere;
}
.seq-detail { margin: 6px 0 0; font-size: 13.5px; }

.formmock {
  margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px;
  background: var(--sidebar-bg); font-size: 13px;
}
.formmock-head { margin: 0 0 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.formmock-head .mono { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.formmock-row {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) 150px minmax(120px, 1fr); gap: 4px 12px;
  align-items: center; padding: 4px 0;
}
.formmock-note { grid-column: 2 / -1; font-size: 12px; margin-top: -2px; }
.formmock-name { font-size: 11.5px; color: var(--muted); word-break: break-all; }
.mockctl {
  display: inline-block; padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--panel); color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden;
}
.mockctl-checkbox { width: max-content; border: 0; background: none; font-size: 16px; padding: 0; }
.mockctl-select { text-align: left; }
.formmock-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mockbtn {
  padding: 4px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
  color: var(--accent); font-weight: 600; font-size: 12.5px;
}
.formmock .req { font-size: 10px; }

.cmd {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--sidebar-bg);
  border: 1px solid var(--border); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word;
}
.seq-scripts { margin: 10px 0 0; padding-left: 18px; }
.seq-scripts > li { padding: 6px 0; border-top: 1px solid var(--border); }
.seq-scripts > li:first-child { border-top: 0; padding-top: 0; }
.seq-scripts:not(.seq-stages) { list-style: none; padding-left: 0; }
.seq-script { font-size: 12.5px; color: var(--lane-script); word-break: break-all; }
.seq-purpose { margin: 3px 0 0; }
.seq-tables { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.seq-tables .tablabel { margin-left: 4px; }
.seq-tables .tablabel:first-child { margin-left: 0; }
.seq-outputs { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.chip-portal { border-style: dashed; }
.tablabel .via { text-transform: none; letter-spacing: 0; font-weight: 500; font-family: var(--mono); word-break: break-all; }
a.chip { color: inherit; text-decoration: none; }
a.chip:hover { border-color: var(--accent); }

@media (max-width: 1100px) {
  .areamap { grid-template-columns: 1fr; }
  .areamap-arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 720px) {
  .areamap-consumers { grid-template-columns: 1fr; }
  :root { --lw: 14px; }
  .lanehead { font-size: 0; }
  .formmock-row { grid-template-columns: 1fr; }
  .formmock-note { grid-column: 1; }
}

.lineage-wrap { overflow-x: auto; }
.lineage { display: block; max-width: none; font-size: 12px; }
.lineage .colhead { fill: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.lineage .edge { fill: none; stroke-width: 1.2; opacity: .55; transition: opacity .12s; }
.lineage .edge-write { stroke: var(--warn-text); }
.lineage .edge-read { stroke: var(--muted); }
.lineage .edge-back { stroke-dasharray: 3 3; opacity: .3; }
.lineage .node rect { fill: var(--panel); stroke: var(--border); }
.lineage .node text { fill: var(--text); font-family: var(--mono); }
.lineage .node-g-1 rect { fill: var(--sidebar-bg); }
.lineage .node-g0 rect { stroke: var(--area-0); }
.lineage .node-g1 rect { stroke: var(--area-1); }
.lineage .node-g2 rect { stroke: var(--area-2); }
.lineage .node-g3 rect { stroke: var(--area-3); }
.lineage .node-g4 rect { stroke: var(--area-4); }
.lineage .node-g5 rect { stroke: var(--area-5); }
.lineage.focus .edge { opacity: .06; }
.lineage.focus .node { opacity: .35; }
.lineage.focus .edge.hot { opacity: 1; stroke-width: 2; }
.lineage.focus .node.hot { opacity: 1; }

/* Documentation pages rendered from Markdown */

.docpage { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.docpage > * { min-width: 0; }
.docpage > .markdown:only-child { grid-column: 1 / -1; }
/* The article is a focusable scroll region (.table-scroll) whose max-width is still the reading width. */
.markdown.table-scroll { max-width: 980px; }
.doctoc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; font-size: 12.5px; }
.doctoc ul { list-style: none; margin: 6px 0 0; padding: 0; line-height: 1.8; }
.markdown { max-width: 980px; line-height: 1.55; font-size: 14px; }
.markdown h1 { font-size: 20px; margin: 4px 0 14px; }
.markdown h2 { font-size: 16px; margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.markdown h3 { font-size: 14px; margin: 18px 0 8px; }
.markdown code { font-family: var(--mono); font-size: 12.5px; background: var(--sidebar-bg); padding: 1px 4px; border-radius: 4px; }
.markdown pre { background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; }
.markdown pre code { background: none; padding: 0; }
/* A long path or URL in running text breaks to fit; in a table cell it stays whole and the table scrolls. */
.markdown h1, .markdown h2, .markdown h3, .markdown p, .markdown li, .markdown blockquote { overflow-wrap: anywhere; }
.markdown blockquote { margin: 10px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }
.mdtable { overflow-x: auto; margin: 10px 0; }
.mdtable .grid td { white-space: normal; vertical-align: top; }

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), and a wide table in the article would stretch the column. */
  .docpage { grid-template-columns: minmax(0, 1fr); }
  .doctoc { position: static; max-height: none; }
}

/* Performance views: the value chart, the cash lines, and the pair of currencies. */
.portfolio-chart { margin: 0; padding: 18px 22px 22px; }
.portfolio-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.portfolio-chart figcaption { margin-top: 10px; }

.portfolio-cashlines { margin: 0; padding: 16px 22px 20px; list-style: none; }
.portfolio-cashlines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.portfolio-cashlines li:last-child { border-bottom: 0; }

/* A trade currency above, the portfolio currency below it, when the two differ. */
.portfolio-table td.num .portfolio-meta { display: block; color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .portfolio-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .portfolio-metrics { grid-template-columns: minmax(0, 1fr); }
}
.portfolio-lead { padding: 18px 22px; }

/* Jobs: one panel per job section, and what an empty section waits for. */
.job-section h2 a { color: inherit; }
.job-section h2 a:hover { color: var(--accent); }
/* The accent has a value per colour scheme; the browser's link blue has not. */
.job-section .grid a,
.section-back a,
.nextstep-link { color: var(--accent); }
.job-section > h2 + .muted.small { margin: -8px 0 12px; }
/* A description wraps inside the panel; .grid cells otherwise never wrap. */
.job-section .grid td.small { white-space: normal; }
.pending-jobs { margin: 0; padding-left: 18px; font-size: 13px; }
.pending-lead { margin: 14px 0 6px; }
.pending-jobs li + li { margin-top: 6px; }
.topbar .crumbs { margin-bottom: 6px; }
/* A job page's three tabs fit a phone once they give up some padding. */
@media (max-width: 480px) {
  .tab { padding: 11px 14px; }
}

/* Compare: one colour per portfolio, the combined total in the text colour and
   thicker. Each colour has a value per scheme. */
.compare-chart { --series-0: #0a6b4a; --series-1: #2563eb; --series-2: #b45309; --series-3: #7c3aed; }
@media (prefers-color-scheme: dark) {
  .compare-chart { --series-0: #4fd1a0; --series-1: #7aa7ff; --series-2: #f0a44b; --series-3: #b99cff; }
}
.compare-line { stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.compare-series-0 { stroke: var(--series-0); background: var(--series-0); }
.compare-series-1 { stroke: var(--series-1); background: var(--series-1); }
.compare-series-2 { stroke: var(--series-2); background: var(--series-2); }
.compare-series-3 { stroke: var(--series-3); background: var(--series-3); }
.compare-line.compare-line-total { stroke: var(--text); stroke-width: 2.6; }
.compare-swatch.compare-line-total { background: var(--text); }
.compare-line.compare-line-benchmark { stroke: var(--muted); stroke-dasharray: 2 3; stroke-width: 2; }
.compare-swatch.compare-line-benchmark { background: var(--muted); }
.compare-baseline { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.compare-legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.compare-legend li { display: flex; align-items: center; gap: 6px; }
.compare-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.compare-table tfoot th, .compare-table tfoot td { font-weight: 650; border-top: 2px solid var(--border); }
.compare-table th a { color: var(--accent); }

/* --- Jobs (EASYREP-JOBS-UX): status chips, buttons, the job page ---------------
   Approved as mock-ups in Other/documentation/webapp/jobs-mockups. */

.process-link { font-size: 13px; color: var(--accent); white-space: nowrap; }
.process-link::after { content: " \203A"; }
.job-key { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.panel h2 .hint { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.table-scroll { max-width: 100%; overflow-x: auto; }
/* A table of prose: the description cells wrap instead of making the table as wide as its longest sentence. */
.grid-wrap td.small { white-space: normal; }

/* Status: a label and a mark, never colour alone. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-ok { background: var(--ok-bg); color: var(--ok-text); }
.chip-warn { background: var(--warn-bg); color: var(--warn-text); }
.chip-fail { background: var(--error-bg); color: var(--error-text); }
.chip-run { background: var(--info-bg); color: var(--info-text); }
.chip-idle { background: var(--idle-bg); color: var(--idle-text); }
.chip-idle::before { background: transparent; border: 1.5px solid currentColor; }
.chip-run::before { animation: chip-pulse 1.4s ease-in-out infinite; }
@keyframes chip-pulse { 50% { opacity: .25; } }

/* Buttons: one filled action per place, the rest quiet. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 14px;
  border-radius: 7px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-small { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* A job's page: run now beside the saved settings. */
.job-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; max-width: 1180px; align-items: start; }
.job-layout > .panel { max-width: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.form-actions .saveas { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-actions input[type="text"] {
  min-height: 34px; padding: 5px 10px; width: 180px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px;
}
.form-actions .inlineform, .saved .inlineform { margin-left: 0; }
.field-help { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.switch { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.switch input { margin-top: 3px; }
.loaded-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

.confirm {
  margin: 4px 0 16px; padding: 14px 16px;
  border: 1px solid var(--warn-text); border-radius: 9px; background: var(--warn-bg);
  font-size: 13.5px;
}
.confirm h3 { margin: 0 0 6px; font-size: 14px; color: var(--warn-text); }
.confirm ul { margin: 6px 0 12px; padding-left: 18px; }
.confirm p { margin: 0 0 10px; }

.saved { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.saved li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.saved li:last-child { border-bottom: 0; }
.saved .name { font-weight: 600; font-size: 14px; }
.saved .what { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.saved .acts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-items: center; }

/* Subjobs: the only numbered list, because they run in this order. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.steps .step-name { font-weight: 600; font-size: 14px; }
.steps .step-what { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.steps .step-side { grid-row: 1 / span 2; grid-column: 3; font-size: 12.5px; color: var(--muted); text-align: right; white-space: nowrap; }

/* The overview: a topic area, what it is for, its process, then its jobs as cards. */
.area { display: flex; flex-direction: column; gap: 12px; max-width: 1180px; }
.area + .area, .area + .area-runs { margin-top: 22px; }
.area-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.area-head h2 { margin: 0; font-size: 17px; font-weight: 650; text-wrap: balance; }
.area-head h2 a { color: inherit; text-decoration: none; }
.area-head h2 a:hover { color: var(--accent); }
.area-purpose { flex: 1 1 320px; margin: 0; font-size: 13px; color: var(--muted); }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
/* Every job card has the same anatomy, top to bottom. */
.job-card {
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px;
}
.job-card.is-running { border-color: var(--info-text); }
.job-title { display: flex; flex-direction: column; gap: 1px; }
.job-title h3 { margin: 0; font-size: 15px; font-weight: 650; }
.job-title h3 a { color: inherit; text-decoration: none; }
.job-title h3 a:hover { color: var(--accent); }
.job-purpose { margin: 0; font-size: 13px; color: var(--muted); }
.job-last { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.job-actions .setting { flex: 1 1 0; min-width: 0; font-size: 12.5px; color: var(--muted); }
.job-actions .setting strong { color: var(--text); font-weight: 600; }
.job-actions .inlineform { display: inline-flex; margin: 0; }
/* The running job, once, above everything. */
.now-running {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  max-width: 1180px; margin-bottom: 18px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--info-bg); color: var(--info-text); font-size: 13.5px;
}
.now-running strong { color: var(--text); }
.now-running .muted { color: var(--info-text); opacity: .85; }
.now-running a { color: var(--info-text); font-weight: 600; margin-left: auto; }
.default-badge {
  display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px;
  background: var(--info-bg); color: var(--info-text);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px;
}
/* A run's page: how it stands, how it ended, its steps as they pass, the log folded. */
.run-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; justify-content: space-between; }
.run-head h2 { margin: 0 0 10px; }
.run-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13.5px; }
.run-facts dt { color: var(--muted); }
.run-facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.run-head .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.run-head .acts .inlineform { display: inline-flex; margin: 0; }
.outcome { border-left: 3px solid var(--ok-text); padding: 2px 0 2px 14px; }
.outcome.warn { border-left-color: var(--warn-text); }
.outcome.fail { border-left-color: var(--error-text); }
.outcome.idle { border-left-color: var(--idle-text); }
.outcome h2 { margin: 0 0 6px; font-size: 15px; text-wrap: balance; }
.outcome p { margin: 0 0 10px; max-width: 65ch; }
.outcome .form-actions { margin-top: 4px; }
.outcome .console { margin: 4px 0 10px; max-height: 280px; }
.steps.live li::before { content: ""; border-width: 2px; }
.steps.live li.done::before { content: "\2713"; background: var(--ok-bg); border-color: var(--ok-text); color: var(--ok-text); }
.steps.live li.running::before { border-color: var(--info-text); border-top-color: transparent; animation: step-spin 1s linear infinite; }
.steps.live li.waiting::before { border-style: dashed; }
.steps.live li.refused::before { content: "!"; background: var(--warn-bg); border-color: var(--warn-text); color: var(--warn-text); }
.steps.live li.failed::before, .steps.live li.interrupted::before { content: "\2715"; background: var(--error-bg); border-color: var(--error-text); color: var(--error-text); }
.steps.live li.waiting .step-name, .steps.live li.not-reached .step-name { color: var(--muted); font-weight: 500; }
.steps.live li.refused .step-side { color: var(--warn-text); }
.steps.live li.failed .step-side, .steps.live li.interrupted .step-side { color: var(--error-text); }
@keyframes step-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps.live li.running::before { animation: none; border-top-color: var(--info-text); } }
details.log summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.log summary .hint { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
/* A job that runs as pages: its steps as a strip, the one on screen marked. */
.flow-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 16px; padding: 0; max-width: 1180px; }
.flow-strip li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 600;
}
.flow-strip .flow-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); font-size: 12px; font-variant-numeric: tabular-nums;
}
.flow-strip li.done { color: var(--text); }
.flow-strip li.done .flow-num { background: var(--ok-bg); border-color: var(--ok-text); color: var(--ok-text); }
.flow-strip li.current { color: var(--text); border-color: var(--accent); }
.flow-strip li.current .flow-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.flow-lead { max-width: 75ch; margin: 0 0 14px; }
@media (prefers-reduced-motion: reduce) { .chip-run::before { animation: none; } }
@media (max-width: 900px) { .job-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .job-grid { grid-template-columns: minmax(0, 1fr); }
  .now-running a { margin-left: 0; }
  .saved li { grid-template-columns: minmax(0, 1fr); }
  .saved .acts { grid-row: auto; grid-column: 1; }
  .steps li { grid-template-columns: 30px minmax(0, 1fr); }
  .steps .step-side { grid-row: auto; grid-column: 2; text-align: left; }
}

/* Keyboard focus is visible on every control, in reading order. The flow strip
   shows a finished step with a tick and the current one with a heavier border
   as well as colour. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flow-strip li.current { border-width: 2px; padding: 4px 11px 4px 5px; }
.flow-strip li.current .flow-title { text-decoration: underline; text-underline-offset: 3px; }
.flow-strip li.done .flow-num { font-size: 13px; }

/* A keyboard user can jump past the sidebar to the page. */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 8px 14px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
.main:focus { outline: none; }

/* A link inside an error panel reads against the panel, in light and dark. */
.content a:not([class]) { color: var(--accent); }
.content .panel-error a:not([class]) { color: var(--error-text); text-decoration: underline; font-weight: 600; }
.panel-error .muted { color: var(--text); }

/* A job run by portfolio (EASYREP-PORTFOLIO-JOBS): every active portfolio as
   the Portfolio page labels it, its last update, and Update; Update all above. */
.pf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pf-head h2 { margin: 0; }
.pf-list { list-style: none; margin: 12px 0 0; padding: 0; }
.pf-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.pf-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pf-last { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.pf-act { margin: 0; display: inline-flex; }
.job-layout-single { grid-template-columns: minmax(0, 1fr); }
.check-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.check-list legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.check-list legend .hint { font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 8px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 32px; overflow-wrap: anywhere; }
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.pf-reach { font-size: 12.5px; color: var(--muted); }
.pf-reach strong { color: var(--text); font-weight: 600; }
.pf-rebuild { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.pf-rebuild select { flex: 1 1 260px; min-width: 0; }
.portfolio-update { margin-top: 12px; }
.portfolio-update .btn { width: 100%; }
@media (max-width: 560px) {
  .pf-list li { grid-template-columns: minmax(0, 1fr); }
  .pf-list .pf-act .btn { width: 100%; }
}

/* Fund income per security: a security spans its reports, then its total. */
.fi-table th[scope="rowgroup"] { vertical-align: top; text-align: left; white-space: nowrap; }
.fi-table .fi-total td { font-weight: 650; border-top: 2px solid var(--border); }
.outcome-reach { margin: 0 0 10px; padding-left: 18px; }

/* Subsections of one topic area (EASYREP-DATA-INTAKE-002). */
.sub-area + .sub-area { margin-top: 26px; }

/* The statement inbox (EASYREP-DATA-INTAKE-003). */
.panel-ok { background: var(--ok-bg); border-color: var(--ok-text); }
.in-drop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px; margin-bottom: 16px; border: 1.5px dashed var(--border); border-radius: 10px; background: var(--sidebar-bg);
}
.in-drop input[type="file"] { max-width: 100%; font: inherit; font-size: 13px; color: var(--text); }
.in-period { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.in-period legend { font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 6px; }
.in-row { display: flex; flex-wrap: wrap; gap: 0 14px; }
.in-row .field { flex: 1 1 140px; }
.in-input {
  width: 100%; min-height: 34px; padding: 5px 10px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px;
}
.in-reach { list-style: none; margin: 0; padding: 0; }
.in-reach li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.in-reach li:last-child { border-bottom: 0; }
.in-through { color: var(--muted); font-size: 12.5px; }
.in-through strong { color: var(--text); font-weight: 600; }
.in-file { font-weight: 600; overflow-wrap: anywhere; }
.in-instruction { white-space: pre-wrap; overflow-wrap: anywhere; }
.status-warn { color: var(--warn-text); }
.in-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.in-checks li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Load statement: a Revolut CSV chooses its PDF beside Preview (EASYREP-REVOLUT-IMPORT-003). */
.in-loadform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.in-loadform select { max-width: 100%; min-height: 30px; }

/* A job page's links to its entry and its process (EASYREP-DATA-INTAKE-009). */
.job-about { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.job-about a { color: var(--accent); }
.job-card .job-last .process-link + .process-link { margin-left: 12px; }

/* Record by hand (EASYREP-DATA-INTAKE-006). */
.rec-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-kind {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 34px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 7px; font-size: 13.5px; cursor: pointer;
}
.rec-kind:has(input:checked) { border-color: var(--accent); background: var(--sidebar-bg); font-weight: 600; }
.rec-trade { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.rec-new { margin: 0 0 14px; font-size: 13.5px; }
.rec-new summary { cursor: pointer; color: var(--muted); margin-bottom: 10px; }
.rec-rows { display: flex; flex-wrap: wrap; gap: 16px; }
.rec-row { flex: 1 1 280px; min-width: 0; }
.rec-row h3 { margin: 0 0 8px; font-size: 13px; }
.rec-cols { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; }
.rec-cols dt { color: var(--muted); }
.rec-cols dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* The ETFs section's lists (EASYREP-ETF-COMPARE-009), from the approved mock-ups; built from the tokens above so light and dark follow. */
/* A result chip may be a sentence: let it wrap rather than push the page wider than a phone. */
.content .chip { white-space: normal; max-width: 100%; }

/* The ETFs section's own views, as tabs in the page (workspace D-05). */
.etf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; max-width: 1180px; }
.etf-tabs a { padding: 8px 14px; border-radius: 7px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.etf-tabs a:hover { color: var(--text); }
.etf-tabs a[aria-current] { background: var(--ok-bg); color: var(--accent); }
.etf-tabs a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }

/* Toolbar: search, filters, columns. */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; }
.toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.toolbar input[type="search"], .toolbar select {
  min-height: 34px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; min-width: 150px;
}
.toolbar .grow { flex: 1 1 220px; }
.toolbar .grow input { width: 100%; }
.cols { position: relative; }
.cols > summary { list-style: none; cursor: pointer; }
.cols > summary::-webkit-details-marker { display: none; }
.cols[open] > summary { border-color: var(--accent); }
.cols-list {
  position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); min-width: 230px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
  display: flex; flex-direction: column; gap: 6px; font-size: 13.5px;
}
.cols-list label { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 13.5px; }
.cols-list .src { margin-left: auto; }
.cols-list input { width: 16px; height: 16px; accent-color: var(--accent); }

/* A switch: a button that reads as a setting, so one press saves it. */
.switch-label { font-size: 14px; font-weight: 600; }
.switch-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px; min-height: 34px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.switch-btn .track {
  position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 11px; border: 1.5px solid var(--muted);
  background: var(--idle-bg); transition: background .15s;
}
.switch-btn .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.switch-btn[aria-checked="true"] .track { background: var(--ok-bg); border-color: var(--accent); }
.switch-btn[aria-checked="true"] .track::after { transform: translateX(16px); background: var(--accent); }
.switch-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.switch-btn .state { font-weight: 600; min-width: 2.2em; }
@media (prefers-reduced-motion: reduce) { .switch-btn .track, .switch-btn .track::after { transition: none; } }

/* Where a column comes from. The portal's muted text on its sidebar background is 4.43 to 1; these small labels sit on
   that background, so they use a slightly stronger muted colour to reach 4.5 to 1. */
.src {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--border); color: color-mix(in srgb, var(--muted) 70%, var(--text)); background: var(--sidebar-bg); white-space: nowrap;
}
.src-oekb { color: var(--ok-text); border-color: var(--ok-text); background: var(--ok-bg); }
.src-yahoo { color: var(--info-text); border-color: var(--info-text); background: var(--info-bg); }
.src-index { color: var(--warn-text); border-color: var(--warn-text); background: var(--warn-bg); }
.src-derived { color: var(--text); }
.src-manual { border-style: dashed; }

/* The screener table. */
.etf-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.etf-table th, .etf-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.etf-table thead th { position: sticky; top: 0; background: var(--panel); font-weight: 600; color: var(--muted); white-space: nowrap; }
.etf-table tbody tr:hover { background: var(--sidebar-bg); }
.etf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etf-table .src { display: block; width: max-content; margin-top: 3px; }
.etf-table th.num .src { margin-left: auto; }
.etf-table td:first-child { min-width: 170px; }
.etf-table th .sort {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: inherit; font-weight: inherit;
}
.etf-table th .sort::after { content: "\2195"; font-size: 11px; opacity: .55; }
.etf-table th[aria-sort="ascending"] .sort::after { content: "\2191"; opacity: 1; color: var(--accent); }
.etf-table th[aria-sort="descending"] .sort::after { content: "\2193"; opacity: 1; color: var(--accent); }
.etf-table th .sort:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; border-radius: 3px; }
.fund-name { font-weight: 600; display: block; }
.fund-meta { display: block; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.held {
  display: inline-block; margin: 0 4px 3px 0; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--ok-bg); color: var(--ok-text); white-space: nowrap;
}
.held-from { background: var(--idle-bg); color: var(--idle-text); font-weight: 500; }
/* A link with a class takes no colour from `.content a:not([class])`, so it is given the accent here (the browser's
   own blue is 1.7 to 1 on the dark background). */
.fund-act { display: block; margin-top: 6px; color: var(--accent); }
.empty { color: var(--muted); }
.empty small { display: block; font-size: 11.5px; line-height: 1.3; }
/* A reason may be a sentence: it wraps in its cell, even in a figure's column that keeps its numbers on one line. */
.etf-table td .empty small { white-space: normal; max-width: 16em; }
.etf-table td.num .empty small { margin-left: auto; text-align: right; }
/* Wider than the screen, the table scrolls inside its own area; the fund's name stays in view beside the figures. */
@media (min-width: 721px) {
  .etf-table th:first-child, .etf-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--border); }
  .etf-table tbody tr:hover td:first-child { background: var(--sidebar-bg); }
}
.legend { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.legend .empty { margin-right: 4px; }
.etf-table td .inlineform { margin-left: 0; }

@media (max-width: 720px) {
  .toolbar label, .toolbar input[type="search"], .toolbar select { min-width: 0; }
  .toolbar > label { flex: 1 1 140px; }
  /* On a phone the column list opens in the page instead of floating, so it can never leave the screen. */
  .cols { position: static; flex: 1 1 100%; }
  .cols-list { position: static; min-width: 0; margin-top: 8px; box-shadow: none; }
}

/* The comparison (EASYREP-ETF-COMPARE-010): funds as columns, a bar beside each number, from the approved mock-up. */
.toolbar.tight { margin: 0; min-width: 0; max-width: 100%; }
.toolbar select { max-width: 100%; }
@media (max-width: 720px) {
  .toolbar.tight { flex: 1 1 100%; }
  .toolbar.tight > label { flex: 1 1 100%; }
}
.notoffered { margin: 0 0 8px; font-size: 13px; }
.notoffered summary { cursor: pointer; color: var(--muted); }
.notoffered ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.etf-table.cmp td { white-space: normal; min-width: 150px; }
.etf-table.cmp td small { display: block; }
.etf-table.cmp td .held { margin-top: 2px; }
.etf-table.cmp tbody th { font-weight: 600; color: var(--text); white-space: normal; min-width: 170px; }
.etf-table.cmp tbody th small { display: block; font-weight: 400; color: var(--muted); }
.etf-table tr.group th {
  background: var(--sidebar-bg); color: var(--text); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
  white-space: normal; position: static;
}
/* The portal's muted text on this heading's background is 4.43 to 1, so the note uses the stronger muted colour. */
.etf-table tr.group th small {
  text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px;
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
}
.etf-table tr.group .src { display: inline-block; margin: 0 0 0 6px; }
.cmp-head { min-width: 150px; }
.cmp-head .fund-name { font-size: 13.5px; }
.ref-mark { display: inline-block; font-size: 11px; font-weight: 600; color: var(--info-text); }
.barcell { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.bar { display: inline-block; flex: 0 0 auto; height: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.bar-info { background: var(--info-text); }
.bar-warn { background: var(--warn-text); }
.bar-neg { background: var(--error-text); }
.barcell .v { font-variant-numeric: tabular-nums; }
.best { font-size: 11px; font-weight: 600; color: var(--ok-text); }
.legend.notes { margin: 6px 0 0; padding-left: 18px; }

/* A fund's own page (EASYREP-ETF-COMPARE-011), from the approved mock-up. */
.fund-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 4px; }
.fund-head h2 { margin: 0; font-size: 20px; }
.anchor-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 24px; margin: 0; }
.keyfacts dt { font-size: 12px; color: var(--muted); }
.keyfacts dd { margin: 2px 0 0; font-weight: 600; }
.keyfacts .src { margin-left: 6px; font-weight: 500; }
.keyfacts dd small { display: block; font-weight: 400; }
.chart-wrap { overflow-x: auto; }
.chart-wrap:focus-visible, .table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart { width: 100%; min-width: 520px; height: auto; display: block; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .l-fund { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .l-index { fill: none; stroke: var(--info-text); stroke-width: 2; stroke-dasharray: 6 4; }
.legend-key { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; margin: 6px 0 0; }
.legend-key .sw { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--accent); vertical-align: middle; margin-right: 6px; }
.legend-key .sw-index { border-top: 2px dashed var(--info-text); }
.period-pick { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.period-pick a, .period-pick span {
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text);
  font-size: 13px; text-decoration: none;
}
.period-pick a:hover { border-color: var(--accent); }
.period-pick a[aria-current] { background: var(--ok-bg); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.period-pick span[aria-disabled] { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.listing-table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0 0; }
.listing-table th, .listing-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.listing-table th { color: var(--muted); font-weight: 600; }
.listing-table tr.pick { background: var(--ok-bg); }
.listing-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.etf-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--text); position: static; white-space: normal; }
.fund-name a { color: inherit; }

/* Where a page's figures come from and how current each source is (EASYREP-ETF-COMPARE-012). */
.sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.sources li { overflow-wrap: anywhere; }
.sources .src { margin-right: 4px; }
@media (min-width: 721px) {
  .etf-table.cmp tbody tr:hover th:first-child { background: var(--sidebar-bg); }
}

/* The Repository's jobs and processes (EASYREP-REPOSITORY-PROCESSES-002), from the approved mock-up.
   Colour is the section - Load info, Derive ok, Report idle, Check warn - always beside its name. */
.sec-load { --sec-bg: var(--info-bg); --sec-fg: var(--info-text); }
.sec-derive { --sec-bg: var(--ok-bg); --sec-fg: var(--ok-text); }
.sec-report { --sec-bg: var(--idle-bg); --sec-fg: var(--idle-text); }
.sec-check { --sec-bg: var(--warn-bg); --sec-fg: var(--warn-text); }
.sec-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sec-fg, currentColor); }
.kind {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 10px; white-space: nowrap;
  background: var(--sec-bg); color: var(--sec-fg); font-size: 12px; font-weight: 600; vertical-align: 1px;
}

/* The Repository workspace's menu: a heading over each group, a section's mark and its count. */
.nav-label { margin: 14px 12px 2px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.nav-link.nav-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-sec { display: inline-flex; align-items: center; gap: 8px; }
.nav-n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }

/* The overview: a tile per section, then every job as a chain of process chips. */
.sec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; max-width: 1180px; }
.sec-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none;
  background: var(--sec-bg); color: var(--sec-fg); font-size: 13px;
}
.sec-tile b { font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sec-tile-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.sec-tile:hover .sec-tile-name { text-decoration-thickness: 2px; }
.sec-tile:focus-visible, .proc:focus-visible, .jobpick-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jobgroup { padding: 14px 0; border-top: 1px solid var(--border); }
.jobgroup:first-of-type { border-top: 0; padding-top: 0; }
.jobgroup h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.jobrow { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 16px; align-items: start; margin: 0 0 10px; }
.jobrow-name a { font-weight: 600; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.chain li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.chain .arrow { color: var(--muted); }
.proc {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border: 1px solid transparent;
  border-radius: 6px; background: var(--sec-bg); color: var(--sec-fg); font-family: var(--mono); font-size: 12.5px;
  text-decoration: none; overflow-wrap: anywhere;
}
.proc:hover { border-color: currentColor; }
.proc-n, .proc i { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.proc-n { font-weight: 700; }
.proc-shared { border: 1.5px dashed currentColor; }
.proc i { font-style: normal; font-size: 11px; font-weight: 600; }
.legend-line { margin: 12px 0 0; }
.plink { font-family: var(--mono); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.content a.plink, .content a.mono { color: var(--accent); }
.proc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14px; }

/* Takes in -> transforms -> puts out: the same strip on every section and process page. */
.io-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr); gap: 10px;
  align-items: stretch; max-width: 1180px;
}
.io-box {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel); font-size: 14px; overflow-wrap: anywhere;
}
.io-mid { border-color: var(--accent); }
.io-label { font-size: 12px; color: var(--muted); }
.io-arrow { align-self: center; color: var(--muted); font-size: 18px; }
.proc-table td { vertical-align: top; }
.grid td.wrap { white-space: normal; min-width: 180px; }

/* A process's facts. */
.pmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0; max-width: 1180px; }
.pmeta > div { min-width: 0; padding: 10px 12px; border-radius: 8px; background: var(--sidebar-bg); }
.pmeta dt { font-size: 12px; color: var(--muted); }
.pmeta dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.pmeta-wide { grid-column: 1 / -1; }

/* A job: its steps in four lanes, one row per step in run order; what it rests on above, dashed. */
.jobpick { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1180px; }
.jobpick-link {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--sidebar-bg);
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.jobpick-link:hover { color: var(--text); border-color: var(--muted); }
.jobpick-link[aria-current] { background: var(--panel); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.lanes { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lstripes, .lhead, .lrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lstripes { position: absolute; inset: 0; }
.lstripes div { background: var(--sidebar-bg); border-radius: 8px; }
.lhead, .lrow, .lsep { position: relative; padding-inline: 8px; }
.lhead { padding-top: 10px; }
.lhead > div { display: flex; }
.lrow:last-child { padding-bottom: 10px; }
.lsep { margin: 0; font-size: 12px; color: var(--muted); }
.lcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow-wrap: anywhere;
}
.lcard .small { font-size: 12.5px; }
.lcard > .kind { display: none; }
.lcard-top { display: flex; gap: 8px; align-items: baseline; }
.lcard-n { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.lcard-shared { border: 1.5px dashed var(--muted); }
.lcard-ghost { border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); background: transparent; }
.lcard-title { font-weight: 600; font-size: 13.5px; }

@media (max-width: 720px) {
  /* The menu is the compact band: no group headings; a section keeps its mark and count. */
  .nav-label { display: none; }
  .nav-link.nav-count { display: inline-flex; }
  .jobrow { grid-template-columns: minmax(0, 1fr); }
  /* The lanes collapse to a list, and each card then carries its section by name. */
  .lstripes, .lhead { display: none; }
  .lrow { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .lrow .lcard { grid-column: 1 !important; }
  .lcard > .kind { display: inline-flex; }
  .lsep { padding: 0; }
  .io-strip { grid-template-columns: minmax(0, 1fr); }
  .io-arrow { justify-self: center; transform: rotate(90deg); }
}

/* A process's field mapping (EASYREP-REPOSITORY-PROCESSES-003): loader field -> transformer -> database field. */
.map-table td { vertical-align: top; white-space: normal; }
/* A field read can be a list of columns; it wraps after a comma, so the last column stays in view. */
.map-table td:first-child { min-width: 11em; max-width: 26em; }
.map-table td .mono { overflow-wrap: anywhere; }
.map-table td.to { color: var(--muted); width: 18px; padding-right: 6px; }
.map-table td .rule { margin-right: 4px; }
/* A script's path in the line under the table wraps rather than run past a phone's edge. */
.legend-line .mono { overflow-wrap: anywhere; }
.rule { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rule-asis { background: var(--ok-bg); color: var(--ok-text); }
.rule-converted { background: var(--info-bg); color: var(--info-text); }
.rule-constant { background: var(--idle-bg); color: var(--idle-text); }
.rule-check { background: var(--warn-bg); color: var(--warn-text); }
.rule-notstored { color: var(--muted); border: 1px dashed var(--border); }
/* A Report's value is printed, not stored: said in words beside the label, never by colour alone. */
.printed { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  /* A row reads top to bottom on a phone, so the database field is never scrolled out of sight. */
  .map-table thead { display: none; }
  .map-table, .map-table tbody, .map-table tr, .map-table td { display: block; }
  .map-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .map-table td { border: 0; padding: 1px 0; white-space: normal; }
  .map-table td.to { display: none; }
  .map-table td:last-child::before { content: "\2192  "; color: var(--muted); white-space: pre; }
}

/* A field's page (EASYREP-REPOSITORY-PROCESSES-007): who writes it, who reads it. */
.field-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; max-width: 1180px; }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; overflow-wrap: anywhere; }
.field-rule { flex-basis: 100%; font-size: 13px; }
.field-rule .rule { margin-right: 4px; }
.field-rule .mono, .plist .mono { overflow-wrap: anywhere; }
.field-link { color: inherit; }
.content a.field-link { color: var(--accent); }

/* Portfolios & views (EASYREP-PORTFOLIO-DASHBOARD-006) */
.views-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.views-list li { overflow-wrap: anywhere; }
.views-list a { color: var(--accent); font-weight: 600; }
.views-cannot-save { margin: 0 0 14px; max-width: none; }
.views-inactive { background: var(--idle-bg); color: var(--idle-text); }
.views-table td { vertical-align: middle; }
.views-table td.views-stored { white-space: normal; overflow-wrap: anywhere; min-width: 140px; }
.views-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.views-form input[type="text"] {
  min-height: 30px; padding: 4px 9px; width: 220px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.views-form input[type="text"]::placeholder { color: var(--muted); }
.views-form input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.views-form input[disabled], .views-form button[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 720px) {
  /* On a phone each portfolio reads top to bottom, with its name field the full width, so nothing scrolls sideways. */
  .views-table thead { display: none; }
  .views-table, .views-table tbody, .views-table tr, .views-table td { display: block; }
  .views-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .views-table td { border: 0; padding: 2px 0; white-space: normal; }
  .views-table td.views-stored { min-width: 0; }
  .views-form input[type="text"] { width: 100%; flex: 1 1 160px; }
}

/* --- The ETFs section after the Portfolio dashboard (EASYREP-ETF-WORKSPACE-004) -------------------------------- */
.etf-page { max-width: 1520px; gap: 22px; }
.etf-hero { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.etf-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.etf-hero-name { min-width: 0; }
.etf-eyebrow { margin: 0 0 2px; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.etf-hero h1 { margin: 0; font-size: 28px; font-weight: 650; overflow-wrap: anywhere; }
.etf-hero .dash-facts { margin: 6px 0 0; color: var(--muted); }
.etf-hero .job-about { margin: 6px 0 0; font-size: 13px; }
.etf-hero-body { border-top: 1px solid var(--border); padding-top: 16px; }
.etf-hero-body .toolbar { margin: 0; }

/* The views as one segmented control, as Parqet's switches. */
.etf-page .etf-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--border);
  border-radius: 10px; background: var(--idle-bg); max-width: 100%; flex-wrap: wrap; }
.etf-page .etf-tabs a { padding: 7px 14px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.etf-page .etf-tabs a:hover { color: var(--text); }
.etf-page .etf-tabs a[aria-current] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }

/* The toolbar's own menus look like the period button. */
.etf-toolbar .cols > summary { min-height: 34px; padding: 5px 10px 5px 14px; font-size: 13.5px; }
.etf-toolbar .cols-list { z-index: 20; }

/* The bar above the groups: the watchlist switch, the count and Groups. */
.etf-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px 18px; flex-wrap: wrap; }
.etf-bar .etf-switch { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.etf-bar p { margin: 0; }
.etf-group-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.etf-group-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.etf-group-row input[type="text"] { flex: 1 1 180px; min-width: 0; min-height: 32px; padding: 4px 9px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.etf-groups .settings-panel { width: min(560px, calc(100vw - 48px)); }

/* Each fund's group, chosen on its line. */
.etf-group-pick { display: flex; gap: 6px; align-items: center; margin: 0; }
.etf-group-pick select { min-height: 30px; max-width: 190px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.etf-page .dash-securities .fund-name a { color: var(--text); text-decoration: none; }
.etf-page .dash-securities .fund-name a:hover { color: var(--accent); text-decoration: underline; }
.etf-page .dash-securities { min-width: 1080px; }
.etf-page .dash-securities tbody th { min-width: 230px; max-width: 300px; }
.etf-page .etf-table thead th { position: static; background: none; }
.etf-page .etf-table tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.etf-count { color: var(--muted); font-weight: 500; }
.etf-confirm { padding: 20px 24px; }
.etf-page .panel { max-width: none; border-radius: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / 5%); }

@media (max-width: 640px) {
  .etf-hero { padding: 18px 16px; }
  .etf-hero h1 { font-size: 23px; }
  .etf-page .etf-tabs a { padding: 6px 10px; font-size: 13.5px; }
  .etf-groups[open] { flex-basis: 100%; min-width: 0; max-width: 100%; }
  .etf-bar .etf-switch { flex-wrap: wrap; }
}

/* Compare: the Rows panel (EASYREP-ETF-WORKSPACE-006) and a first column that stays while the funds scroll. */
.etf-rows .settings-panel { width: min(520px, calc(100vw - 48px)); }
.etf-row-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.etf-row-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; font-size: 13.5px; }
.etf-row-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.etf-row-item label, .toolbar .etf-row-item label {
  display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  color: var(--text); font-size: 13.5px; text-align: left; cursor: pointer; }
.etf-row-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.etf-row-section { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.etf-row-off label, .toolbar .etf-row-off label { color: var(--muted); }
.etf-row-split { margin: 8px 0 2px; padding: 6px 6px 0; border-top: 1px solid var(--border); color: var(--muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.etf-cmp-card { padding: 4px 0 8px; overflow: hidden; }
.etf-cmp-card .table-scroll { max-width: 100%; }
.etf-page .cmp tbody th[scope="row"], .etf-page .cmp thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--border); min-width: 210px;
}
.etf-page .cmp tr.group th { background: color-mix(in srgb, var(--text) 4%, var(--panel)); }
.etf-page .cmp td, .etf-page .cmp th { padding: 10px 12px; }
@media (max-width: 640px) {
  .etf-rows[open] { flex-basis: 100%; min-width: 0; max-width: 100%; }
  .etf-page .cmp tbody th[scope="row"], .etf-page .cmp thead th:first-child { min-width: 130px; max-width: 150px; }
}

/* Benchmarks, the admin area's first line (EASYREP-BENCHMARKS-006, 007; EASYREP-BENCHMARK-LIBRARY) ---------------------------------------- */

/* The admin area sits further down below ETFs, under its own heading (D-01). */
.nav-rule.nav-rule-area { margin-top: 28px; }
.sidebar-portfolio .nav-label { margin: 2px 12px 4px; color: var(--pf-side-muted); }

.bm { display: flex; flex-direction: column; gap: 22px; max-width: 1520px; min-width: 0; }
.bm .bm-link, .bm a.bm-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.bm .bm-link:hover { text-decoration: underline; }
.bm-intro { margin: 0; max-width: 78ch; color: var(--muted); }
.bm-back { margin: 0; }
.bm-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.bm-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.bm-card p { margin: 0; }
.bm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bm-card-title { margin: 0; font-size: 18px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bm-card-bench { font-weight: 600; }
.bm-card-groups { color: var(--text); font-size: 13.5px; }
.bm-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.bm-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
.bm-figures div { min-width: 0; }
.bm-figures dt { color: var(--muted); font-size: 12px; }
.bm-figures dd { margin: 2px 0 0; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bm-section { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bm-section h2 { margin: 0; font-size: 18px; font-weight: 600; }
.bm-section p { margin: 0; }
.bm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bm-groups, .bm-holdings { list-style: none; margin: 0; padding: 0; }
.bm-groups { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.bm-group-name { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-weight: 650; }
.bm-holdings li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px solid var(--border);
  font-size: 13.5px; min-width: 0; }
.bm-holdings li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bm-actions .inlineform { margin-left: 0; }
.bm-stale { margin: 0; }

.bm-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-period { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600; background: var(--panel); }
.bm-period:hover { background: var(--sidebar-bg); }
.bm-period-on { background: var(--text); border-color: var(--text); color: var(--panel); }
.bm-period-on:hover { background: var(--text); }
.bm-period:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.bm-table th[scope="row"] { font-weight: 400; }
.bm-table th:first-child, .bm-table td:first-child { padding-left: 16px; }
.bm-table th:last-child, .bm-table td:last-child { padding-right: 16px; }
.bm-table thead th.num { text-align: right; }
.bm-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bm-measure { display: block; font-weight: 600; }
.bm-note, .bm-why { display: block; color: var(--muted); font-size: 12px; font-weight: 400; white-space: normal; }
.bm-why { max-width: 32ch; margin-left: auto; text-align: right; }
.bm-rebalancings { list-style: none; margin: 0; padding: 0; }
.bm-rebalancings > li { border-top: 1px solid var(--border); }
.bm-rebalancings > li:first-child { border-top: 0; }
.bm-rebalancings summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline;
  padding: 10px 16px; cursor: pointer; }
.bm-rebalancings summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -3px; }
.bm-rb-day { font-weight: 600; font-variant-numeric: tabular-nums; }
.bm-rb-why { color: var(--muted); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.bm-rebalancings details[open] summary { background: var(--sidebar-bg); }

/* The library (EASYREP-BENCHMARK-LIBRARY-005): every benchmark as a card, its groups in their colours. */
/* The library's two buttons, first on the page and larger than a card's (asked by the operator, 2026-10-04). */
.bm-libhead { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.bm-libhead .inlineform { margin: 0; }
.bm-lib-button { min-height: 46px; padding: 11px 22px; font-size: 16px; font-weight: 650; border-radius: 10px; }
.bm-new, .bm-add .btn, .bm-empty .btn { display: inline-flex; align-items: center; gap: 6px; }
.bm-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 30px; }
.bm-empty h2 { margin: 0; font-size: 19px; font-weight: 600; }
.bm-empty p { margin: 0; max-width: 60ch; }
.bm-empty-mark { color: var(--accent); }
.bm-library { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.bm-bar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--idle-bg); }
.bm-bar > span { flex: 1 1 0; min-width: 2px; }
.bm-bar-wide { height: 12px; }
.bm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.bm-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bm-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ring-rest); }
.bm-group-name .bm-dot { margin-right: 7px; }
.bm-bar .ring-0, .bm-dot.ring-0 { background: var(--ring-0); } .bm-bar .ring-1, .bm-dot.ring-1 { background: var(--ring-1); }
.bm-bar .ring-2, .bm-dot.ring-2 { background: var(--ring-2); } .bm-bar .ring-3, .bm-dot.ring-3 { background: var(--ring-3); }
.bm-bar .ring-4, .bm-dot.ring-4 { background: var(--ring-4); } .bm-bar .ring-5, .bm-dot.ring-5 { background: var(--ring-5); }
.bm-bar .ring-6, .bm-dot.ring-6 { background: var(--ring-6); } .bm-bar .ring-7, .bm-dot.ring-7 { background: var(--ring-7); }
.bm-bar .ring-8, .bm-dot.ring-8 { background: var(--ring-8); }
.bm-spark { display: block; width: 100%; height: 64px; margin-top: 4px; }
.bm-spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bm-card-portfolios { margin: 0; overflow-wrap: anywhere; }
.bm-delete { margin-left: auto; }
.bm-delete:hover { color: var(--error-text); border-color: var(--error-text); }
.bm-card-confirm { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--error-text); background: var(--error-bg); }
.bm-card-confirm .bm-card-actions { margin-top: 0; padding-top: 2px; }
.bm-confirm-title { font-weight: 650; color: var(--error-text); }
.btn-danger { background: var(--error-text); border-color: var(--error-text); color: var(--panel); }
.bm-card-none { padding: 14px 0 4px; }

/* A benchmark's page. */
.bm-hero-name { font-size: 22px; }
.bm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; }
.bm-kpis div { padding: 16px 20px; border-left: 1px solid var(--border); min-width: 0; }
.bm-kpis div:first-child { border-left: 0; }
.bm-kpis dt { color: var(--muted); font-size: 13px; }
.bm-kpis dd { margin: 4px 0 0; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-scroll { max-height: 440px; overflow: auto; }
.bm-scroll:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -3px; }

/* The builder (D-02): the instruments on the left, the benchmark on the right. */
.bm-builder { min-width: 0; }
.bm-default { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bm-panes { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.bm-catalog { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; padding: 16px 0 12px;
  max-height: calc(100vh - 32px); min-width: 0; }
.bm-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 18px; }
.bm-pane-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.bm-search { display: flex; align-items: center; gap: 8px; margin: 0 18px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--muted); }
.bm-search[hidden] { display: none; }
.bm-search:focus-within { border-color: var(--accent); }
.bm-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 8px 0; font: inherit; font-size: 14px;
  color: var(--text); outline: none; }
.bm-shelves { overflow: auto; min-height: 0; padding: 0 8px; }
.bm-shelf { border-top: 1px solid var(--border); }
.bm-shelf:first-child { border-top: 0; }
.bm-shelf > summary { display: flex; align-items: center; gap: 8px; padding: 10px 10px; cursor: pointer; list-style: none;
  font-weight: 650; border-radius: 8px; }
.bm-shelf > summary::-webkit-details-marker { display: none; }
.bm-shelf > summary:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.bm-shelf > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -2px; }
.bm-shelf-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bm-count { color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bm-shelf > summary .icon { color: var(--muted); transition: transform .15s; }
.bm-shelf[open] > summary .icon { transform: rotate(180deg); }
.bm-shelf ul { list-style: none; margin: 0 0 8px; padding: 0; }
.bm-instrument { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 10px; border-radius: 8px; }
.bm-instrument:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.bm-instrument-name { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.bm-instrument-name small, .bm-row-name small { display: block; color: var(--muted); font-size: 12px; }
.bm-pick, .bm-icon-btn { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--panel); color: var(--accent); cursor: pointer; }
.bm-pick:hover:not(:disabled) { background: var(--ok-bg); border-color: var(--accent); }
.bm-pick:disabled { cursor: default; border-color: transparent; background: var(--ok-bg); color: var(--ok-text); }
.bm-icon-btn { color: var(--muted); }
.bm-icon-btn:hover { color: var(--error-text); border-color: var(--error-text); }
.bm-pick:focus-visible, .bm-icon-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.bm-held .bm-instrument-name { color: var(--muted); }
.bm-catalog-note { margin: 0; padding: 0 18px; }

.bm-design { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bm-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.bm-field { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
.bm-field > span { font-weight: 600; }
.bm-field input[type="text"], .bm-field select, .bm-weight input, .bm-move select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; min-width: 0; max-width: 100%; }
.bm-name input { font-size: 17px; font-weight: 600; }
.bm-field.bm-inline { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }

.bm-mix-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; }
.bm-ring { width: 150px; height: 150px; display: block; }
.bm-ring-track { fill: none; stroke: var(--idle-bg); stroke-width: 18; }
.bm-ring .bm-ring-slice { stroke-width: 18; }
.bm-ring-total { text-anchor: middle; font-size: 19px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.bm-ring-note { text-anchor: middle; font-size: 11px; fill: var(--muted); }
.bm-mix-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bm-mix-body h2 { margin: 0; }
.bm-total { margin: 0; font-size: 14px; font-weight: 600; color: var(--warn-text); }
.bm-total-ok { color: var(--ok-text); }
.bm-mix-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bm-sleeves { display: flex; flex-direction: column; gap: 12px; }
.bm-sleeve { border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px 10px; margin: 0; min-width: 0; }
.bm-sleeve legend { padding: 0 6px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.bm-sleeve > .btn { margin-top: 6px; }
.bm-sleeve > p { margin: 4px 0; }
.bm-rows { list-style: none; margin: 0; padding: 0; }
.bm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 170px) minmax(80px, 160px) auto auto; gap: 8px 12px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bm-row:last-child { border-bottom: 0; }
.bm-row-name { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.bm-move select { width: 100%; font-size: 13px; padding: 5px 8px; }
.bm-slider { width: 100%; min-width: 0; accent-color: var(--accent); }
.bm-slider[hidden] { display: none; }
.bm-weight { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; }
.bm-weight input { width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.bm-mix-empty { margin: 0; padding: 10px 0; }
.bm-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding-top: 4px; }
.bm-add .bm-field { flex: 1 1 240px; }
.bm-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.bm-quiet:hover { color: var(--text); border-color: var(--border); }

/* Rebalancing: one choice of three, and only its settings shown (a browser without :has shows them all). */
.bm-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--idle-bg);
  align-self: flex-start; max-width: 100%; }
.bm-segmented label, .bm-chips label { position: relative; }
.bm-segmented input, .bm-chips input, .bm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bm-segmented span { display: block; padding: 7px 14px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; }
.bm-segmented input:checked + span { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.bm-segmented input:focus-visible + span, .bm-chips input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 1px; }
.bm-when { display: flex; flex-direction: column; gap: 8px; }
.bm-when p { margin: 0; }
.bm-rebalance:has(input[name="mode"][value="none"]:checked) .bm-when:not(.bm-when-none),
.bm-rebalance:has(input[name="mode"][value="calendar"]:checked) .bm-when:not(.bm-when-calendar),
.bm-rebalance:has(input[name="mode"][value="threshold"]:checked) .bm-when:not(.bm-when-threshold) { display: none; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-chips span { display: block; padding: 5px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px;
  font-weight: 600; cursor: pointer; background: var(--panel); }
.bm-chips input:checked + span { background: var(--text); border-color: var(--text); color: var(--panel); }
.bm-bands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bm-bands input { width: 6ch; text-align: right; }

/* Transaction costs: a switch, and the rates while it is on. */
.bm-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; position: relative; }
.bm-switch-track { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--idle-bg);
  border: 1px solid var(--border); transition: background .15s; }
.bm-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel); box-shadow: 0 1px 2px rgb(0 0 0 / 25%); transition: transform .15s; }
.bm-switch input:checked + .bm-switch-track { background: var(--accent); border-color: var(--accent); }
.bm-switch input:checked + .bm-switch-track::after { transform: translateX(16px); }
.bm-switch input:focus-visible + .bm-switch-track { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.bm-costs:has(input[name="fees"]:not(:checked)) .bm-cost-rates { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .bm-switch-track, .bm-switch-track::after, .bm-shelf > summary .icon { transition: none; } }

.bm-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  box-shadow: 0 -4px 18px rgb(0 0 0 / 8%); }

@media (max-width: 1100px) {
  .bm-panes { grid-template-columns: minmax(0, 1fr); }
  .bm-catalog { position: static; max-height: 460px; }
}
@media (max-width: 720px) {
  .bm { gap: 16px; }
  .bm-card, .bm-section { padding: 14px; }
  .bm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-kpis div:nth-child(3) { border-left: 0; }
  .bm-kpis div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .bm-identity { grid-template-columns: minmax(0, 1fr); }
  .bm-mix-head { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bm-mix-body { justify-self: stretch; }
  .bm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bm-row > .bm-move, .bm-row > .bm-slider { grid-column: 1 / -1; }
  .bm-row > .bm-weight { grid-column: 1; justify-self: start; }
  .bm-rebalancings summary { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
  .bm-rb-why { grid-column: 1 / -1; grid-row: 2; }
  .bm-why { max-width: 20ch; }
}

/* The dashboard's Benchmarks button (D-03): every benchmark with a box to tick. */
.bm-assign .settings-panel { width: min(520px, calc(100vw - 48px)); }
.bm-assign-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-assign-list label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.bm-assign-list label:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.bm-assign-list input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.bm-assign-list span { min-width: 0; }
.bm-assign-list strong { display: block; font-weight: 650; }
.bm-assign-list small { display: block; color: var(--muted); font-size: 12px; }
.bm-assign-list a.bm-link { display: inline-block; margin: -4px 0 6px 36px; color: var(--accent); font-size: 12.5px;
  font-weight: 600; text-decoration: none; }
.bm-assign-list a.bm-link:hover { text-decoration: underline; }
.bm-assign-list a.bm-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.bm-assign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bm-assign-actions a { color: var(--accent); font-weight: 600; text-decoration: none; }
.bm-assign-actions a:hover { text-decoration: underline; }
.dash-line-bench2 { stroke: var(--ring-2); stroke-width: 1.5; } .dash-key-bench2 { border-color: var(--ring-2); border-top-style: dashed; }
.dash-line-bench3 { stroke: var(--ring-6); stroke-width: 1.5; } .dash-key-bench3 { border-color: var(--ring-6); border-top-style: dashed; }
.dash-line-bench4 { stroke: var(--ring-0); stroke-width: 1.5; } .dash-key-bench4 { border-color: var(--ring-0); border-top-style: dashed; }
.dash-line-bench5 { stroke: var(--ring-4); stroke-width: 1.5; } .dash-key-bench5 { border-color: var(--ring-4); border-top-style: dashed; }

/* Named watchlists (EASYREP-ETF-WORKSPACE-008): the saved views, then Save this view. */
.etf-views .settings-panel { width: min(460px, calc(100vw - 48px)); right: auto; left: 0; }
.etf-view-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.etf-view-list li { display: flex; align-items: center; gap: 8px; }
.etf-view-list a { flex: 1 1 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 600; }
.etf-view-list a small { color: var(--muted); font-size: 12px; font-weight: 400; }
.etf-view-list a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.etf-view-list a[aria-current] { background: var(--ok-bg); color: var(--ok-text); }
.etf-view-list .inlineform { margin: 0; }
.etf-hero-body { display: flex; flex-direction: column; gap: 10px; }
.etf-hero-body > .etf-views { align-self: flex-start; }
@media (max-width: 640px) { .etf-views[open] { min-width: 0; max-width: 100%; } }

/* My account (EASYREP-USERS-003): who is signed in, what they may open, and their password. */
.signout-account { color: inherit; text-decoration: none; }
.signout-account:hover strong { text-decoration: underline; }
.signout-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.account-onetime { border-color: var(--warn-text); }
.account-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.account-facts > div { display: contents; }
.account-facts dt { color: var(--muted); }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.account-subhead { margin: 14px 0 6px; font-size: 14px; }
.account-grants { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.account-grants li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.account-grants li:first-child { border-top: 0; }
.account-password { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 360px; }
.account-password label { font-weight: 600; margin-top: 6px; }
.account-password input {
  min-height: 34px; padding: 5px 10px; width: 100%;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit;
}
.account-password input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.account-password p { margin: 0; }
.account-password .btn { margin-top: 10px; }

/* Settings > Users (EASYREP-USERS-006): the list, one user's form with its grid of rights, and a one-time password
   shown once. Below 720px the list's rows stack, each value under its own label. */
.users-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.users-head h2 { margin: 0; }
.users-lead { margin: 0 0 14px; }
.users-table th, .users-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.users-table tbody th { position: static; background: none; color: var(--text); font-size: 13px; white-space: normal; }
.users-table tbody th small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.users-name { font-weight: 650; }
.users-grants { list-style: none; margin: 0; padding: 0; }
.users-grants li + li { margin-top: 2px; }
.users-open { text-align: right; padding-right: 0; }
@media (max-width: 720px) {
  .users-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .users-table, .users-table tbody, .users-table tr, .users-table th, .users-table td { display: block; }
  .users-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .users-table th, .users-table td { border: 0; padding: 3px 0; white-space: normal; }
  .users-table td[data-label] { display: grid; grid-template-columns: 96px minmax(0, 1fr); justify-items: start; gap: 10px; }
  .users-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .users-open { text-align: left; padding-top: 8px; }
}

.users-back { margin: 0; }
.users-form { display: flex; flex-direction: column; gap: 20px; }
.users-fields { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 420px; }
.users-fields label { font-weight: 600; margin-top: 6px; }
.users-fields p { margin: 0; }
.users-fields input[type="text"] {
  min-height: 34px; padding: 5px 10px; width: 100%;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit;
}
.users-fields input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.users-fields .account-facts { margin-bottom: 4px; }
.users-kind { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.users-kind legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.users-kind label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; cursor: pointer; }
.users-kind input { accent-color: var(--accent); }
.users-kind p { margin: 0; }
.users-admin-note { margin: -6px 0 12px; }
.users-form:has(input[name="kind"][value="admin"]:checked) .users-rights > :not(h2, .users-admin-note) { opacity: .55; }
.users-form:has(input[name="kind"][value="admin"]:checked) .users-admin-note { color: var(--warn-text); font-weight: 600; }
.users-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.users-presets + p { margin: 0 0 4px; }
.users-levels { max-width: 640px; }
.users-levels thead th:not(:first-child) { text-align: center; padding-right: 0; width: 72px; }
.users-levels tbody th { position: static; background: none; color: var(--text); font-size: 13px; white-space: normal; }
.users-levels tbody th small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.users-levels td { text-align: center; padding: 0; }
.users-radio { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; cursor: pointer; }
.users-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 720px) {
  .users-levels thead th:not(:first-child) { width: 48px; }
  .users-levels tbody th small { overflow-wrap: anywhere; }
}
.users-locked th { color: var(--muted); font-weight: 500; }
.users-locked td { padding: 8px 0; }
.users-save { display: flex; flex-wrap: wrap; gap: 8px; }
.users-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; }
.users-actions form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.users-actions p { margin: 0; }
.users-onetime { border-color: var(--warn-text); }
.users-secret { margin: 0 0 10px; font-size: 22px; font-weight: 650; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }

/* Two-factor codes (EASYREP-USERS-010): the QR code beside the key, the recovery codes shown once, and the code step
   of signing in. */
.account-setup { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 28px; }
.account-qr { flex: 0 0 auto; padding: 8px; border-radius: 8px; background: #ffffff; line-height: 0; }
.account-qr svg { display: block; max-width: 220px; height: auto; }
.account-key { margin: 0 0 12px; font-size: 17px; font-weight: 650; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.account-tfa-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; }
.account-recovery { border-left: 3px solid var(--warn-text); padding-left: 14px; }
.account-recovery p { margin: 0 0 8px; }
.account-codes { columns: 2; column-gap: 32px; margin: 8px 0 0; padding-left: 26px; font-size: 15px; line-height: 1.8; user-select: all; }
@media (max-width: 480px) { .account-codes { columns: 1; } }
.login-help { margin: -8px 0 16px; font-size: 12.5px; }
.login-card .login-cancel { margin-top: 14px; }
.login-card .login-cancel button.linkbutton { width: auto; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }

/* Add activities (EASYREP-ADD-ACTIVITIES-002): the button bottom right on every page of the Portfolio workspace, as
   Parqet's, opening File import and Manual; the pages keep room below so it never covers their last row. */
.sidebar-portfolio ~ .main .content { padding-bottom: 104px; }
.add-activity { position: fixed; right: 28px; bottom: 28px; z-index: 30; }
.add-activity > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px 10px 16px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 650; cursor: pointer;
  list-style: none; box-shadow: 0 8px 24px rgb(0 0 0 / 22%); white-space: nowrap;
}
.add-activity > summary::-webkit-details-marker { display: none; }
.add-activity > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 3px; }
.add-activity > summary .icon { transition: transform .15s; }
.add-activity[open] > summary .icon { transform: rotate(45deg); }
.add-activity-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 32px));
  margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); box-shadow: 0 16px 40px rgb(0 0 0 / 18%);
}
.add-activity-line {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; color: var(--text);
  text-decoration: none; font-size: 14.5px;
}
.add-activity-line:hover, .add-activity-line:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); outline: none; }
.add-activity-line .icon { color: var(--muted); flex: none; }
.add-activity-line span { flex: 1; }
.add-activity-line small { color: var(--muted); font-size: 12px; }
.add-activity-line kbd { padding: 1px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font: 600 12px/1.6 var(--mono); }
@media (prefers-reduced-motion: reduce) { .add-activity > summary .icon { transition: none; } }
@media (max-width: 560px) {
  .add-activity { right: 16px; bottom: 16px; }
  .add-activity > summary { padding: 10px 16px 10px 12px; }
}

/* New activity: a bar with the way back and Save, then the manual form beside the file import, or one form. */
.aa-head {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 36px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.aa-close { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--text); }
.aa-close:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.aa-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.aa-head h1 { margin: 0; padding-left: 14px; border-left: 1px solid var(--border); font-size: 17px; font-weight: 650; }
.aa-head .aa-actions { margin-left: auto; display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 10px; }
.aa-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; max-width: 1380px; align-items: start; }
.aa-split > section > h2 { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
.aa-pane { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.aa-form { max-width: 760px; }
@media (max-width: 900px) { .aa-split { grid-template-columns: minmax(0, 1fr); } .aa-head { padding: 12px 20px; } }
@media (max-width: 560px) { .aa-pane { padding: 16px; } }

.aa-picks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.aa-pick summary { min-height: 36px; padding: 5px 10px; font-size: 14px; font-weight: 600; }
.aa-pick > ul { left: 0; right: auto; min-width: min(240px, calc(100vw - 48px)); }
.aa-pick + .aa-pick > ul { left: auto; right: 0; }
.aa-dot { display: inline-block; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); flex: none; }
.aa-label { margin: 0 0 10px; color: var(--muted); font-size: 15px; }
.aa-search-wrap { position: relative; }
.aa-search-wrap > .icon { position: absolute; left: 11px; top: 12px; color: var(--muted); pointer-events: none; }
.aa-search {
  width: 100%; min-height: 44px; padding: 8px 12px 8px 38px; margin-bottom: 14px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--bg); color: var(--text); font: inherit;
}
.aa-search:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 1px; }
.aa-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.aa-type {
  display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 11px;
  color: var(--text); text-decoration: none; background: var(--bg);
}
.aa-type:hover { border-color: var(--accent); }
.aa-type:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px; }
.aa-type strong { display: block; font-size: 15px; }
.aa-type small { color: var(--muted); font-size: 12.5px; }
.aa-tile { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; color: #fff; }
.aa-tile-sec { background: #a24fbb; }
.aa-tile-cash { background: #557189; }

.aa-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px;
  padding: 24px 18px; border: 2px dashed var(--border); border-radius: 12px; text-align: center; color: var(--muted);
}
.aa-drop p { margin: 0; max-width: 440px; }
.aa-drop strong { color: var(--text); }
.aa-file-input { max-width: 100%; font: inherit; font-size: 13px; color: var(--text); }
.aa-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
            background: var(--ok-bg); color: var(--ok-text); font-size: 12px; font-weight: 700; }
.aa-folder { font-size: 12.5px; }
.aa-link { color: var(--accent); }
.aa-after { max-width: 760px; margin: 0; }

.aa-sec { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 20px; }
.aa-logo { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
           background: #2c6fb6; color: #fff; font-size: 13px; font-weight: 700; }
.aa-sec div { flex: 1; min-width: 0; }
.aa-sec small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.aa-sec strong { display: block; font-size: 15.5px; overflow-wrap: anywhere; }
.aa-wide { max-width: none; }
.aa-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.aa-grid3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.aa-grid2 .field, .aa-grid3 .field, .aa-form .field { max-width: none; }
.aa-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.aa-field-head > label:first-child { font-size: 13px; color: var(--muted); }
.aa-field-head .aa-toggle { font-size: 13px; }
.aa-calc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.aa-calc .field { margin-bottom: 0; }
.aa-op { padding-bottom: 7px; color: var(--muted); font-size: 18px; }
.aa-money { display: flex; }
.aa-money .in-input { flex: 1 1 auto; border-radius: 7px 0 0 7px; min-width: 0; }
.aa-money .aa-currency { width: auto; max-width: 110px; }
.aa-currency, .aa-unit {
  flex: none; min-height: 34px; padding: 5px 8px; border: 1px solid var(--border); border-left: 0; border-radius: 0 7px 7px 0;
  background: var(--sidebar-bg); color: var(--text); font: inherit; font-size: 13.5px;
}
.aa-unit { display: inline-flex; align-items: center; min-width: 52px; color: var(--muted); }
.aa-held { color: var(--muted); font-weight: 400; }
.aa-toggles { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 18px; }
.aa-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; color: var(--text); }
.aa-toggle input {
  appearance: none; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: var(--border);
  position: relative; cursor: pointer; transition: background .15s; flex: none;
}
.aa-toggle input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}
.aa-toggle input:checked { background: var(--accent); }
.aa-toggle input:checked::after { left: 19px; }
.aa-toggle input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .aa-toggle input, .aa-toggle input::after { transition: none; } }
.aa-extra { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
/* A switch shows its fields; a browser without :has() shows them all, which only asks for less. */
.aa-form:has(#aa-t-settle:not(:checked)) .aa-settle,
.aa-form:has(#aa-t-costs:not(:checked)) .aa-costs,
.aa-form:has(#aa-t-taxes:not(:checked)) .aa-taxes { display: none; }
@media (max-width: 560px) {
  .aa-calc, .aa-grid2, .aa-grid3 { grid-template-columns: minmax(0, 1fr); }
  .aa-calc .field { margin-bottom: 6px; }
  .aa-op { display: none; }
}

/* The check before Save: what is written, in words, and Save. */
.aa-check { max-width: 760px; padding: 14px 18px; border: 1px solid var(--ok-text); border-radius: 11px; background: var(--ok-bg); }
.aa-check h2 { margin: 0 0 6px; font-size: 15px; color: var(--ok-text); }
.aa-check ul { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; }
.aa-check li { margin-bottom: 3px; }
.aa-check-refused { border-color: var(--error-text); background: var(--error-bg); }
.aa-check-refused h2 { color: var(--error-text); }

/* Files dropped on a page of the Portfolio workspace (EASYREP-ADD-ACTIVITIES-003): the page says where they go. */
.add-activity-overlay {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.add-activity-overlay[hidden] { display: none; }
.add-activity-overlay > div {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(560px, 100%); padding: 40px 24px;
  border: 3px dashed var(--accent); border-radius: 18px; background: var(--panel); text-align: center;
  box-shadow: 0 16px 40px rgb(0 0 0 / 14%); pointer-events: none;
}
.add-activity-overlay .icon { color: var(--accent); }
.add-activity-overlay strong { font-size: 18px; }
.add-activity-overlay span { color: var(--muted); font-size: 13.5px; }
.aa-drop-form { display: contents; }
.aa-read-folder { margin: 0; }

/* Import: one card per file, what it states, and one bar at the foot. */
.aa-summary { margin: 0; color: var(--muted); font-size: 14px; }
.aa-files { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; }
.aa-file { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); min-width: 0; }
.aa-file-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.aa-file-head > .icon { color: var(--muted); flex: none; }
.aa-file-head > div { flex: 1 1 220px; min-width: 0; }
.aa-file-head strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.aa-file-head small { color: var(--muted); font-size: 12.5px; }
.aa-file-body { padding: 4px 16px 14px; }
.aa-file-body > p { margin: 10px 0 0; font-size: 13.5px; }
.aa-reason { color: var(--warn-text); }
.aa-acts { width: 100%; min-width: 600px; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.aa-acts col.aa-c-day { width: 104px; }
.aa-acts col.aa-c-kind { width: 120px; }
.aa-acts col.aa-c-qty { width: 170px; }
.aa-acts col.aa-c-amt { width: 128px; }
.aa-acts td, .aa-acts th { padding: 9px 10px 9px 0; border-top: 1px solid var(--border); text-align: left; vertical-align: middle; }
.aa-acts thead th { border-top: 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.aa-acts .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-acts td small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.aa-kind { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 650; background: var(--idle-bg); color: var(--idle-text); }
.aa-kind-buy { background: var(--ok-bg); color: var(--ok-text); }
.aa-kind-sell { background: var(--error-bg); color: var(--error-text); }
.aa-kind-income { background: var(--info-bg); color: var(--info-text); }
.aa-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; }
.aa-ask select { min-height: 30px; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.aa-more { margin-top: 10px; font-size: 13px; }
.aa-more summary { cursor: pointer; color: var(--muted); }
.aa-more-body { padding-top: 2px; }
.aa-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; max-width: 1180px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); box-shadow: 0 -6px 20px rgb(0 0 0 / 8%);
}
.aa-savebar p { margin: 0; font-size: 13.5px; flex: 1 1 320px; }
.aa-tick { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.aa-new { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; background: var(--info-bg);
          color: var(--info-text); font-size: 11px; font-weight: 650; vertical-align: 1px; }

/* --- Taxes (EASYREP-TAXES): the tax year of the portfolio picked, below Compare ------------------------------ */

/* The year's switch and the actions on one line, wrapping on a phone. */
.tx-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.tx-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tx-calc-form { margin: 0; }
.tx-years .an-option small { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
.tx-button { display: inline-flex; align-items: center; gap: 8px; }
.tx-button[disabled] { opacity: .7; cursor: progress; }
.tx-last { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.tx-notice, .tx-problem { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.tx-notice { background: var(--ok-bg); color: var(--ok-text); }
.tx-problem { background: var(--error-bg); color: var(--error-text); }

/* What the page says before the figures: to declare or settled, provisional, out of date, stopped. */
.tx-banners { display: grid; gap: 10px; margin-bottom: 18px; }
.tx-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; font-size: 14px;
             border: 1px solid transparent; }
.tx-banner > svg { flex: none; margin-top: 1px; }
.tx-banner p { margin: 0; }
.tx-banner p + p { margin-top: 4px; font-size: 13px; }
.tx-banner a { color: inherit; font-weight: 600; }
.tx-declare { background: var(--info-bg); color: var(--info-text); }
.tx-settled { background: var(--ok-bg); color: var(--ok-text); }
.tx-provisional { background: var(--warn-bg); color: var(--warn-text); }
.tx-failed { background: var(--error-bg); color: var(--error-text); }
.tx-stale, .tx-abroad { background: var(--panel); border-color: var(--border); color: var(--text); }

.tx-tiles { margin-bottom: 26px; }
.tx-empty { min-height: 0; }
.tx-table tbody th strong { display: block; }
/* A header read only by a screen reader stays inside its scroll box instead of widening the page. */
.tx-table thead th { position: relative; }
.tx-code { display: block; margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 400; }
.tx-categories { min-width: 860px; }
.tx-categories tfoot th, .tx-categories tfoot td { padding: 14px 10px; border-top: 2px solid var(--text); font-weight: 700; }
.tx-categories tfoot th { text-align: left; }
.tx-bank { min-width: 720px; }
.tx-table td.num > .tx-chip, .tx-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tx-chip-ok { background: var(--ok-bg); color: var(--ok-text); }
.tx-chip-warn { background: var(--warn-bg); color: var(--warn-text); }

/* Every component's rows, folded. */
.tx-details { padding: 0 16px; }
.tx-detail { border-top: 1px solid var(--border); }
.tx-detail:first-child { border-top: 0; }
.tx-detail summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 15px 2px; cursor: pointer;
                     list-style: none; }
.tx-detail summary::-webkit-details-marker { display: none; }
.tx-detail summary strong { font-size: 15px; }
.tx-detail summary span { color: var(--muted); font-size: 13px; }
.tx-detail summary em { margin-left: auto; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-detail summary svg { align-self: center; color: var(--muted); transition: transform .15s ease; }
.tx-detail[open] summary svg { transform: rotate(180deg); }
.tx-detail[open] summary { border-bottom: 1px dashed var(--border); }
.tx-detail summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.tx-detail .dash-securities { min-width: 680px; }
.tx-more { margin: 10px 2px 16px; color: var(--muted); font-size: 13px; }

/* Calculate pressed: the Tax year job's steps, ticked as they finish. */
.tx-steps { list-style: none; margin: 0; padding: 4px 16px; }
.tx-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0;
               border-top: 1px solid var(--border); }
.tx-steps li:first-child { border-top: 0; }
.tx-steps li span small { display: block; color: var(--muted); font-size: 12.5px; }
.tx-steps li > em { font-style: normal; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tx-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center;
          font-size: 12px; font-weight: 700; }
.tx-step-done .tx-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tx-step-done .tx-dot::after { content: "✓"; }
.tx-step-running .tx-dot { border-color: var(--accent); border-top-color: transparent; animation: tx-spin 1s linear infinite; }
.tx-step-failed .tx-dot, .tx-step-refused .tx-dot, .tx-step-interrupted .tx-dot { background: var(--error-bg); border-color: var(--error-text); color: var(--error-text); }
.tx-step-failed .tx-dot::after, .tx-step-refused .tx-dot::after, .tx-step-interrupted .tx-dot::after { content: "!"; }
.tx-step-waiting, .tx-step-not-reached { opacity: .6; }
@keyframes tx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tx-step-running .tx-dot { animation: none; border-style: dotted; } }

/* Settings: the same window as the dashboard's Benchmarks button. */
.tx-settings .settings-panel { width: min(420px, calc(100vw - 48px)); }
.tx-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.tx-fieldset[disabled] { opacity: .6; }
.tx-field { display: grid; gap: 6px; margin: 14px 0 0; }
.tx-field > label, .tx-field > span { font-size: 13px; font-weight: 600; }
.tx-field small { color: var(--muted); font-size: 12.5px; }
.tx-field select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
                   font: inherit; }
.tx-readonly { margin: 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; font-size: 13.5px; }
.tx-toggle { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.tx-toggle input { margin-top: 3px; accent-color: var(--accent); }
.tx-toggle span { font-size: 13.5px; }
.tx-toggle small { display: block; margin-top: 2px; }
.tx-closed { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }

/* KESt. Taktik, until it is built. */
.tx-ideas { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; max-width: 720px; }
.tx-ideas li { display: flex; gap: 12px; align-items: flex-start; }
.tx-ideas li svg { flex: none; margin-top: 2px; color: var(--accent); }
.tx-ideas strong { display: block; }
.tx-ideas span { color: var(--muted); }
.tx-ideas span strong { color: var(--text); }

@media (max-width: 900px) {
  .tx-tiles.tr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-tiles .tr-tile:nth-child(3) { border-left: 0; }
  .tx-tiles .tr-tile:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .tx-tiles.tr-tiles { grid-template-columns: minmax(0, 1fr); }
  .tx-tiles .tr-tile + .tr-tile { border-left: 0; border-top: 1px solid var(--border); }
  .tx-actions { width: 100%; }
  .tx-detail summary em { margin-left: 0; }
}

/* --- KESt. Taktik (EASYREP-KEST-TAKTIK): the year's loss pot as a bar, and what realizing would save ---------- */
.kt-days { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.kt-scope { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.kt-scope svg { flex: none; }
.kt-pot { padding: 18px 20px; }
.kt-bar { position: relative; display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--bg); }
.kt-seg { display: block; height: 100%; }
.kt-seg-gain { background: var(--accent); }
.kt-seg-age { background: color-mix(in srgb, var(--accent) 55%, var(--panel)); }
.kt-seg-div { background: color-mix(in srgb, var(--info-text) 45%, var(--panel)); }
.kt-seg-other { background: color-mix(in srgb, var(--muted) 45%, var(--panel)); }
.kt-harvest { position: absolute; left: 0; top: 0; bottom: 0; border-right: 2px solid var(--warn-text);
              background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn-text) 45%, transparent) 0 6px,
                                                    transparent 6px 12px); }
.kt-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted);
             font-size: 12.5px; }
.kt-legend li { display: inline-flex; align-items: center; gap: 6px; }
.kt-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.kt-harvest-dot { background: repeating-linear-gradient(135deg, var(--warn-text) 0 2px, transparent 2px 4px); }
.kt-result { margin: 14px 0 0; font-size: 14px; }
.kt-candidates { min-width: 900px; }
.kt-across { min-width: 720px; }
.kt-partial { color: var(--warn-text); font-weight: 600; }
.kt-rules summary > svg { margin-left: auto; }
.kt-rules { margin-top: 22px; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.kt-rule-list { margin: 12px 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; }
.kt-rule-list strong { margin-right: 4px; }
.kt-sources { margin: 0 0 14px; color: var(--muted); font-size: 12px; }

/* Update this portfolio, followed on the dashboard (EASYREP-UPDATE-NOTICE): the button turns into "Updating…" with a
   spinner, and a notification at the foot of the page names the step, then says the portfolio has been updated and
   to which day it is valued. Above Add activities wherever the two could meet. */
.dash-spinner { display: none; width: 13px; height: 13px; margin-right: 8px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: step-spin .8s linear infinite; }
.portfolio-update.is-busy .dash-spinner { display: inline-block; }
.portfolio-update.is-busy .dash-button { cursor: progress; color: var(--muted); }

/* Centred under the page, beside the 260 px sidebar; under everything once the sidebar stacks on top. */
.toast-region { position: fixed; left: calc(50% + 130px); bottom: 28px; z-index: 40; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
.toast { --toast-tone: var(--info-text); pointer-events: auto; display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 10px 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--toast-tone);
  border-radius: 12px; background: var(--panel); color: var(--text); font-size: 14px;
  box-shadow: 0 12px 32px rgb(15 23 42 / 16%); animation: toast-in .18s ease-out; }
.toast-ok { --toast-tone: var(--ok-text); }
.toast-warn { --toast-tone: var(--warn-text); }
.toast-fail { --toast-tone: var(--error-text); }
.toast-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  color: var(--toast-tone); background: color-mix(in srgb, var(--toast-tone) 14%, transparent); }
.toast-mark > * { display: none; }
.toast-run .toast-spin, .toast-ok .toast-mark > svg:nth-of-type(1),
.toast-warn .toast-mark > svg:nth-of-type(2), .toast-fail .toast-mark > svg:nth-of-type(2) { display: block; }
.toast-spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: step-spin .8s linear infinite; }
.toast-body { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 4px; }
.toast-body strong { font-weight: 650; }
.toast-body span { color: var(--muted); }
.toast-body a { justify-self: start; margin-top: 4px; color: var(--accent); font-weight: 600; }
.toast-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0;
  border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.toast-close:hover { background: var(--idle-bg); color: var(--text); }
.toast-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 1px; }
.toast-leaving { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast-leaving { animation: none; transition: none; }
  .toast-spin, .dash-spinner { animation-duration: 2.4s; }
}
@media (max-width: 1100px) { .toast-region { bottom: 92px; } }
@media (max-width: 720px) { .toast-region { left: 50%; } }
@media (max-width: 560px) { .toast-region { bottom: 76px; } }