/* =========================================================
   幹部タスク管理  スタイル
   テーマは <html data-theme="dark|light"> で切り替える
   ========================================================= */

/* ---------- ライト（既定）---------- */
:root,
:root[data-theme="light"]{
  color-scheme:light;
  --plane:#f5f5f9;
  --surface:#ffffff;
  --surface-2:#eceef4;
  --surface-3:#f7f7fb;
  --side:#ffffff;
  --ink:#171528;
  --ink-2:#4b4867;
  --ink-3:#8b88a3;
  --line:rgba(23,21,40,.10);
  --line-2:rgba(23,21,40,.16);
  --accent:#5b45d6;
  --accent-ink:#fff;
  --accent-soft:rgba(91,69,214,.10);
  --over:#d03b3b;
  --soon:#c2610a;
  --near:#9a7b06;
  --ok:#0f7a4a;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);

  --stage-todo:#86b6ef;
  --stage-doing:#3987e5;
  --stage-review:#256abf;
  --stage-done:#104281;
  --track:rgba(23,21,40,.08);
}

/* ---------- ダーク ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --plane:#14112a;          /* ページの地 */
  --surface:#1e1a38;        /* パネル */
  --surface-2:#252046;      /* カンバンの列など一段沈んだ面 */
  --surface-3:#2c2653;      /* 入力欄・ホバー */
  --side:#181433;           /* サイドバー */
  --ink:#f3f1ff;
  --ink-2:#bdb7dd;
  --ink-3:#8b85ad;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --accent:#8b7cf6;
  --accent-ink:#fff;
  --accent-soft:rgba(139,124,246,.16);
  --over:#ff6b6b;
  --soon:#ffa14a;
  --near:#f2c94c;
  --ok:#3ddc97;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.28);

  /* 進捗の4段階：同じ青の濃さで段階を表す（暗い面では完了ほど明るい） */
  --stage-todo:#184f95;
  --stage-doing:#256abf;
  --stage-review:#3987e5;
  --stage-done:#86b6ef;
  --track:rgba(255,255,255,.09);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--plane);color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px 14px;border-radius:8px;z-index:200}

/* =========================================================
   シェル（左サイドバー ＋ 本文）
   ========================================================= */
/* サイドバーは position:sticky なので、下まで色が続くように地を敷いておく */
.shell{display:flex;min-height:100vh;
  background-image:linear-gradient(to right,var(--side) 232px,transparent 232px)}

.side{
  width:232px;flex:none;background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;padding:18px 14px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px}
.logo{width:40px;height:40px;flex:none;border-radius:9px;object-fit:cover;
  border:1px solid var(--line);background:#3b4066}
.side-title{display:flex;flex-direction:column;line-height:1.3}
.side-title .l1{font-weight:700;font-size:14px}
.side-title .l2{font-weight:600;font-size:12.5px;color:var(--ink-2)}

.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:var(--ink-2);font-size:14px;font-weight:500;
}
.side-nav a:hover{background:var(--surface-3);color:var(--ink)}
.side-nav a.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.side-nav .ic{flex:none;opacity:.95}

.side-term{margin-top:16px;padding:0 4px}
.side-term label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:4px;letter-spacing:.08em}
.side-term select{width:100%}

.side-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
.themebtn{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:10px;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font-size:13px;
}
.themebtn:hover{background:var(--surface-3);color:var(--ink)}
.themebtn > span{display:flex;align-items:center;gap:10px}
:root[data-theme="dark"] .themebtn .t-light{display:none}
:root[data-theme="light"] .themebtn .t-dark{display:none}

.side-me{display:flex;align-items:center;gap:10px;padding:4px}
.avatar{
  width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;
}
.side-me-txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.side-me-txt strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-me-txt small{font-size:11px;color:var(--ink-3)}
.side-links{display:flex;flex-direction:column;gap:2px;font-size:12px}
.side-links a{color:var(--ink-3);padding:5px 4px;border-radius:6px}
.side-links a:hover{color:var(--ink)}
.side-links .lo{display:flex;align-items:center;gap:7px}
.side-links .lo .ic{width:16px;height:16px}

.drawer-btn{display:none}
.scrim{display:none}

.content{flex:1;min-width:0;max-width:1500px;padding:26px 30px 70px}

