/* =============================================================================
   areas/register.css: Talo register, apartment hub, detector pages, building
   and yhtiö forms (WP3, spec E9-E12). Tokens only; no new colours.
   ========================================================================== */
@layer areas {

/* Shown only without JS (the "Näytä huoneistot" / "Valitse" buttons) */
html.js .reg-nojs { display: none !important; }

/* ---------------------------------------------------------------- toolbar */
.reg-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.reg-toolbar .chips { margin: 0; flex: 1 1 24rem; }
.reg-toggle { display: inline-flex; flex: none; border: var(--border-w-control) solid var(--color-border-control); border-radius: var(--radius-control); overflow: hidden; background: var(--color-surface); }
.reg-toggle__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h-min); padding: 0 var(--space-4);
  color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: none;
}
.reg-toggle__link + .reg-toggle__link { border-left: 1px solid var(--color-border-control); }
.reg-toggle__link:hover { text-decoration: underline; }
.reg-toggle__link[aria-current="page"] { background: var(--color-surface-selected); color: var(--color-action-active); box-shadow: inset 0 -3px 0 var(--color-action); }

/* ---------------------------------------------------------------- setup card */
.reg-setup { margin-bottom: var(--space-5); border-color: var(--status-attn-line); }
.reg-setup .card__title { font-size: var(--text-md); }
.reg-setup p { margin: 0 0 var(--space-4); }

/* ---------------------------------------------------------------- groups */
.reg-list { display: flex; flex-direction: column; gap: var(--space-6); }
.reg-group { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.reg-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.reg-group__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.reg-group__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }
.reg-group__empty { margin: 0 0 var(--space-3); }
.reg-stair + .reg-stair { margin-top: var(--space-5); }
.reg-stair__title { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.reg-stair__count { font-size: var(--text-sm); font-weight: var(--weight-regular); }
.reg-filter-empty { margin: var(--space-4) 0; }
.reg-intro { max-width: var(--measure); margin: 0 0 var(--space-5); }
.reg-note { display: flex; align-items: flex-start; gap: var(--space-2); max-width: var(--measure); margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.reg-legend { margin-top: var(--space-4); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- tables */
.reg-table tbody th { font-size: var(--text-base); font-weight: var(--weight-semibold); border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-3); vertical-align: top; }
.reg-table tbody th a, .reg-row__link { font-size: var(--text-md); font-weight: var(--weight-bold); }
.reg-row { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.reg-row:target { background: var(--color-surface-selected); }
.reg-row__state .pill { margin-bottom: var(--space-1); }
.reg-row__add { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h-min); font-weight: var(--weight-semibold); }
.reg-row--voided td, .reg-row--voided th { color: var(--color-text-muted); }
.reg-row--voided td:nth-child(2) { text-decoration: line-through; text-decoration-thickness: 1px; }
.reg-voided { display: block; font-size: var(--text-sm); text-decoration: none; }
.reg-cell--attn { color: var(--status-attn-fg); font-weight: var(--weight-semibold); }
.reg-cell--attn .icon { color: var(--status-attn-line); }
@container table (max-width: 40rem) {
  .reg-table tbody th { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: var(--space-3); width: 100%; border: 0; padding: var(--space-1) 0 var(--space-2); }
  .reg-table tbody th[data-label]::before { content: attr(data-label); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); align-self: center; }
  .reg-table .inline-edit__form .input { flex-basis: 8rem; }
  /* A cell with several parts (state pill + markers, "Ei asukastietoja" + add link)
     keeps every part in the value column; the label column holds only the label. */
  .reg-table td[data-label] > :not(br) { grid-column: 2; justify-self: start; min-width: 0; }
  .reg-table td[data-label] > br { display: none; }
}

/* markers (always icon + word) */
.reg-markers { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.reg-marker { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--status-attn-fg); }
.reg-marker .icon { color: var(--status-attn-line); }
.reg-marker--unconfirmed, .reg-marker--notice, .reg-marker--retest { color: var(--color-text-muted); }
.reg-marker--unconfirmed .icon, .reg-marker--notice .icon, .reg-marker--retest .icon { color: var(--color-text-muted); }
.reg-marker--fault, .reg-marker--missing { color: var(--status-problem-fg); }
.reg-marker--fault .icon, .reg-marker--missing .icon { color: var(--status-problem-fg); }

/* m² inline edit: the unit belongs to the number ("54,5 m²" then the pencil), so it is drawn
   after the value text; it survives the inline save, which re-renders only .inline-edit. */
.reg-area { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); max-width: 100%; }
.reg-area .inline-edit { max-width: 100%; }
.reg-area .inline-edit__text { white-space: nowrap; }
.reg-area .inline-edit__text::after { content: "\00a0m²"; }

