/* 儀表板皮膚（提案 C：硬邊 + 位移式實心陰影）
   與提案 A 走完全不同的路線：不用模糊擴散去暗示「離開背景多高」，
   改用一塊不模糊的實心色影往右下偏移，等於把元素當成一片有厚度的板子。
   邊框加粗、圓角收小，質感偏工程儀表與終端機面板。

   互動語意也不同：hover 是把板子往上抬（陰影變長），
   active 是把板子往陰影方向推到底（陰影歸零、元素位移），
   按起來像實體按鍵而不是浮動卡片。

   只在 /preview/panel 掛載，globals.css 不動。 */

.skin-panel {
  /* 實心影：不帶模糊，色相跟著主色轉，才不會在換色後變成一塊死灰 */
  --ink: oklch(0.42 0.04 var(--h) / 0.20);
  --ink-strong: oklch(0.38 0.05 var(--h) / 0.30);
  --p1: 2px 2px 0 var(--ink);
  --p2: 3px 3px 0 var(--ink);
  --p3: 4px 4px 0 var(--ink-strong);
  --p-lift: 5px 5px 0 var(--ink-strong);
  --edge: 1.5px;

  position: relative;
  min-height: 100dvh;
  background: var(--bg);
}

html.theme-dark .skin-panel {
  --ink: oklch(0 0 0 / 0.45);
  --ink-strong: oklch(0 0 0 / 0.60);
}

/* 圓角統一收小：板子感來自直角與厚邊，圓角一大就變回卡片 */
.skin-panel .news-card,
.skin-panel .search-box,
.skin-panel .site-list,
.skin-panel .st-legend,
.skin-panel .more-btn,
.skin-panel .icon-btn,
.skin-panel .go,
.skin-panel .pal-pop,
.skin-panel .search-field input {
  border-radius: 3px;
}

/* 站點圖示跟著收圓角，5px 在這套硬邊語言裡會顯得軟 */
.skin-panel .s-ico {
  border-radius: 3px;
  border-width: var(--edge);
  border-color: var(--line-strong);
}

/* ---------- 頁首 ---------- */

.skin-panel .site-head {
  background: var(--surface);
  backdrop-filter: none;
  border-bottom: var(--edge) solid var(--line-strong);
  box-shadow: 0 2px 0 var(--ink);
}

.skin-panel .brand-mark {
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink-strong);
}

.skin-panel .icon-btn {
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p1);
  transition: box-shadow 0.12s steps(2, end), transform 0.12s steps(2, end);
}

.skin-panel .icon-btn:hover {
  box-shadow: var(--p2);
  transform: translate(-1px, -1px);
}

/* 按下去把板子推進陰影裡：位移量剛好吃掉陰影長度 */
.skin-panel .icon-btn:active,
.skin-panel .more-btn:active,
.skin-panel .go:active,
.skin-panel .chip:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(2px, 2px);
}

/* ---------- 區段標題 ---------- */

/* 標題改成一組刻度式標記：短粗色塊 + 全大寫編號感的細線，偏儀表板讀法 */
.skin-panel .sec-head {
  align-items: center;
  border-bottom: var(--edge) solid var(--line-strong);
}

.skin-panel .sec-head h2 {
  position: relative;
  padding-left: 14px;
}

.skin-panel .sec-head h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.26em;
  width: 5px;
  background: var(--accent);
  box-shadow: 2px 2px 0 var(--ink);
}

.skin-panel .sec-head .count {
  border: var(--edge) solid var(--line-strong);
  border-radius: 3px;
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---------- 狀態圖例 ---------- */

.skin-panel .st-legend {
  background: var(--surface);
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p2);
}

/* 狀態燈改方形，跟整體直角語言一致，並保留一圈實心外環 */
.skin-panel .dot {
  border-radius: 1px;
  width: 8px;
  height: 8px;
}

.skin-panel .dot.ok {
  box-shadow: 0 0 0 2px oklch(from var(--ok) l c h / 0.22);
}

.skin-panel .dot.warn {
  box-shadow: 0 0 0 2px oklch(from var(--warn) l c h / 0.24);
}

.skin-panel .dot.down {
  box-shadow: 0 0 0 2px oklch(from var(--down) l c h / 0.24);
}

/* ---------- 公告卡 ---------- */

.skin-panel .news-card {
  background: var(--surface);
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p2);
  transition: box-shadow 0.12s steps(2, end), transform 0.12s steps(2, end);
}

