/* ============================================================
   Al Jubaer Web GIS Portal — premium glass theme (light)

   Two typefaces: Plus Jakarta Sans for display, Inter for text.
   Surfaces are translucent and blurred over a soft aurora field,
   so panels read as glass rather than flat cards. Every section
   carries a cursor-tracked sheen (see assets/js/portal.js) which
   is purely decorative and disabled under prefers-reduced-motion.
   ============================================================ */
:root{
  --bg:#f4f7fa;
  --ink:#0d1726; --ink-2:#3a4a61; --muted:#77859a;
  --line:rgba(16,29,48,.09); --line-2:rgba(16,29,48,.16);
  --brand:#0d9c7a; --brand-2:#0b7c60; --brand-soft:#e6f7f2;
  --blue:#2f6fed; --violet:#7b3fe4; --amber:#e0a022; --rose:#e2572b; --cyan:#0ea5b7;

  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.86);
  --glass-brd:rgba(255,255,255,.75);
  --blur:saturate(180%) blur(18px);

  --sh-sm:0 1px 2px rgba(13,23,38,.05);
  --sh:0 8px 30px rgba(13,23,38,.08);
  --sh-lg:0 22px 60px rgba(13,23,38,.14);
  --r:16px; --r-sm:11px; --r-lg:22px;
  --head:66px;
  --f-display:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  --f-body:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--bg);
  line-height:1.62;font-size:15px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.f-display{font-family:var(--f-display);letter-spacing:-.02em}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;background:var(--brand);color:#fff;padding:11px 18px;
  border-radius:0 0 12px 0;z-index:300;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid rgba(13,156,122,.45);outline-offset:3px;border-radius:8px}

/* ---------- aurora field behind everything ---------- */
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(680px 420px at 12% -6%, rgba(13,156,122,.16), transparent 62%),
    radial-gradient(720px 460px at 88% 2%,  rgba(47,111,237,.14), transparent 62%),
    radial-gradient(620px 420px at 62% 96%, rgba(123,63,228,.11), transparent 62%),
    var(--bg)}
/* faint blueprint grid — cartographic texture, no colour */
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(13,23,38,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,23,38,.022) 1px,transparent 1px);
  background-size:52px 52px}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ---------- glass primitives ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);box-shadow:var(--sh)}

/* cursor-tracked sheen — the "water flow" highlight.
   --mx/--my are written by portal.js; --sheen fades it in on hover. */
.flow{position:relative;isolation:isolate;overflow:hidden}
.flow:before{content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:var(--sheen,0);transition:opacity .45s ease;
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.85), rgba(255,255,255,.28) 34%, transparent 62%),
    radial-gradient(700px circle at var(--mx,50%) var(--my,50%),
      rgba(13,156,122,.16), transparent 58%)}
.flow > *{position:relative;z-index:1}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:100;height:var(--head);
  background:rgba(255,255,255,.66);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line)}
.head .wrap{height:100%;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);
  font-weight:800;font-size:16px;letter-spacing:-.4px}
.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--cyan) 55%,var(--blue));
  box-shadow:0 6px 16px rgba(13,156,122,.34);font-size:15px}
.brand small{display:block;font-family:var(--f-body);font-size:10px;font-weight:700;
  color:var(--muted);letter-spacing:1.1px}
.nav{margin-left:auto;display:flex;align-items:center;gap:3px}
.nav a{padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:background .18s,color .18s}
.nav a:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.nav a.on{color:var(--brand-2);background:var(--brand-soft)}
.nav .cta{background:linear-gradient(135deg,var(--ink),#243450);color:#fff;
  box-shadow:0 5px 16px rgba(13,23,38,.22)}
.nav .cta:hover{background:linear-gradient(135deg,#1b2a42,#2d3f5e);color:#fff}

/* ---------- hero ---------- */
.hero{padding:58px 0 32px}
.hero-in{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end}
.kicker{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd);color:var(--brand-2);
  font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  padding:7px 15px;border-radius:99px;margin-bottom:18px;box-shadow:var(--sh-sm)}
.hero h1{margin:0 0 14px;font-size:clamp(32px,4.8vw,56px);line-height:1.05;font-weight:800;
  letter-spacing:-.035em}
.hero h1 .grad{background:linear-gradient(100deg,var(--brand),var(--cyan) 38%,var(--blue) 68%,var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{margin:0 0 24px;font-size:16.5px;color:var(--ink-2);max-width:56ch}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:13px;
  font-family:var(--f-body);font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent;
  transition:transform .14s,box-shadow .2s,background .2s,border-color .2s,filter .2s}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 8px 22px rgba(13,156,122,.34)}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 10px 28px rgba(13,156,122,.42)}
.btn-ghost{background:var(--glass-strong);border-color:var(--glass-brd);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-2)}
.btn-sm{height:38px;padding:0 15px;font-size:13px;border-radius:10px}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,minmax(96px,1fr));gap:11px}
.stat{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--r);padding:15px 17px;
  box-shadow:var(--sh);min-width:108px}
