/* Six-Op Build Lab — additions on top of explainer.css + build.css + pm.css
   (foundations band, ritual blocks, reuse ledger, combined lineage + merged-context explorer) */

/* ───────── hero result tag reuse ───────── */
.role-tag .lk { color: var(--ot-fg-subtle); }

/* ───────── part divider band ───────── */
.band {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ot-border);
}
.band .bn {
  font-family: var(--ot-font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ot-fg-subtle);
  border: 1px solid var(--ot-border-strong); border-radius: var(--ot-radius-pill);
  padding: 5px 12px;
}
.band .bt { font-family: var(--ot-font-display); font-weight: 800; font-size: 22px; color: #fff; letter-spacing: -0.01em; }

/* ───────── ritual block ───────── */
.ritual { position: relative; margin: 0 0 18px; padding: 30px 0 8px; border-top: 1px solid var(--ot-border); }
.ritual:first-of-type { border-top: none; }
.ritual-head { display: flex; align-items: flex-start; gap: 16px; }
.ritual-head .rnum {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; font-family: var(--ot-font-display); font-weight: 800;
  font-size: 20px; color: var(--ot-coral-400);
  background: var(--c-op-soft); border: 1px solid var(--c-op-line);
}
.ritual-head .rmeta { flex: 1; min-width: 0; }
.ritual-head .opname {
  display: inline-block; margin-top: 8px; font-family: var(--ot-font-mono); font-size: 12.5px;
  color: var(--ot-coral-400); background: var(--c-op-soft);
  border: 1px solid var(--c-op-line); border-radius: var(--ot-radius-pill); padding: 3px 11px;
}
.ritual-head .rsub { font-size: 15px; color: var(--ot-fg-muted); margin: 10px 0 0; line-height: 1.55; }
.ritual.flagship .ritual-head .rnum { color: #fff; background: var(--ot-gradient-brand); border: none; }

/* flagship marker pill */
.flag-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle;
  font-family: var(--ot-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #06112e; background: linear-gradient(95deg, var(--ot-blue-400), var(--ot-coral-400));
  border-radius: var(--ot-radius-pill); padding: 3px 9px; font-weight: 700;
}

/* ───────── reuse ledger ───────── */
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
@media (max-width: 760px) { .ledger { grid-template-columns: 1fr; } }
.led-col { border: 1px solid var(--ot-border); border-radius: var(--ot-radius-md); padding: 14px 15px; background: rgba(255,255,255,0.015); }
.led-col .led-h {
  font-family: var(--ot-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ot-fg-subtle); margin-bottom: 11px; display: flex; align-items: center; gap: 7px;
}
.led-col .led-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.led-col.inherit .led-h::before { background: var(--ot-fg-subtle); }
.led-col.reuse   { border-color: rgba(110,224,200,0.32); background: rgba(110,224,200,0.05); }
.led-col.reuse .led-h { color: #6ee0c8; }
.led-col.reuse .led-h::before { background: #6ee0c8; }
.led-col.new     { border-color: var(--c-op-line); background: var(--c-op-soft); }
.led-col.new .led-h { color: var(--ot-coral-400); }
.led-col.new .led-h::before { background: var(--ot-coral-400); }
.lchips { display: flex; flex-direction: column; gap: 7px; }
.lchip {
  font-family: var(--ot-font-mono); font-size: 12px; line-height: 1.3; padding: 6px 10px;
  border-radius: 7px; border: 1px solid var(--ot-border-strong); color: var(--ot-fg-muted);
  background: var(--ot-navy-800); display: flex; align-items: center; gap: 8px;
}
.lchip::before { content: ""; width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.lchip.f::before { background: var(--c-frame); }
.lchip.c::before { background: var(--c-cog); }
.lchip.o::before { background: var(--c-op); }
.lchip.f { color: #aab8ff; border-color: var(--c-frame-line); }
.lchip.c { color: #c7a6ec; border-color: var(--c-cog-line); }
.lchip.o { color: var(--ot-coral-400); border-color: var(--c-op-line); }
.led-col .none { font-size: 12.5px; color: var(--ot-fg-subtle); font-style: italic; }

/* compact before/after for rituals (tighter than pm.css default) */
.ritual .ba { margin: 20px 0; }
.ritual .ba-card { padding: 18px; }
.ritual .ba-card li { font-size: 14px; margin: 7px 0; }

/* result output accent (reuse code block, gradient dot) */
.code-head .tag.out { color: var(--ot-coral-400); border-color: var(--c-op-line); }

/* ───────── combined lineage + merged-context explorer ───────── */
.lineage .lineage-top .seg-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.lineage .hint { font-size: 12px; color: var(--ot-fg-subtle); font-style: italic; }

/* stretch the graph column a touch taller for 7 nodes */
.lin-graph { min-height: 300px; display: flex; align-items: center; }

/* artifact chip groups already styled in pm.css; add reuse marker */
.chip-art .reuse-dot {
  margin-left: auto; font-family: var(--ot-font-mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #6ee0c8; border: 1px solid rgba(110,224,200,0.4);
  border-radius: 999px; padding: 1px 6px;
}

/* merged-context panel (full width under the grid) */
.merged-panel { border-top: 1px solid var(--ot-border); }
.merged-head {
  padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--ot-border);
}
.merged-head .mh-title { font-family: var(--ot-font-display); font-weight: 700; color: #fff; font-size: 15px; }
.merged-head .mh-kind {
  font-family: var(--ot-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: var(--ot-radius-pill); border: 1px solid var(--ot-border-strong); color: var(--ot-fg-subtle);
}
.merged-head .mh-kind.cog { color: #c7a6ec; border-color: var(--c-cog-line); }
.merged-head .mh-kind.op  { color: var(--ot-coral-400); border-color: var(--c-op-line); }
.merged-stats { margin-left: auto; display: flex; gap: 16px; font-family: var(--ot-font-mono); font-size: 11.5px; color: var(--ot-fg-subtle); }
.merged-stats b { color: #fff; }
.merged-stats .ovc { color: #ffc97a; }
.merged-cogs {
  padding: 11px 20px; border-bottom: 1px solid var(--ot-border); font-size: 12.5px; color: var(--ot-fg-subtle);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.merged-cogs .ml { font-family: var(--ot-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.merged-cogs .cg { font-family: var(--ot-font-mono); font-size: 11.5px; color: #c7a6ec; border: 1px solid var(--c-cog-line); border-radius: 999px; padding: 2px 9px; }
.merged-cogs .cg.reused { color: #6ee0c8; border-color: rgba(110,224,200,0.4); }

.merged-blocks { padding: 16px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 760px) { .merged-blocks { grid-template-columns: 1fr; } }
.merged-blocks .pblock { margin: 0; }
.merged-blocks .pblock.ovr { background: rgba(255,201,122,0.06); }
.pblock .src { font-family: var(--ot-font-mono); font-size: 10px; opacity: 0.75; }
.pblock .was {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.12);
  font-size: 11.5px; color: var(--ot-fg-subtle); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.3);
}
.merged-empty { padding: 40px 20px; text-align: center; color: var(--ot-fg-subtle); font-style: italic; }

/* explorer legend */
.lin-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--ot-border); font-size: 11.5px; color: var(--ot-fg-subtle); }
.lin-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lin-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.lin-legend i.frame { background: var(--c-frame); }
.lin-legend i.policy { background: var(--ot-coral-400); }
.lin-legend i.ovr { background: #ffc97a; }
.lin-legend i.reuse { background: #6ee0c8; }