html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
.wrap{flex:1;min-height:0;display:flex;flex-direction:column}

/* the queue: every draft waiting, in the order they expire */
.q{flex:none;display:flex;align-items:center;gap:6px;padding:0 var(--gut);height:58px;
  background-image:linear-gradient(90deg,rgba(206,222,240,.12) 1px,transparent 1px);background-size:3px 1px;background-repeat:repeat-x;background-position:0 100%}
.q .lbl{font-size:10px;color:var(--faint);margin-right:12px;white-space:nowrap}
.q .it{position:relative;display:flex;align-items:center;gap:8px;height:58px;padding:0 12px 0 8px;font-size:12px;color:var(--dim);white-space:nowrap;min-width:0}
.q .it canvas{flex:none}
.q .it .w{font-size:10.5px;color:var(--faint)}
.q .it.on{color:var(--ink)}
.q .it.on::after{content:'';position:absolute;left:8px;right:12px;bottom:0;height:1px;background:var(--ink)}
.q .it.done{color:var(--faint)}
.q .it.done .w{letter-spacing:.12em;text-transform:uppercase;font-size:9.5px}
.q .it .fdot{width:5px;height:5px;background:var(--flag);flex:none}
.md{margin-left:18px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,180,76,.7)}
.md:hover{color:#ffd58a}
.q .pos{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap;display:flex;align-items:center;gap:4px}

/* two columns: the post as coworkers will read it, and the decision */
.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(380px,430px);gap:0 clamp(28px,3.4vw,56px);padding:0 var(--gut);max-width:1240px;width:100%;margin:0 auto}
.rule{background-image:linear-gradient(rgba(206,222,240,.16) 1px,transparent 1px);background-size:1px 3px;margin:22px 0}
.col{min-height:0;overflow-y:auto;padding:20px 2px 22px;scrollbar-width:thin;scrollbar-color:rgba(206,222,240,.15) transparent}

