/* app-redesign.css — 🎨 หน้า /app ทิศ A "จัดชั้นข้อมูล" (D-RD1 · 2026-07-27)
   ทุกกฎผูกกับ body.rd → ไม่มี class = หน้าเดิมเป๊ะ (revert = flag false, ไฟล์นี้ค้างอยู่ก็ไม่มีผล)
   ทุก class ขึ้นต้น .rd-* → ไม่ชนกับ workspace/stage/deepdive เดิม
   ตาม skill ui-design-system: §1 ใช้ token เท่านั้น (ห้าม hardcode hex · ห้าม --accent/--border/
   --ink-secondary) · §2 ห้าม solid fill · §6.5 มือถือห้ามตาราง/แถวโดนตัด */

/* ── ซ่อนของที่ถูกยุบเข้าแถบสรุปแล้ว (เลขซ้ำ) ──────────────────────────────
   ⚠️ ui-design-system §7.4: element ที่ CSS ตั้ง display เอง ต้องมี [hidden] คู่เสมอ —
   ที่นี่ตั้งใจ "ซ่อนถาวรในโหมด rd" ทุกกรณี จึงไม่ต้องมีคู่ (ไม่มีทางอยากโชว์)
   #setupSummary  = แถบสรุปเดิม → แทนที่ด้วย .rd-verdict ทั้งก้อน
   .score-head / .score-gauge = หัวคะแนน+เกจ → ย้ายไปซ้ายสุดของแถบสรุป
       (คง #scoreBreakdown / #scoreBreakdownLock ไว้ที่เดิม — D-RD2 (ข) lock รายจุดยังอยู่)
   .dd-readout    = แถบ 4 ช่องของการ์ดสัญญาณ (ราคา/มูลค่าซื้อขาย/Stage/คะแนนสแกน)
       → ย้ายเป็นแถบสรุป + 2 tiles แล้ว (การ์ดสัญญาณที่เหลือคงเดิม) */
body.rd #setupSummary,
body.rd #scorePanel .score-head,
body.rd #scorePanel .score-gauge,
body.rd #ddSignals .dd-readout { display: none !important; }

/* ── แถบสรุป ─────────────────────────────────────────────────────────────── */
.rd-verdict {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  gap: 14px;
  align-items: center;
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.rd-verdict[hidden] { display: none; }

.rd-score { text-align: center; min-width: 112px; }
.rd-score-lbl { display: block; font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.rd-score-num {
  display: block;
  font-family: var(--uni-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 2rem; font-weight: 700; color: var(--green);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.rd-score-num small { font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.rd-score-band {
  display: inline-block; margin-top: 3px;
  font-size: 0.7rem; font-weight: 600;
  padding: 2px 10px; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
}
.rd-gauge {
  display: block; position: relative; height: 6px; margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--negative) 55%, transparent),
    color-mix(in srgb, var(--amber) 55%, transparent),
    var(--green));
}
.rd-gauge i {
  position: absolute; top: -3px; width: 12px; height: 12px;
  margin-left: -6px; border-radius: 50%;
  background: var(--panel); border: 2.5px solid var(--green);
}
.rd-div { background: var(--line); align-self: stretch; }

/* min-width:0 บังคับให้คอลัมน์ 1fr หดได้ — ไม่งั้น item ที่ nowrap จะดันคอลัมน์กว้างเกิน
   แล้วข้อความล้นทะลุขอบการ์ด (เจอจากการเรนเดอร์จริงใน Chromium 07-27) */
.rd-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.84rem; min-width: 0; }
/* ห้าม nowrap ทั้ง segment — segment ยาว (แนวรับ + ที่มา + ★ + สถิติ) จะทะลุขอบการ์ด
   (เจอจากเรนเดอร์จริง 07-27) · ให้ตัวเลขเป็นก้อนที่ไม่แตกแทน */
.rd-f { color: var(--ink); max-width: 100%; }
.rd-f b, .rd-f .rd-up, .rd-f .rd-down, .rd-f .rd-hit { white-space: nowrap; }
.rd-f i { display: block; font-style: normal; font-size: 0.7rem; color: var(--muted); }
.rd-f b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-f small { color: var(--muted); font-size: 0.72rem; }
.rd-up { color: var(--green); }
.rd-down { color: var(--negative); }
.rd-star { color: var(--amber); font-size: 0.74rem; letter-spacing: 1px; }
.rd-hit { font-size: 0.7rem; color: var(--muted); }
.rd-stage { display: inline-flex; gap: 3px; }

.rd-cta {
  grid-column: 1 / -1;
  display: block; text-align: center; text-decoration: none;
  margin-top: 2px; padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 0.8rem; font-weight: 600; color: var(--green);
}
.rd-cta:hover { text-decoration: underline; }
.rd-cta span { color: var(--muted); font-weight: 400; }
.rd-disc { grid-column: 1 / -1; margin: 0; font-size: 0.68rem; color: var(--muted); text-align: center; }

/* ── 2 quant tiles (คะแนนสแกนรายคืน · มูลค่าซื้อขาย 20 วัน) ─────────────── */
.rd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rd-tiles[hidden] { display: none; }
.rd-tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px;
}
/* หุ้นที่แถว scan มีแค่ค่าเดียว (เช่น RKLB มี dv20m แต่ score ว่าง — เจอจอจริง 07-27)
   → ให้ tile เดียวกินเต็มแถว ไม่ทิ้งช่องว่างครึ่งหนึ่งข้างๆ */
