/* Structural layer — theme-agnostic. All colors/fonts come from theme-*.css tokens. */

* { box-sizing: border-box; }

body {
  font-family: var(--font-body, system-ui, sans-serif);
  background: var(--bg, #fff);
  color: var(--ink, #111);
  max-width: 64rem;
  margin: 2rem auto;
  padding: 0 1.25rem;
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-display, inherit); line-height: 1.15; }
h1 { font-size: 1.9rem; margin: 1.2rem 0 .8rem; }
h2 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; }

a { color: var(--ink, #111); }

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: .75rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--nav-rule, 1px solid #ccc);
}
nav strong { font-family: var(--font-display, inherit); letter-spacing: var(--brand-tracking, 0); }
nav form.inline { margin-left: auto; }

table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; }
th, td { padding: .45rem .6rem; text-align: left; }
/* Diagnostics tables are wider than a phone; scroll the table, not the page. */
.table-scroll { overflow-x: auto; }

/* Override fields are short and independent; one per row wastes the width. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 1.75rem;
  max-width: 58rem;
}

form.inline { display: inline; }

label { display: inline-block; margin-bottom: .25rem; }
fieldset { border: none; padding: 0; margin: 0 0 1rem; }
legend { font-family: var(--font-label, inherit); font-size: .8rem; margin-bottom: .5rem; }

input, select, textarea, button { font-size: 1rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin-bottom: .9rem;
}
textarea { min-height: 5.5rem; }

pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .85rem;
  margin: .5rem 0;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

small { display: block; margin: -.5rem 0 .9rem; }
.error { color: var(--error, #b00); }

@media (max-width: 640px) {
  body { margin: 1rem auto; }
  nav { flex-wrap: wrap; }
}

.callout-warning {
  border: 2px solid var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  color: var(--ink);
  padding: .7rem .9rem;
  max-width: 34rem;
}