/* ═══ NW DRAWER ══════════════════════════════════════════════════════════════

   A right-side slide-out, shared by every gate. Chronicle built the first one

   as .source-viewer; this is that component with its content-specific naming

   taken out, so a Vietnam Wall name, a chronicle document and a THMS condition

   all open the same way.



   Two width states: open at 62%, expanded at 100%. The scrim dims what is

   behind and closes on click, because the thing behind is still where you are -

   you have not left the wall to read a man, he has come to stand beside you.



   Tokens come from the host gate. A gate that defines --nw-drawer-* uses its

   own; otherwise these fall back to neutral values that read on any surface.

   No colours are hardcoded here. */

.nw-drawer-scrim {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.55);

  z-index: 1099;

  opacity: 0;

  pointer-events: none;

  transition: opacity 300ms ease;

}

.nw-drawer-scrim.open { opacity: 1; pointer-events: auto; }

.nw-drawer {

  position: fixed;

  top: 0; right: 0; bottom: 0;

  width: 62%;

  max-width: 900px;

  z-index: 1100;

  display: flex;

  flex-direction: column;

  background: var(--nw-drawer-bg, #12130f);

  border-left: 1px solid var(--nw-drawer-rule, rgba(255,255,255,0.14));

  box-shadow: -24px 0 60px rgba(0,0,0,0.5);

  transform: translateX(100%);

  transition: transform 350ms cubic-bezier(0.4,0,0.2,1);

  visibility: hidden;

}

.nw-drawer.open { transform: translateX(0); visibility: visible; }

.nw-drawer.expanded { width: 100%; max-width: none; }

.nw-drawer-header {

  flex: 0 0 auto;

  padding: 22px 24px 18px;

  border-bottom: 1px solid var(--nw-drawer-rule, rgba(255,255,255,0.14));

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 16px;

}

.nw-drawer-eyebrow {

  font-family: var(--nw-drawer-mono, ui-monospace, monospace);

  font-size: 11px;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--nw-drawer-dim, rgba(255,255,255,0.45));

  margin-bottom: 8px;

}

