/* ══════════════════════════════════════════════════════════════════════════
   檔案室動線 —— 全站每頁串連三位司命
   ══════════════════════════════════════════════════════════════════════════

   ⚠️ 呢個檔係**唯一一份**。server-render 頁由 api/archive_room.py 讀返嚟
   inline（886 條 SEO URL 唔想多一個 request 拖 LCP），靜態 HTML 頁用
   <link rel="stylesheet">。改呢度 = 兩邊一齊改。

   紅線（CHARACTER_STYLE_BIBLE.md 第一條）：唔准通靈型。
   所有互動限於「查冊」動作 —— 抬頭望你、遞卷宗、蓋印。
   冇任何嘢會「感應到你」。

   對比度：房間主色只用嚟畫線、點、光暈同大字（≥18px 只需 3:1）。
   小字一律行 --text / --dim。紅線司 #a8465a 喺 #f7f3ec 上面得 4.81:1，
   只高出門檻 0.31 —— 冇餘裕做小字，所以整套系統索性唔用佢做小字色。
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --room-accent:#7d6119;
  --room-accent-t:#7d6119;   /* 文字版預設；每個房間由 server inline 覆寫 */
  /* ⚠️ 檔案室元件用**自己**嘅字色，唔准寫 `var(--dim)` 食宿主頁嗰個。
     實測踩過：/terms 自己定義咗 --dim:#7a7090（紫灰），我個 rail 一
     繼承就跌到 3.59:1 —— 而同一個 rail 喺 server-render 頁量到 5.87:1。
     即係話「元件過唔過對比度」變成由佢落喺邊一頁決定，而你只會喺
     **啱啱好去驗嗰頁**先發現。元件要自己保證對比度。
     取值比 4.5 高一大截係因為房間色溫層會令實際背景浮動，
     像素實測值一定低過純色計算值（實測差 ~0.6）。 */
  --rr-text:#2e2822;                       /* v3 淺底：13.16:1 起 */
  --rr-dim:#5f574c;                        /* v3 淺底：#f7f3ec 上 6.43:1、#fff 上 7.11:1 */
  --rr-ease:cubic-bezier(.22,.61,.36,1);   /* ease-out-quart，同 api/motion.py 一致 */
  --rr-anchor-w:168px;
  --rr-col:760px;                          /* .wrap 內容欄闊度 */
}

/* ── 房間色溫 ──────────────────────────────────────────────────────────────
   兩層：① 房間主色由頁頂灑落嚟嘅燈光 ② 佢自己嗰間檔案室（用返角色圖
   本身 blur 到淨返光同色）。大堂冇 --room-art，第二層自動唔出。

   用獨立元素而唔係 body::before —— 呢個站幾個 shell 各自有 body 偽元素，
   搶位就會靜靜雞蓋走對方。 */
.room-tint{
  position:fixed;inset:0 0 auto 0;height:min(52vh,440px);
  pointer-events:none;z-index:0;
}
.room-tint::before,
.room-tint::after{content:"";position:absolute;inset:0}
.room-tint::before{
  background:radial-gradient(115% 88% at 50% -18%,
    color-mix(in srgb,var(--room-accent) 15%,transparent),transparent 68%);
}
.room-tint::after{
  background-image:var(--room-art,none);
  background-size:cover;background-position:50% 28%;
  filter:blur(46px) saturate(.45) brightness(.42);
  opacity:.34;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
}
/* 內容要企喺色溫上面 */
.wrap,main,.topbar,footer,.room-rail{position:relative;z-index:1}

/* ── 卷宗帶 ────────────────────────────────────────────────────────────────
   `檔案室 › ▨ 祿命司 · 運勢與財祿 › 當前頁`
   佢係真 breadcrumb（有導航功能），唔係每段標題上面嗰種裝飾 eyebrow。
   每頁只有一條。 */
