/* Shared keyboard accessibility helper. Hidden until focused. */
.tms-skip-link {
  position: fixed;
  z-index: 100000;
  top: 16px;
  left: 16px;
  transform: translateY(-180%);
  padding: 11px 15px;
  border: 1px solid #fffdf8;
  background: #171613;
  color: #fffdf8;
  font: 700 13px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.tms-skip-link:focus,
.tms-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fffdf8;
  outline-offset: 2px;
}
main#main-content:focus { outline: none; }

/* Bot-trap field for public email forms. Kept out of the visual and keyboard flow. */
.tms-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tools directory refinement: neutral cream tool cards, category colour belongs to the section header. */
body:has(.jumpbar[aria-label="Jump to a tool category"]) .card,
body:has(.jumpbar[aria-label="Jump to a tool category"]) .card.featured {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) .card:hover,
body:has(.jumpbar[aria-label="Jump to a tool category"]) .card.featured:hover {
  background: var(--paper2) !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) .card.featured .tool-link {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) .card.featured .tool-link:hover,
body:has(.jumpbar[aria-label="Jump to a tool category"]) .card.featured .tool-link:focus-visible {
  background: var(--clay) !important;
  border-color: var(--clay) !important;
  color: var(--paper) !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) #fitness .section-title {
  background: var(--paper2) !important;
  color: var(--ink) !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .section-title {
  background: var(--clay) !important;
  color: var(--white) !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) #money .section-title {
  background: var(--taupe) !important;
  color: var(--ink) !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) #habits .section-title {
  background: var(--sage) !important;
  color: var(--white) !important;
}

/* Calorie calculator is the live TDEE calculator. Show one consistent name everywhere. */
body:has(.jumpbar[aria-label="Jump to a tool category"]) #fitness .cards > .card:nth-child(2) h3,
body.category-food .tool-grid > .tool-card:nth-child(1) h3 {
  font-size: 0 !important;
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) #fitness .cards > .card:nth-child(2) h3::after {
  content: "Calorie / TDEE Calculator";
  display: block;
  font-family: var(--display);
  font-size: clamp(34px,3.7vw,56px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
body.category-food .tool-grid > .tool-card:nth-child(1) h3::after {
  content: "Calorie / TDEE Calculator";
  display: block;
  font-family: var(--display);
  font-size: clamp(42px,5.2vw,78px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

/* Tools directory Food order: Pick. Plan. Shop. becomes Tool 01. */
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(4) { order: 1; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(1) { order: 2; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(2) { order: 3; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(3) { order: 4; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card .num { font-size: 0 !important; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card .num::after {
  font-size: clamp(38px,3.5vw,54px);
}
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(4) .num::after { content: "01"; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(1) .num::after { content: "02"; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(2) .num::after { content: "03"; }
body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card:nth-child(3) .num::after { content: "04"; }

/* Food landing page: Pick. Plan. Shop. becomes Tool 01, then the remaining tools follow in sequence. */
body.category-food .tool-grid {
  display: flex !important;
  flex-direction: column !important;
}
body.category-food .tool-grid > .tool-card:nth-child(5) { order: 1; }
body.category-food .tool-grid > .tool-card:nth-child(1) { order: 2; }
body.category-food .tool-grid > .tool-card:nth-child(2) { order: 3; }
body.category-food .tool-grid > .tool-card:nth-child(3) { order: 4; }
body.category-food .tool-grid > .tool-card:nth-child(4) { order: 5; }
body.category-food .tool-grid > .tool-card .meta span:last-child {
  font-size: 0 !important;
}
body.category-food .tool-grid > .tool-card .meta span:last-child::after {
  font-size: 10px;
}
body.category-food .tool-grid > .tool-card:nth-child(5) .meta span:last-child::after { content: "01"; }
body.category-food .tool-grid > .tool-card:nth-child(1) .meta span:last-child::after { content: "02"; }
body.category-food .tool-grid > .tool-card:nth-child(2) .meta span:last-child::after { content: "03"; }
body.category-food .tool-grid > .tool-card:nth-child(3) .meta span:last-child::after { content: "04"; }
body.category-food .tool-grid > .tool-card:nth-child(4) .meta span:last-child::after { content: "05"; }
body.category-food .tool-grid > .tool-card:nth-child(5) h3 {
  font-size: 0 !important;
}
body.category-food .tool-grid > .tool-card:nth-child(5) h3::after {
  content: "Pick. Plan. Shop.";
  display: block;
  font-family: var(--display);
  font-size: clamp(42px,5.2vw,78px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

/* Homepage master Tools-directory action injected by community-signup.js. */
.home-all-tools-link {
  width: fit-content;
  margin-top: 20px;
}

/* Match the Tools page utility bar to the rest of the main site. */
body:has(.jumpbar[aria-label="Jump to a tool category"]) .utility-bar > span:nth-child(2) {
  visibility: hidden;
}

@media (max-width: 720px) {
  body:has(.jumpbar[aria-label="Jump to a tool category"]) #food .cards > .card .num::after {
    font-size: 42px;
  }
  body:has(.jumpbar[aria-label="Jump to a tool category"]) #fitness .cards > .card:nth-child(2) h3::after,
  body.category-food .tool-grid > .tool-card:nth-child(1) h3::after,
  body.category-food .tool-grid > .tool-card:nth-child(5) h3::after {
    font-size: clamp(42px,13vw,58px);
  }
  .home-all-tools-link { width: 100%; }
}

/* V100: reusable screen-reader-only heading utility for semantic page structure. */
.tms-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}