/* Core: scale regimes, structural tokens, reset, base typography and layout primitives. Required on every page.
   .aligned-rows on a grid aligns matching slots in its children; set --aligned-rows to their slot count.
   Regime queries – the only width conditions allowed anywhere, one block each, at the end of a file, in this order:
     (width <= 50em)   mobile
     (width > 50em)    above mobile (desktop and wide)
     (width >= 125em)  wide
     (height <= 30em)  short window (phones held sideways, low browser windows): no sticky header, smaller titles.
                       Title sizes here may use vh, because height is the constraint.
   Show or hide by regime with .desktop-only / .mobile-only rather than per-component display rules. */
@layer core, theme, components, page, dev;
@layer core {
  :root { --scale-units: 128; --scale-min: 0rem; --text-size: 1.6rem; --small-size: 1.4rem; --lead-size: 1.9rem; --button-size: 1.8rem; --font: system-ui, sans-serif; --line-height: 1.6; --space-block: 4rem; --space-inline: 4rem; --gap: 3rem; --card-space: 2rem; --radius: .8rem; --ink: #25313c; --muted: #64717d; --paper: #fff; --surface: #f3f5f7; --line: #d5dce3; --accent: #245b82; --on-accent: #fff; --error: #a63d35; --success: #2e5a4f; }
  html { font-size: max(var(--scale-min), calc(100vw / var(--scale-units))); box-sizing: border-box; text-size-adjust: 100%; }
  *, ::before, ::after { box-sizing: inherit; }
  body { display: flex; flex-direction: column; min-block-size: 100svh; margin: 0; font: var(--text-size)/var(--line-height) var(--font); color: var(--ink); background: var(--paper); }
  body > main { flex: 1 0 auto; }
  h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
  h1, h2, h3, h4, h5, h6 { line-height: 1.15; font-weight: 650; overflow-wrap: anywhere; text-wrap: balance; }
  h1 { font-size: 5rem; }
  h2 { font-size: 3.6rem; }
  h3 { font-size: 2.5rem; }
  h4 { font-size: 2rem; }
  p, li, a, label { overflow-wrap: anywhere; }
  a { color: var(--accent); text-underline-offset: .2em; }
  button, input, select, textarea { font: inherit; }
  img, video, svg { max-inline-size: 100%; block-size: auto; }
  img { display: block; }
  button, summary { cursor: pointer; }
  :focus-visible { outline: .25rem solid var(--accent); outline-offset: .35rem; }
  :lang(ar) { --font: Tahoma, Arial, sans-serif; }
  :lang(zh) { --font: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
  .section { padding-block: var(--space-block); padding-inline: var(--space-inline); }
  .stack, .stack-small { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2rem; }
  .stack-small { gap: 1rem; }
  :is(.stack, .stack-small) > :where(a, button, span, label, small, b, strong, em, output) { justify-self: start; }
  .lead { font-size: var(--lead-size); }
  .small { font-size: var(--small-size); }
  .muted { color: var(--muted); }
  .text-pretty { text-wrap: pretty; }
  .surface { background: var(--surface); }
  .grid { display: grid; grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr)); gap: var(--gap); }
  .grid-2 { --columns: 2; }
  .grid-3 { --columns: 3; }
  .grid-4 { --columns: 4; }
  .pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
  .pair-equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > *, .pair > *, .flex > * { min-inline-size: 0; }
  .span-all { grid-column: 1 / -1; }
  .flex { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
  .prose > * + * { margin-block-start: 2rem; }
  .prose ul, .prose ol { padding-inline-start: 2.5rem; }
  .prose li + li { margin-block-start: .8rem; }
  .prose blockquote { border-inline-start: .3rem solid var(--accent); padding-inline-start: 2rem; color: var(--muted); }
  .anchor { scroll-margin-block-start: 2rem; }
  .skip { position: absolute; inset-block-start: -20rem; inset-inline-start: 1rem; z-index: 10; padding: 1rem; background: var(--paper); }
  .skip:focus { inset-block-start: 1rem; }
  .aligned { --items: 4; }
  .aligned li { display: flex; align-items: center; gap: 1rem; min-inline-size: 0; }
  .aligned li::before { content: ''; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--accent); flex: none; }
  @supports (grid-template-rows: subgrid) {
    .aligned-rows > * { display: grid; grid-template-rows: subgrid; grid-row: span var(--aligned-rows, 3); }
    .aligned { row-gap: 1rem; }
    .aligned > .card { display: grid; grid-template-rows: subgrid; grid-row: span calc(var(--items) + 1); row-gap: 1rem; }
    .aligned > .card > ul { display: grid; grid-template-rows: subgrid; grid-row: 2 / span var(--items); row-gap: 1rem; }
  }
  .visually-hidden { position: absolute; inline-size: .1rem; block-size: .1rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (width <= 50em) {
    .desktop-only { display: none !important; }
    :root { --scale-units: 64; --text-size: 2.08rem; --small-size: 1.82rem; --lead-size: 2.47rem; --button-size: 2.52rem; --space-block: 3rem; --space-inline: 1.6rem; --gap: 2rem; }
    .grid { --columns: 1; }
    .grid-compact { --columns: 2; }
    .pair { grid-template-columns: minmax(0, 1fr); }
    h1 { font-size: 4.8rem; }
    h3 { font-size: 2.8rem; }
    .aligned { font-size: 1.68rem; }
  }
  @media (width > 50em) {
    .mobile-only { display: none !important; }
  }
  @media (width >= 125em) {
    :root { --scale-units: 160; --space-block: 6rem; --space-inline: 12rem; --gap: 6rem; }
  }
  @media (height <= 30em) {
    h1 { font-size: min(5rem, 11vh); }
  }
  @media print {
    html { font-size: 10pt; }
    body { font-size: 12pt; color: #000; background: #fff; }
    .skip { display: none; }
    .grid, .pair { grid-template-columns: 1fr; }
    .section { padding: 1rem 0; }
  }
}