/* ==========================================================================
   KNOWLEDGE — Engineering Knowledge Path (page-knowledge.php)
   Six-stage overview cards (.kpath/.kstage), the per-stage empty-state
   notice (.kempty) and the secondary chronological archive list
   (.karchive). Reuses existing tokens/utilities only (--ir, --line,
   --ink-45/70, --ff-display/mono, .kgrid/.kcard, .arw) — no new colors,
   no external assets. Lane E owns this file only; do not add rules for
   selectors defined elsewhere (kgrid/kcard/pill/divider/etc. already
   live in main.css).
   ========================================================================== */

/* ---- Stage path overview ------------------------------------------------ */

.kpath{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;border:1px solid var(--line);box-shadow:var(--sh-1);
}
.kpath>li{display:flex;min-width:0}

.kstage{
  flex:1 1 auto;display:flex;flex-direction:column;gap:8px;
  min-width:0;background:var(--paper);padding:20px 16px 18px;
  position:relative;color:inherit;text-decoration:none;
  box-shadow:0 0 0 1px var(--line);
  transition:background var(--t-mid),box-shadow var(--t-mid);
}
.kstage::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ir);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease);
}
.kstage:hover,.kstage:focus-visible{
  background:#fff;box-shadow:0 0 0 1px var(--line-2),var(--sh-2),var(--bevel);z-index:1;
}
.kstage:hover::before,.kstage:focus-visible::before{transform:scaleY(1)}
.kstage:hover .kstage__meta .arw,.kstage:focus-visible .kstage__meta .arw{transform:translateX(3px)}

.kstage__no{font-family:var(--ff-mono);font-size:.72rem;color:var(--ir);letter-spacing:.12em}
.kstage__title{
  font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
  font-size:.98rem;line-height:1.2;letter-spacing:-.01em;
}
.kstage__note{font-size:.8rem;color:var(--ink-70);line-height:1.5;flex:1 1 auto;overflow-wrap:break-word}
.kstage__meta{
  margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-45);
}
.kstage__meta .arw{transition:transform var(--t-mid) var(--ease)}

/* Fragment-navigation focus target: sections get tabindex="-1" so a jump
   from a stage card or pill link lands visible, keyboard-reachable focus
   on the whole stage group without any JS. */
section[id^="stage-"]{scroll-margin-top:90px}
section[id^="stage-"]:focus-visible,
section[id^="stage-"]:focus{outline:2px solid var(--ir);outline-offset:-2px;border-radius:1px}

/* ---- Empty-stage notice (zero fabrication: no placeholder article) ------ */

.kempty{
  padding:26px 22px;border:1px dashed var(--line-2);border-radius:var(--radius);
  color:var(--ink-45);font-size:.92rem;font-style:italic;max-width:52ch;
}

/* ---- Secondary view: full archive by date -------------------------------- */

.karchive{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.karchive__row{border-bottom:1px solid var(--line)}
.karchive__link{
  display:flex;align-items:center;gap:16px;padding:15px 6px;min-width:0;
  text-decoration:none;color:inherit;transition:background var(--t-mid);
}
.karchive__link:hover,.karchive__link:focus-visible{background:var(--tint)}
.karchive__link:hover .arw,.karchive__link:focus-visible .arw{transform:translateX(3px)}
.karchive__date{
  font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-45);
  white-space:nowrap;min-width:72px;flex:0 0 auto;
}
.karchive__title{
  font-family:var(--ff-display);font-weight:700;font-size:.92rem;
  letter-spacing:-.01em;flex:1 1 auto;min-width:0;overflow-wrap:break-word;
}
.karchive__stage{
  font-family:var(--ff-mono);font-size:.66rem;color:var(--ink-45);
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;flex:0 0 auto;
}
.karchive .arw{transition:transform var(--t-mid) var(--ease);flex:0 0 auto}

/* ---- Responsive: 1180 / 900 / 640 / 400 — never a horizontal scrollbar -- */

@media (max-width:1180px){
  .kpath{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .karchive__stage{display:none}
}
@media (max-width:640px){
  .kpath{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .kpath{grid-template-columns:1fr}
  .karchive__link{flex-wrap:wrap;row-gap:4px}
  .karchive__date{order:1}
  .karchive__title{order:2;flex:1 1 100%}
  .karchive .arw{order:3}
}

/* prefers-reduced-motion is already handled globally in main.css (the
   universal *{transition:none!important} + [data-reveal] reset), so no
   duplicate rule is needed here — .kstage/.karchive__link hover states
   simply become instant, non-animated state changes under that rule. */