/* ---- 9. Tables & search --------------------------------------------------- */

/* Data sections get a titled header with a hairline rule. */
section>h2 {
  margin: 0 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ta-border);
  font-size: 1.05rem;
  font-weight: 650;
}

/* The table stays a real table (`display: table`, the default) so its
   columns stretch to fill the section. A `display: block` table wraps its
   rows in an anonymous table box that sizes to content — a table with few
   columns stops halfway across its section instead of filling it. The
   horizontal scroll band for wide tables lives on the `.table-scroll`
   wrapper that every table is rendered inside (below). */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ta-surface);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r);
}

/* Scroll wrapper: wide data tables (many nowrap columns) scroll horizontally
   here instead of blowing out the page, at any viewport. Rows/cells keep
   their table layout. The wrapper owns the outer border + rounding so the
   table's own edge is dropped — no doubled frame when scrolled. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-r);
  background: var(--ta-surface);
}

.table-scroll table {
  border: none;
  border-radius: 0;
  background: transparent;
}

thead th {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--ta-border);
  background: var(--ta-surface-2);
  color: var(--ta-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

thead th a {
  color: inherit;
  text-decoration: none;
}

thead th a:hover {
  color: var(--ta-text);
}

tbody td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ta-border);
  font-size: 0.95rem;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--ta-surface-2);
}

section [role="group"] {
  max-width: 24rem;
  margin-bottom: 1.25rem;
}

section [role="group"] input[type="search"] {
  flex: 1;
  height: 2.25rem;
}

/* Match the input's explicit height so the group's stretch alignment (see
   [role="group"] in buttons.css) doesn't grow the submit button to the
   input's larger natural height — both land on the same 2.25rem the
   create slide-over "+ New X" button next to this group already uses
   (.create-summary), so the whole row reads as one control height. */
section [role="group"] button {
  height: 2.25rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   PARITY B08 — registers & audit (ashes-ledger, audit-log, audit-register,
   multi-select-review, intake-studio). Append-only, namespaced under the
   block classes; the shared material faces (glass-pill / glass-field /
   accent-grad) are reference classes the B08 ports carry verbatim.
   ─────────────────────────────────────────────────────────────────────────── */

/* Reference raw-token aliases used by Tailwind arbitrary values in the ported
   classes (the bundle maps utilities to --ta-* tokens, but `var(--glass-fill-strong)`,
   `var(--h-control)` etc. are the REFERENCE's own variable names). Other
   batches' ports need these too; promote to tokens.css if the set grows. */
:root {
  --glass-fill: var(--ta-glass);
  --glass-fill-strong: var(--ta-glass-strong);
  --glass-fill-solid: var(--ta-glass-solid);
  --glass-rim: var(--ta-glass-rim);
  --background: var(--ta-surface);
  --foreground: var(--ta-text);
  --h-control: 34px;
  --h-control-sm: 22px;
}

/* Shared Panel frame (blocks/_shared.tsx): the vitrine `.glass-card` adds its
   own 1.25rem padding; the Panel's header/body own all spacing, so zero it. */
.glass-card.parity-panel {
  padding: 0;
}

/* The reference's frosted chip: translucent fill + hairline + soft shadow. */
.glass-pill {
  border-color: var(--ta-border);
  background-color: var(--ta-glass);
  color: var(--ta-text);
  box-shadow: inset 0 1px 0 var(--ta-glass-rim), var(--ta-shadow-xs);
}

.glass-pill:not([aria-current="page"]):hover {
  background-color: var(--ta-glass-strong);
}

/* The reference's in-panel field: a solid well with a hairline; focus is the
   one place box-shadow is allowed (the ring). */
.glass-field {
  border: 1px solid var(--ta-border-strong);
  background-color: var(--ta-surface);
  transition:
    border-color 140ms ease-out,
    box-shadow 140ms ease-out,
    background-color 140ms ease-out;
}

.glass-field:focus {
  border-color: color-mix(in oklab, var(--ta-accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ta-accent) 18%, transparent);
}

/* The primary button's lit surface — the only place --accent-grad may appear. */
.accent-grad {
  background-color: var(--ta-accent);
  background-image: linear-gradient(180deg,
      color-mix(in oklab, var(--ta-accent) 86%, white) 0%,
      var(--ta-accent) 100%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.25),
    0 4px 12px -2px color-mix(in oklab, var(--ta-accent) 35%, transparent);
}

.accent-grad:hover {
  background-image: linear-gradient(180deg,
      color-mix(in oklab, var(--ta-accent) 74%, white) 0%,
      color-mix(in oklab, var(--ta-accent) 92%, white) 100%);
}

/* The AI signifier (the reference's only licensed loop — a 2.8s opacity
   breathe, carried only while something is genuinely live). */
@keyframes b08-ai-breathe {
  50% {
    opacity: 0.55;
  }
}

.ai-rainbow-glyph {
  color: var(--ta-accent);
  animation: b08-ai-breathe 2800ms ease-in-out infinite;
}

.ai-rainbow-border::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid color-mix(in oklab, var(--ta-accent) 55%, transparent);
  animation: b08-ai-breathe 2800ms ease-in-out infinite;
}

