/* Rounded shapes (owner, 7 November 2026): the current colours, fonts and labels, with softer shapes. Buttons, tabs and
   chips become pills; panels, boxes and tables get rounded corners; the four figures on a resort page become four
   separate boxes. Loaded last. The rounding sets no colour, font or text case; the softer lines at the end (8 November)
   use the existing border colour only. */
:root { --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; }

/* buttons, tabs and chips: pills */
.btn, .ab-btn, .chip, .ab-tab, .offer__cta, .map3d-go, .fc-btn, .btn--sm, .hs-link, .resort-links .btn,
.rt__acts .btn, .pass__actions .btn, .pass__actions button, .tp-stage { border-radius: 6px !important; }

/* panels, boxes, notices and tables: rounded corners */
.panel, .fn, .rt, .change-wrap, .sr-grid, .season, .avy, .map-box, .table-wrap, .fc, .notice, .gate, .offer,
.sc-card, .tp-cmp, .tp-detail, .hs-bar, .hs-sheet, .dbd__day, .trustpanel, .sl__band { border-radius: 6px !important; }
/* clip to the rounded corners, but never the scrolling tables (8 Nov 2026): .table-wrap and .sr-grid keep their own
   overflow (sideways scrolling on a phone, and the sticky day panel inside it) */
.panel, .fn, .rt, .change-wrap, .season, .avy, .map-box, .notice, .gate, .offer, .sc-card { overflow: hidden; }

/* the resort page's four figures: four separate rounded boxes, in their current colours */
.ab-rfigs { gap: 8px !important; border: 0 !important; background: none !important; }
.ab-rfig { border-radius: 6px !important; border: 1px solid var(--ab-rule, var(--color-border)) !important; }
.ab-rfig.is-inv { border-color: transparent !important; }

/* small marks */
.stn b, .src-tag--obs b { border-radius: 4px; }

/* the offline / 3D map / piste map strip: one rounded strip, square segments inside */
.off-chip { border-radius: 6px !important; }
.off-chip .chip, .off-chip .off-chip__seg, .pass__actions .off-chip__seg { border-radius: 0 !important; }

/* Softer lines (owner, 8 November 2026, option A): one light hairline instead of the black double rules, light frames
   with a soft shadow instead of black outlines, labels a little less widely spaced, rounded date tiles and badges */