/* tiles (Ruudukko) */
.reg-tiles { margin-bottom: var(--space-2); }
.reg-tile { display: flex; min-width: 0; }
.reg-tile > .tile { flex: 1 1 auto; min-width: 0; }
.reg-tile[hidden] { display: none; }

/* page foot links */
.reg-foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.reg-foot__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-min); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: .18em; }

/* ---------------------------------------------------------------- apartment hub */
.reg-where { color: var(--color-text-muted); font-size: var(--text-base); }
.reg-faultbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-4);
  border: 0; box-shadow: inset 0 0 0 1.5px var(--status-problem-fg); border-radius: var(--radius-card);
  background: var(--status-problem-bg);
}
.reg-faultbox__icon { width: 1.75rem; height: 1.75rem; color: var(--status-problem-fg); flex: none; }
.reg-faultbox__text { flex: 1 1 16rem; margin: 0; }
.reg-faultbox__meta { display: block; font-size: var(--text-sm); color: var(--color-text); }
/* Open round, no answer yet: the paper notice for this apartment */
.reg-noticebox {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-4);
  border: 0; border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.reg-noticebox__icon { width: 1.75rem; height: 1.75rem; color: var(--status-wait-fg); flex: none; }
.reg-noticebox__text { flex: 1 1 16rem; margin: 0; }
.reg-noticebox__why { display: block; font-size: var(--text-sm); color: var(--color-text); }
.reg-hub { margin-top: var(--space-2); }
.reg-hub__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-4); }
.reg-hub__empty { margin: 0 0 var(--space-4); }
.reg-hub__add { margin: var(--space-4) 0 0; }
.reg-alarms { display: flex; flex-direction: column; gap: var(--space-3); }
.reg-alarm { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.reg-alarm:last-child { border-bottom: 0; padding-bottom: 0; }
.reg-alarm:target .alarm-row { outline: 3px solid var(--color-action); outline-offset: 4px; border-radius: var(--radius-control); }
.reg-alarm__actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }
.reg-alarm__note { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.reg-inline-form { display: inline; margin: 0; }
.reg-formula { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.reg-formula summary { cursor: pointer; min-height: var(--control-h-min); display: flex; align-items: center; color: var(--color-link); font-weight: var(--weight-semibold); }
.reg-formula p { margin: var(--space-1) 0 0; max-width: var(--measure); }

/* Kirjaustapa */
.reg-method { margin: 0 0 var(--space-4); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.reg-method .method-pick { margin-bottom: var(--space-2); }
.reg-method .field__error[hidden] { display: none; }

/* timeline */
.reg-timeline { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--color-border-subtle); }
.reg-timeline__item { position: relative; display: flex; gap: var(--space-3); padding: var(--space-2) 0 var(--space-3) var(--space-4); }
.reg-timeline__icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .15em; color: var(--color-text-muted); }
.reg-timeline__body { min-width: 0; overflow-wrap: anywhere; }
.reg-timeline__when { display: block; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.reg-timeline__item--voided .reg-timeline__body > a, .reg-timeline__item--voided .reg-timeline__body > span:not(.reg-timeline__when):not(.muted) { text-decoration: line-through; }

/* residents */
.reg-residents { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.reg-resident + .reg-resident { padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.reg-resident__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.reg-resident__role { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
/* An e-mail breaks only after "@" (the <wbr> there), never inside a word; break-word is
   the last resort for an address too long for the column. */
.reg-resident__line { margin: 0; overflow-wrap: break-word; }
.reg-residents .inline-edit__value { min-width: 0; overflow-wrap: break-word; }
.reg-resident__hint { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.reg-resident__links { margin: var(--space-1) 0 0; gap: var(--space-1); }
.reg-resident__former { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.reg-residents .inline-edit { display: flex; width: 100%; }

.reg-facts { grid-template-columns: minmax(7rem, max-content) 1fr; align-items: center; }
.reg-facts dd .inline-edit { max-width: 100%; }
/* The details card sits in the narrow side column: there a max-content label column squeezed the values
   to one letter per line. Narrow card = label above value, like the phone layout. */
.reg-details { container-type: inline-size; }
.reg-facts dd { overflow-wrap: break-word; min-width: 0; }
@container (max-width: 30rem) {
    .reg-details .reg-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .reg-details .reg-facts dt { margin-top: var(--space-3); }
    .reg-details .reg-facts dt:first-of-type { margin-top: 0; }
}

/* archive / danger zone: quiet, never red until a dialog asks */
.reg-danger { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.reg-danger .section__title { font-size: var(--text-md); }
.reg-danger p { max-width: var(--measure); }

/* files */
.reg-files { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.reg-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }
.reg-file__delete summary { cursor: pointer; min-height: var(--control-h-min); display: inline-flex; align-items: center; color: var(--color-link); text-decoration: underline; }
.reg-file__delete form { margin-top: var(--space-2); }
.reg-upload { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }

/* ---------------------------------------------------------------- forms */
.reg-form { max-width: 48rem; }
/* Fields side by side keep their inputs on one line even when only one has a hint (align end),
   and a short field is as wide as its label, so "Kerroksia asunnossa (yleensä 1)" stays on one
   line; its input stays short. */
.reg-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--space-4); }
.reg-form-row > .field { flex: 1 1 14rem; }
.reg-form-row > .reg-field--short { flex: 0 1 auto; max-width: 100%; }
.reg-form-row > .reg-field--short > .input, .reg-form-row > .reg-field--short > .reg-input-suffix { width: 10rem; max-width: 100%; }
.reg-form-row > .reg-field--medium { flex: 0 1 16rem; }
.reg-field--short { max-width: 10rem; }
.reg-field--medium { max-width: 18rem; }
.reg-field--check { display: flex; align-items: flex-end; flex: 1 1 12rem; }
.reg-check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); font-weight: var(--weight-semibold); cursor: pointer; }
.reg-check input { width: 1.375rem; height: 1.375rem; accent-color: var(--color-action); }
.reg-input-suffix { display: flex; align-items: center; gap: var(--space-2); }
.reg-input-suffix .input { flex: 1 1 auto; min-width: 0; }
.reg-input-suffix__text { flex: none; color: var(--color-text-muted); }
.reg-install { border: 0; margin: 0 0 var(--space-2); padding: 0; min-width: 0; }
.reg-install legend { padding: 0; }
.reg-more { margin: 0 0 var(--space-5); }
.reg-more summary { cursor: pointer; min-height: var(--control-h-min); display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-link); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: .18em; }
.reg-more__body { padding-top: var(--space-3); }
.reg-example { margin: 0 0 var(--space-5); }
.reg-example__pre { margin: 0; padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.reg-type-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.reg-numbers-preview { min-height: 1.5rem; margin: calc(var(--space-3) * -1) 0 var(--space-4); max-width: var(--measure); overflow-wrap: anywhere; }
.reg-numbers-preview p { margin: 0; }
.reg-required-live { margin: calc(var(--space-3) * -1) 0 var(--space-4); }
.reg-required-live:empty { display: none; }

/* building preview */
.reg-building .card + .card { margin-top: var(--space-4); }
.reg-preview { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.reg-preview .table-wrap { margin: var(--space-3) 0; }
.reg-preview__table td, .reg-preview__table th { padding: var(--space-2) var(--space-3); }
.reg-preview__table .input { min-height: var(--control-h-min); padding: .375rem .625rem; }
.reg-input--num { min-width: 6rem; }
.reg-input--stair { max-width: 6rem; }
.reg-input--area { max-width: 7rem; }
.reg-input--floors { max-width: 5rem; }
.reg-preview__formula { font-size: var(--text-sm); }
.reg-paste { margin: var(--space-3) 0; }
.reg-paste summary { cursor: pointer; min-height: var(--control-h-min); display: inline-flex; align-items: center; color: var(--color-link); font-weight: var(--weight-semibold); text-decoration: underline; }
.reg-paste .field { margin-top: var(--space-3); }
@container table (max-width: 40rem) {
  .reg-preview__table td { align-items: center; }
  .reg-input--num, .reg-input--stair, .reg-input--area, .reg-input--floors { max-width: none; }
}

/* omakotitalo without its home in use (talo edit, Lisää koti): the note the
   error summary links to */
.reg-house-note { margin-bottom: var(--space-5); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }

/* talo edit: rapput */
.reg-stairs .row { flex-wrap: wrap; }
.reg-stair-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1 1 16rem; }
.reg-stair-form .input { width: auto; flex: 0 1 8rem; }
.reg-stair-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-4); }
.reg-stair-add .field { margin: 0; }

/* setup */
.reg-setup-form__list { margin-top: calc(var(--space-2) * -1); }

}