/* Styles for the agentic pages: start, flow, convictions. The tab bar is in tabs.css. */
/* The page scrolls as a normal document, like the adoption page, so there is one scrollbar and the same width. */
body.lab-doc{background:var(--bg)}
body.lab-doc.dw-open{overflow:hidden}
/* A short page keeps its footer at the bottom of the screen, and the footer is slim. */
body.lab-doc{min-height:100vh; display:flex; flex-direction:column}
body.lab-doc > header, body.lab-doc > nav, body.lab-doc > footer{flex:none}
body.lab-doc > .view{flex:1 0 auto; width:100%; padding-bottom:28px}
body.lab-doc .site-footer{margin-top:0}
.view{max-width:var(--maxw); margin:0 auto; padding:0 24px 70px}

/* Start */
    .rowlab{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.rowlab--next{margin-top:30px}
.pg-head .lede + .lede{margin-top:10px}
.st .a-doors{margin:0; grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.st .a-doors{grid-template-columns:1fr}}
.a-message{margin-top:24px; padding:18px 24px; border:1.5px solid #b9c0ce; border-radius:14px; background:var(--bg-soft)}
.a-message p{margin:0; font-size:17px; line-height:1.6; color:var(--ink-2)}
.a-message b{color:var(--ink); font-weight:700}
.go3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px}
.go3 button,.go3 a{font:inherit; text-align:left; cursor:pointer; background:var(--brand); color:var(--ink); border:0; border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:3px; text-decoration:none}
.go3 button:hover,.go3 a:hover{background:var(--brand-2); text-decoration:none; color:var(--ink)}
.go3 .k{font-size:17px; font-weight:800} .go3 .d{font-size:13.5px; opacity:.85} .go3 .a{font-size:13px; font-weight:700; margin-top:6px}

/* Flow */
.view h2.vt{font-size:22px; margin:0 0 4px; letter-spacing:-.015em}
.view p.vs{margin:0 0 16px; font-size:14.5px; color:var(--muted)}
.legend{display:flex; gap:16px; font-size:12.5px; color:var(--muted); margin:0 0 12px}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:var(--accent)}
.dot.you{background:var(--amber)}
.stages{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.stage{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column}
.stage .n{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.stage .c{font-size:20px; font-weight:800; font-family:ui-monospace,Menlo,Consolas,monospace; margin:2px 0 4px; letter-spacing:-.02em}
.stage .d{font-size:13.5px; color:var(--ink-2); margin:0 0 10px}
.stage ol{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:7px}
.stage li{font-size:14px; display:flex; align-items:baseline; gap:2px}
.stage li small{color:var(--muted); margin-left:6px; font-size:12px}
.stage .out{margin-top:auto; padding-top:10px; border-top:1px dashed var(--line); font-size:13px; color:var(--ink-2)}
.stage .out b{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:6px}
.loopback{margin-top:12px; font-size:13px; color:var(--muted); text-align:center}

#v-flow .wc-head{display:none}
#v-flow .wc-top{justify-content:flex-end}
#v-flow .wc-outer{width:100%; max-width:none; margin:0}
.st .a-doors .d-item{padding:16px 18px; border:1.5px solid #b9c0ce}
.st .a-doors .d-item:hover{border-color:var(--accent)}
.st .a-doors .d-img{margin-bottom:10px}

/* Convictions */
.hint{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:99px; padding:6px 14px; margin:0 0 14px}
.row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); align-items:start}
.row:first-of-type{border-top:0}
.row .lab{display:flex; flex-direction:column; gap:2px; padding-top:4px}
.row .lab b{font-size:14px; display:flex; align-items:center; gap:7px}
.row .lab b i{font-style:normal; width:19px; height:19px; border-radius:6px; background:var(--ph); color:#12161d; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.row .lab span{font-size:12px; color:var(--muted)}
.row .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}

@media (max-width:860px){
  .stages,.go3{grid-template-columns:1fr}
  .row{grid-template-columns:1fr; gap:6px}
  .view{padding:0 24px 90px}
}

/* The flow diagram on a white card (it used to be dark). */
.wc-outer{--wcbg:#fff; background:var(--wcbg); color:var(--ink-2); box-shadow:none; border:1.5px solid #b9c0ce}
.wc-eyebrow{color:var(--accent)}
.wc-head h3{color:var(--ink)}
.wc-head p, .wc-desc, .wc-steps p{color:var(--muted)}
.wc-legend{background:#fff; border-color:#d5dae4; color:var(--ink-2)}
.wc-num{color:var(--muted)}
.wc-cmd{color:var(--accent-2); background:var(--accent-soft); border-color:#c5d5f4}
.wc-steps li::before{background:#c9d0de}
.wc-steps .wc-dot{box-shadow:0 0 0 3px var(--wcbg)}
.wc-steps b{color:var(--ink)}
.wc-dot--agent{background:#46648f}
.wc-you .wc-tag{color:#b9761a}
.wc-agent .wc-tag{color:#2f4f7a}
.wc-aside{border-top-color:#c9d0de; color:#6b7280 !important}
.wc-branch div{border-left-color:#c9d0de}
.wc-branch span{color:#6b7280}
.wc-out{border-top-color:#d5dae4}
.wc-out span{color:#b9761a}
.wc-out p{color:var(--ink)}
.wc-loopback{color:var(--accent)}
.wc-loopback span{color:var(--muted)}


/* Compact, so the whole flow fits on one screen. */
#v-flow .pg-head{padding-bottom:10px}
#v-flow .pg-head .lede{max-width:none}
#v-flow .wc-outer{margin:0 auto; max-width:none; width:100%; padding:16px 24px 14px}
#v-flow .wc-top{margin-bottom:10px; justify-content:flex-start}
#v-flow .wc-legend{flex-direction:row; gap:20px; padding:7px 14px}
#v-flow .wc-stages{gap:24px}
#v-flow .wc-stage{gap:6px}
#v-flow .wc-cmd{font-size:15px; padding:5px 12px}
#v-flow .wc-desc{margin:0 0 2px; font-size:13px}
#v-flow .wc-steps li{padding-bottom:9px}
#v-flow .wc-steps b{font-size:13.5px}
#v-flow .wc-steps p{margin:2px 0 0; font-size:12.5px; line-height:1.4}
#v-flow .wc-aside{margin-top:5px !important; padding-top:5px}
#v-flow .wc-out{padding-top:9px}
#v-flow .wc-loopback{margin-top:10px; gap:2px}
#v-flow .wc-loopback svg{height:26px}

/* The convictions table sits in one rounded box, like the flow diagram. */
#rows{background:#fff; border:1.5px solid #b9c0ce; border-radius:24px; padding:10px 24px}
@media (max-width:860px){#rows{padding:8px 16px; border-radius:18px}}

/* Flow page: a way on from each stage, and on to the convictions. */
#v-flow .wc-top{justify-content:space-between; align-items:center}
.wc-next{font-size:13.5px; font-weight:700; color:var(--ink); background:var(--brand); border-radius:10px; padding:8px 14px; text-decoration:none; white-space:nowrap}
.wc-next:hover{background:var(--brand-2); color:var(--ink); text-decoration:none}

/* Convictions table: command under the phase name, and the highlighted phase. */
.row .lab .cmd{font:700 12px ui-monospace,Menlo,Consolas,monospace; color:var(--accent-2); background:var(--accent-soft); border:1px solid #c5d5f4; border-radius:6px; padding:2px 7px; width:fit-content; margin-top:4px}

/* The whole flow diagram is one link to the convictions. */
#v-flow .wc-outer{position:relative; transition:border-color .15s, box-shadow .15s}
#v-flow .wc-outer:hover, #v-flow .wc-outer:focus-within{border-color:var(--accent); box-shadow:0 10px 30px rgba(22,87,208,.14)}
#v-flow .wc-next::after{content:""; position:absolute; inset:0; border-radius:24px; z-index:5}
#v-flow .wc-next:focus-visible{outline:none}
#v-flow .wc-outer{cursor:pointer}

/* Convictions page: tighter, so the whole table fits on one screen. */
#rows{padding:2px 24px}
#rows .row{padding-top:8px; padding-bottom:8px}
#rows .cv{padding:9px 14px 8px; gap:3px}
.body-convictions .pg-head{padding-top:16px; padding-bottom:10px}

/* Start page: the three pages are the main way forward, so they carry the weight. */
.st .doors-title{font-size:clamp(22px,2.4vw,28px); font-weight:800; letter-spacing:-.02em; margin:6px 0 16px; color:var(--ink)}
.st .a-doors{gap:20px}
.st .a-doors .d-item{display:flex; flex-direction:column; padding:20px 22px 22px; border:2px solid var(--accent); box-shadow:var(--shadow-lg); transition:transform .15s ease, box-shadow .15s ease}
.st .a-doors .d-item:hover{transform:translateY(-3px)}
.st .a-doors .d-name{display:block; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--ink); margin-bottom:6px}
.st .a-doors .d-v{font-size:16px; font-weight:600; color:var(--ink-2)}
.st .a-doors p{flex:1}
.st .a-doors .d-go{align-self:flex-start; background:var(--brand); color:var(--ink); padding:9px 16px; border-radius:999px}
.st .a-doors .d-item:hover .d-go{background:var(--brand-2)}

/* Start page: what the method delivered on Cockpit, and (under the three pages) what is different about these pages. */
.st-stats{margin:6px 0 28px; padding:20px 24px; background:var(--bg-soft); border:1.5px solid #b9c0ce; border-radius:var(--radius)}
.st-stats > p{margin:0 0 10px; font-size:16px; line-height:1.55; color:var(--ink-2)}
.st-stats .st-k{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-ink); margin:0 0 14px; padding-top:18px; border-top:1px solid #d5d7dc}
.st-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.st-tile{display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:3px solid var(--brand)}
.st-tile b{font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--ink)}
.st-tile span{font-size:14px; color:var(--ink-2)}
.st-diff{margin:0 0 30px}
.st-diff--after{margin-top:32px}
.st-diff p{margin:0 0 12px; font-size:16px; line-height:1.55; color:var(--ink-2)}
.st-diff ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px}
.st-diff li{font-size:15px; line-height:1.5; color:var(--ink-2); padding-left:14px; border-left:3px solid var(--line)}
.st-diff li b{color:var(--ink)}
@media (max-width:860px){
  .st-tiles{grid-template-columns:repeat(2,1fr)}
  .st-diff ul{grid-template-columns:1fr}
  .st-stats{padding:18px 16px}
}

/* Start page: the three pages are dark, so they are what the eye goes to. */
.st .a-doors .d-item{background:var(--ink); border-color:var(--ink)}
.st .a-doors .d-item:hover{border-color:var(--brand)}
.st .a-doors .d-k{color:var(--cat-amber-light)}
.st .a-doors .d-name{color:#fff}
.st .a-doors .d-v{color:#d9dbe0}
.st .a-doors p{color:#a7abb5}