/* ================================================================== */
/* ax-design.css — AssetNext Design System                            */
/*                                                                    */
/* Single source of truth for the new design language.                */
/* Namespace: .ax-*  (no collisions with legacy .card / .chip / etc.) */
/*                                                                    */
/* Used by: templates/app/basket_index.html (Phase 3 pilot)           */
/* Will grow organically as further pages are migrated.               */
/* ================================================================== */


/* ── Tokens ──────────────────────────────────────────────────────── */

:root {
  /* Palette — locked per Phase 2 spec */
  --ax-black:        #11100E;
  --ax-charcoal:     #1A1816;
  --ax-graphite:     #26231F;
  --ax-gold:         #BD9F6D;
  --ax-gold-soft:    #D7C39A;
  --ax-bg:           #F4F1EC;
  --ax-bg-soft:      #FAF8F4;
  --ax-panel:        #FFFFFF;
  --ax-panel-warm:   #FBF8F2;
  --ax-border:       #E4DED3;
  --ax-border-strong:#C8B99E;
  --ax-text:         #111111;
  --ax-muted:        #6F6A61;
  --ax-soft:         #9A948A;

  /* Signal colors — used sparingly, never as primary surface */
  --ax-positive:     #2F6F4A;
  --ax-negative:     #9A3B3B;
  --ax-info:         #3B5F8A;

  /* Typography scale — locked per Phase 2 spec */
  --ax-fs-page-title:    34px;
  --ax-fs-page-subtitle: 17px;
  --ax-fs-section-title: 22px;
  --ax-fs-card-title:    17px;
  --ax-fs-body:          15.5px;
  --ax-fs-table:         14px;
  --ax-fs-label:         11.5px;
  --ax-fs-kpi-sm:        24px;
  --ax-fs-kpi-md:        32px;
  --ax-fs-kpi-lg:        44px;

  --ax-lh-tight:  1.15;
  --ax-lh-normal: 1.5;
  --ax-lh-prose:  1.6;

  /* Font stack — Inter as committed; fallbacks robust */
  --ax-font-sans:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;

  --ax-font-mono:
    "JetBrains Mono",
    "IBM Plex Mono",
    ui-monospace,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;

  /* Spacing scale — based on 4px grid */
  --ax-sp-1:  4px;
  --ax-sp-2:  8px;
  --ax-sp-3:  12px;
  --ax-sp-4:  16px;
  --ax-sp-5:  20px;
  --ax-sp-6:  24px;
  --ax-sp-8:  32px;
  --ax-sp-10: 40px;
  --ax-sp-12: 48px;
  --ax-sp-16: 64px;
  --ax-sp-20: 80px;

  /* Radii — workshop precision, not pillow-soft */
  --ax-r-sm: 2px;
  --ax-r-md: 4px;
  --ax-r-lg: 6px;

  /* Lines */
  --ax-line: 1px solid var(--ax-border);
  --ax-line-strong: 1px solid var(--ax-border-strong);
  --ax-line-black:  1px solid var(--ax-black);

  /* Shadows — flat by default; one tier of elevation for hero */
  --ax-shadow-hero:
    0 1px 0 var(--ax-border),
    0 12px 32px -16px rgba(17, 16, 14, 0.18);

  /* Motion — restrained */
  --ax-ease: cubic-bezier(0.2, 0, 0, 1);
  --ax-dur-fast: 120ms;
  --ax-dur:      180ms;
}


/* ── Base — scoped reset, only inside .ax-page ───────────────────── */
/* We do NOT touch global body. Legacy pages keep their own resets.   */

.ax-page,
.ax-page * {
  box-sizing: border-box;
}

.ax-page {
  font-family: var(--ax-font-sans);
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-normal);
  color: var(--ax-text);
  background: var(--ax-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Tabular figures everywhere by default — numbers align, this is workshop. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

.ax-page a {
  color: inherit;
  text-decoration: none;
}

.ax-page h1,
.ax-page h2,
.ax-page h3,
.ax-page h4,
.ax-page p {
  margin: 0;
}


/* ── Layout shell ────────────────────────────────────────────────── */

.ax-page-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--ax-sp-10) var(--ax-sp-8) var(--ax-sp-16);
}

.ax-section {
  margin-top: var(--ax-sp-10);
}

.ax-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ax-sp-6);
  margin-bottom: var(--ax-sp-5);
  padding-bottom: var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border-strong);
}

.ax-section-title {
  font-size: var(--ax-fs-section-title);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ax-black);
  /* Small gold tick to the left, integrated with the title */
  padding-left: var(--ax-sp-3);
  border-left: 2px solid var(--ax-gold);
  line-height: 1.1;
}

.ax-section-meta {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
}


/* ── Hero ────────────────────────────────────────────────────────── */

.ax-page-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ax-sp-4);
  padding: var(--ax-sp-2) 0 var(--ax-sp-8);
}

.ax-hero-eyebrow {
  font-size: var(--ax-fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ax-gold);
  /* Gold-tick on the left — workshop signal */
  padding-left: var(--ax-sp-3);
  border-left: 2px solid var(--ax-gold);
}

.ax-hero-headline {
  font-size: var(--ax-fs-page-title);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: var(--ax-lh-tight);
  color: var(--ax-black);
  max-width: 22ch;
}

.ax-hero-subline {
  font-size: var(--ax-fs-page-subtitle);
  line-height: var(--ax-lh-prose);
  color: var(--ax-muted);
  max-width: 64ch;
  margin-top: var(--ax-sp-1);
}


/* ── Diagnostic panel ────────────────────────────────────────────── */
/* Quiet rule-of-the-house statement: what this page does, in plain  */
/* prose. Not a card, not decorative — a thin annotated rule.        */

.ax-diagnostic-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ax-sp-5);
  align-items: start;
  padding: var(--ax-sp-5) 0 var(--ax-sp-2);
  border-top: var(--ax-line);
}

.ax-diagnostic-meta {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ax-soft);
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 3px;
}

.ax-diagnostic-copy {
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-prose);
  color: var(--ax-graphite);
  max-width: 68ch;
}

.ax-diagnostic-copy strong {
  color: var(--ax-black);
  font-weight: 600;
}


/* ── Cards: generic ──────────────────────────────────────────────── */

.ax-card {
  display: flex;
  flex-direction: column;
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-5) var(--ax-sp-5) var(--ax-sp-4);
  transition:
    border-color var(--ax-dur) var(--ax-ease),
    background-color var(--ax-dur) var(--ax-ease);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.ax-card:hover {
  border-color: var(--ax-border-strong);
  background: var(--ax-panel-warm);
}

/* Gold accent line on hover — slides in from the left edge */
.ax-card::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--ax-gold);
  opacity: 0;
  transition: opacity var(--ax-dur) var(--ax-ease);
  border-radius: var(--ax-r-md) 0 0 var(--ax-r-md);
}
.ax-card:hover::before { opacity: 1; }


/* ── Card: hero variant (the lead ETF on top) ────────────────────── */

.ax-card-hero {
  background: var(--ax-panel);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-lg);
  padding: var(--ax-sp-8);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--ax-sp-10);
  box-shadow: var(--ax-shadow-hero);
  position: relative;
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--ax-dur) var(--ax-ease),
    box-shadow var(--ax-dur) var(--ax-ease);
}

.ax-card-hero:hover {
  border-color: var(--ax-graphite);
}

/* Workshop tick on the hero card — top-left corner.
   Slightly wider so it carries presence as a design anchor.  */
.ax-card-hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: var(--ax-sp-10);
  height: 3px;
  background: var(--ax-gold);
  border-radius: var(--ax-r-lg) 0 0 0;
}

@media (max-width: 880px) {
  .ax-card-hero {
    grid-template-columns: 1fr;
    gap: var(--ax-sp-6);
    padding: var(--ax-sp-6);
  }
}


/* ── Card anatomy ────────────────────────────────────────────────── */

.ax-card-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-sp-3);
  margin-bottom: var(--ax-sp-4);
}

.ax-card-title {
  font-size: var(--ax-fs-card-title);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: var(--ax-lh-tight);
  color: var(--ax-black);
  margin: 0;
}

.ax-card-hero .ax-card-title {
  font-size: 26px;
  letter-spacing: -0.012em;
}

.ax-card-source {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  color: var(--ax-soft);
  letter-spacing: 0.02em;
  margin-top: var(--ax-sp-1);
}


/* ── Mode indicator — monochrome, classification not status ──────── */

.ax-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  font-size: var(--ax-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  line-height: 1;
}

.ax-mode::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.ax-mode--full        { color: var(--ax-black); }
.ax-mode--full::before { background: var(--ax-black); border-color: var(--ax-black); }

.ax-mode--core        { color: var(--ax-gold); }
.ax-mode--core::before { background: var(--ax-gold); border-color: var(--ax-gold); }

.ax-mode--structure        { color: var(--ax-soft); }
.ax-mode--structure::before { background: transparent; }


/* ── Asof badge — minimal monospaced timestamp ───────────────────── */

.ax-asof {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  color: var(--ax-soft);
  letter-spacing: 0.02em;
}


/* ── KPI block ───────────────────────────────────────────────────── */

.ax-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ax-sp-6);
  margin-top: var(--ax-sp-4);
  padding-top: var(--ax-sp-4);
  border-top: var(--ax-line);
}

.ax-kpi-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ax-sp-10);
}

/* On narrow hero columns, drop the third KPI under the others
   rather than squeezing them. */
@media (max-width: 1024px) {
  .ax-card-hero .ax-kpi-row--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--ax-sp-5);
  }
}

.ax-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-1);
}

.ax-kpi-label {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  /* Allow wrap when 3 KPIs share a narrow column; keeps long labels readable. */
  line-height: 1.25;
  word-break: keep-all;
  hyphens: auto;
}

.ax-kpi-value {
  font-size: var(--ax-fs-kpi-sm);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
}

.ax-kpi-value--lg { font-size: var(--ax-fs-kpi-md); }


/* ── Sector bar — the visual signature of each basket ────────────── */
/* A horizontal stripe of weighted segments. Workshop measuring tape.  */
/* Gaps between segments (not borders); top sector gets a gold rule.   */

.ax-sector-bar {
  margin-top: var(--ax-sp-5);
  padding-top: var(--ax-sp-4);
  border-top: var(--ax-line);
}

.ax-sector-bar-label {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  margin-bottom: var(--ax-sp-3);
}

.ax-sector-bar-track {
  display: flex;
  height: 10px;
  background: transparent;
  gap: 3px;
  position: relative;
}

.ax-sector-bar-seg {
  height: 100%;
  position: relative;
  min-width: 3px;
}

/* Sector colors — earthy material palette keyed by sector identity.
   Same sector = same color across all baskets, so the eye learns the
   signature across the gallery. All hues sit at similar saturation
   so no single sector dominates visually. */

.ax-sector--tech        { background: #2D3F5E; }  /* Information Technology — steel blue */
.ax-sector--financials  { background: #4F5B3E; }  /* Financials — olive */
.ax-sector--health      { background: #6E3F3F; }  /* Health Care — chestnut */
.ax-sector--discretion  { background: #8A5A2B; }  /* Consumer Discretionary — sienna */
.ax-sector--staples     { background: #7C6E3F; }  /* Consumer Staples — bronze */
.ax-sector--industrials { background: #3A3A36; }  /* Industrials — anthracite */
.ax-sector--energy      { background: #5C3A24; }  /* Energy — deep copper */
.ax-sector--materials   { background: #6A4F3A; }  /* Materials — clay */
.ax-sector--comm        { background: #4A5A6E; }  /* Communication — slate */
.ax-sector--utilities   { background: #3D5B57; }  /* Utilities — verdigris */
.ax-sector--realestate  { background: #6B5236; }  /* Real Estate — mahogany */
.ax-sector--unknown     { background: #5C564C; }  /* Fallback for unmapped sectors */

.ax-sector-bar-seg--other {
  background: #C8BDA8;
  border: 1px solid var(--ax-border-strong);
  border-radius: 1px;
}

/* Gold underline on the dominant sector (first segment) — the workshop accent.
   Position-based on purpose: highlights "the lead of THIS basket", regardless
   of which sector it happens to be. */
.ax-sector-bar-seg--lead::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--ax-gold);
}

.ax-sector-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-3) var(--ax-sp-5);
  margin-top: var(--ax-sp-4);
  font-size: 12.5px;
  color: var(--ax-graphite);
}

.ax-sector-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  white-space: nowrap;
}

/* Square dot — sharper, more workshop than the previous round one */
.ax-sector-legend-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 0;
}

.ax-sector-legend-name {
  color: var(--ax-graphite);
  font-weight: 500;
}

.ax-sector-legend-weight {
  color: var(--ax-soft);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin-left: 1px;
}


/* ── Top-holdings list (hero card only) ──────────────────────────── */

.ax-holdings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ax-holdings-list-title {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  margin-bottom: var(--ax-sp-3);
  padding-bottom: var(--ax-sp-2);
  border-bottom: var(--ax-line);
}

.ax-holdings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--ax-sp-4);
  padding: var(--ax-sp-2) 0;
  border-bottom: 1px dashed var(--ax-border);
  font-size: var(--ax-fs-table);
}

.ax-holdings-row:last-child { border-bottom: 0; }

.ax-holdings-name {
  color: var(--ax-black);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ax-holdings-ticker {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  color: var(--ax-soft);
  margin-left: var(--ax-sp-2);
}

.ax-holdings-weight {
  font-variant-numeric: tabular-nums;
  color: var(--ax-graphite);
  font-weight: 500;
}


/* ── Structural note (diagnostic sentence, defensively rendered) ── */
/* Appears only when routes_basket.py provides b.structural_note.   */
/* Reads as a brief diagnosis below the sector signature.           */

.ax-structural-note {
  margin-top: var(--ax-sp-5);
  padding: var(--ax-sp-3) var(--ax-sp-4);
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
  background: var(--ax-bg-soft);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
}


/* ── CTA: arrow link ─────────────────────────────────────────────── */
/* A workshop action — bordered, anchored, visibly a button-like cue. */
/* Not pillowy SaaS; not invisible link. Reads as "action available."  */

.ax-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  font-size: var(--ax-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ax-black);
  padding: var(--ax-sp-2) var(--ax-sp-4);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  background: transparent;
  align-self: flex-start;
  transition:
    border-color var(--ax-dur) var(--ax-ease),
    background-color var(--ax-dur) var(--ax-ease),
    color var(--ax-dur) var(--ax-ease);
}

/* When used as a follow-on CTA (hero card, basket profile),
   the link sits beneath other content and needs vertical breathing room. */
.ax-card-hero .ax-link-arrow,
.ax-card .ax-link-arrow {
  margin-top: var(--ax-sp-5);
}

/* When used as a quieter secondary link (e.g. card-section heads),
   make it leaner: no heavy border, just text + arrow. */
.ax-link-arrow--quiet {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ax-graphite);
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding-bottom: 2px;
}

.ax-link-arrow--quiet:hover {
  color: var(--ax-black);
  border-bottom-color: var(--ax-gold);
  background: transparent;
}

.ax-link-arrow svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--ax-dur) var(--ax-ease);
}

.ax-card:hover .ax-link-arrow,
.ax-card-hero:hover .ax-link-arrow {
  border-color: var(--ax-black);
  background: var(--ax-black);
  color: var(--ax-bg-soft);
}

.ax-card:hover .ax-link-arrow--quiet {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--ax-gold);
  color: var(--ax-black);
}

.ax-card:hover .ax-link-arrow svg,
.ax-card-hero:hover .ax-link-arrow svg {
  transform: translateX(3px);
}


/* ── Grid of secondary cards ─────────────────────────────────────── */

.ax-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ax-sp-4);
  margin-top: var(--ax-sp-5);
}


/* ── Empty state ─────────────────────────────────────────────────── */

.ax-empty {
  padding: var(--ax-sp-16) var(--ax-sp-6);
  text-align: center;
  color: var(--ax-muted);
  font-size: var(--ax-fs-body);
  border: 1px dashed var(--ax-border);
  border-radius: var(--ax-r-md);
  background: var(--ax-bg-soft);
}


/* ════════════════════════════════════════════════════════════════════ */
/* basket_profile.html — single-basket diagnostic page                  */
/* Added Phase-3 #2 migration. Reuses .ax-page, .ax-section, .ax-card,  */
/* .ax-mode--*, .ax-sector--* from above.                               */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Back link (top of page) ─────────────────────────────────────── */

.ax-backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  text-decoration: none;
  margin-bottom: var(--ax-sp-6);
  transition: color var(--ax-dur) var(--ax-ease);
}

.ax-backlink::before {
  content: "←";
  font-size: 16px;
  line-height: 1;
}

.ax-backlink:hover { color: var(--ax-black); }


/* ── Profile header (title + mode badge + meta row) ──────────────── */

.ax-profile-header {
  margin-bottom: var(--ax-sp-8);
  padding-bottom: var(--ax-sp-5);
  border-bottom: var(--ax-line);
}

.ax-profile-titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ax-sp-4);
  margin-bottom: var(--ax-sp-4);
}

.ax-profile-title {
  font-size: var(--ax-fs-page-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--ax-lh-tight);
  color: var(--ax-black);
  margin: 0;
}

