/* The glass office: /dokumente, /certified, the order and status pages, /verify. Every step in plain sight.
   Loaded after static/d.css (D's tokens, type, header, footer) by the pages whose <html> carries "d glass".
   The strict CSP allows no inline style: scripts set only CSSOM custom properties (--tilt, --x, --y, --z, --rz,
   --p), never a style attribute. Physical rule: the desk is glass; every sheet lies at a small positive Z above
   it, falls flat, and is as tall as its document (the sheets are in the layout flow, so the stage grows to hold
   them; nothing is measured by script and nothing is cut off). */

.glass {
  --paper: #FFFDF8; --ink: #1A2238; --ok: #0E6B4E; --warn-bg: #FFF6F3; --warn-line: #F5D9D2;
  --sheet-w: 360px; --gap: 96px;
}
.glass body { background: #fff; overflow-x: hidden; }
.glass main { flex: none; }
.glass [hidden] { display: none !important; }
.glass .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; }
.glass .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.8); border: 0; border-bottom: 1px solid rgba(220,227,236,.8); box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.glass .site-lang, .glass .nav-toggle { background: var(--mist); }
.glass a { color: inherit; }
.glass .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
/* drawn icons (templates/_icons.html): one stroke, the colour of the text they sit in */
.glass svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glass svg.i .fill { fill: currentColor; }

.gl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 960px) { .gl-wrap { padding: 0 24px; } }
.gl-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 16px/1.3 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-2); }
.gl-h1 { margin: 0; font: 400 clamp(52px, 8.4vw, 124px)/.92 var(--display); letter-spacing: -0.03em; }
.gl-h1.is-short { font-size: clamp(46px, 6.6vw, 96px); }
.gl-h2 { margin: 0; font: 400 clamp(40px, 5.6vw, 80px)/.98 var(--display); letter-spacing: -0.03em; }
.gl-h1 em, .gl-h2 em, .gl-principle em { font-style: italic; color: var(--poppy); }
/* "Every step, in plain sight": the page's principle, opening the explanation under the desk (the H1 says the job) */
.gl-principle { margin: 0 0 8px; font: 400 clamp(30px, 3.4vw, 40px)/1.05 var(--display); letter-spacing: -0.02em; color: var(--navy); }
.gl-lede { margin: 22px 0 0; max-width: 640px; font-size: 19px; color: var(--navy-2); }
.gl-fine { margin: 12px 0 0; font-size: 16px; color: var(--navy-2); }
.gl-fine a, .gl-lede a, .gl-card a { text-decoration: underline; text-underline-offset: 3px; }

