/* ============================================================================
   Responsive
   --------------------------------------------------------------------------
   Every breakpoint in the application is in this file, and there are exactly
   three: 1024px (tablet), 768px (compact), 640px (phone). StyleContractTests
   fails the build if a fourth appears anywhere.
   ========================================================================== */

@media (max-width: 1024px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .master-detail { grid-template-columns: 1fr; }
    .master-panel { max-height: 300px; border-right: none; border-bottom: var(--border-width) solid var(--border); }
    .tile-host { grid-column: span 12; }
    .pr-chain-link { padding-left: var(--space-4); }
    .pr-verdicts { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .app-sidebar { width: var(--sidebar-width-collapsed); }
    .app-sidebar .sidebar-brand small,
    .app-sidebar .sidebar-nav a span,
    .app-sidebar .sidebar-footer a span { display: none; }
    .app-sidebar .sidebar-nav-group { display: none; }
    .app-main { margin-left: var(--sidebar-width-collapsed); padding: var(--space-10) var(--space-8) var(--statusbar-height); }
    .job-status-bar { left: var(--sidebar-width-collapsed); }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { flex-direction: column; }
    .dnd-grid { grid-template-columns: minmax(0, 1fr); }
    .dnd-zone { max-height: 220px; }
    .theme-switch { flex-direction: column; }
    .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 160px); }
    .chat-sidebar { display: none; }
    /* The fact list stacks: the value goes under its term rather than beside it,
       which is the whole reason it is a grid and not a table. */
    .data-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-1) 0; }
    .data-list dd { margin-bottom: var(--space-4); }
}
@media (max-width: 640px) {
    .grid-4 { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr; }
}