/* Adapted from Factornix's shared CSS; see docs/architecture/factornix-reuse.md. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: var(--page-min-height); display: flex; flex-direction: column; color: var(--fg); background: var(--bg); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); }
h1, h2, h3, h4 { color: var(--fg); font-family: var(--font-display); font-weight: var(--display-weight); line-height: var(--leading-tight); overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: var(--h1-size); font-weight: var(--weight-bold); }
h2 { font-size: var(--h2-size); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
p { margin-block: 0 var(--space-4); }
a { color: var(--accent); text-underline-offset: var(--space-1); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-width); border-radius: var(--radius-sm); }
.container { width: min(100%, var(--content-width)); margin-inline: auto; padding-inline: var(--space-4); }
main { flex: 1; width: 100%; padding-block: var(--space-8) var(--space-16); }
.prose { max-width: var(--measure); }
.stack > * + * { margin-top: var(--space-6); }
.skip-link { position: absolute; inset-inline-start: calc(-1 * var(--skip-offset)); top: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-4); background: var(--fg); color: var(--bg); }
.skip-link:focus { inset-inline-start: var(--space-4); }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--header-glass); backdrop-filter: saturate(var(--header-saturation)) blur(var(--header-blur)); -webkit-backdrop-filter: saturate(var(--header-saturation)) blur(var(--header-blur)); border-bottom: var(--line-width) solid var(--border); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--space-16); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg); font-family: var(--font-display); font-weight: var(--display-weight); text-decoration: none; }
.brand-logo { max-height: var(--space-8); width: auto; }
.nav-links { display: none; align-items: center; gap: var(--space-1); padding: 0; margin: 0; list-style: none; }
.nav-links a:not(.button), .mobile-nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--fg-soft); font-size: var(--nav-text-size); font-weight: var(--weight-medium); text-decoration: none; transition: background var(--transition), color var(--transition); }
.nav-links a:not(.button):hover, .mobile-nav a:hover { background: var(--surface-sunken); color: var(--fg); }
.nav-links a:not(.button)[aria-current="page"], .mobile-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.mobile-nav summary { cursor: pointer; font-weight: var(--weight-semibold); }
.mobile-nav ul { position: absolute; inset-inline: 0; top: 100%; margin: 0; padding: var(--space-4); list-style: none; background: var(--surface-raised); box-shadow: var(--shadow); }
.mobile-nav li + li { margin-top: var(--space-3); }
.inline-form { display: inline; margin: 0; }
.site-footer { border-top: var(--line-width) solid var(--border); background: var(--surface); color: var(--muted); font-size: var(--footer-text-size); padding-block: var(--space-12) var(--space-8); }
.footer-grid { display: grid; gap: var(--space-8); align-items: start; }
.site-footer p { margin-block: 0 var(--space-2); }
.footer-heading { margin: 0 0 var(--space-3); color: var(--fg-soft); font-size: var(--footer-heading-size); font-weight: var(--weight-bold); letter-spacing: var(--footer-heading-tracking); text-transform: uppercase; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.footer-links a { color: var(--muted); text-decoration: none; transition: color var(--transition); }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-copyright { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--line-width) solid var(--border); font-size: var(--footer-copyright-size); }
.button, button:where(:not(.link-button)) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); min-height: var(--touch-target); border: var(--line-width) solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-fg); font: inherit; font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); }
.button:hover, button:where(:not(.link-button)):hover { background: var(--accent-hover); color: var(--accent-fg); box-shadow: var(--shadow-sm); }
.button:active, button:where(:not(.link-button)):active { transform: translateY(var(--press-offset)); }
.button-secondary { background: var(--surface-raised); color: var(--accent); }
.button-secondary:hover, button.button-secondary:hover { color: var(--fg); background: var(--surface-sunken); }
.button-danger:hover, button.button-danger:hover { color: var(--accent-fg); background: var(--danger-fg); border-color: var(--danger-fg); }
.button-danger { border-color: var(--danger-fg); background: var(--danger-fg); }
.button-small { min-height: var(--touch-target-small); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.button-link { border-color: transparent; background: transparent; color: var(--accent); text-decoration: underline; }
.button-link:hover { background: var(--accent-soft); color: var(--accent); }
.button:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.link-button { border: 0; border-radius: var(--radius-pill); background: none; color: var(--fg-soft); font: inherit; font-size: var(--nav-text-size); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--transition), color var(--transition); }
.link-button:hover { background: var(--surface-sunken); color: var(--fg); }
.auth-card, .card, .panel { padding: var(--space-6); border: var(--line-width) solid var(--border); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.auth-card { max-width: var(--auth-card-width); }
.card-grid, .stat-grid { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { font-weight: var(--weight-semibold); }
.field input, .field select, .field textarea, select, textarea { width: 100%; min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font: inherit; }
.field textarea { min-height: var(--textarea-min-height); }
.field input[type="checkbox"], .field input[type="radio"] { width: auto; min-height: auto; }
.field input[type="file"] { padding: var(--space-2); }
.field [aria-invalid="true"] { border-color: var(--danger-fg); }
.field-hint { color: var(--muted); font-size: var(--text-sm); }
.field-error { color: var(--danger-fg); font-size: var(--text-sm); margin: 0; }
fieldset { border: var(--line-width) solid var(--border); border-radius: var(--radius); }
legend { font-weight: var(--weight-semibold); }
.alert, .flash, .form-errors { padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--info-border); border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-fg); }
.alert-success, .flash-success { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }
.alert-warning, .flash-warning { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-fg); }
.alert-danger, .flash-error, .form-errors { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.alert p:last-child, .flash p:last-child { margin-bottom: 0; }
.flashes { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.badge { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.details { display: grid; grid-template-columns: minmax(max-content, 1fr) 2fr; gap: var(--space-2) var(--space-4); }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.page-header { margin-bottom: var(--space-8); }
.lede { max-width: var(--measure); color: var(--muted); font-size: var(--text-lg); }
.empty-state { padding: var(--space-8); border: var(--line-width) dashed var(--border-strong); border-radius: var(--radius); text-align: center; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-3); border-bottom: var(--line-width) solid var(--border); text-align: left; overflow-wrap: break-word; }
.data-table tbody tr:hover { background: var(--surface); }
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.tabs, .pagination, .section-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; padding: 0; }
.tabs a, .pagination a, .section-nav a { display: inline-block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; }
.tabs a:hover, .pagination a:hover, .section-nav a:hover { text-decoration: underline; }
.tabs [aria-current="page"], .section-nav [aria-current="page"] { background: var(--accent-soft); font-weight: var(--weight-semibold); }
.dialog { max-width: min(var(--dialog-viewport-width), var(--dialog-width)); border: var(--line-width) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.dialog::backdrop { background: var(--scrim); }
.htmx-indicator { opacity: 0; transition: opacity var(--indicator-duration) ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
@media (min-width: 600px) { .container { padding-inline: var(--space-6); } .card-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .nav-links { display: flex; } .mobile-nav { display: none; } .section-nav { flex-direction: column; } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: var(--reduced-motion-duration) !important; animation-duration: var(--reduced-motion-duration) !important; } }