/* HyperCurio: the signed-out dialogs (hc-guest.js), 13 Oct. Moved here from hc-welcome.css when they moved onto the
   landing page at /, which does not load hc.css: that page gives the --hc-* values these read (hc-landing.js). */

/* hidden means hidden, whatever display a field's class gives it (the scan and the listing check share one dialog). */
.guest [hidden], .tell [hidden] { display: none !important; }

/* ---------------------------------------------------------------- HC-108: the guest evaluation
   Same dialog treatment as HC-109 so the landing page has one way of asking for something, not
   two. Bottom sheet on portrait, centred card above it. */
.guest { width: min(520px, 100vw); padding: 0; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1); color: var(--hc-text); }
.guest::backdrop { background: var(--hc-scrim); }
@media (max-width: 599px) {
  .guest { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0; }
}
.guest-head { padding: var(--hc-5) var(--hc-5) 0; }
.guest-head h2 { font-family: var(--hc-font-title); font-size: calc(22px * var(--hc-scale-title)); }
.guest-head p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }
.guest-body { padding: var(--hc-5); display: grid; gap: var(--hc-4); }
.guest-foot { display: flex; gap: var(--hc-3); align-items: center; padding: var(--hc-4) var(--hc-5); border-top: 1px solid var(--hc-border); }
.guest-foot .hc-btn { width: auto; margin-left: auto; }
.guest-cancel { background: none; border: 0; color: var(--hc-text-muted); font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
.guest-err { color: var(--hc-bad); font-size: 13px; }
/* #1932: the app's standard drop zone (the rev5 intake's: hc-r5-home.css .r5h-drop), so a guest sees the same box as a member */
.guest-drop { display: grid; gap: var(--hc-3); }
.guest-zone { width: 100%; min-height: 120px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 20px;
  background: transparent; color: var(--hc-text); text-align: left; cursor: pointer; border: 1px dashed var(--hc-border-control, var(--hc-border)); border-radius: var(--hc-radius-control); font: inherit; }
.guest-zone:hover, .guest-zone.is-over { border-color: var(--hc-accent); background: var(--hc-surface-2); }
.guest-zone:focus-visible { outline: 3px solid var(--hc-accent); outline-offset: 2px; }
.guest-zone-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--hc-radius-control); background: var(--hc-accent); color: var(--hc-on-accent, #fff); }
.guest-zone-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.guest-zone-h { font-weight: 600; }
.guest-zone-sub { color: var(--hc-text-muted); font-size: 14px; }
.guest-zone .guest-thumb { flex: 0 0 auto; max-width: 100%; max-height: 200px; border-radius: var(--hc-radius-control); display: block; }
.guest-zone.has-photo { border-style: solid; }
.guest-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.guest-drop #guestTake { justify-self: center; }
/* The honeypot. Off-screen rather than display:none, because some bots skip hidden fields and
   fill the ones they can see; and aria-hidden + tabindex so no real person ever reaches it. */
.guest-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.guest-out { display: grid; gap: var(--hc-3); }
.guest-out dl { display: grid; grid-template-columns: auto 1fr; gap: var(--hc-2) var(--hc-4); margin: 0; font-size: 14px; }
.guest-out dt { color: var(--hc-text-muted); }
.guest-out dd { margin: 0; font-weight: 700; }
.guest-save { padding: var(--hc-5); text-align: center; border-top: 1px solid var(--hc-border); }
.guest-save-h { font-weight: 700; margin-bottom: var(--hc-1, 4px); }
/* #1932: the result reads like the app's: the photo beside what it is */
.guest-card { display: flex; gap: var(--hc-4); align-items: flex-start; }
.guest-card-img { flex: 0 0 auto; width: 120px; max-height: 180px; object-fit: contain; border-radius: var(--hc-radius-control); background: var(--hc-surface-2); }
.guest-card-body { min-width: 0; flex: 1 1 auto; display: grid; gap: var(--hc-3); }
.guest-card-t { margin: 0; font-family: var(--hc-font-title); font-size: calc(18px * var(--hc-scale-title, 1)); overflow-wrap: anywhere; }
@media (max-width: 420px) { .guest-card { flex-direction: column; align-items: center; } .guest-card-img { width: 160px; } }
.guest-limited { padding: var(--hc-8) var(--hc-5); text-align: center; }
.guest-limited h2 { font-family: var(--hc-font-title); font-size: calc(22px * var(--hc-scale-title)); }
.guest-limited p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }

/* ---------------------------------------------------------------- HC-109: tell us what you collect
   A dialog on the wider layouts and a bottom sheet on portrait, which is what the ticket asks
   for. <dialog> either way, so Escape, the backdrop and focus trapping stay the browser's job. */
