/* Winston V3 — Docs screen styles.
   Surface: #docs (and sub-tabs #docs/features, #docs/architecture, etc.).
   Pattern modeled on operations.css subtab styling. */

#screen-docs .subtab-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

#screen-docs .subtab-btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
#screen-docs .subtab-btn:hover { color: var(--ink); }
#screen-docs .subtab-btn.is-active {
  color: var(--ai);
  border-bottom-color: var(--ai);
  font-weight: var(--weight-semi);
}

/* Features controls row — group-by, sort-by, filter input. */
#screen-docs .docs-features-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
#screen-docs .docs-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
#screen-docs .docs-control-label {
  font-size: var(--type-xs);
  color: var(--ink-muted);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#screen-docs .docs-control select,
#screen-docs .docs-control input[type="search"] {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: var(--type-sm);
}
#screen-docs .docs-control select:focus,
#screen-docs .docs-control input[type="search"]:focus {
  outline: none;
  border-color: var(--ai);
}
#screen-docs .docs-control-filter input[type="search"] {
  min-width: 240px;
}
#screen-docs .docs-control-count {
  margin-left: auto;
  font-size: var(--type-sm);
  color: var(--ink-muted);
  padding-bottom: var(--space-2);
}
@media (max-width: 720px) {
  #screen-docs .docs-control-filter input[type="search"] {
    min-width: 0;
    width: 100%;
  }
  #screen-docs .docs-control-filter { flex: 1 1 100%; }
  #screen-docs .docs-control-count { margin-left: 0; }
}

/* Feature cards grid responds down to single-column on phone. */
#screen-docs .docs-cards { /* uses inline grid-template; this just sets gap fallback */
  gap: var(--space-3);
}
#screen-docs .docs-cat { scroll-margin-top: var(--space-6); }
#screen-docs .docs-cat .card {
  border: 1px solid var(--border);
  background: var(--surface-1);
  padding: var(--space-3);
  border-radius: 6px;
}
#screen-docs .docs-cat .card h3 {
  font-size: var(--type-base);
  font-weight: var(--weight-semi);
  margin: 0;
}
#screen-docs .docs-cat .badge {
  white-space: nowrap;
  font-weight: var(--weight-medium);
}
#screen-docs .docs-tracker-link {
  text-decoration: none;
  color: var(--ai);
}
#screen-docs .docs-tracker-link:hover { text-decoration: underline; }

/* Flows time chip — prominent clock time on each flow card header. */
#screen-docs .docs-time-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: var(--type-xs);
  font-weight: var(--weight-semi);
  padding: 2px var(--space-2);
  background: var(--surface-2);
  color: var(--ai);
  border: 1px solid var(--border);
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#screen-docs .docs-time-chip-soft {
  color: var(--ink-muted);
  font-family: inherit;
  font-weight: var(--weight-medium);
  font-size: var(--type-xs);
}

/* Swim-lane grid — Flows tab default view. */

#screen-docs .docs-lane-alwayson {
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 6px;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-4);
  align-items: center;
}
#screen-docs .docs-lane-alwayson-label {
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: var(--weight-semi);
  color: var(--ink-muted);
}
#screen-docs .docs-lane-alwayson-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#screen-docs .docs-lanes-grid {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
#screen-docs .docs-lane-gutter {
  position: relative;
  border-right: 1px solid var(--border);
}
#screen-docs .docs-lane-tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed var(--border);
}
#screen-docs .docs-lane-tick-label {
  position: absolute;
  top: -8px;
  right: var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: var(--type-xs);
  color: var(--ink-muted);
  background: var(--surface-0, var(--surface-1));
  padding: 0 4px;
}

#screen-docs .docs-lane-cols {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
  overflow-x: auto;
}
#screen-docs .docs-lane-col {
  min-width: 140px;
  display: flex;
  flex-direction: column;
}
#screen-docs .docs-lane-col-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-1);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--type-sm);
  font-weight: var(--weight-semi);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
#screen-docs .docs-lane-col-head-title {
  flex: 1 1 auto;
  text-align: left;
}
#screen-docs .docs-lane-col-head-count {
  flex-shrink: 0;
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  background: var(--surface-2);
  padding: 0 var(--space-2);
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
#screen-docs .docs-lane-empty {
  font-size: var(--type-xs);
  font-style: italic;
  text-align: center;
  padding: var(--space-2) 0;
  position: absolute;
  left: 0;
  right: 0;
}
/* In the no-time variant (Features lanes), the empty placeholder is in
   normal flow rather than absolutely positioned. */