.rd-tile:only-child { grid-column: 1 / -1; }
/* flex + min-height เท่ากันทุกใบ — ปุ่ม ℹ️ เป็น emoji ที่ ascent สูงกว่าตัวอักษรรอบข้าง
   ถ้าปล่อยเป็น inline line box ปกติ ใบที่มีปุ่มจะสูงกว่า ~30px = เลข 2 ใบไม่ตรงแนวกัน */
.rd-t-label {
  display: flex; align-items: center; gap: 4px; min-height: 1.3rem;
  font-size: 0.7rem; color: var(--muted); font-weight: 600;
}
.rd-t-num {
  display: block; margin-top: 3px;
  font-family: var(--uni-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 1.4rem; font-weight: 700; color: var(--ink);
  line-height: 1.2; font-variant-numeric: tabular-nums;
}
.rd-t-num small { font-size: 0.76rem; color: var(--muted); font-weight: 400; }
.rd-t-sub { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--muted); line-height: 1.35; }
/* ℹ️ กล่องอธิบายที่มาของคะแนน — เป็นลูกของ .rd-tiles (grid) จึงต้องสั่งกินเต็มแถว
   ไม่งั้นจะไปนั่งเป็นคอลัมน์ที่ 2 แทน tile มูลค่าซื้อขาย · หน้าตายืม .ind-tip ของ app.html
   (กล่องคำอธิบายที่อื่นในหน้าใช้ตัวเดียวกัน — เปิดมาแล้วรู้สึกเป็นของชุดเดียวกัน) */
.rd-tip { grid-column: 1 / -1; margin: 0; }
.rd-tip[hidden] { display: none; }
/* ⚠️ styles.css:344 ตั้ง `button { min-height: 48px }` (tap target) ไว้กับ button ทุกตัวในเว็บ —
   ในแถวเล็กแบบนี้มันดันเนื้อใน tile ลงไป 30px จนเลข 2 ใบไม่ตรงแนวกัน → ต้อง reset ที่นี่
   แล้วคืนพื้นที่กดด้วย ::after (ขยายเฉพาะ hit area ไม่กินเลย์เอาต์) ≈ 44px ตามเกณฑ์มือถือ */
.rd-tile .tip-btn {
  flex: 0 0 auto; position: relative;
  min-height: 0; height: 1.1rem; padding: 0;
  font-size: 0.7rem; line-height: 1;
}
.rd-tile .tip-btn::after { content: ""; position: absolute; inset: -13px -14px; }

/* ── ปุ่มกระโดดไปถาม AI (การ์ดจริงอยู่ล่างสุด — ปุ่มนี้เป็นทางลัด) ────────
   soft-green pill ตาม ui-design-system §2 (ห้าม solid fill) */
.rd-ai-jump {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 10px 14px;
  font-family: inherit; font-size: 0.86rem; text-align: left; cursor: pointer;
  background: var(--green-soft); color: var(--green);
  border: 1px solid var(--green); border-radius: 12px;
}
.rd-ai-jump[hidden] { display: none; }
.rd-ai-jump:hover { filter: brightness(0.98); }
.rd-aij-t { flex: 1 1 auto; min-width: 0; }
.rd-aij-t b { font-weight: 700; }
.rd-aij-arrow { flex: 0 0 auto; font-weight: 700; }

