/* This stylesheet is loaded only by /diagnosis/. */
.diagnosis-ui { padding: 12px 0 24px; }
.diagnosis-ui [hidden] { display: none !important; }
.diagnosis-ui .diagnosis-title { margin-bottom: 12px; }
.diagnosis-ui .diagnosis-title h1 { display: block; font-size: clamp(1.5rem, 3vw, 2rem); margin: 12px 0 8px; line-height: 1.35; }
.diagnosis-ui .diagnosis-title > p { margin: 6px 0; font-size: .9rem; line-height: 1.6; }
.diagnosis-ui .diagnosis-title .diagnosis-policy, .diagnosis-ui .diagnosis-title .diagnosis-save-note { font-size: .75rem; color: var(--muted); }
.diagnosis-ui .diagnosis-policy b, .diagnosis-ui a { color: var(--cyan); }
.diagnosis-ui .diagnosis-controls { display: none; }
.diagnosis-ui.diagnosis-ready .diagnosis-controls { display: block; }
.diagnosis-ui .diagnosis-main { padding: 12px; }
.diagnosis-ui .diagnosis-progress-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.diagnosis-ui h2 { font-size: 1.2rem; margin: 0 0 8px; }
.diagnosis-ui .diagnosis-progress-head p { color: var(--cyan); font-size: .8rem; margin: 0; }
.diagnosis-ui progress { width: 100%; height: 6px; accent-color: var(--cyan); margin: 4px 0 8px; }
.diagnosis-ui button, .diagnosis-ui .diagnosis-result-actions a, .diagnosis-ui .diagnosis-card-actions a, .diagnosis-ui [data-diagnosis-compare-link], .diagnosis-ui .diagnosis-fallback a { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; background: #081320; color: var(--cyan); font: inherit; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.diagnosis-ui button:focus-visible, .diagnosis-ui a:focus-visible, .diagnosis-ui summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.diagnosis-ui button:disabled { opacity: .5; cursor: default; }
.diagnosis-ui .primary { border-color: var(--cyan); background: var(--cyan); color: #06131d; font-weight: 800; }
.diagnosis-ui .diagnosis-notice { color: var(--muted); font-size: .8rem; padding: 8px 10px; border-left: 2px solid var(--cyan); }
.diagnosis-ui .diagnosis-resume { margin-bottom: 12px; }
.diagnosis-ui .diagnosis-question { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
.diagnosis-ui .diagnosis-question legend { font-size: .95rem; font-weight: 800; padding: 0 4px; overflow-wrap: anywhere; }
.diagnosis-ui .diagnosis-question legend > span { color: var(--cyan); font-size: .75rem; }
.diagnosis-ui .question-context { font-size: .75rem; color: var(--muted); margin: 0 0 8px; }
.diagnosis-ui .diagnosis-options-list { display: grid; gap: 8px; }
.diagnosis-ui .diagnosis-options-list button { width: 100%; justify-content: flex-start; text-align: left; gap: 10px; }
.diagnosis-ui .diagnosis-options-list button[aria-pressed=true] { border-color: var(--cyan); background: rgba(35,227,223,.1); }
.diagnosis-ui .choice-mark { width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--line); border-radius: 50%; }
.diagnosis-ui [aria-pressed=true] .choice-mark::after { content: "✓"; display: block; color: var(--cyan); font-size: 12px; text-align: center; line-height: 14px; }
.diagnosis-ui summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--cyan); font-size: .85rem; }
.diagnosis-ui details p { font-size: .8rem; line-height: 1.7; margin: 4px 0 10px; }
.diagnosis-ui .question-help summary { font-size: .75rem; color: var(--muted); padding-bottom: 0; }
.diagnosis-ui .diagnosis-actions { display: grid; gap: 8px; margin-top: 16px; }
.diagnosis-ui .diagnosis-actions > p { font-size: .75rem; color: var(--muted); margin: 0; }
.diagnosis-ui .diagnosis-reset-actions, .diagnosis-ui .diagnosis-card-actions, .diagnosis-ui .diagnosis-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.diagnosis-ui .diagnosis-reset-actions { margin-top: 8px; }
.diagnosis-ui .diagnosis-reset-actions button { font-size: .75rem; color: var(--muted); }
.diagnosis-ui .diagnosis-results-panel { padding: 12px; margin: 16px 0; border: 1px solid var(--cyan); border-radius: 7px; }
.diagnosis-ui #diagnosis-result-title { scroll-margin-top: 100px; }
.diagnosis-ui [data-diagnosis-result], .diagnosis-ui .diagnosis-result-scope { font-size: .8rem; }
.diagnosis-ui .diagnosis-result-scope { color: var(--muted); }
.diagnosis-ui .diagnosis-result-condition { font-size: .8rem; border-left: 2px solid var(--cyan); padding-left: 10px; }
.diagnosis-ui .diagnosis-result-condition button { padding: 6px 10px; font-size: .75rem; }
.diagnosis-ui .diagnosis-result-list { display: grid; gap: 12px; margin-top: 12px; }
.diagnosis-ui .diagnosis-service-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(8,19,32,.9); }
.diagnosis-ui .diagnosis-service-card.is-selected { border-color: var(--cyan); }
.diagnosis-ui .diagnosis-service-card h3 { font-size: 1.1rem; margin: 0 0 6px; }
.diagnosis-ui .diagnosis-service-card h3 span { color: var(--magenta); font-size: .8rem; margin-right: 6px; }
.diagnosis-ui .diagnosis-match-score { color: var(--muted); font-size: .75rem; margin: 0 0 8px; }
.diagnosis-ui .diagnosis-service-card dl { font-size: .82rem; margin: 0; }
.diagnosis-ui .diagnosis-service-card dl > div { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 8px; margin: 4px 0; }
.diagnosis-ui .diagnosis-service-card dt { color: var(--muted); }
.diagnosis-ui .diagnosis-service-card dd { margin: 0; overflow-wrap: anywhere; }
.diagnosis-ui .diagnosis-service-card .match-reason { font-size: .8rem; color: var(--cyan); line-height: 1.7; margin: 8px 0; }
.diagnosis-ui .diagnosis-service-card .service-summary { font-size: .8rem; color: var(--muted); margin: 8px 0; }
.diagnosis-ui .diagnosis-card-actions { margin-top: 10px; }
.diagnosis-ui .diagnosis-compare-limit { padding: 8px; border: 1px solid var(--cyan); border-radius: 5px; color: var(--cyan); font-size: .8rem; }
.diagnosis-ui .diagnosis-compare-selection { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
.diagnosis-ui .diagnosis-compare-selection p { font-size: .8rem; margin: 0 0 8px; }
.diagnosis-ui [data-compare-chips] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.diagnosis-ui .diagnosis-result-actions { margin-top: 12px; }
.diagnosis-ui .diagnosis-extras { margin: 16px 0; }
.diagnosis-ui .diagnosis-extras > details, .diagnosis-ui .diagnosis-data-policy { border-top: 1px solid var(--line); padding: 4px 0; }
.diagnosis-ui [data-current-summary] p { font-size: .8rem; }
.diagnosis-ui [data-current-summary] b { display: block; color: var(--cyan); }
.diagnosis-ui [data-trend-values] { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; }
.diagnosis-ui .trend-panel .radar-chart { max-width: 260px; }
.diagnosis-ui .diagnosis-fallback { padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
@media(min-width:721px) {
  .diagnosis-ui .diagnosis-main, .diagnosis-ui .diagnosis-results-panel { max-width: 920px; }
  .diagnosis-ui .diagnosis-options-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .diagnosis-ui .diagnosis-result-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:720px) {
  .diagnosis-ui #diagnosis-result-title { scroll-margin-top: 82px; }
}
@media(prefers-reduced-motion:reduce) { .diagnosis-ui { scroll-behavior: auto; } }