/* ══════════════════════════════════════════════════════════════════════════
   ray-portfolio.css — หน้า "พอร์ตทดลองของ RAY" (Phase 3)
   page-scoped ทั้งหมด — ห้ามเพิ่มอะไรใน styles.css (§1.1)
   ⚠️ ต่างจากหน้า /ray ตรงที่ **ไม่บังคับ dark** — หน้านี้เป็นหน้าอ่านข้อมูล
      ใช้ token ของเว็บหลัก (--panel/--ink/--line) จึงตามธีมที่ user เลือกเอง
   ────────────────────────────────────────────────────────────────────────── */

.rp-state { display: grid; gap: 12px; padding: 4px 0 20px; }
/* 🔴 element ที่ CSS ตั้ง display เองต้องมีคู่ [hidden] เสมอ (ui-design-system §7.4) —
   ไม่งั้น attribute hidden แพ้ display:grid ⇒ skeleton ค้างบนหัวหน้าตลอด (เจอจริง 08-26
   ระหว่างทำ RAY Hub — เป็นบั๊กเดิมบน production มาก่อนหน้านี้ด้วย) */
.rp-state[hidden] { display: none; }
.rp-skel { height: 74px; border-radius: 12px; background: var(--paper);
           animation: rpPulse 1.4s ease-in-out infinite; }
.rp-skel-hero { height: 120px; }
@keyframes rpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .rp-skel { animation: none; } }

.rp-msg { text-align: center; padding: 40px 20px; color: var(--ink-secondary); line-height: 1.7; }
.rp-msg h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.05rem; }
.rp-msg .rp-cta { display: inline-block; margin-top: 14px; padding: 10px 20px; border-radius: 999px;
                  background: var(--brand); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; }

/* ── หัวเรื่อง ─────────────────────────────────────────────────────────── */
.rp-intro { display: flex; align-items: center; gap: 14px; padding: 6px 0 16px; }
/* RAY Hub hero (08-26): เรย์ตัวเป็นๆ (RayMoji เต็มตัว + ambient acts) แทน badge จิ๋วเดิม
   overflow visible — ท่ากระโดด/หมุนของเรย์ต้องไม่โดนวงกลมตัด
   🔴 ใช้ #rpMoji (id) ไม่ใช่ .rp-moji เพราะ ray-moji.js ฉีด `.ray-moji{width:100%}` ตอน runtime
   (มาทีหลัง = ชนะ class) — เจอจริง: เรย์บวมเป็น 1232px ดันทั้งหน้าเพี้ยน (verify 08-26) */
#rpMoji { width: 84px; height: 84px; flex-shrink: 0; border-radius: 999px;
          background: #020a0d; display: flex; align-items: center; justify-content: center;
          padding: 4px; overflow: visible; }
.rp-greet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rp-greet-line { font-size: .8rem; color: var(--ink-secondary); }
.rp-greet-line b { color: var(--ink); }
.rp-chat-cta { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700;
               color: #0E1513; background: #3FD6A6; border-radius: 999px; padding: 5px 14px;
               text-decoration: none; white-space: nowrap; }
.rp-chat-cta:hover { filter: brightness(1.06); }

/* 🔒 มุมมอง free (worker ตัดเนื้อมาแล้ว — ที่นี่แค่เล่า) */
.rp-lockbar { display: block; font-size: .78rem; font-weight: 600; color: var(--ink);
              background: color-mix(in srgb, var(--panel) 82%, #3FD6A6 18%);
              border: 1px dashed var(--line); border-radius: 10px;
              padding: 9px 12px; margin-bottom: 8px; text-decoration: none; line-height: 1.55; }
.rp-lockbar:hover { border-color: #3FD6A6; }
/* 🔒 การ์ดไม้ที่ยังปิด (08-27) — เบลอ "ข้อความปลอม" ที่ ray-portfolio.js สร้างขึ้น
   ของจริงไม่เคยถูกส่งมาถึงเบราว์เซอร์ (worker mask ให้แล้ว) ⇒ เบลอนี่คือภาษาภาพล้วนๆ */
.rp-pos-locked { position: relative; opacity: .9; }
.rp-pos-locked .rp-blur {
  filter: blur(4.5px);
  user-select: none; -webkit-user-select: none; pointer-events: none;
  color: var(--ink-secondary);
}
.rp-lock-chip {
  position: absolute; right: 12px; bottom: 10px;
  font-size: .68rem; font-weight: 700; color: var(--ink-secondary);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px;
}
.rp-sym-locked { letter-spacing: 0; font-size: .8rem; color: var(--ink-secondary); }
.rp-intro-txt h2 { margin: 0 0 4px; font-size: 1.12rem; color: var(--ink); }
.rp-intro-txt p { margin: 0; font-size: .82rem; color: var(--ink-secondary); line-height: 1.6; }

/* ── ตัวเลขสรุป ────────────────────────────────────────────────────────── */
.rp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.rp-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
           padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.rp-tile-k { font-size: .62rem; color: var(--ink-muted); }
.rp-tile-v { font-size: 1rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-tile-s { font-size: .68rem; color: var(--ink-secondary); }
.rp-up { color: var(--positive); } .rp-down { color: var(--negative); }

/* ── การ์ดกลาง ─────────────────────────────────────────────────────────── */
.rp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
           padding: 14px; margin-bottom: 14px; }
.rp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rp-card-head h3 { margin: 0; font-size: .84rem; font-weight: 700; color: var(--ink); }
.rp-sub { font-size: .62rem; color: var(--ink-muted); }

/* กราฟ — SVG ล้วน ไม่มี lib */
.rp-chart { width: 100%; }
.rp-chart svg { display: block; width: 100%; height: auto; }
.rp-legend { display: flex; gap: 14px; margin-top: 8px; }
.rp-lg { font-size: .68rem; color: var(--ink-secondary); display: inline-flex; align-items: center; gap: 6px; }
.rp-lg::before { content: ""; width: 14px; height: 2.5px; border-radius: 2px; }
.rp-lg-ray::before { background: var(--brand); }
.rp-lg-spy::before { background: var(--ink-muted); }

/* ── พระเอก: รอบก่อนคิดผิดตรงไหน ──────────────────────────────────────── */
.rp-wrong { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); }
.rp-wrong-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--amber); }
.rp-wrong-head h3 { margin: 0; font-size: .82rem; font-weight: 700; color: var(--amber); }
.rp-wrong p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--ink); }

