/* k8or-os components, built on the K8AI stack.css palette (--stk-*) */

/* OS layer bar: 5 segments instead of 11 */
.stackbar.os { grid-template-columns: repeat(5, 1fr); max-width: 34rem; }

/* Cards */
.md-typeset .k-cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1em 0 1.4em; }
.md-typeset .k-card {
  border: 1px solid var(--stk-line); border-radius: 6px; background: var(--stk-panel);
  padding: .9em 1em; transition: border-color .15s, transform .15s;
}
.md-typeset .k-card:hover { border-color: var(--stk-cyan); transform: translateY(-1px); }
.md-typeset .k-card p { margin: 0 0 .4em; font-size: .68rem; color: var(--md-default-fg-color--light); }
.md-typeset .k-card p:last-child { margin-bottom: 0; }
.md-typeset .k-card .k-k {
  font-family: var(--md-code-font-family); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stk-green); margin-bottom: .3em;
}
.md-typeset .k-card .k-t { font-family: var(--md-code-font-family); font-weight: 700; font-size: .78rem; color: var(--md-default-fg-color); margin-bottom: .35em; }
.md-typeset .k-card.bad { border-left: 3px solid var(--stk-red); }
.md-typeset .k-card.bad .k-k { color: var(--stk-red); }

/* Disk layout */
.md-typeset .k-disk { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin: .6em 0 1.4em; font-family: var(--md-code-font-family); }
.md-typeset .k-part { border: 1px solid var(--stk-line); border-radius: 4px; background: var(--stk-panel); padding: .7em .8em; font-size: .6rem; color: var(--stk-muted); line-height: 1.5; }
.md-typeset .k-part b { display: block; color: var(--stk-green); font-size: .68rem; margin: .15em 0 .3em; }
.md-typeset .k-part.ro { box-shadow: inset 0 2px 0 var(--stk-green); }
.md-typeset .k-part.rw { border-style: dashed; }
.md-typeset .k-part.rw b { color: var(--stk-amber); }

/* Boot steps */
.md-typeset .k-steps { counter-reset: s; margin: .8em 0 1.4em; display: grid; gap: 6px; }
.md-typeset .k-step {
  display: grid; grid-template-columns: 2.4em 1fr; gap: .8em; align-items: start;
  border: 1px solid var(--stk-line); border-radius: 6px; background: var(--stk-panel); padding: .65em .9em;
  font-size: .7rem;
}
.md-typeset .k-step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--md-code-font-family); color: var(--stk-green); font-weight: 700;
  border: 1px solid var(--stk-green); border-radius: 4px; text-align: center; line-height: 1.9em;
}
.md-typeset .k-step.guard { border-color: var(--stk-amber); }
.md-typeset .k-step.guard::before { color: var(--stk-amber); border-color: var(--stk-amber); }
.md-typeset .k-step p { margin: 0; color: var(--md-default-fg-color--light); }
.md-typeset .k-step p strong { color: var(--md-default-fg-color); font-family: var(--md-code-font-family); }

/* Pipeline */
.md-typeset .k-pipe { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: .8em 0 1.4em; }
.md-typeset .k-pipe > div { position: relative; border: 1px solid var(--stk-line); border-radius: 4px; background: var(--stk-panel); padding: .7em .8em; font-size: .64rem; color: var(--md-default-fg-color--light); }
.md-typeset .k-pipe > div p { margin: 0; }
.md-typeset .k-pipe > div strong { display: block; font-family: var(--md-code-font-family); color: var(--stk-green); text-transform: uppercase; font-size: .6rem; letter-spacing: .08em; margin-bottom: .3em; }
.md-typeset .k-pipe > div.llm { border-color: var(--stk-cyan); background: color-mix(in srgb, var(--stk-cyan) 10%, transparent); }
.md-typeset .k-pipe > div.llm strong { color: var(--stk-cyan); }

/* Roadmap */
.md-typeset .k-road { position: relative; margin: 1em 0 1.4em; padding-left: 2.6em; }
.md-typeset .k-road::before { content: ""; position: absolute; left: .95em; top: .6em; bottom: .6em; width: 1px; background: linear-gradient(var(--stk-green), var(--stk-line)); }
.md-typeset .k-ph { position: relative; border: 1px solid var(--stk-line); border-radius: 6px; background: var(--stk-panel); padding: .8em 1em; margin-bottom: 8px; }
.md-typeset .k-ph::before {
  content: attr(data-n); position: absolute; left: -2.6em; top: .7em; width: 1.9em; height: 1.9em;
  border: 1px solid var(--stk-green); border-radius: 50%; background: var(--md-default-bg-color);
  color: var(--stk-green); font-family: var(--md-code-font-family); font-weight: 700; font-size: .7rem;
  display: grid; place-items: center;
}
.md-typeset .k-ph p { margin: 0 0 .4em; font-size: .68rem; color: var(--md-default-fg-color--light); }
.md-typeset .k-ph .k-ph-t { font-family: var(--md-code-font-family); font-weight: 700; font-size: .78rem; color: var(--md-default-fg-color); }
.md-typeset .k-ph .k-ph-t em { font-style: normal; font-weight: 400; color: var(--stk-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; margin-left: .6em; }
.md-typeset .k-ph .k-done { margin: .5em 0 0; padding-top: .45em; border-top: 1px dashed var(--stk-line); font-family: var(--md-code-font-family); font-size: .62rem; color: var(--md-default-fg-color); }
.md-typeset .k-ph .k-done::before { content: "done when → "; color: var(--stk-green); }

/* Table cell markers */
.md-typeset .y { color: var(--stk-green); font-family: var(--md-code-font-family); }
.md-typeset .n { color: var(--stk-red); font-family: var(--md-code-font-family); }
.md-typeset .m { color: var(--stk-muted); font-family: var(--md-code-font-family); }
.md-typeset tr.k-self td { background: color-mix(in srgb, var(--stk-green) 8%, transparent); }

/* Merge diagram */
.md-typeset .k-merge { font-family: var(--md-code-font-family); font-size: .64rem; margin: .8em 0 1.4em; max-width: 34rem; }
.md-typeset .k-merge .v { border: 1px solid var(--stk-green); background: color-mix(in srgb, var(--stk-green) 10%, transparent); border-radius: 4px; padding: .6em; text-align: center; color: var(--md-default-fg-color); }
.md-typeset .k-merge .a { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; color: var(--stk-green); line-height: 1.8; }
.md-typeset .k-merge .i { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.md-typeset .k-merge .i span { border: 1px solid var(--stk-line); border-radius: 4px; background: var(--stk-panel); padding: .55em .3em; text-align: center; color: var(--md-default-fg-color); }
.md-typeset .k-merge .i small { display: block; color: var(--stk-muted); font-size: .55rem; }

/* Home teaser links */
.md-typeset .k-next { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 1em 0; }
.md-typeset .k-next a {
  display: block; border: 1px dashed var(--stk-line); border-radius: 6px; padding: .6em .9em;
  font-family: var(--md-code-font-family); font-size: .66rem; color: var(--md-default-fg-color);
}
.md-typeset .k-next a::before { content: "▸ "; color: var(--stk-green); }
.md-typeset .k-next a:hover { border-color: var(--stk-cyan); color: var(--stk-cyan); }