/* ============================================================================
   CrochetCalc Calculator Template — Wave 1D
   ============================================================================

   Route-scoped: linked from calculator pages only.

   RESTYLE, DO NOT RENAME
   ----------------------
   assets/js/calc-ux.js is a hard contract with these class names. It requires
   `form.calc`, wraps errors on `.field`, injects `.calc__errors` before
   `.calc__actions`, and appends `.calc__assumptions` inside `.calc__result`.
   Renaming any of them would silently disable inline validation, the error
   summary and the assumptions panel on all fourteen calculators.

   So this file restyles the existing contract with the Wave 1A tokens instead
   of inventing new classes. The consequence is deliberate: when the remaining
   thirteen calculators adopt this template they need this stylesheet linked
   and nothing else - no markup migration.

   New page-level furniture is namespaced `cp-` (calculator page).
   ========================================================================= */

/* ==========================================================================
   1. PAGE SHELL
   ========================================================================== */

.cp-wrap {
  width: 100%;
  max-width: var(--cc-container-content);
  margin-inline: auto;
  padding-inline: var(--cc-space-5);
}
.cp-intro { max-width: var(--cc-container-reading); margin-bottom: var(--cc-space-6); }
.cp-intro p {
  margin: 0;
  font-size: var(--cc-text-lg);
  line-height: 1.6;
  color: var(--cc-color-text-secondary);
}

.cp-section { padding-block: var(--cc-space-7); border-top: 1px solid var(--cc-color-border); }
.cp-section:first-of-type { border-top: 0; }
.cp-section > h2 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-2xl);
  line-height: var(--cc-line-heading);
  font-weight: var(--cc-weight-semibold);
  margin: 0 0 var(--cc-space-3);
  overflow-wrap: break-word;
}
.cp-section > h3 {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-weight-semibold);
  margin: var(--cc-space-5) 0 var(--cc-space-2);
}
.cp-prose { max-width: var(--cc-container-reading); }
.cp-prose p { margin: 0 0 var(--cc-space-4); font-size: var(--cc-text-base); line-height: var(--cc-line-body); }
.cp-prose ul, .cp-prose ol { margin: 0 0 var(--cc-space-4); padding-left: var(--cc-space-5); }
.cp-prose li { margin-bottom: var(--cc-space-2); line-height: 1.6; }
.cp-prose > :last-child { margin-bottom: 0; }

.cp-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin: 0 0 var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-brand-strong);
}

/* ==========================================================================
   2. CALCULATOR SHELL  (legacy .calc contract, Wave 1A surface)
   ========================================================================== */

.calc {
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-sm);
  overflow: hidden;
  margin: 0 0 var(--cc-space-6);
}
.calc__head {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4) var(--cc-space-5);
  border-bottom: 1px solid var(--cc-color-border);
  background: var(--cc-color-surface-subtle);
}
.calc__title {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-weight-semibold);
  line-height: 1.25;
  margin: 0;
}
.calc__head__icon {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-brand-soft);
  color: var(--cc-color-brand-hover);
}

/* Numbered steps: the grouping is the instruction, so it carries a marker. */
.calc fieldset {
  margin: 0;
  padding: var(--cc-space-5);
  border: 0;
  border-top: 1px solid var(--cc-color-border);
}
.calc fieldset:first-of-type { border-top: 0; }
.calc legend {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: 0;
  margin-bottom: var(--cc-space-4);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
}

/* UNAVOIDABLE LEGACY DEFENCE.
   main.css and the duplicated inline block both carry
   `.calc .calc__grid { grid-template-columns: 1fr !important }` and
   `.calc__actions { flex-direction: column !important }` under
   @media (max-width:768px) - a legacy "mobile fix" that treats a 768px tablet
   as a phone. The result was one 686px-wide input per row and a stacked action
   bar on a screen with room for three fields. No specificity beats !important,
   so this answers in kind, scoped to these two selectors. Remove when main.css
   is cleaned up. */
.calc__grid {
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
@media (min-width: 640px) {
  .calc .calc__grid,
  .calc__grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important; }
  /* `.calc .calc__actions` (0,2,0) is needed, not `.calc__actions` (0,1,0):
     the duplicated inline <style> block is the LAST sheet in the document, so
     between two equally specific !important declarations it would win. */
  .calc .calc__actions { flex-direction: row !important; }
}

