/* =====================================================================
   Powered by Nabu Studios, attribution mark
   ---------------------------------------------------------------------
   One stylesheet, six variants, no dependencies. Works with the React
   component and with the plain-HTML sprite; both emit the same markup.

   Two families:
     quiet   (colophon, serial, impression) folds down to the host's own
             ink and takes nothing from its palette.
     sealed  (chip, seal, record) brings its own ground, which is the
             only condition under which terracotta may appear on a page
             the studio does not otherwise control (DESIGN.md, Field Rule).

   Every dimension derives from --nb-h, the wordmark cap height.
   Every directional value is logical, so one rule serves both text
   directions. Set data-style, and optionally data-tone / data-color /
   data-plate. See README.md.
   ===================================================================== */

.nabu-badge {
  /* kit palette, fixed and not themeable */
  --nb-terracotta: #b05c2e;
  --nb-terracotta-deep: #94491f;
  --nb-clay: #e8b489;
  --nb-ink: #1c1814;
  --nb-cream: #f7f4ec;
  --nb-cream-hi: #fffdf7;

  /* the one dial */
  --nb-h: 13px;
  --nb-mark-h: calc(var(--nb-h) * 1.56);

  /* the micro-label's face. Set this to the host's own mono if it has one. */
  --nb-label-font: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  /* resolved by tone / color below */
  --nb-tablet: var(--nb-terracotta);
  --nb-wedge: var(--nb-cream);
  --nb-wedge-4: var(--nb-clay);
  --nb-letter: currentColor;
  --nb-letter-a: var(--nb-terracotta);
  --nb-label: color-mix(in srgb, currentColor 78%, transparent);

  display: inline-flex;
  align-items: center;
  gap: calc(var(--nb-h) * 0.72);
  max-width: 100%;
  text-decoration: none;
  color: inherit;
  font-family: var(--nb-label-font);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.25, 1),
    box-shadow 150ms cubic-bezier(0.2, 0.8, 0.25, 1),
    background-color 150ms linear;
}
.nabu-badge * {
  box-sizing: border-box;
}

/* Each SVG carries an explicit aspect-ratio. A viewBox alone does not give
   an inline <svg> an intrinsic width in Chrome. It falls back to the 300px
   replaced-element default and takes the surrounding layout with it.
   The two lettering ratios come from build/wordmark.json. */
.nb-mark {
  height: var(--nb-mark-h);
  aspect-ratio: 64 / 72;
  width: auto;
  display: block;
  flex: none;
}
.nb-word {
  height: var(--nb-h);
  aspect-ratio: 9850 / 1000;
  width: auto;
  display: block;
  flex: none;
}
.nb-word--stack {
  height: calc(var(--nb-h) * 2.188);
  aspect-ratio: 4272 / 2188;
}
.nb-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--nb-h) * 0.42);
}
.nb-label {
  font-size: calc(var(--nb-h) * 0.64);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nb-label);
  /* letter-spacing pads the trailing edge; pull it back so the optical
     alignment against the wordmark holds */
  margin-inline-end: -0.22em;
}

/* --- tone: dark host ------------------------------------------------- */
.nabu-badge[data-tone="dark"] {
  --nb-letter-a: var(--nb-clay);
  --nb-tablet: var(--nb-terracotta);
  --nb-wedge: var(--nb-cream);
}

/* --- monochrome: the mark folds down to the host's own ink ------------
   The wedges are cut out of the tablet rather than painted over it,
   painting them transparent would only leave a solid block. Declared after
   the tone rules so a mono badge stays mono on a dark host. */
.nabu-badge[data-color="mono"] {
  --nb-solid: none;
  --nb-knockout: block;
  --nb-tablet: currentColor;
  --nb-letter-a: currentColor;
}

/* === 01 COLOPHON ===================================================== */
/* The scribe's closing line. A rule, then the name. It reads as the last
   line of the host's own document, not as a sticker on it. Fills its
   container, so it sits naturally at the foot of a footer column. */
