/* ==========================================================================
   Zhih-Lin Start — Page-specific CSS (2025-09-03)
   - 背景層已移至 main.css
   - Start 專屬：Quick Links、About 對話框、NOW、Toast 等
   ========================================================================== */

/* 0) 共用色票 / 陰影變數（減少重複） */
:root{
  --elev-shadow-sm: 0 4px 12px rgba(0,0,0,.20);
  --elev-shadow-md: 0 6px 18px rgba(0,0,0,.08);
  --elev-shadow-lg: 0 10px 24px rgba(0,0,0,.10);
}

/* ==========================================================================
   1) 微互動（Quick Links 卡片）
   ========================================================================== */
.link-tile {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: var(--elev-shadow-md);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.link-tile:hover {
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.75);
  transform: translateY(-2px);
  box-shadow: var(--elev-shadow-lg);
}

/* ==========================================================================
   2) Logo 投影
   ========================================================================== */
img[alt="ZCreation logo"] { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

/* ==========================================================================
   3) About 對話框
   ========================================================================== */
#aboutDialog::backdrop { background: rgba(0,0,0,0.45); }
@keyframes dialogIn   { from { opacity: 0; transform: scale(.98) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes dialogOut  { from { opacity: 1; transform: scale(1) translateY(0); }   to { opacity: 0; transform: scale(.98) translateY(8px); } }
#aboutDialog[open] { animation: dialogIn .18s ease-out; }
#aboutDialog.closing { animation: dialogOut .14s ease-in forwards; }
#aboutDialog form {
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  overflow: hidden;
}

/* ==========================================================================
   4) NOW 卡片（基底 + Concrete 材質）
   ========================================================================== */
.now-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(0,0,0,0.08);
  box-shadow: var(--elev-shadow-md);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.now-card:hover {
  box-shadow: var(--elev-shadow-lg);
  border-color: rgba(0,0,0,0.14);
}

.now--concrete {
  background: rgba(244, 244, 246, 0.233);
  position: relative;
  overflow: hidden;
}
.now--concrete::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMTYwIDE2MCI+PGZpbHRlciBpZD0ibiI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIuMDM1Ii8+PC9zdmc+");
  background-size: 60px 60px;
  background-repeat: repeat;
  opacity: .2;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.now--concrete::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(0,0,0,0.06));
  mix-blend-mode: soft-light;
  opacity: .7;
  pointer-events: none;
}

/* ==========================================================================
   5) NOW 內容：雙行膠囊（.now-caps / .now-chip）
   ========================================================================== */
.now-caps {
  display: grid;
  gap: .8rem;
}
@media (min-width: 640px) {
  .now-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

.now-chip {
  display: flex; flex-direction: column; gap: .2rem;
  border-radius: 25px;
  padding: .5rem 1rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--elev-shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  font-size: inherit; /* 跟隨容器 text-sm */
}
.now-chip:hover, .now-chip:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.now-chip .t {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.35;
  font-style: italic;
  letter-spacing: .01em;
}
.now-chip .m {
  font-size: 1em;
  line-height: 1.45;
  word-break: break-word; hyphens: auto;
}

/* 高對比：主要 chip 與次要 chip */
.now-chip.is-latest {
  background: rgba(44, 58, 87, 0.95);
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.10);
}
.now-chip.is-latest .m { color: rgba(255,255,255,.9); }

.now-chip.is-else {
  background: rgba(213, 214, 215, 0.822);
  color: rgb(24 24 27);
  border-color: rgba(255,255,255,.30);
}
/* 提高次行對比：zinc-800 近似 */
.now-chip.is-else .m { color: rgb(39 39 42); }

.now-chip:focus-within {
  outline: 2px solid rgba(24,24,27,.18);
  outline-offset: 2px;
}
/* 鍵盤導覽時更友善：只在鍵盤情境顯示 */
.now-chip:focus-visible {
  outline: 2px solid rgba(24,24,27,.24);
  outline-offset: 2px;
}

/* ==========================================================================
   6) 偏好減少動效（Start 專屬元件）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .link-tile { transition: none !important; }
  #aboutDialog[open], #aboutDialog.closing { animation: none !important; }
  .now-card, .now-chip { transition: none !important; }
}

/* ==========================================================================
   7) Toast（輕量提示）
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 10px 14px;
  background: rgba(24,24,27,.96); /* zinc-900 近似 */
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  font-size: 14px;
  line-height: 1.4;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
.toast.hidden {
  display: none;
}