/* tappo design system — global entry point.
 * Consumers link THIS file. It only @imports token + font sources. */

@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/elevation.css');

/* CTA 两个按钮等宽:每个 <a> 同宽,按钮填满 */
.cta-row a { width: 200px; }
.cta-row button { width: 100% !important; box-sizing: border-box; }

/* 手机专用断行:桌面隐藏(hero 保持 2 行),手机显示(hero 折成 2+4) */
.m-br { display: none; }
/* 分句之间的断行(破破烂烂 ↔ 我们):桌面=普通换行,手机额外加间距,分出两句 */
.clause-gap { display: block; }

/* ---------- 响应式:移动端 / iPad 适配 ----------
 * 桌面用「巨字撑满整屏」(.moment = min-height:86vh)。小屏字号变小,86vh 会让内容
 * 悬在大片空白里,故收成「贴合内容 + 舒适内边距」。 */
@media (max-width: 640px) {
  /* 移动端 = 桌面每级在「4 点模块尺度」上降一档(16/24/32/64/128 → 12/16/24/48/96)
   * 真派生:取同一条尺度的更小成员,不是另起一套 ×⅔ 值。所有 var(--rhythm-*) 自动跟随。*/
  :root {
    --rhythm-xs: 12px;
    --rhythm-sm: 16px;
    --rhythm-md: 24px;
    --rhythm-lg: 48px;
    --rhythm-section: 96px;
    /* 正文节奏:移动端基线收到 24px(16×1.5,窄栏行高更紧),整套 = ½/1/1.5/2 行 */
    --doc-tight: 12px;
    --doc-para: 24px;
    --doc-block: 36px;
    --doc-section: 48px;
  }
  .doc p { line-height: 1.5; }   /* 窄栏行高收紧到 24px 基线 */
  .moment { min-height: auto !important; }   /* 高度贴合内容;上下内边距走 --rhythm-section */
  /* 移动端页眉:文字导航链接隐藏(这些项页脚都有),只留 logo + 下载按钮,避免挤成字符竖排 */
  .navlink, .nav-lnk { display: none !important; }
  /* 移动端左对齐;边距沿用 Container 默认 32px(= 页眉 logo 左缘 / 下载按钮右缘) */
  header#top > div, .moment > div { text-align: left !important; }
  header#top p { text-align: left !important; }   /* hero 副标题有内联 center,单独覆盖 */
  .cta-row { justify-content: flex-start !important; }
  .cta-row a { width: 100% !important; }   /* 移动端 CTA 满栏宽:等宽 + 清晰可点 + 自然左对齐 */
  .m-br { display: inline !important; }   /* hero 折成 世界/破破烂烂/我们/敲敲打打;副标题折两行 */
  .fold-comma { display: none !important; }   /* 引擎屏巨字折行后,逗号多余,移动端隐藏(桌面单行时保留) */
  .clause-gap { height: var(--rhythm-xs); }   /* 句间额外间距,走层级(移动 8px) */
  .giant-hero { font-size: clamp(52px, 20vw, 90px) !important; line-height: 1.06 !important; margin-left: -0.045em !important; }   /* 光学对齐:补偿巨字左侧边距,把墨迹拉到 32px 线(logo/按钮已真实在 32);em 随字号缩放 */
  .giant-head { font-size: clamp(38px, 16vw, 76px) !important; line-height: 1.08 !important; margin-left: -0.045em !important; }   /* 移动端竖版巨字:撑满但容得下最长 5 字行 + 收紧行高 + 同 hero 的光学左对齐补偿 */
  /* 自动加空格 / 中英混输:演示文字是单行 nowrap(不折行,折了反而怪),移动端在不溢出前提下尽量放大。上限卡在最窄屏也不裁字 */
  .demo-spacing { font-size: clamp(24px, 6.2vw, 28px) !important; }
  .demo-mixed { font-size: clamp(20px, 5.4vw, 24px) !important; }
  /* 许可表移动端:不塞表格,每行拆成左对齐「列名：值」竖排块(表头注入为标签,冒号对齐) */
  .cols3, .cols2lic, .t-runtime,
  .cols3 tbody, .cols2lic tbody, .t-runtime tbody,
  .cols3 tr, .cols2lic tr, .t-runtime tr,
  .cols3 td, .cols2lic td, .t-runtime td { display: block !important; width: auto !important; min-width: 0 !important; }
  .cols3 thead, .cols2lic thead, .t-runtime thead { display: none !important; }
  .cols3 tr, .cols2lic tr, .t-runtime tr { padding: var(--doc-para) 0 !important; border-bottom: 1px solid var(--border-subtle) !important; }
  .cols3 tr:last-child, .cols2lic tr:last-child, .t-runtime tr:last-child { border-bottom: none !important; }
  /* 悬挂缩进:标签宽 4em(3 字 + 全角冒号),折行落在 4em = 值的起点,与首行值左对齐 */
  .cols3 td, .cols2lic td, .t-runtime td { white-space: normal !important; border: none !important; padding: 0 0 var(--gap-2xs) 4em !important; text-indent: -4em !important; line-height: 1.6 !important; }
  .cols3 td:last-child, .cols2lic td:last-child, .t-runtime td:last-child { padding-bottom: 0 !important; }
  .cols3 td::before, .cols2lic td::before, .t-runtime td::before { color: var(--text-muted); }
  /* 各表表头当标签注入,2 字补一个全角空格凑成 3 字宽,冒号对齐 */
  .t-model td:nth-child(1)::before { content: '模　型：'; }
  .t-model td:nth-child(2)::before { content: '实　质：'; }
  .t-model td:nth-child(3)::before { content: '许可证：'; }
  .t-src td:nth-child(1)::before { content: '来　源：'; }
  .t-src td:nth-child(2)::before { content: '用　途：'; }
  .t-src td:nth-child(3)::before { content: '许可证：'; }
  .cols2lic td:nth-child(1)::before { content: '工　具：'; }
  .cols2lic td:nth-child(2)::before { content: '许可证：'; }
  .t-runtime td:nth-child(1)::before { content: '项　目：'; }
  .t-runtime td:nth-child(2)::before { content: '用　途：'; }
  .t-runtime td:nth-child(3)::before { content: '许可证：'; }
  .t-runtime td:nth-child(4)::before { content: '出　处：'; }
  /* 运行时代码库那张 4 列英文密表(库名/仓库链接)保持横向滚动 —— 强塞进 375 会碎成单字 */
}
@media (min-width: 641px) and (max-width: 1024px) {
  /* iPad:区块高度收一档(避免过空);间距沿用桌面层级 */
  .moment { min-height: 62vh !important; }
}

