/*
 * Exact declarations extracted from cardflowweb/cardflow-custom-editor.css.
 * The only target adapter is the .legacy-card-picker scope documented in docs/card-picker-port.md.
 */
.static-menu-modal:where(.legacy-card-picker) .legacy-native-menu-dialog {
  --cf-menu-surface-raised: #fcf9f4;
  --cf-menu-row-soft: #fbf9f5;
  --cf-menu-accent-raised: #8a6849;
  --cf-menu-line-strong: #c8beb5;
  --cf-color-gold: #a88f74;
  --cf-color-gold-deep: #8f7559;
  --cf-color-cream-line: #fffdf9;
  --cf-color-cream-bright: #fffefd;
  --cf-color-slate-blue: #536f8a;
  --cf-color-slate-blue-strong: #2f4458;
  --cf-color-slate-blue-soft: rgba(83, 111, 138, 0.14);
  --cf-color-slate-blue-wash: rgba(83, 111, 138, 0.08);
  --cf-color-slate-blue-active: rgba(83, 111, 138, 0.18);
  --cf-color-slate-line: #d9dee1;
  --cf-color-slate-line-strong: #9fadbb;
  --cf-color-slate-line-selected: #b0bcc6;
  --cf-color-slate-line-soft: #e0e3e5;
  --cf-color-folder-border: #cbd2d8;
  --cf-color-editor-row-faint: rgba(255, 255, 255, 0.035);
  --cf-color-editor-row-soft: rgba(255, 255, 255, 0.05);
  --cf-color-editor-row-muted: rgba(255, 255, 255, 0.06);
  --cf-color-card-bg: #ffffff;
  --cf-color-on-accent-soft: rgba(255, 255, 255, 0.94);
  --cf-color-danger: #b85d55;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-view {
  height: 100%;
  min-height: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding:
    max(16px, var(--cardflow-safe-top, var(--cardflow-safe-top-fallback)))
    max(var(--cf-menu-horizontal-padding), var(--cardflow-safe-right, var(--cardflow-safe-right-fallback)))
    0
    max(var(--cf-menu-horizontal-padding), var(--cardflow-safe-left, var(--cardflow-safe-left-fallback)));
  overflow: hidden;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-header-side {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-header-side--start { justify-self: start; }
.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-header-side--end { justify-self: end; }

.static-menu-modal:where(.legacy-card-picker) .legacy-native-header-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  justify-self: center;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-body {
  box-sizing: border-box;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding-bottom: var(--cf-menu-bottom-content-padding);
  --cf-color-gold: var(--cf-menu-accent);
  --cf-color-gold-deep: var(--cf-menu-accent-strong);
  --cf-color-cream-line: var(--cf-menu-line);
  --cf-color-cream-bright: var(--cf-menu-bg-start);
  --cf-color-slate-blue: var(--cf-menu-switch-on);
  --cf-color-slate-blue-strong: var(--cf-menu-accent-strong);
  --cf-color-slate-blue-soft: var(--cf-menu-accent-soft);
  --cf-color-slate-blue-wash: var(--cf-menu-surface-soft);
  --cf-color-slate-blue-active: var(--cf-menu-accent-soft);
  --cf-color-slate-line: var(--cf-menu-line);
  --cf-color-slate-line-strong: var(--cf-menu-accent-focus);
  --cf-color-editor-row-faint: var(--cf-menu-bg);
  --cf-color-editor-row-soft: var(--cf-menu-surface-soft);
  --cf-color-editor-row-muted: var(--cf-menu-surface-raised);
  --cf-color-card-bg: #ffffff;
  --cf-color-on-accent-soft: var(--cf-menu-on-accent);
  --cf-color-danger: var(--cf-menu-danger);
}

.static-menu-modal:where(.legacy-card-picker) .plan-kicker {
  color: var(--muted);
  font-size: 0.75rem;
}

.static-menu-modal:where(.legacy-card-picker) .history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.static-menu-modal:where(.legacy-card-picker) .history-header div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.static-menu-modal:where(.legacy-card-picker) .history-selection-count {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.static-menu-modal:where(.legacy-card-picker) .custom-deck-editor {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

.static-menu-modal:where(.legacy-card-picker) .custom-deck-editor-header { align-items: flex-start; }

.static-menu-modal:where(.legacy-card-picker) .custom-deck-editor label:not(.custom-spread-deck-choice):not(.custom-spread-mode-toggle-option) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.static-menu-modal:where(.legacy-card-picker) .custom-deck-builder-stage {
  --custom-deck-folder-bg: var(--cf-menu-bg-start);
  --custom-deck-folder-active-bg: var(--custom-deck-folder-bg);
  --custom-deck-folder-border: var(--cf-menu-line);
  --custom-deck-folder-radius: var(--menu-radius-card);
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.static-menu-modal:where(.legacy-card-picker) .cf-folder-panel {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--custom-deck-folder-border);
  border-radius: var(--custom-deck-folder-radius);
  background: var(--custom-deck-folder-active-bg);
  padding: 7px 11px 11px;
}

.static-menu-modal:where(.legacy-card-picker) .custom-deck-icon-tool {
  box-sizing: border-box;
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cf-color-editor-row-soft);
  color: var(--text);
  padding: 0;
  line-height: 1;
}

.static-menu-modal:where(.legacy-card-picker) .custom-deck-icon-tool svg {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-body .custom-deck-icon-tool {
  border-radius: var(--menu-radius-control);
}

.static-menu-modal:where(.legacy-card-picker) .custom-deck-editor-message {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.static-menu-modal:where(.legacy-card-picker) .custom-deck-editor-message:empty { display: none; }
.static-menu-modal:where(.legacy-card-picker) .custom-deck-editor-message[data-type="error"] { color: var(--cf-color-danger); }

.static-menu-modal:where(.legacy-card-picker) .custom-card-list {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 48vh;
  overflow: auto;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-list--identity {
  grid-template-columns: 1fr;
  gap: 5px;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-list--image-small {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-row {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-row--identity {
  grid-template-columns: 22px 24px minmax(56px, 76px) minmax(0, 1fr) 26px;
  gap: 4px;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 3px 0;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-row--identity .custom-card-order {
  display: grid;
  width: 100%;
  height: 28px;
  place-items: center;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-order { color: var(--muted); }

.static-menu-modal:where(.legacy-card-picker) .custom-card-thumb {
  position: relative;
  display: grid;
  width: 64px;
  height: 86px;
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--custom-card-front-bg, var(--cf-color-editor-row-muted));
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  padding: var(--custom-card-front-inset, 0);
  text-align: center;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-tile { gap: 8px; }

.static-menu-modal:where(.legacy-card-picker) .custom-card-list--image-small .custom-card-tile {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  touch-action: pan-y;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-list--image-small .custom-card-thumb {
  justify-self: stretch;
  width: 100%;
  height: auto;
  aspect-ratio: var(--custom-card-image-ratio, 2 / 3);
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-thumb-order {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid var(--cf-color-cream-bright);
  border-radius: var(--menu-radius-pill, 999px);
  background: var(--cf-color-gold);
  color: var(--cf-color-on-accent-soft);
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 3px;
}

.static-menu-modal:where(.legacy-card-picker) .custom-card-tile-button {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  line-height: 1.2;
  text-align: left;
  touch-action: manipulation;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-body .custom-deck-editor button[type="submit"] {
  border: 0;
  border-radius: var(--menu-radius-control);
  background: linear-gradient(180deg, var(--cf-menu-accent-raised) 0%, var(--accent-strong) 100%);
  color: var(--cf-menu-on-accent);
  padding: 9px 10px;
}

.static-menu-modal:where(.legacy-card-picker) .legacy-native-feature-body .custom-deck-editor button[type="submit"]:disabled {
  cursor: default;
  opacity: 0.38;
}