/* SPDX-License-Identifier: LicenseRef-Airbus-Proprietary */
/* alis:need NEED-3 */
/* shell.css: the metaop frame of GeoShare.
   Part 1 copies, unchanged, the first copy of each rule of the design
   reference's metaop.css (the file is concatenated twice) for .topbar, .rail,
   .rail-*, .rf-rolepill, .rf-sev, .rf-mob-only, .rf-hide-m and .rf-shell-*, with
   their 900 and 640 px media blocks. Part 2 is GeoShare's own: the layout of
   the page, rail and tab bar links drawn as the metaop buttons, and popovers
   that take the .rf-shell-pop position. The 760 px rule of gs.css is not kept. */

.topbar{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:0 10px 0 16px;height:56px;background:var(--grad);color:var(--bg);flex:none;position:relative;z-index:50;box-shadow:0 1px 0 rgba(var(--ink-rgb),.08);min-width:0}
.topbar .tb-sp{flex:1;min-width:4px}
.topbar .logo{display:inline-flex;flex:none}
.topbar .logo svg{width:20px;height:20px;display:block}
.topbar .name{font-weight:800;font-size:1.05rem;line-height:1;letter-spacing:-.02em;flex:none}
.topbar .byairbus{font-size:.6rem;margin-left:4px;flex:none}
.topbar .airbuslogo svg{height:12px}
.rail{width:64px;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;background:var(--bg);border-right:1px solid var(--line);z-index:7;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{flex:none;width:52px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;border:0;background:transparent;color:var(--muted);border-radius:6px;font:inherit;transition:background .12s,color .12s}
.rail button .ic{width:19px;height:19px}
.rail-sec{display:block;width:100%;text-align:center;font-size:.5rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.7;margin:2px 0 3px}
.rail-admin,.rail-group{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.rail button span{font-size:.58rem;font-weight:700;letter-spacing:.02em}
.rail button:hover{background:var(--navy-50);color:var(--navy)}
.rail button.on{background:var(--navy);color:var(--bg)}
.rail button.on::before{content:"";position:absolute;left:-6px;top:9px;bottom:9px;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.rail button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rail button{position:relative}
.rail-n{position:absolute;top:4px;right:6px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--red-500);color:var(--bg);font-size:.56rem;font-weight:800;line-height:15px;text-align:center}
.rf-sev{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--blue-400)}
.rf-sev.up{background:var(--ok)}
.rf-sev.warn{background:var(--amber-375)}
.rf-sev.bad{background:var(--red-500)}
.rf-sev.blue{background:var(--blue-575)}
.rf-sev.grey{background:var(--blue-400)}
.rf-rolepill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:.78rem;font-weight:800;white-space:nowrap;flex:none}
.rf-rolepill .ic{width:15px;height:15px}
.rf-rolepill.adm{background:var(--amber-225);color:var(--amber-950)}
.rf-rolepill.op{background:var(--amber-425);color:var(--amber-950)}
/* The Space manager pill (NEED-48 AC-006), between the Admin's orange and the
   Manager's light amber: the accent blue, white text above 4.5:1. */
