/* WC Portal — token สี/ระยะ/เงา/ฟอนต์ของทั้งระบบ ย้ายไปอยู่ design_system/tokens.css แล้ว
   (sync เข้ามาที่ /static/design/tokens.css) — ห้ามประกาศ :root/--primary/[data-theme] ที่นี่อีก
   แก้ที่ design_system/tokens.css แล้วรัน design_system/sync_design.py เท่านั้น (ดู DESIGN_GUIDE.md) */
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/static/fonts/NotoSansThai-thai.woff2?v=1") format("woff2");
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/static/fonts/NotoSansThai-latin-ext.woff2?v=1") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/static/fonts/NotoSansThai-latin.woff2?v=1") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ground); color:var(--ink); font-family:var(--font-body);
  min-height:100vh;
}
h1,h2,h3{ font-family:var(--font-display); margin:0 0 .5em; }
a{ color:var(--steel); }

/* ---------- shell DashStack: topbar + sidebar เดียว (redesign 3 ส.ค. 2569 — แทนที่ shell v5 mega-menu +
   pinned-sidebar ซ้อนกันเดิมทั้งคู่ เหลือ nav เดียว) — คงชื่อ class เดิม .app-shell/.topheader/.body-shell/
   .main-col/.pinned-sidebar ไว้บนโครงใหม่ เพราะ print CSS ของโมดูล outgoing_letters/letter_templates
   (app/modules/outgoing_letters/templates/index.html, app/modules/letter_templates/templates/index.html)
   อ้างชื่อเหล่านี้ตรงๆ เพื่อซ่อน/คลี่เปลือกตอนพิมพ์ — ไม่ต้องแก้ไฟล์โมดูลทั้งสอง ส่วน .mega-menu/.contact-fab/
   .contact-panel ที่ print CSS อ้างถึงด้วยนั้น ตอนนี้ไม่มี element ในหน้าแล้ว (เอาออกทั้งคู่ตามสั่ง) เป็นแค่
   selector ที่ไม่ match อะไรอีกต่อไป ไม่กระทบการพิมพ์ */
.app-shell{ display:flex; flex-direction:column; min-height:100vh; width:100%; }

.topheader{
  display:flex; align-items:center; gap:14px; background:var(--ground-raised); border-bottom:1px solid var(--line);
  padding:0 20px; height:64px; position:sticky; top:0; z-index:30;
}
.sidebar-trigger{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px;
  border:none; background:transparent; color:var(--ink-soft); font-size:1.15rem; cursor:pointer; flex:0 0 auto;
}
.sidebar-trigger:hover{ background:var(--accent-soft); color:var(--accent); }
@media (min-width:1024px){ .sidebar-trigger{ display:none; } }

.topheader-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.topheader-logo img{ height:30px; width:auto; }
.topheader-logo .t1{ font-family:var(--font-display); font-weight:800; font-size:1rem; line-height:1.15; }
.topheader-logo .t2{ font-size:.7rem; color:var(--ink-soft); }
@media (max-width:480px){ .topheader-logo .t2{ display:none; } }

.topheader-search{ flex:1; max-width:420px; position:relative; }
.topheader-search input{
  width:100%; height:42px; border-radius:999px; border:1px solid var(--line); background:var(--ground);
  color:var(--ink); font-family:var(--font-body); font-size:.92rem; padding:0 18px 0 42px;
}
.topheader-search input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--ground-raised);
}
.topheader-search .sic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:1rem; }
@media (max-width:640px){ .topheader-search{ max-width:none; } }
@media (max-width:420px){ .topheader-search{ display:none; } }

