/* شهاب — موجز اليوم.

   One surface: a companion bar docked to the bottom edge. It is the surface
   that travels -- it survives navigation, so the brief keeps running while the
   reader moves through the site -- and, with no edition modal, it carries the
   whole player: the item number, the mode («صوت آلي» / «وضع القراءة»), the
   item's line as a link to its article, previous / play / next, the reading
   rate and the end button. The progress hairline rides the bar's top edge.

   LIGHT, on the theme's own paper. Colours are the theme's: #fff paper, #14233a
   ink, #1b5aa6 blue, #d5dde8 hairlines. Secondary text is tinted from the navy
   rather than greyed, so nothing goes muddy.

   The mark throughout is .sh-mark (css/mark.css) -- the ش blade traced from the
   wordmark. No decorative bullets and no separator dots: spacing and hairlines
   do that work.

   No !important anywhere: the player is injected with class names only, so it
   never competes with the theme's inline styles. */

:root{
  --bf-paper:#fff;
  --bf-ink:#14233a;
  --bf-blue:#1b5aa6;
  --bf-sky:#7ea8dd;
  --bf-mute:#5b6b82;         /* 5.6:1 on white */
  --bf-hair:#d5dde8;
  --bf-bar-h:66px;
}

/* content must never end underneath the companion bar */
html[data-bf-docked] body{padding-bottom:var(--bf-bar-h)}

[data-bf]{position:fixed;z-index:9900;inset-inline:0;bottom:0;font-family:var(--sh-font)}
[data-bf][hidden]{display:none}

/* ============================================================ COMPANION BAR */
.bf-bar{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:16px;
  height:var(--bf-bar-h);padding:0 clamp(14px,3vw,26px);
  background:var(--bf-paper);color:var(--bf-ink);
  border-top:1px solid var(--bf-hair);
  box-shadow:0 -10px 30px rgba(20,35,58,.10);
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.2,.7,.2,1);
}
[data-bf][data-on] .bf-bar{transform:none}

/* the progress hairline rides the bar's own top edge */
.bf-rail{position:absolute;top:-1px;inset-inline:0;height:1px;background:var(--bf-hair)}
.bf-rail-on{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--bf-blue)}
.bf-rail-nib{
  position:absolute;top:50%;inset-inline-start:0;width:13px;height:11px;
  margin-top:-5.5px;margin-inline-start:-6.5px;background:var(--bf-blue);
}

/* ---- identity: mark, "01 / 07", mode ---- */
.bf-id{display:flex;align-items:center;gap:11px}
.bf-id .sh-mark{width:17px;height:14px;background:var(--bf-blue)}
.bf-num{
  font-size:13px;font-weight:800;color:var(--bf-mute);
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
  direction:ltr;unicode-bidi:isolate;      /* "01 / 07" must not flip in RTL */
}
.bf-mode{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--bf-blue);white-space:nowrap}
.bf-mode i{width:5px;height:5px;background:currentColor;border-radius:50%;opacity:.4}
[data-bf][data-playing] .bf-mode i{animation:bf-breathe 2.6s ease-in-out infinite}

/* ---- the item: category · time, and its line as a link to the article ---- */
.bf-now{min-width:0}
.bf-now-cat{display:block;font-size:12px;font-weight:800;color:var(--bf-blue);margin-bottom:3px}
.bf-now-t{
  display:block;font-size:14px;font-weight:700;line-height:1.4;color:var(--bf-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;
  transition:color .18s ease;
}
@media (hover:hover){a.bf-now-t[href]:hover{color:var(--bf-blue)}}

/* ---- controls ---- */
.bf-bar-ctl{display:flex;align-items:center;gap:7px}
.bf-b{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  background:var(--bf-paper);border:1px solid var(--bf-hair);color:var(--bf-ink);
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}
@media (hover:hover){.bf-b:hover:not(:disabled){background:var(--bf-ink);border-color:var(--bf-ink);color:#fff}}
.bf-b:disabled{opacity:.38;cursor:default}
.bf-b svg{width:12px;height:12px;fill:currentColor}
.bf-b-go{width:40px;height:40px;background:var(--bf-blue);border-color:var(--bf-blue);color:#fff}
@media (hover:hover){.bf-b-go:hover:not(:disabled){background:var(--bf-ink);border-color:var(--bf-ink)}}
.bf-b-go svg{width:14px;height:14px}
.bf-b-end{margin-inline-start:6px}
.bf-rate{
  height:36px;min-width:44px;padding:0 10px;flex:none;
  font-family:inherit;font-size:12px;font-weight:800;
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
  background:var(--bf-paper);border:1px solid var(--bf-hair);color:var(--bf-ink);cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
@media (hover:hover){.bf-rate:hover{background:var(--bf-ink);border-color:var(--bf-ink);color:#fff}}

/* browser surfaces belong to the design too */
[data-bf] ::selection{background:var(--bf-blue);color:#fff}
[data-bf] :focus-visible{outline:2px solid var(--bf-blue);outline-offset:2px}

@keyframes bf-breathe{0%,100%{opacity:.4}50%{opacity:1}}

/* ================================================================= MOBILE */
@media (max-width:720px){
  :root{--bf-bar-h:60px}
  .bf-bar{gap:12px}
  .bf-num,.bf-mode,.bf-b-prev,.bf-rate{display:none}
  .bf-b-end{margin-inline-start:2px}
}

/* the brief still runs and still advances; only the movement stops */
@media (prefers-reduced-motion:reduce){
  .bf-bar,.bf-now-t{transition:none}
  .bf-mode i{animation:none}
}