/* ============================================================================
   CrochetCalc Design System — Wave 1A
   ============================================================================

   A premium digital crochet workbench: handmade craft x technical precision.

   NAMESPACE
   ---------
   Every token and class is prefixed `cc-`. This is deliberate, not decoration.
   main.css already defines --color-border, --color-border-strong, --color-bg
   and --color-error with DIFFERENT values from the ones below, and both
   stylesheets will load together during migration. Unprefixed names would
   silently reassign live variables and could break the 57 pages currently in
   production. The prefix guarantees this file cannot affect any existing page
   until a component is deliberately adopted.

   COLOUR IS MEASURED, NOT ASSUMED
   -------------------------------
   The brief's terracotta #B86248 scores 4.09:1 on the canvas and 4.30:1 behind
   white text - both below the 4.5:1 AA threshold. Sage #72806E is the same
   story at 3.97:1. Rather than ship inaccessible text, the brand hues are kept
   for fills and large/decorative use, where 3:1 applies and they pass, and
   text-safe siblings carry anything readable. Every value below was computed,
   and the ratios are recorded beside each token.

   THE TWO MOTIFS
   --------------
   Both are pure CSS, cost zero bytes of image payload, and mean something:
     - the tick rule    a measuring-tape edge, used where content is divided
     - the swatch grid  counted graph paper, used behind calculated results
   No decorative shapes, gradients or blobs appear anywhere in this file.

   FONTS
   -----
   Reuses the three families the site already loads (Fraunces, DM Sans,
   JetBrains Mono). Wave 1A adds no new font request and no new weight.
   ========================================================================= */

/* ==========================================================================
   0. SELF-SUFFICIENCY
   The system must not depend on main.css being present. It previously did:
   with only this file loaded, .cc-input and .cc-accordion__trigger are
   width:100% plus padding plus border, which pushed the document 34px past
   the viewport at every width from 360 to 1024. main.css happens to declare
   the identical rule, so this is a no-op when both sheets load and a fix when
   this one loads alone.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Colour: raw brand palette -----------------------------------------
     Identity hues. Safe for fills, borders and large text (>=3:1) but NOT for
     body-size text on light surfaces. Use the -strong siblings for that. */
  --cc-palette-terracotta: #B86248;   /* 4.09:1 on canvas - fills only */
  --cc-palette-sage:       #72806E;   /* 3.97:1 on canvas - fills only */
  --cc-palette-data:       #496A76;   /* 5.53:1 on canvas - text safe    */
  --cc-palette-charcoal:   #20211F;   /* 15.36:1 on canvas               */

  /* --- Colour: surfaces --------------------------------------------------- */
  --cc-color-canvas:           #FAF9F6;  /* page background               */
  --cc-color-surface:          #FFFFFF;  /* cards, inputs                 */
  --cc-color-surface-subtle:   #F3F1EA;  /* table stripes, inset panels   */
  --cc-color-surface-elevated: #FFFFFF;  /* raised, pairs with shadow-sm  */
  --cc-color-surface-inverse:  #20211F;  /* dark blocks, code             */

  /* --- Colour: text (all verified >=4.5:1 on canvas, surface and subtle) -- */
  --cc-color-text:           #20211F;  /* 15.36 / 16.17 / 14.31 */
  --cc-color-text-secondary: #4E4E49;  /*  7.95 /  8.37 /  7.40 */
  --cc-color-text-muted:     #6A6A63;  /*  5.17 /  5.45 /  4.82 */
  --cc-color-text-inverse:   #FAF9F6;  /* on surface-inverse: 14.5 */

  /* --- Colour: borders ---------------------------------------------------
     `border` is DECORATIVE ONLY at 1.34:1 - dividers, table rules, card
     edges. Anything that identifies a control (input, select, checkbox,
     secondary button) must use border-control, which clears 3:1 on all three
     light surfaces as WCAG 1.4.11 requires. */
  --cc-color-border:         #DDD9D2;  /* 1.34:1 - decorative separation  */
  --cc-color-border-strong:  #C4BEB3;  /* heavier decorative rule         */
  --cc-color-border-control: #8F8879;  /* 3.34 / 3.52 / 3.11 - controls   */

  /* --- Colour: brand ------------------------------------------------------ */
  --cc-color-brand:        #B86248;  /* fill / identity, non-text         */
  --cc-color-brand-strong: #9E4F38;  /* 5.50:1 - link + button text       */
  --cc-color-brand-hover:  #8A422C;  /* 6.89:1                            */
  --cc-color-brand-soft:   #F7ECE7;  /* tint, charcoal on it = 13.94:1    */

  /* --- Colour: supporting accents ----------------------------------------- */
  --cc-color-sage:        #72806E;
  --cc-color-sage-strong: #5F6C5C;   /* 5.27:1 */
  --cc-color-sage-soft:   #EBEEE9;
  --cc-color-data:        #496A76;   /* 5.53:1 - technical / measurement  */
  --cc-color-data-soft:   #E8EEF0;

  /* --- Colour: status ----------------------------------------------------- */
  --cc-color-success:      #3D6B4B;  /* 5.86:1 */
  --cc-color-success-soft: #E7EFE8;
  --cc-color-warning:      #7A5314;  /* 6.49:1 */
  --cc-color-warning-soft: #FBF0DC;
  --cc-color-danger:       #A03826;  /* 6.46:1 */
  --cc-color-danger-soft:  #FAEAE6;

  /* --- Colour: focus ------------------------------------------------------
     Two rings. The inner light ring separates the indicator from dark fills
     (5.5-15.4:1); the outer dark ring separates it from light pages
     (14.3-16.2:1). One colour alone cannot clear 3:1 on both, so the pair is
     the system - never override just one half. */
  --cc-color-focus:       #20211F;
  --cc-color-focus-inner: #FAF9F6;

  /* --- Typography: families (already loaded site-wide) --------------------- */
  --cc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cc-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Helvetica, Arial, sans-serif;
  --cc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* --- Typography: scale --------------------------------------------------
     Body sits at 17px, inside the 16-18px the brief asks for. Only the two
     largest steps are fluid, and both are capped well short of the 70-100px
     display sizes the brief rules out. */
  --cc-text-xs:   0.75rem;     /* 12px - eyebrows, table meta   */
  --cc-text-sm:   0.875rem;    /* 14px - labels, captions       */
  --cc-text-base: 1.0625rem;   /* 17px - body                   */
  --cc-text-lg:   1.1875rem;   /* 19px - lede                   */
  --cc-text-xl:   1.375rem;    /* 22px - h4 / card title        */
  --cc-text-2xl:  1.6875rem;   /* 27px - h3                     */
  --cc-text-3xl:  clamp(1.875rem, 1.66rem + 0.95vw, 2.25rem);   /* 30-36 h2 */
  --cc-text-4xl:  clamp(2.25rem, 1.90rem + 1.55vw, 2.875rem);   /* 36-46 h1 */

  --cc-line-tight:   1.15;
  --cc-line-heading: 1.25;
  --cc-line-body:    1.65;

  --cc-weight-regular:  400;
  --cc-weight-medium:   500;
  --cc-weight-semibold: 600;
  --cc-weight-bold:     700;

  --cc-tracking-tight: -0.015em;
  --cc-tracking-wide:   0.08em;   /* eyebrows / small caps only */

  /* --- Spacing (4 8 12 16 24 32 48 64 96) --------------------------------- */
  --cc-space-1: 0.25rem;   /*  4px */
  --cc-space-2: 0.5rem;    /*  8px */
  --cc-space-3: 0.75rem;   /* 12px */
  --cc-space-4: 1rem;      /* 16px */
  --cc-space-5: 1.5rem;    /* 24px */
  --cc-space-6: 2rem;      /* 32px */
  --cc-space-7: 3rem;      /* 48px */
  --cc-space-8: 4rem;      /* 64px */
  --cc-space-9: 6rem;      /* 96px */

  /* --- Layout widths ------------------------------------------------------ */
  --cc-container-wide:    1280px;
  --cc-container-content: 1000px;
  --cc-container-reading:  740px;  /* ~70-75 characters at 17px */
  --cc-container-narrow:   560px;
  --cc-gutter: var(--cc-space-5);

  /* --- Radius: restrained. Nothing is a bubble. --------------------------- */
  --cc-radius-sm: 3px;
  --cc-radius-md: 6px;
  --cc-radius-lg: 10px;
  --cc-radius-pill: 999px;   /* badges and chips only */

  /* --- Shadow: two, both barely there. Separation comes from spacing,
         rule weight and surface tone instead. ------------------------------ */
  --cc-shadow-xs: 0 1px 2px rgba(32, 33, 31, 0.04);
  --cc-shadow-sm: 0 1px 3px rgba(32, 33, 31, 0.06),
                  0 4px 12px -6px rgba(32, 33, 31, 0.08);

  /* --- Motion ------------------------------------------------------------- */
  --cc-duration-fast: 120ms;
  --cc-duration-base: 180ms;
  --cc-duration-slow: 260ms;
  --cc-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --cc-ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* --- Brand motifs (pure CSS, no image payload) --------------------------
     Tick rule: a measuring-tape edge. Ticks every 8px, one taller every 4th,
     drawn with two gradients rather than an asset. */
  --cc-motif-tick: repeating-linear-gradient(
      to right,
      var(--cc-color-border-control) 0 1px,
      transparent 1px 8px);
  /* Swatch grid: counted graph paper, sits behind calculated numbers. */
  --cc-motif-grid:
      linear-gradient(to right, rgba(32,33,31,0.045) 1px, transparent 1px) 0 0 / 8px 8px,
      linear-gradient(to bottom, rgba(32,33,31,0.045) 1px, transparent 1px) 0 0 / 8px 8px;

  /* --- Focus geometry ----------------------------------------------------- */
  --cc-focus-inner-width: 2px;
  --cc-focus-outer-width: 2px;
  --cc-focus-offset: 2px;

  /* --- Controls ----------------------------------------------------------- */
  --cc-control-height: 44px;   /* minimum touch target, everywhere */
  --cc-control-padding-x: var(--cc-space-3);
}

