/* annona.co.uk - Altitude Slider exhibit (Task 14): mountain + vertical slider left, readout right */
.altitude{display:grid;gap:1rem}
.alt-title{margin:0;font-family:var(--font-display);font-size:1.4rem;color:var(--green-900)}
.alt-columns{display:grid;gap:1.25rem 1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
  .alt-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}

/* ---------- mountain + slider ---------- */
/* The picture keeps its 400:700 shape: as wide as the column allows (minus the 56 px slider and gap),
   but no taller than --alt-cap. The slider well borrows the same height so the two line up. */
.alt-mountain{--alt-cap:min(32rem,75svh);container-type:inline-size;display:flex;gap:.25rem;align-items:stretch;justify-content:center}
.alt-svg,.alt-slider-well{--alt-w:min(100cqw - 60px,var(--alt-cap) * 4 / 7);--alt-h:calc(var(--alt-w) * 7 / 4)}
.alt-svg{display:block;flex:none;width:var(--alt-w);height:var(--alt-h);border-radius:12px;background:var(--sky);box-shadow:inset 0 0 0 2px rgba(20,40,20,.12)}
.alt-band.is-active{stroke:var(--seed);stroke-width:2;stroke-dasharray:none}
.alt-band-label,.alt-height,.alt-sea-label{font:800 15px/1 var(--font);fill:var(--green-900);paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:4px;stroke-linejoin:round}
.alt-height{font-size:13px;font-weight:700}
.alt-sea-label{fill:#fff;stroke:rgba(0,60,120,.6)}
.alt-flag{transition:transform .25s ease-out}
.alt-flag-cloth{transform-origin:0 -44px}
@keyframes alt-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.92) skewX(-6deg)}}
.altitude:not(.is-still) .alt-flag-cloth{animation:alt-wave 1.4s ease-in-out infinite}

/* The slider stands beside the picture, sea at the bottom and summit at the top. Firefox honours
   orient="vertical"; everyone else rotates it with writing-mode (direction:rtl puts 0 at the bottom).
   The well's padding lines the 48 px thumb's travel up with the picture: sea level is 40/700 of the
   way up from the bottom and the summit 40/700 down from the top. */
.alt-slider-well{display:flex;align-items:stretch;height:var(--alt-h);padding-block:max(0px,calc(var(--alt-h) * 40 / 700 - 24px))}
.alt-range{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:56px;height:100%;margin:0;background:transparent;cursor:pointer;touch-action:none}
.alt-range::-webkit-slider-runnable-track{width:14px;border-radius:999px;background:linear-gradient(to top,#5cb85c 0 15.5%,#8fbf5a 15.5% 31%,#a6d68a 31% 44.5%,#b9a98a 44.5% 58%,#cfd8d3 58% 89%,#f4f7fb 89%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.alt-range::-moz-range-track{width:14px;border-radius:999px;background:linear-gradient(to top,#5cb85c 0 15.5%,#8fbf5a 15.5% 31%,#a6d68a 31% 44.5%,#b9a98a 44.5% 58%,#cfd8d3 58% 89%,#f4f7fb 89%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.alt-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:48px;height:48px;margin-left:-17px;border-radius:50%;border:4px solid var(--paper);background:var(--accent);box-shadow:0 3px 8px rgba(20,40,20,.3)}
.alt-range::-moz-range-thumb{width:40px;height:40px;border-radius:50%;border:4px solid var(--paper);background:var(--accent);box-shadow:0 3px 8px rgba(20,40,20,.3)}
.alt-range:focus-visible{outline:3px solid var(--seed);outline-offset:3px;box-shadow:none}

/* Support probe (altitude.js): a range with no explicit size; laid out vertically it is taller than wide. */
.alt-range-probe{position:absolute;visibility:hidden;pointer-events:none;width:auto;height:auto}
.alt-mountain{position:relative}
/* Fallback where the engine ignores writing-mode on a range (pre-2024): the slider lies under the picture, sea on
   the left and summit on the right; ↑/→ still climb. */
.altitude.is-horizontal .alt-mountain{flex-direction:column;align-items:center}
.altitude.is-horizontal .alt-slider-well{height:auto;width:var(--alt-w);padding:0}
.altitude.is-horizontal .alt-range{writing-mode:horizontal-tb;direction:ltr;width:100%;height:56px}
.altitude.is-horizontal .alt-range::-webkit-slider-runnable-track{width:auto;height:14px;background:linear-gradient(to right,#5cb85c 0 15.5%,#8fbf5a 15.5% 31%,#a6d68a 31% 44.5%,#b9a98a 44.5% 58%,#cfd8d3 58% 89%,#f4f7fb 89%)}
.altitude.is-horizontal .alt-range::-moz-range-track{width:auto;height:14px;background:linear-gradient(to right,#5cb85c 0 15.5%,#8fbf5a 15.5% 31%,#a6d68a 31% 44.5%,#b9a98a 44.5% 58%,#cfd8d3 58% 89%,#f4f7fb 89%)}
.altitude.is-horizontal .alt-range::-webkit-slider-thumb{margin-left:0;margin-top:-17px}

/* ---------- readout ---------- */
.alt-readout{display:grid;gap:.5rem;align-content:start}
.alt-where{margin:0;font-size:1.15em}
.alt-height-out,.alt-temp-out{color:var(--green-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.alt-zone-label{margin:.25rem 0 0;font-family:var(--font-display);font-size:1.5rem;line-height:1.15;color:var(--green-900)}
.alt-kid{margin:0;max-width:40ch}
.alt-faces{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem}
.alt-face{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.4rem;align-items:center;padding:.5rem .9rem;border-radius:14px;background:var(--cream);border-left:8px solid var(--green-600);min-width:9rem}
.alt-face[data-mood="best"]{background:#eaf7dd;border-left-color:var(--green-600)}
.alt-face[data-mood="ok"]{background:var(--cream);border-left-color:var(--custard)}
.alt-face[data-mood="hot"]{background:#ffe3d6;border-left-color:var(--accent)}
.alt-face[data-mood="cold"]{background:#e3f0ff;border-left-color:#4aa3df}
.alt-fruit{grid-row:1/3;font-size:2.4rem;line-height:1}
.alt-mood{font-size:1.9rem;line-height:1}
.alt-face-name{font-weight:800;font-size:.95em}
.alt-fact-title{margin:.5rem 0 0;font-weight:800;color:var(--green-900)}
.alt-fact{margin:0;padding:.6rem .9rem;border-radius:12px;background:#f1f6ec;border-left:6px solid var(--green-300);max-width:48ch}
.alt-hint{margin:.25rem 0 0;font-size:.95em;opacity:.85}

/* ---------- narrow screens: stacked, picture no taller than half the viewport ---------- */
@media (max-width:639.98px){
  .alt-mountain{--alt-cap:50svh}
  .alt-zone-label{font-size:1.3rem}
  .alt-face{min-width:0;flex:1 1 8rem}
}