/* ---- 1. Tool-card covers lost their per-tool tint --------------------
   The coherence patch paints `background:var(--wash)!important` on
   .tdt-card__cover, and that shorthand resets background-image to none —
   so every card in the directory went flat grey. The tinted cover is the
   one thing that gives a 400-card grid a scannable silhouette (see the note
   on .tdt-card__cover in the design system), so restore it as a longhand.
   Placeholder cards keep their own higher-specificity flat rules. */
.tdt-card__cover{
  background-color:var(--wash);
  background-image:linear-gradient(135deg,
    hsl(var(--tint,220) 72% 94%) 0%,
    hsl(calc(var(--tint,220) + 38) 66% 88%) 100%)!important;
}
/* …and the second, less obvious killer: Elementor's lazy-load stylesheet sets
   `background-image:none!important` on every descendant of every top-level
   container from the 3rd onward (from the 2nd on viewports ≤640px tall), but
   only while the viewport is ≤1024px tall — i.e. on most laptops. It is aimed
   at photographic container backgrounds and takes the card tint with it. The
   `body` prefix lifts this one specificity point above that rule so the tint
   survives at any viewport height; the descendant containers it names are
   already covered by the rule above when they are not lazily loaded. */
body .e-con.e-parent:not(.e-lazyloaded):not(.e-no-lazyload) .tdt-card__cover{
  background-image:linear-gradient(135deg,
    hsl(var(--tint,220) 72% 94%) 0%,
    hsl(calc(var(--tint,220) + 38) 66% 88%) 100%)!important;
}

/* ---- 2. Section heads: an editorial rule + a little more presence ----
   The accent tick under each heading was disabled by the polish layer
   because it floated alone at the right end of the flex row. Replacing it
   with a hairline under the whole head keeps the intent — a rule that says
   "section starts here" — without the stray mark, and it reads the way a
   reference book separates entries. */
.tdt-section-head{
  position:relative; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px!important;
}
.tdt-section-head h2{ font-size:clamp(21px,2.4vw,26px)!important; text-wrap:balance; }
.tdt-section-head p{ font-size:13.5px; }
/* 12px control text is below the size the rest of the site uses for
   interactive labels; 13px matches the filter chips and the card meta. */
.tdt-see-all{ font-size:13px; }

/* ---- 3. Category tiles: even rows, a hover affordance ----------------
   Nine disciplines in a 6-wide grid left three stretched tiles alone on the
   second row, and a 4-wide grid at tablet left one orphan. 3-up then 5-up
   splits them 3/3/3 and 5/4, so no row is left half empty at any width. */
