/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --ui-brand: #337ab7;
  --ui-brand-dark: #255980;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f4f7fb;
  --ui-border: #d7dee8;
  --ui-text: #1f2d3d;
  --ui-text-muted: #526475;
  --ui-danger: #b42318;
  --ui-danger-bg: #fef3f2;
  --ui-radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: var(--ui-text);
  background: var(--ui-surface-muted);
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header,
.public-header {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
  padding: 0.75rem 1rem;
}

.app-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header-nav {
  margin-top: 0.5rem;
}

.app-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.app-brand-logo {
  height: 36px;
  width: auto;
  max-width: 160px;
}

.app-brand-text {
  font-weight: 700;
  font-size: 1.15rem;
}

.app-nav-links {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}

.app-nav-links a {
  color: var(--ui-brand-dark);
  text-decoration: none;
  font-weight: 600;
}

.app-nav-links a:hover {
  text-decoration: underline;
}

.app-client-name {
  margin: 0;
}

.app-client-scope-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ui-border);
}

.app-client-scope-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* User avatar dropdown (item 6) */
.app-user-area {
  position: relative;
}

.user-avatar-dropdown {
  position: relative;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #000;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.user-avatar:hover {
  background: var(--ui-surface-muted);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 0.75rem;
  z-index: 100;
}

.user-dropdown-name {
  margin: 0 0 0.125rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.user-dropdown-email {
  margin: 0 0 0.5rem;
  color: var(--ui-text-muted);
  font-size: 0.85rem;
}

.user-dropdown-link {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ui-brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.user-dropdown-link:hover {
  text-decoration: underline;
}

.user-dropdown-signoff {
  display: block;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-danger);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
}

.user-dropdown-signoff:hover {
  background: var(--ui-danger-bg);
}

#flash-messages {
  padding: 0 1rem;
}

.flash {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
}

.flash-success {
  background: #e8f5e9;
}

.flash-error {
  background: var(--ui-danger-bg);
  border-color: #fecdca;
}

.flash-warning {
  background: #fff8e1;
}

.flash-info {
  background: #e3f2fd;
}

.flash-dismiss {
  float: right;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.app-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.75rem 1rem;
}

.app-main-content {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 1rem;
  height: 100%;
  overflow: auto;
}

.table-shell {
  margin-top: 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  max-height: 55vh;
  overflow: auto;
}

.table-shell table {
  width: 100%;
  border-collapse: collapse;
}

.table-shell th,
.table-shell td {
  border-bottom: 1px solid var(--ui-border);
  padding: 0.5rem 0.625rem;
  text-align: left;
  vertical-align: top;
}

.table-shell thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef4fb;
}

.page-actions {
  margin-top: 1rem;
}

.action-link-danger,
input[type="submit"].action-danger,
button.action-danger {
  color: var(--ui-danger);
}

input[disabled],
button[disabled],
.button-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

h1, h2, h3, h4, h5, h6,
legend,
th,
summary {
  color: var(--ui-text);
}

.empty-state {
  color: var(--ui-text-muted);
  font-style: italic;
}

.app-footer {
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface);
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Dashboard (Section 16) */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
  align-items: start;
}

.dashboard-section {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  padding: 1rem 1.125rem;
}

.dashboard-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.dashboard-count {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ui-brand-dark);
}

.dashboard-section-body {
  margin: 0 0 0.75rem;
  color: var(--ui-text-muted);
  font-size: 0.95rem;
}

.dashboard-list {
  margin: 0 0 0.75rem;
  padding-left: 1.125rem;
  color: var(--ui-text);
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.dashboard-action-link {
  font-weight: 600;
  color: var(--ui-brand);
  text-decoration: none;
}

.dashboard-action-link:hover {
  text-decoration: underline;
}

/* Data import results (Section 17 tabbed surface) */
.data-import-page-title {
  margin-bottom: 0.5rem;
}

.data-import-page-title__client {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ui-text-muted);
  margin-top: 0.25rem;
}

