/* ============================================================
   全画面で使う部品（ボタン・入力欄・カード・表・トースト等）。
   **運営コンソールはこのファイルと base/tokens/dialog/auth だけで出来ている。**
   ここを直すと顧客画面と運営コンソールの両方が変わる。

   2026-08-16: style.css（867行）を画面ごとに分けたもの。読み込む順は
   index.html / operator.html の <link> の並びが正で、その順に連結すると
   元の style.css と同じ適用順になる。順番を入れ替えないこと。
   ============================================================ */
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.screen:focus{ outline:none; }
.brand .mark{ font-family:'Zen Maru Gothic', sans-serif; }
.ttl{ font-weight:700; letter-spacing:.01em; }
.num{ font-variant-numeric:tabular-nums; }

/* ============================================================
   Shell
   ============================================================ */
.wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 20px 72px; }

.topbar{
  position:sticky; top:0; z-index:30; background:var(--card);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.topbar-in{
  max-width:var(--wrap-max); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand .mark{
  font-size:1.28em; letter-spacing:.06em; color:var(--ink);
}
.brand .sub{ font-size:.78em; color:var(--ink-3); letter-spacing:.08em; }
.seg{ display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.seg button{
  background:var(--card); border:0; padding:8px 14px; cursor:pointer;
  color:var(--ink-2); min-height:44px;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); font-weight:700; }

.filters{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 18px; }
.filters .fl{ font-size:.86em; color:var(--ink-2); }

/* ============================================================
   Blocks
   ============================================================ */
.screen{ display:none; }
.screen.on{ display:block; }
.head{ padding:34px 0 22px; }
.head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:14px; }
.eyebrow{
  font-size:.78em; letter-spacing:.16em; color:var(--ink-3);
  text-transform:none; margin-bottom:8px;
}
.head h1{ font-size:2.0em; }
.head .lead{ margin-top:12px; color:var(--ink-2); max-width:46em; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{ padding:26px 28px; }
.grid{ display:grid; gap:18px; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
/* 3カラムは 1200 未満で2カラム、768 未満で1カラム。**この3つ以外の境界を
   足さないこと**（tests_css_breakpoints.py が落とす）。 */
@media (max-width:1199.98px){ .g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767.98px){ .g3,.g2{ grid-template-columns:1fr; } }

.sect-h{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 0 14px;
}
.sect-h h2{ font-size:1.24em; }

/* Buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; font-weight:700; box-shadow:var(--shadow); text-decoration:none;
}
.btn:hover{ background:var(--card-2); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ filter:brightness(1.08); background:var(--accent); }
.btn-lg{ min-height:64px; font-size:1.06em; padding:0 34px; }
.btn-ghost{ box-shadow:none; background:transparent; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn .ico{ font-size:1.1em; line-height:1; }

.actions{
  position:sticky; bottom:0; margin-top:34px; padding:16px 20px;
  background:var(--card); border-top:1px solid var(--line);
  display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-up);
}
.actions .spacer{ margin-left:auto; }
.actions .hint{ color:var(--ink-3); font-size:.88em; }

.field label{ display:block; font-weight:700; margin-bottom:8px; }
.field .help{ color:var(--ink-3); font-size:.88em; margin-bottom:10px; }

.pill{
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  font-size:.82em; font-weight:700; white-space:nowrap;
}
.pill::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.pill.ok{ background:var(--green-soft); color:var(--green); }
.pill.warn{ background:var(--amber-soft); color:var(--amber); }
.pill.draft{ background:var(--line-2); color:var(--ink-2); }
.pill.data{ background:var(--teal-soft); color:var(--teal); }

/* Tables ------------------------------------------------------ */
/* 横スクロールする領域は、**キーボードだけの人も操作できないといけない。**
   HTML 側に role="region" と tabindex="0" を付けてある（付いていないと
   axe / Lighthouse の scrollable-region-focusable＝WCAG 2.1.1 で落ちる）。
   ここでフォーカスが見えるようにしておく。 */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.tablewrap:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* 名前セル：アバター＋名前を1行に。SmartHR/Backlogに合わせ、
   名前の左に必ず頭文字アイコンを置いて折り返っても迷子にならないようにする。 */
.namecell{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
  flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent-ink); font-weight:700; font-size:.86em;
  display:flex; align-items:center; justify-content:center;
}
.namecell .nametext{ min-width:0; }
.namecell .nm{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.namecell .me{
  display:inline-block; margin-left:8px; font-size:.72em; font-weight:700;
  color:var(--ink-3); background:var(--line-2); border-radius:4px; padding:1px 7px;
  vertical-align:middle;
}
td.ellip .cell-ellip{
  display:inline-block; max-width:240px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; vertical-align:middle;
}

/* 「…」操作メニュー。テキストリンクを縦に並べて折り返るのを防ぐため、
   低頻度の行内操作はここにまとめる（Notion/Slack/GitHubの組織メンバー一覧と同じ考え方）。 */
.kebab{ position:relative; display:inline-block; }
.kebab-trigger{
  border:1px solid var(--line); background:var(--card); border-radius:8px;
  width:34px; height:34px; font-size:1.1em; line-height:1; color:var(--ink-2); cursor:pointer;
}
.kebab-trigger:hover{ border-color:var(--accent); color:var(--accent-ink); }
.kebab-menu{
  position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:168px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; gap:2px;
}
.kebab-item{
  border:0; background:none; text-align:left; padding:9px 10px; border-radius:6px;
  cursor:pointer; color:var(--ink); font-size:.92em; white-space:nowrap;
}
.kebab-item:hover{ background:var(--card-2); }
.kebab-item.danger{ color:var(--clay); }
td.c,th.c{ text-align:center; }
td .sysname{ color:var(--teal); font-weight:700; }
.rowno{ font-weight:700; color:var(--ink-2); }
.editcol{ width:132px; }
/* **行の中のボタンは折り返させない。** .editcol は幅 132px 固定で、.btn は
   white-space を持たないため、少し長いラベルを入れると文字が縦に折り返して
   行の高さが2〜4倍に伸びる。2026-08-16 にパートナー画面（148px）と
   運営コンソール（148px）で**2回連続で踏んだ**ので、各画面で対処するのを
   やめてここに置いた。 */
.editcol .btn{ white-space:nowrap; }

/* ------------------------------------------------------- 共通の小さな部品
   2026-08-16 に user/ と admin/ から移した。**どれも複数の画面で使われていた**
   のに、片方のファイルにしか定義が無く、単体で読むと壊れて見える状態だった。 */

/* 補足の一言。**素の .note に定義が無かった**ので、`.sect-h` の中に置かれた
   ものだけ偶然効いていて、外に置かれたものは何も当たっていなかった
   （admin/screens.html に3か所、user にも複数）。 */
.note{ font-size:.86em; color:var(--ink-3); }

/* 「いま何が起きているか」を伝える帯（編集中・保存ずみなど）。
   定義が admin.css、修飾（.warn）が user.css に分かれていた。 */
.locked{
  display:flex; gap:14px; padding:16px 18px; border-radius:var(--radius);
  background:var(--card-2); border:1px solid var(--line); margin-bottom:18px;
}
.locked .k{ font-weight:700; color:var(--teal); white-space:nowrap; }
.locked.warn{ background:var(--clay-soft); border-color:var(--clay); }
.locked.warn .k{ color:var(--clay); }

/* 表の行の中に並べる小さなボタン（上へ・下へ・削除など）。 */
.rowacts{ display:flex; gap:4px; justify-content:center; }
.rowacts button{
  min-width:34px; min-height:34px; padding:0 6px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink-2);
  cursor:pointer; font-size:.95em; line-height:1;
}
.rowacts button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent-ink); }
.rowacts button:disabled{ opacity:.35; cursor:default; }

