/* ============================================================
   GUIDED DOCUMENT CAPTURE — full-screen camera surface
   Token-driven. Platform accent arrives through --accent.
   ============================================================ */

html.cap-open, html.cap-open body { overflow: hidden; }

.dcap {
  position: fixed; inset: 0; z-index: 90;
  background: #000;
  display: flex; flex-direction: column;
  animation: capIn var(--dur-med) var(--ease) both;
  /* respect notches on a real phone */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@keyframes capIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.dcap.is-out { animation: capOut var(--dur-fast) var(--ease) both; }
@keyframes capOut { to { opacity: 0; } }

.cap-stagewrap {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #050506;
}
.cap-video, .cap-staged {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* the staged sheet is a photograph of a page, so contain it and let the dark
   surround read as the surface it is lying on */
.dcap.is-staged .cap-staged { object-fit: contain; background: #07080a; }
.cap-staged { display: none; }
.dcap.is-staged .cap-video { display: none; }
.dcap.is-staged .cap-staged { display: block; }

.cap-edge { position: absolute; inset: 0; pointer-events: none; }

/* document-shaped guide frame — brackets, never a full box */
.cap-guide {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(74%, 420px);
  aspect-ratio: 8.5 / 11;
  pointer-events: none;
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) linear;
}
.cap-guide i {
  position: absolute; width: 34px; height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  transition: border-color var(--dur-fast) var(--ease);
}
.cap-guide .c1 { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.cap-guide .c2 { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.cap-guide .c3 { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.cap-guide .c4 { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.cap-guide.is-lock { transform: translate(-50%, -50%) scale(0.965); }
.cap-guide.is-lock i { border-color: var(--accent); box-shadow: 0 0 12px rgba(0,0,0,0.5); }

.dcap.is-flatten .cap-guide,
.dcap.is-result .cap-guide { opacity: 0; }

/* The parsed card's scrim (.cap-result, z-index 4) is full-bleed, so in the
   result state it painted over the top bar and its Close button: the label
   rendered through a 72-94% black wash and the button could not be hit at all.
   The way out has to survive the result state, so the top bar is lifted above
   the scrim. It covers only the top strip, so the card below is unaffected. */
.dcap.is-result .cap-top { z-index: 5; }

/* shutter flash */
.cap-flash {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none;
}
.dcap.is-flash .cap-flash { animation: capFlash 260ms var(--ease) both; }
@keyframes capFlash { 0% { opacity: 0; } 18% { opacity: 0.82; } 100% { opacity: 0; } }

.dcap.is-retake .cap-stagewrap { animation: capShake 520ms var(--ease-in-out) both; }
@keyframes capShake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}

/* top bar */
.cap-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) 0;
}
  /* The way out stays available and stays quiet — but it is quiet by size and
     placement, never by contrast. The sheet being photographed is cream and
     bright, so the top chrome carries the same opaque-scrim discipline the
     bottom instruction bar already had. At 0.46 with 0.82 opacity this button
     measured 2.87:1 over a white document. It now measures 9.29:1. */
.cap-x {
  font: 500 var(--fs-11) / 1 var(--font-sans);
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(10px);
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 40px;
  opacity: 1;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cap-x:hover { background: rgba(0, 0, 0, 0.84); }
.cap-x:active { transform: scale(0.97); }
.cap-torch {
  font: 500 var(--fs-11) / 1 var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--state-warn);
  /* 0.52 put the amber at 1.99:1 over a white sheet. 0.78 puts it at 5.79:1. */
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid var(--state-warn);
  padding: 8px var(--space-3);
  border-radius: var(--radius-full);
  animation: capFade var(--dur-med) var(--ease) both;
}
@keyframes capFade { from { opacity: 0; } to { opacity: 1; } }

/* bottom instruction block */
.cap-bottom {
  position: relative; z-index: 3;
  margin-top: auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
  text-align: center;
  /* the sheet is cream and bright, so the instruction scrim has to be opaque
     at the base or white text lands on mid-grey */
  background: linear-gradient(to top,
    rgba(6, 7, 8, 0.97) 0%,
    rgba(6, 7, 8, 0.9) 46%,
    rgba(6, 7, 8, 0) 100%);
}
.cap-status {
  font: 600 var(--fs-24) / var(--lh-heading) var(--font-sans);
  color: #fff;
  margin: 0 0 var(--space-2);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.cap-sub {
  font: 400 var(--fs-14) / var(--lh-body) var(--font-sans);
  color: rgba(255, 255, 255, 0.76);
  margin: 0 auto;
  max-width: 34ch;
}
.cap-relief {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
  animation: capFade var(--dur-med) var(--ease) both;
}
.cap-shoot, .cap-read {
  font: 600 var(--fs-16) / 1 var(--font-sans);
  min-height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.cap-shoot { background: #fff; color: #0b0b0c; border: 0; }
.cap-read {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.cap-shoot:active, .cap-read:active { transform: scale(0.975); }

/* the corrected sheet lifting out of the frame */
.cap-shot {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%) scale(0.82) rotate(-1.4deg);
  width: min(60vw, 380px);
  aspect-ratio: 880 / 1140;
  opacity: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform var(--dur-hero) var(--ease-spring),
              opacity var(--dur-med) var(--ease);
}
.cap-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-shot.in { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.dcap.is-result .cap-shot {
  opacity: 0;
  transform: translate(-50%, -62%) scale(0.62) rotate(0deg);
}

/* parsed card */
.cap-result {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--space-5);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 30%, rgba(0, 0, 0, 0.72));
  backdrop-filter: blur(2px);
}
.cap-card {
  width: 100%; max-width: 470px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.cap-card-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.cap-thumb {
  flex: none; width: 62px; aspect-ratio: 8.5 / 11;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
}
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-eyebrow {
  font: 500 var(--fs-11) / 1 var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}
.cap-title {
  font: 600 var(--fs-24) / var(--lh-heading) var(--font-sans);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.015em;
}
.cap-rows { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.cap-rows li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline-soft);
}
.cap-rows li:first-child { border-top: 0; }
.cap-rows .k {
  font: 400 var(--fs-14) / var(--lh-body) var(--font-sans);
  color: var(--text-muted);
}
.cap-rows .v {
  font: 600 var(--fs-18) / var(--lh-heading) var(--font-sans);
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: var(--num-tabular);
}
.cap-note {
  font: 400 var(--fs-14) / var(--lh-body) var(--font-sans);
  color: var(--text-body);
  margin: var(--space-5) 0 0;
}
.cap-acts { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.cap-ok, .cap-again {
  font: 600 var(--fs-16) / 1 var(--font-sans);
  min-height: 50px; padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cap-ok {
  flex: 1 1 auto;
  background: var(--accent-fill); color: var(--accent-fg); border: 0;
}
.cap-ok:hover { background: var(--accent-hover); }
.cap-again {
  background: transparent; color: var(--text-body);
  border: 1px solid var(--border-input);
}
.cap-ok:active, .cap-again:active { transform: scale(0.98); }
.cap-priv {
  font: 400 var(--fs-11) / var(--lh-body) var(--font-sans);
  color: var(--text-faint);
  margin: var(--space-4) 0 0;
  text-align: center;
}

/* no-motion users get the information, never the choreography */
@media (prefers-reduced-motion: reduce) {
  .dcap, .cap-shot, .cap-guide, .cap-flash, .cap-stagewrap {
    animation: none !important;
    transition: none !important;
  }
  .cap-shot { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 640px) {
  .cap-guide { width: 84vw; }
  .cap-status { font-size: var(--fs-18); }
  .cap-shot { width: 66vw; }
  .cap-card { padding: var(--space-5); }
  .cap-acts { flex-direction: column; }
  .cap-ok, .cap-again { width: 100%; }
}

/* ------------------------------------------------------------------
   Desktop presentation. This is a phone flow. On a laptop it is shown
   inside a device frame so the composition stays honest, and the
   surround is painted by a single outsized box-shadow, no extra node.
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
  .dcap {
    inset: auto; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 420px; height: min(860px, 92vh);
    border-radius: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 100vmax rgba(4, 5, 6, 0.92),
                0 40px 110px rgba(0, 0, 0, 0.7);
  }
  @keyframes capIn { from { opacity: 0; transform: translate(-50%, -50%) scale(1.03); }
                     to   { opacity: 1; transform: translate(-50%, -50%); } }
  .dcap.is-out { animation: capOutD var(--dur-fast) var(--ease) both; }
  @keyframes capOutD { to { opacity: 0; } }
  .cap-guide { width: min(78%, 300px); }
  .cap-shot { width: 62%; }
  .cap-status { font-size: var(--fs-18); }
  .cap-card { max-width: none; }
}

/* ------------------------------------------------------------------
   Bottom-sheet discipline: flush to the bottom edge, square-cornered
   at the bottom, and the label/value pairs stack on narrow screens so
   the court date never orphans a line.
   ------------------------------------------------------------------ */
@media (max-width: 640px), (min-width: 900px) {
  .cap-result { padding: 0; }
  .cap-card {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0; border-left: 0; border-right: 0;
    padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  }
  .cap-rows li { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .cap-rows .v { text-align: left; }
}