/* ==========================================================================
   2. FOCUS SYSTEM
   One treatment, every interactive element. Never removed, only replaced.
   The inner ring is drawn with box-shadow so it hugs the control; the outer
   ring is a real outline so it survives overflow and forced-colors mode.
   ========================================================================== */

.cc-focusable:focus-visible,
.cc-btn:focus-visible,
.cc-link:focus-visible,
.cc-input:focus-visible,
.cc-select:focus-visible,
.cc-textarea:focus-visible,
.cc-choice__input:focus-visible + .cc-choice__box,
.cc-accordion__trigger:focus-visible,
.cc-breadcrumb a:focus-visible,
.cc-toc a:focus-visible,
.cc-figure__scroll: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-radius: var(--cc-radius-sm);
}

/* Windows High Contrast / forced-colors: let the OS draw the indicator. */
@media (forced-colors: active) {
  .cc-focusable:focus-visible,
  .cc-btn:focus-visible,
  .cc-link:focus-visible,
  .cc-input:focus-visible,
  .cc-select:focus-visible,
  .cc-accordion__trigger:focus-visible {
    outline: 3px solid CanvasText;
    box-shadow: none;
  }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.cc-container {
  width: 100%;
  max-width: var(--cc-container-content);
  margin-inline: auto;
  padding-inline: var(--cc-gutter);
}
.cc-container--wide    { max-width: var(--cc-container-wide); }
.cc-container--reading { max-width: var(--cc-container-reading); }
.cc-container--narrow  { max-width: var(--cc-container-narrow); }

.cc-section { padding-block: var(--cc-space-7); }
.cc-section--tight { padding-block: var(--cc-space-6); }
.cc-section--loose { padding-block: var(--cc-space-8); }

/* Vertical rhythm without margin collapse guesswork. */
.cc-stack { display: flex; flex-direction: column; gap: var(--cc-space-4); }
.cc-stack--xs { gap: var(--cc-space-2); }
.cc-stack--sm { gap: var(--cc-space-3); }
.cc-stack--lg { gap: var(--cc-space-5); }
.cc-stack--xl { gap: var(--cc-space-6); }

/* A row that wraps instead of overflowing - the fix for squeezed toolbars. */
.cc-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
  align-items: center;
}
.cc-cluster--between { justify-content: space-between; }
.cc-cluster--end     { justify-content: flex-end; }