.ax-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-6);
  font-size: var(--ax-fs-body);
  color: var(--ax-muted);
}

.ax-profile-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ax-sp-2);
}

.ax-profile-meta-label {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-soft);
}

.ax-profile-meta-value {
  color: var(--ax-graphite);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}


/* ── Section blocks (Coverage, Dimensions, Structure) ────────────── */

.ax-block {
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-6) var(--ax-sp-6);
  margin-bottom: var(--ax-sp-5);
}

.ax-block-title {
  font-size: var(--ax-fs-section-title);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ax-black);
  margin: 0 0 var(--ax-sp-5);
  padding-bottom: var(--ax-sp-3);
  border-bottom: var(--ax-line);
}


/* ── Coverage bar — same vocabulary as sector bar ────────────────── */
/* Two classes only: scoreable core (charcoal) + outside universe   */
/* (warm beige). No invented intermediate states.                   */

.ax-coverage {
  margin-top: var(--ax-sp-2);
}

.ax-coverage-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ax-sp-8);
  margin-bottom: var(--ax-sp-5);
}

.ax-coverage-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-1);
}

.ax-coverage-stat-label {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  line-height: 1.25;
}

.ax-coverage-stat-value {
  font-size: var(--ax-fs-kpi-sm);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
}

.ax-coverage-stat-value--muted { color: var(--ax-soft); }

.ax-coverage-bar {
  display: flex;
  height: 10px;
  gap: 3px;
  margin-top: var(--ax-sp-2);
  margin-bottom: var(--ax-sp-4);
  position: relative;
}

.ax-coverage-seg {
  height: 100%;
  position: relative;
  min-width: 3px;
}

.ax-coverage-seg--scoreable { background: var(--ax-charcoal); }

/* Gold underline on scoreable segment — same accent vocabulary as
   the sector bar's --lead. Says: this is what AssetNext can read. */
.ax-coverage-seg--scoreable::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--ax-gold);
}

.ax-coverage-seg--outside {
  background: #C8BDA8;
  border: 1px solid var(--ax-border-strong);
  border-radius: 1px;
}

.ax-coverage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-3) var(--ax-sp-5);
  margin-top: var(--ax-sp-3);
  font-size: 12.5px;
  color: var(--ax-graphite);
}

.ax-coverage-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  white-space: nowrap;
}

.ax-coverage-legend-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.ax-coverage-legend-dot--scoreable { background: var(--ax-charcoal); }
.ax-coverage-legend-dot--outside {
  background: #C8BDA8;
  border: 1px solid var(--ax-border-strong);
}

.ax-coverage-hint {
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-prose);
  color: var(--ax-graphite);
  margin: var(--ax-sp-5) 0 0;
  padding-top: var(--ax-sp-4);
  border-top: var(--ax-line);
}


/* ── Dimensions scales — workshop calipers ───────────────────────── */
/* Each dimension is a horizontal scale 0–100 with tick marks and a  */
/* needle showing where this basket sits. Number stays large, scale  */
/* is integrated alongside as one unit — not an attached ruler.      */

.ax-dim-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ax-sp-2);
}

.ax-dim {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(260px, 360px);
  align-items: center;
  gap: var(--ax-sp-3);
  padding: var(--ax-sp-5) 0;
  border-bottom: var(--ax-line);
}
.ax-dim:last-child { border-bottom: 0; }

.ax-dim-name {
  font-size: var(--ax-fs-card-title);
  font-weight: 600;
  color: var(--ax-black);
  letter-spacing: -0.005em;
}

.ax-dim-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding-right: var(--ax-sp-1);
  /* Reserve consistent vertical space so rows with/without band labels
     keep the score perfectly aligned with the scale needle.            */
  min-height: 38px;
}

.ax-dim-value {
  font-size: var(--ax-fs-kpi-md);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
}

.ax-dim-value-suffix {
  font-size: 0.45em;
  color: var(--ax-soft);
  margin-left: 2px;
  vertical-align: 0.4em;
  font-weight: 500;
}

/* The diagnostic line — short, descriptive label of scale position.
   NOT a peer comparison, NOT a recommendation. Just position.       */
.ax-dim-band {
  font-size: 12px;
  color: var(--ax-muted);
  letter-spacing: 0.01em;
  font-weight: 500;
  white-space: nowrap;
}

/* The scale: a workshop measurement instrument, not a form control.
   Track is solid charcoal-graphite; ticks are real notches; marker  */
/* is a needle with a small charcoal head.                           */
.ax-dim-scale {
  position: relative;
  height: 34px;
  padding: 2px 1px 0;
}

/* Subtle neutral band 40–60: the middle zone of the instrument */
.ax-dim-scale::before {
  content: "";
  position: absolute;
  left: 40%;
  right: 40%;
  top: 14px;
  height: 5px;
  background: var(--ax-bg-soft);
  z-index: 0;
}

.ax-dim-scale-track {
  position: absolute;
  left: 0; right: 0;
  top: 15px;
  height: 2px;
  background: var(--ax-graphite);
  z-index: 1;
  border-radius: 1px;
}

/* Minor ticks at 25 and 75 — barely visible nicks on the rule */
.ax-dim-scale-tick {
  position: absolute;
  top: 14px;
  width: 1px;
  height: 4px;
  background: var(--ax-soft);
  transform: translateX(-0.5px);
  z-index: 2;
}

/* Major ticks at 0, 50, 100 — proper notches with labels */
.ax-dim-scale-tick--major {
  width: 1.5px;
  height: 9px;
  top: 12px;
  background: var(--ax-graphite);
  transform: translateX(-0.75px);
}

.ax-dim-scale-tick-label {
  position: absolute;
  top: 22px;
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  color: var(--ax-soft);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Needle marker: a slim charcoal vertical line with a small head.
   Reads as the needle of a measuring instrument.                   */
.ax-dim-scale-marker {
  position: absolute;
  top: 4px;
  width: 2px;
  height: 18px;
  background: var(--ax-charcoal);
  transform: translateX(-1px);
  z-index: 3;
  border-radius: 1px;
}

/* Small needle head: a tiny charcoal dot at the top of the needle */
.ax-dim-scale-marker::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -2px;
  width: 6px;
  height: 6px;
  background: var(--ax-charcoal);
  border-radius: 50%;
}

.ax-dim-caveat {
  font-size: var(--ax-fs-table);
  line-height: var(--ax-lh-prose);
  color: var(--ax-muted);
  margin: var(--ax-sp-5) 0 0;
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
}

@media (max-width: 720px) {
  .ax-dim {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--ax-sp-4);
    row-gap: var(--ax-sp-3);
  }
  .ax-dim-scale {
    grid-column: 1 / -1;
  }
}


/* ── Top-holdings table ──────────────────────────────────────────── */

.ax-table-subtitle {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  margin: 0 0 var(--ax-sp-3);
}

.ax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ax-fs-table);
  font-variant-numeric: tabular-nums;
}

.ax-table th {
  text-align: left;
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  padding: var(--ax-sp-2) var(--ax-sp-3) var(--ax-sp-3);
  border-bottom: var(--ax-line-strong);
}

.ax-table th.num,
.ax-table td.num { text-align: right; }

.ax-table td {
  padding: var(--ax-sp-3);
  border-bottom: 1px dashed var(--ax-border);
  vertical-align: middle;
}

.ax-table tr:last-child td { border-bottom: 0; }

.ax-table tr:hover td {
  background: var(--ax-bg-soft);
}

.ax-table-cover-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--ax-sp-2);
  vertical-align: middle;
  background: var(--ax-black);
  flex-shrink: 0;
}

.ax-table-cover-mark--out {
  background: transparent;
  border: 1px solid var(--ax-soft);
}

.ax-table-name {
  font-weight: 500;
  color: var(--ax-black);
}

.ax-table-ticker {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  color: var(--ax-soft);
  margin-left: var(--ax-sp-2);
}

.ax-table-link {
  color: inherit;
  text-decoration: none;
}
.ax-table-link:hover .ax-table-name {
  color: var(--ax-black);
  border-bottom: 1px solid var(--ax-gold);
}

.ax-table-secondary {
  color: var(--ax-muted);
  font-size: 12.5px;
}

.ax-table-weight {
  color: var(--ax-black);
  font-weight: 600;
}


/* ── Concentration line (Top-10 callout) ─────────────────────────── */

.ax-concentration {
  margin: var(--ax-sp-6) 0 var(--ax-sp-4);
  padding: var(--ax-sp-4) var(--ax-sp-5);
  background: var(--ax-bg-soft);
  border: var(--ax-line);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
}

.ax-concentration strong {
  color: var(--ax-black);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* ── Structure breakdowns (countries / sectors / currencies) ─────── */

.ax-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ax-sp-8);
  margin-top: var(--ax-sp-6);
}

.ax-breakdown-block {
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-2);
}

.ax-breakdown-title {
  font-size: var(--ax-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  padding-bottom: var(--ax-sp-2);
  margin-bottom: var(--ax-sp-2);
  border-bottom: var(--ax-line);
}

.ax-breakdown-row {
  display: grid;
  grid-template-columns: 1fr 80px 50px;
  align-items: center;
  gap: var(--ax-sp-3);
  padding: 5px 0;
  font-size: var(--ax-fs-table);
}

.ax-breakdown-row-label {
  color: var(--ax-graphite);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ax-breakdown-row-bar {
  height: 4px;
  background: var(--ax-bg);
  position: relative;
  border-radius: 1px;
}

.ax-breakdown-row-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ax-charcoal);
  border-radius: 1px;
}

/* Sectors override: use the same color palette as the master sector bar.
   Apply the .ax-sector--* class on the fill element. */
.ax-breakdown-row-fill.ax-sector--tech        { background: #2D3F5E; }
.ax-breakdown-row-fill.ax-sector--financials  { background: #4F5B3E; }
.ax-breakdown-row-fill.ax-sector--health      { background: #6E3F3F; }
.ax-breakdown-row-fill.ax-sector--discretion  { background: #8A5A2B; }
.ax-breakdown-row-fill.ax-sector--staples     { background: #7C6E3F; }
.ax-breakdown-row-fill.ax-sector--industrials { background: #3A3A36; }
.ax-breakdown-row-fill.ax-sector--energy      { background: #5C3A24; }
.ax-breakdown-row-fill.ax-sector--materials   { background: #6A4F3A; }
.ax-breakdown-row-fill.ax-sector--comm        { background: #4A5A6E; }
.ax-breakdown-row-fill.ax-sector--utilities   { background: #3D5B57; }
.ax-breakdown-row-fill.ax-sector--realestate  { background: #6B5236; }
.ax-breakdown-row-fill.ax-sector--unknown     { background: var(--ax-charcoal); }

.ax-breakdown-row-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ax-graphite);
  font-weight: 500;
}


/* ── Pro-gate overlay (workshop-conform restyle, same logic) ─────── */

.ax-pro-gate {
  position: relative;
}

.ax-pro-gate-content {
  pointer-events: none;
  user-select: none;
  filter: blur(2px);
  opacity: 0.35;
}

.ax-pro-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 10;
}

.ax-pro-gate-card {
  background: var(--ax-panel);
  border: var(--ax-line-strong);
  border-radius: var(--ax-r-lg);
  padding: var(--ax-sp-8);
  max-width: 480px;
  text-align: center;
  box-shadow: var(--ax-shadow-hero);
  position: relative;
}

.ax-pro-gate-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ax-gold);
  border-radius: var(--ax-r-lg) var(--ax-r-lg) 0 0;
}

.ax-pro-gate-title {
  font-size: var(--ax-fs-section-title);
  font-weight: 600;
  color: var(--ax-black);
  margin: 0 0 var(--ax-sp-3);
  letter-spacing: -0.005em;
}

.ax-pro-gate-body {
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-prose);
  color: var(--ax-graphite);
  margin: 0 0 var(--ax-sp-5);
}

.ax-pro-gate-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  background: var(--ax-black);
  color: var(--ax-bg-soft);
  font-size: var(--ax-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--ax-sp-3) var(--ax-sp-5);
  border-radius: var(--ax-r-sm);
  text-decoration: none;
  transition: background var(--ax-dur) var(--ax-ease);
}

.ax-pro-gate-cta:hover {
  background: var(--ax-graphite);
}


/* ════════════════════════════════════════════════════════════════════ */
/* shell.html — App shell (top nav, sub nav, frame)                     */
/* Added Phase-3 #3 migration. Workshop diagnostic toolbar, not SaaS   */
/* segmented control. Active state is a gold rule, not a pill.         */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Outer shell container ───────────────────────────────────────── */

.ax-shell {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--ax-sp-5) var(--ax-sp-6);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}


/* ── Primary navigation (Start · Entdecken · ... · Tarif · DE/EN) ── */

.ax-topnav {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: var(--ax-line);
  background: transparent;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.ax-tabs {
  display: flex;
  gap: 0;
  align-items: stretch;
  width: 100%;
}

.ax-spacer { flex: 1 1 auto; }

/* Tab = a tab on an instrument panel, not a pill. Underlines on active. */
.ax-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--ax-font-sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ax-muted);
  text-decoration: none;
  padding: var(--ax-sp-4) var(--ax-sp-5);
  border: 0;
  background: transparent;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color var(--ax-dur) var(--ax-ease);
}

.ax-tab::after {
  /* Gold underline placeholder — visible only on .ax-active.
     Spans full tab cell width for visual consistency across word lengths. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  transition: background var(--ax-dur) var(--ax-ease);
}

.ax-tab:hover {
  color: var(--ax-black);
  background: var(--ax-panel-warm);
}

.ax-tab.ax-active {
  color: var(--ax-black);
  font-weight: 700;
  background: var(--ax-panel-warm);
}

.ax-tab.ax-active::after {
  background: var(--ax-gold);
}

/* "Tarif & Abrechnung" — quieter and visually grouped right-side. */
.ax-tab-aux {
  font-size: 13px;
  font-weight: 500;
  color: var(--ax-soft);
  padding-left: var(--ax-sp-5);
  padding-right: var(--ax-sp-5);
  /* Vertical divider against the primary tabs */
  border-left: var(--ax-line);
  margin-left: var(--ax-sp-3);
}

.ax-tab-aux:hover { color: var(--ax-black); }

.ax-tab-aux.ax-active {
  color: var(--ax-black);
  font-weight: 600;
}


/* "Mein Portfolio" — personal entry point, distinct from function tabs.
   Sits right of the spacer, marked with a small gold square as
   workshop signature of "this is yours."
   Active state is INSIDE the tab (warm bg + larger square),
   NOT a gold underline — that would make it look like a 7th function tab.
   Default state also carries a subtle warm bg so the workspace entry
   reads as a separate region even when not active.                       */
.ax-tab-personal {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ax-graphite);
  padding-left: var(--ax-sp-5);
  padding-right: var(--ax-sp-5);
  /* Visual divider against the function tabs to its left */
  border-left: var(--ax-line);
  margin-left: var(--ax-sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-3);
  /* Subtle persistent warm bg — workspace entry, even when not active */
  background: var(--ax-panel-warm);
  transition:
    color var(--ax-dur) var(--ax-ease),
    background-color var(--ax-dur) var(--ax-ease);
}

/* Gold square before the label — Werkstatt-Markierung.
   Slightly larger default (8px), grows to 10px when active. */
.ax-tab-personal::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ax-gold);
  flex-shrink: 0;
  transition:
    width var(--ax-dur) var(--ax-ease),
    height var(--ax-dur) var(--ax-ease);
}

/* Suppress the underline ::after that .ax-tab provides */
.ax-tab-personal::after { display: none; }

.ax-tab-personal:hover {
  color: var(--ax-black);
  background: var(--ax-panel);
}

.ax-tab-personal.ax-active {
  color: var(--ax-black);
  font-weight: 700;
  background: var(--ax-panel);
}

.ax-tab-personal.ax-active::before {
  width: 10px;
  height: 10px;
}


/* ── Language switcher — workshop toggle, not iOS segmented ─────── */

.ax-lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ax-sp-4);
  padding: 0 var(--ax-sp-2);
  gap: 0;
  align-self: center;
}

.ax-lang-switch form {
  margin: 0;
  display: inline-flex;
}

.ax-lang-btn {
  border: 0;
  background: transparent;
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ax-soft);
  padding: var(--ax-sp-2) var(--ax-sp-3);
  cursor: pointer;
  line-height: 1;
  border-radius: 0;
  transition: color var(--ax-dur) var(--ax-ease);
}

.ax-lang-btn + .ax-lang-btn {
  border-left: var(--ax-line);
}

.ax-lang-btn:hover { color: var(--ax-black); }

.ax-lang-btn.ax-active {
  color: var(--ax-black);
  font-weight: 700;
}


/* ── Sub navigation (context: Discover / Monitor) ───────────────── */

.ax-subnav {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  margin: 0 0 var(--ax-sp-5);
  flex: 0 0 auto;
}

.ax-subtab {
  position: relative;
  font-family: var(--ax-font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ax-soft);
  text-decoration: none;
  padding: var(--ax-sp-3) var(--ax-sp-4);
  border: 0;
  background: transparent;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.005em;
  transition: color var(--ax-dur) var(--ax-ease);
}