#screen-docs .docs-lanes-grid-notime .docs-lane-empty {
  position: static;
  padding: var(--space-4) 0;
}
#screen-docs .docs-lane-col-body {
  position: relative;
  background: var(--surface-0, transparent);
}

#screen-docs .docs-lane-refline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid var(--ai);
  opacity: 0.35;
}
#screen-docs .docs-lane-refline::after {
  content: attr(data-label);
  position: absolute;
  right: 4px;
  top: -8px;
  font-size: var(--type-xs);
  color: var(--ai);
  background: var(--surface-0, var(--surface-1));
  padding: 0 4px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semi);
}

#screen-docs .docs-lane-pill {
  position: absolute;
  left: 2px;
  right: 2px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ai);
  border-radius: 4px;
  padding: 2px var(--space-2);
  font-size: var(--type-xs);
  line-height: 1.2;
  overflow: hidden;
  cursor: default;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
#screen-docs .docs-lane-pill-band {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ai) 12%, var(--surface-1) 88%) 0,
    var(--surface-1) 100%);
  align-items: flex-start;
  padding-top: 4px;
}
#screen-docs .docs-lane-pill-time {
  font-family: var(--font-mono, monospace);
  font-size: var(--type-xs);
  color: var(--ai);
  font-weight: var(--weight-semi);
  flex-shrink: 0;
}
#screen-docs .docs-lane-pill-name {
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screen-docs .docs-lane-pill.is-in-progress { border-left-color: var(--ink-warn, #fbbf24); }
#screen-docs .docs-lane-pill.is-planned     { border-left-color: var(--ink-muted); }
#screen-docs .docs-lane-pill.is-deprecated  { border-left-color: var(--ink-muted); opacity: 0.6; }

#screen-docs .docs-flow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ai);
  border-radius: 4px;
  font-size: var(--type-xs);
}
#screen-docs .docs-flow-pill.is-in-progress { border-left-color: var(--ink-warn, #fbbf24); }
#screen-docs .docs-flow-pill.is-planned     { border-left-color: var(--ink-muted); }
#screen-docs .docs-flow-pill.is-deprecated  { border-left-color: var(--ink-muted); opacity: 0.6; }
#screen-docs .docs-flow-pill-name {
  font-weight: var(--weight-medium);
}
#screen-docs .docs-flow-pill-sleeve {
  font-family: var(--font-mono, monospace);
  font-size: var(--type-xs);
  color: var(--ink-muted);
}

/* Non-time lane variant — Features tab swim lanes. Same column skeleton
   as Flows but stacks cards in normal flow (no absolute positioning, no
   time axis). */
#screen-docs .docs-lanes-grid-notime {
  display: block;
}
#screen-docs .docs-lanes-grid-notime .docs-lane-cols {
  display: grid;
  grid-auto-columns: minmax(220px, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
  overflow-x: auto;
}
#screen-docs .docs-lanes-grid-notime .docs-lane-col {
  min-width: 220px;
  display: flex;
  flex-direction: column;
}
#screen-docs .docs-lanes-grid-notime .docs-lane-col-body-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  height: auto;
  min-height: 80px;
}
/* Feature card in a lane — name + what + trigger, status border-left. */
#screen-docs .docs-lane-feature {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ai);
  border-radius: 4px;
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
#screen-docs .docs-lane-feature.is-in-progress { border-left-color: var(--ink-warn, #fbbf24); }
#screen-docs .docs-lane-feature.is-planned     { border-left-color: var(--ink-muted); }
#screen-docs .docs-lane-feature.is-deprecated  { border-left-color: var(--ink-muted); opacity: 0.6; }
#screen-docs .docs-lane-feature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
#screen-docs .docs-lane-feature-name {
  font-size: var(--type-sm);
  font-weight: var(--weight-semi);
  line-height: 1.3;
}
#screen-docs .docs-lane-feature-what {
  font-size: var(--type-xs);
  margin: 0;
  line-height: 1.4;
  color: var(--ink-soft, var(--ink));
}
#screen-docs .docs-lane-feature-trigger {
  font-size: var(--type-xs);
  font-family: var(--font-mono, monospace);
}

