/* AdEQ — Create a Brief, the client's one page (web/brief.js onePage).
 *
 * WAS BRUTALIST (Franz, 2026-10-28; taken off 2026-10-29, see --bf-line below: "can you just do brutalist style … check the
 * Fishpond website … and a bit rounded"). Fishpond's public pages wear Crewd
 * UI's brutalist skin (fishpond/repo/apps/dashboard/app/public.css); this is
 * the same language in AdEQ's tokens:
 *   - a 2px ink line round every field, card, tile, and button;
 *   - hard offset shadows, no blur: ink under what you can press, the accent
 *     under the brief card and under a field being typed in;
 *   - a button lifts on hover and presses into its shadow;
 *   - a pick is filled with the accent, never just outlined;
 *   - solid paper behind everything, no tinted fills.
 * "A bit rounded": 8px corners (Fishpond's are square). No mono captions,
 * which AdEQ never uses. Every value a token; loaded after screen-portal.css,
 * whose older .bf- rules it settles.
 *
 * THE RHYTHM: label to field 8, field to field 24, section to section under a
 * 2px rule, 24 above its title and 32 below its last field. Short fields
 * share a row in .bf-grid, one per cell, so nothing overlaps at any width.
 */

.bf-one {
  /* NO BRUTALIST (Franz, 2026-10-29: "i dont like it in dark mode, for now
     we remove it"): hairlines in the rule colour, no offset shadows, no lift.
     A field in focus and a pick still show the accent. */
  --bf-line: var(--s-px) solid var(--rule);
  --bf-r: var(--r-md);
  --bf-shadow: none;
  --bf-shadow-up: none;
  --bf-shadow-ac: 0 0 0 var(--s-px) var(--accent);
}

/* ── sections: on the paper, a numbered square, and space between them, no
      rule (Franz, 2026-10-29: "i dont like the section wise gap lining") ── */
/* ONE RHYTHM (Franz, 2026-10-30: "spacing between what are we making and the
   brief aint proper"): 24px between the rows inside every section, What Are
   We Making's too, and 48px between sections, so a section ends where it
   looks like it ends. */
/* TIGHTER AND ONE RHYTHM IN BOTH MODES (Franz, 2026-10-31: "the spacing
   between these arent proper either mate in full and quick"): 16px from a
   section's title to its first row, 24px between rows in every section, The
   Goal's too (it had 32), and 40px between sections. */
.bf-one .bf-mode-body { gap: var(--s-5); }
.bf-one .bf-panel[data-key="what"] .bf-panel-body > .bf-sec { gap: var(--s-3); }
.bf-one .bf-panel, .bf-one .bf-panel.is-quiet, .bf-one.is-read .bf-panel.is-quiet {
  background: none; border: 0; border-radius: 0;
  /* a step's jump lands under the pinned head, not behind it */
  scroll-margin-top: calc(var(--header-h) + var(--s-12) * 2);
}
.bf-one .bf-panel.is-quiet .bf-panel-t { color: var(--ink); }
.bf-one .bf-panel-head { gap: var(--s-1h); padding: 0 0 var(--s-2); }
.bf-one .bf-panel-body { padding: 0; }

/* ── the head: Quick or Full, the name, and the campaign, PINNED AGAIN, done
      properly (Franz, 2026-10-30: "we need a padding in scroll of the main
      brief elements and should be sticky with the brief name and campaign").
      It stops under the header with the same 14px above its switch that it
      has at rest, keeps 16px of paper under the name and the campaign so
      nothing reads as hidden under it, and Your Brief stops on its line. ── */
.bf-one .bf-pin {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: calc(var(--s-1h) + var(--s-px) * 2) 0 var(--s-2); background: var(--paper);
}
.bf-one .bf-pin .bf-name-hint { display: none; }
/* WHAT ARE WE MAKING SITS UNDER QUICK / FULL at the head's own gap, not a
   section's (Franz, 2026-10-29: "the spacing below the quick and full is too much"). */
