/* =====================================================================================================================
   The talo component (WP0, views/landing/v9/_talo.php). The app's facade drawing (public/css/app/areas/home.css)
   with filled, softly rounded shapes: wall, roof and ground are fills, never outlines; an outline on a window only
   ever means "not tested yet". States sit on data-s, marks on data-m, so an inline script can set the first frame
   before paint and V9.Talo.set() animates the rest. Labels are 16 px or more, or hidden (sm).
   Tokens: tested = solid Kuusi #1F4D47; waiting = white with a 2 px #6B7773 ring (4.3:1 on the wall); not reached =
   3 px amber #B87516 ring + amber corner; paper notice ready = grey ring + folded grey corner; envelope = reminder.
   ===================================================================================================================== */
.tl9 {
  --tl9-wall: #F3F6F4; --tl9-roof: #E3E9E6; --tl9-roof-2: #D5DDD9; --tl9-ground: #C6D0CB; --tl9-house-roof: #C6D0CB;
  --tl9-ok: #1F4D47; --tl9-wait: #6B7773; --tl9-attn: #B87516; --tl9-attn-tx: #844A00; --tl9-ink: #1A2225; --tl9-ink-2: #3B4549;
  --tl9-ease: cubic-bezier(.2, .8, .2, 1);
  /* xl (the hero): windows 80 x 34, labels 16 px */
  --uw0: 80px; --uhr: .425; --ur: 7px; --gx: 18px; --gy: 12px; --pad: 18px; --lab: 16px; --labgap: 6px;
  --mk: 28px; --wr: 14px; --roof: 14px; --door-w: 46px; --door-h: 40px; --door-fs: 18px;
  --rdoor-w: 26px; --rdoor-h: 34px; --hw0: 104px;
  /* the drawing fits its column: windows (houses) shrink below their size when the column is narrower; --cols is set
     on the figure. The figure is an inline-size container, so it never sizes from its content: --nat is its natural
     width (max-width and the intrinsic width in a shrink-to-fit parent). */
  --uw: min(var(--uw0), calc((100cqi - (var(--cols, 3) - 1) * var(--gx) - var(--pad) * 4.4) / var(--cols, 3)));
  --uh: calc(var(--uw) * var(--uhr));
  --hw: min(var(--hw0), calc((100cqi - 14px) / (var(--cols, 3) * 1.36 - .36)));
  --nat: calc(var(--cols, 3) * var(--uw0) + (var(--cols, 3) - 1) * var(--gx) + var(--pad) * 4.4);
  container-type: inline-size; width: 100%; max-width: max(var(--nat), var(--tl9-min, 0px)); contain-intrinsic-inline-size: max(var(--nat), var(--tl9-min, 0px));
  margin: 0 auto; min-width: 0; display: flex; flex-direction: column; align-items: center;
  font-family: "Geologica", "Geologica fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums; color: var(--tl9-ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tl9--md { --uw0: 56px; --uhr: .43; --ur: 5px; --gx: 12px; --gy: 9px; --pad: 14px; --lab: 16px; --labgap: 4px;
  --mk: 22px; --wr: 11px; --roof: 10px; --door-w: 36px; --door-h: 30px; --door-fs: 16px; --rdoor-w: 18px; --rdoor-h: 24px; --hw0: 68px; }
.tl9--sm { --uw0: 26px; --uhr: .5; --ur: 3px; --gx: 6px; --gy: 6px; --pad: 8px; --lab: 0px; --labgap: 0px;
  --mk: 14px; --wr: 6px; --roof: 6px; --door-w: 16px; --door-h: 14px; --door-fs: 0px; --rdoor-w: 8px; --rdoor-h: 10px; --hw0: 36px; }
.tl9:has(.tl9__legend) { --tl9-min: 26rem; }
.tl9--sm:has(.tl9__legend) { --tl9-min: 20rem; }
.tl9__draw { display: flex; justify-content: center; max-width: 100%; }