/* ==========================================================================
   3. FIELDS
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--cc-space-2); min-width: 0; }
.field label {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-semibold);
  color: var(--cc-color-text);
  line-height: 1.35;
}
.field input[type="number"],
.field input[type="text"],
.field select {
  width: 100%;
  min-height: var(--cc-control-height);
  padding: var(--cc-space-2) var(--cc-space-3);
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);   /* 17px: under 16px iOS zooms on focus */
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--cc-color-text);
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border-control);   /* 3.5:1 boundary */
  border-radius: var(--cc-radius-md);
  transition: border-color var(--cc-duration-fast) var(--cc-ease-standard);
}
.field input:hover:not(:disabled), .field select:hover:not(:disabled) {
  border-color: var(--cc-color-text-secondary);
}
.field input:focus-visible, .field select:focus-visible {
  outline: var(--cc-focus-outer-width) solid var(--cc-color-focus);
  outline-offset: var(--cc-focus-offset);
  box-shadow: 0 0 0 var(--cc-focus-inner-width) var(--cc-color-focus-inner);
  border-color: var(--cc-color-text-secondary);
}
.field__hint { font-size: var(--cc-text-sm); line-height: 1.45; color: var(--cc-color-text-muted); }

/* Error state: 2px border, tint, icon and worded message - never colour alone.
   .field--error and .field__error are created by calc-ux.js. */
.field--error input, .field--error select {
  border-width: 2px;
  border-color: var(--cc-color-danger);
  background: var(--cc-color-danger-soft);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-2);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  line-height: 1.45;
  color: var(--cc-color-danger);
}
.field__error::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: var(--cp-ic-alert) center / contain no-repeat;
  mask: var(--cp-ic-alert) center / contain no-repeat;
}
.calc__errors {
  margin: 0 var(--cc-space-5) var(--cc-space-4);
  padding: var(--cc-space-3) var(--cc-space-4);
  border: 1px solid var(--cc-color-danger);
  border-left-width: 4px;
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-danger-soft);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-text);
}
.calc__errors:empty { display: none; }

/* ==========================================================================
   4. ACTION BAR
   Calculate dominates. Reset is quiet and separated, so it is hard to hit by
   accident after entering seven measurements.
   ========================================================================== */

.calc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4) var(--cc-space-5);
  border-top: 1px solid var(--cc-color-border);
  background: var(--cc-color-surface-subtle);
}
.calc__actions .btn--primary { min-width: 190px; }
.calc__actions__spacer { flex: 1 1 auto; }
@media (max-width: 639px) {
  .calc__actions { flex-direction: column; align-items: stretch; }
  .calc__actions__spacer { display: none; }
  .calc__actions .btn { width: 100%; }
}

/* ==========================================================================
   5. RESULT
   The strongest element on the page once it exists. The swatch grid sits
   behind the headline figure: counted paper under a counted number.
   ========================================================================== */

.calc__result {
  border-top: 3px solid var(--cc-color-brand);
  background: var(--cc-color-surface);
}
.calc__result[hidden] { display: none; }

.calc__result__head {
  padding: var(--cc-space-5) var(--cc-space-5) 0;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
}
.calc__result__big {
  padding: var(--cc-space-2) var(--cc-space-5) var(--cc-space-4);
  font-family: var(--cc-font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  line-height: 1.05;
  font-weight: var(--cc-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--cc-tracking-tight);
  color: var(--cc-color-text);
  overflow-wrap: anywhere;         /* a long value wraps, never overflows */
  background-image: var(--cc-motif-grid);
}
.calc__result__breakdown {
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  padding: var(--cc-space-4) var(--cc-space-5);
  border-top: 1px solid var(--cc-color-border);
}
.stat__label {
  font-size: var(--cc-text-xs);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
  margin-bottom: 2px;
}
.stat__value {
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--cc-color-text);
  overflow-wrap: anywhere;
}

/* Assumptions panel, injected by calc-ux.js after a successful calculation. */
.calc__assumptions {
  padding: var(--cc-space-4) var(--cc-space-5);
  border-top: 1px solid var(--cc-color-border);
  background: var(--cc-color-surface-subtle);
}
.calc__assumptions__title {
  margin: 0 0 var(--cc-space-3);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
}
.calc__assumptions dl {
  display: grid;
  gap: var(--cc-space-2) var(--cc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  margin: 0 0 var(--cc-space-3);
}
.calc__assumptions dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--cc-space-3);
  padding-bottom: var(--cc-space-2);
  border-bottom: 1px solid var(--cc-color-border);
  font-size: var(--cc-text-sm);
}
.calc__assumptions dt { color: var(--cc-color-text-secondary); }
.calc__assumptions dd { margin: 0; font-weight: var(--cc-weight-semibold); font-variant-numeric: tabular-nums; }
.calc__assumptions__note { margin: 0; font-size: var(--cc-text-sm); color: var(--cc-color-text-muted); }

