/* 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.
   T-174: every card is a button that opens the card view (a dialog: a sheet on phones, a centred panel from 761 px), and
   Board, Icebox and Archive switch above the columns.
   T-186: a card reads top to bottom: who has it (and their job) with a small area tag, the name, one sentence on what the work
   is for (two lines, then an ellipsis), and how long it has been going. Private cards fold into one dashed line. */
.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; box-shadow: inset 0 0 0 1.5px rgba(42, 37, 34, .16); min-width: 0; }
.bk-hit { display: block; width: 100%; min-height: 44px; padding: 10px 12px 11px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bk-hit:hover { background: #f6f9f7; }
.bk-hit:focus-visible { outline: 3px solid #0433ff; outline-offset: 2px; }
.bk-head { display: flex; align-items: center; gap: 10px; }
.bk-day { margin-left: auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.bk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.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; position: relative; background: transparent; box-shadow: none; border: 1.5px dashed rgba(42, 37, 34, .38); box-sizing: border-box; }
.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 { display: block; margin: 9px 0 0; font-size: 15.5px; line-height: 1.35; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-generic { color: var(--ink-soft); font-weight: 500; }
.bk-holder { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.25; font-weight: 500; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-area { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 46%; padding: 3px 7px 3px 6px; border-radius: 6px; background: var(--mist);
  box-shadow: inset 0 0 0 1px rgba(42, 37, 34, .14); font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-area::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--a, #8a948f); box-shadow: 0 0 0 1px rgba(42, 37, 34, .35); }
[data-area="town"] { --a: #0433ff; } [data-area="slack"] { --a: #8a4fbf; } [data-area="mail"] { --a: #d0682b; } [data-area="brief"] { --a: #c99400; }
[data-area="site"] { --a: #2f7d6d; } [data-area="omar"] { --a: #1a1a1a; } [data-area="films"] { --a: #e05a8a; } [data-area="art"] { --a: #f10906; }
[data-area="music"] { --a: #3466e8; } [data-area="board"] { --a: #0ab111; } [data-area="standup"] { --a: #ffd200; } [data-area="writing"] { --a: #a0522d; }
[data-area="safety"] { --a: #5b6461; } [data-area="team"] { --a: #b9c2bd; }
.bk-desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; font-size: 14px; line-height: 1.42;
  color: var(--ink-soft); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.bk-age { font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }
.bk-foot .bk-age { flex: 1; min-width: 0; }
.bk-sid { margin-left: auto; font-family: "BRIDGE Pixel", var(--f-text); font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.bk-priv { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed rgba(42, 37, 34, .3);
  font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.bk-av-lock { display: inline-block; width: 22px; height: 22px; border-radius: 6px; box-shadow: none; background: var(--mist-2)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cg fill='%232a2522'%3E%3Crect x='4' y='2' width='4' height='1'/%3E%3Crect x='3' y='3' width='1' height='2'/%3E%3Crect x='8' y='3' width='1' height='2'/%3E%3Crect x='2' y='5' width='8' height='5'/%3E%3C/g%3E%3Crect x='5' y='7' width='2' height='1' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bk-cards + .bk-priv { margin-top: 8px; }
.bk-side-lead { margin: -4px 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.bk-more { margin-top: 6px; display: grid; gap: 4px; }
.bk-more > span, .bk-more p { display: block; 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-is-omar .bk-log li { cursor: pointer; }

/* Board, Icebox, Archive */
.bk-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bk-views button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .6);
  color: var(--ink); box-shadow: inset 0 0 0 2px rgba(42, 37, 34, .16); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.bk-views button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 600; }
.bk-views b { min-width: 24px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--ink); color: #fff;
  font-family: "BRIDGE Pixel", var(--f-text); font-size: 14px; font-variant-numeric: tabular-nums; }
.bk-views button[aria-selected="true"] b { background: #fff; color: var(--ink); }
.bk-views button:focus-visible, .bk-tabs button:focus-visible { outline: 3px solid #0433ff; outline-offset: 2px; }
.bk-pane { background: var(--paper); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--outline); padding: 18px 16px 16px; max-width: 880px; }
.bk-pane h2 b { margin-left: 4px; }
.bk-pane-lead { margin: -4px 0 14px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); max-width: 60ch; }
.bk-search { display: grid; gap: 6px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.bk-search input { min-height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px rgba(42, 37, 34, .3); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; width: 100%; box-sizing: border-box; }
.bk-search input:focus { outline: 3px solid #0433ff; outline-offset: 1px; }
.bk-ice .bk-cards, .bk-arch .bk-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* the card view */
html.bk-box-on { overflow: hidden; }
.bk-box { width: min(720px, calc(100vw - 48px)); max-height: min(86vh, 900px); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 2px var(--outline), 0 24px 60px rgba(28, 45, 41, .28); overflow: hidden; display: none; }
.bk-box[open] { display: flex; flex-direction: column; }
.bk-box::backdrop { background: rgba(28, 45, 41, .45); }
.bk-box-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 18px 18px 14px; border-bottom: 1.5px solid rgba(42, 37, 34, .12); }
.bk-box-head .bk-av { width: 52px; height: 52px; border-radius: 12px; }
.bk-box-id { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.bk-box-id small { font-family: "BRIDGE Pixel", var(--f-text); font-size: 12px; font-weight: 600; color: var(--ink-soft); opacity: .8; }
.bk-box .bk-box-title { margin: 4px 0 0; font-family: var(--f-text); letter-spacing: 0; font-size: 20px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; text-wrap: pretty; }
.bk-x { width: 44px; height: 44px; margin: -6px -6px 0 0; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 400 28px/1 var(--f-text); cursor: pointer; }
.bk-x:hover { background: var(--mist-2); }
.bk-x:focus-visible, .bk-move:focus-visible, .bk-form textarea:focus-visible, .bk-form .bk-btn:focus-visible { outline: 3px solid #0433ff; outline-offset: 2px; }
.bk-box-body { padding: 14px 18px 20px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 16px; }
.bk-standing { margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 500; }
.bk-box-desc { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.bk-box-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -4px 0 0; }
.bk-box-meta .bk-area { max-width: none; }
.bk-box-meta .bk-age { font-size: 14px; }
.bk-box-wait, .bk-box-note { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.bk-fields { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: 14.5px; line-height: 1.45; }
.bk-fields dt { font-weight: 600; color: var(--ink); }
.bk-fields dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; white-space: pre-line; min-width: 0; }
.bk-mono { font: 500 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.bk-box a { color: #0433ff; text-underline-offset: 2px; }
.bk-box h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.bk-hist ol, .bk-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-hist li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.bk-hist li b { color: var(--ink); font-weight: 600; margin-right: 2px; }
.bk-hist time { font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.bk-note { background: #fff; border-radius: 10px; padding: 9px 12px; box-shadow: inset 0 0 0 1.5px rgba(42, 37, 34, .14); }
.bk-note p { margin: 0; font-size: 14.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.bk-note small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.bk-note-failed small { color: #b3261e; }
.bk-form { display: grid; gap: 8px; }
.bk-form label { font-size: 15px; font-weight: 600; }
.bk-form textarea { width: 100%; box-sizing: border-box; min-height: 104px; padding: 10px 12px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px rgba(42, 37, 34, .3);
  color: var(--ink); font: 400 16px/1.45 var(--f-text); resize: vertical; }
.bk-form-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bk-count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bk-form .bk-btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.bk-form .bk-btn:disabled { opacity: .6; cursor: wait; }
.bk-form-msg, .bk-move-msg { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.bk-form-msg:empty { display: none; }
.bk-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; border-top: 1.5px solid rgba(42, 37, 34, .12); }
.bk-move { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--outline); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.bk-move:hover { background: var(--mist-2); }
.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) {
  .bk-box { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
  .bk-box-head { padding: max(14px, env(safe-area-inset-top)) 16px 12px; gap: 12px; }
  .bk-box-head .bk-av { width: 44px; height: 44px; }
  .bk-box .bk-box-title { font-size: 18px; }
  .bk-box-body { padding: 12px 16px max(24px, env(safe-area-inset-bottom)); }
  .bk-fields { grid-template-columns: 1fr; gap: 2px; }
  .bk-fields dd { margin-bottom: 8px; }
  .bk-hist li { grid-template-columns: 1fr; gap: 0; }
  .bk-views button { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  .bk-pane { padding: 14px 12px 12px; }
  .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; }
}