/* ============================================================================
   CrochetCalc Article / Reference Template — Wave 1E
   ============================================================================

   Route-scoped: linked from article pages only. Built on the Wave 1A tokens
   and the Wave 1B shell; defines no colour, spacing step or type size itself.

   THE LAYOUT IDEA
   ---------------
   A reference article is a reading column with things that must escape it.
   Prose sits at 740px, where a 17px line runs about 70 characters. Diagrams
   and reference tables break out to 1000px, because a gauge diagram squeezed
   into a reading column is a diagram nobody can read.

   That is one CSS grid, not a set of negative margins: the grid names three
   column tracks - content, break, full - and each child picks one. Nothing
   needs to know the page width, so it survives any container change.

   Namespace `art-`.
   ========================================================================= */

:root {
  --art-read: 740px;    /* prose measure, inside the 720-780 target */
  --art-break: 1000px;  /* tables, diagrams, callouts */
}

/* ==========================================================================
   1. THE READING GRID
   ========================================================================== */

.art-body {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--cc-space-5), 1fr)
    [break-start] minmax(0, calc((var(--art-break) - var(--art-read)) / 2))
    [content-start] min(var(--art-read), 100% - var(--cc-space-5) * 2) [content-end]
    minmax(0, calc((var(--art-break) - var(--art-read)) / 2)) [break-end]
    minmax(var(--cc-space-5), 1fr) [full-end];
}
.art-body > * { grid-column: content; }
.art-body > .art-break { grid-column: break; }
.art-body > .art-full  { grid-column: full; }

/* ==========================================================================
   2. ARTICLE HEADER
   ========================================================================== */

.art-head { padding-block: var(--cc-space-6) var(--cc-space-5); }
.art-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  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-brand-strong);
}
.art-head h1 {
  font-family: var(--cc-font-display);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: var(--cc-tracking-tight);
  font-weight: var(--cc-weight-bold);
  margin: 0 0 var(--cc-space-4);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.art-head__standfirst {
  margin: 0 0 var(--cc-space-5);
  font-size: var(--cc-text-lg);
  line-height: 1.6;
  color: var(--cc-color-text-secondary);
}

/* Byline. The avatar carries the author's own initial, taken from the name
   next to it - it previously showed a letter left over from a persona that no
   longer exists on the site. */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-2) var(--cc-space-3);
  padding-block: var(--cc-space-3);
  border-block: 1px solid var(--cc-color-border);
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
}
.art-meta__author { display: flex; align-items: center; gap: var(--cc-space-2); color: var(--cc-color-text-secondary); }
.art-meta__photo {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--cc-color-border);
}
.art-meta a { color: var(--cc-color-brand-strong); text-decoration: none; font-weight: var(--cc-weight-medium); }
.art-meta a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.art-meta time { font-variant-numeric: tabular-nums; }
.art-meta__sep { color: var(--cc-color-border-strong); }

/* ==========================================================================
   3. DIRECT ANSWER
   The first thing after the metadata, because the query is a question.
   ========================================================================== */

.art-answer {
  margin-block: var(--cc-space-6);
  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);
}
.art-answer__label {
  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);
}
.art-answer p { margin: 0 0 var(--cc-space-3); font-size: var(--cc-text-lg); line-height: 1.55; }
.art-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   4. TABLE OF CONTENTS
   ========================================================================== */

.art-toc {
  margin-block: var(--cc-space-6);
  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);
}
.art-toc__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);
}
.art-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; columns: 2; column-gap: var(--cc-space-6); }
@media (max-width: 599px) { .art-toc ol { columns: 1; } }
.art-toc li { counter-increment: toc; break-inside: avoid; }
.art-toc a {
  display: flex;
  gap: var(--cc-space-3);
  align-items: baseline;
  min-height: 44px;
  padding-block: var(--cc-space-1);
  color: var(--cc-color-text);
  text-decoration: none;
  font-size: 0.95rem;
}
.art-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-xs);
  color: var(--cc-color-text-muted);
  flex: 0 0 auto;
}
.art-toc a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ==========================================================================
   5. PROSE
   ========================================================================== */