#screen-docs .docs-lane-flat {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
#screen-docs .docs-lane-flat-title {
  font-size: var(--type-base);
  margin: 0 0 var(--space-3) 0;
}
#screen-docs .docs-lane-flat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Mobile fallback — swim lanes don't scale below ~720px viewport. The
   bucket-card view is rendered server-side regardless; this just shifts
   the swim-lane DOM out of layout and surfaces a note pointing at the
   View toggle. */
@media (max-width: 720px) {
  #screen-docs .docs-lanes-grid {
    display: block;
    overflow-x: auto;
  }
  #screen-docs .docs-lane-gutter { display: none; }
  #screen-docs .docs-lane-alwayson {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* Markdown body in expanded <details> + glossary. */
#screen-docs .docs-md-body {
  font-size: var(--type-sm);
  line-height: 1.55;
}
#screen-docs .docs-md-body h1,
#screen-docs .docs-md-body h2,
#screen-docs .docs-md-body h3,
#screen-docs .docs-md-body h4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
#screen-docs .docs-md-body h1 { font-size: var(--type-xl); }
#screen-docs .docs-md-body h2 { font-size: var(--type-lg); }
#screen-docs .docs-md-body h3 { font-size: var(--type-base); }
#screen-docs .docs-md-body p,
#screen-docs .docs-md-body ul,
#screen-docs .docs-md-body ol {
  margin: var(--space-2) 0;
}
#screen-docs .docs-md-body code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 0 4px;
  border-radius: 3px;
}
#screen-docs .docs-md-body pre {
  background: var(--surface-2);
  padding: var(--space-3);
  border-radius: 4px;
  overflow-x: auto;
  font-size: var(--type-xs);
}
#screen-docs .docs-md-body pre code {
  background: transparent;
  padding: 0;
}
#screen-docs .docs-md-body table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-3) 0;
  font-size: var(--type-xs);
}
#screen-docs .docs-md-body th,
#screen-docs .docs-md-body td {
  padding: var(--space-2);
  border: 1px solid var(--border);
  text-align: left;
}
#screen-docs .docs-md-body th { background: var(--surface-2); }
#screen-docs .docs-md-body blockquote {
  margin: var(--space-3) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--border);
  color: var(--ink-muted);
}

/* Accordion. */
#screen-docs .docs-list details {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--space-3);
}
#screen-docs .docs-list summary {
  list-style: none;
  outline: none;
}
#screen-docs .docs-list summary::-webkit-details-marker { display: none; }
#screen-docs .docs-list details[open] summary {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}

/* ── Flows: List by time (kit Flows view) ──────────────────────────── */
#screen-docs .docs-list-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
#screen-docs .docs-list-table thead th {
  text-align: left; font-size: var(--type-xs); font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted);
  padding: 0 var(--space-3) var(--space-2); border-bottom: 1px solid var(--border);
}
#screen-docs .docs-list-table tbody td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); font-size: var(--type-sm); }
#screen-docs .docs-list-table tbody tr:last-child td { border-bottom: none; }
#screen-docs .docs-list-time { color: var(--ink-2); white-space: nowrap; width: 110px; }
#screen-docs .docs-list-routine { color: var(--ink); }
#screen-docs .docs-list-engine { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
#screen-docs .docs-list-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
#screen-docs .docs-list-dot[data-sleeve="swing"]    { background: var(--sleeve-swing); }
#screen-docs .docs-list-dot[data-sleeve="scalp"]    { background: var(--sleeve-scalp); }
#screen-docs .docs-list-dot[data-sleeve="rotation"] { background: var(--sleeve-rotation); }
#screen-docs .docs-list-dot[data-sleeve="short"]    { background: var(--sleeve-short); }
#screen-docs .docs-list-dot[data-sleeve="options"]  { background: var(--sleeve-options); }
#screen-docs .docs-list-dot[data-sleeve="reversion"]{ background: var(--sleeve-reversion); }
#screen-docs .docs-list-dot[data-sleeve="trend"]    { background: var(--sleeve-trend); }
#screen-docs .docs-list-dot[data-sleeve="income"]   { background: var(--sleeve-income); }
#screen-docs .docs-list-dot[data-sleeve="pead"]     { background: var(--sleeve-pead); }
#screen-docs .docs-list-dot[data-sleeve="cta"]     { background: var(--sleeve-cta); }
#screen-docs .docs-list-dot[data-sleeve="momentum"] { background: var(--sleeve-momentum); }

