/* ============================================================
   Site framework
   Structures shared by every template of the planned site:
   page header, breadcrumbs, placeholder panel, archive grid,
   single layout, pagination, search and 404.
   Tokens come from assets/css/tokens.css; global look from site.css.
   ============================================================ */

/* ---- Page header ---- */
.nz-page-head {
  padding: 56px 0 44px;
  border-bottom: 1px solid var(--gray-line);
  background: var(--white);
}

.nz-page-head--compact {
  padding: 36px 0 30px;
}

.nz-page-head h1 {
  max-width: 22ch;
  margin-bottom: 16px;
}

.nz-page-head__lead {
  max-width: 68ch;
  margin-bottom: 0;
  font-size: 1.06rem;
  line-height: 1.6;
}

/* ---- Breadcrumbs ---- */
.nz-breadcrumbs {
  margin-bottom: 22px;
}

.nz-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gray-text);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.nz-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nz-breadcrumbs li + li::before {
  width: 5px;
  height: 5px;
  content: "";
  background: var(--gray-line);
  border-radius: 50%;
}

.nz-breadcrumbs a {
  color: var(--gray-text);
  text-decoration: none;
}

.nz-breadcrumbs a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.nz-breadcrumbs [aria-current="page"] {
  color: var(--blue);
  font-weight: 600;
}

/* ---- Body sections of a single page ---- */
.nz-page-body {
  padding: 64px 0 72px;
}

.nz-page-body .container > *:last-child {
  margin-bottom: 0;
}

.nz-page-body h2 {
  margin-top: 44px;
}

.nz-page-body h2:first-child {
  margin-top: 0;
}

.nz-page-body ul,
.nz-page-body ol {
  max-width: 72ch;
  padding-left: 22px;
  color: var(--gray-text);
}

.nz-page-body li {
  margin-bottom: 8px;
}

.nz-page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: 15px;
}

.nz-page-body th,
.nz-page-body td {
  padding: 12px 14px;
  border: 1px solid var(--gray-line);
  text-align: left;
  vertical-align: top;
}

.nz-page-body th {
  background: var(--gray-bg);
  color: var(--blue);
  font-weight: 700;
}

/* ---- Placeholder panel ---- */
.nz-planning {
  margin: 0 0 28px;
  padding: 26px 28px;
  border: 1px dashed var(--ph-border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--ph-bg);
}

.nz-planning__label {
  margin-bottom: 0;
  color: var(--blue);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.nz-planning__note {
  margin: 6px 0 0;
  color: var(--gray-text);
  font-size: 14px;
}

/* ---- Business terms (maintained once in the shared site information) ---- */
.nz-terms {
  margin: 32px 0 0;
  padding: 26px 28px;
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-terms__title {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 1.15rem;
  font-weight: 700;
}

.nz-terms__list {
  margin: 0;
}

.nz-terms__label {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-terms__value {
  margin: 4px 0 18px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.nz-terms__value:last-of-type {
  margin-bottom: 0;
}

.nz-terms__note {
  margin: 16px 0 0;
  color: var(--gray-text);
  font-size: 13px;
}

@media (max-width: 650px) {
  .nz-page-head {
    padding: 40px 0 32px;
  }
  .nz-page-body {
    padding: 44px 0 52px;
  }
  .nz-planning {
    padding: 20px 20px;
  }
  .nz-terms {
    padding: 20px 20px;
  }
  .nz-page-body table {
    display: block;
    overflow-x: auto;
  }
}/* ---- Collection (archive) ---- */
.nz-collection {
  padding: 56px 0 72px;
}

.nz-collection__intro {
  max-width: 72ch;
  margin-bottom: 36px;
}

.nz-collection__intro p {
  margin-bottom: 0;
}

.nz-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-bottom: 40px;
}

.nz-card {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition-color), transform var(--transition-color);
}

.nz-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.nz-card__title {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.3;
}

.nz-card__title a {
  text-decoration: none;
}

.nz-card__title a:hover {
  color: var(--green-dark);
}

.nz-card__text {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.55;
}

.nz-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.nz-card__meta li,
.nz-chip {
  padding: 4px 10px;
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  color: var(--gray-text);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.nz-empty {
  padding: 30px 28px;
  border: 1px dashed var(--ph-border);
  border-radius: var(--radius);
  background: var(--gray-bg);
  color: var(--gray-text);
}

.nz-empty p:last-child {
  margin-bottom: 0;
}

/* ---- Pagination ---- */
.nz-pagination {
  margin-top: 40px;
}

.nz-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nz-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 12px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--blue);
  font-size: 14px;
  text-decoration: none;
}

.nz-pagination .page-numbers.current,
.nz-pagination .page-numbers:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}/* ---- Single layout ---- */
.nz-single {
  padding: 56px 0 72px;
}

