/* Native modal top layer keeps the guide above site menus without z-index escalation. */
.crg { --crg-bg:#fff; --crg-text:#17263d; --crg-muted:#53647a; --crg-line:#d8e1ed; --crg-soft:#f2f6fb; --crg-accent:#2459b8; --crg-selected:#e5efff;
  position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:24px; border:0; background:transparent; color:var(--crg-text); font:14px/1.5 system-ui,sans-serif; }
.crg:not([open]) { display:none; }
.crg[open] { display:flex; align-items:center; justify-content:center; }
.crg::backdrop { background:rgba(9,18,35,.65); backdrop-filter:blur(4px); }
:root[data-theme=dark] .crg { --crg-bg:#191e2d; --crg-text:#edf3ff; --crg-muted:#b7c6dc; --crg-line:#3e4b62; --crg-soft:#242d40; --crg-accent:#a8c8ff; --crg-selected:#293f61; color-scheme:dark; }
.crg *, .crg *::before, .crg *::after { box-sizing:border-box; }
.crg .crg-card { position:relative; width:100%; max-width:1040px; max-height:100%; overflow:auto; overscroll-behavior:contain; background:var(--crg-bg); border:1px solid var(--crg-line); border-radius:22px; padding:30px; box-shadow:0 24px 90px #0005; }
.crg h2, .crg h3, .crg p { color:inherit; font-family:inherit; margin:0; line-height:1.5; }
.crg h2 { font-size:clamp(22px,4vw,30px); font-weight:750; line-height:1.2; }
.crg h3 { margin:26px 0 4px; font-size:18px; font-weight:700; }
.crg .crg-header { display:flex; align-items:center; gap:18px; padding-right:40px; margin-bottom:22px; }
.crg .crg-header img { width:88px; height:88px; object-fit:contain; flex-shrink:0; }
.crg .crg-header p, .crg .crg-hint, .crg footer p { color:var(--crg-muted); }
.crg .crg-eyebrow { font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:750; margin-bottom:7px; }
.crg .crg-mark { display:grid; place-items:center; padding:12px; min-width:76px; min-height:76px; background:var(--crg-soft); color:var(--crg-accent); font-weight:800; border-radius:18px; }
.crg button { appearance:none; font:inherit; font-weight:650; color:var(--crg-accent); background:var(--crg-bg); border:1px solid var(--crg-line); border-radius:9px; min-height:44px; padding:9px 14px; cursor:pointer; }
.crg button:hover { background:var(--crg-soft); }
.crg button:disabled { opacity:.45; cursor:default; }
.crg :focus-visible { outline:3px solid var(--crg-accent); outline-offset:3px; }
.crg .crg-close { position:absolute; right:14px; top:14px; padding:0; width:44px; font-size:26px; line-height:1; }
.crg .crg-steps { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0; }
.crg .crg-notice, .crg .crg-unit { background:var(--crg-soft); padding:12px 16px; border-radius:10px; margin:10px 0; overflow-wrap:anywhere; }
.crg .crg-requirements { margin:0; }
.crg .crg-requirements > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:18px; padding:14px 0; border-bottom:1px solid var(--crg-line); }
.crg dt { font-weight:650; }
.crg dd { margin:0; }
.crg ul { list-style:disc; margin:0; padding-left:18px; }
.crg li + li { margin-top:7px; }
.crg .crg-measured { display:block; margin-top:8px; color:var(--crg-accent); font-size:13px; }
.crg .crg-measured strong { margin-left:6px; }
.crg .crg-matrix { max-width:100%; overflow:auto; border:1px solid var(--crg-line); border-radius:12px; margin-top:14px; }
.crg table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; margin:0; color:inherit; }
.crg th, .crg td { min-width:140px; padding:12px; vertical-align:top; text-align:left; border:0; border-bottom:1px solid var(--crg-line); border-right:1px solid var(--crg-line); }
.crg th { background:var(--crg-soft); font-weight:650; }
.crg th:first-child { position:sticky; left:0; min-width:145px; max-width:180px; z-index:1; }
.crg .crg-selected { background:var(--crg-selected); box-shadow:inset 0 3px var(--crg-accent); }
.crg footer { border-top:1px solid var(--crg-line); padding-top:18px; margin-top:24px; font-size:12px; }
.crg footer a { display:inline-block; padding:12px 0; color:var(--crg-accent); text-decoration:underline; font-weight:650; }
.crg .crg-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.cyb-db button.cyb-db-pill, .psu-performance button.ppt-pill { cursor:pointer; font:inherit; font-size:12px; font-weight:750; min-height:36px; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.cyb-db .cyb-db-guides { display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:600px) {
  .cyb-db button.cyb-db-pill, .psu-performance button.ppt-pill { min-height:44px; }
  .crg { padding:0; }
  .crg[open] { align-items:flex-end; }
  .crg .crg-card { max-height:92dvh; border-radius:20px 20px 0 0; padding:24px 16px max(20px,env(safe-area-inset-bottom)); }
  .crg .crg-header { gap:12px; }
  .crg .crg-header img { width:60px; height:60px; }
  .crg .crg-mark { min-width:56px; min-height:56px; padding:6px; font-size:12px; }
  .crg .crg-requirements > div { grid-template-columns:1fr; gap:5px; }
  .crg th:first-child { min-width:110px; max-width:130px; }
}
@media print { .crg { display:none !important; } }

/* The title takes focus programmatically when the dialog opens; a ring around it reads as a stray box. */
#crg-title:focus { outline: none; }