.rf-rolepill.sm{background:var(--accent);color:var(--bg)}
.rf-mob-only{display:none}
.rf-shell-brand{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.rf-shell-mark{width:28px;height:28px;border-radius:6px;background:var(--blue-500);color:var(--bg);display:flex;align-items:center;justify-content:center;flex:none}
.rf-shell-by{display:inline-flex;align-items:center;color:var(--bg)}
.topbar .byairbus{opacity:1}
.rf-shell-vsep{width:1px;height:24px;background:rgba(var(--bg-rgb),.22);flex:none;margin:0 4px}
.topbar.rf-shell-op{box-shadow:0 3px 0 var(--amber-425)}
.rf-shell-hbtn{height:40px;min-width:40px;border-radius:6px;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;cursor:pointer;font-family:var(--font);font-size:.82rem;position:relative;flex:none}
.rf-shell-hbtn:hover,.rf-shell-hbtn.on,.rf-shell-hbtn.gs-on{background:rgba(var(--bg-rgb),.12)}
a.rf-shell-hbtn{text-decoration:none}
.rf-shell-hbtn:focus-visible{outline:2px solid rgba(var(--bg-rgb),.8);outline-offset:1px}
.rf-shell-hbtn .ic{width:18px;height:18px}
.rf-shell-lbl{font-weight:700;font-size:.82rem;white-space:nowrap}
.rf-shell-ctxbtn{flex:0 1 auto;min-width:0;max-width:340px;justify-content:flex-start;padding:0 8px}
.rf-shell-ctxbtn .ic{width:15px;height:15px;opacity:.8}
.rf-shell-ctx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left;min-width:0}
.rf-shell-ctx b{font-size:.84rem;font-weight:800;max-width:100%}
.rf-shell-ctx2{display:flex;align-items:center;gap:6px;font-size:.72rem;opacity:.78;max-width:100%;min-width:0}
.rf-shell-ctx2 .rf-sev{width:8px;height:8px}
.rf-shell-role{flex:none}
.rf-shell-badge{position:absolute;top:3px;right:1px;min-width:17px;height:17px;border-radius:999px;background:var(--red-650);color:var(--bg);font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px}
.rf-shell-lbl+.rf-shell-badge{position:static}
.rf-shell-inbox.is-zero .ic{opacity:.7}
.rf-shell-me{padding:0 6px}
.rf-shell-ava{width:32px;height:32px;border-radius:50%;background:var(--blue-500);color:var(--bg);font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center;flex:none}
.rf-shell-ava .ic{width:16px;height:16px}
.rf-shell-signin{color:var(--bg);font-weight:700;font-size:.82rem;border:1px solid rgba(var(--bg-rgb),.45);border-radius:6px;padding:8px 12px;text-decoration:none;flex:none}
.rf-shell-signin:hover{background:rgba(var(--bg-rgb),.14)}
.rf-shell-pop{position:fixed;top:60px;right:12px;width:380px;max-width:calc(100vw - 24px);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(var(--ink-rgb),.18);z-index:60;display:flex;flex-direction:column;max-height:min(620px,calc(100vh - 76px));overflow:hidden;font-size:.86rem;line-height:1.4}
.rf-shell-pop[hidden],.rf-shell-side[hidden],.rf-shell-veil[hidden]{display:none}
.rf-shell-mepop{width:320px}
.rf-shell-poph{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
.rf-shell-poph b{color:var(--ink)}
.rf-shell-popb{overflow-y:auto;min-height:0;flex:1}
.rf-shell-popsearch{padding:10px 16px;border-bottom:1px solid var(--line);flex:none}
.rf-shell-popsearch .rf-search input{border:0;background:transparent;box-shadow:none;padding:0;min-height:0}
.rf-shell-ctxpop{overflow-y:auto}
.rf-shell-sech{display:flex;align-items:baseline;gap:8px;padding:14px 16px 6px}
.rf-shell-sech .rf-quiet{margin-left:auto}
.rf-shell-sep{border-top:1px solid var(--line)}
.rf-shell-mi{display:flex;align-items:center;gap:10px;padding:10px 16px;border:0;background:var(--bg);width:100%;text-align:left;font-family:var(--font);font-size:.86rem;cursor:pointer;color:var(--ink);text-decoration:none;min-height:44px}
.rf-shell-mi:hover{background:var(--navy-50)}
.rf-shell-mi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rf-shell-mi.on{font-weight:800}
.rf-shell-mi .rf-quiet{font-weight:400}
.rf-shell-mi:disabled{opacity:.55;cursor:progress}
.rf-shell-mi .ic{width:17px;height:17px;color:var(--muted)}
.rf-shell-link{color:var(--accent);font-weight:700}
.rf-shell-grow{flex:1;min-width:0}
.rf-shell-check{display:inline-flex;color:var(--accent)}
.rf-shell-check .ic{width:16px;height:16px;color:var(--accent)}
.rf-shell-gsub{display:flex;align-items:center;gap:8px;margin-top:4px}
.rf-shell-gauge{width:120px;height:4px;flex:none}
.rf-shell-gauge i{width:0}
.rf-shell-none{padding:14px 16px;color:var(--muted)}
.rf-shell-err{margin:8px 16px 12px;padding:8px 10px;border-radius:6px;background:var(--red-25);color:var(--red-950);font-size:.82rem}
.rf-shell-themes{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 12px}
.rf-shell-themes button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 10px;font-family:var(--font);font-size:var(--ctl-fs);font-weight:700;color:var(--muted);cursor:pointer;min-height:32px}
.rf-shell-themes button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--bg)}
.rf-shell-meta{display:flex;gap:12px;padding:10px 16px;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.rf-shell-out{font-weight:700}
.rf-shell-leaving{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-rgb),.86);color:var(--navy);font-weight:700;font-size:1rem}
.rf-shell-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.rf-shell-item:last-child{border-bottom:0}
.rf-shell-item>.rf-sev{margin-top:6px}
.rf-shell-item.unread{background:var(--bg-soft)}
.rf-shell-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.84rem;text-align:left}
.rf-shell-open{border:0;background:none;padding:0;font-family:var(--font);color:var(--ink);cursor:pointer}
.rf-shell-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rf-shell-word{font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap}
.rf-shell-word.warn{color:var(--amber-750)}
.rf-shell-word.bad{color:var(--danger)}
.rf-shell-word.blue{color:var(--blue-675)}
.rf-shell-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.rf-shell-ico .ic{width:16px;height:16px}
.rf-shell-ico.act{background:var(--amber-75);color:var(--warn)}
.rf-shell-ico.ok{background:var(--green-100);color:var(--green-625)}
.rf-shell-ico.bad{background:var(--red-25);color:var(--red-950)}
.rf-shell-ico.plat{background:var(--blue-25);color:var(--blue-675)}
.rf-shell-ico.grey{background:var(--navy-50);color:var(--muted)}
.rf-shell-meta2{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px}
.rf-shell-meta2 time{font-size:.75rem;color:var(--muted);font-weight:700}
.rf-shell-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
.rf-shell-scope{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap}
.rf-shell-sc-me{background:var(--blue-25);color:var(--blue-675)}
.rf-shell-sc-grp{background:var(--green-100);color:var(--green-825)}
.rf-shell-sc-cust{background:var(--violet-150);color:var(--violet-825)}
.rf-shell-sc-plat{background:var(--navy-50);color:var(--muted)}
.rf-shell-veil{position:fixed;top:56px;left:0;right:0;bottom:0;background:rgba(var(--ink-rgb),.14);z-index:59}
.rf-shell-side{position:fixed;top:56px;right:0;bottom:0;width:420px;max-width:100%;background:var(--bg);color:var(--ink);border-left:1px solid var(--line);box-shadow:-16px 0 40px rgba(var(--ink-rgb),.12);z-index:60;display:flex;flex-direction:column;font-size:.86rem;line-height:1.4}
.rf-shell-sideh{font-size:1.05rem;color:var(--navy)}
.rf-shell-side .rf-seg{display:flex;flex-wrap:wrap}
.rf-shell-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--bg);border-top:1px solid var(--line);justify-content:space-around;padding:0 4px env(safe-area-inset-bottom)}
.rf-shell-tabbar button{flex:1;min-width:0;min-height:58px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-family:var(--font);font-size:.68rem;font-weight:700;cursor:pointer;position:relative}
.rf-shell-tabbar button .ic{width:20px;height:20px}
.rf-shell-tabbar button.on{color:var(--navy)}
.rf-shell-tabbar button.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 2px 2px;background:var(--accent)}
.rf-shell-moreb{display:flex;flex-direction:column;padding:6px 0}
.rf-shell-moreb .rf-shell-mi{min-height:48px}
.rf-shell-moreb .rail-n{position:static;margin-left:auto}
.rf-shell-tabbar .rail-n{right:auto;left:calc(50% + 4px)}
@media (max-width:900px){
  .rf-hide-m{display:none !important}
  .rf-shell-ctxbtn{max-width:220px}
}
@media (max-width:640px){
  .rf-mob-only{display:flex}
  .topbar{padding:0 6px 0 10px;gap:4px}
  .topbar .name,.rf-shell-by,.rf-shell-vsep{display:none}
  .rf-shell-role{padding:0 7px}
  .rf-shell-rolew{display:none}
  .rf-shell-ctxbtn{max-width:36vw;padding:0 4px}
  .rf-shell-ctx2{display:none}
  .rf-shell-hbtn{min-width:40px;padding:0 8px}
  .rf-shell-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .rf-shell-lbl+.rf-shell-badge{position:absolute}
  .rf-shell-pop{left:12px;right:12px;width:auto}
  .rf-shell-side{top:0;width:100%;border-left:0}
  .rf-shell-veil{display:none}
  .hub .rail{display:none}
}

