/* Responsive layouts for standalone tools and assessment pages. */
@media (max-width: 900px) {
  body[data-mobile-page="features"] :is(.section, .grid > *, .step, .step > *, .v-item, .tier) { min-width: 0; overflow-wrap: anywhere; }
  body[data-mobile-page="features"] .section { padding: 20px; }
  body[data-mobile-page="features"] .secure-vines .rail { padding-left: 58px; }
  body[data-mobile-page="features"] .secure-vines .rail::before { left: 22px; }
  body[data-mobile-page="features"] .secure-vines .step .dot { left: 2px; }
  body[data-mobile-page="features"] .seo-how .step { grid-template-columns: minmax(0, 1fr); }
  body[data-mobile-page="assessment"] :is(main, .intro, .section, .advice, .metric-card, .q, .text) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  body[data-mobile-page="assessment"] :is(.intro, .section, .advice) { padding: 20px; }
  body[data-mobile-page="assessment"] :is(.questions, .score-grid, .advice .grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-mobile-page="assessment"] .q { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; padding: 18px; }
  body[data-mobile-page="assessment"] .q .switch { justify-self: start; }
  body[data-mobile-page="assessment"] :is(.pill, .btn-submit, .btn-reset) { min-width: 0; max-width: 100%; width: 100%; height: auto; min-height: 60px; padding: 16px 20px; line-height: 1.4; white-space: normal; }
  body[data-mobile-page="assessment"] :is(.metric-card canvas, .metric-card svg) { max-width: 100%; height: auto; }
  body[data-mobile-page="assessment"] :is(.title, .toolbar, .bar-label) { min-width: 0; flex-wrap: wrap; }
  body[data-mobile-page="assessment"] :is(.verdict, .tag, .chip) { max-width: 100%; overflow-wrap: anywhere; }

  body[data-mobile-page="features"] .compare-table table { display: block; width: 100%; border: 0; }
  body[data-mobile-page="features"] .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-mobile-page="features"] .compare-table tbody { display: block; }
  body[data-mobile-page="features"] .compare-table tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--gb-surface-2, #504945); }
  body[data-mobile-page="features"] .compare-table td { display: block; width: 100%; min-width: 0; padding: 8px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  body[data-mobile-page="features"] .compare-table td:first-child { font-weight: 800; font-size: 22px; }
  body[data-mobile-page="features"] .compare-table td:nth-child(2)::before { content: 'Vulnerability Vines AI'; display: block; margin-bottom: 8px; color: var(--gb-aqua, #8ec07c); font-weight: 800; }
  body[data-mobile-page="features"] .compare-table td:nth-child(3)::before { content: 'Typical commercial scanner'; display: block; margin-bottom: 8px; color: var(--gb-orange, #fe8019); font-weight: 800; }

  body[data-mobile-page="jenkins"] :is(.section, main) { min-width: 0; }
  body[data-mobile-page="jenkins"] :is(p, li, code, th, td) { overflow-wrap: anywhere; }
  body[data-mobile-page="jenkins"] table { width: 100%; table-layout: fixed; }
  body[data-mobile-page="jenkins"] :is(th, td) { min-width: 0; padding: 10px 6px; white-space: normal; }
  body[data-mobile-page="map"] .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-mobile-page="map"] .stat { min-width: 0; flex-wrap: wrap; }
  body[data-mobile-page="map"] .stat .label { min-width: 0; }
  body[data-mobile-page="map"] .hud { max-height: 45dvh; overflow: auto; }
  body[data-mobile-page="map"] .insights { max-height: 40dvh; overflow: auto; }
  html:has(body[data-mobile-page="radar"]), html:has(body[data-mobile-page="tiger"]) { overflow: hidden; }
  body[data-mobile-page="radar"] { flex-direction: column; gap: 16px; transition: background .3s ease; }
  body[data-mobile-page="tiger"] { overflow-x: hidden; }
  body[data-mobile-page="colors"] > svg { display: block; max-width: 100%; height: auto; }
  body[data-mobile-page="date"] { box-sizing: border-box; margin: 0; padding: 16px; }
  body[data-mobile-page="date"] * { box-sizing: border-box; }
  body[data-mobile-page="date"] #date_picker { width: 100%; max-width: 540px; }
  body[data-mobile-page="date"] #date { box-sizing: border-box; padding: 16px; }
  body[data-mobile-page="date"] #date_picker_calendar { max-width: 100%; padding: 12px; }
  body[data-mobile-page="date"] :is(#cal_days, #calendar_main) { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  body[data-mobile-page="date"] #cal_days { font-size: 12px; }
  body[data-mobile-page="date"] #calendar_header { gap: 8px; font-size: 18px; }
  body[data-mobile-page="date"] .cal-btn { flex: 0 0 44px; }

  body[data-mobile-page="admin"] main > .flex { flex-direction: column; }
  body[data-mobile-page="admin"] :is(section, .gb-card, .flex-1, input, select) { min-width: 0; max-width: 100%; }
  body[data-mobile-page="admin"] .sidebar { width: 100%; }
  body[data-mobile-page="admin"] .sidebar > .gb-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-mobile-page="admin"] .gb-header > div { flex-wrap: wrap; gap: 12px; }
  body[data-mobile-page="admin"] #admin-user { overflow-wrap: anywhere; }
  body[data-mobile-page="admin"] #view-users > .gb-card > .flex { flex-wrap: wrap; }
  body[data-mobile-page="admin"] #view-users > .gb-card > .flex > .flex-1 { flex-basis: 100%; }
  body[data-mobile-page="admin"] .gb-btn { min-height: 44px; white-space: normal; }
  body[data-mobile-page="admin"] .admin-table { display: block; }
  body[data-mobile-page="admin"] .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-mobile-page="admin"] .admin-table tbody { display: grid; gap: 16px; }
  body[data-mobile-page="admin"] .admin-table tr { display: block; border: 1px solid var(--gb-surface-2); border-radius: 10px; padding: 12px; }
  body[data-mobile-page="admin"] .admin-table td { display: block; padding: 8px 0; overflow-wrap: anywhere; }
  body[data-mobile-page="admin"] .admin-table td[data-label]::before { content: attr(data-label); display: block; color: var(--gb-aqua); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  body[data-mobile-page="admin"] .admin-table td.flex { display: flex; flex-wrap: wrap; }
  body[data-mobile-page="admin"] .admin-table td.flex::before { flex-basis: 100%; }
  body[data-mobile-page="admin"] .modal-mask { padding: 12px; overflow: auto; }
  body[data-mobile-page="admin"] .modal-card { max-height: calc(100dvh - 24px); overflow: auto; min-width: 0; }
  body[data-mobile-page="admin"] pre.json { max-width: 100%; max-height: 60dvh; font-size: 16px; }
}