/* buttons */
.gl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 600 16px var(--ui); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.gl-btn.primary { background: var(--navy); color: #fff; box-shadow: 0 14px 30px -14px rgba(11,21,48,.7); }
.gl-btn.primary:hover { transform: translateY(-1px); }
.gl-btn.ghost { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.gl-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.gl-btn:active { transform: scale(.98); }
.gl-btn[disabled] { opacity: .6; cursor: progress; }
.sr-only:focus-visible + label.gl-btn { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.gl-btn svg { width: 18px; height: 18px; flex: none; }
.gl-btn.small { min-height: 44px; padding: 0 18px; }
.gl-btn { text-align: center; line-height: 1.25; }   /* a label that wraps on a 360 px phone stays centred */

/* ── /dokumente: the hero and its inputs ── */
.gl-hero { padding: 56px 0 0; }
/* The headline, the desk and the inputs (design/AUDIT-DOKUMENTE.md 1.1). Phone: headline, the desk's compact
   preview, then the inputs. Tablet: the desk under the inputs. Desktop: the desk beside the headline. */
.dok-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "desk" "act"; max-width: 1360px; margin: 0 auto; padding: 0 16px; }
.dok-copy { grid-area: copy; min-width: 0; }
.dok-desk { grid-area: desk; min-width: 0; margin: 22px -8px 0; }
.dok-act { grid-area: act; min-width: 0; padding-top: 26px; }
.dok-act .gl-lede { margin-top: 0; }
.dok .stage { width: 100%; margin: 0; }
@media (min-width: 880px) {
  .dok-grid { padding: 0 24px; grid-template-areas: "copy" "act" "desk"; }
  .dok-desk { margin: 44px 0 0; }
  .dok-act { padding-top: 22px; }
}
@media (min-width: 1240px) {
  .dok-grid { grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "copy desk" "act desk"; column-gap: 48px; }
  .dok-desk { margin: 0; container-type: inline-size; }
  .dok .gl-h1 { font-size: clamp(68px, 6vw, 88px); }
  .dok .stage { --sheet-w: clamp(260px, calc((100cqi - 168px) / 2), 360px); --gap: 64px; padding: 76px 16px 40px; }
  .dok .plane { padding: 50px 28px 66px; }
}
/* the one quiet draft line at rest; the full notice comes with every result (audit 4.1) */
.gl-draftline { display: flex; align-items: flex-start; gap: 10px; max-width: 640px; margin: 16px 0 0; font: 500 16px/1.45 var(--ui); color: var(--navy-2); }
.gl-draftline .i { width: 20px; height: 20px; margin-top: 1px; }
/* the sample, as a text link beside the one main action (audit 1.3) */
.gl-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; border: 0; background: none; font: 600 16px var(--ui); color: var(--navy); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: rgba(11,21,48,.28); text-underline-offset: 6px; transition: text-decoration-color .2s var(--ease); }
.gl-link:hover { text-decoration-color: currentColor; }
.gl-link .i { width: 20px; height: 20px; color: var(--poppy); }
/* the main action names the camera only where the file picker offers it (a touch screen) */
.on-touch { display: none; }
@media (pointer: coarse) { .on-touch { display: inline; } .on-desk { display: none; } }
.gl-more { display: grid; gap: 10px; margin-top: 18px; max-width: 760px; }
.gl-more details { border-radius: 18px; background: var(--mist); }
.gl-more summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 18px; font: 500 16px var(--ui); color: var(--navy); cursor: pointer; list-style: none; border-radius: 18px; }
.gl-more summary::-webkit-details-marker { display: none; }
.gl-more summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border: solid var(--navy-2); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.gl-more details[open] summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
.gl-more .inner { padding: 0 18px 18px; }
.gl-more label { display: block; font: 500 16px var(--ui); margin: 4px 0 8px; }
.gl-more textarea, .gl-more input[type="text"], .gl-field input, .gl-field select, .gl-field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: 400 16px/1.5 var(--ui); color: var(--navy); }
.gl-more textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; resize: vertical; }
.gl-more textarea:focus, .gl-more input:focus, .gl-field input:focus, .gl-field select:focus, .gl-field textarea:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 4px rgba(27,79,168,.16); }
.gl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.gl-row input[type="text"] { flex: 1 1 14rem; width: auto; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.gl-status { min-height: 1.6em; margin: 10px 0 0; font-size: 16px; color: var(--navy-2); }
.gl-status.is-error { color: var(--poppy); font-weight: 500; }
.gl-supported { margin: 22px 0 0; max-width: 760px; }
.gl-supported p { margin: 0 0 8px; font: 500 16px var(--ui); color: var(--navy-2); }
.gl-supported ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gl-supported li { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
.gl-unavailable { margin-top: 26px; max-width: 760px; padding: 16px 18px; border-radius: 16px; background: var(--mist); color: var(--navy-2); }

/* ── The desk ── */
.stage { scroll-margin-top: 76px; position: relative; width: calc(100% - 16px); max-width: 1240px; margin: 40px auto 0; padding: 64px 24px 56px; border-radius: 36px; overflow: hidden;
  perspective: 1700px; perspective-origin: 50% 20%; isolation: isolate; }
.room { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 30% 0%, #FFF8E6 0%, rgba(255,248,230,0) 60%), radial-gradient(60% 70% at 85% 10%, #E4EEFB 0%, rgba(228,238,251,0) 70%), linear-gradient(180deg, #F7F9FC 0%, #EEF3F9 100%); }
.room::before, .room::after { content: ""; position: absolute; width: 520px; height: 520px; left: 8%; top: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,240,205,.9), rgba(255,240,205,0)); }
.room::after { left: auto; right: 4%; top: -300px; background: radial-gradient(closest-side, rgba(205,224,250,.9), rgba(205,224,250,0)); }
.desk { position: relative; transform-style: preserve-3d; }
.plane { position: relative; display: grid; grid-template-columns: var(--sheet-w) var(--sheet-w); column-gap: var(--gap); justify-content: center; align-items: start;
  max-width: 1080px; margin: 0 auto; padding: 60px 40px 48px; border-radius: 28px; transform-style: preserve-3d; transform: rotateX(var(--tilt, 0deg)); transition: transform 1.1s var(--ease);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,245,251,.75) 55%, rgba(226,234,245,.85));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.8), 0 60px 120px -50px rgba(11,21,48,.45), 0 2px 0 rgba(11,21,48,.06); }
.plane::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;   /* glass: a long reflection across the surface */
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 42%, rgba(255,255,255,0) 52%); mix-blend-mode: screen; }
.stage.is-single .plane { grid-template-columns: var(--sheet-w); }
.stage.is-single .sheet-o { display: none; }
/* The drop target: on a desktop, a pill over the resting sample, and the whole desk while a file is dragged over
   it. Never on a phone, where nothing can be dropped (audit 2.1). */
