/*
 * Guided Scan capture UI — presentational styles for the client-rendered guide
 * (guided-capture-ui.js). These are loaded as an EXTERNAL stylesheet (not
 * inline) so the /identify/ page markup stays free of stray "%" characters,
 * which its honesty tests forbid (no leaked confidence percentages). Safe
 * defaults so the shell is presentable before/while the module mounts.
 *
 * DouglasExchange is an independent collector platform and is not affiliated
 * with, endorsed by, or sponsored by Douglas Company, Inc.
 */

.dx-identify-guided { margin: 0 0 1.5rem; }
.dx-identify-guided__lede { color: var(--dx-ink-soft, #556); max-width: 60ch; }
.dx-identify-guided__stage {
  margin: 1.25rem 0;
  min-height: 20rem;
  border: 1px solid var(--dx-line, #dde);
  border-radius: 16px;
  padding: 1.25rem;
  background: var(--dx-surface, #fff);
}
.dx-identify-guided__disclaimer { margin-top: 1rem; font-size: .8rem; color: var(--dx-ink-faint, #889); }

.dx-identify-classic { margin: 0 0 1.5rem; }
.dx-identify-classic__summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: .6rem 0; }

/* The guide the client renders inside [data-guided-capture]. Consistent vertical
 * rhythm so the prompt, progress line and controls don't read as ragged. */
.dx-gc__prompt { font-size: 1.25rem; font-weight: 700; margin: .85rem 0 .25rem; text-align: center; }
.dx-gc__count { margin: 0 0 .25rem; font-size: .95rem; color: var(--dx-ink-soft, #556); text-align: center; }
.dx-gc__video { width: 100%; max-height: 20rem; border-radius: 12px; background: #000; object-fit: cover; display: block; }
/* More breathing room between text and the button rows, and between the buttons
 * themselves, so nothing reads as cramped (owner feedback). */
.dx-gc__manual { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.dx-gc__nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
/* The capture controls are cleared on the results screen (owner request); the
 * [hidden] attribute must win over the flex display above. */
.dx-gc__nav[hidden], .dx-gc__manual[hidden] { display: none; }
/* Recognition diagnostics (tag OCR text + shape/pixel-map comparison) are tucked
 * into a collapsed panel until the reference library is trained — imperfect
 * matches must not dominate (or mislead on) the results screen. */
.dx-gc__tech { margin-top: 1.25rem; border-top: 1px solid #e5e5e5; padding-top: .75rem; }
.dx-gc__tech[hidden] { display: none; }
.dx-gc__tech > summary { cursor: pointer; color: #666; font-size: .85rem; }
.dx-gc__tech[open] > summary { margin-bottom: .75rem; }
.dx-gc__status { margin-top: 1rem; font-size: .95rem; }
.dx-gc__status--error { color: #a3242b; }
.dx-gc__gate, .dx-gc__outcome { margin-top: 1.5rem; }
.dx-gc__signin-title, .dx-gc__done-title { margin: 0 0 .5rem; font-size: 1.15rem; }
.dx-gc__signin-body, .dx-gc__done-body { color: var(--dx-ink-soft, #556); margin: 0 0 1rem; line-height: 1.5; }
.dx-gc__done-ref { font-size: .85rem; color: var(--dx-ink-faint, #889); margin: 0 0 1rem; }
.dx-gc__done-note { font-size: .9rem; color: var(--dx-ink-soft, #556); margin: 0 0 1rem; }
.dx-gc__done-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* Live-camera viewport: the video plus overlays (framing guide) stacked.
 * overflow:hidden CLIPS the framing guide to the video frame so a tall dog
 * outline can never spill above/below the black viewport into the page text. */
.dx-gc__viewport { position: relative; overflow: hidden; border-radius: 12px; }
.dx-gc__guide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; color: rgba(255, 255, 255, .85);
}
.dx-gc__guide[hidden] { display: none; }
/* Size the outline by HEIGHT so a tall (front/side) or wide (top) dog both fit
 * inside the frame; the max-width guard keeps a wide outline off the edges. */
.dx-gc__guide svg { height: 80%; width: auto; max-width: 78%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* "Open the camera" — centered OVER the dark preview like a tap-to-turn-on
 * button, so opening the camera feels like powering it on (not a button parked
 * below the frame). */
.dx-gc__open {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1rem 1.4rem; border: 0; border-radius: 16px; cursor: pointer;
  background: rgba(192, 57, 43, .95); color: #fff; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
/* The base rule sets `display`, which would otherwise defeat the `hidden`
 * attribute; `!important` guarantees a hidden Open control is truly gone (never
 * left overlaying the live preview and blocking the flow). */
.dx-gc__open[hidden] { display: none !important; }
.dx-gc__open:active { transform: translate(-50%, -50%) scale(.96); }
.dx-gc__open:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dx-gc__open-icon {
  display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, .18);
}
.dx-gc__open-icon svg { width: 26px; height: 26px; }
.dx-gc__open-label { line-height: 1.1; }

/* The shutter — a big, obvious, always-available manual capture. */
.dx-gc__shutter {
  display: block; width: 72px; height: 72px; margin: .75rem auto 0; padding: 0;
  border: 0; border-radius: 50%; background: #c0392b; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.dx-gc__shutter[hidden] { display: none; }
.dx-gc__shutter-ring { display: block; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #fff; box-sizing: border-box; }
.dx-gc__shutter:active { transform: scale(.94); }
.dx-gc__shutter:focus-visible { outline: 3px solid #1f7a44; outline-offset: 3px; }
/* Processing state: while a shot is being captured/uploaded (or during the tap
 * debounce), the shutter is disabled and shows a little spinner, so an impatient
 * collector cannot machine-gun taps and skip a step (owner request). */
.dx-gc__shutter[disabled] { cursor: default; opacity: .7; }
.dx-gc__shutter[disabled]:active { transform: none; }
.dx-gc__shutter--busy .dx-gc__shutter-ring {
  border-color: rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: dx-gc-spin .7s linear infinite;
}
@keyframes dx-gc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dx-gc__shutter--busy .dx-gc__shutter-ring { animation: none; border-color: rgba(255, 255, 255, .6); }
}

/* End-of-scan preview + submit (owner request). A light thumbnail grid of the
 * angles captured, then a deliberate Submit. */
.dx-gc__review { margin-top: .5rem; }
.dx-gc__review-title { margin: 0 0 .25rem; }
.dx-gc__review-lede { margin: 0 0 1rem; color: #555; }
.dx-gc__review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.dx-gc__review-shot { margin: 0; text-align: center; }
.dx-gc__review-shot img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; display: block; }
.dx-gc__review-shot figcaption { margin-top: .25rem; font-size: .75rem; color: #666; }
.dx-gc__review-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Skip control for the optional (hang) tag in the multi-tag sub-flow. */
.dx-gc__skip-tag { display: block; margin: .75rem auto 0; }
.dx-gc__skip-tag[hidden] { display: none; }

/* Auto-capture / framing-guide toggles. A left-aligned column, centred as a
 * block, so the two checkboxes line up under one another (not each centred on
 * its own row, which read as a ragged, "strange" alignment). */
.dx-gc__toggles {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  width: fit-content; margin: 1rem auto 0;
}
.dx-gc__toggle {
  display: flex; align-items: center; gap: .5rem; font-size: .95rem;
  color: var(--dx-ink-soft, #556); cursor: pointer; line-height: 1.2;
}
.dx-gc__toggle input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; }

/* First-party catalogue match results (visual similarity, honestly labelled). */
.dx-gc__matches { margin-top: 1rem; }
.dx-gc__matches[hidden] { display: none; }
.dx-gc__match-note { font-weight: 600; margin: 0 0 .5rem; }
.dx-gc__match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dx-gc__match { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem .75rem; }
.dx-gc__match-name { font-weight: 600; }
.dx-gc__match-score { font-size: .85rem; color: var(--dx-ink-soft, #556); white-space: nowrap; }
.dx-gc__match-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--dx-line, #dde); overflow: hidden; }
.dx-gc__match-bar > span { display: block; height: 100%; background: #1f7a44; }
.dx-gc__match-fine { font-size: .8rem; color: var(--dx-ink-faint, #889); margin: .6rem 0 0; }

/* Inline "search by photo instead" fallback link inside a tag result. */
.dx-linkbtn { background: none; border: 0; padding: 0; color: #1f7a44; font: inherit; text-decoration: underline; cursor: pointer; }

/* "Guide assistant" for young collectors: an example of the tag being asked for,
 * shown below the camera during the tag step. */
.dx-gc__tag-help {
  display: flex; align-items: center; gap: .75rem; margin: 1rem auto 0; max-width: 30rem;
  padding: .6rem .75rem; border: 1px solid var(--dx-line, #dde); border-radius: 12px;
  background: var(--dx-surface, #fff);
}
.dx-gc__tag-help[hidden] { display: none; }
.dx-gc__tag-help-eg { flex: 0 0 auto; width: 64px; height: 48px; }
.dx-gc__tag-help-eg svg { width: 100%; height: 100%; }
.dx-gc__tag-help-title { margin: 0 0 .15rem; font-weight: 700; font-size: .95rem; }
.dx-gc__tag-help-hint { margin: 0; font-size: .85rem; color: var(--dx-ink-soft, #556); line-height: 1.35; }

/* Persistent, honest OCR (tag-reading) status — distinct from the match list. */
.dx-gc__ocr-status { margin: 1rem 0 0; font-size: .9rem; }
.dx-gc__ocr-status[hidden] { display: none; }
.dx-gc__ocr-status--ok { color: #1f7a44; }
.dx-gc__ocr-status--warn { color: #8a5a00; }

/* Diagnostic method-comparison panel (shape vs pixel-map), owner A/B. */
.dx-gc__compare { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--dx-line, #dde); }
.dx-gc__compare[hidden] { display: none; }
.dx-gc__cmp-title { margin: 0 0 .25rem; font-size: 1.05rem; }
.dx-gc__cmp-note { margin: 0 0 .75rem; font-size: .8rem; color: var(--dx-ink-faint, #889); }
.dx-gc__cmp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.dx-gc__cmp-col { border: 1px solid var(--dx-line, #dde); border-radius: 12px; padding: .75rem .9rem; background: var(--dx-surface, #fff); }
.dx-gc__cmp-method { margin: 0 0 .5rem; font-size: .95rem; color: var(--dx-ink-soft, #556); }
.dx-gc__cmp-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.dx-gc__cmp-list li { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.dx-gc__cmp-name { font-weight: 600; }
.dx-gc__cmp-score { font-size: .8rem; color: var(--dx-ink-soft, #556); white-space: nowrap; }
.dx-gc__cmp-empty { margin: 0; font-size: .9rem; color: var(--dx-ink-faint, #889); }