/* font pack: adamndegwa */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url(/static/fonts/cinzel-latin-wght-normal.woff2) format('woff2-variations');}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:1 1000;font-display:swap;src:url(/static/fonts/google-sans-flex-latin-wght-normal.woff2) format('woff2-variations');}
:root{--font-heading:'Cinzel', Georgia, 'Times New Roman', serif;--font-body:'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
/* theme: adamndegwa-light */
:root{--accent:#7A632A;--bad:#A61B1B;--ink:#0B0B09;--invert-accent:#F0D053;--invert-bg:#21663F;--invert-fg:#F0EFE9;--invert-muted:#D9DAD6;--line:#D9DAD6;--muted:#6A6A65;--ok:#1E6B3B;--paper:#F0EFE9;--primary:#21663F;--secondary:#3B3F39;--spark:#F0D053;--warn:#7A4B00;}
/* theme: adamndegwa-dark */
[data-theme="dark"]{--accent:#C9A855;--bad:#FF8A80;--ink:#F7F7F4;--invert-accent:#000000;--invert-bg:#49A863;--invert-fg:#000000;--invert-muted:#000000;--line:#3A3A38;--muted:#888888;--ok:#6FCB8A;--paper:#000000;--primary:#49A863;--secondary:#A8A8A4;--spark:#F5D96E;--warn:#F5D96E;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:#C9A855;--bad:#FF8A80;--ink:#F7F7F4;--invert-accent:#000000;--invert-bg:#49A863;--invert-fg:#000000;--invert-muted:#000000;--line:#3A3A38;--muted:#888888;--ok:#6FCB8A;--paper:#000000;--primary:#49A863;--secondary:#A8A8A4;--spark:#F5D96E;--warn:#F5D96E;}}
/* brand */
:root{--radius-s:0.125rem;--radius-m:0.25rem;--radius-pill:62.5rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--role-accent:var(--accent);}
/* vca UI kit base stylesheet.
   The look ports the adamndegwa site (Apache-2.0): hairlines, a gold bar
   under the wordmark, tracked upper case labels, and tiles and link cards
   that invert on hover and focus.
   Colour tokens and font stacks are prepended at startup from the Go theme
   and font pack. This file must only use the --token custom properties.
   Dark mode needs no selector here: the tokens, invert-* included, differ
   per mode.
   Fonts: --font-heading for headings and the wordmark, --font-body for
   text and labels, --font-mono for code and numbers. Both shipped fonts
   are variable, so weights are plain numbers. Cinzel draws at 420, the
   weight the site shows. */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* The hidden attribute wins over the display of a component, so a
   button that a script reveals, such as a dcapi button, stays hidden. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:420;
  font-size:1rem;
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary);color:var(--paper)}
a{color:var(--primary);text-underline-offset:.15em;transition:color .25s ease}
a:hover{color:var(--accent)}
img,svg{max-width:100%;height:auto}
code,pre,kbd,.num{font-family:var(--font-mono)}
code,kbd{font-size:.9em}
table,.num{font-variant-numeric:tabular-nums}
strong{font-weight:640}

/* ---------- accessibility ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-size:.9rem;
  padding:var(--space-3) var(--space-4);z-index:200;text-decoration:none;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
/* Target size, WCAG 2.2 SC 2.5.8: every control is at least 24 by 24 CSS px. */
button,[role="button"],input:not([type="hidden"]),select,textarea,summary,.nav a{
  min-width:24px;min-height:24px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- header ---------- */
.site-header{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-2) 2.4rem;min-height:3.75rem;padding:var(--space-2) var(--space-7);
  border-bottom:1px solid var(--line);
  position:relative;
}
/* The gold bar under the wordmark. */
.site-header::after{
  content:'';position:absolute;left:var(--space-7);bottom:-1px;
  width:3.75rem;height:2px;background:var(--role-accent);
}
.wordmark{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-heading);
  font-weight:420;
  font-size:1.05rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.wordmark:hover{color:var(--ink)}
.wordmark-text{white-space:nowrap}
/* The service name beside the wordmark. */
.wordmark-context{
  padding-left:var(--space-3);border-left:1px solid var(--line);
  font-family:var(--font-body);font-weight:420;font-size:.72rem;
  letter-spacing:.18em;color:var(--secondary);
}
.wordmark em{font-style:normal;color:var(--primary)}
.wordmark img{display:block;width:auto;height:2rem}
.nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) 2.4rem;list-style:none}
.nav a{
  display:inline-flex;align-items:center;position:relative;
  padding:.4rem 0 .2rem;
  font-family:var(--font-body);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--secondary);
}
/* The growing underline. */
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--role-accent);transition:width .3s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--primary)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{width:100%}
.theme-toggle.btn{
  margin-left:auto;min-height:2rem;padding:var(--space-1) var(--space-2);border:none;
  font-size:.75rem;letter-spacing:.18em;color:var(--secondary);
}
.theme-toggle.btn:hover{background:transparent;color:var(--primary)}