/* A contextual continuation that only makes sense once a result exists. */
.calc__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-2) var(--cc-space-4);
  padding: var(--cc-space-4) var(--cc-space-5);
  border-top: 1px solid var(--cc-color-border);
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-secondary);
}
.calc__next a {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  min-height: 44px;
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-brand-strong);
  text-decoration: none;
}
.calc__next a::after { content: "\2192"; transition: transform var(--cc-duration-base) var(--cc-ease-standard); }
.calc__next a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.calc__next a:hover::after { transform: translateX(3px); }

/* ==========================================================================
   6. SUPPORTING CONTENT COMPONENTS
   ========================================================================== */

/* Formula: monospace for the expression only, so operators line up. */
.cp-formula {
  display: block;
  padding: var(--cc-space-4);
  margin: 0 0 var(--cc-space-4);
  border: 1px solid var(--cc-color-border);
  border-left: 3px solid var(--cc-color-data);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface-subtle);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-sm);
  line-height: 1.8;
  overflow-x: auto;
}
.cp-formula b { color: var(--cc-color-data); font-weight: var(--cc-weight-medium); }
.cp-formula i { color: var(--cc-color-text-muted); font-style: normal; padding-inline: 0.2em; }

/* Worked example: a numbered walk-through with the arithmetic shown. */
.cp-example {
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  overflow: hidden;
  background: var(--cc-color-surface);
}
.cp-example__head {
  margin: 0;
  padding: var(--cc-space-3) var(--cc-space-4);
  background: var(--cc-color-surface-subtle);
  border-bottom: 1px solid var(--cc-color-border);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
}
.cp-example__body { padding: var(--cc-space-4); }
.cp-example ol { margin: 0; padding-left: var(--cc-space-5); }
.cp-example li { margin-bottom: var(--cc-space-3); line-height: 1.6; }
.cp-example li:last-child { margin-bottom: 0; }
.cp-example code {
  font-family: var(--cc-font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--cc-color-surface-subtle);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-sm);
}

/* Inputs-explained: what each field wants, and what happens if it is wrong. */
.cp-inputs { list-style: none; margin: 0; padding: 0; }
.cp-inputs li { padding: var(--cc-space-3) 0; border-top: 1px solid var(--cc-color-border); }
.cp-inputs li:first-child { border-top: 0; }
.cp-inputs b { display: block; font-size: 1rem; font-weight: var(--cc-weight-semibold); }
.cp-inputs span { display: block; font-size: 0.95rem; line-height: 1.55; color: var(--cc-color-text-secondary); margin-top: 2px; }

/* Numbered list of factors / mistakes. */
.cp-numbered { list-style: none; counter-reset: cpn; margin: 0; padding: 0; }
.cp-numbered li {
  counter-increment: cpn;
  position: relative;
  padding: var(--cc-space-3) 0 var(--cc-space-3) 46px;
  border-top: 1px solid var(--cc-color-border);
}
.cp-numbered li:first-child { border-top: 0; }
.cp-numbered li::before {
  content: counter(cpn, decimal-leading-zero);
  position: absolute;
  left: 0; top: var(--cc-space-3);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-sm);
  color: var(--cc-color-brand-strong);
}
.cp-numbered b { display: block; font-weight: var(--cc-weight-semibold); margin-bottom: 2px; }
.cp-numbered span { display: block; font-size: 0.95rem; line-height: 1.55; color: var(--cc-color-text-secondary); }

/* Semantic visual wrapper. */
.cp-figure { margin: 0 0 var(--cc-space-4); }
.cp-figure__frame {
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  padding: var(--cc-space-4);
}
.cp-figure img { display: block; width: 100%; height: auto; }
.cp-figure figcaption {
  margin-top: var(--cc-space-3);
  font-size: var(--cc-text-sm);
  line-height: 1.5;
  color: var(--cc-color-text-secondary);
}

