/* ============================================================================
   MedicareManny — flip-deck section ("Medicare, one card at a time").
   Extracted from the Direction B experiment (design-b.css) as a standalone,
   additive section for the production homepage. Loads AFTER styles.css and
   defines only new class names (deck-*, .mono-plain scoped) plus its own
   custom properties — nothing here overrides an existing production rule.
   ========================================================================== */

.deck-section {
  /* Values shared with the rest of the site come from styles.css tokens.
     These are the deck's own. */
  --ink:        #4A4A4A;
  --muted:      #6B7280;
  --line:       #E0E0E0;
  --card-mid:   #FAFAFA;
  --card-back:  #F3F4F6;
  --ink-paper:  #FDFCF8;
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  /* Both easings overshoot slightly before settling — the spring that makes
     the deck feel like handled paper. They only run from a deliberate tap,
     click, or keypress; the reduced-motion block below removes them. */
  --spring-flip:   cubic-bezier(0.34, 1.3, 0.5, 1);
  --spring-switch: cubic-bezier(0.34, 1.4, 0.44, 1);

  --shadow-card: 0 24px 60px rgba(26, 26, 26, 0.18);

  padding: 76px 6% 68px;
  text-align: center;
  /* Dark editorial band — the Dia "Saturday Brief" register. The light cards
     pop off the black; everything around them goes gallery-quiet. */
  background: #101010;
  border-bottom: none;

  --brief-yellow: #E8C43A;
  --brief-paper:  #EDEDE8;
  --brief-quiet:  #C9CDC4;
  --brief-line:   #33332E;
}

.deck-section .mono-plain {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;            /* senior floor for mono labels */
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.deck-section .section-kicker { display: block; margin-bottom: 14px; color: var(--brief-yellow); }

.deck-section h2 {
  max-width: 24ch;
  margin: 0 auto;
  color: var(--brief-yellow);
  font-size: clamp(34px, 4.6vw, 52px);
}

.deck-sub {
  max-width: 46ch;
  margin: 20px auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--brief-quiet);
}

.deck-stage {
  position: relative;
  max-width: 560px;
  height: 400px;
  margin: clamp(36px, 5vw, 56px) auto 0;
}
.deck-cards { position: absolute; inset: 0; }

.deck-card {
  position: absolute;
  inset: 0;
  transition: transform 0.55s var(--spring-switch), opacity 0.55s var(--spring-switch);
}

.deck-card[data-depth='0'] {
  transform: rotate(-1deg);
  z-index: 3;
  opacity: 1;
}
.deck-card[data-depth='1'] {
  transform: translate(22px, 22px) rotate(2.2deg);
  z-index: 2;
  opacity: 1;
}
.deck-card[data-depth='2'] {
  transform: translate(44px, 44px) rotate(-3.2deg);
  z-index: 1;
  opacity: 1;
}
.deck-card[data-depth='hidden'] {
  transform: translate(44px, 44px) rotate(-3.2deg);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

/* Before design-lab.js assigns depths (and if it never runs), show only the
   first card flat — the plain-text <details> below carries the full content. */
.deck-card:not([data-depth]) { opacity: 0; pointer-events: none; }
.deck-card:first-child:not([data-depth]) {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(-1deg);
  z-index: 3;
}

/* Cards parked behind the live one are decorative surfaces, not controls. */
.deck-card[data-depth='1'] .deck-card-inner,
.deck-card[data-depth='2'] .deck-card-inner { pointer-events: none; }
.deck-card[data-depth='1'] .deck-face,
.deck-card[data-depth='2'] .deck-face { visibility: hidden; }
.deck-card[data-depth='1'],
.deck-card[data-depth='2'] {
  background: var(--card-mid);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.deck-card[data-depth='2'] { background: var(--card-back); }

.deck-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--spring-flip);
}
.deck-card.is-flipped .deck-card-inner { transform: rotateY(180deg); }

.deck-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(24px, 4vw, 34px);
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.deck-front {
  background: var(--green-lt);
  box-shadow: var(--shadow-card);
}
/* The ink side. Turning a card lands on a solid black face, which is the moment
   the deck earns its weight — front faces are paper, the answer is print. */
