/* ─────────────────────────────────────────────
   ETF Portugal — layout-specific styles
   Reutiliza tokens (cores, fontes) de base.css.
   ───────────────────────────────────────────── */

.etf-body { background: var(--bg); color: var(--text); }
.etf-body .wrap { display: block; min-height: 0; padding: 0; align-items: stretch; justify-content: flex-start; }

/* A157: <abbr title> styling — consistent visual cue that the term
   has an expansion (browsers default to dotted underline, but it
   varies; this normalises and adds `cursor: help`). Used by TER /
   AUM / ISIN labels across screener / profile peer-cards / compare
   rows. WCAG 3.1.4 (Abbreviations). */
.etf-body abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

/* Header / nav */
.etf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-wrap: wrap; gap: 16px;
}
.etf-brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.etf-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.etf-brand-name {
  font-family: var(--fd); font-weight: 600; color: var(--green);
  letter-spacing: 2px; text-transform: uppercase; font-size: 1.05rem;
}
.etf-brand-sub {
  font-size: .68rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--light);
}
.etf-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.etf-nav a {
  color: var(--muted); font-size: .9rem; font-weight: 500;
  text-transform: none; letter-spacing: 0.3px;
}
.etf-nav a:hover { color: var(--green); }
.etf-nav a.etf-nav-secondary { color: var(--light); border-left: 1px solid var(--border); padding-left: 22px; }

/* Main / footer */
.etf-main { max-width: 1320px; margin: 0 auto; padding: 28px 28px 64px; }
.etf-footer { border-top: 1px solid var(--border); padding: 24px 32px; background: var(--surface); }
.etf-footer-row {
  display: flex; gap: 22px; flex-wrap: wrap; color: var(--light);
  font-size: .8rem; max-width: 1320px; margin: 0 auto;
}
.etf-footer-row a { color: var(--muted); }
.etf-footer-row a:hover { color: var(--green); }

/* Hero */
.etf-hero { padding: 56px 0 32px; max-width: 780px; }
.etf-hero-title {
  font-family: var(--fd); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05; color: var(--text); margin-bottom: 18px;
}
.etf-hero-title em { color: var(--green); font-style: italic; }
.etf-hero-sub { font-size: 1.05rem; color: var(--muted); margin-bottom: 28px; }
/* R2.9 #2: flex-wrap so the two CTAs stack instead of squeezing on
   very narrow viewports (<320px or any case where the buttons together
   exceed the container width — long EN labels make this more likely
   than the short PT defaults). Defensive — costs nothing on normal
   viewports because both buttons fit the row easily. */
.etf-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.etf-btn-primary, .etf-btn-ghost {
  display: inline-block; padding: 12px 22px; border-radius: 4px;
  font-weight: 500; letter-spacing: 0.4px; font-size: .92rem;
  transition: background .15s, color .15s, border-color .15s;
}
.etf-btn-primary { background: var(--green); color: var(--bg); }
.etf-btn-primary:hover { background: #14281f; }
.etf-btn-ghost { border: 1px solid var(--border); color: var(--muted); }
.etf-btn-ghost:hover { color: var(--green); border-color: var(--green); }

/* Breadcrumbs (iter 28) — sit between the section subnav and the search bar.
   Visible chain mirrors the BreadcrumbList JSON-LD shipped on the same pages
   so screen readers, sighted users and crawlers see the same hierarchy. */
.etf-breadcrumbs {
  max-width: 1320px; margin: 0 auto; padding: 12px 24px 0;
  font-family: var(--fb); font-size: .82rem;
}
.etf-breadcrumbs-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  color: var(--muted);
}
.etf-breadcrumbs-item { display: inline-flex; align-items: center; gap: 6px; }
.etf-breadcrumbs-item a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.etf-breadcrumbs-item a:hover { color: var(--green); border-bottom-color: var(--gold); }
.etf-breadcrumbs-sep { color: var(--light); font-weight: 400; }
.etf-breadcrumbs-current { color: var(--text); font-weight: 500; }

/* Sections */
.etf-section { margin: 48px 0 32px; }
/* Account-page wrapper: chrome.css defines `.container` only when nested
   under `.pillars-section` / `.featured-section` / `.cat-section`. Templates
   like /lista, /carteira, /atividades and the ETF 404 wrap their content
   in `<section class="etf-section"><div class="container">` — without this
   rule the content sprawled edge-to-edge on wide monitors (R2.5 residual). */
.etf-section .container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.etf-section-title {
  font-family: var(--fd); font-weight: 500; font-size: 1.6rem;
  color: var(--text); margin-bottom: 18px;
}

/* Account-page hero (used by /lista and /carteira). The marketing chrome
   defines `.s-header` only when nested under `.pillars-section` etc., so
   pages using this structure outside that scope rendered with raw browser
   defaults. These rules anchor the eyebrow / title / divider / lede in a
   left-aligned, account-page aesthetic — distinct from the centred
   marketing variant. */
.etf-section .s-header { margin: 24px 0 28px; }
.etf-section .eyebrow {
  font-size: .72rem; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--light); font-weight: 600; margin-bottom: 8px;
}
.etf-section .s-title {
  font-family: var(--fd); font-weight: 500; font-size: 2.2rem;
  color: var(--text); line-height: 1.15; margin: 0;
}
.etf-section .s-divider {
  width: 48px; height: 1px; background: var(--gold);
  margin: 12px 0 0; border: 0;
}
.etf-section .s-lede {
  margin-top: 16px; max-width: 680px; color: var(--muted); line-height: 1.6;
}
@media (max-width: 720px) {
  .etf-section .s-title { font-size: 1.7rem; }
  .etf-section .s-header { margin: 16px 0 22px; }
}

.etf-card-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.etf-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 18px; display: block;
  transition: border-color .15s, transform .15s;
}
.etf-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.etf-card-head {
  display: flex; justify-content: space-between; font-size: .72rem;
  text-transform: uppercase; letter-spacing: 1px; color: var(--light);
  margin-bottom: 8px;
}
.etf-card-ticker { color: var(--green); font-weight: 600; }
.etf-card-name {
  font-family: var(--fd); font-weight: 500; font-size: 1.1rem;
  margin-bottom: 12px; color: var(--text);
}
.etf-card-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--muted); }
.etf-card-stats strong { display: block; font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; color: var(--light); }
.etf-card-issuer { font-size: .72rem; color: var(--light); text-transform: uppercase; letter-spacing: 1px; }

.etf-features {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.etf-features article {
  background: var(--surface-alt); padding: 22px; border-radius: 6px;
}
.etf-features h3 {
  font-family: var(--fd); font-weight: 500; font-size: 1.15rem;
  margin-bottom: 8px; color: var(--green);
}
.etf-features p { font-size: .9rem; color: var(--muted); }

/* Page header */
.etf-page-title {
  font-family: var(--fd); font-weight: 500; font-size: 2rem;
  margin: 24px 0 6px; color: var(--text);
}
.etf-page-sub { color: var(--muted); margin-bottom: 24px; }
.etf-page-sub.etf-ok { color: var(--green); }
.etf-page-sub.etf-invalid, .etf-page-sub.etf-duplicate { color: #8a4b1a; }

/* Quick-filter chips above the screener form */
.etf-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px;
}
.etf-chip {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .85rem;
  letter-spacing: 0.2px; border: 1px solid var(--border);
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.etf-chip:hover { background: var(--surface-alt); color: var(--text); border-color: #c7bfae; }
.etf-chip.is-active {
  background: var(--green); color: var(--bg); border-color: var(--green);
}
.etf-chip.is-active:hover { background: #14281f; color: var(--bg); }

/* Filters / forms */
.etf-filters {
  display: grid; gap: 12px; margin-bottom: 18px;
  background: var(--surface); padding: 16px; border: 1px solid var(--border); border-radius: 6px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.etf-filters input, .etf-filters select, .etf-filters button {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); font-family: inherit; font-size: .88rem;
}
.etf-filters label { display: flex; flex-direction: column; font-size: .72rem; color: var(--light); gap: 6px; text-transform: uppercase; letter-spacing: 1px; }
.etf-filters button {
  background: var(--green); color: var(--bg); border-color: var(--green);
  cursor: pointer; padding-left: 20px; padding-right: 20px; font-weight: 500;
  grid-column: 1 / -1;
}
.etf-filters button:hover { background: #14281f; }

.etf-filter-search { grid-column: 1 / -1; }
.etf-filter-group { display: flex; flex-direction: column; gap: 6px; }
.etf-filter-group span { display: block; font-size: .72rem; color: var(--light); gap: 4px; text-transform: uppercase; letter-spacing: 1px; }
.etf-filter-range {
  width: 100%; height: 6px; border-radius: 3px; background: var(--border);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.etf-filter-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--green); cursor: pointer; border: none;
}
.etf-filter-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--green);
  cursor: pointer; border: none;
}
.etf-filter-input { padding: 10px 12px; }
.etf-filter-select { padding: 10px 12px; }
.etf-range-values {
  font-size: .78rem; color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums;
}

.etf-results-count { color: var(--light); font-size: .82rem; margin-bottom: 12px; }

/* Tables */
.etf-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  /* Phase 0.7 sticky-header sweep: `overflow: hidden` on the table itself
     would clip the sticky-positioned thead, so move the rounded-corner
     mask up to the wrap (.etf-table-wrap below). */
  overflow: visible;
}
.etf-table th, .etf-table td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border);
}
.etf-table thead th {
  background: var(--surface-alt); font-size: .72rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); font-weight: 500;
  /* Phase 0.7: header sticks while the 67-row body scrolls past it. */
  position: sticky; top: 0; z-index: 2;
}
.etf-table tbody tr:last-child td { border-bottom: none; }
.etf-table tbody tr:hover { background: var(--surface-alt); }
.etf-table a { color: var(--green); }
.etf-table a:hover { text-decoration: underline; }

