/* ==========================================================================
   SG CorpLib — shared theme
   Design system source: ui-ux-pro-max
     Pattern    Marketplace / Directory (landing.csv)
     Style      Flat Design + Minimalism & Swiss Style
     Palette    Reference Softened + Detail (palette v3-d)
     Type       IBM Plex Sans (typography.csv "Financial Trust")
     Rules      1px borders · soft radius · one action colour
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Colour system — "Reference Softened + Detail" (palette v3-d)

     Solved + WCAG-audited by scripts/v3d_scheme.py.
     Do not hand-edit the values below: change the palette and re-run
     `python scripts/build_theme_tokens.py`.

     Structure language (from the reference site, measured not guessed):
       white 96px nav -> light blue-grey hero -> white floating search card
       -> ONE action blue -> pill chips + trust strip -> pale grey page bg
  --------------------------------------------------------------------- */

  /* Brand tokens */
  --com-primary: #000626;  /* 标题字 / 深色页头底 */
  --com-primary-2: #0B1220;  /* 正文强调 */
  --com-accent: #1D4ED7;  /* 行动蓝 — 链接 / 按钮 / 焦点（唯一跳色） */
  --com-accent-2: #1E40AF;  /* 行动蓝 hover */
  --com-success: #15803D;  /* live 状态 */
  --com-warn: #B45309;  /* dormant 状态 */
  --com-danger: #B91C1C;  /* struck off / inactive */

  /* Surface tokens */
  --com-bg: #F1F3F7;  /* 页面底 */
  --com-surface: #FFFFFF;  /* 卡片底 */
  --com-border: #E5E7EB;  /* 描边 */
  --com-border-2: #E5E7EB;  /* 分隔线 */
  --com-text: #374151;  /* 正文 */
  --com-muted: #676E7C;  /* 次要文字 */

  /* Hero surface — light hero, so the fill is a light glass and
     the hairline is a BLUE line, not white (white on a light
     hero reads as no border at all). */
  --com-hero-bg: #EEF3FB;
  --com-hero-h1: #000626;
  --com-hero-lede: #4B5563;
  --com-hero-eyebrow: #1942B6;
  --com-hero-hint: #484D56;
  --com-hero-card: #FFFFFF;
  --com-hero-card-shadow: 0 8px 25px rgba(29, 78, 215, 0.065);
  --com-input-border: rgba(0, 17, 102, 0.098);

  /* Hero-surface chips / trust strip — these sit ON the hero,
     so their fill has to follow the hero lightness. */
  --com-chip-bg: rgba(255, 255, 255, 0.72);
  --com-chip-bg-hover: rgba(255, 255, 255, 0.92);
  --com-chip-border: rgba(29, 78, 215, 0.18);
  --com-chip-border-hover: rgba(29, 78, 215, 0.34);
  --com-chip-text: #000626;
  --com-chip-more-bg: rgba(29, 78, 215, 0.10);
  --com-trust-bg: rgba(255, 255, 255, 0.72);
  --com-trust-text: #374151;

  /* Nav */
  --com-nav-bg: #FFFFFF;
  --com-nav-text: #111827;
  --com-nav-muted: #4B5563;

  /* Table + CTA */
  --com-table-head-bg: #F9FAFB;
  --com-table-head-text: #4B5563;
  --com-cta-bg: #000626;
  --com-cta-text: #FFFFFF;

  /* Dark-surface foregrounds — the footer and the CTA block stay dark, so
     they need their own text colours. The light-surface --com-muted is only
     3.89:1 on #000626 and fails AA. Solved by scripts/dark_surface_tokens.py. */
  --com-dark-muted:  #8A93A6;  /* 次要文字 on dark  — 6.46:1 */
  --com-dark-text:   #B8C0D0;  /* 正文     on dark  — 10.90:1 */
  --com-dark-link:   #9FC0FF;  /* 链接     on dark  — 10.87:1 */
  --com-dark-border: #1E2A4A;  /* 深底上的分隔线 */

  /* Tinted panel — the service box sits on a light blue panel, where the
     light-surface --com-muted is only 3.97:1. Solved by
     scripts/dark_surface_tokens.py. */
  --com-tinted-bg:   #D9E3F7;
  --com-tinted-text: #4B5563;  /* 5.86:1 on --com-tinted-bg */

  /* Radius */
  --com-radius-sm: 8px;    /* 小圆角 */
  --com-radius: 12px;   /* 圆角 */
  --com-radius-lg: 16px;   /* 大圆角 */
  --com-radius-pill: 999px; /* 胶囊 */

  /* Bootstrap remap */
  --bs-body-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--com-text);
  --bs-body-bg: var(--com-bg);
  --bs-border-color: var(--com-border);
  --bs-link-color: var(--com-accent);
  --bs-link-hover-color: var(--com-accent-2);
  --bs-primary: var(--com-primary);
  --bs-primary-rgb: 0, 6, 38;
  --bs-link-color-rgb: 29, 78, 215;
}

