/* ============================================================================
   METABOX — single source of truth.
   Canonical CSS for the definition-list metadata box (.metabox + title + rows)
   used on document detail pages. Self-contained on the token model: light
   default + dark revalue of --metabox-bg, rules in @layer components. Shared by
   comp-metabox.html and any future consumer. Import AFTER colors_and_type.css
   (+ _chips.css for the doc-type / classification chips).

   VALUES reuse the catalogue-card visual vocabulary: the doc-type chip
   (.dc-chip), the classification chip (.cchip, with its --active treatment on
   row hover), the mono code (.mb-code, = doc-card .num) and the edition/version
   pill (.mb-pill / --am, = doc-card .pill but with EXPANDED wording). LABELS
   carry a leading bootstrap-icon. Single source — edit here, not the page.
   ============================================================================ */

/* Metabox tokens — dark is a co-located token revalue (notes/architecture.md).
   Metabox CONTAINS shared chips (it doesn't restyle the chip base, it only adds
   the row-hover --active treatment by specificity within @layer components), so
   its rules are wrapped in @layer components. */
@layer tokens { :root { --metabox-bg: #ffffff; } }
@layer theme  { [data-theme="dark"] { --metabox-bg: var(--color-bg-subtle); } }

@layer components {

.metabox {
  background: var(--metabox-bg);
  color: var(--color-fg-default);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  overflow: hidden;
}
.metabox h3 {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-fg-secondary);
  padding: 12px 20px; margin: 0;
  border-bottom: 1px solid var(--color-border-default);
}
.metabox dl { display: flex; flex-direction: column; margin: 0; }
.metabox__row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  align-items: baseline; gap: 16px;
  padding: 11px 20px;
  border-top: 1px solid var(--color-border-default);
  transition: background 0.12s ease;
}
.metabox__row:first-child,
.metabox h3 + dl .metabox__row:first-child { border-top: 0; }
.metabox__row:hover,
.metabox__row[data-state~="hover"] { background: var(--gov-color-primary-50); }

/* ── Label (dt) — icon + text ────────────────────────────────────────────
   The icon rides the label baseline; align-items:baseline on the row keeps the
   first value line level with the label text. */
.metabox dt {
  margin: 0; min-width: 0;
  font-size: 12.5px; color: var(--color-fg-secondary);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.metabox dt i {
  flex: none; width: 15px;
  font-size: 13px; line-height: 1;
  color: var(--color-fg-tertiary);
  position: relative; top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Value (dd) — base text + chip / pill / code variants ────────────────── */
.metabox dd {
  margin: 0; min-width: 0;
  font-size: 14px; color: var(--color-fg-default);
}

/* Type row: doc-type chip + expanded descriptive name. */
.metabox dd.mb-typeval { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.metabox dd.mb-typeval .mb-typeval__name { font-size: 13.5px; color: var(--color-fg-default); }

/* Date — tabular, slightly smaller (matches doc-card meta). */
.metabox dd.date-val {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Code — the catalogue-card .num treatment (mono, semibold, tabular). */
.metabox .mb-code {
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  color: var(--color-fg-default); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Edition / version — the catalogue-card .pill treatment, but EXPANDED
   wording (the descriptor word is muted, the figure stays full ink). */
.metabox .mb-pillrow { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.metabox .mb-pill {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  color: var(--color-fg-secondary);
  background: var(--gov-color-neutral-100);
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metabox .mb-pill .abbr { color: var(--gov-color-neutral-500); font-weight: 400; }
.metabox .mb-pill--am { background: var(--gov-color-warning-50); color: var(--gov-color-warning-700); }
.metabox .mb-pill--am .abbr { color: var(--gov-color-warning-700); opacity: 0.65; }

/* ── Chips inside values adopt their --active treatment on row hover ──────
   Mirrors the catalogue card: the classification chip gains its active
   background/border; the (always-filled) doc-type chip takes the dark-only
   inset border (the vivid light fill needs none). Specificity within the
   shared @layer components beats the chip base. */
.metabox__row:is(:hover, [data-state~="hover"]) .cchip.cchip--neozn { background: var(--gov-color-neutral-100); color: var(--gov-color-neutral-800); border-color: var(--gov-color-neutral-300); }
.metabox__row:is(:hover, [data-state~="hover"]) .cchip.cchip--nu    { background: var(--gov-color-warning-100); color: var(--gov-color-warning-700); border-color: var(--gov-color-warning-500); }
.metabox__row:is(:hover, [data-state~="hover"]) .cchip.cchip--nr,
.metabox__row:is(:hover, [data-state~="hover"]) .cchip.cchip--nc    { background: var(--gov-color-error-100);   color: var(--gov-color-error-700);   border-color: var(--gov-color-error-500); }

/* Validity + availability chips take their _chips.css --active treatment on
   row hover too (they were missing it — only cchip/dc-chip had it). Same
   declarations as .vchip--active.* / .achip--active.*. */
.metabox__row:is(:hover, [data-state~="hover"]) .vchip.v-valid    { background: var(--gov-color-success-100); color: var(--gov-color-success-700); border-style: solid; border-color: var(--gov-color-success-500); }
.metabox__row:is(:hover, [data-state~="hover"]) .vchip.v-replaced { background: var(--gov-color-warning-100); color: var(--gov-color-warning-700); border-style: solid; border-color: var(--gov-color-warning-500); }
.metabox__row:is(:hover, [data-state~="hover"]) .vchip.v-invalid  { background: var(--gov-color-neutral-200); color: var(--gov-color-neutral-800); border-style: solid; border-color: var(--gov-color-neutral-400); }
.metabox__row:is(:hover, [data-state~="hover"]) .vchip.v-draft    { background: var(--gov-color-neutral-100); color: var(--gov-color-neutral-700); border-style: dashed; border-color: var(--gov-color-neutral-400); }
.metabox__row:is(:hover, [data-state~="hover"]) .achip.a-public     { background: var(--gov-color-success-100); color: var(--gov-color-success-700); border-style: solid; border-color: var(--gov-color-success-500); }
.metabox__row:is(:hover, [data-state~="hover"]) .achip.a-login      { background: var(--gov-color-info-100);    color: var(--gov-color-info-700);    border-style: solid; border-color: var(--gov-color-info-500); }
.metabox__row:is(:hover, [data-state~="hover"]) .achip.a-controlled { background: var(--gov-color-warning-100); color: var(--gov-color-warning-700); border-style: solid; border-color: var(--gov-color-warning-500); }
.metabox__row:is(:hover, [data-state~="hover"]) .achip.a-metadata   { background: var(--gov-color-neutral-200); color: var(--gov-color-neutral-700); border-style: solid; border-color: var(--gov-color-neutral-400); }

body[data-theme="dark"] .metabox__row:is(:hover, [data-state~="hover"]) .dc-chip--cos     { box-shadow: inset 0 0 0 1px #98c0e8; }
body[data-theme="dark"] .metabox__row:is(:hover, [data-state~="hover"]) .dc-chip--stanag  { box-shadow: inset 0 0 0 1px #cdd4dc; }
body[data-theme="dark"] .metabox__row:is(:hover, [data-state~="hover"]) .dc-chip--stanrec { box-shadow: inset 0 0 0 1px #c8b9e0; }
body[data-theme="dark"] .metabox__row:is(:hover, [data-state~="hover"]) .dc-chip--ap      { box-shadow: inset 0 0 0 1px #a8d2c4; }

@media (max-width: 640px) {
  .metabox__row { grid-template-columns: 1fr; gap: 4px; }
}

} /* end @layer components — metabox */

/* ── Density-pinned variant — deliberately OUTSIDE @layer ──────────────
   The combined-Tweaks override sheets are unlayered and re-pad .metabox__row
   per the global table density; a page that PINS its metabox to the
   comfortable tier (the document detail — user-decided) must win over them.
   Values = FP_TWEAKS_CSS.METABOX_DENSITY.comfortable. */
.metabox--comfort .metabox__row { padding: 12px 20px; }
.metabox--comfort dt { font-size: 12.5px; }
.metabox--comfort dd { font-size: 14px; }