/* ── Flows: Architecture map (kit Flows view) ──────────────────────── */
#screen-docs .docs-arch { max-width: 680px; margin: var(--space-4) auto 0; display: flex; flex-direction: column; align-items: center; }
#screen-docs .docs-arch-header { text-align: center; font-size: var(--type-md); color: var(--ink); margin-bottom: var(--space-4); }
#screen-docs .docs-arch-stage-label {
  font-size: var(--type-xs); font-weight: var(--weight-semi); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--ink-muted); margin: var(--space-1) 0;
}
#screen-docs .docs-arch-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; width: 100%; }
#screen-docs .docs-arch-node {
  display: flex; align-items: center; gap: var(--space-3); flex: 1 1 200px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ai-line);
  border-radius: var(--radius-md); padding: var(--space-3);
}
#screen-docs .docs-arch-node.is-accent { border-left-color: var(--gold); background: var(--sleeve-swing-soft); }
#screen-docs .docs-arch-node-ic {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--ai-soft); color: var(--ai);
}
#screen-docs .docs-arch-node-ic svg, #screen-docs .docs-arch-node-ic .lucide { width: 16px; height: 16px; }
#screen-docs .docs-arch-node.is-accent .docs-arch-node-ic { background: var(--sleeve-swing-soft); color: var(--gold); }
#screen-docs .docs-arch-node-title { font-size: var(--type-sm); font-weight: var(--weight-semi); color: var(--ink); }
#screen-docs .docs-arch-node-sub { font-size: var(--type-xs); margin-top: 1px; }
#screen-docs .docs-arch-arrow { color: var(--ink-faint); display: flex; justify-content: center; padding: 2px 0; }
#screen-docs .docs-arch-arrow svg { width: 18px; height: 18px; }
#screen-docs .docs-arch-footer {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-4);
  background: var(--ai-soft); color: var(--ai); border-radius: var(--radius-pill, 999px);
  padding: var(--space-2) var(--space-4); font-size: var(--type-sm); font-weight: var(--weight-semi);
}
#screen-docs .docs-arch-footer svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Docs reference card grid (Engines / Architecture / User guide) ── */
#screen-docs .docs-doc-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: var(--space-2); }
#screen-docs .docs-doc-card {
  display: flex; align-items: flex-start; gap: var(--space-3); text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3); cursor: pointer; font: inherit; color: inherit;
}
#screen-docs .docs-doc-card:hover { background: var(--surface-hover); }
#screen-docs .docs-doc-card.is-active { border-color: var(--ai); box-shadow: inset 3px 0 0 var(--ai); }
#screen-docs .docs-doc-ic { color: var(--ink-3); display: flex; flex-shrink: 0; margin-top: 1px; }
#screen-docs .docs-doc-ic svg { width: 16px; height: 16px; }
#screen-docs .docs-doc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#screen-docs .docs-doc-file { font-size: var(--type-sm); font-weight: var(--weight-semi); color: var(--ink); }
#screen-docs .docs-doc-desc { font-size: var(--type-xs); line-height: 1.4; }
#screen-docs .docs-doc-reader { margin-top: var(--space-4); padding: var(--space-5); }
#screen-docs .docs-doc-reader[hidden] { display: none; }

/* ── Glossary: kit 2-column definition table ───────────────────────── */
#screen-docs .docs-glossary-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
#screen-docs .docs-gloss-term {
  text-align: left; vertical-align: top; font-weight: var(--weight-semi); color: var(--ink);
  width: 200px; padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}
#screen-docs .docs-gloss-def {
  vertical-align: top; color: var(--ink-2); font-size: var(--type-sm);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline);
}
#screen-docs .docs-gloss-def > :first-child { margin-top: 0; }
#screen-docs .docs-gloss-def > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  #screen-docs .docs-glossary-table, #screen-docs .docs-glossary-table tbody,
  #screen-docs .docs-glossary-table tr { display: block; }
  #screen-docs .docs-gloss-term { width: auto; padding-bottom: 0; border-bottom: none; }
  #screen-docs .docs-gloss-def { padding-top: var(--space-1); }
}