/* Classified Intelligence. The whole look comes off Vadim's avatar and banner (art/ref/), measured
   rather than recognised: every colour here was read out of those two files and every proportion is
   a share of the folder's own body width. DESIGN-NOTES.md keeps the numbers and where they come from.

   One blue desk, two surfaces on it: cream paper to read and a yellow folder to hold it. A black bar
   is a state, never an ornament. Nothing is pixel art and nothing is SVG except the platforms' own
   marks on the four keys. */

@font-face {
  font-family: "Apfel Grotezk";
  src: url("/fonts/apfel-grotezk-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("/fonts/apfel-grotezk-mittel.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("/fonts/apfel-grotezk-fett.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* measured off the creatives */
  --bg: #a5d7ff;
  --paper: #f6eada;
  --paper-cut: #e0cfb6;
  --folder-lit: #f9d194;
  --folder: #f6c986;
  --folder-dim: #efbf7a;
  --folder-lip: #be8e4c;
  --ink: #1b1c1e;
  --ink-2: #4a525c;
  --info: #015aeb;
  --ok: #0f944b;              /* the dots: a graphical mark, 3.3:1, which is the floor for those */
  --stop: #e7261d;
  --ok-ink: #0b7a3d;          /* the same meaning as text: 4.58:1 on paper, 5.43:1 on white */
  --stop-ink: #cc1d15;        /* 4.71:1 on paper, 5.59:1 on white */
  --off: #b9c6d2;
  --bar: #1b1c1e;             /* a censor bar, the banner's own black */

  /* a shadow on this page is always the blue of the desk, never grey */
  --lift-1: 0 4px 12px rgba(29, 74, 110, .18);
  --lift-2: 0 8px 22px rgba(29, 74, 110, .22);
  --lift-3: 0 18px 44px rgba(29, 74, 110, .28);

  /* the one type scale and the one spacing scale */
  --t12: 12px; --t14: 14px; --t16: 16px; --t20: 20px; --t24: 24px; --t32: 32px; --t48: 48px;
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px; --s64: 64px;

  --col: 1120px;
  --radius: 12px;             /* every card of the same kind */
  --radius-folder: 28px;      /* 0.042 of the folder's width, as measured */
  --sans: "Apfel Grotezk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Courier Prime", ui-monospace, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t16);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: var(--s12) var(--s16); border-radius: 0 0 var(--radius) 0;
  text-decoration: none; z-index: 20;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- the first screen */

/* His banner, alive. The bars come in from the left edge of the window, the wordmark sits among them,
   the folder stands at the right. Every bar is the banner's: near black, radius 0.16 of its height,
   one soft blue shadow down and to the right. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vh, 88px) 0 var(--s64);
}

.hero__in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--s24);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--s48);
  align-items: start;
}

/* the bar field: absolutely placed in the full width band, so the bars can start at the window's own
   left edge as they do on the banner, and never under the text column's reading lines */
.hero__bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateY(var(--drift, 0px));
}
.hbar {
  position: absolute;
  display: block;
  height: 40px;
  border-radius: 7px;
  background: linear-gradient(180deg, #2a2c30 0, var(--bar) 18%, #141517 100%);
  box-shadow: 10px 14px 22px rgba(29, 74, 110, .30);
  will-change: transform;
}
img.hbar { height: auto; background: none; box-shadow: none; border-radius: 0; }

/* placed against the text column's left edge (the column starts at --gutter) */
.hero { --gutter: max(var(--s24), calc((100vw - var(--col)) / 2 + var(--s24))); }
.hbar--1 { top: 40px;  left: -24px; width: calc(var(--gutter) - 20px); }
.hbar--2 { top: 118px; left: -24px; width: calc(var(--gutter) - 52px); }
.hbar--3 { top: 104px; left: calc(var(--gutter) - 30px); width: 210px; }
.hbar--4 { top: 196px; left: -24px; width: calc(var(--gutter) - 34px); }
.hbar--5 { top: 262px; left: calc(var(--gutter) - 400px); width: 330px; }
.hbar--6 { top: 350px; left: -24px; width: calc(var(--gutter) - 96px); }

/* the intro: each bar slides in from the left edge, one after another */
body[data-intro="pending"] .hbar,
body[data-intro="run"] .hbar { animation: bar-in .9s cubic-bezier(.2, .8, .2, 1) both; }
.hbar--1 { animation-delay: .05s !important; }
.hbar--2 { animation-delay: .14s !important; }
.hbar--3 { animation-delay: .26s !important; }
.hbar--4 { animation-delay: .33s !important; }
.hbar--5 { animation-delay: .44s !important; }
.hbar--6 { animation-delay: .52s !important; }
@keyframes bar-in {
  from { transform: translateX(calc(-100% - 40px)); }
  to { transform: none; }
}

.hero__copy { padding-top: 180px; }        /* the wordmark sits in the banner's second row of bars */

.eyebrow {
  margin: 0 0 var(--s12);
  font-family: var(--mono);
  font-size: var(--t14);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero .eyebrow { position: absolute; top: 0; }

.wordmark {
  margin: 0 0 var(--s24);
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 62px);
  letter-spacing: .14em;
  line-height: 1;
  color: var(--ink);
  min-height: 1em;
  white-space: nowrap;
}
.wordmark__type::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .82em;
  margin-left: .04em;
  vertical-align: -.06em;
  background: var(--ink);
  animation: caret 1s steps(1) infinite;
}
.wordmark__type.is-typed::after { animation: caret 1s steps(1) 3 forwards; }
body[data-intro="done"] .wordmark__type:not(.is-typed)::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }

