/* tct-ui.css ── 泰昌堂內部系統共用樣式（正本在 湯agent/000_Agent/skills/tct-internal-ui/）
   用法：每個 repo 複製一份到自己的靜態目錄，在每頁 <head> 先載 Google Fonts，再載本檔，最後才是頁面自己的 <style>。
   頁面自己的變數請改成「引用」這裡的 --tct-*，不要再定義另一個綠。 2026-09-20 */
:root{
  --tct-green:#577B53;          /* CIS 主色（官網值，2026-09-07 定案）；停用 #5B7A54 */
  --tct-green-dark:#46603F;
  --tct-green-soft:#EDF1EA;
  --tct-gold:#D3BC8C;
  --tct-gold-deep:#A8905C;
  --tct-gold-soft:#F5EEDF;
  --tct-bg:#FAF7F0;             /* 後台米白；對外民眾端維持白底 */
  --tct-surface:#FFFFFF;
  --tct-surface-2:#F3EEE0;
  --tct-ink:#2B2E29;
  --tct-ink-2:#5E635A;
  --tct-ink-3:#8A8F82;
  --tct-line:#E4DCC9;
  --tct-danger:#B24B3C;
  --tct-danger-soft:#F7E7E3;
  --tct-success:#3E7A4C;
  --tct-success-soft:#E3EFE4;
  --tct-radius:8px;
  --tct-radius-lg:14px;         /* 觸控床卡這類大物件才用 */
  --tct-shadow:0 1px 2px rgba(43,46,41,.06),0 6px 20px rgba(43,46,41,.08);
  --tct-font:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --tct-font-display:"Noto Serif TC","Songti TC",serif;
  /* 標題字重 500（2026-09-20 阿湯裁決）：CIS 標準字是金萱 3.0 Bold，網頁替代的
     Noto Serif TC 700 對中文明體過於厚重，一律用 Medium。不要在標題寫 700/bold。 */
  --tct-weight-title:500;
  --tct-font-num:"Helvetica Neue",Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%}
/* 標題不要用瀏覽器預設的 bold（對中文明體太重）；各頁若要更重請改 --tct-weight-title */
h1,h2,h3{font-weight:var(--tct-weight-title)}
body{margin:0;font-family:var(--tct-font);font-size:16px;line-height:1.6;color:var(--tct-ink);background:var(--tct-bg)}

