/* The Residence's chrome, crest-voland issues #67 (desktop), #68 (phone), #69 (tablet), 2026-10-23.
   residence-shell.js sets <html data-layout="desktop|rail|sheet">, <html data-card="reduced|summary|
   detailed">, <html data-nav="open|closed"> and <html data-section>; main.js sets <html data-scale>.
   What is the Residence's alone (the scene, the camera toolbar, the gesture hint, a panorama) is scoped
   under html[data-current-scale="residence"]; the sections, the card and its sheet serve every scale
   (html[data-current-scale]) since 2026-10-23, when the maps took the same chrome. The HEADER is
   restyled at every scale, since it is the same element. Loaded last (index.html): it restates rules the shared sheets set.
   Colours are the --warm-* roles with the old greys as fallback (CLAUDE.md, Explorer branding), so a
   residence without the warm palette keeps its own look. */

:root {
  --nav-w-open: 244px;
  --nav-w-closed: 76px;
  --rs-paper: var(--warm-paper, #ffffff);
  --rs-bg: var(--warm-bg, #f1f1f1);
  --rs-sand: var(--warm-sand, #e6e6e6);
  --rs-line: var(--warm-line, rgba(0,0,0,.12));
  --rs-ink: var(--warm-ink, #111111);
  --rs-muted: var(--warm-muted, #5e5e5e);
  --rs-taupe: var(--warm-taupe, #8d8d8d);
  --rs-title: var(--brand-title-font, inherit);
}

/* ================================================================ header (every scale) */

header {
  background: var(--rs-paper); border-bottom: 1px solid var(--rs-line);
  backdrop-filter: none; gap: 18px;
}
.brand-mark {
  flex: 0 0 auto; display: flex; align-items: center; min-width: 0;
  font-family: var(--rs-title); font-weight: 700; font-size: 30px; letter-spacing: .14em;
  line-height: 1; color: var(--rs-ink); user-select: none;
}
.brand-mark[hidden] { display: none; }
.brand-mark img { display: block; height: 34px; width: auto; }
/* The scale nav: words, not pills. The active one is darker, with a short red line under it. */
header nav button, header nav button.active {
  position: relative; background: transparent; color: var(--rs-muted); border-radius: 6px;
  font-size: 15px; padding: 10px 16px;
}
header nav button:hover { color: var(--rs-ink); }
header nav button.active { color: var(--rs-ink); font-weight: 600; }
header nav button.active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
header nav button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
/* The season: two icons in one soft segment, the chosen one on white. Labels for a screen reader. */
header .season {
  order: 3; margin: 0 0 0 auto; padding: 3px; gap: 2px; border: 0; border-radius: 10px; background: var(--rs-sand);
}
header .season button, header .season button.active {
  width: 40px; height: 36px; padding: 0; justify-content: center; border-radius: 8px;
  background: transparent; color: var(--rs-muted);
}
header .season button.active { background: var(--rs-paper); color: var(--rs-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
header .season button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 1px; }
.season-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header .lang { order: 4; }
header .lang select { border-color: var(--rs-line); background: var(--rs-paper); color: var(--rs-ink); border-radius: 10px; }
#contactBtn { order: 5; border: 0; background: transparent; color: var(--rs-ink); padding: 8px 10px; }
#contactBtn:hover { border: 0; background: var(--rs-bg); }
.header-menu .menu-contact { display: none; }
/* « Rejouer le billet » (#81): an icon beside Contact in a wide header; its label names it for a screen reader. */
.menu-ticket[hidden] { display: none !important; }
.header-menu .menu-ticket {
  order: 5; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); cursor: pointer;
}
.header-menu .menu-ticket:hover { background: var(--rs-bg); }
.header-menu .menu-ticket:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 1px; }
.menu-ticket-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header nav { order: 2; }
.brand-mark { order: 0; }
#menuToggle { order: 6; }

/* The phone, and a tablet held upright (#68, #69): the mark, the season, and a menu button that
   opens the scales, the language and Contact. */
html[data-layout="sheet"] header {
  height: var(--header-h); padding: 8px max(12px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  align-items: center; gap: 10px;
}
html[data-layout="sheet"] { --header-h: 64px; }
html[data-layout="sheet"] .brand-mark { font-size: 26px; }
html[data-layout="sheet"] #menuToggle {
  display: inline-flex; align-items: center; justify-content: center; margin: 0;
  width: 44px; min-height: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--rs-ink);
}
html[data-layout="sheet"] header[data-menu="open"] #menuToggle { background: var(--rs-sand); color: var(--rs-ink); }
html[data-layout="sheet"] #menuToggle .chevron, html[data-layout="sheet"] #menuMeta { display: none; }
html[data-layout="sheet"] #contactBtn { display: none; }
html[data-layout="sheet"] .header-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: auto; right: 10px; width: min(340px, calc(100vw - 20px));
  flex-direction: column; gap: 12px; padding: 14px; z-index: 61;
  background: var(--rs-paper); border: 1px solid var(--rs-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
html[data-layout="sheet"] header[data-menu="open"] { z-index: 60; }
html[data-layout="sheet"] header[data-menu="open"] .header-menu { display: flex; }
html[data-layout="sheet"] .header-menu nav { position: static; margin: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-layout="sheet"] .header-menu nav button, html[data-layout="sheet"] .header-menu nav button.active {
  min-height: 46px; text-align: left; padding: 10px 12px; border: 0; background: transparent; font-size: 16px;
}
html[data-layout="sheet"] .header-menu nav button.active { background: var(--rs-bg); }
html[data-layout="sheet"] .header-menu nav button.active::after { left: 12px; right: auto; width: 28px; bottom: 6px; }
html[data-layout="sheet"] .header-menu .lang select { width: 100%; min-height: 46px; padding: 8px 12px; font-size: 15px; }
html[data-layout="sheet"] .header-menu .menu-ticket {
  width: auto; height: auto; justify-content: flex-start; gap: 10px; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-paper); font: inherit; font-size: 15px;
}
html[data-layout="sheet"] .menu-ticket-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html[data-layout="sheet"] .header-menu .menu-contact {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-paper); color: var(--rs-ink); font: inherit; font-size: 15px; cursor: pointer;
}
html[data-layout="sheet"] header .season { margin-left: auto; }
html[data-layout="sheet"] header .season button { width: 44px; height: 38px; }

/* ================================================================ the Residence */

/* The sections and the card serve every scale since 2026-10-23 (the maps' themes and modes): only the
   camera toolbar and the gesture hint are the Residence's alone. */
html:not([data-current-scale]) #residenceNav,
html:not([data-current-scale]) #sectionChooser,
html:not([data-current-scale="residence"]) #sceneTools,
html:not([data-current-scale="residence"]) #gestureHint { display: none !important; }

/* The sections replace the panel-size buttons, on the maps too: the card's own states do their job. */
html[data-current-scale] #panelSize,
html[data-current-scale] #panelShow { display: none !important; }

html[data-current-scale] { --nav-w: var(--nav-w-open); }
/* --panel-w / --panel-gap make --panel-edge (responsive.css), which the plan viewer stops at when the
   card is shown beside it: the card's own width and margin here. */
html[data-current-scale] { --panel-w: 400px; --panel-gap: 18px; }
html[data-current-scale][data-layout="rail"] { --panel-w: 340px; --panel-gap: 14px; }
html[data-current-scale][data-layout="rail"][data-card="detailed"] { --panel-w: 390px; }
@media (min-width: 1680px) { html[data-current-scale][data-layout="desktop"] { --panel-w: 440px; } }
html[data-current-scale][data-nav="closed"] { --nav-w: var(--nav-w-closed); }
html[data-current-scale][data-layout="sheet"] { --nav-w: 0px; }

/* ---------------------------------------------------------------- sidebar / rail */

#residenceNav {
  position: absolute; z-index: 14; left: 0; top: 0; bottom: 0; width: var(--nav-w);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  padding: 18px 12px 14px; background: var(--rs-paper); border-right: 1px solid var(--rs-line);
  overflow: hidden auto; transition: width .25s ease;
}
html[data-layout="sheet"] #residenceNav { display: none; }
#residenceNav .sec-list { display: flex; flex-direction: column; gap: 6px; }
#residenceNav button {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; width: 100%;
  padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--rs-ink);
  font: inherit; font-size: 16px; text-align: left; cursor: pointer; white-space: nowrap;
}
#residenceNav button:hover { background: var(--rs-bg); }
#residenceNav button.active { background: var(--rs-sand); font-weight: 600; }
#residenceNav button.active::before {
  content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
