:root {
  --font-sans: InterVariable, sans-serif;
}

/* Field and fieldset descriptions (help text under inputs) are smaller than input text so forms read as forms.
   Same selectors Basecoat uses for these descriptions; applies to every style. */
.fieldset legend + p,
.field > p,
.field section > p {
  font-size: 0.75rem;
  line-height: 1.4;
}

/* A record's main name/description field (data-record-name) is larger and heavier, so the page heading doesn't
   need to repeat the record's name. Uses the foreground token, so it follows every style and dark mode. */
.field input[data-record-name] {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--color-foreground);
  height: auto;
  min-height: 2.75rem;
}

/* Sortable column headings (<sort-th>): show the icon matching the heading's aria-sort. */
th[data-sort-key]:not([aria-sort]) :is(.sort-icon-asc, .sort-icon-desc),
th[data-sort-key][aria-sort="ascending"] :is(.sort-icon-none, .sort-icon-desc),
th[data-sort-key][aria-sort="descending"] :is(.sort-icon-none, .sort-icon-asc) {
  display: none;
}

/* Profile > Page background (light) and Page background (dark); unset uses the style's background. */
html:not(.dark) body {
  background-color: var(--page-background, var(--background));
}

html.dark body {
  background-color: var(--page-background-dark, var(--background));
  color: var(--foreground);
}

/* A nested .dark scope (the dark Page background picker): Basecoat resolves its --color-* tokens once on :root, so
   components inside would keep light-mode colors (a checked radio vanished). Re-resolve them from the .dark values. */
:not(html).dark {
  --color-background: var(--background); --color-foreground: var(--foreground);
  --color-card: var(--card); --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring);
}

/* Basecoat Dialogs (+ Time, contacts) open near the top instead of centered, so on tall screens they don't sit too far
   down the page: the panel's top edge is 12% of the viewport down, between 1rem and 8rem. Alert dialogs stay centered. */
dialog.dialog > div {
  top: clamp(1rem, 12vh, 8rem);
  translate: -50% 0;
  max-height: calc(100dvh - clamp(1rem, 12vh, 8rem) - 1rem);
}

/* Rendered Markdown docs (Admin/Config > Development: Ui/ProjectDocs.cs). Basecoat has no prose styles; these use its tokens. */
.project-doc { font-size: 0.875rem; line-height: 1.6; overflow-wrap: anywhere; }
.project-doc > * + * { margin-top: 0.75rem; }
.project-doc h1 { font-size: 1.25rem; font-weight: 600; }
.project-doc h2 { font-size: 1.05rem; font-weight: 600; margin-top: 1.5rem; }
.project-doc h3, .project-doc h4 { font-weight: 600; margin-top: 1.25rem; }
.project-doc ul { list-style: disc; padding-left: 1.25rem; }
.project-doc ol { list-style: decimal; padding-left: 1.25rem; }
.project-doc li + li { margin-top: 0.25rem; }
.project-doc a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.project-doc code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8em; background: var(--muted); border-radius: 0.25rem; padding: 0.1rem 0.3rem; }
.project-doc pre { background: var(--muted); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; }
.project-doc pre code { background: none; padding: 0; }
.project-doc table { display: block; overflow-x: auto; }
.project-doc td, .project-doc th { white-space: normal; vertical-align: top; min-width: 8rem; }