/* ====== Alssaa News — Chrome (header, ticker, footer, cards) ====== */

/* ---------- Top utility bar ---------- */
.topbar {
  background: #0c1030;
  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.topbar .row {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; gap: 18px;
}
.topbar .date { color: rgba(255,255,255,.7); letter-spacing: .01em; }
.topbar a { color: rgba(255,255,255,.82); }
.topbar a:hover { color: white; }
.topbar .sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); flex: 0 0 auto; }

/* Ticker markets */
.markets { display: flex; gap: 18px; align-items: center; margin-left: 113px; }
.markets .m {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-num); font-size: 12px;
}
.markets .m .lbl  { color: rgba(255,255,255,.6); }
.markets .m .up   { color: #7ae0a8; }
.markets .m .down { color: #ff9a9a; }
.markets .m .flat { color: rgba(255,255,255,.45); }
/* ---------- /new-home header tiers ---------- */
.home-main .topbar,
.home-main .header {
  background: var(--theme-v1);
}
.home-main .header .brand .logo .st0 {
  fill: #fff;
}
.home-main .header {  border-bottom: 0;}.home-main .header .brand-row {  padding: 14px 0;}.home-main .header .search-trigger {  background: rgba(255,255,255,.09);  border-color: rgba(255,255,255,.16);  color: rgba(255,255,255,.82);}.home-main .header .search-trigger:hover {  background: rgba(255,255,255,.16);  border-color: rgba(255,255,255,.25);}.home-main .header .search-trigger svg {  opacity: .85;}.home-main .header .btn-subscribe {  background: transparent;  border: 1.5px solid rgba(255,255,255,.5);  color: #fff;}.home-main .header .btn-subscribe:hover {  background: rgba(255,255,255,.1);}.home-main .header .nav {  background: #fff;  border-top: 0;  border-bottom: 1px solid var(--line);}.home-main .header .nav .nav-row {  height: 50px;}.home-main .header .nav a.nav-item {  color: #1f2740;}.home-main .header .nav a.nav-item:hover,.home-main .header .nav a.nav-item.active {  color: var(--primary);}

/* .new-home-v3 chrome (shared style namespace on live pages) */
.new-home-v3 .topbar,
.new-home-v3 .header {
  background: var(--theme-v1);
}
.new-home-v3 .header {
  border-bottom: 0;
}
.new-home-v3 .header .brand-row {
  padding: 14px 0;
}
.new-home-v3 .header .brand .logo .st0 {
  fill: #fff;
}
.new-home-v3 .header .search-trigger {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.82);
}
.new-home-v3 .header .search-trigger:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.25);
}
.new-home-v3 .header .search-trigger svg {
  opacity: .85;
}
.new-home-v3 .header .btn-subscribe {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
}
.new-home-v3 .header .btn-subscribe:hover {
  background: rgba(255,255,255,.1);
}
.new-home-v3 .header .nav {
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.new-home-v3 .header .nav .nav-row {
  height: 50px;
}
.new-home-v3 .header .nav a.nav-item {
  color: #1f2740;
}
.new-home-v3 .header .nav a.nav-item:hover,
.new-home-v3 .header .nav a.nav-item.active {
  color: var(--primary);
}

/* ---------- Main header ---------- */
.header {
  background: white;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.header .brand-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 0;
  gap: 24px;
}
.header .brand {
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
}
.header .brand .logo {
  width: 180px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.header .brand .logo svg { width: 100%; height: 100%; }
.header .brand .logo .st0 { fill: var(--primary); }

.header .brand .tagline {
  font-size: 12px; color: var(--muted);
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 14px;
  max-width: 180px;
  line-height: 1.4;
}

.header .actions {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-start;
}
.header .search-trigger {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  min-width: 260px;
  transition: all .2s;
}
.header .search-trigger:hover { border-color: var(--line-2); background: white; }
.header .search-trigger svg { width: 16px; height: 16px; opacity: .7; }

.header .icon-btn {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: white; border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; transition: all .15s;
}
.header .icon-btn:hover { background: var(--surface-2); }
.header .mobile-menu-trigger { display: none; }
.header .btn-subscribe {
  padding: 10px 18px; border-radius: 999px;
  background: var(--primary); color: white;
  font-weight: 600; font-size: 14px; border: 0; cursor: pointer;
  transition: background .15s;
}
.header .btn-subscribe:hover { background: var(--navy-700); }

.header .weather {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  padding: 6px 10px; border-radius: 999px;
  background: var(--surface-2);
}
.header .weather .t { color: var(--ink); font-weight: 600; font-family: var(--f-num); }

/* Primary nav */
.nav {
  border-top: 1px solid var(--line);
  background: white;
}
.nav .nav-row {
  display: flex; align-items: center; gap: 2px;
  height: 48px; overflow-x: auto;
  scrollbar-width: none;
}
.nav .nav-row::-webkit-scrollbar { display: none; }
.nav a.nav-item {
  padding: 0 16px;
  height: 100%;
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  position: relative;
}
.nav a.nav-item:hover { color: var(--primary); }
.nav a.nav-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.nav a.nav-item.live {
  color: var(--live);
}
.nav a.nav-item.live::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); margin-inline-end: 7px;
  animation: livepulse 1.6s infinite;
}
.nav .spacer { flex: 1; }
.nav .quick {
  font-size: 13px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 12px;
  padding-inline-start: 16px;
}

