/* Codelab layout and components, shared by the hub and every project guide. Load after tokens.css. */
*{box-sizing:border-box}
html,body{background:var(--paper)}
body{
  margin:0; color:var(--ink-2); background:var(--paper);
  font-family:var(--sans); font-size:16px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--info); text-decoration:none; border-bottom:1px solid rgba(51,64,168,.3)}
a:hover{color:var(--accent-d); border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ============ top bar ============ */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:70; background:var(--ink); color:#fff}
.bar-in{max-width:1300px; margin:0 auto; padding:0 26px; height:58px; display:flex; align-items:center; gap:16px}
.bar img{height:18px; width:auto; flex:none; vertical-align:middle}
.bar .tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:3px 8px; border-radius:4px; white-space:nowrap;
}
.bar .nm{font-weight:600; font-size:15px; color:#fff; white-space:nowrap; letter-spacing:-.01em}
.bar .sp{flex:1}
.bar a.home{font-family:var(--mono); font-size:11.5px; color:#9A97BE; white-space:nowrap; border:0}
.bar a.home:hover{color:#fff}
.bar .meta{font-family:var(--mono); font-size:11.5px; color:#9A97BE; white-space:nowrap; font-variant-numeric:tabular-nums}
.bar .meta b{color:#fff; font-weight:600}
.menub{
  display:none; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.1); color:#fff; border:0; padding:7px 12px; border-radius:5px; cursor:pointer;
}
.prog{height:3px; background:#1F1D44; position:relative; overflow:hidden}
.prog i{display:block; height:100%; width:0; background:var(--accent); transition:width .45s cubic-bezier(.4,0,.2,1)}

/* ============ layout ============ */
.deck{max-width:1300px; margin:0 auto; padding:0 26px; display:grid; grid-template-columns:252px minmax(0,1fr); gap:54px; align-items:start}

/* ============ rail ============ */
.rail{position:sticky; top:calc(env(safe-area-inset-top,0px) + 61px); padding-block:30px 50px; max-height:calc(100vh - 72px); overflow-y:auto}
.rail h6{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin:0 0 12px; padding-left:12px; font-weight:500;
}
.rail ol{list-style:none; margin:0 0 20px; padding:0}
.rail li{margin-bottom:2px}
.rail button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; border-radius:var(--r);
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:center;
  padding:9px 12px; font-family:var(--sans); color:var(--mid); font-size:14.5px; line-height:1.35;
  transition:background .14s ease, color .14s ease;
}
.rail .num{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-2); background:var(--paper);
  display:grid; place-items:center; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--dim);
  transition:all .18s ease;
}
.rail .nm{font-weight:500}
.rail button:hover{background:var(--tint); color:var(--ink)}
.rail li.on button{background:var(--tint-2); color:var(--ink)}
.rail li.on .nm{font-weight:600}
.rail li.on .num{background:var(--accent); border-color:var(--accent); color:#fff}
.rail li.done .num{background:var(--ok); border-color:var(--ok); color:#fff; font-size:0}
.rail li.done .num::after{content:"✓"; font-size:13px; font-family:var(--sans)}
.rail li.on.done .num{background:var(--accent); border-color:var(--accent)}
.rail .sep{border:0; border-top:1px solid var(--line); margin:16px 12px}
.rail li.ref .num{border-style:dashed; font-size:0}
.rail li.ref .num::after{content:"·"; font-size:18px; line-height:0; color:var(--dim)}
.rail li.ref.on .num::after{color:#fff}

/* ============ content ============ */
main{padding-block:30px 100px; min-width:0}
.phase{max-width:74ch}

.lead{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start; margin:0 0 34px}
.stepno{
  font-family:var(--mono); font-size:52px; font-weight:600; line-height:.9; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px var(--line-2); padding-top:4px; user-select:none;
}
.lead.hero .stepno{-webkit-text-stroke-color:var(--accent); opacity:.5}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px; font-weight:500;
}
.kicker i{font-style:normal; color:var(--dim); letter-spacing:.1em}
h1{font-weight:700; font-size:clamp(30px,4.2vw,40px); line-height:1.1; letter-spacing:-.025em; color:var(--ink); margin:0 0 6px; text-wrap:balance}
.sub{font-weight:600; font-size:clamp(17px,2.3vw,20px); letter-spacing:-.01em; color:var(--accent); margin:0 0 16px}
h2{
  font-weight:600; font-size:clamp(20px,2.4vw,23px); line-height:1.25; letter-spacing:-.018em;
  color:var(--ink); margin:48px 0 14px; padding-left:15px; position:relative; text-wrap:balance;
}
h2::before{content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:3px; background:var(--accent); border-radius:2px}
h2 .mins{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mid); font-weight:400;
  margin-left:10px; vertical-align:2px; background:var(--tint-2); padding:2px 7px; border-radius:4px;
}
h3{font-weight:600; font-size:17.5px; letter-spacing:-.01em; color:var(--ink); margin:30px 0 8px}
p{margin:0 0 16px}
.lede{font-size:19px; line-height:1.56; color:var(--ink-2); margin:0 0 18px; font-weight:400}
ul,ol.plain{margin:0 0 16px; padding-left:22px}
li{margin:0 0 7px}
ul{list-style:none; padding-left:20px}
ul>li{position:relative}
ul>li::before{content:""; position:absolute; left:-15px; top:.66em; width:5px; height:5px; border-radius:50%; background:var(--line-2)}
strong{color:var(--ink); font-weight:600}
code{font-family:var(--mono); font-size:.855em; color:var(--ink); background:var(--tint-2); padding:1.5px 5px; border-radius:4px; word-break:break-word}

/* ============ notes ============ */
.note{
  border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r);
  background:var(--tint); padding:15px 18px; margin:0 0 20px; font-size:15px; line-height:1.6;
}
.note>:last-child{margin-bottom:0}
.note b.k{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:7px; color:var(--mid); font-weight:600}
.note.stop{border-left-color:var(--bad); background:var(--bad-soft); border-color:#F3DBD6} .note.stop b.k{color:var(--bad)}
.note.warn{border-left-color:var(--warn); background:var(--warn-soft); border-color:#F0E2C6} .note.warn b.k{color:var(--warn)}
.note.good{border-left-color:var(--ok); background:var(--ok-soft); border-color:#CFE8DE} .note.good b.k{color:var(--ok)}
.note.fac{border-left-color:var(--accent); background:var(--accent-soft); border-color:#F7D9D2} .note.fac b.k{color:var(--accent-d)}
.note ul{margin-bottom:0}

/* ============ promo ============ */
.promo{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--ink); color:#fff; border-radius:var(--r); padding:18px 22px; margin:6px 0 28px;
  box-shadow:var(--shadow); border-left:4px solid var(--accent);
}
.promo .pt{flex:1 1 220px; min-width:0}
.promo .pk{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#FF8F72; font-weight:600; margin-bottom:4px}
.promo .pt p{margin:0; font-size:15px; line-height:1.5; color:#D9D8EA}
.promo .pt a{color:#fff; border-bottom-color:rgba(255,255,255,.4)}
.promo .pt a:hover{color:#FF8F72; border-bottom-color:#FF8F72}
.promo .pc{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.promo .code{
  font-family:var(--mono); font-size:18px; font-weight:600; letter-spacing:.08em; color:#fff;
  background:rgba(255,255,255,.08); border:1.5px dashed rgba(255,255,255,.35); border-radius:6px; padding:7px 14px;
  user-select:all;
}
.promo button{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  background:var(--accent); color:#fff; border:0; border-radius:5px; padding:10px 14px; cursor:pointer;
}
.promo button:hover{background:var(--accent-d)}
.promo button.ok{background:var(--ok)}

/* ============ fold ============ */
details.fold{border:1px solid var(--line); border-radius:var(--r); margin:0 0 20px; background:var(--paper); overflow:hidden}
details.fold summary{
  cursor:pointer; list-style:none; padding:13px 18px; font-weight:600; font-size:14.5px; color:var(--ink);
  display:flex; align-items:center; gap:10px; background:var(--tint); transition:background .14s;
}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{
  content:""; width:7px; height:7px; border-right:1.8px solid var(--mid); border-bottom:1.8px solid var(--mid);
  transform:rotate(-45deg); transition:transform .18s ease; flex:none; margin-left:2px;
}
details.fold[open] summary::before{transform:rotate(45deg)}
details.fold summary:hover{background:var(--tint-2)}
details.fold .fb{padding:16px 18px 4px; font-size:15px; line-height:1.6; border-top:1px solid var(--line)}
details.fold .fb>:last-child{margin-bottom:12px}

/* ============ tabs ============ */
.tabs{margin:0 0 20px}
.tabs .tl{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:0}
.tabs .tl button{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--dim); padding:9px 14px; transition:all .14s;
}
.tabs .tl button:hover{color:var(--ink)}
.tabs .tl button.on{color:var(--accent-d); border-bottom-color:var(--accent)}
.tabs .tp{display:none; padding-top:16px}
.tabs .tp.on{display:block}
.tabs .tp>:last-child{margin-bottom:0}

/* ============ code ============ */
.src{margin:0 0 20px; background:#0E0D26; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.src .bar2{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; background:#16143A}
.src .bar2 span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9E9BC6}
.src .bar2 button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  background:rgba(255,255,255,.08); border:0; color:#C9C6E6; padding:4px 10px; border-radius:4px; transition:all .14s;
}
.src .bar2 button:hover{background:var(--accent); color:#fff}
.src .bar2 button.ok{background:var(--ok); color:#fff}
.src pre{margin:0; padding:16px 18px; overflow-x:auto; font-family:var(--mono); font-size:12.5px; line-height:1.72; color:#E3E1F4}
.src pre .c{color:#7E7BA8; font-style:italic} .src pre .k{color:#FF8F72} .src pre .s{color:#7FDCB0}

/* ============ tables ============ */
.grid{overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:440px}
th,td{text-align:left; padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5}
th{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--mid); font-weight:600; background:var(--tint)}
td:first-child{color:var(--ink); font-weight:500}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--tint)}

/* ============ numbered actions ============ */
ol.run{list-style:none; counter-reset:r; margin:0 0 22px; padding:0}
ol.run>li{counter-increment:r; position:relative; padding-left:40px; margin-bottom:16px}
ol.run>li::before{
  content:counter(r); position:absolute; left:0; top:1px; width:25px; height:25px; border-radius:50%;
  background:var(--tint-2); color:var(--ink); font-family:var(--mono); font-size:12px; font-weight:600;
  display:grid; place-items:center;
}
ol.run>li>.src,ol.run>li>.grid{margin-top:12px}

/* ============ figures ============ */
figure{margin:0 0 24px}
.plate{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); box-shadow:var(--shadow)}
.plate img{display:block; width:100%; height:auto}
.draw{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px; overflow-x:auto}
.draw svg{display:block; width:100%; max-width:100%; height:auto; min-width:450px}

/* ============ compare ============ */
.vs{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px; margin:0 0 24px}
.vs>div{padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper)}
.vs h5{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px; font-weight:600; display:flex; align-items:center; gap:8px}
.vs .q{font-size:14px; color:var(--dim); margin:0 0 10px; font-style:italic}
.vs .a{font-size:15px; line-height:1.58; margin:0 0 12px}
.vs .foot{font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--mid); margin:0; padding-top:10px; border-top:1px solid var(--line)}
.vs .bad{background:var(--bad-soft); border-color:#F3DBD6} .vs .bad h5{color:var(--bad)}
.vs .ok{background:var(--ok-soft); border-color:#CFE8DE} .vs .ok h5{color:var(--ok)}
.vs .dot{width:8px; height:8px; border-radius:50%; flex:none}
.vs .bad .dot{background:var(--bad)} .vs .ok .dot{background:var(--ok)}

/* ============ simulator ============ */
.sim{border:1px solid var(--line-2); border-radius:var(--r); margin:0 0 24px; overflow:hidden; box-shadow:var(--shadow)}
.sim .sh{background:var(--ink); color:#fff; padding:12px 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sim .sh b{font-size:14.5px; font-weight:600}
.sim .sh span{font-family:var(--mono); font-size:11px; color:#9A97BE}
.sim .sb{padding:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:16px; background:var(--tint)}
.sim label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--mid); margin-bottom:6px; font-weight:600}
.sim select,.sim input{
  width:100%; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:6px; padding:8px 10px;
}
.sim .seg{display:flex; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; background:var(--paper)}
.sim .seg button{
  flex:1; background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:500;
  color:var(--mid); padding:8px 4px; transition:all .14s;
}
.sim .seg button+button{border-left:1px solid var(--line-2)}
.sim .seg button.on{background:var(--ink); color:#fff; font-weight:600}
.sim .so{padding:18px; border-top:1px solid var(--line); background:var(--paper)}
.sim .verdict{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.sim .badge{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:5px; color:#fff;
}
.sim .badge.approve{background:var(--ok)} .sim .badge.deny{background:var(--bad)} .sim .badge.escalate{background:var(--warn)}
.sim .pay{font-family:var(--mono); font-size:20px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.sim .ov{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-d); background:var(--accent-soft); padding:4px 9px; border-radius:4px; font-weight:600}
.sim .pn{font-size:14px; line-height:1.55; color:var(--ink-2); margin:0; padding:12px 14px; background:var(--tint); border-radius:6px; border-left:3px solid var(--line-2)}
.sim .pn em{color:var(--dim); font-style:normal}

/* ============ claim cards ============ */
.claims{display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:12px; margin:0 0 22px}
.claim{border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--paper); transition:border-color .14s, box-shadow .14s}
.claim:hover{border-color:var(--line-2); box-shadow:var(--shadow)}
.claim .id{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.06em; margin-bottom:6px}
.claim .d{font-size:14px; line-height:1.45; color:var(--ink); margin-bottom:10px; font-weight:500}
.claim .m{font-family:var(--mono); font-size:11.5px; color:var(--mid); margin-bottom:10px}
.claim .r{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:4px; display:inline-block}
.claim .r.approve{background:var(--ok-soft); color:var(--ok)}
.claim .r.deny{background:var(--bad-soft); color:var(--bad)}
.claim .r.escalate{background:var(--warn-soft); color:var(--warn)}

/* ============ links ============ */
.ports{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:12px; margin:0 0 22px}
.ports a{display:block; background:var(--paper); padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); color:var(--ink); transition:all .14s}
.ports a:hover{border-color:var(--accent); box-shadow:var(--shadow); color:var(--ink)}
.ports b{display:block; font-weight:600; font-size:15.5px; margin-bottom:3px}
.ports span{font-family:var(--mono); font-size:11px; color:var(--dim); word-break:break-all}

/* ============ checkpoint ============ */
.cp{
  display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line-2); border-radius:var(--r);
  padding:16px 18px; margin:36px 0 0; cursor:pointer; background:var(--tint); transition:all .16s;
}
.cp:hover{border-color:var(--ok); background:var(--ok-soft)}
.cp:has(input:checked){border-color:var(--ok); background:var(--ok-soft)}
.cp input{margin:3px 0 0; accent-color:var(--ok); width:17px; height:17px; flex:none}
.cp .tx{font-size:15px; line-height:1.5}
.cp .tx b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ok); margin-bottom:4px; font-weight:600}

/* ============ pager ============ */
.pg{display:flex; gap:16px; align-items:stretch; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap}
.pg button{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); cursor:pointer; padding:12px 18px;
  text-align:left; font-family:var(--sans); font-weight:600; font-size:15.5px; color:var(--ink); transition:all .14s; min-width:0;
}
.pg button small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:3px; font-weight:500}
.pg button:hover:not([disabled]){border-color:var(--accent); color:var(--accent-d); box-shadow:var(--shadow)}
.pg button:hover:not([disabled]) small{color:var(--accent)}
.pg button[disabled]{opacity:.35; cursor:not-allowed}
.pg .sp{flex:1}
.pg .nx{text-align:right}

@media (max-width:960px){
  .deck{grid-template-columns:1fr; gap:0; padding:0 18px}
  .rail{position:static; max-height:none; display:none; padding-block:16px 10px; border-bottom:1px solid var(--line)}
  .rail.open{display:block}
  .menub{display:block}
  .bar .meta{display:none}
  .bar-in{padding:0 18px; gap:11px}
  .bar .nm{font-size:13.5px}
  main{padding-block:24px 64px}
  .lead{grid-template-columns:1fr; gap:10px}
  .stepno{font-size:38px}
}

/* ============ buttons ============ */
a.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--accent); border-radius:6px;
  background:var(--accent); color:#fff; padding:8px 14px; font-weight:600; font-size:14px; line-height:1.3; transition:all .14s;
}
a.btn:hover{background:var(--accent-d); border-color:var(--accent-d); color:#fff}
a.btn.ghost{background:var(--paper); color:var(--ink); border-color:var(--line-2)}
a.btn.ghost:hover{border-color:var(--accent); color:var(--accent-d)}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px}

/* ============ hub ============ */
.wrap{max-width:1100px; margin:0 auto; padding:30px 26px 100px}
.wrap .lead{margin-bottom:26px}
.ws{margin:0 0 56px}
.ws .meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-4px 0 18px}
.chip{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--tint-2); color:var(--mid)}
.chip.cloud{background:var(--info-soft); color:var(--info)}
.chip.draft{background:var(--warn-soft); color:var(--warn)}
.projects{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; margin:0 0 20px}
.pcard{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); padding:20px 22px; transition:border-color .14s, box-shadow .14s}
.pcard:hover{border-color:var(--line-2); box-shadow:var(--shadow)}
.pcard .top{display:flex; align-items:baseline; gap:14px; margin-bottom:10px}
.pcard .stepno{font-size:40px}
.pcard .kicker{margin:0; font-size:11px; line-height:1.4}
.pcard .btns a.btn{font-size:13.5px; padding:7px 12px}
.pcard h3{margin:0 0 8px; font-size:19px}
.pcard p{font-size:15px; line-height:1.55; margin:0 0 14px}
.pcard .reqs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px}
.pcard .btns{margin:auto 0 0}
.pcard.missing{border-color:var(--bad); background:var(--bad-soft)}
footer.foot{border-top:1px solid var(--line); color:var(--dim); font-size:13px}
footer.foot div{max-width:1100px; margin:0 auto; padding:20px 26px}
@media (max-width:960px){ .wrap{padding:24px 18px 64px} }
@media (max-width:640px){ .bar .tag, .bar a.home{display:none} }