/* ═════════════════════════════════════════════════════════════════════════
   NADIS Public Site — Home

   Loaded only by `index.html`, after tokens.css and base.css.

   Section padding is NOT set here. It belongs to `.nx-section` in base.css
   and nowhere else — see the note at the top of that file. Everything below
   styles content INSIDE a section, never the section's own rhythm.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Screenshot ───────────────────────────────────────────────────────────
   The image is a wide, thin crop of one appointments row — 3444×420. It is
   given a paper frame and allowed to scroll sideways inside that frame on
   narrow screens rather than being scaled down until the type is unreadable.
   The page itself never scrolls horizontally.
   ───────────────────────────────────────────────────────────────────────── */
.nx-shot { margin: 0; }

.nx-shot__frame {
  padding: var(--nx-space-2);
  background: var(--nx-paper-raised);
  border: 1px solid var(--nx-rule);
  border-radius: var(--nx-radius-4);
  box-shadow: var(--nx-shadow-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.nx-shot__frame img {
  display: block;
  width: 100%;
  min-width: 720px;   /* below this the row's own type stops being legible */
  height: auto;
  border-radius: var(--nx-radius-3);
}

.nx-shot__notes {
  display: grid;
  gap: var(--nx-space-5);
  margin-top: var(--nx-space-5);
}
@media (min-width: 800px) {
  .nx-shot__notes { grid-template-columns: repeat(3, 1fr); gap: var(--nx-space-5); }
}
.nx-shot__note > .nx-label { margin-bottom: var(--nx-space-2); }
.nx-shot__note em { font-style: normal; color: var(--nx-ink); font-weight: 500; }

/* The masked number is quoted from the product, so it is set the way the
   product sets it. */
.nx-shot__mono {
  color: var(--nx-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}


/* ── Coverage ─────────────────────────────────────────────────────────── */
.nx-covers { display: grid; align-content: start; }
.nx-covers > .nx-label { margin-bottom: var(--nx-space-3); }

.nx-covers__list { display: grid; gap: var(--nx-space-2); }

.nx-covers__item {
  padding-top: var(--nx-space-2);
  border-top: 1px solid var(--nx-rule);
  font-size: var(--nx-text-small);
  color: var(--nx-ink-muted);
}
/* The first item sits directly under the group label, which already has a
   rule of its own above it. */
.nx-covers__item:first-child { border-top: 0; padding-top: 0; }

.nx-covers__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nx-space-2);
  margin-top: var(--nx-space-5);
}


/* ── Specialty ────────────────────────────────────────────────────────── */
.nx-specialty { background: var(--nx-paper-raised); }


/* ── Start ────────────────────────────────────────────────────────────── */
.nx-start { display: grid; justify-items: start; }
.nx-start__title { max-width: 20ch; margin-block: var(--nx-space-4) var(--nx-space-4); }
.nx-start__lead { margin-bottom: var(--nx-space-6); }
.nx-start__actions { gap: var(--nx-space-3); }