.page-head, .ab-rbox, .sd-decision { border-top: 1px solid var(--color-border) !important; }
.ab-q { border-top-color: var(--color-border) !important; }
.month-head { border-bottom: 1px solid var(--color-border) !important; }
.ab-rfig:not(.is-inv) { border-color: var(--color-border) !important; box-shadow: 0 1px 2px rgba(20,18,15,.04), 0 6px 18px rgba(20,18,15,.06) !important; }
[data-theme='light'] .panel, [data-theme='light'] .rt, [data-theme='light'] .change-wrap, [data-theme='light'] .season,
[data-theme='light'] .event, [data-theme='light'] .fn { border-color: #e4e1da !important; box-shadow: 0 1px 2px rgba(20,18,15,.03), 0 8px 24px rgba(20,18,15,.05) !important; }
.eyebrow, .ab-kicker, .ab-cell__h, .ab-rfig__l, .month-head, .ticker__label, .ab-tk__k, .tp-pick__n, .fn__suml, .event__date span { letter-spacing: 0.12em !important; }
.event__date { border-radius: 6px !important; }
.stn b { border-radius: 6px !important; }

/* one filled button per group (owner, 8 November 2026): the first action stays filled, the others are light outlines */
[data-theme='light'] .resort-links .btn--ghost, [data-theme='light'] .btn.btn--ghost:not([aria-pressed="true"]) { background: transparent !important; color: var(--color-text) !important; border: 1.5px solid #cfcac1 !important; }

/* chart bars: slightly rounded tops */
.season__bar { rx: 2px; ry: 2px; }
/* hover: an ink edge (8 Nov 2026), not coral: on a phone the hover stays after a tap, and a coral edge read as the selection */
[data-theme='light'] .btn.btn--ghost:not([aria-pressed="true"]):hover, [data-theme='light'] .resort-links .btn--ghost:hover { color: var(--color-text) !important; border-color: var(--color-text) !important; }

/* Follow-ups (owner, 8 November 2026) */
/* the resort map spans the page on a phone: aspect-ratio with max-height had held it to 360 px wide, short of the column */
@media (max-width: 720px) { .resort-map { width: 100%; max-height: 420px; } }
/* the Trip Planner panel: a 1 px edge all round, not the thick 4 px left edge that showed as a band inside the rounded corner */
.rt { border: 1px solid var(--color-border) !important; }
/* more rounded boxes: the home greeting, the Rank by menu and its list, the scorecard / monthly report switch, the live
   label, the Shortlist and Go tabs (text centred), and the boxes on the free pages */
.hello, .rank-menu__list, .rank-help__box, .dbd__wrap, .dbd__lock, .offer__r, .pp-buy, .pp-hero, .pp-shot, .tp-hold,
.tp-dateprompt, .tp-ly, .hero, .sc-card { border-radius: 6px !important; }
.hello, .rank-menu__list, .rank-help__box, .dbd__lock, .offer__r, .pp-shot, .tp-hold, .hero { overflow: hidden; }
.rank-menu__btn, .dbd__btn, .pp-btn, .live-pill, .agree-badge, .ab-fn__today { border-radius: 6px !important; }
.sc-switch { border-radius: 6px !important; overflow: hidden; }   /* two lines per link, so a rounded box, not a pill */
/* the Trip Planner date prompt: its coral edge all round at 1 px, not a thick left band inside the rounded corner */
.tp-dateprompt { border: 1px solid currentColor; border-color: var(--gold) !important; }
.rank-menu__list .chip::before { border-radius: 4px; }
.tp-stage { align-items: center !important; text-align: center; }
/* the monthly report's "How the month went": its left edge in ink by day, as it is coral at night (owner, 8 Nov 2026);
   the light panel frame above had turned it grey */
[data-theme='light'] .panel.rep__why { border-left: 4px solid var(--color-text) !important; }
/* the Scorecard / Monthly reports switch (owner, 8 Nov 2026): two equal halves across the page, compact, text centred */
.sc-switch { display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; max-width: 100%; border-radius: 6px !important; }
.sc-switch a { align-items: center; text-align: center; min-height: 40px !important; padding: 0.35rem 0.6rem !important; font-size: 0.9rem; line-height: 1.2; }
.sc-switch a small { font-size: 0.66rem !important; letter-spacing: 0.02em !important; }
/* the Trip Planner's comparison chips (Lead, Similar, Less) as pills (owner, 8 Nov 2026) */
.tp-vchip { border-radius: 6px; }
/* Slight curves only (owner, 8 Nov 2026, later the same night): buttons, chips and boxes 6 px, small cells 4 px, small
   marks 3 to 4 px; nothing fully round. */
/* Pill or rounded box (owner, 8 Nov 2026): a pill only for a one-line control or label; anything with two or more lines
   of text, or that opens a list, takes a rounded box */
.sc-switch { border-radius: 6px !important; }
.tp-stage { border-radius: 6px !important; }
.rank-menu__btn { border-radius: 4px !important; }
/* Snow or rain by height: every cell and its key a rounded square (snow, rain, mixed and dry alike), not a pill */
.sr-cell, .sr-grid [class*="sr-cell--"] { border-radius: 4px !important; }
/* the Member tag in the header (owner, 8 Nov 2026): the same slight corner */
.member-mark { border-radius: 999px !important; }  /* a smaller pill, like the Season Pass button (owner, 13 Nov 2026) */
/* the region page's two buttons (The full table, See how accurate we are): the compact pair on phones, as on the home
   page (owner, 8 Nov 2026) */
@media (max-width: 640px) {
  #regionAnswer .ab-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  #regionAnswer .ab-ctas .ab-btn { min-height: 0; padding: 0.55rem 0.5rem; font-size: 0.8rem; letter-spacing: 0.02em; justify-content: center; text-align: center; line-height: 1.25; }
  #regionAnswer .ab-ctas .ab-btn:not(.ab-btn--ghost) { order: 2; }   /* the filled button on the right, as on the home page */
  #regionAnswer .ab-ctas .ab-btn--ghost { order: 1; }
}
/* spacing (owner, 8 Nov 2026): the avalanche box keeps the 24 px gap below it that every other panel has; it was 16 px
   where the next block has no heading of its own above it (Top of the slopes and the base on the free page) */
.avy { margin-bottom: var(--space-6); }
/* text next to a box or table (owner, 8 Nov 2026): at least 12 px between a note, key or heading and the box or table it
   belongs to (was 0 px for "Compared with ..." and the verification reference, 8 to 10 px for the keys and headings) */
.change-wrap__since { margin-bottom: 12px !important; }
.sc-protocol { margin-bottom: 12px !important; }
.map-legend, .src-legend--below, .sc-rel__legend, .record__sum { margin-top: 12px !important; }
.region-key { margin-bottom: 12px !important; }
.rank-help__box { margin-top: 12px !important; }
h3 + .table-wrap, .pp-sec__h + .table-wrap { margin-top: 12px !important; }
/* the What changed box: an even 1 px edge all round, not a thick left band inside the rounded corner (as the Trip
   Planner panel; owner, 8 Nov 2026) */
.change { border-left-width: 1px !important; }
/* gaps between boxes (owner, 8 Nov 2026): separate sections 24 px apart, cards that form one set 16 px */
.resort-pair { row-gap: var(--space-6) !important; }   /* Top of the slopes and the base / How sure is the forecast? stacked on a phone */
.sc-cards { gap: var(--space-4) !important; }          /* the scorecard's three horizon cards, a set: 16 px (was 12) */
.pp-shots { gap: var(--space-6) !important; }          /* the Season Pass pictures: 24 px (was 22) */
/* home answer board (owner, 8 Nov 2026): the gap above the fortnight's rule matches the gap below the question's rule
   (2 px more; the larger of the two) */
.ab-fn { margin-top: calc(-1 * var(--space-2) + 2px) !important; }
/* shared trip and comparison pages (owner, 8 Nov 2026): the same slight corners */
.shr-card, .shr-offer, .shr-locked, .shr-shared, .shr-call, .shr-best, .shr-badge { border-radius: 6px !important; }
.shr-card, .shr-offer, .shr-locked { overflow: hidden; }
/* Desktop fixes (owner, 8 Nov 2026) */
/* What changed since yesterday: the rounded frame had no inner padding, so the heading and More detail touched its
   edges; the same 20 px inset as the four figures above it */
.change-wrap { padding: 0 var(--space-5); }
.change-wrap[open] { padding-bottom: var(--space-4); }
/* the scorecard's Detailed view: the established-record dropdown around it was held to 78 characters (772 px) and the
   rounded panel clipped the tables at that width; it now spans the page, and a table still wider than the screen
   scrolls sideways inside its box instead of being cut off */
.tp-method.sc-legacy { max-width: none; }
@media (min-width: 761px) { .sdx .table-wrap--fit.sc-wide { overflow-x: auto; } }
/* How the month went on a wide screen: What went well and What went wrong side by side, both headings at the same
   height (the hairline above each part after the first is for the stacked phone layout only), 24 px between them */
.rep__why .rep__cols { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .rep__why .rep__cols:has(> div + div) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6) !important; }
  .rep__why .rep__cols > div + div > h3:first-child { border-top: 0; padding-top: 0; margin-top: 12px !important; }
}
/* The month in brief (owner, 9 November 2026): the same side accent and padding as How the month went */
.panel.rep-brief { border-left: 4px solid var(--color-primary); padding: var(--space-5) var(--space-6); }
[data-theme='light'] .panel.rep-brief { border-left: 4px solid var(--color-text) !important; }
@media (max-width: 640px) { .panel.rep-brief { padding: var(--space-4); } }
/* the region page's My mountains chips (Prioritise My mountains, Show only My mountains): the compact pair on phones, as on
   the resort page's Upper slopes and Base and the home page (owner, 9 November 2026) */
