/* Founder side: the company page (the slide-over). Loaded after dd.css and
   reuses its kit (.ddBtn, .ddCard, .ddChip, .ddTile, .ddSelect, .ddInput,
   .ddSecHd is defined here because dd.css keeps its own head markup inline).
   Only what the kit does not already carry lives here.

   The page has two faces, picked from the record by foPageState():
     .isPre  a company we have only met: four cards on a 2x2 grid + timeline
     .isDd   a company in diligence: the deal strip, then one column of cards
   Both faces are the same DOM; order and visibility do the switching, so every
   save-path id stays on the page in both. */

/* ---- kit type ----------------------------------------------------------
   The kit's tokens are declared once, on `body` in dd.css (26.0); this file
   used to carry a second copy of the whole list for the three hosts below.
   The page still sets its own base type, which is not a token. */
#slideOverPanel .foPage,
#slideOverPanel .foHead,
#slideOverPanel .foLeaveBar {
  font-size: 13px;
  color: var(--ddInk);
}

/* The page's primaries are the kit's: dd.css now paints .ddBtn.primary navy
   in light and the live teal in dark, so the copy that used to live here for
   #slideOverPanel alone is gone. */

/* ---- header strip -------------------------------------------------------- */
#slideOverPanel .foHead { align-items: center; gap: 14px; padding: 16px 24px 14px; }
#slideOverPanel .foHead .mark { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; justify-content: center; background: var(--hover, rgba(22, 40, 74, .07)); color: var(--ddInk); }
#slideOverPanel .foHeadMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#slideOverPanel .foHeadMain .titleInput { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; padding: 1px 6px; margin: 0 -6px; border: 0; border-bottom: 1px solid transparent; border-radius: 4px; background: transparent; width: 100%; }
#slideOverPanel .foHeadMain .titleInput:hover { border-bottom-color: var(--tick, var(--card-border)); }
#slideOverPanel .foHeadMain .titleInput:focus { outline: none; border-bottom-color: var(--ddLive); background: var(--hover, rgba(127, 127, 127, .06)); }
#slideOverPanel .foDescInput { font: inherit; font-size: 12.5px; color: var(--ddDim); width: 100%; padding: 2px 6px; margin: 0 -6px; border: 0; border-bottom: 1px solid transparent; border-radius: 4px; background: transparent; }
#slideOverPanel .foDescInput::placeholder { color: var(--ddFaint); }
#slideOverPanel .foDescInput:hover { border-bottom-color: var(--tick, var(--card-border)); }
#slideOverPanel .foDescInput:focus { outline: none; color: var(--ddInk); border-bottom-color: var(--ddLive); background: var(--hover, rgba(127, 127, 127, .06)); }
/* The status, in the open on every face. styles.css gives .foStageSel a
   200px minimum, which is too wide for the header, so it is overridden here. */
#slideOverPanel .foHeadStatus { display: flex; align-items: center; gap: 8px; margin: 2px 0 1px; }
#slideOverPanel .foHeadStatus > .l { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); }
#slideOverPanel .foHeadStatus .foStageSel { min-width: 0; width: 172px; font-weight: 600; }
#slideOverPanel .foHeadActs { display: flex; align-items: center; gap: 8px; flex: none; }
#slideOverPanel .foClose { font-size: 20px; line-height: 1; padding: 0 8px; }
/* Delete keeps its hold-to-confirm behaviour; it just lives in the menu now, so
   it has to sit like the menu items around it — same height, same padding —
   while keeping the destructive red .ddMenuItem's colour would take away. */
#slideOverPanel .foMenu .holdBtn { width: 100%; justify-content: flex-start; height: auto; min-width: 0; padding: 7px 10px; color: var(--ddWarn); }

/* ---- page body ----------------------------------------------------------- */
/* styles.css already carries a rule for this, so match its
   specificity (and come later) or the page keeps the old 4px top. */
