/* Hypha · JV partner · the paperwork's physics and marks, shared by every document (WORLD.md §1).

   <div class="sheet"><i class="sh" aria-hidden="true"></i><article class="doc …">…</article></div>
       .sheet        a piece of paper on the stage; js/trail.js J.place() moves it (transform) and sets --lift (0 lying
                     flat .. 1 high in the air), which the shadow .sh reads: higher = softer, further, fainter
       .doc          the document itself: clean screen white, near-black type, its own generic look (css/doc-*.css)
   Marks (scroll-driven, written by js/trail.js; never by a timer):
       .fld          empty: a flat grey block (.fld--line a text line, .fld--block a box, .fld--sig a signature line)
       .lit          agreed: a 2 px neon line under the words and a soft green spill on the paper (--lit 0..1)
       .ini / .sig-ink  ink initials / a signature, drawn on (--ink 0..1), wet until --dry; js/trail.js J.inkUp() fills them
       .marker       the visitor's own yellow highlighter (--hi 0..1): an assumption or a thing to find out, never light
       .typed        words typed in with the scroll (J.type), the caret after them
       .face         a sheet that turns over: .face > .face-a (front) + .face-b (back), --turn 0..1
       .cur          a pointer (role flags sit in the margin, never on words: WORLD.md §9) */

:root {
  --sheet: #ffffff;
  --field: #e3e7e5;
  --field-2: #d6dbd8;
  --pen-ink: #1f2b5c;
  --marker: rgb(255 224 64 / 0.66);
}

/* ---------- a sheet and its shadow ---------- */
.sheet {
  --lift: 0;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
}
/* a layer of its own only while its scene is near (WORLD §8) */
.stage.is-near .sheet { will-change: transform; }
/* paper with thickness (WORLD §1.4): four real side faces round a sheet in CSS 3D (js/trail.js J.thick adds .thk and
   the faces). They hang under the sheet to what it lies on, so a pile shows its stacked edges; on a sheet that turns
   (.thk-mid) they stand either side of its plane and its back lies a real thickness behind its front. --th in px. */
