/* =====================================================================================================================
   v9 home §2.3 "Sama testaus Excelillä ja Alarmilla" #vertailu (WP3, views/landing/v9/_excel.php, js/v9/excel.js).
   One white stage sheet: six dates and one control on top, the spreadsheet left, Alarmi's building right, that date's
   rows under each pane. Then the tally sheet, the two "which fits" sheets and Joel's line.
   Colours only from base.css tokens. Text 16 px or more. Motion: the typed cell, the building's fill (talo.css),
   rows and lines entering from opacity .35, the date's 4 s progress line; transform and opacity only.
   Contrast (base.css table): ink on white 16.2, on sunken 13.1, on selected #DDE8E3 12.7; text-2 on white 9.8;
   muted on sunken 5.3 (column letters, row numbers); Kuusi on white 9.5.
   ===================================================================================================================== */
.x9 { --x9-step: 4000ms; --x9-row: 44px; }
@media (min-width: 64rem) { .x9-head { max-width: none; margin-bottom: 48px; } .x9-head .v9-lead { max-width: 54rem; } }

/* ---------------------------------------------------------------- the stage sheet */
.x9-stage { padding: 12px 12px 24px; }
@media (min-width: 48rem) { .x9-stage { padding: 32px; } }
@media (min-width: 64rem) { .x9-stage { padding: 40px 48px 44px; } }

/* the six dates and the control */
.x9-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.x9-days {
  flex: 1 1 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 3px;
  border-radius: 14px; background: var(--color-surface-sunken);
}
@media (min-width: 48rem) { .x9-bar { flex-wrap: nowrap; margin-bottom: 28px; } .x9-days { flex: 0 1 46rem; min-width: 0; gap: 4px; padding: 4px; } }
.x9-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 100%; min-height: 56px; padding: 7px 2px 12px; border: 0; border-radius: 11px; overflow: hidden;
  background: transparent; color: var(--color-text-2); font-size: 16px; line-height: 1.15; text-align: center;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur) linear;
}
@media (min-width: 48rem) { .x9-day { border-radius: 10px; } }
.x9-day:active:not([disabled]) { transform: scale(.97); }
.x9-day[disabled] { cursor: default; }
.x9-day:hover:not([disabled]):not([aria-pressed="true"]) { background: color-mix(in srgb, var(--color-surface) 55%, transparent); }
.x9-day__wd { font-weight: 400; }
.x9-day__dm { font-weight: 700; color: var(--color-text); white-space: nowrap; }
@media (max-width: 47.99rem) {
  .x9-days { margin-inline: -4px; gap: 2px; padding: 3px; }
  .x9-day__dm { font-weight: 600; font-variant-numeric: proportional-nums; letter-spacing: -.01em; }
}
/* under 360 px six dates no longer fit one row at 16 px: two rows of three */
@media (max-width: 22.49rem) { .x9-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* English dates ("14 Oct") are wider: two rows of three below 480 px */
@media (max-width: 29.99rem) {
  .x9:lang(en) .x9-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* …and each date is one line ("Wed 14 Oct"), so the two rows stay as short as the Finnish one */
  .x9:lang(en) .x9-day { flex-direction: row; justify-content: center; align-items: center; gap: .3em; min-height: 46px; padding: 4px 4px 8px; }
}
.x9-day[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-raised); }
/* the 4 s progress line of the date that is playing (paused: it holds); the 12 px bottom padding keeps it clear of
   the digits so it reads as a progress line, not an underscore */
.x9-day__bar {
  position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 2px;
  background: var(--color-action); transform-origin: 0 50%; opacity: 0;
}
.x9-stage:is([data-state="playing"], [data-state="paused"]) .x9-day[aria-pressed="true"] .x9-day__bar {
  opacity: 1; animation: x9-run var(--x9-step) linear;
}
.x9-stage[data-state="paused"] .x9-day[aria-pressed="true"] .x9-day__bar { animation-play-state: paused; }
@keyframes x9-run { from { transform: scaleX(0); } }

