/* =====================================================================================================================
   WP2: "Näin Alarmi toimii taloyhtiössä" (#nain), v9-spec.md §2.2. Prefix .f9. Tokens only from base.css :root.
   ≥ 1200: steps in the left 5 columns, a sticky sheet in the right 7 (top 96 px) with the active step's clip. The sheet
   starts at 1200 because the stills are cut from 580-600 css px of app: from there the app's 15 px text shows at 15 px+.
   < 1200: an accordion with one row open; the open row shows its own clip (4:5 below 768).
   Each step's top edge is a 3 px track; the active step's track fills in Kuusi, synced to its clip (features.js).
   Contrast: titles text #1A2225 / text-2 #3B4549 on the page 14.1 / 8.6; number muted #525D5A 6.0; Kuusi 8.3.
   ===================================================================================================================== */

.f9__grid { align-items: start; }
.f9__steps { counter-reset: none; }

/* ------------------------------------------------------------------------------------------------ a step row */
.f9__step > summary { list-style: none; }
.f9__step > summary::-webkit-details-marker { display: none; }
.f9__sum {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 28px; column-gap: 12px; align-items: start;
  padding: 18px 0 16px; cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent;
}
.f9__sum:focus-visible { outline-offset: 6px; }
.f9__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; border-radius: 2px;
  background: var(--color-border-subtle);
}
.f9__fill {
  display: block; height: 100%; border-radius: inherit; background: var(--color-action);
  transform: scaleX(0); transform-origin: 0 50%;
}
.f9__step[open] .f9__fill { transform: scaleX(1); }
.f9__no {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.f9__step[open] .f9__no { color: var(--color-action); }
.f9__txt { min-width: 0; }
.f9__h {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.012em;
  color: var(--color-text); text-wrap: balance;
}
.f9__one { display: none; margin-top: 8px; font-size: var(--v9-fs-body); line-height: 1.55; color: var(--color-text-2); text-wrap: pretty; }
.f9__step[open] .f9__one { display: block; }
.f9__chev {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: -1px; color: var(--color-text);
  transition: transform var(--dur) var(--ease-out);
}
.f9__chev svg { width: 20px; height: 20px; }
.f9__step[open] .f9__chev { transform: rotate(180deg); }

.f9__body { padding: 4px 0 28px; }
.f9__clip--row { margin: 4px 0 20px; }
/* tablet and small laptop: the picture stays at a readable size instead of filling a 900 px row */
@media (min-width: 48rem) { .f9__clip--row { max-width: 720px; } }
.f9__clip--row .cl9__frame { box-shadow: var(--shadow-card); }
/* phones: the one-liner above says what the clip shows, so its caption is for screen readers only */
@media (max-width: 47.99rem) {
  .f9__clip--row .cl9__cap {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.f9__facts { display: grid; gap: 10px; }
.f9__facts li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start;
  font-size: var(--v9-fs-small); line-height: 1.55; color: var(--color-text);
}
.f9__tick { width: 20px; height: 20px; margin-top: 2px; color: var(--color-action); }
.f9__go { margin-top: 14px; color: var(--color-link); font-weight: 600; text-decoration: none; }
.f9__go:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* A step with no clip, poster or still: the talo drawing stands in (the frame stays finished). */
.f9__fb { display: grid; place-items: center; width: 100%; height: 100%; padding: 6% 8%; background: var(--color-surface-sunken); }
.f9__fb > * { width: 100%; max-height: 100%; }

/* ------------------------------------------------------------------------------------------------ the sticky sheet */
.f9__stage { display: none; }
.f9__sheet { padding: 12px; }
.f9__shots { display: grid; }
.f9__shot {
  grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0;
  /* the outgoing shot stays under the incoming one until its fade-in has finished */
  transition: opacity 0s linear 240ms, visibility 0s linear 240ms;
}
.f9__clip--sheet { --cl9-r: 12px; }
.f9__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 14px 8px 4px;
  font-size: var(--v9-fs-small); line-height: 1.5; color: var(--color-text-2);
}
.f9__of { flex: none; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* the pause/replay button sits in the caption row under the picture, beside "1/6", never on the app (round 2: on the
   picture it covered the "Käyn itse ovelta ovelle" box); the same in the row clips from 768 px (phones: base.css) */
.f9__clip--sheet .cl9__frame { overflow: visible; }
.f9__clip--sheet .cl9__poster, .f9__clip--sheet .cl9__video { border-radius: inherit; overflow: hidden; }
.f9__clip--sheet .cl9__btn { top: calc(100% + 10px); bottom: auto; right: 4px; }
html.js .f9__cap { min-height: 58px; padding-right: 64px; }
@media (min-width: 48rem) {
  .f9__clip--row .cl9__frame { overflow: visible; }
  .f9__clip--row .cl9__poster, .f9__clip--row .cl9__video { border-radius: inherit; overflow: hidden; }
  .f9__clip--row .cl9__btn { top: calc(100% + 10px); bottom: auto; right: 0; }
  html.js .f9__clip--row .cl9__cap { min-height: 44px; margin-top: 10px; padding: 10px 60px 0 2px; }
}

/* the shot that matches the open step: JS sets data-active; without JS the open <details> decides (:has) */
.f9[data-active="1"] .f9__shot[data-step="1"], .f9[data-active="2"] .f9__shot[data-step="2"],
.f9[data-active="3"] .f9__shot[data-step="3"], .f9[data-active="4"] .f9__shot[data-step="4"],
.f9[data-active="5"] .f9__shot[data-step="5"], .f9[data-active="6"] .f9__shot[data-step="6"],
.f9:not([data-active]):has(.f9__step[data-step="1"][open]) .f9__shot[data-step="1"],
.f9:not([data-active]):has(.f9__step[data-step="2"][open]) .f9__shot[data-step="2"],
.f9:not([data-active]):has(.f9__step[data-step="3"][open]) .f9__shot[data-step="3"],
.f9:not([data-active]):has(.f9__step[data-step="4"][open]) .f9__shot[data-step="4"],
.f9:not([data-active]):has(.f9__step[data-step="5"][open]) .f9__shot[data-step="5"],
.f9:not([data-active]):has(.f9__step[data-step="6"][open]) .f9__shot[data-step="6"],
.f9:not([data-active]):not(:has(.f9__step[open])) .f9__shot[data-step="1"] {
  z-index: 1; visibility: visible; opacity: 1; transition: none; animation: f9-in 240ms var(--ease-out);
}
@keyframes f9-in { from { opacity: .35; } }
/* the first paint never fades */
.f9:not(.is-ready) .f9__shot { animation: none !important; }

/* ------------------------------------------------------------------------------------------------ "Alarmissa on myös" */
.f9__more { position: relative; margin-top: 56px; padding-top: 32px; row-gap: 16px; }
.f9__more::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--color-border-subtle);
}
.f9__links { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--v9-gap); }
.f9__link {
  display: inline-flex; min-height: 44px; padding: 4px 0;
  font-weight: 600; font-size: var(--v9-fs-body); line-height: 1.35; color: var(--color-text); text-decoration: none;
}
.f9__link::after { color: var(--color-action); }
.f9__link:hover { color: var(--color-action); }
.f9__all { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
.f9__all-note { margin: 0; }

/* one column on phones (two columns of three-line labels read as clutter), two from 576 px */
@media (min-width: 36rem) { .f9__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------------------------------------ ≥ 768: tablet accordion */
@media (min-width: 48rem) {
  .f9__sum { grid-template-columns: 40px minmax(0, 1fr) 28px; column-gap: 16px; padding: 26px 0 22px; }
  .f9__no, .f9__h { font-size: 26px; }
  .f9__body { padding: 4px 0 32px 56px; }
  .f9__facts { gap: 12px; }
  .f9__facts li { font-size: 17px; }
  .f9__more { margin-top: 88px; padding-top: 40px; row-gap: 24px; }
  .f9__link { min-height: 48px; }
}

/* ------------------------------------------------------------------------------------------------ ≥ 1200: steps + sheet */
@media (min-width: 75rem) {
  .f9__steps { grid-column: 1 / span 5; }
  .f9__stage {
    display: block; grid-column: 6 / -1; position: sticky; top: calc(var(--v9-hd) + 24px); align-self: start;
  }
  .f9__clip--row { display: none; }
  .f9__sum { grid-template-columns: 44px minmax(0, 1fr) 28px; column-gap: 12px; padding: 22px 0 20px; }
  /* the open row needs no chevron; the others point right, at the sheet they switch */
  .f9__step[open] .f9__chev { display: none; }
  .f9__step:not([open]) .f9__chev { transform: rotate(-90deg); color: var(--color-action); }
  .f9__no, .f9__h { font-size: 24px; line-height: 1.2; }
  .f9__h, .f9__no { transition: color var(--dur) linear; }
  .f9__step:not([open]) .f9__h { color: var(--color-text-2); }
  .f9__step:not([open]) .f9__sum:hover .f9__h { color: var(--color-text); }
  .f9__step[open] .f9__no, .f9__step[open] .f9__h { font-size: 30px; line-height: 1.12; }
  .f9__step[open] .f9__sum { cursor: default; }
  /* the one-liner shows on every row on desktop */
  .f9__one { display: block; }
  .f9__body { padding: 4px 0 30px 56px; }
  .f9__facts { gap: 14px; }
  .f9__more { margin-top: 80px; padding-top: 40px; }
  .f9__link { min-height: 44px; }
  /* heading and button on the left, the eight links beside them: the block is as tall as the links alone */
  .f9__more { grid-template-rows: auto 1fr; }
  .f9__more-h { grid-column: 1 / span 5; grid-row: 1; }
  .f9__links { grid-column: 6 / -1; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f9__all { grid-column: 1 / span 5; grid-row: 2; align-self: start; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 8px; }
}

/* phones: a tighter head; the section has to stay short (Katso kaikki ominaisuudet within 3,500 px at 375) */
@media (max-width: 47.99rem) {
  .f9__head { margin-bottom: 28px; gap: 14px; }
  /* the button comes before the eight links on phones, so it is reached sooner */
  .f9__all { order: -1; margin-top: 0; margin-bottom: 24px; }
}