:root { color-scheme: dark; }
* { box-sizing: border-box; touch-action: manipulation; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 14px/1.5 -apple-system, system-ui, sans-serif; }

/* The browser's own `[hidden] { display: none }` is an attribute selector, so
   ANY id rule that sets display outranks it and silently turns the hidden
   attribute into a no-op on that element. That is not hypothetical here: it
   shipped. `#pane-best { display: flex }` left Peter's twelve rendering on top
   of every other pane, so switching to Fiona appeared to leave "Summer Cool
   Light" behind. Stated once, globally, rather than guarded per selector —
   every pane in this app is toggled by `hidden`, and the next id rule that sets
   display would reintroduce it. */
[hidden] { display: none !important; }
body { display: flex; flex-direction: column; background: #1a1a1a; }

#swatch { position: relative; flex: 1; transition: background-color .12s linear; }
#swatch { cursor: pointer; -webkit-tap-highlight-color: transparent; }

#back {
  position: absolute; top: env(safe-area-inset-top, 0); left: env(safe-area-inset-left, 0);
  margin: 12px; padding: 8px 14px; border: 0; border-radius: 8px;
  background: rgba(20,20,20,.55); color: #d6d6d6; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#overlay {
  position: absolute; left: env(safe-area-inset-left, 0); bottom: 0;
  max-width: calc(72% - 24px);
  margin: 12px; padding: 6px 10px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(20,20,20,.55); color: #d6d6d6;
  pointer-events: none;
}
#overlay-row1 { display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
#dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #6e6e6e; }
#dot.shortlist { box-shadow: 0 0 0 2px #d6d6d6; }
#name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hex { flex: 0 0 auto; opacity: .7; font-size: 12px; }
#family { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; font-size: 12px; }

/* Panes — navigation and reading, so colour in the tiles is fine; the binding
   constraint (nothing chromatic beside a swatch) applies only to #swatch. */
.pane { flex: 1; overflow-y: auto; padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0)); }
#pane-best { display: flex; flex-direction: column; overflow: hidden; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0)); }
.pane-head { margin: 0 0 14px; padding: 0 2px; }
#pane-best .pane-head { flex: 0 0 auto; margin-bottom: 8px; }
.pane-head h1 { margin: 0; font-size: 17px; font-weight: 600; color: #f0f0f0; letter-spacing: -.01em; }
.pane-head p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #8a8a8a; }

.fam { margin-bottom: 22px; }
.fam h3 { margin: 0 0 10px; padding-left: 2px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #8a8a8a; }
.fam-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 0.78 is the width-to-height ratio a best-pane tile lands on at 375x812, so a
   swatch is the same shape on both panes even though this one scrolls. */
.tile-box { display: block; width: 100%; aspect-ratio: .78; border-radius: 12px; }
/* Three across, as many rows as the list needs, stretched to whatever height is
   left
   once the header and tab bar have taken theirs. minmax(0,1fr) rather than 1fr
   on the rows: a grid row's default min-height is its content, so without it
   four rows of tile-plus-label refuse to shrink below their natural size and
   the grid overflows the pane on a short screen instead of fitting. */
.best-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(var(--rows, 4), minmax(0, 1fr));
  gap: 8px;
}
.best-grid .tile { width: auto; display: flex; flex-direction: column; min-height: 0; }
.best-grid .tile-box { flex: 1; width: auto; height: auto; min-height: 0; border-radius: 12px; }
.best-grid .tile-name { flex: 0 0 auto; height: 2.6em; font-size: 10px; -webkit-line-clamp: 2; }

/* Wraps rather than ellipsing: a disambiguated name ("soft yellow (lighter)")
   is longer than the tile, and truncating it to "soft yellow (li…" throws away
   the one word that tells the two tiles apart. */
.tile-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 2.5em; margin-top: 5px; font-size: 10px; line-height: 1.25; color: #9a9a9a; text-align: center; overflow: hidden; }

/* Second-season note — text only. There are no trustworthy values for either
   person's second type, so it is deliberately not a block of swatches. */
.second-note { margin: 4px 0 20px; padding: 12px 14px; border-radius: 10px; background: #222; }
.second-note h3 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #8a8a8a; }
.second-note blockquote { margin: 0; font-size: 13px; line-height: 1.5; color: #d6d6d6; }
.second-note cite { display: block; margin-top: 6px; font-size: 11px; font-style: normal; color: #7a7a7a; }

#tabs { display: flex; gap: 1px; background: #2a2a2a; padding-bottom: env(safe-area-inset-bottom, 0); }
#tabs button { flex: 1; padding: 14px 6px; border: 0; background: #1a1a1a; color: #9a9a9a; font: inherit; cursor: pointer; }
#tabs button.on { color: #f0f0f0; box-shadow: inset 0 2px 0 #f0f0f0; }
#who { flex: 0 0 auto; padding-inline: 18px; color: #f0f0f0; }

#pane-style { color: #d6d6d6; }
#pane-style h2 { font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #8a8a8a; margin: 22px 0 6px; }
#pane-style ul { margin: 0; padding-left: 18px; }
#pane-style li { margin-bottom: 3px; }
#pane-style .note, #pane-style #sw-status { font-size: 11px; color: #7a7a7a; margin: 0 0 10px; }
.neutral-row { flex: 0 0 auto; margin-top: 8px; }
.neutral-row h3 { margin: 0 0 4px; font-size: 11px; font-weight: 500; color: #9a9a9a; }
.neutral-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.neutral-tiles .tile-box { aspect-ratio: 1; border-radius: 8px; }
.neutral-tiles .tile-name { font-size: 9px; height: 2.4em; }