/* ---------- portal shell ----------
   The header gains a role chip, a stack switcher and a user menu. Under
   the header a grid holds the side navigation and the main region. */
.role-chip{
  display:inline-flex;align-items:center;min-height:1.5rem;padding:.1rem .7rem;
  border:1px solid var(--role-accent);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--role-accent);
}
.stack-nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-4);list-style:none}
.stack-nav a,.stack-starting{
  display:inline-flex;align-items:center;gap:var(--space-2);min-height:24px;
  padding:.3rem 0;font-family:var(--font-body);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--secondary);
}
.stack-nav a{border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.stack-nav a:hover,.stack-nav a:focus-visible{color:var(--primary);border-bottom-color:var(--role-accent)}
.stack-nav a[aria-current="true"]{color:var(--primary);border-bottom-color:var(--primary)}
.stack-starting{color:var(--muted)}
/* tabs: the views of one page group, under the page header */
.tabs{margin:0 0 var(--space-5);border-bottom:1px solid var(--line)}
.tabs ul{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);list-style:none;margin:0;padding:0}
.tabs a{
  display:inline-flex;align-items:center;min-height:24px;padding:var(--space-2) 0;margin-bottom:-1px;
  font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--secondary);border-bottom:2px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.tabs a:hover,.tabs a:focus-visible{color:var(--primary);border-bottom-color:var(--role-accent)}
.tabs a[aria-current="page"]{color:var(--primary);border-bottom-color:var(--primary)}
.stack-starting .badge{font-size:.62rem;padding:.05rem .45rem}
.has-shell .stack-nav,.has-shell .user-menu{margin-left:auto}
.has-shell .stack-nav+.user-menu,.has-shell .theme-toggle.btn{margin-left:0}
.user-menu{position:relative}
.user-menu summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:2rem;padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:.8rem;color:var(--ink);
}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--role-accent)}
.user-menu[open] summary,.user-menu summary:hover{border-color:var(--primary);color:var(--primary)}
.user-menu form{
  position:absolute;right:0;top:calc(100% + var(--space-2));z-index:120;min-width:10rem;
  padding:var(--space-2);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:0 .25rem 1rem rgba(0,0,0,.2);
}
.user-menu form .btn{width:100%;justify-content:flex-start}
.shell{flex:1;display:grid;grid-template-columns:15rem minmax(0,1fr);width:100%}
.shell main{max-width:none;margin:0;padding:0 var(--space-7) var(--space-7)}
.side-nav{border-right:1px solid var(--line);padding:var(--space-5) var(--space-4) var(--space-6) var(--space-7)}
.side-nav-toggle{display:none}
.side-label{
  margin:var(--space-5) 0 var(--space-2);font-family:var(--font-body);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--role-accent);
}
.side-links{list-style:none;display:flex;flex-direction:column;gap:.15rem}
.side-links+.side-links{margin-top:var(--space-5)}
.side-links a{
  display:flex;align-items:center;min-height:2.25rem;padding:var(--space-1) var(--space-3);
  border-left:2px solid transparent;border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-family:var(--font-body);font-size:.9rem;text-decoration:none;color:var(--secondary);
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.side-links a:hover,.side-links a:focus-visible{color:var(--primary);border-left-color:var(--role-accent)}
.side-links a[aria-current="page"]{color:var(--primary);border-left-color:var(--primary);font-weight:600}

/* ---------- main ---------- */
main{flex:1;width:100%;max-width:75rem;margin:0 auto;padding:0 var(--space-7) var(--space-7)}
h1{font-family:var(--font-heading);font-weight:420;font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;margin:0 0 var(--space-4)}
h2,h3,h4{font-family:var(--font-heading);font-weight:420;line-height:1.2;margin:0 0 var(--space-2)}
h2{font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase}
h3{font-size:1.1rem;letter-spacing:.04em}
p{margin:0 0 var(--space-4)}
h1,h2,h3,h4{overflow-wrap:break-word}

/* ---------- page header ---------- */
.pg-header{padding:var(--space-7) 0 var(--space-6);margin:0 0 var(--space-6);border-bottom:1px solid var(--line)}
.pg-header-label{
  font-family:var(--font-body);
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--role-accent);margin:0 0 1.2rem;
}
.pg-header-label span{color:var(--muted)}
.pg-header h1{font-size:clamp(2.4rem,5vw,4rem);line-height:.95;margin:0}
.pg-header-lead{margin:var(--space-4) 0 0;color:var(--secondary);font-size:1.05rem;max-width:52ch}
.pg-header-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
/* The left column is a size container: the title measures itself against
   the column width through cqi units (10cqi fits a 15 letter word in
   Cinzel), so a long word shrinks instead of wrapping mid word. */
