/*
  Default-site "What I bring" board. Loaded only from the root index.html
  (after shared/style.css), so it affects only the homepage. It re-dresses the
  category-tabbed "What I bring" section as a live collaborative whiteboard —
  the same design as the Figma CMS page, but re-skinned to the homepage's warm
  "bold" theme with neutral chrome (no Figma branding). All the structure is
  built by board/board.js; this file styles it.

  Note colors and marker/cursor colors are set inline by board.js; this file
  handles layout, chrome, scatter, and the hand-drawn flourishes.

  It also carries the homepage's type treatment (section 0), because this is
  the only stylesheet the root page loads that nothing else does.
*/

/* ==================================================================
   0. Type treatment
   ==================================================================

   Figtree replaced Space Grotesk and Inter in the `bold` theme on
   2026-07-30, ported from the Patagonia page at Luke's request. The face
   alone was not enough: shared/style.css sets .display to weight 560 with
   an "opsz" variation setting, which is tuned for Fraunces (an optical-size
   variable serif) and leaves Figtree looking thin and undersized. These are
   the same three rules that make it read correctly on /patagonia.

   Colour, gradient and radius are deliberately NOT touched. Luke asked for
   the font and its styling, not a rebrand, so the hot pink and the 22px
   corners stay exactly as they were. */

#app .display {
  font-weight: 800;
  letter-spacing: -0.028em;
  font-variation-settings: normal;   /* "opsz" is a Fraunces axis; Figtree has none */
}

/* Secondary type sits at 500-600 and never bold, so the heavy headlines
   keep their contrast. */
#app .nav-links a,
#app .bring-tab,
#app .bring-browse-tab { font-weight: 500; }

/* ==================================================================
   The section becomes a soft whiteboard canvas: faint dot grid plus
   blurred warm-brand regions, with the framed board floating on top.
   ================================================================== */
section#fit {
  position: relative;
  background-color: #FFFDF6;
  background-image: radial-gradient(circle, rgba(60,40,10,.05) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  overflow: hidden;
  /* Full-height: at least a viewport tall, laid out as a flex column so the
     board can grow to fill it on every tab. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The framed board already closes itself out with a hard bottom border, so
     it doesn't need the full standard section gap before the next section
     starts — trim just this side to stop the whiteboard from trailing off
     into a long stretch of empty canvas before "My Work". */
  padding-bottom: 32px;
}
section#fit::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(340px 300px at 12% 16%, rgba(255,45,135,.10), transparent 70%),
    radial-gradient(320px 280px at 88% 10%, rgba(255,122,0,.10), transparent 70%),
    radial-gradient(360px 320px at 84% 90%, rgba(255,199,0,.13), transparent 70%),
    radial-gradient(300px 300px at 6% 92%, rgba(124,58,237,.08), transparent 70%);
}
section#fit > .wrap { position: relative; z-index: 1; }

/* Stretch the chain from .wrap down to the board so the board fills the
   section's full height on every tab (short tabs no longer stop partway). */
section#fit > .wrap      { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
section#fit .bring-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
section#fit .fig-board        { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
section#fit .fig-board-canvas { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

