/* ─────────────────────────────────────────────────────────────
   Chizgi visual demo.
   Palette follows the report's "naturalist's field notebook".
   ───────────────────────────────────────────────────────────── */

:root {
  --paper:      #f4f1ea;
  --paper-2:    #eae5da;
  --ink:        #1c1a17;
  --ink-2:      #57534c;
  --ink-3:      #8b857c;
  --rule:       #d9d3c7;

  --stage:      #15181a;
  --stage-2:    #1e2225;
  --stage-rule: #2c3236;
  --stage-text: #b9c0c2;
  --stage-dim:  #767e82;

  --accent:     #6f9c81;

  --common:     #7d8a85;
  --uncommon:   #5c8a6f;
  --rare:       #3f7d94;
  --arcane:     #7a5f9e;
  --mythic:     #b8762e;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--stage);
  color: var(--stage-text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

/* ── Layout ─────────────────────────────────────────────────── */

.stage {
  display: grid;
  grid-template-columns: 390px minmax(320px, 440px);
  gap: 56px;
  align-items: center;
}

@media (max-width: 860px) {
  body { align-items: flex-start; padding: 24px 16px; }
  .stage { grid-template-columns: 390px; gap: 32px; justify-items: center; }
  .panel { max-width: 390px; }
}

/* ── Phone ──────────────────────────────────────────────────── */

.phone {
  width: 390px;
  height: 844px;
  border-radius: 54px;
  background: #0b0d0e;
  padding: 11px;
  border: 1px solid #31383c;
  position: relative;
  flex: none;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 43px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.island {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 30px;
  background: #0b0d0e;
  border-radius: 16px;
  z-index: 60;
  pointer-events: none;
}

.statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  z-index: 50;
  pointer-events: none;
}

.statusbar .right { display: flex; gap: 5px; align-items: center; }
.bar { width: 3px; border-radius: 1px; background: currentColor; }
.batt {
  width: 22px; height: 11px;
  border: 1.3px solid currentColor;
  border-radius: 3px;
  padding: 1.5px;
  opacity: 0.9;
}
.batt i { display: block; height: 100%; width: 72%; background: currentColor; border-radius: 1px; }

/* Views stack inside the screen; one is active at a time. */
.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  display: flex;
  flex-direction: column;
}
.view.active { opacity: 1; pointer-events: auto; }

/* ── Reader ─────────────────────────────────────────────────── */

#view-reader { background: var(--paper); padding-top: 48px; }

.reader-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 30px 12px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.reader-body {
  flex: 1;
  overflow: hidden;
  padding: 4px 30px 0;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  /* No hyphenation: a demo word broken across two lines reads as a bug. */
  hyphens: none;
}

.reader-body p { margin: 0 0 13px; }
.reader-body .chapter {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  margin-bottom: 14px;
}

/* A tappable word. In the real app every word is tappable; here only the
   six with data are, so they get a faint affordance for discoverability. */
.w { cursor: pointer; border-radius: 2px; padding: 0 0.5px; }
.w:not(.owned):not(.taken) { border-bottom: 1px dotted #bdb6a9; }
.w:not(.owned):not(.taken):hover { background: rgba(111, 156, 129, 0.16); }

/* Already in the collection: tier-coloured underline. */
.w.owned {
  border-bottom: 2px solid var(--tier, var(--common));
  padding-bottom: 0.5px;
}

.w.pulse {
  animation: pulse 900ms ease-out 2;
  background: rgba(111, 156, 129, 0.2);
}
@keyframes pulse {
  0%   { background: rgba(111, 156, 129, 0.05); }
  40%  { background: rgba(111, 156, 129, 0.34); }
  100% { background: rgba(111, 156, 129, 0.05); }
}

.w.taken {
  border-bottom: 2px solid var(--tier);
  background: transparent;
  animation: none;
}

.coverage {
  padding: 12px 30px 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--paper);
}
.coverage .track {
  display: block;
  flex: 1; height: 4px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
/* `display:block` matters: an inline <i> ignores height entirely. */
.coverage .fill {
  display: block;
  height: 100%;
  width: 94%;
  background: var(--accent);
  transition: width 600ms ease;
}

/* ── Catch sheet ────────────────────────────────────────────── */

.scrim {
  position: absolute; inset: 0;
  background: rgba(20, 18, 15, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 70;
}
.scrim.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-radius: 26px 26px 43px 43px;
  z-index: 80;
  transform: translateY(102%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 10px 26px 30px;
  max-height: 88%;
  overflow: hidden;
}
.sheet.on { transform: translateY(0); }

.grabber {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--rule);
  margin: 0 auto 16px;
}

/* Staged reveal: each stage fades up in sequence. */
.stg { opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 320ms ease; }
.stg.on { opacity: 1; transform: none; }

.caught-label {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}

.headword {
  font-family: var(--serif);
  font-size: 33px;
  line-height: 1.1;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.phon { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: 14px; }

.tier-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 15px 0 4px;
}
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--tier);
  color: var(--tier);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tier-badge .glyph { font-size: 14px; line-height: 1; }

.freq {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}

.gloss {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.5;
  margin: 12px 0 0;
}

.context {
  margin: 16px 0 0;
  padding: 13px 15px;
  background: var(--paper-2);
  border-left: 2.5px solid var(--tier);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.context b { color: var(--ink); font-weight: 600; }
.context .src {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.metrics { display: flex; gap: 0; margin-top: 16px; border-top: 1px solid var(--rule); }
.metric { flex: 1; padding: 12px 0 0; }
.metric + .metric { border-left: 1px solid var(--rule); padding-left: 14px; }
.metric .k {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.metric .v { font-size: 15px; font-weight: 600; }

.collection {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.collection .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}
.collection .name { font-family: var(--serif); font-style: italic; font-size: 15px; }
.collection .count { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.collection .track {
  display: block;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.collection .fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 700ms ease;
}
.collection .members { margin-top: 9px; font-size: 11.5px; color: var(--ink-3); }
.collection .members b { color: var(--ink-2); font-weight: 600; }

.sheet-btn {
  margin-top: 20px;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Home screen + widget ───────────────────────────────────── */

#view-home {
  background: #2b3330;
  padding-top: 48px;
  color: #eef1ee;
}

.hs-date {
  text-align: center;
  padding: 18px 0 26px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(238, 241, 238, 0.65);
}
.hs-date b { display: block; font-size: 46px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; color: #fff; }

.hs-body { flex: 1; padding: 0 22px; }

/* The interactive review widget — the flagship surface. */
.widget {
  background: var(--paper);
  color: var(--ink);
  border-radius: 22px;
  padding: 17px 18px 15px;
  min-height: 172px;
  display: flex;
  flex-direction: column;
}

.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 11px;
}
.widget-head .due { color: var(--accent); font-weight: 700; }

.cloze {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.48;
  flex: 1;
}
.blank {
  display: inline-block;
  min-width: 74px;
  border-bottom: 2px solid var(--ink-3);
  vertical-align: baseline;
}
.answer { color: var(--tier, var(--rare)); font-weight: 600; border-bottom: 2px solid var(--tier, var(--rare)); }

.reveal-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.ratings { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rating {
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: transparent;
  padding: 7px 2px 6px;
  font-family: var(--sans);
  cursor: pointer;
  text-align: center;
  color: var(--ink);
  transition: background 140ms ease, border-color 140ms ease;
}
.rating:hover { background: var(--paper-2); }
.rating .lab { display: block; font-size: 11.5px; font-weight: 600; }
.rating .iv {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.rating.picked { border-color: var(--accent); background: rgba(111, 156, 129, 0.16); }

.widget-result {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
}
.widget-result .xp { color: var(--accent); font-weight: 700; }

.dd-widget { min-height: 0; margin-top: 14px; padding-bottom: 14px; }
.dd-word {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 5px;
}
.dd-gloss {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--ink-2);
}
.dd-tier {
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--arcane);
}

.hs-note {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(238, 241, 238, 0.5);
  text-align: center;
  padding: 0 10px;
}

.dock { padding: 14px 22px 26px; display: flex; gap: 18px; justify-content: center; }
.icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
}
.icon.chizgi {
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 26px;
}

/* ── Cabinet ────────────────────────────────────────────────── */

#view-cabinet { background: var(--paper); padding-top: 48px; }

.cab-head { padding: 10px 24px 14px; }
.cab-head h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
}
.cab-stats { display: flex; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cab-stats .s { flex: 1; padding: 10px 0; }
.cab-stats .s + .s { border-left: 1px solid var(--rule); padding-left: 12px; }
.cab-stats .k {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cab-stats .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.grid {
  flex: 1;
  overflow: hidden;
  padding: 14px 24px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  align-content: start;
}

.spec {
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 10px 11px 9px;
  border-left: 3px solid var(--tier);
  background: var(--paper);
}
.spec .wd { font-family: var(--serif); font-size: 15px; line-height: 1.2; }
.spec .mt {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec .mt .tg { color: var(--tier); font-weight: 700; }
.spec.silhouette { opacity: 0.42; border-style: dashed; }
.spec.silhouette .wd { color: var(--ink-3); }
.spec.fresh { animation: drop 520ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes drop {
  from { opacity: 0; transform: translateY(-9px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Side panel ─────────────────────────────────────────────── */

.panel { align-self: center; }

.panel .eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stage-dim);
  margin-bottom: 10px;
}
.panel h1 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #eef1ee;
}
.panel .sub {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--stage-dim);
  max-width: 38ch;
}

.beat {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px;
  min-height: 112px;
  margin-bottom: 24px;
}
.beat .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}
.beat h3 { margin: 4px 0 7px; font-size: 18px; font-weight: 600; color: #eef1ee; }
.beat p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--stage-dim); max-width: 42ch; }

.controls { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.ctl {
  border: 1px solid var(--stage-rule);
  background: var(--stage-2);
  color: var(--stage-text);
  border-radius: 7px;
  padding: 7px 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.ctl:hover { border-color: var(--accent); color: #eef1ee; }
.ctl.primary { background: var(--accent); border-color: var(--accent); color: #10211a; font-weight: 700; }
.ctl.on { border-color: var(--accent); color: #eef1ee; }

.legend { border-top: 1px solid var(--stage-rule); padding-top: 16px; }
.legend .lt {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stage-dim);
  margin-bottom: 10px;
}
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.legend li { display: flex; align-items: baseline; gap: 9px; font-size: 12px; color: var(--stage-dim); }
.legend .sw { color: var(--tier); font-size: 13px; width: 14px; }
.legend .nm { color: var(--stage-text); width: 74px; font-weight: 600; }
.legend .zf { font-family: var(--mono); font-size: 11px; }

.foot { margin-top: 18px; font-size: 11.5px; line-height: 1.55; color: #5d6467; max-width: 42ch; }

/* ── Camera capture ─────────────────────────────────────────── */

#view-camera { background: #0d0f10; padding-top: 48px; color: #e8ebe9; }

.cam-top {
  padding: 8px 22px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 235, 233, 0.5);
}
.cam-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(232, 235, 233, 0.2);
  border-radius: 999px;
  padding: 4px 10px;
  color: rgba(232, 235, 233, 0.78);
  white-space: nowrap;
}
.cam-chip .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.cam-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  overflow: hidden;
}
/* Once reflowed the page fills the screen, like a reader. */
.cam-stage.flat { align-items: stretch; }

/* Viewfinder framing marks, only while shooting. */
.reticle {
  position: absolute;
  inset: 34px 26px;
  pointer-events: none;
  transition: opacity 340ms ease;
}
.reticle i {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--accent);
}
.reticle i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.reticle i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.reticle i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.reticle i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.reticle.off { opacity: 0; }

/* The page. Three states: photo (held at an angle), deskewed, reflowed. */
.book-page {
  position: relative;
  width: 290px;
  background: #e8e1d1;
  color: #2b261e;
  padding: 14px 18px 12px;
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.52;
  border-radius: 2px;
  transition:
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms ease,
    box-shadow 700ms ease,
    opacity 200ms ease,
    width 700ms cubic-bezier(0.22, 1, 0.36, 1),
    background 600ms ease,
    font-size 600ms ease,
    padding 600ms ease;
}

.book-page.photo {
  transform: rotateX(12deg) rotateY(-10deg) rotate(-1.8deg);
  filter: saturate(1.07) contrast(0.95) brightness(1.02) blur(0.3px);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.6);
}
.book-page.deskewed {
  transform: none;
  filter: saturate(1.03) contrast(0.97);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}
.book-page.reflowed {
  transform: none;
  filter: none;
  flex: 1;
  width: auto;
  background: var(--paper);
  font-size: 14.5px;
  line-height: 1.6;
  padding: 20px 24px;
  border-radius: 0;
  box-shadow: none;
}
.book-page.swapping { opacity: 0.18; }

/* Specular highlight and gutter shadow — what makes it read as a photo. */
.glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity 600ms ease;
  background:
    linear-gradient(112deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.02) 40%),
    linear-gradient(to right, rgba(60,44,24,0.22) 0%, rgba(60,44,24,0) 14%),
    linear-gradient(to bottom, rgba(60,44,24,0.10) 0%, rgba(60,44,24,0) 12%);
}
.book-page.reflowed .glare { opacity: 0; }

.bp-head, .bp-folio {
  font-size: 0.82em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6c6354;
  transition: opacity 500ms ease;
}
.bp-head { margin-bottom: 9px; }
.bp-folio { text-align: center; margin-top: 9px; }
.bp-note {
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px solid rgba(107, 99, 84, 0.35);
  font-size: 0.78em;
  line-height: 1.4;
  color: #6c6354;
  transition: opacity 500ms ease;
}
/* Furniture is discarded at reflow — that is the point of stage 4. */
.book-page.reflowed .bp-head,
.book-page.reflowed .bp-folio,
.book-page.reflowed .bp-note { opacity: 0; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }

.bp-para { margin: 0 0 7px; }
.bp-line { white-space: nowrap; }
.bp-flow p { margin: 0 0 10px; }
.bp-flow p:last-child { margin-bottom: 0; }

/* Printed lines and reflowed prose are two renderings of the same text. */
.book-page:not(.reflowed) .bp-flow { display: none; }
.book-page.reflowed .bp-printed { display: none; }

/* OCR word boxes, drawn from the real DOM geometry of each word. */
.ocr-layer { position: absolute; inset: 0; pointer-events: none; transition: opacity 400ms ease; }
.ocr-layer.off { opacity: 0; }
.box {
  position: absolute;
  border: 1px solid rgba(111, 156, 129, 0.95);
  background: rgba(111, 156, 129, 0.15);
  border-radius: 1.5px;
  opacity: 0;
  animation: boxin 240ms ease forwards;
}
@keyframes boxin {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}
.box.dropped {
  border-color: rgba(203, 107, 74, 0.95);
  border-style: dashed;
  background: rgba(203, 107, 74, 0.12);
}
.drop-tag {
  position: absolute;
  font-family: var(--sans);
  font-size: 7.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #cb6b4a;
  background: rgba(13, 15, 16, 0.86);
  padding: 1.5px 4px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  /* Pinned to the right edge of the region it annotates, so it never
     sits on top of the text it is describing. */
  transform: translateX(-100%);
  animation: fadein 240ms ease forwards;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Selectable words on the reflowed page. */
.cw { cursor: pointer; border-bottom: 1px dotted #b8b0a1; padding: 0 0.5px; border-radius: 2px; }
.cw:hover { background: rgba(111, 156, 129, 0.18); }
.cw.sel {
  background: rgba(111, 156, 129, 0.26);
  border-bottom: 2px solid var(--accent);
}
.cw.wild { border-bottom-style: dashed; }

.flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
}
.flash.fire { animation: flash 420ms ease-out; }
@keyframes flash {
  0% { opacity: 0; } 12% { opacity: 0.92; } 100% { opacity: 0; }
}

.cam-bottom { padding: 12px 22px 24px; min-height: 108px; }

.shutter {
  display: block;
  margin: 8px auto 0;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(13, 15, 16, 1) inset;
  cursor: pointer;
}
.shutter:active { transform: scale(0.94); }

.cam-status { text-align: center; font-size: 12px; color: rgba(232, 235, 233, 0.72); }
.cam-status b { color: #e8ebe9; font-weight: 600; }
.cam-sub {
  margin-top: 5px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(232, 235, 233, 0.4);
}
.cam-prog {
  display: block;
  height: 3px;
  width: 160px;
  margin: 12px auto 0;
  background: rgba(232, 235, 233, 0.16);
  border-radius: 2px;
  overflow: hidden;
}
.cam-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 1400ms linear;
}

.selbar { display: flex; align-items: center; gap: 12px; }
.selbar .cnt { flex: 1; font-size: 11.5px; line-height: 1.4; color: rgba(232, 235, 233, 0.66); }
.selbar .cnt b { color: #e8ebe9; }
.add-btn {
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #0f2018;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  padding: 11px 15px;
  cursor: pointer;
  white-space: nowrap;
}
.add-btn:disabled { opacity: 0.3; cursor: default; }

/* Camera sheet contents */
.loupe {
  margin: 12px 0 0;
  height: 60px;
  border-radius: 7px;
  border: 1px solid var(--rule);
  background: #e8e1d1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.loupe span {
  font-family: var(--serif);
  font-size: 33px;
  color: #2b261e;
  transform: rotate(-1.8deg) skewX(-2deg);
  filter: blur(0.45px) contrast(0.94);
}

.pass {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: transparent;
  padding: 10px 12px;
  margin-top: 8px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
}
.pass.on { border-color: var(--accent); background: rgba(111, 156, 129, 0.13); }
.pass .radio {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  flex: none;
}
.pass.on .radio { border-color: var(--accent); border-width: 4px; }
.pass .rd { flex: 1; }
.pass .rd b { font-family: var(--serif); font-size: 16px; font-weight: 600; display: block; }
.pass .rd span { font-size: 10.5px; color: var(--ink-3); }
.pass .cf { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }

.caught-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.caught-row .tg {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tier);
  width: 92px;
  flex: none;
  white-space: nowrap;
}
.caught-row .wd { flex: 1; font-family: var(--serif); font-size: 17px; }
.caught-row .zf { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

.src-chip {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.src-chip b { font-family: var(--serif); font-size: 14.5px; font-weight: 600; display: block; margin-bottom: 2px; }
.src-chip span { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.privacy {
  margin-top: 11px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
  padding-left: 11px;
  border-left: 2px solid var(--rule);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}