/* SKIES2 UI 1.3.5 · Light theme · 2026-09-27
 * Load Inter 500/600/700 and IBM Plex Sans 400/500/600 separately.
 * Component rules are scoped to .sk-ui; tokens have the sk- prefix.
 * CSS does not implement validation, permissions, dialogs or network actions.
 */
:root {
  --sk-brand-navy: #0A1D37;
  --sk-brand-aviation: #235A9A;
  --sk-brand-technical: #4C9BE8;
  --sk-brand-carbon: #2B2B2B;
  --sk-neutral-0: #FFFFFF;
  --sk-neutral-25: #FBFCFE;
  --sk-neutral-50: #F5F7FA;
  --sk-neutral-100: #EDF1F6;
  --sk-neutral-200: #D9E1EB;
  --sk-neutral-300: #BCC8D8;
  --sk-neutral-400: #8999AD;
  --sk-neutral-500: #6B7C93;
  --sk-neutral-600: #566579;
  --sk-neutral-700: #3E4C60;
  --sk-neutral-800: #25354A;
  --sk-neutral-900: #17263A;
  --sk-bg-page: var(--sk-neutral-50);
  --sk-bg-surface: var(--sk-neutral-0);
  --sk-bg-subtle: var(--sk-neutral-100);
  --sk-text-primary: var(--sk-brand-carbon);
  --sk-text-secondary: var(--sk-neutral-600);
  --sk-text-heading: var(--sk-brand-navy);
  --sk-text-inverse: var(--sk-neutral-0);
  --sk-border-subtle: var(--sk-neutral-200);
  --sk-border-control: var(--sk-neutral-500);
  --sk-focus-ring: var(--sk-brand-aviation);
  --sk-focus-gap: var(--sk-neutral-0);
  --sk-selection-bg: #EAF3FD;
  --sk-selection-text: var(--sk-brand-navy);
  --sk-selection-border: var(--sk-brand-aviation);
  --sk-link: var(--sk-brand-aviation);
  --sk-link-hover: #1E4D83;
  --sk-link-active: var(--sk-brand-navy);
  --sk-action-primary-bg: var(--sk-brand-technical);
  --sk-action-primary-text: #FFFFFF;
  --sk-action-primary-border: var(--sk-brand-aviation);
  --sk-action-primary-hover: #69ABEB;
  --sk-action-primary-active: #3E8FD9;
  --sk-action-primary-active-border: #1E4D83;
  --sk-action-secondary-bg: var(--sk-neutral-0);
  --sk-action-secondary-text: var(--sk-brand-aviation);
  --sk-action-secondary-border: var(--sk-brand-aviation);
  --sk-action-secondary-2-bg: transparent;
  --sk-action-secondary-2-text: var(--sk-brand-aviation);
  --sk-action-secondary-2-border: transparent;
  --sk-action-secondary-2-hover-bg: transparent;
  --sk-action-secondary-2-hover-text: var(--sk-link-hover);
  --sk-action-secondary-2-hover-border: transparent;
  --sk-action-secondary-2-active-bg: transparent;
  --sk-action-secondary-2-active-text: var(--sk-brand-navy);
  --sk-action-secondary-2-active-border: transparent;
  --sk-action-secondary-2-focus-text: var(--sk-brand-navy);
  --sk-action-subtle-hover: #EAF3FD;
  --sk-action-subtle-active: #D7E9FB;
  --sk-action-subtle-hover-text: #1E4D83;
  --sk-action-subtle-active-text: var(--sk-brand-navy);
  --sk-action-danger-bg: #B91C1C;
  --sk-action-danger-hover: #991B1B;
  --sk-action-danger-active: #7F1D1D;
  --sk-action-danger-text: var(--sk-neutral-0);
  --sk-disabled-bg: var(--sk-neutral-100);
  --sk-disabled-text: var(--sk-neutral-600);
  --sk-disabled-border: var(--sk-neutral-300);
  --sk-status-success-bg: #F0FDF4;
  --sk-status-success-text: #166534;
  --sk-status-success-border: #15803D;
  --sk-status-error-bg: #FEF2F2;
  --sk-status-error-text: #991B1B;
  --sk-status-error-border: #B91C1C;
  --sk-status-warning-bg: #FFFBEB;
  --sk-status-warning-text: #854D0E;
  --sk-status-warning-border: #A16207;
  --sk-status-info-bg: #EFF6FF;
  --sk-status-info-text: #1E4D83;
  --sk-status-info-border: #235A9A;
  --sk-status-neutral-bg: var(--sk-neutral-100);
  --sk-status-neutral-text: var(--sk-neutral-600);
  --sk-status-neutral-border: var(--sk-neutral-500);
  --sk-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sk-size-h1: 2rem;
  --sk-line-h1: 2.5rem;
  --sk-size-h1-mobile: 1.75rem;
  --sk-line-h1-mobile: 2.25rem;
  --sk-size-h2: 1.5rem;
  --sk-line-h2: 2rem;
  --sk-size-h3: 1.25rem;
  --sk-line-h3: 1.75rem;
  --sk-size-body: 1rem;
  --sk-line-body: 1.5rem;
  --sk-size-small: .875rem;
  --sk-line-small: 1.25rem;
  --sk-size-micro: .75rem;
  --sk-line-micro: 1rem;
  --sk-space-1: .25rem;
  --sk-space-2: .5rem;
  --sk-space-3: .75rem;
  --sk-space-4: 1rem;
  --sk-space-5: 1.25rem;
  --sk-space-6: 1.5rem;
  --sk-space-8: 2rem;
  --sk-space-10: 2.5rem;
  --sk-space-12: 3rem;
  --sk-space-16: 4rem;
  --sk-radius-control: .5rem;
  --sk-radius-card: .75rem;
  --sk-radius-dialog: 1rem;
  --sk-radius-pill: 999px;
  --sk-control-sm: 2.25rem;
  --sk-control-md: 2.75rem;
  --sk-control-lg: 3rem;
  --sk-container-max: 80rem;
  --sk-shadow-raised: 0 4px 16px rgb(10 29 55 / 10%);
  --sk-shadow-overlay: 0 16px 48px rgb(10 29 55 / 18%);
  --sk-overlay: rgb(10 29 55 / 48%);
  --sk-z-sticky: 100;
  --sk-z-menu: 200;
  --sk-z-tooltip: 250;
  --sk-z-overlay: 300;
  --sk-z-dialog: 400;
  --sk-z-toast: 500;
  --sk-toast-width: 24rem;
  --sk-toast-gap: .75rem;
  --sk-toast-edge-desktop: 1.5rem;
  --sk-toast-edge-mobile: .75rem;
  --sk-toast-padding: 1rem;
  --sk-toast-radius: .75rem;
  --sk-toast-lifetime-height: 3px;
  --sk-toast-top-offset: 0px;
  --sk-toast-bottom-offset: 0px;
  --sk-toast-enter: 180ms;
  --sk-toast-exit: 120ms;
  --sk-nav-icon-size: 1.25rem;
  --sk-nav-icon-stroke: 2;
  --sk-nav-gap: .5rem;
  --sk-nav-current-marker: 3px;
  --sk-nav-tooltip-bg: var(--sk-brand-navy);
  --sk-nav-tooltip-text: var(--sk-text-inverse);
  --sk-nav-tooltip-gap: 12px;
  --sk-nav-tooltip-arrow: 6px;
  --sk-nav-tooltip-offset: calc(var(--sk-nav-tooltip-gap) + var(--sk-nav-tooltip-arrow));
  --sk-nav-tooltip-arrow-y: 50%;
  --sk-nav-tooltip-trigger-inset: 12px;
  --sk-nav-tooltip-radius: .5rem;
  --sk-nav-tooltip-padding-y: .5rem;
  --sk-nav-tooltip-padding-x: .75rem;
  --sk-nav-tooltip-max-width: 20rem;
  --sk-nav-tooltip-shadow: 0 6px 10px rgb(10 29 55 / 16%);
  --sk-nav-tooltip-show-delay: 150ms;
  --sk-nav-tooltip-hide-delay: 160ms;
  --sk-duration-fast: 120ms;
  --sk-duration-panel: 180ms;
  --sk-ease: cubic-bezier(.2, 0, 0, 1);
  --sk-disclosure-duration-open: var(--sk-duration-panel);
  --sk-disclosure-duration-close: var(--sk-duration-panel);
  --sk-disclosure-ease: var(--sk-ease);
  --sk-disclosure-offset: 4px;
}

