/* hub2 網頁。版面見 docs/看板.md 5.1–5.5（tony 261102 網頁第二批，草稿待定稿）。
   色彩全部是 CSS 變數、集中在這一段；三套配色用 <html data-theme="a|b|c">（網址 ?theme=a|b|c，預設 A）。
   每崗固定一色（--c-plan 計畫紫、--c-exec 執行藍、--c-judge 裁判橘、--c-tony、--c-architect）；
   狀態色只用在重點（--bad 紅＝出事、--warn 黃＝在等、--ok 綠＝PASS），其他淡化。 */

/* A：深色高對比（預設） */
:root, :root[data-theme="a"] {
  --bg:#0b0d12; --panel:#151922; --side:#10131a; --line:#2b3240; --fg:#f2f4f8; --muted:#8a93a6;
  --acc:#7aa2ff; --on-acc:#0b0e13; --ok:#3ddc84; --warn:#ffd23f; --bad:#ff4d4f;
  --yellow-bg:#3a3110; --red-bg:#4a1416; --dim:.5;
  --c-plan:#b388ff; --c-exec:#4da3ff; --c-judge:#ff9a3c; --c-tony:#ff6eb4; --c-architect:#2ee6c5; --c-other:#8a93a6;
}
/* B：深色柔和 */
:root[data-theme="b"] {
  --bg:#1d2027; --panel:#252a33; --side:#20242c; --line:#343a46; --fg:#d8dce4; --muted:#8c94a3;
  --acc:#8fa8d8; --on-acc:#14171d; --ok:#7fbf8f; --warn:#d9b85c; --bad:#e07a78;
  --yellow-bg:#39331f; --red-bg:#432728; --dim:.55;
  --c-plan:#a891d6; --c-exec:#7ea3d6; --c-judge:#d9a066; --c-tony:#d68fb3; --c-architect:#74c2b0; --c-other:#8c94a3;
}
/* C：淺色 */
:root[data-theme="c"] {
  --bg:#f6f7f9; --panel:#ffffff; --side:#eef0f4; --line:#d9dde5; --fg:#1b1f27; --muted:#6b7280;
  --acc:#2f5bd3; --on-acc:#ffffff; --ok:#138a3e; --warn:#a86b00; --bad:#c62828;
  --yellow-bg:#fff2c2; --red-bg:#fde0df; --dim:.55;
  --c-plan:#7c3aed; --c-exec:#1d6fd6; --c-judge:#d9620b; --c-tony:#c2185b; --c-architect:#0f8f7e; --c-other:#6b7280;
}
.c-plan { --who:var(--c-plan); } .c-exec { --who:var(--c-exec); } .c-judge { --who:var(--c-judge); }
.c-tony { --who:var(--c-tony); } .c-architect { --who:var(--c-architect); } .c-other { --who:var(--c-other); }

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:15px/1.6 system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
.grow { flex:1; }
button { background:var(--acc); color:var(--on-acc); border:0; border-radius:6px; padding:6px 12px; font:inherit; cursor:pointer; }
button.alt, button.tab, button.post, button.nav { background:transparent; color:var(--fg); border:1px solid var(--line); }
button.small { padding:0 8px; font-size:12px; }
button:disabled { opacity:.4; cursor:default; }
button.on { border-color:var(--acc); color:var(--acc); }
input, textarea { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:8px; font:inherit; }
main { padding:16px; }
h3 { margin:0 0 8px; font-size:15px; } h4 { margin:12px 0 6px; font-size:13px; color:var(--muted); }
.status { flex:none; padding:4px 16px; background:var(--panel); color:var(--warn); border-bottom:1px solid var(--line); }
/* 被別的分頁接手（單 22-000E）：字＋「在這裡接手」鈕同一列 */
.status-taken { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.status-taken button.takeover { padding:2px 12px; }
.muted { color:var(--muted); } .ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); }
.small { font-size:12px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.click { cursor:pointer; }
.yellow { background:var(--yellow-bg); } .red { background:var(--red-bg); }
.who { color:var(--who); font-weight:600; }
/* 事件圖示（常數.md 5.2；圖示由 GET /config/icons 給） */
.ic { display:inline-block; margin-right:3px; font-style:normal; line-height:1;
      font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif; }
.pdot { display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--who); }
.loginbar { padding:6px 16px; border-bottom:1px solid var(--line); background:var(--panel); }
.login { max-width:420px; margin:40px auto; display:flex; flex-direction:column; gap:10px; }
.login form { display:flex; flex-direction:column; gap:8px; }

