/* Living Record: one document moving through six stages (02 · The flow).
   Tokens map onto site.css; the section uses the site's .sec / .wrap / kicker / h2 / lede. */
.kr{--bg:var(--canvas);--paper:#FBF8F0;--ink:var(--deep);--sub:var(--text-secondary);--coral:var(--accent);--ok:#2F7A5B;
  --rule:rgba(2,8,75,.14);--halo:rgba(232,88,62,.22);--shadow:0 1px 0 rgba(2,8,75,.06),0 18px 40px -18px rgba(2,8,75,.28)}
.kr p,.kr h3,.kr ol,.kr ul,.kr dl{margin:0}
.kr ol,.kr ul{padding:0;list-style:none}
.kr .num{font-variant-numeric:tabular-nums}
.kr .head{margin-bottom:clamp(36px,5vw,56px)}
.kr .head .lede{max-width:62ch;margin-top:22px}

/* rail — the logo's ring–bar–ring, extended to six stations */
.kr-rail{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:34px}
.kr-track{position:absolute;top:13px;left:calc(100%/12);right:calc(100%/12);height:3px;background:var(--rule);border-radius:2px}
.kr-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);border-radius:2px}
.kr-drop{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px var(--halo)}
.kr-st{position:relative;display:grid;justify-items:center;gap:8px;padding:0 4px 4px;background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.kr-st:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:8px}
.kr-ring{width:29px;height:29px;border-radius:50%;border:3px solid var(--ink);background:var(--bg);display:grid;place-items:center;transition:transform .35s ease,background-color .35s ease}
.kr-ring::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .35s ease}
.kr-st.is-done .kr-ring::after{transform:scale(1)}
.kr-st.is-current .kr-ring{transform:scale(1.12)}
.kr-st.is-current .kr-ring::after{transform:scale(1);background:var(--coral)}
.kr-st-name{font-weight:600;font-size:15px;line-height:1.1;letter-spacing:-.01em}
.kr-st-team{font-size:12px;color:var(--sub);line-height:1}
.kr-st:not(.is-current):not(.is-done) .kr-st-name{color:var(--sub)}