.lede {
  margin: 0 0 var(--s16);
  max-width: 22ch;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.01em;
}

/* A redaction over live words. The bar lifts from its left end and slides off to the right; the curl
   rides on the edge that is lifting. --peel runs from 0 to 100% and is typed, so it can transition. */
@property --peel { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.redact { position: relative; white-space: nowrap; }
.redact > span { position: relative; }
.redact::after,
.redact::before {
  content: "";
  position: absolute;
  top: .04em; bottom: -.02em;
  pointer-events: none;
}
.redact::after {
  left: -.14em; right: -.14em;
  border-radius: .14em;
  background: linear-gradient(180deg, #2a2c30 0, var(--bar) 20%, #141517 100%);
  box-shadow: .1em .14em .3em rgba(29, 74, 110, .3);
  clip-path: inset(-.5em -.5em -.5em var(--peel));
  transition: --peel .75s cubic-bezier(.55, 0, .25, 1);
}
.redact::before {
  /* the curl: the underside of the lifted end, lighter, turned toward the light */
  left: calc(var(--peel) - .14em - .05em);
  width: .7em;
  z-index: 1;
  border-radius: .3em .1em .1em .3em;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, #6b7078 52%, #2b2e33 78%, #17181a 100%);
  transform-origin: right center;
  transform: perspective(60px) rotateY(-38deg) skewY(-6deg);
  opacity: 0;
  transition: --peel .75s cubic-bezier(.55, 0, .25, 1), opacity .2s ease;
}
.redact.is-peeled::after { --peel: 100%; opacity: 0; transition: --peel .75s cubic-bezier(.55, 0, .25, 1), opacity .12s linear .7s; }
.redact.is-peeled::before { --peel: 100%; animation: curl-fade .75s ease both; }
.redact.is-instant::after,
.redact.is-instant::before { transition: none; animation: none; opacity: 0; }
@keyframes curl-fade { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

.hero__body {
  margin: 0 0 var(--s32);
  max-width: 54ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s12); margin: 0 0 var(--s32); }

.tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
  margin: 0;
  border-top: 2px solid var(--ink);
}
.tally__i { padding: var(--s12) var(--s16) 0 0; }
.tally__i + .tally__i { padding-left: var(--s16); border-left: 1px solid rgba(27, 28, 30, .18); }
.tally dt { font-size: var(--t12); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tally dd { margin: var(--s4) 0 0; font-family: var(--mono); font-weight: 700; font-size: var(--t24); line-height: 1.2; white-space: nowrap; }

/* ------------------------------------------------------------ the object on it */

.hero__object { position: relative; display: grid; justify-items: center; }

.dossier-obj {
  position: relative;
  width: 100%;
  max-width: 400px;
  z-index: 2;
  animation: folder-float 7s ease-in-out infinite;
}
body:not([data-intro="done"]) .dossier-obj { animation: folder-drop 1s cubic-bezier(.2, .9, .25, 1.15) .2s both; }
.dossier-obj__img { width: 100%; height: auto; }
@keyframes folder-drop {
  from { opacity: 0; transform: translateY(-40px) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}
@keyframes folder-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-.4deg); }
}