.sk-ui, .sk-ui *, .sk-ui *::before, .sk-ui *::after { box-sizing: border-box; }
.sk-ui {
  color: var(--sk-text-primary);
  background: var(--sk-bg-page);
  font-family: var(--sk-font-body);
  font-size: var(--sk-size-body);
  line-height: var(--sk-line-body);
  font-synthesis: none;
  color-scheme: light;
}
.sk-ui .sk-container { max-inline-size: var(--sk-container-max); margin-inline: auto; padding-inline: var(--sk-space-4); }
.sk-ui .sk-h1, .sk-ui .sk-h2, .sk-ui .sk-h3 { font-family: var(--sk-font-heading); color: var(--sk-text-heading); margin: 0 0 var(--sk-space-4); overflow-wrap: anywhere; }
.sk-ui .sk-h1 { font-size: var(--sk-size-h1-mobile); line-height: var(--sk-line-h1-mobile); font-weight: 700; letter-spacing: -.02em; }
.sk-ui .sk-h2 { font-size: var(--sk-size-h2); line-height: var(--sk-line-h2); font-weight: 600; }
.sk-ui .sk-h3 { font-size: var(--sk-size-h3); line-height: var(--sk-line-h3); font-weight: 600; color: var(--sk-brand-aviation); }
.sk-ui .sk-body { font: 400 var(--sk-size-body)/var(--sk-line-body) var(--sk-font-body); margin: 0 0 var(--sk-space-4); }
.sk-ui .sk-body-small { font: 400 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-body); }
.sk-ui .sk-micro { font: 400 var(--sk-size-micro)/var(--sk-line-micro) var(--sk-font-body); color: var(--sk-text-secondary); }
.sk-ui .sk-reading { max-inline-size: 65ch; }
.sk-ui .sk-tabular { font-variant-numeric: tabular-nums; }
.sk-ui .sk-link, .sk-ui .sk-link:visited { color: var(--sk-link); font-weight: 500; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sk-ui .sk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-space-2); }
.sk-ui :is(button, .sk-button) { -webkit-user-select: none; user-select: none; }
.sk-ui .sk-button {
  --sk-btn-bg: var(--sk-action-secondary-bg);
  --sk-btn-text: var(--sk-action-secondary-text);
  --sk-btn-border: var(--sk-action-secondary-border);
  --sk-btn-hover-bg: var(--sk-action-subtle-hover);
  --sk-btn-hover-text: var(--sk-action-subtle-hover-text);
  --sk-btn-hover-border: var(--sk-action-subtle-hover-text);
  --sk-btn-active-bg: var(--sk-action-subtle-active);
  --sk-btn-active-text: var(--sk-action-subtle-active-text);
  --sk-btn-active-border: var(--sk-action-subtle-active-text);
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--sk-space-2);
  min-block-size: var(--sk-control-md);
  max-inline-size: 100%;
  padding: .6875rem var(--sk-space-4);
  border: 1px solid var(--sk-btn-border);
  border-radius: var(--sk-radius-control);
  background: var(--sk-btn-bg);
  color: var(--sk-btn-text);
  font: 600 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-heading);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--sk-duration-fast) var(--sk-ease), color var(--sk-duration-fast) var(--sk-ease), border-color var(--sk-duration-fast) var(--sk-ease);
}
.sk-ui .sk-button--primary {
  --sk-btn-bg: var(--sk-action-primary-bg);
  --sk-btn-text: var(--sk-action-primary-text);
  --sk-btn-border: var(--sk-action-primary-border);
  --sk-btn-hover-bg: var(--sk-action-primary-hover);
  --sk-btn-hover-text: var(--sk-action-primary-text);
  --sk-btn-hover-border: var(--sk-action-primary-border);
  --sk-btn-active-bg: var(--sk-action-primary-active);
  --sk-btn-active-text: var(--sk-action-primary-text);
  --sk-btn-active-border: var(--sk-action-primary-active-border);
}
/* .sk-button--secondary uses the base button token set. */
/* Type 2 is opt-in per explicitly requested context. Never infer it from labels/routes. */
.sk-ui .sk-button--secondary.sk-button--secondary-2 {
  --sk-btn-bg: var(--sk-action-secondary-2-bg);
  --sk-btn-text: var(--sk-action-secondary-2-text);
  --sk-btn-border: var(--sk-action-secondary-2-border);
  --sk-btn-hover-bg: var(--sk-action-secondary-2-hover-bg);
  --sk-btn-hover-text: var(--sk-action-secondary-2-hover-text);
  --sk-btn-hover-border: var(--sk-action-secondary-2-hover-border);
  --sk-btn-active-bg: var(--sk-action-secondary-2-active-bg);
  --sk-btn-active-text: var(--sk-action-secondary-2-active-text);
  --sk-btn-active-border: var(--sk-action-secondary-2-active-border);
}
.sk-ui .sk-button--tertiary { --sk-btn-bg: transparent; --sk-btn-border: transparent; --sk-btn-hover-border: transparent; --sk-btn-active-border: transparent; }
.sk-ui .sk-button--danger {
  --sk-btn-bg: var(--sk-action-danger-bg);
  --sk-btn-border: var(--sk-action-danger-bg);
  --sk-btn-text: var(--sk-action-danger-text);
  --sk-btn-hover-bg: var(--sk-action-danger-hover);
  --sk-btn-hover-border: var(--sk-action-danger-hover);
  --sk-btn-hover-text: var(--sk-action-danger-text);
  --sk-btn-active-bg: var(--sk-action-danger-active);
  --sk-btn-active-border: var(--sk-action-danger-active);
  --sk-btn-active-text: var(--sk-action-danger-text);
}
.sk-ui .sk-button--sm { min-block-size: var(--sk-control-sm); padding: .4375rem var(--sk-space-3); }
.sk-ui .sk-button--lg { min-block-size: var(--sk-control-lg); padding: .6875rem var(--sk-space-5); font-size: var(--sk-size-body); line-height: var(--sk-line-body); }
.sk-ui .sk-button--icon { min-inline-size: var(--sk-control-md); min-block-size: var(--sk-control-md); padding: var(--sk-space-3); }
.sk-ui .sk-icon { inline-size: 1rem; block-size: 1rem; flex: 0 0 auto; color: currentColor; }
.sk-ui .sk-button--lg .sk-icon { inline-size: 1.25rem; block-size: 1.25rem; }
.sk-ui .sk-button--block { inline-size: 100%; }

