/* Shared shell for the standalone note pages: the main site's tokens, header and footer
   (see src/styles/site.css and src/lib/shell.ts), plus token overrides for the legacy
   joey-theme pages and the review lab. */
:root { --sh-bg: #fcfcfa; --sh-soft: #f4f4f0; --sh-ink: #121211; --sh-ink-2: #55554f; --sh-muted: #8c8c84; --sh-line: #e8e7e1; --sh-line-strong: #d4d3cc; --sh-font: "Inter", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; }

.sh-header, .sh-footer { font-family: var(--sh-font); line-height: 1.8; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.sh-header *, .sh-footer * { box-sizing: border-box; }
.sh-header a, .sh-footer a { color: inherit; text-decoration: none; }
.sh-container { width: min(1120px, 100% - 48px); margin-inline: auto; padding: 0; }
.sh-header { position: sticky; top: 0; z-index: 200; background: rgb(243 242 237 / .84); backdrop-filter: saturate(1.2) blur(16px); color: var(--sh-ink); }
.sh-header .sh-container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.sh-brand { display: flex; align-items: center; gap: 10px; color: var(--sh-ink); }
.sh-brand svg { width: 28px; height: 28px; flex: none; }
.sh-brand strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: 0; font-family: var(--sh-font); }
.sh-brand small { display: block; font-size: 10.5px; color: inherit; opacity: .55; letter-spacing: .14em; line-height: 1.4; }
.sh-nav { display: flex; align-items: center; gap: 28px; }
.sh-nav a { color: rgb(18 18 17 / .58); font-size: 14.5px; transition: color .2s; }
.sh-nav a:hover, .sh-nav a[aria-current="page"] { color: var(--sh-ink); }
.sh-nav a.sh-btn { padding: 7px 16px; border-radius: 999px; background: var(--sh-ink); color: var(--sh-bg); font-size: 13.5px; font-weight: 500; }
.sh-menu { display: none; }
.sh-menu summary { list-style: none; cursor: pointer; padding: 7px 14px; border: 1px solid rgb(18 18 17 / .28); border-radius: 999px; font-size: 14px; }
.sh-menu summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) {
  .sh-header .sh-container { height: 64px; }
  .sh-header .sh-container > .sh-nav { display: none; }
  .sh-menu { display: block; position: relative; }
  .sh-menu .sh-nav { display: none; }
  .sh-menu[open] .sh-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; background: var(--sh-bg); border: 1px solid var(--sh-line); border-radius: 14px; padding: 10px; box-shadow: 0 24px 60px rgb(18 18 17 / .12); }
  .sh-menu[open] .sh-nav a { padding: 9px 12px; }
  .sh-menu[open] .sh-nav a.sh-btn { margin-top: 8px; text-align: center; }
}
.sh-footer { padding: 80px 0 32px; background: #f3f2ed; font-size: 14px; color: rgb(18 18 17 / .62); text-align: left; }
.sh-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.sh-footer h2 { font-size: 12px; font-weight: 400; color: rgb(18 18 17 / .4); letter-spacing: .1em; margin: 0 0 16px; font-family: var(--sh-font); }
.sh-footer nav { display: flex; flex-direction: column; gap: 10px; }
.sh-footer nav a:hover { color: var(--sh-ink); }
.sh-footer p { margin: 16px 0 0; color: rgb(18 18 17 / .45); max-width: 300px; }
.sh-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgb(18 18 17 / .14); font-size: 12.5px; color: rgb(18 18 17 / .4); }
.sh-footer-bottom .traffic { display: flex; flex-wrap: wrap; gap: 16px; }
.sh-footer-bottom strong { font-weight: 500; color: rgb(18 18 17 / .7); }
@media (max-width: 760px) { .sh-footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Legacy joey-theme pages: remap their tokens to the monochrome palette. */
body.joey-site.joey-editorial {
  --bg: var(--sh-bg); --bg-soft: var(--sh-soft); --bg-card: #fff; --ink: var(--sh-ink); --ink-2: var(--sh-ink-2); --muted: #77776f;
  --line: var(--sh-line); --line-strong: var(--sh-line-strong);
  --green: var(--sh-ink); --green-deep: var(--sh-ink); --green-ink: var(--sh-ink); --green-soft: #f1f0ea; --blue-deep: var(--sh-ink);
  --font-sans: var(--sh-font);
  background: var(--sh-bg); font-family: var(--sh-font);
}
body.joey-site.joey-editorial ::selection { background: #e6e2d6; color: var(--sh-ink); }
body.joey-site.joey-editorial :focus-visible { outline-color: var(--sh-ink); }

/* Pages that keep their own in-page header (the review lab): the shell sits above it,
   and tag selectors from the page (header, nav, footer) are reset on the shell. */
body.sh-wrapped { font-family: var(--sh-font); }
body.sh-wrapped > header.sh-header { position: static; padding: 0; border: 0; box-shadow: none; background: #f3f2ed; }
body.sh-wrapped .sh-header nav, body.sh-wrapped .sh-footer nav { margin: 0; padding: 0; border: 0; background: none; flex-wrap: nowrap; max-width: none; }
body.sh-wrapped .sh-footer nav { gap: 10px; }
body.sh-wrapped > footer.sh-footer { max-width: none; margin: 0; padding: 80px 0 32px; background: #f3f2ed; color: rgb(18 18 17 / .62); font-size: 14px; border: 0; }
body.sh-wrapped > footer:not(.sh-footer) { background: var(--sh-soft); color: var(--sh-ink-2); }
body.sh-wrapped .lab-brand, body.sh-wrapped .back-notes { display: none; }

/* Simulator and guestbook (pages kept on the server, outside this repository). /assets/site-shell.js
   adds body.sh-page plus sh-sim or sh-guest and inserts the shell; these rules load after the
   pages' own stylesheets, so equal-specificity rules here win. */
body.sh-page { font-family: var(--sh-font); }
body.sh-page .sh-header nav { margin: 0; padding: 0; border: 0; background: none; flex-wrap: nowrap; }
body.sh-page .sh-header nav a { text-decoration: none; }

body.sh-sim {
  --ink: var(--sh-ink); --muted: #77776f; --line: var(--sh-line); --paper: var(--sh-bg);
  --teal: #2f5bd8; --blue: #2f5bd8; --orange: #b4532a;
  background: var(--sh-bg); color: var(--sh-ink);
}
body.sh-sim > header:not(.sh-header) { position: static; min-height: 0; padding: 14px max(24px, calc((100% - 1120px) / 2)); background: var(--sh-soft); border-bottom: 1px solid var(--sh-line); box-shadow: none; }
body.sh-sim > header:not(.sh-header) .brand { font-family: var(--sh-font); font-size: 0; letter-spacing: 0; gap: 0; color: var(--sh-ink); }
body.sh-sim > header:not(.sh-header) .brand > svg { display: none; }
body.sh-sim > header:not(.sh-header) .brand span { font-family: var(--sh-font); font-size: 14.5px; font-weight: 500; color: var(--sh-ink); margin: 0; padding: 0; border: 0; }
body.sh-sim > header:not(.sh-header) .brand span::before { content: "模拟器 / "; color: var(--sh-muted); font-weight: 400; }
body.sh-sim > header:not(.sh-header) nav a[href="/works"] { display: none; }
body.sh-sim h1, body.sh-sim h2, body.sh-sim h3 { font-family: var(--sh-font); font-weight: 500; letter-spacing: -.02em; }
body.sh-sim .eyebrow { color: var(--sh-muted); font-weight: 400; letter-spacing: .1em; }
body.sh-sim .card { background: #fff; border-color: var(--sh-line); border-radius: 14px; box-shadow: none; }
body.sh-sim .primary { background: var(--sh-ink); color: var(--sh-bg); border-radius: 999px; box-shadow: none; }
body.sh-sim .primary:hover:enabled { background: #3a3a37; transform: none; }
body.sh-sim a { color: var(--sh-ink); }
body.sh-sim main a { text-decoration-color: var(--sh-line-strong); text-underline-offset: 3px; }
body.sh-sim :focus-visible { outline-color: var(--sh-ink); }
body.sh-sim > footer:not(.sh-footer) { color: #77776f; border-top: 1px solid var(--sh-line); }

body.sh-guest .community-hero h1 { font-weight: 500; letter-spacing: -.035em; }
body.sh-guest .community-kicker { color: var(--sh-muted); letter-spacing: .1em; }
body.sh-guest .community-button { background: var(--sh-ink); color: var(--sh-bg); border-color: var(--sh-ink); border-radius: 999px; }
body.sh-guest .guest-compose, body.sh-guest .guest-message { background: #fff; border-color: var(--sh-line); box-shadow: none; }
/* Their stylesheets style bare header, nav, details and footer tags; reset those on the shell. */
body.sh-page > header.sh-header { display: block; min-height: 0; padding: 0; border: 0; box-shadow: none; gap: 0; }
body.sh-page .sh-menu, body.sh-page .sh-menu summary { margin: 0; border-top: 0; }
body.sh-page .sh-menu summary { border: 1px solid var(--sh-line-strong); padding: 7px 14px; font-size: 14px; color: var(--sh-ink); }
body.sh-page .sh-nav a:not(.sh-btn) { color: rgb(18 18 17 / .58); font-weight: 400; }
body.sh-page .sh-nav a:not(.sh-btn):hover, body.sh-page .sh-nav a[aria-current="page"] { color: var(--sh-ink); }
body.sh-sim > footer:not(.sh-footer) { max-width: none; margin: 40px 0 0; padding: 28px max(24px, calc((100% - 1120px) / 2)) 40px; }
body.sh-sim .simulator-traffic { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 12px; }
body.sh-sim .simulator-traffic .site-traffic { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
body.sh-sim .simulator-traffic details { margin: 0; padding: 0; border: 0; }
body.sh-guest main.container { width: min(1120px, 100% - 48px); max-width: none; margin-inline: auto; padding-inline: 0; }