.topheader-right{ display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto; }
.icon-btn{
  width:40px; height:40px; border-radius:10px; border:none; background:transparent; color:var(--ink-soft);
  font-size:1.05rem; cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative;
}
.topheader-right a.icon-btn{ text-decoration:none; }
.icon-btn:hover{ background:var(--accent-soft); color:var(--accent); }
.notif-btn .dot{
  position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--pill-red);
  border:2px solid var(--ground-raised);
}
.profile-chip{ display:flex; align-items:center; gap:9px; padding:4px 6px 4px 4px; border-radius:999px; min-width:40px; min-height:40px; }
.profile-chip .who{ display:none; min-width:0; }
@media (min-width:640px){ .profile-chip .who{ display:block; max-width:140px; } }
.profile-chip .name{ font-size:.83rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-chip .role{ font-size:.72rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex;
  align-items:center; justify-content:center; font-size:.9rem; font-weight:800; font-family:var(--font-display);
  flex:0 0 auto;
}
.logout-btn{
  background:none; border:none; color:var(--ink-soft); font-size:1.05rem; cursor:pointer; width:40px; height:40px;
  border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.logout-btn:hover{ background:var(--signal-red-soft); color:var(--signal-red); }

/* ---------- body: sidebar ซ้าย + คอลัมน์เนื้อหาหลัก ---------- */
.body-shell{ display:flex; align-items:flex-start; width:100%; flex:1; min-height:0; }
.main-col{ flex:1; min-width:0; }

/* ---------- sidebar เดียว: ตรึงซ้ายถาวร ≥1024px, drawer ทับซ้าย <1024px (ปุ่ม ☰ เปิด, overlay/Esc ปิด) ---------- */
.pinned-sidebar{
  position:fixed; top:64px; left:0; bottom:0; width:240px; background:var(--ground-raised);
  border-right:1px solid var(--line); padding:14px 0 24px; overflow-y:auto; z-index:35;
  transform:translateX(-100%); transition:transform .2s ease;
}
.pinned-sidebar.open{ transform:translateX(0); box-shadow:var(--shadow); }
.sidebar-overlay{
  position:fixed; inset:64px 0 0 0; background:rgba(20,22,26,.35); z-index:34; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.sidebar-overlay.show{ opacity:1; pointer-events:auto; }
@media (min-width:1024px){
  .pinned-sidebar{ position:sticky; top:64px; transform:none; height:calc(100vh - 64px); box-shadow:none; }
  .sidebar-overlay{ display:none !important; }
  .body-shell{ padding-left:0; }
}
.sb-sec{
  font-size:.7rem; font-weight:800; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase;
  padding:16px 22px 6px;
}
.sb-sec:first-child{ padding-top:6px; }
.sb-item{
  position:relative; display:flex; align-items:center; gap:11px; margin:2px 12px; padding:10px 12px;
  border-radius:var(--r-sm); font-size:.87rem; font-weight:600; color:var(--ink-soft); text-decoration:none;
  min-height:40px; cursor:pointer; border:none; background:none; width:calc(100% - 24px); text-align:left;
  font-family:inherit;
}
.sb-item .ic{ width:20px; text-align:center; font-size:1rem; flex:0 0 auto; }
.sb-item:hover{ background:var(--ground); color:var(--ink); }
.sb-item.active{ background:var(--accent); color:var(--accent-ink); }
.sb-item .ext{ margin-left:auto; font-size:.7rem; opacity:.7; }
.sb-foot{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }

main{ max-width:1080px; margin:0 auto; padding:24px 28px 60px; }

/* ---------- จอใหญ่ (FHD ขึ้นไป) — ตัวอักษรที่ตั้งเป็น rem ทั้งเว็บใหญ่ขึ้นตามจริง ไม่ใช่แค่ขยายพื้นที่ว่าง
   (พนักงานที่จอ 1920px+ รายงานว่าตัวหนังสือเล็กกว่าที่เจ้าของเห็นบนจอตัวเอง — ฐาน design เดิมจูนไว้แค่ ~1200px) ---------- */
@media (min-width:1440px){
  html{ font-size:17px; }
  main{ max-width:1200px; }
}
@media (min-width:1920px){
  html{ font-size:18.5px; }
  main{ max-width:1320px; }
}

/* ---------- module launcher: การ์ดโมดูลหลัก 4 ใบบนหน้าแรก (โครง ERP 3 ชั้น 22 ก.ค. 2569) ---------- */
.section-title{ font-size:1.05rem; margin:26px 0 12px; }

/* ---------- รอดำเนินการ (actionable items) — เฉพาะ MR/DCC เจ้าของระบบ ---------- */
.action-card{ background:var(--ground-raised); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:10px; box-shadow:var(--shadow); }
.action-row{
  display:flex; align-items:center; gap:14px; padding:14px 18px; text-decoration:none; color:var(--ink);
  border-top:1px solid var(--line);
}
.action-row:first-child{ border-top:none; }
a.action-row:hover{ background:var(--ground); }
.action-row.disabled{ opacity:.6; cursor:default; }
.ar-icon{ font-size:1.2rem; flex:0 0 auto; }
.ar-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ar-label{ font-size:.9rem; font-weight:600; }
.ar-sub{ font-size:.78rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-count{
  flex:0 0 auto; min-width:28px; height:28px; border-radius:999px; background:var(--line); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; padding:0 8px;
}
.action-row.has-count .ar-count{ background:var(--signal-red-soft); color:var(--signal-red); }
.ar-count.zero{ background:var(--line); color:var(--ink-soft); }
.ar-count.na{ background:transparent; color:var(--ink-soft); font-weight:400; }

/* ---------- widget แถวคู่: เอกสารล่าสุด + ทางลัดของฉัน ---------- */
.widget-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin:20px 0 30px; }
.recent-list, .fav-list{ list-style:none; margin:0; padding:0; }
.recent-list li, .fav-list li{
  display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:.85rem;
}
.recent-list li:first-child, .fav-list li:first-child{ border-top:none; }
.recent-list a, .fav-list a{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); }
.rl-code{ font-family:var(--font-display); font-weight:600; color:var(--steel); flex:0 0 auto; }
.rl-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rl-date{ flex:0 0 auto; font-size:.76rem; color:var(--ink-soft); }
.fav-remove{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:.8rem; flex:0 0 auto; padding:4px; }
.fav-remove:hover{ color:var(--signal-red); }

/* ---------- ปุ่มปักหมุด (favorite) บน module tile ---------- */
.fav-toggle{
  position:absolute; top:10px; right:10px; background:none; border:none; font-size:1rem; cursor:pointer;
  opacity:.35; padding:4px; line-height:1;
}
.fav-toggle:hover{ opacity:.8; }
.fav-toggle.active{ opacity:1; }
.module-launcher{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin-bottom:32px; }
.launcher-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-decoration:none; color:var(--ink);
  background:var(--ground-raised); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px;
  border-top:3px solid var(--line); box-shadow:var(--shadow);
}
.launcher-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.launcher-card .lc-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; background:var(--ground); margin-bottom:2px;
}
.launcher-card .lc-name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.25; }
.launcher-card .lc-en{ font-size:.74rem; color:var(--ink-soft); letter-spacing:.02em; margin-top:-6px; }
.launcher-card .lc-desc{ font-size:.83rem; color:var(--ink-soft); line-height:1.45; flex:1; }
.launcher-card .lc-count{ font-size:.76rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:8px; width:100%; }
/* แถบสีบนหัวการ์ด + พื้นไอคอน แยกโมดูลด้วยสายตา */
.launcher-card.c-green{ border-top-color:var(--signal-green); }
.launcher-card.c-green .lc-icon{ background:var(--signal-green-soft); }
.launcher-card.c-steel{ border-top-color:var(--steel); }
.launcher-card.c-steel .lc-icon{ background:var(--steel-soft); }
.launcher-card.c-accent{ border-top-color:var(--accent); }
.launcher-card.c-accent .lc-icon{ background:var(--accent-soft); }
.launcher-card.c-amber{ border-top-color:var(--signal-amber); }
.launcher-card.c-amber .lc-icon{ background:var(--signal-amber-soft); }
.launcher-card.c-red{ border-top-color:var(--signal-red); }
.launcher-card.c-red .lc-icon{ background:var(--signal-red-soft); }

