/* The page's one hatches section: the words over a row of objects standing on the page's ground.
   At left the villa's plate, the plan in the app's inks with the pool its only fill; at right the
   app's fill library, its seats and its maker, over the swatch plate. js/hatches.js frames the plan
   to the plate, rules every seat and the swatch, and plays the maker. Nothing here paints a
   ground: the plan stands on .plate (css/base.css) and the library is one step up like it. */
.hatches { --top: clamp(40px, 7.5vh, 84px); --foot: clamp(14px, 3.4vh, 34px); }
.hatch-layout { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--top) 0 var(--foot); }
.hatch-head { flex: none; text-align: center; }
.hatch-head .say { margin: clamp(10px, 2vh, 20px) auto 0; }
.hatch-room {
  flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(20px, 4vh, 40px);
}
/* Right to left the two change sides, the villa on the right and the library on its left; each
   still reads as the app shows it, left to right (css/lang.css). */
[dir="rtl"] .hatch-room { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
[dir="rtl"] .hatch-villa { grid-column: 2; grid-row: 1; }
[dir="rtl"] .hatch-side { grid-column: 1; grid-row: 1; }

/* ── the villa ── */
.hatch-villa { --r: 18px; position: relative; min-height: 0; margin: 0; overflow: hidden; }
.hatch-cells { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
/* While the plan condenses out of its cells, the cells are the plan; its figures pop on after. */
.hatch-villa.celling .plan-body, .hatch-villa.celling .plan-pills { visibility: hidden; }
.hatch-villa.celling .hatch-cells { opacity: 1; }
/* The pool as the app outlines a selected fill (renderSelection.ts): a 1.75 px edge in the
   selection's blue over a halo 5.25 px wider, shown while a seat for water is under the pointer. */
.hatch-aim path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0; transition: opacity 0.2s; }
.hatch-aim .halo { stroke: rgba(59, 157, 255, 0.26); stroke-width: 7px; }
.hatch-aim .edge { stroke: #3b9dff; stroke-width: 1.75px; }
.hatch-plan.aiming .hatch-aim path { opacity: 1; }

/* ── the column: the library, then the swatch plate taking what height is left ── */
.hatch-side { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); min-width: 0; min-height: 0; }

/* ── the swatch plate: the chosen pattern seen closer, with the app's name and line for it ── */
.hatch-look { --r: 16px; flex: 1 1 0; min-height: 0; margin: 0; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); padding: 12px; }
.hatch-look-art { flex: none; border-radius: 10px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.hatch-look figcaption { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 8px; }
.hatch-look-name { font: 600 17px/1.2 var(--sans); color: var(--snow); letter-spacing: -0.005em; }
.hatch-look-says { font: 14px/1.45 var(--sans); color: var(--snow-dim); text-wrap: pretty; }

/* ── the library: the seats as the app's grid lays them, and its maker under them ── */
.hatch-library { flex: none; padding: 8px; border-radius: 16px; background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--hair); }
.hatch-seats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.hs-seat {
  min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 7px 3px 6px;
  border-radius: 10px; color: var(--snow-dim); font: 500 11px/1.2 var(--sans); transition: background 0.2s, color 0.2s;
}
.hs-pic { position: relative; display: block; flex: none; width: 100%; max-width: 68px; aspect-ratio: 52 / 40; border-radius: 7px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.hs-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
/* Every name reads whole. The app fades a name that runs past its seat, which in its panel sits
   beside the drawing it is for; here the names are half of what the grid says, and Back diagonal,
   Timber grain and Rubble stone run past a seat on a phone or a short window, so a long name takes
   a second line instead. */
.hs-name { width: 100%; text-align: center; white-space: normal; text-wrap: balance; overflow-wrap: normal; hyphens: none; }
.hs-seat:hover { background: rgba(255, 255, 255, 0.05); color: var(--snow); }
/* The chosen pattern is the lit seat, a lighter step of the island rather than a colour. */
.hs-seat[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: var(--snow); }
.hs-seat[aria-pressed="true"] .hs-pic { box-shadow: inset 0 0 0 1px var(--hair-2); }
/* The app's mark on a pattern that moves, in the picture's top corner on a notch of its own ground.
   The app inks it in its accent; here it is near-white, since blue on the page is a dimension or
   what a press will change. */
.hs-moves, .hs-spark { position: absolute; top: 0; left: 0; width: 13px; height: 13px; padding: 2px; border-radius: 7px 0 5px 0; background: var(--raise); }
.hs-moves { fill: var(--snow); }
.hs-spark { display: grid; place-items: center; color: var(--snow); }
.hs-spark .ico { width: 10px; height: 10px; }

/* The seat the made fill takes: dashed and empty, the app's mark for nothing here yet, until the
   answer comes; then it springs in, rimmed in the assistant's violet while it waits to be kept. */
.hs-seat.made:not(.in) { pointer-events: none; }
.hs-seat.made:not(.in) .hs-pic { background: none; box-shadow: none; outline: 1px dashed var(--hair-2); outline-offset: -1px; }
.hs-seat.made:not(.in) :is(canvas, .hs-spark, .hs-name) { visibility: hidden; }
.hs-seat.made.in .hs-pic { animation: hs-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes hs-in { from { transform: scale(0.6); opacity: 0; } }
.hs-seat.made.tried .hs-pic { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--snow-dim) 25%, #b3a1ef); }

/* The maker, as the app opens it under the grid: a rule, the field, then its buttons. It is a
   one-row grid so that, kept, it can close to nothing the way the app closes it, and the swatch
   plate under the library takes the height it gave up. */
.hatch-make { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--ease), opacity 0.3s; }
.hatch-make-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.hatch-make-in::before { content: ""; flex: none; height: 1px; margin: 6px 0 2px; background: var(--hair); }
.hatch-make-row { margin: 0 4px 2px; }
.hatch-make[data-phase="kept"] { grid-template-rows: 0fr; opacity: 0; }
.hatch-wish {
  min-height: calc(2 * 1.35em + 18px); margin: 0 4px; padding: 9px 11px; border-radius: 9px; background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--hair); font: 13.5px/1.35 var(--sans); color: var(--snow); transition: box-shadow 0.25s;
}
.hatch-ph { color: var(--snow-faint); }
.hatch-make:not(.empty) .hatch-ph { display: none; }
/* A sentence for the assistant rims its field in the app's assistant violet, as the assistant's
   command line does (css/assistant.css). */
