:root{
  --paper:#FDFBF7; --paper2:#F7F2EA; --paper3:#EFE9DE; --card:#FFFFFF;
  --navy:#0F2B4C; --blue:#3A6FA8; --blue2:#5C8CC0;
  --amber:#C0871F; --red:#B54A3A; --green:#4E7A51; --purple:#6B5B95;
  --ink:#14232F; --t2:#4C5B69; --t3:#87919C; --t4:#A9B1B9;
  --bdr:#E6DFD3; --bdr2:#D5CCBC;
  --gut:clamp(22px,7vw,120px);
  --disp:'Space Grotesk',sans-serif; --body:'Geist','Inter',sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
button,select,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:rgba(58,111,168,.18)}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:60;background:rgba(253,251,247,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--bdr)}
.mrow{max-width:1460px;margin:0 auto;padding:14px var(--gut) 0;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--navy)}
.brand span{color:var(--t3);font-weight:400}
.bsub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-top:5px}
.mright{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.prog{display:flex;align-items:center;gap:10px}
.pbarw{width:150px;height:6px;background:var(--paper3);border-radius:99px;overflow:hidden}
.pbarw i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .3s}
.pnum{font-family:var(--mono);font-size:11px;color:var(--t2);white-space:nowrap}
.abtn{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);background:var(--card);border:1px solid var(--bdr2);border-radius:99px;padding:6px 13px;cursor:pointer}
.abtn:hover{border-color:var(--navy);color:var(--navy)}
.abtn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.abtn.pri:hover{background:#16375d}
.savemsg{font-family:var(--mono);font-size:10px;color:var(--green)}
.tabs{max-width:1460px;margin:0 auto;padding:12px var(--gut) 0;display:flex;gap:2px;flex-wrap:wrap}
.tab{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px 11px;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--navy);border-color:var(--blue)}
.tab b{color:var(--blue);font-weight:500;margin-right:5px}
.tab i{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--t4);margin-left:6px}

