/* Reset + page shell. Depends on tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background-color: var(--c-paper);
  /* 方格紙：兩道細線疊出淡淡的格子，像行事曆內頁 */
  background-image:
    linear-gradient(var(--c-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-rule) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: -1px -1px;
  -webkit-font-smoothing: antialiased;
}

/* 格線要淡到幾乎看不見，才像紙而不像表格 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--c-paper);
  opacity: 0.72;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: inherit; text-decoration-color: var(--c-rule-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--c-seal); }

:focus-visible { outline: 2px solid var(--c-seal); outline-offset: 2px; border-radius: var(--r-sm); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: var(--lh-tight); }

.u-hand { font-family: var(--f-hand); font-weight: 600; color: var(--c-ink-soft); }
.u-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-hide { display: none !important; }

/* 中文標題：拉開字距，像手寫在格子上 */
.u-title-cjk {
  font-family: var(--f-display);
  letter-spacing: var(--ls-title);
  text-indent: var(--ls-title); /* 補回尾端多出來的字距，維持視覺置中 */
}

.u-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ---------- app shell ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--w-rail) minmax(0, 1fr);
  min-height: 100dvh;
}

.shell__main {
  min-width: 0;
  padding: var(--s-7) var(--s-6) calc(var(--s-9) + env(safe-area-inset-bottom));
  padding-left: max(var(--s-6), env(safe-area-inset-left));
  padding-right: max(var(--s-6), env(safe-area-inset-right));
}

.page { max-width: var(--w-page); margin-inline: auto; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .shell__main {
    padding: var(--s-5) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom));
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
  }
}