#residenceNav button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; }
#residenceNav .sec-ico { display: inline-flex; flex: 0 0 auto; width: 24px; justify-content: center; }
#residenceNav .sec-ico svg { stroke-width: 1.6; }
html[data-nav="closed"] #residenceNav .sec-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
html[data-nav="closed"] #residenceNav button { justify-content: center; padding: 8px 0; gap: 0; }
#residenceNav .sec-fold { color: var(--rs-muted); font-size: 14px; min-height: 48px; }
#residenceNav .sec-fold .when-closed, html[data-nav="closed"] #residenceNav .sec-fold .when-open { display: none; }
html[data-nav="closed"] #residenceNav .sec-fold .when-closed { display: inline; }

/* The scene beside it, and the map at the other scales (MapLibre follows its container's size). */
html[data-current-scale="residence"] #scene { left: var(--nav-w); transition: left .25s ease; }
html[data-current-scale]:not([data-current-scale="residence"]) #map { left: var(--nav-w); transition: left .25s ease; }
/* The village guide (guide.js) covers the whole shell and frames its own map: the map is its full width then. */
html[data-guide] #map { left: 0; transition: none; }
/* The map's zoom buttons rise above the Feedback button, which takes the bottom-left corner beside the sidebar. */
html[data-current-scale]:not([data-current-scale="residence"]):not([data-layout="sheet"]) .maplibregl-ctrl-bottom-left { bottom: 56px; }