/* ── The framed board (full-bleed across the section) ───────────── */
.fig-board {
  position: relative;
  width: 100vw;
  margin: 26px calc(50% - 50vw) 20px;
  border-top: 1.5px solid #F0E2AE;
  border-bottom: 1.5px solid #F0E2AE;
  border-radius: 0;
  background-color: #FFFEFA;
  background-image: radial-gradient(circle, rgba(60,40,10,.08) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 26px 60px -40px rgba(40,20,60,.28);
}

/* On phones the 100vw + calc(50% - 50vw) full-bleed misbehaves: the board sits
   inside nested flex containers (.wrap → .bring-panel → .fig-board →
   .fig-board-canvas → .bring-grid). Those inner flex/grid items default to
   `min-width/min-height: auto`, so they refuse to shrink below the sticky
   notes' intrinsic width — the chain stays wider than the viewport, the board
   is shoved off-center, and the right edge of the card text gets clipped.
   Fix: drop the bleed AND let every link in the chain shrink to the viewport
   (min-width:0 + minmax(0,1fr) grid tracks) so the cards reflow instead of
   overflowing. */
@media (max-width: 768px) {
  /* The #fit column-flex chain (.wrap → .bring-panel → .fig-board →
     .fig-board-canvas → .bring-grid) does not stretch to the viewport on its
     cross axis, so each block sizes to its max-content — an inner nowrap
     element made .wrap 482px wide inside a 390px viewport, pushing the board
     off-center and clipping the right edge of the card text. Pin every link to
     its parent's width (plus min-width:0) so the chain tracks the viewport and
     the sticky notes reflow instead of overflowing. */
  section#fit > .wrap,
  section#fit .bring-panel,
  section#fit .fig-board,
  section#fit .fig-board-canvas,
  section#fit .bring-grid,
  section#fit .bring-card { min-width: 0; }
  section#fit > .wrap,
  section#fit .bring-panel,
  section#fit .fig-board-canvas { width: 100%; align-self: stretch; }
  .fig-board { width: 100%; align-self: stretch; margin-left: 0; margin-right: 0; }
  .fig-board .bring-grid { width: 100%; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1024px) { .fig-board .bring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fig-board .bring-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Top toolbar: filename + collaborators (no Figma/Live chrome) ── */
.fig-board-bar {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(20px, 4vw, 64px);
  background: #FFFEFA;                 /* opaque, hides the dots behind it */
  border-bottom: 1px solid #F2E8C4;
  border-radius: 0;
}
.fig-board-file { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fig-board-fileicon {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  background: var(--gradient);
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.fig-board-filename {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: #1A1033; white-space: nowrap;
}
.fig-board-collab { display: flex; align-items: center; gap: 11px; }
.fig-avatars { display: flex; }
.fig-avatar {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -8px;
  display: grid; place-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; color: #fff;
  border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.fig-avatar:first-child { margin-left: 0; }
.fig-board-editing {
  font-family: var(--font-body); font-size: 11.5px; color: #7A7280; white-space: nowrap;
}
@media (max-width: 560px) { .fig-board-editing { display: none; } }

/* Category tabs lifted onto the whiteboard bar (moved in by board.js). Centred
   like a product toolbar, with the filename on the left and collaborators on
   the right. Overrides the default handwritten .bring-tabs styling. */
.fig-board-bar .bring-tabs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; margin: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-alt); padding: 4px; gap: 4px; overflow: visible;
}
.fig-board-bar .bring-tab {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; color: var(--ink-soft); white-space: nowrap;
}
.fig-board-bar .bring-tab::after { display: none; }
.fig-board-bar .bring-tab:hover { color: var(--ink); }
.fig-board-bar .bring-tab.active {
  color: var(--ink); background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
/* Narrow screens: wrap the tabs to their own row within the bar so the centred
   pill doesn't collide with the filename/avatars. */
@media (max-width: 1024px) {
  .fig-board-bar { flex-wrap: wrap; }
  .fig-board-bar .bring-tabs {
    position: static; transform: none; order: 3; flex-basis: 100%;
    margin: 10px auto 2px; justify-content: center; max-width: 100%;
  }
}

/* ── Canvas: transparent surface holding the notes + flourishes ── */
.fig-board-canvas {
  position: relative;
  padding: 46px 0 32px;   /* deep top canvas so cursors have room; bottom trimmed to tighten the run into the next section */
}

/* Notes centered at a comfortable width, leaving open side canvas. */
.fig-board .bring-grid {
  position: relative; z-index: 2;
  max-width: 860px; margin: 0 auto; padding: 6px clamp(20px, 4vw, 40px) 0;
  display: grid; gap: 30px 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) { .fig-board .bring-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 26px; } }
@media (max-width: 560px) { .fig-board .bring-grid { grid-template-columns: 1fr; gap: 44px; } }

/* Connector arrows drawn between the notes (paths built by board.js). */
.fig-connectors {
  position: absolute; top: 0; left: 0; z-index: 1;
  pointer-events: none; overflow: visible;
}

/* ── The sticky notes ──────────────────────────────────────────── */
.fig-board .bring-grid > .bring-card {
  border: none; border-radius: 3px; overflow: visible;
  padding: 30px 22px 24px;
  color: #1A1033;
  box-shadow: 2px 6px 16px rgba(0,0,0,.14), 0 0 1px rgba(0,0,0,.06);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.fig-board .bring-grid > .bring-card::after { display: none; }
.fig-board .bring-grid > .bring-card.selected { background: inherit; border: none; }

/* Tape strip */
.fig-board .bring-grid > .bring-card::before {
  content: ''; position: absolute; top: -9px; left: 50%;
  width: 50px; height: 22px;
  background: rgba(255,255,255,.5); border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); z-index: 6; pointer-events: none;
}

/* Organic scatter (tilt) — color is set inline per tab by board.js */
.fig-board .bring-grid > .bring-card:nth-child(1) { transform: rotate(-2.2deg) translateY(3px); }
.fig-board .bring-grid > .bring-card:nth-child(1)::before { transform: translateX(-50%) rotate(2deg); }
.fig-board .bring-grid > .bring-card:nth-child(2) { transform: rotate(1.6deg) translateY(-5px); }
.fig-board .bring-grid > .bring-card:nth-child(2)::before { transform: translateX(-50%) rotate(-1.5deg); }
.fig-board .bring-grid > .bring-card:nth-child(3) { transform: rotate(-1.3deg) translateY(6px); }
.fig-board .bring-grid > .bring-card:nth-child(3)::before { transform: translateX(-50%) rotate(1.5deg); }

.fig-board .bring-grid > .bring-card:hover,
.fig-board .bring-grid > .bring-card.selected {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 4px 16px 38px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.08);
  z-index: 12;
}

/* Note text: dark and readable */
.fig-board .bring-grid > .bring-card h4 { color: #1A1033; }
.fig-board .bring-grid > .bring-card:hover h4,
.fig-board .bring-grid > .bring-card.selected h4 { color: #1A1033; }
.fig-board .bring-grid > .bring-card p { color: rgba(26,16,51,.72); }

/* Tag becomes a hand-labelled chip */
.fig-board .bring-grid > .bring-card .bring-tag {
  background: rgba(0,0,0,.09); color: rgba(0,0,0,.62);
}
.fig-board .bring-grid > .bring-card:hover .bring-tag,
.fig-board .bring-grid > .bring-card.selected .bring-tag {
  background: rgba(0,0,0,.14); color: rgba(0,0,0,.78);
}

/* ── Hand-drawn marker flourishes (added by board.js) ──────────── */

/* Squiggly underline under a note's title */
.fig-underline {
  display: block; width: 72%; height: 8px; margin: -1px 0 3px;
  overflow: visible;
}

/* Circled / starred emphasis mark on a note */
.fig-scribble {
  position: absolute; right: -15px; bottom: 16px;
  width: 58px; height: 42px; z-index: 5; pointer-events: none;
}
.fig-scribble svg { width: 100%; height: 100%; overflow: visible; }

/* Marker arrow tucked under a note (no text) */
.fig-callout {
  position: absolute; left: -8px; bottom: -46px;
  display: flex; align-items: flex-start; gap: 4px;
  z-index: 7; pointer-events: none;
}
.fig-callout-arrow { width: 44px; height: 36px; margin: -4px 0 0 -2px; overflow: visible; }
@media (max-width: 768px) { .fig-callout { display: none; } }

/* Emoji stamps pinned to note corners */
.fig-stamp {
  position: absolute; z-index: 8; pointer-events: none;
  font-size: 23px; line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.18));
}
.fig-stamp--tr { top: -14px; right: -12px; transform: rotate(-8deg); }
.fig-stamp--tl { top: -14px; left: -12px; transform: rotate(8deg); }
.fig-stamp--bl { bottom: -14px; left: -10px; transform: rotate(6deg); }
.fig-stamp--br { bottom: -14px; right: -10px; transform: rotate(-6deg); }

/* Pill comment bubbles — a collaborator avatar + a little speech bubble */
.fig-comment {
  position: absolute; z-index: 9; pointer-events: none;
  display: flex; align-items: flex-start; gap: 6px;
  transform: rotate(-2deg);
}
.fig-comment--tr { top: -30px; right: -20px; }
.fig-comment--br { bottom: -32px; right: -18px; transform: rotate(2deg); }
.fig-comment-av {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50% 50% 50% 3px;
  display: grid; place-items: center;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.fig-comment-bubble {
  background: #fff; color: #1A1033;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600; line-height: 1.2;
  padding: 6px 10px; border-radius: 11px 11px 11px 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.14); white-space: nowrap;
}

/* A hand-drawn doodle floating in the top gutter */
.fig-doodle {
  position: absolute; top: 4px; left: 54%; z-index: 6; pointer-events: none;
  width: 32px; height: 32px; opacity: .85;
}
.fig-doodle svg { width: 100%; height: 100%; overflow: visible; }

/* ── Collaborator cursors drifting through the open canvas ─────────
   z-index 0 keeps them under the connectors (1) and notes (2), so they
   glide across the board and reappear in the open side canvas. */
.fig-board-cursor {
  position: absolute; z-index: 0; pointer-events: none;
  display: flex; align-items: flex-start; will-change: transform;
  opacity: .95;
}
.fig-board-cursor svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.fig-board-cursor .fig-cursor-tag {
  margin: 17px 0 0 -5px;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: #fff; padding: 5px 10px 6px; border-radius: 9px 9px 9px 2px;
  white-space: nowrap; box-shadow: 0 2px 7px rgba(0,0,0,.16);
}
.fig-board-cursor--p { top: 40px;    left: 4%;  animation: fig-bob-p 30s ease-in-out infinite; }
.fig-board-cursor--q { bottom: 54px; left: 7%;  animation: fig-bob-q 35s ease-in-out infinite; }
.fig-board-cursor--r { top: 88px;    right: 5%; animation: fig-bob-r 32s ease-in-out infinite; }
@keyframes fig-bob-p {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(70px, 130px); }
  50%      { transform: translate(170px, 250px); }
  75%      { transform: translate(48px, 150px); }
}
@keyframes fig-bob-q {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(120px, -150px); }
  60%      { transform: translate(56px, -270px); }
  85%      { transform: translate(190px, -96px); }
}
@keyframes fig-bob-r {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(-130px, 96px); }
  68%      { transform: translate(-240px, 210px); }
  85%      { transform: translate(-84px, 70px); }
}

/* On smaller screens the extra flourishes crowd the notes — trim them */
@media (max-width: 768px) {
  .fig-board-cursor, .fig-comment, .fig-doodle, .fig-callout { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-board-cursor { animation: none !important; }
}