#slideOverPanel .foPage { padding: 16px 24px 28px; }
#slideOverPanel .foChips { margin: 0 0 12px; }
#slideOverPanel .foDealNote { margin: 8px 0 14px; }
#slideOverPanel .foBody { display: grid; gap: 12px; align-items: start; }
#slideOverPanel .foBody.isPre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#slideOverPanel .foBody.isDd { grid-template-columns: minmax(0, 1fr); }
#slideOverPanel .foBody > section { margin: 0; min-width: 0; }
#slideOverPanel .foBody > section[hidden] { display: none; }
#slideOverPanel .foWide { grid-column: 1 / -1; }

/* Card order: the two faces read in a different order from the same DOM. */
.foBody.isPre #foSecDecision { order: 0; }
.foBody.isDd #foSecDecision { order: 0; }
.foBody.isPre #foSecFounders { order: 1; }
.foBody.isPre #foSecMet { order: 2; }
.foBody.isPre #foSecNext { order: 3; }
.foBody.isPre #foSecReads { order: 4; }
.foBody.isPre #foSecTimeline { order: 9; }
.foBody.isDd #foSecNext { order: 1; }
.foBody.isDd #foSecFounders { order: 2; }
.foBody.isDd #foSecReads { order: 3; }
.foBody.isDd #foSecDiligence { order: 4; }
.foBody.isDd #foSecLinks { order: 5; }
.foBody.isDd #foSecDD { order: 6; }
.foBody.isDd #foSecTimeline { order: 7; }

.foBody.isPre #foPreFoot { order: 10; }
.foBody.isDd #foPreFoot { display: none; }
#slideOverPanel #foPreFoot { padding-top: 2px; }

/* The Source block rides in the People card once a company is in diligence,
   so the diligence face carries one card fewer. */
#slideOverPanel #foMetHostDd:empty { display: none; }
#slideOverPanel #foMetHostDd .foKv { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--ddGrid); }
#slideOverPanel #foMetHostPre .foKv { margin-top: 0 !important; }

/* The revisit rows ride in whichever card is on screen; the empty host that is
   not holding them takes no room. */
#slideOverPanel #foRevisitHostNext:empty,
#slideOverPanel #foRevisitHostDecision:empty { display: none; }
#slideOverPanel #foRevisitBlock { margin-top: 8px; }
#slideOverPanel #foRevisitBlock[hidden] { display: none; }

/* The Decision / On hold / Investment card. */
#slideOverPanel #foPassReason { min-width: 176px; }
#slideOverPanel .foDecisionFoot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ddGrid); }

/* ---- card chrome (mirrors the .ddSecHd the DD tab writes inline) ---------- */
#slideOverPanel .ddSecHd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
#slideOverPanel .ddSecHd h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ddInk); }
#slideOverPanel .ddSecMeta { font-size: 11.5px; color: var(--ddFaint); }
#slideOverPanel .foCol { display: flex; flex-direction: column; }
#slideOverPanel .foCol .foFoot { margin-top: auto; padding-top: 12px; }
#slideOverPanel .foFaint { color: var(--ddFaint); }
#slideOverPanel .foDim { color: var(--ddDim); }
#slideOverPanel .foWarnTxt { color: var(--ddWarn); }
#slideOverPanel .foOnTxt { color: var(--ddWon); font-weight: 600; }

/* label column + value, the kv grid both faces use */
#slideOverPanel .foKv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
#slideOverPanel .foKv > .l { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); padding-top: 8px; }
#slideOverPanel .foKv > .l.tight { padding-top: 3px; }
#slideOverPanel .foKv > .v { font-size: 12.5px; line-height: 1.45; padding-top: 2px; min-width: 0; }

