/* hypercluster.org's legal pages (/terms, /privacy, /green-pledge), on top of the shared design
   (ui/hc.css). Long text made easy to read: one comfortable column, a table of contents beside it
   on wide screens and above it on phones, numbered parts and clauses.

   Both languages are in the page. Each part holds its English and its Chinese side by side
   (<div class="bl" lang="en"> and <div class="bl" lang="zh-CN">); legal.js sets
   <html data-lang="en|zh"> from the visitor's choice (HC.lang) and the other one is hidden.
   Without scripts both show, English first. */
html[data-lang="zh"] .bl[lang="en"],
html[data-lang="en"] .bl[lang="zh-CN"]{display:none!important}
html:not([data-lang]) span.bl[lang="zh-CN"]::before{content:" / "}
[lang="zh-CN"]{font-family:Poppins,'PingFang SC','Hiragino Sans GB','Noto Sans SC','Noto Sans CJK SC','Microsoft YaHei',system-ui,sans-serif}

/* ---------- top of the page ---------- */
.lg-top{padding-bottom:8px}
.lg-top .stack{max-width:760px}
.lg-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lg-langs{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--field)}
.lg-langs a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.lg-langs a[aria-current="true"]{background:rgba(47,140,255,.18);color:var(--text)}
.lg-langs a:hover{color:var(--text)}

/* ---------- contents beside the text ---------- */
.lg-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);padding-top:8px}
@container site (min-width:1024px){.lg-grid{grid-template-columns:270px minmax(0,1fr);gap:56px;align-items:start}}
.lg-toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 6px 10px}
.lg-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:4px 12px;font-weight:600;font-size:14px}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.lg-toc[open] summary::after{transform:rotate(225deg);margin-top:4px}
.lg-toc ol{list-style:none;margin:0;padding:0 4px;display:grid;gap:1px}
.lg-toc a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:14px;line-height:1.4}
.lg-toc a .n{min-width:1.6em;color:var(--faint);font-variant-numeric:tabular-nums;font-size:13px}
.lg-toc a:hover{color:var(--text);background:rgba(148,163,184,.08)}
.lg-toc a[aria-current="true"]{color:var(--text);background:var(--blue-bg)}
.lg-toc a[aria-current="true"] .n{color:var(--link)}
.lg-toc a.prod{font-weight:500}
@container site (min-width:1024px){
  .lg-toc{position:sticky;top:92px;max-height:calc(100vh - 116px);max-height:calc(100dvh - 116px);overflow:auto;background:transparent;border:0;padding:0}
  .lg-toc summary{display:none}
}

/* ---------- the text ---------- */
.lg-doc{min-width:0;max-width:74ch;display:flex;flex-direction:column}
.lg-doc .bl[lang="zh-CN"]{max-width:44em}
.lg-sec{scroll-margin-top:84px;padding:28px 0 8px;border-top:1px solid var(--line)}
.lg-sec:first-child{border-top:0;padding-top:0}
.lg-sec h2{font-size:clamp(20px,3.2cqi,24px);font-weight:600;display:flex;gap:12px;align-items:baseline;margin-bottom:14px}
.lg-sec h2 .n{color:var(--link);font-variant-numeric:tabular-nums;flex-shrink:0}
.lg-sec h2 .self{margin-left:auto;color:var(--faint);text-decoration:none;font-size:16px;font-weight:500;opacity:0;transition:opacity .15s;padding:0 4px}
.lg-sec:hover h2 .self,.lg-sec h2 .self:focus-visible{opacity:1}
.lg-sec h3{font-size:16px;font-weight:600;margin:22px 0 8px;color:var(--text)}
.lg-doc p,.lg-doc li{color:#cbd5e1;font-size:16px;line-height:1.75}
.lg-doc [lang="zh-CN"] p,.lg-doc [lang="zh-CN"] li,.lg-doc p[lang="zh-CN"]{line-height:1.9}
.lg-doc p+p{margin-top:12px}
.lg-doc b,.lg-doc strong{color:var(--text);font-weight:600}
.lg-doc a{text-underline-offset:3px;overflow-wrap:anywhere}
.lg-doc ul{margin:8px 0 0;padding-left:1.3em;display:grid;gap:6px}
.lg-doc ul li::marker{color:var(--faint)}
.lg-intro{margin-bottom:14px}
.lg-intro p{color:var(--muted)}
.cl{display:grid;grid-template-columns:3em minmax(0,1fr);gap:0 6px;padding:7px 0}
.cl>.n{color:var(--faint);font-variant-numeric:tabular-nums;font-size:14px;padding-top:3px;line-height:1.75}
.cl>.ct{min-width:0}
.cl:target{background:var(--blue-bg);border-radius:10px;margin-inline:-10px;padding-inline:10px}
.lg-caps{text-transform:none;letter-spacing:0}

/* a box that sums up, or a point not to miss */
.lg-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:0 0 28px}
.lg-box h2,.lg-box h3{font-size:17px;font-weight:600;margin:0 0 10px}
.lg-box ul{gap:8px}
.lg-box .tiny{margin-top:12px}
.lg-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--wait-bg);font-size:14px;line-height:1.6;margin:10px 0}
.lg-note svg{flex-shrink:0;margin-top:2px;color:var(--wait)}
.lg-note.info{background:var(--blue-bg)} .lg-note.info svg{color:var(--link)}
.lg-note p{font-size:14px!important;line-height:1.6!important}

/* tables (who receives what, how long things are kept) */
.lg-table{overflow-x:auto;margin:10px 0 4px;border:1px solid var(--line);border-radius:12px}
.lg-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.lg-table th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--card);vertical-align:bottom}
.lg-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:#cbd5e1;line-height:1.55}
.lg-table tr:last-child td{border-bottom:0}
.lg-table td:first-child{color:var(--text);font-weight:500}
@container site (max-width:599px){
  .lg-table{border:0;border-radius:0;overflow:visible}
  .lg-table table{min-width:0}
  .lg-table thead{display:none}
  .lg-table tr{display:block;border:1px solid var(--line);border-radius:12px;padding:6px 0;margin-bottom:10px;background:var(--card)}
  .lg-table td{display:block;border:0;padding:4px 14px}
  .lg-table td[data-h]::before{content:attr(data-h);display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
}

.lg-end{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.lg-end p{font-size:14px;color:var(--muted)}

/* the Green Pledge's facts and goals */
.lg-facts{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:6px 0 10px}
@container site (min-width:600px){.lg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lg-facts .card{display:flex;flex-direction:column;gap:6px}
.lg-facts .card p{font-size:14px;line-height:1.6;color:var(--muted)}
.lg-facts .card b{font-size:15px}
.lg-facts .card .pill{align-self:flex-start}
.pill.goal{background:var(--wait-bg);color:var(--wait)}

@media print{
  .hdr,.menu,#ftr,.lg-toc,.lg-langs,.lg-sec h2 .self{display:none!important}
  html,body,.site{background:#fff!important;color:#000!important}
  .lg-doc p,.lg-doc li,.lg-table td{color:#000!important}
  .lg-grid{display:block}
  .lg-doc{max-width:none}
  .lg-box,.lg-table th,.lg-table tr{background:#fff!important}
}