/* Lineup's trade partner page (index.html). Public, its own navy band (the
   region chart's title band), no shell, white page, always light. The chart is chart.css. Phone rules are at the end. */
:root{
  --navy:#0a2540; --blue:#0057b8; --blue-600:#0064d2; --blue-050:#eaf2fc;
  --ink:#1a2433; --muted:#5b6b7f; --line:#e3e8ef; --bg:#fff; --soft:#f5f7fa; --card:#fff;
  --good:#1a8f57; --bad:#b3261e; --btn-ink:#fff;
  --amber-bg:#fff4d6; --amber-line:#e8c86a; --amber-ink:#7a5b00;
  --search-bg:#fffbe6; --search-line:#e8c86a; --search-dim:#6b5d2e;
  --wire:#a9bdd6; --wire-on:#0057b8; --wire-dot:#0057b8;
  --open-bg:#fffaf0; --open-line:#e0a12e; --open-ink:#8a5a00;
  --shadow:0 1px 3px rgba(10,37,64,.08),0 8px 24px rgba(10,37,64,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:14px;line-height:1.45;color:var(--ink);background:var(--bg);overflow-x:hidden}
button,input{font:inherit;line-height:1.3;color:inherit}
button{cursor:pointer}
a{color:var(--blue)}
:where(button,a,input,summary,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}
.lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hint{color:var(--muted);font-size:12.5px}

/* the band: the region's title band, with the division buttons */
.band{background:#0a2540;color:#fff;border-bottom:3px solid #0057b8;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.band-in{max-width:1280px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto}
.brand img{width:40px;height:40px;display:block;flex:none}
.brand .pt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand .eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8fb4e3}
.brand .pt b{font-size:24px;letter-spacing:-.01em}
.brand #pSub{font-size:13px;color:#c9d6e6;margin-top:2px}
.onnavy{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:6px 11px;font-size:13px;font-weight:600;min-height:34px}
.onnavy:hover{background:rgba(255,255,255,.2)}
.onnavy:focus-visible{outline-color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--blue);border-radius:10px;padding:10px 15px;background:var(--blue);
  color:var(--btn-ink);font-size:15px;font-weight:600;text-decoration:none;min-height:40px}
.btn:hover{background:var(--blue-600);border-color:var(--blue-600)}
.btn.ghost{background:var(--card);color:var(--blue);border-color:var(--line)}
.btn.ghost:hover{background:var(--blue-050)}
.btn svg{width:16px;height:16px;flex:none}
.linkbtn{border:0;background:none;color:var(--blue);font-weight:600;font-size:13.5px;padding:4px 6px;border-radius:6px}
.linkbtn:hover{background:var(--blue-050)}

