/* Campaigns lane · owned by its build. The list with goal and phase, the
 * Board, the template builder and sequences. Shared parts (g-pill, g-seg,
 * tbl, dcard, bcol) come from app.css and lanes.css; this file adds what is
 * the lane's own. */

/* ------------------------------------------------------------ phase and stage colours */
.cmp-lane{--ph-data:var(--gray); --ph-review:var(--orange); --ph-replicate:var(--teal); --ph-assist:var(--indigo); --ph-automate:var(--green)}
.g-pill.ph{background:color-mix(in srgb, var(--pc) 17%, transparent); color:color-mix(in srgb, var(--pc) 62%, var(--ink-to, white))}
[data-theme="light"] .g-pill.ph{color:color-mix(in srgb, var(--pc) 60%, black)}
.ph-data{--pc:var(--gray)} .ph-review{--pc:var(--orange)} .ph-replicate{--pc:var(--teal)}
.ph-assist{--pc:var(--indigo)} .ph-automate{--pc:var(--green)}

/* one hue, deeper as people get further: listed is grey, won is the full tint */
.cmp-lane{--st0:color-mix(in srgb, var(--t3) 45%, transparent);
  --st1:color-mix(in srgb, var(--tint) 22%, transparent); --st2:color-mix(in srgb, var(--tint) 34%, transparent);
  --st3:color-mix(in srgb, var(--tint) 48%, transparent); --st4:color-mix(in srgb, var(--tint) 62%, transparent);
  --st5:color-mix(in srgb, var(--tint) 76%, transparent); --st6:color-mix(in srgb, var(--tint) 88%, transparent); --st7:var(--green)}
.st-listed{--sc:var(--st0)} .st-requested{--sc:var(--st1)} .st-connected{--sc:var(--st2)} .st-messaged{--sc:var(--st3)}
.st-replied{--sc:var(--st4)} .st-positive{--sc:var(--st5)} .st-meeting{--sc:var(--st6)} .st-won{--sc:var(--st7)}

/* ------------------------------------------------------------ the bar */
.cmp-bar .cmp-scope{max-width:260px; gap:6px; color:var(--t1); font-weight:600}
.cmp-bar .cmp-scope .ell{max-width:220px}
.cmp-bar .g-btn svg{width:13px; height:13px}

/* ------------------------------------------------------------ the lane menu */
/* The views and every campaign sit in the lane menu; the bar keeps its
   segments only on the phone, where the menu folds away. */
.cmp-lane .cmp-bar .cmp-segs{display:none}
.cmp-lm .lm-r .g-dot{width:7px; height:7px}
.cmp-lm .lm-r .gl svg{width:16px; height:16px}

/* ------------------------------------------------------------ today's ceilings */
.cmp-lim{display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; min-height:24px; margin:4px 18px 12px; padding:9px 14px;
  border-radius:var(--r-row); background:var(--fill3); font-size:12.5px}
.cmp-lim > b{font:650 13px/18px var(--sans); color:var(--t1)}
.cmp-lim > .g-pill{margin-left:-10px}
.cmp-lim .lim{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; cursor:default}
.cmp-lim .lim .k{color:var(--t2)}
.cmp-lim .lim .v{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--t1)}
.cmp-trk{position:relative; display:block; width:48px; height:4px; border-radius:2px; background:var(--fill2); overflow:hidden}
.cmp-trk i{position:absolute; inset:0 auto 0 0; border-radius:2px; background:var(--tint); transition:width var(--d-pill) var(--spring)}
.cmp-trk i.near{background:var(--orange)}
.cmp-trk i.full{background:var(--red)}
.cmp-trk.ramp{background:repeating-linear-gradient(135deg, var(--fill2) 0 3px, transparent 3px 6px)}

/* ------------------------------------------------------------ the facet bar */
.cmp-fx{display:none !important}
.cmp-facets{margin:0 14px 6px}
.cmp-facets:empty{display:none}
.cmp-facets.et-facets{gap:4px}
.cmp-facets .et-fb{padding:2px 9px; border-color:transparent; background:transparent; color:var(--t2)}