@media(max-width:980px){
  .shell{background-image:none}
  .drawer-btn{
    display:grid;place-items:center;position:fixed;top:12px;left:12px;z-index:60;
    width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
  }
  .side{
    position:fixed;z-index:70;left:0;top:0;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.4);
  }
  body.drawer-open .side{transform:none}
  body.drawer-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:65}
  .content{padding:64px 16px 70px}
}

/* =========================================================
   共通パーツ
   ========================================================= */
h1{font-size:22px;margin:0 0 4px;letter-spacing:.01em}
h2{font-size:14px;margin:26px 0 10px;color:var(--ink-2);letter-spacing:.06em;text-transform:none}
.sub{color:var(--ink-3);font-size:13px;margin:0 0 18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;border-radius:9px;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.sec{background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line)}
.btn.sec:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger{background:transparent;color:var(--over);border:1px solid var(--over)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:7px}
.movers{display:flex;gap:3px}
.btn.mv{padding:3px 7px;line-height:1.2;font-size:13px;min-width:26px}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn[disabled]:hover{filter:none}

.flash{padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;border:1px solid}
.flash.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.flash.ng{background:color-mix(in srgb,var(--over) 14%,transparent);color:var(--over);border-color:color-mix(in srgb,var(--over) 35%,transparent)}

label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:4px;font-weight:600}
input[type=text],input[type=password],input[type=date],input[type=url],input[type=color],select,textarea{
  width:100%;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;
  background:var(--surface-3);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
textarea{min-height:120px;resize:vertical;line-height:1.7}
.field{margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap}
tbody tr:hover{background:var(--surface-3)}
@media(max-width:700px){
  .panel{overflow-x:auto}
  .panel > table{min-width:520px}
}

.badge{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.badge.done{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.badge.review{background:color-mix(in srgb,var(--near) 18%,transparent);color:var(--near)}
.badge.doing{background:var(--accent-soft);color:var(--accent)}
.cat{font-size:11px;color:var(--c,#8b85ad);background:color-mix(in srgb,var(--c,#8b85ad) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#8b85ad) 40%,transparent);padding:1px 8px;border-radius:999px;
  align-self:flex-start;white-space:nowrap}
.pri-high{background:color-mix(in srgb,var(--over) 16%,transparent);color:var(--over);border-radius:5px;padding:0 6px}
.kind-chip{display:inline-block;margin-right:5px;background:var(--accent-soft);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:5px;padding:0 5px;font-size:10px;font-weight:700;vertical-align:1px}
.sub-n{display:inline-block;margin-left:5px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:0 6px;font-size:11px;color:var(--ink-3)}
.empty{color:var(--ink-3);font-size:13px;text-align:center;padding:14px 0;margin:0}
.due-over{color:var(--over);font-weight:700}
.due-soon{color:var(--soon);font-weight:600}
.due-near{color:var(--near)}

/* =========================================================
   カンバン
   ========================================================= */
.board-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.board-tools select,.board-tools input{width:auto;min-width:120px;font-size:13px;padding:6px 10px}
.board-tools input[type=checkbox]{min-width:0;width:16px;height:16px;padding:0;margin:0}
.board-tools label{margin-bottom:0}

.board{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:14px;align-items:start}
@media(max-width:1100px){
  .board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .col{min-width:78vw;scroll-snap-align:start}
}
.col{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:10px;
  display:flex;flex-direction:column;gap:9px;min-height:120px}
.col.over{outline:2px dashed var(--accent);background:var(--accent-soft)}
.col-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--ink-3);
  padding:4px 6px;letter-spacing:.14em}
.col-head .n{background:var(--surface);border-radius:999px;padding:0 8px;font-size:11px;letter-spacing:0}
.col[data-status=done] .col-head{color:var(--ok)}

.card{display:flex;flex-direction:column;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:11px;padding:11px 12px;box-shadow:var(--shadow);cursor:pointer;border-left:3px solid transparent}
.card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.card.dragging{opacity:.4}
.card.due-over{border-left-color:var(--over)}
.card.due-soon{border-left-color:var(--soon)}
.card.due-near{border-left-color:var(--near)}
.card-title{font-size:14px;font-weight:600;line-height:1.5}
.card-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3)}
.card-badges{display:flex;gap:6px;font-size:11px;color:var(--ink-3)}

