.home-tools { max-width: 620px; margin-top: 34px; }
.home-tools-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
}
.home-tools-heading .eyebrow { margin: 0; }
.home-tools-heading > span:last-child { color: var(--tomato); font-size: 1rem; }
.home-tools-heading:hover .eyebrow { color: var(--ink); }

.tool-link, .tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
}
.tool-link--with-image, .tool-card--with-image { grid-template-columns: 96px minmax(0, 1fr) auto; }
.tool-card-image { display: block; width: 96px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cream); }
.tool-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tool-link strong, .tool-link em,
.tool-card strong, .tool-card em { display: block; }
.tool-link small, .tool-card small { display: block; color: var(--tomato); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tool-link strong, .tool-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 500; }
.tool-link em, .tool-card em { margin-top: 3px; color: var(--muted); font-size: .8rem; font-style: normal; }
.tool-link > span:last-child, .tool-card > span:last-child { color: var(--tomato); font-size: 1.5rem; }
.tool-link:hover strong, .tool-card:hover strong { color: var(--tomato); }
[dir="rtl"] .home-tools-heading > span:last-child,
[dir="rtl"] .tool-link > span:last-child,
[dir="rtl"] .tool-card > span:last-child { display: inline-block; transform: scaleX(-1); }

.tools-main { padding-block: clamp(50px, 10vw, 110px); }
.tools-main h1 { max-width: 14ch; }
.tools-lede { max-width: 38rem; margin-bottom: 0; color: var(--muted); font-size: 1.05rem; }
.tool-list { max-width: 700px; margin-top: 34px; border-top: 1px solid var(--ink); }
.tool-card { padding-block: 20px; }

.calculator { padding-block: clamp(18px, 4vw, 42px) 76px; }
.hydration-dials fieldset {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  flex-direction: column;
  align-items: center;
}
.hydration-control-row {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(38px, 48px) auto minmax(38px, 48px);
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dial-steps {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.dial-step {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.dial-step--large { width: 46px; height: 46px; color: var(--cream); background: var(--tomato); border-color: var(--tomato); }
.dial-step--small { width: 34px; height: 34px; }
.dial-step:hover { transform: scale(1.06); border-color: var(--tomato); background: var(--tomato); color: var(--cream); }
.dial-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dial-step:disabled { opacity: .28; cursor: default; transform: none; }

.metric-circle {
  position: relative;
  display: flex;
  aspect-ratio: 1;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--cream) 0 46%, #efe0ce 100%);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--line) 42%, transparent);
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.metric-circle::after {
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}
.metric-circle:focus-within {
  border-color: var(--tomato);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--tomato) 14%, transparent);
}
.metric-circle--hydration { width: clamp(164px, 54vw, 232px); }
.metric-circle--total { width: clamp(168px, 43vw, 218px); margin-top: 34px; }
.ingredient-circles {
  display: grid;
  width: min(100%, 410px);
  margin-top: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(12px, 5vw, 32px);
}
.metric-circle--ingredient { width: min(100%, 170px); }
.metric-label {
  position: relative;
  z-index: 1;
  max-width: 80%;
  color: var(--muted);
  font-size: clamp(.58rem, 2.4vw, .72rem);
  font-weight: 850;
  letter-spacing: .09em;
  line-height: 1.15;
  text-transform: uppercase;
}
.metric-value {
  position: relative;
  z-index: 1;
  display: flex;
  direction: ltr;
  align-items: baseline;
  justify-content: center;
  margin-top: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: .9;
}
.metric-value input {
  width: 3.6ch;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--tomato);
  font: inherit;
  text-align: center;
  outline: 0;
}
.metric-value input:focus { border-bottom-color: var(--tomato); }
.metric-value input[aria-invalid="true"] { color: var(--tomato); border-bottom-color: var(--tomato); }
.metric-value > span { color: var(--tomato); font-size: .42em; font-weight: 700; letter-spacing: 0; }
.metric-edit-hint {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  color: var(--muted);
  font-size: .5rem;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}