.thk { transform-style: preserve-3d; }
.thk > .ed { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.thk-mid > .ed { transform: translateZ(calc(var(--th) / 2)); }
.thk > .ed > b { position: absolute; display: block; }
.thk > .ed > .ed-b { left: 0; right: 0; top: 100%; height: var(--th); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(#eef0f2, #c3c9cf); }
.thk > .ed > .ed-t { left: 0; right: 0; bottom: 100%; height: var(--th); transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(0deg, #eef0f2, #c3c9cf); }
.thk > .ed > .ed-l { top: 0; bottom: 0; right: 100%; width: var(--th); transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #e2e5e8, #b4bbc2); }
.thk > .ed > .ed-r { top: 0; bottom: 0; left: 100%; width: var(--th); transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #e2e5e8, #b4bbc2); }
/* a deck: the edge of each of its pages, one fine line apiece */
.thk-deck > .ed > .ed-b { background: repeating-linear-gradient(#eceef0 0 1.4px, #a9b0b7 1.4px 2px); }
.thk-deck > .ed > .ed-t { background: repeating-linear-gradient(0deg, #eceef0 0 1.4px, #a9b0b7 1.4px 2px); }
.thk-deck > .ed > .ed-l { background: repeating-linear-gradient(270deg, #e0e3e6 0 1.4px, #a0a8b0 1.4px 2px); }
.thk-deck > .ed > .ed-r { background: repeating-linear-gradient(90deg, #e0e3e6 0 1.4px, #a0a8b0 1.4px 2px); }
.sheet > .sh {
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  top: 10%;
  bottom: 2%;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgb(7 16 14 / 0.42), rgb(7 16 14 / 0.16) 55%, transparent);
  opacity: calc(0.62 - var(--lift) * 0.34);
  transform: translate3d(calc(var(--lift) * 26px), calc(14px + var(--lift) * 58px), 0) scale(calc(1.02 + var(--lift) * 0.1));
  pointer-events: none;
}
/* on a dark ground a sheet throws no shadow you could see: its own light falls round it instead */
.on-dark .sheet > .sh, .sheet.is-glow > .sh {
  background: radial-gradient(closest-side, rgb(214 236 226 / 0.13), rgb(120 190 165 / 0.05) 60%, transparent);
  opacity: 1;
  transform: scale(1.18);
  left: 0; right: 0; top: 0; bottom: 0;
}

/* ---------- the document ---------- */
.doc {
  position: relative;
  isolation: isolate;
  background: var(--sheet);
  color: #1b1f22;
  font-family: var(--f-app, var(--f-sheet));
  font-size: 15px;
  line-height: 1.45;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgb(7 16 14 / 0.07), 0 1px 2px rgb(7 16 14 / 0.08);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  text-align: left;
}
:where(.doc) :where(p, h3, h4, ol, ul, dl, dd) { margin: 0; padding: 0; }
:where(.doc) :where(ol, ul) { list-style: none; }
.doc b, .doc strong { font-weight: 600; }
.doc svg { display: inline-block; }
/* a sheet's own buttons are part of the paper, not this page's: nothing to click */
.doc .btn-p { pointer-events: none; cursor: default; }

/* ---------- empty: flat grey ---------- */
.fld {
  display: inline-block;
  vertical-align: -0.1em;
  width: 7.5em;
  height: 0.92em;
  border-radius: 3px;
  background: var(--field);
}
.fld--line { display: block; width: 100%; height: 9px; border-radius: 4px; margin: 0 0 9px; }
.fld--line.s { width: 62%; }
.fld--line.m { width: 84%; }
.fld--block { display: block; width: 100%; height: 3.1em; border-radius: 5px; }
.fld--sig { display: block; width: 100%; height: 2px; border-radius: 1px; background: #8c9490; margin-top: 2.1em; }
.fld--wide { width: 12em; }
.fld--short { width: 4.5em; }

/* ---------- agreed: light on the line, never a fill ---------- */
.lit { position: relative; --lit: 0; }
.lit::after {
  content: "";
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  bottom: -0.2em;
  height: 2px;
  border-radius: 2px;
  background: var(--neon);
  box-shadow: 0 0 5px rgb(57 241 100 / 0.95), 0 0 14px rgb(57 241 100 / 0.6);
  transform: scaleX(var(--lit));
  transform-origin: 0 50%;
  opacity: min(1, calc(var(--lit) * 4));
  pointer-events: none;
}
.lit::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.9em;
  right: -0.9em;
  top: -0.55em;
  bottom: -0.75em;
  background: radial-gradient(58% 64% at 50% 88%, rgb(57 241 100 / 0.2), rgb(57 241 100 / 0.06) 55%, transparent 74%);
  opacity: var(--lit);
  pointer-events: none;
}

/* ---------- ink: initials and signatures, in short pieces (js/trail.js J.inkUp) ----------
   each piece is drawn on in its turn (from --ia at the rate --ik of --ink) at its own width --iw, the pen's pressure;
   the .sheen over it, the light on wet ink, dries along the stroke behind the pen, then away as --dry goes 0 to 1 */
.ini, .sig-ink { --ink: 0; display: inline-block; }
[data-ink] { --ink: 0; --dry: 1; }
[data-ink] svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-ink] path {
  fill: none;
  stroke: var(--pen-ink);
  stroke-width: var(--iw);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.02;
  stroke-dashoffset: calc(1.01 * (1 - clamp(0, (var(--ink) - var(--ia)) * var(--ik), 1)));
}
[data-ink] .sheen {
  stroke: #fff;
  stroke-width: calc(var(--iw) * 0.36);
  stroke-linecap: butt;
  stroke-opacity: calc(0.5 * clamp(0, 1 - (var(--ink) - var(--ib)) * 2.2, 1) * (1 - var(--dry)));
  transform: translate(-0.2px, -0.26px);
}

/* ---------- the visitor's own highlighter ---------- */
.marker {
  --hi: 0;
  background: linear-gradient(176deg, transparent 10%, var(--marker) 14%, var(--marker) 86%, transparent 90%) 0 50% / calc(var(--hi) * 100%) 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 2px;
}

/* ---------- typing ---------- */
.typed { white-space: pre-wrap; }
.caret {
  display: inline-block;
  width: 1.5px;
  height: 1.12em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: currentColor;
  animation: caret 1.06s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.caret.is-off { display: none; }

/* ---------- a sheet that turns over ---------- */
.face { --turn: 0; position: relative; transform-style: preserve-3d; transform: perspective(1600px) rotateY(calc(var(--turn) * 180deg)); }
.face-a, .face-b { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face-b { position: absolute; inset: 0; transform: rotateY(180deg); }
.face.is-back > .face-a, .face:not(.is-back) > .face-b { visibility: hidden; }
/* with its thickness (.thk-mid): the front a half thickness forward, the real back a half thickness behind */
.face.thk-mid > .face-a { transform: translateZ(calc(var(--th) / 2)); }
.face.thk-mid > .face-b { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); }

/* ---------- a pointer ---------- */
.cur { position: absolute; left: 0; top: 0; width: 18px; height: 22px; pointer-events: none; z-index: 30; }
.stage.is-near .cur { will-change: transform; }
.cur svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); }
.cur path { fill: var(--c, #1a73e8); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}

/* ---------- the documents' own small icons (generic interface glyphs, drawn as masks in currentColor) ---------- */
.ico {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.ico-back { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20z'/%3E%3C/svg%3E"); }
.ico-archive { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 5.2 19.1 3.5A1.5 1.5 0 0 0 18 3H6a1.5 1.5 0 0 0-1.2.5L3.5 5.2A2 2 0 0 0 3 6.5V19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.5a2 2 0 0 0-.5-1.3zM6.2 5h11.6l.8 1H5.4zM5 19V8h14v11zm8.5-9h-3v3H8l4 4 4-4h-2.5z'/%3E%3C/svg%3E"); }
.ico-trash { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4V3H9v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4zm2 15H7V6h10zM9 8h2v9H9zm4 0h2v9h-2z'/%3E%3C/svg%3E"); }
.ico-mail { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); }
.ico-more { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E"); }
.ico-reply { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E"); }
.ico-clip { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5a4 4 0 0 1-8 0V5a2.5 2.5 0 0 1 5 0v10.5a1 1 0 0 1-2 0V6H10v9.5a2.5 2.5 0 0 0 5 0V5a4 4 0 0 0-8 0v12.5a5.5 5.5 0 0 0 11 0V6z'/%3E%3C/svg%3E"); }
.ico-star { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 15.4-3.8 2.3 1-4.3-3.3-2.9 4.4-.4L12 6.1l1.7 4 4.4.4-3.3 2.9 1 4.3zM22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21 12 17.3l6.2 3.7-1.6-7.1z'/%3E%3C/svg%3E"); }
.ico-cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14zm0-12H5V6h14z'/%3E%3C/svg%3E"); }
.ico-check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.ico-lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zM9 6a3 3 0 0 1 6 0v2H9zm9 14H6V10h12zm-6-3a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E"); }
.ico-people { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5C15 14.2 10.3 13 8 13zm8 0c-.3 0-.6 0-1 .1 1.2.8 2 1.9 2 3.4V19h6v-2.5c0-2.3-4.7-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.ico-search { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E"); }
.ico-doc { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm4 18H6V4h7v5h5zM8 12h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E"); }
.ico-send { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m2 21 21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E"); }
/* the default picture a mail or chat app shows for someone with none: grey, no face */
.av {
  display: inline-block;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 37%, #f4f6f8 0 17%, transparent 18%),
    radial-gradient(ellipse 33% 25% at 50% 93%, #f4f6f8 0 97%, transparent 100%),
    #b7bec6;
}
.av.s { width: 28px; height: 28px; }
.av.xs { width: 22px; height: 22px; }

/* loose sheets breathe a little in the air while nobody reads them (page 01); time drives only this small life */
.breathe { animation: breathe 7.4s ease-in-out infinite; }
.breathe.b2 { animation-duration: 8.6s; animation-delay: -2.2s; }
.breathe.b3 { animation-duration: 6.8s; animation-delay: -4.1s; }
@keyframes breathe { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -3px, 0) rotate(0.3deg); } }
@media (prefers-reduced-motion: reduce) { .breathe { animation: none; } }

/* ---------- company marks: where a third party's own paper prints its mark, the real one sits in the slot's box, at
   its left (shared/app-kit/logos; the founder's ruling of 2026-10-25 strikes WORLD 1.8's grey box). A slot that stands
   for the visitor's own company stays theirs: "Your company" in the document's own type, sized to the slot. ---------- */
.mk { background-color: transparent !important; background-position: left center !important; background-size: contain !important; background-repeat: no-repeat !important; }
.mk-pret { background-image: url("../shared/app-kit/logos/pret.co.uk.png") !important; }
.mk-gymshark { background-image: url("../shared/app-kit/logos/gymshark.com.png") !important; }
.mk-shopify { background-image: url("../shared/app-kit/logos/shopify.com.png") !important; }
.mk-deliveroo { background-image: url("../shared/app-kit/logos/deliveroo.co.uk.png") !important; }
.mk-personio { background-image: url("../shared/app-kit/logos/personio.com.png") !important; }
.mk-ocado { background-image: url("../shared/app-kit/logos/ocado.com.png") !important; }
.mk-octopus { background-image: url("../shared/app-kit/logos/octopus.energy.png") !important; }
.mk-trainline { background-image: url("../shared/app-kit/logos/trainline.com.png") !important; }
.mk-allbirds { background-image: url("../shared/app-kit/logos/allbirds.com.png") !important; }
.mk-huel { background-image: url("../shared/app-kit/logos/huel.com.png") !important; }
.mk-innocent { background-image: url("../shared/app-kit/logos/innocentdrinks.co.uk.png") !important; }
.mk-gousto { background-image: url("../shared/app-kit/logos/gousto.co.uk.png") !important; }
.mk-kaluza { background-image: url("../shared/app-kit/logos/kaluza.com.png") !important; }
.mk-zego { background-image: url("../shared/app-kit/logos/zego.com.png") !important; }
.mk-you { background: none !important; box-shadow: none !important; container-type: size; display: flex !important; align-items: center; overflow: visible; color: inherit; }
.mk-you > span { font-family: inherit; font-weight: 700; font-size: max(12.5px, min(46cqh, 14.5cqw)); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; } /* never under 12.5 px: a slot too narrow for it is widened by its document */