/* board.css (T-156): the Board page. The BRIDGE pages' mist and ring, cobalt for what is live, the headline face for ids
   and headings, and the quartet only as a small square per column. Phones first: one column at a time behind four tabs
   (under 761 px), two by two up to 1099 px, all four side by side from 1100 px. */
.board-page { background: var(--mist); }
.board-page .top { position: fixed; background: linear-gradient(var(--mist) 70%, rgba(237, 242, 239, 0)); padding-bottom: 14px; }
.bk-wrap { max-width: 1360px; margin: 0 auto; padding: 108px var(--gutter) 96px; }
.bk-intro { max-width: 62ch; margin-bottom: 28px; }
.bk-kicker { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--brick); }
.bk-intro h1 { margin: 0; font-size: clamp(44px, 6.4vw, 84px); line-height: 1; color: var(--ink); }
.bk-lead { margin: 16px 0 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.bk-sum { margin: 18px 0 0; font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.bk-sum:empty { display: none; }
.bk-line { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bk-who { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 15px; color: var(--ink-soft); }
.bk-who:empty { display: none; }
.bk-signed { color: var(--ink); font-weight: 500; }
.bk-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #0433ff; color: #fff; font-weight: 600; text-decoration: none; }
.bk-btn:hover { background: #0329d6; }
.bk-out { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.bk-board { min-height: 40vh; }
.bk-wait { font-size: 17px; color: var(--ink-soft); }
.bk-board h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 21px; line-height: 1.1; color: var(--ink); }
.bk-board h2 b, .bk-tabs b { flex: none; min-width: 28px; height: 26px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 6px;
  background: var(--ink); color: #fff; font-family: "BRIDGE Pixel", var(--f-text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-col h2::before, .bk-tabs button::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--q, #8a948f); box-shadow: 0 0 0 2px var(--outline); }
.bk-col h2 b { margin-left: auto; }
[data-col="open"] { --q: #b9c2bd; }
[data-col="doing"] { --q: #0433ff; }
[data-col="review"] { --q: #ffd200; }
[data-col="done"] { --q: #0ab111; }

/* phone tabs */
.bk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.bk-tabs button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px 6px 12px; border: 0; border-radius: 10px; text-align: left;
  background: rgba(255, 255, 255, .6); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(42, 37, 34, .16); font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer; }
.bk-tabs button span { flex: 1; min-width: 0; }
.bk-tabs button[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--outline); font-weight: 600; }
.bk-tabs button[aria-selected="true"] b { background: #0433ff; }

.bk-cols { display: grid; gap: 14px; }
.bk-col, .bk-side { background: var(--paper); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--outline); padding: 16px 14px 14px; min-width: 0; }
.bk-col:not(.bk-pick) { display: none; }
.bk-col h2 { display: none; }
.bk-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-card { background: #fff; border-radius: 10px; padding: 10px 12px 11px; box-shadow: inset 0 0 0 1.5px rgba(42, 37, 34, .16); min-width: 0; }
.bk-head { display: flex; align-items: center; gap: 10px; }
.bk-av { flex: none; width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1.5px var(--outline); image-rendering: auto; background: var(--mist-2); }
.bk-av-none { display: inline-block; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(42, 37, 34, .3); border: 0; }
.bk-id { font-family: "BRIDGE Pixel", var(--f-text); font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.bk-name, .bk-title { margin: 7px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.bk-title { font-weight: 600; }
.bk-more { margin-top: 6px; display: grid; gap: 4px; }
.bk-more p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.bk-more i, .bk-log small i { font-style: normal; font-weight: 600; color: var(--ink); margin-right: 4px; }
.bk-more code { font: 500 12.5px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--mist); padding: 1px 5px; border-radius: 4px; }
.bk-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bk-full .bk-clamp { display: block; -webkit-line-clamp: none; overflow: visible; }
.bk-card-omar, .bk-is-omar .bk-log li { cursor: pointer; }
.bk-empty { margin: 0; font-size: 15px; color: var(--ink-soft); }

.bk-sides { display: grid; gap: 14px; margin-top: 14px; }
.bk-side h2 .bk-av { width: 26px; height: 26px; }
.bk-side h2 b { margin-left: auto; }
.bk-fam + .bk-fam { margin-top: 14px; padding-top: 14px; border-top: 1.5px solid rgba(42, 37, 34, .12); }
.bk-famline { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.bk-queued { margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.bk-fam .bk-empty { margin-top: 6px; }
.bk-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bk-log li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.bk-log time { color: var(--ink-soft); font-size: 13.5px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.bk-log small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .bk-new { animation: bk-new 2.6s var(--ease) both; }
  @keyframes bk-new { from { background: #fff1b8; box-shadow: inset 0 0 0 2px #0ab111; } to { background: #fff; } }
}

@media (min-width: 761px) {
  .bk-wrap { padding-top: 132px; }
  .bk-tabs { display: none; }
  .bk-col, .bk-col:not(.bk-pick) { display: block; }
  .bk-col h2 { display: flex; }
  .bk-cols { grid-template-columns: 1fr 1fr; }
  .bk-sides { grid-template-columns: 1fr 1fr; }
  .bk-log { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bk-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .bk-col .bk-cards { max-height: min(70vh, 820px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; margin: -2px -4px -2px -2px; scrollbar-width: thin; }
  .bk-sides { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .bk-log { grid-column: auto; }
}
@media (max-width: 760px) {
  .board-page .top { padding-bottom: 10px; }
  .bk-wrap { padding: 84px 16px 64px; }
  .bk-intro h1 { font-size: clamp(42px, 12vw, 52px); }
  .bk-sum { font-size: 17px; }
  .bk-col { padding: 12px 10px 10px; }
}