/* Same visual language as opendatahub-discovery: Source Sans Pro, its grey and green
   scales, bordered white cards, uppercase green buttons, a pale hero band. */

@font-face { font-family: "SourceSansPro"; font-weight: 400; src: url("fonts/SourceSansPro-Regular.ttf") format("truetype"); }
@font-face { font-family: "SourceSansPro"; font-weight: 600; src: url("fonts/SourceSansPro-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "SourceSansPro"; font-weight: 700; src: url("fonts/SourceSansPro-Bold.ttf") format("truetype"); }

:root {
  --green-500: #476929;
  --green-700: #234009;
  --gray-50: #f4f8f9;
  --gray-100: #f1f3f4;
  --gray-300: #dcdde1;
  --gray-400: #e0e1e5;
  --gray-600: #707c7e;
  --gray-900: #3c4043;
  --red-500: #ef4444;
  --red-700: #b91c1c;
  --warning: #aa5b00;
  --warning-bg: #fdf2e6;
  --calm: #2264e5;
  --calm-bg: #ebf0fa;
  --badge: #f9d900;

  --bg: #ffffff;
  --surface: #ffffff;
  --text: var(--gray-900);
  --muted: var(--gray-600);
  --border: var(--gray-300);
  --border-input: var(--gray-400);
  --band: var(--gray-50);
  --code-bg: var(--gray-100);
  --chip: var(--gray-100);
  --logo-filter: none;
}

:root[data-theme="dark"] {
  --bg: #1b1e20;
  --surface: #23272a;
  --text: #e8eaed;
  --muted: #a7b0b4;
  --border: #3a4044;
  --border-input: #4a5156;
  --band: #202427;
  --code-bg: #15181a;
  --chip: #2b3034;
  --green-500: #7fb257;
  --green-700: #9ccf72;
  --warning-bg: #3a2d14;
  --calm-bg: #1e2a3f;
  --logo-filter: invert(1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "SourceSansPro", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

a { color: inherit; }

.content { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }

/* ---------- header ---------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .content { display: flex; align-items: center; gap: 1.5rem; min-height: 3.5rem; flex-wrap: wrap; }

.wordmark {
  display: inline-block;
  border: 1px solid var(--text);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.env-badge {
  background: var(--badge);
  color: #1b1e20;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
}
.env-badge:empty { display: none; }

.menu { display: flex; align-items: center; gap: 2rem; font-size: 1.125rem; }
.menu button {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--text);
  padding: 0.75rem 0;
  white-space: nowrap;
}
.menu button:hover { background: none; color: var(--green-500); }
.menu button[aria-current="page"] { border-bottom-color: var(--green-500); font-weight: 600; }

.account { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; color: var(--text); }
.account .avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green-500);
}
.account .avatar svg { width: 1.25rem; height: 1.25rem; }
.account button { padding: 0.375rem 1rem; font-size: 0.875rem; }
.odh-logo { display: inline-flex; margin-left: 0.5rem; }
.odh-logo img { height: 1.5rem; width: 1.5rem; filter: var(--logo-filter); }

/* ---------- hero ---------- */

.hero { background: var(--band); }
.hero .content { padding-top: 1.5rem; padding-bottom: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hero h1 { font-size: 2rem; font-weight: 600; margin: 0 0 0.25rem; line-height: 1.2; }
.hero .lead { font-size: 1.25rem; color: var(--muted); margin: 0; max-width: 72ch; }

main.content { padding-top: 2rem; padding-bottom: 4rem; }

h2 { font-size: 1.625rem; font-weight: 600; color: var(--green-500); margin: 0 0 0.75rem; line-height: 1.2; }
p { margin: 0 0 0.75rem; }
.muted { color: var(--muted); }

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card > :last-child { margin-bottom: 0; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- buttons ---------- */

button, .button {
  font: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  cursor: pointer;
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--green-500);
  border-radius: 4px;
  padding: 0.625rem 1.5rem 0.75rem;
}
button:hover { background: rgba(71, 105, 41, 0.1); border-color: var(--green-500); }
button.primary { background: var(--green-500); border-color: transparent; color: #fff; }
button.primary:hover { background: var(--green-700); }
button.danger { color: var(--red-500); }
button.danger:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--red-500); }
button:disabled { opacity: 0.25; cursor: default; }
button:disabled:hover { background: var(--surface); border-color: var(--border); }
button.primary:disabled:hover { background: var(--green-500); }
button:focus-visible, a:focus-visible { outline: 1px solid var(--green-500); outline-offset: 2px; }

.buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- forms ---------- */

label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.hint { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.field { margin-bottom: 1.25rem; }

input[type="text"], select, textarea {
  font: inherit;
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: 4px;
}
input[type="text"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--green-500); }
textarea { max-width: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }

fieldset { border: 1px solid var(--border); border-radius: 4px; margin: 0 0 1rem; padding: 1rem 1.25rem; }
legend { font-weight: 600; padding: 0 0.5rem; color: var(--green-500); font-size: 1.125rem; }
.choice { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 400; margin: 0.25rem 0; }
.choice input { flex: none; accent-color: var(--green-500); }
.roles { margin: 0.5rem 0 0.25rem 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.125rem 1rem; }

/* ---------- tags ---------- */

.tag {
  display: inline-block;
  background: var(--chip);
  color: var(--text);
  border-radius: 4px;
  padding: 0.125rem 0.5rem;
  margin: 0.125rem 0.25rem 0.125rem 0;
  font-size: 0.875rem;
}
.tag.inherited { background: var(--calm-bg); color: var(--calm); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--border); }
th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.actions { text-align: right; padding-right: 0; white-space: nowrap; }
td.actions button { padding: 0.375rem 1rem; font-size: 0.875rem; }
.api-label { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; }
.api-label:first-child { margin-top: 0; }

/* ---------- notices ---------- */

.reveal { background: var(--warning-bg); border-color: var(--warning); }
.reveal h2 { color: var(--warning); }
.secret {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem;
  margin: 0.5rem 0 1rem;
  overflow-wrap: anywhere;
  user-select: all;
}

pre.output {
  background: var(--code-bg);
  border-radius: 4px;
  padding: 0.75rem;
  margin: 0.75rem 0 0;
  overflow-x: auto;
  font-size: 0.8125rem;
  min-height: 3em;
}

.error { color: var(--red-700); margin: 0.5rem 0 0; }
.error:empty { display: none; }
.status { font-size: 0.875rem; color: var(--muted); margin-left: 0.75rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.5rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 48rem) {
  .site-header .content { gap: 0.75rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .menu { order: 10; width: 100%; gap: 1.25rem; overflow-x: auto; font-size: 1rem; }
  .hero h1 { font-size: 1.625rem; }
  .hero .lead { font-size: 1rem; }
}