/* /demo responsive layer (ARDYN-WEB-EXPERIENCE-002 §11 "responsive reflow").
   The approved D1 screens are frozen desktop compositions; this layer only
   reflows them below the reference widths. Desktop at 1672x941 is untouched. */
@media (max-width: 1500px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .lower-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .overview-grid > *, .lower-grid > * { min-width: 0; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .app > .rail { display: none; }
  .main-col, .content { min-width: 0; max-width: 100vw; }
  .content { padding-left: 14px !important; padding-right: 14px !important; }
  .topbar { flex-wrap: wrap; gap: 8px; height: auto !important; padding: 10px 14px !important; }
  .topbar .search, .topbar .account, .topbar .spacer, .topbar .acct-tag { display: none !important; }
  .topbar .ws-select { max-width: 60vw; }
  .header-tabs, .header-filters { flex-wrap: wrap; max-width: 100%; }
  .header-filters input, .header-filters select, .filter-input, .filter-select { max-width: 100%; min-width: 0; }
  .overview-grid, .lower-grid, .screen-grid, .capabilities-layout, .activity-layout,
  .receipts-layout, .verify-result, .verify-content { grid-template-columns: minmax(0, 1fr) !important; }
  [class*="-row"] { min-width: 0; }
  .capability-row, .activity-row, .ledger-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
  .result-ring, .result-ring svg { max-width: 100%; height: auto; }
  .panel, .panel-head, .verdict, .check-rows { min-width: 0; max-width: 100%; }
  table { display: block; overflow-x: auto; max-width: 100%; }
  .page-footer { flex-wrap: wrap; }
  .demo-banner { position: static; }
}
.demo-rail-link { display: none; }
@media (max-width: 900px) {
  .demo-rail-link { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; font: 500 12.5px/1.4 Inter, system-ui, sans-serif; border-bottom: 1px solid #23474f; }
  .demo-rail-link a { color: #8ff0f7; text-decoration: none; }
  .demo-rail-link a[aria-current="page"] { text-decoration: underline; }
}