/* ─────────────────────────── Design tokens ───────────────────────────
 * The accessibility foundation that the future M2 Design System builds
 * on. Every pair below is verified against WCAG 2.1 AA at minimum;
 * see docs/solutions/best-practices/design-tokens.md for the full
 * contrast table and audit method.
 *
 * Token layers:
 *   1. Palette  — raw color values; the layer a future per-village
 *                 color picker will swap.
 *   2. Semantic — purpose-named aliases over the palette. Components
 *                 should consume these, NOT the palette.
 *   3. Motion / Type / Surface tokens — primitive scales.
 */
:root {
    /* ── Palette (raw values; do not consume directly in components) ── */
    --color-primary-dark: #13385d;
    --color-primary: #205685;
    --color-accent: #6cb8dd;       /* decorative only — fails AA on bg */
    --color-text: #2d3748;
    --color-muted: #5b6776;        /* AA on bg AND bg-alt (5.37:1 min) */
    --color-bg: #ffffff;
    --color-bg-alt: #f5f7fa;
    --color-border: #e2e8f0;
    --color-error: #c53030;
    --color-error-bg: #fef2f2;
    --color-success: #166534;      /* 7.51:1 on bg, AAA */
    --color-success-bg: #ecfdf5;
    --color-warning: #92400e;      /* 7.05:1 on bg, AAA */
    --color-warning-bg: #fffbeb;

    /* ── Semantic aliases (consume these in components) ── */
    --color-text-primary:    var(--color-text);
    --color-text-secondary:  var(--color-muted);
    --color-text-on-primary: #ffffff;
    --color-text-on-dark:    #ffffff;
    --color-text-link:       var(--color-primary);
    --color-text-link-hover: var(--color-primary-dark);
    --color-heading:         var(--color-primary-dark);

    --color-surface:         var(--color-bg);
    --color-surface-alt:     var(--color-bg-alt);
    --color-surface-strong:  var(--color-primary-dark);
    --color-surface-brand:   var(--color-primary);

    --color-border-default:  var(--color-border);
    --color-border-strong:   var(--color-primary);

    --color-feedback-error:           var(--color-error);
    --color-feedback-error-surface:   var(--color-error-bg);
    --color-feedback-success:         var(--color-success);
    --color-feedback-success-surface: var(--color-success-bg);
    --color-feedback-warning:         var(--color-warning);
    --color-feedback-warning-surface: var(--color-warning-bg);

    /* ── Focus ring ── */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-primary);
    --focus-ring-shadow: 0 0 0 var(--focus-ring-width) rgba(32, 86, 133, 0.45);

    /* ── Motion ── */
    --motion-duration-fast:  100ms;
    --motion-duration-base:  150ms;
    --motion-duration-slow:  250ms;
    --motion-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --motion-ease-out:       cubic-bezier(0.0, 0, 0.2, 1);

    /* ── Typography ── */
    --font-heading: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  1.875rem;
    --text-3xl:  2.25rem;

    --leading-tight:    1.25;
    --leading-snug:     1.4;
    --leading-normal:   1.6;
    --leading-relaxed:  1.7;

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;

    /* ── Surface / shape ── */
    --container-max: 960px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 4px rgba(19, 56, 93, 0.06);
    --shadow-md: 0 4px 16px rgba(19, 56, 93, 0.10);
}

/* Reduced-motion guard — honors user OS setting (accessibility). Kills
 * transition + animation durations and disables smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

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

html {
    color-scheme: light;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Universal focus ring — applied to every interactive primitive via
 * :focus-visible (only shown for keyboard/programmatic focus, not on
 * mouse click). Tokens drive width/offset/color so future themes can
 * override globally. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius);
}

/* Skip link — keyboard users land here first; visible on focus only. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--color-surface-strong);
    color: var(--color-text-on-dark);
    padding: 10px 16px;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: var(--font-weight-semibold);
}
.skip-to-content:focus-visible {
    left: 16px;
    top: 16px;
}

/* Visually hidden but exposed to assistive tech (form labels in dense tables, etc.). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Layout */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
}

main {
    flex: 1;
    padding: 48px 0;
}

section + section {
    margin-top: 48px;
}

/* Typography */

h1, h2 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h1 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.6rem;
    margin-bottom: 20px;
}

