/* ============================================================================
   Review QR: styles (Nitro Sites tools hub)

   SKINNED TO THE HOST. Everything here is driven by nitrosites' design tokens
   (src/styles/tokens.css) and reuses its component recipes (.btn/.btn-primary/
   .btn-secondary/.btn-ghost, .card, .panel-static, .field) which the BaseLayout
   shell loads globally via global.css. No raw brand colours, fonts, spacing or
   radii anywhere: only `var(--…)` host tokens. There are no brand-simulation
   cards in this tool (unlike Meta Inspector), so there is NO literal hex here.

   Cascade note: on the live site app.css loads BEFORE the host bundle, so where
   we override a property a host class already sets (e.g. .field's margin), we
   use a PARENT selector to win on specificity rather than load order.
   ========================================================================== */
.rqr{
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 52rem;
  margin: 0 auto;
  width: 100%;
}
.rqr *{box-sizing:border-box}
.rqr ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* ---------- form ---------- */
.rqr-form{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:stretch; margin:var(--sp-4) auto var(--sp-2); max-width:42rem}
.rqr-form .rqr-field{flex:1 1 14rem; min-width:0; margin:0} /* flatten host .field into the inline row */
.rqr-input{font-size:var(--fs-lg)}
.rqr-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.rqr-btn{white-space:nowrap; flex:0 0 auto}
.rqr-btn-ico{display:inline-flex; width:1.1em; height:1.1em}
.rqr-btn-ico svg{width:100%; height:100%}

/* ---------- status / error ---------- */
.rqr-status{min-height:1.4em; text-align:center; color:var(--color-muted); margin:var(--sp-2) 0; font-size:var(--fs-base)}
.rqr-status.is-live{color:var(--color-primary-soft)}
.rqr-spin{display:inline-block; width:1em; height:1em; border:2px solid var(--color-border); border-top-color:var(--color-primary);
  border-radius:var(--r-full); animation:rqr-spin .7s linear infinite; vertical-align:-2px; margin-right:var(--sp-2)}
@keyframes rqr-spin{to{transform:rotate(360deg)}}
.rqr-error{display:flex; gap:var(--sp-3); align-items:flex-start; max-width:36rem; margin:var(--sp-6) auto; padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-lg); border:1px solid var(--color-danger); background:color-mix(in srgb, var(--color-danger) 10%, var(--color-surface))}
.rqr-error-ico{font-size:1.5em; line-height:1; color:var(--color-danger)}
.rqr-error strong{color:var(--color-danger)}
.rqr-error-msg{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1)}

/* ---------- results ---------- */
.rqr-results:not(:empty){margin-top:var(--sp-5)}
.rqr-results:not(:empty){animation:rqr-rise var(--dur) var(--ease) both}
@keyframes rqr-rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}

/* ---------- hint (resolved, but no Place ID found) ---------- */
.rqr-hint{max-width:36rem; margin:var(--sp-6) auto; padding:var(--sp-6); text-align:center}
.rqr-hint-title{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--color-text); margin-bottom:var(--sp-2)}
.rqr-hint-msg{color:var(--color-muted); font-size:var(--fs-base); line-height:var(--lh-loose)}
.rqr-hint-finder{display:inline-block; margin-top:var(--sp-4); color:var(--color-accent-2)}
.rqr-hint-ftid{margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--color-status-partial)}

/* ---------- result card ---------- */
.rqr-result-top{display:flex; gap:var(--sp-6); align-items:flex-start; flex-wrap:wrap}
.rqr-qr-wrap{flex:none; background:#fff; padding:var(--sp-3); border-radius:var(--r-lg); line-height:0}
.rqr-qr-canvas{display:block; width:180px; height:180px; max-width:100%}
.rqr-result-info{flex:1 1 16rem; min-width:0}
.rqr-result-label{font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--color-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-bottom:var(--sp-2)}
.rqr-result-info .rqr-urlfield{margin:0 0 var(--sp-2)}
.rqr-urlinput{font-family:var(--font-mono); font-size:var(--fs-sm); cursor:text}
.rqr-meta{margin-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1)}
.rqr-stat{display:flex; gap:var(--sp-2); font-size:var(--fs-sm)}
.rqr-stat-l{color:var(--color-muted); flex:none}
.rqr-stat-v{color:var(--color-text); word-break:break-word}
.rqr-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--color-border)}

/* ---------- mini buttons (shared: copy / download / print / AI) ---------- */
.rqr-mini{display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm)}
.rqr-mini svg, .rqr-copy svg, .rqr-mini-ico svg{width:1em; height:1em}
.rqr-copy{display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-1)}
.rqr-mini.done, .rqr-copy.done{color:var(--color-success); border-color:color-mix(in srgb, var(--color-success) 45%, transparent)}

/* ---------- templates ---------- */
.rqr-templates{margin-top:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-3)}
.rqr-templates-title{font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--color-text)}
.rqr-template-top{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2)}
.rqr-template-title{font-weight:700; color:var(--color-text); font-size:var(--fs-sm)}
.rqr-template-body{font-family:var(--font-mono); font-size:var(--fs-sm); white-space:pre-wrap; word-break:break-word; color:var(--color-muted); margin:0}

/* ---------- footer ---------- */
.rqr-footer{margin-top:var(--sp-5); display:flex; justify-content:flex-end}
.rqr-mini-ico{display:inline-flex}

/* ============================================================================
   Print-ready A6 counter card.
   Hidden on screen; shown ONLY when printing (window.print()), everything else
   hidden. `.rqr-print-only` content is built once per result but stays out of
   normal layout flow until @media print flips it on.
   ========================================================================== */
.rqr-print-only{display:none}

@media print{
  @page{ size: A6 landscape; margin: 8mm; }
  body *{ visibility:hidden !important; }
  .rqr-print-only, .rqr-print-only *{ visibility:visible !important; }
  .rqr-print-only{
    display:block !important;
    position:fixed; inset:0; margin:0; padding:0;
  }
  .rqr-print-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6mm; width:100%; height:100%; text-align:center; font-family:sans-serif; color:#000;
  }
  .rqr-print-heading{ font-size:22pt; font-weight:800; margin:0; }
  .rqr-print-sub{ font-size:12pt; margin:0; }
  .rqr-print-qr{ width:35mm; height:35mm; }
  .rqr-print-url{ font-size:8pt; word-break:break-all; color:#333; max-width:90%; }
}