/* COMPANIES AND CONTACTS (2026-10-21, mockup /mockups/companies-contacts/ variant C,
   approved by Jake). ONE box on project pages (#ppCC) and in the map's project
   modal (#pmCC): a title, a one-line sub, the tabs "Companies N | Contacts N",
   then the Who to call firm rows (tmw-whocall.js, twc-*) or the project team
   (tmw-team.js, tmt-*) exactly as they render on their own, and ONE Pro gate at
   the bottom for free viewers. The outer box is the team section's box
   (.tmt.tmt-page / .tmt.tmt-map from tmw-team.css); cc-* is the only new CSS.
   Behaviour: tmw-cc.js. BUMP ?v= in generate_pages.py, map/index.html and
   tmw-cc.js (CSS_V) on change. */

/* the box itself, so a server-rendered page paints right before tmw-team.css loads */
.cc{--tmt-cream:#ECEAE5;--tmt-mute:#9AA39C;--tmt-mute2:#C2C9C3;--tmt-gold-soft:#F0D68A;--tmt-lav:#C4B5FD;--tmt-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  position:relative;font-family:var(--tmt-sans);color:var(--tmt-cream);-webkit-font-smoothing:antialiased}
.cc,.cc *{box-sizing:border-box}
.cc [hidden]{display:none!important}
.cc.tmt-page{background:#161618;border-radius:22px;padding:22px 22px 20px}
.cc.tmt-map{margin:0 -6px 14px;background:#17171A;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:16px 16px 14px}
#projectModal .cc.tmt-map{margin:22px -6px 14px}
.cc>.tmt-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;font-weight:800;margin:0 0 6px;line-height:1.25}
.cc.tmt-map>.tmt-h{font-size:11px}
.cc-dek{font:500 13.5px/1.5 Inter,-apple-system,sans-serif;color:rgba(255,255,255,.55);margin:0 0 14px}
.cc.tmt-map .cc-dek{font-size:12.5px}

/* the tabs, in the site's one toggle look */
.cc-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#0d0f0e;border:1px solid rgba(255,255,255,.08);margin:0 0 14px;max-width:100%}
.cc .cc-tabs button{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;cursor:pointer;font:600 12.5px/1 Inter,-apple-system,sans-serif;letter-spacing:normal;text-transform:none;
  height:30px;padding:0 14px!important;border-radius:999px;color:#C2C9C3;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s}
.cc.tmt-page .cc-tabs button{height:32px;font-size:13px}
.cc .cc-tabs button span{color:rgba(255,255,255,.38);font-weight:500;margin-left:5px}
.cc .cc-tabs button span:empty{display:none}
.cc .cc-tabs button:hover{color:#fff}
.cc .cc-tabs button.on{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cc .cc-tabs button.on span{color:rgba(255,255,255,.5)}
.cc .cc-tabs button:focus-visible{outline:2px solid #C4B5FD;outline-offset:2px}
.cc-pane:focus{outline:none}
.cc-none{margin:0;padding:14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.45;color:rgba(255,255,255,.5)}

/* the ONE Pro gate at the bottom (free viewers) */
.cc-gate{display:flex;justify-content:center;margin-top:14px}
.cc-gate .tpg-pill{max-width:100%}
.cc.cc-pro .cc-gate{display:none}
/* first paint for a Pro member (journal-auth's tmw-paid hint): no gate until the details load */
html.tmw-paid .cc .cc-gate:not(.cc-ok){visibility:hidden}

/* ── the two sections inside, as they render on their own ── */
/* the holders lose their own box, title, sub and gate: the outer box has them */
.cc .pp-sec{margin:0}
.cc .tmt.tmt-page,.cc .tmt.tmt-map{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;min-height:0}
.cc [data-tmw-team] .tmt-h,
.cc [data-tmw-who]>.pp-sec-h,.cc [data-tmw-who]>.pm-section-title,.cc [data-tmw-who]>.twc-dek,.cc [data-tmw-who] .twc-gate,
.cc .pm-firms-section>.pm-section-title,.cc [data-cc-fallback]>.pp-sec-h{display:none}
#projectModal .cc .twc{margin-top:0}
#projectModal .cc .pm-firms-section{margin:0}
/* who to call: links keep their own colours inside the team box's a{color:inherit} */
.cc .twc-ln{color:#fff}
.cc .twc .twc-chip{padding:5px 11px;line-height:1.3}
/* the box is narrower than the old card: a long office line wraps instead of spilling out */
.cc .twc-city{white-space:normal}
.cc.tmt-map .twc-row{grid-template-columns:92px minmax(0,1fr);gap:12px}
/* the team strip, spaced as in the mockup */
.cc .tmt-ver{margin:0 0 2px}
.cc .tmt-vp{padding-top:10px}
.cc .tmt-foot{margin-top:10px}
@media(max-width:540px){
  .cc .tmt-ver .tmt-dot{display:none}
  .cc.tmt-map .twc-row{grid-template-columns:1fr;gap:8px}
}
@media(max-width:640px){
  .cc.tmt-page{padding:18px 16px 16px;border-radius:20px}
}
/* phones: the one gate pill keeps its whole line ("Phones and emails for everyone") */
@media(max-width:420px){
  .cc-gate .tpg-pill.sm{gap:8px;padding-left:12px;font-size:12px}
  .cc-gate .tpg-pill > span svg{margin-right:5px}
}
@media(max-width:374px){
  .cc-gate .tpg-pill > span svg{display:none}
}