/* public/css/mobile/dcm.css
 * Dive Command Mobile (DCM) — standalone mobile shell styling.
 * Mobile-first, touch-friendly.
 *
 * RE-SKINNED to the SHARED web design system (ADR-030): the base palette,
 * brand color, and dark-mode flip now come from the web tokens, loaded in
 * head.ejs BEFORE this file:
 *   branding-css.ejs (--primary-color/--secondary-color/--accent-color +
 *   --cc13-*) → design-tokens.css (--ds-* light values + body.dark-mode
 *   overrides) → design-system.css (.ds-* primitives).
 * This file maps its existing --dcm-* vocabulary onto those tokens so mobile
 * renders LIGHT by default (white cards on #f9fafb, neutral white topbar,
 * brand on accents) and follows `body.dark-mode` automatically — matching the
 * web. The old invented dark palette (#181111 / navy) is retired.
 *
 * platform-chrome.css is intentionally NOT loaded here: its `body { background:
 * var(--primary-color) }` rule + rail/topbar layout are web-chrome only and
 * would paint the mobile body brand-red. The --cc13-* tokens dcm.css consumes
 * are already supplied by branding-css.ejs.
 */

:root {
  /* Base surfaces/text/borders → shared web semantic tokens (auto light/dark). */
  --dcm-bg: var(--ds-bg-page, #f9fafb);
  --dcm-surface: var(--ds-bg-surface, #ffffff);
  --dcm-surface-2: var(--ds-bg-surface-2, #f3f4f6);
  --dcm-border: var(--ds-border-subtle, #e5e7eb);
  --dcm-text: var(--ds-text-primary, #111111);
  --dcm-muted: var(--ds-text-muted, #6b7280);

  /* Page canvas — diagonal BRAND gradient, matching the web dive-logs look.
   * Built from the tenant branding tokens (branding-css.ejs) so it follows
   * admin branding changes; NOTHING hardcoded. White cards float on it. The
   * gradient is brand-token-derived, so it PERSISTS in dark mode (brand tokens
   * don't flip) — only the cards flip. --dcm-bg stays the neutral gray used for
   * card header/footer strips (NOT repointed to the gradient). */
  --dcm-page-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);

  /* Shared white-card recipe: white surface, 2px subtle border, 10px radius,
   * soft shadow — the dive-logs card look. */
  --dcm-card-radius: 10px;
  --dcm-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  /* Brand → tenant primary (branding-css.ejs). --dcm-on-brand stays
   * luminance-derived (branding-vars.ejs) for legible text on brand buttons. */
  --dcm-brand: var(--primary-color, #1877f2);
  --dcm-brand-press: var(--secondary-color, #166fe5);
  --dcm-brand-wash: var(--accent-color, #e7f3ff);
  --dcm-accent: var(--ds-brand-primary, var(--primary-color, #1877f2));
  --dcm-accent-press: var(--secondary-color, #166fe5);
  --dcm-danger: var(--ds-danger, #dc2626);

  /* Semantic status tokens — ONE canonical source for the module status/severity
   * chips (success/warning/info/danger). Base maps to the shared web semantic
   * token with a single canonical fallback; -wash is a low-opacity tint for chip
   * backgrounds (color-mix, same recipe the module chips build inline today).
   * These retire the divergent per-module fallbacks (#1f9d55/#b8860b/#d18b00…).
   * Phase 1 migrates the chip classes onto these; Phase 0 only DEFINES them. */
  --dcm-success: var(--ds-success, #1f9d55);
  --dcm-success-wash: color-mix(in srgb, var(--dcm-success) 14%, transparent);
  --dcm-warning: var(--ds-warning, #b45309);
  --dcm-warning-wash: color-mix(in srgb, var(--dcm-warning) 14%, transparent);
  --dcm-info: var(--ds-info, #1877f2);
  --dcm-info-wash: color-mix(in srgb, var(--dcm-info) 14%, transparent);
  --dcm-danger-wash: color-mix(in srgb, var(--dcm-danger) 14%, transparent);
  --dcm-orange: #c2410c;
  --dcm-orange-wash: color-mix(in srgb, var(--dcm-orange) 14%, transparent);
  --dcm-attention: #7c3aed;
  --dcm-attention-wash: color-mix(in srgb, var(--dcm-attention) 14%, transparent);

  --dcm-topbar-h: 56px;
  --dcm-bottomnav-h: 64px;

  /* platform-chrome.css's :root LIGHT --cc13 secondary palette isn't loaded on
   * mobile; branding-css.ejs only sets --cc13-ink/paper/border. Mirror the light
   * secondary tokens here so DCM light mode resolves them (parallels the
   * body.dark-mode --cc13 mirror below). Values copied from platform-chrome.css :root. */
  --cc13-ink-2:    #374151;
  --cc13-ink-3:    #6b7280;
  --cc13-paper-2:  #f9fafb;
  --cc13-paper-3:  #f3f4f6;
  --cc13-border-2: #d1d5db;
}

/* Dark mode — RE-DECLARE the neutral --dcm-* aliases inside the body.dark-mode
 * scope so they recompute against the dark --ds-* values. The :root aliases
 * above resolve var(--ds-*) against the LIGHT :root values and inherit as
 * light into the body subtree; body.dark-mode only overrides --ds-* on the
 * BODY, so the aliases must be re-bound here to flip. Brand tokens stay as-is.
 */
body.dark-mode {
  /* Mirror platform-chrome.css --cc13 dark palette; that sheet isn't loaded
   * on mobile, so branding-css.ejs's LIGHT --cc13-ink/paper/border :root
   * values never flipped here otherwise — leaving every mobile surface that
   * consumes --cc13-* (dive-logs embed, etc.) light-on-dark. Values copied
   * verbatim from platform-chrome.css's body.dark-mode block. */
  --cc13-ink:        #f1f5f9;
  --cc13-ink-2:      #cbd5e1;
  --cc13-ink-3:      #94a3b8;
  --cc13-paper:      color-mix(in srgb, var(--primary-color) 15%, #0a0a0a);
  --cc13-paper-2:    color-mix(in srgb, var(--primary-color) 8%,  #060606);
  --cc13-paper-3:    color-mix(in srgb, var(--primary-color) 22%, #1a1a1a);
  --cc13-border:     #334155;
  --cc13-border-2:   #475569;

  /* DIRECT dark values (not var(--ds-*)) so mobile dark text/bg/border stay
   * legible even when design-tokens.css / --cc13-* fail to resolve or serve
   * stale — dcm.css is SW-precached and self-contained. These equal the
   * --cc13-* dark values (ink #f1f5f9 / ink-3 #94a3b8 / border #334155 /
   * paper-2 near-black), so there is NO visual change vs the intended dark
   * palette. --dcm-bg uses the same branding-tinted near-black recipe as the
   * surfaces (var(--primary-color) is always present via branding-css). */
  --dcm-bg: color-mix(in srgb, var(--primary-color) 8%, #060606);
  --dcm-border: #334155;
  --dcm-text: #f1f5f9;
  --dcm-muted: #94a3b8;

  /* Card surfaces: match the web dive-logs page EXACTLY in dark mode. The
   * shared --ds-bg-surface darks are slate (#1e293b/#334155); the dive-logs
   * cards instead use the brand-TINTED near-black --cc13-paper family
   * (platform-chrome.css). Re-derive --dcm-surface/--dcm-surface-2 with the
   * IDENTICAL color-mix recipes so every mobile card/tile/strip lands on the
   * same RGB as the dive-logs cards. Branding-driven: the tint is
   * var(--primary-color), so this follows admin brand changes; the
   * #0a0a0a/#060606 bases are neutral near-blacks, not brand hex. */
  --dcm-surface: color-mix(in srgb, var(--primary-color) 15%, #0a0a0a);
  --dcm-surface-2: color-mix(in srgb, var(--primary-color) 8%, #060606);

  /* Lighten the semantic status tokens on dark surfaces — mirrors the web,
   * which swaps --ds-*-text to lighter tints in dark mode (#34d399/#fbbf24/
   * #60a5fa) so chips stay legible on the near-black --dcm-surface. The base
   * light values (#059669/#b45309/#1877f2) are too dark to read here. The
   * -wash tokens reference these bases via var(), so they re-tint automatically
   * and need no explicit dark rebind. --dcm-danger is left as-is to preserve
   * existing danger rendering (Phase 0 is additive). */
  --dcm-success: var(--ds-success-text, #34d399);
  --dcm-warning: var(--ds-warning-text, #fbbf24);
  --dcm-info: var(--ds-info-text, #60a5fa);
  --dcm-orange: #fb923c;
  --dcm-attention: #a78bfa;
}

* { box-sizing: border-box; }

/* The page background lives on BODY only — NOT html. html is left transparent
 * so BODY's brand gradient propagates to the viewport canvas (the full
 * scrollable area) per the CSS root-background rule. The gradient is built from
 * the brand tokens (--primary-color/--secondary-color), which do NOT flip in
 * dark mode, so painting it on <body> keeps full-page coverage in BOTH light
 * and dark mode (dark mode only flips the white cards, not the gradient). Body-
 * only background also avoids the prior bug where painting html resolved a
 * neutral alias against the LIGHT :root and left the below-the-fold canvas
 * wrong. */
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--dcm-page-gradient);
  background-attachment: fixed;
  color: var(--dcm-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Shared white-card recipe (M2 consolidation). Padding/margin stay on the
 * consuming class (they vary per use). Modifiers cover the edge/tap variants.
 * Defined BEFORE all consumers so a per-use override that stays on a class
 * (e.g. .dcm-alert's inline danger border-left) wins by source order, and the
 * edge modifiers (defined right after the base) win over the base 4-side
 * border. --danger-edge/--warn-edge are reserved: the alert family keeps its
 * inline left edge to protect its --warn/--danger/--info override chain. */
.dcm-card {
  background: var(--dcm-surface);
  border: 2px solid var(--dcm-border);
  border-radius: var(--dcm-card-radius);
  box-shadow: var(--dcm-card-shadow);
}
.dcm-card--tappable:active { background: var(--dcm-surface-2); }
.dcm-card--accent-edge { border-left: 4px solid var(--dcm-accent); }
.dcm-card--danger-edge { border-left: 4px solid var(--dcm-danger); }
.dcm-card--warn-edge   { border-left: 4px solid var(--dcm-warning); }

/* Shared section-label base (M2 consolidation). Only the bold-uppercase pair is
 * common across the divergent section labels (.dcm-attn__label sits WHITE on the
 * brand gradient; .dcm-mem__info-section / .dcm-form__section are muted). Each
 * variant keeps its own margin/font-size/letter-spacing/color. */
.dcm-section-label { font-weight: 700; text-transform: uppercase; }

/* ---------- Login ---------- */

/* Centered login on the brand gradient (matching the web dive-logs look): the
 * lead-in logo/org sits directly on the gradient (white text for contrast) and
 * the form is a floating white card. Content is vertically centered with a
 * sensible max-width and safe-area insets respected. */
.dcm-login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding:
    max(32px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

/* Centered logo + org name lead-in (replaces the old brand band). */
.dcm-login__brand {
  text-align: center;
  margin-bottom: 20px;
}

.dcm-login__logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  /* On the brand gradient — white for contrast (text fallback when no logo). */
  color: #fff;
}

.dcm-login__logo-img {
  display: block;
  max-width: 200px;
  max-height: 88px;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.dcm-login__org {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  /* Now inside the white card — use the card text color (legible light + dark). */
  color: var(--dcm-text);
}

/* The form sits in a floating WHITE card on the brand gradient (dive-logs look):
 * white surface, 2px subtle border, 10px radius, soft shadow. Centered, single
 * column, capped width. */
.dcm-login__card {
  width: 100%;
  max-width: 360px;
  padding: 24px 20px;
}

/* The shared-device roster needs more room than the personal form column. */
.dcm-shared .dcm-login__card {
  max-width: 460px;
}

.dcm-field { margin-bottom: 16px; }

.dcm-field label {
  display: block;
  font-size: 13px;
  color: var(--dcm-muted);
  margin-bottom: 6px;
}

.dcm-input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-size: 17px;
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
  border-radius: 12px;
  outline: none;
}

.dcm-input:focus { border-color: var(--dcm-accent); }

.dcm-btn {
  display: block;
  width: 100%;
  height: 54px;
  font-size: 17px;
  font-weight: 600;
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.dcm-btn:active { background: var(--dcm-accent-press); }

/* Google sign-in button (link styled as a button) */
.dcm-btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin-bottom: 16px;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid var(--dcm-border);
  text-decoration: none;
}

.dcm-btn--google:active { background: #f1f3f4; }

.dcm-btn__g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 700;
  color: #4285f4;
  background: #fff;
  border-radius: 50%;
}

/* "or" divider between Google and the password form */
.dcm-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  color: var(--dcm-muted);
  font-size: 13px;
}

.dcm-divider::before,
.dcm-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--dcm-border);
}

/* Google-primary mode: small muted hint under the prominent Google button. */
.dcm-login__hint {
  margin: 0 0 20px;
  text-align: center;
  font-size: 12px;
  color: var(--dcm-muted);
}

/* Secondary / collapsible username+password affordance (google_primary).
 * Understated: the summary reads as a centered muted link, no disclosure
 * triangle, with the fields revealed below on expand. */
.dcm-login__secondary {
  margin-top: 4px;
}

.dcm-login__secondary-toggle {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: var(--dcm-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

/* Remove the default disclosure triangle across engines. */
.dcm-login__secondary-toggle::-webkit-details-marker { display: none; }
.dcm-login__secondary-toggle::marker { content: ''; }

.dcm-login__secondary-toggle:hover { color: var(--dcm-text); }

.dcm-login__secondary[open] .dcm-login__secondary-toggle {
  color: var(--dcm-text);
}

.dcm-login__secondary > form {
  margin-top: 16px;
}

.dcm-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 14px;
  color: #fff;
  background: var(--dcm-danger);
  border-radius: 10px;
}

/* ---------- Shared-tablet login (roster + PIN keypad) ---------- */

.dcm-shared__device {
  margin-top: 6px;
  font-size: 13px;
  color: var(--dcm-muted);
}

.dcm-roster__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.dcm-roster__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 480px) {
  .dcm-roster__grid { grid-template-columns: repeat(3, 1fr); }
}

.dcm-roster__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 120px;
  padding: 16px 8px;
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
  border-radius: 14px;
  cursor: pointer;
}

.dcm-roster__tile:active { background: var(--dcm-surface); }

.dcm-roster__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.dcm-roster__name {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* PIN keypad */
.dcm-pinpad { text-align: center; }

.dcm-pinpad__back {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 6px 4px;
  font-size: 15px;
  color: var(--dcm-accent);
  background: none;
  border: none;
  cursor: pointer;
}

.dcm-pinpad__who {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.dcm-pinpad__prompt {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--dcm-muted);
}

.dcm-pinpad__dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.dcm-pinpad__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--dcm-border);
  background: transparent;
}

.dcm-pinpad__dot.is-filled {
  background: var(--dcm-accent);
  border-color: var(--dcm-accent);
}

.dcm-pinpad__error {
  min-height: 20px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--dcm-danger);
}

.dcm-pinpad__keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}

.dcm-pinpad__key {
  height: 64px;
  font-size: 24px;
  font-weight: 600;
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
  border-radius: 12px;
  cursor: pointer;
}

.dcm-pinpad__key:active { background: var(--dcm-surface); }

.dcm-pinpad__key--blank {
  background: none;
  border: none;
  cursor: default;
}

.dcm-pinpad__key--del { font-size: 22px; }

/* ---------- Shell ---------- */

.dcm-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.dcm-topbar {
  position: sticky;
  top: 0;
  height: calc(var(--dcm-topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  /* Neutral chrome — white surface, matching the web. Tenant identity lives in
   * the logo + brand-colored accents, NOT a brand-red band. */
  background: var(--dcm-surface);
  color: var(--dcm-text);
  border-bottom: 1px solid var(--dcm-border);
  z-index: 10;
}

/* Logo + title compose a single HOME button (tap → Work launcher). Button
 * reset so it looks identical at rest to the old logo+title; a negative left
 * margin cancels its own tap padding so the logo stays flush at the topbar's
 * 16px inset. */
.dcm-topbar__home {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 6px;
  margin-left: -6px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}

.dcm-topbar__home:active { background: var(--dcm-surface-2); }

.dcm-topbar__logo {
  height: 28px;
  width: auto;
  margin-right: 8px;
}

.dcm-topbar__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dcm-text);
}

.dcm-topbar__org {
  margin-left: 8px;
  font-size: 13px;
  color: var(--dcm-muted);
}

/* Sign out — right-aligned, touch-friendly, neutral chrome. */
.dcm-signout {
  margin: 0 0 0 auto;
}

.dcm-signout__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
  border-radius: 10px;
  cursor: pointer;
}

.dcm-signout__btn:active {
  background: var(--dcm-border);
}

.dcm-signout__icon { font-size: 18px; line-height: 1; }

/* Content area sits directly on the brand gradient, so its OWN text defaults to
 * white for contrast. White cards inside re-assert dark --dcm-text on their own
 * wrappers, so card content stays dark-on-white. */
.dcm-main {
  flex: 1;
  padding: 20px 16px calc(env(safe-area-inset-bottom) + 20px);
  color: #fff;
}

.dcm-welcome {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}

.dcm-note {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}


/* Install prompt (login/landing) — Slice 1.5 */
.dcm-install {
  margin: 24px auto 0;
  max-width: 360px;
  padding: 16px;
}

.dcm-install__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dcm-text);
  margin-bottom: 6px;
}

.dcm-install__text {
  font-size: 13px;
  color: var(--dcm-muted);
  margin: 0 0 12px;
}

.dcm-install__btn { width: 100%; }

.dcm-install__help {
  font-size: 13px;
  color: var(--dcm-muted);
  margin: 12px 0 0;
}

.dcm-install__ios {
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

/* Prominent above-the-fold banner variant — post-login home (shell) */
.dcm-install--banner {
  margin: 0 0 16px;
  max-width: none;
  border: 2px solid var(--dcm-accent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--dcm-accent) 22%, transparent);
}

.dcm-install--banner .dcm-install__title { font-size: 17px; }

.dcm-install--banner .dcm-install__btn {
  font-size: 16px;
  font-weight: 600;
  padding: 14px;
}

/* ---------- Tabs / Profile / Work (real nav) ---------- */

.dcm-tab { display: block; }
.dcm-tab[hidden] { display: none; }

.dcm-profile { display: block; }

/* Page-level loading copy sits on the gradient — light for contrast. */
.dcm-loading {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.dcm-profile .dcm-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dcm-text);
  background: var(--dcm-surface);
  border: 2px solid var(--dcm-border);
  border-radius: var(--dcm-card-radius);
  box-shadow: var(--dcm-card-shadow);
}

.dcm-retry {
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.dcm-retry:active { background: var(--dcm-accent-press); }

/* Shared initial-avatar base (M2 consolidation). Size/color/margin diverge per
 * use, so they live on the --sm/--md/--lg modifiers; the base holds only the
 * shared flex-centered round shape + bold weight. --lg reproduces the former
 * 64px profile .dcm-avatar EXACTLY (incl. var(--dcm-brand) background, NOT
 * --accent). --md = the 56px roster initial (accent bg). --sm = the 40px
 * membership initial (accent-tint bg). The PHOTO variant .dcm-roster__avatar
 * (an <img>, object-fit:cover) is a separate purpose and is NOT merged here. */
.dcm-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}
.dcm-avatar--sm {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  font-size: 14px;
  background: color-mix(in srgb, var(--dcm-accent) 16%, var(--dcm-surface));
  color: var(--dcm-accent);
}
.dcm-avatar--md {
  width: 56px;
  height: 56px;
  font-size: 24px;
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
}
.dcm-avatar--lg {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  font-size: 24px;
  color: var(--dcm-on-brand);
  background: var(--dcm-brand);
}

.dcm-profile__name {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.dcm-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Left-aligned chip flow for the full-profile Permissions & Roles section. */
.dcm-chips--left {
  justify-content: flex-start;
  margin-bottom: 0;
}

.dcm-chip {
  padding: 4px 12px;
  font-size: 13px;
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
  border-radius: 999px;
}

/* Canonical status/severity badges — ONE set, M0-token-driven. Emitted as
 * class="dcm-chip dcm-chip--{variant}"; the badge shape here overrides the
 * neutral .dcm-chip base above. Replaces the per-module status/sev/stage/elig
 * chip families (M1 consolidation). Dark-safe: the M0 tokens lighten in dark. */
.dcm-chip--neutral,
.dcm-chip--success,
.dcm-chip--warning,
.dcm-chip--orange,
.dcm-chip--attention,
.dcm-chip--danger,
.dcm-chip--info,
.dcm-chip--accent {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border: none;
  border-radius: 999px;
  white-space: nowrap;
}
.dcm-chip--neutral { background: var(--dcm-surface-2); color: var(--dcm-muted); }
.dcm-chip--success { background: var(--dcm-success-wash); color: var(--dcm-success); }
.dcm-chip--warning { background: var(--dcm-warning-wash); color: var(--dcm-warning); }
.dcm-chip--orange  { background: var(--dcm-orange-wash);  color: var(--dcm-orange); }
.dcm-chip--attention { background: var(--dcm-attention-wash); color: var(--dcm-attention); }
.dcm-chip--danger  { background: var(--dcm-danger-wash);  color: var(--dcm-danger); }
.dcm-chip--info    { background: var(--dcm-info-wash);    color: var(--dcm-info); }
.dcm-chip--accent  { background: color-mix(in srgb, var(--dcm-accent) 14%, transparent); color: var(--dcm-accent); }

.dcm-badge {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--dcm-text);
}

.dcm-alert {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dcm-text);
  border-left: 4px solid var(--dcm-danger);
}

.dcm-alert ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.dcm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}

.dcm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
}

.dcm-stat__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--dcm-text);
}

.dcm-stat__label {
  font-size: 12px;
  color: var(--dcm-muted);
  text-align: center;
}

.dcm-stat__sub {
  font-size: 11px;
  color: var(--dcm-muted);
  text-align: center;
}

/* ----- Profile HOME tiers (rebuild) ----- */

/* Tier 1: identity — white card on the gradient. */
.dcm-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 16px;
  padding: 16px;
}

.dcm-id__badge {
  margin: 0 0 8px;
  text-align: center;
}

.dcm-id__team { margin: 0; }

/* Tier 2: attention */
.dcm-attn {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 16px;
}

.dcm-attn__clear {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dcm-muted);
  text-align: center;
}

/* Section label sits directly on the gradient — light for contrast. */
.dcm-attn__label {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}

.dcm-attn__ops {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dcm-attn__op {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  text-align: left;
  color: var(--dcm-text);
  cursor: pointer;
  position: relative;
}

.dcm-attn__op-title {
  font-size: 15px;
  font-weight: 600;
  padding-right: 20px;
}

.dcm-attn__op-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--dcm-muted);
}

.dcm-attn__op-go {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--dcm-muted);
}

.dcm-attn__sub,
.dcm-attn__when { color: var(--dcm-muted); font-weight: 400; }

.dcm-attn__sub { display: block; margin-top: 4px; font-size: 13px; }

/* Alert variants reuse .dcm-alert; tweak the accent edge. */
.dcm-alert--warn { border-left-color: var(--dcm-warning, #d18b00); }
.dcm-alert--danger { border-left-color: var(--dcm-danger); }
.dcm-alert--info { border-left-color: var(--dcm-accent); }

/* Tier 3: two-up compact stats */
.dcm-stats--two { grid-template-columns: repeat(2, 1fr); }

.dcm-btn-secondary {
  display: block;
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dcm-text);
  cursor: pointer;
}

/* Profile settings block (dark-mode toggle lives here). */
.dcm-settings { margin-top: 12px; }

/* Pressed state for the dark-mode toggle reads as brand-accented. */
.dcm-btn-secondary[aria-pressed='true'] {
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
  border-color: var(--dcm-accent);
}

.dcm-section-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
}

.dcm-launcher {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dcm-launcher[hidden] { display: none; }

.dcm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
  padding: 16px 8px;
  color: var(--dcm-text);
  cursor: pointer;
}

.dcm-tile__icon { font-size: 30px; line-height: 1; }

.dcm-tile__label {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* Empty/placeholder copy sits on the gradient — light for contrast. */
.dcm-empty {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.dcm-placeholder[hidden] { display: none; }

/* Back affordance on the gradient — white for contrast (not brand accent, which
 * would be low-contrast against the brand gradient). */
.dcm-back {
  padding: 8px 4px;
  font-size: 15px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

.dcm-placeholder__text {
  margin: 12px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Operations list (slice 2a) ---------- */

.dcm-ops__toggle {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  padding: 4px;
}

.dcm-ops__seg {
  flex: 1;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dcm-muted);
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}

.dcm-ops__seg[aria-current='true'] {
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
}

.dcm-ops__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dcm-ops__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 14px;
  text-align: left;
  color: var(--dcm-text);
  cursor: pointer;
}

.dcm-ops__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dcm-ops__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.dcm-ops__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--dcm-muted);
}

.dcm-ops__badge {
  flex: none;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 999px;
}

.dcm-ops__badge--active {
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
}

.dcm-ops__badge--completed {
  color: var(--dcm-text);
  background: var(--dcm-surface);
  border: 1px solid var(--dcm-border);
}

.dcm-ops__badge--cancelled {
  color: #fff;
  background: var(--dcm-danger);
}

.dcm-ops__empty {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

/* Home "Open Operations" pinned section (homeOpenOps.js) — sits above the
 * launcher tile grid. Reuses .dcm-card / .dcm-ops__* primitives; only the
 * section wrapper, title and action row are bespoke. Base wrapper sets NO
 * `display` so the `hidden` attribute (UA display:none) still governs
 * visibility. */
.dcm-open-ops {
  grid-column: 1 / -1;
  margin-bottom: 16px;
}
.dcm-open-ops__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dcm-muted);
}
.dcm-open-ops__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dcm-open-ops__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  color: var(--dcm-text);
}
.dcm-open-ops__line {
  font-size: 13px;
  color: var(--dcm-muted);
}
.dcm-open-ops__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.dcm-open-ops__btn {
  flex: 1 1 0;
}
.dcm-open-ops__btn--done {
  opacity: 0.7;
}

.dcm-placeholder .dcm-error,
.dcm-placeholder .dcm-loading {
  margin-top: 12px;
}

.dcm-placeholder .dcm-error {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dcm-text);
  background: var(--dcm-surface);
  border: 2px solid var(--dcm-border);
  border-radius: var(--dcm-card-radius);
  box-shadow: var(--dcm-card-shadow);
}

/* ---------- Operation detail (slice 2b) ---------- */

.dcm-det__header {
  margin: 0 0 16px;
  padding: 16px;
}

.dcm-det__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dcm-det__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.dcm-det__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dcm-det__meta-row {
  display: flex;
  gap: 10px;
  font-size: 14px;
}

.dcm-det__meta-label {
  flex: none;
  width: 84px;
  color: var(--dcm-muted);
}

.dcm-det__meta-value {
  flex: 1;
  color: var(--dcm-text);
  word-break: break-word;
}

.dcm-det__desc {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--dcm-border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--dcm-text);
  white-space: pre-wrap;
}

/* section tile grid — launcher-style, replaces the old `.ds-tabs` strip */
.dcm-det__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.dcm-det__tile {
  position: relative;
  min-height: 88px;
}

.dcm-det__tile-icon { font-size: 28px; line-height: 1; }

.dcm-det__tile-label {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.dcm-det__tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
  border-radius: 11px;
}

/* section view — the chosen tile's content fills the screen below Back */
.dcm-det__section-title {
  margin: 8px 0 16px;
  font-size: 18px;
  font-weight: 700;
}

/* overview / scene-map stat grid */
.dcm-det__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}

