/* srch.css: owner lane SRCH. The finder and the header search (DR-92, SRCH-SPEC 4, SRCH-COMPONENTS).
   Ported from the approved frames (srch/frames/srch-next.css) onto the app. The DS-1 parts the finder needs (badge, x-btn, count, kbd) are declared here under
   #finder until A-core / ACORE ship them globally; the names are DS-1's (.badge.s.count, .x-btn), so those rules can go the day the global ones land. */
#finder.sx{--count-line:rgb(var(--p-mist) / .14);--btn-s:36px;--btn-m:44px}
/* ---------- DS-1 parts as CF-DS.md specifies them ---------- */
/* badges, DR-66: S 20 / M 24 / L 28; words 500, numbers 600; dot 6; pill */
#finder .badge{display:inline-flex;flex:none;align-items:center;gap:6px;height:24px;padding:0 var(--s-2);border-radius:var(--pill);font:500 var(--fs-1)/24px var(--font);white-space:nowrap}
#finder .badge:is(.s,.sm,.xs){height:20px;gap:var(--s-1);padding:0 6px;font:500 var(--fs-1)/20px var(--font)}
#finder .badge:is(.m,.md){height:24px;padding:0 var(--s-2);font:500 var(--fs-1)/24px var(--font)}
#finder .badge .dot{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
#finder .badge .dot.ring{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
#finder .badge .i{width:12px;height:12px;flex:none}
#finder .badge .i.sx-ti{margin-right:-2px;opacity:.72}
#finder .badge.neutral{background:var(--raised);color:var(--text-2);box-shadow:var(--edge)}
#finder .badge.outline{background:transparent;color:var(--text-2);box-shadow:var(--edge-strong)}
#finder .badge.accent{background:var(--accent-soft);color:var(--accent)}
#finder .badge.green{background:var(--green-soft);color:var(--green)}
#finder .badge.amber{background:var(--amber-soft);color:var(--amber)}
#finder .badge.red{background:var(--red-soft);color:var(--red)}
/* counter, DR-59: #finder .badge.xs.count */
#finder .badge.xs{min-width:20px;justify-content:center;gap:0}   /* FA-1004: .xs is S 20; the type is the one DR-66 counter rule below */
#finder .badge.count{min-width:20px;justify-content:center;background:var(--count-bg);color:var(--text);box-shadow:inset 0 0 0 1px var(--count-line);font:600 var(--fs-1)/20px var(--font);font-variant-numeric:tabular-nums}
/* close, DR-60 #finder .x-btn at S 36 (DR-64 scale), glyph 18 */
#finder .x-btn{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--btn-s);height:var(--btn-s);padding:0;border-radius:50%;background:var(--raised);
  border:1px solid var(--line-strong);color:var(--text-2);cursor:pointer;
  transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
#finder .x-btn .i{width:18px;height:18px}
#finder .x-btn:hover,.x-btn.hov{background:var(--hover);border-color:var(--line-hover);color:var(--text)}
#finder .x-btn:active{background:var(--active);transform:scale(.94)}
/* buttons, DR-64: S 36 / M 44 / L 52, pills, solid buttons with no rim line (depth from fill, inner light and shadow) */
.sx .btn{border-radius:var(--pill)}
  box-shadow:inset 0 10px 14px -10px rgba(255,255,255,.26),0 3px 6px -2px var(--paid-glow);corner-shape:round}
.sx .link,.sx-link{padding:0;border:0;background:none;color:var(--accent);font:500 var(--fs-2)/18px var(--font);text-decoration:none;cursor:pointer}
.sx .link:hover,.sx-link:hover{color:var(--text);text-decoration:none}

/* ---------- dialog frame: head, scope, body (no key hints row, DR-67.1) ---------- */
#finder.sx{grid-template-rows:auto auto minmax(0,1fr)}
#finder.sx .f-head{max-width:960px;padding:var(--s-7) 0 0;gap:var(--s-3);align-items:center}

