/* ============================================================
   康鏈日照 — 照護端原型
   依 design-care-workflows/SKILL.md 與 design.pen 正式流程 01–06

   色票、字級、框架全部來自 SKILL；此檔為唯一樣式來源。
   ============================================================ */

:root {
    /* ---- 色彩語意（SKILL 表格，不得自行更動） ---- */
    --c-dark:        #073D3B;   /* 深色頂欄／重要導覽 */
    --c-dark-soft:   #0D5A56;   /* 頂欄內識別底 */
    --c-dark-line:   #164F4C;   /* 頂欄內狀態底 */
    --c-primary:     #008C82;   /* 主要操作／選取 */
    --c-primary-ink: #04635C;   /* 主色按下 */
    --c-soft:        #E4F4F1;   /* 淺色選取底 */
    --c-bg:          #F4F7F6;   /* 頁面背景 */
    --c-surface:     #FFFFFF;   /* 卡片背景 */
    --c-ink:         #173B39;   /* 主要文字 */
    --c-muted:       #647D7A;   /* 次要文字 */
    --c-line:        #D7E4E1;   /* 分隔線 */

    --c-danger:      #C93C48;   --c-danger-bg: #FDECEE;
    --c-warn:        #B8750A;   --c-warn-bg:   #FFF3DD;
    --c-info:        #28768A;   --c-info-bg:   #E8F4F7;

    /* 中性底：卡片內的次級區塊，不是狀態色 */
    --c-neutral-bg:  #F5F8F7;
    --c-neutral-bg2: #EEF3F2;

    /* ---- 字級（SKILL 階層；正式畫面不得小於 12px） ---- */
    --fs-page:    27px;   /* 頁面主標題 26–30 / 700 */
    --fs-key:     25px;   /* 關鍵任務／數值 22–26 / 700 */
    --fs-section: 19px;   /* 區塊標題 18–20 / 700 */
    --fs-card:    17px;   /* 卡片標題／姓名 16–18 / 600–700 */
    --fs-body:    15px;   /* 主要內容／按鈕 14–16 / 500–700 */
    --fs-sm:      14px;   /* 主要內容下界，關鍵操作與期限的最小值 */
    --fs-aux:     13px;   /* 輔助資訊 12–14 / 500–600 */
    --fs-min:     12px;   /* 絕對下限 */

    --lh-tight: 1.4;      /* 中文內文行高 1.4–1.6 */
    --lh-base:  1.55;

    --ff: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC",
          "Microsoft JhengHei", sans-serif;

    /* ---- 框架（SKILL 平板端表格） ---- */
    --h-topbar:  70px;    /* 頂欄 68–72 */
    --w-nav:     248px;   /* 左側導覽 230–260 */
    --pad-page:  36px;    /* 頁面外距左右 32–42 */
    --pad-page-y: 26px;   /* 頁面外距上下 22–30 */
    --gap-block: 20px;    /* 主要區塊間距 16–24 */
    --pad-card:  18px;    /* 卡片內距 16–20 */
    --h-row:     72px;    /* 列表列高 一般 68–80 */
    --h-row-lg:  96px;    /* 多狀態資訊 88–104 */
    --h-btn:     48px;    /* 主要按鈕 48–56 */
    --touch:     44px;    /* 最小觸控區 */

    --r-sm: 8px;          /* 圓角 8–12；主要卡片 10–12 */
    --r:    10px;
    --r-lg: 12px;

    /* 陰影只用於彈窗、浮層與目前焦點 */
    --sh-pop:   0 18px 48px rgba(7, 61, 59, .22);
    --sh-focus: 0 0 0 3px rgba(0, 140, 130, .22);
}

*, *::before, *::after { box-sizing: border-box; }

/* 全站不許橫向捲動。手機上只要有一個元素算錯寬度整頁就被推出去，
   與其逐個追不如在根部擋住；min-width:0 讓 flex 子元素願意縮。 */
html, body { max-width: 100%; overflow-x: hidden; }

/* 每一層都要願意縮，否則任何一個子元素就能把整頁推寬。
   這是舊版手機右側溢出 40px 的根因，在根部一次擋掉。 */
.shell, .main, .nav, .cols, .cols__main, .cols__side,
.rows, .row, .row__body, .card, .metrics, .metric,
.pagehead, .pagehead__tools, .sourcebar, .modal, .modal__body {
    min-width: 0;
}

body {
    margin: 0;
    font-family: var(--ff);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* 數值一律等寬，避免跳動 */
.num { font-variant-numeric: tabular-nums; }

/* 個案編號：識別碼與姓名並列，避免同名同姓記錯人。
   編號是不變的識別碼，姓名只負責顯示。 */
.cid {
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-min);
    font-weight: 600;
    color: var(--c-muted);
    letter-spacing: .02em;
    white-space: nowrap;
}
/* 深色底上的編號 */
.card--dark .cid, .topbar .cid { color: rgba(255,255,255,.72); }
/* 姓名後直接跟編號時的間距 */
.row__name .cid, .casebar__name .cid, .incbar__title .cid { margin-left: 6px; }

svg { flex: none; }

/* 鍵盤焦點看得見 */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }


/* ============================================================
   1. 頂欄
   ============================================================ */

.topbar {
    height: var(--h-topbar);
    background: var(--c-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 var(--pad-page);
    /* 捲動時永遠貼在畫面最上緣。
       原型列是原型專用的殼，讓它捲走、由頂欄遞補；正式產品沒有它。 */
    position: sticky;
    top: 0;
    z-index: 45;
}

.topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.topbar__mark {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: var(--c-dark-soft);
    display: grid; place-items: center;
    flex: none;
}

.topbar__back {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--c-dark-line);
    display: grid; place-items: center;
    flex: none;
}
.topbar__back:hover { background: #1d5f5b; }

.topbar__titles { min-width: 0; }
.topbar__title {
    display: block;
    font-size: var(--fs-card);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar__sub {
    display: block;
    font-size: var(--fs-min);
    color: rgba(255,255,255,.72);
    line-height: 1.3;
}

.topbar__status { display: flex; align-items: center; gap: 14px; flex: none; }

/* 離線狀態：不只靠顏色，同時有圓點與文字 */
.chip-offline {
    display: inline-flex; align-items: center; gap: 6px;
    height: 33px; padding: 0 12px;
    border-radius: 17px;
    background: var(--c-dark-line);
    font-size: var(--fs-aux);
    font-weight: 600;
    color: rgba(255,255,255,.94);
    white-space: nowrap;
}
.chip-offline::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: #57D2A6;
    flex: none;
}

/* 尚未實作的功能：位置先留著，但要讓人一眼看出「現在沒有作用」。
   亮綠點會被讀成「運作中」，照服員可能因此在沒網路時照記，資料就掉了 ——
   所以整顆轉灰、點也不再是綠的，並用 title 說明狀態。 */
.chip-offline.is-inactive {
    background: transparent;
    border: 1px dashed rgba(255,255,255,.28);
    color: rgba(255,255,255,.5);
    font-weight: 500;
}
.chip-offline.is-inactive::before {
    background: rgba(255,255,255,.32);
}

.topbar__user {
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* 頂欄的緊急入口：只在手機出現，佔用離線標籤原本的位置。
   平板／桌面版空間夠，走左側導覽底部那顆。 */
.topbar__emg { display: none; }

/* 頂欄的畫面脈絡：只在手機出現，把頁首與資料來源列收進頂欄。
   桌面版空間夠，這些資訊留在頁面內。 */
.topbar__ctx { display: none; }


/* ============================================================
   2. 版面骨架：頂欄 + （左導覽 + 主內容）
   ============================================================ */

.shell {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-height: calc(100vh - var(--h-topbar));
}

.nav {
    width: var(--w-nav);
    flex: none;
    /* 右邊也要有內距：原本是 0，寬度 100% 的子項（緊急入口）
       就會貼齊側欄右緣、視覺上溢出到內容區。 */
    padding: var(--pad-page-y) var(--pad-page) var(--pad-page-y) var(--pad-page);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 佔滿可視高度，讓 nav__spacer 把緊急入口推到底部，
       位置不隨導覽項目增減而浮動（與設計稿一致）。

       高度用 dvh 不用 vh：行動瀏覽器的網址列會伸縮，
       vh 是「網址列收起時」的高度，會讓底部的緊急入口被推出畫面外。
       舊版靠 worker.js 動態量測補救，但 Vue 版沒有那支 JS，
       改用 dvh 由瀏覽器自己算，不需要 JS。 */
    position: sticky;
    top: var(--h-topbar);
    height: calc(100dvh - var(--h-topbar));
    /* 內容比側欄高時才捲動；否則 spacer 會把緊急入口頂到底部。
       捲動時緊急入口要一直看得到，所以它不放在捲動流裡（見下方 sticky）。 */
    overflow-y: auto;
    /* 側欄要有自己的底色 —— 沒有的話，
       視窗比內容高時底部會露出頁面外的區域，
       緊急入口看起來就像浮在側欄之外。 */
    background: var(--c-bg);
}

/* 不支援 dvh 的舊瀏覽器退回 vh */
@supports not (height: 100dvh) {
    .nav { height: calc(100vh - var(--h-topbar)); }
}

.nav__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-muted);
    padding-bottom: 2px;
}