/* ============================================================
 * 页眉移动端菜单 + 统一页脚（2026-07-05）
 * 静态页(download/privacy/credits/coffee)与 React 首页共用同一套类,
 * 单一来源在此,页面里只写结构。
 * ============================================================ */

/* —— 移动端汉堡菜单 —— 桌面隐藏,≤640 显示;点 ☰ 弹出次级导航面板 */
.nav-mobile { position: relative; display: none; }
/* 圆形按钮:与「下载」胶囊同高、圆角一致,但透明描边样式(不抢下载的视觉焦点) */
.nav-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-height-sm); height: var(--control-height-sm); padding: 0; margin: 0;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); color: var(--text-body); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.nav-menu-toggle:hover { border-color: var(--terracotta-400); color: var(--terracotta-400); }
.nav-menu-toggle:active { transform: scale(0.95); }
.nav-menu-toggle svg { width: 18px; height: 18px; display: block; }
.nav-menu-panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 208px; padding: 8px;
  background: var(--ink-850); border: 1px solid var(--border-default);
  border-radius: 14px; box-shadow: var(--shadow-pop);
}
.nav-menu-panel.open { display: flex; }
.nav-menu-panel a {
  padding: 11px 14px; font-size: 15px; color: var(--text-body);
  text-decoration: none; border-radius: 9px; transition: background .12s, color .12s;
}
.nav-menu-panel a:hover { background: var(--ink-800); color: var(--terracotta-400); text-decoration: none; }
.nav-menu-panel .m-dl { color: var(--terracotta-400); font-weight: var(--weight-semibold); }

/* —— 统一页脚 —— 左:品牌块;右:三列导航;底:版权条 */
.site-foot { border-top: 1px solid var(--border-subtle); margin-top: 96px; }
/* .wrap 只管宽度与左右留白(用长手属性,避免 padding 简写把 .foot-top/.foot-bottom 的上下内边距清零) */
.site-foot .wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
.foot-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--gap-xl); flex-wrap: wrap;
  padding: var(--gap-xl) 0 var(--gap-2xl);
}
.foot-brand { max-width: 320px; }
.foot-brand-row { display: flex; align-items: center; gap: var(--gap-xs); }
.foot-brand-row img { height: 24px; width: auto; display: block; }
.foot-brand-row .cn { font-size: 15px; color: var(--text-muted); }
.foot-slogan { margin: var(--gap-sm) 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 300px; }
.foot-credit { margin: var(--gap-2xs) 0 0; font-size: 13px; color: var(--text-muted); font-family: var(--font-display); letter-spacing: .01em; }
.foot-cols { display: flex; gap: var(--gap-xl); flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); }
.foot-col-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--ink-500); margin-bottom: var(--gap-2xs); }
.foot-col a { font-size: 14px; color: var(--text-muted); text-decoration: none; line-height: 1; transition: color .15s; }
.foot-col a:hover { color: var(--terracotta-400); text-decoration: none; }
.foot-bottom {
  border-top: 1px solid var(--border-subtle);
  padding: var(--gap-md) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--gap-md); flex-wrap: wrap;
}
.foot-bottom span { font-size: 13px; color: var(--text-muted); }

@media (max-width: 640px) {
  /* 移动端:显示汉堡按钮(次级链接进面板);下载按钮仍留在页眉 */
  .nav-mobile { display: inline-flex; }
  /* 页脚移动端:整体左对齐,品牌块在上,导航列在下,列间距收紧成两列自然流 */
  .site-foot { margin-top: 64px; }
  .foot-top { gap: var(--gap-lg); padding: var(--gap-lg) 0; }
  /* 三列(产品/关于/联系)挤进一行:列按内容宽(去掉 96px min-width),列间距收到 24px */
  .foot-cols { gap: var(--gap-md); width: 100%; flex-wrap: nowrap; }
  .foot-col { flex: 0 0 auto; min-width: 0; }
}