.x9-ctl {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; flex: none;
  border: 0; border-radius: var(--radius-button); background: var(--color-surface); color: var(--color-text);
  box-shadow: inset 0 0 0 var(--border-w-control) var(--color-border-control);
  font-size: 17px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) linear;
}
.x9-ctl:hover { box-shadow: inset 0 0 0 2px var(--color-text); }
.x9-ctl:active { transform: scale(.97); }
.x9-ctl svg { display: none; width: 20px; height: 20px; flex: none; }
.x9-stage[data-state="playing"] .x9-ctl [data-i="pause"],
.x9-stage:is([data-state="paused"], [data-state="ready"]) .x9-ctl [data-i="play"],
.x9-stage[data-state="done"] .x9-ctl [data-i="replay"] { display: block; }
html:not(.js) .x9-ctl { display: none; }

/* ---------------------------------------------------------------- the two panes */
.x9-panes { display: grid; gap: 32px; }
@media (min-width: 48rem) { .x9-panes { gap: 40px; } }
.x9-pane { display: grid; grid-template-rows: auto auto 1fr; min-width: 0; }
@media (min-width: 64rem) {
  .x9-panes { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 56px; row-gap: 0; }
  .x9-pane { grid-row: span 3; grid-template-rows: subgrid; }
}
.x9-ph {
  margin-bottom: 16px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--color-text);
}
.x9-ph--a { color: var(--color-action); }
.x9-art { min-width: 0; }

/* ---------------------------------------------------------------- the spreadsheet */
.x9-file { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; font-weight: 600; color: var(--color-text-2); }
.x9-file svg { width: 20px; height: 20px; flex: none; }
.x9-file span { min-width: 0; overflow-wrap: anywhere; }
.x9-sheet {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  font-size: 17px; line-height: 1.25; color: var(--color-text);
}
.x9-sheet th, .x9-sheet td {
  height: var(--x9-row); padding: 0 12px; text-align: left; font-weight: 400; white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--color-border-subtle); border-right: 1px solid var(--color-border-subtle);
}
.x9-sheet tr > :last-child { border-right: 0; }
.x9-sheet .x9-rn {
  width: 44px; padding: 0; text-align: center; font-size: 16px; color: var(--color-text-muted);
  background: var(--color-surface-sunken); border-right-color: var(--color-surface-sunken); border-bottom-color: var(--color-surface);
}
.x9-sheet .x9-c--d { width: 19%; }
.x9-sheet .x9-c--u { width: 20%; }
.x9-sheet .x9-c--r { width: 23%; }
.x9-cols td {
  height: 30px; padding: 0; text-align: center; font-size: 16px; color: var(--color-text-muted);
  background: var(--color-surface-sunken); border-right-color: var(--color-surface); border-bottom: 0;
}
.x9-cols td:first-child { border-top-left-radius: 12px; }
.x9-cols td:last-child { border-top-right-radius: 12px; }
.x9-hd th { font-weight: 700; }
.x9-sheet tbody tr:not([data-on]) { display: none; }
.x9-sheet tbody tr:last-child > * { border-bottom: 0; }
.x9-sheet tbody tr[data-new] > :not(.x9-rn) { background: var(--color-surface-selected); }
.x9-sheet tbody tr.is-act .x9-c--v { box-shadow: inset 0 0 0 2px var(--color-text); }
.x9-sheet tbody tr.is-in > * { animation: x9-in 260ms var(--ease-out); }
.x9-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: var(--color-text); }
.x9-t { display: inline-block; min-width: 1ch; }

/* phones: Asunto and Tieto tuli, four rows */
@media (max-width: 47.99rem) {
  .x9-sheet .x9-c--d, .x9-sheet .x9-c--r { display: none; }
  .x9-sheet tbody tr:not([data-m]) { display: none; }
  .x9-sheet .x9-c--u { width: 34%; }
  .x9-sheet tbody .x9-c--v { white-space: normal; padding-block: 8px; line-height: 1.25; }
  .x9-sheet .x9-rn { width: 40px; }
}