/* ---------------------------------------------------------------- the section chooser */

#sectionChooser { position: absolute; z-index: 16; top: 14px; left: calc(var(--nav-w) + 16px); display: none; }
html[data-current-scale][data-layout="rail"] #sectionChooser,
html[data-current-scale][data-layout="sheet"] #sectionChooser { display: block; }
html[data-layout="sheet"] #sectionChooser { left: max(12px, env(safe-area-inset-left)); top: 12px; }
#sectionChooser .chooser-btn {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px 6px 16px;
  border: 0; border-radius: 12px; background: var(--rs-paper); color: var(--rs-ink); font: inherit; font-size: 15px;
  box-shadow: 0 6px 22px rgba(0,0,0,.16); cursor: pointer;
}
#sectionChooser .chooser-btn::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
#sectionChooser .chooser-btn .sec-label { min-width: 104px; text-align: left; }
#sectionChooser .chooser-btn .chev { transition: transform .2s; }
#sectionChooser .chooser-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
#sectionChooser .chooser-btn:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
#sectionChooser .chooser-menu {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - var(--header-h) - 90px);
  overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--rs-paper); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
#sectionChooser .chooser-menu[hidden] { display: none; }
#sectionChooser .chooser-menu button {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 8px 14px;
  border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
#sectionChooser .chooser-menu button:hover { background: var(--rs-bg); }
#sectionChooser .chooser-menu button.active { background: var(--rs-sand); font-weight: 600; }
#sectionChooser .chooser-menu button.active::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
#sectionChooser .sec-ico { display: inline-flex; }

/* ---------------------------------------------------------------- the card */

html[data-current-scale] #panel {
  /* The wrapper casts the shadow; the card inside it is clipped to the brand's shape, and a clip
     would cut a shadow drawn on itself. */
  position: absolute; z-index: 15; left: auto; right: 18px; top: 18px; bottom: auto;
  width: 400px; max-height: calc(100% - 36px); padding: 0 !important; overflow: visible;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
  clip-path: none; filter: drop-shadow(0 10px 28px rgba(35,31,30,.20)); display: flex; flex-direction: column;
}
html[data-current-scale][data-panel="hidden"] #panel { display: none; }
html[data-current-scale][data-layout="rail"] #panel { width: 340px; right: 14px; top: 14px; max-height: calc(100% - 28px); }
html[data-current-scale][data-layout="rail"][data-card="detailed"] #panel { width: 390px; }
html[data-current-scale][data-card="reduced"]:not([data-layout="sheet"]) #panel { width: 300px; }
/* The model's detailed card is the one tall panel of the reference; any other section's card is as
   tall as its content, up to the scene's height (the apartments reach it, two photos do not). */
