/* DBDriven Vanish. Colours are taken from the DBDriven mark (the blue ribbon and the green
   blade), then darkened or lightened where needed so every text and control pairing meets
   WCAG 2.2 AA: 4.5:1 for text, 3:1 for control boundaries and focus rings. The raw brand
   gradients appear only as decoration, never behind text. */

:root {
  color-scheme: light dark;

  --brand-blue-1: #8ec5f0;
  --brand-blue-2: #4a90d9;
  --brand-blue-3: #1e4e79;
  --brand-green-1: #c3e617;
  --brand-green-2: #6ba41a;
  --brand-green-3: #0b5a0b;

  --bg: #f4f8fc;
  --surface: #ffffff;
  --surface-2: #eaf2fa;
  --text: #0f2233;
  --muted: #475a6d;
  --primary: #1b5e9e;
  --primary-hover: #134a7e;
  --on-primary: #ffffff;
  --accent: #2b6e12;
  --control-border: #6b7f93;
  --hairline: #d3dfeb;
  --danger: #b3261e;
  --danger-bg: #fdecea;
  --success-bg: #eaf5e2;
  --focus: #0b3d63;
  --shadow: 0 1px 2px rgb(15 34 51 / 6%), 0 8px 24px rgb(15 34 51 / 8%);

  --radius: 14px;
  --radius-sm: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1621;
    --surface: #122232;
    --surface-2: #17293b;
    --text: #e7eef5;
    --muted: #a9b8c7;
    --primary: #7db9f0;
    --primary-hover: #a3cff6;
    --on-primary: #0b1621;
    --accent: #9ed36a;
    --control-border: #7c8fa3;
    --hairline: #24384c;
    --danger: #ff8a80;
    --danger-bg: #3a1614;
    --success-bg: #16301a;
    --focus: #9bd0ff;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary);
  text-underline-offset: 0.18em;
}

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 10;
  background: var(--surface);
  color: var(--text);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.skip-link:focus {
  top: 1rem;
}

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

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 68px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
}

.brand-name {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-by {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.25rem;
}

.site-nav ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0.1rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--primary);
  text-decoration: underline;
}

/* ---------- Hero ---------- */

main {
  flex: 1;
}

.hero {
  position: relative;
  padding: 3rem 0 1.5rem;
  overflow: hidden;
}

/* Decorative ribbon echoing the logo's blue-to-green sweep. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand-blue-2), var(--brand-blue-3) 55%, var(--brand-green-2));
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  max-width: 18ch;
}

.hero h1 .accent {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (forced-colors: active) {
  .hero h1 .accent {
    color: CanvasText;
    background: none;
  }
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Cards and forms ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 1.5rem 0 2.5rem;
}

.field {
  margin-bottom: 1.25rem;
}

.field label,
.label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.hint {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 0.35rem;
}

textarea,
input[type="text"],
input[type="password"],
input[type="url"],
select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--control-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}

textarea {
  min-height: 12rem;
  resize: vertical;
  line-height: 1.5;
}

textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-offset: 1px;
  border-color: var(--focus);
}

[aria-invalid="true"] {
  border-color: var(--danger);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
}

.row > .field {
  flex: 1 1 220px;
}

.counter {
  float: right;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9rem;
}

.counter.over {
  color: var(--danger);
  font-weight: 700;
}

details.option {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.25rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--surface-2);
}

details.option summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.6rem 0;
}

details.option[open] {
  padding-bottom: 1rem;
}

.input-group {
  display: flex;
  gap: 0.5rem;
}

.input-group input {
  flex: 1;
  min-width: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  font: 700 1rem/1.2 var(--font);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-secondary:hover {
  background: var(--surface-2);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-block {
  width: 100%;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ---------- Status messages ---------- */

.alert {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
  border-left: 5px solid;
}

.alert:empty {
  display: none;
}

.alert-error {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.alert-success {
  background: var(--success-bg);
  border-color: var(--accent);
}

.alert-info {
  background: var(--surface-2);
  border-color: var(--primary);
}

.alert p {
  margin: 0.25rem 0;
}

.note-output {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 0.98rem;
  background: var(--surface-2);
  border: 2px solid var(--control-border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  min-height: 6rem;
  max-height: 60vh;
  overflow: auto;
}

.link-output {
  font-family: var(--mono);
  font-size: 0.95rem;
}

.spinner {
  width: 1.1em;
  height: 1.1em;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}

[hidden] {
  display: none !important;
}

/* ---------- Features and content ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
}

.features li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.features h2,
.features h3 {
  font-size: 1.05rem;
  margin: 0.5rem 0 0.35rem;
}

.features p {
  margin: 0;
  color: var(--muted);
}

.feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--primary);
}

.feature-icon svg {
  width: 20px;
  height: 20px;
}

.prose {
  max-width: 72ch;
  padding-bottom: 3rem;
}

.prose h2 {
  margin-top: 2.25rem;
  letter-spacing: -0.01em;
}

.prose li {
  margin-bottom: 0.4rem;
}

.draft-banner {
  background: var(--surface-2);
  border: 2px dashed var(--control-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-weight: 600;
}

/* ---------- CTA and footer ---------- */

.cta {
  background: var(--brand-blue-3);
  color: #ffffff;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  margin: 0 0 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.cta::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, var(--brand-green-1), var(--brand-green-3));
  transform: rotate(30deg);
  opacity: 0.35;
  pointer-events: none;
}

.cta h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
}

.cta p {
  margin: 0;
  color: #dbe8f5;
}

.cta .btn {
  background: #ffffff;
  color: var(--brand-blue-3);
  position: relative;
  z-index: 1;
}

.cta .btn:hover {
  background: #eaf2fa;
}

.cta :focus-visible {
  outline-color: #ffffff;
}

.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding: 1.75rem 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-brand img {
  width: 28px;
  height: 28px;
}

@media (max-width: 560px) {
  .site-nav ul {
    gap: 0.9rem;
  }

  .brand-by {
    letter-spacing: 0.1em;
  }

  .input-group {
    flex-direction: column;
  }
}

/* Headings take focus programmatically after a state change so screen readers announce the
   new state. They are not interactive, so no focus ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

.cta > div {
  position: relative;
  z-index: 1;
}

/* On narrow screens the text wraps under the decoration and would lose contrast. */
@media (max-width: 720px) {
  .cta::after {
    display: none;
  }
}