/* Related guide + next tool: two deliberate continuations, not a link wall. */
.cp-continue {
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.cp-card {
  display: flex;
  flex-direction: column;
  padding: var(--cc-space-5);
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border);
  border-top: 3px solid var(--cc-color-sage);
  border-radius: var(--cc-radius-lg);
}
.cp-card--tool { border-top-color: var(--cc-color-brand); }
.cp-card__kind {
  margin: 0 0 var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
}
.cp-card h3 { font-family: var(--cc-font-body); font-size: var(--cc-text-xl); font-weight: var(--cc-weight-semibold); margin: 0 0 var(--cc-space-2); }
.cp-card p { margin: 0 0 var(--cc-space-4); font-size: 0.95rem; line-height: 1.55; color: var(--cc-color-text-secondary); }
.cp-card a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  min-height: 44px;
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-brand-strong);
  text-decoration: none;
}
.cp-card a::after { content: "\2192"; transition: transform var(--cc-duration-base) var(--cc-ease-standard); }
.cp-card a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cp-card a:hover::after { transform: translateX(3px); }

/* Sources: structure only. Every value comes from the page. */
.cp-sources { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.cp-sources li { padding: var(--cc-space-3) 0; border-top: 1px solid var(--cc-color-border); }
.cp-sources li:first-child { border-top: 0; }
.cp-sources b { font-weight: var(--cc-weight-semibold); }
.cp-sources span { color: var(--cc-color-text-muted); }

/* ==========================================================================
   7. ICONS  (Wave 1A language, CSS masks)
   ========================================================================== */

.cp-i {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.cp-i--sm { width: 15px; height: 15px; }
.cp-i--yarn   { -webkit-mask-image: var(--cp-ic-yarn);   mask-image: var(--cp-ic-yarn); }
.cp-i--gauge  { -webkit-mask-image: var(--cp-ic-gauge);  mask-image: var(--cp-ic-gauge); }
.cp-i--ruler  { -webkit-mask-image: var(--cp-ic-ruler);  mask-image: var(--cp-ic-ruler); }
.cp-i--method { -webkit-mask-image: var(--cp-ic-method); mask-image: var(--cp-ic-method); }
.cp-i--alert  { -webkit-mask-image: var(--cp-ic-alert);  mask-image: var(--cp-ic-alert); }
.cp-i--source { -webkit-mask-image: var(--cp-ic-source); mask-image: var(--cp-ic-source); }

:root {
  --cp-ic-yarn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M6 8c4 2 8 4 11 8M8 5c3 3 6 6 8 11'/%3E%3C/svg%3E");
  --cp-ic-gauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='1.5'/%3E%3Cpath d='M9 3.5v17M15 3.5v17M3.5 9h17M3.5 15h17'/%3E%3C/svg%3E");
  --cp-ic-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.5'/%3E%3Cpath d='M6 8v3M10 8v4M14 8v3M18 8v4'/%3E%3C/svg%3E");
  --cp-ic-method: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12'/%3E%3Cpath d='M10 4v6l-4.6 8A1.5 1.5 0 0 0 6.7 20h10.6a1.5 1.5 0 0 0 1.3-2L14 10V4'/%3E%3C/svg%3E");
  --cp-ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.9.9 0 01.9.95l-.2 3.5a.7.7 0 01-1.4 0l-.2-3.5A.9.9 0 018 4.2zm0 6.4a.95.95 0 110 1.9.95.95 0 010-1.9z'/%3E%3C/svg%3E");
  --cp-ic-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 20 7v5.5c0 4.3-3.2 7.3-8 8.5-4.8-1.2-8-4.2-8-8.5V7z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   8. MOTION + PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .calc__next a::after, .cp-card a::after,
  .field input, .field select { transition: none !important; }
}

@media print {
  .calc__actions, .calc__next, .cp-continue { display: none !important; }
  .calc, .calc__result, .cp-example, .cp-figure__frame {
    border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid;
  }
  .calc__result__big { background-image: none !important; }
  .calc__result[hidden] { display: none !important; }
}

/* Result commentary written by the calculator itself. Deliberately NOT
   .calc__assumptions: calc-ux.js claims that class inside .calc__result and
   overwrites its innerHTML with the input echo, which would erase this. */
.calc__readout{
  margin:var(--cc-space-4) 0 0;
  padding-top:var(--cc-space-4);
  border-top:1px solid var(--cc-color-border);
  font-size:var(--cc-fs-sm,0.9375rem);
  line-height:1.55;
  color:var(--cc-color-ink-soft,#4A4C48);
}
.calc__readout:empty{display:none;padding:0;border:0;margin:0;}
.calc__readout + .calc__readout{border-top:0;padding-top:var(--cc-space-2);margin-top:var(--cc-space-2);}

/* Substitution compatibility rows. Status is carried by the text flag first;
   colour and the left rule are reinforcement, never the only signal. */
.subst-checks{margin:var(--cc-space-3) 0 0;display:grid;gap:var(--cc-space-3);}
.subst-checks__row{
  padding:var(--cc-space-3) var(--cc-space-4);
  border-left:3px solid var(--cc-color-border-control);
  background:var(--cc-color-surface,#FFFFFF);
  border-radius:0 var(--cc-radius-sm,6px) var(--cc-radius-sm,6px) 0;
}
.subst-checks__row dt{font-weight:600;color:var(--cc-color-ink,#20211F);margin:0 0 .25rem;}
.subst-checks__row dd{margin:0;font-size:var(--cc-fs-sm,0.9375rem);line-height:1.5;color:var(--cc-color-ink-soft,#4A4C48);}
.subst-checks__flag{
  display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  padding:.15rem .4rem;border-radius:3px;margin-right:.5rem;vertical-align:.05em;
  background:var(--cc-color-border,#DDD9D2);color:var(--cc-color-ink,#20211F);
}
.subst-checks__row--match{border-left-color:#3D6B4B;}
.subst-checks__row--match .subst-checks__flag{background:#E7EFE8;color:#2F5239;}
.subst-checks__row--caution{border-left-color:#8C6D3F;}
.subst-checks__row--caution .subst-checks__flag{background:#F4EDE0;color:#6B5230;}
.subst-checks__row--mismatch{border-left-color:#A03826;}
.subst-checks__row--mismatch .subst-checks__flag{background:#FAEAE6;color:#8A3020;}
.subst-checks__row--unknown{border-left-color:#8F8879;border-left-style:dashed;}
@media (max-width:600px){
  .subst-checks__row{padding:var(--cc-space-3);}
}

/* Temperature-band editor: a compact grid of name / range / colour per band. */
.tb-bands{display:grid;gap:var(--cc-space-2);margin-top:var(--cc-space-3);}
.tb-band{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto minmax(0,1fr) 3rem;
  gap:var(--cc-space-2);align-items:center;
}
.tb-band input[type=text],.tb-band input[type=number]{width:100%;min-width:0;}
.tb-band input[type=color]{
  width:100%;height:2.5rem;padding:2px;border:1px solid var(--cc-color-border-control,#8F8879);
  border-radius:var(--cc-radius-sm,6px);background:none;cursor:pointer;
}
.tb-band > span{color:var(--cc-color-ink-soft,#4A4C48);font-size:.875rem;text-align:center;}
.tb-band label{margin:0;}
@media (max-width:600px){
  .tb-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 3rem;grid-template-areas:"n n c" "lo hi c";}
  .tb-band > label:nth-of-type(1){grid-area:n;}
  .tb-band > label:nth-of-type(2){grid-area:lo;}
  .tb-band > label:nth-of-type(3){grid-area:hi;}
  .tb-band > label:nth-of-type(4){grid-area:c;}
  .tb-band > span{display:none;}
  .tb-band input[type=color]{height:100%;min-height:2.5rem;}
}
#tbPreviewWrap svg{display:block;width:100%;height:auto;border-radius:var(--cc-radius-sm,6px);}


/* ---------------------------------------------------------------------------
   Gauge troubleshooter (tools/crochet-gauge-troubleshooter.html)

   A diagnostic form rather than a numeric one: checkbox rows for "what was
   different", and a two-column result of checks and experiments. Nothing here
   carries meaning by colour alone — the result is read as text.
   --------------------------------------------------------------------------- */
.calc__intro {
  margin: -0.25rem 0 1.25rem;
  color: var(--ink-soft, #4A4C48);
  font-size: 0.95rem;
  line-height: 1.55;
}

.gt-checks {
  display: grid;
  gap: 0.25rem;
}

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  /* 44px minimum target height for the row, per the site's mobile rule */
  min-height: 44px;
  padding: 0.5rem 0.25rem;
}

.field--check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0.15rem 0 0;
  accent-color: var(--accent, #A45740);
}

.field--check label {
  margin: 0;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.calc__result__title {
  margin: 0.35rem 0 0.6rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.gt-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.1rem 0 0.5rem;
}

.gt-lists__h {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft, #6B6D68);
}

.gt-lists ul {
  margin: 0;
  padding-left: 1.15rem;
}

.gt-lists li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .gt-lists { grid-template-columns: 1fr; gap: 1.1rem; }
}