html[data-current-scale="residence"][data-section="overview"][data-card="detailed"]:not([data-layout="sheet"]) #panel { height: calc(100% - 36px); }
html[data-current-scale="residence"][data-section="overview"][data-layout="rail"][data-card="detailed"] #panel { height: calc(100% - 28px); }
/* Above 1680px, a little more room. */
@media (min-width: 1680px) { html[data-current-scale][data-layout="desktop"]:not([data-card="reduced"]) #panel { width: 440px; } }

.res-card {
  position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; max-height: 100%;
  background: var(--rs-paper); color: var(--rs-ink); border-radius: 24px;
}
.res-card .card-grip { display: none; }
.res-card .card-head {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px;
  padding: 24px 22px 0 28px;
}
.res-card .card-kicker { grid-column: 1 / -1; margin: 0 0 6px; font-size: 12px !important; }
.res-card .card-title {
  grid-column: 1; margin: 0 !important; font-size: 34px !important; line-height: 1.1; font-weight: 500;
  color: var(--rs-ink); overflow-wrap: anywhere;
}
.res-card .card-dash { grid-column: 1; display: block; width: 40px; height: 3px; margin: 10px 0 0; border-radius: 3px; background: var(--accent); }
.res-card .card-ctrl { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 2px; margin-top: -4px; }
.res-card .card-kicker ~ .card-ctrl { grid-row: 2 / span 2; }
.card-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); cursor: pointer;
}
.card-btn:hover { background: var(--rs-bg); }
.card-btn:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; }
/* Which state controls show: those for this state, and for a floating card or a sheet. */
html[data-card="reduced"] .card-btn:not([data-show-in~="reduced"]),
html[data-card="summary"] .card-btn:not([data-show-in~="summary"]),
html[data-card="detailed"] .card-btn:not([data-show-in~="detailed"]),
html[data-layout="sheet"] .card-btn.float,
html:not([data-layout="sheet"]) .card-btn.sheet { display: none; }

.res-card .card-body { min-height: 0; overflow: auto; padding: 16px 28px 8px; overscroll-behavior: contain; }
.res-card .card-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 28px 24px; }

/* The states. Reduced: the head alone. Summary: the parts marked for it. Detailed: all of it. */
html[data-card="reduced"] .res-card .card-body,
html[data-card="reduced"] .res-card .card-foot,
html[data-card="reduced"] .res-card .card-kicker { display: none; }
html[data-card="reduced"] .res-card .card-head { padding-bottom: 20px; }
html[data-card="reduced"] .res-card .card-title { font-size: 30px !important; }
/* The kicker is hidden when reduced, so the control rises to the title's row (it fell below it, #78). */
html[data-card="reduced"] .res-card .card-kicker ~ .card-ctrl { grid-row: 1 / span 2; }
html:not([data-card="detailed"]) .res-card .only-detailed { display: none !important; }
html:not([data-card="summary"]) .res-card .only-summary { display: none !important; }
html[data-card="detailed"] .res-card { flex: 1 1 auto; }
html[data-card="detailed"] .res-card .card-body { flex: 1 1 auto; }

/* The model card's content. */
.card-place { margin: 0 0 10px; font-size: 17px; color: var(--rs-ink-2, var(--warm-ink-2, #333)); }
.card-tagline { margin: 0 0 14px; font-size: 16px; line-height: 1.45; }
.card-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0; padding: 6px 0 16px; border-bottom: 1px solid var(--rs-line); }
.card-figures .figure { display: flex; align-items: flex-start; gap: 12px; padding: 6px 12px 6px 0; }
.card-figures .figure + .figure { border-left: 1px solid var(--rs-line); padding-left: 16px; }
.card-figures .figure-ico { flex: 0 0 auto; stroke-width: 1.4; margin-top: 2px; }
.card-figures strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.card-figures .figure-label { display: block; font-size: 15px; }
.card-figures small { display: block; font-size: 12px; color: var(--rs-muted); }
.card-more {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 2px; padding: 8px 0; border: 0; background: none;
  color: var(--rs-ink); font: inherit; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
  text-transform: lowercase;
}
.res-card .aud-link { display: block; margin: 14px 0 4px auto; }
html[data-layout="rail"] .res-card .card-title { font-size: 28px !important; }
html[data-layout="rail"] .res-card .card-head { padding-top: 20px; }
.card-more:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
.card-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px;
  padding: 12px 22px; border: 0; border-radius: 12px; background: var(--rs-sand); color: var(--rs-ink);
  font-family: var(--rs-title); font-size: 18px; font-weight: 500; text-transform: lowercase; cursor: pointer;
}
.card-cta:hover { background: color-mix(in srgb, var(--rs-sand), var(--rs-ink) 8%); }
.card-cta:focus-visible, .card-contact:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
.card-contact {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 18px;
  border: 1px solid var(--rs-ink); border-radius: 12px; background: #fff; color: var(--rs-ink);
  font-family: var(--rs-title); font-size: 17px; font-weight: 500; text-transform: lowercase; cursor: pointer;
}
.card-parts { margin-top: 4px; }
.card-part { border-bottom: 1px solid var(--rs-line); }
.card-part summary {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 2px; list-style: none; cursor: pointer;
  font-family: var(--rs-title); font-size: 17px; font-weight: 500; text-transform: lowercase;
}
.card-part summary::-webkit-details-marker { display: none; }
.card-part summary span { flex: 1; }
.card-part summary:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; border-radius: 6px; }
.card-part .part-ico { flex: 0 0 auto; stroke-width: 1.5; }
.card-part .part-chev { transition: transform .2s; }
.card-part[open] summary { font-weight: 700; }
.card-part[open] .part-ico { color: var(--accent); }
.card-part[open] .part-chev { transform: rotate(180deg); }
.card-part .part-body { padding: 0 0 14px 34px; font-size: 15px; line-height: 1.5; }
.card-part .part-body p { margin: 0 0 8px; }
.card-part .part-note { display: block; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--rs-bg); }
.card-part .part-note small { display: block; color: var(--rs-muted); }
.card-part .highlights { margin: 0; padding-left: 18px; }