.hero-left{
  min-width:0;padding:var(--space-7) var(--space-7) 2.5rem 0;border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
  container-type:inline-size;
}
.hero-right{
  min-width:0;padding:var(--space-7) 0 2.5rem var(--space-7);
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-6);
}
.hero h1,.hero-title{font-size:clamp(1.75rem,4.5vw,6.5rem);line-height:.9;letter-spacing:.01em;margin:0}
.hero h1{font-size:clamp(1.75rem,10cqi,6.5rem);overflow-wrap:normal;text-wrap:balance}
.hero h1 em,.hero-title em{display:block;font-style:normal;color:var(--primary)}
.role-row{display:flex;align-items:center;gap:.9rem;margin-top:2.4rem}
.role-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--primary)}
.role{
  font-family:var(--font-heading);font-weight:420;font-size:.9rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--secondary);
}
.desc{font-size:1.25rem;line-height:1.55;max-width:38ch;margin:0}
.desc strong{color:var(--primary)}
.hero-rule{height:1px;background:var(--line)}
.ethos-label{
  display:block;font-family:var(--font-body);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
.ethos p{margin:.8rem 0 0;line-height:1.6;color:var(--secondary)}
.ethos-line{width:2.5rem;height:3px;margin-top:1.4rem;background:var(--accent)}

/* ---------- tiles and link cards ---------- */
.tiles{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.tiles-3{grid-template-columns:repeat(3,1fr)}
.cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.tile,.card-link{
  display:flex;flex-direction:column;gap:.9rem;min-width:0;
  padding:var(--space-6) 1.8rem 2.4rem;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;
  transition:background .3s ease,color .3s ease;
}
.tile-top,.card-link-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.tile-num,.card-link-icon{
  font-family:var(--font-body);font-variant-numeric:tabular-nums;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  transition:color .3s ease;
}
.tile-arrow,.card-link-arrow{
  width:1.1rem;height:1.1rem;fill:none;stroke:var(--muted);
  transition:stroke .3s ease,transform .3s ease;
}
.tile h2,.card-link h2{margin:0;transition:color .3s ease}
.tile h2{font-size:1.5rem}
.tile p,.card-link-desc{
  margin:0;font-size:.9rem;line-height:1.55;color:var(--secondary);
  font-weight:380;transition:color .3s ease;
}
.card-link-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:color .3s ease;
}
.tile-line,.card-link-line{
  width:2.5rem;height:3px;margin-top:auto;background:var(--primary);
  transition:background .3s ease,width .3s ease;
}
/* Hover and keyboard focus invert the surface. */
.tile:hover,.tile:focus-visible,.card-link:hover,.card-link:focus-visible{background:var(--invert-bg);color:var(--invert-fg)}
.tile:hover h2,.tile:focus-visible h2,.card-link:hover h2,.card-link:focus-visible h2{color:var(--invert-fg)}
.tile:hover p,.tile:focus-visible p,.card-link:hover .card-link-desc,.card-link:focus-visible .card-link-desc{color:var(--invert-muted)}
.tile:hover .tile-num,.tile:focus-visible .tile-num,.card-link:hover .card-link-icon,.card-link:focus-visible .card-link-icon,
.card-link:hover .card-link-meta,.card-link:focus-visible .card-link-meta{color:var(--invert-accent)}
.tile:hover .tile-arrow,.tile:focus-visible .tile-arrow,.card-link:hover .card-link-arrow,.card-link:focus-visible .card-link-arrow{stroke:var(--invert-accent);transform:translate(3px,-3px)}
.tile:hover .tile-line,.tile:focus-visible .tile-line,.card-link:hover .card-link-line,.card-link:focus-visible .card-link-line{background:var(--invert-accent);width:4rem}

.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.tiles{list-style:none}
.tiles>li{display:flex;min-width:0}
.tile{flex:1}
.tile-meta{
  font-family:var(--font-body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color .3s ease;
}
.tile:hover .tile-meta,.tile:focus-visible .tile-meta{color:var(--invert-muted)}

/* ---------- steps ----------
   Numbered cards in a hairline grid. The state is a word beside the
   number, never only a colour. */
.steps{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin:0 0 var(--space-6);
}
.step{
  display:flex;flex-direction:column;gap:var(--space-3);min-width:0;
  padding:var(--space-5) 1.4rem var(--space-6);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.step-top{display:flex;align-items:center;gap:var(--space-3)}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border:1px solid var(--role-accent);border-radius:50%;
  font-family:var(--font-heading);font-size:.9rem;color:var(--role-accent);
}
.step-state{
  font-family:var(--font-body);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.step-done .step-num{background:var(--primary);border-color:var(--primary);color:var(--paper)}
.step-done .step-state{color:var(--ok)}
.step-current .step-num{background:var(--role-accent);color:var(--paper)}
.step-current .step-state{color:var(--primary)}
.step-locked{color:var(--secondary)}
.step-locked .step-num{border-style:dashed;color:var(--muted)}
.step-title{font-family:var(--font-heading);font-size:1.1rem;letter-spacing:.04em;line-height:1.3}
.step-text{margin:0;font-size:.9rem;line-height:1.55;color:var(--secondary)}
.step-link{margin-top:auto;font-size:.85rem;font-weight:600;text-decoration:none}
.step-link:hover{text-decoration:underline}

/* ---------- checklist ---------- */
.checklist{border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-5) 1.8rem;margin:0 0 var(--space-5)}
.checklist-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-4)}
.checklist-head h2{margin:0}
.checklist-note{margin:0;font-size:.8rem;color:var(--muted)}
.checklist ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.check{display:flex;align-items:flex-start;gap:var(--space-3)}
.check-mark{
  flex-shrink:0;width:1.1rem;height:1.1rem;margin-top:.2rem;border:1px solid var(--muted);border-radius:var(--radius-s);
}
.check-done .check-mark{background:var(--primary);border-color:var(--primary)}
.check-done .check-mark::after{
  content:'';display:block;width:.3rem;height:.6rem;margin:.1rem auto 0;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check-body{display:flex;flex-direction:column;gap:.1rem}
.check-state{font-family:var(--font-body);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.check-done .check-state{color:var(--ok)}
.check-done .check-text{color:var(--secondary)}
.check-detail{font-size:.85rem;color:var(--muted)}

/* ---------- stat ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin:0 0 var(--space-6);
}
.stat{
  display:flex;flex-direction:column;gap:var(--space-2);min-width:0;
  padding:var(--space-5) 1.4rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat-label{font-family:var(--font-body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--role-accent)}
.stat-value{font-family:var(--font-heading);font-size:1.5rem;line-height:1.15;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.stat-text{margin:0;font-size:.9rem;line-height:1.55;color:var(--secondary)}
.stat-link{margin-top:auto;font-size:.85rem;font-weight:600;text-decoration:none}
.stat-link:hover{text-decoration:underline}

/* ---------- credentials: the cards of a wallet ----------
   The stripe on top of a card takes the tone of its status. */
.credentials{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-4);margin:0 0 var(--space-6);padding:0}
.credentials>li{display:flex;min-width:0}
.credential{
  flex:1;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;min-height:11rem;
  padding:var(--space-5) 1.4rem;border:1px solid var(--line);border-top:4px solid var(--muted);
  border-radius:var(--radius-m);background:var(--paper);
}
.credential-ok{border-top-color:var(--ok)}
.credential-warn{border-top-color:var(--warn)}
.credential-bad{border-top-color:var(--bad)}
.credential-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-3)}
.credential-issuer{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);overflow-wrap:anywhere}
.credential-title{margin:0;font-size:1.35rem;line-height:1.2;overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
.credential-meta{margin:auto 0 0;font-size:.85rem;color:var(--muted)}
.credential-more{min-width:0;overflow-wrap:anywhere}
.credential-more summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--primary)}
.credential-more[open] summary{margin-bottom:var(--space-3)}
.credential-add{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:11rem;
  padding:var(--space-5);border:1px dashed var(--muted);border-radius:var(--radius-m);
  color:var(--primary);font-weight:600;text-decoration:none;transition:background .3s ease,color .3s ease;
}
.credential-add:hover,.credential-add:focus-visible{background:var(--invert-bg);color:var(--invert-fg)}
@media (max-width:40rem){.credential,.credential-add{min-height:0}}
/* split: two or more blocks side by side that stack on a narrow screen. */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--space-5);align-items:start;margin:0 0 var(--space-5)}
.split>.card{margin:0}
.mono{font-family:var(--font-mono);font-size:.85rem;overflow-wrap:anywhere}

