/* =========================================================================
   DisclosureIQ Streamlined Upload-to-Report Flow (May 2026)
   3-screen flow: Drop -> Pre-flight -> Generating -> Reveal
   All animations honor prefers-reduced-motion. No em dashes anywhere.
   ========================================================================= */

/* Screen container */
.diq-flow {
  position: relative;
  margin: 0 auto;
  max-width: 920px;
  padding: 24px 20px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.diq-flow [data-screen] {
  display: none;
}
.diq-flow [data-screen].is-active {
  display: block;
  animation: diq-screen-fade 320ms ease-out;
}

@keyframes diq-screen-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .diq-flow [data-screen].is-active { animation: none; }
}

/* ---- Screen 1: Drop zone ---- */
.diq-s1-wrap {
  position: relative;
  padding: 32px 0 24px;
}

.diq-s1-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 14px;
  font-size: 13px;
}
.diq-s1-corner a {
  color: #5A6470;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 27, 45, 0.12);
  padding-bottom: 1px;
}
.diq-s1-corner a:hover {
  color: #0F1B2D;
  border-bottom-color: #C9A961;
}
.diq-s1-corner a:focus {
  outline: 2px solid #C9A961;
  outline-offset: 3px;
  border-radius: 2px;
}

.diq-drop-zone {
  margin: 24px auto 0;
  padding: 80px 32px;
  border: 2px dashed rgba(15, 27, 45, 0.20);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(245, 248, 250, 0.86) 100%);
  text-align: center;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 180ms ease;
  outline: none;
}
.diq-drop-zone:hover,
.diq-drop-zone:focus-visible {
  border-color: #C9A961;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.95) 0%, rgba(247, 240, 222, 0.6) 100%);
}
.diq-drop-zone:focus-visible {
  outline: 3px solid #C9A961;
  outline-offset: 4px;
}
.diq-drop-zone.is-dragging {
  border-style: solid;
  border-color: #0F1B2D;
  outline: 3px solid #C9A961;
  outline-offset: 2px;
  transform: scale(1.01);
}
@media (prefers-reduced-motion: reduce) {
  .diq-drop-zone { transition: none; }
  .diq-drop-zone.is-dragging { transform: none; }
}

.diq-drop-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  color: #0F1B2D;
  opacity: 0.85;
}

.diq-drop-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: #0F1B2D;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.diq-drop-sub {
  font-size: 15px;
  color: #5A6470;
  margin: 0 0 22px;
}

.diq-drop-browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #0F1B2D;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, #C9A961 0%, #B39847 100%);
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  padding: 14px 26px;
  min-height: 52px;
  min-width: 180px;
  box-shadow: 0 12px 28px -10px rgba(201, 169, 97, 0.55),
              0 4px 12px -4px rgba(15, 27, 45, 0.18);
  transition: filter 160ms, transform 100ms, box-shadow 160ms;
}
.diq-drop-browse::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>") center / contain no-repeat;
  flex-shrink: 0;
}
.diq-drop-browse:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 32px -10px rgba(201, 169, 97, 0.65),
              0 6px 14px -4px rgba(15, 27, 45, 0.22);
}
.diq-drop-browse:active { transform: scale(0.98); }
.diq-drop-browse:focus-visible {
  outline: 3px solid #0F1B2D;
  outline-offset: 3px;
}

.diq-trust-line {
  margin: 18px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: #7B8794;
  font-style: italic;
}

/* Inline error card replaces drop zone copy on error */
.diq-error-card {
  margin: 18px auto 0;
  padding: 18px 22px;
  background: #FFF6F4;
  border: 1px solid #E8734A;
  border-radius: 12px;
  color: #6B2A1A;
  font-size: 14px;
  line-height: 1.55;
}
.diq-error-card strong { color: #7A221A; display: block; margin-bottom: 4px; } /* darker red for WCAG AA contrast on light pink */
.diq-error-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.diq-error-card button {
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid #B23B1F;
  background: white;
  color: #B23B1F;
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
}

/* ---- Screen 2: Pre-flight ---- */
.diq-pre-card {
  margin: 24px auto;
  padding: 32px 28px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 24px -10px rgba(15, 27, 45, 0.18), 0 1px 0 rgba(15, 27, 45, 0.04);
  border: 1px solid rgba(15, 27, 45, 0.06);
}

.diq-pre-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #C9A961;
  margin-bottom: 14px;
}

