ui-polish 6/6: responsive consolidation

- .g-3 grids step 3 -> 2 columns at 1200px and 2 -> 1 at 900px; they
  used to jump straight to one column, wasting the whole 900-1200 band
  (Managers cards, Help topics, JobBoard destinations).
- The four scattered trailing @media 640px fragments (Dashboard v2
  grid, candidate page, hiring forms) merged into ONE labeled block at
  the end of the file, positioned after every base rule; the paired
  400px override moves with it so small-phone rules still win. The
  core shell 640 block stays put so the landscape-phone height rules
  keep their existing precedence.
- Every breakpoint labeled; responsive section header updated.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/styles/styles.css

@@ -1295,9 +1295,11 @@ canvas { width: 100%; max-width: 100%; display: block; }
 
 /* ============================================================
    RESPONSIVE
-   ≥1600 ultrawide · 1200 laptop · 980 tablet-landscape
-   900 tablet-portrait (sidebar goes off-canvas) · 640 phone
-   400 small phone · plus a landscape-phone height rule
+   1200 laptop · 980 tablet-landscape · 900 tablet-portrait (sidebar
+   goes off-canvas) · 640 phone · 400 small phone · plus a
+   landscape-phone height rule. Late bolt-on sections (Dashboard v2,
+   hiring forms) keep their 1400/1200/860 steps next to their base
+   rules and share ONE consolidated 640/400 block at the end of file.
    ============================================================ */
 
 /* Cap the measure on every desktop, not only ultrawide — between 900 and
@@ -1305,12 +1307,15 @@ canvas { width: 100%; max-width: 100%; display: block; }
    agrees with .cand-page's own 1440px cap. */
 .content > .page { max-width: 1440px; margin-inline: auto; }
 
+/* ≤1200 — laptop. .g-3 steps 3→2 here and 2→1 at 900; it used to jump
+   straight to one column, wasting the whole 900–1200 band. */
 @media (max-width: 1200px) {
   .g-kpi { grid-template-columns: repeat(2, 1fr); }
-  .g-3 { grid-template-columns: 1fr; }
+  .g-3 { grid-template-columns: repeat(2, 1fr); }
   .g-2-1, .g-1-2, .g-2 { grid-template-columns: 1fr; }
   .filter-panel { grid-template-columns: repeat(3, 1fr); }
 }
+/* ≤980 — tablet landscape */
 @media (max-width: 980px) {
   .split { grid-template-columns: 1fr; }
   .split-list { border-right: none; border-bottom: 1px solid var(--border); max-height: 380px; }
@@ -1318,7 +1323,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .filter-panel { grid-template-columns: repeat(2, 1fr); }
   .rbac-matrix { min-width: 620px; }          /* scrolls inside .table-wrap */
 }
+/* ≤900 — tablet portrait: the sidebar goes off-canvas */
 @media (max-width: 900px) {
+  .g-3 { grid-template-columns: 1fr; }
   .sidebar {
     /* above the scrim (55) but below the AI dock (310) and modals (300),
        so an open drawer never sits on top of a dialog. */
@@ -1336,6 +1343,8 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
   .chat-wrap { height: calc(100vh - 170px); height: calc(100dvh - 170px); }
 }
+/* ≤640 — phone (core shell + components; late-section 640 rules live in the
+   consolidated block at the end of the file, after their base rules) */
 @media (max-width: 640px) {
   .g-kpi { grid-template-columns: 1fr; }
   .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 6px; }
@@ -1487,9 +1496,6 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .g-kpi-7 { grid-template-columns: repeat(2, 1fr); }
   .pipe-split { grid-template-columns: 1fr; }
 }
-@media (max-width: 640px) {
-  .g-kpi-7 { grid-template-columns: 1fr; }
-}
 
 /* ============================================================
    Hiring forms — the candidate profile Forms tab (CandidateForms.jsx).
@@ -1561,26 +1567,29 @@ canvas { width: 100%; max-width: 100%; display: block; }
 /* The four-form switcher must wrap rather than overflow on narrow screens. */
 .cand-page .seg { flex-wrap: wrap; }
 
+/* Rating-table scale header: full words down to 640px, bare numbers below. */
+.hf-scale-short { display: none; }
+
+/* Empty-state CTA on the hiring forms: full-size, and full-width on phones. */
+.hf-cta { padding: 11px 26px; font-size: 14.5px; }
+
+/* ============================================================
+   ≤640 / ≤400 — consolidated phone rules for the late bolt-on sections
+   (Dashboard v2 grid, candidate page, hiring forms). Kept in ONE block
+   at the end of the file so they always follow their base rules; the
+   core shell's 640 rules live in the RESPONSIVE section above.
+   ============================================================ */
 @media (max-width: 640px) {
+  .g-kpi-7 { grid-template-columns: 1fr; }
   .cand-page-actions { width: 100%; }
   .cand-page-actions .btn { flex: 1 1 auto; justify-content: center; }
   .hf-sign-grid { grid-template-columns: 1fr; }
   .hf-summary { grid-template-columns: repeat(2, 1fr); }
+  .hf-scale-full { display: none; }
+  .hf-scale-short { display: inline; font-size: var(--fs-xs); }
+  .hf-rate-head, .hf-rate-row, .hf-rate-foot { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); }
+  .hf-cta { width: 100%; max-width: 420px; justify-content: center; }
 }
 @media (max-width: 400px) {
   .hf-summary { grid-template-columns: 1fr; }
 }
-
-/* Rating-table scale header: full words down to 640px, bare numbers below. */
-.hf-scale-short { display: none; }
-@media (max-width: 640px) {
-  .hf-scale-full { display: none; }
-  .hf-scale-short { display: inline; font-size: 12px; }
-  .hf-rate-head, .hf-rate-row, .hf-rate-foot { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); }
-}
-
-/* Empty-state CTA on the hiring forms: full-size, and full-width on phones. */
-.hf-cta { padding: 11px 26px; font-size: 14.5px; }
-@media (max-width: 640px) {
-  .hf-cta { width: 100%; max-width: 420px; justify-content: center; }
-}