:root {

  --vera-bg: #edf3f6;
  --vera-surface: rgba(255, 255, 255, 0.84);
  --vera-surface-strong: #ffffff;
  --vera-border: rgba(127, 151, 177, 0.22);
  --vera-text: #17324d;
  --vera-muted: #5f6f86;
  --vera-brand: #0d5c63;
  --vera-brand-strong: #0b3954;
  --vera-accent: #f3a712;
  --vera-success: #13795b;
  --vera-danger: #b42318;
  --vera-info: #2159a6;
  --vera-shadow: 0 12px 24px rgba(12, 36, 61, 0.07);
}

#vera-app, #vera-app * { box-sizing: border-box; font-family: Aptos, "Segoe UI Variable Display", "Segoe UI", sans-serif; }

#vera-app { height: 100vh; }
#vera-app h1,
#vera-app h2,
#vera-app h3,
#vera-app h4 {
  color: var(--vera-text);
}

#vera-app p,
#vera-app li,
#vera-app td,
#vera-app th,
#vera-app label,
#vera-app input,
#vera-app select,
#vera-app textarea,
#vera-app button {
  font-size: 14px;
}

#vera-app .vera-btn {
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--vera-brand) 0%, var(--vera-brand-strong) 100%);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(11, 57, 84, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

#vera-app .vera-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 57, 84, 0.16);
}

#vera-app .vera-pricebook-layout {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

#vera-app .vera-pricebook-sidebar,
#vera-app .vera-pricebook-editor {
  box-sizing: border-box;
}

#vera-app .vera-pricebook-version-list,
#vera-app .vera-pricebook-main {
  display: grid;
  gap: 12px;
}

#vera-app .vera-pricebook-version {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8deea;
  border-radius: 14px;
  background: #fff;
  color: #12233f;
  text-align: left;
  cursor: pointer;
}

#vera-app .vera-pricebook-expand-label {
  flex: 0 0 auto;
  color: var(--vera-brand);
  font-size: 12px;
  font-weight: 900;
}

#vera-app .vera-pricebook-version[aria-expanded="true"] .vera-pricebook-expand-label {
  color: var(--vera-brand-strong);
}

#vera-app .vera-pricebook-collapsed-state {
  min-height: 180px;
  display: grid;
  align-content: center;
  text-align: center;
}

#vera-app .vera-pricebook-version:hover,
#vera-app .vera-pricebook-version.is-selected {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
}

#vera-app .vera-pricebook-version span:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#vera-app .vera-pricebook-version strong,
#vera-app .vera-pricebook-version small {
  overflow-wrap: anywhere;
}

#vera-app .vera-pricebook-version small,
#vera-app .vera-pricebook-rate-summary small,
#vera-app .vera-pricebook-toggle small,
#vera-app .vera-pricebook-communication-list small {
  color: #667085;
  line-height: 1.45;
}

#vera-app .vera-pricebook-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

#vera-app .vera-pricebook-status.is-current {
  background: #ecfdf3;
  color: #027a48;
}

#vera-app .vera-pricebook-status.is-scheduled {
  background: #eff8ff;
  color: #175cd3;
}

#vera-app .vera-pricebook-status.is-historical {
  background: #f2f4f7;
  color: #475467;
}

#vera-app .vera-pricebook-status.is-expired {
  background: #fef3f2;
  color: #b42318;
}

#vera-app .vera-pricebook-expiry-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #fdb022;
  border-radius: 14px;
  background: #fffaeb;
  color: #7a2e0e;
  line-height: 1.55;
}

#vera-app .vera-pricebook-lock-note,
#vera-app .vera-pricebook-km-note,
#vera-app .vera-pricebook-empty {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #f9fafb;
  color: #475467;
  line-height: 1.5;
}

#vera-app .vera-pricebook-meta-grid,
#vera-app .vera-pricebook-km-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

#vera-app .vera-pricebook-field,
#vera-app .vera-pricebook-toggle {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#vera-app .vera-pricebook-field > span {
  font-weight: 700;
  color: #344054;
}

#vera-app .vera-pricebook-field input,
#vera-app .vera-pricebook-field select,
#vera-app .vera-pricebook-field textarea,
#vera-app .vera-pricebook-rate-input input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #101828;
  font: inherit;
}

#vera-app .vera-pricebook-field input:disabled,
#vera-app .vera-pricebook-field select:disabled,
#vera-app .vera-pricebook-field textarea:disabled,
#vera-app .vera-pricebook-rate-input input:disabled {
  background: #f2f4f7;
  color: #667085;
}

#vera-app .vera-pricebook-field.is-wide,
#vera-app .vera-pricebook-toggle.is-wide {
  grid-column: 1 / -1;
}

#vera-app .vera-pricebook-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding: 12px;
  border: 1px solid #d8deea;
  border-radius: 12px;
  background: #fbfdff;
}

#vera-app .vera-pricebook-toggle input {
  margin-top: 3px;
}

#vera-app .vera-pricebook-toggle span {
  display: grid;
  gap: 3px;
}

#vera-app .vera-pricebook-rates-head,
#vera-app .vera-pricebook-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}

#vera-app .vera-pricebook-rate-list {
  margin-top: 12px;
  border: 1px solid #d8deea;
  border-radius: 12px;
  overflow-x: auto;
  background: #fff;
}

#vera-app .vera-pricebook-rate-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

#vera-app .vera-pricebook-rate-table th,
#vera-app .vera-pricebook-rate-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #eaecf0;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

#vera-app .vera-pricebook-rate-table th {
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#vera-app .vera-pricebook-rate-table th:nth-child(1) {
  width: 18%;
}

#vera-app .vera-pricebook-rate-table th:nth-child(2) {
  width: 44%;
}

#vera-app .vera-pricebook-rate-table th:nth-child(3) {
  width: 21%;
}

#vera-app .vera-pricebook-rate-table th:nth-child(4) {
  width: 17%;
}

#vera-app .vera-pricebook-rate-table tbody tr:last-child td {
  border-bottom: 0;
}

#vera-app .vera-pricebook-rate-band {
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
}

#vera-app .vera-pricebook-rate-service strong {
  color: #1d2939;
  font-size: 13px;
  line-height: 1.35;
}

#vera-app .vera-pricebook-rate-code code {
  color: #344054;
  font-size: 12px;
  white-space: nowrap;
}

#vera-app .vera-pricebook-rate-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

#vera-app .vera-pricebook-rate-input input {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
}

#vera-app .vera-pricebook-km-settings {
  margin-top: 12px;
  border: 1px solid #d8deea;
  border-radius: 12px;
  overflow: hidden;
  background: #fcfcfd;
}

#vera-app .vera-pricebook-km-settings summary {
  padding: 10px 14px;
  color: #344054;
  font-weight: 800;
  cursor: pointer;
}

#vera-app .vera-pricebook-km-settings summary span,
#vera-app .vera-pricebook-km-settings summary small {
  margin-left: 6px;
}

#vera-app .vera-pricebook-km-settings summary small {
  color: #667085;
  font-weight: 500;
}

#vera-app .vera-pricebook-km-grid {
  margin-top: 0;
  padding: 4px 14px 14px;
}

#vera-app .vera-pricebook-communications {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eaecf0;
}

#vera-app .vera-pricebook-communication-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

#vera-app .vera-pricebook-communication-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
}

#vera-app .vera-pricebook-communication-list span:first-child {
  display: grid;
  gap: 3px;
}

