/* EQBrain 介面樣式
 *
 * 設計前提：**人要在這裡長時間工作。**
 * 所以做了三件與「好看」不同的取捨：
 *   1. 不用純黑底配純白字——高對比長時間看會產生光暈疲勞。
 *      底 #1b1f26、字 #d7dbe2，對比足夠但不刺眼。
 *   2. 基礎字級 17px、行高 1.8。決策清單要能一路讀下去，不是要塞得多。
 *   3. 強調色降飽和度。紅色只用在真正需要停下來的地方，用多了就失去意義。
 */

:root{
  --bg:#1b1f26;          /* 主背景：帶藍的深灰，比純黑柔和 */
  --panel:#232832;       /* 面板 */
  --panel-2:#1f242c;     /* 輸入框等內凹元素 */
  --line:#333a46;
  --txt:#d7dbe2;         /* 主文字：off-white，非純白 */
  --dim:#9aa4b2;
  --side:#161a20;

  --red:#d9737a;         /* 降飽和：警示但不刺眼 */
  --amber:#d9a441;
  --green:#6aab86;
  --blue:#7fa8cf;
  --accent:#3d5a80;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:17px/1.8 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",
       "Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 外框：左選單 ＋ 右工作區 ────────────────────────────────────────────── */
/* 左右各自捲動（老闆 2026-08-18 指定）。
   外層鎖高、禁止整頁捲動，兩邊各自在自己的框裡捲——
   **側邊欄完全不動**，而不是靠 sticky 跟著頁面走再黏回去。 */
.shell{display:flex;height:100vh;overflow:hidden}

.side{
  width:264px;flex:0 0 264px;background:var(--side);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  height:100vh;overflow:hidden;
}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px;
       border-bottom:1px solid var(--line)}
.brand-logo{width:38px;height:38px;border-radius:9px;flex:0 0 38px}
.brand-name{font-size:17px;font-weight:700;letter-spacing:.3px;line-height:1.35}

.nav{padding:14px 12px;flex:1}
.nav-item{display:block;padding:11px 14px;border-radius:9px;color:var(--txt);
          font-size:16px;margin-bottom:4px}