/* the three squares on his folder, measured off the picture (7.84 / 14.73 / 21.62 % across, 72.34 %
   down, 4.19 x 3.74 % each): the lit one glows over the print, the others stay as printed */
.lamp {
  position: absolute;
  top: 72.34%;
  width: 4.19%;
  height: 3.74%;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .4s ease;
}
.lamp--b { left: 7.84%; background: #2f7bff; box-shadow: 0 0 10px 3px rgba(47, 123, 255, .75); }
.lamp--g { left: 14.73%; background: #22c46a; box-shadow: 0 0 10px 3px rgba(34, 196, 106, .7); }
.lamp--r { left: 21.62%; background: #ff3b30; box-shadow: 0 0 10px 3px rgba(255, 59, 48, .7); }
.lamp.is-lit { opacity: 1; }
.lamp.is-blink { animation: lamp-blink .9s steps(1) 1; }
@keyframes lamp-blink { 0%, 50% { opacity: .15; } 25%, 75%, 100% { opacity: 1; } }

/* the case slip: a sheet that slides out from under the folder and carries the coin */
.slip {
  position: relative;
  z-index: 1;
  width: calc(100% - 28px);
  max-width: 372px;
  margin-top: -34px;
  padding: calc(34px + var(--s16)) var(--s24) var(--s24);
  background: var(--paper);
  border: 1px solid var(--paper-cut);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--lift-2);
}
body:not([data-intro="done"]) .slip { animation: slip-out .8s cubic-bezier(.2, .8, .2, 1) .9s both; }
@keyframes slip-out { from { transform: translateY(-70px); opacity: 0; } to { transform: none; opacity: 1; } }

.slip__k { margin: 0 0 var(--s8); font-size: var(--t12); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.slip__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s12); align-items: center; }
.slip__v {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--s8) var(--s12);
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t14);
  line-height: 1.35;
  background: #fff;
  border: 1px dashed var(--paper-cut);
  border-radius: 8px;
  overflow-wrap: anywhere;
  user-select: all;
}
.slip__note { margin: var(--s8) 0 var(--s16); font-size: var(--t14); color: var(--ink-2); }
.slip__keys { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  min-height: 52px;
  padding: 0 var(--s24);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: var(--t16);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--ink { background: var(--ink); color: #fff; border: 2px solid var(--ink); box-shadow: 4px 6px 0 rgba(29, 74, 110, .28); }
.btn--ink:hover { transform: translate(-1px, -2px); box-shadow: 6px 9px 0 rgba(29, 74, 110, .28); }
.btn--ink:active { transform: translate(2px, 3px); box-shadow: 1px 2px 0 rgba(29, 74, 110, .28); }
.btn--line { background: rgba(246, 234, 218, .55); color: var(--ink); border: 2px solid var(--ink); }
.btn--line:hover { background: var(--paper); transform: translateY(-2px); }
.btn--line:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 var(--s16); font-size: var(--t14); }

/* -------------------------------------------------------------------- the dossier */

.dossier {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--s32) var(--s24) var(--s64);
  scroll-margin-top: var(--s16);
}

