@font-face{font-family:"UI";src:url("fonts/Alyamama.ttf") format("truetype");font-weight:300 900}@font-face{font-family:"Logo";src:url("fonts/ArefRuqaa-Bold.ttf") format("truetype");font-weight:400 900}@font-face{font-family:"Num";src:url("fonts/AlanSans.ttf") format("truetype");font-weight:100 900}
*{box-sizing:border-box;margin:0}
/* The page is a very light warm paper and every card on it is white. The warmth
   is two points of blue — 250,249,247 — because a wider spread reads as yellow. */
body{background:var(--page);color:var(--ink);font:16px/1.7 var(--ui),sans-serif}
a{color:inherit}
.wrap{width:min(1100px,100% - 40px);margin-inline:auto}
header.top{border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--page);z-index:9}
header.top .bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* The three controls are one group: same height, same corner, side by side — so the eye
   reads them as a set and the logo keeps a clear field of its own at the other end. */
.hctl{display:flex;align-items:center;gap:8px;flex:none}
.burger,.lang,.sbtn{height:36px;border:1px solid var(--line);border-radius:12px;
  background:var(--ground);color:var(--ink2);cursor:pointer;flex:none}
.burger,.sbtn{width:36px;display:grid;place-items:center;padding:0}
.burger{gap:4px;grid-auto-flow:row;align-content:center;justify-items:center}
.lang{display:grid;place-items:center;padding:0 12px;font-size:12.5px;letter-spacing:.06em;
  text-decoration:none;line-height:1}
.lang:hover,.burger:hover,.sbtn:hover,.sbtn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}


.burger span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .18s,opacity .12s}
.burger.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* the panel is a layer over the page, not more of it: a touch deeper paper and a rule
   under it say so, so a reader never wonders which one they are looking at */
.menu{border-top:1px solid var(--line);background:var(--page);padding:14px 0 18px;background:#F3EDE4;border-bottom:1px solid var(--line)}
.menu .mlinks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu .mlinks a{text-decoration:none;font-size:14.5px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.menu .mlinks a[aria-current=page]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
/* the same card as «الموجز الصباحي»: brown ground, the mark inside it, the yellow
   button. The menu's ask and the page's ask are one brand, not two. */
.menu .msub{margin-top:18px;background:var(--ink);border-radius:20px;padding:20px 18px 18px}
.menu .msub .mlogo{margin-bottom:12px}
.menu .msub .mlogo svg,.mlogo img{height:30px;width:auto;display:block}
.menu .msub 
.menu .msub label{display:block;font-size:13.5px;color:rgba(248,244,238,.86);margin-bottom:9px}
.menu .msub .row{display:flex;gap:8px}
.menu .msub input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border:0;
  border-radius:999px;background:var(--ground);color:var(--ink)}
.menu .msub button{font:inherit;font-size:14px;font-weight:700;padding:12px 18px;border:0;
  border-radius:999px;background:var(--a1);color:var(--ink);cursor:pointer}
.menu .msub .note{font-size:12.5px;color:rgba(248,244,238,.92);margin-top:9px;min-height:1em}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px}
/* An external link says so with a mark drawn here, not with a character typed
   into the markup. The glyph the browser picked for it was whatever the system
   font had, which is never the one this site is set in; and a character sitting
   in the text is read aloud and copied along with the sentence. */
a[rel~="noopener"]::after{content:"";display:inline-block;width:.58em;height:.58em;margin-inline-start:.34em;vertical-align:.02em;background:currentColor;opacity:.5;-webkit-mask:var(--ext) center/contain no-repeat;mask:var(--ext) center/contain no-repeat}
a[rel~="noopener"]:hover::after{opacity:1}
[dir="rtl"] a[rel~="noopener"]::after{transform:scaleX(-1)}
:root{--ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5 10.5 5.5'/%3E%3Cpath d='M6 5.5h4.5V10'/%3E%3C/svg%3E")}
header .logo{height:62px;display:block;flex:none}
header .logo svg,.logo img{height:62px;width:auto;display:block}
header .navwrap{border-top:2px solid var(--line)}
nav{display:flex;gap:26px;font-size:14px;overflow-x:auto;scrollbar-width:none;cursor:grab;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
nav::-webkit-scrollbar{display:none}
nav a{white-space:nowrap;text-decoration:none;font-weight:600;padding:9px 0;
  border-bottom:3px solid transparent;color:var(--ink2)}
nav a:hover{color:var(--ink)}
nav a[aria-current]{color:var(--ink);border-color:var(--a2)}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 12px 2px;border-radius:14px;
  font-size:13px;font-weight:700;white-space:nowrap}
.lead{display:grid;grid-template-columns:1.4fr .6fr;gap:28px;padding:22px 0 24px;align-items:center}
.lead img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;max-height:230px}
.lead h1{font-size:clamp(22px,2.6vw,32px);line-height:1.3;margin:8px 0}
.why{background:var(--paper);border-radius:14px;padding:14px 18px;margin-top:14px;font-size:15px}
.why b{display:block;font-size:13px;color:var(--ink2);margin-bottom:4px;letter-spacing:.04em}
h2.sec{font-size:13px;letter-spacing:.14em;color:var(--ink2);margin:38px 0 16px;padding-top:16px;
  border-top:3px solid var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.card{display:grid;gap:12px;text-decoration:none}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.card h3{font-size:22px;line-height:1.4}
.card .meta{font-size:14px;color:var(--ink2);display:flex;gap:10px;align-items:center}
.num{font-family:var(--num),sans-serif;font-feature-settings:"tnum";direction:ltr;unicode-bidi:isolate}
.rows{display:grid;gap:0;border-top:2px solid var(--line)}
.rows a{display:flex;gap:24px;align-items:baseline;justify-content:space-between;
  padding:20px 0;border-bottom:2px solid var(--line);text-decoration:none}
.rows .fig{font-size:40px;font-weight:700;font-family:var(--num);flex:none}
article{max-width:720px;margin-inline:auto;padding:28px 0 56px}
article h1{font-size:clamp(24px,3vw,34px);line-height:1.3;margin:12px 0}
article img.hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin:24px 0 8px}
article .credit,.credit{font-size:13px;color:var(--ink2)}
article p{margin:16px 0}
article ul{margin:16px 0;padding-inline-start:22px}
.src{margin-top:32px;padding-top:20px;border-top:2px solid var(--line);font-size:15px;color:var(--ink2)}
.src a{color:var(--a2);font-weight:700}
/* The logo faces the title on one line: the mark on the end side, the name of the
   briefing on the start side, level with it. Nothing lighter is painted behind the
   mark — a panel there read as a highlighter. Its paths are drawn in --ink and
   would vanish on this ground, so only those are turned to paper; the accent dot
   keeps its colour. The description and the form run the full width underneath,
   so no column is squeezed and no second ground colour appears. */