.bf-one .bf-pin { margin-bottom: calc(var(--gap-section) * -1); }
.bf-one .bf-panel-n {
  width: var(--h-sm); height: var(--h-sm); border-radius: var(--bf-r); border: var(--bf-line);
  background: var(--paper); color: var(--ink); font: 800 14px/1 var(--font-body);
}
.bf-one .bf-panel.is-done .bf-panel-n { background: var(--accent); color: var(--accent-ink); }
.bf-one .bf-panel-t { font: 800 22px/1.2 var(--font-body); letter-spacing: -.02em; color: var(--ink); }
.bf-one .bf-panel-tick { display: none; }
.bf-one .bf-panel-body > .bf-sec { gap: var(--s-3); }
.bf-one .bf-panel-body > .bf-sec > .bf-sec-h { display: none; }
.bf-one .bf-group { padding-top: 0; border-top: 0; }

/* ── labels, help, fields ── */
.bf-one .l-label, .bf-one .fit-k, .bf-one .bf-formats-k {
  font: 700 15px/1.3 var(--font-body); letter-spacing: -.01em; color: var(--ink); text-transform: none;
}
.bf-one .bf-opt { font-weight: 400; color: var(--mute); }
.bf-one .l-field { gap: var(--s-1); }
.bf-one .l-field + .l-field { margin-top: 0; }
.bf-one .hint { font-size: 13px; color: var(--mute); }
.bf-one :is(.input, .textarea) {
  background: var(--paper); border: var(--bf-line); border-radius: var(--bf-r); color: var(--ink); font-size: 15px;
  transition: box-shadow .12s;
}
.bf-one .input { height: var(--h-lg); padding: 0 var(--s-1h); }
.bf-one .textarea { padding: var(--s-1h); line-height: 1.5; }
.bf-one :is(.input, .textarea):focus { outline: none; border-color: var(--accent); box-shadow: var(--bf-shadow-ac); }
/* HELP IN A FIELD (Franz, 2026-10-28): one short line ending in a period,
   italic, a step smaller than what is typed, the same in every field. */
.bf-one :is(.input, .textarea)::placeholder { font-size: 13px; font-style: italic; color: var(--mute); opacity: 1; }
/* LONGER (Franz, 2026-10-29): the Description and Text for Design boxes. */
/* THE BIG BOXES SCROLL, THEY DO NOT GROW (Franz, 2026-10-30: "these should
   be scrollable and not expandable"): one fixed height, no resize corner,
   long words scroll inside. */
.bf-one .textarea.grow.bf-big { height: calc(var(--s-12) * 4); min-height: 0; max-height: none; resize: none; overflow-y: auto; }
.bf-one :is(.bf-onscreen, .bf-pair-big) .textarea.grow.bf-big { height: calc(var(--s-12) * 5); }