.dcm-det__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
}

.dcm-det__stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--dcm-text);
}

.dcm-det__stat-label {
  font-size: 11px;
  color: var(--dcm-muted);
  text-align: center;
}

/* definition cards (location / conditions / command / narrative / scene lists) */
.dcm-det__card {
  margin: 0 0 16px;
  padding: 14px 16px;
}

.dcm-det__card-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.dcm-det__def-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  border-top: 1px solid var(--dcm-border);
}

.dcm-det__def-row:first-of-type { border-top: none; }

.dcm-det__def-label {
  flex: none;
  width: 120px;
  color: var(--dcm-muted);
}

.dcm-det__def-value {
  flex: 1;
  color: var(--dcm-text);
  word-break: break-word;
}

.dcm-det__narr {
  padding: 8px 0;
  border-top: 1px solid var(--dcm-border);
}

.dcm-det__narr:first-of-type { border-top: none; }

.dcm-det__narr-meta {
  font-size: 12px;
  color: var(--dcm-muted);
  margin-bottom: 4px;
}

.dcm-det__narr-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dcm-text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Section-level helper note sits on the gradient — light for contrast. */
.dcm-det__note-info {
  margin: 0 0 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}

/* activities stat cards */
.dcm-det__act-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dcm-det__act-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 14px;
  color: var(--dcm-text);
  cursor: pointer;
}

