/* amend.watch's own sidebar and phone top bar (web.sidebar) with a Team section: who's signed in, their teams */
.tenv{font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--am);border:1px dashed var(--am);
 border-radius:3px;padding:0 5px;margin-left:6px;vertical-align:1px}
.twho{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;font-size:13.5px;color:var(--dm)}
.twho b{color:var(--tx);font-weight:600}.twho:empty{display:none}
.sb .twho{padding:6px 8px}.twho .btn{padding:3px 10px;font-size:13px}
.tphone{justify-content:flex-end}@media (min-width:1000px){.tphone{display:none}.ws-hr .tsel{display:none}}
#app{display:grid;gap:18px;align-content:start;min-width:0}
.tnarrow{max-width:460px;width:100%;margin:6vh auto 0;display:grid;gap:14px}
.tnarrow h1{font:600 26px/1.2 var(--sans);letter-spacing:-.4px;margin:0}
.tnarrow p{margin:0}
.fld{width:100%;box-sizing:border-box;font:15px var(--sans);color:var(--tx);background:var(--bg);border:1px solid var(--ln2);
 border-radius:6px;padding:10px 12px;margin:0}
.fld:focus{outline:2px solid var(--cy);outline-offset:1px}
.fld.code{font:600 24px var(--mono);letter-spacing:.3em;text-align:center}
.tform{display:grid;gap:10px}.tform label{font-size:14px;font-weight:500}
.btn[disabled]{opacity:.55;cursor:default}
.btn.wide{justify-content:center;padding:10px 14px}
.lnkb{font:inherit;color:var(--cy);background:none;border:0;padding:0;cursor:pointer}
.lnkb:hover{text-decoration:underline}
.err{color:var(--am);font-size:14px}
.okm{color:var(--gn);font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap}
.ws-h h1{font:600 30px/1.15 var(--sans);letter-spacing:-.5px;margin:0}
.ws-cyc{display:flex;gap:3px;padding:3px;border:1px solid var(--ln2);border-radius:9px;background:var(--p);max-width:100%}
.ws-cyc button{font:inherit;text-align:left;background:none;color:var(--dm);border:0;border-radius:6px;padding:6px 12px;cursor:pointer;display:grid;gap:1px;min-width:0}
.ws-cyc button:hover{background:var(--p2)}
.ws-cyc button b{font:600 14px var(--sans);color:var(--tx)}.ws-cyc button small{font:12px var(--mono)}
.ws-cyc button.on{background:var(--tx);color:var(--bg)}.ws-cyc button.on b{color:var(--bg)}
.ws{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:1240px){.ws{grid-template-columns:240px minmax(0,1fr)}.ws-apts{position:sticky;top:24px}}
.ws-apts{padding:0;overflow:hidden}
.ws-ah{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px 8px;font:600 11px var(--sans);
 text-transform:uppercase;letter-spacing:.07em;color:var(--fn)}
.ws-ah select{font:12px var(--sans);color:var(--dm);background:var(--bg);border:1px solid var(--ln2);border-radius:5px;padding:3px 6px;margin:0}
.ws-al{display:grid;gap:1px;padding:0 6px 6px;max-height:560px;overflow:auto}
@media (max-width:1239px){.ws-al{max-height:250px}}
.ws-a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;text-align:left;font:inherit;color:var(--tx);
 background:none;border:0;border-radius:7px;padding:7px 8px;cursor:pointer;width:100%}
