/* 共通部品。**ボタン・入力・表・カード・しるしの見た目はここでしか決めない。**
 *
 * これより前は同じ役割の部品が画面ごとに別々に書かれていた（主ボタンだけで
 * 6箇所・padding は 6/8/10/12px がばらばら）。クラス名を全画面に振り直すと
 * JS の生成箇所まで触ることになるので、**既存のセレクタを役割ごとに束ねて**
 * 1つの定義に集約している。新しい部品を足すときは、この束のどれかに加える。 */

/* ============ ボタン ============ */

/* --- 主操作。1つの画面に1つだけ --- */
#login button[type=submit],
form.chat button,
.uform button,
#desk button.go,
#escdlg .go,
#pwdlg .go,
.kbform .acts button.go {
  border:1px solid var(--accent); border-radius:var(--r1);
  background:var(--accent); color:var(--ink-on-accent);
  font-family:inherit; font-size:var(--f-md); font-weight:600;
  padding:var(--s2) var(--s4); cursor:pointer;
  transition:background .12s ease;
}
#login button[type=submit]:hover:enabled,
form.chat button:hover:enabled,
.uform button:hover:enabled,
#desk button.go:hover:enabled,
#escdlg .go:hover:enabled,
#pwdlg .go:hover:enabled,
.kbform .acts button.go:hover:enabled { background:var(--accent-hover); }

/* --- 副操作。面は白、罫で示す --- */
.srow button, button.mini,
#desk button.out,
#pwdlg .cancel, #escdlg .cancel,
#roledlg .ghost,
.kbchunk button, .kbform .acts button,
.mem .after button,
.utable button, .utable select,
.attach .dl,
.askrow button {
  border:1px solid var(--line-strong); border-radius:var(--r1);
  background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:var(--f-sm); font-weight:500;
  padding:var(--s1) var(--s3); cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.srow button:hover:enabled, button.mini:hover:enabled,
#desk button.out:hover:enabled,
#pwdlg .cancel:hover:enabled, #escdlg .cancel:hover:enabled,
#roledlg .ghost:hover, .kbchunk button:hover:enabled,
.kbform .acts button:hover:enabled, .mem .after button:hover:enabled,
.utable button:hover:enabled, .attach .dl:hover:enabled,
.askrow button:hover:enabled { background:var(--surface-3); border-color:var(--ink-3); }

/* --- 承認・却下・注意。**面ではなく文字と罫で色を出す**
       （承認ボタンだけ緑の面にすると、画面の中で一番強い要素になってしまう） --- */
.mem .ok  { border:1px solid var(--ok);   background:var(--ok-soft);   color:var(--ok); }
.mem .ng  { border:1px solid var(--bad);  background:var(--surface);   color:var(--bad); }
.mem .warn{ border:1px solid var(--warn); background:var(--surface);   color:var(--warn); }
.utable button.danger, .kbchunk button.danger {
  border-color:var(--bad-line); color:var(--bad); background:var(--surface); }
.utable button.danger:hover:enabled, .kbchunk button.danger:hover:enabled {
  background:var(--bad-soft); border-color:var(--bad); }
.mem button { border-radius:var(--r1); font-family:inherit; font-size:var(--f-sm);
              font-weight:600; padding:var(--s1) var(--s3); cursor:pointer; }

/* --- 押せないものは沈める。**消さない**（そこに何があるかは見せる） --- */
button:disabled { opacity:.5; cursor:default; }

/* ============ 入力 ============ */

#login input, #pwdlg input,
#escdlg textarea,
.uform input:not([type=checkbox]), .uform select,
.srow input:not([type=checkbox]), .srow select,
#desk .dsec input, #desk .dsec textarea,
.kbform input, .kbform textarea, .kbchunk textarea,
form.chat textarea,
.mem .rback input,
.utable input.email {
  border:1px solid var(--line-strong); border-radius:var(--r1);
  background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:var(--f-md);
  padding:var(--s2) var(--s3);
  box-sizing:border-box; transition:border-color .12s ease, box-shadow .12s ease;
}
#login input:focus, #pwdlg input:focus, #escdlg textarea:focus,
.uform input:not([type=checkbox]):focus, .srow input:not([type=checkbox]):focus,
#desk .dsec input:focus, #desk .dsec textarea:focus,
.kbform input:focus, .kbform textarea:focus, .kbchunk textarea:focus,
form.chat textarea:focus, .mem .rback input:focus, .utable input.email:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
::placeholder { color:var(--ink-3); }
input:disabled, textarea:disabled, select:disabled {
  background:var(--surface-3); color:var(--ink-2); }

/* 押せる部品の焦点。**キーボードだけで辿れること**（枠が出ないと現在地を失う） */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ============ カード（面） ============ */

.card, .mem, .audit, .kbchunk, .kbform, #desk .dsec, #desk details.ctx, .kbraw {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:var(--sh1);
}

