/* Copyright 2026 Charlotte Locas */

:root {
  --wa-color-surface-default: #19498C;
  --wa-color-surface-raised: #3B6BA6;
  --wa-color-surface-lowered: #2A4E7B;
  --wa-color-surface-border: #5183BC;


  --app-color-secondary: #118ACB;
  --app-color-secondary-hover: #1181bd;
}

:root,
.app-pane-end {
  --wa-form-control-background-color: #F5F5F5;
  --wa-form-control-value-color: #000;
  --wa-form-control-placeholder-color: #666;
}


html, body { min-height: 100%; margin: 0; padding: 0; }
body { background-color: var(--wa-color-surface-default); }

.app-main {
  padding: 0;
  height: calc(100dvh - var(--banner-height, 0px) - var(--header-height, 0px));
  overflow: hidden;
}


.app-split {
  --min: 16rem;
  --max: 40%;
  --divider-width: var(--wa-border-width-m);

  height: 100%;
}


.app-pane {
  padding: var(--wa-space-m);
  height: 100%;
  overflow: auto;
}

.app-pane-start {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 4vh, var(--wa-space-l));
}

.app-pane-end {
  container-type: inline-size;
  background-color: #fff;

  --wa-color-text-normal: #000;
}

wa-input, wa-select, wa-textarea { padding-block-start: var(--wa-space-s); }

wa-page::part(header) {
  background-color: var(--wa-color-surface-default);
  border-block-end: none;
}

wa-toast-item {
  color: #000;
  --wa-color-text-quiet: #000;
}
wa-toast-item::part(toast-item) { background-color: #fff; }
wa-toast-item::part(content) { color: #000; }

.app-action::part(base) {
  background-color: #333333;
  border-color: #333333;
  color: #fff;
}

.app-action:not([disabled]):hover::part(base) {
  background-color: #4A4A4A;
  border-color: #4A4A4A;
}

.app-action-secondary::part(base) {
  background-color: var(--app-color-secondary);
  border-color: var(--app-color-secondary);
}

.app-action-secondary:not([disabled]):hover::part(base) {
  background-color: var(--app-color-secondary-hover);
  border-color: var(--app-color-secondary-hover);
}


.app-action[disabled]::part(base) {
  background-color: var(--wa-color-neutral-fill-quiet);
  border-color: var(--wa-color-neutral-border-quiet);
  color: var(--wa-color-neutral-on-quiet);
  cursor: not-allowed;
}

.app-action-secondary[disabled]::part(base) {
  background-color: var(--wa-color-brand-fill-quiet);
  border-color: var(--wa-color-brand-border-quiet);
  color: var(--wa-color-brand-on-quiet);
}

.app-header { padding: var(--wa-space-s) var(--wa-space-m); }

.app-user::part(base) {
  background-color: transparent;
  border-color: transparent;
  color: #fff;
  justify-content: flex-start;
}

.app-user::part(label) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-user:not([disabled]):hover::part(base) {
  background-color: rgb(255 255 255 / 0.12);
}

.app-user-name {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
  height: var(--wa-form-control-height);
  padding: var(--wa-form-control-padding-block) var(--wa-form-control-padding-inline);
  overflow: hidden;
  color: #fff;
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
  line-height: var(--wa-form-control-line-height);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.login-main {
  display: grid;
  place-items: center;
  padding: var(--wa-space-xl) var(--wa-space-m);
  overflow: auto;
}

.login-layout {
  width: 100%;
  max-width: 30rem;
}

.login-title {
  margin: 0 0 var(--wa-space-l);
  color: black;
  font-size: var(--wa-font-size-3xl);
  font-weight: var(--wa-font-weight-bold);
  line-height: var(--wa-line-height-condensed);
  letter-spacing: -0.015em;
}

.login-card {
  background-color: #fff;
  border-color: transparent;
  border-radius: var(--wa-border-radius-l);
  --spacing: var(--wa-space-xl);
}

.login-heading {
  margin: 0;
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-bold);
  line-height: var(--wa-line-height-condensed);
}

.login-desc {
  margin: 0;
  color: var(--wa-color-text-quiet);
  line-height: var(--wa-line-height-normal);
}

.login-notice { margin: 0; }

.login-button { width: 100%; }

.login-button::part(base) {
  background-color: var(--app-color-secondary);
  border-color: var(--app-color-secondary);
  color: #fff;
  font-weight: var(--wa-font-weight-semibold);
}

.login-button:hover::part(base) {
  background-color: var(--app-color-secondary-hover);
  border-color: var(--app-color-secondary-hover);
}

.login-button .login-ms-logo {
  width: 1em;
  height: 1em;
  display: block;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-s);
  font-weight: var(--wa-font-weight-bold);
  text-decoration: none;
}
.app-brand-logo { height: 1.75rem; width: auto; display: block; }
.app-brand-name { color: var(--wa-color-text-normal); }
.empty-state { text-align: center; padding: var(--wa-space-2xl) var(--wa-space-m); }

.fields-dense,
.fields-wide,
.fields-mixed {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size), 100%), 1fr));
}