/* full text, never a clipped single line */
#slideOverPanel .foArea { font: inherit; font-size: 13px; line-height: 1.5; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--ddGrid); border-radius: 8px; background: var(--ddField); color: var(--ddInk); box-shadow: var(--ddShadow); resize: vertical; min-height: 58px; overflow: hidden; }
#slideOverPanel .foArea::placeholder { color: var(--ddFaint); }
#slideOverPanel .foArea:focus { outline: none; border-color: color-mix(in srgb, var(--ddAction) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddAction) 18%, transparent); }
#slideOverPanel .foCtl { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#slideOverPanel .foCtl .ddSpacer { flex: 1; }
#slideOverPanel .foCtl .ddInput { width: 150px; }
#slideOverPanel .foMetaLine { font-size: 11px; color: var(--ddDim); }
#slideOverPanel .foMetaLine.over { color: var(--ddWarn); }

/* ---- people -------------------------------------------------------------- */
#slideOverPanel .foFounders { display: flex; flex-direction: column; gap: 10px; }
#slideOverPanel .foPerson .nm { font-size: 13px; font-weight: 600; }
#slideOverPanel .foPerson .ro { font-size: 12px; color: var(--ddDim); margin-top: 1px; }
#slideOverPanel .foPerson .lk { font-size: 12px; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
#slideOverPanel .foPerson .lk a { color: var(--ddLive); text-decoration: none; }
#slideOverPanel .foPerson .lk a:hover { text-decoration: underline; }

/* ---- reads --------------------------------------------------------------- */
#slideOverPanel .foReadRow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--ddGrid); flex-wrap: wrap; }
#slideOverPanel .foReadRow:first-child { border-top: 0; padding-top: 0; }
#slideOverPanel .foReadRow .who { font-size: 12.5px; font-weight: 600; width: 52px; flex: none; }
#slideOverPanel .foReadRow .val { font-size: 12.5px; }
#slideOverPanel .foReadRow .val b { font-weight: 600; }
#slideOverPanel .foReadRow .ddSpacer { flex: 1; }
#slideOverPanel .foDecisionRow { padding-top: 10px; border-top: 1px solid var(--ddGrid); margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
/* The why, read-only, under the reads. The Decision card owns the control; this
   is a line of its own so the two never read as one sentence. */
#slideOverPanel .foDecisionWhy { padding-top: 8px; border-top: 1px solid var(--ddGrid); margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
/* What a read of 1 to 5 means, under the two read controls: quiet, but never hidden behind a hover. */
#slideOverPanel .foReadsLegend { font-size: 11.5px; color: var(--ddDim); line-height: 1.45; padding-top: 8px; border-top: 1px solid var(--ddGrid); margin-top: 4px; }

/* ---- diligence: one line, the item pane behind Details -------------------- */
#slideOverPanel .foSumLine { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; flex-wrap: wrap; }
#slideOverPanel .foSumLine .ddSpacer { flex: 1; }
#slideOverPanel .foDiligence { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ddGrid); }

/* ---- the deal strip, read-only ------------------------------------------- */
#slideOverPanel #foDealWrap .ddDeal { margin: 12px 0 0; }
#slideOverPanel .foDealNote { color: var(--ddDim); }

/* ---- the diligence pane behind Details ----------------------------------- */
#slideOverPanel .foSub { margin-top: 12px; }
#slideOverPanel .foSub:first-child { margin-top: 0; }
#slideOverPanel .foSubHd { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); margin-bottom: 6px; }
#slideOverPanel .foTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#slideOverPanel .foTable td { padding: 4px 8px 4px 0; vertical-align: middle; border-bottom: 1px solid var(--ddGrid); }
#slideOverPanel .foTable td:last-child { width: 170px; text-align: right; padding-right: 0; }
#slideOverPanel .foTable tr.foSecRow td { border-bottom: 0; padding-top: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); }
#slideOverPanel .foTable tr.foUnchecked td:first-child { color: var(--ddDim); }
#slideOverPanel .foTask, #slideOverPanel .foQ, #slideOverPanel .foMat { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--ddGrid); }
#slideOverPanel .foTask.done .foTaskTxt, #slideOverPanel .foQ.done .foTaskTxt { text-decoration: line-through; color: var(--ddDim); }
#slideOverPanel .foTaskTxt { flex: 1; line-height: 1.45; white-space: normal; overflow: visible; text-overflow: clip; }
#slideOverPanel .foTaskMeta, #slideOverPanel .foMatNote { font-size: 11.5px; color: var(--ddDim); }
#slideOverPanel .foMatNm { width: 130px; flex: none; }