body {
  background: var(--com-bg);
  color: var(--com-text);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--com-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* Keyboard focus must stay visible — Bootstrap strips some outlines */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--com-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link — required for the Government/Public Service profile */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--com-primary); color: #fff;
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============================== Navbar ============================== */
/* White nav with a hairline — the reference site's 96px bar, no shadow. */
.com-navbar { background: var(--com-nav-bg); border-bottom: 1px solid var(--com-border); }
.com-navbar .navbar-brand { color: var(--com-primary); font-weight: 700; letter-spacing: -.02em; font-size: 1.15rem; }
.com-navbar .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border: 2px solid var(--com-primary); border-radius: 3px;
  font-size: .85rem; font-weight: 700; margin-right: .5rem; line-height: 1;
}
.com-navbar .nav-link { color: var(--com-nav-muted); font-size: .9375rem; padding: .5rem .75rem; }
.com-navbar .nav-link:hover, .com-navbar .nav-link:focus { color: var(--com-primary); }
.com-navbar .navbar-toggler { border-color: var(--com-border-2); }
.com-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2855,65,81,0.85)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.com-navbar .btn-outline-light { border-color: var(--com-border-2); color: var(--com-primary); }
.com-navbar .btn-outline-light:hover { background: var(--com-bg); border-color: var(--com-accent); color: var(--com-accent); }

/* =============================== Hero =============================== */
/* Light blue-grey hero. The floating white search card is the signature. */
.com-hero {
  background: var(--com-hero-bg); color: var(--com-text);
  border-bottom: 1px solid var(--com-border);
  position: relative; overflow: hidden;
  /* Vertical breathing room. The demo used 84px/120px; this hero carries an
     extra stats row, so the rhythm is slightly tighter but still generous. */
  padding: 4.75rem 0 5.5rem;
}
/* Soft blue bloom — three radial gradients over the base colour. This is
   what gives the hero depth; without it the panel reads as a flat wash.
   Placed in the upper right so the headline column stays on light ground. */
.com-hero {
  background-image:
    radial-gradient(circle at 88% 14%, rgba(29,78,215,.26) 0%, transparent 40%),
    radial-gradient(circle at 96% 48%, rgba(29,78,215,.17) 0%, transparent 36%),
    radial-gradient(circle at 80% 86%, rgba(29,78,215,.12) 0%, transparent 38%);
}
/* Geometric wash — the reference hero carries a subtle diagonal texture.
   The stripes are a LIGHT blue: on a pale hero a dark stripe disappears. */
.com-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 46%, rgba(147,180,255,.10) 46%, rgba(147,180,255,.10) 47%, transparent 47%),
    linear-gradient(115deg, transparent 56%, rgba(147,180,255,.08) 56%, rgba(147,180,255,.08) 57%, transparent 57%),
    linear-gradient(115deg, transparent 66%, rgba(147,180,255,.06) 66%, rgba(147,180,255,.06) 67%, transparent 67%);
}
.com-hero .container { position: relative; z-index: 2; }
.com-hero h1 { color: var(--com-hero-h1); font-size: clamp(1.85rem, 4.5vw, 3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.com-hero .lead { color: var(--com-hero-lede); font-size: 1.0625rem; max-width: 44rem; line-height: 1.65; }
.com-eyebrow {
  color: var(--com-hero-eyebrow); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem;
}

/* Chips + trust strip — these sit ON the hero, so their fill comes from the
   hero-surface tokens. A hard-coded translucent dark fill on a light hero
   turns into a grey block (measured 2.40:1 on palette v3-c). */
.com-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.375rem; }
.com-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: 1.375rem; }
.com-hero-meta .com-hero-chips, .com-hero-meta .com-hero-trust { margin-top: 0; }
.com-hero-meta .com-hero-trust { gap: .5rem 1rem; background: transparent; padding: 0; }
.com-hero-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  background: var(--com-chip-bg); border: 1px solid var(--com-chip-border);
  border-radius: var(--com-radius-pill); padding: .375rem .875rem;
  font-size: .875rem; color: var(--com-chip-text); text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.com-hero-chip:hover, .com-hero-chip:focus-visible {
  background: var(--com-chip-bg-hover); border-color: var(--com-chip-border-hover);
}
.com-hero-trust {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  margin-top: 1.625rem; padding: .75rem 1rem; border-radius: var(--com-radius);
  background: var(--com-trust-bg); color: var(--com-trust-text); font-size: .875rem;
}
.com-hero-trust strong { color: var(--com-chip-text); font-weight: 600; }