/* ---------- shell ---------- */
.shell{max-width:1460px;margin:0 auto;padding:26px var(--gut) 110px;display:grid;grid-template-columns:minmax(0,1fr)}
.view{display:none}
.view.on{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.kick{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.kick b{color:var(--blue);font-weight:500}
.point{font-family:var(--disp);font-weight:600;font-size:30px;line-height:1.16;letter-spacing:-.02em;color:var(--navy);max-width:26ch;text-wrap:balance}
.point.wide{max-width:34ch}
.lead{font-size:14.5px;color:var(--t2);max-width:66ch;margin-top:12px}
.whybox{border-left:3px solid var(--blue);background:var(--paper2);padding:13px 18px;margin-top:18px;border-radius:0 6px 6px 0;font-size:13.5px;color:var(--t2);max-width:78ch}
.whybox b{color:var(--ink);font-weight:600}
.secttl{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--navy);margin:36px 0 4px;letter-spacing:-.01em}
.sectsub{font-size:13.5px;color:var(--t3);max-width:70ch;margin-bottom:16px}

/* ---------- image blocks ---------- */
.imgblock{max-width:700px;border:1px dashed var(--bdr2);background:repeating-linear-gradient(45deg,var(--paper2),var(--paper2) 10px,var(--paper) 10px,var(--paper) 20px);border-radius:10px;padding:0;overflow:hidden;margin-top:18px}
.imgblock.filled{border-style:solid;background:var(--card);max-width:700px}
.railimg{cursor:zoom-in;border:1px solid var(--bdr);border-radius:8px;overflow:hidden;background:var(--paper2)}
.railimg img{width:100%;display:block}
.railcap{font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.03em;color:var(--t3);margin-top:8px}
.lbx{position:fixed;inset:0;background:rgba(16,31,44,.82);z-index:200;display:flex;align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.lbx img{max-width:100%;max-height:100%;border-radius:8px;background:var(--paper)}
.imgblock img{width:100%;display:block}
.imgblock.filled .cap{border-top:1px solid var(--bdr)}
.imgblock .ph{height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.imgblock .ph .tagline{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.imgblock .ph .nm{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--t2)}
.imgblock .cap{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--t3);padding:9px 14px;background:var(--paper2);border-top:1px dashed var(--bdr2)}

/* ---------- stage bars ---------- */
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.72fr);gap:26px;align-items:start}
.heroimg{justify-self:end;max-width:500px;border:1px solid var(--bdr);border-radius:10px;overflow:hidden;background:var(--card);cursor:zoom-in}
.heroimg img{width:100%;display:block}
.heroimg figcaption{font-family:var(--mono);font-size:9.5px;line-height:1.6;letter-spacing:.03em;color:var(--t3);padding:9px 12px;background:var(--paper2);border-top:1px solid var(--bdr)}
@media(max-width:1180px){.herogrid{margin-right:0}}
@media(max-width:860px){.herogrid{grid-template-columns:minmax(0,1fr)}}
/* Open Questions heading left, Four Sizes image right, on the hero grid */
.qhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.72fr);gap:26px;align-items:start;margin-top:36px}
.qhead>div>.secttl{margin-top:0}
.qhead .imgblock.filled{max-width:440px;justify-self:end;margin-top:0;cursor:zoom-in}
/* the four sizes picture, standing on its own since Open Questions stopped rendering */
.imgblock[data-zoom]{cursor:zoom-in}
.sizesfig{margin-top:30px}
@media(max-width:1000px){.qhead{grid-template-columns:minmax(0,1fr)}.qhead .imgblock.filled{max-width:100%;justify-self:stretch}}
.stagebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:24px}
.sb{background:var(--card);border:1px solid var(--bdr);border-radius:9px;padding:12px 14px}
.sb .n{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.sb .v{font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.25;color:var(--navy);margin-top:4px}
.sb i{display:block;height:4px;border-radius:99px;background:var(--paper3);margin-top:8px;overflow:hidden}
.sb i em{display:block;height:100%;background:var(--blue);border-radius:99px}

/* ---------- critical path ---------- */
.crit{display:grid;grid-template-columns:26px minmax(0,1fr) 300px;gap:15px;padding:16px 17px;background:var(--card);border:1px solid var(--bdr);border-radius:10px;margin-bottom:9px;align-items:start}
.cn{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--blue);line-height:1}
.ctitle{font-family:var(--disp);font-size:16.5px;font-weight:600;color:var(--navy);line-height:1.35}
.cws{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);border:1px solid var(--bdr2);border-radius:3px;padding:2px 7px;margin-left:9px;white-space:nowrap;vertical-align:middle}
.ctext{font-size:13.5px;color:var(--t2);margin-top:7px;max-width:72ch}
.csteps{margin:9px 0 0 17px;max-width:72ch}
.csteps li{font-size:13px;color:var(--t2);margin-bottom:3px}
.cproof{font-family:var(--mono);font-size:10.5px;color:var(--green);margin-top:10px}
.cproof b{color:var(--t3);font-weight:400;text-transform:uppercase;font-size:8.5px;letter-spacing:.07em;margin-right:6px}

/* ---------- chain ---------- */
.chain{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.cnode{flex:1 1 118px;background:var(--card);border:1px solid var(--bdr);border-radius:9px;padding:12px 13px;position:relative}
.cnode .k{font-family:var(--mono);font-size:9px;color:var(--blue)}
.cnode .l{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--navy);margin-top:5px;line-height:1.3}
.cnode .val{font-size:12.5px;color:var(--ink);margin-top:8px;min-height:22px;border-bottom:1px dashed var(--bdr2);padding-bottom:3px}
.cnode .val:empty:before{content:'add the answer';color:var(--t4);font-style:italic}
.cnode .val:focus{outline:none;color:var(--ink);border-color:var(--blue)}

/* ---------- questions ---------- */
.qrow{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) 300px;gap:15px;padding:15px 17px;background:var(--card);border:1px solid var(--bdr);border-radius:10px;margin-bottom:9px;align-items:start}
@media(max-width:1000px){.qrow{grid-template-columns:26px minmax(0,1fr)}.qrow .side{grid-column:1 / -1}}
.crit{position:relative}
.qn{font-family:var(--mono);font-size:11px;color:var(--t4);padding-top:2px}
.qq{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--navy)}
.qb{font-size:13px;color:var(--t2);margin-top:5px;max-width:74ch}
.tinychip{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;background:rgba(192,135,31,.12);color:var(--amber);border-radius:3px;padding:2px 7px;margin-left:8px;white-space:nowrap}

/* ---------- lists ---------- */
.filt{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 6px}
.fchip{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);background:var(--card);border:1px solid var(--bdr2);border-radius:99px;padding:6px 12px;cursor:pointer}
.fchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.grp{margin-top:26px}
.grpname{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--bdr2);padding-bottom:8px;margin-bottom:12px}
.grpname h3{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--navy);flex:1}
.grpname .gc{font-family:var(--mono);font-size:9.5px;color:var(--t3);white-space:nowrap}