.stat .n{font-family:var(--f-display);font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.stat .l{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.9px;margin-top:2px}
.stat .ic{color:var(--brand);width:17px;height:17px;margin-bottom:8px}

/* ---------- category tabs ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:11px;margin:10px 0 20px}
.cat{position:relative;isolation:isolate;overflow:hidden;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1.5px solid var(--glass-brd);border-radius:var(--r);padding:16px 11px;text-align:center;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .2s,border-color .2s;display:block}
.cat:before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;
  transition:opacity .2s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.cat:hover:before{opacity:.06}
.cat.on{border-color:currentColor}
.cat.on:before{opacity:.09}
.cat-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;margin:0 auto 10px;
  background:currentColor;box-shadow:0 7px 18px rgba(13,23,38,.2)}
.cat-ic .ic{width:20px;height:20px;color:#fff;stroke-width:1.75}
.cat-n{font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--ink);line-height:1.25}
.cat-c{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}

/* subcategory pills */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:99px;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd);font-size:12.5px;font-weight:700;color:var(--ink-2);
  box-shadow:var(--sh-sm);transition:.18s}
.pill:hover{border-color:var(--brand);color:var(--brand-2);transform:translateY(-1px)}
.pill.on{background:linear-gradient(135deg,var(--ink),#26364f);border-color:transparent;color:#fff}
.pill b{font-weight:800;opacity:.55;font-size:11px}

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:20px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.search{flex:1 1 260px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.7);
  border:1px solid var(--line);border-radius:11px;padding:0 13px;height:40px;transition:.18s}
.search:focus-within{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(13,156,122,.13)}
.search .ic{color:var(--muted);width:15px;height:15px}
.search input{flex:1;border:0;background:transparent;font-family:inherit;font-size:13.5px;
  color:var(--ink);outline:none;min-width:0}
.tb-group{display:flex;gap:5px;align-items:center}
.tb-label{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.9px}
.chip{height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.72);font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.18s}
.chip:hover{border-color:var(--brand);color:var(--brand-2)}
.chip.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;
  box-shadow:0 5px 14px rgba(13,156,122,.32)}

/* ---------- featured spotlight ---------- */
.spot{position:relative;isolation:isolate;overflow:hidden;display:grid;
  grid-template-columns:1.12fr 1fr;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);margin-bottom:28px}
.spot-th{position:relative;min-height:290px;overflow:hidden;background:rgba(255,255,255,.4)}
.spot-th img{width:100%;height:100%;object-fit:cover}
.spot-th .ph{width:100%;height:100%;display:grid;place-items:center;color:#b9c4d2;
  background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(233,239,246,.7))}
.spot-th .ph .ic{width:46px;height:46px}
.spot-b{padding:30px 32px;display:flex;flex-direction:column;justify-content:center;gap:13px}
.spot-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:linear-gradient(100deg,var(--amber),#eb8c1c);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:6px 14px;border-radius:99px;box-shadow:0 6px 16px rgba(224,160,34,.36)}
.spot-b h2{margin:0;font-size:clamp(21px,2.7vw,31px);font-weight:800;letter-spacing:-.9px;line-height:1.14}
.spot-b p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.62}
.spot-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ---------- project grid — three across ---------- */
.crumbs{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin-bottom:15px}
.crumbs a{color:var(--brand-2);font-weight:700}
.crumbs .n{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:99px;
  padding:2px 10px;font-weight:800;font-size:11.5px;color:var(--ink-2)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:44px}