@media (max-width: 980px) {
  #vera-app .vera-pricebook-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #vera-app .vera-pricebook-version-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #vera-app .vera-pricebook-version-list,
  #vera-app .vera-pricebook-meta-grid,
  #vera-app .vera-pricebook-km-grid,
  #vera-app .vera-pricebook-rate-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  #vera-app .vera-pricebook-rate-table {
    min-width: 0;
    table-layout: auto;
  }

  #vera-app .vera-pricebook-rate-table thead {
    display: none;
  }

  #vera-app .vera-pricebook-rate-table tbody,
  #vera-app .vera-pricebook-rate-table tr,
  #vera-app .vera-pricebook-rate-table td {
    display: block;
  }

  #vera-app .vera-pricebook-rate-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    border-bottom: 1px solid #eaecf0;
  }

  #vera-app .vera-pricebook-rate-table tbody tr:last-child {
    border-bottom: 0;
  }

  #vera-app .vera-pricebook-rate-table td {
    padding: 6px;
    border-bottom: 0;
  }

  #vera-app .vera-pricebook-rate-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #vera-app .vera-pricebook-rates-head,
  #vera-app .vera-pricebook-save-row,
  #vera-app .vera-pricebook-communication-list > div {
    align-items: stretch;
    flex-direction: column;
  }
}

#vera-app .vera-btn.is-active {
  background: linear-gradient(135deg, var(--vera-brand-strong) 0%, #08283d 100%);
  color: #fff;
  box-shadow:
    0 10px 22px rgba(11, 57, 84, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

#vera-app .vera-btn.is-active:hover {
  box-shadow:
    0 12px 24px rgba(11, 57, 84, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

#vera-app .vera-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#vera-app .vera-btn-secondary {
  background: rgba(11, 57, 84, 0.08);
  color: var(--vera-brand-strong);
  box-shadow: none;
  border: 1px solid rgba(11, 57, 84, 0.12);
}

#vera-app .vera-btn-danger {
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--vera-brand) 0%, var(--vera-brand-strong) 100%);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(11, 57, 84, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

#vera-app .vera-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 57, 84, 0.16);
}

#vera-app .vera-btn-danger:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#vera-app .vera-location-disclosure {
  width: min(92vw, 560px);
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(127, 151, 177, 0.24);
  border-radius: 8px;
  background: #f7fbf9;
  color: var(--vera-text);
  box-shadow: 0 24px 64px rgba(7, 46, 37, 0.28);
}

#vera-app .vera-location-disclosure::backdrop {
  background: rgba(5, 24, 22, 0.68);
}

#vera-app .vera-location-disclosure__body {
  padding: 22px 22px 14px;
}

#vera-app .vera-location-disclosure__eyebrow {
  margin-bottom: 8px;
  color: var(--vera-success);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

#vera-app .vera-location-disclosure h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

#vera-app .vera-location-disclosure p {
  margin: 14px 0 0;
  color: #40556b;
  font-size: 15px;
  line-height: 1.55;
}

#vera-app .vera-location-disclosure__lead {
  color: var(--vera-text);
  font-weight: 700;
}

#vera-app .vera-location-disclosure__privacy {
  display: inline-block;
  margin-top: 14px;
  color: var(--vera-brand);
  font-size: 14px;
  font-weight: 700;
}

#vera-app .vera-location-disclosure__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(127, 151, 177, 0.22);
  background: #f7fbf9;
}

@media (max-width: 520px) {
  #vera-app .vera-location-disclosure {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 40px);
  }

  #vera-app .vera-location-disclosure__body {
    padding: 18px 18px 12px;
  }

  #vera-app .vera-location-disclosure h2 {
    font-size: 21px;
  }

  #vera-app .vera-location-disclosure__actions {
    padding: 12px 18px 16px;
  }

  #vera-app .vera-location-disclosure__actions .vera-btn {
    flex: 1 1 0;
    min-height: 46px;
  }
}

#vera-app .vera-compliance-template-preview-frame {
  display: block;
  width: 100%;
  height: min(72vh, 900px);
  min-height: 620px;
  border: 0;
  border-radius: 10px;
  background: #fff;
}

#vera-app input,
#vera-app select,
#vera-app textarea {
  background: rgba(255,255,255,0.92);
  color: var(--vera-text);
  border: 1px solid rgba(127, 151, 177, 0.3);
  outline: none;
}

#vera-app input:focus,
#vera-app select:focus,
#vera-app textarea:focus {
  border-color: rgba(13, 92, 99, 0.65);
  box-shadow: 0 0 0 4px rgba(13, 92, 99, 0.08);
}

#vera-app .vera-loading-shell {
  min-height: 100%;
}

#vera-app .vera-loading-head,
#vera-app .vera-loading-row,
#vera-app .vera-loading-toolbar,
#vera-app .vera-loading-actions,
#vera-app .vera-loading-grid-2 {
  display: flex;
  gap: 16px;
}

#vera-app .vera-loading-head,
#vera-app .vera-loading-row {
  justify-content: space-between;
  align-items: center;
}

#vera-app .vera-loading-head,
#vera-app .vera-loading-toolbar,
#vera-app .vera-loading-grid-2 {
  margin-bottom: 18px;
}

#vera-app .vera-loading-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#vera-app .vera-loading-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

#vera-app .vera-loading-kpi-grid {
  margin-bottom: 18px;
}

#vera-app .vera-loading-panel,
#vera-app .vera-loading-card {
  border: 1px solid var(--vera-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--vera-shadow);
}

#vera-app .vera-loading-panel {
  padding: 18px;
}

#vera-app .vera-loading-row + .vera-loading-row {
  margin-top: 14px;
}

#vera-app .vera-loading-card {
  padding: 18px;
}

#vera-app .vera-loading-card-metric {
  min-height: 140px;
}

#vera-app .vera-loading-card-hero,
#vera-app .vera-loading-card-mobile-hero {
  overflow: hidden;
  margin-bottom: 18px;
}

#vera-app .vera-loading-card-roster,
#vera-app .vera-loading-card-table,
#vera-app .vera-loading-card-list-item {
  margin-bottom: 18px;
}

#vera-app .vera-loading-card-mobile-hero {
  padding: 20px;
}

#vera-app .vera-loading-card-mobile-panel,
#vera-app .vera-loading-mobile-section {
  margin-bottom: 16px;
}

#vera-app .vera-loading-card-mobile-panel + .vera-loading-card-mobile-panel {
  margin-top: 16px;
}

#vera-app .vera-loading-bar,
#vera-app .vera-loading-pill,
#vera-app .vera-loading-block,
#vera-app .vera-loading-mobile-icon {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(223, 230, 239, 0.9) 0%,
    rgba(245, 248, 251, 0.98) 50%,
    rgba(223, 230, 239, 0.9) 100%
  );
  background-size: 220% 100%;
  animation: vera-loading-shimmer 1.25s ease-in-out infinite;
}

#vera-app .vera-loading-bar,
#vera-app .vera-loading-pill {
  border-radius: 999px;
}

#vera-app .vera-loading-block {
  border-radius: 18px;
}

#vera-app .vera-loading-pill {
  flex: 0 0 auto;
}

#vera-app .vera-loading-shell-mobile .vera-mobile-content {
  padding-bottom: 120px;
}

#vera-app .vera-loading-mobile-topbar {
  grid-template-columns: 48px 1fr 48px;
}

#vera-app .vera-loading-mobile-list {
  display: flex;
  flex-direction: column;
}

#vera-app .vera-loading-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

#vera-app .vera-loading-mobile-titleblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#vera-app .vera-loading-mobile-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

