/* ==========================================================================
   ToolsVale — Blocks
   Larger composed sections: tool page furniture, editorial blocks, footer.
   Depends on tokens.css and components.css.
   ========================================================================== */

/* ==========================================================================
   TOOL PAGE — HERO
   ========================================================================== */

.tv-tool-hero { padding-block: var(--tv-section) var(--tv-space-10); }

.tv-tool-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--tv-space-16);
  align-items: center;
}

.tv-tool-hero__title { font-size: var(--tv-fs-3xl); }

.tv-tool-hero__intro {
  margin-top: var(--tv-space-5);
  font-size: var(--tv-fs-lead);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
  max-width: var(--tv-measure);
}

.tv-tool-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tv-space-2);
  margin-top: var(--tv-space-6);
}

/* At-a-glance spec box */
.tv-spec {
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  overflow: hidden;
}

.tv-spec__head {
  padding: var(--tv-space-3) var(--tv-space-5);
  border-bottom: 1px solid var(--tv-border);
  background: var(--tv-surface-sunken);
}

.tv-spec__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--tv-space-4);
  padding: var(--tv-space-3) var(--tv-space-5);
  font-size: var(--tv-fs-small);
  border-bottom: 1px solid var(--tv-border);
}

.tv-spec__row:last-child { border-bottom: 0; }

.tv-spec__key {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  text-transform: uppercase;
  color: var(--tv-text-muted);
  padding-top: 2px;
}

.tv-spec__val { color: var(--tv-text); }

@media (max-width: 1024px) {
  .tv-tool-hero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--tv-space-8); }
  .tv-spec { max-width: 420px; }
}


/* ==========================================================================
   TOOL APP SLOT
   The mount point for each tool's own markup. The wrapper owns the frame;
   the tool owns everything inside it.
   ========================================================================== */

.tv-tool-app {
  background: var(--tv-surface);
  border: 1px solid var(--tv-border-strong);
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow);
  overflow: hidden;
  scroll-margin-top: calc(var(--tv-header-h) + var(--tv-space-4));
}

.tv-tool-app__body { padding: var(--tv-space-6); }

.tv-tool-app__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tv-space-2);
  padding: var(--tv-space-3);
  border-top: 1px solid var(--tv-border);
  background: var(--tv-surface-sunken);
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
}

@media (max-width: 560px) {
  .tv-tool-app__body { padding: var(--tv-space-4); }
}


/* ==========================================================================
   NUMBERED STEPS
   "How to use it" and "How it works". The number is data, not decoration —
   these are genuine sequences.
   ========================================================================== */

.tv-steps { display: flex; flex-direction: column; }

.tv-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--tv-space-5);
  padding-block: var(--tv-space-6);
  border-bottom: 1px solid var(--tv-border);
}

.tv-step:first-child { padding-top: 0; }
.tv-step:last-child  { border-bottom: 0; padding-bottom: 0; }

.tv-step__num {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-eyebrow);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
  padding-top: 3px;
}

.tv-step__title {
  font-family: var(--tv-font-display);
  font-size: var(--tv-fs-h6);
  font-weight: var(--tv-fw-semibold);
  letter-spacing: var(--tv-ls-tight);
  margin-bottom: var(--tv-space-2);
}

.tv-step__body {
  font-size: var(--tv-fs-caption);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
}


/* ==========================================================================
   PINPOINTS
   "What makes us different" / "why this one". Claim + fix + verifiable test.
   ========================================================================== */

.tv-pinpoints { display: flex; flex-direction: column; gap: var(--tv-space-3); }

.tv-pinpoint {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--tv-space-5);
  padding: var(--tv-space-6);
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
}

.tv-pinpoint__num {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-eyebrow);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
  padding-top: 3px;
}

.tv-pinpoint__claim {
  font-family: var(--tv-font-display);
  font-size: var(--tv-fs-h6);
  font-weight: var(--tv-fw-semibold);
  line-height: var(--tv-lh-heading);
  letter-spacing: var(--tv-ls-tight);
  color: var(--tv-text);
}

.tv-pinpoint__fix {
  margin-top: var(--tv-space-3);
  font-size: var(--tv-fs-caption);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
}

/*
   The verifiable test line. This is the brand's proof mechanic — it must
   look checkable, not promotional. Mono, muted, gold tick.
*/
.tv-pinpoint__test {
  display: inline-flex;
  align-items: center;
  gap: var(--tv-space-2);
  margin-top: var(--tv-space-4);
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
  border-top: 1px solid var(--tv-gold);
  padding-top: var(--tv-space-2);
}


