/* New search (V3) — ported from the search playground. Scoped to #searchView so it can't
   disturb the in-modal synthesis view or the rest of the workbench. */

/* The overlay/modal/close shell + dark backdrop are owned by search-demo.html's inline
   <style> (shared with the synthesis view). The V3 grid bleeds to the modal edges so the
   aside panel sits flush right. */

/* ── tokens (scoped) ── */
#searchView{--sig:#1C7AFE; --sig-soft:rgba(28,122,254,.06); --sig-dark:#1565d8;
  --ink1:#111E45; --ink2:#4C5880; --ink3:#8893AE; --ink4:#B9C1D6;
  --forest:#0A8C82; --forest-deep:#076b63; --forest-soft:rgba(10,140,130,.07); --forest-line:rgba(10,140,130,.32);
  --matrix:#1FB879; --matrix-deep:#0F6E56; --caution:#E5A33A; --adverse:#DC3E3E;
  --line:rgba(17,30,69,.08); --line-2:rgba(17,30,69,.12);
  --mono:'SUSE Mono',ui-monospace,monospace; --sans:'Onest',system-ui,sans-serif;
  --r-sm:8px; --r-md:12px;}

/* ── layout ── */
#searchView .srch-grid{display:grid; grid-template-columns:1fr 332px;}
#searchView .srch-build{padding:30px 28px 30px;}
#searchView .srch-aside{background:linear-gradient(165deg, rgba(31,184,121,.07), rgba(28,122,254,.04)); padding:30px 22px 26px; border-left:1px solid var(--line);}
#searchView svg{width:15px; height:15px; stroke-width:1.85;}

#searchView .page-kicker{font-family:var(--mono); font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--sig); margin:0 0 7px;}
#searchView .page-title{font-family:var(--sans); font-size:26px; font-weight:700; letter-spacing:-.022em; color:var(--ink1); margin:0 0 6px; line-height:1.12;}
#searchView .page-title em{font-style:normal; font-weight:300; color:var(--sig);}
#searchView .page-sub{font-family:var(--sans); font-size:13px; color:var(--ink2); line-height:1.55; margin:0 0 22px; max-width:46ch;}

/* ── fields ── */
#searchView .f-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); display:block; margin:0 0 6px;}
#searchView .f-cap .req{color:var(--adverse); font-weight:600; text-transform:none; letter-spacing:0; margin-left:4px;}
#searchView .f-cap .opt{color:var(--ink3); text-transform:none; letter-spacing:0; font-weight:500; margin-left:4px;}
#searchView .f-sec{margin-bottom:14px;}
#searchView .inp{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); font-family:var(--sans); font-size:14px; color:var(--ink1); background:#fff; outline:none; transition:border-color .14s, box-shadow .14s, background .14s;}
#searchView .inp:hover{border-color:var(--line-2);}
#searchView .inp:focus{border-color:var(--sig); box-shadow:0 0 0 3px var(--sig-soft); background:var(--sig-soft);}
#searchView .inp.lead{border-color:var(--sig); background:var(--sig-soft); font-weight:600; font-size:15px;}
#searchView .id-top{display:grid; grid-template-columns:1.5fr 1fr; gap:12px; align-items:start;}
#searchView .id-addr{display:grid; grid-template-columns:1.6fr 1fr 58px 86px; gap:10px;}
#searchView .pre{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; transition:border-color .14s, box-shadow .14s;}
#searchView .pre:focus-within{border-color:var(--sig); box-shadow:0 0 0 3px var(--sig-soft);}
#searchView .pre .pfx{padding:0 0 0 14px; font-family:var(--mono); font-size:11.5px; color:var(--ink3);}
#searchView .pre input{border:none; flex:1; padding:12px 14px; font-family:var(--sans); font-size:14px; color:var(--ink1); outline:none; background:transparent;}
#searchView select.inp{appearance:none; -webkit-appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22><path d=%221 1l5 5 5-5%22 stroke=%22%238893AE%22 stroke-width=%221.6%22 fill=%22none%22/></svg>'); background-repeat:no-repeat; background-position:right 14px center;}

/* ── additional settings disclosure ── */
#searchView .disc{border:1px solid var(--line); border-radius:var(--r-md); margin-top:6px; background:#fff; overflow:hidden;}
#searchView .disc-hd{display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--sans);}
#searchView .disc-hd:hover{background:rgba(17,30,69,.02);}
#searchView .disc-ic{width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--sig-soft); color:var(--sig);}
#searchView .disc-ic svg{width:15px; height:15px;}
#searchView .disc-tt{flex:1; min-width:0;}
#searchView .disc-tt b{display:block; font-size:14px; font-weight:600; color:var(--ink1);}
#searchView .disc-care{color:var(--ink3); transition:transform .2s;}
#searchView .disc-care svg{width:16px; height:16px;}
#searchView .disc.open .disc-care{transform:rotate(180deg);}
#searchView .disc-body{display:none; padding:6px 16px 18px; border-top:1px solid var(--line);}
#searchView .disc.open .disc-body{display:block;}
#searchView .disc-row{display:grid; grid-template-columns:180px 1fr; gap:20px; align-items:start; padding-top:14px;}
#searchView .seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
#searchView .seg button{padding:9px 15px; border:none; border-right:1px solid var(--line); background:#fff; font-family:var(--sans); font-size:13px; color:var(--ink2); cursor:pointer;}
#searchView .seg button:last-child{border-right:none;}
#searchView .seg button.on{background:var(--sig-soft); color:var(--sig); font-weight:600;}

