/* Photo labels: short purple glass labels placed on the objects in a reader cover photo.
   Positions come from hero_notes (x / y percent of the photo). When the photo's column is under
   700px wide (phones, small tablets and the narrow guide-layout column), numbered pins sit on the
   photo and the same labels form a navy band under it. Reveal timing: static/js/photo-notes.js. */

.rc-photo-notes { container-type:inline-size; width:100%; margin:0; border-radius:var(--radius-lg); background:var(--surface-alt); overflow:hidden; }
.rc-guide-hero .rc-photo-notes { border-radius:var(--radius-md); }
.rc-photo-notes-frame { position:relative; display:block; width:fit-content; max-width:100%; margin:0 auto; }
.rc-photo-notes-stage { position:relative; display:block; width:fit-content; max-width:100%; margin:0 auto; }
/* The stage must match the picture exactly so the pins land on their objects: no letterboxing. */
:is(.rc-reader-header, .rc-guide-hero) .rc-photo-notes .rc-reader-cover { display:block; width:auto; max-width:100%; height:auto; border-radius:0; background:none; object-fit:fill; }
.rc-reader-header .rc-photo-notes .rc-reader-cover { max-height:480px; }

.rc-photo-labels { list-style:none; margin:0; padding:0; }
.rc-photo-notes .rc-photo-label { position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; display:flex; align-items:center; gap:8px; width:max-content; max-width:240px; margin:0; padding:7px 14px 7px 7px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(59,42,140,.8); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); box-shadow:0 6px 20px rgba(4,34,56,.28); color:#fff; font-size:14px; font-weight:600; line-height:1.35; }
/* The global type rule sets spans to Inter; keep the labels on the public Open Sans role. */
#main-content .rc-photo-notes :is(.rc-photo-label, .rc-photo-label *, .rc-photo-pin) { font-family:"Open Sans", Arial, sans-serif !important; }
.rc-photo-n { flex:none; width:20px; height:20px; border-radius:50%; background:var(--ink-purple-lime); color:#1b1c1a; font-size:12px; font-weight:700; line-height:20px; text-align:center; }
.rc-photo-pin { display:none; }

@container (max-width:699px) {
  .rc-photo-notes-frame { width:100%; background:var(--attention-ink, #042238); }
  .rc-photo-pin { position:absolute; left:var(--x); top:var(--y); display:block; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--ink-purple-lime); box-shadow:0 0 0 3px rgba(255,255,255,.92),0 2px 8px rgba(4,34,56,.45); color:#1b1c1a; font-size:12px; font-weight:700; line-height:22px; text-align:center; }
  .rc-photo-labels { display:grid; gap:8px; padding:12px; }
  .rc-photo-notes .rc-photo-label { position:static; translate:none; max-width:none; border-color:rgba(255,255,255,.16); border-radius:4px; background:rgba(255,255,255,.08); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
}