/* main */
.kr-main{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.kr-doc{align-self:start;background:var(--paper);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.kr-swap{display:grid}
.kr-swap>*{grid-area:1/1;min-width:0;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .45s}
.kr-swap>:not(.is-active){opacity:0;visibility:hidden;transform:translateY(10px)}
.kr-swap>.is-leaving{transform:translateY(-10px)}

.kr-dh{display:flex;align-items:center;gap:14px;padding:18px 22px}
#krHeads{border-bottom:1px solid var(--rule)}
.kr-dh .kmark{width:34px}
.kr-dh-type{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sub)}
.kr-dh-no{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.kr-pill{margin-left:auto;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.kr-pill.ok{color:var(--ok)}
.kr-pill.warn{color:var(--coral)}

/* the shared fields that never change */
.kr-shared{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px 18px;align-items:center;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--rule)}
.kr-f{min-width:0}
.kr-f dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.kr-f dd{margin:0;font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.kr-same{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink);border:1px dashed var(--rule);border-radius:999px;padding:4px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.kr-same::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.kr-shared.pulse dd{animation:kr-pulse 1.1s ease}
@keyframes kr-pulse{0%{color:var(--coral)}100%{color:var(--ink)}}

.kr-body{padding:22px;min-height:290px;display:grid;align-content:start;gap:16px}

/* entrance for pieces inside the active body; final state is the default */
.kr-body.is-active .a{animation:kr-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes kr-in{from{opacity:0;transform:translateY(8px)}}

/* stage pieces */
.kr-table{width:100%;border-collapse:collapse;font-size:14px}
.kr-table th{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--rule)}
.kr-table td{padding:12px 0;border-bottom:1px solid var(--rule)}
.kr-table .r{text-align:right}
.kr-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:20px;letter-spacing:-.02em}
.kr-tags{display:flex;flex-wrap:wrap;gap:8px}
.kr-tag{font-size:12px;padding:5px 10px;border-radius:7px;background:var(--panel);border:1px solid var(--rule);color:var(--sub)}
.kr-tag b{color:var(--ink);font-weight:600}

.kr-convert{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.kr-mini{border:1px solid var(--rule);border-radius:10px;padding:14px;background:var(--panel)}
.kr-mini .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.kr-mini .n{font-weight:700;font-size:18px;letter-spacing:-.02em}
.kr-mini.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kr-mini.on .t{color:inherit;opacity:.75}
.kr-arrow{font-size:22px;color:var(--coral)}
.kr-checks{display:grid;gap:8px;font-size:14px}
.kr-checks li{display:flex;gap:10px;align-items:baseline}
.kr-checks li::before{content:"✓";color:var(--ok);font-weight:700}
.kr-checks li.info::before{content:"→";color:var(--sub)}

.kr-reqs{display:grid;gap:14px}
.kr-req{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:6px 14px;align-items:center;font-size:14px}
.kr-req .nm b{display:block;font-weight:600}
.kr-req .nm span{font-size:12px;color:var(--sub)}
.kr-bar{position:relative;height:10px;border-radius:5px;background:var(--rule);overflow:hidden}
.kr-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--ink);border-radius:5px}
.kr-req.short .kr-bar{background:repeating-linear-gradient(135deg,var(--halo) 0 5px,transparent 5px 10px);outline:1.5px solid var(--coral);outline-offset:-1.5px}
.kr-body.is-active .kr-bar i{animation:kr-grow 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes kr-grow{from{width:0}}
.kr-req .q{font-size:13px;color:var(--sub);white-space:nowrap}
.kr-req.short .q{color:var(--coral);font-weight:600}
.kr-calc{font-size:13px;color:var(--sub)}
.kr-calc b{color:var(--coral)}

.kr-suppliers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kr-sup{border:1px solid var(--rule);border-radius:10px;padding:14px;display:grid;gap:4px;background:var(--panel);position:relative}
.kr-sup .p{font-weight:700;font-size:20px;letter-spacing:-.02em}
.kr-sup .m{font-size:13px;color:var(--sub)}
.kr-sup.pick{border:2px solid var(--ink);padding:13px}
.kr-sup .chosen{position:absolute;top:-10px;right:10px;font-size:11px;font-weight:600;background:var(--ink);color:var(--bg);border-radius:999px;padding:2px 9px}
.kr-body.is-active .kr-sup.pick{animation:kr-pick .6s ease both;animation-delay:1.1s}
@keyframes kr-pick{from{border-color:var(--rule)}}
.kr-receipt{display:grid;gap:8px}
.kr-receipt .row{display:flex;justify-content:space-between;font-size:14px}

.kr-ops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.kr-op{font-size:13px;font-weight:600;text-align:center;padding:9px 4px;border-radius:8px;background:var(--ink);color:var(--bg)}
.kr-body.is-active .kr-op{animation:kr-op .4s ease both;animation-delay:var(--d)}
@keyframes kr-op{from{background:var(--panel);color:var(--sub)}}
.kr-count{display:flex;align-items:baseline;gap:10px}
.kr-count .big{font-size:clamp(48px,6vw,68px);font-weight:700;letter-spacing:-.05em;line-height:1}
.kr-count .of{font-size:16px;color:var(--sub)}
.kr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kr-stat{border-top:1px solid var(--rule);padding-top:8px}
.kr-stat dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.kr-stat dd{margin:0;font-weight:600}

.kr-link{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.kr-link .kr-mini{display:grid;gap:6px}
.kr-link .src{font-size:12px;color:var(--sub)}
.kr-link .kr-mini.on .src{color:inherit;opacity:.75}
.kr-chain{display:grid;place-items:center;color:var(--coral)}
.kr-chain svg{width:44px;height:12px}
.kr-pay{display:flex;align-items:center;gap:10px;font-size:14px}
.kr-paystate{display:inline-grid}
.kr-paystate span{grid-area:1/1;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid currentColor}
.kr-paystate .open{color:var(--sub);visibility:hidden}
.kr-paystate .paid{color:var(--ok)}
.kr-body.is-active .kr-paystate .open{animation:kr-hide .01s 2.2s both;visibility:visible}
.kr-body.is-active .kr-paystate .paid{animation:kr-show .35s 2.2s both}
@keyframes kr-hide{to{visibility:hidden}}
@keyframes kr-show{from{opacity:0;transform:scale(.9)}}

/* side: caption + history */
.kr-side{display:grid;align-content:start;gap:22px;min-width:0}
.kr-cap{display:grid;gap:8px;min-height:9.5em}
.kr-cap-k{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sub)}
.kr-cap-t{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.kr-cap-d{color:var(--sub);text-wrap:pretty}
.kr-hist-h{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sub);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.kr-hist{display:grid}
.kr-hist li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.35}
.kr-hist li::before{grid-row:span 2;content:"";width:9px;height:9px;margin-top:5px;border-radius:50%;border:2px solid var(--ink)}
.kr-hist li.new::before{background:var(--coral);border-color:var(--coral)}
.kr-hist li.new{animation:kr-in .45s ease both}
.kr-hist li span{grid-column:2;color:var(--sub);font-size:12px}
.kr-ctrl{display:flex;gap:8px;align-items:center}
.kr-btn{font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:999px;padding:7px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.kr-btn:hover{border-color:var(--ink)}
.kr-btn:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.kr-btn svg{width:10px;height:10px;fill:currentColor}
.kr .kr-legal{margin-top:36px;font-size:12px;color:var(--sub);max-width:92ch}

@media (min-width:920px){
  .kr-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px}
}
@media (max-width:640px){
  .kr-st-team{display:none}
  .kr-st-name{font-size:11px}
  .kr-ring{width:24px;height:24px;border-width:2.5px}
  .kr-track{top:11px}
  .kr-shared{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kr-same{grid-column:1/-1;justify-self:start}
  .kr-dh,.kr-shared,.kr-body{padding-left:16px;padding-right:16px}
  .kr-dh-no{font-size:20px}
  .kr-req{grid-template-columns:minmax(0,1fr) auto}
  .kr-req .kr-bar{grid-column:1/-1;grid-row:2}
  .kr-convert,.kr-link{grid-template-columns:minmax(0,1fr)}
  .kr-arrow,.kr-chain{transform:rotate(90deg);justify-self:center}
  .kr-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kr-body{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .kr *,.kr *::before,.kr *::after{animation:none!important;transition:none!important}
  .kr-paystate .open{visibility:hidden!important}
}