/* Navigation is distinct from action buttons; use native links for destinations. */
.sk-ui .sk-nav-icon {
  inline-size: var(--sk-nav-icon-size); block-size: var(--sk-nav-icon-size);
  flex: 0 0 auto; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: var(--sk-nav-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round; color: currentColor;
}
.sk-ui .sk-nav-icon--indicator { inline-size: 1rem; block-size: 1rem; }
.sk-ui .sk-nav-link {
  --sk-nav-text: var(--sk-brand-aviation);
  --sk-nav-hover-bg: var(--sk-action-subtle-hover);
  --sk-nav-hover-text: var(--sk-link-hover);
  --sk-nav-active-bg: var(--sk-action-subtle-active);
  --sk-nav-active-text: var(--sk-brand-navy);
  --sk-nav-current-bg: var(--sk-selection-bg);
  --sk-nav-current-text: var(--sk-selection-text);
  --sk-nav-marker: var(--sk-selection-border);
  position: relative; display: inline-flex; align-items: center; gap: var(--sk-nav-gap);
  min-block-size: 2.75rem; max-inline-size: 100%; padding: .6875rem .75rem;
  border: 1px solid transparent; border-inline-start-width: var(--sk-nav-current-marker);
  border-radius: var(--sk-radius-control); background: transparent;
  color: var(--sk-nav-text); text-decoration: none; text-align: start;
  font: 600 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-heading);
  transition: background-color var(--sk-duration-fast) var(--sk-ease), color var(--sk-duration-fast) var(--sk-ease);
}
.sk-ui .sk-nav-label { min-inline-size: 0; overflow-wrap: anywhere; }
.sk-ui .sk-nav-list { display: grid; gap: var(--sk-space-1); list-style: none; margin: 0; padding: 0; }
.sk-ui .sk-nav-list .sk-nav-link { display: flex; inline-size: 100%; }
.sk-ui .sk-nav-link:visited { color: var(--sk-nav-text); }
.sk-ui .sk-nav-link[aria-current="page"] { background: var(--sk-nav-current-bg); color: var(--sk-nav-current-text); border-inline-start-color: var(--sk-nav-marker); }
@media (hover: hover) {
  .sk-ui a.sk-nav-link[href]:hover { background: var(--sk-nav-hover-bg); color: var(--sk-nav-hover-text); }
  .sk-ui a.sk-nav-link[aria-current="page"]:hover { background: var(--sk-nav-active-bg); color: var(--sk-nav-current-text); }
}
.sk-ui a.sk-nav-link[href]:active { background: var(--sk-nav-active-bg); color: var(--sk-nav-active-text); }
.sk-ui .sk-nav-link:focus-visible { outline: 3px solid var(--sk-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--sk-focus-gap); }
.sk-ui .sk-nav-link--unavailable { color: var(--sk-disabled-text); background: var(--sk-disabled-bg); cursor: default; }
.sk-ui .sk-inverse .sk-nav-link {
  --sk-nav-text: #FFFFFF; --sk-nav-hover-bg: #235A9A; --sk-nav-hover-text: #FFFFFF;
  --sk-nav-active-bg: #1E4D83; --sk-nav-active-text: #FFFFFF;
  --sk-nav-current-bg: #235A9A; --sk-nav-current-text: #FFFFFF; --sk-nav-marker: #FFFFFF;
}
.sk-ui .sk-inverse .sk-nav-link--unavailable { color: #D9E1EB; background: transparent; }
@media (prefers-reduced-motion: reduce) { .sk-ui .sk-nav-link { transition: none; } }
@media (forced-colors: active) {
  .sk-ui .sk-nav-link { color: LinkText; }
  .sk-ui .sk-nav-link[aria-current="page"] { color: LinkText; border-inline-start-color: Highlight; }
  .sk-ui .sk-nav-link:focus-visible { outline-color: Highlight; box-shadow: none; }
  .sk-ui .sk-nav-link--unavailable { color: GrayText; }
}

@media (hover: hover) {
  .sk-ui .sk-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--sk-btn-hover-bg); color: var(--sk-btn-hover-text); border-color: var(--sk-btn-hover-border); }
  .sk-ui .sk-link:hover { color: var(--sk-link-hover); text-decoration-thickness: 2px; }
  .sk-ui .sk-input:hover:not(:disabled):not([readonly]):not([aria-invalid="true"]) { border-color: var(--sk-brand-aviation); }
}
.sk-ui .sk-button:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--sk-btn-active-bg); color: var(--sk-btn-active-text); border-color: var(--sk-btn-active-border); }
.sk-ui .sk-link:active { color: var(--sk-link-active); }
.sk-ui .sk-button:disabled, .sk-ui .sk-button[aria-disabled="true"]:not([aria-busy="true"]) { background: var(--sk-disabled-bg); color: var(--sk-disabled-text); border-color: var(--sk-disabled-border); cursor: not-allowed; opacity: 1; }
/* aria-busy and aria-disabled need a functional activation guard in JS. */
.sk-ui .sk-button[aria-busy="true"]:not(:disabled) { cursor: progress; }
.sk-ui .sk-button[aria-busy="true"]:not(:disabled)::before { content: ""; inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; flex: 0 0 auto; animation: sk-spin 800ms linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-ui .sk-button:focus-visible, .sk-ui .sk-link:focus-visible, .sk-ui .sk-choice:focus-visible {
  outline: 3px solid var(--sk-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--sk-focus-gap);
}

/* Explicit type-2 exception: a text focus indicator, never a ring or focus shadow. */
.sk-ui .sk-button--secondary.sk-button--secondary-2:focus-visible {
  outline: none;
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sk-ui .sk-button--secondary.sk-button--secondary-2:focus-visible:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  color: var(--sk-action-secondary-2-focus-text);
}

.sk-ui .sk-form { display: grid; gap: var(--sk-space-6); max-inline-size: 40rem; }
.sk-ui .sk-field { display: grid; gap: var(--sk-space-2); min-inline-size: 0; }
.sk-ui .sk-label { font: 600 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-heading); color: var(--sk-text-primary); }
.sk-ui .sk-input {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--sk-control-md);
  padding: .5625rem var(--sk-space-3);
  border: 1px solid var(--sk-border-control);
  border-radius: var(--sk-radius-control);
  color: var(--sk-text-primary);
  background-color: var(--sk-bg-surface);
  font: 400 var(--sk-size-body)/var(--sk-line-body) var(--sk-font-body);
  transition: border-color var(--sk-duration-fast) var(--sk-ease);
}
.sk-ui .sk-input::placeholder { color: var(--sk-text-secondary); opacity: 1; }
.sk-ui .sk-input[readonly] { background: var(--sk-bg-subtle); }
.sk-ui .sk-input:focus:not(:disabled) { border-color: var(--sk-brand-aviation); outline: 3px solid var(--sk-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--sk-focus-gap); }
.sk-ui .sk-input[aria-invalid="true"]:not(:disabled) { border-color: var(--sk-status-error-border); }
.sk-ui .sk-input:disabled { background: var(--sk-disabled-bg); border-color: var(--sk-disabled-border); color: var(--sk-disabled-text); -webkit-text-fill-color: var(--sk-disabled-text); opacity: 1; cursor: not-allowed; }
.sk-ui textarea.sk-input { min-block-size: 7.5rem; resize: vertical; }
.sk-ui select.sk-input { padding-inline-end: var(--sk-space-8); }
.sk-ui .sk-help { margin: 0; font: 400 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-body); color: var(--sk-text-secondary); }
.sk-ui .sk-error-text { color: var(--sk-status-error-text); }
.sk-ui .sk-check-label { display: inline-flex; align-items: center; gap: var(--sk-space-2); min-block-size: var(--sk-control-md); cursor: pointer; }
.sk-ui .sk-choice { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--sk-brand-aviation); flex: 0 0 auto; }
.sk-ui .sk-card { padding: var(--sk-space-4); border: 1px solid var(--sk-border-subtle); border-radius: var(--sk-radius-card); background: var(--sk-bg-surface); }
.sk-ui .sk-alert, .sk-ui .sk-badge {
  --sk-status-bg: var(--sk-status-neutral-bg);
  --sk-status-text: var(--sk-status-neutral-text);
  --sk-status-border: var(--sk-status-neutral-border);
  color: var(--sk-status-text);
  background: var(--sk-status-bg);
  border: 1px solid var(--sk-status-border);
}
.sk-ui .sk-alert { padding: var(--sk-space-4); border-radius: var(--sk-radius-control); font: 400 var(--sk-size-body)/var(--sk-line-body) var(--sk-font-body); }
.sk-ui .sk-badge { display: inline-flex; align-items: center; gap: var(--sk-space-1); padding: var(--sk-space-1) var(--sk-space-2); border-radius: var(--sk-radius-pill); font: 600 var(--sk-size-micro)/var(--sk-line-micro) var(--sk-font-heading); }
.sk-ui .sk-status--success { --sk-status-bg: var(--sk-status-success-bg); --sk-status-text: var(--sk-status-success-text); --sk-status-border: var(--sk-status-success-border); }
.sk-ui .sk-status--error { --sk-status-bg: var(--sk-status-error-bg); --sk-status-text: var(--sk-status-error-text); --sk-status-border: var(--sk-status-error-border); }
.sk-ui .sk-status--warning { --sk-status-bg: var(--sk-status-warning-bg); --sk-status-text: var(--sk-status-warning-text); --sk-status-border: var(--sk-status-warning-border); }
.sk-ui .sk-status--info { --sk-status-bg: var(--sk-status-info-bg); --sk-status-text: var(--sk-status-info-text); --sk-status-border: var(--sk-status-info-border); }
.sk-ui .sk-inverse { --sk-focus-ring: var(--sk-brand-technical); --sk-focus-gap: var(--sk-brand-navy); color: var(--sk-text-inverse); background: var(--sk-brand-navy); }
.sk-ui .sk-inverse .sk-link, .sk-ui .sk-inverse .sk-link:visited { color: var(--sk-text-inverse); }
.sk-ui .sk-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 48rem) {
  .sk-ui .sk-h1 { font-size: var(--sk-size-h1); line-height: var(--sk-line-h1); }
  .sk-ui .sk-container { padding-inline: var(--sk-space-6); }
  .sk-ui .sk-card { padding: var(--sk-space-6); }
}
@media (min-width: 64rem) { .sk-ui .sk-container { padding-inline: var(--sk-space-8); } }
@media (pointer: coarse) { .sk-ui .sk-button--sm { min-block-size: var(--sk-control-md); padding-block: .6875rem; } }
@media (prefers-reduced-motion: reduce) {
  .sk-ui .sk-button, .sk-ui .sk-input { transition: none; }
  .sk-ui .sk-button[aria-busy="true"]:not(:disabled)::before { animation: none; }
}
@media (forced-colors: active) {
  .sk-ui .sk-button:focus-visible, .sk-ui .sk-link:focus-visible, .sk-ui .sk-choice:focus-visible, .sk-ui .sk-input:focus { outline: 3px solid Highlight; box-shadow: none; }
  .sk-ui .sk-button, .sk-ui .sk-input { border-color: ButtonText; }
  .sk-ui .sk-button:disabled, .sk-ui .sk-button[aria-disabled="true"]:not([aria-busy="true"]), .sk-ui .sk-input:disabled { color: GrayText; border-color: GrayText; }
  .sk-ui .sk-button--secondary.sk-button--secondary-2:focus-visible { outline: none; box-shadow: none; }
}

