/* calcworld.net theme: a friendly tutor's worksheet.
   Indigo for structure, a warm yellow highlighter for the answer, white paper on a warm desk.
   Inter for text; formulas are typeset by KaTeX at build time. */
:root {
  --c-bg: #f4f2ec;
  --c-surface: #ffffff;
  --c-surface-2: #f3f2fb;
  --c-field: #ffffff;
  --c-text: #1e1b3a;
  --c-muted: #5a5873;
  --c-border: #e2e0ee;
  --c-border-strong: #a9a6c6;
  --c-primary: #4338ca;
  --c-primary-hover: #3730a3;
  --c-on-primary: #ffffff;
  --c-primary-soft: #eceefe;
  --c-accent: #4338ca;
  --c-link: #4338ca;
  --c-focus: #4f46e5;
  --c-success: #136c43;
  --c-success-bg: #e3f4ea;
  --c-danger: #b3261e;
  --c-danger-bg: #fdecea;
  --c-warn: #7a5200;
  --c-warn-bg: #fff4d1;
  --c-info: #3730a3;
  --c-info-bg: #eceefe;
  --c-ink: #1e1b4b;
  --c-on-ink: #ffffff;

  /* The answer is highlighted the way a student would mark it on paper. */
  --c-highlight: #ffe98a;
  --c-result-bg: #fff3bf;
  --c-result-text: #1e1b3a;
  --c-mark: #ffe98a;

  --c-header-bg: #ffffff;
  --c-header-text: #1e1b3a;
  --c-header-border: #e2e0ee;
  --c-nav-hover: #f3f2fb;
  --c-nav-current: #4338ca;
  --c-footer-bg: #1e1b4b;
  --c-footer-text: #eceafb;
  --c-footer-muted: #b9b6e3;

  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-num: var(--font-sans);
  --radius: 10px;
  --radius-lg: 16px;
  --h1-weight: 760;
  --h1-tracking: -0.025em;
  --w-prose: 44rem;
}
body { font-feature-settings: "cv05", "cv08", "ss03"; }
.k-brand__mark { background: var(--c-primary); color: var(--c-highlight); }
.k-footer { border-top: 0; }
.k-footer__legal { border-top-color: rgb(255 255 255 / 0.16); }
.k-tile__icon { background: var(--c-primary-soft); color: var(--c-primary); }
.k-trustline li::before { color: var(--c-primary); }

/* ---------- Paper: text pages sit on a white sheet ---------- */
.k-page--tool, .k-page--guide, .k-page--plain {
  max-width: calc(var(--w-prose) + 2 * clamp(1rem, 4vw, 2.75rem));
  padding: clamp(1rem, 4vw, 2.75rem);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgb(30 27 58 / 0.04), 0 8px 24px rgb(30 27 58 / 0.05);
}
@media (max-width: 40rem) {
  /* Full-bleed sheet on phones: every pixel of width goes to the tool. */
  .k-main { padding-top: 0; }
  .k-page--tool, .k-page--guide, .k-page--plain { margin: 0 calc(var(--gap) * -1); padding: 1rem var(--gap) 1.5rem; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .k-page--tool .k-lede { font-size: 1rem; margin-bottom: 0.4rem; }
  .k-page--tool h1 { margin-bottom: 0.3rem; }
  .k-page--tool .k-page__head { margin-bottom: 0.6rem; }
}
.k-prose h2 { padding-top: 0.25rem; }
.k-formula.cw-formula { font-family: inherit; font-size: 1.05rem; padding: 0.75rem 1rem; background: var(--c-surface-2); border-left: 4px solid var(--c-primary); border-radius: 0 var(--radius) var(--radius) 0; overflow-x: auto; overflow-y: hidden; }
.cw-formula .katex-display { margin: 0.35rem 0; }
.katex { font-size: 1.12em; }

/* ---------- Step-by-step calculators ---------- */
.tool.cw { margin-top: 0.75rem; background: var(--c-surface-2); border-color: var(--c-border); box-shadow: none; }
.cw-form { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem 0.9rem; align-items: start; }
.cw-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cw-form legend.k-label { padding: 0; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.95rem; }
.cw-form textarea { min-height: 4.5rem; font-variant-numeric: tabular-nums; }
.cw-form input, .cw-form select { width: 100%; font-variant-numeric: tabular-nums; }
.cw-form__intro { margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: 0.01em; }
.cw-form--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cw-form--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw-group__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cw-group .k-field > label { font-weight: 500; color: var(--c-muted); }
.cw-form--four input, .cw-form--three input { padding-left: 0.55rem !important; padding-right: 0.4rem !important; }
.cw-seg .k-segmented { align-self: flex-start; flex-wrap: wrap; background: var(--c-surface); border: 1px solid var(--c-border-strong); }
.cw-seg .k-segmented input:checked + span { background: var(--c-primary); color: var(--c-on-primary); box-shadow: none; }
.cw-seg .k-segmented span { min-width: 2.6rem; text-align: center; }

/* Fraction input: whole number, then numerator over denominator */
.cw-form--fractions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem 1.25rem; }
.cw-fracin__row { display: flex; align-items: center; gap: 0.6rem; }
.cw-fracin__part { display: flex; flex-direction: column; gap: 0.15rem; }
.cw-fracin__part label { font-size: 0.78rem; font-weight: 500; color: var(--c-muted); }
.cw-fracin__part input { width: 4.6rem; text-align: center; }
.cw-fracin__stack { display: flex; flex-direction: column; gap: 0.3rem; }
.cw-fracin__stack .cw-fracin__part { flex-direction: row; align-items: center; gap: 0.45rem; }
.cw-fracin__stack .cw-fracin__part label { order: 2; }
.cw-fracin__part--n input { border-bottom: 3px solid var(--c-text) !important; }