h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: var(--color-primary);
    margin-top: 10px;
    border-radius: 2px;
}

h3 {
    font-family: var(--font-body);
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 32px;
    margin-bottom: 10px;
}

h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
}

p {
    font-size: 1rem;
    margin-bottom: 12px;
}

strong {
    color: var(--color-primary-dark);
    font-weight: 600;
}

em {
    color: var(--color-muted);
    font-style: italic;
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(32, 86, 133, 0.35);
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color var(--motion-duration-base) var(--motion-ease), text-decoration-color var(--motion-duration-base) var(--motion-ease);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary-dark);
}

/* Definition lists (used on /about) */

dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    row-gap: 8px;
    margin-top: 16px;
    font-size: 0.95rem;
}

dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
    align-self: center;
}

dd {
    color: var(--color-text);
}

/* Header & nav */

body > header {
    background: var(--color-primary-dark);
    color: #fff;
    padding: 18px 0;
    border-bottom: 3px solid var(--color-primary);
}

body > header .container,
body > header > h1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

body > header h1 {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0;
    line-height: 1.2;
}

body > header h1 a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

body > header h1 a:hover {
    color: var(--color-accent);
}

body > header nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--font-body);
}

body > header nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    letter-spacing: 0.01em;
}

body > header nav a:hover {
    color: #fff;
    border-bottom-color: var(--color-accent);
}

body > header nav a[aria-current="page"] {
    border-bottom-color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

body > header nav .user {
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 4px;
    font-style: normal;
}

body > header nav form {
    display: inline;
    margin: 0;
}

body > header nav button {
    margin: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--motion-duration-base) var(--motion-ease), border-color var(--motion-duration-base) var(--motion-ease);
}

body > header nav button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Footer */

body > footer {
    background: var(--color-bg-alt);
    color: var(--color-muted);
    padding: 24px 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    text-align: center;
}

/* Buttons */

button, .button, input[type="submit"] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 22px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--motion-duration-base) var(--motion-ease), border-color var(--motion-duration-base) var(--motion-ease), transform var(--motion-duration-fast) var(--motion-ease);
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

button:hover, .button:hover, input[type="submit"]:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

button:active, .button:active {
    transform: translateY(1px);
}

button.secondary, .button.secondary {
    background: transparent;
    color: var(--color-primary);
}

button.secondary:hover, .button.secondary:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary-dark);
}

/* Forms */

form {
    margin-top: 16px;
    max-width: 620px;
}

form > label {
    display: block;
    margin-bottom: 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="number"],
form input[type="tel"],
form input[type="date"],
form input[type="time"],
form input:not([type]),
form textarea {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-text);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color var(--motion-duration-base) var(--motion-ease), box-shadow var(--motion-duration-base) var(--motion-ease);
}

form input:focus, form textarea:focus, form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(32, 86, 133, 0.15);
}

form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

form select {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 10px 40px 10px 12px;
    margin-top: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: #fff;
    color: var(--color-text);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color var(--motion-duration-base) var(--motion-ease), box-shadow var(--motion-duration-base) var(--motion-ease);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23205685' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

form select:hover {
    border-color: var(--color-primary);
}

form select:disabled {
    background-color: #f5f5f5;
    color: var(--color-muted);
    cursor: not-allowed;
}

form select option {
    font-family: var(--font-body);
    color: var(--color-text);
    padding: 6px 10px;
}

form fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 18px 16px;
    margin-bottom: 20px;
    background: #fff;
}

form fieldset legend {
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
}

form fieldset label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

form fieldset label:last-child {
    margin-bottom: 0;
}

form fieldset input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

form fieldset label em {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-left: 4px;
}

form > button,
form > .button,
form > a {
    margin-top: 8px;
    margin-right: 8px;
}

form > a {
    font-size: 0.9rem;
}

/* Error / notice */

