/* Customize these tokens to theme the application. No external fonts or CDN. */
:root {
  --color-bg: #f4f7fa;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-muted: #475569;
  --color-accent: #155e75;
  --color-border: #cbd5e1;
  --radius: .65rem;
  --content-width: 72rem;
  --space: 1rem;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 1rem/1.6 var(--font); }
a { color: var(--color-accent); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.container { width: min(var(--content-width), 100% - 2 * var(--space)); margin-inline: auto; }
header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding-block: 1rem; }
nav form { margin: 0; padding: 0; border: 0; background: transparent; }
.brand { font-weight: 750; font-size: 1.25rem; margin-right: auto; }
main { min-height: 70vh; padding-block: 2rem; }
footer { color: var(--color-muted); padding-block: 2rem; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.2; }
h2 { font-size: 1.4rem; }
h1, h2, h3 { overflow-wrap: anywhere; }
.hero { padding-block: clamp(1rem, 5vw, 4rem); max-width: 52rem; }
.hero p { font-size: 1.2rem; }
.card, form:not(nav form) { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.2rem; margin-block: 1rem; }
.grid, .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
label { display: block; font-weight: 600; margin-top: .6rem; }
input:not([type=checkbox]):not([type=hidden]), textarea, select { display: block; font: inherit; padding: .5rem; border: 1px solid var(--color-border); border-radius: .3rem; width: 100%; background: var(--color-surface); color: var(--color-text); }
input:disabled { background: var(--color-bg); }
button, .btn { display: inline-block; font: inherit; background: var(--color-accent); color: white; border: 1px solid var(--color-accent); border-radius: .35rem; padding: .45rem .85rem; cursor: pointer; text-decoration: none; margin-block: .4rem; }
.btn.secondary { background: var(--color-surface); color: var(--color-accent); }
.resource-list { padding: 0; list-style: none; }
.muted, .text-muted { color: var(--color-muted); }
.alert { background: #e0f2fe; padding: .75rem; border-radius: var(--radius); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid var(--color-border); padding: .6rem; overflow-wrap: anywhere; }
.skip-link { position: absolute; top: -100px; padding: .5rem; background: var(--color-surface); }
.skip-link:focus { top: 0; }
@media (max-width: 40rem) { nav { gap: .7rem; } .brand { flex-basis: 100%; } th, td { padding: .3rem; } }