/* =========================================================
   ホームのダッシュボード
   ========================================================= */
.dash{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:22px;align-items:start}
@media(max-width:1180px){.dash{grid-template-columns:1fr}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.stat .n{font-size:26px;font-weight:700;line-height:1.1}
.stat .l{font-size:12px;color:var(--ink-3);margin-top:2px}
.stat.alert .n{color:var(--over)}
.mycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}

.aside-col{display:flex;flex-direction:column;gap:18px}
.card-h{font-size:11px;letter-spacing:.14em;color:var(--ink-3);font-weight:700;margin:0 0 12px}

/* リング（完了率） */
.ring{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.ring-track{stroke:var(--track)}
.ring-value{stroke:var(--accent)}
.ring-num{fill:var(--ink);font-size:30px;font-weight:700;dominant-baseline:middle}
.ring-pct{font-size:15px;fill:var(--ink-3)}
.ring figcaption{text-align:center;line-height:1.45}
.ring figcaption strong{display:block;font-size:13px}
.ring figcaption span{font-size:12px;color:var(--ink-3)}
.ringswap{cursor:pointer;border-radius:12px;padding:4px 0 0;outline-offset:3px}
.ringswap:hover{background:var(--surface-3)}
.ringswap .r-term{display:none}
.ringswap.show-term .r-month{display:none}
.ringswap.show-term .r-term{display:flex}
.ringswap-hint{margin:10px 0 0;text-align:center;font-size:11px;color:var(--ink-3)}

/* ステータス内訳 */
.stagebar{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden;margin-bottom:12px;background:var(--track)}
.stagebar .seg,.ptrack .seg{display:block;min-width:3px}
.seg-todo{background:var(--stage-todo)}
.seg-doing{background:var(--stage-doing)}
.seg-review{background:var(--stage-review)}
.seg-done{background:var(--stage-done)}
.stagelist{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.stagelist li{display:flex;align-items:center;gap:9px;font-size:13px}
.stagelist .nm{flex:1;color:var(--ink-2)}
.stagelist .vl{font-weight:700;font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:3px;flex:none}
.dot-todo{background:var(--stage-todo)}
.dot-doing{background:var(--stage-doing)}
.dot-review{background:var(--stage-review)}
.dot-done{background:var(--stage-done)}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;padding:0;
  font-size:12px;color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:7px}

/* 役職別・担当者別の進捗 */
.prows{display:grid;gap:15px}
.prow-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.prow-name{font-size:13px;font-weight:600}
.prow-name small{color:var(--ink-3);font-weight:400;font-size:11px;margin-left:7px}
.prow-num{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.prow-num strong{font-size:14px;color:var(--ink)}
.prow-over{color:var(--over);font-weight:700}
.ptrack{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;background:var(--track)}
.progress-panel{margin-bottom:20px}
.progress-panel .prows{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid;gap:16px 28px}

/* =========================================================
   タブ・グループ
   ========================================================= */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs a{padding:9px 16px;font-size:14px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}

.group{margin-bottom:22px}
.group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;padding:10px 16px}
.group-head .g-name{font-size:15px;font-weight:700}
.group-head .g-name small{font-weight:400;color:var(--ink-3);font-size:12px;margin-left:7px}
.group-head .g-stat{font-size:12px;color:var(--ink-3)}
.group-head .g-over{font-size:12px;color:var(--over);font-weight:700;
  background:color-mix(in srgb,var(--over) 15%,transparent);border-radius:999px;padding:1px 9px}
.group .panel{border-top-left-radius:0;border-top-right-radius:0}

/* =========================================================
   カレンダー
   ========================================================= */
.daterange{display:flex;align-items:center;gap:6px}
.daterange label{margin:0;font-size:12px;color:var(--ink-3);font-weight:500}
.daterange input[type=date]{width:auto;min-width:0;font-size:13px;padding:6px 8px}

.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cal-title{font-size:17px}

.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-wd{background:var(--surface-2);color:var(--ink-3);font-size:11px;font-weight:700;
  text-align:center;padding:7px 0;letter-spacing:.08em}
.cal-wd.sun{color:#e06666}
.cal-wd.sat{color:#5c9ede}
.cal-cell{background:var(--surface);min-height:112px;padding:6px 6px 8px;display:flex;flex-direction:column;gap:3px}
.cal-cell.out{background:var(--surface-3);opacity:.5}
.cal-cell.today{background:var(--accent-soft)}
.cal-day{font-size:12px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.cal-day.sun{color:#e06666}
.cal-day.sat{color:#5c9ede}
.cal-todaytag{background:var(--accent);color:var(--accent-ink);border-radius:999px;
  padding:0 7px;font-size:10px;font-weight:700}

.cal-chip{display:flex;align-items:center;gap:5px;background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--stage-todo);
  border-radius:6px;padding:3px 6px;font-size:11.5px;line-height:1.35;color:var(--ink-2)}
.cal-chip:hover{border-color:var(--line-2);color:var(--ink)}
.cal-chip.s-doing{border-left-color:var(--stage-doing)}
.cal-chip.s-review{border-left-color:var(--stage-review)}
.cal-chip.s-done{border-left-color:var(--stage-done);opacity:.55;text-decoration:line-through}
.cal-chip.over{background:color-mix(in srgb,var(--over) 12%,transparent);
  border-color:color-mix(in srgb,var(--over) 40%,transparent);color:var(--over);font-weight:600}
.cal-dot{width:7px;height:7px;border-radius:50%;background:var(--c,#8b85ad);flex:none}
.cal-ev{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 4px;
  font-size:9.5px;font-weight:700;flex:none}
.cal-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:860px){
  .cal-cell{min-height:78px;padding:4px}
  .cal-tt{display:none}
  .cal-chip{padding:3px 4px;justify-content:center}
  .cal-day{font-size:11px}
}

/* =========================================================
   タスク詳細
   ========================================================= */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media(max-width:1000px){.detail{grid-template-columns:1fr}}
.detail h1{font-size:19px;line-height:1.5}
.meta-list{list-style:none;margin:0;padding:0;font-size:14px}
.meta-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.meta-list li:last-child{border-bottom:0}
.meta-list .k{color:var(--ink-3);font-size:13px;white-space:nowrap}
.body-text{white-space:pre-wrap;line-height:1.9;font-size:14px}
.comment{border-top:1px solid var(--line);padding:12px 0}
.comment:first-of-type{border-top:0}
.comment .cm-head{font-size:12px;color:var(--ink-3);margin-bottom:3px}
.comment .cm-body{white-space:pre-wrap;font-size:14px;line-height:1.8}
.logline{font-size:12px;color:var(--ink-3);padding:6px 0;border-bottom:1px dotted var(--line)}
.linklist{list-style:none;padding:0;margin:0 0 10px}
.linklist li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;display:flex;justify-content:space-between;gap:8px}
.linklist a{color:var(--accent);word-break:break-all}
.linklist .btn{white-space:nowrap;align-self:flex-start}

.danger-zone{margin-top:22px;border:1px solid color-mix(in srgb,var(--over) 40%,transparent);
  border-radius:12px;background:color-mix(in srgb,var(--over) 7%,transparent)}
.danger-zone summary{cursor:pointer;padding:11px 14px;font-size:13px;font-weight:700;color:var(--over)}
.danger-zone > p{font-size:12.5px;color:var(--ink-2);line-height:1.8;margin:0 14px 12px}
.danger-zone form{padding:0 14px 14px}
.danger-zone .field{margin-bottom:10px}

/* =========================================================
   フォーム内の選択肢
   ========================================================= */
.kindpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.kindpick{grid-template-columns:1fr}}
.kindopt{display:flex;gap:9px;align-items:flex-start;margin:0;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--surface-3);cursor:pointer;font-weight:500}
.kindopt:hover{border-color:var(--line-2);background:var(--surface-2)}
.kindopt.on{border-color:var(--accent);background:var(--accent-soft)}
.kindopt input{width:16px;height:16px;flex:none;margin:2px 0 0}
.kindopt strong{display:block;font-size:14px}
.kindopt small{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.6;margin-top:2px;font-weight:400}

.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px;
  border:1px solid var(--line-2);border-radius:10px;padding:8px;background:var(--surface-3);
  max-height:230px;overflow-y:auto}
.chk{display:flex;align-items:center;gap:8px;margin:0;padding:6px 8px;border-radius:7px;font-weight:500;cursor:pointer}
.chk:hover{background:var(--surface-2)}
.chk input{width:16px;height:16px;flex:none;margin:0}
.chk small{color:var(--ink-3);font-size:11px;margin-left:5px}

/* 並べ替えのハンドル */
.handle{cursor:grab;color:var(--ink-3);text-align:center;user-select:none;font-size:15px;letter-spacing:-1px}
.handle:active{cursor:grabbing}
tbody.sortable tr.dragging{opacity:.45;background:var(--accent-soft)}
tbody.sortable.saving{opacity:.6}
@media(hover:none){.handle,.handle-col{display:none}}

/* =========================================================
   ログイン
   ========================================================= */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 20% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),var(--plane)}
.login-box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.login-logo{display:block;margin:0 auto 14px;width:64px;height:64px;border-radius:16px;
  border:1px solid var(--line);object-fit:cover}
.login-box h1{font-size:18px;margin-bottom:20px;text-align:center}
.login-box .btn{width:100%;padding:11px}
.note{font-size:12px;color:var(--ink-3);margin-top:16px;line-height:1.8}

/* =========================================================
   議事録からの取り込み（admin/import.php）
   ========================================================= */

/* 注意書き用の中立な flash（.ok/.ng が付かないもの） */
.flash:not(.ok):not(.ng){
  background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}

.imp-steps{margin-bottom:18px}
.imp-ol{margin:0 0 12px;padding-left:22px;font-size:14px;color:var(--ink-2);line-height:1.9}
.imp-ol strong{color:var(--ink)}

.imp-prompt{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.6;background:var(--surface-2);color:var(--ink-2)}

/* 確認画面 ------------------------------------------------ */

.imp-bar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  position:sticky;top:0;z-index:5;
  background:var(--plane);padding:10px 0 12px;margin-bottom:4px;
  font-size:13px;color:var(--ink-3);border-bottom:1px solid var(--line)}

.imp-row{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.imp-row.dup{border-left-color:var(--soon)}
.imp-row.skipped{opacity:.5;border-left-color:var(--line-2)}
.imp-row.appending{border-left-color:var(--near)}

.imp-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.imp-no{
  flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-3);font-size:12px;font-weight:700}
