/* ============================================================
   CTIO SDLC & CI/CD Process — section-page styles
   Used by the Process contents page + each section page.
   Built on emovis-tokens.css + hub.css
   ============================================================ */

:root{
  --c-dev:#396A6A; --c-qa:#E37A41; --c-pre:#39526A; --c-prod:#CE0058;
}

/* meta strip under title (contents page) */
.meta-strip{display:flex;gap:0;flex-wrap:wrap;margin-top:24px;border:1px solid var(--grey-200);border-radius:var(--r-md);overflow:hidden;background:#fff}
.meta-strip div{flex:1;min-width:150px;padding:16px 20px;border-right:1px solid var(--grey-200)}
.meta-strip div:last-child{border-right:none}
.meta-strip dt{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:5px}
.meta-strip dd{font-size:15px;font-weight:var(--fw-semibold);color:var(--ink-900)}

/* section progress label */
.sec-progress{display:flex;width:fit-content;align-items:center;gap:9px;font-size:12px;font-weight:var(--fw-semibold);letter-spacing:.04em;color:var(--ink-500);margin-bottom:18px}
.sec-progress .pn{font-variant-numeric:tabular-nums;color:var(--cerise-600)}
.sec-progress .track{display:flex;gap:4px}
.sec-progress .track i{width:16px;height:4px;border-radius:2px;background:var(--grey-200)}
.sec-progress .track i.on{background:var(--cerise-600)}

/* flow chain (chips + arrows) */
.flow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:16px 0}
.fchip{font-size:13px;font-weight:var(--fw-medium);padding:8px 14px;border-radius:var(--r-pill);background:var(--mist);color:var(--ink-700);border:1px solid var(--grey-200);white-space:nowrap}
.fchip.cer{background:var(--cerise-050);color:var(--cerise-700);border-color:var(--cerise-100)}
.fchip.dev{background:#E6EFEF;color:var(--c-dev);border-color:transparent}
.fchip.qa{background:#FBEBE0;color:#C45F23;border-color:transparent}
.fchip.pre{background:var(--steel-100);color:var(--c-pre);border-color:transparent}
.fchip.prod{background:var(--cerise-100);color:var(--cerise-700);border-color:transparent}
.farr{display:inline-flex;color:var(--grey-300)}
.farr svg{width:16px;height:16px;stroke-width:2.4}
.farr .gl{font-size:10.5px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--cerise-600);margin-right:5px}

.lane{margin:18px 0}
.lane .lh{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.lane .lh .lt{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-900)}
.lane .lh .lm{font-family:'Poppins';font-size:11.5px;color:var(--ink-500);background:var(--cloud);padding:2px 8px;border-radius:5px;border:1px solid var(--grey-200)}

/* numbered stage / step cards */
.stages{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.stage{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-md);padding:20px 22px}
.stage .sn{flex:none;width:34px;height:34px;border-radius:50%;background:var(--cerise-600);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:var(--fw-bold)}
.stage .sc h3{font-size:16px;font-weight:var(--fw-semibold);text-transform:none;letter-spacing:0;color:var(--ink-900);margin:0 0 4px}
.stage .sc p{margin:0;font-size:14px;color:var(--ink-500)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}
.step{background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-md);padding:18px 16px;position:relative}
.step .sk{width:26px;height:26px;border-radius:50%;background:var(--cerise-050);color:var(--cerise-600);display:grid;place-items:center;font-size:13px;font-weight:var(--fw-bold);margin-bottom:12px}
.step h4{font-size:14.5px;font-weight:var(--fw-semibold);margin-bottom:6px}
.step p{font-size:12.5px;color:var(--ink-500);line-height:1.45}

/* environment dot */
.edot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;vertical-align:middle}
.acct{font-family:'Poppins';font-size:12.5px;color:var(--ink-500)}
.g-ok{color:var(--success);font-weight:var(--fw-semibold)}
.g-crit{color:var(--cerise-600);font-weight:var(--fw-semibold)}