/* THE FIELD GRID: short fields side by side while they fit, one per cell. */
.bf-one .bf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--w-col) * .75)), 1fr));
  gap: var(--s-3); align-items: start;
}
.bf-one :is(.bf-grid, .bf-sec) > .l-field[hidden] { display: none; }
/* Quick's two big boxes, side by side once the form is wide enough. */
.bf-one .bf-pair-big { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: start; }
@container (min-width: 900px) { .bf-one .bf-pair-big { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── anything you can press: a hairline, the accent when picked ── */
.bf-one :is(.bf-kind, .bf-ftile, .bf-chips > .chip, .fit-chips > .chip) {
  border: var(--bf-line); border-radius: var(--bf-r); background: var(--paper); color: var(--ink);
  box-shadow: var(--bf-shadow); transition: background .12s, border-color .12s;
}
.bf-one :is(.bf-kind, .bf-ftile, .bf-chips > .chip, .fit-chips > .chip):hover:not(:disabled) { border-color: var(--ink-soft); }
/* A PICK IS FILLED with the accent. */
.bf-one :is(.bf-kind.is-on, .bf-ftile.is-on, .bf-chips > .chip[aria-pressed="true"], .fit-chips > .chip[aria-pressed="true"]) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
/* The picked card's words read on the accent (its small line was grey on green). */
.bf-one :is(.bf-kind.is-on, .bf-ftile.is-on) :is(b, span, span:not(.bf-art), .bf-hero, .bf-ftile-name, .bf-ftile-chip) { color: var(--accent-ink); }
.bf-one :is(.bf-kind, .bf-ftile, .chip):disabled { cursor: default; }

/* chips: 32px, wrapped with room for their shadows */
.bf-one .bf-chips, .bf-one .fit-chips { display: flex; flex-wrap: wrap; gap: var(--s-1h); }
.bf-one :is(.bf-chips, .fit-chips) > .chip { height: var(--h-md); padding: 0 var(--s-1h); font: 600 14px/1 var(--font-body); }
.bf-one .bf-other { margin-top: var(--s-1h); }

/* ── what are we making: four cards, a small picture beside the words ── */
/* Four across when the form is wide enough, else two by two: never three and one. */
.bf-one .bf-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@container (min-width: 1600px) { .bf-one .bf-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bf-one .bf-kind {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-half);
  min-height: var(--s-8); padding: var(--s-1h) var(--s-2); text-align: left;
}
.bf-one .bf-kind b { font: 700 16px/1.25 var(--font-body); }
.bf-one .bf-kind span:not(.bf-art) { max-width: 100%; font: 400 13px/1.35 var(--font-body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-one .bf-kind b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── sizes, cuts, counts: small tiles ── */
.bf-one .bf-formats { display: flex; flex-direction: column; gap: var(--s-3); }
.bf-one .bf-fgroup { display: flex; flex-direction: column; gap: var(--s-1h); }
.bf-one .bf-ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .42), 1fr)); gap: var(--s-2); }
.bf-one .bf-ftile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-half); min-width: 0; padding: var(--s-1h); text-align: left; }
.bf-one .bf-ftile .bf-art { display: none; }
.bf-one .bf-ftile.bf-tpl .bf-art { display: block; width: 100%; }
.bf-one .bf-ftile .bf-hero { font: 800 18px/1.1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.bf-one .bf-ftile .bf-ftile-name { font-size: 13px; color: var(--ink-soft); }
.bf-one .bf-ftile-sizes .bf-hero { display: flex; align-items: baseline; gap: var(--s-1); }
.bf-one .bf-hero-size {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
.bf-one .bf-hero-size:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.bf-one .bf-hero-size:focus-visible { outline: var(--s-px) solid var(--accent); outline-offset: var(--s-px); }
.bf-one .bf-hero-sep { font-weight: 400; color: var(--mute); }
/* On, the size picked is full strength and the other is quiet. */
.bf-one .bf-ftile-sizes.is-on .bf-hero-size:not(.is-lit) { opacity: .55; }
.bf-one .bf-ftile-sizes.is-on .bf-hero-sep { color: inherit; opacity: .55; }
.bf-one .bf-ftile .bf-ftile-chip { padding: 0; border: 0; font: 400 12px/1.3 var(--font-body); color: var(--mute); }
.bf-one .bf-more { align-self: flex-start; font-weight: 600; }
/* How Many, Design Concepts, File Format: squares, side by side. */
.bf-one .fit { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3) var(--s-4); }
.bf-one .fit-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1h); }
.bf-one .fit-row > .fit-chips { width: auto; }
/* ONE SIZE FOR EVERY CHOICE UNDER WHAT ARE WE MAKING (Franz, 2026-10-29: "i
   dont want to see inconsistencies … all equal sizes and uniform spacing"):
   Length, How Many, Design Concepts, Voice, and File Format were two sizes
   (Voice the small chip). Now one height, one width at least, one face, one
   gap between them, and one gap from each label to its choices. */
