/* C:\Dropbox\Programs\Claude\slack-pulse\web\assets\style.css */
:root {
  --bg: #0f1117;
  --card: #1a1d27;
  --card2: #232734;
  --text: #e6e8ee;
  --muted: #8b90a0;
  --accent: #4f8cff;
  --accent2: #ff5c8a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid #2a2e3c;
}
.topbar h1 { margin: 0; font-size: 20px; letter-spacing: .04em; }
.topbar .meta { color: var(--muted); font-size: 13px; display: flex; gap: 16px; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hot hot"
    "timeline people";
  gap: 16px;
  padding: 16px 22px;
}
.hotwords  { grid-area: hot; }
.timeline  { grid-area: timeline; }
.people    { grid-area: people; }
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; grid-template-areas: "hot" "timeline" "people"; }
}

.card {
  background: var(--card);
  border: 1px solid #2a2e3c;
  border-radius: 12px;
  padding: 16px 18px;
}
.card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.card h2 small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.card-head { display: flex; align-items: center; justify-content: space-between; }
select {
  background: var(--card2); color: var(--text);
  border: 1px solid #353a4a; border-radius: 8px; padding: 4px 8px; font-size: 13px;
}

/* ホットワードクラウド */
.cloud { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: baseline; min-height: 64px; }
.cloud .w { line-height: 1; transition: transform .2s; overflow-wrap: anywhere; max-width: 100%; }
.cloud .w b { font-weight: 700; }
.cloud .w small { color: var(--muted); font-size: .6em; margin-left: 3px; }
.cloud .w.new { animation: pop .5s ease; }
@keyframes pop { from { transform: scale(1.3); color: var(--accent2); } to { transform: scale(1); } }

/* 投稿状況 */
.total { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.people-list { list-style: none; margin: 0; padding: 0; }
.people-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid #252938;
}
.people-list .rank { width: 22px; color: var(--muted); font-variant-numeric: tabular-nums; }
.people-list img { width: 26px; height: 26px; border-radius: 6px; background: #333; }
.people-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list .bar { height: 6px; background: var(--accent); border-radius: 3px; min-width: 2px; }
.people-list .cnt { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.people-list .last { width: 88px; text-align: right; color: var(--muted); font-size: 12px; }

canvas { width: 100% !important; height: 260px !important; }

/* スマホ(狭い画面)向け: 余白圧縮・上部バー縦積み・投稿状況の行を画面内に収める */
@media (max-width: 600px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }
  .topbar h1 { font-size: 17px; }
  .topbar .meta { gap: 12px; font-size: 12px; flex-wrap: wrap; }

  .grid { padding: 10px 12px; gap: 12px; }
  .card { padding: 12px 13px; border-radius: 10px; }
  .card h2 { font-size: 14px; }

  .cloud { gap: 8px 10px; }

  .people-list li { gap: 8px; }
  .people-list img { width: 22px; height: 22px; }
  .people-list .bar { display: none; }       /* 装飾バーは省いて確実に収める(順位と件数で十分) */
  .people-list .cnt { width: 38px; }
  .people-list .last { width: 58px; font-size: 11px; }

  canvas { height: 220px !important; }
}