/* ---- links --------------------------------------------------------------- */
#slideOverPanel .foLinkEdit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 10px 0 0; }
#slideOverPanel .foLinkEdit label { display: flex; align-items: center; gap: 8px; min-width: 0; }
#slideOverPanel .foLinkEdit label > span { flex: none; width: 92px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint); }
#slideOverPanel .foLinkEdit .ddInput { flex: 1; min-width: 0; width: auto; }

/* ---- timeline ------------------------------------------------------------ */
#slideOverPanel .foNoteBox { display: flex; gap: 10px; align-items: flex-start; }
#slideOverPanel .foNoteBox .foArea { flex: 1; }
#slideOverPanel .foNotes { margin-top: 12px; }
#slideOverPanel .foNote { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ddGrid); }
#slideOverPanel .foNote:first-child { border-top: 0; }
#slideOverPanel .foNote .ddDot { margin-top: 5px; }
/* A note both GPs wrote: half Matt's teal, half Shevy's violet. dd.css knows
   the two single colours; the joint dot is this page's. */
#slideOverPanel .foNote .ddDot.both { background: linear-gradient(90deg, var(--ddLive) 50%, var(--ddHard) 50%); }
#slideOverPanel .foNote.decision { box-shadow: inset 2px 0 0 var(--ddAction); padding-left: 10px; }
#slideOverPanel .foNoteMain { flex: 1; min-width: 0; }
#slideOverPanel .foNoteHd { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
#slideOverPanel .foNoteHd b { font-weight: 600; }
#slideOverPanel .foNoteHd .ddSpacer { flex: 1; }
#slideOverPanel .foNoteHd .dt { font-size: 11.5px; color: var(--ddFaint); }
/* Where the note came from: Wispr notes, Gemini notes, the email thread. */
#slideOverPanel .foNoteLinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; }
#slideOverPanel .foNoteLinks a { color: var(--ddLive); text-decoration: none; white-space: nowrap; }
#slideOverPanel .foNoteLinks a:hover { text-decoration: underline; }
#slideOverPanel .foNoteLinks .sep { color: var(--ddFaint); }
#slideOverPanel .foNoteBody { font-size: 12.5px; line-height: 1.5; color: var(--ddInk); margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
#slideOverPanel .foNoteBody.folded { color: var(--ddDim); }
#slideOverPanel .foNoteBody a { color: var(--ddLive); text-decoration: none; }
#slideOverPanel .foNoteBody a:hover { text-decoration: underline; }
#slideOverPanel .foMore { display: block; width: 100%; margin-top: 10px; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ddLive); cursor: pointer; }
#slideOverPanel .foMore:hover { text-decoration: underline; }
#slideOverPanel .foShow { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--ddLive); cursor: pointer; }
#slideOverPanel .foShow:hover { text-decoration: underline; }

/* ---- the unsaved-changes guard ------------------------------------------ */
/* The cue: a dot on Save and one line of words next to it, while there is
   typing on the page that has not been saved. */
#slideOverPanel .ddBtn.isDirty { border-color: var(--ddAction); box-shadow: 0 0 0 1px var(--ddAction) inset; }
#slideOverPanel .ddBtn.isDirty::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ddAction); margin-right: 6px; vertical-align: middle;
}
#slideOverPanel .foDirtyHint { font-size: 11.5px; color: var(--ddAction); white-space: nowrap; }
/* The bar itself: over the page, at the bottom, never a browser dialog. */
#slideOverPanel .foLeaveBar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--ddGrid);
  background: var(--ddSurface); box-shadow: 0 -6px 18px rgba(22, 40, 74, .10);
  font-size: 13px; color: var(--ddInk);
}
#slideOverPanel .foLeaveBar[hidden] { display: none; }
#slideOverPanel .foLeaveBar .foLeaveMsg { font-weight: 600; }
#slideOverPanel .foLeaveBar .ddSpacer { flex: 1; }

