/* Maintenance banner, Maintenance Mode bar and the maintenance page (MAINTENANCE_CONTRACT.md).
 * Loaded by partials/_maintenance_banner.html on every page shell (signed-in app, sign-in pages, kiosk, portals)
 * and by maintenance/maintenance_mode.html. Only theme-tokens.css is assumed, so it works in every shell.
 * Tones are semantic: sky for an announced window, amber for maintenance in progress and Maintenance Mode,
 * each with an icon and a label as well as color. Persona accents appear only as the faint top beam. */
.gj-mnt-host, .gj-mnt-page {
  --mnt-sky: #0284c7;   --mnt-sky-soft: #e5f3fb;   --mnt-sky-ink: #075985;
  --mnt-amber: #c27c0e; --mnt-amber-soft: #fdf3e1; --mnt-amber-ink: #92400e;
  --mnt-surface: var(--theme-surface, #fff);
  --mnt-ink: var(--theme-ink, #17202a);
  --mnt-muted: var(--theme-muted, #667085);
  --mnt-line: var(--theme-line, #e3e8ee);
  --mnt-on-tone: #fff;
  --mnt-elev-1: 0 1px 2px rgb(16 24 40 / .05), 0 6px 18px -10px rgb(16 24 40 / .14);
}
[data-bs-theme="dark"] .gj-mnt-host, [data-bs-theme="dark"] .gj-mnt-page {
  --mnt-sky: #6cc4f5;   --mnt-sky-soft: rgba(108, 196, 245, .13);   --mnt-sky-ink: #93d4f8;
  --mnt-amber: #f5c46c; --mnt-amber-soft: rgba(245, 196, 108, .13); --mnt-amber-ink: #f7cf86;
  /* Dark-mode tones are light tints; white on them fails contrast. */
  --mnt-on-tone: #0b1520;
  --mnt-elev-1: inset 0 1px 0 rgb(255 255 255 / .05), 0 8px 20px -12px rgb(0 0 0 / .6);
}
.gj-mnt-host [data-tone="sky"], .gj-mnt-page [data-tone="sky"] { --tone: var(--mnt-sky); --tone-soft: var(--mnt-sky-soft); --tone-ink: var(--mnt-sky-ink); }
.gj-mnt-host [data-tone="amber"], .gj-mnt-page [data-tone="amber"] { --tone: var(--mnt-amber); --tone-soft: var(--mnt-amber-soft); --tone-ink: var(--mnt-amber-ink); }

/* ---------------- Banner ---------------- */
.gj-mnt-host { container-type: inline-size; margin: 0 0 1rem; }
.gj-mnt-host:not(:has(.gj-mnt)) { display: none; }
.gj-mnt-host--auth { margin: 0 0 .75rem; }
.gj-mnt-host--kiosk { margin: .75rem clamp(.75rem, 3vw, 1.5rem) 0; }
.gj-mnt-host--portal { margin: 0 0 1rem; }
.gj-mnt-host *, .gj-mnt-host *::before, .gj-mnt-host *::after { box-sizing: border-box; }

.gj-mnt {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .75rem .7rem 1.05rem;
  color: var(--mnt-ink);
  background:
    linear-gradient(100deg, var(--tone-soft) 0%, color-mix(in srgb, var(--tone-soft) 45%, var(--mnt-surface)) 62%, var(--mnt-surface) 100%),
    var(--mnt-surface);
  border: 1px solid color-mix(in srgb, var(--tone) 34%, var(--mnt-line));
  border-radius: 14px;
  box-shadow: var(--mnt-elev-1);
  animation: gj-mnt-rise .32s cubic-bezier(.2, .8, .2, 1) both;
}
/* Tone edge on the leading side, and a faint persona beam along the top. */
.gj-mnt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 55%, transparent)); }
.gj-mnt::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: -1; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--app-context-glow, var(--tone)), var(--tone), transparent);
}
/* In progress: a soft hazard stripe along the trailing edge. */
.gj-mnt[data-tone="amber"] {
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone) 9%, transparent) 0 10px, transparent 10px 20px) right / 38% 100% no-repeat,
    linear-gradient(100deg, var(--tone-soft) 0%, color-mix(in srgb, var(--tone-soft) 45%, var(--mnt-surface)) 62%, var(--mnt-surface) 100%),
    var(--mnt-surface);
}
.gj-mnt__icon {
  position: relative; display: inline-grid; flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; place-items: center;
  color: var(--mnt-on-tone); font-size: 1.05rem; border-radius: .75rem;
  background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 72%, #000));
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--tone) 80%, transparent);
}
[data-bs-theme="dark"] .gj-mnt__icon { background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 75%, #fff)); }
/* Live pulse on the icon while maintenance is in progress. */
.gj-mnt[data-tone="amber"] .gj-mnt__icon::after {
  content: ""; position: absolute; inset: -3px; border-radius: .9rem; border: 2px solid var(--tone); opacity: 0;
  animation: gj-mnt-pulse 2.4s ease-out infinite;
}
.gj-mnt__copy { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; min-width: 0; }
.gj-mnt__label {
  display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; color: var(--tone-ink);
  background: color-mix(in srgb, var(--tone) 14%, var(--mnt-surface)); border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  border-radius: 999px; font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.gj-mnt__text { min-width: 0; font-size: .86rem; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.gj-mnt__text time { font-weight: 800; white-space: nowrap; }
.gj-mnt__chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; color: var(--tone-ink);
  border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap;
  background: color-mix(in srgb, var(--tone) 10%, transparent);
}
.gj-mnt__note {
  flex: 1 1 100%; margin: .1rem 0 0; padding-inline-start: .6rem; color: var(--mnt-muted);
  border-inline-start: 2px solid color-mix(in srgb, var(--tone) 40%, transparent);
  font-size: .8rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere;
}
.gj-mnt__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .4rem; }
.gj-mnt__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.1rem; padding: 0 .85rem;
  color: var(--mnt-on-tone); background: var(--tone-ink); border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: .78rem; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
[data-bs-theme="dark"] .gj-mnt__btn { background: var(--tone); }
.gj-mnt__btn:hover:not(:disabled) { transform: translateY(-1px); color: var(--mnt-on-tone); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--tone) 80%, transparent); }
.gj-mnt__btn:active:not(:disabled) { transform: scale(.98); }
.gj-mnt__btn--ghost { color: var(--tone-ink); background: transparent; border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
[data-bs-theme="dark"] .gj-mnt__btn--ghost { color: var(--tone-ink); background: transparent; }
.gj-mnt__btn--ghost:hover:not(:disabled) { color: var(--tone-ink); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.gj-mnt__btn:disabled { opacity: .6; cursor: progress; }
.gj-mnt__btn:focus-visible, .gj-mnt__close:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.gj-mnt__close {
  display: inline-grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; padding: 0;
  color: var(--mnt-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.gj-mnt__close:hover { color: var(--mnt-ink); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.gj-mnt__error { flex: 1 1 100%; margin: 0; color: #b42318; font-size: .78rem; font-weight: 700; }
[data-bs-theme="dark"] .gj-mnt__error { color: #fc9aad; }
.gj-mnt.is-leaving { animation: gj-mnt-leave .22s ease both; }

@container (max-width: 560px) {
  .gj-mnt { flex-wrap: wrap; align-items: flex-start; padding-inline-end: 2.6rem; }
  .gj-mnt__icon { flex-basis: 2.1rem; width: 2.1rem; height: 2.1rem; }
  .gj-mnt__copy { flex-basis: calc(100% - 3rem); }
  .gj-mnt__actions { flex: 1 1 100%; padding-inline-start: 2.95rem; }
  .gj-mnt > .gj-mnt__close { position: absolute; top: .45rem; inset-inline-end: .45rem; }
}

@keyframes gj-mnt-rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes gj-mnt-leave { to { opacity: 0; transform: translateY(-6px); } }
@keyframes gj-mnt-pulse { 0% { opacity: .55; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.18); } }

/* ---------------- Maintenance page (503) ---------------- */
.gj-mnt-page {
  min-height: 100vh; min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 1.5rem;
  color: var(--mnt-ink);
  font-family: var(--gj-script-font, system-ui), -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--mnt-amber) 16%, transparent), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, var(--mnt-sky) 14%, transparent), transparent 70%),
    var(--theme-canvas, #f3f6f8);
}
.gj-mnt-page__card {
  position: relative; overflow: hidden; width: min(560px, 100%); padding: 2rem 1.75rem 1.6rem;
  background: var(--mnt-surface); border: 1px solid var(--mnt-line); border-radius: 22px;
  box-shadow: 0 30px 80px -24px rgb(9 14 22 / .35);
  animation: gj-mnt-rise .4s cubic-bezier(.2, .8, .2, 1) both;
}
[data-bs-theme="dark"] .gj-mnt-page__card { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 80px -20px rgb(0 0 0 / .75); }
.gj-mnt-page__card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: repeating-linear-gradient(-45deg, var(--mnt-amber) 0 12px, color-mix(in srgb, var(--mnt-amber) 25%, transparent) 12px 24px);
}
.gj-mnt-page__brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; font-size: 1.15rem; }
.gj-mnt-page__brand img { width: 2rem; height: 2rem; }
.gj-mnt-page__icon {
  display: inline-grid; width: 3.6rem; height: 3.6rem; place-items: center; margin-bottom: .9rem;
  color: var(--mnt-on-tone); font-size: 1.6rem; border-radius: 1.1rem;
  background: linear-gradient(135deg, var(--mnt-amber), color-mix(in srgb, var(--mnt-amber) 70%, #000));
  box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--mnt-amber) 80%, transparent);
}
[data-bs-theme="dark"] .gj-mnt-page__icon { background: linear-gradient(135deg, var(--mnt-amber), color-mix(in srgb, var(--mnt-amber) 75%, #fff)); }
.gj-mnt-page__eyebrow { display: block; color: var(--mnt-amber-ink); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.gj-mnt-page h1 { margin: .2rem 0 .6rem; font-size: clamp(1.45rem, 4vw, 1.85rem); font-weight: 900; letter-spacing: -.01em; line-height: 1.15; }
.gj-mnt-page__lead { margin: 0 0 1rem; color: var(--mnt-muted); font-size: .95rem; line-height: 1.55; }
.gj-mnt-page__when {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; padding: .7rem .85rem; color: var(--mnt-amber-ink);
  background: var(--mnt-amber-soft); border-radius: 12px; font-weight: 750; font-size: .9rem;
}
.gj-mnt-page__note { margin: 0 0 1.1rem; padding: .75rem .9rem; background: color-mix(in srgb, var(--mnt-line) 35%, transparent); border-radius: 12px; }
.gj-mnt-page__note strong { display: block; margin-bottom: .2rem; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mnt-muted); }
.gj-mnt-page__note p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.gj-mnt-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.gj-mnt-page__retry {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: 0 1.1rem;
  color: var(--mnt-on-tone); background: var(--mnt-amber-ink); border-radius: 999px; font-weight: 800; text-decoration: none;
  transition: transform .15s ease;
}
[data-bs-theme="dark"] .gj-mnt-page__retry { background: var(--mnt-amber); }
.gj-mnt-page__retry:hover { transform: translateY(-1px); color: var(--mnt-on-tone); }
.gj-mnt-page__retry:focus-visible, .gj-mnt-page__admin:focus-visible { outline: 2px solid var(--mnt-amber); outline-offset: 3px; }
.gj-mnt-page__admin { color: var(--mnt-muted); font-size: .82rem; font-weight: 700; }
.gj-mnt-page__hint { margin: 1rem 0 0; color: var(--mnt-muted); font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .gj-mnt, .gj-mnt.is-leaving, .gj-mnt-page__card { animation: none; }
  .gj-mnt[data-tone="amber"] .gj-mnt__icon::after { animation: none; opacity: 0; }
  .gj-mnt__btn, .gj-mnt-page__retry { transition: none; }
}