/* ══════════════════════════════════════════════════════════════════════════════
   Focus — styles PROPRES À L'OUTIL.
   Le chrome (header, boutons, footer, toast, tokens de couleur) vient de
   ../shared/innospira-ui.css, lié AVANT ce fichier. Rien de commun ici.
   Toutes les couleurs passent par les tokens partagés : l'outil suit donc le
   thème clair et le thème sombre sans une seule ligne en double.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ═══ Palette de la ville ═════════════════════════════════════════════════════
   Le canvas ne peut pas lire `light-dark()` : une propriété personnalisée
   ordinaire est renvoyée telle quelle par getComputedStyle (« light-dark(a,b) »),
   inexploitable en JS. `@property` avec `syntax:'<color>'` force le calcul, et
   getComputedStyle rend alors une vraie couleur résolue selon le thème actif.
   C'est ce qui permet à la ville d'être repeinte à la bascule clair/sombre en
   gardant UN SEUL bloc de tokens, comme le reste du système.
   ═══════════════════════════════════════════════════════════════════════════════ */
@property --city-sky-top     { syntax: '<color>'; inherits: true; initial-value: #1a1b3a; }
@property --city-sky-bottom  { syntax: '<color>'; inherits: true; initial-value: #46304f; }
@property --city-haze        { syntax: '<color>'; inherits: true; initial-value: #6b4a63; }
@property --city-dawn-top    { syntax: '<color>'; inherits: true; initial-value: #4a5da8; }
@property --city-dawn-bottom { syntax: '<color>'; inherits: true; initial-value: #f0a763; }
@property --city-dawn-haze   { syntax: '<color>'; inherits: true; initial-value: #ffc98a; }
@property --city-sun         { syntax: '<color>'; inherits: true; initial-value: #ffd08a; }
@property --city-star        { syntax: '<color>'; inherits: true; initial-value: #ffe9c4; }
@property --city-moon        { syntax: '<color>'; inherits: true; initial-value: #ffe9c4; }
@property --city-far         { syntax: '<color>'; inherits: true; initial-value: #2b2a52; }
@property --city-mid         { syntax: '<color>'; inherits: true; initial-value: #232145; }
@property --city-near        { syntax: '<color>'; inherits: true; initial-value: #171633; }
@property --city-ground      { syntax: '<color>'; inherits: true; initial-value: #100f22; }
@property --city-street      { syntax: '<color>'; inherits: true; initial-value: #17162e; }
@property --city-window-on   { syntax: '<color>'; inherits: true; initial-value: #ffab3f; }
@property --city-window-off  { syntax: '<color>'; inherits: true; initial-value: #3a3862; }
@property --city-neon-a      { syntax: '<color>'; inherits: true; initial-value: #ff5da2; }
@property --city-neon-b      { syntax: '<color>'; inherits: true; initial-value: #3fe0d0; }
@property --city-neon-c      { syntax: '<color>'; inherits: true; initial-value: #8b7bff; }
@property --city-shop        { syntax: '<color>'; inherits: true; initial-value: #ffd9a0; }
@property --city-car         { syntax: '<color>'; inherits: true; initial-value: #fff2cf; }
@property --city-tail        { syntax: '<color>'; inherits: true; initial-value: #ff5a4a; }

.city {
  /* Deux ciels, mélangés en JS selon l'avancement du jour : la NUIT au départ,
     l'AUBE quand les tâches du jour sont faites. En thème clair les deux sont
     décalés vers le chaud — mais la scène reste une scène nocturne, c'est le sujet. */
  --city-sky-top:     light-dark(oklch(0.52 0.115 285), oklch(0.24 0.075 280));
  --city-sky-bottom:  light-dark(oklch(0.72 0.120  330), oklch(0.36 0.095 330));
  --city-haze:        light-dark(oklch(0.80 0.095  340), oklch(0.45 0.085 340));
  --city-dawn-top:    light-dark(oklch(0.78 0.090 245), oklch(0.55 0.110 262));
  --city-dawn-bottom: light-dark(oklch(0.90 0.110  70), oklch(0.78 0.135  62));
  --city-dawn-haze:   light-dark(oklch(0.94 0.090  75), oklch(0.86 0.115  68));
  --city-sun:         light-dark(oklch(0.93 0.115  75), oklch(0.88 0.140  70));

  --city-star:        light-dark(oklch(0.97 0.04 85), oklch(0.95 0.045 85));
  --city-moon:        light-dark(oklch(0.98 0.05 88), oklch(0.94 0.055 88));

  --city-far:         light-dark(oklch(0.50 0.075 300), oklch(0.30 0.055 288));
  --city-mid:         light-dark(oklch(0.38 0.070 297), oklch(0.245 0.050 286));
  --city-near:        light-dark(oklch(0.26 0.060 294), oklch(0.185 0.042 284));
  --city-ground:      light-dark(oklch(0.20 0.050 292), oklch(0.135 0.032 282));
  --city-street:      light-dark(oklch(0.25 0.045 290), oklch(0.175 0.030 284));

  --city-window-on:   var(--brand);
  --city-window-off:  light-dark(oklch(0.34 0.045 292), oklch(0.28 0.038 286));

  /* Néons, devantures et phares : la scène a sa propre palette, plus saturée que
     le chrome. C'est assumé — comme les thèmes de slide de carousel-maker, un
     décor n'est pas de l'interface. L'indigo `--spark` reste le point d'ancrage. */
  --city-neon-a:      light-dark(oklch(0.68 0.215  10), oklch(0.70 0.225  10));
  --city-neon-b:      light-dark(oklch(0.78 0.140 195), oklch(0.80 0.150 195));
  --city-neon-c:      light-dark(oklch(0.66 0.180 275), oklch(0.70 0.185 275));
  --city-shop:        light-dark(oklch(0.88 0.095  70), oklch(0.86 0.105  70));
  --city-car:         light-dark(oklch(0.96 0.045  85), oklch(0.95 0.050  85));
  --city-tail:        light-dark(oklch(0.62 0.200  25), oklch(0.65 0.205  25));
}

/* ═══ Utilitaire ══════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ═══ Mise en page ════════════════════════════════════════════════════════════ */
.focus {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 1fr);
  align-items: start;
  gap: 18px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 44px;
}
.focus__main, .focus__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Titre de bloc — commun aux quatre cartes de l'outil */
.panel-h {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

/* ═══ La ville ════════════════════════════════════════════════════════════════ */
.city-card { padding: 0; overflow: hidden; }

.city { position: relative; line-height: 0; background: var(--city-ground); }
.city canvas {
  display: block; width: 100%; height: auto;
  /* Le rendu pixel : aucun lissage à l'agrandissement, les carrés restent carrés. */
  image-rendering: pixelated;
}

.city__expand {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px;
  /* Le bouton flotte sur la scène de nuit : ni fond clair ni fond sombre du thème
     ne s'applique — même exception que les badges posés sur une image. */
  background: oklch(0.15 0.02 285 / .45); color: oklch(0.97 0.01 85);
  opacity: 0; transition: opacity .2s ease, background .15s ease;
}
.city:hover .city__expand, .city__expand:focus-visible { opacity: 1; }
.city__expand:hover { background: oklch(0.15 0.02 285 / .72); }
.city__expand svg { width: 15px; height: 15px; }

/* Plein écran : la ville seule, centrée sur son propre fond de nuit. */
.city:fullscreen { display: grid; place-items: center; background: var(--city-sky-top); }
.city:fullscreen canvas { width: 100%; max-width: none; max-height: 100vh; object-fit: contain; }
.city:fullscreen .city__expand { opacity: 1; }

/* ── Compteurs ── */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.stat { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.stat__num {
  font-family: 'Silkscreen', var(--mono); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1;
  color: var(--brand-strong); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.stat__label em { font-style: normal; color: var(--muted-2); font-size: 10.5px; }
.stats__note {
  grid-column: 1 / -1; margin: 4px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--muted-2);
}

/* Un immeuble vient d'apparaître : petit sursaut de la carte, une seule fois. */
@keyframes city-pop { 40% { transform: translateY(-4px); } }
.city-card.is-grown { animation: city-pop .5s var(--ease); }

/* ═══ Panneau son ═════════════════════════════════════════════════════════════ */
.sound-card { padding: 18px 22px 20px; }
.sound-card__top, .radio__head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sound-card__sep { height: 1px; background: var(--line); margin: 22px 0 18px; }
/* Les ambiances viennent APRÈS la musique : elles la complètent, elles ne la remplacent pas. */
.amb__intro { margin: -6px 0 13px; font-size: 13px; color: var(--muted-2); }

/* ── Curseur commun (volume général + ambiances) ── */
.master { display: flex; align-items: center; gap: 9px; margin-left: auto; min-width: 150px; }
.master__ico { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.master .range { flex: 1; }

.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 0; padding: 0;
  background: var(--line-2); border-radius: 999px; cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--panel);
  box-shadow: 0 1px 3px oklch(0.4 0.05 60 / .35);
  transition: transform .12s var(--ease);
}
.range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--panel);
  box-shadow: 0 1px 3px oklch(0.4 0.05 60 / .35);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.range:active::-webkit-slider-thumb { transform: scale(1.05); }

/* ── Grille des ambiances ── */
.amb { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.amb__item {
  display: flex; flex-direction: column; gap: 11px;
  padding: 12px 13px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .18s ease, background .18s ease;
}
.amb__item.is-on { border-color: var(--brand); background: var(--brand-wash); }

.amb__btn {
  display: flex; align-items: center; gap: 9px;
  padding: 0; border: 0; background: none; color: var(--text);
  font-size: 14px; font-weight: 600; text-align: left;
}
.amb__ico {
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.amb__ico svg { width: 17px; height: 17px; }
.amb__item.is-on .amb__ico { color: var(--brand-ink); background: var(--brand); border-color: transparent; }
.amb__btn:hover .amb__ico { border-color: var(--line-2); }
.amb__item.is-on .amb__btn:hover .amb__ico { border-color: transparent; }

/* ═══ Radios ══════════════════════════════════════════════════════════════════ */
.stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.station {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 11px 14px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color .16s ease, background .16s ease, transform .12s var(--ease);
}
.station:hover { border-color: var(--line-2); transform: translateY(-1px); }
.station__name { font-size: 14.5px; font-weight: 600; }
.station__desc { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* Station active : liseré indigo + trois barres d'égaliseur qui dansent. */
.station.is-on { border-color: var(--spark); background: var(--spark-wash); }
.station.is-on .station__name { color: var(--spark-strong); }
.station.is-on .station__name::after {
  content: ""; display: inline-block; vertical-align: -1px; margin-left: 8px;
  width: 11px; height: 11px; background: var(--spark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='9' width='4.5' height='13' fill='black'/%3E%3Crect x='9.7' y='3' width='4.5' height='19' fill='black'/%3E%3Crect x='17.4' y='12' width='4.5' height='10' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='9' width='4.5' height='13' fill='black'/%3E%3Crect x='9.7' y='3' width='4.5' height='19' fill='black'/%3E%3Crect x='17.4' y='12' width='4.5' height='10' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: eq-pulse 1.1s steps(3, end) infinite;
}
@keyframes eq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.station.is-loading { border-color: var(--line-2); opacity: .75; }

.radio__status {
  margin: 12px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.radio__status.is-err { color: var(--danger); }
.radio__credit { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); }
.radio__credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.radio__credit a:hover { color: var(--brand-strong); }

/* ═══ Chrono ══════════════════════════════════════════════════════════════════ */
.timer-card { padding: 18px 22px 20px; text-align: center; }
.timer-card .panel-h { text-align: left; }
.timer__value {
  font-family: 'Silkscreen', var(--mono); font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 3.1rem); line-height: 1;
  letter-spacing: .02em; color: var(--text);
  margin: 18px 0 16px; font-variant-numeric: tabular-nums;
}
.timer-card.is-running .timer__value { color: var(--brand-strong); }
.timer__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.timer__actions .btn { flex: 1; min-width: 120px; }
.timer__hint { margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted-2); }

/* ═══ To-do ═══════════════════════════════════════════════════════════════════ */
.todo-card { padding: 18px 22px 20px; }
.todo__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.todo__count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }

.todo__form { display: flex; gap: 8px; margin-bottom: 14px; }
.todo__input {
  flex: 1; min-width: 0;
  padding: 10px 13px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14.5px;
  transition: border-color .15s ease, background .15s ease;
}
.todo__input::placeholder { color: var(--muted-2); }
.todo__input:focus { border-color: var(--brand); background: var(--panel); outline: none; }
.todo__add {
  display: grid; place-items: center; width: 40px; flex-shrink: 0;
  border: 0; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--brand-ink);
  transition: background .15s ease, transform .12s var(--ease);
}
.todo__add:hover { background: var(--brand-2); transform: translateY(-1px); }
.todo__add svg { width: 17px; height: 17px; }

.todo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.todo__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 8px 9px 10px; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.todo__item:hover { background: var(--bg-2); }

/* Case à cocher pixel : carré net, coche orange, aucun arrondi — cohérent avec la ville. */
.todo__check {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0;
  border: 2px solid var(--line-2); border-radius: 3px;
  background: var(--panel); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.todo__check:hover { border-color: var(--brand); }
.todo__check:checked { background: var(--brand); border-color: var(--brand); }
.todo__check:checked::after {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--brand-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h2v2h2v2h2v-2h2V8h2V6h-2v2h-2v2H7V8H5V6H3z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h2v2h2v2h2v-2h2V8h2V6h-2v2h-2v2H7V8H5V6H3z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

.todo__text {
  flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4;
  overflow-wrap: anywhere; cursor: pointer;
}
.todo__item.is-done .todo__text { color: var(--muted-2); text-decoration: line-through; }

.todo__del {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: 7px; background: none; color: var(--muted-2);
  opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.todo__item:hover .todo__del, .todo__del:focus-visible { opacity: 1; }
.todo__del:hover { background: var(--danger-wash); color: var(--danger); }
.todo__del svg { width: 14px; height: 14px; }

.todo__empty { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.todo__clear {
  margin-top: 12px; padding: 0; border: 0; background: none;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.todo__clear:hover { color: var(--brand-strong); }

/* ═══ Responsive ══════════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
  .focus { grid-template-columns: minmax(0, 1fr); padding: 18px 20px 36px; }
  /* Sur une colonne, les deux conteneurs s'effacent (`display: contents`) et
     leurs cartes deviennent enfants directs de la grille. C'est le seul moyen
     de les ordonner entre elles : `order` ne traverse pas un conteneur, donc
     tant que la ville reste dans `.focus__main` elle ne peut pas passer devant
     le chrono qui vit dans `.focus__side`. L'espacement vient déjà du `gap`. */
  .focus__main, .focus__side { display: contents; }
  .city-card  { order: 1; }   /* l'accroche : on voit d'abord ce qu'on construit */
  .sound-card { order: 2; }   /* puis l'action principale : lancer un son */
  .timer-card { order: 3; }
  .todo-card  { order: 4; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, 1fr); padding: 14px 18px 16px; }
  .stat:nth-child(3) { grid-column: 1 / -1; }
  .sound-card, .timer-card, .todo-card { padding: 16px 18px 18px; }
  .master { min-width: 120px; }
}

/* Le clignotement des fenêtres et l'égaliseur sont désactivés par la règle
   `prefers-reduced-motion` du système commun ; le JS coupe en plus la boucle
   de rendu de la ville (voir script.js). */