/* ---------- stepper ---------- */
.stepper{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-6)}
.stepper-step{display:flex;align-items:center;gap:var(--space-2);color:var(--muted)}
.stepper-step+.stepper-step::before{content:'';width:2rem;height:1px;background:var(--line);margin-right:var(--space-2)}
.stepper-num{
  display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;
  border:1px solid var(--line);border-radius:50%;font-family:var(--font-heading);font-size:.8rem;
}
.stepper-name{font-family:var(--font-body);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.stepper-done{color:var(--secondary)}
.stepper-done .stepper-num{background:var(--primary);border-color:var(--primary);color:var(--paper)}
.stepper-current{color:var(--primary)}
.stepper-current .stepper-num{border-color:var(--primary);color:var(--primary);font-weight:700}
.stepper-current .stepper-name{font-weight:600}

/* ---------- choice ---------- */
.choice{border:none;margin:0 0 var(--space-5);min-width:0}
.choice legend{font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:0;margin:0 0 var(--space-2)}
.choice .hint{margin:0 0 var(--space-3)}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-3)}
.choice-card{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-3);align-items:start;
  padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-m);cursor:pointer;
  transition:border-color .25s ease,background .25s ease;
}
.choice-card:hover{border-color:var(--primary)}
.choice-card input{margin:.25rem 0 0;accent-color:var(--primary)}
.choice-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.choice-title{font-weight:600}
.choice-text{font-size:.9rem;line-height:1.5;color:var(--secondary);overflow-wrap:anywhere}
.choice-meta{
  grid-column:2;font-family:var(--font-body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.choice-card:has(:checked){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.choice-card:has(:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.choice-card:has(:disabled){cursor:not-allowed;color:var(--muted)}
.choice-card:has(:disabled) .choice-text{color:var(--muted)}

/* ---------- form actions: the buttons under a form ---------- */
.form-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin:var(--space-2) 0 var(--space-6)}
.dcapi-form{margin:var(--space-2) 0 var(--space-3)}

/* ---------- media row: a figure such as a QR code beside its text ---------- */
.media-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5) var(--space-6);align-items:start}
@media (max-width:40rem){.media-row{grid-template-columns:minmax(0,1fr)}}

/* ---------- fieldset ---------- */
.fieldset{
  border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-3) var(--space-5) 0;
  margin:0 0 var(--space-5);min-width:0;max-width:44rem;
}
.fieldset legend{font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:0 var(--space-2);margin:0 0 0 calc(-1 * var(--space-2))}
.fieldset .hint{margin:0 0 var(--space-3)}