.dcm-det__act-card:active { background: var(--dcm-surface-2); }
.dcm-det__act-card--static { cursor: default; }
.dcm-det__act-card--static:active { background: var(--dcm-surface); }

.dcm-det__act-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.dcm-det__act-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--dcm-muted);
}

.dcm-det__act-line span:last-child { color: var(--dcm-text); font-weight: 600; }

.dcm-det__act-detail { margin-top: 16px; }

/* media grid */
.dcm-det__media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dcm-det__media-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}

.dcm-det__media-img,
.dcm-det__media-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--dcm-surface);
}

.dcm-det__media-icon {
  font-size: 28px;
  font-weight: 700;
  color: var(--dcm-muted);
}

.dcm-det__media-name {
  padding: 4px 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--dcm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dcm-det__media-type {
  padding: 0 6px 6px;
  font-size: 11px;
  color: var(--dcm-muted);
}

/* report cards */
.dcm-det__report {
  padding: 12px 14px;
}

.dcm-det__report-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.dcm-det__report-dl {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dcm-on-brand);
  background: var(--dcm-brand);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.dcm-det__report-dl:active { background: var(--dcm-accent-press); }

.dcm-det__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dcm-det__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  text-align: left;
  color: var(--dcm-text);
  cursor: pointer;
}