.gassign{background:var(--paper2);border:1px solid var(--bdr);border-radius:9px;padding:11px 13px;margin-bottom:12px}
.gassign .gr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.gassign .gr+.gr{margin-top:9px;grid-template-columns:repeat(3,minmax(0,1fr))}
.gassign .fc label{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.gassign .fc select,.gassign .fc input{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:6px;padding:6px 8px;font-size:12.5px;color:var(--ink)}
.gassign .fc select:focus,.gassign .fc input:focus{outline:none;border-color:var(--blue)}
.gassign .gh{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.gassign .gh .lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
@media(max-width:760px){.gassign .gr,.gassign .gr+.gr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.task{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) 300px;gap:15px;align-items:start;background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:15px 17px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.task:hover{border-color:var(--bdr2)}
.task.sel{border-color:var(--blue);box-shadow:0 0 0 3px rgba(58,111,168,.12)}
.task.done{opacity:.5}
.task.done .ttitle{text-decoration:line-through}
.tick{width:16px;height:16px;margin-top:3px;accent-color:var(--navy);cursor:pointer}
.ttitle{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--navy);line-height:1.35}
.ttitle:focus{outline:none;background:rgba(58,111,168,.07);border-radius:3px}
.ttitle.empty:before{content:'Untitled · click to name';color:var(--t4);font-weight:400}
.need{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;border-radius:3px;padding:2px 7px;margin-left:8px;white-space:nowrap;vertical-align:middle}
.need-c{background:rgba(181,74,58,.11);color:var(--red)}
.need-s{background:rgba(76,91,105,.1);color:var(--t2)}
.need-a{background:rgba(192,135,31,.13);color:var(--amber)}
.steps{margin:9px 0 0 17px}
.steps li{font-size:13px;color:var(--t2);margin-bottom:3px}

/* ---------- who is on each checklist line ---------- */
/* The words run down the left, LEAD, ASSIST and CHECK down three columns on the right, in the
   width the card's right hand panel used to hold. One header row per list carries the three
   words, so no line repeats them, and every line shares the same track sizes, so the three
   columns line up all the way down. */
.lwrap{--rolew:124px;--rolegap:12px;margin:12px 0 2px}
.lwrap .steps,.lwrap .csteps{margin:0;max-width:none;list-style:none}
.lhead,.lwrap li{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,var(--rolew));gap:0 var(--rolegap);align-items:center}
.lhead{padding:0 0 5px}
.lhead span{font-family:var(--mono);font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.lwrap li{padding:7px 0;font-size:13px;color:var(--t2);margin:0}
.lwrap li+li{border-top:1px solid var(--bdr)}
/* the disc marker goes with display:grid, so the line keeps a quieter one of its own */
.lleft{min-width:0;padding-right:16px}
.ltext::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--bdr2);margin-right:9px;vertical-align:2px}
.ltext:focus{outline:none;background:rgba(58,111,168,.07);border-radius:3px}
/* Stage 1 only: each of its lines is a thing to get three quotes for. Same type scale and
   colour as the LEAD / ASSIST / CHECK header, so it reads as line meta and not as a badge. */
.lq{display:inline-block;margin-left:9px;padding:1px 5px;font-family:var(--mono);font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);background:var(--paper2);border:1px solid var(--bdr);border-radius:4px;vertical-align:1px;white-space:nowrap}
/* display:contents lets the three boxes become columns of the line while .lassign keeps
   holding the line's id and index, which is what the change handler reads. */