/* Auto-fit grid: no breakpoint needed, columns fold when they run out of room. */
.cc-grid {
  display: grid;
  gap: var(--cc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.cc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.cc-grid--fixed-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .cc-grid--fixed-2 { grid-template-columns: 1fr; } }

/* Sidebar layout that collapses on its own content width. */
.cc-sidebar-layout {
  display: grid;
  gap: var(--cc-space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .cc-sidebar-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ==========================================================================
   4. THE TICK RULE  (brand motif, functional divider)
   ========================================================================== */

.cc-rule {
  border: 0;
  height: 4px;
  margin: 0;
  background-image: var(--cc-motif-tick);
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: 8px 4px;
  opacity: 0.55;
}
.cc-rule--plain {
  height: 1px;
  background: var(--cc-color-border);
  opacity: 1;
}

/* ==========================================================================
   5. TYPOGRAPHY / PROSE
   Applied by wrapping content in .cc-prose so it cannot leak into live pages.
   ========================================================================== */

.cc-prose {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);
  line-height: var(--cc-line-body);
  color: var(--cc-color-text);
  max-width: var(--cc-container-reading);
}
.cc-prose--full { max-width: none; }

.cc-h1, .cc-prose h1 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-4xl);
  line-height: var(--cc-line-tight);
  letter-spacing: var(--cc-tracking-tight);
  font-weight: var(--cc-weight-bold);
  color: var(--cc-color-text);
  margin: 0 0 var(--cc-space-4);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cc-h2, .cc-prose h2 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-3xl);
  line-height: var(--cc-line-heading);
  letter-spacing: var(--cc-tracking-tight);
  font-weight: var(--cc-weight-semibold);
  margin: var(--cc-space-7) 0 var(--cc-space-3);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cc-h3, .cc-prose h3 {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-2xl);
  line-height: var(--cc-line-heading);
  font-weight: var(--cc-weight-semibold);
  margin: var(--cc-space-6) 0 var(--cc-space-3);
  overflow-wrap: break-word;
}
.cc-h4, .cc-prose h4 {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xl);
  line-height: var(--cc-line-heading);
  font-weight: var(--cc-weight-semibold);
  margin: var(--cc-space-5) 0 var(--cc-space-2);
  overflow-wrap: break-word;
}
.cc-prose > :first-child { margin-top: 0; }
.cc-prose p { margin: 0 0 var(--cc-space-4); }
.cc-prose strong { font-weight: var(--cc-weight-semibold); }
.cc-prose em { font-style: italic; }

.cc-lede {
  font-size: var(--cc-text-lg);
  line-height: 1.55;
  color: var(--cc-color-text-secondary);
  margin: 0 0 var(--cc-space-5);
}

.cc-eyebrow {
  font-family: var(--cc-font-body);
  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);
  margin: 0 0 var(--cc-space-2);
}

.cc-prose ul, .cc-prose ol { margin: 0 0 var(--cc-space-4); padding-left: var(--cc-space-5); }
.cc-prose li { margin-bottom: var(--cc-space-2); }
.cc-prose li::marker { color: var(--cc-color-text-muted); }

.cc-prose blockquote {
  margin: var(--cc-space-5) 0;
  padding: var(--cc-space-2) 0 var(--cc-space-2) var(--cc-space-5);
  border-left: 3px solid var(--cc-color-brand);
  color: var(--cc-color-text-secondary);
  font-style: italic;
}

.cc-caption {
  font-size: var(--cc-text-sm);
  line-height: 1.5;
  color: var(--cc-color-text-muted);
}

/* ==========================================================================
   6. LINKS
   Four distinct roles. Never colour alone - each carries an underline, a
   weight change or a marker, so the distinction survives greyscale.
   ========================================================================== */

/* Inline content link: underlined by default, thickens on hover. */
.cc-link {
  color: var(--cc-color-brand-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--cc-color-brand-strong) 45%, transparent);
  transition: text-decoration-color var(--cc-duration-fast) var(--cc-ease-standard),
              color var(--cc-duration-fast) var(--cc-ease-standard);
}
.cc-link:hover {
  color: var(--cc-color-brand-hover);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* Navigation link: no underline at rest, underline on hover, weight for state.
   A nav link is not "inline in a sentence", so WCAG 2.2 target-size exception
   does not cover it - it carries its own 44px target. */
.cc-link--nav {
  display: inline-flex;
  align-items: center;
  min-height: var(--cc-control-height);
  color: var(--cc-color-text);
  text-decoration: none;
  font-weight: var(--cc-weight-medium);
}
.cc-link--nav:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cc-link--nav[aria-current="page"] {
  font-weight: var(--cc-weight-semibold);
  box-shadow: inset 0 -2px 0 var(--cc-color-brand);
}

/* Utility/action link: carries a moving arrow, so it reads as an action. */
.cc-link--action {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  color: var(--cc-color-brand-strong);
  text-decoration: none;
  font-weight: var(--cc-weight-medium);
  min-height: 44px;
}
.cc-link--action::after {
  content: "\2192";
  transition: transform var(--cc-duration-base) var(--cc-ease-standard);
}
.cc-link--action:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cc-link--action:hover::after { transform: translateX(3px); }

/* Related-resource link: a full-width row, the whole thing is the target.
   Wraps rather than overflowing - at 200% text scaling the title, badge and
   meta no longer fit on one line and pushed the page sideways. */
.cc-link--resource {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3) 0;
  border-bottom: 1px solid var(--cc-color-border);
  color: var(--cc-color-text);
  text-decoration: none;
}
.cc-link--resource:hover .cc-link__title { text-decoration: underline; text-decoration-thickness: 2px; }
.cc-link__title { font-weight: var(--cc-weight-medium); }
.cc-link__meta { font-size: var(--cc-text-sm); color: var(--cc-color-text-muted); margin-left: auto; }

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  min-height: var(--cc-control-height);
  padding: var(--cc-space-2) var(--cc-space-5);
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);
  font-weight: var(--cc-weight-medium);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-md);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--cc-duration-fast) var(--cc-ease-standard),
              border-color var(--cc-duration-fast) var(--cc-ease-standard),
              color var(--cc-duration-fast) var(--cc-ease-standard);
}

