/*
 * The write-freeze banner and blocked-save page (marswars_common/freeze.py).
 *
 * Its own file, linked by the banner markup itself, so any page can show the
 * banner without loading marswars.css (the Tempus kiosk has its own styles).
 * Dark by default, light under data-bs-theme="light" (theme.js), like marswars.css.
 * Served to every Jinja app at /static/mw/freeze.css; kept current by freeze.js.
 */
:root,
[data-bs-theme="dark"] {
  --mw-ice-top: #0e2a3e;  --mw-ice-bot: #154866;  --mw-ice-text: #e6f7ff;
  --mw-ice-soft: #9fd8f2; --mw-ice-glint: rgba(190, 236, 255, 0.22);
  --mw-ice-chip: rgba(159, 216, 242, 0.14);
}
[data-bs-theme="light"] {
  --mw-ice-top: #e8f6fd;  --mw-ice-bot: #c9e8f7;  --mw-ice-text: #0a435e;
  --mw-ice-soft: #23729a; --mw-ice-glint: rgba(255, 255, 255, 0.7);
  --mw-ice-chip: rgba(35, 114, 154, 0.1);
}
.mw-freeze {
  position: relative; z-index: 1030;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--mw-ice-top), var(--mw-ice-bot));
  box-shadow: inset 0 1px 0 var(--mw-ice-glint), inset 0 -1px 0 var(--mw-ice-soft);
  color: var(--mw-ice-text);
  font-size: 0.875rem; line-height: 1.4;
}
.mw-freeze::before { /* frost glint */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, var(--mw-ice-glint) 48%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0;
  animation: mw-freeze-glint 7s ease-in-out infinite;
}
.mw-freeze-flake {
  flex: none; width: 32px; height: 32px; color: var(--mw-ice-soft);
  animation: mw-freeze-drift 24s linear infinite;
}
.mw-freeze-text { position: relative; display: grid; gap: 1px; min-width: 0; }
.mw-freeze-text strong { font-size: 0.9375rem; }
.mw-freeze-msg { opacity: 0.92; overflow-wrap: anywhere; }
.mw-freeze-since {
  position: relative; margin-left: auto; flex: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-size: 0.75rem;
  background: var(--mw-ice-chip); color: var(--mw-ice-soft); font-variant-numeric: tabular-nums;
}
.mw-freeze-count {
  position: relative; margin-left: auto; flex: none;
  display: grid; justify-items: end; font-variant-numeric: tabular-nums;
}
.mw-freeze-count b { font-size: 1.375rem; line-height: 1.1; }
.mw-freeze-count small {
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mw-ice-soft);
}
.mw-freeze-track {
  display: block; width: 96px; height: 3px; margin-top: 5px; border-radius: 2px; overflow: hidden;
  background: var(--mw-ice-chip);
}
.mw-freeze-fill {
  display: block; height: 100%; width: 0; background: var(--mw-ice-soft); transition: width 1s linear;
}
@media (max-width: 576px) {
  /* flake + text on the first row, the timer or "Since" chip under the text */
  .mw-freeze { flex-wrap: wrap; row-gap: 8px; }
  .mw-freeze-text { flex: 1 1 calc(100% - 46px); }
  .mw-freeze-since, .mw-freeze-count { margin-left: 46px; justify-items: start; }
}
@keyframes mw-freeze-glint { 0%, 55% { background-position: 120% 0; } 100% { background-position: -30% 0; } }
@keyframes mw-freeze-drift { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mw-freeze::before, .mw-freeze-flake { animation: none; }
  .mw-freeze-fill { transition: none; }
}

/* The page a blocked save lands on (FreezeMiddleware). */
.mw-freeze-blocked {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  max-width: 34rem; margin: 0 auto; padding: 64px 16px;
}
.mw-freeze-blocked .mw-freeze-flake { width: 56px; height: 56px; color: var(--mw-ice-soft); animation: none; }
.mw-freeze-blocked h1 { font-size: 1.375rem; margin: 0; }
.mw-freeze-blocked p { margin: 0; opacity: 0.75; }