.tdt-cat-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (min-width:640px){ .tdt-cat-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1180px){ .tdt-cat-tiles{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.tdt-cat-tile{
  transition:transform .28s var(--ease-spring), box-shadow .28s var(--ease-spring),
             border-color .28s var(--ease-spring);
}
.tdt-cat-tile:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tdt-cat-tile__label{ text-wrap:balance; }
/* The count already turns accent on hover; the arrow makes the whole tile
   read as a link rather than as a label with a number under it. */
.tdt-cat-tile__count::after{
  content:" \2192"; color:var(--accent);
  display:inline-block; opacity:0; transform:translateX(-5px);
  transition:opacity .18s ease, transform .18s var(--ease-spring);
}
.tdt-cat-tile:hover .tdt-cat-tile__count::after,
.tdt-cat-tile:focus-visible .tdt-cat-tile__count::after{ opacity:1; transform:none; }

/* ---- 4. Hero: let the container own the frame ------------------------
   On an Elementor page .e-con supplies the gutter and .e-con-inner the top
   gap, and .e-con .tdt-hero above zeroes this widget's own padding so the
   hero is inset exactly once and lines up with the section heads below it.
   The rule here is the fallback for a hero rendered outside a container. */
.tdt-hero{ padding:64px var(--gutter) 10px; }
.tdt-hero h1{ max-width:19ch; margin-left:auto; margin-right:auto; text-wrap:balance; }
.tdt-hero__lede{ text-wrap:pretty; }
/* The widget writes margin-top:28px inline as a cache-safety net, so only
   !important can settle the gap between lede and buttons from here. */
.tdt-hero__ctas{ margin-top:24px!important; }
.tdt-pill{ letter-spacing:-.005em; }
.tdt-pill--live .tdt-pill__dot{ flex:none; }

/* ---- 5. Card meta: the footer row reads as one unit ------------------ */
.tdt-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ---- 6. Launch Week: hierarchy the board was missing ----------------- */
/* Section heads get the same rule as the rest of the site. */
.tdt-lw .tdt-lw__shead{
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
/* Rows breathe and answer the pointer. */
.tdt-lw .tdt-lw__list{ gap:12px; }
.tdt-lw .tdt-lw__item{
  grid-template-columns:28px 52px minmax(0,1fr) 64px;
  gap:16px; padding:16px;
  transition:border-color .18s, box-shadow .18s, transform .18s var(--ease-spring);
}
.tdt-lw .tdt-lw__item:hover{
  transform:translateY(-1px);
  border-color:var(--line-hover);
  box-shadow:0 6px 18px rgba(23,23,23,.07);
}
/* The rank is a plain grey numeral, so nothing on the board said who was
   leading. It becomes a chip: the leader takes the solid pill the site uses
   for its own primary marks, second and third a quiet tinted one. Tokens
   only, so both themes stay legible. The closed-week medal classes and the
   open-week nth-child state are styled the same way, because which of the
   two is present depends only on whether voting has ended. */
.tdt-lw .tdt-lw__rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background:var(--wash); border:1px solid var(--line-2);
  font-size:13px; color:var(--sub);
}
.tdt-lw .tdt-lw__rank--1,
.tdt-lw .tdt-lw__item:nth-child(1) .tdt-lw__rank{
  background:var(--solid); border-color:var(--solid); color:var(--solid-ink);
}
.tdt-lw .tdt-lw__rank--2, .tdt-lw .tdt-lw__rank--3,
.tdt-lw .tdt-lw__item:nth-child(2) .tdt-lw__rank,
.tdt-lw .tdt-lw__item:nth-child(3) .tdt-lw__rank{
  background:color-mix(in srgb, var(--ink) 7%, var(--paper));
  border-color:var(--line); color:var(--ink-2);
}
/* The vote control is the only thing to do on this page and it was grey
   like everything else. Accent on hover, accent once cast. */
.tdt-lw button.tdt-lw__vote:hover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, var(--paper))!important;
  color:var(--accent)!important;
}
.tdt-lw button.tdt-lw__vote:hover .tdt-lw__arrow{ color:var(--accent); }
.tdt-lw .tdt-lw__vote.is-voted{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 11%, var(--paper))!important;
}
.tdt-lw .tdt-lw__vote.is-voted b,
.tdt-lw .tdt-lw__vote.is-voted .tdt-lw__arrow{ color:var(--accent); }
/* Step numbers echo the accent instead of sitting in neutral grey. */
.tdt-lw .tdt-lw__n{
  background:color-mix(in srgb, var(--accent) 12%, var(--paper));
  border-color:color-mix(in srgb, var(--accent) 32%, var(--line));
  color:var(--accent);
}
/* The board's primary button was near-black while every other primary on the
   site is the brand blue; --cta is fixed across themes, so the pairing with
   --cta-ink stays AAA in dark mode too. */
.tdt-lw .tdt-lw__btn{
  min-height:49px; padding:0 28px; font-size:14px;
  transition:border-color .15s, transform .15s var(--ease-spring), box-shadow .15s;
}
/* The outlined one takes the same border token the site's ghost buttons use
   (--control-line), so the pair reads as one component next to .tdt-btn. */
.tdt-lw .tdt-lw__btn:not(.tdt-lw__btn--solid){ border-color:var(--control-line); }
/* Hover matches .tdt-btn exactly: the same 1px lift and the accent glow the
   site paints behind every button. The border is deliberately left alone —
   .tdt-btn--ghost's own hover asks for an accent border and the shared
   `--control-line` backstop out-importances it, so on this site a ghost
   button keeps its grey border and only its label turns accent. */
