/* =========================================================================
   chrome/layout/modals.css · WEEK41 (M1 sprint 2b)
   ---------------------------------------------------------------------------
   Cube modal layer · ported token-only from mockups 62 (double-confirm)
   and 63 (take/drop). Glass card DNA + STANDARD modal button DNA
   (Space Grotesk caps · 11/24/min-width 112). [WEEK46: 63b beaver-confirm
   + the BEAVER button were removed — match-only platform.]

   Discipline:
     - No literal 6-digit hex (chrome-foundation test enforces this).
     - No rgba() using brand-token triples (--rd-gold / --rd-dark / --rd-cream).
     - Brand-color rgba() variants come from --rd-* translucent tokens.
     - The button-border tints (emerald/red at 0.7 alpha) match the
       mockups' verbatim values · the test only forbids brand-triple RGB.

   Hidden by default — chrome/view.js + chrome/modals.js toggle the
   `[hidden]` attribute (and `.is-open` for the inner card) based on
   state.phase / pendingDouble.
   ========================================================================= */

/* ───── Backdrop · full-viewport tinted veil + blur ───────────────────── */
.gc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--rd-dark-veil-medium);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gc-modal-backdrop[hidden] { display: none; }

/* ───── Glass card · same DNA across 62 / 63 / 63b ────────────────────── */
.gc-modal-card {
  background: var(--rd-glass-bg);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid var(--rd-glass-border);
  border-radius: 8px;
  padding: 28px 36px;
  font-family: var(--rd-font-serif);
  color: var(--rd-cream);
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  width: 480px;
  max-width: calc(100% - 40px);
  text-align: center;
}

/* ───── Modal title · Playfair italic 22/700 ──────────────────────────── */
.gc-modal-title {
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  color: var(--rd-cream);
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

/* ───── Modal body · Playfair italic 15px cream-dim ───────────────────── */
.gc-modal-body {
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--rd-cream-dim);
  margin-bottom: 24px;
}

/* ───── Action row · centered, 12px gap, capped buttons ───────────────── */
.gc-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* ───── STANDARD modal button · 12/600/2px, 11×24, min-width 112 ──────── */
.gc-modal-btn {
  font-family: var(--rd-font-action);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 11px 24px;
  min-width: 112px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--rd-cream);
  border: 1px solid var(--rd-line-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms ease;
}
.gc-modal-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* YES / TAKE — emerald */
.gc-modal-btn-yes,
.gc-modal-btn-take {
  border-color: rgba(94, 156, 116, 0.7);
  color: var(--rd-emerald-text);
}
.gc-modal-btn-yes:hover:not(:disabled),
.gc-modal-btn-take:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--rd-emerald-1), var(--rd-emerald-2));
  color: var(--rd-cream);
  border-color: var(--rd-emerald-1);
}

/* NO / DROP — red */
.gc-modal-btn-no,
.gc-modal-btn-drop {
  border-color: rgba(180, 80, 80, 0.7);
  color: var(--rd-red-text);
}
.gc-modal-btn-no:hover:not(:disabled),
.gc-modal-btn-drop:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--rd-red-1), var(--rd-red-2));
  color: var(--rd-cream);
  border-color: var(--rd-red-1);
}

/* BEAVER — blue (WEEK57: restored for cash mode; from mockup 63) */
.gc-modal-btn-beaver {
  border-color: rgba(72, 120, 192, 0.7);
  color: var(--rd-blue-text);
}
.gc-modal-btn-beaver:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--rd-blue-1), var(--rd-blue-2));
  color: var(--rd-cream);
  border-color: var(--rd-blue-3);
}

/* ───── Resign warning text · 69 only (WEEK42) ────────────────────────── */
/* The body of #m-resign carries .resign-warning so the "you will lose N
   points" line reads as a warning (warm red) without changing the shared
   .gc-modal-body default cream-dim used by 62 / 63. */
.gc-modal-body.resign-warning {
  color: var(--rd-warn-red);
}

/* ───── "Don't show again" skip checkbox · 62 only ────────────────────── */
.gc-modal-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--rd-cream-dim);
  opacity: 0.85;
  cursor: pointer;
  user-select: none;
}
.gc-modal-skip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--rd-gold);
  cursor: pointer;
}