/* Village Gateway approvals page. Layout only; colours and type come from village-tokens.css. */
.vg-page { max-width: 46rem; margin: 2rem auto; padding: 0 var(--s-4, 16px); font: var(--text-body); color: var(--text); }
.vg-page h1 { font: var(--text-h1); }
.vg-page h2 { font: var(--text-h2); margin-top: var(--s-6, 32px); }
.vg-page h3 { font: var(--text-h3); margin: 0 0 var(--s-2, 8px); }
.vg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4, 16px); }
.vg-card { background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r-md, 8px); padding: var(--s-4, 16px); display: grid; gap: var(--s-3, 12px); margin-top: var(--s-4, 16px); }
.vg-list .vg-card { margin-top: 0; }
.vg-facts { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--s-1, 4px) var(--s-3, 12px); margin: 0; }
.vg-facts dt { font: var(--text-small); font-weight: 600; color: var(--muted); }
.vg-facts dd { margin: 0; overflow-wrap: anywhere; }
.vg-facts code { font-family: var(--font-mono); font-size: 13px; }
.vg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3, 12px); margin: 0; }
.vg-stepup { background: var(--accent-soft); color: var(--on-accent-soft); border: 2px solid var(--accent); border-radius: var(--r-md, 8px); padding: var(--s-4, 16px); margin: var(--s-4, 16px) 0; }
.vg-stepup .v-help { color: var(--on-accent-soft); }
.vg-stepup h2 { margin-top: 0; }
.vg-fieldset { border: 0; padding: 0; margin: 0 0 var(--s-3, 12px); }
.vg-fieldset legend { font-weight: 600; padding: 0; }
.vg-radio { display: flex; align-items: center; gap: var(--s-2, 8px); min-height: 32px; }
.vg-status { min-height: 1.5em; font-weight: 600; color: var(--success); }
.vg-status.vg-status--stopped { color: var(--danger); }
.vg-error, .vg-field-error { color: var(--danger); font: var(--text-small); font-weight: 600; margin: 0; }
.vg-field-error:empty { display: none; }
.vg-note, .vg-calm { background: var(--sunken); border-radius: var(--r-md, 8px); padding: var(--s-3, 12px) var(--s-4, 16px); }
.vg-calm p { margin: 0; }
.vg-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .vg-facts { grid-template-columns: 1fr; } .vg-facts dd { margin-bottom: var(--s-2, 8px); } }
.vg-page h4.vg-card-h { font: var(--text-h3); margin: 0; overflow-wrap: anywhere; }
.vg-secret { background: var(--accent-soft); color: var(--on-accent-soft); border: 2px solid var(--accent); border-radius: var(--r-md, 8px); padding: var(--s-4, 16px); margin-top: var(--s-4, 16px); display: grid; gap: var(--s-3, 12px); }
.vg-secret h3 { margin: 0; }
.vg-secret .v-help { color: var(--on-accent-soft); margin: 0; }
.vg-secret .vg-error { color: var(--on-accent-soft); }
.vg-secret-input { font-family: var(--font-mono); font-size: 13px; width: 100%; box-sizing: border-box; }
.vg-confirm { display: grid; gap: var(--s-3, 12px); }
.vg-confirm[hidden], .vg-actions[hidden], .vg-secret[hidden] { display: none; }
/* First-visit help on the approvals page (plan row GW-54d). */
.vg-help h2 { margin-top: 0; }
.vg-help-steps { margin: 0 0 var(--s-3, 12px); padding-left: 1.4em; }
.vg-help-steps li { margin-bottom: var(--s-1, 4px); }
/* A help line inside a list of facts sits under its value, in the value column, so the label and value columns stay aligned. */
.vg-facts dd.v-help { grid-column: 2; }
@media (max-width: 560px) { .vg-facts dd.v-help { grid-column: auto; } }
/* GW-62: the stop banner, shown to the owner and moderators while Village Gateway is stopped. */
.vg-stopbanner { background: var(--sunken); border: 2px solid var(--danger); border-radius: var(--r-md, 8px); padding: var(--s-4, 16px); margin: var(--s-4, 16px) 0; }
.vg-stopbanner h2 { margin-top: 0; color: var(--danger); }
.vg-stopbanner p { margin: 0; }
.vg-stopbanner[hidden], #vg-control[hidden], #vg-limits[hidden] { display: none; }