.nav__shift {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    padding: 14px 16px;
    margin-bottom: 8px;
}
.nav__shift-time {
    font-size: 22px; font-weight: 700;
    line-height: 1.25;
}
.nav__shift-note {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.nav__item {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--c-ink);
    width: 100%;
    text-align: left;
}
.nav__item:hover { background: rgba(0,140,130,.08); }
.nav__item.is-active {
    background: var(--c-soft);
    font-weight: 700;
    color: var(--c-dark);
}
.nav__item svg { color: var(--c-muted); }
.nav__item.is-active svg { color: var(--c-primary); }

/* 導覽的文字區：名稱 + 死線 */
.nav__text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.nav__due {
    display: block;
    font-size: var(--fs-min);
    font-weight: 500;
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.nav__item.is-active .nav__due { color: #0A5E56; }

/* 角標：今天還沒處理完的件數 */
.nav__badge {
    flex: none;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--c-neutral-bg2);
    color: var(--c-muted);
    font-size: var(--fs-min);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: grid;
    place-items: center;
}
/* 有 SLA 且快逾時的，用危險色但同時保留數字，不只靠顏色 */
.nav__badge--urgent { background: var(--c-danger); color: #fff; }
.nav__item.is-active .nav__badge { background: #fff; color: var(--c-dark); }

/* 分組標題與分隔線 */
.nav__group {
    font-size: var(--fs-min);
    font-weight: 700;
    color: var(--c-muted);
    letter-spacing: .04em;
    padding: 12px 14px 2px;
}
.nav__rule {
    height: 1px;
    background: var(--c-line);
    margin: 8px 14px 4px;
}

/* 把緊急入口推到側欄底部。
   min-height 不能給太大 —— 視窗矮的時候（例如筆電 500px 可視高），
   spacer 會連同按鈕一起被撐出可視範圍，按鈕就跑到側欄外面。
   flex-shrink 設 1 讓它在空間不足時先縮自己。 */
.nav__spacer { flex: 1 1 auto; min-height: 8px; }

/* 側欄底部的離線待同步提示（design.pen 正式流程 01） */
.nav__sync {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    background: var(--c-warn-bg);
    color: #8C5A08;
    font-size: var(--fs-aux);
    font-weight: 700;
    line-height: 1.35;
}
.nav__sync svg { flex: none; }



/* 緊急入口固定可見，但不遮住內容 */
.nav__emergency {
    /* 內距與間距跟 .nav__item 一致：
       外框兩者本來就等寬（實測 left/right 皆為 26/194），
       但選單項有 padding 6px 14px、圖示從 40px 開始，
       而這裡若用 justify-content:center，圖示與文字會置中，
       跟上面每一個選單項對不齊 —— 看起來就是「歪掉」。
       改成靠左並套同一組 padding／gap，視覺才會成一直線。 */
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px;
    height: 50px;
    border-radius: var(--r-sm);
    background: var(--c-danger);
    color: #fff;
    font-size: var(--fs-body);
    font-weight: 700;
    /*
     * .nav 的 padding 右邊是 0（左邊才有 --pad-page），
     * 所以 width:100% 會讓按鈕貼齊側欄右緣、蓋到內容區。
     *
     * 實測（_click.php）：側欄 right=220、選單項 right=220，
     * 而按鈕補了 margin-right 之後變成 194 —— 反而內縮 26px 不對齊。
     * 選單項是靠自己的 padding 排到 220 的，按鈕不必再補 margin，
     * 只要別讓它超過側欄可用寬度即可。
     */
    width: 100%;
    flex: none;
    /* 側欄內容過長而捲動時，緊急入口要黏在底部一直看得到 ——
       這是最需要隨手按到的東西，不該捲出畫面。
       實測：視窗 500px 高時，沒有這行按鈕會掉到側欄外 209px。 */
    position: sticky;
    bottom: 0;
    margin-top: auto;
}
.nav__emergency:hover { background: #b1323d; }

.main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;      /* 內含橫向捲動容器時，不讓它把版面撐寬 */
    padding: var(--pad-page-y) var(--pad-page);
    display: flex;
    flex-direction: column;
    gap: var(--gap-block);
}

/* 不需要跨頁導覽時，主內容使用完整寬度 */
.main--full { width: 100%; }

/* 同頁互動狀態的區塊：內部沿用主內容的區塊間距，
   否則 section 內的元素會擠成一團（吃不到 .main 的 gap）。 */
[data-viewof] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-block);
    min-width: 0;
}
[data-viewof][hidden] { display: none; }


/* ============================================================
   3. 頁首與區塊標題
   ============================================================ */

.pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.pagehead__title {
    font-size: var(--fs-page);
    font-weight: 700;
    line-height: 1.3;
}
.pagehead__sub {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    margin-top: 4px;
    max-width: 62ch;
}
/* 版型說明（記錄表單標題列右側）。
   給設計端與訪談時看的，照服員不需要每次讀，所以放輕：
   不給底色、不做成標籤，跟標題同高但視覺退到後面。 */
.tpl-hint {
    font-size: var(--fs-aux);
    color: var(--c-muted);
    line-height: 1.3;
    text-align: right;
    min-width: 0;
}
/* 手機上 pagehead 會換行，說明會掉到標題下面自己一行 ——
   那就跟原本整條 notice 一樣佔版面。改成跟狀態晶片並排，
   兩者一起靠右，仍與標題同一區塊。 */
@media (max-width: 768px) {
    .tpl-hint { font-size: var(--fs-min); }
}

/* 工具列會被搜尋框撐開，所以要能縮；搜尋框自己給寬度上限 */
.pagehead__tools {
    display: flex; align-items: center; gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.sectionhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.sectionhead__title {
    font-size: var(--fs-section);
    font-weight: 700;
}
.sectionhead__note {
    font-size: var(--fs-aux);
    color: var(--c-muted);
}


/* ============================================================
   4. 檢視切換（同頁互動狀態，不是新流程）
   ============================================================ */

.segmented {
    display: inline-flex;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    padding: 3px;
    gap: 3px;
}
.segmented__btn {
    /* 設計規範：分頁觸控下限 56px。原本 34px 在平板上戴手套點不準，
       這是切早餐／午餐／點心、上午／下午接送的主要開關。 */
    min-height: 56px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: var(--fs-aux);
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
}
.segmented__btn.is-active {
    background: var(--c-dark);
    color: #fff;
}

/* 篩選膠囊 */
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    font-size: var(--fs-aux);
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
}
.pill.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
/* 篩選膠囊上的件數：數字就在這裡，不再另開指標卡重複 */
.pill b {
    font-weight: 700;
    margin-left: 2px;
    color: var(--c-ink);
}
.pill.is-active b { color: #fff; }

/* 需要處理的狀態：未選取時就帶語意色，掃一眼知道哪裡有欠。
   同時有文字與數字，不只靠顏色。 */
.pill--warn {
    background: var(--c-warn-bg);
    border-color: #F1DDB4;
    color: #8C5A08;
}
.pill--warn b { color: #8C5A08; }
.pill--warn.is-active {
    background: var(--c-warn);
    border-color: var(--c-warn);
    color: #fff;
}
.pill--danger {
    background: var(--c-danger-bg);
    border-color: #F6D3D8;
    color: #9E2B36;
}
.pill--danger b { color: #9E2B36; }
.pill--danger.is-active {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
}
.pill--warn.is-active b, .pill--danger.is-active b { color: #fff; }

/* 狀態篩選列：永遠單行，窄畫面橫向捲動而不折行。
   折成多行會讓控制項堆成一片，把內容推到看不見。 */
.filterbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;          /* 預設折行：永遠不會把版面撐寬 */
    min-width: 0;
    max-width: 100%;
}
.filterbar .pill { flex: none; max-width: 100%; }

/* 原型尚未提供資料的篩選：明確標示不可用，不讓它看起來能點卻沒反應 */
.pill[disabled] {
    opacity: .45;
    cursor: not-allowed;
    background: var(--c-neutral-bg);
}


/* ============================================================
   5. 搜尋
   ============================================================ */

.search {
    display: flex; align-items: center; gap: 10px;
    height: var(--h-btn);
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-muted);
    /* input 的預設寬度會撐破容器，這裡夾住並允許縮 */
    flex: 0 1 240px;
    min-width: 0;
    max-width: 100%;
}
.search input { flex: 1 1 auto; width: 100%; min-width: 0; }
/* 有輸入內容時的清除鈕 */
.search__clear {
    flex: none;
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    color: var(--c-muted);
}
.search__clear:hover { background: var(--c-neutral-bg2); }
.search svg { color: var(--c-muted); }
.search input {
    border: 0; outline: 0; background: none;
    font-size: var(--fs-sm);
    width: 100%; min-width: 0;
    color: var(--c-ink);
}
.search input::placeholder { color: var(--c-muted); }
.search:focus-within { border-color: var(--c-primary); box-shadow: var(--sh-focus); }


/* ============================================================
   6. 資料來源列（離線與同步信任）
   ============================================================ */

.sourcebar {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    background: var(--c-info-bg);
    border: 1px solid #CBE3EA;
    border-radius: var(--r-sm);
    padding: 10px 16px;
    font-size: var(--fs-sm);
    color: #21606F;
    min-height: 42px;
}
.sourcebar__item { display: flex; align-items: center; gap: 8px; }
.sourcebar__strong { font-weight: 700; color: #17505E; }
.sourcebar__spacer { flex: 1 1 auto; }


/* ============================================================
   7. 指標列（3–4 欄橫列）
   ============================================================ */

.metrics {
    display: grid;
    grid-template-columns: repeat(var(--metric-cols, 3), minmax(0, 1fr));
    gap: 16px;
}
.metric {
    border-radius: var(--r);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 88px;
    border: 1px solid transparent;
}
.metric__num {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
}
.metric__label {
    font-size: var(--fs-aux);
    font-weight: 600;
}

.metric--danger { background: var(--c-danger-bg); border-color: #F6D3D8; }
.metric--danger  .metric__num, .metric--danger  .metric__label { color: #9E2B36; }
.metric--warn   { background: var(--c-warn-bg);   border-color: #F1DDB4; }
.metric--warn    .metric__num, .metric--warn    .metric__label { color: #8C5A08; }
.metric--info   { background: var(--c-info-bg);   border-color: #CBE3EA; }
.metric--info    .metric__num, .metric--info    .metric__label { color: #21606F; }
.metric--ok     { background: var(--c-soft);      border-color: #C3E4DC; }
.metric--ok      .metric__num, .metric--ok      .metric__label { color: #0A5E56; }


/* ============================================================
   8. 卡片
   ============================================================ */

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--pad-card);
}
.card--flush { padding: 0; overflow: hidden; }
.card--dark {
    background: var(--c-dark);
    border-color: transparent;
    color: #fff;
}
.card--dark .card__title { color: #fff; }
.card__title {
    font-size: var(--fs-section);
    font-weight: 700;
    margin-bottom: 12px;
}
.card__stack { display: flex; flex-direction: column; gap: 12px; }

/* 深色卡片內的鍵值列 */
.kv {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    font-size: var(--fs-aux);
    width: 100%;          /* 放進 column flex 容器時仍佔滿寬，值才不會被擠掉 */
}
/* 鍵是短詞不許拆行；值可以長（照護重點的整句提醒），
   讓值換行 —— 反過來會把「日落症候群」擠成一字一行。 */
.kv__k { flex: none; white-space: nowrap; }
.kv__v { flex: 0 1 auto; min-width: 0; text-align: right; }
.kv:last-child { border-bottom: 0; }
.kv__k { color: rgba(255,255,255,.7); }
.kv__v { font-size: var(--fs-sm); font-weight: 600; }

/* 白卡片內的鍵值列 */
.kv--light { border-bottom-color: var(--c-line); }
.kv--light .kv__k { color: var(--c-muted); }
.kv--light .kv__v { color: var(--c-ink); }


/* ============================================================
   9. 列表列：時間／對象／任務／狀態／主要操作
   ============================================================ */

.rows { display: flex; flex-direction: column; gap: 10px; }

.row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--h-row);
    padding: 12px 18px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    width: 100%;
    text-align: left;
}
.row:hover { border-color: #B9D2CD; }
.row--lg { min-height: var(--h-row-lg); }
.row--danger { background: var(--c-danger-bg); border-color: #F3CDD2; }

.row__time {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--c-ink);
    flex: none;
    width: 58px;
}
/* 時間格：模板 L 的排程列用有底色的時間塊 */
.row__timebox {
    flex: none;
    width: 58px;
    min-height: 50px;
    border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
    display: grid; place-items: center;
    font-size: var(--fs-aux);
    font-weight: 700;
}

.row__icon {
    flex: none;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: var(--c-soft);
    display: grid; place-items: center;
    color: var(--c-primary);
}
.row__icon--plain { background: var(--c-neutral-bg2); color: var(--c-muted); }
.row__icon--danger { background: #fff; color: var(--c-danger); }

.avatar {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--c-soft);
    display: grid; place-items: center;
    font-size: var(--fs-section);
    font-weight: 700;
    color: var(--c-dark);
}
.avatar--lg { width: 54px; height: 54px; font-size: 21px; }
.avatar--sm { width: 36px; height: 36px; font-size: var(--fs-card); }

.row__body { flex: 1 1 auto; min-width: 0; }
.row__name {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: var(--fs-card);
    font-weight: 700;
    line-height: 1.35;
}
.row__task {
    font-size: var(--fs-body);
    color: var(--c-ink);
    margin-top: 2px;
}
.row__meta {
    font-size: var(--fs-min);
    color: var(--c-muted);
    margin-top: 2px;
}

.row__state {
    flex: none;
    text-align: right;
    min-width: 108px;
}
.row__due {
    font-size: var(--fs-aux);
    color: var(--c-muted);
}
.row__status {
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-top: 2px;
}
.row__status--danger { color: var(--c-danger); }
.row__status--warn   { color: var(--c-warn); }
.row__status--info   { color: var(--c-info); }
.row__status--muted  { color: var(--c-muted); }

.row__go {
    flex: none;
    display: flex; align-items: center; gap: 4px;
    font-size: var(--fs-min);
    font-weight: 600;
    color: var(--c-muted);
}


/* ============================================================
   10. 狀態標籤
   ============================================================ */

.tag {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: var(--fs-min);
    font-weight: 600;
    white-space: nowrap;
}
.tag--ok     { background: var(--c-soft);      color: #0A5E56; }
.tag--danger { background: var(--c-danger-bg); color: #9E2B36; }
.tag--warn   { background: var(--c-warn-bg);   color: #8C5A08; }
.tag--info   { background: var(--c-info-bg);   color: #21606F; }
.tag--plain  { background: var(--c-neutral-bg2); color: var(--c-muted); }
.tag--code   { background: var(--c-soft); color: #0A5E56; font-weight: 700; letter-spacing: .02em; }
.tag--lg     { min-height: 33px; padding: 0 12px; font-size: var(--fs-aux); }


/* ============================================================
   11. 按鈕
   ============================================================ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--h-btn);
    min-width: var(--touch);
    padding: 0 20px;
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-ink); }
.btn--danger  { background: var(--c-danger); color: #fff; }
.btn--danger:hover { background: #b1323d; }
.btn--info    { background: var(--c-info); color: #fff; }
.btn--info:hover { background: #205f70; }
.btn--ghost   { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
.btn--ghost:hover { border-color: #B9D2CD; }
.btn--quiet   { background: var(--c-neutral-bg2); color: var(--c-ink); }
.btn--quiet:hover { background: #E3EBE9; }
.btn--sm      { min-height: var(--touch); padding: 0 14px; font-size: var(--fs-sm); }
.btn--block   { width: 100%; }
.btn[disabled], .btn.is-locked {
    background: #DADFD8;
    color: #7C8A87;
    cursor: not-allowed;
}

/* 底部操作列：次要置左、主要置右 */
.actionbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--c-line);
    margin-top: 4px;
}
.actionbar__note {
    font-size: var(--fs-min);
    color: var(--c-muted);
    max-width: 52ch;
}
/* 存檔被擋時的原因 —— 照設計稿用紅字放按鈕左邊，不是按了才跳提示 */
.actionbar__note.is-block { color: var(--c-danger); font-weight: 600; }
.actionbar__btns { display: flex; align-items: center; gap: 10px; flex: none; }


/* ============================================================
   12. 提示條（狀態同時有圖示與文字，不只靠顏色）
   ============================================================ */

.notice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    border: 1px solid transparent;
}
.notice svg { margin-top: 1px; }
.notice--warn   { background: var(--c-warn-bg);   border-color: #F1DDB4; color: #8C5A08; }
.notice--danger { background: var(--c-danger-bg); border-color: #F6D3D8; color: #9E2B36; }
.notice--info   { background: var(--c-info-bg);   border-color: #CBE3EA; color: #21606F; }
.notice--ok     { background: var(--c-soft);      border-color: #C3E4DC; color: #0A5E56; }
.notice--sm     { font-size: var(--fs-min); padding: 10px 14px; }


/* ============================================================
   13. 雙欄（單一個案工作台 65/35）
   ============================================================ */

.cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.cols--ops { grid-template-columns: minmax(0, 1fr) 320px; }
.cols__side { display: flex; flex-direction: column; gap: 16px; }
.cols__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }


/* ============================================================
   14. 情境列（個案基本資料 + 資料狀態）
   ============================================================ */

/* 記錄頁容器：個案列與下方欄位區的垂直間距。
   沒有這條兩塊會貼死（畫面抓到過）。 */
.recform { display: flex; flex-direction: column; gap: 16px; }

.casebar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 16px var(--pad-card);
}
.casebar__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.casebar__name { display: block; font-size: 21px; font-weight: 700; line-height: 1.3; }
.casebar__risk { display: block; margin-top: 2px; }
.casebar__risk { font-size: var(--fs-sm); color: var(--c-muted); }
.casebar__state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }


/* ============================================================
   15. 下一件工作（關鍵任務）
   ============================================================ */

.nextjob__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.nextjob__title {
    font-size: var(--fs-key);
    font-weight: 700;
    line-height: 1.3;
}
.nextjob__desc {
    font-size: var(--fs-body);
    color: var(--c-muted);
    margin-top: 6px;
    max-width: 60ch;
}


/* ============================================================
   16. 時間軸（事件進度、接手狀態）
   ============================================================ */

.timeline { display: flex; flex-direction: column; gap: 4px; }
.tl {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 8px 0;
}
.tl__dot { flex: none; margin-top: 1px; }
.tl--done    .tl__dot { color: var(--c-primary); }
.tl--current .tl__dot { color: var(--c-info); }
.tl--todo    .tl__dot { color: #B5C6C3; }
.tl__body { min-width: 0; flex: 1 1 auto; }
.tl__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4;
}
.tl--todo .tl__title { color: var(--c-muted); }
.tl__meta {
    font-size: var(--fs-min);
    color: var(--c-muted);
}

/* 精簡版：右欄的接手狀態 */
.steps { display: flex; flex-direction: column; gap: 6px; }
.step {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm);
}
.step--done    { color: var(--c-ink); }
.step--done    svg { color: var(--c-primary); }
.step--current { color: var(--c-info); font-weight: 600; }
.step--todo    { color: var(--c-muted); }
.step--todo    svg { color: #B5C6C3; }
/* 階段標籤（沐浴前／執行／觀察）。順序來自代碼表的 group，
   標出來才看得出這串為什麼是這個順序。 */
.step__stage {
    margin-left: auto;
    font-size: var(--fs-min);
    color: var(--c-muted);
    font-weight: 400;
}


/* ============================================================
   17. 選項（協助程度、傷勢、可見層級）
   ============================================================ */

.choices { display: flex; flex-direction: column; gap: 10px; }

.choice {
    display: flex; align-items: center; gap: 12px;
    min-height: 68px;
    padding: 12px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
    width: 100%;
    text-align: left;
}
.choice:hover { border-color: #B9D2CD; }
.choice.is-selected {
    background: var(--c-soft);
    border-color: var(--c-primary);
}
.choice__icon { flex: none; color: var(--c-muted); }
.choice.is-selected .choice__icon { color: var(--c-primary); }
.choice > span:last-child { flex: 1 1 auto; min-width: 0; }
.choice__label { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.choice__note  { display: block; font-size: var(--fs-aux); color: var(--c-muted); }

/* 網格型選項（快錄用量、傷勢分級） */
.grid-choices {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 12px;
}
.gchoice {
    min-height: 74px;
    padding: 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    text-align: center;
}
.gchoice:hover { border-color: #B9D2CD; }
.gchoice.is-selected { background: var(--c-soft); border-color: var(--c-primary); }
.gchoice.is-danger.is-selected { background: var(--c-danger-bg); border-color: var(--c-danger); }
.gchoice__label { display: block; font-size: var(--fs-card); font-weight: 700; line-height: 1.3; }
.gchoice__note  { display: block; font-size: var(--fs-min); color: var(--c-muted); }

/* 可勾選的處置標籤 */
.toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.toggle {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
    font-size: var(--fs-min);
    font-weight: 600;
    color: var(--c-ink);
}
.toggle.is-on { background: var(--c-soft); border-color: var(--c-primary); }
.toggle.is-on svg { color: var(--c-primary); }
.toggle svg { color: var(--c-muted); }

/* 單選圓鈕列（可見層級） */
.radios { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.radio {
    display: flex; align-items: center; gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    text-align: left;
}
.radio.is-selected { background: var(--c-soft); border-color: var(--c-primary); }
.radio svg { flex: none; color: #B5C6C3; }
.radio.is-selected svg { color: var(--c-primary); }
.radio > span:last-child { flex: 1 1 auto; min-width: 0; }
.radio__label { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.radio__note  { display: block; font-size: var(--fs-min); color: var(--c-muted); }


/* ============================================================
   18. 欄位（數值、文字）
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { display: block; font-size: var(--fs-aux); font-weight: 600; color: var(--c-muted); }
.field__box {
    display: flex; align-items: center; gap: 8px;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
    font-size: var(--fs-sm);
}
.field__box svg { color: var(--c-muted); }
.field__box input, .field__box textarea {
    border: 0; outline: 0; background: none;
    width: 100%; min-width: 0;
    font-size: var(--fs-sm);
}

/* 大數值輸入（血壓、血糖） */
.numpad { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.numbox {
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    background: #F7FAF9;
    padding: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 168px;
    justify-content: center;
}
.numbox.is-alert { background: var(--c-danger-bg); border-color: #F3CDD2; }
.numbox__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.numbox__value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.numbox.is-alert .numbox__value { color: var(--c-danger); }
.numbox__unit { font-size: var(--fs-aux); color: var(--c-muted); }

/* numbox 當輸入用（記錄表單的數值量測版型）。
   原本是唯讀展示卡，這裡讓中間那個大數字可以直接打字。 */
.numbox input.numbox__value {
    border: 0; outline: 0; background: none;
    width: 100%; min-width: 0;
    text-align: center;
    font: inherit;
    font-size: 44px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: inherit;
}
.numbox input.numbox__value::-webkit-outer-spin-button,
.numbox input.numbox__value::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;   /* 手機上小箭頭太窄點不到，關掉 */
}
.numbox input.numbox__value[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- 時間輸入 ----------
   不用原生 <input type="time">：手機上是逐分鐘滾輪，要記 15:35
   得從 00 轉下去，單手在長輩旁邊轉不動。
   主要入口是「現在」，再 ±5／±30 微調；要完全不同的時間才展開。 */
.timefield { display: flex; flex-direction: column; gap: 10px; }
.timefield__now {
    display: flex; align-items: center; gap: 10px;
    min-height: 56px; padding: 0 14px;
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
}
.timefield__value {
    flex: 1 1 auto;
    font-size: 26px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.timefield__nudge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.timefield__step {
    min-height: 48px;          /* 設計規範的按鈕觸控下限 */
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    background: var(--c-surface);
    font-size: var(--fs-aux); font-weight: 600; color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.timefield__step:active { background: var(--c-soft); border-color: var(--c-primary); }
.timefield__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    max-height: 240px; overflow-y: auto;
    padding: 10px; border: 1px solid var(--c-line); border-radius: var(--r-sm);
    background: var(--c-surface);
}
.timefield__slot {
    min-height: 48px;
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
    font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.timefield__slot.is-selected {
    background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700;
}
@media (max-width: 420px) {
    .timefield__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 記錄表單（平板寬螢幕） ----------
   平板橫式主區有 780px 以上，選項還一列一個等於整片留白，
   一張短表單要捲三四次。寬螢幕改排兩欄，欄位卡之間也收緊。
   只作用在 .recform 底下，不動其他頁面共用的 .choices。 */
@media (min-width: 700px) {
    .recform .choices {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    /* 每個欄位一張大卡太鬆散，收成有分隔線的區塊 */
    .recform .card { padding: 16px 18px; margin-bottom: 12px; }
    .recform .timefield__grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- 聯絡簿：內容完成度小晶片 ----------
   一顆晶片一類內容（心情／活動／進食…），照設計稿 08。
   缺的維持灰框，補齊的變主色 —— 一眼看出還缺什麼。 */
.bookchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bookchip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--c-line); background: var(--c-surface);
    font-size: var(--fs-min); color: var(--c-muted);
}
.bookchip.is-done { background: var(--c-soft); border-color: #C3E4DC; color: #0A5E56; }

/* ---------- 家屬留言：處理卡 ---------- */
.msgquote {
    margin: 0; padding: 12px 14px;
    background: var(--c-neutral-bg); border-radius: var(--r-sm);
    border-left: 3px solid var(--c-primary);
    font-size: var(--fs-sm); line-height: 1.6;
}
.row.is-open { border-color: var(--c-primary); background: var(--c-soft); }

/* ---------- 留言對話（主管端處理卡） ---------- */
.msgthread { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.msgpost {
    margin: 0; padding: 9px 12px; border-radius: var(--r-sm);
    background: var(--c-neutral-bg); font-size: var(--fs-sm); line-height: 1.6;
}
.msgpost small { display: block; color: var(--c-muted); font-size: 11px; margin-bottom: 2px; }
.msgpost.is-staff { background: var(--c-soft); }
.msgpost.is-sys { background: none; border: 1px dashed var(--c-line); color: var(--c-muted); }
/* 結案說明：對話收尾的那一句，跟一般貼文區隔 */
.fnote-close {
    margin: 10px 0 0; padding: 9px 12px;
    background: var(--c-soft); border-radius: var(--r-sm);
    font-size: var(--fs-aux); color: #0A5E56;
}

/* ---------- 側欄規則說明 ---------- */
.siderule {
    margin: 0 0 6px; font-size: var(--fs-aux);
    color: var(--c-muted); line-height: 1.55;
}
.siderule:last-child { margin-bottom: 0; }
/* 回覆路徑說明：走直回還是送審，寫在按鈕上方，不讓人猜 */
.replyrule { margin: 8px 0 0; font-size: 12px; color: var(--c-muted); line-height: 1.5; }

.textarea {
    display: block;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
    padding: 12px 14px;
}
.textarea__label {
    display: block;
    font-size: var(--fs-aux);
    font-weight: 600;
    color: var(--c-muted);
    margin-bottom: 4px;
}
.textarea textarea {
    border: 0; outline: 0; background: none; resize: vertical;
    width: 100%;
    min-height: 62px;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

/* 自動帶入的欄位（時間、人員、同步） */
.autofields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.autofield {
    display: flex; align-items: center; gap: 10px;
    min-height: 56px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    background: #F6F9F8;
    border: 1px solid var(--c-line);
}
.autofield svg { color: var(--c-muted); flex: none; }
.autofield__k { font-size: var(--fs-min); color: var(--c-muted); line-height: 1.3; }
.autofield__v { font-size: var(--fs-min); font-weight: 700; line-height: 1.3; }


/* ============================================================
   19. 五對核對清單（用藥）
   ============================================================ */

.checks { display: flex; flex-direction: column; gap: 8px; }
.check {
    display: flex; align-items: center; gap: 12px;
    min-height: 55px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    background: var(--c-neutral-bg);
    border: 1px solid var(--c-line);
}
.check.is-done    { background: var(--c-soft); border-color: #C3E4DC; }
.check.is-pending { background: var(--c-warn-bg); border-color: #F1DDB4; }
/* 檢核列的警示差異：勾是「做了」，顏色說「做了但有狀況」。
   發現紅腫、水溫超標不能跟正常值一樣掛綠勾。
   注意這支的琥珀色 token 叫 --c-warn（不是 tokens.css 的 --c-warning），
   引用不存在的變數不會報錯、只會默默沒顏色 —— 就這樣漏過一次。 */
.check.is-alert { background: var(--c-danger-bg); border-color: #F3CDD2; }
.check.is-flagged { background: var(--c-warn-bg); border-color: #F1DDB4; }
.check__mark.is-warn { background: var(--c-warn); border-color: var(--c-warn); color: #fff; }
.check__mark.is-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.check__v.is-warn { color: var(--c-warn); font-weight: 600; }
.check__v.is-danger { color: var(--c-danger); font-weight: 600; }
.check__mark {
    flex: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid var(--c-line);
    color: transparent;
}
.check.is-done .check__mark { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
/* 進行中的步驟已有值時，勾號也要上色 —— 不然「有填但正在看」看起來像沒填 */
.check__mark.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.check__icon { flex: none; color: var(--c-muted); }
.check.is-done .check__icon { color: var(--c-primary); }
.check__k { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.check__v { display: block; font-size: var(--fs-min); color: var(--c-muted); }
/* 五對的文字組要吃滿剩餘寬度，狀態圓點與圖示才不會被推擠 */
.check > span:last-child { flex: 1 1 auto; min-width: 0; }


/* ============================================================
   20. 彈窗與遮罩
   ============================================================ */

.overlay {
    position: fixed; inset: 0;
    background: rgba(9, 47, 45, .60);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    z-index: 60;
}
.overlay[hidden] { display: none; }

.modal {
    background: var(--c-surface);
    border-radius: 14px;
    box-shadow: var(--sh-pop);
    width: 100%;
    max-height: 85vh;                /* 不得超過畫面 80–85% */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal--sm { max-width: 620px; }      /* 一般確認 560–680 */
.modal--lg { max-width: 790px; }      /* 語音草稿、複合表單 720–820 */
.modal--quick { max-width: 680px; }

.modal__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    padding: 24px 26px 0;
}
.modal__title { font-size: 24px; font-weight: 700; line-height: 1.3; }
.modal__sub { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 4px; }
.modal__close {
    flex: none;
    width: var(--touch); height: var(--touch);   /* 關閉至少 44×44 */
    border-radius: var(--r-sm);
    background: var(--c-neutral-bg2);
    display: grid; place-items: center;
    color: var(--c-muted);
}
.modal__close:hover { background: #E3EBE9; }

.modal__body {
    padding: 20px 26px;
    display: flex; flex-direction: column;
    gap: 18px;                        /* 區塊間距 16–20 */
    overflow-y: auto;
}
.modal__foot {
    padding: 16px 26px 24px;
    border-top: 1px solid var(--c-line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.modal__foot .actionbar { border: 0; padding: 0; margin: 0; width: 100%; }

.modal__label { font-size: var(--fs-card); font-weight: 700; }

/* 快錄計時器 */
.timer {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 35px;
    padding: 0 12px;
    border-radius: 18px;
    background: var(--c-dark);
    color: #fff;
    font-size: var(--fs-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 原始語音播放器 */
.player {
    display: flex; align-items: center; gap: 14px;
    background: var(--c-dark);
    color: #fff;
    border-radius: var(--r);
    padding: 14px 16px;
}
.player__btn {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--c-primary);
    display: grid; place-items: center;
    color: #fff;
}
.player__title { font-size: var(--fs-card); font-weight: 700; }
.player__note { font-size: var(--fs-aux); color: rgba(255,255,255,.72); }
.player__time { margin-left: auto; font-size: var(--fs-aux); color: rgba(255,255,255,.72); }

/* AI 草稿編輯區 */
.draft {
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: #FAFCFB;
    padding: 14px 16px;
}
.draft textarea {
    width: 100%;
    border: 0; outline: 0; background: none; resize: vertical;
    font-size: var(--fs-card);
    line-height: var(--lh-base);
    min-height: 84px;
}

/* 從語音帶入的欄位 */
.slots { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.slot {
    border-radius: var(--r-sm);
    background: var(--c-soft);
    padding: 10px 14px;
    min-height: 60px;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.slot--warn { background: var(--c-warn-bg); }
.slot__k { font-size: var(--fs-min); color: var(--c-muted); }
.slot__v { font-size: var(--fs-sm); font-weight: 700; }


/* ============================================================
   21b. 個案浮動工具
   需要對象的操作只在個案脈絡下出現，面板自己標明目前是誰。
   ============================================================ */

/* 有浮動工具的頁面，主內容右側預留出它的寬度，避免蓋住卡片 */
.has-ctools .main { padding-right: calc(var(--pad-page) + 158px); }

.ctools {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 142px;
    padding: 8px;
    border-radius: 18px;
    background: var(--c-surface);
    border: 1px solid #BFDAD7;
    box-shadow: 0 8px 18px rgba(8, 58, 56, .22);
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 40;
}
.ctools__ctx { padding: 8px 10px 4px; }
.ctools__k { font-size: var(--fs-min); color: var(--c-muted); line-height: 1.4; }
.ctools__v { font-size: var(--fs-card); font-weight: 700; line-height: 1.3; }

.ctools__btn {
    display: flex; align-items: center; gap: 8px;
    min-height: 50px;
    padding: 0 12px;
    border-radius: var(--r);
    font-size: var(--fs-body);
    font-weight: 700;
}
.ctools__btn--primary { background: var(--c-primary); color: #fff; }
.ctools__btn--primary:hover { background: var(--c-primary-ink); }
.ctools__btn--soft { background: var(--c-soft); color: var(--c-dark); }
.ctools__btn--soft:hover { background: #d4ece7; }
.ctools__btn.is-active { outline: 2px solid var(--c-primary); outline-offset: 1px; }

/* 手機：收成底部橫列。
   緊急按鈕併進同一列，不讓兩層浮動物件互相重疊。 */
@media (max-width: 960px) {
    .has-ctools .main {
        padding-right: var(--pad-page);
        padding-bottom: 88px;      /* 讓出底部橫列的高度 */
    }
    .ctools {
        right: 12px; left: 12px;
        top: auto; bottom: 12px;
        transform: none;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: var(--r-lg);
    }
    .ctools__ctx { padding: 0; flex: 1 1 auto; min-width: 0; }
    .ctools__v {
        font-size: var(--fs-sm);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ctools__btn { flex: none; min-height: var(--touch); padding: 0 14px; }
}
/* 小尺寸：按鈕只留圖示，文字讓給個案姓名 */
@media (max-width: 520px) {
    .ctools__btn span { display: none; }
    .ctools__btn {
        padding: 0;
        width: var(--touch);
        justify-content: center;
    }
}



/* 已完成項目的收合區：查得到但不佔版面 */
.donebox {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 14px var(--pad-card);
}
.donebox > summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-muted);
    list-style: none;
}
.donebox > summary::-webkit-details-marker { display: none; }
.donebox > summary::before {
    content: "▸ ";
    color: var(--c-muted);
}
.donebox[open] > summary::before { content: "▾ "; }

/* ============================================================
   22. 空狀態
   ============================================================ */

.empty {
    background: var(--c-surface);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-lg);
    padding: 40px 24px;
    text-align: center;
}
.empty__title { font-size: var(--fs-card); font-weight: 700; }
.empty__note { font-size: var(--fs-sm); color: var(--c-muted); margin: 6px 0 16px; }


/* ============================================================
   23. 原型導覽條（只在原型階段存在，不屬於正式產品）
   ============================================================ */

.protobar {
    background: #0B2C2A;
    color: rgba(255,255,255,.9);
    padding: 8px var(--pad-page);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    font-size: var(--fs-min);
    /* 固定在最上方，頂欄才能穩穩貼在它下面 */
    position: sticky;
    top: 0;
    z-index: 40;
}
.protobar__tag {
    font-weight: 700;
    color: #7FD8C6;
    letter-spacing: .04em;
    margin-right: 4px;
}
.protobar a {
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    white-space: nowrap;
}
.protobar a:hover { background: rgba(255,255,255,.16); }
.protobar a.is-current { background: var(--c-primary); color: #fff; font-weight: 700; }


/* ============================================================
   24. 響應式
   設計稿為 1440×1024 橫向平板。縮小時保持相同比例與最小觸控尺寸，
   不等比縮小文字。
   ============================================================ */

/* 一般平板橫向：導覽收窄，外距縮小 */
@media (max-width: 1280px) {
    :root { --w-nav: 220px; --pad-page: 26px; }
    .cols { grid-template-columns: minmax(0, 1fr) 312px; }
    .cols--ops { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* 1024 平板：右欄退到主欄下方，改為單欄 */
@media (max-width: 1120px) {
    .cols, .cols--ops { grid-template-columns: minmax(0, 1fr); }
    .cols__side { flex-direction: row; flex-wrap: wrap; }
    .cols__side > * { flex: 1 1 300px; }
    .slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* 窄平板直向與大手機：左側導覽改成頂部橫向捲動列 */
@media (max-width: 960px) {
    /* 直排時 min-width:0 擋不住捲動容器把版面推寬（那是 row 方向的機制），
       要明確給寬度上限，子項才會乖乖待在視窗內。 */
    .shell {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    .main { width: 100%; max-width: 100%; }
    .nav {
        /* 橫向捲動列。
           量測證實：溢出的一直是這裡的 nav__item（最遠 right=819），
           不是列表列。捲動容器在 column 版面下會用「內容寬度」當自己的寬度，
           把整頁一起推寬，所以必須明確鎖在視窗寬度內。 */
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
        height: auto;
        max-height: none;
        padding: 12px var(--pad-page);
        flex-direction: row;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-line);
        /* 頂欄在手機承接了頁首，高度會變；導覽不再 sticky 以免位移算錯 */
        position: static;
        z-index: 20;
        -webkit-overflow-scrolling: touch;
    }
    /* 手機是橫向捲動列：分組標題與分隔線省略，死線改在頁內顯示 */
    .nav__label, .nav__shift, .nav__spacer,
    .nav__group, .nav__rule, .nav__due { display: none; }
    .nav__item { width: auto; flex: none; min-height: var(--touch); padding: 0 12px; }
    .nav__text { flex: none; white-space: nowrap; }
    /* 捲動容器的末端 padding 會被忽略；
       手機的緊急入口已移到頂欄，最後一個導覽項自己補右留白 */
    .nav__item:last-of-type { margin-right: var(--pad-page); }
    /* 手機的緊急入口移到頂欄（離線標籤原本的位置），導覽列不再重複放 */
    .nav__emergency { display: none; }
    .metrics { --metric-cols: 3; }
}

/* 手機：單欄、指標兩欄、彈窗貼底 */
/* 列表列的斷點比其他元素早：側欄一收成橫向導覽（960px），
   一列裡的「頭像＋內容＋狀態＋按鈕」就擠不下，按鈕會被卡片切掉。
   所以列表列在 960px 就開始折行，不等到 720px。 */
@media (max-width: 960px) {
    /* 列表列改成兩行：
       第一行  頭像／時間 + 姓名任務來源（佔滿整行）
       第二行  期限狀態 + 主要操作（按鈕靠右，不被推出畫面） */
    .row {
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 12px;
        padding: 14px 16px;
        align-items: flex-start;
        /* 換行後高度由內容決定；沿用桌面的固定列高會讓第二行溢出卡片 */
        min-height: 0;
        height: auto;
    }
    .row--lg { min-height: 0; }
    .row__time, .row__timebox, .row__icon, .avatar { order: 1; }
    /* 與頭像並排，吃滿第一行剩餘寬度。
       basis 必須夠大，逼狀態與按鈕換到第二行 ——
       給 200px 的話，390px 螢幕扣掉頭像與留白後剛好還塞得下，
       於是三者又擠回同一行，按鈕被推出卡片外（這就是先前的破版）。
       用 calc 讓它永遠吃掉「整行減頭像」的寬度，不留空間給後面的元素。 */
    .row__body {
        order: 2;
        /* 吃掉「整行減頭像」的寬度，逼狀態與按鈕換到第二行。
           basis 給固定值（例如 200px）會出事：390px 螢幕扣掉頭像後
           剛好還塞得下，於是三者又擠回同一行、按鈕被推出卡片。 */
        flex: 1 1 calc(100% - 62px);
        min-width: 0;
    }
    /* 有序號的列（接送）前面是「序號＋頭像」兩個元素，
       要多扣一個的寬度，否則頭像會被擠到自己一行。 */
    .row:has(.row__timebox) .row__body,
    .row:has(.row__time) .row__body {
        flex-basis: calc(100% - 122px);
    }
    .row__state {
        order: 3;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        align-self: center;
    }
    /* 沒有按鈕的列（已完成）：狀態不必獨佔一行，
       縮成一行小字接在內容後面即可。用 .row--done 標記，不依賴 :has()。 */
    .row--done { row-gap: 6px; }
    /* 已完成的列沒有按鈕，狀態不必獨佔一行 ——
       原本給 flex:1 1 100% 再加 122px 左內距，
       「已完成」就孤零零卡在第三行中間，白白多佔一行高度。
       改成靠右接在同一行，與有按鈕的列視覺一致。 */
    .row--done .row__state {
        flex: 0 0 auto;
        margin-left: auto;
        text-align: right;
        font-size: var(--fs-min);
        align-self: center;
    }
    .row--done .row__status { font-size: var(--fs-min); margin-top: 0; }
    .row__go { order: 4; align-self: center; }
    .row .btn {
        order: 5;
        flex: 0 1 auto;         /* 允許縮，避免被 margin 推出卡片 */
        margin-left: auto;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
    }
}

@media (max-width: 720px) {
    :root {
        --pad-page: 16px;
        --pad-page-y: 16px;
        --gap-block: 16px;
        --fs-page: 24px;
        --fs-key: 22px;
    }
    .topbar { padding: 0 16px; gap: 10px; }
    .topbar__sub { display: none; }
    .topbar__user { display: none; }
    /* 脈絡區已完整說明對象，上排標題不重複個案編號 */
    .topbar__title .cid { display: none; }
    /* 離線標籤讓位給緊急入口；離線狀態改由頁內的同步提示列表達 */
    .chip-offline { display: none; }
    .topbar__emg {
        display: grid;
        place-items: center;
        width: var(--touch);
        height: var(--touch);
        border-radius: var(--r-sm);
        background: var(--c-danger);
        color: #fff;
        flex: none;
    }
    .topbar__emg:hover { background: #b1323d; }

    /* ---- 頂欄承接頁首：品牌列 + 畫面脈絡兩段 ---- */
    .topbar {
        height: auto;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 16px 12px;
        row-gap: 8px;
    }
    .topbar__brand { flex: 1 1 auto; }
    .topbar__status { order: 2; }

    .topbar__ctx {
        display: block;
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,.14);
    }
    .topbar__ctx-t {
        font-size: 19px;
        font-weight: 700;
        line-height: 1.3;
    }
    .topbar__ctx-s {
        font-size: var(--fs-aux);
        color: rgba(255,255,255,.76);
        line-height: 1.45;
        margin-top: 1px;
    }
    .topbar__ctx-src {
        display: flex; align-items: center; gap: 6px;
        font-size: var(--fs-min);
        color: rgba(255,255,255,.62);
        margin-top: 5px;
    }
    .topbar__ctx .cid { color: rgba(255,255,255,.7); }

    /* 死線只在有 data-mdue 的頁面出現，收在頂欄不佔頁內空間 */
    .topbar__due {
        display: flex; align-items: flex-start; gap: 6px;
        margin-top: 8px;
        padding: 7px 10px;
        border-radius: var(--r-sm);
        background: rgba(255, 214, 138, .16);
        color: #FFD98A;
        font-size: var(--fs-min);
        font-weight: 600;
        line-height: 1.45;
    }
    .topbar__due svg { margin-top: 1px; flex: none; }

    /* 頂欄已經講了死線，頁內那條就不重複 */
    .deadline { display: none; }

    /* 頂欄已經講完，頁內不再重複 */
    .topbar__ctx ~ * .pagehead__title,
    body:has(.topbar__ctx) .pagehead > div:first-child,
    body:has(.topbar__ctx) .sourcebar,
    body:has(.topbar__ctx) .casebar { display: none; }
    body:has(.topbar__ctx) .pagehead { margin-top: -4px; }

    /* 手機一律三欄並排，讓摘要只佔一行 */
    .metrics { --metric-cols: 3; gap: 10px; }
    .metric { min-height: 76px; padding: 10px 12px; }
    .metric__num { font-size: 22px; }
    .numpad { grid-template-columns: minmax(0,1fr); gap: 10px; }
    .numbox { min-height: 108px; }
    .numbox__value { font-size: 36px; }
    .autofields { grid-template-columns: minmax(0,1fr); }
    .grid-choices { --cols: 2 !important; }
    .radios { grid-template-columns: minmax(0,1fr); }
    .slots { grid-template-columns: minmax(0,1fr); }
    .cols__side > * { flex: 1 1 100%; }


    /* 頁首控制項：單行橫向捲動，不折成好幾行把內容推下去 */
    .pagehead__tools {
        width: 100%;
        /* 折行而非橫向捲動 —— 捲動容器在 flex 欄位裡會把整頁推寬 */
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
    }
    .pagehead__tools > * { flex: 0 1 auto; min-width: 0; }
    .pagehead__tools .search { flex: 1 1 100%; }
    .pagehead__tools .pills { flex-wrap: wrap; }

    /* 手機的狀態篩選：折行排列，不用橫向捲動 ——
       捲動容器在 flex 欄位裡會把整頁推寬（原型階段驗證過）。 */
    .filterbar {
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .filterbar .pill {
        flex: 0 0 auto;
        padding: 0 12px;
        min-height: var(--touch);
        font-size: var(--fs-min);
        white-space: nowrap;
    }
    .filterbar .pill b { font-size: var(--fs-min); }

    .sourcebar { gap: 8px 14px; }
    .sourcebar__spacer { display: none; }

    .segmented { flex: none; }

    .overlay { padding: 0; align-items: flex-end; }
    .modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
    }
    .modal__head { padding: 20px 18px 0; }
    .modal__body { padding: 16px 18px; }
    .modal__foot { padding: 14px 18px 20px; }
    .modal__title { font-size: 21px; }

    .actionbar { flex-direction: column; align-items: stretch; }
    .actionbar__btns { width: 100%; }
    .actionbar__btns .btn { flex: 1 1 auto; }

}

/* 小尺寸手機：指標壓成一行。
   這是掃一眼的摘要，不該吃掉三行高度把任務清單推到看不見。 */
@media (max-width: 460px) {
    .metrics {
        --metric-cols: 3;
        gap: 8px;
    }
    .metric {
        min-height: 0;
        padding: 8px 10px;
        border-radius: var(--r-sm);
        align-items: center;
        text-align: center;
        gap: 0;
    }
    .metric__num { font-size: 20px; }
    .metric__label {
        font-size: var(--fs-min);
        line-height: 1.3;
    }

    .grid-choices { --cols: 1 !important; }
    .toggle { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   SPA 專用：啟動畫面與換頁轉場

   改成 Vue 之後不再整頁重載，換頁的體感由這裡決定。
   位移只有 6px、時間 180ms —— 照服員一天要切幾十次頁，
   動效太大或太慢反而礙事。
   ============================================================ */

.boot {
    min-height: 60vh;
    display: grid;
    place-items: center;
    gap: 12px;
    grid-auto-flow: row;
    color: var(--c-muted);
}
.boot__spin {
    width: 28px; height: 28px;
    border: 2px solid var(--c-line);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: boot-spin .7s linear infinite;
}
.boot__text { font-size: var(--fs-body); }

@keyframes boot-spin { to { transform: rotate(360deg); } }

/* 換頁動效：只做進場淡入。
   不用 <Transition mode="out-in"> —— 它跟非同步路由元件併用會卡住，
   新元件不掛載，畫面停在空白（實測確認）。
   每頁自己淡入，視覺效果一樣，而且不可能卡。 */
.page-in { animation: page-in .18s ease both; }

@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* 願意的話系統設定可以關掉動效 —— 前庭功能敏感的人會暈 */
@media (prefers-reduced-motion: reduce) {
    .page-in { animation: none; }
    .boot__spin { animation-duration: 2s; }
}

/* 資料載入中的骨架：先佔位，避免內容跳動 */
.skel {
    background: linear-gradient(90deg,
        var(--c-neutral-bg) 25%, var(--c-neutral-bg2) 50%, var(--c-neutral-bg) 75%);
    background-size: 200% 100%;
    animation: skel-pan 1.2s ease-in-out infinite;
    border-radius: var(--r-sm);
}
.skel--row { height: 76px; margin-bottom: 10px; }
.skel--head { height: 28px; width: 42%; margin-bottom: 14px; }

@keyframes skel-pan { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .skel { animation: none; }
}

/* ============================================================
   SPA 版新增的元件樣式
   ============================================================ */

/* 提示框的標題行 */
.notice__title {
    display: block;
    font-size: var(--fs-card);
    margin-bottom: 2px;
}

/* 搜尋框：放在頁首工具列，與切換鈕並排 */
.search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 240px;
    min-width: 0;
    height: var(--h-btn);
    padding: 0 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    color: var(--c-muted);
}
.search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: var(--fs-body);
    color: var(--c-ink);
}
.search__input::placeholder { color: var(--c-muted); }

/* 同步狀態：一行小字，不再是一個獨立的方塊。
   來源固定是照管家，每次重申只是雜訊；需要判斷的是資料新不新，
   所以只留時間。出席數已併入指標卡。 */
.syncline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: -4px 0 0;
    font-size: var(--fs-min);
    color: var(--c-muted);
}
.syncline__sep { opacity: .5; }

/* 狀態片：個案工作台的項目進度 */
.chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
}
.chip--ok     { background: var(--c-soft);       color: var(--c-primary); }
.chip--warn   { background: var(--c-warn-bg);    color: var(--c-warn); }
.chip--danger { background: var(--c-danger-bg);  color: var(--c-danger); }
.chip--muted  { background: var(--c-neutral-bg); color: var(--c-muted); }

/* 照護提示的每一條 */
.alert__line { display: block; }

/* 任務的補充說明，接在標題後面 */
.row__note { color: var(--c-muted); font-size: var(--fs-aux); }

/* 登出：舊版沒有入口，使用者只能手打 /logout.php。 */
.topbar__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--touch);
    padding: 0 12px;
    border-radius: var(--r-sm);
    color: rgba(255,255,255,.72);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
.topbar__logout:hover {
    background: var(--c-dark-line);
    color: #fff;
}
.topbar__logout-text { display: inline; }

/* 手機版頂欄要放緊急入口，登出只留圖示 */
@media (max-width: 720px) {
    .topbar__logout-text { display: none; }
    .topbar__logout { padding: 0 8px; }
}

/* App.vue 的單一根元素：只為了讓 Vue 的根是元素不是 fragment
   （防瀏覽器外掛往 #app 插節點弄斷錨點鏈），不參與排版。 */
.approot { display: contents; }