/* ==================================================================
   /tools/youtube-best-time-to-post on the foundation look.
   Loaded ONLY when the 'tools-best-time-to-post-fnd' redesign switch is
   on for this viewer (never in embed mode); the old page keeps its own
   stylesheets.

   Layout unique to this page only. The first screen, the answer, the
   guide, the questions, the links and the close are the shared tool kit
   (foundation-tools.css); segments, pickers, rows, the data table,
   callouts and the numbered heads are the foundation's and are NOT
   redrawn here.

   The one new part is the week strip (.bt3-heat): each day's 24 hours as
   a row of colour, darker for more viewers online. prior-art.js found no
   heatmap anywhere in the product (2026-11-01), so it is page-local and
   named for promotion.

   The bt3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/best-time-to-post.js.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .bt3 .fnd-tool-lead__sub,
.fnd .bt3 h1.fnd-display,
.fnd .bt3-qa__list summary,
.fnd.bt3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 413px) {
  .fnd .bt3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .bt3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.bt3-ask,
.bt3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* The questions: each segment as wide as the card, its buttons even. */
.fnd .bt3 .bt3-seg { display: flex; width: 100%; margin-top: var(--fnd-s2); }
.fnd .bt3 .bt3-seg button { flex: 1 1 0; min-width: 0; padding: 0 var(--fnd-s2); }
.fnd .bt3 .bt3-ask .fnd-field + .fnd-field { margin-top: var(--fnd-s4); }
.fnd .bt3 .bt3-ask .fnd-label { margin: 0 0 6px; }
.fnd .bt3 .bt3-ask .fnd-help { margin: 6px 0 0; text-wrap: pretty; }

/* ------------------------------------------------------------------
   2. THE ANSWER
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .bt3 .bt3-ans { margin-top: var(--fnd-s5); }
}
/* "Wednesday, 12 PM" is the longest answer: it stays on one line at
   375px. */
.fnd .bt3 .bt3-fig { font-size: clamp(2rem, 8.6vw, 3.4rem); }
@media (min-width: 1024px) {
  .fnd .bt3 .bt3-fig { font-size: clamp(2.2rem, 3.3vw, 3.2rem); }
}
.fnd .bt3 #bt3-fig-l { text-wrap: pretty; }

/* Name left, answer right, on phones too. */
.fnd .bt3 .bt3-rows { margin-top: var(--fnd-s4); }
.fnd .bt3 .bt3-rows.fnd-rows { border-top: 0; }
.fnd .bt3 .bt3-rows .fnd-row[hidden] { display: none; }
.fnd .bt3 .bt3-rows .fnd-row {
  grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--fnd-s4);
  border-bottom: 0; border-top: 1px solid var(--fnd-on-ink-rule);
}
.fnd .bt3 .bt3-rows .fnd-row-main { grid-column: 1; grid-row: 1; }
.fnd .bt3 .bt3-rows .fnd-row-t {
  display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0;
  color: var(--fnd-on-ink-soft); font-weight: 500; white-space: nowrap;
}
.fnd .bt3 .bt3-rows .fnd-row-end {
  display: block; grid-column: 2; grid-row: 1; margin-top: 0;
  font-weight: 700; text-align: right; color: var(--fnd-on-ink);
  text-wrap: pretty; overflow-wrap: break-word;
}
.fnd .bt3 .bt3-ans__note {
  margin: var(--fnd-s4) 0 0; padding-top: var(--fnd-s3);
  border-top: 1px solid var(--fnd-on-ink-rule);
  font-size: var(--fnd-t-meta); line-height: 1.55; color: var(--fnd-on-ink-soft);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------
   3. THE WEEK AND THE COMPARISON
   One column at every width: the week needs the room.
   ------------------------------------------------------------------ */
.fnd .bt3 .bt3-more { grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s5); margin-top: var(--fnd-s6); }
.fnd .bt3 .bt3-card__head { margin-bottom: var(--fnd-s4); }
.fnd .bt3 .bt3-card__head .fnd-tool-more__sub { margin: 4px 0 0; text-wrap: pretty; }
.fnd .bt3 .bt3-freqfield { margin-bottom: var(--fnd-s4); }
.fnd .bt3 .bt3-freqfield .fnd-label { margin: 0 0 6px; }

