/* Midplane reusable components v0.11.8 CANDIDATE.
   Opt in with .md-components and mdc-* classes. No global element reset.
   Website header/footer live in the separate accepted theme stylesheet. */
.md-components {
  --mdc-canvas: var(--md-warm-beige, #EAE6E1);
  --mdc-surface: var(--md-off-white, #F5F5F5);
  --mdc-text: var(--md-near-black, #121212);
  --mdc-primary: var(--md-red, #A74D4A);
  --mdc-primary-hover: #923D3A;
  --mdc-primary-active: #7B3330;
  --mdc-border: #CCC7C1;
  --mdc-field-border: #8C8781;
  --mdc-muted: #55504C;
  --mdc-danger: #B42318;
  --mdc-success: #26704A;
  --mdc-heading-font: var(--md-heading-font, Georgia, serif);
  --mdc-ui-font: var(--md-ui-font, Arial, sans-serif);
  --mdc-space-1: 4px;
  --mdc-space-2: 8px;
  --mdc-space-3: 16px;
  --mdc-space-4: 24px;
  --mdc-space-5: 32px;
  --mdc-control-radius: 5px;
  --mdc-panel-radius: 8px;
  --mdc-content-width: 1120px;
  --mdc-control-height: 44px;
}
:where(.md-components) :is(.mdc-content, .mdc-section, .mdc-card, .mdc-button, .mdc-input, .mdc-textarea, .mdc-select, .mdc-check, .mdc-table-wrap, .mdc-tab, .mdc-toolbar-button, .mdc-menu-trigger, .mdc-menu-panel, .mdc-menu-item, .mdc-dialog) { box-sizing: border-box; }
:where(.md-components) .mdc-content { max-width: var(--mdc-content-width); padding: 56px 24px 80px; margin-inline: auto; }
:where(.md-components) .mdc-title { margin: 0 0 16px; color: var(--mdc-text); font: 400 clamp(32px, 3vw, 44px)/1.2 var(--mdc-heading-font); }
:where(.md-components) .mdc-heading { margin: 0; color: var(--mdc-text); font: 400 24px/1.3 var(--mdc-heading-font); }
:where(.md-components) .mdc-subheading { margin: 0 0 12px; color: var(--mdc-text); font: 700 17px/1.4 var(--mdc-ui-font); }
:where(.md-components) .mdc-text { margin: 0; color: var(--mdc-text); font: 400 16px/1.6 var(--mdc-ui-font); }
:where(.md-components) .mdc-note { margin: 0; color: var(--mdc-muted); font: 400 14px/1.5 var(--mdc-ui-font); }
:where(.md-components) .mdc-eyebrow { margin: 0 0 16px; color: var(--mdc-muted); font: 500 13px/1.5 var(--mdc-ui-font); }
:where(.md-components) .mdc-intro { max-width: 720px; }
:where(.md-components) .mdc-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--mdc-border); scroll-margin-top: calc(var(--mp-header-height, 100px) + 24px); }
:where(.md-components) .mdc-section-head { display: grid; gap: 8px; margin-bottom: 24px; }
:where(.md-components) .mdc-stack { display: grid; gap: var(--mdc-gap, var(--mdc-space-3)); min-width: 0; }
:where(.md-components) .mdc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mdc-gap, var(--mdc-space-3)); }
:where(.md-components) .mdc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mdc-gap, var(--mdc-space-4)); }
:where(.md-components) .mdc-card { min-width: 0; padding: var(--mdc-space-4); color: var(--mdc-text); background: var(--mdc-surface); border: 1px solid var(--mdc-border); border-radius: var(--mdc-panel-radius); }
:where(.md-components) .mdc-card--muted { background: var(--mdc-canvas); }
:where(.md-components) .mdc-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--mdc-control-height); padding: 10px 18px;
  border: 1px solid var(--mdc-border); border-radius: var(--mdc-control-radius);
  background: var(--mdc-surface); color: var(--mdc-text);
  font: 500 15px/1.4 var(--mdc-ui-font); text-align: center; cursor: pointer; text-decoration: none;
}
:where(.md-components) .mdc-button:hover:not(:disabled) { background: var(--mdc-canvas); border-color: var(--mdc-field-border); }
:where(.md-components) .mdc-button:active:not(:disabled) { background: #DDD7D1; }
:where(.md-components) .mdc-button--primary { background: var(--mdc-primary); color: #FFF; border-color: var(--mdc-primary); }
:where(.md-components) .mdc-button--primary:hover:not(:disabled) { background: var(--mdc-primary-hover); border-color: var(--mdc-primary-hover); }
:where(.md-components) .mdc-button--primary:active:not(:disabled) { background: var(--mdc-primary-active); border-color: var(--mdc-primary-active); }
:where(.md-components) .mdc-button--outline { background: transparent; border-color: var(--mdc-primary); }
:where(.md-components) .mdc-button:disabled { opacity: .55; cursor: not-allowed; }
:where(.md-components) :is(.mdc-button, .mdc-input, .mdc-textarea, .mdc-select, .mdc-checkbox, .mdc-tab, .mdc-toolbar-button, .mdc-menu-trigger, .mdc-menu-item, .mdc-table-wrap, .mdc-tab-panel, .mdc-section-link):focus-visible { outline: 3px solid var(--mdc-text); outline-offset: 3px; }
:where(.md-components) .mdc-field { display: grid; gap: 8px; min-width: 0; }
:where(.md-components) .mdc-label { color: var(--mdc-text); font: 500 15px/1.4 var(--mdc-ui-font); }
:where(.md-components) :is(.mdc-input, .mdc-textarea, .mdc-select) { width: 100%; min-height: var(--mdc-control-height); padding: 10px 12px; border: 1px solid var(--mdc-field-border); border-radius: var(--mdc-control-radius); background: var(--mdc-surface); color: var(--mdc-text); font: 400 16px/1.5 var(--mdc-ui-font); }
:where(.md-components) .mdc-textarea { min-height: 110px; resize: vertical; }
:where(.md-components) :is(.mdc-input, .mdc-textarea, .mdc-select):hover:not(:disabled) { border-color: var(--mdc-text); }
:where(.md-components) :is(.mdc-input, .mdc-textarea, .mdc-select):disabled { opacity: .6; cursor: not-allowed; }
:where(.md-components) [aria-invalid="true"].mdc-input { border: 2px solid var(--mdc-danger); }
:where(.md-components) .mdc-error { margin: 0; color: var(--mdc-danger); font: 400 14px/1.5 var(--mdc-ui-font); }
:where(.md-components) .mdc-status { margin: 0; color: var(--mdc-success); font: 500 14px/1.5 var(--mdc-ui-font); }
:where(.md-components) .mdc-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--mdc-text); font: 400 15px/1.5 var(--mdc-ui-font); cursor: pointer; }
:where(.md-components) .mdc-checkbox { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--mdc-primary); }
:where(.md-components) .mdc-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--mdc-border); border-radius: var(--mdc-panel-radius); background: var(--mdc-surface); }
:where(.md-components) .mdc-table { width: 100%; min-width: 560px; border-collapse: collapse; color: var(--mdc-text); font: 400 15px/1.5 var(--mdc-ui-font); text-align: left; }
:where(.md-components) .mdc-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--mdc-border); vertical-align: top; }
:where(.md-components) .mdc-table th { font-weight: 500; }
:where(.md-components) .mdc-table thead { background: var(--mdc-canvas); }
:where(.md-components) .mdc-table tbody tr:nth-child(even) { background: #EFEDE9; }
:where(.md-components) .mdc-table tbody tr:hover { background: #E7E2DC; }
:where(.md-components) .mdc-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
:where(.md-components) .mdc-caption { padding: 16px; text-align: left; font-weight: 500; }
:where(.md-components) .mdc-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--mdc-border); }
:where(.md-components) .mdc-tab { min-height: 44px; padding: 10px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--mdc-text); font: 500 15px/1.4 var(--mdc-ui-font); cursor: pointer; }
:where(.md-components) .mdc-tab:hover { background: var(--mdc-canvas); }
:where(.md-components) .mdc-tab[aria-selected="true"] { border-bottom-color: var(--mdc-primary); background: var(--mdc-surface); }
:where(.md-components) .mdc-tab-panel { padding-block: 20px; }
:where(.md-components) .mdc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
:where(.md-components) .mdc-toolbar-button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--mdc-border); border-radius: 5px; background: var(--mdc-surface); color: var(--mdc-text); font: 500 15px/1.4 var(--mdc-ui-font); cursor: pointer; }
:where(.md-components) .mdc-toolbar-button[aria-pressed="true"] { background: var(--mdc-primary); border-color: var(--mdc-primary); color: #FFF; }
:where(.md-components) .mdc-toolbar-button:hover:not([aria-pressed="true"]) { background: var(--mdc-canvas); }
:where(.md-components) .mdc-menu { position: relative; width: max-content; max-width: 100%; }
:where(.md-components) .mdc-menu-trigger { min-height: 44px; padding: 10px 16px; border: 1px solid var(--mdc-border); border-radius: 5px; background: var(--mdc-surface); color: var(--mdc-text); font: 500 15px/1.4 var(--mdc-ui-font); cursor: pointer; }
:where(.md-components) .mdc-menu-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: grid; width: 200px; max-width: 80vw; padding: 4px; border: 1px solid var(--mdc-border); border-radius: 5px; background: var(--mdc-surface); box-shadow: 0 6px 16px rgb(18 18 18 / 12%); }
:where(.md-components) .mdc-menu-item { min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: var(--mdc-text); font: 400 15px/1.4 var(--mdc-ui-font); text-align: left; cursor: pointer; }
:where(.md-components) .mdc-menu-item:hover { background: var(--mdc-canvas); }
:where(.md-components) .mdc-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px; border: 1px solid var(--mdc-border); border-radius: var(--mdc-panel-radius); background: var(--mdc-surface); color: var(--mdc-text); box-shadow: 0 16px 64px rgb(18 18 18 / 22%); }
:where(.md-components) .mdc-dialog::backdrop { background: rgb(18 18 18 / 45%); }
:where(.md-components) .mdc-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
:where(.md-components) .mdc-section-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; }
:where(.md-components) .mdc-section-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mdc-text); font: 500 14px/1.4 var(--mdc-ui-font); text-underline-offset: 4px; }
:where(.md-components) .mdc-spacing-list { display: flex; flex-wrap: wrap; align-items: end; gap: 32px; }
:where(.md-components) .mdc-space-mark { display: block; width: var(--mdc-sample-space); height: 32px; margin-top: 8px; background: var(--mdc-primary); }
@media (max-width: 767px) {
  :where(.md-components) .mdc-content { padding: 40px 6vw 56px; }
  :where(.md-components) .mdc-grid { grid-template-columns: minmax(0, 1fr); }
  :where(.md-components) .mdc-card { padding: 16px; }
  :where(.md-components) .mdc-section { margin-top: 32px; padding-top: 24px; }
}

/* v0.11.8: application identity is separate from the unchanged website header.
   Application name is supplied as HTML text, not embedded in this component. */
:where(.md-components) .mdc-app-titlebar {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--mdc-app-title-min-height, 0);
  padding: 12px 16px;
  border-bottom: 1px solid var(--mdc-border);
  background: var(--mdc-surface);
  color: var(--mdc-text);
  text-align: center;
}
:where(.md-components) .mdc-app-title {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font: 400 var(--mdc-app-title-font-size, 24px)/1.2 var(--mdc-heading-font);
  text-align: center;
}
/* Match the existing website brand-name mobile rule exactly. */
@media (max-width: 767px) {
  :where(.md-components) .mdc-app-titlebar { padding-block: 10px; }
  :where(.md-components) .mdc-app-title { font-size: var(--mdc-app-title-font-size, 18px); }
}