.md-pre{background:var(--panel2,#0d1117);border:1px solid var(--border2,#30363d);padding:.7rem .9rem;overflow:auto;font-size:.85rem;line-height:1.5;white-space:pre}
.md-pre code{background:none;border:none;padding:0}
/* A wide table SCROLLS within itself (display:block + overflow) instead of forcing the
   whole page wider than the viewport — which on mobile squeezed the text into a narrow
   column with the rest of the page off-screen. width:max-content keeps columns natural. */
.md-table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:.6rem 0}
.md-table th,.md-table td{border:1px solid var(--border2,#30363d);padding:.35rem .55rem;text-align:left;font-size:.9rem;overflow-wrap:break-word}
.md-table th{background:var(--panel,#161b22)}
blockquote{border-left:3px solid var(--border2,#30363d);margin:.6rem 0;padding:.2rem .9rem;color:var(--muted,#8b949e)}

.plan-tags{display:inline-flex;flex-wrap:wrap;gap:var(--sp-1,.25rem);margin-left:.4rem;vertical-align:middle}
.plan-tag.lv-facet-chip{height:1.45rem;padding:0 .55rem;font-size:.7rem;text-decoration:none;gap:var(--sp-1,.25rem)}
a.plan-tag.lv-facet-chip:hover{border-color:var(--muted,#8b949e);color:var(--text-hi,#f0f6fc)}
.plan-tag-filter{margin:.2rem 0 .8rem;font-size:.85rem;color:var(--muted,#8b949e)}
.plan-tag-clear{margin-left:.35rem;font-size:.8rem}
/* Plan-view tag row: label · removable chips · inline add field, all on one line.
   The shared autocomplete field renders its own <label> block, so (exactly as ideas'
   quick-add row does) we hide that label and zero the label margin the global shell
   rule injects — otherwise the add field sits 16px below the chips beside it. */
.plan-tagrow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2,.5rem);margin:.2rem 0 .9rem}
.plan-tagrow-label{color:var(--muted,#8b949e);font-size:.8rem;display:inline-flex;align-items:center;gap:var(--sp-1,.25rem)}
.plan-tagrow-empty{font-size:.8rem}
.plan-tagchip-wrap{display:inline-flex;align-items:center}
.plan-tagdrop{display:inline;margin:0}
.plan-tagdrop button{background:none;border:none;color:var(--muted,#8b949e);cursor:pointer;font-size:.7rem;padding:0 .15rem;line-height:1}
.plan-tagdrop button:hover{color:var(--text-hi,#f0f6fc)}
.plan-tagadd{display:inline-flex;align-items:center;gap:var(--sp-1,.25rem);margin:0}
.plan-tagadd label{margin:0!important}
.plan-tagadd label>span:first-child{display:none}
.plan-tagadd .autocomplete-picker{margin-top:0!important;width:11rem}
.plan-tagadd input{padding:.25rem .5rem!important;font-size:.85rem!important}

.plan-hier h3{font-size:1rem;margin:0 0 .5rem;display:flex;align-items:center;gap:var(--sp-2,.5rem)}
.plan-hier-crumb{margin:.2rem 0 .6rem;font-size:.9rem}
.plan-hier-sub{margin:.2rem 0 .4rem;font-size:.9rem}
.plan-hier-list{margin:.2rem 0 .8rem;padding-left:1.1rem}
.plan-hier-list li{padding:.15rem 0}
.plan-hier-new{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2,.5rem);margin:.5rem 0 0}
.plan-hier-new input[type=text]{flex:1;min-width:14rem}
/* The re-parent picker is the SHARED autocomplete field, which renders its own
   <label> BLOCK (caption above the input). Align the row on flex-end so the Save button
   sits level with the input rather than with the caption, and zero the label margin the
   global shell rule (label{margin:1rem 0}) injects — the same fix ideas' quick-add row
   needed, and the same one the tag row above needs. */
.plan-hier-parent{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-2,.5rem);margin:.7rem 0 0}
.plan-hier-parent label{margin:0!important}
.plan-hier-parent label>span:first-child{color:var(--muted,#8b949e);font-size:.85rem}
.plan-hier-parent .autocomplete-picker{margin-top:.25rem!important;width:24rem;max-width:100%}
.plan-hier-parent input{padding:.35rem .6rem!important;font-size:.9rem!important}
.plan-subchip.lv-facet-chip{height:1.45rem;padding:0 .55rem;font-size:.7rem;text-decoration:none;margin-left:.35rem}
a.plan-subchip.lv-facet-chip:hover{border-color:var(--muted,#8b949e);color:var(--text-hi,#f0f6fc)}

.plan-block h3{font-size:1rem;margin:0 0 .5rem;display:flex;align-items:center;gap:var(--sp-2,.5rem)}
.plan-block-hdr{margin:.35rem 0 .2rem;font-size:.9rem}
.plan-block-list{margin:.2rem 0 .6rem;padding-left:1.1rem}
.plan-block-list li{padding:.15rem 0}
.plan-block-drop{display:inline;margin:0}
.plan-block-drop button{background:none;border:none;color:var(--muted,#8b949e);cursor:pointer;font-size:.75rem;padding:0 .2rem;line-height:1}
.plan-block-drop button:hover{color:var(--text-hi,#f0f6fc)}
/* Same layout treatment as the hierarchy picker: the shared autocomplete renders its
   own <label> BLOCK, so align on flex-end (Save/Add level with the input, not the
   caption) and zero the label margin the global shell rule injects. */
.plan-block-add{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-2,.5rem);margin:.7rem 0 0}
/* The direction radios take the whole line under the picker: each option is a sentence,
   and two sentences side by side get read as one. */
.plan-block-dir{flex-basis:100%;display:flex;flex-direction:column;gap:var(--sp-1,.25rem);border:0;padding:0;margin:.2rem 0 0}
.plan-block-dir legend{padding:0;font-size:.8rem;color:var(--muted,#8b949e)}
.plan-block-dir label{display:flex;align-items:center;gap:var(--sp-2,.5rem);font-size:.85rem;margin:0}
.plan-block-dir input{margin:0}
.plan-block-add label{margin:0!important}
.plan-block-add label>span:first-child{color:var(--muted,#8b949e);font-size:.85rem}
.plan-block-add .autocomplete-picker{margin-top:.25rem!important;width:24rem;max-width:100%}
.plan-block-add input{padding:.35rem .6rem!important;font-size:.9rem!important}
.plan-block-note{font-size:.78rem;margin:.5rem 0 0}

.rf-head{}
.rf-title{margin:.1rem 0 .3rem;font-size:1.15rem;display:flex;align-items:center;gap:var(--sp-2,.5rem);flex-wrap:wrap}
.rf-title a{font-size:1.15rem}
.rf-meta{color:var(--muted);font-size:.85rem;margin:0 0 .5rem}
.rf-card{border:1px solid var(--border,#21262d);padding:1rem 1.1rem;margin:.75rem 0}
.rf-card-h{margin:.1rem 0 .5rem;font-size:1.02rem}
.rf-card-intro{margin:.1rem 0 .6rem;font-size:.9rem}
.rf-actions{display:flex;gap:var(--sp-2,.5rem);align-items:stretch;flex-wrap:wrap;margin-top:1rem}
.rf-actions>.btn,.rf-actions>form{flex:1 1 12rem;margin:0}
.rf-actions>form>.btn{width:100%}
.rf-hint{color:var(--muted);font-size:.88rem;flex:1 1 100%}
.rf-ta{width:100%;box-sizing:border-box;background:var(--panel2,#0d1117);color:var(--text-hi);border:1px solid var(--border2,#30363d);padding:.7rem .8rem;font-size:.92rem;line-height:1.5;resize:vertical}
.rf-ta:focus{outline:none;border-color:var(--primary)}

.rv-queue{min-height:2rem;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--sp-2,.5rem);margin:.2rem 0 .7rem;color:var(--muted);font-size:.86rem}
.rv-prev{grid-column:1;justify-self:start}
.rv-count{grid-column:2;text-align:center}
.rv-next{grid-column:3;justify-self:end}
.rv-meta{color:var(--muted);font-size:.85rem;margin:.2rem 0 .6rem}
.rv-body{max-height:none}
.rv-pushback{border:1px solid var(--border2,#30363d);padding:1rem 1.1rem;margin:1rem 0}
.rv-pushback h3{margin:.1rem 0 .5rem;font-size:1.02rem}
.rv-ta{width:100%;box-sizing:border-box;background:var(--panel2,#0d1117);color:var(--text-hi);border:1px solid var(--border2,#30363d);padding:.7rem .8rem;font-size:.92rem;line-height:1.5;resize:vertical}
.rv-ta:focus{outline:none;border-color:var(--primary)}
.rv-actions{display:flex;gap:var(--sp-2,.5rem);align-items:stretch;flex-wrap:wrap;margin-top:.8rem}
/* Push back / Approve are EQUAL-size, side-by-side, and wrap cleanly on mobile (owner
   request): each is a flex child that grows equally from the same basis; the approve button
   sits in its own <form>, so that form is the flex child and its button fills it. */
.rv-actions>.btn,.rv-actions>form{flex:1 1 12rem;margin:0}
.rv-actions>form>.btn{width:100%}
.rv-h{display:flex;align-items:center;gap:var(--sp-2,.5rem);flex-wrap:wrap;margin:.1rem 0 .3rem}
.rv-h a{font-size:1.15rem}
.rv-h i{font-size:1.05rem;flex:none}
.rv-lazy{min-height:1.4rem}
.rv-addressed{border:1px solid #3fb95055;border-left:4px solid #3fb950;background:var(--panel);margin:.2rem 0 1rem;padding:.7rem .95rem}
.rv-addressed-h{font-weight:600;color:var(--text-hi,#f0f6fc);margin:0 0 .35rem;display:flex;align-items:baseline;gap:var(--sp-2,.5rem);flex-wrap:wrap}
.rv-addressed-round{color:var(--muted,#8b949e);font-size:.78rem;font-weight:400}
.rv-addressed-note{white-space:pre-wrap;margin:0;line-height:1.5}
.rv-addressed-prior{margin:.6rem 0 0}
.rv-addressed-prior summary{cursor:pointer;color:var(--muted,#8b949e);font-size:.82rem}
.rv-addressed-prior ul{list-style:none;margin:.4rem 0 0;padding:0}
.rv-addressed-prior li{padding:.35rem 0;border-top:1px solid var(--border2,#30363d)}
.rv-addressed-prior .rv-addressed-round{display:block;margin-bottom:.15rem}

.rv-none{color:var(--muted);font-style:italic}
.rv-testlinks h3{margin:.1rem 0 .3rem;font-size:1.02rem}
.rv-tl-list{list-style:none;margin:.4rem 0 .7rem;padding:0}
.rv-tl-item{display:flex;align-items:center;gap:var(--sp-2,.5rem);padding:.28rem 0;border-bottom:1px solid var(--border2,#30363d)}
.rv-tl-item:last-child{border-bottom:0}
.rv-tl-item a{word-break:break-all}
.rv-tl-url{color:var(--muted);font-size:.8rem;word-break:break-all}
.rv-tl-del{margin:0 0 0 auto;display:inline-flex;align-items:center}
/* The per-link remove ✕ is a proper inline-flex control vertically centered on the row (was a
   baseline-aligned raw text button that sat off-line — owner-reported "remove misaligned"). */
.rv-tl-x{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:1.7rem;width:1.7rem;flex:none;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer;font-size:.95rem;padding:0}
.rv-tl-x:hover{color:var(--danger,#f85149)}
.rv-tl-add{display:flex;gap:var(--sp-2,.5rem);flex-wrap:wrap;align-items:stretch}
.rv-tl-add input[type=url]{flex:2 1 16rem;min-width:12rem}
.rv-tl-add input[type=text]{flex:1 1 10rem;min-width:8rem}
/* Inputs + the Add button share one control height (var(--control-h)) so the button aligns
   with the "what it tests" field instead of sitting shorter (owner-reported misalignment).
   box-sizing + a matched min-height make them the same box regardless of font/padding. */
.rv-tl-add input{box-sizing:border-box;min-height:var(--control-h);background:var(--panel2,#0d1117);color:var(--text-hi);border:1px solid var(--border2,#30363d);padding:.5rem .6rem;font-size:.9rem}
.rv-tl-add input:focus{outline:none;border-color:var(--primary)}
.rv-tl-add .btn{min-height:var(--control-h);align-self:stretch}

.view-toggle,.set-tabs{display:inline-flex;flex-wrap:wrap;gap:var(--sp-1,.25rem);margin:.2rem 0 1rem;border:1px solid var(--border2);padding:.2rem;background:var(--panel2);border-radius:calc(var(--r) + .2rem)}
.view-toggle .vt-btn,.set-tabs .set-tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2,.5rem);min-height:0;padding:.35rem .8rem;font-size:.85rem;font-weight:600;font-family:inherit;color:var(--muted);text-decoration:none;background:transparent;border:0;cursor:pointer;transition:background .12s ease,color .12s ease}
.view-toggle .vt-btn:hover,.set-tabs .set-tab:hover{color:var(--text);background:transparent}
.view-toggle .vt-btn.vt-active,.set-tabs .set-tab.active{background:var(--panel);color:var(--link)}
@media (max-width:480px){.view-toggle.vt-fill{display:flex;flex-wrap:nowrap;width:100%}.view-toggle.vt-fill .vt-btn{flex:1 1 0;padding:.35rem .4rem;font-size:.8rem;min-width:0}}

/* The active tab exposes a BOX of content: a dashed grey border outlines it on ALL sides
   (owner: "the boundary of the box … on both sides of the content that is exposed by the
   tab element"), separated from the tab strip above by an equal margin. Uniform 1.25rem
   padding keeps the content an equal distance from every edge, and the 1.25rem margin-top
   makes the tabs→box gap match — independent of the tabs' own margin. */
.set-panel{margin:1.25rem 0;border:1px dashed var(--border2,#30363d);padding:1.25rem;border-radius:var(--r-card)}
/* .flat hands that outline DOWN to the panel's segments. A panel whose content is
   already a stack of .card boxes otherwise draws a box inside a box: two borders and
   two sets of padding to express one grouping, and the cards' shadows fight the
   dashed frame for the eye. .flat drops the panel's own frame and gives each direct
   .card the dashed outline instead — same separation between segments, none of the
   nesting, and the panel's 1.25rem of padding back. A card that sets border-color
   inline (the amber username warning, red errors, the green new-secret card) keeps
   that colour: the inline declaration outranks this one, so only the STYLE changes. */
.set-panel.flat{border:0;padding:0}
.set-panel.flat>.card{background:transparent;box-shadow:none;border:1px dashed var(--border2,#30363d);margin:.9rem 0;border-radius:var(--r-card)}
.set-panel.flat>.card:first-child{margin-top:0}
.set-panel.flat>.card:last-child{margin-bottom:0}