/* A mountain path's difficulty: a filled Lucide circle in its colour (main.js resort()). */
#panel .path-dot { display: inline-flex; }
#panel .path-dot svg { fill: currentColor; }

/* A section's card: its existing content, at the card's width. */
.res-card[data-kind="section"] .tab-body > p:first-child { margin-top: 0; }
html[data-current-scale="residence"] #panel .res-card .tabs { margin-top: 4px; }

/* The brand's shape, where the browser draws shape() (residence-theme.css holds the shape itself
   for its own selector list; the card takes the same drawing): the free edge leans, every corner
   is round. On a sheet the top edge rises instead. */
@supports (clip-path: shape(from 0 0, line to 100% 0, line to 0 100%, close)) {
  html[data-current-scale]:not([data-layout="sheet"]) .res-card {
    --q-r: 26px; --q-tlx: 0px; --q-tly: 0px; --q-trx: 0px; --q-try: 0px; --q-brx: 0px; --q-bry: 0px; --q-blx: 16px; --q-bly: 0px;
    clip-path: shape(from calc(var(--q-tlx) + var(--q-r)) var(--q-tly),
      line to calc(100% - var(--q-trx) - var(--q-r)) var(--q-try),
      curve to calc(100% - var(--q-trx)) calc(var(--q-try) + var(--q-r)) with calc(100% - var(--q-trx)) var(--q-try),
      line to calc(100% - var(--q-brx)) calc(100% - var(--q-bry) - var(--q-r)),
      curve to calc(100% - var(--q-brx) - var(--q-r)) calc(100% - var(--q-bry)) with calc(100% - var(--q-brx)) calc(100% - var(--q-bry)),
      line to calc(var(--q-blx) + var(--q-r)) calc(100% - var(--q-bly)),
      curve to var(--q-blx) calc(100% - var(--q-bly) - var(--q-r)) with var(--q-blx) calc(100% - var(--q-bly)),
      line to var(--q-tlx) calc(var(--q-tly) + var(--q-r)),
      curve to calc(var(--q-tlx) + var(--q-r)) var(--q-tly) with var(--q-tlx) var(--q-tly),
      close);
    border-radius: 0;
  }
  html[data-current-scale]:not([data-layout="sheet"]) .res-card .card-head,
  html[data-current-scale]:not([data-layout="sheet"]) .res-card .card-body,
  html[data-current-scale]:not([data-layout="sheet"]) .res-card .card-foot { padding-left: 34px; }
  /* Reduced, the card is ~90px tall: the same 16px lean over that height was a wedge with a pointed top
     corner (#78). The lean keeps the tall card's angle (16px over ~400px), the corners a smaller radius. */
  html[data-current-scale][data-card="reduced"]:not([data-layout="sheet"]) .res-card { --q-r: 20px; --q-blx: 4px; }
  html[data-current-scale][data-card="reduced"]:not([data-layout="sheet"]) .res-card .card-head { padding-left: 26px; }
}

/* ---------------------------------------------------------------- the sheet */

