/* ====================================================================
   yearly.css — Yearly Analysis module (stm-modal → Yearly tab)
   Prefix: yr-  |  Uses design tokens from global.css
   ==================================================================== */

.yr-root {
  font-family: var(--font-ui);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

/* --- Subtabs (shared style with app tabs) --- */
.yr-subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
}
.yr-tab {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ease), border-color var(--ease);
}
.yr-tab:hover { color: var(--text-bright); }
.yr-tab.active {
  color: var(--text-bright);
  border-bottom-color: var(--text-bright);
}

.yr-body { flex: 1; display: flex; flex-direction: column; gap: 14px; }

.yr-loading,
.yr-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  background: var(--hover-subtle);
  border-radius: var(--radius-md);
}

.yr-up   { color: var(--green) !important; }
.yr-dn   { color: var(--red)   !important; }
.yr-neu  { color: var(--blue)  !important; }
.yr-b    { font-weight: 600; }

/* ====================================================================
   AUTO INSIGHTS
   ==================================================================== */
.yr-insights-head { padding: 4px 2px 8px; }
.yr-insights-title { font-size: 1.05rem; font-weight: 600; color: var(--text-bright); letter-spacing: 0.01em; }

.yr-ins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  .yr-ins-grid { grid-template-columns: 1fr; }
}