.room-rail{
  max-width:var(--rr-col);margin:0 auto;padding:18px 20px 0;
}
.rr-line{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:.76rem;letter-spacing:.04em;color:var(--rr-dim);
  line-height:1.7;
}
.rr-line a{color:var(--rr-dim);text-decoration:none}
.rr-line a:hover{color:var(--gold3,#a8801f);text-decoration:underline}
.rr-sep{color:var(--rr-dim);opacity:.42}
.rr-here{color:var(--rr-text)}

/* 當值司命：細頭像 + 名 + 佢管邊瓣 */
.rr-who{display:inline-flex;align-items:center;gap:7px}
.rr-face{
  width:22px;height:22px;border-radius:6px;object-fit:cover;
  object-position:50% 16%;display:block;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--room-accent) 42%,transparent);
}
/* ⚠️ 唔准用 opacity 調暗小字。實測 .8 opacity 嘅 #5f574c 喺 #f7f3ec 上面
   由 5.87:1 跌到 ~3.9:1，直接穿 4.5 門檻 —— 而 devtools 個 color 值
   照舊顯示 5.87，量錯咗都唔知。要淡就揀實色。 */
.rr-nm{color:var(--rr-text)}
.rr-dm{color:var(--rr-dim)}
.rr-dm::before{content:"·";margin-right:6px;color:var(--room-accent);opacity:.9}

/* 交接提示：hover 一條會轉房嘅連結，帶尾會講邊個接手 */
.rr-tail{
  margin-left:auto;color:var(--rr-dim);font-size:.72rem;
  opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--rr-ease),transform .3s var(--rr-ease);
}
.rr-tail.is-on{opacity:1;transform:none}

/* 髮絲線：載入時由左掃出。呢條線係房間色溫喺版面上唯一一條實色。 */
.rr-hair{
  height:1px;margin-top:10px;transform-origin:left center;
  background:linear-gradient(to right,
    color-mix(in srgb,var(--room-accent) 62%,transparent),
    color-mix(in srgb,var(--room-accent) 10%,transparent) 62%,
    transparent);
}
html[data-motion] .rr-hair{transform:scaleX(0);transition:transform .9s var(--rr-ease) .1s}
html[data-motion] .room-rail.is-in .rr-hair{transform:scaleX(1)}

/* ── 當值錨 ────────────────────────────────────────────────────────────────
   闊螢幕：企喺內容欄左邊嘅留白，跟住你捲。
   窄螢幕：變返內文上方一條橫帶。兩種形態都唔碰任何一頁嘅內容 DOM。 */
.room-anchor{
  --ra-w:96px;
  display:flex;align-items:center;gap:16px;
  max-width:var(--rr-col);margin:22px auto 26px;padding:0 20px;
}
.ra-frame{
  position:relative;flex:0 0 auto;width:var(--ra-w);
  aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--room-accent) 26%,transparent);
  background:var(--card,#ffffff);
}
.ra-frame img{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  display:block;filter:brightness(1) contrast(1);
  transition:object-position .62s var(--rr-ease),
             transform .62s var(--rr-ease),
             filter .5s var(--rr-ease);
}
/* 燈：主色由上方斜落嚟勾邊。唔係 glow，係打喺佢身上嗰盞燈。 */
.ra-rim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(198deg,
    color-mix(in srgb,var(--room-accent) 30%,transparent) 0%,
    transparent 42%);
  opacity:.5;transition:opacity .5s var(--rr-ease);
}
.ra-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.ra-duty{
  font-size:.68rem;letter-spacing:.12em;color:var(--rr-dim);
}
.ra-nm{
  /* ⚠️ 用 --room-accent-t（深化版）唔用 --room-accent（粉彩）。
     粉彩喺 v3 淺底得 1.54:1 —— 個名等於冇顯示過（2026-08-24 實測）。 */
  font-size:1.12rem;line-height:1.35;
  color:var(--room-accent-t,var(--rr-text));
  letter-spacing:.06em;
}
.ra-dm{font-size:.76rem;color:var(--rr-text)}
/* 道具句：佢而家喺度做緊乜。永遠出 —— 之前設計成 hover 先出，
   結果闊版嗰條橫帶右邊吊住一大片空白，而且觸控裝置永遠見唔到。 */
.ra-prop{
  font-size:.74rem;color:var(--rr-dim);line-height:1.7;margin-top:2px;
  max-width:38ch;
}
/* 台詞：hover／focus 先出。呢句係佢自己講嘅嘢，唔係狀態描述，
   所以當「行埋去問佢」先出係啱嘅。觸控裝置一律照出（見下面 hover:none）。 */