.cc-btn--primary {
  background: var(--cc-color-brand-strong);   /* white on it: 5.79:1 */
  color: #FFFFFF;
  border-color: var(--cc-color-brand-strong);
}
.cc-btn--primary:hover:not(:disabled) {
  background: var(--cc-color-brand-hover);
  border-color: var(--cc-color-brand-hover);
}
.cc-btn--primary:active:not(:disabled) { background: #7A3925; }

.cc-btn--secondary {
  background: var(--cc-color-surface);
  color: var(--cc-color-text);
  border-color: var(--cc-color-border-control);   /* 3.52:1 boundary */
}
.cc-btn--secondary:hover:not(:disabled) {
  background: var(--cc-color-surface-subtle);
  border-color: var(--cc-color-text-secondary);
}

.cc-btn--tertiary {
  background: transparent;
  color: var(--cc-color-brand-strong);
  border-color: transparent;
  padding-inline: var(--cc-space-3);
}
.cc-btn--tertiary:hover:not(:disabled) {
  background: var(--cc-color-brand-soft);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.cc-btn--danger {
  background: var(--cc-color-surface);
  color: var(--cc-color-danger);            /* 6.46:1 */
  border-color: var(--cc-color-danger);
}
.cc-btn--danger:hover:not(:disabled) {
  background: var(--cc-color-danger);
  color: #FFFFFF;                            /* 6.80:1 */
}

/* Icon-only: still 44px, still needs an accessible name via aria-label. */
.cc-btn--icon {
  width: var(--cc-control-height);
  min-width: var(--cc-control-height);
  padding: 0;
}

.cc-btn--sm { min-height: 36px; font-size: var(--cc-text-sm); padding-inline: var(--cc-space-3); }
.cc-btn--block { width: 100%; }

.cc-btn:disabled,
.cc-btn[aria-disabled="true"] {
  opacity: 1;                                /* not a dimmed guess */
  background: var(--cc-color-surface-subtle);
  color: var(--cc-color-text-muted);         /* still 4.82:1 */
  border-color: var(--cc-color-border-strong);
  cursor: not-allowed;
}

/* Loading: the label stays readable, a rule below shows progress. Text is
   swapped by the caller, never hidden, so screen readers keep a name. */
.cc-btn--loading { position: relative; pointer-events: none; }
.cc-btn--loading::after {
  content: "";
  position: absolute;
  inset-inline: var(--cc-space-3);
  bottom: 6px;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
  animation: cc-progress 900ms var(--cc-ease-standard) infinite;
  transform-origin: left center;
}
@keyframes cc-progress {
  0%   { transform: scaleX(0);   opacity: 0.15; }
  50%  { transform: scaleX(1);   opacity: 0.45; }
  100% { transform: scaleX(0);   opacity: 0.15; transform-origin: right center; }
}

/* ==========================================================================
   8. FORMS
   ========================================================================== */

.cc-field { display: flex; flex-direction: column; gap: var(--cc-space-2); }

.cc-label {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-semibold);
  color: var(--cc-color-text);
  line-height: 1.35;
}
.cc-label__optional {
  font-weight: var(--cc-weight-regular);
  color: var(--cc-color-text-muted);
}

.cc-hint {
  font-size: var(--cc-text-sm);
  line-height: 1.45;
  color: var(--cc-color-text-muted);   /* 5.17:1 */
}

.cc-input,
.cc-select,
.cc-textarea {
  width: 100%;
  min-height: var(--cc-control-height);
  padding: var(--cc-space-2) var(--cc-control-padding-x);
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);   /* 17px - never below 16, iOS would zoom */
  line-height: 1.4;
  color: var(--cc-color-text);
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border-control);
  border-radius: var(--cc-radius-md);
  transition: border-color var(--cc-duration-fast) var(--cc-ease-standard);
}
.cc-textarea { min-height: 110px; padding-block: var(--cc-space-3); resize: vertical; }

.cc-input:hover:not(:disabled),
.cc-select:hover:not(:disabled) { border-color: var(--cc-color-text-secondary); }

.cc-input:disabled,
.cc-select:disabled,
.cc-textarea:disabled {
  background: var(--cc-color-surface-subtle);
  color: var(--cc-color-text-muted);
  cursor: not-allowed;
}

/* Native arrow removed, replaced with our own so it matches the icon language. */
.cc-select {
  appearance: none;
  padding-right: var(--cc-space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236A6A63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--cc-space-3) center;
}

/* --- Numeric + unit field ------------------------------------------------
   The unit is part of the control, not a floating label, so the value and
   its unit can never be read apart. Callers must still set inputmode,
   step, min and max on the input - see the style guide for the contract.  */
.cc-inputgroup {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--cc-color-border-control);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  overflow: hidden;
}
.cc-inputgroup:focus-within {
  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);
}
.cc-inputgroup .cc-input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.cc-inputgroup .cc-input:focus-visible { outline: none; box-shadow: none; }
.cc-inputgroup__unit {
  display: flex;
  align-items: center;
  padding-inline: var(--cc-space-3);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-text-secondary);
  background: var(--cc-color-surface-subtle);
  border-left: 1px solid var(--cc-color-border);
  white-space: nowrap;
}
/* A <select> unit switcher sitting inside the group. */
.cc-inputgroup__unit-select {
  border: 0;
  border-left: 1px solid var(--cc-color-border);
  border-radius: 0;
  background: var(--cc-color-surface-subtle);
  width: auto;
  min-width: 84px;
  font-size: var(--cc-text-sm);
}

