/* Choice List Editor slice stylesheet.
   Canon class rules are imported directly from the design handoff export copied
   under wwwroot/css/choice-list-canon. Keep local rules to token scoping and
   Blazor integration only. */

@import url("choice-list-canon/editor.css");
@import url("choice-list-canon/variants.css");
@import url("choice-list-canon/overlays.css");

.cle-shell,
.cle-empty,
.cle-scrim {
  --paper:        oklch(98.8% 0.002 250);
  --paper-2:      oklch(96.5% 0.003 250);
  --paper-3:      oklch(94.2% 0.004 250);
  --paper-sunk:   oklch(99.6% 0.001 250);

  --ink:          oklch(19% 0.018 255);
  --ink-2:        oklch(38% 0.015 255);
  --ink-3:        oklch(56% 0.012 255);
  --ink-4:        oklch(72% 0.008 255);

  --line:         oklch(91% 0.005 250);
  --line-2:       oklch(85.5% 0.007 250);
  --line-soft:    oklch(94.5% 0.004 250);

  --advant:       oklch(54% 0.16 245);
  --advant-deep:  oklch(34% 0.13 250);
  --advant-soft:  oklch(94% 0.04 245);
  --advant-fg:    oklch(99% 0.005 245);

  --marigold:     oklch(62% 0.14 55);
  --marigold-deep:oklch(45% 0.13 50);
  --marigold-soft:oklch(95% 0.03 60);

  --ok:           oklch(56% 0.10 155);
  --ok-soft:      oklch(95% 0.03 155);
  --warn:         oklch(68% 0.12 75);
  --warn-soft:    oklch(95% 0.04 80);
  --risk:         oklch(56% 0.14 25);
  --risk-soft:    oklch(95% 0.035 30);
  --info:         var(--advant);
  --info-soft:    var(--advant-soft);

  --f-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
  --f-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --t-12: 11.5px;
  --t-13: 12.5px;
  --t-14: 13.5px;
  --t-15: 14.5px;
  --t-17: 16px;
  --t-20: 19px;
  --t-24: 23px;
  --t-32: 30px;
  --t-44: 42px;

  --r-2: 2px;
  --r-3: 3px;
  --r-5: 5px;
  --r-8: 8px;
  --r-pill: 999px;

  --sidenav-w: 232px;
  --topbar-h:  52px;
  --subbar-h:  44px;

  font-family: var(--f-sans);
}

[data-theme="dark"] .cle-shell,
[data-theme="dark"] .cle-empty,
[data-theme="dark"] .cle-scrim {
  --paper:        oklch(16% 0.010 60);
  --paper-2:      oklch(20% 0.011 60);
  --paper-3:      oklch(13% 0.009 60);
  --paper-sunk:   oklch(22% 0.012 60);
  --ink:          oklch(94% 0.010 75);
  --ink-2:        oklch(72% 0.010 75);
  --ink-3:        oklch(54% 0.011 75);
  --ink-4:        oklch(40% 0.011 75);
  --line:         oklch(28% 0.012 60);
  --line-2:       oklch(36% 0.013 60);
  --line-soft:    oklch(22% 0.011 60);
  --advant:       oklch(70% 0.13 245);
  --advant-deep:  oklch(78% 0.10 245);
  --advant-soft:  oklch(28% 0.06 245);
  --advant-fg:    oklch(14% 0.010 60);
  --marigold:     oklch(70% 0.14 55);
  --marigold-deep:oklch(76% 0.12 50);
  --marigold-soft:oklch(26% 0.05 55);
  --ok:           oklch(70% 0.13 155);
  --ok-soft:      oklch(24% 0.04 155);
  --warn:         oklch(76% 0.13 75);
  --warn-soft:    oklch(26% 0.05 75);
  --risk:         oklch(70% 0.15 25);
  --risk-soft:    oklch(26% 0.06 25);
}

.cle-shell {
  min-height: calc(100vh - var(--th-chrome-topbar-h));
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cle-shell .cc-btn.is-primary,
.cle-scrim .cc-btn.is-primary {
  background: var(--marigold-deep);
  border-color: var(--marigold-deep);
  color: var(--advant-fg);
}

.cle-shell .cc-btn.is-primary:hover,
.cle-scrim .cc-btn.is-primary:hover {
  background: oklch(38% 0.13 50);
  border-color: oklch(38% 0.13 50);
}

.cle-shell .cc-btn.is-primary:focus-visible,
.cle-scrim .cc-btn.is-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--marigold-soft);
  border-color: var(--marigold-deep);
}

.cle-shell .cc-btn.is-primary:disabled,
.cle-shell .cc-btn.is-primary[aria-disabled="true"]:not(.is-blocked):not(.is-primary--blocked),
.cle-scrim .cc-btn.is-primary:disabled,
.cle-scrim .cc-btn.is-primary[aria-disabled="true"]:not(.is-blocked):not(.is-primary--blocked) {
  background: oklch(from var(--marigold-deep) l calc(c * 0.3) h / 0.55);
  border-color: oklch(from var(--marigold-deep) l calc(c * 0.3) h / 0.55);
  color: var(--advant-fg);
}

[data-import-source] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

[data-import-source] > span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

[data-testid="cle-import-text"] {
  min-height: 82px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-13);
  color: var(--ink);
  background: var(--paper);
}