/* =========================================
   components/right-rail.css
   FINAL REPLACEMENT VERSION (CLEAN + FINANCE UI ACCENT)
   目的:
   - 右レールの先頭余白ゼロ（Homeの特殊相殺もここで完結 → 全ページ方針へ昇格）
   - 間隔は「railの gap だけ」で管理（子は margin-top を持たない）
   - rr-block / カレンダー / マクロ / お知らせ / おすすめ を安定化
   - flatpickr の横はみ出し防止 & コンパクト表示
   - 「お知らせ」「おすすめ」を同じ “カード行UI” に統一（共通CSS）
   - !important は使わない（specificity と読み込み順で解決）
   - 色設計:
     * カード本体は白で統一（色面をやめる）
     * 色は「見出し色」+「細いアクセント帯」+「内側行の薄い面」で表現
     * Market title: navy / Ann+Reco title: 暗めオレンジ
     * マーケットは少し小さく・数字だけ強調（金融UI風）
========================================= */

/* =================================================
   Rail top offset policy (GLOBAL)
   - Home の -34px を「全ページ方針」に昇格
   - 例外が必要なら body に .rail-no-lift を付けて戻せる
   - no !important
================================================= */
body{
  --rail-top-offset: -34px;
}
body.rail-no-lift{
  --rail-top-offset: 0px;
}

/* =================================================
   Rail frame (outside)
================================================= */
.right-section{
  margin-top: var(--rail-top-offset);
  padding-top: 0;
  align-self: start;
  min-width: 0;
}

/* right-rail は縦スタック。ここだけが間隔の責任を持つ */
.right-section .right-rail{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  min-width: 0;

  /* finance UI accents */
  --rr-accent-market: var(--navy);
  --rr-accent-warm: color-mix(in srgb, var(--orange) 72%, #000 28%); /* 暗めオレンジ */
  --rr-panel: #f8fbff;              /* 薄い青み面 */
  --rr-panel-2: #fffbf5;            /* 薄い暖色面 */
  --rr-divider: rgba(15,23,42,.06); /* 区切り線を薄く */
}

/* レール内は「上マージン文化」を禁止 */
.right-section .right-rail > *{
  margin-top: 0;
}

/* =================================================
   rr-block (common card)
================================================= */
.right-section .right-rail .rr-block{
  margin: 0;
  padding: 14px;

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);

  position: relative;
  overflow: hidden;
}

/* アクセント帯（上に2px） */
.right-section .right-rail .rr-block::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background: rgba(15,23,42,.08); /* default */
}