.dcm-det__item:active { background: var(--dcm-surface-2); }

.dcm-det__item--static { cursor: default; }
.dcm-det__item--static:active { background: var(--dcm-surface); }

.dcm-det__item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dcm-det__item-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.dcm-det__item-meta {
  font-size: 13px;
  color: var(--dcm-muted);
}

.dcm-det__note {
  padding: 12px 14px;
  background: var(--dcm-surface);
  border: 2px solid var(--dcm-border);
  border-radius: var(--dcm-card-radius);
  box-shadow: var(--dcm-card-shadow);
}

.dcm-det__note-text {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dcm-text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Section-level empty copy sits on the gradient — light for contrast. */
.dcm-det__empty {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.dcm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  transform: translateX(-50%);
  max-width: 80%;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--dcm-on-brand);
  background: var(--dcm-brand);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 20;
}

/* ---------- Operations list header + create (slice 2c) ---------- */

.dcm-ops__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.dcm-ops__heading { margin: 0; }

.dcm-ops__new {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--dcm-on-brand);
  background: var(--dcm-accent);
  border: 1px solid var(--dcm-accent);
  border-radius: 10px;
  cursor: pointer;
}

.dcm-ops__new:active { background: var(--dcm-accent-press); }

.dcm-ops__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.dcm-ops__gear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0 8px;
  font-size: 18px;
  line-height: 1;
  background: var(--dcm-surface-2, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--dcm-border, rgba(255, 255, 255, 0.18));
  border-radius: 10px;
  cursor: pointer;
}