.signup{background:var(--ink);color:var(--ground);border-radius:22px;padding:34px 34px 30px;margin:44px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:26px;align-items:center;gap:12px}
.signup .slogo{grid-column:2;grid-row:1;justify-self:end}
.signup .slogo svg{height:58px;width:auto;display:block}
.signup .slogo svg path[fill="#2B1A12"]{fill:#F8F4EE}
.signup h3{grid-column:1;grid-row:1;font-size:27px;letter-spacing:-.01em;line-height:1.35;margin:0}
.signup>p:not(.credit){grid-column:1/-1;grid-row:2;color:rgba(248,244,238,.84);
  font-size:15.5px;line-height:1.8;max-width:62ch;margin:0}
.signup form{grid-column:1/-1;grid-row:3;display:flex;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:20px;border-top:1px solid rgba(248,244,238,.16)}
.signup input{height:52px;padding:0 18px;border-radius:26px;border:0;font:inherit;min-width:260px}
.signup button{height:52px;padding:0 28px;border-radius:26px;border:0;background:var(--a1);
  color:var(--ink);font:inherit;font-weight:700;letter-spacing:.01em;cursor:pointer}
.signup .note{grid-column:1/-1;grid-row:4;margin:2px 0 0;font-size:13.5px;
  color:rgba(248,244,238,.95);min-height:1em}
.signup .credit{grid-column:1/-1;grid-row:5;color:rgba(248,244,238,.6);font-size:12.5px;margin-top:4px}
/* the search is an icon until it is wanted: a row that is always there is a row that
   pushes the figures down on every page for the readers who never search */

.sbtn:hover,.sbtn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
.sbwrap{padding:10px 0 14px;border-top:1px solid var(--line)}
.sb{position:relative}
.sb input{width:100%;height:44px;padding:0 16px;font:inherit;font-size:15px;
  border:1.5px solid var(--line);border-radius:26px;background:var(--ground);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.sb input::placeholder{color:var(--ink2)}
.sb input:focus{outline:none;border-color:var(--ink)}
/* overscroll-behavior stops scroll chaining: without it, scrolling to the end of this
   list hands the gesture to the page underneath and the content behind the open panel
   slides away under the reader's thumb. */
.sres{position:absolute;inset-inline:0;top:50px;z-index:50;max-height:62vh;overflow:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--ground);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 44px rgba(43,26,18,.16);padding:6px}
/* and the bar itself is the brand's hairline, not the operating system's slab */
.sres{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sres::-webkit-scrollbar{width:6px}
.sres::-webkit-scrollbar-track{background:transparent}
.sres::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.sres::-webkit-scrollbar-thumb:hover{background:var(--ink2)}
.sres a{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:10px 12px;border-radius:12px;text-decoration:none;color:inherit;
  font-size:14.5px;line-height:1.5;max-width:100%}
.sres a:hover,.sres a.on{background:var(--paper)}
.sres a .t,.sres a .m{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sres a .t{font-weight:600}
/* the figure and the section that gives it meaning, under the name rather than beside
   it: a second line cannot collide with the first however long either of them runs */
.sres a .m{font:400 11.5px/1.6 var(--ui);color:var(--ink2)}
.sres p{padding:12px;font-size:13.5px;color:var(--ink2);margin:0}
/* the ask, when it meets a reader on arrival */
.mpop{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(27,16,11,.58);opacity:0;transition:opacity .22s ease}
.mpop.in{opacity:1}
.mpop-box{position:relative;width:min(620px,100%);transform:translateY(14px);transition:transform .24s ease}
.mpop.in .mpop-box{transform:none}
.mpop .signup{margin:0;border-radius:26px}
.mpop-x{position:absolute;z-index:2;inset-block-start:10px;inset-inline-end:12px;width:34px;height:34px;
  border:0;border-radius:999px;cursor:pointer;background:rgba(248,244,238,.12);color:#F8F4EE;
  font:400 22px/1 system-ui}
.mpop-x:hover{background:rgba(248,244,238,.22)}
/* below this the two of them cannot share a line without the title breaking up */
@media(max-width:560px){
  .signup{grid-template-columns:1fr}
  .signup .slogo{grid-column:1;grid-row:1;justify-self:start;margin-bottom:10px}
  .signup .slogo svg{height:42px}
  .signup h3{grid-row:2}
  .signup>p:not(.credit){grid-row:3}
  .signup form{grid-row:4}
  .signup .note{grid-row:5}
  .signup .credit{grid-row:6}
}
.calc{display:grid;gap:18px;max-width:520px}
.calc label{display:grid;gap:6px;font-weight:600}
.calc input,.calc select{height:52px;padding:0 16px;border:2px solid var(--line);border-radius:12px;font:inherit}
.calc .out{background:var(--paper);border-radius:16px;padding:22px;font-size:20px}
.calc .out b{font-size:40px;font-family:var(--num);display:block}
.wiregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
[hidden]{display:none !important}
.wire{display:flex;flex-direction:column;text-decoration:none;background:var(--ground);
  border:2px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s}
.wire:hover{border-color:var(--ink)}
.wire .thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper);flex:none}
.wire .thumb img{width:100%;height:100%;object-fit:cover}
.wire .stripe{display:block;height:6px;background:var(--a2);flex:none}
.wire .thumb.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--paper),rgba(127,127,127,.08));color:var(--a2);font-size:15px;text-align:center;padding:10px}
.lead .lsum{font-size:15px;line-height:1.8;color:var(--ink2);margin-top:10px}
.wire .body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.wire .ttl{overflow-wrap:anywhere}
.wire .src{font-size:12px;color:var(--a2);font-weight:700}
.wire .ttl{font-size:16px;line-height:1.5;font-weight:600}
.wire .sum{font-size:13px;line-height:1.6;color:var(--ink2)}
.wire .stamp{font-size:11.5px;color:var(--ink2);opacity:.85;margin-top:2px;
  letter-spacing:.01em;white-space:nowrap}