/* 整頁不捲：固定左側欄（寬 200px＝常數 SIDEBAR_W_PX）＋右邊（跑馬燈＋頁面，各區自己捲）。 */
.app-full { height:100vh; height:100dvh; display:grid; grid-template-columns:200px minmax(0,1fr); overflow:hidden; }
.mainwrap { min-width:0; min-height:0; display:flex; flex-direction:column; }
.mainwrap > main { flex:1; min-height:0; padding:0; display:flex; flex-direction:column; }
.topline { flex:none; display:flex; align-items:center; border-bottom:1px solid var(--line); background:var(--bg); }
.menubtn { display:none; flex:none; margin:2px 0 2px 8px; padding:0 10px; }

/* 左側欄（看板.md 5.1） */
.side { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding:10px 8px;
        background:var(--side); border-right:1px solid var(--line); font-size:13px; }
.side .brand { font-weight:700; font-size:22px; padding:0 4px 4px; letter-spacing:.5px; }
.snav { display:flex; flex-direction:column; gap:4px; }
.snav .nav { text-align:left; padding:4px 10px; border-color:transparent; }
.snav .nav.on { border-color:var(--acc); color:var(--acc); background:var(--panel); }
.auto { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; padding:4px; color:var(--muted); }
.auto label { display:flex; align-items:center; gap:4px; cursor:not-allowed; }
.auto.can label { cursor:pointer; color:var(--fg); }
.auto input { width:auto; margin:0; }
.auto input:disabled { cursor:not-allowed; }
.auto .mode { color:var(--fg); }
.auto.on .mode { color:var(--acc); font-weight:700; }
.auto .merr { flex-basis:100%; overflow-wrap:anywhere; }
.side h4 { margin:8px 4px 2px; }
.sposts { display:flex; flex-direction:column; gap:6px; }
.spost { border:1px solid var(--line); border-left:4px solid var(--who); border-radius:6px; padding:3px 6px; background:var(--panel);
         line-height:1.45; }
.spost > div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spost .l1 { display:flex; align-items:center; gap:5px; font-size:12.5px; }
.spost .l1 .ctx { font-size:11px; color:var(--muted); }
.spost .l1 .ctx.warn { color:var(--warn); font-weight:700; } .spost .l1 .ctx.bad { color:var(--bad); font-weight:700; }
.spost .l1 .ctx { margin-left:auto; }
.spost .l2, .spost .l3 { font-size:11.5px; color:var(--muted); }
.spost .st { color:var(--muted); }
/* 正在跑的崗亮框亮底；閒置變暗 */
.spost.idle { opacity:var(--dim); }
.spost.busy { opacity:1; border-color:var(--who); background:color-mix(in srgb, var(--who) 16%, var(--panel));
              box-shadow:0 0 0 1px var(--who), 0 0 14px color-mix(in srgb, var(--who) 50%, transparent); }
.spost.busy .st { color:var(--who); font-weight:700; }
.spost.busy .l2, .spost.busy .l3 { color:var(--fg); }
.spost.red { opacity:1; background:var(--red-bg); border-color:var(--bad); }
.spost.yellow { background:var(--yellow-bg); }
.smachs { display:flex; flex-direction:column; gap:2px; }
.smach { display:flex; gap:6px; align-items:baseline; padding:1px 4px; border-radius:4px; cursor:pointer; white-space:nowrap; color:var(--muted); }
.smach:hover { background:var(--panel); }
.smach .mname { overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; color:var(--fg); }
.smach .llm { font-size:11px; }
.smach .llm.on { color:var(--fg); font-weight:600; }
.smach.warn { background:var(--yellow-bg); color:var(--warn); }
.smach.bad { background:var(--red-bg); color:var(--bad); }
.smach.warn .mname, .smach.bad .mname { color:inherit; font-weight:600; }
.sfoot { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 4px 0; border-top:1px solid var(--line); }