.lassign{display:contents}
.lfc{min-width:0}
.lfc label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lfc select{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:6px;padding:4px 6px;font-size:11.5px;line-height:1.35;color:var(--ink)}
.lfc select:focus{outline:none;border-color:var(--blue)}
/* narrow: the columns fold under the words and take their labels back */
@media(max-width:820px){
  .lhead{display:none}
  .lwrap li{display:block;padding:9px 0}
  .lleft{padding-right:0}
  .lassign{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
  .lfc{display:inline-flex;align-items:center;gap:4px}
  .lfc label{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
  .lfc select{width:auto;max-width:13ch}
}
.tdone,.tcost{font-size:12.5px;margin-top:9px;padding-left:11px;border-left:2px solid var(--bdr2);color:var(--t2)}
.tdone{border-left-color:var(--green)}
.tcost.money{border-left-color:var(--amber)}
.tdone b,.tcost b{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);display:block;font-weight:400;margin-bottom:2px}
.tfoot{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.av{width:21px;height:21px;border-radius:50%;background:var(--paper3);color:var(--t2);font-family:var(--mono);font-size:8.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--bdr2)}
.av.lead{background:var(--navy);color:#fff;border-color:var(--navy)}
/* the Whole team chip: four letters will not sit in a 21px circle, so it takes a pill */
.av.team{width:auto;padding:0 7px;border-radius:10px;font-size:7.5px;letter-spacing:.07em}
.fmeta{font-family:var(--mono);font-size:9.5px;color:var(--t4);letter-spacing:.05em}
.fmeta.has{color:var(--blue)}
.tcmt{display:none;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--t4);background:var(--paper2);border:1px solid var(--bdr);border-radius:99px;padding:4px 10px;cursor:pointer}
.tcmt:hover{color:var(--blue);border-color:var(--blue)}
.tcmt.has{color:var(--blue);border-color:var(--blue2)}
.addform{background:var(--paper2);border:1px solid var(--bdr2);border-radius:10px;padding:14px 15px;margin-bottom:8px}
.addform .ar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.addform .ar+.ar{margin-top:9px}
.addform .fc.wide{grid-column:1 / -1}
.addform .fc label{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.addform .fc input,.addform .fc select{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:6px;padding:7px 9px;font-size:13px;color:var(--ink)}
.addform .fc input:focus,.addform .fc select:focus{outline:none;border-color:var(--blue)}
.addform .arow{display:flex;gap:8px;margin-top:11px}
.addrow{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);background:none;border:1px dashed var(--bdr2);border-radius:8px;padding:9px 13px;cursor:pointer;width:100%;text-align:left}
.addrow:hover{color:var(--navy);border-color:var(--navy)}

/* ---------- rail ---------- */
.rail{display:none}
.side{display:grid;gap:8px;align-content:start}
.tassign{background:var(--paper2);border:1px solid var(--bdr);border-radius:8px;padding:9px 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tassign .fc.half{grid-column:span 1}
.tassign .fc.third{grid-column:span 1}
.tassign .fc label{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
.tassign .fc select,.tassign .fc input{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:5px;padding:4px 5px;font-size:11px;color:var(--ink)}
.tassign .fc select:focus,.tassign .fc input:focus{outline:none;border-color:var(--blue)}
@media(max-width:1000px){.tassign{grid-template-columns:repeat(2,minmax(0,1fr))}.task{grid-template-columns:20px minmax(0,1fr)}.side{grid-column:1 / -1}.crit{grid-template-columns:26px minmax(0,1fr)}.crit .side{grid-column:1 / -1}}
.assign{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;background:var(--paper2);border:1px solid var(--bdr);border-radius:9px;padding:11px 13px;margin-bottom:10px}
.assign .fc label{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.assign .fc select,.assign .fc input{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:6px;padding:6px 8px;font-size:12.5px;color:var(--ink)}
.assign .fc select:focus,.assign .fc input:focus{outline:none;border-color:var(--blue)}
.cbox{border:1px solid var(--bdr);background:var(--paper2);border-radius:8px;padding:9px 10px}
.cbox .csect{border:none;margin:0;padding:0}
.rc{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:15px 16px}
.rcard{position:absolute;left:0;right:0}
.rcard .rhead{display:flex;align-items:flex-start;gap:8px;margin-bottom:11px}
.rcard .rname{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--navy);line-height:1.3;flex:1}
.rcard .rcount{font-family:var(--mono);font-size:9.5px;color:var(--t4);white-space:nowrap;padding-top:2px}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rgrid .fc label{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:3px}
.rgrid .fc select,.rgrid .fc input{width:100%;background:var(--paper2);border:1px solid var(--bdr);border-radius:6px;padding:5px 7px;font-size:12px;color:var(--ink)}
.rgrid .fc select:focus,.rgrid .fc input:focus{outline:none;border-color:var(--blue);background:#fff}
.rgrid .fc.wide{grid-column:1 / -1}
.csect{margin:0}
.cscope{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.cscope b{color:var(--blue);font-weight:500;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:11.5px}
.clr{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);background:none;border:1px solid var(--bdr2);border-radius:99px;padding:3px 9px;cursor:pointer}
.clr:hover{color:var(--red);border-color:var(--red)}
.cmt{border-top:1px solid var(--bdr);padding:11px 0 0;margin-top:11px}
.cmt:first-of-type{border-top:none;margin-top:0}
.chead{display:flex;align-items:center;gap:7px}
.chead .who{font-family:var(--disp);font-weight:600;font-size:11.5px;color:var(--navy)}
.chead .when{font-family:var(--mono);font-size:9px;color:var(--t4);margin-left:auto}
.chead .del{background:none;border:none;color:var(--t4);cursor:pointer;font-size:12px;line-height:1}
.chead .del:hover{color:var(--red)}
.cbody{font-size:12px;color:var(--t2);margin-top:5px;white-space:pre-wrap}
.cempty{font-size:11.5px;color:var(--t4);font-style:italic}
.cwrite{margin-top:8px}
.cwrite textarea{width:100%;min-height:40px;background:var(--card);border:1px solid var(--bdr);border-radius:6px;padding:6px 8px;font-size:11.5px;resize:vertical}
.cwrite textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.cwrite .row{display:flex;gap:7px;margin-top:7px}
.cwrite select{flex:1;min-width:0;background:var(--card);border:1px solid var(--bdr);border-radius:5px;padding:4px 6px;font-size:11px}

/* ---------- gantt ---------- */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:block}
.b1{background:var(--blue)} .b2{background:var(--green)} .b3{background:var(--purple)} .b4{background:var(--amber)} .b5{background:var(--t3)}
.planwrap{border:1px solid var(--bdr);border-radius:12px;overflow-x:auto;background:var(--card)}
table.plan{width:100%;border-collapse:collapse;min-width:840px}
table.plan td{padding:0;vertical-align:middle}
.rh{width:300px;padding:9px 14px !important;border-right:1px solid var(--bdr);border-bottom:1px solid var(--paper3)}
.rh.sub .wk{font-family:var(--mono);font-size:9px;color:var(--t4);display:block}
.rh.sub .lbl{font-size:12.5px;color:var(--t2)}
.rh.head .mo{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);display:block}
.rh.head b{font-family:var(--disp);font-size:14px;color:var(--navy)}
.rh.head .nt{font-size:11.5px;color:var(--t3);display:block;margin-top:3px}
.tl{position:relative;height:34px;border-bottom:1px solid var(--paper3)}
.tl .pbar,.tl .band{position:absolute;top:50%;transform:translateY(-50%);height:9px;border-radius:99px}
.tl .band{height:15px;opacity:.22}
.months{position:relative;height:26px}
.months .mb{position:absolute;top:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);border-left:1px solid var(--bdr2);padding-left:6px}
.ticks{position:relative;height:18px}
.ticks span{position:absolute;font-family:var(--mono);font-size:8.5px;color:var(--t4)}

@media(max-width:1180px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto !important;display:grid;gap:12px}
  .rcard{position:static !important;top:auto !important}
}
@media(max-width:640px){
  .mrow,.tabs,.shell{padding-left:18px;padding-right:18px}
  .heroimg{max-width:100%}
  .point{font-size:24px}
  .stagebar{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- server rendered layout ---------- */
/* An item card and a Critical Path stage are one column wide now: the panel that used to sit
   on their right is gone and the body has the whole card, which is where the three role
   columns on each checklist line live. A question keeps its panel, so it keeps its track. */
.task{grid-template-columns:minmax(0,1fr)}
.crit{grid-template-columns:26px minmax(0,1fr)}
.qrow{grid-template-columns:26px minmax(0,1fr) 300px}
@media(max-width:1000px){.qrow{grid-template-columns:26px minmax(0,1fr)}.qrow .side{grid-column:1 / -1}}
.tstate{display:flex;align-items:center;gap:7px;background:var(--paper2);border:1px solid var(--bdr);border-radius:8px;padding:7px 9px}
.tstate .tick{margin-top:0}
.tword{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-right:2px}
.tword.on{color:var(--navy)}
.tstate .fmeta{margin-left:auto}
.ebtn{justify-self:start;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t2);background:var(--card);border:1px solid var(--bdr);border-radius:6px;padding:5px 10px;cursor:pointer}
.ebtn:hover{border-color:var(--blue);color:var(--blue)}
.ebtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.editing [contenteditable="true"]{background:var(--paper2);outline:1px dashed var(--bdr2);border-radius:4px;padding:1px 3px}
[data-k="section"]:focus{outline:1px dashed var(--bdr2);border-radius:4px}
.cwrite .row .fmeta{margin-right:auto}