.skin-panel .news-card:hover {
  box-shadow: var(--p-lift);
  transform: translate(-2px, -2px);
  border-color: var(--accent);
}

.skin-panel .kind {
  border-radius: 2px;
  border-width: var(--edge);
}

/* ---------- 搜尋 ---------- */

.skin-panel .search-box {
  background: var(--surface);
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p3);
}

/* 輸入框做成嵌進面板的凹槽：邊框加粗、影子往內反向偏移 */
.skin-panel .search-field input {
  border: var(--edge) solid var(--line-strong);
  box-shadow: inset 2px 2px 0 var(--ink);
}

.skin-panel .search-field input:focus {
  border-color: var(--accent);
  box-shadow: inset 2px 2px 0 var(--ink), 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
}

.skin-panel .chip {
  border-radius: 3px;
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p1);
  transition: box-shadow 0.12s steps(2, end), transform 0.12s steps(2, end);
}

.skin-panel .chip:hover {
  box-shadow: var(--p2);
  transform: translate(-1px, -1px);
}

/* 選中的膠囊維持被按進去的狀態，不再有陰影，一眼看出哪些條件生效中 */
.skin-panel .chip[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--ink);
  transform: translate(2px, 2px);
}

.skin-panel .sorts button[aria-pressed='true'] {
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p1);
}

.skin-panel .pal-pop {
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p3);
}

.skin-panel .swatch {
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---------- 站點清單 ---------- */

.skin-panel .site-list {
  background: var(--surface);
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p3);
}

.skin-panel .list-head {
  background: var(--surface-2);
  border-bottom: var(--edge) solid var(--line-strong);
  text-transform: none;
}

/* 滑過的列不浮起，改成左緣一條粗色軌 + 底色換檔，像儀表板的選取列 */
.skin-panel .list-body > li {
  transition: background 0.1s steps(2, end), box-shadow 0.1s steps(2, end);
}

.skin-panel .list-body > li:hover {
  background: var(--surface-2);
  box-shadow: inset 4px 0 0 var(--accent);
}

.skin-panel .tag {
  border-radius: 2px;
  border: 1px solid var(--line-strong);
}

.skin-panel .mdl-panel {
  margin: 0 -14px;
  padding: 10px 14px 14px;
  background: var(--surface-2);
  box-shadow: inset 0 2px 0 var(--ink);
}

.skin-panel .go {
  border: var(--edge) solid oklch(from var(--accent) calc(l - 0.12) c h);
  box-shadow: var(--p1);
  transition: box-shadow 0.12s steps(2, end), transform 0.12s steps(2, end);
}

.skin-panel .go:hover {
  box-shadow: var(--p2);
  transform: translate(-1px, -1px);
}

.skin-panel .more-btn {
  border: var(--edge) solid var(--line-strong);
  box-shadow: var(--p1);
  transition: box-shadow 0.12s steps(2, end), transform 0.12s steps(2, end);
}

.skin-panel .more-btn:hover {
  box-shadow: var(--p2);
  transform: translate(-1px, -1px);
}

/* ---------- 頁尾 ---------- */

.skin-panel .site-foot {
  background: var(--surface);
  border-top: var(--edge) solid var(--line-strong);
  box-shadow: inset 0 2px 0 var(--ink);
}

/* ---------- 手機 ---------- */

@media (max-width: 720px) {
  /* 橫向捲動容器會裁掉往右的實心影，改成只留下方一道 */
  .skin-panel .news-card,
  .skin-panel .news-card:hover {
    transform: none;
    box-shadow: 0 2px 0 var(--ink);
  }

  .skin-panel .mdl-panel {
    margin: 0 -12px;
    padding: 8px 12px 10px;
  }

  /* 位移式陰影在窄螢幕容易貼邊，清單與搜尋框收成貼身一道 */
  .skin-panel .site-list,
  .skin-panel .search-box {
    box-shadow: 0 3px 0 var(--ink);
  }
}

/* ---------- 無障礙 ---------- */

@media (prefers-reduced-motion: reduce) {
  .skin-panel * {
    transition-duration: 0.01ms !important;
  }

  .skin-panel .news-card:hover,
  .skin-panel .go:hover,
  .skin-panel .icon-btn:hover,
  .skin-panel .chip:hover,
  .skin-panel .more-btn:hover {
    transform: none;
  }
}