/* Keep the native spinners: they are a legitimate affordance for step values.
   Decimal entry must never be blocked, so no pattern/keypress filtering here. */
.cc-input[type="number"] { font-variant-numeric: tabular-nums; }

/* --- Radio / checkbox ----------------------------------------------------
   Real inputs, visually hidden but still focusable, with a drawn box. This
   keeps native keyboard behaviour and screen-reader semantics intact.      */
.cc-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-3);
  padding: var(--cc-space-2) 0;
  min-height: var(--cc-control-height);
  cursor: pointer;
}
.cc-choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.cc-choice__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--cc-color-border-control);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-color-surface);
  display: grid;
  place-items: center;
  transition: background-color var(--cc-duration-fast) var(--cc-ease-standard),
              border-color var(--cc-duration-fast) var(--cc-ease-standard);
}
.cc-choice--radio .cc-choice__box { border-radius: 50%; }
.cc-choice__input:checked + .cc-choice__box {
  background: var(--cc-color-brand-strong);
  border-color: var(--cc-color-brand-strong);
}
.cc-choice__input:checked + .cc-choice__box::after {
  content: "";
  width: 11px; height: 7px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg) translate(1px, -1px);
}
.cc-choice--radio .cc-choice__input:checked + .cc-choice__box::after {
  width: 8px; height: 8px; border: 0; border-radius: 50%;
  background: #FFFFFF; transform: none;
}
.cc-choice__input:disabled + .cc-choice__box {
  background: var(--cc-color-surface-subtle);
  border-color: var(--cc-color-border-strong);
}
.cc-choice__text { font-size: var(--cc-text-base); line-height: 1.45; }
.cc-choice__desc { display: block; font-size: var(--cc-text-sm); color: var(--cc-color-text-muted); }

/* --- Segmented control (unit switching, 2-4 options) --------------------- */
.cc-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--cc-color-surface-subtle);
  border: 1px solid var(--cc-color-border-control);
  border-radius: var(--cc-radius-md);
}
.cc-segmented__option { position: relative; display: flex; }
.cc-segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc-segmented__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding-inline: var(--cc-space-4);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-text-secondary);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.cc-segmented__input:checked + .cc-segmented__label {
  background: var(--cc-color-surface);
  color: var(--cc-color-text);
  font-weight: var(--cc-weight-semibold);
  box-shadow: var(--cc-shadow-xs);
  /* Not colour alone: the selected option also gains a brand underline. */
  border-bottom: 2px solid var(--cc-color-brand);
}
.cc-segmented__input:focus-visible + .cc-segmented__label {
  outline: var(--cc-focus-outer-width) solid var(--cc-color-focus);
  outline-offset: 1px;
}

/* --- Toggle --------------------------------------------------------------- */
.cc-toggle { display: inline-flex; align-items: center; gap: var(--cc-space-3); min-height: var(--cc-control-height); cursor: pointer; }
.cc-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc-toggle__track {
  width: 46px; height: 26px; flex: 0 0 auto;
  background: var(--cc-color-surface-subtle);
  border: 1px solid var(--cc-color-border-control);
  border-radius: var(--cc-radius-pill);
  position: relative;
  transition: background-color var(--cc-duration-base) var(--cc-ease-standard);
}
.cc-toggle__track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border-control);
  border-radius: 50%;
  transition: transform var(--cc-duration-base) var(--cc-ease-standard);
}
.cc-toggle__input:checked + .cc-toggle__track { background: var(--cc-color-brand-strong); border-color: var(--cc-color-brand-strong); }
.cc-toggle__input:checked + .cc-toggle__track::after { transform: translateX(20px); border-color: var(--cc-color-brand-strong); }
.cc-toggle__input:focus-visible + .cc-toggle__track {
  outline: var(--cc-focus-outer-width) solid var(--cc-color-focus);
  outline-offset: var(--cc-focus-offset);
}

/* --- Validation ----------------------------------------------------------
   Never colour alone: an invalid field gains a 2px border, an icon and a
   worded message that says what to do. The message is linked with
   aria-describedby by the caller and announced through .cc-form__summary.  */
.cc-input[aria-invalid="true"],
.cc-select[aria-invalid="true"],
.cc-textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--cc-color-danger);
  background: var(--cc-color-danger-soft);
}
.cc-error {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-2);
  font-size: var(--cc-text-sm);
  line-height: 1.45;
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-danger);   /* 6.46:1 */
}
.cc-error::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 1px;
  background: currentColor;
  /* exclamation in a circle, masked so it inherits the text colour */
  -webkit-mask: var(--cc-icon-alert) center / contain no-repeat;
  mask: var(--cc-icon-alert) center / contain no-repeat;
}
.cc-form__summary {
  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);
  color: var(--cc-color-text);
  font-size: var(--cc-text-sm);
}

:root {
  --cc-icon-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");
}

/* ==========================================================================
   9. CALCULATOR SHELL + ACTION BAR
   ========================================================================== */

.cc-calc {
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
}
.cc-calc__head {
  padding: var(--cc-space-5) var(--cc-space-5) var(--cc-space-4);
  border-bottom: 1px solid var(--cc-color-border);
}
.cc-calc__title { font-family: var(--cc-font-body); font-size: var(--cc-text-xl); font-weight: var(--cc-weight-semibold); margin: 0; }
.cc-calc__body { padding: var(--cc-space-5); }
.cc-calc__fields {
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.cc-calc__fields--single { grid-template-columns: 1fr; }

/* Action bar. Calculate dominates; Reset is deliberately quiet and sits
   after a spacer so it cannot be hit by accident. */
.cc-actionbar {
  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);
}
.cc-actionbar__primary { flex: 0 0 auto; min-width: 180px; }
.cc-actionbar__spacer { flex: 1 1 auto; }
@media (max-width: 599px) {
  .cc-actionbar { flex-direction: column; align-items: stretch; }
  .cc-actionbar__spacer { display: none; }
  .cc-actionbar .cc-btn { width: 100%; }
}