/* ---- GeoShare layout ---- */
/* The page fills the window: a column whose main area grows, so that a short
   page leaves no band under its last element. Menus are native popovers. */
body.hub{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg-soft);font-family:var(--font);color:var(--ink)}
body.hub>.topbar{position:sticky;top:0}
.hubbody{display:flex;flex:1;min-width:0}
body.hub .rail{position:sticky;top:56px;align-self:flex-start;height:calc(100vh - 56px)}
.gs-side{flex:1;min-width:0;display:block;background:var(--bg-soft);padding:18px 22px 40px}
.gs-side h1{margin:0 0 10px;color:var(--navy)}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--bg);color:var(--navy);padding:10px 14px;border-radius:6px;font-weight:700}
.skip:focus{top:8px}
body.pub{margin:0;min-height:100vh;display:flex;flex-direction:column}
body.pub>main{flex:1}
.rf-shell-brand{color:inherit;text-decoration:none}
body.bare{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);font-family:var(--font);color:var(--ink);padding:16px}
.bare-card{max-width:440px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:28px 32px;box-shadow:0 20px 50px rgba(var(--ink-rgb),.12)}
.bare-card h1{margin:0 0 10px;color:var(--navy);font-size:1.4rem}
.rf-shell-ctxbtn .rf-ell{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-shell-pop .rf-shell-ctx2{display:block;opacity:.7}
.rf-shell-pop[popover]{left:auto;bottom:auto;margin:0;padding:0;overflow:hidden}
.rf-shell-pop[popover]:not(:popover-open){display:none}
/* alis:need NEED-37 */
/* alis:ac NEED-37:AC-001 The workspace menu opens under the selector, anchored where the browser has it. */
.rf-shell-ctxbtn{anchor-name:--gs-ctx}
/* alis:ac NEED-37:AC-002 The fixed left comes first: a browser without anchor() keeps it, at the left of the bar. */
@media (min-width:641px){
  .rf-shell-ctxpop[popover]{position-anchor:--gs-ctx;right:auto;left:200px;left:max(12px,min(anchor(left),calc(100vw - 380px - 12px)))}
}
.rf-shell-moreb[popover]{top:auto;bottom:calc(58px + env(safe-area-inset-bottom) + 8px)}
.rf-shell-mepop form{margin:0}
.rf-shell-srname{display:none}
.rf-shell-ava{background:var(--accent)}
.rail-sec{color:var(--muted);opacity:1}
.rf-shell-email{color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}
.rail a{flex:none;width:52px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;border:0;background:transparent;color:var(--muted);border-radius:6px;font:inherit;transition:background .12s,color .12s}
.rail a .ic{width:19px;height:19px}
.rail a span{font-size:.58rem;font-weight:700;letter-spacing:.02em}
.rail a:hover{background:var(--navy-50);color:var(--navy)}
.rail a.on{background:var(--navy);color:var(--bg)}
.rail a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rail a{position:relative}
.rf-shell-tabbar a{flex:1;min-width:0;min-height:58px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-family:var(--font);font-size:.68rem;font-weight:700;cursor:pointer;position:relative}
.rf-shell-tabbar a .ic{width:20px;height:20px}
.rf-shell-tabbar a.on{color:var(--navy)}
.rf-shell-tabbar a.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 2px 2px;background:var(--accent)}
.rail a{text-decoration:none}
.rf-shell-tabbar a{text-decoration:none}
.rf-shell-tabbar a:focus-visible,.rf-shell-tabbar button:focus-visible,.rail a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:640px){
  .rf-shell-srname{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rf-shell-pop[popover]{left:12px}
  .gs-side{padding-bottom:calc(58px + env(safe-area-inset-bottom) + 16px)}
  .mtb{flex-wrap:wrap;row-gap:2px}
  .nfb .mtb-txt,.nfb-d{flex-basis:calc(100% - 90px);white-space:normal;overflow-wrap:anywhere}
  .nfb-d summary{flex-wrap:wrap}
  .mtb-x{width:32px;height:32px;position:relative}
  .nfb-more{min-height:32px;padding:0 12px;font-size:var(--ctl-fs);position:relative}
  .mtb-x::before,.nfb-more::before{content:"";position:absolute;inset:-4px 0}
}
/* INFORMATION BANNERS (NEED-29), ported from metaop's banners.css (NEED-351, NEED-408).
   Under the top bar, above the rail and the page. WRITTEN by the Admin, in two
   colours that come from tokens: info is --accent, warning is --warn, both with
   --bg text above 4.5:1 (metaop's own blue was 4.2:1). One line, cut with an
   ellipsis; a native details unfolds it in place, with no script. */
.mtb-wrap{flex:none;position:relative;z-index:41}
.mtb{position:relative;display:flex;align-items:center;gap:10px;padding:4px 14px;font-size:.8rem;line-height:1.35}
.mtb-ic{width:17px;height:17px;flex:none}
.mtb-txt{flex:1;min-width:0}
.mtb-x{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;width:22px;height:22px;border-radius:3px;flex:none;display:flex;align-items:center;justify-content:center}
.mtb-x .ic{width:14px;height:14px}
.mtb-x:hover,.nfb-more:hover{background:rgba(var(--bg-rgb),.18)}
.mtb-x:focus-visible,.nfb-d summary:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.nfb{font-weight:600}
.nfb-info{background:var(--accent);color:var(--bg)}
.nfb-warning{background:var(--amber-550);color:var(--ink)}
/* alis:need NEED-38 alis:ac AC-001: the warning level takes the brand orange of
   the palette with ink text (white on it is under 4.5:1); its hover and the More
   border follow the ink instead of the white of the info level. */
.nfb-warning .mtb-x:hover,.nfb-warning .nfb-more:hover{background:rgba(var(--ink-rgb),.12)}
.nfb-warning .nfb-more{border-color:rgba(var(--ink-rgb),.55)}
.nfb a{color:inherit;text-decoration:underline}
.nfb .mtb-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* NEED-117: the rule above comes after the one of the phone block and won over it: on a phone the text wraps, as that block says, instead of being cut with no full text to read. */
@media (max-width:640px){.nfb .mtb-txt{white-space:normal;overflow:visible;text-overflow:clip}}
.nfb-w{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nfb-hide{margin:0;display:flex;flex:none}
.nfb-d{flex:1;min-width:0}
.nfb-d summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;border-radius:3px}
.nfb-d summary::-webkit-details-marker{display:none}
.nfb-d .nfb-cut{flex:1}
.nfb-d .nfb-full{display:none}
.nfb-d[open] .nfb-cut{display:none}
.nfb-d[open] .nfb-full{display:block;white-space:normal;overflow-wrap:anywhere;margin-top:2px}
.nfb-more{flex:none;display:inline-flex;align-items:center;border:1px solid rgba(var(--bg-rgb),.55);color:inherit;font-size:.7rem;font-weight:700;border-radius:3px;padding:0 8px}
/* The Services popover: one row per service, listed on every page (NEED-4). */
.rf-shell-svcpop{width:340px}
.rf-shell-svclist{list-style:none;margin:0;padding:6px 0;overflow:auto}
.rf-shell-svclist li{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:13px}
.rf-shell-svcname{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.rf-shell-svcword{color:var(--muted);font-weight:700;white-space:nowrap}
.rf-shell-svcfoot{padding:10px 16px;border-top:1px solid var(--line);font-size:12px}
.rf-shell-svcpop .rf-status-dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block;background:var(--blue-400)}
.rf-shell-svcpop .rf-status-dot.up{background:var(--ok)}
.rf-shell-svcpop .rf-status-dot.warn{background:var(--amber-375)}
.rf-shell-svcpop .rf-status-dot.down{background:var(--red-500)}
.rf-shell-svcpop .rf-status-dot.maint{background:var(--blue-575)}
/* THE RULE ON SENSITIVE DATA (NEED-40, AC-002): one note drawn by
   web.sensitiveNotice and the sign-in pages, the same on every page that
   carries it; it wraps on a phone. alis:need NEED-40 alis:ac AC-002 */
/* ACT AS (NEED-28), ported from metaop's .impbar (banners.css, NEED-217 and
   NEED-254). Violet, a colour foreign to the brand on purpose: this banner
   must look like nothing else on screen. White on --violet-500 is above 4.5:1;
   no opacity on its text, which would take it under. It sticks right below the
   top bar (56px); the rail, the drawer and the veil move down by its height
   (34px, 60px on a phone where it takes two lines), so that nothing hides
   under it.
   alis:need NEED-28
   alis:ac AC-012 */
.gs-actas{position:sticky;top:56px;z-index:49;display:flex;align-items:center;gap:10px;min-height:34px;box-sizing:border-box;background:var(--violet-500);color:var(--bg);padding:4px 14px;font-family:inherit;font-size:.78rem;font-weight:700;line-height:1.3;min-width:0}
.gs-actas-k{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.gs-actas-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-actas-id,.gs-actas-m{font-size:.72rem;font-weight:600}
.gs-actas-f{margin:0 0 0 auto;display:flex;flex:none}
.gs-actas-x{font:inherit;font-size:.72rem;font-weight:700;color:var(--violet-500);background:var(--bg);border:0;border-radius:4px;padding:4px 12px;min-height:26px;cursor:pointer}
.gs-actas-x:hover{background:rgba(var(--bg-rgb),.86)}
.gs-actas-x:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
body.gs-acting.hub .rail{top:90px;height:calc(100vh - 90px)}
body.gs-acting .rf-shell-side,body.gs-acting .rf-shell-veil{top:90px}
.gs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){
  .gs-actas{flex-wrap:wrap;row-gap:2px;column-gap:8px;padding:4px 12px;min-height:60px;max-height:60px;overflow:hidden}
  .gs-actas-id{display:none}
  .gs-actas-k{font-size:.62rem}
  .gs-actas-who{max-width:calc(100vw - 150px)}
  .gs-actas-x{min-height:32px;padding:4px 14px}
  /* The full-screen panels (Inbox) start under the bar and the banner, so that
     Leave stays on screen while one is open (NEED-28 AC-011). */
  body.gs-acting .rf-shell-veil,body.gs-acting .rf-shell-side{top:116px}
}
/* THE INBOX POPOVER (alis:ac NEED-47:AC-001). The Inbox opens over the page
   the person is on, as metaop's panel does, instead of a page of its own: a
   native popover of the top bar, no script. The rules of inbox.css apply to
   the full Inbox only, so the popover carries its own, in the same tokens. */
.rf-shell-inboxpop{width:400px}
.rf-shell-inboxpop .rf-shell-poph h2{margin:0;font-size:1rem;font-weight:500}
.rf-shell-inboxpop .rf-shell-poph form{margin:0}
.rf-shell-inboxpop .rf-micro{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--muted)}
.rf-shell-inboxpop .rf-iconbtn{width:36px;height:36px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;cursor:pointer}
.rf-shell-inboxpop .rf-iconbtn:hover{background:var(--navy-50)}
.rf-shell-inboxpop .rf-iconbtn:focus-visible,.rf-shell-inboxpop .rf-seg a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rf-shell-inboxpop .gs-inbox-filters{padding:10px 16px;flex:none}
.rf-shell-inboxpop .rf-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
.rf-shell-inboxpop .rf-seg a{display:inline-flex;align-items:center;padding:6px 12px;min-height:34px;font-size:var(--ctl-fs);font-weight:700;color:var(--muted);text-decoration:none;white-space:nowrap}
.rf-shell-inboxpop .rf-seg a[aria-pressed="true"]{background:var(--navy);color:var(--bg)}
.rf-shell-inboxpop .gs-inbox-list{overflow-y:auto;flex:1;min-height:0}
.rf-shell-inboxpop .rf-shell-item>a.rf-shell-grow{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none}
.rf-shell-inboxpop .rf-shell-item>a.rf-shell-grow b{color:var(--ink);font-weight:700}
.rf-shell-inboxpop .rf-shell-item>.btn{flex:none}
.rf-shell-popfoot{padding:10px 16px;border-top:1px solid var(--line);flex:none;font-weight:700}
@media (max-width:640px){
  .rf-shell-inboxpop[popover]{top:0;bottom:0;left:0;right:0;width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;padding-bottom:env(safe-area-inset-bottom);z-index:70}
  .rf-shell-inboxpop .rf-iconbtn{width:40px;height:40px}
  .rf-shell-inboxpop .rf-seg a,.rf-shell-inboxpop .rf-shell-item>.btn,.rf-shell-inboxpop .rf-shell-poph .btn{min-height:40px}
  .rf-shell-inboxpop .rf-shell-item .rf-quiet{overflow-wrap:anywhere}
}
/* The unread badge (alis:ac NEED-47:AC-001): white on --red-650 is 5.5:1
   (on --red-500 it was 4.4:1, under AA at this size); the button's name is
   its visible text and a hidden " unread". The popover's own hidden words
   too: base.css, which defines .rf-sr, is not on every page. */
