/* ============================================================================
   The shell: the white strip, the teal bar, the menus, the bell, Find, the account menu (tools redesign S1, 29 October 2026).
   Source: the approved canvas (TGP AI Team/CTO/briefs/tools-redesign/canvas/project, DESIGN-RULES.md). Locked TGP palette, Poppins, and IBM Plex Sans
   Arabic for right-to-left. Every class starts x- so it never meets the old theme's (.band, .btn, .card ...); every colour is a token on :root.
   Light by default; dark when <html data-theme="dark"> or, with no choice made, when the system asks for it (the same rule as tgp-theme.css).
   No grey, no near-black, no amber or yellow. Watch is cyan with a diamond. The only gradient is the 3 px line on top of the strip.
   Nothing is cut short: long text wraps, there is no ellipsis anywhere. Animations are 120 to 240 ms and are off under prefers-reduced-motion.
   ========================================================================= */
:root{
  --x-bg:#FFFFFF;--x-sf:#FFFFFF;--x-s2:#F4F8FB;--x-tx:#1F5D96;--x-mu:#356DA0;--x-ln:#1F5D9624;--x-fo:#1F5D9633;--x-cb:#628EB6;
  --x-pr:#1F5D96;--x-prh:#174A79;--x-onp:#FFFFFF;--x-frame:#30CBCF;--x-wr:#30CBCF;--x-cur:#DDF7F8;
  --x-ok:#17553B;--x-okb:#E8F5EE;--x-wa:#0B5866;--x-wab:#DDF7F8;--x-bad:#A62E2A;--x-badb:#FCEEED;--x-inf:#1F5D96;--x-infb:#E8F0F8;
  --x-sh:0 16px 40px -16px rgba(31,93,150,.38);--x-band:#1C7290;--x-tile:#268CAF;
  /* the accent tokens a theme colour may change (host/core/themes.js); the values here are today's teal, the default */
  --x-th-bg:#1F5D96;--x-th-tx:#FFFFFF;--x-th-hov:#174A79;--x-tbl-ln:var(--tgp-cyan,var(--x-frame));--x-th-ln:var(--tgp-cyan,var(--x-frame));--x-sel:#30CBCF;--x-selt:#0B2B3F;--x-ontile:#FFFFFF;--x-bt:#FFFFFF;--x-bt2:#E6F4F8;--x-bhov:#155A72;--x-bbtn:#FFFFFF;--x-bbtnt:#1F5D96;--x-bbtnh:#E6F4F8;--x-fc:var(--x-pr);--x-bbd:transparent;--x-bhd:none;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --x-bg:#0A1A2B;--x-sf:#0F2740;--x-s2:#163552;--x-tx:#F4F8FB;--x-mu:#BCCEE0;--x-ln:rgba(188,206,224,.16);--x-fo:rgba(188,206,224,.24);--x-cb:#628EB6;
  --x-th-bg:#1F5D96;--x-th-tx:#FFFFFF;--x-th-hov:#174A79;--x-tbl-ln:var(--tgp-cyan,var(--x-frame));--x-th-ln:var(--tgp-cyan,var(--x-frame));--x-pr:#1F5D96;--x-prh:#1F5D96;--x-onp:#FFFFFF;--x-sel:#1F5D96;--x-selt:#FFFFFF;--x-fc:#30CBCF;--x-cur:#1F5D96;--x-ok:#8AE3BC;--x-okb:#0F3A2E;--x-wa:#30CBCF;--x-wab:#0E3D47;--x-bad:#FFA8A2;--x-badb:#3E1E1D;--x-inf:#BCCEE0;--x-infb:#1B3B5C;--x-sh:0 14px 34px -14px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --x-bg:#0A1A2B;--x-sf:#0F2740;--x-s2:#163552;--x-tx:#F4F8FB;--x-mu:#BCCEE0;--x-ln:rgba(188,206,224,.16);--x-fo:rgba(188,206,224,.24);--x-cb:#628EB6;
  --x-th-bg:#1F5D96;--x-th-tx:#FFFFFF;--x-th-hov:#174A79;--x-tbl-ln:var(--tgp-cyan,var(--x-frame));--x-th-ln:var(--tgp-cyan,var(--x-frame));--x-pr:#1F5D96;--x-prh:#1F5D96;--x-onp:#FFFFFF;--x-sel:#1F5D96;--x-selt:#FFFFFF;--x-fc:#30CBCF;--x-cur:#1F5D96;--x-ok:#8AE3BC;--x-okb:#0F3A2E;--x-wa:#30CBCF;--x-wab:#0E3D47;--x-bad:#FFA8A2;--x-badb:#3E1E1D;--x-inf:#BCCEE0;--x-infb:#1B3B5C;--x-sh:0 14px 34px -14px rgba(0,0,0,.8);
}

