/* ===========================================================================
   app.css -- responsive layer
   Breakpoints: 640 (phone->tablet) · 900 (rail collapses) · 1180 (ctx rail)
                1500 (outer cap).  docs/style.md section 8.
   No overflow-x: clip or hidden on html/body, ever.  R2.1 / V9.
   ========================================================================= */

/* The scrim is a grid child of .body, so it must be taken out of flow at EVERY
   width. Left static it consumes a grid column and pushes the context rail onto
   a second row -- which is why the outline was in the DOM but not on screen. */
.scrim {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: calc(var(--z-scrim) - 1);
  background: var(--scrim); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.scrim[data-open] { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------ context rail drops below 1180 */
@media (max-width: 1179px) {
  .body[data-ctx="1"], .body[data-ctx="1"][data-rail="min"] { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .ctx { display: none; }
  .ctxmobile {
    display: block; margin: 0 0 var(--s-6);
    border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface);
  }
  .ctxmobile > summary {
    cursor: pointer; padding: var(--s-3) var(--s-4); list-style: none;
    font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
    display: flex; align-items: center; gap: var(--s-2);
  }
  .ctxmobile > summary::-webkit-details-marker { display: none; }
  .ctxmobile > summary::after { content: "▾"; color: var(--ink-3); margin-left: auto; }
  .ctxmobile[open] > summary::after { content: "▴"; }
  .ctxmobile .ctx { display: block; position: static; max-height: none; border: 0; padding: 0 var(--s-4) var(--s-4); }
  .ctx__l { display: none; }
}

/* ------------------------------------------------------------- rail collapses */
@media (max-width: 900px) {
  :root { --header-h: 52px; }
  .body, .body[data-ctx="1"], .body[data-rail="min"], .body[data-ctx="1"][data-rail="min"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .railtoggle { display: grid; }
  .rail {
    position: fixed; inset: var(--header-h) auto 0 0; width: min(300px, 84vw);
    height: auto; z-index: var(--z-scrim); transform: translateX(-102%);
    transition: transform var(--dur-2) var(--ease);
    box-shadow: var(--e-2); padding-bottom: var(--s-9);
  }
  .rail[data-open] { transform: none; }
  .rail__link { height: 42px; }
  .main { padding: var(--s-5) 0 var(--s-8); }
  .prose h2 { margin-top: var(--s-7); }
  .pager { grid-template-columns: 1fr; }
  .pager a:last-child { text-align: left; }
  .pal__body { grid-template-columns: minmax(0, 1fr); }
  .pal__prev { display: none; }
  .dgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ------------------------------------------------------------ header shrinks */
@media (max-width: 720px) {
  .omni { min-width: 0; width: 34px; padding: 0; justify-content: center; }
  .omni span, .omni__k { display: none; }
  .brand__sub { display: none; }
  .crumb__drop { display: inline; }
  .crumb ol { font-size: var(--t-2xs); }
}

@media (max-width: 560px) {
  .brand__txt { display: none; }
  .crumb { display: none; }
  .hud-crumb { display: block; }
}

/* ------------------------------------------------------------------- tables */
@media (max-width: 767px) {
  .tbl--cards table, .tbl--cards thead, .tbl--cards tbody,
  .tbl--cards tr, .tbl--cards th, .tbl--cards td { display: block; }
  .tbl--cards { display: none; }
  .tbl--cards table { display: none; }
  .tbl--cards .cards { display: grid; }
  .tbl--cards[data-mode="cards"] .cards { display: grid; }
  .tbl--cards[data-mode="table"] .cards { display: none; }
  .tbl--cards[data-mode="table"] table { display: table; }
  .tbl--cards[data-mode="table"] thead { display: table-header-group; }
  .tbl--cards[data-mode="table"] tbody { display: table-row-group; }
  .tbl--cards[data-mode="table"] tr { display: table-row; }
  .tbl--cards[data-mode="table"] th, .tbl--cards[data-mode="table"] td { display: table-cell; }
  .tbl--cards[data-mode="table"] thead th { position: static; }
  .tbl--cards[data-mode="table"] .tbl--sticky1 td:first-child,
  .tbl--cards[data-mode="table"] .tbl--sticky1 th:first-child { position: static; }
}

/* the sticky first column is a desktop affordance; it fights a scroll hint on a phone */
@media (max-width: 640px) {
  .tbl--sticky1 td:first-child, .tbl--sticky1 th:first-child {
    position: static; border-right: 0;
  }
  .tbl--sticky1 thead th { position: static; }
  .dgrid { grid-template-columns: minmax(0, 1fr); }
  .prose > * { max-width: 100%; }
  .facets { padding: var(--s-3) 0; }
  .mx { white-space: normal; }
  .mx--block { padding: var(--s-3); text-align: left; }
}

/* every table scrolls rather than clips, from 1024 down */
@media (max-width: 1023px) {
  .table-wrap { border-radius: var(--r-2); }
  table { min-width: max-content; }
  table.tbl--fit { min-width: 0; }
}

/* --------------------------------------------------------------- utilities */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .ftr__in { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .toolbar { position: static; }
  .toolbar input[type="search"] { flex-basis: 100%; }
  .seg button { padding: 0 var(--s-2); }
  .stat { padding: var(--s-3); }
  .stat__v { font-size: var(--t-lg); }
  .lead { font-size: var(--t-base); }
  .art pre { font-size: var(--t-2xs); padding: var(--s-3); }
  .dcard__b pre { font-size: 10.5px; }
  .mx--block .mx-row { display: block; }
}

@media (min-width: 1500px) {
  .body, .hdr__in, .ftr__in { padding-left: 0; padding-right: 0; }
}