/* PharmaSynapse — design system v4
   Page layer — resources
   Generated from the standalone build. Edit here, not in the pages. */

/* ============================================================
   PAGE LAYER — /resources
   Components that do not exist in marketing.css yet. Each is written in the
   system idiom and flagged in the handoff block for promotion.
   ============================================================ */

/* ---- current-page nav state. The header script already strips the href from
        the wordmark on the page it points at; the nav link needs the same
        treatment and the stylesheet had no rule for it. PROMOTE. ---- */
.site-header__link:not([href]){color:var(--ink);cursor:default}
.site-header__link:not([href])::before{display:none}
.site-header__link:not([href])::after{content:"";position:absolute;left:2px;right:2px;bottom:12px;height:1.5px;background:var(--teal)}

/* ---- hero. The H1 on this page is nine words against the homepage's seven and
        wraps to four lines, so the copy column runs far taller than the
        quick-answer panel. Centring the two leaves a hole under the panel;
        top-aligning them reads as intentional. The copy column also takes the
        larger share, which pulls the H1 back to three lines at 1440. ---- */
.hero-grid{align-items:start;grid-template-columns:1.18fr .82fr}
.hero .qanswer{margin-top:8px}

/* ---- .srcs — the nine source documents. A labelled row list, not cards:
        nine cards would read as a product grid and these are citations.
        Left column carries the code and title, right carries the requirement. ---- */
.srcs{margin-top:44px;border-top:1px solid var(--line)}
.src{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px;padding:26px 0;border-bottom:1px solid var(--line);transition:background var(--t-mid) var(--ease)}
.src:hover{background:var(--paper)}
.src .code{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;color:#0A6D6E;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 9px;font-variant-numeric:tabular-nums}
.src h3{font-size:17px;font-weight:600;letter-spacing:-.018em;line-height:1.34;color:var(--ink);margin:0}
.src p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0}
/* Draft state on a source row. This is document artwork in the L8 sense — the
   status of a regulation, not page UI — so the lifecycle hue is permitted. */
.pill-draft{display:inline-flex;align-items:center;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--draft);background:var(--draft-bg);border-radius:4px;padding:3px 7px;line-height:1}

/* ---- .vline — the dated verification statement. Deliberately quiet: it is a
        fact, not a badge, and dressing it up would invite the reader to
        discount it. ---- */
.vline{margin-top:30px;padding:16px 20px;border:1px solid rgba(255,255,255,.14);border-left:2px solid var(--teal-bright);border-radius:var(--radius-card);background:rgba(255,255,255,.045);font-family:var(--mono);font-size:12.5px;line-height:1.66;color:var(--on-dark-2);max-width:72ch;font-variant-numeric:tabular-nums}

/* ---- .pipe — the six problem clusters. Two columns of hairline rows. ---- */
.pipe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:44px;border-top:1px solid var(--line)}
.pi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.pi .pn{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;color:#0A6D6E;font-variant-numeric:tabular-nums}
.pi p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0}

/* ---- .cards / .pcard — the article index.
        Always an <article>; when a piece publishes, the TITLE becomes the link
        and a stretched ::after makes the whole card clickable. Wrapping the card
        in an <a> would nest it around the author links, which is invalid HTML
        and which browsers and screen readers both handle badly. The author links
        sit above the overlay on z-index.

        Hover is present in both states because every card now contains real
        links (the bylines). It stops short of promising navigation: no
        cursor:pointer until the card is live. See the handoff — with the state
        pill removed, hover is the only thing left that could imply a click that
        is not there yet. ---- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.pcard{position:relative;display:flex;flex-direction:column;gap:11px;padding:26px 26px 20px;
  border:1px solid var(--line);border-radius:var(--radius-card);background:#FFFFFF;overflow:hidden;
  transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
/* the accent grows from the left edge rather than appearing, so the card reads
   as responding rather than switching */
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal);
  transition:width var(--t-mid) var(--ease)}
.pcard:hover{border-color:rgba(14,140,140,.38);box-shadow:0 6px 22px rgba(21,33,46,.09);transform:translateY(-2px)}
.pcard:hover::before{width:3px}
.pcard:focus-within{border-color:rgba(14,140,140,.5)}
.pcard.is-live{cursor:pointer}
.pcard.is-live:hover h3 a{color:#0A6D6E}

.pcard .ptop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:18px}
.pcard .parea{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.05em;color:#0A6D6E;font-variant-numeric:tabular-nums}
.pcard .pmins{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pcard h3{font-size:18px;font-weight:600;letter-spacing:-.022em;line-height:1.32;color:var(--ink);margin:0}
.pcard h3 a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease-io)}
.pcard h3 a::after{content:"";position:absolute;inset:0;z-index:0}
.pcard p{font-size:14.5px;line-height:1.58;color:var(--ink-2);margin:0}