.dcm-ops__gear:active { background: var(--dcm-surface-3, rgba(255, 255, 255, 0.16)); }

/* ---------- Operation create form ---------- */

/* The create form is a white card on the gradient (dive-logs look) so its
 * labels/fields read dark-on-white. */
.dcm-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
}

.dcm-form__group {
  display: flex;
  flex-direction: column;
}

/* Form field label — dark on the white form card. */
.dcm-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--dcm-muted);
}

.dcm-form__req { color: var(--dcm-danger); }

.dcm-textarea {
  height: auto;
  min-height: 84px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.dcm-form__preview {
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px dashed var(--dcm-border);
  border-radius: 12px;
  word-break: break-word;
}

.dcm-form__error {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dcm-text);
  background: var(--dcm-surface);
  border: 1px solid var(--dcm-danger);
  border-radius: 10px;
}

.dcm-form__error[hidden] { display: none; }

.dcm-form__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.dcm-form__actions .dcm-btn { flex: 1; }

.dcm-btn--ghost {
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
}

.dcm-btn--ghost:active { background: var(--dcm-surface); }

/* Training compliance / coverage bar (multi-segment) */
.dcm-train__bar {
  display: inline-flex;
  flex: 0 0 auto;
  width: 72px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--dcm-surface-2);
}
.dcm-train__seg { height: 100%; }
.dcm-train__seg--current { background: var(--dcm-success); }
.dcm-train__seg--expiring { background: var(--dcm-warning); }
.dcm-train__seg--expired { background: var(--dcm-danger); }