/* ============ 表 ============ */

.utable { width:100%; max-width:900px; border-collapse:separate; border-spacing:0;
          font-size:var(--f-md); background:var(--surface);
          border:1px solid var(--line); border-radius:var(--r2);
          overflow:hidden; box-shadow:var(--sh1); }
.utable th, .utable td { padding:var(--s2) var(--s3); text-align:left;
                         border-bottom:1px solid var(--line); }
.utable tr:last-child td { border-bottom:none; }
.utable th { background:var(--surface-3); color:var(--ink-2);
             font-weight:600; font-size:var(--f-sm); white-space:nowrap; }
.utable tr.clickable { cursor:pointer; }
.utable tr.clickable:hover td { background:var(--surface-2); }
.utable tr.sel td { background:var(--accent-soft); }
/* 数値列は右寄せ・等幅。**桁を揃えないと業務の表に見えない** */
.utable td.num, .utable th.num { text-align:right; white-space:nowrap;
                                 font-variant-numeric:tabular-nums; }
.utable td.num .sub { color:var(--ink-2); font-size:var(--f-xs); margin-left:var(--s1); }

/* ============ しるし（pill / badge / tag） ============ */

.pill, .kbtag, .tag {
  display:inline-block; font-size:var(--f-xs); line-height:1.7;
  padding:0 var(--s2); border-radius:var(--r-pill); white-space:nowrap;
  border:1px solid var(--line); background:var(--surface-3); color:var(--ink-2); }
.pill.open     { background:var(--bad-soft);  color:var(--bad);  border-color:var(--bad-line); }
.pill.answered { background:var(--ok-soft);   color:var(--ok);   border-color:var(--ok-line); }
.pill.returned,
.pill.aged     { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.kbtag.ok   { background:var(--ok-soft);   color:var(--ok);   border-color:var(--ok-line); }
.kbtag.warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.kbtag.bad  { background:var(--bad-soft);  color:var(--bad);  border-color:var(--bad-line); }
.tag { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line);
       margin-left:var(--s2); }

/* 件数バッジ。**数字は等幅**にして、増減で幅が跳ねないようにする */
.badge { display:inline-block; background:var(--warn); color:#fff;
         border-radius:var(--r-pill); padding:0 6px; font-size:var(--f-xs);
         line-height:1.6; margin-left:var(--s1);
         font-variant-numeric:tabular-nums; }
.badge[hidden] { display:none; }

/* ============ 説明文とコード ============ */

.note { font-size:var(--f-sm); color:var(--ink-2); line-height:1.8;
        margin-bottom:var(--s4); max-width:78ch; }
.note code, .note strong { color:var(--ink); }
.note code { background:var(--surface-3); border-radius:var(--r1);
             padding:1px 5px; font-family:var(--mono); font-size:var(--f-xs); }

/* チェックボックス・ラジオは枠を付けない。**上の入力欄の指定から外してある** ——
   flex:1 や padding が当たると、しるしが横に伸びてラベルから離れる（2026-09-08 に踏んだ） */
input[type=checkbox], input[type=radio] { accent-color:var(--accent); cursor:pointer;
                                          flex:none; width:auto; min-width:0; margin:0; }
label:has(> input[type=checkbox]) { cursor:pointer; }