.bf-one :is(.bf-fit, .bf-voice, .bf-fmt) .fit-chips { gap: var(--s-1h); }
.bf-one :is(.bf-fit, .bf-voice, .bf-fmt) .fit-chips > .chip {
  height: var(--h-lg); min-width: calc(var(--h-lg) * 1.75); padding: 0 var(--s-2); justify-content: center;
  font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.bf-one .bf-panel[data-key="what"] :is(.fit-row, .bf-fmt-field, .bf-fgroup) { gap: var(--s-1h); }

/* ── the paste box and the files: dashed ink ── */
.bf-one .bf-magic-open { padding: var(--s-2); border: var(--s-px) solid var(--rule); border-radius: var(--bf-r); background: var(--paper); gap: var(--s-half) var(--s-1h); }
.bf-one .bf-magic-open:hover { border-color: var(--accent); }
.bf-one .bf-drop { padding: var(--s-3) var(--s-2); border: var(--s-px) solid var(--rule); border-radius: var(--bf-r); gap: var(--s-1h) var(--s-2); }
.bf-one .bf-drop .bf-link-in { flex: 1 1 100%; }

/* ── the top ── */
.bf-one .bf-top { gap: var(--s-3); }
.bf-one .bf-name { font: 700 18px/1.3 var(--font-body); height: var(--h-lg); padding: 0 var(--s-1h); }
/* Quick or Full is the Briefs | Work switch (.seg-group.bw-switch), one pill's
   height, nothing of its own on top (2026-10-30). */
.bf-one .bf-mode.bw-switch { height: var(--h-md); }
.bf-one .bf-mode.bw-switch .seg { min-height: var(--h-md); font-size: 12px; }
/* Its top on the bar's line: the bar's controls sit a pixel lower than the head's padding. */

/* ── the brief card beside the form: an ink line, the accent's shadow ── */
/* YOUR BRIEF WEARS THE TILES' CARD (Franz, 2026-10-29: "aint matching styles
   of newly changed cards"): All Work's and the slots' .wk-tile, its padding,
   rule, radius, and card fill, no accent ring; its title in the tiles' name type. */
/* AND NOW THE BRIEF'S OWN TILES' (Franz, 2026-11-02: "same ui/ux as the
   cards on the brief thing, same bg"): the hairline, radius, paper, and
   shadow the What Are We Making tiles wear; History and Raw Notes too. */
.bf-one :is(.bf-side-card, .bf-raw) { padding: var(--s-2); border: var(--bf-line); border-radius: var(--bf-r); background: var(--paper); box-shadow: var(--bf-shadow); }
.bf-one .bf-side-card .bf-sec-h { font: var(--t-section); letter-spacing: var(--tr-section); }


/* ── the foot ── */
.bf-one .bf-one-foot { border-top: var(--bf-line); }
.bf-one .bf-one-foot .btn {
  border: var(--bf-line); border-radius: var(--bf-r); box-shadow: var(--bf-shadow);
  font-weight: 700; transition: background .12s, border-color .12s;
}
.bf-one .bf-one-foot .btn.btn-quiet { background: var(--paper); color: var(--ink); }
.bf-one .bf-one-foot .btn:disabled { box-shadow: none; opacity: .5; }

/* ── a phone ── */
@container (max-width: 639.98px) {
  .bf-one .bf-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-one .fit { gap: var(--s-2) var(--s-3); }
  .bf-one .bf-panel-t { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-one :is(.bf-kind, .bf-ftile, .chip, .btn, .input, .textarea) { transition: none; }
}

/* ── a link: the box and its Add button on one row ── */
.bf-one .bf-link-row { display: flex; gap: var(--gap-inline); flex: 1 1 100%; }
.bf-one .bf-link-row .bf-link-in { flex: 1 1 auto; min-width: 0; }
.bf-one .bf-link-row .btn { flex: none; white-space: nowrap; }
/* DETAILS, ONE ROW OF THREE (2026-10-29): Needed By, Preferred Designer, and
   Tag Colleagues side by side, every control one input's height; they stack
   when the form is narrow. */
.bf-one .bf-details-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
@container (max-width: 760px) { .bf-one .bf-details-row { grid-template-columns: minmax(0, 1fr); } }
.bf-one .bf-details-row .bf-date { width: 100%; max-width: none; }
.bf-one .bf-prod-btn.bf-tag-btn { height: var(--h-lg); min-height: 0; padding-block: 0; align-items: center; }
.bf-one .bf-prod-btn .bf-tag-vals { padding: 0; justify-content: center; }
.bf-one .bf-tag-said { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 14px; }
.bf-one .bf-details-row .bf-none { margin: 0; }
/* Narrower than two columns, the head scrolls away: pinned, it would take a phone's screen. */
@container (max-width: 1099.98px) {
  .bf-one .bf-pin { position: static; padding-top: 0; }
}

/* ── THE GOAL'S SMALL CARDS (Franz, 2026-10-29): Line of Business, Objective,
      and Funnel Stage as smaller versions of the What Are We Making cards:
      a grid of even cards, the choice in bold and its one line under it,
      the pick filled with the accent. ── */
.bf-one .bf-chips.bf-otiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .5), 1fr));
  grid-auto-rows: 1fr; gap: var(--s-1h);
}
.bf-one .bf-otiles > .chip {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-half);
  height: auto; min-height: var(--s-8); padding: var(--s-1h) var(--s-2); border-radius: var(--bf-r); text-align: left;
  font: 700 15px/1.25 var(--font-body);
}
.bf-one .bf-otiles > .chip .bf-chip-hint { font: 400 13px/1.3 var(--font-body); color: var(--mute); }
.bf-one .bf-otiles > .chip[aria-pressed="true"] .bf-chip-hint { color: var(--accent-ink); opacity: .85; }
.bf-one .bf-panel[data-key="goal"] .bf-sec { gap: var(--s-3); }