.ax-subtab::after {
  content: "";
  position: absolute;
  left: var(--ax-sp-4);
  right: var(--ax-sp-4);
  bottom: 2px;
  height: 1px;
  background: transparent;
  transition: background var(--ax-dur) var(--ax-ease);
}

.ax-subtab:hover { color: var(--ax-graphite); }

.ax-subtab.ax-active {
  color: var(--ax-black);
  font-weight: 600;
}

.ax-subtab.ax-active::after {
  background: var(--ax-charcoal);
  height: 2px;
}


/* ── Frame container — precise diagnostic stage, not soft SaaS card ─ */

.ax-frame {
  /* Match body bg so iframe content blends seamlessly with the shell. */
  background: var(--ax-bg);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Workshop tick disabled — randlos per user request. Kept selector
   so any HTML referencing .ax-frame--no-tick continues to work. */
.ax-frame::before { display: none; }
.ax-frame--no-tick::before { display: none; }

.ax-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ax-bg);
}


/* ── Above-frame slot (nudges, purchase context strip) ──────────── */

.ax-shell-above-frame {
  flex: 0 0 auto;
  margin-bottom: var(--ax-sp-2);
}



/* ════════════════════════════════════════════════════════════════════ */
/* Portfolio Hub — page-level building blocks                            */
/* Used by portfolio.html (Hub). Reused later by snapshot pages.        */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Page head (title + subtitle + flow meta) ───────────────────── */

.ax-pagehead {
  margin-bottom: var(--ax-sp-7);
  padding-bottom: var(--ax-sp-4);
  border-bottom: 1px solid var(--ax-border-strong);
}

.ax-pagehead-title {
  font-size: var(--ax-fs-page-title);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 var(--ax-sp-2);
  color: var(--ax-black);
}

.ax-pagehead-sub {
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
  margin: 0;
  max-width: 70ch;
}

.ax-pagehead-meta {
  margin-top: var(--ax-sp-3);
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  text-transform: uppercase;
}

.ax-pagehead-meta strong {
  font-weight: 600;
  color: var(--ax-graphite);
  margin-right: var(--ax-sp-2);
}


/* ── Section card (Latest Snapshot, Upload, History) ────────────── */

.ax-card-section {
  background: var(--ax-panel);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-6);
  margin-bottom: var(--ax-sp-5);
  position: relative;
}

.ax-card-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ax-sp-4);
  margin-bottom: var(--ax-sp-4);
  padding-bottom: var(--ax-sp-3);
  border-bottom: var(--ax-line);
}

.ax-card-section-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ax-black);
  margin: 0;
}

.ax-card-section-meta {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  text-transform: uppercase;
  white-space: nowrap;
}

.ax-card-section-intro {
  color: var(--ax-graphite);
  font-size: var(--ax-fs-body);
  line-height: var(--ax-lh-normal);
  margin: 0 0 var(--ax-sp-3);
}

.ax-card-section-intro--soft {
  color: var(--ax-soft);
  font-size: 13px;
}


/* ── KPI tile row (3 mini tiles inside a section card) ──────────── */

.ax-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ax-sp-4);
  margin-bottom: var(--ax-sp-5);
}

.ax-kpi-tile {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
}

.ax-kpi-tile--accent {
  background: var(--ax-panel-warm);
  border-color: var(--ax-border-strong);
}

.ax-kpi-tile-label {
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  margin-bottom: var(--ax-sp-2);
}

.ax-kpi-tile-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ax-kpi-tile-value-suffix {
  font-size: 15px;
  font-weight: 500;
  color: var(--ax-soft);
  margin-left: 2px;
}

.ax-kpi-tile-sub {
  margin-top: var(--ax-sp-1);
  font-size: 11.5px;
  color: var(--ax-soft);
  font-family: var(--ax-font-mono);
  letter-spacing: 0.02em;
}


/* ── Coverage status indicator on KPI tile (workshop-toned traffic) */
/* Semantic encoding: low / medium / high coverage.                  */
/* No saturated reds/greens. Border + value-tinted reading.          */
/* Specificity: combined-class selector to override .ax-kpi-tile-value color. */

.ax-kpi-tile-value.ax-kpi-tile-value--cov-low {
  color: #B14A00;       /* burnt sienna — diagnostic warning, not panic red */
}

.ax-kpi-tile-value.ax-kpi-tile-value--cov-mid {
  color: #9B7B00;       /* dark amber — neutral attention */
}

.ax-kpi-tile-value.ax-kpi-tile-value--cov-high {
  color: #2A6F30;       /* forest — confirmation without bright green */
}


/* ── Primary action button (solid charcoal, workshop) ───────────── */
/* Used for "Upload & review", "View snapshot" etc.                 */

.ax-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-sp-2);
  padding: var(--ax-sp-3) var(--ax-sp-5);
  background: var(--ax-black);
  color: var(--ax-bg-soft);
  border: 1px solid var(--ax-black);
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ax-dur) var(--ax-ease),
    border-color var(--ax-dur) var(--ax-ease);
}

.ax-btn-primary:hover {
  background: var(--ax-graphite);
  border-color: var(--ax-gold);
  color: var(--ax-bg-soft);
  text-decoration: none;
}

.ax-btn-primary[disabled],
.ax-btn-primary:disabled {
  background: var(--ax-bg-soft);
  border-color: var(--ax-border-strong);
  color: var(--ax-soft);
  cursor: not-allowed;
}

.ax-btn-primary[disabled]:hover,
.ax-btn-primary:disabled:hover {
  background: var(--ax-bg-soft);
  border-color: var(--ax-border-strong);
  color: var(--ax-soft);
}

.ax-btn-primary--block {
  width: 100%;
}

.ax-btn-primary svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ── Dropzone (file upload) ──────────────────────────────────────── */
/* Workshop tool plate: dashed border, neutral default,              */
/* warm warm bg when dragging over.                                  */

.ax-dropzone {
  border: 1.5px dashed var(--ax-border-strong);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-7) var(--ax-sp-5);
  text-align: center;
  background: var(--ax-bg-soft);
  transition:
    background-color var(--ax-dur) var(--ax-ease),
    border-color var(--ax-dur) var(--ax-ease);
}

.ax-dropzone.is-active {
  background: var(--ax-panel-warm);
  border-color: var(--ax-gold);
}

.ax-dropzone-icon {
  display: block;
  margin: 0 auto var(--ax-sp-3);
  width: 36px;
  height: 36px;
  color: var(--ax-soft);
}

.ax-dropzone-prim {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ax-black);
  margin-bottom: var(--ax-sp-1);
}

.ax-dropzone-sub {
  font-size: 13px;
  color: var(--ax-soft);
}

.ax-dropzone-hint {
  margin-top: var(--ax-sp-2);
  font-size: 12px;
  color: var(--ax-soft);
}

.ax-dropzone-filename {
  display: none;
  margin-top: var(--ax-sp-3);
  font-size: 13px;
  color: var(--ax-graphite);
  font-family: var(--ax-font-mono);
}

.ax-dropzone-filename.is-visible {
  display: block;
}


/* ── Notice block (hint / scan note) ─────────────────────────────── */

.ax-notice {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  font-size: 13px;
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
  margin-top: var(--ax-sp-4);
}

.ax-notice strong {
  font-weight: 600;
  color: var(--ax-black);
}


/* ── Upload status banner (success / error / pending) ───────────── */

.ax-upload-status {
  display: none;
  padding: var(--ax-sp-3) var(--ax-sp-4);
  border-radius: var(--ax-r-sm);
  font-size: 13.5px;
  line-height: var(--ax-lh-normal);
  margin-top: var(--ax-sp-3);
  border: var(--ax-line);
  background: var(--ax-bg-soft);
  color: var(--ax-graphite);
}

.ax-upload-status.is-visible { display: block; }

.ax-upload-status.is-pending {
  background: var(--ax-bg-soft);
  border-color: var(--ax-border-strong);
  color: var(--ax-graphite);
}

.ax-upload-status.is-success {
  background: var(--ax-panel-warm);
  border-color: var(--ax-gold);
  color: var(--ax-black);
}

.ax-upload-status.is-error {
  background: var(--ax-panel);
  border-color: var(--ax-graphite);
  color: var(--ax-black);
}

.ax-upload-status a {
  color: var(--ax-black);
  font-weight: 600;
  text-decoration: underline;
}


/* ── Hub table (snapshot history) ────────────────────────────────── */

.ax-table-hub {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ax-font-sans);
}

.ax-table-hub thead th {
  text-align: left;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  padding: var(--ax-sp-2) var(--ax-sp-3) var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border-strong);
  white-space: nowrap;
}

.ax-table-hub thead th.num,
.ax-table-hub tbody td.num { text-align: right; }

.ax-table-hub tbody td {
  padding: var(--ax-sp-3);
  border-bottom: 1px dashed var(--ax-border);
  font-size: 13.5px;
  color: var(--ax-graphite);
  font-variant-numeric: tabular-nums;
}

.ax-table-hub tbody tr:last-child td { border-bottom: 0; }

.ax-table-hub tbody tr:hover td {
  background: var(--ax-bg-soft);
}

.ax-table-hub td.date {
  font-family: var(--ax-font-mono);
  font-size: 13px;
  color: var(--ax-black);
  white-space: nowrap;
}

.ax-table-hub td.action a {
  color: var(--ax-black);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ax-dur) var(--ax-ease);
}

.ax-table-hub td.action a:hover {
  border-bottom-color: var(--ax-gold);
}

.ax-table-hub-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}








/* ════════════════════════════════════════════════════════════════════ */
/* Portfolio Draft — review & confirm flow                              */
/* Used by portfolio_draft.html. Status badges, state cards, editable  */
/* holdings table, ETF ambiguity markup, confirm modal.                */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Status badge (5 states: pending / running / ready / confirmed / failed) */
/* Workshop-toned semantic colors. Lean, not pillowy.                  */

.ax-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  padding: 2px 8px 3px;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 2px;
  line-height: 1.4;
  vertical-align: middle;
  background: transparent;
}

.ax-status-badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ax-status-badge--pending   { color: #9B7B00; border-color: currentColor; }
.ax-status-badge--running   { color: #2E5680; border-color: currentColor; }
.ax-status-badge--ready     { color: #2A6F30; border-color: currentColor; }
.ax-status-badge--confirmed { color: var(--ax-graphite); border-color: var(--ax-border-strong); }
.ax-status-badge--failed    { color: #B14A00; border-color: currentColor; }


/* ── Process pipeline (diagnostic stage indicator) ───────────────── */
/* Shows where in the OCR/validation pipeline the current scan is.   */
/* Steps are ordered; one is marked active via the .is-active class. */

.ax-pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: var(--ax-sp-5) 0 var(--ax-sp-2);
  margin-top: var(--ax-sp-4);
  border-top: var(--ax-line);
  border-bottom: var(--ax-line);
}

.ax-pipeline-step {
  position: relative;
  padding: 0 var(--ax-sp-3);
  text-align: left;
}

/* Connecting line between steps */
.ax-pipeline-step::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 0;
  width: 100%;
  height: 1px;
  background: var(--ax-border);
  z-index: 0;
}

.ax-pipeline-step:last-child::after { display: none; }

.ax-pipeline-step-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  position: relative;
  z-index: 1;
  background: var(--ax-panel);
  padding-right: var(--ax-sp-2);
}

.ax-pipeline-step-num {
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  padding: 2px 6px;
  border: 1px solid var(--ax-border);
  border-radius: 2px;
  line-height: 1.2;
  background: var(--ax-panel);
}

.ax-pipeline-step-label {
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ax-soft);
  margin-top: var(--ax-sp-2);
  line-height: 1.3;
}

/* Completed step — solid graphite */
.ax-pipeline-step.is-done .ax-pipeline-step-num {
  color: var(--ax-bg-soft);
  background: var(--ax-graphite);
  border-color: var(--ax-graphite);
}

.ax-pipeline-step.is-done .ax-pipeline-step-label {
  color: var(--ax-graphite);
}

.ax-pipeline-step.is-done::after {
  background: var(--ax-graphite);
}

/* Active step — gold ring + pulsing dot */
.ax-pipeline-step.is-active .ax-pipeline-step-num {
  color: var(--ax-black);
  border-color: var(--ax-gold);
  background: var(--ax-panel-warm);
}

.ax-pipeline-step.is-active .ax-pipeline-step-label {
  color: var(--ax-black);
  font-weight: 700;
}

.ax-pipeline-step.is-active .ax-pipeline-step-mark::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ax-gold);
  position: relative;
  z-index: 2;
  animation: ax-pulse 1.8s ease-in-out infinite;
}

@keyframes ax-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}



/* A compact horizontal status row, not a full section. Says:        */
/* "we're waiting briefly — this isn't the main screen."             */

.ax-state-bar {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-4);
  padding: var(--ax-sp-4) var(--ax-sp-5);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
}

.ax-state-bar-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ax-graphite);
  stroke-width: 1.75;
}

.ax-state-bar-text {
  flex: 1;
  min-width: 0;
}

.ax-state-bar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ax-black);
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.3;
}

.ax-state-bar-sub {
  font-size: 12.5px;
  color: var(--ax-soft);
  margin: 2px 0 0;
  line-height: var(--ax-lh-normal);
}

.ax-state-bar-meter {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ax-graphite);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: var(--ax-sp-1) var(--ax-sp-3);
  background: var(--ax-bg-soft);
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
  flex-shrink: 0;
}


/* ── State card (end states: FAILED / CONFIRMED) ─────────────────── */
/* Left-aligned diagnostic block. Workshop, not modal.              */

.ax-state-card {
  display: flex;
  align-items: flex-start;
  gap: var(--ax-sp-5);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-6) var(--ax-sp-6);
}

.ax-state-card--failed {
  border-color: #D6A983;
  border-left: 2px solid #B14A00;
  background: #FDF7F0;
}

.ax-state-card--confirmed {
  border-color: #9CBE9F;
  border-left: 2px solid #2A6F30;
  background: #F2F7F2;
}

.ax-state-card-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ax-graphite);
  stroke-width: 1.75;
}

.ax-state-card--failed .ax-state-card-icon { color: #B14A00; }
.ax-state-card--confirmed .ax-state-card-icon { color: #2A6F30; }

.ax-state-card-content {
  flex: 1;
  min-width: 0;
}

.ax-state-card-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ax-black);
  margin: 0 0 var(--ax-sp-2);
}

.ax-state-card-body {
  font-size: 13.5px;
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
  margin: 0 0 var(--ax-sp-4);
  max-width: 56ch;
}


/* ── Form inputs ─────────────────────────────────────────────────── */

.ax-form-input,
.ax-form-num,
.ax-form-select {
  width: 100%;
  padding: var(--ax-sp-2) var(--ax-sp-3);
  background: var(--ax-panel);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-sans);
  font-size: 13.5px;
  color: var(--ax-black);
  line-height: 1.3;
  transition: border-color var(--ax-dur) var(--ax-ease);
}

.ax-form-input:hover,
.ax-form-num:hover,
.ax-form-select:hover {
  border-color: var(--ax-border-strong);
}

.ax-form-input:focus,
.ax-form-num:focus,
.ax-form-select:focus {
  outline: none;
  border-color: var(--ax-graphite);
}