.yr-ins-card {
  background: var(--hover-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.yr-ins-card.yr-ins-hero {
  background:
    radial-gradient(120% 100% at 0% 0%, var(--green-subtle), transparent 55%),
    var(--hover-subtle);
  border-color: var(--green-strong);
}

.yr-ins-period {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.yr-ins-card.yr-ins-hero .yr-ins-period { font-size: 2rem; }

.yr-ins-period-sub {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 14px;
}

.yr-ins-question {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 22px;
}

.yr-ins-prob-num {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 6px;
}
.yr-ins-card.yr-ins-hero .yr-ins-prob-num { font-size: 3.6rem; }

.yr-ins-prob-lbl {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 22px;
}

.yr-ins-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.yr-ins-foot > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.yr-ins-foot-lbl {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.2;
}
.yr-ins-foot strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

/* Lettura discorsiva integrata nella card (sotto la % / label, sopra il footer) */
.yr-ins-narrative {
  margin: 12px 0 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.yr-ins-narrative p { margin: 0; }
.yr-ins-narrative b { color: var(--text-bright); font-weight: 600; }
.yr-ins-narrative .yr-up { color: var(--green); }
.yr-ins-narrative .yr-dn { color: var(--red); }

.yr-ins-empty {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 18px 8px;
  text-align: center;
}

.yr-insights-narr {
  background: var(--hover-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}
.yr-insights-narr p { margin: 0 0 10px 0; }
.yr-insights-narr p:last-child { margin-bottom: 0; }
.yr-insights-narr b { color: var(--text-bright); }

/* ====================================================================
   ANALYSIS — form, answer hero, perf strip, dist+trend grid, data table
   ==================================================================== */
.yr-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  background: var(--hover-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
}
@media (max-width: 1100px) {
  .yr-form { grid-template-columns: repeat(2, 1fr); }
  .yr-form .yr-field-action { grid-column: 1 / -1; }
}
.yr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yr-field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute, var(--text-dim));
  font-weight: 600;
}
.yr-field select,
.yr-input {
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  padding: 0 10px;
  height: 36px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--ease), background var(--ease);
}
.yr-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238a90ab' d='M6 9L1 4h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.yr-field select:focus, .yr-field select:hover,
.yr-input:focus, .yr-input:hover {
  border-color: var(--border-hi, var(--border-strong, var(--border)));
  background: rgba(255, 255, 255, .06);
}
.yr-field select option {
  background-color: #1a1d2a !important;
  color: #e8ebf4 !important;
  font-family: var(--font-ui);
  padding: 6px 10px;
}
.yr-field select option:checked {
  background: #2a2f42 !important;
  color: #e8ebf4 !important;
  font-weight: 600;
}

.yr-ref-extra-wrap,
.yr-cond-extra-wrap { display: contents; }

.yr-field-action { justify-content: flex-end; align-self: end; }
.yr-btn-primary {
  background: var(--pill-active-bg, var(--gold, #c9a25d));
  color: var(--pill-active-color, #1a1a1a);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 18px;
  cursor: pointer;
  transition: filter var(--ease);
  height: 36px;
}
.yr-btn-primary:hover { filter: brightness(1.05); }

/* --- Auto-fill hint (slim, inline) --- */
.yr-autofill {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 6px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.yr-autofill:empty { display: none; }
.yr-autofill-lbl {
  display: inline-block;
  padding: 3px 9px;
  background: var(--hover-medium);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.yr-autofill b { color: var(--text-bright); font-weight: 600; }

/* --- Answer hero --- */
.yr-answer {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(38, 217, 127, .06), transparent 55%),
    var(--bg-card, var(--hover-subtle));
  border: 1px solid rgba(38, 217, 127, .18);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.yr-answer-neu {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(201, 162, 93, .06), transparent 55%),
    var(--bg-card, var(--hover-subtle));
  border-color: rgba(201, 162, 93, .18);
}
.yr-answer-neg {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(240, 80, 110, .06), transparent 55%),
    var(--bg-card, var(--hover-subtle));
  border-color: rgba(240, 80, 110, .18);
}
.yr-answer-question {
  font-size: 1.6rem;
  color: var(--text-bright);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  max-width: 900px;
}
.yr-answer-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.4fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 1100px) {
  .yr-answer-body { grid-template-columns: 1fr; }
}
.yr-prob-block {
  display: flex;
  align-items: center;
  gap: 22px;
}
.yr-donut {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  display: block;
}
.yr-prob-num {
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.yr-prob-pos { color: var(--green); }
.yr-prob-neu { color: var(--gold, #c9a25d); }
.yr-prob-neg { color: var(--red); }
.yr-prob-lbl {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 6px;
  max-width: 220px;
}
.yr-sample {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  padding-left: 28px;
  border-left: 1px solid var(--border);
}
@media (max-width: 1100px) {
  .yr-sample { padding-left: 0; border-left: none; padding-top: 18px; border-top: 1px solid var(--border); }
}
.yr-sample-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yr-sample-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute, var(--text-dim));
  font-weight: 600;
}
.yr-sample-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
}
.yr-sample-val small { font-size: 0.85rem; color: var(--text-dim); font-weight: 400; }
.yr-sample-sub { font-size: 0.78rem; color: var(--text-dim); }

/* --- Performance strip (4 cells) --- */
.yr-perf-strip {
  background: var(--bg-card, var(--hover-subtle));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
}
.yr-perf-strip:empty { display: none; }
@media (max-width: 1100px) {
  .yr-perf-strip { grid-template-columns: 1fr 1fr; }
}
.yr-perf-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yr-perf-lbl { font-size: 0.78rem; color: var(--text-dim); }
.yr-perf-val {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --- Detail grid (Distribuzione + Trend side-by-side) --- */
.yr-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .yr-detail-grid { grid-template-columns: 1fr; }
}
.yr-panel {
  background: var(--bg-card, var(--hover-subtle));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.yr-panel:empty { display: none; }
.yr-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 22px 0;
}
.yr-panel-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.01em;
}
.yr-panel-meta {
  font-size: 0.72rem;
  color: var(--text-mute, var(--text-dim));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.yr-panel-body { padding: 18px 22px 20px; flex: 1; }

/* --- Histogram chart (distribution) --- */
.yr-chart {
  position: relative;
  margin-bottom: 18px;
}
.yr-chart-yhint {
  position: absolute;
  left: 0;
  top: 0;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 12px;
  font-size: 0.7rem;
  color: var(--text-mute, var(--text-dim));
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.yr-chart-plot, .yr-trend-plot {
  position: relative;
  margin-left: 36px;
  height: 220px;
}
.yr-grid-h {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.yr-grid-h::before, .yr-grid-h::after, .yr-grid-h > span {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .05);
}
.yr-grid-h::before { top: 25%; }
.yr-grid-h::after { top: 50%; }
.yr-grid-h > span { top: 75%; }

.yr-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
}
.yr-marker.zero { background: rgba(255, 255, 255, .18); }
.yr-marker.median { border-left: 1px dashed var(--blue); width: 0; }
.yr-marker.mean { border-left: 1px dashed var(--gold, #c9a25d); width: 0; }
.yr-marker-lbl {
  position: absolute;
  top: -16px;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.yr-marker.median .yr-marker-lbl { color: var(--blue); }
.yr-marker.mean .yr-marker-lbl { color: var(--gold, #c9a25d); }

.yr-histo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.yr-histo-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity var(--ease), filter var(--ease);
}
.yr-histo-bar.pos { background: var(--green); opacity: .9; }
.yr-histo-bar.neg { background: var(--red); opacity: .85; }
.yr-histo-bar:hover { opacity: 1; filter: brightness(1.1); }
.yr-bar-up { background: var(--green); }
.yr-bar-dn { background: var(--red); }

.yr-trend-axis {
  position: relative;
  margin-left: 36px;
  height: 22px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.yr-axis-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--text-mute, var(--text-dim));
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.yr-axis-tick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--border-strong, var(--border));
}

/* --- Trend bar histogram (year-by-year) --- */
.yr-trend-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.yr-trend-bars::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, .18);
  pointer-events: none;
}
.yr-trend-bar {
  flex: 1;
  height: 100%;
  position: relative;
}
.yr-trend-bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity var(--ease), filter var(--ease);
}
.yr-trend-bar-fill.pos { background: var(--green); opacity: .9; bottom: 50%; }
.yr-trend-bar-fill.neg { background: var(--red); opacity: .85; top: 50%; border-radius: 0 0 2px 2px; }
.yr-trend-bar:hover .yr-trend-bar-fill { opacity: 1; filter: brightness(1.1); }
.yr-trend-mean {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--gold, #c9a25d);
  opacity: .55;
  pointer-events: none;
}

/* --- Detail foot (legend) --- */
.yr-detail-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.yr-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.yr-legend-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.yr-legend-item strong { color: var(--text-bright); font-weight: 600; }
.yr-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: 4px;
}
.yr-swatch.yr-bar-up { background: var(--green); }
.yr-swatch.yr-bar-dn { background: var(--red); }
.yr-swatch.yr-swatch-median { background: var(--blue); }
.yr-swatch.yr-swatch-mean { background: var(--gold, #c9a25d); }

/* --- Data table panel --- */
.yr-data-panel {
  background: var(--bg-card, var(--hover-subtle));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
}
.yr-data-panel:empty { display: none; }
.yr-data-panel .yr-panel-head {
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--border);
}
.yr-data-table-wrap {
  max-height: 360px;
  overflow-y: auto;
}
.yr-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.yr-data-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-card, var(--hover-subtle));
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute, var(--text-dim));
  font-weight: 600;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border);
}
.yr-data-table thead th.num { text-align: right; }
.yr-data-table tbody td {
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.yr-data-table tbody td.num { text-align: right; }
.yr-data-table tbody tr:hover { background: var(--hover-subtle); }
.yr-data-table tbody tr:last-child td { border-bottom: none; }
.yr-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.yr-pill-pos { background: rgba(38, 217, 127, .12); color: var(--green); }
.yr-pill-neg { background: rgba(240, 80, 110, .12); color: var(--red); }

.yr-loading {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 30px;
  text-align: center;
}

/* ====================================================================
   PREDICTORS
   ==================================================================== */
.yr-pred-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 4px;
}
.yr-pred-modes { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.yr-pred-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.4; }
.yr-pred-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.yr-pred-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  min-height: 420px;
}
@media (max-width: 1100px) {
  .yr-pred-body { grid-template-columns: 1fr; }
}

