/* ==========================================================================
   date-estimator.css — <phossil-date-demo> (Task 9)
   ==========================================================================
   The seven-beat demo widget, styled in the product's Heirloom Gold surface.
   No Shadow DOM: page tokens reach the element. Every colour resolves through
   a design-system custom property — zero raw hex (the grep test enforces it).

   Token bridge: the widget mounts on TWO surfaces with different live token
   vocabularies — the guide page (marketing-template.css: --color-*) and the
   share/landing surface (landing-ab.css: --gold / --ink / --canvas). Each
   component token below reads whichever the host defines, via a var() chain, so
   the widget renders correctly wherever it lands (Task 10 supplies neither an
   inline block nor a hex fallback — the host page's :root is the source).
   ========================================================================== */

phossil-date-demo {
  --dd-surface: var(--surface, var(--color-surface));
  --dd-canvas: var(--canvas, var(--color-canvas));
  --dd-warm: var(--canvas-warm, var(--color-warmth));
  --dd-ink: var(--ink, var(--color-primary));
  --dd-muted: var(--ink-muted, var(--color-text-secondary));
  --dd-gold: var(--gold, var(--color-accent));
  --dd-gold-deep: var(--gold-deep);
  --dd-border: var(--parchment, var(--color-border));
  --dd-on-accent: var(--color-text-on-accent, var(--everglade, var(--ink)));
  --dd-destructive: var(--terracotta, var(--color-destructive, rgb(var(--dd-destructive-rgb))));
  --dd-serif: var(--font-display, var(--font-serif, Georgia, serif));
  --dd-sans: var(--font-body, var(--font-sans, sans-serif));

  /* rgb triplets (decimal, not hex) so gold + ink + terracotta read at
     arbitrary alpha for glows, hairlines, and band tints — mirrors the
     landing-ab.css rgba() house style. --dd-glow decomposes the gold token;
     --dd-ink-rgb the ink token; --dd-destructive-rgb the terracotta token.
     The destructive triplet is ALSO the last resort in the --dd-destructive
     chain above: the guide surface (marketing-template.css) defines neither
     --terracotta nor --color-destructive, and the Rough guess band (the
     honest-uncertainty outcome) must never lose its hue there. */
  --dd-glow: 217, 165, 32;
  --dd-ink-rgb: 33, 53, 53;
  --dd-destructive-rgb: 192, 87, 70;
  /* gold-deep triplet (the gold-deep token decomposed) for the clues
     panel's archival frame + serif title — 2026-07-25 elegance pass. */
  --dd-gold-deep-rgb: 130, 99, 19;

  display: block;
  font-family: var(--dd-sans);
  color: var(--dd-ink);
  container-type: inline-size;
}

phossil-date-demo *,
phossil-date-demo *::before,
phossil-date-demo *::after {
  box-sizing: border-box;
}

/* ---------- frame ---------- */
.dd-widget {
  background: var(--dd-surface);
  border: 1px solid rgba(var(--dd-ink-rgb), 0.1);
  border-radius: 18px;
  box-shadow: 0 12px 34px -22px rgba(var(--dd-ink-rgb), 0.55);
  overflow: hidden;
}

.dd-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(var(--dd-ink-rgb), 0.1);
  background: var(--dd-warm);
}
.dd-head__glyph {
  width: 22px;
  height: 22px;
  color: var(--dd-gold-deep);
  flex: none;
}
.dd-head__title {
  font-family: var(--dd-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--dd-ink);
}
.dd-scans {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--dd-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dd-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dd-gold);
  box-shadow: 0 0 0 2px rgba(var(--dd-glow), 0.2);
}
.dd-pip--spent {
  background: transparent;
  border: 1.5px solid rgba(var(--dd-ink-rgb), 0.28);
  box-shadow: none;
}

.dd-body {
  padding: 22px 20px 24px;
}

/* ---------- the user's photograph ---------- */
.dd-photo-wrap {
  position: relative;
  display: inline-block;
  flex: none;
}
.dd-photo {
  display: block;
  width: 196px;
  max-width: 42vw;
  height: auto;
  border-radius: 3px;
  filter: drop-shadow(0 10px 18px rgba(var(--dd-ink-rgb), 0.28));
  transform: rotate(-1.4deg);
}
.dd-photo--sm {
  width: 126px;
}