/* 頂欄：綠底 60px。左 logo＋「泰昌堂｜系統名」；右 角色標籤 → 名字 → 連結 → 登出 */
.tct-topbar{background:var(--tct-green);color:#fff;min-height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:50}
.tct-topbar .tct-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--tct-font-display);font-size:18px;font-weight:var(--tct-weight-title);letter-spacing:.02em;white-space:nowrap;min-width:0;flex-shrink:1}
.tct-topbar .tct-brand img{flex-shrink:0}
.tct-topbar .tct-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tct-topbar .tct-brand img{width:32px;height:32px;border-radius:50%;background:#fff;object-fit:contain}
.tct-topbar .tct-brand .tct-sep{opacity:.55;font-weight:400;margin:0 2px}
.tct-topbar .tct-who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:15px;white-space:nowrap;flex-shrink:0}
.tct-topbar .tct-who a{color:#fff;text-decoration:none;opacity:.9}
.tct-topbar .tct-role{display:inline-block;font-size:12.5px;padding:1px 10px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45)}
.tct-topbar .tct-logout{background:#fff;color:var(--tct-green);border:1px solid #fff;border-radius:var(--tct-radius);padding:6px 14px;font-size:15px;font-family:inherit;cursor:pointer}
.tct-topbar select{font-family:inherit;font-size:15px;border-radius:var(--tct-radius);border:1px solid rgba(255,255,255,.6);background:#fff;color:var(--tct-ink);padding:5px 8px}
/* 「系統首頁」鈕（2026-10-08 阿湯）：每套系統右上角一顆，回 https://auth.taichangtang.com/ 挑別的系統。
   放在 .tct-who 最前面（角色標籤左邊），同分頁開。只給電腦用：手機寬度（600px 以下）整顆藏起來（阿湯：電腦有就好）。標記：
   <a class="tct-home" href="https://auth.taichangtang.com/" title="回泰昌堂系統首頁，換到別的系統"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 11.5 12 4l9 7.5M5.5 9.5V20h5v-6h3v6h5V9.5"/></svg><span class="tct-home-text">系統首頁</span></a> */
.tct-topbar a.tct-home{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:var(--tct-radius);border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14);color:#fff;font-size:15px;font-family:inherit;text-decoration:none;opacity:1;white-space:nowrap;flex-shrink:0;box-sizing:border-box}
.tct-topbar a.tct-home:hover{background:rgba(255,255,255,.28);border-color:#fff;color:#fff}
.tct-topbar a.tct-home svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media (max-width:600px){.tct-topbar a.tct-home{display:none}}

/* 頁籤：頂欄正下方一列，底線式 */
.tct-tabs{display:flex;gap:2px;border-bottom:1px solid var(--tct-line);background:var(--tct-surface);padding:0 12px;overflow-x:auto;scrollbar-width:thin}
.tct-tabs button,.tct-tabs a{background:none;border:0;border-bottom:3px solid transparent;padding:13px 14px;font-size:16px;font-family:inherit;color:var(--tct-ink-2);cursor:pointer;white-space:nowrap;text-decoration:none}
.tct-tabs button[aria-selected=true],.tct-tabs .active{color:var(--tct-green);border-bottom-color:var(--tct-green);font-weight:500}
.tct-tabs button:focus-visible,.tct-tabs a:focus-visible{outline:2px solid var(--tct-green);outline-offset:-2px}

/* 按鈕 */
.tct-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:16px;font-family:inherit;padding:9px 18px;border-radius:var(--tct-radius);border:1px solid var(--tct-green);background:var(--tct-surface);color:var(--tct-green);cursor:pointer;line-height:1.2;text-decoration:none}
.tct-btn.primary{background:var(--tct-green);color:#fff}
.tct-btn.primary:hover{background:var(--tct-green-dark)}
.tct-btn.danger{border-color:var(--tct-danger);color:var(--tct-danger)}
.tct-btn:disabled{opacity:.5;cursor:not-allowed}
.tct-btn:focus-visible{outline:2px solid var(--tct-green);outline-offset:2px}

/* 登入卡：圓印 logo、系統名、一句用途、綠色主鈕「用泰昌堂帳號登入」；本地帳密收成卡底小連結 */
/* 用 block+margin 而不是 flex：各系統的 JS 常寫 el.style.display='block'，inline 樣式會蓋掉 flex 讓卡片貼頂 */
.tct-login{padding:min(11vh,88px) 16px 24px}
.tct-login-card{width:100%;max-width:400px;margin:0 auto;background:var(--tct-surface);border:1px solid var(--tct-line);border-radius:var(--tct-radius-lg);padding:36px 32px;text-align:center;box-shadow:var(--tct-shadow)}
.tct-login-card img{width:56px;height:56px;border-radius:50%;margin-bottom:12px}
.tct-login-card h1{font-family:var(--tct-font-display);font-size:22px;font-weight:var(--tct-weight-title);color:var(--tct-green);margin:0 0 6px}
.tct-login-card p{margin:0 0 20px;color:var(--tct-ink-2);font-size:15px}
.tct-login-card .tct-btn{width:100%}
.tct-login-card .tct-alt{display:block;margin-top:16px;font-size:14px;color:var(--tct-ink-3)}
.tct-login-card .tct-alt a{color:var(--tct-ink-2)}

/* 窄螢幕：頂欄容許折行；角色標籤先收起，登出永遠看得到 */
@media (max-width:760px){
  .tct-topbar{flex-wrap:wrap;padding:8px 16px;min-height:0;row-gap:6px}
  .tct-topbar .tct-brand{font-size:16px}
  .tct-topbar .tct-role{display:none}
  .tct-login{padding-top:6vh}
}

/* ── 按鈕手感（2026-09-28 全系統標準）──────────────────────────────
   阿湯 09-15 針灸、09-27 請款用印兩次反映「按了沒感覺」：按下縮一點變暗一點、送出中轉圈不能連按。
   一律包在 :where() 裡（權重 0）：各系統自己的樣式載在後面，要關掉或改寫都蓋得過，不會弄壞既有版面。
   iOS Safari 要搭配 tct-press.js（touchstart 監聽）才會套 :active；.is-busy 也由它自動加上。 */
:where(button,.btn,.tct-btn,[role=button],[data-press],.tct-tabs a,.chip,.tct-chip,a.item,.tct-card-link){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(button,.btn,.tct-btn,[role=button],[data-press],.tct-tabs a,.chip,.tct-chip){transition:transform 80ms ease,filter 80ms ease,background-color 120ms ease}
:where(button,.btn,.tct-btn,[role=button],[data-press],.tct-tabs a,.chip,.tct-chip):where(:active:not(:disabled):not(.is-busy)){transform:scale(.96);filter:brightness(.88)}
/* 清單卡片面積大，縮太多會晃：只縮 2% */
:where(a.item,.tct-card-link){transition:transform 80ms ease,filter 80ms ease}
:where(a.item,.tct-card-link):where(:active){transform:scale(.98);filter:brightness(.94)}
@media (hover:hover) and (pointer:fine){
  :where(.btn,.tct-btn,[role=button],.chip,.tct-chip):where(:hover:not(:disabled):not(.is-busy)){filter:brightness(.95)}
  :where(a.item,.tct-card-link):where(:hover){filter:brightness(.98)}
}
:where(button,.btn,.tct-btn,[role=button],[data-press],.chip,.tct-chip,a.item,.tct-card-link):where(:focus-visible){outline:2px solid var(--tct-green);outline-offset:2px}
/* 送出中：停用＋轉圈（圈在文字後面，用 ::after），不能再按 */
.is-busy{cursor:progress;pointer-events:none;opacity:.75}
.tct-btn.is-busy:disabled{opacity:.75}
.is-busy::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.45em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;box-sizing:border-box;animation:tct-press-spin .7s linear infinite}
@keyframes tct-press-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  :where(button,.btn,.tct-btn,[role=button],[data-press],.tct-tabs a,.chip,.tct-chip,a.item,.tct-card-link){transition:none}
  :where(button,.btn,.tct-btn,[role=button],[data-press],.tct-tabs a,.chip,.tct-chip,a.item,.tct-card-link):where(:active){transform:none}
  .is-busy::after{animation-duration:1.6s}
}

/* ── 帳號選單與九宮格（2026-10-08）────────────────────────────────
   搭配 tct-account.js：a.tct-home 拿到名單後點開「九宮格」（有權限的系統），頂欄人名 [data-tct-user] 點開帳號選單。
   小程式自己會在 <body> 末端建彈出卡片（position:fixed，對齊觸發元素右緣）。只給電腦用：600px 以下整段藏起來。 */
.tct-acct-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:4px;border-radius:var(--tct-radius);padding:4px 8px;margin:-4px -2px;transition:background-color 120ms ease}
.tct-topbar .tct-acct-trigger:hover,.tct-topbar .tct-acct-trigger[aria-expanded=true]{background:rgba(255,255,255,.18)}
.tct-acct-trigger:not(.tct-topbar *):hover,.tct-acct-trigger:not(.tct-topbar *)[aria-expanded=true]{background:var(--tct-green-soft)}
.tct-acct-trigger:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tct-acct-caret{font-size:16px;line-height:1;opacity:.85}
.tct-topbar a.tct-home[aria-expanded=true]{background:rgba(255,255,255,.28);border-color:#fff}

.tct-acct-pop{position:fixed;z-index:1100;top:68px;right:16px;background:var(--tct-surface);color:var(--tct-ink);border:1px solid var(--tct-line);border-radius:var(--tct-radius-lg);box-shadow:var(--tct-shadow),0 12px 32px rgba(43,46,41,.14);font-family:var(--tct-font);font-size:16px;line-height:1.5;box-sizing:border-box;text-align:left}
.tct-acct-pop[hidden]{display:none}
.tct-acct-pop a{text-decoration:none;color:inherit}

/* 九宮格 */
.tct-launcher{width:372px;padding:14px 12px 10px}
.tct-launcher-head{font-family:var(--tct-font-display);font-weight:var(--tct-weight-title);font-size:17px;color:var(--tct-green);padding:0 6px 10px}
.tct-launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tct-launcher.is-scroll .tct-launcher-grid{max-height:348px;overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.tct-launcher-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 4px 12px;border-radius:var(--tct-radius);border:1px solid transparent;min-height:110px;box-sizing:border-box}
.tct-launcher-item:hover{background:var(--tct-green-soft)}
.tct-launcher-item:focus-visible{outline:2px solid var(--tct-green);outline-offset:-2px;background:var(--tct-green-soft)}
.tct-launcher-item.is-current{border-color:var(--tct-gold);background:var(--tct-gold-soft)}
.tct-launcher-icon svg{display:block;width:40px;height:40px}
.tct-launcher-icon .tct-acct-icon-bg{fill:var(--tct-green)}
.tct-launcher-name{font-size:16px;color:var(--tct-ink);text-align:center;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.tct-launcher-now{position:absolute;top:-1px;right:-1px;font-size:15px;line-height:1.3;padding:0 7px;border-radius:0 var(--tct-radius) 0 var(--tct-radius);background:var(--tct-gold);color:var(--tct-ink)}
.tct-launcher-empty{grid-column:1/-1;margin:8px 6px;color:var(--tct-ink-2);font-size:16px}
.tct-launcher-foot{border-top:1px solid var(--tct-line);margin-top:10px;padding-top:8px;text-align:center}
.tct-launcher-home{display:block;padding:9px 12px;border-radius:var(--tct-radius);color:var(--tct-green)!important;font-size:16px;font-weight:500}
.tct-launcher-home:hover,.tct-launcher-home:focus-visible{background:var(--tct-green-soft);outline:none}

/* 帳號選單 */
.tct-acct-menu{width:288px;padding:8px 0}
.tct-acct-head{padding:10px 20px 12px}
.tct-acct-name{font-family:var(--tct-font-display);font-weight:var(--tct-weight-title);font-size:18px;color:var(--tct-green);line-height:1.4}
.tct-acct-sub{font-size:15px;color:var(--tct-ink-2);margin-top:2px}
.tct-acct-sep{height:1px;background:var(--tct-line);margin:6px 0}
.tct-acct-item{display:block;width:100%;box-sizing:border-box;padding:10px 20px;font-size:16px;font-family:inherit;color:var(--tct-ink);background:none;border:0;text-align:left;cursor:pointer;line-height:1.5}
.tct-acct-item:hover,.tct-acct-item:focus-visible{background:var(--tct-green-soft);color:var(--tct-green-dark);outline:none}
.tct-acct-item.tct-acct-logout{color:var(--tct-danger)}
.tct-acct-item.tct-acct-logout:hover,.tct-acct-item.tct-acct-logout:focus-visible{background:var(--tct-danger-soft);color:var(--tct-danger)}
.tct-acct-item.is-busy{opacity:.75}

@media (max-width:600px){
  .tct-acct-pop,.tct-acct-caret{display:none!important}
  .tct-acct-trigger{cursor:auto}
}