/* ---- skeletons while the record loads ------------------------------------ */
#slideOverPanel .foPage.isLoading .foBody,
#slideOverPanel .foPage.isLoading .foChips,
#slideOverPanel .foPage.isLoading #foDealWrap { display: none; }
#slideOverPanel .foSkel { display: none; }
#slideOverPanel .foPage.isLoading .foSkel { display: block; }
#slideOverPanel .foPage.loadFailed .foSkel { display: none; }
#slideOverPanel .foLoadErr { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 12.5px; color: var(--ddDim); }
#slideOverPanel .foLoadErr[hidden] { display: none; }
#slideOverPanel .foSkelDeal { display: flex; gap: 10px; margin: 10px 0 14px; }
#slideOverPanel .foSkelDeal .ddSkel { flex: 1 1 128px; height: 56px; border-radius: 10px; }
#slideOverPanel .foSkelCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#slideOverPanel .foSkelCards .ddCard { margin: 0; }

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 860px) {
  #slideOverPanel .foBody.isPre { grid-template-columns: minmax(0, 1fr); }
  #slideOverPanel .foKv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #slideOverPanel .foKv > .l { padding-top: 6px; }
  #slideOverPanel .foLinkEdit { grid-template-columns: minmax(0, 1fr); }
  #slideOverPanel .foSkelCards { grid-template-columns: minmax(0, 1fr); }
  #slideOverPanel .foHead { flex-wrap: wrap; }
  #slideOverPanel .foNoteBox { flex-direction: column; align-items: stretch; }
}

/* ===========================================================================
   public/founders.css — the founder side.

   Loaded AFTER dd.css and reusing its kit wholesale: .ddBtn, .ddChip, .ddCard,
   .ddTile / .ddDeal, .ddSegTabs, .ddSelect, .ddInput, .ddMenu, .ddCount,
   .ddDot, .ddSkel, .ddEyebrow. Only what the kit has no class for lives here.

   Everything below the board banner styles #founderBoardView and nothing else;
   its classes are prefixed .fbb*. The board's root carries class="fbV2 ddBody",
   so the --dd* tokens dd.css defines on .ddBody are in scope throughout.
   =========================================================================== */

/* ---- board ---- */