html[data-current-scale][data-layout="sheet"] #panel {
  position: fixed; left: max(0px, env(safe-area-inset-left)); right: max(0px, env(safe-area-inset-right)); top: auto; bottom: 0;
  width: auto; max-height: none; filter: drop-shadow(0 -6px 22px rgba(35,31,30,.18));
  height: var(--card-drag, auto); max-height: min(64dvh, var(--card-h-detailed, 80dvh));
  interpolate-size: allow-keywords; transition: height .28s cubic-bezier(.2,.8,.2,1);
}
html[data-current-scale][data-layout="sheet"][data-card="reduced"] #panel { height: var(--card-drag, auto); }
html[data-current-scale][data-layout="sheet"] #panel.dragging,
html[data-current-scale][data-layout="sheet"][data-card="detailed"] #panel { max-height: none; }
html[data-current-scale][data-layout="sheet"][data-card="summary"] .res-card .card-body { flex: 0 1 auto; }
html[data-current-scale][data-layout="sheet"][data-card="detailed"] #panel { height: var(--card-drag, var(--card-h-detailed, 80dvh)); }
html[data-current-scale][data-layout="sheet"] #panel.dragging { transition: none; }
/* A tablet held upright: the same sheet with margins and more generous type. */
@media (min-width: 721px) {
  html[data-current-scale][data-layout="sheet"] #panel { left: 16px; right: 16px; bottom: 14px; }
}
html[data-layout="sheet"] .res-card { height: 100%; max-height: none; border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 721px) { html[data-layout="sheet"] .res-card { border-radius: 26px; } }
html[data-layout="sheet"] .res-card .card-grip { display: flex; justify-content: center; padding: 10px 0 0; cursor: grab; touch-action: none; }
html[data-layout="sheet"] .res-card .card-grip span { width: 44px; height: 5px; border-radius: 5px; background: var(--rs-line); }
html[data-layout="sheet"] .res-card .card-head { padding: 10px 14px 0 22px; touch-action: none; }
html[data-layout="sheet"] .res-card .card-title { font-size: 30px !important; }
html[data-layout="sheet"][data-card="reduced"] .res-card .card-head { padding-bottom: 12px; cursor: pointer; }
html[data-layout="sheet"] .res-card .card-body { padding: 12px 22px 6px; flex: 1 1 auto; }
html[data-layout="sheet"] .res-card .card-foot { padding: 10px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid transparent; }
html[data-layout="sheet"][data-card="detailed"] .res-card .card-foot { border-top-color: var(--rs-line); }
html[data-layout="sheet"] .card-figures .figure { padding-right: 8px; }
@supports (clip-path: shape(from 0 0, line to 100% 0, line to 0 100%, close)) {
  html[data-current-scale][data-layout="sheet"] .res-card { clip-path: none; }
}

/* The scene behind the sheet runs to the reduced card's top, so the viewer's own bottom bar (an
   export that takes no command keeps its own) is never under the strip. */
html[data-current-scale="residence"][data-layout="sheet"] #scene { bottom: calc(var(--card-h-reduced, 88px) - 18px); }
html[data-current-scale="residence"][data-layout="sheet"][data-tools="on"] #scene { bottom: 0; }

/* ---------------------------------------------------------------- the camera toolbar */

#sceneTools {
  position: absolute; z-index: 12; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 8px 10px; max-width: calc(100% - 24px);
  background: var(--rs-paper); border-radius: 18px; box-shadow: 0 10px 30px rgba(35,31,30,.22);
}
#sceneTools[hidden] { display: none; }
/* Centred in the part of the scene the card leaves free. */
html[data-current-scale="residence"]:not([data-layout="sheet"]):not([data-card="reduced"]) #sceneTools { left: calc(50% - 200px); }
html[data-current-scale="residence"][data-layout="desktop"]:not([data-card="reduced"]) #sceneTools { left: calc(50% - 210px); }
#sceneTools .tool-presets, #sceneTools .tool-more { display: flex; align-items: center; gap: 2px; }
#sceneTools button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 4px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); font: inherit; cursor: pointer;
}
#sceneTools button:hover { background: var(--rs-bg); }
#sceneTools button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; }
#sceneTools .tool-preset { flex-direction: column; gap: 2px; min-width: 76px; padding: 6px 12px; font-size: 14px; }
#sceneTools .tool-preset svg { stroke-width: 1.5; }
#sceneTools .tool-preset.active { font-weight: 700; }
#sceneTools .tool-preset.active span::after {
  content: ""; display: block; height: 3px; margin: 2px auto 0; width: 100%; border-radius: 3px; background: var(--accent);
}
#sceneTools .tool[aria-pressed="true"] { color: var(--rs-ink); background: var(--rs-bg); }
#sceneTools .tool-sep { width: 1px; height: 34px; margin: 0 8px; background: var(--rs-line); }
#sceneTools .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#sceneTools .tool-overflow { display: none; }

