:root {
  --ks-accent: #16506b;
  --ks-accent-press: #0e3a50;
  --ks-accent-deep: #123246;
  --ks-accent-tint: #f1f6f9;
  --ks-market-ink: #1f1b18;
  --ks-market-muted: #635a52;
  --ks-market-faint: #8a8079;
  --ks-market-paper: #fff;
  --ks-market-cream: #f7f4ea;
  --ks-market-field: #f3f1e7;
  --ks-market-line: #efeae3;
  --ks-market-line-strong: #e1dace;
  --ks-market-shadow: 0 10px 28px rgba(22, 48, 64, 0.12);
  --ks-accent-green: var(--ks-accent);
  color-scheme: light;
}

:root[data-ks-accent="red"] {
  --ks-accent: #9b3f43;
  --ks-accent-press: #743034;
  --ks-accent-deep: #4f2428;
  --ks-accent-tint: #fbf2f2;
}

:root[data-ks-accent="green"] {
  --ks-accent: #356b50;
  --ks-accent-press: #28523d;
  --ks-accent-deep: #1d392c;
  --ks-accent-tint: #f0f7f3;
}

:root[data-ks-accent="orange"] {
  --ks-accent: #a9551f;
  --ks-accent-press: #814016;
  --ks-accent-deep: #572d13;
  --ks-accent-tint: #fcf4ed;
}

html,
body {
  background: var(--ks-market-paper) !important;
}

body {
  color: var(--ks-market-ink);
  font-family: Cabin, Verdana, sans-serif;
}

/* The 2026 rebuild is fluid. This deliberately retires the handoff's phone canvas. */
#bp-mobile [data-screen-label],
#bp-pc [data-screen-label] {
  background: var(--ks-market-paper) !important;
  box-shadow: none !important;
  color: var(--ks-market-ink) !important;
  height: auto !important;
  min-height: 100dvh;
  max-width: 1200px !important;
  overflow-x: clip !important;
}

@media (max-width: 767.98px) {
  #bp-mobile [data-screen-label] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Retire physical-board ornament while retaining the current DOM and live wiring. */
[style*="cork-board"],
[style*="cork-tile"] {
  background-color: var(--ks-market-cream) !important;
  background-image: none !important;
}

[data-screen-label] [style*="rotate("],
[data-screen-label] [style*="rotateZ("] {
  rotate: 0deg !important;
  transform: none !important;
}

[data-screen-label] a,
[data-screen-label] button {
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease,
    color 150ms ease;
}

[data-screen-label] a:focus-visible,
[data-screen-label] button:focus-visible,
[data-screen-label] input:focus-visible,
[data-screen-label] select:focus-visible,
.ks-accent-choice:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ks-accent) 40%, white);
  outline-offset: 3px;
}

/* Translate the old action role into the user-selected accent. */
[data-screen-label] [style*="#3F6F63"],
[data-screen-label] [style*="#3f6f63"] {
  --ks-accent-green: var(--ks-accent) !important;
}

[data-screen-label] input,
[data-screen-label] textarea,
[data-screen-label] select {
  border-radius: 13px !important;
}

.ks-accent-preference {
  background: var(--ks-market-paper);
  border: 1px solid var(--ks-market-line);
  border-radius: 20px;
  color: var(--ks-market-ink);
  font-family: Cabin, Verdana, sans-serif;
  margin: clamp(16px, 3vw, 28px);
  padding: clamp(16px, 3vw, 22px);
}

.ks-accent-preference h2 {
  font: 800 clamp(20px, 2.7vw, 27px)/1.1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.ks-accent-preference p {
  color: var(--ks-market-muted);
  font: 400 14px/1.5 Literata, Georgia, serif;
  margin: 0 0 14px;
  max-width: 68ch;
}

.ks-accent-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
}

.ks-accent-choice {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ks-market-line-strong);
  border-radius: 14px;
  color: var(--ks-market-ink);
  cursor: pointer;
  display: flex;
  font: 700 14px/1 Cabin, sans-serif;
  gap: 8px;
  justify-content: center;
  min-height: 48px;
  padding: 10px;
}

.ks-accent-choice[aria-pressed="true"] {
  background: var(--ks-accent-tint);
  border-color: var(--ks-accent);
  box-shadow: inset 0 0 0 1px var(--ks-accent);
}

.ks-accent-swatch {
  background: var(--swatch);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d8d0c7;
  height: 18px;
  width: 18px;
}

@media (max-width: 460px) {
  .ks-accent-options { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  [data-screen-label] *,
  .ks-accent-choice { transition-duration: 0.01ms !important; }
}