/* =============================================================================
   Maintenance page — static presentation for IIS wwwroot
   No frameworks, no CDN, no JavaScript required.
   Brand accent: Finsbury Green (#00af52)
   ============================================================================= */

:root {
  /* Surfaces — soft green-tinted neutrals */
  --color-page: #edf6f0;
  --color-page-deep: #dceee3;
  --color-surface: #ffffff;
  --color-border: #cfe3d6;

  /* Text */
  --color-heading: #1a2b24;
  --color-body: #455850;
  --color-muted: #667870;

  /* Accent — Finsbury Green + harmonious derivatives */
  --color-accent: #00af52;
  --color-accent-deep: #008a40;
  --color-accent-bright: #2fc86a;
  --color-accent-soft: rgba(0, 175, 82, 0.14);
  --color-accent-wash: rgba(0, 175, 82, 0.08);

  /* Elevation & shape */
  --shadow-panel: 0 10px 32px rgba(26, 58, 40, 0.1);
  --radius-panel: 12px;

  /* Layout */
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  /*
    --content-left-anchor freezes the desktop left-edge calc at the original
    26rem centre-left position. --content-max may grow to the right only.
  */
  --content-left-anchor: 26rem;
  --content-max: 33rem;
  --content-measure: 42ch;

  /* Native artwork ceiling (1536 × 1024 source) */
  --artwork-native-w: 1536px;
  --artwork-native-h: 1024px;

  /* Typography */
  --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-title: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --leading-body: 1.65;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-body);
  background-color: var(--color-page);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 110%, var(--color-accent-wash), transparent 55%),
    radial-gradient(ellipse 60% 45% at 10% 100%, rgba(0, 138, 64, 0.06), transparent 50%),
    linear-gradient(180deg, #f6fbf7 0%, var(--color-page) 42%, var(--color-page-deep) 100%);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  display: block;
}

/* ----- Page shell ----- */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  min-height: 100vh;
  padding: var(--page-gutter);
  isolation: isolate;
}

/* ----- Radial atmosphere (behind artwork) ----- */

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmosphere__wash {
  position: absolute;
  inset: auto -10% -20% -10%;
  height: min(55vh, 30rem);
  background:
    radial-gradient(ellipse 55% 70% at 28% 55%, var(--color-accent-soft), transparent 70%),
    radial-gradient(ellipse 50% 65% at 78% 65%, rgba(47, 200, 106, 0.12), transparent 68%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 255, 255, 0.55), transparent 70%);
}

/* ----- Content column (header / card / footer) ----- */

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
  max-width: var(--content-max);
}

/* ----- Artwork: in-flow under content on small screens ----- */

.artwork {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: min(100%, 36rem);
  min-width: 0;
  pointer-events: none;
}

.artwork__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
}

/* ----- Brand mark ----- */

.brand {
  display: flex;
  justify-content: center;
  width: 100%;
}

.brand__logo {
  width: auto;
  max-width: min(11rem, 60vw);
  max-height: 2.5rem;
  object-fit: contain;
  opacity: 0.95;
}

.brand__logo[src=""] {
  display: none;
}

/* ----- Main panel ----- */

.main {
  width: 100%;
}

.panel {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding:
    clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem)
    clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  text-align: center;
}

.panel__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-accent-deep) 0%,
    var(--color-accent) 48%,
    var(--color-accent-bright) 100%
  );
}

.panel__icon {
  display: flex;
  justify-content: center;
  margin: 0.25rem auto 1.25rem;
  color: var(--color-accent);
}

.icon {
  width: clamp(3.25rem, 2.75rem + 2vw, 4rem);
  height: clamp(3.25rem, 2.75rem + 2vw, 4rem);
}

.panel__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.panel__title {
  margin: 0;
  max-width: 20ch;
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.panel__body {
  margin: 0;
  max-width: var(--content-measure);
  color: var(--color-body);
}

.panel__closing {
  margin: 0.35rem 0 0;
  max-width: var(--content-measure);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-accent-deep);
}

/* ----- Footer ----- */

.footer {
  width: 100%;
  text-align: center;
}

.footer__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* ----- Tablet: still stacked ----- */

@media (min-width: 40rem) {
  .panel__body {
    max-width: 46ch;
  }

  .atmosphere__wash {
    height: min(58vh, 34rem);
  }

  .artwork {
    max-width: min(100%, 40rem);
  }
}

/*
  Wide layouts only: content stays centre-left; artwork anchors bottom-right.
  Below this, stacked layout avoids cramped side-by-side / overlap.
*/
@media (min-width: 68rem) {
  .page {
    /* Artwork is absolute, so flex only centres the content column */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    /*
      Left edge locked to the original 26rem centre-left anchor.
      Widening --content-max expands the column to the right only.
    */
    padding-left: max(var(--page-gutter), calc((50% - var(--content-left-anchor)) / 2));
    padding-right: var(--page-gutter);
  }

  .artwork {
    position: absolute;
    right: clamp(0.75rem, 2vw, 1.5rem);
    bottom: clamp(0.75rem, 2.5vh, 1.5rem);
    left: auto;
    top: auto;
    z-index: 0;
    /*
      Grows with free bottom-right space up to native 1536×1024.
      No rem height ceilings — only intrinsic size and viewport limits.
    */
    width: min(
      var(--artwork-native-w),
      calc(
        100vw
        - var(--content-max)
        - max(var(--page-gutter), calc((50% - var(--content-left-anchor)) / 2))
        - 4rem
      ),
      calc((100vh - 3rem) * 1.5)
    );
    max-width: var(--artwork-native-w);
    margin: 0;
  }

  .artwork__img {
    width: 100%;
    height: auto;
    max-width: var(--artwork-native-w);
    max-height: min(var(--artwork-native-h), calc(100vh - 3rem));
    object-fit: contain;
    object-position: right bottom;
  }
}

/* ----- Motion preference ----- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ----- High-contrast / forced colors ----- */

@media (forced-colors: active) {
  .panel {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  .panel__accent {
    background: Highlight;
  }

  .panel__icon,
  .panel__closing {
    color: Highlight;
  }

  .atmosphere {
    display: none;
  }
}