/* The colour lab's page (Instrument look): one card per palette, each drawn in its own palette (the card
   carries data-palette, so its tokens are that palette's whatever the app is set to). */

/* every card starts from today's values, so a palette that changes only a few tokens isn't coloured by
   whichever palette the app is set to */
html[data-look="instrument"] :where(.palette-card) {
  --surface-page: oklch(0.205 0.004 70); --plate: oklch(0.158 0.004 70); --seam: oklch(0.112 0.003 70);
  --on-surface: oklch(0.95 0.008 80); --on-surface-muted: oklch(0.76 0.006 75); --on-surface-faint: oklch(0.6 0.006 75);
  --line: oklch(0.33 0.004 70); --line-strong: oklch(0.46 0.004 70);
  --action-live: oklch(0.58 0.19 36); --attention: oklch(0.7 0.13 72); --signal-negative: oklch(0.72 0.14 25);
  --data-a: oklch(0.68 0.13 250); --data-b: oklch(0.68 0.12 155); --data-c: oklch(0.66 0.16 350); --data-d: oklch(0.7 0.12 300); --data-e: oklch(0.64 0.02 60);
}
html[data-look="instrument"] .colour-lab__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 24px; }
html[data-look="instrument"] :where(.palette-card) {
  display: grid; gap: 18px; padding: 24px; color: var(--on-surface);
  background: radial-gradient(circle at 6px 6px, color-mix(in oklch, var(--on-surface) 7%, var(--surface-page)) 1px, transparent 1.6px) 0 0 / 12px 12px, var(--surface-page);
  box-shadow: 0 0 0 2px var(--seam);
}
html[data-look="instrument"] .palette-card.is-current { box-shadow: 0 0 0 2px var(--on-surface); }
html[data-look="instrument"] .palette-card__name { margin: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; color: var(--on-surface); }
html[data-look="instrument"] .palette-card__now { margin-left: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-muted); vertical-align: middle; }
html[data-look="instrument"] .palette-card__idea { margin: 6px 0 0; max-width: 56ch; color: var(--on-surface-muted); font-size: 14px; line-height: 1.5; }

html[data-look="instrument"] .palette-card__plate { display: grid; gap: 12px; padding: 18px; background: var(--plate); box-shadow: 0 0 0 2px var(--seam); }
html[data-look="instrument"] .palette-card__kicker { margin: 0; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-faint); }
html[data-look="instrument"] .palette-card__title { margin: 0; font-size: 19px; font-weight: 600; color: var(--on-surface); }
html[data-look="instrument"] .palette-card__answers { display: flex; flex-wrap: wrap; align-items: end; gap: 18px; }
html[data-look="instrument"] .palette-card__answer { display: grid; gap: 6px; }
html[data-look="instrument"] .palette-card__dots { display: grid; grid-template-columns: repeat(4, 9px); gap: 4px; }
html[data-look="instrument"] .palette-card__dots i { width: 9px; height: 9px; border-radius: 50%; }
html[data-look="instrument"] .palette-card__answer strong { font-size: 22px; font-weight: 500; color: var(--on-surface); }
html[data-look="instrument"] .palette-card__states { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 13px; color: var(--on-surface-muted); }
html[data-look="instrument"] .palette-card__states span { display: inline-flex; align-items: center; gap: 6px; }
html[data-look="instrument"] .palette-card__states span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-surface); }
html[data-look="instrument"] .palette-card__states [data-state="under-way"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-surface); }
html[data-look="instrument"] .palette-card__states [data-state="not-started"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-surface-faint); }
html[data-look="instrument"] .palette-card__states [data-state="waiting"] { color: var(--attention); }
html[data-look="instrument"] .palette-card__states [data-state="waiting"]::before { background: var(--attention); }
html[data-look="instrument"] .palette-card__states [data-state="failed"] { color: var(--signal-negative); }
html[data-look="instrument"] .palette-card__states [data-state="failed"]::before { background: var(--signal-negative); }

/* the ground: a scrap of land in the map's dots, a persona on it, the keys */
html[data-look="instrument"] .palette-card__ground { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
html[data-look="instrument"] .palette-card__land { width: 96px; height: 36px; background: radial-gradient(circle at 3px 3px, color-mix(in oklch, var(--on-surface) 58%, var(--surface-page)) 1.4px, transparent 1.9px) 0 0 / 6px 6px; -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
html[data-look="instrument"] .palette-card__persona { width: 10px; height: 10px; margin-left: -62px; margin-right: 52px; border-radius: 50%; background: var(--action-live); box-shadow: 0 0 0 1.5px var(--surface-page); }
html[data-look="instrument"] .palette-card__key { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; font-size: 14px; font-weight: 600; background: var(--action-live); color: oklch(0.99 0.004 80); }
html[data-look="instrument"] .palette-card__key--quiet { background: color-mix(in oklch, var(--on-surface) 14%, var(--surface-page)); color: var(--on-surface); font-weight: 500; }

html[data-look="instrument"] .palette-card__roles { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; }
html[data-look="instrument"] .palette-card__roles > div { display: grid; gap: 5px; }
html[data-look="instrument"] .palette-card__roles dt { font: 500 9.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-faint); }
html[data-look="instrument"] .palette-card__roles dd { margin: 0; width: 44px; height: 22px; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-surface) 12%, transparent); }
html[data-look="instrument"] .palette-card__roles .palette-card__answer-swatches dd { width: auto; height: 22px; display: flex; box-shadow: none; }
html[data-look="instrument"] .palette-card__answer-swatches i { width: 22px; height: 22px; }
html[data-look="instrument"] .palette-card__apply { margin: 0; }
html[data-look="instrument"] .colour-lab__group { display: grid; gap: 16px; }
html[data-look="instrument"] .colour-lab { gap: 40px; }