.tdt-lw .tdt-lw__btn:hover{
  color:var(--accent)!important;
  transform:translateY(-1px);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.tdt-lw .tdt-lw__btn--solid{
  background:var(--cta)!important; border-color:var(--cta)!important;
  color:var(--cta-ink)!important;
}
.tdt-lw .tdt-lw__btn--solid:hover{
  background:var(--cta)!important; border-color:var(--cta)!important;
  color:var(--cta-ink)!important; filter:brightness(1.08); opacity:1;
}
/* …and the pill radius, restated where the prose-link rule cannot reach it.
   The design system gives its whole button family `border-radius:999px`
   (several with !important) but never listed `.tdt-lw__btn`, so the widget's
   own 999px (0-2-0) lost to `.page .wp-block-post-content p a` (0-2-2) —
   a rule whose comment says buttons were deliberately meant to be exempt.
   Launch Week's two hero CTAs are <a>s inside <p class="tdt-lw__actions">,
   so they rendered as 2px rectangles with that rule's text-decoration
   transition, while the identical button further down the page sits in a
   <div>, never matched, and stayed round. Every prose container those
   buttons render in is named below at a specificity the prose rule cannot
   outrank, so the whole family — hero, board, share kit, forms — is a pill
   like every other CTA on the site. The transition is restated here too:
   prose ships its own list, and without this the 1px lift and the glow would
   land instantly instead of easing. */
.page .wp-block-post-content .tdt-lw__btn,
.single-post .wp-block-post-content .tdt-lw__btn,
.tdt-prose .tdt-lw__btn,
.tdt-page-intro .tdt-lw__btn,
.tdt-lw .tdt-lw__btn{
  border-radius:999px;
  transition:border-color .15s, transform .15s var(--ease-spring), box-shadow .15s;
}
/* The same rule flattened the "Earlier weeks" chips — they are named
   .tdt-lw__pills and carry their own border-radius:999px, but the prose rule
   out-ranked that (0-2-1 vs 0-2-2). Restated at the same reach as above; the
   widget's padding, border token and font stay untouched. */
.page .wp-block-post-content .tdt-lw__pills a,
.single-post .wp-block-post-content .tdt-lw__pills a,
.tdt-prose .tdt-lw__pills a,
.tdt-page-intro .tdt-lw__pills a,
.tdt-lw .tdt-lw__pills a{
  border-radius:999px;
  transition:border-color .15s;
}
/* Winners: same chip language as the board ranks. */
.tdt-lw .tdt-lw__winner{
  padding:14px;
  transition:border-color .18s, box-shadow .18s, transform .18s var(--ease-spring);
}
.tdt-lw .tdt-lw__winner:hover{
  transform:translateY(-1px); border-color:var(--line-hover);
  box-shadow:0 4px 14px rgba(23,23,23,.06);
}
.tdt-lw .tdt-lw__medal{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:24px; padding:0 8px;
  border-radius:999px; background:var(--wash);
  border:1px solid var(--line-2); font-size:12px; color:var(--ink-2);
}
.tdt-lw .tdt-lw__winner:nth-child(1) .tdt-lw__medal{
  background:var(--solid); border-color:var(--solid); color:var(--solid-ink);
}
.tdt-lw .tdt-lw__winner:nth-child(1) .tdt-lw__rank--1{
  background:var(--solid); border-color:var(--solid); color:var(--solid-ink);
}

/* ---- 7. Phones: the board drops the rank column entirely ------------- */
@media (max-width:640px){
  .tdt-lw .tdt-lw__rank{ display:none; }
  .tdt-lw .tdt-lw__item{ grid-template-columns:44px minmax(0,1fr) 56px; gap:12px; padding:14px 12px; }
  .tdt-hero h1{ max-width:none; }
}

/* ---- 8. Phone-width: let wide post tables scroll in place -------------
   A five-column comparison table is as wide as its widest column, so on a
   390px viewport it pushed the whole document 71px sideways — the only
   horizontal scroll left on the site, on its own front door. Turning the
   outer box into a scroll container keeps every row and cell laid out as a
   table (they keep their display) while the sideways movement happens inside
   the article instead of across the page. */
@media (max-width:768px){
  .entry-content table,
  .wp-block-post-content table{
    display:block; max-width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
}

/* ---- 9. Motion: this layer only moves things the pointer caused ------ */
@media (prefers-reduced-motion:reduce){
  .tdt-cat-tile__count::after{ transition:none; transform:none; }
  .tdt-lw .tdt-lw__item:hover,
  .tdt-lw .tdt-lw__winner:hover,
  .tdt-lw .tdt-lw__btn:hover{ transform:none; }
}