/* 规则大纲与稿面。 */
.rule-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-12); align-items: start; }
.rule-workspace > * { min-width: 0; }
.proof-heading { position: relative; padding-top: var(--s-10); }
.proof-note { display: block; width: 180px; height: 36px; margin-bottom: var(--s-2); color: var(--accent); transform: rotate(-4deg); }
.proof-note text { fill: currentColor; font: var(--weight-bold) 18px var(--font-display); }
.proof-note path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.tabs__list[aria-orientation="vertical"] { flex-direction: column; align-items: stretch; }
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  max-width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--clear);
  border-radius: var(--r-btn);
  background: var(--clear);
  color: var(--text-muted);
  font: var(--weight-label) var(--f-body)/1.5 var(--font-body);
  text-align: left;
}
.tabs__tab svg { width: 20px; height: 20px; flex-shrink: 0; }
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { background: var(--bg-panel-2); color: var(--accent); }
.tabs__tab--child { margin-left: var(--s-5); }
.tabs__panel { min-width: 0; }
.tabs__panel p { color: var(--text-muted); }
.tabs__panel pre { margin-top: var(--s-6); }
.tabs__panel h3 + p { margin-top: var(--s-5); }
.tabs--light .tabs__tab { color: var(--ink-muted); }
.tabs--light .tabs__tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.tabs--light .tabs__panel { background: var(--paper); color: var(--ink); border-color: var(--line-light); }
.tabs--light .tabs__panel p { color: var(--ink-muted); }