/* Search bar — the primary CTA, floating on the hero as a white card */
.com-search {
  background: var(--com-hero-card); border: 1px solid transparent;
  border-radius: var(--com-radius-lg); padding: .75rem;
  display: flex; gap: .5rem; align-items: stretch;
  box-shadow: var(--com-hero-card-shadow);
}
.com-search .form-control, .com-search .form-select {
  border: 1px solid var(--com-input-border); font-size: 1rem;
  padding: .75rem .875rem; color: var(--com-text); border-radius: var(--com-radius-sm);
  background: var(--com-surface);
}
.com-search .form-control:focus, .com-search .form-select:focus {
  box-shadow: none; outline: 3px solid var(--com-accent); outline-offset: -3px; border-radius: var(--com-radius-sm);
}
.com-search .btn {
  font-weight: 600; padding: .75rem 1.5rem; white-space: nowrap;
  background: var(--com-accent); border-color: var(--com-accent); color: #fff;
  border-radius: var(--com-radius);
}
.com-search .btn:hover { background: var(--com-accent-2); border-color: var(--com-accent-2); color: #fff; }
.com-search-hint { color: var(--com-muted); font-size: .875rem; margin-top: .75rem; }
.com-search-hint code { color: var(--com-primary); background: var(--com-bg); padding: .1rem .35rem; border-radius: 3px; font-size: .8125rem; }

/* Primary CTA on the hero — takes the place of the floating search card.
   The homepage has NO search box; the registry search lives on /search.html.
   White on --com-accent = 6.72:1 (AA pass on the light hero too). */
.com-hero-cta .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 1rem; padding: .875rem 1.75rem;
  background: var(--com-accent); border: 1px solid var(--com-accent); color: #fff;
  border-radius: var(--com-radius); text-decoration: none; line-height: 1.4;
}
.com-hero-cta .btn:hover, .com-hero-cta .btn:focus-visible {
  background: var(--com-accent-2); border-color: var(--com-accent-2); color: #fff;
}
.com-hero-cta .btn:focus { box-shadow: none; }

/* =============================== Stats =============================== */
.com-stat { border-left: 3px solid var(--com-accent); padding-left: 1rem; }
.com-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--com-primary); line-height: 1.1; letter-spacing: -.02em; }
.com-stat-label { font-weight: 600; color: var(--com-text); font-size: .9375rem; }
.com-stat-detail { color: var(--com-muted); font-size: .875rem; line-height: 1.5; }

/* On the navy hero the stat values must invert, otherwise navy-on-navy hides them */
.com-hero .com-stat { border-left-color: var(--com-accent); }
.com-hero .com-stat-value { color: var(--com-hero-h1); }
.com-hero .com-stat-label { color: var(--com-hero-lede); }

/* =========================== Section heads =========================== */
.com-section { padding: 3.5rem 0; }
.com-section-alt { background: var(--com-surface); border-top: 1px solid var(--com-border); border-bottom: 1px solid var(--com-border); }
.com-section-title { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; }
.com-section-sub { color: var(--com-muted); font-size: .9375rem; max-width: 42rem; }

/* ==================== Sidebar filter (shared) ==================== */
/* One pattern for every list page: search results, industry, building.
   Filter groups stack, each with a heading, a list of options and counts. */
.com-sidebar-filter { position: sticky; top: 1rem; }

.com-filter-group + .com-filter-group {
  border-top: 1px solid var(--com-border);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}
.com-filter-group h2 {
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--com-muted); margin-bottom: .75rem;
}
.com-filter-list { list-style: none; padding: 0; margin: 0; }
.com-filter-list li + li { margin-top: .4rem; }