.ws-a:hover{background:var(--p2)}.ws-a.on{background:var(--p2);box-shadow:inset 0 0 0 1px var(--ln2)}
.ws-a b{font:600 13.5px var(--mono)}.ws-a small{grid-column:1;color:var(--dm);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-a .nb{grid-row:1/span 2;grid-column:2;display:flex;gap:3px;justify-content:flex-end}.ws-a .q{grid-row:1/span 2;grid-column:2;color:var(--fn);font-size:12.5px}
.ws-a .ann{font-size:10px;padding:0 5px}.ws-a .hm{color:var(--bg);background:var(--tx);border-color:var(--tx)}
.ws-a .nb b{min-width:21px;height:20px;padding:0 4px;display:grid;place-items:center;border-radius:4px;font:600 11px/1 var(--mono)}
.ws-a .nb-act{color:var(--am);background:var(--amS)}.ws-a .nb-ifr{color:var(--cy);background:var(--cyS)}
.ws-a .nb-fyi{color:var(--dm);background:var(--p);box-shadow:inset 0 0 0 1px var(--ln2)}
.ws-addap{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--ln)}.ws-addap .fld{padding:6px 10px;font-size:14px}
.ws-addap .btn{padding:6px 10px}
.ws-main{min-width:0;display:grid;gap:16px}
.ws-vh{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font:600 20px var(--sans);margin:0}
.ws-vh .airac{font:500 14px var(--mono);color:var(--fn)}
.ws-vh .ann{border-radius:99px;padding:2px 10px;font:500 12px var(--mono);letter-spacing:0;text-transform:none}
.ws-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ws-tools .seg{flex:0 1 auto;gap:2px;padding:3px;border:1px solid var(--ln);border-radius:8px;background:var(--p2);box-shadow:none}
.ws-tools .seg button{border:0;border-radius:5px;padding:4px 10px;font-size:13.5px}
.ws-tools .seg button.on{background:var(--p);box-shadow:0 0 0 1px var(--ln2)}.ws-tools .seg button b{font:500 11.5px var(--mono)}
#ws-tabs button b{font:500 11px/1 var(--mono);color:var(--dm);background:var(--p2);border:1px solid var(--ln);border-radius:99px;padding:3px 6px;margin-left:6px}.ws-tools .fld{flex:1 1 220px;width:auto;padding:7px 10px;font-size:14px}
.ws-pill{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--dm);border:1px solid var(--ln2);border-radius:999px;padding:3px 4px 3px 10px}
.ws-pill button{font:inherit;color:var(--cy);background:none;border:0;cursor:pointer;padding:0 6px}
.lst .gh{background:var(--p2);padding:10px 12px}
.gh .apt{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:0;font:600 14px var(--sans)}
.gh .apt b{font:600 14px/1 var(--mono);border:1px solid var(--ln2);background:var(--p);border-radius:6px;padding:8px 9px;flex:none}
.gh .gt{display:grid;min-width:0;line-height:1.35}.gh .apt small{color:var(--fn);font:400 12.5px var(--sans)}
.gh .gx{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font:400 12.5px var(--mono);flex:none}
.gh .gx .chips{flex-wrap:nowrap}
.lst .gh{flex-wrap:wrap}.gh .apt{flex:1 1 240px;min-width:0}.gh .gx{flex-wrap:wrap;max-width:100%}
.it .why{display:block;color:var(--dm);font-size:13px;margin-top:2px}
.ws-map{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}.ws-map.side{grid-template-columns:minmax(0,1fr) 300px}
.m-col{display:grid;gap:10px;min-width:0}
.m-box{position:relative;width:100%;border:1px solid var(--ln);border-radius:10px;overflow:hidden;background:var(--p2)}
.m-box svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-g{stroke:var(--ln);stroke-width:1}.m-gl{fill:var(--fn);font:11px var(--mono)}
.m-ring{fill:none;stroke:var(--cy);stroke-opacity:.6;stroke-width:1.2;stroke-dasharray:5 4}
.m-rl,.m-l{paint-order:stroke;stroke:var(--p2);stroke-width:3px;stroke-linejoin:round}
.m-rl{fill:var(--cy);font:500 11px var(--mono)}.m-l{fill:var(--tx);font:600 12.5px var(--mono);pointer-events:none}
.m-sc{fill:none;stroke:var(--tx);stroke-width:1.3}.m-sl{fill:var(--dm);font:11px var(--mono)}.m-n{fill:var(--tx)}
.m-dot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border:0;background:transparent;padding:0;display:grid;place-items:center;border-radius:50%;cursor:pointer}
.m-dot::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--p);box-shadow:0 0 0 1.5px var(--dm);transition:transform .15s}
.m-dot.d-action::before{background:var(--am);box-shadow:0 0 0 2px var(--p2)}.m-dot.d-ifr::before{background:var(--cy);box-shadow:0 0 0 2px var(--p2)}
.m-dot.d-fyi::before{background:var(--gy);box-shadow:0 0 0 2px var(--p2)}
.m-dot.home::before{border-radius:2px;transform:rotate(45deg) scale(.92)}
.m-dot:hover::before{transform:scale(1.25)}.m-dot.home:hover::before{transform:rotate(45deg) scale(1.15)}
.m-dot[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--p2),0 0 0 3.5px var(--tx)}
.m-dot:focus-visible{outline:2px solid var(--cy);outline-offset:0}
@media (prefers-reduced-motion:reduce){.m-dot::before{transition:none}}
.lgd{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--dm)}.lgd span{display:inline-flex;align-items:center;gap:6px}
.lgd i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--p);box-shadow:0 0 0 1.5px var(--dm)}
.lgd .lg-a{background:var(--am);box-shadow:none}.lgd .lg-i{background:var(--cy);box-shadow:none}.lgd .lg-f{background:var(--gy);box-shadow:none}
.lgd .lg-h{border-radius:1px;transform:rotate(45deg) scale(.85)}
.lgd .lg-r{width:16px;height:0;border-radius:0;box-shadow:none;background:none;border-top:1.5px dashed var(--cy)}
.m-card{padding:16px;display:grid;gap:12px;min-width:0}
.mc-h{display:flex;align-items:flex-start;gap:12px}.mc-id{font:600 22px/1.15 var(--mono);letter-spacing:-.02em}
.mc-h div{display:flex;flex-direction:column;min-width:0;line-height:1.35}.mc-h small{font-size:13px;color:var(--fn)}
.mc-where{font:13px/1.5 var(--mono);color:var(--dm);margin:0}
.mc-c{display:flex;flex-wrap:wrap;gap:4px}.mc-c .chips{margin-left:0;flex-wrap:wrap}
.mc-list{list-style:none;margin:0;padding:12px 0 0;display:grid;gap:8px;border-top:1px solid var(--ln)}
.mc-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:13.5px}
.mc-list li>span:last-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mc-list .ann{font-size:10px;padding:0 5px}
.mc-act{display:flex;flex-wrap:wrap;gap:8px}.mc-act .btn{padding:6px 12px;font-size:13.5px}
.trow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:12px 16px;border-top:1px solid var(--ln)}
.trow:first-child{border-top:0}.trow b{font:600 14px var(--mono)}.trow small{display:block;color:var(--dm);font-size:13px}
.trow .ops{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:640px){.trow{grid-template-columns:44px minmax(0,1fr)}.trow .ops{grid-column:1/-1;justify-content:flex-start}}
.mini{font:500 13px var(--sans);color:var(--dm);background:none;border:1px solid var(--ln2);border-radius:6px;padding:4px 10px;cursor:pointer}
.mini:hover{color:var(--tx)}.mini.dng:hover{color:var(--am);border-color:var(--am)}
.tsel{font:13px var(--sans);color:var(--tx);background:var(--bg);border:1px solid var(--ln2);border-radius:6px;padding:4px 6px;margin:0;max-width:100%}
.addf{display:flex;gap:8px;flex-wrap:wrap}.addf .fld{width:auto;flex:1 1 200px}
.ws-set .kv select{font:14px var(--sans);color:var(--tx);background:var(--bg);border:1px solid var(--ln2);border-radius:6px;padding:5px 8px;margin:0}
select.tsel,.ws-ah select,.ws-set .kv select{-webkit-appearance:none;appearance:none;padding-left:10px;padding-right:30px;
 cursor:pointer;background-image:linear-gradient(45deg,transparent 38%,currentColor 38%,currentColor 62%,transparent 62%),
 linear-gradient(135deg,transparent 38%,currentColor 38%,currentColor 62%,transparent 62%);
 background-size:5px 5px;background-position:right 17px center,right 12px center;background-repeat:no-repeat}
