.paletier-tools {
  --pct-paper: #faf7ef;
  --pct-panel: #fffdf8;
  --pct-line: #d9d0bd;
  --pct-ink: #22304c;
  --pct-muted: #6e6a5e;
  --pct-soft: #f0eadc;
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--pct-ink);
}

.paletier-tools * { box-sizing: border-box; }

.paletier-tool-page,
.paletier-tool-page *,
.paletier-tools-grid-wrap,
.paletier-tools-grid,
.paletier-tool-shell,
.paletier-tool-panel,
.paletier-tool-result,
.paletier-tool-extra,
.pct-result-grid,
.pct-compare,
.pct-pair-cards,
.pct-fix-cards,
.pct-ratio-cards,
.pct-role-map {
  min-width: 0;
  max-width: 100%;
}

.paletier-tools-grid-wrap {
  max-width: 1120px;
  margin: 0 auto 34px;
  padding: 0 22px;
}

.paletier-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.paletier-tool-card {
  position: relative;
  aspect-ratio: 11 / 6;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line, #e3e1da);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  background: #1f2430;
  isolation: isolate;
}

.paletier-tool-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  z-index: 0;
}

.paletier-tool-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,10,18,.08), rgba(8,10,18,.72));
  z-index: 0;
}

.paletier-tool-card-body {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px;
}

.paletier-tool-number {
  width: fit-content;
  font: 700 11px 'JetBrains Mono', ui-monospace, monospace;
  color: #fff;
  background: color-mix(in srgb, var(--pct-accent) 86%, #000 14%);
  padding: 5px 8px;
  border-radius: 6px;
}

.paletier-tool-card strong {
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-size: 27px;
  line-height: 1.02;
  max-width: 13ch;
}

.paletier-tool-card-body > span:last-child {
  color: rgba(255,255,255,.84);
  font-size: 13px;
  line-height: 1.45;
}

.paletier-tool-page { background: var(--pct-paper); }

.paletier-tool-hero {
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(180deg, rgba(250,247,239,0), var(--pct-paper) 98%), var(--pct-hero-image);
  background-size: 100% 100%, min(1320px, 118vw) auto;
  background-repeat: no-repeat;
  background-position: center bottom, var(--pct-hero-position, center);
  position: relative;
}

.paletier-tool-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,25,22,.05), rgba(24,25,22,.58));
}

.paletier-tool-hero-inner {
  position: relative;
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: 0 0 34px;
  color: #fff;
}

.paletier-tool-hero p {
  margin: 0 0 8px;
  font: 700 11px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.paletier-tool-hero h1 {
  margin: 0;
  max-width: 760px;
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-size: clamp(40px, 7vw, 76px);
  line-height: .92;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.paletier-tool-hero span {
  display: block;
  max-width: 620px;
  margin-top: 14px;
  color: rgba(255,255,255,.86);
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.paletier-tool-shell {
  width: min(1120px, calc(100% - 44px));
  margin: -28px auto 34px;
  display: grid;
  grid-template-columns: minmax(300px, 390px) 1fr;
  gap: 16px;
  position: relative;
}

.paletier-tool-panel {
  background: var(--pct-panel);
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  box-shadow: 0 24px 44px -32px rgba(28,24,16,.38);
}

.paletier-tool-form {
  padding: 18px;
  display: grid;
  gap: 13px;
  align-self: start;
}

.paletier-tool-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pct-muted);
}

.paletier-tool-form input,
.paletier-tool-form select {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--pct-ink);
  padding: 0 13px;
  font: 600 14px 'Inter', system-ui, sans-serif;
}

.paletier-tool-form input[type="color"] {
  padding: 4px;
  cursor: pointer;
}

.paletier-tool-form button {
  min-height: 44px;
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  background: var(--pct-soft);
  color: var(--pct-ink);
  font-weight: 750;
  cursor: pointer;
}

.paletier-tools :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pct-accent) 75%, #fff 25%);
  outline-offset: 3px;
}

.paletier-tool-form button[type="submit"] {
  min-height: 50px;
  border-color: var(--pct-accent);
  background: var(--pct-accent);
  color: #fff;
}