.nabu-badge[data-style="colophon"] {
  display: flex;
  width: 100%;
  align-items: center;
  gap: calc(var(--nb-h) * 0.78);
  padding-block-start: calc(var(--nb-h) * 0.85);
  border-block-start: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.nabu-badge[data-style="colophon"] .nb-word {
  margin-inline-start: auto;
}
.nabu-badge[data-style="colophon"]:hover {
  --nb-letter-a: var(--nb-terracotta);
}

/* === 02 SERIAL ======================================================= */
/* No outlined lettering at all: one clerical line of live text, so it
   translates, respects the host's text scaling, and costs almost nothing. */
.nabu-badge[data-style="serial"] {
  --nb-h: 11px;
  --nb-mark-h: calc(var(--nb-h) * 1.34);
  gap: calc(var(--nb-h) * 0.62);
  font-size: calc(var(--nb-h) * 0.82);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--nb-label);
}
.nabu-badge[data-style="serial"] b {
  font-weight: 600;
  color: currentColor;
  letter-spacing: 0.16em;
}
.nabu-badge[data-style="serial"] i {
  font-style: normal;
  opacity: 0.55;
  padding-inline: 0.5em;
}
.nabu-badge[data-style="serial"]:hover {
  color: var(--nb-terracotta);
}

/* === 03 IMPRESSION =================================================== */
/* Pressed into the host's material rather than laid on top of it. Built
   only from alpha, so it inherits any ground without being told what that
   ground is. This is the one variant that needs no configuration at all. */
.nabu-badge[data-style="impression"] {
  padding: calc(var(--nb-h) * 0.62) calc(var(--nb-h) * 0.88);
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, #000 26%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 16%, transparent);
}
.nabu-badge[data-style="impression"]:hover {
  background: color-mix(in srgb, currentColor 11%, transparent);
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 34%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 14%, transparent);
}
.nabu-badge[data-style="impression"]:active {
  transform: translateY(0.5px);
}

/* === 04 CHIP ========================================================= */
/* Terracotta owns the whole badge. A badge is a region, which is what makes
   this the correct way to put clay on a page the studio does not control. */
.nabu-badge[data-style="chip"] {
  --nb-mark-h: calc(var(--nb-h) * 2.02);
  --nb-tablet: var(--nb-cream);
  --nb-wedge: var(--nb-terracotta);
  --nb-wedge-4: #c9814f;
  --nb-letter: var(--nb-cream);
  --nb-letter-a: var(--nb-clay);
  --nb-label: var(--nb-cream-hi);
  background: var(--nb-terracotta);
  color: var(--nb-cream);
  padding: calc(var(--nb-h) * 0.62) calc(var(--nb-h) * 0.86);
  gap: calc(var(--nb-h) * 0.68);
  box-shadow: 0 2px 0 rgba(28, 24, 20, 0.22);
}
.nabu-badge[data-style="chip"] .nb-label {
  font-size: calc(var(--nb-h) * 0.6);
}
.nabu-badge[data-style="chip"]:hover {
  background: var(--nb-terracotta-deep);
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(28, 24, 20, 0.24);
}
.nabu-badge[data-style="chip"]:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(28, 24, 20, 0.24);
}
/* on ink the chip inverts, so it stays the brightest object on the page
   rather than a dark smudge */
