/* core.css — the shared component layer.
 *
 * Two rules govern this file:
 *
 *   1. No literal colours, sizes or fonts. Everything reads a custom property
 *      emitted by internal/theme. If a value is needed that no token provides,
 *      the token set is incomplete and that is the fix.
 *   2. Nothing here decides arrangement. Order, columns and widths belong to
 *      layout-<archetype>.css. Core styles what a thing *is*; a layout styles
 *      where it goes.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--fs-md);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: 1.14;
  text-wrap: balance;
  text-transform: var(--tt-display);
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Skip link — the page is long and keyboard users should not have to walk the
 * whole trust box to reach the credentials. */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--sp-2);
  z-index: 20;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  color: var(--c-ink);
  border: var(--bw-strong) solid var(--c-control);
  border-radius: var(--r-sm);
  font-weight: var(--fw-strong);
}
.skip:focus { left: var(--sp-4); }

/* ---------------------------------------------------------------- primitives */

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  font-weight: 500;
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--c-ink-muted); }
.faint { color: var(--c-ink-faint); }
.strong { font-weight: var(--fw-strong); }
.nowrap { white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.card {
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
}

.sect { display: flex; flex-direction: column; gap: var(--sp-4); }
.sect__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.sect__title { font-size: var(--fs-xl); }

.hr { height: var(--bw); background: var(--c-line); border: 0; }
.rule-brand { height: 3px; background: var(--g-brand); }

/* ------------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw-strong) solid var(--c-control);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--c-surface-alt); text-decoration: none; }

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}
.btn--primary:hover { background: var(--c-accent); filter: brightness(.94); }

.btn--quiet { border-color: transparent; background: transparent; }
.btn--quiet:hover { background: var(--c-surface-alt); }

.btn--sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-2xs); border-width: var(--bw); }

/* ------------------------------------------------------------ verified badge */

/* The verification treatment is deliberately un-themeable. A verifier should
 * learn one visual signal for "cryptographically attested" and have it mean the
 * same thing on every e.id page, whatever theme the holder picked (PRD D6).
 * Themes may position these elements; they may not restyle them. */

.vmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: var(--c-verified);
  color: #fff;
}
.vmark svg { width: 62%; height: 62%; }
/* Sized in em so it scales with the theme, but small enough not to swallow the
 * compact avatars the ledger and executive archetypes use. */
.vmark--lg { width: 1.75em; height: 1.75em; }

.vbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-verified-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
}

.vdot {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--c-verified);
  animation: eidpulse 2.4s ease-in-out infinite;
}
@keyframes eidpulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* Self-attested content must never be able to borrow the verified look: a
 * dashed outline and an explicit label, with no mark and no accent fill. */
.selfclaim {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw-strong) dashed var(--c-control);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------- pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  border: var(--bw) solid transparent;
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .05em;
}
.pill--active { background: var(--c-verified-soft); color: var(--c-verified-ink); border-color: var(--c-verified); }
.pill--warn   { background: var(--c-warn-soft); color: var(--c-warn); border-color: var(--c-warn); }
.pill--danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger); }
.pill--quiet  { background: var(--c-surface-alt); color: var(--c-ink-muted); border-color: var(--c-line); }

/* ------------------------------------------------------------------- avatars */

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  letter-spacing: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--round { border-radius: 50%; }
/* inline-flex, not block: as a stretched flex child this wrapper spanned the
 * whole column and threw the absolutely-positioned verified disc to the far
 * right of the page. */
.avatar--wrap { position: relative; display: inline-flex; flex: none; align-self: flex-start; }
.avatar--wrap .vmark {
  position: absolute;
  right: -2px;
  bottom: 0;
  box-shadow: 0 0 0 3px var(--c-canvas);
}

/* Issuer chip. The tone index comes from the view model, so an issuer keeps one
 * colour across a page without any theme knowing issuer names. */
.chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75em;
  height: 2.75em;
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1;
  padding: 2px;
}
.chip--0 { background: var(--c-tone-0); color: var(--c-tone-0-ink); }
.chip--1 { background: var(--c-tone-1); color: var(--c-tone-1-ink); }
.chip--2 { background: var(--c-tone-2); color: var(--c-tone-2-ink); }
.chip--3 { background: var(--c-tone-3); color: var(--c-tone-3-ink); }
.chip--4 { background: var(--c-tone-4); color: var(--c-tone-4-ink); }
.chip--5 { background: var(--c-tone-5); color: var(--c-tone-5-ink); }

/* ---------------------------------------------------------------- trust box */

.trust { background: var(--c-surface); border: var(--bw) solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.trust__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--g-brand);
  color: #fff;
}
.trust__head .eyebrow { color: rgba(255,255,255,.92); }
.trust__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust__stat { padding: var(--sp-4); border-right: var(--bw) solid var(--c-line); }
.trust__stat:last-child { border-right: 0; }
.trust__num { font-family: var(--f-display); font-size: var(--fs-2xl); font-weight: var(--fw-display); line-height: 1; }
.trust__num--ok { color: var(--c-verified-ink); }
.trust__lbl { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-top: var(--sp-1); }
.trust__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--bw) solid var(--c-line);
  background: var(--c-surface-alt);
}
.trust__did { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

.issuers { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: var(--bw) solid var(--c-line); }
.issuer { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-muted); }
.issuer .chip { width: 1.9em; height: 1.9em; font-size: 9px; }

