/* group-site overrides — loaded after all theme CSS.
   1) Announcement bar follows the day/night theme (Omer, 2026-10-06):
      light = white background, dark = site dark background. Ghost paints
      the bar with a fixed dark color; we override per data-theme.
   2) Desktop main nav: keep native horizontal scrolling visible. */

/* --- announcement bar ------------------------------------------------- */

[data-theme="light"] div.gh-announcement-bar,
html:not([data-theme="dark"]) div.gh-announcement-bar {
  background: #ffffff !important;
  color: #333333 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] div.gh-announcement-bar a,
html:not([data-theme="dark"]) div.gh-announcement-bar a {
  color: #133467 !important;
}

[data-theme="dark"] div.gh-announcement-bar {
  background: #111111 !important;
  color: #cccccc !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] div.gh-announcement-bar a {
  color: #b6b7f6 !important;
}

/* --- main nav horizontal scroll (native, with affordance) ------------- */

@media only screen and (min-width: 48rem) {
  .m-nav__left {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;                       /* Firefox */
    -webkit-overflow-scrolling: touch;
  }

  .m-nav__left::-webkit-scrollbar {
    height: 4px;
  }

  .m-nav__left::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.55);
    border-radius: 2px;
  }

  .m-nav__left::-webkit-scrollbar-track {
    background: transparent;
  }

  /* subtle right-edge fade hinting there is more to scroll */
  .m-nav__left {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}

/* ============ Back to top (theme-native) ============ */
.gs-back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  height:46px;
  width:46px;
  font-size:1.05rem;
  color:var(--titles-color);
  background-color:var(--background-color);
  border:1px solid var(--primary-border-color);
  box-shadow:0 4px 14px var(--button-shadow-color-normal);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:9000;
  cursor:pointer;
}
.gs-back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.gs-back-to-top:hover{
  color:var(--primary-subtle-color);
  transform:translateY(-2px);
  box-shadow:0 6px 18px var(--button-shadow-color-hover);
}
.rtl .gs-back-to-top{right:auto;left:24px;}
@media (prefers-reduced-motion: reduce){
  .gs-back-to-top{transition:none;transform:none;}
}

/* ============ Dark-mode toggle: a permanent toolbar control ============ */
/* The switch used to exist only in the menu bar; below 48rem that bar is the
   collapsed full-screen overlay, and the theme compensated with a FLOATING
   button (fixed, bottom-right). Owner requirement: the switch belongs in the
   header toolbar at every width. partials/darkmode-toggle.hbs is therefore
   rendered in both header rows — the same duplication the search button and
   the ui-lang picker already use — and the floating state is retired. */

/* Below 48rem the menu-bar instance is inside the .m-menu overlay
   (opacity:0 / visibility:hidden) — hide it there and let the topbar
   instance carry the control. Same pattern as .m-icon-button.in-menu-main. */
@media only screen and (max-width: 47.999rem) {
  .m-toggle-darkmode:not(.in-mobile-topbar) {
    display: none;
  }
}

/* mobile-topbar instance: inline in the toolbar, same footprint as its
   neighbours (no fixed positioning, never floating over the content) */
.m-toggle-darkmode.in-mobile-topbar {
  position: relative;
  inset: auto;
  margin: 0 2px;
  height: 40px;
  width: 40px;
  z-index: auto;
  flex: none;
}

/* the visible circle shrinks inside the 40px tap target */
.m-toggle-darkmode.in-mobile-topbar > div {
  inset: 4px;
  width: auto;
  height: auto;
}

/* the site name is the only flexible item in the topbar — let it ellipsize
   instead of pushing the controls out of the toolbar on narrow phones */
.m-mobile-topbar .m-site-name.in-mobile-topbar {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-mobile-topbar .m-logo.in-mobile-topbar img {
  max-width: 100%;
}

/* ============ Home: per-category sections ============ */
.gs-home-sec{margin-top:38px;}
.gs-home-sec .l-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;}
.gs-home-sec .l-sec__title{font-size:1.28rem;font-weight:700;letter-spacing:.2px;margin:0;color:var(--titles-color);}
.gs-home-sec .l-sec__title a{color:inherit;}
.gs-home-sec .l-sec__title a:hover{color:var(--link-color);}
.gs-home-sec .l-sec__more{font-size:.85rem;color:var(--link-color);white-space:nowrap;}
.gs-home-sec .l-sec__more:hover{text-decoration:underline;}
.gs-home-sec .m-lead{margin-bottom:0;}