.deck-back {
  border: 1px solid var(--brief-line);
  background: var(--black);
  color: var(--ink-paper);
  box-shadow: var(--shadow-card);
  transform: rotateY(180deg);
}

.deck-toprow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.deck-index { color: var(--green-dk); }
.deck-fliphint {
  color: var(--green-deep);
  border: 1.5px solid #A5D6A7;
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: 0.08em;
}
/* Brighter green than the front-face label so it holds up against black. */
.deck-back .deck-index { color: var(--green); }

.deck-term {
  font-family: var(--serif);
  font-size: clamp(38px, 5.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.deck-hint {
  /* Dia-weight body: confident, dark, never thin. */
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  color: #2A2A2A;
}
.deck-answer {
  margin: auto 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  color: inherit;
}

/* The canvas sets this line at 14px; it is raised here to stay above the
   senior-readable floor the rest of the site holds to. */
.deck-back-note {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  /* Carries the phone number on the ink-black back — held light-gray, not
     faint, so the number stays readable for aging eyes. */
  color: #D1D5DB;
}

@media (max-width: 640px) {
  /* Leave room for the two translated depth cards so their static stack does
     not create horizontal page overflow on a 390px viewport. */
  .deck-stage { height: 460px; width: calc(100% - 32px); }
  .deck-card[data-depth='1'] { transform: translate(12px, 14px) rotate(2.2deg); }
  .deck-card[data-depth='2'],
  .deck-card[data-depth='hidden'] { transform: translate(24px, 28px) rotate(-3.2deg); }
}

/* ---- deck controls ------------------------------------------------------------ */

.deck-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  /* Clear the receding cards' 44px diagonal offset below the stage. */
  margin-top: 64px;
}
.deck-btn {
  border-color: #4A4A46;
  color: var(--brief-paper);
  background: transparent;
  min-height: 56px;
  padding: 10px 26px;
  border: 2px solid var(--black);
  border-radius: 14px;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}
.deck-btn:hover { background: var(--brief-paper); color: #101010; border-color: var(--brief-paper); }
.deck-btn-flip { border-color: var(--brief-yellow); color: var(--brief-yellow); }
.deck-btn-flip:hover { background: var(--brief-yellow); color: #101010; border-color: var(--brief-yellow); }

.deck-auto { margin-top: 14px; }
.deck-auto-btn {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid #4A4A46;
  border-radius: 999px;
  background: transparent;
  color: var(--brief-quiet);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.deck-auto-btn[aria-pressed='true'] {
  border-color: var(--brief-yellow);
  background: rgba(232, 196, 58, 0.12);
  color: var(--brief-yellow);
}

.deck-status {
  margin-top: 12px;
  font-size: 15px;
  color: var(--brief-quiet);
  min-height: 1.5em;
}

.deck-plain {
  max-width: 640px;
  margin: 26px auto 0;
  text-align: left;
}
.deck-plain summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brief-yellow);
  padding: 10px 0;
}
.deck-plain dl { padding: 8px 0 4px; }
.deck-plain dt {
  font-family: var(--serif);
  font-size: 23px;
  margin-top: 18px;
  color: var(--brief-yellow);
}
.deck-plain dd { color: var(--brief-quiet); margin-top: 6px; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .deck-card,
  .deck-card-inner {
    transition: none;
  }

  /* Swap the 3D flip for a plain show/hide so no rotation happens at all. */
  .deck-card-inner,
  .deck-card.is-flipped .deck-card-inner { transform: none; }
  .deck-back {
  border: 1px solid var(--brief-line); transform: none; }

  .deck-card .deck-front { display: flex; }
  .deck-card .deck-back {
  border: 1px solid var(--brief-line); display: none; }
  .deck-card.is-flipped .deck-front { display: none; }
  .deck-card.is-flipped .deck-back {
  border: 1px solid var(--brief-line); display: flex; }
}

/* Link to the monthly Brief — the band's closing line, in the Brief's own voice. */
.deck-brief-link { margin-top: 30px; }
.deck-brief-link a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--brief-yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 196, 58, 0.45);
  padding-bottom: 2px;
}
.deck-brief-link a:hover { color: #F2D66A; border-bottom-color: #F2D66A; }