/* assets/kpsgill-sticky-layers.css
   Shared sticky geometry for every KPSGill page with a sticky header, a wide research table,
   a sticky table head, a filter bar or a contents rail.

   THE BUG THIS FIXES: the global header is sticky at the top of the viewport while page
   content — including registry table rows — scrolls underneath it. Any nested sticky element
   using top:0 lands behind the header.

   THE RULE: exactly one element may sit at top:0 — the global header. Everything else offsets
   from --k-header-h, which kpsgill-sticky-layers.js MEASURES at runtime. Do not hardcode a
   pixel height: the masthead is two nav rows at 1536px and one row at other widths, so a fixed
   148px is wrong at most breakpoints. */

:root{
  --k-header-h: 96px;              /* fallback only — JS overwrites with the measured height */
  --k-gap: 12px;
  --k-toolbar-h: 0px;              /* set by JS when a sticky filter bar is present */
  --k-sticky-top: calc(var(--k-header-h) + var(--k-gap));
  --k-thead-top: calc(var(--k-header-h) + var(--k-toolbar-h) + var(--k-gap));
  --k-page-bg: #F6F5F0;
  --k-surface: #FBFAF7;
  --k-line: #E4E2DA;

  /* Deliberate stack. Explicit hierarchy beats components competing by accident. */
  --z-header: 1000;
  --z-menu: 1100;
  --z-toolbar: 100;
  --z-thead: 80;
  --z-frozen-col: 60;
  --z-thead-frozen: 90;            /* the corner cell must beat both */
  --z-toc: 50;
  --z-body: 1;
}

/* ── Global header — the ONLY top:0 sticky on the page ───────────────────── */
.k-hdr{ position: sticky; top: 0; z-index: var(--z-header); background: var(--k-page-bg); }

/* ── Anchor targets clear the header ─────────────────────────────────────── */
:where(section, article, h1, h2, h3, h4)[id],
.anchor-target{ scroll-margin-top: calc(var(--k-header-h) + 24px); }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ── Wide research tables ────────────────────────────────────────────────── */
/* WHY THIS IS A BOUNDED SCROLLPORT, not overflow-x with overflow-y:visible:
   per spec, a non-visible overflow on ONE axis computes the other axis to auto. So
   `overflow-x:auto; overflow-y:visible` silently becomes a scroll container on BOTH axes, and
   a sticky thead inside it then resolves `top` against the WRAPPER rather than the viewport.
   Measured: the head pinned to a box that had itself scrolled 585px above the header — which
   looks exactly like the header covering the table.
   The fix is to make the region an honest bounded scrollport sitting below the header. The
   reader scrolls within it; the column head stays at its top edge; the page scrolls the whole
   region as a unit. Horizontal scrolling is preserved, which a wide research table needs. */
/* The region PINS below the header as well as bounding itself. Without this the box scrolls
   under the masthead and takes its column head with it — measured at -28px, which is the
   original defect in a new place. Three links in the chain, each needed:
     header  top:0
     region  top: header + gap   (sticky, bounded)
     thead   top:0 within region                                              */
.registry-table-scroll,
.k-table-scroll{
  position: sticky; top: var(--k-sticky-top);
  width: 100%; max-width: 100%;
  max-height: calc(100vh - var(--k-header-h) - 132px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid var(--k-line);
  background: var(--k-page-bg);
}
/* Sticky positioning fails silently inside a clipping ancestor. */
.registry-table-scroll, .k-table-scroll,
.registry-table-scroll *, .k-table-scroll *{ }
.k-no-clip{ overflow: visible !important; }

.registry-table, .k-registry{ border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }

/* top:0 is correct HERE — the scrollport is the wrapper above, which already sits below the
   global header. This is the one place a nested sticky may use 0. */
.registry-table thead th, .k-registry thead th{
  position: sticky; top: 0; z-index: var(--z-thead);
  background: var(--k-page-bg);
  box-shadow: inset 0 -2px 0 #12233F;
  white-space: nowrap;
}

/* Optional frozen identity column — keeps LICENSEE / MATTER readable while scrolling across. */
.registry-table.k-freeze-first th:first-child,
.registry-table.k-freeze-first td:first-child,
.k-registry.k-freeze-first th:first-child,
.k-registry.k-freeze-first td:first-child{
  position: sticky; left: 0; z-index: var(--z-frozen-col);
  background: var(--k-page-bg);
  box-shadow: inset -1px 0 0 var(--k-line);
}
.registry-table.k-freeze-first thead th:first-child,
.k-registry.k-freeze-first thead th:first-child{ z-index: var(--z-thead-frozen); }
.registry-table tbody tr:nth-child(even) td, .k-registry tbody tr:nth-child(even) td{ background: var(--k-surface); }
.registry-table.k-freeze-first tbody tr:nth-child(even) td:first-child,
.k-registry.k-freeze-first tbody tr:nth-child(even) td:first-child{ background: var(--k-surface); }

/* ── Filter / search toolbar ─────────────────────────────────────────────── */
/* PREFERRED: let it scroll away. Stacking header + toolbar + thead eats half a 768px-tall
   laptop viewport. Add .k-sticky-toolbar only where filters must stay put. */
.registry-tools, .k-registry-tools{ position: static; }
.k-sticky-toolbar .registry-tools,
.registry-tools.k-sticky-toolbar{
  position: sticky; top: var(--k-sticky-top); z-index: var(--z-toolbar);
  background: var(--k-page-bg); padding-block: 10px;
}

/* ── Right-hand contents rail ────────────────────────────────────────────── */
.contents-rail, .k-toc{
  position: sticky; top: var(--k-sticky-top); z-index: var(--z-toc);
  max-height: calc(100vh - var(--k-header-h) - 40px);
  overflow-y: auto; overscroll-behavior: contain;
}

/* ── Short viewports: never let sticky chrome eat the screen ─────────────── */
@media (max-height: 820px){
  .k-sticky-toolbar .registry-tools,
  .registry-tools.k-sticky-toolbar{ position: static; }
  :root{ --k-toolbar-h: 0px; }
}

/* ── Narrow widths ───────────────────────────────────────────────────────── */
@media (max-width: 900px){
  /* No narrow sidebar beside a wide table — the rail becomes a collapsible block above it. */
  .contents-rail, .k-toc{
    position: static; max-height: none; overflow: visible;
    margin: 0 0 22px; border: 1px solid var(--k-line); background: var(--k-surface);
  }
  .k-toc-grid{ display: block !important; }
  /* Frozen column costs too much of a 390px screen. */
  .registry-table.k-freeze-first th:first-child,
  .registry-table.k-freeze-first td:first-child,
  .k-registry.k-freeze-first th:first-child,
  .k-registry.k-freeze-first td:first-child{ position: static; box-shadow: none; }
  /* Type stays readable; the table scrolls instead of compressing. */
  .registry-table, .k-registry{ font-size: 13.5px; }
}
@media (max-width: 900px){
  /* Give the table most of the screen once the rail is out of the way. */
  .registry-table-scroll, .k-table-scroll{ max-height: calc(100vh - var(--k-header-h) - 80px); }
}
@media (max-width: 560px){
  :root{ --k-gap: 8px; }
}