/* ---------- หน้า workspace ของโมดูล: หัวโมดูล + section (sub-module) ---------- */
.mod-header{
  display:flex; align-items:center; gap:18px; background:var(--ground-raised); border:1px solid var(--line);
  border-left:4px solid var(--line); border-radius:var(--r); padding:22px 24px; margin-bottom:26px; box-shadow:var(--shadow);
}
.mod-header .mh-icon{
  width:58px; height:58px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; background:var(--ground); flex:0 0 auto;
}
.mod-header h1{ font-size:1.35rem; margin:0 0 2px; }
.mod-header .mh-en{ font-size:.78rem; color:var(--ink-soft); margin-bottom:6px; }
.mod-header p{ margin:0; color:var(--ink-soft); font-size:.88rem; line-height:1.45; }
.mod-header.c-green{ border-left-color:var(--signal-green); }
.mod-header.c-green .mh-icon{ background:var(--signal-green-soft); }
.mod-header.c-steel{ border-left-color:var(--steel); }
.mod-header.c-steel .mh-icon{ background:var(--steel-soft); }
.mod-header.c-accent{ border-left-color:var(--accent); }
.mod-header.c-accent .mh-icon{ background:var(--accent-soft); }
.mod-header.c-amber{ border-left-color:var(--signal-amber); }
.mod-header.c-amber .mh-icon{ background:var(--signal-amber-soft); }

/* ---------- policy banner: ทางลัดไปนโยบายคุณภาพ/สิ่งแวดล้อม/ความปลอดภัย (เฉพาะโมดูลที่กำหนดไว้จริง) ---------- */
.policy-banner{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:14px; padding:14px 18px; margin-bottom:26px;
}
.policy-banner:hover{ opacity:.92; }
.policy-banner .pb-icon{ font-size:1.5rem; flex:0 0 auto; }
.policy-banner .pb-text{ flex:1; min-width:0; }
.policy-banner .pb-label{ display:block; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--accent); }
.policy-banner .pb-desc{ display:block; font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.policy-banner .pb-chevron{ font-size:1.3rem; color:var(--accent); flex:0 0 auto; }

.mod-section{ margin-bottom:30px; scroll-margin-top:90px; }
.section-desc{ color:var(--ink-soft); font-size:.83rem; margin:-6px 0 12px; line-height:1.45; }

.group{ margin-bottom:30px; scroll-margin-top:90px; }
.group-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.group-head h2{ font-size:1.05rem; }
.group-head .count{ font-size:.8rem; color:var(--ink-soft); }

/* ---------- การ์ดบริการแบบแถว: ไอคอนสี่เหลี่ยมสี + ข้อความ + ลูกศร ---------- */
.svc-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; flex:0 0 auto;
}
.svc-icon.c-accent{ background:var(--accent-soft); }
.svc-icon.c-green{ background:var(--signal-green-soft); }
.svc-icon.c-amber{ background:var(--signal-amber-soft); }
.svc-icon.c-red{ background:var(--signal-red-soft); }
.svc-icon.c-steel{ background:var(--steel-soft); }
.svc-text{ flex:1; min-width:0; }
.svc-text .row1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.svc-text .name{ font-family:var(--font-display); font-weight:600; font-size:.96rem; }
.svc-text .desc{ color:var(--ink-soft); font-size:.82rem; margin-top:3px; line-height:1.4; }
.svc-text .caveat{ margin-top:6px; font-size:.75rem; color:var(--signal-amber); }
.svc-chevron{ flex:0 0 auto; color:var(--ink-soft); font-size:1.3rem; line-height:1; }

.chip{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:600; white-space:nowrap; }
.chip.live{ background:var(--signal-green-soft); color:var(--signal-green); }
.chip.soon{ background:var(--line); color:var(--ink-soft); }
.chip.ext{ background:var(--steel-soft); color:var(--steel); }

.search-empty{ display:none; color:var(--ink-soft); font-size:.86rem; padding:18px 4px; }
.search-empty.show{ display:block; }

