/* Threshward engagement layer — share dock, animated data, reveals.
   ------------------------------------------------------------------
   Loaded from every page. Uses the page's own custom properties where they
   exist and falls back to literals where they don't, so it renders correctly
   on all three page templates without touching their layout.

   Every rule that moves is gated behind prefers-reduced-motion at the bottom
   of this file, and the JS also refuses to animate — two independent guards,
   because one of them will eventually be edited by someone in a hurry. */

/* ── share dock ───────────────────────────────────────────────────────── */

.tw-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--board-line, var(--border, #2a3548));
  border-radius: 10px;
  background: var(--board-2, var(--bg-card, #151b24));
}

.tw-share-label {
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-board-faint, var(--text-soft, #8b96a8));
  margin-right: 4px;
}

.tw-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 44px is the WCAG 2.5.5 / Apple HIG minimum target. Not a suggestion. */
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--board-line, var(--border, #2a3548));
  background: var(--board, var(--bg, #0e1218));
  color: var(--on-board, var(--text, #e6e9ef));
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

/* Hover lift only where a pointer can actually hover. On touch this would
   otherwise leave buttons stuck in their hover state after a tap. */
@media (hover: hover) and (pointer: fine) {
  .tw-share-btn:hover {
    transform: translateY(-1px);
    border-color: var(--signal, #ffc14a);
  }
}

.tw-share-btn:active {
  transform: translateY(0) scale(0.97);
}

.tw-share-btn:focus-visible {
  outline: 2px solid var(--focus, #5fb0e8);
  outline-offset: 2px;
}

.tw-share-btn svg {
  flex: 0 0 auto;
}

/* Per-network accent, applied to the icon only so text contrast is untouched. */
.tw-share-x .tw-share-name { color: inherit; }
.tw-share-linkedin svg { color: #4a90d9; }
.tw-share-reddit svg { color: #e0703a; }
.tw-share-mastodon svg { color: #8a7ff0; }
.tw-share-whatsapp svg { color: #4ecb71; }
.tw-share-telegram svg { color: #4aa4e0; }
.tw-share-email svg { color: var(--signal, #ffc14a); }

/* ── animated data ────────────────────────────────────────────────────── */

/* A bar whose fill is driven by a custom property the JS sets. The width
   transition is the only thing animating, and it is composited. */
[data-tw-bar] {
  --tw-bar-fill: 0%;
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--board-line, var(--border, #2a3548));
  overflow: hidden;
}

[data-tw-bar]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tw-bar-fill);
  border-radius: 4px;
  background: var(--signal, #ffc14a);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tw-count] {
  font-variant-numeric: tabular-nums;
}

/* ── scroll reveals ───────────────────────────────────────────────────── */

[data-tw-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tw-reveal].tw-revealed {
  opacity: 1;
  transform: none;
}

/* ── responsive ───────────────────────────────────────────────────────── */

/* Below 560px the named buttons cost more width than they add, so the label
   drops and the icon-only button keeps its 44px target. */
@media (max-width: 560px) {
  .tw-share {
    padding: 12px;
    gap: 6px;
  }
  .tw-share-label {
    flex: 0 0 100%;
    margin-bottom: 2px;
  }
  .tw-share-btn {
    padding: 10px 13px;
  }
}

@media (max-width: 380px) {
  .tw-share-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tw-share-btn {
    /* Icon-only, but still a full 44px touch target. */
    padding: 12px;
    min-width: 44px;
    justify-content: center;
  }
}

/* ── forced colours / high contrast ───────────────────────────────────── */

@media (forced-colors: active) {
  .tw-share,
  .tw-share-btn {
    border-color: CanvasText;
  }
  [data-tw-bar]::after {
    background: Highlight;
    forced-color-adjust: none;
  }
}

/* ── reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tw-share-btn {
    transition: none;
  }
  [data-tw-bar]::after {
    transition: none;
  }
  [data-tw-reveal] {
    /* Revealed by default: content must never be invisible to a reader who
       asked for no motion. */
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── print ────────────────────────────────────────────────────────────── */

@media print {
  .tw-share {
    display: none;
  }
  [data-tw-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ── board hero additions ─────────────────────────────────────────────── */

/* The figure of speech sits under the hero's trust row. It is a line, not a
   claim: it carries no number and no promise the page cannot keep. */
.hero-figure {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: var(--signal, #ffc14a);
  margin: 18px 0 0;
  letter-spacing: 0.01em;
}

/* The hero's share dock sits on the board's own surface, so it inherits the
   board tokens rather than the card ones. */
.hero .tw-share {
  background: transparent;
  border-color: var(--board-line, #2a3548);
  margin-top: 16px;
}

/* Solution mounts on apps and articles: give the pair breathing room without
   letting the paid panel crowd the share dock. */
.tw-solution-mounts {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 20px;
}

.tw-solution-mounts .tw-share {
  margin-top: 28px;
}

/* ── decluttered board flow + catalog visualization ───────────────────── */

.board-details {
  margin: 18px 0 0;
  border: 1px solid var(--board-line, #2a3548);
  border-radius: 12px;
  background: var(--board-2, #151b24);
  overflow: hidden;
}

.board-details > summary {
  min-height: 48px;
  padding: 13px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  cursor: pointer;
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--on-board, #e6e9ef);
}

.board-details > summary::marker {
  color: var(--signal, #ffc14a);
}

.board-details > summary:focus-visible {
  outline: 2px solid var(--focus, #5fb0e8);
  outline-offset: -3px;
}

.details-hint {
  font-size: 0.68rem;
  letter-spacing: 0;
  color: var(--on-board-faint, #5a667a);
}

.board-details-content {
  padding: 0 16px 16px;
}

.board-details-content .stats,
.board-details-content .ledger,
.board-details-content .ticker {
  margin-top: 14px;
}

.category-viz {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--board-line, #2a3548);
  border-radius: 10px;
  background: var(--board, #0e1218);
}

.category-viz-head h2 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
}

.category-viz-head p {
  margin: 4px 0 12px;
  font-size: 0.78rem;
  color: var(--on-board-soft, #8b96a8);
}

.category-viz-list {
  display: grid;
  gap: 4px;
}

.category-viz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 1.1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.category-viz-choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--on-board, #e6e9ef);
  text-align: left;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.category-viz-choice[aria-pressed="true"] {
  border-color: var(--signal, #ffc14a);
  background: color-mix(in srgb, var(--signal, #ffc14a) 10%, transparent);
}

.category-viz-choice:focus-visible {
  outline: 2px solid var(--focus, #5fb0e8);
  outline-offset: 2px;
}

.category-viz-count {
  flex: 0 0 auto;
  font-family: "Fragment Mono", ui-monospace, monospace;
  color: var(--signal, #ffc14a);
  font-variant-numeric: tabular-nums;
}

.category-viz-track {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

.category-viz-bar[data-tw-bar] {
  height: 8px;
}

@media (max-width: 560px) {
  .board-details-content {
    padding: 0 10px 12px;
  }
  .board-details > summary {
    padding: 12px;
  }
  .category-viz {
    padding: 12px;
  }
  .category-viz-row {
    grid-template-columns: minmax(0, 1fr) minmax(64px, 0.65fr);
    gap: 6px;
  }
  .category-viz-choice {
    font-size: 0.74rem;
    padding: 6px;
  }
}

.tw-share-quip {
  flex: 1 1 100%;
  order: 2;
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 2px 0 6px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.tw-share-quip strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.06rem;
  font-weight: 400;
  font-style: italic;
  color: var(--signal, #ffc14a);
}

.tw-share-copyline {
  color: var(--on-board-soft, var(--text-soft, #8b96a8));
  overflow-wrap: anywhere;
}

.tw-share-label { order: 1; }
.tw-share-btn { order: 3; }

.hero-actions .btn-primary .cta-quip {
  display: block;
  margin: 2px 0 0 18px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  opacity: 0.82;
}

.hero-share {
  margin-top: 12px;
}

.hero-share > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--board-line, #2a3548);
  border-radius: 999px;
  color: var(--on-board, #e6e9ef);
  cursor: pointer;
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-share > summary:focus-visible {
  outline: 2px solid var(--focus, #5fb0e8);
  outline-offset: 2px;
}

.hero-share[open] > summary {
  border-color: var(--signal, #ffc14a);
}

.hero-share .tw-share-label {
  display: none;
}