:root {
  color-scheme: light;
  --ink: #20352b;
  --forest: #173f2c;
  --forest-raised: #24553b;
  --cream: #f6f6ee;
  --sage: #e4edcf;
  --surface: #ffffff;
  --border: #d8dfd3;
  --muted: #59685f;
  --ok: #245b38;
  --ok-soft: #e5f0e3;
  --warn: #70500d;
  --warn-soft: #fff3d4;
  --danger: #922f27;
  --danger-soft: #fbe9e6;
  --radius: 12px;
  --radius-small: 8px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--cream);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-size: 1rem;
  line-height: 1.55;
}

.header-inner,
main,
footer {
  width: min(calc(100% - 2rem), 1120px);
  margin-inline: auto;
}

.site-header {
  color: #fff;
  background: var(--forest);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 156px;
  padding-block: 1.5rem;
}

.brand-copy {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 0.25rem;
  color: var(--sage);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.header-inner h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.header-intro {
  max-width: 44rem;
  margin: 0.55rem 0 0;
  color: #e1e9df;
}

.header-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.back-link,
.storefront-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  color: #fff;
  background: rgb(255 255 255 / 7%);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.back-link:hover,
.storefront-link:hover {
  background: rgb(255 255 255 / 15%);
}

.back-link:focus-visible,
.storefront-link:focus-visible {
  outline-color: #fff;
}

main {
  min-width: 0;
  padding-block: 1.4rem 2.5rem;
}

h1,
h2,
h3,
p,
th,
td {
  overflow-wrap: anywhere;
}

h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

p {
  margin: 0.55rem 0;
}

.muted {
  color: var(--muted);
}

a {
  color: var(--forest-raised);
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 2px;
}

.panel,
.banner {
  min-width: 0;
  margin-block: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(0.9rem, 2.4vw, 1.25rem);
  background: var(--surface);
}

.banner {
  border-inline-start: 5px solid var(--forest-raised);
}

.banner.warning,
.notice.warning {
  border-color: #d2a43e;
  border-inline-start-color: #a86713;
  color: var(--warn);
  background: var(--warn-soft);
  font-weight: 600;
}

.field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin-block: 1rem;
}

label {
  color: var(--ink);
  font-weight: 650;
}

textarea,
select,
input[type="file"] {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid #aeb9ad;
  border-radius: var(--radius-small);
  padding: 0.62rem 0.75rem;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
}

textarea {
  min-height: 12rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
  tab-size: 2;
}

input[type="file"] {
  padding: 0.45rem;
  background: #fbfcf8;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  margin-block: 0.75rem;
  padding: 0.8rem;
  background: #f1f3ec;
  overscroll-behavior-inline: contain;
}

pre code,
.contract-note code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

pre code {
  overflow-wrap: normal;
  white-space: pre;
}

.contract-note {
  font-size: 0.92rem;
}

.contract-note code {
  overflow-wrap: anywhere;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-block: 1rem;
}

button {
  min-height: 44px;
  border: 1px solid #9eaa9c;
  border-radius: var(--radius-small);
  padding: 0.58rem 0.95rem;
  color: var(--forest);
  background: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: #9eb08f;
  background: #edf2e7;
}

button.primary {
  border-color: var(--forest);
  color: #fff;
  background: var(--forest);
}

button.primary:hover:not(:disabled) {
  border-color: var(--forest-raised);
  background: var(--forest-raised);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  border-color: #cbd2c8;
  color: #59655c;
  background: #e9ede5;
  cursor: not-allowed;
  opacity: 1;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.table-wrap:focus-visible {
  outline: 3px solid #6d8a43;
  outline-offset: 3px;
}

.notice {
  min-height: 1.5rem;
  border-inline-start: 3px solid #aeb9ad;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  margin: 0.55rem 0;
  padding: 0.55rem 0.75rem;
  color: var(--ink);
  background: #f3f5ef;
  overflow-wrap: anywhere;
}

.notice.warning {
  border-inline-start-color: #a86713;
  color: var(--warn);
  background: var(--warn-soft);
}

.notice:empty {
  display: none;
}

.hidden {
  display: none !important;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow-x: auto;
  background: var(--surface);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
}

th {
  color: var(--forest);
  background: #f1f4ec;
  font-size: 0.88rem;
  font-weight: 700;
}

tr:last-child td {
  border-bottom: 0;
}

th:first-child,
td:first-child {
  width: 6rem;
  white-space: nowrap;
}

th:nth-child(2),
td:nth-child(2) {
  width: 22%;
}

th:nth-child(3),
td:nth-child(3) {
  width: 9rem;
}

.status-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.status-valid,
.status-created {
  border-color: #a2c49c;
  color: var(--ok);
  background: var(--ok-soft);
}

.status-invalid,
.status-failed {
  border-color: #e1ada7;
  color: var(--danger);
  background: var(--danger-soft);
}

.status-pending {
  border-color: #cbd2c8;
  color: #435248;
  background: #f0f2ec;
}

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

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

.result-detail {
  display: block;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
}

.run-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  margin-block: 0.8rem 0;
  padding: 0.8rem;
  background: #edf2e7;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.skip-link {
  position: absolute;
  z-index: 20;
  inset-block-start: 0.5rem;
  inset-inline-start: -9999px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  background: var(--surface);
  font-weight: 700;
}

.skip-link:focus {
  inset-inline-start: 0.5rem;
}

footer {
  border-top: 1px solid var(--border);
  padding-block: 1rem 1.5rem;
}

footer p {
  margin: 0;
  font-size: 0.92rem;
}

@media (max-width: 760px) {
  .header-inner,
  main,
  footer {
    width: min(calc(100% - 1.25rem), 1120px);
  }

  .header-inner {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    padding-block: 1.35rem;
  }

  .header-links {
    justify-content: flex-start;
  }

  .panel {
    padding: 0.85rem;
  }

  th,
  td {
    padding: 0.65rem;
  }
}

@media (max-width: 420px) {
  .header-links {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .back-link,
  .storefront-link {
    justify-content: center;
  }

  .actions > button {
    flex: 1 1 100%;
  }
}