/* ------------------------------------------------------------ the list */
.cmp-list td{padding-top:11px; padding-bottom:11px}
.cmp-row{animation:rise 340ms var(--spring) backwards; animation-delay:min(calc(var(--i, 0) * 20ms), 260ms)}
.cmp-nm{display:flex; flex-direction:column; gap:1px; min-width:0}
.cmp-nm b{font-weight:600; color:var(--t1)}
.cmp-nm .sub{font-size:12px; color:var(--t2); max-width:280px}
.cmp-goal-td{min-width:190px; width:24%}
.cmp-goal{display:flex; flex-direction:column; gap:6px; min-width:0}
.cmp-goal .row{gap:5px; font-size:12px}
.cmp-goal b{font:650 14px/18px var(--sans); color:var(--t1)}
.cmp-bullet{position:relative; height:6px; border-radius:3px; background:var(--fill2); overflow:visible}
.cmp-bullet i{position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--tint); transition:width var(--d-pill) var(--spring)}
.cmp-bullet.behind i{background:var(--orange)}
.cmp-bullet.met i{background:var(--green)}
.cmp-bullet s{position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; background:var(--t1); opacity:.75}
.cmp-bullet.lg{height:8px; border-radius:4px; margin:12px 0 10px}
.cmp-bullet.lg i{border-radius:4px}
.cmp-ladder-td{min-width:150px; width:18%}
.cmp-ladder{display:flex; height:8px; border-radius:4px; overflow:hidden; gap:1.5px; background:transparent}
.cmp-ladder i{display:block; height:100%; background:var(--sc); min-width:3px}
.cmp-block{font-size:12px; color:var(--t2); white-space:nowrap}
.cmp-block b{color:var(--t1); margin-right:2px}
.cmp-next{display:flex; align-items:center; gap:10px; margin:14px 18px 0; padding:10px 12px 10px 14px; border-radius:var(--r-row);
  background:var(--card); border:1px solid var(--card-line); font-size:13px; flex-wrap:wrap}
.cmp-next .t3{font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.cmp-next .g-btn{margin-left:auto}
.cmp-fold{margin:18px 0 24px}
.cmp-fold summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:8px; padding:6px 18px; font:600 10px/14px var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--t3)}
.cmp-fold summary::-webkit-details-marker{display:none}
.cmp-fold summary::before{content:""; width:5px; height:5px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(-45deg); transition:transform var(--d-state) var(--spring); margin-right:2px}
.cmp-fold[open] summary::before{transform:rotate(45deg) translate(-1px, -1px)}
.cmp-fold summary .n{font-family:var(--mono); letter-spacing:0}
.cmp-fold summary:hover{color:var(--t1)}
.cmp-fold .tbl tbody tr{opacity:.78}

/* ------------------------------------------------------------ the inspector */
.cmp-insp .cmp-meta{gap:6px; margin-bottom:16px}
.cmp-insp .cmp-meta .g-pill svg{width:11px; height:11px}
.cmp-insp .sect > .lab .cmp-add{margin-left:auto; text-transform:none; letter-spacing:0; height:22px; font-weight:500}
.cmp-insp .sect > .lab .cmp-add svg{width:13px; height:13px}
.cmp-goalcard .fig{font:700 28px/32px var(--sans); letter-spacing:-.03em; margin-right:4px}
.cmp-goalfoot{gap:10px; font-size:12px}

.cmp-phase{display:flex; flex-direction:column; gap:12px; padding:14px 16px}
.cmp-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); position:relative}
.cmp-steps::before{content:""; position:absolute; left:10%; right:10%; top:6px; height:2px; background:var(--fill2); border-radius:1px}
.cmp-steps li{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:var(--t3); cursor:help}
.cmp-steps li i{width:14px; height:14px; border-radius:50%; background:var(--glass); border:2px solid var(--fill); position:relative; z-index:1;
  transition:background var(--d-state) var(--spring), border-color var(--d-state) var(--spring)}
