.diagnostics { margin: 0 auto; padding: 1.1rem var(--pad) 3rem; }
.screen > .diagnostics { max-width: 1120px; }
.diagnostics *, .diagnostics *::before, .diagnostics *::after { box-sizing: border-box; }
.diag-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 1.2rem; }
.diag-eyebrow { display: block; color: #a6bde0; font-size: .64rem; font-weight: 700; letter-spacing: .13em; margin-bottom: .6rem; }
.diag-heading h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -.04em; margin: 0 0 .5rem; }
.diag-heading p, .diag-tesla-summary p { margin: 0; color: var(--dim); font-size: .83rem; line-height: 1.7; max-width: 40rem; }
.diag-version { color: var(--dim); font-size: .71rem; white-space: nowrap; padding-top: .3rem; }
.diag-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.diagnostics .btn { min-height: 52px; border-radius: 12px; padding: 12px 20px; font-size: .8rem; }
.diagnostics button:focus-visible, .diag-report:focus-visible { outline: 2px solid #b3c9ed; outline-offset: 4px; }
.diagnostics button:disabled { opacity: .45; cursor: default; }
.diag-share-note, .diag-help { color: var(--dim); font-size: .69rem; line-height: 1.7; margin: .75rem 0; }
.diag-copy-status { color: #a8d9c2; font-size: .74rem; min-height: 1.3em; margin: .45rem 0 1.2rem; }
.diag-tesla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.8rem; padding: 1.4rem; border: 1px solid #ffffff26; border-radius: 20px; background: #ffffff03; margin-bottom: 1rem; }
.diag-tesla h2 { margin: 0 0 .65rem; font-size: 1.32rem; font-weight: 600; letter-spacing: -.025em; }
.diag-tesla .diag-eyebrow { color: #bbb; }
.diag-retry { margin-top: 1.2rem; }
.diag-retry small { display: block; color: var(--dim); font-size: .65rem; line-height: 1.6; margin-top: .65rem; }
.diag-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 1.2rem; }
.diag-metrics > div { padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid #ffffff12; background: #ffffff04; }
.diag-metrics span { display: block; color: var(--dim); font-size: .69rem; margin-bottom: .55rem; }
.diag-metrics strong { font-size: 1.15rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.diag-section { border: 1px solid #ffffff16; border-radius: 16px; margin-bottom: 12px; overflow: hidden; background: #ffffff02; }
.diag-section h2 { margin: 0; }
.diag-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 19px 22px; color: var(--fg); text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-size: .91rem; font-weight: 600; }
.diag-toggle:hover { background: #ffffff04; }
.diag-toggle small { display: block; margin-top: 5px; color: var(--dim); font-size: .68rem; font-weight: 400; line-height: 1.5; }
.diag-toggle svg { width: 24px; height: 24px; flex: none; transition: transform 250ms cubic-bezier(.22,1,.36,1); }
.diag-section[data-open=true] .diag-toggle svg { transform: scaleY(-1); }
/* Same intrinsic-height expansion as Settings and the stream cards. */
.diag-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms cubic-bezier(.22,1,.36,1); }
.diag-section[data-open=true] .diag-fold { grid-template-rows: 1fr; }
.diag-fold-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s 250ms; }
.diag-section[data-open=true] .diag-fold-inner { visibility: visible; transition-delay: 0s; }
.diag-section-content { padding: 0 22px 20px; }
.diag-facts { margin: 0; font-size: .73rem; }
.diag-facts > div { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(0, 1.5fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid #ffffff0c; align-items: start; }
.diag-facts > div:last-child { border-bottom: 0; }
.diag-facts dt { color: var(--dim); font-weight: 400; line-height: 1.6; }
.diag-facts dd { margin: 0; color: #e3e7ec; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; font-variant-numeric: tabular-nums; }
.diag-tesla .diag-facts > div { grid-template-columns: minmax(0, 1fr) auto; }
.diag-events { padding: 0; margin: 0; list-style: none; max-height: 24rem; overflow: auto; }
.diag-events li { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid #ffffff0c; font-size: .71rem; line-height: 1.6; }
.diag-events time { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }
.diag-events strong { display: block; font-weight: 550; }
.diag-events span { display: block; color: var(--dim); overflow-wrap: anywhere; }
.diag-report { display: block; width: 100%; min-height: 22rem; resize: vertical; border: 1px solid #ffffff20; border-radius: 10px; background: #0008; color: #d9e4f5; padding: 16px; font: 12px/1.7 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.diagnostics .shimdemo { gap: 1rem; margin: .5rem 0 0; }
.diagnostics .shimdemo .sd-still { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.diagnostics .shimdemo .shimcell { width: 13rem; max-width: 100%; }
.diagnostics .shimdemo .sd-bar { max-width: 100%; }
.diag-section[data-open=false] .shimdemo *, .diag-section[data-open=false] .shimdemo *::before, .diag-section[data-open=false] .shimdemo *::after { animation-play-state: paused !important; }
@media (max-width: 700px) {
  .diag-heading { display: block; }
  .diag-version { display: block; margin-top: .8rem; }
  .diag-tesla { grid-template-columns: 1fr; gap: .8rem; padding: 1rem; }
  .diag-metrics { gap: 7px; }
  .diag-metrics > div { padding: .8rem .65rem; }
  .diag-metrics strong { font-size: .95rem; }
  .diag-toggle { padding: 17px 16px; }
  .diag-section-content { padding: 0 16px 16px; }
  .diag-facts > div { grid-template-columns: 1fr; gap: 3px; }
  .diag-events li { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .diag-fold, .diag-fold-inner, .diag-toggle svg { transition: none; }
}