/* ---------- idle / drop zone ---------- */
.dd-drop {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  /* Centred since 2026-07-30. The left align paired the prompt with a glyph
     sitting beside it; that glyph is gone, so the row has one child and the
     text hung off to the left while the headline, sub-line and timeline above
     it were all centred. One column, one axis. */
  justify-content: center;
  text-align: center;
  border: 2px dashed rgba(var(--dd-ink-rgb), 0.22);
  border-radius: 14px;
  padding: 22px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.dd-drop:hover,
.dd-drop:focus-visible,
.dd-drop.dd-drop--over {
  border-color: var(--dd-gold);
  background: rgba(var(--dd-glow), 0.06);
}
.dd-drop:focus-visible {
  outline: 2px solid var(--dd-gold);
  outline-offset: 3px;
}
.dd-drop__prompt {
  flex: 1;
  min-width: 220px;
}
.dd-drop__k {
  font-family: var(--dd-serif);
  font-size: 21px;
  color: var(--dd-ink);
  margin: 0 0 5px;
}
.dd-drop__s {
  font-size: 13.5px;
  color: var(--dd-muted);
  line-height: 1.5;
}
.dd-drop__try {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dd-gold-deep);
  border-bottom: 1.5px solid var(--dd-gold);
  padding-bottom: 1px;
}
.dd-consent {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--dd-muted);
  opacity: 0.9;
  max-width: 46ch;
}
.dd-consent a {
  color: var(--dd-gold-deep);
}
.dd-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---------- deduction ---------- */
.dd-deduce {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dd-deduce__lines {
  flex: 1;
  min-width: 220px;
  padding-top: 4px;
}
.dd-dline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  color: var(--dd-ink);
  margin-bottom: 13px;
}
.dd-dline__tick {
  color: var(--dd-gold-deep);
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.dd-dline__cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dd-gold-deep);
}
.dd-dline__det {
  color: var(--dd-ink);
}
.dd-thinking {
  font-size: 12.5px;
  color: var(--dd-muted);
  letter-spacing: 0.03em;
  margin-top: 4px;
}
.dd-thinking__d {
  opacity: 0.2;
}

/* skeleton (never a spinner) */
.dd-skel {
  border-radius: 8px;
  background: rgba(var(--dd-ink-rgb), 0.08);
}
.dd-skel--line {
  height: 13px;
  margin-bottom: 13px;
}
.dd-skel--w70 { width: 70%; }
.dd-skel--w50 { width: 50%; }
.dd-skel--photo {
  width: 126px;
  height: 150px;
  flex: none;
  transform: rotate(-1.4deg);
}

/* ---------- reveal / result ---------- */
/* Hierarchy flip (2026-07-18): the mode year is the hero; the range reads as
   the supporting line beneath it. */
/* Dual-confidence rows: glyph dot + label + word; ink/gold neutrals only,
   never red, never colour-alone (the word carries the meaning). */
/* Save this for later: email capture row + quiet status. */
.dd-save {
  margin-top: 22px;
  text-align: center;
}
.dd-save__form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.dd-save__input {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--dd-border);
  border-radius: 999px;
  font-family: var(--dd-sans);
  font-size: 14px;
  color: var(--dd-ink);
  background: rgba(var(--dd-glow), 0.04);
  min-width: 220px;
}
.dd-save__input:focus-visible {
  outline: 2px solid var(--dd-gold);
  outline-offset: 2px;
}
.dd-save__status {
  font-size: 12.5px;
  color: var(--dd-muted);
  margin: 8px 0 0;
  min-height: 1em;
}
/* The UNCHECKED opt-in: a real choice, quiet, 44px touch row. */
.dd-save__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--dd-muted);
  cursor: pointer;
}
.dd-save__optbox {
  width: 16px;
  height: 16px;
  accent-color: var(--dd-gold);
}
/* Social share row (component-owned buttons live in social-share.css). */
.dd-range__conv {
  display: inline-block;
  min-width: 2.4ch;
}
/* Rough is HONESTY, not an error (founder ruling 2026-07-18): quiet ink
   neutral, never the destructive red. */
.dd-explain {
  font-size: 13px;
  color: var(--dd-muted);
  margin-top: 12px;
  max-width: 46ch;
  line-height: 1.5;
}

/* ---------- evidence chips ---------- */

/* ---------- century track (projection + gate) ---------- */
.dd-track {
  position: relative;
  height: 74px;
  margin: 26px 6px 8px;
}
/* Empty (no photo placed): nothing occupies the label lane above the axis, so
   the reserved 46px reads as a broken gap. Pull the axis up and lose the lane.
   The decade ticks and their labels are positioned off the axis, so they ride
   up with it and nothing else needs to move. */
