/* Fare 101 — pricing, account and administration surfaces, on the same token source as base.css.
 *
 * Sizes and line heights are set in base.css only; nothing here declares a font-size. Status is
 * never carried by colour alone: every badge, notice and destructive control keeps its word and
 * its icon, and none of them may reach a verdict hue (BC-WEB-09).
 */

/* ------------------------------------------------------------------ small shared pieces */
.f-btn:disabled { opacity: .5 }
/* Destructive: outlined on the page, filled only on the confirm button inside the dialog. */
.f-btn.danger {
  background: var(--fare-surface);
  color: var(--fare-feedback-error);
  border: var(--fare-border-width-hairline) solid var(--fare-feedback-error);
}
.f-btn.danger:hover { background: color-mix(in srgb, var(--fare-feedback-error) 8%, var(--fare-surface)) }
dialog .f-btn.danger {
  background: var(--fare-feedback-error);
  color: var(--fare-on-accent);
  border-color: var(--fare-feedback-error);
}
dialog .f-btn.danger:hover { background: color-mix(in srgb, var(--fare-feedback-error), var(--fare-brand-navy) 14%) }
.f-btn.light { background: var(--fare-surface); color: var(--fare-accent) }
.f-btn.light:hover { background: var(--fare-accent-subtle) }
.inline-actions { display: flex; gap: var(--fare-space-md); align-items: center; flex-wrap: wrap }
.muted, .small-copy { color: var(--fare-text-secondary) }
.section-label { color: var(--fare-brand-teal-ink); margin: 0 0 var(--fare-space-lg) }
.section-break { border: 0; border-top: var(--fare-border-width-hairline) solid var(--fare-border); margin: var(--fare-space-xl) 0 }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mobile-account-title { display: none }
.top-signout { display: none }
.stack { display: grid; gap: var(--fare-space-xl) }
.status-line { display: flex; align-items: center; gap: var(--fare-space-sm); margin-top: var(--fare-space-md) }

/* ------------------------------------------------------------------ public page furniture */
.page-section { padding: var(--wrap-section) 0 }
.page-intro { max-width: var(--fare-web-max-width-prose); margin-bottom: var(--fare-space-xxl) }
.page-intro h1, .page-intro h2 { margin: var(--fare-space-md) 0 var(--fare-space-lg) }
.page-intro p { color: var(--fare-text-secondary) }
.pricing-section { padding: var(--wrap-section) 0 }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fare-space-xl) }
.pricing-grid.single { grid-template-columns: minmax(0, 25.125rem); justify-content: center }
.plan-card {
  display: flex;
  flex-direction: column;
  border: var(--fare-border-width-hairline) solid var(--fare-border);
  border-radius: var(--fare-radius-lg);
  padding: var(--fare-space-xl);
  background: var(--fare-surface);
  box-shadow: var(--fare-web-shadow-card);
  position: relative;
  min-width: 0;
}
.plan-caption { color: var(--fare-text-secondary); margin-top: var(--fare-space-sm); min-height: 2.625rem }
.plan-price { margin: var(--fare-space-xl) 0 var(--fare-space-xs); white-space: nowrap }
.plan-price span { font-weight: var(--fare-web-type-body-weight); letter-spacing: 0; color: var(--fare-text-secondary) }
.plan-card .f-btn { margin-top: var(--fare-space-xl); justify-content: center; width: 100% }
.plan-points {
  list-style: none;
  padding: var(--fare-space-lg) 0 0;
  margin: var(--fare-space-xl) 0 0;
  border-top: var(--fare-border-width-hairline) solid var(--fare-border);
  color: var(--fare-text-secondary);
}
.plan-points li { display: flex; gap: var(--fare-space-sm); margin-bottom: var(--fare-space-sm) }
.plan-points svg { width: var(--fare-icon-sm); height: var(--fare-icon-sm); color: var(--fare-brand-teal-ink); flex: none }
.plan-card .badge { align-self: flex-start; margin-bottom: var(--fare-space-md) }
.plan-card .plan-flex { flex: 1 }
.pricing-note { margin-top: var(--fare-space-xl); color: var(--fare-text-secondary); max-width: var(--fare-web-max-width-prose) }
.error-page { max-width: var(--fare-web-max-width-prose); padding: var(--wrap-section) var(--fare-web-space-gutter-sm); margin: 0 auto }
.error-page h1 { margin-bottom: var(--fare-space-xl) }
.error-page p { margin-bottom: var(--fare-space-xl); color: var(--fare-text-secondary) }

