/* =====================================================================
   BUILD LOG — the board.

   Built on the app's training-ledger grammar, not a forum theme:
     · the support figure sits where a set/rep number sits in the app —
       left, measurement face, tabular
     · titles carry the editorial register; everything else is mono
     · status is a margin annotation on the app's status scale, never a
       filled pill
     · rows are separated by hairlines; there are no cards
   It should feel like a feature of the product, not an embedded forum.
   ===================================================================== */

.board-head { padding: var(--s-huge) 0 var(--s-xxl); }
.board-title {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.4px;
  margin: var(--s-sm) 0 var(--s-md);
}
.board-head .lede { max-width: 56ch; }
.board-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-top: var(--s-xl); }

.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: var(--s-huge);
  align-items: start;
  padding-bottom: var(--s-huge);
}
.board-main { min-width: 0; }
.board-side { position: sticky; top: 84px; min-width: 0; }
.board-side .lrow { align-items: baseline; padding: var(--s-sm) 0; }
.board-side .lrow > .mono:first-child { width: 92px; }
.board-side .lrow p { margin: 0; font-size: 13px; line-height: 18px; color: var(--t2); }

/* --- segment control: the app's InkCell, horizontally ---------------- */
.inkrow {
  display: flex;
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.inkrow::-webkit-scrollbar { display: none; }
.inkcell {
  flex: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-md);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-sm);
  background: var(--lift);
  color: var(--t2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
}
.inkcell.on { border-color: var(--t1); color: var(--t1); }
.inkcell:hover { color: var(--t1); }

/* --- category chips: soft tint at 10%, never a solid fill ------------ */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-bottom: var(--s-lg); }
.chip {
  padding: 5px var(--s-md);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--t2);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid transparent;
}
/* Selected filter = ink, not accent. Accent is the completion colour
   and is spent on 'Shipped' alone. */
.chip.on { background: var(--lift); color: var(--t1); border-color: var(--t1); }
.chip:hover { color: var(--t1); }

/* --- a suggestion row: a ledger entry -------------------------------- */
.brow {
  display: flex;
  align-items: flex-start;
  gap: var(--s-lg);
  padding: var(--s-lg) 0;
  border-top: 1px solid var(--border-sub);
  position: relative;
}
.board-list .brow:first-child { border-top: 0; }
/* The commit edge: a row you've backed earns the same 2px ink tick the
   SetLogger draws when a set is committed. */
.brow.supported::before {
  content: '';
  position: absolute;
  left: calc(var(--s-md) * -1);
  top: var(--s-lg);
  bottom: var(--s-lg);
  width: 2px;
  background: var(--t1);
}
.brow-body { flex: 1; min-width: 0; }
.brow-title {
  display: block;
  font-family: var(--f-sys);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--t1);
  text-decoration: none;
  text-wrap: balance;
}
.brow-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.brow-meta { margin: var(--s-xs) 0 0; }

/* --- support control: the figure sits where a rep count sits --------- */
.support { margin: 0; flex: none; }
.support-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 58px;
  min-height: 56px;
  padding: var(--s-xs);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.support-btn:hover { border-color: var(--t1); color: var(--t1); }
.support-n {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--t1);
}
.support-plus { font-size: 9.5px; letter-spacing: 0.6px; color: var(--t3); }
/* Backed: ink border, not accent. Accent stays reserved for shipped —
   the app's completion colour. */
.support-btn[aria-pressed='true'] {
  border-color: var(--t1);
  background: var(--lift);
}
.support-btn[aria-pressed='true'] .support-plus { color: var(--t1); }
.support.big .support-btn { width: 74px; min-height: 74px; }
.support.big .support-n { font-size: 30px; line-height: 34px; }

/* A count that just changed ticks once — the app's one earned
   animation, nothing more. */
@keyframes tickup {
  0% { transform: translateY(3px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}
.support-n.bumped { animation: tickup 180ms ease-out; }

/* --- status: a mono margin annotation ------------------------------- */
.status {
  flex: none;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t3);
  padding-top: 3px;
  white-space: nowrap;
}
.status.tone-ok { color: var(--accent); }
.status.tone-warn { color: var(--warn); }
.status.tone-info { color: var(--info); }
.status.tone-over { color: var(--danger); }
.status.tone-none { color: var(--t3); }

/* --- detail --------------------------------------------------------- */
.detail { padding: var(--s-xxl) 0 var(--s-huge); max-width: 760px; }
.backlink { text-decoration: none; color: var(--t3); }
.backlink:hover { color: var(--t1); }
.detail-head {
  display: flex;
  gap: var(--s-xl);
  align-items: flex-start;
  margin: var(--s-lg) 0 var(--s-xl);
}
.detail-title {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.08;
  margin: 0 0 var(--s-sm);
  text-wrap: balance;
}
.detail-meta { margin: 0 0 var(--s-sm); }
.detail-body p { color: var(--t2); font-size: 15px; line-height: 24px; margin: 0 0 var(--s-md); }
.entry.staff .brow-body p { color: var(--t1); }
.staff-tag { color: var(--tip); margin: 0 0 var(--s-xxs); }

/* --- forms ---------------------------------------------------------- */
.suggest-form, .comment-form { margin-top: var(--s-xl); max-width: 640px; }
.field-group { margin-bottom: var(--s-lg); }
.field-group label { display: block; margin-bottom: var(--s-sm); color: var(--t2); }
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  flex-wrap: wrap;
  margin-top: var(--s-lg);
}
.comment-form { margin-top: var(--s-xxl); }
.similar { margin: var(--s-lg) 0 var(--s-xl); }
.similar .entry { padding: var(--s-md) 0; }
.similar-title { font-weight: 600; color: var(--t1); text-decoration: none; }
.similar-title:hover { text-decoration: underline; }

/* --- admin ---------------------------------------------------------- */
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  align-items: center;
  padding: var(--s-md);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  margin: var(--s-lg) 0;
}
.admin-bar select, .admin-bar input { min-height: 36px; font-size: 14px; padding: var(--s-xs) var(--s-sm); }

@media (max-width: 900px) {
  /* minmax(0,1fr), NOT 1fr: a grid item defaults to min-width:auto, so
     with plain 1fr the widest child (the scrolling filter row) sets the
     column width and drags the whole page past the viewport. */
  .board-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-xxl); }
  .board-side { position: static; order: 2; }
}
@media (max-width: 560px) {
  .board-head { padding-top: var(--s-xxl); }
  .brow { gap: var(--s-md); padding: var(--s-md) 0; }
  .support-btn { width: 52px; min-height: 52px; }
  .support-n { font-size: 19px; }
  /* Status drops under the title rather than squeezing the row. */
  .brow { flex-wrap: wrap; }
  .status { order: 3; width: 100%; padding-left: calc(52px + var(--s-md)); padding-top: var(--s-xs); }
  .detail-head { gap: var(--s-md); }
  .support.big .support-btn { width: 62px; min-height: 62px; }
  .support.big .support-n { font-size: 24px; }
}