/*
 * dex-license.css — reusable Tepna license / attribution stamp styles
 * Copyright 2026 Michal Planicka
 * SPDX-License-Identifier: Apache-2.0
 *
 * Drop-in, self-contained stamps for every Tepna file. Class-prefixed `dxl-`
 * to avoid collisions with ans-design.css. Reads the suite design tokens when
 * present (var(--surface) etc.) and falls back to hard-coded values so the
 * stamps render correctly even in static docs that don't load the design
 * system. Fonts: SYSTEM monospace only — no bundled / CDN font.
 *
 * Variants:  .dxl-sidebar  (sidebar foot)   ·  .dxl-ribbon (full-width foot)
 *            .dxl-oneline  (tight one-liner) ·  .dxl-credits (About/Credits)
 * Markup samples: see dex-license-samples.html
 */

.dxl {
  --dxl-surface:  var(--surface,  #121821);
  --dxl-surface2: var(--surface2, #18212C);
  --dxl-surface3: var(--surface3, #1E2835);
  --dxl-border:   var(--border,   #1e2d42);
  --dxl-text:     var(--text,     #F4F7FB);
  --dxl-text2:    var(--text2,    #9FB0C3);
  --dxl-text3:    var(--text3,    #8C9DB3);
  --dxl-text4:    var(--text4,    #6E7F94);
  --dxl-teal:     var(--teal,     #3DE0D0);
  --dxl-blue:     var(--blue,     #58A6FF);
  --dxl-green:    var(--green,    #39D98A);
  --dxl-sans: var(--sans, 'Inter', system-ui, -apple-system, sans-serif);
  --dxl-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-family: var(--dxl-sans);
  color: var(--dxl-text);
  box-sizing: border-box;
  line-height: 1.5;
}
.dxl *, .dxl *::before, .dxl *::after { box-sizing: border-box; }
.dxl .dxl-mono { font-family: var(--dxl-mono); font-variant-numeric: tabular-nums; }
.dxl b, .dxl strong { color: var(--dxl-text); font-weight: 600; }

/* SPDX shield — the canonical license chip. Never wraps. */
.dxl-spdx {
  display: inline-flex; align-items: stretch; flex: none; white-space: nowrap;
  border: 1px solid var(--dxl-border); border-radius: 7px; overflow: hidden;
  font-family: var(--dxl-mono); font-size: 11px; font-weight: 600;
}
.dxl-spdx .k { background: var(--dxl-surface3); color: var(--dxl-text3); padding: 5px 9px; white-space: nowrap; }
.dxl-spdx .v { background: rgba(61,224,208,.12); color: var(--dxl-teal); padding: 5px 10px; white-space: nowrap; }

/* Suite mark */
.dxl-mark {
  display: flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(135deg, var(--dxl-teal), var(--dxl-blue));
  color: #041014; font-weight: 800; letter-spacing: -.02em;
  border-radius: 9px; box-shadow: 0 0 16px rgba(61,224,208,.22);
}

.dxl-roles { color: var(--dxl-text3); }
.dxl-colophon { font-family: var(--dxl-mono); font-size: 9.5px; color: var(--dxl-text4); letter-spacing: .02em; }
.dxl hr.dxl-div { border: none; border-top: 1px solid var(--dxl-border); margin: 0; }

/* ── Variant: sidebar foot ─────────────────────────────────────────────── */
.dxl-sidebar {
  background: var(--dxl-surface); border: 1px solid var(--dxl-border);
  border-radius: 14px; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 10px; max-width: 260px;
}
.dxl-sidebar .dxl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dxl-sidebar .dxl-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dxl-green);
  box-shadow: 0 0 7px rgba(57,217,138,.7); flex: none;
}

/* ── Variant: full-width ribbon (app / paper foot) ─────────────────────── */
.dxl-ribbon {
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: var(--dxl-surface); border: 1px solid var(--dxl-border); border-radius: 12px;
}
.dxl-ribbon .dxl-seg { display: flex; align-items: center; gap: 11px; padding: 14px 20px; }
.dxl-ribbon .dxl-seg + .dxl-seg { border-left: 1px solid var(--dxl-border); }
.dxl-ribbon .dxl-grow { flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 220px; }
.dxl-ribbon .dxl-mark { width: 34px; height: 34px; font-size: 16px; }

/* ── Variant: one-liner (tight footers) ────────────────────────────────── */
.dxl-oneline {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--dxl-mono); font-size: 11.5px; color: var(--dxl-text3);
}
.dxl-oneline .dxl-mark { width: 20px; height: 20px; font-size: 10px; border-radius: 6px; }
.dxl-oneline .dxl-sep { color: var(--dxl-text4); }
.dxl-oneline .dxl-lic { color: var(--dxl-teal); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }

/* ── Variant: credits grid (About / reference-guide Credits) ───────────── */
.dxl-credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dxl-credits .dxl-col {
  background: var(--dxl-surface2); border: 1px solid var(--dxl-border);
  border-radius: 12px; padding: 16px 18px;
}
.dxl-credits .dxl-k {
  font-family: var(--dxl-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dxl-text4); margin-bottom: 9px;
}
.dxl-credits .dxl-name { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.dxl-credits .dxl-cite { font-size: 11.5px; font-style: italic; color: var(--dxl-text4); margin-top: 9px; line-height: 1.6; }

/* Disclaimer line — health / regulatory (short, inline) */
.dxl-disclaimer { font-family: var(--dxl-mono); font-size: 9.5px; color: var(--dxl-text4); line-height: 1.6; }

/* Disclaimer block — full intended-use / safety notice (About / first-run) */
.dxl-notice {
  border: 1px solid var(--dxl-border); border-left: 3px solid var(--dxl-teal);
  border-radius: 10px; background: var(--dxl-surface2);
  padding: 14px 16px; max-width: 640px;
}
.dxl-notice .dxl-k {
  font-family: var(--dxl-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dxl-teal); margin-bottom: 7px;
}
.dxl-notice p { margin: 0; font-size: 12px; color: var(--dxl-text3); line-height: 1.65; text-wrap: pretty; }
.dxl-notice p b, .dxl-notice p strong { color: var(--dxl-text2); }

@media (max-width: 768px) {
  .dxl-ribbon .dxl-seg + .dxl-seg { border-left: none; border-top: 1px solid var(--dxl-border); }
}