/* ══════════════════════════════════════════════════════════════════════
   NCDS Modern — TailAdmin-inspired composition layer, 2026.

   Loaded AFTER ncds.css. Changes composition only: whitespace, nav
   states, control geometry, table rhythm. Every colour still resolves
   to the NCDS tokens declared in ncds.css — this file introduces no
   new palette, type size, or radius value outside the token set.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --rail: 260px;
}

/* ── rail — soft rounded nav, no edge bar ─────────────────────────── */
.rail-brand { padding-block: var(--s-4); }
.rail-group { padding: var(--s-5) var(--s-4) 0; }
.rail-group > .eyebrow { margin-bottom: var(--s-2); }
.rail-link {
  padding: 9px var(--s-3);
  min-height: 40px;
  gap: var(--s-3);
  border-radius: var(--r-md);
}
.rail-link svg { width: 18px; height: 18px; }
.rail-link[aria-current="page"] { font-weight: 600; }
.rail-link[aria-current="page"]::before { display: none; }
.rail-link:hover { background: color-mix(in oklch, var(--accent) 5%, var(--surface)); }
.rail-link .step { font-size: var(--fs-xs); opacity: 0.8; }
.rail-switch { border-radius: var(--r-md); }

/* ── topbar — taller, search-field affordance, circular bell ──────── */
.topbar { min-height: 64px; padding-block: var(--s-3); }
.topbar .crumbs b { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.topbar .btn[data-cmdk] {
  min-height: 38px;
  width: clamp(150px, 18vw, 260px);
  justify-content: flex-start;
  border-radius: var(--r-md);
  background: var(--bg);
  border-color: var(--border);
  color: var(--muted);
  font-weight: 400;
}
.topbar .btn[data-cmdk]:hover { border-color: var(--border-strong); box-shadow: none; }
.topbar .btn[data-cmdk] .kbd { margin-left: auto; }
.bell { width: 38px; height: 38px; border-radius: 50%; background: var(--bg); border-color: var(--border); }
.bell:hover { background: var(--surface); }
.userchip { background: var(--bg); border-color: var(--border); padding: 4px 14px 4px 5px; }
.userchip .avatar { width: 28px; height: 28px; }

/* ── cards & panels — roomier headers, quieter internal chrome ────── */
.panel > header { padding: var(--s-4) var(--s-5); }
.panel > header h3 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.card { padding: var(--s-5) var(--s-6); }

/* ── metric tiles — icon in a soft square, TailAdmin stat style ───── */
.metric { padding: var(--s-5); gap: var(--s-2); }
.metric .k { gap: var(--s-2); }
.metric .k svg {
  width: 34px; height: 34px; padding: 8px; box-sizing: border-box;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-md); flex: none;
}
.metric--accent .k svg { background: var(--surface); }

/* ── tables — borderless header, generous rows ────────────────────── */
.tbl thead th { background: var(--surface); padding-block: var(--s-3); }
.tbl th, .tbl td { padding: var(--s-3) var(--s-4); }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--s-5); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--s-5); }
.tbl tbody td { border-bottom-color: color-mix(in oklch, var(--border) 60%, transparent); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* ── forms — taller controls, soft focus ring ─────────────────────── */
.input, .select, .textarea {
  min-height: 42px;
  border-radius: var(--r-md);
  border-color: var(--border);
  transition: border-color var(--t-2) ease, box-shadow var(--t-2) ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent);
  outline: none;
}
.field { gap: var(--s-2); }
.field > label { font-size: var(--fs-sm); }

/* ── buttons — softer geometry, primary with presence ─────────────── */
.btn { border-radius: var(--r-md); min-height: 38px; font-weight: 500; }
.btn--primary { box-shadow: 0 1px 2px color-mix(in oklch, var(--accent) 30%, transparent); }
.btn--sm { border-radius: var(--r-sm); min-height: 30px; }

/* ── page head — airier, hairline recedes ─────────────────────────── */
.pagehead { gap: var(--s-4); }
.pagehead::after { background: color-mix(in oklch, var(--border) 60%, transparent); }
.pagehead .lede { font-size: var(--fs-md); }

/* ── shell layer tune-ups ─────────────────────────────────────────── */
.flowbar { padding-block: var(--s-3); }
.fchip { padding: 4px 12px; min-height: 26px; }
.notifpanel .nrow svg {
  width: 30px; height: 30px; padding: 7px; box-sizing: border-box;
  background: var(--bg); border-radius: 50%; margin-top: 0;
}

@media (max-width: 1240px) { :root { --rail: 236px; } }
@media (max-width: 920px) { :root { --rail: 66px; } }