/* Notice ------------------------------------------------------ */
.notice{
  display:flex; gap:16px; padding:20px 22px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--amber-soft); color:var(--ink);
}
.notice .k{ font-weight:700; color:var(--amber); white-space:nowrap; }
.notice.calm{ background:var(--accent-soft); }
.notice.calm .k{ color:var(--accent-ink); }
.qerr{ color:var(--clay); font-weight:700; font-size:.9em; margin-top:8px; }

/* Options ----------------------------------------------------- */
.opt{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line-2); }
.opt:last-child{ border-bottom:0; }
:root[data-role="viewer"] #s4 .g2{ grid-template-columns:1fr; }

.toast{
  visibility:hidden;
  position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(140%);
  z-index:60; display:flex; gap:16px; align-items:center;
  background:var(--ink); color:var(--paper); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--shadow-lg); max-width:min(660px, calc(100vw - 32px));
  transition:transform .28s ease;
}
.toast.on{ visibility:visible; transform:translateX(-50%) translateY(0); }
.toast .tt{ font-weight:700; }
.toast .btn{
  width:auto; min-width:0; min-height:44px; padding:0 16px; font-size:.9em; background:transparent;
  border-color:rgba(255,255,255,.35); color:var(--paper); box-shadow:none;
}
.toast .btn:hover{ background:rgba(255,255,255,.12); }
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }
.btn[data-locked]{ opacity:.45; cursor:not-allowed; }

.toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px;
}
/* 検索欄。**顧客画面では1度も使っていない。**使っているのは管理画面の4か所
   （グループ・グループ詳細・メンバー・操作の記録）と運営コンソールだけ。
   2026-08-16 の分割でうっかり user/user.css に入れてしまい、
   **顧客画面のファイルを直すと管理画面の検索欄が黙って崩れる**形になっていた
   （git は衝突せず、テストも落ちない）。管理画面セッションの指摘で shared へ移した。 */
.toolbar .search{ flex:1 1 260px; max-width:420px; }
.toolbar .search input{ min-height:52px; }
.linkbtn{
  border:0; background:none; padding:0; cursor:pointer; color:var(--accent-ink);
  font-weight:700; text-decoration:underline; text-underline-offset:3px;
}

.footnote{ margin-top:34px; color:var(--ink-3); font-size:.86em; max-width:52em; }
.kbd{ font-size:.82em; color:var(--ink-3); }

/* 補足の箇条書き。画面の下に「守られていること」を並べるのに使う。 */
.notes {
  margin: 18px 0 0;
  padding-left: 1.2em;
  color: var(--ink-2);
  font-size: .92em;
  line-height: 1.85;
}
.notes li { margin-bottom: 4px; }