/* ---------- code ---------- */
.code{margin:0 0 var(--space-5);min-width:0}
.code figcaption{
  font-family:var(--font-body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  padding:0 0 var(--space-2);
}
.code pre{
  overflow-x:auto;padding:var(--space-4) 1.4rem;border:1px solid var(--line);border-radius:var(--radius-m);
  font-size:.85rem;line-height:1.6;max-width:100%;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;
}

/* ---------- empty state ---------- */
.empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-6) 1.8rem;margin:0 0 var(--space-5);border:1px dashed var(--muted);border-radius:var(--radius-m);
}
.empty-title{margin:0;font-family:var(--font-heading);font-size:1.2rem;letter-spacing:.04em}
.empty-text{margin:0;color:var(--secondary);max-width:52ch}

/* ---------- footer ---------- */
.site-footer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);
  padding:1.4rem var(--space-7);margin-top:auto;
  border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted);
}
.ft-monogram{font-family:var(--font-body);font-size:.8rem;color:var(--ink)}
.ft-name{color:var(--primary);font-weight:600}
.ft-note{max-width:60ch}
.ft-mono{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.site-footer a{position:relative;padding-bottom:3px;text-decoration:none;color:var(--accent)}
.site-footer a:hover{color:var(--primary)}
.site-footer a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width .3s ease;
}
.site-footer a:hover::after,.site-footer a:focus-visible::after{width:100%}

/* ---------- card ---------- */
.card{
  border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-5) 1.8rem;
  margin:0 0 var(--space-5);background:var(--paper);
}
.card-footer{
  margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:.85rem;color:var(--muted);
}

