/* FDA Predicate Graph — page styles (enqueued by mdn-fda-predicate.php). */

.mdn-pg {
  --navy:#001871; --navy-dark:#000e45; --accent:#0071bc; --accent-dark:#205493; --gold:#e5a200;
  --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0; --g300:#cbd5e1; --g400:#94a3b8; --g500:#64748b; --g600:#475569; --g700:#334155; --g800:#1e293b;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius:14px; --shadow:0 6px 24px rgba(0,24,113,0.10);
  font-family:var(--font); color:var(--g800); width:100%;
}
.ast-separate-container .site-content > .ast-container, .ast-plain-container .site-content > .ast-container { max-width:100% !important; padding:0 !important; }
.ast-separate-container #primary, .ast-plain-container #primary { max-width:100% !important; padding:0 !important; margin:0 !important; }
.ast-separate-container .ast-article-page, .ast-plain-container .ast-article-page { max-width:100% !important; padding:0 !important; margin:0 auto !important; background:transparent !important; }
#secondary,.entry-header,.entry-footer,.post-navigation,.comments-area{display:none !important;}
.mdn-pg *{box-sizing:border-box;}

/* Hero */
.mdn-pg-hero{background:linear-gradient(135deg,var(--navy-dark),var(--navy),var(--accent));padding:48px 24px 54px;text-align:center;position:relative;overflow:hidden;}
.mdn-pg-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 50%,rgba(255,255,255,0.06),transparent 55%);}
.mdn-pg-hero-in{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.mdn-pg-hero h1{color:#fff;font-size:2em;font-weight:800;margin:0 0 10px;letter-spacing:-0.03em;}
.mdn-pg-hero p{color:rgba(255,255,255,0.78);font-size:1em;margin:0 auto;max-width:680px;line-height:1.55;}

.mdn-pg-wrap{max-width:1320px;margin:0 auto;padding:22px 24px 60px;}

/* Search + type-ahead */
.mdn-pg-searchbar{display:flex;gap:10px;max-width:720px;margin:0 auto 8px;position:relative;}
.mdn-pg-searchbar input{flex:1;padding:14px 18px;font-size:1em;font-family:var(--font);border:1px solid var(--g300);border-radius:100px;outline:none;transition:.2s;}
.mdn-pg-searchbar input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,113,188,0.10);}
.mdn-pg-results{position:absolute;top:56px;left:0;right:0;background:#fff;border:1px solid var(--g200);border-radius:14px;box-shadow:var(--shadow);z-index:30;overflow:hidden;display:none;max-height:420px;overflow-y:auto;}
.mdn-pg-results.open{display:block;}
.mdn-pg-ritem{padding:11px 18px;cursor:pointer;border-bottom:1px solid var(--g100);font-size:0.88em;}
.mdn-pg-ritem:last-child{border-bottom:0;}
.mdn-pg-ritem:hover,.mdn-pg-ritem.act{background:var(--g50);}
.mdn-pg-ritem b{color:var(--navy);} .mdn-pg-ritem .meta{color:var(--g500);font-size:0.92em;margin-top:2px;}
.mdn-pg-ritem em{font-style:normal;background:#fff3cd;}

/* Example chips */
.mdn-pg-examples{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px 0 2px;font-size:0.8em;color:var(--g500);}
.mdn-pg-chip{padding:5px 13px;border-radius:100px;font-size:1em;font-family:var(--font);border:1px solid var(--g200);background:#fff;color:var(--accent);cursor:pointer;transition:.15s;font-weight:600;}
/* The theme's button:hover forces color:#fff, so omitting an explicit color here rendered
   the chip as white text on a near-white (#f8fafc) hover background: contrast 1.05:1,
   effectively invisible. Always restate color alongside a light hover background. */
.mdn-pg-chip:hover,.mdn-pg-chip:focus-visible{border-color:var(--accent);background:var(--g100);color:var(--accent-dark);}

.mdn-pg-stat{text-align:center;font-size:0.82em;color:var(--g500);margin:8px 0 4px;}

/* Toolbar */
.mdn-pg-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;margin:14px 0 16px;}
.mdn-pg-toolbar .grp{display:inline-flex;align-items:center;gap:7px;font-size:0.8em;color:var(--g600);font-weight:600;}
.mdn-pg-toolbar select,.mdn-pg-btn{padding:8px 13px;font-size:0.82em;font-family:var(--font);border:1px solid var(--g300);border-radius:9px;background:#fff;color:var(--g700);cursor:pointer;transition:.15s;}
.mdn-pg-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 2px 8px rgba(0,113,188,0.08);}
.mdn-pg-btn.copied{border-color:#059669;color:#059669;}

/* Stage: canvas + side panel */
.mdn-pg-stage{display:grid;grid-template-columns:1fr 320px;gap:18px;}
.mdn-pg-canvaswrap{position:relative;border:1px solid var(--g200);border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,#fcfdff,#f4f7fb);box-shadow:var(--shadow);}
.mdn-pg-canvaswrap:fullscreen{background:#fff;border-radius:0;}
.mdn-pg-canvaswrap:fullscreen #mdn-pg-cy{height:100vh;}
#mdn-pg-cy{height:680px;width:100%;}
.mdn-pg-zoom{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:6px;z-index:5;}
.mdn-pg-zoom button{width:34px;height:34px;border:1px solid var(--g200);background:#fff;border-radius:9px;cursor:pointer;font-size:1.05em;color:var(--g600);box-shadow:0 2px 6px rgba(0,0,0,0.05);display:flex;align-items:center;justify-content:center;}
.mdn-pg-zoom button:hover{border-color:var(--accent);color:var(--accent);}

/* Side panel */
.mdn-pg-side{border:1px solid var(--g200);border-radius:var(--radius);padding:20px;background:#fff;height:680px;overflow-y:auto;box-shadow:var(--shadow);}
.mdn-pg-side h3{font-size:1.05em;color:var(--navy);margin:0 0 2px;word-break:break-word;}
.mdn-pg-side .devname{font-size:0.9em;color:var(--g600);margin:0 0 10px;line-height:1.4;word-break:break-word;}
.mdn-pg-side .role{display:inline-block;font-size:0.68em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:100px;margin-bottom:10px;}
.mdn-pg-side .role.root{background:#eef2ff;color:var(--navy);}
.mdn-pg-side .role.anc{background:#eff6ff;color:var(--accent);}
.mdn-pg-side .role.desc{background:#fffbeb;color:#b45309;}
.mdn-pg-side .role.unknown{background:var(--g100);color:var(--g500);}
.mdn-pg-counts{display:flex;gap:10px;margin:10px 0 2px;}
.mdn-pg-counts .cnt{flex:1;text-align:center;background:var(--g50);border:1px solid var(--g100);border-radius:10px;padding:9px 6px;}
.mdn-pg-counts .cnt b{display:block;font-size:1.15em;color:var(--navy);}
.mdn-pg-counts .cnt span{font-size:0.68em;color:var(--g500);text-transform:uppercase;letter-spacing:.03em;font-weight:600;}
.mdn-pg-dl dt{font-size:0.7em;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--g500);margin-top:12px;}
.mdn-pg-dl dd{margin:3px 0 0;font-size:0.9em;color:var(--g800);word-break:break-word;}
.mdn-pg-dl dd .sub{color:var(--g500);font-size:0.88em;}
.mdn-pg-class{display:inline-block;font-size:0.78em;font-weight:700;padding:2px 9px;border-radius:6px;}
.mdn-pg-class.c1{background:#ecfdf5;color:#059669;}
.mdn-pg-class.c2{background:#fffbeb;color:#b45309;}
.mdn-pg-class.c3{background:#fef2f2;color:#b91c1c;}
.mdn-pg-side a{color:var(--accent);font-size:0.85em;display:block;margin-top:8px;}
.mdn-pg-side .btn{display:block;width:100%;text-align:center;margin-top:16px;padding:10px;border:0;border-radius:10px;background:var(--navy);color:#fff;font-weight:700;cursor:pointer;font-size:0.85em;font-family:var(--font);}
.mdn-pg-side .btn:hover{background:var(--navy-dark);}

/* Legend + states */
.mdn-pg-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:0.78em;color:var(--g600);margin-top:14px;justify-content:center;}
.mdn-pg-legend i{width:13px;height:13px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:middle;}
.mdn-pg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--g400);text-align:center;padding:30px;font-size:0.9em;line-height:1.6;}
.mdn-pg-spin{position:absolute;inset:0;display:none;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:rgba(255,255,255,0.72);z-index:8;font-size:0.9em;color:var(--g600);}
.mdn-pg-spin.on{display:flex;}
.mdn-pg-ring{width:34px;height:34px;border-radius:50%;border:3px solid var(--g200);border-top-color:var(--accent);animation:mdnpgspin 0.8s linear infinite;}
@keyframes mdnpgspin{to{transform:rotate(360deg);}}

@media(max-width:880px){
  .mdn-pg-stage{grid-template-columns:1fr;}
  .mdn-pg-side{height:auto;max-height:480px;}
  #mdn-pg-cy{height:520px;}
}