/* DPP supplier directory - ChatGPT handoff, approved v1.
   app/globals.css reproduced as delivered and scoped to .dpp-dir, so its tokens
   (--accent #e8cc19, --yellow #f4eebd) and its generic class names (.hero,
   .eyebrow, .stat, .filter) cannot collide with the register stylesheet or
   recolour the site nav and footer. Values, spacing and both breakpoints are
   unchanged. The tailwind import is dropped; nothing external is fetched. */

.dpp-dir{ --ink:#171816; --muted:#6c6e68; --line:#d8d8d2; --soft:#f5f5f1; --yellow:#f4eebd; --accent:#e8cc19; }

.dpp-dir *{ box-sizing:border-box; }

.dpp-dir{ margin:0; background:#fbfbf8; color:var(--ink); font-family:Arial, Helvetica, sans-serif; }

.dpp-dir button, .dpp-dir input{ font:inherit; }

.dpp-dir button{ color:inherit; }

.dpp-dir{ min-height:100vh; }

.dpp-dir .hero{ padding:68px max(34px,calc((100vw - 1380px)/2)) 45px; border-bottom:1px solid var(--line); background:#f6f6f1; }

.dpp-dir .eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.16em; }

.dpp-dir .eyebrow span{ width:8px; height:8px; background:var(--accent); }

.dpp-dir .hero-grid{ display:grid; grid-template-columns:1fr 240px; gap:70px; align-items:end; margin-top:30px; }

.dpp-dir h1{ font-size:clamp(48px,5.2vw,78px); line-height:.96; letter-spacing: -0.055em; margin:0; font-weight: 400; }

.dpp-dir .hero p{ font-family:Georgia,serif; font-size:21px; line-height:1.5; max-width:620px; color:#4d4f49; margin:22px 0 0; }

.dpp-dir .stat{ border-left:1px solid #b8b8b1; padding-left:27px; display:grid; }

.dpp-dir .stat strong{ font-size:44px; letter-spacing:-.05em; line-height:1; }

.dpp-dir .stat span{ font-size:13px; margin-top:7px; }

.dpp-dir .stat small{ color:var(--muted); margin-top:18px; font-size:11px; }

.dpp-dir .directory{ max-width:1380px; margin:auto; padding:31px 34px 70px; }

.dpp-dir .search-row{ display:grid; grid-template-columns:minmax(280px,1.8fr) repeat(3,minmax(130px,.8fr)) minmax(190px,1fr); gap:9px; }

.dpp-dir .search, .dpp-dir .filter{ height:52px; border:1px solid #c9cac4; background:#fff; display:flex; align-items:center; }

.dpp-dir .search{ padding:0 16px; gap:12px; }

.dpp-dir .search svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }

.dpp-dir .search input{ border:0; outline:0; flex:1; min-width:0; background:transparent; }

.dpp-dir .search kbd{ border:1px solid #ddd; border-radius:3px; padding:3px 6px; color:#888; font-size:10px; }

.dpp-dir .filter{ padding:0 16px; justify-content:space-between; cursor:pointer; }

.dpp-dir .chevron{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; transition:.2s; flex:none; }

.dpp-dir .chevron.open{ transform:rotate(180deg); }

.dpp-dir .toolbar{ min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; }

.dpp-dir .result{ font-size:12px; color:var(--muted); }

.dpp-dir .result b{ color:var(--ink); }

.dpp-dir .result span{ margin:0 8px; }

.dpp-dir .segmented{ background:#eeeeea; padding:3px; display:flex; }

.dpp-dir .segmented button{ border:0; padding:8px 12px; font-size:11px; background:transparent; cursor:pointer; }

.dpp-dir .segmented .active{ background:#fff; box-shadow:0 1px 4px #00000012; }

.dpp-dir .featured{ border:1px solid #c7c7c0; background:#fff; margin-bottom:17px; }

.dpp-dir .featured-label{ background:#222320; color:#fff; width:max-content; padding:7px 11px; font-size:9px; font-weight:700; letter-spacing:.14em; }

.dpp-dir .featured-body{ display:grid; grid-template-columns:56px 1.15fr 1fr auto; gap:20px; align-items:center; padding:20px 22px 24px; }

.dpp-dir .avatar{ width:46px; height:46px; border:1px solid #bfc0ba; background:#fafaf7; display:grid; place-items:center; font-size:15px; font-weight:700; flex:none; }

.dpp-dir .avatar.muted{ background:#eeeeea; color:#555; }

.dpp-dir .identity h2{ margin:0; font-size:20px; letter-spacing:-.025em; line-height:1.25; }

.dpp-dir .identity h2 span{ margin-left:8px; font-weight:400; }

.dpp-dir .identity p, .dpp-dir .exception-note p{ margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }

.dpp-dir .exception-note{ border-left:1px solid var(--line); padding-left:22px; }

.dpp-dir .exception-note b{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.dpp-dir .record-link{ background:transparent; border:0; border-bottom:1px solid #222; padding:8px 0; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }

.dpp-dir .record-link span{ margin-left:14px; }

.dpp-dir .table-head, .dpp-dir .supplier-main{ display:grid; grid-template-columns:minmax(210px,1.45fr) .65fr 1.05fr 1fr 1.2fr .65fr 24px; gap:16px; align-items:center; }

.dpp-dir .table-head{ padding:0 15px 10px 18px; color:#52544f; font-size:9px; font-weight:700; letter-spacing:.1em; }

.dpp-dir .rows{ border-top:1px solid var(--line); }

.dpp-dir .supplier{ background:#fff; border:1px solid var(--line); border-top:0; position:relative; }

.dpp-dir .supplier-main{ width:100%; min-height:78px; padding:12px 14px 12px 18px; text-align:left; border:0; background:#fff; cursor:pointer; position:relative; }

.dpp-dir .supplier-main:hover{ background:#f9f9f5; }

.dpp-dir .edge{ position:absolute; left:0; top:0; bottom:0; width:3px; background:#888; }

.dpp-dir .edge.verified{ background:var(--accent); }

.dpp-dir .supplier-name{ display:flex; align-items:center; gap:13px; min-width:0; }

.dpp-dir .supplier-name b{ font-size:15px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.dpp-dir .supplier-name small{ display:block; color:var(--muted); font-size:9px; margin-top:5px; }

.dpp-dir .supplier-main em, .dpp-dir .chips i{ display:inline-block; width:max-content; border:1px solid #c9cac4; padding:6px 8px; font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }

.dpp-dir .hq{ font-size:11px; line-height:1.4; }

.dpp-dir .chips{ display:flex; flex-wrap:wrap; gap:5px; }

.dpp-dir .chips i{ text-transform:none; letter-spacing:0; }

.dpp-dir .chips .empty{ color:#666; border-style:dashed; }

.dpp-dir .evidence-cell b{ font-size:11px; display:block; }

.dpp-dir .evidence-cell small{ display:block; margin-top:5px; font-size:9px; color:var(--muted); }

.dpp-dir .date{ font-size:10px; }

.dpp-dir .expanded-panel{ background:#f2f1dc; border-top:1px solid #d7d2a2; display:grid; grid-template-columns:1fr 1fr auto; gap:35px; align-items:center; padding:22px 32px 24px 77px; }

.dpp-dir .expanded-panel span{ font-size:8px; font-weight:700; letter-spacing:.13em; display:block; margin-bottom:7px; }

.dpp-dir .expanded-panel b{ font-size:12px; }

.dpp-dir .expanded-panel p{ margin:6px 0 0; font-size:10px; line-height:1.45; color:#646256; max-width:350px; }

.dpp-dir .expanded-panel a{ color:inherit; font-size:11px; font-weight:700; text-decoration:none; border-bottom:1px solid; padding-bottom:6px; white-space:nowrap; }

.dpp-dir .expanded-panel a span{ display:inline; margin-left:15px; }

.dpp-dir .footer-note{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:25px 0; font-size:10px; color:var(--muted); }

.dpp-dir .footer-note button{ background:var(--ink); color:#fff; border:0; padding:12px 18px; font-size:10px; cursor:pointer; }

.dpp-dir .footer-note a{ color:inherit; justify-self:end; }

@media (max-width:1050px){.dpp-dir .search-row{ grid-template-columns:2fr repeat(2,1fr); }

.dpp-dir .search-row .filter:nth-of-type(3), .dpp-dir .search-row .evidence{ display:none; }

.dpp-dir .table-head{ display:none; }

.dpp-dir .supplier-main{ grid-template-columns:1.3fr .7fr 1fr 1fr 22px; }

.dpp-dir .supplier-main .hq, .dpp-dir .supplier-main .date{ display:none; }

.dpp-dir .featured-body{ grid-template-columns:56px 1fr 1fr; }

.dpp-dir .record-link{ grid-column:3; }
}

@media (max-width:700px){.dpp-dir .hero{ padding:38px 20px 30px; }

.dpp-dir .hero-grid{ display:block; margin-top:24px; }

.dpp-dir h1{ font-size:47px; }

.dpp-dir .hero p{ font-size:17px; margin-top:16px; }

.dpp-dir .stat{ margin-top:29px; grid-template-columns:auto 1fr; column-gap:13px; align-items:end; padding-left:16px; }

.dpp-dir .stat strong{ font-size:34px; }

.dpp-dir .stat small{ grid-column:1/-1; margin-top:10px; }

.dpp-dir .directory{ padding:18px 14px 50px; }

.dpp-dir .search-row{ grid-template-columns:1fr 48px; }

.dpp-dir .search-row .filter{ display:none; }

.dpp-dir .search-row .filter:first-of-type{ display:flex; font-size:0; padding:0; justify-content:center; }

.dpp-dir .search-row .filter:first-of-type:before{ content:"☷"; font-size:17px; }

.dpp-dir .search-row .filter:first-of-type svg{ display:none; }

.dpp-dir .search kbd{ display:none; }

.dpp-dir .toolbar{ align-items:flex-start; padding:15px 0; min-height:0; }

.dpp-dir .result span, .dpp-dir .result span+*{ display:none; }

.dpp-dir .segmented button{ padding:7px 8px; font-size:9px; }

.dpp-dir .featured-body{ grid-template-columns:46px 1fr; gap:13px; padding:16px; }

.dpp-dir .featured .avatar{ width:42px; height:42px; }

.dpp-dir .exception-note{ grid-column:1/-1; border-left:0; border-top:1px solid var(--line); padding:14px 0 0; }

.dpp-dir .record-link{ grid-column:1/-1; justify-self:start; }

.dpp-dir .identity h2{ font-size:16px; }

.dpp-dir .supplier-main{ grid-template-columns:1fr 22px; min-height:91px; padding:13px 12px 13px 15px; }

.dpp-dir .supplier-main>span:not(.edge):not(.supplier-name), .dpp-dir .supplier-main>svg{ display:none; }

.dpp-dir .supplier-main>svg{ display:block; }

.dpp-dir .supplier-name b{ font-size:15px; }

.dpp-dir .supplier-name small{ font-size:9px; }

.dpp-dir .expanded-panel{ grid-template-columns:1fr; padding:18px 20px; gap:16px; }

.dpp-dir .expanded-panel a{ justify-self:start; }

.dpp-dir .footer-note{ grid-template-columns:1fr; gap:16px; text-align:center; }

.dpp-dir .footer-note a{ justify-self:center; }
}

/* Integration only: the approved control draws its own chevron, so the native
   select arrow would render a second one. The select fills the control it sits
   in and stays a real, keyboard-accessible select. */
.dpp-dir .filter { position: relative; }
.dpp-dir .filter select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; color: inherit;
  flex: 1; min-width: 0; padding: 0; margin: 0; cursor: pointer;
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 40px 0 16px;
}
.dpp-dir .filter select:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.dpp-dir .filter .chevron { margin-left: auto; pointer-events: none; }

/* ---- isolation, not design ---------------------------------------------
   register.css is also loaded on this page and defines .hero and .eyebrow.
   Scoping the handoff stopped its rules leaking OUT; these stop ours leaking
   IN. Every value below is the approved package's own - the handoff sets no
   font-family on headings, so they inherit Arial from the block, and .hero h1
   was picking up register.css's Georgia and its 760px cap instead. */

.dpp-dir h1, .dpp-dir h2, .dpp-dir h3, .dpp-dir .hero h1 { font-family: inherit; }
.dpp-dir .hero h1 {
  max-width: none;
  font-size: clamp(48px, 5.2vw, 78px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: .96;
}
.dpp-dir .hero {
  padding: 68px max(34px, calc((100vw - 1380px) / 2)) 45px;
  border-bottom: 1px solid var(--line);
  border-top: 0;
}
.dpp-dir .eyebrow {
  margin: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: none;
}

@media (max-width: 700px) {
  .dpp-dir .hero { padding: 38px 20px 30px; }
  .dpp-dir .hero h1 { font-size: 47px; }
}

/* The row is a link, so it carries the page's text colour and no underline. */
.dpp-dir .supplier-main { color: inherit; text-decoration: none; }
.dpp-dir .supplier-main .go { text-align: right; color: #777; font-size: 13px; }

/* ---- entry point to "Add your company" -----------------------------------
   ChatGPT handoff, approved v1 - a surgical addition to the approved directory.
   Reproduced as delivered and scoped to .dpp-dir like the rest of the package.
   Placement per the handoff: after the toolbar, before the research exception. */

.dpp-dir .missing-company { min-height:76px; margin-bottom:17px; padding:17px 22px; border:1px solid #d7cd82; background:var(--yellow); color:var(--ink); display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; }
.dpp-dir .missing-company-copy { display:flex; align-items:baseline; gap:18px; min-width:0; }
.dpp-dir .missing-company-copy strong { font-size:16px; letter-spacing:-.015em; white-space:nowrap; }
.dpp-dir .missing-company-copy>span { color:#5f5d4f; font-size:11px; line-height:1.5; }
.dpp-dir .missing-company-action { border-bottom:1px solid var(--ink); padding:6px 0; font-size:11px; font-weight:700; white-space:nowrap; }
.dpp-dir .missing-company-action span { margin-left:18px; transition:transform .18s ease; display:inline-block; }
.dpp-dir .missing-company:hover .missing-company-action span { transform:translateX(4px); }
.dpp-dir .missing-company:focus-visible { outline:3px solid #d5bb00; outline-offset:3px; }

@media (max-width:700px) {
  .dpp-dir .missing-company { min-height:0; padding:17px 16px; grid-template-columns:1fr; gap:15px; }
  .dpp-dir .missing-company-copy { align-items:flex-start; flex-direction:column; gap:7px; }
  .dpp-dir .missing-company-copy strong { font-size:15px; }
  .dpp-dir .missing-company-action { justify-self:start; min-height:34px; display:flex; align-items:center; }
}