.ax-form-num {
  font-family: var(--ax-font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ax-form-input--ticker {
  font-family: var(--ax-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ax-form-input--buy-set {
  border-color: var(--ax-border-strong);
  color: var(--ax-graphite);
}

.ax-form-input--ambig,
.ax-form-input--ambig:hover,
.ax-form-input--ambig:focus {
  border-color: #C58550;
}

/* TR-Performance-Derivation (2026-05-17):
   markiert ein Input-Feld dessen Wert AssetNext aus dem TR-Performance-
   Quartett rückgerechnet hat — nicht direkt aus der OCR gelesen.
   Goldener Akzent links: weniger laut als die Ambig-Warnung, aber
   sichtbar genug damit der Nutzer weiß "hier wurde gerechnet". */
.ax-form-input--tr-derived {
  border-left: 2px solid var(--ax-gold);
  background-color: rgba(189, 159, 109, 0.04);
}


/* ── Editable holdings table ─────────────────────────────────────── */

.ax-table-edit {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-family: var(--ax-font-sans);
}

.ax-table-edit thead th {
  text-align: left;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  padding: var(--ax-sp-2) var(--ax-sp-3) var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border-strong);
  white-space: nowrap;
}

.ax-table-edit thead th.num { text-align: right; }
.ax-table-edit thead th.center { text-align: center; }

.ax-table-edit tbody td {
  padding: var(--ax-sp-2) var(--ax-sp-2);
  border-bottom: 1px dashed var(--ax-border);
  vertical-align: top;
}

.ax-table-edit tbody td.row-idx {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  color: var(--ax-soft);
  padding-top: var(--ax-sp-3);
  width: 36px;
  vertical-align: middle;
}

.ax-table-edit tbody td.row-conf {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  color: var(--ax-soft);
  text-align: center;
  vertical-align: middle;
}

.ax-table-edit tbody td.row-remove {
  text-align: center;
  width: 44px;
  vertical-align: middle;
}

.ax-table-edit-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ax-table-edit tr.is-ambig {
  background: var(--ax-panel-warm);
}

.ax-table-edit tr.is-ambig td:first-child {
  position: relative;
}

.ax-table-edit tr.is-ambig td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ax-gold);
}


/* ── Row markers (inline labels beneath inputs) ──────────────────── */

.ax-row-marker {
  margin-top: 4px;
  font-size: 11px;
  font-family: var(--ax-font-mono);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.ax-row-marker--ambig    { color: #B14A00; font-weight: 600; }
.ax-row-marker--bond     { color: var(--ax-soft); }
.ax-row-marker--resolved { color: #2A6F30; }
.ax-row-marker--native   { color: #B14A00; }

/* TR-Performance-Derivation (2026-05-17): Wert wurde errechnet,
   nicht aus der OCR gelesen. Goldton statt Warn-Orange, weil das
   eine Information ist, kein Problem. */
.ax-row-marker--tr {
  color: var(--ax-gold);
  font-weight: 500;
}

/* Currency-Mismatch (2026-05-17): TR-Anzeigewährung != native
   Quotierungswährung. Wärmerer Ton als --tr, weil hier eine
   User-Aktion empfohlen wird (Einstand in nativer Währung ergänzen). */
.ax-row-marker--currency-mismatch {
  color: #8A5A28;
  font-weight: 500;
  max-width: 280px;
}


/* ── ETF ambiguity picker (sub-row in table) ─────────────────────── */

.ax-ambig-card-wrap {
  background: var(--ax-panel-warm);
}

.ax-ambig-card-wrap td {
  padding: 0 var(--ax-sp-2) var(--ax-sp-3);
}

.ax-ambig-card {
  background: var(--ax-panel);
  border: 1px solid var(--ax-border-strong);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  padding: var(--ax-sp-3) var(--ax-sp-4);
}

.ax-ambig-card-explainer {
  font-size: 13px;
  color: var(--ax-graphite);
  margin: 0 0 var(--ax-sp-3);
  line-height: var(--ax-lh-normal);
}

.ax-ambig-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-2);
}

.ax-ambig-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  padding: var(--ax-sp-2) var(--ax-sp-3);
  background: var(--ax-panel);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ax-black);
  cursor: pointer;
  transition:
    border-color var(--ax-dur) var(--ax-ease),
    background-color var(--ax-dur) var(--ax-ease);
}

.ax-ambig-pick-btn:hover {
  border-color: var(--ax-black);
  background: var(--ax-bg-soft);
}

.ax-ambig-pick-btn .ax-mono {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  color: var(--ax-soft);
  margin-left: var(--ax-sp-1);
}


/* ── Confirm-bar warning ─────────────────────────────────────────── */

.ax-confirm-warning {
  display: none;
  margin-top: var(--ax-sp-3);
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border: 1px solid #D6A983;
  border-left: 2px solid #B14A00;
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  font-size: 13px;
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
}

.ax-confirm-warning.is-visible { display: block; }

.ax-confirm-warning strong {
  color: #B14A00;
  font-weight: 700;
}


/* ── Secondary action button ─────────────────────────────────────── */

.ax-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  padding: var(--ax-sp-2) var(--ax-sp-4);
  background: var(--ax-panel);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ax-black);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--ax-dur) var(--ax-ease),
    border-color var(--ax-dur) var(--ax-ease);
}

.ax-btn-secondary:hover {
  background: var(--ax-bg-soft);
  border-color: var(--ax-black);
  text-decoration: none;
}


/* ── Row-remove button (X) ───────────────────────────────────────── */

.ax-btn-remove {
  border: 0;
  background: transparent;
  color: var(--ax-soft);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--ax-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--ax-dur) var(--ax-ease),
    color var(--ax-dur) var(--ax-ease);
}

.ax-btn-remove:hover {
  background: var(--ax-bg-soft);
  color: #B14A00;
}

.ax-btn-remove svg {
  width: 14px;
  height: 14px;
}


/* ── Modal (custom, iframe-safe) ─────────────────────────────────── */

.ax-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 16, 14, 0.45);
  z-index: 9998;
}

.ax-modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  background: var(--ax-panel);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-md);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  overflow: hidden;
}

.ax-modal.is-visible,
.ax-modal-backdrop.is-visible {
  display: block;
}

.ax-modal-head {
  padding: var(--ax-sp-3) var(--ax-sp-5);
  border-bottom: var(--ax-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ax-modal-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ax-black);
  letter-spacing: -0.005em;
}

.ax-modal-body {
  padding: var(--ax-sp-4) var(--ax-sp-5);
  color: var(--ax-graphite);
  font-size: 13.5px;
  line-height: var(--ax-lh-normal);
}

.ax-modal-foot {
  padding: var(--ax-sp-3) var(--ax-sp-5);
  border-top: var(--ax-line);
  display: flex;
  gap: var(--ax-sp-2);
  justify-content: flex-end;
}

.ax-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  padding: var(--ax-sp-2) var(--ax-sp-4);
  background: #B14A00;
  border: 1px solid #B14A00;
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-bg-soft);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ax-dur) var(--ax-ease);
}

.ax-btn-danger:hover {
  background: #913C00;
}


/* ── Card-section-head with action cluster ───────────────────────── */

.ax-card-section-head--with-actions {
  align-items: center;
}

.ax-card-section-head-actions {
  display: flex;
  gap: var(--ax-sp-2);
}






/* ════════════════════════════════════════════════════════════════════ */
/* Portfolio Snapshot — full report rendering                          */
/* Used by portfolio_snapshot.html. Section markers, lookthrough       */
/* banners, holdings table, effective top positions, market alignment, */
/* purchase context, changes, pro-lock overlay.                        */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Sample banner (top bar when viewing sample data) ───────────── */

.ax-sample-banner {
  background: var(--ax-black);
  color: var(--ax-bg-soft);
  text-align: center;
  padding: var(--ax-sp-3) var(--ax-sp-5);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-sp-4);
  flex-wrap: wrap;
}

.ax-sample-banner-cta {
  background: var(--ax-gold);
  color: var(--ax-black);
  padding: 5px 12px;
  border-radius: var(--ax-r-sm);
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.ax-sample-banner-cta:hover {
  background: #D4B580;
  text-decoration: none;
}


/* ── Tier badge (AssetNext Pro) ─────────────────────────────────── */

.ax-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.ax-tier-badge-an   { color: var(--ax-black); }
.ax-tier-badge-next { color: var(--ax-gold); }

.ax-tier-badge-pro {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ax-gold);
  background: transparent;
  border: 1px solid var(--ax-gold);
  border-radius: 2px;
  text-transform: uppercase;
}

.ax-trial-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 2px;
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--ax-gold);
  background: var(--ax-panel-warm);
  color: var(--ax-black);
  white-space: nowrap;
  text-transform: uppercase;
}


/* ── Section marker (workshop "01", "02"... numbered heads) ───── */

.ax-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--ax-sp-3);
  margin-bottom: var(--ax-sp-5);
}

.ax-section-marker {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ax-gold);
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 2px;
}

.ax-section-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ax-black);
  margin: 0;
  line-height: 1.3;
}

.ax-section-sub {
  font-size: 13.5px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-normal);
  margin: var(--ax-sp-1) 0 var(--ax-sp-4);
}


/* ── Snapshot card (white sections with workshop frame) ─────────── */

.ax-snap-card {
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-6);
  margin-bottom: var(--ax-sp-5);
  position: relative;
}

.ax-snap-card--accent {
  background: var(--ax-panel-warm);
  border-color: var(--ax-border-strong);
}

.ax-snap-card--locked {
  min-height: 360px;
  overflow: hidden;
}


/* ── Lookthrough banner (4 warning levels + dezent inline) ─────── */

.ax-lookthrough-inline {
  margin: 0 0 var(--ax-sp-4);
  font-size: 12px;
  color: var(--ax-soft);
  line-height: var(--ax-lh-normal);
}

.ax-lookthrough-notice {
  margin: 0 0 var(--ax-sp-5);
  padding: var(--ax-sp-3) var(--ax-sp-5);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  font-size: 13.5px;
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
}

.ax-lookthrough-notice--small {
  background: var(--ax-panel-warm);
  border-left: 2px solid var(--ax-gold);
}

.ax-lookthrough-notice--prominent {
  background: var(--ax-panel-warm);
  border: 1px solid var(--ax-gold);
  border-left: 3px solid var(--ax-gold);
}

.ax-lookthrough-notice--strong {
  background: #FBEFE4;
  border: 1px solid #D6A983;
  border-left: 3px solid #B14A00;
}

.ax-lookthrough-notice--critical {
  background: #FBEFE4;
  border: 1.5px solid #B14A00;
  border-left: 3px solid #B14A00;
}

.ax-lookthrough-notice-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ax-black);
  margin: 0 0 var(--ax-sp-1);
  letter-spacing: -0.005em;
}


/* ── Snapshot KPI tile (with sub-line for dual values) ──────────── */

.ax-snap-kpi {
  flex: 1;
  min-width: 220px;
  padding: var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
}

.ax-snap-kpi--accent {
  background: var(--ax-panel-warm);
  border-color: var(--ax-border-strong);
}

.ax-snap-kpi-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  margin: 0 0 var(--ax-sp-2);
}

.ax-snap-kpi-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1.1;
}

.ax-snap-kpi-sub {
  font-size: 12.5px;
  color: var(--ax-graphite);
  margin: var(--ax-sp-1) 0 0;
  line-height: var(--ax-lh-normal);
}

.ax-snap-kpi-sub--muted {
  font-size: 11.5px;
  color: var(--ax-soft);
  margin-top: 4px;
}

.ax-snap-kpi-grid {
  display: flex;
  gap: var(--ax-sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--ax-sp-4);
}


/* ── Diagnostic summary readout block ───────────────────────────── */

.ax-snap-readout {
  background: var(--ax-bg-soft);
  border-left: 2px solid var(--ax-black);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  padding: var(--ax-sp-4) var(--ax-sp-5);
}

.ax-snap-readout-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ax-snap-readout-item {
  position: relative;
  padding-left: var(--ax-sp-5);
  margin: 0 0 var(--ax-sp-2);
  line-height: var(--ax-lh-normal);
  font-size: 14.5px;
  color: var(--ax-graphite);
}

.ax-snap-readout-item:last-child { margin-bottom: 0; }

.ax-snap-readout-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1px;
  background: var(--ax-gold);
}


/* ── Largest position highlight ─────────────────────────────────── */

.ax-snap-largest {
  background: var(--ax-panel-warm);
  border: var(--ax-line);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  padding: var(--ax-sp-4);
}

.ax-snap-largest-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  margin: 0 0 var(--ax-sp-2);
}

.ax-snap-largest-value {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ax-black);
  margin: 0;
}

.ax-snap-largest-note {
  font-size: 12.5px;
  color: var(--ax-graphite);
  margin: var(--ax-sp-1) 0 0;
  line-height: var(--ax-lh-normal);
}


/* ── Holdings table (display, read-only) ────────────────────────── */

.ax-table-holdings {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-family: var(--ax-font-sans);
}

.ax-table-holdings thead th {
  text-align: left;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  padding: var(--ax-sp-2) var(--ax-sp-3) var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border-strong);
  white-space: nowrap;
}

.ax-table-holdings thead th.num    { text-align: right; }
.ax-table-holdings thead th.center { text-align: center; }

.ax-table-holdings tbody td {
  padding: var(--ax-sp-3) var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border);
  font-size: 14px;
  color: var(--ax-graphite);
  vertical-align: middle;
}

.ax-table-holdings tbody td.idx {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  color: var(--ax-soft);
  width: 40px;
}

.ax-table-holdings tbody td.ticker {
  font-family: var(--ax-font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ax-black);
}

.ax-table-holdings tbody td.ticker a {
  color: var(--ax-black);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ax-dur) var(--ax-ease);
}

.ax-table-holdings tbody td.ticker a:hover {
  border-bottom-color: var(--ax-gold);
}

.ax-table-holdings tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ax-table-holdings tbody td.center {
  text-align: center;
}

.ax-table-holdings tbody td.weight {
  min-width: 160px;
}

.ax-table-holdings-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ── Weight bar (inside holdings table) ─────────────────────────── */

.ax-weight-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
  min-width: 140px;
}

.ax-weight-bar-track {
  position: relative;
  flex: 1;
  height: 8px;
  background: var(--ax-bg-soft);
  border-radius: 2px;
  overflow: hidden;
}

.ax-weight-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ax-gold);
  opacity: 0.65;
  border-radius: 2px;
}

.ax-weight-bar-label {
  font-family: var(--ax-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 48px;
  text-align: right;
}


/* ── Coverage marker (workshop mono-caps, no background) ───────── */

.ax-cov-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ax-cov-mark::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ax-cov-mark--full    { color: #2A6F30; }
.ax-cov-mark--partial { color: #B14A00; }
.ax-cov-mark--outside { color: var(--ax-soft); }


/* ── Effective Top Positions (Phase B table) ────────────────────── */

.ax-eff-card {
  background: var(--ax-panel-warm);
  border: var(--ax-line);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-md) var(--ax-r-md) 0;
  padding: var(--ax-sp-6);
  margin-bottom: var(--ax-sp-5);
  position: relative;
  min-height: 340px;
}

.ax-eff-highlight {
  background: var(--ax-bg-soft);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  padding: var(--ax-sp-3) var(--ax-sp-4);
  margin: 0 0 var(--ax-sp-4);
  font-size: 14px;
  line-height: var(--ax-lh-normal);
  color: var(--ax-black);
}

.ax-eff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
  overflow: hidden;
}

.ax-eff-table thead th {
  text-align: left;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  padding: var(--ax-sp-3) var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border-strong);
}

.ax-eff-table thead th.num { text-align: right; }

.ax-eff-table tbody td {
  padding: var(--ax-sp-3) var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border);
  vertical-align: top;
}

.ax-eff-table tbody td.idx {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ax-soft);
  width: 32px;
}

.ax-eff-position-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ax-black);
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
  flex-wrap: wrap;
}

.ax-eff-position-name a {
  color: var(--ax-black);
  text-decoration: none;
  border-bottom: 1px solid var(--ax-gold);
  padding-bottom: 1px;
}

.ax-eff-position-name a:hover {
  background: var(--ax-bg-soft);
}

.ax-eff-position-meta {
  font-size: 11.5px;
  color: var(--ax-soft);
  margin-top: 3px;
  font-family: var(--ax-font-mono);
  letter-spacing: 0.02em;
}

.ax-eff-position-meta a {
  color: var(--ax-soft);
  text-decoration: none;
}

.ax-eff-source-line {
  font-size: 12.5px;
  color: var(--ax-graphite);
  line-height: 1.5;
}

.ax-eff-source-line strong {
  color: var(--ax-black);
  font-weight: 600;
}

.ax-eff-weight {
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Category badges (enhanced / etf_only) */
.ax-eff-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 2px;
}

.ax-eff-badge--enhanced { color: var(--ax-gold); border-color: var(--ax-gold); background: transparent; }
.ax-eff-badge--etf-only { color: #3D6585; border-color: #3D6585; background: transparent; }

.ax-eff-legend {
  margin-top: var(--ax-sp-3);
  font-size: 12px;
  color: var(--ax-soft);
  line-height: var(--ax-lh-normal);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-4);
}

.ax-eff-legend-item {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
}


/* ── Pro lock overlay (workshop-styled) ─────────────────────────── */

.ax-pro-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.70) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ax-sp-6);
  pointer-events: auto;
  border-radius: var(--ax-r-md);
}

.ax-pro-lock {
  text-align: center;
  max-width: 420px;
  padding: var(--ax-sp-5) var(--ax-sp-6);
  background: var(--ax-panel);
  border: 1px solid #D6A983;
  border-left: 2px solid #B14A00;
  border-radius: 0 var(--ax-r-md) var(--ax-r-md) 0;
}

/* Inline variant: same look but placed in document flow, not as an overlay.
   Used for Free-Teaser sections where there's no underlying content to mask. */
.ax-pro-lock--inline {
  margin: 0 auto;
  max-width: 520px;
}

.ax-pro-lock-icon {
  width: 32px;
  height: 32px;
  color: var(--ax-gold);
  margin: 0 auto var(--ax-sp-3);
  display: block;
}

.ax-pro-lock-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ax-black);
  margin: 0 0 var(--ax-sp-2);
  letter-spacing: -0.005em;
}

.ax-pro-lock-text {
  font-size: 13.5px;
  color: var(--ax-graphite);
  margin: 0 0 var(--ax-sp-4);
  line-height: var(--ax-lh-normal);
}

/* Lock-Card CTA: workshop variant of ax-btn-primary.
   Gold border + mono-caps reads more like a "key to unlock" than the
   generic black app-primary button. Scoped to .ax-pro-lock so the
   regular app primary button stays unchanged. */
.ax-pro-lock .ax-btn-primary {
  background: transparent;
  color: var(--ax-gold);
  border: 1px solid var(--ax-gold);
  border-radius: var(--ax-r-sm);
  padding: var(--ax-sp-2) var(--ax-sp-5);
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--ax-dur) var(--ax-ease),
              color var(--ax-dur) var(--ax-ease);
}

.ax-pro-lock .ax-btn-primary:hover {
  background: var(--ax-gold);
  color: var(--ax-panel);
  border-color: var(--ax-gold);
}


/* ── Market alignment distribution list ─────────────────────────── */

