/* =============================================================================
   areas/faults.css: Viat (spec E14, WP7). Fault list filters, the fault page's
   next-step card, the three steps Uusi → Työn alla → Korjattu, photos, the
   resolve form. Status is always icon + word, never colour alone.
   ========================================================================== */
@layer areas {

/* ---------------------------------------------------------------- list */
.fault-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); }
.fault-filters__field { margin: 0; flex: 1 1 14rem; max-width: 22rem; }
.fault-filters__submit { flex: none; }
.fault-list .row { align-items: center; }
.fault-list .pill { flex: none; }
@media (max-width: 35.99rem) {
  .fault-row { flex-wrap: wrap; }
  .fault-row .row__main { flex-basis: calc(100% - 2.5rem); }
  .fault-row .pill { order: 3; margin-left: 0; }
  .fault-row .row__chevron { position: absolute; right: var(--space-3); top: var(--space-4); }
}

/* ---------------------------------------------------------------- fault page */
.fault-next { box-shadow: var(--shadow-card); }
.fault-next .actions { margin-top: var(--space-4); }
.fault-ack { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border-subtle); display: grid; gap: var(--space-3); justify-items: start; }
.fault-ack__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.fault-ack .muted { margin: 0; max-width: var(--measure); }
.fault-ack .choice, .resolve-notify .choice { width: 100%; max-width: 40rem; }

.fault-result .card__title { display: flex; align-items: center; gap: var(--space-2); }
.fault-result .card__title .icon { color: var(--status-ok-fg); }
.fault-result .facts { margin-top: var(--space-3); }
.fault-result__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; }
.fault-result__undo { margin-top: var(--space-3); }

/* message preview (Olen nähnyt, Merkitse korjatuksi, notify) */
.msg-preview { width: 100%; max-width: 40rem; }
.msg-preview > 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; text-underline-offset: .18em; }
.msg-preview[open] > summary { margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------- steps */
.fault-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fault-steps__item { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-3); padding-bottom: var(--space-5); }
.fault-steps__item:last-child { padding-bottom: 0; }
.fault-steps__item:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0;
  border-left: 2px solid var(--color-border-control);
}
.fault-steps__item--done:not(:last-child)::before { border-left-style: solid; border-left-color: var(--status-ok-line); }
.fault-steps__item--todo:not(:last-child)::before, .fault-steps__item--current:not(:last-child)::before { border-left-color: var(--color-border-subtle); }
.fault-steps__marker {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-tile); display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: var(--status-none-bg); color: var(--status-none-fg);
}
.fault-steps__item--done .fault-steps__marker { background: var(--color-action); color: var(--color-on-action); }
.fault-steps__item--current .fault-steps__marker { background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-action); color: var(--color-action); }
.fault-steps__item--todo .fault-steps__marker { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.fault-steps__body { min-width: 0; padding-top: .4rem; }
.fault-steps__label { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: var(--leading-tight); }
.fault-steps__state { font-weight: var(--weight-regular); font-size: var(--text-sm); color: var(--color-text-muted); }
.fault-steps__line { margin: var(--space-1) 0 0; color: var(--color-text-muted); overflow-wrap: anywhere; }
.fault-steps__item--todo .fault-steps__label { color: var(--color-text-muted); }

/* ---------------------------------------------------------------- photos */
.fault-photos { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); }
.fault-photos__item { display: grid; gap: var(--space-1); justify-items: start; }
.fault-photos__link { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius-tile); overflow: hidden; border: 0; background: var(--color-surface-sunken); }
.fault-photos__link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fault-photos__add { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-4); }
.fault-photos__add .field { margin: 0; }

/* ---------------------------------------------------------------- resolve */
.resolve-form .choices__list { max-width: 40rem; }
.resolve-replacement { border: 0; border-radius: var(--radius-card); padding: var(--space-4); margin: calc(var(--space-2) * -1) 0 var(--space-5); max-width: 40rem; background: var(--color-surface-sunken); }
.resolve-replacement > legend { padding: 0 var(--space-2); font-weight: var(--weight-semibold); }
.resolve-replacement .field { margin-bottom: var(--space-3); }
/* Shown only for "Varoitin vaihdettu uuteen"; browsers without :has() always show it. */
.resolve-replacement { display: none; }
.resolve-form:has(input[name="kind"][value="alarm_replaced"]:checked) .resolve-replacement { display: block; }
@supports not selector(:has(a)) { .resolve-replacement { display: block; } }
.resolve-notify { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.resolve-duplicate .prose { margin: 0 0 var(--space-3); }

/* ---------------------------------------------------------------- create */
@media (min-width: 36rem) { .fault-create__types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------- photo picker (file input) */
/* The native "choose files" button drawn as a Pinnat control: 8 px corners inside the 12 px field, 1.5 px edge, the app font. */
.fault-file { padding: .375rem .625rem .375rem .375rem; cursor: pointer; }
.fault-file::file-selector-button {
  min-height: 2.5rem; margin: 0 var(--space-3) 0 0; padding: 0 1rem;
  font: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  color: var(--color-text); background: var(--color-surface-sunken);
  border: var(--border-w-control) solid var(--color-border-control); border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (max-width: 36rem) { .fault-file::file-selector-button { padding: 0 .75rem; margin-right: var(--space-2); } }
.fault-file:hover::file-selector-button { border-color: var(--color-text-2); background: var(--color-surface); }

}