.diq-pre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 640px) {
  .diq-pre-grid { grid-template-columns: repeat(2, 1fr); }
}

.diq-pre-chip {
  padding: 12px 10px;
  background: rgba(201, 169, 97, 0.06);
  border: 1px solid rgba(201, 169, 97, 0.30);
  border-radius: 10px;
  font-size: 13px;
  color: #0F1B2D;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.diq-pre-chip-mark {
  color: #B39847;
  font-weight: 700;
}

.diq-pre-address {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #0F1B2D;
  margin: 14px 0 4px;
  letter-spacing: -0.005em;
}
.diq-pre-address-badge {
  font-size: 12px;
  color: #7B8794;
  font-style: italic;
  margin-bottom: 18px;
}

.diq-pre-address-edit {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid rgba(15, 27, 45, 0.16);
  border-radius: 8px;
  font-family: inherit;
  margin-bottom: 14px;
}
.diq-pre-address-edit:focus {
  outline: 3px solid #C9A961;
  outline-offset: 1px;
  border-color: #0F1B2D;
}

.diq-pre-stat {
  font-size: 14px;
  color: #5A6470;
  margin-bottom: 22px;
}
.diq-pre-stat strong { color: #0F1B2D; }

/* Visible error surface on the pre-flight card when a generate run fails. */
.diq-preflight-error {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #FFF6F4;
  border: 1px solid #E8734A;
  border-radius: 10px;
  color: #6B2A1A;
  font-size: 13.5px;
  line-height: 1.5;
}
.diq-preflight-error strong { display: block; color: #B23B1F; margin-bottom: 3px; }
.diq-preflight-error-hint { margin-top: 8px; color: #5A6470; font-size: 12.5px; }

.diq-generate-btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(180deg, #C9A961 0%, #B39847 100%);
  /* Dark navy on gold (matches the drop-screen browse button) clears WCAG
     AA comfortably; white on this gold did not. */
  color: #0F1B2D;
  border: 0;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  min-height: 52px;
  box-shadow: 0 6px 16px -4px rgba(201, 169, 97, 0.55);
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.diq-generate-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(201, 169, 97, 0.65); }
.diq-generate-btn:focus-visible { outline: 3px solid #0F1B2D; outline-offset: 3px; }
.diq-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .diq-generate-btn { transition: none; }
  .diq-generate-btn:hover { transform: none; }
}

.diq-adjust-disclosure {
  margin-top: 14px;
  border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 8px;
  background: rgba(245, 248, 250, 0.5);
}
.diq-adjust-disclosure summary {
  padding: 12px 16px;
  font-size: 13px;
  color: #5A6470;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.diq-adjust-disclosure summary::-webkit-details-marker { display: none; }
.diq-adjust-disclosure summary::before {
  content: "+ ";
  color: #C9A961;
  font-weight: 700;
}
.diq-adjust-disclosure[open] summary::before { content: "- "; }
.diq-adjust-body {
  padding: 8px 16px 18px;
  font-size: 13px;
}
.diq-adjust-row { margin: 10px 0; }
.diq-adjust-row label { display: block; font-size: 12px; font-weight: 600; color: #0F1B2D; margin-bottom: 4px; }
.diq-adjust-row select { padding: 6px 10px; font-size: 13px; border-radius: 6px; border: 1px solid rgba(15, 27, 45, 0.16); background: white; }
.diq-adjust-toggle {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color: #5A6470;
}
.diq-adjust-toggle input { margin: 0; }
.diq-adjust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 16px;
}
@media (max-width: 540px) { .diq-adjust-grid { grid-template-columns: 1fr; } }

/* ---- Screen 3: Generating ---- */
.diq-gen-wrap {
  margin: 60px auto;
  padding: 40px 28px;
  text-align: center;
  max-width: 720px;
}

.diq-gen-narration {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #0F1B2D;
  margin: 0 auto 32px;
  min-height: 1.4em;
  transition: opacity 220ms ease;
  letter-spacing: -0.005em;
}
.diq-gen-narration.is-swapping { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) {
  .diq-gen-narration { transition: none; }
}

.diq-gen-bar {
  margin: 0 auto;
  height: 4px;
  width: 100%;
  max-width: 480px;
  background: rgba(15, 27, 45, 0.06);
  border-radius: 100px;
  overflow: hidden;
}
.diq-gen-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C9A961 0%, #B39847 100%);
  border-radius: 100px;
  transition: width 1200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .diq-gen-bar-fill { transition: width 200ms linear; }
}

.diq-gen-stall-banner {
  margin: 24px auto 0;
  max-width: 560px;
  padding: 14px 18px;
  background: #FFF6F4;
  border: 1px solid #E8A23A;
  border-radius: 10px;
  color: #6B2A1A;
  font-size: 13.5px;
  display: none;
}
.diq-gen-stall-banner.is-visible { display: block; }
.diq-gen-stall-abort {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  background: white;
  color: #B23B1F;
  border: 1px solid #B23B1F;
  border-radius: 6px;
  cursor: pointer;
}

/* ---- Screen 4: Cinematic reveal ---- */
.diq-reveal-wrap {
  position: relative;
}

.diq-reveal-frame-wrap {
  position: relative;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: white;
  box-shadow: 0 12px 32px -12px rgba(15, 27, 45, 0.22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.diq-reveal-frame-wrap.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .diq-reveal-frame-wrap { transition: opacity 200ms linear; transform: none; }
  .diq-reveal-frame-wrap.is-revealed { transform: none; }
}

.diq-reveal-frame {
  width: 100%;
  height: 80vh;
  min-height: 680px;
  border: 0;
  display: block;
  -webkit-overflow-scrolling: touch;
}

/* Cascade applied INSIDE iframe via direct DOM manipulation. Uses these
   class names which we add post-load. */
.diq-tile-cascade {
  opacity: 0;
  transform: translateY(6px);
  animation: diq-tile-rise 320ms cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}
@keyframes diq-tile-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .diq-tile-cascade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Floating Adjust pill (top-right of report iframe) */
.diq-adjust-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  padding: 8px 14px;
  background: rgba(15, 27, 45, 0.95);
  color: #C9A961;
  border: 1px solid #C9A961;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px -4px rgba(15, 27, 45, 0.4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.diq-adjust-pill:hover { background: #0F1B2D; color: #FFFFFF; }
.diq-adjust-pill:focus-visible { outline: 3px solid #C9A961; outline-offset: 2px; }

/* Adjust side panel (slides from right) */
.diq-adjust-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 92vw;
  height: 100vh;
  background: #FFFFFF;
  z-index: 99998; /* must be > body.diq-report-fullscreen reveal z-index 99000 */
  box-shadow: -8px 0 32px -10px rgba(15, 27, 45, 0.25);
  transform: translateX(100%);
  /* visibility:hidden when closed keeps the panel's controls out of the
     tab order and the a11y tree; the 0s-delayed transition holds it
     visible through the slide-out so the close animation still plays. */
  visibility: hidden;
  transition: transform 280ms ease, visibility 0s linear 280ms;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.diq-adjust-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 280ms ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .diq-adjust-panel { transition: none; }
  .diq-adjust-panel.is-open { transition: none; }
}
.diq-adjust-panel-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(15, 27, 45, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diq-adjust-panel-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #0F1B2D;
  margin: 0;
}
.diq-adjust-panel-close {
  background: none;
  border: 0;
  font-size: 22px;
  color: #5A6470;
  cursor: pointer;
  padding: 4px 10px;
  min-height: 44px;
  min-width: 44px;
}
.diq-adjust-panel-body { padding: 18px 22px; flex: 1; }
.diq-adjust-panel-footer {
  padding: 14px 22px;
  border-top: 1px solid rgba(15, 27, 45, 0.08);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.diq-adjust-apply {
  padding: 10px 18px;
  background: linear-gradient(180deg, #C9A961 0%, #B39847 100%);
  color: white;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px; /* iOS minimum tap target */
}
.diq-adjust-cancel {
  padding: 10px 18px;
  background: white;
  color: #5A6470;
  border: 1px solid rgba(15, 27, 45, 0.16);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px; /* iOS minimum tap target */
}

/* Magic share modal trigger (bottom-right) */
.diq-share-trigger {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 5;
  padding: 10px 18px;
  background: linear-gradient(180deg, #C9A961 0%, #B39847 100%);
  color: white;
  border: 0;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px -4px rgba(201, 169, 97, 0.55);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.diq-share-trigger:hover { box-shadow: 0 10px 22px -6px rgba(201, 169, 97, 0.7); }
.diq-share-trigger:focus-visible { outline: 3px solid #0F1B2D; outline-offset: 3px; }

.diq-share-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 45, 0.55);
  z-index: 99999; /* must be > body.diq-report-fullscreen reveal z-index 99000 */
  display: none;
  align-items: center;
  justify-content: center;
}
.diq-share-modal.is-open { display: flex; }
.diq-share-modal-box {
  background: white;
  border-radius: 18px;
  padding: 28px 24px 22px;
  max-width: 420px;
  width: 92%;
  text-align: center;
  box-shadow: 0 24px 48px -16px rgba(15, 27, 45, 0.4);
  position: relative;
}
.diq-share-modal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8C6E2E;
  margin-bottom: 6px;
}
.diq-share-modal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #0F1B2D;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.diq-share-modal-sub {
  font-size: 13px;
  color: #5A6470;
  line-height: 1.55;
  margin: 0 0 18px;
}
.diq-share-cta-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 481px) {
  .diq-share-cta-row {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
}
.diq-share-cta {
  padding: 14px 8px;
  background: rgba(245, 248, 250, 0.8);
  border: 1px solid rgba(15, 27, 45, 0.10);
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0F1B2D;
  cursor: pointer;
  min-height: 72px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  transition: background 160ms, border-color 160ms, transform 100ms;
}
.diq-share-cta:hover { background: white; border-color: #C9A961; }
.diq-share-cta:active { transform: scale(0.97); }
.diq-share-cta:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: 2px;
}
.diq-share-cta svg { color: #0F1B2D; }
.diq-share-cta-icon { font-size: 18px; display: block; margin-bottom: 4px; }
/* Text/Email CTA while the live share link is still being prepared. The
   anchor stays focusable; a JS click guard blocks the tap and the dimmed
   look plus the progress cursor signal "not ready yet". */
.diq-share-cta.is-preparing {
  opacity: 0.5;
  cursor: progress;
}
.diq-share-cta.is-preparing:hover {
  background: rgba(245, 248, 250, 0.8);
  border-color: rgba(15, 27, 45, 0.10);
}

.diq-share-link-row {
  display: flex;
  gap: 8px;
  margin: 6px 0 14px;
  align-items: center;
}
.diq-share-link-row input {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 27, 45, 0.18);
  background: #F7F3EC;
  color: #0F1B2D;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  min-width: 0;
}
.diq-share-link-row input:focus {
  outline: 2px solid #C9A961;
  outline-offset: 1px;
}
.diq-share-link-row button {
  padding: 11px 16px;
  border-radius: 10px;
  border: 0;
  background: #0F1B2D;
  color: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px; /* iOS minimum tap target */
}
.diq-share-link-row button:hover { background: #1a2a44; }
.diq-share-link-row button:active { transform: scale(0.97); }

.diq-share-modal-foot {
  font-size: 11.5px;
  color: #8C6E2E;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

.diq-share-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 27, 45, 0.06);
  border: 0;
  font-size: 16px;
  color: #0F1B2D;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diq-share-modal-close:hover { background: rgba(15, 27, 45, 0.12); }

/* sr-only utility */
.diq-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hide the legacy wizard cleanly when streamline flow takes over */
body.diq-flow-active .step-bar,
body.diq-flow-active #pane-1,
body.diq-flow-active #pane-2,
body.diq-flow-active #pane-3,
body.diq-flow-active #pane-4,
body.diq-flow-active #pane-5 {
  display: none !important;
}

/* The streamline flow root overrides legacy wizard chrome */
body.diq-flow-active .wizard {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;
}

/* EC-12: Pulse the drop zone when a second drop arrives mid-extraction */
@keyframes diq-drop-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.0); }
  35%  { box-shadow: 0 0 0 8px rgba(201, 169, 97, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.0); }
}
.diq-drop-zone-pulse {
  animation: diq-drop-pulse 600ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .diq-drop-zone-pulse { animation: none; }
}

/* =========================================================================
   MOBILE PERFECTION (May 2026)
   Web layout above is locked in. Everything below is mobile-only.
   Goals (synthesized from a 3-agent audit):
   1) Drop zone is the hero on mobile, visible above the fold on first paint.
   2) Account for sticky brokerage-bar + sticky nav (~96px) via scroll-padding.
   3) Use 100svh / 100dvh instead of 100vh so iOS Safari URL-bar doesn't cut.
   4) Honor safe-area-inset on notched iPhones.
   5) Smaller padding / margins / type to fit a 375x667 iPhone SE viewport.
   No desktop CSS is changed; every rule below is gated by max-width or env().
   ========================================================================= */

/* All anchor jumps (#app etc.) account for sticky chrome on every viewport */
:root { scroll-padding-top: 96px; }

/* iOS-safe heights for elements that span the viewport */
.diq-adjust-panel { height: 100dvh; }
.diq-adjust-panel { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

@media (max-width: 720px) {
  /* M2: drop the 680px floor on the iframe so it doesn't trap mobile scroll
     and doesn't exceed iPhone SE viewport. Use dvh for live tracking. */
  .diq-reveal-frame {
    height: 80dvh;
    min-height: 0;
  }

  /* Tighten the streamline screen-1 wrap so the drop zone lands higher */
  .diq-s1-wrap {
    padding: max(8px, env(safe-area-inset-top)) 0 12px;
  }

  /* Smaller drop zone padding so the headline + button fit above the fold */
  .diq-drop-zone {
    padding: 40px 20px;
  }

  /* Drop-headline sized for iPhone SE width without ugly wraps */
  .diq-drop-headline {
    font-size: 26px;
    line-height: 1.18;
  }
  .diq-drop-sub {
    font-size: 14px;
    line-height: 1.45;
  }

  /* Quick Look corner link drops to a small text row above the drop zone
     on mobile so it doesn't collide with the drop icon */
  .diq-s1-corner {
    position: static;
    text-align: center;
    margin: 0 0 8px;
  }

  /* Pre-flight card: less padding, less shadow (mobile box-shadow gets cut
     by 92vw box anyway) */
  .diq-pre-card {
    padding: 22px 16px;
  }

  /* Generate button: bump to 60px primary action per HIG mobile preference */
  .diq-generate-btn {
    min-height: 60px;
    font-size: 16px;
  }

  /* Share trigger: respect bottom safe-area + iOS Safari toolbar */
  .diq-share-trigger {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  }

  /* Adjust pill: respect top safe-area (notch) */
  .diq-adjust-pill {
    top: max(14px, calc(env(safe-area-inset-top) + 6px));
  }
}

/* Even smaller screens: iPhone SE (1st gen) and below */
@media (max-width: 480px) {
  .diq-drop-headline { font-size: 24px; }
  .diq-pre-card { padding: 18px 14px; }
  .diq-share-cta-row {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
}

/* =========================================================================
   MOBILE CHROME TRIM (when streamline flow is active)
   The legacy hero + app-header eyebrow + sub paragraph push the drop zone
   way down the page on mobile. When the streamline flow is active we don't
   need that copy: the drop zone IS the hero, per the canonical mobile
   pattern. Desktop layout untouched.
   ========================================================================= */
@media (max-width: 720px) {
  /* Tighter app-section padding so the drop zone is reachable above the
     fold once anchored. Was 60px 20px on mobile via styles.css. */
  body.diq-flow-active .app {
    padding: 16px 16px 48px;
  }

  /* The app-header (eyebrow + h2 "Run a review now" + sub paragraph) is
     the single biggest contributor to the "way down the page" feel on
     mobile. The streamline drop zone has its own headline, so this header
     is redundant. Hide it on mobile only. */
  body.diq-flow-active .app-header {
    display: none;
  }

  /* Hero backdrop Unsplash decoration is invisible (opacity 0.06) but
     still hits the network on mobile. Skip it. */
  .hero-backdrop {
    display: none !important;
  }

  /* The verbose "Two ways to start" / hcards block above the streamline
     section is great desktop marketing but pushes the drop zone several
     screens down on mobile. Collapse to a tappable preface that scrolls to
     the streamline root. We keep it visually present but compact. */
  body.diq-flow-active .hero {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: 12px;
  }
  body.diq-flow-active .hero-route-pretitle,
  body.diq-flow-active .hero-cards,
  body.diq-flow-active .hero-badge {
    display: none;
  }
  body.diq-flow-active .hero-title {
    font-size: 28px;
    line-height: 1.18;
  }
  body.diq-flow-active .hero-sub {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 6px;
  }
}

/* iPhone SE and similar */
@media (max-width: 480px) {
  body.diq-flow-active .hero-title { font-size: 24px; }
}

/* =========================================================================
   FULLSCREEN REVEAL (web + mobile)
   When body.diq-report-fullscreen is set (added by streamline.js after a
   successful generate), the report iframe pops out of its in-card frame
   and fills the entire viewport. Page chrome (hero, brand bar, sections,
   footer, app-bar, tab-bar) is hidden so the report owns the screen.
   A floating Close button (top-left) returns to the drop screen.

   Mobile-first considerations:
   - 100dvh tracks iOS Safari URL-bar collapse without layout jumps.
   - safe-area-inset on the Close, Adjust, and Share buttons so they clear
     the notch and home indicator.
   - body.style.overflow=hidden is set by JS (not just here) so background
     content can't scroll behind the report.
   ========================================================================= */
body.diq-report-fullscreen {
  overflow: hidden !important;
}
body.diq-report-fullscreen [data-screen="reveal"],
body.diq-report-fullscreen [data-screen="generating"].is-active {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: linear-gradient(135deg, #0F1B2D, #08111E);
  color: #FAF7F2;
  margin: 0;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
body.diq-report-fullscreen [data-screen="reveal"] {
  background: #FAF7F2;
  color: inherit;
  display: block !important;
}
body.diq-report-fullscreen [data-screen="generating"] .diq-gen-wrap {
  max-width: 480px;
  padding: 0 24px;
}
body.diq-report-fullscreen .diq-reveal-wrap {
  height: 100dvh;
  margin: 0;
  padding: 0;
}
body.diq-report-fullscreen .diq-reveal-frame-wrap {
  height: 100dvh;
  width: 100vw;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  background: white;
  opacity: 1;
  transform: none;
}
body.diq-report-fullscreen .diq-reveal-frame {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  border: 0;
}

/* Hide page chrome when the report is fullscreen on the client landing */
body.diq-report-fullscreen .cf-bar,
body.diq-report-fullscreen .cf-hero,
body.diq-report-fullscreen .cf-tool-eyebrow,
body.diq-report-fullscreen .cf-tool-title,
body.diq-report-fullscreen .cf-tool-sub,
body.diq-report-fullscreen .cf-tool-quietfacts,
body.diq-report-fullscreen .cf-tool-handoff,
body.diq-report-fullscreen .cf-section,
body.diq-report-fullscreen .cf-footer {
  display: none !important;
}

/* The cf-tool-shell is the white card around the streamline-root on the
   client landing. In fullscreen we strip its chrome so the iframe goes
   edge-to-edge inside it. */
body.diq-report-fullscreen .cf-tool {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body.diq-report-fullscreen .cf-tool-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.diq-report-fullscreen .cf-tool-shell {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Hide page chrome when the report is fullscreen on the agent route too */
body.diq-report-fullscreen .brokerage-bar,
body.diq-report-fullscreen .nav,
body.diq-report-fullscreen .hero,
body.diq-report-fullscreen .app-header,
body.diq-report-fullscreen .api-key-bar,
body.diq-report-fullscreen .api-key-panel,
body.diq-report-fullscreen .compliance-footer,
body.diq-report-fullscreen .footer {
  display: none !important;
}

/* Hide the mobile app shell (top bar + bottom tabs) so the report is
   truly fullscreen on phone. The Close button replaces them. */
body.diq-report-fullscreen .diq-app-bar,
body.diq-report-fullscreen .diq-tab-bar,
body.diq-report-fullscreen .diq-pwa-install-chip,
body.diq-report-fullscreen .diq-pwa-install-pill,
body.diq-report-fullscreen .diq-pwa-toast,
body.diq-report-fullscreen .diq-rm-show-pill {
  display: none !important;
}

/* Close button: floats top-left, navy circle with X. Always-visible only
   when body.diq-report-fullscreen is set; hidden in the in-card preview
   (which is currently the reveal screen's default but can be a future
   non-fullscreen mode). */
.diq-reveal-close {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top) + 12px));
  left: max(14px, env(safe-area-inset-left));
  z-index: 99500;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 27, 45, 0.92);
  color: #FAF7F2;
  border: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -8px rgba(15, 27, 45, 0.45);
  transition: background 160ms, transform 100ms;
}
body.diq-report-fullscreen .diq-reveal-close { display: inline-flex; }
.diq-reveal-close:hover { background: #0F1B2D; }
.diq-reveal-close:active { transform: scale(0.94); }
.diq-reveal-close:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: 2px;
}

/* In fullscreen, push the Adjust + Share floating buttons to the
   bottom-right with proper safe-area handling. */
body.diq-report-fullscreen .diq-adjust-pill {
  position: fixed !important;
  top: auto !important;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  right: calc(max(16px, env(safe-area-inset-right)) + 56px) !important;
  z-index: 99500;
}
body.diq-report-fullscreen .diq-share-trigger {
  position: fixed !important;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  z-index: 99500;
}
@media (max-width: 540px) {
  /* On narrow phones, stack the floating buttons vertically so they don't
     crowd. Adjust above Share, both bottom-right. */
  body.diq-report-fullscreen .diq-adjust-pill {
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 72px)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* =========================================================================
   STREAMLINE BEAUTY PASS - May 2026
   Warm Bay Area color + real photography on the upload and generating
   screens, plus styles for the "Add a second packet" row and the 10s
   auto-start countdown. Additive: appended last so it layers cleanly over
   the base streamline rules. The photos are verified-live Unsplash CDN
   images used as ambient background only (decorative, never a claim about
   any specific property). Unsplash License, free to use.
     - Drop hero band:   Golden Gate / Marin headlands at golden hour
     - Generating card:  sunny California home exterior
   ========================================================================= */

/* Warm the whole streamlined surface */
body.diq-flow-active {
  background:
    radial-gradient(1100px 520px at 50% -160px, rgba(201, 169, 97, 0.14), transparent 70%),
    linear-gradient(180deg, #FBF7EF 0%, #F4F6F8 55%);
}

/* Screen 1: a real photo hero band above the drop card */
.diq-flow [data-screen="drop"] {
  position: relative;
  padding-top: 200px;
}
.diq-flow [data-screen="drop"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background:
    linear-gradient(180deg, rgba(15, 27, 45, 0.22) 0%, rgba(15, 27, 45, 0.04) 38%, rgba(251, 247, 239, 0.70) 78%, #FBF7EF 100%),
    url('https://images.unsplash.com/photo-1449034446853-66c86144b0ad?w=2000&q=80&auto=format&fit=crop') center 44% / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.diq-s1-wrap {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .diq-flow [data-screen="drop"] { padding-top: 150px; }
  .diq-flow [data-screen="drop"]::before { height: 150px; }
}

/* A warmer, more finished surface on the drop card itself */
.diq-drop-zone {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(251, 247, 239, 0.94) 100%);
  box-shadow: 0 18px 44px -24px rgba(15, 27, 45, 0.28);
}

/* "Add a second packet" row (pre-flight) */
.diq-second-packet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 16px;
  padding: 12px 14px;
  background: rgba(201, 169, 97, 0.08);
  border: 1px dashed rgba(201, 169, 97, 0.50);
  border-radius: 10px;
}
.diq-second-packet-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #0F1B2D;
  background: #FFFFFF;
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 999px;
  padding: 11px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.diq-second-packet-btn:hover { background: #FFFBF2; border-color: #C9A961; }
.diq-second-packet-btn:active { transform: scale(0.98); }
.diq-second-packet-btn:focus-visible { outline: 3px solid #0F1B2D; outline-offset: 2px; }
.diq-second-packet-plus {
  font-size: 16px;
  line-height: 1;
  color: #B39847;
  font-weight: 700;
}
.diq-second-packet-hint {
  font-size: 12.5px;
  color: #7B6A3F;
  line-height: 1.4;
  flex: 1 1 180px;
}
@media (max-width: 540px) {
  .diq-second-packet-hint { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .diq-second-packet-btn { transition: none; }
  .diq-second-packet-btn:active { transform: none; }
}

/* 10s auto-start countdown line (pre-flight) */
.diq-autostart-line {
  text-align: center;
  font-size: 13px;
  color: #5A6470;
  margin: 10px 0 2px;
}
.diq-autostart-line strong {
  /* darker gold-brown so the countdown number clears WCAG AA on cream */
  color: #7A5E1F;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.diq-autostart-cancel {
  background: none;
  border: 0;
  /* a real tap target, not a 16px sliver */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  color: #0F1B2D;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.diq-autostart-cancel:hover { color: #B39847; }
.diq-autostart-cancel:focus-visible {
  outline: 2px solid #C9A961;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Screen 3: the generating screen becomes a warm card with a faint,
   heavily scrimmed real home photo behind the live narration. */
.diq-gen-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(251, 247, 239, 0.93) 0%, rgba(251, 247, 239, 0.97) 100%),
    url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?w=1600&q=80&auto=format&fit=crop') center 60% / cover no-repeat;
  box-shadow: 0 18px 48px -22px rgba(15, 27, 45, 0.26);
  border: 1px solid rgba(201, 169, 97, 0.20);
}