.paletier-tool-form button:disabled { opacity: .6; cursor: wait; }

.paletier-chip-row,
.paletier-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.paletier-chip-row button,
.paletier-tool-actions button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 12px;
}

.paletier-chip-row button.is-active {
  background: var(--pct-accent);
  border-color: var(--pct-accent);
  color: #fff;
}

.paletier-color-list {
  display: grid;
  gap: 10px;
}

.paletier-color-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 34px 34px 34px;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.paletier-color-row button { min-height: 36px; font-size: 15px; padding: 0; }
.paletier-color-row button:disabled { opacity: .35; cursor: default; }

.paletier-add-color { width: 100%; border-style: dashed !important; }

.paletier-tool-status {
  min-height: 20px;
  font-size: 13px;
  color: var(--pct-muted);
}

.paletier-tool-status.is-error { color: #9b3329; }

.paletier-tool-result {
  min-height: 420px;
  padding: 18px;
}

.paletier-empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--pct-muted);
  border: 1px dashed var(--pct-line);
  border-radius: 8px;
  padding: 24px;
}

.pct-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pct-result-block {
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  min-width: 0;
}

.pct-result-block.is-wide { grid-column: 1 / -1; }

.pct-result-block.is-feature { background: color-mix(in srgb, var(--pct-accent) 8%, #fff 92%); }

.pct-result-block h3 {
  margin: 0 0 9px;
  font: 700 20px 'Cormorant Garamond', 'Fraunces', Georgia, serif;
}

.pct-result-block p,
.pct-result-block li {
  color: var(--pct-muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pct-result-block ul { padding-left: 18px; margin: 8px 0 0; }

.pct-swatch-row,
.pct-palette-strip {
  display: flex;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
}

.pct-palette-strip span {
  flex: 1 1 0;
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  color: #fff;
  font: 700 10px 'JetBrains Mono', ui-monospace, monospace;
  text-shadow: 0 1px 3px rgba(0,0,0,.32);
  overflow-wrap: anywhere;
}

.pct-swatch {
  display: grid;
  gap: 8px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  border-top: 1px solid var(--pct-line);
  padding: 9px 0;
}

.pct-swatch:first-child { border-top: 0; }

.pct-swatch-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pct-swatch-text small { color: var(--pct-muted); }

.pct-chip {
  display: inline-block;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
  vertical-align: middle;
  flex: none;
}

.pct-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pct-copy {
  min-height: 32px;
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  background: var(--pct-soft);
  color: var(--pct-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pct-tab-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  max-width: 100%;
}

.pct-tab-row button[role="tab"] {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 13px;
}

.pct-tab-row button[aria-selected="true"] {
  background: var(--pct-accent);
  border-color: var(--pct-accent);
  color: #fff;
}

.pct-hidden { display: none !important; }

.pct-meter {
  height: 8px;
  border-radius: 999px;
  background: var(--pct-soft);
  overflow: hidden;
}

.pct-meter span { display: block; height: 100%; background: var(--pct-accent); }

.paletier-tool-extra {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.paletier-guide-block {
  border-top: 1px solid var(--pct-line);
  padding-top: 18px;
}

.paletier-guide-block ol {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--pct-muted);
}

.paletier-guide-block details {
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  background: var(--pct-panel);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.paletier-guide-block summary {
  cursor: pointer;
  font-weight: 750;
}

.paletier-faq-block { grid-column: 1 / -1; }

.paletier-tool-extra h2 {
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-size: 28px;
  margin: 0 0 8px;
}

.paletier-tool-extra p {
  color: var(--pct-muted);
  margin: 0;
}

.paletier-related-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.paletier-related-tools a {
  border: 1px solid var(--pct-line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--pct-ink);
  text-decoration: none;
  background: var(--pct-panel);
  font-size: 13px;
}

@media (max-width: 1024px) {
  .paletier-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paletier-tool-shell { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .paletier-tools-grid-wrap,
  .paletier-tool-shell,
  .paletier-tool-extra,
  .paletier-tool-hero-inner {
    width: calc(100% - 32px);
  }

  .paletier-tools-grid,
  .paletier-tool-extra,
  .pct-result-grid {
    grid-template-columns: 1fr;
  }

  .paletier-tool-card,
  .paletier-tool-card-body { min-height: 0; }
  .paletier-tool-hero { min-height: 280px; }
  .paletier-tool-shell { margin-top: -18px; }
  .paletier-tool-hero h1 {
    font-size: clamp(32px, 9vw, 42px);
    line-height: .98;
  }
  .paletier-tool-hero span {
    max-width: 100%;
    font-size: 15px;
  }
  .paletier-tool-form,
  .paletier-tool-result {
    padding: 14px;
  }
  .paletier-color-row {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .paletier-color-row button {
    min-height: 44px;
    min-width: 44px;
  }
  .paletier-color-row [data-remove] {
    grid-column: 3;
    grid-row: 1;
  }
  .paletier-color-row [data-move="up"],
  .paletier-color-row [data-move="down"] {
    grid-row: 2;
  }
  .paletier-color-row [data-move="up"] { grid-column: 1 / 2; }
  .paletier-color-row [data-move="down"] { grid-column: 2 / 3; }
  .paletier-color-row input:not([type="color"]) { min-width: 0; }
}

/* ---------- shared result components (v1.2.0) ---------- */

.pct-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.paletier-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.paletier-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pct-muted);
  padding: 0;
  margin-bottom: 2px;
}

.paletier-field-note {
  margin: 0;
  font-size: 12px;
  color: var(--pct-muted);
}

.pct-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid transparent;
}

.pct-badge--good { background: #e5efe0; color: #2f5d33; border-color: #b9d2ae; }
.pct-badge--warn { background: #f7ecd7; color: #7a5410; border-color: #e0c790; }
.pct-badge--bad  { background: #f7dfdb; color: #8c2f23; border-color: #e3b1a8; }
.pct-badge--muted { background: var(--pct-soft); color: var(--pct-muted); border-color: var(--pct-line); }

.pct-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }

.pct-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--pct-line);
  background: var(--pct-soft);
  font-size: 12px;
  color: var(--pct-ink);
}

.pct-big-number {
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-size: 46px;
  line-height: 1;
  color: var(--pct-accent);
}

.pct-big-number.is-after { color: #2f5d33; }

.pct-score-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.pct-score-arrow { color: var(--pct-muted); }

.pct-empty-note { color: var(--pct-muted); font-size: 13px; }

.pct-subhead { margin-top: 16px !important; }

.pct-copy.is-copied { background: #e5efe0; border-color: #b9d2ae; color: #2f5d33; }

.pct-palette-strip.is-tall span { min-height: 96px; }

.pct-color-summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.pct-color-summary > .pct-chip { width: 64px; height: 64px; }

.pct-color-summary-text h3 { margin-bottom: 3px; }
.pct-color-summary-text p { margin: 2px 0 0; }

.pct-use-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.pct-use-card-head h4 {
  margin: 0;
  font: 700 18px 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  color: var(--pct-ink);
}

.pct-use-score strong { font-size: 20px; color: var(--pct-accent); }

.pct-use-role { font-weight: 700; color: var(--pct-ink) !important; }

.pct-use-meta, .pct-use-watch { font-size: 12.5px !important; }
.pct-use-watch { color: #8c5b23 !important; }

.pct-avoid-list {
  list-style: none;
  margin: 6px 0 0 !important;
  padding: 0 !important;
}

.pct-avoid-list li {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--pct-line);
  padding: 8px 0;
}

.pct-avoid-list li:first-child { border-top: 0; }
.pct-avoid-list strong { color: var(--pct-ink); }

.pct-metric-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.pct-metric-label { font-size: 12px; font-weight: 700; color: var(--pct-muted); }
.pct-metric-value { font-size: 12px; }

.pct-space-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
}

.pct-space-list dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pct-muted);
  align-self: center;
}

.pct-space-list dd { margin: 0; overflow-wrap: anywhere; }

.pct-pair-cards, .pct-fix-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pct-pair-card, .pct-fix-card, .pct-role-card, .pct-ratio-card {
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  background: var(--pct-panel);
  padding: 13px;
  min-width: 0;
}

.pct-fix-card.is-active { border-color: var(--pct-accent); box-shadow: 0 0 0 1px var(--pct-accent); }

.pct-pair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.pct-pair-chips { display: inline-flex; align-items: center; gap: 5px; }
.pct-pair-chips .pct-chip { width: 30px; height: 30px; }
.pct-pair-sim .pct-chip { width: 22px; height: 22px; vertical-align: middle; }

.pct-change-row { align-items: center; }

.pct-fix-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0 !important; }

.pct-wcag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.pct-role-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }

.pct-role-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--pct-muted);
}