/* The intake-studio panel is the reference's `glass-panel` material (0.55
   fill + `--shadow-md`), which vitrine's grouped `.glass-panel` recipe maps
   to the stronger card fill + smaller shadow. Restore the panel recipe
   (the app's `--ta-shadow` IS the reference's md step).
   `div.b08-intake` outranks vitrine's `.glass-panel` (loaded later). */
div.b08-intake {
  background-color: var(--ta-glass);
  box-shadow: inset 0 1px 0 var(--ta-glass-rim), var(--ta-shadow);
}

/* ── The ashes-ledger sheet ──────────────────────────────────────────────────
   The ledger table sits inside the Panel's scroll band, not on a page, so the
   generic table chrome (outer border/radius, uppercase head, last-row rule)
   must be neutralised — the sheet's own utilities own every cell. */
.b08-ledger table {
  border: none;
  border-radius: 0;
  background: transparent;
}

.b08-ledger :where(thead th) {
  text-transform: none;
  letter-spacing: normal;
  font-variant-numeric: normal;
  color: inherit;
}

/* The element selectors sit INSIDE :where() so the whole rule stays at (0,1,0)
   — the cells' own `text-xs`/`font-mono` utilities then still win by order. */
.b08-ledger :where(tbody td) {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.b08-ledger tbody tr:last-child td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* ── B08 bare controls ───────────────────────────────────────────────────────
   The reference's raw `<button>`s (filter chips, sort headers, lens pills,
   rail rows) and `<input>`s are NOT the app's button/input faces: the
   reference preflight leaves them bare, so they inherit the surrounding text
   and carry only the padding/radius their utilities give them. The app's
   `buttons.css`/`forms.css` give every control a box instead — neutralise
   that for the B08 surfaces only.

   `:where(button)` keeps specificity at (0,1,0): it beats the element-level
   base rules but still LOSES to the element's own Tailwind utilities (which
   are unlayered and load after modern.css), so `px-3`, `rounded-full`,
   `inline-flex`, `bg-primary`, `gap-2` … all still win. */
.b08-ledger :where(button),
.parity-panel :where(button),
.b08-intake :where(button) {
  display: block;
  padding: 0;
  border-width: 0;
  border-color: var(--ta-border);
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  gap: normal;
  justify-content: normal;
}

/* The reference's preflight zeroes heading/paragraph margins; base.css gives
   them a bottom margin for prose pages. Inside the B08 surfaces the reference
   owns all spacing with utilities, so drop the inherited margins here. */
.b08-ledger :where(h2, h3, p),
.parity-panel :where(h2, h3, p),
.b08-intake :where(h2, h3, p) {
  margin: 0;
}

/* The reference's bare search inputs: `input[type=search]` gets a 2.2rem
   affordance in forms.css (for the app's own search bars); the B08 find boxes
   own their padding via utilities, so undo it and use the reference's hairline
   border (the app's `--ta-border-strong` is stronger than `--ta-border`). */
.b08-ledger input.b08-find,
.parity-panel input.b08-rail {
  border-color: var(--ta-border);
}

.b08-ledger input.b08-find {
  padding: 0.375rem 0.75rem;
}

.parity-panel input.b08-rail {
  padding: 0 0.5rem 0 2rem;
}