.ax-ma-headline {
  background: var(--ax-panel-warm);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  padding: var(--ax-sp-3) var(--ax-sp-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--ax-black);
  margin-bottom: var(--ax-sp-4);
}

.ax-ma-dist {
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-3);
  margin-bottom: var(--ax-sp-4);
}

.ax-ma-dist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ax-sp-3);
}

.ax-ma-dist-marker {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 5px;
}

.ax-ma-dist-marker--supported  { background: #2A6F30; }
.ax-ma-dist-marker--confirmed  { background: #B14A00; }
.ax-ma-dist-marker--challenged { background: #9B7B00; }
.ax-ma-dist-marker--counter    { background: #3D6585; }
.ax-ma-dist-marker--neutral    { background: var(--ax-soft); }

.ax-ma-dist-content {
  flex: 1;
  min-width: 0;
}

.ax-ma-dist-row {
  display: flex;
  align-items: baseline;
  gap: var(--ax-sp-3);
}

.ax-ma-dist-label {
  font-size: 13px;
  color: var(--ax-graphite);
  font-weight: 600;
  flex: 1;
}

.ax-ma-dist-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-black);
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
}

.ax-ma-dist-sub {
  font-size: 12px;
  color: var(--ax-soft);
  line-height: var(--ax-lh-normal);
  margin-top: 2px;
}

.ax-ma-dist-neutral {
  padding-top: var(--ax-sp-3);
  border-top: 1px dashed var(--ax-border);
}


/* ── Snapshot footer note ───────────────────────────────────────── */

.ax-snap-footer-note {
  margin-top: var(--ax-sp-8);
  padding: var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border-radius: var(--ax-r-sm);
  font-size: 12.5px;
  color: var(--ax-soft);
  text-align: center;
  line-height: var(--ax-lh-normal);
}


/* ── Purchase Context: detail row per position ──────────────────── */

.ax-pc-row {
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
  padding: var(--ax-sp-3) var(--ax-sp-4);
}

.ax-pc-row--extreme {
  border-color: var(--ax-border-strong);
  background: var(--ax-panel-warm);
}

.ax-pc-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-sp-3);
  margin-bottom: var(--ax-sp-3);
  flex-wrap: wrap;
}

.ax-pc-row-ident {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.ax-pc-row-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ax-pc-row-displayname {
  font-weight: 600;
  font-size: 14px;
  color: var(--ax-black);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.ax-pc-row-ticker {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ax-soft);
  letter-spacing: 0.02em;
}

.ax-pc-row-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ax-gold);
  border: 1px solid var(--ax-gold);
  border-radius: 2px;
  background: transparent;
  white-space: nowrap;
}

.ax-pc-row-quality {
  font-size: 10px;
  color: var(--ax-soft);
  font-family: var(--ax-font-mono);
}

.ax-pc-row-prices {
  display: flex;
  gap: var(--ax-sp-4);
  align-items: center;
}

.ax-pc-row-price-block {
  text-align: right;
}

.ax-pc-row-price-label {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ax-soft);
}

.ax-pc-row-price-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
}

.ax-pc-row-price-ccy {
  font-size: 10px;
  font-weight: 600;
  color: var(--ax-soft);
  font-family: var(--ax-font-mono);
}

.ax-pc-row-return--up   { color: #2A6F30; }
.ax-pc-row-return--down { color: #B14A00; }

.ax-pc-row-range {
  margin-top: var(--ax-sp-2);
}

.ax-pc-row-range-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-family: var(--ax-font-mono);
  font-weight: 600;
  color: var(--ax-soft);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.ax-pc-row-range-bar {
  position: relative;
  height: 14px;
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: 3px;
  overflow: visible;
}

/* Quartile ticks at 25/50/75 — dezente vertical lines */
.ax-pc-row-range-bar::before,
.ax-pc-row-range-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ax-border);
}

.ax-pc-row-range-bar::before { left: 25%; }
.ax-pc-row-range-bar::after  { left: 75%; }

/* Center marker — slightly stronger, signals "median" */
.ax-pc-row-range-bar-mid {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--ax-border-strong);
}

.ax-pc-row-range-marker-old {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ax-soft);
  border: 2px solid var(--ax-panel);
  z-index: 1;
}

.ax-pc-row-range-marker-now {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ax-gold);
  border: 2px solid var(--ax-panel);
  box-shadow: 0 0 0 1px var(--ax-gold);
  z-index: 2;
}

/* Connecting hairline between old → now (visualizes movement) */
.ax-pc-row-range-connect {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: linear-gradient(90deg, var(--ax-soft) 0%, var(--ax-gold) 100%);
  opacity: 0.5;
  z-index: 0;
}

.ax-pc-row-range-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-family: var(--ax-font-mono);
  color: var(--ax-soft);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.ax-pc-summary {
  background: var(--ax-panel-warm);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  padding: var(--ax-sp-3) var(--ax-sp-4);
  font-size: 14px;
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
  margin-bottom: var(--ax-sp-4);
}

.ax-pc-disclaimer {
  font-size: 11.5px;
  color: var(--ax-soft);
  margin: var(--ax-sp-4) 0 0;
  line-height: var(--ax-lh-normal);
}


/* ── Archetype card (absolute / relative) ───────────────────────── */

.ax-archetype-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(320px, 1.8fr);
  gap: var(--ax-sp-4);
}

.ax-archetype-main {
  padding: var(--ax-sp-5);
  background: var(--ax-panel-warm);
  border: var(--ax-line);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-md) var(--ax-r-md) 0;
}

.ax-archetype-side {
  padding: var(--ax-sp-5);
  background: var(--ax-bg-soft);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
}

.ax-archetype-label-line {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  margin: 0 0 var(--ax-sp-2);
}

.ax-archetype-value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ax-black);
  line-height: 1.2;
  margin: 0 0 var(--ax-sp-2);
}

.ax-archetype-text {
  font-size: 13.5px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-normal);
  margin: 0 0 var(--ax-sp-3);
}

.ax-archetype-intensity {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-black);
  border: 1px solid var(--ax-gold);
  border-radius: 2px;
  text-transform: uppercase;
  background: transparent;
}


/* ── Market Behaviour: dimension tiles ──────────────────────────── */

.ax-dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ax-sp-3);
}

/* basket_profile.html: explicit modifier --stack restores the single-column
   layout. The default .ax-dim-grid (above) is shared with the .ax-dim-tile
   context, where a multi-column auto-fit grid is correct. In basket_profile,
   each .ax-dim row already has its own internal Name|Value|Scale 3-column
   grid (see .ax-dim rules ~line 981) — they must stack vertically. */
.ax-dim-grid--stack {
  grid-template-columns: 1fr;
  gap: var(--ax-sp-2);
}

.ax-dim-tile {
  border: var(--ax-line);
  border-left: 2px solid var(--ax-black);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  padding: var(--ax-sp-4);
  background: var(--ax-panel);
}

.ax-dim-tile--optional {
  border-left-color: var(--ax-border-strong);
  background: var(--ax-bg-soft);
}

.ax-dim-tile-head {
  display: flex;
  align-items: baseline;
  gap: var(--ax-sp-2);
  margin-bottom: var(--ax-sp-2);
}

.ax-dim-tile-abbr {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-gold);
  text-transform: uppercase;
}

.ax-dim-tile--optional .ax-dim-tile-abbr {
  color: var(--ax-soft);
}

.ax-dim-tile-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ax-black);
}

.ax-dim-tile--optional .ax-dim-tile-name {
  color: var(--ax-graphite);
  font-weight: 500;
}

.ax-dim-tile-tooltip {
  font-size: 12.5px;
  color: var(--ax-graphite);
  margin: 0 0 var(--ax-sp-3);
  line-height: var(--ax-lh-normal);
}

.ax-dim-tile-meter {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
}

.ax-dim-tile-bar {
  flex: 1;
  height: 6px;
  background: var(--ax-bg-soft);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.ax-dim-tile-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ax-gold);
  border-radius: 3px;
}

.ax-dim-tile--optional .ax-dim-tile-fill {
  background: var(--ax-border-strong);
}

.ax-dim-tile-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--ax-gold);
  border-radius: 50%;
  border: 2px solid var(--ax-panel);
}

.ax-dim-tile--optional .ax-dim-tile-dot {
  background: var(--ax-border-strong);
}

.ax-dim-tile-value {
  font-family: var(--ax-font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ax-black);
  min-width: 36px;
  text-align: right;
}


/* ── Structural Consequences (Strukturhebel-Übersicht) ─────────── */

.ax-strconseq {
  background: var(--ax-panel-warm);
  border: var(--ax-line);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-md) var(--ax-r-md) 0;
  padding: var(--ax-sp-6);
  margin-bottom: var(--ax-sp-5);
  position: relative;
  min-height: 340px;
}

.ax-strconseq-intro {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-panel);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ax-black);
  margin-bottom: var(--ax-sp-4);
  line-height: var(--ax-lh-normal);
}

.ax-strconseq-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(400px, 2.1fr);
  gap: var(--ax-sp-4);
  align-items: start;
}

.ax-strconseq-core {
  padding: var(--ax-sp-4);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
}

.ax-strconseq-core-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  margin: 0 0 var(--ax-sp-2);
}

.ax-strconseq-core-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ax-black);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--ax-sp-2);
}

.ax-strconseq-effects {
  padding: var(--ax-sp-4);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
}

.ax-strconseq-effects-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  margin: 0 0 var(--ax-sp-3);
}

.ax-strconseq-effects-list {
  margin: 0;
  padding-left: var(--ax-sp-5);
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
}

.ax-strconseq-effects-list li {
  font-size: 14px;
  margin-bottom: var(--ax-sp-2);
}


/* ── Benchmark fit / suggested benchmark ────────────────────────── */

.ax-bench-headline {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-panel-warm);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  font-size: 14px;
  color: var(--ax-black);
  font-weight: 600;
  margin-bottom: var(--ax-sp-4);
}

.ax-bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ax-sp-3);
  margin-bottom: var(--ax-sp-4);
}

.ax-bench-tile {
  padding: var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
}

.ax-bench-tile--accent {
  background: var(--ax-panel-warm);
  border-color: var(--ax-border-strong);
}

.ax-bench-tile-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
}

.ax-bench-tile-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--ax-black);
  margin-top: var(--ax-sp-1);
  letter-spacing: -0.005em;
}

.ax-bench-tile-text {
  font-size: 13px;
  color: var(--ax-graphite);
  margin-top: var(--ax-sp-1);
  line-height: var(--ax-lh-normal);
}


/* ── Benchmark Compare: differences grid ────────────────────────── */

/* Compact headline row: archetype-label + value (left) + intensity tag (right) */
.ax-bench-archetype {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-sp-3);
  padding: var(--ax-sp-3) 0 var(--ax-sp-2);
  border-bottom: 1px solid var(--ax-border);
  margin-bottom: var(--ax-sp-3);
}

.ax-bench-archetype-text {
  min-width: 0;
  flex: 1;
}

.ax-bench-archetype-value {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ax-black);
  margin: 2px 0 0;
  line-height: 1.2;
}

.ax-bench-diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ax-sp-3);
}

.ax-bench-diff {
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-bg-soft);
}

.ax-bench-diff-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ax-sp-3);
  margin-bottom: var(--ax-sp-3);
}

.ax-bench-diff-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--ax-black);
}

.ax-bench-diff-dir {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: 2px;
  white-space: nowrap;
}

.ax-bench-diff-dir--higher  { color: #2E5680; border-color: currentColor; }
.ax-bench-diff-dir--lower   { color: #B14A00; border-color: currentColor; }
.ax-bench-diff-dir--similar { color: var(--ax-soft); border-color: var(--ax-border); }

.ax-bench-diff-values {
  display: flex;
  justify-content: space-between;
  gap: var(--ax-sp-3);
}

.ax-bench-diff-values > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ax-bench-diff-vlabel {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ax-soft);
}

.ax-bench-diff-vnum {
  font-family: var(--ax-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
}


/* ── Structural Adjustment Effects (Strukturhebel-Detailliste) ──── */

.ax-stradj-effect {
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
  padding: var(--ax-sp-4);
  background: var(--ax-panel);
  margin-bottom: var(--ax-sp-3);
}

.ax-stradj-effect--top {
  border-color: var(--ax-border-strong);
  background: var(--ax-panel-warm);
  padding: var(--ax-sp-5);
}

.ax-stradj-effect-head {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
  margin-bottom: var(--ax-sp-2);
  flex-wrap: wrap;
}

.ax-stradj-effect-num {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ax-soft);
  min-width: 16px;
}

.ax-stradj-effect--top .ax-stradj-effect-num {
  color: var(--ax-gold);
}

.ax-stradj-effect-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ax-black);
}

.ax-stradj-effect--top .ax-stradj-effect-title {
  font-size: 14.5px;
}

.ax-stradj-effect-badge {
  margin-left: auto;
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--ax-gold);
  border: 1px solid var(--ax-gold);
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.ax-stradj-effect-arrow {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ax-graphite);
  margin-bottom: var(--ax-sp-1);
}

.ax-stradj-effect--top .ax-stradj-effect-arrow {
  font-size: 14px;
}

.ax-stradj-effect-mech {
  font-size: 12.5px;
  color: var(--ax-soft);
  line-height: var(--ax-lh-normal);
  margin-bottom: var(--ax-sp-2);
}

.ax-stradj-effect-tradeoff {
  font-size: 12px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-normal);
  background: var(--ax-bg-soft);
  border-radius: var(--ax-r-sm);
  padding: var(--ax-sp-2) var(--ax-sp-3);
}

.ax-stradj-effect-tradeoff strong {
  font-weight: 600;
  color: var(--ax-soft);
}


/* ── Levers: drivers / helpers / candidates ──────────────────── */

.ax-lever-section {
  margin-top: var(--ax-sp-4);
  padding-top: var(--ax-sp-3);
  border-top: 1px dashed var(--ax-border);
}

.ax-lever-block {
  margin-bottom: var(--ax-sp-5);
}

.ax-lever-block:last-child { margin-bottom: 0; }

.ax-lever-block-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--ax-sp-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ax-border);
}

