/* Site chrome, forms, pricing, paywall and account. Builds on the tokens in bigpicture.css. */
.sitebar{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.sitebar-in{max-width:1480px; margin:0 auto; padding:10px clamp(16px,3vw,32px); display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap}
.brandmark{display:flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; font-family:var(--display); font-weight:700; letter-spacing:.01em; font-size:19px}
.brandmark svg{width:36px; height:22px; margin:0 1px}
.mainnav{display:flex; gap:4px; flex-wrap:wrap}
.navlink{color:var(--muted); text-decoration:none; font-size:14px; padding:6px 10px; border-radius:8px; font-weight:500}
.navlink:hover{color:var(--ink); background:color-mix(in srgb,var(--ink) 6%,transparent)}
.navlink.on{color:var(--ink); background:color-mix(in srgb,var(--ink) 8%,transparent)}
.navright{margin-left:auto; display:flex; align-items:center; gap:8px}
.badge{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; background:var(--accent); color:#fff; border-radius:999px; padding:2px 7px; margin-left:4px}
.inline{display:inline}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--ink); background:var(--ink); color:var(--surface); border-radius:9px; padding:9px 16px; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer}
.btn:hover{background:color-mix(in srgb,var(--ink) 85%,var(--accent))}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.small{padding:6px 12px; font-size:13px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.linkbtn{border:0; background:none; color:var(--accent); cursor:pointer; padding:0; font-size:13px}
.demo-banner{background:color-mix(in srgb,#E8AA4B 22%,var(--surface)); color:var(--ink); text-align:center; font-size:13px; padding:6px 16px; border-bottom:1px solid var(--line)}
.flash{background:color-mix(in srgb,var(--pr) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--pr) 35%,var(--line)); border-radius:var(--radius); padding:10px 14px; margin:0 0 16px}
.error{background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:8px; padding:10px 12px}
.page-title{font-family:var(--display); font-size:clamp(24px,3vw,32px); margin:4px 0 8px; line-height:1.2}
.muted{color:var(--muted)} .small{font-size:12.5px} .mt{margin-top:10px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.home-top{margin-bottom:16px}
.home-top .muted{margin:0}
.sitefoot{border-top:1px solid var(--line); margin-top:32px; color:var(--muted); font-size:12.5px}
.sitefoot a{color:var(--muted)}
.sitefoot .wrap{padding-block:18px 28px}

/* forms */
.authbox{max-width:420px; margin:24px auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.form{display:flex; flex-direction:column; gap:8px}
.form label{font-weight:500; font-size:13.5px; margin-top:6px}
.form input[type=text],.form input:not([type]),.form input[type=email],.form input[type=password]{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 11px}
.form input:focus{outline:2px solid var(--accent); outline-offset:1px}
.form .btn{margin-top:10px; align-self:flex-start}
.check{display:flex; gap:8px; align-items:flex-start; font-weight:400; font-size:13.5px}
.form.narrow{max-width:420px}
.form.row{flex-direction:row; flex-wrap:wrap; align-items:center; margin-top:12px}
.form.row input{flex:1 1 240px}
.form.row .btn{margin-top:0}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:14px}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:6px}
.plan.feature{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.plan h2{font-family:var(--display); font-size:18px; margin:0}
.price{font-family:var(--display); font-size:22px; font-weight:600; margin:4px 0 0}
.price span{font-family:var(--body); font-size:13px; font-weight:400; color:var(--muted)}
.price.alt{font-size:16px; margin:0}
.feats{padding-left:18px; margin:6px 0 12px; font-size:13.5px; flex:1}
.feats li{margin-bottom:4px}
.plan .actions{display:flex; flex-direction:column; gap:8px}
.plan .eyebrow{margin:0}
.plan.optional{border-style:dashed}
.ladder{list-style:none; padding:0; margin:0 0 18px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; counter-reset:step}
.ladder li{position:relative; padding:12px 14px 12px 40px; background:var(--surface); border:1px solid var(--line); border-left:0; counter-increment:step}
.ladder li:first-child{border-left:1px solid var(--line); border-radius:var(--radius) 0 0 var(--radius)}
.ladder li:last-child{border-radius:0 var(--radius) var(--radius) 0}
.ladder li::before{content:counter(step); position:absolute; left:12px; top:12px; width:20px; height:20px; border-radius:50%; background:var(--ink); color:var(--surface); font-size:12px; display:grid; place-items:center}
.ladder li.optional{border-style:dashed; background:transparent}
.ladder li.optional::before{background:transparent; color:var(--ink); border:1px dashed var(--ink)}
.ladder b{display:block} .ladder small{color:var(--muted)}
@media (max-width:760px){ .ladder{grid-template-columns:minmax(0,1fr)} .ladder li{border-left:1px solid var(--line); border-top:0} .ladder li:first-child{border-top:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0} .ladder li:last-child{border-radius:0 0 var(--radius) var(--radius)} }
.plan form .btn{width:100%}
.copy{font-family:var(--mono); font-size:12.5px; user-select:all}

/* paywall */
.paywall{border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 6%,var(--surface)); border-radius:var(--radius); padding:22px; margin:0 0 24px}
.paywall h2{font-family:var(--display); font-size:19px; margin:6px 0 6px}
.paywall .lockicon{width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent)}
.paywall .lockicon svg{width:18px; height:18px}
.lockedlist{columns:2 200px; padding-left:18px; margin:6px 0 14px}
.paywall .actions{display:flex; gap:8px; flex-wrap:wrap}
.atscale{font-family:var(--mono); font-size:10px; color:var(--accent)}
.psec .small.muted{margin-top:8px}

/* account */
.acct{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.panelbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; min-width:0}
.panelbox.wide{grid-column:1 / -1}
.panelbox h2{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.bigplan{font-family:var(--display); font-size:26px; font-weight:600; margin:0 0 4px}
.legal{max-width:760px}
.legal h2{font-size:16px; margin:18px 0 6px}
.draft{display:inline-block; font-family:var(--mono); font-size:11px; background:color-mix(in srgb,#E8AA4B 25%,var(--surface)); border-radius:6px; padding:3px 8px}

/* assessment */
.assess{display:flex; flex-direction:column; gap:14px; max-width:980px}
.qcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.qcard legend{font-family:var(--display); font-weight:600; font-size:16px; padding:0}
.qcard fieldset{border:0; margin:0; padding:0; min-width:0}
.opts{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:10px}
@media (max-width:760px){ .opts{grid-template-columns:minmax(0,1fr)} }
.opt{position:relative}
.opt input{position:absolute; opacity:0}
.opt label{display:block; height:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px; cursor:pointer; background:var(--bg)}
.opt label b{display:block; font-family:var(--mono); font-size:10.5px; color:var(--muted); font-weight:500; margin-bottom:3px}
.opt input:checked + label{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.opt input:focus-visible + label{outline:2px solid var(--accent)}
.ctx{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.result{max-width:980px; margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.score{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.score .big{font-family:var(--display); font-size:44px; font-weight:700; color:var(--accent); line-height:1}
.bars{display:grid; gap:8px; margin:14px 0}
.bar{display:grid; grid-template-columns:150px minmax(0,1fr) 30px; gap:10px; align-items:center; font-size:13px}
.bar .track{height:10px; border-radius:999px; background:color-mix(in srgb,var(--ink) 8%,var(--surface)); overflow:hidden}
.bar .fill{height:100%; background:var(--accent); border-radius:999px}
.bar span:last-child{font-family:var(--mono); text-align:right}
@media (max-width:520px){ .bar{grid-template-columns:110px minmax(0,1fr) 26px} }

/* platform overrides */
footer.sitefoot{max-width:none; margin-top:32px}
.flow{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.stage b{overflow-wrap:anywhere}

/* framework content */
.deftag{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 5px; margin-left:4px; font-weight:500; vertical-align:1px}
.rules li{margin-bottom:6px}
.rulelist{padding-left:22px; max-width:75ch}
.rulelist li{margin-bottom:10px}
.rulelist li b{display:block; font-weight:600}
.rulelist li span{display:block; color:var(--muted); font-size:13px}
.facts.big{max-width:640px; margin-top:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.raci td{text-align:center; font-family:var(--mono); font-weight:600 !important}
.raci td:first-child{text-align:left; font-family:var(--body)}
.raci .r-A{color:var(--accent)} .raci .r-R{color:var(--pr)} .raci .r-C{color:var(--muted)} .raci .r-I{color:var(--muted); font-weight:400 !important}
.tbl .tight{margin:0; padding-left:16px} .tbl .tight li{margin-bottom:2px}
.steps li{margin-bottom:8px}
.refs li{margin-bottom:6px} .refs a{color:var(--ink)}
.legendlist{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px}
.legendlist li{display:flex; align-items:center; gap:6px} .legendlist i{width:10px; height:10px; border-radius:50%; background:var(--c)}
.psec h2 a{color:inherit}
.rcard h3 a{color:inherit; text-decoration:none} .rcard h3 a:hover{text-decoration:underline}
.tbl a{color:var(--ink)}
code{font-family:var(--mono); font-size:.9em; background:color-mix(in srgb,var(--ink) 7%,var(--surface)); padding:1px 5px; border-radius:4px}
/* lifecycle strip on the big picture */
.life{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:4px}
.life .stage{background:color-mix(in srgb,var(--pj) 12%,var(--surface))}
.life .stage.handover{background:color-mix(in srgb,var(--pj) 26%,var(--surface))}
.life .stage .gate{display:block; font-family:var(--mono); font-size:9.5px; color:var(--pj); margin-top:3px}

.psec p a,.psec li a:not(.btn){color:var(--accent)}

/* ---------- governance workspace ---------- */
.ws{display:grid; grid-template-columns:250px minmax(0,1fr); gap:24px; align-items:start; margin-top:8px}
@media (max-width:900px){ .ws{grid-template-columns:minmax(0,1fr)} .wside{position:static!important; max-height:none!important} }
.wside{position:sticky; top:72px; max-height:calc(100vh - 90px); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.wsname{font-family:var(--display); font-weight:600; font-size:15px; margin:0 0 10px; line-height:1.25}
.wsname small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:2px}
.wnav{display:flex; flex-direction:column; gap:1px; margin-bottom:12px}
.wnav a{color:var(--ink); text-decoration:none; padding:6px 8px; border-radius:7px; font-size:13.5px}
.wnav a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.wnav a[aria-current]{background:var(--ink); color:var(--surface); font-weight:600}
.wlabel{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:8px 0 4px; border-top:1px solid var(--line); padding-top:10px}
.tree,.tree ul{list-style:none; margin:0; padding:0}
.tree ul{padding-left:12px; border-left:1px solid var(--line); margin-left:6px}
.tree a{display:grid; grid-template-columns:8px minmax(0,1fr); column-gap:7px; align-items:baseline; color:var(--ink); text-decoration:none; font-size:13px; padding:3px 6px; border-radius:6px; line-height:1.3}
.tree a i{width:8px; height:8px; border-radius:2px; background:var(--c); align-self:start; margin-top:4px}
.tree a small{grid-column:2; color:var(--muted); font-size:11px}
.tree a:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.tree a[aria-current]{background:color-mix(in srgb,var(--c) 16%,var(--surface)); font-weight:600}
.wmain{min-width:0; display:flex; flex-direction:column; gap:14px}
.wmain .panelbox h2{margin-bottom:10px}
.whead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.whead .page-title{margin:2px 0 4px}
.whead p{margin:0}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.headactions{display:flex; gap:8px; flex-wrap:wrap}
.crumbs{font-size:13px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap}
.crumbs a{color:var(--muted)} .crumbs i{font-style:normal; opacity:.5}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto}
.tabs a{padding:8px 12px; color:var(--muted); text-decoration:none; font-size:13.5px; border-bottom:2px solid transparent; white-space:nowrap}
.tabs a[aria-current]{color:var(--ink); border-color:var(--accent); font-weight:600}
.chip{display:inline-block; font-size:11.5px; font-weight:600; border-radius:999px; padding:1px 8px; vertical-align:1px; white-space:nowrap; text-transform:none; letter-spacing:0; font-family:var(--body)}
.c-grey{background:color-mix(in srgb,var(--ink) 9%,var(--surface)); color:var(--muted)}
.c-green{background:color-mix(in srgb,var(--pj) 18%,var(--surface)); color:color-mix(in srgb,var(--pj) 75%,var(--ink))}
.c-amber{background:color-mix(in srgb,var(--tm) 20%,var(--surface)); color:color-mix(in srgb,var(--tm) 70%,var(--ink))}
.c-red{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); color:color-mix(in srgb,var(--accent) 75%,var(--ink))}
.c-teal{background:color-mix(in srgb,var(--pr) 16%,var(--surface)); color:color-mix(in srgb,var(--pr) 75%,var(--ink))}
.c-purple{background:color-mix(in srgb,#7a55d0 15%,var(--surface)); color:color-mix(in srgb,#7a55d0 75%,var(--ink))}
.wtags .chip{white-space:normal; max-width:100%; border-radius:10px}
.kind{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 45%,var(--line)); border-radius:4px; padding:0 5px; font-weight:500}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; color:var(--ink); text-decoration:none; display:flex; flex-direction:column}
.stat b{font-family:var(--display); font-size:26px; line-height:1.1}
.stat span{color:var(--muted); font-size:12.5px}
a.stat:hover{border-color:var(--ink)}
.stat.warn b{color:var(--accent)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.list{list-style:none; padding:0; margin:0}
.list li{padding:7px 0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.list li:last-child{border-bottom:0}
.list li small{flex-basis:100%; color:var(--muted); font-size:12px}
.list li form.inline{margin-left:auto}
.empty{margin:0; font-size:13px}
.callout{border-color:var(--accent)}
.wlife{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
@media (min-width:1200px){ .wlife,.phases{grid-template-columns:repeat(9,minmax(0,1fr))} }
.wlife .stage{cursor:default; display:flex; flex-direction:column; gap:3px; padding-right:14px}
.wlife .stage b{font-size:12px}
.wlife .stage a{font-size:12px; color:var(--ink)}
.wlife .stage .muted{font-size:11.5px}
.wlife .stage.has{background:color-mix(in srgb,var(--pj) 20%,var(--surface))}
ol.life.phases{list-style:none; padding:0; margin:0 0 12px}
.phases .stage{cursor:default; font-size:12px}
.phases .stage.past{background:color-mix(in srgb,var(--pj) 30%,var(--surface))}
.phases .stage.now{background:var(--pj); color:#fff}
.phases .stage.now .gate{color:#fff}
.nextgate{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; background:color-mix(in srgb,var(--pj) 8%,var(--surface)); border:1px solid color-mix(in srgb,var(--pj) 30%,var(--line)); border-radius:8px; padding:10px 12px}
h3.sub{font-size:13px; margin:14px 0 6px}
.grid-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px 12px; align-items:end}
.grid-form label{display:flex; flex-direction:column; gap:4px; margin:0}
.grid-form .span2{grid-column:1 / -1}
.grid-form .btn{justify-self:start}
.form select,.form textarea,.grid-form input,.form input[type=date],.form input[type=time],.form input[type=number],.meeting textarea,.record input,.record select,.record textarea{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; max-width:100%}
.form.row select{flex:1 1 180px; width:auto}
.form textarea{resize:vertical}
fieldset{border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:0; min-width:0}
legend{font-weight:600; font-size:13px; padding:0 4px}
.invite{display:flex; flex-wrap:wrap; gap:6px 16px}
.invite legend{width:auto}
.readonly{background:color-mix(in srgb,var(--ink) 6%,var(--surface)); padding:4px 10px; border-radius:6px}
.actions li{flex-wrap:nowrap; align-items:flex-start}
.actions li>span{display:flex; flex-direction:column; flex:1; min-width:0}
.actions li.late small{color:var(--accent)}
.tick{width:20px; height:20px; border-radius:50%; border:2px solid var(--line); background:var(--surface); cursor:pointer; flex:none; margin-top:1px; padding:0}
.tick:hover{border-color:var(--pj)}
.tick.on{background:var(--pj); border-color:var(--pj); box-shadow:inset 0 0 0 3px var(--surface)}
.agenda{padding-left:20px; margin:0; display:flex; flex-direction:column; gap:12px}
.agenda textarea{margin-top:4px}
.bar-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.meeting{display:flex; flex-direction:column; gap:14px}
.meeting .check{margin:4px 0}
.recgrid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start}
@media (max-width:1100px){ .recgrid{grid-template-columns:minmax(0,1fr)} }
.recside{display:flex; flex-direction:column; gap:14px; position:sticky; top:72px}
@media (max-width:1100px){ .recside{position:static} }
.record .field{display:flex; flex-direction:column; gap:4px; margin-bottom:6px}
.record .field>label{font-weight:600; font-size:13.5px}
.record .field p{margin:0}
.record [disabled]{opacity:1; color:var(--ink); background:var(--surface); border-style:dashed}
.tbl.edit td{padding:3px}
.tbl.edit input,.tbl.edit select{padding:5px 7px; border-radius:6px; min-width:110px}
.row2{display:flex; gap:8px}
.versions{list-style:none; padding:0; margin:0}
.versions li{padding:6px 0; border-bottom:1px solid var(--line); font-size:13px}
.versions li.on>a{font-weight:700}
.versions small{display:block; color:var(--muted)}
/* A long history scrolls in its own box instead of stretching the page. */
.histbox{max-height:min(60vh,560px); overflow-y:auto; overscroll-behavior:contain; padding-right:6px}
.histbox:focus-visible{outline:2px solid var(--accent, #6b8afd); outline-offset:2px}
.checks{list-style:none; padding:0; margin:0}
.checks li{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks li>div{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.checks small{color:var(--muted)}
.checks .mark{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:700; font-size:12px; border:2px solid var(--line); color:var(--muted)}
.checks li.ok .mark{background:var(--pj); border-color:var(--pj); color:#fff}
.hard{font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:4px; padding:0 4px}
.outcomes{display:flex; flex-direction:column; gap:4px}
.nowrap{white-space:nowrap}
.tbl.audit td{font-size:12.5px}
.authbox.wide{max-width:640px}
details>summary{cursor:pointer; font-weight:600; font-size:13.5px}
details.panelbox>summary{font-weight:600}

.wmain a:not(.btn):not(.stat){color:var(--ink); text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent); text-underline-offset:2px}
.wmain a:not(.btn):not(.stat):hover{text-decoration-color:var(--accent)}
.list li>a{font-weight:600}
.tabs a{text-decoration:none!important; color:var(--muted)!important}
.tabs a[aria-current]{color:var(--ink)!important}
.phases .stage .gate{font-size:10px}

.tbl td .small{font-weight:400}
.checks .ttl{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.form label>input,.form label>select,.form label>textarea{display:block; margin-top:4px; width:100%}
.form label.check>input{display:inline-block; width:auto; margin-top:3px}
@media (max-width:900px){
  .wside{padding:10px 12px}
  .wside .wsname{margin:0}
}

/* setup journey */
.setup{max-width:980px; margin:8px auto 0; display:flex; flex-direction:column; gap:16px}
.setup-head .page-title{margin:2px 0 4px}
.setup-head p{margin:0; max-width:70ch}
.stepper{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; counter-reset:s}
@media (max-width:760px){ .stepper{grid-template-columns:repeat(3,minmax(0,1fr))} }
.stepper li>a,.stepper li>span{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:13px; text-decoration:none; height:100%}
.stepper li i{font-style:normal; width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:11px; border:1.5px solid var(--line)}
.stepper li.done>a,.stepper li.done>span{color:var(--ink)}
.stepper li.done i{background:var(--pj); border-color:var(--pj); color:#fff}
.stepper li.now>a,.stepper li.now>span{border-color:var(--ink); color:var(--ink); font-weight:600}
.stepper li.now i{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.narrowbox{max-width:560px}
.tree.static span{display:inline-flex; align-items:baseline; gap:6px; padding:3px 0; font-size:13.5px}
.tree.static span i{width:8px; height:8px; border-radius:2px; background:var(--c)}
.tree.static small{color:var(--muted)}

/* ---------- work tracker ---------- */
.subtabs{display:flex; gap:4px; flex-wrap:wrap}
.subtabs a{padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted)!important; text-decoration:none!important; font-size:13px}
.subtabs a[aria-current]{background:var(--ink); border-color:var(--ink); color:var(--surface)!important; font-weight:600}
.quickbar{display:flex; flex-direction:column; gap:6px}
.form.row.quick{margin:0; gap:6px}
.form.row.quick input{flex:1 1 260px}
.form.row.quick select{flex:0 1 150px}
.bhead{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.bhead h2{margin:0!important}
.wboard{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(185px,1fr); gap:10px; overflow-x:auto; padding-bottom:6px; align-items:start}
.wcol{background:color-mix(in srgb,var(--ink) 4%,var(--surface)); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:120px; display:flex; flex-direction:column; gap:8px}
.wcol h3{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:2px 4px 2px; display:flex; justify-content:space-between; gap:6px}
.wcol .count{font-family:var(--mono); font-size:11px}
.wcol.over{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.wcol.over .count{color:var(--accent); font-weight:700}
.wcol.target{outline:2px dashed var(--pr); outline-offset:-2px}
.wcol .drop{font-size:12px; color:var(--muted); text-align:center; margin:18px 0}
.wcard{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:5px; cursor:grab; box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.wcard.exp{border-left:3px solid var(--accent)}
.wcard.dragging{opacity:.5}
.wcard header{display:flex; align-items:center; gap:6px; justify-content:space-between}
.wcard .wtitle{font-size:13.5px; line-height:1.35; color:var(--ink)!important; text-decoration:none!important; font-weight:500}
.wcard .wtitle:hover{text-decoration:underline!important}
.wcard footer{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.wcard .mover{display:flex; gap:4px}
.wcard .mover select{font-size:12px; padding:3px 6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); width:100%}
html.js .nojs{display:none}
.wkey{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--muted)!important; text-decoration:none!important; white-space:nowrap}
.wkey:hover{color:var(--ink)!important}
.wtype{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; border-radius:4px; padding:1px 5px; border:1px solid currentColor; font-weight:500; white-space:nowrap}
.t-capability{color:var(--nw)} .t-epic{color:var(--pf)} .t-feature{color:var(--pr)} .t-request{color:var(--tm)} .t-story{color:var(--pj)} .t-defect{color:var(--accent)} .t-enabler{color:var(--fd)} .t-subtask{color:var(--muted)} .t-change{color:var(--fd)}
.wtags{display:flex; flex-wrap:wrap; gap:4px; margin:4px 0}
.wclass{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:4px; padding:1px 6px; border:1px solid currentColor}
.wclass.k-strategic{color:var(--pf)} .wclass.k-adhoc{color:var(--tm)}
.capchip{font-size:11px; font-weight:700; color:var(--nw); text-decoration:none; border:1px solid currentColor; border-radius:4px; padding:0 6px}
.supl{display:block; margin-top:2px}
.pvi{font-family:var(--mono); font-size:10.5px; border-radius:999px; padding:1px 7px; background:color-mix(in srgb,var(--pr) 14%,var(--surface)); color:color-mix(in srgb,var(--pr) 70%,var(--ink)); white-space:nowrap}
.pvi.none{background:color-mix(in srgb,var(--ink) 7%,var(--surface)); color:var(--muted)}
.pvi.exp{background:var(--accent); color:#fff; font-weight:700}
.prio{font-size:10.5px; font-weight:600; border-radius:4px; padding:0 5px; white-space:nowrap}
.p-critical{background:var(--accent); color:#fff} .p-high{background:color-mix(in srgb,var(--accent) 18%,var(--surface)); color:color-mix(in srgb,var(--accent) 75%,var(--ink))} .p-medium{background:color-mix(in srgb,var(--tm) 18%,var(--surface))} .p-low{background:color-mix(in srgb,var(--ink) 7%,var(--surface)); color:var(--muted)}
.est{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.who{margin-left:auto; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--surface); font-size:10px; font-weight:700; display:grid; place-items:center}
.labels i{font-style:normal; font-family:var(--mono); font-size:10px; background:color-mix(in srgb,var(--ink) 7%,var(--surface)); border-radius:4px; padding:0 5px; margin-right:3px}
.wtable td{vertical-align:middle}
.wtable tr.exp td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.num{font-variant-numeric:tabular-nums; text-align:right}
.stack{display:flex; flex-direction:column; gap:14px; min-width:0}
.pvifs .pvigrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pvifs legend b{font-family:var(--display); font-size:15px; margin-left:4px}
.flowline{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:2px}
.flowline li{font-size:12.5px; color:var(--muted); padding:3px 8px; border-left:2px solid var(--line)}
.flowline li.now{color:var(--ink); font-weight:600; border-color:var(--pr); background:color-mix(in srgb,var(--pr) 8%,var(--surface))}
.comments{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.comments p{margin:4px 0 0; white-space:normal}
.triage li{flex-direction:column; align-items:flex-start}
.row2.wrap{flex-wrap:wrap; margin-top:6px}
.incoming{border-color:color-mix(in srgb,var(--pj) 45%,var(--line))}
.recv{margin-top:10px}
.searchf{align-items:end}

/* platform administration */
.admin{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.licform{display:flex; flex-direction:row; flex-wrap:wrap; gap:4px; align-items:center}
.form.licform select,.form.licform input{font:inherit; font-size:12.5px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); width:auto}
.form.licform input{width:70px}
.licform .btn{margin:0}
.acting{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:var(--radius); padding:10px 14px; font-size:13.5px}

/* boards v2: header row, swimlanes, toolbar */
.wboard{display:grid!important; grid-auto-flow:row!important; grid-template-columns:repeat(var(--cols),minmax(180px,1fr)); gap:8px; overflow-x:auto; align-items:stretch; padding-bottom:6px}
.wch{position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; gap:6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; background:color-mix(in srgb,var(--ink) 6%,var(--surface)); border-radius:8px; padding:7px 9px}
.wch .count{font-family:var(--mono)}
.wch.over{background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--accent)}
.lanehead{padding:8px 4px 2px; border-top:1px solid var(--line); font-size:13px; display:flex; gap:8px; align-items:baseline; margin-top:4px}
.lanehead a{color:var(--ink)}
.wcol{min-height:44px!important}
.boardbar{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:end; margin:0 0 12px; padding:10px; background:color-mix(in srgb,var(--ink) 3%,var(--surface)); border:1px solid var(--line); border-radius:10px}
.boardbar label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted); font-weight:600}
.boardbar label.check{flex-direction:row; align-items:center; gap:5px; color:var(--ink); font-weight:400; font-size:12.5px; padding-bottom:6px}
.boardbar select,.boardbar input:not([type=checkbox]){font:inherit; font-size:13px; font-weight:400; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:5px 8px}
.boardbar a{align-self:center; color:var(--accent)!important}
.plink{font-size:11.5px; color:var(--muted)!important; text-decoration:none!important; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.plink:hover{color:var(--ink)!important}
.prog{height:5px; border-radius:999px; background:color-mix(in srgb,var(--ink) 9%,var(--surface)); overflow:hidden}
.prog i{display:block; height:100%; background:var(--pj)}
.wcard.raid{border-left:3px solid var(--tm)}
.t-portfolio-epic{color:var(--pf)} .t-risk{color:var(--tm)} .t-issue{color:var(--accent)}
.boardset{margin-top:10px}
.wipl{display:flex; flex-direction:column; font-size:11.5px; color:var(--muted); gap:2px}
.wipl input{width:70px!important}
.adr{border-color:color-mix(in srgb,var(--pr) 40%,var(--line))}
.transition{border-color:color-mix(in srgb,var(--pj) 45%,var(--line))}
/* boards directory */
.boardcta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0}
.blayer{border-top:3px solid var(--c)}
.brows{display:flex; flex-direction:column}
.brow{display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center}
.brow:last-child{border-bottom:0}
@media (max-width:700px){ .brow{grid-template-columns:minmax(0,1fr)} }
.bunit a{color:var(--ink)}
.bcards{display:flex; gap:8px; flex-wrap:wrap}
.btree .bunit{margin-left:calc(var(--d,0) * 22px); padding:2px 0 2px 10px; border-left:3px solid var(--c)}
.btree .brow{grid-template-columns:minmax(240px,360px) minmax(0,1fr); align-items:start}
.btree .bunit{margin-top:8px}
@media (max-width:700px){ .btree .bunit{margin-left:calc(var(--d,0) * 12px)} .btree .brow{grid-template-columns:minmax(0,1fr)} }
.bcard{display:flex; flex-direction:column; gap:4px; min-width:150px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); text-decoration:none!important; color:var(--ink)!important}
.bcard:hover{border-color:var(--ink)}
.bname{font-weight:600; font-size:13px}
.bmini{display:flex; align-items:flex-end; gap:3px; height:34px}
.bmini i{display:block; width:12px; border-radius:3px 3px 0 0; background:color-mix(in srgb,var(--c,var(--pr)) 55%,var(--surface))}
.expn{color:var(--accent)}

/* ---------- tracker parity: queries, inbox, reports, timeline, settings ---------- */
:root{ --s1:#4B52AE; --s2:#C56A12 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --s1:#7C82E6; --s2:#C47A20 }}
:root[data-theme="dark"]{ --s1:#7C82E6; --s2:#C47A20 }
.nbadge{display:inline-block; min-width:18px; text-align:center; font-size:11px; font-weight:700; line-height:18px; border-radius:999px; background:var(--accent); color:#fff; padding:0 5px; margin-left:6px}
.mono{font-family:var(--mono)}
.pqlform .row2{display:flex; gap:8px; align-items:center}
.pqlform .grow{flex:1 1 auto; min-width:0}
.pqlform input.mono{font-size:13.5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink)}
.pqlform details table th{font-family:var(--mono); font-weight:500; white-space:nowrap; text-align:left; padding-right:12px; vertical-align:top}
.pqlform code,.panelbox code{font-family:var(--mono); font-size:12px; background:color-mix(in srgb,var(--ink) 6%,transparent); padding:1px 5px; border-radius:4px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0}
.qchip{border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--ink); text-decoration:none; background:var(--surface)}
.qchip:hover{border-color:var(--ink)}
.qgrid{display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; align-items:start; margin-top:16px}
@media (max-width:900px){ .qgrid{grid-template-columns:minmax(0,1fr)} }
.qgrid .list small.mono{display:block; font-size:11px; color:var(--muted); word-break:break-all}
.row2.spread{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.bulkbar{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-top:12px; background:var(--bg)}
.bulkbar legend{font-weight:600; font-size:13px; padding:0 4px}
.bulkbar .grid-form{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.inbox li.unread{border-left:3px solid var(--accent); padding-left:10px}
.inbox li.read{opacity:.75}
.grid2{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:900px){ .grid2{grid-template-columns:minmax(0,1fr)} }
.stack{display:flex; flex-direction:column; gap:16px}
.rules li{display:flex; justify-content:space-between; gap:12px; align-items:center}
.rules li small{display:block; color:var(--muted)}
code.token{display:inline-block; font-size:13px; padding:6px 10px; word-break:break-all; user-select:all}
pre.small{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; overflow:auto; font-family:var(--mono)}

/* reports */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 14px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.tile span{display:block; font-size:12px; color:var(--muted)}
.tile b{font-family:var(--display); font-size:26px; font-weight:600; line-height:1.2}
.tile b small{font-size:13px; font-weight:500; color:var(--muted); font-family:var(--body)}
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); gap:16px; margin-top:12px}
.charts.fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr))}
.chart{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 14px 10px; min-width:0}
.chart figcaption{font-weight:600; font-size:14px; margin-bottom:4px}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart .grid line{stroke:var(--line); stroke-width:1}
.chart .grid text,.chart .xl text{font-size:11px; fill:var(--muted); font-family:var(--body)}
.chart line.base{stroke:var(--muted); stroke-width:1}
.chart line.ref{stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 4}
.chart .ser path{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .ser.s1 path{stroke:var(--s1)} .chart .ser.s2 path{stroke:var(--s2)}
.chart .ser.dash path{stroke:var(--muted); stroke-dasharray:5 4; stroke-width:1.5}
.chart .ser circle{stroke:var(--surface); stroke-width:2}
.chart .ser.s1 circle{fill:var(--s1)} .chart .ser.s2 circle{fill:var(--s2)}
.chart circle.hit,.chart rect.hit,.chart rect.hitcol{fill:transparent!important; stroke:none!important}
.chart .pt:hover circle:not(.hit){r:6}
.chart .bar.s1 path{fill:var(--s1)} .chart .bar.s2 path{fill:var(--s2)}
.chart .bar:hover path{opacity:.85}
.chart .cfd path{stroke:var(--surface); stroke-width:1}
.chart rect.hitcol:hover{fill:color-mix(in srgb,var(--ink) 6%,transparent)!important}
.clegend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); margin:0 0 6px}
.clegend span{display:inline-flex; align-items:center; gap:6px}
.sw{display:inline-block; width:12px; height:12px; border-radius:3px}
.sw.s1{background:var(--s1)} .sw.s2{background:var(--s2)}
.sw.dash{height:0; border-top:2px dashed var(--muted); border-radius:0}
.chart details{margin-top:6px}

/* timeline */
.tl{position:relative; --lab:minmax(200px,32%); font-size:13px}
.tlhead,.tlrow{display:grid; grid-template-columns:var(--lab) minmax(0,1fr); gap:10px; align-items:center}
.tlhead{border-bottom:1px solid var(--line); padding-bottom:4px; margin-bottom:4px; color:var(--muted); font-size:12px}
.tlscale{position:relative; height:18px}
.tlscale span{position:absolute; top:0; border-left:1px solid var(--line); padding-left:4px; white-space:nowrap}
.tlrow{padding:5px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.tllab{min-width:0; overflow:hidden}
.tllab > a:not(.wkey){color:var(--ink)}
.tllab small{display:block; margin-top:2px}
.tlrow.lvl1 .tllab{padding-left:18px}
.tlrow.lvl2 .tllab{padding-left:9px}
.tltrack{position:relative; height:22px; background:repeating-linear-gradient(90deg,transparent 0 calc(100% - 1px),transparent 0)}
.tltrack::after{content:""; position:absolute; top:-6px; bottom:-6px; left:var(--today); border-left:2px solid var(--accent); opacity:.55}
.tlbar{position:absolute; top:3px; height:16px; border-radius:4px; background:color-mix(in srgb,var(--s1) 30%,var(--surface)); border:1px solid var(--s1); overflow:hidden; display:block}
.tlbar i{display:block; height:100%; background:var(--s1)}
.tlbar.t-capability,.tlbar.t-portfolio-epic{border-color:var(--pf); background:color-mix(in srgb,var(--pf) 25%,var(--surface))}
.tlbar.est{background-image:repeating-linear-gradient(45deg,transparent 0 5px,color-mix(in srgb,var(--surface) 70%,transparent) 5px 8px)}
.tlbar.late{outline:2px solid var(--s2); outline-offset:1px}
.tlbar.conflict{outline:2px dashed var(--accent); outline-offset:1px}
@media (max-width:700px){ .tl{--lab:120px} .tllab small{display:none} }
#bulkf td:nth-child(3){min-width:240px}
#bulkf td:nth-child(3) .labels{display:block}
.qgrid{grid-template-columns:230px minmax(0,1fr)}
@media (max-width:900px){ .qgrid{grid-template-columns:minmax(0,1fr)} }

/* ---------- simple lifecycle ---------- */
.sizebar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 12px}
.tier{font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; letter-spacing:.02em}
.tier.t-small{background:color-mix(in srgb,var(--pr) 16%,var(--surface)); color:color-mix(in srgb,var(--pr) 70%,var(--ink))}
.tier.t-standard{background:color-mix(in srgb,var(--pf) 16%,var(--surface)); color:color-mix(in srgb,var(--pf) 70%,var(--ink))}
.tier.t-major{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); color:color-mix(in srgb,var(--accent) 70%,var(--ink))}
.stages4{list-style:none; margin:4px 0 18px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.stages4 li.handto{border-style:dashed; background:color-mix(in srgb,var(--pr) 6%,var(--surface))}
.stages4 li.handto .n{background:var(--pr); color:#fff}
.stages4 li{position:relative; border:1px solid var(--line); border-radius:12px; padding:12px 12px 10px; background:var(--surface); display:flex; flex-direction:column; gap:2px}
.stages4 li .n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:color-mix(in srgb,var(--ink) 8%,var(--surface)); color:var(--muted); margin-bottom:6px}
.stages4 li b{font-family:var(--display); font-size:16px}
.stages4 li small{font-size:12px; color:var(--muted); line-height:1.35}
.stages4 li em{font-style:normal; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line)}
.stages4 li.past .n{background:var(--pj); color:#fff}
.stages4 li.now{border-color:var(--pj); box-shadow:0 0 0 2px color-mix(in srgb,var(--pj) 35%,transparent); background:color-mix(in srgb,var(--pj) 6%,var(--surface))}
.stages4 li.now .n{background:var(--ink); color:var(--surface)}
.stages4 li.now em{color:var(--pj)}
@media (max-width:760px){ .stages4{grid-template-columns:repeat(2,minmax(0,1fr))} }
.nextstep{border:1px solid color-mix(in srgb,var(--pj) 40%,var(--line)); border-radius:14px; padding:16px; background:color-mix(in srgb,var(--pj) 4%,var(--surface))}
.nshead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.nshead h3{font-family:var(--display); font-size:20px; margin:2px 0}
.nsbar{width:200px; max-width:100%; height:8px; border-radius:999px; background:color-mix(in srgb,var(--ink) 8%,var(--surface)); overflow:hidden}
.nsbar i{display:block; height:100%; background:var(--pj); border-radius:999px}
.nslist{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px}
.nslist li{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.nslist li small{display:block; color:var(--muted); font-size:12px}
.nslist li .btn{flex:none}
.nsready{font-weight:600; color:var(--pj)}
.formalsrc{font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:0 7px; margin-left:6px; font-weight:500}
.sizing summary{cursor:pointer}
.sizeform{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:12px}
.sizeform fieldset{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0}
.sizeform legend{font-weight:600; font-size:13.5px; padding:0 4px}
.sizeform .btn{align-self:end; justify-self:start}

/* ---------- setup ---------- */
.setupform{display:flex; flex-direction:column; gap:14px; max-width:860px}
.typecards{border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.typecards legend{font-weight:600; margin-bottom:8px; padding:0}
.typecard{position:relative; display:block; cursor:pointer}
.typecard input{position:absolute; opacity:0; inset:0}
.typecard span{display:flex; flex-direction:column; gap:4px; height:100%; border:1.5px solid var(--line); border-radius:12px; padding:14px; background:var(--surface)}
.typecard b{font-family:var(--display); font-size:15px}
.typecard small{color:var(--muted); font-size:12.5px; line-height:1.4}
.typecard input:checked + span{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.typecard input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.trialbox{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-color:color-mix(in srgb,var(--pj) 45%,var(--line)); background:color-mix(in srgb,var(--pj) 6%,var(--surface)); margin-bottom:18px}
.trialbox h2{font-family:var(--display); font-size:18px; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 0 4px}
.trialbox p{margin:0}
.optset{border:1px dashed var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.optset legend{font-weight:600; font-size:13.5px; padding:0 4px}

/* ---------- grouped workspace menu ---------- */
.gnav{gap:2px}
.gnav .ngroup{display:flex; flex-direction:column}
.gnav .nhead{font-weight:600; font-size:14px; padding:8px 10px; border-radius:8px; color:var(--ink); text-decoration:none}
.gnav .ngroup.open > .nhead{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.gnav .nsub{display:flex; flex-direction:column; gap:1px; margin:2px 0 6px 10px; padding-left:8px; border-left:2px solid var(--line)}
.gnav .nsub a{font-size:13px; padding:5px 8px}


/* ---------- my day ---------- */
.md-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.md-quick{display:flex; gap:8px; flex-wrap:wrap}
.md-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start; margin-bottom:16px}
@media (max-width:980px){ .md-grid{grid-template-columns:minmax(0,1fr)} }
.md-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.md-list li{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface)}
.md-list li > div{flex:1 1 auto; min-width:0}
.md-list li b{display:block; font-weight:600; overflow-wrap:anywhere}
.md-list li small{display:block; color:var(--muted); font-size:12px}
.md-list li .chip{flex:none; min-width:74px; text-align:center}
.md-clear{color:var(--muted); margin:4px 0}
.md-units{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.md-unit{display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:12px; padding:12px; color:var(--ink); text-decoration:none; background:var(--surface)}
.md-unit:hover{border-color:var(--ink)}
.md-unit small{color:var(--muted); font-size:12px}
.md-unit .nsbar{width:100%; height:6px}
.md-start{border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); margin-bottom:16px}
.md-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}
.md-steps li{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13.5px}
.md-steps li span{width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-size:12px; flex:none}
.md-steps li.done{color:var(--muted)} .md-steps li.done span{background:var(--pj); border-color:var(--pj); color:#fff}
.md-unit .kind{align-self:flex-start}

/* ---------- PMO ---------- */
.rag{display:inline-block; font-size:12px; font-weight:700; border-radius:6px; padding:2px 8px; color:#fff}
.rag.rag-r,.dot.rag-r{background:#C0392B} .rag.rag-a,.dot.rag-a{background:#B7791F} .rag.rag-g,.dot.rag-g{background:#2E7D5B} .rag.rag-g,.rag.rag-a,.rag.rag-r{} .rag-grey,.dot.rag-g{}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--muted); margin-right:6px; flex:none}
.tile.rag-r b{color:#C0392B} .tile.rag-a b{color:#B7791F} .tile.rag-g b{color:#2E7D5B}
a.tile{color:var(--ink); text-decoration:none} a.tile:hover{border-color:var(--ink)}
.why{margin:4px 0 0; padding-left:16px; font-size:12px; color:var(--muted)}
.pmo-tbl td{vertical-align:top}
.nsbar.mini{display:block; width:140px; height:5px; margin:4px 0}
.block{display:block}
.pmo-stages{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.pmo-stages > div{border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:6px}
.pmo-stages small{color:var(--muted); font-size:12px}
.pmo-chip{display:flex; align-items:center; font-size:13px; color:var(--ink); text-decoration:none; padding:5px 8px; border-radius:8px; background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
@media (max-width:900px){ .pmo-stages{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- dashboards and packs ---------- */
.dash{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-bottom:16px}
.dash .wg.wide{grid-column:1 / -1}
.dash .wg h3{font-size:15px; margin:0 0 6px}
.dash .wg .chart{border:0; padding:0}
.wg-kpi span{display:block; font-size:12.5px; color:var(--muted)}
.wg-kpi b{display:block; font-family:var(--display); font-size:40px; line-height:1.1}
.wg-kpi small{color:var(--muted); font-size:12px}
.wg-tools{display:flex; justify-content:flex-end; gap:8px; margin-top:8px; font-size:12px}
.wg-tools .linkbtn{margin-left:8px}
.pack{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; max-width:1000px}
.pack h1{font-family:var(--display); font-size:28px; margin:4px 0 6px}
.pack h2{font-family:var(--display); font-size:17px; margin:22px 0 8px}
.pack .tbl{min-width:0}
@media print{ .sitebar,.wside,.demo-banner,.noprint,.sitefoot,#livebar{display:none!important} .ws{display:block} .pack{border:0; padding:0} }

/* ---------- messages ---------- */
.msg-grid{display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:900px){ .msg-grid{grid-template-columns:minmax(0,1fr)} }
.msg-side h3{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:12px 0 4px}
.msg-side h3:first-child{margin-top:0}
.msg-side ul{list-style:none; margin:0; padding:0}
.msg-side a{display:flex; justify-content:space-between; align-items:center; padding:5px 8px; border-radius:7px; color:var(--ink); text-decoration:none; font-size:13.5px}
.msg-side a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.msg-side a[aria-current]{background:var(--ink); color:var(--surface); font-weight:600}
.msg-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px}
.msg-head h2{font-family:var(--display); font-size:18px; text-transform:none; letter-spacing:0; color:var(--ink); margin:0}
.msgs{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto}
.msg{padding:8px 10px; border-radius:10px}
.msg-meta{display:flex; gap:8px; align-items:baseline; font-size:13px}
.msg-meta span:last-child{color:var(--muted); font-size:12px}
.msg-body{margin:2px 0 4px; overflow-wrap:anywhere}
.msg.system{background:color-mix(in srgb,var(--pj) 7%,var(--surface)); border:1px dashed color-mix(in srgb,var(--pj) 35%,var(--line))}
.msg.announce{background:color-mix(in srgb,var(--pr) 8%,var(--surface))}
.msg.reply{margin-left:24px; border-left:2px solid var(--line)}
.mention{color:var(--accent); font-weight:600}
.msg-compose textarea{width:100%}
.msg-compose .row2{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px}
.unit-links{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.msgs{flex-direction:column-reverse}
.msg-side a[aria-current]{color:var(--surface)!important}
.msg-open{font-size:12px; font-weight:600; margin-left:4px}

/* ---------- whiteboard ---------- */
.wb{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); margin-bottom:16px}
.wb-bar{display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:8px; border-bottom:1px solid var(--line); background:var(--surface)}
.wb-bar button{font:inherit; font-size:13px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:6px 10px; cursor:pointer; min-height:34px}
.wb-bar button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.wb-sep{width:1px; height:24px; background:var(--line); margin:0 4px}
.wb-colors{display:flex; gap:4px}
.wb-colors button{width:26px; min-height:26px; height:26px; padding:0; border-radius:50%}
.wb-colors button[aria-pressed="true"]{outline:2px solid var(--ink); outline-offset:2px}
.wb-status{margin-left:auto; font-size:12px; color:var(--muted)}
.wb-stage{position:relative; height:min(72vh,720px); overflow:hidden; cursor:grab; touch-action:none; background-color:color-mix(in srgb,var(--bg) 70%,var(--surface)); background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink) 14%,transparent) 1px, transparent 0); background-size:22px 22px; outline:none}
.wb-stage[data-tool="sticky"],.wb-stage[data-tool="text"],.wb-stage[data-tool="frame"]{cursor:crosshair}
.wb-stage[data-tool="line"]{cursor:cell}
.wb-world{position:absolute; left:0; top:0; transform-origin:0 0}
.wb-lines{position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; z-index:2}
.wb-lines line{stroke:var(--ink); stroke-width:2.5; pointer-events:stroke; cursor:pointer}
.wb-lines line.bad{stroke:#C0392B; stroke-dasharray:8 6}
.wb-lines line.sel{stroke-width:5}
.wb-head{fill:var(--ink)} .wb-head.bad{fill:#C0392B}
.wb-el{position:absolute; box-sizing:border-box; user-select:none}
.wb-frame{border:2px solid color-mix(in srgb,var(--ink) 18%,transparent); border-radius:14px; background:color-mix(in srgb,var(--surface) 70%,transparent); z-index:1}
.wb-frame.locked{border-style:dashed}
.wb-ftitle{position:absolute; left:12px; top:8px; right:12px; font-weight:700; font-size:15px; color:var(--ink)}
.wb-frame.c-green{background:color-mix(in srgb,#3fae7a 10%,var(--surface))} .wb-frame.c-pink{background:color-mix(in srgb,#e76f8f 10%,var(--surface))} .wb-frame.c-blue{background:color-mix(in srgb,#4f8fd8 10%,var(--surface))} .wb-frame.c-purple{background:color-mix(in srgb,#8a6ad8 10%,var(--surface))} .wb-frame.c-yellow{background:color-mix(in srgb,#f2c94c 14%,var(--surface))}
.wb-text{display:block; white-space:pre-wrap; overflow:hidden; height:100%; outline:none}
.wb-text[contenteditable="true"],.wb-ftitle[contenteditable="true"]{user-select:text; cursor:text; background:#fff; color:#15202B; border-radius:6px; box-shadow:0 0 0 2px var(--accent)}
.wb-el.wb-text,.wb-el.wb-text .wb-text{font-size:20px; font-weight:600; color:var(--ink); z-index:2}
.wb-sticky{z-index:3; border-radius:6px; padding:10px 12px 22px; font-size:14px; line-height:1.3; color:#1b1b1b; box-shadow:0 2px 6px rgba(0,0,0,.12); cursor:move}
.wb-sticky.c-yellow{background:#FFE58A} .wb-sticky.c-pink{background:#FFC2D1} .wb-sticky.c-blue{background:#BFE0FF} .wb-sticky.c-green{background:#C6EFC9} .wb-sticky.c-purple{background:#DCCBFF} .wb-sticky.c-orange{background:#FFD1A6} .wb-sticky.c-white{background:#fff}
.wb-el.sel{outline:3px solid var(--accent); outline-offset:2px}
.wb-el.from{outline:3px dashed var(--accent)}
.wb-sticky.done{opacity:.7}
.wb-key{position:absolute; left:8px; bottom:4px; font-family:var(--mono); font-size:11px; font-weight:600; background:rgba(255,255,255,.75); border-radius:4px; padding:0 5px; color:#1b1b1b}
.wb-key.ok{background:#2E7D5B; color:#fff}
.wb-resize{position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.25) 50%); border-bottom-right-radius:6px}
.sw-yellow{background:#FFE58A!important} .sw-pink{background:#FFC2D1!important} .sw-blue{background:#BFE0FF!important} .sw-green{background:#C6EFC9!important} .sw-purple{background:#DCCBFF!important} .sw-orange{background:#FFD1A6!important}
.wb-auto .wb-actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.wbtpl{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media (max-width:600px){
  .md-list li{flex-wrap:wrap}
  .md-list li > div{flex-basis:100%; order:2}
  .md-list li .chip{order:1}
  .md-list li .btn,.md-list li form{order:3}
  .md-head .md-quick{width:100%}
}

/* ---------- board switcher and stage and gate boards ---------- */
.boardswitch{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px}
.boardswitch a{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-size:13px; font-weight:600}
.boardswitch a.rolled{font-weight:500; border-style:dashed; color:var(--muted)}
.boardswitch a[aria-current]{background:var(--ink); color:var(--surface); border-color:var(--ink); border-style:solid}
.boardswitch .n{font-size:11px; background:color-mix(in srgb,var(--ink) 10%,transparent); border-radius:999px; padding:0 6px}
.boardswitch a[aria-current] .n{background:color-mix(in srgb,var(--surface) 25%,transparent)}
.boardswitch .bsep{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 4px 0 10px}
.sgboard{display:grid; grid-template-columns:repeat(var(--cols),minmax(180px,1fr)); gap:8px; overflow-x:auto; padding-bottom:6px}
.sgh{display:flex; flex-direction:column; gap:3px; padding:10px 10px 12px; border-radius:10px 10px 0 0; background:color-mix(in srgb,var(--ink) 5%,var(--surface)); position:relative}
.sgh b{font-family:var(--display); font-size:15px}
.sgh small{font-size:11.5px; color:var(--muted); line-height:1.35}
.sgh.now{background:color-mix(in srgb,var(--pj) 14%,var(--surface)); box-shadow:inset 0 3px 0 var(--pj)}
.sgh.past{opacity:.75}
.sggate{display:flex; gap:6px; align-items:center; font-size:12px; font-weight:600; margin-top:4px; padding-top:6px; border-top:1px dashed var(--line)}
.sggate i{font-style:normal; color:var(--pj)}
.sgh .nsbar.mini{width:100%}
.sgcol{min-height:140px; border-radius:0 0 10px 10px; padding:8px; background:color-mix(in srgb,var(--ink) 3%,var(--surface)); display:flex; flex-direction:column; gap:8px}
.sgcol.now{background:color-mix(in srgb,var(--pj) 6%,var(--surface))}
.sgcol.target{outline:2px dashed var(--pj)}
.sgcard.done{opacity:.7}
.sgcard .late{color:#C0392B; font-weight:600}
.pjcard{display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none}
.pjcard:hover{border-color:var(--ink)}
.pjcard small{font-size:12px; color:var(--muted)}
.pjcard .why1{color:var(--ink)}
.pjcard .nsbar{width:100%; height:6px}
.bcard.pj{border-style:solid; border-color:color-mix(in srgb,var(--pj) 45%,var(--line))}
.boardswitch a[aria-current]{color:var(--surface)!important}
.sgboard{grid-template-columns:repeat(var(--cols),minmax(170px,1fr))}
.tbl a.btn{color:var(--surface); text-decoration:none}
.tbl a.btn.ghost{color:var(--ink)}

.sgboard{grid-template-columns:repeat(var(--cols),minmax(150px,1fr))}
.sgband{padding:6px 10px; border-radius:8px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; background:color-mix(in srgb,var(--pj) 12%,var(--surface)); color:var(--ink); text-align:center}
.sgband.b-product{background:color-mix(in srgb,var(--pr) 14%,var(--surface))}
.sggate em{display:block; font-style:normal; font-weight:500; font-size:11px; color:var(--muted)}
.sggate{align-items:flex-start}
.sggate.soft{font-weight:500; color:var(--muted)}
.sggate.prod i{color:var(--pr)}
.sgh.closedcol, .sgcol.closedcol{background:color-mix(in srgb,var(--pr) 7%,var(--surface))}
.pjcard.done{opacity:.8; border-style:dashed}

.lcfull{display:grid; grid-template-columns:repeat(var(--cols),minmax(92px,1fr)); gap:6px; margin:4px 0 6px; overflow-x:auto; padding-bottom:4px}
.lcfull .sgband.now{box-shadow:inset 0 -3px 0 var(--pj)}
.lcph{border:1px solid var(--line); border-radius:10px; padding:10px 9px; background:var(--surface); display:flex; flex-direction:column; gap:3px; min-width:0}
.lcph .n{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:color-mix(in srgb,var(--ink) 8%,var(--surface)); color:var(--muted); margin-bottom:4px}
.lcph b{font-family:var(--display); font-size:13.5px; line-height:1.25}
.lcph small{font-size:11px; color:var(--muted); line-height:1.3}
.lcph small.cp{color:var(--ink); font-weight:600}
.lcph.past .n{background:var(--pj); color:#fff}
.lcph.now{border-color:var(--pj); box-shadow:0 0 0 2px color-mix(in srgb,var(--pj) 35%,transparent); background:color-mix(in srgb,var(--pj) 6%,var(--surface))}
.lcph.now .n{background:var(--ink); color:var(--surface)}
.lcph.closedcol{border-style:dashed; background:color-mix(in srgb,var(--pr) 6%,var(--surface))}
.pmo-stages{grid-template-columns:repeat(7,minmax(110px,1fr)); overflow-x:auto}
@media (max-width:900px){ .pmo-stages{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sgboard{grid-template-columns:repeat(var(--cols),minmax(116px,1fr)); gap:6px}
.sgh{padding:8px 8px 10px} .sgh b{font-size:14px} .sgcol{padding:6px}
.sgboard .wcard{padding:8px} .sgboard .wcard .wtitle{font-size:13px}
.sgcard header{display:flex; flex-wrap:wrap; gap:4px; align-items:center}

/* Jira: two ways to track work */
.jirabar{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; margin:10px 0 14px; border:1px solid color-mix(in srgb,#2684ff 40%,var(--line)); border-radius:12px; background:color-mix(in srgb,#2684ff 7%,var(--surface))}
.jirabar > div{flex:1; display:flex; flex-direction:column; gap:3px}
.jirabar small{color:var(--muted); font-size:12.5px; line-height:1.4}
.jlogo{flex:none; width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:#2684ff; color:#fff; font-weight:800; font-family:var(--display)}
.jmini{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:4px; background:#2684ff; color:#fff; font-size:10px; font-weight:800; margin-left:4px; vertical-align:middle}
.jconn{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:12px; margin-top:12px}
.jconn > div{flex:1; min-width:220px; display:flex; flex-direction:column}
.jconn small{color:var(--muted)}
.twoways{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0}
.twoways .way{border:1px solid var(--line); border-radius:12px; padding:12px}
.twoways .way.on{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.twoways .way p{margin:.3em 0 0}
.jboard{display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:10px; overflow-x:auto}
.jboard section{background:#f4f5f7; border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:8px; min-height:200px}
.jboard h2{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#5e6c84; margin:4px 4px 2px}
.jcard{background:#fff; color:#172b4d; border-radius:6px; padding:10px; box-shadow:0 1px 1px rgba(9,30,66,.25); display:flex; flex-direction:column; gap:6px}
.jcard.focus{outline:2px solid #2684ff}
.jcard p{margin:0; font-size:14px}
.jcard small{color:#5e6c84}
.jcard header{font-size:12px; display:flex; gap:6px; align-items:center}
.jtype{font-size:11px; padding:1px 6px; border-radius:3px; background:#dfe1e6}
.jtype.t-bug{background:#ffebe6; color:#bf2600} .jtype.t-epic{background:#eae6ff; color:#403294} .jtype.t-story{background:#e3fcef; color:#006644}
@media (max-width:760px){ .twoways{grid-template-columns:1fr} }

/* Plan and control */
.ctlnav{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 12px}
.ctlnav a{padding:5px 10px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); font-size:13px; background:var(--surface)}
.ctlnav a:hover{border-color:var(--ink)}
.ctlnav span{margin-left:auto}
.ctl .tbl td.num, .ctl .tbl th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ctl .tbl tr.now th, .ctl .tbl tr.now td{background:color-mix(in srgb,var(--pj) 7%,var(--surface))}
.ctl .late, .tbl .late{color:#b42318; font-weight:600}
.flash.warn{border-color:#f0b429; background:color-mix(in srgb,#f0b429 12%,var(--surface))}
.gantt{margin:8px 0 12px; overflow-x:auto}
.gantt svg{width:100%; min-width:520px; height:auto; font-family:var(--body, system-ui)}
.gantt .gl{font-size:11px; fill:var(--ink)} .gantt .gl.small{font-size:10px; fill:var(--muted)}
.gantt .gt{stroke:var(--muted); stroke-dasharray:3 3}
.gantt .gv{stroke:var(--muted); stroke-width:2} .gantt .gv.slip{stroke:#d92d20}
.gantt .gb{fill:var(--surface); stroke:var(--ink); stroke-width:1.5}
.gantt .gc{fill:var(--pj)} .gantt .gc.slip{fill:#d92d20} .gantt .gc.done{fill:var(--ink)}
.gantt figcaption .lg{display:inline-block; width:10px; height:10px; margin:0 3px 0 10px; vertical-align:middle}
.gb-l{border:1.5px solid var(--ink); transform:rotate(45deg); width:8px!important; height:8px!important} .gc-l{background:var(--pj); border-radius:50%} .slip-l{background:#d92d20; border-radius:50%}
.prodgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.prodgrid h3{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 6px}
.prodgrid .list li{display:flex; justify-content:space-between; gap:8px; align-items:center}
.scorecard{border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:6px 0 12px}
.scorecard legend{font-weight:700; padding:0 4px}
.tbl.score td, .tbl.score th{vertical-align:middle}
.scores{display:flex; gap:10px; flex-wrap:wrap}
.scores label{display:inline-flex; gap:3px; align-items:center; font-size:13px}
.c-blue{background:color-mix(in srgb,#2684ff 14%,var(--surface)); color:#0747a6}
@media (max-width:900px){ .prodgrid{grid-template-columns:1fr} .ctlnav span{margin-left:0; width:100%} }
.ctl .tbl tbody th, .tbl.score tbody th{text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; color:var(--ink)}
.ctl .tiles .tile b{font-size:clamp(17px,1.7vw,24px); white-space:nowrap}
.gantt svg{max-width:760px}
.panelbox .tbl tbody th[scope=row]{text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; color:var(--ink)}

/* Service transition */
.exitbox{border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.exitbox.now{border-color:var(--pj); box-shadow:0 0 0 1px var(--pj)}
.exitbox h3{font-size:15px; margin:2px 0 8px}
.exitbox details.inline{display:inline-block; margin-left:6px}
.jlogo.itsm{background:#62d84e; color:#0b3d02}
.pre{white-space:pre-wrap; margin:.2em 0 .8em}
.incbars{width:100%; max-width:720px; height:auto} .incbars rect{fill:var(--pj)}
.exitstack{display:flex; flex-direction:column; gap:12px}

/* Resources */
.capgrid td.cap{text-align:center; font-size:12px; font-variant-numeric:tabular-nums; min-width:44px}
.capgrid td.some{background:color-mix(in srgb,var(--pr) 12%,var(--surface))}
.capgrid td.full{background:color-mix(in srgb,var(--pr) 28%,var(--surface))}
.capgrid td.over{background:color-mix(in srgb,#d92d20 22%,var(--surface)); color:#7a1a12; font-weight:700}
.gatebox summary{cursor:pointer; list-style:none} .gatebox summary::-webkit-details-marker{display:none}
.gatebox[open] summary{margin-bottom:10px}
h2.sect{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 8px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.pickbox{border:1px solid var(--line); border-radius:12px; padding:10px}
.pickbox h3{font-size:14px; margin:0 0 6px}
.picks{display:flex; flex-direction:column; gap:3px; max-height:320px; overflow:auto}
@media (max-width:900px){ .grid3{grid-template-columns:1fr} }
/* Network roadmap and solutions */
h3.hz{font-family:var(--display); font-size:15px; margin:14px 0 6px}
.tbl.roadmap td{vertical-align:top}
.tbl.roadmap details.inline{display:block; margin-top:4px}
.sols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.sol{border:1px solid var(--line); border-radius:12px; padding:12px}
.sol h3{margin:0 0 4px; font-size:15px}
@media (max-width:900px){ .sols{grid-template-columns:1fr} }

/* Training page */
.tvids{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.tvid video{width:100%;aspect-ratio:16/9;border-radius:10px;background:#0B1220;display:block}
.tvid h3{margin:10px 0 2px;font-size:17px}
.troles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.trole{border-left:4px solid var(--c);padding:4px 0 4px 14px}
.trole h3{font-size:15px;margin:0 0 6px}.trole ul{margin:0;padding-left:18px}

.tcrumb{font-size:13px;margin:4px 0 10px;color:var(--muted)}.tcrumb a{color:inherit}
.tsteps{padding-left:22px}.tsteps li{margin:0 0 10px;line-height:1.5}
.twhere{display:inline-block;font-size:12px;font-family:var(--mono);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent);border-radius:6px;padding:1px 8px;margin-left:4px}
.tpaths{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.tpath{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none}
.tpath:hover,.tmod:hover{border-color:var(--accent)}
.tmeta{font-size:12px;color:var(--muted);font-family:var(--mono)}
.ttrack{border-left:4px solid var(--c);padding-left:16px;margin:22px 0}.ttrack h3{margin:0 0 2px}
.tmods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:10px}
.tmods.list{grid-template-columns:1fr}
.tmod{position:relative;display:flex;flex-direction:column;gap:5px;padding:14px 14px 14px 16px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none}
.tmods.list .tmod{padding-left:58px}
.tnum{position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.tstat{align-self:flex-start;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px}
.tsoon{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.tvid.big video{max-width:820px}
.ttry{padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--pj) 10%,var(--surface))}
.tfind select{margin-left:6px;min-width:260px}

.est.none{color:var(--accent);font-weight:700}
/* Emergencies: sprint work is paused */
.emerg{border:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); border-radius:var(--radius); padding:10px 14px; margin:10px 0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.emerg > b{color:color-mix(in srgb,var(--accent) 80%,var(--ink))} .emerg .small{flex-basis:100%}
.declare{margin:6px 0 10px} .declare > summary{cursor:pointer; font-weight:600; font-size:13px; color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.declare form{border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-top:6px; background:var(--surface); max-width:640px}
.btn.danger{background:var(--accent); border-color:var(--accent); color:#fff}
.wclass.k-bau{color:var(--fd)} .wclass.k-emergency{color:var(--accent)}
.t-service{color:var(--fd)} .t-smallchange{color:var(--pj)} .t-emergency{color:var(--accent); font-weight:700}
/* Dependencies */
.depchip{font-size:11px; font-weight:700; border-radius:4px; padding:0 6px; border:1px solid currentColor; white-space:nowrap}
.depchip.d-ok{color:var(--pr)} .depchip.d-amber{color:color-mix(in srgb,#b7791f 85%,var(--ink))} .depchip.d-red{color:var(--accent)}
.depmap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:6px}
.depmap svg{display:block; max-width:none}
.depmap .dm-n{fill:var(--surface); stroke:var(--line); stroke-width:1.5} .depmap .dm-n.done{fill:color-mix(in srgb,var(--ink) 5%,var(--surface))}
.depmap a:hover .dm-n{stroke:var(--ink)}
.depmap .dm-k{font:700 11px var(--mono); fill:var(--muted)} .depmap .dm-t{font:13px var(--body); fill:var(--ink)} .depmap .dm-h{font:700 12px var(--body); fill:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.depmap .dm-e{fill:none; stroke-width:2}
.e-ok{stroke:var(--pr); fill:var(--pr)} .e-amber{stroke:#c98a1b; fill:#c98a1b} .e-red{stroke:var(--accent); fill:var(--accent)} .e-met{stroke:var(--muted); fill:var(--muted)}
.depmap path.dm-e{fill:none} .depmap path.dm-e.e-amber{stroke-dasharray:6 4}
.depkey .k{display:inline-block; width:18px; height:3px; margin:0 4px 3px 10px; vertical-align:middle} .depkey .k:first-child{margin-left:0}
.k-ok{background:var(--pr)} .k-amber{background:#c98a1b} .k-red{background:var(--accent)} .k-met{background:var(--muted)}
.deptable tr.dr-red td:first-child{box-shadow:inset 3px 0 var(--accent)} .deptable tr.dr-amber td:first-child{box-shadow:inset 3px 0 #c98a1b}
.depform input[type=date]{width:auto}
.closereq{border-top:1px solid var(--line); margin-top:8px; padding-top:8px}
/* Acceptance criteria (BDD), tests (TDD), checklist */
.crit h2 .small{font-weight:500; letter-spacing:0; text-transform:none; margin-left:6px}
.gwt{margin:0 0 8px 1.2em; padding:0} .gwt li{margin:0 0 10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--ink) 2%,var(--surface))}
.gwt p{margin:2px 0} .gwt b{display:inline-block; min-width:52px; color:var(--pr)}
.crow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px}
.cmark{display:inline-flex; gap:8px}
.gwtform{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:8px; align-items:end}
.gherkin{font:12.5px/1.5 var(--mono); background:color-mix(in srgb,var(--ink) 5%,var(--surface)); padding:10px; border-radius:8px; overflow-x:auto; white-space:pre}
.tests li{display:flex; flex-wrap:wrap; gap:6px; align-items:center} .tlevel{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 5px}
.checklist{list-style:none; margin:0 0 8px; padding:0} .checklist li{display:flex; gap:8px; align-items:center; padding:4px 0; border-bottom:1px solid var(--line)}
.checklist li.done > span{text-decoration:line-through; color:var(--muted)} .checklist li form:last-child{margin-left:auto}
.cbox{width:22px; height:22px; min-width:22px; border:1.5px solid var(--muted); border-radius:5px; background:var(--surface); color:var(--pr); font-weight:700; line-height:18px; text-align:center; cursor:pointer; padding:0}
.checklist li.done .cbox{border-color:var(--pr)}
.jlogo.ado{background:#0078d4} .jmini.ado{background:#0078d4}
.teamext .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:10px 0}
.teamext .kpi{border:1px solid var(--line); border-radius:8px; padding:8px 10px} .teamext .kpi span{display:block; font-size:12px; color:var(--muted)} .teamext .kpi b{font-size:20px}
.twoways.threeways{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
/* Pulse Cycle planning */
.cstep{grid-template-columns:repeat(5,minmax(0,1fr)); margin:6px 0 14px}
.cyclegrid th,.cyclegrid td{vertical-align:top; min-width:150px}
.cyclegrid td.over{background:color-mix(in srgb,var(--red,#c0392b) 9%,var(--surface))}
.cyclegrid td.ip{background:color-mix(in srgb,var(--ink) 4%,var(--surface))}
.pcard{border:1px solid var(--line); border-radius:7px; padding:4px 6px; margin:0 0 4px; background:var(--surface); display:flex; flex-wrap:wrap; gap:4px; align-items:baseline}
.pcard.feat{border-left:3px solid var(--accent)}
.cbar{height:8px; border-radius:999px; background:color-mix(in srgb,var(--ink) 8%,var(--surface)); overflow:hidden; margin:2px 0 4px}
.cbar span{display:block; height:100%; border-radius:999px; background:var(--accent)}
.cbar .b-green{background:#2e8b57} .cbar .b-amber{background:#c98a0b} .cbar .b-red{background:#c0392b}
.small.red,.checks .amber{color:#b03a2e} .checks .green{color:#2e8b57}
.bigstat{font-size:34px; font-weight:700; margin:4px 0}
.fist{border:0; padding:0; margin:0; display:flex; gap:10px; align-items:center}
.fist legend{float:left; margin-right:8px; font-size:13px}
.warnbox{border-color:#c98a0b}
.planrow{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 2px}
.planrow select{width:auto; padding:4px 8px; font-size:13px; min-height:0}
.cyclegrid th,.cyclegrid td{min-width:118px}
.planrow label{display:inline-flex; align-items:center; gap:6px; margin:0}
.planrow input.num{width:4.2em; padding:4px 6px; min-height:0}
.wb-sticky.c-white{border:1.5px dashed #8a8a8a}
.pcard.predicted{border-style:dashed}
.chip.pred{background:transparent; border:1px dashed currentColor; font-size:11px}
.list.forecast li small{display:block}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
/* Pulse Cycle planning deck */
.dk-tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 16px}
.dk-deck{display:grid; gap:22px; max-width:1040px}
.dk-item{display:grid; gap:6px}
.dk-slide{container-type:inline-size; aspect-ratio:16/9; background:#fff; color:#15202B; border:1px solid var(--line); border-radius:10px; padding:4.5cqw 5cqw 6.5cqw; position:relative; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06)}
.dk-slide h2{font:700 3.5cqw/1.15 Sora,system-ui,sans-serif; margin:0 0 2.2cqw; letter-spacing:-.01em}
.dk-slide h3{font:600 1.9cqw/1.25 Sora,system-ui,sans-serif; margin:1.2cqw 0 .8cqw}
.dk-slide p,.dk-slide li{font-size:2cqw; line-height:1.4; margin:0 0 .8cqw}
.dk-slide ul,.dk-slide ol{margin:0 0 1cqw; padding-left:2.6cqw}
.dk-slide footer{position:absolute; left:5cqw; right:5cqw; bottom:2.2cqw; display:flex; justify-content:space-between; font-size:1.2cqw; color:#6b7785}
.dk-body p:first-child:has(+ ul){font-weight:600}
.dk-lead{color:#4a5866}
.dk-small,.dk-slide .dk-small{font-size:1.4cqw; color:#5b6875}
.dk-none{font-size:1.8cqw; color:#6b7785; font-style:italic}
.dk-prompt{background:#FFF1BF; border-radius:4px; padding:0 .4em; font-style:italic}
.dk-tbl{width:100%; border-collapse:collapse; font-size:1.45cqw; margin:.6cqw 0}
.dk-tbl th{text-align:left; font-weight:600; color:#4a5866; border-bottom:2px solid #d5dbe1; padding:.5cqw .8cqw}
.dk-tbl td{border-bottom:1px solid #e6eaee; padding:.55cqw .8cqw; vertical-align:top}
.dk-agenda td:nth-child(1){white-space:nowrap}
.dk-cols{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3cqw}
.dk-quad{display:grid; grid-template-columns:1fr 1fr; gap:1.5cqw 4cqw}
.dk-quad section{border-top:.35cqw solid var(--accent); padding-top:.6cqw}
.dk-timeline{display:flex; gap:1cqw; list-style:none; padding:0!important; margin:0 0 2cqw!important}
.dk-timeline li{flex:1; border-top:.6cqw solid var(--accent); padding-top:.6cqw; font-size:1.4cqw; display:flex; flex-direction:column; margin:0}
.dk-timeline li.ip{border-top-color:#8a96a3}
.dk-timeline small{font-size:1.15cqw; color:#5b6875}
.dk-big{font:700 5cqw/1.1 Sora,system-ui,sans-serif!important; margin:0 0 1.5cqw!important}
.dk-big span{font:400 1.8cqw/1.3 system-ui,sans-serif; color:#4a5866}
.dk-red{color:#b03a2e; font-weight:600} .dk-amber{color:#9a6400; font-weight:600}
.dk-chips{display:flex; gap:1cqw; list-style:none; padding:0!important; flex-wrap:wrap}
.dk-chips li{border:1px solid #d5dbe1; border-radius:99px; padding:.3cqw 1.2cqw; font-size:1.5cqw; margin:0}
.dk-fist{list-style:none; padding:0!important} .dk-fist li{font-size:2.3cqw} .dk-fist b{display:inline-block; width:3.4cqw; height:3.4cqw; line-height:3.4cqw; text-align:center; border-radius:50%; background:#15202B; color:#fff; margin-right:1cqw}
.dk-slide.dk-divider,.dk-slide.dk-title{background:linear-gradient(135deg,#15202B 0%,#24384d 100%); color:#fff; border-color:#15202B}
.dk-divider,.dk-titleslide{display:flex; flex-direction:column; justify-content:center; height:100%}
.dk-divider h1,.dk-titleslide h1{font:700 5.6cqw/1.08 Sora,system-ui,sans-serif; margin:0 0 1.6cqw; letter-spacing:-.015em}
.dk-eyebrow{font:600 1.5cqw/1 "IBM Plex Mono",monospace!important; text-transform:uppercase; letter-spacing:.12em; color:#ff8fab!important}
.dk-sub{font-size:2.4cqw!important; color:#dfe6ec}
.dk-divider .dk-small,.dk-titleslide .dk-small,.dk-divider li,.dk-divider p{color:#c9d3dc}
.dk-brand{font:700 2.4cqw/1 Sora,system-ui,sans-serif!important; margin-bottom:5cqw!important} .dk-brand span{color:#ff5c85}
.dk-divider footer,.dk-title footer{color:#9fb0bf}
.dk-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.dk-notesline{font-size:13px; color:var(--muted); margin:0}
.dk-edit{border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--surface)}
.dk-edit textarea{width:100%; min-height:110px; font-family:inherit}
.dk-hiddenslide .dk-slide{opacity:.45}
.dk-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
#dk-notes{position:fixed; left:0; right:0; bottom:0; z-index:1002; background:rgba(21,32,43,.94); color:#fff; padding:14px 22px; font-size:16px; max-height:30vh; overflow:auto; white-space:pre-wrap}
#dk-controls{position:fixed; right:14px; top:14px; z-index:1003; display:flex; gap:6px}
#dk-controls button{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:6px 10px; font-size:14px; cursor:pointer}
body.dk-presenting{overflow:hidden}
body.dk-presenting::before{content:''; position:fixed; inset:0; background:#000; z-index:999}
body.dk-presenting .dk-slide{display:none}
body.dk-presenting .dk-slide.current{display:block; position:fixed; z-index:1000; top:50%; left:50%; transform:translate(-50%,-50%); width:min(100vw,177.78vh); border-radius:0; margin:0; box-shadow:none; cursor:pointer}
@media print { @page{size:landscape; margin:8mm} body *{visibility:hidden} .dk-deck,.dk-deck .dk-slide,.dk-deck .dk-slide *{visibility:visible} .dk-deck{position:absolute; left:0; top:0; width:100%; max-width:none; display:block} .dk-edit,.dk-meta,.dk-notesline{display:none!important} .dk-slide{break-after:page; box-shadow:none; border:none; margin:0 0 4mm; -webkit-print-color-adjust:exact; print-color-adjust:exact} }
.dk-slide footer{margin:0; padding:0; border:0; background:none; max-width:none; width:auto; display:flex}
/* Training video: next module on the video, up-next card, sound prompt */
.tvid.big[data-tv]{position:relative; max-width:820px}
.tv-next{position:absolute; top:12px; right:12px; z-index:2; background:rgba(11,18,32,.78); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; text-decoration:none; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85; transition:opacity .15s}
.tv-next small{font-weight:400; opacity:.75; margin-right:4px}
.tv-next:hover,.tv-next:focus-visible{opacity:1; color:#fff; background:rgba(11,18,32,.92)}
.tv-upnext{position:absolute; inset:0; aspect-ratio:16/9; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:6px; background:rgba(11,18,32,.86); color:#fff; border-radius:10px; padding:20px}
.tv-upnext[hidden]{display:none}
.tv-upnext b{font-size:22px; line-height:1.25; max-width:560px}
.tv-upnext .small{color:#cfd8e3; margin:0}
.tv-upnext .row{display:flex; gap:8px; margin-top:10px}
.tv-upnext .btn.ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.tvid.tv-ended .tv-next{display:none}
.tv-sound{position:absolute; left:12px; top:12px; z-index:2; background:#fff; color:#0B1220; border:0; border-radius:999px; padding:6px 14px; font-weight:600; font-size:13px; cursor:pointer}
.tv-sound[hidden]{display:none}
.tv-auto{display:inline-flex; gap:6px; align-items:center; margin-top:8px}
@media (max-width:520px){ .tv-next{top:8px; right:8px; font-size:12px; padding:5px 10px} .tv-upnext b{font-size:17px} }
.tv-upnext .btn:not(.ghost){background:#fff; color:#0B1220; border-color:#fff}
/* Resource library */
.lib-filter{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0 10px}
.lib-filter input[type=search]{flex:1; min-width:200px}
.lib-chips{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px}
.lib-chips a{border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:13px; text-decoration:none; color:var(--ink); background:var(--surface)}
.lib-chips a[aria-current]{background:var(--ink); border-color:var(--ink)}
.lib-chips a[aria-current],.lib-chips a[aria-current]:visited,.lib-chips a[aria-current]:hover{color:var(--surface)!important}
.lib-sec{margin:0 0 22px} .lib-sec h2{margin-bottom:2px}
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:10px}
.lib-card{display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-radius:var(--radius,10px); background:var(--surface); text-decoration:none; color:var(--ink)}
.lib-card:hover{border-color:var(--accent)}
.lib-card b{font-size:15px; line-height:1.3}
.lib-cat{align-self:flex-start; font:600 11px/1 "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; padding:4px 7px; border-radius:5px; background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--ink)}
.lib-doc{max-width:900px}
.lib-doc header .lede{font-size:17px}
.lib-meta{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:12px 0; font-size:14px}
.lib-meta dt{color:var(--muted); font-weight:600}
.lib-meta dd{margin:0; display:flex; gap:6px; flex-wrap:wrap}
.lib-toc{border-left:3px solid var(--accent); padding:4px 0 4px 14px; margin:14px 0 20px; font-size:14px}
.lib-toc ol{margin:6px 0 0; padding-left:18px; columns:2; column-gap:28px}
.lib-section{margin:0 0 22px; scroll-margin-top:80px}
.lib-section h2{font-size:20px; margin:0 0 8px}
.lib-tbl{width:100%; border-collapse:collapse; font-size:14px; margin:8px 0}
.lib-tbl th{text-align:left; border-bottom:2px solid var(--line); padding:6px 8px; font-weight:600}
.lib-tbl td{border-bottom:1px solid var(--line); padding:6px 8px; vertical-align:top}
.lib-tbl td p{margin:0 0 4px} .lib-tbl td ul{margin:0; padding-left:18px}
.lib-assess .c{text-align:center; width:44px}
.lib-check{list-style:none; padding:0} .lib-check li{padding:4px 0}
.lib-score{color:var(--muted); font-weight:600}
.lib-result{border-color:var(--accent); margin-top:8px}
.lib-big{font:700 30px/1.1 Sora,system-ui,sans-serif; margin:4px 0 8px} .lib-big span{font:400 14px system-ui,sans-serif; color:var(--muted)}
.lib-bar{display:inline-block; width:140px; height:8px; border-radius:99px; background:color-mix(in srgb,var(--ink) 8%,var(--surface)); overflow:hidden; vertical-align:middle}
.lib-bar i{display:block; height:100%; background:var(--accent)}
@media (max-width:640px){ .lib-toc ol{columns:1} .lib-meta{grid-template-columns:1fr} }
@media print { .lib-actions,.lib-filter,.lib-chips{display:none} .lib-result{position:static} }
/* Portfolio funding and value */
.fbar{display:inline-block; width:90px; height:8px; border-radius:4px; background:var(--line); vertical-align:middle; overflow:hidden}
.fbar i{display:block; height:100%; border-radius:4px; background:var(--pr)}
.fbar.warn i{background:var(--tm)}
.fbar.over i{background:var(--accent)}
.fbar.ben i{background:var(--pj)}
.fundrow > div{width:100%}
.fundform,.valform{border-top:1px dashed var(--line); padding-top:10px}
.fundform .row2,.valform .row2{display:flex; gap:8px; flex-wrap:wrap; grid-column:1 / -1}
/* Integrations add-on: pricing and account */
.addon h3{margin:0 0 6px}
.addonbox{border:1px solid var(--line, #dfe3ea);border-radius:12px;padding:12px 16px;margin:14px 0}
.addonbox h3{margin:0 0 4px;font-size:1rem}

/* ---------- phone layout: menu toggles and narrow-screen fit ---------- */
.navtog,.wstog{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.navbtn,.wsbtn{display:none; align-items:center; gap:8px; cursor:pointer; font-weight:600; font-size:14px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); user-select:none}
.navbtn span,.wsbtn span{position:relative; width:16px; height:2px; background:currentColor; border-radius:2px}
.navbtn span::before,.navbtn span::after,.wsbtn span::before,.wsbtn span::after{content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor; border-radius:2px}
.navbtn span::before,.wsbtn span::before{top:-5px} .navbtn span::after,.wsbtn span::after{top:5px}
.navtog:focus-visible + .navbtn,.wstog:focus-visible + .wsbtn{outline:2px solid var(--accent); outline-offset:2px}
.navtog:checked + .navbtn,.wstog:checked + .wsbtn{background:color-mix(in srgb,var(--ink) 7%,var(--surface))}
.dbless{display:none}
@media (max-width:760px){
  .sitebar-in{padding:8px 16px; gap:8px}
  .navbtn{display:inline-flex; margin-left:auto}
  .navright{display:none}
  /* the main places stay in view on a phone as a row you can swipe; Menu opens the full list and your account */
  .sitebar-in{flex-wrap:wrap}
  .mainnav{display:flex; order:5; flex-wrap:nowrap; width:100%; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 24px 4px 0; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .navtog:checked ~ .mainnav{-webkit-mask-image:none; mask-image:none; padding-right:0}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav .navlink{flex:none; white-space:nowrap; font-size:14px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
  .mainnav .navlink.on{background:var(--ink); color:var(--surface); border-color:var(--ink)}
  .navtog:checked ~ .mainnav{order:0}
  .navtog:checked ~ .mainnav .navlink{border:0; border-radius:8px; background:none; font-size:15px}
  .navtog:checked ~ .mainnav .navlink.on{background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink)}
  .navtog:checked ~ .mainnav{display:flex; flex-direction:column; width:100%; gap:2px; padding-top:4px; border-top:1px solid var(--line)}
  .navtog:checked ~ .mainnav .navlink{padding:9px 6px}
  .navtog:checked ~ .navright{display:flex; width:100%; margin-left:0; justify-content:space-between; padding:6px 0 4px; border-top:1px solid var(--line)}
  .demo-banner{font-size:12px; padding:4px 12px}
  .dbmore{display:none} .dbless{display:inline}
  .page-title{font-size:clamp(22px,6.4vw,30px); overflow-wrap:anywhere}
  .tabs{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin}
  .tabs a{white-space:nowrap}
  img,svg,video{max-width:100%}
}
@media (max-width:900px){
  .wsbtn{display:flex; width:100%; justify-content:flex-start; margin-top:10px}
  .wside .gnav,.wside .wlabel,.wside .tree{display:none}
  .wstog:checked ~ .gnav{display:flex; flex-direction:column; margin:10px 0 4px}
  .wstog:checked ~ .wlabel{display:block}
  .wstog:checked ~ .tree{display:block}
  .wstog:checked ~ .gnav .nhead,.wstog:checked ~ .gnav .nsub a{padding-top:9px; padding-bottom:9px}
}
/* Scroll boxes contain their screen-reader-only labels, so those cannot widen the page on a phone. */
.wboard,.tblwrap,.tabs{position:relative}
@media (max-width:760px){ .tblwrap > .tbl{min-width:0} main table.tbl:not(.tblwrap table){display:block; overflow-x:auto; max-width:100%} }
fieldset{min-width:0}

/* ---------- diagrams ---------- */
.dgtpl{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dgtext textarea{width:100%; font-size:13px}
.dgcards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.dgcards a{display:flex; flex-direction:column; gap:4px; text-decoration:none!important; color:var(--ink)!important; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--surface)}
.dgcards a:hover{border-color:var(--ink)}
.dgcards small{color:var(--muted); font-size:12px}
.dgthumb{display:block; height:150px; border-radius:8px; background:#fff; border:1px solid var(--line); overflow:hidden}
.dgthumb svg{width:100%; height:100%}
.dgstatic{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:auto}
.dgstatic svg{max-width:100%; height:auto}
.dg{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; height:min(82vh,860px); min-height:480px; position:relative}
.dg-top{display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--line); background:var(--surface)}
.dg-top button,.dg-top a{font:inherit; font-size:13px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:5px 9px; cursor:pointer; min-height:32px; text-decoration:none}
.dg-top button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.dg-top .dg-zoom{min-width:58px}
.dg-sep{width:1px; height:22px; background:var(--line); margin:0 2px}
.dg-status{margin-left:auto; font-size:12px; color:var(--muted)}
.dg-ccount{font-weight:700; color:#B45309}
.dg-menu{position:relative}
.dg-pop{position:absolute; top:100%; left:0; z-index:20; margin-top:4px; display:flex; flex-direction:column; gap:2px; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.14)}
.dg-pop[hidden]{display:none}
.dg-pop button,.dg-pop a{border:0!important; text-align:left; width:100%}
.dg-pop button:hover,.dg-pop a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dg-body{flex:1; display:grid; grid-template-columns:230px minmax(0,1fr) 270px; min-height:0}
.dg.ro .dg-body{grid-template-columns:minmax(0,1fr) 270px}
.dg-lib{border-right:1px solid var(--line); overflow:auto; padding:8px; background:var(--surface)}
.dg-find{width:100%; margin-bottom:6px}
.dg-cat{border-bottom:1px solid var(--line); padding:4px 0}
.dg-cat[hidden]{display:none}
.dg-cat summary{cursor:pointer; font-weight:600; font-size:13px; padding:4px 2px}
.dg-shapes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px 0}
.dg-sh{display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid transparent; background:transparent; border-radius:8px; padding:4px 2px; cursor:grab; font:inherit; font-size:10.5px; color:var(--ink); line-height:1.15; text-align:center}
.dg-sh[hidden]{display:none}
.dg-sh:hover,.dg-sh:focus-visible{border-color:var(--line); background:color-mix(in srgb,var(--ink) 5%,transparent)}
.dg-sh svg{width:42px; height:42px}
.dg-sh span{max-width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.dg-canvas{position:relative; overflow:hidden; background:#fff; outline:none; touch-action:none}
.dg-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.dg-svg{position:absolute; inset:0; width:100%; height:100%; display:block; color:#1F2A37; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; user-select:none}
.dg-canvas[data-tool="hand"] .dg-svg{cursor:grab}
.dg-canvas[data-tool="line"] .dg-svg,.dg-canvas[data-tool="text"] .dg-svg{cursor:crosshair}
.dg-shape{cursor:move}
.dg.ro .dg-shape{cursor:pointer}
.dg-line{cursor:pointer}
.dg-line.sel path:not(.dg-hit){stroke:#2563EB!important}
.dg-h{cursor:nwse-resize}
.dg-h[data-h="n"],.dg-h[data-h="s"]{cursor:ns-resize} .dg-h[data-h="e"],.dg-h[data-h="w"]{cursor:ew-resize} .dg-h[data-h="ne"],.dg-h[data-h="sw"]{cursor:nesw-resize}
.dg-port{cursor:crosshair}
.dg-end{cursor:move}
.dg-pin{cursor:pointer}
.dg-hint{position:absolute; left:50%; top:10px; transform:translateX(-50%); background:#1F2A37; color:#fff; font-size:12.5px; padding:5px 12px; border-radius:999px; pointer-events:none}
.dg-hint[hidden]{display:none}
.dg-edit{position:absolute; z-index:5; box-sizing:border-box; border:2px solid #2563EB; border-radius:6px; padding:4px 6px; background:#fff; color:#1F2A37; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; resize:none; line-height:1.25; text-align:center; min-width:100px}
.dg-props{border-left:1px solid var(--line); overflow:auto; padding:10px 12px; font-size:13px; background:var(--surface)}
.dg-props h3{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; font-family:var(--mono)}
.dg-props h3:first-child{margin-top:2px}
.dg-props label{display:block; margin:6px 0 2px; font-size:12px; color:var(--muted)}
.dg-props label.check{color:var(--ink); display:flex; gap:6px; align-items:flex-start}
.dg-props input:not([type=checkbox]):not([type=range]),.dg-props select,.dg-props textarea{width:100%; font:inherit; font-size:13px; color:var(--ink); margin-top:2px}
.dg-props input[type=range]{width:100%}
.dg-2{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.dg-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px}
.dg-row{display:flex; flex-wrap:wrap; gap:4px; margin:4px 0}
.dg-row button,.dg-layers button{font:inherit; font-size:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:6px; padding:4px 8px; cursor:pointer; min-height:28px}
.dg-row button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.dg-row select{width:auto!important}
.dg-align button{flex:1 1 30%}
.dg-sw{display:flex; flex-wrap:wrap; gap:4px; margin:2px 0 6px}
.dg-sw button{width:20px; height:20px; padding:0; border-radius:5px; border:1px solid rgba(0,0,0,.18); cursor:pointer}
.dg-sw button.none{background:linear-gradient(135deg,#fff 45%,#DC2626 45%,#DC2626 55%,#fff 55%)}
.dg-sw button[aria-pressed="true"]{outline:2px solid #2563EB; outline-offset:1px}
.dg-layers{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:4px}
.dg-layers li{display:flex; gap:4px; align-items:center}
.dg-layers input{flex:1; min-width:0}
.dg-link{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.dg-dot{display:inline-block; width:10px; height:10px; border-radius:50%}
.dg-comments{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:8px}
.dg-comments li{border:1px solid var(--line); border-radius:8px; padding:6px 8px}
.dg-comments li.res{opacity:.6}
.dg-comments p{margin:2px 0}
.dg-tips{padding-left:16px; margin:0}
.dg-ro-text{white-space:normal}
.dg-pages{display:flex; gap:2px; padding:4px 8px; border-top:1px solid var(--line); overflow-x:auto; background:var(--surface)}
.dg-pages button{font:inherit; font-size:12.5px; border:1px solid transparent; background:transparent; color:var(--ink); border-radius:6px; padding:4px 10px; cursor:pointer; white-space:nowrap}
.dg-pages button[aria-selected="true"]{background:color-mix(in srgb,var(--ink) 8%,transparent); border-color:var(--line); font-weight:600}
.dg-modal{position:absolute; inset:0; z-index:30; background:rgba(15,26,43,.35); display:flex; align-items:center; justify-content:center; padding:16px}
.dg-modal[hidden]{display:none}
.dg-mbox{background:var(--surface); border-radius:14px; padding:18px 20px; width:min(620px,100%); box-shadow:0 20px 60px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:8px}
.dg-mbox h2{margin:0; font-size:18px}
.dg-mbox textarea{width:100%; font-size:13px}
.dg-only-narrow{display:none}
@media (max-width:900px){
  .dg{height:78vh}
  .dg-body,.dg.ro .dg-body{grid-template-columns:minmax(0,1fr)}
  .dg-lib,.dg-props{position:absolute; top:46px; bottom:38px; z-index:15; width:min(300px,88%); box-shadow:0 10px 30px rgba(0,0,0,.2); display:none}
  .dg-lib{left:0} .dg-props{right:0}
  .dg.show-lib .dg-lib,.dg.show-props .dg-props{display:block}
  .dg-only-narrow{display:inline-block}
  .dg-top [data-act="fromtext"],.dg-top [data-act="layout"]{display:none}
}
.dg-print{display:none}
@media print{ body.dg-printing > *:not(.dg-print){display:none!important} body.dg-printing .dg-print{display:block!important} .dg-print svg{width:100%; height:auto} }
.dg.dg-full{position:fixed; inset:0; z-index:200; height:auto; border-radius:0; border:0}
body.dg-noscroll{overflow:hidden}

/* ---------- whiteboard: facilitation, shapes, pen, selection ---------- */
.wb{position:relative}
.wb-fac{display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--ink) 3%,var(--surface))}
.wb-fac button,.wb-selbar button,.wb-pop button{font:inherit; font-size:13px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:5px 9px; cursor:pointer; min-height:32px}
.wb-fac button[aria-pressed="true"]{background:#7C3AED; color:#fff; border-color:#7C3AED}
.wb-menu{position:relative; display:inline-flex}
.wb-pop{position:absolute; top:100%; left:0; z-index:30; margin-top:4px; display:flex; flex-direction:column; gap:2px; min-width:210px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.14)}
.wb-pop[hidden]{display:none}
.wb-pop button{border:0; text-align:left; display:flex; gap:8px; align-items:center}
.wb-pop button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.wb-pop svg{width:34px; height:22px}
.wb-clock{font-family:var(--mono); font-weight:700; font-size:15px; padding:0 6px}
.wb-clock.on{background:#1F2A37; color:#fff; border-radius:8px; padding:4px 10px}
.wb-clock.soon{background:#D97706}
.wb-clock.up{background:#DC2626; animation:wbpulse 1s infinite}
@keyframes wbpulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .wb-clock.up{animation:none} }
.wb-follow{display:inline-flex; gap:4px; align-items:center; margin-left:4px; color:var(--muted)}
.wb-here{display:flex; gap:3px; margin-left:auto}
.wb-av{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#7C3AED; color:#fff; font-size:11px; font-weight:700; border:2px solid var(--surface)}
.wb-banner{background:#F5F3FF; border-bottom:1px solid #DDD6FE; padding:6px 12px; font-size:13px}
.wb-banner p{margin:2px 0}
.wb-banner[hidden]{display:none}
.wb-selbar{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:12; display:flex; flex-wrap:wrap; gap:4px; align-items:center; max-width:calc(100% - 24px); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px 8px; box-shadow:0 8px 24px rgba(0,0,0,.14)}
.wb-selbar[hidden]{display:none}
.wb-selbar .wb-colors button{width:22px; height:22px; min-height:22px; padding:0; border-radius:50%}
.wb-selbar select{font:inherit; font-size:12.5px; min-height:32px}
.wb-tagin input{font:inherit; font-size:12.5px; min-height:30px; padding:3px 6px}
.wb-tagchip{background:#EDE9FE!important; border-color:#DDD6FE!important; font-size:12px!important}
.wb-inks{display:flex; gap:4px}
.wb-inks[hidden],.wb-colors[hidden]{display:none}
.wb-inks button{width:22px; height:22px; min-height:22px!important; padding:0!important; border-radius:50%!important}
.wb-inks button[aria-pressed="true"]{outline:2px solid var(--ink); outline-offset:2px}
.wb-stage[data-tool="pen"]{cursor:crosshair}
.wb-stage[data-tool="shape"]{cursor:crosshair}
.wb-hint{position:absolute; left:50%; top:12px; transform:translateX(-50%); background:#1F2A37; color:#fff; font-size:12.5px; padding:5px 12px; border-radius:999px; pointer-events:none; z-index:12}
.wb-hint[hidden]{display:none}
.wb-shape{z-index:2; display:flex; align-items:center; justify-content:center; text-align:center; font-size:14px; color:#1b1b1b; cursor:move}
.wb-shapesvg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.wb-shape .wb-text{position:relative; height:auto; max-height:100%; padding:8px 14px; display:block}
.wb-shape.sel{outline-offset:4px}
.wb-pen{fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:stroke; cursor:pointer}
.wb-pen.sel{filter:drop-shadow(0 0 3px #2563EB)}
.wb-marquee{fill:rgba(37,99,235,.08); stroke:#2563EB; stroke-width:1.5; stroke-dasharray:5 4}
.wb-tags{position:absolute; left:8px; right:8px; bottom:3px; display:flex; flex-wrap:wrap; gap:3px; pointer-events:none}
.wb-tags b{font-size:10.5px; font-weight:600; background:rgba(255,255,255,.7); border-radius:4px; padding:0 4px; color:#4C1D95}
.wb-sticky .wb-tags{bottom:20px}
.wb-votes{position:absolute; right:4px; top:-12px; display:flex; gap:2px; align-items:center}
.wb-dot{display:inline-block; width:14px; height:14px; border-radius:50%; background:#7C3AED; border:2px solid #fff; cursor:pointer}
.wb-vote{width:24px; height:24px; min-height:24px; border-radius:50%; border:2px solid #7C3AED; background:#fff; color:#7C3AED; font-weight:700; line-height:1; cursor:pointer; padding:0}
.wb-vcount{min-width:24px; height:24px; padding:0 6px; border-radius:12px; background:#7C3AED; color:#fff; font-size:13px; display:inline-flex; align-items:center; justify-content:center}
.wb-by{position:absolute; right:6px; bottom:4px; font-size:10.5px; color:rgba(0,0,0,.55)}
.wb-el.hid .wb-text{filter:blur(0); color:rgba(0,0,0,.4); font-style:italic}
.wb-el.hid{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}
.wb.wb-full{position:fixed; inset:0; z-index:200; background:var(--surface); display:flex; flex-direction:column; margin:0; height:100vh; max-height:none; border-radius:0}
.wb.wb-full .wb-stage{flex:1; height:auto}
.wb-todg{display:block; margin:10px 0}
@media (max-width:760px){ .wb-here{margin-left:0} .wb-follow{display:none} .wb-selbar{left:8px; right:8px; transform:none} }
.wb-tree .wb-sub{padding-left:calc(var(--d) * 22px); border-left:2px solid var(--line); margin-left:calc((var(--d) - 1) * 22px + 8px)}
.wb-kids{list-style:none; margin:6px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
.wb-kids li{border:1px solid var(--line); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:2px}
.wb-kids small{color:var(--muted)}
.wb-sticky.ru,.wb-shape.ru{opacity:.92; box-shadow:inset 0 0 0 2px rgba(124,58,237,.35)}
.wb-rf{position:absolute; left:6px; top:-9px; font-size:10px; font-weight:700; background:#7C3AED; color:#fff; border-radius:6px; padding:0 5px; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wb-el.wb-text.ru{color:#4C1D95; font-weight:600}
a.wb-key{text-decoration:none!important; cursor:pointer; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.wb-key:hover{background:#fff; outline:1px solid #1b1b1b}
.wb-shape a.wb-key{left:50%; transform:translateX(-50%); bottom:6px}
.wb-linked a{font-weight:600; font-size:13px}
.wb-linkin input{font:inherit; font-size:12.5px; min-height:30px; padding:3px 6px}
.wb-make{display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center; padding:2px 6px; border-radius:8px; background:#F5F3FF}
.wb-make select{font:inherit; font-size:12.5px; min-height:30px; max-width:200px}
.dg-make{margin:6px 0; border:1px solid var(--line); border-radius:8px; padding:4px 8px}
.dg-make summary{cursor:pointer; font-size:12.5px; font-weight:600}
.dl-list{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:8px}
.dl-list a{display:flex; gap:8px; align-items:center; text-decoration:none!important; color:var(--ink)!important}
.dl-list small{display:block; color:var(--muted); font-size:11.5px; margin-left:72px}
.dl-thumb{flex:none; width:64px; height:44px; border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center}
.dl-thumb svg{width:100%; height:100%}
.dl-wb{font-size:9px; font-weight:700; color:#7C3AED; background:#F5F3FF}
/* a planned card whose work item could not go into the sprint */
.wb-warn{position:absolute; right:4px; top:3px; white-space:nowrap; font-size:10px; font-weight:700; background:#fff4d6; color:#5b3d00; border:1px solid #c98a00; border-radius:4px; padding:0 4px; z-index:3}
.wb-el:has(.wb-warn){outline:2px dashed #c98a00; outline-offset:2px}
.wb-warnline{display:block; flex-basis:100%; font-size:12px; color:#5b3d00; background:#fff4d6; border-radius:4px; padding:2px 6px; margin-top:4px}
.wb-ac{display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center}
.wb-ac input{width:7.5em}
/* ---------- service desk ---------- */
.sdgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:16px; align-items:start}
.sdgrid > div,.sdgrid > aside{display:flex; flex-direction:column; gap:16px; min-width:0}
.sdgrid .panelbox{margin:0}
@media (max-width:900px){ .sdgrid{grid-template-columns:1fr} }
.sdtimeline{list-style:none; margin:0 0 12px; padding:0 0 0 14px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:10px}
.sdev{position:relative; padding:2px 0 2px 6px}
.sdev::before{content:""; position:absolute; left:-21px; top:7px; width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--muted)}
.sdev.internal{background:color-mix(in srgb,var(--tm) 10%,var(--surface)); border-radius:8px; padding:6px 10px}
.sdev.k-major::before{border-color:var(--accent); background:var(--accent)}
.sdev.k-status::before{border-color:var(--pr)}
.sdclocks{display:grid; grid-template-columns:1fr; gap:4px 0; margin:0}
.sdclocks dt{font-weight:600; font-size:13px; margin-top:6px}
.sdclocks dd{margin:0}
.sdconn{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.sdphases{display:flex; height:22px; border-radius:6px; overflow:hidden; margin:8px 0 12px; font-size:11px; font-weight:600}
.sdphases span{display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; color:#1b1b1b}
.sdphases .ph-before{background:color-mix(in srgb,var(--ink) 10%,var(--surface)); color:var(--muted)}
.sdphases .ph-early-life{background:#f6c7c7} .sdphases .ph-stabilise{background:#f8deb0} .sdphases .ph-live{background:#c6e8d3}
.sdsearch input{flex:1; min-width:0}
.sdsearch .row{display:flex; gap:8px}
.stat b.sdcat{font-family:var(--body); font-size:16px; line-height:1.3}
.sdmine{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.sdarticle h3{margin:14px 0 4px}
.sdtargets input{width:7em}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:4px 12px} .kv dt{font-weight:600} .kv dd{margin:0}
.sdq .exp th{border-left:3px solid var(--accent)}
.sdconn form{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.sdconn select,.sdconn input{max-width:100%; min-width:0}
.sdboard .wcard select{max-width:100%}
.sdboard{align-items:start}
.wipgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;align-items:end}.wipgrid label{display:flex;flex-direction:column;gap:4px;margin:0}.wipgrid input{width:100%;height:auto}.wipgrid button{grid-column:1/-1;justify-self:start}
.tflow{margin:14px 0 22px}.tflow h3{margin:0 0 2px}.tflow h3 a{color:var(--c);text-decoration:none}
.tflow ol{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;counter-reset:fs}
.tflow li{counter-increment:fs;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.tflow li b::before{content:counter(fs,decimal-leading-zero) " ";color:var(--c);font-family:var(--mono,monospace);font-size:11px}
.tflow li a{font-size:12.5px;line-height:1.3}
/* Atlassian backbone (a workspace configuration) */
.atl h2{margin-top:0}
.notice{background:color-mix(in srgb,var(--accent, var(--pr)) 8%,var(--surface)); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; margin:0 0 16px}
.notice.atlnote{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.notice.atlnote .btn{margin-left:auto}
.xwho{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.xwho>div{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.xwho h3{margin:0 0 4px;font-size:16px}.xwho ul{margin:8px 0 0;padding-left:18px}
.atlside{border-left:4px solid #2C80C3 !important}
.dp{border-left:4px solid var(--pr) !important}
.both{border-left:4px solid #8A5CD6 !important}
.xflow{display:flex;flex-direction:column;gap:10px}
.xrow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch}
.xcell{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.xcell span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.xcell small{color:var(--muted)}
.xarrow{align-self:center;font-size:13px;color:var(--muted);white-space:nowrap}
.xvalue{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.xvalue>div{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.xvalue b{display:block;font-size:22px;margin:2px 0 4px}
.xvalue p{margin:0}
.xsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;counter-reset:xs}
.xsteps li{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:3px;counter-increment:xs}
.xsteps li b::before{content:counter(xs) ". "}
.xsteps li span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:760px){.xrow{grid-template-columns:1fr}.xarrow{justify-self:start;padding-left:12px}}
.xbridge{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:0 0 18px}
.xbridge>div:not(.xjoin){border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.xbridge b{font-size:18px}.xbridge span{color:var(--muted);font-size:14px}
.xjoin{font-weight:700;font-size:14px;text-align:center;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--pr) 12%,var(--surface));border:1px solid var(--line)}
@media (max-width:760px){.xbridge{grid-template-columns:1fr}}

/* DelPulse AI, agents and portfolio depth */
.agentgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.agentgrid .panelbox { margin: 0; }
.agentlist > li.agentprop { display: grid; grid-template-columns: 1fr; gap: 8px; }
.agentlist > li.agentprop form.quick { justify-content: flex-start; }
.aiout { line-height: 1.5; }
.aiout h3 { margin: 12px 0 4px; }
.aiout ul.feats { margin: 4px 0 8px; }
.aicard .row { flex-wrap: wrap; gap: 8px; align-items: center; }
.aicard form.quick { flex: 1 1 320px; }
.aicard form.quick input { flex: 1; min-width: 0; }
svg.bubble { width: 100%; height: auto; max-height: 380px; }
td.bad { color: var(--red, #b42318); font-weight: 600; }
input.tiny { width: 5em; }
.ssobox { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, #ddd); }
.ssobox .row { gap: 8px; }
.ssobox input { flex: 1; min-width: 0; }
/* Communities of practice */
.copgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.copgrid .copcard { display: block; border: 1px solid var(--line, #ddd); border-radius: 10px; padding: .75rem .9rem; }
.copgrid .copcard p { margin: .35rem 0 0; }
.reslist { margin: 0; padding-left: 1rem; }
.reslist li { margin: .2rem 0; }
.tbl tr.hl > th, .tbl tr.hl > td { background: var(--hl, rgba(64, 160, 140, .08)); }
.coplist li > div > small { display: block; margin-top: .15rem; }
.coplist li > div > b + small { font-weight: 400; }
.copact { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.copact form { margin: 0; }
.tbl.mc{min-width:0; width:100%} .tbl.mc th{white-space:normal} .tbl.mc td{white-space:nowrap; text-align:right}
/* The document library */
.docsplit{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; margin-bottom:14px}
.doctree{list-style:none; margin:4px 0 8px; padding-left:0}
.doctree .doctree{padding-left:16px; border-left:1px solid var(--line); margin:2px 0 2px 6px}
.doctree li{padding:3px 0}
.doctree a{color:var(--ink); text-decoration:none}
.doctree a:hover{text-decoration:underline}
.doctree a[aria-current=page]{font-weight:600; color:var(--accent)}
.newpage{margin-top:10px}
.newpage>summary{list-style:none; display:inline-block}
.newpage>summary::-webkit-details-marker{display:none}
.tplpick{border:0; padding:0; margin:6px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px}
.tplpick legend{font-weight:500; font-size:13.5px; margin-bottom:4px}
.tplopt{display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-weight:400; margin:0; cursor:pointer}
.tplopt:has(input:checked){border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.tplopt input{position:absolute; opacity:0}
.tblwrap{overflow-x:auto}
.form.upload input[type=file]{font:inherit; font-size:13.5px}
.form.upload .row2{align-items:center; flex-wrap:wrap}
.doclayout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; align-items:start}
.docnav{position:sticky; top:12px; max-height:calc(100vh - 40px); overflow:auto}
.docmain>.panelbox, .docmain>details{margin-top:14px}
@media (max-width:820px){.doclayout{grid-template-columns:1fr} .docnav{position:static; max-height:none}}
.docbody{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; line-height:1.6; min-width:0; overflow-wrap:anywhere}
.docbody h2{font-size:21px; margin:20px 0 8px} .docbody h3{font-size:17px; margin:18px 0 6px} .docbody h4,.docbody h5{font-size:15px; margin:14px 0 4px}
.docbody>:first-child{margin-top:0}
.docbody table{border-collapse:collapse; width:100%; font-size:14px; margin:10px 0}
.docbody th,.docbody td{border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top}
.docbody th{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
.mdtable{overflow-x:auto}
.docbody blockquote{border-left:3px solid var(--accent); margin:10px 0; padding:2px 14px; color:var(--muted)}
.docbody pre{background:color-mix(in srgb,var(--ink) 6%,var(--surface)); padding:10px 12px; border-radius:8px; overflow:auto}
.docbody code{font-size:.92em; background:color-mix(in srgb,var(--ink) 6%,var(--surface)); padding:1px 4px; border-radius:4px}
.docbody pre code{background:none; padding:0}
.docbody ul.tasks{list-style:none; padding-left:4px}
.docbody .tick{display:inline-flex; width:16px; height:16px; border:1.5px solid var(--muted); border-radius:4px; align-items:center; justify-content:center; font-size:12px; vertical-align:-2px}
.docbody .tick.on{background:var(--accent); border-color:var(--accent); color:#fff}
.docdiff{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere}
.docdiff .add{background:color-mix(in srgb,#2e9e5b 18%,transparent); display:inline-block; width:100%}
.docdiff .del{background:color-mix(in srgb,#d64545 16%,transparent); text-decoration:line-through; display:inline-block; width:100%}
.doceditor textarea{font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; width:100%; box-sizing:border-box; resize:vertical; min-height:420px}
.doceditor select,.docmain select,.docsplit select{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 9px}
.edtools{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.edpanes{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px}
.edpreview .docbody{max-height:600px; overflow:auto}
.list.files .dl{margin-left:auto}
.sub.folder{font-size:14px; margin:14px 0 2px}
.docacts{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start}