/* Spectrum CrossCheck · base, v2.1 (u3-foundation). Layers keep many lanes from fighting:
   reset < base < components < pages < utilities. A lane's page CSS goes in @layer pages and never restyles a component. */
@layer reset, base, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

@layer base {
  html { background: var(--canvas); overflow-x: clip; }
  body {
    font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); font-weight: 430;
    background: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto;
    font-feature-settings: "ss01";              /* Mona Sans's round dots */
    font-variant-numeric: var(--num);
    font-synthesis: none;
  }
  /* the canvas's faint glaze at the top of the page (v2.1): the ground's light, behind everything (html carries the canvas,
     so the glaze shows between it and the page) */
  body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none; background: var(--glaze); }
  /* a name or note a person typed in Malayalam (script_lang, said): a taller line, never clipped, never letter-spaced */
  :lang(ml) { line-height: var(--lh-ml); letter-spacing: 0; }

  h1, h2, h3, h4 { font-weight: 630; line-height: var(--lh-tight); letter-spacing: -.014em; font-stretch: 104%; text-wrap: balance; }
  h1 { font-size: var(--t-h1); font-weight: 610; letter-spacing: -.022em; line-height: 1.15; }
  h2 { font-size: var(--t-h2); letter-spacing: -.016em; }
  h3 { font-size: var(--t-h3); letter-spacing: -.006em; }
  p { text-wrap: pretty; }
  small { font-size: var(--t-meta); }
  strong, b { font-weight: 620; }

  /* links in running text keep a quiet underline (colour alone never tells a link) */
  a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
      text-decoration-color: var(--line-3); transition: text-decoration-color var(--dur-1) linear, color var(--dur-1) linear; }
  a:hover { text-decoration-color: currentColor; }

  /* one focus look for every control, on every surface: v2.1's ring, 2 px, 2 px off the control */
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--selection); }

  hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--sp-5) 0; }
  kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 0;
        font: 600 11.5px/1 var(--font); color: var(--ink-3); background: var(--paper-3); box-shadow: inset 0 -1px 0 var(--line-2);
        white-space: nowrap; vertical-align: 1px; }
  code { font-size: .92em; }

  table { width: 100%; }
  th { text-align: left; font-weight: 600; }
  td.n, th.n { text-align: right; }

  label { font-weight: 560; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
    min-height: var(--h-control); padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-2);
    background: var(--paper); color: var(--ink); font-size: var(--t-body); font-weight: 450; width: 100%;
    transition: border-color var(--dur-1) linear, box-shadow var(--dur-1) linear;
  }
  textarea { padding: var(--sp-2) var(--sp-3); min-height: calc(var(--h-control) * 2); resize: vertical; line-height: var(--lh-body); }
  input::placeholder, textarea::placeholder { color: var(--ink-3); }
  input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--ink-3); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--ink); }
}

@layer utilities {
  .vh, .sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .muted { color: var(--ink-3); }
  .nowrap { white-space: nowrap; }
  .num { font-variant-numeric: var(--num); white-space: nowrap; }
  .tnum, .acctno { font-variant-numeric: var(--num-tab); }
  .stack > * + * { margin-top: var(--sp-3); }
  .row { display: flex; align-items: center; gap: var(--sp-2); }
  .grow { flex: 1 1 auto; min-width: 0; }
  .skip { position: absolute; left: var(--sp-3); top: -60px; z-index: 100; padding: var(--sp-2) var(--sp-3); background: var(--ink); color: var(--on-ink);
          border-radius: var(--r-2); text-decoration: none; font-weight: 600; }
  .skip:focus { top: var(--sp-2); }
  .t-hold { color: var(--hold); } .t-check { color: var(--check); } .t-ok { color: var(--ok); } .t-wait { color: var(--wait); }
  .t-paid { color: var(--paid); } .t-ink3 { color: var(--ink-3); }
}