/* MESH additions to the shared field-guide stylesheet
 * ---------------------------------------------------
 * styles.css is the CHIP/KERF family sheet, kept as close to theirs as
 * possible so the three guides look like one product. Everything MESH adds
 * lives here, using the same tokens.
 */

/* Skip link: off screen until it has keyboard focus. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--focus);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
.content:focus { outline: none; }

/* Process badges in the meta row: which printers a lesson applies to. */
.process-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.process-tag.is-fdm   { color: var(--kc-amber); border-color: rgba(245, 180, 69, 0.35); }
.process-tag.is-resin { color: #9FB7FF; border-color: rgba(159, 183, 255, 0.35); }

/* Sources and review date under every article. */
.content .article-sources {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.content .sources-label {
  font-family: var(--font-display, "Oswald", sans-serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.content .article-sources .muted { font-size: 12.5px; }
.content .reviewed {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted-2, var(--muted));
}

/* Troubleshooting fix steps: numbered, a little more air than prose lists. */
.content ol.fix-steps > li { margin-bottom: 8px; }

/* Progress panel on the welcome page. */
.content .progress-note { margin: 0 0 10px; }
.content .progress-reset {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.content .progress-reset:hover { border-color: var(--kc-flare); }
.content .progress-reset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* "Showing results for" note when search corrected a typo. */
.qa-corrected {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Kinetic Terrain while it is not public: a plain line, never a link. */
.content .kt-soon { color: var(--muted); }
.content .kt-soon .kt-tag { margin: 0 4px; }

@media print {
  .content .article-sources a::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* MESH puts millimeters first (the 3D printing baseline), so the sliding
   indicator is the mirror of CHIP's inch-first switch. */
body[data-units="metric"]   .toggle-indicator { transform: translateX(0); }
body[data-units="imperial"] .toggle-indicator { transform: translateX(100%); }

/* The stylesheet gives the button display:flex, which beats the hidden
   attribute. Feedback stays hidden until the form can deliver. */
.feedback-fab[hidden] { display: none !important; }

/* Sidebar items, Read next cards and category cards are real links (new tab,
   keyboard, crawlers), drawn exactly as the family's buttons were. */
a.module-item, a.related-card, a.cat-card { color: inherit; text-decoration: none; }
a.module-item:focus-visible, a.related-card:focus-visible, a.cat-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* "Did you mean" is clickable; "Showing results for" is a plain note. */
.qa-corrected.is-suggest { cursor: pointer; text-decoration: underline; color: var(--text); }

/* The article's link rule (styles.css, .content a[data-module-link]) would
   underline these cards and force every span to the link color. Cards keep
   their own type colors. */
.content a.related-card[data-module-link],
.content a.cat-card[data-module-link] {
  color: var(--text);
  text-decoration: none;
  font-weight: inherit;
}
.content a.related-card[data-module-link]:hover,
.content a.cat-card[data-module-link]:hover,
.content a.related-card[data-module-link]:focus-visible,
.content a.cat-card[data-module-link]:focus-visible { color: var(--text) !important; text-decoration: none; }
.content a[data-module-link] .related-card-cat,
.content a[data-module-link] .cat-card-meta { color: var(--kc-flare) !important; }
.content a[data-module-link] .related-card-title,
.content a[data-module-link] .cat-card-title { color: var(--text) !important; font-weight: 600 !important; }
.content a[data-module-link] .cat-card-title { font-weight: 700 !important; }
.content a[data-module-link] .related-card-sum,
.content a[data-module-link] .cat-card-sum { color: var(--muted) !important; }


/* ---- Printer filter (sidebar) ---- */
.process-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.process-filter-label {
  font-family: var(--font-display, "Oswald", sans-serif);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-basis: 100%; /* its own row, so the three buttons always share one */
}
.process-filter-btn {
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-2, var(--text));
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.process-filter-btn:hover { border-color: rgba(232, 52, 51, 0.45); }
.process-filter-btn.active { background: var(--kc-blood-hot, #A81C1C); border-color: var(--kc-blood-hot, #A81C1C); color: #fff; }
.process-filter-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.process-filter-note { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
/* Dimmed by color, not opacity, so the text keeps readable contrast. */
.module-item.is-other-process { color: var(--muted); }
.module-item.is-other-process .num { color: var(--muted); }
.module-process {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- Learning paths ---- */
.content .path-progress { margin: 18px 0 22px; }
.content .path-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--kc-iron, #2A2A2A);
  overflow: hidden;
}
.content .path-bar > span { display: block; height: 100%; background: var(--kc-flare, #E83433); }
.content .path-count { margin: 8px 0 0; }
.content ol.path-steps { list-style: none; padding: 0; margin: 0; }
.content .path-step {
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--panel);
}
.content .path-step.is-done { border-color: rgba(95, 214, 138, 0.4); }
.content .path-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.content .path-day {
  font-family: var(--font-display, "Oswald", sans-serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-flare);
}
.content .path-step-state { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ok); }
.content .path-goal { margin: 6px 0 4px; }
.content ul.path-lessons { margin: 4px 0 0; }
.content .progress-continue { margin: 0 0 10px; }

/* Glossary page */
.content dl.glossary-list dt { margin-top: 16px; font-weight: 700; color: var(--text); }
.content dl.glossary-list dd { margin: 4px 0 0; }

/* Reference table filter */
.content .ref-filter-label { font-weight: 600; margin-right: 6px; }
.content .ref-filter {
  min-height: 40px; width: 100%; max-width: 360px; padding: 8px 12px;
  border-radius: 8px; border: 1px solid var(--border-subtle);
  background: var(--panel); color: var(--text); font: inherit;
}
.content .ref-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.content table tr[hidden] { display: none !important; }