/* SecondFirst 组件 v1（2026-10-20，Mei）。依赖 tokens.css。
   站点把 tokens.css 和本文件一起复制进 public/。组件的意思见 system.md。 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sf-desk, var(--sf-paper-2));
  color: var(--sf-ink);
  font: 400 var(--sf-t-body)/1.6 var(--sf-serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: var(--sf-carbon); color: var(--sf-paper); }

/* 标签：表格上印好的那种小字。mono、大写、字距拉开 */
.sf-label {
  font: 500 var(--sf-t-label)/1.3 var(--sf-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sf-ink-2);
}
.sf-mono { font-family: var(--sf-mono); }
.sf-zh { font-family: var(--sf-serif-zh); }
.sf-num { font-family: var(--sf-mono); font-variant-numeric: tabular-nums; }

/* 纸：直角、没有阴影，下面压着一张“第二联”，错开一点露出边 */
.sf-sheet {
  position: relative;
  background: var(--sf-paper);
  border: var(--sf-hair);
}
.sf-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sf-copy-paper, var(--sf-paper-2));
  border: var(--sf-hair);
  transform: translate(calc(var(--sf-copy-x) * 3 + var(--px, 0px)), calc(var(--sf-copy-y) * 3 + var(--py, 0px))) rotate(.5deg);
  transition: transform .6s var(--sf-ease);
}

/* 复写：标题下面垫一层复写青，错开几个像素。整个系统只有大标题用它 */
.sf-copied {
  text-shadow: calc(var(--sf-copy-x) + var(--cx, 0px)) calc(var(--sf-copy-y) + var(--cy, 0px)) 0 var(--sf-carbon-soft-strong, rgba(49, 115, 116, .28));
}

/* 栏位：一行标签，一条线。空着就写“空着”，不编 */
.sf-fields { display: grid; border-top: 1px solid var(--sf-ink); }
.sf-field {
  display: grid;
  gap: var(--sf-s1);
  padding: var(--sf-s3) 0 var(--sf-s3);
  border-bottom: var(--sf-hair);
}
.sf-field .sf-value { font-size: var(--sf-t-lead); line-height: 1.3; min-height: 1.3em; }
.sf-blank { color: var(--sf-ink-3); font-style: italic; }

.sf-check { display: inline-flex; align-items: center; gap: var(--sf-s2); margin-right: var(--sf-s5); }
.sf-check::before {
  content: "";
  width: 12px; height: 12px;
  border: 1px solid var(--sf-ink);
  background: var(--sf-paper);
}
.sf-check.is-on::before { background: var(--sf-carbon); border-color: var(--sf-carbon); box-shadow: inset 0 0 0 2px var(--sf-paper); }

/* 按钮：发丝框、mono 字。悬停时露出复写青的“第二联” */
.sf-btn {
  display: inline-flex; align-items: center; gap: var(--sf-s3);
  padding: 13px 18px;
  font: 500 13px/1 var(--sf-mono);
  letter-spacing: .02em;
  color: var(--sf-paper);
  background: var(--sf-ink);
  border: 1px solid var(--sf-ink);
  border-radius: var(--sf-radius);
  text-decoration: none;
  box-shadow: 0 0 0 0 var(--sf-carbon);
  transition: transform .18s var(--sf-ease), box-shadow .18s var(--sf-ease);
}
.sf-btn:hover, .sf-btn:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: var(--sf-copy-x) var(--sf-copy-y) 0 0 var(--sf-carbon);
  outline: none;
}
.sf-btn .sf-arrow { font-family: var(--sf-serif); font-size: 16px; }
.sf-btn--ghost { color: var(--sf-ink); background: transparent; }

/* 章：复写青，盖歪一点，墨不匀。天数是活的（sf.js 填） */
.sf-stamp {
  --r: -7deg;
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 20px 11px;
  color: var(--sf-carbon);
  border: 2px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
  transform: rotate(var(--r));
  font-family: var(--sf-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1;
  -webkit-mask: var(--sf-grain) center / 180px 180px;
          mask: var(--sf-grain) center / 180px 180px;
  user-select: none;
}
.sf-stamp b { font-weight: 500; font-size: 36px; letter-spacing: .06em; }
.sf-stamp small { font-size: 10px; }
.sf-stamp.is-pressed { animation: sf-press .5s var(--sf-ease) both; }
@keyframes sf-press {
  0% { opacity: 0; transform: rotate(var(--r)) scale(1.35); }
  60% { opacity: 1; transform: rotate(var(--r)) scale(.97); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}

/* 撕线：打孔的虚线 */
.sf-perf {
  display: flex; align-items: center; gap: var(--sf-s3);
  color: var(--sf-ink-3);
}
.sf-perf::before, .sf-perf::after {
  content: ""; flex: 1; height: 0;
  border-top: 1.5px dashed currentColor;
}

/* 墨不匀用的颗粒遮罩，章和印刷感的地方共用 */
:root {
  --sf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sf-copy-paper: #efe8d2;
  --sf-carbon-soft-strong: rgba(49, 115, 116, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sf-copy-paper: #1a1e1d; --sf-carbon-soft-strong: rgba(127, 182, 183, .30); }
}
:root[data-theme="dark"] { --sf-copy-paper: #1a1e1d; --sf-carbon-soft-strong: rgba(127, 182, 183, .30); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 手机上字小，复写错位跟着收一点，不然像重影 */
@media (max-width: 640px) {
  :root { --sf-copy-x: 2px; --sf-copy-y: 2px; }
}

/* logo：SecondFirst 原来那套字标（company/brand/logo/），放在纸外面的落款处，跟一行小字一样高 */
.sf-logo { height: 13px; width: auto; display: inline-block; vertical-align: -1px; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
/* 经营主体：法律上要能查到，但不当品牌用。原样大小写，不加链接（agentagency.au、melb.si 页脚） */
.sf-entity { font: 400 11px/1.4 var(--sf-mono); letter-spacing: .02em; text-transform: none; color: var(--sf-ink-3); }
/* 有 business name 时写成 <span>名字</span><span class="sep"> · </span><span>公司 · ABN</span>。
   手机上分成两行，不让「· ABN」掉到下一行开头 */
.sf-entity > span { white-space: nowrap; }
@media (max-width: 640px) {
  .sf-entity > span { display: block; }
  .sf-entity > .sep { display: none; }
}