/* Phase 0.7: sortable column headers. Each numeric column wraps its label
   in an <a> so a click flips the server-side ?sort=…&desc=… query while
   preserving every other filter param. Active column carries an arrow
   indicator + is-sorted class for hover/colour distinction. */
.etf-table thead th .etf-th-sort {
  display: inline-flex; align-items: center; gap: 4px;
  color: inherit; text-decoration: none; cursor: pointer;
}
.etf-table thead th .etf-th-sort:hover { color: var(--text); text-decoration: none; }
.etf-table thead th.is-sorted { color: var(--text); }
.etf-table thead th .etf-sort-arrow { font-size: .85em; line-height: 1; }
/* Sticky needs the wrap to be the scroll container — bound the screener
   table at 75 % of viewport height so the page can scroll past it normally
   while the inner-table header stays pinned to the top of the wrap. */
.etf-table-wrap { max-height: 75vh; overflow: auto; -webkit-overflow-scrolling: touch; }

.etf-pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--surface-alt); color: var(--muted); font-size: .72rem;
  letter-spacing: 0.3px;
}
.etf-pill-acumulador { background: rgba(30,58,47,0.10); color: var(--green); }
.etf-pill-distribuidor { background: rgba(201,168,76,0.18); color: #8a6f20; }

/* Profile page */
.etf-profile-head {
  display: flex; justify-content: space-between; gap: 18px;
  margin: 16px 0 28px; flex-wrap: wrap;
}
.etf-profile-issuer { color: var(--light); font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; }
.etf-profile-name { font-family: var(--fd); font-size: 2rem; font-weight: 500; line-height: 1.1; margin: 6px 0; }
.etf-profile-summary { color: var(--muted); max-width: 720px; }
.etf-profile-pills { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.etf-profile-disclaimer { color: var(--light); font-size: .78rem; margin-top: 32px; }

.etf-metric-grid {
  display: grid; gap: 12px; margin-bottom: 28px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.etf-metric-grid > div {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 14px;
}
.etf-metric-grid span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--light); margin-bottom: 4px; }
.etf-metric-grid strong { font-size: 1.1rem; color: var(--text); }

.etf-fiscal-box {
  background: var(--surface-alt); border-radius: 8px; padding: 24px; margin: 24px 0;
}
.etf-fiscal-box h2 { font-family: var(--fd); font-weight: 500; font-size: 1.4rem; color: var(--green); margin-bottom: 6px; }
.etf-fiscal-inputs { color: var(--muted); margin-bottom: 16px; }
.etf-fiscal-grid {
  display: grid; gap: 12px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.etf-fiscal-grid > div { background: var(--surface); padding: 12px 14px; border-radius: 6px; }
.etf-fiscal-grid span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--light); margin-bottom: 4px; }
.etf-fiscal-grid strong { font-size: 1.1rem; }
.etf-good { color: var(--green); }
.etf-fiscal-note { font-size: .82rem; color: var(--muted); margin-top: 8px; }