.fields-dense { --min-column-size: 22ch; gap: var(--wa-space-xs) var(--wa-space-m); }
.fields-wide { --min-column-size: 32ch; gap: var(--wa-space-m) var(--wa-space-l); }
.fields-mixed {
  --min-column-size: 32ch;
  gap: var(--wa-space-m) var(--wa-space-l);
  align-items: end;
}

.fields-fixed {
  grid-template-columns: repeat(var(--field-columns), minmax(0, 1fr));
}

.field-xs { max-width: 9ch; }
.field-s  { max-width: 15ch; }
.field-m  { max-width: 25ch; }
.field-l  { max-width: 40ch; }


.field:has(wa-textarea) { grid-column: 1 / -1; }

.field-cell {
  align-items: baseline;
  flex-wrap: nowrap;
}

.field-cell > .field {
  flex: 1 1 0;
  min-width: 0;
}

.field-cell > .field-xs,
.field-cell > .field-s {
  flex: 0 1 auto;
}

#contact-form {
  margin-inline: auto;
  max-width: 1250px;
}

.section-toggles { justify-content: flex-end; }


.section-toggles wa-button { min-width: 13ch; }


.section-toggles wa-button::part(base) {
  justify-content: center;
  color: #000;
}
.section-toggles wa-button wa-icon { color: currentColor; }

#sections wa-accordion-item {
  color: #00539E;
}
#sections wa-accordion-item::part(base) {
  background-color: transparent;
  color: #00539E;
}

#sections wa-accordion-item { --spacing: var(--wa-space-l); }

.field-subsection { margin-block: var(--wa-space-m) var(--wa-space-s); }


.field-subsection-flag wa-checkbox {
  font-size: var(--wa-font-size-m);
  font-weight: var(--wa-font-weight-semibold);
}


.field-flag { font-weight: var(--wa-font-weight-bold); }

.subsection-rule {
  --color: var(--wa-color-neutral-border-normal);
  --width: 1px;
  --spacing: var(--wa-space-l);
}

.section-title {
  font-weight: var(--wa-font-weight-semibold);
  line-height: var(--wa-line-height-condensed);
}

.section-number {
  display: inline-block;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}
.section-number::after { content: ". "; }

.section-anchor { scroll-margin-block-start: var(--wa-space-4xl); }

.section-index a {
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-size: var(--wa-font-size-s);
}
.section-index a:hover { background-color: var(--wa-color-neutral-fill-quiet); }
.section-index-count { color: var(--wa-color-text-quiet); font-variant-numeric: tabular-nums; }

#sections wa-accordion { font-size: var(--wa-font-size-m); }

@keyframes sync-spin { to { transform: rotate(1turn); } }
#sync.htmx-request wa-icon { animation: sync-spin 1s linear infinite; }

.app-action-generate .generate-busy { display: none; font-size: 1em; }
.app-action-generate.htmx-request .generate-idle { display: none; }
.app-action-generate.htmx-request .generate-busy {
  display: inline-block;
}

.suggestion-dismissed{
  font-size: 0.8em;
}