.drop-hint { position: absolute; left: 50%; top: 16px; z-index: 4; display: none; align-items: center; gap: 10px; min-height: 44px; max-width: calc(100% - 32px); padding: 0 20px;
  transform: translateX(-50%); border-radius: 999px; border: 1.5px dashed rgba(58,71,102,.45); background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 16px var(--ui); color: var(--navy-2); white-space: nowrap; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.drop-hint:hover { border-color: var(--navy-2); color: var(--navy); }
@media (min-width: 880px) and (hover: hover) { .is-rest .drop-hint, .stage.is-over .drop-hint { display: inline-flex; } }
.stage.is-over::before { content: ""; position: absolute; inset: 10px; z-index: 3; border-radius: 26px; border: 2px dashed var(--cobalt); background: rgba(27,79,168,.06); pointer-events: none; }
.stage.is-over .drop-hint { border-color: var(--cobalt); color: var(--cobalt); background: #fff; }

/* sheets: in the flow (the stage is as tall as the taller one), offset and lifted by transform only */
.sheet { position: relative; width: var(--sheet-w); transform-style: preserve-3d; transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotateZ(var(--rz, 0deg)); visibility: hidden; }
.sheet.in { visibility: visible; }
.stage.is-moving .sheet { transition: transform .9s var(--ease); }
.stage.is-moving .shadow { transition: opacity .9s var(--ease), filter .9s var(--ease); }
.sheet-o { --rz: -1.2deg; --z: 1.2px; }
.sheet-t { --rz: 0.8deg; --z: 0.6px; }
.sheet-tag { position: absolute; left: 0; top: -36px; margin: 0; font: 600 16px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-2); transition: opacity .5s var(--ease); }
.stage:not(.is-flat) .sheet-tag { opacity: 0; }
.shadow { position: absolute; inset: 0; border-radius: 6px; background: rgba(11,21,48,.5); pointer-events: none;
  filter: blur(var(--blur, 22px)); opacity: var(--so, .2); transform: translate3d(0, 16px, 0) scale(var(--ss, 1)); }
.paper { position: relative; min-height: calc(var(--sheet-w) * 1.414); overflow: clip; border-radius: 4px; padding: 26px 26px 22px; transform: translateZ(var(--z, 1px));
  background: var(--paper); color: var(--ink); font: 400 12.5px/1.45 var(--ui); box-shadow: 0 0 0 1px rgba(11,21,48,.05), 0 1px 1px rgba(11,21,48,.04); }
.paper[data-stamp]::after { content: attr(data-stamp); position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-24deg);
  font: 700 54px/1 var(--ui); letter-spacing: .2em; color: rgba(179,18,46,.075); white-space: nowrap; pointer-events: none; }
