/* Wheel of Life tool — layered on top of styles.css */

.tool-body {
  background:
    radial-gradient(1100px 600px at 12% -10%, oklch(95% 0.04 122 / 0.55), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, oklch(94% 0.05 92 / 0.45), transparent 65%),
    var(--paper);
}

/* Minimal centered header — only logo, links to homepage */
.tool-header {
  width: 100%;
  padding: 18px 16px 6px;
  display: flex;
  justify-content: center;
}

.brand-lockup-centered {
  display: inline-grid;
  grid-template-columns: 42px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  color: var(--ink-green);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}

.brand-lockup-centered:hover,
.brand-lockup-centered:focus-visible {
  background: oklch(96% 0.025 100 / 0.7);
  transform: translateY(-1px);
}

.brand-lockup-centered .brand-mark {
  width: 42px;
  height: 42px;
}

.brand-lockup-centered strong {
  font-family: Georgia, Times New Roman, serif;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 500;
  display: block;
}

.brand-lockup-centered small {
  display: block;
  margin-top: 4px;
  font-size: 0.6rem;
  font-weight: 540;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tool-main {
  width: min(1180px, calc(100% - 32px));
  margin: 8px auto 48px;
}

.tool-intro {
  max-width: 640px;
  margin: 4px auto 18px;
  text-align: center;
}

.tool-intro .eyebrow {
  margin-bottom: 4px;
}

.tool-intro h1 {
  margin: 2px auto 8px;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  max-width: 18ch;
}

.tool-lead {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.98rem;
}

.step-indicator {
  scroll-margin-top: 12px;
}

/* ----------- Resume card ----------- */

.resume-card {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 40;
  width: 280px;
  padding: 14px 14px 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: oklch(98% 0.018 95 / 0.96);
  border: 1px solid oklch(70% 0.05 100 / 0.45);
  border-radius: 14px;
  box-shadow: 0 18px 40px oklch(30% 0.05 145 / 0.18);
  backdrop-filter: blur(10px);
  animation: resume-card-in 360ms var(--ease);
}

.resume-card[hidden] {
  display: none !important;
}

.resume-card-body {
  flex: 1;
  min-width: 0;
}

.resume-card-title {
  margin: 0 0 2px;
  color: var(--ink-green);
  font-family: Georgia, Times New Roman, serif;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.2;
}

.resume-card-text {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.resume-card-actions {
  display: flex;
  gap: 6px;
}

.resume-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--forest);
  border-radius: 8px;
  background: var(--forest);
  color: var(--paper);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 540;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}

.resume-card-action svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resume-card-action:hover,
.resume-card-action:focus-visible {
  transform: translateY(-1px);
  background: var(--ink-green);
  outline: none;
}

.resume-card-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.resume-card-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}

.resume-card-close:hover,
.resume-card-close:focus-visible {
  background: oklch(90% 0.02 100);
  color: var(--ink-green);
  outline: none;
}

@keyframes resume-card-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 680px) {
  .resume-card {
    top: 6px;
    right: 6px;
    left: 6px;
    width: auto;
  }
}

/* ----------- Step indicator (3 steps) ----------- */

.step-indicator {
  margin: 6px auto 36px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  counter-reset: step;
}

.step-indicator li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: oklch(98% 0.012 95 / 0.6);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 540;
  letter-spacing: 0.01em;
  transition:
    border-color 220ms var(--ease),
    background 220ms var(--ease),
    color 220ms var(--ease);
}

.step-indicator li.is-active {
  border-color: oklch(42% 0.1 153 / 0.5);
  background: oklch(96% 0.03 122 / 0.9);
  color: var(--ink-green);
}

.step-indicator li.is-done {
  border-color: oklch(42% 0.1 153 / 0.32);
  color: var(--forest);
}

.step-num {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
}

.step-indicator li.is-active .step-num {
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}

.step-indicator li.is-done .step-num {
  background: oklch(70% 0.07 145);
  color: var(--paper);
  border-color: transparent;
}

/* ----------- Step panels ----------- */

.step-panel {
  padding: 30px 32px 28px;
  background: oklch(99% 0.008 95 / 0.92);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 70px oklch(32% 0.04 125 / 0.08);
}

.step-panel[hidden] {
  display: none;
}

.step-head {
  margin-bottom: 20px;
}