/* left: the preview, in the round 12 panel's own type */
.vh{display:flex;align-items:center;gap:18px;height:20px}
.vh .lbl{font-size:10px;color:var(--faint)}
.vs{display:flex;gap:16px;margin-left:auto}
.vs button{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:2px 0;display:inline-flex;align-items:center;gap:6px}
.vs button.on{color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.vs button .k{margin:0}
.pv{max-width:620px;margin-top:16px;position:relative}
.ph{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.pn{font:700 28px/1.05 var(--dot);letter-spacing:.02em;color:var(--ink);text-shadow:0 0 12px rgba(120,180,255,.18)}
.pl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.hl{font-size:17px;line-height:1.38;margin:0 0 8px;color:var(--ink)}
.story{margin:0 0 10px;color:var(--dim);font-size:12.5px;line-height:1.55}
.uh{color:var(--ink);font-size:13px;line-height:1.45;margin:0 0 4px}
.sub .lbl{font-size:9.5px;color:var(--faint)}
.cells{margin:0;padding:0;list-style:none}
.cells li{position:relative;padding-left:18px;color:var(--body);font-size:12.5px;line-height:1.5;margin:4px 0}
.cells li::before{content:'';position:absolute;left:1px;top:.55em;width:5px;height:5px;background:var(--cell,#9a9892)}
.cells li.gone{color:var(--faint)}
.cells li.gone::before{background:rgba(206,222,240,.18)}
.pv .sec{margin:16px 0 9px}
.pv .sec.wo{margin:18px 0 8px}
[contenteditable]{outline:0;border-radius:2px;box-shadow:0 0 0 4px transparent;transition:box-shadow .12s,background .12s}
.editing [contenteditable]{background:rgba(206,222,240,.035);box-shadow:0 0 0 4px rgba(206,222,240,.035),inset 0 -1px 0 rgba(206,222,240,.2);cursor:text}
.editing [contenteditable]:focus{background:rgba(206,222,240,.07);box-shadow:0 0 0 4px rgba(206,222,240,.07),inset 0 -1px 0 rgba(206,222,240,.6)}
.edit-note{font-size:11px;color:var(--faint);margin:0 0 12px;display:none}
.editing .edit-note{display:block}

/* artifacts with tick boxes: a box ticked goes out with the post */
.tb{flex:none;width:13px;height:13px;box-shadow:inset 0 0 0 1px rgba(206,222,240,.5);display:inline-grid;place-items:center;cursor:pointer}
.tb::after{content:'';width:7px;height:7px;background:var(--ink)}
.off .tb{box-shadow:inset 0 0 0 1px rgba(206,222,240,.28)}
.off .tb::after{display:none}
.tile .tc{cursor:pointer}
.tile.off .tf,.prr.off .pt,.prr.off .pd,.prr.off .pm,.prr.off .ps,.sline.off span{opacity:.32}
.tile.off .tt{color:var(--faint)}
.lo{display:none;margin-left:auto;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.off .lo{display:inline}
.prr{grid-template-columns:13px minmax(0,1fr) auto;cursor:pointer}
.sline{cursor:pointer}
.tiles .tf{max-height:150px}
.bt{order:9}
.bt .r{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;padding:3px 0;font-size:12px}
.bt .dt{color:var(--faint);font-size:11px;white-space:nowrap}
.bt .h{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv{display:flex;flex-direction:column}
.pv > *{flex:none}

/* right: decide */
.facts{margin-top:2px}
/* the draft is a proposal: a dashed amber rule down its margin, a + on every line it would add, the live line it replaces struck faintly */
.tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--wait);display:inline-flex;align-items:center;gap:8px}
.tag::before{content:'';width:14px;height:0;border-top:1px dashed var(--wait)}
.tag.going::before{border-top-style:solid}
.tag.live{color:var(--dim)}
.tag.live::before{border-top:1px solid rgba(206,222,240,.4)}
.pv.prop{padding-left:26px}
.pv.prop::before{content:'';position:absolute;left:6px;top:-2px;bottom:-4px;border-left:1px dashed rgba(240,180,76,.55)}
.pv.prop.going::before{border-left-style:solid;border-left-color:rgba(240,180,76,.4)}
.pv.prop.live::before{display:none}
.pv .nw{position:relative}
.pv .nw::before{content:'+';position:absolute;left:-26px;width:13px;text-align:center;font-size:12px;line-height:1;top:.35em;color:var(--wait);background:#020308}
.pv .cells li.nw::before{left:-26px;top:.35em;width:13px;height:auto;background:#020308}
.pv .cells li.nw::after{content:'';position:absolute;left:1px;top:.55em;width:5px;height:5px;background:var(--cell,#9a9892)}
.pv .cells li.nw.gone::after{background:rgba(206,222,240,.18)}
.pv.going .nw::before{content:'·';color:rgba(240,180,76,.8)}
.pv.live .nw::before{content:none}
.was{margin:-4px 0 10px;font-size:11.5px;color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(206,222,240,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv .arts{display:block}
/* the decision is a control surface, not content: an amber-lit panel, Post primary, the rest plain */
.ctl{margin-top:18px;padding:16px 16px 18px;background:rgba(240,180,76,.03);box-shadow:inset 0 0 0 1px rgba(240,180,76,.26)}
.ctl .sec{margin:16px 0 9px}
.ctl .sec .lbl,.ctl .sec .aside{color:rgba(240,180,76,.7)}
.ctl .sec::after{background-image:linear-gradient(90deg,rgba(240,180,76,.25) 1px,transparent 1px)}
.ctl .dec{grid-template-columns:1.4fr 1fr 1fr;gap:6px}
.ctl .dec .btn{box-shadow:none;color:var(--dim);background:rgba(206,222,240,.03)}
.ctl .dec .btn:hover{color:var(--ink);background:rgba(206,222,240,.07)}
.ctl .dec .btn::before{display:none}
.ctl .dec .btn[data-act="post"]{color:#ffd58a;box-shadow:inset 0 0 0 1px rgba(240,180,76,.6);background:rgba(240,180,76,.06)}
.ctl .dec .btn.on{color:#ffe2a6;background:rgba(240,180,76,.16);box-shadow:inset 0 0 0 1px rgba(240,180,76,.9)}
.ctl .dec .btn .k{box-shadow:inset 0 0 0 1px rgba(240,180,76,.3);color:rgba(240,180,76,.7)}
.ctl .chip{box-shadow:inset 0 0 0 1px rgba(240,180,76,.22);background:rgba(2,3,8,.4)}
.ctl .chip.on{background:rgba(240,180,76,.14);box-shadow:inset 0 0 0 1px rgba(240,180,76,.85);color:#ffe2a6}
.ctl .line-in{box-shadow:inset 0 0 0 1px rgba(240,180,76,.22);background:rgba(2,3,8,.4)}
.ctl .btn.go,.thumb .btn.go{box-shadow:inset 0 0 0 1px rgba(240,180,76,.85);background:rgba(240,180,76,.16);color:#ffe2a6}
.ctl .btn.go::before,.thumb .btn.go::before{display:none}
.ctl .btn.go[disabled]{box-shadow:inset 0 0 0 1px rgba(240,180,76,.25);background:none;color:rgba(240,180,76,.4)}
.ctl .edit button{color:rgba(240,180,76,.7)}
.ctl .stw{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ctl .stw .w{font:700 22px/1.3 var(--dot);letter-spacing:.06em;color:#ffd58a}
.ctl .stw .t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--wait);white-space:nowrap}
.ctl .y{display:block;margin:10px 0 14px;font-size:13px;line-height:1.4;color:var(--ink)}
.ctl.done{background:none;box-shadow:inset 0 0 0 1px rgba(206,222,240,.16)}
.ctl.done .sw .w{color:var(--ink)}
.ctl.done .sw .t{color:var(--dim)}
.ctl .go-row .btn:not(.go){height:42px}
.f1{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.f1 .soon{color:var(--wait)}
.fls{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:relative}
.fx{display:inline-flex;align-items:baseline;gap:8px;padding:5px 9px;box-shadow:inset 0 0 0 1px rgba(224,116,95,.4);font-size:12px;cursor:help}
.fx i{font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--flag)}
.fx b{font-weight:400;color:var(--ink);box-shadow:0 1px 0 var(--flag)}
.fx b + b{margin-left:2px}
.fx.gone{box-shadow:inset 0 0 0 1px rgba(206,222,240,.15)}
.fx.gone i,.fx.gone b{color:var(--faint);box-shadow:none;text-decoration:line-through}
.tipx{position:absolute;z-index:5;left:0;top:calc(100% + 6px);width:max-content;max-width:min(300px,100%);padding:6px 9px;background:#06070d;box-shadow:inset 0 0 0 1px rgba(206,222,240,.22);font-size:11.5px;line-height:1.45;color:var(--body);white-space:normal}
.right .sec{margin:16px 0 9px}
.right .facts{gap:4px 16px}
.right .flag{padding:4px 0}
.flag.gone .fk,.flag.gone .fm,.flag.gone q{color:var(--faint)}
.flag.gone q{text-decoration:line-through}
.flags{margin-top:2px}
.dec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dec .btn{justify-content:space-between}
.edit{margin-top:8px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--faint)}
.edit button{color:var(--dim);display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.edit button:hover,.edit button.on{color:var(--ink)}
.edit .k{margin:0}
.why{margin-top:4px;transition:opacity .15s}
.why.idle{opacity:.45;pointer-events:none}
.why .ask{font-size:13px;color:var(--ink);margin:0 0 10px}
.why .ask span{color:var(--faint)}
.why .need{font-size:11px;color:var(--wait);margin:8px 0 0}
.why .need:empty{display:none}
.why .need.ok{color:var(--dim)}
.go-row{display:flex;gap:10px;align-items:center;margin-top:14px}
.go-row .btn.go{flex:1;height:42px;font-size:13px}
.go-row .back{font-size:11px;color:var(--faint);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rec{margin-top:12px;font-size:10.5px;line-height:1.55;color:var(--faint)}
.rec b{font-weight:400;color:var(--dim)}
.pol{margin-top:16px;display:flex;align-items:baseline;gap:10px;font-size:11px;color:var(--dim)}
.pol .lbl{font-size:10px;color:var(--faint)}
.pol a{margin-left:auto;color:var(--faint)}
.pol a:hover{color:var(--ink)}

/* after a decision: the undo line */
.undo{flex:none;display:flex;align-items:center;gap:16px;height:0;overflow:hidden;padding:0 var(--gut);font-size:12px;color:var(--body);white-space:nowrap;transition:height .2s;
  background:rgba(206,222,240,.035);background-image:linear-gradient(90deg,rgba(206,222,240,.12) 1px,transparent 1px);background-size:3px 1px;background-repeat:repeat-x;background-position:0 100%}
.undo.on{height:38px}
.undo .w{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.undo .t{color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.undo button{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-left:auto}
.undo button .k{margin:0}

/* nothing waiting */
.empty{grid-column:1/-1;max-width:640px;margin:0 auto;padding:60px 0;width:100%}
.empty h2{font:700 30px/1.1 var(--dot);letter-spacing:.04em;margin:0 0 10px;color:var(--ink)}
.empty p{color:var(--dim);margin:0 0 6px}
.done-l{margin-top:26px}
.done-l .r{display:grid;grid-template-columns:120px 150px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid rgba(206,222,240,.08);font-size:12px;align-items:baseline}
.done-l .r .a{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.done-l .r .p{color:var(--body)}
.done-l .r .y{color:var(--ink)}
.empty .more{display:inline-block;margin-top:22px;color:var(--ink);font-size:12px}

/* the phone: the draft scrolls; the three decisions sit under the thumb; the why comes up as a sheet */
.thumb,.sheet,.scrim,.qm{display:none}
@media (max-width:720px){
  body{overflow:hidden}
  .q{display:none}
  .qm{display:flex;flex:none;align-items:center;gap:10px;padding:0 var(--gut);height:44px;font-size:11px;color:var(--faint);
    background-image:linear-gradient(90deg,rgba(206,222,240,.12) 1px,transparent 1px);background-size:3px 1px;background-repeat:repeat-x;background-position:0 100%}
  .qm b{font-weight:400;color:var(--ink)}
  .qm .soon{color:var(--wait)}
  .qm .nav{margin-left:auto;display:flex;gap:4px}
  .qm .nav button{width:36px;height:36px;color:var(--dim);font-size:15px}
  .main{display:flex;flex-direction:column;overflow-y:auto;padding:0 var(--gut) 120px}
  .col{flex:none;min-width:0;width:100%}
  .col.right .ctl{display:none}
  .pv.prop{margin-left:0}
  .thumb{box-shadow:0 -1px 0 rgba(240,180,76,.35)}
  .sheet{border-top-color:rgba(240,180,76,.45)}
  .col.right{order:-1}
  .vh{flex-wrap:wrap;gap:8px 18px}
  .vs{margin-left:0}
  .col.right .facts,.col.right .pol{display:none}
  .col.right .flags + .sec,.col.right > .sec:first-child{margin-top:4px}
  .rule{display:none}
  .col{overflow:visible;padding:14px 0 0}
  .col.right{padding-top:4px}
  .col.right .dec,.col.right .why,.col.right .go-row,.col.right .edit,.col.right .sec.decide,.col.right .rec{display:none}
  .pn{font-size:24px}
  .vh{height:auto}
  .vs{gap:12px}
  .thumb{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;padding:10px var(--gut) calc(12px + env(safe-area-inset-bottom));
    background:#020308;box-shadow:0 -1px 0 rgba(206,222,240,.1);z-index:4}
  .thumb .btn{justify-content:center;background:#04050b}
  .scrim{display:block;position:fixed;inset:0;background:rgba(1,2,6,.6);opacity:0;pointer-events:none;transition:opacity .2s;z-index:7}
  .scrim.on{opacity:1;pointer-events:auto}
  .sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:8;background:#06070d;border-top:1px solid rgba(206,222,240,.18);border-radius:14px 14px 0 0;
    padding:10px var(--gut) calc(14px + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
  .sheet.on{transform:none}
  .sheet .grab{width:36px;height:4px;border-radius:2px;background:rgba(206,222,240,.2);margin:0 auto 14px}
  .sheet .why{margin:0}
  .sheet .chips{gap:8px}
  .sheet .line-in{height:46px}
  .sheet .go-row .btn.go{height:48px}
  .sheet .rec{font-size:10px}
  .why .k,.go-row .k,.line-in .k,.undo .k{display:none}
  .empty{padding:36px 0}
  .done-l .r{grid-template-columns:90px minmax(0,1fr);}
  .done-l .r .y{grid-column:1/-1}
}