.ax-lever-block-label--drivers    { color: #B14A00; border-bottom-color: #D6A983; }
.ax-lever-block-label--helpers    { color: var(--ax-soft); }
.ax-lever-block-label--candidates { color: var(--ax-gold); border-bottom-color: var(--ax-gold); }

/* Driver row (prominent — these are the existing portfolio positions driving the effect) */
.ax-lever-driver-row {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  padding: 7px var(--ax-sp-3);
  background: #FBEFE4;
  border-left: 2px solid #B14A00;
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  margin-bottom: 3px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

.ax-lever-driver-row:last-child { margin-bottom: 0; }

.ax-lever-row-ticker {
  font-family: var(--ax-font-mono);
  font-weight: 700;
  color: var(--ax-black);
  min-width: 70px;
  letter-spacing: 0.02em;
}

.ax-lever-row-ticker a {
  color: var(--ax-black);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ax-lever-row-ticker a:hover {
  border-bottom-color: var(--ax-gold);
}

.ax-lever-row-weight {
  font-family: var(--ax-font-mono);
  font-weight: 600;
  color: var(--ax-graphite);
  min-width: 48px;
  font-variant-numeric: tabular-nums;
}

.ax-lever-row-sector {
  flex: 1;
  font-size: 11.5px;
  color: var(--ax-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Helper row (existing portfolio positions with counter-effect) — calmer */
.ax-lever-helper-row {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  padding: 5px var(--ax-sp-3);
  font-size: 11.5px;
  color: var(--ax-graphite);
  line-height: 1.4;
  background: var(--ax-bg-soft);
  border-left: 2px solid #9CBE9F;
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  margin-bottom: 2px;
}

.ax-lever-helper-row:last-child { margin-bottom: 0; }

.ax-lever-helper-hint {
  font-size: 11px;
  color: #2A6F30;
  font-style: italic;
}

/* Candidate row (NEW positions outside portfolio — gold accent) */
.ax-lever-candidate-list {
  border: 1px solid var(--ax-gold);
  border-radius: var(--ax-r-sm);
  overflow: hidden;
  background: var(--ax-panel);
}

.ax-lever-candidate-row {
  border-bottom: 1px solid var(--ax-border);
}

.ax-lever-candidate-row:last-child { border-bottom: 0; }

.ax-lever-candidate-line {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  padding: var(--ax-sp-2) var(--ax-sp-3);
  font-size: 12px;
  flex-wrap: wrap;
}

.ax-lever-badge {
  font-family: var(--ax-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid;
  line-height: 1.5;
}

.ax-lever-badge--driver    { color: #B14A00;       border-color: currentColor; background: transparent; }
.ax-lever-badge--candidate { color: var(--ax-gold); border-color: currentColor; background: transparent; }
.ax-lever-badge--tradeoff  { color: #9B7B00;       border-color: currentColor; background: transparent; }
.ax-lever-badge--cluster   { color: var(--ax-soft); border-color: var(--ax-border); background: transparent; }

.ax-lever-helper-hint {
  font-size: 11px;
  color: #2A6F30;
  font-style: italic;
}

.ax-lever-candidate-company {
  color: var(--ax-graphite);
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ax-lever-candidate-peer {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  color: var(--ax-gold);
  font-weight: 700;
  white-space: nowrap;
}

.ax-lever-tradeoff-detail {
  padding: 0 var(--ax-sp-3) var(--ax-sp-2) calc(80px + var(--ax-sp-2));
  font-size: 11px;
  color: #9B7B00;
  font-style: italic;
  line-height: 1.4;
}

.ax-lever-disclaimer {
  font-size: 11px;
  color: var(--ax-soft);
  font-style: italic;
  margin-top: var(--ax-sp-3);
  line-height: var(--ax-lh-normal);
}

/* Free-tier inline lock (smaller than the section overlay) */
.ax-lever-pro-hint {
  margin-top: var(--ax-sp-3);
  padding: var(--ax-sp-2) var(--ax-sp-3);
  border: 1px dashed var(--ax-gold);
  border-radius: var(--ax-r-sm);
  background: var(--ax-panel-warm);
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  flex-wrap: wrap;
}

.ax-lever-pro-hint-icon {
  width: 16px;
  height: 16px;
  color: var(--ax-gold);
  flex-shrink: 0;
}

.ax-lever-pro-hint-text {
  font-size: 12px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-normal);
  flex: 1;
  min-width: 200px;
}

.ax-lever-pro-hint-cta {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ax-gold);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.ax-lever-pro-hint-cta:hover {
  text-decoration: underline;
}


/* ── Purchase Context section helpers ──────────────────────────── */
/* (Reuses .ax-snap-kpi-grid + .ax-snap-kpi for entry/current KPIs)  */

.ax-pc-kpi-triplet {
  display: flex;
  gap: var(--ax-sp-3);
  flex-wrap: wrap;
}

.ax-pc-kpi-triplet > div {
  flex: 1;
  min-width: 70px;
}

.ax-pc-kpi-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--ax-black);
  font-variant-numeric: tabular-nums;
}

.ax-pc-kpi-num--good { color: #2A6F30; }
.ax-pc-kpi-num--bad  { color: #B14A00; }

.ax-pc-kpi-sublabel {
  font-size: 10.5px;
  color: var(--ax-soft);
  margin-top: 1px;
}


/* ── Changes section (what's different from previous snapshot) ──── */

.ax-chg-events {
  margin: 0 0 var(--ax-sp-3);
  padding-left: var(--ax-sp-5);
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
  font-size: 14px;
}

.ax-chg-events li { margin-bottom: var(--ax-sp-1); }

.ax-chg-insight {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-bg-soft);
  border-left: 2px solid var(--ax-graphite);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  font-size: 13.5px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-normal);
}

.ax-chg-insight--partial { border-left-color: var(--ax-border-strong); }
.ax-chg-insight--low     { border-left-color: #B14A00; }


/* ════════════════════════════════════════════════════════════════════ */
/* Reads — list view + detail view                                     */
/* Polished Reads pages render via polished_reads_routes.py (Python    */
/* HTML generation, not Jinja). Pages load ax-design.css standalone    */
/* via <link>. Each visual primitive below is workshop-aesthetic       */
/* equivalent of the legacy READS_INNER_CSS rules.                     */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Reads list page ────────────────────────────────────────────── */

.ax-reads-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--ax-sp-6) var(--ax-sp-5) var(--ax-sp-12);
}

.ax-reads-header {
  margin-bottom: var(--ax-sp-7);
}

.ax-reads-header h1 {
  margin: 0 0 var(--ax-sp-1);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ax-black);
}

.ax-reads-header .sub {
  color: var(--ax-graphite);
  font-size: 14px;
  line-height: var(--ax-lh-normal);
}

.ax-reads-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ax-sp-4);
}

@media (min-width: 720px) {
  .ax-reads-grid { grid-template-columns: 1fr 1fr; }
}


/* ── Reads card (list item) ─────────────────────────────────────── */

.ax-reads-card {
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ax-black);
  display: flex;
  flex-direction: column;
  transition: border-color var(--ax-dur) var(--ax-ease),
              transform var(--ax-dur) var(--ax-ease);
}

.ax-reads-card:hover {
  text-decoration: none;
  border-color: var(--ax-gold);
  transform: translateY(-1px);
}

.ax-reads-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--ax-bg-soft);
  display: block;
  border-bottom: 1px solid var(--ax-border);
}

.ax-reads-card-no-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--ax-panel-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ax-gold);
  font-family: var(--ax-font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--ax-border);
}

.ax-reads-card-body {
  padding: var(--ax-sp-4) var(--ax-sp-5) var(--ax-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-2);
  flex: 1;
}

.ax-reads-card-meta {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ax-soft);
  letter-spacing: 0.04em;
}

.ax-reads-ticker-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ax-gold);
  border: 1px solid var(--ax-gold);
  border-radius: 2px;
  background: transparent;
  text-transform: uppercase;
}

.ax-reads-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ax-black);
}

.ax-reads-card-summary {
  color: var(--ax-graphite);
  font-size: 13.5px;
  line-height: var(--ax-lh-normal);
}


/* ── Reads empty state ──────────────────────────────────────────── */

.ax-reads-empty {
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-9) var(--ax-sp-5);
  text-align: center;
}

.ax-reads-empty h2 {
  margin: 0 0 var(--ax-sp-2);
  font-size: 17px;
  color: var(--ax-graphite);
  font-weight: 600;
}

.ax-reads-empty p {
  margin: 0;
  color: var(--ax-soft);
  font-size: 14px;
  line-height: var(--ax-lh-normal);
}


/* ── Reads detail page ──────────────────────────────────────────── */

.ax-reads-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ax-graphite);
  text-decoration: none;
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--ax-sp-4);
  text-transform: uppercase;
}

.ax-reads-detail-back::before {
  content: "‹ ";
  font-size: 16px;
  line-height: 1;
}

.ax-reads-detail-back:hover {
  color: var(--ax-gold);
  text-decoration: none;
}

.ax-reads-detail-meta {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ax-soft);
  letter-spacing: 0.04em;
  margin-bottom: var(--ax-sp-3);
}

.ax-reads-detail-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ax-sp-6);
  color: var(--ax-black);
}

@media (max-width: 600px) {
  .ax-reads-detail-title { font-size: 24px; }
}

.ax-reads-detail-img {
  width: 100%;
  border-radius: var(--ax-r-md);
  border: var(--ax-line);
  margin-bottom: var(--ax-sp-6);
  display: block;
}

.ax-reads-detail-body {
  font-size: 16px;
  line-height: var(--ax-lh-relaxed);
  color: var(--ax-graphite);
}

.ax-reads-detail-body p { margin: 0 0 1em; }

.ax-reads-detail-body h2 {
  margin: 1.6em 0 0.5em;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ax-black);
}

.ax-reads-detail-body h3 {
  margin: 1.4em 0 0.4em;
  font-size: 17px;
  font-weight: 600;
  color: var(--ax-black);
}

.ax-reads-detail-body ul {
  margin: 0 0 1em;
  padding-left: 22px;
}

.ax-reads-detail-body li {
  margin-bottom: 0.4em;
}

.ax-reads-detail-body a {
  color: var(--ax-gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ax-dur) var(--ax-ease);
}

.ax-reads-detail-body a:hover {
  border-bottom-color: var(--ax-gold);
}

.ax-reads-detail-body code {
  background: var(--ax-bg-soft);
  padding: 1px 6px;
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-mono);
  font-size: 13.5px;
  color: var(--ax-graphite);
}

.ax-reads-detail-body strong {
  font-weight: 600;
  color: var(--ax-black);
}

.ax-reads-detail-footer {
  margin-top: var(--ax-sp-8);
  padding-top: var(--ax-sp-5);
  border-top: 1px solid var(--ax-border);
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-2);
  font-size: 14px;
}

.ax-reads-detail-footer a {
  color: var(--ax-gold);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--ax-font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ax-reads-detail-footer a:hover {
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════ */
/* Monitor Overview — feed cards, sections, empty states                */
/* Used by monitor_overview.html. Lists signal items from               */
/* monitor_feed_builder grouped into: attention, portfolio delta,       */
/* watchlist radar, supporting evidence, plus quiet state.              */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Monitor wrap + header ──────────────────────────────────────── */

.ax-mo-wrap {
  padding: var(--ax-sp-5);
  max-width: 960px;
  margin: 0 auto;
}

.ax-mo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-sp-4);
  padding: var(--ax-sp-4) var(--ax-sp-5);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  margin-bottom: var(--ax-sp-5);
  flex-wrap: wrap;
}

.ax-mo-title {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ax-black);
  margin: 0;
}

.ax-mo-sub {
  font-size: 13px;
  color: var(--ax-graphite);
  margin-top: 3px;
  line-height: var(--ax-lh-normal);
}

.ax-mo-header-meta {
  display: flex;
  gap: var(--ax-sp-2);
  align-items: center;
  flex-shrink: 0;
}


/* ── Monitor badge (header context) ─────────────────────────────── */

.ax-mo-badge {
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: 2px;
  padding: 3px 9px;
  text-transform: uppercase;
}

.ax-mo-badge--portfolio {
  color: var(--ax-gold);
  background: transparent;
  border-color: var(--ax-gold);
}


/* ── Section labels ─────────────────────────────────────────────── */

.ax-mo-section {
  margin-bottom: var(--ax-sp-6);
}

.ax-mo-section-label {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  margin-bottom: var(--ax-sp-2);
  padding-left: 2px;
}


/* ── Feed card (base) ───────────────────────────────────────────── */

.ax-mo-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ax-sp-4);
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-left-width: 2px;
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

/* Severity / source variants — workshop palette */
.ax-mo-card--critical {
  border-left-color: #B14A00;
  background: #FBEFE4;
}

.ax-mo-card--important {
  border-left-color: var(--ax-gold);
  background: var(--ax-panel-warm);
}

.ax-mo-card--portfolio {
  border-left-color: var(--ax-gold);
}

.ax-mo-card--radar {
  border-left-color: #3D6585;
}

.ax-mo-card--evidence {
  border-left-color: var(--ax-border-strong);
  background: var(--ax-bg-soft);
}

/* ── Semantic card types ─────────────────────────────────────────
   Bedeutungs-getrennte Card-Varianten. Border-Left = Bedeutungs-
   Gruppe (Position-Struktur / Position-Einstieg / Portfolio-Meta /
   Markt). Background-Tönung optional via Severity-Modifier oben.
   ────────────────────────────────────────────────────────────── */

/* A1: Eine konkrete Position deines Portfolios — strukturell */
.ax-mo-card--pos-struct {
  border-left-color: var(--ax-gold);
  background: var(--ax-panel-warm);
}

/* A2: Eine konkrete Position — Einstiegspreis-Kontext */
.ax-mo-card--pos-entry {
  border-left-color: #B14A00;
  background: #FBEFE4;
}

/* B: Dein Portfolio als Ganzes — strukturelle Verschiebung */
.ax-mo-card--portfolio-meta {
  border-left-color: var(--ax-graphite);
  background: var(--ax-panel);
}

/* C: Watchlist / externe Markt-Information */
.ax-mo-card--market {
  border-left-color: #3D6585;
  background: var(--ax-panel);
}

/* Card-Type-Label: zwei-teiliges Tag (PRIMARY · SECONDARY) oben
   in der Card-Meta, ersetzt source-tag für neue Cards. Mono-Caps,
   Werkstatt-konsistent zu .ax-mode-Badges. */
.ax-mo-type-label {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid;
  background: transparent;
}
.ax-mo-type-label--pos-struct      { color: var(--ax-gold);     border-color: currentColor; }
.ax-mo-type-label--pos-entry       { color: #B14A00;            border-color: currentColor; }
.ax-mo-type-label--portfolio-meta  { color: var(--ax-graphite); border-color: var(--ax-border-strong); }
.ax-mo-type-label--market          { color: #3D6585;            border-color: currentColor; }

.ax-mo-card-body {
  flex: 1;
  min-width: 0;
}

.ax-mo-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  min-width: 100px;
}


/* ── Card content (headline, detail, weight tag) ────────────────── */

.ax-mo-card-headline {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ax-black);
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: var(--ax-sp-2);
  flex-wrap: wrap;
  letter-spacing: -0.005em;
}

.ax-mo-headline--muted {
  font-weight: 500;
  color: var(--ax-graphite);
}

.ax-mo-card-detail {
  font-size: 12.5px;
  color: var(--ax-graphite);
  margin-top: 4px;
  line-height: var(--ax-lh-normal);
}

.ax-mo-detail--compact {
  font-size: 12px;
  color: var(--ax-soft);
  margin-top: 3px;
}

.ax-mo-weight-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ax-gold);
  background: transparent;
  border: 1px solid var(--ax-gold);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
  text-transform: uppercase;
}


/* ── Source tags ────────────────────────────────────────────────── */

.ax-mo-source-tag {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid;
  background: transparent;
}

.ax-mo-tag-structural { color: var(--ax-soft);     border-color: var(--ax-border-strong); }
.ax-mo-tag-official   { color: #3D6585;            border-color: currentColor; }
.ax-mo-tag-reaction   { color: #B14A00;            border-color: currentColor; }
.ax-mo-tag-portfolio  { color: var(--ax-gold);     border-color: currentColor; }
.ax-mo-tag-watchlist  { color: var(--ax-graphite); border-color: var(--ax-border-strong); }


/* ── Meta date + action link ────────────────────────────────────── */

.ax-mo-meta-date {
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  color: var(--ax-soft);
  letter-spacing: 0.03em;
}

.ax-mo-action-link {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ax-gold);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ax-dur) var(--ax-ease);
}

.ax-mo-action-link:hover {
  border-bottom-color: var(--ax-gold);
}


/* ── Portfolio hint (after portfolio block) ─────────────────────── */

.ax-mo-portfolio-hint {
  font-size: 12px;
  color: var(--ax-graphite);
  padding: var(--ax-sp-2) var(--ax-sp-4);
  background: var(--ax-panel-warm);
  border-left: 2px solid var(--ax-gold);
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  margin-top: var(--ax-sp-2);
}

.ax-mo-portfolio-hint a {
  color: var(--ax-gold);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}

.ax-mo-portfolio-hint a:hover {
  text-decoration: underline;
}


/* ── Empty state ────────────────────────────────────────────────── */

.ax-mo-empty {
  padding: var(--ax-sp-9) var(--ax-sp-5);
  text-align: center;
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  background: var(--ax-panel);
}

.ax-mo-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ax-border-strong);
  border-radius: 2px;
  margin: 0 auto var(--ax-sp-3);
  color: var(--ax-gold);
}

.ax-mo-empty-icon svg {
  width: 18px;
  height: 18px;
}

.ax-mo-empty-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: var(--ax-sp-2);
  color: var(--ax-black);
  letter-spacing: -0.005em;
}

.ax-mo-empty-sub {
  font-size: 13px;
  color: var(--ax-graphite);
  max-width: 440px;
  margin: 0 auto var(--ax-sp-5);
  line-height: var(--ax-lh-normal);
}

.ax-mo-empty-actions {
  display: flex;
  gap: var(--ax-sp-2);
  justify-content: center;
  flex-wrap: wrap;
}


/* ── Quiet state (no material signals) ──────────────────────────── */

.ax-mo-quiet-state {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ax-mo-quiet-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-graphite);
}

.ax-mo-quiet-date {
  font-family: var(--ax-font-mono);
  font-weight: 400;
  color: var(--ax-soft);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}

.ax-mo-quiet-detail {
  font-size: 12.5px;
  color: var(--ax-soft);
}

.ax-mo-quiet-filing {
  margin-top: 2px;
}

.ax-mo-quiet-link {
  color: var(--ax-gold);
  text-decoration: none;
  font-family: var(--ax-font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.ax-mo-quiet-link:hover {
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════ */
/* Watchlist — full standalone page                                    */
/* Used by watchlist.html. JS-rendered rows with profile-headline,     */
/* peer-rank/dimension chips, historical-position bar, "Treiber         */
/* anzeigen" disclosure, plus modal for details. Many JS selectors      */
/* depend on these class names — keep names stable (ax-wl-* prefix).    */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Wrap, header, search ───────────────────────────────────────── */

.ax-wl-wrap {
  padding: var(--ax-sp-5);
  max-width: 1100px;
  margin: 0 auto;
}

.ax-wl-header {
  display: flex;
  gap: var(--ax-sp-4);
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--ax-sp-4) var(--ax-sp-5);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  margin-bottom: var(--ax-sp-3);
  flex-wrap: wrap;
}

.ax-wl-title {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ax-black);
}

.ax-wl-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-normal);
}

.ax-wl-header-right {
  min-width: 0;
  max-width: 560px;
  flex: 1;
}

.ax-wl-search-box {
  background: var(--ax-panel-warm);
  border: 1px solid var(--ax-gold);
  border-radius: var(--ax-r-sm);
  padding: var(--ax-sp-3);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
}

.ax-wl-search-row {
  display: flex;
  gap: var(--ax-sp-2);
  min-width: 0;
}

.ax-wl-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
  padding: 9px 12px;
  font-family: var(--ax-font-sans);
  font-size: 14px;
  outline: none;
  background: var(--ax-panel);
  box-sizing: border-box;
  width: 100%;
  color: var(--ax-black);
}

