/* ---------- status card: one centred white card ---------- */
.jdh-sy-center { min-height:56vh; display:flex; align-items:center; justify-content:center; padding:40px 16px 96px; }
.jdh-sy-card { width:100%; max-width:540px; background:#fff; border:1px solid var(--jd-line); border-radius:28px;
  padding:44px 40px 40px; text-align:center; box-shadow:0 34px 70px -46px rgba(24,27,41,.4);
  animation:jdh-sy-in .5s var(--jd-ease) both; }
@keyframes jdh-sy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.jdh-sy-ico { width:68px; height:68px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:22px; background:var(--jd-lav); color:var(--jd-teal-deep); }
.jdh-sy-ico[data-tone="ok"] { background:#DDF4EE; color:#0E7F64; }
.jdh-sy-ico[data-tone="warn"] { background:var(--jd-plag-bg); color:#B4600E; }
.jdh-sy-ico[data-tone="bad"] { background:var(--jd-ai-red-bg); color:var(--jd-ai-red); }
.jdh-sy-spin { animation:jdh-sy-spin 1s linear infinite; }
@keyframes jdh-sy-spin { to { transform:rotate(360deg); } }
.jdh-sy-code { font-family:var(--jd-serif); font-weight:300; font-size:104px; line-height:1; letter-spacing:-3px;
  color:var(--jd-teal-deep); margin-bottom:10px; }
.jdh-sy-title { font-family:var(--jd-serif); font-weight:400; font-size:36px; line-height:1.18; letter-spacing:-.6px;
  color:var(--jd-ink); text-wrap:balance; margin-bottom:12px; }
.jdh-sy-body { font-size:16px; line-height:26px; color:var(--jd-body); text-wrap:pretty; }
.jdh-sy-body + .jdh-sy-body { margin-top:10px; }
.jdh-sy-mail { display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:10px 16px; border-radius:12px;
  background:#F5F7FB; border:1px solid var(--jd-line); font-weight:500; color:var(--jd-ink); max-width:100%;
  overflow-wrap:anywhere; }
.jdh-sy-alert { margin-top:18px; padding:12px 16px; border-radius:14px; background:var(--jd-ai-red-bg);
  color:#9F1D22; font-size:15px; line-height:22px; font-weight:500; }
.jdh-sy-actions { display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-top:30px; }
.jdh-sy-actions .jdh-btn { height:50px; padding:10px 18px 10px 11px; }
.jdh-sy-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 22px;
  border-radius:100px; border:1px solid var(--jd-line); background:#fff; color:var(--jd-ink); font:500 15px/1 var(--jd-sans);
  cursor:pointer; white-space:nowrap; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.jdh-sy-outline:hover { border-color:#C9D0DC; color:var(--jd-teal-deep); }
.jdh-sy-outline:disabled { opacity:.55; cursor:not-allowed; }
.jdh-sy-danger { background:var(--jd-ai-red) !important; }
.jdh-sy-danger:hover { background:#C53A3F !important; box-shadow:none; }
.jdh-sy-btn-plain { gap:8px; padding:10px 22px; }
.jdh-sy-btn-plain[disabled] { opacity:.6; cursor:not-allowed; }
.jdh-sy-note { margin-top:18px; font-size:13.5px; line-height:20px; color:var(--jd-muted); }
.jdh-sy-note a { color:var(--jd-teal-deep); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.jdh-sy-actions :focus-visible, .jdh-sy-links a:focus-visible { outline:2px solid var(--jd-teal); outline-offset:3px; }

/* key/value rows (payment details) */
.jdh-sy-rows { margin-top:26px; text-align:left; border:1px solid var(--jd-line); border-radius:18px; overflow:hidden; }
.jdh-sy-rows-h { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#F5F7FB;
  border-bottom:1px solid var(--jd-line); font-size:14px; font-weight:600; color:var(--jd-ink-2); }
.jdh-sy-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; font-size:14.5px; }
.jdh-sy-row + .jdh-sy-row { border-top:1px solid var(--jd-line); }
.jdh-sy-row dt { color:var(--jd-muted); flex:none; }
.jdh-sy-row dd { margin:0; min-width:0; font-weight:600; color:var(--jd-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jdh-sy-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; font-weight:500 !important; }

/* 404 quick links */
.jdh-sy-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; padding-top:24px;
  border-top:1px solid var(--jd-line); }
.jdh-sy-links-h { width:100%; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--jd-muted); margin-bottom:4px; }
.jdh-sy-links a { display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border-radius:100px; background:#F2F5FD;
  font-size:14.5px; font-weight:500; color:var(--jd-ink-2); transition:background .2s ease, color .2s ease; }
.jdh-sy-links a:hover { background:var(--jd-lav); color:var(--jd-teal-deep); }
.jdh-sy-ref { margin-top:14px; font-size:12.5px; color:var(--jd-muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap:anywhere; }
@media (max-width:640px) {
  .jdh-sy-card { padding:32px 20px 28px; border-radius:22px; }
  .jdh-sy-code { font-size:80px; }
  .jdh-sy-title { font-size:28px; }
  .jdh-sy-actions { flex-direction:column; align-items:stretch; }
  .jdh-sy-actions > * { width:100%; justify-content:center; }
}

/* ---------- glossary + about bodies ---------- */
.jdh-sy-page { padding-bottom:96px; }
.jdh-sy-sheet { background:#fff; border:1px solid var(--jd-line); border-radius:28px; padding:40px 44px; }
.jdh-sy-narrow { max-width:860px; }
.jdh-sy-empty { text-align:center; padding:56px 24px; }
.jdh-sy-empty .jdh-sy-title { font-size:30px; }
.jdh-sy-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; font-size:15px; font-weight:500;
  color:var(--jd-teal-deep); }
.jdh-sy-back:hover { text-decoration:underline; text-underline-offset:3px; }
.jdh-sy-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:14px; font-size:14.5px; color:var(--jd-muted); }
.jdh-sy-meta span { display:inline-flex; align-items:center; gap:6px; }
.jdh-sy-chip { display:inline-flex; align-items:center; padding:4px 12px; border-radius:100px; background:var(--jd-lav);
  color:var(--jd-teal-deep); font-size:13px; font-weight:600; }
.jdh-sy-chip[data-tone="warn"] { background:var(--jd-plag-bg); color:#9A520C; }
.jdh-sy-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.jdh-sy-lede { font-size:18px; line-height:30px; color:var(--jd-ink-2); padding:18px 22px; border-radius:18px;
  background:#F5F7FB; margin-bottom:28px; }
.jdh-sy-figure { position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; margin-bottom:28px; }
.jdh-sy-art { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:40px; align-items:start; }
.jdh-sy-toc { position:sticky; top:120px; }
.jdh-sy-art .prose { color:var(--jd-ink-2); }
.jdh-sy-art .prose :is(h2,h3) { font-family:var(--jd-serif); font-weight:400; color:var(--jd-ink); }
.jdh-sy-art .prose a { color:var(--jd-teal-deep); }
.jdh-sy-foot { margin-top:40px; padding-top:24px; border-top:1px solid var(--jd-line); }
/* framework CMS list/cards inside a jd sheet: keep their layout, adopt the site palette */
.jdh-sy-cms { --primary:#2E7483; }
.jdh-sy-cms :is(h2,h3) { font-family:var(--jd-serif); font-weight:400; color:var(--jd-ink); }

@media (max-width:1279px) { .jdh-sy-art { grid-template-columns:minmax(0,1fr); } .jdh-sy-toc { display:none; } }
@media (max-width:640px) {
  .jdh-sy-sheet { padding:24px 18px; border-radius:22px; }
  .jdh-sy-lede { font-size:16px; line-height:26px; padding:14px 16px; }
}