/* the top of the page */
.loading{text-align:center;color:var(--muted);padding:60px 16px;margin:0}
.ask{background:var(--soft);border-bottom:1px solid var(--line);padding:22px 18px 16px}
.ask-in{max-width:820px;margin:0 auto}
.ask h2{margin:0 0 4px;font-size:24px;line-height:1.2;color:#0a2540;letter-spacing:-.01em}
.ask p.lead{margin:0 0 4px;color:var(--muted);font-size:14.5px}
/* The division switch: one segment per published division, above the
   search; the navy thumb slides to the one open (--i of --n). */
.divpick{margin:14px 0 2px}
.divpick .lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.divseg{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));background:#e6edf6;border:1px solid #d2dcea;border-radius:14px;padding:4px}
.divseg .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,3));border-radius:10px;background:#0a2540;box-shadow:0 2px 6px rgba(10,37,64,.25);transform:translateX(calc(100% * var(--i,0)));transition:transform .32s cubic-bezier(.3,.7,.2,1)}
.divseg button{position:relative;z-index:1;border:0;background:none;border-radius:10px;padding:10px 12px;font-size:16px;font-weight:700;color:#3a4f66;min-height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.divseg button:hover{color:#0a2540}
.divseg button[aria-checked="true"]{color:#fff}
.divseg button:focus-visible{outline:2px solid #0057b8;outline-offset:2px}
.divseg .sm{display:none}
/* All divisions: a category's contact in each division */
.dvblock{margin:0 0 14px}
.dvh{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dvblock .pcard{width:100%;flex-wrap:wrap;padding:14px 16px;margin-bottom:8px}
.combo{position:relative;margin-top:12px}
.combo input{width:100%;font-size:16px;padding:13px 14px 13px 44px;border-radius:12px;border:1.5px solid var(--search-line);background:var(--search-bg);color:var(--ink)}
.combo input::placeholder{color:var(--search-dim);opacity:1}
.combo input:focus{outline:none;border-color:var(--blue)}
.combo .mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--amber-ink);pointer-events:none}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  margin:0;padding:6px;list-style:none;max-height:min(50vh,360px);overflow:auto}
.sugg li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;min-height:40px}
.sugg li[aria-selected="true"],.sugg li:hover{background:var(--blue-050)}
.sugg .sgi{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#eef1f5;color:var(--muted);font-weight:700;font-size:13px}
.sugg .sgi.reg{background:#0a2540;color:#fff}
.sugg .k{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.sugg .none{color:var(--muted);cursor:default}
.sugg .none:hover{background:none}
details.browse{margin-top:12px}
details.browse summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:13.5px;width:max-content;max-width:100%;list-style:none;padding:6px 0}
details.browse summary::-webkit-details-marker{display:none}
details.browse summary::after{content:" ▾"}
details.browse[open] summary::after{content:" ▴"}
/* every category, as the region's ownership sheet */
.bsum{margin:6px 0 10px}
.scope{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;border-radius:20px;padding:1px 8px;vertical-align:1px}
.scope.reg{background:#0a2540;color:#fff;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.scope.div{background:#eef1f5;color:var(--muted)}
.cwrap{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:70vh;box-shadow:var(--shadow)}
.ctab{width:100%;border-collapse:collapse;font-size:13.5px}
.ctab th{position:sticky;top:0;z-index:2;background:#0a2540;color:#fff;text-align:left;font-weight:600;padding:9px 12px;white-space:nowrap}
.ctab td{padding:7px 12px;border-top:1px solid var(--line);vertical-align:top}
.ctab tbody tr{cursor:pointer}
.ctab.anim tbody tr{animation:lu-up .26s ease-out both;animation-delay:calc(var(--r) * 12ms)}
.ctab tbody tr:hover{background:var(--blue-050)}
.ctab tbody tr.on{background:var(--blue-050);box-shadow:inset 3px 0 0 var(--blue)}
.ctab .plink{border:0;background:none;padding:0;color:var(--ink);font-weight:600;text-align:left;cursor:pointer}
.ctab .plink:hover{color:var(--blue);text-decoration:underline}
.ctab .grp{display:block;font-size:11.5px;color:var(--muted)}
.ctab .rg{color:var(--blue);font-weight:600}
.ctab .none{color:var(--muted)}
.ctab .cov{color:var(--muted);font-style:italic;font-size:12.5px}

.pviews{max-width:1280px;margin:16px auto 0;padding:0 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--muted);min-height:38px}
.seg button[aria-pressed="true"]{background:var(--blue);color:var(--btn-ink)}
.pmain{max-width:1280px;margin:0 auto;padding:14px 18px 34px}
.pfoot{max-width:1280px;margin:0 auto;padding:0 18px 30px;color:var(--muted);font-size:12.5px}
.empty{text-align:center;color:var(--muted);padding:40px 12px;font-size:14px}
.empty .big{font-size:40px;display:block;margin-bottom:6px}
.empty .btn{margin-top:12px}
.cardmsg{max-width:520px;margin:40px auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center;box-shadow:var(--shadow)}
.cardmsg h1{font-size:20px;margin:0 0 8px}
.cardmsg p{margin:0 0 8px;color:var(--muted)}

/* your contact: the path from the top down to the person */
.answer{max-width:560px;margin:0 auto}
.answer h2{font-size:15px;font-weight:600;margin:0 0 14px;text-align:center;color:var(--muted)}
.answer h2 b{color:var(--ink)}
.chain{display:flex;flex-direction:column;align-items:center;margin:0;padding:0;list-style:none}
.step{--i:0;width:100%;display:flex;flex-direction:column;align-items:center}
.wire{width:2px;height:26px;background:var(--wire-on);transform-origin:top;border-radius:2px}
.pcard{position:relative;display:flex;align-items:center;gap:12px;width:min(100%,400px);background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;box-shadow:var(--shadow);text-align:left;color:inherit;min-height:56px}
button.pcard:hover{border-color:var(--blue)}
.pcard .who{display:flex;flex-direction:column;min-width:0}
.pcard .nm{font-weight:700;font-size:15px}
.pcard .tt{color:var(--muted);font-size:13px}
.pcard .rel{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:right}
.hit .pcard{width:100%;flex-wrap:wrap;padding:16px 18px;border:2px solid var(--blue)}
.hit .pcard .nm{font-size:19px}
.hit .pcard::after{content:"";position:absolute;inset:-2px;border-radius:13px;border:2px solid var(--blue);opacity:0;pointer-events:none}
.contact{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:4px}
.contact .btn{flex:1 1 auto}
.cline{width:100%;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.cline a{color:var(--blue);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.owns{width:100%;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.note{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-ink);border-radius:10px;padding:9px 12px;font-size:13.5px;width:100%}
.isin{text-align:center;margin:-6px 0 14px;font-size:14px}
.isin b{color:var(--blue)}
.answer h2 .scope{margin-left:4px}
.pcard .im{font-size:12px;font-style:italic;color:var(--open-ink)}
.pcard.open{background:var(--open-bg);border:1.5px dashed var(--open-line)}
.hit .pcard.open{border:2px dashed var(--open-line)}
.chip.reg{background:#0a2540;color:#fff}
.regline{display:flex;gap:12px;align-items:flex-start;margin:18px auto 0;width:100%;background:var(--card);border:1px solid var(--line);border-left:4px solid #0057b8;
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.regline .rtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.regline p{margin:0;font-size:14px}
.contact.small .btn{font-size:13.5px;padding:7px 12px;min-height:38px}
.help{margin:14px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.thint{text-align:center;margin:0 0 10px}
.tbox{position:relative}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.legend .li{display:inline-flex;align-items:center;gap:8px}
.legend .sw{width:26px;height:16px;border-radius:4px;flex:none}
.legend .sw.open{background:var(--lu-open-bg,var(--open-bg));border:1.5px dashed var(--lu-open-line,var(--open-line))}
.legend .sw.dot{border:2px dotted var(--lu-dot,var(--wire-dot))}

/* contact details dialog */
.ov{position:fixed;inset:0;background:rgba(10,37,64,.45);display:grid;place-items:center;z-index:200;padding:16px}
.dlg{background:var(--card);color:var(--ink);border-radius:14px;width:min(100%,440px);max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0a2540;color:#fff;padding:13px 18px;font-size:15px;font-weight:700}
.dlg-h button{border:0;background:none;color:#fff;font-size:22px;width:40px;height:40px;border-radius:8px;flex:none}
.dlg-h button:focus-visible{outline-color:#fff}
.dlg-b{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.dlg .top{display:flex;gap:14px;align-items:center}
.dlg .top b{font-size:16px}

#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#0a2540;color:#fff;border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:600;z-index:400;max-width:calc(100vw - 32px)}
#toast.err{background:#b3261e}

/* motion: the path draws in, the card pings once */
@keyframes lu-pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lu-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lu-ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.06,1.25)}}
@keyframes lu-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}}
@keyframes lu-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chain.anim .pcard{animation:lu-pop .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.chain.anim .wire{animation:lu-grow .16s ease-out both;animation-delay:calc(var(--i) * 140ms - 40ms)}
.chain.anim .hit .pcard::after{animation:lu-ping .7s ease-out 1 both;animation-delay:calc(var(--i) * 140ms + 260ms)}
.chain.anim .hit .av{animation:lu-wave .5s ease-in-out 1 both;animation-delay:calc(var(--i) * 140ms + 260ms)}
.chain.anim .hit .contact,.chain.anim .hit .owns{animation:lu-up .28s ease-out both;animation-delay:calc(var(--i) * 140ms + 160ms)}
.ov .dlg{animation:lu-pop .2s ease-out both}
.answer.anim .regline{animation:lu-up .3s ease-out both;animation-delay:.45s}
.pmain.swap{animation:lu-up .3s ease-out both}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media (max-width:700px){
  .band-in{padding:10px 12px;gap:10px}
  .brand .pt b{font-size:20px}
  .divseg button{font-size:14px;padding:10px 4px}
  .divseg .lg{display:none}
  .divseg .sm{display:inline}
  .ask{padding:16px 12px 12px}
  .ask h2{font-size:21px}
  .pviews,.pmain,.pfoot{padding-left:12px;padding-right:12px}
  .contact .btn{flex:1 1 100%;min-height:44px}
  .dlg{width:100%;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  /* the category table becomes cards */
  .cwrap{max-height:none;overflow:visible;background:none;border:0;box-shadow:none}
  .ctab thead{display:none}
  .ctab,.ctab tbody,.ctab tr,.ctab td{display:block;width:100%}
  .ctab tbody tr{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:8px 12px}
  .ctab td{border:0;padding:3px 0 3px 96px;position:relative;min-height:22px}
  .ctab td::before{content:attr(data-l);position:absolute;left:0;top:4px;width:90px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ctab td:first-child{padding-left:0}
  .ctab td:first-child::before{display:none}
  .ctab .plink{font-size:15px;min-height:32px}
  .regline{flex-wrap:wrap}
}
@media print{
  .onnavy,.divpick,.combo,details.browse,.pviews .seg,.fold,#toast{display:none!important}
  .ask{background:none;border:0;padding-bottom:4px}
  .ask .lead{display:none}
  .pcard{box-shadow:none;break-inside:avoid}
}