/* ==========================================================================
   DATA TABLE
   Formats and limits, popular conversions.
   ========================================================================== */

.tv-table-wrap {
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  overflow-x: auto;
  background: var(--tv-surface);
}

.tv-table { width: 100%; font-size: var(--tv-fs-small); }

.tv-table th {
  text-align: left;
  padding: var(--tv-space-3) var(--tv-space-5);
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  font-weight: var(--tv-fw-medium);
  letter-spacing: var(--tv-ls-mono);
  text-transform: uppercase;
  color: var(--tv-text-muted);
  background: var(--tv-surface-sunken);
  border-bottom: 1px solid var(--tv-border);
  white-space: nowrap;
}

.tv-table td {
  padding: var(--tv-space-4) var(--tv-space-5);
  border-bottom: 1px solid var(--tv-border);
  color: var(--tv-text-soft);
  vertical-align: top;
}

.tv-table tr:last-child td { border-bottom: 0; }

/* Numeric and format columns are mono — the precision signal. */
.tv-table__num,
.tv-table__mono {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text);
  white-space: nowrap;
}

.tv-table__num { text-align: right; font-variant-numeric: tabular-nums; }


/* ==========================================================================
   FAQ ACCORDION
   Native <details> — works without JS, styled to match.
   ========================================================================== */

.tv-faq { display: flex; flex-direction: column; gap: var(--tv-space-3); }

.tv-faq__item {
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  overflow: hidden;
  transition: border-color var(--tv-dur) var(--tv-ease);
}

.tv-faq__item[open] { border-color: var(--tv-border-strong); }

.tv-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tv-space-5);
  padding: var(--tv-space-5) var(--tv-space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--tv-font-display);
  font-size: var(--tv-fs-base);
  font-weight: var(--tv-fw-semibold);
  letter-spacing: var(--tv-ls-tight);
  color: var(--tv-text);
}

.tv-faq__q::-webkit-details-marker { display: none; }

.tv-faq__icon {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
  color: var(--tv-text-muted);
}

.tv-faq__icon::before,
.tv-faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--tv-dur) var(--tv-ease);
}

.tv-faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.tv-faq__icon::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }

.tv-faq__item[open] .tv-faq__icon::after { transform: translateX(-50%) scaleY(0); }
.tv-faq__item[open] .tv-faq__icon { color: var(--tv-primary); }

.tv-faq__a {
  padding: 0 var(--tv-space-6) var(--tv-space-6);
  font-size: var(--tv-fs-caption);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
  max-width: var(--tv-measure);
}


/* ==========================================================================
   ON THIS PAGE (TOC)
   ========================================================================== */

.tv-toc__title {
  font-family: var(--tv-font-body);
  font-size: var(--tv-fs-eyebrow);
  font-weight: var(--tv-fw-semibold);
  letter-spacing: var(--tv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--tv-text-muted);
  margin-bottom: var(--tv-space-4);
}

.tv-toc__list { display: flex; flex-direction: column; }

.tv-toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--tv-space-3);
  padding-block: var(--tv-space-2);
  font-size: var(--tv-fs-small);
  color: var(--tv-text-soft);
  border-left: 1px solid var(--tv-border);
  padding-left: var(--tv-space-4);
  margin-left: 1px;
  transition: var(--tv-transition);
}

.tv-toc__link:hover { color: var(--tv-primary); border-left-color: var(--tv-border-strong); }

.tv-toc__link.is-active {
  color: var(--tv-text);
  border-left-color: var(--tv-gold);
  font-weight: var(--tv-fw-medium);
}

.tv-toc__num {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  color: var(--tv-text-muted);
}


/* ==========================================================================
   FIELD GUIDE ENTRY
   ========================================================================== */

.tv-guide {
  display: flex;
  flex-direction: column;
  gap: var(--tv-space-4);
  padding: var(--tv-space-6);
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
}

.tv-guide__ext {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-eyebrow);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
}

.tv-guide__title {
  font-family: var(--tv-font-display);
  font-size: var(--tv-fs-h6);
  font-weight: var(--tv-fw-semibold);
  letter-spacing: var(--tv-ls-tight);
  line-height: var(--tv-lh-heading);
}

.tv-guide__desc {
  font-size: var(--tv-fs-small);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
}

