/* ==========================================================================
   MASAR — 6-identity.css
   The national and product identity, and where each mark is allowed.

   Three rules, and they are the whole file:
     1. Maroon is IDENTITY. It marks the product and it emphasises. It is
        never an operational status, because on a wall screen a maroon fill
        beside a red alarm is a hazard.
     2. A motif goes in the BACKGROUND, never on top of a number. It carries
        its alpha inside its own stroke colour, so no later rule can raise it,
        and it is masked so it fades out of the edge it starts from.
     3. One identity mark per surface. Two is decoration.
   ========================================================================== */

:root{
  /* The skyline at the foot of the navigation rail. An original generic
     Gulf-city silhouette — not a depiction of any specific building. */
  --m-skyline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 236 120' preserveAspectRatio='xMidYMax meet'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.13)' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M6 120V86h14v34M20 86l7-6 7 6v34'/%3E%3Cpath d='M40 120V70q6-14 12 0v50'/%3E%3Cpath d='M58 120V58l9-12 9 12v62M67 46V38'/%3E%3Cpath d='M84 120V78h18v42M84 90h18M84 102h18'/%3E%3Cpath d='M108 120V52q10-22 20 0v68M118 30v22'/%3E%3Cpath d='M134 120V64c0-10 16-10 16 0v56'/%3E%3Cpath d='M156 120V44l8-10 8 10v76M156 62h16M156 82h16'/%3E%3Cpath d='M178 120V74q11-16 22 0v46'/%3E%3Cpath d='M206 120V88h12v32M212 88v-9'/%3E%3Cpath d='M224 120V96h8v24'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.05)'%3E%3Cpath d='M6 120V86h14v34zM40 120V70q6-14 12 0v50zM84 120V78h18v42zM134 120V64c0-10 16-10 16 0v56zM178 120V74q11-16 22 0v46zM224 120V96h8v24z'/%3E%3C/g%3E%3C/svg%3E");

  /* The khatam — an eight-point star lattice. Texture on a surface that
     owns its own empty space. Never under a figure. */
  --m-khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='rgba(9,43,76,0.042)' stroke-width='1.4'%3E%3Cpath d='M44 8 56 20 72 20 72 36 84 44 72 52 72 68 56 68 44 80 32 68 16 68 16 52 4 44 16 36 16 20 32 20Z'/%3E%3Cpath d='M44 20 60 28 68 44 60 60 44 68 28 60 20 44 28 28Z'/%3E%3C/g%3E%3C/svg%3E");
  --m-khatam-identity:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='rgba(138,21,56,0.055)' stroke-width='1.4'%3E%3Cpath d='M44 8 56 20 72 20 72 36 84 44 72 52 72 68 56 68 44 80 32 68 16 68 16 52 4 44 16 36 16 20 32 20Z'/%3E%3Cpath d='M44 20 60 28 68 44 60 60 44 68 28 60 20 44 28 28Z'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="dark"]{
  --m-khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='rgba(160,196,232,0.055)' stroke-width='1.4'%3E%3Cpath d='M44 8 56 20 72 20 72 36 84 44 72 52 72 68 56 68 44 80 32 68 16 68 16 52 4 44 16 36 16 20 32 20Z'/%3E%3Cpath d='M44 20 60 28 68 44 60 60 44 68 28 60 20 44 28 28Z'/%3E%3C/g%3E%3C/svg%3E");
  --m-khatam-identity:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='rgba(217,115,141,0.07)' stroke-width='1.4'%3E%3Cpath d='M44 8 56 20 72 20 72 36 84 44 72 52 72 68 56 68 44 80 32 68 16 68 16 52 4 44 16 36 16 20 32 20Z'/%3E%3Cpath d='M44 20 60 28 68 44 60 60 44 68 28 60 20 44 28 28Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Where the lattice is allowed: a surface that owns empty space no opaque
   child sits on, and enough of it to show more than a corner of one star. */
.m-woven{position:relative;isolation:isolate}
.m-woven::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--m-khatam) right top / 88px 88px repeat;
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 58%);
          mask-image:linear-gradient(to left,#000 0%,transparent 58%);
}
html[dir="rtl"] .m-woven::before{
  background-position:left top;
  -webkit-mask-image:linear-gradient(to right,#000 0%,transparent 58%);
          mask-image:linear-gradient(to right,#000 0%,transparent 58%);
}
/* An empty panel is the one place the lattice is centred: a blank white box
   reads as a rendering failure where a woven one reads as "nothing to show". */
.m-empty.m-woven::before{
  background-position:center;background-size:104px 104px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000 0%,transparent 78%);
          mask-image:radial-gradient(60% 60% at 50% 50%,#000 0%,transparent 78%);
}

/* The identity rule — 3px of Al Adaam, once per surface, under a heading.
   A nine-point serration eleven pixels wide reads as a rendering fault, so
   at this size the flag edge becomes a plain bar. */
.m-rule{display:block;width:34px;height:3px;border-radius:2px;background:var(--identity);flex:0 0 auto}
.m-rule--wide{width:52px}
.m-card__head--identity{position:relative}
.m-card__head--identity::after{
  content:'';position:absolute;bottom:-1px;inset-inline-start:var(--card-pad-lg);
  width:34px;height:3px;border-radius:2px;background:var(--identity);
}

/* Demo-data marker. Everything in this build is simulated unless a record
   carries a source; this badge says so wherever a figure could be mistaken
   for a municipal statistic. v6: a copy sits permanently on the top bar. */
.m-demo--top{flex:0 0 auto;margin-inline-end:2px;height:22px}
.m-demo{
  display:inline-flex;align-items:center;gap:5px;
  height:20px;padding:0 8px;border-radius:var(--r-full);
  background:var(--c-sand-100);color:var(--c-sand-500);
  border:1px solid var(--c-sand-200);
  font:var(--ty-label-sm);font-size:10.5px;white-space:nowrap;
}
.m-demo svg{width:11px;height:11px}
html[data-theme="dark"] .m-demo{
  background:rgba(156,134,89,.18);border-color:rgba(156,134,89,.36);color:var(--c-sand-300);
}
.m-verified{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;
  border-radius:var(--r-full);background:var(--ok-soft);color:var(--ok);
  border:1px solid var(--ok-line);font:var(--ty-label-sm);font-size:10.5px;
}
.m-verified svg{width:11px;height:11px}

/* The splash and the sign-in screen — the only two surfaces that carry the
   identity at full strength. */
.m-splash{
  position:fixed;inset:0;z-index:var(--z-toast);
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--c-navy-700) 0%,var(--c-navy-900) 62%,#2A0A16 100%);
  color:#fff;transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow);
}
.m-splash.is-gone{opacity:0;visibility:hidden;pointer-events:none}
/* THE BOOT IS A CARD, NOT A LIST FLOATING IN THE DARK.
   A glass panel holds the identity and the six steps; the logo carries a
   soft glow, the bar shimmers while it moves, and the running step gets a
   spinner so the screen visibly works rather than waits. */
.m-splash__in{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  width:min(470px,92vw);text-align:center;isolation:isolate;
  padding:clamp(26px,5vh,44px) clamp(22px,4vw,40px) clamp(22px,4vh,32px);
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.m-splash__in::before{
  content:'';position:absolute;inset:-70px;z-index:-1;
  background:var(--m-khatam-identity) center / 132px 132px repeat;
  -webkit-mask-image:radial-gradient(64% 64% at 50% 40%,#000 0%,transparent 76%);
          mask-image:radial-gradient(64% 64% at 50% 40%,#000 0%,transparent 76%);
  opacity:.55;
}
.m-splash__in > .m-mark--lg{
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 44px rgba(77,139,255,.4);
}
.m-splash__name{font:700 30px/1.1 var(--font);letter-spacing:.06em}
.m-splash__name span{color:var(--c-maroon-300);margin-inline:6px}
.m-splash__sub{font:var(--ty-body-sm);color:rgba(255,255,255,.62);max-width:36ch}
.m-splash__bar{
  width:100%;height:5px;border-radius:var(--r-full);
  background:rgba(255,255,255,.12);overflow:hidden;direction:ltr;
}
.m-splash__bar > i{
  position:relative;display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--c-blue-400),#7EB1FF);
  box-shadow:0 0 14px rgba(77,139,255,.55);
  transition:width var(--t-slow) var(--ease);overflow:hidden;
}
.m-splash__bar > i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:m-splash-shine 1.2s linear infinite;
}
@keyframes m-splash-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.m-splash__steps{
  width:100%;display:flex;flex-direction:column;gap:2px;text-align:start;
  padding:8px 10px;border-radius:14px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);
}
.m-splash__step{
  display:flex;align-items:center;gap:10px;
  padding:5px 6px;border-radius:8px;
  font:var(--ty-caption);color:rgba(255,255,255,.4);
  transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.m-splash__step b{
  width:15px;height:15px;border-radius:var(--r-full);
  border:1.5px solid currentColor;flex:0 0 auto;position:relative;
}
.m-splash__step.is-now{color:#fff;background:rgba(255,255,255,.05)}
.m-splash__step.is-now b{
  border-color:var(--c-blue-400);border-top-color:transparent;
  animation:m-splash-spin .7s linear infinite;
}
@keyframes m-splash-spin{to{transform:rotate(360deg)}}
.m-splash__step.is-done{color:var(--c-green-300)}
.m-splash__step.is-done b{
  background:currentColor;border-color:currentColor;animation:none;
}
.m-splash__step.is-done b::after{
  content:'';position:absolute;inset:0;margin:auto;width:7px;height:4px;
  border:2px solid #06281A;border-top:0;border-right:0;
  transform:translateY(-1px) rotate(-45deg);
}
.m-splash__step.is-fail{color:var(--c-red-300)}
.m-splash__step em{margin-inline-start:auto;font-style:normal;opacity:.72;font-variant-numeric:tabular-nums}