/* ── core+ packs ── */
#searchView .cp-hd{display:flex; align-items:center; gap:9px; margin:22px 0 12px;}
#searchView .cp-hd .star{color:var(--forest); display:inline-flex;}
#searchView .cp-hd .star svg{width:17px; height:17px;}
#searchView .cp-hd b{font-size:14.5px; font-weight:600; color:var(--ink1);}
#searchView .v3-chips{display:flex; flex-wrap:wrap; gap:8px;}
#searchView .v3-chip{display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--forest-line); border-radius:999px; background:rgba(10,140,130,.045); cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--forest-deep); white-space:nowrap; transition:background .14s, border-color .14s, box-shadow .14s, color .14s;}
#searchView .v3-chip svg{width:14px; height:14px; color:var(--forest); flex-shrink:0;}
#searchView .v3-chip:hover{background:rgba(10,140,130,.11); border-color:var(--forest);}
#searchView .v3-chip.sel{background:rgba(10,140,130,.15); border-color:var(--forest); color:var(--forest-deep); font-weight:600; box-shadow:inset 0 0 0 1px var(--forest);}
#searchView .v3-chip.sel svg{color:var(--forest);}
#searchView .v3-chip .cfgdot{width:5px; height:5px; border-radius:50%; background:var(--forest); opacity:.5; flex-shrink:0; margin-left:1px;}
#searchView .v3-chip.sel .cfgdot{background:var(--forest-deep); opacity:.9;}
#searchView .v3-chip.locked{border-color:var(--line); color:var(--ink3); cursor:not-allowed; border-style:dashed; background:rgba(17,30,69,.02);}
#searchView .v3-chip.locked svg{color:var(--ink4);}
#searchView .v3-chip.locked:hover{background:rgba(17,30,69,.02); border-color:var(--line);}
#searchView .cp-soonlbl{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin:16px 0 8px;}
#searchView .cp-soon-grid{display:flex; flex-wrap:wrap; gap:7px;}
#searchView .cp-soon-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:rgba(17,30,69,.035); color:var(--ink3); font-size:12.5px; cursor:default;}
#searchView .cp-soon-chip svg{width:13px; height:13px; color:var(--ink4);}

/* ── match banner + start ── */
#searchView .match-banner{display:flex; align-items:center; gap:10px; padding:12px 14px; margin-top:18px; border-radius:var(--r-md); background:linear-gradient(120deg, rgba(30,26,78,.06), rgba(28,122,254,.06)); font-size:13px; color:#1E1A4E;}
#searchView .match-banner .tick{color:var(--sig); display:inline-flex;}
#searchView .match-banner b{background:linear-gradient(120deg,#1E1A4E,#1C7AFE); -webkit-background-clip:text; background-clip:text; color:transparent;}
#searchView .btn-primary{display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:13px 24px; border:none; border-radius:var(--r-md); background:var(--sig); color:#fff; font-family:var(--sans); font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:transform .14s, box-shadow .14s, background .14s;}
#searchView .btn-primary:hover{background:var(--sig-dark); transform:translateY(-1px); box-shadow:0 6px 16px rgba(28,122,254,.30);}

/* ── aside ── */
#searchView .as-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 7px;}
#searchView .as-cap.m{color:var(--matrix-deep);}
#searchView .as-match{font-family:var(--sans); font-weight:700; font-size:32px; line-height:1; letter-spacing:-.022em; color:var(--matrix-deep);}
#searchView .as-match small{font-size:13px; font-weight:500; margin-left:6px;}
#searchView .as-bars{display:flex; gap:4px; margin:11px 0 8px;}
#searchView .as-bars span{flex:1; height:6px; border-radius:100px; background:var(--matrix);}
#searchView .as-conf{font-size:12.5px; color:var(--matrix-deep); font-weight:600; margin:0;}
#searchView .as-hr{border:none; border-top:1px solid var(--line); margin:16px 0 14px;}
#searchView .as-time{display:flex; gap:9px; align-items:flex-start;}
#searchView .as-time .ic{color:var(--sig); flex-shrink:0; margin-top:1px;}
#searchView .as-time .ic svg{width:14px; height:14px;}
#searchView .as-time p{margin:0 0 6px; font-size:12.5px; color:var(--ink2); line-height:1.45; font-weight:500;}
#searchView .as-time small{font-size:11px; color:var(--ink3); line-height:1.5; display:block;}
#searchView .as-time a{color:var(--sig); text-decoration:none; font-weight:500;}