@media (forced-colors:active){select.tsel,.ws-ah select,.ws-set .kv select{-webkit-appearance:auto;appearance:auto;background-image:none}}
.ws-set .kv:first-child{border-top:0}
.mailv{background:var(--bg);border:1px solid var(--ln);border-radius:8px;overflow:hidden}
.mailv .mh{padding:12px 16px;border-bottom:1px solid var(--ln);font-size:14px;display:grid;gap:3px;background:var(--p)}
.mailv .mh span{color:var(--dm);display:inline-block;width:64px}
.mailv .mb{padding:16px;display:grid;gap:12px;font-size:15px}
.mailv .gl{background:var(--p2);border-radius:8px;padding:10px 12px;display:grid;gap:8px;font-size:14px}
.mailv .gl div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px}
.mailv ul{margin:6px 0 0;padding-left:0;list-style:none;display:grid;gap:6px}
.mailv li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:baseline}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:8px 14px;border-radius:6px;font-size:14px;z-index:60;max-width:calc(100vw - 32px)}
.choice{display:grid;gap:8px}.choice label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--ln);border-radius:8px;padding:10px 12px;background:var(--p);cursor:pointer}
.choice label:has(input:checked){border-color:var(--cy);box-shadow:inset 0 0 0 1px var(--cy)}
.choice input{margin:3px 0 0}.choice small{display:block;color:var(--dm);font-size:13px}
/* labels as soft fills, like the mockup; the email preview keeps the email's own look */
.tapp .ann.act:not(.mailv *){color:var(--am);background:var(--amS);border-color:transparent}
.tapp .ann.ifr:not(.mailv *){color:var(--cy);background:var(--cyS);border-color:transparent}
.tapp .ann.ok:not(.mailv *){color:var(--gn);background:var(--gnS);border-color:transparent}
.ws-hr{display:grid;gap:10px;justify-items:end}@media (max-width:1239px){.ws-hr{justify-items:start}}
.ws-view{display:grid;gap:16px;align-content:start}
.it .k{display:flex;gap:8px;align-items:center}.it .k .ann{font-size:10px;padding:0 5px;letter-spacing:.06em}
.trow b.ini{font:600 14px var(--sans)}
.mailv .mb>div>b{font:600 15px var(--mono)}.mailv .mb>div .chips{display:inline-flex;vertical-align:1px;margin-left:6px}