.cmp-steps li.done i{background:var(--tint); border-color:var(--tint)}
.cmp-steps li.done{color:var(--t2)}
.cmp-steps li.cur i{background:var(--tint-fill); border-color:var(--tint-fill); box-shadow:0 0 0 4px var(--tint-soft), 0 0 10px color-mix(in srgb, var(--tint) 55%, transparent)}
.cmp-steps li.cur{color:var(--tint-ink); font-weight:650}
.cmp-gate{display:flex; flex-direction:column; gap:8px; padding-top:4px}
.cmp-gate .gh{font:600 12px/16px var(--sans); color:var(--t1); display:flex; gap:8px; align-items:baseline}
.cmp-gate .gh .t3{font-weight:500; font-size:11px}
.gate-row{display:grid; grid-template-columns:130px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:12px}
.gate-row .gl{color:var(--t2)}
.gate-row .gbar{height:6px; border-radius:3px; background:var(--fill2); overflow:hidden}
.gate-row .gbar i{display:block; height:100%; border-radius:3px; background:var(--tint); transition:width var(--d-pill) var(--spring)}
.gate-row.ok .gbar i{background:var(--green)}
.gate-row .gv{font-size:11px; color:var(--t2); min-width:84px; text-align:right}
.gate-row.ok .gv{color:var(--green-ink)}
.cmp-ev{margin:0 -16px; width:calc(100% + 32px); table-layout:fixed}
.cmp-ev td, .cmp-ev th{padding:6px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmp-ev th{font-size:9.5px; letter-spacing:.04em}
.cmp-ev th:first-child, .cmp-ev td:first-child{padding-left:16px; width:86px}
.cmp-ev th:last-child, .cmp-ev td:last-child{padding-right:16px}
.cmp-streak{font-size:12px; gap:6px}
.cmp-streak b{font-size:14px}
.cmp-princ textarea{min-height:76px}
.cmp-princ-read{font-size:12px; display:flex; flex-direction:column; gap:3px}
.cmp-princ-read p{color:var(--t1); line-height:18px}
.cmp-phase-acts{padding-top:2px}
.cmp-phase-acts .g-btn svg{width:12px; height:12px}

.cmp-steps-list .cmp-lrow{display:grid; grid-template-columns:90px minmax(0,1fr) 34px; gap:10px; align-items:center; width:100%; text-align:left; padding:8px 14px}
.cmp-lrow .nm{font-size:12.5px}
.cmp-lrow .lbar{height:6px; border-radius:3px; background:var(--fill3); overflow:hidden}
.cmp-lrow .lbar i{display:block; height:100%; border-radius:3px; background:var(--sc); transition:width var(--d-pill) var(--spring)}
.cmp-lrow .n{text-align:right; font-size:12px; color:var(--t1)}
.cmp-rule{gap:6px; margin-top:10px; color:var(--t3)}
.g-chip.sm{height:22px; padding:0 8px; font-size:11px}

.cmp-rungs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; position:relative}
.cmp-rungs li{display:flex; align-items:center; gap:10px; padding:7px 2px; font-size:12.5px; position:relative}
.cmp-rungs li + li::before{content:""; position:absolute; left:11px; top:-8px; height:16px; width:1.5px; background:var(--sep)}
.cmp-rungs .rs{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--fill2); font-size:11px; color:var(--t1); position:relative; z-index:1}
.cmp-log{display:flex; flex-direction:column; gap:2px}
.cmp-log .row{gap:6px; font-size:12px; padding:5px 0; color:var(--t2)}
.cmp-log .row b{color:var(--t1); font-weight:600}
.cmp-log .row svg{opacity:.6}
.cmp-log .row.undone{text-decoration:line-through; opacity:.6}

/* the inspector is wider here, the goal and phase need the room */
.cmp-lane.cmp-wideinsp .insp.wide{flex-basis:440px; width:440px}

/* forms */
.cmp-goalform{display:flex; flex-direction:column; gap:8px}
.cmp-goalform .lab{font-size:12px; color:var(--t2)}
.cmp-goalform .two3{display:grid; grid-template-columns:70px minmax(0,1fr) minmax(0,1fr); gap:8px}
.form.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cmp-psearch .g-in{width:100%}
.cmp-psearch{margin-bottom:10px}
.cmp-plist{display:flex; flex-direction:column; gap:2px; max-height:46vh; overflow:auto; margin:0 -6px}
.cmp-pick{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; text-align:left; transition:background var(--d-state) var(--spring)}
.cmp-pick:hover{background:var(--fill3)}
.cmp-pick .tt{display:flex; flex-direction:column; min-width:0; flex:1}
.cmp-pick .tt b{font-weight:600}
.cmp-pick .tt .t2{font-size:12px}
.cmp-pick .tick{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--fill); color:transparent;
  transition:background var(--d-state) var(--spring), border-color var(--d-state) var(--spring), color var(--d-state) var(--spring)}