.suggestion-label { 
  white-space: nowrap; 
}
.suggestion-label wa-checkbox { white-space: normal; }


wa-button.suggestion-icon::part(base) {
  display: inline;
  vertical-align: baseline;
  font-size: inherit;
  color: var(--wa-color-brand-fill-loud);
  font-weight: var(--wa-form-control-label-font-weight);
  line-height: var(--wa-form-control-label-line-height);
  margin: 0;
  padding: 0;
  border: none;
  height: auto;
  min-height: 0;
  width: auto;
  aspect-ratio: auto;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

wa-button.suggestion-icon wa-icon[name="circle-exclamation"] {
  color: #000;
}

wa-button.suggestion-icon wa-icon[name="triangle-exclamation"] {
  color: var(--wa-color-danger-fill-loud);
}

wa-input.suggestion-overwrite::part(base),
wa-select.suggestion-overwrite::part(combobox),
wa-textarea.suggestion-overwrite::part(base) {
  border-color: var(--wa-color-danger-border-loud);
  background-color: var(--wa-color-danger-fill-quiet);
}

wa-checkbox.suggestion-overwrite::part(control) {
  border-color: var(--wa-color-danger-border-loud);
}

.suggestion-warning { color: var(--wa-color-danger-on-quiet); }
.suggestion-note { color: var(--wa-color-success-on-quiet); }
.suggestion-memo { white-space: pre-line; }


.sync-app-action,
.app-pane-start > * {
   width: 100%;
   margin-inline: auto;
   --spacing: clamp(0.5rem, 1.6vh, var(--wa-space-l));
}


.app-pane-start wa-select { padding-block-start: clamp(0.25rem, 0.8vh, var(--wa-space-s)); }

wa-card.sidebar-card > h3{
   white-space: nowrap;
   margin-block-end: 0;

}

wa-card.sidebar-card .sidebar-step {
   color: #fff;
   margin-inline-end: var(--wa-space-2xs);
}

.wa-flex-nowrap {
   flex-direction: row;
}


.card-busy {
   display: none;
   flex-direction: column;
   gap: var(--wa-space-2xs);
   padding-block-start: clamp(0.25rem, 0.8vh, var(--wa-space-s));
}

.card-busy.htmx-request { display: flex; }

.card-busy wa-skeleton {
   height: 1.5rem;
   --color: rgb(255 255 255 / 12%);
   --sheen-color: rgb(255 255 255 / 28%);
}

.card-busy wa-skeleton::part(indicator) {
   border-radius: var(--wa-border-radius-m);
}

.card-busy span {
   font-size: var(--wa-font-size-s);
   color: var(--wa-color-text-quiet);
}

.card-loadable:has(> .card-busy.htmx-request) > :not(.card-busy) {
   display: none;
}


.sync-veil {
   position: fixed;
   inset: 0;
   z-index: 10;
   display: grid;
   place-items: center;
   align-content: center;
   gap: var(--wa-space-s);
   padding-inline: var(--wa-space-l);
   background-color: rgba(91, 108, 131, 0.418);
   backdrop-filter: blur(4px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 150ms ease;
}

.sync-veil-on {
   opacity: 1;
   pointer-events: auto;
}

.sync-veil-message {
   align-items: center;
   font-size: var(--wa-font-size-xl);
   font-weight: var(--wa-font-weight-semibold);
   color: white;
}

.sync-veil-message wa-icon {
   font-size: var(--wa-font-size-xl);
}

.sync-veil-sub-message {
   align-items: center;
   max-width: 80ch;
   font-size: var(--wa-font-size-s);
   line-height: var(--wa-line-height-normal);
   text-align: center;
   text-wrap: balance;
   color: rgba(255, 255, 255, 0.849);
}


.app-dialog {
   --body-spacing: var(--wa-space-l);
   --header-spacing: var(--wa-space-l);
   --footer-spacing: var(--wa-space-l);
}

.app-dialog::part(dialog) {
  padding: var(--wa-space-xs)
}

.app-dialog::part(body) {
   line-height: var(--wa-line-height-expanded);
}