/* v8: the roadmap board in the app, matching the public roadmap (pages-h.js) */
/* In progress has its own colour, teal, in both themes */
:root{--prog:#0E7C7B;--prog-tint:#E1F0EF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--prog:#5CCFC6;--prog-tint:rgba(92,207,198,.14)}}
:root[data-theme="dark"]{--prog:#5CCFC6;--prog-tint:rgba(92,207,198,.14)}
.ra-head{display:flex;align-items:center;gap:8px;padding:18px 20px 12px;flex-wrap:wrap}
.ra-head h1{font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.2}
.ra-head .grow{flex:1}
.ra-head .rm-chips{margin-left:10px}
.ra-bar{display:flex;align-items:center;gap:12px;margin:0 20px 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ra-areas{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.ra-areas::-webkit-scrollbar{display:none}
.ra-areas button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:7px;color:var(--t2);white-space:nowrap;flex:none;font-size:13px}
.ra-areas button .ico{width:15px;height:15px;color:var(--t3)}
.ra-areas button span{color:var(--t4);font-size:12px;font-variant-numeric:tabular-nums}
.ra-areas button:hover{background:var(--hover);color:var(--t1)}
.ra-areas button.on{background:var(--raised);box-shadow:0 0 0 1px var(--line-2);color:var(--t1);font-weight:500}
.ra-areas button.on .ico{color:var(--red)}
.ra-tools{display:flex;align-items:center;gap:8px;flex:none}
.ra-tools .searchbox{min-width:210px}

/* lanes and cards */
.ra-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0 20px 24px;align-items:start}
.ra-lane{display:flex;flex-direction:column;gap:8px;min-width:0;border-radius:12px;padding:4px;transition:background .12s,box-shadow .12s}
.ra-lane.over{background:var(--fill);box-shadow:inset 0 0 0 2px var(--line-2)}
.ra-lane[data-s="rev"],.ra-badge[data-s="rev"],.ra-ev[data-s="rev"],.ra-track [data-s="rev"]{--tone:var(--violet);--tint:var(--violet-tint)}
.ra-lane[data-s="plan"],.ra-badge[data-s="plan"],.ra-ev[data-s="plan"],.ra-track [data-s="plan"]{--tone:var(--blue);--tint:var(--blue-tint)}
.ra-lane[data-s="prog"],.ra-badge[data-s="prog"],.ra-ev[data-s="prog"],.ra-track [data-s="prog"]{--tone:var(--prog);--tint:var(--prog-tint)}
.ra-lane[data-s="ship"],.ra-badge[data-s="ship"],.ra-ev[data-s="ship"],.ra-track [data-s="ship"]{--tone:var(--green);--tint:var(--green-tint)}
.ra-lh{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:8px;row-gap:2px;align-items:center;padding:0 2px 8px}
.ra-li{display:grid;place-items:center;color:var(--tone)}
.ra-li .ico{width:17px;height:17px}
.ra-lh b{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.ra-lh small{grid-column:1/-1;color:var(--t3);font-size:12px;line-height:1.3}
.ra-n{color:var(--t3);font-size:12px;font-variant-numeric:tabular-nums}
.ra-cards{display:grid;gap:8px}
.ra-card{display:grid;gap:6px;padding:12px 12px 10px;border-radius:10px;background:var(--sheet);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(20,20,19,.04);cursor:pointer;animation:raIn .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms);outline:0}
.ra-card:hover{box-shadow:0 0 0 1px var(--line-2),0 8px 20px -14px rgba(20,20,19,.35)}
.ra-card:focus-visible{box-shadow:0 0 0 2px var(--ring)}
.ra-card.dragging{opacity:.4}
.ra-board.still .ra-card{animation:none}
@keyframes raIn{from{opacity:0;transform:translateY(8px)}}
.ra-top{display:flex;align-items:center;gap:8px}
.ra-area{display:inline-flex;align-items:center;gap:6px;color:var(--t3);font-size:12px;min-width:0}
.ra-area .ico{width:13px;height:13px}
.ra-votes{margin-left:auto;display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 7px 0 5px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.ra-votes .ico{width:12px;height:12px;color:var(--t3)}
.ra-card h3{font-size:13.5px;font-weight:500;line-height:1.35;letter-spacing:-.008em}
.ra-card p{color:var(--t2);font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ra-prog{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:2px;font-size:11.5px;color:var(--t2)}
.ra-prog i{display:block;height:4px;border-radius:2px;background:var(--fill-2);overflow:hidden}
.ra-prog i::after{content:"";display:block;height:100%;border-radius:2px;background:var(--prog);transform-origin:left;transform:scaleX(var(--p))}
.ra-prog span:last-child{color:var(--t3);font-variant-numeric:tabular-nums}
.ra-prog.nobar{grid-template-columns:auto}.ra-prog.nobar span:last-child{color:var(--t2)}
.ra-foot{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--t3);min-width:0}
.ra-foot .ml{flex:1}
.ra-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:5px;background:var(--fill);color:var(--t2);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.ra-c{display:inline-flex;align-items:center;gap:4px}.ra-c .ico{width:13px;height:13px}
.ra-ready{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-weight:500;white-space:nowrap}
.ra-ready .qmark,.ra-ready svg{width:13px;height:13px}
.ra-av{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-size:9px;font-weight:500;background:var(--fill-2);color:var(--t2);flex:none;overflow:hidden}
.ra-av img{width:100%;height:100%;object-fit:cover}
.ra-av.none{background:none;border:1px dashed var(--line-2);color:var(--t4)}
.ra-av.lg{width:32px;height:32px;font-size:12px}
.ra-empty{padding:16px 12px;border-radius:10px;border:1px dashed var(--line-2);color:var(--t3);font-size:12.5px;text-align:center}
.ra-addrow{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:7px;color:var(--t3);font-size:12.5px}
.ra-addrow:hover{background:var(--hover);color:var(--t1)}
.ra-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border-radius:6px;background:var(--tint);color:var(--tone);font-size:12px;font-weight:500;white-space:nowrap}
.ra-list{padding:0 20px 24px}
.ra-list tr[data-ra-id]{cursor:pointer}
.ra-list tr[data-ra-id]:hover td{background:var(--hover)}
.ra-list .ra-prog{max-width:180px}

/* drawer */
.ra-kick{display:flex;align-items:center;gap:10px;margin-bottom:8px}
/* title and description: click to edit, or the Edit button in the header */
.ra-editable{position:relative;display:block;width:100%;text-align:left;margin:0 -8px;padding:4px 32px 6px 8px;width:calc(100% + 16px);border-radius:8px;color:inherit}
.ra-editable:hover{background:var(--hover)}
.ra-editable .d-title{margin:0}
.ra-pen{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--t3);opacity:0;transition:opacity .12s}
.ra-editable:hover .ra-pen,.ra-editable:focus-visible .ra-pen{opacity:1}
.ra-edit{display:grid;gap:12px;padding:12px;margin:0 -12px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line-2)}
.ra-el{display:grid;gap:5px;font-size:12px;color:var(--t3)}
.ra-el .input{height:auto;padding:8px 10px;font-size:13.5px;line-height:1.5}
.ra-el .ra-et{font-size:17px;font-weight:500;letter-spacing:-.02em;padding:6px 10px}
.ra-el textarea.input{resize:vertical;min-height:72px}
.ra-ef{display:flex;align-items:center;gap:6px}
@media (max-width:760px){.ra-pen{opacity:1}.ra-editbtn{height:32px}}
.ra-title{font-size:21px;letter-spacing:-.03em}
.ra-sum{margin-top:14px}
.ra-h{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:500;margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.ra-h span{color:var(--t3);font-weight:400;font-size:12px}
.ra-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.ra-track li{position:relative}
.ra-track li::before{content:"";position:absolute;top:13px;left:30px;right:-4px;height:2px;background:var(--fill-2)}
.ra-track li:last-child::before{display:none}
.ra-track li.done::before{background:var(--tone);opacity:.45}
.ra-track button{position:relative;display:grid;justify-items:start;gap:6px;width:100%;text-align:left;font-size:12px;color:var(--t3);border-radius:8px}
.ra-track button span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--t4);position:relative;z-index:1;transition:box-shadow .15s}
.ra-track button span .ico{width:14px;height:14px}
.ra-track button b{font-weight:400}
.ra-track button:not(:disabled):hover span{box-shadow:0 0 0 2px var(--tone)}
.ra-track button:not(:disabled):hover b{color:var(--t1)}
.ra-track button:disabled{cursor:default}
.ra-track li.done span{background:var(--tint);color:var(--tone)}.ra-track li.done b{color:var(--t2)}
.ra-track li.now span{background:var(--tone);color:var(--sheet);box-shadow:0 0 0 4px var(--tint)}
.ra-track li.now b{color:var(--t1);font-weight:500}
.ra-work{display:grid;gap:10px}
/* stage: right under the status track while in progress, and in the picker after a drag */
.ra-stage{margin-top:14px;padding:12px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line-2);display:grid;gap:10px}
.ra-stage.ask{box-shadow:0 0 0 1.5px var(--prog);animation:raAsk 1.6s ease-out 1}
@keyframes raAsk{0%{box-shadow:0 0 0 1.5px var(--prog),0 0 0 0 color-mix(in srgb,var(--prog) 30%,transparent)}100%{box-shadow:0 0 0 1.5px var(--prog),0 0 0 8px transparent}}
.ra-sl{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--prog)}
.ra-sl b{font-weight:500;color:var(--t1)}.ra-sl span{color:var(--t3)}
.ra-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ra-stages.col{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ra-stages button{display:grid;gap:2px;text-align:left;padding:8px 10px;border-radius:8px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);min-width:0}
.ra-stages button b{font-weight:500;font-size:13px;color:var(--t1)}
.ra-stages button small{font-size:11.5px;color:var(--t3);line-height:1.35}
.ra-stages button:hover{box-shadow:0 0 0 1px var(--t4)}
.ra-stages button.on{box-shadow:0 0 0 1.5px var(--prog);background:var(--prog-tint)}
.ra-stages button.on b{color:var(--prog)}
.ra-stages.col button{padding:12px 14px}
/* notify the people following an item, offered after every move or stage change */
.ra-after{display:grid;gap:10px;margin-top:14px}.ra-after:empty{display:none}
.ra-after .ra-stage{margin-top:0}
.ra-notify{display:grid;gap:10px;padding:12px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line-2)}
.ra-nh{display:flex;gap:10px;align-items:flex-start}
.ra-nh>.ico{color:var(--red);margin-top:2px;flex:none}
.ra-nh b,.ra-notify.sent b{display:block;font-weight:500;font-size:13px}
.ra-nh span,.ra-notify.sent span{color:var(--t3);font-size:12px;line-height:1.45}
.ra-notify textarea{width:100%;resize:vertical;min-height:62px;padding:8px 10px;border-radius:8px;border:0;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line-2);font:inherit;font-size:13px;line-height:1.5;color:var(--t1);outline:0}
.ra-notify textarea:focus{box-shadow:inset 0 0 0 1px var(--t3)}
.ra-na{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ra-na .btn:disabled{opacity:.45;cursor:default}
.ra-notify.sent{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;background:var(--green-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent)}
.ra-notify.sent>.ico{color:var(--green)}
.ra-ev.mail{align-items:flex-start}.ra-ev.mail .ra-evi{margin-top:1px}
.ra-ev q{display:block;margin-top:4px;padding:6px 10px;border-radius:8px;background:var(--fill);color:var(--t2);quotes:none}
.ra-nstage{display:grid;gap:4px}.ra-nstage[hidden]{display:none}
.ra-nstage .seg{justify-self:start;max-width:100%;overflow-x:auto}
.ra-nstage label{height:26px;padding:0 10px;border-radius:5px;color:var(--t2);font-size:13px;display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap}
.ra-nstage label.on{background:var(--raised);color:var(--t1);font-weight:500;box-shadow:0 0 0 1px var(--line)}
.ra-nstage input{position:absolute;opacity:0;pointer-events:none}
.ra-nstage label:focus-within{box-shadow:0 0 0 2px var(--ring)}
.ra-q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px 14px;border-radius:10px;background:var(--green-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent)}
.ra-q>svg,.ra-q>.qmark{width:18px;height:18px;margin-top:2px}
.ra-q b{display:block;font-weight:500}.ra-q span{color:var(--t2);font-size:12.5px}
.ra-qa{grid-column:2;display:flex;gap:6px;margin-top:4px}
.ra-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line)}
.ra-lk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--blue-tint);color:var(--blue);flex:none}
.ra-lk.github{background:var(--fill);color:var(--t1)}
.ra-lk .ico{width:16px;height:16px}
.ra-lt{flex:1;min-width:0;display:grid}
.ra-lt b{font-weight:500;font-size:13px}.ra-lt span{color:var(--t3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra-meter{height:6px;border-radius:3px;background:var(--fill-2);overflow:hidden}
.ra-meter i{display:block;height:100%;border-radius:3px;background:var(--prog);transform-origin:left;transform:scaleX(var(--p));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ra-mt{display:flex;justify-content:space-between;font-size:12px;color:var(--t2);margin-top:-4px;font-variant-numeric:tabular-nums}
.ra-hint{color:var(--t3);font-size:12px;line-height:1.5}
.ra-checks{display:grid;border-radius:10px;box-shadow:0 0 0 1px var(--line);background:var(--raised);overflow:hidden}
.ra-step,.ra-newstep{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 6px 0 12px;border-bottom:1px solid var(--line);font-size:13px}
.ra-step span{flex:1;min-width:0}
.ra-step.on span{color:var(--t3);text-decoration:line-through;text-decoration-color:var(--t4)}
.ra-tick{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2);color:#fff;flex:none}
.ra-step.on .ra-tick{background:var(--green);box-shadow:none}
.ra-tick.ghost{box-shadow:none;color:var(--t3)}
.ra-x{opacity:0}.ra-step:hover .ra-x,.ra-x:focus-visible{opacity:1}
.ra-newstep{border-bottom:0}
.ra-newstep input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:13px;color:var(--t1);height:34px}
.ra-newstep input::placeholder{color:var(--t3)}
.ra-linkbtn{justify-self:start}
.ra-linkform{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ra-linkform .input{flex:1;min-width:160px}
.ra-more{display:flex;align-items:center;gap:7px;width:100%;height:32px;padding:0 12px;margin-bottom:10px;border-radius:8px;background:var(--fill);color:var(--t2);font-size:12.5px}
.ra-more:hover{color:var(--t1)}
.ra-thread{display:grid;gap:12px}
.ra-ev{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--t2)}
.ra-ev b{font-weight:500;color:var(--t1)}.ra-ev i{font-style:normal;color:var(--t3)}
.ra-ev .ra-evs{color:var(--tone)}
.ra-evi{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--tone);flex:none}
.ra-evi.n{background:var(--fill);color:var(--t2)}
.ra-cm{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px}
.ra-cm>.ra-av{width:24px;height:24px;font-size:10px}
.ra-cb{min-width:0;padding:9px 12px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line)}
.ra-cm.team>.ra-cb{box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 30%,var(--line))}
.ra-cm.internal>.ra-cb{background:var(--amber-tint);box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 35%,transparent)}
.ra-ch{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t3);flex-wrap:wrap}
.ra-ch b{font-weight:500;color:var(--t1);font-size:12.5px}
.ra-ch .badge{height:17px;font-size:11px;padding:0 5px}
.ra-int{display:inline-flex;align-items:center;gap:4px;color:var(--amber);font-weight:500}
.ra-cb p{margin-top:2px;font-size:13px;line-height:1.55;color:var(--t2);overflow-wrap:anywhere}
.ra-rs{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ra-cm.r{grid-template-columns:20px minmax(0,1fr);gap:8px}.ra-cm.r>.ra-av{width:20px;height:20px;font-size:9px}
.ra-cm.r .ra-cb{padding:0;background:none;box-shadow:none}
.ra-compose{margin-top:14px;border-radius:10px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-2);padding:10px 10px 8px 12px}
.ra-compose:focus-within{box-shadow:inset 0 0 0 1px var(--t3)}
.ra-compose.internal{background:var(--amber-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 40%,transparent)}
.ra-compose textarea{display:block;width:100%;resize:vertical;min-height:44px;border:0;outline:0;background:none;font:inherit;font-size:13px;color:var(--t1);line-height:1.5}
.ra-compose textarea::placeholder{color:var(--t3)}
.ra-cf{display:flex;align-items:center;gap:8px;margin-top:6px}
.ra-cf .btn:disabled{opacity:.45;cursor:default}
.ra-side-note{margin-top:10px;font-size:12px;color:var(--t3);line-height:1.5}
.dsplit>.s .prop .select{height:28px}
#modal>form{display:contents}
.ra-nt{height:38px;font-size:15px;font-weight:500}
.ra-nf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ra-nf label{display:grid;gap:4px;font-size:12px;color:var(--t3)}
@media (prefers-reduced-motion:reduce){.ra-card{animation:none}.ra-meter i{transition:none}}

/* narrower: lanes scroll sideways and snap; phone gets larger targets */
@container (max-width:1060px){
 .ra-bar{flex-wrap:wrap}.ra-areas{flex-basis:100%;order:2}.ra-tools{width:100%}.ra-tools .searchbox{flex:1;min-width:0}
 .ra-board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
 .ra-board::-webkit-scrollbar{display:none}
 .ra-lane{flex:0 0 min(300px,82%);scroll-snap-align:start}
 .ra-head .rm-chips{display:none}
}
@container (max-width:640px){
 .ra-head{padding:14px 14px 10px}.ra-bar{margin:0 14px 14px}.ra-board{padding:0 14px 20px;scroll-padding-inline:14px;gap:10px}.ra-list{padding:0 14px 20px}
 .ra-lane{flex-basis:84%}
 .ra-areas button{height:36px}.ra-tools .searchbox{height:36px}
 .ra-nf{grid-template-columns:1fr}
}
@media (max-width:640px){.ra-nf{grid-template-columns:1fr}.ra-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.ra-stage.ask{animation:none}}
@media (max-width:760px){.ra-track button b{font-size:11px}.ra-step,.ra-newstep{min-height:42px}.ra-x{opacity:1}}