/* Corstrate Interface Kit v1.0.0 — copy this file; no runtime dependency required. */
:root {
  color-scheme: light;
  --corstrate-color-canvas: #f4f6f8;
  --corstrate-color-surface: #ffffff;
  --corstrate-color-text: #17212b;
  --corstrate-color-muted: #64748b;
  --corstrate-color-border: #cbd5e1;
  --corstrate-color-primary: #075985;
  --corstrate-color-primary-hover: #0c4a6e;
  --corstrate-color-primary-soft: #e0f2fe;
  --corstrate-color-info-bg: #f0f9ff;
  --corstrate-color-info-border: #7dd3fc;
  --corstrate-color-success: #065f46;
  --corstrate-color-success-bg: #ecfdf5;
  --corstrate-color-success-border: #6ee7b7;
  --corstrate-color-loading: #92400e;
  --corstrate-color-loading-bg: #fffbeb;
  --corstrate-color-loading-border: #fcd34d;
  --corstrate-color-error: #9f1239;
  --corstrate-color-error-bg: #fff1f2;
  --corstrate-color-error-border: #fda4af;
  --corstrate-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --corstrate-font-size-sm: .82rem;
  --corstrate-font-size-label: .78rem;
  --corstrate-line-height: 1.5;
  --corstrate-space-1: .25rem;
  --corstrate-space-2: .5rem;
  --corstrate-space-3: .75rem;
  --corstrate-space-4: 1rem;
  --corstrate-space-5: 1.5rem;
  --corstrate-space-6: 2rem;
  --corstrate-radius-sm: .4rem;
  --corstrate-radius-md: .6rem;
  --corstrate-radius-lg: .8rem;
  --corstrate-shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
  font-family: var(--corstrate-font-sans);
  line-height: var(--corstrate-line-height);
  background: var(--corstrate-color-canvas);
  color: var(--corstrate-color-text);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; }
a { color: var(--corstrate-color-primary); }
:focus-visible { outline: 3px solid var(--corstrate-color-info-border); outline-offset: 2px; }
.skip-link { position: absolute; left: var(--corstrate-space-4); top: -4rem; padding: var(--corstrate-space-3) var(--corstrate-space-4); background: var(--corstrate-color-surface); z-index: 10; }
.skip-link:focus { top: var(--corstrate-space-4); }
.shell { width: min(76rem, calc(100% - 2rem)); margin: 0 auto; padding: var(--corstrate-space-6) 0 4rem; }

.app-header,
.masthead { margin-bottom: var(--corstrate-space-5); }
.section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--corstrate-space-3); margin-bottom: var(--corstrate-space-5); }
.section-nav a { padding: var(--corstrate-space-2) var(--corstrate-space-3); border-radius: var(--corstrate-radius-sm); }
.section-nav a[aria-current="page"] { background: var(--corstrate-color-primary-soft); font-weight: 700; text-decoration: none; }
.section-nav .session-control { margin-left: auto; border: 1px solid var(--corstrate-color-border); }

.eyebrow { margin: 0 0 .35rem; color: #0369a1; font-size: var(--corstrate-font-size-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.2; }
h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.75rem); }
.lede { max-width: 48rem; color: #4b5563; }
.muted { color: var(--corstrate-color-muted); }

.grid { display: grid; gap: var(--corstrate-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.stack { display: grid; gap: var(--corstrate-space-4); }
.card { overflow: hidden; border: 1px solid #d8dee6; border-radius: var(--corstrate-radius-lg); background: var(--corstrate-color-surface); box-shadow: var(--corstrate-shadow-sm); }
.card-body { padding: 1.15rem; }
.card h2, .card h3 { margin-top: 0; }
.facts { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
.facts div { min-width: 0; }
.facts dt { color: var(--corstrate-color-muted); font-size: var(--corstrate-font-size-label); font-weight: 700; text-transform: uppercase; }
.facts dd { margin: .2rem 0 0; overflow-wrap: anywhere; }

.button,
.button-link,
button { display: inline-block; padding: .65rem .8rem; border: 1px solid var(--corstrate-color-primary); border-radius: var(--corstrate-radius-sm); background: var(--corstrate-color-primary); color: #fff; font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.button:hover,
.button-link:hover,
button:hover { background: var(--corstrate-color-primary-hover); border-color: var(--corstrate-color-primary-hover); }
.button[aria-disabled="true"],
button:disabled { opacity: .55; cursor: not-allowed; }
button.danger { background: var(--corstrate-color-surface); color: var(--corstrate-color-error); border-color: var(--corstrate-color-error); }

.form,
.member-form { display: grid; gap: var(--corstrate-space-4); max-width: 34rem; }
.form label,
.member-form label { display: grid; gap: .4rem; font-weight: 600; }
.member-action { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .7rem; }
input:not([type="checkbox"]),
select,
textarea { width: 100%; padding: .65rem .8rem; border: 1px solid #94a3b8; border-radius: var(--corstrate-radius-sm); background: var(--corstrate-color-surface); color: var(--corstrate-color-text); font: inherit; }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--corstrate-color-error); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--corstrate-color-surface); }
th, td { padding: .8rem var(--corstrate-space-4); border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
th { color: #475569; font-size: var(--corstrate-font-size-label); text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }

.pill-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.badge,
.pill { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; background: var(--corstrate-color-primary-soft); color: var(--corstrate-color-primary); font-size: var(--corstrate-font-size-sm); font-weight: 600; }
.badge-success { background: var(--corstrate-color-success-bg); color: var(--corstrate-color-success); }
.badge-error { background: var(--corstrate-color-error-bg); color: var(--corstrate-color-error); }

.state,
.notice,
.empty-state { margin: 0; padding: var(--corstrate-space-4); border: 1px solid var(--corstrate-color-info-border); border-radius: var(--corstrate-radius-md); background: var(--corstrate-color-info-bg); }
.state-empty,
.empty-state { border-style: dashed; border-color: var(--corstrate-color-border); background: #f8fafc; color: #475569; }
.state-loading { border-color: var(--corstrate-color-loading-border); background: var(--corstrate-color-loading-bg); color: var(--corstrate-color-loading); }
.state-error { border-color: var(--corstrate-color-error-border); background: var(--corstrate-color-error-bg); color: var(--corstrate-color-error); }
.state-success { border-color: var(--corstrate-color-success-border); background: var(--corstrate-color-success-bg); color: var(--corstrate-color-success); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 40rem) {
  .shell { width: min(100% - 1rem, 76rem); padding-top: var(--corstrate-space-4); }
  .section-nav .session-control { margin-left: 0; }
  th, td { padding: .65rem; }
}