/* SGP responsive overrides.
   The base design stays inline (it must paint while streaming); this file only narrows it.
   Nothing here introduces a colour, size or weight that isn't already in the system.
   Breakpoints: 1080 = drawing lanes collapse · 900 = 4-up becomes 2-up · 820 = single column · 640 = 2-up becomes 1-up. */

@media (max-width: 1080px) {
  [data-r="lane"], [data-r="article"], [data-r="ind-row"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  [data-r="lane"] > div:empty:not([style]):not([data-r]) { display: none !important; }

  /* A 240px drawing in a reserved gutter becomes a static accent above its block. */
  [data-r="draw"] { position: static !important; inset: auto !important; width: min(220px, 44vw) !important; margin: 0 0 18px !important; order: -1; }
  /* An absolutely-positioned rule inside a collapsed grid has no containing block to
     stretch across, so it becomes an ordinary full-width row above the block instead. */
  [data-r="rule"] { position: relative !important; inset: auto !important; width: 100% !important; margin: 0 0 22px !important; }
  [data-r="stub"] { display: none !important; }
  /* Clearance reserved for a lifted gutter drawing is only needed while that drawing
     is lifted; once [data-r="draw"] is static the padding would be a hole. */
  [data-r="dclear"] { padding-top: 26px !important; }

  /* A page-opener drawing stays an opener: it takes its own full-width row above the
     content it bleeds past, rather than becoming the first item of that row. */
  [data-r="opener"] { position: static !important; inset: auto !important; width: 100% !important; max-width: min(420px, 86vw) !important; flex: 1 0 100% !important; order: -2; margin: 0 0 18px !important; }
  [data-r="opener-rule"] { position: relative !important; inset: auto !important; right: auto !important; width: 100% !important; flex: 1 0 100% !important; order: -1; margin: 0 0 26px !important; }
  [data-r="ctaart"] { height: auto !important; }
  [data-r="toc"] { position: static !important; top: auto !important; }

  /* Industry vignettes: the measured rule can't be recomputed in CSS, so the row
     takes a plain full-width ink rule and the vignette leads the stacked row. */
  [data-r="ind-row"] { padding-top: 26px !important; }
  [data-r="ind-row"]::before { content: ""; display: block; order: -2; grid-column: 1 / -1; height: 2px; background: #192130; margin-bottom: 8px; }
  [data-r="ind-art"] { width: 100% !important; max-width: 440px; order: -1; }
  [data-r="ind-text"] { padding-top: 0 !important; }
  [data-r="ind-rule"] { display: none !important; }
}

@media (max-width: 900px) {
  [data-r="cols2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; }
}

@media (max-width: 820px) {
  [data-r="cols"] { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
  [data-r="case-detail"] { margin-left: 0 !important; }
  /* 44px minimum hit target on touch widths */
  input, select, button, a[style*="border-radius:999px"] { min-height: 46px; }
}

@media (max-width: 640px) {
  [data-r="cols2"] { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
  [data-r="draw"] { width: min(180px, 48vw) !important; }
}

/* Visible focus, site-wide. Ink outline on light grounds, bone on dark bands.
   :focus-visible cannot be expressed inline, which is why it lives here. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #192130;
  outline-offset: 3px;
  border-radius: 2px;
}
[style*="background:#192130"] a:focus-visible,
[style*="background:#192130"] button:focus-visible {
  outline-color: #F3F0E9;
}
@media (prefers-reduced-motion: reduce) {
  [data-r="skeleton"] { animation: none !important; }
}