/* Shared J5 page themes; the saved selection is presentation-only. */
body.j5-theme-shell {
    --text: #e8eff0;
    --muted: #afbec5;
    --accent: #78dcd5;
    --accent-soft: #203c42;
    --panel: #1b272e;
    --inset: #131e25;
    --edge: #384c56;
    --pink: #d2a6c3;
    --radius: 18px;
    --field-radius: 10px;
    --heading: Arial, sans-serif;
    --hero: linear-gradient(130deg, #223b40, #192731 70%);
    color-scheme: dark;
    background-color: #131c23;
    background-image: radial-gradient(ellipse at 15% 0%, #24404780, transparent 60%),
        repeating-linear-gradient(110deg, transparent 0 3px, #ffffff02 3px 4px);
    color: var(--text);
    font-family: Arial, sans-serif;
    line-height: 1.55;
    min-height: 100vh;
    padding-top: 4px;
}
html[data-j5-theme="arcade"] body.j5-theme-shell {
    --text: #f1edff;
    --muted: #c0b8d7;
    --accent: #79f5ef;
    --accent-soft: #223949;
    --panel: #1b1830;
    --inset: #110f22;
    --edge: #504568;
    --pink: #ff9add;
    --radius: 6px;
    --field-radius: 10px;
    --heading: 'Courier New', monospace;
    --hero: linear-gradient(125deg, #262046, #161c31 65%, #282041);
    background-color: #100e1d;
    background-image: radial-gradient(ellipse at 90% 5%, #bc36bf26, transparent 48%),
        linear-gradient(#8e6ce00c 1px, transparent 1px),
        linear-gradient(90deg, #8e6ce00c 1px, transparent 1px);
    background-size: auto, 36px 36px, 36px 36px;
}
html[data-j5-theme="hybrid"] body.j5-theme-shell {
    --text: #f1ece1;
    --muted: #c0bdb1;
    --accent: #82ded6;
    --accent-soft: #253d3c;
    --panel: #292c2b;
    --inset: #1c2222;
    --edge: #466962;
    --pink: #eab786;
    --radius: 12px;
    --field-radius: 10px;
    --hero: linear-gradient(125deg, #39372e, #233331 65%, #29302e);
    background-color: #1c2221;
    background-image: radial-gradient(ellipse at 5% 0%, #b8844330, transparent 52%),
        repeating-linear-gradient(0deg, transparent 0 3px, #d6cab905 3px 4px);
}
body.j5-theme-shell .container {
    max-width: 720px;
    padding: 26px 24px 54px;
}
.j5-theme-shell .j5-theme-preview {
    max-width: 672px;
    margin: 24px auto 0;
    padding: 12px 16px;
    border: 1px solid var(--edge);
    border-radius: 10px;
    background: var(--inset);
}
.j5-theme-preview label {
    display: block;
    color: var(--accent);
    font: 700 11px/1.6 Arial, sans-serif;
    letter-spacing: .12em;
}
.j5-theme-preview label span {
    display: block;
    color: var(--muted);
    font: 12px/1.6 Arial, sans-serif;
    letter-spacing: 0;
}
.j5-theme-preview select {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--edge);
    border-radius: 6px;
    font: 14px/1.4 Arial, sans-serif;
}
.j5-theme-shell .header {
    grid-template-columns: minmax(0, 1fr) clamp(110px, 26vw, 172px);
    gap: 10px 18px;
    padding: 28px;
    background: var(--hero);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 #ffffff0c, 0 16px 40px #00000024;
}
.j5-theme-shell .header h1 {
    font-family: var(--heading);
    font-size: clamp(26px, 4.5vw, 38px);
    line-height: 1.12;
    letter-spacing: .015em;
    color: var(--text);
    text-shadow: 0 0 22px #63dfd52b;
}
.j5-theme-shell .j5-hero-side {
    aspect-ratio: auto;
    overflow: visible;
    transform: none;
    background: radial-gradient(ellipse, #60d9cf1c, transparent 70%);
}
.j5-theme-shell .j5-hero-side img { filter: drop-shadow(0 8px 10px #0005); }
.j5-theme-shell .header .j5-hero-subtitle {
    border-color: var(--edge);
    color: var(--muted);
    font-size: 17px;
    padding-top: 16px;
}
.j5-theme-shell :is(.vehicle, .card, .description-box) {
    background: var(--panel);
    color: var(--text);
    padding: 24px;
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    box-shadow: 0 6px 22px #00000018;
}
.j5-theme-shell .vehicle {
    border-left: 3px solid var(--accent);
    font-size: 15px;
}
.j5-theme-shell :is(.description-help, .help, .note, .report-meta, .diy-link-card p) { color: var(--muted); }
.j5-theme-shell :is(h1, h2, .report-vehicle, .top) { font-family: var(--heading); }
.j5-theme-shell h2 { font-size: 22px; line-height: 1.35; margin: 0 0 12px; }
.j5-theme-shell .description-box label { margin: 0; }
.j5-theme-shell :is(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select
):not(#j5-theme-choice) {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--edge);
    border-radius: var(--field-radius);
    background: var(--inset);
    color: var(--text);
    font: inherit;
    line-height: 1.5;
}
.j5-theme-shell textarea:not(#j5-theme-choice) {
    min-height: 110px;
    resize: vertical;
}
.j5-theme-shell .description-box textarea:not(#j5-theme-choice) {
    min-height: 132px;
    padding: 16px;
    margin: 8px 0;
}
.j5-theme-shell :is(input, textarea)::placeholder {
    color: var(--muted);
    opacity: 1;
}
.j5-theme-shell select option {
    background: var(--panel);
    color: var(--text);
}
.j5-theme-shell label:has(input:is([type="radio"], [type="checkbox"])) {
    box-sizing: border-box;
    min-height: 48px;
    padding: 14px 16px;
    border: 1px solid var(--edge);
    border-radius: var(--field-radius);
    background: var(--inset);
    color: var(--text);
}
.j5-theme-shell label:has(input:is([type="radio"], [type="checkbox"]):checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.j5-theme-shell label:has(input:is([type="radio"], [type="checkbox"]):hover) {
    border-color: var(--accent);
}
.j5-theme-shell fieldset.card {
    min-width: 0;
}
.j5-theme-shell :is(
    input:not([type="hidden"]),
    textarea,
    select,
    button,
    a.button
):focus-visible,
.j5-theme-shell label:has(input:is([type="radio"], [type="checkbox"]):focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}
.j5-theme-shell :is(
    input:not([type="hidden"]),
    textarea,
    select
):not(#j5-theme-choice):focus-visible {
    border-color: var(--accent);
}
.j5-theme-shell :is(.button, .diy-link-button) {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.45;
    min-height: 48px;
    padding: 16px 20px;
}
.j5-theme-shell .description-box .button {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
    font-weight: 700;
    text-align: center;
    margin: 10px 0 20px;
}
.j5-theme-shell .j5-start-badge {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-right: 8px;
}
.j5-theme-shell :is(.button, .diy-link-button):hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.j5-theme-shell :is(a, button, textarea, select):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}
.j5-theme-shell .vehicle a { text-decoration: underline; text-underline-offset: 4px; }
.j5-theme-shell .j5-report-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    background: var(--hero);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    color: var(--accent);
    font: 800 22px/1.2 var(--heading);
    letter-spacing: .04em;
}
.j5-report-brand img { object-fit: contain; flex-shrink: 0; }
.j5-theme-shell .container > h1 { text-align: left; font-size: 30px; margin: 0 0 24px; }
.j5-theme-shell .diagnostic-summary-card { border-top: 3px solid var(--accent); background: var(--hero); }
.j5-theme-shell .complete-label { color: var(--accent); }
.j5-theme-shell .report-meta { border-color: var(--edge); }
.j5-theme-shell .report-result-label { color: var(--muted); }
.j5-theme-shell .report-result { color: var(--text); font-size: 26px; }
.j5-theme-shell .j5-mascot--medium {
    max-width: 150px;
    padding: 12px;
    margin: 18px auto;
    background: radial-gradient(ellipse, #72d8cc1c, transparent 72%);
}
.j5-theme-shell .j5-reported-context { background: var(--inset) !important; }
.j5-theme-shell .diy-link-wrap { max-width: none; padding: 0; }
.j5-theme-shell .diy-link-card { background: var(--inset); border-left-color: var(--accent); }
.j5-theme-shell .inspection-result { background: var(--inset); border-left-color: var(--accent); }
.j5-theme-shell :is(.result-candidate-component, .question-block, .overview, details) {
    background: var(--inset);
    color: var(--text);
    border-color: var(--edge);
}
.j5-theme-shell :is(.result-candidate-component, .question-block) { border-left-color: var(--accent); }
.j5-theme-shell :is(.component-explainer summary, details summary, .section-label, .question-label) {
    color: var(--text);
}
.j5-theme-shell :is(.component-explainer p, .caption, .look, .secondary, .copy-status, .evidence-only-observation) {
    color: var(--muted);
}
.j5-theme-shell :is(.step-nav a, .exit-link, .result-utilities a, .result-utilities button) {
    color: var(--text);
    border-color: var(--edge);
}
.j5-theme-shell .result-candidate-component { border-left: 4px solid var(--accent); }
.j5-theme-shell .result-cluster-reasoning { background: var(--inset); }
.j5-theme-shell .highlight-inspection-point {
    color: #17212b;
    background: #f1f3f6;
    border-left-color: #2f3e4f;
}
.j5-theme-shell .highlight-inspection-point :is(.inspection-label, .reason, .note, .caption, p, strong) { color: #17212b; }
.j5-theme-shell :is(.inspection-attention, .urgent) {
    background: #352b22;
    border-left: 4px solid #f0b16c;
    color: #ffe3bd;
}
html[data-j5-theme="arcade"] .j5-theme-shell :is(.header, .j5-report-brand) {
    border-color: #bc71c3;
    box-shadow: -3px 0 0 #78e9eb, 3px 0 0 #d879c7, 0 0 30px #8c43b921;
}
html[data-j5-theme="arcade"] .j5-theme-shell .header h1 {
    color: #c9ffff;
    text-shadow: 2px 2px 0 #752c79, 0 0 18px #66efe84a;
}
html[data-j5-theme="arcade"] .j5-theme-shell .complete-label { color: var(--pink); }
html[data-j5-theme="arcade"] .j5-theme-shell .description-box { border-top: 2px solid var(--pink); }
html[data-j5-theme="hybrid"] .j5-theme-shell :is(.header, .j5-report-brand) {
    border-top: 3px solid #78bdb5;
    background-image: radial-gradient(circle at 10px 10px, #aeaaa0 0 2px, transparent 3px), var(--hero);
    box-shadow: inset 0 1px 0 #82ded626, 0 0 18px #78dcd50a, 0 10px 30px #0003;
}
html[data-j5-theme="hybrid"] .j5-theme-shell .header h1 { color: #f4e6ce; }
html[data-j5-theme="hybrid"] .j5-theme-shell .report-result-label { color: #eab786; }
html[data-j5-theme="hybrid"] .j5-theme-shell .description-box { border-top: 2px solid #6ca9a3; }
/* Quiet teal edge highlights; retain the warm charcoal panel surfaces. */
html[data-j5-theme="hybrid"] .j5-theme-shell :is(.vehicle, .card, .description-box) {
    box-shadow: inset 0 1px 0 #82ded61a, 0 0 14px #78dcd506, 0 6px 22px #00000018;
}
@media (min-width: 650px) {
    .j5-theme-preview { display: flex; align-items: center; gap: 20px; }
    .j5-theme-preview[hidden] { display: none; }
    .j5-theme-preview label { flex: 1; }
    .j5-theme-preview select { flex: 1.2; width: auto; margin: 0; }
}
@media (max-width: 600px) {
    .j5-theme-shell .j5-theme-preview { margin: 16px 16px 0; }
    body.j5-theme-shell .container { padding: 20px 16px 40px; }
    .j5-theme-shell .header { padding: 22px 18px; gap: 12px; }
    .j5-theme-shell :is(.vehicle, .card, .description-box) { padding: 20px; }
    .j5-theme-shell .j5-report-brand { font-size: 19px; padding: 16px; }
}
@media print {
    .j5-theme-preview { display: none !important; }
    body.j5-theme-shell { background: white; color: black; --text: #111; --muted: #333; --panel: #fff; --inset: #fff; --hero: none; --edge: #aaa; --accent: #24545a; }
    .j5-theme-shell :is(.card, .j5-report-brand) { box-shadow: none; }
}