/* socious-ops レビューコンソール: 軽量・自己完結のレスポンシブCSS（CDN非依存）。
   スマホ優先。大きめのタップ領域で承認操作を快適に。 */
:root {
  --fg: #1c2530; --muted: #6b7785; --bg: #f5f7fa; --card: #ffffff;
  --line: #e1e6ec; --accent: #2563eb; --ok: #15803d; --danger: #b91c1c;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--fg); background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: .6rem 1rem; position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-weight: 700; color: var(--fg); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topbar .me { color: var(--muted); font-size: .85rem; }

.container { max-width: 880px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.35rem; margin: .3rem 0 1rem; }
h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; }
.muted { color: var(--muted); font-size: .85rem; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.card.narrow { max-width: 420px; margin: 2rem auto; }

.flash { padding: .6rem .8rem; border-radius: 8px; margin: .6rem 0; font-size: .9rem; }
.flash.err { background: #fdecec; color: var(--danger); }
.flash.ok  { background: #e9f6ee; color: var(--ok); }
.flash.dev { background: #fff7e0; color: #92590a; }

/* フォーム */
label { display: block; margin: .7rem 0; font-size: .9rem; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: .7rem .8rem; margin-top: .3rem; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--fg);
}
button {
  font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff;
  padding: .55rem .9rem; border-radius: 8px; color: var(--fg);
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.big { padding: .85rem 1.1rem; font-size: 1rem; width: 100%; margin-top: .5rem; }
.linkbtn { background: none; border: none; color: var(--accent); padding: 0; }
form.inline { display: inline; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filters select, .filters input { width: auto; flex: 1 1 8rem; margin-top: 0; }
.filters button { flex: 0 0 auto; }

/* カード一覧 */
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.taskcard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.taskcard.pin { border-color: #f4c84a; box-shadow: 0 0 0 2px #fdf0c9 inset; }
.cardlink { display: block; padding: .8rem .9rem; color: inherit; }
.cardlink:hover { text-decoration: none; background: #fafbfc; }
.cardtop { display: flex; align-items: center; gap: .5rem; }
.code { font-family: ui-monospace, monospace; color: var(--muted); font-size: .8rem; }
.cardtitle { font-weight: 600; margin: .3rem 0; }
.cardmeta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }

/* バッジ */
.badge { font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.badge.d { background: #eef2f7; }
.s-todo { background: #eef2f7; }
.s-in_progress { background: #e0edff; border-color: #b9d4ff; }
.s-review { background: #fff3d6; border-color: #f4d486; }
.s-approved { background: #e9f6ee; border-color: #b7e3c6; }
.s-rejected { background: #fdecec; border-color: #f3bcbc; }
.s-done { background: #eceff3; color: var(--muted); }
.p-high { background: #fff0e6; border-color: #ffd2b0; }
.p-urgent { background: #fde2e2; border-color: #f3a9a9; }

.body { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; }
/* 長文（研究JSON等）は全文を保持しつつ高さを制限してスクロール表示（レイアウトを崩さない） */
.body.long { max-height: 70vh; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.links { margin: .3rem 0; padding-left: 1.2rem; }

.actions { margin-top: 1.2rem; display: grid; gap: .6rem; }
.rejectbox summary { display: inline-block; padding: .85rem 1.1rem; border-radius: 8px; border: 1px solid var(--danger); color: var(--danger); text-align: center; cursor: pointer; list-style: none; }
.rejectbox[open] summary { margin-bottom: .6rem; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.timeline .ev { font-weight: 600; }
.timeline .arrow { font-family: ui-monospace, monospace; font-size: .8rem; }

/* ボード */
.tablewrap { overflow-x: auto; }
table.board { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--card); }
table.board th, table.board td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: center; }
table.board th { background: #eef2f7; }
table.board td.assignee { text-align: left; white-space: nowrap; }
table.board td.num { font-variant-numeric: tabular-nums; }
table.board td.num.has { font-weight: 700; }
table.board td.total { background: #f7f9fb; }
table.board tfoot td { background: #eef2f7; font-weight: 700; }
/* ロール識別表示（display_name 主・mechanical id 副） */
td.assignee .rolename { font-weight: 700; }
td.assignee .svc { margin-left: .3rem; font-size: .72rem; color: #2d6cdf; border: 1px solid #cfe0fb; border-radius: 4px; padding: 0 .3rem; }
td.assignee .role-sub { display: block; font-size: .76rem; }
td.assignee .rid { font-family: ui-monospace, monospace; opacity: .7; }

/* 管理役チャット */
.chat .msg { margin: .5rem 0; }
.chat .who { font-size: .75rem; font-weight: 700; color: var(--muted, #667); }
.chat .bubble { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin-top: .2rem; }
.chat .msg.user .bubble { background: #eef4ff; }
.chat .msg.assistant .bubble { background: #fafbfc; }

/* 新規タスクフォーム */
.taskform { display: flex; flex-direction: column; gap: .9rem; max-width: 640px; }
.taskform label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
.taskform input, .taskform select, .taskform textarea {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card);
}
.taskform .row { display: flex; gap: .8rem; flex-wrap: wrap; }
.taskform .row label { flex: 1 1 8rem; }
.taskform .req { color: #c0392b; }
.taskform button.primary {
  align-self: flex-start; font: inherit; font-weight: 700; padding: .6rem 1.1rem;
  border: 0; border-radius: 6px; background: #2d6cdf; color: #fff; cursor: pointer;
}

@media (max-width: 480px) {
  .topbar nav { gap: .7rem; }
  .container { padding: .8rem; }
}