/* One row per day: name, best hour and "Post" on the days picked, with
   the strip on its own line under the words at every width, so it always
   gets the full row (side by side it squeezed to 3 to 5px cells). */
.bt3-week { list-style: none; margin: 0; padding: 0; }
.bt3-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; column-gap: var(--fnd-s3); row-gap: 6px;
  padding: 10px var(--fnd-s2);
  border-top: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r-xs);
}
.bt3-day:first-child { border-top: 0; }
.bt3-day--post { background: var(--fnd-accent-soft); border-top-color: transparent; }
.bt3-day--post + .bt3-day { border-top-color: transparent; }
.fnd .bt3-day__n { font-weight: 600; color: var(--fnd-text); }
.fnd .bt3-day__t { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fnd-text-soft); white-space: nowrap; }
.fnd .bt3-day--post .bt3-day__t { color: var(--fnd-accent-deep); }
.fnd .bt3-day__post {
  justify-self: end; font-size: var(--fnd-t-meta); font-weight: 700;
  color: var(--fnd-accent-deep);
}

/* The strip. A picture: the words beside it carry the answer. */
.bt3-heat { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 18px; }
.bt3-heat i { display: block; border-radius: 2px; background: var(--fnd-rule); }
.bt3-heat i[data-s="1"] { background: color-mix(in srgb, var(--fnd-accent) 26%, var(--fnd-paper)); }
.bt3-heat i[data-s="2"] { background: color-mix(in srgb, var(--fnd-accent) 38%, var(--fnd-paper)); }
.bt3-heat i[data-s="3"] { background: color-mix(in srgb, var(--fnd-accent) 66%, var(--fnd-paper)); }
.bt3-heat i[data-s="4"] { background: var(--fnd-accent); }
.bt3-heat i.is-best { box-shadow: 0 0 0 2px var(--fnd-accent-deep); }
/* On a highlighted Post row the palest cells sat on their own colour and
   vanished; they take the paper colour there instead. */
.bt3-day--post .bt3-heat i[data-s="0"] { background: var(--fnd-paper); }

/* The hour labels sit under the strips' column. */
.bt3-axis {
  display: flex; justify-content: space-between;
  margin: 6px var(--fnd-s2) 0;
  font-size: var(--fnd-t-micro); color: var(--fnd-text-soft); white-space: nowrap;
}

@media (max-width: 639px) {
  .bt3-heat { height: 16px; }
}

.fnd .bt3 .bt3-sched {
  margin: var(--fnd-s4) 0 0; font-weight: 600; color: var(--fnd-text);
  text-wrap: pretty;
}
.bt3-actions { display: flex; flex-wrap: wrap; gap: var(--fnd-s3); margin-top: var(--fnd-s4); }
@media (max-width: 559px) {
  .bt3-actions .fnd-btn { flex: 1 1 100%; justify-content: center; }
}

/* The comparison: words, not figures, so the cells wrap. On a phone each
   value takes its own named line. */