.ax-wl-input:focus {
  border-color: var(--ax-gold);
  box-shadow: 0 0 0 2px var(--ax-panel-warm);
}

.ax-wl-add-btn {
  border: 1px solid var(--ax-gold);
  background: var(--ax-panel);
  border-radius: var(--ax-r-sm);
  padding: 9px 14px;
  font-family: var(--ax-font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ax-gold);
  cursor: pointer;
  transition: background var(--ax-dur) var(--ax-ease);
}

.ax-wl-add-btn:hover {
  background: var(--ax-panel-warm);
}

.ax-wl-hint {
  font-size: 11.5px;
  color: var(--ax-soft);
  margin-top: var(--ax-sp-2);
}


/* ── Search suggest dropdown ────────────────────────────────────── */

.ax-wl-suggest {
  display: none;
  position: absolute;
  left: var(--ax-sp-3);
  right: var(--ax-sp-3);
  top: 52px;
  border: 1px solid var(--ax-border-strong);
  background: var(--ax-panel);
  border-radius: var(--ax-r-sm);
  overflow: hidden;
  z-index: 50;
}

.ax-wl-s-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--ax-panel);
  padding: var(--ax-sp-3);
  cursor: pointer;
  display: flex;
  gap: var(--ax-sp-3);
  border-bottom: 1px solid var(--ax-border);
}

.ax-wl-s-item:hover {
  background: var(--ax-panel-warm);
}

.ax-wl-s-ticker {
  font-family: var(--ax-font-mono);
  font-weight: 700;
  min-width: 72px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ax-black);
}

.ax-wl-s-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ax-black);
}

.ax-wl-s-meta {
  font-size: 11px;
  color: var(--ax-soft);
  margin-top: 2px;
}

.ax-wl-s-badge {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--ax-border);
  border-radius: 2px;
  background: var(--ax-bg-soft);
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ax-soft);
  text-transform: uppercase;
}

.ax-wl-s-empty {
  padding: var(--ax-sp-3);
  color: var(--ax-soft);
  font-size: 13px;
}

.ax-wl-s-pills {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
}

.ax-wl-s-pill {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: 2px;
  padding: 1px 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color var(--ax-dur) var(--ax-ease),
              border-color var(--ax-dur) var(--ax-ease);
}

.ax-wl-s-pill:hover {
  color: var(--ax-gold);
  border-color: var(--ax-gold);
  background: transparent;
}


/* ── Summary bar ────────────────────────────────────────────────── */

.ax-wl-summary {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  margin-bottom: var(--ax-sp-3);
  display: flex;
  gap: var(--ax-sp-4);
  align-items: flex-start;
  flex-wrap: wrap;
}

.ax-wl-summary-left {
  flex: 1;
  min-width: 180px;
}

.ax-wl-summary-count {
  font-weight: 600;
  font-size: 14px;
  color: var(--ax-black);
  letter-spacing: -0.005em;
}

.ax-wl-summary-sentence {
  font-size: 12.5px;
  color: var(--ax-graphite);
  margin-top: 3px;
  line-height: var(--ax-lh-normal);
}

.ax-wl-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-2);
  align-items: center;
  padding-top: 2px;
}

.ax-wl-summary-chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--ax-gold);
  background: transparent;
  border-radius: 2px;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ax-gold);
  text-transform: uppercase;
}

.ax-wl-dist-details {
  width: 100%;
  margin-top: var(--ax-sp-2);
  border-top: 1px solid var(--ax-border);
  padding-top: var(--ax-sp-2);
}

.ax-wl-dist-details summary {
  cursor: pointer;
  font-family: var(--ax-font-mono);
  font-size: 11px;
  color: var(--ax-soft);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
}

.ax-wl-dist-details summary::-webkit-details-marker {
  display: none;
}

.ax-wl-dist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: var(--ax-sp-2);
}

.ax-wl-dist-row {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
}

.ax-wl-dist-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ax-black);
}

.ax-wl-dist-scale {
  position: relative;
  width: 100px;
  height: 8px;
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.ax-wl-dist-seg {
  flex: 1;
  height: 6px;
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: 2px;
}

.ax-wl-dist-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ax-gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--ax-panel), 0 0 0 3px var(--ax-gold);
}

.ax-wl-dist-na {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  color: var(--ax-soft);
}


/* ── List + cards ───────────────────────────────────────────────── */

.ax-wl-list {
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-2);
}

.ax-wl-card {
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-3) var(--ax-sp-4);
  display: flex;
  gap: var(--ax-sp-3);
  justify-content: space-between;
  align-items: flex-start;
}

.ax-wl-card-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ax-wl-card-header {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
  flex-wrap: wrap;
}

.ax-wl-card-ticker {
  font-family: var(--ax-font-mono);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ax-black);
  letter-spacing: 0.04em;
}

.ax-wl-card-name {
  font-size: 12.5px;
  color: var(--ax-graphite);
}

.ax-wl-card-index {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  border: 1px solid var(--ax-border-strong);
  background: transparent;
  padding: 2px 7px;
  border-radius: 2px;
  text-transform: uppercase;
}

.ax-wl-card-baseline {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-gold);
  border: 1px solid var(--ax-gold);
  background: transparent;
  padding: 2px 7px;
  border-radius: 2px;
  text-transform: uppercase;
}

.ax-wl-card-verdict {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ax-black);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.ax-wl-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-2);
}

.ax-wl-fact {
  font-size: 12px;
  color: var(--ax-graphite);
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
  padding: 3px 9px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.ax-wl-fact-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ax-soft);
  text-transform: uppercase;
}

.ax-wl-fact-value {
  font-weight: 600;
  color: var(--ax-black);
}


/* ── Historical placement badge (full-width strip) ──────────────── */
/* Built from JS in renderRow(). Variants set by zone × valuation:
   high-stretched / high / low-favorable / low / neutral. */

.ax-wl-placement-badge {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px 12px;
  border-left: 2px solid;
  border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0;
  cursor: default;
  font-size: 12px;
  line-height: 1.4;
}

.ax-wl-placement-badge--high-stretched {
  border-left-color: #B14A00;
  background: #FBEFE4;
  color: #B14A00;
}

.ax-wl-placement-badge--high {
  border-left-color: #B14A00;
  background: #FBEFE4;
  color: #B14A00;
}

.ax-wl-placement-badge--low-favorable {
  border-left-color: #4A6B3D;
  background: #F0EFE3;
  color: #4A6B3D;
}

.ax-wl-placement-badge--low {
  border-left-color: #4A6B3D;
  background: #F0EFE3;
  color: #4A6B3D;
}

.ax-wl-placement-badge--neutral {
  border-left-color: var(--ax-border-strong);
  background: var(--ax-bg-soft);
  color: var(--ax-graphite);
}

.ax-wl-placement-price {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.ax-wl-placement-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--ax-graphite);
  margin-left: 6px;
  opacity: 0.85;
}


/* ── Card right column (actions) ────────────────────────────────── */

.ax-wl-card-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}

.ax-wl-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  min-width: 130px;
}

.ax-wl-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--ax-border-strong);
  background: var(--ax-panel);
  border-radius: var(--ax-r-sm);
  padding: 7px 12px;
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ax-black);
  cursor: pointer;
  text-transform: uppercase;
  transition: background var(--ax-dur) var(--ax-ease),
              border-color var(--ax-dur) var(--ax-ease);
}

.ax-wl-btn:hover {
  background: var(--ax-bg-soft);
  border-color: var(--ax-gold);
}

.ax-wl-btn-primary {
  background: var(--ax-black);
  color: var(--ax-panel);
  border-color: var(--ax-black);
}

.ax-wl-btn-primary:hover {
  background: var(--ax-graphite);
  color: var(--ax-panel);
}

.ax-wl-btn-changed {
  border-color: var(--ax-gold);
  background: transparent;
  color: var(--ax-gold);
}

.ax-wl-btn-changed:hover {
  background: var(--ax-panel-warm);
  border-color: var(--ax-gold);
  color: var(--ax-gold);
}

.ax-wl-btn-danger {
  border-color: var(--ax-border);
  background: transparent;
  color: #B14A00;
}

.ax-wl-btn-danger:hover {
  background: #FBEFE4;
  border-color: #B14A00;
}


/* ── Signals disclosure (Treiber anzeigen) ──────────────────────── */

.ax-wl-card-sig-toggle {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
  cursor: pointer;
  padding: 4px 10px;
  margin-top: 6px;
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  color: var(--ax-soft);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ax-wl-card-sig-toggle::before {
  content: "▸";
  font-size: 9px;
  transition: transform var(--ax-dur) var(--ax-ease);
}

.ax-wl-card-sig-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.ax-wl-card-sig-toggle:hover {
  color: var(--ax-gold);
  border-color: var(--ax-gold);
}

.ax-wl-card-sig-toggle:focus-visible {
  outline: 2px solid var(--ax-gold);
  outline-offset: 2px;
}

.ax-wl-card-signals {
  flex-direction: column;
  gap: 2px;
  margin-top: var(--ax-sp-2);
}

.ax-wl-sig-row {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  padding: 4px 0;
  border-bottom: 1px solid var(--ax-border);
  font-size: 12px;
}

.ax-wl-sig-row:last-child {
  border-bottom: none;
}

.ax-wl-sig-name {
  flex: 1;
  color: var(--ax-black);
  font-weight: 600;
}

.ax-wl-sig-scale {
  position: relative;
  width: 80px;
  height: 8px;
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.ax-wl-sig-seg {
  flex: 1;
  height: 6px;
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: 2px;
}

.ax-wl-sig-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ax-gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--ax-panel), 0 0 0 3px var(--ax-gold);
}

.ax-wl-sig-status {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  min-width: 34px;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  background: transparent;
}

.ax-wl-sig-low  { color: var(--ax-soft);     border-color: var(--ax-border-strong); }
.ax-wl-sig-mid  { color: var(--ax-graphite); border-color: var(--ax-border-strong); }
.ax-wl-sig-high { color: var(--ax-panel);    border-color: var(--ax-black); background: var(--ax-black); }


/* ── Empty state ────────────────────────────────────────────────── */

.ax-wl-empty {
  max-width: 760px;
  margin: var(--ax-sp-2) auto 0;
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-5) var(--ax-sp-5);
  text-align: center;
  color: var(--ax-graphite);
  background: var(--ax-panel);
}

.ax-wl-empty-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--ax-black);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.ax-wl-empty-sub {
  max-width: 560px;
  margin: var(--ax-sp-2) auto 0;
  font-size: 13px;
  line-height: var(--ax-lh-normal);
  color: var(--ax-graphite);
}

.ax-wl-empty-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ax-sp-2);
  flex-wrap: wrap;
  margin-top: var(--ax-sp-4);
}

.ax-wl-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--ax-sp-4);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  background: var(--ax-panel);
  color: var(--ax-black);
  text-decoration: none;
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ax-dur) var(--ax-ease),
              border-color var(--ax-dur) var(--ax-ease);
}

.ax-wl-empty-btn:hover {
  background: var(--ax-bg-soft);
  border-color: var(--ax-gold);
}

.ax-wl-empty-btn-primary {
  border-color: var(--ax-gold);
  background: var(--ax-panel-warm);
  color: var(--ax-gold);
}

.ax-wl-empty-btn-primary:hover {
  background: var(--ax-panel-warm);
  border-color: var(--ax-gold);
}

.ax-wl-empty-note {
  margin-top: var(--ax-sp-3);
  font-size: 11.5px;
  color: var(--ax-soft);
}


/* ── Modal ──────────────────────────────────────────────────────── */

.ax-wl-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ax-sp-4);
  z-index: 2000;
}

.ax-wl-modal {
  width: min(800px, 100%);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  overflow: hidden;
}

.ax-wl-modal-header {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  border-bottom: 1px solid var(--ax-border);
  background: var(--ax-bg-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ax-wl-modal-sub {
  font-size: 12px;
  color: var(--ax-graphite);
  margin-left: var(--ax-sp-1);
}

.ax-wl-modal-close {
  border: 1px solid var(--ax-border-strong);
  background: var(--ax-panel);
  border-radius: var(--ax-r-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--ax-font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ax-graphite);
  text-transform: uppercase;
}

.ax-wl-modal-close:hover {
  border-color: var(--ax-gold);
  color: var(--ax-gold);
}

.ax-wl-modal-body {
  padding: var(--ax-sp-4);
  max-height: 70vh;
  overflow-y: auto;
}

.ax-wl-modal-kv {
  font-family: var(--ax-font-mono);
  font-size: 12px;
}

.ax-wl-modal-kv .k {
  color: var(--ax-black);
  font-weight: 700;
}

.ax-wl-modal-kv .v {
  color: var(--ax-graphite);
}

.ax-wl-modal-sec {
  margin-top: var(--ax-sp-4);
}

.ax-wl-modal-sec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--ax-black);
}

.ax-wl-modal-tag {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px solid var(--ax-border-strong);
  border-radius: 2px;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-graphite);
  background: transparent;
  text-transform: uppercase;
}

.ax-wl-modal-tag-gold {
  border-color: var(--ax-gold);
  color: var(--ax-gold);
}

.ax-wl-modal-muted {
  color: var(--ax-graphite);
  font-size: 12.5px;
  line-height: var(--ax-lh-normal);
}

.ax-wl-modal-ul {
  margin: var(--ax-sp-2) 0 0 var(--ax-sp-4);
  padding: 0;
}

.ax-wl-modal-ul li {
  margin: 5px 0;
  font-size: 13px;
  color: var(--ax-black);
}

.ax-wl-modal-row {
  display: flex;
  gap: var(--ax-sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--ax-sp-3);
}

.ax-wl-modal-btn {
  border: 1px solid var(--ax-border-strong);
  background: var(--ax-panel);
  border-radius: var(--ax-r-sm);
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--ax-font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ax-black);
  text-transform: uppercase;
}

.ax-wl-modal-btn:hover {
  background: var(--ax-bg-soft);
  border-color: var(--ax-gold);
}

.ax-wl-modal-btn-gold {
  border-color: var(--ax-gold);
  background: transparent;
  color: var(--ax-gold);
}

.ax-wl-modal-btn-gold:hover {
  background: var(--ax-panel-warm);
}

.ax-wl-modal-btn-danger {
  border-color: var(--ax-border);
  color: #B14A00;
}

.ax-wl-modal-btn-danger:hover {
  background: #FBEFE4;
  border-color: #B14A00;
}


/* ── Decision Memory block (in modal) ───────────────────────────── */

.ax-wc-memory-start {
  font-size: 12px;
  color: var(--ax-soft);
  padding: 6px 0 8px;
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
}

.ax-wc-memory-start-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  flex-shrink: 0;
  text-transform: uppercase;
}

.ax-wc-memory-block {
  margin-bottom: 4px;
}

.ax-wc-memory-question {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  margin-bottom: var(--ax-sp-2);
}

.ax-wc-final-sentence {
  font-size: 12.5px;
  color: var(--ax-graphite);
  margin: var(--ax-sp-2) 0 var(--ax-sp-3);
  line-height: var(--ax-lh-normal);
  font-style: italic;
}

.ax-wc-divider {
  border: none;
  border-top: 1px solid var(--ax-border);
  margin: var(--ax-sp-4) 0;
}

.ax-wc-dim-flat {
  color: var(--ax-soft);
  font-weight: 500;
}


/* ── Why-changed dialog (in modal) ──────────────────────────────── */

.ax-wc-wrap {
  font-family: var(--ax-font-sans);
}

.ax-wc-verdict-block {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  border-radius: var(--ax-r-sm);
  margin-bottom: var(--ax-sp-4);
  border-left: 2px solid;
}

.ax-wc-verdict-up      { background: var(--ax-bg-soft); border-left-color: var(--ax-gold); }
.ax-wc-verdict-down    { background: #FBEFE4;          border-left-color: #B14A00; }
.ax-wc-verdict-break   { background: #FBEFE4;          border-left-color: #B14A00; }
.ax-wc-verdict-mixed   { background: var(--ax-bg-soft); border-left-color: var(--ax-border-strong); }
.ax-wc-verdict-neutral { background: var(--ax-bg-soft); border-left-color: var(--ax-border-strong); }

.ax-wc-verdict-text {
  font-weight: 600;
  font-size: 15px;
  color: var(--ax-black);
  letter-spacing: -0.005em;
}

.ax-wc-verdict-sub {
  font-size: 13px;
  color: var(--ax-graphite);
  margin-top: 4px;
  line-height: var(--ax-lh-normal);
}

.ax-wc-transition {
  font-size: 12px;
  color: var(--ax-graphite);
  margin-top: 4px;
}

.ax-wc-since {
  font-family: var(--ax-font-mono);
  font-size: 10.5px;
  color: var(--ax-soft);
  margin-top: 4px;
  letter-spacing: 0.03em;
}

.ax-wc-section-title {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  margin: var(--ax-sp-4) 0 var(--ax-sp-2);
}

.ax-wc-dim-note {
  font-size: 11px;
  color: var(--ax-soft);
  margin-bottom: 6px;
}

.ax-wc-dim-current {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  color: var(--ax-soft);
  margin-left: auto;
  letter-spacing: 0.03em;
}

.ax-wc-dims {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ax-wc-dim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px var(--ax-sp-3);
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
}

.ax-wc-dim-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-black);
}