.step-head h2 {
  margin-bottom: 8px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.step-desc {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 1rem;
}

.step-desc em {
  font-style: italic;
  color: var(--ink-green);
}

.step-helper {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.step-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.step-actions-result {
  justify-content: space-between;
  flex-wrap: wrap;
}

.step-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.button-reset {
  /* Soft secondary look — bordered but visually de-emphasised */
  color: var(--muted);
}

.button-reset:hover,
.button-reset:focus-visible {
  color: oklch(45% 0.13 35);
  border-color: oklch(50% 0.13 35);
}

.button-ghost {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.button-ghost:hover,
.button-ghost:focus-visible {
  color: var(--ink-green);
}

button.button {
  cursor: pointer;
  font-family: inherit;
}

.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------- Step 1: dynamic name list ----------- */

.name-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.name-row {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: oklch(98% 0.012 96 / 0.7);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.name-row:focus-within {
  border-color: var(--forest);
  background: oklch(97% 0.02 122 / 0.85);
}

.name-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid oklch(0% 0 0 / 0.06);
  box-shadow: inset 0 0 0 2px oklch(100% 0 0 / 0.4);
}

.name-row input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 180ms var(--ease);
}

.name-row input:focus {
  outline: none;
  border-bottom-color: var(--forest);
}

.name-row-remove {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.name-row-remove svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}

.name-row-remove:hover,
.name-row-remove:focus-visible {
  background: oklch(92% 0.025 32);
  color: oklch(45% 0.13 32);
  outline: none;
}

.name-row-remove[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.add-area {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px dashed oklch(42% 0.1 153 / 0.55);
  border-radius: 10px;
  background: transparent;
  color: var(--forest);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 540;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}

.add-area svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.add-area:hover,
.add-area:focus-visible {
  background: oklch(96% 0.04 122 / 0.7);
  border-color: var(--forest);
  outline: none;
}

.add-area[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ----------- Step 2: rating (focus mode) ----------- */

.rate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 32px;
  align-items: start;
}

.rate-wheel-wrap {
  position: relative;
}

.rate-wheel-sticky {
  position: sticky;
  top: 24px;
}

.wheel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, oklch(98% 0.015 92), oklch(94% 0.022 100) 70%);
  box-shadow:
    0 30px 80px oklch(32% 0.04 125 / 0.16),
    inset 0 0 0 1px oklch(100% 0 0 / 0.4);
}

.wheel-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wheel-caption {
  margin: 14px auto 0;
  max-width: 44ch;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Right column — empty state + focused area editor */
.rate-focus {
  min-height: 320px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: oklch(98% 0.012 96 / 0.85);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rate-empty {
  margin: auto;
  max-width: 30ch;
  text-align: center;
  color: var(--muted);
}

.rate-empty-arrow {
  display: block;
  margin: 0 auto 12px;
  width: 32px;
  height: 32px;
  color: var(--forest);
  animation: nudge-left 1.6s var(--ease) infinite;
}

.rate-empty-arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rate-empty-title {
  margin: 0 0 4px;
  font-family: Georgia, Times New Roman, serif;
  font-size: 1.2rem;
  color: var(--ink-green);
}

.rate-empty-text {
  margin: 0;
  font-size: 0.9rem;
}

@keyframes nudge-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

.rate-focused-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rate-focused-head .name-swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rate-focused-name {
  margin: 0;
  font-family: Georgia, Times New Roman, serif;
  font-size: 1.45rem;
  color: var(--ink-green);
  line-height: 1.15;
}

.rate-counter {
  margin-left: auto;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rate-slider-block {
  margin-top: 4px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

.rate-slider-block.is-pending {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  height: 0;
  padding: 0;
  border: none;
  margin: 0;
  overflow: hidden;
}

.rate-slider-block.is-revealed {
  animation: reveal-block 320ms var(--ease);
}

@keyframes reveal-block {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.rate-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rate-slider-label {
  font-weight: 560;
  color: var(--ink-green);
  font-size: 0.94rem;
}

.rate-slider-label-sub {
  display: block;
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Editable big number — looks like a value display, behaves like an input */
input.rate-value {
  width: 56px;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-family: Georgia, Times New Roman, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink-green);
  text-align: center;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: text;
  -moz-appearance: textfield;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}

input.rate-value::-webkit-outer-spin-button,
input.rate-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.rate-value::placeholder {
  color: oklch(70% 0.02 130);
  font-style: normal;
}

input.rate-value:hover {
  background: oklch(96% 0.03 122 / 0.7);
  border-color: oklch(70% 0.05 100 / 0.5);
}

input.rate-value:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--forest);
  box-shadow: 0 0 0 3px oklch(42% 0.1 153 / 0.18);
}

.rate-slider-block input[type="range"] {
  width: 100%;
  margin: 6px 0 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.rate-slider-block input[type="range"]:focus {
  outline: none;
}

.rate-slider-block input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--track-color, var(--forest)) 0,
    var(--track-color, var(--forest)) var(--fill, 0%),
    oklch(86% 0.02 100) var(--fill, 0%),
    oklch(86% 0.02 100) 100%
  );
}

.rate-slider-block.is-target input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--track-color, var(--forest)) 0,
    var(--track-color, var(--forest)) var(--fill, 0%),
    oklch(86% 0.02 100) var(--fill, 0%),
    oklch(86% 0.02 100) 100%
  );
}