/* C1 finder head field (52): the finder's own head, not a DS-1 .sfield size (CF-DS.md:799); icon box centred on the text line (DR-58) */
.sx-field{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-3);height:52px;padding:0 14px 0 var(--s-4);border-radius:var(--pill);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--hl-top);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.sx-field.on{border-color:var(--focus);box-shadow:var(--ring-field)}
.sx-field > .i{width:20px;height:20px;flex:none;color:var(--text-3)}
#finder.sx .f-head .sx-field input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;outline:none;color:var(--text);font:400 var(--fs-5)/28px var(--font)!important}
.sx-field input::placeholder{color:var(--text-3)}
.sx-field .icon-btn{flex:none}

/* scope row: C2 brand tabs (DS-1 .subtabs, the Covers tabs) + result summary */
.sx-scope{display:flex;align-items:center;gap:var(--s-4);max-width:960px;width:100%;min-height:68px;margin:0 auto;padding:var(--s-4) 0 var(--s-3);border-bottom:1px solid var(--line)}
.sx-scope .subtabs{margin:0;max-width:100%}
.sx-tabs .subtab{padding:0 14px;white-space:nowrap}
.sx-tabs .subtab.br{padding:0 14px 0 var(--s-2)}
.sx-tabs .subtab .bt{--s:18px;border-radius:var(--r-xs)}
.sx-tabs .subtab .sx-life{display:inline-flex;align-items:center;width:14px;height:14px;margin-left:-2px;color:var(--amber)}
.sx-tabs .subtab .sx-life .i{width:14px;height:14px}
.sx-tabs .subtab .nm{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.sx-tabs .subtab.sx-moretab .i{width:14px;height:14px;color:var(--text-3)}
.sx-tabs .subtab.sx-moretab[aria-expanded=true]{background:var(--raised);color:var(--text)}
.sx-sum{display:flex;align-items:center;gap:var(--s-1);margin:0 0 0 auto;color:var(--text-2);font:500 var(--fs-2)/18px var(--font);white-space:nowrap}
.sx-sum b{color:var(--text);font:500 var(--fs-2)/18px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sx-sum .spin{width:14px;height:14px;margin-right:var(--s-1);border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);animation:spin var(--loop-spin) linear infinite}
.sx-i{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;border-radius:50%;color:var(--text-3)}
.sx-i .i{width:16px;height:16px}
.sx-one{margin:0;color:var(--text-2);font:500 var(--fs-2)/18px var(--font)}
.sx-one b{color:var(--text);font-weight:600}

/* body, DR-67.3: list 520 + peek 416 (was 560 + 320), so the two halves balance */
#finder.sx .p2-fb{grid-template-columns:minmax(0,1fr) 416px;gap:var(--s-6);max-width:960px;grid-template-rows:minmax(0,1fr);padding:var(--s-3) 0 var(--s-6)}
.sx .p2-fsl{padding-right:6px}
.sx .p2-fsl .f-group .d-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3) 6px;font:600 var(--fs-2)/18px var(--font);color:var(--text-2)}
.sx .p2-fsl .f-group .d-h.stuck{background:linear-gradient(var(--surface) 70%,transparent)}  /* sticky head: today's .stuck fade, kept */
.sx .p2-fsl .f-group + .f-group{margin-top:var(--s-3)}
.sx .p2-fsl .f-group > .sx-alert + .sx-row{margin-top:var(--s-1)}
.sx-hl{margin-left:auto;padding:0;border:0;background:none;color:var(--accent);font:500 var(--fs-1)/16px var(--font)}
/* status dot in the group head: one per group, the word sits next to it */
.sx-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--text-3)}
.sx-dot.d-review{background:var(--accent)}
.sx-dot.d-rework{background:var(--amber)}
.sx-dot.d-progress{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)}
.sx-dot.d-approved{background:var(--green)}
.sx-dot.d-standard{background:transparent;box-shadow:inset 0 0 0 2px var(--text-2)}
.sx-dot.d-none{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.sx-dot.d-removed{background:var(--text-3);opacity:.55}
.sx-dot.d-setup{background:var(--amber)}

/* C3 result row: hover --raised (MINOR 1), selected --active + line; colour change on mouse only, none on keys */
.sx-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:64px;padding:var(--s-1) var(--s-3) var(--s-1) 10px;border:0;
  border-radius:var(--r-3);background:transparent;text-align:left;color:var(--text);cursor:pointer;transition:background-color var(--dur-1) var(--ease)}
