/* ============================================================
   MYTRA // FACADE
   The "coming soon" calendar page, the "we're having a problem" message,
   and the standalone unavailable.html page. Needs base.css.
   ============================================================ */

/* ---------- "Soon" tag on the Calendar nav item ---------- */
.nav .soon{
  margin-left:auto;padding:2px 6px;border:1px solid rgba(232,163,61,.45);color:var(--warn);
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
}

/* ---------- Calendar placeholder (inside the demo) ---------- */
.cs-wrap{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;padding:6px 0}
.cs-prev{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,transparent 20%,#000 90%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,transparent 20%,#000 90%)}
.cs-col{background:var(--panel-2);padding:8px 6px;display:flex;flex-direction:column}
.cs-col .lbl{font-size:8px;color:var(--dimmer);margin-bottom:4px}
.cs-col i{display:block;background:rgba(79,216,245,.10);border-left:2px solid rgba(79,216,245,.35)}
.cs-col:nth-child(3n) i{background:rgba(79,217,166,.10);border-left-color:rgba(79,217,166,.35)}
.cs-col:nth-child(4n) i{background:rgba(232,163,61,.09);border-left-color:rgba(232,163,61,.35)}
.cs-msg{position:relative;max-width:46ch;text-align:center;padding:26px 22px;background:rgba(11,14,17,.92);
  border:1px solid var(--line-hot);display:flex;flex-direction:column;align-items:center;gap:10px}
.cs-k{color:var(--warn);letter-spacing:.22em}
.cs-t{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(20px,3vw,26px);line-height:1.2}
.cs-d{margin:0;font-size:13.5px;line-height:1.65;color:var(--dim)}
.cs-l{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:5px;text-align:left}
.cs-l li{position:relative;padding-left:16px;font-size:12.5px;color:var(--dim)}
.cs-l li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border:1px solid var(--accent-deep);background:rgba(79,216,245,.2)}
.cs-act{margin-top:8px}

/* ---------- the message: pop-up on the front page, and the standalone page ---------- */
.fx-ov{position:fixed;inset:0;z-index:300;background:rgba(4,6,8,.84);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .25s ease both}
.fx-box{position:relative;width:min(480px,100%);background:var(--panel);border:1px solid var(--line-hot);padding:26px 24px 22px}
.fx-box .st{margin-bottom:14px}
.fx-title{margin:0 0 10px;font-family:var(--disp);font-weight:600;font-size:clamp(21px,3.4vw,26px);line-height:1.2;letter-spacing:-.005em}
.fx-text{margin:0 0 6px;font-size:14px;line-height:1.7;color:var(--dim)}
.fx-text+.fx-text{color:var(--dimmer);font-size:12.5px}
.fx-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.fx-act .btn{flex:1 1 auto}

.fx-page{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
.fx-page main{flex:1;display:flex;align-items:center;justify-content:center;padding:34px 18px}
.fx-page .fx-box{width:min(540px,100%)}