/* 目录直接放在覆盖全部章节的父容器内。默认不吸顶。 */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-width: 0;
  margin-bottom: var(--s-10);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-card-small);
  background: var(--bg-panel-2);
  color: var(--text);
}
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-size: var(--f-ui); }
.toc a:hover, .toc a[aria-current="location"] { background: var(--bg); color: var(--text); }
.toc--sticky { position: sticky; top: var(--s-3); z-index: 8; }
.toc--static { position: static; }
.section--light .toc { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.section--light .toc a:hover { background: var(--bg-panel); color: var(--ink); }

/* 商店按钮不用徽章位图；可放规定的 Apple 内联 SVG，也可纯文本。 */
.app-store-button {
  min-height: 56px;
  gap: var(--s-3);
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: var(--shadow-btn);
  border-radius: var(--r-badge);
  text-align: left;
}
.app-store-button svg { width: 26px; height: 26px; flex-shrink: 0; }
.app-store-button__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-store-button__text small { font: var(--weight-medium) var(--f-micro)/1.3 var(--font-body); }
.app-store-button__text b { font: var(--weight-strong) var(--f-brand)/1.3 var(--font-display); letter-spacing: var(--tracking-brand); }
.app-store-button--primary { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent), var(--shadow-btn); }
.store-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-6);
  padding: var(--s-8);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--bg-panel);
  color: var(--ink);
}
.store-guide__copy { flex: 1 1 260px; min-width: 0; }
.store-guide__copy h2 { font-size: var(--f-h3); }
.store-guide__copy p { margin-top: var(--s-3); color: var(--ink-muted); }
.fact-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
.fact-pills li { margin: 0; min-width: 0; }
.fact-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  min-height: 30px;
  padding: 5px var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-panel-2);
  color: var(--text);
  font-size: var(--f-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.fact-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.section--light .fact-pill, .hero .fact-pill { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.fact-pill__label { color: var(--text-muted); }
.section--light .fact-pill__label, .hero .fact-pill__label { color: var(--ink-muted); }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  position: relative;
  min-height: 64px;
  padding: var(--s-5) var(--s-10) var(--s-5) 0;
  font-weight: var(--weight-label);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: var(--s-3); top: var(--s-5); font: var(--f-phone)/1 var(--font-mono); }
.faq-item[open] summary::after { content: "−"; }
.faq-item__answer { padding-bottom: var(--s-6); color: var(--text-muted); }
.faq-item__answer > * + * { margin-top: var(--s-3); }
.section--light .faq-item { border-color: var(--line-strong); }
.section--light .faq-item__answer { color: var(--ink-muted); }
.term-card { border-top: 3px solid var(--accent); }
.term-card__name { font-family: var(--font-mono); font-size: var(--f-brand); overflow-wrap: anywhere; }
.term-card__category { display: block; font-size: var(--f-small); color: var(--text-muted); margin-bottom: var(--s-3); }
.term-card p { color: var(--text-muted); }
.card--light .term-card__category, .card--light.term-card p { color: var(--ink-muted); }
.official-shot { width: min(100%, 280px); max-width: 280px; margin-inline: auto; padding: 0; flex-shrink: 0; }
.official-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-shot);
}
.official-shot figcaption { padding-top: var(--s-3); font-size: var(--f-label); line-height: 1.7; color: var(--text-muted); }
.official-shot { filter: none; }
.official-shot img { outline: 1px solid var(--line-strong); outline-offset: -1px; }
.section--light .official-shot figcaption, .hero .official-shot figcaption { color: var(--ink-muted); }
.shot-pair { display: flex; justify-content: center; align-items: flex-start; gap: var(--s-8); min-width: 0; }
.device-card { display: flex; align-items: flex-start; gap: var(--s-6); }
.device-card__icon { width: 50px; height: 62px; flex-shrink: 0; color: var(--ink); }
.device-card__content { flex: 1; min-width: 0; }
.device-card__content h3 { font-size: var(--f-h3); }
.device-card__content p { color: var(--ink-muted); }
.device-card__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-4); font-weight: var(--weight-label); text-decoration: underline; text-underline-offset: 5px; }
.article-card { display: flex; flex-direction: column; align-items: flex-start; }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); color: var(--text-muted); font-size: var(--f-small); margin-bottom: var(--s-5); }
.article-card h3 { font-size: var(--f-subtitle); line-height: 1.5; }
.article-card p { color: var(--text-muted); font-size: var(--f-ui); }
.article-card__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-5); font-weight: var(--weight-label); }
.article-card__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.card--light .article-card__meta, .card--light.article-card p { color: var(--ink-muted); }
.callout { margin: 0; padding: var(--s-6); border-left: 3px solid var(--accent); border-radius: 0 var(--r-btn) var(--r-btn) 0; background: var(--bg-panel-2); color: var(--text); }
.callout p + p { margin-top: var(--s-3); }
.callout__title { display: block; font-weight: var(--weight-bold); margin-bottom: var(--s-2); }
.section--light .callout { background: var(--paper); color: var(--ink); }
.callout--highlight { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.section--light .callout--highlight { background: var(--accent); color: var(--ink); }
.tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel-2); color: var(--text); font-size: var(--f-small); line-height: 1.5; overflow-wrap: anywhere; }
.tag--light { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.tag--highlight { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--success); flex-shrink: 0; }
.status-dot--warn { background: var(--warn); }
.status-dot--error { background: var(--error); }
.group-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-light); border-radius: var(--r-card-small); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
.group-list li { margin: 0; }
.group-list li + li { border-top: 1px solid var(--line-light); }
.group-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; padding: var(--s-4) var(--s-6); }
.group-list a::after { content: "›"; font-size: var(--f-phone); color: var(--ink-muted); flex-shrink: 0; }
.group-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 表格不挤窄单元格；后代选择器覆盖编辑器额外包裹层。 */
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th, .data-table td, .prose table th, .prose table td, .doc-body table th, .doc-body table td {
  min-width: 7em;
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}
.data-table th, .prose table th, .doc-body table th { background: var(--bg-panel-2); color: var(--text); font-weight: var(--weight-label); }
.prose table, .doc-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  overscroll-behavior-inline: contain;
}
.section--light .data-table th, .section--light .prose table th, .section--light .doc-body table th { background: var(--line-light); color: var(--ink); }
.section--light :is(.data-table, .prose table, .doc-body table) :is(th, td) { border-color: var(--line-strong); }
.dl-fab {
  position: fixed;
  z-index: 20;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  max-width: calc(100% - var(--s-10));
  padding: var(--s-3) var(--s-5);
  border: 2px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-card);
  font-size: var(--f-ui);
  font-weight: var(--weight-label);
}
.dl-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.article-has-fab { padding-bottom: 100px; }