.nav-item:hover{background:#1f242c;text-decoration:none}
.nav-item.on{background:var(--accent);color:#eef2f7;font-weight:600}

.side-foot{padding:16px 16px 18px;border-top:1px solid var(--line)}
.me{display:flex;gap:12px;align-items:center}
.me-avatar{width:46px;height:46px;border-radius:50%;flex:0 0 46px;background:#2f3844}
.me-info{min-width:0}
.me-name{font-size:16px;font-weight:600;line-height:1.4}
.me-sub{font-size:13.5px;color:var(--dim);line-height:1.5}
.me-id{font-size:12.5px;color:var(--dim);line-height:1.5}
.me-stub{margin-top:10px;font-size:12px;color:var(--amber);line-height:1.5}
.ver{margin-top:12px;font-size:12px;color:var(--dim)}

/* 工作區：iPad／桌機盡量滿版，只留呼吸的邊距 */
.work{flex:1;min-width:0;padding:28px 34px 64px;max-width:none;
      overflow-y:auto;height:100vh}

/* ── 通用元件 ─────────────────────────────────────────────────────────────── */
h2{font-size:21px;margin:0 0 16px;line-height:1.5}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
       padding:20px 22px;margin-bottom:18px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:16px}
th{color:var(--dim);font-weight:600;font-size:14px}

.tag{display:inline-block;padding:3px 12px;border-radius:20px;font-size:13.5px;font-weight:600}
.l3{background:rgba(217,115,122,.15);color:var(--red);border:1px solid rgba(217,115,122,.35)}
.l2{background:rgba(217,164,65,.13);color:var(--amber);border:1px solid rgba(217,164,65,.3)}
.l1{background:rgba(106,171,134,.13);color:var(--green);border:1px solid rgba(106,171,134,.3)}
.unauthorized{background:rgba(217,115,122,.15);color:var(--red);border:1px solid rgba(217,115,122,.35)}
.authorized{background:rgba(106,171,134,.15);color:var(--green);border:1px solid rgba(106,171,134,.35)}
.rejected{background:rgba(154,164,178,.13);color:var(--dim);border:1px solid var(--line)}

label{display:block;color:var(--dim);font-size:14px;margin:16px 0 6px}
input[type=text],input[type=date],textarea,select{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;color:var(--txt);padding:11px 13px;font:inherit;font-size:16px}
textarea{min-height:130px;resize:vertical;line-height:1.7}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}

button{background:var(--accent);color:#eef2f7;border:0;border-radius:8px;
       padding:11px 22px;font-weight:600;cursor:pointer;font-size:16px}
button:hover{background:#476a96}
button.ghost{background:transparent;color:var(--dim);border:1px solid var(--line)}
.btn-row{display:flex;gap:12px;margin-top:18px;align-items:center;flex-wrap:wrap}

.dim{color:var(--dim)}
.small{font-size:14.5px}
.mt10{margin:10px 0 0}
.mt8{margin:8px 0 0}
.mt6{margin:6px 0 0}
.mt3{margin-top:4px}
.ml8{margin-left:10px}
.w110{width:120px}
.c-red{color:var(--red)}

/* 風險與授權並排——它們是兩件事，版面上必須看起來就是兩件事 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card-h{color:var(--dim);font-size:14px;margin-bottom:10px}
.redline{border-left:4px solid var(--red);background:rgba(217,115,122,.08);
         padding:15px 18px;border-radius:0 10px 10px 0;margin-bottom:18px}
.datablock{border:1px dashed var(--line);border-radius:10px;padding:15px 17px;
           background:var(--panel-2);white-space:pre-wrap;word-break:break-word;
           font-size:16px;line-height:1.75}
.datahdr{color:var(--amber);font-size:13.5px;margin-bottom:9px;font-weight:600}
.ev{border-left:2px solid var(--line);padding-left:18px;margin-left:6px}
.ev-item{padding:11px 0;border-bottom:1px solid var(--line)}
.ev-item:last-child{border-bottom:0}

/* ── GTD 待決事項清單 ─────────────────────────────────────────────────────── */
.gtd-top{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:22px}
.gtd-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bucket{margin-bottom:0}
.bucket-h{display:flex;align-items:center;gap:12px}
.bucket-h h2{margin:0;font-size:19px}
.count{background:var(--line);color:var(--dim);border-radius:20px;
       padding:2px 12px;font-size:14px;font-weight:700}
.bucket.urgent{border-color:rgba(217,115,122,.4)}
.bucket.urgent .count{background:rgba(217,115,122,.18);color:var(--red)}
.hint{color:var(--dim);font-size:14.5px;margin:8px 0 14px}
.items{list-style:none;margin:0;padding:0}
.item{padding:13px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item-title{display:block;font-size:16.5px;margin-bottom:8px}
.item-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.src{color:var(--dim);font-size:13.5px}
.item-red{color:var(--red);font-size:13.5px;margin-top:6px}
.empty{color:var(--dim);font-size:15px;margin:6px 0 0}

/* ── RWD ──────────────────────────────────────────────────────────────────
   iPad 直向以上：維持左選單。
   手機：選單收成頂部橫列，工作區佔滿寬度——小螢幕不該被固定選單吃掉 1/3。 */
@media(max-width:1000px){
  /* iPad 直向：側欄收窄，把寬度還給工作區——選單只是導覽，不該吃掉三分之一畫面 */
  .side{width:210px;flex:0 0 210px}
  .brand{padding:16px 14px;gap:10px}
  .brand-logo{width:32px;height:32px;flex:0 0 32px}
  .brand-name{font-size:15.5px}
  .me-avatar{width:40px;height:40px;flex:0 0 40px}
  .work{padding:24px 24px 56px}
}
@media(max-width:900px){
  .gtd-bottom{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media(max-width:680px){
  /* 手機：改成上下堆疊，整頁一起捲。
     **這裡必須解除桌機版的鎖高**——上下堆疊時再鎖 100vh，
     內容會被關進一個看不到底的框裡。 */
  .shell{flex-direction:column;height:auto;overflow:visible}
  .side{width:auto;flex:none;height:auto;position:static;overflow:visible;
        border-right:0;border-bottom:1px solid var(--line)}
  .work{height:auto;overflow:visible}
  .brand{padding:14px 16px}
  .nav{display:flex;gap:8px;padding:10px 12px}
  .nav-item{flex:1;text-align:center;margin:0;padding:10px 8px}
  .side-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px}
  .me-stub{margin-top:0}
  .ver{margin-top:0}
  .work{padding:20px 16px 48px}
  body{font-size:16px}
}

/* ── 側邊：使用者卡 ＋ 編組樹 ─────────────────────────────────────────────── */
.me-card{padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.nav-h{color:var(--dim);font-size:13px;letter-spacing:.6px;
       padding:4px 14px 8px;margin-top:4px}
.nav-item{display:flex;align-items:center;gap:8px}
.nav-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badge{background:rgba(217,115,122,.2);color:var(--red);border-radius:20px;
           padding:1px 9px;font-size:13px;font-weight:700;flex:0 0 auto}
.subs{padding:0 0 6px 26px}
.sub{color:var(--dim);font-size:14px;padding:4px 0}
.addbox{margin:10px 12px 0;border-top:1px solid var(--line);padding-top:10px}
.addbox summary{color:var(--dim);font-size:14px;cursor:pointer;padding:6px 2px}
.addbox summary:hover{color:var(--txt)}
.addbox label{font-size:13px;margin:10px 0 4px}
.addbox input{padding:8px 10px;font-size:15px}
.addbox button{padding:8px 16px;font-size:15px}
.addbox.wide{margin:6px 0 0;border-top:0;background:var(--panel);
             border:1px solid var(--line);border-radius:12px;padding:14px 20px}
.perm-note{color:var(--amber);font-size:12px;margin:8px 0 0;line-height:1.5}
.page-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.page-h h2{margin:0}
.btn-link{background:var(--accent);color:#eef2f7;border-radius:8px;
          padding:9px 18px;font-size:15px;font-weight:600}
.btn-link:hover{background:#476a96;text-decoration:none}
@media(max-width:680px){
  .me-card{padding:12px 16px}
  /* 手機：編組改成橫向捲動的膠囊列。
     原本每個編組佔一整行，四個編組就把內容推到 600px 以下——
     **手機的垂直空間要留給待決事項，不是留給選單。** */
  /* 手機：選單改成橫向捲動的膠囊列。
     **展開／收合在這裡沒有意義**——橫向列沒有「下方」可以展開，
     所以把子項目攤平成同一排，讓一次滑動就看得完。 */
  .nav{display:flex;gap:8px;overflow-x:auto;overflow-y:visible;padding:10px 12px;
       -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav-h,.nav-sep{display:none}
  .nav-item{flex:0 0 auto;margin:0;padding:9px 15px;border:1px solid var(--line);
            border-radius:20px;font-size:15px}
  .nav-group{display:contents}          /* 讓子項目直接排進同一列 */
  .nav-parent::before{display:none}     /* 橫向列沒有展開的方向 */
  .nav-children{display:contents;margin:0;padding:0;border:0}
  .nav-children .nav-item{font-size:15px;padding:9px 15px;margin:0}
  .subs{display:none}          /* 容器在手機上收起，點進編組再看 */
  .addbox{flex:0 0 auto;margin:0;border-top:0;padding-top:0}
  .addbox summary{padding:9px 12px;white-space:nowrap}
  .side-foot{display:none}     /* 版本號在手機上不必佔空間 */
}

/* ── 區塊票號標籤 ─────────────────────────────────────────────────────────
   老闆 2026-08-16 在飛機上、看不到截圖，要求以區塊為單位標註票號，
   之後可用票號直接溝通修改。**這也是常態的好設計**——
   討論介面時能精確指認「哪一塊」，比描述位置可靠得多。 */
.tk{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:8px;
    width:16px;height:16px;border-radius:50%;background:rgba(127,168,207,.12);color:var(--blue);
    border:1px solid rgba(127,168,207,.35);font-size:10px;font-weight:700;line-height:1;vertical-align:middle;
    cursor:help;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tk::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
    white-space:nowrap;background:#0f1216;color:var(--txt);border:1px solid var(--line);border-radius:6px;
    padding:3px 8px;font-size:12px;font-weight:600;letter-spacing:.3px;z-index:60;display:none;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.tk:hover::after,.tk:focus-visible::after,.tk.tk-show::after{display:block}
.tk-row{display:flex;align-items:center;gap:0;flex-wrap:wrap}

/* ── 表格內的即時操作表單（能力庫：核定／發佈，票 #141／#142）────────────
   核定與發佈都要具名，所以操作欄位裡必須有一個輸入框。
   放成一列而不是另開頁面——**要人按下去之前先打上自己的名字**，
   那一秒的停頓正是這個設計要的。 */
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inline-form input[type=text]{width:110px;padding:6px 9px;font-size:14px;margin:0}
.inline-form button{padding:6px 12px;font-size:14px}

/* ── 登入身分（票 #128）────────────────────────────────────────────────── */
.me-foot{display:flex;align-items:center;justify-content:space-between;
         gap:10px;margin-top:10px}
.logout{margin:0}
.logout button{padding:4px 12px;font-size:13px}
.btn-link{display:inline-block;background:var(--accent);color:#eef2f7;
          text-decoration:none;padding:11px 22px;border-radius:8px;font-size:16px}
.btn-link:hover{background:#476a96}

/* ── 版本紀錄（票 #125／#126）──────────────────────────────────────────── */
.rel{border-left:3px solid var(--line);padding:12px 0 12px 16px;margin:14px 0}
.rel-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rel-ver{font-size:19px;font-weight:600;letter-spacing:.5px;color:var(--blue)}
.rel-prod{font-size:14px}
.rel-t{font-size:17px;margin-top:6px}
.rel-list{margin:6px 0 0;padding-left:18px;line-height:1.6}
.rel-list li{margin:2px 0}
a.ver{text-decoration:none}a.ver:hover{text-decoration:underline}

/* 工具授權的行內展開 */
.inline-details{display:inline-block;margin-left:8px}
.inline-details summary{color:var(--dim);cursor:pointer}

/* DSL 腳本編輯區：等寬字體，因為對齊在腳本裡有意義 */
textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
              font-size:14px;line-height:1.6;min-height:240px}

/* ── 未登入的極簡版面 ─────────────────────────────────────────────────────
   未登入的人不該從這一頁看出系統裡有什麼：沒有導覽、沒有員工資料、
   沒有內部編號、沒有任何送得出去的工作表單。 */
body.bare{display:flex;align-items:center;justify-content:center;min-height:100vh;
          background:var(--bg)}
.bare-main{width:100%;max-width:460px;padding:24px}
.bare-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
           padding:34px 30px}
.bare-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.bare-title{font-size:26px;margin:0 0 18px;letter-spacing:1px}
.bare-lead{font-size:16px;color:var(--txt);margin:0 0 20px}
.bare-help{font-size:14px;color:var(--dim);line-height:1.75;margin-top:22px;
           border-top:1px solid var(--line);padding-top:16px}
.bare-err{background:rgba(200,90,90,.12);border:1px solid rgba(200,90,90,.35);
          border-radius:8px;padding:12px 14px;margin-bottom:18px;font-size:14px}

/* ── 側邊選單：可捲動、可展開（老闆 2026-08-18 指定）────────────────────────
   側邊欄是 sticky 且高度 100vh，所以編組一多，新增按鈕與版本號就會被推出畫面外。
   讓 .nav 自己捲，品牌列、員工卡、頁尾維持固定。 */
.nav{overflow-y:auto;min-height:0;scrollbar-width:thin;
     scrollbar-color:#2c333d transparent}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:#2c333d;border-radius:4px}
.nav::-webkit-scrollbar-track{background:transparent}

/* 展開／收合。用 <details>，沒有 JavaScript——CSP 是 default-src 'none'。 */
.nav-group{margin-bottom:4px}
.nav-group>summary{list-style:none;cursor:pointer}
.nav-group>summary::-webkit-details-marker{display:none}
/* 三角形指示器：收合時朝右，展開時朝下。**要看得出還有東西在裡面。** */
.nav-parent::before{content:"›";flex:0 0 auto;color:var(--dim);font-size:17px;
                    line-height:1;transition:transform .12s ease;display:inline-block}
.nav-group[open]>.nav-parent::before{transform:rotate(90deg)}
.nav-parent.on::before{color:#eef2f7}
.nav-children{margin:2px 0 6px 12px;padding-left:10px;
              border-left:1px solid var(--line)}
.nav-children .nav-item{font-size:15px;padding:8px 12px;margin-bottom:2px}
.nav-sub{color:var(--dim)}
.nav-sub:hover{color:var(--txt)}

/* 分隔標籤：任務編組區的起點。它不是可點的項目，所以不要長得像。 */
.nav-sep{color:var(--dim);font-size:12.5px;letter-spacing:1px;
         padding:14px 14px 8px;margin-top:8px;
         border-top:1px solid var(--line);text-transform:none}

/* 功能區域篩選列 */
.filter-bar{display:flex;align-items:center;justify-content:space-between;
            gap:14px;flex-wrap:wrap}
.small-link{padding:6px 14px;font-size:14px}

/* 子項目：名稱不得被截斷。
   票號是輔助資訊，**名稱才是使用者要找的東西**——
   「工具...」比「工具與程式碼庫 #143 #144」少了關鍵的字，多了困惑。
   所以讓整列可以換行，票號自己掉到第二行，而不是把名稱吃掉。 */
.nav-children .nav-item{flex-wrap:wrap;row-gap:4px}
.nav-children .nav-name{flex:1 1 100%;overflow:visible;white-space:normal;
                        text-overflow:clip;line-height:1.4}
.nav-children .tk{margin-left:0;margin-right:6px;width:14px;height:14px;font-size:9px}

/* ── 目前所在位置的標示 ───────────────────────────────────────────────────
   選單有三層（頂層、團隊管理的子項、編組的功能區域），
   **三層都要看得出「我現在在哪裡」**，否則點了容器卻沒有任何回饋，
   使用者會以為沒點到。 */
.nav-item.on{background:var(--accent);color:#eef2f7;font-weight:600;
             box-shadow:inset 3px 0 0 var(--blue)}
/* 子層用較淡的底＋左側色條：它是「在這一區裡面」，不是「這一整區被選中」 */
.nav-children .nav-item.on{background:rgba(90,133,181,.22);color:#eef2f7;
                           box-shadow:inset 3px 0 0 var(--blue)}
/* 父項目在子項目被選中時，維持可辨識但不搶焦點 */
.nav-parent.has-active{color:#eef2f7;font-weight:600}

/* ── 角色 × 能力矩陣（2026-08-20）───────────────────────────────────────── */
.capmatrix td.center { text-align: center; }
.capmatrix .yes { color: var(--green); font-size: 17px; }
.capmatrix .no { color: #4a525c; }
.capmatrix th:first-child, .capmatrix td:first-child { text-align: left; }

/* 角色勾選：橫排、可點整個標籤，避免只有小方塊能按 */
.rolepick {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 8px 0; cursor: pointer; font-weight: 500;
}
.rolepick input { width: auto; margin: 0; cursor: pointer; }

/* ── 待決事項頁籤（老闆 2026-08-22 指定）──────────────────────────────────
   純 CSS：radio ＋ :checked 的兄弟選擇器。CSP 是 `default-src 'none'`，
   沒有腳本可用——而這其實不吃虧，頁籤本來就不需要腳本。

   捲動只發生在票列表裡：工作區鎖高不捲，標題與頁籤列固定，
   只有 .tabscroll 那一塊自己捲。 */

.work-fixed{overflow:hidden;padding-bottom:0;display:flex;flex-direction:column}
.board{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:16px}
.board-h{flex:none}
.board-h .filter-bar{margin-bottom:14px}
.board-h .page-h{margin-bottom:14px}

.tabs{flex:1;min-height:0;display:flex;flex-direction:column;
      background:var(--panel);border:1px solid var(--line);border-radius:12px}

/* radio 本身不呈現，但**不能用 display:none**——那會讓它拿不到鍵盤焦點，
   頁籤就只能用滑鼠切換。移到畫面外仍然可被 Tab 到、可用方向鍵切換。 */
.tabr{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.tabbar{flex:none;display:flex;gap:4px;padding:8px 10px 0;
        border-bottom:1px solid var(--line);overflow-x:auto}
.tab{display:flex;align-items:center;gap:9px;white-space:nowrap;cursor:pointer;
     padding:11px 16px;border-radius:9px 9px 0 0;font-size:16px;font-weight:600;
     color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{background:#1f242c;color:var(--txt)}
.tab .count{font-weight:700}
.tab-urgent .count{background:rgba(217,115,122,.18);color:var(--red)}

.tabbody{flex:1;min-height:0;display:flex}
.tabpanel{display:none;flex:1;min-width:0;min-height:0;
          flex-direction:column;padding:18px 22px 0}
.tabscroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:20px}

/* 選中的頁籤：底線 ＋ 亮色，兩個訊號而不只是顏色——
   顏色單獨用在色覺差異上會失效。 */
#tb-today:checked    ~ .tabbar .tab[for=tb-today],
#tb-organise:checked ~ .tabbar .tab[for=tb-organise],
#tb-sched:checked    ~ .tabbar .tab[for=tb-sched],
#tb-deleg:checked    ~ .tabbar .tab[for=tb-deleg],
#tb-crew:checked     ~ .tabbar .tab[for=tb-crew]{
  color:var(--txt);background:#1c222a;border-bottom-color:var(--accent)}
#tb-today:checked ~ .tabbar .tab-urgent[for=tb-today]{border-bottom-color:var(--red)}

#tb-today:checked    ~ .tabbody .p-today,
#tb-organise:checked ~ .tabbody .p-organise,
#tb-sched:checked    ~ .tabbody .p-sched,
#tb-deleg:checked    ~ .tabbody .p-deleg,
#tb-crew:checked     ~ .tabbody .p-crew{display:flex}

/* 鍵盤焦點要看得見，否則用 Tab 的人不知道自己在哪一格 */
.tabr:focus-visible ~ .tabbar .tab{outline:none}
#tb-today:focus-visible    ~ .tabbar .tab[for=tb-today],
#tb-organise:focus-visible ~ .tabbar .tab[for=tb-organise],
#tb-sched:focus-visible    ~ .tabbar .tab[for=tb-sched],
#tb-deleg:focus-visible    ~ .tabbar .tab[for=tb-deleg],
#tb-crew:focus-visible     ~ .tabbar .tab[for=tb-crew]{outline:2px solid var(--accent);outline-offset:-2px}

.crew{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.crew-col .bucket-h{margin-bottom:10px}

@media(max-width:900px){
  .crew{grid-template-columns:1fr}
}
@media(max-width:680px){
  /* 手機恢復整頁捲動——鎖高在小螢幕上會把內容關進看不到底的框裡 */
  .work-fixed{overflow:visible;display:block;padding-bottom:48px}
  .board{display:block}
  .tabscroll{overflow:visible}
  .tab{padding:10px 12px;font-size:15px}
}

/* ── 清單與內容並排（老闆 2026-08-23 指定）────────────────────────────────
   點一張單，內容出現在同一個頁籤的右欄，不換畫面。
   左右各自捲動；整頁與工作區都不捲。 */

.tabpanel{display:none;padding:0}
#tb-today:checked    ~ .tabbody .p-today,
#tb-organise:checked ~ .tabbody .p-organise,
#tb-sched:checked    ~ .tabbody .p-sched,
#tb-deleg:checked    ~ .tabbody .p-deleg{
  display:grid;grid-template-columns:minmax(300px,38%) 1fr}
#tb-crew:checked ~ .tabbody .p-crew{display:flex;flex-direction:column;padding:18px 22px 0}

.mdcol{min-width:0;min-height:0;display:flex;flex-direction:column;padding:16px 20px 0}
.mdcol + .mdcol{border-left:1px solid var(--line)}
.detail-pane{background:rgba(0,0,0,.10)}
.detail-h{flex:none;display:flex;align-items:flex-start;gap:14px;
          justify-content:space-between;margin-bottom:12px}
.detail-h h2{margin:0;font-size:18px;line-height:1.45}
.detail-h .small-link{flex:none}

/* 空狀態要說得出「接下來做什麼」，不是只留一片空白 */
.detail-empty{flex:1;display:flex;flex-direction:column;align-items:center;
              justify-content:center;text-align:center;color:var(--dim);gap:8px;
              padding:0 24px 40px}
.detail-empty p{margin:0}

/* 選中的那一列：左側粗線 ＋ 底色。**捲動之後還找得到自己剛才點的是哪一張。** */
/* 選中的那一列：左側粗線 ＋ 底色，**不改變盒子的位置**——
   早期版本用負 margin 往左推，結果把票號的第一個字切掉了。 */
.item-on{background:#1c222a;box-shadow:inset 3px 0 0 var(--accent);border-radius:8px}
.item-on .item-title{font-weight:600}

/* 右欄是窄欄：票內頁那些並排的卡片在這裡改成上下排 */
.detail-pane .split{grid-template-columns:1fr}
.detail-pane .panel{padding:14px 16px;margin-bottom:12px}
.detail-pane .card-h{font-size:15px}
.detail-pane table th,.detail-pane table td{font-size:14.5px;padding:9px 8px}

@media(max-width:1200px){
  /* 螢幕不夠寬時右欄會擠到看不清楚，改成上下排 */
  #tb-today:checked    ~ .tabbody .p-today,
  #tb-organise:checked ~ .tabbody .p-organise,
  #tb-sched:checked    ~ .tabbody .p-sched,
  #tb-deleg:checked    ~ .tabbody .p-deleg{
    grid-template-columns:1fr;grid-template-rows:minmax(160px,38%) 1fr}
  .mdcol + .mdcol{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:680px){
  #tb-today:checked    ~ .tabbody .p-today,
  #tb-organise:checked ~ .tabbody .p-organise,
  #tb-sched:checked    ~ .tabbody .p-sched,
  #tb-deleg:checked    ~ .tabbody .p-deleg{display:block;grid-template-rows:none}
  .mdcol{display:block;padding:14px 16px}
}

/* ── 清單一列：票號、標題、時間（老闆 2026-08-23 指定）──────────────────
   風險等級與授權狀態拿掉了——它們在右欄看得到，
   而且這一格叫「今日要決定」，本來就代表未授權的紅線票。 */
.item{padding:0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
     gap:12px;padding:12px 4px;color:var(--txt)}
.row:hover{background:#1f242c;text-decoration:none;border-radius:8px}
.row-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
        font-size:12.5px;color:var(--dim);letter-spacing:.2px;white-space:nowrap}
.row-title{font-size:16px;line-height:1.5;min-width:0}
.row-time{font-size:12.5px;color:var(--dim);white-space:nowrap}
.item-on .row{background:transparent;padding-left:12px}
.item-on .row-title{font-weight:600}
.item-on .row-no{color:var(--accent-txt,#8ab4e8)}

/* 標題列的票號 */
.detail-h h2 .no,.page-h h2 .no{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:var(--dim);letter-spacing:.2px}

/* ── 票的內容：狀態在上、時間軸在下 ───────────────────────────────────── */
.status-card{border-color:rgba(122,150,196,.28)}
.statline{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:10px}
.next{margin:0;font-size:15px;line-height:1.65}
.actions .card-h{margin-bottom:12px}
.actrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.act{margin-bottom:14px}
.act:last-child{margin-bottom:0}
.act label{display:block;margin-bottom:6px}
.act .inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.act .inline input{flex:1;min-width:120px;margin:0}
.act textarea{width:100%;margin:0 0 8px}

.foldable summary{cursor:pointer;list-style:none}
.foldable summary::-webkit-details-marker{display:none}
.foldable summary::before{content:"▾ ";color:var(--dim)}
.foldable:not([open]) summary::before{content:"▸ "}

/* 時間軸：人與 AI 併成一條，最新的在上 */
.tl{list-style:none;margin:14px 0 0;padding:0}
.tl-item{padding:11px 0 11px 13px;border-top:1px solid var(--line);
         border-left:3px solid transparent}
.tl-item:first-child{border-top:0}
.tl-human{border-left-color:var(--accent)}
.tl-ai{border-left-color:#6aab86}
.tl-system{border-left-color:#3a434f}
.tl-bad{border-left-color:var(--red)}
.tl-head{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
.tl-kind{font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--dim);
         border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.tl-human .tl-kind{color:#8ab4e8;border-color:rgba(122,150,196,.4)}
.tl-ai .tl-kind{color:var(--green);border-color:rgba(106,171,134,.4)}
.tl-at{margin-left:auto}
.tl-body{margin-top:6px;font-size:14.5px;line-height:1.65;color:var(--dim);
         white-space:pre-wrap;word-break:break-word}
.tl-bad .tl-body{color:var(--red)}

@media(max-width:1200px){
  .actrow{grid-template-columns:1fr}
}
@media(max-width:680px){
  .row{grid-template-columns:1fr;gap:4px}
  .row-time{text-align:left}
}

/* ── 新增待決事項的兩步表單（老闆 2026-08-23 指定）────────────────────── */
.fixed-val{margin:0 0 14px;font-size:16px}
.ai-badge{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--green);
          border:1px solid rgba(106,171,134,.4);border-radius:5px;padding:1px 7px;
          vertical-align:2px}
.verdict{border:1px solid var(--line);border-left:3px solid var(--amber);
         border-radius:9px;padding:14px 16px;margin:6px 0 18px;background:#1b2029}
.verdict-l3{border-left-color:var(--red)}
.verdict .statline{margin-bottom:0}
.newform textarea{min-height:70px}

/* ── 建立完成的確認框 ─────────────────────────────────────────────────
   三秒後自己關掉，純 CSS——CSP 是 default-src 'none'，沒有腳本。 */
.created-wrap{position:fixed;inset:0;z-index:60;display:flex;
              align-items:center;justify-content:center;padding:24px;
              background:rgba(0,0,0,.5);
              animation:cd-close 0s linear 3s forwards}
@keyframes cd-close{to{opacity:0;visibility:hidden;pointer-events:none}}

.created{background:var(--panel);border:1px solid var(--line);border-radius:14px;
         padding:22px 24px;max-width:520px;width:100%;
         box-shadow:0 18px 48px rgba(0,0,0,.5)}
.created-h{display:flex;align-items:center;justify-content:space-between;
           font-size:18px;margin-bottom:12px}
.created-no{margin:0 0 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
            font-size:14px}
.created-body{margin:0;font-size:15px;line-height:1.7}
.created-foot{display:flex;align-items:center;gap:12px;margin-top:18px}
.created-foot form{margin:0}

/* 倒數：三個數字疊在一起，各自在自己的那一秒亮起來。
   用 opacity 而不是 display——display 的動畫在舊瀏覽器上不會動。 */
.cd{position:relative;display:inline-block;width:1.4em;height:1.4em;line-height:1.4em;
    text-align:center;border:1px solid var(--line);border-radius:50%;
    font-size:14px;color:var(--dim)}
.cd i{position:absolute;left:0;right:0;font-style:normal;opacity:0}
.cd i:nth-child(1){opacity:1;animation:cd-out 0s linear 1s forwards}
.cd i:nth-child(2){animation:cd-in 0s linear 1s forwards, cd-out 0s linear 2s forwards}
.cd i:nth-child(3){animation:cd-in 0s linear 2s forwards}
@keyframes cd-in{to{opacity:1}}
@keyframes cd-out{to{opacity:0}}

/* 會動的東西要尊重「減少動態效果」的系統設定：關掉自動消失，改由人自己關。 */
@media(prefers-reduced-motion:reduce){
  .created-wrap{animation:none}
  .cd{display:none}
}

/* ── 等待 AI 回應（老闆 2026-08-23 指定）──────────────────────────────
   每兩秒由 <meta http-equiv="refresh"> 自己更新，不是 JavaScript。 */
.waiting-wrap{position:fixed;inset:0;z-index:60;display:flex;
              align-items:center;justify-content:center;padding:24px;
              background:rgba(0,0,0,.5)}
.waiting{background:var(--panel);border:1px solid var(--line);border-radius:14px;
         padding:24px 26px;max-width:480px;width:100%;
         box-shadow:0 18px 48px rgba(0,0,0,.5)}
.waiting-h{display:flex;align-items:center;gap:12px;font-size:18px}
.waiting-what{margin:12px 0 14px;font-size:15px}
.waiting-t{width:auto}
.waiting-t th,.waiting-t td{border-bottom:0;padding:4px 0}
.waiting-t th{padding-right:22px;font-size:14px}
.waiting-t td{font-size:15px}
.waiting-foot{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.waiting-foot form{margin:0}

/* 轉圈：CSS 動畫，同樣不需要腳本 */
.spinner{width:18px;height:18px;flex:0 0 18px;border-radius:50%;
         border:2px solid var(--line);border-top-color:var(--accent);
         animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 尊重「減少動態效果」：不轉圈，改成一個靜止的圓點。
   資訊仍然在（開始時間、已等待幾秒），少的只是動畫。 */
@media(prefers-reduced-motion:reduce){
  .spinner{animation:none;border-top-color:var(--line);
           background:var(--accent);border-radius:50%}
}

/* ── 側邊選單的 Agent 區塊（老闆 2026-08-23 指定）──────────────────────
   一行是 名字[主要工作](模型)，底下小字是 token 用量。

   **名字不能被截斷**——「幕僚長[治理與成本…」少了模型名稱，
   而模型名稱正是老闆要在這裡看到的東西之一。
   所以這一項不繼承 .nav-item 的單行省略，改成可換行的兩段式。 */
.nav-agent{display:block;padding:9px 14px}
.nav-agent .nav-name{display:block;flex:none;overflow:visible;white-space:normal;
                     text-overflow:clip;font-size:14px;line-height:1.5;
                     word-break:break-word}
.agent-tok{display:block;font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.4}
.nav-agent.on .agent-tok{color:#d3e0f0}
.nav-empty{padding:4px 14px 8px;font-size:13px}
.nav-sep .nav-badge{margin-left:8px}

/* ── 側邊：團隊管理與幕僚長做成按鈕（老闆 2026-08-24 指定）──────────── */
.side-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
          margin:12px 14px;padding:11px 14px;border-radius:10px;
          border:1px solid var(--line);background:#1c222a;color:var(--txt);
          font-size:15px;font-weight:600}
.side-btn:hover{background:#232a34;text-decoration:none}
.side-btn.on{background:var(--accent);border-color:var(--accent);color:#eef2f7}
.side-btn.chief{flex-direction:column;align-items:flex-start;gap:2px;
                border-color:rgba(106,171,134,.35)}
.side-btn.chief.on{border-color:var(--accent)}
.side-btn-sub{font-size:11.5px;font-weight:500;color:var(--dim)}
.side-btn.on .side-btn-sub{color:#d3e0f0}

/* 任務編組佔滿剩下的高度，自己捲 */
.side .nav-sep{margin-top:6px}

/* ── Agent 第二層清單 ─────────────────────────────────────────────── */
.agents-col{width:236px;flex:0 0 236px;height:100vh;overflow:hidden;
            display:flex;flex-direction:column;
            background:#161b22;border-right:1px solid var(--line)}
.agents-h{flex:none;display:flex;align-items:center;gap:8px;
          padding:16px 14px 10px;font-size:13px;color:var(--dim);
          letter-spacing:.4px;border-bottom:1px solid var(--line)}
.agents-list{flex:1;min-height:0;overflow-y:auto;padding:8px}
.agent-item{display:block;padding:10px 12px;border-radius:9px;color:var(--txt);
            margin-bottom:4px}
.agent-item:hover{background:#1f242c;text-decoration:none}
.agent-item.on{background:var(--accent);color:#eef2f7}
.agent-item.chief{border-left:3px solid rgba(106,171,134,.5)}
.agent-name{display:block;font-size:14px;line-height:1.5;word-break:break-word}
.agent-item.on .agent-tok{color:#d3e0f0}

/* ── 團隊管理的頁籤列（整頁版）───────────────────────────────────── */
.tabbar-page{margin:0 0 18px;padding:0 0 0 2px;background:transparent;
             border-bottom:1px solid var(--line)}
.tabbar-page .tab{color:var(--dim)}
.tabbar-page .tab.on{color:var(--txt);background:#1c222a;
                     border-bottom-color:var(--accent)}

/* ── 幕僚長主控台 ─────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.stat{background:#1b2029;border:1px solid var(--line);border-radius:10px;padding:14px}
.stat-n{font-size:22px;font-weight:700;line-height:1.3}
.stat-l{font-size:12.5px;color:var(--dim);margin-top:4px}
.chief-why{display:block;font-size:12.5px;color:var(--dim);margin-top:3px;line-height:1.5}

@media(max-width:1100px){
  /* 螢幕不夠寬時 Agent 欄收窄；再窄就收掉，選單本身還進得去 */
  .agents-col{width:190px;flex:0 0 190px}
}
@media(max-width:900px){
  .agents-col{display:none}
}
@media(max-width:680px){
  .agents-col{display:block;width:auto;flex:none;height:auto;overflow:visible;
              border-right:0;border-bottom:1px solid var(--line)}
  .agents-list{overflow:visible}
  .side-btn{margin:10px 12px}
}

/* ── 第二層選單：選中的 Agent 要一眼看得出來（老闆 2026-08-24 指定）──────
   原本只是換底色，在一排深色方塊裡不夠明顯。
   改成整塊實色 ＋ 左側粗邊：**編組成員遠遠就該看得出現在在看誰。** */
.agent-item.on{background:var(--accent);color:#eef2f7;
               box-shadow:inset 4px 0 0 #9dc4f0;font-weight:600}
.agent-item.on .agent-name{font-weight:700}
.agent-item.chief.on{box-shadow:inset 4px 0 0 var(--green)}
.agent-add{margin:10px 4px 0}
.agent-add summary{padding:6px 8px}
.agent-add form{padding:0 8px}
.nowrap{white-space:nowrap}
.nowrap .inline-form{display:inline-block;margin-right:6px}

/* ── 看板（老闆 2026-08-30 指定）──────────────────────────────────────────
 *
 * 版面：上半是看板（欄橫向捲、欄內縱向捲），下半是選中那張票的細節。
 * 整頁不捲——捲動只發生在該捲的兩個地方，跟原本的頁籤版面一樣。
 *
 * 拖拉中的視覺回饋刻意做得明顯（卡片變半透明、目標欄整欄變色）：
 * 拖拉是「不確定會落在哪裡」的操作，回饋弱一點人就會拖錯。
 */
/* 看板佔滿整頁（老闆 2026-08-31 指定：下方的票內容空間移除）。
 *
 * 寬度自適應（同日指定）：欄寬 minmax(248px, 1fr)——
 * 螢幕寬就攤開填滿，窄就縮到 248px 為止，再窄才開始橫捲。
 * **最小寬度是硬的**：欄再窄下去，票名就會斷成三行，看板等於不能用。
 *
 * 只做到 iPad 與電腦。手機上看板本來就不是好的呈現方式，
 * 與其做一個難用的手機看板，不如讓它誠實地橫捲。
 */
.kanban{
  flex:1;min-height:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(248px,1fr);
  gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;
}
.kcol{
  display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
}
.kcol-h{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);
}
.kcol-h h3{margin:0;font-size:15px;font-weight:600}
.kcol-h .count{
  font-size:13px;color:var(--dim);background:var(--panel);
  border-radius:20px;padding:1px 10px;font-variant-numeric:tabular-nums;
}
.kcol-body{
  flex:1;min-height:60px;overflow-y:auto;padding:10px;
  display:flex;flex-direction:column;gap:8px;
}
.kcol-over{background:rgba(127,168,207,.10);outline:2px dashed var(--blue);outline-offset:-4px}

.kcard{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;cursor:grab;
}
.kcard:active{cursor:grabbing}
.kcard-dragging{opacity:.45}
.kcard-on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.kcard-a{display:block;color:inherit}
.kcard-a:hover{text-decoration:none}
.kcard-a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kno{display:block;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.ktitle{display:block;font-size:14.5px;line-height:1.55;margin-top:2px}
.kmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.kmeta .tag{font-size:11.5px;padding:1px 9px}
.kmeta .src{font-size:12px;color:var(--dim)}



/* 拖拉被伺服器擋下時的橫幅。
 * 固定在下方而不是彈出對話框——使用者需要同時看到票被放回哪裡。 */
.kbanner{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  max-width:min(620px,92vw);background:var(--panel);color:var(--txt);
  border:1px solid var(--red);border-left:4px solid var(--red);border-radius:6px;
  padding:12px 18px;font-size:14.5px;line-height:1.6;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.kbanner-on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.kbanner{transition:none}}

.filter-form{display:flex;align-items:center;gap:8px;margin:0}
.filter-form label{margin:0;font-size:13.5px;color:var(--dim)}
.filter-form select{margin:0}

/* 編組分頁共用的表格與提示框 */
.grid{width:100%;border-collapse:collapse;font-size:14.5px}
.grid th,.grid td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.grid thead th{color:var(--dim);font-size:13px;font-weight:600;white-space:nowrap}
.grid td.nowrap{white-space:nowrap}
.notebox{
  margin-top:16px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--amber);border-radius:6px;padding:14px 18px;
  font-size:14.5px;line-height:1.75;
}
.mt10{margin-top:22px}

/* 月份檢視（老闆 2026-08-30 指定）。
 * 不接受拖入的欄（逾期、更遠）畫成虛線且降低對比——
 * 它們是把票撈出來給人看的，不是可以指定的目標。 */
.kcol-locked{border:1px dashed var(--line);border-radius:0 0 8px 8px;opacity:.86}
.kcol-note{margin:0;padding:0 14px 8px;font-size:12px;color:var(--dim);line-height:1.5}
.mode-tag{
  font-size:12.5px;color:var(--dim);background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:2px 12px;
}

/* 新建編組頁 */
.nav-add{color:var(--blue);font-size:14px;margin-top:8px}
.notebox.err{border-left-color:var(--red)}
.pick{display:flex;align-items:center;gap:9px;cursor:pointer}
.pick input{margin:0}

/* ── 篩選列（老闆 2026-08-31 指定）────────────────────────────────────────
 * 有篩選時整列變色。**顏色是提醒，不是裝飾**——
 * 看板上少了一半的票卻不知道自己開著篩選，是最容易發生的誤會。 */
/* 篩選收進標題列（老闆 2026-08-31 指定：縮小集中）。
 * 原本獨立一列、含標籤文字，高度接近 60px——那是一整排票的高度，
 * 而篩選一天用不到幾次。 */
.filterbar{
  display:flex;align-items:center;gap:6px;margin:0;
  padding:3px 6px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel-2);
}
.filterbar select,.filterbar input,.filterbar button{
  margin:0;font-size:13px;padding:3px 8px;height:28px;
}
.filterbar select{max-width:130px}
.filterbar input[type=search]{width:140px}
.filterbar-on{background:rgba(127,168,207,.16);border-color:var(--blue)}
.filterbar .match{
  font-size:12.5px;color:var(--blue);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.filterbar .small-link{font-size:12.5px}
/* 標題列本來就是 flex，篩選塞進去之後靠右。
 * **只改看板頁的那一個**——.page-h 是全站共用的，
 * 在這裡重寫它會安靜地改到其他頁的間距（第 201 行那條才是通則）。 */
.board-h .page-h{gap:10px}
.board-h .page-h .filterbar{margin-left:auto}
/* 篩選啟用時欄標題也跟著變色——**看板上每一欄都在說「這不是全部」**。 */
.kanban-on .kcol-h{background:rgba(127,168,207,.13);border-radius:8px 8px 0 0}

/* ── 卡片上的小頭像（老闆 2026-08-31 指定）─────────────────────────────
 * 用字不用圖：人員未必有大頭照，而 AI 同事本來就沒有臉。
 * AI 用方角、人用圓角，形狀本身就分得出來，不必只靠顏色。 */
.kcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.avatar{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;line-height:1;
  background:hsl(var(--hue) 34% 30%);color:hsl(var(--hue) 60% 88%);
  border:1px solid hsl(var(--hue) 34% 42%);
}
.avatar-ai{border-radius:5px}
.ver{
  font-size:11.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:4px;padding:1px 7px;
}

/* ── 票的單頁：回看板 ────────────────────────────────────────────────── */
.backbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.backbar kbd{
  font-family:ui-monospace,monospace;font-size:11.5px;
  background:var(--panel-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:var(--dim);
}

/* 欄標題上的批次動作（老闆 2026-08-31 指定） */
.colact{margin:0}
.colact button{font-size:12px;padding:2px 10px}
.kcol-h{gap:6px;flex-wrap:wrap}

/* ── 票的詳情頁：主區＋右側固定側欄（老闆 2026-09-05 指定）────────────────
 *
 * 參考 Jira 的資訊架構，但用 EQBrain 自己的 token：深色底、降飽和強調色、
 * 1px 細邊、8px 圓角。**欄位名稱是灰階、欄位值是主文字色**——
 * 可點的東西才用 --blue，一般文字不能看起來像連結。
 */
.sb-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tdetail{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.tdetail-main{min-width:0}
.sb-open-btn{display:none;margin-left:auto}
.sb-scrim{display:none}

.tsb{
  position:sticky;top:0;max-height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;
  padding:0 0 24px 0;border-left:1px solid var(--line);padding-left:20px;
}
.tsb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tsb-stage{display:flex;align-items:center;gap:6px;margin:0}
.stage-sel{
  margin:0;font-weight:700;font-size:14px;padding:6px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt);
}
/* 狀態的色彩語意：文字永遠在，顏色只是加強 */
.stage-pending{border-color:var(--line)}
.stage-ready{border-color:var(--blue);color:var(--blue)}
.stage-doing{border-color:var(--amber);color:var(--amber)}
.stage-review{border-color:#b08cd9;color:#c9a9e8}
.stage-done{border-color:var(--green);color:var(--green)}
.stage-rejected,.stage-parked{border-color:var(--line);color:var(--dim)}
.tsb-actions{margin-left:auto;display:flex;gap:4px}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--dim);
  font-size:14px;cursor:pointer;padding:0;margin:0;
}
.icon-btn:hover{color:var(--txt);border-color:var(--dim)}
.icon-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tsb-close{display:none}
.tsb-auth{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tsb-inline{display:inline-flex;gap:6px;align-items:center;margin:0}

.tsb-card{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0;
}
.tsb-card > summary.tsb-h{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;font-size:13px;font-weight:600;color:var(--dim);letter-spacing:.02em;
  border-bottom:1px solid transparent;
}
.tsb-card > summary::-webkit-details-marker{display:none}
.tsb-card[open] > summary.tsb-h{border-bottom-color:var(--line)}
.tsb-card > summary .chev{font-size:12px;color:var(--dim);transition:transform .15s}
.tsb-card:not([open]) > summary .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.tsb-card > summary .chev{transition:none}}
.tsb-card > summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

.tsb-dl{margin:0;padding:6px 0}
.tsb-row{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:start;
  padding:9px 14px;border-radius:4px;
}
.tsb-row:hover{background:rgba(255,255,255,.03)}
.tsb-row dt{font-size:12.5px;color:var(--dim);padding-top:2px}
.tsb-row dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px;min-width:0}
.tsb-row .val{color:var(--txt);font-weight:600}
.tsb-row .sub{flex-basis:100%;font-size:12.5px;color:var(--dim)}
.tsb-row .empty-val{color:var(--dim);font-style:normal}
.tsb-row .link{color:var(--blue)}
.tsb-row .avatar{width:22px;height:22px}
.tsb-edit{flex-basis:100%;margin-top:2px}
.tsb-edit > summary{list-style:none;cursor:pointer;display:inline}
.tsb-edit > summary::-webkit-details-marker{display:none}
.linkish{
  background:none;border:0;padding:0;margin:0;color:var(--blue);font-size:12.5px;
  cursor:pointer;text-decoration:none;
}
.linkish:hover{text-decoration:underline}
.linkish:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.tsb-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0 0;padding:8px 10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.tsb-form select,.tsb-form input{margin:0;font-size:13px;padding:5px 8px;flex:1;min-width:140px}
.small-btn{font-size:12.5px;padding:5px 12px;margin:0}
.tsb-times{
  display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 14px 12px;
  font-size:12px;color:var(--dim);border-top:1px solid var(--line);
}
.tsb-list{list-style:none;margin:0;padding:8px 14px 12px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.tsb-list .mono{font-family:ui-monospace,monospace;font-size:12.5px}
.tsb-card .tsb-form{margin:10px 14px 12px}

/* 截止日語意：文字＋顏色，不只靠顏色 */
.due-overdue{color:var(--red)}
.due-today{color:var(--amber)}
.due-soon{color:var(--amber)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 窄螢幕：側欄收成抽屜，由 checkbox 控制，不需要腳本 */
@media (max-width:1100px){
  .tdetail{grid-template-columns:minmax(0,1fr)}
  .sb-open-btn{display:inline-block}
  .tsb{
    position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:40;
    background:var(--bg);border-left:1px solid var(--line);padding:16px 18px 24px;
    transform:translateX(100%);transition:transform .18s ease;box-shadow:-12px 0 32px rgba(0,0,0,.4);
  }
  .sb-toggle:checked ~ .tdetail .tsb{transform:translateX(0)}
  .tsb-close{display:inline-flex}
  .sb-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39;
    opacity:0;pointer-events:none;transition:opacity .18s}
  .sb-toggle:checked ~ .tdetail .sb-scrim{opacity:1;pointer-events:auto}
  @media (prefers-reduced-motion:reduce){.tsb,.sb-scrim{transition:none}}
}

/* ── 票的詳情頁：密度（老闆 2026-09-05 第二次指定）──────────────────────
 *
 * 全站的 17px／1.8 是給「決策清單要一路讀下去」設計的（見檔頭）。
 * 票的詳情頁不是那種頁——它是工作面，人在 13 吋 1080p 上要一眼看完一張票。
 * 所以**只在 .tdetail 底下**換一組更緊的尺度：15px／1.55，面板與列距減半。
 * 不動 body，其他頁維持原本的閱讀節奏。
 */
.tdetail{font-size:15px;line-height:1.55}
.tdetail h2{font-size:18px;margin:0 0 6px;line-height:1.4}
.tdetail .backbar{margin-bottom:6px}
.tdetail .page-h{margin-bottom:8px;gap:10px}
.tdetail .panel,.tdetail .card{padding:12px 16px;margin:0 0 10px;border-radius:8px}
.tdetail .card-h{font-size:12.5px;margin-bottom:6px;letter-spacing:.02em}
.tdetail .foldable > summary.card-h{margin-bottom:0}
.tdetail .foldable[open] > summary.card-h{margin-bottom:6px}
.tdetail .next{font-size:14px;line-height:1.5}
.tdetail .redline{padding:8px 12px;margin-top:8px}
.tdetail th,.tdetail td{padding:3px 8px 3px 0;font-size:14px;line-height:1.5;vertical-align:top}
.tdetail .w110{width:88px}
.tdetail .datahdr{font-size:12.5px;margin:8px 0 5px}
.tdetail .datablock{padding:9px 12px;font-size:13.5px;line-height:1.5;border-radius:6px;
  max-height:240px;overflow:auto}
.tdetail .act{margin-bottom:8px}
.tdetail .act label{margin-bottom:3px;font-size:13px}
.tdetail textarea{min-height:60px;line-height:1.5;font-size:14px;padding:8px 10px}
.tdetail .btn-row{margin-top:8px;gap:8px}
.tdetail button{padding:6px 14px;font-size:13.5px}
.tdetail .perm-note{margin-top:4px}
.tdetail .small{font-size:13px}
.tdetail .items .item{padding:7px 0}
.tdetail .item-meta{gap:6px}
.tdetail .tl{margin-top:6px}
.tdetail .tl-item{padding:5px 0 5px 10px}
.tdetail .tl-head{gap:6px;font-size:13.5px}
.tdetail .tl-kind{font-size:10.5px}
.tdetail .tl-body{margin-top:2px;font-size:13.5px;line-height:1.5}
.tdetail .mt10{margin-top:10px}
.tdetail .mt8{margin-top:6px}
.tdetail .mt6{margin-top:4px}
.tdetail .hint{margin:4px 0 8px;font-size:13.5px}

/* 側欄同步收緊 */
.tdetail .tsb{gap:8px;padding-left:16px}
.tdetail .tsb-top{gap:6px}
.tdetail .stage-sel{font-size:13px;padding:5px 10px}
.tdetail .tsb-card > summary.tsb-h{padding:7px 12px;font-size:12.5px}
.tdetail .tsb-dl{padding:2px 0}
.tdetail .tsb-row{padding:5px 12px;gap:8px;grid-template-columns:78px minmax(0,1fr)}
.tdetail .tsb-row dt{font-size:12px;padding-top:1px}
.tdetail .tsb-row dd{font-size:13.5px;gap:3px 6px}
.tdetail .tsb-row .sub{font-size:12px;line-height:1.4}
.tdetail .tsb-row .avatar{width:20px;height:20px;font-size:10px}
.tdetail .tsb-form{margin-top:4px;padding:6px 8px}
.tdetail .tsb-form select,.tdetail .tsb-form input{font-size:12.5px;padding:4px 7px}
.tdetail .small-btn{font-size:12px;padding:4px 10px}
.tdetail .tsb-times{padding:5px 12px 7px;font-size:11.5px;gap:4px 12px}
.tdetail .tsb-list{padding:5px 12px 7px;font-size:13px;gap:4px}
.tdetail .tsb-card .tsb-form{margin:6px 12px 8px}

/* 票頁頂端的狀態一句話（取代原本的狀態面板＋紅線框，老闆 2026-09-05 指定） */
.tdetail .statnote{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--txt)}
.tdetail .statnote .dim{font-size:12.5px}

/* ── 側欄的活動清單：一列一事件（老闆 2026-09-05 指定）────────────────── */
.tsb-tl{list-style:none;margin:0;padding:4px 0 2px}
.tsb-ev{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:start;
  padding:5px 12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;
}
.tsb-ev:first-child{border-top:0}
.tsb-ev .ev-at{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px}
.tsb-ev .ev-main{display:flex;flex-wrap:wrap;gap:2px 8px;min-width:0}
.tsb-ev .ev-title{color:var(--txt);font-weight:600;overflow-wrap:anywhere}
.tsb-ev .ev-who{color:var(--dim)}
.tsb-ev-bad .ev-title{color:var(--red)}
.tsb-ev-ai .ev-at{color:var(--blue)}
.ev-more{flex-basis:100%;margin-top:1px}
.ev-more > summary{list-style:none;cursor:pointer;color:var(--blue);font-size:12px;display:inline}
.ev-more > summary::-webkit-details-marker{display:none}
.ev-more > summary:hover{text-decoration:underline}
.ev-more .ev-meta{margin:3px 0 0;font-size:11.5px;color:var(--dim)}
.ev-more .ev-body{
  margin-top:4px;padding:6px 8px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:5px;font-size:12.5px;line-height:1.5;color:var(--txt);white-space:pre-wrap;
  max-height:220px;overflow:auto;
}
.tsb-empty{margin:0;padding:8px 12px;font-size:12.5px;color:var(--dim)}
.tsb-foot{margin:0;padding:6px 12px 8px;font-size:11.5px;color:var(--amber);border-top:1px solid var(--line)}
.comment-box{margin-top:4px}
.comment-box textarea{min-height:48px}
.comment-box .btn-row{margin-top:6px;align-items:center}

/* ── 票的內容編輯區（老闆 2026-09-05 指定）──────────────────────────────── */
.tdetail .editor{margin:0}
.tdetail .ed-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:6px}
.tdetail .ed-k{font-size:12.5px;color:var(--dim)}
.tdetail .ed-ro{font-size:14px;color:var(--txt)}
.tdetail .ed-row input{margin:0;font-size:14px;padding:5px 9px}
.tdetail .ed-doc{border:1px solid var(--line);border-radius:6px;background:var(--panel-2);overflow:hidden;margin-top:4px}
.tdetail .ed-sec{padding:8px 10px 6px}
.tdetail .ed-sec + .ed-sec{border-top:1px dashed var(--line)}
.tdetail .ed-sec label{display:block;font-size:12px;color:var(--dim);margin:0 0 3px;letter-spacing:.02em}
.tdetail .ed-req{font-size:11px;color:var(--amber);margin-left:4px}
.tdetail .ed-note{font-size:11px;color:var(--amber);margin-left:6px;font-weight:400}
.tdetail .ed-sec textarea{
  width:100%;margin:0;border:0;background:transparent;padding:2px 0;min-height:40px;
  font-size:14px;line-height:1.5;resize:vertical;field-sizing:content;
}
.tdetail .ed-sec textarea:focus{outline:none;box-shadow:none}
.tdetail .ed-doc:focus-within{border-color:var(--blue)}

/* ── 意見協作框 EQT-20260905-008 ── */
.tdetail .composer textarea{min-height:56px;field-sizing:content}
.tdetail .ask-row{display:flex;gap:6px;align-items:center;margin-top:6px}
.tdetail .ask-row input{flex:1;margin:0;font-size:13px;padding:5px 9px}

/* ── 左側功能列：預設收起、可釘選展開（老闆 2026-09-05 指定）────────────────
 *
 * 三種狀態：
 *   收起（預設）  側欄移出畫面；左上角一個 ≡ 按鈕
 *   暫時打開      按 ≡（或鍵盤）→ 側欄以浮層滑入，點遮罩或 ✕ 收回；不改設定
 *   釘選展開      側欄回到版面裡、推開內容，每一頁都開著；由 cookie 記住
 * 開關靠 checkbox，釘選靠表單——沒有腳本也全部能用。
 */
.nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.nav-fab{
  position:fixed;top:12px;left:12px;z-index:60;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--side);color:var(--txt);border:1px solid var(--line);border-radius:9px;
  font-size:20px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.nav-fab:hover{border-color:var(--dim)}
.nav-fab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:49}
.side-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 0}
.pin-form{margin:0}
.pin-btn{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:7px;
  font-size:12px;padding:4px 9px;margin:0;cursor:pointer}
.pin-btn:hover{color:var(--txt);border-color:var(--dim)}
.pin-btn.on{color:var(--blue);border-color:var(--blue)}
.nav-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--line);border-radius:7px;color:var(--dim);cursor:pointer;font-size:14px}
.nav-close:hover{color:var(--txt);border-color:var(--dim)}

/* 收起（預設）：側欄變浮層，先藏在畫面左邊 */
body:not(.nav-pinned) .side{
  position:fixed;top:0;left:0;bottom:0;z-index:50;
  transform:translateX(-100%);transition:transform .18s ease;
  box-shadow:12px 0 32px rgba(0,0,0,.4);
}
body:not(.nav-pinned) .work{padding-left:64px}
.nav-toggle:checked ~ .shell .side{transform:translateX(0)}
.nav-toggle:checked ~ .shell .nav-scrim{display:block}
.nav-toggle:checked ~ .nav-fab{opacity:0;pointer-events:none}

/* 釘選：側欄回到版面裡，推開內容；不需要 ≡ 與遮罩 */
body.nav-pinned .nav-fab{display:none}
body.nav-pinned .nav-scrim{display:none}
body.nav-pinned .nav-close{display:none}
@media (prefers-reduced-motion:reduce){body:not(.nav-pinned) .side{transition:none}}

/* 窄螢幕上釘選也放不下，退回收起的行為 */
@media (max-width:900px){
  body.nav-pinned .side{position:fixed;top:0;left:0;bottom:0;z-index:50;transform:translateX(-100%);
    transition:transform .18s ease;box-shadow:12px 0 32px rgba(0,0,0,.4)}
  body.nav-pinned .nav-fab{display:flex}
  body.nav-pinned .nav-close{display:inline-flex}
  body.nav-pinned .work{padding-left:64px}
  .nav-toggle:checked ~ .shell .side{transform:translateX(0)}
}

/* ── 票頁：單一捲軸、協作人、授權等級、待安排按鈕、Toast（老闆 2026-09-05）── */
.tsb{position:static;max-height:none;overflow:visible}
.tdetail .tsb{position:static}
.no-copy{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit}
.no-copy:hover{color:var(--blue);text-decoration:underline dotted}
.no-copy:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);
  background:var(--panel);color:var(--txt);border:1px solid var(--green);border-left:4px solid var(--green);
  border-radius:6px;padding:10px 16px;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s;z-index:70;
}
.toast-on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.row-actions{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.tsb-edit.inline{flex-basis:auto;margin:0}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px;padding:1px 4px 1px 9px;font-size:12.5px}
.chip-x{margin:0;display:inline}
.chip-x button{background:none;border:0;color:var(--dim);cursor:pointer;padding:0 4px;font-size:14px;line-height:1;margin:0}
.chip-x button:hover{color:var(--red)}
.lvl-L1{color:var(--green)} .lvl-L2{color:var(--amber)} .lvl-L3{color:var(--red)}
.tsb-row .hint{color:var(--dim);font-style:normal}
.tsb-ready{margin:0}
.small-btn.wide{width:100%;padding:8px 12px;font-size:13.5px}

/* ── 版本視窗與設定引導（checkbox 開關，不需腳本）── */
.modal-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ver-btn{cursor:pointer;color:var(--dim)} .ver-btn:hover{color:var(--txt);text-decoration:underline dotted}
.modal-wrap{display:none}
.modal-toggle:checked ~ .modal-wrap{display:block}
.modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:81;width:min(520px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:10px}
.modal-list{margin:0;padding-left:1.2em;font-size:14px;line-height:1.7}
.setup-wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:75;display:flex;align-items:center;justify-content:center}
.setup{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 22px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.setup-list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:12px}
.setup-list p{margin:2px 0 0}

/* SOP 編修頁（EQT-20260905-015） */
.prewrap{white-space:pre-wrap;word-break:break-word;margin:0;font:inherit}
.prewrap.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* 幕僚長對話視窗（EQT-20260905-017） */
.cc{position:fixed;right:18px;bottom:18px;width:min(440px,94vw);max-height:min(78vh,720px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);z-index:90;overflow:hidden}
.cc[hidden]{display:none}
.cc-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.cc-h .cc-hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-log{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.cc-msg{display:flex} .cc-user{justify-content:flex-end}
.cc-bubble{max-width:88%;padding:7px 10px;border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;background:var(--bg)}
.cc-user .cc-bubble{background:var(--accent);color:#fff}
.cc-wait{color:var(--dim)}
.cc-actions{margin:0;padding:0 0 0 1.1em;font-size:13px;line-height:1.6}
.cc-actions .ok{color:var(--ok,#3c9)} .cc-actions .bad{color:var(--danger,#e66)}
.cc-templates{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px;border-top:1px solid var(--line)}
.cc-tpl{font-size:12px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--txt);cursor:pointer}
.cc-tpl:hover{border-color:var(--accent)}
.cc-reload{align-self:flex-start}
.cc-in{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--line);align-items:flex-end}
.cc-input{flex:1;resize:none;min-height:34px;max-height:160px;font:inherit;font-size:13px;padding:7px 9px}
.cc-mic{width:38px;height:34px;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer;font-size:15px}
.cc-mic.on{border-color:var(--danger,#e66);color:var(--danger,#e66)}
.cc-send{height:34px}
.cc-foot{display:flex;gap:14px;padding:6px 12px 10px;font-size:12px}
.cc-list{overflow:auto;max-height:40vh;padding:0 12px 12px;border-top:1px solid var(--line);font-size:13px}
.cc-list .panel{margin:10px 0}
@media (max-width:640px){.cc{right:0;bottom:0;width:100vw;max-height:88vh;border-radius:12px 12px 0 0}}

/* 對話框貼齊幕僚長按鈕（EQT-20260905-018） */
.cc.cc-anchored{right:auto;bottom:auto;overflow:visible}
.cc.cc-anchored>*:not(.cc-tip){position:relative}
.cc-tip{display:none;position:absolute;left:-9px;width:16px;height:16px;background:var(--panel);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);z-index:0}
.cc.cc-anchored .cc-tip{display:block}
.cc.cc-anchored .cc-h{border-radius:12px 12px 0 0;background:var(--panel)}
/* AI 同事協作清單（EQT-20260905-019） */
.ai-pick{position:relative} .ai-pick summary{list-style:none;cursor:pointer;display:inline-block} .ai-pick summary::-webkit-details-marker{display:none}
.ai-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px}
.ai-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--txt);cursor:pointer;font:inherit}
.ai-item:hover:not([disabled]){background:var(--bg)} .ai-item[disabled]{opacity:.5;cursor:not-allowed}
/* 等待頁即時輸出（EQT-20260905-020） */
.live{margin-top:10px;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg)}
.live-steps{list-style:none;margin:6px 0;padding:0;font-size:12px;line-height:1.6}
.live-call{color:var(--dim)} .live-tool{color:var(--accent)} .live-step{color:var(--txt)} .live-note{font-weight:600}
.live-text{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13px;line-height:1.55;margin:6px 0 0}

/* 產出物（EQT-20260905-021／022／024） */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:6px}
.art{border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.art-img{width:100%;max-height:180px;object-fit:contain;border-radius:4px;background:#000}
.art-pdf{width:100%;height:220px;border:0;border-radius:4px;background:#fff}
.art-media{width:100%;max-height:200px}
.art-file{font-size:12px;color:var(--dim);padding:12px 0}
.art-meta{display:flex;flex-direction:column;gap:2px;font-size:13px;word-break:break-all}
.cand{list-style:none;margin:6px 0;padding:0;font-size:13px;line-height:1.8}

/* 團隊管理緊湊版面（EQT-20260905-029） */
.teamwrap{display:flex;gap:14px;align-items:flex-start}
.subnav{position:sticky;top:8px;flex:0 0 172px;width:172px;display:flex;flex-direction:column;gap:2px}
.subnav a{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px;border-radius:6px;font-size:13px;color:var(--dim);text-decoration:none;border:1px solid transparent}
.subnav a:hover{color:var(--txt);background:var(--panel)}
.subnav a.on{color:var(--txt);background:var(--panel);border-color:var(--line);font-weight:600}
.subnav-n{font-size:11px;color:var(--dim);background:var(--bg);border-radius:999px;padding:0 6px}
.seccol{flex:1;min-width:0}
.in-team .panel{padding:12px 14px;margin-bottom:10px}
.in-team .bucket-h h2{font-size:16px}
.in-team .card-h{margin-bottom:6px}
.in-team .hint{font-size:12.5px;margin:4px 0 8px;line-height:1.5}
.in-team .perm-note{font-size:11.5px;margin:4px 0 0}
.in-team .redline{padding:8px 10px;margin:8px 0}
.in-team .redline .small{font-size:12px}
.in-team table th,.in-team table td{padding:4px 7px;font-size:13px}
.in-team label{margin:6px 0 3px;font-size:13px}
.in-team .stats{gap:8px} .in-team .stat{padding:8px 10px} .in-team .stat-n{font-size:18px}
.in-team .addbox summary{font-size:13px}
.note-hidden{display:none!important}
.hint-btn{margin-left:8px;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--dim);font-size:11px;line-height:1;cursor:pointer;padding:0;vertical-align:middle}
.hint-btn:hover,.hint-btn[aria-expanded="true"]{color:var(--txt);border-color:var(--dim)}
.hint-btn.hint-red{color:var(--red);border-color:var(--red)}
.frow{display:grid;grid-template-columns:172px minmax(0,1fr);gap:8px;align-items:center;margin:4px 0}
.frow label{margin:0} .frow input,.frow select,.frow textarea{margin:0}
@media (max-width:760px){.teamwrap{flex-direction:column}.subnav{position:static;width:auto;flex:none;flex-direction:row;flex-wrap:wrap}.frow{grid-template-columns:1fr}}

/* 選項少的下拉改成單選（EQT-20260906-001） */
.radios{display:inline-flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.radios label{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:13px;color:var(--txt);cursor:pointer;white-space:nowrap}
.radios input{margin:0}

/* ─── 稽核軌跡（EQT-20260906-003）─────────────────────────────────────── */
.audit-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; }
.audit-filter .af-group { display: inline-flex; align-items: center; gap: 10px; }
.audit-filter .af-date { display: none; width: 140px; padding: 4px 8px; font-size: 13px; }
.audit-filter:has(input[name=p][value=custom]:checked) .af-date { display: inline-block; }
.audit-filter .af-q { width: 220px; padding: 5px 9px; font-size: 13px; }
.audit-filter select { padding: 4px 8px; font-size: 13px; }
.audit-t td, .audit-t th { font-size: 13px; padding: 5px 8px; vertical-align: top; }
.audit-t .nowrap { white-space: nowrap; }
.audit-t tr.cat-authz td:nth-child(4) { color: var(--amber); }
.audit-t tr.actor-sys td:nth-child(2) { color: var(--dim); }
.audit-t .tag-dim { margin-left: 4px; font-size: 10px; padding: 0 5px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; }
.audit-change { max-width: 380px; }
.audit-change details > summary { cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.audit-change details > summary::-webkit-details-marker { display: none; }
.audit-change details[open] > summary { white-space: normal; color: var(--blue); }
.audit-dl { display: grid; grid-template-columns: 72px 1fr; gap: 3px 10px; margin: 6px 0 2px; padding: 8px 10px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 12.5px; }
.audit-dl dt { color: var(--dim); } .audit-dl dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.audit-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* 帳號與角色：角色就地勾選（EQT-20260906-006，老闆 Q1 決定用勾選框） */
.rolerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rolerow .radios label{margin-right:2px}
.rolereason{width:160px;padding:3px 7px;font-size:12px}

.panel-sub{border:1px solid var(--line);border-radius:10px;padding:10px 12px}

/* ─── 幕僚長工作台（EQT-20260912-001）────────────────────────────────── */
.work-fixed .wb{display:flex;gap:0;height:100%;min-height:0}
.wb-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;min-height:0;padding:0 8px 0 0}
.wb-top{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 8px;border-bottom:1px solid var(--line)}
.wb-title{font-size:17px;font-weight:600}.wb-tools{display:flex;align-items:center;gap:12px;position:relative}
.wb-threads summary{cursor:pointer;font-size:13px}.wb-threads ul{position:absolute;right:0;top:26px;z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 0;margin:0;list-style:none;min-width:280px;max-height:320px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wb-threads li a{display:block;padding:6px 12px;font-size:13px}.wb-threads li a.on{background:var(--bg)}
.wb-log{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 22px;scroll-behavior:smooth}
.wb-composer{flex:0 0 auto;padding:10px 22px 14px;border-top:1px solid var(--line);background:var(--bg)}
.wb-input-row{display:flex;gap:8px;align-items:flex-end}
.wb-input{flex:1;min-height:64px;max-height:200px;resize:vertical;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:10px 12px;font:inherit;font-size:15px}
.wb-send{padding:10px 18px;border-radius:12px;border:0;background:var(--accent);color:#fff;font:inherit;font-size:15px;cursor:pointer}.wb-send:disabled{opacity:.5}
.wb-quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}.wb-q{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:3px 12px;font:inherit;font-size:12.5px;cursor:pointer}.wb-q:hover{color:var(--txt);border-color:var(--blue)}
.wb-msg{margin:0 0 14px;max-width:820px}.wb-user{margin-left:auto}.wb-user .wb-bubble{background:var(--accent);color:#fff;border-radius:14px 14px 4px 14px}
.wb-assistant .wb-bubble{background:var(--panel);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.wb-bubble{padding:10px 14px;font-size:15px;line-height:1.7}.wb-bubble p{margin:0}.wb-bubble p+p{margin-top:6px}
.wb-time{font-size:11px;color:var(--dim);margin-top:3px}.wb-user .wb-time{text-align:right}
.wb-streaming .wb-bubble{border-color:var(--blue)}
.wb-empty{color:var(--dim);max-width:720px;padding:20px 0}.wb-empty ol{padding-left:22px}.wb-empty li{margin:4px 0}
.wb-card{margin-top:8px;background:var(--panel);border:1px solid var(--blue);border-radius:12px;padding:12px 14px}
.wb-card.applied{border-color:var(--green)}
.wb-card-h{font-weight:600;margin-bottom:6px}.wb-card-sub{font-weight:600;font-size:13px;margin:10px 0 4px;color:var(--dim)}
.wb-steps{width:100%;border-collapse:collapse;margin-top:6px}.wb-steps th{text-align:left;color:var(--dim);font-size:12px;padding:3px 6px;border-bottom:1px solid var(--line)}.wb-steps td{padding:4px 6px;border-bottom:1px solid #2a303a;font-size:13.5px;vertical-align:top}
.wb-tkt{border-left:3px solid var(--line);padding:4px 10px;margin:6px 0}
.wb-pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;margin:4px 0 0}
.wb-card-foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.wb-side{flex:0 0 300px;border-left:1px solid var(--line);padding:14px 16px;overflow:auto;background:var(--side)}
.wb-side-h{font-weight:600;font-size:13px;color:var(--dim);letter-spacing:.5px;margin-bottom:8px}
.wb-out{list-style:none;padding:0;margin:0}.wb-out li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
@media (max-width:900px){.work-fixed .wb{flex-direction:column}.wb-side{flex:0 0 auto;border-left:0;border-top:1px solid var(--line);max-height:30vh}}

.wb-groups{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.wb-g{background:transparent;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:3px 12px;font:inherit;font-size:13px;cursor:pointer}
.wb-g.on{background:var(--accent);border-color:var(--accent);color:#fff}
.wb-g-hint{flex-basis:100%}

.wb-gdd{position:relative;display:inline-block}.wb-gdd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 10px}
.wb-gdd summary::-webkit-details-marker{display:none}.wb-gcaret{color:var(--dim);font-size:12px}
.wb-gpanel{position:absolute;left:0;bottom:calc(100% + 6px);z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;min-width:300px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.wb-gfilter{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:5px 8px;font:inherit;font-size:13px}
.wb-glist{list-style:none;margin:6px 0;padding:0;max-height:240px;overflow:auto}.wb-glist li{padding:3px 4px}.wb-glist label{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}

a.brand{text-decoration:none;color:inherit}a.brand:hover .brand-name{color:var(--blue)}

/* ── 編組 Wiki（K3，阿知）：左樹右頁、頂端搜尋 ── */
.wikiwrap{display:flex;gap:16px;align-items:flex-start}
.wikitree{flex:0 0 240px;width:240px;position:sticky;top:8px;max-height:80vh;overflow:auto;font-size:13px}
.wikitree ul{list-style:none;margin:0;padding-left:12px}
.wikitree>ul{padding-left:0}
.wikitree li{margin:1px 0}
.wikitree .dir{color:var(--dim);font-weight:600;padding:3px 0}
.wikitree a{display:block;padding:3px 6px;border-radius:5px;color:var(--txt);text-decoration:none}
.wikitree a:hover{background:var(--panel)}
.wikitree a.on{background:var(--panel);border:1px solid var(--line);font-weight:600}
.wikipage{flex:1;min-width:0}
.wikibody{line-height:1.7;font-size:14px}
.wikibody h1,.wikibody h2,.wikibody h3{margin:14px 0 6px;font-size:15px}
.wikibody p{margin:6px 0}
.wikibody ul{margin:4px 0 4px 18px}
.wikibody a.wl{color:var(--acc);text-decoration:none;border-bottom:1px dotted var(--acc)}
.wikibody a.wl.miss{color:var(--dim);border-bottom-style:dashed}
.wikisearch{display:flex;gap:6px;margin:8px 0 12px}
.wikisearch input{flex:1}
.wikihit{padding:6px 0;border-bottom:1px solid var(--line)}
/* 打字中的樣態（老闆 2026-09-13） */
.wb-think{color:var(--dim)}
.wb-dots::after{content:'…';display:inline-block;width:1.2em;text-align:left;animation:wb-dots 1.2s steps(4,end) infinite}
@keyframes wb-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.wb-streaming .wb-bubble p::after{content:'▍';color:var(--blue);animation:wb-caret 0.9s steps(2,end) infinite;margin-left:1px}
.wb-streaming .wb-bubble p:has(.wb-think)::after{content:''}
@keyframes wb-caret{50%{opacity:0}}

/* 回覆選項按鈕（老闆 2026-09-13） */
.wb-opts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.wb-opt{background:var(--panel);border:1px solid var(--blue);color:var(--txt);border-radius:999px;padding:5px 14px;font:inherit;font-size:13px;cursor:pointer}
.wb-opt:hover{background:var(--blue);color:#fff}
.wb-opt[disabled]{opacity:.45;cursor:default;border-color:var(--line)}
.wb-opt[disabled]:hover{background:var(--panel);color:var(--txt)}
.wb-opt.wb-other{border-style:dashed;color:var(--dim)}
/* AI 對話紀錄 */
.ai-pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.6;max-height:60vh;overflow:auto;margin:6px 0}
.ai-row{margin:8px 0;padding-left:10px;border-left:3px solid var(--line)}
.ai-row.ai-assistant{border-left-color:var(--blue)}
.ai-row.ai-tool{border-left-color:var(--dim)}
.audit-filter .af-t{width:150px;padding:4px 8px;font-size:13px}
.wb-card-opts{margin-top:0}
.wb-opt.wb-yes{background:var(--blue);color:#fff}
.wb-opt.wb-yes:hover{filter:brightness(1.1)}
.wb-opt.wb-no{border-color:var(--red,#c33);color:var(--red,#c33)}
.wb-opt.wb-no:hover{background:var(--red,#c33);color:#fff}
.design-doc h1{font-size:18px;margin:0 0 10px}.design-doc h2{font-size:16px;margin:22px 0 8px;padding-top:6px;border-top:1px solid var(--line)}.design-doc li{margin:4px 0}
.side-sub{display:block;margin:2px 0 6px 14px;padding:4px 10px;font-size:12.5px;color:var(--dim);text-decoration:none;border-radius:6px}.side-sub:hover{color:var(--txt);background:#232a34}.side-sub.on{color:#eef2f7;background:var(--accent)}