/* Styles for the shared adaptive diagnostic (js/diagnostic.js), loaded by the three audit
   pages after their own inline styles. Uses each page's existing colour variables, so the
   wizard keeps that page's look. Rules some pages already had are repeated here so every
   page renders every question type the same way. */

.q-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.q-fieldset, .sector-fieldset { border:0; margin:0 0 1.25rem; padding:0; min-width:0; }
.q-fieldset legend, .sector-fieldset legend { padding:0; }
.q-req { color:#b74545; }
.q-opt { font-size:0.78rem; color:var(--dim); font-weight:400; text-transform:none; letter-spacing:0; font-family:var(--sans); }
.q-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.q-row .form-group { margin-bottom:1.25rem; }
.q-lead { font-size:0.875rem; color:var(--muted); line-height:1.7; margin-bottom:1.25rem; }
.q-small { font-size:0.73rem; color:var(--dim); line-height:1.6; margin-bottom:1rem; }
.q-note { font-size:0.82rem; color:var(--muted); line-height:1.7; padding:0.75rem; background:var(--bg3); border-radius:2px; }
.q-details { margin-bottom:0.875rem; }
.q-details summary { font-size:0.8rem; color:var(--muted); cursor:pointer; user-select:none; }
.q-details-body { font-size:0.78rem; color:var(--muted); margin-top:0.5rem; line-height:1.9; padding:0.75rem; background:var(--bg3); border-radius:2px; }
.upload-list { display:grid; gap:0.875rem; }
.q-upload-errors { margin-top:0.75rem; font-size:0.78rem; color:#b74545; }
.q-url-error, .q-audit-error { display:none; font-size:0.82rem; color:#b74545; margin-top:0.5rem; line-height:1.6; }
.q-url-error.show, .q-audit-error.show { display:block; }
.q-submit-row { margin-top:1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.wizard-question:focus { outline:none; }
.dry-run-banner { font-size:0.78rem; color:#92400e; background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.4); border-radius:3px; padding:0.5rem 0.75rem; margin-bottom:1rem; }

/* Sector cards: question 1 */
.sector-cards { display:grid; grid-template-columns:1fr 1fr; gap:0.625rem; }
.sector-card { display:flex; flex-direction:column; gap:0.25rem; padding:1rem; min-height:44px; border:1.5px solid var(--border); border-radius:2px; background:var(--bg3); cursor:pointer; transition:border-color 0.15s, background 0.15s; }
.sector-card:hover:not(.selected) { border-color:var(--accent2-text, var(--accent)); }
.sector-card.selected, .sector-card:has(input:checked) { border-color:#22C55E; background:rgba(34,197,94,0.08); }
.sector-card:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.sector-card-title { font-size:0.95rem; font-weight:600; color:var(--text); }
.sector-card-desc { font-size:0.78rem; color:var(--muted); line-height:1.5; }

/* Choice lists and tiles built on real radios */
.tap-option, .tile { gap:0.5rem; }
.tap-option.selected, .tap-option:has(input:checked), .tile.selected, .tile:has(input:checked) { border-color:#22C55E; background:rgba(34,197,94,0.08); }
.tap-option:focus-within, .tile:focus-within, .check-item:focus-within { outline:2px solid var(--accent); outline-offset:2px; }

/* Checkbox lists (local page did not have these before) */
.check-group { display:flex; flex-direction:column; gap:0.375rem; margin-top:0.375rem; }
.check-item { display:flex; align-items:center; gap:0.625rem; cursor:pointer; font-size:0.875rem; color:var(--text); padding:0.5rem 0.75rem; border:1.5px solid var(--border); border-radius:2px; background:var(--bg3); transition:border-color 0.15s, background 0.15s; min-height:44px; user-select:none; }
.check-item input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:var(--accent); flex-shrink:0; }
.check-item.selected, .check-item:has(input:checked) { border-color:#22C55E; background:rgba(34,197,94,0.08); }

/* Method cards are buttons now, so reset button styling */
button.method-card { display:block; width:100%; text-align:left; font:inherit; color:inherit; }
button.method-card .method-tag, button.method-card .method-card-title, button.method-card .method-card-desc { display:block; }
button.method-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Search position inputs and incognito notes (B2B and life sciences pages did not have these) */
.pos-input-group { margin-top:0.5rem; padding:0.625rem 0.75rem; background:var(--bg2); border-radius:3px; border:1px solid var(--border); }
.pos-input-group input[type="text"], .pos-input-group input[type="number"] { width:100%; background:var(--bg3); border:1px solid var(--border); padding:0.375rem 0.625rem; color:var(--text); font-size:0.82rem; font-family:var(--sans); border-radius:2px; }
.pos-label { font-size:0.76rem; color:var(--muted); font-weight:500; margin-bottom:0.375rem; display:block; }
.pos-fields { display:flex; gap:0.75rem; flex-wrap:wrap; }
.pos-field { flex:1; min-width:90px; }
.pos-field-label { font-size:0.72rem; color:var(--dim); display:block; margin-bottom:0.2rem; }
.pos-hint { font-size:0.71rem; color:var(--dim); margin:0.375rem 0 0; line-height:1.55; }
.incognito-warn { background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.38); border-radius:3px; padding:0.5rem 0.75rem; margin-bottom:0.5rem; font-size:0.76rem; line-height:1.55; }
.incognito-warn summary { cursor:pointer; user-select:none; font-weight:500; list-style:none; color:#92400e; }
.incognito-warn summary::-webkit-details-marker { display:none; }
.incognito-warn p { margin:0.375rem 0 0; font-size:0.73rem; color:#92400e; line-height:1.55; }

/* Result card additions */
.score-note { font-size:0.75rem; color:var(--dim); line-height:1.6; margin:0.75rem 0 0; }
.result-section-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent-text, var(--accent)); margin:1.5rem 0 1rem; }
.result-section-label.muted { color:var(--muted); }
.quick-win { display:flex; gap:0.5rem; font-size:0.82rem; color:var(--muted); margin-bottom:0.5rem; }
.quick-win span { color:var(--accent-text, var(--accent)); flex-shrink:0; }

@media (max-width: 640px) {
  .sector-cards { grid-template-columns:1fr; }
  .q-row { grid-template-columns:1fr; gap:0; }
}

/* "Before you start" box above the diagnostic */
.diag-before { max-width:760px; margin:2rem auto 0; padding:1.5rem 1.75rem; background:var(--bg2); border:1px solid var(--border); border-radius:2px; }
.diag-before-title { font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--text); margin:0 0 1rem; }
.diag-before-list { margin:0; display:grid; gap:0.875rem; }
.diag-before-list dt { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-text, var(--accent)); margin-bottom:0.25rem; }
.diag-before-list dd { margin:0; font-size:0.875rem; color:var(--muted); line-height:1.7; }
.diag-before-list a { color:var(--accent-text, var(--accent)); }

/* End of the report: one next step */
.report-next { margin-top:2rem; padding:1.75rem; background:var(--bg3); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:2px; }
.report-next-title { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--text); margin:0 0 0.875rem; }
.report-next p { font-size:0.9rem; color:var(--muted); line-height:1.75; margin:0 0 0.75rem; }
.report-next-btn { display:inline-block; margin-top:0.5rem; background:var(--accent); color:#2b1f08; padding:0.875rem 1.75rem; border-radius:2px; font-size:0.95rem; font-weight:600; text-decoration:none; min-height:44px; }
.report-next-btn:hover { opacity:0.88; }
.report-next-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width: 640px) {
  .diag-before { margin:1.5rem 1.25rem 0; padding:1.25rem; }
  .report-next { padding:1.25rem; }
  .report-next-btn { display:block; text-align:center; }
}