/* PI timeline */
.pi-tl{display:flex;gap:8px;margin:18px 0}
.pi-bar{flex:1;border-radius:var(--r-sm);padding:14px 14px 16px;color:#fff;position:relative}
.pi-bar .pn{font-size:14px;font-weight:var(--fw-bold)}
.pi-bar .pr{font-size:11.5px;opacity:.9;margin-top:3px}
.pi-bar .ps{font-size:11px;opacity:.75;margin-top:7px}
.pi-bar .flag{position:absolute;top:-9px;right:8px;font-size:10px;font-weight:var(--fw-semibold);background:#fff;color:var(--cerise-600);padding:2px 7px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);white-space:nowrap}
.pi-bar.p1{background:#5a6f7a}.pi-bar.p2{background:#4a6470}.pi-bar.p3{background:var(--c-pre)}.pi-bar.p4{background:var(--cerise-600)}
.deadline{font-size:12.5px;color:var(--cerise-600);font-weight:var(--fw-semibold);margin-top:-6px}

.math{display:flex;gap:14px;margin:18px 0;flex-wrap:wrap}
.math div{flex:1;min-width:140px;background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-md);padding:16px 18px}
.math .ml{font-size:11.5px;color:var(--ink-500);font-weight:var(--fw-medium);margin-bottom:6px}
.math .mv{font-size:20px;font-weight:var(--fw-bold);color:var(--ink-900);letter-spacing:-.01em}
.math .mv.bad{color:var(--cerise-600)}

.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.opt{background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-md);padding:18px}
.opt .on{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:var(--fw-semibold);margin-bottom:8px}
.opt .on .k{width:24px;height:24px;border-radius:6px;background:var(--cerise-050);color:var(--cerise-600);display:grid;place-items:center;font-size:13px;font-weight:var(--fw-bold)}
.opt p{margin:0;font-size:13px;color:var(--ink-500);line-height:1.5}

/* RACI */
.raci th:not(:first-child),.raci td:not(:first-child){text-align:center;width:13%}
.raci .role-sub{display:block;font-size:10px;font-weight:var(--fw-regular);color:var(--grey-400);text-transform:none;letter-spacing:0;margin-top:2px}
.raci .ts{display:block;font-size:11.5px;color:var(--ink-500);font-weight:var(--fw-regular);margin-top:3px}
.rb{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:11.5px;font-weight:var(--fw-bold);margin:0 1px}
.rb.r{background:var(--cerise-100);color:var(--cerise-700)}
.rb.a{background:#E6F4EF;color:#2E8B6B}
.rb.c{background:var(--steel-100);color:var(--steel-600)}
.rb.i{background:var(--mist);color:var(--ink-500)}
.raci-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}
.raci-legend div{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-700)}
.raci-legend b{color:var(--ink-900)}

/* Definition of Done */
.dod{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.dod span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:var(--fw-medium);color:var(--ink-700);background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-pill);padding:9px 16px 9px 13px}
.dod span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--success);flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;}

/* notes */
.note{border-left:3px solid var(--cerise-600)}
.note .nl{font-size:11.5px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--cerise-700);margin-bottom:6px}
.note p{margin:6px 0 0;font-size:14px;color:var(--ink-700);line-height:1.55}
.note p:first-of-type{margin-top:0}
.note.info{border-left:3px solid var(--c-pre);background:var(--steel-100);border-color:#D5DEEA}
.note.info .nl{color:var(--c-pre)}
.note.warn{border-left:3px solid var(--warning);background:#FDF7EC;border-color:#F3E4C4}
.note.warn .nl{color:#B07C1E}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.grid3 .note{margin:0}

/* contents (table of contents) */
.toc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 8px}
.toc a{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-md);padding:18px 20px;text-decoration:none;transition:.16s}
.toc a:hover{border-color:var(--cerise-200);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.toc .tn{flex:none;width:30px;height:30px;border-radius:8px;background:var(--cerise-050);color:var(--cerise-600);display:grid;place-items:center;font-size:14px;font-weight:var(--fw-bold)}
.toc .tt{font-size:15.5px;font-weight:var(--fw-semibold);color:var(--ink-900);margin-bottom:3px}
.toc .ts2{font-size:13px;color:var(--ink-500);line-height:1.45}

/* prev / next pager */
.pager{display:flex;gap:14px;margin-top:48px;padding-top:28px;border-top:1px solid var(--grey-200)}
.pager a{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:15px 20px;border:1px solid var(--grey-200);border-radius:var(--r-md);background:#fff;transition:.16s;flex:1;min-width:0}
.pager a:hover{border-color:var(--cerise-200);box-shadow:var(--shadow-md)}
.pager a.next{text-align:right;align-items:flex-end}
.pager a.prev{align-items:flex-start}
.pager a.spacer{visibility:hidden;pointer-events:none}
.pager .pd{font-size:11px;color:var(--ink-500);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.pager .pd svg{width:13px;height:13px;stroke-width:2.4}
.pager .pt{font-size:15px;font-weight:var(--fw-semibold);color:var(--ink-900)}

@media(max-width:720px){
  .steps,.opts,.grid3,.toc{grid-template-columns:1fr}
  .pi-tl{flex-direction:column}
  .pager{flex-direction:column}
}