/* 侧栏关联链接的计数文字（数字与选项名分开排版） */
.com-filter-list .count { color: var(--com-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* 侧栏的数字用带边框的 label（chip）显示，和选项文字区分开 */
.com-filter-list .count-chip {
  display: inline-block;
  border: 1px solid var(--com-border-2);
  background: var(--com-table-head-bg);
  color: var(--com-muted);
  border-radius: var(--com-radius-sm);
  padding: .05rem .4rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.com-filter-list a .count-chip { margin-left: .5rem; }

/* Link-style options (not checkboxes) — used for "matched in" and category jumps */
.com-filter-list a {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  color: var(--com-text); text-decoration: none; font-size: .875rem;
  padding: .25rem 0; min-height: 24px;
}
.com-filter-list a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.com-filter-list a:hover { color: var(--com-accent); }
/* Result meta row above a list: count on the left, sort on the right */
.com-list-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: .75rem; margin-bottom: 1rem;
}
/* 结果被截断时的提示（例如关键词命中超过 5000 条） */
.com-note {
  color: var(--com-muted); font-size: .875rem; line-height: 1.5;
  background: var(--com-table-head-bg);
  border: 1px solid var(--com-border); border-radius: var(--com-radius-sm);
  padding: .625rem .875rem;
}

/* ================== Page headers (entity / category / building / search) ==================
   四个页头共用一套规则 —— 之前是四个页面各写一份内联样式，
   抽到共享文件后配色与间距由同一处控制。
   浅色 Hero 方案下页头也用浅底 + 蓝色底边，与首页 Hero 同一套语言。 */
.com-page-head {
  background: var(--com-hero-bg); color: var(--com-text);
  border-bottom: 1px solid var(--com-border); padding: 3.25rem 0 3rem;
  position: relative; overflow: hidden;
}
/* Same bloom as the homepage hero — the two must read as one language. */
.com-page-head {
  background-image:
    radial-gradient(circle at 78% 24%, rgba(29,78,215,.22) 0%, transparent 48%),
    radial-gradient(circle at 90% 70%, rgba(29,78,215,.13) 0%, transparent 42%);
}
.com-page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 52%, rgba(147,180,255,.09) 52%, rgba(147,180,255,.09) 53%, transparent 53%),
    linear-gradient(115deg, transparent 64%, rgba(147,180,255,.07) 64%, rgba(147,180,255,.07) 65%, transparent 65%);
}
.com-page-head .container { position: relative; z-index: 2; }
.com-page-head h1 {
  color: var(--com-hero-h1); font-size: clamp(1.4rem, 3.4vw, 2.125rem);
  font-weight: 700; line-height: 1.25; margin-bottom: .5rem;
}
.com-page-head p { color: var(--com-hero-lede); font-size: .9375rem; max-width: 46rem; margin-bottom: 0; }
.com-page-head .com-stat { border-left-color: var(--com-accent); }
.com-page-head .com-stat-value { color: var(--com-hero-h1); }
.com-page-head .com-stat-label { color: var(--com-hero-lede); }
/* Monospace code / postal label in a page header.
   选择器要比 .com-page-head p 更具体，否则会被后者的浅灰覆盖。 */
.com-page-head p.com-page-code,
.com-page-head .com-page-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--com-accent); font-size: .9375rem;
}

/* 搜索页标题里高亮的查询词 */
.com-query { color: var(--com-accent); }

/* 浅底页头上的面包屑与链接 —— 深色字，不需要反色 */
.com-page-head .com-crumbs { color: var(--com-hero-hint); }
.com-page-head .com-crumbs a { color: var(--com-text); text-decoration: none; }
.com-page-head .com-crumbs a:hover { color: var(--com-accent); text-decoration: underline; }
.com-page-head .com-crumbs .sep { color: var(--com-hero-hint); }
.com-page-head .com-crumbs [aria-current] { color: var(--com-primary); font-weight: 600; }
/* 页头里的普通链接用行动蓝 */
.com-page-head a:not(.btn):not(.com-crumbs a) { color: var(--com-accent); }
.com-page-head a:not(.btn):not(.com-crumbs a):hover { color: var(--com-accent-2); }

/* 页头里的白色卡片 —— 卡片是白底，文字必须回到深色。 */
.com-page-head .com-card,
.com-page-head .com-card p,
.com-page-head .com-card span,
.com-page-head .com-card h2,
.com-page-head .com-card h3 { color: var(--com-text); }
.com-page-head .com-card .com-meta { color: var(--com-muted); }



/* =========================== Breadcrumbs =========================== */
.com-crumbs { font-size: .8125rem; color: var(--com-muted); }
.com-crumbs a { color: var(--com-muted); text-decoration: none; }
.com-crumbs a:hover { color: var(--com-accent); text-decoration: underline; }
.com-crumbs .sep { margin: 0 .4rem; color: var(--com-border-2); }
.com-crumbs [aria-current] { color: var(--com-text); font-weight: 600; }



