/* style-chooser.css — Phase 221 (STYLE-05 / D-03 / D-04).
 *
 * All aesthetic styling for components/style-chooser.jsx — the one-time screen
 * that asks which existing saved looks carry over into the new Style list. The
 * component carries no colours, sizes or spacing inline: `no-inline-aesthetic-
 * styles` is severity ERROR and hard-fails tools/deploy.sh, and the Python
 * audit at tools/audit_inline_style_aesthetics.py --gate is a second,
 * independent gate on the same rule.
 *
 * DESIGN INTENT
 * -------------
 * This screen interrupts Karl on a normal dashboard load to ask about
 * something he cannot undo. So it deliberately does NOT introduce a new visual
 * language — it borrows the Style panel's chrome (the same elevated surface,
 * the same hairline border, the same row rhythm) so it reads as part of
 * Manifold rather than as an alert from somewhere else. A screen that looked
 * unfamiliar here would read as "something has gone wrong", which is the one
 * impression it must not give: nothing has gone wrong, he is just being asked.
 *
 * The single place it spends any boldness is the confirm step. Every look that
 * is about to go is named on its own line with the date it was saved, against
 * a warn-toned rule — because "remove 2 items" is exactly the shape of message
 * people click through without reading, and this is the click that cannot be
 * taken back. The list is the safety feature; everything else stays quiet so
 * the list is what you look at.
 *
 * Rows read name-first with the saved date beneath in muted text. That is not
 * decoration: two looks can share a name — Karl has two both called "Gold
 * Test" in his own backup history, saved 88 seconds apart — and the date is
 * the only thing on screen telling them apart. A record id is never shown.
 *
 * PRIM-STYLE rules this file MUST satisfy (tools/audit_primitive_css.py
 * --gate, run by tests/plugin_spec/, which tools/deploy.sh gates via pytest):
 *   1. At least one var(--mt-*) / var(--m-*) consumption — every colour below
 *      is a token read.
 *   2. Zero hex literals. A hex here would look right on the default theme and
 *      wrong on every other one.
 *   3. Zero variable declarations. Declaring a --mt-* here would shadow
 *      theme.css and break the theme-switch contract; token values are
 *      codegen-owned (tools/build_tokens.py from design-tokens/<theme>.json).
 *
 * Loaded BETWEEN utilities.css and theme.css — see index.html AND
 * dist-index.html.tmpl. It must be in BOTH: a <link> in only one leaves this
 * screen unstyled in production only, which is the worst place to find out
 * (feedback_manifold_dist_template_parity). Bump the ?v= cache-buster on edit,
 * or browsers serve the stale copy and the change appears not to have worked.
 */

/* === The backdrop ========================================================= *
 * position: fixed and above the canvas chrome, because this screen is the
 * first thing on a dashboard load and must not sit under a card menu. A press
 * on the backdrop closes the screen and removes nothing.
 * ------------------------------------------------------------------------- */

.msc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--mt-bg-deep);
  opacity: 0.98;
}

/* === The panel ============================================================ */

.msc-panel {
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 14px 16px 16px;
  background: var(--mt-bg-elev);
  border: 1px solid var(--mt-border-strong);
  border-radius: 10px;
}

.msc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.msc-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--mt-fg);
}

.msc-close {
  padding: 0 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--m-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.msc-close:hover {
  color: var(--mt-fg);
}

/* === Body copy ============================================================ */

.msc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msc-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mt-fg);
}

.msc-lead-warn {
  color: var(--mt-warn);
}

/* === The list of saved looks ============================================== *
 * Name first, saved date beneath in muted text. The date is load-bearing, not
 * decoration — see the header note about the duplicate-name pair.
 * ------------------------------------------------------------------------- */

.msc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--mt-bg);
  border: 1px solid var(--mt-border);
  border-radius: 6px;
}

.msc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.msc-row:hover {
  background: var(--mt-bg-elev);
}

.msc-row-tick {
  margin-top: 2px;
  flex: 0 0 auto;
  cursor: pointer;
}

.msc-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.msc-row-name {
  font-size: 13px;
  color: var(--mt-fg);
  overflow-wrap: anywhere;
}

.msc-row-date {
  font-size: 11px;
  color: var(--m-text-muted);
}

.msc-row-note {
  color: var(--mt-warn);
}

/* A look that is NOT ticked is the one being thrown away, so the unticked
 * state is what gets the muted treatment — the opposite of the usual "selected
 * is highlighted", because here the default is keep and the exception is
 * remove. */
.msc-row:not(.is-kept) .msc-row-name {
  color: var(--m-text-muted);
  text-decoration: line-through;
}

/* === The confirm step ===================================================== *
 * The one place this screen raises its voice. Every look going away is named
 * on its own line with its saved date.
 * ------------------------------------------------------------------------- */

.msc-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msc-confirm-lead {
  margin: 0;
  font-size: 13px;
  color: var(--mt-fg);
}

.msc-confirm-list {
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  background: var(--mt-bg);
  border: 1px solid var(--mt-warn);
  border-radius: 6px;
}

.msc-confirm-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
}

.msc-confirm-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--mt-fg);
  overflow-wrap: anywhere;
}

.msc-confirm-date {
  font-size: 11px;
  color: var(--m-text-muted);
}

.msc-confirm-warn {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--mt-warn);
}

/* === The report ========================================================== */

.msc-report {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msc-report-head {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--mt-fg);
}

/* === Actions ============================================================== */

.msc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.msc-btn {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--mt-fg);
  background: var(--mt-bg);
  border: 1px solid var(--mt-border-strong);
  border-radius: 5px;
  cursor: pointer;
}

.msc-btn:hover:not(:disabled) {
  border-color: var(--mt-accent);
}

.msc-btn:disabled {
  color: var(--m-text-muted);
  cursor: default;
}

.msc-btn-primary {
  border-color: var(--mt-accent);
  color: var(--mt-accent);
}

.msc-btn-danger {
  border-color: var(--mt-warn);
  color: var(--mt-warn);
}

/* Keyboard users must be able to see where they are — this screen removes
 * things, so a focus ring that is merely "usually visible" is not enough. */
.msc-btn:focus-visible,
.msc-close:focus-visible,
.msc-row-tick:focus-visible {
  outline: 2px solid var(--mt-accent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .msc-panel {
    width: 100%;
  }
}