.ra-line{
  font-size:.76rem;color:var(--rr-text);line-height:1.75;
  max-width:38ch;margin-top:6px;
  opacity:0;transform:translateY(4px);
  transition:opacity .45s var(--rr-ease),transform .45s var(--rr-ease);
}

/* 抬頭望你 —— 唯一嘅「反應」，而且係物理動作唔係感應：
   鏡頭裁切上移（面入返框）、微微前傾、燈亮返。 */
.room-anchor:hover .ra-frame img,
.room-anchor:focus-within .ra-frame img{
  object-position:50% 9%;transform:scale(1.045);
  filter:brightness(1.1) contrast(1.04);
}
.room-anchor:hover .ra-rim,
.room-anchor:focus-within .ra-rim{opacity:.92}
.room-anchor:hover .ra-line,
.room-anchor:focus-within .ra-line{opacity:1;transform:none}

/* 冇 hover 嘅裝置（觸控）永遠顯示道具句 —— 唔好留一段淨係桌機睇到嘅文字 */
@media (hover:none){
  .ra-line{opacity:1;transform:none}
}

/* 闊螢幕：脫離文流，企喺左邊留白。
   760 內容 + 32 間距 + 168 錨 = 半邊至少要 580px → 視窗 ≥1240px 先夠位。 */
@media (min-width:1240px){
  body:not([data-room-inline]) .room-anchor{
    position:fixed;top:132px;z-index:2;
    right:calc(50% + (var(--rr-col) / 2) + 34px);
    width:var(--rr-anchor-w);max-width:none;margin:0;padding:0;
    flex-direction:column;align-items:flex-start;gap:12px;
    --ra-w:var(--rr-anchor-w);
  }
  body:not([data-room-inline]) .ra-prop,
  body:not([data-room-inline]) .ra-line{max-width:var(--rr-anchor-w)}
}

/* 置中版面（登記處呢類「行埋去枱前」嘅頁）：司命企正中，唔好左貼。
   ⚠️ 呢啲頁嘅內容欄得 ~390px，用返 760px 靠左嘅橫帶會令佢企咗喺
   內容左邊之外，睇落似兩件唔相干嘅嘢。 */
body[data-room-center] .room-anchor{
  flex-direction:column;align-items:center;text-align:center;
  max-width:420px;gap:14px;margin:10px auto 30px;--ra-w:104px;
}
body[data-room-center] .ra-meta{align-items:center}
body[data-room-center] .ra-prop,
body[data-room-center] .ra-line{max-width:32ch}

@media (max-width:520px){
  .room-anchor{--ra-w:78px;gap:13px}
  .ra-nm{font-size:1rem}
  .ra-prop{font-size:.72rem}
}

/* ── 蓋印 ──────────────────────────────────────────────────────────────────
   主要 CTA 撳落去 = 印章蓋落張紙，唔係一般 button hover。
   墨暈由撳中嗰點散開（JS 落 --sx/--sy）。 */
.stamp{position:relative;overflow:hidden;isolation:isolate}
.stamp::after{
  content:"";position:absolute;z-index:-1;
  left:var(--sx,50%);top:var(--sy,50%);width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--room-accent) 55%,transparent),transparent 70%);
  opacity:0;transform:scale(1);
}
.stamp.is-stamped::after{animation:rr-ink .58s var(--rr-ease) forwards}
@keyframes rr-ink{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(16)}
}
.stamp:active{transform:translateY(1px) scale(.988)}

/* ── 換房 ──────────────────────────────────────────────────────────────────
   跨頁導航交叉溶接。支援嘅瀏覽器先有，其他一律照舊硬切。 */
@view-transition{navigation:auto}

/* ── 唔郁模式 ──────────────────────────────────────────────────────────────
   唔係「淡啲」，係完全唔郁（同 api/motion.py 同一個標準）。 */
@media (prefers-reduced-motion:reduce){
  .rr-hair,.ra-frame img,.ra-rim,.ra-line,.rr-tail{transition:none !important}
  html[data-motion] .rr-hair{transform:scaleX(1)}
  .ra-line{opacity:1;transform:none}
  .stamp.is-stamped::after{animation:none}
  .stamp:active{transform:none}
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none !important}
}