.sx-row:hover,.sx-row.hov{background:var(--raised)}
.sx-row:active{background:var(--hover)}
.sx-row[aria-selected=true]{background:var(--active);box-shadow:var(--edge-strong)}
.sx-row .ftitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 var(--fs-3)/20px var(--font)}
.sx-row .fmeta{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text-2);font:400 var(--fs-1)/16px var(--font)}
.sx-row .fmeta span{overflow:hidden;text-overflow:ellipsis}
.sx-row .fmeta .warn{color:var(--amber)}
.sx-act{display:none;align-items:center;gap:var(--s-2);color:var(--text-2);font:500 var(--fs-1)/16px var(--font);white-space:nowrap}
.sx-row[aria-selected=true] .sx-act{display:inline-flex}
.sx-more{display:flex;align-items:center;gap:6px;width:100%;height:36px;padding:0 var(--s-3) 0 88px;border:0;border-radius:var(--r-3);background:none;color:var(--accent);font:500 var(--fs-2)/18px var(--font);text-align:left;text-decoration:none}
.sx-more .i{width:16px;height:16px}

/* C4 cover thumbnail: own, else standard (marked), else a drawn plate; never a broken image */
.sx-th{position:relative;display:grid;place-items:center;width:40px;height:54px;margin:0 auto;border-radius:var(--r-xs);overflow:hidden;background:var(--surface)}
.sx-th.h{width:64px;height:48px}
.sx-th::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line-hi);pointer-events:none}
.sx-th img{display:block;width:100%;height:100%;object-fit:cover}
.sx-th .sx-std{position:absolute;right:2px;bottom:2px;z-index:1;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--on-image);box-shadow:inset 0 0 0 1px var(--hl-2);color:var(--text)}
.sx-th .sx-std .i{width:10px;height:10px}
.sx-th.none,.sx-th.failed{background:var(--hatch),var(--surface)}
.sx-th.none .i,.sx-th.failed .i{width:16px;height:16px;color:var(--text-3)}
.sx-th.failed .i{color:var(--text-2)}
.sx-th.off img{opacity:.45;filter:grayscale(.7)}
.sx-th.sk{position:relative;overflow:hidden}

