/* ============================================================
   FrontBack comparison-page visuals (fbc-*).
   Loaded only by the /frontback-scanner/<topic>/ pages, after
   styles.css + frontback.css + export-pages.css. Everything here
   is deliberately STATIC: each diagram is its own finished
   frame, so there is nothing to freeze for reduced motion and
   crawlers see exactly what users see. Colors ride the site
   tokens so dark mode needs no overrides; the mini scanner beds
   stay dark in both themes, matching the fbl demo loops.
   ============================================================ */

/* ---- Side-by-side duel: "their way / our way" ---- */
.fbc-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  max-width: 940px;
  margin: 0 auto;
}

.fbc-duel__panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.3rem 1.15rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.fbc-duel__panel--us {
  border-color: rgba(141, 102, 8, 0.45);
  box-shadow: var(--shadow-warm);
}

.fbc-duel__label {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-accent);
  border-radius: 999px;
  padding: 0.28em 0.85em;
}

.fbc-duel__panel--us .fbc-duel__label {
  color: #fff;
  background: var(--accent);
}

.fbc-duel__caption {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.fbc-duel__caption b {
  color: var(--text-primary);
}

/* Chip row under a visual: the 3-4 facts that matter */
.fbc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fbc-chips li {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 0.3em 0.75em;
  white-space: nowrap;
}

.fbc-chips li.fbc-chip--good {
  color: var(--green);
  background: var(--green-light);
  border-color: transparent;
}

.fbc-chips li.fbc-chip--bad {
  color: var(--red);
  background: var(--red-light);
  border-color: transparent;
}

/* ---- Mini scanner bed diagram ---- */
.fbc-bed {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: radial-gradient(ellipse 120% 90% at 50% -20%, #4c443b, #262019);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Flatbed ruler ticks, same trick as the demo loops */
.fbc-bed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.16) 0 1px,
    transparent 1px 12px
  );
  opacity: 0.7;
  pointer-events: none;
}

.fbc-print {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 3 / 2;
  transform: rotate(var(--rot, 0deg));
  background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    var(--img) center/cover no-repeat #d8cdb8;
  border: 3px solid #f6f1e6;
  border-radius: 2px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.45);
}

.fbc-print--tall {
  aspect-ratio: 2 / 3;
}

/* Detection outcomes drawn over prints */
.fbc-box {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: rotate(var(--rot, 0deg));
  border: 2px solid var(--green);
  border-radius: 4px;
  z-index: 3;
  pointer-events: none;
}

.fbc-box--bad {
  border: 2px dashed #e06a5c;
}

.fbc-box--dotted {
  border: 2px dotted rgba(255, 255, 255, 0.75);
}

.fbc-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1d1712;
  background: var(--accent);
  border-radius: 3px;
  padding: 0.1em 0.5em;
  white-space: nowrap;
  z-index: 4;
}

[data-theme="dark"] .fbc-tag {
  color: #14100c;
}

.fbc-tag--bad {
  color: #fff;
  background: #b94a3e;
}

.fbc-tag--dim {
  color: #efe9dc;
  background: rgba(255, 255, 255, 0.16);
}

/* Spacing ruler between prints ("keep 20 mm apart") */
.fbc-gapruler {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.65);
  z-index: 3;
}

.fbc-gapruler::before,
.fbc-gapruler::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.65);
}

.fbc-gapruler::before {
  left: -1px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.65);
  transform: rotate(-45deg);
}

.fbc-gapruler::after {
  right: -1px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.65);
  transform: rotate(45deg);
}

.fbc-gapruler span {
  position: absolute;
  left: 50%;
  top: -0.7em;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #efe9dc;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  padding: 0.2em 0.6em;
  white-space: nowrap;
}

/* Clipped-edge hatching on a print */
.fbc-clipband {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: rotate(var(--rot, 0deg));
  background: repeating-linear-gradient(
    -45deg,
    rgba(185, 74, 62, 0.85) 0 5px,
    rgba(185, 74, 62, 0.35) 5px 10px
  );
  border-radius: 2px 2px 0 0;
  z-index: 3;
}

/* Free-floating annotation chip on the bed */
.fbc-note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  color: #efe9dc;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.25em 0.7em;
  white-space: nowrap;
  z-index: 5;
}

.fbc-note--bad {
  color: #ffd9d3;
  border-color: rgba(224, 106, 92, 0.65);
}

.fbc-note--good {
  color: #d9ecd9;
  border-color: rgba(126, 176, 133, 0.65);
}

/* ---- Phone-camera capture mock ---- */
.fbc-phoneshot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: radial-gradient(ellipse 130% 100% at 50% -30%, #3d3831, #211c17);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.fbc-phoneshot .fbc-print {
  left: 18%;
  top: 16%;
  width: 58%;
  transform: perspective(420px) rotateX(14deg) rotateZ(-7deg);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.5);
}

/* The glare streak a glossy print throws back at a phone flash */
.fbc-glare {
  position: absolute;
  left: 24%;
  top: 10%;
  width: 46%;
  height: 62%;
  transform: rotate(-18deg);
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.78) 47%,
    rgba(255, 255, 255, 0.28) 56%,
    transparent 68%
  );
  filter: blur(1.5px);
  z-index: 2;
  pointer-events: none;
}

