/* Priovant Therapeutics — shared styles (Design in DC) */

.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }

x-dc{display:none!important}

.prv-nav a{transition:color .42s ease;}
.prv-nav a:hover{color:#0BC1EC;}

.prv-foot a{transition:color .42s ease;}
.prv-foot a:hover{color:#0BC1EC;}
.prv-optbtn{transition:background .42s cubic-bezier(.16,1,.3,1),border-color .42s ease,color .42s ease;}
@media (max-width:640px){#prv-footer-links{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:1.2rem!important;}}


/* <image-slot> replacement shim.
   The custom element was :host{display:block;position:relative;width:100%;height:100%}
   with the image absolutely filling a .frame inside it. A plain <figure> is auto-height,
   so height:100% resolves to auto, the image falls back to its intrinsic ratio and
   overflows the frame — which crops the photograph differently from the approved comp.
   Filling the (always position:relative) frame reproduces the original geometry. */
.image-slot { position: absolute; inset: 0; display: block; margin: 0; overflow: hidden; }
.image-slot img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; display: block; }


/* ---- production layer (baked) ------------------------------------------- */

/* Prose links, and the visually-hidden note after an outbound one. The approved
   Dermatomyositis copy carries both inline on every <a>; lifting them to classes is what
   lets that body be plain HTML in the editor rather than styled markup. :hover is pinned
   to the same colour on purpose — the inline style it replaces outranked a:hover, so the
   approved link does not turn cyan, and equal-specificity rules would otherwise let
   stylesheet order decide it. */
.prv-prose a,.prv-prose a:hover{color:#022345;border-bottom:1px solid rgba(2,35,69,.35);
  padding-bottom:1px;}
.prv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;}

.prv-skip{position:absolute;left:-9999px;top:0;z-index:900;background:#022345;
  color:#FBFCFD;padding:.75rem 1.15rem;font:500 .95rem/1 Roboto,system-ui,sans-serif;
  border-radius:0 0 8px 0;}
.prv-skip:focus{left:0;}

/* current page — the prototype painted this from JS on every scroll frame;
   aria-current carries it now, so the state is announced as well as shown */
.prv-nav [aria-current="page"],
.prv-nav [data-parent-active]{color:#0BC1EC !important;}

/* keyboard focus — visible on both surfaces, never on mouse click */
:focus-visible{outline:2px solid #0BC1EC;outline-offset:2px;}
.prv-nav :focus-visible,#prv-mobile-nav :focus-visible{outline-color:#0BC1EC;}

/* nav swap: the design tool did this with a resize listener; CSS is cheaper
   and removes the flash of the wrong bar before JS runs */
#prv-burger{display:none;}
@media (max-width:899px){
  [data-desktop-nav]{display:none !important;}
  #prv-burger{display:flex !important;}
}
#prv-mobile-nav[hidden],.prv-bio[hidden],[data-row][hidden]{display:none !important;}
body.prv-locked{overflow:hidden;}

/* touch targets */
@media (max-width:899px){
  .prv-nav a,#prv-mobile-nav a,button[data-page-btn]{min-height:44px;
    display:inline-flex;align-items:center;}
}

/* pipeline rows are buttons now — keep the rendered geometry */
button[data-row]{-webkit-appearance:none;appearance:none;}
button[data-row]:hover [data-plus]{background:#EFF4F9;}

.prv-form-status{color:#1F6F5C;}
.prv-form-status[data-state="error"]{color:#9E2A2B;}
[aria-invalid="true"]{border-bottom-color:#9E2A2B !important;}
/* A checkbox has no border for the rule above to colour, so it gets a ring in
   the same error red. Outline rather than border: it does not reflow the row. */
input[type="checkbox"][aria-invalid="true"]{outline:2px solid #9E2A2B;outline-offset:2px;}

/* reduced motion — required by spec 5.5, absent from the prototypes */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;}
}