/* ============================================================
   Privacy Scanner Website — AI Detection section styles
   Source: DESIGN_SPEC.md §7.5 + prompt-level overrides

   Loads AFTER hero.css (extends .eyebrow base + .price-chip
   patterns established there).

   Token substitutions (prompt → actual):
     - --r-full       → --r-pill
     - --focus-shadow → --focus-ring

   Perf: chip fade-in uses opacity + transform only.
   ============================================================ */


/* ============================================================
   Section shell
   ============================================================ */
.ai-detection {
  background: var(--bg-base);
  padding-block: var(--sp-11);
  border-block-start: 1px solid var(--border-soft);
  border-block-end: 1px solid var(--border-soft);
}
.ai-detection-inner {
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 600px)  { .ai-detection-inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .ai-detection-inner { padding-inline: var(--gutter-desktop); } }


/* ============================================================
   Eyebrow — regulatory (mono, squarer than hero's pill)
   ============================================================ */
.eyebrow--regulatory {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-soft);
}
.eyebrow--regulatory time {
  color: var(--text);
  font-feature-settings: "tnum" 1;
}
.eyebrow--regulatory .eyebrow-sep { color: var(--text-faint); }


/* ============================================================
   H2 — section heading at display weight
   ============================================================ */
.ai-detection-h2 {
  margin: var(--sp-5) 0 var(--sp-6);
  max-width: 20ch;
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
  text-wrap: balance;
}
:lang(ja) .ai-detection-h2,
:lang(zh-Hans) .ai-detection-h2,
:lang(ko) .ai-detection-h2 {
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: auto;
  max-width: 24ch;
}


/* ============================================================
   Lead paragraph
   ============================================================ */
.ai-detection-lead {
  max-width: 60ch;
  margin-block-end: var(--sp-8);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
.ai-detection-lead em {
  font-style: normal;
  font-weight: var(--fw-medium);
  color: var(--text);
}


/* ============================================================
   JUMBF excavation inset
   - Recessed terminal aesthetic
   - Left-bar teal accent
   - Header row with C2PA label + meta
   - Code body with syntax-style key/value coloring
   - Italic caption (sans-serif — editorial voice)
   ============================================================ */
.jumbf-inset {
  display: block;
  max-width: 52rem;
  margin-block: var(--sp-6);
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  overflow: hidden;   /* keeps the rounded corners clean over the left bar */
}

.jumbf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
}
.jumbf-header-label {
  color: var(--teal);
  font-weight: var(--fw-bold);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-caps);
}
.jumbf-header-meta {
  color: var(--text-faint);
  font-size: var(--fs-mono-sm);
}

.jumbf-body {
  margin: 0;
  padding: var(--sp-4);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.jumbf-body code {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
}
.jumbf-key   { color: var(--teal-dim); }
.jumbf-value { color: var(--text-soft); }
.jumbf-value--highlight {
  color: var(--risk-medium);
  font-weight: var(--fw-semibold);
}

.jumbf-caption {
  padding: var(--sp-3) var(--sp-4);
  border-block-start: 1px solid var(--border-soft);
  font-family: var(--font-sans);   /* editorial, not mono */
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-soft);
  font-style: italic;
}


/* ============================================================
   Tool chips
   ============================================================ */
.ai-tools {
  margin-block: var(--sp-8);
}
.ai-tools-heading {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--text-soft);
}
.ai-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ai-tool-chip {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ai-tool-chip:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
}

/* Extras: hidden by default, revealed when parent has data-tools-visible="all" */
.ai-tool-chip[data-visibility="extra"] { display: none; }
.ai-tools[data-tools-visible="all"] .ai-tool-chip[data-visibility="extra"] {
  display: inline-flex;
  animation: chip-fade-in var(--dur-normal) var(--ease-out) both;
}
@keyframes chip-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   "+27 more" / "Show fewer" toggle
   ============================================================ */
.ai-tools-toggle {
  display: inline-flex;
  align-items: center;
  margin-block-start: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  color: var(--teal);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ai-tools-toggle:hover {
  border-color: var(--teal-dim);
  color: var(--teal-hover);
  background: var(--teal-wash);
}
.ai-tools-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ============================================================
   NO CLOUD LOOKUP claim
   ============================================================ */
.no-cloud-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3) var(--sp-4);
  margin-block-start: var(--sp-7);
  max-width: 52rem;
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--risk-safe);
  border-radius: var(--r-md);
}
.no-cloud-icon {
  grid-row: span 2;
  align-self: start;
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--risk-safe);
}
.no-cloud-text {
  align-self: end;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  color: var(--risk-safe);
}
.no-cloud-sub {
  grid-column: 2;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-soft);
}


/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 768px) {
  .ai-detection-h2 {
    font-size: var(--fs-h2);
    max-width: 18ch;
  }
  .jumbf-body { font-size: var(--fs-mono-sm); }
  .jumbf-inset { border-left-width: 3px; }
  .no-cloud-chip {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .no-cloud-icon { grid-row: auto; }
  .no-cloud-sub  { grid-column: auto; }
  .ai-tools-toggle {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ai-tools[data-tools-visible="all"] .ai-tool-chip[data-visibility="extra"] {
    animation: none;
  }
}