/* Hashtags as chips. They are the second scan signal after the area label, so
   they carry a tinted ground rather than sitting as grey text. Teal-soft, not
   teal: a solid teal chip would read as a button. */
.pcard .ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px; }
.pcard .ptag{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:#0A6D6E;
  background:#E4F3F3;border-radius:var(--radius-pill);padding:4px 9px;line-height:1;white-space:nowrap;text-decoration:none}

.pcard .pfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.pcard .pby{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
/* Author links sit above the stretched title overlay, so they stay clickable
   once a card goes live. Quiet by default: two teal names per card would fight
   the hashtag chips for the eye. */
.pcard .pby a{position:relative;z-index:1;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--t-fast) var(--ease-io),border-color var(--t-fast) var(--ease-io)}
.pcard .pby a:hover{color:#0A6D6E;border-bottom-color:rgba(14,140,140,.45)}
.pcard .pby a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}
.pcard .psep{color:var(--ink-3)}
.pcard .pdate{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3);flex:none}
.on-dark .pcard .parea{color:var(--teal-bright)}
.on-dark .pcard .pby a,.on-dark .pcard .pdate{color:var(--on-dark-2)}
@media(prefers-reduced-motion:reduce){.pcard:hover{transform:none}}
@media(max-width:520px){.pcard .ptags{display:none}}
.pclose{margin-top:34px;max-width:78ch;font-size:15.5px;line-height:1.62;color:var(--ink-2)}

/* ---- .fnd had no running-prose slot, only a quote and an attribution. ---- */
.fnd .bio{color:var(--on-dark-2)}
.on-dark .badge--photo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.on-dark .cred{color:var(--on-dark-2);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.fnd .bio{font-size:15.5px;line-height:1.64;color:var(--ink-2);max-width:66ch;margin:0 0 20px}

/* ---- .sec.sunken — a light band one step off white, used to separate the
        byline from the questions without spending a navy block on it. ---- */
.sec.sunken{background:var(--paper)}

/* ---- §Writing sits on navy: the light bands carry what exists, the dark band
        carries what does not. Every component in that section was written for a
        light ground and needs a reset, which is the same shape of defect as
        .mini and .page. ---- */
.on-dark .pipe{border-top-color:rgba(255,255,255,.12)}
.on-dark .pi{border-bottom-color:rgba(255,255,255,.12)}
.on-dark .pi p{color:var(--on-dark-2)}
.on-dark .pi .pn{color:var(--teal-bright)}
.on-dark .pcard{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.on-dark .pcard h3{color:var(--on-dark)}
.on-dark .pcard p{color:var(--on-dark-2)}
.on-dark .pcard .ptag{color:var(--on-dark-3)}
.on-dark .pcard .pstate{color:var(--on-dark-2);border-color:rgba(255,255,255,.22)}
.on-dark .pcard .pfoot{color:var(--on-dark-3);border-top-color:rgba(255,255,255,.12)}
.on-dark .pclose{color:var(--on-dark-2)}

.on-dark .fnd-pair{border-top-color:rgba(255,255,255,.12)}
.on-dark .fnd{border-bottom-color:rgba(255,255,255,.12)}
.on-dark .fnd blockquote{color:var(--on-dark)}
.on-dark .fnd .who{color:var(--on-dark-2)}
.on-dark .fnd .who b{color:var(--on-dark)}
.on-dark .badge--photo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.on-dark .cred{color:var(--on-dark-2);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}

/* ---- graphics on this page ---- */
.gfig figcaption{margin-top:16px;max-width:76ch}

/* ---- responsive ---- */
@media(max-width:960px){
  .src{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .pipe{grid-template-columns:1fr;gap:0}
  .cards{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .pcard{padding:22px 20px 18px}
  .vline{padding:14px 16px;font-size:12px}
}
@media(max-width:460px){
  /* The nav wraps to its own row below 460px, so the current-page underline
     needs to sit clear of the shorter link box. */
  .site-header__link:not([href])::after{bottom:8px}
}


/* DEFECT FIX - handoff tables overflowed below 560px on every build that has
   carried this block. table-layout:fixed plus wrapping constrains them without
   touching the markup. Fourth occurrence; PROMOTE. */
@media print{}