/* ClipRaft 官网样式。方向见 site/docs/design-brief.md。
 *
 * 纸本说明书：双栏、硬线、旁注栏、规格表。
 * **没有阴影、没有圆角容器、没有渐变毛玻璃**，见 brief 第二节。
 * 间距只用 8 的倍数那一组，别加新值。 */

:root{
  --paper:#F2F0EB;
  --paper-2:#FFFFFF;
  --ink:#14161A;
  --ink-soft:#6E6960;
  --ink-faint:#B2ADA3;
  --rule:#D8D3C9;
  --blue:#2F6DF0;
  --rust:#C8402F;
  --side:200px;
  --gap:48px;
  --max:1180px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],.qa[id]{scroll-margin-top:64px}
body{
  background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.rule{border-top:1.5px solid var(--ink)}
.rule-soft{border-top:1px solid var(--rule)}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---- 顶栏 ---- */
.top{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none;letter-spacing:-.01em}
.brand svg{display:block}
.topnav{display:flex;align-items:center;gap:24px;font-size:13px}
.topnav a{text-decoration:none;color:var(--ink-soft);white-space:nowrap}
.topnav a:hover,.topnav a[aria-current]{color:var(--ink)}
/* 语言菜单。<details> 做的，永远向下展开——原生 <select> 在 macOS 上会把当前项
   对齐到按钮、往上弹出屏幕。
   按钮没有框——全站没有带框的控件，多一个框就是那一处像是别的网站拼进来的。
   但它前面有个地球、后面有个小箭头：别的导航项都是点了就跳页，只有这一项是
   展开列表，不标出来用户分不出来。两个图标都是细线、跟文字同色，展开时箭头翻过来。
   列表浮在页面上（absolute），**不许撑高导航栏**——图标高度不超过文字行高；
   白底一条细线把它和正文分开，没有阴影没有圆角。 */
.langsel{position:relative}
.langsel summary{list-style:none;cursor:pointer;color:var(--ink-soft);white-space:nowrap;user-select:none;
  display:flex;align-items:center;gap:5px}
.langsel summary svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.langsel .ico{stroke-width:1.2}
.langsel .caret{stroke-width:1.4;margin-left:1px;transition:transform .15s}
.langsel[open] .caret{transform:rotate(180deg)}
.langsel summary::-webkit-details-marker,.langsel summary::marker{display:none;content:""}
.langsel summary:hover,.langsel[open] summary{color:var(--ink)}
.langlist{position:absolute;right:0;top:calc(100% + 12px);z-index:30;margin:0;padding:8px 0;list-style:none;
  background:var(--paper-2);border:1px solid var(--rule);min-width:128px}
.langlist li{margin:0;padding:0}
.topnav .langlist a{display:block;padding:6px 16px;color:var(--ink-soft)}
.topnav .langlist a:hover,.topnav .langlist a:focus{color:var(--ink);background:var(--paper)}
.topnav .langlist a[aria-current]{color:var(--ink)}

/* ---- 双栏骨架 ---- */
.row{display:grid;grid-template-columns:var(--side) 1fr;gap:var(--gap);padding:72px 0 48px}
.side{font-size:11px;line-height:1.85;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.side b{display:block;color:var(--ink);font-weight:600;letter-spacing:.06em;margin-bottom:8px;text-transform:none;font-size:12px}
.side .note{text-transform:none;letter-spacing:0;font-size:12px;line-height:1.7;margin-top:16px;color:var(--ink-soft)}

/* ---- 标题 ---- */
h1{font-size:68px;line-height:1.04;letter-spacing:-.035em;font-weight:700;max-width:15ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--blue)}
.lede{margin-top:24px;font-size:19px;line-height:1.6;max-width:42ch;color:#3A3B3F}
h2{font-size:34px;line-height:1.3;letter-spacing:-.025em;font-weight:700;max-width:24ch;text-wrap:balance}
h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
p{max-width:75ch}
.p{margin-top:16px;color:#3A3B3F}
.p-tight{margin-top:8px}

/* ---- 按钮 ---- */
.dl{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:11px 18px;font-size:14px;text-decoration:none;font-weight:500;
  transition:background 120ms ease,color 120ms ease;
}
.btn:hover{background:#2E3138}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.off{background:transparent;border-color:var(--rule);color:var(--ink-faint);cursor:default}
.btn .sub{font-size:11px;opacity:.7;font-weight:400}
.dlbtn{min-width:190px;justify-content:center}

/* ---- 表格：规格与故障排查 ---- */
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
th{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:500;text-align:left;border-bottom:1.5px solid var(--ink);padding:0 16px 10px 0;
}
td{border-bottom:1px solid var(--rule);padding:14px 16px 14px 0;vertical-align:top;line-height:1.6}
td:last-child,th:last-child{padding-right:0}
td.k{width:26%;color:var(--ink-soft)}
.mono{font-family:var(--mono);font-size:13px}
/* 路径没有空格，320 宽的手机上 ~/.config/clipraft/ 会把表格撑出屏幕 1 像素 */
td.mono{overflow-wrap:anywhere}
.no{color:var(--rust)}
.yes{color:var(--ink)}

/* ---- 首页竖排步骤：编号挂在外面，不用并排三格 ---- */
.steps-v{list-style:decimal-leading-zero;margin:12px 0 0;padding-left:34px}
.steps-v li{margin-bottom:18px;max-width:62ch;padding-left:6px}
.steps-v li::marker{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.steps-v li b{font-weight:600;font-size:16px}
.steps-v li br+*,.steps-v li{color:#3A3B3F;font-size:15px;line-height:1.65}

/* ---- 说明页：书眉。滚到哪儿都看得见现在读的是哪个系统 ---- */
.stickybar{
  position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.stickybar .wrap{display:flex;align-items:center;gap:24px;padding-top:0;padding-bottom:0}
.stickybar .sbl{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
.stickybar .tabs{margin-top:0}
.stickybar .tab{padding:12px 0 10px}

/* 节号：印刷手册靠编号变成「可引用的」 */
.tn{
  font-family:var(--mono);font-size:.62em;color:var(--ink-soft);
  margin-right:10px;letter-spacing:.04em;font-weight:400;
}
.toc a .tn{margin-right:8px}

/* ---- 说明页：目录 ---- */
.toc{margin-top:32px;border-left:3px solid var(--ink);padding-left:16px}
.toc ol{list-style:none;margin:8px 0 0;padding:0}
.toc li{margin-bottom:6px;font-size:14.5px}

.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.toc a:hover{border-bottom-color:var(--ink)}

/* ---- 说明页：平台切换 ---- */
.tabs{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap}
.tab{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:2px 0 6px;font:inherit;font-size:15px;cursor:pointer;color:var(--ink-soft);
  transition:color 120ms ease,border-color 120ms ease;
}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.tab:hover:not([aria-pressed="true"]){color:var(--ink)}

/* ---- 问答块（说明页主体） ---- */
.qa{padding:0;margin-top:48px}
.qa:first-of-type{margin-top:0}
.qa h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.qa .sub{margin-top:24px}
.qa .sub h4{font-size:16px;font-weight:600;margin-bottom:6px}
.qa p{color:#3A3B3F;font-size:15px}
.qa ol,.qa ul{margin:12px 0 0 0;padding-left:20px;color:#3A3B3F;font-size:15px}
.qa li{margin-bottom:8px;padding-left:4px}
.qa li::marker{color:var(--ink-soft);font-size:13px}
.k-ui{background:#E6E3DB;padding:1px 6px;font-size:13.5px;white-space:nowrap}

/* 关键提示：左边一道粗线，不是圆角卡片 */
.flag{border-left:3px solid var(--ink);padding:2px 0 2px 16px;margin-top:16px;border-radius:0}
.flag.warn{border-left-color:var(--rust)}
.cant h2{border-left:3px solid var(--rust);padding-left:16px;margin-left:-19px}
.flag b{font-weight:600}
.flag p{font-size:14.5px;color:var(--ink-soft);margin:0}
/* 不做就用不了的那一步（首次打开被系统拦）：正文色、标题和正文之间留一点，
   和旁边灰色的补充说明分开。不用 rust——那是「做不到」，这是「照做就行」 */
.flag.must{margin-top:24px}
.flag.must b{display:block;margin-bottom:6px}
.flag.must p{color:#3A3B3F;font-size:15px}
.flag.must p+p{margin-top:8px}

/* ---- 页脚 ---- */
footer{padding:40px 0 64px;font-size:12.5px;color:var(--ink-soft)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--ink-soft)}

/* ---- 移动端：旁注栏塌到上面 ---- */
@media (max-width:860px){
  .wrap{padding:0 20px}
  .row{grid-template-columns:1fr;gap:20px;padding:32px 0}
  .side{letter-spacing:.08em}
  .side .note{margin-top:8px}
  h1{font-size:40px;max-width:none}
  /* 德语的 Herunterladen 是一个词，40 号字在 320 宽的手机上放不下，会把整列撑宽。
     按页面的 lang 断字（Herunter-laden），中日韩不受影响 */
  h1{hyphens:auto;-webkit-hyphens:auto}
  h2{font-size:26px}
  .lede{font-size:17px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--rule)}
  .step:last-child{border-bottom:0}
  td.k{width:38%}
  .hero-art{display:none}
  /* 德语法语的导航词比中文长一倍（Herunterladen、Télécharger），不许换行的话
     语言选择框会被挤出屏幕右边 */
  .topnav{flex-wrap:wrap;gap:10px 16px}
  /* 列表朝哪边对齐由 build.py 里 LANG_MENU_JS 展开时量了再定：换行后语言项
     可能在最左、也可能仍在最右，写死哪边都会有一种情况伸出屏幕 */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---- 说明书插图。形状照 iOS 那份 UsageGuides，颜色改成纸本黑白 ---- */
.art{margin:20px 0 4px}
.art svg{max-width:100%;height:auto}
.qa .sub .art{margin-top:16px}

/* ---- 下载页的二维码。手机上没法点电脑屏幕上的按钮，扫码才是自然动作 ---- */
.dlrow{display:flex;gap:32px;align-items:flex-start;justify-content:space-between}
.dlrow>div:first-child{flex:1}
.qr{text-align:center;flex-shrink:0}
.qr img{display:block;width:104px;height:104px}
.qr span{display:block;margin-top:8px;font-size:11px;color:var(--ink-soft)}
@media (max-width:860px){
  .dlrow{flex-direction:column-reverse;gap:16px}
  .qr{align-self:flex-start}
}