/* the page itself. The home (body.x-body) sets its own page rules; a tool page (body.x-doc) keeps the old theme's body, and everything below is scoped to the
   shell's own parts (the strip, the teal bar, the Back row, the footer, the home's content), so a tool's own markup is never restyled */
body.x-body{margin:0;background:var(--x-bg);color:var(--x-tx);font-family:Poppins,system-ui,sans-serif;font-size:15px;line-height:1.6}
html[dir=rtl] body.x-body{font-family:'IBM Plex Sans Arabic',Poppins,sans-serif;line-height:1.75;font-size:16px}
.x-strip,.x-band,.x-page,.x-backrow,.x-foot{font-family:Poppins,system-ui,sans-serif;line-height:1.6;box-sizing:border-box}
html[dir=rtl] .x-strip,html[dir=rtl] .x-band,html[dir=rtl] .x-page,html[dir=rtl] .x-backrow,html[dir=rtl] .x-foot,.x-strip [dir=rtl],.x-page [dir=rtl]{font-family:'IBM Plex Sans Arabic',Poppins,sans-serif;line-height:1.75}
.x-strip a,.x-page a,.x-backrow a,.x-band a{color:var(--x-tx)}
.x-strip ul,.x-strip ol,.x-band ul,.x-band ol,.x-page ul,.x-page ol{list-style:none;margin:0;padding:0}
.x-strip h1,.x-strip h2,.x-strip h3,.x-strip p,.x-band h1,.x-band h2,.x-band p,.x-page h1,.x-page h2,.x-page h3,.x-page p{margin:0}
.x-strip :focus-visible,.x-band :focus-visible,.x-page :focus-visible,.x-backrow :focus-visible{outline:2px solid var(--x-fc);outline-offset:2px}
.x-band :focus-visible{outline-color:var(--x-bt)}
.x-i{fill:none;stroke:currentColor;flex:none}
.x-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;inset-inline-start:0}
.x-skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--x-pr);color:var(--x-onp);font-weight:600;text-decoration:none}
.x-skip:focus{top:8px}
.x-mu{color:var(--x-mu)}.x-sm{font-size:13px;line-height:20px}
.x-grow{flex:1;min-width:0}.x-rel{position:relative}
.x-wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 40px;box-sizing:border-box}