.hatch-make:is([data-phase="type"], [data-phase="press"], [data-phase="wait"]):not(.empty) .hatch-wish { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--snow-dim) 25%, #b3a1ef); }
.hatch-caret { display: none; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--snow); animation: blink 1.05s steps(1) infinite; }
.hatch-make[data-phase="type"]:not(.empty) .hatch-caret { display: inline-block; }
.hatch-make-row { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.hm-btn {
  display: none; height: 28px; padding: 0 13px; border-radius: 14px; font: 500 12.5px/28px var(--sans); color: var(--snow-dim); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--hair-2); transition: opacity 0.2s, background 0.2s, transform 0.2s var(--ease), box-shadow 0.25s;
}
/* The one affirmative button, the app's primary: the near-white its accent lands at. */
.hm-go, .hm-keep { background: var(--snow); color: var(--ground); box-shadow: none; }
/* Asked: Make it and Cancel. Answered: Keep it, Discard and Again, as the maker closes on Keep. */
.hatch-make:is([data-phase="type"], [data-phase="press"], [data-phase="wait"]) :is(.hm-go, .hm-cancel) { display: inline-block; }
.hatch-make:is([data-phase="answer"], [data-phase="keep"], [data-phase="kept"]) :is(.hm-keep, .hm-tried) { display: inline-block; }
.hatch-make:not(.ready) .hm-go, .hatch-make[data-phase="wait"] .hm-go { opacity: 0.45; }
/* Held down: sunk, darker and ringed, for long enough to be seen, as the assistant's Apply is. */
.hatch-make[data-phase="press"] .hm-go, .hatch-make:is([data-phase="keep"], [data-phase="kept"]) .hm-keep { background: #c3c6cc; transform: scale(0.96); box-shadow: 0 0 0 3px #1d1e21, 0 0 0 4.5px var(--snow); }
/* The wait: the app's thinking mark in the assistant's violet, and the seconds beside it. */
.hm-working { display: none; align-items: center; gap: 7px; margin-left: 4px; font: 500 12px/1 var(--mono); color: var(--snow-dim); font-variant-numeric: tabular-nums; }
.hm-working .bloom { color: var(--violet); }
.hatch-make[data-phase="wait"] .hm-working { display: inline-flex; }

/* A short window: the chrome a size smaller, so the column is no taller than the plate beside it,
   and the swatch plate keeps the pattern's name and gives up its line when there is no room for it. */
@media (max-height: 640px) and (min-width: 601px) {
  .hatch-library { padding: 5px; border-radius: 14px; }
  .hs-seat { gap: 3px; padding: 4px 2px 3px; font-size: 10px; line-height: 1.1; }
  .hs-pic { max-width: 40px; border-radius: 5px; }
  .hs-moves, .hs-spark { width: 11px; height: 11px; padding: 1.5px; }
  .hatch-make-in { gap: 6px; }
  .hatch-make-in::before { margin: 3px 0 0; }
  .hatch-wish { min-height: 0; padding: 6px 9px; font-size: 12px; }
  .hm-btn { height: 24px; padding: 0 10px; font-size: 11.5px; line-height: 24px; }
  .hatch-make-row { min-height: 24px; margin-bottom: 0; }
  .hatch-look { padding: 8px; gap: 12px; }
  .hatch-look-name { font-size: 14.5px; }
  .hatch-look-says { font-size: 12.5px; line-height: 1.35; }
}
/* A phone: the plate across the screen, then the library, then the swatch plate. The plate takes
   what height is left; while the maker closes, js/hatches.js holds it where it stands. */
@media (max-width: 600px) {
  .hatch-room { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .hatch-villa { --r: 14px; flex: 1 1 0; min-height: 150px; }
  .hatch-side { flex: none; gap: 10px; }
  .hatch-look { flex: none; height: 76px; padding: 8px; gap: 12px; }
  .hatch-look-name { font-size: 14px; }
  .hatch-look-says { font-size: 12px; line-height: 1.35; }
  .hatch-library { padding: 5px; }
  .hs-seat { gap: 3px; padding: 4px 1px 3px; font-size: 9.5px; line-height: 1.1; }
  .hs-moves, .hs-spark { width: 11px; height: 11px; padding: 1.5px; }
  .hatch-wish { min-height: 0; font-size: 12.5px; padding: 7px 9px; }
}
/* A short phone: the swatch plate keeps the pattern's name and gives up its line, and the seats
   and the field close up, so the maker's buttons stay on the screen. */
@media (max-width: 600px) and (max-height: 760px) {
  .hatch-room { margin-top: 12px; gap: 8px; }
  .hatch-villa { min-height: 120px; }
  .hatch-side { gap: 8px; }
  .hatch-look { height: 50px; padding: 6px; }
  .hatch-look-says { display: none; }
  .hs-seat { gap: 2px; padding: 3px 1px 2px; font-size: 9px; }
  .hs-pic { max-width: 44px; }
  .hatch-make-in { gap: 6px; }
  .hatch-make-in::before { margin: 3px 0 0; }
  .hatch-wish { padding: 6px 9px; font-size: 12px; }
  .hm-btn { height: 24px; padding: 0 10px; font-size: 11.5px; line-height: 24px; }
  .hatch-make-row { min-height: 24px; margin-bottom: 0; }
}
/* Kept, on a phone: the villa is held at the height it had (`held`, js/hatches.js) and the swatch
   plate grows into the room the closing maker gives up, so the pattern just made is seen larger and
   the foot of the screen is not left as empty ground. Grown, a short phone's plate has room for the
   pattern's line again. */
@media (max-width: 600px) {
  .hatches.held .hatch-side { flex: 1 1 0; min-height: 0; }
  .hatches.held .hatch-look { flex: 1 1 0; height: auto; min-height: 50px; }
  .hatches.held .hatch-look-says { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-seat, .hatch-wish, .hm-btn, .hatch-make { transition: none; }
  .hs-seat.made.in .hs-pic { animation: none; }
}