/* ═══════════════════════════════════════════════════════════════════════
   Annotated portrait (option 2a) — Practical toolkit
   A full-bleed brand photograph, scrimmed, with the tools rendered as a
   clinician's hand-written margin notes. Each note opens a white modal with
   the full tool: body copy, tap-to-copy example phrases, and research.
   Source: "2a Annotated Portrait - Handoff.md".
   ═══════════════════════════════════════════════════════════════════════ */

.ap { --ap-pos: 66% 24%; margin: var(--s5) 0 var(--s4); max-width: var(--measure); }
/* Matches the 700px body measure so the panel lines up with the .reflect /
   .download / .evidence boxes stacked against it, instead of overhanging them
   by 72px (it previously filled the full 772px column). */

/* ── Frame ──────────────────────────────────────────────────────────── */
.ap-frame {
  position: relative;
  margin: 0;
  height: 660px;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ap-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--ap-pos);
}
.ap-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.62) 40%, rgba(0,0,0,0.05) 78%),
    linear-gradient(0deg,  rgba(0,0,0,0.80) 0%, rgba(0,0,0,0) 48%);
}
.ap-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px 40px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.ap-head { max-width: 60%; }
.ap-eyebrow {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin: 0 0 10px;
}
.ap-headline {
  font-family: var(--font-feature);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.08;
  color: var(--mim-white);
  margin: 0;
}
.ap-hl {
  position: relative;
  display: inline-block;
  padding: 0 2px;
}
.ap-hl::before {
  content: "";
  position: absolute; left: -4px; right: -4px; bottom: 0.08em; height: 0.5em;
  background: url('../../assets/mim/mark-highlighter-line-v2.png') center/100% 100% no-repeat;
  z-index: -1;
}

/* ── Notes (margin annotations) ─────────────────────────────────────── */
.ap-notes-label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mim-purple);
  margin: 0 0 12px;
}
.ap-notes { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.ap-note {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.ap-note:hover { background: rgba(255,255,255,0.09); }
.ap-note:focus-visible { outline: 2px solid var(--mim-purple); outline-offset: 2px; }
.ap-num {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M27 5 C41 5.5 48 15 47 27 C46 39 36 48.5 24 47 C11.5 45.5 5 35 6 23 C7 12.5 15.5 5.5 28.5 5.2' fill='none' stroke='%23B7A3FC' stroke-width='2.3' stroke-linecap='round' opacity='0.82'/%3E%3C/svg%3E") center/contain no-repeat;
  font-family: var(--font-feature);
  font-size: 19px;
  color: var(--mim-white);
  letter-spacing: 0.02em;
  animation: ap-num-pulse 2.2s ease-in-out infinite;
}
/* Pulses the number icon to make it clearer these are clickable (design feedback 14 Jul 2026). */
@keyframes ap-num-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ap-num { animation: none; } }

/* Toggle twin of the @media block above — same state, driven by the
   in-course setting. A body class cannot un-match a media query, so the
   two entry points have to be authored in parallel. Keep them in step. */
body.reduced-motion .ap-num { animation: none; }

.ap-note-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--mim-white);
}

/* ── Modal ──────────────────────────────────────────────────────────── */
.ap-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-standard), visibility 0.18s var(--ease-standard);
}
.ap-modal-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.ap-modal {
  background: var(--mim-white);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px;
  max-height: 86vh; overflow-y: auto;
  padding: 32px 34px 34px;
  position: relative;
  transform: translateY(8px);
  transition: transform 0.2s var(--ease-out);
}
.ap-modal-backdrop.is-open .ap-modal { transform: none; }
.ap-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--mim-white);
  border-radius: 999px;
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 18px; line-height: 1;
  transition: background 0.16s var(--ease-standard), color 0.16s var(--ease-standard);
}
.ap-modal__close:hover { background: var(--mim-black); color: var(--mim-white); }
.ap-modal__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--mim-purple-aa-dark);
  margin: 0 0 6px;
}
.ap-modal__title {
  font-family: var(--font-feature);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  color: var(--mim-black);
  margin: 0 0 18px;
  padding-right: 40px;
}
.ap-modal__body p {
  font-family: var(--font-primary);
  font-weight: var(--weight-light, 300);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 14px;
}
.ap-modal__body ul.ap-body-list {
  margin: 0 0 14px;
  padding-left: 20px;
  list-style: disc;
}
.ap-modal__body ul.ap-body-list li {
  font-family: var(--font-primary);
  font-weight: var(--weight-light, 300);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 0 6px;
}
body.night-mode .ap-modal__body ul.ap-body-list li { color: rgba(255,255,255,0.75); }