.dossier__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s24);
  align-items: end;
  margin: 0 0 var(--s32);
}
.section__title {
  margin: 0 0 var(--s8);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.section__lede { margin: 0; max-width: 62ch; font-size: 17px; color: var(--ink); }

.advance { display: grid; gap: var(--s8); justify-items: end; }
.advance__state { margin: 0; font-size: var(--t14); color: var(--ink-2); }
.advance__state b { font-weight: 700; color: var(--ink); }

/* one folder: index tabs along its top edge, the body behind the sheet, a lip in front */
.folder { position: relative; }

.tabs {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 0 var(--s16);
  margin-bottom: -2px;
}

.tab {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 104px;
  padding: var(--s12) var(--s12) var(--s16);
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: linear-gradient(180deg, #f2c27c 0, #e9b56d 100%);
  border: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 -2px 10px rgba(29, 74, 110, .10);
  cursor: pointer;
  transform: translateY(10px);
  transition: transform .18s ease, background .18s ease;
}
.tab:hover { transform: translateY(4px); }
.tab[aria-selected="true"] {
  z-index: 2;
  transform: none;
  background: linear-gradient(180deg, #fadead 0, var(--folder-lit) 100%);
}
.tab__no { font-family: var(--mono); font-weight: 700; font-size: var(--t14); letter-spacing: .1em; color: var(--ink-2); }
.tab__name { font-weight: 700; font-size: var(--t16); line-height: 1.2; }
.tab__state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--t12); line-height: 1.35; color: var(--ink-2); }
.tab__seal {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tab--open .tab__words { color: var(--ok-ink); font-weight: 700; }
.tab .rail--tab { margin-top: var(--s8); height: 5px; max-width: none; background: rgba(27, 28, 30, .14); }
.tab .rail--tab i { background: var(--ink); }
.rail--none { visibility: hidden; }

.folder__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s32);
  align-items: start;
  padding: var(--s32);
  background: linear-gradient(90deg, #fadead 0, var(--folder-lit) 1.6%, var(--folder) 40%, var(--folder-dim) 100%);
  border-radius: 0 0 var(--radius-folder) var(--radius-folder);
  box-shadow: var(--lift-3);
}
.folder__body::after {
  /* the front lip the sheets sit behind */
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: -14px;
  height: 14px;
  background: var(--folder-lip);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--lift-1);
  z-index: -1;
}

.paper {
  position: relative;
  min-width: 0;
  padding: var(--s48) var(--s48) var(--s48);
  background: var(--paper);
  border: 1px solid var(--paper-cut);
  border-radius: 10px;
  box-shadow: var(--lift-1);
  transition: opacity .17s ease, transform .17s ease;
}
.paper.is-out { opacity: 0; transform: translateY(-18px); }
.paper.is-in { opacity: 0; transform: translateY(14px); transition: none; }

.paper:focus { outline: none; }
.paper:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }

/* the case sheet clipped inside the cover, beside the open page */
.case {
  position: sticky;
  top: var(--s24);
  display: grid;
  gap: 0;
  padding: var(--s24) var(--s24) var(--s8);
  background: #fbf4ea;
  border: 1px solid var(--paper-cut);
  border-radius: 10px;
  box-shadow: var(--lift-1);
}
.case::before {
  /* a black clip holding it to the cover */
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  width: 64px; height: 18px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #2a2c30, var(--bar));
  border-radius: 5px;
  box-shadow: 2px 4px 8px rgba(29, 74, 110, .3);
}
.case .cab { padding: var(--s16) 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.case .cab + .cab { border-top: 1px solid var(--paper-cut); }
.case__title { margin: 0 0 var(--s8); font-family: var(--mono); font-weight: 700; font-size: var(--t14); letter-spacing: .12em; text-transform: uppercase; }

/* ------------------------------------------------------------------ the colophon */

.colophon {
  max-width: calc(var(--col) - 2 * var(--s24));
  margin: 0 var(--s24);
  padding: var(--s32) 0 var(--s64);
  display: grid;
  gap: var(--s8);
  border-top: 2px solid var(--ink);
}
.colophon__line { margin: 0; display: flex; align-items: center; gap: var(--s12); font-weight: 500; }
.colophon__mark { flex: none; width: 34px; height: 12px; border-radius: 3px; background: var(--ink); }
.colophon__fine { margin: 0; font-size: var(--t14); color: var(--ink-2); max-width: 80ch; }

/* ------------------------------------------------------------------ the text */

.doc__head { margin: 0 0 var(--s24); }

.doc__file {
  margin: 0 0 var(--s8);
  font-family: var(--mono);
  font-size: var(--t12);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.doc__title {
  margin: 0;
  font-size: var(--t32);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.doc__lede {
  margin: var(--s12) 0 0;
  font-size: var(--t20);
  line-height: 1.5;
  color: var(--ink);
}

.doc__body {
  margin: 0 0 var(--s16);
  max-width: 62ch;
}
.doc__body b { font-weight: 700; }

.doc__h {
  margin: var(--s32) 0 var(--s12);
  font-size: var(--t20);
  font-weight: 700;
  letter-spacing: -.005em;
}

.doc__h3 {
  margin: var(--s24) 0 var(--s8);
  font-size: var(--t16);
  font-weight: 700;
}

.doc__link { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc__link:hover { color: var(--info); }

.doc__text { margin: 0 0 var(--s16); }

/* --------------------------------------------------------------- the manifest */

.manifest { list-style: none; margin: 0 0 var(--s24); padding: 0; }

.manifest__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s8) var(--s16);
  padding: var(--s12) 0;
}
/* the separator is drawn, so the row itself keeps its padding: a border-top turns the row into the
   measured box and the audit then reads zero inset on it */
.manifest__row + .manifest__row::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--paper-cut);
}