.ax-wc-dim-delta {
  font-family: var(--ax-font-mono);
  font-size: 13px;
  font-weight: 700;
}

.ax-wc-dim-pos { color: #4A6B3D; }
.ax-wc-dim-neg { color: #B14A00; }

.ax-wc-evidence-row {
  display: flex;
  gap: var(--ax-sp-3);
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--ax-border);
  font-size: 13px;
}

.ax-wc-evidence-row:last-child {
  border-bottom: 0;
}

.ax-wc-ev-label {
  font-family: var(--ax-font-mono);
  font-weight: 700;
  color: var(--ax-soft);
  min-width: 110px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ax-wc-ev-val {
  color: var(--ax-black);
}

.ax-wc-relevance {
  padding: var(--ax-sp-3) var(--ax-sp-4);
  border-radius: var(--ax-r-sm);
  border-left: 2px solid;
  font-size: 13px;
  font-weight: 600;
  line-height: var(--ax-lh-normal);
}

.ax-wc-rel-up      { background: var(--ax-bg-soft); border-left-color: var(--ax-gold); color: var(--ax-black); }
.ax-wc-rel-down    { background: #FBEFE4;          border-left-color: #B14A00; color: var(--ax-black); }
.ax-wc-rel-mixed   { background: var(--ax-bg-soft); border-left-color: var(--ax-border-strong); color: var(--ax-black); }
.ax-wc-rel-neutral { background: var(--ax-bg-soft); border-left-color: var(--ax-border-strong); color: var(--ax-graphite); }

.ax-wc-muted {
  font-size: 12.5px;
  color: var(--ax-soft);
  padding: 4px 0;
}


/* ── Monitor radar strip (compact horizontal) ───────────────────── */

.ax-wl-radar-strip {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 5px 0 2px;
  border-top: 1px solid var(--ax-border);
}

.ax-wl-radar-dir {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid;
  background: transparent;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ax-wl-radar-up     { color: var(--ax-gold);  border-color: currentColor; }
.ax-wl-radar-stable { color: var(--ax-soft);  border-color: var(--ax-border-strong); }
.ax-wl-radar-mixed  { color: #3D6585;         border-color: currentColor; }
.ax-wl-radar-down   { color: #B14A00;         border-color: currentColor; }
.ax-wl-radar-break  { color: #B14A00;         border-color: currentColor; background: #FBEFE4; }

.ax-wl-radar-att {
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid;
  background: transparent;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ax-wl-radar-att-high { color: #B14A00; border-color: currentColor; background: #FBEFE4; }
.ax-wl-radar-att-med  { color: var(--ax-gold); border-color: currentColor; }

.ax-wl-radar-reason {
  font-size: 12px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-normal);
  flex: 1;
  min-width: 0;
}


/* ── Watchlist mobile breakpoints ───────────────────────────────── */

@media (max-width: 860px) {
  .ax-wl-header { flex-direction: column; }
  .ax-wl-header-right { min-width: 0; width: 100%; }
  .ax-wl-dist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ax-wl-card { flex-direction: column; }
  .ax-wl-card-right { align-items: flex-start; width: 100%; }
  .ax-wl-actions { flex-direction: row; flex-wrap: wrap; }
  .ax-wl-empty { padding: var(--ax-sp-4); }
  .ax-wl-empty-actions { flex-direction: column; align-items: stretch; }
  .ax-wl-empty-btn { width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════ */
/* Compare Inner Page — query landing                                  */
/* Used by ax_compare_routes._render_compare_inner_page(). Search box, */
/* example chips, clarification, loading, result container.            */
/* Report-mode (.axc-*) styles stay in the Python module for now and   */
/* will be migrated in a follow-up.                                    */
/* ════════════════════════════════════════════════════════════════════ */


/* ── Page wrap + topbar ─────────────────────────────────────────── */

.ax-axc-page {
  font-family: var(--ax-font-sans);
  padding: var(--ax-sp-10) var(--ax-sp-7) var(--ax-sp-12);
  color: var(--ax-black);
  max-width: 1000px;
  margin: 0 auto;
  background: var(--ax-bg);
}

.ax-axc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ax-sp-4);
  margin-bottom: var(--ax-sp-8);
  padding-bottom: var(--ax-sp-5);
  border-bottom: 1px solid var(--ax-border);
}

.ax-axc-page-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ax-black);
  margin: 0 0 4px;
}

.ax-axc-page-subtitle {
  font-size: 13px;
  color: var(--ax-graphite);
  margin: 0;
  line-height: var(--ax-lh-normal);
}

.ax-axc-topbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ax-sp-2);
  flex-shrink: 0;
}


/* ── Brand badge (AssetNext + PRO/Trial) ────────────────────────── */

.ax-axc-tb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  font-family: var(--ax-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.ax-axc-tb-badge .an-asset { color: var(--ax-black); }
.ax-axc-tb-badge .an-next  { color: var(--ax-gold); }

.ax-axc-tb-badge .an-pro {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--ax-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ax-gold);
  background: transparent;
  border: 1px solid var(--ax-gold);
  border-radius: 2px;
  text-transform: uppercase;
}

.ax-axc-trial-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-gold);
  background: transparent;
  border: 1px solid var(--ax-gold);
  border-radius: 2px;
  text-transform: uppercase;
}


/* ── Search ─────────────────────────────────────────────────────── */

.ax-axc-search-area {
  margin-bottom: var(--ax-sp-7);
  padding: var(--ax-sp-5) var(--ax-sp-5);
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
}

.ax-axc-search-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  overflow: hidden;
  background: var(--ax-panel);
  transition: border-color var(--ax-dur) var(--ax-ease),
              box-shadow var(--ax-dur) var(--ax-ease);
}

.ax-axc-search-box:focus-within {
  border-color: var(--ax-gold);
  box-shadow: 0 0 0 2px var(--ax-panel-warm);
}

.ax-axc-search-icon {
  flex-shrink: 0;
  margin-left: var(--ax-sp-3);
  color: var(--ax-soft);
  opacity: 0.7;
}

.ax-axc-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 13px 12px;
  font-family: var(--ax-font-sans);
  color: var(--ax-black);
  background: transparent;
}

.ax-axc-input::placeholder {
  color: var(--ax-soft);
}

.ax-axc-search-btn {
  background: var(--ax-black);
  color: var(--ax-panel);
  border: none;
  cursor: pointer;
  padding: 0 var(--ax-sp-5);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ax-dur) var(--ax-ease);
  flex-shrink: 0;
}

.ax-axc-search-btn:hover {
  background: var(--ax-graphite);
}

.ax-axc-search-btn:disabled {
  opacity: 0.4;
  cursor: default;
}


/* ── Example chips ──────────────────────────────────────────────── */

.ax-axc-examples {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-2);
  flex-wrap: wrap;
  margin-top: var(--ax-sp-4);
}

.ax-axc-examples-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  color: var(--ax-soft);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: var(--ax-sp-1);
}

.ax-axc-example-chip {
  font-family: var(--ax-font-sans);
  font-size: 12.5px;
  padding: 6px 13px;
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  background: var(--ax-panel);
  cursor: pointer;
  color: var(--ax-graphite);
  transition: border-color var(--ax-dur) var(--ax-ease),
              color var(--ax-dur) var(--ax-ease),
              background var(--ax-dur) var(--ax-ease);
}

.ax-axc-example-chip:hover {
  border-color: var(--ax-gold);
  color: var(--ax-gold);
  background: var(--ax-panel-warm);
}


/* ── Ghost preview (faded full-report glimpse) ──────────────────── */
/* Real workshop blocks rendered statically. A mask-image fades the
   whole stack toward transparent at the bottom, so the eye reads it
   as "a report glimpse" rather than a mock card. */

.ax-axc-preview {
  position: relative;
  margin-top: var(--ax-sp-6);
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.ax-axc-preview-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-3);
  /* Vertical fade — top 60% solid, bottom 40% fades to 0 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.ax-axc-preview-block {
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-4) var(--ax-sp-5);
}

.ax-axc-preview-kicker {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ax-gold);
  text-transform: uppercase;
  margin-bottom: var(--ax-sp-3);
}

.ax-axc-preview-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ax-black);
  margin: 0 0 var(--ax-sp-2);
  line-height: 1.2;
}

.ax-axc-preview-summary {
  font-size: 14px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-relaxed);
  margin: 0;
}

.ax-axc-preview-section-label {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  text-transform: uppercase;
  margin-bottom: var(--ax-sp-3);
}

.ax-axc-preview-scores {
  display: flex;
  align-items: stretch;
  gap: var(--ax-sp-3);
}

.ax-axc-preview-score-card {
  flex: 1;
  background: var(--ax-bg-soft);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-sm);
  padding: var(--ax-sp-3) var(--ax-sp-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ax-axc-preview-score-card--winner {
  background: var(--ax-panel);
  border-color: var(--ax-gold);
  border-left-width: 2px;
}

.ax-axc-preview-score-ticker {
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  text-transform: uppercase;
}

.ax-axc-preview-score-number {
  font-family: var(--ax-font-mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--ax-black);
  letter-spacing: -0.02em;
  margin: 6px 0;
}

.ax-axc-preview-score-card--winner .ax-axc-preview-score-number {
  color: var(--ax-gold);
}

.ax-axc-preview-score-label {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  text-transform: uppercase;
}

.ax-axc-preview-vs {
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ax-soft);
  align-self: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Dimensions glimpse rows */
.ax-axc-preview-dim-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: var(--ax-sp-3);
  align-items: center;
  padding: var(--ax-sp-3) 0;
  border-bottom: 1px solid var(--ax-border);
}

.ax-axc-preview-dim-row:last-child {
  border-bottom: none;
}

.ax-axc-preview-dim-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-black);
}

.ax-axc-preview-dim-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ax-axc-preview-dim-bar-wrap {
  height: 6px;
  background: var(--ax-bg-soft);
  border-radius: 2px;
  overflow: hidden;
}

.ax-axc-preview-dim-bar {
  height: 100%;
  border-radius: 2px;
}

.ax-axc-preview-dim-bar--winner {
  background: var(--ax-gold);
  opacity: 0.85;
}

.ax-axc-preview-dim-bar--loser {
  background: var(--ax-border-strong);
}

.ax-axc-preview-dim-verdict {
  font-size: 12px;
  text-align: right;
  color: var(--ax-graphite);
}

.ax-axc-preview-dim-verdict strong {
  color: var(--ax-black);
  font-weight: 600;
}

/* CTA pill — floats over the fade, centered horizontally */
.ax-axc-preview-cta {
  position: absolute;
  left: 50%;
  bottom: var(--ax-sp-4);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--ax-black);
  color: var(--ax-panel);
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: background var(--ax-dur) var(--ax-ease);
  z-index: 2;
}

.ax-axc-preview:hover .ax-axc-preview-cta {
  background: var(--ax-graphite);
}

.ax-axc-preview-cta::after {
  content: "→";
  font-size: 14px;
}


/* ── Clarification block (hidden by default) ────────────────────── */

.ax-axc-clarification {
  background: var(--ax-panel);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-5) var(--ax-sp-6);
  margin-bottom: var(--ax-sp-4);
}

.ax-axc-clar-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ax-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  margin: 0 0 var(--ax-sp-3);
  text-transform: uppercase;
}

.ax-axc-clar-hint::before {
  content: "↳";
  color: var(--ax-border-strong);
}

.ax-axc-clar-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--ax-black);
  margin: 0 0 var(--ax-sp-4);
  letter-spacing: -0.005em;
}

.ax-axc-clar-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-2);
}

.ax-axc-clar-btn {
  font-family: var(--ax-font-mono);
  font-size: 11.5px;
  padding: 7px 14px;
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  background: var(--ax-panel);
  cursor: pointer;
  color: var(--ax-black);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: border-color var(--ax-dur) var(--ax-ease),
              background var(--ax-dur) var(--ax-ease);
}

.ax-axc-clar-btn:hover {
  border-color: var(--ax-gold);
  background: var(--ax-bg-soft);
}

.ax-axc-clar-btn--confirm {
  background: var(--ax-black);
  color: var(--ax-panel);
  border-color: var(--ax-black);
  padding: 7px 18px;
}

.ax-axc-clar-btn--confirm:hover {
  background: var(--ax-graphite);
  color: var(--ax-panel);
  border-color: var(--ax-graphite);
}

.ax-axc-clar-btn--wide {
  min-width: 180px;
}

.ax-axc-clar-custom {
  display: flex;
  gap: var(--ax-sp-2);
  margin-top: var(--ax-sp-4);
  align-items: center;
  padding-top: var(--ax-sp-4);
  border-top: 1px solid var(--ax-border);
}

.ax-axc-input--sm {
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r-sm);
  font-family: var(--ax-font-sans);
}


/* ── Loading state ──────────────────────────────────────────────── */

.ax-axc-loading {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  padding: var(--ax-sp-5) 0;
  font-family: var(--ax-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ax-soft);
  text-transform: uppercase;
}

.ax-axc-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ax-border);
  border-top-color: var(--ax-black);
  border-radius: 50%;
  animation: ax-axc-spin 0.6s linear infinite;
}

@keyframes ax-axc-spin {
  to { transform: rotate(360deg); }
}


/* ── Errors / unsupported ───────────────────────────────────────── */

.ax-axc-error {
  color: #B14A00;
  font-size: 14px;
  padding: var(--ax-sp-2) 0;
}

.ax-axc-unsupported {
  background: var(--ax-bg-soft);
  border: var(--ax-line);
  border-radius: var(--ax-r-md);
  padding: var(--ax-sp-5) var(--ax-sp-6);
  font-size: 14px;
  color: var(--ax-graphite);
  line-height: var(--ax-lh-relaxed);
}


/* ── Compare inner page mobile breakpoint ───────────────────────── */

@media (max-width: 720px) {
  .ax-axc-page {
    padding: var(--ax-sp-5) var(--ax-sp-4) var(--ax-sp-12);
  }
  .ax-axc-topbar { flex-direction: column; align-items: flex-start; }
  .ax-axc-topbar-right { align-items: flex-start; }
}


@media (max-width: 720px) {
  .ax-page-inner {
    padding: var(--ax-sp-6) var(--ax-sp-5) var(--ax-sp-12);
  }
  :root {
    --ax-fs-page-title: 28px;
  }
  .ax-table th,
  .ax-table td {
    padding: var(--ax-sp-2);
  }
  .ax-breakdown-row {
    grid-template-columns: 1fr 60px 44px;
  }
}

@media (max-width: 900px) {
  .ax-shell {
    padding: 0 var(--ax-sp-4) var(--ax-sp-5);
  }
  .ax-topnav, .ax-subnav { flex-wrap: wrap; }
  .ax-tab { padding: var(--ax-sp-3) var(--ax-sp-4); font-size: 13.5px; }
  .ax-subtab { padding: var(--ax-sp-3) var(--ax-sp-3); }
}

/* ── Badges (deskriptive Klassen-Labels) ───────────────────────── */
/* REIT, BDC, Zyklisch — neben Firmennamen in Listen und Reports. */
/* Bewusst zurückhaltend; Beschreibung, keine Bewertung.            */

.ax-badges {
  display: inline-flex;
  gap: var(--ax-sp-1);
  margin-left: var(--ax-sp-2);
  vertical-align: baseline;
}

.ax-badge {
  display: inline-block;
  padding: 1px var(--ax-sp-2);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
  white-space: nowrap;
  border-radius: var(--ax-r-sm);
  cursor: help;
  background: var(--ax-bg-soft);
  color: var(--ax-muted);
  border: 1px solid var(--ax-border);
  transition: background 0.15s ease, color 0.15s ease;
}

.ax-badge:hover {
  background: var(--ax-panel-warm);
  color: var(--ax-text);
  border-color: var(--ax-border-strong);
}

/* M-REIT — etwas kräftiger als Default */
.ax-badge-mortgage-reit {
  background: var(--ax-panel-warm);
  color: var(--ax-graphite);
  border-color: var(--ax-gold-soft);
}

/* Equity-REIT — wie Default, leicht hervorgehoben */
.ax-badge-equity-reit {
  background: var(--ax-bg-soft);
  color: var(--ax-graphite);
  border-color: var(--ax-gold-soft);
}

/* BDC — wie M-REIT */
.ax-badge-bdc {
  background: var(--ax-panel-warm);
  color: var(--ax-graphite);
  border-color: var(--ax-gold-soft);
}

/* Zyklisch — bewusst dezent, kein Warnsignal */
.ax-badge-cyclical {
  background: var(--ax-bg-soft);
  color: var(--ax-muted);
  border-color: var(--ax-border-strong);
}

/* Im Page-Title (Company-Report) sollen Badges etwas mehr Atem haben */
.pagetitle .ax-badges {
  margin-left: var(--ax-sp-3);
}

.pagetitle .ax-badge {
  font-size: 10.5px;
  padding: 2px var(--ax-sp-2);
  vertical-align: middle;
}

/* In der Listen-Tabelle (.companycol) kompakter */
.companycol .ax-badges {
  margin-left: var(--ax-sp-1);
}

.companycol .ax-badge {
  font-size: 10px;
  padding: 0px var(--ax-sp-1);
  letter-spacing: 0.03em;
}