/*
 * The Customize screen, drawn once for all four operator tools.
 *
 * A tint under type is --tint / --tint-2, never --g-50 or --g-100. The ramp is
 * the same nine shades in both themes, so a rung used as a background stays
 * near-white in dark mode and swallows the label on top of it - which is
 * exactly what the selected accent row did until it was written this way.
 *
 * Every colour here is a token from lib/theme.css and there is not one literal
 * hex in the file, which is the property that lets the preview below render a
 * theme the surrounding page is not in. The only exception is --ap-c, the
 * swatch's own dot, and that is passed in from theme.js precisely because it
 * has to show a colour that is NOT the current one.
 */

.ap { display: grid; gap: var(--gap); max-width: 720px; }

.ap-head { margin-bottom: 4px; }
.ap-eyebrow {
  margin: 0;
  font-size: var(--t-cap);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ap-title { margin: 6px 0 0; font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.ap-lede { margin: 8px 0 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }

.ap-card {
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.ap-card-head { margin-bottom: 16px; }
.ap-card-head h2 { margin: 0; font-size: var(--t-lead); font-weight: 700; letter-spacing: -0.015em; }
.ap-card-head p { margin: 3px 0 0; font-size: var(--t-foot); color: var(--ink-3); line-height: 1.5; }
.ap-aside { margin: 14px 0 0; font-size: var(--t-foot); line-height: 1.55; color: var(--ink-3); max-width: 58ch; }

/* ── Theme: three cards, not a segmented control ──────────────────────────
 * A segment would fit, but each of these wants a line of explanation under it
 * ("Follows your device"), and that is not a thing a segment can hold. */

.ap-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .ap-modes { grid-template-columns: 1fr; } }

.ap-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--sep-2);
  border-radius: var(--r-ctl);
  background: var(--inset);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s var(--spring);
}
.ap-mode:hover { background: var(--fill); }
.ap-mode:active { transform: scale(0.985); }
.ap-mode-ic { display: flex; margin-bottom: 8px; color: var(--ink-3); transition: color 0.2s; }
.ap-mode-name { font-size: var(--t-sub); font-weight: 700; }
.ap-mode-note { font-size: var(--t-cap); color: var(--ink-3); }

.ap-mode[aria-pressed="true"] {
  border-color: var(--g-500);
  background: var(--tint-2);
  box-shadow: var(--ring);
}
.ap-mode[aria-pressed="true"] .ap-mode-ic { color: var(--accent-text); }
.ap-mode[aria-pressed="true"] .ap-mode-name { color: var(--accent-text); }

/* ── Accent: a list, because each one has a name worth reading ───────────── */

.ap-swatches { display: grid; gap: 8px; }

.ap-swatch {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sep-2);
  border-radius: var(--r-ctl);
  background: var(--inset);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s var(--spring);
}
.ap-swatch:hover { background: var(--fill); }
.ap-swatch:active { transform: scale(0.99); }

/* The dot is the colour itself, so it gets a ring of the page rather than a
   border of its own: a hairline over a saturated circle reads as a flaw. */
.ap-swatch-dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ap-c);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--sep);
}
.ap-swatch-id { flex: 1; min-width: 0; }
.ap-swatch-name { display: block; font-size: var(--t-sub); font-weight: 700; }
.ap-swatch-note { display: block; font-size: var(--t-cap); color: var(--ink-3); }

.ap-swatch-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g-500);
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s, transform 0.25s var(--spring);
}
.ap-swatch[aria-pressed="true"] { border-color: var(--g-500); background: var(--tint-2); }
.ap-swatch[aria-pressed="true"] .ap-swatch-tick { opacity: 1; transform: scale(1); }

/* ── The preview, which pops up on choosing a colour ──────────────────────── */

.ap-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.ap-modal[hidden] { display: none; }

.ap-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ap-fade 0.2s var(--ease) both;
}

.ap-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 20px;
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  animation: ap-pop 0.34s var(--spring) both;
}
.ap-modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ap-modal-name { margin: 4px 0 0; font-size: var(--t-title3); font-weight: 700; letter-spacing: -0.02em; }
.ap-x {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s;
}
.ap-x:hover { background: var(--fill-2); color: var(--ink); }