.art-body 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);
  letter-spacing: var(--cc-tracking-tight);
  margin: var(--cc-space-8) 0 var(--cc-space-3);
  scroll-margin-top: calc(var(--ccs-header-h) + var(--cc-space-5));
  overflow-wrap: break-word;
}
.art-body h3 {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-weight-semibold);
  margin: var(--cc-space-6) 0 var(--cc-space-2);
  scroll-margin-top: calc(var(--ccs-header-h) + var(--cc-space-5));
}
.art-body p { margin: 0 0 var(--cc-space-4); font-size: var(--cc-text-base); line-height: var(--cc-line-body); }
.art-body ul, .art-body ol { margin: 0 0 var(--cc-space-4); padding-left: var(--cc-space-5); }
.art-body li { margin-bottom: var(--cc-space-2); line-height: var(--cc-line-body); }
.art-body li::marker { color: var(--cc-color-text-muted); }
.art-body strong { font-weight: var(--cc-weight-semibold); }
.art-body a:not([class]) {
  color: var(--cc-color-brand-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.art-body a:not([class]):hover { text-decoration-thickness: 2px; }

/* Definition: a term the rest of the article depends on. */
.art-def {
  margin-block: var(--cc-space-5);
  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);
}
.art-def 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);
}
.art-def dd { margin: 0; color: var(--cc-color-text-secondary); line-height: 1.6; }

/* Key takeaway / note callouts. */
.art-note {
  display: grid;
  gap: var(--cc-space-2);
  margin-block: var(--cc-space-5);
  padding: var(--cc-space-4);
  border: 1px solid var(--cc-color-border);
  border-left: 4px solid var(--cc-color-sage-strong);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-sage-soft);
}
.art-note--warn { border-left-color: var(--cc-color-warning); background: var(--cc-color-warning-soft); }
.art-note__label {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin: 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-sage-strong);
}
.art-note--warn .art-note__label { color: var(--cc-color-warning); }
.art-note p { margin: 0; font-size: 0.98rem; line-height: 1.6; }

/* ==========================================================================
   6. STEPS + WORKED EXAMPLE
   ========================================================================== */

.art-steps { list-style: none; counter-reset: st; margin: 0 0 var(--cc-space-5); padding: 0; }
.art-steps li {
  counter-increment: st;
  position: relative;
  padding: var(--cc-space-3) 0 var(--cc-space-3) 48px;
  border-top: 1px solid var(--cc-color-border);
}
.art-steps li:first-child { border-top: 0; }
.art-steps li::before {
  content: counter(st, 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);
}
.art-steps b { display: block; font-weight: var(--cc-weight-semibold); margin-bottom: 2px; }

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

/* ==========================================================================
   7. FIGURES + TABLES  (breakout width)
   ========================================================================== */

.art-figure { margin-block: var(--cc-space-6); }
.art-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);
}
.art-figure img { display: block; width: 100%; height: auto; }
.art-figure figcaption {
  margin-top: var(--cc-space-3);
  font-size: var(--cc-text-sm);
  line-height: 1.5;
  color: var(--cc-color-text-secondary);
  max-width: var(--art-read);
}
.art-figure figcaption b { color: var(--cc-color-text); font-weight: var(--cc-weight-semibold); }

.art-tablewrap { margin-block: var(--cc-space-6); }
.art-tablewrap > .table-scroll { border: 1px solid var(--cc-color-border); border-radius: var(--cc-radius-md); }
.art-tablewrap figcaption,
.art-tablewrap > p {
  margin: var(--cc-space-3) 0 0;
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-secondary);
  max-width: var(--art-read);
}

/* ==========================================================================
   8. CALCULATOR BRIDGE
   The article teaches; the calculator performs. Kept visually distinct from
   the prose so the two intents do not blur.
   ========================================================================== */

.art-calc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-4);
  margin-block: var(--cc-space-6);
  padding: var(--cc-space-5);
  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);
}
.art-calc__icon {
  width: 44px; height: 44px;
  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);
}
.art-calc__text { flex: 1 1 260px; min-width: 0; }
.art-calc__text b { display: block; font-size: var(--cc-text-xl); font-weight: var(--cc-weight-semibold); line-height: 1.25; }
.art-calc__text span { display: block; font-size: 0.95rem; line-height: 1.55; color: var(--cc-color-text-secondary); margin-top: 2px; }
.art-calc .btn { flex: 0 0 auto; }

/* ==========================================================================
   9. SOURCES, RELATED, AUTHOR
   ========================================================================== */

.art-sources { list-style: none; margin: 0 0 var(--cc-space-4); padding: 0; font-size: 0.95rem; }
.art-sources li { padding: var(--cc-space-3) 0; border-top: 1px solid var(--cc-color-border); }
.art-sources li:first-child { border-top: 0; }
.art-sources b { font-weight: var(--cc-weight-semibold); }
.art-sources span { display: block; color: var(--cc-color-text-muted); margin-top: 2px; }
.art-sources__note {
  margin: 0;
  padding: var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface-subtle);
  font-size: var(--cc-text-sm);
  line-height: 1.6;
  color: var(--cc-color-text-secondary);
}