/* ---------- Dropdown menus ---------- */
.nav-item-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.nav-item .arr {
  width: 11px; height: 11px;
  margin-inline-start: 3px;
  flex-shrink: 0;
  opacity: .55;
  transition: transform .22s ease;
  pointer-events: none;
}
.nav-item-wrap.dd-open > .nav-item .arr {
  transform: rotate(180deg);
  opacity: .9;
}
.nav-dropdown {
  position: fixed;
  display: none;
  min-width: 192px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(17,20,40,.13), 0 2px 8px rgba(17,20,40,.06);
  z-index: 999;
  padding: 6px;
  transform-origin: top right;
  animation: ddIn .15s ease;
}
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.nav-dropdown a:hover {
  background: var(--surface-2);
  color: var(--primary);
}

/* Mobile nav drawer — a mainly-white sheet with navy accents (head bar, edge
   stripe, active/hover ink). On this RTL site it slides in from the inline-start
   (right) edge, matching the hamburger's position at the top-right of the
   header. The whole site is dir="rtl", so `right:0` + translateX(100%) is the
   inline-start edge; keeping it physical avoids the logical/transform mismatch. */
.mobile-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  opacity: 0;
  transition: opacity .22s ease, visibility .22s ease;
}
.mobile-nav-drawer.open { visibility: visible; opacity: 1; }
.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 32, .45);
}
.mobile-nav-panel {
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  width: min(85vw, 340px);
  background: #fff;
  color: var(--ink);
  box-shadow: -12px 0 48px rgba(9, 12, 40, .26);
  padding: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.mobile-nav-drawer.open .mobile-nav-panel { transform: translateX(0); }
/* BBC-style drawer: white and airy, bold labels, very light full-width
   dividers, a clean chevron at the trailing edge, and a navy accent bar
   marking the active/open section (navy stands in for BBC's red). */
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 2px solid var(--navy);
}
.mobile-nav-head strong {
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
}
.mobile-nav-head .icon-btn {
  width: 38px;
  height: 38px;
  font-size: 24px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--navy);
}
.mobile-nav-head .icon-btn:hover { background: var(--surface-2); }
.mobile-nav-list { display: block; padding: 4px 0 28px; }
.mobile-nav-link {
  display: block;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  box-shadow: inset -3px 0 0 transparent;
  transition: background .12s, color .12s, box-shadow .12s;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: color-mix(in oklab, var(--navy) 6%, #fff);
  color: var(--navy);
  box-shadow: inset -3px 0 0 var(--navy);
}
/* Expandable section: bold label (taps navigate to the section) + a trailing
   chevron button that expands the children. The whole open row gets tinted
   and marked with a navy leading-edge bar. */
.mnav-group { border-bottom: 1px solid var(--line); }
.mnav-row {
  display: flex;
  align-items: center;
  box-shadow: inset -3px 0 0 transparent;
  transition: background .14s, box-shadow .14s;
}
.mnav-row .mnav-row__label {
  flex: 1 1 auto;
  border-bottom: 0;
  box-shadow: none;
}
.mnav-toggle {
  flex: 0 0 46px;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.mnav-toggle:hover { background: transparent; }
.mnav-toggle svg {
  width: 22px; height: 22px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .26s ease;
}
.mnav-group.open > .mnav-row {
  background: color-mix(in oklab, var(--navy) 6%, #fff);
  box-shadow: inset -3px 0 0 var(--navy);
}
.mnav-group.open .mnav-row__label { color: var(--navy); }
.mnav-group.open .mnav-toggle svg { transform: rotate(180deg); }

/* Children: clean white, indented, with a subtle navy rail on the leading
   edge so the sub-list reads as connected to its section. */
.mobile-nav-children {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height .3s ease;
}
.mnav-group.open .mobile-nav-children { max-height: 720px; }
.mobile-nav-child {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  padding-block: 11px;
  padding-inline: 34px 18px;
  box-shadow: inset -3px 0 0 var(--line-2);
  transition: color .12s, background .12s, box-shadow .12s;
}
.mobile-nav-child:hover {
  color: var(--navy);
  background: color-mix(in oklab, var(--navy) 6%, #fff);
  box-shadow: inset -3px 0 0 var(--navy);
}

/* ---------- Alert band ---------- */
/* Small rounded rectangles sitting inside each bar, matching the خاص
   tag in the reference: compact, inset, rounded. */
.ticker .label,
.special-report__badge {
  height: 24px;
  margin-inline: 10px 8px;
  padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex-shrink: 0;
  font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em;
  white-space: nowrap;
  border-radius: 8px;
}
/* Both dots pulse on the same 1.2s cycle, and the band renders them in one
   pass, so they stay in phase with each other. Each label sets the expanding
   ring's colour through --ring/--ring-0. Plain rgba() pairs, not color-mix():
   a color-mix() in a keyframe makes the box-shadow non-interpolatable, and
   the ring snaps open instead of expanding. */
.ticker .label .live-dot,
.special-report__badge .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  animation: alertpulse 1.2s infinite;
}
@keyframes alertpulse {
  0%   { box-shadow: 0 0 0 0 var(--ring); }
  70%  { box-shadow: 0 0 0 8px var(--ring-0); }
  100% { box-shadow: 0 0 0 0 var(--ring-0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker .label .live-dot,
  .special-report__badge .live-dot { animation: none; }
}

/* ---------- Breaking ticker ---------- */
.ticker {
  background: var(--red);
  color: white;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.ticker .row {
  display: flex; align-items: center;
  height: 44px; gap: 0;
}
/* Dark cell from the breaking screenshot — not navbar navy. */
.ticker .label {
  background: #111428;
  color: #fff;
}
/* Breaking's live-dot: red hole on the navy cell, white pulse ring. */
.ticker .label .live-dot {
  background: var(--red);
  --ring: rgba(255,255,255,.8);
  --ring-0: rgba(255,255,255,0);
}
.ticker .track {
  flex: 1; overflow: hidden; position: relative;
  height: 100%;
  display: flex; align-items: center;
}
/* One-at-a-time rotator: headlines are stacked and swapped by ALSSAA_ROTATE. */
.ticker .ticker-rotator {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.ticker .ticker-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-inline: 8px 16px;
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(115%);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.ticker .ticker-item.is-active  { opacity: 1; transform: translateY(0);      pointer-events: auto; }
.ticker .ticker-item.is-leaving { opacity: 0; transform: translateY(-115%); }
.ticker .ticker-item > a,
.ticker .ticker-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.ticker .ticker-item > a.ticker-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ticker .ticker-item { transition: opacity .4s ease; transform: none; }
  .ticker .ticker-item.is-leaving { transform: none; }
}

/* ملف خاص — navy bar, white inset rectangle */
.special-report {
  background: var(--theme-v1);   /* match the root navbar navy */
  color: #fff;
  overflow: hidden;
  /* Matches `.ticker .row` above so the bar stacked over it and this one
     read as one strip. Explicit because the rotator's titles are all
     absolutely positioned, leaving only the badge to drive height. */
  height: 44px;
}
.special-report__inner {
  height: 100%;
  display: flex;
  align-items: center;
}
.special-report__badge {
  background: #fff;
  color: var(--theme-v1);
}
.special-report__badge .live-dot {
  background: var(--theme-v1);
  --ring: rgba(9,23,103,.8);    /* var(--theme-v1) at 80% */
  --ring-0: rgba(9,23,103,0);
}
/* One-at-a-time rotator: reports are stacked and swapped by ALSSAA_ROTATE. */
.special-report__rotator {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}
.special-report__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Matches `.ticker .ticker-item` above. */
  padding-inline: 8px 16px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(115%);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.special-report__title.is-active  { opacity: 1; transform: translateY(0);      pointer-events: auto; }
.special-report__title.is-leaving { opacity: 0; transform: translateY(-115%); }
.special-report__title-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.special-report__title:hover .special-report__title-txt { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .special-report__title { transition: opacity .4s ease; transform: none; }
  .special-report__title.is-leaving { transform: none; }
}
@media (max-width: 768px) {
  /* Mirrors the mobile ticker metrics further down this file, so the two
     stacked bars keep reading as one consistent strip. */
  .special-report { height: 38px; }
  .special-report__title { padding-inline: 6px 12px; font-size: 12.5px; }
}

/* ============================================================
   Alert band — breaking ticker stacked above the special report,
   two full-width bars reading as one strip. Each bar carries its
   own height (they no longer equalize via `align-items: stretch`
   the way they did side-by-side), and either one can be absent.
   ============================================================ */
.alert-band { display: flex; flex-direction: column; }
.alert-band .ticker,
.alert-band .special-report { flex: 0 0 auto; min-width: 0; }

/* ---------- Footer ---------- */
.footer {
  background: #0c1030;
  color: rgba(255,255,255,.72);
  margin-top: 60px;
  padding: 60px 0 28px;
}
.footer .grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
}
.footer h4 {
  color: white; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; margin: 0 0 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul a { font-size: 14px; color: rgba(255,255,255,.7); }
.footer ul a:hover { color: white; }
.footer .brand-col .logo {
  width: 150px; height: 54px; margin-bottom: 14px;
}
.footer .brand-col .logo .st0 { fill: white; }
.footer .brand-col p { font-size: 14px; line-height: 1.7; max-width: 280px; }
.footer .social {
  display: flex; gap: 10px; margin-top: 20px;
}
.footer .social a {
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
}
.footer .social a:hover { background: var(--primary); }
/* Wrapper around the two utility columns — transparent to the desktop grid so
   they remain direct columns; the phone layout re-uses it as a single run. */
.footer .f-util { display: contents; }
.footer .bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between;
  align-items: center; font-size: 13px;
  color: rgba(255,255,255,.55);
}

/* ---------- Article cards (shared) ---------- */
.card { display: flex; flex-direction: column; }
.card > a:first-child { display: block; }
.card .thumb {
  width: 100%;
  aspect-ratio: 16/10; border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 14px;
}
.card .thumb.ph { min-height: 100%; height: auto; }
.card .thumb.sq  { aspect-ratio: 1/1; }
.card .thumb.wide { aspect-ratio: 16/9; }
.card .thumb.tall { aspect-ratio: 3/4; }
.card .cat {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}
.card h3 {
  font-family: var(--f-display);
  font-size: calc(19px * var(--density));
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card h3 a:hover { color: var(--primary); }
.card p.dek {
  font-size: calc(14.5px * var(--density));
  color: var(--excerpt);
  line-height: 1.65;
  margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Pin ago/source line to the card footer so a short title doesn't leave meta floating high */
.card .meta { margin-top: auto; padding-top: 8px; }
.card .byline {
  font-size: 12.5px; color: var(--muted-2);
  display: flex; gap: 8px; align-items: center;
}
.card .byline .sep-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .4; }

.card.horiz {
  flex-direction: row; gap: 14px;
}
.card.horiz .thumb {
  width: 130px; flex-shrink: 0; margin: 0;
  aspect-ratio: 1/1; border-radius: var(--r-sm);
}
.card.horiz h3 { font-size: calc(16px * var(--density)); }
.card.horiz .body { flex: 1; min-width: 0; }

.card.small h3 { font-size: calc(16px * var(--density)); }

.card.big h3 {
  font-size: calc(26px * var(--density));
  line-height: 1.25;
}

/* Section heading */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 40px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.section-head::after {
  content: ""; position: absolute;
  inset-inline-start: 0; bottom: -1px;
  width: 80px; height: 3px;
  background: var(--primary);
}
.section-head h2 {
  font-family: var(--f-display);
  font-size: 22px; font-weight: 700;
  margin: 0; color: var(--ink);
  display: inline-flex; align-items: center; gap: 12px;
}
.section-head h2 .icon {
  width: 22px; height: 22px; color: var(--primary);
}
.section-head .more {
  font-size: 13px; font-weight: 600;
  color: var(--primary);
  display: inline-flex; align-items: center; gap: 4px;
}
.section-head .more:hover { text-decoration: underline; }

/* ---------- Newsletter CTA block ---------- */
.newsletter {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
  color: white;
  border-radius: var(--r-lg);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  margin: 60px 0 0;
}
.newsletter::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(400px 240px at 90% 10%, rgba(255,255,255,.08), transparent),
    radial-gradient(300px 200px at 10% 110%, rgba(255,255,255,.06), transparent);
  pointer-events: none;
}
/* Brand watermark in the empty space on the left of the CTA card — the
   same white "foil" gradient fill as the most-read band's .wm-foil (no
   orange tint: on navy it muddied to brown), scaled up, with a soft dark
   shadow so the mark lifts off the card. */
.newsletter__mark {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.35));
}
.newsletter__mark path { fill: url(#nlFoilGrad); }
/* Single-column mobile puts the copy right where the mark sits, so tuck it
   into the bottom corner and dim it there. */
@media (max-width: 900px) {
  .newsletter__mark {
    top: auto; bottom: -46px; left: -34px;
    width: 180px; height: 180px;
    transform: none;
    opacity: .5;
  }
}
.newsletter .inner {
  position: relative;
  z-index: 1;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 40px; align-items: center;
}
.newsletter h3 {
  font-family: var(--f-display);
  font-size: 28px; line-height: 1.3; margin: 0 0 10px;
}
.newsletter p { margin: 0 0 18px; opacity: .85; font-size: 15px; line-height: 1.7; }
.newsletter .form {
  display: flex; gap: 8px;
  background: rgba(255,255,255,.08);
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.newsletter input {
  flex: 1; background: transparent; border: 0; color: white;
  padding: 10px 16px; font: inherit; outline: none;
  font-size: 14px;
}
.newsletter input::placeholder { color: rgba(255,255,255,.55); }
.newsletter button {
  background: #fff;
  color: var(--navy);
  border: 0; padding: 10px 22px;
  border-radius: 999px; font-weight: 700;
  cursor: pointer; transition: transform .15s;
  font-size: 14px;
}
.newsletter button:hover { transform: translateY(-1px); }
.newsletter .disclaimer { font-size: 12px; opacity: .6; margin-top: 10px; }

.newsletter .side {
  display: grid; gap: 12px;
}
.newsletter .side .bullet {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px;
}
.newsletter .side .bullet .n {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--orange-soft);
}

/* Tag chips */
.chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500;
  border: 1px solid transparent;
}
.chip:hover { background: white; border-color: var(--line); color: var(--primary); }

/* Sidebar trend list */
.trend-list { display: grid; gap: 0; }
.trend-list .item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center;
}
.trend-list .item:last-child { border-bottom: 0; }
.trend-list .n {
  font-family: var(--f-num);
  font-size: 28px; font-weight: 800;
  color: var(--line-2);
  line-height: 1;
}
.trend-list .item.top-3 .n { color: var(--primary); }
.trend-list h4 {
  margin: 0; font-size: 14.5px; line-height: 1.45;
  font-weight: 600;
}
.trend-list .meta-sm { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Tweaks panel */
.tweaks-panel {
  position: fixed; inset-inline-end: 20px; bottom: 20px;
  width: 300px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 48px rgba(17,20,40,.18);
  padding: 18px;
  z-index: 100;
  display: none;
  font-size: 14px;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h4 {
  margin: 0 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary);
  display: flex; align-items: center; justify-content: space-between;
}
.tweaks-panel h4 .close {
  border: 0; background: transparent; font-size: 18px;
  cursor: pointer; color: var(--muted); line-height: 1;
}
.tweaks-panel .group { margin-bottom: 14px; }
.tweaks-panel .group > label {
  font-size: 12px; color: var(--muted);
  display: block; margin-bottom: 6px;
}
.tweaks-panel .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.tweaks-panel .opt {
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: white;
  cursor: pointer; font-size: 12.5px;
  transition: all .15s;
}
.tweaks-panel .opt:hover { border-color: var(--line-2); }
.tweaks-panel .opt.active {
  background: var(--primary); color: white;
  border-color: var(--primary);
}
.tweaks-panel .swatches { display: flex; gap: 8px; }
.tweaks-panel .sw {
  width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer;
  outline: 1px solid var(--line); outline-offset: -1px;
}
.tweaks-panel .sw.active { border-color: var(--ink); }

/* Responsive adjustments */
@media (max-width: 960px) {
  .header .brand-row { grid-template-columns: 1fr auto 1fr; }
  .header .search-trigger { min-width: 0; width: 40px; padding: 10px; }
  .header .search-trigger span { display: none; }
  .footer .grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .topbar .row {
    height: auto;
    min-height: 38px;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    font-size: 11.5px;
  }
  .topbar .date { white-space: nowrap; }
  /* Mobile keeps only the dollar/dinar rate beside the date; gold + the
     separator are dropped so the slim bar stays on one line. The desktop
     .markets left-shift is reset here so it does not push the row off-center. */
  .topbar .sep,
  .markets .m:last-child {
    display: none;
  }
  .markets { gap: 0; margin-left: 0; }
  .markets .m { white-space: nowrap; font-size: 11.5px; }
  /* Shorten the dollar label to just the currency name on mobile to save width;
     desktop keeps the full "(بغداد)" label from chrome.js. */
  .markets .m:first-child .lbl { display: none; }
  .markets .m:first-child::before {
    content: "الدولار/دينار";
    color: rgba(255,255,255,.6);
  }
  .header { position: sticky; }
  .header .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    min-width: 0;
    position: relative;
  }
  /* Centered logo with the hamburger pinned to the RTL start (right) and search
     to the end (left). The subscribe actions cell is hidden on mobile; the
     remaining menu+search cell spans the full width so space-between pushes the
     two icons to opposite edges, and the logo is absolutely centered on top. */
  .header .brand-row > .actions:last-child { display: none; }
  .header .brand-row > .actions:first-child {
    order: 0;
    width: 100%;
    gap: 6px;
    flex-direction: row;
    justify-content: space-between;
  }
  .header .brand {
    order: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
  }
  .header .actions { justify-content: flex-start; }
  .header .weather {
    width: 44px;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
  }
  .header .weather span:not(.t) { display: none; }
  .header .brand {
    min-width: 0;
    gap: 0;
  }
  .header .brand .logo {
    width: 118px;
    height: 44px;
  }
  .header .brand .tagline,
  .header .btn-subscribe,
  .header .icon-btn:not(.tweak-trigger):not(.mobile-menu-trigger) {
    display: none;
  }
  .header .search-trigger {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }
  .header .mobile-menu-trigger {
    display: inline-flex;
    background: transparent;
    border: none;
    color: #fff;
  }
  .header .mobile-menu-trigger:hover { background: rgba(255,255,255,.12); }
  /* Explicit size: the menu SVG has a viewBox but no intrinsic width/height,
     which iOS Safari collapses to 0×0 (invisible) while Chrome falls back to a
     default size. Sizing it here makes the hamburger show on every device. */
  .header .mobile-menu-trigger svg { width: 24px; height: 24px; display: block; }
  /* Mobile navigation lives entirely in the hamburger drawer (BBC-style), so
     the horizontal category strip is dropped here. */
  .nav {
    display: none;
  }
  .ticker .row {
    height: 38px;
    min-width: 0;
  }
  .ticker .label,
  .special-report__badge {
    height: 20px;
    margin-inline: 8px 6px;
    padding: 0 9px;
    font-size: 11.5px;
    gap: 6px;
    border-radius: 7px;
  }
  .ticker .ticker-item {
    padding-inline: 6px 12px;
    font-size: 12.5px;
  }
  .footer {
    margin-top: 34px;
  }
  .footer .brand-col {
    max-width: none;
  }
  .footer .bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .card {
    min-width: 0;
  }
  .card.horiz {
    gap: 12px;
  }
  .card.horiz .thumb {
    width: 96px;
  }
  .tweaks-panel {
    inset-inline: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
}

/* ---------- Footer — phone layout ----------
   The desktop footer is five stacked link columns; on a phone that collapsed
   into ~19 full-width rows and ran past a whole screen height. Here the same
   links are re-grouped so they occupy an off-vertical axis instead:
   sections/network become wrapping chips, and the two utility columns
   (روابط + تابعنا) merge into one dot-separated inline run under a hairline.
   No links are dropped — only their arrangement changes. */
@media (max-width: 700px) {
  .footer {
    margin-top: 28px;
    padding: 26px 0 18px;
  }
  .footer .grid {
    display: block;
  }

  /* Brand: smaller lockup, tagline trimmed to a readable measure */
  .footer .brand-col .logo {
    width: 112px;
    height: 40px;
    margin-bottom: 10px;
  }
  .footer .brand-col p {
    font-size: 12.5px;
    line-height: 1.65;
    max-width: 32ch;
    margin: 0;
  }
  .footer .social {
    margin-top: 16px;
    gap: 8px;
  }
  .footer .social a {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .footer .f-col {
    margin-top: 22px;
  }
  .footer h4 {
    font-size: 12px;
    margin-bottom: 10px;
  }

  /* Sections + network: wrapping chip rows instead of one link per line */
  .footer .f-col--sections ul,
  .footer .f-col--network ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer .f-col--sections ul a,
  .footer .f-col--network ul a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1;
  }
  .footer .f-col--sections ul a:active,
  .footer .f-col--network ul a:active {
    background: rgba(255, 255, 255, .14);
  }

  /* Utility links: both columns flattened (display:contents on the columns and
     their lists) into one wrapping run under a hairline, so the ten links pack
     tightly instead of leaving orphans at the end of each list. The two column
     headings are redundant once the lists merge. */
  .footer .f-util {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .footer .f-util .f-col,
  .footer .f-util ul {
    display: contents;
  }
  .footer .f-util h4 {
    display: none;
  }
  .footer .f-util li {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
  .footer .f-util a {
    font-size: 13px;
  }

  .footer .bottom {
    margin-top: 20px;
    padding-top: 16px;
    font-size: 12px;
  }
}

/* ---------- Dark chrome theme (inner + legacy-converted pages) ----------
   Gives every non-home page the same navy header as the root route.
   Applied to <body> by the chrome partials (alssaa-chrome / layouts.header).
   Mirrors the .home-main header theming so the navbar is identical sitewide.
   .new-home-v3 keeps its own theming, unaffected. */
.chrome-dark .topbar,
.chrome-dark .header {
  background: var(--theme-v1);
}
.chrome-dark .header {
  border-bottom: 0;
}
.chrome-dark .header .brand .logo .st0 {
  fill: #fff;
}
.chrome-dark .header .brand-row {
  padding: 14px 0;
}
.chrome-dark .header .search-trigger {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
}
.chrome-dark .header .search-trigger:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .25);
}
.chrome-dark .header .search-trigger svg {
  opacity: .85;
}
.chrome-dark .header .btn-subscribe {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .5);
  color: #fff;
}
.chrome-dark .header .btn-subscribe:hover {
  background: rgba(255, 255, 255, .1);
}
.chrome-dark .header .nav {
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.chrome-dark .header .nav .nav-row {
  height: 50px;
}
.chrome-dark .header .nav a.nav-item {
  color: #1f2740;
}
.chrome-dark .header .nav a.nav-item:hover,
.chrome-dark .header .nav a.nav-item.active {
  color: var(--primary);
}

/* ==========================================================================
   Sticky chrome — collapse to a slim bar on scroll
   Desktop (>900px): masthead scrolls away, nav becomes the sticky bar with a
   mini logo + categories + search. Mobile (≤900px): the compact brand bar
   (menu + logo + search) stays; the category strip collapses away.
   Toggled by the `chrome-scrolled` body class (set in chrome.js once the
   sticky header pins to the top).
   ========================================================================== */

/* The chrome mounts into #chrome, a short wrapper. Without this the sticky
   header's containing block is that short box, so it unsticks after ~180px.
   display:contents drops the wrapper's box so the header sticks against the
   full-height body instead — making it pin across the whole page. Applied
   sitewide (every page shares this same #chrome mount) except the frozen
   /v2 and /v3 demo routes, marked `.rd-demo-home`. */
body:not(.rd-demo-home) #chrome { display: contents; }

/* body's `overflow-x: hidden` (tokens.css) forces overflow-y to auto, turning
   the body into a scroll container that breaks position:sticky. `overflow-x:
   clip` tames horizontal overflow the same way WITHOUT creating a scroll
   container, so the sticky header can pin against the viewport. */
body:not(.rd-demo-home) { overflow-x: clip; }

/* Mini logo + search live inside the nav; hidden until the desktop slim bar. */
.header .nav .nav-brand-mini { display: none; align-items: center; height: 100%; margin-inline-end: 10px; }
.header .nav .nav-brand-mini .logo { display: block; height: 30px; width: auto; }
.header .nav .nav-brand-mini .logo svg { display: block; height: 100%; width: auto; }
.header .nav .nav-brand-mini .logo .st0 { fill: var(--primary); }
.header .nav .nav-search-mini {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; padding: 0; margin-inline-start: auto;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--primary); cursor: pointer;
}
.header .nav .nav-search-mini:hover { background: rgba(34, 41, 99, .08); }
.header .nav .nav-search-mini svg { width: 20px; height: 20px; }

/* ---- Desktop slim bar ---- */
@media (min-width: 901px) {
  /* Every page (root route + all inner pages): instead of collapsing the
     masthead (which reflows the page as it shrinks), pin the header 92px
     high — exactly the brand-row's height — so the navy masthead simply
     slides up out of view and the category bar lands flush at top:0. The
     header keeps its full height in normal flow, so nothing below it ever
     jumps: no reshape, no scroll jank. The pinned category bar then recolors
     to navy (below) to match the mobile sticky bar. Excludes the frozen /v2
     and /v3 demo routes (`.rd-demo-home`), which keep their own behavior. */
  body:not(.rd-demo-home) .header { top: -92px; }

  /* /v2 and /v3 demo routes only: original collapse-the-masthead behavior. */
  .rd-demo-home .header .brand-row {
    overflow: hidden;
    max-height: 200px;
    transition: max-height .28s ease, opacity .2s ease, padding .28s ease;
  }
  .chrome-scrolled.rd-demo-home .header .brand-row {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Mini logo + search reveal once the category bar is pinned (all routes). */
  .chrome-scrolled .header .nav .nav-brand-mini { display: inline-flex; }
  .chrome-scrolled .header .nav .nav-search-mini { display: inline-flex; }

  /* Every non-demo page: recolor the pinned category bar navy to match the
     mobile sticky bar. */
  body:not(.rd-demo-home) .header .nav { transition: background .25s ease, border-color .25s ease; }
  body:not(.rd-demo-home).chrome-scrolled .header .nav {
    background: var(--theme-v1);
    border-bottom-color: rgba(255, 255, 255, .12);
  }
  body:not(.rd-demo-home).chrome-scrolled .header .nav a.nav-item { color: rgba(255, 255, 255, .86); }
  body:not(.rd-demo-home).chrome-scrolled .header .nav a.nav-item:hover,
  body:not(.rd-demo-home).chrome-scrolled .header .nav a.nav-item.active { color: #fff; }
  body:not(.rd-demo-home).chrome-scrolled .header .nav a.nav-item.active { border-bottom-color: #fff; }
  body:not(.rd-demo-home).chrome-scrolled .header .nav .nav-brand-mini .logo .st0 { fill: #fff; }
  body:not(.rd-demo-home).chrome-scrolled .header .nav .nav-search-mini { color: #fff; }
  body:not(.rd-demo-home).chrome-scrolled .header .nav .nav-search-mini:hover { background: rgba(255, 255, 255, .12); }
}

/* Mobile has no category strip (navigation is in the hamburger drawer), so the
   compact brand bar simply stays sticky at the top on scroll — nothing to
   collapse here. */

/* ==========================================================================
   Search overlay (.asrch)
   --------------------------------------------------------------------------
   Opened by every .search-trigger (masthead pill, pinned-nav icon, mobile
   icon) and by ⌘K / "/". Desktop drops a sheet under the masthead; mobile
   takes the whole screen so the on-screen keyboard has room. Markup is
   rendered by chrome.js (renderSearchOverlay).
   ========================================================================== */
.asrch {
  position: fixed; inset: 0; z-index: 140;   /* above the nav drawer (120) */
  opacity: 0;
  transition: opacity .2s ease;
}
.asrch[hidden] { display: none; }
.asrch.is-open { opacity: 1; }

.asrch__backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 13, 32, .58);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.asrch__sheet {
  position: relative;
  width: min(720px, calc(100% - 32px));
  margin: 84px auto 0;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(9, 13, 32, .32), 0 2px 6px rgba(9, 13, 32, .12);
  overflow: hidden;
  transform: translateY(-14px);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.asrch.is-open .asrch__sheet { transform: translateY(0); }

.asrch__head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

/* the field itself — a pill that echoes the masthead trigger it grew out of */
.asrch__bar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding-inline: 16px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.asrch__bar:focus-within {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.asrch__bar-icon { display: flex; flex: none; color: var(--muted); }
.asrch__bar-icon svg { display: block; width: 18px; height: 18px; }

.asrch__input {
  flex: 1; min-width: 0;
  padding: 11px 0;
  background: none; border: 0; outline: none;
  font-family: var(--f-body);
  font-size: 16px;   /* 16px keeps iOS Safari from zooming on focus */
  font-weight: 600;
  color: var(--ink);
}
.asrch__input::placeholder { color: var(--muted-2); font-weight: 500; }
.asrch__input::-webkit-search-cancel-button { display: none; }

.asrch__clear {
  flex: none; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 999px;
  color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.asrch__clear:hover { background: var(--line); color: var(--ink); }
.asrch__clear svg { display: block; width: 15px; height: 15px; }
/* The explicit `display` above would otherwise beat the UA's [hidden] rule. */
.asrch__clear[hidden] { display: none; }

.asrch__go {
  flex: none;
  padding: 9px 22px; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--primary-ink);
  font-family: var(--f-display); font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.asrch__go:hover { background: var(--navy-700); }

.asrch__x {
  flex: none; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 10px;
  color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.asrch__x:hover { background: var(--surface-2); color: var(--ink); }
.asrch__x svg { display: block; width: 20px; height: 20px; }

.asrch__body {
  max-height: min(60vh, 470px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- suggestion rows: text first, small 16:9 thumb at the inline end,
        matching the .browse-hcard pattern used across the site ---- */
.asrch__rows { padding: 8px; }
.asrch__row {
  display: grid; grid-template-columns: 1fr 96px; gap: 12px; align-items: start;
  padding: 10px; border-radius: 10px;
  text-decoration: none;
  transition: background .12s;
}
.asrch__row:hover,
.asrch__row.is-active { background: var(--surface-2); }
.asrch__row.is-active { box-shadow: inset 0 0 0 1px var(--line-2); }
.asrch__row-thumb {
  width: 96px; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden;
  background: var(--surface-3) center / cover no-repeat;
}
.asrch__row-thumb.is-empty {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  opacity: .18;
}
.asrch__row-txt { min-width: 0; }
.asrch__row-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--f-display);
  font-size: 15px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
}
.asrch__row:hover .asrch__row-title { color: var(--primary); }
.asrch__row-meta {
  display: block; margin-top: 5px;
  font-size: 12px; color: var(--meta);
}
.asrch__row-title mark {
  background: color-mix(in srgb, var(--yellow) 42%, transparent);
  color: inherit; border-radius: 2px; padding: 0 1px;
}

/* loading placeholders — same row geometry, so the list doesn't jump */
.asrch__row--skeleton { pointer-events: none; }
.asrch__row--skeleton .asrch__row-thumb { background: var(--surface-3); }
.asrch__row--skeleton .sk {
  display: block; border-radius: 4px; background: var(--surface-3);
  animation: asrchPulse 1.2s ease-in-out infinite;
}
.asrch__row--skeleton .sk--t { height: 14px; margin-bottom: 9px; }
.asrch__row--skeleton .sk--m { height: 11px; width: 38%; }
@keyframes asrchPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .asrch, .asrch__sheet { transition: none; }
  .asrch__row--skeleton .sk { animation: none; }
}

/* ---- "see all results" footer row ----
   Sticky at the bottom of the scroll area: it's the primary action, so it can
   never be the thing that scrolled off. */
.asrch__all {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--f-display);
  font-size: 14px; font-weight: 700; color: var(--primary);
  text-decoration: none;
  transition: background .12s;
}
.asrch__all:hover,
.asrch__all.is-active { background: var(--surface-2); }
.asrch__all-arr { display: flex; }
.asrch__all-arr svg { display: block; width: 18px; height: 18px; }

/* ---- default panel: recent searches + section shortcuts ---- */
.asrch__group { padding: 15px 18px; }
.asrch__group + .asrch__group { padding-top: 4px; }
.asrch__group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 11px;
  font-family: var(--f-display);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted-2);
}
.asrch__wipe {
  background: none; border: 0; padding: 0;
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  color: var(--primary); cursor: pointer;
}
.asrch__wipe:hover { text-decoration: underline; text-underline-offset: 3px; }
.asrch__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.asrch__chip {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--f-body); font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); text-decoration: none; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.asrch__chip:hover {
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

/* ---- headline-only rows (latest news in the default panel) ---- */
.asrch__lite { display: flex; flex-direction: column; }
.asrch__lite-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 8px; margin-inline: -8px;
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: 14.5px; font-weight: 600; line-height: 1.55;
  color: var(--ink-2); text-decoration: none;
  transition: background .12s, color .12s;
}
.asrch__lite-row:hover,
.asrch__lite-row.is-active { background: var(--surface-2); color: var(--primary); }
.asrch__lite-dot {
  flex: none; width: 6px; height: 6px; margin-top: 7px;
  border-radius: 2px; transform: rotate(45deg);
  background: var(--primary); opacity: .55;
}

/* ---- notes: too-short hint, no-results ---- */
.asrch__note {
  padding: 30px 20px; text-align: center;
  font-size: 14px; color: var(--muted);
}
.asrch__note strong {
  display: block; margin-bottom: 6px;
  font-family: var(--f-display); font-size: 15.5px; color: var(--ink);
}

/* ---- mobile: full-screen sheet ---- */
@media (max-width: 900px) {
  .asrch__sheet {
    width: 100%; margin: 0;
    height: 100%; border-radius: 0;
    display: flex; flex-direction: column;
    transform: none;
  }
  .asrch__head { padding: 10px 12px; }
  /* The on-screen keyboard's own submit key does this job; dropping the button
     gives the field the full width of a phone bar. */
  .asrch__go { display: none; }
  .asrch__x { width: 38px; height: 38px; order: -1; }
  .asrch__body { flex: 1; max-height: none; }
  .asrch__row { grid-template-columns: 1fr 84px; }
  .asrch__row-thumb { width: 84px; }
  .asrch__row-title { font-size: 14.5px; }
}

/* Freeze the page behind the overlay. chrome.js pads the inline-end edge by
   the scrollbar width so removing it doesn't shift the layout. */
body.asrch-open { overflow: hidden; }

/* ==========================================================================
   Search trigger polish
   ========================================================================== */
/* Pill focus ring has to follow the pill, not the global 4px default. */
.header .search-trigger:focus-visible { outline-offset: 3px; border-radius: 999px; }
.header .nav .nav-search-mini:focus-visible { border-radius: 8px; }
.header .search-trigger svg { display: block; flex: none; }
/* Placeholder line: never let a long label wrap the pill onto two lines. */
.header .search-trigger span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: start;
}
@media (max-width: 900px) {
  /* Match the hamburger on the other edge of the compact bar: bare white icon,
     no pill. The framed pill read as a third, competing button up there. */
  .header .search-trigger {
    background: transparent; border: 0; color: #fff;
  }
  .chrome-dark .header .search-trigger,
  .home-main .header .search-trigger {
    background: transparent; border: 0;
  }
  .header .search-trigger:hover,
  .chrome-dark .header .search-trigger:hover,
  .home-main .header .search-trigger:hover { background: rgba(255, 255, 255, .12); border: 0; }
  .header .search-trigger svg { width: 24px; height: 24px; opacity: 1; }
}