/* Navigation tooltip appearance. The host owns events, placement, ARIA and cleanup.
 * Visible air gap: 12px from rail edge to arrow tip; box offset: 12px + 6px.
 * This portal must be outside transformed/contained/clipping app ancestors.
 */
.sk-ui.sk-nav-tooltip-layer {
  position: fixed; inset: 0; z-index: var(--sk-z-tooltip);
  background: transparent; pointer-events: none;
}
.sk-ui .sk-nav-tooltip {
  position: absolute; margin: 0; inline-size: max-content;
  max-inline-size: min(var(--sk-nav-tooltip-max-width), calc(100vw - 24px));
  padding: var(--sk-nav-tooltip-padding-y) var(--sk-nav-tooltip-padding-x);
  border: 0; border-radius: var(--sk-nav-tooltip-radius);
  background: var(--sk-nav-tooltip-bg); color: var(--sk-nav-tooltip-text);
  font: 600 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-heading);
  text-align: start; overflow-wrap: anywhere;
  filter: drop-shadow(var(--sk-nav-tooltip-shadow)); pointer-events: auto;
}
.sk-ui .sk-nav-tooltip::before {
  content: ""; position: absolute;
  left: calc(-1 * var(--sk-nav-tooltip-arrow));
  top: calc(var(--sk-nav-tooltip-arrow-y) - var(--sk-nav-tooltip-arrow));
  inline-size: var(--sk-nav-tooltip-arrow);
  block-size: calc(2 * var(--sk-nav-tooltip-arrow));
  background: var(--sk-nav-tooltip-bg);
  clip-path: polygon(100% 0, 100% 100%, 0 50%); pointer-events: none;
}
/* Invisible hover corridor. Match trigger inset to the actual rail component. */
.sk-ui .sk-nav-tooltip::after {
  content: ""; position: absolute;
  left: calc(-1 * (var(--sk-nav-tooltip-offset) + var(--sk-nav-tooltip-trigger-inset)));
  top: calc(var(--sk-nav-tooltip-arrow-y) - var(--sk-control-md) / 2);
  inline-size: calc(var(--sk-nav-tooltip-offset) + var(--sk-nav-tooltip-trigger-inset));
  block-size: var(--sk-control-md); background: transparent;
}
.sk-ui .sk-nav-tooltip[hidden], .sk-ui.sk-nav-tooltip-layer[hidden] { display: none !important; }
@media (forced-colors: active) {
  .sk-ui .sk-nav-tooltip {
    --sk-nav-tooltip-bg: Canvas; --sk-nav-tooltip-text: CanvasText;
    outline: 1px solid CanvasText; filter: none;
  }
}