/* Homepage pagination: visible (sectioned home + archive both paginated) */

/* ============ Home: two-column sections, no stretch ============ */
/* .l-home is a 2-col grid; category sections pair up side-by-side.
   align-items:start keeps each cell at its natural height (no
   stretching to the taller neighbour = no white space).
   "Recent posts" (first section) stays full width with its lead. */
.l-home{align-items:start;}
.gs-home-sec:first-child{grid-column:1 / -1;}

/* ============ Pagination widget: « ‹ n/N › » ============ */
.gs-pagination{display:flex;align-items:center;justify-content:center;gap:8px;}
.gs-pg-btn{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--primary-border-color);
  color:var(--titles-color);font-size:1.05rem;line-height:1;cursor:pointer;
  background:var(--background-color);transition:all .15s ease;text-decoration:none;}
.gs-pg-btn:hover{border-color:var(--primary-subtle-color);color:var(--primary-subtle-color);}
.gs-pg-btn.is-disabled{opacity:.35;pointer-events:none;cursor:default;}
.gs-pg-info{font-size:.9rem;color:var(--titles-color);letter-spacing:.5px;
  margin:0 10px;min-width:72px;text-align:center;}
.gs-pg-info b{color:var(--primary-subtle-color);font-weight:700;}
.rtl .gs-pagination{flex-direction:row-reverse;}
.rtl .gs-pg-btn{transform:scaleX(-1);}

/* ============ UI language picker (assets/js/ui-lang.js) ============ */
/* Segmented [עב | EN] control. direction:ltr keeps the segment order stable
   in RTL documents (dir itself is never changed). .is-active is rendered
   server-side from the site locale for the no-JS case and kept in sync by
   the script. */
.gs-ui-lang{
  direction:ltr;
  display:inline-flex;
  align-items:center;
  flex:none;
  border:1px solid var(--primary-border-color);
  border-radius:999px;
  overflow:hidden;
  background:var(--background-color);
  vertical-align:middle;
}
.gs-ui-lang__btn{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:transparent;
  color:var(--titles-color);
  cursor:pointer;
  font-family:inherit;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.4px;
  line-height:1;
  min-width:32px;
  padding:6px 8px;
  text-align:center;
  opacity:.65;
  transition:background-color .15s ease,color .15s ease,opacity .15s ease;
}
.gs-ui-lang__btn+.gs-ui-lang__btn{border-left:1px solid var(--primary-border-color);}
.gs-ui-lang__btn:hover{opacity:1;}
.gs-ui-lang__btn.is-active{background:var(--primary-subtle-color);color:#fff;opacity:1;}
.gs-ui-lang__btn:focus-visible{outline:2px solid var(--primary-subtle-color);outline-offset:-2px;}
/* header instance: next to the dark-mode toggle */
@media only screen and (min-width:48rem){
  .m-nav__right .gs-ui-lang{margin-left:20px;}
}
/* compact mobile-topbar instance */
.gs-ui-lang.in-mobile-topbar{margin:0 4px;}
.gs-ui-lang.in-mobile-topbar .gs-ui-lang__btn{min-width:30px;padding:6px 6px;}
/* "More" label wrapper: neutralise the chevron span rule for the text span */
.m-nav__left li.more a span.gs-more-label{font-size:inherit;margin-left:0;transform:none;}

/* ============ Built-in Categories dropdown (partials/gs-categories.hbs) ==
   Rendered between the About item and the rest of the navigation (owner
   directive 2026-10-11). The <li> deliberately stays unpositioned so the
   no-JS fallback panel (an absolutely positioned box without explicit
   insets) has its containing block ABOVE the horizontally-scrolling
   .m-nav__left and escapes its clipping. With JS the panel switches to
   position: fixed (.gs-catjs hook, assets/js/gs-categories.js) which the
   scroll container can never clip either. */

.m-nav__left li.gs-catnav { position: static; }

.gs-catnav__dd { position: static; }

.gs-catnav__trigger {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}
.gs-catnav__trigger::-webkit-details-marker { display: none; }
.gs-catnav__trigger:hover { color: var(--primary-subtle-color); }
.gs-catnav__trigger:focus-visible { outline: 2px solid var(--primary-subtle-color); outline-offset: 2px; }
.gs-catnav__arrow { font-size: .68em; opacity: .7; }
.gs-catnav.nav-current .gs-catnav__trigger { font-weight: 600; color: var(--primary-subtle-color); }

/* selection count: small dot-style badge inside the toolbar item */
.gs-catnav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary-subtle-color);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
}
.gs-catnav__count[hidden] { display: none; }