.etf-fiscal-compare {
  display: grid; gap: 18px; margin: 18px 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.etf-fiscal-compare article {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px;
}
.etf-fiscal-compare h2 { font-family: var(--fd); font-weight: 500; font-size: 1.2rem; margin-bottom: 10px; color: var(--green); }
.etf-fiscal-compare ul { list-style: none; padding: 0; }
.etf-fiscal-compare li { padding: 4px 0; color: var(--muted); font-size: .9rem; }
.etf-fiscal-compare li strong { color: var(--text); }

/* "Efeito do Art. 43.º" callout block on /calculadora-fiscal — quantifies
   the platform's headline PT-only USP for anonymous SEO visitors so they
   see in EUR what the progressive exclusion actually saves them in their
   own scenario, plus how much waiting one more bracket would add. */
.etf-art43-effect { margin: 24px 0; }
.etf-art43-effect h2 {
  font-family: var(--fd); font-weight: 500; font-size: 1.4rem;
  color: var(--green); margin-bottom: 12px;
}
.etf-art43-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.etf-art43-card {
  padding: 16px 18px;
  background: #eef6f1;
  border: 1px solid #c9dec9;
  border-left: 3px solid var(--green);
  border-radius: 6px;
}
.etf-art43-card-next { border-left-color: var(--gold); background: #fbf6e8; border-color: #ecdcae; }
.etf-art43-card-max  { border-left-color: var(--light); background: var(--surface-alt); border-color: var(--border); }
.etf-art43-card-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--muted); font-weight: 600;
}
.etf-art43-card-value {
  font-family: var(--fd); font-weight: 500; font-size: 1.8rem;
  color: var(--green); margin: 6px 0 8px;
  font-variant-numeric: tabular-nums;
}
.etf-art43-card-next .etf-art43-card-value { color: #8a6a20; }
.etf-art43-card-max .etf-art43-card-value  { color: var(--text); }
.etf-art43-card-explainer {
  font-size: .88rem; line-height: 1.55; color: var(--muted); margin: 0;
}
.etf-art43-card-explainer strong { color: var(--text); font-weight: 600; }

/* Englobamento decision card on /calculadora-fiscal — recommends progressive
   IRS vs autonomous 28% based on the user's marginal bracket. */
.etf-englobamento { margin: 24px 0; }
.etf-englobamento h2 {
  font-family: var(--fd); font-weight: 500; font-size: 1.4rem;
  color: var(--green); margin-bottom: 12px;
}
.etf-englobamento-card {
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
}
.etf-englobamento-englobamento { border-left-color: var(--green); background: #eef6f1; border-color: #c9dec9; }
.etf-englobamento-autonomous   { border-left-color: #8a4b1a; background: #fbf2e8; border-color: #ecd5b8; }
.etf-englobamento-indifferent  { border-left-color: var(--light); }
.etf-englobamento-empty        { border-left-color: var(--light); background: var(--surface-alt); border-color: var(--border); }
.etf-englobamento-headline {
  font-size: 1.05rem; line-height: 1.5; color: var(--text);
}
.etf-englobamento-savings {
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.etf-englobamento-autonomous .etf-englobamento-savings { color: #8a4b1a; }
.etf-englobamento-note {
  margin: 10px 0 14px; font-size: .92rem; color: var(--muted); line-height: 1.55;
}
.etf-englobamento-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 0;
}
.etf-englobamento-detail > div { display: flex; flex-direction: column; gap: 2px; }
.etf-englobamento-detail dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--light); font-weight: 600;
}
.etf-englobamento-detail dd {
  font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; margin: 0;
}
.etf-englobamento-disclaimer {
  margin-top: 12px; font-size: .82rem; color: var(--muted); line-height: 1.55;
}

/* FAQ section on /calculadora-fiscal — paired with the FAQPage JSON-LD
   shipped on the same page. Visible content + structured data render
   from the same _CALCULATOR_FAQ tuple in routes.py so they can never
   drift. */
.etf-faq { margin: 32px 0 24px; }
.etf-faq h2 {
  font-family: var(--fd); font-weight: 500; font-size: 1.4rem;
  color: var(--green); margin-bottom: 16px;
}
.etf-faq-list { margin: 0; padding: 0; }
.etf-faq-item {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.etf-faq-item:first-child { border-top: none; }
.etf-faq-question {
  font-family: var(--fb);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text);
  margin: 0 0 6px;
}
.etf-faq-answer {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.6;
}

/* Broker detail */
.etf-broker-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px;
  background: var(--surface); padding: 18px; border-radius: 6px; border: 1px solid var(--border);
  margin-bottom: 18px;
}
.etf-broker-dl dt { color: var(--light); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
.etf-broker-dl dd { color: var(--text); }

/* Articles */
.etf-article { max-width: 720px; }
.etf-article-body { line-height: 1.7; color: var(--muted); margin-top: 18px; }
.etf-article-body h1, .etf-article-body h2, .etf-article-body h3 { color: var(--text); font-family: var(--fd); font-weight: 500; margin: 18px 0 8px; }

.etf-empty { color: var(--light); font-style: italic; }

/* Profile — holdings, sector/country mix, factor tilt */
.etf-holdings-box, .etf-factor-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 18px 20px; margin: 18px 0;
}
.etf-holdings-box h2, .etf-factor-box h2, .etf-mix-col h2 {
  font-family: var(--fd); font-weight: 500; font-size: 1.05rem; color: var(--text);
  margin-bottom: 10px;
}
.etf-holdings-list { list-style: decimal inside; padding: 0; margin: 0; }
.etf-holdings-list li {
  display: flex; justify-content: space-between; padding: 4px 0;
  color: var(--muted); font-size: .9rem;
}
.etf-holdings-name { color: var(--text); }
.etf-holdings-weight { color: var(--muted); font-variant-numeric: tabular-nums; }

.etf-mix-grid {
  display: grid; gap: 18px; margin: 18px 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.etf-mix-col {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px 20px;
}
.etf-mix-list { list-style: none; padding: 0; margin: 0; }
.etf-mix-list li {
  display: flex; justify-content: space-between; padding: 4px 0;
  color: var(--muted); font-size: .9rem;
}
.etf-mix-list strong { color: var(--text); font-variant-numeric: tabular-nums; }

.etf-factor-list {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.etf-factor-list li {
  background: var(--surface-alt); padding: 10px 12px; border-radius: 5px;
  display: flex; justify-content: space-between; font-size: .9rem;
}
.etf-factor-list strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Profile — Desempenho / Risco / Retornos anuais */
.etf-perf-box, .etf-risk-box, .etf-annual-box {
  margin: 18px 0;
}
.etf-perf-box h2, .etf-risk-box h2, .etf-annual-box h2 {
  font-family: var(--fd); font-weight: 500; font-size: 1.05rem;
  color: var(--text); margin-bottom: 10px;
}

.etf-holdings-meta {
  color: var(--muted); font-size: .85rem; margin-bottom: 10px;
}

.etf-annual-list { list-style: none; padding: 0; margin: 0; }
.etf-annual-list li {
  display: grid;
  grid-template-columns: 64px 1fr 80px;
  gap: 12px; align-items: center;
  padding: 6px 0;
  font-size: .9rem;
}
.etf-annual-year { color: var(--muted); font-variant-numeric: tabular-nums; }
.etf-annual-value { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.etf-annual-bar {
  display: block; height: 14px; border-radius: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 100%);
  width: calc(var(--w, 0) * 1.5px);
  max-width: 100%;
}
.etf-annual-bar-neg {
  background: linear-gradient(90deg, #c84545 0%, #c84545 100%);
}

@media (max-width: 720px) {
  .etf-header { padding: 14px 18px; }
  .etf-nav { gap: 14px; font-size: .85rem; }
  .etf-nav a.etf-nav-secondary { border-left: none; padding-left: 0; }
  .etf-main { padding: 22px 16px 48px; }

  /* Mobile-optimized filters: stack vertically */
  .etf-filters {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .etf-filter-search { grid-column: 1; }
  .etf-filters button { grid-column: 1; margin-top: 6px; }
  .etf-filter-group { margin-bottom: 4px; }
}

/* ── Profile narrative sections (justETF-style) ──────────────────── */

.etf-thesis {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 26px 0;
}
.etf-thesis h2 {
  font-family: var(--fd);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 10px;
}
.etf-thesis p { color: var(--muted); line-height: 1.75; font-size: .95rem; }

.etf-facts { margin: 26px 0; }
.etf-facts h2 {
  font-family: var(--fd);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
}
.etf-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
/* R2.10 #8: <dl>/<dt>/<dd> structure for the facts grid. Browsers
   default <dd> to margin-inline-start: 40px and both dt/dd to
   `display: block`. Reset both inside .etf-facts-grid so the cards
   keep their grid layout and the label↔value flex row inside
   .etf-fact-row aligns correctly. .etf-fact-help still sets `margin: 0`
   in its own rule below, but tagging it `dd` brings the 40px margin
   back unless overridden here. */
.etf-facts-grid dt, .etf-facts-grid dd { margin: 0; }
.etf-fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.etf-fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.etf-fact-label {
  font-size: .68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light);
  font-weight: 600;
}
.etf-fact-val {
  font-family: var(--fd);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.etf-fact-help {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.etf-stance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 26px 0;
}
.etf-stance-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
}
.etf-stance-col h2 {
  font-family: var(--fd);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 12px;
}
.etf-stance-pros { border-left: 4px solid var(--green); }
.etf-stance-pros h2 { color: var(--green); }
.etf-stance-cons { border-left: 4px solid #b89234; }
.etf-stance-cons h2 { color: #8a6f20; }
.etf-stance-col ul { list-style: none; padding: 0; margin: 0; }
.etf-stance-col li {
  padding: 7px 0 7px 22px;
  position: relative;
  color: var(--muted);
  line-height: 1.65;
  font-size: .92rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.etf-stance-col li:last-child { border-bottom: none; }
.etf-stance-pros li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: var(--green); font-weight: 700;
}
.etf-stance-cons li::before {
  content: "!"; position: absolute; left: 0; top: 7px;
  color: #b89234; font-weight: 700;
}

.etf-fiscal-explainer {
  color: var(--muted);
  line-height: 1.7;
  font-size: .9rem;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: rgba(30, 58, 47, 0.04);
  border-left: 3px solid var(--green);
  border-radius: 4px;
}
.etf-fiscal-explainer strong { color: var(--text); }

.etf-brokers-box {
  margin: 26px 0;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.etf-brokers-box h2 {
  font-family: var(--fd);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 8px;
}
.etf-brokers-intro {
  color: var(--muted);
  font-size: .88rem;
  margin-bottom: 16px;
  line-height: 1.6;
}
.etf-brokers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.etf-broker-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.etf-broker-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.etf-broker-name {
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.etf-broker-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.etf-broker-stats > div span {
  display: block;
  font-size: .6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light);
  font-weight: 600;
  margin-bottom: 2px;
}
.etf-broker-stats > div strong { font-size: .85rem; color: var(--text); font-weight: 500; }
.etf-broker-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.etf-broker-tag {
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  background: rgba(30, 58, 47, .08);
  padding: 3px 8px;
  border-radius: 10px;
}

.etf-peers-box { margin: 26px 0; }
.etf-peers-box h2 {
  font-family: var(--fd);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.etf-peers-intro {
  color: var(--muted);
  font-size: .88rem;
  margin-bottom: 14px;
  line-height: 1.6;
}
.etf-peers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.etf-peer-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.etf-peer-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.etf-peer-name {
  font-family: var(--fd);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.etf-peer-isin {
  font-size: .68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 12px;
  font-weight: 500;
}
.etf-peer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.etf-peer-stats > div span {
  display: block;
  font-size: .58rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light);
  font-weight: 600;
  margin-bottom: 2px;
}
.etf-peer-stats > div strong { font-size: .8rem; color: var(--text); font-weight: 500; }

/* Editorial deep-dive — long-form prose blocks */
.etf-editorial {
  margin: 32px 0;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  max-width: 760px;  /* readable line length */
}
.etf-editorial-block {
  background: var(--surface);
  border-left: 3px solid var(--green);
  padding: 18px 22px;
  border-radius: 0 6px 6px 0;
}
.etf-editorial-block h3 {
  font-family: var(--fd);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.etf-editorial-block p {
  color: var(--muted);
  line-height: 1.75;
  font-size: .94rem;
  margin: 0;
}

@media (max-width: 720px) {
  .etf-stance { grid-template-columns: 1fr; }
  .etf-thesis, .etf-brokers-box { padding: 18px 20px; }
  .etf-editorial-block { padding: 14px 16px; }
}

/* ── Top-bar autocomplete search ─────────────────────────────────── */
.etf-searchbar-wrap {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
}
.etf-searchbar {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}
.etf-searchbar-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--light);
  pointer-events: none;
}
.etf-searchbar-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.etf-searchbar-input::placeholder { color: var(--light); }
.etf-searchbar-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 58, 47, 0.10);
}
.etf-searchbar-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  z-index: 30;
  max-height: 420px;
  overflow-y: auto;
}
.etf-searchbar-results li {
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s;
}
.etf-searchbar-results li.is-active,
.etf-searchbar-results li:hover {
  background: var(--surface-alt);
}
/* Empty-state row (no results found) — non-interactive: muted text, no
   hover highlight, default cursor. R2.8 issue #2 fix: pre-iter the empty
   case silently closed the dropdown so the user got no feedback. */
.etf-searchbar-results li.etf-searchbar-empty {
  color: var(--muted);
  font-style: italic;
  font-size: .9rem;
  cursor: default;
}
.etf-searchbar-results li.etf-searchbar-empty:hover {
  background: transparent;
}
/* A96: network-error variant — visually distinguished by an error
   colour so the user sees "search failed" not "no matches". Same
   non-interactive shape as the empty-state row. */
.etf-searchbar-results li.etf-searchbar-empty.is-error {
  color: #a23b3b;
  font-style: normal;
}
.etf-searchbar-row {
  display: flex; gap: 10px; align-items: center;
  font-size: .72rem; color: var(--light);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 3px;
}
.etf-searchbar-isin { color: var(--green); font-weight: 600; }
.etf-searchbar-ticker { color: var(--muted); }
.etf-searchbar-ter { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.etf-searchbar-name {
  color: var(--text); font-size: .92rem; line-height: 1.3;
  font-weight: 500;
}
.etf-searchbar-meta {
  color: var(--muted); font-size: .75rem; margin-top: 2px;
}

@media (max-width: 720px) {
  .etf-searchbar-wrap { padding: 10px 14px; }
  .etf-main { padding: 22px 14px 48px; }
}

/* ── Annual-returns bar chart on profile page ───────────────────────── */
.etf-annual-returns {
  margin: 36px 0;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid #E5E0D8;
  border-radius: 8px;
}
.etf-annual-returns h2 {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4em;
  color: #1A1A1A;
}
.etf-annual-intro {
  margin: 0 0 18px;
  font-size: .92em;
  color: #5b5346;
  line-height: 1.55;
}
.etf-annual-list { list-style: none; margin: 0; padding: 0; }
.etf-annual-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid #F4F0E6;
}
.etf-annual-row:last-child { border-bottom: none; }
.etf-annual-year {
  font-family: 'DM Sans', sans-serif;
  font-size: .85em;
  color: #5b5346;
  font-weight: 500;
}
.etf-annual-track {
  position: relative;
  height: 18px;
  background: #FAFAF5;
  border-radius: 3px;
  overflow: hidden;
}
.etf-annual-bar {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width .25s ease;
}
.etf-annual-bar.is-pos { background: #2d6a4f; }
.etf-annual-bar.is-neg { background: #a23b3b; }
.etf-annual-val {
  font-family: 'DM Sans', sans-serif;
  font-size: .9em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.etf-annual-val.is-pos { color: #2d6a4f; }
.etf-annual-val.is-neg { color: #a23b3b; }
@media (max-width: 540px) {
  .etf-annual-row { grid-template-columns: 50px 1fr 65px; gap: 10px; }
}

/* ── Profile-page action buttons (Add to list / portfolio) ──────────── */
.etf-action-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}
.etf-action-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: .78em; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 4px;
  border: 1px solid #1E3A2F;
  background: #FAFAF5;
  color: #1E3A2F;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.etf-action-btn:hover { background: #1E3A2F; color: #FAFAF5; }
.etf-action-btn.is-primary { background: #1E3A2F; color: #FAFAF5; }
.etf-action-btn.is-primary:hover { background: #2a5443; }
.etf-action-btn.is-active { background: #C9A84C; color: #1A1A1A; border-color: #C9A84C; }
.etf-action-msg {
  font-size: .85em; color: #5b5346; margin-top: 6px;
}
.etf-action-msg.is-err { color: #a23b3b; }

/* Sticky compare-selection bar shared by /pesquisar (iter 14) and /lista
   (iter 25). Until iter 29 each surface duplicated a byte-identical inline
   style block; consolidating here keeps any future tweak (focus state,
   mobile spacing, dark-mode contrast) in one place. The IDs (etf-*-bar /
   wl-*-bar) stay per-surface because two separate JS modules target them. */
.etf-compare-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 6px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.etf-compare-bar-count { font-size: .9rem; color: var(--text); }
.etf-compare-bar-hint  { font-size: .8rem; color: var(--light); }
.etf-compare-bar-btn {
  padding: 8px 16px;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--bg);
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}
.etf-compare-bar-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Compare-bar chips (R2.8 #3): one chip per selected ETF rendered into
   #etf-compare-bar-chips / #wl-compare-bar-chips. Click ✕ unchecks the
   source row checkbox without scrolling. flex-1 so the chip strip soaks
   up the bar's middle space; chips wrap on narrow viewports. */
.etf-compare-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.etf-compare-bar-chips:empty { display: none; }
.etf-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: .8rem;
  color: var(--text);
  line-height: 1.2;
}
.etf-compare-chip-label { font-variant-numeric: tabular-nums; }
.etf-compare-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  padding: 0; margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: .7rem;
  cursor: pointer;
  line-height: 1;
}
.etf-compare-chip-x:hover { background: var(--border); color: var(--text); }
.etf-compare-chip-x:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* CSV-export bar shared by /carteira (iter 18) and /lista (iter 19).
   Each page used to define its own .pf-export / .wl-export with byte-for-byte
   identical rules; consolidating here keeps any future tweak (button colour,
   spacing, accessibility focus) in one place. */
.etf-export-bar {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.etf-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #1E3A2F;
  color: #1E3A2F;
  border-radius: 4px;
  font-family: inherit; font-size: .88em; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.etf-export-btn:hover { background: #1E3A2F; color: #FAFAF5; }
.etf-export-meta {
  color: #6e6354;
  font-size: .82em;
  line-height: 1.45;
  flex: 1;
  min-width: 240px;
}

/* Inline portfolio-add panel that drops out of the profile-page button */
.etf-add-pf-panel {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  background: #FAFAF5;
  border: 1px solid #E5E0D8;
  border-radius: 6px;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}
.etf-add-pf-panel.is-open { display: flex; }
.etf-add-pf-panel label {
  display: flex; flex-direction: column; gap: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: .72em; letter-spacing: 1.2px; text-transform: uppercase;
  color: #6e6354; font-weight: 600;
}
.etf-add-pf-panel input {
  font-family: inherit; font-size: .95em;
  padding: 7px 10px;
  border: 1px solid #E5E0D8; border-radius: 4px;
  background: #fff; min-width: 110px;
}
.etf-add-pf-panel input:focus { outline: none; border-color: #C9A84C; }

/* Foreign-currency warning shown above the EUR fields when the ETF is
   not EUR-denominated. Mirrors the warning on /carteira so the user sees
   the FX caveat *before* committing the holding. */
.etf-pf-fx-warn {
  flex-basis: 100%;
  padding: 10px 12px;
  background: #fff7e6;
  border: 1px solid #f0d59a;
  border-radius: 4px;
  color: #7a5a10;
  font-family: 'DM Sans', sans-serif;
  font-size: .88em;
  line-height: 1.45;
}
.etf-pf-fx-rate {
  margin-top: 6px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .92em;
  color: #5b5346;
}
.etf-pf-fx-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: .82em;
  color: #8a6a20;
  margin-left: 6px;
}

/* Star button on screener rows */
.etf-row-star {
  background: transparent;
  border: 1px solid #E5E0D8;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 9px;
  font-size: 1.05em;
  color: #c9a84c;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.etf-row-star:hover { background: #fff8e6; border-color: #c9a84c; }
.etf-row-star.is-active { background: #c9a84c; color: #1A1A1A; border-color: #c9a84c; }

/* ──────────────────────────────────────────────────────────────────────
   Polish pass (2026-04-28) — typography, focus rings, loading state,
   active-filters strip, empty rows, mobile table overflow.
   No structural changes. Pure additive CSS.
   ────────────────────────────────────────────────────────────────────── */

/* Tabular numerals across every ETF table (Bloomberg-style). */
.etf-table { font-variant-numeric: tabular-nums; }
.etf-table thead th { font-variant-numeric: normal; }   /* keep header text natural */

/* Right-align numeric columns in the screener (these columns hold pure numbers). */
.etf-table th.etf-num,
.etf-table td.etf-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Make the screener results table behave on mobile — horizontal scroll
   instead of overflowing the viewport. Wraps a <table> in a scrollable shell
   when the parent template uses .etf-table-wrap. */
.etf-table-wrap {
  margin-top: 6px; overflow-x: auto;
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}

/* Empty result row in tables (screener with no matches, etc.) */
.etf-table tr.etf-empty-row td {
  text-align: center; padding: 28px 14px;
  color: var(--light); font-style: italic;
}

/* Active-filters strip on the screener — shows what's currently filtering
   results, with one-click removal. Pure GET pattern; no JS state. */
.etf-active-filters {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 4px 0 14px;
}
.etf-active-filters-label {
  font-size: .72rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--light); margin-right: 4px; font-weight: 600;
}
.etf-active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 12px; border-radius: 999px;
  background: rgba(30, 58, 47, .07); color: var(--green);
  font-size: .8rem; line-height: 1; text-decoration: none;
  border: 1px solid rgba(30, 58, 47, .15);
  transition: background .15s, color .15s, border-color .15s;
}
.etf-active-pill:hover { background: var(--green); color: var(--bg); border-color: var(--green); }
.etf-active-pill::after {
  content: "×"; display: inline-block; width: 16px; height: 16px;
  line-height: 14px; text-align: center; border-radius: 50%;
  background: rgba(30, 58, 47, .12); font-weight: 600;
  font-size: .9em;
}
.etf-active-pill:hover::after { background: rgba(255, 255, 255, .25); }
.etf-active-clear {
  font-size: .76rem; color: var(--muted); margin-left: 4px;
  text-decoration: underline;
}
.etf-active-clear:hover { color: var(--green); }

/* Loading state — used on the autocomplete and action buttons during async work. */
.etf-loading::after {
  content: ""; display: inline-block;
  width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: etf-spin .7s linear infinite;
  opacity: .7;
}
@keyframes etf-spin { to { transform: rotate(360deg); } }

/* Search input gets an aria-busy hint when fetching */
.etf-searchbar-input[aria-busy="true"] {
  background-image: linear-gradient(90deg,
    transparent 0%, rgba(30, 58, 47, .04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: etf-shimmer 1.1s linear infinite;
}
@keyframes etf-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Visible focus ring across every interactive element — keyboard a11y.
   Uses :focus-visible so mouse-clicks don't get the ring. */
.etf-action-btn:focus-visible,
.etf-row-star:focus-visible,
.etf-chip:focus-visible,
.etf-btn-primary:focus-visible,
.etf-btn-ghost:focus-visible,
.etf-card:focus-visible,
.etf-broker-card:focus-visible,
.etf-peer-card:focus-visible,
.etf-active-pill:focus-visible,
.etf-active-clear:focus-visible,
.etf-table a:focus-visible,
.wl-save:focus-visible,
.wl-remove:focus-visible,
.wl-input:focus-visible,
.pf-save:focus-visible,
.pf-remove:focus-visible,
.pf-submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced-motion preference — respect users who disable animations. */
@media (prefers-reduced-motion: reduce) {
  .etf-loading::after { animation: none; }
  .etf-searchbar-input[aria-busy="true"] { animation: none; background: var(--bg); }
  .etf-card:hover, .etf-peer-card:hover, .etf-broker-card:hover { transform: none; }
}

/* Custom 404 (iter 35) — branded "this page doesn't exist" with shortcut
   cards back to the main /etf sections. Replaces Flask's default white
   "Not Found" page so the user has a path back. */
.etf-not-found-actions {
  display: grid; gap: 14px; margin: 24px 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.etf-not-found-action {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.etf-not-found-action:hover {
  border-left-color: var(--green);
  transform: translateY(-2px);
}
.etf-not-found-action-label {
  display: block;
  font-family: var(--fd); font-weight: 500; font-size: 1.15rem;
  color: var(--green); margin-bottom: 6px;
}
.etf-not-found-action-meta {
  display: block;
  font-size: .88rem; color: var(--muted); line-height: 1.5;
}
.etf-not-found-fallback {
  margin-top: 28px; color: var(--muted); font-size: .9rem; line-height: 1.6;
}
.etf-not-found-fallback a {
  color: var(--green); border-bottom: 1px solid var(--gold);
}

/* Mobile touch targets (R2.9 — iter 34).
   The R2.9 audit flagged that 30-40% of interactive elements miss the
   44 × 44 px minimum recommended by Apple HIG and Material Design for
   touch surfaces. This block bumps every dense in-table action button +
   the star + the nav chips up to 44px on small screens.
   Inline padding rules in the per-template <style> blocks still apply,
   but min-height set here wins because there's no competing rule. */
@media (max-width: 768px) {
  /* Screener row "favourite" star — was ~28×30px */
  .etf-row-star {
    min-height: 44px;
    min-width:  44px;
    padding: 4px 12px;
    font-size: 1.2em;
  }

  /* Quick-filter chips above the screener — were ~30px tall */
  .etf-chip {
    min-height: 44px;
    padding: 11px 18px;
  }

  /* Watchlist + portfolio inline action buttons (Guardar / Remover /
     + Carteira). Bumped via min-height; the inline padding rules in
     each template still control horizontal sizing. */
  .wl-save, .wl-remove, .wl-promote,
  .pf-save, .pf-remove {
    min-height: 44px;
  }

  /* Inline editable inputs in the same rows — make them comfortable
     to tap (avoid a tiny tap target opening a soft keyboard awkwardly). */
  .wl-input, .pf-input {
    min-height: 44px;
    font-size: 16px;  /* ≥ 16px prevents iOS Safari auto-zoom on focus */
  }

  /* CSV-export bar button (iter 20/29 — shared on /carteira and /lista) */
  .etf-export-btn { min-height: 44px; padding: 11px 18px; }

  /* Compare-bar submit (iter 29 dedup) */
  .etf-compare-bar-btn { min-height: 44px; padding: 11px 20px; }

  /* Form-row submit buttons (calculator, screener, etc.) */
  .etf-filters button[type="submit"],
  .pf-submit {
    min-height: 44px;
    padding: 11px 18px;
  }

  /* Subtle pressed-state feedback for touch — desktop hover transitions
     don't fire on tap, so users get no visible confirmation otherwise. */
  .etf-row-star:active, .etf-chip:active,
  .wl-save:active, .wl-remove:active, .wl-promote:active,
  .pf-save:active, .pf-remove:active,
  .etf-export-btn:active, .etf-compare-bar-btn:active {
    opacity: .65;
  }
}

/* Print styles (iter 36) — strips chrome and interactive surfaces so a
   contabilista can print /carteira or /lista for IRS / audit records.
   Designed around the portfolio page (densest data); /lista, /comparar,
   /etf/<isin> profiles inherit the same skeleton (header/footer/search
   hidden, tables left intact). */
@media print {
  /* Generic utility — any element marked .no-print is dropped. Used by
     iter-43 calculator buttons (Recalcular / Copiar link / Guardar PDF)
     whose function vanishes on paper. Reusable on any future template. */
  .no-print { display: none !important; }

  /* Drop everything purely navigational — header, sub-nav, breadcrumbs,
     search bar, footer. The user has the page; navigation is moot. */
  header.gh,
  nav.gh-subnav,
  nav.etf-breadcrumbs,
  .etf-searchbar-wrap,
  footer.site-footer {
    display: none !important;
  }

  /* Drop interactive controls inside the data tables — Atualizar /
     Remover / + Carteira buttons, the iter-26 drift bar (visual cue
     that doesn't render usefully in greyscale print). */
  .pf-actions, .wl-actions,
  .pf-drift-bar,
  .etf-export-bar, .etf-compare-bar,
  [data-pf-form], .pf-add-card {
    display: none !important;
  }

  /* Inline editable inputs lose their input chrome — render the value
     as plain text so the printout reads cleanly. */
  .pf-input, .wl-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Black text on white background — saves toner; respects accessibility
     of paper output (printers' contrast is worse than screens'). */
  body, body.etf-body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  a[href]:after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  /* Don't print the URL after every link — only after meaningful ones.
     Skip mailto/tel and in-page anchors. */
  a[href^="#"]:after,
  a[href^="javascript:"]:after,
  a[href^="mailto:"]:after,
  a[href^="tel:"]:after { content: ""; }

  /* Tables: full-width, no hover effects, tighter padding so they fit
     on A4. Avoid splitting rows across pages. */
  table { width: 100% !important; border-collapse: collapse !important; }
  table th, table td { padding: 6px 8px !important; }
  table tr { page-break-inside: avoid; }
  thead { display: table-header-group; }  /* Repeat headers on each page */

  /* Section blocks shouldn't break across pages mid-headline */
  h1, h2, h3, .s-title { page-break-after: avoid; }
  .pf-rebalance-plan, .pf-tier-savings,
  .etf-art43-effect, .etf-englobamento, .etf-faq {
    page-break-inside: avoid;
  }

  /* Add a discreet print-time header so the paper trail is dated.
     Uses ::before on <main> so we don't have to touch templates. */
  main.etf-main::before {
    content: "ID — Investment Decisions · impressão";
    display: block;
    font-size: 10pt;
    color: #555;
    border-bottom: 1px solid #ccc;
    margin-bottom: 12pt;
    padding-bottom: 4pt;
  }
}



/* ── /calculadora-fiscal — Copiar link / Guardar PDF action buttons (B14) ── */
.calc-copy-link {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: .88em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.calc-copy-link:hover { color: var(--green); border-color: var(--green); }
.calc-copy-link.is-ok  { color: #2d6a4f; border-color: #2d6a4f; }
.calc-copy-link.is-err { color: #a23b3b; border-color: #a23b3b; }


/* ── /etf/lista (watchlist) — moved from inline <style> in watchlist.html (B14b) ── */
.wl-table-wrap{margin-top:24px;overflow-x:auto;background:#fff;border:1px solid #E5E0D8;border-radius:8px}
.wl-table{width:100%;border-collapse:collapse;font-family:'DM Sans',sans-serif;font-size:.92em}
.wl-table th,.wl-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #F0EBDF;vertical-align:middle}
/* A134: sticky thead — see .pf-table th comment for rationale. */
.wl-table th{font-size:.7em;letter-spacing:1.5px;text-transform:uppercase;color:#6e6354;font-weight:600;background:#FAFAF5;position:sticky;top:68px;z-index:2}
.wl-table tr:last-child td{border-bottom:none}
.wl-name{color:#1A1A1A;text-decoration:none;font-weight:500}
.wl-name:hover{color:#1E3A2F;text-decoration:underline}
.wl-meta{font-size:.78em;color:#8A8A8A;margin-top:2px}
.wl-isin{font-family:'JetBrains Mono','Courier New',monospace;font-size:.85em;color:#5b5346}
.wl-input{width:100%;font-family:inherit;font-size:.92em;padding:6px 8px;border:1px solid #E5E0D8;border-radius:4px;background:#FAFAF5;color:#1A1A1A}
.wl-input:focus{outline:none;border-color:#C9A84C;background:#fff}
.wl-thesis{min-width:160px}
.wl-actions{white-space:nowrap;text-align:right}
.wl-promote{display:inline-block;font-family:inherit;font-size:.78em;letter-spacing:1px;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:4px;border:1px solid #1E3A2F;color:#1E3A2F;text-decoration:none;background:transparent;margin-right:6px;transition:background .15s,color .15s}
.wl-promote:hover{background:#1E3A2F;color:#FAFAF5}
.wl-save,.wl-remove{font-family:inherit;font-size:.78em;letter-spacing:1px;text-transform:uppercase;
  font-weight:600;padding:6px 12px;border-radius:4px;border:1px solid transparent;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.wl-save{background:#1E3A2F;color:#FAFAF5;margin-right:6px}
.wl-save:hover{background:#2a5443}
.wl-save.is-ok{background:#2d6a4f}
.wl-save.is-err{background:#a23b3b}
.wl-remove{background:transparent;color:#a23b3b;border-color:#E5E0D8;font-size:1em;line-height:1;padding:6px 10px}
.wl-remove:hover{background:#fef0f0;border-color:#a23b3b}
.wl-empty{margin-top:32px;padding:32px;background:#fff;border:1px dashed #E5E0D8;border-radius:8px;text-align:center;color:#5b5346}
.wl-empty a{color:#1E3A2F;font-weight:500}
/* CSV-export bar styles consolidated into etf.css (.etf-export-bar) — iter 20. */


/* ── /etf/comparar — moved from inline <style> in compare.html (B14c) ── */
/* ─── Comparator-specific styling (brand-coherent) ─────────────── */
  .cmp-section { margin: 40px 0 28px; }
  .cmp-section-title {
    font-family: var(--fd); font-weight: 500; font-size: 1.5rem;
    color: var(--text); margin: 0 0 6px;
  }
  .cmp-section-sub {
    color: var(--muted); font-size: .9rem; margin: 0 0 18px;
  }

  /* Header row of ETFs being compared */
  .cmp-header-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 32px;
  }
  .cmp-header-card {
    background: var(--surface); border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: 6px; padding: 18px;
  }
  .cmp-header-ticker {
    font-family: var(--fd); font-weight: 600;
    font-size: 1.4rem; color: var(--green); letter-spacing: 1px;
  }
  .cmp-header-name {
    font-size: .95rem; color: var(--text); margin: 4px 0 8px;
    line-height: 1.3;
  }
  .cmp-header-isin {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: .72rem; color: var(--light);
    letter-spacing: 1px; text-transform: uppercase;
  }
  .cmp-header-flags {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
  }
  .cmp-flag {
    display: inline-block; padding: 3px 8px; border-radius: 3px;
    font-size: .68rem; letter-spacing: .8px; text-transform: uppercase;
    border: 1px solid var(--border); color: var(--muted);
    background: var(--surface-alt);
  }
  .cmp-flag-acumulador { background: rgba(30,58,47,0.10); color: var(--green); border-color: transparent; }
  .cmp-flag-distribuidor { background: rgba(201,168,76,0.18); color: #8a6f20; border-color: transparent; }
  .cmp-flag-ie { background: rgba(201,168,76,0.10); color: var(--gold-dim); border-color: transparent; }

  /* Wrapper for horizontal scroll on narrow viewports */
  .cmp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
  }

  /* Side-by-side data table */
  .cmp-table {
    width: 100%; border-collapse: collapse;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; overflow: hidden;
    font-variant-numeric: tabular-nums;
  }
  .cmp-table th, .cmp-table td {
    padding: 11px 14px; text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
  }
  .cmp-table thead th {
    background: var(--surface-alt); font-weight: 600;
    color: var(--text); font-size: .82rem;
    text-transform: uppercase; letter-spacing: .8px;
    /* A134: sticky thead — see .pf-table th comment for rationale. */
    position: sticky; top: 68px; z-index: 2;
  }
  .cmp-table tbody tr:last-child td { border-bottom: none; }
  .cmp-row-label {
    color: var(--muted); font-weight: 500;
    width: 200px; background: var(--surface-alt); border-right: 1px solid var(--border);
  }
  .cmp-cell { color: var(--text); }
  .cmp-cell-num { font-family: 'DM Sans', system-ui, sans-serif; }

  /* Ranking badges */
  .cmp-rank {
    display: inline-block; min-width: 22px; padding: 1px 6px;
    border-radius: 3px; font-size: .7rem; letter-spacing: .5px;
    margin-right: 6px; text-align: center; font-weight: 600;
  }
  .cmp-rank-best { background: rgba(30,58,47,0.18); color: var(--green); }
  .cmp-rank-worst { background: rgba(180,60,60,0.14); color: #b43c3c; }
  .cmp-rank-mid  { background: var(--surface-alt); color: var(--muted); }

  /* Tax section cards */
  .cmp-tax-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .cmp-tax-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 16px;
  }
  .cmp-tax-card-acumulador { border-left: 3px solid var(--green); }
  .cmp-tax-card-distribuidor { border-left: 3px solid var(--gold); }
  .cmp-tax-card h3 {
    font-family: var(--fd); font-weight: 500; font-size: 1.05rem;
    color: var(--text); margin: 0 0 8px;
  }
  .cmp-tax-card .ticker {
    font-size: .72rem; color: var(--gold-dim);
    letter-spacing: 1px; text-transform: uppercase; display: block;
    margin-bottom: 6px;
  }
  .cmp-tax-body { font-size: .88rem; color: var(--muted); line-height: 1.5; }
  .cmp-tax-domicile { margin-top: 10px; font-size: .82rem; color: var(--light); font-style: italic; }

  /* Verdict banner */
  .cmp-verdict {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 24px 26px;
    margin: 16px 0 32px;
  }
  .cmp-verdict-title {
    font-family: var(--fd); font-weight: 500; font-size: 1.3rem;
    color: var(--text); margin: 0 0 16px;
    border-bottom: 1px solid var(--border); padding-bottom: 12px;
  }
  .cmp-verdict-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .cmp-verdict-item .axis {
    font-size: .72rem; color: var(--gold-dim);
    letter-spacing: 1.2px; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .cmp-verdict-item .pick {
    font-family: var(--fd); font-weight: 500; font-size: 1.1rem;
    color: var(--green); margin-bottom: 4px;
  }
  .cmp-verdict-item .pick-name {
    font-size: .82rem; color: var(--muted); margin-bottom: 6px;
  }
  .cmp-verdict-item .reason {
    font-size: .82rem; color: var(--text); line-height: 1.4;
  }

  /* Picker form */
  .cmp-picker {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 16px; margin-bottom: 28px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  }
  .cmp-picker label { font-size: .72rem; color: var(--light); letter-spacing: 1px; text-transform: uppercase; }
  .cmp-picker select {
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg); color: var(--text); font-family: inherit; font-size: .88rem;
    min-width: 220px;
  }
  .cmp-picker button {
    padding: 9px 16px; border-radius: 4px; border: 1px solid var(--green);
    background: var(--green); color: var(--bg); font-weight: 500;
    cursor: pointer;
  }
  .cmp-picker button:hover { background: #14281f; }

  /* Overlap heading + composition meta — extracted from compare.html
     inline `style=""` attributes to keep all .cmp-* styling in this
     block (pinned by tests/etf/test_no_static_inline_styles_in_etf_templates.py). */
  .cmp-overlap-heading {
    font-family: var(--fd); font-weight: 500;
    font-size: 1.05rem; margin: 22px 0 8px;
  }
  .cmp-holdings-list { margin: 0; padding-left: 18px; font-size: .85rem; }
  .cmp-meta { color: var(--light); }

  /* Overlap pill */
  .cmp-overlap-pill {
    display: inline-block; padding: 4px 10px; border-radius: 12px;
    background: var(--surface-alt); color: var(--text); font-size: .82rem;
    border: 1px solid var(--border); margin: 4px 8px 4px 0;
  }
  .cmp-overlap-pill strong { color: var(--green); }

  .cmp-empty {
    background: var(--surface); border: 1px dashed var(--border);
    padding: 22px; border-radius: 6px; color: var(--muted);
    text-align: center;
  }


/* ── /etf/carteira (portfolio) — moved from inline <style> in portfolio.html (B14d) ── */
.pf-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:24px}
/* R2.10 #7: <dl>/<dt>/<dd> structure for the summary cards. Browsers
   default `<dd>` to margin-inline-start: 40px and `<dt>`/`<dd>` to
   `display: block`. Reset both inside .pf-summary so the cards keep
   their grid layout and the value/label visual stays identical. */
.pf-summary dt,.pf-summary dd{margin:0}
.pf-card{background:#fff;border:1px solid #E5E0D8;border-radius:8px;padding:16px}
.pf-card-strong{background:#FAFAF5;border-color:#C9A84C}
.pf-card-label{font-size:.7em;letter-spacing:1.5px;text-transform:uppercase;color:#6e6354;font-weight:600;margin-bottom:6px}
.pf-card-value{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6em;font-weight:500;color:#1A1A1A}
.pf-card-value.is-pos{color:#2d6a4f}
.pf-card-value.is-neg{color:#a23b3b}
.pf-warn,.pf-info{margin-top:18px;padding:12px 16px;border-radius:6px;font-size:.92em}
.pf-warn{background:#fff7e6;border:1px solid #f0d59a;color:#7a5a10}
.pf-info{background:#eef6f1;border:1px solid #c9dec9;color:#1E3A2F}
.pf-table-wrap{margin-top:18px;overflow-x:auto;background:#fff;border:1px solid #E5E0D8;border-radius:8px}
.pf-table{width:100%;border-collapse:collapse;font-family:'DM Sans',sans-serif;font-size:.9em}
.pf-table th,.pf-table td{padding:11px 12px;border-bottom:1px solid #F0EBDF;vertical-align:middle}
/* A134: sticky thead so column labels stay visible when scrolling
   through long portfolios. top:68px clears the chrome's sticky
   header (.gh @ top:0, ~60-68px tall). z-index above table body
   but below chrome (chrome z-index:100). Background is already
   opaque (#FAFAF5) so scrolling rows pass beneath cleanly. WCAG
   isn't directly relevant; this is Phase 0 item 0.7 (UX win). */
.pf-table th{font-size:.68em;letter-spacing:1.4px;text-transform:uppercase;color:#6e6354;font-weight:600;background:#FAFAF5;text-align:left;position:sticky;top:68px;z-index:2}
.pf-table tr:last-child td{border-bottom:none}
.pf-num{text-align:right;font-variant-numeric:tabular-nums}
.pf-name{color:#1A1A1A;text-decoration:none;font-weight:500}
.pf-name:hover{color:#1E3A2F;text-decoration:underline}
.pf-isin{font-family:'JetBrains Mono','Courier New',monospace;font-size:.82em;color:#5b5346}
.pf-ccy{font-family:'JetBrains Mono','Courier New',monospace;font-size:.82em;letter-spacing:.5px;color:#5b5346}
.pf-ccy.is-foreign{color:#7a5a10;background:#fff7e6;border:1px solid #f0d59a;border-radius:3px;padding:1px 6px;cursor:help}
.pf-native-est{font-size:.78em;color:#6e6354;font-variant-numeric:tabular-nums;margin-top:2px;letter-spacing:.3px}
.pf-warn-meta{display:block;margin-top:6px;color:#8a6a20;font-size:.85em}
.pf-tier{font-size:.85em;color:#5b5346;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}
.pf-tier-current{color:#6e6354}
.pf-tier-arrow{color:#C9A84C;margin:0 2px;font-weight:600}
.pf-tier-next{color:#1E3A2F;font-weight:600}
.pf-tier-eta{font-size:.82em;color:#8a8174;margin-top:2px;font-weight:400}
.pf-tier-max{color:#1E3A2F;font-weight:600}
.pf-tier-unknown{color:#a8a193}
.pf-tier-note{margin-top:10px;color:#6e6354;font-size:.85em;line-height:1.5}
/* Drift bar (iter 26): inline horizontal weight visualization. Fill = actual
   weight (0-100%); vertical marker = target weight. Tinted green when within
   the 5pp tolerance band, gold when outside. */
.pf-drift-bar{position:relative;height:6px;width:88px;margin:5px 0 0 auto;background:#F0EBDF;border-radius:3px;overflow:visible}
.pf-drift-bar-fill{height:100%;background:#2d6a4f;border-radius:3px;transition:width .25s ease}
.pf-drift-bar.is-drift .pf-drift-bar-fill{background:#C9A84C}
.pf-drift-bar-target{position:absolute;top:-2px;bottom:-2px;width:2px;background:#1A1A1A;transform:translateX(-1px);pointer-events:none}
/* CSV-export bar styles consolidated into etf.css (.etf-export-bar) — iter 20. */
/* Art. 43.º tier distribution — portfolio-wide bucketing card. Sits
   between the summary cards and the tier-savings callout so the user
   sees the WHERE before the SAVINGS prescription. */
.pf-tier-distribution{margin-top:18px;padding:16px 20px;background:#fff;border:1px solid #E5E0D8;border-radius:6px}
.pf-tier-distribution-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.3rem;color:#1E3A2F;margin:0 0 6px}
.pf-tier-distribution-lede{margin:0 0 14px;color:#5b5346;font-size:.92em;line-height:1.5}
.pf-tier-distribution-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.pf-tier-distribution-item{padding:14px 12px;background:#FAFAF5;border:1px solid #E5E0D8;border-radius:6px;text-align:center}
.pf-tier-distribution-item.is-active{background:#eef6f1;border-color:#c9dec9}
.pf-tier-distribution-item.is-max{background:#1E3A2F;border-color:#1E3A2F;color:#FAFAF5}
.pf-tier-distribution-pct{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6em;font-weight:500;color:#5b5346;line-height:1}
.pf-tier-distribution-item.is-active .pf-tier-distribution-pct{color:#1E3A2F}
.pf-tier-distribution-item.is-max .pf-tier-distribution-pct{color:#C9A84C}
.pf-tier-distribution-eur{font-family:'DM Sans',sans-serif;font-size:.96em;font-weight:600;color:#1A1A1A;margin-top:8px;font-variant-numeric:tabular-nums}
.pf-tier-distribution-item.is-max .pf-tier-distribution-eur{color:#FAFAF5}
.pf-tier-distribution-share{font-size:.78em;color:#6e6354;margin-top:4px}
.pf-tier-distribution-item.is-max .pf-tier-distribution-share{color:#FAFAF5;opacity:.85}

.pf-tier-savings{margin-top:18px;padding:14px 18px;background:#eef6f1;border:1px solid #c9dec9;border-left:3px solid #1E3A2F;border-radius:6px;color:#1E3A2F}
.pf-tier-savings-headline{font-size:.96em;line-height:1.5}
.pf-tier-savings-headline strong{color:#1E3A2F;font-weight:600}
.pf-tier-savings-meta{margin-top:8px;font-size:.85em;color:#5b5346;line-height:1.55;font-variant-numeric:tabular-nums}
.pf-tier-savings-meta strong{color:#1E3A2F}
/* Phase 0.8: drift bar chart — bird's-eye SVG above the rebalance plan. */
.pf-drift-chart{margin-top:18px;padding:16px 20px;background:#fff;border:1px solid #E5E0D8;border-radius:6px}
.pf-drift-chart-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.3rem;color:#1E3A2F;margin:0 0 12px}
.pf-drift-chart-svg{width:100%;height:auto;max-height:60vh;display:block}
.pf-drift-chart-axis{stroke:#B8B0A2;stroke-width:1;stroke-dasharray:2 3}
.pf-drift-chart-label{font-family:'DM Sans',system-ui,sans-serif;font-size:11px;fill:#5b5346;font-variant-numeric:tabular-nums}
.pf-drift-chart-bar{fill:#1E3A2F}
.pf-drift-chart-bar.is-drifted{fill:#C9A84C}
.pf-drift-chart-value{font-family:'DM Sans',system-ui,sans-serif;font-size:11px;fill:#5b5346;font-variant-numeric:tabular-nums}
.pf-drift-chart-value.is-drifted{fill:#8a6f20;font-weight:600}
.pf-drift-chart-lede{margin:10px 0 0;color:#5b5346;font-size:.85em;line-height:1.5}

/* Rebalancing plan (iter 31) — actionable EUR deltas for drifted positions. */
.pf-rebalance-plan{margin-top:18px;padding:16px 20px;background:#fff;border:1px solid #E5E0D8;border-left:3px solid #C9A84C;border-radius:6px}
.pf-rebalance-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.3rem;color:#1E3A2F;margin:0 0 6px}
.pf-rebalance-lede{margin:0 0 14px;color:#5b5346;font-size:.92em;line-height:1.5}
.pf-rebalance-list{list-style:none;margin:0;padding:0}
.pf-rebalance-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:10px 0;border-top:1px solid #F0EBDF}
.pf-rebalance-row:first-child{border-top:none}
.pf-rebalance-name{flex:1;min-width:240px;color:#1A1A1A;text-decoration:none;font-weight:500;font-size:.95em}
.pf-rebalance-name:hover{color:#1E3A2F;text-decoration:underline}
.pf-rebalance-action{font-family:'DM Sans',sans-serif;font-size:.92em;color:#5b5346;font-variant-numeric:tabular-nums}
.pf-rebalance-buy .pf-rebalance-action strong{color:#2d6a4f}
.pf-rebalance-sell .pf-rebalance-action strong{color:#a23b3b}
.pf-rebalance-meta{flex-basis:100%;color:#8a8174;font-size:.8em;font-variant-numeric:tabular-nums}
.pf-rebalance-disclaimer{margin-top:14px;color:#8a8174;font-size:.85em;line-height:1.5}
/* Broker cost preview (iter 39) — small table inside the rebalance plan
   showing the total commission at each modelled broker. Cheapest row
   gets a subtle gold tint + 'mais barato' badge. */
.pf-rebalance-broker-costs{margin-top:18px;padding:14px 0 0;border-top:1px dashed #E5E0D8}
.pf-rebalance-broker-title{font-family:'DM Sans',sans-serif;font-size:.92em;font-weight:600;color:#1E3A2F;margin:0 0 4px;letter-spacing:.3px}
.pf-rebalance-broker-lede{margin:0 0 10px;color:#6e6354;font-size:.85em;line-height:1.5}
.pf-rebalance-broker-list{list-style:none;margin:0;padding:0}
.pf-rebalance-broker-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;font-size:.92em}
.pf-rebalance-broker-row.is-cheapest{color:#1E3A2F;font-weight:500}
.pf-rebalance-broker-name a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.pf-rebalance-broker-name a:hover{border-bottom-color:#C9A84C}
.pf-rebalance-broker-badge{margin-left:8px;padding:2px 8px;background:#fbf6e8;color:#8a6a20;border:1px solid #ecdcae;border-radius:3px;font-size:.7em;text-transform:uppercase;letter-spacing:.6px}
.pf-rebalance-broker-cost{font-variant-numeric:tabular-nums;color:#5b5346}
.pf-rebalance-broker-cost small{color:#8a8174;margin-left:6px}
.pf-rebalance-broker-row.is-cheapest .pf-rebalance-broker-cost{color:#2d6a4f}
/* Tax-loss harvesting card (iter 37) — same skeleton as the rebalance
   plan, gold left-rail switched to muted-red to signal "loss territory". */
.pf-tlh-plan{margin-top:18px;padding:16px 20px;background:#fff;border:1px solid #E5E0D8;border-left:3px solid #a23b3b;border-radius:6px}
.pf-tlh-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.3rem;color:#1E3A2F;margin:0 0 6px}
.pf-tlh-lede{margin:0 0 14px;color:#5b5346;font-size:.92em;line-height:1.5}
.pf-tlh-lede strong{color:#1E3A2F}
.pf-tlh-list{list-style:none;margin:0;padding:0}
.pf-tlh-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:10px 0;border-top:1px solid #F0EBDF}
.pf-tlh-row:first-child{border-top:none}
.pf-tlh-name{flex:1;min-width:240px;color:#1A1A1A;text-decoration:none;font-weight:500;font-size:.95em}
.pf-tlh-name:hover{color:#1E3A2F;text-decoration:underline}
.pf-tlh-loss{font-family:'DM Sans',sans-serif;font-size:.92em;color:#5b5346;font-variant-numeric:tabular-nums}
.pf-tlh-loss strong{color:#a23b3b}
.pf-tlh-offset{font-family:'DM Sans',sans-serif;font-size:.92em;color:#5b5346;font-variant-numeric:tabular-nums}
.pf-tlh-offset strong{color:#2d6a4f}
.pf-tlh-meta{flex-basis:100%;color:#8a8174;font-size:.8em;font-variant-numeric:tabular-nums}
.pf-tlh-disclaimer{margin-top:14px;color:#8a8174;font-size:.85em;line-height:1.5}
.pf-input{width:90px;font-family:inherit;font-size:.92em;padding:5px 7px;border:1px solid #E5E0D8;border-radius:4px;background:#FAFAF5;text-align:right}
.pf-input:focus{outline:none;border-color:#C9A84C;background:#fff}
.is-pos{color:#2d6a4f;font-weight:500}
.is-neg{color:#a23b3b;font-weight:500}
.is-drift td{background:rgba(201,168,76,.06)}
.pf-actions{white-space:nowrap;text-align:right}
.pf-save,.pf-remove{font-family:inherit;font-size:.74em;letter-spacing:1px;text-transform:uppercase;
  font-weight:600;padding:5px 10px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s}
.pf-save{background:#1E3A2F;color:#FAFAF5;margin-right:5px}
.pf-save:hover{background:#2a5443}
.pf-remove{background:transparent;color:#a23b3b;border-color:#E5E0D8;font-size:1em;line-height:1;padding:5px 9px}
.pf-remove:hover{background:#fef0f0;border-color:#a23b3b}
.pf-empty{margin-top:32px;padding:32px;background:#fff;border:1px dashed #E5E0D8;border-radius:8px;text-align:center;color:#5b5346}
.pf-add-card{margin-top:24px;background:#fff;border:1px solid #E5E0D8;border-radius:8px;padding:22px}
.pf-add-prefill{margin:6px 0 14px;padding:10px 12px;background:#eef6f1;border:1px solid #c9dec9;border-left:3px solid #1E3A2F;border-radius:4px;color:#1E3A2F;font-size:.92em;line-height:1.5}
.pf-add-title{margin:0 0 16px;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3em;color:#1A1A1A}
.pf-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-items:end}
.pf-field{display:flex;flex-direction:column;gap:4px;font-family:'DM Sans',sans-serif}
.pf-field input{padding:9px 11px;border:1px solid #E5E0D8;border-radius:4px;background:#FAFAF5;font-size:.95em;font-family:inherit}
.pf-field input:focus{outline:none;border-color:#C9A84C;background:#fff}
.pf-label{font-size:.7em;letter-spacing:1.4px;text-transform:uppercase;color:#6e6354;font-weight:600}
.pf-label em{font-style:normal;color:#a8a193;font-weight:400;text-transform:none;letter-spacing:0}
.pf-submit{font-family:inherit;font-size:.78em;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
  background:#1E3A2F;color:#FAFAF5;border:none;padding:11px 22px;border-radius:4px;cursor:pointer;
  transition:background .15s;height:fit-content}
.pf-submit:hover{background:#2a5443}
.pf-form-msg{grid-column:1/-1;font-size:.88em;color:#6e6354}
.pf-form-msg.is-err{color:#a23b3b;font-weight:500}

/* Activity ledger feed (Phase 1.5 UI) — same visual language as the
   portfolio table but a leaner column set since each row is one
   transaction not a position aggregate. */
.acts-table-wrap{margin-top:18px;background:#fff;border:1px solid #E5E0D8;border-radius:8px;
  /* Phase 1.5 follow-up: sticky thead needs the wrap to be the scroll
     container so the inner-table header stays pinned. Bound at 75vh
     so the surrounding page still scrolls naturally. */
  max-height:75vh;overflow:auto;-webkit-overflow-scrolling:touch}
.acts-table{width:100%;border-collapse:collapse;font-family:'DM Sans',sans-serif;font-size:.9em}
.acts-table th,.acts-table td{padding:11px 12px;border-bottom:1px solid #F0EBDF;vertical-align:middle}
/* A134: sticky thead — see .pf-table th comment for rationale. */
.acts-table th{font-size:.68em;letter-spacing:1.4px;text-transform:uppercase;color:#6e6354;font-weight:600;background:#FAFAF5;text-align:left;position:sticky;top:68px;z-index:2;
  /* Sticky header — same pattern as the screener's .etf-table. */
  position:sticky;top:0;z-index:2}
.acts-table tr:last-child td{border-bottom:none}
/* Sortable column headers — clickable label + arrow indicator on the
   currently-sorted column. Mirrors the .etf-th-sort family from the
   screener (Phase 0.7). */
.acts-table thead th .acts-th-sort{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;cursor:pointer}
.acts-table thead th .acts-th-sort:hover{color:#1A1A1A;text-decoration:none}
.acts-table thead th.is-sorted{color:#1A1A1A}
.acts-table thead th .acts-sort-arrow{font-size:.85em;line-height:1}
.acts-num{text-align:right;font-variant-numeric:tabular-nums}
.acts-actions{text-align:right;width:42px}
.acts-date{font-variant-numeric:tabular-nums;color:#5b5346}
.acts-name{color:#1A1A1A;text-decoration:none;font-weight:500}
.acts-name:hover{color:#1E3A2F;text-decoration:underline}
.acts-isin{font-family:'JetBrains Mono','Courier New',monospace;font-size:.82em;color:#5b5346}
.acts-cash,.acts-internal{color:#a8a193}
/* Type pills — colour by activity intent. Buy outflows green-tinted
   (acquiring an asset is a positive long-term action), sell red-tinted
   (realising), dividends gold (income). */
.acts-pill{display:inline-block;padding:3px 9px;border-radius:11px;font-size:.7em;font-weight:600;letter-spacing:.6px;text-transform:uppercase}
.acts-pill-buy{background:#eef6f1;color:#1E3A2F}
.acts-pill-sell{background:#fbe9e9;color:#a23b3b}
.acts-pill-dividend,.acts-pill-dividend_reinvest{background:#fff4d6;color:#7a5a10}
.acts-pill-interest{background:#fff4d6;color:#7a5a10}
.acts-pill-fee{background:#f0ece4;color:#5b5346}
.acts-pill-split,.acts-pill-spin_off,.acts-pill-return_of_capital{background:#eaeaf6;color:#3a3a72}
.acts-delete-btn,.acts-edit-btn{font-family:inherit;font-size:1.1em;line-height:1;background:transparent;color:#a8a193;
  border:1px solid #E5E0D8;border-radius:4px;width:30px;height:30px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;margin-left:4px}
.acts-edit-btn:hover:not([disabled]){color:#1E3A2F;border-color:#1E3A2F;background:#eef6f1}
.acts-delete-btn:hover:not([disabled]){color:#a23b3b;border-color:#a23b3b;background:#fbe9e9}
.acts-delete-btn[disabled],.acts-edit-btn[disabled]{opacity:.4;cursor:not-allowed}
.acts-actions{white-space:nowrap;width:auto}
/* Per-row holding age + Art. 43.º exclusion tier (Phase 1.5 follow-up) */
.acts-tier{font-size:.85em;line-height:1.4;color:#5b5346;white-space:nowrap}
.acts-tier-age{display:inline-block;font-variant-numeric:tabular-nums;color:#1A1A1A;margin-right:6px}
.acts-tier-pct{display:inline-block;padding:1px 7px;border-radius:10px;background:#f0ece4;color:#6e6354;font-weight:600;font-size:.78em}
.acts-tier-pct.is-active{background:#eef6f1;color:#1E3A2F}
.acts-tier-next{display:block;color:#a8a193;font-size:.85em;margin-top:2px}
.acts-tier-max{display:block;color:#1E3A2F;font-size:.85em;margin-top:2px;font-weight:500}
.acts-empty{margin-top:24px;padding:22px;background:#fff;border:1px dashed #E5E0D8;border-radius:8px;color:#5b5346;line-height:1.6}
.acts-empty p{margin:0 0 10px}
.acts-empty p:last-child{margin-bottom:0}
.acts-empty code{background:#FAFAF5;padding:2px 6px;border-radius:3px;font-size:.88em;color:#1E3A2F}
/* Manual-entry form — same visual language as the portfolio add-card so
   the two carteira-area pages feel consistent. */
.acts-add-card{margin-top:24px;background:#fff;border:1px solid #E5E0D8;border-radius:8px;padding:22px}
.acts-add-title{margin:0 0 16px;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3em;color:#1A1A1A}
.acts-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-items:end}
.acts-field{display:flex;flex-direction:column;gap:4px;font-family:'DM Sans',sans-serif}
.acts-field input,.acts-field select{padding:9px 11px;border:1px solid #E5E0D8;border-radius:4px;background:#FAFAF5;font-size:.95em;font-family:inherit}
.acts-field input:focus,.acts-field select:focus{outline:none;border-color:#C9A84C;background:#fff}
.acts-label{font-size:.7em;letter-spacing:1.4px;text-transform:uppercase;color:#6e6354;font-weight:600}
.acts-label em{font-style:normal;color:#a8a193;font-weight:400;text-transform:none;letter-spacing:0}
.acts-submit{font-family:inherit;font-size:.78em;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
  background:#1E3A2F;color:#FAFAF5;border:none;padding:11px 22px;border-radius:4px;cursor:pointer;
  transition:background .15s;height:fit-content}
.acts-submit:hover:not([disabled]){background:#2a5443}
.acts-submit[disabled]{opacity:.6;cursor:not-allowed}
.acts-cancel{font-family:inherit;font-size:.78em;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
  background:transparent;color:#5b5346;border:1px solid #E5E0D8;padding:11px 22px;border-radius:4px;cursor:pointer;
  transition:background .15s,color .15s;margin-left:8px;height:fit-content}
.acts-cancel:hover{background:#f0ece4;color:#1A1A1A}
.acts-form-msg{grid-column:1/-1;font-size:.88em;color:#6e6354}
.acts-form-msg.is-err{color:#a23b3b;font-weight:500}
/* Per-row delete-feedback flash. Mirrors .acts-form-msg's error styling
   but lives above the table (not inside the form grid). Hidden via the
   `hidden` HTML attribute by default; JS un-hides on error and re-hides
   after 3s. R2.8 #15-adjacent — replaces the pre-iter native alert(). */
.acts-row-msg{margin:8px 0 4px;padding:8px 12px;font-size:.9em;
  background:rgba(162,59,59,0.06);border:1px solid rgba(162,59,59,0.18);
  border-radius:4px;color:#a23b3b;font-weight:500}
/* CSV import card (Phase 3 of 3) — sits below the manual-entry form,
   shares the .acts-add-card visual chrome. */
.acts-import-card{margin-top:24px;background:#fff;border:1px solid #E5E0D8;border-radius:8px;padding:22px}
.acts-import-lede{margin:0 0 16px;color:#5b5346;font-size:.92em;line-height:1.5}
.acts-import-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
.acts-import-row input[type="file"]{flex:1;min-width:200px;font-family:'DM Sans',sans-serif;font-size:.92em;
  padding:8px;border:1px dashed #E5E0D8;border-radius:4px;background:#FAFAF5}
.acts-import-preview{margin-top:14px;padding:14px;background:#FAFAF5;border:1px solid #E5E0D8;border-radius:6px}
.acts-import-summary{margin:0 0 10px;font-weight:500;color:#1A1A1A}
.acts-import-errors{margin:0 0 14px;padding-left:20px;color:#a23b3b;font-size:.88em;line-height:1.55;max-height:200px;overflow-y:auto}
.acts-import-errors:empty{display:none}
/* A74: raw CSV cells under each error line — neutral grey + monospace
   so the user reads it as "what you typed" metadata, not as part of
   the red error message itself. */
.acts-import-row-cells{margin-top:2px;font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;font-size:.84em;color:#6B6B6B;word-break:break-all;line-height:1.45}

/* Shared confirm dialog (R2.8 #15) — replaces native browser confirm()
   on watchlist + portfolio + activities remove handlers. <dialog> +
   showModal() supplies the focus trap, Escape-to-cancel, and modal
   backdrop natively; we just style it. */
.etf-confirm-dialog {
  /* Reset the user-agent dialog reset to nothing (we control it). */
  padding: 0; border: 0; background: transparent;
  /* Card sizing — fits comfortably on phone + desktop. */
  max-width: 420px; width: calc(100% - 32px);
  /* The dialog content itself is restyled below; this is the
     positioning shell. */
}
.etf-confirm-dialog::backdrop {
  background: rgba(26, 26, 26, .55);
}
.etf-confirm-dialog[open] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  color: var(--text);
}
.etf-confirm-title {
  font-family: var(--fd);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text);
  margin: 0 0 8px;
}
.etf-confirm-title[hidden] { display: none; }
.etf-confirm-body {
  margin: 0 0 18px;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.45;
}
.etf-confirm-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
}
.etf-confirm-cancel,
.etf-confirm-ok {
  padding: 9px 16px;
  border-radius: 4px;
  font-family: var(--fb);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}
.etf-confirm-cancel {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.etf-confirm-cancel:hover { background: var(--surface-alt); }
.etf-confirm-ok {
  background: #a23b3b;  /* destructive — same red used on .pf-card-value.is-neg */
  color: var(--bg);
}
.etf-confirm-ok:hover { background: #862e2e; }
.etf-confirm-cancel:focus-visible,
.etf-confirm-ok:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .etf-confirm-dialog[open] { transition: none; }
}