.dd-track--empty {
  height: 34px;
  margin-top: 10px;
}
.dd-track--empty .dd-axis { top: 6px; }
.dd-track--empty .dd-decade { top: 2px; }
.dd-track--empty .dd-slot { top: 7px; }
.dd-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  height: 2px;
  background: rgba(var(--dd-ink-rgb), 0.16);
  border-radius: 2px;
}
.dd-decade {
  position: absolute;
  top: 42px;
  width: 1px;
  height: 10px;
  background: rgba(var(--dd-ink-rgb), 0.22);
}
.dd-decade span {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--dd-muted);
  font-variant-numeric: tabular-nums;
}
.dd-slot {
  position: absolute;
  top: 47px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.4px solid rgba(var(--dd-ink-rgb), 0.35);
  opacity: 0.4;
}
.dd-pt {
  position: absolute;
  top: 47px;
  transform: translate(-50%, -50%);
}
.dd-pt__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dd-glow), 0.55), transparent 68%);
}
.dd-pt__core {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--dd-gold);
  box-shadow: 0 0 0 3px rgba(var(--dd-glow), 0.3), 0 2px 6px rgba(var(--dd-ink-rgb), 0.4);
}
.dd-pt__lbl {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--dd-ink);
  font-weight: 600;
}
/* Edge clamp: near the track ends the centered nowrap label would run past
   the widget frame (overflow:hidden clips it) — anchor it to the point. */
.dd-pt--edge-r .dd-pt__lbl {
  left: auto;
  right: -4px;
  transform: none;
  text-align: right;
}
.dd-pt--edge-l .dd-pt__lbl {
  left: -4px;
  right: auto;
  transform: none;
  text-align: left;
}

/* ---------- CTAs + paynote ---------- */
.dd-cta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.dd-cta {
  font-family: var(--dd-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--dd-on-accent);
  background: var(--dd-gold);
  border: none;
  border-radius: 12px;
  padding: 13px 26px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(var(--dd-glow), 0.55);
  transition: filter 0.15s, transform 0.12s;
}
.dd-cta:hover {
  filter: brightness(1.08);
}
.dd-cta--sec {
  background: transparent;
  color: var(--dd-ink);
  box-shadow: none;
  border: 1px solid var(--dd-border);
}
.dd-cta:focus-visible {
  outline: 2px solid var(--dd-ink);
  outline-offset: 2px;
}
/* ---------- share ---------- */
.dd-copied {
  min-height: 1.2em;
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--dd-gold-deep);
}

/* ---------- gate ---------- */
.dd-gate {
  text-align: center;
}
.dd-gate__h {
  font-family: var(--dd-serif);
  font-size: clamp(21px, 3.6vw, 27px);
  color: var(--dd-ink);
  margin: 6px 0;
  text-wrap: balance;
}
.dd-gate__p {
  font-size: 14px;
  color: var(--dd-muted);
  max-width: 44ch;
  margin: 0 auto 6px;
  line-height: 1.5;
}

/* ---------- error ---------- */
.dd-error {
  text-align: center;
  padding: 12px 0;
}
.dd-error__h {
  font-family: var(--dd-serif);
  font-size: 20px;
  color: var(--dd-ink);
  margin-bottom: 16px;
}
.dd-error__s {
  font-size: 14px;
  color: var(--dd-muted);
  max-width: 44ch;
  margin: 0 auto;
  line-height: 1.5;
}

@container (max-width: 520px) {
  .dd-hero__year {
    font-size: clamp(32px, 11vw, 46px);
  }
}