/* Phone silhouette hovering in the corner */
.fbc-phonebody {
  position: absolute;
  right: 7%;
  bottom: 8%;
  width: 17%;
  aspect-ratio: 9 / 18;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 12% / 6%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.fbc-phonebody::before {
  content: '';
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 3.5%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.fbc-phonebody::after {
  content: '';
  position: absolute;
  top: 13%;
  right: 12%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 200, 0.95);
  box-shadow: 0 0 10px 4px rgba(255, 255, 200, 0.55);
}

/* ---- Watermarked-trial thumb ---- */
.fbc-wmwrap {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.fbc-wm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-18deg) scale(1.5);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}

/* ---- Price tiles ---- */
.fbc-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.1rem;
  max-width: 860px;
  margin: 0 auto;
}

.fbc-price {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.1rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.fbc-price--us {
  border-color: rgba(141, 102, 8, 0.5);
  box-shadow: var(--shadow-warm);
}

.fbc-price__who {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.fbc-price__amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.05;
}

.fbc-price--us .fbc-price__amount {
  color: var(--accent);
}

.fbc-price__term {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}

.fbc-price__foot {
  margin: 0.65rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border-light);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---- File rail (what lands in the folder) ---- */
.fbc-rail {
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.7rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.fbc-rail__head {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 0.15rem;
}

.fbc-file {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  padding: 0.32rem 0.55rem;
}

.fbc-file__thumb {
  flex: none;
  width: 30px;
  height: 22px;
  border-radius: 3px;
  background: var(--img, var(--photo-bg)) center/cover no-repeat;
  border: 1.5px solid #f6f1e6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.fbc-file__thumb--paper {
  background: #fbf7ec;
  color: #6b5b4d;
}

.fbc-file__name {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fbc-file__flag {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.18em 0.6em;
  white-space: nowrap;
}

.fbc-file__flag--bad {
  color: var(--red);
  background: var(--red-light);
}

.fbc-file__flag--good {
  color: var(--green);
  background: var(--green-light);
}

.fbc-file--dup {
  border-style: dashed;
  opacity: 0.85;
}

.fbc-file--ghost {
  border: 1.5px dashed var(--border);
  background: transparent;
  opacity: 0.75;
}

.fbc-file--ghost .fbc-file__thumb {
  background: transparent;
  border: 1.5px dashed var(--border);
  box-shadow: none;
}

/* A front+back pair joined by a little spine */
.fbc-pair {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding-left: 0.85rem;
}

.fbc-pair::before {
  content: '';
  position: absolute;
  left: 0.18rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 0.45rem;
  border: 2px solid var(--accent);
  border-right: none;
  border-radius: 6px 0 0 6px;
  opacity: 0.75;
}

/* ---- Platform/app tiles ---- */
.fbc-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.1rem;
  max-width: 900px;
  margin: 0 auto;
}

.fbc-app {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.1rem 1.05rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.fbc-app--us {
  border-color: rgba(141, 102, 8, 0.5);
  box-shadow: var(--shadow-warm);
}

.fbc-app__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
}

.fbc-app__price {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.fbc-os {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.fbc-os span {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.26em 0.7em;
}

.fbc-os__yes {
  color: var(--green);
  background: var(--green-light);
}

.fbc-os__no {
  color: var(--red);
  background: var(--red-light);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.fbc-app__foot {
  margin: 0.35rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-light);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---- Fact strip: icon + a few words, replaces intro paragraphs ---- */
.fbc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  max-width: 860px;
  margin: 0 auto;
}

.fbc-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.95rem 0.7rem 0.85rem;
}

.fbc-fact img {
  width: 40px;
  height: 40px;
}

.fbc-fact b {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.fbc-fact span {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ---- Pass-count pills (hardware passes per bed) ---- */
.fbc-passes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fbc-pass {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7a4b12;
  background: linear-gradient(180deg, #f3d9a5, #e7c27b);
  border: 1px solid rgba(122, 75, 18, 0.35);
  border-radius: 999px;
  padding: 0.3em 0.75em;
  white-space: nowrap;
}

.fbc-pass--one {
  color: #2f5236;
  background: linear-gradient(180deg, #cfe4d2, #b3d2b8);
  border-color: rgba(47, 82, 54, 0.35);
}

[data-theme="dark"] .fbc-pass {
  color: #f3d9a5;
  background: rgba(231, 194, 123, 0.16);
}

[data-theme="dark"] .fbc-pass--one {
  color: #cfe4d2;
  background: rgba(179, 210, 184, 0.16);
}

/* ---- Front/back flip pair ---- */
.fbc-flippair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9rem;
  max-width: 560px;
  margin: 0 auto;
}

.fbc-face {
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  border: 5px solid #f6f1e6;
  box-shadow: var(--shadow-md);
  background: var(--img) center/cover no-repeat var(--photo-bg);
  transform: rotate(-1.5deg);
}

.fbc-face--back {
  transform: rotate(1.5deg);
  background: #fbf7ec;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.6rem;
}

.fbc-face--back i {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.78rem, 1.9vw, 0.98rem);
  line-height: 1.5;
  color: #4a5f8a;
  text-align: center;
}

.fbc-face--back small {
  font-family: var(--font-ui);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b3a78f;
}

.fbc-flippair__arrow {
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 700;
}

/* ---- Section spacing helpers ---- */
.fbc-visual-note {
  max-width: 720px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.fbc-stack {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .fbc-duel {
    grid-template-columns: 1fr;
  }

  .fbc-flippair {
    gap: 0.6rem;
  }
}

@media (max-width: 480px) {
  .fbc-duel__panel {
    padding: 1.05rem 1rem 0.95rem;
  }

  .fbc-prices,
  .fbc-apps {
    grid-template-columns: 1fr;
  }

  .fbc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Utility: standard gap when a visual follows prose */
.fbc-after {
  margin-top: 2rem;
}