/* Shared Spearis application foundation. See UI_DESIGN.md before extending. */
@font-face {
  font-family: Manrope;
  src: url('./fonts/manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --ink: #173a33;
  --deep: #123e35;
  --green: #285c49;
  --muted: #54655b;
  --paper: #f5f3eb;
  --surface: #fffef9;
  --line: #d9ded3;
  --field-border: #819287;
  --gold: #ad863d;
  --focus: #835e1b;
  --success: #24543e;
  --success-bg: #eaf2e9;
  --warning: #735019;
  --warning-bg: #fbf0d8;
  --error: #922e28;
  --error-bg: #fff0eb;
  --radius: 8px;
  --space: 8px;
  font-family: Manrope, system-ui, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
::selection { background: #d9bb7c; color: var(--deep); }
main { max-width: 1168px; margin: 0 auto; padding: 0 32px 64px; }
h1, h2, h3 { color: var(--deep); line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; margin: 36px 0 16px; }
h2 { font-size: 1.3rem; font-weight: 650; margin: 0 0 16px; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 24px 0 12px; }
p { margin: 0 0 16px; overflow-wrap: anywhere; }
main > h1 + p { max-width: 80ch; color: var(--muted); }
a { color: var(--green); text-underline-offset: 4px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
a:hover { color: var(--deep); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, a, summary { touch-action: manipulation; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 4px;
}
section, .panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; margin: 24px 0;
}
section > :last-child { margin-bottom: 0; }
section section { padding: 20px; background: var(--paper); }
header { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
/* Same navigation destinations and labels, now shared with the wordmark. */
.app-header { min-height: 104px; align-items: center; gap: 32px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; max-width: 100%; padding-block: 16px; text-decoration: none; }
.brand img { width: 240px; max-width: 100%; height: auto; display: block; }
.primary-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.primary-nav a { display: block; padding: 12px 15px; border-radius: 5px; color: var(--muted); font-size: .875rem; font-weight: 650; text-decoration: none; }
.primary-nav a:hover { background: #e9ede3; color: var(--deep); }
.primary-nav a[aria-current='page'] { background: var(--deep); color: var(--surface); box-shadow: inset 0 -3px var(--gold); }
.skip-link { position: absolute; left: 16px; top: -120px; z-index: 10; padding: 12px 18px; background: var(--deep); color: var(--surface); }
.skip-link:focus { top: 12px; color: var(--surface); }
#main-content { scroll-margin-top: 20px; }
#main-content:focus { outline: none; }
.eyebrow { color: var(--muted); font-size: .75rem; letter-spacing: .13em; font-weight: 700; }
.workflow-status { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.workflow-status-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; font-size: .875rem; font-weight: 650; }
.workflow-status p { margin: 8px 0 0; color: var(--muted); font-size: .875rem; max-width: 90ch; }
.status-badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--field-border); border-radius: 4px; background: var(--surface); font-size: .8125rem; }
[data-state='setup_incomplete'] .status-badge, [data-state='paused'] .status-badge { color: var(--warning); background: var(--warning-bg); }
[data-state='enabled'] .status-badge { color: var(--success); background: var(--success-bg); }
[data-state='needs_attention'] .status-badge, [data-state='unavailable'] .status-badge { color: var(--error); background: var(--error-bg); }
/* Forms preserve native input semantics, validation and disabled behavior. */
label { display: block; font-size: .875rem; font-weight: 650; margin: 18px 0; }
input, select, textarea {
  display: block; width: 100%; min-width: 0; min-height: 46px;
  margin-top: 8px; padding: 11px 13px; border: 1px solid var(--field-border);
  border-radius: 5px; background: #fff; color: var(--ink); font-size: 1rem;
  line-height: 1.5; font-weight: 400;
}
textarea { resize: vertical; min-height: 128px; }
input::placeholder, textarea::placeholder { color: #627369; opacity: 1; }
input[type='checkbox'], input[type='radio'] { display: inline-block; width: 20px; height: 20px; min-height: 0; margin: 0 10px 0 0; vertical-align: middle; accent-color: var(--green); }
input[type='hidden'] { display: none; }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border: 2px solid var(--error); }
input:disabled, select:disabled, textarea:disabled { background: #e9ebe4; border-color: #a5afa6; color: #5a675f; cursor: not-allowed; opacity: 1; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; max-width: 100%; padding: 12px 18px; margin: 8px 8px 8px 0;
  border: 1px solid var(--green); border-radius: 5px; background: var(--green);
  color: var(--surface); cursor: pointer; font-weight: 650; font-size: .875rem;
  line-height: 1.5; text-align: center; text-decoration: none; overflow-wrap: anywhere;
}
button:hover:not(:disabled), .button:hover { background: var(--deep); color: var(--surface); }
button:active:not(:disabled) { box-shadow: inset 0 0 0 2px #ffffff30; }
button:disabled { background: #e1e5dc; color: #5a675f; border-color: #a5afa6; cursor: not-allowed; opacity: 1; }
.button-secondary, button[id*='cancel'], button[id*='refresh'], button[id='cancel'], button[id='refresh'] { background: transparent; color: var(--green); border-color: var(--field-border); }
.button-secondary:hover, button[id*='cancel']:hover:not(:disabled), button[id*='refresh']:hover:not(:disabled) { background: #e9ede3; color: var(--deep); }
.form-grid, .activity-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.form-grid > button { justify-self: start; grid-column: 1 / -1; }
.form-grid > label { margin: 12px 0; }
/* Status is text first; color supplements, never replaces, the existing label. */
[role='status']:not(:empty), [role='note'], .notice {
  padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--green);
  background: #edf1e8; border-radius: 5px; font-size: .875rem; margin: 20px 0; overflow-wrap: anywhere;
}
[role='alert']:not(:empty), .notice-error {
  padding: 14px 18px; border: 1px solid #c3887f; border-left: 3px solid var(--error);
  color: var(--error); background: var(--error-bg); border-radius: 5px; margin: 20px 0; overflow-wrap: anywhere;
}
[role='alert']:empty, [role='status']:empty { display: none; }
.workflow-status[role='status']:not(:empty) { padding: 0 0 20px; margin: 0 0 20px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
[role='note'], #warnings:not(:empty), .notice-warning { background: var(--warning-bg); color: var(--warning); border-color: #bda16d; border-left-color: var(--gold); }
.notice-success { color: var(--success); background: var(--success-bg); border-color: #84a58d; border-left-color: var(--success); }
[role='alert'] > :last-child { margin-bottom: 0; }
#confirmation, section[id$='confirmation'] { border: 2px solid var(--gold); scroll-margin-top: 24px; }
#activity > section > p:first-child { color: var(--muted); font-size: .8125rem; font-weight: 650; }
#activity > section > strong { display: inline-block; padding: 5px 10px; margin: 0 0 12px; border: 1px solid var(--field-border); border-radius: 4px; background: var(--paper); font-size: .8125rem; }
#activity > section:is([data-state='accepted'], [data-state='mock_accepted_no_delivery']) > strong { color: var(--success); background: var(--success-bg); border-color: #84a58d; }
#activity > section:is([data-state='failed'], [data-state='rejected'], [data-state='not_sent']) > strong { color: var(--error); background: var(--error-bg); border-color: #c3887f; }
#activity > section:is([data-state='uncertain'], [data-state='uncertain_do_not_retry'], [data-state='queued']) > strong { color: var(--warning); background: var(--warning-bg); border-color: #bda16d; }
#exceptions > section { border-left: 3px solid var(--gold); }
#activity > p:only-child, #clients > p:only-child, #exceptions > p:only-child { border: 1px dashed var(--field-border); padding: 28px; border-radius: var(--radius); background: var(--surface); }
/* Details stay native and keyboard operable. Nothing is collapsed by CSS. */
details { border-top: 1px solid var(--line); margin-top: 20px; padding: 16px 0; }
summary { min-height: 44px; cursor: pointer; font-size: .9375rem; font-weight: 650; padding: 8px 0; overflow-wrap: anywhere; }
details[open] > summary { margin-bottom: 16px; }
.advanced-navigation { font-size: .875rem; margin: 0; }
.advanced-navigation nav { line-height: 2.5; }
#add { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 28px; }
li { padding-left: 4px; margin: 12px 0; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .875rem/1.7 Manrope, system-ui, sans-serif; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 18px; }
code { overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; background: var(--surface); }
caption { text-align: left; padding: 12px 0; font-weight: 650; }
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); padding: 14px 16px; overflow-wrap: anywhere; }
th { background: #e9ede3; color: var(--deep); font-weight: 700; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-scroll table { min-width: 600px; }
/* Sign-in uses the same identity and controls, without marketing decoration. */
body:has(main.login) { border-top: 6px solid var(--deep); }
main.login { max-width: 480px; margin: 72px auto; padding: 40px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); background: var(--surface); }
.login .brand { margin-bottom: 28px; }
.login h1 { margin: 12px 0; font-size: 2rem; }
.login .eyebrow { margin-bottom: 8px; }
.login button { width: 100%; margin: 12px 0 0; }
@media (max-width: 760px) {
  main { padding: 0 20px 40px; }
  .app-header { flex-direction: column; align-items: stretch; padding: 20px 0 16px; gap: 12px; margin-bottom: 20px; }
  .brand { align-self: start; }
  .brand img { width: 220px; }
  .primary-nav { gap: 4px; }
  .primary-nav a { padding: 10px 12px; }
  .form-grid, .activity-filters { grid-template-columns: minmax(0, 1fr); gap: 0; }
  section, .panel { padding: 22px; }
}
@media (max-width: 480px) {
  main { padding-inline: 16px; }
  h1 { margin-top: 28px; }
  section, .panel, #add { padding: 20px 16px; }
  .primary-nav { display: grid; grid-template-columns: auto auto; }
  .primary-nav a { text-align: center; }
  header { flex-wrap: wrap; }
  main.login { margin: 32px 16px; padding: 28px 24px; }
  pre { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { button, .primary-nav a[aria-current='page'] { border: 1px solid ButtonText; } }