/* The sun at a location. Added to style.css; the same look, and a code of colours of its own
   (Gonzalo, 2026-09-29): the longest day, the equinoxes and the shortest day; the altitude and the
   azimuth, the same in the numbers and in the drawings; the sun in yellow. Every colour is dark
   enough to be read as text on white, and no meaning is carried by colour alone: every line has
   its name written on it. */

:root {
  --night: #1c2233;
  --c-heat: #000000;
  --c-long: #c8500a;
  --c-even: #00805e;
  --c-short: #0072b2;
  --c-altitude: #a8327e;
  --c-azimuth: #8a5a00;
  --c-sun: #ffc400;
}
.c-long { stroke: var(--c-long) !important; }
.c-even { stroke: var(--c-even) !important; }
.c-short { stroke: var(--c-short) !important; }
.c-altitude { stroke: var(--c-altitude) !important; }
.c-azimuth { stroke: var(--c-azimuth) !important; }
.t-long, text.d-text.t-long { fill: var(--c-long); color: var(--c-long); }
.t-even, text.d-text.t-even { fill: var(--c-even); color: var(--c-even); }
.t-short, text.d-text.t-short { fill: var(--c-short); color: var(--c-short); }
.t-altitude, text.d-text.t-altitude { fill: var(--c-altitude); color: var(--c-altitude); }
.t-azimuth, text.d-text.t-azimuth { fill: var(--c-azimuth); color: var(--c-azimuth); }
.t-heat { display: inline-flex; align-items: center; gap: 0.375rem; }
.heat-chip { width: 1.125rem; height: 1.125rem; border-radius: 50%; }
dt.k-heat { padding-left: 0.625rem; border-left: 0.25rem solid var(--gray-medium); }
.hour-strip { height: 0.375rem; margin: -0.25rem 0 0.25rem; border-radius: 0.1875rem; border: 1px solid var(--border); }
.heat-scale { display: flex; flex-wrap: wrap; list-style: none; margin: 1rem 0 0; padding: 0; max-width: 46rem; font-size: 0.8125rem; }
.heat-scale li { flex: 1 1 3.5rem; padding: 0.375rem 0.25rem; text-align: center; color: var(--black); }
.heat-scale li.on-dark { color: var(--white); }
.k-long { border-left: 0.5rem solid var(--c-long); }
.k-even { border-left: 0.5rem solid var(--c-even); }
.k-short { border-left: 0.5rem solid var(--c-short); }
dt.k-altitude, dt.k-azimuth { padding-left: 0.625rem; border-left: 0.25rem solid; border-radius: 0; }
dt.k-altitude { border-color: var(--c-altitude); }
dt.k-azimuth { border-color: var(--c-azimuth); }

