/* 2026-09-07 design-review pass: a 4-column compact grid (App Store /
   System Settings category-tile density) reads as one considered choice
   at a glance, rather than an 8-item list you scroll down -- see the
   mood-picker layout mockup from that pass. Each tile is a vertical card
   (swatch band on top, name below) instead of a horizontal row, so the
   swatch preview can be full-width instead of a thin 96px strip. */
.moodPicker{margin:24px auto 32px;max-width:880px;}
.moodGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:700px){.moodGrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.moodGrid{grid-template-columns:1fr;}}
.moodTile{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);
  cursor:pointer;text-align:left;font:inherit;}
.moodTile:hover,.moodTile:focus-visible{border-color:var(--text-secondary);}
.moodTileRecommended{border-color:var(--accent,#D2571F);}
.moodTileSwatchRow{display:flex;width:100%;height:34px;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(90deg,#ccc,#eee);}
.moodTileSwatch{flex:1;}
.moodTileName{font-weight:500;font-size:13px;}
/* Sits on the tile's own top border (like a fieldset legend) rather than
   over the tile's content -- an internal top:10px/right:10px placement
   overlapped the swatch-preview row underneath it, at every viewport
   width, regardless of which mood's colours happened to render there. */
.moodTileBadge{position:absolute;top:-9px;right:12px;background:var(--surface);
  padding:1px 6px;border-radius:4px;font-size:11px;font-weight:600;color:var(--accent-text,#B54716);}
.moodPickerControls{margin:0 0 20px;}
.paletteTournament{margin:24px 0 32px;}
.paletteTournament[hidden]{display:none;}
/* 2026-09-07 design-review pass: the wheel toggle, the round, the actions
   row, and the saved-colours tray used to be four separately-bordered
   blocks stacked with gaps between them. They now live inside ONE panel
   with internal dividers, so the whole tournament screen reads as one
   focused instrument rather than a pile of independent boxes. See the
   tournament-layout mockup from that pass. */
.tournamentPanel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  padding:18px 20px 20px;}
.tournamentPanelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.tournamentMoodName{font-size:13px;font-weight:600;color:var(--text);}
.tournamentWheelToggle{min-height:0;border:1px solid var(--border);border-radius:999px;background:transparent;
  color:var(--text-secondary);font-size:11.5px;font-weight:500;padding:4px 11px;cursor:pointer;}
.tournamentWheelToggle:hover,.tournamentWheelToggle:focus-visible{border-color:var(--text-secondary);color:var(--text);}
.tournamentWheelToggle[aria-expanded="true"]{border-color:var(--accent,#D2571F);color:var(--accent-text,#B54716);}
.tournamentWheelToggle[hidden]{display:none;}
#tournamentWheelMount{margin-bottom:16px;}
#tournamentWheelMount[hidden]{display:none;}
/* Visually hidden, not display:none -- a display:none element is pruned
   from the accessibility tree in every current browser/AT combination, so
   #startingColourGroup's own aria-labelledby="startingColourHeading"
   (index.html) would silently resolve to an empty accessible name once
   this heading (relocated here from the old customise-palette markup)
   stopped rendering. This keeps the text available to that reference
   while still removing it from view. */
#tournamentWheelMount .customiseGroup h3{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.tournamentRound{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:860px){.tournamentRound{grid-template-columns:1fr;}}
.tournamentActions{display:flex;gap:12px;margin-top:16px;}
.tournamentActions #tournamentUse{flex:1;}
.tournamentActions #tournamentUse[disabled]{opacity:.5;cursor:not-allowed;}
.tournamentCard{border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.tournamentCardKept{border-color:var(--accent,#D2571F);}
/* Explicit per-card control (not the whole card) is the single way to
   freeze a palette -- see the 2026-09-06 redesign. A real <button>, so
   Enter/Space work natively with no custom keydown handling needed. */
.keepPaletteBtn{min-height:0;align-self:flex-start;border:1px solid var(--border);border-radius:999px;
  padding:4px 12px;font-size:12.5px;font-weight:500;background:var(--surface);color:var(--text-secondary);cursor:pointer;}
.keepPaletteBtn:hover,.keepPaletteBtn:focus-visible{border-color:var(--text-secondary);color:var(--text);}
.keepPaletteBtnActive{border-color:var(--accent,#D2571F);color:var(--accent-text,#B54716);background:var(--accent-soft,transparent);}
.tournamentSwatchRow{display:flex;gap:6px;}
.tournamentSwatchWrap{position:relative;flex:1;min-width:0;}
.tournamentSwatch{display:block;width:100%;height:56px;border:none;border-radius:8px;cursor:pointer;padding:0;}
.tournamentSwatch:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1.5px var(--accent);}
/* 2026-09-07 design-review pass: a small icon overlaid on the swatch's own
   corner, hidden until the swatch is hovered or focused, replaces what used
   to be a permanent "Like" text caption under every one of the 18 swatches
   on screen -- reclaims a full text line per swatch. pointer-events:none at
   rest (not display:none) keeps it in the tab order and lets :focus reveal
   it for keyboard users, exactly like a mouse hover would. */
.likeColourBtn{min-height:0;position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;font-size:9.5px;line-height:18px;text-align:center;
  padding:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 120ms ease;}
.tournamentSwatchWrap:hover .likeColourBtn,
.tournamentSwatchWrap:focus-within .likeColourBtn{opacity:1;pointer-events:auto;}
/* Decorative only (aria-hidden, mood-round only) -- a visible cue that the
   swatch itself pins a new anchor, mirroring the Like icon's hover/focus
   reveal at the opposite corner so the higher-consequence action isn't the
   one relying solely on a slow-to-discover title tooltip. */
.pinAnchorHint{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:10.5px;line-height:18px;text-align:center;
  opacity:0;pointer-events:none;transition:opacity 120ms ease;}
.tournamentSwatchWrap:hover .pinAnchorHint,
.tournamentSwatchWrap:focus-within .pinAnchorHint{opacity:1;}
.tournamentGradient{height:56px;border-radius:8px;}
/* Shown only when a candidate carries a numeric score (the saved-colours
   tweak round) -- absent for ordinary mood candidates. */
.tournamentScoreBadge{align-self:flex-start;font-size:12px;font-weight:600;color:var(--text-secondary);}
.tournamentScoreCaption{align-self:flex-start;font-size:11.5px;color:var(--text-tertiary);margin-top:-6px;}
/* A slim footer strip inside the same panel (a top divider, not its own
   bordered box) -- label, chips, and the call-to-action all on one line. */
.savedColours{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.savedColoursLabel{font-size:12px;color:var(--text-tertiary);flex:none;}
/* Same small pill shape as .keepPaletteBtn (real button chrome, not a bare
   text link), but accent-coloured by default -- this one's a genuine call
   to action, not a neutral state toggle. */
#useSavedColoursBtn{min-height:0;flex:none;border:1px solid var(--accent,#D2571F);border-radius:999px;
  padding:4px 12px;font-size:12.5px;font-weight:500;background:var(--accent-soft,transparent);
  color:var(--accent-text,#B54716);cursor:pointer;}
#useSavedColoursBtn:hover,#useSavedColoursBtn:focus-visible{background:var(--accent,#D2571F);color:var(--surface);}
#useSavedColoursBtn[disabled]{opacity:.5;cursor:not-allowed;background:var(--accent-soft,transparent);color:var(--accent-text,#B54716);}
.savedColoursRow{flex:1;display:flex;flex-wrap:wrap;gap:8px;min-width:0;}
.savedColourChip{position:relative;display:inline-flex;width:26px;height:26px;border-radius:var(--radius-sm);
  border:1px solid var(--border);}
.savedColourRemove{min-height:0;position:absolute;top:-6px;right:-6px;width:16px;height:16px;line-height:14px;
  border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);
  font-size:11px;cursor:pointer;padding:0;}
.savedColourRemove:hover,.savedColourRemove:focus-visible{color:var(--text);border-color:var(--text-secondary);}

.tournamentSwatchGrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.tournamentSwatchGrid .tournamentSwatch{height:34px;border-radius:5px}
.moodTile:hover,.moodTile:focus-visible{background:#fff;color:#17171d;box-shadow:0 3px 12px #17171d12}
@media(max-width:760px){.tournamentSwatchGrid{grid-template-columns:repeat(6,minmax(0,1fr))}}