/* ------------------------------------------------------------------ the strip (white, 56 px plus the 3 px brand line) */
.x-strip{position:relative;z-index:10;background:var(--x-sf);border-bottom:1px solid var(--x-ln);color:var(--x-tx)}
.x-strip::before{content:"";display:block;height:3px;background:linear-gradient(90deg,#1F5D96,#268CAF 55%,#30CBCF)}
html[dir=rtl] .x-strip::before{background:linear-gradient(270deg,#1F5D96,#268CAF 55%,#30CBCF)}
.x-strip>nav{display:flex;align-items:center;gap:4px;height:56px;padding:0 24px}
.x-logo{display:inline-flex;align-items:center;height:44px;flex:none}.x-logo img{display:block;height:34px;width:auto}
:root[data-theme="dark"] .x-logo img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .x-logo img{filter:brightness(0) invert(1)}}
.x-vr{width:1px;height:24px;background:var(--x-ln);margin:0 8px;flex:none}
.x-ib{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;box-sizing:border-box;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--x-tx);cursor:pointer;flex:none;font:inherit;transition:background-color .15s ease}
.x-ib:hover{background:var(--x-s2)}
.x-ib[aria-expanded=true]{background:var(--x-s2);border-color:var(--x-ln)}
.x-ib.x-lb{width:auto;gap:6px;padding:0 10px;font-size:14px;font-weight:500}
.x-tool{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-inline:4px 12px;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;color:var(--x-tx)}
html[dir=rtl] .x-tool{font-size:17px}
.x-tile{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;flex:none;background:var(--x-tile);color:var(--x-ontile)}
.x-tile.x-lg{width:40px;height:40px;border-radius:10px}
.x-tile .x-i{stroke-width:2.25}
.x-hs{display:flex;align-items:center;margin-inline-start:4px}
.x-h{position:relative;display:inline-flex;align-items:center;gap:4px;height:56px;padding:0 12px;box-sizing:border-box;border:0;background:transparent;color:var(--x-tx);font:inherit;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate}
html[dir=rtl] .x-h{font-size:15px}
.x-h[aria-expanded=true]{background:var(--x-s2)}.x-h .x-i{color:var(--x-mu)}
.x-h.x-on{font-weight:600}
.x-h.x-on::before{content:"";position:absolute;inset:8px 0;border-radius:8px;background:var(--x-cur);z-index:-1}

/* the pop-ups: a button, and the panel it controls */
.x-pop{position:absolute;top:57px;inset-inline-start:0;z-index:30;width:264px;background:var(--x-sf);border:1px solid var(--x-ln);border-radius:12px;box-shadow:var(--x-sh);padding:8px;box-sizing:border-box;color:var(--x-tx)}
.x-pop.x-end{inset-inline-start:auto;inset-inline-end:0}
.x-js .x-pop{display:none}.x-js .x-pop.x-open{display:block;animation:x-pop .16s ease-out}
@keyframes x-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.x-gl{padding:8px 12px 4px;font-size:12px;line-height:16px;font-weight:600;color:var(--x-mu);text-transform:uppercase;letter-spacing:.06em}
html[dir=rtl] .x-gl{font-size:13px;line-height:20px;text-transform:none;letter-spacing:0}
a.x-gl-link{display:flex;align-items:center;min-height:44px;box-sizing:border-box;border-radius:8px;text-decoration:none}
a.x-gl-link:hover{color:var(--x-tx);background:var(--x-s2)}
a.x-gl-link[aria-current=page]{color:var(--x-tx)}
.x-mi{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 12px;box-sizing:border-box;border:0;border-radius:8px;background:transparent;color:var(--x-tx);text-decoration:none;font:inherit;font-size:14px;line-height:20px;text-align:start;cursor:pointer}
html[dir=rtl] .x-mi{font-size:15px}
.x-mi:hover{background:var(--x-s2)}.x-mi[aria-current]{background:var(--x-s2);font-weight:600}.x-mi .x-e{margin-inline-start:auto}.x-mi .x-i{color:var(--x-mu)}
.x-mi .x-tile{width:28px;height:28px;border-radius:7px}.x-mi .x-tile .x-i{color:var(--x-ontile)}
.x-sep{height:1px;background:var(--x-ln);margin:8px 4px}
/* the theme colour rows of the account menu: a swatch, the name, a check on the one in use (aria-pressed); the swatch colours come from host/core/themes.js */
.x-th-form{margin:0}.x-th{min-height:44px}.x-th .x-ck{visibility:hidden}.x-th[aria-pressed=true]{background:var(--x-s2);font-weight:600}.x-th[aria-pressed=true] .x-ck{visibility:visible}
.x-dot{display:inline-block;width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px var(--x-tx)}
.x-sw{width:360px}.x-swg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}.x-swg .x-mi{min-height:44px}
.x-phone-only{display:none}
.x-phone-sw{display:none}
.x-tl-word,.x-tl-menu{white-space:nowrap}.x-tl-menu{display:none}

/* Search */
.x-sform{display:contents;margin:0}
.x-fa{margin-inline-end:8px}
.x-fa>.x-i{position:absolute;top:13px;inset-inline-start:11px;color:var(--x-mu);pointer-events:none}
.x-in{display:block;box-sizing:border-box;height:44px;border:1px solid var(--x-cb);border-radius:8px;background:var(--x-sf);color:var(--x-tx);font:inherit;font-size:14px;padding:0 12px}
.x-fa .x-in{width:208px;padding-inline-start:36px}
.x-fa .x-in:focus{width:240px;color:var(--x-tx);padding-inline-start:36px}
.x-fp{width:420px;top:48px}
.x-fr,.x-rr{flex-direction:column;align-items:flex-start;gap:0;padding:8px 12px}
.x-fr small,.x-rr small{font-size:12px;color:var(--x-mu);line-height:16px}
.x-none{padding:12px;font-size:14px;color:var(--x-mu)}
.x-warn{padding:8px 12px}
.x-recs:empty{display:none}
.x-pop [hidden]{display:none!important}

/* the language switch and the account button */
/* the language switch and the account button are the same pill (1 November 2026, Akram): one height (44 px, the tap size), one radius, one hairline edge drawn inside the box so the 44 px is the whole target, one text size.
   Both carry class x-pill; .x-lang and .x-user add only what differs. */
.x-pill{display:inline-flex;align-items:center;height:44px;min-width:44px;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--x-ln);color:var(--x-tx);font:inherit;font-size:14px;font-weight:500;line-height:20px;flex:none}
.x-lang{margin-inline-end:8px}
.x-lang a,.x-lang .x-cur{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;box-sizing:border-box;border-radius:999px;text-decoration:none;font-size:13px;font-weight:500;font-family:Poppins,sans-serif;color:var(--x-tx)}
.x-lang [lang=ar]{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px}
.x-lang [aria-current]{background:var(--x-pr);color:var(--x-onp);font-weight:600}
.x-lang-row{display:none;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;font-size:14px}
.x-lang-in{margin:0}
.x-user{gap:8px;padding-inline:4px 12px;cursor:pointer;white-space:nowrap}
.x-user:hover{background:var(--x-s2)}.x-user[aria-expanded=true]{background:var(--x-s2)}
.x-av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--x-pr);color:var(--x-onp);font-size:13px;font-weight:600;flex:none}
.x-who{display:flex;flex-direction:column;padding:8px 12px}.x-who b{font-weight:600}.x-who small{font-size:12px;line-height:18px;color:var(--x-mu);overflow-wrap:anywhere}
.x-pop form{margin:0}
[data-x-theme] .x-sunny{display:none}
:root[data-theme="dark"] [data-x-theme] .x-moon{display:none}:root[data-theme="dark"] [data-x-theme] .x-sunny{display:inline-flex}