.cmp-pick[aria-pressed="true"]{background:var(--tint-soft)}
.cmp-pick[aria-pressed="true"] .tick{background:var(--tint-fill); border-color:var(--tint-fill); color:#fff}

/* ------------------------------------------------------------ the board */
.cmp-board{gap:10px}
.cmp-board .bcol{flex:0 0 228px; transition:background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring), opacity var(--d-state) var(--spring)}
.cmp-board .bcol.cant{opacity:.45}
.cmp-board .bcol.can{box-shadow:inset 0 0 0 1.5px var(--tint-line)}
.cmp-board .bcol-h{align-items:center}
.cmp-board .sdot{width:8px; height:8px; border-radius:50%; background:var(--sc); flex:0 0 auto}
.cmp-card{gap:8px; padding:10px 11px}
.cmp-card[draggable="false"]{cursor:pointer}
.cmp-card .tt{display:flex; flex-direction:column; min-width:0; flex:1; font-weight:400}
.cmp-card .tt b{font:600 13px/17px var(--sans); color:var(--t1)}
.cmp-card .tt .t2{font-size:11.5px; line-height:15px}
.cmp-card .foot{gap:6px; font-size:11px}
.cmp-card .g-pill{font-size:10.5px; line-height:15px}
.cmp-card .g-pill svg{width:11px; height:11px}
.cmp-card.marked{border-style:dashed}
.cmp-card:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
.cmp-more{font-size:12px; padding:4px 6px}
.armchip{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; font:700 10px/1 var(--mono); background:var(--fill2); color:var(--t1)}
.armchip.lg{width:26px; height:26px; border-radius:8px; font-size:13px}
.armchip.s-live{background:var(--tint-soft); color:var(--tint-ink)}
.armchip.s-paused{background:var(--orange-soft); color:var(--orange-ink)}
.armchip.s-retired{background:var(--fill3); color:var(--t3); text-decoration:line-through}
.arms{display:inline-flex; gap:4px}

/* ------------------------------------------------------------ sequences */
.spine{display:flex; align-items:center; gap:0; flex-wrap:nowrap}
.spine .rung{display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 4px; border-radius:var(--r-full); background:var(--fill3); font-size:11px; color:var(--t2); position:relative}
.spine .rung + .rung{margin-left:14px}
.spine .rung + .rung::before{content:""; position:absolute; left:-14px; width:14px; top:50%; height:1.5px; background:var(--sep)}
.spine .g-chan{width:14px; height:14px; font-size:8px}
.cmp-rungedit{display:flex; flex-direction:column; gap:8px}
.cmp-rungedit .rrow{display:grid; grid-template-columns:26px minmax(0,1fr) 96px 26px 30px; gap:8px; align-items:center}
.cmp-rungedit .rs{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--fill2); font-size:11px}
.cmp-rungedit .dayin{display:flex; align-items:center; gap:6px}
.cmp-rungedit .dayin .g-in{width:56px; text-align:right}

/* ------------------------------------------------------------ templates */
.cmp-fams td{padding-top:11px; padding-bottom:11px}
.cmp-neverbox{padding-top:20px}
.tb-chips{gap:6px}
.nchip{display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 4px 0 9px; border-radius:var(--r-full); font-size:12px;
  background:var(--red-soft); color:var(--red-ink); border:1px solid color-mix(in srgb, var(--red) 22%, transparent)}
.nchip svg{width:11px; height:11px; opacity:.8}
.nchip button{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:inherit; opacity:.7}
.nchip button:hover{opacity:1; background:color-mix(in srgb, var(--red) 20%, transparent)}
.nchip.ws{background:var(--fill3); color:var(--t2); border-color:var(--card-line); padding-right:10px}
.nadd .g-in{height:26px; width:150px; border-radius:var(--r-full); font-size:12px}

/* ------------------------------------------------------------ the builder */
.seg-templates .tb{padding:0 18px 32px}
.tb-head{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:12px 0; margin-bottom:6px;
  background:linear-gradient(var(--sheet) 70%, transparent); -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar)}
.tb-head .g-btn svg{width:12px; height:12px}
.tb-head .g-btn .n{font:500 11px/16px var(--mono); color:var(--t3); margin-left:2px}
.tb-name{font:700 17px/22px var(--sans); letter-spacing:-.02em; color:var(--t1); background:transparent; border:1px solid transparent; border-radius:8px;
  padding:3px 8px; min-width:120px; width:clamp(160px, 28vw, 340px); outline:none; transition:border-color var(--d-state) var(--spring), background var(--d-state) var(--spring)}
.tb-name:hover{border-color:var(--card-line)}
.tb-name:focus{border-color:var(--tint-line); background:var(--fill3)}
.tb-kind{font-size:12px; white-space:nowrap}

