/* ==========================================================================
   fleet.css — the real agent fleet, the stack groups and the process
   changelog. Shared by agents.html, flow-agents.html and operating-model.html.
   Plain boxes only: no animated diagram, no rounded corners anywhere.
   ========================================================================== */

/* Only the deal-flow tab still carries an animated diagram. On the other three
   the play control and the dot legend describe nothing, so they are removed
   from the bar rather than left sitting there inert. */
.flow-bar.no-anim .flow-play,
.flow-bar.no-anim .flow-legend{display:none}

/* Seven columns squeezed into a phone turn every cell into a two-word column.
   Give the table a floor and let .tbl-wrap scroll it instead. */
.node-tbl{min-width:940px}

/* ==========================================================================
   Agent fleet — plain boxes
   ========================================================================== */
.ag-groups{display:flex;flex-direction:column;gap:40px}
.ag-group[hidden]{display:none}

.ag-group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:14px;margin-bottom:20px;
  border-bottom:1px solid var(--border);
}
.ag-group-head h3{
  font-size:18px;line-height:24px;font-weight:600;color:var(--text);
  display:inline-flex;align-items:center;gap:10px;
}
.ag-group-note{color:var(--muted-2);font-size:14px;line-height:20px;max-width:64ch}

.ag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ag-box{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  border:1px solid var(--border);border-radius:0;background:var(--card);
  padding:20px;transition:border-color .18s,background .18s;
}
.ag-box:hover{border-color:var(--border-2);background:#191512}
.ag-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ag-num{
  font-family:var(--font-mono);font-size:12px;line-height:16px;
  color:var(--faint);flex:none;
}
.ag-name{font-size:16px;line-height:22px;font-weight:600;color:var(--text)}
.ag-desc{color:var(--muted);font-size:14px;line-height:21px}
.ag-where{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--hairline);
  font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted-2);
}
.ag-empty{padding:48px 0;text-align:center;color:var(--muted-2);font-size:14px;line-height:20px}

/* the five-step pipeline, as a plain ruled strip */
.ag-steps{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--border)}
.ag-step{padding:20px;border-right:1px solid var(--border);min-width:0}
.ag-step:last-child{border-right:none}
.ag-step .st{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--faint)}
.ag-step h4{font-size:15px;line-height:21px;font-weight:600;margin-top:8px;color:var(--text)}
.ag-step p{color:var(--muted);font-size:13px;line-height:19px;margin-top:6px}

/* ==========================================================================
   Stack — logos grouped by function
   ========================================================================== */
.stack-groups{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.stack-group{padding:28px 0;border-bottom:1px solid var(--border)}
.stack-group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px;
}
.stack-group-head h3{font-size:16px;line-height:24px;font-weight:600;color:var(--text)}
.stack-group-head .note{color:var(--muted-2);font-size:13px;line-height:20px;max-width:60ch}

.fl-stack-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stack-item{
  display:flex;align-items:flex-start;gap:14px;min-width:0;
  border:1px solid var(--border);border-radius:0;background:var(--card);padding:16px;
}
/* the marks are dark-on-transparent SVGs, so they need a light plate —
   same treatment as .tool-row .lg on flow-stack.html */
.stack-mark{
  width:36px;height:36px;flex:none;border-radius:0;
  background:#f5f5f4;
  display:flex;align-items:center;justify-content:center;
}
.stack-mark img{width:20px;height:20px;object-fit:contain}
.stack-mark.mono-only{background:var(--surface);border:1px solid var(--border-2)}
.stack-mark .mm{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted)}
.stack-item .tx{min-width:0}
.stack-item h4{font-size:15px;line-height:20px;font-weight:600;color:var(--text)}
.stack-item p{color:var(--muted);font-size:13px;line-height:19px;margin-top:5px}

/* ==========================================================================
   Process changelog — same format as changelog.html
   ========================================================================== */
.cl-list{border-top:1px solid var(--border)}
.cl-list .rel{display:grid;grid-template-columns:4fr 8fr;border-bottom:1px solid var(--border)}
.cl-list .rel:last-child{border-bottom:none}
.cl-list .rel-meta{
  display:flex;flex-direction:column;align-items:flex-start;
  border-right:1px solid var(--border);
}
.cl-list .rel-stamp{
  width:100%;padding:24px 24px 24px 0;
  display:flex;flex-direction:column;gap:2px;
}
.cl-list .rel-stamp .ver{
  font-family:var(--font-mono);font-size:14px;line-height:20px;font-weight:500;color:var(--text);
}
.cl-list .rel-stamp time{font-size:12px;line-height:16px;font-weight:400;color:var(--muted)}
.cl-list .rel-body{padding:24px 0 32px 24px;display:flex;flex-direction:column;gap:16px}
.cl-list .rel-body h2{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.cl-list .rel-notes{display:flex;flex-direction:column;gap:12px}
.cl-list .rel-tag{
  font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;
}
.cl-list .rel-tag.new{color:var(--accent)}
.cl-list .rel-tag.improved{color:var(--to-grey-400)}
.cl-list .rel-tag.fixed{color:var(--to-grey-300)}
.cl-list .rel-notes ul{padding-left:18px;display:flex;flex-direction:column;gap:6px}
.cl-list .rel-notes li{font-size:14px;line-height:20px;font-weight:400;color:var(--muted);list-style:disc}
.cl-list .rel-notes li::marker{color:var(--faint)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .ag-grid{grid-template-columns:repeat(2,1fr)}
  .fl-stack-logos{grid-template-columns:repeat(2,1fr)}
  .ag-steps{grid-template-columns:repeat(2,1fr)}
  .ag-step{border-bottom:1px solid var(--border)}
  .ag-step:nth-child(2n){border-right:none}
  .ag-step:last-child{border-bottom:none}
}
@media (max-width:620px){
  .ag-grid,.fl-stack-logos,.ag-steps{grid-template-columns:1fr}
  .ag-step{border-right:none}
  .ag-step:nth-child(2n){border-right:none}
  .cl-list .rel{grid-template-columns:1fr}
  .cl-list .rel-meta{border-right:none}
  .cl-list .rel-stamp{
    flex-direction:row;align-items:baseline;gap:12px;padding:20px 0 0;
  }
  .cl-list .rel-body{padding:12px 0 28px}
}