/* ---------- field ---------- */
.field{display:flex;flex-direction:column;gap:.35rem;margin:0 0 var(--space-5);max-width:40rem}
.field label{font-family:var(--font-body);font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--muted);border-radius:var(--radius-s);padding:var(--space-2) var(--space-3);min-height:2.5rem;
}
.field textarea{min-height:6rem;resize:vertical}
.field [aria-invalid="true"]{border-color:var(--bad);border-width:2px}
.hint{font-size:.9rem;color:var(--muted)}
.error{font-size:.9rem;color:var(--bad);font-weight:600}
.required{color:var(--bad)}

/* ---------- doc: one document of a help page ---------- */
.doc{max-width:46rem}
.doc pre{
  overflow-x:auto;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-m);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.doc-list{margin:0;padding-left:var(--space-5)}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;margin:0 0 var(--space-5)}
table{border-collapse:collapse;width:100%}
caption{
  text-align:left;padding:var(--space-2) 0 var(--space-3);
  font-family:var(--font-heading);font-weight:420;letter-spacing:.06em;text-transform:uppercase;
}
th,td{text-align:left;padding:var(--space-3);border-bottom:1px solid var(--line);vertical-align:top}
/* A long value, such as a DID, a link or a claim with no break, wraps
   inside its cell, so no table reaches past the content column. */
td{overflow-wrap:anywhere}
td time{white-space:nowrap}
th{
  font-family:var(--font-body);font-weight:400;font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--secondary);
  border-bottom-color:var(--muted);
}
/* filters: the search and the filter fields of a list page on one
   row above its table; they wrap on a narrow screen. */
/* field-row: related fields of a form side by side, such as a label
   and its description; they wrap on a narrow screen. */
.filters,.field-row{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:flex-end;margin:0 0 var(--space-6)}
.filters .field,.field-row .field{flex:1 1 11rem;margin:0;max-width:none}
.filters .field:first-child{flex:2 1 16rem}
.field-row{margin-bottom:var(--space-4);align-items:flex-start}
/* A fieldset whose fields sit in one row takes the width of its column. */
.fieldset:has(>.field-row){max-width:none}
/* Two forms in one card, such as a choice and the action it opens. */
.card form+form{margin-top:var(--space-5)}
/* preview-tabs: the buttons that open the views of one preview; the
   open view carries aria-expanded. */
.preview-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);border-bottom:1px solid var(--line);margin:0 0 var(--space-4)}
.preview-tabs .btn[aria-expanded="true"]{color:var(--primary);box-shadow:inset 0 -2px 0 var(--role-accent)}
/* row-actions: the buttons of one table row on one line; each
   POST form inside it takes no space of its own. */
.row-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.row-actions form{display:contents}
.row-actions .btn{white-space:nowrap;min-height:2rem;padding:var(--space-1) var(--space-3);font-size:.7rem;letter-spacing:.1em}

/* ---------- badge ---------- */
.badge{
  display:inline-block;padding:.15rem .6rem;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  border:1px solid currentColor;color:var(--ink);
}
.badge-ok{color:var(--ok)}
.badge-warn{color:var(--warn)}
.badge-bad{color:var(--bad)}
.badge-info{color:var(--primary)}

/* ---------- toast ---------- */
.toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:var(--space-2);z-index:150;max-width:24rem}
.toast{
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  box-shadow:0 .25rem 1rem rgba(0,0,0,.2);
}
.toast-ok{border-left-color:var(--ok)}
.toast-warn{border-left-color:var(--warn)}
.toast-bad{border-left-color:var(--bad)}

/* ---------- dialog ---------- */
dialog{
  color:var(--ink);background:var(--paper);border:1px solid var(--ink);
  border-radius:var(--radius-m);padding:var(--space-5);max-width:32rem;width:calc(100% - 2rem);
}
dialog::backdrop{background:rgba(0,0,0,.6)}
/* A dialog that a page renders open, with no script to make it modal,
   sits in the flow of the page instead of over the side navigation. */
dialog[open]:not(:modal){position:static;margin:0 0 var(--space-6);max-width:40rem}
.dialog-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}