/* 跑馬燈（5.3）：置頂（紅燈、報警、機器紅）固定在左；其他一行捲動，滑鼠移上去暫停。 */
.marquee { flex:1; min-width:0; display:flex; gap:12px; align-items:center; padding:3px 16px; font-size:13px;
           white-space:nowrap; overflow:hidden; }
.marquee .pins { flex:none; display:flex; gap:12px; max-width:60%; overflow:hidden; }
.marquee .roll { flex:1; min-width:0; overflow:hidden; }
.marquee .track { display:inline-flex; gap:24px; animation:mq 80s linear infinite; }
.marquee .track .gap { width:48px; }
.marquee .roll:hover .track { animation-play-state:paused; }
@keyframes mq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.mq { color:var(--muted); }
.mq.red { color:var(--bad); font-weight:600; background:transparent; }
.mq.yellow { color:var(--warn); background:transparent; }
.mq.click:hover { text-decoration:underline; }

/* 對話頁（建築師看板，tony 261104）：看板為主（占剩下的全部高度與寬度）；上面一行信件跑馬燈（點開展開原清單）；
   「<登入者> ↔ 崗位」對話預設收起成一行（標題＋未讀數），點開才展開。各區塊都能收合，狀態記在 localStorage。 */
.chat { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:8px 16px; }
.chat .talkcol, .ccs { min-height:0; display:flex; flex-direction:column; }
.chat h3 { flex:none; }
.talk, .cclist { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.ccs { flex:none; }
.talkwrap { flex:none; display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); border-radius:8px; padding:4px 10px; }
.talkwrap.open { flex:0 1 38%; }
.talkwrap .talk { min-height:120px; }
.fold { flex:none; cursor:pointer; user-select:none; display:flex; gap:6px; align-items:center; font-weight:600; padding:2px 0; }
.fold .caret { color:var(--muted); width:1em; }
.fold .count { font-weight:400; color:var(--muted); }
.fold .unread { background:var(--acc); color:var(--on-acc); border-radius:10px; padding:0 8px; font-size:12px; font-weight:600; }
.mailtick { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:8px; padding:2px 10px; cursor:pointer; font-size:13px; }
.mailtick .roll { flex:1; min-width:0; overflow:hidden; }
.mailtick .track { display:inline-flex; gap:24px; white-space:nowrap; animation:mq 60s linear infinite; }
.mailtick:hover .track { animation-play-state:paused; }
.mailtick .tk.tone-red { color:var(--bad); font-weight:600; } .mailtick .tk.tone-yellow { color:var(--warn); } .mailtick .tk.tone-plain { color:var(--muted); }
.mailtick .lab { flex:none; font-weight:600; }
.ccs .cclist { max-height:22vh; margin-top:4px; }
/* 建築師看板：大區，捲在自己裡面；寬螢幕兩欄（要你做通欄置頂） */
/* 各框自己捲（tony 261104）：整頁固定視窗高度、外層不出捲軸；展開的框平分剩下的高度、內容超過就框內捲；收合的框只佔標題列；
   「要你做」依內容高、上限 BOARD6_TODO_MAX_DVH（inline style）。窄螢幕見最後的 @media。 */