#vera-app .vera-loading-roster-grid {
  display: grid;
  grid-template-columns: 170px repeat(7, minmax(110px, 1fr));
  gap: 10px;
  min-width: 1040px;
}

#vera-app .vera-loading-roster-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#vera-app .vera-loading-roster-cell,
#vera-app .vera-loading-table-row {
  border: 1px solid rgba(127, 151, 177, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

#vera-app .vera-loading-roster-cell {
  min-height: 72px;
  padding: 12px;
}

#vera-app .vera-loading-roster-cell.is-head {
  min-height: 58px;
  background: rgba(245, 248, 251, 0.92);
}

#vera-app .vera-loading-roster-column.is-label .vera-loading-roster-cell {
  background: rgba(245, 248, 251, 0.92);
}

#vera-app .vera-loading-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#vera-app .vera-loading-table-row {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px;
}

#vera-app .vera-loading-table-row.is-head {
  background: rgba(245, 248, 251, 0.92);
}

#vera-app .vera-loading-table-cell {
  min-width: 0;
}

@keyframes vera-loading-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

#vera-app .vera-onboarding-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#vera-app .vera-onboarding-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  min-width: 0;
}

#vera-app .vera-onboarding-stepper {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

#vera-app .vera-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  min-width: 0;
}

#vera-app .vera-onboarding-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
  min-width: 0;
}

#vera-app .vera-onboarding-section-break {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 6px;
  font-weight: 700;
}

#vera-app .vera-onboarding-field {
  min-width: 0;
  max-width: 100%;
}

#vera-app .vera-onboarding-control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d8deea;
  border-radius: 10px;
}

#vera-app .vera-onboarding-textarea {
  resize: vertical;
  line-height: 1.5;
}

#vera-app .vera-onboarding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

#vera-app .vera-onboarding-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

#vera-app .vera-onboarding-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  line-height: 1.4;
}

#vera-app .vera-onboarding-checkbox input {
  flex: 0 0 auto;
  margin-top: 2px;
}

#vera-app .vera-onboarding-checkbox span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  #vera-app .vera-onboarding-grid,
  #vera-app .vera-onboarding-checkbox-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #vera-app .vera-onboarding-control {
    font-size: 16px;
  }

  #vera-app .vera-onboarding-footer {
    align-items: stretch;
  }

  #vera-app .vera-onboarding-footer > div,
  #vera-app .vera-onboarding-actions {
    width: 100%;
  }

  #vera-app .vera-onboarding-actions {
    flex-direction: column;
  }

  #vera-app .vera-onboarding-actions .vera-btn {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    white-space: normal;
  }
}

/* Shared care completion and save feedback: web and selected mobile themes. */
#vera-app .vera-shift-completion {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--vera-border);
  border-radius: 18px;
  background: var(--vera-surface-strong);
  color: var(--vera-text);
}
#vera-app .vera-shift-completion-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#vera-app .vera-shift-completion h3 { margin: 0; font-size: 16px; }
#vera-app .vera-shift-completion summary { cursor: pointer; position: relative; padding-right: 24px; list-style: none; }
#vera-app .vera-shift-completion summary::-webkit-details-marker { display: none; }
#vera-app .vera-shift-completion summary::after { content: "+"; position: absolute; right: 0; top: 8px; font-size: 22px; color: var(--vera-mobile-theme-accent, var(--vera-brand)); }
#vera-app .vera-shift-completion[open] summary::after { content: "−"; }
#vera-app .vera-shift-completion summary:focus-visible { outline: 2px solid var(--vera-mobile-theme-accent, var(--vera-brand)); outline-offset: 4px; }
#vera-app .vera-shift-completion[open] summary { margin-bottom: 8px; }
#vera-app .vera-shift-completion-help { margin: 10px 0 0; color: var(--vera-muted); font-size: 12px; line-height: 1.5; }
#vera-app .vera-shift-completion-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#vera-app .vera-shift-completion-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; min-height: 64px; text-align: left; border: 1px solid var(--vera-border); border-radius: 12px; background: var(--vera-bg); color: var(--vera-text); cursor: pointer; font: inherit; }
#vera-app .vera-shift-completion-detail { display: block; color: var(--vera-muted); font-size: 12px; margin-top: 4px; }
#vera-app .vera-shift-completion-status { flex-shrink: 0; border-radius: 999px; padding: 5px 8px; font-size: 12px; font-weight: 700; }
#vera-app .vera-shift-completion-status.is-saved { background: rgba(19,121,91,.12); color: var(--vera-success); }
#vera-app .vera-shift-completion-status.is-pending { background: rgba(243,167,18,.18); color: #8a5b00; }
#vera-app .vera-shift-completion-row:focus-visible { outline: 2px solid var(--vera-mobile-theme-accent, var(--vera-brand)); outline-offset: 2px; }
#vera-app .vera-save-status { padding: 10px 12px; margin: 10px 0; border-radius: 12px; color: var(--vera-muted); background: var(--vera-bg); line-height: 1.5; }
#vera-app .vera-save-status[data-state="error"] { color: var(--vera-danger); background: #fef3f2; }
#vera-app .vera-save-status[data-state="pending"] { color: #8a5b00; background: #fffaeb; }
#vera-app .vera-save-status[data-state="saved"] { color: var(--vera-success); background: #ecfdf3; }
#vera-app .vera-save-status[hidden] { display: none; }
#vera-app.is-mobile-shell .vera-shift-completion-list { grid-template-columns: 1fr; }
#vera-app.is-mobile-shell .vera-shift-completion { margin-top: 4px; }
@media (max-width: 700px) {
  #vera-app .vera-shift-completion-list { grid-template-columns: 1fr; }
}


