/* HM Supplier Intelligence — implementation layer over design.css (the approved Charcoal & Ice Blue design, unmodified).
   Everything here is either (a) removing preview-only chrome, (b) readability/contrast/touch fixes required by the brief,
   or (c) components the real data needs and the static preview did not have. Colours are the approved tokens. */

/* ---- base ------------------------------------------------------------------------------------ */
html{scroll-behavior:auto;scrollbar-gutter:stable}
body{font-family:'Noto Kufi Arabic','Inter','Segoe UI',system-ui,Tahoma,sans-serif;font-size:14px}
.cn-name,.drawer-cn,.zh{font-family:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Hiragino Sans GB','Noto Sans SC',sans-serif}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;background:var(--carbon);color:#fff;padding:10px 14px;border-radius:10px;z-index:200}
.skip-link:focus{top:10px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.sidebar :focus-visible,.drawer-header :focus-visible,.login-art :focus-visible,.mobile-nav :focus-visible,.hero :focus-visible{outline-color:#B9E7F5}
#app{min-height:100dvh}

/* ---- (a) preview chrome removed ---------------------------------------------------------------- */
.shell{min-height:100dvh}
.sidebar{top:0;height:100dvh}
.login-page{min-height:100dvh}
@media(max-width:650px){.shell{min-height:100dvh}.login-page{min-height:100dvh}}

/* ---- (b) readability / contrast (text on white must reach 4.5:1) --------------------------------- */
:root{--muted:#5B6A76}
.company-meta,.company-card .cn-name,.filter-label,.company-count,.section-heading p,.drawer-help,.source-note,.notice,
.accordion-content,.footer-login,.login-card p,.contact-kind,.info-key,.hero-metric span,.login-note{color:#52616D}
.status-row .viewed{color:#3F6378}
.company-count b{color:#1B232D}
.section-link,.company-card-footer .details-link{color:#1E5875}
.status-row .status{font-size:11px;padding:5px 9px}
.status-row .status.declared{background:#F4EFE2;color:#6E5326}
.status-row .status.mixed{background:#E6EDF5;color:#2B4863}
.status-row .status.trader{background:#EDF0F2;color:#46545F}
.status-row .status.unknown{background:#fff;color:#55636E;border:1px dashed #AEB9C2}
.tag{color:#4A5560}
.contact-icon{color:#4F5E6A}.contact-icon.off{opacity:.45;color:#7A8792;background:#F4F6F7}
.contact-icon.on{background:#E1F1F7;color:#1E5875}
.contact-icon.on.wa{background:#E3F4EA;color:#14704B}
.drawer-header .drawer-cn{color:#D5DEE5}
.drawer-label,.drawer-topbadge{color:#C3D6E1}

/* ---- touch targets: 44px on touch devices ------------------------------------------------------ */
@media(pointer:coarse){
 .iconbutton,.drawer-header .close{width:44px;height:44px}
 .small-fav,.mini-copy,.mini-link{width:44px;height:44px}
 .btn,.switch-chip,.filter-select,.nav-item,.mobile-nav button{min-height:44px}
 .action-tile{min-height:76px}
 .accordion summary{min-height:48px}
}
@media(pointer:fine){.small-fav{width:36px;height:36px}.mini-copy,.mini-link{width:34px;height:34px}}

/* ---- login ----------------------------------------------------------------------------------- */
.login-card form{display:block}
.login-error{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;background:#FBEBEA;border:1px solid #EBC3BF;color:#8A2B22;font-size:13px;line-height:1.7}
.login-error.show{display:block}
.login-info{margin-top:14px;padding:12px 14px;border-radius:12px;background:#E7F2F7;border:1px solid #CFE3EB;color:#244F66;font-size:13px;line-height:1.7}
.login-input[aria-invalid="true"]{border-color:#C9544A}
.login-submit[disabled]{opacity:.7}
.login-hint{font-size:12px;color:#52616D;margin-top:10px;line-height:1.8}
.login-art-bottom{color:#B7C4CF}

/* ---- home / hero ------------------------------------------------------------------------------ */
.hero-note{position:relative;z-index:1;font-size:12px;color:#B8C8D5;margin-top:12px;max-width:640px;line-height:1.8}
.hero-metric span{color:#C3D0DA}
.cat-count{font:600 12px Inter,sans-serif;color:#52616D;background:#F1F4F6;border-radius:8px;padding:2px 8px;margin-inline-start:auto}
.category-card.selected .cat-count{background:#D6EDF4;color:#1B5A78}
.category-top{width:100%}
.categories.all{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1270px){.categories.all{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:920px){.categories.all{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.categories.all{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- list filters (progressive disclosure) ------------------------------------------------------- */
.filter-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%}
.filter-toggle{display:inline-flex;align-items:center;gap:7px;background:#F7F8F9;border:1px solid #E3E8EB;border-radius:10px;padding:9px 12px;color:#334757;min-height:41px;font-size:12px}
.filter-toggle[aria-expanded="true"]{background:#E4F3F8;border-color:#92CADC;color:#1E5370}
.filter-toggle .badge{background:var(--steel);color:#fff;border-radius:50px;font:700 11px Inter,sans-serif;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}
.adv-panel{width:100%;border-top:1px solid #EDF0F1;margin-top:4px;padding-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 14px}
.adv-panel[hidden]{display:none}
.field-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-group>label,.field-group>.field-title{font-size:12px;font-weight:700;color:#3E4E5B}
.field-group .filter-select{min-width:0;max-width:none;width:100%}
.chip-set{display:flex;gap:6px;flex-wrap:wrap}
.chip-toggle{background:#F7F8F9;border:1px solid #E3E8EB;color:#3F505D;border-radius:50px;padding:7px 12px;font-size:12px;display:inline-flex;gap:6px;align-items:center;min-height:36px}
.chip-toggle[aria-pressed="true"]{background:#E4F3F8;border-color:#92CADC;color:#1E5370}
.chip-toggle.wa[aria-pressed="true"]{background:#E3F4EA;border-color:#9ACDB0;color:#14704B}
.list-filterbar{flex-direction:column;align-items:stretch}
.filter-search{min-width:0}
@media(max-width:650px){.filter-select{min-width:calc(50% - 4px);max-width:none}.filter-row .switch-chip,.filter-row .filter-toggle{flex:1 1 calc(50% - 6px);justify-content:center}}

/* ---- cards ----------------------------------------------------------------------------------- */
.company-card .open-link{background:none;border:0;padding:0;text-align:inherit;color:inherit;cursor:pointer;width:100%;display:block}
.company-card .open-link:focus-visible{outline-offset:6px;border-radius:6px}
.company-card.contacted{border-color:#7DB6CC}
.contacted-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#14627F;background:#DBF0F7;border-radius:50px;padding:4px 9px}
.company-card .company-name[lang="zh-Hans"]{font-family:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
.small-fav.on svg path{fill:currentColor}
.sentinel{height:1px}
.loading-more{text-align:center;color:#52616D;font-size:12px;padding:12px}
.empty .btn{margin-top:12px}
.legend{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.legend summary{padding:13px 16px;cursor:pointer;font-weight:700;font-size:13px;list-style:none;display:flex;justify-content:space-between;align-items:center;color:#2B3B49}
.legend summary::-webkit-details-marker{display:none}
.legend dl{margin:0;padding:4px 16px 14px;display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;font-size:12px;color:#44535F;line-height:1.8}
.legend dt{font-weight:700}
.legend p{margin:0;padding:0 16px 14px;font-size:12px;color:#52616D;line-height:1.8}

/* ---- account menu / topbar ---------------------------------------------------------------------- */
.topbar-actions{position:relative}
button.circle-avatar{border:1px solid #C5DFE9;cursor:pointer}
.menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:50;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:2px}
.menu[hidden]{display:none}
.menu button{display:flex;gap:10px;align-items:center;background:none;width:100%;text-align:start;padding:11px 12px;border-radius:10px;color:#26343F;min-height:44px}
.menu button:hover{background:#F1F5F7}
.menu .menu-meta{font-size:11px;color:#52616D;padding:8px 12px 6px;border-top:1px solid #EDF0F1;margin-top:4px;line-height:1.8}
.menu .menu-meta[dir=ltr]{text-align:left}

/* ---- detail drawer ---------------------------------------------------------------------------- */
html.drawer-open,html.drawer-open body{overflow:hidden}
.drawer-header .submeta span.nat{background:#2F5C73;color:#fff}
.drawer-header .submeta span.nat.verified{background:#1F6F8E}
.drawer-section h3{display:flex;align-items:center;gap:8px}
.drawer-help{margin-top:-6px}
.action-tile{color:#33495A;text-decoration:none}
.action-tile.disabled{opacity:.55;color:#6A7782;background:#F4F6F7}
.action-tile.whatsapp.enabled{color:#14704B}
.action-tile.enabled{background:#EAF5F9;border-color:#BFDDE8}
.action-tile.whatsapp.enabled{background:#E7F5EC;border-color:#B5DCC4}
a.action-tile:focus-visible,button.action-tile:focus-visible{outline-offset:2px}
.warn{display:flex;gap:10px;align-items:flex-start;background:#FFF6E3;border:1px solid #EBD39B;color:#6A4B0C;border-radius:13px;padding:12px 13px;font-size:12.5px;line-height:1.8;margin-bottom:14px}
.warn svg{margin-top:3px;color:#9A6B10}
.contact-row{flex-wrap:wrap}
.contact-row .contact-main{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.contact-row .contact-sub{width:100%;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding-inline-start:64px;font-size:11.5px;color:#52616D}
.trust{display:inline-flex;align-items:center;gap:4px;border-radius:50px;padding:2px 8px;font-size:11px;font-weight:700;background:#EDF1F4;color:#44525E}
.trust.verified{background:#E1F2F7;color:#17607C}
.trust.unofficial{background:#FFF1D6;color:#7A5410}
.contact-sub a{color:#1E5F80;text-decoration:underline;overflow-wrap:anywhere}
.contact-note{color:#52616D}
.contact-value.latin{font-variant-numeric:tabular-nums}
.contact-value .hint{display:block;font:500 11.5px 'Noto Kufi Arabic',sans-serif;color:#7A5410;margin-top:2px;direction:rtl;text-align:right}
.mini-copy.done{background:#DFF3E7;color:#14704B}
a.mini-link.wa{background:#E3F4EA;color:#14704B}
.more{border:1px dashed #CBD5DB;border-radius:13px;margin-top:8px}
.more>summary{padding:11px 14px;cursor:pointer;font-size:12px;font-weight:700;color:#2D4556;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.more>summary::-webkit-details-marker{display:none}
.more[open]>summary{border-bottom:1px dashed #CBD5DB}
.more .contact-list{padding:10px}
.info-row .info-value{max-width:70%}
.info-value .sub{display:block;color:#52616D;font-size:11.5px;margin-top:3px}
.info-value.ar{text-align:right}
.addr{display:block;direction:ltr;text-align:left;overflow-wrap:anywhere}
.addr.zh{font-family:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.related-list{display:flex;flex-direction:column;gap:8px}
.related-list button{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#F4F7F8;border:1px solid #E2E8EB;border-radius:11px;padding:10px 12px;text-align:start;min-height:44px;color:#26343F}
.src-item{padding:9px 0;border-top:1px solid #EAEEF0;line-height:1.8}
.src-item:first-child{border-top:0;padding-top:0}
.src-item a{direction:ltr;display:inline-block;text-align:left}
.accordion-content ul{margin:0;padding-inline-start:18px}
.accordion-content li{margin-bottom:6px}
.note-box textarea{width:100%;min-height:104px;border:1px solid #D8E0E5;border-radius:12px;padding:12px 13px;resize:vertical;color:#1F2D38;background:#fff;line-height:1.8;font-size:14px}
.note-box textarea:focus{border-color:#7FB5CA}
.note-actions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:8px;flex-wrap:wrap}
.note-actions .meta{font-size:11.5px;color:#52616D}
.note-conflict{margin-top:10px;border:1px solid #EBD39B;background:#FFF6E3;border-radius:12px;padding:12px;font-size:12.5px;color:#5E430C;line-height:1.8}
.note-conflict pre{white-space:pre-wrap;margin:8px 0;font:inherit;background:#fff;border-radius:8px;padding:8px 10px;border:1px solid #F0DFB4}
.note-conflict .row{display:flex;gap:8px;flex-wrap:wrap}
.btn.small{min-height:38px;padding:8px 13px;font-size:12px}
.drawer-bottom .btn.on{background:var(--steel)}
.drawer-bottom .btn.ghost.on{background:#DBF0F7;border-color:#9CCBDD;color:#14627F}
.skeleton{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.skeleton i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#EDF1F3,#F7F9FA,#EDF1F3);background-size:200% 100%;animation:sk 1.2s linear infinite}
.skeleton i.w60{width:60%}.skeleton i.w80{width:80%}.skeleton i.big{height:64px;border-radius:13px}
@keyframes sk{to{background-position:-200% 0}}
.error-box{background:#FBEBEA;border:1px solid #EBC3BF;color:#8A2B22;border-radius:13px;padding:14px;font-size:13px;line-height:1.8}

/* ---- mobile: semi-full-screen sheet, 5-item nav ---------------------------------------------------- */
@media(max-width:650px){
 .backdrop{background:rgba(9,15,20,.5);align-items:flex-end}
 .drawer{width:100vw;height:calc(100dvh - max(14px, env(safe-area-inset-top)));border-radius:20px 20px 0 0;box-shadow:0 -12px 50px rgba(0,0,0,.28)}
 .drawer-header{padding:16px 18px 18px}
 .drawer-header h2{font-size:19px}
 .contact-row .contact-sub{padding-inline-start:0}
 .mobile-nav button{min-width:54px;padding:6px 6px}
 .menu{inset-inline-start:0;min-width:210px}
 .adv-panel{grid-template-columns:1fr}
 .hero-note{font-size:11px}
}
@media(min-width:651px){.backdrop{padding-inline-end:0}}

/* ---- toast ------------------------------------------------------------------------------------ */
.toast{max-width:min(92vw,520px);text-align:center;line-height:1.7;bottom:max(24px,calc(env(safe-area-inset-bottom) + 76px))}
.toast.error{background:#7C2A22}
@media(min-width:651px){.toast{bottom:24px}}

/* ---- reduced motion: no slide/fade/skeleton shimmer ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){.skeleton i{animation:none}.company-card:hover,.category-card:hover{transform:none}}

/* ---- implementation fixes -------------------------------------------------------------------- */
[hidden]{display:none!important}
.company-card .company-name,.company-card .cn-name{display:block}
.drawer-headtools{display:flex;align-items:center;gap:10px}
.drawer-topbadge{font-size:11px}
.contact-sub bdi{unicode-bidi:isolate}

/* ---- touch targets: 44px minimum on phones / touch devices ------------------------------------ */
@media (max-width:760px),(pointer:coarse){
  .small-fav{min-width:44px;min-height:44px}
  .company-card .open-link{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .circle-avatar,.iconbutton,.close{min-width:44px;min-height:44px}
  .filter-select,.switch-chip,.filter-toggle,.filter-search,.chip-toggle,.section-link,.mini-copy,.mini-link,.btn.small{min-height:44px}
  .filter-search input{min-height:42px}
  .mini-copy,.mini-link{min-width:44px}
  .legend summary,.accordion summary,.more summary{min-height:44px}
}
.breadcrumb .secondary{color:#697783}
.action-tile.disabled,.action-tile:disabled{color:#5B6874}
.action-tile.disabled span,.action-tile:disabled span{color:#5B6874}

/* ---- login / activation / settings ------------------------------------------------------------ */
.show-pw{display:flex;align-items:center;gap:8px;margin-top:8px;min-height:44px;font-size:13px;color:#52616D;cursor:pointer}
.show-pw input{width:18px;height:18px;accent-color:#275E7D}
.drawer-scroll .login-input{margin-top:4px}
.drawer-scroll .login-submit{margin-top:12px}
#acctForm .login-error.show,#acctForm .login-info{margin-top:10px}
#acctForm .login-submit{margin-bottom:18px}
#acctForm .drawer-help{margin-top:6px}

/* ---- installed app (PWA) ------------------------------------------------------------------------ */
button,a,select,summary,label{touch-action:manipulation}
@media (display-mode: standalone){
  html{-webkit-tap-highlight-color:transparent}
  body{overscroll-behavior-y:none;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
.install-steps{margin:8px 0 0;padding-inline-start:22px;line-height:2}
.install-steps li{margin-bottom:6px}
.install-note{margin-top:14px}