.tb-arms{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:18px}
.tb-arms.n1{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)}
.tb-arm{display:flex; flex-direction:column; gap:10px; padding:12px 12px 12px 14px; border-radius:var(--r-card); background:var(--card); border:1px solid var(--card-line);
  box-shadow:inset 0 1px 0 var(--glass-hi); cursor:pointer; min-width:0; text-align:left;
  transition:background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring), transform var(--d-lift) var(--spring)}
.tb-arm:hover{background:var(--card-hover); transform:translateY(-1px)}
.tb-arm[aria-pressed="true"]{box-shadow:var(--shadow-sel); background:var(--card-hover)}
.tb-arm.s-retired{opacity:.62}
.tb-arm .row{gap:8px}
.tb-arm .g-btn.sm{height:24px; padding:0 8px}
.tb-figs{display:flex; gap:14px; font-size:12px; color:var(--t2)}
.tb-figs b{font:650 16px/20px var(--sans); color:var(--t1); margin-right:3px; letter-spacing:-.01em}
.tb-diff{font-size:12px; line-height:16px; min-height:16px}
.tb-addarm{display:flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-card); border:1.5px dashed var(--fill); color:var(--t2);
  min-height:96px; transition:border-color var(--d-state) var(--spring), color var(--d-state) var(--spring), background var(--d-state) var(--spring)}
.tb-addarm:hover{border-color:var(--tint-line); color:var(--tint-ink); background:var(--tint-soft)}
.tb-addarm svg{width:16px; height:16px}

.tb-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px, 380px); gap:18px; align-items:start}
.tb-regions{display:flex; flex-direction:column; gap:6px}
.rg{display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:10px; align-items:start; padding:8px 8px 8px 10px; border-radius:var(--r-row);
  border:1px solid transparent; transition:background var(--d-state) var(--spring), border-color var(--d-state) var(--spring)}
.rg:hover, .rg:focus-within{background:var(--fill3)}
.rg-k{font:600 10px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--t3); padding-top:9px}
.rg-body{min-width:0; display:flex; flex-direction:column; gap:6px}
.rg-ta{min-height:36px; resize:none; overflow:hidden; background:var(--card); line-height:20px}
.rg-tools{display:flex; gap:2px; opacity:0; transition:opacity var(--d-state) var(--spring); padding-top:3px}
.rg:hover .rg-tools, .rg:focus-within .rg-tools{opacity:1}
.rg-tools .icbtn{width:26px; height:26px}
.rg-tools .icbtn[disabled]{opacity:.3; cursor:default}
.rg.bad{border-color:color-mix(in srgb, var(--red) 45%, transparent); background:var(--red-soft)}
.rg.bad .rg-k{color:var(--red-ink)}
.rg-err{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--red-ink)}
.rg-err svg{width:12px; height:12px; flex:0 0 auto}
.slot{display:flex; align-items:center; gap:8px; padding:5px 6px 5px 5px; border-radius:10px; border:1.5px dashed color-mix(in srgb, var(--purple) 55%, transparent);
  background:color-mix(in srgb, var(--purple) 9%, transparent)}
.slot-tag{font:600 12px/16px var(--mono); color:var(--purple-ink); padding:3px 7px; border-radius:7px; background:color-mix(in srgb, var(--purple) 16%, transparent); flex:0 0 auto; cursor:help}
.slot .g-in{flex:1; background:transparent; border-color:transparent; height:28px; padding:0 4px}
.slot .g-in:focus{background:var(--card); border-color:var(--tint-line)}
.varchip{display:inline-flex; align-self:flex-start; align-items:center; height:28px; padding:0 11px; border-radius:var(--r-full); font-size:12.5px; font-weight:600;
  background:var(--tint-soft); color:var(--tint-ink); cursor:help; margin-top:4px}
.tb-add{gap:6px; margin:12px 0 4px 10px}
.tb-add .t3{font:600 10px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; margin-right:4px}
.tb-add .g-chip{height:26px; padding:0 10px; gap:4px; font-size:12px}
.tb-add .g-chip svg{width:12px; height:12px}
.tb-add .g-chip.var{color:var(--tint-ink)}
.tb-never{margin:20px 0 0 10px}

.tb-prev{position:sticky; top:64px; display:flex; flex-direction:column; gap:10px; padding:14px 16px}
.tb-ph .lab{font:600 10px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--t3)}
.tb-person{max-width:220px; gap:7px; color:var(--t1)}
.tb-person .ell{max-width:150px}
.tb-text{white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; line-height:21px; padding:12px 14px; border-radius:16px 16px 16px 5px;
  background:var(--bubble-in); color:var(--t1); min-height:80px}