/* ==========================================================================
   Motion — every staged entrance is opt-in. Reduced-motion users get the
   final, static composition; only prefers-reduced-motion: no-preference
   unlocks the shimmer, the converge, the slot fade-in, the land, the pulse.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .dd-photo {
    transition: transform 0.35s ease;
  }
  .dd-drop {
    transition: border-color 0.2s, background 0.2s;
  }

  .dd-dline {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .dd-dline.dd-dline--in {
    opacity: 1;
    transform: none;
  }

  .dd-thinking__d {
    animation: dd-blink 1.4s infinite;
  }
  .dd-thinking__d:nth-child(2) { animation-delay: 0.2s; }
  .dd-thinking__d:nth-child(3) { animation-delay: 0.4s; }
  @keyframes dd-blink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }

  .dd-skel {
    background: linear-gradient(
      100deg,
      rgba(var(--dd-ink-rgb), 0.06) 30%,
      rgba(var(--dd-ink-rgb), 0.12) 50%,
      rgba(var(--dd-ink-rgb), 0.06) 70%
    );
    background-size: 200% 100%;
    animation: dd-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes dd-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .dd-late {
    opacity: 0;
    transition: opacity 0.6s;
  }
  .dd-late.dd-late--on {
    opacity: 1;
  }

  .dd-slot {
    opacity: 0;
    animation: dd-slot-in 0.6s forwards;
    animation-delay: var(--dd-sd, 0.7s);
  }
  @keyframes dd-slot-in {
    to { opacity: 0.4; }
  }

  .dd-pt__core {
    animation: dd-land 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  }
  @keyframes dd-land {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }

  .dd-pt__halo {
    animation: dd-pulse 2.6s ease-in-out infinite;
  }
  @keyframes dd-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.85); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  }
}

/* ---------- the reveal card (founder mockup 2026-07-18) ---------- */
.dd-card {
  background: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: 18px;
  padding: 22px 22px 26px;
  text-align: center;
}
.dd-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.dd-card__logo {
  display: block;
  height: 26px;
  width: auto;
}
.dd-card .dd-photo-wrap {
  display: flex;
  justify-content: center;
}
.dd-card .dd-photo {
  width: 100%;
  max-width: 460px;
  max-height: 46vh;
  object-fit: contain;
  transform: none;
  border-radius: 8px;
}
/* circa YEAR — the museum label */
.dd-hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.dd-hero__kick {
  font-family: var(--dd-serif);
  font-style: italic;
  font-size: clamp(30px, 6vw, 44px);
  color: var(--dd-gold);
  line-height: 1;
}
.dd-hero__year {
  font-family: var(--dd-serif);
  font-size: clamp(40px, 8vw, 58px);
  font-weight: 700;
  line-height: 1;
  color: var(--dd-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dd-hero__year--sm {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 600;
}
.dd-sub {
  font-size: 16px;
  color: var(--dd-muted);
  margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
.dd-range__conv {
  display: inline-block;
  min-width: 2.4ch;
}
/* the gold clues box */
/* The clues panel: archival paper, not a gold slab (founder elegance
   ruling 2026-07-25). Hairline gold-deep frame, serif italic title,
   thin gold dash markers, small-caps closing line. */
.dd-clues {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(var(--dd-gold-deep-rgb), 0.28);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px auto 0;
  max-width: 560px;
  text-align: left;
  color: var(--dd-ink);
}
.dd-clues__title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: rgb(var(--dd-gold-deep-rgb));
  margin-bottom: 12px;
}
.dd-clues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.dd-clues__item {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}
.dd-clues__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 14px;
  height: 1px;
  background: rgba(var(--dd-gold-deep-rgb), 0.6);
}
.dd-clues__item b {
  font-weight: 700;
}
.dd-clues__conf {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--dd-gold-deep-rgb), 0.18);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(var(--dd-ink-rgb), 0.65);
}
/* action pills + social */
.dd-actions {
  margin-top: 20px;
}
.dd-actions__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1.5px solid var(--dd-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--dd-gold-deep);
  font-family: var(--dd-sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s, color 0.16s;
}
.dd-pill:hover,
.dd-pill:focus-visible {
  background: rgba(var(--dd-glow), 0.14);
}
.dd-pill:focus-visible {
  outline: 2px solid var(--dd-gold);
  outline-offset: 2px;
}
.dd-actions__social {
  display: inline-flex;
}
/* projection line + timeline card */
.dd-projline {
  font-family: var(--dd-serif);
  font-size: clamp(18px, 3.2vw, 23px);
  color: var(--dd-muted);
  margin: 26px 0 0;
}
.dd-track-card {
  background: var(--dd-surface);
  border: 1px solid var(--dd-gold);
  border-radius: 14px;
  padding: 26px 18px 14px;
  margin: 16px auto 0;
  max-width: 640px;
}
/* the continue CTA — one bold line, an arrow, nothing else */
.dd-continue {
  display: inline-block;
  margin-top: 24px;
  font-weight: 800;
  font-size: clamp(15px, 2.8vw, 18px);
  color: var(--dd-ink);
  text-decoration: none;
  min-height: 44px;
  padding: 8px 6px;
}
.dd-continue:hover span,
.dd-continue:focus-visible span {
  transform: translateX(3px);
}
.dd-continue span {
  display: inline-block;
  transition: transform 0.16s;
  color: var(--dd-gold-deep);
}
.dd-continue:focus-visible {
  outline: 2px solid var(--dd-gold);
  outline-offset: 2px;
}
.dd-card__wm {
  margin: 22px 0 0;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dd-gold-deep);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .dd-continue span { transition: none; }
  .dd-continue:hover span { transform: none; }
}