/* Gateway pages: sign-in, account, errors and the admin area.
   Built on design-tokens.css (linked first); nothing here repeats a token. */

.gw-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-raised);
}
.gw-brand {
  margin-right: auto;
  color: var(--colour-text);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}
.gw-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--colour-muted);
  font-size: var(--text-body);
}
.gw-user form {
  margin: 0;
}

.gw-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
}
.gw-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--colour-muted);
  font-size: var(--text-body);
  text-decoration: none;
}
.gw-nav a:hover {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}
.gw-nav a[aria-current="page"] {
  background: var(--colour-raised-2);
  color: var(--colour-text);
}

.gw-main {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}
.gw-main--wide {
  max-width: 90rem;
}
.gw-main h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
}
.gw-main h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-h2);
}
.gw-main p {
  max-width: 46rem;
}
.gw-muted {
  color: var(--colour-muted);
}

.gw-card {
  margin: var(--space-4) 0;
  padding: var(--space-5);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-raised);
}
.gw-card h2:first-child {
  margin-top: 0;
}
.gw-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}
.gw-facts dt {
  color: var(--colour-muted);
}
.gw-facts dd {
  margin: 0;
}

.gw-table-wrap {
  overflow-x: auto;
}
.gw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}
.gw-table th,
.gw-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--colour-border);
  text-align: left;
  vertical-align: top;
}
.gw-table th {
  color: var(--colour-muted);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.gw-table td form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0 var(--space-1) var(--space-1) 0;
}
.gw-table .gw-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gw-row--dim {
  opacity: 0.6;
}

.gw-badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--colour-raised-2);
  color: var(--colour-muted);
  font-size: var(--text-meta);
  white-space: nowrap;
}
.gw-badge--good {
  background: var(--colour-positive-bg);
  color: var(--colour-positive);
}
.gw-badge--warn {
  background: var(--colour-caution-bg);
  color: var(--colour-caution);
}
.gw-badge--bad {
  background: var(--colour-danger-bg);
  color: var(--colour-danger);
}

.gw-button,
.gw-main button,
.gw-user button {
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-raised-2);
  color: var(--colour-text);
  cursor: pointer;
  font-size: var(--text-body);
  text-decoration: none;
}
.gw-button:hover,
.gw-main button:hover,
.gw-user button:hover {
  background: var(--colour-surface-3);
}
.gw-button--primary,
.gw-main button.gw-primary {
  border-color: var(--colour-action);
  background: var(--colour-action);
  color: var(--colour-action-text);
}
.gw-button--primary:hover,
.gw-main button.gw-primary:hover {
  background: var(--colour-action-hover);
}
.gw-main button.gw-danger {
  border-color: var(--colour-danger);
  color: var(--colour-danger);
}
.gw-button {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);
}

.gw-main input:not([type="checkbox"]),
.gw-main select,
.gw-main textarea {
  min-height: 2rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-control-border);
  border-radius: var(--radius-control);
  background: var(--colour-bg);
  color: var(--colour-text);
}
.gw-main input[type="number"] {
  width: 6rem;
}
.gw-main label {
  color: var(--colour-muted);
  font-size: var(--text-meta);
}

.gw-details {
  margin-top: var(--space-1);
}
.gw-details summary {
  cursor: pointer;
  color: var(--colour-muted);
  font-size: var(--text-meta);
}
.gw-details > form {
  display: flex;
  margin-top: var(--space-2);
}

.gw-notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--colour-positive-bg);
  color: var(--colour-positive);
}
.gw-notice--secret {
  background: var(--colour-info-bg);
  color: var(--colour-text);
}
.gw-notice code {
  font-size: var(--font-size-18);
  user-select: all;
}

.gw-log {
  max-height: 70vh;
  overflow: auto;
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-card);
  background: var(--colour-media);
  font-size: var(--text-meta);
  white-space: pre-wrap;
  word-break: break-word;
}