/* the bell */
.x-bdg{position:absolute;top:2px;inset-inline-end:0;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--x-pr);color:var(--x-onp);border:2px solid var(--x-bg);font-size:12px;font-weight:600;line-height:18px;text-align:center}
.x-bp{width:500px;padding:0;max-height:calc(100vh - 80px);overflow:auto}
.x-bp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px}
.x-bp-h h2{display:flex;align-items:center;gap:8px;font-size:16px;line-height:24px;font-weight:600}
.x-bg{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:14px;font-weight:600}
.x-bempty{padding:8px 16px 16px;font-size:14px;color:var(--x-mu)}
.x-bp-f{display:flex;align-items:center;justify-content:flex-end;padding:8px 16px;border-top:1px solid var(--x-ln)}
.x-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;text-decoration:none}
html[dir=rtl] .x-more .x-i{transform:scaleX(-1)}
.x-nyr li{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;gap:4px 12px;align-items:center;padding:10px 16px;border-top:1px solid var(--x-ln)}
.x-nt{min-width:0;overflow-wrap:anywhere}.x-tt{display:block;font-size:14px;line-height:22px;font-weight:500}.x-m{display:block;font-size:13px;line-height:20px;color:var(--x-mu)}
.x-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--x-s2);border:1px solid var(--x-ln);font-size:12px;font-weight:600;box-sizing:border-box;color:var(--x-tx)}
.x-sh{display:inline-block;width:10px;height:10px;margin:6px 5px;flex:none}
.x-sh.x-wa{background:var(--x-wa);transform:rotate(45deg);border-radius:1px;width:8px;height:8px}.x-sh.x-bad{background:var(--x-bad);border-radius:1px}.x-sh.x-inf{background:var(--x-pr);border-radius:50%}
.x-b{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:20px;white-space:nowrap}
.x-b::before{content:"";width:8px;height:8px;flex:none;background:currentColor}
.x-b.x-ok{background:var(--x-okb);color:var(--x-ok)}.x-b.x-inf{background:var(--x-infb);color:var(--x-inf)}.x-b.x-inf::before{border-radius:50%}
.x-b.x-wa{background:var(--x-wab);color:var(--x-wa)}.x-b.x-wa::before{border-radius:1px;transform:rotate(45deg)}.x-b.x-bad{background:var(--x-badb);color:var(--x-bad)}.x-b.x-bad::before{border-radius:1px}

