/* ============================================================================
   The Hopkins Institute — DEV ANNOTATION LAYER  (00-build-rules.md RULE 1)
   Shared by every design concept. Strippable in one move: delete the
   <link> + <script> pair, or set  data-dev-notes="off"  on <html>.
   Nothing in this file styles the page itself. Nothing in the page markup
   depends on it. Markers are injected by dev-notes.js from data-note
   attributes, so the production markup never carries a marker element.
   ========================================================================= */

.dvn-bar{
  position:fixed; z-index:9000; right:16px; bottom:16px;
  display:flex; align-items:center; gap:10px;
  padding:9px 12px 9px 14px;
  background:#241029; color:#F7F3EA;
  border:1px solid rgba(203,174,208,.34);
  box-shadow:0 12px 34px rgba(0,0,0,.42);
  font:500 13px/1.2 "Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 104;
  letter-spacing:.04em;
}
.dvn-bar__count{
  font-variation-settings:"wdth" 100; font-weight:600;
  color:#E0AE3C; font-size:12px; letter-spacing:.1em;
}
.dvn-switch{
  appearance:none; margin:0; cursor:pointer;
  width:42px; height:22px; border-radius:11px; flex:0 0 auto;
  background:rgba(247,243,234,.22);
  border:1px solid rgba(203,174,208,.4);
  position:relative; transition:background 160ms ease;
}
.dvn-switch::after{
  content:""; position:absolute; inset:2px auto 2px 2px;
  width:16px; border-radius:50%; background:#F7F3EA;
  transition:transform 160ms cubic-bezier(.2,.8,.3,1);
}
.dvn-switch:checked{background:#E0AE3C; border-color:#E0AE3C;}
.dvn-switch:checked::after{transform:translateX(20px); background:#33193D;}
.dvn-switch:focus-visible{outline:3px solid #E0AE3C; outline-offset:2px;}
.dvn-bar label{cursor:pointer; user-select:none;}

/* ---- the marker ---------------------------------------------------------- */
/* Layout-neutral: absolutely positioned out of flow, so turning notes on or off
   can never reflow the page. The anchor needs a containing block, but this file
   must NEVER set `position` — doing so silently overrode `position:absolute` on
   annotated layout elements. dev-notes.js instead sets position:relative inline,
   and only on hosts that compute to `static`. */
.dvn-marker{
  position:absolute; z-index:60; top:-9px; left:-9px;
  width:22px; height:22px; padding:0; margin:0;
  display:grid; place-items:center;
  border-radius:50%; border:1.5px solid #33193D;
  background:#E0AE3C; color:#33193D;
  font:700 12px/1 "Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 100;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform 140ms cubic-bezier(.2,.8,.3,1), background 140ms ease;
}
.dvn-marker:hover{transform:scale(1.14); background:#EFC96B;}
.dvn-marker:active{transform:scale(.97);}
.dvn-marker:focus-visible{outline:3px solid #33193D; outline-offset:2px;}
/* `tr` is only ever used on text-fitted hosts (spans, links, single-line paragraphs),
   whose box edge IS the last glyph. At right:-9px the 22px marker overlapped the final
   ~13px of text — it read "THE HOPKINS INSTITUT(i)" in the hero. Sit it fully clear of
   the box with an 8px gap instead. Inset/blocky hosts use `in`/`inr`, not `tr`. */
.dvn-marker[data-pos="tr"]{left:auto; right:-30px; top:-3px;}
/* `l` — fully outside the host's LEFT edge, vertically centred.
   margin-top rather than translate, because :hover already owns transform. */
.dvn-marker[data-pos="l"]{top:50%; left:-30px; margin-top:-11px;}

/* `navnote` — the navigation's own note. Moving the marker visually was not
   enough: page.js binds `mouseenter` to `li.nav__item`, so while the marker was
   a DOM CHILD of that li, hovering it opened the dropdown no matter where it sat.
   The note now lives on `nav.nav` instead, and the marker is parked clear ABOVE
   the nav row so it is neither inside an item nor over one. */
.dvn-marker[data-pos="navnote"]{top:-14px; left:-26px; margin:0;}
@media (max-width:899px){
  /* the nav collapses into the mobile sheet, so park it inside the header instead */
  .dvn-marker[data-pos="navnote"]{top:2px; left:auto; right:-4px;}
}
.dvn-marker[data-pos="in"]{top:8px; left:8px;}
.dvn-marker[data-pos="inr"]{top:8px; left:auto; right:8px;}

/* ---- the note ------------------------------------------------------------ */
.dvn-note{
  /* FIXED, not absolute: an absolutely-positioned panel is clipped by any
     ancestor with overflow:hidden — inside the hero carousel (which needs
     overflow hidden for the slide transition) notes were sliced off at the
     slide edge. Fixed escapes clipping, and keeps closed panels from adding
     scrollable width. Coordinates are set by place() in dev-notes.js. */
  position:fixed; z-index:70; top:0; left:0;
  width:min(320px, calc(100vw - 40px));
  /* provenance lines made the longest panels taller than a short viewport, and
     place() can only clamp a panel it is able to fit. Cap the height and scroll
     inside instead, so a note is never cut off by the window. */
  max-height:min(76vh, 560px); overflow-y:auto; overscroll-behavior:contain;
  background:#F7F3EA; color:#1B1219;
  border:1px solid #33193D;
  box-shadow:0 18px 44px rgba(27,18,25,.34);
  padding:14px 16px 15px;
  font:400 14px/1.55 "Source Serif 4",Georgia,serif;
  text-align:left; text-transform:none; letter-spacing:0;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 140ms ease, transform 140ms cubic-bezier(.2,.8,.3,1), visibility 140ms;
  /* a closed panel must never be clickable, and must never widen the document:
     a visibility:hidden panel anchored near the right edge added ~110px of
     scrollable width. Root-level `overflow-x:clip` in base.css contains it. */
  pointer-events:none;
}
.dvn-note[data-open="true"]{pointer-events:auto}
.dvn-note[data-open="true"]{opacity:1; visibility:visible; transform:translateY(0);}
.dvn-note::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,#CBAED0 0%,#9A7BAF 45%,#492557 100%);
}
/* (the old data-flip right/left rules are gone — place() now sets explicit
   viewport coordinates and handles both horizontal and vertical flipping) */
.dvn-note__type{
  display:inline-block; margin:2px 0 8px;
  font:600 11px/1 "Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 106;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 8px; border-radius:2px;
}
/* the two provenance tiers read as REASSURANCE, so they get the calmest chips:
   DIRECTED is the client's own instruction, CONSTRAINED is a named constraint */
.dvn-note__type[data-t="DIRECTED"]   {background:#2F5D3A; color:#F2F7F1;}
.dvn-note__type[data-t="CONSTRAINED"]{background:#33193D; color:#CBAED0;}
.dvn-note__type[data-t="ASSUMED"]    {background:#492557; color:#F7F3EA;}
.dvn-note__type[data-t="INVENTED"]   {background:#8A5A12; color:#FBF7F0;}
.dvn-note__type[data-t="PLACEHOLDER"]{background:#6B5A62; color:#FBF7F0;}
.dvn-note__type[data-t="CORRECTED"]  {background:#9E4526; color:#FBF7F0;}
.dvn-note__type[data-t="ASSET"]      {background:#33193D; color:#E0AE3C;}
.dvn-note__type[data-t="QUESTION"]   {background:#E0AE3C; color:#33193D;}
.dvn-note p{margin:0 0 .55em; text-wrap:pretty;}
.dvn-note p:last-child{margin:0;}
.dvn-note b{font-weight:700;}
.dvn-note__ask{
  margin-top:10px; padding-top:9px;
  border-top:1px solid rgba(73,37,87,.22);
  font-style:italic; color:#492557;
}
/* PROVENANCE. Set apart from the explanation so it reads as evidence rather than
   argument: this is where a "why is the article first?" question gets answered
   with the client's own words. */
.dvn-note__src{
  margin-top:10px; padding:9px 11px;
  background:rgba(47,93,58,.09);
  border-left:3px solid #2F5D3A;
}
.dvn-note__src > span{
  display:block; margin-bottom:3px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#2F5D3A;
}
.dvn-note__close{
  position:absolute; top:8px; right:8px; width:24px; height:24px;
  display:grid; place-items:center; padding:0;
  background:none; border:0; cursor:pointer; color:#6B5A62;
  font:400 18px/1 "Archivo",system-ui,sans-serif;
}
.dvn-note__close:hover{color:#9E4526;}
.dvn-note__close:focus-visible{outline:2px solid #492557; outline-offset:1px;}

/* ---- TYPE ISOLATION (must stay last) -------------------------------------
   The panel is injected INSIDE the element it annotates, so page rules that
   target descendants — `.quotecard__q p`, `.article__body p`, `blockquote p` —
   were inheriting straight into the note's unclassed <p> children. Notes on
   large-type hosts (the article pull quote, the legacy slide) rendered at
   display size while the rest rendered correctly at 14px.

   Specificity alone can't fix this: each page's inline <style> loads AFTER
   this file, so an equal-specificity page rule wins on source order, and we
   can't out-specify rules we haven't seen. This layer is a deliberately
   isolated overlay, so it hard-resets its own typography instead. */
.dvn-note,
.dvn-note > p{
  font-family:"Source Serif 4",Georgia,serif !important;
  font-size:14px !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  font-style:normal !important;
  letter-spacing:0 !important;
  word-spacing:normal !important;
  text-transform:none !important;
  text-align:left !important;
  text-indent:0 !important;
  color:#1B1219 !important;
  max-width:none !important;
}
.dvn-note > p{margin:0 0 .55em !important;}
.dvn-note > p:last-child{margin:0 !important;}
.dvn-note > .dvn-note__ask{
  font-style:italic !important;
  color:#492557 !important;
  margin-top:10px !important;
}
.dvn-note > .dvn-note__src{margin-top:10px !important;}
.dvn-note > .dvn-note__src > span{
  font-family:"Archivo",system-ui,sans-serif !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:#2F5D3A !important;
}
.dvn-note > .dvn-note__type{
  font-family:"Archivo",system-ui,sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.dvn-note > .dvn-note__close{
  font-family:"Archivo",system-ui,sans-serif !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}

/* highlight the annotated element while its note is open */
[data-note].dvn-lit{outline:2px dashed rgba(224,174,60,.9); outline-offset:3px;}

/* layer OFF -------------------------------------------------------------- */
html[data-dev-notes="off"] .dvn-marker,
html[data-dev-notes="off"] .dvn-note{display:none !important;}

@media print{.dvn-bar,.dvn-marker,.dvn-note{display:none !important;}}
@media (prefers-reduced-motion:reduce){
  .dvn-marker,.dvn-note,.dvn-switch,.dvn-switch::after{transition-duration:.01ms !important;}
}