.ap-modal-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ap-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: var(--fill);
  font: inherit;
  font-size: var(--t-sub);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s var(--spring);
}
.ap-btn:hover { background: var(--fill-2); }
.ap-btn:active { transform: scale(0.97); }
/* The roles, as the shell's own filled button uses: a rung here would be the
   same near-invisible mistake one step along. */
.ap-btn-go { background: var(--accent); color: #fff; }
.ap-btn-go:hover { background: var(--accent-hover); }

@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ── The miniature ────────────────────────────────────────────────────────
 *
 * A drawing, not a screenshot and not an iframe. An iframe would be the honest
 * thing and is the wrong thing: it would be a second whole tool booting inside
 * a dialogue, with its own fetches, to answer a question about colour.
 *
 * No text in it either. Lorem would be a lie about the tool's copy and real
 * copy would be read instead of looked at; grey bars say "type goes here" and
 * let the eye go to the only thing being asked about.
 *
 * It carries its own data-theme/data-accent, so every token below resolves to
 * the combination being previewed rather than the one the page is in.
 */

.ap-pv {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-card);
  border: 1px solid var(--sep);
  background: var(--bg);
  /* The dialogue is drawn in the page's theme and this is not, so it needs an
     edge of its own or a dark preview bleeds into a dark card. */
  box-shadow: inset 0 0 0 1px var(--sep);
}

.ap-pv-side { display: flex; flex-direction: column; gap: 5px; }
.ap-pv-brand { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; }
.ap-pv-mark { width: 12px; height: 12px; border-radius: 4px; background: var(--accent-text); }
.ap-pv-brand b { flex: 1; height: 6px; border-radius: 3px; background: var(--ink-3); opacity: 0.5; }

.ap-pv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 7px;
  color: var(--ink-3);
}
.ap-pv-row b { flex: 1; height: 5px; border-radius: 3px; background: currentColor; opacity: 0.4; }
.ap-pv-row.is-on { background: var(--tint-2); color: var(--accent-text); }
.ap-pv-row.is-on b { opacity: 0.7; }
.ap-pv-row .ic { flex: none; }

.ap-pv-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-pv-top { display: flex; align-items: center; gap: 8px; }

.ap-pv-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.ap-pv-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--s-open); }
.ap-pv-pill b { width: 32px; height: 5px; border-radius: 3px; background: var(--ink-3); opacity: 0.6; }

/* The travelling thumb, at rest. The real control's whole trick is that the
   thumb is the card colour on a grey track, which is worth showing. */
.ap-pv-seg {
  position: relative;
  width: 58px;
  height: 20px;
  margin-left: auto;
  border-radius: 8px;
  background: var(--fill);
}
.ap-pv-seg i {
  position: absolute;
  inset: 2px 50% 2px 2px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow-thumb);
}

.ap-pv-panel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border-radius: 14px;
  background: radial-gradient(130% 120% at 100% 0%, var(--g-500) 0%, var(--g-700) 42%, var(--g-900) 100%);
}
.ap-pv-k { width: 40px; height: 5px; border-radius: 3px; background: var(--g-300); }
.ap-pv-fig { width: 62px; height: 15px; border-radius: 4px; background: #fff; opacity: 0.92; }
.ap-pv-chip { width: 46px; height: 12px; border-radius: 999px; background: #fff; opacity: 0.28; }

.ap-pv-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.ap-pv-line { height: 6px; border-radius: 3px; background: var(--ink-3); opacity: 0.35; }
.ap-pv-line.is-short { width: 55%; }
.ap-pv-btn { width: 74px; height: 20px; margin-top: 2px; border-radius: 7px; background: var(--g-700); }

@media (prefers-reduced-motion: reduce) {
  .ap-modal-scrim,
  .ap-modal-card { animation: none; }
  .ap-mode,
  .ap-swatch,
  .ap-swatch-tick { transition: none; }
}