/* ------------------------------------------------------------------ the teal bar under the strip */
.x-band{background:var(--x-band);box-shadow:inset 0 -4px 0 var(--x-bbd);color:var(--x-bt);--x-mu:var(--x-bt2);--x-pr:var(--x-bt)}
.x-band .x-wrap{padding-top:24px;padding-bottom:20px}.x-band.x-wt .x-wrap{padding-bottom:0}
.x-band a,.x-band .x-btn{color:var(--x-bt)}
.x-rh1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center}
.x-crumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.x-crumbs li{display:inline-flex;align-items:center;gap:8px}
.x-crumbs a{font-size:14px;font-weight:500;color:var(--x-bt2);text-decoration:none}.x-crumbs a:hover{text-decoration:underline}
html[dir=rtl] .x-sepi{transform:scaleX(-1)}
h1.x-t{font-size:28px;line-height:36px;font-weight:600;overflow-wrap:anywhere}
html[dir=rtl] h1.x-t{font-size:29px;line-height:44px}
.x-lead{margin-top:6px;font-size:15px;color:var(--x-bt2)}
html[dir=rtl] .x-lead{font-size:16px}
.x-rha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.x-tabs{margin-top:16px}.x-tabs ul{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden}
.x-tabs a{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 12px;box-sizing:border-box;color:var(--x-bt);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;isolation:isolate}
.x-tabs a[aria-current]{font-weight:600;color:var(--x-tx)}.x-tabs a[aria-current]::before{content:"";position:absolute;inset:8px 0;border-radius:8px;background:var(--x-cur);z-index:-1}
/* S7 (1 November 2026): the tabs are never cut off. They wrap onto a second line when they do not fit (a narrow screen, a long Arabic label), a long label wraps inside its own tab, and nothing is hidden by the strip's own scrolling or clipping. When they fit, nothing changes. Every tool's tabs, new look only. */
.x-tabs ul{flex-wrap:wrap;overflow:visible}
.x-tabs li{max-width:100%}
.x-tabs a{height:auto;min-height:52px;max-width:100%;white-space:normal;text-align:start;line-height:1.3;padding-block:6px}
@media (max-width:640px){.x-tabs a{min-height:44px}}

/* buttons (the bell's rows, the home's one action) */
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;box-sizing:border-box;border-radius:8px;border:1px solid var(--x-cb);background:var(--x-sf);color:var(--x-tx);font:inherit;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease}
.x-btn:hover{background:var(--x-s2)}
.x-btn.x-p{background:var(--x-pr);border-color:var(--x-pr);color:var(--x-onp)}.x-btn.x-p:hover{background:var(--x-prh);border-color:var(--x-prh)}
.x-btn.x-s{padding:0 14px}

/* ------------------------------------------------------------------ the TGP Tools home */
.x-page{padding-top:32px;padding-bottom:64px}
.x-gh{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;font-size:16px;line-height:24px;font-weight:600}
/* the page rule .x-page h2{margin:0} is more specific than .x-gh, so the heading sat on the first tile: the gap is stated at the same strength (1 Nov 2026) */
.x-page .x-gh{margin:0 0 20px}
.x-gh .x-az{margin-inline-start:2px;font-size:13px;line-height:20px;font-weight:400;color:var(--x-mu);align-self:baseline}
.x-note{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--x-frame);border-radius:10px;background:var(--x-s2);font-size:14px}
.x-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.x-tl{display:flex;align-items:flex-start;gap:14px;height:100%;box-sizing:border-box;padding:20px;background:var(--x-sf);border:1px solid var(--x-frame);border-radius:12px;text-decoration:none;color:var(--x-tx);transition:background-color .15s ease,box-shadow .18s ease,transform .18s ease}
.x-tl:hover{background:var(--x-s2);box-shadow:var(--x-sh);transform:translateY(-2px)}
.x-tl .x-n{display:block;font-size:16px;line-height:24px;font-weight:600}
.x-tl .x-d{display:block;margin-top:2px;font-size:13px;line-height:20px;color:var(--x-mu);overflow-wrap:anywhere}
.x-tiles>li{min-width:0;display:flex}.x-tiles>li>.x-tl{flex:1 1 auto;min-width:0}
.x-newrun{display:flex;justify-content:flex-end;margin-top:24px}
.x-empty{padding:32px 24px;border:1px solid var(--x-frame);border-radius:12px;text-align:center}
.x-empty h2{display:flex;justify-content:center;align-items:center;gap:8px;font-size:18px;margin-bottom:8px}
.x-foot{padding:24px 40px;font-size:13px;color:var(--x-mu);text-align:center}
@media (prefers-reduced-motion:reduce){.x-js .x-pop.x-open{animation:none}.x-tl,.x-btn,.x-ib{transition:none}.x-tl:hover{transform:none}}