/* C5 peek, DR-67.2/.3: a full-width stage holds the cover at today's size; one state badge by the name; no sentences */
.sx-fp{--cov-h:clamp(240px,calc(100dvh - 450px),427px);gap:0;min-height:0;overflow-y:auto;scrollbar-width:none}
.sx-fp > *{flex:none}
.sx-stage{position:relative;flex:none;display:grid;place-items:center;padding:var(--s-3);border-radius:var(--r-4);background:var(--surface);box-shadow:var(--edge)}
.sx-pic{position:relative;height:var(--cov-h);aspect-ratio:3/4;border-radius:var(--r-3);overflow:hidden;background:var(--raised);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-2)}
.sx-stage.h .sx-pic{width:100%;height:auto;aspect-ratio:4/3}
.sx-pic img{display:block;width:100%;height:100%;object-fit:cover}
.sx-pic.none,.sx-pic.failed{display:grid;place-content:center;justify-items:center;gap:var(--s-2);padding:var(--s-6);background:var(--hatch),var(--surface);box-shadow:var(--edge-strong);text-align:center}
.sx-pic.none > .i{width:32px;height:32px;color:var(--text-3)}
.sx-pic.failed > .i{width:28px;height:28px;color:var(--text-2)}
.sx-pic.failed b{font:600 var(--fs-3)/20px var(--font);color:var(--text-2)}
.sx-pic.off img{opacity:.45;filter:grayscale(.7)}
.sx-pic.sk{box-shadow:none}
.sx-th-row{display:flex;align-items:flex-start;gap:var(--s-2);margin-top:var(--s-4)}
.sx-fp .p2-fpt{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font:600 var(--fs-4)/24px var(--font)}
.sx-th-row .icon-btn{width:var(--btn-s);height:var(--btn-s);margin:-6px -6px 0 0}
.sx-meta{display:flex;align-items:center;gap:var(--s-2);min-width:0;margin-top:var(--s-2)}
.sx-meta .prov{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font:400 var(--fs-2)/18px var(--font)}
.sx-go{width:100%;margin-top:var(--s-4);justify-content:center}
.sx-sec{display:flex;justify-content:center;align-items:center;gap:6px;height:32px;margin:var(--s-1) 0 0}
.sx-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;color:var(--text-2);font:400 var(--fs-2)/18px var(--font)}
.sx-note .i{width:16px;height:16px;flex:none;color:var(--text-3)}
.sx-ob{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line-soft)}
.sx-ob-l{flex:0 0 100%;margin:0;color:var(--text-3);font:500 var(--fs-1)/16px var(--font)}
.sx-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 var(--s-1);border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font:400 var(--fs-1)/16px var(--font);white-space:nowrap}
.sx-chip .bt{--s:16px;border-radius:var(--r-xs)}
.sx-chip b{font-weight:500;color:var(--text)}

/* C6 brand marks (All brands tab): tile + state dot per brand */
.sx-marks{display:flex;align-items:center;gap:var(--s-2)}
.sx-mk{position:relative;display:grid;place-items:center}
.sx-mk .bt{--s:20px;border-radius:var(--r-1)}
.sx-mk.none .bt{opacity:.3;filter:grayscale(1)}
.sx-mk.setup .bt{opacity:.45}
.sx-mk i{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;box-shadow:var(--ring-gap-bg)}
.sx-row[aria-selected=true] .sx-mk i{box-shadow:0 0 0 2px var(--active)}
.sx-mk i.own{background:var(--green)}
.sx-mk i.std{background:var(--bg);box-shadow:var(--ring-gap-bg),inset 0 0 0 2px var(--text-2)}
.sx-mk i.work{background:var(--accent)}
.sx-mk i.setup{background:var(--amber)}
.sx-pb{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:var(--s-4);padding:6px;border-radius:var(--r-3);background:var(--surface);box-shadow:var(--edge)}
.sx-pb-r{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:var(--s-2);min-height:36px;padding:0 6px 0 var(--s-2);border-radius:var(--r-2)}
.sx-pb-r .bt{--s:20px;border-radius:var(--r-1)}
.sx-pb-r b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 var(--fs-2)/18px var(--font);color:var(--text)}
.sx-pb-r.cur{background:var(--raised)}