/* The answer: big, highlighted, nothing between it and the inputs */
.cw-answer { margin-top: 1rem; border: 1px solid #f1dc7a; }
.cw-answer.is-waiting { background: var(--c-surface); border-color: var(--c-border-strong); }
.cw-answer .k-result__label { color: #5d4a00; }
.cw-answer .k-result__value { font-size: clamp(1.55rem, 1.15rem + 2.3vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cw-answer .k-result__note { color: #4b4526; }
.cw-answer__msg { margin: 0.2rem 0 0; font-size: 1.1rem; font-weight: 600; }
.cw-more { display: grid; gap: 0.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px solid rgb(93 74 0 / 0.22); }
.cw-more dt { font-size: 0.82rem; color: #5d4a00; }
.cw-more dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.cw-actions { margin-top: 0.75rem; }
.cw-plotwrap { margin-top: 0.9rem; padding: 0.5rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.cw-plotwrap:empty { display: none; }
.cw-plot { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.cw-plot__frame { fill: #fbfbfe; stroke: var(--c-border); }
.cw-plot__axis { stroke: var(--c-border-strong); stroke-width: 1; }
.cw-plot__line { fill: none; stroke: var(--c-primary); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.cw-plot__dot { fill: var(--c-primary); stroke: #ffffff; stroke-width: 1.5; }
.cw-plot__dot--alt { fill: #b45309; }
.cw-plot__label, .cw-plot__tick { font-family: var(--font-sans); font-size: 10px; fill: var(--c-muted); }
.cw-plot__label { font-size: 10.5px; fill: var(--c-text); font-weight: 600; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; }

/* Steps: "Here's how we got it" */
.cw-steps { margin-top: 1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.cw-steps > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; padding: 0.8rem 1rem; cursor: pointer; font-weight: 700; color: var(--c-primary); }
.cw-steps > summary:hover { background: var(--c-primary-soft); border-radius: var(--radius); }
.cw-steps[open] > summary { border-bottom: 1px solid var(--c-border); border-radius: var(--radius) var(--radius) 0 0; }
.cw-steps[open] .cw-steps__label::before { content: "Hide steps"; }
.cw-steps:not([open]) .cw-steps__label::before { content: "Show steps"; }
.cw-steps__label { font-size: 0; }
.cw-steps__label::before { font-size: 1.0625rem; }
.cw-steps__tag { font-size: 0.9rem; font-weight: 500; color: var(--c-muted); }
.cw-steps > div { padding: 1rem 1rem 0.25rem; }
.cw-steplist { margin-bottom: 0; }
.cw-step__title { margin: 0 0 0.3rem; font-weight: 650; }
.cw-step__math { margin: 0 0 0.3rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; line-height: 1.9; overflow-wrap: anywhere; }
.cw-step__note { margin: 0.1rem 0 0; font-size: 0.93rem; color: var(--c-muted); }
.cw-steplist .k-table-wrap { margin: 0.4rem 0 0.5rem; }
.cw-table { width: 100%; min-width: 0 !important; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.cw-table th, .cw-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--c-border); text-align: right; white-space: nowrap; }
.cw-table thead th { font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: var(--c-muted); border-bottom: 2px solid var(--c-border-strong); }
.cw-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--c-border-strong); }
.cw-tableau { display: inline-block; max-width: 100%; margin: 0.5rem 0; padding: 0.75rem 1rem; overflow-x: auto; font-family: var(--font-mono); font-size: 1rem; line-height: 1.3; background: #fbfbfe; border: 1px solid var(--c-border); border-radius: var(--radius); }

/* Stacked fractions and repeating decimals in answers and steps */
.cw-frac { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.12em; vertical-align: middle; font-size: 0.88em; line-height: 1.15; text-align: center; white-space: nowrap; }
.cw-frac > span:first-child { padding: 0 0.3em 0.08em; border-bottom: 0.09em solid currentColor; }
.cw-frac > span:last-child { padding: 0.08em 0.3em 0; }
.cw-rep { text-decoration: overline; text-decoration-thickness: 0.08em; }
.k-steps mark, .cw-worked__value { background: var(--c-mark); color: inherit; padding: 0.05em 0.3em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cw-step__math sup, .k-result__value sup { font-size: 0.68em; }

/* Worked example and practice question in the article */
.cw-worked, .cw-practice { margin: 0 0 1rem; padding: 1rem 1.1rem 0.6rem; background: var(--c-surface-2); border-radius: var(--radius); }
.cw-worked__answer { margin: 0.25rem 0 0.5rem; font-size: 1.1rem; }
.cw-worked__link { margin: 0 0 0.4rem; font-size: 0.93rem; }
.cw-practice { border-left: 4px solid var(--c-highlight); background: #fffbea; }
.cw-practice__q { margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 600; }
.cw-practice summary { padding: 0.35rem 0; cursor: pointer; font-weight: 650; color: var(--c-link); }
.cw-practice details[open] summary { margin-bottom: 0.6rem; }

/* ---------- Home and hubs ---------- */
.cw-hero { position: relative; }
.cw-hero h1 mark { background: linear-gradient(transparent 58%, var(--c-highlight) 58%, var(--c-highlight) 92%, transparent 92%); color: inherit; }
.cw-clusters { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0 0 1rem; padding: 0; list-style: none; }
.cw-cluster { height: 100%; padding: 1.1rem 1.2rem; background: var(--c-surface); border: 1px solid var(--c-border); border-top: 4px solid var(--c-primary); border-radius: var(--radius); }
.cw-cluster h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.cw-cluster ul { margin: 0; padding: 0; list-style: none; }
.cw-cluster li { padding: 0.2rem 0; }
.cw-steps-badge { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--c-highlight); color: #3d3100; font-size: 0.72rem; font-weight: 700; vertical-align: 0.1em; white-space: nowrap; }
.cw-also { margin-top: 1.5rem; color: var(--c-muted); }
.k-hub__intro { max-width: var(--w-prose); }

/* ---------- Older calculators (inline markup from before the rebuild) ---------- */
.tool:not(.cw) > div { margin-bottom: 1rem; }
.tool:not(.cw) > div:last-child { margin-bottom: 0; }
.tool:not(.cw) label { display: block; margin-bottom: 0.3rem; }
.tool:not(.cw) label:has(> input[type="radio"]), .tool:not(.cw) label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; font-weight: 500; cursor: pointer; }
.tool:not(.cw) input[type="radio"] + label, .tool:not(.cw) input[type="checkbox"] + label { display: inline-block; margin-left: 0.35rem; font-weight: 500; }
.tool:not(.cw) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.tool:not(.cw) select, .tool:not(.cw) textarea { width: 100%; max-width: 26rem; margin: 0 0.4rem 0.6rem 0; }
.tool:not(.cw) button { margin: 0.2rem 0.4rem 0.4rem 0; }
.tool:not(.cw) fieldset { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--c-border-strong); border-radius: var(--radius); }
.tool:not(.cw) legend { padding: 0 0.4rem; font-weight: 600; }
.tool:not(.cw) canvas, .tool:not(.cw) svg { max-width: 100%; height: auto; }
.tool:not(.cw) pre { overflow-x: auto; }
.cw-novelty { display: inline-block; margin: 0 0 0.75rem; }

/* Keep the step-by-step forms on their own grid whatever defaults the kit applies to bare
   label + field pairs inside .tool (those defaults are meant for the older calculators). */
.tool.cw .cw-form .k-field > label { display: block; margin: 0; }
.tool.cw .cw-form .k-field > input, .tool.cw .cw-form .k-field > select, .tool.cw .cw-form .k-field > textarea { width: 100% !important; }

/* Wordmark: the second half of the name carries the brand colour */
.k-brand__name span { color: var(--c-primary); }

/* ---------- Home hero example ---------- */
.cw-hero-card__problem { margin: 0 0 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--c-border); font-size: 1.5rem; font-weight: 750; letter-spacing: -0.01em; }
.cw-hero-card .k-steps { margin-bottom: 0.4rem; }
.cw-hero-card .k-steps > li { padding-bottom: 0.7rem; font-weight: 500; }
.cw-hero-card__answer { margin: 0; padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--c-highlight); color: #1e1b4b; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }