/* ==========================================================================
   TECXIA · GLASS
   玻璃只給三個功能性浮層用：
     A 頂列 .bar          ：常駐的導覽帶／懸浮板
     B 作品詳情 .recpanel ：右側（桌機）／底部（手機）抽出的紀錄面板
     C 聯絡面板 .cpanel   ：在 #contact 原地展開，不是模態
   內容區一律不玻璃、不塞圓角卡片。

   一份配方（規格）：
     玻璃的模糊與飽和：桌機 24px / 手機 12px，飽和 1.4（-webkit- 一起寫）
     inset 0 1px 0 rgba(255,255,255,.22) 邊緣高光
     1px 外框 rgba(255,255,255,.10)
     極淡折射光暈（一個模糊的實色圓，不是漸層）
     明暗兩張紙自動切換：顏色全部來自 tokens.css
     瀏覽器不支援這個屬性時，退回不透明面
     玻璃自帶 scrim（--glass 自帶 .84/.82 的底色）：
       light 最壞情況（後面壓著遮罩過的深色內容）實測 15.4:1，paper 上 16.2:1
       dark  實測 17.7:1，都遠高於 4.5:1
   ========================================================================== */

/* ── 材質 ─────────────────────────────────────────────────────────── */
.glass{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  isolation:isolate;
}
/* 不支援時：退回不透明面，文字對比與版面完全不變 */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){ /* taste-skill-ignore: 這是玻璃的降級條件，屬性名本身必須出現才偵測得到 */
  .glass{background:var(--paper)}
}
/* 折射光暈：一個模糊的實色圓。緩慢移動＝玻璃後面的光在動。 */
.glass::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:4%;top:-48%;width:46%;height:196%;border-radius:50%;
  background:var(--glass-sheen);filter:blur(34px);opacity:.85;
  translate:calc(var(--barp,0) * 120%) 0;
}
/* 外框與邊緣高光：畫在偽元素上，所以它可以只屬於玻璃，不會變成內容的框 */
.glass::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  outline:1px solid var(--glass-line);outline-offset:-1px;
  box-shadow:inset 0 1px 0 var(--glass-hi); /* taste-skill-ignore: 玻璃規格指定的邊緣高光（inset 0 1px 0 rgba(255,255,255,.22)），不是內容卡片的陰影 */
}
/* 真的浮在內容之上的兩層（頂列、詳情面板）才加落影：玻璃要有一個落點。
   內容區與內嵌的聯絡面板不加，所以站上沒有「卡片陰影」。 */
.bar::after{
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-drop); /* taste-skill-ignore: 浮層（sticky 頂列）的落影，規則本身允許浮層有影子，內容元素沒有 */
}
.recpanel::after{
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-drop); /* taste-skill-ignore: 同上，這是 role="dialog" 的浮層 */
}
.glass > *{position:relative;z-index:1}

/* ══ A. 頂列 ════════════════════════════════════════════════════════
   手機（<=859px）：貼齊頂部與兩側的帶狀，12px 模糊。
   桌機（>=860px） ：離邊 12px 的懸浮玻璃板，24px 模糊，圓角 14px
                    （<16 才不會被讀成膠囊導覽）。兩者共用同一組偽元素。 */
.bar{
  position:fixed;left:0;right:0;top:0;z-index:60;   /* 手機：貼齊的帶狀 */
  min-height:calc(var(--bar-h) + var(--sat));
  padding:var(--sat) max(var(--pad),var(--sal)) 0 max(var(--pad),var(--sar));
  display:flex;flex-direction:column;justify-content:center;
  transition:min-height var(--dur-2) var(--ease-out);
}
.bar-in{
  width:100%;display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  min-height:calc(var(--bar-h) - var(--sat));
}
.bar .lockup{
  font-size:var(--fs-m);letter-spacing:-.01em;
  min-height:var(--tap);align-items:center;flex:none;
}
.bar .lk-mark{width:1.5em;height:1.5em;margin-right:.55em}
/* 「你在哪裡」：捲動時由 nav.js 依區塊改寫，是導覽的一部分，不是 eyebrow */
.bar-chapter{
  display:none;font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-3);
  overflow:hidden;white-space:nowrap;
}
.nav{display:none;gap:clamp(16px,2vw,30px)}
.nav a{
  display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:var(--tap);min-width:var(--tap);
  font-size:var(--fs-b);color:var(--ink-2);
  transition:color var(--dur-1) var(--ease-out);
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--ink)}
.tools{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:none}
.thm,.lang,.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--tap);min-width:var(--tap);padding:0 clamp(8px,1vw,14px);
  font-size:var(--fs-m);color:var(--ink-2);border-radius:var(--r-1);
  transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);
}
/* 兩顆純圖示鈕：正方形、44×44、裡面沒有文字節點。
   狀態對外只走 aria-label / title / aria-pressed（見 js/theme.js、js/i18n.js）。 */
.thm,.lang{width:var(--tap);height:var(--tap);padding:0}
.ico{
  width:20px;height:20px;flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* 主題鈕：圖示＝現在這張紙（淺色顯太陽、深色顯月亮），與 aria-pressed、title 同一個意思。
   由 data-theme 決定，不靠腳本換。 */
.ico-moon{display:none}
:root[data-theme="dark"] .ico-moon{display:block}
:root[data-theme="dark"] .ico-sun{display:none}
.thm:hover,.lang:hover,.menu-btn:hover,.thm[aria-pressed="true"]{color:var(--ink);background:var(--field)}
/* 手機：選單在玻璃帶裡原地展開（不是模態、不鎖捲動） */
.menu{display:grid;grid-template-rows:0fr;visibility:hidden;width:100%;
  transition:grid-template-rows var(--dur-2) var(--ease-io),visibility var(--dur-2)}
.menu[data-open]{grid-template-rows:1fr;visibility:visible}
.menu-in{overflow:hidden}
.menu-nav{display:grid;padding-bottom:var(--sp-3)}
.menu-nav a{
  display:flex;align-items:center;min-height:var(--tap);
  font-size:var(--fs-b);color:var(--ink-2);
}
.menu-nav a:hover{color:var(--ink)}

@media (min-width:860px){
  /* 玻璃板往左右邊界各懸 16px，內容因此與頁面的欄位線完全對齊 */
  .bar{
    left:calc(max(var(--pad),var(--sal)) - 16px);right:calc(max(var(--pad),var(--sar)) - 16px);
    top:calc(12px - var(--barp,0) * 6px);
    min-height:0;border-radius:14px;
    padding:0 16px;
    transition:top var(--dur-2) var(--ease-out);
  }
  .bar-in{min-height:calc(60px - var(--barp,0) * 10px)}
  .menu,.menu-btn{display:none}
}
/* 只有 860-1023px 這個窄桌機區間需要「你在哪裡」：這裡導覽還在選單裡。
   >=1024 導覽本身就攤開，aria-current 已經說明了位置，不再重複一次。 */
@media (min-width:860px) and (max-width:1023px){
  .bar-chapter{display:block;flex:1}
}
@media (min-width:1024px){
  .nav{display:flex}
}
/* 手機沒有 hover，所以頂列的工具按鈕要有常駐的面，不然讀起來像標籤 */
@media (max-width:859px){
  .thm,.lang,.menu-btn{background:color-mix(in oklab,var(--ink) 8%,transparent)}
  .thm:hover,.lang:hover,.menu-btn:hover{background:color-mix(in oklab,var(--ink) 14%,transparent)}
}
@media (max-width:520px){
  .bar .lk-sep,.bar .lk-sub{display:none}
}

/* ══ B. 作品詳情面板（玻璃浮層 2）═════════════════════════════════════
   手機：底部抽屜（88svh）。桌機：右側整高面板。遮罩、ESC、Tab 鎖定、
   關閉後焦點回到觸發它的按鈕，都由 panel.js 負責。 */
.scrim{
  position:fixed;inset:0;z-index:70;background:var(--scrim);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-out),visibility var(--dur-2);
}
.scrim[data-open]{opacity:1;visibility:visible}
.recpanel{
  position:fixed;z-index:80;left:0;right:0;bottom:0;
  max-height:88svh;overflow:auto;overscroll-behavior:contain;
  border-radius:var(--r-2) var(--r-2) 0 0;
  padding:clamp(24px,4vw,36px) clamp(20px,5vw,40px) calc(clamp(32px,5vw,48px) + var(--sab));
  translate:0 102%;visibility:hidden;
  transition:translate var(--dur-3) var(--ease-io),visibility var(--dur-3);
}
.recpanel[data-open]{translate:0 0;visibility:visible}
.rec-h{display:flex;align-items:center;gap:var(--sp-2)}
.rec-app{width:56px;height:56px;flex:none;border-radius:var(--r-1)}
.rec-t{
  font-family:var(--font-d);font-size:var(--fs-h);line-height:var(--lh-h);
  letter-spacing:var(--tr-h);font-weight:500;
  font-variation-settings:"opsz" var(--opsz-h),"wght" 500,"SOFT" 0,"WONK" 0;
}
.rec-x{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);min-width:var(--tap);padding:0 clamp(10px,1.2vw,16px);
  border-radius:var(--r-1);background:var(--field);
  font-size:var(--fs-m);color:var(--ink-2);
  transition:color var(--dur-1) var(--ease-out);
}
.rec-x:hover{color:var(--ink)}
.rec-line{margin-top:var(--sp-3);font-size:var(--fs-l);color:var(--ink)}
.rec-facts{margin-top:clamp(24px,3vw,32px);display:grid;gap:var(--sp-2)}
.rec-facts > div{display:grid;gap:2px}
.rec-facts dt{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-3)}
.rec-facts dd{font-size:var(--fs-b);color:var(--ink-2)}
.rec-foot{margin-top:clamp(24px,3vw,32px);display:grid;gap:var(--sp-2);justify-items:start}
.rec-note{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-3);max-width:44ch}
@media (min-width:860px){
  .recpanel{
    left:auto;top:0;bottom:0;width:min(560px,92vw);max-height:none;
    border-radius:var(--r-2) 0 0 var(--r-2);
    padding:calc(var(--bar-h) + var(--sat) + clamp(16px,2.4vw,32px)) clamp(28px,3.2vw,48px) calc(clamp(32px,4vw,48px) + var(--sab));
    translate:102% 0;
  }
  .rec-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
}

/* ══ C. 聯絡面板（玻璃浮層 3）：在 #contact 原地展開 ══════════════════
   不是模態：不鎖捲動、不搶焦點、關掉只是把它收回去。 */
.cnest{
  display:grid;grid-template-rows:0fr;visibility:hidden;width:100%;
  transition:grid-template-rows var(--dur-3) var(--ease-io),visibility var(--dur-3);
}
/* 開啟詳情面板時頁面不捲（面板本身仍然可以捲） */
.lock{overflow:hidden}
.cnest[data-open]{grid-template-rows:1fr;visibility:visible}
.cnest-in{overflow:hidden;border-radius:var(--r-2)}
.cpanel{padding:clamp(22px,3.4vw,36px);border-radius:var(--r-2)}
.cp-lead{font-size:var(--fs-l);color:var(--ink)}
.cform{margin-top:clamp(20px,2.6vw,28px);display:grid;gap:var(--sp-3)}
.f-grid{display:grid;gap:var(--sp-3)}
.f-field{display:grid;gap:6px}
.f-l{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-2)}
/* 真欄位：框線本來就屬於輸入框（規則讓輸入框保有它自己的線） */
input.f-in,textarea.f-in{
  width:100%;min-height:var(--tap);padding:12px 14px;
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-1);
  color:var(--ink);font-size:var(--fs-b);line-height:var(--lh-m);
  transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);
}
textarea.f-in{min-height:calc(var(--tap) * 2.6);resize:vertical}
input.f-in:focus-visible,textarea.f-in:focus-visible{border-color:var(--accent);outline:2px solid var(--focus);outline-offset:1px}
input.f-in::placeholder,textarea.f-in::placeholder{color:var(--ink-3)}
.f-hp{position:absolute;left:-9999px;width:1px;overflow:hidden}
.cf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.cf-msg{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--ink-2)}
.cf-msg[data-kind="err"]{color:var(--ink)}
.cf-msg[data-kind="ok"]{color:var(--ink)}
.cform[data-busy] button[type="submit"]{opacity:.72}
@media (min-width:860px){
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .cnest{grid-column:1 / -1}
}