/* ========================= Industry cards ========================= */
.com-industry-card {
  background: var(--com-surface); border: 1px solid var(--com-border); border-radius: var(--com-radius-lg);
  padding: 1.25rem; height: 100%; display: flex; gap: .875rem; align-items: flex-start;
  text-decoration: none; color: inherit;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.com-industry-card:hover, .com-industry-card:focus-visible { border-color: var(--com-accent); background: var(--com-chip-more-bg); color: inherit; }
.com-industry-icon {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: var(--com-radius);
  background: var(--com-chip-more-bg); color: var(--com-accent);
  display: flex; align-items: center; justify-content: center;
}
.com-industry-name { font-weight: 600; font-size: .9375rem; color: var(--com-primary); line-height: 1.3; }
.com-industry-meta { font-size: .8125rem; color: var(--com-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ============================== Cards ============================== */
.com-card { background: var(--com-surface); border: 1px solid var(--com-border); border-radius: var(--com-radius-lg); }
.com-card-header {
  padding: .875rem 1.25rem; border-bottom: 1px solid var(--com-border);
  font-weight: 600; color: var(--com-primary); font-size: .9375rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
/* Card headers can hold a real heading element for document outline */
.com-card-title { font-size: .9375rem; font-weight: 600; color: var(--com-primary); margin: 0; }
.com-card-body { padding: 1.25rem; }

/* Definition list for key/value data — used on the company profile */
.com-dl { margin: 0; }
.com-dl dt {
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--com-muted); margin-bottom: .25rem;
}
.com-dl dd { margin: 0 0 1.1rem; font-size: .9375rem; color: var(--com-text); line-height: 1.5; }
.com-dl dd:last-child { margin-bottom: 0; }

/* ============================== Tables ============================== */
.com-table { background: var(--com-surface); border: 1px solid var(--com-border); border-radius: var(--com-radius-lg); overflow: hidden; }
.com-table .table { margin-bottom: 0; }
.com-table thead th {
  background: var(--com-table-head-bg); color: var(--com-table-head-text); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--com-border-2);
  padding: .75rem 1rem; white-space: nowrap;
}
.com-table tbody td { padding: .875rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--com-border); font-size: .9375rem; }
.com-table tbody tr:last-child td { border-bottom: 0; }
.com-table tbody tr:hover { background: var(--com-table-head-bg); }
.com-company-name { font-weight: 600; color: var(--com-primary); text-decoration: none; }
.com-company-name:hover { color: var(--com-accent); text-decoration: underline; }
.com-uen { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; color: var(--com-muted); white-space: nowrap; }
/* ★ 2026-11-04：官方 SSIC 2025 分类名最长 200 字符（27 个超 100 字符），
   不能 nowrap，否则会把表格列撑爆。改成正常换行 + 限制最大宽度。 */
.com-ssic { font-size: .8125rem; color: var(--com-muted); white-space: normal; overflow-wrap: anywhere; }
/* 行业分类统计表：分类名（可点击进详情）—— 与 .com-company-name / .com-link-plain 同一套表内链接样式 */
.com-category-name { color: var(--com-primary); font-weight: 600; text-decoration: none; }
.com-category-name:hover { color: var(--com-accent); text-decoration: underline; }

/* ========================== SSIC 2025 层级树 ==========================
   /industry 的目录树：Section（一级）→ Division（二级）→ 分类名（三级）。
   用原生 <details>/<summary>：无 JS 时树也是完整可读的，键盘也能操作。 */
.com-tree-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.com-tree-hint { color: var(--com-muted); font-size: .9375rem; max-width: 46rem; }

/* 详情页的层级路径（Section / Division）—— 放在深色页头里，
   所以颜色要用浅色那套（--com-hero-lede），不能跟 .com-page-head p 一样是 --com-muted。 */
.com-page-head .com-industry-path {
  color: var(--com-hero-lede); font-size: .875rem; line-height: 1.5; margin-bottom: .5rem;
}

.com-tree { display: flex; flex-direction: column; gap: .75rem; }

.com-tree-section {
  background: var(--com-surface); border: 1px solid var(--com-border);
  border-radius: var(--com-radius-lg); overflow: hidden;
}
.com-tree-summary {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--com-primary); font-size: .9375rem;
  border-bottom: 1px solid transparent;
}
.com-tree-summary::-webkit-details-marker { display: none; }
.com-tree-summary:hover { background: var(--com-table-head-bg); }
/* 折叠箭头：自定义，不用浏览器默认 marker（默认 marker 在 flex 容器里位置不稳） */
.com-tree-summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--com-muted);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 150ms ease;
}
.com-tree-section[open] > .com-tree-summary { border-bottom-color: var(--com-border); }
.com-tree-section[open] > .com-tree-summary::before { transform: rotate(90deg); }

