/* 診断ツール（php-check.html）専用。site.css のトークンを使い .pd の中だけに効かせる */
.pd {
  --pd-card: var(--paper-2);
  --pd-ink: var(--ink);
  --pd-muted: var(--ink-2);
  --pd-rule: var(--line);
  --pd-field: #FFFDF8;
  --pd-accent: var(--accent);
  --pd-ok: var(--ok);
  --sev-critical: #C8401E; --tint-critical: #F6E3DC;
  --sev-high: #B9561D;     --tint-high: #F6E8DA;
  --sev-warn: #8A6A00;     --tint-warn: #F3EBD0;
  --sev-ok: #2B6E63;       --tint-ok: #DFEBE6;
  --sev-info: #5C6472;     --tint-info: #E9E6DD;
  padding-block: 56px 96px;
}
.pd .pd-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .pd .pd-grid { grid-template-columns: minmax(0, 1fr); } }

.pd .panel { background: var(--pd-card); border: 1.5px solid var(--ink); border-radius: 0; padding: 22px; display: grid; gap: 16px; min-width: 0; }
.pd h2 { font-family: var(--ff-head); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; margin: 0; }
.pd .fld-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; color: var(--pd-muted); }
.pd .howto { padding-left: 1.4em; display: grid; gap: 4px; list-style: decimal; }
.pd .howto b { color: var(--pd-accent); font-weight: 700; }
.pd textarea#site-info { width: 100%; min-height: 260px; resize: vertical; font-family: var(--ff-mono); font-size: 12px; line-height: 1.6; color: var(--pd-ink); background: var(--pd-field); border: 1px solid var(--pd-rule); border-radius: 0; padding: 12px; }
.pd textarea#site-info:focus { outline: 1px solid var(--pd-accent); }
.pd .btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pd button { font-family: var(--ff-body); font-weight: 700; font-size: 14px; border-radius: 0; padding: 9px 16px; border: 1px solid var(--pd-rule); color: var(--pd-ink); background: transparent; }
.pd button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pd button:hover { border-color: var(--pd-accent); }
.pd button:focus-visible, .pd a:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.pd .note { font-size: 13px; color: var(--pd-muted); margin: 0; }
.pd .safe { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; color: var(--pd-ok); }

.pd .result { display: grid; gap: 18px; min-width: 0; }
.pd .sample-flag { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--pd-muted); border: 1px dashed var(--pd-rule); border-radius: 0; padding: 8px 12px; }
.pd .sample-flag b { color: var(--pd-accent); font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
.pd .verdict { display: grid; grid-template-columns: 6px 1fr; background: var(--pd-card); border: 1.5px solid var(--ink); border-radius: 0; overflow: hidden; }
.pd .verdict .stripe { background: var(--sev); }
.pd .verdict .body { padding: 18px 20px; display: grid; gap: 6px; }
.pd .chip { justify-self: start; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; font-weight: 500; padding: 3px 10px; color: var(--sev); background: var(--tint); }
.pd .verdict h2 { font-size: 22px; text-wrap: balance; word-break: auto-phrase; }
.pd ol.steps li, .pd .howto li, .pd .row .k { word-break: auto-phrase; }
.pd .verdict p { margin: 0; color: var(--pd-muted); }
.pd .s-critical { --sev: var(--sev-critical); --tint: var(--tint-critical); }
.pd .s-high { --sev: var(--sev-high); --tint: var(--tint-high); }
.pd .s-warn { --sev: var(--sev-warn); --tint: var(--tint-warn); }
.pd .s-ok { --sev: var(--sev-ok); --tint: var(--tint-ok); }
.pd .s-info { --sev: var(--sev-info); --tint: var(--tint-info); }

.pd .branches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pd .branch { border: 1px solid var(--pd-rule); border-radius: 0; padding: 8px 10px; display: grid; gap: 2px; align-content: start; }
.pd .branch .b { font-family: var(--ff-mono); font-size: 11px; color: var(--pd-muted); }
.pd .branch .v { font-family: var(--ff-mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd .branch.mine { border-color: var(--sev); background: var(--tint); }
.pd .branch.mine::after { content: "このサイト"; font-size: 11px; color: var(--sev); font-weight: 700; }
.pd .branch.old .v { color: var(--sev-critical); }
@media (max-width: 560px) {
  .pd .branches { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pd .branch { grid-template-columns: 6em 1fr auto; align-items: baseline; padding: 6px 10px; }
}

.pd .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--pd-rule); align-items: baseline; }
.pd .row:first-child { border-top: 0; }
.pd .row .k { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.pd .row .d { grid-column: 1 / -1; font-size: 13px; color: var(--pd-muted); }
.pd .mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }

.pd .tbl-wrap { overflow-x: auto; }
.pd table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd th { text-align: left; font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--pd-muted); padding: 6px 8px; border-bottom: 1px solid var(--pd-rule); white-space: nowrap; }
.pd td { padding: 8px; border-bottom: 1px solid var(--pd-rule); vertical-align: baseline; }
.pd td.name { overflow-wrap: anywhere; min-width: 10em; }
.pd .pill { display: inline-block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; padding: 2px 8px; color: var(--sev); background: var(--tint); white-space: nowrap; }

.pd ol.steps { padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.pd ol.steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; }
.pd ol.steps li::before { content: counter(s); font-family: var(--ff-mono); font-weight: 700; font-size: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }

.pd .offer { background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 0; padding: 22px; display: grid; gap: 12px; }
.pd .offer p { margin: 0; color: var(--pd-muted); font-size: 14px; }
.pd .svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pd .svc { display: grid; gap: 2px; border: 1px solid var(--pd-rule); border-radius: 0; padding: 12px; color: var(--pd-ink); }
.pd .svc:hover { border-color: var(--pd-accent); }
.pd .svc .p { font-family: var(--ff-mono); font-weight: 700; color: var(--pd-accent); }
.pd .svc .n { font-weight: 700; }
.pd .svc .w { font-size: 12px; color: var(--pd-muted); }
.pd .copied { font-size: 13px; color: var(--pd-ok); font-weight: 700; }
.pd .basis { font-size: 12px; color: var(--pd-muted); margin-top: 24px; max-width: 80ch; }

/* site.css の同名クラス（.steps・.svc）の影響を打ち消す */
.pd ol.steps { grid-template-columns: minmax(0, 1fr); }
.pd ol.steps li { border-top: 0; padding-top: 0; }
.pd .svc + .svc { padding-left: 12px; }
.pd .svcs { border-top: 0; }

.pd .svc { text-decoration: none; }

/* 新デザインの共通クラスとの干渉を打ち消す */
.pd .svc { padding: 12px; border: .75px solid var(--line); }
.pd .svc + .svc { border-left: .75px solid var(--line); border-top: .75px solid var(--line); }
.pd .svc h3, .pd .svc .n { font-family: var(--ff-body); font-size: 15px; }
.pd .svc .p { color: var(--accent); }
.pd ol.steps li::before { background: var(--ink); color: var(--paper); border-radius: 50%; }