.error {
    background: var(--color-error-bg);
    color: var(--color-error);
    padding: 10px 14px;
    border-radius: var(--radius);
    border-left: 3px solid var(--color-error);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

/* Section headers with inline action (e.g. "Users" + "Add user" link) */

section > header {
    background: transparent;
    color: inherit;
    padding: 0;
    border-bottom: none;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

section > header h2 {
    margin-bottom: 0;
}

section > header a {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

section > header a:hover {
    text-decoration: underline;
}

/* Tables */

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

table thead {
    background: var(--color-bg-alt);
}

table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
    border-bottom: 1px solid var(--color-border);
}

table td {
    padding: 12px 16px;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

table tbody tr:last-child td {
    border-bottom: none;
}

table tbody tr:hover {
    background: var(--color-bg-alt);
}

table td a {
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-right: 12px;
}

table td a:hover {
    text-decoration: underline;
}

table td form {
    display: inline;
    margin: 0;
    max-width: none;
}

table td button {
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    background: transparent;
    color: var(--color-error);
    border-color: var(--color-error);
}

table td button:hover {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}

table td em {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* Dashboard panels */

.panels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.panels article {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: box-shadow var(--motion-duration-slow) var(--motion-ease), transform var(--motion-duration-slow) var(--motion-ease), border-color var(--motion-duration-slow) var(--motion-ease);
}

.panels article:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.panels article h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.panels article h3 a {
    text-decoration: none;
    color: inherit;
}

.panels article:hover h3 a {
    color: var(--color-primary);
}

.panels article p {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* Toast notifications */

.toast-tray {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
    max-width: 360px;
}

.toast {
    pointer-events: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 12px 16px;
    box-shadow: var(--shadow-md);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateX(20px);
    opacity: 0;
    transition: transform var(--motion-duration-slow) var(--motion-ease-out), opacity var(--motion-duration-slow) var(--motion-ease-out);
}

.toast--visible {
    transform: translateX(0);
    opacity: 1;
}

.toast--leaving {
    transform: translateX(20px);
    opacity: 0;
}

.toast--success { border-left-color: #38a169; }
.toast--error   { border-left-color: var(--color-error); }
.toast--warning { border-left-color: #d69e2e; }
.toast--info    { border-left-color: var(--color-primary); }

.toast__message {
    flex: 1;
    line-height: 1.45;
}

.toast__dismiss {
    background: transparent;
    border: none;
    color: var(--color-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    margin: -2px -4px -2px 0;
    line-height: 1;
    font-weight: 400;
    box-shadow: none;
    border-radius: 0;
}

.toast__dismiss:hover {
    color: var(--color-text);
    background: transparent;
    border-color: transparent;
}

/* ORC (Ohio Revised Code) auto-linker — see modules/core/OrcLinker.groovy */
a.orc-link {
    color: var(--color-primary);
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--motion-duration-base) var(--motion-ease), text-decoration-style var(--motion-duration-base) var(--motion-ease);
    white-space: nowrap;
}

a.orc-link:hover {
    color: var(--color-primary-dark);
    text-decoration-style: solid;
}

a.orc-link::after {
    content: " \2197";
    font-size: 0.85em;
    opacity: 0.6;
}

/* ───────────────────────────── Card Shell ─────────────────────────────
   Two-column layout used inside admin "card detail" pages. Left column
   is a section selector; right column holds the active section's form.
   See modules/CoreModule.groovy / SECTIONS for the data shape. */

.card-shell {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-shell__header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.card-shell__header h2 {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
}

.card-shell__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 320px;
}

.card-shell__nav {
    border-right: 1px solid var(--color-border);
    padding: 16px 0;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
}

.card-shell__link {
    display: block;
    padding: 10px 20px 10px 24px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    transition: background-color var(--motion-duration-base) var(--motion-ease), color var(--motion-duration-base) var(--motion-ease), border-color var(--motion-duration-base) var(--motion-ease);
}

.card-shell__link:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary-dark);
}

.card-shell__link.active {
    background: var(--color-bg-alt);
    color: var(--color-primary-dark);
    border-left-color: var(--color-primary);
    font-weight: 600;
}

.card-shell__content {
    padding: 24px 28px;
    min-width: 0; /* prevents grid blowout from long form content */
}

.card-shell__content h3 {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
}

.card-shell__hint {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0 0 18px;
}

@media (max-width: 700px) {
    .card-shell__layout {
        grid-template-columns: 1fr;
    }
    .card-shell__nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 8px 12px;
    }
    .card-shell__link {
        padding: 8px 12px;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: var(--radius);
    }
    .card-shell__link.active {
        border-left: none;
        border-bottom-color: var(--color-primary);
    }
}