/* ---------- toast แทน modal ---------- */
.toast-lane{ max-width:1080px; margin:0 auto; padding:0 28px; position:sticky; top:70px; z-index:20; height:0; }
.toast{
  transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform .18s ease,opacity .18s ease;
  background:var(--ink); color:var(--ground); font-size:.86rem; padding:10px 16px; border-radius:10px;
  box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:8px; max-width:360px;
}
.toast-lane.show .toast{ transform:translateY(0); opacity:1; }

/* ---------- press feedback (ไม่มี stagger/count-up อีกต่อไป — ตัดออกตาม redesign 3 ส.ค. 2569) ---------- */
.rail-link,.icon-btn,.category-card,.module-tile.live,.module-tile.soon,.sb-item,.launcher-card,.tool{ transition:transform .12s ease,border-color .15s ease,background-color .15s ease; }
.rail-link:active,.icon-btn:active,.category-card:active,.module-tile.live:active,.module-tile.soon:active{ transform:scale(.97); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.card{
  background:var(--ground-raised); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow: var(--shadow);
}
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin:20px 0; }
.stat-card{ background:var(--ground-raised); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); }
.stat-card .value{ font-family:var(--font-display); font-size:1.9rem; font-weight:800; }
.stat-card .label{ color:var(--ink-soft); font-size:.86rem; font-weight:600; margin-top:4px; }
.stat-card.tone-green .value{ color:var(--signal-green); }
.stat-card.tone-amber .value{ color:var(--signal-amber); }
.stat-card.tone-red .value{ color:var(--signal-red); }
.stat-card.tone-steel .value{ color:var(--steel); }

.badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:600; }
.badge.tone-green{ background:var(--signal-green-soft); color:var(--signal-green); }
.badge.tone-amber{ background:var(--signal-amber-soft); color:var(--signal-amber); }
.badge.tone-red{ background:var(--signal-red-soft); color:var(--signal-red); }
.badge.tone-steel{ background:var(--steel-soft); color:var(--steel); }

/* ---------- pill สถานะแบบทึบสี (DashStack) — ใช้ในตารางเอกสารล่าสุดหน้าแรก ---------- */
.pill{ display:inline-block; min-width:78px; text-align:center; color:#fff; font-weight:700; font-size:.72rem; border-radius:8px; padding:4px 10px; }
.pill.g{ background:var(--pill-green); }
.pill.p{ background:var(--pill-purple); }
.pill.r{ background:var(--pill-red); }
.pill.gr{ background:var(--pill-gray); }

table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.92rem; }
th{ background:var(--ground); color:var(--ink); font-weight:800; font-size:.78rem; letter-spacing:.02em; border-bottom:none; }
th:first-child{ border-radius:8px 0 0 8px; }
th:last-child{ border-radius:0 8px 8px 0; }
tr:hover td{ background:var(--accent-soft); }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.filters select, .filters input{
  padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--ground-raised);
  color:var(--ink); font-family:var(--font-body); font-size:.9rem;
}

.module-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
.module-tile{
  position:relative; display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink);
  background:var(--ground-raised); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  min-height:40px;
}
.module-tile.live:hover{ border-color:var(--accent); box-shadow:var(--shadow); cursor:pointer; }
.module-tile.soon{ opacity:.65; cursor:pointer; }
.tools-group{ padding:18px 0 2px; font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase; }
.tools-group:first-of-type{ padding-top:4px; }
details.soon-details{ margin-top:16px; }
details.soon-details summary{ cursor:pointer; font-size:.82rem; color:var(--ink-soft); font-weight:700; user-select:none; padding:4px 0; }
details.soon-details .soon-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.soon-tag{ font-size:.78rem; color:var(--ink-soft); border:1px dashed var(--line); border-radius:999px; padding:4px 12px; }

.brand-logo{ height:26px; width:auto; vertical-align:middle; margin-right:2px; }

.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card{ text-align:center; max-width:360px; padding:40px; }
.login-logo{ height:56px; width:auto; margin-bottom:12px; }
.login-card h1{ font-size:1.4rem; }
.login-card .g-btn-slot{ margin:24px 0; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- GPMS dashboard: bar chart / breakdown list / alert card (ดึงโครงจาก GPMS prototype S1
   00_GPMS_แผนระบบบริหารโครงการ\build\prototype\gpms_demo.html แต่ใช้ token สีเดิมของ WC Portal ไม่ใช่ธีม
   น้ำเงินของ prototype เพื่อให้เข้ากับ shell เดียวกันทั้งระบบ) ---------- */
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:.85rem; }
.bar-row:last-child{ margin-bottom:0; }
.bar-label{ width:150px; flex:0 0 150px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; background:var(--ground); border-radius:8px; height:16px; position:relative; overflow:hidden; }
.bar-fill{ background:var(--steel); height:100%; border-radius:8px; }
.bar-val{ width:110px; flex:0 0 110px; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }

.status-legend{ list-style:none; margin:0; padding:0; font-size:.85rem; }
.status-legend li{ display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--line); }
.status-legend li:first-child{ border-top:none; }
.status-legend .dot{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.status-legend .dot.tone-steel{ background:var(--steel); }
.status-legend .dot.tone-red{ background:var(--signal-red); }
.status-legend .dot.tone-amber{ background:var(--signal-amber); }
.status-legend .dot.tone-green{ background:var(--signal-green); }
.status-legend .name{ flex:1; }
.status-legend .count{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.alert-card, .stale-card{ border-radius:16px; padding:16px 18px; }
.alert-card{ background:var(--signal-red-soft); border:1px solid var(--signal-red); }
.alert-card h3{ margin:0 0 10px; font-size:.95rem; color:var(--signal-red); }
.stale-card{ background:var(--signal-amber-soft); border:1px solid var(--signal-amber); }
.stale-card h3{ margin:0 0 10px; font-size:.95rem; color:var(--signal-amber); }
.alert-list, .stale-list{ font-size:.83rem; }
.alert-list .row, .stale-list .row{
  display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px dashed rgba(0,0,0,.12);
}
.alert-list .row:first-child, .stale-list .row:first-child{ border-top:none; }
.alert-list .row .r, .stale-list .row .r{ text-align:right; white-space:nowrap; color:var(--ink-soft); }
.alert-note{ font-size:.76rem; color:var(--ink-soft); margin-top:10px; }
.empty-row{ color:var(--ink-soft); font-size:.83rem; padding:4px 0; }

.lg-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:700px){ .lg-tiles{ grid-template-columns:1fr; } }

.lg-tile{ border-radius:10px; padding:14px 16px; background:var(--ground); border:1px solid var(--line); }
.lg-tile .lg-num{ font-size:1.3rem; font-weight:600; color:var(--ink-soft); font-family:var(--font-display); }
.lg-tile .lg-lbl{ font-size:.85rem; margin-top:2px; }
.lg-tile .lg-sub{ font-size:.75rem; color:var(--ink-soft); margin-top:4px; }

/* จอแท็บเล็ต (681–1024px, เช่น iPad ตั้ง/นอน) — sidebar พับเป็น drawer (ปุ่ม ☰), เนื้อหาเต็มความกว้าง */
@media (min-width: 681px) and (max-width: 1024px){
  main{ padding:24px 20px 50px; }
  .topheader{ padding:0 18px; gap:12px; }
  .card-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* จอแคบกว่า 900px — เว้นที่ให้ปุ่ม ☰/โลโก้/โปรไฟล์พอในแถวเดียว */
@media (max-width: 900px){
  main{ padding:18px 16px 50px; }
}

/* จอมือถือ (≤480px ตามสเปก responsive) — stat cards ย่อคอลัมน์, การ์ดเครื่องมือคอลัมน์เดียว, topbar ไม่ล้น,
   โปรไฟล์ย่อเหลือ avatar (ทำผ่าน .profile-chip .who ที่ซ่อนไว้แล้วต่ำกว่า 640px) */
@media (max-width: 680px){
  main{ padding:16px 12px 40px; }
  .topheader{ padding:0 12px; gap:8px; }
  /* 3 ส.ค. 2569: บนจอ 375px แถบบนกว้างเกินจอ 16px ทำให้ "ทุกหน้า" เลื่อนซ้าย-ขวาได้ (วัดจริงบนเดโม:
     scrollWidth 391 > clientWidth 375) — โลโก้ยอมย่อได้ + ปุ่มขวาห้ามถูกบีบ จบปัญหาที่ต้นเหตุ */
  .topheader-logo{ flex:0 1 auto; min-width:0; overflow:hidden; }  /* ต้อง 0 1 auto ไม่ใช่ 0 0 auto ไม่งั้นย่อไม่ได้ */
  .topheader-logo .t1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topheader-right{ flex:0 0 auto; }
  .icon-btn{ width:36px; height:36px; }
  .avatar{ width:34px; height:34px; }

  .card{ padding:14px; }
  .card-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .stat-card{ padding:12px; }
  .stat-card .value{ font-size:1.5rem; }
  .module-launcher{ grid-template-columns:1fr; gap:12px; }
  .module-grid{ grid-template-columns:1fr; }
  .mod-header{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px; }

  .filters{ flex-direction:column; align-items:stretch; }
  .filters select, .filters input, .filters button{ width:100%; }

  .table-wrap, .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ font-size:.85rem; min-width:520px; } /* min-width บังคับให้ scroll ในกล่องตัวเองแทนบีบตัวอักษรจนอ่านไม่ออก —
    ห่อด้วย .table-wrap/.table-scroll เสมอกัน body เลื่อนแนวนอน */
  th, td{ padding:8px; }
}
@media (max-width: 480px){
  .card-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
}

/* GPMS dashboard 2-คอลัมน์ (bar chart/status legend, alert/stale card) — วางท้ายไฟล์เสมอ กันโดน .card-grid
   breakpoint เดิมทับ (cascade แพ้ถ้าอยู่ก่อนบล็อก media query อื่นที่ specificity เท่ากัน) */
.dash-col-wide{ grid-template-columns:1.3fr 1fr; }
.dash-col-even{ grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .dash-col-wide, .dash-col-even{ grid-template-columns:1fr; } }

/* ---------- Project 360: stepper + key-value facts ---------- */
.p360-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.p360-head h2{ margin:0 0 4px; font-size:1.2rem; }
.p360-head .code{ color:var(--ink-soft); font-size:.85rem; }
.back-link{ background:none; border:none; color:var(--steel); cursor:pointer; font-size:.85rem; padding:0; margin-bottom:10px; font-family:inherit; text-decoration:none; display:inline-block; }

.stepper{ display:flex; align-items:flex-start; margin:10px 0 6px; overflow-x:auto; }
.step{ display:flex; flex-direction:column; align-items:center; flex:1; min-width:90px; position:relative; }
.step .dot{
  width:24px; height:24px; border-radius:50%; background:var(--ground); border:1px solid var(--line);
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
  z-index:1; flex:0 0 auto;
}
.step .lbl{ font-size:.72rem; color:var(--ink-soft); margin-top:6px; text-align:center; }
.step::before{ content:''; position:absolute; top:12px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; }
.step:first-child::before{ display:none; }
.step.done .dot{ background:var(--signal-green); border-color:var(--signal-green); color:#fff; }
.step.done::before{ background:var(--signal-green); }
.step.current .dot{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 4px var(--accent-soft); }

.kv{ display:grid; grid-template-columns:170px 1fr; row-gap:10px; font-size:.88rem; }
.kv .k{ color:var(--ink-soft); }

.doc-link-card{ text-align:center; padding:22px; }
.doc-link-card .doc-icon{ font-size:2rem; margin-bottom:8px; }
.doc-link-card p{ color:var(--ink-soft); font-size:.85rem; margin:6px 0 14px; }

.profit-hero{ text-align:center; padding:40px 24px; }
.profit-hero .big-icon{ font-size:2.6rem; margin-bottom:10px; }
.profit-hero h2{ margin:0 0 8px; }
.profit-hero p{ color:var(--ink-soft); max-width:520px; margin:0 auto 4px; font-size:.92rem; }
.profit-skeleton-table{ opacity:.5; margin-top:22px; }
.profit-skeleton-table table{ pointer-events:none; }

/* ---------- Project 360: ความคืบหน้า / Gantt / WBS ---------- */
.p360-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.p360-actions a, .p360-actions span.disabled{
  font-size:.82rem; padding:7px 13px; border-radius:6px; border:1px solid var(--line);
  color:var(--ink); text-decoration:none; background:var(--paper); display:inline-block;
}
.p360-actions a:hover{ border-color:var(--steel); }
.p360-actions span.disabled{ color:var(--ink-soft); background:var(--ground); cursor:not-allowed; }

/* ---------- Unified Project + PMO: professional information hierarchy ---------- */
.project-jump{
  display:flex; gap:6px; flex-wrap:wrap; margin:-4px 0 16px; padding:6px;
  width:max-content; max-width:100%; border:1px solid var(--line); border-radius:9px; background:var(--ground);
}
.project-edit-action{ border-color:var(--steel) !important; color:var(--steel) !important; font-weight:700; }
.project-save-success,.project-form-error{ margin:0 0 16px; padding:11px 14px; border-radius:8px; font-size:.86rem; }
.project-save-success{ color:var(--signal-green); border:1px solid var(--signal-green); background:color-mix(in srgb,var(--signal-green) 8%,transparent); }
.project-form-error{ color:var(--signal-red); border:1px solid var(--signal-red); background:color-mix(in srgb,var(--signal-red) 8%,transparent); }
.project-edit-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:8px 0 18px; }
.project-edit-head h2{ margin:3px 0 4px; }
.project-edit-head p{ margin:0; color:var(--ink-soft); font-size:.85rem; }
.project-edit-form{ max-width:1040px; }
.project-form-section + .project-form-section{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.project-form-section h3{ margin:0 0 12px; font-size:.96rem; }
.project-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.project-form-grid label{ display:flex; flex-direction:column; gap:6px; color:var(--ink-soft); font-size:.78rem; }
.project-form-grid label b{ color:var(--signal-red); }
.project-form-grid .span-2{ grid-column:1/-1; }
.project-form-grid input,.project-form-grid select,.project-form-grid textarea{ width:100%; box-sizing:border-box; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:7px; padding:10px 11px; font:inherit; font-size:.86rem; }
.project-form-grid textarea{ resize:vertical; line-height:1.5; }
.project-form-grid small{ color:var(--ink-soft); line-height:1.45; }
.project-edit-note{ margin-top:20px; padding:11px 13px; border-radius:7px; background:var(--ground); color:var(--ink-soft); font-size:.8rem; line-height:1.55; }
.project-form-actions{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:18px; }
.project-form-actions a{ color:var(--ink-soft); text-decoration:none; padding:9px 13px; }
.project-form-actions button{ border:0; border-radius:7px; padding:10px 16px; color:white; background:var(--steel); font-weight:700; cursor:pointer; }
@media (max-width:700px){
  .project-edit-head{ flex-direction:column; }
  .project-form-grid{ grid-template-columns:1fr; }
  .project-form-grid .span-2{ grid-column:auto; }
}
.project-jump a{ color:var(--ink-soft); text-decoration:none; font-size:.78rem; padding:6px 10px; border-radius:6px; }
.project-jump a:hover{ color:var(--ink); background:var(--paper); }
.executive-summary{ margin:18px 0; }
.section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.section-heading h3{ margin:2px 0 0; font-size:1.08rem; }
.section-eyebrow{ color:var(--steel); font-size:.68rem; font-weight:700; letter-spacing:.12em; }
.executive-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.executive-grid .pmo-insight{ margin:0; min-height:100%; }
.executive-ai .pmo-source{ margin:10px 0 0; }
.project-section{
  margin-bottom:12px; border:1px solid var(--line); border-radius:12px; background:var(--ground-raised); overflow:hidden;
}
.project-section > summary{
  display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; list-style:none; user-select:none;
}
.project-section > summary::-webkit-details-marker{ display:none; }
.project-section > summary::after{ content:'+'; margin-left:4px; color:var(--ink-soft); font-size:1.25rem; line-height:1; }
.project-section[open] > summary::after{ content:'−'; }
.project-section[open] > summary{ border-bottom:1px solid var(--line); }
.project-section > summary > span:nth-child(2){ display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.project-section > summary b{ color:var(--ink); font-size:.94rem; }
.project-section > summary small{ color:var(--ink-soft); font-size:.72rem; }
.section-index{ color:var(--steel); font-size:.72rem; font-weight:700; letter-spacing:.08em; }
.section-meta{ color:var(--ink-soft); font-size:.75rem; text-align:right; }
.project-section-accent{ border-left:3px solid var(--steel); }
.project-section-body{ padding:16px; }
.project-section-body > :last-child{ margin-bottom:0 !important; }
.project-section-body .pmo-dim:first-of-type{ margin-top:0; }
@media (max-width:800px){
  .executive-grid{ grid-template-columns:1fr; }
  .section-meta{ display:none; }
  .project-section > summary{ padding:13px 14px; }
  .project-section-body{ padding:12px; }
}

.prog-row{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-soft); margin:10px 0 4px; }
.prog-row b{ color:var(--ink); }
.prog-track{ height:10px; border-radius:99px; background:var(--ground); overflow:hidden; }
.prog-fill{ height:100%; border-radius:99px; }
.prog-fill.plan{ background:var(--steel); }
.prog-fill.actual{ background:var(--signal-green); }
.sync-note{ font-size:.82rem; color:var(--ink-soft); background:var(--ground); border-radius:6px; padding:10px 12px; margin-top:12px; line-height:1.6; }

/* 6 ส.ค. 2569: เจ้าของสั่งให้ Gantt โชว์ "ชื่อเต็ม" ของงาน (เดิม .g-lbl ตัด ellipsis จนอ่านไม่รู้เรื่อง)
   + ให้เลื่อน scrollbar แนวนอนได้แทนบีบทุกอย่างจนอ่านไม่ออก — ครอบด้วย .gantt-scroll (overflow-x:auto)
   + .gantt มี min-width คงที่ ส่วนคอลัมน์ชื่องาน (.g-lbl) sticky ซ้ายไว้ตอนเลื่อน */
.gantt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gantt{ font-size:.78rem; min-width:640px; }
.g-row{ display:grid; grid-template-columns:230px 1fr; gap:10px; align-items:center; }
.g-row + .g-row{ margin-top:3px; }
.g-lbl{
  color:var(--ink-soft); white-space:normal; word-break:break-word; overflow-wrap:break-word; line-height:1.3;
  position:sticky; left:0; z-index:1; background:var(--ground-raised); padding:2px 8px 2px 0;
}
.g-lbl span{ color:var(--ink); }
.g-track{ position:relative; height:19px; background:var(--ground); border-radius:3px; }
.g-head .g-track{ background:none; height:auto; display:flex; border-bottom:1px solid var(--line); padding-bottom:3px; }
.g-head .g-lbl{ background:var(--ground-raised); }
.g-month{ color:var(--ink-soft); overflow:hidden; }
.g-bar{ position:absolute; top:4px; height:11px; border-radius:3px; background:var(--steel); }
.g-bar.major{ top:2px; height:15px; background:var(--accent); }
.g-bar.over{ background:var(--signal-red); }
.g-today{ position:absolute; top:0; bottom:0; width:1px; background:var(--signal-red); }
@media (max-width:700px){ .g-row{ grid-template-columns:160px 1fr; } .gantt{ min-width:520px; } }

.wbs-group, .wbs-child{ display:flex; align-items:center; gap:10px; font-size:.85rem; padding:7px 9px; }
.wbs-group > summary{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:7px 9px; background:var(--ground); border-radius:6px; }
.wbs-group{ display:block; padding:0; margin-bottom:3px; }
.wbs-group.solo{ display:flex; background:var(--ground); border-radius:6px; margin-bottom:3px; }
.wbs-group > summary::-webkit-details-marker{ display:none; }
.wbs-group > summary::before{ content:'▸'; color:var(--ink-soft); }
.wbs-group[open] > summary::before{ content:'▾'; }
.wbs-child{ padding-left:34px; color:var(--ink-soft); }
.wbs-child.flat{ padding-left:9px; border-bottom:1px solid var(--line); }
.w-key{ color:var(--ink-soft); min-width:44px; }
.w-name{ flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.w-derived{ color:var(--ink-soft); font-size:.72rem; border:1px solid var(--line); border-radius:99px; padding:1px 7px; }
.w-count{ color:var(--ink-soft); }
.w-dates{ color:var(--ink-soft); font-size:.78rem; white-space:nowrap; }
.w-wt{ min-width:58px; text-align:right; color:var(--ink); }

/* Portfolio Dashboard (1 ส.ค. 2569) — ต่อจากบล็อค .gantt เดิม: สีแถบตามสถานะจริงของโครงการ (ไม่ใช่
   ตามน้ำหนักงานแบบ Gantt โครงการเดียว) + คอลัมน์ 'โครงการตามสถานะ' แบบ kanban เบาๆ ไม่ลากไลบรารีใหม่ */
.g-bar.tone-steel{ background:var(--steel); }
.g-bar.tone-green{ background:var(--signal-green); }
.g-bar.tone-amber{ background:var(--signal-amber); }
.g-bar.tone-red{ background:var(--signal-red); }
.portfolio-gantt .g-lbl a{ color:inherit; text-decoration:none; }
.portfolio-gantt .g-lbl a:hover{ text-decoration:underline; }

/* 6 ส.ค. 2569: เจ้าของสั่งให้แถว Gantt ของ Portfolio (รวมทั้งพอร์ต ไม่ใช่รายงานเดียว) โชว์รหัส+short_name
   คู่กัน แทนรหัสเปล่าๆ ที่อ่านไม่รู้เรื่อง — ต่างจาก .g-lbl ของ Gantt รายโครงการด้านบนที่เจ้าของสั่งวันเดียวกัน
   ให้ตัดกลับมาโชว์ชื่อเต็มไม่ตัด (ที่นั่นแถวน้อยกว่า ชื่องานยาวเป็นปกติ) ที่นี่ตรงข้าม: มีเป็นสิบๆ แถวพร้อมกัน ป้าย
   ยาวเกินจะดันแถบเวลาให้แคบจนอ่านไม่ออก จึงตัดด้วย ellipsis + title โชว์เต็มตอน hover แทน คอลัมน์ label ก็กว้าง
   ขึ้นจาก 230px เป็น 270px ให้พอมีที่ให้ short_name สั้นๆ ทั่วไปแสดงไม่ตัด (ยังอยู่ใน .gantt-scroll เดิมที่ scroll
   แนวนอนได้เฉพาะกล่อง Gantt ไม่ใช่ทั้งหน้า) */
.gantt.portfolio-gantt .g-row{ grid-template-columns:270px 1fr; }
.gantt.portfolio-gantt .g-lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt.portfolio-gantt .g-lbl a{ display:block; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:700px){ .gantt.portfolio-gantt .g-row{ grid-template-columns:190px 1fr; } }

.status-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.status-col{ background:var(--ground); border-radius:10px; padding:10px 12px; font-size:.83rem; }
.status-col-head{ display:flex; align-items:center; gap:6px; font-weight:600; margin-bottom:8px; }
.status-col-head .dot{ width:9px; height:9px; border-radius:3px; flex:0 0 9px; }
.status-col-head .dot.tone-steel{ background:var(--steel); }
.status-col-head .dot.tone-red{ background:var(--signal-red); }
.status-col-head .dot.tone-amber{ background:var(--signal-amber); }
.status-col-head .dot.tone-green{ background:var(--signal-green); }
.status-col-head .name{ flex:1; }
.status-col-head .count{ color:var(--ink-soft); }
.status-col-item{ display:block; color:var(--ink); text-decoration:none; padding:4px 0; border-top:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-col-item:first-of-type{ border-top:none; }
.status-col-item:hover{ color:var(--steel); }

/* ---------------------------------------------------------------------------
   Hover micro-interactions — "border-draw" (โน้ตเจ้าของ 9 ส.ค. 2569, ดู
   00_GPMS_แผนระบบบริหารโครงการ/procurement_process_v2_2569-08.md ท้ายไฟล์) — สไตล์กลางของ Portal แต่ผูกแบบ
   opt-in class .hv-card / .hv-btn เท่านั้น (ไม่ restyle การ์ด/ปุ่ม/ลิงก์เดิมทั้งระบบแบบ blanket — เสี่ยงกระทบ
   ทุกโมดูลที่มีอยู่แล้วโดยไม่ได้ตรวจทีละหน้า) ติด class นี้เพิ่มบนองค์ประกอบที่ต้องการ hover เท่านั้น (ตอนนี้ใช้
   ในจอ v2 ของ gpms_procurement — ดูคู่มือเพิ่มโมดูลใหม่.md ถ้าจะขยายไปโมดูลอื่นภายหลัง)
   กติกา animation: ใช้ pseudo-element ::after วาดกรอบด้วย transform:scale + opacity ล้วน (ไม่แตะ width/border/
   box-shadow ที่ trigger layout หรือ repaint หนัก) ระยะ ~0.25s ตามโน้ตเจ้าของ + ปิด transition เสมอเมื่อ
   prefers-reduced-motion: reduce (ยังคง opacity/scale ปลายทางไว้ แค่ตัดระยะเปลี่ยนผ่านออก) */
.hv-card, .hv-btn{ position:relative; isolation:isolate; }
.hv-card::after, .hv-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1.5px solid var(--accent); pointer-events:none;
  opacity:0; transform:scale(.96);
  transition:opacity .25s ease, transform .25s ease;
}
.hv-card:hover::after, .hv-btn:hover::after,
.hv-card:focus-visible::after, .hv-btn:focus-visible::after{
  opacity:1; transform:scale(1);
}
@media (prefers-reduced-motion: reduce){
  .hv-card::after, .hv-btn::after{ transition:none; }
}
.status-col-more{ color:var(--ink-soft); font-size:.76rem; padding-top:4px; }