/* ==========================================================================
   10. RESULT COMPONENT
   The swatch grid sits behind the headline figure - counted paper under a
   counted number. Structure only; no calculator values live here.
   ========================================================================== */

.cc-result {
  border: 1px solid var(--cc-color-border);
  border-top: 3px solid var(--cc-color-brand);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-color-surface);
  overflow: hidden;
}
.cc-result__main {
  padding: var(--cc-space-5);
  background-image: var(--cc-motif-grid);
  background-color: var(--cc-color-surface);
}
.cc-result__label {
  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);
  margin: 0 0 var(--cc-space-2);
}
.cc-result__value {
  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);
  margin: 0;
  overflow-wrap: anywhere;   /* a very long value wraps, never overflows */
}
.cc-result__unit {
  font-size: 0.45em;
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-text-secondary);
  margin-left: 0.2em;
}
.cc-result__conversions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2) var(--cc-space-5);
  margin: var(--cc-space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--cc-text-base);
  color: var(--cc-color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.cc-result__breakdown {
  padding: var(--cc-space-4) var(--cc-space-5);
  border-top: 1px solid var(--cc-color-border);
  background: var(--cc-color-surface-subtle);
}
.cc-result__assumptions { margin: 0; font-size: var(--cc-text-sm); color: var(--cc-color-text-secondary); }
.cc-result__assumptions dt {
  font-weight: var(--cc-weight-semibold);
  color: var(--cc-color-text);
  font-size: var(--cc-text-xs);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--cc-space-2);
}
.cc-result__assumptions dd { margin: 0 0 var(--cc-space-1); }
.cc-result__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4) var(--cc-space-5);
  border-top: 1px solid var(--cc-color-border);
}

/* ==========================================================================
   11. TABLES
   ========================================================================== */

/* Wrapper scrolls itself so the PAGE never scrolls sideways. It is focusable
   and labelled so a keyboard user can reach and pan it. */
.cc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  max-width: 100%;
}
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cc-text-base);
  background: var(--cc-color-surface);
}
.cc-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--cc-space-3) var(--cc-space-4);
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
  border-bottom: 1px solid var(--cc-color-border);
}
.cc-table th,
.cc-table td {
  padding: var(--cc-space-3) var(--cc-space-4);
  text-align: left;
  border-bottom: 1px solid var(--cc-color-border);
  vertical-align: top;
}
.cc-table thead th {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-semibold);
  color: var(--cc-color-text);
  background: var(--cc-color-surface-subtle);
  border-bottom: 2px solid var(--cc-color-border-control);
  white-space: nowrap;
}
.cc-table tbody tr:last-child th,
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table [data-numeric], .cc-table__num { font-variant-numeric: tabular-nums; text-align: right; }
.cc-table th[scope="row"] { font-weight: var(--cc-weight-semibold); }

.cc-table--zebra tbody tr:nth-child(even) { background: var(--cc-color-canvas); }
.cc-table--compact th, .cc-table--compact td { padding: var(--cc-space-2) var(--cc-space-3); font-size: var(--cc-text-sm); }
.cc-table--comparison thead th:not(:first-child) { text-align: center; }
.cc-table--comparison td:not(:first-child) { text-align: center; }

/* Under 600px a comparison table becomes stacked cards, each row labelled by
   its header via data-label, so no information is lost to a scrollbar. */
@media (max-width: 599px) {
  .cc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cc-table--stack tbody tr {
    display: block;
    border: 1px solid var(--cc-color-border);
    border-radius: var(--cc-radius-md);
    margin-bottom: var(--cc-space-3);
    padding: var(--cc-space-2) var(--cc-space-3);
  }
  .cc-table--stack tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--cc-space-4);
    padding: var(--cc-space-2) 0;
    border-bottom: 1px solid var(--cc-color-border);
    text-align: left;
  }
  .cc-table--stack tbody tr td:last-child { border-bottom: 0; }
  .cc-table--stack tbody td::before {
    content: attr(data-label);
    font-weight: var(--cc-weight-semibold);
    font-size: var(--cc-text-sm);
    color: var(--cc-color-text-secondary);
  }
  .cc-table--stack { border: 0; }
  .cc-table--stack tbody td:not([data-label])::before { content: none; }
}

/* ==========================================================================
   12. CALLOUTS
   Seven kinds, distinguished by label and icon as well as tone. A callout is
   for something that genuinely sits outside the reading flow.
   ========================================================================== */

.cc-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cc-space-2) var(--cc-space-3);
  padding: var(--cc-space-4);
  border: 1px solid var(--cc-color-border);
  border-left: 4px solid var(--cc-color-border-control);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  margin-block: var(--cc-space-5);
}
.cc-callout__label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 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;
  margin: 0;
}
.cc-callout__body { grid-column: 1 / -1; font-size: var(--cc-text-base); line-height: 1.55; }
.cc-callout__body > :last-child { margin-bottom: 0; }

.cc-callout--note       { border-left-color: var(--cc-color-data);    background: var(--cc-color-data-soft); }
.cc-callout--note       .cc-callout__label { color: var(--cc-color-data); }
.cc-callout--important  { border-left-color: var(--cc-color-brand);   background: var(--cc-color-brand-soft); }
.cc-callout--important  .cc-callout__label { color: var(--cc-color-brand-strong); }
.cc-callout--method     { border-left-color: var(--cc-color-sage-strong); background: var(--cc-color-sage-soft); }
.cc-callout--method     .cc-callout__label { color: var(--cc-color-sage-strong); }
.cc-callout--estimate   { border-left-color: var(--cc-color-border-control); background: var(--cc-color-surface-subtle); }
.cc-callout--estimate   .cc-callout__label { color: var(--cc-color-text-secondary); }
.cc-callout--warning    { border-left-color: var(--cc-color-warning); background: var(--cc-color-warning-soft); }
.cc-callout--warning    .cc-callout__label { color: var(--cc-color-warning); }
.cc-callout--tip        { border-left-color: var(--cc-color-success); background: var(--cc-color-success-soft); }
.cc-callout--tip        .cc-callout__label { color: var(--cc-color-success); }
.cc-callout--source     { border-left-color: var(--cc-color-text-secondary); background: var(--cc-color-surface-subtle); }
.cc-callout--source     .cc-callout__label { color: var(--cc-color-text-secondary); }

