:root {
  --sc-canvas: var(--page);  --sc-surface: var(--card);
  --sc-ink: var(--ink);      --sc-ink-soft: var(--muted);
  --sc-accent: var(--accent-fill);  --sc-accent-ink: var(--on-accent);
  --sc-font-display: var(--display);
  --sc-font-text: var(--body);
}
body { background: var(--page); }
.skip { position: fixed; left: var(--space-4); top: var(--space-4); z-index: 99; translate: 0 -200%; }
.skip:focus { translate: 0 0; }

/* Chrome: the mark and the three windows. Nothing else. */
.bar {
  position: fixed; z-index: var(--sc-z-chrome); inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-4)) var(--sc-gutter) var(--space-4);
}
.bar__mark img { display: block; height: var(--space-6); width: auto; }

/* The signature: three windows that keep the score of the night.
   Dark until its story starts, ochre (theirs) while that night is on screen,
   green (ours) once it is answered. The word says the same thing the colour does. */
.windows { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.win {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-touch); color: var(--muted); text-decoration: none;
  font: 600 var(--text-s)/1 var(--body);
  transition: color var(--dur-2) var(--ease);
}
.win:hover { color: var(--ink); }
.win__pane {
  inline-size: 1.05rem; block-size: 1.3rem; border-radius: var(--radius-tag);
  border: 1px solid var(--muted); position: relative;
  transition: background-color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.win__pane::after { content: ""; position: absolute; inset: 45% 0 auto; border-top: 1px solid var(--page); }
.win[data-state="night"] { color: var(--ink); }
.win[data-state="night"] .win__pane { background: var(--ochre-fill); border-color: var(--ochre-fill); }
.win[data-state="answered"] .win__pane { background: var(--accent-fill); border-color: var(--accent-fill); }
.win__state { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* Copy */
.sc-world__scrim {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--page) 94%, transparent) 0%,
    color-mix(in oklab, var(--page) 78%, transparent) 26%,
    color-mix(in oklab, var(--page) 30%, transparent) 48%,
    transparent 62%);
}
.sc-copy { max-width: min(36rem, calc(100vw - 2 * var(--sc-gutter))); display: grid; gap: var(--space-3); justify-items: start; }
.sc-copy--trail { justify-items: end; }
.say {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(var(--text-xl), 1.1rem + 2.2vw, var(--text-3xl));
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance;
}
h1.say { font-size: clamp(var(--text-2xl), 1.2rem + 3.6vw, 4.2rem); }
.line { margin: 0; color: var(--ink); opacity: .86; font-size: var(--text-l); line-height: var(--lh-snug); text-wrap: pretty; max-width: 34rem; }
.told { display: flex; align-items: center; gap: var(--space-3); }
.told img { block-size: var(--space-7); inline-size: auto; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: var(--space-2) var(--space-5); margin-top: var(--space-2);
  border-radius: var(--radius-pill); background: var(--accent-fill); color: var(--on-accent);
  font: 600 var(--text-m)/1 var(--body); text-decoration: none;
  transition: filter var(--dur-1) var(--ease);
}
.btn:hover { filter: brightness(1.1); }

/* Leg 9: the day's jobs, ticked done one after another. No times, no counts. */
.day { display: flex; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.day li {
  inline-size: clamp(2.2rem, 7vw, 3.4rem); block-size: var(--space-2);
  border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ink) 22%, transparent);
  transition: background-color var(--dur-3) var(--ease);
}
.day li.done { background: var(--accent-fill); }

/* Leg 10: work, then home. */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font: 600 var(--text-m)/1 var(--body); }
.switch__track {
  inline-size: 3.2rem; block-size: 1.8rem; border-radius: var(--radius-pill); padding: 3px;
  background: var(--accent-fill); transition: background-color var(--dur-3) var(--ease);
}
.switch__knob { display: block; block-size: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transition: translate var(--dur-3) var(--ease); translate: 1.4rem 0; }
.switch.off .switch__track { background: color-mix(in oklab, var(--ink) 22%, transparent); }
.switch.off .switch__knob { translate: 0 0; }
.switch__label::before { content: "Σε δουλειά"; }
.switch.off .switch__label::before { content: "Στο σπίτι"; }

/* The close: the three windows become the three doors. */
#close { max-width: min(62rem, calc(100vw - 2 * var(--sc-gutter))); }
.doors { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.door {
  display: grid; gap: var(--space-1); min-width: 12rem; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-touch); border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  background: color-mix(in oklab, var(--page) 55%, transparent);
  color: var(--ink); text-decoration: none; transition: border-color var(--dur-1) var(--ease);
}
.door:hover { border-color: var(--accent); }
.door b { font-family: var(--display); font-size: var(--text-l); }
.door span { color: var(--accent); font-weight: 600; }

@media (max-width: 860px) {
  .win__name { display: none; }
  .win { padding-inline: var(--space-2); min-inline-size: var(--touch); justify-content: center; }
  .bar { flex-direction: row; }
  .sc-copy--trail { justify-items: start; }
  .line { font-size: var(--text-m); }
  .door { min-width: 0; flex: 1 1 100%; padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .win, .win__pane, .btn, .day li, .switch__track, .switch__knob, .door { transition: none; }
}