.gs-catnav__panel {
  /* no-JS fallback: static position places this under the trigger; the
     containing block sits above the nav scroll container, so the theme's
     overflow rules cannot clip it */
  position: absolute;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--primary-border-color);
  border-radius: 12px;
  background: var(--background-color);
  box-shadow: 0 12px 30px var(--button-shadow-color-normal);
  overflow: hidden;
}
.gs-catjs .gs-catnav__panel { position: fixed; }

.gs-catnav__search { padding: 8px; }
.gs-catnav__input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--primary-border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--titles-color);
  font-family: inherit;
  font-size: .95rem;
}
.gs-catnav__input:focus-visible { outline: 2px solid var(--primary-subtle-color); outline-offset: 1px; }

.gs-catnav__list { list-style: none; margin: 0; padding: 4px 6px 8px; max-height: 320px; overflow: auto; }
.gs-catnav__row { padding: 0; }
.gs-catnav__row[hidden] { display: none !important; }
.gs-catnav__opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.gs-catnav__opt:hover { background: var(--secondary-subtle-color); }
.gs-catnav__cb { width: 16px; height: 16px; flex: none; }
.gs-catnav__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.gs-catnav__soon { font-size: .72em; opacity: .65; margin-inline-start: 8px; order: -1; }
.gs-catnav__cb:disabled { opacity: .5; }
.gs-catnav__row--all a { display: block; padding: 9px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.gs-catnav__row--all a:hover { background: var(--secondary-subtle-color); }
.gs-catnav__empty { padding: 10px 14px 14px; font-size: .85rem; opacity: .6; }
.gs-catnav__nslink { font-size: .8rem; padding-inline-start: 10px; }

/* while the Categories dropdown is open the toolbar's scroll containers must
   stop clipping it. With JS the panel is reparented to <body> and never
   clipped; this rule covers the no-JS fallback, where the panel stays inside
   the details element. (:has() is supported by every browser that runs the
   rest of this theme.) */
@media only screen and (min-width: 48rem) {
  .m-nav__left:has(.gs-catnav details[open]),
  .m-nav:has(.gs-catnav details[open]) {
    overflow: visible;
  }
}

/* Reply context inside a chat bubble (quoted-message mirror, chat_pipeline
   .gc-quote) — gp-styled counterpart of the group-chat theme block. */
.gc-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
  padding: 7px 11px;
  border-inline-start: 3px solid var(--primary-border-color);
  border-radius: 6px;
  background: var(--secondary-subtle-color);
  font-size: .86em;
}
.gc-quote__name { font-weight: 600; opacity: .85; }
.gc-quote__text {
  opacity: .8;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* --- consolidated 2026-10-17: moved from assets/css/screen.css ----------
   screen.css was never linked by any group-press template (only app.css,
   post.css, gs-overrides.css are). The wa_format card styles (e46c003)
   and the post-translation UI (docs/translation.md) silently never
   loaded. Everything that lived there now lives here. */
/* --- voice note + document cards (wa_format) ---------------------------- */
.gc-audio-card { display: flex; align-items: center; gap: 10px;
                 padding: 10px 12px; background: rgba(255,255,255,.06);
                 border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.gc-audio-card audio { width: 100%; min-width: 200px; height: 36px; }
.gc-audio-label { font-size: 1.2em; }
.gc-audio-name { font-size: .8em; opacity: .7; }
.gc-file-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
                background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
                border-radius: 10px; text-decoration: none; color: inherit; }
.gc-file-card:hover { background: rgba(255,255,255,.1); }
.gc-file-icon { font-size: 1.3em; }
.gc-file-name { word-break: break-all; }

/* --- document card viewer (document_card / wa_format; #47 → #51) ---------
   #51: the doc card carries .gc-file-card too, whose flex ROW laid head,
   viewer and download side by side (visible on group-press; the kg-card
   figure styles themselves never reflow it). The doc card now forces its
   own vertical stack — display:block + float:none, children flow as blocks
   in DOM order (head -> viewer -> actions), so the post text above the
   card keeps its place in BOTH themes. Sizing fits the window per doc
   type: office landscape 16/10 with a 480px floor (the ~90px Office
   toolbar never crops the slide out of frame), PDF portrait 1/1.35 with a
   560px floor; both width:100% and capped at 85vh. The base rule keeps a
   portrait fallback for cards published before #51. The fullscreen button
   overlays the viewer's top corner (outside the Office iframe's own
   toolbar; the handler lives inline on the button). The <object> fallback
   paragraph is rendered only by browsers that cannot embed the PDF
   (soft-fail path) and never duplicates the head's filename while the
   viewer renders. #52: attachments that share a stem (same filename minus
   extension — one deck sent as .pptx + .pdf) render ONE viewer; the other
   formats are listed as compact download rows (.gc-doc-alt) under the
   download action. */
.gc-doc-card { display: block; float: none; margin: 10px 0; }
.gc-doc-card .gc-file-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gc-doc-card .gc-file-name { font-weight: 600; word-break: break-all; }
.gc-doc-card .gc-file-size { opacity: .7; font-size: .85em; white-space: nowrap; }
.gc-doc-card .gc-doc-viewer { position: relative; width: 100%; aspect-ratio: 3 / 4; min-height: 420px; max-height: 85vh; margin: 10px 0 12px; background: #000; border-radius: 8px; overflow: hidden; }
.gc-doc-card .gc-doc-viewer.gc-doc-pdf { aspect-ratio: 1 / 1.35; min-height: 560px; }
.gc-doc-card .gc-doc-viewer.gc-doc-office { aspect-ratio: 16 / 10; min-height: 480px; }
.gc-doc-card .gc-doc-viewer object,
.gc-doc-card .gc-doc-viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; background: #000; }
.gc-doc-card .gc-doc-fallback { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: #111; color: #ddd; font-size: .9em; text-align: center; }
.gc-doc-card .gc-doc-fs { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 10; padding: 5px 12px; font-size: .8em; font-weight: 600; line-height: 1.4; color: #111 !important; background: rgba(255,255,255,.95) !important; border: 1px solid rgba(0,0,0,.35) !important; border-radius: 6px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.gc-doc-card .gc-doc-fs:hover { background: #fff !important; }
.gc-doc-card .gc-file-actions { margin: 10px 0 0; text-align: start; }
.gc-doc-card .gc-file-actions a { overflow-wrap: break-word; word-break: normal; text-decoration: underline; }
.gc-doc-missing { display: inline-flex; align-items: center; gap: 8px; opacity: .75; }
/* #52: compact download rows for the OTHER formats of the same document
   (same stem -> one viewer; the rest listed right under the download action) */
.gc-doc-card .gc-doc-alts { display: grid; gap: 4px; margin: 10px 0 0; }
.gc-doc-card .gc-doc-alt { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.06); color: inherit; text-decoration: none; }
.gc-doc-card .gc-doc-alt:hover { background: rgba(255,255,255,.12); }
.gc-doc-card .gc-doc-alt .gc-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.gc-doc-card .gc-doc-alt .gc-file-size { opacity: .7; font-size: .85em; white-space: nowrap; }

/* --- post translation (docs/translation.md; group-press 2.4.4) ------------ */
/* translate.js swaps the translated HTML into whichever container the
   response's block key resolves to (#29: .l-post-content section variant,
   .js-post-content magazine body, .gc-transcript chat transcript) and tags
   it with gc-dir-ltr|gc-dir-rtl; these mirror alignment, blockquote/quote
   bars and poll bars to the translated reading edge — for all three. */
.js-translate[hidden] { display: none !important; }  /* .m-icon-button is display:flex; the hidden attribute alone would lose */
.l-post-content.gc-dir-ltr, .js-post-content.gc-dir-ltr,
.gc-transcript.gc-dir-ltr { text-align: left; }
.l-post-content.gc-dir-rtl, .js-post-content.gc-dir-rtl,
.gc-transcript.gc-dir-rtl { text-align: right; }
.l-post-content.gc-dir-ltr .gc-msg, .js-post-content.gc-dir-ltr .gc-msg,
.gc-transcript.gc-dir-ltr .gc-msg { direction: ltr; text-align: left; }
.l-post-content.gc-dir-rtl .gc-msg, .js-post-content.gc-dir-rtl .gc-msg,
.gc-transcript.gc-dir-rtl .gc-msg { direction: rtl; text-align: right; }
.l-post-content.gc-dir-ltr blockquote, .js-post-content.gc-dir-ltr blockquote,
.gc-transcript.gc-dir-ltr blockquote { border-left: 3px solid var(--primary-border-color);
                                        border-right: none; }
.l-post-content.gc-dir-rtl blockquote, .js-post-content.gc-dir-rtl blockquote,
.gc-transcript.gc-dir-rtl blockquote { border-right: 3px solid var(--primary-border-color);
                                         border-left: none; }
.l-post-content.gc-dir-ltr .gc-quote, .js-post-content.gc-dir-ltr .gc-quote,
.gc-transcript.gc-dir-ltr .gc-quote { border-left: 3px solid rgba(128,128,128,.35);
                                      border-right: none; }
.l-post-content.gc-dir-rtl .gc-quote, .js-post-content.gc-dir-rtl .gc-quote,
.gc-transcript.gc-dir-rtl .gc-quote { border-right: 3px solid rgba(128,128,128,.35);
                                      border-left: none; }
.l-post-content.gc-dir-ltr .gc-poll-bar, .js-post-content.gc-dir-ltr .gc-poll-bar,
.gc-transcript.gc-dir-ltr .gc-poll-bar { direction: ltr; }
.l-post-content.gc-dir-rtl .gc-poll-bar, .js-post-content.gc-dir-rtl .gc-poll-bar,
.gc-transcript.gc-dir-rtl .gc-poll-bar { direction: rtl; }
/* caption injected under images whose text the vision pass translated */
figcaption.gc-tr-imgcap { display: block; padding: 5px 10px 7px; font-size: .78rem;
                          font-style: italic; color: var(--titles-color); opacity: .85; }
/* "show original" pill (translate.js inserts it after the article body) */
.gs-tr-pill { display: inline-flex; margin: 0 0 18px; padding: 7px 15px;
              border: 1px solid var(--primary-border-color); border-radius: 999px;
              background: var(--background-color); color: var(--titles-color);
              font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.gs-tr-pill[hidden] { display: none; }
/* error toast */
.gs-tr-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
               z-index: 9600; max-width: min(92vw, 480px); padding: 10px 18px;
               border-radius: 999px; background: var(--titles-color);
               color: var(--background-color); font-size: .88rem;
               box-shadow: 0 10px 30px rgba(0,0,0,.3); }
/* in-progress status pill: same spot/palette as the toast but persistent —
   translate.js raises it on choose() and takes it down on every terminal
   path (success, failure toast, poll cap). No auto-dismiss. */
.gs-tr-busy { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
              z-index: 9600; display: inline-flex; align-items: center; gap: 9px;
              max-width: min(92vw, 480px); padding: 10px 18px; border-radius: 999px;
              background: var(--titles-color); color: var(--background-color);
              font-size: .88rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.gs-tr-spin { width: 12px; height: 12px; flex: none; border-radius: 50%;
              border: 2px solid var(--background-color); border-top-color: transparent;
              opacity: .9; }
/* the translate button while a job runs: progress cursor + spinning icon
   (a first-hit translation polls for minutes with no other page change) */
.js-translate[aria-busy="true"] { cursor: progress; }
@keyframes gs-tr-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .js-translate[aria-busy="true"] .m-share__icon {
    animation: gs-tr-rot 1s linear infinite;
  }
  .gs-tr-spin { animation: gs-tr-rot 1s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .js-translate[aria-busy="true"] .m-share__icon { opacity: .45; }
  .gs-tr-spin { animation: none; opacity: .45; }
}
/* language picker modal — the gs-sharemail pattern */
.gs-tr-overlay { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center;
                 justify-content: center; padding: 20px; background: rgba(0,0,0,.55); }
.gs-tr-overlay[hidden] { display: none; }
.gs-tr { width: min(92vw, 420px); max-height: 80vh; display: flex; flex-direction: column;
         padding: 20px 22px; border-radius: 12px; background: var(--background-color);
         color: var(--titles-color); border: 1px solid var(--primary-border-color);
         box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.gs-tr__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; text-align: start; }
.gs-tr__list { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.gs-tr__item + .gs-tr__item { border-top: 1px solid var(--secondary-border-color); }
.gs-tr__opt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
              width: 100%; padding: 9px 6px; border: 0; background: none; color: inherit;
              font: inherit; font-size: .95rem; text-align: start; cursor: pointer; }
.gs-tr__opt:hover { background: var(--secondary-subtle-color); }
.gs-tr__native { font-weight: 600; }
.gs-tr__name { font-size: .8rem; opacity: .7; }
.gs-tr__actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.gs-tr__btn { padding: 8px 16px; border: 1px solid currentColor; border-radius: 8px;
              background: transparent; color: inherit; font: inherit; font-size: .9rem;
              cursor: pointer; }

/* --- daily summaries page (pipeline pages.py; #53) -----------------------
   The /summaries/ page ships its own inline light styles (like every
   pipeline-published page). Light mode: nothing to do beyond the shared
   look. Dark mode: the chip/card neutrals flip using the same palette as
   the announcement-bar dark rules above. */
[data-theme="dark"] .gs-sum-card { background: #161617 !important; border-color: #333338 !important; }
[data-theme="dark"] .gs-sum-chip { background: #1e1e20 !important; border-color: #3a3a40 !important; color: #cccccc !important; }
[data-theme="dark"] .gs-sum-empty { color: #9a9a9f !important; }
[data-theme="dark"] .gs-sum-card__link:hover { border-color: #6ea8fe !important; }
[data-theme="dark"] .gs-sum-card__link:hover .gs-sum-date { color: #6ea8fe !important; }
[data-theme="dark"] .gs-sum-card__link:focus-visible { outline-color: #6ea8fe !important; }
/* YouTube inline embeds (#45) — sports.nesher.co fleet pattern, copied from
   the live reader CSS: full-width responsive 16:9, no border, rounded, black
   letterbox background. */
figure.r-video { margin: 1.5em 0; }
figure.r-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
  border-radius: 10px;
  background: #000;
}


/* --- events page (pipeline pages.py; #60) --------------------------------
   The /events/ index ships its own inline light styles (like every
   pipeline-published page). Dark mode: the card/chip neutrals flip using
   the same palette as the summaries/announcement rules above. */
[data-theme="dark"] .gs-ev-card { background: #161617 !important; border-color: #333338 !important; }
[data-theme="dark"] .gs-ev-title { color: #7fb6f0 !important; }
[data-theme="dark"] .gs-ev-where { color: #9a9a9f !important; }
[data-theme="dark"] .gs-ev-status { background: #1e1e20 !important; border-color: #3a3a40 !important; color: #cccccc !important; }
[data-theme="dark"] .gs-ev-past-head { border-color: #333338 !important; color: #9a9a9f !important; }
[data-theme="dark"] .gs-ev-empty { color: #9a9a9f !important; }