/* Disclosure motion is driven by skies2-disclosures.js or the host component.
 * Keep both wrappers undecorated; apply padding/borders/margins to an inner child.
 * Floating panels need a positioned, viewport-aware host; this is not a menu engine.
 */
.sk-ui .sk-disclosure-panel { height: auto; min-height: 0; padding: 0; border: 0; margin: 0; }
.sk-ui .sk-disclosure-panel[hidden] { display: none !important; }
.sk-ui .sk-disclosure-panel[data-sk-disclosure-mode="flow"][data-sk-disclosure-state="opening"],
.sk-ui .sk-disclosure-panel[data-sk-disclosure-mode="flow"][data-sk-disclosure-state="closing"] { overflow: hidden; }
.sk-ui .sk-disclosure-content { display: flow-root; min-height: 0; padding: 0; border: 0; margin: 0; }
.sk-ui .sk-disclosure-chevron { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(0deg); transition: transform var(--sk-disclosure-duration-close) var(--sk-disclosure-ease); }
.sk-ui [aria-expanded="true"] > .sk-disclosure-chevron { transform: rotate(180deg); transition-duration: var(--sk-disclosure-duration-open); }
@media (prefers-reduced-motion: reduce) {
  .sk-ui .sk-disclosure-chevron,
  .sk-ui [aria-expanded] > .sk-disclosure-chevron { transition: none; }
}

