/* ==========================================================================
   site-cn.css — Mastering AI Tools · AI实战大师课 (China Edition)
   Loaded ONLY on China pages, after site.css. Replaces Google Fonts.
   Latin: self-hosted DM Sans + Sora (fonts/, SIL OFL).
   Chinese: each device's built-in fonts — never a CJK web font.
   ========================================================================== */

/* ---- Self-hosted Latin fonts ------------------------------------------- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/dm-sans-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/dm-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/sora-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sora-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/sora-latin-800-normal.woff2) format('woff2')}

/* ---- Font stacks: Latin first, then each platform's Chinese system font --
   Apple: PingFang SC · Windows: Microsoft YaHei · Android/Huawei/Linux: Noto / Source Han */
:root{
  --cn-zh:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC','Source Han Sans SC','HarmonyOS Sans SC',sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',sans-serif;
  --font-display:'Sora','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',sans-serif;
  --gold:#f5b731; --gold-deep:#d4943a; --navy:#060d1a;
}
body.cn{font-family:var(--font-body)}
body.cn .font-serif{font-family:var(--font-display)}

/* Every Chinese run is marked lang="zh-Hans" */
:lang(zh-Hans){font-family:var(--cn-zh);letter-spacing:0;text-transform:none;font-style:normal}
p:lang(zh-Hans),li:lang(zh-Hans),.zh-body{line-height:1.7;font-size:max(15px,1em)}

/* ---- Course lockup (4 fixed lines) -------------------------------------- */
.mat-lockup{display:flex;flex-direction:column;gap:.35rem}
.mat-lockup__en{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;line-height:1.05;
  background:linear-gradient(135deg,#fde08a 0%,var(--gold) 45%,var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:clamp(2.25rem,6vw,4rem)}
.mat-lockup__zh{font-family:var(--cn-zh);font-weight:700;color:#fff;letter-spacing:.04em;font-size:clamp(1.35rem,3.6vw,2.4rem);line-height:1.25}
.mat-lockup__zh-sub{font-family:var(--cn-zh);font-weight:400;color:rgba(255,255,255,.72);font-size:clamp(.95rem,1.8vw,1.15rem);line-height:1.6}
.mat-lockup__en-sub{font-family:'DM Sans',system-ui,sans-serif;color:rgba(255,255,255,.6);font-size:clamp(.9rem,1.6vw,1.05rem);line-height:1.6}
.mat-lockup--compact .mat-lockup__en{font-size:1rem;letter-spacing:.12em}
.mat-lockup--compact .mat-lockup__zh{font-size:.95rem}

/* ---- Bilingual module titles: "AI Foundations · AI基础与思维模型" -------- */
.mod-title .mod-title__zh{font-family:var(--cn-zh);font-weight:500;color:rgba(255,255,255,.62);margin-left:.4em}
.mod-title .mod-title__zh::before{content:'· ';color:rgba(245,183,49,.6)}

/* ---- Term chips with pinyin + meaning tooltip ----------------------------
   <span class="term" tabindex="0" data-tip="tíshì cí — the instruction you give the AI">Prompt <span lang="zh-Hans">提示词</span></span> */
.term{position:relative;display:inline-flex;align-items:baseline;gap:.3em;padding:.05em .5em;border-radius:.45em;
  background:rgba(245,183,49,.1);border:1px solid rgba(245,183,49,.28);color:#fde7b0;font-weight:500;white-space:nowrap;cursor:help}
.term [lang="zh-Hans"]{color:#fff}
.term:focus{outline:2px solid rgba(245,183,49,.6);outline-offset:2px}
.term[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
  width:max-content;max-width:260px;white-space:normal;padding:.5rem .7rem;border-radius:.6rem;background:#0f2035;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.4);color:rgba(255,255,255,.85);font-size:.8rem;font-weight:400;line-height:1.45;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60}
.term[data-tip]:hover::after,.term[data-tip]:focus::after{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---- App name pairs: "Doubao 豆包" ------------------------------------- */
.app-name [lang="zh-Hans"]{opacity:.8}

/* ---- "中文版" reveal for example prompts ------------------------------- */
.zh-toggle{margin-top:.6rem}
.zh-toggle>summary{cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--gold);list-style:none}
.zh-toggle>summary::-webkit-details-marker{display:none}
.zh-toggle>summary::before{content:'+';font-weight:700}
.zh-toggle[open]>summary::before{content:'–'}
.zh-toggle>div{margin-top:.5rem;padding:.75rem 1rem;border-radius:.75rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}

/* ---- Edition badge ------------------------------------------------------ */
.cn-edition{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border-radius:999px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);background:rgba(245,183,49,.08);border:1px solid rgba(245,183,49,.25)}
.cn-edition [lang="zh-Hans"]{letter-spacing:0;text-transform:none}

/* ---- Footer contact (replaces X / LinkedIn on China pages) -------------- */
.cn-contact{display:flex;align-items:center;gap:1rem;font-size:.8rem;color:rgba(255,255,255,.55)}
.cn-contact a{color:rgba(255,255,255,.7)}
.cn-contact a:hover{color:var(--gold)}
.cn-wechat-qr{width:72px;height:72px;border-radius:.5rem;background:#fff;display:grid;place-items:center;color:#060d1a;font-size:.6rem;text-align:center;line-height:1.2}

/* ---- Dashboard: keep titles clear of the "Coming soon" tag --------------- */
.lesson-card.coming-soon h3{padding-right:5.75rem}

/* ---- Lesson pages: shared bits some lesson shells don't define ----------- */
.tool-pill.link{background:rgba(100,149,237,0.06);border:1px solid rgba(100,149,237,0.12);color:rgba(130,170,230,0.7)}
.tool-pill.link:hover{background:rgba(100,149,237,0.12);color:rgba(150,190,250,0.9)}
.cn-btn[aria-pressed="true"]{background:rgba(212,148,58,.16);border-color:rgba(212,148,58,.6)}
/* Prompt library (2.7): colour for the China Workplace category ("cat-China Workplace" → .cat-China) */
.cat-China{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#f87171}
/* tooltip takes no layout space until shown (prevents sideways scroll on phones) */
.term[data-tip]::after{display:none}
.term[data-tip]:hover::after,.term[data-tip]:focus::after{display:block}
@media (max-width:640px){.term[data-tip]::after{left:0;transform:none;max-width:min(240px,calc(100vw - 48px))}.term[data-tip]:hover::after,.term[data-tip]:focus::after{transform:none}}