/* ---------------------------------------------------------------- Alarmi: the building, the count, the event */
.x9-al { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
@media (min-width: 48rem) { .x9-al { gap: 40px; } }
.x9-talo { min-width: 0; }
.x9-talo .tl9 { margin: 0; }
.x9-talo--md { display: none; }
@media (min-width: 48rem) { .x9-talo--md { display: block; } .x9-talo--sm { display: none; } }
.x9-side { display: grid; gap: 20px; align-content: center; min-width: 0; }
.x9-count { display: flex; flex-direction: column; gap: 4px; }
.x9-count__n {
  font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -.02em; color: var(--color-action); font-variant-numeric: proportional-nums;
}
@media (min-width: 64rem) { .x9-count__n { font-size: 48px; } }
.x9-count__l { font-size: 17px; line-height: 1.35; color: var(--color-text-2); }
.x9-evs { display: grid; }
.x9-ev { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 2px; font-size: 17px; line-height: 1.4; }
.x9-ev b { font-size: 16px; font-weight: 700; color: var(--color-text); }
.x9-ev span { color: var(--color-text); }
.x9-ev:not(.is-on), .x9-log:not(.is-on) { visibility: hidden; opacity: 0; }
.x9-ev.is-anim, .x9-log.is-anim { animation: x9-in 240ms var(--ease-out); }

/* ---------------------------------------------------------------- that date's rows under each pane */
.x9-logs { display: grid; align-content: start; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); }
/* phones only: which side the rows belong to, once the panes are interleaved (below) */
.x9-lh { display: none; }
.x9-log { grid-area: 2 / 1; display: grid; align-content: start; gap: 12px; }
.x9-log__r { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 12px; font-size: 17px; line-height: 1.5; color: var(--color-text); }
.x9-log__r b { font-weight: 700; }
.x9-log__r--al b { color: var(--color-action); }
.x9-log__r span { text-wrap: pretty; }
@media (min-width: 36rem) { .x9-log__r { font-size: 18px; } }
/* phones: the who-label leads the line instead of taking a column */
@media (max-width: 35.99rem) {
  .x9-log__r { display: block; }
  .x9-log__r b { margin-right: .4em; }
}

/* phones: the sheet, then the building with its count and event line, then the rows of each side under a label.
   Panes and rows interleave, so both pictures stay on one screen while the round plays (spec §2.3 order). */
@media (max-width: 47.99rem) {
  .x9-panes { gap: 0; }
  .x9-pane { display: contents; }
  .x9-pane--x .x9-ph { order: 1; } .x9-pane--x .x9-art { order: 2; }
  .x9-pane--a .x9-ph { order: 3; margin-top: 24px; } .x9-pane--a .x9-art { order: 4; }
  .x9-pane--x .x9-logs { order: 5; margin-top: 16px; }
  .x9-pane--a .x9-logs { order: 6; margin-top: 12px; padding-top: 0; border-top: 0; }
  .x9-lh { display: block; grid-row: 1; margin-bottom: 4px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--color-text-2); }
  .x9-pane--a .x9-lh { color: var(--color-action); }
}

@keyframes x9-in { from { opacity: .35; transform: translateY(6px); } }