.imp-title{flex:1;min-width:240px;font-weight:600}

.imp-act{display:flex;gap:4px;flex:none}
.imp-opt{
  display:inline-flex;align-items:center;cursor:pointer;
  border:1px solid var(--line-2);border-radius:8px;padding:5px 10px;
  font-size:12.5px;color:var(--ink-2);background:var(--surface)}
.imp-opt input{position:absolute;opacity:0;width:1px;height:1px;min-width:0;margin:0}
.imp-opt.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.imp-opt:hover{border-color:var(--accent)}

.imp-fields{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 10px}
.imp-fields > label{
  display:flex;flex-direction:column;gap:3px;
  font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.imp-fields > label small{font-weight:400;color:var(--ink-3)}
.imp-fields select,
.imp-fields input,
.imp-fields textarea{font-size:13px;padding:5px 8px}
.imp-fields select[multiple]{padding:2px}
.imp-subs{grid-column:span 2}
.imp-body{grid-column:1 / -1}
.imp-body textarea{min-height:0;font-size:13px}

.imp-notes{
  margin:10px 0 0;padding:8px 10px 8px 26px;border-radius:8px;
  background:var(--surface-2);color:var(--ink-2);font-size:12.5px;line-height:1.7}

.imp-dup{
  margin-top:10px;padding:10px 12px;border-radius:8px;font-size:12.5px;line-height:1.7;
  background:color-mix(in srgb,var(--soon) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--soon) 32%,transparent);color:var(--ink-2)}
.imp-dup strong{color:var(--soon)}
.imp-dup label{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:11px;color:var(--ink-3)}
.imp-dup select{font-size:13px;padding:5px 8px}
.imp-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.imp-links a{font-size:12px}

/* 取り込み元の表示（タスク詳細） */
.src-chip{font-size:11px;color:var(--ink-3)}

