/* QuietSignal mosaics · full-window stage, hover tip and the "How to read this" box (after QuietSignal's quietsignal.css). */

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ground: #f2f4f5;
  --ink: #1d2833;
  --empty: #b9c3cc;
  --panel-bg: rgba(250, 251, 252, 0.93);
  --panel-line: rgba(0, 0, 0, 0.09);
  --panel-text: #2b3136;
  --panel-muted: #6f777e;
  --tip-bg: rgba(252, 253, 253, 0.95);
  --tip-muted: #6b7682;
  --tip-shadow: 0 6px 24px rgba(29, 40, 51, 0.08);
  color-scheme: light;
}

/* Dark: deep blue ground, white text. */
:root[data-theme='dark'] {
  --ground: #0c1a2c;
  --ink: #eef4fb;
  --empty: #4a5f78;
  --panel-bg: rgba(16, 32, 52, 0.9);
  --panel-line: rgba(255, 255, 255, 0.1);
  --panel-text: #e3ebf4;
  --panel-muted: #92a3b8;
  --tip-bg: rgba(18, 36, 58, 0.95);
  --tip-muted: #92a3b8;
  --tip-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/*
 * Each page's cell colours for its legend, --c1 upward, matching the themes in
 * its spec (<name>-mosaic.js). All from Sanzo Wada's Dictionary of Color
 * Combinations; dark ramps run the other way in lightness, so the strongest
 * values glow.
 */
[data-viz='rain-mosaic'] { --c1: #a4adaf; --c2: #687c96; --c3: #3b4d70; --now: #687c96; }
[data-theme='dark'] [data-viz='rain-mosaic'] { --c1: #5d6567; --c2: #8094af; --c3: #afc5ee; --now: #8094af; }
[data-viz='temperature-mosaic'] {
  --c1: #2e516b; --c2: #5b7f9b; --c3: #8ab0ce; --c4: #e9d4b8; --c5: #dd977d; --c6: #af6614; --c7: #723e01; --now: #af6614;
}
[data-theme='dark'] [data-viz='temperature-mosaic'] {
  --c1: #a9d0ef; --c2: #789dbb; --c3: #4a6d89; --c4: #403018; --c5: #95563d; --c6: #d0843c; --c7: #feba7f; --now: #d0843c;
}

/* Rain No. 139, temperature No. 279, snow No. 218, sun No. 222, wind No. 202, air No. 331. */
[data-viz='snow-mosaic'] { --c1: #aaa6cc; --c2: #787a84; --c3: #03527e; }
[data-theme='dark'] [data-viz='snow-mosaic'] { --c1: #625e81; --c2: #8f929c; --c3: #8cccfe; }
[data-viz='sun-mosaic'] { --c1: #d1a429; --c2: #aa690a; --c3: #763b04; }
[data-theme='dark'] [data-viz='sun-mosaic'] { --c1: #7c5f07; --c2: #ca7e12; --c3: #feaf7a; }
[data-viz='wind-mosaic'] { --c1: #8db5a4; --c2: #508965; --c3: #3f5057; }
[data-theme='dark'] [data-viz='wind-mosaic'] { --c1: #476d5d; --c2: #68a17c; --c3: #b4c8d0; }
[data-viz='air-mosaic'] { --c1: #c99fda; --c2: #db517b; --c3: #64569e; --c4: #42356a; }
[data-theme='dark'] [data-viz='air-mosaic'] { --c1: #724c81; --c2: #d44a75; --c3: #ab9eed; --c4: #d5cdfe; }

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.qs-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  container-type: size;
  background: var(--ground);
}

.qs-viz__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- hover tip ---- */

.qs-mosaic__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  min-width: 10em;
  padding: 0.6em 0.75em 0.65em;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--tip-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--tip-shadow);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.qs-mosaic__tip.is-on { opacity: 1; }
.qs-mosaic__tip strong { display: block; font-weight: 600; }
.qs-mosaic__tip span { display: block; margin-bottom: 0.35em; color: var(--tip-muted); }
.qs-mosaic__tip .is-now { margin-top: 0.3em; color: var(--now); font-weight: 500; }

/* ---- how to read this ---- */

.qs-howto {
  --ht-bg: var(--panel-bg);
  --ht-line: var(--panel-line);
  --ht-text: var(--panel-text);
  --ht-muted: var(--panel-muted);
  position: absolute;
  z-index: 5;
  right: max(10px, 2.2cqmin);
  bottom: max(10px, 2.2cqmin);
  font-family: var(--font);
  font-size: clamp(11px, 1.35cqmin, 15px);
  line-height: 1.4;
  color: var(--ht-text);
}
/* Folded: a small "Learn more" pill whose arrow nudges now and then. */
.qs-howto__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  height: 2.2em;
  padding: 0 0.85em 0 0.95em;
  border: 1px solid var(--ht-line);
  border-radius: 999px;
  background: var(--ht-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ht-muted);
  font: 500 0.88em/1 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s, color 0.3s, border-color 0.3s;
}
.qs-howto__toggle svg { flex: none; animation: qs-howto-nudge 9s ease-in-out 2.5s infinite; }
.qs-howto__toggle:hover,
.qs-howto__toggle:focus-visible { opacity: 1; color: var(--ht-text); border-color: var(--ht-muted); }
.qs-howto__toggle:hover svg { animation: none; transform: translateX(2px); transition: transform 0.25s ease; }
@keyframes qs-howto-nudge {
  0%, 82%, 100% { transform: none; }
  88% { transform: translateX(3px); }
  94% { transform: none; }
}
.qs-howto.is-open .qs-howto__toggle { display: none; }
.qs-howto__panel {
  display: none;
  position: relative;
  width: min(22em, 62cqw);
  /* As tall as the stage allows (between the corner margins) before it scrolls. */
  max-height: calc(100cqh - 2 * max(10px, 2.2cqmin));
  overflow-y: auto;
  padding: 1em 1.1em 1.1em;
  border: 1px solid var(--ht-line);
  border-radius: 12px;
  background: var(--ht-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
}
.qs-howto.is-open .qs-howto__panel { display: block; animation: qs-howto-in 0.4s ease; }
@keyframes qs-howto-in { from { opacity: 0; transform: translateY(4px); } }
.qs-howto section + section { margin-top: 0.95em; padding-top: 0.85em; border-top: 1px solid var(--ht-line); }
.qs-howto h4 {
  margin: 0;
  padding-right: 1.6em;
  font-size: 0.74em;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-muted);
}
.qs-howto__close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ht-muted);
  cursor: pointer;
}
.qs-howto__close:hover { color: var(--ht-text); }
.qs-howto p { margin: 0.45em 0 0; color: var(--ht-text); text-wrap: pretty; }
.qs-howto ul { margin: 0.55em 0 0; padding: 0; list-style: none; display: grid; gap: 0.38em; }
.qs-howto li { display: flex; align-items: center; gap: 0.6em; }
.qs-howto li svg { flex: none; }
.qs-howto__source {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin-top: 0.95em;
  padding-top: 0.85em;
  border-top: 1px solid var(--ht-line);
  font-size: 0.82em;
}
.qs-howto__source img { flex: none; width: auto; height: 2.6em; margin-top: 0.1em; }
.qs-howto .qs-howto__source p { margin: 0; color: var(--ht-muted); }
.qs-howto .qs-howto__source p + p { margin-top: 0.5em; }
.qs-howto__source a { color: inherit; white-space: nowrap; }
.qs-swatch--c1 { color: var(--c1); }
.qs-swatch--c2 { color: var(--c2); }
.qs-swatch--c3 { color: var(--c3); }
.qs-swatch--c4 { color: var(--c4); }
.qs-swatch--c5 { color: var(--c5); }
.qs-swatch--c6 { color: var(--c6); }
.qs-swatch--c7 { color: var(--c7); }
/* The mild midpoint sits close to the ground: give its swatch an edge. */
[data-viz='temperature-mosaic'] .qs-swatch--c4 rect { stroke: var(--panel-muted); stroke-width: 0.6; stroke-opacity: 0.6; }
.qs-howto .qs-howto__also { margin-top: 0.95em; padding-top: 0.85em; border-top: 1px solid var(--ht-line); font-size: 0.86em; color: var(--ht-muted); }
.qs-howto__also a { color: var(--ht-text); white-space: nowrap; }
.qs-swatch--empty { color: var(--empty); }
.qs-swatch--now { color: var(--now); }
@container (max-width: 420px) {
  .qs-howto__panel { width: min(17em, 80cqw); font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-howto.is-open .qs-howto__panel { animation: none; }
  .qs-mosaic__tip { transition: none; }
  .qs-howto__toggle svg { animation: none; }
}

/* ---- display mode: the art alone; the pill and pointer rest when still ---- */

.qs-howto__display label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 500;
  cursor: pointer;
}
.qs-howto__display input {
  width: 1.05em;
  height: 1.05em;
  margin: 0;
  accent-color: var(--ht-text);
  cursor: pointer;
}
.qs-howto .qs-howto__display p { color: var(--ht-muted); font-size: 0.9em; }
.qs-howto .qs-howto__display p + label { margin-top: 0.9em; }
.qs-display .qs-howto { transition: opacity 0.8s ease; }
.qs-display:not(.is-awake) .qs-howto { opacity: 0; pointer-events: none; }
.qs-display:not(.is-awake) .qs-stage { cursor: none; }
@media (prefers-reduced-motion: reduce) {
  .qs-display .qs-howto { transition: none; }
}

/* ---- landing page: a tile per mosaic ---- */

.qs-home { height: auto; min-height: 100%; }
.qs-home__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 88px) max(16px, 4vw) clamp(28px, 5vw, 56px);
}
.qs-home__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 1.1em;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--panel-muted);
}
.qs-home__eyebrow img { width: 18px; height: 18px; }
.qs-home h1 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.qs-home__lede {
  max-width: 36em;
  margin: 0.9em 0 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--panel-muted);
  text-wrap: pretty;
}
.qs-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  margin: clamp(36px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.qs-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
  outline-offset: 6px;
}
.qs-tile:focus-visible { outline: 2px solid var(--panel-muted); }
.qs-tile__art {
  position: relative;
  aspect-ratio: 1;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease;
}
.qs-tile:hover .qs-tile__art { transform: scale(1.025); }
.qs-tile h2 {
  margin: 0.9em 0 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.qs-tile p {
  margin: 0.3em 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--panel-muted);
}
.qs-home__foot {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 1.4em;
  border-top: 1px solid var(--panel-line);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--panel-muted);
}
.qs-home__foot img { flex: none; width: auto; height: 2.4em; }
.qs-home__foot p { margin: 0; }
.qs-home__foot a { color: inherit; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .qs-tile__art { transition: none; }
  .qs-tile:hover .qs-tile__art { transform: none; }
}