.manifest__name { font-weight: 500; }

.manifest__hash {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: var(--t14);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.manifest__state {
  font-size: var(--t12);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  justify-self: end;
  white-space: nowrap;
}
.manifest__state.state--open { color: var(--ok-ink); font-weight: 700; }

/* --------------------------------------------------------------- the readouts */

.cab {
  display: grid;
  gap: var(--s8);
  align-content: start;
  padding: var(--s16) var(--s24);
  background: var(--paper);
  border: 1px solid var(--paper-cut);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
}

.cab__k {
  margin: 0;
  font-size: var(--t12);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.cab__v {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t24);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cab__n { margin: 0; font-size: var(--t14); color: var(--ink-2); line-height: 1.5; }

/* the three dots off the avatar, used as the one real state lamp on this page */
.dots { display: flex; gap: 6px; margin: var(--s4) 0 0; }
.dots i { width: 10px; height: 10px; border-radius: 2px; background: var(--off); }
.dots[data-state="waiting"] i:nth-child(1) { background: var(--info); }
.dots[data-state="sealed"] i:nth-child(3) { background: var(--stop); }
.dots[data-state="open"] i:nth-child(2) { background: var(--ok); }

/* --------------------------------------------------------------------- the keys */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s12);
  min-height: 48px;
  padding: 0 var(--s24);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--paper-cut);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  font: inherit;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.key img { width: 22px; height: 22px; flex: none; }
.key:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.key:active { transform: translateY(0); box-shadow: none; }

