/* ===========================================================================
   DKDS brand tokens: the colours, type and motion shared by dkds.org and
   scan.dkds.org. Technical draughting: paper and ink carry the page; the
   accent is spent sparingly; status colours belong to machine output only.
   =========================================================================== */

:root{
  --paper:        #F5F6F4;
  --paper-sunk:   #ECEEEA;
  --sheet:        #FCFCFB;
  --rule:         #D8DBD6;
  --graphite:     #5C6169;
  --ink:          #101418;
  --accent:       #2563EB;
  --accent-hover: #1D4FD0;
  --accent-ink:   #FFFFFF;

  --ok:       #1F7A4D;
  --ok-bg:    rgba(31,122,77,0.10);
  --warn:     #A23B12;
  --warn-bg:  rgba(162,59,18,0.10);
  --idle-bg:  rgba(16,20,24,0.055);

  --font-sans:  "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Roboto Slab", Georgia, serif;
  --font-mono:  "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --radius-sm: 2px;
  --radius-md: 4px;
}

/* ===========================================================================
   DKDS site: shared foundation for the landing page and the documentation.
   The accent is spent on the primary button and on one element inside each
   figure.
   =========================================================================== */

/* Colours, type and motion come from brand/tokens.css, which the build places first. */

:root{
  --nav-h: 62px;
  --gutter: 24px;
  --measure: 66ch;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,pre{ margin:0; }
ul,ol{ padding:0; list-style:none; }

/* ---- type --------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:500; }
h1{ font-size:clamp(2.25rem, 1.3rem + 3.9vw, 4rem); line-height:1.08; letter-spacing:-0.025em; }
h2{ font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height:1.15; letter-spacing:-0.02em; }
h3{ font-size:1.375rem; line-height:1.25; letter-spacing:-0.01em; }
h4{ font-size:1.0625rem; line-height:1.35; }
.lede{ font-size:1.125rem; }
.small{ font-size:0.875rem; line-height:1.5; }
.mono{ font-family:var(--font-mono); }
.dim{ color:var(--graphite); }
p{ max-width:var(--measure); }

a{ color:var(--ink); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ text-decoration-color:var(--graphite); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:1px; }

[hidden]{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- layout ------------------------------------------------------------- */
.wrap{ max-width:1200px; margin:0 auto; padding-inline:var(--gutter); }
.col{ max-width:680px; }
section{ padding-block:112px; }
.stack-16 > * + *{ margin-top:16px; }
.stack-24 > * + *{ margin-top:24px; }

.skip{
  position:absolute; left:var(--gutter); top:-60px; z-index:60;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:10px 14px; transition:top var(--dur-fast) var(--ease);
}
.skip:focus{ top:10px; }

/* ---- buttons: set in mono, two kinds only -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 20px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-weight:500; font-size:0.875rem; letter-spacing:0;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-line:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn-sm{ min-height:38px; padding:0 14px; font-size:0.8125rem; }
/* The external-link icon: links to other sites open in a new tab. */
.ext{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn .ext{ width:14px; height:14px; }
.ext-inline{ display:inline-block; width:0.75em; height:0.75em; margin-left:0.25em; vertical-align:-0.02em; }

/* ---- nav ---------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color var(--dur-fast) var(--ease);
}
.nav[data-scrolled="true"]{ border-bottom-color:var(--rule); }
.nav-in{ height:var(--nav-h); display:flex; align-items:center; gap:32px; }
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--font-serif); font-weight:600; font-size:1.0625rem; letter-spacing:0.01em;
}
.brand .mark{ width:24px; height:24px; flex:none; shape-rendering:crispEdges; }
.nav-links{ display:flex; gap:26px; margin-left:auto; align-items:center; }
.nav-links a:not(.btn){ font-size:0.9375rem; color:var(--graphite); text-decoration:none; }
.nav-links a:not(.btn):hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); font-weight:500; }

/* ---- figure chrome: a frame, and the control bar under every moving figure */
.frame{ margin-top:48px; padding:clamp(16px,3vw,32px); border:1px solid var(--rule); border-radius:var(--radius-md); }
.figbar{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.fignote{ margin:0 0 0 6px; font-size:0.875rem; color:var(--graphite); max-width:66ch; }
.iconbtn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; cursor:pointer;
  background:var(--paper); color:var(--graphite);
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.iconbtn:hover{ color:var(--ink); border-color:var(--graphite); }
.iconbtn svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.iconbtn .i-play{ display:none; }
.iconbtn[data-state="paused"] .i-play{ display:block; }
.iconbtn[data-state="paused"] .i-pause{ display:none; }
/* controls only mean something once the script is running */
.ctl{ display:none; }
.js .ctl{ display:inline-flex; }

/* anything in a figure being seeked or reset moves instantly */
.instant, .instant *{ transition:none !important; animation:none !important; }
.paused, .paused *{ animation-play-state:paused !important; }

/* ---- footer ------------------------------------------------------------- */
footer{ border-top:1px solid var(--rule); padding-block:64px 40px; }
.fgrid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px; }
.fgrid h4{ font-family:var(--font-sans); font-size:0.875rem; font-weight:500; color:var(--graphite); margin-bottom:14px; }
.fgrid a{ display:block; padding:5px 0; font-size:0.9375rem; text-decoration:none; }
.fgrid a:hover{ text-decoration:underline; }
.fgrid .brand{ display:flex; padding:0; }
.fbase{ margin-top:56px; display:flex; gap:24px; flex-wrap:wrap; font-size:0.875rem; color:var(--graphite); }

/* ---- responsive --------------------------------------------------------- */
@media (max-width:920px){
  section{ padding-block:72px; }
  .fgrid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:620px){
  .nav-in, .nav-links{ gap:16px; }
  .nav .btn-sm{ padding:0 10px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ---- page not found ------------------------------------------------------- */
.notfound{ padding-block:96px 120px; }
.notfound .lede{ margin-top:16px; }
.notfound-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ===========================================================================
   The four-party loop: issuer, DNS, document, verifier. Shared by the landing
   page, where it animates, and the documentation, where it is static.
   =========================================================================== */

/* ---- how it works: four parties in a square, four steps around it --------
   Built from grid cells rather than a measured SVG, so it reflows on its
   own. Every wire is in the markup and drawn; the script only marks which
   steps are done and which is current. */
.loop{
  display:grid; grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);
  grid-template-rows:auto 140px auto;
}
.n-issuer{ grid-area:1 / 1; } .w1{ grid-area:1 / 2; } .n-dns{ grid-area:1 / 3; }
.w2{ grid-area:2 / 1; }                                .w4{ grid-area:2 / 3; }
.n-doc{ grid-area:3 / 1; }    .w3{ grid-area:3 / 2; } .n-ver{ grid-area:3 / 3; }
.node{
  border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--paper);
  padding:18px 20px; min-width:0; min-height:132px;
}
.nk{ font-family:var(--font-serif); font-weight:500; font-size:1.25rem; }
.nv{ font-family:var(--font-mono); font-size:0.875rem; margin-top:6px; }
.nd{ font-size:0.875rem; color:var(--graphite); margin-top:4px; }
.ndoc{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:8px; }
.ndoc .lines{ flex:1; display:grid; gap:10px; }
.ndoc .lines i{ display:block; height:1px; background:var(--rule); }
.ndoc .lines i:nth-child(2){ width:70%; } .ndoc .lines i:nth-child(4){ width:55%; }
.mini{ width:84px; flex:none; }

/* a wire: one hairline, an arrowhead, and its step number */
.wire{ position:relative; }
.wire::before{ content:""; position:absolute; background:var(--rule); transition:background 260ms var(--ease); }
.wire::after{
  content:""; position:absolute; width:7px; height:7px;
  border-top:1px solid var(--rule); border-right:1px solid var(--rule);
  transition:border-color 260ms var(--ease);
}
.w-h::before{ left:6px; right:6px; top:50%; height:1px; }
.w-h::after{ right:6px; top:calc(50% - 3.5px); transform:rotate(45deg); }
.w-h.left::after{ right:auto; left:6px; transform:rotate(-135deg); }
.w-v::before{ top:6px; bottom:6px; left:50%; width:1px; }
.w-v::after{ bottom:6px; left:calc(50% - 3.5px); transform:rotate(135deg); }
.w-v.up::after{ bottom:auto; top:6px; transform:rotate(-45deg); }
.num{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--rule); color:var(--graphite);
  font-family:var(--font-mono); font-size:0.75rem;
  transition:background 260ms var(--ease), border-color 260ms var(--ease), color 260ms var(--ease);
}
/* number and label sit above a horizontal wire, beside a vertical one */
.w-h .num{ top:calc(50% - 22px); left:22px; transform:translateY(-50%); }
.w-v .num{ left:calc(50% + 16px); transform:translateY(-50%); }
.wl{
  position:absolute; font-size:0.875rem; line-height:1.3; color:var(--graphite);
  transition:color 260ms var(--ease);
}
.w-h .wl{ left:54px; right:14px; bottom:calc(50% + 12px); }
.w-v .wl{ left:calc(50% + 46px); right:0; top:50%; transform:translateY(-50%); max-width:240px; }
.wire.done .wl{ color:var(--ink); }
.wire.cur .wl{ color:var(--ink); }
html:not(.js) .wl{ color:var(--ink); }

/* done steps in ink, the current one in the accent; with no script, all done */
html:not(.js) .wire::before{ background:var(--ink); }
html:not(.js) .wire::after{ border-color:var(--ink); }
.wire.done::before{ background:var(--ink); }
.wire.done::after{ border-color:var(--ink); }
.wire.done .num{ border-color:var(--ink); color:var(--ink); }
.wire.cur::before{ background:var(--accent); }
.wire.cur::after{ border-color:var(--accent); }
.wire.cur .num{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* the steps, which are also the caption */
.loop-steps{ margin-top:40px; max-width:880px; border-top:1px solid var(--rule); }
.loop-steps li{
  display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule);
  font-size:0.9375rem; transition:color 260ms var(--ease);
}
.loop-steps .n{ flex:none; width:22px; font-family:var(--font-mono); font-size:0.8125rem; padding-top:1px; color:var(--graphite); }
.js .loop[data-armed] ~ .loop-steps li{ color:var(--graphite); cursor:pointer; }
.js .loop[data-armed] ~ .loop-steps li:hover{ color:var(--ink); }
.js .loop[data-armed] ~ .loop-steps li.cur{ color:var(--ink); }
.loop-steps li.cur .n{ color:var(--accent); }

/* the loop: a dot that travels each wire as its step runs */
.tok{
  position:absolute; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%;
  background:var(--accent); opacity:0; pointer-events:none;
}
.w-h .tok{ top:50%; left:8px; }
.w-v .tok{ left:50%; top:8px; }
.wire.go .tok{ opacity:1; }
.w-h.go .tok{ animation:tokR 1100ms var(--ease) forwards; }
.w-h.left.go .tok{ animation:tokL 1100ms var(--ease) forwards; }
.w-v.go .tok{ animation:tokD 1100ms var(--ease) forwards; }
.w-v.up.go .tok{ animation:tokU 1100ms var(--ease) forwards; }
.w-v.up.back .tok{ opacity:1; animation:tokD 1100ms var(--ease) forwards; }
@keyframes tokR{ from{ left:8px; } 90%{ opacity:1; } to{ left:calc(100% - 8px); opacity:0; } }
@keyframes tokL{ from{ left:calc(100% - 8px); } 90%{ opacity:1; } to{ left:8px; opacity:0; } }
@keyframes tokD{ from{ top:8px; } 90%{ opacity:1; } to{ top:calc(100% - 8px); opacity:0; } }
@keyframes tokU{ from{ top:calc(100% - 8px); } 90%{ opacity:1; } to{ top:8px; opacity:0; } }

/* a node that is acting */
.node{ transition:border-color 260ms var(--ease), background 260ms var(--ease); }
.node.act{ border-color:var(--ink); background:var(--sheet); }

/* what each step leaves behind; all present with no script */
.nrec{ font-family:var(--font-mono); font-size:0.8125rem; color:var(--graphite); margin-top:6px; overflow-wrap:anywhere; }
.nok{ display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; line-height:1.4; margin-top:8px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:0.75rem; color:var(--ok); background:var(--ok-bg); }
.js .loop[data-armed] [data-show]{ opacity:0; transition:opacity 400ms var(--ease); }
.js .loop[data-armed] [data-show].on{ opacity:1; }
/* the record types out; the code prints top to bottom */
.js .loop[data-armed] .nrec{ clip-path:inset(0 100% 0 0); transition:clip-path 1200ms steps(32), opacity 1ms; }
.js .loop[data-armed] .nrec.on{ clip-path:inset(0 0 0 0); }
.js .loop[data-armed] .print{ clip-path:inset(0 0 100% 0); transition:clip-path 1300ms steps(16), opacity 1ms; }
.js .loop[data-armed] .print.on{ clip-path:inset(0 0 0 0); }
.mini{ position:relative; display:block; }
.mini .scan{ position:absolute; left:-3px; right:-3px; top:0; height:2px; background:var(--accent); opacity:0; }
.mini.scanning .scan{ animation:scan 1000ms var(--ease) forwards; }
@keyframes scan{ 0%{ opacity:1; top:0; } 90%{ opacity:1; top:calc(100% - 2px); } 100%{ opacity:0; top:calc(100% - 2px); } }
.mini svg{ width:100%; height:auto; }

/* static: every step drawn as done, every result shown */
.loop.static .wire::before{ background:var(--ink); }
.loop.static .wire::after{ border-color:var(--ink); }
.loop.static .num{ border-color:var(--ink); color:var(--ink); }
.loop.static .wl{ color:var(--ink); }
.loop.static .tok{ display:none; }
.loop.static ~ .loop-steps li{ color:var(--ink); }

@media (max-width:920px){
  .loop{ grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr); }
}
@media (max-width:620px){
  .loop{ grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); grid-template-rows:auto 72px auto; }
  .node{ padding:10px; min-height:0; }
  .nk{ font-size:1rem; }
  .nv{ font-size:0.6875rem; }
  .nrec{ font-size:0.6875rem; }
  .mini{ width:48px; }
  .wl{ display:none; }
  .w-h .num{ left:50%; transform:translate(-50%,-50%); top:calc(50% - 16px); }
  .nd{ display:none; }
  .w-v .num{ left:calc(50% + 18px); }
}