:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    --ink: #17202a;
    --muted: #59636f;
    --surface: #fff;
    --canvas: #f2f5f7;
    --border: #ccd3da;
    --brand: #175c4c;
    --brand-dark: #104438;
    --focus: #006fbb;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
a { color: #0b5a86; }
a:hover { color: #063f60; }
h1, h2 { line-height: 1.2; }
h1 { margin-top: 0; }

.site-header { background: #123d35; color: #fff; }
.site-header__inner { max-width: 76rem; margin: 0 auto; padding: .75rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; }
.brand { color: #fff; font-size: 1.15rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.main-navigation { display: flex; flex: 1; flex-wrap: wrap; gap: .25rem; margin: 0; }
.main-navigation a { color: #eaf5f2; padding: .55rem .65rem; border-radius: .35rem; text-decoration: none; }
.main-navigation a:hover, .main-navigation a.is-current { color: #fff; background: rgba(255, 255, 255, .14); }
.logout-form { margin: 0; display: block; }
.logout-form .button { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }

main { max-width: 76rem; margin: 1.5rem auto; padding: clamp(1rem, 3vw, 2rem); background: var(--surface); box-shadow: 0 1px 4px rgba(23, 32, 42, .08); }
.lead { color: var(--muted); font-size: 1.08rem; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

form { display: grid; gap: .65rem; margin: 1rem 0 2rem; max-width: 44rem; }
label { font-weight: 600; }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; margin-top: .25rem; padding: .65rem; border: 1px solid #9da8b3; border-radius: .3rem; background: #fff; color: var(--ink); }
textarea { resize: vertical; }
button, .button { display: inline-block; width: fit-content; padding: .62rem .9rem; border: 1px solid var(--brand); border-radius: .35rem; background: var(--brand); color: #fff; font-weight: 650; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { background: var(--brand-dark); color: #fff; }
.button--quiet { background: #fff; border-color: #9da8b3; color: var(--ink); }
.button--quiet:hover { background: #edf1f3; color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgba(0, 111, 187, .4); outline-offset: 2px; }
fieldset { display: grid; gap: .4rem; padding: 1rem; border: 1px solid var(--border); border-radius: .4rem; }
legend { font-weight: 700; }
.optional, .field-help { color: var(--muted); font-weight: 400; font-size: .9rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.compact-form { display: inline; margin: 0; }
.inline-create-form { grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 2fr) auto; max-width: none; align-items: end; }

.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 44rem; }
th, td { padding: .65rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
th { background: #edf1f3; }
tbody tr:nth-child(even) { background: #fafbfc; }

.errors { border-left: .4rem solid #a40000; padding: .75rem 1rem; background: #fff1f1; }
.status { border-left: .4rem solid #126b36; padding: .75rem 1rem; background: #edf9f1; }
.badge { display: inline-block; padding: .15rem .45rem; border-radius: 999px; background: #e8edf1; font-size: .88rem; }
.badge--success { color: #0b552b; background: #dff4e7; }
.badge--muted { color: #4e5964; background: #e7eaed; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.card, .panel { border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; background: #fff; }
.card h2, .panel h2 { margin-top: 0; }
.panel { margin: 1.25rem 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; padding: 1px; background: var(--border); }
.detail-grid > div { padding: .8rem; background: #fff; }
.detail-grid dt { color: var(--muted); font-size: .9rem; }
.detail-grid dd { margin: .2rem 0 0; font-weight: 600; }
.task-description { max-width: 50rem; }
.pagination { display: flex; gap: .75rem; margin-top: 1rem; }
.recovery-codes { columns: 2; }
.one-time-link { overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .site-header__inner { align-items: flex-start; flex-direction: column; gap: .45rem; }
    .main-navigation { width: 100%; }
    .logout-form { margin-top: .25rem; }
    main { margin: .75rem; padding: 1rem; }
    .form-grid, .inline-create-form { grid-template-columns: 1fr; }
    .page-heading { display: block; }
    .page-heading .button { margin-bottom: 1rem; }
    .recovery-codes { columns: 1; }
}