/* ---------- qr ---------- */
.qr{display:block;width:16rem;max-width:100%;background:#FFFFFF;padding:var(--space-2);border:1px solid var(--line)}

/* ---------- json ---------- */
.json summary{cursor:pointer;padding:.4rem 0;font-family:var(--font-body)}
.json pre{
  overflow:auto;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-m);
  font-size:.9rem;line-height:1.4;max-height:24rem;
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ---------- button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.5rem;padding:var(--space-2) 1.1rem;border-radius:var(--radius-s);
  font:inherit;font-family:var(--font-body);font-size:.8rem;font-weight:560;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  text-decoration:none;border:1px solid var(--primary);color:var(--primary);background:var(--paper);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg)}
.btn-primary{background:var(--primary);color:var(--paper)}
.btn-danger{border-color:var(--bad);color:var(--bad)}
.btn-danger:hover{background:var(--paper);border-color:var(--ink);color:var(--bad)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.6}
.btn-ghost{border-color:transparent;color:var(--ink)}
.btn-ghost:hover{background:transparent;border-color:transparent;color:var(--primary)}

/* ---------- responsive ---------- */
@media (max-width:56.25rem){
  .site-header,.site-footer{padding-left:var(--space-5);padding-right:var(--space-5)}
  .site-header::after{left:var(--space-5)}
  .site-header .nav,.site-header .stack-nav{order:3;width:100%}
  main,.shell main{padding:0 var(--space-5) var(--space-6)}
  /* The side nav folds into a disclosure above the page. */
  .shell{display:block}
  .side-nav{border-right:none;border-bottom:1px solid var(--line);padding:var(--space-2) var(--space-5)}
  .side-nav-toggle{
    display:list-item;cursor:pointer;min-height:2.5rem;padding:var(--space-2) 0;
    font-family:var(--font-body);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--secondary);
  }
  .side-nav[open] .side-nav-toggle{color:var(--primary)}
  .side-nav nav{padding:var(--space-2) 0 var(--space-4)}
  .side-label{margin-top:var(--space-3)}
  .hero{grid-template-columns:1fr}
  .hero-left{border-right:none;border-bottom:1px solid var(--line);padding:var(--space-7) 0}
  .hero-right{padding:var(--space-7) 0}
  .tiles,.tiles-3{grid-template-columns:1fr 1fr}
  .tile{padding-left:1.3rem;padding-right:1.3rem}
  .tile h2{font-size:1.3rem}
  .site-footer{flex-direction:column;align-items:flex-start}
}
@media (max-width:30rem){
  .tiles,.tiles-3{grid-template-columns:1fr}
}

/* ---------- page block ----------
   One section of a long page: an h2, a lead, a meta line at the right of
   the heading, and a body. */
.block{padding:var(--space-7) 0 var(--space-6);border-top:1px solid var(--line)}
.block:first-child{border-top:none}
/* The page header draws its own rule, so the first block after it needs none. */
.pg-header + .block{border-top:none;padding-top:0}
.block-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-3) var(--space-6);margin:0 0 var(--space-6)}
.block-head h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:0}
.block-lead{margin:var(--space-2) 0 0;color:var(--secondary);max-width:52ch}
.block-meta{font-family:var(--font-body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- figure ----------
   An inline SVG diagram. The classes colour the drawing with the tokens,
   so a theme change reaches it and no page carries its own style. */
.figure{margin:var(--space-3) 0 0;max-width:22rem}
.figure svg{display:block;width:100%;height:auto;overflow:visible}
.fig-node{fill:var(--paper);stroke:var(--primary);stroke-width:1.5}
.fig-edge{fill:none;stroke:var(--accent);stroke-width:1.2}
/* The text sizes come from the font-size attribute of each text element,
   in user units, so the words scale with the drawing. */
.fig-label{fill:var(--muted);font-family:var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.fig-text{fill:var(--ink);font-family:var(--font-heading);letter-spacing:.06em;text-anchor:middle}
.tile:hover .fig-node,.tile:focus-visible .fig-node{fill:var(--invert-bg);stroke:var(--invert-fg)}
.tile:hover .fig-edge,.tile:focus-visible .fig-edge{stroke:var(--invert-accent)}
.tile:hover .fig-text,.tile:focus-visible .fig-text{fill:var(--invert-fg)}
.tile:hover .fig-label,.tile:focus-visible .fig-label{fill:var(--invert-muted)}

/* ---------- stack cards ----------
   One card per stack of a deployment: name, version, components with
   their links, and one row per role with its state as a word. */
.stacks{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin:0 0 var(--space-6);
}
.stacks>li{display:flex;min-width:0}
.stack{
  flex:1;display:flex;flex-direction:column;gap:var(--space-4);min-width:0;
  padding:var(--space-5) 1.4rem var(--space-6);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stack-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-4)}
.stack-head h3{margin:0;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase}
.stack-version{
  font-family:var(--font-body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.stack-label{margin:0;font-family:var(--font-body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--role-accent)}
.stack-components{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);margin:calc(-1 * var(--space-2)) 0 0}
.stack-roles{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);margin:0}
.stack-roles-group{display:flex;flex-direction:column;gap:var(--space-4);margin-top:auto}
.stack-components>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);font-size:.9rem;padding:var(--space-1) 0;border-bottom:1px solid var(--line)}
.stack-component-name{font-family:var(--font-mono);font-size:.85rem}
.stack-component-version{color:var(--secondary);font-variant-numeric:tabular-nums}
.stack-links{display:flex;gap:var(--space-3);margin-left:auto;font-size:.85rem}
.stack-links a{text-decoration:none;font-weight:600}
.stack-links a:hover{text-decoration:underline}
.stack-role{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-size:.95rem}