.nz-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  color: var(--gray-text);
  font-size: 14px;
}

.nz-single__body {
  max-width: 78ch;
}

.nz-single__body h2 {
  margin-top: 40px;
}

.nz-related {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--gray-line);
}

.nz-related h2 {
  margin-bottom: 22px;
  font-size: 24px;
}

.nz-related__group + .nz-related__group {
  margin-top: 52px;
}

.nz-related .nz-grid {
  margin-bottom: 0;
}

/* A related entry carries the picture of the record it points at. The card
   itself drops its padding so the picture reaches the card edge, and the text
   block keeps that padding of its own. */
.nz-card--media {
  padding: 0;
  overflow: hidden;
}

.nz-card__media {
  display: block;
  background: var(--gray-bg);
}

.nz-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* A cut-out product picture — the card image the site owner uploads for the
   equipment records — is drawn whole inside the same 4:3 frame as every other
   card, on white, because cropping a machine that was cut out on white is what
   would spoil it. A photograph that carries its own background still fills the
   frame edge to edge. */
.nz-card__img--product {
  object-fit: contain;
  background: var(--white);
}

.nz-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px 24px 22px;
}

.nz-card__label {
  margin: 0 0 6px;
  color: var(--gray-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-card--media .nz-card__title {
  font-size: 19px;
}

/* ---- Search ---- */
.nz-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 560px;
  margin-bottom: 32px;
}

.nz-search-form input[type="search"] {
  flex: 1 1 240px;
  min-height: var(--button-height);
  padding: 0 16px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
}

.nz-search-form input[type="search"]:focus-visible {
  border-color: var(--blue);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- 404 ---- */
.nz-404 {
  padding: 72px 0 84px;
}

.nz-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

/* ---- Sticky mobile action ---- */
.mobile-cta .button {
  flex: 1 1 auto;
  width: 100%;
}

/* ---- Footer legal row ---- */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.footer-legal a {
  color: var(--blue-soft);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ---- Mobile navigation ----
   The header keeps its own navigation on small screens: the top-level links
   move into the native disclosure menu below the logo row, which site.css
   lays out, so the entries stay the same as on the desktop bar and the menu
   still works without JavaScript.                                       */
@media (max-width: 999px) {
  .site-header {
    height: auto;
    padding: 14px 0;
  }
  .header-inner {
    flex-wrap: wrap;
    gap: 14px;
  }
}
/* ============================================================
   Record fields
   Every value of a record is printed in content-model order:
   short values as a label/value list, long text and media as a
   block of their own, repeaters as a table or one block per row.
   ============================================================ */
.nz-spec {
  max-width: 980px;
  margin-top: 40px;
}

.nz-spec__heading {
  margin: 0 0 20px;
  font-size: 24px;
}

.nz-spec__note {
  margin: -8px 0 20px;
  color: var(--gray-text);
  font-size: 14px;
}

.nz-spec__dl {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr;
  margin: 0 0 32px;
  border-top: 1px solid var(--gray-line);
}

.nz-spec__dl dt {
  padding: 13px 20px 13px 0;
  border-bottom: 1px solid var(--gray-line);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nz-spec__dl dd {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--gray-line);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.nz-spec__dl dd > *:last-child {
  margin-bottom: 0;
}

.nz-spec__dl--sub {
  margin-bottom: 0;
}

.nz-spec__block {
  margin: 0 0 36px;
}

.nz-spec__block-title {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 18px;
}

.nz-spec__prose {
  max-width: 72ch;
}

.nz-spec__prose > *:last-child {
  margin-bottom: 0;
}

.nz-spec__rows {
  display: grid;
  gap: 16px;
}

.nz-spec__row {
  padding: 20px 22px;
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-spec__row .nz-spec__dl {
  margin-bottom: 0;
}

.nz-spec__table-wrap {
  overflow-x: auto;
  margin: 0 0 32px;
}

.nz-spec__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.nz-spec__table th,
.nz-spec__table td {
  padding: 12px 14px;
  border: 1px solid var(--gray-line);
  text-align: left;
  vertical-align: top;
}

.nz-spec__table th {
  background: var(--gray-bg);
  color: var(--blue);
  font-weight: 700;
}

.nz-spec__table td > *:last-child {
  margin-bottom: 0;
}

.nz-spec__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-spec__list .nz-chip a {
  color: var(--blue);
  text-decoration: none;
}

.nz-spec__list .nz-chip a:hover {
  color: var(--hover-green);
  text-decoration: underline;
}

.nz-spec__media,
.nz-spec__figure {
  margin: 0;
}

.nz-spec__figure a {
  display: block;
}

.nz-spec__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.nz-spec__gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-spec__file {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
}

@media (max-width: 700px) {
  .nz-spec__dl {
    grid-template-columns: 1fr;
  }
  .nz-spec__dl dt {
    padding-bottom: 2px;
    border-bottom: 0;
  }
  .nz-spec__dl dd {
    padding-top: 2px;
  }
  .nz-spec__row {
    padding: 16px 16px;
  }
}

/* ============================================================
   Archive filters and the extra card lines (§16.2)
   The filter bar only prints for vocabularies a type really carries and that
   have terms in use, so a chip here always leads to a non-empty grid.

   The panel is a technical panel (§8): a brand-blue top edge, the light-grey
   technical backing, blue uppercase labels, and white pill chips. Its top edge
   is the header's own line, repeated at the panel's scale: .utility-bar is a
   blue band whose leftmost 14px are green (§6.4), so the panel's top edge is
   brand blue with the same 14px of green covering its left end — the tool opens
   with the mark the page above it opens with. Inside, green stays the short
   index mark beside a label (§6.1) — never a chip colour, a background or a
   dot, so it cannot be read as a status (§3.3).
   ============================================================ */
.nz-filters {
  /* The top edge's weight is also the height of the green lead-in that covers
     its left end, so the two are one number. */
  --nz-filters-edge: 8px;
  position: relative;
  margin: 0 0 32px;
  padding: 18px 22px 20px;
  border: 1px solid var(--gray-line);
  border-top: var(--nz-filters-edge) solid var(--blue);
  border-radius: var(--radius);
  background: var(--gray-bg);
}

/* The green lead-in at the left end of the top edge. It is drawn over the left
   end of the border — an absolutely positioned box paints above its parent's
   border — and follows the panel's top-left curve so the rounded corner stays
   clean. Decoration only: it lives in the border area and never covers a label. */
.nz-filters::before {
  position: absolute;
  top: calc(-1 * var(--nz-filters-edge));
  left: 0;
  width: 14px;
  height: var(--nz-filters-edge);
  content: "";
  background: var(--green);
  border-radius: var(--radius) 0 0 0;
}

.nz-filters__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.nz-filters__count {
  margin: 0;
  color: var(--gray-text);
  font-size: 13.5px;
}

/* The one figure in the bar carries the brand blue (§3.1). */
.nz-filters__count strong {
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nz-filters__clear {
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* While the listing is being restored in place, the action that was pressed
   reads as busy and cannot be pressed a second time; the region it belongs to
   carries aria-busy for the same reason (assets/js/listing-filter.js). Only the
   dimming is new — the underline stays, so the control keeps its shape. */
.nz-filters__clear.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* A message for assistive technology only. The filter bar restores the listing
   without a reload, so the change has to be said out loud; the region itself
   never carries page copy that is meant to be seen (components/archive-list.php). */
.nz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One label column and one chip column: every vocabulary's chips start on the
   same vertical line, so the panel reads as a grid instead of a stack of loose
   rows, and a long list wraps inside its own column. */
.nz-filters__group {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 8px 20px;
  padding: 13px 0;
  border-top: 1px solid var(--gray-line);
}

/* The label is the blue column head; the short green rule in front of it is
   the site's own eyebrow mark at index size (§6.1). */
.nz-filters__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-filters__label::before {
  flex: none;
  width: 32px;
  height: 3px;
  content: "";
  background: var(--green);
}

.nz-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-filters__chip {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-color), background-color var(--transition-color), border-color var(--transition-color);
}

/* Hover and focus share the light blue tint, the way a selected row does (§3.1). */
.nz-filters__chip:hover {
  border-color: var(--blue);
  background: var(--tint);
  color: var(--blue);
}

/* The current filter: fill, boundary and weight change together, so the state
   never rests on colour alone (§6, §7). Hovering it deepens the fill rather
   than inverting it, so the selected chip never looks unselected. */
.nz-filters__chip.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
}

.nz-filters__chip.is-active:hover {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: var(--white);
}

.nz-filters__chip:focus-visible {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* The chips of a vocabulary under its own label once the label column cannot
   hold its line beside them. */
@media (max-width: 860px) {
  .nz-filters__group {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
  }
}

.nz-card__lead {
  margin: 0 0 12px;
  color: var(--gray-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.nz-card__more {
  margin: 12px 0 0;
  font-size: 13.5px;
}

.nz-card__meta a {
  color: inherit;
  text-decoration: none;
}

.nz-card__meta a:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* ============================================================
   The annotated picture slot (components/image-placeholder.php)
   The component is shared: the home page defines every picture slot with it and
   the equipment record page shows the slot a machine photo belongs in, so its
   base styles sit in the framework sheet that every template loads. The rules
   that only apply inside a home-page card or panel stay in home.css, which is
   loaded after this file.
   ============================================================ */
.nz-ph {
  position: relative;
  margin: 0;
  background: var(--ph-bg);
}

.nz-ph__img {
  display: block;
  width: 100%;
  height: auto;
}

.nz-ph__tag {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  padding: 4px 10px;
  background: rgba(27, 55, 112, 0.92);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.nz-ph__cap {
  padding: 12px 18px;
  border-top: 1px dashed var(--ph-border);
  background: var(--white);
}

.nz-ph__size {
  display: block;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
}

.nz-ph__hint {
  display: block;
  margin-top: 2px;
  color: var(--gray-text);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ============================================================
   Media lightbox: a picture or a video opens on this page
   The pinned behaviours own the modal itself (assets/wp-behaviors):
   `gallery` for a picture grid, `dialog` for a video row. What they
   leave to the page is the panel, the controls and the stage, which
   is what this section is. The panel is dark so a picture reads as a
   picture and a video frame has a frame, and it uses brand colours
   rather than a new palette.
   ============================================================ */

/* A picture that opens says so with the pointer; the grid itself is the
   control, so the whole item is the target. */
.nz-media-gallery a[data-gallery-item] {
  display: block;
  cursor: zoom-in;
}

.nz-media-gallery a[data-gallery-item]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* A video row opens a dialog instead of leaving the page, so it is a button
   drawn as the text link it has always looked like. */
.nz-media-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-weight: 500;
  text-align: start;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: text-decoration-thickness 180ms ease;
}

.nz-media-trigger:hover {
  text-decoration-thickness: 2px;
}

.nz-media-trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* A video row whose editor picked a cover is drawn as a card: the picture at the
   16:9 frame the covers are cropped to, the title beside it and the play mark at
   the end of the row. A row without a cover keeps the text link above. */
.nz-media-trigger--poster {
  display: flex;
  width: 100%;
  /* The card stops before it turns into a wide empty strip: the picture, a
     title that wraps to two lines, and the play mark at the end of the row. */
  max-width: 720px;
  gap: 16px;
  padding: 10px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
}

.nz-media-trigger--poster:hover {
  border-color: var(--blue);
  text-decoration: none;
}

.nz-media-trigger__poster {
  position: relative;
  flex: none;
  width: 160px;
  border-radius: 2px;
  overflow: hidden;
}

.nz-media-trigger__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The title takes the rest of the row and stays centred on the picture. */
.nz-media-trigger__title {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}

@media (max-width: 650px) {
  .nz-media-trigger__poster {
    width: 112px;
  }
}

/* ---- The dialog --------------------------------------------------------- */
.nz-lightbox {
  flex-direction: column;
  width: min(1080px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue-deep);
  color: var(--white);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

/* Only an open dialog is laid out. A dialog that is not open is hidden by the
   browser's own `dialog:not([open]) { display: none }`; setting display on the
   closed state would leave the panel sitting in the page under its section. */
.nz-lightbox[open] {
  display: flex;
}

.nz-lightbox--video {
  width: min(960px, calc(100vw - 28px));
}

.nz-lightbox::backdrop {
  /* The footer's deep blue, so the dialog belongs to the same palette. */
  background: rgba(21, 44, 91, 0.74);
}

.nz-lightbox__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.nz-lightbox__caption,
.nz-lightbox__title {
  margin: 0;
  color: var(--blue-soft);
  font-size: 14px;
  line-height: 1.4;
}

.nz-lightbox__figure {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 200px;
  margin: 0;
  padding: 14px;
  overflow: auto;
}

.nz-lightbox__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 210px);
  border-radius: var(--radius);
}

.nz-lightbox__nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 14px 14px;
}

/* The stage is the player: a 16:9 frame, capped so a short window still
   shows the whole of it and the controls above it. */
.nz-lightbox--video .nz-lightbox__stage {
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 170px);
  min-height: 0;
  background: #000;
}

.nz-lightbox__stage iframe,
.nz-lightbox__stage video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.nz-lightbox__control {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.nz-lightbox__control:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

/* The panel is dark, so the blue focus ring a link uses would disappear on it. */
.nz-lightbox__control:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}