/* Tasks → Runs (runs table, side panels, bulk, compare, dataset). The design's classes
   and metrics, ported in the design's own cascade order (v1/v2/v3 concept classes,
   then fb-*, fr-*, then f-*); the console's rn-* rules close the file. */

/* ---- design: v1 · v2 · v3 concept classes the boards reuse ---- */
.v1-mi{justify-content:flex-start}
.v3-fchip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 4px 0 9px;border-radius:3px;border:1px solid var(--pill-on-line);background:var(--pill-on-bg);color:var(--pill-on-fg);font-family:inherit;font-size:12.5px;white-space:nowrap;box-sizing:border-box}
.v3-fchip b{font-weight:500}
.v3-fchip .x{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:3px;color:inherit}
.v3-fchip .x:hover{background:color-mix(in srgb, var(--pill-on-fg) 12%, transparent);text-decoration:none}
.v1-mi .d{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.v2-ab{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;font-size:11px;font-weight:600;flex-shrink:0}
.v2-st{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,1fr) 72px;align-items:center;gap:10px;height:23px;padding:0 12px;font-size:12.5px}
.v2-st+.v2-st{border-top:1px solid var(--line-2)}
.v2-st.hd{height:26px;font-size:11.5px;color:var(--muted);background:var(--panel-2)}
.v2-dhd{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);flex-shrink:0}
.v2-dhd>div{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;font-size:12.5px}
.v2-dhd>div+div,.v2-dr>div+div{box-shadow:inset 1px 0 0 var(--line)}
.v2-dr{display:grid;grid-template-columns:1fr 1fr}
.v2-dc{display:grid;grid-template-columns:40px 18px minmax(0,1fr);font-family:var(--mono);font-size:12px;line-height:21px;min-width:0}
.v2-dc .ln{color:var(--muted);opacity:.65;text-align:right;padding-right:10px}
.v2-dc .mk{color:var(--muted);text-align:center}
.v2-dc .tx{white-space:pre-wrap;padding-right:14px;min-width:0;overflow-wrap:anywhere}
.v2-dc.del{background:var(--bad-fade)}.v2-dc.del .ln,.v2-dc.del .mk{color:var(--bad-fg);opacity:1}
.v2-dc.add{background:var(--ok-fade)}.v2-dc.add .ln,.v2-dc.add .mk{color:var(--ok-fg);opacity:1}
.v2-wd{border-radius:3px;padding:0 1px}
.v2-wd.del{background:var(--bad-line);color:var(--bad-fg)}
.v2-wd.add{background:var(--c-ok-soft);color:var(--ok-fg)}
.v2-fold{display:flex;align-items:center;gap:8px;height:28px;padding:0 14px 0 58px;background:var(--panel-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.v3-views{display:flex;align-items:center;gap:2px;height:44px;padding:0 16px;flex-shrink:0}
.v3-view{height:28px;padding:0 9px;border-radius:3px;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);border:0;background:transparent;font-family:inherit;cursor:pointer;white-space:nowrap}
.v3-view:hover{background:var(--hover);text-decoration:none;color:var(--text)}
.v3-view.on{background:var(--seg-bg);color:var(--text);font-weight:500}
.v3-view .n{font-size:11.5px;color:var(--muted);font-weight:400}
.v3-filters{display:flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.v3-mbar{width:60px;height:6px;border-radius:3px;background:var(--track);display:flex;overflow:hidden;gap:1px;flex-shrink:0}
.v3-mbar i{display:block;height:6px}
.v3-bulk{position:absolute;z-index:5;display:flex;align-items:center;gap:4px;height:44px;padding:0 6px 0 14px;border-radius:4px;background:var(--toast-bg);color:var(--toast-fg);box-shadow:var(--shadow);font-size:13px;white-space:nowrap}
.v3-bulk .b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:3px;border:0;background:transparent;color:var(--toast-fg);font-family:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.v3-bulk .b.hi{background:var(--panel);color:var(--text);font-weight:500}
.v3-bulk .sep{width:1px;height:20px;background:currentColor;opacity:.2;margin:0 4px}
.v3-stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.v3-stat .k{font-size:11.5px;color:var(--muted)}
.v3-stat .v{font-size:19px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.v3-stat .v small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.v3-ico{width:28px;height:28px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center}
.v3-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--info-bg);flex-shrink:0}

/* ---- design: f-bulk.css (fb-*) ---- */
.menu.fb-menu{bottom:calc(100% + 8px);width:320px;white-space:nowrap}
.fb-menu .mi .i{color:var(--muted)}
.fb-menu .mi.hl .i{color:var(--text-2)}
.fb-msep{height:1px;background:var(--line);margin:5px -5px}
.fb-mnote{padding:4px 9px 5px;font-size:11.5px;line-height:1.4;color:var(--muted);white-space:normal}
.fb-menu .mi .go{margin-left:auto;width:14px;height:14px;color:var(--muted)}
.toast.fb-toast{position:absolute;z-index:6;left:16px;bottom:54px;gap:10px;padding:0 6px 0 14px;white-space:nowrap}
.fb-toast .btn{height:30px;padding:0 6px 0 8px;color:var(--toast-link);gap:6px}
.fb-toast .btn:hover{background:color-mix(in srgb,var(--toast-fg) 12%,transparent)}
.fb-toast .kbd{background:transparent;border-color:var(--kbd-inv-line);color:var(--toast-fg)}
.fb-cmp{flex-grow:1;min-height:0;display:flex;flex-direction:column;position:relative}
.fb-ctool{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px 0 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.fb-url{display:inline-flex;align-items:center;gap:7px;margin-left:8px;padding-left:12px;border-left:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--text-2);white-space:nowrap;min-width:0}
.fb-url .s{color:var(--muted)}
.fb-ctool .seg{flex-shrink:0}
.fb-sum{display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:28px;padding:14px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.fb-l{display:flex;flex-direction:column;gap:14px;min-width:0}
.fb-abs{display:flex;flex-direction:column;gap:4px}
.fb-ab{display:flex;align-items:center;gap:8px;height:24px;font-size:13px;white-space:nowrap;min-width:0}
.fb-ab b{font-weight:500}
.fb-ab .id{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.fb-ab .m{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.fb-ab .pr{font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.fb-pick{display:inline-flex;align-items:center;gap:4px;height:24px;margin:0 -2px 0 -4px;padding:0 4px;border:0;border-radius:3px;background:transparent;font-family:inherit;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;white-space:nowrap}
.fb-pick:hover{background:var(--hover)}
.fb-pick .i{width:12px;height:12px;color:var(--muted)}
.fb-means{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fb-mc{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;box-sizing:border-box}
.fb-mc .i{width:13px;height:13px}
.fb-mc s{font-weight:400;opacity:.75}
.fb-mc.info{background:var(--info-bg);color:var(--info-fg)}
.fb-mc.neu{background:var(--neu-bg);color:var(--neu-fg)}
.fb-mc.neu .i{color:var(--muted)}
.fb-pm{font-family:var(--mono);font-size:12px;margin-left:4px;white-space:nowrap}
.fb-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.fb-note b{font-weight:500;color:var(--text-2)}
.card.fb-stats{overflow:hidden;align-self:start}
.fb-stats .v2-st{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 70px;height:24px}
.fb-stats .v2-st.hd{height:28px}
.fb-stats .v2-st>span:nth-child(2),.fb-stats .v2-st>span:nth-child(3){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-hab{display:inline-flex;align-items:center;gap:6px}
.fb-hab .v2-ab{width:16px;height:16px;font-size:10px}
.fb-diff{flex-grow:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.fb-diff>*{flex-shrink:0}
.fb-cmp .v2-dhd>div{height:34px;background:var(--panel-2)}
.fb-cmp .v2-dhd .sub{font-size:12px}
.fb-cmp .v2-fold{padding-left:62px}
.fb-cmp .foot .lk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.fb-cmp .foot .lk .i{width:13px;height:13px}

/* ---- design: f-runs.css (fr-*) ---- */
.fr-split>.f-runs{min-width:0}
.fr-split .f-side .pnl-f{padding-top:5px;padding-bottom:5px}
.fr-sec{display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.fr-sech{display:flex;align-items:center;gap:10px;min-height:22px}
.fr-sech .sub{font-size:12px}
.fr-sech .lk{margin-left:auto}
.fr-prog{display:flex;flex-direction:column;gap:11px;padding:13px 16px 12px;border-radius:4px;background:var(--panel-2);border:1px solid var(--line-2);flex-shrink:0}
.fr-stats{display:grid;grid-template-columns:1.25fr 1.3fr .75fr 1.3fr;gap:16px}
.fr-stats .v3-stat{gap:3px}
.fr-stats .v3-stat .v{font-size:18px}
.fr-bar{height:8px;border-radius:3px;background:var(--track);display:flex;gap:1px;overflow:hidden}
.fr-bar i{display:block;height:8px}
.fr-bar.sm{height:5px;margin:1px 0}
.fr-bar.sm i{height:5px}
.fr-bar i.proj{background:repeating-linear-gradient(135deg,var(--c-muted) 0 2px,transparent 2px 4px)}
.fr-caps{display:grid;grid-template-columns:62px minmax(0,1fr) 138px;align-items:center;column-gap:12px;row-gap:8px}
.fr-caps .k{font-size:12px;color:var(--muted);white-space:nowrap}
.fr-caps .v{font-size:12px;color:var(--muted);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.fr-caps .v b{font-weight:500;color:var(--text)}
.fr-legend{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.fr-legend>span{display:inline-flex;align-items:center;gap:6px}
.fr-legend .dot{width:6px;height:6px}
.fr-legend .end{margin-left:auto;color:var(--muted)}
.fr-legend .end b{font-weight:500;color:var(--text-2)}
.fr-stop{display:flex;align-items:center;gap:12px;flex-shrink:0}
.fr-stop .t{font-size:12.5px;line-height:1.35;color:var(--text-2);min-width:0}
.fr-stop .t b{font-weight:500;color:var(--text)}
.fr-stop .btn.ghost{margin-left:auto;color:var(--link)}
.fr-cause{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 10px 7px 12px;border:1px solid var(--line);border-radius:4px;background:var(--card-bg)}
.fr-cause .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.fr-cause .l1{display:flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap;font-size:13px}
.fr-cause .l1 b{font-weight:600}
.fr-cause .l1 .n{font-weight:600;color:var(--bad-fg);font-variant-numeric:tabular-nums}
.fr-cause .l2{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-cause .l2 .why{font-family:var(--font);font-size:12px;color:var(--text-2)}
.fr-fix .m{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.fr-fix .i{color:var(--muted)}
.fr-list{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--card-bg)}
.fr-list .tr{grid-template-columns:8px minmax(0,1fr) 128px 64px 44px;gap:12px;height:32px;padding:0 12px;font-size:12.5px}
.fr-list .u{font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-list .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-list .m{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.seg.fr-seg button{height:24px;padding:0 8px;gap:5px}
.seg.fr-seg .sub{font-size:11.5px}
.fr-band{flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:12px 20px 12px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.fr-bandh{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);height:16px}
.fr-bandh .sec{font-size:11px}
.fr-pgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fr-pg{display:flex;flex-direction:column;gap:3px;min-width:0;padding:7px 10px 8px;border:1px solid var(--line);border-radius:3px;background:var(--card-bg);box-sizing:border-box;cursor:pointer}
.fr-pg.on{border-color:var(--pill-on-line);box-shadow:0 0 0 3px var(--c1-fade)}
.fr-pg .l1{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px}
.fr-pg .l1 b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fr-pg .l1 .t{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fr-pg .l1 .dot{width:6px;height:6px}
.fr-pg .l2{font-family:var(--mono);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:23px}
.fr-facts{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:0}
.fr-facts .s{color:var(--c-muted)}
.fr-facts .lk{margin-left:auto;font-size:12px}
.fr-acts{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:10px 20px;border-bottom:1px solid var(--line)}
.f-side .tabs.fr-side-tabs{gap:18px}
.fr-side .f-side-b{padding:14px 20px 0;gap:10px;overflow:hidden}
.fr-shotbar{display:flex;align-items:center;gap:10px;flex-shrink:0}
.fr-shotbar .sub{font-size:12px}
.fr-shotbar .btn.ghost{color:var(--text-2)}
.fr-frame{position:relative;flex-grow:1;min-height:0;border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;overflow:hidden;background:var(--panel-2)}
.fr-frame::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,transparent,var(--panel));pointer-events:none}
.tr.fr-dt{height:46px}
.fr-thumb{width:52px;height:32px;border-radius:3px;border:1px solid var(--line);background:var(--card-bg);display:flex;flex-direction:column;gap:2px;padding:2px;box-sizing:border-box;overflow:hidden}
.fr-menu .mi .sub{font-size:12px}
.fr-menu .row{display:flex;align-items:center;gap:10px;height:32px;font-size:13px}
.fr-menu .row>span{flex-grow:1}

/* ---- design: f.css (f-*) ---- */
.f-runs{flex-grow:1;min-height:0;display:flex;flex-direction:column;position:relative}
.f-rows{flex-grow:1;min-height:0;overflow:hidden}
.f-sort{color:var(--text)}
.f-sort .i{width:12px;height:12px;margin-left:2px}
.f-bulk .b{height:32px}
.f-bulk .b[disabled]{opacity:.4;cursor:default}
.f-bulk .b .m{color:var(--muted);font-weight:400}
.f-bulk .b.dng{color:var(--toast-danger)}
.f-live{gap:8px;color:var(--text-2)}
.f-live .sub{font-size:12px}
.f-side{width:620px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;position:relative;z-index:1;border-left:1px solid var(--line);background:var(--panel);box-shadow:-18px 0 36px -26px rgba(20,20,19,.28)}
.f-side-h{display:flex;align-items:center;gap:10px;height:60px;padding:0 10px 0 20px;border-bottom:1px solid var(--line);flex-shrink:0;box-sizing:border-box}
.f-side-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex-grow:1}
.f-side-t .t{display:flex;align-items:center;gap:8px;min-width:0}
.f-side-t .t b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-side-t .sub{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-side .tabs{padding:0 20px;gap:22px}
.f-side-b{flex-grow:1;min-height:0;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.f-side .pnl-f{padding:10px 20px}

/* ---- console: rn-* (what the boards draw static and the console makes work) ---- */
/* The region under the line: views, filters, table, panel, the floating bars. */
.rn-region { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.rn-region .f-rows { overflow: auto; }
/* The Dataset tab's pickers: its columns and its URL filter. */
.rn-fpop { width: 220px; padding: 10px; }
.rn-check { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 6px; border-radius: 3px; font-size: 13px; color: var(--text); cursor: pointer; }
.rn-check:hover { background: var(--hover); }
.rn-fpop-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.search.f-search input { font-size: 13px; }
/* The selection bar: disabled items stay hoverable for their hint. */
.v3-bulk .b { text-decoration: none; }
.v3-bulk .b:hover { background: color-mix(in srgb, var(--toast-fg) 12%, transparent); color: var(--toast-fg); text-decoration: none; }
.v3-bulk .b.hi:hover { background: var(--panel); color: var(--text); opacity: .92; }
.v3-bulk .b.dng:hover { color: var(--toast-danger); }
.v3-bulk .b[aria-disabled="true"] { opacity: .4; cursor: default; }
.v3-bulk .b[aria-disabled="true"]:hover { background: transparent; }
.v3-bulk .b .m:empty { display: none; }
.v3-bulk .b.hi .m { color: var(--muted); }
.v3-bulk[hidden] { display: none; }
.rn-fmts { display: flex; gap: 6px; padding: 2px 9px 6px; }
.rn-emenu { width: 300px; }
.fb-toast { animation: rise 200ms ease-out; }
.fb-toast .btn.ghost { border-color: transparent; background: transparent; }
/* Page bar: the running indicator. */
.rn-live { display: flex; align-items: center; }
/* Panels. */
.rn-lkbtn { border: 0; background: none; padding: 0; font-family: inherit; color: var(--link); cursor: pointer; }
.rn-lkbtn:hover { text-decoration: underline; }
.fr-sech form { display: contents; }
.fr-sech .rn-lkbtn { margin-left: auto; }
.fr-seg > a { height: 24px; padding: 0 8px; gap: 5px; }
.fr-seg > a:hover { text-decoration: none; }
a.tr.rn-prow:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.fr-cause form { display: contents; }
.v3-ico.bad { background: var(--bad-bg); color: var(--bad-fg); }
.v3-ico.warn { background: var(--warn-bg); color: var(--warn-fg); }
.v3-ico.neu { background: var(--neu-bg); color: var(--neu-fg); }
.f-side .tabs .tab .sub { font-size: 12.5px; }
.fr-pg:hover { text-decoration: none; border-color: var(--btn-line); }
.fr-pg.on:hover { border-color: var(--pill-on-line); }
.fr-pg .l1 b { color: var(--text); }
.fr-facts > span { overflow: hidden; text-overflow: ellipsis; }
.fr-acts form { display: contents; }
.fr-side .f-side-b.rn-view { padding-bottom: 14px; }
.fr-side .f-side-b > .empty { flex-grow: 1; }
/* the page's attempts: each try and, for the one that decided it, its stages on a time axis */
.fr-side .rn-atts { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.fr-side .f-side-b > .empty + .rn-atts { flex-grow: 0; max-height: 50%; }
.rn-shot { overflow: auto; border-bottom: 1px solid var(--line); border-radius: 4px; }
.rn-shot::after { display: none; }
.rn-shot img { display: block; width: 100%; height: auto; }
.f-side .pnl-f .sub { overflow: hidden; text-overflow: ellipsis; }
/* Compare: a missing side, the unified view, screenshots side by side. */
.rn-diff { overflow: auto; }
.v2-dc.rn-none { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-2) 6px 7px); }
.v2-dc.rn-uc { grid-template-columns: 40px 40px 18px minmax(0, 1fr); }
.v2-dr[data-rn-change].rn-at > .v2-dc, .v2-dc.rn-uc[data-rn-change].rn-at { box-shadow: inset 2px 0 0 var(--accent); }
.rn-shots { display: grid; grid-template-columns: 1fr 1fr; flex-grow: 1; }
.rn-shot-col { padding: 12px 14px; min-width: 0; }
.rn-shot-col + .rn-shot-col { box-shadow: inset 1px 0 0 var(--line); }
.rn-shot-col img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; }
.fb-ab .fb-pick:hover { text-decoration: none; }
.fb-ctool .seg > a:hover { text-decoration: none; }
.fb-url .ell { min-width: 0; }
/* Dataset. */
.th.fr-dt, .tr.fr-dt { padding: 0 16px; }
a.tr.fr-dt:hover { text-decoration: none; }
.rn-thumb { display: block; padding: 0; object-fit: cover; object-position: top; }
.fr-menu form { display: contents; }
.fr-menu .row { cursor: pointer; }
.fr-menu .mi[disabled] { opacity: .45; cursor: default; }
.rn-foot b{color:var(--text);font-weight:500}

/* the Dataset tab (and Compare) take the list's width; the list waits behind them */
.fr-split:has(> .f-side.wide) > .f-runs{display:none}
.f-side.wide{flex:1 1 auto;width:auto;box-shadow:none}
.f-side.wide .f-side-b{padding:0;gap:0}
.fb-ct{font-size:13.5px;font-weight:600;white-space:nowrap}
.f-side.wide.fb-cmp{flex-direction:column}

/* the side panel, compact: everything of a result fits its width */
.f-side-h{height:48px;gap:8px;padding:0 8px 0 14px}
.f-side-t .t b{font-size:14px}
.f-side .tabs,.f-side .tabs.fr-side-tabs{padding:0 14px;gap:14px}
.f-side .tabs .tab{height:32px;font-size:11px;letter-spacing:.02em}
.f-side .tabs .tab .n,.f-side .tabs .tab .sub{font-size:11px}
.fr-band{gap:6px;padding:7px 14px}
.fr-acts{gap:4px;padding:6px 14px}
.f-side-b{padding:12px 14px;gap:10px}
.fr-side .f-side-b{padding:10px 14px 0}
.fr-side .f-side-b.rn-view{padding-bottom:10px}

/* ---- the runs table: a run a line ----
   Head and rows are flex lines of the same cells at the same widths; the target
   takes what is left. The list is a container: as it narrows (beside a run, under
   the code drawer, a small screen) Took, Cost, then From and ⋯ leave, and under
   520px a run takes two lines: what ran, then where from and its pages; its start,
   time taken and cost at the right. */
.f-runs{container:runs / inline-size}
.f-rt{display:flex;align-items:center;gap:12px;padding:0 14px 0 10px}
.tr.f-rt{height:34px;border-bottom:1px solid var(--line-2)}
.th.f-rt{height:30px}
/* a head cell takes the head's words, not its column's */
.th.f-rt :is(.f-src,.f-pages,.rn-cost,.rn-took,.rn-time){font-size:inherit;color:inherit}
.f-rt .rn-sub,.f-rt .rn-meta{display:contents}
/* a row opens with a link stretched over it; the box, the status (its hint) and ⋯ sit above it */
.f-rt > .rn-open{position:absolute;inset:0;z-index:0;border:0;border-radius:0;padding:0;background:none;cursor:pointer}
.f-rt > .cb,.f-rt > .rn-s,.f-rt > .f-act{position:relative;z-index:1}
.tr.f-rt:has(> .rn-open.cur){background:var(--cur-bg);box-shadow:inset 0 0 0 1px var(--accent)}
/* the box shows on the row's hover, and on every row once one is checked */
.f-rt > .cb,.fb-grp > .cb{flex:none;margin:0;opacity:0;pointer-events:none}
.tr.f-rt:hover > .cb,.th.f-rt:hover > .cb,.fb-grp:hover > .cb,.f-rt > .cb:focus-visible,.fb-grp > .cb:focus-visible,
#rn-runs.rn-picking :is(.f-rt,.fb-grp) > .cb{opacity:1;pointer-events:auto}
@media (hover:none){.f-rt > .cb,.fb-grp > .cb{opacity:1;pointer-events:auto}}
.f-rt > .rn-s{flex:none;width:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.rn-s .i{width:15px;height:15px}
.rn-s.rn-ok{color:var(--ok-dot)}
.rn-s.rn-bad{color:var(--bad-dot)}
.rn-s.rn-warn{color:var(--warn-dot)}
.rn-s.rn-info{color:var(--accent)}
.rn-s.rn-neu{color:var(--muted)}
.f-tgt{flex:1 1 0;display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.f-dom{font-weight:500;flex-shrink:0}
.f-path{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis}
.rn-kind{background:var(--pill-on-bg);color:var(--pill-on-fg);font-weight:400;flex-shrink:0}
.rn-kind .i{width:12px;height:12px}
.f-lbl{height:20px;font-size:11.5px;flex-shrink:0;background:none;border:1px solid var(--line);color:var(--text-2)}
.f-src{flex:none;width:150px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden}
.f-src .i{width:13px;height:13px;color:var(--muted);flex-shrink:0}
.f-pages{flex:none;width:170px;display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap;overflow:hidden}
.f-pages .v3-mbar{width:48px;height:4px}
.f-pages .v3-mbar i{height:4px}
.f-pages .t{overflow:hidden;text-overflow:ellipsis}
.f-pages .t b{font-weight:400;color:var(--bad-fg)}
.f-pages.rn-warn .t,.f-pages.rn-warn .t b{color:var(--warn-fg)}
.f-pages.rn-neu .t,.f-pages.rn-neu .t b{color:var(--muted)}
.rn-cost{flex:none;width:72px;text-align:right;font-size:12.5px}
.rn-cost.m{color:var(--muted)}
.rn-took{flex:none;width:56px;text-align:right;font-size:12.5px;color:var(--text-2)}
.rn-time{flex:none;width:72px;text-align:right;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.rn-flat .rn-time{width:96px}
.f-act{flex:none;width:24px;height:24px;color:var(--muted);opacity:0}
.tr.f-rt:hover > .f-act,.tr.f-rt > .f-act[aria-expanded="true"],.tr.f-rt > .f-act:focus-visible{opacity:1}
@media (hover:none){.f-act{opacity:1}}
#rn-runs [data-col].rn-hide{display:none}
/* the head's filters are the kit's (.flt); the status column is an icon wide */
.rn-s .flt{width:16px}
.th.f-rt > .f-act{opacity:1}
.th .rn-hq{margin-left:2px;max-width:200px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--accent)}
.rn-clear{margin-left:10px;color:var(--link)}
/* day headers (runs.js): the day, its runs, failures and charge */
.fb-grp{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;height:26px;padding:0 14px 0 10px;box-sizing:border-box;background:var(--panel);border-bottom:1px solid var(--line-2);font-size:11.5px;color:var(--muted)}
.fb-grp .l{display:flex;align-items:center;gap:6px;min-width:0;padding-left:28px;white-space:nowrap}
.fb-grp .l b{font-weight:500;color:var(--text-2)}
.fb-grp .l i{font-style:normal}
.fb-grp .l :is(i,.s)::before{content:'·';margin-right:6px}
.fb-grp .l .s{color:var(--info-fg)}
.fb-grp .c{margin-left:auto;white-space:nowrap}
/* a schedule's runs of a day, folded into a row (runs.js) */
.rn-chev{display:inline-flex;color:var(--muted);margin-left:-2px}
.rn-chev .i{width:13px;height:13px}
.rn-sg.open .rn-chev .i{transform:rotate(90deg)}
.tr.f-rt.rn-in{background:var(--panel-2)}
.tr.f-rt.rn-in:hover{background:var(--hover)}
.rn-in > .f-tgt{padding-left:20px}

@container runs (width < 1000px){.f-rt .rn-took{display:none}}
@container runs (width < 860px){.f-rt .rn-cost,.foot .rn-spent{display:none}}
@container runs (width < 720px){
  .f-rt .f-src{display:none}
  .f-rt .f-pages{width:140px}
}
@container runs (width < 520px){
  .th.f-rt{height:32px;gap:10px}
  .th.f-rt > .cb,.th.f-rt .f-pages,.th.f-rt > .rn-meta{display:none}
  .th.f-rt .f-src{display:flex;width:auto}
  .th.f-rt > .rn-time{width:auto;margin-left:auto}
  .tr.f-rt{display:grid;grid-template-columns:16px 16px minmax(0,1fr) auto;grid-template-areas:"cb s t time" "cb s sub meta";column-gap:10px;row-gap:3px;height:auto;min-height:48px;padding:6px 12px 6px 10px}
  .tr.f-rt > .cb{grid-area:cb}
  .tr.f-rt > .rn-s{grid-area:s}
  .tr.f-rt > .f-tgt{grid-area:t}
  .tr.f-rt > .rn-time{grid-area:time;width:auto}
  .tr.f-rt > .f-act{display:none}
  .tr.f-rt > .rn-sub{grid-area:sub;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;padding-left:24px}
  .tr.f-rt > .rn-meta{grid-area:meta;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;justify-self:end}
  .tr.f-rt .f-src,.tr.f-rt .f-pages,.tr.f-rt .rn-cost,.tr.f-rt .rn-took{display:flex;gap:6px;width:auto;font-size:12px;color:var(--muted)}
  .tr.f-rt .f-src,.tr.f-rt .f-pages{flex:0 1 auto;min-width:0}
  .tr.f-rt .f-pages::before,.tr.f-rt .rn-took::after{content:'·'}
  .tr.f-rt .rn-took:empty{display:none}
  .tr.f-rt .f-src.rn-hide + .f-pages::before{content:none}
  .tr.f-rt .f-pages .v3-mbar{width:32px}
  .tr.f-rt .f-pages:not(.rn-warn,.rn-neu) .t{color:var(--text-2)}
  .rn-in > .f-tgt{padding-left:0}
  .fb-grp .l{padding-left:24px}
  .foot .rn-fp,.foot .rn-of,.foot .fsep{display:none}
}

/* beside a run the panel gives the list half the room, down to 440px of its own;
   narrower, the run takes the list's place */
.fr-split > .f-side:not(.wide){width:clamp(440px,50%,620px)}
@container split (width < 880px){
  .fr-split > .f-side:not(.wide){position:absolute;inset:0;z-index:4;width:auto;border-left:0;box-shadow:none}
}

/* the selection bar floats over the list's foot; on a narrow list its buttons keep their icons */
.f-bulk{left:50%;bottom:54px;transform:translateX(-50%);max-width:calc(100% - 16px);overflow-x:auto}
.rn-region{container:region / inline-size}
@container region (width < 760px){
  .f-bulk .b > span:not(.m){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .f-bulk .b{padding:0 8px}
}
.rn-foot{white-space:nowrap}
/* a narrow panel: its facts wrap, its actions and tabs scroll */
.f-side{container:side / inline-size}
@container side (width < 900px){.fb-sum{grid-template-columns:minmax(0,1fr)}}
@container side (width < 560px){
  .fr-facts{flex-wrap:wrap;white-space:normal;row-gap:2px}
  .fr-facts .lk{margin-left:0}
  .fr-acts{overflow-x:auto;scrollbar-width:none}
  .f-side .tabs{overflow-x:auto;scrollbar-width:none;border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
  .f-side .tabs .tab{margin-bottom:0}
  .f-side .pnl-f{flex-wrap:wrap;row-gap:6px}
}