.nw-drawer-title {

  font-family: var(--nw-drawer-display, Georgia, serif);

  font-size: clamp(1.25rem, 2.4vw, 1.75rem);

  font-weight: 700;

  line-height: 1.15;

  color: var(--nw-drawer-fg, #e8e4d9);

  margin: 0;

}

.nw-drawer-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.nw-drawer-btn {

  background: none;

  border: 1px solid var(--nw-drawer-rule, rgba(255,255,255,0.14));

  border-radius: 3px;

  cursor: pointer;

  width: 32px; height: 32px;

  display: flex; align-items: center; justify-content: center;

  color: var(--nw-drawer-fg, #e8e4d9);

  font-size: 18px;

  line-height: 1;

  transition: background 140ms ease;

}

.nw-drawer-btn:hover { background: var(--nw-drawer-rule, rgba(255,255,255,0.14)); }

.nw-drawer-body {

  flex: 1 1 auto;

  overflow-y: auto;

  padding: 24px;

  color: var(--nw-drawer-fg, #e8e4d9);

  line-height: 1.65;

}

/* A row of fact. Label left, value right, the way a record reads. */

.nw-drawer-row {

  display: grid;

  grid-template-columns: minmax(7rem, 30%) 1fr;

  gap: 4px 20px;

  padding: 9px 0;

  border-bottom: 1px solid var(--nw-drawer-rule, rgba(255,255,255,0.08));

}

.nw-drawer-row:last-child { border-bottom: none; }

.nw-drawer-label {

  font-family: var(--nw-drawer-mono, ui-monospace, monospace);

  font-size: 10px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--nw-drawer-dim, rgba(255,255,255,0.45));

  padding-top: 3px;

}

.nw-drawer-value { font-size: 0.9375rem; }

.nw-drawer-section {

  margin-top: 28px;

  padding-top: 20px;

  border-top: 1px solid var(--nw-drawer-rule, rgba(255,255,255,0.14));

}

.nw-drawer-section-title {

  font-family: var(--nw-drawer-display, Georgia, serif);

  font-size: 1.0625rem;

  font-weight: 700;

  margin: 0 0 12px;

  color: var(--nw-drawer-fg, #e8e4d9);

}

.nw-drawer-loading, .nw-drawer-error {

  padding: 40px 0;

  text-align: center;

  color: var(--nw-drawer-dim, rgba(255,255,255,0.45));

  font-size: 0.9375rem;

}

@media (max-width: 900px) {

  .nw-drawer { width: 100%; max-width: none; }

}



/* ── Theme ────────────────────────────────────────────────────────────────

   The drawer follows the gate. theme-init.js writes data-theme on the root

   before paint, so these resolve without a flash. A memorial read in daylight

   should not invert to black because the component was written at night. */

:root[data-theme="light"] {

    --nw-drawer-bg:   #f4f2ec;

    --nw-drawer-fg:   #1a1c1a;

    --nw-drawer-dim:  rgba(26,28,26,0.55);

    --nw-drawer-rule: rgba(26,28,26,0.14);

}

:root[data-theme="dark"] {

    --nw-drawer-bg:   #121310;

    --nw-drawer-fg:   #e8e4d9;

    --nw-drawer-dim:  rgba(232,228,217,0.5);

    --nw-drawer-rule: rgba(232,228,217,0.16);

}

:root { --nw-drawer-display: var(--sal-font-display, Georgia, serif); --nw-drawer-mono: var(--sal-font-mono, ui-monospace, monospace); }



/* The portrait or headstone, where one exists. A man with no photograph shows

   none - salute never substitutes a stand-in for a face. */

.nw-drawer-media { margin: 0 0 20px; }

.nw-drawer-media img {

    width: 100%;

    /* max-height removed: it overrode the 3/4 portrait ratio below. */

    object-fit: cover;

    object-position: top center;

    border-radius: 3px;

    border: 1px solid var(--nw-drawer-rule, rgba(255,255,255,0.14));

    display: block;

}

.nw-drawer-media-cap { font-size: 0.75rem; color: var(--nw-drawer-dim); margin-top: 6px; }



/* The full record, under the name where a visitor looks for it. */

.nw-drawer-more {

    display: inline-block;

    font-size: 0.8125rem;

    letter-spacing: 0.04em;

    color: var(--nw-drawer-fg);

    text-decoration: none;

    border-bottom: 1px solid var(--nw-drawer-rule);

    padding-bottom: 1px;

    margin-top: 8px;

}

.nw-drawer-more:hover { border-bottom-color: currentColor; }

.nw-drawer-note { font-size: 0.875rem; color: var(--nw-drawer-dim); margin: 0 0 12px; }


/* ── The frame ────────────────────────────────────────────────────────────
   Portrait, because a man is taller than he is wide and so is his headstone.
   Where there are several images the frame steps rather than showing the first
   and hiding the rest: 167 of these men have two and ten have three. */
.nw-drawer-media { position: relative; margin: 0 0 20px; }
.nw-drawer-slide { display: none; margin: 0; }
.nw-drawer-slide.is-current { display: block; }
.nw-drawer-slide img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 3px; border: 1px solid var(--nw-drawer-rule); display: block; }
.nw-drawer-slidenav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.nw-drawer-slidebtn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--nw-drawer-rule); background: none; color: var(--nw-drawer-fg); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nw-drawer-slidebtn:hover { background: var(--nw-drawer-rule); }
.nw-drawer-slidecount { font-family: var(--nw-drawer-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--nw-drawer-dim); }

/* The frame is a portrait, not a poster. An earlier max-height was removed to
   let the 3/4 ratio work and nothing replaced it, so the image took the full
   width of the drawer. This caps it. */
.nw-drawer-media { max-width: 300px; }