/* Act as (NEED-28 AC-011) with the Inbox popover of NEED-47: the menus open
   under the bar and the Act as banner, and on a phone the full-screen Inbox
   starts under them, so that Leave stays on screen while it is open.
   alis:need NEED-28
   alis:ac AC-011 */
body.gs-acting .rf-shell-pop[popover]{top:94px;max-height:min(620px,calc(100vh - 110px))}
@media (max-width:640px){
  body.gs-acting .rf-shell-inboxpop[popover]{top:116px;height:calc(100% - 116px)}
}
.rf-shell-sr,.rf-shell-inboxpop .rf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* THE VERSION AND THE UTC TIME OF THE TOP BAR (NEED-49, alis:ac AC-001 AC-005).
   The version pill follows the brand and opens What's new; the time sits
   before the Services button. Both read white on the bar (--bg on --grad),
   in tabular figures, and the time keeps a fixed width so that a new minute
   moves nothing. On a phone the bar has no room: both leave it, the account
   menu line keeps them. */
.rf-shell-ver{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(var(--bg-rgb),.45);color:var(--bg);font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap;flex:none;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.rf-shell-ver:hover{background:rgba(var(--bg-rgb),.14)}
.rf-shell-ver:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
.rf-shell-clock{color:var(--bg);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;min-width:5.6em;text-align:right;margin-right:4px}
.rf-shell-mclock time{font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .rf-shell-ver,.rf-shell-clock{display:none}
}
/* THE BAR AT TABLET AND NARROW DESKTOP WIDTHS (NEED-107, alis:ac AC-007). From 641 to 1280 px the
   rail stays the 64 px icon rail and the bar folds what does not fit, so that it never overflows
   and no two items overlap: up to 1280 px the version and the UTC time leave the bar; up to
   1024 px the role pill keeps its icon (its word is in its title), the Services and Inbox words
   are read from their accessible name only, and the "by Airbus" mark goes. Each folded item stays
   in the account menu: the version, the time and the role. */
@media (min-width:641px) and (max-width:1280px){
  .rf-shell-ver,.rf-shell-clock{display:none}
}
@media (min-width:641px) and (max-width:1024px){
  .rf-shell-by,.rf-shell-vsep{display:none}
  .rf-shell-role{padding:0 7px}
  .rf-shell-rolew{display:none}
  .rf-shell-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .rf-shell-lbl+.rf-shell-badge{position:absolute}
}
.rf-shell-mrole b{color:var(--ink)}
/* MENUS NEXT TO THEIR BUTTON (NEED-58). Every in-page menu popover carries
   gs-anchor and opens under the button that opened it, aligned on its left
   edge, as metaop's place() does with a script: here the implicit anchor of
   popovertarget and CSS anchor positioning do it, with no script. When there
   is no room it flips above, or to the other side of the button. The top bar
   menus keep their own place (rf-shell-pop, rf-shell-ctxpop of NEED-37).
   Without anchor positioning, and on a phone, the menu is centred in the
   viewport with 12 px gutters, never left in a corner.
   alis:need NEED-58
   NEED-116: a form panel (gs-pop) is never matched, it is bound to the
   viewport by workspaces.css. alis:need NEED-116 alis:ac AC-002
   alis:ac AC-001 */
html body [popover].gs-anchor.gs-anchor:not(.gs-pop){position:fixed;inset:auto;margin:6px 0;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}
@supports not (position-area:block-end){
  html body [popover].gs-anchor.gs-anchor:not(.gs-pop){inset:0;margin:auto}
}
@media (max-width:640px){
  html body [popover].gs-anchor.gs-anchor:not(.gs-pop){inset:0;margin:auto;position-area:none;width:calc(100vw - 24px)}
}
/* THE MARK OF THE RULE ON SENSITIVE DATA (NEED-113, alis:ac AC-004 AC-006 AC-007). First item of the
   right group of every header. A chip outlined in the bar white with an amber icon, not filled, so
   that it is not read as the amber role pill. Above 1024 px: icon and full label, cut with an
   ellipsis when the room is short; at 1024 px and below (the phone rules at 640 px included): icon
   and phone word, the accessible name staying the full label. The popover is anchored to the mark
   by gs-anchor (NEED-118) and draws its own card below. NEED-125: at 640 px and below the mark never
   shrinks below its icon and word (flex none, min-width max-content, over the 40 px floor of the header
   buttons); the workspace selector, which shrinks with its ellipsis, gives way. */
/* NEED-139 alis:ac AC-001: a solid red pill, text and icon in white (5.4:1 on --red-575). */
.rf-shell-sens{flex:0 1 auto;min-width:0;max-width:300px;gap:6px;padding:0 10px;border:1px solid var(--red-575);border-radius:999px;height:32px;background:var(--red-575);color:var(--bg);font-weight:700;overflow:hidden}
.rf-shell-sens .ic{width:16px;height:16px;flex:none;color:var(--bg)}
.rf-shell-sens:hover,.rf-shell-sens.on,.rf-shell-sens.gs-on{background:var(--red-650);border-color:var(--red-650)}
.rf-shell-sensl,.rf-shell-sensw{font-size:.78rem;font-weight:700;line-height:1.2}
.rf-shell-sensl{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-shell-sensw{display:none;white-space:nowrap}
.rf-shell-sens:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
.rf-shell-senspop{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(var(--ink-rgb),.18);padding:0;overflow:hidden;width:340px;font-size:.86rem;line-height:1.4;z-index:60}
.rf-shell-senspop:not(:popover-open){display:none}
/* One card: only the popover draws a box; the title row keeps its separator (NEED-118). */
.rf-shell-senspop .rf-shell-poph,.rf-shell-senspop .rf-shell-senstext{background:none;box-shadow:none;border-top:0;border-left:0;border-right:0}
.rf-shell-senspop .rf-shell-senstext{border-bottom:0}
.rf-shell-senstext{margin:0;padding:14px 16px;overflow-wrap:anywhere;overflow-y:auto}
@media (min-width:1025px) and (max-width:1280px){
  .rf-shell-sens{max-width:200px}
}
@media (max-width:1024px){
  .rf-shell-sensl{display:none}
  .rf-shell-sensw{display:block}
}
@media (max-width:640px){
  .rf-shell-sens{padding:0 8px;gap:4px;flex:none;min-width:max-content}
  .rf-shell-sensl,.rf-shell-sensw{font-size:.72rem}
}