/* Native admin card header (shared via window.DCMAdminHeader) */
.dcm-admin-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
}
.dcm-admin-head__back {
  flex: none;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dcm-text);
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
  border-radius: 8px;
  cursor: pointer;
}
.dcm-admin-head__back:active { background: var(--dcm-surface); }
.dcm-admin-head__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--dcm-text);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Right-aligned action slot (New / gear / etc.). margin-left:auto keeps it on
 * the right even if the title does not consume the free space. Reuses the
 * existing .dcm-ops__new / .dcm-ops__gear button styling for identical look. */
.dcm-admin-head__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Secondary action bar — a top-bar-styled strip of section actions pinned to the
 * top of a section body (e.g. Personnel: self check-in + add). Pair with
 * .dcm-card for the surface/border/radius so it matches .dcm-admin-head. Theme
 * tokens keep it dark-mode aware. Buttons render inline + compact. */
.dcm-actionbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 16px;
}
.dcm-actionbar .dcm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

/* Branding — logo reference + color-scheme swatches */
.dcm-brand-logo {
  display: block;
  max-height: 64px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 8px;
  margin-bottom: 6px;
  background: var(--dcm-surface-2);
  border: 1px solid var(--dcm-border);
  border-radius: 8px;
}
.dcm-brand-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.dcm-brand-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 76px;
  padding: 12px 16px;
  background: transparent;
  border: 2px solid var(--dcm-border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--dcm-text);
  font-size: 13px;
  font-weight: 600;
}
.dcm-brand-swatch[aria-checked="true"] {
  border-color: var(--dcm-brand);
  background: var(--dcm-surface-2);
}
.dcm-brand-swatch__chip {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}