/* Preserved compliance form records use the existing Vera surfaces and controls. */
/* Intake reuses Vera surfaces and the shared record dialog. */
#vera-app .vera-intake-page h2, #vera-app .vera-intake-page h3 { margin:0 0 8px; }
#vera-app .vera-intake-page p, #vera-app .vera-intake-review p { color:var(--vera-muted); line-height:1.55; font-size:13px; }
#vera-app .vera-intake-heading, #vera-app .vera-intake-section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
#vera-app .vera-intake-send { margin-bottom:20px; }
#vera-app .vera-intake-send-fields { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
#vera-app .vera-intake-control { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; flex:1; min-width:170px; }
#vera-app .vera-intake-control input, #vera-app .vera-intake-control select, #vera-app .vera-intake-control textarea { box-sizing:border-box; width:100%; padding:11px 12px; border:1px solid var(--vera-border); border-radius:10px; background:var(--vera-surface-strong); color:var(--vera-text); font:inherit; font-size:13px; }
#vera-app .vera-intake-control textarea { resize:vertical; }
#vera-app .vera-intake-filters { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
#vera-app .vera-intake-filters button { display:inline-flex; gap:8px; align-items:center; }
#vera-app .vera-intake-filters button[aria-pressed="true"] { color:var(--vera-brand); background:var(--vera-bg); border-color:var(--vera-brand); }
#vera-app .vera-intake-filters span { border-radius:999px; padding:2px 6px; background:var(--vera-bg); font-size:11px; }
#vera-app .vera-intake-badge { display:inline-flex; align-items:center; border-radius:999px; padding:6px 10px; font-size:11px; font-weight:700; background:var(--vera-bg); color:var(--vera-muted); white-space:nowrap; }
#vera-app .vera-intake-badge[data-tone="saved"] { color:var(--vera-success); background:#ecfdf3; }
#vera-app .vera-intake-badge[data-tone="waiting"] { color:var(--vera-brand); background:#eef6ff; }
#vera-app .vera-intake-badge[data-tone="review"] { color:#6d28d9; background:#f3edff; }
#vera-app .vera-intake-badge[data-tone="attention"] { color:#8a5b00; background:#fffaeb; }
#vera-app .vera-intake-load { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:16px; }
#vera-app dialog.vera-form-history.vera-intake-review { width:min(980px,calc(100vw - 32px)); }
#vera-app .vera-intake-section { margin:22px 0; padding-top:16px; border-top:1px solid var(--vera-border); }
#vera-app .vera-intake-section h4 { margin:0 0 8px; font-size:16px; }
#vera-app .vera-intake-section-head p { margin-bottom:0; }
#vera-app .vera-intake-comparison { border:1px solid var(--vera-border); border-radius:12px; overflow:hidden; }
#vera-app .vera-intake-comparison-head, #vera-app .vera-intake-comparison-row { display:grid; grid-template-columns:minmax(125px,.7fr) minmax(0,1fr) minmax(0,1fr); gap:14px; padding:14px; font-size:12px; }
#vera-app .vera-intake-comparison-head { background:var(--vera-bg); color:var(--vera-muted); font-weight:600; }
#vera-app .vera-intake-comparison-row { border-top:1px solid var(--vera-border); cursor:pointer; align-items:start; }
#vera-app .vera-intake-comparison-row>span:first-child { display:flex; gap:8px; }
#vera-app .vera-intake-value { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-weight:400; color:var(--vera-text); line-height:1.5; }
#vera-app .vera-intake-comparison-row small { display:block; margin-top:6px; color:var(--vera-muted); }
#vera-app .vera-intake-contact { padding:16px; border:1px solid var(--vera-border); border-radius:12px; margin:12px 0; }
#vera-app .vera-intake-contact h5 { font-size:14px; margin:0 0 14px; }
#vera-app .vera-intake-contact h6 { font-size:12px; color:var(--vera-muted); margin:12px 0; }
#vera-app .vera-intake-contact-values { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#vera-app .vera-intake-contact-values>div { min-width:0; }
#vera-app .vera-intake-contact-values strong { display:block; font-size:11px; margin-bottom:4px; }
#vera-app .vera-intake-role-choices { padding-top:12px; border-top:1px solid var(--vera-border); }
#vera-app .vera-intake-role-choices label, #vera-app .vera-intake-confirm { display:flex; align-items:flex-start; gap:8px; margin:12px 0; font-size:13px; line-height:1.5; }
#vera-app .vera-intake-review input[type="checkbox"], #vera-app .vera-intake-review input[type="radio"] { width:16px; height:16px; flex-shrink:0; accent-color:var(--vera-brand); margin:1px 0 0; }
#vera-app .vera-intake-candidate { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--vera-border); border-radius:10px; padding:12px; margin:8px 0; font-size:12px; }
#vera-app .vera-intake-candidate small { display:block; margin-top:6px; color:var(--vera-muted); }
#vera-app .vera-intake-search { display:flex; align-items:flex-end; gap:8px; margin:14px 0; }
#vera-app .vera-intake-original { margin:16px 0; font-size:13px; }
#vera-app .vera-intake-original summary { color:var(--vera-brand); cursor:pointer; }
#vera-app .vera-intake-original dl { max-height:400px; overflow:auto; background:var(--vera-bg); border-radius:12px; padding:14px; }
#vera-app .vera-intake-original dl>div { margin-bottom:14px; }
#vera-app .vera-intake-original dt { color:var(--vera-muted); margin-bottom:4px; }
#vera-app .vera-intake-original dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:600px) {
  #vera-app .vera-intake-send-fields { flex-direction:column; align-items:stretch; }
  #vera-app .vera-intake-comparison-head { display:none; }
  #vera-app .vera-intake-comparison-row { grid-template-columns:1fr; gap:8px; }
  #vera-app .vera-intake-comparison-row>span:nth-child(2)::before { content:'Current: '; color:var(--vera-muted); }
  #vera-app .vera-intake-comparison-row>span:nth-child(3)::before { content:'Submitted: '; color:var(--vera-muted); }
  #vera-app .vera-intake-contact-values { grid-template-columns:1fr; }
  #vera-app .vera-intake-candidate { flex-direction:column; align-items:flex-start; }
}