.tv-guide__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--tv-space-4);
  padding-top: var(--tv-space-4);
  border-top: 1px solid var(--tv-border);
  font-size: var(--tv-fs-small);
}

.tv-guide__key {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  text-transform: uppercase;
  color: var(--tv-text-muted);
}

.tv-guide__val { color: var(--tv-text-soft); }


/* ==========================================================================
   COMMUNITY BAND
   ========================================================================== */

.tv-community {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--tv-space-4);
}

.tv-community__card {
  display: flex;
  flex-direction: column;
  gap: var(--tv-space-4);
  padding: var(--tv-space-6);
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
}

.tv-community__title {
  font-family: var(--tv-font-display);
  font-size: var(--tv-fs-h6);
  font-weight: var(--tv-fw-semibold);
  letter-spacing: var(--tv-ls-tight);
}

.tv-community__desc {
  font-size: var(--tv-fs-small);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
  flex: 1;
}

/* Suggestion chips under the request field */
.tv-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tv-space-2);
  margin-top: var(--tv-space-3);
}

.tv-suggestion {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
  background: var(--tv-surface-sunken);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-xs);
  padding: 3px 8px;
  cursor: pointer;
  transition: var(--tv-transition);
}

.tv-suggestion:hover { border-color: var(--tv-primary); color: var(--tv-primary); }


/* ==========================================================================
   NOTICES
   ========================================================================== */

.tv-notice {
  display: flex;
  gap: var(--tv-space-4);
  padding: var(--tv-space-5);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  background: var(--tv-surface);
  font-size: var(--tv-fs-small);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
}

.tv-notice--accent { border-color: var(--tv-gold); background: var(--tv-gold-soft); color: var(--tv-gold-ink-2); }
.tv-notice--warn   { border-color: var(--tv-warning); }

/* Review stamp under long-form content — an E-E-A-T signal */
.tv-reviewed {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
  padding-top: var(--tv-space-5);
  border-top: 1px solid var(--tv-border);
  margin-top: var(--tv-space-10);
}


/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.tv-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tv-space-2);
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-muted);
  padding-block: var(--tv-space-5);
}

.tv-crumbs a { color: var(--tv-text-muted); }
.tv-crumbs a:hover { color: var(--tv-primary); }
.tv-crumbs__sep { opacity: .5; }


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.tv-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--tv-space-2);
  margin-top: var(--tv-space-12);
}

.tv-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: var(--tv-space-3);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-sm);
  background: var(--tv-surface);
  font-size: var(--tv-fs-small);
  color: var(--tv-text-soft);
  transition: var(--tv-transition);
}

.tv-pagination .page-numbers:hover { border-color: var(--tv-primary); color: var(--tv-primary); }

.tv-pagination .page-numbers.current {
  background: var(--tv-violet-950);
  border-color: var(--tv-violet-950);
  color: var(--tv-text-invert);
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.tv-site-footer {
  background: var(--tv-surface-invert);
  color: var(--tv-text-on-invert);
  border-top: 1px solid var(--tv-gold);
  padding-block: var(--tv-section) var(--tv-space-6);
  margin-top: var(--tv-section-lg);
}

.tv-site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--tv-space-10) var(--tv-space-6);
}

.tv-site-footer__brand-logo {
  height: 34px;
  width: auto;
  margin-bottom: var(--tv-space-4);
}

.tv-site-footer__blurb {
  font-size: var(--tv-fs-small);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-invert-soft);
  max-width: 280px;
}

.tv-site-footer__col-title {
  font-size: var(--tv-fs-eyebrow);
  font-weight: var(--tv-fw-semibold);
  letter-spacing: var(--tv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--tv-text-invert-muted);
  margin-bottom: var(--tv-space-4);
}

.tv-site-footer__list { display: flex; flex-direction: column; gap: var(--tv-space-3); }

.tv-site-footer a {
  font-size: var(--tv-fs-small);
  color: var(--tv-text-on-invert);
}

.tv-site-footer a:hover { color: var(--tv-text-invert); }

.tv-site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--tv-space-3);
  margin-top: var(--tv-space-12);
  padding-top: var(--tv-space-5);
  border-top: 1px solid var(--tv-border-invert);
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-micro);
  letter-spacing: var(--tv-ls-mono);
  color: var(--tv-text-invert-muted);
}

@media (max-width: 900px) {
  .tv-site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .tv-site-footer__top { grid-template-columns: minmax(0, 1fr); }
}