/* Compact website design picker — no variations. */
.logo-klar--dark,
.logo-coop { display: none !important; }
html[data-theme="klar-dark"] .logo-klar--light { display: none !important; }
html[data-theme="klar-dark"] .logo-klar--dark { display: block !important; }
html[data-design="coop"] .logo-klar { display: none !important; }
html[data-design="coop"][data-theme="coop-light"] .logo-coop--light,
html[data-design="coop"][data-theme="coop-dark"] .logo-coop--dark,
html[data-design="coop"] footer .logo-coop { display: block !important; }

.design-picker { position: relative; flex: none; }
.design-picker__trigger {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge, rgba(42,28,17,.45));
  border-radius: var(--r-md, 12px);
  background: var(--paper, #fff);
  color: var(--ink, #2a1c11);
  cursor: pointer;
  box-shadow: none;
}
.design-picker__trigger:hover,
.design-picker__trigger[aria-expanded="true"] {
  color: var(--signal);
  border-color: var(--signal);
  background: var(--accent-soft, var(--signal-soft));
}
.design-picker__trigger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.design-picker__flyout {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  background: var(--paper, #fff);
  color: var(--ink, #2a1c11);
  border: 1px solid var(--edge, rgba(42,28,17,.4));
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 12px 32px rgba(16,24,40,.16);
}
.design-picker__flyout[hidden] { display: none; }
.design-picker__label {
  margin: 0 0 8px;
  color: var(--ink-2, #6b5a4d);
  font: 650 11px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.design-picker__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--cream-2, #eee5d4);
  border: 1px solid var(--line, rgba(42,28,17,.12));
  border-radius: var(--r-md, 10px);
}
.design-picker__modes button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2, #6b5a4d);
  font: 600 13px/1 system-ui, sans-serif;
  cursor: pointer;
}
.design-picker__modes button:hover { color: var(--ink); background: color-mix(in srgb, var(--paper) 55%, transparent); }
.design-picker__modes button[aria-pressed="true"] {
  color: var(--signal);
  background: var(--paper);
  border-color: var(--accent-line, rgba(42,28,17,.18));
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.design-picker__coop {
  width: 100%;
  margin-top: 12px;
  padding: 12px 10px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--warm-line, rgba(230,140,44,.45));
  border-radius: var(--r-md, 10px);
  background: var(--warm-soft, rgba(230,140,44,.1));
  color: var(--ink);
  cursor: pointer;
  box-shadow: none;
}
.design-picker__coop:hover { border-color: var(--warm-fill, #e68c2c); }
.design-picker__coop svg { width: 22px; height: 22px; fill: none; stroke: var(--warm-text, #8a4f0c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.design-picker__coop b,
.design-picker__coop small { display: block; }
.design-picker__coop b { font: 700 14px/1.25 system-ui, sans-serif; }
.design-picker__coop small { margin-top: 3px; color: var(--ink-2); font: 400 12px/1.35 system-ui, sans-serif; }

html[data-design="coop"] .design-picker__coop {
  border-color: var(--signal-deep);
  background: var(--signal-soft);
}
html[data-design="coop"] .design-picker__coop svg { stroke: var(--signal-deep); }

.sound-picker { position: relative; flex: none; display: none; }
html[data-design="coop"] .sound-picker { display: block; }
.sound-picker__trigger {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge, rgba(42,28,17,.45));
  border-radius: var(--r-md, 12px);
  background: var(--paper, #fff);
  color: var(--ink, #2a1c11);
  cursor: pointer;
  box-shadow: none;
}
.sound-picker__trigger:hover,
.sound-picker__trigger[aria-expanded="true"] { color: var(--signal); border-color: var(--signal); background: var(--accent-soft, var(--signal-soft)); }
.sound-picker__trigger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sound-picker__flyout {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  right: 0;
  width: min(250px, calc(100vw - 32px));
  padding: 14px;
  background: var(--paper, #fff);
  color: var(--ink, #2a1c11);
  border: 1px solid var(--edge, rgba(42,28,17,.4));
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 12px 32px rgba(16,24,40,.16);
}
.sound-picker__flyout[hidden] { display: none; }
.sound-picker .sound-toggle {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  justify-content: flex-start;
  border: 1px solid var(--accent-line, rgba(42,28,17,.18));
  border-radius: var(--r-md, 10px);
  background: var(--cream-2);
  color: var(--ink);
  box-shadow: none;
  font-family: inherit;
}
.sound-picker .sound-toggle:hover { transform: none; border-color: var(--signal); box-shadow: none; }
.sound-picker .sound-toggle[aria-pressed="true"] { background: var(--accent-soft, var(--signal-soft)); color: var(--signal); border-color: var(--accent-line, var(--signal)); }
.sound-toggle__copy { display: block; text-align: left; }
.sound-toggle__copy b,
.sound-toggle__copy small { display: block; }
.sound-toggle__copy b { font: 700 14px/1.25 system-ui, sans-serif; }
.sound-toggle__copy small { margin-top: 3px; color: var(--ink-2); font: 500 12px/1.2 system-ui, sans-serif; }

@media (max-width: 560px) {
  .design-picker__flyout,
  .sound-picker__flyout { position: fixed; top: 66px; right: 12px; }
  .sound-picker .sound-toggle > span:last-child { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}