/* ── Product or Service, a multi-select (2026-10-29): its own box (not
      .input, whose fixed height let the picks spill out), growing with them;
      each pick in full on its own line with its ×, the chevron at the right
      as on Campaign; the list ticks ── */
.bf-one .bf-prod-btn {
  display: flex; align-items: flex-start; gap: var(--s-1); width: 100%; min-height: var(--h-lg); height: auto;
  padding: var(--s-1) var(--s-1h); border: var(--bf-line); border-radius: var(--bf-r); background: var(--paper);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.bf-one .bf-prod-btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.bf-one .bf-prod-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--bf-shadow-ac); }
.bf-one .bf-prod-vals { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-half); flex: 1 1 auto; min-width: 0; padding: var(--s-half) 0; }
.bf-one .bf-prod-ph { color: var(--mute); font-size: 13px; font-style: italic; line-height: var(--s-3); }
.bf-one .bf-prod-chip {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-1);
  padding: var(--s-half) var(--s-1); border-radius: var(--r-sm); background: var(--shade);
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
}
.bf-one .bf-prod-x { display: inline-flex; flex: none; margin-top: var(--s-nudge); padding: var(--s-nudge); border-radius: var(--r-sm); color: var(--mute); cursor: pointer; }
.bf-one .bf-prod-x:hover { color: var(--ink); background: var(--rule-faint); }
.bf-one .bf-prod-chev { flex: none; display: inline-flex; align-self: center; color: var(--mute); }
.bf-prod-pop .bf-prod-list { display: flex; flex-direction: column; gap: var(--s-nudge); margin-top: var(--s-1); }
.bf-prod-pop .bf-prod-row { display: flex; align-items: flex-start; gap: var(--s-1h); padding: var(--s-1) var(--s-1h); color: var(--ink); }
.bf-prod-pop .bf-prod-row.is-on { color: var(--ink); }
.bf-prod-pop .dt-pop-row-t { white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.4; }
.bf-prod-pop .bf-tick {
  flex: none; display: inline-grid; place-items: center; width: calc(var(--h-xs) - var(--s-half)); height: calc(var(--h-xs) - var(--s-half)); margin-top: var(--s-nudge);
  border: var(--s-px) solid var(--mute); border-radius: var(--r-sm); background: var(--paper); color: var(--accent-ink);
  transition: background .12s, border-color .12s;
}
.bf-prod-pop .bf-tick.is-on { background: var(--accent); border-color: var(--accent); }

/* THE BIG BOXES' EXAMPLE (2026-10-30), drawn over the empty box in its own
   padding and the placeholder's type, the labels in a mild bold. */
