:root {
  --crab: #E4572E;
  --train: #2563EB;
  --sheet: #16A34A;
  --bg: #ffffff;
  --fg: #111111;
  --muted: #777777;
  --line: #e4e4e4;
  --soft: #f4f4f4;
  --zone-alpha: 0.13;
  --slider: #9a9a9a;
  --q: #14B8A6;
  --q-ink: #0d1f1d;
  --q-soft: rgba(20, 184, 166, 0.22);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --fg: #eeeeee;
    --muted: #8a8a8a;
    --line: #2a2a2a;
    --soft: #1c1c1c;
    --zone-alpha: 0.2;
    --slider: #bdbdbd;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Jelly paints its wobble a little outside each control; never let that cause sideways scroll. */
html, body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
[hidden] { display: none !important; }

main { padding: 24px 16px 24px; }
.screen { max-width: 560px; margin: 0 auto; }
.screen.wide { max-width: 1200px; }
#name-back { --jelly-icon-button-size: 60px; }
#name-submit { --jelly-button-min-width: 0; --jelly-button-padding-inline: 28px; --jelly-button-height: 52px; }

h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 6px 0 28px; font-weight: 700; }
.count, .muted { color: var(--muted); }
.count { margin: 0; font-variant-numeric: tabular-nums; }
.small { font-size: 14px; }

.btn {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  padding: 11px 20px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover:not(:disabled) { border-color: var(--fg); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }

input, textarea {
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--fg); }

.name-form { display: flex; flex-direction: column; gap: 22px; }
.row { display: flex; gap: 12px; align-items: center; }

/* quiz */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 10; }
.progress-fill { height: 100%; width: 0; background: var(--q, var(--fg)); transition: width 0.3s ease, background 0.3s ease; }
#quiz, #name-step {
  min-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6dvh;
}
#quiz[hidden], #name-step[hidden] { display: none !important; }
#q-prompt { text-align: center; }
.slider-card { margin-bottom: 36px; }
.poles { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 14px; font-weight: 600; }
.pole { flex: 1; transition: opacity 0.1s; }
.pole.right { text-align: right; }

/* Jelly controls. The slider is one neutral colour on every question so it never hints
   which side is which. */
/* One accent for every question. Teal is not a category colour, so it hints at nothing. */
jelly-slider {
  display: block;
  width: 100%;
  --jelly-track: var(--line);
  --jelly-accent: var(--q, var(--slider));
}
jelly-button, jelly-icon-button { --jelly-fill: var(--q-soft, var(--line)); --jelly-label: var(--q, var(--fg)); }
jelly-button.primary, jelly-icon-button.primary { --jelly-fill: var(--q, var(--fg)); --jelly-label: var(--q-ink, var(--bg)); }
/* Quiz nav is symmetric: round back on the left, round next on the right, neither centred. */
#q-back, #q-next { --jelly-icon-button-size: 60px; transition: opacity 0.2s ease; }
#q-next.waiting { opacity: 0; pointer-events: none; }
jelly-button[disabled] { opacity: 0.4; }
jelly-input { display: block; width: 100%; --jelly-accent: var(--q); --jelly-color-border-focus: var(--q); --jelly-ring-color: var(--q-soft); }
jelly-textarea { --jelly-accent: var(--q); --jelly-color-border-focus: var(--q); --jelly-ring-color: var(--q-soft); }
jelly-textarea { display: block; width: 100%; }
.nav-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* "neither" sits in the middle, quieter than next; filled in when it is the answer. */
#q-neither { --jelly-fill: transparent; --jelly-label: var(--muted); --jelly-button-min-width: 0; --jelly-button-padding-inline: 22px; }
#q-neither.on { --jelly-fill: var(--q-soft); --jelly-label: var(--q); }
.error { color: var(--crab); }

/* result */
.r-head { margin: 18px 0 4px; text-align: center; }
.bars { display: grid; gap: 12px; margin: 4px 0 20px; }
.bar { display: grid; grid-template-columns: 96px 1fr 44px; gap: 10px; align-items: center; }
.bar-track { height: 10px; background: var(--soft); border-radius: 10px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 10px; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.feedback { display: grid; gap: 16px; margin-top: 24px; }
.feedback jelly-button { --jelly-button-min-width: 0; --jelly-button-padding-inline: 28px; --jelly-button-height: 52px; }
.feedback label { color: var(--muted); }
.feedback textarea { resize: vertical; }

/* ternary chart */
/* Width is capped by the screen height so the whole triangle is always visible. 1.1656 = chart aspect ratio. */
.tchart { position: relative; width: min(100%, calc((100dvh - var(--chart-offset, 120px)) * 1.1656)); margin: 0 auto; }
#all-chart { --chart-offset: 50px; }
#result-chart { --chart-offset: 200px; }
/* A one-finger swipe scrolls the page; pinch zooms the chart; once zoomed, a drag pans it. */
.tchart svg { display: block; width: 100%; height: auto; aspect-ratio: 1260 / 1081; touch-action: pan-y; user-select: none; cursor: default; }
.tchart.zoomed svg { cursor: grab; touch-action: none; }
.tchart.zoomed svg:active { cursor: grabbing; }
.zone { stroke: var(--fg); stroke-opacity: 0.35; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.zone-crab { fill: rgba(228, 87, 46, var(--zone-alpha)); }
.zone-train { fill: rgba(37, 99, 235, var(--zone-alpha)); }
.zone-spreadsheet { fill: rgba(22, 163, 74, var(--zone-alpha)); }
.zone-crab-train { fill: rgba(132, 78, 140, var(--zone-alpha)); }
.zone-train-spreadsheet { fill: rgba(30, 130, 155, var(--zone-alpha)); }
.zone-crab-spreadsheet { fill: rgba(125, 125, 60, var(--zone-alpha)); }
.zone-soup { fill: rgba(128, 128, 128, calc(var(--zone-alpha) * 0.7)); }
.grid-line { stroke: var(--fg); stroke-opacity: 0.08; stroke-width: 1; vector-effect: non-scaling-stroke; }
.outline { fill: none; stroke: var(--fg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tick { fill: var(--muted); font-size: 22px; }
.axis-title { font-size: 28px; font-weight: 700; }
.axis-crab { fill: var(--crab); }
.axis-train { fill: var(--train); }
.axis-spreadsheet { fill: var(--sheet); }
.zone-label { fill: var(--fg); fill-opacity: 0.32; font-size: 26px; font-weight: 600; pointer-events: none; }
/* Names get a halo in the page colour so they stay readable over gridlines and zones. */
.name-label { fill: var(--fg); font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-linejoin: round; pointer-events: none; }
.name-label.mine { font-weight: 800; }
.dot { stroke: var(--bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.you-dot { stroke: var(--bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }

.tchart-tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--fg);
  color: var(--bg);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  display: grid;
  gap: 2px;
}
.tip-zone { opacity: 0.7; }
.tip-split i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

@media (max-width: 820px) {
  #quiz { justify-content: flex-end; padding-bottom: 24dvh; }
  /* Name sits high on phones so the keyboard never covers it. */
  #name-step { justify-content: flex-start; padding-top: 14dvh; padding-bottom: 0; }
  #result-chart { --chart-offset: 40px; }
  h2 { font-size: 26px; }
  .poles { font-size: 16px; }
  .tick { font-size: 30px; }
  .axis-title { font-size: 36px; }
  .zone-label { font-size: 32px; }
}