/* -------------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  border: var(--bw-strong) solid var(--c-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink-muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
}
.tab:hover { background: var(--c-surface-alt); color: var(--c-ink); text-decoration: none; }
.tab[aria-current="true"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: var(--fw-strong);
}
.tab__n { opacity: .7; font-size: var(--fs-2xs); }

/* ------------------------------------------------------------- credentials */

/* The default credential presentation is a row-card. Archetypes that need a
 * table row, a timeline entry or a ledger line override this in their own
 * stylesheet rather than fighting it here. */
.cred {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sh-soft);
  transition: border-color .15s ease, transform .15s ease;
}
a.cred:hover {
  border-color: var(--c-control);
  text-decoration: none;
  transform: translateY(-1px);
}
.cred__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cred__title { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: var(--fw-strong); line-height: 1.25; letter-spacing: var(--ls-display); }
.cred__issuer { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-muted); }
.cred__dates { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.cred__go { display: flex; align-items: center; gap: 4px; flex: none; color: var(--c-accent); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.creds { display: flex; flex-direction: column; gap: var(--sp-3); }

/* One markup, eight presentations: the credential template emits every field
 * any archetype could need, and each archetype opts in to the ones it uses.
 * The defaults below are the card presentation; a layout that wants the tabular
 * or ledger presentation re-enables what it needs. Without these defaults the
 * same fact renders twice — issuer inside the body and again as a column. */
.cred__n,           /* row number: register only */
.cred__issuercell,  /* issuer as its own column: register only */
.cred__kind,        /* kind as a second line: register only */
.cred__code,        /* share code in the open: ledger only */
.cred__status       /* ACTIVE pill: register and ledger */
{ display: none; }

/* ------------------------------------------------------------------ banners */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--bw-strong) solid var(--c-line);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.banner__title { font-weight: var(--fw-strong); color: var(--c-ink); }
.banner--warn   { border-left-color: var(--c-warn); background: var(--c-warn-soft); }
.banner--danger { border-left-color: var(--c-danger); background: var(--c-danger-soft); }
.banner--info   { border-left-color: var(--c-accent); background: var(--c-accent-soft); }

/* ------------------------------------------------------------------ channels */

.channels__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.channel {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-alt);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  color: inherit; text-decoration: none;
}
.channel:hover { text-decoration: none; border-color: var(--c-control); }
.channel__mark { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: var(--r-sm); background: var(--c-accent); color: var(--c-accent-ink); }
.channel__val { font-size: var(--fs-sm); font-weight: var(--fw-strong); }

/* ----------------------------------------------------------------------- QR */

.qrbox { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.qrbox__mat { flex: none; padding: var(--sp-2); background: #fff; border: var(--bw) solid var(--c-line); border-radius: var(--r-sm); }
.qrbox__mat svg, .qrbox__mat img { width: 104px; height: 104px; }
.qrbox__copy { display: flex; flex-direction: column; gap: var(--sp-1); }

/* --------------------------------------------------------------------- misc */

.kv { display: grid; gap: 0; font-size: var(--fs-sm); }
.kv__row { display: grid; grid-template-columns: 8.5em 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: var(--bw) solid var(--c-line); }
.kv__row:first-child { border-top: 0; }
.kv__k { color: var(--c-ink-faint); }
.kv__v { color: var(--c-ink); min-width: 0; overflow-wrap: anywhere; }

.foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
}
.foot__links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-header);
  color: var(--c-header-ink);
}
.topbar a { color: inherit; }
.topbar__brand { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__mark { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: var(--r-xs); background: #fff; padding: 4px; }
.topbar__name { font-family: var(--f-display); font-weight: var(--fw-strong); font-size: var(--fs-sm); }
.topbar__sub { font-size: var(--fs-2xs); opacity: .72; }
.topbar__tools { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); }

.crumbs { padding: var(--sp-2) var(--sp-6); background: var(--c-surface); border-bottom: var(--bw) solid var(--c-line); font-size: var(--fs-xs); color: var(--c-ink-muted); }
.crumbs b { color: var(--c-ink); font-weight: var(--fw-strong); }

/* Language and mode switches sit in the footer of every archetype. */
.switch { display: inline-flex; border: var(--bw) solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
.switch a {
  padding: 4px var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  text-decoration: none;
  background: var(--c-surface);
}
.switch a:hover { background: var(--c-surface-alt); text-decoration: none; }
.switch a[aria-current="true"] { background: var(--c-accent); color: var(--c-accent-ink); font-weight: 600; }

/* Empty and error states get real design attention, because an empty profile is
 * the most common first impression a new subscriber's page will make. */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-4); text-align: center; }
.empty__mark { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--c-surface-alt); color: var(--c-ink-faint); border: var(--bw-strong) dashed var(--c-line); }
.empty__title { font-family: var(--f-display); font-size: var(--fs-xl); }
.empty__note { max-width: 44ch; color: var(--c-ink-muted); font-size: var(--fs-sm); }

.copied { color: var(--c-verified-ink); }