/* ---------------------------------------------------------------- a window (every home) */
.tl9-u { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--labgap); width: var(--uw); flex: none; }
.tl9-u--gap { height: var(--uh); }
.tl9-u__w {
  position: relative; display: block; width: 100%; height: var(--uh); overflow: hidden;
  border-radius: var(--ur); background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--tl9-wait);
}
.tl9-u__f {
  position: absolute; inset: 0; background: var(--tl9-ok);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform 260ms var(--tl9-ease);
}
.tl9-u[data-s="ok"] .tl9-u__f { transform: none; }
.tl9-u[data-s="part"] .tl9-u__f { transform: scaleY(.5); }
.tl9-u[data-s="unreached"] .tl9-u__w { box-shadow: inset 0 0 0 3px var(--tl9-attn); }
.tl9-u[data-s="unreached"] .tl9-u__w::after,
.tl9-u[data-s="paper"] .tl9-u__w::after {
  content: ""; position: absolute; top: 0; right: 0; width: calc(var(--uh) * .36); height: calc(var(--uh) * .36);
  background: linear-gradient(225deg, var(--tl9-attn) 50%, transparent 50%); border-top-right-radius: var(--ur);
}
.tl9-u[data-s="paper"] .tl9-u__w::after { background: linear-gradient(225deg, var(--tl9-wait) 50%, transparent 50%); }
.tl9-u[data-s="none"] .tl9-u__w { background: var(--tl9-roof); box-shadow: none; }
.tl9-u__no { font-variant-numeric: proportional-nums;
  font-size: var(--lab); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--tl9-ink);
  transition: color 180ms linear;
}
.tl9-u[data-s="unreached"] .tl9-u__no { color: var(--tl9-attn-tx); }
.tl9-u.is-hl .tl9-u__w { outline: 2.5px solid var(--tl9-ink); outline-offset: 3px; }

