/* V2 share/import and selectable tiles (electives, export subjects, themes). */

/* ── Share / import ── */

:root[data-ui="v2"] .export-grid {
  gap: 16px;
}

:root[data-ui="v2"] .export-panel {
  align-content: start;
}

:root[data-ui="v2"] .export-panel .section-title {
  font-size: 15px;
}

/* The intro's last line keeps V1's bottom margin, which doubled the gap to the first field. */
:root[data-ui="v2"] .export-panel > div:first-child > :last-child {
  margin-bottom: 0;
}

/* ── Selectable tiles: electives, export subjects, themes ──
   These are controls: --bg-secondary, hover --bg-hover, selected = accent border on
   --accent-control (never darker than unselected). */

:root[data-ui="v2"] .checkbox-grid,
:root[data-ui="v2"] .elective-grid {
  gap: 8px;
}

:root[data-ui="v2"] .checkbox-item {
  min-height: var(--control-height);
  padding: 7px 12px 7px 36px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

:root[data-ui="v2"] .checkbox-item:hover {
  transform: none;
  background: var(--bg-hover);
}

:root[data-ui="v2"] .checkbox-item:has(input:checked) {
  transform: none;
  border-color: var(--accent-border);
  background: var(--accent-control);
  color: var(--text-primary);
}

:root[data-ui="v2"] .checkbox-item:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

:root[data-ui="v2"] .checkbox-item:has(input:disabled):hover {
  background: var(--bg-secondary);
}

:root[data-ui="v2"] .checkbox-item:has(input:checked:disabled):hover {
  background: var(--accent-control);
}

:root[data-ui="v2"] .checkbox-item:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

:root[data-ui="v2"] .checkbox-item::before {
  left: 12px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--input-border) 50%, var(--text-tertiary));
  background: var(--input-bg);
  box-sizing: border-box;
}

:root[data-ui="v2"] .checkbox-item:has(input:checked)::before {
  border-color: var(--accent);
  background: var(--accent);
}

/* Tick (Lucide check) drawn over the filled box. */
:root[data-ui="v2"] .checkbox-item:has(input:checked)::after {
  content: "\e070";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  transform: translateY(-50%);
  font-family: "lucide";
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  color: var(--text-on-accent);
}

:root[data-ui="v2"] .checkbox-item-icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  opacity: 1;
}

:root[data-ui="v2"] .checkbox-item-icon .ph {
  font-size: 15px;
}

:root[data-ui="v2"] .theme-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

:root[data-ui="v2"] .theme-button {
  height: var(--control-height);
  padding: 0 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

:root[data-ui="v2"] .theme-button:hover {
  transform: none;
  box-shadow: none;
  background: var(--bg-hover);
}

:root[data-ui="v2"] .theme-button.is-active,
:root[data-ui="v2"] .theme-button.is-active:hover {
  border-color: var(--accent-border);
  background: var(--accent-control);
}

:root[data-ui="v2"] .theme-swatch {
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000000 15%, transparent);
}