/* The run's surface picker (flag surface_picker, js/views/surface-picker.js).
   Two blocks that never mix: the plan's API surfaces as a list you tick, then,
   Human Verified as a separate add-on card, then the footer with the button. Ink and paper only:
   icons monochrome, numbers in Geist, amber only for "may fail"
   (Valentina's decision, gensig/diseno/decision-surface-picker.md). The app
   without new_ui gets the same layout through the fallbacks. */
.sp-modal {
  --sp-ink: var(--ui-ink, var(--text-primary));
  --sp-ink-2: var(--ui-ink-2, var(--text-secondary));
  --sp-ink-3: var(--ui-ink-3, var(--text-muted));
  --sp-line: var(--ui-line, var(--border));
  --sp-paper-2: var(--ui-paper-2, var(--surface-2));
  --sp-card: var(--ui-card, var(--surface-1));
  --sp-hover: var(--ui-hover, var(--surface-2));
  --sp-warn: var(--ui-warn, var(--warn));
  --sp-neg: var(--ui-neg, var(--warn));
  --sp-focus: var(--ui-accent, var(--accent));
  max-width: 720px !important;
  padding-bottom: 0 !important;
  font-variant-numeric: tabular-nums;
}
.sp-modal #surfSub { margin-bottom: 20px !important; }

/* Icons: one treatment for every brand, ink grey, no colored tile. */
.sp-ico { flex: none; border-radius: 6px; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .85; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-ico { filter: grayscale(1) invert(1) contrast(1.1); mix-blend-mode: screen; }
}
:root[data-theme="dark"] .sp-ico { filter: grayscale(1) invert(1) contrast(1.1); mix-blend-mode: screen; }

/* ---------- with your plan ---------- */
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.sp-label { font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.sp-tools { display: flex; gap: 14px; }
.sp-link {
  all: unset; cursor: pointer; font-size: 13px; color: var(--sp-ink-2);
  text-decoration: underline; text-decoration-color: var(--sp-line); text-underline-offset: 3px;
}
.sp-link:hover { color: var(--sp-ink); text-decoration-color: currentColor; }
.sp-link:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; border-radius: 3px; }

.sp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-row {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px;
  padding: 10px 14px 10px 12px; border: 1px solid var(--sp-line); border-radius: 12px;
  background: var(--sp-card); cursor: pointer; transition: background .12s;
}
.sp-row input { position: absolute; opacity: 0; pointer-events: none; }
.sp-row:not(.off):hover { background: var(--sp-hover); }
.sp-row:has(input:focus-visible) { outline: 2px solid var(--sp-focus); outline-offset: 2px; }
.sp-row.off { cursor: not-allowed; background: var(--sp-paper-2); }
.sp-row.off .sp-ico { opacity: .4; }
.sp-row.off .sp-name { color: var(--sp-ink-3); }

.sp-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sp-name { font-size: 14px; font-weight: 500; color: var(--sp-ink); line-height: 1.2; }
.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--sp-ink-3); line-height: 1.3; }
.sp-state { display: inline-flex; align-items: center; gap: 5px; }
.sp-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sp-state-warn { color: var(--sp-warn); }

/* Picked = the checkbox, nothing else. */
.sp-box {
  flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--sp-line);
  display: grid; place-items: center; color: transparent; background: var(--sp-card);
}
.sp-row:not(.off):hover .sp-box { border-color: var(--sp-ink-3); }
.sp-row.on .sp-box { background: var(--sp-ink); border-color: var(--sp-ink); color: var(--ui-bg, var(--surface-1)); }
.sp-row.off .sp-box { visibility: hidden; }

.sp-offline { margin: 10px 2px 0; font-size: 12.5px; color: var(--sp-ink-3); }

/* ---------- footer: total and button, in view while the add-on list is open ---------- */
.sp-foot {
  position: sticky; bottom: 0; z-index: 1; margin: 20px -32px 0; padding: 14px 32px 22px;
  background: var(--sp-card); border-top: 1px solid var(--sp-line);
}
.sp-total { margin: 0 0 12px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0;
  font-size: 13px; color: var(--sp-ink-2); }
.sp-total > span { white-space: nowrap; }
.sp-total b { color: var(--sp-ink); font-weight: 600; }
.sp-total .sp-dot { margin: 0 7px; color: var(--sp-ink-3); }
.sp-total.sp-over { color: var(--sp-neg); }
.sp-total.sp-over b { color: var(--sp-neg); }
.sp-total .sp-short { flex-basis: 100%; white-space: normal; margin-top: 4px; color: var(--sp-neg); }
.sp-total .sp-short .sp-link { color: var(--sp-neg); text-decoration-color: currentColor; }
.sp-foot .fr-guar { margin: 0 0 12px; }
.sp-foot #surfGo { margin-top: 0 !important; }
/* Dark: the primary comes from the ink token, softened so it doesn't glare. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.new-ui .sp-modal #surfGo:not(:disabled) {
    background: color-mix(in srgb, var(--ui-ink) 84%, var(--ui-card)); border-color: transparent; }
}
:root[data-theme="dark"] body.new-ui .sp-modal #surfGo:not(:disabled) {
  background: color-mix(in srgb, var(--ui-ink) 84%, var(--ui-card)); border-color: transparent; }

/* ---------- Human Verified: a separate add-on card ---------- */
.sp-addon {
  margin: 24px 0 0; padding: 18px 18px 16px; border-radius: 14px;
  border: 1px solid var(--sp-line); background: var(--sp-paper-2);
}
.sp-addon-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-badge {
  font-size: 11.5px; font-weight: 500; color: var(--sp-ink); padding: 2px 9px;
  border: 1px solid var(--sp-ink); border-radius: 999px; line-height: 1.5;
}
.sp-note { font-size: 12.5px; color: var(--sp-ink-3); }
.sp-on { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--sp-ink); }
.sp-addon-title { margin: 12px 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--sp-ink); }
.sp-addon-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--sp-ink-2); max-width: 56ch; }

.sp-strip {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--sp-line); background: var(--sp-card);
}
.sp-strip:hover { border-color: var(--sp-ink-3); }
.sp-strip:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; }
.sp-stack { display: flex; align-items: center; gap: 8px; flex: none; }
.sp-more { margin-left: 2px; font-size: 12px; color: var(--sp-ink-3); }
.sp-strip-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--sp-ink); }
.sp-chev { font-size: 18px; line-height: 1; color: var(--sp-ink-3); transition: transform .15s; }
.sp-strip[aria-expanded="true"] .sp-chev { transform: rotate(90deg); }

/* Open: a plain list of names in columns. */
.sp-hlist { list-style: none; margin: 12px 2px 0; padding: 0; columns: 3 160px; column-gap: 20px; }
.sp-hlist[hidden] { display: none; }
.sp-hlist li { font-size: 13px; line-height: 1.9; color: var(--sp-ink-2); break-inside: avoid; }

.sp-addon-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.sp-cta {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--sp-ink); color: var(--sp-ink); background: var(--sp-card);
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.sp-cta:hover { background: var(--sp-hover); }
.sp-cta:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .sp-row, .sp-chev { transition: none; } }

/* Phone: one column, the add-on's link full width. */
@media (max-width: 560px) {
  .sp-modal { padding: 24px 18px 0 !important; }
  .sp-foot { margin: 16px -18px 0; padding: 12px 18px 16px; }
  .sp-list { grid-template-columns: 1fr; }
  .sp-row { min-height: 54px; }
  .sp-addon { padding: 16px 14px 14px; }
  .sp-stack { display: none; }
  .sp-cta { flex: 1; justify-content: center; }
}