/* ------------------------------------------------------------------ narrower windows */
@media (max-width:1365px){
  .x-user .x-un{display:none}.x-user .x-i{display:none}.x-user{padding-inline:4px;justify-content:center}
  .x-fa .x-in{width:176px}
  .x-strip>nav>.x-lang{display:none}.x-lang-row{display:flex}
  .x-tool{font-size:15px}
}
@media (max-width:1279px){
  .x-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1240px){
  .x-strip>nav{gap:2px;padding:0 16px}
  .x-fa{margin-inline-end:4px}
  .x-fa .x-in{width:44px;padding-inline:0;color:transparent;cursor:pointer}.x-fa .x-in::placeholder{color:transparent}
  .x-fa>.x-i{inset-inline-start:13px}
}
@media (max-width:1120px){
  .x-h{padding-inline:8px}
  .x-tool .x-tn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .x-tool{padding-inline:4px}
}
/* under 1024 px: the mark, the tool, one Menu button, the bell */
@media (max-width:1023px){
  .x-wrap{padding:0 20px}
  .x-strip>nav{padding:0 8px 0 12px}
  .x-hs,.x-vr{display:none}
  .x-tl-word{display:none}.x-tl-menu{display:inline}
  .x-strip>nav{flex-wrap:wrap;height:auto;padding-block:6px 4px;row-gap:4px}
  .x-fa{order:99;flex:1 1 100%;margin:0 0 4px}.x-fa .x-in,.x-fa .x-in:focus{width:100%;padding-inline-start:36px;color:var(--x-tx);cursor:text}.x-fa .x-in::placeholder{color:var(--x-mu)}.x-fa>.x-i{inset-inline-start:11px}
  .x-fp{position:fixed;inset-inline:8px;top:118px;width:auto;max-height:calc(100vh - 130px);overflow:auto}
  .x-tool .x-tn{position:static;width:auto;height:auto;clip:auto;overflow:visible;font-size:13px;white-space:normal;line-height:1.25}
  .x-tool{gap:6px;padding-inline:2px;flex:0 1 auto;min-width:0}
  .x-tool .x-tile{width:28px;height:28px}
  .x-logo img{height:34px}.x-ib.x-lb{padding:0 8px}
  .x-phone-only{display:block}
  .x-phone-sw{display:block}
  .x-pop.x-sw{position:fixed;inset-inline:8px;top:62px;width:auto;max-height:calc(100vh - 72px);overflow:auto}
  .x-pop.x-end{position:fixed;inset-inline:8px;top:62px;width:auto;max-width:none;max-height:calc(100vh - 72px);overflow:auto}
  /* a menu taller than the screen shows a soft shade at its foot while there is more below; scrolled to the end, the cover (it scrolls with the items) hides it (phone review, 13 Nov 2026) */
  .x-pop.x-sw,.x-pop.x-end{background:linear-gradient(transparent,var(--x-sf) 70%) bottom/100% 36px no-repeat local,linear-gradient(transparent,rgba(31,93,150,.18)) bottom/100% 18px no-repeat scroll,var(--x-sf)}
  .x-bp{width:auto}
  .x-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-rh1{grid-template-columns:minmax(0,1fr)}
  .x-rha{justify-content:flex-start}
  h1.x-t{font-size:24px;line-height:32px}
}
@media (max-width:639px){
  .x-tiles{grid-template-columns:minmax(0,1fr)}
  .x-tool .x-tn{font-size:13px}
  .x-swg{grid-template-columns:minmax(0,1fr)}
  .x-nyr li{grid-template-columns:20px minmax(0,1fr)}
  .x-page{padding-top:24px}
  .x-foot{padding:20px}
}
/* no script: the panels are plain lists under the strip's own row, nothing is hidden */
html:not(.x-js) .x-pop{position:static;width:auto;box-shadow:none;margin:4px 0}
html:not(.x-js) .x-strip>nav{height:auto;flex-wrap:wrap;padding-block:8px}
@media print{.x-strip,.x-skip{display:none}.x-band{background:#FFFFFF;color:#1F5D96}.x-band a,.x-lead{color:#1F5D96}}

/* a tool page in the new frame: the Back link under the teal bar, and the buttons that sit on the bar */
.x-backrow{padding-top:16px;padding-bottom:0}
.x-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:500;color:var(--x-tx);text-decoration:none}
.x-back:hover{text-decoration:underline}
html[dir=rtl] .x-back .x-i{transform:scaleX(-1)}
.x-band .x-btn{background:transparent;border-color:var(--x-bt);color:var(--x-bt)}
.x-band .x-btn:hover{background:var(--x-bhov);text-decoration:var(--x-bhd)}
.x-band .x-btn.x-p,.x-band a.x-btn.x-p{background:var(--x-bbtn);border-color:var(--x-bbtn);color:var(--x-bbtnt);font-weight:600}
.x-band .x-btn.x-p:hover{background:var(--x-bbtnh)}
.x-metaline{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:10px;font-size:14px;color:var(--x-bt2)}

.x-doc .content{margin-top:0;padding-top:20px}

/* "Start a new engagement" sits in the grid's next cell: the empty one when the last row has room, else a row of its own with 24 px above it (the grid's 16 px gap plus 8) */
.x-newcell{display:flex;align-items:center;justify-content:center;padding-block:8px}
@media (max-width:639px){.x-newcell .x-btn{width:100%}}
/* the arrow after the last crumb would dangle when the page title wraps to its own line */
@media (max-width:1023px){.x-lastsep{display:none}.x-crumbs li:last-child{flex-basis:100%}}

/* the footer keeps room under its last line so the Back to top button never sits over the text */
body .x-foot{padding-bottom:84px}

/* ------------------------------------------------------------------ Back to top (1 November 2026): one button for every page in this frame, shown by shell.js after about a screen of scrolling */
.x-top{display:none}
.x-js .x-top.x-show{display:inline-flex;align-items:center;justify-content:center;position:fixed;inset-inline-end:16px;bottom:calc(16px + var(--x-top-off,0px));z-index:20;width:44px;height:44px;box-sizing:border-box;padding:0;border-radius:50%;border:1px solid var(--x-cb);background:var(--x-sf);color:var(--x-tx);box-shadow:var(--x-sh);cursor:pointer;font:inherit}
.x-js .x-top.x-show:hover{background:var(--x-s2)}
.x-top:focus-visible{outline:2px solid var(--x-pr);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.x-js .x-top.x-show{animation:x-pop .16s ease-out}}
@media print{.x-top{display:none!important}}
/* dark: the primary button is Deep Blue with white text in every theme, and no palette fill passes AA under white text, so hover shows a Bright Cyan ring (design review, 1 Nov 2026) */
:root[data-theme="dark"] .x-btn.x-p:hover{box-shadow:0 0 0 2px var(--x-wr)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .x-btn.x-p:hover{box-shadow:0 0 0 2px var(--x-wr)}}

/* ------------------------------------------------------------------ the public pages (host/core/shell/public.js, 13 November 2026): the survey form, sign-in and the portals.
   The strip holds the logo, then EN/عربي and Sign out only (no app menu), so the language switch stays in the strip at every width; the bar is flat, title left, main button right */
body.x-pub .x-strip>nav{height:auto;min-height:56px;flex-wrap:wrap;gap:8px;padding-block:6px}
body.x-pub .x-strip>nav>.x-lang{display:inline-flex}
.x-pub-who{font-size:14px;font-weight:500;line-height:20px;color:var(--x-tx);overflow-wrap:anywhere;min-width:0;max-width:32ch}
.x-pub-out{display:inline-flex;margin:0}
.x-pub-band .x-wrap{padding-top:28px;padding-bottom:24px}
.x-pub-band .x-rha .x-btn{white-space:normal;text-align:center;line-height:1.3;height:auto;min-height:44px}
body.x-pub-n .x-pub-band .x-wrap{max-width:800px}
@media (max-width:1023px){body.x-pub .x-strip>nav{padding-inline:12px}}
@media (max-width:639px){
  .x-pub-who{order:10;flex:1 1 100%;max-width:none;font-size:13px;line-height:18px;padding:0 4px 4px}
  .x-pub-out .x-btn{padding:0 12px}
  .x-pub-band .x-wrap{padding-top:20px;padding-bottom:20px}
  .x-pub-band .x-rha{width:100%}.x-pub-band .x-rha .x-btn{flex:1 1 auto}
}html:not(.x-js) .x-pub-theme{display:none}
@media (max-width:479px){
  body.x-pub .x-strip>nav{gap:4px;padding-inline:8px}
  .x-pub-out .x-btn{width:44px;padding:0}
  .x-pub-out .x-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.x-pub .x-logo img{height:28px}
}