/* ── D-AI-TOP: การ์ดถาม AI ย้ายขึ้นมาใต้แถบสรุป (2026-07-29) ──────────────
   การ์ดมีสไตล์ของตัวเองจาก app.html อยู่แล้ว — ที่นี่ปรับแค่ "ระยะห่าง" ให้เข้าชุด
   กับบล็อกอื่นในโหมด rd (เดิม margin-top 22px เพราะเคยเป็นก้อนท้ายสุดของหน้า)
   ไม่มี class .rd-ai-top (flag OFF) = สไตล์เดิมเป๊ะ */
body.rd #daddyAi.rd-ai-top { margin-top: 10px; }

/* ── RD-2: กล่อง 📖 วิธีอ่านหน้านี้ + ส่วนลึกที่พับไว้ ───────────────────── */
.rd-fold {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; margin-top: 10px; overflow: hidden;
}
.rd-fold[hidden] { display: none; }
.rd-fold > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; cursor: pointer;
  font-size: 0.88rem; font-weight: 700; color: var(--ink);
  list-style: none;                     /* ซ่อนสามเหลี่ยมของเบราว์เซอร์ — ใช้ ▸ ของเราแทน */
}
.rd-fold > summary::-webkit-details-marker { display: none; }
.rd-fold > summary:hover { color: var(--green); }
.rd-fold-ic { flex: 0 0 auto; }
.rd-fold-t { flex: 0 0 auto; }
/* peek = ใจความสำคัญบนหัวข้อ → ไม่ต้องกดก็ได้สาระ (หัวใจของทิศ A) */
.rd-fold-peek {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 0.78rem; font-weight: 400; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-fold-chev { flex: 0 0 auto; color: var(--muted); font-size: 0.8rem; transition: transform 0.15s ease; }
.rd-fold[open] > summary > .rd-fold-chev { transform: rotate(90deg); }
.rd-fold[open] > summary { border-bottom: 1px dashed var(--line); }
.rd-fold-body { padding: 12px 14px; }
/* ของเดิมที่ย้ายเข้ามาเป็น "การ์ด" อยู่แล้ว → ซ้อนในการ์ดของ fold = ขอบซ้อนขอบ
   ปรับให้ตัวที่ถูกห่อกลายเป็นเนื้อธรรมดา (การ์ดย่อยข้างใน เช่น .zone-card/.dd-card ไม่กระทบ) */
body.rd .rd-fold-body > * {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
body.rd .rd-fold-body > * + * { margin-top: 12px; }
/* หัวข้ออยู่บน summary แล้ว — ไม่ต้องซ้ำข้างใน (คงป้าย "อัปเดตเมื่อ" ไว้) */
body.rd .rd-fold-body .dd-sec-title,
body.rd .rd-fold-body > .guide-box > h2 { display: none; }
body.rd .rd-fold-body .dd-sec-head { margin: 0 0 6px; padding: 0; border-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .rd-fold-chev { transition: none; } }

/* ── มือถือ: แถบสรุปเรียงลง ไม่ให้อะไรโดนตัด (§6.5) ─────────────────────── */
@media (max-width: 640px) {
  .rd-verdict { grid-template-columns: 1fr; gap: 10px; padding: 12px 13px; }
  .rd-div { display: none; }
  .rd-score { text-align: left; }
  .rd-gauge { max-width: 220px; }
  .rd-facts { gap: 8px 16px; font-size: 0.8rem; }
  .rd-f { white-space: normal; }
  /* จอแคบ: peek ยาวไปเบียดหัวข้อ → ตกลงบรรทัดใหม่ ชิดซ้าย อ่านง่ายกว่าโดนตัดกลางคำ */
  .rd-fold > summary { flex-wrap: wrap; padding: 10px 12px; }
  .rd-fold-peek { flex: 1 0 100%; order: 3; text-align: left; white-space: normal; margin-top: 2px; }
  .rd-fold-chev { margin-left: auto; }
  .rd-fold-body { padding: 11px 12px; }
}

/* ── D-RD-TABS: แถบแท็บย่อย 4 มุมมอง (owner เคาะ 2026-08-22) ────────────────
   pill แบบเดียวกับ .sh-subtab ของหัวหน้า แต่ scoped .rd-* (ไม่พึ่ง stage-engine.css)
   active = soft-green ตาม ui-design-system §2 (ห้าม solid fill) */
.rd-tabs {
  display: flex; gap: 8px; margin: 12px 0 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rd-tabs::-webkit-scrollbar { display: none; }
.rd-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  text-decoration: none;                  /* แท็บลิงก์ (RAY) เป็น <a> — ไม่เอาขีดเส้นใต้ */
}
.rd-tab[hidden] { display: none; }
/* ⚠️ styles.css:356 มี `button:hover { background: var(--green-mid) }` (specificity 0,1,1
   ชนะ .rd-tab เฉยๆ) — บนมือถือ tap ค้าง :hover ไว้ = แท็บกลายเป็นเขียวทึบอ่านไม่ออก
   → กฎ hover ที่นี่ต้องประกาศ background เองเสมอ (ไฟล์นี้โหลดทีหลัง ชนะตอน specificity เท่ากัน) */
.rd-tab:hover { border-color: var(--green); color: var(--green); background: var(--panel); }
.rd-tab-active { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.rd-tab-active:hover { background: var(--green-soft); }
/* pane สลับเนื้อหา — display คุมด้วยคลาสเสมอ (ไม่ใช้ [hidden] เพราะ JS toggle คลาสอย่างเดียว) */
.rd-pane { display: none; }
.rd-pane-active { display: block; }
/* แผง Stage/Elliott/ถาม AI เดิมออกแบบมาเป็นบล็อกท้ายหน้า (มี margin ของตัวเอง) —
   ในแท็บให้ระยะบนเท่าๆ กันทุก pane */
.rd-pane > .dd-section, .rd-pane > .daddy-ai { margin-top: 12px; }

/* จอแคบ: 4 แท็บแบ่งความกว้างเท่ากันให้พอดีจอเสมอ — ขนาดปกติล้นขอบแล้วแท็บ 🤖 RAY
   หลุดจอ (แท็บที่มองไม่เห็น = ไม่มีใครรู้ว่ามี ผิดโจทย์ของงานนี้เอง วัดจริง 390px 08-22)
   ⚠️ block นี้ต้องอยู่ **หลัง** กฎฐาน .rd-tab — specificity เท่ากัน ตัวหลังชนะ */
@media (max-width: 640px) {
  .rd-tabs { gap: 5px; }
  .rd-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 4px; font-size: 0.76rem; }
}

/* โหมด ?chartonly=1 (ภาพแชร์) — โชว์เฉพาะกราฟเหมือนเดิม (กราฟอยู่ใน pane แนวรับ-ต้าน) */
html.is-chartonly .rd-verdict,
html.is-chartonly .rd-tiles,
html.is-chartonly .rd-tabs,
html.is-chartonly .rd-fold { display: none !important; }
html.is-chartonly #rdPane-sr { display: block !important; }

/* ── 🧰 โซนเครื่องมือท้ายบล็อกข้อมูลหุ้น (owner เคาะ 08-23) ────────────────────
   ของ 3 ชิ้นที่ "ไม่ใช่ข้อมูลของหุ้นตัวนี้" ถูกยกมารวมไว้ที่เดียวใต้ tiles:
     · ปุ่ม Sector Rotation (ลิงก์ออกไปหน้าทุนใหญ่)
     · ช่วงกราฟ (select ที่คุมความยาวกราฟ)
     · การ์ดหนังสือ ☕
   เดิมทั้ง 3 ชิ้นกระจายอยู่ในแผงซ้าย ซึ่งบนมือถือแปลว่า "หล่นไปท้ายหน้าคนละที่"
   ⚠️ ย้าย node จริง (ไม่ clone) — id/handler เดิมอยู่ครบ · ?redesign=0 = อยู่ที่เดิมเป๊ะ */
.rd-tools { margin: 14px 0 0; }
.rd-tools-row {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ปุ่ม | ช่วงกราฟ */
  gap: 8px;
  align-items: end;                 /* ก้นเสมอกัน — ป้าย "ช่วงกราฟ" ลอยเหนือ select ตัวเดียว
                                       (ถ้า stretch ปุ่มจะสูงกว่าเพราะไม่มีป้ายของตัวเอง = ดูเบี้ยว) */
  margin-bottom: 10px;
}
.rd-tools-row .sector-link { margin: 0; }
.rd-tools-row .setting-grid { margin: 0; gap: 0; }
.rd-tools-row .setting-grid label { gap: 4px; font-size: .72rem; color: var(--muted); }
.rd-tools-row .setting-grid select { min-height: 42px; }
.rd-tools .sector-link { min-height: 42px; height: 42px; }
/* จอแคบมาก: 2 ช่องข้างกันเริ่มบีบตัวหนังสือ → ยอมเรียงลง */
@media (max-width: 380px) {
  .rd-tools-row { grid-template-columns: 1fr; }
}