:root {
  --ink: #172a3a;
  --ink-soft: #627182;
  --background: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f1f4f7;
  --accent: #285fc4;
  --accent-strong: #204e9f;
  --accent-wash: #f0f5fd;
  --signal: #ad593d;
  --danger: #9c3d2e;
  --line: #e1e7ec;
  --line-strong: #c7d2dc;
  --shadow: 0 4px 20px #172a3a06;
  --paper: #ffffff;
  --radius-s: 0.45rem;
  --radius-m: 0.75rem;
  --radius-l: 0.9rem;
  --font-body: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  color: var(--ink);
  background: var(--background);
  font-family: var(--font-body);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
/* The browser's own `[hidden] { display: none }` is a user-agent rule, and any
   author `display` at all beats it — so a component that sets its own display
   quietly makes `hidden` do nothing. `.outline-button` did exactly that, and
   the install offer was visible to everyone for as long as it existed. Stated
   once, with the weight it takes to win, rather than repaired per component:
   three stylesheets had already written their own copy of this line.
   `:not([hidden])` selectors still behave, and nothing here uses
   `hidden="until-found"`, which this would break. */
[hidden] { display: none !important; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button, input, textarea, select, fieldset { min-width: 0; }
a { color: var(--accent); text-underline-offset: 0.2em; }
button, summary, input[type="submit"] { cursor: pointer; }
img { max-width: 100%; }
.site-body { min-height: 100vh; background: var(--background); }
:where(h1, h2, h3, p, address, a, summary) { overflow-wrap: anywhere; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
:where(button, input):disabled { cursor: wait; opacity: 0.6; }
.field_with_errors { display: contents; }
.field_with_errors :is(input, textarea, select) { border-color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -8rem; z-index: 2000; padding: 0.8rem 1rem; border-radius: var(--radius-s); background: var(--ink); color: white; }
.skip-link:focus { top: 0.75rem; }

.eyebrow { margin: 0 0 var(--space-xs); color: var(--signal); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lede { max-width: 42rem; margin: var(--space-s) 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
.page-heading { margin-bottom: var(--space-l); }
.page-heading h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.page-heading__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

.primary-button, .solid-button, .quiet-button, .outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  color: white;
  background: var(--accent);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.primary-button:hover, .solid-button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.primary-button--compact { padding: 0.6rem 0.9rem; }
.primary-button--danger { border-color: var(--danger); background: var(--danger); }
.primary-button--danger:hover { border-color: #7d3125; background: #7d3125; }
.quiet-button, .outline-button { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.quiet-button:hover, .outline-button:hover { border-color: var(--accent); background: var(--accent-wash); }
.text-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.text-button:hover { color: var(--accent-strong); }
.text-button--danger { color: var(--danger); }

.stacked-form, .field { display: grid; gap: var(--space-2xs); }
.stacked-form { gap: var(--space-m); }
.field label { color: var(--ink); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--ink);
  background: var(--surface);
  font-size: 0.95rem;
  line-height: 1.5;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field input[type="checkbox"], .field input[type="radio"] { width: 1.15rem; min-height: 1.15rem; accent-color: var(--accent); }
.field input[type="file"] { padding: 0.5rem; }
.field-hint, .form-hint { margin: 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.6; }
.flash, .discover-flash {
  margin: 0 0 var(--space-m);
  padding: 0.85rem 1rem;
  border: 1px solid #cbdcf5;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  color: var(--ink);
  background: var(--accent-wash);
  font-size: 0.85rem;
  line-height: 1.6;
}
.flash p, .discover-flash p { margin-top: 0; }
.flash ul { margin-bottom: 0; padding-left: 1.25rem; }
.flash--alert, .discover-flash--alert { border-color: #e7c9c2; border-left-color: var(--danger); background: #fff5f2; }
.empty-state { padding: var(--space-l); border: 1px dashed var(--line-strong); border-radius: var(--radius-m); color: var(--ink-soft); background: var(--surface); line-height: 1.7; }

/* Status remains text, including when animation is disabled. */
.search-loading { display: none; margin: 1rem 0; color: var(--ink-soft); font-size: 0.85rem; }
.search-region:has(turbo-frame[busy]) > .search-loading { display: block; }
turbo-frame[busy] { opacity: 0.6; }
.provider-credit { margin: 0.5rem 0 0; color: #5e5e5e; font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; text-transform: none; }

.profile-shell { width: min(760px, calc(100% - 3rem)); min-height: calc(100vh - 4.5rem); margin: 0 auto; padding: var(--space-xl) 0; }
.profile-card { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
.profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.signed-in-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }

@media (max-width: 760px) {
  .profile-fields { grid-template-columns: 1fr; }
  .profile-shell { width: calc(100% - 2rem); padding: var(--space-l) 0; }
  .field input, .field textarea, .field select { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Choosing a profile picture, beside the one already chosen. */
.avatar-field__preview { display: block; width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: var(--surface-soft); }
.avatar-field__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-field__remove { display: flex; align-items: center; gap: var(--space-2xs); font-size: 0.8rem; color: var(--ink-soft); cursor: pointer; }
.avatar-field input[type="file"] { width: 100%; }