/*
 * Shared shell geometry and responsive mechanics.
 *
 * This asset deliberately excludes domain colour, typography, decoration, page,
 * and module styling. Domain stylesheets load after it and own those concerns.
 */

[data-shell-model] {
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[data-shell-skip-link] {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(calc(-100% - 24px));
  padding: 10px 14px;
  font-weight: 700;
}

[data-shell-skip-link]:focus {
  transform: translateY(0);
}

[data-shell-app] {
  min-height: 100vh;
}

[data-shell-navigation] {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  width: 300px;
  flex-direction: column;
  overflow-y: auto;
}

[data-shell-mobile-bar] {
  display: none;
}

[data-shell-main] {
  min-height: 100vh;
  margin-left: 300px;
}

body[data-responsive-foundation="v1"] {
  --responsive-gutter-wide: clamp(28px, 3.6vw, 54px);
  --responsive-gutter-compact: clamp(18px, 3vw, 32px);
  --responsive-gutter-narrow: clamp(16px, 5vw, 20px);
  --responsive-layout-gap: clamp(12px, 2vw, 20px);
  --responsive-touch-target: 44px;
}

body[data-responsive-foundation="v1"] [data-shell-main],
body[data-responsive-foundation="v1"] [data-shell-main] > *,
body[data-responsive-foundation="v1"] [data-shell-page-header] > * {
  min-width: 0;
  max-width: 100%;
}

body[data-responsive-foundation="v1"] [data-shell-main] :is(img, video, canvas, svg),
body[data-responsive-foundation="v1"] [data-shell-main] :is(input, select, textarea, button) {
  max-width: 100%;
}

[data-shell-main] [data-ui="data-table"],
[data-shell-main] [data-ui="table-scroll"] {
  min-width: 0;
  max-width: 100%;
}

[data-shell-main] [data-ui="table-scroll"] {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

[data-shell-page-title] {
  overflow-wrap: anywhere;
}

[data-shell-main] :is(h1, h2, h3, h4, h5, h6, [role="alert"], [role="status"]) {
  scroll-margin-block-start: 24px;
}

[data-shell-account-avatar] {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  [data-shell-model] *,
  [data-shell-model] *::before,
  [data-shell-model] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  [data-shell-skip-link],
  [data-shell-model] :focus-visible {
    outline: 3px solid CanvasText !important;
    outline-offset: 3px !important;
  }

  [data-shell-navigation] {
    border-inline-end: 1px solid CanvasText;
  }
}

@media (max-width: 1100px) {
  [data-shell-mobile-bar] {
    position: sticky;
    z-index: 25;
    top: 0;
    display: flex;
    height: 66px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
  }

  [data-shell-mobile-bar] > a {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
  }

  body[data-shell-enhanced="true"] [data-shell-navigation] {
    width: min(330px, 88vw);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  body[data-shell-enhanced="true"][data-shell-menu-open] {
    overflow: hidden;
  }

  body[data-shell-enhanced="true"][data-shell-menu-open] [data-shell-navigation] {
    transform: translateX(0);
  }

  body:not([data-shell-enhanced="true"]) [data-shell-navigation] {
    position: static;
    width: 100%;
    transform: none;
  }

  body:not([data-shell-enhanced="true"]) [data-shell-mobile-bar] button,
  body:not([data-shell-enhanced="true"]) [data-shell-menu-close] {
    display: none;
  }

  body[data-shell-model] [data-shell-main] {
    margin-left: 0;
    padding: clamp(28px, 3vw, 34px) var(--responsive-gutter-compact, clamp(18px, 3vw, 32px)) 42px;
  }

  body[data-shell-model] [data-shell-page-header] {
    min-height: 0;
    padding-bottom: 22px;
  }
}

@media (max-width: 640px) {
  body[data-shell-model][data-responsive-foundation="v1"] [data-shell-main] {
    padding-right: var(--responsive-gutter-narrow);
    padding-left: var(--responsive-gutter-narrow);
  }
}

/* Keep the security ceremony on Auth while preserving the originating form. */
.security-confirmation-modal {
    font-family: var(--brand-interface-body, Inter, Arial, sans-serif);
    box-sizing: border-box;
    width: min(42rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.25rem;
    border: 1px solid var(--brand-interface-border, #17375d);
    border-radius: 1rem;
    color: var(--brand-interface-text, #f4f8ff);
    background: var(--brand-interface-surface, #06152e);
}
.security-confirmation-modal::backdrop { background: rgb(3 16 39 / 65%); }
.security-confirmation-modal > header,
.security-confirmation-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.security-confirmation-modal h2 { margin: 0; font-size: 1.4rem; }
.security-confirmation-modal iframe { display: block; width: 100%; height: min(31rem, 60dvh); max-height: 60dvh; border: 0; }
.security-confirmation-frame { margin: 0; padding: 1rem; background: var(--brand-interface-surface, #06152e); color: var(--brand-interface-text, #f4f8ff); }
.security-confirmation-frame main { max-width: 100%; }

.security-confirmation-modal button {
    padding: .5rem .75rem; border: 1px solid #5d7594; border-radius: .35rem;
    background: #102a48; color: #f4f8ff; cursor: pointer;
}
.security-confirmation-modal a { color: #71d7ff; }
.security-confirmation-modal :focus-visible { outline: 3px solid #71d7ff; outline-offset: 3px; }