.com-tree-letter {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--com-radius-sm);
  background: var(--com-primary); color: #fff; font-weight: 700; font-size: .875rem;
}
.com-tree-secname { flex: 1 1 auto; min-width: 0; }
.com-tree-count { flex: none; color: var(--com-muted); font-weight: 400; font-size: .8125rem; white-space: nowrap; }

.com-tree-body { padding: .25rem 1.25rem 1.25rem; }

/* Division 降级为**分组标签**（2026-11-04 用户要求「三层都多了，两层最好」）。
   官方 SSIC 2025 是五层（Section/Division/Group/Class/Subclass），
   但公司只挂在 Subclass 这一层，Group/Class 没有公司数。
   所以树做成两层：Section -> 分类名；
   Division 保留官方二级名做视觉分组，但用**弱化的标签样式**，
   不再是「一级标题 + 一级标题 + 内容」的三层观感。 */
.com-tree-group { padding: .625rem 0 .25rem; }
.com-tree-group + .com-tree-group { border-top: 1px solid var(--com-border); }

.com-tree-grouplabel {
  font-size: .75rem; font-weight: 600; color: var(--com-muted);
  letter-spacing: .03em; text-transform: uppercase;
  margin: 0 0 .375rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
}

/* ★ 2026-11-04 方案 B：Division 分组折叠
   ---------------------------------------------------------------
   桌面端（≥576px）**完全保持原样**：组标题就是普通文字，分类直接铺开。
   手机端（≤575.98px）才把每个 Division 组折起来。

   用 `html.js` 做渐进增强：没有 JS 的访客看不到折叠按钮，
   分类也是全展开的（等于现在的行为）。 */
.com-tree-groupbtn { display: none; }

.com-tree-items {
  list-style: none; margin: 0 0 .5rem; padding: 0;
  /* 每个 Division 的分类用**多列**排（column-count），不是 grid ——
     grid 会把同一个 Division 的分类按行切开，视觉上像分成了好几组；
     多列排则像目录，列满后往下走，组内连续。
     ★ 2026-11-04：三列改两列（用户口径：内容不改，只把列宽放宽）。
       三列时每列只有约 35 字符宽，官方名平均占 1.81 行、最长 6 行，
       行高参差、扫读困难；两列每列约 45 字符，降到平均 1.4 行。 */
  columns: 2 24rem; column-gap: 2.5rem;
}
.com-tree-item {
  min-width: 0; font-size: .875rem; line-height: 1.5;
  break-inside: avoid; page-break-inside: avoid;
  /* ★ 2026-11-05：每条分类前面加一个圆点（用户要求）。
     不用 list-style —— 手机端 .com-tree-item 是 overflow:hidden，
     list-style 的 marker 画在 li 盒子**外面**，会被裁掉；
     所以用绝对定位的 ::before 画一个实心小圆点。 */
  position: relative;
  padding: .1875rem 0 .1875rem .85rem;
}
.com-tree-item::before {
  content: "";
  position: absolute;
  left: .2rem; top: .64em;
  width: .3rem; height: .3rem;
  border-radius: 50%;
  background: var(--com-muted);
}
.com-tree-item .com-category-name { font-weight: 400; }
.com-tree-item .com-category-name:hover { font-weight: 600; }

