/* Canonical RailMonNA finishing layer shared by every rendered surface. */
:root {
  --page-gutter: clamp(16px, 2.4vw, 28px);
  --panel-radius: 10px;
  --dialog-radius: 10px;
  --motion-fast: 140ms ease;
}

.topbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.content-home-button,
.icon-button,
.pwa-refresh-button,
.header-menu summary {
  width: var(--control-height-default);
  height: var(--control-height-default);
  min-height: var(--control-height-default);
  border-radius: var(--control-radius);
}

.content-section,
.panel-section,
.standalone-card,
.draft-panel,
.consent-dialog,
.app-action-dialog {
  border-radius: var(--panel-radius);
}

button,
.button,
input,
select,
textarea,
summary {
  transition-duration: 140ms;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-radius: var(--field-radius);
}

.button {
  min-height: var(--control-height-default);
  border-radius: var(--control-radius);
}

.checkbox-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 1px 0 0;
  padding: 0;
  flex: 0 0 20px;
  accent-color: var(--primary);
}

.checkbox-row .field-error {
  grid-column: 2;
  width: auto;
  min-width: 0;
}

.consent-dialog {
  border-radius: var(--dialog-radius);
}

.consent-dialog-card > .eyebrow {
  display: none;
}

.validation-summary,
.form-result,
.empty-state {
  border-radius: var(--control-radius);
}

@media (max-width: 620px) {
  button,
  .button,
  .content-home-button,
  .icon-button,
  .pwa-refresh-button,
  .header-menu summary {
    min-height: 44px;
  }

  .content-home-button,
  .icon-button,
  .pwa-refresh-button,
  .header-menu summary {
    width: 44px;
    height: 44px;
  }
}