/* ── right-rail config panels ── */
#searchView .v3-panels{margin-top:18px; display:flex; flex-direction:column; gap:12px;}
#searchView .v3-empty{font-size:12px; color:var(--ink3); line-height:1.5; padding:16px 14px; border:1px dashed var(--line-2); border-radius:var(--r-md); text-align:center;}
#searchView .v3-panel{display:none; background:#fff; border:1px solid var(--forest-line); border-radius:var(--r-md); padding:15px; box-shadow:0 12px 40px rgba(17,30,69,.10), 0 2px 8px rgba(17,30,69,.04);}
#searchView .v3-panel.show{display:block;}
#searchView .v3-panel-hd{display:flex; align-items:center; gap:9px; margin-bottom:12px;}
#searchView .v3-panel-hd .pic{width:24px; height:24px; border-radius:6px; background:var(--forest); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
#searchView .v3-panel-hd .pic svg{width:14px; height:14px;}
#searchView .v3-panel-hd b{font-size:13px; font-weight:600; color:var(--ink1);}

/* OSHA depth */
#searchView .osha-help{font-size:12px; color:var(--ink2); line-height:1.5; margin:0 0 12px;}
#searchView .osha-sl{width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:100px; outline:none; background:linear-gradient(90deg,#4FC79B 0%, #E5A33A 52%, #E2706A 100%);}
#searchView .osha-sl::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--adverse); cursor:pointer; box-shadow:0 2px 6px rgba(17,30,69,.22);}
#searchView .osha-sl::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--adverse); cursor:pointer;}
#searchView .osha-stops{display:flex; justify-content:space-between; margin-top:8px;}
#searchView .osha-stops span{font-size:11px; color:var(--ink3);}
#searchView .osha-stops span.on{color:var(--matrix-deep); font-weight:600;}
#searchView .osha-stops span.on.mid{color:var(--caution);}
#searchView .osha-stops span.on.hi{color:var(--adverse);}
#searchView .osha-eta{display:flex; align-items:center; gap:9px; margin-top:12px; padding:11px 13px; border-radius:var(--r-md); background:rgba(17,30,69,.03); font-size:12.5px; color:var(--ink2);}
#searchView .osha-eta svg{width:14px; height:14px; color:var(--ink3);}

/* Business Risk Flags */
#searchView .brf-grid{display:grid; grid-template-columns:1fr; gap:14px;}
#searchView .brf-lbl{font-size:12.5px; font-weight:600; color:var(--ink1); margin:0 0 3px;}
#searchView .brf-hint{font-size:11.5px; color:var(--ink3); line-height:1.45; margin:0 0 8px;}

/* multiselect */
#searchView .ms{position:relative;}
#searchView .ms-field{display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:42px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; cursor:text;}
#searchView .ms-field:focus-within{border-color:var(--sig); box-shadow:0 0 0 3px var(--sig-soft);}
#searchView .ms-ph{font-size:13px; color:var(--ink3);}
#searchView .ms-tag{display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 9px; border-radius:7px; background:var(--sig-soft); color:var(--sig); font-size:12px; font-weight:500;}
#searchView .ms-tag button{border:none; background:none; color:var(--sig); cursor:pointer; display:inline-flex; padding:0; line-height:1;}
#searchView .ms-tag svg{width:13px; height:13px;}
#searchView .ms-pop{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 12px 40px rgba(17,30,69,.12); max-height:230px; overflow:auto; display:none;}
#searchView .ms.open .ms-pop{display:block;}
#searchView .ms-pop-hd{text-align:center; font-size:12px; color:var(--ink3); padding:11px; border-bottom:1px solid var(--line);}
#searchView .ms-opt{display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:13px; color:var(--ink1); cursor:pointer;}
#searchView .ms-opt:hover{background:var(--sig-soft);}
#searchView .ms-opt .box{width:17px; height:17px; border-radius:5px; border:1.5px solid var(--ink4); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
#searchView .ms-opt.sel .box{background:var(--sig); border-color:var(--sig);}
#searchView .ms-opt .box svg{width:11px; height:11px; opacity:0;}
#searchView .ms-opt.sel .box svg{opacity:1;}

@media(max-width:820px){
  #searchView .srch-grid{grid-template-columns:1fr;}
  #searchView .srch-aside{border-left:none; border-top:1px solid var(--line);}
  #searchView .id-top{grid-template-columns:1fr;}
  #searchView .id-addr{grid-template-columns:1fr 1fr;}
}