/* Toasts. Mount ONE portal outside transformed/contained app ancestors.
 * Placement is set by the controller using the visual viewport.
 * Small viewport: top; >=1024 CSS px: bottom right. Never >3 cards.
 */
.sk-ui.sk-toast-portal { background: transparent; pointer-events: none; }
.sk-ui .sk-toast-region {
  position: fixed;
  z-index: var(--sk-z-toast);
  left: calc(var(--sk-vv-left, 0px) + max(var(--sk-toast-edge-mobile), env(safe-area-inset-left)));
  right: calc(100vw - var(--sk-vv-left, 0px) - var(--sk-vv-width, 100vw) + max(var(--sk-toast-edge-mobile), env(safe-area-inset-right)));
  inset-block-start: calc(var(--sk-vv-top, 0px) + max(var(--sk-toast-edge-mobile), env(safe-area-inset-top)) + var(--sk-toast-top-offset));
  inset-block-end: auto;
  inline-size: auto;
  max-inline-size: var(--sk-toast-width);
  max-block-size: calc(var(--sk-vv-height, 100dvh) - max(var(--sk-toast-edge-mobile), env(safe-area-inset-top)) - max(var(--sk-toast-edge-mobile), env(safe-area-inset-bottom)) - var(--sk-toast-top-offset) - var(--sk-toast-bottom-offset));
  margin-inline: auto;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}