/* ── page head ──────────────────────────────────────────────────────────── */
.fbV2 .head { margin-bottom: 14px; }
.fbV2 .head .eyebrow { font-size: 10.5px; letter-spacing: .15em; }
.fbV2 .ctrls { gap: 10px; }
.fbV2 .ctrls .ddSegTabs { margin: 0; }
.fbbSearch { width: 240px; max-width: 40vw; }
.fbbSearch::placeholder { color: var(--ddFaint, #8A93A6); }
.fbbDots { padding: 0 9px; }
.fbbDots svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbV2 .ddMenuWrap { display: inline-flex; }

/* ── attention tiles ────────────────────────────────────────────────────── */
/* Each tile is also the filter it names, so it takes a button's affordances. */
.fbbTiles { margin: 0 0 16px; }
button.ddTile { display: block; width: auto; text-align: left; font: inherit; cursor: pointer; color: inherit; }
button.ddTile:hover { border-color: var(--ddDim, #516187); }
button.ddTile:focus-visible { outline: 2px solid var(--ddLive, #0E8AA0); outline-offset: 2px; }
.fbbTiles .ddTile .k, .fbbTiles .ddTile .v, .fbbTiles .ddTile .s { display: block; }
.ddTile.quiet { background: transparent; box-shadow: none; }
.ddTile.quiet .v { color: var(--ddDim, #516187); }
/* ON. A 1px ring was the old answer and it lost: Matt clicked filters off to
   find out which were on. So an on tile inverts — the ink ground carries
   surface-coloured words — takes a check before its label, and says the way
   out in the subline. Written last and with the element in the selector so it
   outranks .bad / .mid / .quiet, which colour the same properties. Both
   colours are dd tokens, so dark mode inverts with the theme and no rule
   here has to know about it. */
/* Astra 4b: a selected tile / filter chip is the one teal, not navy. */
button.ddTile.on { background: var(--teal); border-color: var(--teal); color: var(--onTeal); box-shadow: var(--ddShadow, 0 1px 2px rgba(22, 40, 74, .06)); }
button.ddTile.on:hover { border-color: var(--teal); }
button.ddTile.on .k, button.ddTile.on .v, button.ddTile.on .s { color: inherit; }
/* the check rides in the label's line box, so .k stays a plain block */
.ddTile.on .k .tick, .fbbFChip.on .l .tick { display: inline-block; vertical-align: -2px; width: 11px; height: 11px; margin-right: 4px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fbbFChip.on .l .tick { width: 12px; height: 12px; vertical-align: -1.5px; stroke-width: 2.6; }

/* ── the "Showing" line ─────────────────────────────────────────────────── */
/* Every filter that is on, in words, between the tiles and the board. Full
   width and above .fbbLayout, so it adds height and never a column: the
   table's grid is untouched, and it survives the switch to Kanban where the
   rail does not. */
.fbbShowing { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
/* an author display: rule outranks the UA sheet's [hidden] */
.fbbShowing[hidden] { display: none; }
.fbbShLab { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint, #8A93A6); margin-right: 2px; }
.fbbShChip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ddGrid, #E6DECF); background: var(--ddSurface, #FCFAF6); font: inherit; font-size: 12px; font-weight: 500; color: var(--ddInk, #16284A); cursor: pointer; }
.fbbShChip:hover { border-color: var(--ddDim, #516187); }
.fbbShChip svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; color: var(--ddFaint, #8A93A6); }
.fbbShChip:hover svg { color: var(--ddWarn, #C0392B); }
.fbbShClear { background: none; border: 0; padding: 0 4px; font: inherit; font-size: 12px; font-weight: 500; color: var(--ddLive, #0E8AA0); cursor: pointer; }
.fbbShClear:hover { color: var(--ddInk, #16284A); }
.fbbShChip:focus-visible, .fbbShClear:focus-visible { outline: 2px solid var(--ddLive, #0E8AA0); outline-offset: 2px; }

/* ── board layout: the table, then the filter rail ──────────────────────── */
.fbbLayout { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 16px; align-items: start; }
/* Kanban hides the rail and takes the whole width: boxed into the table's
   column, the last three steps sat off-screen and a card was sliced by the
   rail. */
.fbbLayout.isKanban { grid-template-columns: minmax(0, 1fr); }
.fbbMain { min-width: 0; }

/* ── the one surface card holding the grouped table ─────────────────────── */
.fbbTbl { padding: 0; overflow-x: auto; overflow-y: hidden; margin: 0; }
.fbbTr { display: grid; grid-template-columns: 190px 152px minmax(150px, 1fr) 140px 70px 92px; column-gap: 12px; padding: 8px 14px; border-top: 1px solid var(--ddGrid, #E6DECF); align-items: center; min-height: 52px; }
.fbbTr.fbbTh { border-top: 0; min-height: 40px; padding: 12px 14px 10px; align-items: end; }
.fbbTh .c { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint, #8A93A6); white-space: nowrap; background: none; border: 0; padding: 0; font-family: inherit; }
.fbbTh button.c { cursor: pointer; }
.fbbTh button.c:hover { color: var(--ddDim, #516187); }
.fbbTh .c svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.fbbTh .c.sorted { color: var(--ddDim, #516187); }
.fbbTh .c.sorted svg { opacity: 1; }
.fbbTh .c.asc svg { transform: rotate(180deg); }
.fbbRow { cursor: pointer; }
.fbbRow:hover { background: var(--hover, rgba(22, 40, 74, .03)); }
.fbbRow:focus-visible { outline: 2px solid var(--ddLive, #0E8AA0); outline-offset: -2px; }

/* group rows: one eyebrow line with a count, the closed pile with its link */
.fbbGrp { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; border-top: 1px solid var(--ddGrid, #E6DECF); background: color-mix(in srgb, var(--ddInk, #16284A) 2%, transparent); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint, #8A93A6); }
.fbbGrp.closed { padding: 10px 14px; }
.fbbGrp .sp { flex: 1; }
.fbbGrp .fbbLink { letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 500; background: none; border: 0; padding: 0; font-family: inherit; color: var(--ddLive, #0E8AA0); cursor: pointer; }
.fbbGrp .fbbLink:hover { color: var(--ddInk, #16284A); }

/* cells */
.fbbNm { font-size: 13px; font-weight: 600; line-height: 1.3; }
/* The memo marker. Sits after the phase chip in the table and after the name
   on a kanban card, so "this deal has a written memo" reads at a glance in
   both views. Deliberately quieter than .ddChip: the phase is the headline,
   this is a footnote on it. */
.fbbMemo { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 10.5px; font-weight: 500; line-height: 16px; color: var(--ddDim, #516187); white-space: nowrap; vertical-align: middle; }
.fbbMemo svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbbFd { font-size: 11.5px; color: var(--ddDim, #516187); margin-top: 1px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbbNs { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fbbSub { font-size: 11.5px; color: var(--ddDim, #516187); margin-top: 2px; line-height: 1.3; }
.fbbBk { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Reads: one cell per GP, the letter always there, the number only when that
   GP has read. A missing read is greyed, never dropped — the artboard's .rd. */
.fbbRd { font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; display: flex; gap: 8px; }
.fbbRd span { display: inline-flex; gap: 3px; }
.fbbRd span b { font-weight: 600; }
.fbbRd span.no b { color: var(--ddFaint, #8A93A6); font-weight: 500; }
.fbbLt { font-size: 12.5px; white-space: nowrap; }
.fbbFaint { color: var(--ddFaint, #8A93A6); }
.fbbWarn { color: var(--ddWarn, #C0392B); }
.fbbDim { color: var(--ddDim, #516187); }
.fbbFoot { font-size: 11.5px; color: var(--ddFaint, #8A93A6); margin-top: 8px; padding: 0 2px; }
.fbbEmpty { padding: 44px 14px; text-align: center; color: var(--ddDim, #516187); font-size: 13px; }

/* ── the filter rail ────────────────────────────────────────────────────── */
.fbbRail { display: flex; flex-direction: column; gap: 4px; }
/* an author display: rule outranks the UA sheet's [hidden], so say it again —
   kanban hides the rail */
.fbbRail[hidden] { display: none; }
.fbbRail .ddEyebrow { padding: 6px 2px 4px; }
.fbbRail .ddEyebrow:first-child { padding-top: 0; }
.fbbRail .ddSelect { width: 100%; }
.fbbFChip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ddGrid, #E6DECF); background: var(--ddSurface, #FCFAF6); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ddDim, #516187); box-shadow: var(--ddShadow, 0 1px 2px rgba(22, 40, 74, .06)); cursor: pointer; text-align: left; }
.fbbFChip:hover { color: var(--ddInk, #16284A); }
/* a block, not a flex row: the check is an inline-block riding the label's
   baseline, and vertical-align means nothing to a flex item */
.fbbFChip .l { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbbFChip .ddCount { flex: none; }
.fbbFChip.bad { color: var(--ddWarn, #C0392B); }
.fbbFChip.bad .ddCount { background: color-mix(in srgb, var(--ddWarn, #C0392B) 10%, transparent); color: var(--ddWarn, #C0392B); }
/* ON. The tile's treatment at chip scale — filled, ticked, and the count pill
   inverted so it still reads on the ink. Last in the file's chip block on
   purpose: .bad colours the same two properties at the same weight. */
.fbbFChip.on, .fbbFChip.on:hover { background: var(--teal); border-color: var(--teal); color: var(--onTeal); font-weight: 600; box-shadow: var(--ddShadow, 0 1px 2px rgba(22, 40, 74, .06)); }
.fbbFChip.on .ddCount, .fbbFChip.bad.on .ddCount { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }

/* ── kanban ─────────────────────────────────────────────────────────────── */
/* The row scrolls sideways inside its own frame; the page never does. The
   frame carries the artboard's right-edge fade, so there is always a hint
   that another column is out there. */
.fbbKwrap { position: relative; }
/* The "there is more to the right" fade, drawn only when the row really does scroll. Three phase columns usually fit, and a fade over nothing promises a column that is not there. */
.fbbKwrap.hasMore::after { content: ""; position: absolute; top: 0; right: 0; bottom: 10px; width: 56px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--ground, #F1ECE2)); }
.fbbKan { overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; }
.fbbKanRow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 12px; min-width: min-content; align-items: start; }
.fbbKcol { min-width: 196px; }
.fbbKh { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--ddGrid, #E6DECF); margin-bottom: 8px; }
.fbbKh .n { color: var(--ddFaint, #8A93A6); font-weight: 500; }
.fbbKh .sp { flex: 1; }
.fbbKbody { min-height: 190px; display: flex; flex-direction: column; gap: 8px; }
.fbbKempty { padding-top: 48px; text-align: center; font-size: 12px; color: var(--ddFaint, #8A93A6); }
.fbbKcard { padding: 10px 12px; margin: 0; cursor: pointer; }
.fbbKcard:hover { border-color: var(--ddDim, #516187); }
.fbbKcard:focus-visible { outline: 2px solid var(--ddLive, #0E8AA0); outline-offset: 2px; }
.fbbKcard .fbbNm { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbbKcard .fbbNs { font-size: 12px; }
.fbbKcard .fbbBl { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--ddWarn, #C0392B); }
.fbbKcard .fbbBl .ddDot { margin-top: 4px; background: var(--ddWarn, #C0392B); }
.fbbKcard .fbbBl div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fbbKf { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--ddDim, #516187); }
.fbbKf span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the + Company dialog ───────────────────────────────────────────────── */
/* The wrap carries ddBody too: it sits outside .fbV2, and without the --dd*
   tokens in scope the card would come out with no background at all. */
.fbbDlgWrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(28, 34, 52, .42); }
/* an author display: rule outranks the UA sheet's [hidden], so say it again */
.fbbDlgWrap[hidden] { display: none; }
.fbbDlg { width: 520px; max-width: 100%; max-height: 90vh; overflow: auto; padding: 18px 20px 16px; margin: 0; }
.fbbDlg h4 { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; }
.fbbFld { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.fbbFld > label { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ddFaint, #8A93A6); }
.fbbFld .ddInput, .fbbFld .ddSelect { width: 100%; box-sizing: border-box; }
.fbbDlgActs { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.fbbDlgMsg { flex: 1; font-size: 11.5px; color: var(--ddWarn, #C0392B); min-height: 16px; }

/* ── skeletons ──────────────────────────────────────────────────────────── */
.fbbSkelRow { pointer-events: none; }
.fbbSkelRow .ddSkel { margin: 0; }

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .fbbTr { grid-template-columns: 170px 144px minmax(140px, 1fr) 112px 96px; }
  .fbbTr .fbbColBlocker { display: none; }
}
@media (max-width: 900px) {
  .fbbLayout { grid-template-columns: minmax(0, 1fr); }
  .fbbRail { flex-flow: row wrap; gap: 6px; }
  .fbbRail .ddEyebrow { width: 100%; padding: 4px 2px 0; }
  .fbbRail .fbbFChip { width: auto; }
  .fbbRail .ddSelect { width: auto; }
  .fbbTr { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.2fr) 92px; }
  .fbbTr .fbbColBlocker, .fbbTr .fbbColReads { display: none; }
  .fbbSearch { width: 100%; }
  .fbV2 .ctrls { width: 100%; }
}