.pct-role-strip-item .pct-chip { width: 26px; height: 26px; }
.pct-role-strip-item strong { color: var(--pct-ink); }

.pct-lsc { color: var(--pct-muted) !important; }

.pct-ratio-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pct-ratio-cards.is-compact { grid-template-columns: 1fr; }

.pct-ratio-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pct-ratio-card h4 {
  margin: 0;
  font: 700 17px 'Cormorant Garamond', 'Fraunces', Georgia, serif;
}

.pct-ratio-role { font-size: 12px; color: var(--pct-muted); }
.pct-ratio-card .pct-chip { width: 100%; height: 52px; border-radius: 6px; }
.pct-ratio-card .pct-copy { margin-top: 8px; }

.pct-disclaimer p { font-size: 12px !important; }

[data-theme="dark"] .pct-badge--good { background: #253526; color: #a4cf9d; border-color: #3c5a3c; }
[data-theme="dark"] .pct-badge--warn { background: #38301d; color: #dcbd7c; border-color: #5c4d28; }
[data-theme="dark"] .pct-badge--bad  { background: #3b2523; color: #e2a49a; border-color: #64362f; }
[data-theme="dark"] .pct-big-number.is-after { color: #a4cf9d; }
[data-theme="dark"] .pct-copy.is-copied { background: #253526; border-color: #3c5a3c; color: #a4cf9d; }
[data-theme="dark"] .pct-pair-card,
[data-theme="dark"] .pct-fix-card,
[data-theme="dark"] .pct-role-card,
[data-theme="dark"] .pct-ratio-card { background: #20201d; }
[data-theme="dark"] .pct-use-watch { color: #dcbd7c !important; }

@media (max-width: 640px) {
  .pct-pair-cards, .pct-fix-cards, .pct-ratio-cards { grid-template-columns: 1fr; }
  .pct-color-summary { grid-template-columns: 48px minmax(0, 1fr); }
  .pct-color-summary > .pct-chip { width: 48px; height: 48px; }
  .pct-color-summary .pct-copy { grid-column: 1 / -1; }

  /* Comfortable touch targets on small screens (spec 26). */
  .pct-copy, .paletier-color-row button, .paletier-chip-row button, .paletier-tool-actions button {
    min-height: 44px;
  }
  .pct-copy { padding: 0 12px; }
  .pct-tab-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .pct-tab-row button[role="tab"] {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .pct-palette-strip.is-tall span {
    min-height: 68px;
    font-size: 9px;
    padding: 6px;
  }
  .pct-space-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pct-metric-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pct-score-line {
    align-items: center;
  }
}

[data-theme="dark"] .paletier-tools {
  --pct-paper: #1c1c19;
  --pct-panel: #252522;
  --pct-line: #45453e;
  --pct-ink: #f0efe9;
  --pct-muted: #b8b4a5;
  --pct-soft: #303029;
}

[data-theme="dark"] .paletier-tool-form input,
[data-theme="dark"] .paletier-tool-form select,
[data-theme="dark"] .pct-result-block,
[data-theme="dark"] .paletier-guide-block details {
  background: #20201d;
  color: var(--pct-ink);
}

[data-theme="dark"] .pct-result-block.is-feature {
  background: color-mix(in srgb, var(--pct-accent) 18%, #252522 82%);
}

@media (prefers-reduced-motion: reduce) {
  .paletier-tools *,
  .paletier-tools *::before,
  .paletier-tools *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}