.data-import-primary-outcome {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

.data-import-primary-outcome__status {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.data-import-primary-outcome__review-flag {
  color: var(--ui-warning-text, #856404);
  font-weight: 600;
}

.data-import-primary-outcome__success-flag {
  color: var(--ui-success-text, #155724);
  font-weight: 600;
}

.data-import-primary-outcome__narrative {
  margin: 0 0 0.5rem;
}

.data-import-attention-summary {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ui-text-muted);
}

.data-import-partial-persistence {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-left: 0.3rem solid var(--ui-warning-text, #856404);
  background: var(--ui-surface-muted, #f8f9fa);
}

.data-import-structured-failure {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: 0.75rem 0 0;
}

.data-import-structured-failure div {
  min-width: 0;
}

.data-import-structured-failure dt {
  color: var(--ui-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.data-import-structured-failure dd {
  margin: 0.15rem 0 0;
  overflow-wrap: anywhere;
}

.data-import-structured-diagnostic {
  margin-top: 0.4rem;
}

.data-import-structured-diagnostic pre {
  margin: 0.35rem 0 0;
  max-width: 32rem;
  overflow-x: auto;
  white-space: pre-wrap;
}

.data-import-action-required {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted, #f8f9fa);
}

.data-import-action-required h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.data-import-action-link {
  margin: 0.35rem 0;
}

.data-import-run-summary {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

.data-import-run-summary h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.data-import-run-summary__grid {
  display: grid;
  gap: 0.35rem 1.25rem;
  margin: 0;
}

.data-import-run-summary__row {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.data-import-run-summary__row dt {
  margin: 0;
  color: var(--ui-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.data-import-run-summary__row dd {
  margin: 0;
  font-weight: 600;
}

.data-import-operational-metrics {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}

.data-import-operational-metrics h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.data-import-operational-metrics__grid {
  display: grid;
  gap: 0.35rem 1.25rem;
  margin: 0;
  max-width: 28rem;
}

.data-import-operational-metrics__row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(4rem, max-content);
  gap: 0.5rem 1.25rem;
  align-items: baseline;
}

.data-import-operational-metrics__grid dt {
  font-size: 0.9rem;
  color: var(--ui-text-muted);
  font-weight: 600;
  margin: 0;
}

.data-import-operational-metrics__grid dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-import-monitoring {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted, #f8f9fa);
}

.data-import-monitoring__status {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.data-import-monitoring__progress {
  margin: 0 0 0.5rem;
}

.data-import-monitoring__bar {
  display: block;
  width: 100%;
  height: 0.85rem;
  margin: 0 0 0.75rem;
}

.data-import-monitoring__indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ui-brand-dark);
}

.data-import-monitoring__spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ui-border);
  border-top-color: var(--ui-brand-dark);
  border-radius: 50%;
  animation: data-import-monitoring-spin 0.8s linear infinite;
}

@keyframes data-import-monitoring-spin {
  to {
    transform: rotate(360deg);
  }
}

.data-import-results-tabs {
  margin: 1rem 0;
  border-bottom: 1px solid var(--ui-border);
}

.data-import-results-tabs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0;
  margin: 0;
}

.data-import-results-tabs__link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  text-decoration: none;
  color: var(--ui-brand-dark);
  font-weight: 600;
  border: 1px solid transparent;
  border-bottom: none;
}

.data-import-results-tabs__link:hover {
  text-decoration: underline;
}

.data-import-results-tabs__link.is-active {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  text-decoration: none;
  color: var(--ui-text);
}

.data-import-tab-panel {
  margin-top: 1rem;
}

/* Animal detail (Section 19 tabbed surface) */
.animal-detail-tabs {
  margin: 1rem 0;
  border-bottom: 1px solid var(--ui-border);
}

.animal-detail-tabs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0;
  margin: 0;
}

.animal-detail-tabs__link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  text-decoration: none;
  color: var(--ui-brand-dark);
  font-weight: 600;
  border: 1px solid transparent;
  border-bottom: none;
}

.animal-detail-tabs__link:hover {
  text-decoration: underline;
}

.animal-detail-tabs__link.is-active {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  text-decoration: none;
  color: var(--ui-text);
}

.animal-detail-tab-panel {
  margin-top: 1rem;
}

.animal-detail-tab-panel h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.data-import-summary-columns-hint {
  color: var(--ui-text-muted);
  font-size: 0.95rem;
}

.data-import-rows-filter {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted);
}

.data-import-rows-filter__clear {
  margin-left: 0.75rem;
}

.data-import-technical-intro {
  color: var(--ui-text-muted);
  margin-bottom: 1rem;
}

.data-import-technical-details {
  margin: 0;
}

.data-import-technical-details dt {
  font-weight: 700;
  margin-top: 0.75rem;
}

.data-import-technical-details dd {
  margin: 0.25rem 0 0;
}

.data-import-technical-value {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
  max-height: 14rem;
  overflow: auto;
  padding: 0.5rem;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}

/* Sign-in form alignment (item 4) */
.sign-in-form .form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.sign-in-form .form-field label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.sign-in-form .form-field input {
  width: 100%;
  max-width: 320px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
}

/* Aligned form fields (items 7, 8, 12) */
.aligned-form .form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.aligned-form .form-field label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.aligned-form .form-field input,
.aligned-form .form-field select,
.aligned-form .form-field textarea {
  width: 100%;
  max-width: 400px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
}

.aligned-form fieldset {
  max-width: 440px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

/* Filter section alignment (items 9, 11) */
.filter-section .form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.filter-section .form-field label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.filter-section .form-field input,
.filter-section .form-field select {
  width: 100%;
  max-width: 400px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
}

.filter-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.animals-pagination-summary {
  margin: 0.75rem 0 0.5rem;
  color: var(--ui-text-muted);
}

.animals-pagination {
  margin: 1rem 0 0.5rem;
}

.animals-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.animals-pagination-link {
  text-decoration: underline;
}

.animals-pagination-disabled {
  color: var(--ui-text-muted);
}

.animals-pagination-status {
  font-weight: 600;
}

.filter-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

@media (max-width: 768px) {
  .filter-columns {
    grid-template-columns: 1fr;
  }
}

/* Sort indicators (items 9, 11) */
.sort-link {
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.sort-link:hover {
  text-decoration: underline;
}

.sort-indicator {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.7rem;
  vertical-align: middle;
}

/* Manage account subtitle */
.account-subtitle {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.account-email {
  margin: 0.125rem 0 0.75rem;
  color: var(--ui-text-muted);
  font-size: 0.95rem;
}

/* Dashboard card typography (item 16h) */
.dashboard-title {
  font-size: 1.1rem;
}

/* Back link block */
.back-link-block {
  margin-top: 0.75rem;
}

/* Detail page tables (User, Client, Animal show/edit) */
.detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.detail-table th,
.detail-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--ui-border);
  vertical-align: top;
  text-align: left;
}

.detail-table th {
  width: 180px;
  font-weight: 600;
  color: var(--ui-text-muted);
  white-space: nowrap;
  background: var(--ui-surface-muted);
}

.detail-table td {
  background: var(--ui-surface);
}

/* User / Client detail: narrow actions column + row label + value */
.detail-table--field-grid .detail-table__actions {
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
  padding-right: 0.35rem;
  text-align: left;
  background: var(--ui-surface);
}

.detail-table--field-grid th[scope="row"] {
  width: 11rem;
}

/* Inline edit fields in detail tables */
.inline-field {
  line-height: 1.6;
}

.inline-field__display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inline-field__display button,
.detail-table__actions button {
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  color: var(--ui-brand);
  cursor: pointer;
}

.inline-field__display button:hover,
.detail-table__actions button:hover {
  background: var(--ui-surface-muted);
}

.inline-field__editor form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.inline-field__editor input,
.inline-field__editor select,
.inline-field__editor textarea {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  max-width: 300px;
}

.inline-field__editor button {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-surface);
  cursor: pointer;
}

.inline-field__editor button[type="submit"] {
  color: var(--ui-surface);
  background: var(--ui-brand);
  border-color: var(--ui-brand);
}

.inline-field__error {
  color: var(--ui-danger);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.hint {
  color: var(--ui-text-muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

/* Detail page sections */
.detail-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ui-border);
}

.detail-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.detail-section ul {
  padding-left: 1.25rem;
}

.detail-section li {
  margin-bottom: 0.5rem;
}

/* Detail page field rows for non-table layouts */
.detail-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.detail-field-label {
  font-weight: 600;
  color: var(--ui-text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

/* Animal/Import/Export form improvements */
.animal-index-filters .form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.animal-index-filters .form-field label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.animal-index-filters .form-field input,
.animal-index-filters .form-field select {
  width: 100%;
  max-width: 400px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
}

/* Contract catalog */
.contract-catalog-intro {
  max-width: 48rem;
  margin-bottom: 1.25rem;
}

.contract-catalog__org {
  margin-bottom: 1.75rem;
}

.contract-catalog__org > h2 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.contract-catalog__list {
  display: grid;
  gap: 0.75rem;
}

.contract-catalog__card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 0.875rem 1rem;
  background: var(--ui-surface);
}

.contract-catalog__card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.contract-catalog__meta,
.contract-catalog__formats,
.contract-catalog__description,
.contract-catalog__note,
.contract-catalog__actions {
  margin: 0.35rem 0;
}

.contract-catalog__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

.contract-catalog__status {
  margin: 0.5rem 0;
  color: #334e68;
  font-size: 0.95rem;
  line-height: 1.45;
}

.contract-catalog__status-label {
  font-weight: 600;
}

.contract-catalog__status-value {
  font-weight: 400;
}

.contract-catalog__status-sep {
  margin: 0 0.35rem;
  color: #829ab1;
}

.contract-catalog__formats-sep {
  margin: 0 0.35rem;
}

.contract-catalog__note {
  color: #4a5560;
  font-size: 0.95rem;
}

.contract-detail__format-note {
  margin: 0.5rem 0 0;
  max-width: 48rem;
  color: #52606d;
  font-size: 0.95rem;
}

.contract-detail__header {
  margin-bottom: 1.25rem;
}

.contract-detail__eyebrow {
  margin: 0 0 0.35rem;
  color: #52606d;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contract-detail__organization {
  margin: 0.15rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.contract-detail__header h1 {
  margin: 0;
}

.contract-detail__explain p {
  margin: 0.5rem 0;
  max-width: 48rem;
}

.contract-detail__key {
  margin-top: 0.75rem;
  color: #52606d;
  font-size: 0.9rem;
}

.contract-detail__section {
  margin: 1.5rem 0;
}

.contract-detail__section > h2 {
  margin-bottom: 0.5rem;
}

.contract-detail__facts,
.contract-detail__coverage {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.contract-detail__help {
  color: #52606d;
}

.contract-detail__advanced {
  margin: 1.5rem 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 0.75rem 1rem;
  background: #f8fafc;
}

.contract-detail__advanced > summary {
  cursor: pointer;
  font-weight: 600;
}

.contract-detail__advanced[open] > summary {
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .contract-catalog__card {
    padding: 0.75rem;
  }
}