/* A phone, a tablet held upright, or a narrow rail: the presets and « … », the rest in a pop-over. */
html[data-layout="sheet"] #sceneTools,
html[data-layout="rail"] #sceneTools { padding: 6px 8px; }
html[data-layout="sheet"] #sceneTools .tool-overflow { display: inline-flex; }
html[data-layout="sheet"] #sceneTools .tool-more {
  display: none; position: absolute; right: 0; bottom: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 2px;
  min-width: 240px; padding: 8px; background: var(--rs-paper); border-radius: 16px; box-shadow: 0 14px 40px rgba(35,31,30,.24);
}
html[data-layout="sheet"] #sceneTools[data-more="open"] .tool-more { display: flex; }
html[data-layout="sheet"] #sceneTools .tool-more .tool { justify-content: flex-start; gap: 12px; padding: 8px 12px; }
html[data-layout="sheet"] #sceneTools .tool-more .tool-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (max-width: 1100px) {
  html[data-layout="rail"] #sceneTools .tool-overflow { display: inline-flex; }
  html[data-layout="rail"] #sceneTools .tool-more .tool[data-tool="zoom-in"],
  html[data-layout="rail"] #sceneTools .tool-more .tool[data-tool="zoom-out"] { display: none; }
  html[data-layout="rail"] #sceneTools[data-more="open"] .tool-more .tool { display: inline-flex; }
}
html[data-layout="sheet"] #sceneTools { width: calc(100% - 24px); max-width: 560px; justify-content: space-between; }
/* Above the sheet, whatever its height (the drag included). */
html[data-current-scale="residence"][data-layout="sheet"][data-card="reduced"] #sceneTools { bottom: calc(var(--card-drag, var(--card-h-reduced, 88px)) + 12px); }
html[data-current-scale="residence"][data-layout="sheet"][data-card="summary"] #sceneTools { bottom: calc(var(--card-drag, var(--card-h-summary, 40dvh)) + 12px); }

/* ---------------------------------------------------------------- the gesture hint */

#gestureHint {
  position: absolute; z-index: 11; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 16px;
  background: rgba(35,31,30,.78); color: #fff; font-size: 15px; pointer-events: none;
}
#gestureHint[hidden] { display: none; }
#gestureHint p { display: flex; align-items: center; gap: 10px; margin: 0; }

/* ---------------------------------------------------------------- the feedback button */

html[data-current-scale]:not([data-layout="sheet"]) #feedbackBtn {
  right: auto; left: calc(var(--nav-w) + 16px); top: auto; bottom: 16px;
}
html[data-current-scale][data-layout="sheet"] #feedbackBtn {
  left: auto; right: 12px; top: calc(var(--header-h) + 16px); bottom: auto;
}

/* The audience / buyer-link notice (tracker.css) starts beside the sidebar, above the Feedback button, and on
   a map right of its zoom column. */
html[data-current-scale]:not([data-layout="sheet"]) .link-notice {
  left: calc(var(--nav-w) + 16px); max-width: min(640px, calc(100vw - var(--nav-w) - var(--panel-edge) - 48px));
}
html[data-current-scale]:not([data-current-scale="residence"]):not([data-layout="sheet"]) .link-notice { left: calc(var(--nav-w) + 52px); }

@media (prefers-reduced-motion: reduce) {
  #residenceNav, html[data-current-scale="residence"] #scene, html[data-current-scale] #map, html[data-current-scale][data-layout="sheet"] #panel { transition: none; }
}