/* 1370: scoped to the dialog. The landing page's "Tell us what you collect" block is also class="tell", and this rule
   was turning it into an accidental 480px card with no padding of its own. */
dialog.tell { width: min(480px, 100vw); padding: 0; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1); color: var(--hc-text); }
dialog.tell::backdrop { background: var(--hc-scrim); }
@media (max-width: 599px) {
  dialog.tell { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0; }
}
.tell-head { padding: var(--hc-5) var(--hc-5) 0; }
.tell-head h2 { font-family: var(--hc-font-title); font-size: calc(22px * var(--hc-scale-title)); }
.tell-head p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }
.tell-body { padding: var(--hc-5); display: grid; gap: var(--hc-4); }
.tell-opts { display: flex; flex-wrap: wrap; gap: var(--hc-2); }
.tell-opt {
  display: inline-flex; align-items: center; gap: var(--hc-2);
  min-height: 44px; padding-inline: var(--hc-4);
  border: 1px solid var(--hc-border); border-radius: 999px;
  background: var(--hc-surface-2); color: var(--hc-text); font: inherit; font-size: 14px; cursor: pointer;
}
.tell-opt:has(input:checked) { background: var(--hc-accent); color: var(--hc-on-accent); border-color: var(--hc-accent); font-weight: 700; }
/* The checkbox stays in the page rather than being replaced by a click handler on a div: it is
   what makes these reachable by keyboard and announced as checkable. */
.tell-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tell-opt input:focus-visible + span { outline: 2px solid var(--hc-text); outline-offset: 4px; border-radius: 4px; }
.tell-count { color: var(--hc-text-muted); font-size: 12px; }
.tell-foot { display: flex; gap: var(--hc-3); align-items: center; padding: var(--hc-4) var(--hc-5); border-top: 1px solid var(--hc-border); }
.tell-foot .hc-btn { width: auto; margin-left: auto; }
.tell-cancel { background: none; border: 0; color: var(--hc-text-muted); font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
.tell-err { color: var(--hc-bad); font-size: 13px; }
.tell-done { padding: var(--hc-8) var(--hc-5); text-align: center; }
.tell-done .tell-tick { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--hc-4); display: grid; place-items: center; background: #1E3A2A; color: var(--hc-good); }
.tell-done h2 { font-family: var(--hc-font-title); font-size: calc(22px * var(--hc-scale-title)); }
.tell-done p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }

/* 739: Compare plans, in its own dialog: wider than the others, and the sheet scrolls on a phone. */
.hcg-plans { width: min(1040px, calc(100vw - 32px)); }
.hcg-plans .guest-body { max-height: min(70vh, 640px); overflow-y: auto; }
@media (max-width: 599px) { .hcg-plans { width: 100vw; } .hcg-plans .guest-body { max-height: 72vh; } }
.lp-plans-grid { display: grid; gap: var(--hc-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .lp-plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-plans-grid { grid-template-columns: repeat(4, 1fr); } }
/* 281 (HC-1645, guide 7.14): plan cards raised at radius 20; the recommended plan in Cyan with its glow and an outline
   RECOMMENDED chip; prices in the display face's figures (Audiowide on the landing page); features as rows with a Glow check. */
.lp-plan { position: relative; display: grid; gap: 4px; align-content: start; padding: 20px; border: 1px solid var(--hc-border); border-radius: 20px; background: var(--hc-surface-2); }
.lp-plan.is-rec { border-color: var(--hc-hyper-cyan, var(--hc-accent)); box-shadow: 0 0 24px rgba(34, 184, 255, .45); }
.lp-plans-grid { padding-top: 10px; }   /* room for the recommended plan's chip on its top edge */
.lp-plan-chip { position: absolute; top: -11px; left: 18px; padding: 4px 8px; background: var(--hc-surface-2); border: 1px solid var(--hc-cyan-glow, var(--hc-accent)); border-radius: 4px;
  color: var(--hc-cyan-glow, var(--hc-accent)); font: 700 11px/1 var(--hc-font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.lp-plan-name { font-family: var(--hc-font-title); font-size: calc(19px * var(--hc-scale-title)); font-weight: 800; }
.lp-plan-price { color: var(--hc-accent); line-height: 1.2; }
.lp-plan-price b { font-family: var(--hc-font-display, var(--hc-font-figure)); font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; }
.lp-plan-per { font-size: 15px; font-weight: 700; }
.lp-plan-sub { font-size: 13px; color: var(--hc-text-muted); }
.lp-plan ul { list-style: none; margin: var(--hc-3) 0 0; padding: 0; display: grid; font-size: 14px; }
.lp-plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--hc-border); }
.lp-plan-check { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--hc-cyan-glow, var(--hc-accent)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }