/* The Board: the project's photos, PDFs, models and links, pinned by the people on it. The words are
   centred over the app's Board room in a window of the hero's kind, and at its right edge the files
   the colleagues shared with the project stand as islands, each with who shared it. js/board.js
   sizes the window to the room the words leave, builds the room inside it at the app's own size
   and scales it as one piece, pins the cards, drifts the wall, and raises the islands. Nothing
   here paints the page's ground. */
.board { --top: clamp(40px, 7.5vh, 84px); --foot: clamp(14px, 3.4vh, 34px); }
.board-layout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--top) 0 var(--foot); }
.board-head { flex: none; text-align: center; }
.board-head .say { margin: clamp(12px, 2.2vh, 22px) auto 0; }
.board-art { flex: 1; min-height: 0; width: 100%; margin-top: clamp(22px, 4.2vh, 44px); display: flex; align-items: center; justify-content: center; }

/* The window and the column of files beside it, one group centred in the room left; the sizes are
   the script's (--ww, --wh the window, --fw the column, --gap-x the clear space between them). */
.bd-group { position: relative; flex: none; width: calc(var(--ww, 0px) + var(--gap-x, 0px) + var(--fw, 0px)); height: var(--wh, 0px); }

/* ── the window: the hero's kind, lights and rooms over the room itself ── */
/* Its measures follow its width (cqw), as the hero's window scales as one piece, so the bar, the
   lights and the room names keep the app's proportions at every size. */
.bd-window {
  position: absolute; left: 0; top: 0; width: var(--ww, 0px); height: var(--wh, 0px);
  container-type: inline-size; overflow: hidden; border-radius: var(--r, 14px);
  background: #171719;
  /* A hairline and a shadow under it, no glow: on the night ground the shadow only settles it. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 0 1px rgba(255, 255, 255, 0.05) inset, 0 50px 110px -40px rgba(0, 0, 0, 0.6);
}
.bd-bar {
  position: absolute; inset: 0 0 auto; height: var(--bar, 32px); display: flex; align-items: center;
  padding: 0 1.4cqw; background: #16171b; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bd-lights { display: flex; gap: max(5px, 0.5cqw); }
/* The window is the one in front, so its lights are lit, as the hero's are. */
.bd-lights i { width: max(8px, 0.75cqw); height: max(8px, 0.75cqw); border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.bd-lights i:nth-child(2) { background: #febc2e; }
.bd-lights i:nth-child(3) { background: #28c840; }
/* The app's four rooms, with the one this is lit, in the hero's words and grey. */
.bd-rooms { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 0.25cqw; }
.bd-rooms span { padding: 0 max(8px, 0.88cqw); height: max(18px, 1.7cqw); display: grid; place-items: center; border-radius: 99px; font: 500 max(10.5px, 0.84cqw)/1 var(--sans); color: #b6b9bd; }
.bd-rooms span.on { background: #353638; color: #eceef0; }
.bd-body { position: absolute; left: 0; right: 0; bottom: 0; top: var(--bar, 32px); overflow: hidden; }

/* ── the room, at the app's own size and scaled by the script ── */
/* Every measure from here down is the app's (src/ui/styles/board.css), and every colour is sampled
   from the real room on its night ground (img/app/board.webp): the edges a shade under the ground
   the cards are pinned to, which is dotted as the app dots it. */
.bd-room {
  --text: #eceef0; --muted: #b6b9bd; --dim: #a9adb3; --ground: #1c1e1f; --lit: #353739; --line: #363538;
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  display: grid; grid-template-columns: var(--edge) minmax(0, 1fr) var(--edge);
  background: #171719; color: var(--text); font: 400 13px/1.3 var(--sans); letter-spacing: 0;
}
.bd-edge { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 5px 12px; min-height: 0; }
.bd-rail { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--muted); }
.bd-rail.on { background: var(--lit); color: var(--text); }
.bd-rail svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-edge.is-left .bd-search { margin-top: 11px; }
/* The right edge: add, paste and share; then who pinned what, under a hairline; the count at the foot. */
.bd-edge.is-right .bd-rail.on { margin-bottom: 6px; }
.bd-edge.is-right .bd-rail:nth-child(1) svg { width: 21px; height: 21px; }
.bd-edge.is-right .bd-rail:nth-child(2) svg, .bd-edge.is-right .bd-rail:nth-child(3) svg { width: 20px; height: 20px; }
.bd-who { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 11px; padding-top: 17px; border-top: 1px solid var(--line); width: 38px; }
.bd-count { margin-top: auto; padding: 12px 5px 5px; border-top: 1px solid var(--line); width: 38px; text-align: center; font-size: 10px; color: var(--dim); }

.bd-ground {
  position: relative; overflow: hidden; border-radius: 18px 18px 0 0; background-color: var(--ground);
  background-image: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; background-position: 12px 12px;
}
.bd-wall { position: absolute; left: var(--inset); top: var(--inset); will-change: transform; }

/* ── a card: the picture owns it, the caption sits on the room's ground ── */
.bd-card { position: absolute; opacity: 0; transform: translateY(16px) scale(0.965); }
/* Pinned: each card comes to the wall as its row comes up the screen, a beat after the one before
   (--d, set by the script in reading order). */
.bd-card.in { opacity: 1; transform: none; transition: opacity 0.55s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
.bd-media { position: relative; width: 100%; overflow: hidden; border-radius: 18px; background: #2a2c2e; container-type: inline-size; }
.bd-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-media > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-media.is-dots { background: #f5f2e9 radial-gradient(#d5d1c6 0.7px, transparent 0.7px) 0 0 / 18px 18px; }
/* A note: a thought in its own words, on paper a warm step off the ground, sized to its card. */
.bd-memo { position: absolute; inset: 0; padding: 12%; display: flex; flex-direction: column; justify-content: center; background: #35342d; text-align: left; }
.bd-memo span { color: var(--dim); font-size: clamp(6px, 3.3cqw, 9px); text-transform: uppercase; letter-spacing: 0.14em; }
.bd-memo p { margin: 8px 0 0; font-size: clamp(12px, 7cqw, 25px); line-height: 1.45; letter-spacing: -0.4px; white-space: pre-wrap; color: var(--text); }
.bd-chip {
  position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; padding: 5px 7px;
  border-radius: 6px; background: #212325; color: var(--text); font-size: 10px; font-weight: 500; line-height: 1;
}
.bd-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; padding: 11px 3px 0; }
.bd-title {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-faces { display: flex; flex: none; padding-left: 5px; margin-right: 2px; }
.bd-faces .bd-face { margin-left: -5px; box-shadow: 0 0 0 2px var(--ground); }
/* Each face under a card arrives just after its card: who pinned it, or who is talking about it. */
.bd-card .bd-face { transform: scale(0.4); opacity: 0; }
.bd-card.in .bd-face { transform: none; opacity: 1; transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.3s; transition-delay: calc(var(--d, 0ms) + 320ms); }

/* A face: the photograph the app has for the person, or their initials on their colour. */
.bd-face { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--size, 20px); height: var(--size, 20px); border-radius: 50%; overflow: hidden; background: var(--tint); }
.bd-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-face i { font-style: normal; font-size: calc(var(--size, 20px) * 0.38); font-weight: 600; letter-spacing: 0.02em; color: #fff; }

/* The app's narrow room, for a phone: the tighter inset and edges, rounder-cornered smaller cards,
   and a caption with the faces under it. The app cuts that caption to one line; the page lets it
   take the second line of the room the app's own layout leaves under a narrow card (88 px), since
   on a page every title ending in an ellipsis read as broken. */
.bd-room.is-narrow .bd-edge { padding: 14px 2px 8px; }
.bd-room.is-narrow .bd-media { border-radius: 14px; }
.bd-room.is-narrow .bd-cap { flex-wrap: wrap; padding-top: 8px; gap: 5px; }
.bd-room.is-narrow .bd-title { font-size: 11px; -webkit-line-clamp: 2; width: 100%; }
.bd-room.is-narrow .bd-memo { padding: 16px; }

/* ── the files: one island each, in a column clear of the window's right edge ── */
.bd-files {
  position: absolute; left: calc(var(--ww, 0px) + var(--gap-x, 0px)); top: 50%; width: var(--fw, 0px); transform: translateY(-50%);
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gap, 12px);
}
.bd-file.island {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start;
  padding: 12px 14px 12px 12px; border-radius: 14px;
  opacity: 0; transform: translateY(26px) scale(0.97);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0ms);
}
.bd-file.in { opacity: 1; transform: none; }
.bd-file[hidden] { display: none; }
/* The tile says what the file is the way the app's file card does: its extension, upper-cased. */
.bd-tile {
  display: grid; place-items: center; width: 36px; height: 42px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--hair);
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--snow-dim);
}
/* The board is the subject and the files its company, so they are lettered a step under a card's
   caption as it reads on the screen, and the note a step dimmer again. */
.bd-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-name { font: 500 13.5px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--snow); overflow-wrap: anywhere; }
/* Balanced, so a note on two lines reads as two even lines; the script keeps a hyphened word whole. */
.bd-file .bd-note { font: 400 12.5px/1.35 var(--sans); color: var(--snow-faint); text-wrap: balance; }
/* Who shared it: their face and first name, as the app's file card sets them, and the file's size
   at the end of the line in the figure face, or on a line of its own where the island is too
   narrow for both. */
.bd-by { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; margin-top: 4px; font: 500 12px/1.2 var(--sans); color: var(--snow-dim); white-space: nowrap; }
.bd-by .fig { margin-left: auto; padding-left: 10px; font-size: 10.5px; color: var(--snow-faint); }
/* Set by the script when any island's size would drop under its sharer: then every island's does,
   on a line of its own, so the four keep one shape. */
.bd-files.stack .bd-by .fig { flex-basis: 100%; margin-left: 0; padding-left: 0; }

/* A short window keeps each file to its name and who shared it; the note is what goes. */
.bd-files.tight .bd-note { display: none; }
.bd-files.tight .bd-file.island { padding: 9px 12px 9px 10px; column-gap: 11px; align-items: center; }
.bd-files.tight .bd-tile { width: 32px; height: 36px; font-size: 9.5px; }
.bd-files.tight .bd-name { font-size: 12.5px; }
.bd-files.tight .bd-by { margin-top: 2px; font-size: 11.5px; }

/* ── a phone or an upright tablet: the words, the window at the full width, the files under it,
   read in turn (js/board.js holds the same query as `stacked`) ── */
/* The section is read as it passes rather than held, so there the stage lets go of the screen and
   the group simply flows: held to a screen's height, a window with four islands under it (about
   950 px at 390 wide) would run off the foot of a phone. From a tablet's width up the files stand
   two by two. */
@media (max-width: 900px), (max-aspect-ratio: 9/10) {
  .board.scene { height: auto; }
  .board .stage { position: relative; height: auto; overflow: visible; }
  .board-layout { position: relative; inset: auto; padding: clamp(56px, 12vw, 80px) 0 clamp(56px, 12vw, 80px); }
  .board-art { flex: none; margin-top: 28px; display: block; }
  .bd-group { width: 100%; height: auto; }
  .bd-window { position: relative; width: 100%; height: var(--wh, 0px); }
  .bd-files { position: relative; left: 0; top: 0; width: 100%; transform: none; margin-top: 14px; gap: 10px; }
}
@media (min-width: 600px) and (max-width: 900px), (min-width: 600px) and (max-aspect-ratio: 9/10) {
  .bd-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-card, .bd-card .bd-face, .bd-file.island { opacity: 1; transform: none; transition: none; }
  .bd-wall { will-change: auto; }
}