/* Complaint follow-up uses the existing Vera palette and register spacing. */
#vera-app .vera-complaint-workflow { max-width: 1640px; margin: 0 auto; color: var(--vera-text); }
#vera-app .cw-controls { min-width: 0; border: 0; padding: 0; margin: 0; }
#vera-app .cw-card.cw-editor, #vera-app .cw-card.cw-detail { max-width: 1040px; margin-left: auto; margin-right: auto; }
#vera-app .cw-resolution-choice { border: 1px solid var(--vera-border); border-radius: 12px; padding: 14px 16px; background: rgba(13,92,99,.045); }
#vera-app .cw-resolution-choice label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
#vera-app .cw-resolution-choice input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--vera-brand); }
#vera-app .cw-resolution-choice small { display: block; color: var(--vera-muted); margin-top: 4px; line-height: 1.5; }
#vera-app .cw-optional { border-top: 1px solid var(--vera-border); padding-top: 14px; }
#vera-app .cw-optional > summary, #vera-app details.cw-history > summary { cursor: pointer; font-weight: 600; color: var(--vera-brand); }
#vera-app .cw-optional > .cw-grid { margin-top: 18px; }
#vera-app .cw-detail-actions, #vera-app .cw-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#vera-app .cw-detail-actions { margin-top: 22px; }
#vera-app .cw-row-actions { min-width: 90px; }
#vera-app .cw-detail-actions select { padding: 11px 12px; max-width: 100%; border: 1px solid var(--vera-border); border-radius: 12px; background: var(--vera-surface-strong); color: var(--vera-text); }
#vera-app .cw-action-form h4 { margin: 10px 0; }
#vera-app .cw-resolution span { font-size: 12px; line-height: 1.8; }
#vera-app .cw-hero, #vera-app .cw-card { border: 1px solid var(--vera-border); border-radius: 20px; padding: 24px; background: var(--vera-surface-strong); box-shadow: var(--vera-shadow); margin: 0 0 20px; }
#vera-app .cw-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; background: linear-gradient(120deg, rgba(13,92,99,.08), var(--vera-surface-strong) 70%); }
#vera-app .cw-hero h3, #vera-app .cw-card h3 { margin: 7px 0 8px; font-size: 23px; }
#vera-app .cw-hero p, #vera-app .cw-card-head p { margin: 0; color: var(--vera-muted); line-height: 1.6; }
#vera-app .cw-kicker { color: var(--vera-brand); text-transform: uppercase; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
#vera-app .cw-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
#vera-app .cw-stat { padding: 20px; border: 1px solid var(--vera-border); border-radius: 16px; background: var(--vera-surface-strong); color: var(--vera-text); text-align: left; cursor: pointer; }
#vera-app .cw-stat strong { display: block; font-size: 30px; line-height: 1.2; margin-bottom: 6px; color: var(--vera-brand); }
#vera-app .cw-stat span { color: var(--vera-muted); font-size: 13px; }
#vera-app .cw-toolbar, #vera-app .cw-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
#vera-app .cw-toolbar { align-items: end; }
#vera-app .cw-toolbar > .cw-field { min-width: 260px; }
#vera-app .cw-filters, #vera-app .cw-badges { display: flex; flex-wrap: wrap; gap: 7px; }
#vera-app .cw-filters { margin-bottom: 14px; }
#vera-app .cw-filter { padding: 9px 13px; color: var(--vera-muted); background: transparent; border: 1px solid var(--vera-border); border-radius: 20px; font-size: 12px; cursor: pointer; }
#vera-app .cw-filter.is-active, #vera-app .cw-toolbar .is-active { color: var(--vera-brand); background: rgba(13,92,99,.09); border-color: rgba(13,92,99,.25); }
#vera-app .cw-table-wrap { overflow-x: auto; border: 1px solid var(--vera-border); border-radius: 16px; background: var(--vera-surface-strong); }
#vera-app .cw-table { border-collapse: collapse; width: 100%; min-width: 1040px; font-size: 13px; }
#vera-app .cw-table th { color: var(--vera-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: rgba(13,92,99,.035); text-align: left; padding: 16px; white-space: nowrap; }
#vera-app .cw-table td { padding: 17px 16px; border-top: 1px solid var(--vera-border); vertical-align: top; line-height: 1.55; }
#vera-app .cw-table td:first-child { white-space: nowrap; }
#vera-app .cw-table small { display: block; color: var(--vera-muted); margin-top: 6px; }
#vera-app .cw-excerpt { min-width: 155px; max-width: 310px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#vera-app .cw-badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 20px; background: rgba(13,92,99,.08); color: var(--vera-brand); font-size: 11px; font-weight: 650; white-space: nowrap; }
#vera-app .cw-badge.awaiting_review { background: rgba(243,167,18,.14); color: #805400; }
#vera-app .cw-badge.resolved { background: rgba(19,121,91,.1); color: var(--vera-success); }
#vera-app .cw-badge.danger { background: rgba(180,35,24,.08); color: var(--vera-danger); }
#vera-app .cw-badge.muted, #vera-app .cw-badge.legacy { color: var(--vera-muted); background: rgba(95,111,134,.08); }
#vera-app .cw-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 22px; }
#vera-app .cw-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; }
#vera-app .cw-wide { grid-column: 1 / -1; }
#vera-app .cw-field input:not([type=hidden]), #vera-app .cw-field select, #vera-app .cw-field textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--vera-border); background: var(--vera-surface-strong); color: var(--vera-text); border-radius: 10px; padding: 11px 12px; font: inherit; font-weight: 400; line-height: 1.5; }
#vera-app .cw-field textarea { resize: vertical; }
#vera-app .cw-field input:focus, #vera-app .cw-field textarea:focus, #vera-app .cw-field select:focus { outline: 2px solid rgba(13,92,99,.3); outline-offset: 1px; }
#vera-app .cw-picker { position: relative; }
#vera-app .cw-picker-menu { position: absolute; z-index: 15; top: 100%; left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--vera-surface-strong); border: 1px solid var(--vera-border); box-shadow: var(--vera-shadow); border-radius: 10px; margin-top: 4px; }
#vera-app .cw-picker-menu [role=option] { padding: 11px 13px; cursor: pointer; }
#vera-app .cw-picker-menu [role=option]:hover, #vera-app .cw-picker-menu [aria-selected=true] { background: rgba(13,92,99,.08); }
#vera-app .cw-picker-menu span { display: block; font-size: 11px; color: var(--vera-muted); font-weight: 400; margin-top: 3px; }
#vera-app .cw-picker-menu p { padding: 10px; font-weight: 400; }
#vera-app .cw-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--vera-border); margin-bottom: 20px; }
#vera-app .cw-summary span { display: block; color: var(--vera-muted); font-size: 12px; margin-bottom: 6px; }
#vera-app .cw-summary strong { font-size: 14px; }
#vera-app .cw-prose { margin: 16px 0; font-size: 14px; }
#vera-app .cw-prose p, #vera-app .cw-history li > p, #vera-app .cw-change p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; margin: 6px 0; }
#vera-app .cw-outcome, #vera-app .cw-source { background: rgba(13,92,99,.035); border: 1px solid var(--vera-border); border-radius: 14px; padding: 4px 18px; margin: 16px 0; }
#vera-app .cw-action-form { padding-top: 16px; border-top: 1px solid var(--vera-border); margin-top: 24px; }
#vera-app .cw-action-form > .vera-btn, #vera-app #cw-account-form > .vera-btn { margin-top: 18px; }
#vera-app .cw-help, #vera-app .cw-retention { color: var(--vera-muted); line-height: 1.65; font-size: 12px; font-weight: 400; }
#vera-app .cw-retention { margin: 20px 4px; }
#vera-app .cw-alert { border: 1px solid var(--vera-border); border-radius: 12px; padding: 14px 18px; background: rgba(243,167,18,.09); font-size: 14px; line-height: 1.6; }
#vera-app .cw-alert.danger { color: var(--vera-danger); background: rgba(180,35,24,.06); }
#vera-app .cw-alert.success, #vera-app .cw-resolution { color: var(--vera-success); background: rgba(19,121,91,.07); border-radius: 10px; padding: 12px; }
#vera-app .cw-history { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--vera-border); }
#vera-app .cw-history details { border: 1px solid var(--vera-border); border-radius: 10px; padding: 14px; margin: 10px 0; font-size: 13px; }
#vera-app .cw-history summary { cursor: pointer; font-weight: 600; }
#vera-app .cw-history ol { list-style: none; margin: 20px 0 0; padding: 0; }
#vera-app .cw-history li { border-left: 3px solid rgba(13,92,99,.18); margin: 0 0 16px; padding: 4px 0 4px 17px; font-size: 13px; }
#vera-app .cw-event-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
#vera-app .cw-event-head span, #vera-app .cw-change p span { color: var(--vera-muted); font-size: 12px; }
#vera-app .cw-change { padding-top: 12px; }
#vera-app .cw-empty { padding: 32px; text-align: center; color: var(--vera-muted); }
@media (max-width: 800px) {
  #vera-app .cw-stats, #vera-app .cw-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #vera-app .cw-hero, #vera-app .cw-toolbar, #vera-app .cw-card-head { flex-direction: column; align-items: stretch; }
  #vera-app .cw-grid { grid-template-columns: minmax(0,1fr); }
  #vera-app .cw-card, #vera-app .cw-hero { padding: 18px; }
  #vera-app .cw-toolbar > .cw-field { min-width: 0; }
}

