/* The calm redesign (Oct 16, 2026): the Board and Add a job (board/board.js). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css. */

/* ---------- the title and the hero ---------- */
/* The big title shows; app.js puts the "?" beside it, and the header's slim title takes over as it scrolls away. */
[data-screen="board"] { display: flex; flex-direction: column; gap: 16px; }
[data-screen="board"] > .st { margin-bottom: -4px; }
[data-screen="board"] .board-main { gap: 16px; }
[data-screen="board"] .board-bar { margin-top: 2px; }

/* ---------- the list chooser, search and the "Updated" line: quiet, under the hero ---------- */
[data-screen="board"] .list-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
[data-screen="board"] .list-btn .tc { background: var(--surface-2); color: var(--text-2); }
[data-screen="board"] .board-bar .field.board-search { border: 1px solid var(--border); }
[data-screen="board"] .board-bar .fresh { color: var(--text-3); }

/* ---------- the rows ---------- */
.ib.row-date { flex: none; }
[data-screen="board"] .btn.small.row-date { background: var(--surface-2); color: var(--text); }
[data-screen="board"] .brow .row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the open job: drawings in one row, the details on a tap ---------- */
.jb-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.jb-icons .crew-line { display: contents; }
.jb-icons .btn.small.crew-btn { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: 600 .875rem/1 var(--rt-body); }
.jb-icons .btn.small.crew-btn .ic { width: 18px; height: 18px; }
.jb-icons .crew-btn .av.sm { width: 1.375rem; height: 1.375rem; font-size: .75rem; }
.jb-icons .jb-del { margin-left: auto; }
.jb-icons .btn.small.jb-sure { min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: none; color: var(--rt-bad); }
.jb-acts .ib.jb-ib { flex: none; }
.jb-more { margin: 0 -4px; }
.jb-more .kv.jb-facts { margin: 0; }
.job-panel .jb-trees, .job-sheet .jb-trees { margin: 0; font-size: .9375rem; color: var(--text); }
.jb-icons .ib.bad { border-color: transparent; }
/* A row's town, money and trees wrap rather than lose the trees (a phone, or Larger text). */
@media (max-width: 599px) { [data-screen="board"] .brow .row-sub { white-space: normal; overflow: visible; text-overflow: clip; } }
body.big-text [data-screen="board"] .brow .row-sub, body.big-text [data-screen="board"] .brow-main .row-name { white-space: normal; overflow: visible; text-overflow: clip; }
/* 811 (switched off for now): its pill is long, so on a phone it sits on a line of its own under the row. */
[data-screen="board"] .brow > .pill[data-dig] { max-width: 220px; white-space: normal; }
@media (max-width: 599px) {
  [data-screen="board"] .brow { flex-wrap: wrap; }
  [data-screen="board"] .brow > .pill[data-dig] { order: 9; flex: 1 1 100%; max-width: none; margin-left: 68px; }
}

/* ---------- the slim hero: the count and Set a date on one line, so the first phone screen is mostly rows ---------- */
[data-screen="board"] .hero.hero-slim { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; }
[data-screen="board"] .hero-slim .hero-v { font-size: 2.25rem; line-height: 1; gap: 0 8px; }
[data-screen="board"] .hero-slim .hero-u { font-size: 1.25rem; }
[data-screen="board"] .hero-slim .hero-a { margin: 0; flex: none; }
body.big-text [data-screen="board"] .hero-slim .hero-v { font-size: 2.25rem; }

/* A job with no day yet shows a calendar drawing in its square instead of the words NO DATE (its name for screen readers stays on the button). */
.dsq .dsq-ic { display: none; }
[data-screen="board"] .brow .dsq.none .dsq-t, [data-screen="board"] .brow .dsq.none .dsq-b { display: none; }
[data-screen="board"] .brow .dsq.none .dsq-ic { display: block; width: 24px; height: 24px; }