.yr-pred-table {
  background: var(--hover-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.yr-pred-grid-head,
.yr-pred-row {
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 110px;
  align-items: center;
  padding: 10px 14px;
  font-size: 0.88rem;
}
.yr-pred-grid-head {
  background: var(--hover-medium);
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.yr-pred-row {
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--ease);
}
.yr-pred-row:hover { background: var(--hover-subtle); }
.yr-pred-row.active {
  background: var(--hover-medium);
  border-left: 3px solid var(--text-bright);
  padding-left: 11px;
}
.yr-pred-period { font-weight: 600; color: var(--text-bright); }

.yr-pred-side {
  background: var(--hover-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.yr-pred-side-head {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.yr-side-equity {
  width: 100%;
  height: 240px;
  background: transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.yr-side-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.yr-side-kpi {
  background: var(--hover-medium);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.yr-side-kpi-lbl { font-size: 0.78rem; color: var(--text-dim); }
.yr-side-kpi-val { font-size: 1rem; font-weight: 600; color: var(--text-bright); }

/* ====================================================================
   SIDE INSIGHT (stm-insight-area)
   ==================================================================== */
.yr-side-loading { color: var(--text-dim); font-size: 0.85rem; padding: 10px; }
.yr-side-block {
  padding: 10px 12px;
  background: var(--hover-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.yr-side-head {
  font-size: 0.85rem;
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 6px;
}
.yr-side-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}
.yr-side-row span { color: var(--text-dim); }
.yr-side-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 10px;
  padding: 8px;
  border-top: 1px solid var(--border);
  line-height: 1.4;
}

/* ====================================================================
   Modal side panel — Yearly Predictors (sostituisce la lista YTD/Q/M)
   ==================================================================== */
.yr-side-predictors {
  padding: 4px 0;
}
.yr-side-predictors-title {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.yr-side-predictors-body {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text);
}
.yr-side-predictors-body p { margin: 0 0 10px 0; }
.yr-side-predictors-body p:last-child { margin-bottom: 0; }
.yr-side-predictors-body b { font-weight: 700; }
.yr-side-predictors-body .yr-up { color: var(--green, #26d97f); font-weight: 700; }
.yr-side-predictors-body .yr-dn { color: var(--red, #f0506e); font-weight: 700; }

/* ====================================================================
   Sidebar Yearly Predictors — narrative compatta nella tab Statistics
   ==================================================================== */
.yr-sb-predictors-wrap .yr-sb-predictors-body {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
}
.yr-sb-predictors-wrap .yr-sb-predictors-body p {
  margin: 0 0 8px 0;
}
.yr-sb-predictors-wrap .yr-sb-predictors-body p:last-child { margin-bottom: 0; }
.yr-sb-predictors-wrap .yr-sb-predictors-body b { font-weight: 700; }
.yr-sb-predictors-wrap .yr-sb-predictors-body .yr-up { color: var(--green, #26d97f); font-weight: 700; }
.yr-sb-predictors-wrap .yr-sb-predictors-body .yr-dn { color: var(--red, #f0506e); font-weight: 700; }
.yr-sb-predictors-wrap .yr-side-loading {
  font-size: 0.84rem;
  color: var(--text-dim);
  padding: 8px 4px;
  text-align: center;
}

/* ====================================================================
   Annual Returns Distribution — bricks chart
   "151 Years of S&P 500" style: ogni anno = brick etichettato,
   colonne raggruppate per bin di rendimento (10%).
   ==================================================================== */
/* Standalone wrapper — bricks card surfaced at the top of every Statistics section */
.stm-bricks-section {
  margin: 0 0 18px;
  position: relative;
  z-index: 101; /* above sticky headers (z-index 100) so they can't ride over the card */
}

/* Section sticky header is normally pulled up with margin-top:-24px to cancel the
   modal padding when it's the first child. With the bricks card prepended it must
   sit BELOW the bricks, not on top of it. Neutralize the negative pull and reset
   the sticky offset so it still glues at the top of the viewport once scrolled. */
.stm-bricks-section + .stm-section-sticky-header,
.stm-bricks-section + .stm-ret-controls {
  margin-top: 0;
  top: 0;
}

.yr-bricks-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 22px 26px;
  position: relative;
  overflow: hidden;
}

/* Chart area wraps brand watermark + stacks so the brand sits inside the chart */
.yr-bricks-chart-area {
  position: relative;
}

/* Brand mark acts as watermark — top-left of CHART AREA, semi-transparent, behind bricks */
.yr-bricks-brand {
  position: absolute;
  top: 6px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.16;
}
.yr-bricks-brand img {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.yr-bricks-brand span {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .yr-bricks-brand img { width: 28px; height: 28px; }
  .yr-bricks-brand span { font-size: 20px; }
}

/* Floating tooltip — follows cursor */
.yr-bricks-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: rgba(20, 22, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font-ui);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.08s ease;
  z-index: 10;
  white-space: nowrap;
  min-width: 70px;
}
.yr-bricks-tooltip.show { opacity: 1; }
.yr-tip-year {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.yr-tip-ret {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.yr-tip-ret.yr-up { color: var(--green, #26d97f); }
.yr-tip-ret.yr-dn { color: var(--red, #f0506e); }
.yr-bricks-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  min-height: 32px;
}
.yr-bricks-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.3px;
  text-align: center;
}
.yr-bricks-sort-selector,
.yr-bricks-bin-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 4px 3px 8px;
  border-radius: var(--radius-sm);
}

/* Options toggle (right side of header) */
.yr-bricks-options-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.yr-bricks-options-toggle:hover {
  color: var(--text-bright);
  background: rgba(255, 255, 255, 0.08);
}
.yr-bricks-options-toggle.open {
  color: var(--pill-active-color, var(--text-bright));
  background: var(--pill-active-bg, rgba(255, 255, 255, 0.14));
  border-color: transparent;
}
.yr-bricks-options-toggle svg { display: block; }

/* Collapsible options panel — sort + bin + slider in one row */
.yr-bricks-options-panel {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 14px;
  margin: -6px 0 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 2;
}
.yr-bricks-options-panel.open { display: flex; }
.yr-bricks-options-panel .yr-bricks-slider-row {
  flex: 1;
  min-width: 220px;
  margin: 0;
  padding: 0;
}
.yr-bricks-pill-label {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding-right: 2px;
}
.yr-bricks-pill-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--ease), color var(--ease);
}
.yr-bricks-pill-btn:hover { color: var(--text-bright); }
.yr-bricks-pill-btn.active {
  background: var(--pill-active-bg, rgba(255, 255, 255, 0.14));
  color: var(--pill-active-color, var(--text-bright));
}

.yr-bricks-stacks {
  display: grid;
  align-items: end;
  gap: 3px;
  min-height: 240px;
  max-height: 650px;
  padding: 4px 0;
  position: relative;
  z-index: 1;
  container-type: inline-size; /* abilita cqw per il font dei brick (vincolo larghezza colonna) */
}
.yr-bricks-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}
.yr-brick {
  height: 22px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font = min(vincolo ALTEZZA via --brick-fz, vincolo LARGHEZZA colonna ~30cqw/numBin):
     così l'anno non sborda né in verticale né in orizzontale quando il pannello si stringe */
  font-size: min(var(--brick-fs, 0.72rem), calc(30cqw / var(--nb, 10)));
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease);
  user-select: none;
  flex-shrink: 0;
}

/* Year-limit slider — single handle, lab-derived from sn-slider */
.yr-bricks-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 6px 4px 0;
  font-family: var(--font-ui);
}
.yr-bricks-slider-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.yr-bricks-slider-value {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}
.yr-bricks-slider-max {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}
.yr-bricks-slider-container {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
}
.yr-bricks-slider-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.yr-bricks-slider-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  height: 6px;
  border-radius: 3px;
  background: #d9b66a;
  pointer-events: none;
}
.yr-bricks-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: grab;
  z-index: 2;
}
.yr-bricks-slider-handle:hover {
  transform: translate(-50%, -50%) scale(1.12);
}
.yr-bricks-slider-handle:active { cursor: grabbing; }
.yr-brick:hover {
  transform: scale(1.08);
  filter: brightness(1.18);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  z-index: 2;
  position: relative;
}
/* Anno corrente: anello accent ben visibile in entrambi i temi (l'outline bianco
   spariva su sfondo chiaro). Il colore del testo lo decide la luminanza inline. */
.yr-brick-current {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 30%, transparent);
  font-weight: 800;
  position: relative;
  z-index: 3;
}

/* Axis: linea continua + tick label posizionate ai boundary dei bin */
.yr-bricks-axis-track {
  position: relative;
  margin-top: 10px;
  padding-top: 14px;
  height: 42px;
}
.yr-bricks-axis-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--border);
}
.yr-bricks-tick {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.yr-bricks-tick-first { transform: translateX(0); align-items: flex-start; }
.yr-bricks-tick-last  { transform: translateX(-100%); align-items: flex-end; }
.yr-bricks-tick-mark {
  width: 1px;
  height: 6px;
  background: var(--border);
  margin-bottom: 4px;
}
.yr-bricks-tick-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.2px;
}

@media (max-width: 1100px) {
  .yr-brick { height: 19px; font-size: 0.66rem; }
  .yr-bricks-tick-label { font-size: 0.72rem; }
}
@media (max-width: 800px) {
  .yr-bricks-stacks { gap: 2px; min-height: 180px; }
  .yr-brick { height: 16px; font-size: 0.6rem; border-radius: 2px; }
  .yr-bricks-tick-label { font-size: 0.66rem; }
}


/* ── Statistics workspace: highlight mattoncini anno (yr-brick-hl) ── */
.yr-brick-hl {
  outline: 2px solid var(--purple); outline-offset: 1px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 35%, transparent);
  z-index: 3; position: relative;
  animation: brickPulse 1.1s ease-in-out 2;
}