/* ブロック別にアクセント帯色だけ変える */
.right-section .right-rail .rr-block.rr-macro::before{
  background: color-mix(in srgb, var(--rr-accent-market) 80%, #fff 20%);
}
.right-section .right-rail .rr-block.rr-ann::before,
.right-section .right-rail .rr-block.rr-reco::before{
  background: color-mix(in srgb, var(--rr-accent-warm) 85%, #fff 15%);
}

/* タイトル類（h3等のデフォルトmargin対策） */
.right-section .right-rail .rr-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

/* ★t-h3 等の色指定に負けないよう “ブロック指定で確定” */
.right-section .right-rail .rr-block.rr-macro :where(.rr-title, h3.rr-title){
  color: var(--rr-accent-market);
}
.right-section .right-rail .rr-block.rr-ann :where(.rr-title, h3.rr-title),
.right-section .right-rail .rr-block.rr-reco :where(.rr-title, h3.rr-title){
  color: var(--rr-accent-warm);
}

.right-section .right-rail .rr-body{ margin: 0; }

.right-section .right-rail .rr-muted{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* =================================================
   Calendar block (rr-cal)
================================================= */
.right-section .right-rail .rr-cal{
  padding: 14px;
  position: static;
  overflow: visible;
}

.right-section .right-rail .rr-cal .date-time{
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  min-height: 0;
  text-align: center;
}

.right-section .right-rail .rr-cal #calendar{
  margin: 0;
  padding: 0;
}

/* =================================================
   Generic widget width clamp
================================================= */
.right-section .right-rail :where(.macro-card,.calendar-card,.widget,.card){
  max-width: 100%;
}

/* =================================================
   flatpickr safety + compact
================================================= */
.right-section .right-rail :where(
  .flatpickr-calendar,
  .flatpickr-rContainer,
  .flatpickr-days,
  .flatpickr-innerContainer
){
  max-width: 100%;
}

.right-section .right-rail .flatpickr-calendar{
  width: 100%;
  font-size: 11px;
}

.right-section .right-rail .flatpickr-calendar .flatpickr-day{
  height: 24px;
  line-height: 24px;
  font-size: 11px;
}

.right-section .right-rail .flatpickr-calendar .flatpickr-weekdays{ height: 24px; }

.right-section .right-rail .flatpickr-calendar .flatpickr-weekday{
  font-size: 10px;
  font-weight: 700;
}

.right-section .right-rail .flatpickr-calendar .flatpickr-month{
  height: 28px;
  font-size: 12px;
}

.right-section .right-rail .flatpickr-calendar .flatpickr-current-month{
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   Shared "Rows UI"  (Announcements / Recommend / etc.)
   - 箱は白（rr-block）
   - “内側パネル”で薄面 + 行UIを統一
   - ul/li でも div でも同じ見た目に吸収
========================================================= */

/* 対象となる「行リスト」コンテナを統一（ul / div 両対応） */
.right-section .right-rail :where(.rr-block) :where(
  .rr-rows,
  .rr-list,
  .ann-list,
  .reco-list
){
  margin-top: 10px;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 0;

  border: 1px solid var(--rr-divider);
  border-radius: var(--radius);
  overflow: hidden;

  background: var(--rr-panel);
}

/* ✅ お知らせ/おすすめは「同じ薄い黄色」 */
.right-section .right-rail .rr-block.rr-ann :where(.rr-rows, .rr-list, .ann-list),
.right-section .right-rail .rr-block.rr-reco :where(.rr-rows, .rr-list, .reco-list){
  background: var(--rr-panel-2);
}

/* お知らせ / おすすめだけ 3件超で内部スクロール */
.right-section .right-rail .rr-block.rr-ann :where(.rr-rows, .rr-list, .ann-list),
.right-section .right-rail .rr-block.rr-reco :where(.rr-rows, .rr-list, .reco-list){
  max-height: 190px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 各行アイテム（li / div）を統一 */
.right-section .right-rail :where(.rr-block) :where(
  .rr-row-item,
  .rr-item,
  .ann-item,
  .reco-item
){
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 行の区切り線（li / div 両対応） */
.right-section .right-rail :where(.rr-block) :where(
  .rr-row-item + .rr-row-item,
  .rr-item + .rr-item,
  .ann-item + .ann-item,
  .reco-item + .reco-item
){
  border-top: 1px solid rgba(15,23,42,.08);
}

/* クリック領域（button / a）を統一 */
.right-section .right-rail :where(.rr-block) :where(
  button.rr-row,
  button.ann-row
){
  all: unset;
  box-sizing: border-box;

  width: 100%;
  padding: 10px 12px;

  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;

  cursor: pointer;
  color: var(--text);
  text-decoration: none;
}

.right-section .right-rail :where(.rr-block) :where(
  a.rr-row,
  a.ann-row,
  a.reco-row,
  .rr-item > a,
  .ann-item > a,
  .reco-item > a
){
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;

  width: 100%;
  padding: 10px 12px;

  color: var(--text);
  text-decoration: none;
}

/* 1行目（title系） */
.right-section .right-rail :where(.rr-block) :where(
  .rr-row-title,
  .ann-title,
  .reco-title
){
  font-size: 12px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.35;

  min-width: 0;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 2行目（meta系） */
.right-section .right-rail :where(.rr-block) :where(
  .rr-row-meta,
  .ann-meta,
  .reco-meta
){
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.25;

  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover：色面を増やさず、軽く */
.right-section .right-rail :where(.rr-block) :where(
  .rr-row-item:hover,
  .rr-item:hover,
  .ann-item:hover,
  .reco-item:hover
){
  background: rgba(255,255,255,.55);
}

/* focus */
.right-section .right-rail :where(.rr-block) :where(
  button.rr-row:focus-visible,
  a.rr-row:focus-visible,
  button.ann-row:focus-visible,
  a.ann-row:focus-visible,
  a.reco-row:focus-visible,
  .rr-item > a:focus-visible,
  .ann-item > a:focus-visible,
  .reco-item > a:focus-visible
){
  outline: 3px solid rgba(29,78,216,.28);
  outline-offset: -2px;
}

/* empty hide（ul/div両対応） */
.right-section .right-rail :where(.rr-block) :where(.rr-list, .ann-list, .reco-list):empty{
  display:none;
}

/* =========================================================
   Announcements block (rr-ann)
========================================================= */
.right-section .right-rail .rr-block.rr-ann #announcements-widget{ margin: 0; }

.right-section .right-rail .rr-block.rr-ann #announcements-status{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.rr-ann #announcements-list:empty{ display:none; }

/* =========================================================
   Recommend block (rr-reco)
========================================================= */
/* 共有Rows UIで見た目は完結。reco固有が必要ならここに追記。 */

/* =========================================================
   Macro block (rr-macro) — finance UI
========================================================= */
.right-section .right-rail .rr-block.rr-macro .rr-body{
  margin: 0;
  font-size: 0.92em;   /* 少し小さく */
  line-height: 1.45;
}

.right-section .right-rail .rr-block.rr-macro #macro-status{ margin: 6px 0 0; }

/* 行ラッパ：内側だけ薄面 */
.right-section .right-rail .rr-block.rr-macro .macro-rows{
  margin-top: 10px;
  display: grid;
  gap: 0;

  border: 1px solid var(--rr-divider);
  border-radius: var(--radius);
  overflow: hidden;

  background: var(--rr-panel);
}

.right-section .right-rail .rr-block.rr-macro .macro-row{
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.right-section .right-rail .rr-block.rr-macro .macro-row + .macro-row{
  border-top: 1px solid rgba(15, 23, 42, .08);
}

/* ラベルは落ち着かせる */
.right-section .right-rail .rr-block.rr-macro .macro-label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.2;
}

/* 値：数字だけ “強調” */
.right-section .right-rail .rr-block.rr-macro .macro-value{
  font-size: 13px;
  font-weight: 900;
  color: var(--rr-accent-market);
  line-height: 1.25;
}

/* =========================================================
   rr-media : YouTube/Reports 共通
========================================================= */
.rr-media .rr-scroll{
  max-height: 260px;
  overflow: auto;
  padding-right: 6px;
}

.rr-media .rr-item.rr-media-item{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 10px 10px;
  border-radius: var(--radius);
}

.rr-media .rr-thumb{
  display: block;
  width: 72px;
  height: 42px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #eef2f7;
}

.rr-media .rr-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rr-media .rr-body{ min-width: 0; }

.rr-media .rr-name{
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-media .rr-meta{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-media .rr-actions{
  display: flex;
  justify-content: flex-end;
}

.rr-media .rr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #eef2f7;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

.rr-media .rr-btn:hover{ background: #e6edf6; }

/* =========================================================
   FAQ ONLY (REPLACEMENT / ROBUST)
   目的:
   - “素のUI”に戻らないよう、HTML構造差分に強いセレクタで固定
   - 入力は上固定、回答は下スクロール
   - 送信は右（core.cssのbtnを使うのが前提）
========================================================= */

/* -------------------------
   launcher（丸ボタン）
------------------------- */
.faq-launcher,
#faq-launcher,
[data-faq-launcher]{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 5000;

  width: 72px;
  height: 72px;
  border-radius: 999px;

  background: var(--navy);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 2行レイアウト固定化 */
  flex-direction: column;
  gap: 2px;
  text-align: center;
  line-height: 1.05;

  /* 変な折返し・分割を殺す */
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;

  cursor: pointer;
  border: 0;
  box-shadow: 0 14px 34px rgba(2,8,23,.22);
}

.faq-launcher{
  font-weight: 900;
  letter-spacing: .02em;
}

/* 下段 "お問合せ" を1行固定 */
.faq-launcher > span{
  display: block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;

  font-weight: 900;
  font-size: 12px;
}

.faq-launcher:hover,
#faq-launcher:hover,
[data-faq-launcher]:hover{ background: var(--navy-2); }

/* -------------------------
   panel（外枠）
------------------------- */
#faq-panel,
.faq-panel,
.faq-box,
#faq-box,
[data-faq-panel]{
  position: fixed;
  right: 22px;
  bottom: 104px;
  z-index: 5100;

  width: 440px;
  max-width: calc(100vw - 32px);

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(2,8,23,.20);

  overflow: hidden;
  display: none;
}

/* open/close（既存JSのどれでも拾う） */
#faq-panel.is-open,
.faq-panel.is-open,
.faq-box.is-open,
#faq-box.is-open,
[data-faq-panel].is-open{ display:block; }

#faq-panel[aria-hidden="false"],
.faq-panel[aria-hidden="false"],
.faq-box[aria-hidden="false"],
#faq-box[aria-hidden="false"],
[data-faq-panel][aria-hidden="false"]{ display:block; }

#faq-panel[aria-hidden="true"],
.faq-panel[aria-hidden="true"],
.faq-box[aria-hidden="true"],
#faq-box[aria-hidden="true"],
[data-faq-panel][aria-hidden="true"]{ display:none; }

/* -------------------------
   head（上帯 + 閉じる）
------------------------- */
#faq-head,
.faq-head,
[data-faq-head]{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 10px 12px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color:#fff;
}

#faq-head, #faq-head *{ color:#fff; }
.faq-head, .faq-head *{ color:#fff; }
[data-faq-head], [data-faq-head] *{ color:#fff; }

.faq-close,
#faq-close,
[data-faq-close],
#faq-head button{
  appearance:none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.55);
  color:#fff;

  width: 32px;
  height: 32px;
  border-radius: 10px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  font-weight: 900;
  line-height: 1;
}

.faq-close:hover,
#faq-close:hover,
[data-faq-close]:hover,
#faq-head button:hover{ background: rgba(255,255,255,.14); }

/* -------------------------
   body（チャットレイアウト）
------------------------- */
#faq-body,
.faq-body,
[data-faq-body]{
  padding: 12px;
  background: var(--surface);

  display:grid;
  grid-template-rows: auto 1fr; /* 入力固定 + ログ */
  gap: 10px;

  height: 240px;
}

/* 実DOMは form じゃなく div(#faq-input-row) なので、ここを直接狙う */
#faq-input-row,
.faq-input-row,
[data-faq-input-row]{
  display: grid;
  grid-template-columns: 1fr auto; /* 左=入力 / 右=送信 */
  gap: 10px;
  align-items: center;
}

/* 入力（箱だけ） */
#faq-panel :where(input[type="text"], input[type="search"], textarea){
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;

  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
}

#faq-panel textarea{
  padding-top: 12px;
  resize: none;
}

#faq-panel :where(input, textarea):focus{
  border-color: rgba(29,78,216,.35);
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
}

/* 送信は core.css の .btn を殺さない（寸法だけ合わせる） */
#faq-panel :where(.btn, .faq-send, [data-faq-send]){
  height: 32px;
  white-space: nowrap;
}

/* ログ（下スクロール） */
#faq-panel [data-faq-log]{
  min-height: 0;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  background: #f7f9fc;

  padding: 10px 12px;
  overflow: auto;
}

/* モバイル */
@media (max-width: 520px){
  #faq-body, .faq-body, [data-faq-body]{ height: 270px; }
  #faq-input-row, .faq-input-row, [data-faq-input-row]{
    grid-template-columns: 1fr;
  }
  #faq-panel :where(.btn, .faq-send, [data-faq-send]){
    width: 100%;
  }
}