/* A tablet held upright: the sheet floats 14px above the bottom, so does the toolbar on it. */
@media (min-width: 721px) { html[data-current-scale="residence"][data-layout="sheet"] #sceneTools { margin-bottom: 14px; } }

/* Another section on a sheet (a panorama above all): the scene ends where the sheet starts, so the
   viewer drawn in it (panorama.js: its mini-map, its buttons) is never under the card. */
html[data-current-scale="residence"][data-layout="sheet"]:not([data-section="overview"])[data-card="summary"] #scene { bottom: var(--card-h-summary, 40dvh); }
html[data-current-scale="residence"][data-layout="sheet"]:not([data-section="overview"])[data-card="detailed"] #scene { bottom: var(--card-h-detailed, 80dvh); }

/* ---------------------------------------------------------------- a panorama in the shell (#79) */

/* Panorama.js was laid out for the old side panel; in the shell the Feedback button covered its
   mini-map, the hint ran under the mini-map, and the section chooser covered its title. Top left:
   what one looks at (title, views, the annotations switch, which annotations.js keeps under the
   head). Bottom right of the free area: how one moves, the mini-map above one row of zoom, reset and
   full screen. Bottom left stays the Feedback button's. The hint is centred in the free area, like
   the 3D scene's gesture hint. Full screen (no card, --pano-right 16px) is laid out the same way. */
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama .panorama-controls {
  top: auto; bottom: 16px; transform: none; grid-auto-flow: column;
}
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama .panorama-map {
  left: auto; right: var(--pano-right); bottom: 66px; width: min(220px, calc(100% - var(--pano-right) - 150px));
}
html[data-current-scale="residence"] .panorama .panorama-hint {
  top: 50%; bottom: auto; transform: translate(-50%, -50%); max-width: min(420px, calc(100% - var(--panel-edge) - 32px));
}
/* On a sheet (a tablet held upright too) the card is below the scene, not beside it. */
html[data-current-scale="residence"][data-layout="sheet"] .panorama { --pano-right: 12px; --pano-mid: 50%; }
html[data-current-scale="residence"][data-layout="sheet"] .panorama .panorama-hint,
html[data-current-scale="residence"] .panorama.expanded .panorama-hint { max-width: min(420px, calc(100% - 32px)); }
/* The top-left stack stays in the free area: on a narrow window the annotations switch ran under the card. */
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .panorama-head { max-width: min(420px, calc(100% - var(--panel-edge) - 32px)); }
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .ann-tools { max-width: calc(100% - var(--panel-edge) - 32px); overflow-x: auto; scrollbar-width: none; }
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .ann-tools button { flex: 0 0 auto; white-space: nowrap; }
/* The annotations list opens from the bottom left: above the Feedback button, below the switch,
   left of the mini-map. */
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .ann-panel:not(.at-top) {
  bottom: 64px; width: min(340px, calc(100% - var(--panel-edge) - 250px));
  max-height: calc(100% - 64px - var(--pano-head-top, 16px) - var(--ann-below-h, 96px) - 64px);
}
/* The chooser (rail and sheet) sits in the scene's top left: the head starts under it. */
html[data-current-scale="residence"][data-layout="rail"] .panorama:not(.expanded) { --pano-head-top: 74px; }
html[data-current-scale="residence"][data-layout="sheet"] .panorama:not(.expanded) { --pano-head-top: 70px; }
html[data-current-scale="residence"][data-layout="sheet"] .panorama:not(.expanded) .panorama-head { max-width: calc(100% - 84px); }
/* On a sheet the sheet itself names the view and its place; the switch shows which one is on. A
   switch wider than the screen scrolls on one line instead of wrapping into a blob. */
html[data-current-scale="residence"][data-layout="sheet"] .panorama-head:has(.panorama-views:not([hidden])) .panorama-title { display: none; }
html[data-current-scale="residence"] .panorama-views { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html[data-current-scale="residence"] .panorama-views button { flex: 0 0 auto; white-space: nowrap; }

/* ---------------------------------------------------------------- the season switch (#80) */

/* season-theme.js: while the class is on, the page's chrome fades to the new palette (colour only; nothing
   here takes input, unlike a View Transition, M-111). The card is rebuilt by the render and takes the
   new palette at once. */
html.season-switching :is(body, header, header *, #residenceNav, #residenceNav *, #sectionChooser .chooser-btn, .shell) {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease;
}
/* The weather after a switch: over everything, never in the way of a click, gone by itself. */
.season-weather { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.season-snow { width: 100vw; height: 100vh; }
.season-glow {
  background: radial-gradient(circle at 85% 0%, rgba(255,196,110,.38), rgba(255,214,150,.16) 35%, transparent 65%);
  opacity: 0; animation: season-glow 2.2s ease-in-out forwards;
}
@keyframes season-glow { 30% { opacity: 1; } 100% { opacity: 0; } }