/* Phrase rows — READ-ONLY (design rule, 17 Jul 2026).
   These were tap-to-copy buttons; copy was removed. They are now <ul>/<li>, so
   no cursor:pointer, no hover affordance and no focus ring — nothing here should
   suggest a control that no longer exists. */
.ap-phrases__label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mim-purple-aa-dark);
  margin: 18px 0 8px;
}
.ap-phrases__label + .ap-phrases { margin-top: 0; }
.ap-phrases { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; padding: 0; }
.ap-phrase {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--mim-white);
}
.ap-phrase__text {
  flex: 1;
  font-family: var(--font-feature);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mim-black);
}
/* (.ap-phrase__copy / .is-copied removed 17 Jul 2026 — the Copy control is gone.) */

/* ═══ Progress: blinking arrow + completion tick (design rule, 17 Jul 2026) ═══
   The arrow marks the first unopened move and walks down as moves are opened;
   the tick overlays the number of a move already seen. */
.ap-note { position: relative; }

.ap-arrow {
  position: absolute; left: -22px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  color: var(--mim-purple, #B7A3FC);
  pointer-events: none;
  animation: ap-arrow-blink 1.15s ease-in-out infinite;
}
.ap-arrow svg { width: 100%; height: 100%; display: block; }
/* Ends on opacity 1, so when the shared reduced-motion rule compresses this to a
   stop the arrow stays visible and keeps pointing — it just stops blinking. It
   carries meaning, so it must never be hidden by a motion setting. */
@keyframes ap-arrow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* The notes sit inset on the portrait; on narrow frames -22px would clip, so
   tuck the arrow inside the row's own padding instead. */
@media (max-width: 720px) {
  .ap-arrow { left: -16px; width: 15px; height: 15px; margin-top: -7.5px; }
}

.ap-num { position: relative; }
.ap-num__tick {
  position: absolute; top: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mim-purple, #B7A3FC);
  color: #000;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.55);
}
.ap-num__tick svg { width: 11px; height: 11px; display: block; }
/* A seen move stops competing for attention: no pulse, number dimmed, but still
   legible so the sequence reads. */
.ap-note.is-done .ap-num { animation: none; opacity: 0.72; }

/* Research */
.ap-research { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.ap-research__label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mim-purple-aa-dark);
  margin: 0;
}
.ap-research__item {
  background: var(--mo-grey, #F4F4F4);
  border-radius: 10px;
  padding: 14px 16px;
}
.ap-research__item p {
  font-family: var(--font-primary);
  font-weight: var(--weight-light, 300);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
}
.ap-research__item a {
  display: block;
  margin-top: 6px;
  color: var(--mim-purple-aa-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .ap-frame { height: auto; min-height: 560px; }
  .ap-content { padding: 28px 24px; }
  .ap-head { max-width: 100%; }
  .ap-scrim {
    background:
      linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%);
  }
  .ap-note-title { font-size: 15px; }
  .ap-num { width: 46px; height: 46px; font-size: 17px; }
  .ap-modal { padding: 26px 22px 28px; }
}

/* ── Night mode ─────────────────────────────────────────────────────── */
body.night-mode .ap-modal { background: #1a1a1a; }
body.night-mode .ap-modal__title { color: #fff; }
body.night-mode .ap-modal__body p { color: rgba(255,255,255,0.75); }
body.night-mode .ap-phrase { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
body.night-mode .ap-phrase__text { color: #fff; }
body.night-mode .ap-research__item { background: rgba(255,255,255,0.05); }
body.night-mode .ap-research__item p { color: rgba(255,255,255,0.72); }
body.night-mode .ap-modal__close { background: #1a1a1a; color: #fff; border-color: rgba(255,255,255,0.2); }