:root {
  color-scheme: dark;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: #0a0d0b;
  color: #d7e2da;
  --pilot-background: #0a0d0b;
  --pilot-surface: #101612;
  --pilot-foreground: #d7e2da;
  --pilot-muted: #94a299;
  --pilot-accent: #7ef0a8;
  --pilot-divider: #28332c;
  --pilot-focus: #b2ffca;
}

* { box-sizing: border-box; }

/* Keep Portal typography at a consistent regular weight. */
body * { font-weight: 400 !important; }

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: start center;
  padding: 4rem 2rem 2rem;
  background: var(--pilot-background);
  color: var(--pilot-foreground);
}

body.portal-home { place-items: center; padding: 2rem; }
body.portal-login { place-items: center; padding: 2rem; }
body.portal-bootstrap { place-items: center; padding: 2rem; }
body.portal-invitation { place-items: center; padding: 2rem; }
body.portal-error { place-items: center; padding: 2rem; }

main { width: min(100%, 52rem); }
.prompt { margin: 0; color: var(--pilot-accent); font-size: 0.875rem; }
.prompt-link { color: inherit; text-decoration: none; }
.home-cursor {
  display: inline-block;
  width: 0.35em;
  height: 0.85em;
  margin-left: 0.5rem;
  vertical-align: -0.08em;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
:focus-visible { outline: 2px solid var(--pilot-focus); outline-offset: 3px; }

.portal-card {
  width: min(100%, 30rem);
  margin: 2rem auto 0;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid var(--pilot-divider);
  border-radius: 0.85rem;
  background: var(--pilot-surface);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
}

.bootstrap-card { width: min(100%, 30rem); margin: 0 auto; }
.invitation-card { width: min(100%, 30rem); margin: 0 auto; }
.invitation-card .prompt { margin-bottom: 1rem; }
.invitation-card .error-message,
.invitation-card .success-message,
.invitation-card .unsupported-message,
.invitation-sign-in { font-size: 0.85rem; }
.invitation-card .error-message.cancelled-message { color: var(--pilot-accent); }
.bootstrap-card .prompt { margin-bottom: 1rem; }
.portal-return { position: fixed; top: clamp(1rem, 3vw, 2rem); left: clamp(1rem, 3vw, 2rem); margin: 0; }
.portal-return a { color: var(--pilot-accent); font-size: 0.9rem; text-decoration: none; }
.portal-return a:hover { color: #fff !important; }
.sign-in-card { width: min(100%, 30rem); margin: 0 auto; }
.sign-in-card .prompt { margin-bottom: 1rem; }
.message-page { width: min(100%, 30rem); margin: 0 auto; }
.message-page .prompt { margin-bottom: 1rem; }

.portal-card .prompt { margin-bottom: 0.75rem; }
.portal-card h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.2; }
.text-field {
  display: block;
  width: 100%;
  min-height: 2.9rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--pilot-divider);
  border-radius: 0.4rem;
  background: #111713;
  color: var(--pilot-foreground);
  font: inherit;
}
.text-field:focus-visible { border-color: #45584a; outline: none; }
/* No text field shows a clear button, including the browser's own on search fields. */
.text-field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.role-options { margin: 0 0 1rem; padding: 0; border: 0; }
.role-option { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 1.25rem 0.4rem 0; cursor: pointer; }
.role-option input {
  appearance: none;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0;
  border: 1px solid var(--pilot-accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.role-option input:checked { background: radial-gradient(circle, var(--pilot-accent) 0 42%, transparent 46%); }
.role-option input:focus-visible { outline: 2px solid var(--pilot-focus); outline-offset: 2px; }

.primary-button,
.secondary-button {
  min-height: 2.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pilot-accent);
  border-radius: 0.45rem;
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.primary-button { width: 100%; background: var(--pilot-accent); color: #101612; }
.primary-button:hover:not(:disabled) { background: #a0f7ba; border-color: #a0f7ba; }
.primary-button:disabled { cursor: not-allowed; opacity: 0.55; }
.secondary-button { background: transparent; color: var(--pilot-accent); }
.home-card .secondary-button {
  border-color: var(--pilot-divider);
  border-radius: 0.4rem;
  font-size: 0.9rem;
}
.home-card .secondary-button:hover { border-color: #a0f7ba; }
.secondary-button:hover { background: rgb(126 240 168 / 9%); }

.error-message,
.unsupported-message,
.notice {
  margin: 1rem 0 0;
  line-height: 1.55;
}

.registration-error-slot { min-height: 3.25rem; margin-top: 1rem; }
.registration-error-slot .error-message { margin: 0; }
.error-message { color: var(--pilot-accent); }
.success-message { color: var(--pilot-accent); line-height: 1.55; }
.unsupported-message { color: var(--pilot-accent); }
.notice {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
}
.message-panel {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0;
  color: var(--pilot-accent);
  font-size: 0.85rem;
}

.home-card { width: min(100%, 30rem); margin: 0 auto; }
.home-card .prompt { margin-bottom: 1rem; }
.application-nav { display: grid; gap: 0.6rem; margin: 0 0 0.6rem; }
.application-card { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.8rem; padding: 0.8rem 0.9rem; border: 1px solid var(--pilot-divider); border-radius: 0.4rem; text-decoration: none; }
.application-card:hover { background: rgb(126 240 168 / 7%); border-color: #a0f7ba; }
.application-card strong, .application-card small { display: block; }
.application-card-arrow { position: absolute; top: 0.8rem; right: 0.9rem; color: var(--pilot-accent); }
.application-card strong { font-size: 0.9rem; }
.application-card small { margin-top: 0.2rem; font-size: 0.72rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pilot-divider);
  border-radius: 0.4rem;
  background: transparent;
  color: var(--pilot-accent);
  font: inherit;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.text-link:hover { background: rgb(126 240 168 / 9%); }

body.portal-support { zoom: 0.9; place-items: start center; padding: clamp(3rem, 5vw, 4rem) 1.25rem 2rem; }
body.portal-support .portal-return,
body.portal-support .support-page > .prompt { zoom: 1.111111; }
body.portal-support main { width: min(100%, 52rem); }
.support-page { width: min(100%, 46rem); margin: 0 auto; }
.support-page > .prompt { margin-bottom: 0.75rem; }
body.portal-support-ticket .support-page > .prompt { text-align: right; }
body.portal-support-ticket .support-page { padding-top: 1.5rem; }
body.portal-support-ticket .support-page > .prompt {
  position: fixed;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  margin: 0;
}
.support-page h1 { margin: 0 0 1.25rem; line-height: 1.3; }
.support-ticket-list { display: grid; gap: 0.75rem; }
.support-ticket-row { display: block; padding: 1rem; border: 1px solid var(--pilot-divider); border-radius: 0.45rem; color: inherit; text-decoration: none; }
.support-ticket-row:hover { background: rgb(126 240 168 / 7%); border-color: #a0f7ba; }
.support-ticket-row:focus-visible { outline: 2px solid var(--pilot-focus); outline-offset: 2px; }
.support-ticket-heading, .support-detail-heading, .support-message-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.support-ticket-subject { margin: 0.6rem 0; overflow-wrap: anywhere; }
.support-ticket-activity, .support-reference { margin: 0.65rem 0 0; }
.support-team-filters { display: flex; gap: 0.55rem; margin: 2rem 0; }
body.portal-support .support-team-filters a { color: #4b9e69 !important; text-decoration: none; }
body.portal-support .support-team-filters a:hover { color: #fff !important; }
.support-team-contact { margin: 0.45rem 0 0; overflow-wrap: anywhere; }
.support-team-detail > .support-team-contact + .support-ticket-activity { margin-top: 1.75rem; }
.support-status { text-transform: lowercase; }
.support-status--closed { color: var(--pilot-muted) !important; }
.support-replied { margin: 0.75rem 0 0; }
.support-empty { margin: 1.5rem 0 0; }
.support-list-action { margin: 1.5rem 0; }
.support-list-action .secondary-button,
body.portal-support .support-form > .secondary-button,
body.portal-support .support-ticket-actions > .secondary-button,
body.portal-support .support-transition-form > .secondary-button { border-color: var(--pilot-divider); }
.support-list-action .secondary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.support-list-action .secondary-button:hover,
body.portal-support .support-form > .secondary-button:hover:not(:disabled),
body.portal-support .support-ticket-actions > .secondary-button:hover:not(:disabled),
body.portal-support .support-transition-form > .secondary-button:hover:not(:disabled) { border-color: #a0f7ba; }
.support-reference { margin: 0 0 0.5rem; }
.support-detail-heading { align-items: flex-start; }
.support-detail-heading h1 { overflow-wrap: anywhere; }
.support-conversation { margin-top: 2rem; }
.support-conversation h2 { margin: 0 0 1rem; }
.support-message { margin: 0.75rem 0; padding: 1rem; border: 1px solid var(--pilot-divider); border-radius: 0.45rem; }
.support-message-meta { color: var(--pilot-accent); }
.support-message-meta span { color: var(--pilot-accent); }
.support-message-meta time, .support-transition time { white-space: nowrap; }
.support-message-text { margin: 0.85rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.support-attachments { margin-top: 0.5rem; }
.support-attachments:empty { display: none; }
body.portal-support .support-attachments a:hover { color: #fff !important; }
.support-transition { margin: 1rem 0; text-align: center; }
.support-transition time { display: block; margin-top: 0.3rem; }
.support-form { margin-top: 1.25rem; }
.support-form label { display: block; margin: 1rem 0 0.5rem; }
.support-form .text-field { margin-bottom: 0; }
body.portal-support .support-form[data-support-form="create"] > .secondary-button { margin-top: 0.5rem; }
.support-form input[type="file"]::file-selector-button {
  margin-right: 0.65rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--pilot-divider);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--pilot-accent);
  font: inherit;
  cursor: pointer;
}
.support-form input[type="file"]::file-selector-button:hover { border-color: #a0f7ba; }
.support-form .support-textarea { min-height: 9rem; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-field-hint { margin: 0.4rem 0 1rem; }
.support-form-feedback { margin: 1rem 0; line-height: 1.5; }
.support-form-feedback a { color: var(--pilot-accent); }
.support-reply { margin-top: 1.75rem; }
.support-reply h2 { margin-bottom: 0.75rem; }
.support-ticket-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
.support-ticket-actions > .secondary-button,
.support-ticket-actions .support-transition-form > .secondary-button { width: 100%; }
.support-transition-form { margin: 0; width: 100%; }
body.portal-support,
body.portal-support * {
  color: var(--pilot-accent) !important;
  font-size: 0.875rem !important;
}
body.portal-support .support-form > .secondary-button,
body.portal-support .support-ticket-actions > .secondary-button,
body.portal-support .support-transition-form > .secondary-button { width: 100%; }
body.portal-support .support-form > .secondary-button:disabled,
body.portal-support .support-ticket-actions > .secondary-button:disabled { cursor: not-allowed; opacity: 0.55; }

body.portal-people { place-items: center; padding: 2rem 1rem; font-size: 0.9rem; }
body.portal-people main { width: min(100%, 52rem); }
body.operator-search-page main { width: min(100%, 30rem); }
.people-card { width: min(100%, 34rem); margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.people-card:not(.people-card--with-rows) { width: min(100%, 30rem); }
.people-card h1 { margin: 0 0 1rem; line-height: 1.4; }
.people-page-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.people-page-heading .prompt { flex: 0 0 auto; margin: 0 0 1rem; transform: translateX(-0.4rem); }
.invoice-page-heading { justify-content: flex-start; }
.invoice-page-heading .prompt { transform: translateX(0.6rem); }
.admin-page-heading { display: flex; justify-content: flex-end; }
.admin-page-heading .prompt { margin: 0 5.8rem 0.75rem 0; }
.people-card .notice { margin: 0 0 1rem; padding: 0; border: 0; background: transparent; }
.people-tenant-id { margin: -0.65rem 0 1.25rem; }
.people-list { margin-top: 1.25rem; }
.people-table-wrap { overflow: visible; }
.people-table { width: 100%; border-collapse: collapse; text-align: left; }
.people-table th, .people-table td { padding: 0.75rem 0.6rem; border-bottom: 0; vertical-align: top; }
.people-table th:last-child, .people-table td:last-child { min-width: 5rem; white-space: nowrap; }
.people-table th { text-align: left; }
.invoice-number-link { color: var(--pilot-accent); text-decoration: underline; }
.people-table td:first-child > span { white-space: nowrap; }
.people-display-name { display: block; margin-top: 0.3rem; }
.people-action { min-height: 0; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.people-action:disabled { color: var(--pilot-muted); opacity: 0.45; cursor: not-allowed; }
.people-action--cancel:hover { background: transparent; color: #fff; }
.people-hint { margin: 1rem 0; }
.invite-section { width: 100%; margin: 1.5rem 0 0; padding-top: 0.3rem; }
.invite-section h2 { margin: 1rem 0 0.8rem; }
.people-card > form, .invite-section form { width: min(100%, 30rem); margin-inline: auto; }
.invite-section form { width: 100%; margin-inline: 0; }
.people-card .text-field, .people-card form > .primary-button { width: 100%; }
.people-card form > .primary-button { margin-top: 0.2rem; }
.people-table form { width: auto; }
.tenant-results { margin-top: 1.5rem; }
.tenant-results ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.tenant-result { position: relative; display: block; padding: 0.8rem 2.2rem 0.8rem 0.9rem; border: 1px solid var(--pilot-divider); border-radius: 0.4rem; color: var(--pilot-accent); text-decoration: none; transition: background-color 120ms ease; }
.tenant-result:hover, .tenant-result:focus-visible { background: rgb(126 240 168 / 7%); border-color: #a0f7ba; }
.tenant-result strong, .tenant-result small { display: block; }
.tenant-result strong { color: inherit; }
.tenant-result small { margin-top: 0.25rem; }
/* Sits on the first line, level with the Tenant name. */
.tenant-result-arrow { position: absolute; top: 0.8rem; right: 0.9rem; }
.people-card .message-panel { margin: 0 0 1rem; }

@media (max-width: 38rem) {
  body.portal-support { padding: clamp(3rem, 5vw, 4rem) 0.75rem 1.5rem; }
  .support-ticket-row, .support-message { padding: 0.8rem; }
  .support-message-meta { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .support-transition time { white-space: normal; }
  body.portal-people { padding-inline: 0.5rem; }
  .people-table th, .people-table td { padding: 0.65rem 0.35rem; white-space: nowrap; }
  .invoice-page-heading .prompt { transform: translateX(0.35rem); }
  .people-action { padding-inline: 0; }
}
body.portal-people,
body.portal-people * {
  color: var(--pilot-accent) !important;
  font-size: 0.875rem !important;
}
body.portal-people button {
  border-color: var(--pilot-divider);
  background: transparent;
  color: var(--pilot-accent);
}
body.portal-people button:hover:not(:disabled) { background: rgb(126 240 168 / 9%); border-color: #a0f7ba; }
body.portal-people a:hover { color: #fff !important; }
body.portal-people .people-table td:has(.people-action):hover,
body.portal-people .people-table td:has(.people-action):hover * { color: #fff !important; }
body.portal-people input::placeholder { color: var(--pilot-accent); opacity: 0.4; }
[hidden] { display: none !important; }

@media (max-width: 38rem) {
  body { place-items: start center; padding: 2rem 1rem; }
  .portal-card { margin-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cursor { animation: none; }
}
body.portal-home,
body.portal-home * { color: var(--pilot-accent) !important; }
body.portal-login .primary-button,
body.portal-invitation .primary-button {
  border-color: var(--pilot-divider);
  background: transparent;
  color: var(--pilot-accent);
}
body.portal-login .primary-button:hover:not(:disabled),
body.portal-invitation .primary-button:hover:not(:disabled) { background: rgb(126 240 168 / 9%); border-color: #a0f7ba; }
body.portal-bootstrap,
body.portal-bootstrap * {
  color: var(--pilot-accent) !important;
  font-size: 0.875rem !important;
}
body.portal-bootstrap input::placeholder { color: var(--pilot-accent) !important; opacity: 0.4; }
body.portal-bootstrap button {
  border-color: var(--pilot-divider);
  background: transparent;
  color: var(--pilot-accent);
}
body.portal-bootstrap button:hover:not(:disabled) { background: rgb(126 240 168 / 9%); }
/* Overrides the page-wide !important accent colour so every prompt link turns white on hover. */
body .prompt-link:hover, body .prompt-link:focus-visible { color: #fff !important; }