.wire.noimg .ttl{font-size:17px}
.ncard .figline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ncard .fig{font-size:38px;font-family:var(--num);font-weight:600;line-height:1;letter-spacing:-.02em}
.ncard .u{font-size:15px;color:var(--ink2)}
.ncard .chg{font-size:14px;font-weight:700;display:inline-flex;gap:6px;align-items:baseline}
.ncard .chg small{font-weight:500;color:var(--ink2)}
.ncard .chg.up{color:#2F7D4F}.ncard .chg.down{color:var(--a2)}
.spark{width:100%;height:54px;display:block;margin-top:6px}
.chart{width:100%;height:auto;background:var(--paper);border-radius:18px;margin:24px 0}
.lede{font-size:19px;line-height:1.85;color:var(--ink)}
.mean{font-size:20px;font-weight:600;line-height:1.7;margin:10px 0 0}
ul.plain{list-style:none;padding:0;margin:14px 0 0}
ul.plain li{padding:10px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.7}
ul.plain li:last-child{border:0}
.bignum{display:flex;align-items:baseline;gap:12px;margin:18px 0 0}
.bignum b{font-size:56px;font-family:var(--num);line-height:1;letter-spacing:-.02em}
.bignum span{color:var(--ink2)}
.facts{display:flex;gap:10px;flex-wrap:wrap}
.fact{background:var(--paper);border-radius:20px;padding:10px 18px;font-size:15px;font-weight:600}
.tablewrap{overflow-x:auto;margin-bottom:12px}
table.grid{width:100%;border-collapse:collapse;min-width:720px;font-size:14px;table-layout:fixed}
table.grid td.main{width:46%}
table.grid td.sec-cell,table.grid td.lat{width:16%}
table.grid td.num{width:12%;white-space:nowrap}
table.grid th{text-align:start;font-size:13px;color:var(--ink2);padding:10px 12px;border-bottom:3px solid var(--ink);white-space:nowrap}
table.grid td{padding:11px 12px;border-bottom:2px solid var(--line);vertical-align:top}
table.grid td .sub{display:block;font-size:13px;color:var(--ink2);margin-top:4px}
table.grid td.main .tname{display:block;font-weight:700;color:var(--ink);text-decoration:none;
  line-height:1.5;overflow-wrap:break-word}
table.grid td.main .tname:hover{color:var(--a2)}
table.grid td.main b{display:block;line-height:1.5;overflow-wrap:break-word}
table.grid td .agency{display:block;font-size:13px;color:var(--a2);font-weight:600;margin-top:5px}
table.grid td .twork,table.grid td .tfull,h1.ten{display:none}
.crumb{border-bottom:2px solid var(--line);background:var(--paper)}
.crumb .wrap{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:13px;color:var(--ink2)}
.crumb a{color:var(--a2);font-weight:700;text-decoration:none}
.crumb span::before{content:"·";margin-inline-end:8px;color:var(--line)}
.fcount{font-size:14px;color:var(--ink2);margin:0 0 12px}
.wiregrid,.tablewrap{scroll-margin-top:calc(var(--hh,0px) + 60px)}
table.grid a{color:var(--a2);text-decoration:none;font-weight:700;white-space:nowrap}
table.grid td.main .tname{white-space:normal}
.wsearch{width:100%;font:inherit;font-size:16px;padding:13px 15px;margin:18px 0 6px;
  border:2px solid var(--line);border-radius:12px;background:var(--ground);color:var(--ink)}
.wsearch:focus{outline:none;border-color:var(--a2)}
.wsec{margin-top:30px}
ol.bars{list-style:none;padding:0;margin:14px 0 0}
ol.bars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:9px 0;border-bottom:1.5px solid var(--line)}
ol.bars .bn{font-size:14.5px;line-height:1.5}
ol.bars .bt{height:10px;border-radius:5px;background:var(--paper);overflow:hidden}
ol.bars .bt i{display:block;height:100%;border-radius:5px;background:var(--a2)}
ol.bars .bt.alt i{background:var(--ink2);opacity:.55}
ol.bars .bv{font:700 15px/1 var(--num);text-align:end;min-width:62px}
ol.bars.pairs li{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr)}
ol.bars .pair{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 9px;align-items:center}
ol.bars .pair small{font-size:11.5px;color:var(--ink2)}
ol.ranks{list-style:none;padding:0;margin:18px 0 0}
ol.ranks li{display:flex;align-items:center;gap:14px;padding:12px 2px;
  border-bottom:2px solid var(--line)}
ol.ranks li:last-child{border:0}
ol.ranks .r{flex:none;width:34px;font-family:var(--num);font-size:19px;font-weight:700;
  color:var(--ink2);text-align:center}
.tgroup{margin-top:34px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:16px}
.chips.scroll::-webkit-scrollbar{display:none}
.chips.scroll .fchip{white-space:nowrap;font-size:13px;padding:6px 12px;text-decoration:none;flex:none}
.sector{margin-top:38px;scroll-margin-top:calc(var(--hh,70px) + 64px)}
.pair2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.pair2 .cap{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink2)}
@media(max-width:760px){
  .pair2{gap:12px}
  .pair2 ol.ranks li{gap:6px;height:54px;padding:0}
  .pair2 ol.ranks .r{width:16px;font-size:13px}
  .pair2 ol.ranks .ic{width:28px;height:28px;flex:none}
  .pair2 ol.ranks .n{min-width:0}
  .pair2 ol.ranks .n b{font-size:12px}
  .pair2 ol.ranks .n small.rt{font-size:10.5px}
  .pair2 ol.ranks .n small.rt .dlt{display:none}
  .pair2 ol.ranks .bs{display:inline-block;margin-inline-start:6px;font-size:10.5px;color:var(--ink2);font-weight:400;white-space:nowrap}
  .mv{font-size:10px}
  .pair2 .pill{padding:2px 7px;font-size:10px}
  .sector > h2.sec{font-size:18px}
  .pair2 div h3{font-size:13.5px}
  .pair2 .cap{font-size:11.5px}
  .pair2 ol.ranks .n small{display:none}
  .pair2 ol.ranks .n small.rt{display:block;font-size:11px;margin-top:1px}
  .pair2 .mv{font-size:11px}
  .pair2 div h3{font-size:14px}
}
.pair2 h3{margin:18px 0 0;font-size:17px;color:var(--ink)}
.pair2 .cap{align-self:start}
.pair2 ol.ranks .n b a{color:inherit;text-decoration:none}
#secnav{border-bottom:0}
.crumb .wrap{display:flex;flex-wrap:nowrap;align-items:center;overflow:hidden}
.crumb .wrap>*{white-space:nowrap;flex:none}
.crumb .wrap>span:last-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.back{display:inline-block;margin:6px 0 0;font-size:14px;text-decoration:none}
.grid td.main b a{text-decoration:none}
.pair2 ol.ranks{margin-top:14px}
.pair2 ol.ranks li{height:62px;box-sizing:border-box;padding:0 2px;border-bottom:1px solid var(--line)}
.pair2 ol.ranks .n small:not(.rt){display:none}
.pair2 ol.ranks .n small.rt{margin-top:2px;font-size:12.5px}
.sector > h2.sec{font-size:22px;letter-spacing:0;color:var(--ink);border-top:1px solid var(--line);
  padding-top:26px;margin:0 0 4px}