.nabu-badge[data-style="chip"][data-tone="dark"] {
  --nb-tablet: var(--nb-terracotta);
  --nb-wedge: var(--nb-cream);
  --nb-wedge-4: var(--nb-clay);
  --nb-letter: var(--nb-ink);
  --nb-letter-a: var(--nb-terracotta);
  --nb-label: color-mix(in srgb, #1c1814 74%, transparent);
  background: var(--nb-cream);
  color: var(--nb-ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.nabu-badge[data-style="chip"][data-tone="dark"]:hover {
  background: var(--nb-cream-hi);
}

/* === 05 SEAL ========================================================= */
/* A cylinder seal and a rubber stamp are the same gesture four thousand
   years apart. Struck rather than printed: off-square, ring bitten. */
.nabu-badge[data-style="seal"] {
  --nb-h: 15px;
  gap: calc(var(--nb-h) * 0.78);
}
.nb-seal {
  height: calc(var(--nb-h) * 2.6);
  aspect-ratio: 1;
  width: auto;
  display: block;
  flex: none;
  color: var(--nb-terracotta);
  transform: rotate(-6deg);
  transform-origin: 50% 50%;
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.nabu-badge[data-style="seal"][data-tone="dark"] .nb-seal {
  color: var(--nb-clay);
}
.nabu-badge[data-style="seal"]:hover .nb-seal {
  transform: rotate(-2.5deg) scale(1.04);
}
.nabu-badge[data-style="seal"]:active .nb-seal {
  transform: rotate(-6deg) scale(0.97);
}

/* === 06 RECORD ======================================================= */
/* The studio's own field pattern, miniaturised: a panel set into the host
   page, with a labelled head rule, a serial, and registration marks. */
.nabu-badge[data-style="record"] {
  --nb-h: 15px;
  --nb-mark-h: calc(var(--nb-h) * 2.188);
  --nb-letter: var(--nb-ink);
  --nb-letter-a: var(--nb-terracotta);
  --nb-label: color-mix(in srgb, #1c1814 74%, transparent);
  position: relative;
  display: inline-block;
  background: var(--nb-cream);
  color: var(--nb-ink);
  border: 1px solid rgba(28, 24, 20, 0.24);
  padding: calc(var(--nb-h) * 0.72) calc(var(--nb-h) * 0.92);
  box-shadow: 0 2px 0 rgba(28, 24, 20, 0.18);
}
.nabu-badge[data-style="record"] .nb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--nb-h) * 1.6);
  padding-block-end: calc(var(--nb-h) * 0.48);
  margin-block-end: calc(var(--nb-h) * 0.58);
  border-block-end: 1px solid rgba(28, 24, 20, 0.24);
}
.nabu-badge[data-style="record"] .nb-serial {
  font-size: calc(var(--nb-h) * 0.58);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--nb-terracotta);
  white-space: nowrap;
}
.nabu-badge[data-style="record"] .nb-body {
  display: flex;
  align-items: center;
  gap: calc(var(--nb-h) * 0.72);
}
.nabu-badge[data-style="record"] .nb-reg {
  position: absolute;
  width: 7px;
  height: 7px;
  color: rgba(28, 24, 20, 0.4);
}
.nabu-badge[data-style="record"] .nb-reg::before,
.nabu-badge[data-style="record"] .nb-reg::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  background: currentColor;
}
.nabu-badge[data-style="record"] .nb-reg::before {
  width: 100%;
  height: 1px;
}
.nabu-badge[data-style="record"] .nb-reg::after {
  width: 1px;
  height: 100%;
}
.nabu-badge[data-style="record"] .nb-reg--tl {
  inset-block-start: 4px;
  inset-inline-start: 4px;
}
.nabu-badge[data-style="record"] .nb-reg--br {
  inset-block-end: 4px;
  inset-inline-end: 4px;
  transform: rotate(180deg);
}
.nabu-badge[data-style="record"]:hover {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(28, 24, 20, 0.2);
}
.nabu-badge[data-style="record"][data-tone="dark"] {
  --nb-letter: var(--nb-cream);
  --nb-letter-a: var(--nb-clay);
  --nb-label: color-mix(in srgb, #f7f4ec 80%, transparent);
  background: #221e18;
  color: var(--nb-cream);
  border-color: rgba(247, 244, 236, 0.24);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.nabu-badge[data-style="record"][data-tone="dark"] .nb-head {
  border-color: rgba(247, 244, 236, 0.24);
}
.nabu-badge[data-style="record"][data-tone="dark"] .nb-serial {
  color: var(--nb-clay);
}
.nabu-badge[data-style="record"][data-tone="dark"] .nb-reg {
  color: rgba(247, 244, 236, 0.42);
}

/* === plate: what a quiet badge takes when it sits over photography ====
   A hard ink plate, never a blur. A blurred backdrop is the one effect
   this world does not use (DESIGN.md, No Bloom Rule). */
.nabu-badge[data-plate] {
  --nb-letter-a: var(--nb-clay);
  --nb-label: color-mix(in srgb, #f7f4ec 82%, transparent);
  background: rgba(28, 24, 20, 0.84);
  color: var(--nb-cream);
  padding: calc(var(--nb-h) * 0.66) calc(var(--nb-h) * 0.9);
}
.nabu-badge[data-plate][data-style="colophon"] {
  border-block-start: 0;
  padding-block-start: calc(var(--nb-h) * 0.66);
}

/* === focus and reduced motion ======================================== */
.nabu-badge:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .nabu-badge,
  .nb-seal {
    transition: none;
  }
  .nabu-badge:hover,
  .nabu-badge:active {
    transform: none;
  }
  .nabu-badge[data-style="seal"]:hover .nb-seal {
    transform: rotate(-6deg);
  }
}

/* === RTL ============================================================= */
/* Arabic does not letterspace, and the label wants the host's Arabic face.
   Everything else mirrors on the logical properties above. */
[dir="rtl"] .nb-label {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  font-size: calc(var(--nb-h) * 0.78);
  margin-inline-end: 0;
  font-family: inherit;
}
[dir="rtl"] .nabu-badge[data-style="serial"] {
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
}