/* ── รายการไม้ ─────────────────────────────────────────────────────────── */
.rp-sec { margin-bottom: 16px; }
.rp-sec-head { font-size: .84rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.rp-count { font-weight: 400; color: var(--ink-muted); font-size: .74rem; }

.rp-pos { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
          padding: 13px 14px; margin-bottom: 10px; }
.rp-pos-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rp-sym { font-size: .98rem; font-weight: 700; color: var(--ink); }
.rp-meta { font-size: .68rem; color: var(--ink-secondary); }
.rp-spacer { flex-grow: 1; }
.rp-pnl { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.rp-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 10px;
           font-size: .8rem; line-height: 1.55; }
/* 08-29: ป้าย "จุดที่ RAY ยอมรับว่า thesis ผิด" ยาวขึ้น 2 เท่า (owner ขอให้อ่านออกว่าหมายถึงอะไร)
   → wrap ให้ข้อความตกบรรทัดใหม่เต็มความกว้างบนจอแคบ แทนที่จะถูกบีบเหลือคอลัมน์ผอม */
.rp-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.rp-tag { flex-shrink: 0; font-size: .63rem; font-weight: 700; border-radius: 6px;
          padding: 2px 8px; white-space: nowrap; }
.rp-tag-why  { color: var(--brand); background: var(--brand-soft); }
.rp-tag-stop { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.rp-tag-ask  { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.rp-row span:last-child { color: var(--ink); }

/* ปุ่มสะพานกลับหน้าแชท — จุดที่ทำให้พอร์ตไม่ใช่รายงานนิ่ง ๆ */
.rp-ask { display: flex; align-items: center; justify-content: center; gap: 8px;
          margin-top: 11px; padding: 9px; border: 1px solid var(--brand); border-radius: 999px;
          color: var(--brand); font-size: .8rem; font-weight: 600; text-decoration: none; }
.rp-ask:hover { background: var(--brand-soft); }
.rp-ask svg { flex-shrink: 0; }
/* ไอคอนเรย์จิ๋วในปุ่ม — .rm-mini ของ ray-moji.js ตั้ง width:100% (ฉีดทีหลังชนะ) ⇒ ต้องล็อกขนาด
   ที่นี่ด้วย selector เจาะจงกว่า ไม่งั้นไอคอนบวมเต็มการ์ด (เจอจริงตอน verify RAY Hub 08-26) */
.rp-ask .rm-mini { width: 18px; height: 18px; }

.rp-stale { font-size: .62rem; color: var(--amber); }
/* บรรทัดต้นทุน "เข้า $x × N หุ้น ≈ $y" — เฉพาะไม้ที่เปิดชื่อ (ไม้ locked ไม่มีข้อมูลนี้มาแต่แรก) */
.rp-entry { margin-top: 4px; font-size: .7rem; color: var(--ink-secondary);
            font-variant-numeric: tabular-nums; }

/* ── บันทึกรอบ ─────────────────────────────────────────────────────────── */
/* 🔴 กับดักเดิมที่เคยโดนแล้วที่ market.css (§inst select) — โดนซ้ำที่นี่ 08-25 (owner เจอบน iPhone)
   styles.css ตั้ง global ไว้ 2 ชั้น:
     `input, select { width: 100% }`  → select ยืดเต็มแถว ดัน h3 ตกบรรทัด
     `select { background-image: <ลูกศร>; background-repeat: no-repeat; ... }`
   ถ้าที่นี่เขียน `background: var(--panel)` แบบ **shorthand** มันรีเซ็ต repeat/position/size
   กลับเป็นค่าเริ่มต้น · แล้ว `[data-theme="dark"] select` (0,1,1) ชนะ `.rp-date` (0,1,0)
   ⇒ ยัดลูกศรกลับมาโดยที่ repeat = repeat ⇒ **ลูกศรปูเต็มกล่องทับตัวหนังสือ — เฉพาะธีมมืด**
   ⇒ ใช้ `background-color` เท่านั้น ห้าม shorthand · และคุมความกว้าง/ความสูงเอง */
.rp-date { font-size: .72rem; padding: 5px 26px 5px 9px; border-radius: 8px;
           width: auto; max-width: 58%; min-height: 0;
           border: 1px solid var(--line); background-color: var(--panel); color: var(--ink);
           background-size: 13px; background-position: right 8px center; }
.rp-market-view { margin: 0 0 12px; font-size: .86rem; line-height: 1.65; color: var(--ink); }

.rp-dec { border-top: 1px dashed var(--line); padding-top: 11px; margin-top: 11px; }
.rp-dec-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rp-act { font-size: .62rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; letter-spacing: .3px; }
.rp-act-buy  { color: #fff; background: var(--positive); }
.rp-act-sell { color: #fff; background: var(--negative); }
.rp-act-add  { color: var(--positive); background: color-mix(in srgb, var(--positive) 14%, transparent); }
.rp-act-trim { color: var(--negative); background: color-mix(in srgb, var(--negative) 14%, transparent); }
.rp-act-hold, .rp-act-watch, .rp-act-drop { color: var(--ink-secondary); background: var(--paper); }
.rp-thesis { margin: 8px 0 0; padding-left: 18px; font-size: .8rem; line-height: 1.6; color: var(--ink); }
.rp-thesis li { margin-bottom: 3px; }
.rp-scores { display: flex; gap: 10px; margin-top: 8px; font-size: .66rem; color: var(--ink-secondary); }
.rp-scores b { color: var(--ink); font-variant-numeric: tabular-nums; }

.rp-full { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.rp-full summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--brand); }
.rp-full-body { margin-top: 10px; font-size: .82rem; line-height: 1.7; color: var(--ink);
                white-space: pre-wrap; word-break: break-word; }

.rp-disclaimer { text-align: center; font-size: .66rem; color: var(--ink-muted);
                 line-height: 1.6; margin: 22px 0 8px; }

@media (min-width: 720px) {
  .rp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-intro-txt h2 { font-size: 1.3rem; }
}

/* 💵 สถานะ "ถือเงินสด 100%" (08-27) — 0 ไม้ ต้องอ่านออกว่าเป็นการตัดสินใจ ไม่ใช่หน้าพัง */
.rp-pos-cash { border-style: dashed; }
.rp-cash-head { font-size: .92rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.rp-cash-note { font-size: .8rem; color: var(--ink-secondary, var(--muted)); line-height: 1.6; margin: 0; }

/* ── 09-02: อ่านหน้านี้ให้ออก (ศัพท์ · กราฟ · จอว่าง) ────────────────────── */

/* ป้ายค่าท้ายเส้นบนกราฟ — อ่านได้โดยไม่ต้อง hover (มือถือ hover ไม่ได้อยู่แล้ว) */
.rp-ax-ray { fill: var(--brand); font-weight: 700; }
.rp-ax-spy { fill: var(--ink-muted); font-weight: 600; }

/* กราฟยังลากไม่ได้ (พอร์ตเพิ่งเริ่ม) — บอกเหตุผล แทนที่จะซ่อนการ์ดทั้งใบเงียบ ๆ */
.rp-chart-empty {
  margin: 0; padding: 26px 14px; text-align: center;
  color: var(--ink-muted); font-size: .8rem; line-height: 1.6;
}

/* สเกลของคะแนน 3 แกน — ต่อท้ายแถวคะแนน ไม่ใช่บรรทัดใหม่ */
.rp-scores { flex-wrap: wrap; align-items: baseline; }
.rp-score-note { color: var(--ink-muted); font-size: .6rem; }

/* บล็อก "อ่านหน้านี้ยังไง" — โทนเดียวกับ .rp-full ที่มีอยู่แล้ว */
.rp-guide {
  margin: 0 0 14px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
}
.rp-guide summary {
  cursor: pointer; font-size: .8rem; font-weight: 600;
  color: var(--brand); list-style: none; user-select: none;
}
.rp-guide summary::-webkit-details-marker { display: none; }
.rp-guide[open] summary { margin-bottom: 8px; }
.rp-guide-body { font-size: .78rem; line-height: 1.6; color: var(--ink-secondary); }
.rp-guide-body p { margin: 0 0 7px; }
.rp-guide-body p:last-child { margin-bottom: 0; }
.rp-guide-body strong { color: var(--ink); font-weight: 700; }