/* ============================================================================
   AMOMS — System / status screens (404, 401, 403, 500, offline, maintenance,
   update-required). Shared by all three platforms (admin web, farmer mobile,
   operator tablet). Tokens only — no raw oklch. Consumes amoms-tokens.css.
   `.sys-*` namespace; `-fg` tint tokens auto-flip in dark mode.
   ============================================================================ */

/* Standalone stage (admin web renders its own root, no shell) — carries the
   shared background pattern so the Appearance → Background pattern tweak shows. */
.sys-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px;
  background-color: var(--background);
  background-image: radial-gradient(ellipse 90% 70% at 50% -10%, var(--pattern-glow), transparent 60%), var(--pattern-bg);
  background-size: 100% 100%, var(--pattern-size); background-position: 0 0, 0 0; background-repeat: no-repeat, repeat; }

/* Fills the device screen inside the field-app shells */
.sys-wrap { flex: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(28px, 5vw, 60px); }

.sys-card { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; }

/* Icon badge — tint via modifier */
.sys-badge { width: 84px; height: 84px; border-radius: var(--radius-xl, 20px); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; flex-shrink: 0; }
.sys-badge.neutral  { background: var(--muted);                 color: var(--muted-foreground); }
.sys-badge.warn     { background: var(--severity-medium-soft);  color: var(--severity-medium-fg); }
.sys-badge.danger   { background: var(--danger-soft);           color: var(--danger-fg); }
.sys-badge.info     { background: var(--severity-low-soft);     color: var(--severity-low-fg); }
.sys-badge.brand    { background: var(--avocado-soft);          color: var(--avocado-fg); }

/* Big HTTP status code */
.sys-code { font-size: clamp(52px, 11vw, 72px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--foreground); font-variant-numeric: tabular-nums; margin-bottom: 10px; }

.sys-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 12px; }
.sys-title { font-size: clamp(20px, 3.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); text-wrap: balance; }
.sys-desc { font-size: 15px; line-height: 1.6; color: var(--muted-foreground); margin-top: 10px; max-width: 40ch; text-wrap: pretty; }

/* Actions */
.sys-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; width: 100%; }
.sys-actions.stack { flex-direction: column; align-items: stretch; }

/* Reference / support meta */
.sys-ref { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--muted-foreground); }
.sys-ref b { color: var(--foreground); font-weight: 600; }
.sys-support { margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground); }
.sys-support b { color: var(--foreground); font-weight: 600; }

/* Status list (maintenance window / update notes) */
.sys-note { margin-top: 22px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); padding: 14px 16px; text-align: left; }
.sys-note-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--foreground); }
.sys-note-row + .sys-note-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.sys-note-row .k { color: var(--muted-foreground); flex: 1; }
.sys-note-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Small brand mark above the card (field apps read cleaner with it) */
.sys-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; color: var(--muted-foreground); font-size: 13px; font-weight: 600; }
.sys-brand .m { width: 26px; height: 26px; border-radius: 8px; background: var(--avocado-soft); color: var(--avocado-fg); display: inline-flex; align-items: center; justify-content: center; }

/* Animated offline pulse ring */
.sys-badge.pulse { position: relative; }
.sys-badge.pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 currentColor; opacity: 0.35; animation: sysPulse 2.2s ease-out infinite; }
@keyframes sysPulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.28; } 70% { box-shadow: 0 0 0 18px currentColor; opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sys-badge.pulse::after { animation: none; } }