/* Tickaboo — /guides/what-if-no-consent/
 *
 * Linked by hand from the page head, and site.js by hand before </body>,
 * as every nested route must (current.md 17b).
 * Built 8 September 2026. Phase 4 guide 5.
 *
 * Guide chrome and the shared building blocks (.g-hero, .steps, .drench,
 * .cn-split, .cn-aside, .pp-quote, .cn-card, .olds, .method) all live in
 * components.css. Only what is specific to this page is here.
 *
 * Every color-mix() carries a solid declaration immediately before it.
 */

/* ═══════════════════════════════════════════════════════════════════
   THE FUNNEL
   Five stops down a spine, each bar shorter than the last, with the
   third one, the thirty days, drawn largest. The page's argument is
   that almost all of these end early, so the picture narrows rather
   than escalating. Getting quieter as it descends is the point.
   ═══════════════════════════════════════════════════════════════════ */
.ill--funnel {
  --nc-bar: #E7EFE6;
  --nc-bar-here: #DCEADD;
  --nc-faint: #F1F0EC;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ill--funnel {
    --nc-bar: color-mix(in srgb, var(--color-surface) 46%, var(--color-surface-tint));
    --nc-bar-here: color-mix(in srgb, var(--color-surface) 74%, var(--color-surface-tint));
    --nc-faint: color-mix(in srgb, var(--color-paper) 40%, var(--color-surface-tint));
  }
}

.nc__spine { fill: none; stroke: var(--color-border); stroke-width: 2; }
.nc__dot { fill: var(--color-primary); }
/* The stop that matters is the only one that gets the dark value and a
   ring, so the eye lands there rather than at the bottom of the funnel. */
.nc__dot--here {
  fill: var(--color-dark);
  stroke: var(--color-surface-tint);
  stroke-width: 3;
}
.nc__dot--faint { fill: var(--color-muted); opacity: 0.45; }

.nc__bar { fill: var(--nc-bar); }
.nc__bar--here { fill: var(--nc-bar-here); }
.nc__bar--faint { fill: var(--nc-faint); }

.nc__barline {
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0.42;
}
.nc__barline--here { stroke: var(--color-dark); opacity: 0.6; }
.nc__barline--faint { opacity: 0.28; }

/* ═══════════════════════════════════════════════════════════════════
   THE OUTCOMES LIST, inside the dark drench
   Quoted verbatim, so it is set as a list rather than as prose. The
   whole point is that the regulator's own list is less frightening
   than anybody's summary of it.
   ═══════════════════════════════════════════════════════════════════ */
.nc-outcomes {
  list-style: none;
  margin: 1.5rem 0 0.9rem;
  padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.3rem, 2.6vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.07);
  background: color-mix(in srgb, var(--color-surface-tint) 7%, transparent);
  display: grid;
  gap: 0.7rem;
}
.nc-outcomes li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(245,235,224,0.82);
  color: color-mix(in srgb, var(--color-dark-ink) 82%, transparent);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.nc-outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.65rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent-2);
}
.nc-outcomes strong { color: var(--color-dark-ink); }
.nc-src {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: rgba(245,235,224,0.66);
  color: color-mix(in srgb, var(--color-dark-ink) 66%, transparent);
}
.nc-src a { color: var(--color-accent-2); }

/* ═══════════════════════════════════════════════════════════════════
   THE OTHER ROUTES
   The fourth card is the parent group chat, which is the one that
   actually costs a centre. It carries the apricot so it reads as the
   odd one out in a row of formal processes.
   ═══════════════════════════════════════════════════════════════════ */
.old--flag { background: #FBEFE7; background: color-mix(in srgb, var(--shape-orange) 55%, var(--color-surface-tint)); }

.nc-real {
  max-width: 52rem;
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-tint);
}
.nc-real h3 { margin: 0 0 1rem; font-size: 1.1875rem; }
.nc-rank { margin: 0; padding-left: 1.35rem; display: grid; gap: 0.85rem; }
.nc-rank li { color: var(--color-muted); font-size: 0.9375rem; line-height: 1.6; }
.nc-rank strong { color: var(--color-ink); }
.nc-rank li::marker { color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   THE FIRST HOUR
   ═══════════════════════════════════════════════════════════════════ */
.nc-steps { margin: 1.3rem 0; padding-left: 1.35rem; display: grid; gap: 0.85rem; }
.nc-steps li { color: var(--color-muted); font-size: 0.9375rem; line-height: 1.6; }
.nc-steps strong { color: var(--color-ink); }
.nc-steps li::marker { color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; }

.cn-aside__foot {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.nc-seq .section-lead,
.nc-other .section-lead { max-width: 66ch; margin-inline: auto; }