.rate-slider-block input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: oklch(86% 0.02 100);
}

.rate-slider-block input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--track-color, var(--forest));
}

.rate-slider-block input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--track-color, var(--forest));
  box-shadow: 0 4px 10px oklch(32% 0.04 125 / 0.18);
  cursor: grab;
  transition: transform 180ms var(--ease);
}

.rate-slider-block.is-target input[type="range"]::-webkit-slider-thumb {
  border-style: dashed;
  border-width: 2.5px;
  background: oklch(98% 0.012 95);
}

.rate-slider-block input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--track-color, var(--forest));
  box-shadow: 0 4px 10px oklch(32% 0.04 125 / 0.18);
  cursor: grab;
}

.rate-slider-block input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* Ruler-style scale: every integer 0–10 is a clickable tick. */
.rate-scale {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
}

.rate-scale-tick {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.7rem;
  color: var(--muted);
  padding: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 160ms var(--ease),
    color 160ms var(--ease),
    transform 160ms var(--ease);
}

.rate-scale-tick.is-major {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-green);
}

.rate-scale-tick:hover,
.rate-scale-tick:focus-visible {
  background: oklch(96% 0.03 122 / 0.8);
  color: var(--ink-green);
  outline: none;
}

.rate-scale-tick.is-current {
  background: var(--track-color, var(--forest));
  color: var(--paper);
  font-weight: 700;
}

/* Continue prompt (appears when "where you are" is set, before showing target slider) */
.rate-step-prompt {
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px dashed oklch(42% 0.1 153 / 0.4);
  border-radius: 10px;
  background: oklch(96% 0.04 122 / 0.5);
  color: var(--ink-green);
  font-size: 0.88rem;
  text-align: center;
}

.rate-focused-actions {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.rate-link {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 4px;
}

.rate-link:hover,
.rate-link:focus-visible {
  color: var(--ink-green);
  outline: none;
}

.rate-next-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--forest);
  background: var(--forest);
  color: var(--paper);
  border-radius: 10px;
  font: inherit;
  font-weight: 540;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

.rate-next-button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rate-next-button:hover,
.rate-next-button:focus-visible {
  transform: translateY(-1px);
  background: var(--ink-green);
  outline: none;
}

/* Mini list of all areas (alternative to clicking on wheel) */
.area-mini-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.area-mini-list li button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: oklch(98% 0.012 96 / 0.7);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 180ms var(--ease);
}

.area-mini-list li button .name-swatch {
  width: 10px;
  height: 10px;
  border-width: 0;
}

.area-mini-list li button:hover,
.area-mini-list li button:focus-visible {
  border-color: var(--forest);
  color: var(--ink-green);
  outline: none;
}

.area-mini-list li button.is-active {
  border-color: var(--forest);
  background: oklch(96% 0.04 122 / 0.95);
  color: var(--ink-green);
  font-weight: 560;
}

.area-mini-list li button.is-done::after {
  content: "✓";
  color: var(--forest);
  font-size: 0.78rem;
  margin-left: 2px;
}

/* SVG slice cursor + hover affordance (step 2) */
.wheel-clickable .wheel-slice {
  cursor: pointer;
  transition: fill-opacity 180ms var(--ease);
}

.wheel-clickable .wheel-slice:hover {
  fill-opacity: 0.12 !important;
}

/* Active slider block — looks like a "selected button card" with a
   prominent left accent bar, tinted background, colored border and ring.
   Color matches the marker the block edits (forest for score, gold
   for target). Always visible (not gated to desktop) so the user sees
   what's currently active even when only the slider is being used. */
.rate-slider-block {
  position: relative;
  overflow: hidden;
}

.rate-slider-block.is-click-active {
  border-color: oklch(42% 0.1 153 / 0.45);
  background: oklch(96% 0.022 150);
  box-shadow: 0 4px 14px oklch(35% 0.05 145 / 0.08);
}