/* Staff evidence and renewal review use the shared Vera palette. */
.vera-renewals { max-width:1180px; margin:0 auto; color:var(--vera-text); padding-bottom:32px; }
.vera-renewal-heading { max-width:1180px; margin:0 auto 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.vera-renewal-heading h2 { margin:6px 0; font-size:30px; letter-spacing:-.8px; }
.vera-renewal-heading p,.vera-renewal-muted,.vera-renewal-footnote { color:var(--vera-muted); line-height:1.6; }
.vera-renewal-eyebrow { color:var(--vera-brand); font-size:11px; font-weight:800; letter-spacing:1.5px; }
#vera-app .vera-renewal-secondary { background:var(--vera-surface-strong); border:1px solid var(--vera-border); color:var(--vera-brand-strong); box-shadow:none; }
.vera-renewal-hero { padding:25px 28px; border-radius:22px; background:linear-gradient(120deg,rgba(13,92,99,.10),rgba(243,167,18,.09)); border:1px solid var(--vera-border); display:flex; align-items:center; gap:24px; justify-content:space-between; margin-bottom:22px; }
.vera-renewal-hero h3 { margin:0 0 8px; font-size:21px; }
.vera-renewal-hero p { margin:0; max-width:710px; line-height:1.65; color:var(--vera-muted); }
.vera-renewal-hero button { flex-shrink:0; }
.vera-renewal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.vera-renewal-stats>div { background:var(--vera-surface-strong); border:1px solid var(--vera-border); border-radius:18px; padding:20px 24px; display:flex; flex-direction:column; gap:6px; }
.vera-renewal-stats strong { font-size:30px; letter-spacing:-.6px; }
.vera-renewal-stats span { color:var(--vera-muted); font-size:13px; }
.vera-renewal-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:6px; border:1px solid var(--vera-border); background:rgba(255,255,255,.55); border-radius:16px; }
#vera-app .vera-renewal-tabs button { border:0; border-radius:11px; padding:11px 15px; background:transparent; color:var(--vera-muted); cursor:pointer; font-weight:650; }
#vera-app .vera-renewal-tabs button.is-active { background:var(--vera-brand-strong); color:white; }
.vera-renewal-tabs span { margin-left:5px; opacity:.8; }
.vera-renewal-filters,.vera-renewal-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.vera-renewal-filters { margin:20px 0; }
.vera-renewals label { display:flex; flex-direction:column; gap:8px; margin-bottom:15px; font-weight:650; }
.vera-renewals input:not([type=checkbox]),.vera-renewals select,.vera-renewals textarea { width:100%; padding:12px; border:1px solid var(--vera-border); border-radius:11px; background:var(--vera-surface-strong); color:var(--vera-text); min-height:44px; }
.vera-renewals textarea { resize:vertical; }
.vera-renewals input:disabled { opacity:.55; }
.vera-renewals fieldset { margin:0; padding:0; border:0; min-width:0; }
.vera-renewals .vera-renewal-checkbox { flex-direction:row; align-items:center; font-weight:400; }
.vera-renewals .vera-renewal-checkbox input { width:20px; height:20px; accent-color:var(--vera-brand); }
.vera-renewal-list { display:grid; gap:12px; }
.vera-renewal-card { background:var(--vera-surface-strong); border:1px solid var(--vera-border); border-radius:18px; padding:21px 23px; display:flex; align-items:center; gap:24px; justify-content:space-between; }
.vera-renewal-card-main { min-width:0; flex:1; }
.vera-renewal-card h4 { margin:0; font-size:16px; }
.vera-renewal-card p { color:var(--vera-muted); margin:8px 0 0; line-height:1.55; overflow-wrap:anywhere; }
.vera-renewal-card-top { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.vera-renewal-card-actions,.vera-renewal-actions { display:flex; gap:9px; flex-wrap:wrap; }
.vera-renewal-badge { display:inline-flex; padding:6px 10px; border-radius:99px; font-size:11px; font-weight:750; background:#f1f4f6; color:var(--vera-muted); }
.vera-renewal-badge.is-blue { background:#eaf1fb; color:#2159a6; }
.vera-renewal-badge.is-green { background:#e8f5ee; color:#13795b; }
.vera-renewal-badge.is-amber { background:#fff4dc; color:#866000; }
.vera-renewal-section-title { margin:28px 0 14px; }
.vera-renewal-section-title span { color:var(--vera-muted); font-size:14px; margin-left:6px; }
.vera-renewal-panel { background:var(--vera-surface-strong); border:1px solid var(--vera-border); border-radius:20px; padding:26px; margin:22px 0; scroll-margin-top:18px; }
.vera-renewal-panel h3 { margin:0 0 16px; }
.vera-renewal-panel p { line-height:1.6; }
.vera-renewal-evidence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
.vera-renewal-evidence>div { padding:18px; background:var(--vera-bg); border-radius:14px; overflow-wrap:anywhere; }
.vera-renewal-note { margin-top:12px; padding:12px 14px; border-left:3px solid var(--vera-accent); background:#fff9ed; line-height:1.6; overflow-wrap:anywhere; }
.vera-renewal-note small { display:block; margin-top:5px; color:var(--vera-muted); }
.vera-renewal-shifts { padding:22px 0; margin-top:18px; border-top:1px solid var(--vera-border); }
.vera-renewal-history { padding-left:22px; }
.vera-renewal-history li { margin-bottom:15px; color:var(--vera-muted); }
.vera-renewal-history p { margin:5px 0; }
.vera-renewal-empty { padding:32px; text-align:center; border:1px dashed var(--vera-border); border-radius:16px; color:var(--vera-muted); }
.vera-renewal-message,.vera-renewal-error { padding:15px 18px; border-radius:13px; margin:0 0 20px; line-height:1.6; background:#e8f5ee; color:#13795b; }
.vera-renewal-error { background:#fff0eb; color:#9b2c20; }
.vera-renewal-footnote { font-size:12px; margin-top:22px; }
.vera-mobile-shell .vera-renewal-hero { background:var(--vera-mobile-theme-gradient); }
#vera-app .vera-mobile-shell .vera-renewal-hero h3,.vera-mobile-shell .vera-renewal-hero p { color:white; }
#vera-app .vera-mobile-shell .vera-renewal-hero .vera-btn { background:white; color:var(--vera-mobile-theme-accent-strong); box-shadow:none; }
@media(max-width:700px) {
 .vera-renewal-heading { align-items:flex-start; flex-direction:column; }
 .vera-renewal-hero { padding:23px; flex-direction:column; align-items:stretch; gap:20px; }
 .vera-renewal-card { padding:19px; flex-direction:column; align-items:stretch; gap:16px; }
 .vera-renewal-card-top { align-items:flex-start; }
 .vera-renewal-card-actions { width:100%; }
 .vera-renewal-card-actions button { flex:1; }
 .vera-renewal-filters,.vera-renewal-form-grid,.vera-renewal-evidence { grid-template-columns:1fr; gap:0; }
 .vera-renewal-evidence { gap:12px; }
 .vera-renewal-panel { padding:20px; }
 .vera-renewal-stats { gap:8px; }
 .vera-renewal-stats>div { padding:14px 12px; }
 .vera-renewal-stats span { font-size:11px; }
 #vera-app .vera-renewals input,#vera-app .vera-renewals select,#vera-app .vera-renewals textarea { font-size:16px; }
}
#vera-app .vera-form-requests { overflow-x:auto; }
#vera-app .vera-form-requests table { width:100%; border-collapse:collapse; text-align:left; }
#vera-app .vera-form-requests th, #vera-app .vera-form-requests td { padding:14px 10px; border-bottom:1px solid var(--vera-border); vertical-align:top; }
#vera-app .vera-form-requests th { font-size:12px; color:var(--vera-muted); }
#vera-app .vera-form-requests p { font-size:12px; color:var(--vera-muted); margin:5px 0 0; line-height:1.5; }
#vera-app .vera-form-request-actions { display:flex; gap:8px; flex-wrap:wrap; min-width:150px; }
#vera-app dialog.vera-form-history { box-sizing:border-box; width:min(800px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:24px; border:1px solid var(--vera-border); border-radius:20px; background:var(--vera-surface-strong); color:var(--vera-text); box-shadow:0 24px 90px rgba(22,40,68,.22); }
#vera-app dialog.vera-form-history::backdrop { background:rgba(17,31,52,.42); }
#vera-app dialog.vera-forms-audience-dialog { width:min(540px,calc(100vw - 32px)); }
#vera-app .vera-forms-chooser-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#vera-app .vera-forms-chooser-heading h2 { margin:0; font-size:23px; line-height:1.3; }
#vera-app .vera-forms-chooser-close { flex:none; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--vera-muted); font-size:25px; cursor:pointer; }
#vera-app .vera-forms-chooser-close:hover { background:var(--vera-bg); }
#vera-app .vera-forms-audience-dialog > p, #vera-app .vera-forms-heading p { color:var(--vera-muted); line-height:1.6; }
#vera-app .vera-forms-audience-dialog > p { margin:12px 0 22px; }
#vera-app .vera-forms-audience-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#vera-app .vera-forms-audience-choice { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px; border:1px solid var(--vera-border); border-radius:16px; background:var(--vera-surface-strong); color:var(--vera-text); text-align:left; cursor:pointer; }
#vera-app .vera-forms-audience-choice:hover { border-color:var(--vera-brand); background:#f0f8f7; }
#vera-app .vera-forms-audience-choice strong { font-size:18px; }
#vera-app .vera-forms-audience-choice > span:last-child { color:var(--vera-muted); line-height:1.5; }
#vera-app .vera-forms-audience-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:4px; border-radius:12px; background:#e9f4f3; color:var(--vera-brand); }
#vera-app .vera-forms-audience-icon svg { width:25px; height:25px; }
#vera-app .vera-forms-audience-switch { display:inline-flex; gap:4px; max-width:100%; margin-bottom:18px; padding:4px; border:1px solid var(--vera-border); border-radius:14px; background:var(--vera-bg); }
#vera-app .vera-forms-audience-switch button { min-height:42px; padding:10px 22px; border:0; border-radius:10px; background:transparent; color:var(--vera-muted); font-weight:700; cursor:pointer; }
#vera-app .vera-forms-audience-switch button[aria-pressed="true"] { background:var(--vera-brand); color:#fff; box-shadow:0 3px 8px rgba(11,57,84,.12); }
#vera-app .vera-forms-audience-switch button:hover:not([aria-pressed="true"]) { background:var(--vera-surface-strong); color:var(--vera-text); }
#vera-app .vera-forms-audience-choice:focus-visible, #vera-app .vera-forms-audience-switch button:focus-visible, #vera-app .vera-forms-chooser-close:focus-visible { outline:3px solid var(--vera-brand); outline-offset:3px; }
@media (max-width:600px) {
  #vera-app .vera-forms-template-layout { flex-direction:column; }
  #vera-app .vera-forms-template-layout > div { width:100%; }
}
@media (max-width:480px) {
  #vera-app .vera-forms-audience-choices { grid-template-columns:minmax(0,1fr); }
  #vera-app .vera-forms-audience-choice { padding:16px; gap:8px; }
  #vera-app .vera-forms-audience-switch { display:flex; }
  #vera-app .vera-forms-audience-switch button { flex:1; padding:10px 14px; }
}
#vera-app .vera-form-history-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
#vera-app .vera-form-history-head h3 { font-size:22px; margin:0; }
#vera-app .vera-form-history-head p { color:var(--vera-muted); font-size:13px; overflow-wrap:anywhere; }
#vera-app .vera-form-history-head .vera-form-eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--vera-brand); margin:0 0 7px; }
#vera-app .vera-form-history-summary { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:14px; margin:12px 0 20px; border-radius:12px; background:var(--vera-bg); font-size:13px; }
#vera-app .vera-form-history-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin:0 0 22px; }
#vera-app .vera-form-history-grid dt { color:var(--vera-muted); font-size:12px; margin-bottom:5px; }
#vera-app .vera-form-history-grid dd { margin:0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
#vera-app .vera-form-history-note, #vera-app .vera-form-history-reference { color:var(--vera-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
#vera-app .vera-form-history-document { display:flex; justify-content:space-between; gap:12px; align-items:center; border:1px solid var(--vera-border); border-radius:12px; padding:14px; margin:8px 0; font-size:13px; }
#vera-app .vera-form-history-document p { color:var(--vera-muted); font-size:12px; margin:5px 0 0; }
#vera-app .vera-form-history-reference { margin:14px 0; }
#vera-app .vera-form-history-reference summary { cursor:pointer; }
#vera-app .vera-form-history-actions { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--vera-border); padding-top:18px; margin-top:20px; }
@media (max-width:600px) {
  #vera-app dialog.vera-form-history { padding:18px; }
  #vera-app .vera-form-history-grid { grid-template-columns:1fr; gap:14px; }
  #vera-app .vera-form-history-document { flex-direction:column; align-items:flex-start; }
}
/* Invoice delivery uses the finance palette and keeps recovery reachable on narrow screens. */
#vera-app .vera-delivery-field > label { font-size:13px; font-weight:700; color:var(--vera-text); }
#vera-app .vera-delivery-field input, #vera-app .vera-delivery-field textarea {
  box-sizing:border-box; padding:11px 12px; border:1px solid var(--vera-border);
  border-radius:10px; background:var(--vera-surface-strong); color:var(--vera-text); font:inherit; font-size:13px;
}
#vera-app .vera-delivery-field input:focus, #vera-app .vera-delivery-field textarea:focus {
  outline:2px solid var(--vera-brand); outline-offset:2px;
}
@media (max-width:700px) {
  #vera-app table.vera-delivery-ledger { min-width:0; width:100%; }
  #vera-app .vera-delivery-ledger thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #vera-app .vera-delivery-ledger tbody { display:block; }
  #vera-app .vera-delivery-ledger tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px 4px; border-top:1px solid var(--vera-border); }
  #vera-app .vera-delivery-ledger td { display:block; padding:8px 10px; border:0; min-width:0; white-space:normal; overflow-wrap:anywhere; }
  #vera-app .vera-delivery-ledger td::before { content:attr(data-label); display:block; color:var(--vera-muted); font-size:10px; font-weight:800; text-transform:uppercase; margin-bottom:7px; }
  #vera-app .vera-delivery-ledger td:last-child { grid-column:1 / -1; }
}
/* Service-date pricing review, scoped to the invoice preview. */
/* Outstanding service report. */
#vera-app .vera-unbilled-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:20px; margin-bottom:18px; align-items:end; }
#vera-app .vera-unbilled-filters label { display:grid; gap:7px; font-size:13px; font-weight:700; color:var(--vera-text); }
#vera-app .vera-unbilled-filters input:not([type=checkbox]), #vera-app .vera-unbilled-filters select { width:100%; min-width:0; box-sizing:border-box; font:inherit; color:var(--vera-text); padding:11px; border-radius:10px; background:var(--vera-surface-strong); border:1px solid var(--vera-border); }
#vera-app .vera-unbilled-filters .vera-unbilled-checkbox { display:flex; align-items:center; grid-column:span 2; }
#vera-app .vera-unbilled-summary { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; padding:22px; margin-bottom:18px; }
#vera-app .vera-unbilled-value { display:block; font-size:27px; font-weight:800; color:var(--vera-text); margin:8px 0; }
#vera-app .vera-unbilled-summary p, #vera-app .vera-unbilled-list p { color:var(--vera-muted); font-size:13px; }
#vera-app .vera-unbilled-age { text-align:left; padding:20px; cursor:pointer; color:var(--vera-text); font:inherit; border:1px solid var(--vera-border); }
#vera-app .vera-unbilled-age.is-selected { outline:2px solid var(--vera-brand); }
#vera-app .vera-unbilled-age small { color:var(--vera-muted); }
#vera-app .vera-unbilled-scope { margin:16px 0; font-size:12px; color:var(--vera-muted); }
#vera-app .vera-unbilled-list { padding:20px; }
#vera-app table.vera-unbilled-table { width:100%; border-collapse:collapse; font-size:13px; }
#vera-app .vera-unbilled-table th { text-align:left; color:var(--vera-muted); font-size:11px; text-transform:uppercase; }
#vera-app .vera-unbilled-table th, #vera-app .vera-unbilled-table td { padding:14px 9px; border-bottom:1px solid var(--vera-border); vertical-align:top; }
#vera-app .vera-unbilled-table small { display:block; margin-top:7px; color:var(--vera-muted); line-height:1.5; }
#vera-app .vera-unbilled-table td:nth-child(5) { max-width:300px; }
#vera-app .vera-unbilled-table .vera-btn { font-size:12px; padding:9px 11px; }
#vera-app .vera-unbilled-pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:20px; }
#vera-app .vera-unbilled-footnote { font-size:12px; color:var(--vera-muted); line-height:1.6; }
@media (max-width:900px) {
  #vera-app .vera-unbilled-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #vera-app .vera-unbilled-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #vera-app .vera-unbilled-table tbody { display:block; }
  #vera-app .vera-unbilled-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--vera-border); padding:12px 0; }
  #vera-app .vera-unbilled-table td { display:block; min-width:0; border:0; overflow-wrap:anywhere; }
  #vera-app .vera-unbilled-table td::before { content:attr(data-label); display:block; margin-bottom:6px; font-size:10px; text-transform:uppercase; font-weight:800; color:var(--vera-muted); }
  #vera-app .vera-unbilled-table td:nth-child(5), #vera-app .vera-unbilled-table td:last-child { grid-column:1/-1; max-width:none; }
}
@media (max-width:500px) {
  #vera-app .vera-unbilled-filters { grid-template-columns:1fr; }
  #vera-app .vera-unbilled-filters .vera-unbilled-checkbox { grid-column:auto; }
  #vera-app .vera-kpi-grid.vera-unbilled-ageing { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #vera-app .vera-unbilled-age { padding:16px; }
  #vera-app .vera-unbilled-age .vera-unbilled-value { font-size:20px; overflow-wrap:anywhere; }
}
#vera-app .vera-invoice-pricing-review { padding:18px; border:1px solid var(--vera-border); border-radius:18px; background:var(--vera-surface-strong); color:var(--vera-text); margin-bottom:16px; }
#vera-app .vera-invoice-pricing-review p { margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--vera-muted); }
#vera-app .vera-invoice-pricing-issue { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--vera-border); }
#vera-app .vera-invoice-pricing-issue > span { flex:1 1 280px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
#vera-app .vera-invoice-rate-source { color:var(--vera-brand); font-size:11px; line-height:1.5; margin-top:6px; }
@media (max-width:700px) {
  #vera-app .vera-finance-preview-dialog .vera-invoice-brandbar { flex-direction:column; }
  #vera-app .vera-finance-preview-dialog .vera-invoice-brandbar > div { width:100%; }
  #vera-app .vera-finance-preview-dialog .vera-invoice-provider { overflow-wrap:anywhere; }
}

/* Staff invitation form: shared with the bundled staff screens. */
#vera-app .vera-staff-create { margin-bottom:24px; padding:24px; border:1px solid var(--vera-border, #dce5e6); border-radius:18px; background:var(--vera-surface, #fff); }
#vera-app .vera-staff-create-head { margin-bottom:22px; }
#vera-app .vera-staff-create-head h3 { margin:0 0 7px; font-size:20px; color:var(--vera-text, #173b46); }
#vera-app .vera-staff-create-head p, #vera-app .vera-staff-create-hint { margin:8px 0 0; color:var(--vera-muted, #61717a); font-size:13px; line-height:1.55; }
#vera-app .vera-staff-create-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 26px; }
#vera-app .vera-staff-create-section { min-width:0; margin:0; padding:0; border:0; }
#vera-app .vera-staff-create-section > h4 { grid-column:1/-1; margin:0; padding:0 0 14px; font-size:14px; line-height:20px; font-weight:700; color:var(--vera-text, #173b46); }
#vera-app .vera-staff-create-section + .vera-staff-create-section { border-left:1px solid var(--vera-border, #dce5e6); padding-left:26px; }
#vera-app .vera-staff-create-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
#vera-app .vera-staff-create-grid > label { display:flex; flex-direction:column; justify-content:flex-end; line-height:20px; margin:0; min-width:0; font-size:13px; font-weight:600; color:var(--vera-text, #173b46); }
#vera-app .vera-staff-create-optional { font-weight:400; font-size:11px; color:var(--vera-muted, #61717a); }
#vera-app .vera-staff-create-grid > label > input, #vera-app .vera-staff-create-grid > label > select { display:block; box-sizing:border-box; width:100%; min-width:0; height:44px; margin-top:7px; padding:10px 12px; border:1px solid var(--vera-border, #dce5e6); border-radius:10px; background:var(--vera-surface, #fff); color:var(--vera-text, #173b46); font:inherit; font-weight:400; }
#vera-app .vera-staff-create input:focus-visible, #vera-app .vera-staff-create select:focus-visible { outline:2px solid var(--vera-brand, #24796f); outline-offset:2px; }
#vera-app .vera-staff-type-choice { grid-column:1/-1; align-self:end; padding:0; margin:0; border:0; min-width:0; }
#vera-app .vera-staff-type-choice legend { line-height:20px; padding:0 0 7px; font-weight:600; font-size:13px; }
#vera-app .vera-staff-type-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
#vera-app .vera-staff-type-options label { display:flex; box-sizing:border-box; min-width:0; height:44px; margin:0; line-height:20px; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--vera-border, #dce5e6); border-radius:10px; cursor:pointer; font-size:14px; font-weight:600; }
#vera-app .vera-staff-type-options label:has(input:checked) { border-color:var(--vera-brand, #24796f); background:var(--vera-brand-soft, #eaf5f1); }
#vera-app .vera-staff-type-options input { width:16px; height:16px; margin:0; flex:none; accent-color:var(--vera-brand, #24796f); }
#vera-app .vera-staff-create-notes { grid-column:1/-1; }
/* Both sections use the same tracks, so wrapping a label cannot stagger the inputs. */
@supports (grid-template-rows:subgrid) {
  @media (min-width:1001px) {
    #vera-app .vera-staff-create-columns { grid-template-rows:repeat(4,auto); }
    #vera-app .vera-staff-create-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:subgrid; grid-row:1/span 4; column-gap:16px; }
    #vera-app .vera-staff-create-section > h4 { padding-bottom:0; }
    #vera-app .vera-staff-create-grid { display:contents; }
    #vera-app .vera-staff-create-notes > .vera-staff-create-hint:first-child { margin-top:0; }
  }
}
#vera-app .vera-staff-create-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:20px; margin-top:22px; border-top:1px solid var(--vera-border, #dce5e6); }
#vera-app .vera-staff-create-footer [role="status"] { flex:1; font-size:13px; color:var(--vera-muted, #61717a); }
#vera-app .vera-staff-create-footer .vera-btn { margin:0; white-space:normal; }
#vera-app .vera-staff-create:has(button:disabled) { cursor:progress; }
@media (max-width:1000px) {
  #vera-app .vera-staff-create-columns { grid-template-columns:1fr; gap:24px; }
  #vera-app .vera-staff-create-section + .vera-staff-create-section { border-left:0; padding-left:0; }
}
@media (max-width:520px) {
  #vera-app .vera-staff-create { padding:18px; }
  #vera-app .vera-staff-create-grid { grid-template-columns:1fr; }
  #vera-app .vera-staff-create-footer .vera-btn { width:100%; }
  #vera-app .vera-staff-create-grid > label > input, #vera-app .vera-staff-create-grid > label > select { font-size:16px; }
}