/* ------------------------------------------------------------------ account entry */
.auth-page { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 8rem) }
.auth-mini { margin-top: var(--fare-space-xxl); padding-top: var(--fare-space-xl); border-top: var(--fare-border-width-hairline) solid var(--fare-border) }
.auth-mini strong { display: block; margin-bottom: var(--fare-space-sm) }
.auth-mini p { color: var(--fare-text-secondary) }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--fare-space-lg) }
.form-notice:empty { display: none }
/* The outcome of an action survives in the page, with a dismiss control, instead of vanishing
   with a timer (AXW-07). */
.flash-notice > button { margin-left: auto; flex: none; min-height: var(--fare-size-control-height); min-width: var(--fare-size-control-height); justify-content: center }

/* ------------------------------------------------------------------ account and admin */
.two-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--fare-space-xl); margin-bottom: var(--fare-space-xl) }
.equal-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.subscription-hero {
  background: var(--fare-brand-navy);
  color: var(--fare-on-navy-primary);
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: var(--fare-web-shadow-none);
  min-height: 18.4375rem;
  padding: var(--fare-space-xl);
}
.subscription-hero:after {
  content: '';
  position: absolute;
  border: var(--fare-space-xl) solid color-mix(in srgb, var(--fare-on-navy-primary) 4%, transparent);
  width: 17.5rem;
  height: 17.5rem;
  border-radius: 50%;
  right: -6.25rem;
  top: -4.375rem;
  pointer-events: none;
}
.subscription-hero .section-label { color: var(--fare-brand-teal) }
.subscription-hero h2 { margin: var(--fare-space-lg) 0 0 }
.subscription-hero .sub-amount { margin-top: var(--fare-space-sm) }
.subscription-hero .sub-amount span { font-weight: var(--fare-web-type-body-weight); letter-spacing: 0; color: var(--fare-on-navy-secondary) }
.subscription-hero p { color: var(--fare-on-navy-secondary) }
.subscription-hero .inline-actions { margin-top: var(--fare-space-xl) }

/* Status badges. Success is navy on a neutral tint, not a GOOD green: a verdict hue means a
   verdict and nothing else. Each badge carries an icon and a word, so colour is never the signal. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fare-space-xs);
  min-height: var(--fare-size-tag-height);
  padding: var(--fare-space-xs) var(--fare-space-md);
  border-radius: var(--fare-radius-pill);
  border: var(--fare-border-width-hairline) solid var(--fare-border);
  background: var(--fare-accent-subtle);
  color: var(--fare-accent);
  font-weight: var(--fare-web-type-eyebrow-weight);
  white-space: nowrap;
}
.badge svg { width: var(--fare-icon-sm); height: var(--fare-icon-sm); flex: none }
.badge.warn {
  color: var(--fare-feedback-warning);
  background: color-mix(in srgb, var(--fare-feedback-warning) 8%, var(--fare-surface));
  border-color: var(--fare-feedback-warning);
}
.badge.gray { color: var(--fare-text-secondary); background: var(--fare-accent-subtle); border-color: var(--fare-border) }
.badge.red {
  color: var(--fare-feedback-error);
  background: color-mix(in srgb, var(--fare-feedback-error) 8%, var(--fare-surface));
  border-color: var(--fare-feedback-error);
}
.badge.dark { color: var(--fare-on-navy-primary); background: var(--fare-brand-navy); border-color: var(--fare-brand-navy) }

.details-list { margin: 0 }
.details-list > div {
  display: flex;
  gap: var(--fare-space-lg);
  justify-content: space-between;
  padding: var(--fare-space-md) 0;
  border-bottom: var(--fare-border-width-hairline) solid var(--fare-border);
}
.details-list > div:last-child { border: 0 }
.details-list dt { color: var(--fare-text-secondary); flex-shrink: 0 }
.details-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: var(--fare-web-type-title-weight) }
.empty-block { padding: var(--fare-space-xxl) var(--fare-space-xl); text-align: center }
.empty-block > svg { margin: 0 auto var(--fare-space-lg); width: var(--fare-icon-xl); height: var(--fare-icon-xl); color: var(--fare-brand-teal-ink) }
.empty-block h2 { margin-bottom: var(--fare-space-sm) }
.empty-block p { max-width: var(--fare-web-max-width-prose); color: var(--fare-text-secondary); margin: 0 auto var(--fare-space-xl) }
.profile-form { max-width: var(--fare-web-max-width-panel) }
.privacy-panel { border-color: var(--fare-feedback-error) }
.privacy-panel h2 { color: var(--fare-feedback-error) }
.remote-billing-note { padding: var(--fare-space-xl); border: var(--fare-border-width-hairline) solid var(--fare-border); border-radius: var(--fare-radius-md); margin-bottom: var(--fare-space-xl) }
.api-status {
  display: flex;
  gap: var(--fare-space-md);
  align-items: flex-start;
  background: var(--fare-accent-subtle);
  padding: var(--fare-space-lg);
  border-radius: var(--fare-radius-md);
  margin-top: var(--fare-space-xl);
  color: var(--fare-text-secondary);
}
.api-status svg { flex: none; width: var(--fare-icon-md); height: var(--fare-icon-md) }
.detail-header { margin-bottom: var(--fare-space-xl) }
.detail-header .badge { margin-top: var(--fare-space-sm) }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fare-space-lg); margin-bottom: var(--fare-space-xl) }
.stat {
  padding: var(--fare-space-xl);
  border: var(--fare-border-width-hairline) solid var(--fare-border);
  background: var(--fare-surface);
  box-shadow: var(--fare-web-shadow-card);
  border-radius: var(--fare-radius-md);
  min-width: 0;
}
.stat .stat-value { margin: var(--fare-space-xs) 0 }
.stat-label { color: var(--fare-text-secondary) }
.stat-note { color: var(--fare-text-secondary) }

/* A horizontally scrollable table is a region with a name and a Tab stop (AXW-17). The
   min-widths stay: the reflow log records these as held inside a scrollable region (AXW-02). */