.bf-one .bf-example-wrap { position: relative; }
.bf-one .bf-example {
  /* A long example (eight scenes) scrolls in the box like typed words would;
     a click on it is a click in the box (brief.js). */
  position: absolute; inset: var(--s-px); padding: var(--s-1) var(--s-1h); overflow-y: auto; cursor: text;
  border-radius: var(--r-md);
  font: italic 400 13px/1.5 var(--font-body); color: var(--mute);
}
.bf-one .bf-example b { font-weight: 600; color: var(--ink-soft); }
/* PASTE OR TYPE (2026-11-02): the example's first line, upright, then the layout. */
.bf-one .bf-example .bf-example-lead { font-style: normal; color: var(--ink-soft); }
/* THE LABELS IN BOLD, THE WORDS NOT (2026-11-02, brief.js bigArea): the
   words drawn on a layer behind the box, the box's own see-through over it.
   The labels are stroked, never a heavier font, so no letter changes width
   and the cursor stays on its letter. Both keep the scrollbar's room. */
.bf-one .bf-mirror {
  position: absolute; inset: 0; margin: 0; overflow: hidden; pointer-events: none;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: var(--ink);
  border-style: solid; border-color: transparent; box-sizing: border-box; scrollbar-gutter: stable; background: var(--paper);
}
.bf-one .bf-mirror b { font-weight: inherit; -webkit-text-stroke: .5px currentColor; }
.bf-one .textarea.has-mirror {
  position: relative; z-index: 1; background: transparent; color: transparent; -webkit-text-fill-color: transparent;
  caret-color: var(--ink); scrollbar-gutter: stable;
}
.bf-one .textarea.has-mirror::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.bf-one .bf-example-wrap > .bf-example { z-index: 2; }
/* CLEAR OF THE CURSOR (Franz, 2026-11-02): the example sits a step in from
   the box's own text, so the blinking cursor stands before its first word
   rather than on it. */
.bf-one .bf-example { padding-left: calc(var(--s-1h) + var(--s-half)); }
/* RAW NOTES (2026-11-02): a running list of what people dumped, newest
   first, each with who, when, why, and what can be done with it. */
.bf-one .bf-raw { display: flex; flex-direction: column; gap: var(--s-1h); }
.bf-one .bf-raw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.bf-one .bf-raw-title { display: flex; align-items: baseline; gap: var(--s-1); }
.bf-one .bf-raw-say { margin: 0; }
.bf-one .bf-raw-new { display: flex; flex-direction: column; gap: var(--s-1); }
.bf-one .bf-raw-why { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.bf-one .bf-raw-fill { display: flex; align-items: center; gap: var(--s-1); cursor: pointer; color: var(--ink-soft); }
.bf-one .bf-raw-why-k { font: 400 13px/1.5 var(--font-body); color: var(--mute); }
.bf-one .bf-raw-entry { display: flex; flex-direction: column; gap: var(--s-half); padding-top: var(--s-1h); border-top: var(--s-px) solid var(--rule); }
.bf-one .bf-raw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font: 400 13px/1.5 var(--font-body); color: var(--mute); }
.bf-one .bf-raw-tag { padding: 0 var(--s-1); border: var(--s-px) solid var(--rule); border-radius: var(--r-sm); color: var(--ink-soft); }
.bf-one .bf-raw-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bf-one .bf-raw-text.is-long:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bf-one .bf-raw-more { align-self: flex-start; }
.bf-one .bf-raw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.bf-one .bf-raw-ask { color: var(--ink-soft); }
/* HISTORY, under Your Brief (2026-11-02). */
.bf-one .bf-hist { margin-top: var(--s-2); }
/* Nothing yet is one quiet line, not a tall empty card. */
.bf-one .bf-hist .state { margin: 0; padding: 0; min-height: 0; text-align: left; font-size: 13px; color: var(--mute); }
/* The side is pinned, so the list is held inside what the window shows. */
.bf-one .bf-hist-list { max-height: max(calc(var(--s-12) * 2), calc(100dvh - var(--header-h) - var(--s-12) * 5)); overflow-y: auto; }
/* SMART TYPING (2026-11-02): what the line being typed is for, and where
   Enter goes; one line held open so nothing under it jumps. Then the parts
   to add for what is being made. */
