/* ============================================================
   Dating replica (`.dtr`) for /capabilities/dating
   crew phossil-capability-showcase, 2026-07-26

   Scoped stylesheet for ONE working replica: the Bayesian
   temporal estimate, rebuilt in marketing markup and driven by
   a sample photo. Linked AFTER capability.css, which owns the
   `cap-replica` shell (dark card, title bar, sample note) and
   the marketing-template token base this file draws from.

   Tokens only, zero raw hex. The two rgba() calls are the same
   veil pattern capability.css already uses for the replica
   surface: the vellum text color at low alpha over the deep
   everglade card, which no token expresses.

   The band treatment is the load-bearing rule here. Confidence
   reads as SHAPE plus LABEL plus color, never color alone
   (the honest-date contract, public/js/ui/honest-date.js), and
   the low band is a quiet muted tone, NEVER the destructive
   red. A wide range is the product working, not an error, and
   the styling has to agree with the copy on that.
   ============================================================ */

.dtr {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* --- The readout: label, window, band --------------------- */
/* Order is deliberate and is the visual half of Law 7. The
   spoken label may be the biggest thing on the card, but the
   window sits immediately beneath it in the same block, so a
   year is never legible without its range in the same glance. */

.dtr__readout {
  display: block;
}
.dtr__label {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--color-accent);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
/* The unknown wording is a sentence, not a year: it needs to sit
   at prose size or it wraps into three lines on a phone. */
.dtr__label--wide {
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  line-height: 1.25;
}
.dtr__window {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-light);
  margin: var(--space-xs) 0 0;
  font-variant-numeric: tabular-nums;
  min-height: 1.5em; /* holds the line while the unknown state has no window */
}

.dtr__band {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
}
/* One glyph, three shapes. Filled for anchored, hollow for
   estimated, dashed for a rough guess: the band survives a
   grayscale print and a color-blind reader. */
.dtr__band-icon {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  flex: 0 0 auto;
}
.dtr__band--anchored { color: var(--color-accent); }
.dtr__band--anchored .dtr__band-icon { background: currentColor; }
.dtr__band--estimated { color: var(--color-sage); }
.dtr__band--estimated .dtr__band-icon { background: transparent; }
.dtr__band--rough { color: var(--color-text-muted); }
.dtr__band--rough .dtr__band-icon { border-style: dashed; background: transparent; }

/* --- The plot --------------------------------------------- */

.dtr__plot {
  position: relative;
  width: 100%;
}
.dtr__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* The belief itself: an area under the posterior, redrawn every
   time a clue goes on or off. */
.dtr__curve {
  fill: var(--color-accent);
  fill-opacity: 0.32;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
/* The credible interval: the years the estimate actually covers.
   Geometry properties animate as CSS in current browsers, so the
   band slides closed rather than jumping. Where it is not
   supported it snaps, which is a fine outcome. */
.dtr__interval {
  fill: var(--color-accent);
  fill-opacity: 0.14;
  stroke: var(--color-accent-hover);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  transition: x var(--transition-slow), width var(--transition-slow);
}
.dtr__mode {
  stroke: var(--color-accent-hover);
  stroke-width: 2;
  transition: x1 var(--transition-slow), x2 var(--transition-slow);
}
.dtr__axis {
  stroke: rgba(243, 240, 230, 0.22);
  stroke-width: 1;
}
/* Sized against the 900-unit viewBox, which renders about 0.71 of nominal in
   the wide cell: 15 here lands near 11 real pixels, which is the floor an
   axis label can be read at. */
.dtr__tick {
  font-family: var(--font-sans);
  font-size: 15px;
  fill: var(--color-text-muted);
}

/* --- The clue controls ------------------------------------ */

.dtr__clues-title {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}
.dtr__hint {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.dtr__clue-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xs);
  margin: 0;
}
/* Real buttons, keyboard reachable, 44px minimum. Pressed state
   rides aria-pressed so the assistive reading and the visual
   state can never disagree. */
.dtr__clue {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-sm);
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text-light);
  background: rgba(243, 240, 230, 0.06);
  border: 1px solid rgba(243, 240, 230, 0.18);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.dtr__clue:hover {
  background: rgba(243, 240, 230, 0.12);
}
.dtr__clue:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.dtr__clue[aria-pressed="true"] {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
/* The tick is the second channel on the pressed state, so the
   control does not rely on a border color shift alone. */
.dtr__clue-tick {
  flex: 0 0 auto;
  width: 1.1em;
  color: var(--color-accent);
  opacity: 0;
}
.dtr__clue[aria-pressed="true"] .dtr__clue-tick { opacity: 1; }
.dtr__clue-cat {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.dtr__clue-det {
  display: block;
  color: var(--color-text-light);
}

.dtr__reset {
  justify-self: start;
  min-height: 44px;
  padding: 0 var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dtr__reset:hover { background: var(--color-accent); color: var(--color-text-on-accent); }
.dtr__reset:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

/* SVG text scales with the viewBox, so the narrow coordinate
   space the script switches to below 720px (viewBox 420 rather
   than 900) needs a correspondingly larger nominal size to land
   at the same on-screen pixels. Without this the decade labels
   render at about five pixels. */
@media (max-width: 719px) {
  .dtr__tick { font-size: 18px; }
}

/* Nothing here needs to move to be understood. Anyone who has
   asked for less motion gets the same plot, redrawn instantly on
   every press instead of sliding into place. */
@media (prefers-reduced-motion: reduce) {
  .dtr__interval,
  .dtr__mode,
  .dtr__clue,
  .dtr__reset {
    transition: none;
  }
}