@media (max-width:720px){
  .imp-subs{grid-column:1 / -1}
  .imp-title{min-width:100%}
}

/* =========================================================
   カンバン：未着手と完了を小さく表示する（v14、v15で完了も全部小さく）
   どの列にあるかで見た目が決まるので、ドラッグで列を移すと
   自動で大きい表示／小さい表示が切り替わる。
   ========================================================= */

/* 短い日付は通常は出さない */
.due-short{display:none}

/* 完了列の小見出しと「それ以前」 */
.col-sub{font-size:11px;color:var(--ink-3);padding:0 6px;margin-top:-4px}
.done-recent{display:flex;flex-direction:column;gap:5px}
.done-recent .empty{padding:8px 0}
.done-old{border-top:1px dashed var(--line-2);padding-top:8px}
.done-old > summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:12px;font-weight:600;color:var(--ink-3);padding:4px 6px;border-radius:8px}
.done-old > summary::-webkit-details-marker{display:none}
.done-old > summary::before{content:"▸";font-size:11px;transition:transform .15s}
.done-old[open] > summary::before{transform:rotate(90deg)}
.done-old > summary:hover{background:var(--surface-3);color:var(--ink)}
.done-old > summary .n{background:var(--surface);border-radius:999px;padding:0 8px;font-size:11px;font-weight:700}
.done-old-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}

/* 小さい表示の本体（未着手と完了。v15 で完了の直近ぶんも小さくした） */
.col[data-status=todo],
.col[data-status=done]{gap:5px}
.col[data-status=todo] .card,
.col[data-status=done] .card{
  display:grid;
  /* 点・日付・タイトル・担当者。日付の幅を固定して、タイトルの書き出しを縦にそろえる */
  grid-template-columns:8px 34px minmax(0,1fr) auto;
  align-items:start;column-gap:7px;row-gap:0;
  padding:7px 9px;border-radius:9px;box-shadow:none}

/* カテゴリは文字をやめて色の点に */
.col[data-status=todo] .card .cat,
.col[data-status=done] .card .cat{
  grid-column:1;grid-row:1;align-self:start;margin-top:5.5px;
  width:8px;height:8px;padding:0;border-radius:50%;font-size:0;line-height:0;
  background:var(--c,#8b85ad)}

/* 日付・タイトル・担当者を1行に並べる */
.col[data-status=todo] .card .card-meta,
.col[data-status=done] .card .card-meta{display:contents}

.col[data-status=todo] .card .due,
.col[data-status=done] .card .due{display:none}

.col[data-status=todo] .card .due-short,
.col[data-status=done] .card .due-short{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;grid-column:2;grid-row:1;
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap;line-height:1.6}
.col[data-status=todo] .card .due-short.due-over{color:var(--over)}
.col[data-status=todo] .card .due-short.due-soon{color:var(--soon)}
.col[data-status=todo] .card .due-short .kind-chip,
.col[data-status=done] .card .due-short .kind-chip{order:2;margin:0;padding:0 4px;font-size:10px;line-height:1.5}

/* タイトルは2行まで。それ以上は「…」で切り、全文はカードに触れると出る */
.col[data-status=todo] .card .card-title,
.col[data-status=done] .card .card-title{
  grid-column:3;grid-row:1;
  font-size:13px;font-weight:600;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.col[data-status=todo] .card.pri-h .card-title::before{
  content:"!";color:var(--over);font-weight:800;margin-right:4px}

.col[data-status=todo] .card .who,
.col[data-status=done] .card .who{
  grid-column:4;grid-row:1;
  font-size:11.5px;color:var(--ink-3);white-space:nowrap;line-height:1.6;
  max-width:5.5em;overflow:hidden;text-overflow:ellipsis}
.col[data-status=todo] .card .who .sub-n,
.col[data-status=done] .card .who .sub-n{display:none}

/* 優先度・コメント数のバッジは小さい表示では出さない */
.col[data-status=todo] .card .card-badges,
.col[data-status=done] .card .card-badges{display:none}

/* 古い完了は少し退かせる */
.done-old .card{opacity:.78}
.done-old .card:hover{opacity:1}
.done-old .card .card-title{text-decoration:line-through;text-decoration-color:var(--line-2);font-weight:500}