@media (max-width: 991.98px) {
  .com-tree-items { columns: 2 20rem; column-gap: 2rem; }
}
@media (max-width: 575.98px) {
  /* ★ 手机端：紧凑**单行**列表（2026-11-04 用户口径）。
     原来单列但让长名自由换行 -> 官方名平均 1.4 行、最长 5 行，
     985 个分类全展开 38496px（约 45 屏），密集又参差。
     现在每条固定一行 + 省略号，完整名在 title 属性里，
     点进去详情页也是完整官方名。 */
  .com-tree-items { columns: 1; column-gap: 0; }
  .com-tree-item {
    padding: 0 0 0 .85rem;
    line-height: 1.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .com-tree-item .com-category-name {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .com-tree-body { padding: .25rem .875rem .75rem; }
  .com-tree-summary { padding: .75rem .875rem; gap: .5rem; }
  .com-tree-count { display: none; }
  .com-tree-group { padding: .5rem 0 .125rem; }
  .com-tree-grouplabel { margin-bottom: .125rem; }
  /* 「Expand all」按钮在窄屏换行后单独占一行很突兀 -> 手机端隐藏，
     Section 标题本身就可点开，不需要这个按钮 */
  #com-tree-toggle { display: none; }
  /* 长提示在窄屏也省地方 */
  .com-tree-hint-long { display: none; }

  /* ★ 2026-11-04 方案 B：手机端把 Division 分组折起来。
     桌面端（≥576px）上面的 .com-tree-groupbtn 是 display:none，所以桌面端像素级不变。 */

  /* 组标题变成可点击的一行：箭头 + 组名 */
  html.js .com-tree-group.is-foldable .com-tree-grouplabel {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 0; padding: .625rem 0;
    cursor: pointer; user-select: none;
  }
  html.js .com-tree-group.is-foldable .com-tree-groupbtn {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; margin-left: -.25rem;
    background: none; border: 0; padding: 0; color: var(--com-muted);
  }
  html.js .com-tree-group.is-foldable .com-tree-groupbtn::before {
    content: ""; width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: transform 150ms ease;
  }
  html.js .com-tree-group.is-open .com-tree-groupbtn::before { transform: rotate(90deg); }
  html.js .com-tree-group.is-foldable .com-tree-groupname {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 折叠时组内分类不占空间 */
  html.js .com-tree-group.is-foldable:not(.is-open) .com-tree-items { display: none; }
  html.js .com-tree-group.is-foldable.is-open .com-tree-items {
    display: block; margin-top: .5rem;
  }
  /* 组头与组内容之间加一条细分隔线，展开后视觉上还是「一段一段」 */
  html.js .com-tree-group.is-foldable .com-tree-grouplabel {
    border-bottom: 1px solid var(--com-border);
  }
  html.js .com-tree-group.is-foldable.is-open .com-tree-grouplabel { border-bottom: 0; }

  /* 标题行里放不下时，Section 名先让位 */
  html.js .com-tree-summary .com-tree-secname {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ============================== Badges ============================== */
.com-status {
  display: inline-flex; align-items: center; gap: .375rem;
  border-radius: var(--com-radius-pill); padding: .2rem .625rem; font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.com-status::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; flex: 0 0 auto; }
/* Status meaning never relies on colour alone — every badge carries a visible text label.

   ⚠️ 选择器必须是 `.com-status.status-live` 而不是 `.com-status-live`：
   模板里写的是 `class="com-status {$statusClass}"`，$statusClass = "status-live"，
   这是**两个独立的 class**。写成 `.com-status-live` 匹配不到任何元素 ——
   三个状态配色会全部失效（徽章退回默认灰字 + 透明底）。踩过一次。 */
.com-status.status-live { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.com-status.status-live::before { background: var(--com-success); }
/* 详情页专用：非 live 的状态统一灰色标签
   （用户 2026-11-03 要求 —— 只有 live 保留绿色）。
   对比度 #4B5563 on #F3F4F6 = 6.87:1（AA 通过）；
   比旁边的 .com-pill 略深一点，两种标签不会糊在一起。 */
.com-status.status-neutral { background: #F3F4F6; color: #4B5563; border: 1px solid #D1D5DB; }
.com-status.status-neutral::before { background: #9CA3AF; }
.com-pill {
  display: inline-block; background: var(--com-table-head-bg); border: 1px solid var(--com-border);
  color: var(--com-muted); border-radius: var(--com-radius-sm); padding: .15rem .5rem; font-size: .75rem; white-space: nowrap;
}

/* ============================ CTA block ============================ */
.com-cta { background: var(--com-cta-bg); color: var(--com-cta-text); border-radius: var(--com-radius-lg); padding: 2.25rem; }
.com-cta h2 { color: var(--com-cta-text); font-size: 1.375rem; font-weight: 700; }
.com-cta p { color: var(--com-dark-text); font-size: .9375rem; margin-bottom: 0; }
.com-cta .btn-light { border-radius: var(--com-radius); font-weight: 600; padding: .6rem 1.35rem; }
.com-cta .btn-outline-light { border-color: var(--com-border-2); color: var(--com-cta-text); }
.com-cta-alt { background: var(--com-primary-2); }

/* ============================== Footer ============================== */
.com-footer { background: var(--com-primary); color: var(--com-dark-muted); padding: 2.5rem 0 2rem; font-size: .875rem; }
.com-footer h3 { color: var(--com-cta-text); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .875rem; }
.com-footer a { color: var(--com-dark-link); text-decoration: none; }
.com-footer a:hover { color: var(--com-cta-text); text-decoration: underline; }
.com-footer ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.com-footer li { margin-bottom: .4rem; }
.com-footer-bottom {
  border-top: 1px solid var(--com-dark-border); margin-top: 2rem; padding-top: 1.25rem;
  font-size: .8125rem; color: var(--com-dark-muted);
}

/* ======================= Company profile components =======================
   公司档案页专用组件。原先是页面级内联样式，现统一到共享文件，
   配色 token 集中管理 —— 改一处全站生效。 */
.com-entity-uen {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--com-accent); font-size: .9375rem;
}
.com-entity-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.com-entity-actions .btn-outline-light { border-color: var(--com-border-2); color: var(--com-primary); }
.com-entity-actions .btn-outline-light:hover { background: var(--com-bg); border-color: var(--com-accent); color: var(--com-accent); }
.com-updated-value { color: var(--com-primary); font-size: .9375rem; font-weight: 600; margin: 0; }
.com-btn-invert { background: var(--com-surface); border-color: var(--com-surface); color: var(--com-primary); font-weight: 600; }
.com-btn-invert:hover { background: var(--com-bg); border-color: var(--com-bg); color: var(--com-primary); }
.com-building-link { color: var(--com-accent); font-weight: 600; text-decoration: none; }
.com-building-link:hover { text-decoration: underline; }

/* 同楼栋 B2B 服务 CTA */
.com-service-box {
  background: var(--com-tinted-bg); border: 1px solid var(--com-chip-border);
  border-left: 3px solid var(--com-accent); border-radius: var(--com-radius);
}
.com-service-box h2 { font-size: 1rem; font-weight: 700; margin-bottom: .375rem; }
/* Inside the tinted panel the light-surface --com-muted drops to 3.97:1,
   so meta text here has to use the tinted text colour instead. */
.com-service-box .com-meta { color: var(--com-tinted-text); }
.com-service-box a:not(.btn) { color: var(--com-accent); }
.com-service-item { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--com-chip-border); }
.com-service-item:last-child { border-bottom: 0; }
.com-service-item .com-service-ico { color: var(--com-accent); flex: 0 0 auto; margin-top: .1rem; }
.com-service-item h3 { font-size: .875rem; font-weight: 600; margin-bottom: .15rem; }
.com-service-item p { font-size: .8125rem; color: var(--com-tinted-text); margin: 0; line-height: 1.45; }

/* 关联条目（同楼栋 / 同行业 / 相关链接） */
.com-similar { display: block; padding: .75rem 0; border-bottom: 1px solid var(--com-border); }
.com-similar:last-child { border-bottom: 0; }
.com-similar h3 { font-size: .875rem; font-weight: 600; margin-bottom: .15rem; }
.com-similar p { font-size: .8125rem; color: var(--com-muted); margin: 0; }

/* =========================== Utility helpers ======================== */
.com-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.com-meta { font-size: .8125rem; color: var(--com-muted); }
.com-lead-sm { color: var(--com-muted); font-size: .9375rem; line-height: 1.6; }
.com-link-plain { color: var(--com-primary); font-weight: 600; text-decoration: none; }
.com-link-plain:hover { color: var(--com-accent); text-decoration: underline; }

/* Smaller stat value used in the "At a glance" card on the company profile */
.com-stat-value-sm { font-size: 1.375rem; }

/* Solid accent button — used for the "Connect with a provider" CTA */
.com-btn-accent {
  background: var(--com-accent); border-color: var(--com-accent); color: #fff; font-weight: 600;
}
.com-btn-accent:hover { background: var(--com-accent-2); border-color: var(--com-accent-2); color: #fff; }

/* Empty-result row inside a company table */
.com-empty-cell { text-align: center; padding: 2.5rem 1rem; color: var(--com-muted); }

/* Generic centred empty state (search miss, no tenants) */



/* Visually hidden but announced */
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* ====================== Reduced motion ====================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== Touch targets (mobile) ==================== */
/* btn-sm renders at 31px and default form controls at 37px — both below the
   44x44px minimum touch target on touch devices */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; display: inline-flex; align-items: center; }
  .pagination-sm .page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .com-navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
  .form-control, .form-select { min-height: 44px; }
  .btn:not(.btn-lg) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .com-filter-list a { min-height: 44px; }
  /* 导航品牌与汉堡按钮 */
  .com-navbar .navbar-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .com-navbar .navbar-toggler { min-width: 44px; min-height: 44px; }
  /* 卡片头部的 "View all" / "Reset" 之类的小链接 */
  .com-link-plain { min-height: 44px; display: inline-flex; align-items: center; }
  .com-card-header { min-height: 44px; }
  /* 面包屑里的链接是行内文字，豁免 44px 规则（WCAG 2.5.8） */
}