.key--small { min-height: 40px; padding: 0 var(--s16); font-size: var(--t14); }
.key--copy { min-height: 44px; padding: 0 var(--s16); font-size: var(--t14); font-weight: 700; background: var(--ink); color: #fff; border-color: var(--ink); }
.slip .key:not(.key--copy) { min-height: 48px; padding: 0 var(--s16); }
.key--pump { background: var(--ink); color: #fff; border-color: var(--ink); }
.key--pump img { background: #fff; border-radius: 50%; padding: 2px; }
.key--wide { width: 100%; }

/* a control that cannot act says so in its colour, and keeps reading at 4.5:1 */
.key[disabled],
.key[aria-disabled="true"] {
  background: #efe4d2;
  color: var(--ink-2);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.key[disabled] img,
.key[aria-disabled="true"] img { opacity: .55; }

/* ------------------------------------------------------------------- the tables */

.index {
  width: 100%;
  margin: 0 0 var(--s24);
  border-collapse: collapse;
  font-size: var(--t14);
}

.index th {
  padding: var(--s8) var(--s16);
  font-size: var(--t12);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid var(--paper-cut);
}

.index td {
  padding: var(--s12) var(--s16);
  vertical-align: top;
  line-height: 1.5;
}
.index tbody tr + tr td { border-top: 1px solid var(--paper-cut); }
.index td:first-child { font-weight: 500; }
.index--split td:first-child { white-space: nowrap; }
.index--wallets td:first-child { white-space: nowrap; font-weight: 700; }
.index--wallets td:nth-child(2) { overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t14); }
.index--files td:nth-child(1) { width: 3em; }
.index--files td:nth-child(6) { white-space: nowrap; }
/* the tape: a wallet, an amount and a signature all read as values, so they take the mono face and
   never wrap mid-number */
.index--tape td:nth-child(1),
.index--tape td:nth-child(4),
.index--tape td:nth-child(5),
.index--tape td:nth-child(6) { white-space: nowrap; }
.index--tape td:nth-child(2),
.index--tape td:nth-child(4),
.index--tape td:nth-child(5) { font-family: var(--mono); }
.index--tape td:nth-child(4),
.index--tape td:nth-child(5),
.index--tape th:nth-child(4),
.index--tape th:nth-child(5) { text-align: right; }
.index--tape td:nth-child(3) .mark { margin: 0 var(--s4) var(--s4) 0; }

/* -------------------------------------------------------------- the progress rail */

.rail {
  display: block;
  width: 100%;
  min-width: 80px;
  height: 8px;
  background: #cfe4f6;
  border-radius: 4px;
  overflow: hidden;
}
.rail i { display: block; height: 100%; background: var(--info); border-radius: 4px; }
.rail__n { display: block; margin-top: var(--s4); font-size: var(--t14); color: var(--ink-2); }

.rail--film { max-width: 92px; height: 6px; }
.rail--film i { background: var(--info); }

/* ------------------------------------------------------------- the censored text */

/* a sealed file is shown as redacted lines, on the measured geometry: a bar is 1.40 of the cap
   height of the text it replaces, its radius is 0.16 of its own height, and the lengths are uneven */
.redacted { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 var(--s16); max-width: 62ch; }
.redacted i {
  display: block;
  height: 24px;
  background: var(--ink);
  border-radius: 4px;                              /* 0.16 of the height, as measured on the banner */
  box-shadow: 0 2px 6px rgba(29, 74, 110, .18);
}

/* the one bar with its corner peeled up, the way two of the bars on the banner are drawn */
.redacted::after {
  content: "";
  display: block;
  width: 260px;
  max-width: 100%;                  /* at 320 px the column is 206 px and a fixed bar cuts the page */
  aspect-ratio: 420 / 66;
  background: url("/assets/img/bar-peeled.png") no-repeat left top / contain;
}

.redacted--lifting i,
.redacted--lifting::after { transition: transform .5s ease-in, opacity .5s ease-in; }
.redacted--lifting[data-lift="1"] i,
.redacted--lifting[data-lift="1"]::after { transform: translateY(-14px); opacity: 0; }
.redacted--lifting i:nth-child(2) { transition-delay: .05s; }
.redacted--lifting i:nth-child(3) { transition-delay: .1s; }
.redacted--lifting i:nth-child(4) { transition-delay: .15s; }
.redacted--lifting i:nth-child(5) { transition-delay: .2s; }
.redacted--lifting i:nth-child(6) { transition-delay: .25s; }

.stamp {
  display: inline-block;
  margin: 0 0 var(--s16);
  padding: var(--s8) var(--s16);
  background: var(--stop-ink);          /* white on the brighter red is 4.47:1, just under the floor */
  color: #fff;
  border-radius: 10px;
  font-size: var(--t12);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-10px);
}
.stamp[data-fall="1"] { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .3s ease-out; }

/* ------------------------------------------------------------- hashes and sources */

.hashline {
  font-family: var(--mono);
  font-size: var(--t14);
  overflow-wrap: anywhere;
  color: var(--ink);
}

.filetext {
  margin: 0 0 var(--s16);
  padding: var(--s16);
  background: #fff;
  border: 1px solid var(--paper-cut);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: var(--t14);
  line-height: 1.6;
  white-space: break-spaces;
  overflow-wrap: anywhere;
  /* the sealed texts are hard wrapped at 96 columns and the box is narrower than that, so every long
     line wraps a second time. A hanging indent makes the continuation read as one. */
  padding-left: calc(var(--s16) + 2ch);
  text-indent: -2ch;
}

.filetext--prose { padding: var(--s24); text-indent: 0; font-size: 15px; line-height: 1.65; white-space: normal; }
.filetext__h { margin: var(--s24) 0 var(--s8); font-weight: 700; letter-spacing: .08em; }
.filetext__h:first-child { margin-top: 0; }
.filetext__p { margin: 0 0 var(--s12); }
.filetext__rows { margin: 0 0 var(--s12); padding: 0 0 2px; font: inherit; font-size: var(--t14); white-space: pre; overflow-x: auto; }
.filetext__k { margin: var(--s16) 0 var(--s8); font-size: var(--t12); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.filetext--code { padding: var(--s16); text-indent: 0; font-size: 12.5px; line-height: 1.55; white-space: pre; overflow-wrap: normal; overflow-x: auto; max-height: 560px; }
.filetext__note { margin: 0 0 var(--s16); font-size: var(--t14); color: var(--ink-2); }

.check, .fn { margin: 0 0 var(--s16); }

.verdict { margin: 0 0 var(--s16); font-weight: 500; }
.verdict--ok { color: var(--ok-ink); }
.verdict--bad { color: var(--stop-ink); }

.sourcelist .manifest__hash { font-size: var(--t14); }

.sourceview { margin: var(--s16) 0 0; }
.sourceview .filetext { max-height: 420px; overflow: auto; }

.srcbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  /* a source path is one long word: at 320 px it cut its own row, and the list around it with it */
  text-align: left;
  overflow-wrap: anywhere;
  max-width: 100%;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.srcbtn:hover { color: var(--info); }

/* the manual's schematics: box drawing in the document's own typewriter face */
.schema {
  margin: 0 0 var(--s24);
  padding: var(--s16) var(--s16);
  overflow-x: auto;
  /* Courier Prime has no box drawing glyphs, and a fallback per glyph breaks the columns: the whole
     drawing is set in one system monospace that has them */
  font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--paper-cut);
  border-radius: 10px;
}

/* --------------------------------------------------------------- the hash checker */

.checker { display: grid; gap: var(--s8); margin: 0 0 var(--s16); }
.checker__label { font-size: var(--t12); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.checker__in {
  width: 100%;
  padding: var(--s12) var(--s16);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--paper-cut);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: var(--t14);
  line-height: 1.6;
  resize: vertical;
}

.checker__out {
  margin: 0;
  padding: var(--s12) var(--s16);
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: var(--t14);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- the file functions */

.walletbox { display: grid; gap: var(--s12); margin: 0 0 var(--s16); }
.walletbox .doc__body { margin: 0; }

.composer { display: grid; gap: var(--s12); margin: 0 0 var(--s16); }
.composer .checker__in { min-height: 120px; }
.composer .band { justify-self: start; }

.band {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s4) var(--s12);
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: var(--t12);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.drops { display: grid; gap: var(--s16); margin: 0 0 var(--s16); }

.drop {
  display: grid;
  gap: var(--s8);
  padding: var(--s16);
  background: #fff;
  border: 1px solid var(--paper-cut);
  border-radius: 10px;
}

.drop__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8) var(--s16);
  align-items: baseline;
  font-size: var(--t12);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.drop__body { font-family: var(--mono); font-size: var(--t14); white-space: break-spaces; overflow-wrap: anywhere; }
.drop__body--sealed { color: var(--ink-2); }

.share { font-family: var(--mono); font-size: var(--t14); }

/* a trade's own facts about the wallet that made it */
.mark {
  display: inline-block;
  padding: 1px var(--s8);
  border-radius: 999px;
  font-size: var(--t14);
  font-weight: 500;
  background: #e7edf3;
  color: var(--ink-2);
}
.mark--new { background: #d8e8fb; color: #0a3f84; }
.mark--whale { background: #d6f0e0; color: #0a5c32; }
.mark--none { background: none; color: var(--ink-2); padding: 0; }

.side--buy { color: var(--ok-ink); font-weight: 700; }
.side--sell { color: var(--stop-ink); font-weight: 700; }

/* ------------------------------------------------------------------- the widths */

@media (min-width: 1169px) {
  .colophon { margin: 0 auto; }
}

@media (max-width: 1320px) {
  .hero__copy { padding-top: 132px; }
  .hbar { height: 32px; border-radius: 6px; }
  .hbar--1 { top: 34px; left: -24px; width: 30vw; }
  .hbar--2 { top: 88px; left: -24px; width: 12vw; }
  .hbar--3 { top: 74px; left: calc(12vw + 10px); width: 170px; }
  .hbar--4 { top: 34px; left: calc(30vw + 22px); width: 9vw; }
  .hbar--5 { display: none; }
  .hbar--6 { display: none; }
  .hero .eyebrow { position: static; margin-bottom: var(--s16); }
}

@media (max-width: 1080px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s32); }
  .folder__body { grid-template-columns: minmax(0, 1fr); }
  .case { position: relative; top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s24); }
  .case .cab:nth-child(3) { border-top: 0; }
  .case__title { grid-column: 1 / -1; }
  .tabs { display: flex; overflow-x: auto; scrollbar-width: none; padding-top: 12px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 148px; }
}

@media (max-width: 860px) {
  .hero { padding-top: var(--s32); }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
  .hero__copy { padding-top: 104px; }
  .hero__object { padding-bottom: var(--s8); }
  .dossier-obj { max-width: 300px; }
  .slip { max-width: 420px; }
  .hbar { height: 30px; border-radius: 6px; }
  .hbar--1 { top: 14px; width: 46vw; }
  .hbar--2 { top: 66px; width: 18vw; }
  .hbar--3 { top: 52px; left: calc(18vw + 14px); width: 150px; }
  .hbar--4 { display: none; }
  .hbar--5 { display: none; }
  .hbar--6 { display: none; }
  .hero .eyebrow { position: static; margin-bottom: var(--s16); }
}

@media (max-width: 760px) {
  .dossier { padding: var(--s24) var(--s16) var(--s48); }
  .dossier__head { grid-template-columns: minmax(0, 1fr); }
  .advance { justify-items: start; grid-auto-flow: column; align-items: center; gap: var(--s16); }
  .folder__body { padding: var(--s16); gap: var(--s16); border-radius: 0 0 18px 18px; }
  .paper { padding: var(--s24) var(--s16); }
  .tabs { padding: 12px var(--s8) 0; gap: 4px; }
  .tab { flex-basis: 132px; min-height: 96px; }
  .doc__title { font-size: var(--t24); }
  .doc__lede { font-size: var(--t16); }
  .hero__in { padding: 0 var(--s16); }
  .hero__body { font-size: var(--t16); }
  .tally dd { font-size: var(--t20); }
  .colophon { margin: 0 var(--s16); padding: var(--s24) 0 var(--s48); }

  /* every table prints as labelled blocks rather than scrolling sideways */
  .index, .index thead, .index tbody, .index tr, .index th, .index td { display: block; width: 100%; }
  .index thead { position: absolute; left: -9999px; }
  .index tbody tr {
    margin: 0 0 var(--s12);
    padding: var(--s16);
    background: #fff;
    border: 1px solid var(--paper-cut);
    border-radius: 10px;
  }
  .index tbody tr + tr td { border-top: 0; }
  .index td { padding: var(--s4) 0; }
  .index tbody td::before {
    content: attr(data-k);
    display: block;
    font-size: var(--t12);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .index--files td, .index--files th { width: auto; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 34px; letter-spacing: .1em; }
  .lede { font-size: 26px; }
  .slip { width: calc(100% - 16px); padding-left: var(--s16); padding-right: var(--s16); }
  .slip__keys { grid-template-columns: minmax(0, 1fr); }
  .tally { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tally__i + .tally__i { padding-left: var(--s8); }
  .tally dd { font-size: var(--t14); white-space: normal; }
  .tally dt { font-size: 11px; }
  .case { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 340px) {
  .wordmark { font-size: 28px; }
  .hero__acts .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hbar, .dossier-obj, .slip { animation: none !important; }
  .key:hover, .btn:hover, .tab:hover { transform: none; }
}