/*
 * 不經過 Tailwind 的全站樣式（Propshaft 直接送出）。
 * Tailwind 的設定和色票在 app/assets/tailwind/application.css。
 */

/* ── 開店引導閃一下提醒：第 2 步切換分外場、內場後每一班的人數區（setup_shifts_controller）、
      第 4 步還沒選站位就按下一步，沒選的那幾列（setup_roles_controller）── */
@keyframes setup-flash {
  0%, 45% { background-color: #FFD9BF; box-shadow: 0 0 0 8px #FFD9BF; }
  100%    { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}
.setup-flash {
  border-radius: 10px;
  animation: setup-flash 2s ease-out;
}

/* ── 週班表的排人清單（shifts/_week）：桌機開在右邊 420px；畫面夠寬（≥1280px）時把班表往左推，七天都還看得到、可以直接點別班 ── */
@media (min-width: 1280px) {
  body:has(#assign-sheet:not([hidden])) #app-main { margin-right: 420px; }
}

/* ── 排班指南的內文（guides/*）：長文章的標題、段落、清單、表格間距；顏色用 Tailwind @theme 的變數 ── */
.guide-body { display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.85; }
.guide-body h2 { margin-top: 18px; font-size: 22px; line-height: 1.4; font-weight: 900; text-wrap: balance; }
.guide-body h3 { margin-top: 6px; font-size: 18px; line-height: 1.45; font-weight: 800; }
.guide-body ul, .guide-body ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: 8px; }
.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }
.guide-body li::marker { color: var(--color-sub); }
.guide-body a { font-weight: 700; color: var(--color-flame-ink); text-decoration: underline; text-underline-offset: 3px; }
.guide-body small { font-size: 14px; color: var(--color-sub); }
.guide-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.guide-body th, .guide-body td { padding: 10px 8px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.guide-body thead th { font-size: 14px; color: var(--color-sub); font-weight: 700; }
.guide-key { background: var(--color-flame-tint); border-radius: 18px; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .guide-key { padding: 18px 22px; } }
.guide-key > p:first-child { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--color-flame-ink); }