/* states */
.sx-empty .d-h{display:flex;align-items:center;gap:var(--s-2)}
.sx-empty .d-h .i{width:14px;height:14px;color:var(--text-3)}
.sx-recent{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:2px var(--s-3) var(--s-2)}
.sx-q{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s-3) 0 10px;border:0;border-radius:var(--pill);background:var(--surface);box-shadow:var(--edge);color:var(--text-2);font:500 var(--fs-2)/18px var(--font)}
.sx-q .i{width:14px;height:14px;color:var(--text-3)}
.sx-sk{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:var(--s-1) var(--s-3) var(--s-1) 10px}
.sx-sk .sk.th{width:40px;height:54px;margin:0 auto;border-radius:var(--r-xs)}
.sx-sk .sk.th.h{width:64px;height:48px}
.sx-sk .ln{display:grid;gap:var(--s-2)}
.sx-sk .ln .sk{height:12px;border-radius:var(--r-1)}
.sx-sk .mk{display:flex;gap:var(--s-2)}
.sx-sk .mk .sk{width:20px;height:20px;border-radius:var(--r-1)}
.sx-fp .sk-ln{height:14px;border-radius:var(--r-1)}
.sx-alert{margin:0 0 var(--s-3)}
/* empty and error states, DR-67 addition: art, title, actions; no paragraph */
#finder.sx .p2-fbn{grid-template-columns:minmax(0,1fr);max-width:none;height:100%}
.sx-none{display:grid;place-content:center;justify-items:center;gap:0;height:100%;padding:var(--s-6) var(--s-4) 72px;text-align:center}
.sx-none h2{margin:var(--s-5) 0 0;font:600 var(--fs-4b)/24px var(--font);color:var(--text)}
.sx-none .acts{display:flex;gap:var(--s-2);margin-top:var(--s-5)}
.sx-art{position:relative;width:132px;height:96px}
.sx-art span{position:absolute;top:8px;width:56px;height:76px;border-radius:var(--r-sm);background:var(--hatch),var(--surface);box-shadow:var(--edge-strong)}
.sx-art span:nth-child(1){left:6px;rotate:-10deg}
.sx-art span:nth-child(2){right:6px;rotate:10deg}
.sx-art span:nth-child(3){left:38px;top:2px;display:grid;place-items:center;background:var(--raised);box-shadow:var(--edge-hover),var(--shadow-2)}
.sx-art span:nth-child(3) .i{width:24px;height:24px;color:var(--text-3)}
.sx-art.err span:nth-child(3) .i{color:var(--amber)}

/* menus: the tabs' More (C2b) and alternative B's scope menu */
.sx-menu{position:absolute;z-index:var(--z-menu);width:280px;padding:6px;border-radius:var(--r-4);background:var(--raised);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-3)}
.sx-menu .mi{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-2);color:var(--text);font:500 var(--fs-2)/18px var(--font)}
.sx-menu .mi .bt{--s:24px;border-radius:var(--r-1)}
.sx-menu .mi > .i{width:16px;height:16px;color:var(--accent)}
.sx-menu .mi.hov{background:var(--hover)}
.sx-menu .mi .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-menu .mi .ic{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-1);background:var(--surface);box-shadow:var(--edge);color:var(--text-2)}
.sx-menu .mi .ic .i{width:14px;height:14px}
.sx-menu hr{margin:6px var(--s-1);border:0;border-top:1px solid var(--line)}
.sx-menu .lbl{padding:6px 10px var(--s-1);color:var(--text-3);font:500 var(--fs-1)/16px var(--font)}

/* alternative B: scope dropdown (the Catalogue's brand view picker) */
.sx-scopebtn{display:inline-flex;align-items:center;gap:var(--s-2);height:52px;padding:0 14px 0 var(--s-3);border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--text);font:500 var(--fs-3)/20px var(--font);white-space:nowrap}
.sx-scopebtn .bt{--s:24px;border-radius:var(--r-1)}
.sx-scopebtn .i{width:16px;height:16px;color:var(--text-3)}
.sx-scopebtn.on{border-color:var(--line-strong);background:var(--raised)}

/* the top bar trigger: the set state that filters the board (kept from today, index.html:576-581) */

.sx .p2-fsl.more-below{-webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
/* short windows (1280x800 and below): tighter peek rhythm so the cover stays large and nothing is cut */
@media (max-height:820px){.sx-stage{padding:10px}.sx-th-row{margin-top:var(--s-3)}.sx-go{margin-top:var(--s-3)}.sx-ob{margin-top:var(--s-3);padding-top:var(--s-2)}.sx-note{margin-top:var(--s-2)}}