/* badges.css -- session 317: Office > Badges, the award grid (badges.js). Existing tokens only. */
.bg .head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s4); flex-wrap:wrap }
.bg-pill{ background:var(--teal-pale); color:var(--teal-deep); font-weight:600; white-space:nowrap }
.bg-legend{ font-size:13px; line-height:1.6; margin:0 0 var(--s4) }
.bg-card{ padding:0; overflow:hidden }
.bg-scroll{ overflow:auto; max-height:70vh; max-width:100% }
.bg-table{ border-collapse:separate; border-spacing:0; font-size:13px }
.bg-table th, .bg-table td{ border-bottom:1px solid var(--line-soft) }
.bg-table .nm{ position:sticky; left:0; background:var(--white); z-index:2; text-align:left; padding:8px 12px; min-width:170px;
  border-right:1px solid var(--line-soft); font-weight:600 }
.bg-table .nm a{ color:var(--teal-deep); text-decoration:none }
.bg-table thead th{ position:sticky; top:0; background:var(--line-soft); z-index:3; padding:8px 4px; font-size:11px; font-weight:600;
  color:var(--muted); vertical-align:bottom; min-width:66px; max-width:66px; line-height:1.25; text-align:center }
.bg-table thead th.nm{ z-index:4; font-size:12px; text-align:left }
.bg-table thead th.last{ min-width:120px; max-width:none }
.bg-table thead th .ic{ display:block; font-size:17px; margin-bottom:3px }
.bg-table td.cell{ text-align:center; padding:4px }
.bg-b{ width:42px; height:34px; border-radius:7px; border:1px solid var(--line); background:var(--white); color:var(--muted);
  font:inherit; font-size:13px; font-weight:700; cursor:pointer }
.bg-b:hover, .bg-b:focus-visible{ border-color:var(--teal-dark); color:var(--teal-dark) }
.bg-b.on{ background:var(--teal-pale); border-color:var(--teal-dark); color:var(--teal-deep) }
.bg-table td.meta{ padding:8px 10px; white-space:nowrap; font-size:12px; color:var(--muted) }
.bg-table tr.cold .nm{ box-shadow:inset 4px 0 0 var(--amber-text) }
.bg-h2{ font-size:15px; font-weight:600; margin:var(--s6, 28px) 0 var(--s3) }
.bg-fd{ padding:0; overflow:hidden }
.bg-fd-day{ padding:8px 14px; background:var(--line-soft); font-size:12px; font-weight:600; color:var(--muted); display:flex;
  justify-content:space-between; gap:10px; flex-wrap:wrap }
.bg-fd-i{ padding:8px 14px; border-bottom:1px solid var(--line-soft); font-size:13px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.bg-fd-i:last-child{ border-bottom:none }
.bg-fd-i b{ color:var(--teal-deep); font-weight:600 }
.bg-fd-i .who{ color:var(--text) }
.bg-fd-i .t{ margin-left:auto; color:var(--muted); font-size:12px }
.bg-ask{ margin-bottom:var(--s4); border:1.5px solid var(--teal-dark) }
.bg-ask-q{ font-size:14px; margin-bottom:var(--s3); overflow-wrap:anywhere }
.bg-note-l{ display:block; font-size:13px; font-weight:600; margin-bottom:4px }
.bg-ask input[type=text]{ width:100%; max-width:520px; box-sizing:border-box; font:inherit; font-size:14px }
.bg-ask-btns{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; margin-top:var(--s3) }
.bg-msg{ font-size:13px; color:var(--muted) }
@media (max-width: 640px){
  .bg-table .nm{ min-width:120px; max-width:140px; overflow-wrap:anywhere }
  .bg-fd-i .t{ margin-left:0 }
}
/* The Hub's table header style (capitals, letter spacing, one line) is for column titles; here a row's name is a th too. */
.bg-table th{ text-transform:none; letter-spacing:0; white-space:normal }
.bg-table th.nm{ white-space:nowrap }
.bg-table thead th{ overflow-wrap:anywhere; hyphens:auto }
.bg-table tbody th.nm{ top:auto; box-shadow:none; cursor:default; font-size:13px; color:var(--ink); z-index:1 }
.bg-table thead th{ cursor:default; box-shadow:none }
/* The Hub's tables fill the page with fixed columns; this grid keeps its own widths and scrolls inside its card instead. */
.bg-table{ width:max-content; table-layout:auto }
.bg-table thead th:not(.nm):not(.last){ width:66px }
@media (max-width: 640px){ .bg-table th.nm{ white-space:normal; min-width:120px; max-width:150px } }