.fnd .bt3-tbl tbody td { white-space: normal; font-variant-numeric: normal; text-wrap: pretty; overflow-wrap: break-word; }
.fnd .bt3-tbl td:first-child { white-space: nowrap; font-weight: 600; text-align: left; }
@media (max-width: 639px) {
  .fnd .bt3-tbl.fnd-tbl--data thead { display: none; }
  .fnd .bt3-tbl.fnd-tbl--data tbody tr { display: flex; flex-wrap: wrap; }
  .fnd .bt3-tbl.fnd-tbl--data tbody td:first-child { flex: 0 0 100%; white-space: normal; }
  .fnd .bt3-tbl.fnd-tbl--data tbody td:not(:first-child) {
    flex: 0 0 100%; min-width: 0; padding: 4px 0 0;
    text-align: left; font-size: var(--fnd-t-meta); font-weight: 400; color: var(--fnd-text);
  }
  .fnd .bt3-tbl.fnd-tbl--data tbody td:nth-child(2) { order: 4; }
  .fnd .bt3-tbl.fnd-tbl--data tbody td:nth-child(3) { order: 5; }
  .fnd .bt3-tbl.fnd-tbl--data tbody td:not(:first-child)::before {
    content: attr(data-l) " "; font-weight: 600; color: var(--fnd-text-soft);
  }
}
.fnd .bt3 .bt3-tip { margin-top: var(--fnd-s4); }
.fnd .bt3 .bt3-tip p { text-wrap: pretty; }

/* ------------------------------------------------------------------
   4. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .bt3-guide .fnd-tool-read .fnd-h2 {
  margin-top: var(--fnd-s8);
  max-width: 24ch;
  scroll-margin-top: calc(var(--header-height, 61px) + var(--fnd-s4));
}
.fnd .bt3-guide .fnd-toc li > a:not(.fnd-btn) { text-wrap: pretty; }
@media (max-width: 767px) {
  .fnd .bt3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
.fnd .bt3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .bt3-guide .fnd-tool-read li a:not(.fnd-btn) { padding-block: 12px; }
.fnd .bt3-guide .fnd-tool-read li,
.fnd .bt3-guide .fnd-tool-read p { text-wrap: pretty; }

.bt3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.bt3-steps li + li { margin-top: var(--fnd-s5); }
.bt3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .bt3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.bt3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .bt3-steps p { padding-left: 0; }
}
.fnd .bt3-guide .fnd-tool-callout { margin-top: var(--fnd-s5); }
/* The day table in the guide keeps three columns: short values fit. */
@media (max-width: 639px) {
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data thead { display: table-header-group; }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data tbody tr { display: table-row; }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data tbody td,
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data tbody td:first-child,
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data tbody td:not(:first-child) {
    display: table-cell; padding: 10px 6px; font-size: var(--fnd-t-meta);
  }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data tbody td:not(:first-child)::before { content: none; }
}
.fnd .bt3-src { margin-top: var(--fnd-s6); text-wrap: pretty; }
/* The kit's phone table sets its last cell as a bold headline figure;
   here both values read alike, label then words. */
@media (max-width: 639px) {
  .fnd .bt3 .bt3-tbl.fnd-tbl--data tbody td:last-child {
    font-weight: 400; font-size: var(--fnd-t-meta); white-space: normal; text-align: left;
  }
  .fnd .bt3 .bt3-tbl.fnd-tbl--data tbody td:last-child::before {
    content: attr(data-l) " "; font-weight: 600; color: var(--fnd-text-soft);
  }
}
@media (max-width: 639px) {
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data thead tr { display: table-row; padding: 0; }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data thead th,
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data thead th:not(:first-child):not(:last-child) {
    display: table-cell; padding: 10px 6px; text-align: left;
  }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data tbody td:last-child { font-weight: 400; text-align: left; }
}
@media (max-width: 639px) {
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data table tbody tr { display: table-row; padding: 0; }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data table tbody tr::after { content: none; display: none; }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data tbody td:last-child,
  .fnd .bt3 .bt3-tbl.fnd-tbl--data tbody td:last-child { font-family: inherit; }
}
@media (max-width: 639px) {
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data table { display: table; }
  .fnd .bt3-guide .bt3-tbl.fnd-tbl--data table tbody { display: table-row-group; }
}

/* The top line names the visitor's own time too when their zone differs,
   so it may need two lines on a phone; the kit keeps it on one. */
.fnd .bt3-now .fnd-tool-now__v { white-space: normal; text-wrap: balance; }
.fnd .bt3-now__me { display: block; font-family: var(--fnd-body-font); font-size: var(--fnd-t-sm); font-weight: 600; letter-spacing: 0; color: var(--fnd-on-ink-soft); }