@media (max-width: 640px) {
  #regionPins { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  #regionPins .chip { width: auto; min-width: 0; min-height: 0; padding: 0.55rem 0.3rem; font-size: clamp(0.66rem, 3.3vw, 0.82rem); letter-spacing: 0; line-height: 1.25; white-space: nowrap;   /* each label on one line (owner, 9 Nov 2026) */ display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 6px !important; }
  html[lang="fr"] #regionPins .chip { font-size: clamp(0.6rem, 2.75vw, 0.74rem); }   /* the French labels are the longest */
}
/* Trip Planner, Saved trips on phones (owner, 9 November 2026): one line across the page, the trip name box widened */
@media (max-width: 640px) {
  .tp-saved__new { display: flex; flex-wrap: nowrap; width: 100%; }   /* one line: the name box takes the room left by the button */
  .tp-saved__new input { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box; }
  .tp-saved__new .trip__only { flex: none; white-space: nowrap; }
}
/* Dropdowns, stars and the Shortlist's Show only My mountains (owner, 11 November 2026). The region page's country list and
   the Trip Planner's lists are the same size as the Rank by menu; the My mountains chips on the region page, Shortlist and
   Go carry the star; Show only My mountains on the Shortlist is a chip on the left, not a box on the right. */
#regionCountries > .region-country-pick select, .trip__controls select {
  width: auto; min-width: min(19rem, 100%); max-width: 100%; padding: 0.6rem 0.9rem;
  font: 500 0.92rem/1.2 var(--ab-sans); border-radius: 4px;
}
@media (max-width: 860px) {
  #regionCountries > .region-country-pick select { width: auto; }
}
.chip .chip-star { flex: none; width: 0.95em; height: 0.95em; margin-right: 0.35em; vertical-align: -0.12em; color: #e04a35; }
[data-theme='dark'] .chip .chip-star { color: #ff6a55; }
.chip.is-active .chip-star { color: currentColor; fill: currentColor; }
.trip__controls--only { justify-content: flex-start; }
.chip:has(> .chip-star) { display: inline-flex; align-items: center; justify-content: center; }   /* star and label on one line */

/* ===== Formerly readability.css, folded in here on 13 November 2026 (same order in the cascade, so nothing changes) ===== */
/* Readability fixes for the site (owner approved, 13 November 2026). They were first made as A21 to A28 on the
   style-improvements branch, then carried over to Original after the style picker was removed. A30 adds the
   pass-holder parts of the resort page. History: docs/design/alpine-styles-20261111.md. Loaded after shapes.css. */

/* A21: on phones, nothing below 11 px; 12 px for anything people read. Small uppercase labels and badges take 11 px.
   The header Season Pass badge keeps its earlier size (owner, A29). */
@media(max-width:640px) {
  html body :is(.ticker__label,.ab-tk__k,.site-header__tools .sd-lang__code,
    .ab-hf__l,.ab-fn__today,.stn b,.src-tag b,.hero__caption .tag,.news-item__meta .cat,.event__date span,.event__disc,.movers__label,.pass-pill,
    .sc-prov,.sc-lead__day,.dbd__k,.offer__k,.ct-label__in,.src-tag,thead th,thead th small) { font-size:11px!important; }
  html body :is(.ab-name small,.ab-val small,.ab-rfig small,.stn--label,.fn__dn,.fn__dt,.fn__cm,.dbd__d,.sure__pct small,.mover__tot,.mover__tot span,
    .rank-menu__label,.resort-sub,.rng,.rng__n,td .stn,.sc-card__ev,.sc-card__scope,.sc-cov,.sdh__val small,td .muted,th .muted,.trust,
    .sc-rel__key,a > small,.news-item__meta,.ab-strip small,.page-lede small,.fc__note,.unit,tbody th) { font-size:12px!important; }
}

@media(max-width:640px) {
  html body .fn--free .fn__grid--past { grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; }
  html body .fn__dn { letter-spacing:.06em; }
  html body :is(.fn__dn,.fn__dt) { white-space:nowrap; }
}

/* A30: the same 11 px floor on phones for the parts only pass holders see: the day-by-day table, the "This time last
   year" chart and "What changed since yesterday". The table already scrolls sideways, so it may grow a little wider. */
@media(max-width:640px) {
  html body :is(.fc__table small,.fc__pt,.fc__q,.fc__risk,.fc__when,.snow-table small,.tp-ly__cm,.tp-ly__dt,.fn small,
    .change__dow,.change__conf) { font-size:11px!important; }
  html body .tp-ly__unit { font-size:12px!important; }
}

/* A22: 44 px tap targets without a visible change: an invisible hit area around small links. */
html body .site-header__tools .pass-cta,
html body .page-head--resort .eyebrow a,
html body .page-head--resort .fc__note a { position:relative; }
html body .site-header__tools .pass-cta::after,
html body .page-head--resort .eyebrow a::after,
html body .page-head--resort .fc__note a::after { content:''; position:absolute; left:50%; top:50%; width:max(100%,44px); height:44px; transform:translate(-50%,-50%); }

/* A26: every fortnight day has a baseline, so 0 and <1 read as no snow rather than missing data. */
html body .fn__bar { border-bottom:2px solid var(--ab-rule); }

/* A27: the scrolling briefing fades in and out at both ends instead of being cut at the edge. */
html body .ticker .ticker__track {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18px,#000 64px,#000 calc(100% - 64px),rgba(0,0,0,.35) calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18px,#000 64px,#000 calc(100% - 64px),rgba(0,0,0,.35) calc(100% - 18px),transparent 100%);
}

/* A28: on the resort page, Snow alerts is the one solid button; the links beside it are lighter text buttons. */
html body .view--resort .resort-links .btn.btn--ghost,
html[data-theme] body .view--resort .resort-links .btn.btn--ghost:not([aria-pressed='true']) {
  background:transparent!important; border-color:transparent!important; box-shadow:none!important; color:var(--color-text)!important;
  text-transform:none; letter-spacing:.01em; font-weight:500;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
}
html body .view--resort .resort-links .btn.btn--ghost:hover,
html[data-theme] body .view--resort .resort-links .btn.btn--ghost:not([aria-pressed='true']):hover {
  background:transparent!important; border-color:transparent!important; text-decoration-color:currentColor;
}
@media(max-width:640px) {
  html body .view--resort .resort-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html body .view--resort .resort-links > .btn:not(.btn--ghost) { grid-column:1 / -1; min-height:44px!important; }
  html body .view--resort .resort-links .btn.btn--ghost { min-height:44px!important; padding-inline:.25rem!important; white-space:nowrap; }
}
