.year-strip {
  gap: 6px;
}
.timeline-controls{width:100%;min-width:0}
.timeline-range{min-width:0}
.timeline-controls input{width:100%;min-width:0}
.timeline-range-ends{display:none}
.timeline-controls button{width:100%;min-width:0}
.timeline-details-toggle { display:none; }
.year-strip-label{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:22px 2px 10px;color:var(--muted)}
.year-strip-label div strong,.year-strip-label div span{display:block}.year-strip-label div strong{color:var(--ink);font-size:16px}.year-strip-label div span{margin-top:5px;font:14px/1.35 Georgia,serif}.year-strip-label>b{flex:0 0 auto;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.04em}

.step:last-child {
  container-type: inline-size;
  container-name: timeline;
}

.year-strip.is-leasehold {
  display: grid;
  grid-template-columns: repeat(10,minmax(0,1fr));
  padding: 3px;
}

.year-cell {
  min-width: 0;
  min-height: 72px;
  border-radius: 10px;
  padding: 10px 6px;
  color: var(--ink);
  border: 1px solid rgba(13, 71, 59, .12);
  transition: transform .16s, outline-color .16s;
  scroll-snap-align: start;
  overflow: hidden;
}

.metric-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #eee9e0;
}
.metric-label{display:none;margin:0;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

.metric-option {
  padding: 14px 16px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.metric-option strong,
.metric-option small { display: block; }
.metric-option small { margin-top: 5px; line-height: 1.35; }
.metric-option.is-active { color: var(--ink); background: var(--card); box-shadow: inset 0 -3px var(--accent),0 2px 8px rgba(29,51,44,.06); }
.metric-option.is-disabled {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
}

.year-cell:hover {
  transform: translateY(-2px);
}

.year-cell.is-active {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
}
.year-cell.is-neutral { color: var(--muted); }
.year-cell b { font-size: 17px; line-height: 1; }
.year-cell b i { font-size: .62em; font-style: normal; font-weight: 700; }
.year-cell small { font-size: 12px; line-height: 1.15; }
.year-cell em { display: block; margin-top: 6px; font-size: 12px; line-height: 1.15; font-style: normal; font-weight: 800; opacity: 1; white-space: nowrap; color: var(--ink); }

.heat-legend { display: grid; grid-template-columns: auto minmax(180px,320px) auto; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.heat-legend i { height: 11px; border-radius: 999px; background: linear-gradient(90deg,rgb(219 233 223) 0%,rgb(221 234 207) 6%,rgb(228 231 187) 11%,rgb(235 224 166) 17%,rgb(238 211 157) 29%,rgb(232 181 143) 57%,rgb(211 143 130) 100%); }
.heat-ticks { grid-column: 2; display: grid; grid-template-columns: repeat(5,1fr); margin-top: -6px; font-size: 10px; text-align: center; }
.heat-legend small { grid-column: 1 / -1; }

@container timeline (max-width: 1050px) {
  .year-strip.is-leasehold,
  .year-strip:not(.is-leasehold) {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 9px;
  }
  .year-cell { min-height: 84px; }
  .year-cell em { font-size: 12px; }
}

@media (max-width: 900px) {
  .step:last-child {
    display: flex;
    flex-direction: column;
    margin: 0 -10px;
    padding: 24px 14px 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #f2eee6;
  }
  .step:last-child .step-heading { order: 1; }
  .step:last-child .metric-label{display:block;order:2;margin:0 2px 7px}
  .step:last-child .metric-switch { order: 2; }
  .step:last-child .timeline-card { order: 3; margin-top: 0; }
  .step:last-child .timeline-details-toggle { order:5; display:flex; margin-top:12px; }
  .step:last-child .timeline-details { order:6; }
  .step:last-child .year-strip-label { display:none; }
  .step:last-child .timeline-controls {
    order: 4;
    width:100%;
    min-width:0;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .step:last-child .year-strip,.step:last-child .heat-legend{display:none}
  .metric-switch{grid-template-columns:1fr 1fr;gap:4px;margin:8px 0 14px;padding:4px;border-radius:14px}
  .metric-option{padding:11px 10px;border-radius:10px;text-align:center}
  .metric-option strong{font-size:14px}
  .metric-option small{display:none}
  .metric-option.is-active{color:#fff;background:var(--ink);box-shadow:none}
  .timeline-card{display:block;padding:22px 20px 20px;border-radius:20px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(13,71,59,.04)}
  .timeline-card>div:first-child{display:grid;grid-template-columns:1fr auto;align-items:start;gap:8px 16px}
  .timeline-card #timeline-label{grid-column:1;color:var(--muted);font-size:14px;line-height:1.3}
  .timeline-card #timeline-total{grid-column:1/-1;font-size:clamp(38px,12vw,54px);line-height:1;margin:7px 0 4px;letter-spacing:-.045em}
  .timeline-card #timeline-context{grid-column:1/-1;font-size:13px;line-height:1.35}
  .timeline-card .loss-parts{display:none}
  .timeline-controls{grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:start}
  .timeline-controls button{height:44px;border-radius:50%;font-size:20px}
  .timeline-range{padding-top:4px}
  .timeline-range input{height:26px;margin:0;display:block}
  .timeline-range-ends{display:flex;justify-content:space-between;margin-top:3px;color:var(--muted);font-size:11px;font-weight:700}
}

@media (max-width: 480px) {
  .step:last-child{margin-inline:-8px;padding-inline:12px}
  .step:last-child .step-heading{margin-bottom:14px}
  .metric-option{padding:10px 7px}
  .timeline-card{padding:20px 17px 18px}
  .timeline-controls{grid-template-columns:42px minmax(0,1fr) 42px;gap:9px}
  .timeline-controls button{height:42px}
}