.board6 { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.b6cols { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.b6col { min-height:0; display:flex; flex-direction:column; gap:10px; }
.b6sec { display:flex; flex-direction:column; min-height:0; flex:none; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 12px 8px; min-width:0; }
.b6col > .b6sec.open { flex:1 1 0; min-height:96px; }  /* 太擠時框不再縮到看不見，改由 .b6cols 兜底捲動 */
.b6sec.todo.open { flex:0 1 auto; }
.b6sec.mails.open { flex:0 1 auto; }  /* 規格信：在「要你做」下面，高度依內容、上限 BOARD6_MAIL_MAX_DVH（inline style） */
.b6row .mailbody { white-space:pre-wrap; word-break:break-word; margin:4px 0; }
.b6row .files { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.b6body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.b6sec.wide { grid-column:1 / -1; }
.b6sec.todo { border:2px solid var(--bad); }
.b6sec.todo.none { border:1px solid var(--line); }
.b6sec.todo .fold { color:var(--bad); } .b6sec.todo.none .fold { color:inherit; }
.b6row { border-top:1px solid var(--line); padding:6px 0; }
.b6row:first-of-type { border-top:0; }
.b6row .head { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.b6row .tag { font-size:12px; border:1px solid var(--line); border-radius:4px; padding:0 6px; color:var(--muted); }
.b6row .why, .b6row .sum { color:var(--muted); }
.b6row pre.cmd { margin:4px 0; padding:6px 8px; background:var(--bg); border-radius:6px; white-space:pre-wrap; word-break:break-all; max-height:30vh; overflow:auto; }
.b6row .acts { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.b6row .acts input { flex:1; min-width:8em; }
.bar { height:8px; background:var(--bg); border-radius:4px; overflow:hidden; margin:4px 0; }
.bar > i { display:block; height:100%; background:var(--acc); }
.b6row.dim { opacity:.65; }
.b6row details summary { cursor:pointer; color:var(--muted); }
.b6add { display:flex; gap:6px; align-items:flex-end; margin-bottom:6px; }
.b6add textarea { flex:1; min-width:0; resize:vertical; max-height:20vh; }
.b6err { flex:none; }
.saybar { flex:none; display:flex; flex-direction:column; gap:6px; padding:8px 0 0; border-top:1px solid var(--line); }
.saybar .posts { display:flex; flex-wrap:wrap; gap:8px; }
.saybar .post { color:var(--who); }
.saybar .post.on { border-color:var(--who); background:color-mix(in srgb, var(--who) 18%, transparent); color:var(--who); }
.utter { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--who); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.loose { background:var(--panel); border:1px dashed var(--line); border-left:3px solid var(--who); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.utter > .text, .loose > .text, .reply .text, .cc .text { white-space:pre-wrap; word-break:break-word; }
.reply { margin:8px 0 0 20px; padding:6px 8px; border-left:3px solid var(--who); background:var(--bg); border-radius:0 6px 6px 0; }
.meta { font-size:13px; overflow-wrap:anywhere; }
.say { display:flex; gap:8px; align-items:flex-end; }
.say textarea { flex:1; min-width:0; resize:vertical; max-height:30vh; }
.say button { flex:none; }
/* 窄欄一行一封；點了展開。紅＝FAIL／紅燈、黃＝在等、一般淡色 */
.cc { padding:2px 4px; border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; border-radius:3px; }
.cc .ccline { display:flex; gap:4px; align-items:center; white-space:nowrap; overflow:hidden; }
.cc .ccline .who { flex:none; font-weight:500; }
.cc .ccline .arrow { flex:none; color:var(--muted); }
.cc .cctext { overflow:hidden; text-overflow:ellipsis; min-width:0; margin-left:4px; }
.cc.tone-plain { opacity:.62; }
.cc.tone-plain:hover, .cc.open { opacity:1; }
.cc.tone-yellow { background:var(--yellow-bg); }
.cc.tone-yellow .cctext { color:var(--warn); }
.cc.tone-red { background:var(--red-bg); }
.cc.tone-red .cctext { color:var(--bad); font-weight:600; }
.ccfull { padding:4px 0 4px 12px; }

/* 看板頁（5.4）：上排 專案｜工作板｜換人板｜開 repo 板、下排 叫醒板｜信件看板｜合併板｜部署板；各塊各自捲、由舊到新最新在底。 */
.board { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 16px; }
.btabs { display:none; }
.grid { flex:1; min-height:0; display:grid; gap:8px;
        grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
/* 上排 4 塊（專案、工作、換人、開 repo）、下排 4 塊（叫醒、信件、合併、部署）各 3 欄 */
.p-project, .p-work, .p-handoff, .p-forge { grid-column:span 3; }
.p-wake, .p-mail, .p-merge, .p-deploy { grid-column:span 3; }
.panel { min-height:0; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.panel h3 { margin:0; padding:4px 10px; font-size:14px; border-bottom:1px solid var(--line); }
.panel .hint { font-weight:normal; font-size:12px; margin-left:8px; }
.rows { flex:1; min-height:0; overflow-y:auto; }
.row { padding:3px 10px; border-bottom:1px solid var(--line); font-size:13px; }
.row .main { display:flex; gap:6px; align-items:center; white-space:nowrap; overflow:hidden; }
.row .main .line { overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.row .main .flag { color:var(--warn); }
.row.red .main .flag { color:var(--bad); }
.row .sec { display:none; font-size:12px; overflow-wrap:anywhere; }
.row:hover .sec, .row.sel .sec { display:block; }
.row.click:hover { background:var(--bg); }
.row.sel { box-shadow:inset 3px 0 0 var(--acc); }

/* 機器頁（5.5） */
.machines { flex:1; min-height:0; overflow:auto; padding:12px 16px; }
.mtable { overflow-x:auto; }
.machines table { width:100%; border-collapse:collapse; font-size:13px; }
.machines th, .machines td { text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
.machines th { color:var(--muted); font-weight:500; }

/* 右側抽屜（5.4）：細節滑出；「關」或 Esc 關。 */
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(560px, 92vw); z-index:20; display:flex; flex-direction:column;
          background:var(--bg); border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,.35); animation:slidein .18s ease-out; }
@keyframes slidein { from { transform:translateX(100%); } to { transform:none; } }
.dhead { flex:none; display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--panel); }
.dbody { flex:1; min-height:0; overflow-y:auto; padding:8px 12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px; margin:8px 0 16px; }
.card pre { white-space:pre-wrap; word-break:break-word; background:var(--bg); padding:8px; border-radius:6px; }
.card table { width:100%; border-collapse:collapse; font-size:13px; }
.card th, .card td { text-align:left; padding:3px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.card td.line { max-width:220px; overflow-wrap:anywhere; }
.verdict { margin:8px 0; }
.card pre.summary { max-height:50vh; overflow:auto; white-space:pre-wrap; }
.scrim { display:none; }

/* 窄螢幕（≤ 800px＝常數 NARROW_BREAKPOINT_PX）：左側欄收成左上角選單鈕（點了從左邊滑出）；對話頁上下疊；看板頁上方分頁；抽屜全寬。 */
@media (max-width: 800px) {
  .app-full { grid-template-columns:minmax(0,1fr); }
  .side { position:fixed; top:0; left:0; bottom:0; width:240px; z-index:40; transform:translateX(-100%); transition:transform .15s; }
  .menu-open .side { transform:none; box-shadow:8px 0 24px rgba(0,0,0,.35); }
  .scrim { display:block; position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.35); }
  .menubtn { display:inline-block; }
  .marquee { padding:3px 8px; }
  .chat { gap:6px; padding:8px 16px; }
  .board { padding:6px 8px; }
  .btabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; flex:none; }
  .btabs .tab { padding:2px 10px; }
  .grid { display:flex; flex-direction:column; }
  .panel { display:none; flex:1; }
  .panel.on { display:flex; }
  .drawer { width:100vw; }
  .marquee .pins { max-width:50%; }
  /* 對話頁退回整頁捲動：外層可捲、各框不再自己捲、不限高 */
  .app-full.page-chat { height:auto; min-height:100vh; min-height:100dvh; overflow:visible; }
  .page-chat .mainwrap, .page-chat .mainwrap > main { display:block; min-height:0; overflow:visible; }
  .page-chat .topline { position:sticky; top:0; z-index:20; }
  .page-chat .chat, .page-chat .board6, .page-chat .b6cols, .page-chat .b6col { display:block; }
  .page-chat .chat > *, .page-chat .b6sec, .page-chat .board6 > * { margin-bottom:8px; }
  .page-chat .b6sec.todo { max-height:none !important; }
  .page-chat .b6cols { overflow:visible; }
  .page-chat .b6body, .page-chat .talk, .page-chat .ccs .cclist { overflow:visible; max-height:none; }
}

/* CPI 頁（5.6）：沿用機器頁表格；金額欄靠右 */
.cpi h4 { margin:14px 0 4px; color:var(--muted); font-weight:500; }
.cpi-period { display:flex; gap:6px; margin:6px 0 10px; }
.cpi-period .tab.on { border-color:var(--acc); color:var(--acc); }
.cpi-head { margin:6px 0; }
.cpi td.num { text-align:right; font-variant-numeric:tabular-nums; }