/* marks: a reminder envelope or a handed-out notice on the window's top right corner; entering starts at .35 */
.tl9-u__m {
  position: absolute; z-index: 2; top: calc(var(--mk) / -2 + 3px); left: calc(var(--uw) - var(--mk) / 2 - 3px);
  width: var(--mk); height: var(--mk); border-radius: calc(var(--mk) * .28);
  background: #FFFFFF; box-shadow: 0 1px 2px rgb(26 34 37 / .16), 0 3px 8px -2px rgb(26 34 37 / .22), inset 0 0 0 1px rgb(26 34 37 / .08);
  visibility: hidden; opacity: .35; transform: scale(.82);
  transition: opacity 180ms var(--tl9-ease), transform 220ms var(--tl9-ease), visibility 0s linear 220ms;
}
.tl9-u__m::before {
  content: ""; position: absolute; inset: 14%; background: var(--tl9-ink);
  -webkit-mask: var(--tl9-icon) center / contain no-repeat; mask: var(--tl9-icon) center / contain no-repeat;
}
.tl9-u[data-m="mail"] .tl9-u__m, .tl9-u[data-m="notice"] .tl9-u__m {
  visibility: visible; opacity: 1; transform: none; transition: opacity 180ms var(--tl9-ease), transform 220ms var(--tl9-ease), visibility 0s;
}
.tl9-u[data-m="mail"] .tl9-u__m { --tl9-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M4 7.5l8 6 8-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tl9-u[data-m="notice"] .tl9-u__m { --tl9-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2.5h8.5L19 7v14.5H6z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M14 2.8V7.5h4.6M9 12h7M9 16h7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tl9--sm .tl9-u__m { box-shadow: 0 1px 2px rgb(26 34 37 / .2); }

/* ---------------------------------------------------------------- kerrostalo: roof, wall of floors, plinth with the door */
.tl9__bldg { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.tl9__roof {
  position: relative; display: block; height: var(--roof); margin: 0 calc(var(--wr) * -.45);
  border-radius: var(--wr) var(--wr) 4px 4px; background: var(--tl9-roof);
}
.tl9__mach {
  position: absolute; left: 50%; bottom: 100%; width: calc(var(--uw) * 1.1); height: calc(var(--roof) * 1.15);
  transform: translateX(-50%); border-radius: calc(var(--wr) * .6) calc(var(--wr) * .6) 0 0; background: var(--tl9-roof);
}
.tl9__wall {
  display: flex; flex-direction: column; gap: var(--gy); padding: var(--pad) var(--pad) calc(var(--pad) * .8);
  background: var(--tl9-wall);
}
.tl9__floor { display: flex; gap: var(--gx); justify-content: center; }
.tl9__plinth { display: flex; justify-content: center; align-items: flex-end; height: calc(var(--door-h) + var(--pad) * .4); background: var(--tl9-wall); }
.tl9__door {
  display: grid; place-items: center; width: var(--door-w); height: var(--door-h);
  border-radius: calc(var(--wr) * .7) calc(var(--wr) * .7) 0 0; background: var(--tl9-roof-2);
  font-size: var(--door-fs); font-weight: 700; line-height: 1; color: var(--tl9-ink);
}
.tl9__ground { display: block; height: 4px; margin: 0 calc(var(--pad) * -1.2); border-radius: 2px; background: var(--tl9-ground); }

/* floor labels (.tl9--floors, the hero adds them): "6 krs" … "1 krs" in a column at the left of the wall, as the
   app's facade draws them; the door stays centred under the windows. When the drawing is too narrow for the column
   (phones under about 300 px of drawing) the labels go and the windows take the room back. */
.tl9--floors {
  --lvl: 52px; --lvl-fs: var(--lab);
  --uw: min(var(--uw0), calc((100cqi - (var(--cols, 3) - 1) * var(--gx) - var(--pad) * 4.4 - var(--lvl) - var(--gx)) / var(--cols, 3)));
  --nat: calc(var(--cols, 3) * var(--uw0) + (var(--cols, 3) - 1) * var(--gx) + var(--pad) * 4.4 + var(--lvl) + var(--gx));
}
.tl9--floors .tl9__floor { justify-content: flex-start; }
.tl9__lvl {
  flex: none; align-self: flex-start; display: flex; align-items: center; width: var(--lvl); height: var(--uh); margin-right: 0;
  font-size: var(--lvl-fs); font-weight: 500; line-height: 1; white-space: nowrap; color: var(--tl9-ink-2); font-variant-numeric: proportional-nums;
}
.tl9--floors .tl9__plinth { padding-left: calc(var(--lvl) + var(--gx)); }
@container (max-width: 299px) {
  .tl9--floors .tl9__lvl { display: none; }
  .tl9--floors .tl9__plinth { padding-left: 0; }
  .tl9--floors .tl9__floor { justify-content: center; }
  .tl9--floors .tl9-u {
    --uw: min(var(--uw0), calc((100cqi - (var(--cols, 3) - 1) * var(--gx) - var(--pad) * 4.4) / var(--cols, 3)));
    --uh: calc(var(--uw) * var(--uhr));
  }
}

/* ---------------------------------------------------------------- rivitalo: low row houses with a door under each window */
.tl9--rivitalo { --labh: calc(var(--lab) * 1.2 + 9px); }
.tl9--sm.tl9--rivitalo { --labh: 0px; }
.tl9__rows { display: flex; flex-direction: column; align-items: center; gap: calc(var(--gy) * 2.6); }
.tl9__row { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.tl9__rroof {
  display: block; height: calc(var(--roof) * 2.1); margin: 0 calc(var(--pad) * -.55);
  background: var(--tl9-roof); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  border-radius: 4px 4px 0 0;
}
.tl9__rwall { position: relative; display: flex; gap: var(--gx); padding: var(--pad) var(--pad) 0; }
.tl9__rwall::before { content: ""; position: absolute; z-index: -1; inset: 0 0 var(--labh) 0; background: var(--tl9-wall); }
.tl9 .tl9__rwall { isolation: isolate; }
.tl9--rivitalo .tl9-u { gap: 0; }
.tl9__rdoor {
  display: block; width: var(--rdoor-w); height: var(--rdoor-h); margin-top: calc(var(--gy) * .9);
  align-self: flex-start; margin-left: calc(var(--uw) * .12);
  border-radius: calc(var(--wr) * .5) calc(var(--wr) * .5) 0 0; background: var(--tl9-roof-2);
}
.tl9--rivitalo .tl9-u__no, .tl9--omakotitalot .tl9-u__no {
  display: block; align-self: stretch; height: var(--labh, auto); margin: 0 calc(var(--gx) / -2); padding-top: 6px;
  border-top: 4px solid var(--tl9-ground); text-align: center;
}
.tl9--rivitalo .tl9-u:first-child .tl9-u__no { margin-left: calc(var(--pad) * -1.1); }
.tl9--rivitalo .tl9-u:last-child .tl9-u__no { margin-right: calc(var(--pad) * -1.1); }
.tl9--sm.tl9--rivitalo .tl9__rwall::after { content: ""; position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); bottom: -3px; height: 3px; border-radius: 2px; background: var(--tl9-ground); }

/* ---------------------------------------------------------------- omakotitalot: a street of small houses, one home each */
.tl9--omakotitalot { --nat: calc(var(--cols, 3) * var(--hw0) * 1.36 - var(--hw0) * .36 + 14px); --uw: var(--hw); --uh: calc(var(--hw) * .6); --ur: 3px; --hgap: calc(var(--hw) * .36); --labh: calc(var(--lab) * 1.2 + 10px); }
.tl9--sm.tl9--omakotitalot { --labh: 4px; }
.tl9__street {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--hcols), var(--hw));
  justify-content: center; column-gap: var(--hgap); row-gap: calc(var(--hw) * .26);
}
.tl9__lot { display: flex; flex-direction: column; align-items: center; }
.tl9__hroof {
  display: block; width: calc(var(--hw) + 10px); height: calc(var(--hw) * .42); margin-bottom: -1px;
  background: var(--tl9-house-roof); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tl9--omakotitalot .tl9-u { gap: 0; }
.tl9--omakotitalot .tl9-u__w { border-radius: 0 0 var(--ur) var(--ur); }
.tl9__hdoor {
  position: absolute; z-index: 1; left: 50%; bottom: 0; width: 26%; height: 50%; transform: translateX(-50%);
  border-radius: 4px 4px 0 0; background: var(--tl9-house-roof);
}
.tl9-u[data-s="ok"] .tl9__hdoor { background: rgb(255 255 255 / .5); transition: background-color 120ms linear 140ms; }
.tl9--omakotitalot .tl9-u__m { top: calc(var(--mk) / -2 + 4px); }
.tl9--sm.tl9--omakotitalot .tl9-u::after { content: ""; display: block; align-self: stretch; height: 3px; margin: 0 calc(var(--hgap) / -2); background: var(--tl9-ground); }

/* ---------------------------------------------------------------- tag line, legend */
.tl9__tag {
  display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 14px 0 0;
  font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--tl9-ink);
}
.tl9__tagt {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 10px;
  background: #E0EDE7; color: var(--tl9-ok); white-space: nowrap;
  opacity: .35; transform: translateY(4px); visibility: hidden;
  transition: opacity 180ms var(--tl9-ease), transform 220ms var(--tl9-ease), visibility 0s linear 220ms;
}
.tl9__tag.is-on .tl9__tagt { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms var(--tl9-ease), transform 220ms var(--tl9-ease), visibility 0s; }
.tl9__legend {
  list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 16px; line-height: 1.3; color: var(--tl9-ink);
}
.tl9__legend li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tl9__n { font-weight: 600; }
.tl9-key {
  position: relative; display: inline-block; width: 18px; height: 14px; flex: none; overflow: hidden;
  border-radius: 3px; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--tl9-wait);
}
.tl9-key--ok { background: var(--tl9-ok); box-shadow: none; }
.tl9-key--unreached { box-shadow: inset 0 0 0 2.5px var(--tl9-attn); }
.tl9-key--unreached::after { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 6px; background: linear-gradient(225deg, var(--tl9-attn) 50%, transparent 50%); }

/* instant changes (first frame, a jump to a step, a type switch) and reduced motion: no fill or mark animation */
.tl9--instant .tl9-u__f, .tl9--instant .tl9-u__m, .tl9--instant .tl9__tagt, .tl9--instant .tl9-u__no, .tl9--instant .tl9__hdoor { transition: none !important; }
html.rm .tl9-u__f, html.rm .tl9-u__m, html.rm .tl9__tagt, html.rm .tl9-u__no { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .tl9-u__f, .tl9-u__m, .tl9__tagt, .tl9-u__no { transition: none !important; } }