/* 仅设计预览使用的家具，不作为真实截图或客户端 UI。 */
.preview-sample { margin-top: var(--s-8); }
.preview-label { font: var(--f-small)/1.6 var(--font-mono); color: var(--text-muted); margin-bottom: var(--s-5); }
.section--light .preview-label { color: var(--ink-muted); }
.preview-shot-placeholder {
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 750 / 1334;
  padding: var(--s-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-shot);
  background: var(--line-light);
  color: var(--ink-muted);
  text-align: center;
  font: var(--f-ui)/1.8 var(--font-mono);
}
.preview-fab-sample { position: static; max-width: 100%; margin-top: var(--s-6); }
.swatch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.swatch { min-width: 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--bg-panel-2); color: var(--text); }
.swatch__paint { height: 54px; margin-bottom: var(--s-3); border-radius: var(--r-logo); border: 1px solid var(--border); }
.swatch code { font-size: var(--f-small); }
.paint-bg { background: var(--bg); color: var(--text); }
.paint-panel { background: var(--bg-panel); color: var(--ink); }
.paint-deep { background: var(--bg-panel-2); color: var(--text); }
.paint-border { background: var(--border); color: var(--text); }
.paint-accent { background: var(--accent); color: var(--ink); }
.paint-accent-dark { background: var(--accent-dark); color: var(--ink); }
.paint-text { background: var(--text); color: var(--ink); }
.paint-muted { background: var(--text-muted); color: var(--ink); }
.paint-success { background: var(--success); color: var(--ink); }
.paint-warn { background: var(--warn); color: var(--ink); }
.paint-error { background: var(--error); color: var(--ink); }
.paint-ink { background: var(--ink); color: var(--paper); }
.paint-ink-muted { background: var(--ink-muted); color: var(--paper); }
.paint-ink-soft { background: var(--ink-soft); color: var(--ink); }
.paint-ink-faint { background: var(--ink-faint); color: var(--ink); }
.paint-paper { background: var(--paper); color: var(--ink); }
.paint-line-light { background: var(--line-light); color: var(--ink); }
.paint-line-strong { background: var(--line-strong); color: var(--ink); }
.paint-alu-hi { background: var(--alu-hi); color: var(--ink); }
.paint-alu-mid { background: var(--alu-mid); color: var(--ink); }
.paint-alu-lo { background: var(--alu-lo); color: var(--ink); }
.paint-alu-edge { background: var(--alu-edge); color: var(--ink); }
.paint-alu-shine { background: var(--alu-shine); color: var(--ink); }
.paint-bezel { background: var(--bezel); color: var(--paper); }
.paint-bezel-edge { background: var(--bezel-edge); color: var(--paper); }
.paint-lens { background: var(--lens); color: var(--paper); }
.paint-code-num { background: var(--code-num); color: var(--ink); }
.paint-overlay { background: var(--overlay-dark); color: var(--text); }
.paint-hairline { background: var(--hairline-dark); color: var(--text); }
.paint-veil { background: var(--veil); color: var(--text); }
.paint-pulse { background: var(--pulse); color: var(--text); }
.paint-clear { background: var(--clear); color: var(--text); }
.type-specimen > * + * { margin-top: var(--s-5); }
.type-specimen__display { font: var(--weight-display) var(--f-h1)/var(--leading-title) var(--font-display); letter-spacing: var(--tracking-title); }
.preview-header .preview-language { margin-left: auto; }
.preview-language { position: relative; flex-shrink: 0; }
.preview-language summary { list-style: none; cursor: pointer; }
.preview-language summary::-webkit-details-marker { display: none; }
.preview-static-nav { min-width: 0; margin-left: auto; align-self: stretch; }

@media (max-width: 1280px) {
  .preview-header .masthead__inner { flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .preview-static-nav { order: 3; width: 100%; height: 44px; overflow-x: auto; }
  .preview-static-nav .nav__list { width: max-content; }
}
@media (max-width: 860px) {
  .rule-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tabs__list[aria-orientation="vertical"] { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s-2); }
  .tabs__tab { flex-shrink: 0; }
  .tabs__tab--child { margin-left: 0; }
  .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .shot-pair { flex-direction: column; align-items: center; }
  .official-shot { width: min(100%, 280px); }
  .device-card { gap: var(--s-4); }
  .device-card__icon { width: 36px; height: 48px; }
  .store-guide { padding: var(--s-6); }
  .fact-pills { flex-direction: row; flex-wrap: wrap; }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { flex-wrap: nowrap; overflow-x: auto; border-radius: var(--r-btn); }
  .toc a { flex-shrink: 0; }
  .proof-note { transform: none; }
  .dl-fab { right: var(--s-4); bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
}
@media print {
  .dl-fab { display: none; }
  .tabs__panel[hidden] { display: block !important; }
}