.sk-ui .sk-toast-portal-list { display: flex; flex-direction: column; gap: var(--sk-toast-gap); margin: 0; padding: 0; list-style: none; }
.sk-ui .sk-toast-region[data-placement="bottom-right"] {
  left: auto;
  right: calc(100vw - var(--sk-vv-left, 0px) - var(--sk-vv-width, 100vw) + max(var(--sk-toast-edge-desktop), env(safe-area-inset-right)));
  top: auto;
  bottom: calc(100dvh - var(--sk-vv-top, 0px) - var(--sk-vv-height, 100dvh) + max(var(--sk-toast-edge-desktop), env(safe-area-inset-bottom)) + var(--sk-toast-bottom-offset));
  inline-size: min(var(--sk-toast-width), calc(100vw - 3rem));
  max-block-size: calc(var(--sk-vv-height, 100dvh) - 3rem - var(--sk-toast-top-offset) - var(--sk-toast-bottom-offset));
  margin-inline: 0;
}
.sk-ui .sk-toast {
  --sk-toast-accent: var(--sk-status-info-border);
  --sk-toast-tint: var(--sk-status-info-bg);
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 2.75rem;
  align-items: start;
  column-gap: .625rem;
  row-gap: var(--sk-space-2);
  padding: var(--sk-toast-padding);
  border: 1px solid var(--sk-border-subtle);
  border-inline-start: 4px solid var(--sk-toast-accent);
  border-radius: var(--sk-toast-radius);
  background: var(--sk-bg-surface);
  color: var(--sk-text-primary);
  box-shadow: var(--sk-shadow-raised);
  pointer-events: auto;
  overflow-wrap: anywhere;
  animation: sk-toast-enter var(--sk-toast-enter) var(--sk-ease) both;
}
.sk-ui .sk-toast--success { --sk-toast-accent: var(--sk-status-success-border); --sk-toast-tint: var(--sk-status-success-bg); }
.sk-ui .sk-toast--error { --sk-toast-accent: var(--sk-status-error-border); --sk-toast-tint: var(--sk-status-error-bg); }
.sk-ui .sk-toast--warning { --sk-toast-accent: var(--sk-status-warning-border); --sk-toast-tint: var(--sk-status-warning-bg); }
.sk-ui .sk-toast--info, .sk-ui .sk-toast--loading { --sk-toast-accent: var(--sk-status-info-border); --sk-toast-tint: var(--sk-status-info-bg); }
.sk-ui .sk-toast__icon { inline-size: 20px; block-size: 20px; margin-block-start: 12px; color: var(--sk-toast-accent); display: inline-flex; align-items: center; justify-content: center; }
.sk-ui .sk-toast__symbol { inline-size: 20px; block-size: 20px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font: 600 12px/1 var(--sk-font-heading); background: var(--sk-toast-tint); }
.sk-ui .sk-toast__spinner { inline-size: 18px; block-size: 18px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: sk-spin 800ms linear infinite; }
.sk-ui .sk-toast__title { grid-column: 2; align-self: center; margin: 0; font: 600 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-heading); color: var(--sk-text-heading); }
.sk-ui .sk-toast__message { grid-column: 1 / -1; margin: 0; font: 400 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-body); color: var(--sk-text-primary); }
.sk-ui .sk-toast__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-space-2); }
.sk-ui .sk-toast__close { grid-column: 3; grid-row: 1; justify-self: end; min-inline-size: 44px; min-block-size: 44px; padding: 11px; }
.sk-ui .sk-toast__close-mark { font: 400 20px/20px var(--sk-font-body); }
.sk-ui .sk-toast__action { min-block-size: 44px; }
.sk-ui .sk-toast__lifetime {
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -4px;
  inset-inline-end: -1px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.sk-ui .sk-toast__lifetime-fill {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: var(--sk-toast-lifetime-height);
  background: var(--sk-toast-accent);
  transform: scaleX(1);
  transform-origin: left center;
}
.sk-ui .sk-toast__pending { margin: var(--sk-space-2) 0 0; padding: var(--sk-space-1) var(--sk-space-2); inline-size: fit-content; margin-inline-start: auto; border-radius: var(--sk-radius-control); color: var(--sk-text-secondary); background: var(--sk-bg-surface); font: 400 var(--sk-size-small)/var(--sk-line-small) var(--sk-font-body); }
.sk-ui .sk-toast[data-closing="true"] { pointer-events: none; animation: sk-toast-exit var(--sk-toast-exit) var(--sk-ease) both; }
.sk-ui .sk-toast-region[data-paused="true"] .sk-toast__spinner { animation-play-state: paused; }
.sk-ui .sk-toast[hidden], .sk-ui .sk-toast [hidden], .sk-ui .sk-toast__pending[hidden], .sk-ui.sk-toast-portal[hidden] { display: none; }
@keyframes sk-toast-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sk-toast-exit { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sk-ui .sk-toast, .sk-ui .sk-toast[data-closing="true"], .sk-ui .sk-toast__spinner { animation: none; }
  .sk-ui .sk-toast__lifetime { display: none; }
}
@media (forced-colors: active) {
  .sk-ui .sk-toast { border: 1px solid CanvasText; border-inline-start-width: 4px; box-shadow: none; }
  .sk-ui .sk-toast__icon { color: CanvasText; }
  .sk-ui .sk-toast__lifetime-fill { background: CanvasText; }
}