.doc-head { text-align: center; font-weight: 600; font-size: 12px; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; color: #39425A; }
.doc-title { margin: 12px 0 2px; text-align: center; font: 400 24px/1.1 var(--display); letter-spacing: .01em; }
.doc-sub { margin: 0 0 12px; text-align: center; font-size: 12px; font-weight: 600; color: #4A5168; }
.doc-fields { display: grid; gap: 1px; margin: 8px 0 10px; }
.field { position: relative; display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 8px; padding: 3px 18px 3px 6px; border-radius: 4px; outline-offset: 1px;
  transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.field .k { color: #4F586D; }
.field .v { font-weight: 600; overflow-wrap: anywhere; }
.field .v.nf { font-weight: 400; font-style: italic; color: #5A6378; }
.field.lit { background: rgba(27,79,168,.08); }
.field.pair { background: rgba(179,18,46,.09); box-shadow: inset 0 0 0 1px rgba(179,18,46,.35); }
.field .flag { position: absolute; right: 4px; top: 5px; color: var(--poppy); line-height: 0; }
.field .flag .i { width: 11px; height: 11px; stroke-width: 2; }
.field:focus-visible { outline: 2px solid var(--cobalt); }
.doc-body { margin: 6px 0 0; color: #39425A; }
.doc-sign { margin-top: 10px; color: #4F586D; font-style: italic; }
.sheet-t .field.w { opacity: 0; transform: translateY(4px); }
.sheet-t .field.w.in, .stage.is-final .sheet-t .field.w { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease), background .35s var(--ease); }
.skel { display: grid; gap: 10px; padding-top: 6px; }
.skel span { height: 9px; border-radius: 4px; background: #E9EDF4; }
.skel span:nth-child(3n) { width: 62%; } .skel span:nth-child(3n+1) { width: 88%; } .skel span:nth-child(1) { width: 54%; margin: 0 auto 8px; height: 14px; }
.scan { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 90px; opacity: 0; pointer-events: none; transform: translateY(-120px);
  background: linear-gradient(180deg, rgba(27,79,168,0), rgba(27,79,168,.16) 70%, rgba(120,170,255,.65) 98%, rgba(27,79,168,0)); }
.no-original { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--mist); font: 400 16px/1.5 var(--ui); color: var(--navy-2); }
.threads { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.threads path { fill: none; stroke: var(--poppy); stroke-width: 1.4; stroke-linecap: round; opacity: .55; transition: opacity .3s var(--ease), stroke-width .3s var(--ease); }
.threads path.on { opacity: 1; stroke-width: 2.4; }
.flip { position: absolute; left: 50%; bottom: 14px; z-index: 3; display: flex; padding: 4px; border-radius: 999px; transform: translateX(-50%);
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(11,21,48,.45); }
.flip button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 600 16px var(--ui); color: var(--navy-2); cursor: pointer; white-space: nowrap; }
.flip button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* What went wrong, on the desk in the paper's place, with the next step (audit 3.1-3.3) */
.stage.is-message .sheet { display: none; }
.stage.is-message ~ .readout { display: none; }   /* nothing to read out: no empty row between the card and the inputs */
.stage.is-message .plane { grid-template-columns: minmax(0, 1fr); padding: 44px 24px; }
.desk-card { grid-column: 1 / -1; justify-self: center; width: min(560px, 100%); padding: 30px 28px 24px; border-radius: 22px; transform: translateZ(1px);
  background: rgba(255,255,255,.92); color: var(--navy); box-shadow: 0 0 0 1px rgba(11,21,48,.05), 0 34px 70px -40px rgba(11,21,48,.45); }
.dc-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mist); color: var(--navy-2); }
.dc-icon .i { grid-area: 1 / 1; width: 24px; height: 24px; }
.desk-card .i-alert, .desk-card.is-error .i-doc { display: none; }
.desk-card.is-error .i-alert { display: block; }
.desk-card.is-error .dc-icon { background: var(--warn-bg); color: var(--poppy); }
.dc-title { margin: 16px 0 0; font: 400 30px/1.12 var(--display); letter-spacing: -0.01em; }
.dc-title:focus { outline: none; }
.dc-body { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--navy-2); }
.dc-docs { margin-top: 20px; }
.dc-docs p { margin: 0 0 8px; font: 500 16px var(--ui); color: var(--navy-2); }
.dc-docs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dc-docs li { padding: 6px 12px; border-radius: 999px; background: var(--mist); font-size: 16px; }
.dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 24px; }
/* A photo too poor to read: what is wrong and how to fix it, then retake or use it anyway (app/photo_quality.py). */
.desk-card:not(.is-photo) .dc-photo, .desk-card.is-photo .dc-generic { display: none; }
.dc-fix { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.dc-fix li { padding: 12px 14px; border-radius: 14px; background: var(--mist); font-size: 16px; line-height: 1.5; color: var(--navy); }

/* the readout under the desk */
.readout { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 44px; max-width: 1200px; margin: 22px auto 0; padding: 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mist); font: 500 16px var(--ui); color: var(--navy); animation: chip-in .5s var(--ease) both; }
.chip.ok { background: #E6F3EE; color: var(--ok); }
.chip.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.chip .conf { color: #2B5D4A; font-weight: 400; }
.chip.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.chip.warn { background: var(--warn-bg); color: #8A1A2C; }
.chip .i { width: 18px; height: 18px; }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1200px; margin: 14px auto 0; padding: 0 16px; }
.desk-note { max-width: 860px; margin: 14px auto 0; padding: 0 16px; text-align: center; font-size: 16px; color: var(--navy-2); }
.verify-note { display: flex; justify-content: center; align-items: flex-start; gap: 10px; text-align: left; }
.verify-note .vn-flag { color: var(--poppy); line-height: 0; }
.verify-note .i { width: 18px; height: 18px; margin-top: 3px; }
/* the draft's fields at reading size: a phone's way to read the result without another tap (audit 5.1) */
.fieldlist { display: none; }
.fl-row { position: relative; display: grid; gap: 2px; padding: 12px 34px 12px 0; border-top: 1px solid var(--line); }
.fl-row:first-child { border-top: 0; }
.fl-k { font: 400 16px/1.35 var(--ui); color: var(--navy-2); }
.fl-v { font: 600 17px/1.45 var(--ui); color: var(--navy); overflow-wrap: anywhere; }
.fl-v.nf { font-weight: 400; font-style: italic; color: var(--navy-2); }
.fl-row .flag { position: absolute; right: 2px; top: 15px; color: var(--poppy); line-height: 0; }
.fl-row .flag .i { width: 18px; height: 18px; }
/* the reference code, why to keep it, and a copy button (audit 5.2) */
.refbox { max-width: 860px; margin: 18px auto 0; padding: 0 16px; text-align: center; }
.ref-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0; }
.ref-code { font: 500 16px var(--ui); color: var(--navy-2); }
.ref-code b { font: 600 17px var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .05em; color: var(--navy); }
.ref-keep { margin: 6px 0 0; font-size: 16px; color: var(--navy-2); }
#ref-copy .i-check, #ref-copy.is-done .i-copy { display: none; }
#ref-copy.is-done .i-check { display: block; }
#ref-copy.is-done { color: var(--ok); box-shadow: inset 0 0 0 1.5px #A9D9C4; }
.desk-msg { max-width: 860px; margin: 16px auto 0; padding: 14px 18px; border-radius: 16px; background: var(--mist); font-size: 16px; color: var(--navy); }
.desk-msg.is-error { background: var(--warn-bg); color: #7A1626; box-shadow: inset 0 0 0 1px var(--warn-line); }
.certify { max-width: 860px; margin: 22px auto 0; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(11,21,48,.35); }
.certify h2 { margin: 0; font: 400 30px/1.1 var(--display); }
.certify p { margin: 8px 0 0; font-size: 16px; color: var(--navy-2); }
.certify .gl-row input { flex: 1 1 14rem; width: auto; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); font: 400 16px var(--ui); color: var(--navy); }
.notcert { max-width: 860px; margin: 26px auto 0; padding: 20px 24px; border-radius: 20px; background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.notcert p { margin: 0; font-size: 16px; color: #4A2A26; }
.notcert .notcert-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 600; color: var(--poppy); }
.notcert .notcert-h .i { width: 20px; height: 20px; }
.notcert .notcert-link { margin-top: 12px; }
.notcert .notcert-link a { font-weight: 600; color: var(--navy); }
.gl-dok { padding-bottom: 8px; }

/* ── The glass path ── */
.path { position: relative; overflow: hidden; margin-top: 96px; padding: 120px 0 130px; background: var(--navy); color: #fff; isolation: isolate; }
.path .gl-eyebrow { color: #C3CCDD; }
.path .gl-h2 em { color: #FF9AA9; }
.orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orbs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .7; animation: drift 18s ease-in-out infinite alternate; }
.orbs span:nth-child(1) { width: 560px; height: 560px; left: -120px; top: 80px; background: #1B4FA8; }
.orbs span:nth-child(2) { width: 460px; height: 460px; right: -80px; top: -60px; background: #B3122E; opacity: .45; animation-duration: 22s; }
.orbs span:nth-child(3) { width: 520px; height: 520px; left: 40%; bottom: -260px; background: #3E7BD9; opacity: .5; animation-duration: 26s; }
@keyframes drift { to { transform: translate3d(60px, -40px, 0) scale(1.08); } }
.panes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 64px 0 0; padding: 0; list-style: none; perspective: 1400px; }
.pane { position: relative; min-height: 290px; padding: 30px 24px 28px; border-radius: 26px; transform: translateY(18px) rotateX(6deg);
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.6);
  transition: transform .9s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); }
.pane.lit, .pane[data-state] { transform: none; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); }
.pane .n { font: 400 60px/1 var(--display); color: rgba(255,255,255,.62); }
.pane h3 { margin: 22px 0 10px; font: 400 34px/1.05 var(--display); letter-spacing: -0.01em; }
.pane p { margin: 0; font-size: 16px; color: #DCE2EE; }
.pane .state { position: absolute; right: 18px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font: 600 16px var(--ui); }
.pane[data-state="done"] .state { background: rgba(255,255,255,.14); color: #fff; }
.pane[data-state="now"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 2px #FF9AA9, 0 30px 70px -26px rgba(255,90,120,.55); background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); }
.pane[data-state="now"] .state { background: #FF9AA9; color: var(--navy); }
.pane[data-state="next"] { transform: none; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.pane[data-state="stopped"] { box-shadow: inset 0 0 0 2px #FFB4A8; }
.pane[data-state="stopped"] .state { background: #FFB4A8; color: var(--navy); }
.rail { position: relative; height: 2px; margin: 34px 12px 0; border-radius: 2px; background: rgba(255,255,255,.16); }
.rail .fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 2px; background: linear-gradient(90deg, #fff, #FF9AA9); }
.rail .token { position: absolute; top: 50%; left: var(--p, 0%); width: 22px; height: 28px; margin: -14px 0 0 -11px; border-radius: 3px; background: var(--paper); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.rail .token::after { content: ""; position: absolute; left: 5px; right: 5px; top: 7px; height: 12px; background: repeating-linear-gradient(180deg, #C9CFDA 0 2px, transparent 2px 4px); }
/* the path on an order or status page: on light ground, under the page's own heading */
.path.is-status { margin-top: 32px; padding: 40px 0 44px; border-radius: 32px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.path.is-status .panes { margin-top: 0; }
.gl-page .path.is-status .gl-wrap { max-width: 1200px; }
.path.is-status .pane { min-height: 0; padding: 24px 20px 22px; }
.path.is-status .pane .n { font-size: 44px; }
.path.is-status .pane h3 { margin-top: 14px; font-size: 30px; }

/* ── The certification page and "anyone can verify" ── */
.certpage { padding: 120px 0; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.cert-sheet { margin: 0; }
.cert-sheet figcaption { margin-top: 22px; }
.paper.cert { min-height: auto; aspect-ratio: 8.5 / 11; height: auto; overflow: visible; padding: 44px 42px; transform: rotate(-1.6deg); font-size: 15px; line-height: 1.55;
  box-shadow: 0 0 0 1px rgba(11,21,48,.05), 0 40px 80px -40px rgba(11,21,48,.45); }
.cert-banner { margin: 0; padding-right: 96px; font: 600 12px/1.3 var(--ui); letter-spacing: .14em; color: var(--ok); }
.cert-title { margin: 10px 0 2px; font: 400 30px/1.1 var(--display); }
.cert-sub { margin: 0 0 22px; font-size: 13px; color: #5A6378; }
.cert-h { margin: 0 0 8px; font: 600 14px/1.3 var(--ui); color: var(--ink); }
.cert-body { margin: 0; font: 400 21px/1.38 var(--display); }
.blank { display: inline-block; min-width: 8em; border-bottom: 1px solid #9AA3B5; font: 400 13px/1.6 var(--ui); color: #5A6378; }
.cert-sign { margin-top: 26px; font-size: 14px; color: #39425A; }
.cert-sign .line { display: block; width: 62%; margin-top: 8px; padding-top: 6px; border-top: 1px solid #9AA3B5; color: #5A6378; font-size: 13px; }
.cert-foot { margin: 28px 0 0; font-size: 12px; line-height: 1.5; color: #5A6378; }
.cert-foot b { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.stamp { position: absolute; right: 26px; top: 24px; padding: 6px 10px; border: 1.5px solid currentColor; border-radius: 999px; font: 700 12px/1 var(--ui); letter-spacing: .18em; color: var(--poppy); }
.verify-head { display: flex; align-items: center; gap: 22px; }
.seal { width: 112px; height: 112px; flex: none; }
.verify-col .gl-lede { margin-top: 24px; }
.uscis { margin: 26px 0 0; padding-left: 16px; border-left: 3px solid var(--poppy); font-size: 16px; color: var(--navy-2); }
.uscis a { text-decoration: underline; }

/* /certified: the hero carries the sample certification page; the verify section stands alone */
.cert-hero { padding-bottom: 24px; }
.cert-hero .cert-sheet { max-width: 520px; justify-self: center; }
.certpage.verify-only { padding: 110px 0 40px; }
.certpage.verify-only .gl-lede { max-width: 760px; }
.thanks:focus { outline: none; }
.thanks:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* ── Prices (a table on a desk, cards on a phone) ── */
.prices { padding: 40px 0 110px; }
.table-wrap { margin-top: 40px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.price-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.price-table th, .price-table td { padding: 18px 22px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-table thead th { border-top: 0; background: var(--mist); font: 600 16px/1.2 var(--ui); color: var(--navy-2); }
.price-table tbody th { font-weight: 600; }
.price-table .price { font: 400 30px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.price-table .h { display: block; margin-top: 4px; font-size: 16px; color: var(--navy-2); }
.gl-card .table-wrap { margin-top: 16px; }
.gl-card .price-table th, .gl-card .price-table td { padding: 12px 14px; }
.gl-card .price-table .price { font-size: 22px; }

/* ── The quote ── */
.quote { padding: 110px 0 120px; background: linear-gradient(180deg, #fff, var(--mist)); }
.draft-vs { margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; color: var(--navy-2); }
.draft-vs p { margin: 0; }
.draft-vs .dv-h { margin-bottom: 6px; font-weight: 600; color: var(--navy); }
.draft-vs a { text-decoration: underline; }
.glass-form { position: relative; display: grid; gap: 8px; padding: 30px; border-radius: 28px; background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 40px 80px -40px rgba(11,21,48,.35); }
.gl-field { display: grid; gap: 6px; margin-top: 8px; }
.gl-field label, .gl-legend { font: 500 16px var(--ui); color: var(--navy); }
.gl-field .muted, .muted { color: var(--navy-2); font-weight: 400; }
.gl-field select { appearance: auto; }
.gl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.glass fieldset { margin: 8px 0 0; padding: 0; border: 0; min-width: 0; }
.gl-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; color: var(--navy-2); cursor: pointer; }
.gl-check input { width: 22px; height: 22px; accent-color: var(--navy); flex: none; }
.glass-form .gl-btn { margin-top: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks { padding: 22px; border-radius: 22px; background: #E6F3EE; color: var(--ok); }
.thanks p { margin: 0; font-size: 16px; } .thanks .thanks-h { margin-bottom: 6px; font: 400 30px/1.1 var(--display); color: #0B4F3A; }

/* ── The reader: the translation at reading size ── */
.reader { width: min(760px, calc(100% - 24px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--navy); box-shadow: 0 40px 120px -30px rgba(11,21,48,.55); }
.reader::backdrop { background: rgba(11,21,48,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reader-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); }
.reader-bar h2 { margin: 0; font: 400 28px/1.1 var(--display); }
.reader .paper { min-height: 0; transform: none; border-radius: 0; box-shadow: none; padding: 26px 24px 30px; font-size: 17px; line-height: 1.55; overflow: visible; }
.reader .paper[data-stamp]::after { font-size: 90px; }
.reader .doc-head, .reader .doc-sub { font-size: 16px; }
.reader .doc-title { font-size: 34px; }
.reader .field { grid-template-columns: minmax(0, 44%) minmax(0, 1fr) 22px; padding: 8px 6px; border-top: 1px solid var(--line); }
.reader .field .flag { position: static; }
.reader .field .flag .i { width: 16px; height: 16px; }
.reader .field .k { color: var(--navy-2); }
.reader .doc-sign, .reader .field .v.nf { color: var(--navy-2); }

/* ── Small pages: start, order, status, verify ── */
.gl-page { padding: 56px 0 96px; }
.gl-page .gl-wrap { max-width: 860px; }
.gl-page .gl-wrap.is-wide { max-width: 1200px; }
.gl-card { margin-top: 26px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(11,21,48,.4); }
.gl-card h2 { margin: 0 0 6px; font: 400 30px/1.1 var(--display); }
.gl-card p { margin: 6px 0 0; font-size: 16px; color: var(--navy-2); }
.gl-card .big { margin: 6px 0 0; font: 400 34px/1.1 var(--display); color: var(--navy); }
.gl-card.ok { background: #F1FAF6; box-shadow: inset 0 0 0 1.5px #A9D9C4; }
.gl-card.ok h2, .gl-card.ok .big { color: #0B4F3A; }
.gl-card.wait { background: #FFF9EC; box-shadow: inset 0 0 0 1.5px #EBD39A; }
.gl-card.bad { background: var(--warn-bg); box-shadow: inset 0 0 0 1.5px #EDB9B0; }
.gl-card.bad h2 { color: #7A1626; }
.gl-meta { margin: 10px 0 0; font-size: 16px; color: var(--navy-2); }
.gl-meta code, .gl-code { padding: 2px 8px; border-radius: 8px; background: var(--mist); font: 500 16px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy); overflow-wrap: anywhere; }
.gl-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 18px 0 0; font-size: 16px; }
.gl-dl dt { color: var(--navy-2); } .gl-dl dd { margin: 0; color: var(--navy); overflow-wrap: anywhere; }
.gl-dl .hash { font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.gl-docs { margin: 12px 0 0; padding: 0; list-style: none; }
.gl-docs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.gl-docs li:first-child { border-top: 0; }
.gl-verify-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.gl-verify-form input { flex: 1 1 16rem; min-height: 52px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line); font: 500 18px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; color: var(--navy); }
.gl-verify-form input:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 4px rgba(27,79,168,.16); }

/* ── Landing pages per document (/certified/translation/<slug>) ── */
.gl-doc-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.gl-doc-prices .gl-card { margin: 0; }
.gl-list { margin: 14px 0 0; padding-left: 1.2em; font-size: 17px; }
.gl-list li { margin: 6px 0; }
.gl-quote { margin: 16px 0 0; padding: 16px 20px; border-left: 3px solid var(--poppy); font: 400 21px/1.4 var(--display); color: var(--navy); }

/* ── Phones and tablets ── */
@media (max-width: 959px) {
  .two { grid-template-columns: 1fr; gap: 48px; }
  .panes { grid-template-columns: 1fr; gap: 14px; }
  .pane { min-height: 0; }
  .rail { display: none; }
  .path, .certpage, .quote { padding: 80px 0; }
  .path { margin-top: 64px; }
  .gl-doc-prices { grid-template-columns: 1fr; }
}
/* the desk turns into papers stacked on a desk when two sheets will not sit side by side */
@media (max-width: 879px) {
  .glass { --sheet-w: min(318px, calc(100vw - 64px)); }
  .stage { width: calc(100% - 16px); margin-top: 28px; padding: 28px 12px 84px; border-radius: 28px; perspective: 1100px; }
  .plane { grid-template-columns: var(--sheet-w); padding: 34px 14px 30px; }
  .sheet-o, .sheet-t { grid-area: 1 / 1; }
  .sheet-tag { top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* still the sheet's heading for a screen reader */
  .paper { padding: 20px 18px 16px; font-size: 12px; }
  .doc-head, .doc-sub { font-size: 12px; }
  .doc-title { font-size: 20px; }
  .readout { justify-content: flex-start; }
  .result-actions { justify-content: flex-start; }
  /* the papers rest stacked, the translation on top (dokumente.js sets the same values: no jump when it runs) */
  .sheet-o { --x: -8px; --y: -14px; --z: 0.6px; --rz: -3deg; }
  .sheet-t { --x: 4px; --y: 0px; --z: 1.2px; --rz: 1.2deg; }
  /* The sheet underneath is blank paper: its text peeked out at the edge (launch audit, design L1). Transparent, not
     hidden, so a screen reader still reads both sheets. At rest the original is underneath; dokumente.js marks
     whichever is (.is-under) once the switch is used. */
  .sheet .paper > * { transition: opacity .3s var(--ease); }
  .stage:not(.has-stack):has(.sheet-t.in) .sheet-o .paper > *, .stage.has-stack .sheet.is-under .paper > * { opacity: 0; }
  .dok-desk .readout, .dok-desk .result-actions, .dok-desk .desk-note, .dok-desk .refbox { padding: 0 8px; }
  .dok-desk .notcert, .dok-desk .desk-msg, .dok-desk .certify { margin-left: 8px; margin-right: 8px; }
  .refbox { text-align: left; }
  .ref-line { justify-content: flex-start; }
  .verify-note { justify-content: flex-start; }
  .fieldlist:not([hidden]) { display: block; margin: 16px 8px 0; padding: 4px 18px; list-style: none; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .dc-title { font-size: 26px; }
  .stage.is-message { padding-bottom: 28px; }
  .stage.is-message .plane { padding: 28px 12px; }
  .desk-card { padding: 24px 20px 20px; }
  /* At rest: a compact preview of the finished sample under the headline, its caption on the glass (audit 1.1, 2.1) */
  .dok-desk.is-rest .stage { height: 360px; padding-bottom: 0; }
  .dok-desk.is-rest .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 172px; pointer-events: none;
    background: linear-gradient(180deg, rgba(238,243,249,0), rgba(238,243,249,.97) 38%, #EEF3F9 52%); }
  .dok-desk.is-rest .flip, .dok-desk.is-rest .readout, .dok-desk.is-rest .verify-note, .dok-desk.is-rest .fieldlist,
  .dok-desk.is-rest .refbox, .dok-desk.is-rest .result-actions { display: none; }
  /* Pulled up onto the glass; at least as tall as the pull, so the desk's box still ends at the glass's foot. With a
     one-line caption it ended up to 71 px short, and the glass covered the upload button below (820-879 px wide,
     launch audit: design B2). */
  .dok-desk.is-rest .sample-note { position: relative; z-index: 5; margin-top: -96px; min-height: 96px; padding: 0 22px; }
  /* while the desk shows a card, its own buttons are the next step: no second copy right under it */
  .dok-desk.has-card ~ .dok-act > .gl-actions { display: none; }
  /* the one main action right under the preview; what happens next is told after it */
  .dok-act { display: flex; flex-direction: column; }
  .dok-act > .gl-actions, .dok-act > .gl-fine, .dok-act > #doc-upload-status { order: -1; }
  .dok-act > .gl-actions { margin-top: 0; }
  .dok-act > .gl-lede { margin-top: 10px; }
}
@media (max-width: 560px) {
  .gl-hero { padding-top: 36px; }
  .gl-actions .gl-btn { flex: 1 1 100%; }
  .paper.cert { padding: 30px 24px; }
  .cert-body { font-size: 19px; }
  .seal { width: 88px; height: 88px; }
  .verify-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .glass-form { padding: 22px 18px; }
  .gl-card { padding: 20px 18px; }
  .gl-pair { grid-template-columns: 1fr; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 18px; border-top: 1px solid var(--line); }
  .price-table tbody tr:first-child { border-top: 0; }
  .price-table th, .price-table td { padding: 0; border: 0; }
  .price-table tbody th { grid-column: 1 / -1; }
  .price-table td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 500 16px/1.4 var(--ui); color: var(--navy-2); }
  .price-table .price { font-size: 26px; }
  .gl-dl { grid-template-columns: 1fr; gap: 2px; } .gl-dl dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbs span { animation: none; }
  .plane, .pane, .field, .sheet-t .field.w, .chip, .sheet-tag, .gl-btn, .gl-link, .drop-hint { transition: none !important; animation: none !important; }
  .sheet { visibility: visible; }
  .sheet-t .field.w { opacity: 1; transform: none; }
}