/* Tema chiaro della proposta: avorio e sabbia, ruggine Swipeit e oro secondario. */
:root {
  --bg: #fbf9f5;
  --surface: #f5f1e8;
  --surface-high: #eee7d8;
  --text: #1c1b18;
  --body-text: #403c35;
  --muted: #5a554c;
  --rust: #c85a2a;
  --rust-light: #9a411d;
  --saffron: #d4a017;
  --line: #dfd6c3;
  color-scheme: light;
}

.story p { color: var(--body-text); }

.site-header { background: var(--bg); color: var(--text); }

.brand span, h1 em, .footer-title em { color: var(--rust); }

.app-link { background: #b94f24; color: #fff; }
.app-link:hover { background: #ad4820; color: #fff; }

::selection { background: #f2d6c8; color: var(--text); }
::-webkit-scrollbar-thumb { background: #b9ac90; }

.bar-track {
  background: #e7dfcf;
  border-radius: 3px;
  overflow: hidden;
}

.visual-bar-cell .bar-track { height: 6px; margin-top: 8px; }
.bar-fill { height: 100%; background: var(--rust); }
.bar-fill.estimate-fill { background: var(--rust); }
.bar-fill.eu-average { background: #746955; }

.stacked-chart { margin-bottom: 22px; }
.stacked-bar {
  display: flex;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.stacked-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-inline: 3px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}
.stacked-segment + .stacked-segment { border-left: 1px solid var(--bg); }
.stacked-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.5; }
.legend-swatch { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 2px; }
.seg-gold-1 { background: #b94f24; color: #fff; }
.seg-gold-2 { background: var(--saffron); color: #1c1b18; }
.seg-sand-dark { background: #9e927e; color: #1c1b18; }
.seg-sand-mid { background: #c4b89f; color: #1c1b18; }
.seg-sand-light { background: #e7dfcf; color: #1c1b18; }
.seg-alert-gold { background: #9a411d; color: #fff; }

.cost-list > div, .timeline li, .algorithm-flow li { border-bottom-color: var(--line); }
.human-review { border-top-color: var(--line); color: var(--body-text); }
.timeline time, .complaint-path li > span { color: var(--rust-light); }

@media (max-width: 600px) {
  .stacked-bar { height: 58px; }
  .stacked-segment { font-size: 9px; }
}