.art-related { display: grid; gap: var(--cc-space-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.art-related a {
  display: flex;
  flex-direction: column;
  padding: var(--cc-space-4);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  text-decoration: none;
  color: var(--cc-color-text);
  min-height: 44px;
}
.art-related a:hover { border-color: var(--cc-color-border-control); }
.art-related b { font-weight: var(--cc-weight-semibold); font-size: 1rem; line-height: 1.3; }
.art-related a:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.art-related span { font-size: var(--cc-text-sm); color: var(--cc-color-text-muted); margin-top: 4px; }

.art-author {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-4);
  margin-block: var(--cc-space-6);
  padding: var(--cc-space-5);
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface-subtle);
}
.art-author__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.art-author__body { flex: 1 1 240px; min-width: 0; }
.art-author__name { font-family: var(--cc-font-body); font-size: var(--cc-text-lg); font-weight: var(--cc-weight-semibold); margin: 0; }
.art-author__role { margin: 2px 0 var(--cc-space-2); font-size: var(--cc-text-sm); color: var(--cc-color-text-muted); }
.art-author__bio { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--cc-color-text-secondary); }

/* ==========================================================================
   10. ICONS
   ========================================================================== */

.art-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;
}
.art-i--sm { width: 15px; height: 15px; }
.art-i--lg { width: 24px; height: 24px; }
.art-i--gauge  { -webkit-mask-image: var(--art-ic-gauge);  mask-image: var(--art-ic-gauge); }
.art-i--ruler  { -webkit-mask-image: var(--art-ic-ruler);  mask-image: var(--art-ic-ruler); }
.art-i--answer { -webkit-mask-image: var(--art-ic-answer); mask-image: var(--art-ic-answer); }
.art-i--key    { -webkit-mask-image: var(--art-ic-key);    mask-image: var(--art-ic-key); }
.art-i--warn   { -webkit-mask-image: var(--art-ic-warn);   mask-image: var(--art-ic-warn); }
.art-i--source { -webkit-mask-image: var(--art-ic-source); mask-image: var(--art-ic-source); }
.art-i--book   { -webkit-mask-image: var(--art-ic-book);   mask-image: var(--art-ic-book); }

:root {
  --art-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");
  --art-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");
  --art-ic-answer: 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='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
  --art-ic-key: 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 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
  --art-ic-warn: 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 4.5 21 20H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
  --art-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");
  --art-ic-book: 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='M4 4.5h6a2.5 2.5 0 0 1 2 2.5v12a2 2 0 0 0-2-1.5H4z'/%3E%3Cpath d='M20 4.5h-6a2.5 2.5 0 0 0-2 2.5v12a2 2 0 0 1 2-1.5h6z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   11. FOCUS, MOTION, PRINT
   ========================================================================== */

.art-toc a:focus-visible,
.art-related a:focus-visible,
.art-body a:focus-visible,
.art-meta a: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);
}

@media print {
  .art-toc, .art-calc, .art-related { display: none !important; }
  .art-figure__frame, .art-example, .art-answer { border: 1px solid #999 !important; break-inside: avoid; }
  .art-body { display: block; }
  .art-body > * { max-width: none; }
}


/* ---------------------------------------------------------------------------
   Chart-symbol table (articles/crochet-symbols-chart.html)

   The symbol column holds a small inline SVG rather than text. It needs a fixed
   footprint so the rows do not jump about, and it must survive shell.css's
   mobile stack, where every cell becomes a row with its heading in front of it.
   --------------------------------------------------------------------------- */
.sym-table .sym-cell {
  width: 4.25rem;
  padding-top: var(--sp-2, 0.5rem);
  padding-bottom: var(--sp-2, 0.5rem);
  text-align: center;
  vertical-align: middle;
}

.sym-table .sym-cell svg {
  display: inline-block;
  width: 44px;
  height: 44px;
  vertical-align: middle;
}

/* No per-column widths here on purpose: at the prose measure the six columns
   are already at their content minimum, so width hints are inert. The table
   stacks below 768px, where the cramped desktop case does not arise. */

@media (max-width: 767px) {
  /* Stacked: the symbol sits beside its "Symbol" label rather than under it. */
  .sym-table .sym-cell {
    width: auto;
    text-align: left;
  }
}

@media (forced-colors: active) {
  /* The symbols are drawn in a fixed ink colour; in forced-colours mode that
     colour is not guaranteed to contrast with the substituted background. */
  .sym-table .sym-cell svg path,
  .sym-table .sym-cell svg ellipse {
    stroke: CanvasText;
  }
  /* The slip-stitch dot is a filled shape with no stroke; leave it that way. */
  .sym-table .sym-cell svg circle {
    fill: CanvasText;
  }
}