.metric-circle--hydration .metric-value { font-size: clamp(3.25rem, 15vw, 5.35rem); }
.metric-circle--hydration .metric-value input { width: 2.25ch; }
.hydration-range-hint {
  position: relative;
  z-index: 1;
  direction: ltr;
  margin-top: 6px;
  color: var(--muted);
  font-size: .64rem;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.metric-circle--total .metric-value { font-size: clamp(2.35rem, 11vw, 3.65rem); }
.metric-circle--total .metric-value input { width: 4.25ch; }
.metric-circle--ingredient .metric-value { font-size: clamp(1.8rem, 8vw, 2.8rem); }
.metric-circle--ingredient .metric-value input { width: 4.1ch; }

.starter-control {
  display: flex;
  width: min(100%, 410px);
  margin-top: 38px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.starter-prompt {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}
.starter-adjust-row {
  display: grid;
  grid-template-columns: 64px auto 64px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.starter-steps { flex-direction: column; }
.metric-circle--starter {
  --starter-water-stop: 50%;
  --starter-handle-x: 50%;
  --starter-handle-y: 100%;
  width: clamp(122px, 34vw, 142px);
  overflow: visible;
  border: 3px solid transparent;
  background:
    radial-gradient(circle at 50% 38%, var(--cream) 0 62%, #efe0ce 100%) padding-box,
    conic-gradient(from 0deg, #356f99 0 var(--starter-water-stop), var(--tomato) var(--starter-water-stop) 100%) border-box;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--line) 28%, transparent);
  cursor: grab;
  touch-action: none;
}
.metric-circle--starter:active { cursor: grabbing; }
.metric-circle--starter::after { inset: 7px; }
.metric-circle--starter .metric-value { font-size: clamp(1.75rem, 7vw, 2.2rem); }
.metric-circle--starter .metric-value input { width: 3.3ch; }
.starter-ratio-range {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.starter-handle {
  position: absolute;
  z-index: 3;
  left: var(--starter-handle-x);
  top: var(--starter-handle-y);
  display: grid;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 22%, transparent);
  place-items: center;
  pointer-events: none;
}
.starter-handle i {
  display: block;
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: linear-gradient(var(--tomato) 0 50%, #356f99 50% 100%);
}
.metric-circle--starter:has(.starter-ratio-range:focus-visible) .starter-handle {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.starter-split {
  display: flex;
  margin: 18px 0 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}
.starter-split [data-starter-flour] { color: var(--tomato); }
.starter-split [data-starter-water-amount] { color: #356f99; }
.starter-added {
  margin-top: 8px;
  color: var(--tomato);
  font-size: .7rem;
  line-height: 1.3;
}
.starter-added[hidden] { display: none; }
.starter-added strong { display: block; font-size: .78rem; }
.starter-added p { margin: 1px 0 0; }

.calculator-notes {
  width: min(100%, 680px);
  margin: clamp(50px, 8vw, 78px) auto 0;
}
.calculator-note {
  padding-top: 20px;
  border-top: 1px solid var(--ink);
  text-align: center;
}
.calculator-note + .calculator-note { margin-top: 26px; }
.calculator-note h2 { margin-bottom: 6px; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 500; }
.calculator-note p { margin-bottom: 0; color: var(--muted); font-size: .82rem; }

@media (min-width: 760px) {
  .tool-link--with-image, .tool-card--with-image { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .tool-card-image { width: 112px; }
  .calculator { padding-top: 24px; }
  .hydration-control-row { grid-template-columns: 96px 212px 96px; gap: 12px; }
  .dial-steps { flex-direction: row; gap: 8px; }
  .dial-steps--decrease { justify-content: end; }
  .dial-steps--increase { justify-content: start; }
  .dial-step--large { width: 48px; height: 48px; font-size: .76rem; }
  .dial-step--small { width: 34px; height: 34px; }
  .metric-circle--hydration { width: 212px; }
  .metric-circle--total { width: 152px; margin-top: 14px; }
  .ingredient-circles { width: 320px; margin-top: 14px; gap: 28px; }
  .metric-circle--ingredient { width: 128px; }
  .starter-control { width: 340px; margin-top: 16px; }
  .starter-prompt { margin-bottom: 8px; font-size: .9rem; }
  .starter-adjust-row { grid-template-columns: 48px auto 48px; gap: 10px; }
  .starter-steps { flex-direction: column; }
  .metric-circle--starter { width: 104px; }
  .starter-split { margin-top: 10px; font-size: .67rem; }
  .starter-added { margin-top: 5px; }
  .metric-label { font-size: .62rem; }
  .metric-circle--hydration .metric-value { font-size: 4rem; }
  .metric-circle--total .metric-value { font-size: 2.55rem; }
  .metric-circle--ingredient .metric-value { font-size: 2.1rem; }
  .metric-circle--starter .metric-value { font-size: 1.65rem; }
}

@media (min-width: 960px) {
  .calculator {
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(500px, 620px) minmax(250px, 1fr);
    align-items: center;
    gap: clamp(34px, 6vw, 86px);
    padding-block: 18px 26px;
  }
  [dir="rtl"] .hydration-dials,
  [dir="rtl"] .calculator-notes { direction: rtl; }
  .hydration-dials { min-width: 0; }
  .hydration-control-row {
    grid-template-columns: 82px clamp(178px, 21svh, 210px) 82px;
    gap: 10px;
  }
  .dial-step--large { width: 44px; height: 44px; }
  .dial-step--small { width: 32px; height: 32px; }
  .metric-circle--hydration { width: clamp(178px, 21svh, 210px); }
  .metric-circle--total { width: clamp(116px, 14svh, 140px); margin-top: clamp(8px, 1.2svh, 12px); }
  .ingredient-circles {
    width: 284px;
    margin-top: clamp(8px, 1.2svh, 12px);
    gap: 24px;
  }
  .metric-circle--ingredient { width: clamp(98px, 12svh, 120px); }
  .starter-control { width: 320px; margin-top: clamp(10px, 1.4svh, 14px); }
  .starter-prompt { margin-bottom: 6px; font-size: .86rem; }
  .starter-adjust-row { grid-template-columns: 44px auto 44px; gap: 9px; }
  .metric-circle--starter { width: clamp(82px, 10svh, 100px); }
  .metric-circle--starter .metric-label { max-width: 94%; font-size: .52rem; letter-spacing: .06em; }
  .starter-handle { width: 24px; height: 24px; }
  .starter-split { margin-top: 7px; font-size: .64rem; }
  .starter-added { margin-top: 3px; font-size: .62rem; }
  .starter-added strong { font-size: .7rem; }
  .metric-circle--hydration .metric-value { font-size: clamp(3.2rem, 7svh, 4rem); }
  .metric-circle--total .metric-value { font-size: clamp(1.95rem, 4.5svh, 2.35rem); }
  .metric-circle--ingredient .metric-value { font-size: clamp(1.55rem, 3.6svh, 1.9rem); }
  .metric-circle--starter .metric-value { font-size: clamp(1.3rem, 2.8svh, 1.55rem); }
  .metric-edit-hint { margin-top: 4px; font-size: .44rem; }
  .hydration-range-hint { margin-top: 4px; font-size: .54rem; }
  .calculator-notes {
    width: 100%;
    margin: 0;
    align-self: center;
  }
  .calculator-note { padding-top: 18px; text-align: start; }
  .calculator-note + .calculator-note { margin-top: 28px; }
  .calculator-note h2 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
  .calculator-note p { max-width: 34rem; font-size: .86rem; }
}

@media (max-width: 479px) {
  .tool-link strong, .tool-card strong { font-size: 1.15rem; }
  .calculator { padding-block: 10px 54px; }
  .hydration-control-row { grid-template-columns: 40px auto 40px; gap: 5px; }
  .dial-steps { gap: 6px; }
  .dial-step--large { width: 40px; height: 40px; font-size: .68rem; }
  .dial-step--small { width: 30px; height: 30px; font-size: .64rem; }
  .metric-circle { box-shadow: 0 0 0 5px color-mix(in srgb, var(--line) 42%, transparent); }
  .metric-circle::after { inset: 6px; }
  .metric-circle--hydration { width: 160px; }
  .metric-circle--hydration .metric-value { font-size: 3.35rem; }
  .metric-edit-hint { margin-top: 4px; font-size: .43rem; }
  .hydration-range-hint { margin-top: 4px; font-size: .48rem; letter-spacing: .01em; }
  .metric-circle--total { width: 130px; margin-top: 14px; }
  .metric-circle--total .metric-value { font-size: 2.25rem; }
  .ingredient-circles { width: min(100%, 260px); margin-top: 14px; gap: 12px; }
  .metric-circle--ingredient { width: 116px; }
  .metric-circle--ingredient .metric-value { font-size: 1.75rem; }
  .metric-label { font-size: .56rem; }
  .starter-control { width: 100%; margin-top: 16px; }
  .starter-prompt { max-width: 340px; margin-bottom: 9px; font-size: .87rem; line-height: 1.15; }
  .starter-adjust-row { grid-template-columns: 40px auto 40px; gap: 8px; }
  .metric-circle--starter { width: 96px; border-width: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--line) 28%, transparent); }
  .metric-circle--starter::after { inset: 5px; }
  .metric-circle--starter .metric-value { font-size: 1.6rem; }
  .starter-handle { width: 24px; height: 24px; }
  .starter-split { margin-top: 9px; font-size: .66rem; }
  .starter-added { margin-top: 5px; font-size: .64rem; line-height: 1.2; }
  .starter-added strong { font-size: .72rem; }
  .calculator-notes { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dial-step, .metric-circle { transition: none; }
}

@media print {
  .dial-steps { display: none; }
  .hydration-control-row { grid-template-columns: auto; }
}