.pair2 h3{align-self:end}
.pair2{row-gap:0}
.pair2 ol.ranks .n b,.pair2 ol.ranks .n small{text-align:start}
.sector:first-of-type > h2.sec{border-top:0;padding-top:8px}
.pair2 ol.ranks .n b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.pair2 ol.ranks .n small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apphead{display:flex;gap:16px;align-items:center;margin-top:8px}
.apphead h1{margin:0}
.appicon{width:84px;height:84px;border-radius:20px;flex:none;border:2px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:22px 0 8px}
.fact{border:2px solid var(--line);border-radius:14px;padding:12px 14px}
.fact small{display:block;color:var(--ink2);font-size:12.5px}
.fact b{display:block;font-size:18px;margin-top:4px}
tr.me td{background:var(--line)}
.usd{color:var(--ink2);font-size:12.5px}
/* iOS zooms the whole page into any field under 16px: never let it */
@media(max-width:900px){input,select,textarea{font-size:16px!important}}
.wform select{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--ground);color:var(--ink);width:100%;min-width:0}
table.mk td.main{display:flex;align-items:center;gap:10px}
.scope{font-size:13px;color:var(--ink2);padding:2px 0;margin:6px 0 10px}
.odgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media(max-width:760px){.odgrid{grid-template-columns:1fr}}
.odcard{border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.odcard h3{font-size:15px;margin:0 0 8px}
.odbars{list-style:none;padding:0;margin:0}
.odbars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 0;font-size:13px}
.odbars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odbars i{display:block;height:8px;background:var(--line);border-radius:5px;overflow:hidden}
.odbars i b{display:block;height:100%;background:var(--ink)}.odbars i b.neg{background:#b3261e}
.odbars em{font-style:normal;font-weight:700;white-space:nowrap}.odbars em small{font-weight:400;color:var(--ink2)}
article.apps table.gt{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 4px}
article.apps table.gt th{overflow-wrap:break-word;font-size:12px;font-weight:600;color:var(--ink2);text-align:start;padding:6px 6px 7px;border-bottom:1.5px solid var(--ink);vertical-align:bottom;line-height:1.35}
article.apps table.gt th.num{text-align:end}
article.apps table.gt td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
article.apps table.gt td.num{white-space:nowrap;text-align:end;font-variant-numeric:tabular-nums;font-weight:600}
article.apps table.gt td.lab{overflow-wrap:break-word;min-width:3.4em}
article.apps .odcard table.gt th,article.apps .odcard table.gt td.lab{overflow-wrap:anywhere;min-width:0}
.odbars span{min-width:0;overflow-wrap:anywhere}
article.apps table.gt td.lab .sub{display:block;font-size:11.5px;color:var(--ink2);margin-top:1px}
article.apps table.gt tr.tot td{font-weight:700;border-top:1.5px solid var(--ink)}
article.apps .odcard .tablewrap{overflow-x:auto;max-width:100%}
.odcard details summary{cursor:pointer;font-size:13px;color:var(--ink2);padding:6px 0}
.odcard h4.odh{display:flex;gap:6px;align-items:baseline;font-size:13px;font-weight:600;margin:12px 0 4px}
.odcard h4.odh:first-of-type{margin-top:4px}
.odcard h4.odh b{font-weight:400;color:var(--ink2)}
.odcard h4.odh small{margin-inline-start:auto;font-size:11px;font-weight:400;color:var(--ink2)}
.odcard .odtot{margin:0 0 6px;font-size:13px;color:var(--ink2)}
.odcard .odtot bdi{font-size:15px;font-weight:700;color:var(--ink)}
.odcard .odtot small{margin-inline-start:6px;font-size:11.5px}
.odrank{margin:0;padding-inline-start:20px;font-size:13.5px;line-height:1.9}
.wfind{margin:14px 0 6px}
.wfind input{font:inherit;font-size:16px;width:100%;box-sizing:border-box;padding:13px 16px;border:1.5px solid var(--ink);
  border-radius:14px;background:var(--ground);color:var(--ink)}
.wlist{list-style:none;padding:0;margin:10px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wlist li+li{border-top:1px solid var(--line)}
.wlist a{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;
  text-decoration:none;color:inherit}
.wlist span small,.wlist em small{display:block;font-size:11px;color:var(--ink2);font-style:normal}
.wlist span b{font-size:14px;line-height:1.35}
.wlist em{font-style:normal;text-align:end;font-weight:700;font-size:14px;white-space:nowrap}
@media(max-width:760px){.wlist a{grid-template-columns:auto minmax(0,1fr) auto;row-gap:2px}
  .wlist em:last-child{grid-column:3}.wlist em{font-size:13px}}
.wsec{scroll-margin-top:calc(var(--hh,70px) + 64px);margin-top:26px}
.wtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
@media(max-width:760px){.wtiles{grid-template-columns:1fr 1fr;gap:8px}}
.wtile{border:1px solid var(--line);border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:4px;min-width:0}
.wtile small{color:var(--ink2);font-size:12.5px;line-height:1.4}
.wtile b{font-size:24px;line-height:1.2;font-family:var(--num)}
.wtile b i{font-style:normal;font-size:13px;color:var(--ink2);font-family:inherit}
.wtile span,.wtile em{font-size:12px;color:var(--ink2);font-style:normal}
.wtile em.up{color:#0a7d55}.wtile em.dn{color:#b3261e}
.wh3{font-size:16px;margin:22px 0 4px}
.wnat{display:inline-flex;border:1px solid var(--line);border-radius:22px;padding:3px}
.wnat button,.wtools button{font:inherit;font-size:13.5px;border:0;background:none;padding:7px 14px;border-radius:18px;cursor:pointer;color:var(--ink)}
.wnat button.on,.wtools button.on{background:var(--ink);color:var(--ground)}
.wtools{display:flex;gap:6px;align-items:center;margin:10px 0 6px;flex-wrap:wrap}
.wtools input{font:inherit;font-size:14px;flex:1 1 180px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--ground);color:var(--ink)}
.wi{width:30px;height:30px;flex:none;padding:5px;border-radius:9px;background:var(--paper);color:var(--ink);box-sizing:border-box}
table.wt td.main a{display:flex;align-items:center;gap:10px}
.sheetcard li button{display:flex;align-items:center;gap:10px}
.pickbtn .wi{width:22px;height:22px;padding:3px;margin-inline-end:6px;vertical-align:middle}
.whead{display:flex;align-items:center;gap:14px;margin-top:8px}.whead h1{margin:0}
.whead .wi{width:54px;height:54px;padding:10px;border-radius:14px}
table.wt td.main a{color:inherit;text-decoration:none;font-weight:700;white-space:normal;overflow-wrap:anywhere}
table.wt td.num{white-space:nowrap}
.wages .more{font:inherit;font-size:14px;background:none;border:1px solid var(--line);border-radius:18px;padding:7px 14px;margin-top:8px;cursor:pointer;color:var(--ink)}
.wform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.pick{display:flex;flex-direction:column;gap:5px;min-width:0}
.pick small{font-size:12.5px;color:var(--ink2)}
.pickbtn{font:inherit;font-size:14px;text-align:start;padding:10px 12px 10px 30px;border:1px solid var(--line);
  border-radius:12px;background:var(--ground);color:var(--ink2);cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;position:relative;min-width:0}
.pickbtn::after{content:"‹";position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%) rotate(-90deg);color:var(--ink2)}
.pickbtn.set{color:var(--ink);font-weight:700}
.wnat.seg{margin:0;display:flex}.wnat.seg button{flex:1}
.money{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--ground);overflow:hidden}
.money input{border:0!important;flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 12px;background:none;color:var(--ink)}
.money i{font-style:normal;font-size:13px;color:var(--ink2);padding:0 12px}
.sheet{position:fixed;inset:0;z-index:50;background:#0006;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheetcard{background:var(--ground);width:min(560px,100%);max-height:78vh;border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;padding:14px 16px 10px;box-shadow:0 -8px 30px #0003}
@media(min-width:761px){.sheet{align-items:center}.sheetcard{border-radius:20px;max-height:70vh}}
.sheetcard header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheetcard header b{font-size:16px}
.sheetcard .x{font:inherit;font-size:24px;line-height:1;border:0;background:none;cursor:pointer;color:var(--ink2)}
.sheetcard input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.sheetcard ul{list-style:none;margin:8px 0 0;padding:0;overflow-y:auto}
.sheetcard li button{font:inherit;font-size:14.5px;width:100%;text-align:start;padding:12px 4px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;color:var(--ink)}
.wsay{font-size:17px;margin:14px 0 4px}
.wtiles.w3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.wtiles.w3{grid-template-columns:1fr 1fr}.wtiles.w3 .wtile b{font-size:20px}.wtiles.w3 .wtile{padding:10px}}
.wtile small i{font-style:normal;opacity:.8}
@media(max-width:760px){.wform{grid-template-columns:1fr 1fr}}
.wform label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink2);min-width:0}
.wform select,.wform input{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--ground);color:var(--ink);min-width:0;width:100%}
.rt2s{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:8px}
@media(max-width:900px){.rt2s{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.rt2{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:14px;padding:11px 12px;
  text-decoration:none;color:inherit;min-width:0}
.rt2 small{font-size:11.5px;color:var(--ink2)}
.rt2h{display:flex;gap:8px;align-items:center;min-width:0}
.rt2h img{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);flex:none}
.rt2h b{font-size:14px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rt2p{font-size:12.5px;line-height:1.5;color:var(--ink2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
article.apps table.grid{display:table;min-width:0;table-layout:auto;font-size:13.5px}
article.apps table.grid thead{display:table-header-group}
article.apps table.grid tbody{display:table-row-group}
article.apps table.grid tr{display:table-row;border:0;padding:0;margin:0;border-radius:0}
article.apps table.grid td,article.apps table.grid td.main{display:table-cell;padding:8px 6px;
  border-bottom:1px solid var(--line);text-align:start;width:auto;vertical-align:middle}
article.apps table.grid td[data-l]::before{content:none}
article.apps table.grid th{padding:8px 6px;white-space:normal;font-size:12px}
article.apps table.grid td.main b{font-size:13.5px}
article.apps .tablewrap{overflow:visible}
@media(max-width:760px){
  article.apps table.grid{font-size:12px}
  article.apps table.grid td,article.apps table.grid td.main{padding:7px 4px}
  article.apps table.grid td.main b{font-size:12.5px}
  article.apps table.grid .rhead img{width:26px;height:26px;border-radius:7px}
  article.apps table.grid .rhead b{font-size:12.5px}
  article.apps .rankcards,article.apps .minis{grid-template-columns:1fr 1fr;gap:8px}
  article.apps .rankcard{padding:10px 11px}
  article.apps .rankcard li{font-size:12.5px;flex-wrap:wrap;gap:2px 8px}
  article.apps .privcard{padding:10px 11px}.privcard p{font-size:12.5px}
  article.apps .reviews{grid-template-columns:1fr 1fr;gap:8px}
  article.apps .reviews li{padding:10px 11px}
  article.apps .reviews p{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
  article.apps .reviews .rvh{flex-direction:column;gap:0}
  article.apps .rcard{padding:11px 12px}
}
.rlines{list-style:none;padding:0;margin:8px 0 0}
.rlines li{border-top:1px solid var(--line)}
.rlines li:first-child{border:0}
.rlines a{display:flex;gap:10px;align-items:baseline;padding:11px 0;text-decoration:none;color:inherit;
  font-size:15px;line-height:1.6}
.rlines .tag{flex:none;font-size:11.5px;color:var(--ink2);border:1px solid var(--line);border-radius:10px;padding:1px 8px}
.more{display:inline-block;margin:6px 0 0;font-size:14px;text-decoration:none;font-weight:700}
.rsec{scroll-margin-top:calc(var(--hh,70px) + 16px)}
.rcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0}
.rhead{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.rhead img{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);flex:none}
.rhead b{display:block;font-size:16px}
.rhead small{display:block;color:var(--ink2);font-size:13px;margin-top:2px}
.rcard .tablewrap{margin-top:10px}
.rcard .plainlist{margin:10px 0 0;padding:0;list-style:none}
.rcard .plainlist li{margin:0;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.rcard .plainlist li:first-child{border:0}
.fact b small{display:block;font-size:12px;color:var(--ink2);font-weight:400}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.minis>div{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.minis small{color:var(--ink2);font-size:13px}
.mini{margin:8px 0 0}.mini svg{width:100%;height:90px;color:var(--ink)}
.mini figcaption{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2)}
.starbars{list-style:none;padding:0;margin:10px 0 0;max-width:560px}
.starbars li{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;padding:4px 0;font-size:14px}
.starbars i{display:block;height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.starbars b{display:block;height:100%;background:var(--ink)}
.reviews{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.reviews li{border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.reviews .rvh{display:flex;justify-content:space-between;gap:10px;color:var(--ink2);font-size:13px}
.reviews .rvs{color:#c08a00;letter-spacing:1px}
.reviews p{margin:6px 0 0;font-size:14.5px;line-height:1.7}
.plainlist{padding-inline-start:18px}.plainlist li{margin:6px 0}.plainlist small{display:block;color:var(--ink2)}
.privcard{border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.privcard small{color:var(--ink2);font-size:13px}.privcard p{margin:6px 0 0;font-size:15px}
.notes{white-space:pre-line;font-size:14.5px;color:var(--ink2)}
.appcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
@media(max-width:760px){.appcards{grid-template-columns:1fr 1fr}}
.appcard{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;
  padding:9px 10px;text-decoration:none;color:inherit;min-width:0}
.appcard img,.appcard .noic{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);flex:none;background:var(--paper)}
.appcard span{min-width:0}
.appcard b{display:block;font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appcard small{display:block;font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.applinks{display:flex;flex-wrap:wrap;gap:8px}.applinks .fchip{text-decoration:none}
article.apps h2.sec{border-top:1px solid var(--line);padding-top:22px;margin-top:34px}
article.apps .grid th,article.apps .grid thead tr{border-bottom:1px solid var(--line)!important}
.rankcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.rankcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.rankcard small{color:var(--ink2);font-size:13px}
.rankcard ul{list-style:none;margin:8px 0 0;padding:0}
.rankcard li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.rankcard li:first-child{border:0}
.storebtn{display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:22px;
  text-decoration:none;font-weight:700}
.shots{display:flex;gap:10px;overflow-x:auto;margin:24px 0}
.shots img{height:360px;border-radius:14px;flex:none}
@media(max-width:760px){.facts{grid-template-columns:1fr 1fr}.shots img{height:280px}.appicon{width:64px;height:64px}}
details.more summary{cursor:pointer;padding:12px 2px;color:var(--ink2);font-size:14px}
.pair2 details summary{cursor:pointer;padding:10px 2px;color:var(--ink2);font-size:14px}
.allapps{display:inline-block;margin:10px 0 0;font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 14px;
  border:2px solid var(--line);border-radius:16px;background:var(--ground);
  text-decoration:none;color:var(--ink);overflow:hidden;
  transition:border-color .15s,transform .15s}
.tile::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;
  background:var(--tone)}
.tile:hover{border-color:var(--tone);transform:translateY(-2px)}
.tile .tlabel{font-size:14px;font-weight:700;color:var(--ink2)}
.tile .tline{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:8px}
.tile .tfig{font:700 32px/1.15 var(--num);letter-spacing:-.01em;overflow-wrap:anywhere}
.tile .tunit{font-size:17px;font-weight:700;color:var(--ink)}
.tile .tbasis{font-size:12px;color:var(--ink2);margin-top:6px;opacity:.9}
.tile .tctx{font-size:13.5px;color:var(--ink2)}
.tile .tfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:14px;padding-top:11px;border-top:1.5px solid var(--line);
  font-size:12px;color:var(--ink2);white-space:nowrap}
.tile .tfoot i{font-style:normal;font-size:16px;color:var(--tone);font-weight:700}
ol.ranks .ic{flex:none;width:44px;height:44px;border-radius:11px;object-fit:cover;
  background:var(--paper);border:1.5px solid var(--line)}
ol.ranks .n{flex:1;min-width:0}
ol.ranks .n b{display:block;font-size:16px;line-height:1.45;overflow-wrap:anywhere}
ol.ranks .n small{display:block;font-size:13px;color:var(--ink2);margin-top:3px;
  overflow-wrap:anywhere}
ol.ranks .mv{flex:none;font-size:14px;font-weight:700;white-space:nowrap}
/* the chart: drawing scales, text does not */
.chartfig{direction:ltr;margin:20px 0 0}
.chartfig .readout{direction:inherit;display:flex;align-items:baseline;gap:9px;
  flex-wrap:wrap;margin:0 0 10px;padding:10px 13px;border-radius:12px;
  background:var(--paper);transition:background .12s}
.chartfig .readout.live{background:var(--ink)}
.chartfig .readout.live b,.chartfig .readout.live .u{color:var(--ground)}
.chartfig .readout.live .p{color:#ffffffb0}
.chartfig .readout b{font:700 24px/1 var(--num)}
.chartfig .readout .u{font-size:14px;color:var(--ink2)}
.chartfig .readout .p{margin-inline-start:auto;font-size:13px;color:var(--ink2)}
.chartfig .plot{position:relative;height:270px;margin-inline-end:66px;touch-action:none;
  cursor:crosshair;border-inline-end:2px solid var(--line);border-bottom:2px solid var(--line)}
.chartfig svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.chartfig .ytick{position:absolute;inset-inline-end:0;inset-inline-start:0;pointer-events:none}
.chartfig .ytick i{display:block;border-top:1.5px solid var(--line)}
.chartfig .ytick em{position:absolute;inset-inline-start:100%;top:0;transform:translateY(-50%);
  padding-inline-start:12px;font:400 13px/1 var(--num);font-style:normal;
  color:var(--ink2);white-space:nowrap}
.chartfig .enddot{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:2.5px solid var(--ground);margin:-5.5px 0 0 -5.5px}
.chartfig .cross{position:absolute;top:0;bottom:0;width:2px;margin-inline-end:-1px;
  background:var(--a2)}
.chartfig figcaption{display:flex;justify-content:space-between;gap:12px;
  margin-top:10px;padding-inline-end:66px;font-size:13px;color:var(--ink2)}
@media (max-width: 760px){
  .chartfig .plot{height:210px;margin-inline-end:52px}
  .chartfig figcaption{padding-inline-end:52px;font-size:12px}
  .chartfig .ytick em{font-size:12px;padding-inline-start:9px}
  .chartfig .readout b{font-size:21px}
}
dl.terms{margin:14px 0 0;padding:0}
dl.terms dt{font-weight:700;font-size:16px;padding-top:14px;
  border-top:2px solid var(--line);margin-top:14px}
dl.terms dt:first-child{border:0;margin-top:0;padding-top:0}
dl.terms dd{margin:6px 0 0;font-size:15px;line-height:1.75;color:var(--ink2)}
.wtile .fresh{margin-top:auto;padding-top:6px;border-top:1px solid var(--line);font-size:11.5px}
.gt.acts tr.hit td{background:rgba(10,125,85,.1)}.gt.acts tr.div{cursor:pointer}.gt.acts tr.div td.lab{font-weight:700}.gt.acts tr.cls td{font-size:12.5px;color:var(--ink2)}.gt.acts tr.cls td.lab{padding-inline-start:18px}.gt.acts .twist{display:inline-block;transition:transform .15s}.gt.acts tr.open .twist{transform:rotate(-90deg)}
.bizchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}.bizchips .fchip{white-space:nowrap}
.chipwrap{position:sticky;top:var(--hh,0px);z-index:6;background:var(--ground);margin:0 0 14px}
.chipwrap .chips{position:static;margin:0}
.chipwrap .arr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:none;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--ground);
  color:var(--ink);font-size:18px;line-height:1;cursor:pointer;box-shadow:0 2px 10px #0000001a;
  place-items:center;padding:0}
.chipwrap .arr.show{display:grid}
.chipwrap .arr.l{inset-inline-end:0}.chipwrap .arr.r{inset-inline-start:0}
.chipwrap::before,.chipwrap::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .2s}
.chipwrap::before{inset-inline-end:0;background:linear-gradient(to left,var(--ground),transparent)}
.chipwrap::after{inset-inline-start:0;background:linear-gradient(to right,var(--ground),transparent)}
.chipwrap.fl::before,.chipwrap.fr::after{opacity:1}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:12px 0 10px;
  position:sticky;top:var(--hh,0px);z-index:6;background:var(--ground);
  border-bottom:2px solid var(--line)}
.fchip{font:inherit;font-size:14px;padding:8px 14px;border-radius:20px;border:2px solid var(--line);
  background:var(--ground);color:var(--ink);cursor:pointer}
.fchip small{color:var(--ink2)}
.fchip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.fchip.on small{color:#ffffff99}
.sec-cell{color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
.pill{display:inline-block;padding:5px 12px;border-radius:14px;font-size:13px;font-weight:700;white-space:nowrap}
.tbl.wide{max-width:100%}
.tbl.wide .k{color:var(--ink2);width:40%;direction:inherit;text-align:start;font-size:14px}
.tbl.wide .v{font-weight:600;direction:inherit;text-align:start}
.tbl{width:100%;border-collapse:collapse;max-width:420px}
.tbl td{padding:10px 8px;border-bottom:2px solid var(--line);direction:ltr;text-align:start}
.tbl td:first-child{color:var(--ink2)}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.ncard{background:var(--ground);border:2px solid var(--line);border-radius:20px;padding:22px;
  display:grid;gap:8px;align-content:start;text-decoration:none;transition:border-color .15s}
.ncard:hover{border-color:var(--ink)}
.ngrid.big .ncard{padding:26px}
.ncard .lbl{font-size:15px;color:var(--ink2)}
.ncard .fig{font-size:34px;font-family:var(--num);line-height:1.15}
.ncard .fig .u{font-size:17px;font-family:var(--ui);color:var(--ink2)}
.ncard .chg{font-size:15px;font-weight:700}
.ncard .when{font-size:13px;color:var(--ink2)}
.ncard .means{font-size:14px;line-height:1.7;color:var(--ink2);margin-top:6px}
.ncard a{color:var(--a2);text-decoration:none;font-weight:600;font-size:13px}
.social a{margin-inline-start:14px;text-decoration:none}
h2.sec small{display:block;letter-spacing:0;font-size:15px;color:var(--ink2);margin-top:8px;font-weight:400}
.live{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.livecard{background:var(--paper);border-radius:18px;padding:22px;display:grid;gap:4px}
.livecard .lbl{font-size:15px;color:var(--ink2)}
.livecard .fig{font-size:38px;font-family:var(--num);line-height:1.2}
.livecard a{color:var(--a2);text-decoration:none;font-weight:600}
footer{border-top:2px solid var(--line);margin-top:56px;padding:26px 0 44px;color:var(--ink2);font-size:15px}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
/* the phone is the real screen: two columns, short pages, no sideways scrolling */
@media(max-width:820px){
  body{font-size:16px;line-height:1.6}
  .wrap{width:min(1180px,100% - 28px)}
  header .bar{padding:8px 0 4px}
  header .logo,header .logo svg,.logo img{height:48px}
  /* the section names are long now, so the bar scrolls instead of colliding */
  nav{gap:20px;justify-content:flex-start;font-size:13px;
    padding-inline:2px;-webkit-overflow-scrolling:touch}
  nav a{padding:10px 0}
  header .navwrap{
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent)}
  .lead{grid-template-columns:1fr;gap:16px;padding:20px 0 26px}
  .lead h1{font-size:21px;line-height:1.35;margin:8px 0}
  .lead img{aspect-ratio:16/10;max-height:26vh;border-radius:10px}
  .why{padding:12px 14px;font-size:14px;border-radius:12px;margin-top:12px}
  h2.sec{margin:30px 0 12px;font-size:12px;padding-top:16px}
  h2.sec small{font-size:13px;margin-top:4px}
  article{padding:18px 0 40px}
  article h1{font-size:25px;line-height:1.35;margin:10px 0}
  article p{margin:12px 0}
  article img.hero{aspect-ratio:16/10;max-height:38vh;border-radius:12px;margin:14px 0 6px}
  .wiregrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .wire{border-radius:12px}
  .wire .body{padding:10px 11px 12px;gap:4px}
  .wire .ttl{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
  .wire .sum{display:none}
  .wire .src{font-size:11px}
  .wire .stamp{font-size:10.5px;margin-top:1px}
  .wire .thumb{aspect-ratio:16/10}
  /* the sector filter stays under the header while you scroll */
  .chips{padding:9px 0 8px}
  .ngrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ncard{padding:13px;gap:3px;border-radius:14px}
  .ncard .lbl{font-size:12px}.ncard .fig{font-size:25px}.ncard .u{font-size:12px}
  .ncard .chg{font-size:12px}.ncard .when{font-size:11px}.ncard .means{font-size:13px;line-height:1.6}
  .spark{height:30px;margin-top:2px}
  .bignum b{font-size:38px}.lede{font-size:17px}.mean{font-size:17px}.chart{margin:14px 0;border-radius:12px}
  .cards{grid-template-columns:repeat(2,1fr);gap:14px}
  .card h3{font-size:16px;line-height:1.45}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  ol.bars li,ol.bars.pairs li{grid-template-columns:1fr;gap:6px}
  ol.bars li{grid-template-columns:1fr auto}
  ol.bars li .bn{grid-column:1 / -1}
  ol.bars.pairs li{grid-template-columns:1fr}
  .tile{padding:14px 13px 11px;border-radius:14px}
  .tile .tlabel{font-size:12.5px}
  .tile .tline{margin-top:6px;gap:5px}
  .tile .tfig{font-size:23px}
  .tile .tunit{font-size:14px}
  .tile .tbasis{font-size:11px;line-height:1.45}
  .tile .tctx{font-size:12px;line-height:1.45}
  .tile .tfoot{margin-top:10px;padding-top:9px;font-size:11px}
  /* tables stop being tables and become cards */
  .tablewrap{overflow:visible}
  table.grid{min-width:0;display:block;font-size:14px;table-layout:auto}
  table.grid td,table.grid td.main,table.grid td.num,table.grid td.sec-cell,table.grid td.lat{width:auto}
  table.grid thead{display:none}
  table.grid tbody,table.grid tr{display:block}
  table.grid tr{border:2px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:9px}
  table.grid td{display:flex;justify-content:space-between;gap:12px;border:0;padding:2px 0;text-align:end}
  table.grid td.main{display:block;padding:0 0 6px;text-align:start}
  table.grid td.main b,table.grid td.main .tname{font-size:15px;line-height:1.5;
    -webkit-line-clamp:unset;display:block;overflow:visible;white-space:normal;
    overflow-wrap:anywhere}
  table.grid td{overflow-wrap:anywhere}
  table.grid td[data-l]::before{content:attr(data-l);color:var(--ink2);font-size:12px;flex:none}
  table.grid td.sec-cell{max-width:none;font-size:12px}
  /* the sector filter is one swipeable row, not a wall */
  .chips{gap:6px;margin:12px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .fchip{font-size:13px;padding:6px 11px;white-space:nowrap;flex:none}
  .signup{padding:24px 22px 22px;margin:32px 0;border-radius:18px}.signup h3{font-size:22px}
  .signup input{min-width:0;flex:1}
  footer{margin-top:44px;padding:22px 0 36px;font-size:14px}
}
@media(max-width:420px){.ncard .fig{font-size:22px}.lead h1,article h1{font-size:23px}}
/* A page here is 190KB of markup with the figures written into it, and a phone
   spends a second or two laying that out. The tap registered, the old page stayed
   on screen, and nothing said so — which reads as a site that ignored you. The bar
   is drawn by the page being left, in the moment between the tap and the first
   paint of the next one, and it dies with that page. */
.rbar{position:fixed;top:0;inset-inline:0;height:3px;z-index:9000;pointer-events:none;
  background:linear-gradient(to right,var(--a1),var(--a2));transform:scaleX(0);
  transform-origin:left center;transition:transform .18s ease-out;
  box-shadow:0 0 10px rgba(242,200,75,.55)}
[dir="rtl"] .rbar{transform-origin:right center}
/* A page of 138 tables is 35,000 elements, and a phone laid out every one of
   them before it drew the first. Measured on a CPU four times slower: 3.7s to the
   first paint of /health, 6.9s to the end. The card a reader is not looking at is
   skipped until they scroll to it — it stays in the document, so find-in-page and
   Google still read it, and the remembered height keeps the scrollbar honest. */
.odcard,.ranks{content-visibility:auto;contain-intrinsic-size:auto 420px}
/* the row that was tapped says so too, so the eye has somewhere to rest */
@media(hover:none){a:active{opacity:.62}}
:root{--ground:#FFFFFF;--paper:#F8F4EE;--ink:#2B1A12;--ink2:#76645A;--line:#ECE5DB;--a1:#F2C84B;--a2:#E2643A;--a3:#9CB57A;--radius:32px;--chip-radius:32px;--ui:"UI";--logo:"Logo";--num:"Num";--page:#FAF9F7;--a2:#1E3A5F}
/* What is genuinely direction-neutral, and so is not covered by the logical rewrite:
   a number always reads left to right, whichever way the page runs. */
.chartfig .readout{direction:ltr}
/* A tender keeps its registered Arabic name, so the English list leads with the kind
   of work instead — read off the title's own opening words. In Arabic that word is
   already the first thing in the title, so it is shown here only. */
table.grid td .twork{display:block;font:800 11px/1.5 var(--ui);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);margin-bottom:5px}
/* the whole title in English, when there is one: then it leads and the registered
   Arabic name sits under it for the supplier who has to find it on Etimad */
table.grid td .tfull{display:block;font:700 15px/1.45 var(--ui);color:var(--ink);
  margin-bottom:4px}
table.grid td.main .tfull+.tname{font-weight:500;font-size:13px;opacity:.7}
/* on a tender page the English title is the heading, and the name the agency
   registered sits under it, because that is the one a supplier searches Etimad for */
h1.ten{display:block}
h1.ten:not(:empty)+h1.tar{font-size:17px;font-weight:500;opacity:.72;margin:6px 0 0}
h1.ten:empty{display:none}
table.grid td.main .tname{font-weight:600;font-size:14px;opacity:.85}
/* The activity names are long in English — «Facility operation, maintenance and
   cleaning — operation and maintenance» is wider than a phone. Let a chip wrap
   instead of running off the edge and under the scroll arrow. */
.chips .fchip{text-align:start}
/* dir="auto" is there so a name's Arabic and Latin runs are ordered correctly. It
   also flips the alignment with them, which left the name hanging on the right of a
   card whose every other line sits on the left. Keep the ordering, drop the flip. */
[dir="auto"]{text-align:left}
h1[dir="auto"],h2[dir="auto"],h3[dir="auto"],td[dir="auto"],.tname[dir="auto"]{text-align:left}
/* The front page is bilingual by design: an Arabic title with its English under
   it. Translated, both lines say the same thing, so the second one goes. */
.hcard .en,.home .en,.hcard small.en{display:none}
/* the rule-written sentences are produced in both languages rather than translated;
   which one shows is decided in HOME_CSS by the document's lang, because that
   stylesheet sits in the body and would otherwise beat anything said here. */


/* The tender's own name is the widest thing in the row and was being squeezed into
   197px on a 1024px screen, which broke the words. Give the column the room. */
@media(min-width:760px){
  table.grid td.main,table.grid th:first-child{width:44%}
  table.grid td[data-l="القطاع"],table.grid td.sec-cell{width:26%}
}