/* ---------------------------------------------------------------- the tally */
.x9-tally { margin-top: 16px; padding: 24px 16px 12px; }
@media (min-width: 48rem) { .x9-tally { margin-top: 24px; padding: 36px 40px 24px; } }
@media (min-width: 64rem) { .x9-tally { padding: 40px 48px 24px; } }
.x9-tt { width: 100%; margin-top: 16px; table-layout: fixed; border-collapse: collapse; font-size: 17px; line-height: 1.4; }
.x9-tt th, .x9-tt td { padding: 11px 16px 11px 0; text-align: left; vertical-align: baseline; }
.x9-tt thead > tr > * { padding-top: 0; padding-bottom: 10px; vertical-align: bottom; }
.x9-tt thead th { font-size: 16px; font-weight: 700; color: var(--color-text-2); }
.x9-tt thead .x9-tt--a { color: var(--color-action); }
.x9-tt tbody > tr > * { border-top: 1px solid var(--color-border-subtle); }
.x9-tt .x9-tt__task { width: 25%; }
.x9-tt thead th { width: 37.5%; }
.x9-tt tbody th { font-weight: 600; color: var(--color-text); }
.x9-tt td { color: var(--color-text-2); }
.x9-tt td.x9-tt--a { color: var(--color-action); font-weight: 600; }
.x9-tt__v { display: flex; align-items: baseline; gap: 10px; }
.x9-tt__n {
  flex: none; min-width: 1.3em; font-family: var(--font-display); font-stretch: var(--display-wdth);
  font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--color-text); vertical-align: -.08em;
  font-variant-numeric: proportional-nums;   /* base.css sets tabular: Mona Sans then draws a slashed 0 and a footed 1 */
}
.x9-tt--a .x9-tt__n { color: var(--color-action); }
@media (min-width: 64rem) { .x9-tt { font-size: 18px; } .x9-tt__n { font-size: 34px; } }
@media (max-width: 47.99rem) {
  .x9-tt, .x9-tt thead, .x9-tt tbody { display: block; }
  .x9-tt thead tr, .x9-tt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .x9-tt thead .x9-tt__task { display: none; }
  .x9-tt thead th { width: auto; padding: 0 0 8px; }
  .x9-tt tbody tr { padding: 12px 0; border-top: 1px solid var(--color-border-subtle); }
  .x9-tt tbody > tr > * { border-top: 0; }
  .x9-tt tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 6px; }
  .x9-tt td { width: auto; padding: 0; font-size: 16px; line-height: 1.35; }
  .x9-tt__v { flex-direction: column; gap: 4px; }
  .x9-tt__n { font-size: 28px; }
}

/* ---------------------------------------------------------------- which one fits, and Joel */
.x9-fit { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 48rem) { .x9-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; } }
@media (min-width: 64rem) { .x9-fit { gap: 32px; } }
.x9-fit__c { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 20px; }
@media (min-width: 48rem) { .x9-fit__c { padding: 32px 36px; } }
@media (min-width: 64rem) { .x9-fit__c { padding: 32px 44px; } }
.x9-list { margin-top: 14px; display: grid; gap: 8px; }
.x9-list li { position: relative; padding-left: 22px; line-height: 1.5; color: var(--color-text); }
.x9-list li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-2);
}
.x9-fit__c--a .x9-list li::before { background: var(--color-action); }
.x9-fit__go { margin-top: auto; padding-top: 16px; }
.x9-price {
  margin-top: auto; padding-top: 20px; font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800;
  font-size: 26px; line-height: 1.2; letter-spacing: -.015em; color: var(--color-text);
}
.x9-joel { display: flex; align-items: center; gap: 16px; margin-top: 24px; max-width: 48rem; font-size: var(--v9-fs-body); line-height: 1.5; }
.x9-joel img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--color-surface-sunken); }
.x9-joel__t { min-width: 0; }
.x9-joel__s { display: block; margin-top: 2px; font-size: 16px; color: var(--color-text-2); }

/* small laptops (1024-1199): the sheet gets the room, the count and event line go under the building */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  /* each pane stacks on its own: lining the rows up with the taller building left a hole under the sheet */
  .x9-panes { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 48px; grid-template-rows: none; align-items: start; }
  .x9-pane { grid-row: auto; grid-template-rows: none; align-content: start; }
  .x9-al { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 20px; }
  .x9-side { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px; width: 100%; }
  .x9-count__n { font-size: 40px; }
  .x9-log__r { display: block; }
  .x9-log__r b { margin-right: .4em; }
  .x9-sheet { font-size: 16px; }
  .x9-sheet th, .x9-sheet td { padding: 0 10px; }
  .x9-sheet .x9-c--d { width: 16%; } .x9-sheet .x9-c--u { width: 17%; }
}