/* ============================================================
   Chalk — Hall of Fame / Shame, Picker DNA, Ramble
   ============================================================ */

/* ---- most decorated ---- */
.honour{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.hon{
  display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:9px 12px;
}
.hon .pos{
  width:22px;height:22px;border-radius:6px;background:#eef2f6;color:var(--muted);
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:none;
}
.hon.first .pos{background:var(--bb);color:#fff}
.hon .nm{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hon .ct{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;font-size:15px;text-align:right;line-height:1}
.hon .ct small{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---- boards ---- */
.boardgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:start}
.board table.grid td{padding:7px 10px}
.board table.grid .rk{width:26px;color:var(--faint,#8b97a6);font-size:12px}
.board table.grid .big{font-size:14px}
.board.fame .phead{border-bottom-color:#f0e2bf}
.board.shame .phead{border-bottom-color:#f2d9d6}
.board.fame tbody tr:first-child .who{font-weight:800}
.board.fame tbody tr:first-child .big{color:var(--bb-ink)}
.board.shame tbody tr:first-child .big{color:#a4231a}

/* ---- yearly ---- */
/* Same 12px above and below as .panel. Without it the year cards sat flush
   against the wing tabs, which no other page does. */
.yeargrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));margin:12px 0}
.yearcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);
}
.yearcard .yr{
  font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--accent);line-height:1;margin-bottom:9px;
}
.podium{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.podium li{display:flex;align-items:baseline;gap:8px;font-size:13.5px;padding:3px 0}
.podium li .nm{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium li .v{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.podium li.p1 .nm{font-weight:800}
.podium li.p1 .v{color:var(--good)}
.podium li.p1::before{content:"🥇";font-size:12px}
.podium li.p2::before{content:"🥈";font-size:12px}
.podium li.p3::before{content:"🥉";font-size:12px}
.podium li.p4::before{content:"·";color:var(--muted);font-weight:800;width:12px;text-align:center}
.podium li.p5::before{content:"·";color:var(--muted);font-weight:800;width:12px;text-align:center}
.ynote{
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:12px;color:var(--muted);line-height:1.55;
}

/* ---- picker DNA ---- */
.dnagrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.dnacard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.dnacard .hd{
  padding:13px 15px 11px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:9px;
}
.dnacard .hd .who{font-weight:800;font-size:15px;letter-spacing:-.01em}
.dnacard .hd .pts{font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.dnacard .bd{padding:13px 15px;display:grid;gap:11px}
.traits{display:flex;flex-wrap:wrap;gap:6px}
.trait{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;
  font-size:12px;font-weight:800;letter-spacing:-.01em;
  background:var(--accent-soft);color:var(--accent);border:1px solid #cfdffb;
}
.trait.warm{background:#fff4dc;color:var(--bb-ink);border-color:#f0dcb0}
.trait.cool{background:#f2eeff;color:var(--ou);border-color:#ded4ff}
.trait.good{background:#e8f7ef;color:#0b6b38;border-color:#bfe6d2}
.trait.bad{background:#fdecea;color:#a4231a;border-color:#f5c4bf}
.dnabars{display:grid;gap:7px}
.bar{display:grid;grid-template-columns:96px 1fr 42px;gap:8px;align-items:center;font-size:11.5px}
.bar .lab{color:var(--muted);font-weight:700;letter-spacing:.02em}
.bar .track{height:7px;border-radius:99px;background:var(--prog-bg);overflow:hidden}
.bar .fill{display:block;height:100%;border-radius:99px;background:var(--accent)}
.bar .fill.warm{background:var(--bb)}
.bar .fill.cool{background:var(--ou)}
.bar .fill.good{background:var(--good)}
.bar .val{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;font-size:12px}
.dnaline{font-size:12.5px;color:var(--muted);line-height:1.55}
.dnaline b{color:var(--ink)}

/* ---- ramble ---- */
.composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.rt-toolbar{display:flex;gap:2px;padding:7px 9px;border-bottom:1px solid var(--line-2);background:#fbfcfd;flex-wrap:wrap}
.rt-toolbar button{
  border:1px solid transparent;background:transparent;border-radius:7px;padding:5px 9px;
  font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer;min-width:30px;
}
.rt-toolbar button:hover{background:#eef2f6;color:var(--ink)}
.rt-toolbar button.on{background:var(--accent-soft);color:var(--accent);border-color:#cfdffb}
.rt-toolbar .sep{width:1px;background:var(--line);margin:3px 4px}
.rt-editor{
  min-height:110px;padding:12px 14px;font-size:14.5px;line-height:1.6;outline:none;
}
.rt-editor:focus{background:#fdfeff}
.rt-editor[data-empty="true"]::before{content:attr(data-placeholder);color:var(--muted);opacity:.7;pointer-events:none}
.rt-editor b,.rt-editor strong{font-weight:800}
.rt-editor ul,.rt-editor ol{padding-left:22px;margin:8px 0}
.rt-editor a{color:var(--accent)}
.rt-foot{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.rt-foot .hintline{font-size:12px;color:var(--muted);margin-right:auto}

.mention{
  background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:1px 5px;
  font-weight:700;white-space:nowrap;
}
.mention.me{background:var(--bb);color:#fff}

.mentionbox{
  position:absolute;z-index:60;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 14px 34px -16px rgba(16,30,50,.5);overflow:hidden;
  min-width:190px;max-height:230px;overflow-y:auto;
}
.mentionbox button{
  display:flex;width:100%;gap:8px;align-items:baseline;border:0;background:transparent;
  padding:8px 12px;text-align:left;cursor:pointer;font-size:13.5px;
}
.mentionbox button small{color:var(--muted);font-size:11.5px}
.mentionbox button:hover,.mentionbox button.sel{background:var(--accent-soft)}

.post{padding:15px 0;border-top:1px solid var(--line-2)}
.post:first-child{border-top:0;padding-top:0}
.post .ph{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.post .ph .au{font-weight:800;font-size:14px}
.post .ph .sj{font-weight:650;color:var(--ink-2,#2a3644)}
.post .ph .tm{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}
.post .pb{font-size:14px;line-height:1.62;overflow-wrap:break-word}
.post .pb p{margin:0 0 9px}
.post .pb p:last-child{margin-bottom:0}
.post .pb ul,.post .pb ol{margin:0 0 9px;padding-left:21px}
.post .pb a{color:var(--accent);word-break:break-word}
.post.mentions-me{
  background:#fffdf5;border-left:3px solid var(--bb);
  margin-left:-13px;padding-left:13px;border-radius:0 8px 8px 0;
}

/* ---- hall: board index + cross-board search ---- */
.boardindex{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.boardindex a{
  font-size:11.5px;font-weight:700;text-decoration:none;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;background:#fbfcfd;
}
.boardindex a:hover{color:var(--accent);border-color:#cfdffb;background:var(--accent-soft)}
tr.hit-row{background:#fffbe9}
tr.hit-row .who{font-weight:800}
.board{scroll-margin-top:70px}

/* ---- notification grid ---- */
.notifgrid th.ctr small{display:block;font-size:9.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
.notifgrid td.ctr input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.notifgrid tbody td{white-space:normal}
.notifgrid .who small{font-weight:500}

/* ---- admin: player facts + activity ---- */
.userfacts{
  display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:var(--muted);
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-2);
}
.userfacts b{color:var(--ink);font-weight:700;margin-right:4px}
.mono-ip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

/* ---- entry: pick history ---- */
.histrow{
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  padding:9px 0;border-top:1px solid var(--line-2);font-size:13px;
}
.histrow:first-child{border-top:0;padding-top:0}
.histrow .when{font-weight:700;font-variant-numeric:tabular-nums;min-width:150px}
.histrow .what{flex:1;min-width:180px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.histrow .dev{font-size:11.5px}

/* ---- ramble replies ---- */
.replies{margin:10px 0 0 0;border-left:2px solid var(--line);padding-left:12px}
.reply{padding:8px 0;border-top:1px solid var(--line-2)}
.reply:first-child{border-top:0}
.reply .ph{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.reply .au{font-weight:700}
.reply .tm{color:var(--muted);font-size:11px}
.reply .pb{font-size:13.5px;line-height:1.5}
.reply .pb p{margin:4px 0}
.replybox{margin-top:9px}
.replybox summary{
  cursor:pointer;font-size:12.5px;font-weight:650;color:var(--accent);
  list-style:none;display:inline-block;padding:3px 0;
}
.replybox summary::-webkit-details-marker{display:none}
.replybox textarea{
  width:100%;margin:7px 0;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 11px;font-size:14px;line-height:1.5;resize:vertical;
}