.facts-first { margin-top: 0; }
.region { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.region .chip-code { min-width: 0; }

.facts-place { grid-template-columns: minmax(11rem, 1fr) minmax(0, 3fr); }
@media (max-width: 36rem) { .facts-place { grid-template-columns: minmax(0, 1fr); } }

/* The day and the hour stay in sight while the drawings are looked at. */
.controls {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-top: 2rem;
  padding: 0.75rem 0 0.875rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.controls .section-title { margin-bottom: 0.5rem; }
@media (max-width: 44rem), (max-height: 44rem) { .controls { position: static; } }

.turning { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.turning .tab { height: auto; min-height: 2.75rem; padding: 0.3125rem 0.875rem; text-align: left; line-height: 1.3; }
.turning .tab span { display: block; font-family: var(--font-sans); font-weight: 400; }
.turning .tab[aria-pressed="true"] { background: var(--black); color: var(--white); }

.control {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 21rem);
  gap: 0.25rem 1rem;
  align-items: start;
  margin-top: 0.375rem;
}
.control > label { margin: 0; line-height: 2.25rem; }
.control-now { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.75rem; min-height: 2.25rem; }
.control-now .btn { height: 2.25rem; }
@media (max-width: 52rem) {
  .control { grid-template-columns: minmax(0, 1fr); }
  .control > label { line-height: 1.5; }
}

.slide input[type="range"] {
  display: block;
  width: 100%;
  height: 2.25rem;
  margin: 0;
  accent-color: var(--black);
  cursor: pointer;
}
.slide input[type="range"]:disabled { cursor: default; opacity: 0.4; }
.slide input[type="range"]:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.slide-ends { display: flex; justify-content: space-between; margin-top: -0.25rem; color: var(--gray-dark); font-size: 0.8125rem; }

.inline-label { margin: 0; font-weight: 400; color: var(--gray-dark); font-size: 0.875rem; }
.date-field {
  height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--gray-medium);
  border-radius: 0.375rem;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: 0.875rem;
}
.date-field:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.now { font-family: var(--font-title); font-weight: 700; font-size: 1rem; }
.sun-now { margin: 0.625rem 0 0; font-weight: 700; }
.controls .note { margin-top: 0.625rem; }

.diagrams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.diagram { margin: 0; border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; }
.diagram figcaption { margin: 0 0 0.5rem; color: var(--gray-dark); font-size: 0.875rem; }
.diagram figcaption .sub-title { display: block; margin: 0; color: var(--black); }
.diagram svg { display: block; width: 100%; height: auto; }
#above { max-width: 34rem; margin: 0 auto; }

.d-rim { fill: var(--white); stroke: var(--black); stroke-width: 1.5; }
.d-ring, .d-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.d-axis { fill: none; stroke: var(--black); stroke-width: 1.5; }
.d-turn { fill: none; stroke: var(--gray-dark); stroke-width: 2; }
.d-hour { fill: none; stroke: var(--gray-medium); stroke-width: 1; stroke-dasharray: 3 3; }
.d-day { fill: none; stroke: var(--black); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.d-guide { fill: none; stroke: var(--black); stroke-width: 1.5; stroke-dasharray: 4 3; }
.d-angle { fill: none; stroke: var(--black); stroke-width: 2; }
.d-foot { fill: none; stroke: var(--black); stroke-width: 3; }
.d-sun { fill: var(--c-sun); stroke: var(--black); stroke-width: 2; pointer-events: none; }
.d-grip { fill: transparent; stroke: none; cursor: grab; touch-action: none; }
svg.is-dragging .d-grip { cursor: grabbing; }
.d-text { font-family: var(--font-sans); font-size: 12px; fill: var(--gray-dark); }
.d-small { font-size: 10.5px; }
.d-strong { font-weight: 700; fill: var(--black); }
.d-halo { paint-order: stroke; stroke-width: 4px; stroke-linejoin: round; }

.key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; margin: 1rem 0 0; padding: 0; font-size: 0.875rem; }
.key li { display: flex; align-items: center; gap: 0.5rem; }
.key-line { display: inline-block; width: 2rem; height: 0; border-top: 2px solid var(--gray-dark); }
.key-long { border-top-color: var(--c-long); }
.key-even { border-top-color: var(--c-even); }
.key-short { border-top-color: var(--c-short); }
.key-altitude { border-top: 2px dashed var(--c-altitude); }
.key-azimuth { border-top-color: var(--c-azimuth); }
.key-day { border-top: 3.5px solid var(--black); }
.key-hour { border-top: 1px dashed var(--gray-medium); }

/* The model in three dimensions */
.model-views { margin: 0.5rem 0 0.25rem; }
.model-views .tab { min-height: 2.5rem; }
#model { max-width: 44rem; margin: 0 auto; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
#model.is-dragging { cursor: grabbing; }
#model:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.m-ground { fill: var(--gray-light); fill-opacity: 0.75; stroke: var(--black); stroke-width: 1.5; stroke-linejoin: round; }
.m-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.m-grid-strong { stroke: var(--gray-medium); }
.m-tick { fill: none; stroke: var(--black); stroke-width: 1; }
.m-hourline { fill: none; stroke: var(--gray-medium); stroke-width: 1; stroke-dasharray: 3 3; }
.m-cross { fill: none; stroke: var(--gray-medium); stroke-width: 1; }
.m-turn { fill: none; stroke: var(--gray-dark); stroke-width: 2; stroke-linecap: round; }
.m-day { fill: none; stroke: var(--black); stroke-width: 3.5; stroke-linecap: round; }
.m-far { opacity: 0.35; }
.m-hour { fill: var(--white); stroke: var(--black); stroke-width: 1.5; }
.m-post { fill: none; stroke: var(--black); stroke-width: 4; stroke-linecap: round; }
.m-shadow { fill: none; stroke: var(--gray-dark); stroke-width: 6; stroke-linecap: round; opacity: 0.55; }
.m-foot { fill: none; stroke: var(--black); stroke-width: 2; }
.m-angle { fill: none; stroke: var(--black); stroke-width: 2; }
.key-shadow { border-top: 6px solid var(--gray-dark); opacity: 0.55; }

/* The sky of the model: light blue by day, very dark blue by night, with small stars. The ground
   takes the colour of the warmth of the air. By night the lines of the model turn light, and the
   colours of the code with them. */
.m-air { stroke: none; }
.m-star { fill: var(--white); stroke: none; }
/* the plane of the day: in full colour white and solid, technical a light veil */
.m-plane { fill: var(--black); fill-opacity: 0.06; stroke: none; }
.m-svg.is-colour .m-plane { fill: var(--white); fill-opacity: 1; }
.m-svg.is-colour .m-ground { fill-opacity: 1; }
/* the ground: in the colour of the warmth, and seen through very little (Gonzalo, 2026-09-29: "the
   ground flor plane should reflect the temperature collor", "not translucent", "or very little") */
.m-ground { fill-opacity: 0.92; }
.d-halo { stroke: var(--halo, var(--white)); }
.m-under { stroke-dasharray: 2 5; opacity: 0.6; }
.d-sun.is-under { opacity: 0.7; }
.m-svg.is-dark {
  --c-long: #ff9a5c;
  --c-even: #56d6aa;
  --c-short: #7fc0ff;
  --c-altitude: #ff93d4;
  --c-azimuth: #ecc36a;
}
.m-svg.is-dark .m-ground { stroke: var(--white); }
.m-svg.is-dark .m-grid { stroke: rgba(255, 255, 255, 0.16); }
.m-svg.is-dark .m-grid-strong { stroke: rgba(255, 255, 255, 0.32); }
.m-svg.is-dark .m-cross, .m-svg.is-dark .m-hourline { stroke: rgba(255, 255, 255, 0.45); }
.m-svg.is-dark .m-tick, .m-svg.is-dark .m-day, .m-svg.is-dark .m-post, .m-svg.is-dark .d-guide { stroke: var(--white); }
.m-svg.is-dark .c-altitude { stroke: var(--c-altitude); }
.m-svg.is-dark .c-azimuth { stroke: var(--c-azimuth); }
.m-svg.is-dark .m-hour { fill: var(--night); stroke: var(--white); }
.m-svg.is-dark .d-text { fill: #e6e6e6; }
.m-svg.is-dark .d-strong { fill: var(--white); }

/* The model as one picture with everything inside it (Gonzalo, 2026-09-29: two versions of the
   model; "All data is on the side of thediagrams in smaller letters"; "all controls should be inside
   as well. smaller"; "those The Model buttons you added also inside, like icons"): the buttons as
   icons at the top, the numbers down the side in small letters, the day and the hour along the
   bottom. On a narrow screen they stand under the picture. */
.page-wide { max-width: 76rem; }
.work-main { display: grid; gap: 1.5rem; min-width: 0; margin-top: 1.5rem; }
.stage-figure { padding: 0; border: 0; }
.stage-figure figcaption { margin: 0.5rem 0 0; }
.stage { position: relative; border-radius: 0.5rem; overflow: hidden; color: var(--black); --veil: rgba(255, 255, 255, 0.62); --line: rgba(0, 0, 0, 0.18); }
.stage.is-dark { color: var(--white); --veil: rgba(6, 10, 38, 0.55); --line: rgba(255, 255, 255, 0.25); }
.stage.is-dark { --c-long: #ff9a5c; --c-even: #56d6aa; --c-short: #7fc0ff; --c-altitude: #ff93d4; --c-azimuth: #ecc36a; }
.stage #model { max-width: none; margin: 0; width: 100%; height: auto; display: block; }
.m-air { stroke: none; }

.stage-icons { position: absolute; left: 0.5rem; top: 0.5rem; display: grid; gap: 0.25rem; }
.icon-row { display: flex; gap: 0.1875rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 0.25rem;
  background: var(--veil); color: inherit; cursor: pointer;
}
.icon-btn svg { width: 1rem; height: 1rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: var(--line); }
.icon-btn[aria-pressed="true"] { background: var(--black); color: var(--white); }
.stage.is-dark .icon-btn[aria-pressed="true"] { background: var(--white); color: var(--black); }
.icon-btn:focus-visible { outline: none; background: var(--line); }
.icon-btn[aria-pressed="true"]:focus-visible, .icon-btn[aria-pressed="true"]:hover { background: var(--black); }
.stage.is-dark .icon-btn[aria-pressed="true"]:focus-visible, .stage.is-dark .icon-btn[aria-pressed="true"]:hover { background: var(--white); }
.icon-btn .words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage-data {
  position: absolute; right: 0.5rem; top: 0.5rem; bottom: 0.5rem; width: 26%; max-width: 14rem;
  padding: 0.375rem 0.5rem; border-radius: 0.375rem; background: var(--veil); border: 1px solid var(--line);
  font-size: 0.625rem; line-height: 1.3; overflow-y: auto;
}
.stage-title { margin: 0 0 0.125rem; font-size: 0.6875rem; font-weight: 700; }
.stage-data .sun-now { margin: 0 0 0.25rem; font-size: 0.625rem; font-weight: 700; }
.stage-data .heat-chip { width: 0.75rem; height: 0.75rem; }
.data { margin: 0; }
.data > div { padding: 0.1875rem 0; border-top: 1px solid var(--line); }
.data dt { opacity: 0.75; }
.data dd { margin: 0; font-weight: 700; }
.stage-data dt.k-altitude, .stage-data dt.k-azimuth, .stage-data dt.k-heat { padding-left: 0.375rem; border-left-width: 0.1875rem; }
.stage-data dt.k-heat { border-color: currentColor; }
.stage-data .heat-scale { margin-top: 0.375rem; font-size: 0.5625rem; max-width: none; }
.stage-data .heat-scale { flex-wrap: nowrap; }
.stage-data .heat-scale li { flex: 1 1 0; min-width: 0; padding: 0.125rem 0; color: var(--black); white-space: nowrap; overflow: hidden; }
.stage-data .heat-scale li.on-dark { color: var(--white); }
.stage-data .note { font-size: 0.625rem; background: transparent; padding: 0; margin: 0.25rem 0 0; }

.stage-controls {
  position: absolute; left: 0.5rem; bottom: 0.5rem; width: calc(74% - 1.5rem);
  padding: 0.25rem 0.5rem 0.3125rem; border-radius: 0.375rem; background: var(--veil); border: 1px solid var(--line);
  font-size: 0.625rem; line-height: 1.25;
}
.stage .turning { display: flex; flex-wrap: wrap; gap: 0.1875rem; margin: 0 0 0.125rem; }
.stage .turning .tab {
  height: auto; min-height: 0; padding: 0.0625rem 0.3125rem; font-size: 0.5625rem; line-height: 1.25; text-align: left;
  background: transparent; color: inherit; border-color: var(--line); border-left-width: 0.3125rem;
}
.stage .turning .tab.k-long { border-left-color: var(--c-long); }
.stage .turning .tab.k-even { border-left-color: var(--c-even); }
.stage .turning .tab.k-short { border-left-color: var(--c-short); }
.stage .turning .tab span { display: inline; font-size: 0.5625rem; margin-left: 0.25rem; }
.stage .turning .tab[aria-pressed="true"] { background: var(--black); color: var(--white); }
.stage.is-dark .stage .turning .tab[aria-pressed="true"] { background: var(--white); color: var(--black); }
.stage-slide { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto auto; gap: 0.375rem; align-items: center; }
.stage-slide label { margin: 0; font-size: 0.625rem; }
.stage-slide .slide { max-width: none; }
.stage-slide .slide input[type="range"] { height: 1rem; accent-color: currentColor; }
.stage-slide .hour-strip { height: 0.1875rem; margin: 0; }
.stage-slide .now { font-size: 0.625rem; min-width: 5.75rem; }
.stage-slide .date-field { height: 1.25rem; font-size: 0.5625rem; padding: 0 0.1875rem; background: transparent; color: inherit; border-color: var(--line); }
.stage.is-dark .date-field { color-scheme: dark; }
.stage-slide .icon-btn { width: 1.25rem; height: 1.25rem; }
.stage-slide .icon-btn svg { width: 0.75rem; height: 0.75rem; }
.stage-day { margin: 0.0625rem 0 0 2.125rem; font-size: 0.5625rem; opacity: 0.8; }
.stage-controls .note { font-size: 0.625rem; background: transparent; padding: 0; margin: 0.125rem 0 0; font-weight: 700; }
.key { margin-top: 1rem; }

@media (max-width: 46rem) {
  .stage { overflow: visible; color: var(--black); --veil: transparent; --line: var(--border); }
  .stage.is-dark { color: var(--black); --veil: transparent; --line: var(--border); }
  .stage #model { border-radius: 0.5rem; }
  .stage-icons { left: 0.375rem; top: 0.375rem; color: var(--black); --veil: rgba(255, 255, 255, 0.7); }
  .stage.is-dark .stage-icons { color: var(--white); --veil: rgba(6, 10, 38, 0.55); --line: rgba(255, 255, 255, 0.25); }
  /* under the picture first the day and the hour, then the numbers */
  .stage { display: flex; flex-direction: column; }
  .stage #model { order: 1; }
  .stage-controls { order: 2; }
  .stage-data { order: 3; }
  .stage-data, .stage-controls { position: static; width: auto; max-width: none; margin-top: 0.75rem; border: 1px solid var(--border); }
  .stage-data { font-size: 0.8125rem; }
  .stage-controls { font-size: 0.8125rem; }
  .stage-slide { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .stage-slide .now, .stage-slide .date-field, .stage-slide .icon-btn { grid-column: 2; justify-self: start; }
}

/* The two versions of the model */
.m-corners { stroke: none; pointer-events: none; }
.m-ball { stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.2; }
.m-glow { stroke: none; pointer-events: none; }
/* no border on the two planes (Gonzalo, 2026-10-01: "they already had a border, take it out") */
.m-svg.is-colour .m-ground, .m-svg.is-colour .m-plane { stroke: none; }
/* and no black ring round the sun plane: the line of the sun's day, which is its edge (Gonzalo, 2026-10-01: "Take it out") */
.m-turnplane { fill-opacity: 1; opacity: 0.32; stroke: none !important; pointer-events: none; }
.m-turnplane.c-long { fill: var(--c-long); }
.m-turnplane.c-even { fill: var(--c-even); }
.m-turnplane.c-short { fill: var(--c-short); }
.m-edge { fill: none; stroke: var(--edge, transparent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.m-edge-day { stroke-width: 7; }
.stage-scale { margin: 0.375rem 0 0; opacity: 0.75; }
.stage-data .heat-scale { margin-top: 0.125rem; }
.stage-data .stage-title { margin-top: 0.4375rem; }
.stage-data .stage-title:first-child { margin-top: 0; }
#s-heat { display: flex; align-items: center; gap: 0.25rem; }
/* what is laid over the picture changes its tone at once when day turns to night */
.stage .tab, .stage .icon-btn, .stage .btn { transition: none; }

/* The angles as planes: no border, translucent, their numbers large and flat in them
   (Gonzalo, 2026-10-01). The letters of the compass: translucent, no border. */
.m-anglefill { stroke: none !important; pointer-events: none; }
.m-anglefill.c-azimuth { fill: var(--c-azimuth); fill-opacity: 1; opacity: 0.38; }
.m-anglefill.c-altitude { fill: var(--c-altitude); fill-opacity: 1; opacity: 0.32; }
text.m-bignumber { font-weight: 700; stroke: none; fill-opacity: 0.6; pointer-events: none; }
.m-letter { font-weight: 700; fill: var(--black); fill-opacity: 0.5; stroke: none; }
.m-svg.is-dark .m-letter { fill: var(--white); }
.m-svg.is-colour .d-sun, .m-svg.is-colour.is-dark .d-sun { stroke: none; }
.m-risemark { fill: var(--c-sun); fill-opacity: 1; opacity: 0.3; stroke: none; pointer-events: none; }
text.m-marktext { font-weight: 700; fill: var(--black); fill-opacity: 0.55; stroke: none; pointer-events: none; }
.m-svg.is-dark text.m-marktext { fill: var(--white); }

/* The fourth row of the icons: the equinoxes and the solstices, and the legend of the icons after the rows */
.stage-icons .turning { max-width: 30rem; margin: 0; }
.stage-icons .turning .tab { background: var(--veil); }
/* The name of the icon the pointer rests on, after the last icon of its row: no border */
.icon-legend { display: inline-flex; align-items: center; margin-left: 0.125rem; padding: 0 0.375rem; border-radius: 0.25rem; background: var(--veil); font-size: 0.625rem; line-height: 1.3; white-space: nowrap; }
.icon-legend[hidden] { display: none; }
.m-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; pointer-events: none; }
.m-icon.c-long { color: var(--c-long); }
.m-icon.c-even { color: var(--c-even); }
.m-icon.c-short { color: var(--c-short); }
.m-iconmark { color: var(--black); opacity: 0.6; }
.m-svg.is-dark .m-iconmark { color: var(--white); }
/* the halves under the ground, the night: planes again, more translucent than the halves over the ground */
.m-svg.is-colour .m-plane.m-planenight { opacity: 0.2; stroke: none; }
.m-turnplane.m-turnnight { opacity: 0.08; }

/* The sliders (Gonzalo, 2026-10-01): no line about the time under them, no borders on them and no
   rectangle behind them */
.stage-day { display: none; }
.stage .hour-strip, .stage .date-field { border: 0; }
.stage-controls { background: none; border: 0; }
.mini-map { display: block; width: 100%; height: auto; margin-top: 0.5rem; aspect-ratio: 2 / 1; cursor: crosshair; border: 0; }
.mini-map:focus-visible { outline: none; }

/* The numbers beside the model: no one background for them as a whole, three areas and the map each on
   a background like the icons', no border (Gonzalo, 2026-10-01) */
.stage-data { background: none; border: 0; padding: 0; display: grid; gap: 0.3125rem; align-content: start; }
.stage-card { padding: 0.375rem 0.5rem; border-radius: 0.375rem; background: var(--veil); }
.stage-card .stage-title { margin-top: 0; }
.stage-card-map { padding: 0.375rem; }
.stage-card-map .mini-map { margin-top: 0; }
@media (max-width: 46rem) { .stage-data { border: 0; } }

/* the button for PVGIS in the air card; the hills, the wind rose and the path of the sun */
.stage-ask { margin: 0.25rem 0 0; }
.stage-card .btn { height: auto; min-height: 0; padding: 0.1875rem 0.5rem; font-size: 0.625rem; }
.stage-card .help { font-size: 0.625rem; }
:root { --c-hills: #7b6a45; --c-wind: #1f8f8a; }
.stage.is-dark { --c-hills: #b9a778; --c-wind: #5fd0c9; }
.m-hills { fill: var(--c-hills); opacity: 0.5; stroke: none; pointer-events: none; }
.m-rose { fill: var(--c-wind); fill-opacity: 1; opacity: 0.45; stroke: none; pointer-events: none; }

/* The enlarge button of the small map and the window of the climate map */
.stage-card-map { position: relative; }
.mini-map-enlarge { position: absolute; right: 0.5rem; top: 0.5rem; width: 1.25rem; height: 1.25rem; z-index: 2; }
.mini-map-enlarge svg { width: 0.75rem; height: 0.75rem; }

/* THE LAYOUT OF THE PICTURE (Gonzalo, 2026-10-01): the numbers and the map on the left, the icons on the
   right with their legends opening to the left, the sliders under the picture with their icons on them */
.stage-icons { left: auto; right: 0.5rem; justify-items: end; }
.icon-row { justify-content: flex-end; }
.icon-legend { margin-left: 0; margin-right: 0.125rem; }
.stage-data { left: 0.5rem; right: auto; }
.stage-controls { left: auto; right: 0.5rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }

.slide { position: relative; }
.slide-marks { position: absolute; left: 0; right: 0; height: 1.25rem; pointer-events: none; }
.slide-marks-over { top: -1.5rem; }
.slide-marks-under { bottom: -1.5rem; }
.slide-marks .icon-btn.mark { position: absolute; top: 0; transform: translateX(-50%); width: 1.25rem; height: 1.25rem; pointer-events: auto; }
.slide-marks .icon-btn.mark svg { width: 0.75rem; height: 0.75rem; }

/* the sliders: no border anywhere, the day and the night of the day in the hour slider itself */
.stage-slide input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 1rem; outline: none; border: 0; }
.stage-slide input[type="range"]::-webkit-slider-runnable-track { height: 0.3125rem; border-radius: 0.15625rem; background: var(--line); border: 0; }
.stage-slide input[type="range"]::-moz-range-track { height: 0.3125rem; border-radius: 0.15625rem; background: var(--line); border: 0; }
#hour::-webkit-slider-runnable-track { background: var(--day-gradient, var(--line)); }
#hour::-moz-range-track { background: var(--day-gradient, var(--line)); }
.stage-slide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0.9rem; height: 0.9rem; margin-top: -0.29375rem; border: 0; border-radius: 50%; background: currentColor; }
.stage-slide input[type="range"]::-moz-range-thumb { width: 0.9rem; height: 0.9rem; border: 0; border-radius: 50%; background: currentColor; }

/* the small map grows, from its corner, into the climate map inside the picture of the path of the sun */
.stage-big { position: absolute; z-index: 20; overflow: hidden; border-radius: 0.375rem; background: var(--white); color: var(--black); transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease; }
.stage-big[hidden] { display: none; }
.stage-big.is-big { left: 0.5rem; top: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; height: auto; }
@media (prefers-reduced-motion: reduce) { .stage-big { transition: none; } }
.stage-big .mini-map-enlarge { z-index: 30; }
.stage-big-body { height: 100%; overflow-y: auto; padding: 0 0.75rem 1.5rem; font-size: 1rem; }
.stage-big-body > section:first-child { margin-top: 0.75rem; padding-right: 2rem; }
.stage-big-body section.ask .section-title, .stage-big-body section.map-part > .section-title { display: none; }
.stage-big-body section.ask .help { display: none; }
.stage-big-body section { margin-top: 0.75rem; }
.stage-big .map-frame { height: 20rem; min-height: 0; aspect-ratio: auto; }

/* the place in words under the small map */
.mini-info { margin-top: 0.375rem; font-size: 0.625rem; line-height: 1.3; }
.mini-line { margin: 0; }
.mini-first { font-weight: 700; }
.mini-region { display: flex; align-items: center; gap: 0.3125rem; margin-top: 0.125rem; }
.mini-chip { width: 0.75rem; height: 0.75rem; border-radius: 0.125rem; flex: none; }

/* the year runs by a button beside the day, as the day runs by one beside the hour */
.stage-slide { grid-template-columns: 1.75rem minmax(0, 1fr) auto auto auto; }
#run { grid-column: 5; }
@media (max-width: 46rem) { .stage-slide { grid-template-columns: 2.25rem minmax(0, 1fr); } #run { grid-column: 2; } }
.date-pick { display: inline-flex; gap: 0.125rem; }
.stage-slide .date-pick select.date-field { height: 1.25rem; font-size: 0.5625rem; padding: 0 0.1875rem; background: transparent; color: inherit; border: 0; border-radius: 0.25rem; appearance: auto; cursor: pointer; }
.stage-slide .date-pick select.date-field option { color: var(--black); background: var(--white); }

/* ALL THE ICONS IN ONE LINE AT THE VERY TOP (Gonzalo, 2026-10-01); the name of the icon under the pointer
   shows under the line, so that nothing moves */
.stage-icons { display: flex; flex-direction: row; align-items: flex-start; gap: 0.5rem; left: auto; right: 0.5rem; top: 0.5rem; }
.icon-row { position: relative; }
.icon-legend { position: absolute; top: calc(100% + 0.1875rem); right: 0; margin: 0; z-index: 6; }
.model-state { position: absolute; right: 0.5rem; top: 2.5rem; max-width: 60%; margin: 0; padding: 0.1875rem 0.5rem; border-radius: 0.25rem; background: var(--veil); font-size: 0.625rem; line-height: 1.3; text-align: right; pointer-events: none; }

/* the technical version has the same backgrounds as the full colour: light grey (Gonzalo, 2026-10-01) */
.stage.is-technical { --veil: rgba(0, 0, 0, 0.07); --line: rgba(0, 0, 0, 0.14); }

/* what is left out of the enlarged map for now: the design strategies */
.stage-big #r-strategies { display: none; }

/* the sphere stands lower, clear of the icons and their words; the icons and their words flush right; the
   two play buttons apart (Gonzalo, 2026-10-01) */
.stage-icons { margin-left: auto; justify-content: flex-end; }
.icon-legend { white-space: nowrap; text-align: right; }
.model-state { text-align: right; }
.stage-slide + .stage-slide { margin-top: 0.75rem; }
.stage-slide .icon-btn#run, .stage-slide .icon-btn#run-year { margin-left: 0.25rem; }

/* the name of the icon under the pointer shows on the line of the icons, to the left of the full colour icon
   (Gonzalo, 2026-10-01); every row's name stands in that one place */
.icon-row { position: static; }
.icon-legend { position: absolute; top: 0; right: calc(100% + 0.25rem); left: auto; height: 1.5rem; display: flex; align-items: center; margin: 0; padding: 0 0.5rem; z-index: 6; }
.icon-legend[hidden] { display: none; }

/* the names of the icons on the sliders: one place for each slider */
.mark-tip { position: absolute; left: 50%; transform: translateX(-50%); z-index: 8; padding: 0.1875rem 0.5rem; border-radius: 0.25rem; background: rgba(255, 255, 255, 0.94); color: var(--black); font-size: 0.625rem; font-weight: 400; white-space: nowrap; pointer-events: none; }
.mark-tip[hidden] { display: none; }
.stage.is-dark .mark-tip { background: rgba(6, 10, 38, 0.92); color: var(--white); }
.mark-tip-above { bottom: calc(100% + 0.25rem); }
.mark-tip-below { top: calc(100% + 0.25rem); }

/* the three kinds of icon apart from each other, not the icons within a kind (Gonzalo, 2026-10-01): the
   versions, the views and the items, with a wide gap and a thin line between the kinds */
.stage-icons { gap: 0.75rem; }
.icon-row + .icon-row { padding-left: 0.75rem; border-left: 0; }

/* both sliders the same length, and the date once (Gonzalo, 2026-10-01): the same columns in both rows; the day
   is shown by the month and day choice only, its words stay for those who cannot see */
.stage-slide { grid-template-columns: 1.75rem minmax(0, 1fr) 5.5rem 6rem 1.5rem; }
.stage-slide #day-now { position: absolute; width: 1px; min-width: 0; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage-slide .date-pick { grid-column: 3 / 5; justify-self: end; }
#run-year, #run { grid-column: 5; }
#hour-now { grid-column: 3 / 5; text-align: right; }
@media (max-width: 46rem) { .stage-slide { grid-template-columns: 2.25rem minmax(0, 1fr); } #run-year, #run { grid-column: 2; } #hour-now, .stage-slide .date-pick { grid-column: 2; justify-self: start; text-align: left; } }

/* the play buttons beside their sliders on the right; the date and the time on a background, larger and bold
   (Gonzalo, 2026-10-01) */
.stage-slide { grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem 10.5rem; }
#run-year, #run { grid-column: 3; }
.stage-slide .date-pick, #hour-now { grid-column: 4; justify-self: stretch; box-sizing: border-box; height: 1.75rem; padding: 0 0.5rem; border-radius: 0.25rem; background: var(--veil); font-size: 0.875rem; font-weight: 700; line-height: 1.75rem; text-align: center; min-width: 0; }
.stage-slide .date-pick { display: flex; justify-content: center; align-items: center; gap: 0.25rem; }
.stage-slide .date-pick select.date-field { height: 1.5rem; font-size: 0.875rem; font-weight: 700; padding: 0 0.125rem; }
@media (max-width: 46rem) { .stage-slide { grid-template-columns: 2.25rem minmax(0, 1fr); } #run-year, #run { grid-column: 2; } .stage-slide .date-pick, #hour-now { grid-column: 2; justify-self: start; } }

/* the date and the time a little smaller, still bold on their background (Gonzalo, 2026-10-01) */
.stage-slide .date-pick, #hour-now { height: 1.5rem; font-size: 0.75rem; line-height: 1.5rem; padding: 0 0.375rem; }
.stage-slide .date-pick select.date-field { height: 1.25rem; font-size: 0.75rem; }
.stage-slide { grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem 9rem; }

/* THE FADE FROM DAY TO NIGHT AND BACK (Gonzalo, 2026-10-01). The colours of the interface are registered so
   that they can pass from one value to the other; for a second after the change the picture, the cards, the
   icons and the little map fade. */
@property --veil { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.62); }
@property --line { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.18); }
.stage.is-fading { transition: color 0.9s ease, --veil 0.9s ease, --line 0.9s ease; }
.stage.is-fading .icon-btn, .stage.is-fading .mark-tip, .stage.is-fading .icon-legend, .stage.is-fading .model-state,
.stage.is-fading .stage-card, .stage.is-fading .date-pick, .stage.is-fading #hour-now, .stage.is-fading .stage-slide input[type="range"]::-webkit-slider-thumb {
  transition: background-color 0.9s ease, color 0.9s ease, opacity 0.9s ease;
}
/* the words and the marks drawn in the picture follow the night as it comes, step by step */
.m-svg .m-letter, .m-svg text.m-marktext { fill: color-mix(in srgb, #ffffff var(--nightmix, 0%), #000000); }
.m-svg .m-iconmark { color: color-mix(in srgb, #ffffff var(--nightmix, 0%), #000000); }

/* the path of the sun without a black border: a line in the colour of the sun, with no halo and no outline, thick
   enough to show when it is seen edge-on from the east or the west (Gonzalo, 2026-10-01) */
.m-svg.is-colour .m-day, .m-svg.is-colour.is-dark .m-day { stroke: var(--c-sun); stroke-width: 4.5; stroke-linecap: round; }

/* the names of the slider icons over the date and the time at the right */
.stage-slide { position: relative; }
.mark-tip { right: 0; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); box-sizing: border-box; min-width: 9rem; max-width: 100%; height: 1.5rem; line-height: 1.5rem; padding: 0 0.5rem; text-align: center; font-size: 0.75rem; font-weight: 700; z-index: 9; background: rgba(255, 255, 255, 0.97); }
.stage.is-dark .mark-tip { background: rgba(6, 10, 38, 0.96); }

/* the right column wide enough for the longest name, so that a name covers the date or the time and never the
   play button; the sliders shorter for it (Gonzalo, 2026-10-01) */
.stage-slide { grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem 13rem; }
.mark-tip { width: 13rem; min-width: 0; }
@media (max-width: 46rem) { .stage-slide { grid-template-columns: 2.25rem minmax(0, 1fr); } .mark-tip { width: auto; min-width: 9rem; } }


/* the date as one button, with the year, and a calendar of our own over it; no chevrons */
.date-pick { position: relative; }
.date-btn { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 100%; border: 0; border-radius: 0.25rem; background: transparent; color: inherit; font: inherit; font-size: 0.75rem; font-weight: 700; line-height: 1.5rem; cursor: pointer; }
.date-btn:hover, .date-btn:focus-visible { background: var(--line); outline: none; }
.calendar { position: absolute; bottom: calc(100% + 0.375rem); right: 0; z-index: 12; width: 14rem; padding: 0.5rem; border-radius: 0.375rem; background: rgba(255, 255, 255, 0.97); color: var(--black); font-size: 0.75rem; font-weight: 400; text-align: center; }
.stage.is-dark .calendar { background: rgba(6, 10, 38, 0.96); color: var(--white); }
.calendar[hidden] { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.125rem; }
.cal-years { margin-bottom: 0.375rem; opacity: 0.85; }
.cal-title { font-weight: 700; }
.cal-arrow { appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 0.25rem; background: transparent; color: inherit; font: inherit; font-size: 0.875rem; line-height: 1; cursor: pointer; }
.cal-arrow:hover, .cal-arrow:focus-visible { background: var(--line); outline: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; }
.cal-week { padding: 0.125rem 0; font-size: 0.625rem; opacity: 0.7; }
.cal-day { appearance: none; -webkit-appearance: none; height: 1.5rem; border: 0; border-radius: 0.25rem; background: transparent; color: inherit; font: inherit; font-size: 0.75rem; cursor: pointer; }
.cal-day:hover, .cal-day:focus-visible { background: var(--line); outline: none; }
.cal-day.is-chosen { background: var(--black); color: var(--white); font-weight: 700; }
.stage.is-dark .cal-day.is-chosen { background: var(--white); color: var(--black); }
.stage-slide .date-pick { overflow: visible; display: block; padding: 0; }

/* the calendar as wide as the date under it (Gonzalo, 2026-10-01) */
.calendar { width: 100%; box-sizing: border-box; left: 0; right: 0; }
.mini-map { cursor: default; pointer-events: none; }

/* the button of the small map: a larger icon (Gonzalo, 2026-10-01: "make the icon bigger") */
.stage-card-map .mini-map-enlarge { width: 1.75rem; height: 1.75rem; right: 0.5rem; top: 0.5rem; }
.stage-card-map .mini-map-enlarge svg { width: 1.125rem; height: 1.125rem; }

/* THE DETAILS PAGE (the enlarged map), Gonzalo, 2026-10-01: smaller, grouped by content and never needing a scroll
   (icon tabs with legends, tabs inside tabs, several columns), the name of the place on top and large, no
   borders on buttons or forms */
.stage-big { --veil: #f0f0f0; --line: rgba(0, 0, 0, 0.12); }
.stage-big-body { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 0.625rem 0.75rem 0.75rem; overflow: hidden; font-size: 0.8125rem; line-height: 1.35; }
.stage-big-body .words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage-big-body .help { font-size: 0.6875rem; line-height: 1.35; margin: 0; }
.stage-big-body .sub-title { margin: 0; font-size: 0.8125rem; font-weight: 700; }

/* the name of the place, large, on top */
.details-place { flex: none; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; min-height: 2rem; padding-right: 2.5rem; }
.details-place .place-name { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.details-place .place-sub { font-size: 0.8125rem; opacity: 0.75; }

/* the search and the icons of the groups on one line */
.details-bar { flex: none; display: flex; align-items: center; gap: 0.625rem; margin: 0.375rem 0 0.5rem; }
.details-bar section.ask { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }
.stage-big-body #ask-form { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.stage-big-body .ask-row { flex: 1 1 14rem; display: flex; gap: 0.375rem; }
.stage-big-body .ask-field { flex: 1 1 auto; min-width: 0; position: relative; }
.stage-big-body .ask-field input { width: 100%; box-sizing: border-box; height: 2rem; min-height: 0; padding: 0 0.75rem; border: 0; border-radius: 0.375rem; background: var(--veil); color: var(--black); font-size: 0.8125rem; outline: none; }
.stage-big-body .ask-field input:focus-visible { background: var(--border); }
.stage-big-body .btn { height: 2rem; min-height: 0; padding: 0 0.75rem; border: 0; border-radius: 0.375rem; font-size: 0.75rem; }
.stage-big-body .btn.btn-light { background: var(--veil); color: var(--black); }
.stage-big-body .btn.btn-light:hover:not(:disabled) { background: var(--border); }
.stage-big-body .btn:disabled { opacity: 0.45; }
.stage-big-body .ask-more { display: inline-flex; gap: 0.375rem; align-items: center; margin: 0; }
.stage-big-body .ask-more .help { display: none; }
.stage-big-body #history[hidden] { display: none; }
.stage-big-body #coords-error { flex: 1 1 100%; margin: 0; }
.stage-big-body .suggestions { border: 0; border-radius: 0.375rem; background: var(--white); box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.18); z-index: 15; }
.details-tabs { flex: none; position: relative; display: flex; gap: 0.1875rem; align-items: center; }
.details-tabs .icon-btn { width: 2rem; height: 2rem; }
.details-tabs .icon-btn svg { width: 1.125rem; height: 1.125rem; }
.details-tabs .icon-legend { height: 2rem; }

/* the groups: one shows at a time, filling the room, none scrolls */
.details-stage { flex: 1 1 auto; min-height: 0; position: relative; }
.stage-big-body .pane { position: absolute; inset: 0; display: none; min-height: 0; overflow: hidden; }
#map-big-body[data-tab="place"] .pane[data-pane="place"] { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 0.625rem; }
#map-big-body[data-tab="climate"] .pane[data-pane="climate"], #map-big-body[data-tab="region"] .pane[data-pane="region"],
#map-big-body[data-tab="general"] .pane[data-pane="general"], #map-big-body[data-tab="downloads"] .pane[data-pane="downloads"] { display: block; }

/* place: the map large, the place in words and the regions in view beside it */
.pane[data-pane="place"] .map-part { height: 100%; min-height: 0; margin: 0; }
.pane[data-pane="place"] .map-frame { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0.375rem; }
.place-side { min-height: 0; display: flex; flex-direction: column; gap: 0.375rem; overflow: hidden; font-size: 0.75rem; }
.place-side .result-main, .place-side .facts, .place-side .near-legend, .rules, .w-downloads { padding: 0.5rem 0.625rem; border: 0; border-radius: 0.375rem; background: var(--veil); margin: 0; }
.place-side .result-main { display: flex; align-items: center; gap: 0.625rem; }
.place-side .result-main .code { font-size: 1.25rem; margin: 0; }
.place-side .result-main .name { font-size: 0.75rem; margin: 0; }
.place-side .facts { display: block; }
.place-side .facts > div { padding: 0.125rem 0; }
.place-side .facts dt { font-size: 0.625rem; opacity: 0.7; }
.place-side .facts dd { margin: 0; font-size: 0.75rem; font-weight: 700; }
.place-side .view-title { margin-top: 0.125rem; }
.place-side .near-legend { columns: 2; column-gap: 0.5rem; list-style: none; font-size: 0.625rem; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.place-side .near-legend li { break-inside: avoid; padding: 0.0625rem 0; }

/* the climate of a typical year: tabs inside the tab, one thing at a time */
.weather { margin: 0; border: 0; padding: 0; height: 100%; display: flex; flex-direction: column; }
.climate-bar { flex: none; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.subtabs { display: flex; gap: 0.1875rem; }
.subtab { appearance: none; -webkit-appearance: none; height: 1.625rem; padding: 0 0.75rem; border: 0; border-radius: 0.25rem; background: var(--veil); color: var(--black); font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.subtab:hover { background: var(--border); }
.subtab[aria-selected="true"] { background: var(--black); color: var(--white); }
.climate-ask { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; }
.climate-ask .btn { height: 1.625rem; }
#w-out { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
#w-out[hidden] { display: none; }
#w-source { display: none; }
#w-out .sub { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#map-big-body[data-sub="table"] .sub[data-subpane="table"], #map-big-body[data-sub="temperature"] .sub[data-subpane="temperature"],
#map-big-body[data-sub="wind"] .sub[data-subpane="wind"], #map-big-body[data-sub="hills"] .sub[data-subpane="hills"] { display: block; }
#w-out .w-table-wrap { margin: 0; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: var(--veil); overflow: hidden; }
#w-out .w-table { font-size: 0.6875rem; }
#w-out .w-table caption { display: none; }
#w-out .w-table th, #w-out .w-table td { padding: 0.125rem 0.375rem; }
#w-out .w-figure { margin: 0; max-width: none; height: 100%; display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem; background: var(--veil); box-sizing: border-box; }
#w-out .w-figure svg { flex: 0 1 62%; width: 62%; height: auto; max-height: 100%; }
#w-out .w-figure[data-wide] svg { flex-basis: 70%; }
#w-out .w-figure figcaption { flex: 1 1 30%; font-size: 0.75rem; }

/* what defines the region */
.pane[data-pane="region"] .rules { margin: 0; }
.rules .rules-list { columns: 2; column-gap: 1.5rem; margin: 0.5rem 0; padding: 0; list-style: none; }
.rules .rules-list li { break-inside: avoid; margin-bottom: 0.375rem; font-size: 0.75rem; }

/* all the regions: a group at a time, the regions in columns */
.pane[data-pane="general"] .legend { margin: 0; }
.pane[data-pane="general"] .tabs { display: flex; gap: 0.1875rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.pane[data-pane="general"] .tabs .tab { height: 1.625rem; padding: 0 0.75rem; border: 0; border-radius: 0.25rem; background: var(--veil); color: var(--black); font-size: 0.75rem; font-weight: 700; }
.pane[data-pane="general"] .tabs .tab[aria-selected="true"] { background: var(--black); color: var(--white); }
.pane[data-pane="general"] .tab-panels { padding: 0.5rem 0.625rem; border: 0; border-radius: 0.375rem; background: var(--veil); overflow: hidden; }
.pane[data-pane="general"] .tab-panels ul { columns: 3; column-gap: 1rem; list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.6875rem; line-height: 1.3; }
.pane[data-pane="general"] .tab-panels li { break-inside: avoid; margin-bottom: 0.375rem; }
.pane[data-pane="general"] .tab-panels p { margin: 0; font-size: 0.75rem; }

/* downloads */
.w-downloads { margin: 0; }
.w-dl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.5rem 0; }
.w-dl-row .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
.stage-big-body #r-strategies { display: none; }
.stage-big-body .map-buttons .btn { border: 0; }

/* all the regions: the code and the name of each, in columns; what each letter means is in the group of the region */
.pane[data-pane="general"] .legend-rule { display: none; }
.pane[data-pane="general"] .tab-rule { margin: 0 0 0.5rem; font-size: 0.75rem; }
.pane[data-pane="general"] .legend-name { font-size: 0.75rem; font-weight: 700; }
.pane[data-pane="general"] .tab-panels li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pane[data-pane="general"] .tab-panel, .pane[data-pane="general"] .tab-panels > * { border: 0; background: none; padding: 0; box-shadow: none; }

/* THE ICONS ARE THE MAIN NAVIGATION (Gonzalo, 2026-10-01): above the name of the place, larger, the group that is open
   showing its name beside its icon, the longer name on the roll-over, to the right of the row */
.details-nav { flex: none; padding-right: 2.5rem; margin-bottom: 0.375rem; }
.details-tabs { position: relative; }
.details-tabs .icon-btn { width: auto; min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem; gap: 0.4375rem; }
.details-tabs .icon-btn svg { width: 1.25rem; height: 1.25rem; }
.details-tabs .icon-btn .words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.details-tabs .icon-btn[aria-pressed="true"] .words { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: 0.8125rem; font-weight: 700; }
.details-tabs .icon-legend { position: static; order: 20; right: auto; height: 2.25rem; margin-left: 0.5rem; }
.details-bar { margin-top: 0.25rem; }

/* the list of all the regions with what the letters of the selected one mean */
#map-big-body[data-tab="general"] .pane[data-pane="general"] { display: flex; flex-direction: column; gap: 0.5rem; }
.pane[data-pane="general"] .legend { flex: none; }
.pane[data-pane="general"] .tab-panels li { cursor: pointer; padding: 0.25rem 0.375rem; border-radius: 0.25rem; margin-bottom: 0.25rem; }
.pane[data-pane="general"] .tab-panels li:hover { background: var(--border); }
.pane[data-pane="general"] .tab-panels li.is-selected { background: var(--white); }
.legend-detail { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0.625rem 0.75rem; border-radius: 0.375rem; background: var(--veil); font-size: 0.8125rem; }
.legend-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; font-size: 0.875rem; }
.legend-detail p { margin: 0 0 0.375rem; font-size: 0.75rem; line-height: 1.4; }
.details-tabs { justify-content: flex-start; }
.details-nav { padding-right: 2.75rem; }

/* the icons of the main navigation bold (Gonzalo, 2026-10-01) */
.details-tabs .icon-btn svg { stroke-width: 2.4; }

/* the icons of the sun picture bold, like those of the details page (Gonzalo, 2026-10-01) */
.stage .icon-btn svg { stroke-width: 2.4; }

/* the tabs inside a group, level with the main icons, smaller, to the right; the text tabs they replace are kept
   out of sight (they still work behind them) */
.details-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.details-subs { display: flex; align-items: center; gap: 0.1875rem; justify-content: flex-end; }
.details-subs .icon-btn { width: auto; min-width: 1.75rem; height: 1.75rem; padding: 0 0.5rem; gap: 0.375rem; }
.details-subs .icon-btn svg { width: 1rem; height: 1rem; stroke-width: 2.2; }
.details-subs .icon-btn .words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.details-subs .icon-btn[aria-pressed="true"] .words { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: 0.75rem; font-weight: 700; }
.details-subs .icon-legend { position: static; order: -1; right: auto; height: 1.75rem; margin: 0 0.5rem 0 0; font-size: 0.6875rem; }
#climate-subtabs, #legend-tabs { display: none; }
.climate-bar { justify-content: space-between; }

/* the buttons of the map: icons like the others, to the right over the map, their names to the left on the roll-over */
.map-buttons.icon-row { position: absolute; top: 0.625rem; right: 0.625rem; display: flex; gap: 0.1875rem; align-items: center; z-index: 3; }
.map-buttons .icon-btn { width: 2rem; height: 2rem; background: rgba(255, 255, 255, 0.92); color: var(--black); }
.map-buttons .icon-btn svg { width: 1.125rem; height: 1.125rem; }
.map-buttons .icon-btn:hover:not(:disabled) { background: var(--white); }
.map-buttons .icon-btn:disabled { opacity: 0.4; cursor: default; }
.map-buttons .icon-legend { position: static; order: -1; height: 2rem; margin: 0 0.5rem 0 0; background: rgba(255, 255, 255, 0.92); }
/* the main navigation: the general group set a little apart from the groups that tell about the place */
.details-tabs .icon-btn:last-of-type { margin-left: 0.75rem; }

/* the buttons of the map on a light grey, so that they show over the white of the map (Gonzalo, 2026-10-01) */
.map-buttons .icon-btn { background: #e0e0e0; color: var(--black); }
.map-buttons .icon-btn:hover:not(:disabled) { background: #d2d2d2; }
.map-buttons .icon-legend { background: #e0e0e0; color: var(--black); }

/* the label with the name of the place on the map: no border, no outline (Gonzalo, 2026-10-01) */
.map-tag { border: 0; outline: 0; box-shadow: none; }
.map-tag .chip-code, .map-tag span { border: 0; box-shadow: none; text-shadow: none; }

/* the names of the icons when they open: bold and larger, in all of them (Gonzalo, 2026-10-01) */
.icon-legend, .details-subs .icon-legend { font-size: 0.8125rem; font-weight: 700; }
.mark-tip { font-size: 0.8125rem; font-weight: 700; }
.details-tabs .icon-btn[aria-pressed="true"] .words { font-size: 0.875rem; font-weight: 700; }
.details-subs .icon-btn[aria-pressed="true"] .words { font-size: 0.8125rem; font-weight: 700; }

/* the numbers beside the sun, each on one line (the name left, the value right), so that more fit without a scroll;
   the small map's words cut to the name and the region */
.stage-card .data > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.125rem 0; }
.stage-card .data dt { flex: none; }
.stage-card .data dd { text-align: right; }
.stage-card { padding: 0.3125rem 0.5rem; }
.mini-info .mini-line:not(.mini-first):not(.mini-region) { display: none; }
.stage-data { gap: 0.25rem; }
.stage-card { padding: 0.25rem 0.5rem; }
.stage-card .data > div { padding: 0.0625rem 0; }
.stage-card .stage-title { margin-bottom: 0.0625rem; }

/* the data of the day by the hour slider, in one line under it, no longer in a card at the left (Gonzalo, 2026-10-01) */
.stage-controls { padding-bottom: 0.5rem; }
.day-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.125rem 1.25rem; margin: 1.875rem 0 0; font-size: 0.75rem; line-height: 1.3; }
.day-strip b { font-weight: 700; opacity: 0.7; margin-right: 0.25rem; }
.day-strip span span { font-weight: 700; }
.day-strip { font-size: 0.6875rem; gap: 0.125rem 0.875rem; }

/* the numbers of the day under their icons on the hour slider, no words; the length of the day at the right */
.day-strip { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem 13rem; gap: 0.375rem; margin: 1.75rem 0 0; font-size: 0.6875rem; }
.ds-track { position: relative; height: 1.125rem; }
.ds-val { position: absolute; top: 0; transform: translateX(-50%); font-weight: 700; white-space: nowrap; }
.ds-val[hidden] { display: none; }
.ds-length { text-align: center; white-space: nowrap; }
.ds-length b { font-weight: 700; opacity: 0.7; margin-right: 0.25rem; }
.ds-length span { font-weight: 700; }
@media (max-width: 46rem) { .day-strip { grid-template-columns: 1fr; } .ds-track { display: flex; gap: 1rem; flex-wrap: wrap; } .ds-val { position: static; transform: none; } }

/* the length of the day written right above the hour slider, over its light part (Gonzalo, 2026-10-01: "take out the
   length, revert the slider and put it right above it"); the slider is as it was */
.slide-length { position: absolute; bottom: calc(100% - 0.125rem); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 0.6875rem; font-weight: 700; line-height: 1; pointer-events: none; }
.stage-slide + .stage-slide { margin-top: 1rem; }

/* the numbers of the day under the icons are no longer shown: they come in the name at the right when an icon is pressed */
.day-strip { display: none; }

/* THE SLIDERS IN THE LEFT COLUMN (Gonzalo, 2026-10-01): between the small map and the sun now, each as wide as the
   column, the date and the time as labels below their sliders, the play button beside each slider */
.stage-card.stage-controls { position: static; width: auto; left: auto; right: auto; bottom: auto; padding: 0.375rem 0.5rem 0.5rem; border: 0; background: var(--veil); font-size: 0.6875rem; }
.stage-controls .stage-slide { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; grid-template-areas: "slide play" "label label"; gap: 0.1875rem 0.375rem; align-items: center; position: relative; }
.stage-controls .stage-slide .slide { grid-area: slide; min-width: 0; }
.stage-controls .stage-slide #run-year, .stage-controls .stage-slide #run { grid-area: play; width: 1.5rem; height: 1.5rem; }
.stage-controls .stage-slide .date-pick, .stage-controls .stage-slide #hour-now { grid-area: label; grid-column: 1 / -1; justify-self: stretch; width: auto; height: 1.5rem; line-height: 1.5rem; padding: 0 0.375rem; font-size: 0.75rem; font-weight: 700; text-align: center; background: rgba(255, 255, 255, 0.5); border-radius: 0.25rem; }
.stage.is-dark .stage-controls .stage-slide .date-pick, .stage.is-dark .stage-controls .stage-slide #hour-now { background: rgba(255, 255, 255, 0.12); }
.stage-controls .stage-slide.day-block .slide { margin-top: 1.625rem; }
.stage-controls .stage-slide.hour-block { margin-top: 0.5rem; }
.stage-controls .stage-slide.hour-block .slide { margin-top: 1.125rem; margin-bottom: 1.625rem; }
.stage-controls .stage-slide + .stage-slide { margin-top: 0.5rem; }
.stage-controls .slide-marks .icon-btn.mark { width: 1.25rem; height: 1.25rem; }
.stage-controls .mark-tip { top: auto; bottom: 0; left: 0; right: 0; width: auto; transform: none; height: 1.5rem; line-height: 1.5rem; padding: 0 0.375rem; font-size: 0.75rem; z-index: 9; }
.stage-controls .calendar { left: 0; right: 0; width: auto; }
.stage-controls .day-strip { display: none; }

/* the left column fits the picture: the words of the sliders only for those who cannot see, one line for the region */
.stage-controls .words, .stage-card .words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mini-region { white-space: nowrap; }
.mini-region span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mini-info { margin-top: 0.25rem; }
.stage-card.stage-controls { padding: 0.25rem 0.5rem 0.375rem; }
.stage-controls .stage-slide.day-block .slide { margin-top: 1.5rem; }
.stage-controls .stage-slide.hour-block { margin-top: 0.375rem; }
.stage-controls .stage-slide.hour-block .slide { margin-top: 1rem; margin-bottom: 1.5rem; }
.stage-data { gap: 0.1875rem; }
.stage-card { padding: 0.25rem 0.5rem; }

/* the sliders have no background of their own (Gonzalo, 2026-10-01); the date and the time keep theirs */
.stage-card.stage-controls { background: none; }

/* the column is as wide as the column: its cards never wider, and a little tighter so that it fits */
.stage-data { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.stage-card .stage-title { margin: 0 0 0.0625rem; line-height: 1.2; }
.stage-card .data > div { padding: 0; }

/* the play buttons beside the date and the time, so that each slider takes the whole width of the column
   (Gonzalo, 2026-10-01: "put the play button on the side of the labels") */
.stage-controls .stage-slide { grid-template-columns: minmax(0, 1fr) 1.5rem; grid-template-areas: "slide slide" "label play"; }
.stage-controls .stage-slide .slide { grid-column: 1 / -1; }
.stage-controls .stage-slide .date-pick, .stage-controls .stage-slide #hour-now { grid-area: label; grid-column: 1; }
.stage-controls .stage-slide #run-year, .stage-controls .stage-slide #run { grid-area: play; grid-column: 2; }

/* more room for the sliders (Gonzalo, 2026-10-01: "move air and sun down to leave more space for the sliders"): the
   two cards below them lose their headings, which their rows do not need, and the sliders spread out */
.stage-card.stage-controls { padding: 0.5rem 0.5rem 0.75rem; }
.stage-controls .stage-slide.day-block .slide { margin-top: 1.75rem; }
.stage-controls .stage-slide.hour-block { margin-top: 0.875rem; }
.stage-controls .stage-slide.hour-block .slide { margin-top: 1.25rem; margin-bottom: 1.75rem; }
.stage-controls .stage-slide .date-pick, .stage-controls .stage-slide #hour-now { height: 1.625rem; line-height: 1.625rem; }
.stage-controls .stage-slide #run-year, .stage-controls .stage-slide #run { height: 1.625rem; width: 1.625rem; }
.stage-controls .stage-slide { gap: 0.3125rem 0.375rem; grid-template-columns: minmax(0, 1fr) 1.625rem; }

/* THE COLUMN IN THE DIVINE PROPORTION (Gonzalo, 2026-10-01): the column and the rest of the picture stand as 1 to
   1.618, so the column is 38.2 % of it; wide enough that the values never wrap to a second line while the sun or
   the year runs. The fonts are not larger. */
.stage-data { width: 38.2%; max-width: none; }
.mini-map { width: auto; max-width: 100%; height: 6.5rem; margin: 0 auto; display: block; }

/* narrower: the column and the rest of the picture as 1 to 2.618, the next step of the divine proportion (the column
   is 27.6 % of the picture); the shadow's label shortened so that the long values still fit on one line */
.stage-data { width: 27.6%; }

/* the scale of the warmth on top of the air card, with a box that moves and the range of the day; Celsius or Fahrenheit;
   no lines between the rows and no colours beside the azimuth and the altitude (Gonzalo, 2026-10-01) */
@property --night-track { syntax: "<color>"; inherits: true; initial-value: #1c2233; }
.stage { --night-track: #1c2233; }
.stage.is-dark { --night-track: rgba(255, 255, 255, 0.3); }
.stage.is-fading { transition: color 0.9s ease, --veil 0.9s ease, --line 0.9s ease, --night-track 0.9s ease; }
.heat { margin: 0.125rem 0 0.375rem; }
.heat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.1875rem; }
.heat .stage-scale { margin: 0; opacity: 0.75; font-size: 0.5625rem; }
.unit { appearance: none; -webkit-appearance: none; height: 1.125rem; padding: 0 0.5rem; border: 0; border-radius: 0.25rem; background: var(--black); color: var(--white); font: inherit; font-size: 0.625rem; font-weight: 700; cursor: pointer; }
.stage.is-dark .unit { background: var(--white); color: var(--black); }
.heat-track { position: relative; padding-top: 1.375rem; }
.heat-bar { height: 0.625rem; border-radius: 0.1875rem; }
.heat-range { position: absolute; top: calc(1.375rem + 0.75rem); height: 0.1875rem; border-radius: 0.125rem; background: currentColor; opacity: 0.75; }
.heat-range[hidden], .heat-box[hidden] { display: none; }
.heat-box { position: absolute; top: 0; transform: translateX(-50%); min-width: 2.5rem; padding: 0 0.375rem; height: 1.125rem; line-height: 1.125rem; border-radius: 0.25rem; background: var(--black); color: var(--white); font-size: 0.6875rem; font-weight: 700; text-align: center; white-space: nowrap; }
.heat-box::after { content: ""; position: absolute; left: var(--pointer, 50%); bottom: -0.25rem; width: 0; height: 0; margin-left: calc(var(--pointer, 50%) * 0 - 0.25rem); }
.stage.is-dark .heat-box { background: var(--white); color: var(--black); }
.heat-ticks { position: relative; height: 0.875rem; margin-top: 0.25rem; font-size: 0.5625rem; opacity: 0.75; }
.heat-ticks span { position: absolute; transform: translateX(-50%); }
.heat-ticks span:first-child { transform: none; }
.heat-ticks span:last-child { transform: translateX(-100%); }
.stage-card .data > div { border: 0; }
.stage-data dt.k-altitude, .stage-data dt.k-azimuth { border: 0; padding-left: 0; }
.heat-scale, .stage-scale + .heat-scale { display: none; }

/* the unit switch on the title line of the air card; the left column fits again */
#air-card { position: relative; }
#air-card .unit { position: absolute; top: 0.25rem; right: 0.5rem; }
.heat { margin: 0.125rem 0 0.25rem; }
.heat-track { padding-top: 1.25rem; }
.heat-range { top: calc(1.25rem + 0.75rem); }
.heat-ticks { margin-top: 0.1875rem; height: 0.75rem; }
.heat-box::after { display: none; }
.mini-map { height: 5.75rem; }
.stage-card.stage-controls { padding: 0.375rem 0.5rem 0.5rem; }
.stage-controls .stage-slide.day-block .slide { margin-top: 1.625rem; }
.stage-controls .stage-slide.hour-block .slide { margin-bottom: 1.625rem; }

/* the thumbs of the sliders take the colour of the picture, dark by day and light by night: the field's own colour
   did not follow it */
.stage-slide input[type="range"] { color: inherit; }
.stage.is-fading .stage-slide input[type="range"] { transition: color 0.9s ease; }
.stage-card .data > div[hidden] { display: none; }

/* by night the backgrounds of the column and of the icons are light and translucent, so that they show on the dark
   sky (Gonzalo, 2026-10-01); they were dark on dark */
.stage.is-dark { --veil: rgba(255, 255, 255, 0.16); --line: rgba(255, 255, 255, 0.3); }
.stage.is-dark .stage-controls .stage-slide .date-pick, .stage.is-dark .stage-controls .stage-slide #hour-now { background: rgba(255, 255, 255, 0.16); }

/* vertical lines over the scale of the warmth: the temperature of the hour and the extremes of the day, in place of the
   horizontal bar under it */
.heat-range { display: none; }
.heat-line { position: absolute; top: 1.125rem; height: 0.625rem; width: 0; transform: translateX(-50%); pointer-events: auto; }
.heat-line[hidden] { display: none; }
.heat-line-now { top: 1.125rem; height: 0.75rem; width: 2px; background: var(--black); }
.stage.is-dark .heat-line-now { background: var(--white); }
.heat-line-min, .heat-line-max { width: 1px; background: var(--black); opacity: 0.55; }
.stage.is-dark .heat-line-min, .stage.is-dark .heat-line-max { background: var(--white); }

/* ONE PICTURE AT EVERY WIDTH (Gonzalo, 2026-10-06: "When the screen gets narrow the content column is displaced
   outside of the rectangle, outside of the sky. The rectangle the sky should enlarge and the content in that column
   can be displayed in 2 or three columns. it must always stay as one cohesive unit"). When the picture is too narrow
   for the column beside the model (sun.js sets is-stacked), the sky of the picture grows downward and the column's
   cards stand under the model inside it: three columns, then two, then one. The cards keep their look by day and by
   night. The picture's own rectangle carries the sky and its darker corners, so that the model and the cards stand
   on one sky. */
.stage.is-stacked { display: block; overflow: hidden; background: var(--sky, #fff); color: var(--black); --veil: rgba(255, 255, 255, 0.62); --line: rgba(0, 0, 0, 0.18); }
.stage.is-stacked.is-dark { color: var(--white); --veil: rgba(255, 255, 255, 0.16); --line: rgba(255, 255, 255, 0.3); }
.stage.is-stacked:has(.m-svg.is-colour) { background: radial-gradient(75% 75% at 50% 50%, rgba(0, 0, 24, 0) 55%, rgba(0, 0, 24, 0.38) 100%), var(--sky, #fff); }
.stage.is-stacked .m-air, .stage.is-stacked .m-corners { visibility: hidden; }
.stage.is-stacked #model { border-radius: 0; max-height: min(34rem, 70vh); }
.stage.is-stacked .stage-icons { left: 0.5rem; right: 0.5rem; top: 0.5rem; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem 0.75rem; color: inherit; --veil: inherit; }
.stage.is-stacked .stage-data {
  position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; margin: 0;
  padding: 0 0.5rem 0.5rem; border: 0; font-size: 0.625rem; overflow: visible;
  display: grid; gap: 0.375rem; align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "map controls air" "sun controls air";
}
.stage.is-stacked .stage-data > .stage-card-map { grid-area: map; }
.stage.is-stacked .stage-data > .stage-controls { grid-area: controls; position: relative; margin: 0; border: 0; font-size: 0.6875rem; }
.stage.is-stacked .stage-data > #sun-card { grid-area: sun; }
.stage.is-stacked .stage-data > .building-card { grid-area: building; }
.stage.is-stacked .stage-data > #air-card { grid-area: air; }
@media (max-width: 40rem) {
  .stage.is-stacked .stage-data { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "map controls" "sun air"; }
}
@media (max-width: 32rem) {
  .stage.is-stacked .stage-data { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "controls" "sun" "air"; }
}

/* the calendar's way back to today, and today marked in it */
.cal-today { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 1.5rem; margin-top: 0.375rem; border: 0; border-radius: 0.25rem; background: var(--line); color: inherit; font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.cal-today:hover, .cal-today:focus-visible { background: var(--black); color: var(--white); outline: none; }
.stage.is-dark .cal-today:hover, .stage.is-dark .cal-today:focus-visible { background: var(--white); color: var(--black); }
.cal-day.is-today:not(.is-chosen) { box-shadow: inset 0 0 0 1px currentColor; }

/* on a phone the icons take two rows: they and the name of the view stand above the model, on the same sky */
@media (max-width: 30rem) {
  .stage.is-stacked { display: flex; flex-direction: column; }
  .stage.is-stacked .stage-icons { position: relative; left: auto; right: auto; top: auto; order: 0; margin: 0; padding: 0.5rem 0.5rem 0; }
  .stage.is-stacked .model-state { position: static; order: 1; align-self: flex-end; max-width: none; margin: 0.375rem 0.5rem 0; }
  .stage.is-stacked #model { order: 2; }
  .stage.is-stacked .stage-data { order: 3; }
}

/* the plane of the sun at 80 % (Gonzalo, 2026-10-06: "the plane of the sun is 100% opaque. make it just 80%"); the
   whole plane as one, so that its pieces do not show through each other. The half under the ground stays at 20 %. */
.m-svg.is-colour .m-plane:not(.m-planenight) { opacity: 0.8; }

/* the cards under the model fill their row and column, so that the columns end level (Gonzalo, 2026-10-06: "make sure
   that the ones with background, it fills the space under them") */
.stage.is-stacked .stage-data > .stage-card { align-self: stretch; height: auto; }

/* by night the calendar is lighter than the sky, so that it stands out from it (Gonzalo, 2026-10-06: "the calendar in
   night has no contrast with the night, lighten it", then "you made the background blue, go for a grey"); white letters on it */
.stage.is-dark .calendar { background: rgba(96, 100, 108, 0.97); color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45); }
.stage.is-dark .calendar .cal-arrow:hover, .stage.is-dark .calendar .cal-day:hover, .stage.is-dark .calendar .cal-day:focus-visible { background: rgba(255, 255, 255, 0.22); }
.stage.is-dark .calendar .cal-today { background: rgba(255, 255, 255, 0.2); }

/* every value under the model on one line: the shadow by night ("None, sun under the horizon", Gonzalo 2026-10-06), the
   warmest and coldest hour; below 32 rem the cards stand in one column so that they have the room */
.stage.is-stacked .stage-card .data dd { white-space: nowrap; }

/* in two columns the small map takes the whole width of its card, keeping the shape of the world (Gonzalo, 2026-10-06:
   "when in 2 columns, be sure the small map adapts to fill the rectangle that it contains it"); the name of the place
   stays at the foot of the card */
@media (max-width: 40rem) and (min-width: 32.0625rem) {
  .stage.is-stacked .stage-card-map { display: flex; flex-direction: column; justify-content: space-between; }
  .stage.is-stacked .stage-card-map .mini-map { width: 100%; max-width: none; height: auto; aspect-ratio: 2 / 1; margin: 0; }
}

/* THE WINDOW FOR CHOOSING THE PLACE, NARROW (Gonzalo, 2026-10-06: "in narrow screen when I open for selecting the location
   the map is a narrow thin map. Make it stacking better"): when the window is narrower than 40 rem the map stands on top,
   as wide as the window and taking most of its height, and the place in words under it: its class across the width, the
   facts in two columns beside the regions in view. Nothing scrolls, as on the wide window. */
#map-big-body { container-type: inline-size; }
@container (max-width: 40rem) {
  #map-big-body[data-tab="place"] .pane[data-pane="place"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(12rem, 1fr) auto; }
  .place-side { overflow: visible; }
  .place-side .facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 0.75rem; }
  .place-side .facts .fact-wide { grid-column: 1 / -1; }
  .place-side .near-legend { flex: none; max-height: 4.5rem; }
}

/* the name of an icon on a narrow picture (Gonzalo, 2026-10-06: "on narrow screen the icons when hover, display the
   legend outside of the screen", then "the legend shouldn't replace the text that says what is on display, position it
   under it"): the icons take the width, so the name stands at the right under the name of the view. The name of the view
   is 1.1875 rem high (0.625 rem letters at 1.3, 0.1875 rem above and below) and stands 2.5 rem from the top of the
   picture, the icons 0.5 rem: the name of the icon 0.25 rem under it. */
.stage.is-stacked .stage-icons .icon-legend { top: 3.4375rem; right: 0; max-width: 100%; }
@media (max-width: 30rem) {
  /* on a phone the icons and the name of the view stand in the flow, 0.375 rem apart */
  .stage.is-stacked .stage-icons .icon-legend { top: calc(100% + 1.8125rem); right: 0.5rem; }
}

/* THE ARCHITECT'S OWN MODEL (TEST-0889): the faces in the light they have, their shadow on the ground, and the card
   where the file is chosen */
.m-house { stroke-width: 0.6; stroke-linejoin: round; pointer-events: none; }
.m-bshadow { fill: #1d2440; fill-opacity: 0.38; stroke: none; pointer-events: none; }
.m-svg:not(.is-colour) .m-bshadow { fill: #000; fill-opacity: 0.22; }
/* the card "Your building", in the column under the small map (Gonzalo, 2026-10-06: "We could add the upload under
   the map. With a simple preview there"): small letters like the rest of the column */
.building-card { font-size: 0.625rem; line-height: 1.3; }
.building-card p { margin: 0; }
.building-card .b-help { opacity: 0.8; margin-bottom: 0.25rem; }
.building-card #b-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.building-card .btn { display: inline-flex; align-items: center; height: 1.375rem; min-height: 0; padding: 0 0.5rem; border: 0; border-radius: 0.25rem; background: var(--line); color: inherit; font-size: 0.625rem; font-weight: 700; cursor: pointer; }
.building-card .btn:hover, .building-card .btn:focus-visible, .building-card .b-choose:focus-within .btn, .building-card .btn.is-asking { background: var(--black); color: var(--white); outline: none; }
.stage.is-dark .building-card .btn:hover, .stage.is-dark .building-card .btn:focus-visible, .stage.is-dark .building-card .b-choose:focus-within .btn, .stage.is-dark .building-card .btn.is-asking { background: var(--white); color: var(--black); }
.building-card .b-status { overflow-wrap: anywhere; }
.building-card .b-status:empty { display: none; }
.building-card [hidden] { display: none !important; }
.building-card .b-top { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.building-card .b-preview { width: 4.5rem; height: 4.5rem; display: block; }
.building-card .b-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.building-card .b-size, .building-card .b-scale { opacity: 0.85; }
.building-card .b-row { display: flex; align-items: center; gap: 0.25rem; margin: 0 0 0.25rem; }
.building-card .b-label { width: 2.25rem; flex: none; opacity: 0.8; }
.building-card .b-pick { appearance: none; -webkit-appearance: none; min-width: 1.5rem; height: 1.25rem; border: 0; border-radius: 0.25rem; background: var(--line); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.building-card .b-pick[aria-pressed="true"] { background: var(--black); color: var(--white); }
.stage.is-dark .building-card .b-pick[aria-pressed="true"] { background: var(--white); color: var(--black); }
.building-card select { margin-left: auto; height: 1.25rem; border: 0; border-radius: 0.25rem; background: var(--line); color: inherit; font: inherit; }
.stage.is-dark .building-card select { color-scheme: dark; }
.building-card .b-row-turn input[type="range"] { flex: 1 1 auto; min-width: 0; height: 1rem; accent-color: currentColor; }
.building-card .b-value { width: 2.25rem; flex: none; text-align: right; font-weight: 700; }
.building-card .b-end { opacity: 0.85; }
.building-card .b-link { appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.stage.is-dropping { outline: 3px dashed currentColor; outline-offset: -6px; }
/* a refused file: the sentence of what to do stands out from the rest of the card */
.building-card .b-status.is-refused { font-weight: 400; padding: 0.375rem 0.5rem; border-left: 0.1875rem solid currentColor; background: var(--line); border-radius: 0 0.25rem 0.25rem 0; }

/* THE PICTURE IN THREE LAYERS (TEST-0896): the back drawing (sky, ground, planes) and the graphics card's canvas
   (the architect's model and its shadows) lie exactly under the front drawing, which takes the pointer; sun-model.js
   sets their place and size to those of the front drawing */
.stage #model { position: relative; }
.stage .m-layer { position: absolute; display: block; margin: 0; max-width: none; pointer-events: none; }

/* the five cards under the model (TEST-0896 and after): the map and your building, the sliders, the air and the sun
   now, in three columns; in two, the map and the sliders, your building and the air, the sun now under the air */
.stage.is-stacked .stage-data { grid-template-areas: "map controls air" "building controls sun"; }
@media (max-width: 40rem) {
  .stage.is-stacked .stage-data { grid-template-areas: "map controls" "building air" "sun air"; }
}
@media (max-width: 32rem) {
  .stage.is-stacked .stage-data { grid-template-areas: "map" "building" "controls" "air" "sun"; }
}
.building-card .b-end .b-link { display: inline; margin: 0; }

/* THE SETTINGS (Gonzalo, 2026-10-06): opened by the sliders icon beside the two versions of the model, under the
   icons at the right; on a phone in the flow, above the model */
.settings-card { position: absolute; top: 4.25rem; right: 0.5rem; z-index: 7; width: 14rem; box-sizing: border-box; padding: 0.5rem 0.625rem 0.625rem; font-size: 0.625rem; line-height: 1.3; }
.settings-card[hidden], .settings-card [hidden] { display: none !important; }
.settings-card .stage-title { margin: 0 1.75rem 0.375rem 0; }
.settings-card .s-close { position: absolute; top: 0.375rem; right: 0.375rem; width: 1.25rem; height: 1.25rem; }
.settings-card .s-close svg { width: 0.75rem; height: 0.75rem; }
.settings-card .s-sub { margin: 0.5rem 0 0.125rem; font-size: 0.625rem; font-weight: 700; }
.settings-card .s-help { margin: 0 0 0.25rem; opacity: 0.8; }
.settings-card .s-row { display: flex; align-items: center; gap: 0.25rem; margin: 0 0 0.25rem; }
.settings-card .s-label { width: 4.5rem; flex: none; opacity: 0.8; margin: 0; }
.settings-card .b-pick { appearance: none; -webkit-appearance: none; min-width: 1.75rem; height: 1.25rem; border: 0; border-radius: 0.25rem; background: var(--line); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.settings-card .b-pick[aria-pressed="true"] { background: var(--black); color: var(--white); }
.stage.is-dark .settings-card .b-pick[aria-pressed="true"] { background: var(--white); color: var(--black); }
.settings-card select { flex: 1 1 auto; min-width: 0; height: 1.375rem; border: 0; border-radius: 0.25rem; background: var(--line); color: inherit; font: inherit; }
.stage.is-dark .settings-card select { color-scheme: dark; }
@media (max-width: 30rem) {
  .stage.is-stacked .settings-card { position: relative; top: auto; right: auto; order: 1; width: auto; margin: 0.375rem 0.5rem 0; }
}

/* the settings icon in the upper left corner of the picture, beside the column when it stands at the left (the
   column is 27.6 % of the picture), and the settings under it (Gonzalo, 2026-10-06) */
.stage-corner { position: absolute; top: 0.5rem; left: calc(27.6% + 1rem); z-index: 6; }
.stage.is-stacked .stage-corner { left: 0.5rem; }
.stage-corner .icon-legend { left: calc(100% + 0.25rem); right: auto; }
.settings-card { top: 2.5rem; right: auto; left: calc(27.6% + 1rem); }
.stage.is-stacked .settings-card { left: 0.5rem; }
@media (max-width: 30rem) {
  .stage.is-stacked .stage-corner { top: 0.5rem; left: 0.5rem; }
  .stage.is-stacked .settings-card { left: auto; }
}
/* the scale and the ground circle on the card (TEST-0908) */
.building-card #b-scale-pick { flex: 1 1 auto; min-width: 0; margin-left: 0; }
.building-card #b-circle { width: 4.5rem; height: 1.25rem; padding: 0 0.25rem; border: 0; border-radius: 0.25rem; background: var(--line); color: inherit; font: inherit; font-weight: 700; text-align: right; }
.building-card .b-circle-unit { opacity: 0.85; }
.stage.is-dark .building-card #b-circle { color-scheme: dark; }

/* the column beside the model taller than the drawing: the picture's own rectangle carries the sky below the drawing,
   as it does when the cards stand under the model (Gonzalo, 2026-10-06: "fix the columns to stay in the left in big
   screens") */
.stage.is-tall { background: var(--sky, #fff); }
.stage.is-tall:has(.m-svg.is-colour) { background: radial-gradient(75% 75% at 50% 50%, rgba(0, 0, 24, 0) 55%, rgba(0, 0, 24, 0.38) 100%), var(--sky, #fff); }
.stage.is-tall .m-air, .stage.is-tall .m-corners { visibility: hidden; }