.bf-one .bf-guide { min-height: 1.5em; margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--mute); }
.bf-one .bf-guide b { font-weight: 600; color: var(--ink-soft); }
.bf-one .bf-adds { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bf-one .bf-adds[hidden] { display: none; }
/* UNDER THE BIG BOXES (2026-10-30): "Write Each Static Separately" in bold,
   then its cards, then a form's Where Do the Leads Go. */
.bf-one .bf-pieces { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
.bf-one .bf-pieces:empty { display: none; }
.bf-one .bf-split { align-self: flex-start; font-weight: 700; }
/* A link's name, typed on its card (2026-10-30). */
.bf-one .bf-link-name {
  flex: 1; min-width: 0; height: var(--h-sm); padding: 0 var(--s-1); border: var(--s-px) solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); font: 500 12.5px/1 var(--font-body);
}
.bf-one .bf-link-name::placeholder { color: var(--mute); font-style: italic; font-weight: 400; }
.bf-one .bf-link-name:focus { outline: none; border-color: var(--accent); }
/* The add row: the link, its name, Use This or Inspiration, then Add Link (2026-10-30). */
.bf-one .bf-link-row { flex-wrap: wrap; align-items: center; }
.bf-one .bf-link-row .bf-link-in { flex: 2 1 240px; }
.bf-one .bf-link-row .bf-link-label { flex: 1 1 160px; min-width: 0; }
.bf-one .bf-link-row .bf-link-tag { flex: none; width: auto; height: var(--h-lg); }
.bf-one .bf-link-row .bf-link-tag .seg { flex: none; min-height: var(--h-lg); padding: 0 var(--s-1h); }

/* ASSETS FROM THEIR LIBRARY (2026-11-02): upload, pick from their files, or
   pick past work, side by side; at most three rows of what is attached. */
.bf-one .bf-pick-row, .bf-pick-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bf-amore { align-self: flex-start; margin-top: var(--s-1); }
.bf-asset.is-ref .bf-thumb-pic img { width: 100%; height: 100%; object-fit: cover; }

/* THE LIBRARY PICKER, in the sheet: a tab per kind, a search, ticks. */
.blib { display: flex; flex-direction: column; gap: var(--s-2); min-width: min(calc(var(--w-col) * 2.5), 100%); }
.blib-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1h); }
.blib-find { flex: 1 1 calc(var(--s-12) * 2); min-width: 0; }
.blib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-12) * 1.5), 1fr)); gap: var(--s-1h); max-height: min(60vh, calc(var(--s-12) * 6)); overflow-y: auto; align-content: start; }
.blib-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-half); padding: var(--s-1); text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--paper);
}
.blib-card:hover:not(:disabled) { border-color: var(--ink-soft); }
.blib-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 var(--s-px) var(--accent); }
.blib-card:disabled { opacity: .55; cursor: default; }
.blib-pic { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-sm); background: var(--shade); }
.blib-pic img { width: 100%; height: 100%; object-fit: cover; }
.blib-word { font: 600 13px/1.2 var(--font-body); color: var(--mute); }
.blib-tick { position: absolute; top: var(--s-1h); left: var(--s-1h); width: var(--s-2); height: var(--s-2); border: var(--s-px) solid var(--rule); border-radius: var(--r-sm); background: var(--paper); }
.blib-card.is-on .blib-tick { background: var(--accent); border-color: var(--accent); }
.blib-name { font: 600 13px/1.3 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blib-sub { font: 400 12px/1.3 var(--font-body); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blib-foot { display: flex; align-items: center; gap: var(--s-1); }
.blib-n { color: var(--mute); font-size: 13px; }

/* ON A BRIEF'S OWN PAGE (2026-11-03): its title row stands above the editor, so
   the editor is pulled up only 12px, not 24, and its sticky paper never cuts
   the title's descenders. */
main .client-body .tk-full .bf-one:not(.is-read) .bf-one-grid { margin-top: calc(var(--s-1h) * -1); }