/* ==========================================================================
   13. SOURCE / EVIDENCE BLOCK
   Structure for attributing a fact. Values are always supplied by the page -
   this file never carries a claim, a source name or a date.
   ========================================================================== */

.cc-source {
  display: grid;
  gap: var(--cc-space-1) var(--cc-space-4);
  grid-template-columns: auto 1fr;
  padding: var(--cc-space-3) var(--cc-space-4);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface-subtle);
  font-size: var(--cc-text-sm);
}
.cc-source__kind {
  grid-column: 1 / -1;
  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);
  margin-bottom: var(--cc-space-1);
}
.cc-source dt { font-weight: var(--cc-weight-semibold); color: var(--cc-color-text-secondary); }
.cc-source dd { margin: 0; color: var(--cc-color-text); }
.cc-source time { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   14. ACCORDION / FAQ
   Built on <details>/<summary> so it works with no JavaScript at all, keeps
   native keyboard behaviour, and is findable by in-page search.
   ========================================================================== */

.cc-accordion { border: 1px solid var(--cc-color-border); border-radius: var(--cc-radius-md); overflow: hidden; }
.cc-accordion__item + .cc-accordion__item { border-top: 1px solid var(--cc-color-border); }

.cc-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  width: 100%;
  min-height: var(--cc-control-height);
  padding: var(--cc-space-3) var(--cc-space-4);
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);
  font-weight: var(--cc-weight-semibold);
  text-align: left;
  color: var(--cc-color-text);
  background: var(--cc-color-surface);
  border: 0;
  cursor: pointer;
  list-style: none;
}
.cc-accordion__trigger::-webkit-details-marker { display: none; }
.cc-accordion__trigger:hover { background: var(--cc-color-surface-subtle); }

.cc-accordion__chev {
  flex: 0 0 auto;
  margin-left: auto;
  width: 14px; height: 14px;
  transition: transform var(--cc-duration-base) var(--cc-ease-standard);
}
.cc-accordion__item[open] .cc-accordion__chev { transform: rotate(180deg); }

.cc-accordion__panel {
  padding: 0 var(--cc-space-4) var(--cc-space-4);
  font-size: var(--cc-text-base);
  line-height: var(--cc-line-body);
  color: var(--cc-color-text);
}
.cc-accordion__panel > :last-child { margin-bottom: 0; }

/* ==========================================================================
   15. BREADCRUMB
   ========================================================================== */

.cc-breadcrumb { font-size: var(--cc-text-sm); }
.cc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;           /* wraps on narrow screens instead of truncating */
  align-items: center;
  gap: var(--cc-space-1) var(--cc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-breadcrumb li { display: flex; align-items: center; gap: var(--cc-space-2); }
.cc-breadcrumb li + li::before {
  content: "\203A";
  color: var(--cc-color-text-muted);
  speak: never;
}
.cc-breadcrumb a {
  color: var(--cc-color-text-secondary);
  text-decoration: none;
  padding-block: var(--cc-space-2);   /* lifts the tap target past 24px */
}
.cc-breadcrumb a:hover { color: var(--cc-color-text); text-decoration: underline; }
.cc-breadcrumb [aria-current="page"] { color: var(--cc-color-text); font-weight: var(--cc-weight-medium); }

/* ==========================================================================
   16. ARTICLE PRIMITIVES
   ========================================================================== */

.cc-answer {
  padding: var(--cc-space-5);
  border: 1px solid var(--cc-color-border);
  border-left: 4px solid var(--cc-color-brand);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
}
.cc-answer__label {
  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);
  margin: 0 0 var(--cc-space-2);
}
.cc-answer__body { font-size: var(--cc-text-lg); line-height: 1.55; margin: 0; }

.cc-takeaway {
  padding: var(--cc-space-4) var(--cc-space-5);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface-subtle);
}
.cc-takeaway ul { margin: 0; padding-left: var(--cc-space-5); }
.cc-takeaway li { margin-bottom: var(--cc-space-2); }
.cc-takeaway li:last-child { margin-bottom: 0; }

.cc-toc {
  padding: var(--cc-space-4);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  font-size: var(--cc-text-sm);
}
.cc-toc__title {
  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);
  margin: 0 0 var(--cc-space-3);
}
.cc-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: cc-toc; }
.cc-toc li { counter-increment: cc-toc; border-bottom: 1px solid var(--cc-color-border); }
.cc-toc li:last-child { border-bottom: 0; }
.cc-toc a {
  display: flex;
  gap: var(--cc-space-3);
  padding: var(--cc-space-2) 0;
  min-height: 40px;
  align-items: center;
  color: var(--cc-color-text);
  text-decoration: none;
}
.cc-toc a::before {
  content: counter(cc-toc, decimal-leading-zero);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-xs);
  color: var(--cc-color-text-muted);
}
.cc-toc a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.cc-definition {
  padding: var(--cc-space-4);
  border: 1px solid var(--cc-color-border);
  border-left: 4px solid var(--cc-color-data);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
}
.cc-definition dt {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-weight-semibold);
  margin-bottom: var(--cc-space-2);
}
.cc-definition dd { margin: 0; color: var(--cc-color-text-secondary); }

.cc-example {
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  overflow: hidden;
}
.cc-example__head {
  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);
}
.cc-example__body { padding: var(--cc-space-4); }
.cc-example__steps { margin: 0; padding-left: var(--cc-space-5); }
.cc-example__steps li { margin-bottom: var(--cc-space-3); }
.cc-example__steps li:last-child { margin-bottom: 0; }

