/* /assets/css/worldnews.css */

/* ================================
   Full-bleed layout (no side padding)
================================ */
.worldnews{
  max-width: none;
  margin: 0;
  padding: 0px 10px;

  margin-left: -20px;
  margin-right: -20px;

  /* ★ map/left panel shared height */
  --worldnews-map-h: 420px;
}

@media (max-width: 480px){
  .worldnews{
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media (min-width: 481px) and (max-width: 600px){
  .worldnews{
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* map height on smaller layout */
@media (max-width: 980px){
  .worldnews{
    --worldnews-map-h: 360px;
  }
}

/* ================================
   Box sizing fix
================================ */
.worldnews,
.worldnews *{
  box-sizing: border-box;
}

.worldnews__toprow{
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: 4px;

  /* ★ ensure equal-height columns */
  align-items: stretch;

  padding: 0 0;
}

@media (max-width: 980px){
  .worldnews__toprow{
    grid-template-columns: 1fr;
  }
}

.worldnews__left,
.worldnews__right{
  padding: 0 16px;
}

@media (max-width: 980px){
  .worldnews__left,
  .worldnews__right{
    padding: 0 14px;
  }
}

/* ================================
   Equalize MIN height (NO inner scroll)
   - left panel must NOT scroll
   - left min-height == map height
================================ */
@media (min-width: 981px){
  .worldnews__toprow{
    align-items: start;
  }

  .worldnews__left{
    min-height: var(--worldnews-map-h);
    /* スクロール禁止 */
    overflow: visible;
    display: block;
  }

  .worldnews__leftbody{
    overflow: visible;
  }

  .worldnews__right{
    overflow: visible;
  }
}

.worldnews__title{
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 6px 0 12px;
  color: #1F2937;
}

/* lede: smaller + tighter */
.worldnews__lede{
  margin: -6px 0 8px;
  color: rgba(55,65,81,0.82);
  font-weight: 650;
  max-width: 62ch;

  font-size: 14px;
  line-height: 1.45;
}

.worldnews__filters{
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* tighter spacing between filter blocks */
.worldnews__filter{
  display: block;
  margin-bottom: 10px;
}

/* tighter label spacing */
.worldnews__filterlabel{
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  margin-right: 6px;
  color: rgba(31,41,55,0.92);
}

.worldnews__input{
  width: 100%;
  padding: 10px 12px; /* tighter */
  border-radius: 14px;
  border: 2px solid rgba(17,24,39,0.18);
  outline: none;
  background: #fff;
  color: #111827;
  font-size: 16px;
}

.worldnews__input:focus{
  border-color: rgba(14,165,233,0.55);
  box-shadow: 0 0 0 4px rgba(14,165,233,0.12);
}

/* ================================
   Themes (icon toggle buttons)
================================ */
.worldnews__themeswrap{
  margin-bottom: 10px;
}

.worldnews__themebuttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* base */
.worldnews__themebtn{
  appearance: none;
  border: 1px solid rgba(17,24,39,0.14);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 46px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;

  background: #fff;
  color: rgba(31,41,55,0.92);
  cursor: pointer;

  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  user-select: none;

  position: relative;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease,
    filter 0.12s ease;
}

.worldnews__themebtn:hover{
  background: rgba(17,24,39,0.03);
}

.worldnews__themebtn:active{
  transform: translateY(1px);
}

/* OFF state (explicit) */
.worldnews__themebtn.is-off{
  opacity: 0.45;
  background: rgba(255,255,255,0.55);
  border-color: rgba(17,24,39,0.10);
  box-shadow: none;
  filter: grayscale(25%);
}

/* OFF mark: subtle diagonal slash */
.worldnews__themebtn.is-off::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 44%,
      rgba(17,24,39,0.18) 44%,
      rgba(17,24,39,0.18) 56%,
      transparent 56%,
      transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* Hover should still feel clickable even when OFF */
.worldnews__themebtn.is-off:hover{
  opacity: 0.62;
  background: rgba(17,24,39,0.03);
  filter: none;
}

/* ON state (only when NOT off) */
.worldnews__themebtn.is-active:not(.is-off){
  border-color: rgba(14,165,233,0.70);
  background: rgba(14,165,233,0.10);
  box-shadow:
    0 0 0 4px rgba(14,165,233,0.16),
    0 2px 0 rgba(0,0,0,0.04);
  opacity: 1;
  filter: none;
}

/* ON badge (top-right dot) */
.worldnews__themebtn.is-active:not(.is-off)::after{
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(14,165,233,0.95);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.95);
}

/* Keyboard focus */
.worldnews__themebtn:focus{
  outline: none;
}

.worldnews__themebtn:focus-visible{
  box-shadow: 0 0 0 4px rgba(14,165,233,0.22);
}

/* themes hint: tighter */
.worldnews__themehint{
  margin-top: 6px;
  color: rgba(55,65,81,0.75);
  font-weight: 650;
  font-size: 12px;
  line-height: 1.35;
}

/* ================================
   Curated ranking (label left, buttons right)
================================ */
.worldnews__presetwrap{
  margin-top: -4px;
  margin-bottom: 12px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.worldnews__presetbuttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  justify-content: flex-start;
  margin-left: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.worldnews__presetbtn{
  appearance: none;
  border: 1px solid rgba(17,24,39,0.14);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 800;
  background: #fff;
  color: rgba(31,41,55,0.92);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  line-height: 1;
  user-select: none;
}

.worldnews__presetbtn:hover{
  background: rgba(17,24,39,0.03);
}

.worldnews__presetbtn:active{
  transform: translateY(1px);
}

.worldnews__presetbtn.is-active{
  border-color: rgba(14,165,233,0.55);
  box-shadow: 0 0 0 4px rgba(14,165,233,0.12);
}

.worldnews__presetbtn:focus{
  outline: none;
}

.worldnews__presetbtn:focus-visible{
  box-shadow: 0 0 0 4px rgba(14,165,233,0.18);
}

/* ================================
   Data snapshot layout (2-line label + right items)
================================ */

.worldnews__snapshotrow{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 左：2行 */
.worldnews__snapshotlabel{
  display: flex;
  font-size: 10px;
  flex-direction: column;
  line-height: 1.15;
}

.worldnews__snapshotsub{
  font-size: 10px;
  color: rgba(55,65,81,0.6);
}

.worldnews__snapshotright{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.worldnews__snapshottime{
  font-weight: 750;
  color: rgba(31,41,55,0.92);
  white-space: nowrap;
}
/* ================================
   Filter meta row
================================ */
.worldnews__filtermeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: rgba(55,65,81,0.9);
  font-weight: 650;

  /* ★ smaller snapshot text */
  font-size: 12px;
}

.worldnews__metarow{
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.worldnews__legendrow{
  margin-top: 0;
  margin-left: auto;
  flex: 0 0 auto;
}

.worldnews__metalabel{
  color: rgba(55,65,81,0.7);
  font-weight: 750;
  font-size: 11px; /* ★ smaller */
}

.worldnews__metalabel_suffix{
  color: rgba(55,65,81,0.7);
  font-weight: 750;
  font-size: 11px; /* ★ smaller */
}

.worldnews__legendbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17,24,39,0.14);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 750;
  background: #fff;
  color: rgba(31,41,55,0.92);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.worldnews__legendbtn:hover{
  background: rgba(17,24,39,0.03);
}

.worldnews__status{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.9);
}

.worldnews__status--hidden{
  display: none;
}

.worldnews__statustitle{
  margin: 0;
  font-weight: 800;
  color: rgba(17,24,39,0.92);
}

.worldnews__statussub{
  margin: 2px 0 0;
  color: rgba(55,65,81,0.76);
  font-size: 13px;
}

.worldnews__statusright{
  display: grid;
  gap: 6px;
  justify-items: end;
  min-width: 180px;
}

.worldnews__tiny{
  font-size: 12px;
  color: rgba(55,65,81,0.7);
  font-weight: 700;
}

.worldnews__error{
  margin-top: 12px;
  border: 1px solid rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.06);
  border-radius: 14px;
  padding: 12px 14px;
  color: rgba(127,29,29,0.95);
  font-weight: 650;
  white-space: pre-wrap;
}

/* ================================
   Map
================================ */
.worldnews__mapcard{
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: 18px;
  /* overflow: hidden; を削除して、Cesiumのクレジット表示が切り取られないようにする */
  /* 代わりに、.worldnews__mapでoverflow: hiddenとborder-radiusを適用して角丸を維持 */
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  position: relative; /* for floating frame/handles */
  /* Cesiumのクレジット表示が表示されるように、overflowをvisibleに */
  overflow: visible;
}

.worldnews__map{
  height: var(--worldnews-map-h);
  width: 100%;
  position: relative;
  z-index: 1;
  /* relatos.jsコンテナ用のスタイル */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* 角丸のボーダーを維持 */
  border-radius: 18px;
}

/* relatos.jsが作成するメインコンテナ（display: flex, flex-direction: column） */
.worldnews__map > div {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* relatos.jsのviewContainer（flex: 1 1 0%） */
.worldnews__map > div > div[style*="flex: 1 1 0%"] {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Cesiumコンテナのスタイル */
.worldnews__map .cesium-viewer,
.worldnews__map .cesium-viewer-cesiumWidgetContainer,
.worldnews__map .cesium-widget,
.worldnews__map .cesium-viewer canvas {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  /* フローティング中でもCesiumのcanvasがクリック可能になるように */
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* フローティング中にCesiumのイベント座標を補正 */
/* 親要素のtransform: scale()の影響を受けないように、Cesiumのcanvasに逆スケールを適用 */
/* これにより、Cesiumのイベントハンドラーが正しい座標を受け取れるようになる */
/* canvasのサイズを調整して、視覚的な問題を回避 */
.worldnews__mapcard--floating .worldnews__map .cesium-viewer-cesiumWidgetContainer {
  /* 親要素のスケールを取得して逆変換を適用 */
  transform: scale(calc(1 / var(--worldnews-float-scale, 1))) !important;
  transform-origin: top left !important;
  /* スケールされたサイズを補正（コンテナのサイズを調整） */
  width: calc(100% * var(--worldnews-float-scale, 1)) !important;
  height: calc(100% * var(--worldnews-float-scale, 1)) !important;
}


/* Cesiumのクレジット表示を確実に表示する（overflow: hiddenの影響を受けないように） */
/* .cesium-viewer-bottomは.cesium-viewerの直接の子要素で、絶対配置されている */
/* 親要素のoverflow: hiddenの影響を受けないように、.cesium-viewer-bottomを確実に表示 */
.worldnews__map .cesium-viewer {
  /* Cesiumのクレジット表示が切り取られないように、overflowを調整 */
  /* ただし、canvas部分はoverflow: hiddenを維持する必要があるため、個別に設定 */
  position: relative !important;
}

/* Cesiumのクレジット表示エリア（下部） */
.worldnews__map .cesium-viewer-bottom {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  /* right: 0を削除して、オリジナルのサイズに合わせる */
  padding-right: 5px !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  /* 親要素のoverflow: hiddenの影響を受けないように */
  clip-path: none !important;
  /* 確実に表示されるように */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Cesiumのクレジット表示（オリジナルのスタイルに合わせる） */
.worldnews__map .cesium-viewer .cesium-widget-credits {
  /* オリジナルのスタイル: display: inline, position: static */
  display: inline !important;
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  padding-right: 0 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  text-shadow: 0 0 2px #000000 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Cesium ionロゴとクレジットテキスト（オリジナルのスタイルに合わせる） */
.worldnews__map .cesium-credit-logoContainer,
.worldnews__map .cesium-credit-textContainer,
.worldnews__map .cesium-credit-expand-link {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 10px !important;
  color: #fff !important;
  text-shadow: 0px 0px 2px #000000 !important;
}

/* Cesiumのクレジットlightbox（ポップアップ）のスタイル調整 */
/* オリジナルでは、lightbox-overlayはCesium viewer内にposition: absoluteで配置され、 */
/* lightbox本体はposition: relative + margin: autoでセンタリングされる */
/* Cesiumはstyle.displayで表示/非表示を制御するため、!importantは使わず、表示時のみflexboxを適用 */
.worldnews .cesium-credit-lightbox-overlay,
.cesium-credit-lightbox-overlay {
  /* Cesium viewer内に絶対配置（オリジナルの動作） */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Cesiumのデフォルト: display: none（初期状態は非表示） */
  /* 表示時（style.display="block"が設定された時）にflexboxでセンタリング */
  /* relatosのボタンより上に表示（relatosのz-index: 1200より上） */
  z-index: 2000 !important;
  background-color: rgba(80, 80, 80, 0.8) !important;
}

/* 表示時（style.display="block"が設定された時）にflexboxでセンタリング */
.worldnews .cesium-credit-lightbox-overlay[style*="display: block"],
.cesium-credit-lightbox-overlay[style*="display: block"],
.worldnews .cesium-credit-lightbox-overlay[style*="display:block"],
.cesium-credit-lightbox-overlay[style*="display:block"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* クリックイベントが正しく動作するように */
  pointer-events: auto !important;
}

/* lightbox本体（オリジナルのスタイルに合わせる） */
.worldnews .cesium-credit-lightbox,
.cesium-credit-lightbox {
  /* オリジナル: position: relative + margin: autoでセンタリング */
  position: relative !important;
  margin: auto !important;
  /* オリジナルのスタイル */
  background-color: #303336 !important;
  color: #ffffff !important;
  min-height: 100px !important;
  /* スクロール可能にする */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* クリックイベントが正しく動作するように */
  pointer-events: auto !important;
  /* relatosのボタンより上に表示 */
  z-index: 2001 !important;
}

/* lightboxが展開された時のスタイル（オリジナル） */
.worldnews .cesium-credit-lightbox.cesium-credit-lightbox-expanded,
.cesium-credit-lightbox.cesium-credit-lightbox-expanded {
  border: 1px solid #444 !important;
  border-radius: 5px !important;
  max-width: 470px !important;
}

/* lightboxのタイトル（オリジナルのスタイルに合わせる） */
.worldnews .cesium-credit-lightbox-title,
.cesium-credit-lightbox-title {
  /* オリジナル: padding: 20px 20px 0 20px */
  padding: 20px 20px 0 20px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #ffffff !important;
}

/* lightboxの閉じるボタン（オリジナルのスタイルに合わせる） */
.worldnews .cesium-credit-lightbox-close,
.cesium-credit-lightbox-close {
  /* オリジナルのスタイル */
  font-size: 18pt !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 0 !important;
  right: 6px !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  /* クリック可能にする */
  pointer-events: auto !important;
  z-index: 2002 !important;
}

.worldnews .cesium-credit-lightbox-close:hover,
.cesium-credit-lightbox-close:hover {
  /* オリジナルのホバー時のスタイル */
  color: #fff !important;
}

/* lightboxのリスト（オリジナルのスタイルに合わせる） */
.worldnews .cesium-credit-lightbox > ul,
.cesium-credit-lightbox > ul {
  margin: 0 !important;
  padding: 12px 20px 12px 40px !important;
  font-size: 13px !important;
  list-style: none !important;
}

.worldnews .cesium-credit-lightbox > ul > li,
.cesium-credit-lightbox > ul > li {
  padding-bottom: 6px !important;
}

.worldnews .cesium-credit-lightbox > ul > li *,
.cesium-credit-lightbox > ul > li * {
  padding: 0 !important;
  margin: 0 !important;
}

.worldnews .cesium-credit-lightbox > ul > li a,
.cesium-credit-lightbox > ul > li a,
.worldnews .cesium-credit-lightbox > ul > li a:visited,
.cesium-credit-lightbox > ul > li a:visited {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.worldnews .cesium-credit-lightbox > ul > li a:hover,
.cesium-credit-lightbox > ul > li a:hover {
  color: #fff !important;
}

/* relatos.jsのviewContainerのoverflow: hiddenの影響を受けないように */
/* Cesiumのクレジット表示が表示されるように、.cesium-viewer-bottomを例外として扱う */
.worldnews__map > div > div[style*="flex: 1 1 0%"] .cesium-viewer-bottom {
  /* 親要素のoverflow: hiddenの影響を受けないように、絶対配置で確実に表示 */
  position: absolute !important;
  z-index: 1000 !important;
  /* 親要素の境界を超えて表示されるように */
  clip-path: none !important;
  overflow: visible !important;
}

/* Leafletコンテナのスタイル */
.worldnews__map .leaflet-container {
  height: 100% !important;
  width: 100% !important;
}

/* Placeholder used when map becomes floating */
.worldnews__mapplaceholder{
  width: 100%;
}

/* =========================================================
   Floating map (ALL widths)
   ========================================================= */
.worldnews__mapcard--floating{
  position: fixed;

  right: 10%;
  left: auto;
  top: calc(var(--worldnews-fixed-header-h, 0px) + var(--worldnews-float-gap, 10px));

  z-index: 1200;

  /* relatos版では初期フローティング時は0.7倍に縮小 */
  --worldnews-float-scale: 0.7;
  transform: scale(var(--worldnews-float-scale));
  transform-origin: top right;

  width: var(--worldnews-float-width, min(860px, 96vw));

  border-radius: 16px;
  box-shadow: 0 16px 46px rgba(0,0,0,0.22);
  border: 1px solid rgba(17,24,39,0.18);
}

/* Do NOT override height inside floating mode.
   The map keeps its original height; the whole card scales. */
.worldnews__mapcard--floating .worldnews__map{
  height: var(--worldnews-map-h);
  /* フローティング時もrelatosコンテナが正しく高さを取得できるように */
  flex: 1 1 0%;
  min-height: 0;
}

/* ================================
   Floating map: frame & handles
================================ */

/* frame is hidden by default */
.worldnews__mapframe{
  display: none;
}

/* show frame only when floating */
.worldnews__mapcard--floating .worldnews__mapframe{
  display: block;
  position: absolute;
  inset: 0;
  /* Cesiumのcanvasのクリックイベントをブロックしないように */
  pointer-events: none !important;
  z-index: 1;
}

.worldnews__mapcard--floating::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 10px solid rgba(255,255,255,0.85);
  box-shadow:
    0 0 0 1px rgba(17,24,39,0.14) inset,
    0 10px 26px rgba(0,0,0,0.10);
  /* Cesiumのcanvasのクリックイベントをブロックしないように */
  pointer-events: none !important;
  z-index: 1;
}

.worldnews__mapcard--floating .leaflet-top{
  top: 10px;
}
.worldnews__mapcard--floating .leaflet-left{
  left: 10px;
}
.worldnews__mapcard--floating .leaflet-right{
  right: 10px;
}
.worldnews__mapcard--floating .leaflet-bottom{
  bottom: 10px;
}

/* handle base */
.worldnews__maphandle{
  position: absolute;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
}

.worldnews__maphandle--move{
  left: 10px;
  right: 10px;
  top: 0px;
  height: 14px;
  cursor: grab;
}
.worldnews__maphandle--move:active{
  cursor: grabbing;
}

.worldnews__maphandle--nw,
.worldnews__maphandle--ne,
.worldnews__maphandle--sw,
.worldnews__maphandle--se{
  width: 22px;
  height: 22px;
}

.worldnews__maphandle--nw{ left: 0px; top: 0px; cursor: nwse-resize; }
.worldnews__maphandle--ne{ right: 0px; top: 0px; cursor: nesw-resize; }
.worldnews__maphandle--sw{ left: 0px; bottom: 0px; cursor: nesw-resize; }
.worldnews__maphandle--se{ right: 0px; bottom: 0px; cursor: nwse-resize; }

.worldnews__mapdragtitle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.worldnews__mapdragtitle::before{
  content: "⋮⋮";
  font-weight: 900;
  letter-spacing: -1px;
  color: rgba(55,65,81,0.65);
}

.worldnews__mapdraghint{
  color: rgba(55,65,81,0.60);
  font-weight: 850;
  font-size: 12px;
}

/* Resize handle (bottom-right corner; shown only when floating) */
.worldnews__mapcard--floating .worldnews__mapresize{
  display: block;
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(17,24,39,0.18);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);

  cursor: nwse-resize;
  user-select: none;
  touch-action: none;
}

.worldnews__mapcard--floating .worldnews__mapresize::before{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  background:
    linear-gradient(135deg,
      rgba(17,24,39,0.22) 0%,
      rgba(17,24,39,0.22) 18%,
      transparent 18%,
      transparent 36%,
      rgba(17,24,39,0.22) 36%,
      rgba(17,24,39,0.22) 54%,
      transparent 54%,
      transparent 72%,
      rgba(17,24,39,0.22) 72%,
      rgba(17,24,39,0.22) 90%,
      transparent 90%,
      transparent 100%);
  opacity: 0.65;
}

.worldnews__mapcard--floating .worldnews__mapresize:hover{
  border-color: rgba(14,165,233,0.35);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

/* ================================
   Table card
================================ */
.worldnews__tablecard{
  margin-top: 1px;
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  overflow: hidden;
  margin-left: 0;
  margin-right: 0;
}

.worldnews__tablehead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(17,24,39,0.10);
}

.worldnews__tabletitle{
  margin: 0;
  font-weight: 850;
  color: rgba(17,24,39,0.92);
  font-size: 16px;
}

.worldnews__tablemeta{
  margin: 0;
  color: rgba(55,65,81,0.65);
  font-weight: 700;
  font-size: 12px;
}

/* Fixed header row (No, Title, Themes, …) — outside scroll so it stays visible */
.worldnews__tableheaderwrap{
  overflow: hidden;
  border-bottom: 1px solid rgba(17,24,39,0.10);
}
.worldnews__tableheaderwrap .worldnews__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;
}
.worldnews__tableheaderwrap .worldnews__table thead th{
  background: #fff;
  border-bottom: 1px solid rgba(17,24,39,0.10);
  padding: 10px 12px;
  text-align: left;
  color: rgba(55,65,81,0.85);
  font-weight: 800;
  white-space: nowrap;
}
.worldnews__tableheaderwrap .worldnews__table thead th.col-no{
  text-align: right;
}
.worldnews__tableheaderwrap .worldnews__table td.col-link,
.worldnews__tableheaderwrap .worldnews__table th.col-link{
  text-align: center;
}

/* Scroll area: Relatos table body only; Relatos thead hidden (header in tableheaderwrap above) */
.worldnews__tablewrap{
  max-height: 75vh;
  overflow: auto;
}
/* Scroll happens here so thead (inside table below) can stick to this container’s top */
.worldnews__tablewrap .relatos-table thead{
  display: none;
}

/* Relatos table (node list) inside tablewrap — reuse worldnews table styles */
.worldnews__tablewrap .relatos-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;
}
.worldnews__tablewrap .relatos-table tbody td{
  border-bottom: 1px solid rgba(17,24,39,0.06);
  padding: 10px 12px;
  vertical-align: top;
  color: rgba(17,24,39,0.88);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.worldnews__tablewrap .relatos-table tbody tr:hover{
  background: rgba(17,24,39,0.03);
  cursor: pointer;
}
.worldnews__tablewrap .relatos-table thead th.col-no{
  text-align: right;
}
.worldnews__tablewrap .relatos-table tbody td.col-no{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.worldnews__tablewrap .relatos-table td.col-link{
  text-align: center;
}

.worldnews__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;
}

.worldnews__table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid rgba(17,24,39,0.10);
  padding: 10px 12px;
  text-align: left;
  color: rgba(55,65,81,0.85);
  font-weight: 800;
  white-space: nowrap;
}

.worldnews__table tbody td{
  border-bottom: 1px solid rgba(17,24,39,0.06);
  padding: 10px 12px;
  vertical-align: top;
  color: rgba(17,24,39,0.88);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.worldnews__table tbody tr:hover{
  background: rgba(17,24,39,0.03);
  cursor: pointer;
}

.worldnews__rowhighlight{
  outline: 2px solid rgba(14,165,233,0.35);
  outline-offset: -2px;
  background: rgba(14,165,233,0.06) !important;
}

/* Column widths */
.col-no{
  width: 56px;
  white-space: nowrap;
  color: rgba(55,65,81,0.75);
  font-weight: 800;
}
.col-title{ width: 44%; }
.col-themes{ width: 10%; }
.col-country{ width: 10%; }
.col-tone{ width: 28%; }
.col-link{ width: 8%; text-align: center; }

.worldnews__table thead th.col-no{
  text-align: right;
  white-space: nowrap;
  font-weight: 650;
}

.worldnews__table tbody td.col-no{
  text-align: right;
  white-space: nowrap;
  font-weight: 400;
  color: rgba(55,65,81,0.78);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  word-break: normal;
}

/* Themes icons: allow wrap */
.worldnews__themesicons{
  display: inline;
  font-size: 18px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.worldnews__themesicons--empty{
  color: rgba(107,114,128,0.7);
  font-weight: 800;
}

.worldnews__table td.col-country{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Link icon */
.worldnews__linkicon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  text-decoration: none;
  color: rgba(17,24,39,0.85);
  background: #fff;
  font-weight: 900;
}

.worldnews__linkicon:hover{
  background: rgba(17,24,39,0.04);
}

.worldnews__linkicon--disabled{
  opacity: 0.5;
  cursor: default;
}

/* Tone bar (bar only) */
.worldnews__tonebarwrap{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,0.08);
  overflow: hidden;
  border: 1px solid rgba(17,24,39,0.10);
}

.worldnews__tonebar{
  height: 100%;
  border-radius: 999px;
}

/* Footer */
.worldnews__credits{
  margin: 0px;
  color: rgba(55,65,81,0.7);
  font-size: 12px;
  padding: 0px;
}

.worldnews__creditsline{
  margin: 6px 0;
}

.worldnews__credits a{
  color: rgba(79,79,127,1);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ================================
   Small screens: fix header overlap
================================ */
@media (max-width: 600px){
  .worldnews__table th,
  .worldnews__table td{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .worldnews__table thead th.col-themes,
  .worldnews__table thead th.col-country,
  .worldnews__tableheaderwrap .worldnews__table thead th.col-themes,
  .worldnews__tableheaderwrap .worldnews__table thead th.col-country{
    white-space: normal !important;
    line-height: 1.1;
  }

  .worldnews__table thead th,
  .worldnews__tableheaderwrap .worldnews__table thead th{
    font-size: 13px;
    padding: 10px 10px;
  }

  .col-title{ width: 46%; }
  .col-themes{ width: 14%; }
  .col-country{ width: 14%; }
  .col-tone{ width: 20%; }
  .col-link{ width: 6%; }
}

/* ================================
   Legend Overlay
================================ */
.worldnews__legendoverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(17,24,39,0.35);
  backdrop-filter: blur(2px);
}

.worldnews__legendpanel{
  width: min(680px, 96vw);
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  overflow: hidden;
}

.worldnews__legendhead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,24,39,0.10);
}

.worldnews__legendtitle{
  font-weight: 900;
  color: rgba(17,24,39,0.92);
}

.worldnews__legendclose{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,0.14);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: rgba(17,24,39,0.85);
}

.worldnews__legendclose:hover{
  background: rgba(17,24,39,0.04);
}

.worldnews__legendbody{
  padding: 14px 16px 18px;
}

.worldnews__legendsection{
  margin-bottom: 14px;
}

.worldnews__legendlabel{
  font-weight: 900;
  color: rgba(17,24,39,0.88);
  margin-bottom: 8px;
}

.worldnews__legendlist{
  margin: 0;
  padding-left: 18px;
  color: rgba(55,65,81,0.82);
  font-weight: 650;
}

.worldnews__legendchip{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.12);
  background: rgba(17,24,39,0.03);
  font-size: 12px;
  font-weight: 850;
  margin-right: 6px;
}

.worldnews__legendicon{
  font-size: 16px;
  margin-right: 8px;
}

.worldnews__legendnote{
  margin-top: 10px;
  color: rgba(55,65,81,0.68);
  font-size: 12px;
  font-weight: 650;
}

/* ================================
   Refresh button (snapshot row)
================================ */
.worldnews__refreshbtn{
  margin-left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #ffffff;
  color: #2b2b35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 34px;
  font-size: 30px;
  user-select: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.worldnews__refreshbtn:hover{
  background: #f5f5f7;
  border-color: rgba(0,0,0,0.22);
  transform: translateY(-1px);
}

.worldnews__refreshbtn:active{
  transform: translateY(0px);
}

.worldnews__refreshbtn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* spinning while loading */
@keyframes worldnews-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}
.worldnews__refreshbtn--spinning{
  animation: worldnews-spin 0.9s linear infinite;
}

/* ================================
   FIX: floating map frame/handles stacking
   - ensure border/handles are above Leaflet panes
================================ */
.worldnews__map{
  position: relative;
  z-index: 1;
}

.worldnews__mapcard--floating::before{
  z-index: 1000;
}

.worldnews__mapcard--floating .worldnews__mapframe{
  z-index: 1001;
}

.worldnews__mapcard--floating .worldnews__maphandle{
  z-index: 1002;
}

.worldnews__mapcard--floating .worldnews__mapresize{
  z-index: 1003;
}

.worldnews__mapcard--floating .leaflet-control-container{
  position: absolute !important;
  inset: 0;
  z-index: 1004;
  pointer-events: none;
}

/* ================================
   Footer: credits + share in one row
================================ */
.worldnews__creditsrow{
  margin: 3px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  flex-wrap: wrap; /* allow wrap on narrow screens */
}

/* credits text */
.worldnews__creditsline{
  margin: 3px 0;
  line-height: 1.5;
  flex: 1 1 520px; /* keep readable but allow shrinking */
}

/* ================================
   Share buttons (footer) - icon style
================================ */
.worldnews__share{
  display: flex;
  align-items: center;
  flex-wrap: wrap;     /* ★ wrap to avoid overflow */
  max-width: 100%;     /* ★ never overflow parent */
  flex: 0 0 auto;

  /* ★ spacing reduced (<= half of 10px) */
  gap: 2px;
  margin: 0;
  padding: 0;
}


.worldnews__sharebtn{
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.14);
  background: rgba(255,255,255,0.92);

  color: rgba(31,41,55,0.92);
  text-decoration: none;

  box-shadow:
    0 1px 0 rgba(0,0,0,0.03),
    0 10px 24px rgba(0,0,0,0.06);

  cursor: pointer;
  user-select: none;

  /* ★ do not shrink (avoid tiny icons); wrap instead */
  flex: 0 0 auto;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease;
}

.worldnews__sharebtn:hover{
  transform: translateY(-1px);
  background: rgba(17,24,39,0.03);
  border-color: rgba(17,24,39,0.18);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.03),
    0 14px 32px rgba(0,0,0,0.10);
}

.worldnews__sharebtn:active{
  transform: translateY(0px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.03),
    0 10px 24px rgba(0,0,0,0.08);
}

.worldnews__sharebtn--button{
  appearance: none;
  font-family: inherit;
  padding: 0;
}

.worldnews__shareicon{
  display: block;
  overflow: visible;
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: 0.92;
}

/* Copy feedback */
#shareCopyLink.is-copied{
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}
#shareCopyLink.is-failed{
  border-color: rgba(239,68,68,0.45);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.18);
}

/* Keyboard focus */
.worldnews__sharebtn:focus{
  outline: none;
}
.worldnews__sharebtn:focus-visible{
  box-shadow: 0 0 0 4px rgba(14,165,233,0.18);
}

/* ================================
   Responsive tweaks
================================ */
@media (max-width: 720px){
  .worldnews__creditsrow{
    justify-content: flex-start;
  }

  .worldnews__share{
    margin-top: 2px;
  }
}

@media (max-width: 420px){
  .worldnews__share{
    gap: 2px; /* ultra-narrow safety */
  }
}