/* شهاب — ودجت الطقس (.sh-wx) وودجت العملات (.sh-fx). المنطق في js/widgets.js.
   الاتنين شيب في التوب-بار (كحلي، 12px) بيفتح لوحة على الورق، ولكل واحد شكل
   بطاقة (--card) للأعمدة الجانبية. الأرقام لاتينية جدولية LTR. */

/* ------------------------------------------------------------ weather chip */
.sh-wx{position:relative;display:inline-flex;align-items:center;font-family:var(--sh-font)}
.sh-wx[hidden]{display:none}
.sh-wx__btn{position:relative}
/* the drawn control stays as it is; the target it answers to is 44px tall */
.sh-wx__btn::before{content:"";position:absolute;inset-block:-13px;inset-inline:0}
.sh-wx__btn{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:0;background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--sh-font);font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:background .16s ease;
}
.sh-wx[data-open] .sh-wx__btn{background:rgba(255,255,255,.14)}@media (hover:hover){.sh-wx__btn:hover{background:rgba(255,255,255,.14)}}
.sh-wx__btn:focus-visible{outline:2px solid var(--sh-sky);outline-offset:1px}
.sh-wx__btn .sh-i{font-size:12px;color:#ffd166}
.sh-wx__btn .fa-moon,.sh-wx__btn .fa-cloud-moon,.sh-wx__btn .fa-cloud-moon-rain{color:#cfe0ff}
.sh-wx__btn .fa-cloud,.sh-wx__btn .fa-smog{color:#cbd5e1}
.sh-wx__btn .fa-cloud-rain,.sh-wx__btn .fa-cloud-showers-heavy,.sh-wx__btn .fa-cloud-sun-rain,.sh-wx__btn .fa-cloud-bolt{color:#9fc2ea}
.sh-wx__btn .fa-snowflake{color:#e8f1ff}
.sh-wx__t{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-wx__city{font-weight:700;color:var(--sh-on-dark-80)}
.sh-wx__btn--skel{opacity:.5;cursor:default}
.sh-wx__btn--skel .sh-wx__t{letter-spacing:.1em}

/* the popover: a light sheet on the house paper — white surface, a blue top
   rule with a notch that points at the chip, the current conditions on a blue
   tint band, and the three days as soft tiles. (The --card variant below stays
   navy for sidebars.) */
.sh-wx__pop{
  position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:60;width:300px;max-width:calc(100vw - 24px);
  background:#fff;color:var(--sh-ink);border:1px solid var(--color-border);border-top:3px solid var(--sh-blue);
  box-shadow:0 22px 44px -18px rgba(10,26,51,.45);padding:12px 14px 10px;direction:rtl;text-align:start;font-size:12px;
}
.sh-wx__pop::before{content:"";position:absolute;top:-9px;inset-inline-start:var(--sh-wx-notch,16px);width:12px;height:12px;background:var(--sh-blue);transform:rotate(45deg)}
.sh-wx__pop[hidden]{display:none}
.sh-wx__pophead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sh-wx__title{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--sh-navy)}
.sh-wx__title .sh-i{color:var(--sh-blue);font-size:11px}
.sh-wx__close{width:26px;height:26px;border:0;background:var(--color-surface-soft);color:var(--sh-navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:background .16s ease,color .16s ease}
@media (hover:hover){.sh-wx__close:hover{background:var(--sh-blue);color:#fff}}
.sh-wx__close:focus-visible{outline:2px solid var(--sh-blue);outline-offset:1px}
.sh-wx__tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.sh-wx__tab{padding:4px 9px;border:1px solid var(--color-border);background:#fff;color:var(--sh-ink-2);font-family:var(--sh-font);font-size:11px;font-weight:700;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
@media (hover:hover){.sh-wx__tab:hover{background:var(--color-surface-blue);border-color:var(--sh-sky);color:var(--sh-navy)}}
.sh-wx__tab[aria-pressed="true"]{background:var(--sh-blue);border-color:var(--sh-blue);color:#fff}
.sh-wx__tab:focus-visible{outline:2px solid var(--sh-blue);outline-offset:1px}
/* now: a tint band edge to edge */
.sh-wx__now{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;margin:0 -14px;padding:12px 14px;background:var(--color-surface-blue)}
.sh-wx__now > .sh-i{font-size:30px;color:#e39b00}
.sh-wx__now > .fa-moon,.sh-wx__now > .fa-cloud-moon,.sh-wx__now > .fa-cloud-moon-rain{color:var(--sh-navy)}
.sh-wx__now > .fa-cloud,.sh-wx__now > .fa-smog{color:var(--color-text-muted)}
.sh-wx__now > .fa-cloud-rain,.sh-wx__now > .fa-cloud-showers-heavy,.sh-wx__now > .fa-cloud-sun-rain,.sh-wx__now > .fa-cloud-bolt,.sh-wx__now > .fa-snowflake{color:var(--sh-blue)}
.sh-wx__big{font-size:32px;font-weight:800;line-height:1;color:var(--sh-navy);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-wx__desc{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:800;color:var(--sh-navy);min-width:0}
.sh-wx__desc small{font-size:10.5px;font-weight:700;color:var(--sh-mute)}
.sh-wx__days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:12px}
.sh-wx__day{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;background:var(--color-surface-soft);color:var(--sh-navy);font-size:11px;font-weight:700;text-align:center}
.sh-wx__day b{font-weight:800}
.sh-wx__day .sh-i{font-size:15px;color:#e39b00}
.sh-wx__day .fa-cloud,.sh-wx__day .fa-smog{color:var(--color-text-muted)}
.sh-wx__day .fa-cloud-rain,.sh-wx__day .fa-cloud-showers-heavy,.sh-wx__day .fa-cloud-sun-rain,.sh-wx__day .fa-cloud-bolt,.sh-wx__day .fa-snowflake{color:var(--sh-blue)}
.sh-wx__day span{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-wx__day em{font-style:normal;color:var(--sh-mute)}
.sh-wx__foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid var(--color-border-soft);font-size:10.5px;color:var(--sh-mute)}

/* card variant (sidebars): same parts on navy, no button/popover */
.sh-wx--card{display:block;background:var(--sh-navy);color:#fff;padding:14px 16px 12px}
.sh-wx--card .sh-wx__head{margin-bottom:10px}
.sh-wx--card .sh-wx__title{font-size:13.5px;color:#fff}
.sh-wx--card .sh-wx__title .sh-i{color:var(--sh-sky)}
.sh-wx--card .sh-wx__tab{background:transparent;border-color:rgba(255,255,255,.16);color:#fff}
@media (hover:hover){.sh-wx--card .sh-wx__tab:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}}
.sh-wx--card .sh-wx__now{margin:0 -16px;padding:10px 16px;background:rgba(255,255,255,.06)}
.sh-wx--card .sh-wx__now > .sh-i{color:#ffd166}
.sh-wx--card .sh-wx__now > .fa-moon,.sh-wx--card .sh-wx__now > .fa-cloud-moon{color:#cfe0ff}
.sh-wx--card .sh-wx__now > .fa-cloud,.sh-wx--card .sh-wx__now > .fa-smog{color:#cbd5e1}
.sh-wx--card .sh-wx__now > .fa-cloud-rain,.sh-wx--card .sh-wx__now > .fa-cloud-showers-heavy,.sh-wx--card .sh-wx__now > .fa-cloud-sun-rain,.sh-wx--card .sh-wx__now > .fa-cloud-bolt,.sh-wx--card .sh-wx__now > .fa-snowflake{color:#9fc2ea}
.sh-wx--card .sh-wx__big,.sh-wx--card .sh-wx__desc{color:#fff}
.sh-wx--card .sh-wx__desc small{color:var(--sh-on-dark-60)}
.sh-wx--card .sh-wx__day{background:rgba(255,255,255,.05);color:#fff}
.sh-wx--card .sh-wx__day .sh-i{color:#ffd166}
.sh-wx--card .sh-wx__day .fa-cloud,.sh-wx--card .sh-wx__day .fa-smog{color:#cbd5e1}
.sh-wx--card .sh-wx__day .fa-cloud-rain,.sh-wx--card .sh-wx__day .fa-cloud-showers-heavy,.sh-wx--card .sh-wx__day .fa-cloud-sun-rain,.sh-wx--card .sh-wx__day .fa-cloud-bolt,.sh-wx--card .sh-wx__day .fa-snowflake{color:#9fc2ea}
.sh-wx--card .sh-wx__day em{color:var(--sh-on-dark-60)}
.sh-wx--card .sh-wx__foot{border-top-color:rgba(255,255,255,.12);color:var(--sh-on-dark-60)}
.sh-wx__skel{display:block;height:80px;background:rgba(255,255,255,.06)}

/* ------------------------------------------------------------ fx chip */
/* the rates are a chip beside the weather: one pair, still, chosen by the
   reader; the sheet under it carries all of them with the day's change */
.sh-fx{position:relative;display:inline-flex;align-items:center;font-family:var(--sh-font);font-variant-numeric:tabular-nums}
.sh-fx[hidden]{display:none}
.sh-fx__btn{position:relative}
.sh-fx__btn::before{content:"";position:absolute;inset-block:-13px;inset-inline:0}   /* a 44px target on a 34px bar */
.sh-fx__btn{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:0;background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--sh-font);font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:background .16s ease;
}
.sh-fx[data-open] .sh-fx__btn{background:rgba(255,255,255,.14)}@media (hover:hover){.sh-fx__btn:hover{background:rgba(255,255,255,.14)}}
.sh-fx__btn:focus-visible{outline:2px solid var(--sh-sky);outline-offset:1px}
.sh-fx__btn > .sh-i{font-size:12px;color:var(--sh-sky)}
.sh-fx__code{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--sh-on-dark-72);direction:ltr;unicode-bidi:isolate}
.sh-fx__t{font-weight:800;direction:ltr;unicode-bidi:isolate}
.sh-fx__tick{display:inline-flex;align-items:center}
.sh-fx__tick .sh-i{font-size:9px}
.sh-fx__tick--up{color:#93c3ab}
.sh-fx__tick--down{color:#d59d9d}
.sh-fx__btn--skel{opacity:.5;cursor:default}
.sh-fx__btn--skel .sh-fx__t{letter-spacing:.1em}

/* the sheet: the weather popover's paper, rule and notch */
.sh-fx__pop{
  position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:60;width:320px;max-width:calc(100vw - 24px);
  background:#fff;color:var(--sh-ink);border:1px solid var(--color-border);border-top:3px solid var(--sh-blue);
  box-shadow:0 22px 44px -18px rgba(10,26,51,.45);padding:12px 14px 10px;direction:rtl;text-align:start;font-size:12px;
}
.sh-fx__pop::before{content:"";position:absolute;top:-9px;inset-inline-start:var(--sh-fx-notch,16px);width:12px;height:12px;background:var(--sh-blue);transform:rotate(45deg)}
.sh-fx__pop[hidden]{display:none}
.sh-fx__pophead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sh-fx__pop .sh-fx__title{font-size:13px;color:var(--sh-navy)}
.sh-fx__pop .sh-fx__title .sh-i{color:var(--sh-blue);font-size:11px}
.sh-fx__close{width:26px;height:26px;border:0;background:var(--color-surface-soft);color:var(--sh-navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:background .16s ease,color .16s ease}
@media (hover:hover){.sh-fx__close:hover{background:var(--sh-blue);color:#fff}}
.sh-fx__close:focus-visible{outline:2px solid var(--sh-blue);outline-offset:1px}
/* the chosen pair, large, on the tint band edge to edge */
.sh-fx__lead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 -14px;padding:12px 14px;background:var(--color-surface-blue)}
.sh-fx__big{font-size:28px;font-weight:800;line-height:1;color:var(--sh-navy);direction:ltr;unicode-bidi:isolate}
.sh-fx__leadname{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:800;color:var(--sh-navy);min-width:0}
.sh-fx__leadname small,.sh-fx__name small{font-size:10.5px;font-weight:700;color:var(--sh-mute);direction:ltr;unicode-bidi:isolate;text-align:start}
.sh-fx__leadchg{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px}
.sh-fx__since{font-size:10.5px;font-weight:700;color:var(--sh-mute)}
/* every pair as a row; pressing one moves it to the chip */
.sh-fx__rows{display:flex;flex-direction:column;padding-top:4px}
.sh-fx__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;width:100%;padding:8px 2px;
  border:0;border-bottom:1px solid var(--color-border-soft);background:none;color:var(--sh-ink);text-align:start;
  font-family:var(--sh-font);font-size:12px;cursor:pointer;transition:background .16s ease;
}
.sh-fx__row:last-child{border-bottom:0}
@media (hover:hover){.sh-fx__row:hover{background:var(--color-surface-soft)}}
.sh-fx__row:focus-visible{outline:2px solid var(--sh-blue);outline-offset:-2px}
.sh-fx__row[aria-pressed="true"]{color:var(--sh-blue)}
.sh-fx__row[aria-pressed="true"] .sh-fx__name{font-weight:800}
.sh-fx__name{display:flex;align-items:baseline;gap:7px;font-weight:700;min-width:0}
.sh-fx__val{font-weight:800;direction:ltr;unicode-bidi:isolate}
.sh-fx__pop .sh-fx__val{color:var(--sh-navy)}
.sh-fx__row[aria-pressed="true"] .sh-fx__val{color:var(--sh-blue)}
.sh-fx__chg{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;min-width:58px;font-size:11.5px;font-weight:700;direction:ltr;unicode-bidi:isolate}
.sh-fx__chg .sh-i{font-size:10px}
/* the change reads in the desks' own muted olive and red on paper; on navy
   (the card) the two lighter tints below */
.sh-fx__chg--up{color:var(--color-desk-land)}
.sh-fx__chg--down{color:var(--color-desk-war)}
.sh-fx__chg--flat{color:var(--sh-mute)}
.sh-fx__foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border-soft);font-size:10.5px;color:var(--sh-mute)}
.sh-fx__skel{display:block;height:12px;width:60%;max-width:420px;background:rgba(255,255,255,.08)}

/* card variant (sidebars): the same rows on navy, no button/sheet */
.sh-fx--card{display:block;background:var(--sh-navy);color:#fff;padding:14px 16px 12px}
.sh-fx--card .sh-fx__head{margin-bottom:6px}
.sh-fx__title{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800}
.sh-fx__title .sh-i{color:var(--sh-sky);font-size:12px}
.sh-fx--card .sh-fx__list{display:block}
.sh-fx--card .sh-fx__item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:12.5px}
.sh-fx--card .sh-fx__item:last-child{border-bottom:0}
.sh-fx--card .sh-fx__pair{color:var(--sh-on-dark-72);font-weight:700}
.sh-fx--card .sh-fx__val{color:#fff}
.sh-fx--card .sh-fx__chg{min-width:64px}
.sh-fx--card .sh-fx__chg--up{color:#93c3ab}
.sh-fx--card .sh-fx__chg--down{color:#d59d9d}
.sh-fx--card .sh-fx__chg--flat{color:var(--sh-on-dark-60)}
.sh-fx--card .sh-fx__foot{border-top-color:rgba(255,255,255,.12);color:var(--sh-on-dark-60)}

/* ------------------------------------------------------------ type size */
/* the third chip in the topbar's tool end: two alefs, and a sheet with three
   choices. The choice itself is one attribute on <html>; css/type.css does
   the rest. On the phone the chip yields to a row inside the menu. */
.sh-ts{font-family:var(--sh-font)}
.sh-ts--chip{position:relative;display:inline-flex;align-items:center}
.sh-ts__btn{position:relative}
.sh-ts__btn::before{content:"";position:absolute;inset-block:-13px;inset-inline:0}
.sh-ts__btn{
  display:inline-flex;align-items:baseline;gap:1px;padding:3px 9px;border:0;background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--sh-font);line-height:1;cursor:pointer;transition:background .16s ease;
}
.sh-ts[data-open] .sh-ts__btn{background:rgba(255,255,255,.14)}@media (hover:hover){.sh-ts__btn:hover{background:rgba(255,255,255,.14)}}
.sh-ts__btn:focus-visible{outline:2px solid var(--sh-sky);outline-offset:1px}
.sh-ts__a{font-size:14px;font-weight:800}
.sh-ts__a--sm{font-size:10px;opacity:.75}
.sh-ts__pop{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:60;width:240px;max-width:calc(100vw - 24px);
  background:#fff;color:var(--sh-ink);border:1px solid var(--color-border);border-top:3px solid var(--sh-blue);
  box-shadow:0 22px 44px -18px rgba(10,26,51,.45);padding:12px 14px 10px;direction:rtl;text-align:start;font-size:12px;
}
.sh-ts__pop::before{content:"";position:absolute;top:-9px;inset-inline-start:var(--sh-ts-notch,16px);width:12px;height:12px;background:var(--sh-blue);transform:rotate(45deg)}
.sh-ts__pop[hidden]{display:none}
.sh-ts__pophead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sh-ts__title{font-size:13px;font-weight:800;color:var(--sh-navy)}
.sh-ts__close{width:26px;height:26px;border:0;background:var(--color-surface-soft);color:var(--sh-navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:background .16s ease,color .16s ease}
@media (hover:hover){.sh-ts__close:hover{background:var(--sh-blue);color:#fff}}
.sh-ts__close:focus-visible{outline:2px solid var(--sh-blue);outline-offset:1px}
/* three equal choices; the chosen one is filled -- navy speaks */
.sh-ts__opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sh-ts__opt{
  min-height:40px;padding:6px 4px;border:1px solid var(--color-border);background:#fff;color:var(--sh-ink-2);
  font-family:var(--sh-font);font-weight:800;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.sh-ts__opt--sm{font-size:11.5px}
.sh-ts__opt--md{font-size:13px}
.sh-ts__opt--lg{font-size:15px}
@media (hover:hover){.sh-ts__opt:hover{background:var(--color-surface-blue);border-color:var(--sh-sky);color:var(--sh-navy)}}
.sh-ts__opt[aria-pressed="true"]{background:var(--sh-navy);border-color:var(--sh-navy);color:#fff}
.sh-ts__opt:focus-visible{outline:2px solid var(--sh-blue);outline-offset:1px}
.sh-ts__foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid var(--color-border-soft);font-size:10.5px;color:var(--sh-mute)}

/* the phone menu's row: label and the same three choices, on navy */
.sh-ts--row{display:none}
@media (max-width:900px){
  /* header nav > div is forced into a column by responsive.css (layered, !important),
     so the row is a column on purpose: the label, then the three choices */
  .sh-ts--row{display:flex;width:100%;padding:12px 0 6px;border-block-start:1px solid rgba(255,255,255,.12);color:#fff}
  .sh-ts__lbl{font-size:13px;font-weight:800;white-space:nowrap;margin-bottom:8px}
  .sh-ts--row .sh-ts__opts{width:100%;gap:4px}
  .sh-ts--row .sh-ts__opt{min-height:36px;border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
  .sh-ts--row .sh-ts__opt[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--sh-navy)}
  .sh-ts--row .sh-ts__opt:focus-visible{outline-color:var(--sh-sky)}
}
@media (max-width:640px){
  .sh-ts--chip{display:none}   /* the bar is full at phone widths; the menu row carries it */
}

/* ------------------------------------------------------------ in the topbar */
.sh-topbar__meta .sh-wx{margin-inline-start:2px}
.sh-topbar__meta .sh-fx{margin-inline-start:2px}
.sh-topbar[data-wx-open],.sh-topbar[data-fx-open],.sh-topbar[data-ts-open]{z-index:20}   /* above .sh-header__body (z 3) while a sheet is open */
@media (max-width:900px){
  .sh-wx__pop,.sh-fx__pop,.sh-ts__pop{position:fixed;inset-inline:12px;width:auto;max-width:none;margin-top:0}   /* top set by js from the chip */
}
@media (max-width:640px){
  /* the phone topbar is one row: clock, weather, rates, rss, language. The
     pair's code is the part the chip can spare -- the sheet still names it */
  .sh-fx__code{display:none}
}
@media (max-width:340px){
  /* at 320 the row cannot hold all five; rather than spill item by item into
     three ragged rows, the bar breaks once: the readings, then the links */
  .sh-topbar__inner{flex-wrap:wrap;height:auto;min-height:34px;padding-block:2px}
  .sh-topbar__meta,.sh-topbar__links{flex:none;flex-wrap:nowrap}
  .sh-topbar__links{margin-inline-start:auto}
}