.cc-authormeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-2) var(--cc-space-4);
  padding: var(--cc-space-3) 0;
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
  border-top: 1px solid var(--cc-color-border);
  border-bottom: 1px solid var(--cc-color-border);
}
.cc-authormeta__name { color: var(--cc-color-text); font-weight: var(--cc-weight-medium); }

/* ==========================================================================
   17. FORMULA / TECHNICAL TEXT
   Monospace only for the expression itself, so the operators line up. The
   surrounding explanation stays in the body face - this is a workbench, not
   an IDE.
   ========================================================================== */

.cc-formula {
  display: block;
  padding: 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.7;
  color: var(--cc-color-text);
  overflow-x: auto;
}
.cc-formula__var { color: var(--cc-color-data); font-weight: var(--cc-weight-medium); }
.cc-formula__op  { color: var(--cc-color-text-muted); padding-inline: 0.15em; }
.cc-formula__note {
  display: block;
  margin-top: var(--cc-space-2);
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-secondary);
}
.cc-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);
}

/* ==========================================================================
   18. SEMANTIC VISUAL WRAPPER
   The wrapper never lets a diagram be the only copy of the information: a
   text equivalent is part of the component, not an optional extra.
   ========================================================================== */

.cc-figure { margin: var(--cc-space-6) 0; }
.cc-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);
}
/* Wide diagrams pan inside their own frame rather than shrinking their labels
   to illegibility or pushing the page sideways. */
.cc-figure__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cc-figure__frame svg,
.cc-figure__frame img { display: block; max-width: 100%; height: auto; }
.cc-figure__caption {
  margin-top: var(--cc-space-3);
  font-size: var(--cc-text-sm);
  line-height: 1.5;
  color: var(--cc-color-text-secondary);
}
.cc-figure__caption b { color: var(--cc-color-text); font-weight: var(--cc-weight-semibold); }
.cc-figure__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2) var(--cc-space-4);
  margin-top: var(--cc-space-3);
  padding: 0;
  list-style: none;
  font-size: var(--cc-text-sm);
}
.cc-figure__legend li { display: flex; align-items: center; gap: var(--cc-space-2); }
.cc-figure__swatch {
  width: 14px; height: 14px;
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-color-border-control);
  flex: 0 0 auto;
}
/* The text equivalent. Collapsed by default, always present in the DOM. */
.cc-figure__alt { margin-top: var(--cc-space-3); font-size: var(--cc-text-sm); }
.cc-figure__alt summary {
  cursor: pointer;
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--cc-color-brand-strong);
  font-weight: var(--cc-weight-medium);
}

/* ==========================================================================
   19. ICON LANGUAGE
   Not a library - a contract. Any CrochetCalc icon is drawn on a 24x24 grid,
   1.5 stroke, round caps and joins, no fill, monochrome by default. That is
   enough to keep future icons consistent without shipping an icon runtime.
   ========================================================================== */

.cc-icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cc-icon--sm { width: 1em; height: 1em; }
.cc-icon--lg { width: 1.75em; height: 1.75em; }
/* Measurement annotation: thinner, in the data colour, for dimension arrows. */
.cc-icon--measure { stroke: var(--cc-color-data); stroke-width: 1.25; }

/* ==========================================================================
   20. BADGES
   ========================================================================== */

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  padding: 2px var(--cc-space-2);
  border-radius: var(--cc-radius-pill);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.cc-badge--calculator { background: var(--cc-color-brand-soft); color: var(--cc-color-brand-hover); border-color: #E7D3CB; }
.cc-badge--guide      { background: var(--cc-color-sage-soft);  color: var(--cc-color-sage-strong); border-color: #D8DFD5; }
.cc-badge--tool       { background: var(--cc-color-data-soft);  color: var(--cc-color-data); border-color: #D2DFE3; }

/* ==========================================================================
   21. UTILITIES
   ========================================================================== */

.cc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Visible again when focused - for skip links. */
.cc-sr-only--focusable:focus,
.cc-sr-only--focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip-path: none;
  white-space: normal;
}

.cc-skip-link {
  position: absolute;
  left: var(--cc-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--cc-space-3) var(--cc-space-4);
  background: var(--cc-color-surface);
  border: 2px solid var(--cc-color-focus);
  border-radius: var(--cc-radius-md);
  color: var(--cc-color-text);
  text-decoration: none;
  font-weight: var(--cc-weight-medium);
  transition: top var(--cc-duration-base) var(--cc-ease-standard);
}
.cc-skip-link:focus { top: var(--cc-space-4); }

.cc-tabular { font-variant-numeric: tabular-nums; }
.cc-nowrap { white-space: nowrap; }

/* ==========================================================================
   22. MOTION PREFERENCES
   Every transition and animation in this file is presentational. None of them
   carry meaning, so all of them can go.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cc-link--action:hover::after { transform: none; }
  .cc-accordion__item[open] .cc-accordion__chev { transition: none; }
}

/* ==========================================================================
   23. PRINT
   A printed calculator result or reference table should be the content and
   nothing else.
   ========================================================================== */

@media print {
  .cc-actionbar,
  .cc-btn,
  .cc-skip-link,
  .cc-toc,
  .cc-link--action::after,
  .cc-figure__alt summary { display: none !important; }

  .cc-result,
  .cc-calc,
  .cc-table-wrap,
  .cc-callout,
  .cc-figure__frame {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .cc-result__main { background-image: none !important; }
  .cc-table-wrap { overflow: visible !important; }
  .cc-figure__alt[open] summary { display: none !important; }
  .cc-figure__alt { display: block !important; }

  .cc-prose { max-width: none; color: #000; }
  .cc-prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }
  .cc-h2, .cc-h3, .cc-prose h2, .cc-prose h3 { break-after: avoid; }
  .cc-table thead { display: table-header-group; }
}