/* Vendored from yozora/css/base.css. Refresh with `node scripts/vendor.mjs` there,
   never edit here. */
/* Structure only. Every colour is a token, so this cannot fight the palette beside it.
   Hand-written, unlike the palette files, which are generated. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  /* --font-body comes from a type-*.css file if one is loaded. Without one this is the
     system stack it always was, so base.css alone still works. */
  font: 15px/1.55 var(--font-body, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* A two-line heading splits evenly instead of orphaning one word. */
h1, h2, h3, .balance { text-wrap: balance; }
/* Body copy avoids a one-word last line. */
p, li, figcaption, .prose { text-wrap: pretty; }

/* Any figure that updates. Without this, digits have different widths and the value
   jitters sideways as it changes, which reads as a bug. */
.num, td.num, .metric b, code, time { font-variant-numeric: tabular-nums; }
code, kbd, pre, samp { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); }

.wrap { max-width: 1080px; margin-inline: auto; padding: 40px 24px 80px; }

h1 {
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 4vw, 30px);
  font-weight: var(--display-weight, 700);
  letter-spacing: var(--display-tracking, -.4px);
  line-height: var(--display-leading, 1.15);
}
h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .9px;
  font-weight: 600; color: var(--dim);
}

.panel {
  background: var(--panel);
  /* A soft separator rather than a hard border. A full-strength outline on every card
     competes with the content inside it for the same attention. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge) 45%, transparent);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 22px;
}
.panel > h2 { margin-bottom: 14px; }

/* At least 40px tall. An icon button that LOOKS 16px still needs the target around it. */
button, .btn {
  font: inherit;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: calc(var(--radius) - 4px);
  /* The border IS the button when the fill is this close to the page, so it is held to the
     3:1 a control's boundary needs rather than to the hairline weight of a separator. The
     fallback keeps this working in a project that vendored the palettes before the token
     existed: without it an unresolved var() invalidates the whole shorthand and the border
     falls back to currentColor, which is a worse bug than the one being fixed. */
  border: 1px solid var(--edge-strong, var(--edge));
  background: var(--raised);
  color: var(--fg);
  cursor: pointer;
  /* Named properties, never `all`: `all` animates layout too, and that jank is hard to
     trace back to its cause. */
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
button:hover:not(:disabled) { border-color: var(--accent); }
/* A focus ring nobody can see is the same as no focus ring, and --accent alone was under
   3:1 against the page on two of the fifteen palettes. --accent-text is that hue taken far
   enough to be read, which is more than a ring needs and exactly the point. */
button:focus-visible { outline: 2px solid var(--accent-text, var(--accent)); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Primary is filled, secondary is outline, tertiary is ghost. One role each. */
/* The label is --on-accent, not --bg: on a light palette with a pale accent, --bg on the
   fill measured 2.11:1, and the one button the page is built around was the hardest thing on
   it to read. --on-accent is whichever end of this palette can be read there. */
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); font-weight: 600; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.ghost { background: none; border-color: transparent; color: var(--dim); }

input[type=text], textarea {
  font: inherit;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--edge-strong, var(--edge));
  background: var(--bg);
  color: var(--fg);
  transition: border-color 140ms ease-out;
}
input[type=text]:focus, textarea:focus { outline: none; border-color: var(--accent); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }

.metric b { display: block; font-size: 25px; letter-spacing: -.5px; }
.metric span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }

.note { color: var(--dim); font-size: 13px; margin-top: 10px; }
.err  { color: var(--err); font-size: 13.5px; margin-top: 10px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; }
/* One direction only. A border-b on a row plus a border-t on the next draws a double line. */
tr + tr td, thead th { border-top: 1px solid color-mix(in srgb, var(--edge) 50%, transparent); }
th { color: var(--dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
td.num { text-align: right; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; border: 1px solid var(--edge); color: var(--dim);
}
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.err  { color: var(--err);  border-color: var(--err); }

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

/* Text for a screen reader and not for the eye.
   clip-path rather than the old width/height/clip trick: it does not collapse the element, so a
   focusable thing inside one is still reachable, and `white-space: nowrap` stops a long string
   being read as one word per line. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}