.rate-slider-block.is-click-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: oklch(42% 0.1 153 / 0.7);
}

.rate-slider-block.is-target.is-click-active {
  border-color: oklch(62% 0.17 92 / 0.55);
  background: oklch(97% 0.035 95);
  box-shadow: 0 4px 14px oklch(70% 0.16 95 / 0.12);
}

.rate-slider-block.is-target.is-click-active::before {
  background: oklch(70% 0.17 95 / 0.75);
}

.rate-slider-block.is-clickable {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .rate-slider-block.is-clickable:hover:not(.is-click-active) {
    border-color: oklch(42% 0.1 153 / 0.45);
    background: oklch(96% 0.018 100);
  }
}

/* ----------- Step 3: see the whole ----------- */

.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 32px;
  align-items: start;
}

.result-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.focus-picker {
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: oklch(98% 0.012 96 / 0.85);
}

.focus-picker-label {
  margin: 0 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.focus-picker-hint {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--muted);
}

.focus-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.focus-chips li button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 180ms var(--ease);
}

.focus-chips li button .name-swatch {
  width: 12px;
  height: 12px;
  border-width: 0;
}

.focus-chips li button:hover,
.focus-chips li button:focus-visible {
  border-color: var(--forest);
  outline: none;
}

.focus-chips li button.is-selected {
  border-color: var(--forest);
  background: oklch(96% 0.04 122 / 0.95);
  color: var(--ink-green);
  font-weight: 560;
  box-shadow: 0 4px 12px oklch(32% 0.04 125 / 0.12);
}

.focus-chips li button.is-selected::after {
  content: "★";
  color: var(--forest);
  margin-left: 2px;
}

.notes-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: oklch(98% 0.012 96 / 0.85);
}

.notes-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.notes-block textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  resize: vertical;
  line-height: 1.55;
}

.notes-block textarea::placeholder {
  color: oklch(60% 0.02 130);
  font-style: italic;
}

.notes-block textarea:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  border-color: var(--forest);
}

.pdf-meta {
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: oklch(97% 0.015 96 / 0.6);
}

.pdf-meta summary {
  cursor: pointer;
  font-weight: 540;
  color: var(--ink-green);
}

.pdf-meta-fields {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.field input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}

.field input:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  border-color: var(--forest);
}

/* ----------- Footer ----------- */

.tool-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.tool-footer p {
  margin: 0;
  max-width: 92ch;
  margin-inline: auto;
}

/* ----------- Toast ----------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink-green);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 540;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px oklch(20% 0.05 145 / 0.3);
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms var(--ease), opacity 280ms var(--ease);
  z-index: 50;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ----------- Responsive ----------- */

@media (max-width: 980px) {
  .step-indicator {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .step-indicator li {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px;
    gap: 6px;
  }

  .step-name {
    font-size: 0.75rem;
  }

  .rate-grid,
  .result-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .rate-wheel-sticky {
    position: relative;
    top: auto;
  }

  .rate-focus {
    min-height: auto;
  }

  .step-panel {
    padding: 26px 22px;
  }

  /* Wheel takes full width on tablets/phones */
  .rate-wheel-wrap .wheel-frame,
  .result-wheel .wheel-frame {
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .tool-intro h1 {
    font-size: 2.5rem;
  }

  .step-indicator li .step-name {
    display: none;
  }

  .step-indicator li {
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  .step-panel {
    padding: 22px 18px;
    border-radius: 18px;
  }

  /* Default action row stays stacked, but step 3 stays horizontal so
     "Zacznij od nowa" sits opposite the others. */
  .step-actions:not(.step-actions-result) {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .step-actions:not(.step-actions-result) .button {
    width: 100%;
  }

  /* On phones, hide the reset border and let it look like a soft link
     (request: "na mobilnym jak najlepiej pod kątem UX"). */
  .step-actions-result {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }

  .step-actions-result .step-actions-right {
    flex-direction: column-reverse;
  }

  .step-actions-result .button {
    width: 100%;
  }

  .button-reset {
    border-color: transparent;
    background: transparent;
  }

  .name-list {
    grid-template-columns: 1fr;
  }

  .rate-focus {
    padding: 18px;
  }

  /* Tighter scale on small screens — keeps numbers readable */
  .rate-scale-tick {
    font-size: 0.66rem;
  }

  .rate-scale-tick.is-major {
    font-size: 0.78rem;
  }

  /* Smaller editable big number on phones to fit slider header */
  input.rate-value {
    font-size: 1.3rem;
    width: 48px;
  }
}