/* position:relative matters: a .visually-hidden label inside the table is position:absolute,
   and without a positioned ancestor it is placed against the initial containing block, escapes
   the scroll container and drags the document 300 px sideways at 320 px. */
.table-scroll { position: relative; overflow-x: auto; max-width: 100%; min-width: 0; border-radius: var(--fare-radius-sm) }
.data-table { width: 100%; border-collapse: collapse; text-align: left }
.data-table th {
  font-weight: var(--fare-web-type-title-weight);
  color: var(--fare-text-secondary);
  padding: var(--fare-space-md);
  border-bottom: var(--fare-border-width-hairline) solid var(--fare-border);
  white-space: nowrap;
}
.data-table td { padding: var(--fare-space-lg) var(--fare-space-md); border-bottom: var(--fare-border-width-hairline) solid var(--fare-border); vertical-align: middle }
.data-table tr:last-child td { border-bottom: 0 }
.data-table td .secondary { display: block; color: var(--fare-text-secondary); margin-top: var(--fare-space-xs) }
.data-table tbody tr:hover { background: var(--fare-accent-subtle) }
.table-toolbar { display: flex; justify-content: space-between; gap: var(--fare-space-lg); align-items: center; margin-bottom: var(--fare-space-lg) }
.search-form { display: flex; gap: var(--fare-space-sm); max-width: 35rem; flex: 1; align-items: flex-start }
.pager {
  display: flex;
  gap: var(--fare-space-sm);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: var(--fare-space-lg);
  margin-top: var(--fare-space-sm);
  border-top: var(--fare-border-width-hairline) solid var(--fare-border);
  color: var(--fare-text-secondary);
}
.invoice-list { margin-top: var(--fare-space-xl) }
.price-editor { margin-top: var(--fare-space-xl) }
.price-editor .form-field { margin-bottom: var(--fare-space-lg) }
.price-editor .settings-actions { padding-top: var(--fare-space-lg); margin-top: 0 }
.price-history-note { color: var(--fare-text-secondary); margin-top: var(--fare-space-md) }

/* These selectors are DEFINED in this file, so their responsive overrides must be here too:
   upgrade.css loads after base.css, and at equal specificity the later rule wins - a container
   query in the earlier file would silently lose. */
@container site (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
@container site (max-width: 1199px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .plan-card { padding: var(--fare-space-xl) }
  .two-columns { gap: var(--fare-space-lg) }
}
@container site (max-width: 1023px) {
  .auth-page { display: block; min-height: 0 }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .two-columns { grid-template-columns: minmax(0, 1fr) }
  .subscription-hero { min-height: 0 }
  .pricing-section { padding: var(--wrap-section) 0 }
}
@container site (max-width: 767px) {
  .nav-actions > .my-account { padding: var(--fare-space-sm) var(--fare-space-md) }
  .nav-actions > .my-account svg { display: none }
  .form-grid { gap: 0 var(--fare-space-md) }
  .data-table { min-width: 35rem }
  .invoice-table { min-width: 28.75rem }
  .table-panel { padding: var(--fare-space-lg) }
  .table-toolbar { display: block }
  .search-form { max-width: none; margin-bottom: var(--fare-space-md) }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fare-space-md) }
  .stat { padding: var(--fare-space-lg) }
  .pricing-grid, .pricing-grid.single { grid-template-columns: minmax(0, 1fr) }
  .plan-caption { min-height: 0 }
  .plan-card .plan-flex { display: none }
  /* A long term and a long value stack rather than drag the page sideways (SC 1.4.10). */
  .details-list > div { flex-wrap: wrap; min-width: 0 }
  .details-list dt { flex-shrink: 1; min-width: 0 }
  .details-list dd { text-align: left }
}