.card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);box-shadow:var(--sh);
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(255,255,255,.95)}
.card-th{position:relative;aspect-ratio:16/10;overflow:hidden;background:rgba(255,255,255,.45)}
.card-th img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.card:hover .card-th img{transform:scale(1.06)}
.card-th .ph{width:100%;height:100%;display:grid;place-items:center;color:#b9c4d2;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(232,238,246,.75))}
.card-th .ph .ic{width:36px;height:36px}
.flags{position:absolute;top:11px;left:11px;right:11px;display:flex;gap:6px;justify-content:space-between}
.flag{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px;border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.3px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--ink);box-shadow:var(--sh-sm);border:1px solid rgba(255,255,255,.7)}
.flag.live{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.flag.feat{background:linear-gradient(135deg,var(--amber),#eb8c1c);color:#fff;border-color:transparent}
.card-b{padding:16px 18px 19px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-cat{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.8px}
.card-cat i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent)}
.card h3{margin:0;font-size:16px;font-weight:700;line-height:1.32;letter-spacing:-.3px}
.card p{margin:0;font-size:13px;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.techs{display:flex;gap:5px;flex-wrap:wrap}
.tech{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.8);border:1px solid var(--line);
  color:var(--ink-2);padding:3px 9px;border-radius:7px}
.tech.more{background:var(--brand-soft);color:var(--brand-2);border-color:transparent}

/* foot row: tech chips left, an "Open →" affordance that slides in on hover */
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:9px;min-height:26px}
.card-go{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  color:var(--brand-2);white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s}
.card-go .ic{width:13px;height:13px;transition:transform .22s}
.card:hover .card-go{opacity:1;transform:none}
.card:hover .card-go .ic{transform:translateX(3px)}
/* the whole card lifts its border into the brand colour on hover */
.card:hover{border-color:rgba(13,156,122,.35)}

/* empty state */
.empty{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:58px 26px;text-align:center;
  color:var(--muted);box-shadow:var(--sh-sm)}
.empty .ic{width:40px;height:40px;color:#b9c4d2;margin-bottom:13px}
.empty h3{margin:0 0 7px;font-size:18px;color:var(--ink);font-weight:700}
.empty p{margin:0 auto;max-width:46ch;font-size:14px}

/* ---------- project detail ---------- */
.detail{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;margin:26px 0 46px;align-items:start}
.shot{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--glass-brd);
  background:var(--glass);box-shadow:var(--sh-lg)}
.panel{position:relative;isolation:isolate;overflow:hidden;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)}
.panel h1{margin:0 0 9px;font-size:27px;font-weight:800;letter-spacing:-.9px;line-height:1.18}
.panel .lead{color:var(--ink-2);font-size:14.5px;margin:0 0 19px}
.meta{display:flex;flex-direction:column;gap:12px;margin:19px 0;padding:17px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta-row{display:flex;gap:12px;font-size:13.5px}
.meta-row .k{width:98px;flex:0 0 auto;color:var(--muted);font-weight:800;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.6px}
.meta-row .v{color:var(--ink);font-weight:600}
.prose{font-size:14.5px;color:var(--ink-2);line-height:1.78}
.prose p{margin:0 0 13px}

/* ---------- viewer ----------
   A column flex layout rather than a fixed-position frame. An <iframe> has a
   UA default height of 150px, so anything that stops the intended rule from
   winning leaves the dashboard squashed into a strip. Here the bar is a fixed
   row and the frame simply takes the rest — there is no height to lose. */
html.viewer,body.viewer{height:100%;margin:0;padding:0;overflow:hidden}
body.viewer{display:flex;flex-direction:column}
body.viewer:before,body.viewer:after{display:none}   /* no aurora behind a full-bleed app */
.vbar{flex:0 0 auto;height:54px;display:flex;align-items:center;gap:15px;padding:0 17px;
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-sm);position:relative;z-index:5}
.vbar .back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--ink-2);padding:9px 13px;border-radius:10px;transition:.18s}
.vbar .back:hover{background:rgba(255,255,255,.9);color:var(--brand-2)}
.vtitle{font-family:var(--f-display);font-size:14.5px;font-weight:800;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vtitle small{display:block;font-family:var(--f-body);font-size:11px;font-weight:600;
  color:var(--muted);letter-spacing:0}
.vactions{margin-left:auto;display:flex;gap:8px;align-items:center}
.vframe{flex:1 1 auto;display:block;width:100%;height:100%;min-height:0;border:0;background:#fff}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:32px 0;margin-top:24px}
.foot .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.foot a{color:var(--ink-2);font-weight:600}
.foot a:hover{color:var(--brand-2)}
.foot .sp{margin-left:auto}

/* ---------- notice ---------- */
.notice{background:rgba(255,250,235,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(224,160,34,.35);color:#7a5407;border-radius:var(--r);
  padding:14px 17px;font-size:13.5px;margin:18px 0;box-shadow:var(--sh-sm)}
.notice b{font-weight:800}
.notice a{color:#7a5407;text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .spot{grid-template-columns:1fr}
  .spot-th{min-height:200px}
  .spot-b{padding:24px}
  .nav a span{display:none}
  .nav a{padding:9px 11px}
}
@media (max-width:640px){
  .hero{padding:36px 0 22px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr;gap:18px}
  .toolbar{padding:11px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .flow:before{display:none}
}