/* =============================================================================
   areas/home.css (WP1): yhtiö home, Yhtiöt table, Tehtävät, season view,
   batch review and progress, super-admin overview.
   Tokens only; every grid and flex child gets min-width:0 so long names and
   tables never push the page wider than the phone (no horizontal scroll).
   ========================================================================== */
@layer areas {

/* ---------------------------------------------------------------- shared */
html.js .no-js-only { display: none; }
.bar-svg { display: block; width: 100%; height: 100%; }
.bar-svg__fill { fill: var(--status-ok-line); }
.home-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); border-color: var(--status-attn-line); }
.home-error__text { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; flex: 1 1 18rem; min-width: 0; font-size: var(--text-md); line-height: var(--leading-tight); }
.home-error__text .icon { color: var(--status-attn-line); }

/* ---------------------------------------------------------------- home layout (E1) */
.home { container-type: inline-size; min-width: 0; }
.home__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; max-width: var(--content-max); }
.home__main, .home__aside { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.home__aside > .section { margin-top: 0; }
.home__main > .section { margin-top: 0; }
/* Two columns (main 2/3, aside 1/3) once the content column is wide enough. */
@container (min-width: 60rem) {
  .home__grid { max-width: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.home-progress { max-width: 32rem; margin: calc(var(--space-2) * -1) 0 var(--space-5); }
.home-progress .progress { height: 12px; }
.home-progress__sub { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------------------------------------------------------------- Seuraava tehtävä card */
.next-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.next-card > * { max-width: 100%; }
.next-card__eyebrow { margin: 0; color: var(--color-text); }
.next-card--calm .next-card__eyebrow { color: var(--status-ok-fg); }
.next-card__eyebrow-icon { width: 1.25rem; height: 1.25rem; }
.next-card__title { margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.next-card__why { margin: 0; font-size: var(--text-lead); line-height: 1.45; max-width: var(--measure); overflow-wrap: anywhere; }
.next-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.next-card__actions .btn { min-height: var(--control-h-lg); }
.next-card__note { margin: 0; color: var(--color-text-muted); }
.next-card__company { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.next-card__company a { color: var(--color-text); }
.next-card__all { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h-min); font-weight: var(--weight-semibold); }
.next-card__all .icon { width: 1.25rem; height: 1.25rem; }
.next-card__why-more { font-size: var(--text-base); }
.next-card__why-more > summary { display: inline-flex; align-items: center; min-height: var(--control-h-min); cursor: pointer; color: var(--color-link); font-weight: var(--weight-semibold); text-decoration: underline; }
.next-card__why-more > p { margin: 0 0 var(--space-2); max-width: var(--measure); color: var(--color-text); }
.next-card__done { display: inline-flex; align-items: center; min-height: var(--control-h-min); text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 35.99rem) {
  .next-card__actions { width: 100%; }
  .next-card__actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Vuoden tehtävät (year steps) */
.year-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.year-step { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); min-width: 0; }
.year-step__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin-top: .1rem; border-radius: var(--radius-tile);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.year-step__mark .icon { width: 1.125rem; height: 1.125rem; stroke-width: 3; }
.year-step--done .year-step__mark { background: var(--status-ok-line); color: var(--color-text-inverse); }
.year-step--active .year-step__mark { box-shadow: inset 0 0 0 2px var(--color-action); background: linear-gradient(to top, var(--color-action) 50%, var(--color-surface) 50%); }
.year-step--todo .year-step__mark { background: var(--color-surface-sunken); }
.year-step__body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1 1 auto; }
.year-step__label { font-weight: var(--weight-semibold); }
.year-step--todo .year-step__label { color: var(--color-text-muted); }
.year-step__detail { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.year-step__link { align-self: flex-start; font-size: var(--text-sm); min-height: var(--control-h-min); display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 56.25rem) {
  .year-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.year-steps__compact { background: var(--color-surface); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.year-steps__compact > summary { padding: var(--space-3) var(--space-4); min-height: var(--control-h); cursor: pointer; font-weight: var(--weight-semibold); line-height: var(--leading-body); }
.year-steps__compact[open] > summary { border-bottom: 1px solid var(--color-border-subtle); }
.year-steps__compact .year-steps__list { padding: var(--space-3); }
.year-steps__chip { white-space: nowrap; }
.year-steps__chip--done { color: var(--status-ok-fg); }
.year-steps__chip--active { color: var(--status-wait-fg); }
.year-steps__chip--todo { color: var(--color-text-muted); }

/* ---------------------------------------------------------------- aside cards */
.proof { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.proof .card__title { margin-bottom: 0; }
.proof__line { margin: 0; overflow-wrap: anywhere; }
.proof__report { margin-top: var(--space-3); font-weight: var(--weight-semibold); }
.proof__all { margin: var(--space-2) 0 0; }

.home-others__row .home-others__icon { color: var(--color-text-muted); }
/* before the first round: the list folded away (enrollment part 2, 2.7) */
.home-others__summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-min); cursor: pointer; list-style: none; }
.home-others__summary::-webkit-details-marker { display: none; }
.home-others__summary::after { content: ""; width: .5rem; height: .5rem; margin-left: .25rem; border-right: 2px solid var(--color-text-2); border-bottom: 2px solid var(--color-text-2); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease-out); }
.home-others__later[open] > .home-others__summary::after { transform: rotate(225deg) translateY(-2px); }
.home-others__summary .section__title { margin: 0; }
.home-others__later[open] > .home-others__summary { margin-bottom: var(--space-3); }
.home-others__row--problem .home-others__icon { color: var(--status-problem-fg); }
.home-others__row--attn .home-others__icon { color: var(--status-attn-line); }
.home-others__row--unreached .home-others__icon { color: var(--status-unreached-line); }
.home-others__row--ok .home-others__icon { color: var(--status-ok-fg); }
.home-others__text, .home-activity__text { display: block; font-size: var(--text-base); line-height: var(--leading-tight); overflow-wrap: anywhere; }
a.row:hover .home-others__text, a.row:hover .home-activity__text { text-decoration: underline; }
.home-activity__icon { color: var(--color-text-muted); align-self: flex-start; margin-top: .2rem; }

/* Vuosikello: twelve month words, the current month and the testing month marked in words */
.vk__months { list-style: none; margin: var(--space-3) 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.vk__m {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 2.75rem; padding: var(--space-1) 2px; border-radius: var(--radius-tile);
  border: 0; background: var(--draw-wall-fill);
  font-size: var(--text-xs); text-align: center; min-width: 0;
}
.vk__name { overflow-wrap: anywhere; }
.vk__m--agm { background: var(--color-surface-sunken); }
.vk__m--testing { box-shadow: inset 0 0 0 2px var(--color-action); font-weight: var(--weight-semibold); }
.vk__m--now { background: var(--color-surface-selected); outline: 2px solid var(--color-text); outline-offset: 1px; font-weight: var(--weight-bold); }
.vk__mark .icon { width: 1rem; height: 1rem; color: var(--color-action); }
.vk__milestones { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.vk__phone { margin: 0; }
.vk__change { margin: var(--space-3) 0 0; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- Yhtiöt (E2) */
.portfolio { min-width: 0; }
.portfolio .next-card { margin-bottom: var(--space-2); }
.minibar-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.portfolio__list { min-width: 0; }
.portfolio__tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.portfolio__search { flex: 1 1 18rem; min-width: 0; max-width: 28rem; }
.portfolio__search-row { display: flex; gap: var(--space-2); }
.portfolio__search-row .input { flex: 1 1 auto; min-width: 0; }
.portfolio__sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.portfolio__sort-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.chip--sm { min-height: var(--control-h-min); font-size: var(--text-sm); }
.portfolio__form { min-width: 0; }
.portfolio__table th, .portfolio__table td { vertical-align: middle; }
.portfolio__check { width: 3rem; }
.portfolio__name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.portfolio__city { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.portfolio__testing { min-width: 9rem; }
.portfolio__progress { display: block; font-size: var(--text-sm); white-space: nowrap; }
.portfolio__help { display: block; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); white-space: nowrap; }
.portfolio__empty { padding: var(--space-5) var(--space-4); text-align: center; }
.portfolio__hint { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.portfolio__table td .pill { white-space: nowrap; }
@container table (max-width: 40rem) {
  .portfolio__table .portfolio__check { width: auto; display: block; }
  .portfolio__testing { min-width: 0; }
}

/* Mini bar of apartment states, in the tile patterns (words sit next to it) */
.minibar {
  display: block; width: 100%; max-width: 10rem; height: .625rem; margin-bottom: var(--space-1);
  border: 1px solid var(--color-border-control); border-radius: 3px; background: var(--color-surface);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.minibar__seg--ok        { fill: var(--status-ok-line); }
.minibar__seg--wait      { fill: var(--status-wait-bg); }
.minibar__seg--problem   { fill: url(#mb-problem); }
.minibar__seg--unreached { fill: url(#mb-unreached); }
.minibar__seg--none      { fill: url(#mb-none); }
.mb-p1 { fill: var(--status-problem-solid); }
.mb-p2 { fill: var(--status-problem-stripe); }
.mb-u1 { fill: var(--status-unreached-line); }
.mb-u2 { fill: var(--color-surface); }
.mb-n1 { fill: var(--status-none-bg); }
.mb-n2 { fill: var(--status-none-line); }

/* ---------------------------------------------------------------- season (/testing) */
.season__row { flex-wrap: wrap; }
.season__row .row__main { flex: 1 1 14rem; }
.season__row a.row__title { color: var(--color-link); }

/* ---------------------------------------------------------------- Tehtävät (E3) */
.tasks__list { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.task-group { min-width: 0; }
.task-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-2); }
.task-group__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); overflow-wrap: anywhere; min-width: 0; }
.task-group__city { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.task-group__open { min-height: var(--control-h-min); display: inline-flex; align-items: center; font-weight: var(--weight-semibold); }
.task-row { flex-wrap: wrap; align-items: flex-start; }
.task-row .row__main { flex: 1 1 16rem; }
.task-row__word { flex: none; }
.tasks__empty { margin-top: var(--space-4); }

/* ---------------------------------------------------------------- batch review and progress (E2a) */
.batch-review__intro { margin-bottom: var(--space-2); }
.batch-review__icon { color: var(--color-action); align-self: flex-start; margin-top: .15rem; }
.batch-review__row--skipped .batch-review__icon { color: var(--color-text-muted); }
.batch-review__form { margin-top: var(--space-6); }
.batch-review__form .field + .field { margin-top: var(--space-4); }
.batch-review__date { max-width: 14rem; }
.batch-review__notes { margin: var(--space-5) 0 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); color: var(--color-text-muted); }
.batch-review__form .actions .btn--primary { flex: 1 1 auto; }

.batch-progress__status { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.batch-progress__text { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.batch-progress__failed { margin: 0; color: var(--status-attn-fg); }
.batch-progress__row[data-state="done"] [data-batch-text] { color: var(--status-ok-fg); font-weight: var(--weight-semibold); }
.batch-progress__row[data-state="failed"] [data-batch-text] { color: var(--status-problem-fg); font-weight: var(--weight-semibold); }
.batch-progress__row[data-state="running"] [data-batch-text] { color: var(--status-wait-fg); }
.batch-progress__paper { display: inline-flex; align-items: center; min-height: var(--control-h-min); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- super-admin overview */
.admin-overview__ok { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--status-ok-fg); font-weight: var(--weight-semibold); }
.admin-overview__facts { max-width: 32rem; }
.admin-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-5); }
@media (min-width: 64rem) { .admin-overview__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.admin-overview .banner + .banner { margin-top: var(--space-3); }


/* ---------------------------------------------------------------- the building drawing ("Pinnat", 2026-10-27)
   The yhtiö as a filled elevation: views/home/_facade.php. Windows are links
   to the apartments. Solid Kuusi = tested, lower half Kuusi = some detectors
   tested, white with a grey ring = waiting, white with an amber ring and an
   amber corner = not reached in an open round, white with a grey ring and a
   folded corner = paper notice (before any round, and in an open round until
   its deadline: Facade::paperPending, display only), solid red =
   fault, grey fill = no detectors in the register. No outlines on the
   building; an outline on a window only ever means "not tested yet". */
.home-head { margin-bottom: var(--space-5); }
.home-head__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0 0 var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2);
}
.home-head__kicker > span:nth-child(2) { color: var(--color-text); }
.home-head__state { width: .75rem; height: .75rem; flex: none; border-radius: 3px; background: var(--color-text-muted); }
.home-head__state--wait { background: linear-gradient(to top, var(--color-action) 50%, var(--color-surface) 50%); box-shadow: inset 0 0 0 2px var(--color-action); }
.home-head__state--ok { background: var(--color-action); }
.home-head__state--attn { background: var(--status-attn-line); }
.home-head__state--problem { background: var(--status-problem-solid); }
.home-head__dates { color: var(--color-text-2); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; }

.facade {
  --fw: 2.75rem; --fh: 1.875rem; --fgap: .75rem; --rowgap: .625rem; --lvl: 3rem; --pad: var(--space-4);
  container-type: inline-size; margin: 0 0 var(--space-6); min-width: 0;
}
.facade--md { --fw: 2rem; --fh: 1.375rem; --fgap: .5rem; --rowgap: .5rem; }
.facade--sm { --fw: 1.125rem; --fh: .875rem; --fgap: .3125rem; --rowgap: .375rem; --lvl: 2.75rem; --pad: var(--space-3); }
.facade__sheet { background: var(--color-surface); border-radius: var(--radius-sheet); box-shadow: var(--shadow-card); padding: var(--space-5); }
.facade__drawing {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: safe center; gap: var(--space-6) var(--space-7);
  padding: var(--space-5) var(--space-3) var(--space-4);
  overflow-x: auto;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@container (max-width: 34rem) {
  .facade__drawing { padding: var(--space-4) 0 var(--space-3); gap: var(--space-5); }
  /* phone: the floor labels give their room to the windows, so six windows a floor fit with 15 px numbers */
  .facade__sheet { --fw: 2.875rem; --fh: 1.5rem; --fgap: .25rem; --rowgap: .5rem; --pad: .5rem; padding: var(--space-3); }
  .facade .fac-lvl { display: none; }
}

.fac-b { margin: 0; display: flex; flex-direction: column; align-items: center; flex: none; }
.fac-b__frame { position: relative; display: flex; flex-direction: column; }
.fac-b__roof { position: relative; height: 10px; margin: 0 -.375rem; border-radius: var(--draw-wall-r) var(--draw-wall-r) 0 0; background: var(--draw-roof-fill); }
.fac-b__machine { position: absolute; left: 50%; bottom: 100%; width: 4.5rem; height: .875rem; transform: translateX(-50%); border-radius: 4px 4px 0 0; background: var(--draw-roof-fill); }
.fac-b__body { display: flex; flex-direction: column; gap: var(--rowgap); padding: var(--pad) var(--pad) var(--space-3); background: var(--draw-wall-fill); }
.fac-row { display: flex; align-items: flex-start; gap: var(--fgap); }
.fac-lvl {
  flex: 0 0 var(--lvl); align-self: flex-start; min-height: var(--fh);
  display: flex; align-items: center;
  font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fac-sec { display: flex; gap: var(--fgap); flex: none; width: calc(var(--c) * var(--fw) + (var(--c) - 1) * var(--fgap)); }
/* rappu sections: an 8 px gap of wall, no line */
.fac-sep { flex: 0 0 8px; align-self: stretch; background: transparent; }

.fw { display: flex; flex-direction: column; align-items: center; gap: .3125rem; width: var(--fw); flex: none; color: var(--color-text); text-decoration: none; }
.fw__glass {
  position: relative; display: block; width: 100%; height: var(--fh); box-sizing: border-box;
  border-radius: var(--draw-window-r); border: var(--draw-wait-stroke-w) solid var(--draw-wait-stroke); background: var(--draw-wait-fill);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fw__no { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facade--md .fw__no, .facade--sm .fw__no { display: none; }
.facade--md .fw, .facade--sm .fw { gap: 0; }
.fw-key {
  display: inline-block; position: relative; width: 1rem; height: 1rem; flex: none; box-sizing: border-box;
  border-radius: var(--draw-window-r); border: var(--draw-wait-stroke-w) solid var(--draw-wait-stroke); background: var(--draw-wait-fill);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fw--ok .fw__glass, .fw-key--ok { background: var(--draw-ok-fill); border-color: var(--draw-ok-fill); }
.fw--part .fw__glass, .fw-key--part { background: linear-gradient(to top, var(--draw-ok-fill) 50%, var(--color-surface) 50%); border-color: var(--draw-ok-fill); }
.fw--unreached .fw__glass, .fw-key--unreached { background: var(--color-surface); border: var(--draw-attn-stroke-w) solid var(--draw-attn-stroke); }
.fw--unreached .fw__glass::after, .fw-key--unreached::after,
.fw--paper .fw__glass::after, .fw-key--paper::after {
  content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px;
  background: linear-gradient(225deg, var(--draw-attn-stroke) 50%, transparent 50%);
}
.fw-key--unreached::after, .fw-key--paper::after { width: 6px; height: 6px; }
.fw--paper .fw__glass, .fw-key--paper { background: var(--color-surface); border-color: var(--draw-wait-stroke); }
.fw--paper .fw__glass::after, .fw-key--paper::after { background: linear-gradient(225deg, var(--draw-wait-stroke) 50%, transparent 50%); }
.fw--problem .fw__glass, .fw-key--problem { background: var(--draw-problem-fill); border-color: var(--draw-problem-fill); }
.fw--none .fw__glass, .fw-key--none { background: var(--draw-none-fill); border-color: var(--draw-none-fill); }
.fw--none { color: var(--color-text-muted); }
.fw--unreached .fw__no { color: var(--draw-attn-label); }
.fw--problem .fw__no { color: var(--status-problem-fg); }
.fw:hover .fw__glass { outline: 2px solid var(--color-text); outline-offset: 2px; }
.fw:hover .fw__no { text-decoration: underline; }
.fw:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* houses (ENR-32, views/home/_facade_houses.php): a company of detached houses
   drawn as a street. A house = pitched roof + body + door on its own ground
   line; the body is the window glass, so every state rule above applies to it
   unchanged. --hw (house width) steps with the count (Homes::houseDensity),
   rows are balanced (--hcols, Homes::houseCols). --hw0 is the size step;
   the grid shrinks it (to 60 % at most) so --hcols houses fit the card's
   width, and a row that still wraps is centred, never left-aligned. */
.fac-h { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; container-type: inline-size; }
.fac-h--xl { --hw0: 4rem; } .fac-h--lg { --hw0: 3rem; } .fac-h--md { --hw0: 2.25rem; } .fac-h--sm { --hw0: 1.5rem; } .fac-h--xs { --hw0: 1.125rem; }
.fac-h__grid {
  --hw: max(calc(var(--hw0, 3rem) * .6), min(var(--hw0, 3rem), 100cqi / (var(--hcols, 6) * 1.34 - .34)));
  --hgap: calc(var(--hw) * .34); --hrow: calc(var(--hw) * .3);
  list-style: none; margin: 0 auto; padding: 0; width: 100%; display: flex; flex-wrap: wrap;
  justify-content: center; column-gap: var(--hgap); row-gap: var(--hrow);
  max-width: calc(var(--hcols, 6) * var(--hw) + (var(--hcols, 6) - 1) * var(--hgap) + 1px);
}
.fac-h__lot { display: flex; justify-content: center; }
.fw--house { width: var(--hw); gap: 0; }
.fw--house .fw__roof {
  display: block; width: calc(100% + 6px); height: calc(var(--hw) * .44); margin: 0 -3px -1px;
  background: var(--draw-house-roof); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fw--house .fw__glass { height: calc(var(--hw) * .62); border-radius: 0 0 2px 2px; }
.fw--house .fw__door {
  position: absolute; left: 50%; bottom: -2px; width: 30%; height: 48%; transform: translateX(-50%);
  border-radius: 3px 3px 0 0; background: var(--draw-house-roof);
}
.fw--house.fw--ok .fw__door, .fw--house.fw--problem .fw__door { background: rgb(255 255 255 / .55); }
.fw--house .fw__ground { display: block; align-self: stretch; height: 3px; margin: 0 calc(var(--hgap) / -2); background: var(--draw-ground); }
.fw--house .fw__no { margin-top: .3125rem; font-size: var(--text-xs); } /* the house's only visible label: Pinnat's 15 px floor */
.fac-h--md .fw__no, .fac-h--sm .fw__no, .fac-h--xs .fw__no { display: none; }
.fac-h--sm .fw__door, .fac-h--xs .fw__door { display: none; }
.fac-h--xs .fw--house .fw__roof { width: calc(100% + 4px); margin: 0 -2px -1px; }
/* the detector dot sits in the house body, clear of the door */
.fw--house.fw--det .fw__glass::before { top: 2px; }
.facade--example .fac-h { opacity: .45; }
@media (max-width: 63.99rem) {
  .su .fac-h--xl, .wiz .fac-h--xl { --hw0: 2.75rem; } .su .fac-h--lg, .wiz .fac-h--lg { --hw0: 2.25rem; }
  .su .fac-h--md, .wiz .fac-h--md { --hw0: 1.375rem; } .su .fac-h--sm, .wiz .fac-h--sm { --hw0: 1.125rem; }
  .su .fac-h--xs, .wiz .fac-h--xs { --hw0: .875rem; }
  /* a long street keeps its first rows and fades out at the cap instead of
     showing the last rows only */
  .su .facade--houses .facade__drawing, .wiz .facade--houses .facade__drawing { align-items: flex-start; align-content: flex-start; }
  .su .facade--houses:has(.fac-h--xs) .facade__drawing, .wiz .facade--houses:has(.fac-h--xs) .facade__drawing {
    -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent);
  }
}

.fac-b__plinth { display: flex; align-items: flex-end; gap: var(--fgap); height: 2rem; padding: 0 var(--pad); background: var(--draw-wall-fill); }
.fac-b__plinth .fac-sep { opacity: 0; }
.fac-door {
  display: block; min-width: 2rem; height: 1.75rem; margin: 0 auto; padding: 0 .25rem;
  border-radius: 4px 4px 0 0; background: var(--draw-roof-fill);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.75rem; text-align: center; color: var(--color-text);
}
.facade--sm .fac-door { min-width: 1.5rem; height: 1.5rem; line-height: 1.5rem; }
/* ground: a 3 px line under the plinth */
.fac-b__frame::after { content: ""; display: block; height: 3px; margin: 0 -1rem; border-radius: 2px; background: var(--draw-ground); }
.fac-b__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem; margin-top: var(--space-3); font-family: var(--font-ui); font-size: var(--text-sm); }
.fac-b__name { color: var(--color-text); font-weight: var(--weight-semibold); }
.fac-b__count { color: var(--color-text-2); font-variant-numeric: tabular-nums; }

.facade__strip { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.facade__legend { list-style: none; margin: 0; padding: var(--space-4) 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--color-text); }
.facade__legend li { display: inline-flex; align-items: center; gap: .5rem; }
.facade__legend .num { color: var(--color-text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.facade__tb { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding-top: var(--space-3); }
.facade__tb > div { min-width: 0; }
.facade__tb dt { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.facade__tb dd { margin: .125rem 0 0; font-size: var(--text-base); font-weight: var(--weight-regular); line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@container (min-width: 48rem) {
  .facade__strip { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: end; gap: var(--space-5); }
  .facade__legend { align-self: end; padding-bottom: 0; }
  .facade__tb { padding-top: var(--space-4); }
}
.facade__more { margin: var(--space-3) 0 0; font-size: var(--text-sm); }

/* draft mode (enrollment 1.2 and 1.3, views/home/_facade.php): the visitor's own
   building before an account. Windows are plain marks, nothing is counted; the
   window size follows the sheet width (--tc columns, --ts rappu sections, set on
   .facade) so a two-rappu building fits a phone; labels show only on wide sheets.
   The example building before anything is typed is drawn faint. */
.facade--draft .facade__sheet {
  /* width = tc*fw + gaps (.27 fw each) + 8 px rappu gaps + about 10.5rem of padding, ground line and roof eaves */
  --fw: clamp(.75rem, calc((100cqi - 10.5rem - (var(--ts, 1) - 1) * 8px) / (1.27 * var(--tc, 6) + .27 * var(--ts, 1) - .54)), 2.75rem);
  --fh: calc(var(--fw) * .68); --fgap: clamp(.25rem, calc(var(--fw) * .27), .75rem); --rowgap: clamp(.3125rem, calc(var(--fw) * .23), .625rem);
  padding: var(--space-5);
}
.facade__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem var(--space-4); }
.facade__caption { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
.facade__change { display: inline-flex; align-items: center; min-height: var(--control-h-min); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.facade--draft .facade__drawing { padding: var(--space-5) var(--space-2) var(--space-3); }
.facade--example .fac-b { opacity: .45; }
.facade--example .facade__caption { font-weight: var(--weight-regular); color: var(--color-text-2); }
.facade__key { display: flex; align-items: flex-start; gap: .625rem; margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-2); }
.facade__key .fw-key { margin-top: .15em; }
@container (max-width: 40rem) {
  .facade--draft .fw__no { display: none; }
  .facade--draft .fw { gap: 0; }
  .facade--draft .facade__sheet { padding: var(--space-4); }
}
/* phones: a compact drawing (at most 180 px tall, the ground floor kept in view) */
@media (max-width: 63.99rem) {
  .su .facade--draft .facade__drawing { max-height: 180px; overflow: hidden; align-items: flex-end; padding-top: var(--space-4); }
  /* tablets (about 600–1023 px, e.g. an iPad in portrait): the compact frame keeps
     phone-sized windows without numbers, so the whole building fits its height
     instead of being cut through the windows (QA 2026-10-27) */
  .su .facade--draft .facade__sheet, .wiz .facade--draft .facade__sheet {
    --fw: clamp(.75rem, calc((100cqi - 10.5rem - (var(--ts, 1) - 1) * 8px) / (1.27 * var(--tc, 6) + .27 * var(--ts, 1) - .54)), 1.25rem);
  }
  .su .facade--draft .fw__no, .wiz .facade--draft .fw__no { display: none; }
  .su .facade--draft .fw, .wiz .facade--draft .fw { gap: 0; }
}

/* setup mode (enrollment part 2, views/home/_facade.php): the saved yhtiö drawn
   beside every setup step. A 6 px detector dot at the window's top centre once
   detectors are marked; email-ready glass (pale Kuusi inside the grey ring) or
   the folded paper corner once residents are done; after the first send the
   round's own states. The one motion: a window that turns tested on
   /setup/lahti fills from the bottom in 280 ms, once (instant with reduced
   motion, where --dur-slow is 0). */
.fw--det .fw__glass::before, .fw-key--det::before {
  content: ""; position: absolute; top: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--draw-detector);
}
.fw-key--det::before { top: 3px; width: 4px; height: 4px; margin-left: -2px; }
.fw--mail .fw__glass, .fw-key--mail { background: var(--draw-mail-glass); }
.fw--fill .fw__glass { background: linear-gradient(to top, var(--draw-ok-fill) 50%, var(--color-surface) 50%) bottom / 100% 200% no-repeat; animation: fw-fill var(--dur-slow) var(--ease-out) both; }
@keyframes fw-fill { from { background-position: 0 0; } to { background-position: 0 100%; border-color: var(--draw-ok-fill); } }
.facade--setup .facade__drawing { padding-top: var(--space-4); }
.facade__legend--setup { padding: var(--space-3) 0 0; margin-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); gap: var(--space-2) var(--space-4); }
/* phones: the setup drawing sits above the step's title, at most 140 px tall,
   the ground floor kept in view */
@media (max-width: 63.99rem) {
  .wiz .facade--setup .facade__drawing, .wiz .facade--draft .facade__drawing { max-height: 140px; overflow: hidden; align-items: flex-end; align-content: flex-end; padding: var(--space-3) var(--space-2) var(--space-2); }
  .wiz .facade--setup .facade__sheet, .wiz .facade--draft .facade__sheet { padding: var(--space-3) var(--space-4); }
}
/* tablets: room for the roof of a four-floor building too (QA 2026-10-27) */
@media (min-width: 37.5rem) and (max-width: 63.99rem) {
  .wiz .facade--setup .facade__drawing, .wiz .facade--draft .facade__drawing { max-height: 170px; }
}


/* ---------------------------------------------------------------- rivitalot, paritalot, the street (talot spec 6.2–6.4)
   A rivitalo (.fac-b--low) is a low row: a light pitched roof (the tile art's
   shape) and one front door per window column. A paritalo (.fac-p, _facade_pairs.php)
   is one roof over two halves; each half is a home whose glass carries the
   state. Several figures in draft or setup mode stand on one street
   (.facade--street): the server splits them into balanced lines (.street-br)
   and --tc / --ts / --tb from the widest line size the windows. */
.fac-b--low .fac-b__roof {
  height: calc(var(--fh) * .8 + 6px); margin: 0 -.5rem -1px; border-radius: 0;
  background: var(--draw-house-roof); clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fac-b--low .fac-b__body { padding-top: calc(var(--pad) * .75); }
.fac-b--low .fac-b__plinth { height: calc(var(--fh) * 1.25 + 4px); }
.fac-b--low .fac-b__plinth .fac-sec { align-self: flex-end; }
.fac-slot { display: flex; justify-content: center; align-items: flex-end; width: var(--fw); flex: none; }
.fac-door--home { display: block; min-width: 0; width: 50%; height: calc(var(--fh) * 1.2); margin: 0; padding: 0; border-radius: 3px 3px 0 0; background: var(--draw-house-roof); }
.facade--sm .fac-door--home { min-width: 0; height: calc(var(--fh) * 1.2); }
.fac-b__tag, .fac-p__tag {
  display: block; margin-top: .375rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1; color: var(--color-text-2); text-align: center;
}
@container (max-width: 40rem) { .facade--draft .fac-b__tag, .facade--draft .fac-p__tag { display: none; } }

.fac-pp { margin: 0; display: flex; flex-direction: column; align-items: center; flex: none; max-width: 100%; }
.fac-pp--xl { --pw0: 4rem; } .fac-pp--lg { --pw0: 3rem; } .fac-pp--md { --pw0: 2.25rem; } .fac-pp--sm { --pw0: 1.5rem; } .fac-pp--xs { --pw0: 1.125rem; }
.fac-pp__grid {
  --pw: max(calc(var(--pw0, 3rem) * .6), .75rem, min(var(--pw0, 3rem), (100cqi - 4rem) / (var(--pcols, 3) * 2.8)));
  --pgap: calc(var(--pw) * .7);
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--pcols, 3), auto);
  justify-content: center; column-gap: var(--pgap); row-gap: calc(var(--pw) * .5);
}
.fac-p { margin: 0; display: flex; flex-direction: column; align-items: center; }
.fac-p__roof {
  display: block; width: calc(var(--pw) * 2 + 3px + 10px); height: calc(var(--pw) * .66); margin-bottom: -1px;
  background: var(--draw-house-roof); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fac-p__body { display: flex; gap: 3px; }
.fac-p .fw { width: var(--pw); gap: 0; }
.fac-p .fw__glass { height: calc(var(--pw) * .74); border-radius: 0 0 2px 2px; }
.fac-p .fw__door { position: absolute; bottom: -2px; width: 30%; height: 46%; border-radius: 3px 3px 0 0; background: var(--draw-house-roof); }
.fac-p .fw:first-child .fw__door { left: 12%; }
.fac-p .fw:last-child .fw__door { right: 12%; }
.fac-p .fw--ok .fw__door, .fac-p .fw--problem .fw__door { background: rgb(255 255 255 / .55); }
.fac-p .fw--det .fw__glass::before { top: 2px; }
.fac-p__ground { display: block; align-self: stretch; height: 3px; margin: 0 calc(var(--pgap) / -2); background: var(--draw-ground); }
/* status and setup: each half's number under the ground line, in place of the
   letter tag, while the halves are wide enough for a 15 px label (xl always,
   lg in a wide card); smaller streets keep the letter only. */
.fac-p__nos { display: none; gap: 3px; margin-top: .375rem; color: var(--color-text-2); }
.fac-p__nos .fw__no { display: block; width: var(--pw); text-align: center; }
.fac-pp--xl .fac-p__nos { display: flex; }
.fac-pp--xl .fac-p__nos + .fac-p__tag { display: none; }
@container (min-width: 36rem) {
  .fac-pp--lg .fac-p__nos { display: flex; }
  .fac-pp--lg .fac-p__nos + .fac-p__tag { display: none; }
}
.facade--street .fac-p__nos { display: none; }
.facade--street .fac-p__nos + .fac-p__tag { display: block; }
.facade--example .fac-pp { opacity: .45; }
@media (max-width: 63.99rem) {
  .su .fac-pp--xl, .wiz .fac-pp--xl { --pw0: 2.75rem; } .su .fac-pp--lg, .wiz .fac-pp--lg { --pw0: 2.25rem; }
  .su .fac-pp--md, .wiz .fac-pp--md { --pw0: 1.375rem; } .su .fac-pp--sm, .wiz .fac-pp--sm { --pw0: 1.125rem; }
  .su .fac-pp--xs, .wiz .fac-pp--xs { --pw0: .875rem; }
}

/* the street: one ground line, balanced lines, windows sized by the widest line */
.street-br { flex: 0 0 100%; height: 0; }
.facade--draft.facade--street .facade__sheet, .su .facade--draft.facade--street .facade__sheet, .wiz .facade--draft.facade--street .facade__sheet {
  --b-pad: 30px; --street-gap: 1.75rem; --fw-min: 8px; --fw-max: 28px; --street-fixed: 5rem;
  --fw: clamp(var(--fw-min), calc((100cqi - var(--street-fixed) - var(--tb, 1) * var(--b-pad) - (var(--tb, 1) - 1) * var(--street-gap) - (var(--ts, 1) - var(--tb, 1)) * 8px) / (1.27 * var(--tc, 6) + .27 * var(--ts, 1) - .54 * var(--tb, 1))), var(--fw-max));
  --fgap: max(2px, calc(var(--fw) * .27)); --pad: calc(var(--b-pad) / 2);
}
.facade--street .facade__drawing { align-items: flex-end; align-content: flex-end; justify-content: center; column-gap: var(--street-gap); row-gap: var(--space-4); }
.facade--street .fac-b__machine { width: min(4.5rem, 50%); }
/* a paritalo is about two floors of the street's windows tall, never a shed beside them */
.facade--street .fac-pp { --pw0: clamp(1rem, var(--fw) * 3, 2.5rem); }
/* the rappu doors follow their windows: a fixed 2 rem door made a phone street wider
   than the --fw formula counts, so its last building wrapped (talot QA, 390 px) */
.facade--street .fac-door { min-width: 0; padding: 0 .1875rem; }
.facade--street .fac-h { width: auto; flex: 1 1 100%; }
.facade--street .fw__no { display: none; }
.facade--street .fw { gap: 0; }
@media (max-width: 63.99rem) {
  .facade--draft.facade--street .facade__sheet, .su .facade--draft.facade--street .facade__sheet, .wiz .facade--draft.facade--street .facade__sheet { --b-pad: 14px; --street-gap: 1.25rem; --fw-min: 4px; --fw-max: 16px; --street-fixed: 3.25rem;
    /* the gap the --fw formula counts (.27 × fw): a 2 px floor made each building ~4 px wider
       than counted, so a full phone line wrapped 3 + 1 (talot QA, 390 px) */
    --fgap: max(1px, calc(var(--fw) * .27)); }
  .facade--street .fac-pp { --pw0: clamp(1rem, var(--fw) * 3, 1.375rem); }
  /* phones: the whole street stays in view (the one-building caps clip a street) */
  .su .facade--street .facade__drawing, .wiz .facade--street .facade__drawing { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
}