.pv-var{background:var(--tint-soft); color:var(--tint-ink); border-radius:5px; padding:1px 3px; margin:0 -3px; cursor:help; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.pv-var.empty{background:var(--orange-soft); color:var(--orange-ink)}
.pv-their{border-radius:5px; padding:1px 3px; margin:0 -3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; background:color-mix(in srgb, var(--purple) 14%, transparent); color:var(--purple-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--purple) 35%, transparent); cursor:help}
.pv-their i{font-style:italic}
.pv-their.filled{box-shadow:none}
.tb-pfoot{font-size:11px; gap:8px}

/* ------------------------------------------------------------ desk widths */
/* With the inspector open the lane menu steps aside until the list has room
   for both: the list's columns need about 900px. */
@media (max-width: 1680px) and (min-width: 431px){
  .cmp-lane:has(> .insp:not([hidden])) > .cmp-lm{display:none}
  .cmp-lane:has(> .insp:not([hidden])) > .cmp-lm + .sheet{border-radius:var(--r-pane); border-left-color:var(--glass-line)}
  .cmp-lane:has(> .insp:not([hidden])) .cmp-list :is(.cmp-lad, .cmp-ladder-td, .cmp-own){display:none}
}
@media (max-width: 1280px){
  .tb-grid{grid-template-columns:minmax(0,1fr) 320px}
  .cmp-lane.cmp-wideinsp .insp.wide{flex-basis:400px; width:400px}
}
@media (max-width: 1100px){
  .tb-grid{grid-template-columns:minmax(0,1fr)}
  .tb-prev{position:static}
  .cmp-ladder-td{min-width:110px}
}

/* ------------------------------------------------------------ phone */
@media (max-width: 430px){
  .cmp-lane .cmp-bar .cmp-segs{display:inline-flex}
  .cmp-lim{margin:4px 12px 10px; gap:6px 14px}
  .cmp-lim > b{flex:1 0 100%}
  .cmp-lim > .g-pill{margin-left:0}
  .cmp-facets{margin:0 8px 6px}
  .cmp-bar{gap:8px}
  .cmp-bar .g-seg{order:-1; width:100%; overflow-x:auto; scrollbar-width:none}
  .cmp-bar .g-seg::-webkit-scrollbar{display:none}
  .cmp-bar .g-seg > button{flex:1 0 auto; padding:5px 10px}
  .cmp-bar .g-stats{display:none}
  .cmp-bar .cmp-scope{max-width:60vw}
  .cmp-goal-td{min-width:0; width:44%}
  .cmp-phph{gap:5px; margin-top:5px}
  .cmp-goal .row .mono{display:none}
  .cmp-nm .sub{max-width:44vw}
  .cmp-next{margin:12px 12px 0}
  .cmp-board{flex-direction:row; padding:12px; scroll-snap-type:x mandatory; scroll-padding-inline:12px; overflow-x:auto; min-height:auto}
  .cmp-board .bcol{flex:0 0 78vw; width:auto; scroll-snap-align:start}
  .cmp-lane .scroll.seg-board{overflow-x:hidden}
  .seg-templates .tb{padding:0 12px 28px}
  .tb-head{flex-wrap:wrap; gap:6px}
  .tb-head > [data-tb="back"]{order:0}
  .tb-name{width:100%; order:1; padding-left:0; padding-right:0}
  .tb-kind{order:2}
  .tb-head > .g-pill{order:3}
  .tb-head > .spacer{order:4; flex:1 0 100%; height:0}
  .tb-head > [data-tb="update"], .tb-head > [data-tb="versions"], .tb-head > [data-tb="cancel"], .tb-head > [data-tb="save"]{order:5}
  .tb-head > [data-tb="save"]{margin-left:auto}
  .tb-arms{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:12px; margin:0 -12px 16px; padding:0 12px 4px}
  .tb-arm, .tb-addarm{flex:0 0 78vw; scroll-snap-align:start}
  .rg{grid-template-columns:minmax(0,1fr) auto; padding:8px}
  .rg-k{grid-column:1 / -1; padding-top:0}
  .rg-tools{opacity:1}
  .tb-never, .tb-add{margin-left:0}
  .gate-row{grid-template-columns:100px minmax(0,1fr) auto}
  .cmp-rungedit .rrow{grid-template-columns:24px minmax(0,1fr) 88px 22px 30px; gap:6px}
  .spine{flex-wrap:wrap; row-gap:6px}
}