/* ---------- call to action band ----------
   The band inverts like a hovered tile, so the primary button on it swaps
   to the paper colours. */
.cta{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-5) var(--space-7);
  margin:var(--space-6) 0;padding:var(--space-7) 2.4rem;
  background:var(--invert-bg);color:var(--invert-fg);
}
.cta h2{margin:0;color:var(--invert-fg);font-size:clamp(1.4rem,3vw,2rem)}
.cta-body{display:flex;flex-direction:column;gap:var(--space-2);max-width:40rem}
.cta-text{margin:0;color:var(--invert-muted);font-size:1.05rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.cta .btn-secondary{border-color:var(--invert-fg);color:var(--invert-fg);background:transparent}
.cta .btn-secondary:hover{background:var(--invert-fg);color:var(--invert-bg)}
.cta .btn-primary{background:var(--invert-fg);border-color:var(--invert-fg);color:var(--invert-bg)}
.cta .btn-primary:hover{background:var(--invert-accent);border-color:var(--invert-accent);color:var(--invert-bg)}

/* ---------- note ----------
   The small aside of a hero. */
.note{max-width:40rem}
.note p{margin:.8rem 0 0;line-height:1.6;color:var(--secondary)}

/* ---------- sign in ----------
   The chooser of a role: the role, the title, the lead and the back link
   on the left, a hairline panel with the provider buttons on the right.
   The realm of a provider sits in the monospace stack. */
.signin{
  display:grid;grid-template-columns:5fr 6fr;gap:var(--space-7);align-items:center;
  padding:var(--space-7) 0;min-height:min(calc(100vh - 12rem),44rem);
}
.signin-left{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;container-type:inline-size}
.signin-left .role-row{margin-top:0}
.signin h1{font-size:clamp(1.75rem,9cqi,4.5rem);line-height:.95;margin:0;overflow-wrap:normal;text-wrap:balance}
.signin-back{font-size:.9rem;font-weight:600;text-decoration:none}
.signin-back:hover{text-decoration:underline}
.signin-panel{
  display:flex;flex-direction:column;gap:var(--space-4);min-width:0;
  padding:var(--space-6) 2rem;border:1px solid var(--line);border-radius:var(--radius-m);
}
.signin-label{margin:0;font-family:var(--font-body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.signin-providers{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.signin-providers>li{display:flex}
.signin-provider{flex:1;justify-content:space-between;gap:var(--space-4);min-height:3.25rem;padding:var(--space-3) 1.25rem;text-align:left}
.signin-meta{font-family:var(--font-mono);font-size:.8rem;letter-spacing:0;text-transform:none;opacity:.85}
.signin-empty{margin:0;color:var(--secondary)}
.signin-callout{
  padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-left:3px solid var(--accent);
  font-size:.9rem;line-height:1.55;color:var(--secondary);
}
.signin-callout strong{color:var(--ink)}
.signin-panel .card{margin:0}
.signin-panel .field{margin:0 0 var(--space-4)}
.signin-or{display:flex;align-items:center;gap:var(--space-3);font-size:.8rem;color:var(--muted)}
.signin-or::before,.signin-or::after{content:'';flex:1;height:1px;background:var(--line)}
.signin-register{display:flex;flex-direction:column;gap:var(--space-3)}
.signin-register .btn{justify-content:center}
.signin-note{margin:0;text-align:center;font-size:.8rem;color:var(--muted)}
@media (max-width:56.25rem){
  .signin{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-6) 0}
  .signin-panel{padding:var(--space-5) 1.4rem}
}