/* AdEQ — ROLES: the client portal, and the marks in the team app that say
   what a client can see. SPEC-ROLES-V1. LAYOUT tokens only, no raw px. */

/* "Client Can See This" on a comment in the team's thread (§4, §5). A word as
   well as a colour: the one slip this guards against is a note meant for the
   team reaching the client, so it is said, not hinted. */
.comment-client {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--pad-chip-x);
  border: var(--s-px) solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent);
  font: var(--t-label);
  white-space: nowrap;
}

/* The Team card on a client's settings (§3.1): one row per team person. One
   grid for the whole list, so every name starts on the same line whether its
   row leads with a tick or with "Every Client" (an admin or a manager). */
.cs-team {
  display: grid;
  grid-template-columns: max-content 1fr auto;
  align-items: center;
  gap: var(--s-1) var(--gap-inline);
}
.cs-team > .hint { grid-column: 1 / -1; }
.cs-team-row { display: contents; cursor: pointer; }
.cs-team-all { color: var(--mute); font: var(--t-label); white-space: nowrap; }

/* The two threads (§5). Team first, always. The Client tab and its band say
   what they are in words; the accent is the brand's only colour, so it marks
   "the client reads this" and nothing else here. */
.th-tabs {
  display: flex;
  gap: var(--gap-inline);
  border-bottom: var(--s-px) solid var(--rule);
  margin-bottom: var(--s-1);
}
.th-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-half);
  min-height: var(--h-sm);
  padding: 0 var(--pad-chip-x);
  border: 0;
  border-bottom: var(--s-half) solid transparent;
  background: none;
  color: var(--mute);
  font: var(--t-label);
  cursor: pointer;
}
.th-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.th-count { color: var(--mute); }
.th-says { color: var(--mute); font: var(--t-label); margin: 0 0 var(--s-1); }
.th-says.is-client {
  color: var(--accent);
  padding: var(--s-half) var(--s-1);
  border: var(--s-px) solid var(--accent);
  border-radius: var(--r-sm);
}
.th-desk, .th-off {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  margin-bottom: var(--s-1);
}
.comment-desk { color: var(--mute); font: var(--t-label); }

/* Desks on the workspace page (§6). EACH DESK STACKS: its name and Remove on
   one line, what clients see under it at the card's full width, then who sits
   there. Four columns in a third of the page cut every field to a few letters
   ("Seat Someo…", "Video Di"); stacked, every row still lines up down the card. */
.dk-list { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.dk-row {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center;
  gap: var(--s-1) var(--gap-inline); padding-bottom: var(--s-2); border-bottom: var(--s-px) solid var(--rule-faint);
}
.dk-name { font: var(--t-label); color: var(--ink); }
.dk-row > .btn { grid-column: 2; grid-row: 1; }
.dk-shown-wrap, .dk-people { grid-column: 1 / -1; }
.dk-shown-wrap { display: grid; gap: var(--s-half); }
.dk-people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); }
.dk-x { border: 0; background: none; color: var(--mute); cursor: pointer; padding: 0 0 0 var(--s-half); }
.dk-pick { width: auto; min-width: 0; flex: 1 1 auto; }
.dk-add { display: flex; gap: var(--gap-inline); }
.dk-add .input { flex: 1; min-width: 0; }
.dk-add .btn { white-space: nowrap; }

/* Inside the two-thread tabs the band already says it once. */
.th .comment-client { display: none; }

/* Client People on a client's settings (§8.2). One grid, so names, emails,
   access, and the verb line up down the card. */
.cp-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content max-content;
  align-items: center;
  gap: var(--s-1) var(--gap-inline);
}
.cp-list > .hint { grid-column: 1 / -1; }
.cp-row { display: contents; }
/* A long email stops at its own cell instead of running under the next one. */
.cp-list .cs-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-form { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin-top: var(--s-2); }
.cp-form .input[type="email"] { flex: 1 1 auto; min-width: 0; }
.cp-sent { display: flex; align-items: center; gap: var(--gap-inline); flex-basis: 100%; }
@media (max-width: 639px) {
  .cp-list { grid-template-columns: 1fr; }
}
.cp-preview {
  max-width: var(--w-pop);
  padding: var(--s-1);
  border: var(--s-px) solid var(--rule);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-1);
}
.cp-preview-subject { font: var(--t-label); color: var(--ink); margin: 0 0 var(--s-half); }
.cp-preview-body { white-space: pre-line; color: var(--mute); margin: 0; }

/* ── THE CLIENT PORTAL (SPEC-ROLES §10.1, SPEC-PORTAL-V2 §6) ──────────────────
   It looks like the app because it IS the app's markup: the header is .top,
   the tabs are .tab, the pages are .l-page with an .l-head first, the cards
   are the work board's .wk-card, and the stages are .wb-stage. All of that
   comes from layout.css, app.css, and screen-work.css. What is written here
   is only what has no app equivalent, under [data-screen="portal"] so it can
   never reach a team screen. */
body.is-portal { background: var(--paper); color: var(--ink); margin: 0; }
[data-screen="portal"] .pt-viewas {
  margin: 0;
  padding: var(--s-1) var(--s-2);
  background: var(--accent);
  color: var(--accent-ink);
  font: var(--t-label);
  text-align: center;
}
/* The agency's mark, or AdEQ's, as the wordmark (§17). A link, not a button. */
[data-screen="portal"] .pt-mark { color: var(--ink); text-decoration: none; white-space: nowrap; }
[data-screen="portal"] .pt-logo { height: var(--h-sm); width: auto; max-width: calc(var(--h-md) * 4); object-fit: contain; }
[data-screen="portal"] .top .tab { display: inline-flex; align-items: center; text-decoration: none; }
/* The portal keeps the website's width (layout.css --w-site). */
[data-screen="portal"] .pt-page { max-width: var(--w-site); }
[data-screen="portal"] .pt-meta { margin: calc(var(--s-1) - var(--gap-section)) 0 0; }
@media (max-width: 1023px) {
  [data-screen="portal"] .pt-meta { margin-top: calc(var(--s-2) - var(--gap-section)); }
}
/* The app's .page-back, as a link: it sits in the gutter from 1024 up. */
[data-screen="portal"] .pt-back { display: inline-grid; place-items: center; flex: none; text-decoration: none; }
/* The back arrow shares the title's row at every width (pages start on one line). */
@media (max-width: 1023px) {
  [data-screen="portal"] .l-head > .pt-back + h1 { flex: 1 1 calc(100% - var(--h-md) - var(--s-3)); min-width: 0; overflow-wrap: anywhere; }
}
[data-screen="portal"] a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* A draft: its name, when it was saved, then Continue and Delete. On a phone
   the name takes its own line and the rest sit under it. */
[data-screen="portal"] .pt-draft { flex-wrap: wrap; padding-top: var(--s-1); padding-bottom: var(--s-1); }
[data-screen="portal"] .pt-draft .hint { margin: 0; }
[data-screen="portal"] .pt-draft > .l-group { flex-wrap: nowrap; }
@media (max-width: 639px) {
  [data-screen="portal"] .pt-draft-title { flex: 1 1 100%; }
}
/* On a phone the header is the app's two rows: the mark and the account on
   the first, the tabs on the second, scrolling inside themselves. */
@media (max-width: 1023px) {
  [data-screen="portal"] .top > .tabs {
    order: 5; flex: 1 1 100%; min-width: 0; height: calc(var(--h-lg) + var(--s-1));
    overflow-x: auto; scrollbar-width: none;
  }
  [data-screen="portal"] .top > .tabs::-webkit-scrollbar { display: none; }
  [data-screen="portal"] .top > .tabs .tab { height: calc(var(--h-lg) + var(--s-1)); flex: none; }
  [data-screen="portal"] .top-right > .daynight { margin-left: auto; }
}

/* The work board's card, as a link. The base card rule is the team's
   (screen-tasks.css, scoped to its own screens), so its four lines are here. */
[data-screen="portal"] .wk-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  background: var(--card); border: var(--s-px) solid var(--rule); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none;
}
[data-screen="portal"] .wk-card:hover { border-color: var(--ink-soft); }
[data-screen="portal"] .wk-card .wk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-screen="portal"] .wk-foot { margin-top: auto; }
[data-screen="portal"] .wb-stage.is-read {
  display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 var(--s-1);
  font: 600 12px/1 var(--font-body); white-space: nowrap;
}

.pt-h2 { font: var(--t-section); margin: 0 0 var(--s-1); }
.pt-h3 { font: var(--t-label); margin: var(--s-2) 0 var(--s-half); }
[data-screen="portal"] .pt-sec > .l-head { margin-bottom: var(--s-1h); }
[data-screen="portal"] .pt-cards { --card-min: var(--w-col); }
[data-screen="portal"] .pt-draft-title { color: var(--ink); font-weight: 600; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-screen="portal"] .pt-draft-title:hover { color: var(--accent); }
[data-screen="portal"] .pt-row-pic { width: var(--h-md); height: var(--h-md); object-fit: cover; border-radius: var(--r-sm); flex: none; }
.pt-review {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gap-section);
}
.pt-review-main { display: grid; gap: var(--s-3); align-content: start; }
.pt-scene { padding: var(--pad-card); background: var(--card); border: var(--s-px) solid var(--rule); border-radius: var(--r-md); }
.pt-scene p { margin: var(--s-half) 0; }
.pt-scene-n { font: var(--t-label); color: var(--mute); }
.pt-vo { font: var(--t-section); }
.pt-lines { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-2); margin: 0; }
.pt-lines dd { margin: 0; }
.pt-q { margin: var(--s-2) 0; }
.pt-q-label { font: var(--t-label); margin: 0 0 var(--s-half); }
.pt-file { margin: 0; display: grid; gap: var(--s-1); }
.pt-media { max-width: 100%; border-radius: var(--r-md); border: var(--s-px) solid var(--rule); }
.pt-file-cap { display: flex; justify-content: space-between; align-items: center; }
.pt-thread { display: grid; gap: var(--s-2); }
.pt-note { padding: var(--s-1) var(--s-2); border-left: var(--s-half) solid var(--rule); }
.pt-note.is-agency { border-left-color: var(--accent); }
.pt-note p { margin: 0; }
.pt-note-by { font: var(--t-label); }
.pt-reply { margin: var(--s-1) 0 0 var(--s-2); }
.pt-compose { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.pt-compose-go { display: flex; justify-content: flex-end; gap: var(--gap-inline); }
.pt-decide {
  display: grid;
  gap: var(--s-1);
  padding: var(--pad-card);
  background: var(--card);
  border: var(--s-px) solid var(--rule);
  border-radius: var(--r-md);
}
.pt-decide-go { display: flex; flex-wrap: wrap; gap: var(--gap-inline); }
.pt-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.pt-upload .hint { margin: 0; }
.pt-file-input { display: none; }
@media (max-width: 1023px) {
  .pt-review { grid-template-columns: 1fr; }
}
.pt-review-left { display: grid; gap: var(--s-3); align-content: start; }
.cp-viewas { flex-basis: 100%; justify-self: start; width: max-content; }

/* ── THE BRIEF BUILDER (SPEC-PORTAL-V2 §5, web/brief.js) ─────────────────────
   Used on the portal's Create and on the team's full task page, so these are
   not walled to one screen. The tabs are the app's .subtabs. */
.bf { display: flex; flex-direction: column; gap: var(--s-3); max-width: calc(var(--w-read) + var(--s-12)); }
.bf-head { display: flex; align-items: flex-end; gap: var(--s-2); border-bottom: var(--s-px) solid var(--rule); }
.bf-head .subtabs { border-bottom: 0; margin: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bf-head .subtabs::-webkit-scrollbar { display: none; }
.bf-head .subtab { flex: none; white-space: nowrap; }
.bf-saved { flex: none; padding-bottom: var(--s-1h); color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.bf-saved.is-bad { color: var(--alarm); }
.bf-pane { display: flex; flex-direction: column; gap: var(--gap-field); }
.bf-pane > .l-field + .l-field { margin-top: 0; }
.bf-pane .sec { margin: 0; }
.bf-more .sec-body { display: flex; flex-direction: column; gap: var(--gap-field); }
.bf-grow { width: 100%; }
.bf-date { width: auto; max-width: calc(var(--w-col) * .75); }
.bf-foot { display: flex; gap: var(--gap-inline); padding-top: var(--s-2); border-top: var(--s-px) solid var(--rule-faint); }
.bf-foot > .btn:last-child { margin-left: auto; }
.fit.is-read { pointer-events: none; }

/* The paste box: a quiet dashed field, the accent while a file is over it. */
.bf-paste { width: 100%; min-height: var(--s-8); border-style: solid; resize: vertical; }
.bf-paste.is-over, .bf-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.bf-drop {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  padding: var(--s-3) var(--s-2); border: var(--s-px) solid var(--rule); border-radius: var(--r-md);
}
.bf-drop .hint { margin: 0; }
.bf-drop-say { margin: 0; flex-basis: 100%; color: var(--ink-soft); }
.bf-drop:focus-visible { outline: none; border-color: var(--ink-soft); }
.bf-file-input { display: none; }
.bf-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-12) + var(--s-4)), 1fr)); gap: var(--s-1h); }
.bf-thumb { margin: 0; display: grid; gap: var(--s-half); min-width: 0; }
.bf-thumb-pic { display: block; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--shade); overflow: hidden; border: var(--s-px) solid var(--rule-faint); }
.bf-thumb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-thumb-cap { display: flex; align-items: center; gap: var(--s-half); min-width: 0; font-size: 12.5px; color: var(--ink-soft); }
.bf-thumb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-x { flex: none; width: var(--h-xs); height: var(--h-xs); border: 0; border-radius: var(--r-sm); background: none; color: var(--mute); cursor: pointer; font-size: 16px; line-height: 1; }
.bf-x:hover { color: var(--ink); background: var(--shade); }
.bf-kind { flex: none; min-width: var(--s-5); color: var(--mute); font-size: 12.5px; font-weight: 600; }
.bf-row-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
a.bf-row-text { color: var(--accent); text-decoration: none; }
a.bf-row-text:hover { text-decoration: underline; }
.bf-rows .btn.is-end { margin-left: auto; }
.bf-tag { cursor: pointer; }

/* Preferred designer: cards with a face, a name, and a role. */
.bf-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .7), 1fr)); gap: var(--s-1); }
.bf-person {
  display: flex; align-items: center; gap: var(--s-1h); padding: var(--s-1h); text-align: left; cursor: pointer;
  border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); color: var(--ink);
}
.bf-person:hover:not(:disabled) { border-color: var(--ink-soft); }
.bf-person.is-on { border-color: var(--accent); box-shadow: 0 0 0 var(--s-px) var(--accent); }
.bf-person:disabled { cursor: default; }
.bf-face {
  flex: none; width: var(--h-lg); height: var(--h-lg); border-radius: var(--r-pill); object-fit: cover;
  display: grid; place-items: center; background: var(--shade); color: var(--ink-soft); font: 700 13px/1 var(--font-display);
}
.bf-person.is-on .bf-face:not(img) { background: var(--accent); color: var(--accent-ink); }
.bf-person-words { display: grid; gap: var(--s-nudge); min-width: 0; }
.bf-person-words b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-person-words span { color: var(--mute); font-size: 12.5px; }

/* Review & Send: the request read back as rows. */
.bf-read-row { align-items: flex-start; padding-top: var(--s-1h); padding-bottom: var(--s-1h); }
.bf-read-k { flex: none; width: calc(var(--w-col) * .5); color: var(--mute); font-size: 13px; }
.bf-read-v { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.bf-read-v.is-empty { color: var(--mute); }
.bf-read-row .linkbtn { flex: none; }
.bf-missing { padding: var(--s-1h) var(--s-2); border: var(--s-px) solid var(--alarm); border-radius: var(--r-md); }
.bf-missing p { margin: 0; }
.bf-missing p + p { margin-top: var(--s-half); }
.bf-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.bf-send .hint { margin: 0; }
@media (max-width: 639px) {
  .bf-read-row { flex-wrap: wrap; }
  .bf-read-k { width: 100%; }
}

/* The slots meter (§16). */
.pt-meter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin: 0 0 var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: var(--s-px) solid var(--rule);
  border-radius: var(--r-md);
  font: var(--t-label);
  width: max-content;
  max-width: 100%;
}

/* The slots meter on the client page and the Tasks board (§16). */
.sl-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--h-sm);
  padding: 0 var(--pad-chip-x);
  border: var(--s-px) solid var(--rule);
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font: var(--t-label);
  cursor: pointer;
  white-space: nowrap;
}
.sl-meter.is-full { border-color: var(--accent); }
.sl-plan { color: var(--mute); }
.sl-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: var(--gap-inline); min-height: var(--h-sm); }
.sl-lead { color: var(--mute); font: var(--t-label); }
.sl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-move { display: inline-flex; gap: var(--s-half); }
.sl-arrow { min-width: var(--h-sm); min-height: var(--h-sm); border: var(--s-px) solid var(--rule); border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; }
.sl-arrow:disabled { opacity: 0.4; cursor: default; }
.sl-plan-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); }
.sl-seg { display: flex; flex-wrap: wrap; gap: var(--gap-inline); }
.sl-custom { width: calc(var(--h-sm) * 3); }

/* The slot strip: the client's Tasks tab and the portal's Home (Franz,
   2026-10-20: "we will only work in slots"). One card per slot. */
.sl-strip { display: grid; gap: var(--s-1); margin: 0 0 var(--s-2); }
.sl-strip-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-inline) var(--s-2); }
.sl-h { margin: 0; font: var(--t-label); color: var(--ink); }
.sl-h3 { margin: 0 0 var(--s-half); font: var(--t-label); color: var(--mute); }
.sl-strip .pt-h2 { margin: 0; }
.sl-sum { font: var(--t-label); color: var(--mute); }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--w-col)), 1fr)); gap: var(--s-1); }
.sl-slot {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--s-1h);
  min-height: var(--h-lg);
  padding: var(--s-1) var(--s-1h);
  border: var(--s-px) solid var(--rule);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.sl-slot { cursor: pointer; }
button.sl-slot:hover { background: var(--shade); }
.sl-slot.is-busy { border-color: var(--accent); }
.sl-slot.is-mine { background: var(--accent-soft); }
.sl-slot.is-over { border-style: solid; }
.sl-slot.is-free { border-style: solid; background: none; }
.sl-slot.is-free .sl-title { color: var(--mute); }
.sl-num {
  display: inline-grid;
  place-items: center;
  width: var(--h-xs);
  height: var(--h-xs);
  border-radius: var(--r-pill);
  border: var(--s-px) solid var(--rule);
  font: var(--t-label);
  color: var(--mute);
}
.sl-slot.is-busy .sl-num { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sl-body { display: grid; min-width: 0; }
button.sl-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.sl-open:hover .sl-title { text-decoration: underline; }
.sl-body .sl-title { font-weight: 500; }
.sl-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-label); color: var(--mute); }
.sl-queue { display: grid; max-width: var(--w-drawer); }
.sl-say:empty { display: none; }

/* A client's slots as pips. */
.sl-pips { display: inline-flex; flex: none; gap: var(--s-half); }
.sl-pip { width: var(--s-1); height: var(--s-1); border-radius: var(--r-pill); border: var(--s-px) solid var(--accent); }
.sl-pip.is-on { background: var(--accent); }
.sl-pip.is-over { border-style: solid; }

/* The portal's look, on the workspace page (§17). */
.br-form { display: grid; gap: var(--s-1h); }
.br-row { display: grid; grid-template-columns: calc(var(--h-sm) * 3) minmax(0, 1fr); align-items: center; gap: var(--gap-inline); }
.br-colour { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); }
.br-swatch { width: var(--h-md); height: var(--h-md); padding: 0; border: var(--s-px) solid var(--rule); border-radius: var(--r-sm); background: none; }
.br-hex { width: calc(var(--h-sm) * 4); }
.br-file { display: none; }
/* In the Tasks toolbar the meter is a toolbar control: --h-md, like its neighbours
   (stretching made it 34 when the row grew). */
.tk-toolbar .sl-meter { align-self: center; min-height: var(--h-md); }

/* A video in the portal (D8), and a note's moment. */
.pt-video { width: 100%; background: var(--card); }
.pt-at {
  margin-left: var(--s-1);
  padding: 0 var(--s-1);
  border: var(--s-px) solid var(--rule);
  border-radius: var(--r-pill);
  background: none;
  color: var(--accent);
  font: var(--t-label);
  cursor: pointer;
}
.pt-pin { display: inline-flex; align-items: center; gap: var(--s-half); margin-right: auto; }

/* The task panel's From the Client files (§19.3). */
.tk-file { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: var(--gap-inline); min-height: var(--h-sm); }
.tk-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Our Details (§19): sentence lists as rows, Enter to add. */
.pt-rows { display: grid; gap: var(--s-1); margin: var(--s-1) 0; }
.pt-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; align-items: center; gap: var(--gap-inline); min-height: var(--h-md); }
.pt-row.is-pair { grid-template-columns: calc(var(--h-md) * 5) minmax(0, 1fr) max-content; }
.pt-row > span:first-child { overflow-wrap: anywhere; }
.pt-add { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: var(--gap-inline); }
.pt-add.is-pair { grid-template-columns: calc(var(--h-md) * 5) minmax(0, 1fr) max-content; }
.pt-line { width: auto; }
.pt-saved { min-height: var(--h-sm); }
.pt-form-rows { display: grid; gap: var(--gap-field); max-width: var(--w-read); }
.pt-field { display: grid; gap: var(--s-1); font: var(--t-label); }
.pt-date { width: max-content; }
@media (max-width: 639px) {
  /* Remove stays beside the words; a line picker drops under them, and a
     pair's label takes its own line above the value. */
  .pt-row, .pt-row.is-pair { grid-template-columns: minmax(0, 1fr) max-content; }
  .pt-row > .pt-line { grid-column: 1 / -1; order: 3; }
  .pt-row.is-pair > .pt-label-in { grid-column: 1 / -1; }
  .pt-add, .pt-add.is-pair { grid-template-columns: 1fr; }
}

/* Client Edited (§19.2): quiet, readable, never behind a hover. */
.ce-chip {
  margin-left: var(--s-1);
  padding: 0 var(--s-1);
  border: var(--s-px) solid var(--rule);
  border-radius: var(--r-pill);
  background: none;
  color: var(--mute);
  font: var(--t-label);
  cursor: pointer;
  white-space: nowrap;
}
.ce-cell { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.ce-row { color: var(--mute); font: var(--t-label); white-space: nowrap; }
.ce-change { display: grid; gap: var(--s-half); padding: var(--s-1) 0; border-top: var(--s-px) solid var(--rule); }
.ce-change p { margin: 0; }
.ce-when { font: var(--t-label); color: var(--ink); }
.ce-gone { color: var(--mute); }

/* ── THE ONE-PAGE BRIEF (web/brief.js onePage, Franz 2026-10-26) ─────────────
   A client's Create a Brief, top to bottom on one page: Paste Anything, Use
   Again, what it is, where it runs, what they want, files and inspiration,
   then the details folded, over a foot pinned to the bottom with Send. */
/* FULL WIDTH (2026-10-26): the form, and Your Brief beside it once the page
   is wide enough to hold both; under it before that. A container query, so
   the brief's own page (beside its conversation) follows its own width. */
.bf-one { max-width: none; gap: 0; container-type: inline-size; }
.bf-one-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-section); align-items: start; }
@container (min-width: 1100px) {
  .bf-one-grid { grid-template-columns: minmax(0, 1fr) minmax(calc(var(--w-col) + var(--s-2) + (var(--gap-section) - var(--gap-rail)) / 2), calc(var(--w-col) + var(--s-12) + (var(--gap-section) - var(--gap-rail)) / 2)); column-gap: var(--gap-rail); }
  .bf-side { position: sticky; top: calc(var(--header-h) + var(--s-2)); }
}
.bf-one-form { display: flex; flex-direction: column; gap: var(--gap-section); padding-bottom: var(--s-3); min-width: 0; }
.bf-side { min-width: 0; padding-bottom: var(--s-3); }
.bf-side-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); }
.bf-side-rows { display: flex; flex-direction: column; }
.bf-side-row { display: grid; grid-template-columns: calc(var(--w-col) * .3) minmax(0, 1fr); gap: var(--s-1); padding: var(--s-1) 0; border-top: var(--s-px) solid var(--rule-faint); }
.bf-side-row:first-child { border-top: 0; padding-top: 0; }
.bf-side-k { font: var(--t-label); color: var(--mute); }
.bf-side-v { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.bf-side-v.is-empty { color: var(--mute); }
.bf-side-pics { display: flex; flex-wrap: wrap; gap: var(--s-half); }
.bf-side-pic { width: var(--h-lg); height: var(--h-lg); object-fit: cover; border-radius: var(--r-sm); border: var(--s-px) solid var(--rule-faint); }
.bf-side-need { margin: 0; color: var(--mute); font-size: 13px; }
.bf-side-need.is-ready { color: var(--accent); font-weight: 600; }
.bf-side .bf-profile { padding-top: var(--s-1); border-top: var(--s-px) solid var(--rule-faint); }
.bf-where-say { margin: 0; }
.bf-sec { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.bf-sec[hidden] { display: none; }
.bf-sec-h { margin: 0; font: 600 18px/1.3 var(--font-display); color: var(--ink); }
.bf-sec .l-field { margin: 0; }
.bf-one .sec { margin: 0; }
.bf-details .sec-body { display: flex; flex-direction: column; gap: var(--gap-field); }

/* Paste Anything: one quiet line until it is pressed. */
.bf-magic-open {
  width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-half) var(--s-1h);
  padding: var(--s-2); border: var(--s-px) solid var(--rule); border-radius: var(--r-md);
  background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit;
}
.bf-magic-open:hover { border-color: var(--accent); }
.bf-magic-open b { font-weight: 600; }
.bf-magic-open .hint { margin: 0; }
.bf-magic { display: flex; flex-direction: column; gap: var(--s-1); }
.bf-magic-in { width: 100%; resize: vertical; }
.bf-magic-verbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); }
.bf-magic-verbs .hint { margin: 0; }
.bf-magic-work { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding: var(--s-1h) var(--s-2); border: var(--s-px) solid var(--accent); border-radius: var(--r-md); background: var(--accent-soft); }
.bf-magic-step { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.bf-magic-dot { flex: none; width: var(--s-1); height: var(--s-1); border-radius: var(--r-pill); background: var(--accent); animation: bf-pulse 1s ease-in-out infinite alternate; }
@keyframes bf-pulse { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bf-magic-dot { animation: none; } }

/* Use Again: their last few, as chips with the day they were sent. */
.bf-again { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.bf-again[hidden] { display: none; }
.bf-again-k, .bf-formats-k, .bf-sizes-k { font: var(--t-label); color: var(--mute); }
.bf-again-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); min-width: 0; }
.bf-again-chip { max-width: 100%; gap: var(--s-1); }
.bf-again-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--w-col) * .8); }
.bf-again-d { color: var(--mute); }
.bf-again-find { width: auto; flex: 1 1 calc(var(--w-col) * .6); max-width: var(--w-col); }

/* The four big choices, then the formats under Statics as chips. */
.bf-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
.bf-kind {
  display: flex; flex-direction: column; gap: var(--s-half); align-items: flex-start; text-align: left;
  min-height: calc(var(--s-12) + var(--s-1)); padding: var(--s-2); cursor: pointer; font: inherit;
  border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); color: var(--ink);
}
.bf-kind b { font: 600 16px/1.2 var(--font-display); }
.bf-kind span { color: var(--mute); font-size: 13px; line-height: 1.4; }
.bf-kind:hover:not(:disabled) { border-color: var(--ink-soft); }
.bf-kind.is-on { border-color: var(--accent); box-shadow: 0 0 0 var(--s-px) var(--accent); }
.bf-kind:disabled { cursor: default; }
/* Picked: the one kind as a slim row, its picture small, and Change. */
.bf-kinds.is-picked { display: flex; align-items: center; gap: var(--s-2); }
.bf-kinds.is-picked .bf-kind {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: calc(var(--s-12) + var(--s-2)) minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: var(--s-2); row-gap: var(--s-half); align-items: center; padding: var(--s-1h) var(--s-2);
}
.bf-kinds.is-picked .bf-kind .bf-art { grid-row: 1 / 3; width: 100%; margin: 0; }
.bf-kinds.is-picked .bf-kind:disabled { opacity: 1; }
.bf-kind-change { flex: none; }
.bf-formats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.bf-formats[hidden] { display: none; }
.bf-fit:empty { display: none; }
.bf-voice:empty { display: none; }

/* Where it runs: small tiles, a mark and a name, several at once. */
.bf-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .4), 1fr)); gap: var(--s-1); }
.bf-plat {
  display: flex; align-items: center; gap: var(--s-1); min-height: var(--h-lg); padding: 0 var(--s-1h);
  border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); color: var(--ink-soft);
  font: 500 13px/1.2 var(--font-body); cursor: pointer; text-align: left; min-width: 0;
}
.bf-plat span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-plat:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.bf-plat[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.bf-plat:disabled { cursor: default; }
.bf-plat-mark { flex: none; display: inline-grid; place-items: center; width: var(--h-xs); height: var(--h-xs); }
.bf-plat[aria-pressed="true"] .bf-plat-mark { color: var(--accent); }
.bf-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-half) var(--s-1); }
.bf-sizes .hint { margin: 0; }
.bf-ratio { padding: 0 var(--s-1); border: var(--s-px) solid var(--rule); border-radius: var(--r-pill); font: 500 12px/22px var(--font-body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* What they want: the one big box, then what this kind needs. */
.textarea.grow.bf-ask { width: 100%; min-height: calc(var(--s-12) + var(--s-4)); font-size: 15px; line-height: 1.5; }
.bf-extras { display: flex; flex-direction: column; gap: var(--gap-field); }
.bf-extras:empty { display: none; }
.bf-profile { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-half) var(--s-1); color: var(--mute); font-size: 13px; }

/* Files and inspiration: one zone, then a tight grid, each tagged in place. */
.bf-assets { display: flex; flex-direction: column; gap: var(--s-1h); }
.bf-agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .5), 1fr)); gap: var(--s-1h); }
.bf-agrid[hidden] { display: none; }
.bf-asset { margin: 0; display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.bf-asset .bf-thumb-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.bf-thumb-kind { font: 600 13px/1 var(--font-display); color: var(--mute); }
.bf-link-pic { text-decoration: none; }
.bf-link-pic:hover { border-color: var(--accent); }
.bf-use { width: 100%; }
.bf-use .seg { flex: 1 1 0; min-width: 0; padding: 0 var(--s-half); }

/* The foot, pinned: what is still missing, then Save Draft and Send. */
.bf-one-foot {
  position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  padding: var(--s-1h) 0; border-top: var(--s-px) solid var(--rule); background: var(--paper);
}
.bf-one-foot .bf-saved { padding: 0; }
.bf-one-need { color: var(--mute); font-size: 13px; min-width: 0; }
.bf-one-verbs { display: flex; gap: var(--gap-inline); margin-left: auto; }
.bf-one-said { display: flex; justify-content: flex-end; }
.bf-one-said .bf-saved { padding: var(--s-1) 0 0; }
.bf-extra { padding-top: var(--gap-section); }

@media (max-width: 1023px) { .bf-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .bf-kind { min-height: 0; padding: var(--s-1h); }
  .bf-one-verbs { width: 100%; }
  .bf-one-verbs .btn { flex: 1 1 0; }
}

/* ── CREATE A BRIEF V2 (Franz, 2026-10-26): its name, its campaign, Quick or
   Full, and the Full Brief's calm sections. House tokens only. */
.bf-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: start; }
.bf-top .l-field { margin: 0; }
.bf-name { font: 600 22px/1.3 var(--font-display); height: auto; padding: var(--s-1h) var(--s-2); }
.bf-name-hint { margin: 0; }
.bf-camp-in .input { width: 100%; }
.bf-camp-new { display: flex; flex-wrap: wrap; gap: var(--gap-inline); }
.bf-camp-new .input { flex: 1 1 calc(var(--w-col) * .5); min-width: 0; }
.bf-mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.bf-mode { flex: none; }
.bf-mode .seg { min-height: var(--h-lg); padding: 0 var(--s-2); font-size: 14px; }
.bf-mode-say { margin: 0; }
.bf-mode-body { display: flex; flex-direction: column; gap: var(--gap-section); }
.bf-group { padding-top: var(--gap-section); border-top: var(--s-px) solid var(--rule-faint); }
.bf-group[hidden] { display: none; }
.bf-group .l-field + .l-field { margin-top: 0; }
.bf-opt { color: var(--mute); font-weight: 400; }
.bf-field-say { margin: 0; }
.bf-chips { gap: var(--s-1); }
.chip.bf-chip-sub { flex-direction: column; align-items: flex-start; gap: 0; height: auto; padding-top: var(--s-half); padding-bottom: var(--s-half); line-height: 1.3; }
.bf-chip-hint { font-size: 11.5px; color: var(--mute); }
.chip[aria-pressed="true"] .bf-chip-hint { color: inherit; opacity: .8; }
.bf-other { max-width: var(--w-col); margin-top: var(--s-1); }
.bf-other[hidden] { display: none; }
.bf-texts-wrap { display: flex; flex-direction: column; gap: var(--s-1h); align-items: flex-start; }
.bf-texts { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .9), 1fr)); gap: var(--s-2); width: 100%; }
.bf-text-card { display: flex; flex-direction: column; gap: var(--s-1h); padding: var(--s-2); border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); min-width: 0; }
.bf-text-card .l-field { margin: 0; }
.bf-text-h { margin: 0; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.bf-fmt { display: flex; flex-direction: column; gap: var(--s-1h); }
@media (max-width: 639px) {
  .bf-top { grid-template-columns: minmax(0, 1fr); }
  .bf-mode { width: 100%; }
  .bf-mode .seg { flex: 1 1 0; }
}

/* ── A READ-ONLY BRIEF (sent, or a viewer): the brief as given (brief.js
   tidyRead hides what was left empty). Choices not picked go; boxes read as
   text, not as fields waiting to be typed in. */
.bf-one.is-read .bf-mode-row,
.bf-one.is-read .bf-name-hint,
.bf-one.is-read .bf-field-say,
.bf-one.is-read .bf-where-say,
.bf-one.is-read .bf-opt,
.bf-one.is-read .bf-kind:not(.is-on),
.bf-one.is-read .bf-plat[aria-pressed="false"],
.bf-one.is-read .bf-formats .chip[aria-pressed="false"],
.bf-one.is-read .bf-formats-k,
.bf-one.is-read .bf-chips .chip[aria-pressed="false"],
.bf-one.is-read .fit .chip[aria-pressed="false"],
.bf-one.is-read .bf-other:placeholder-shown,
.bf-one.is-read .bf-text-card .l-field[hidden] { display: none; }
.bf-one.is-read .bf-kinds { grid-template-columns: minmax(0, calc(var(--w-col) * .9)); }
.bf-one.is-read .bf-plats { grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .4), max-content)); }
.bf-one.is-read .bf-one-form .input,
.bf-one.is-read .bf-one-form .textarea {
  border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; resize: none; color: var(--ink); cursor: default;
}
.bf-one.is-read .bf-name { padding-left: 0; }
.bf-one.is-read .bf-camp select { appearance: none; pointer-events: none; }
.bf-one.is-read .l-field[hidden], .bf-one.is-read .bf-sec[hidden], .bf-one.is-read .sec[hidden] { display: none; }
/* Read-only: the title is the page's heading, and Your Brief would only repeat the page. */
.bf-one.is-read .bf-name-field, .bf-one.is-read .bf-side { display: none; }
.bf-one.is-read .bf-top { grid-template-columns: minmax(0, 1fr); }
.bf-one.is-read .bf-one-grid { grid-template-columns: minmax(0, 1fr); }

/* ── CREATE A BRIEF, AS PICTURES (web/brief-art.js, adeq-20's art) ─────────
   Each tile: the picture on a --shade ground, then a name and one line.
   Picked: the accent ring, and the art's own tint deepens (--ba-tint). */
.bf-art { display: block; border-radius: var(--r-sm); background: var(--shade); overflow: hidden; }
.bf-art .ba { width: 100%; height: auto; display: block; }
.is-on .ba, [aria-pressed="true"] .ba { --ba-tint: 35%; }
.bf-kind { min-height: 0; gap: var(--s-1); }
.bf-kind .bf-art { width: 100%; margin-bottom: var(--s-half); }
.bf-formats { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--s-2); }
.bf-fgroup { display: flex; flex-direction: column; gap: var(--s-1); }
.bf-ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .45), 1fr)); gap: var(--s-1); }
.bf-ftile {
  display: flex; flex-direction: column; gap: var(--s-half); align-items: flex-start; text-align: left; min-width: 0;
  padding: var(--s-1); border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
.bf-ftile .bf-art { width: 100%; margin-bottom: var(--s-half); }
.bf-ftile b { font: 600 13.5px/1.3 var(--font-body); }
.bf-ftile-chip { padding: 0 var(--s-1); border: var(--s-px) solid var(--rule); border-radius: var(--r-pill); color: var(--mute); font: 500 11.5px/20px var(--font-body); }
.bf-ftile:hover:not(:disabled) { border-color: var(--ink-soft); }
.bf-ftile.is-on { border-color: var(--accent); box-shadow: 0 0 0 var(--s-px) var(--accent); }
.bf-ftile.is-on .bf-ftile-chip { border-color: var(--accent); color: var(--ink); }
.bf-ftile:disabled { cursor: default; }

/* Where it runs: each platform with the shapes it gives, at true ratios. */
.bf-plats:has(.bf-plat2) { grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .7), 1fr)); }
.bf-plat.bf-plat2 { flex-direction: column; align-items: stretch; gap: var(--s-1); padding: var(--s-1h); min-height: 0; }
.bf-plat-top { display: flex; align-items: center; gap: var(--s-1); }
.bf-plat-top b { font-weight: 600; color: var(--ink); }
.bf-frames { display: flex; flex-wrap: wrap; gap: var(--s-half); }
/* One height for every frame, so a platform with one shape shows one small
   frame, not one huge one; the art draws each at its true ratio inside. */
.bf-frame { flex: none; height: calc(var(--s-6) + var(--s-half)); aspect-ratio: 16 / 10; border-radius: var(--r-sm); background: var(--shade); overflow: hidden; opacity: .55; transition: opacity .15s; }
.bf-frame .ba { width: 100%; height: 100%; display: block; }
.bf-plat2.is-on .bf-frame { opacity: 1; }
.bf-plat-say { color: var(--mute); font-size: 12px; line-height: 1.35; }
.bf-plat2.is-on .bf-plat-say { color: var(--ink-soft); }
/* Read-only: only what was picked. */
.bf-one.is-read .bf-ftile:not(.is-on), .bf-one.is-read .bf-fgroup:not(:has(.bf-ftile.is-on)) { display: none; }
@media (max-width: 639px) {
  .bf-ftiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-plats:has(.bf-plat2) { grid-template-columns: minmax(0, 1fr); }
}
.bf-texts-wrap > .l-field { width: 100%; }
.bf-prio { display: inline-flex; align-items: center; gap: var(--s-1); margin-right: var(--s-1); color: var(--ink-soft); font-size: 13.5px; cursor: pointer; white-space: nowrap; }
@media (max-width: 639px) { .bf-prio { width: 100%; } }

/* PAUSE, RESUME, AND THE QUEUE'S ORDER (queue-controls.js, slots.js). */
.sl-row.is-draggable { cursor: grab; }
.qc-verbs { display: inline-flex; align-items: center; gap: var(--s-half); }

/* ── ROUND 3: THE SIZE IS THE HERO on every tile, the name under it. */
.bf-ftile .bf-hero { font: 700 20px/1.15 var(--font-display); color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bf-ftile .bf-ftile-name { color: var(--ink-soft); font-size: 13px; line-height: 1.3; }
.bf-ftile.is-on .bf-hero { color: var(--accent); }
.bf-fmt-field { margin: 0; }
.bf-fmt-field[hidden] { display: none; }
/* Real boxes, easy to type in (round 3): the Idea's at four lines and
   growing; the script's at ten, resizable, scrolling inside. */
.textarea.grow.bf-roomy { min-height: calc(1.5em * 4 + var(--s-2)); line-height: 1.5; }
.textarea.grow.bf-big { field-sizing: fixed; min-height: calc(1.5em * 10 + var(--s-2)); max-height: none; resize: vertical; overflow: auto; line-height: 1.5; }
.bf-scene { align-self: flex-start; margin-top: var(--s-1); }
.bf-text-card .textarea.grow { min-height: calc(1.5em * 3 + var(--s-2)); line-height: 1.5; }
/* Details (round 3): shown, two columns, then Tag Colleagues. */
.bf-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-2) var(--s-3); align-items: start; }
.bf-details-grid .l-field { margin: 0; }
.bf-details .bf-people { grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .6), 1fr)); }
.bf-none { display: flex; flex-wrap: wrap; gap: var(--s-half) var(--s-1); align-items: baseline; margin: 0; }
@media (max-width: 639px) { .bf-details-grid { grid-template-columns: minmax(0, 1fr); } }
/* Landing pages and lead forms as tiles (round 3): one even grid, equal heights. */
.bf-kindpick { display: flex; flex-direction: column; gap: var(--s-2); }
.bf-kindpick[hidden], .bf-fit[hidden] { display: none; }
.bf-ftiles.is-goals { grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .5), 1fr)); }
.bf-ftiles.is-tpls { grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .7), 1fr)); grid-auto-rows: 1fr; }
.bf-ftiles.is-even { grid-auto-rows: 1fr; }
.bf-ftile .bf-hero-word { font-size: 17px; }
.bf-tpl { height: 100%; }
.bf-tpl-pic { width: 100%; aspect-ratio: 4 / 3; }
.bf-tpl-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.bf-tpl-pic .ba { width: 100%; height: 100%; }
.bf-tpl-name { font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.bf-tpl-look { margin-top: auto; padding-top: var(--s-half); font-size: 12.5px; color: var(--accent); text-decoration: none; }
.bf-tpl-look:hover { text-decoration: underline; }
.bf-tpl-look.is-quiet { color: var(--mute); }
.bf-feel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
@media (max-width: 639px) { .bf-ftiles.is-goals, .bf-ftiles.is-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── THE SECTIONS, ALL OPEN (Franz, 2026-10-27: no drop-downs, a full view).
   Each: its number, its title, a tick when it has what it needs. An optional
   section with nothing in it yet stays in sight, quieter (web/brief.js). */
/* THE RHYTHM (Franz, 2026-10-28: "section vertical spacing really nice"):
   24px between sections, 24px inside each, and 24px between the groups in a
   section; a label keeps the shared --gap-label over its field. */
.bf-mode-body { gap: var(--s-3); }
.bf-panel-body > .bf-sec { gap: var(--s-3); }
.bf-panel { border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); scroll-margin-top: calc(var(--header-h) + var(--s-2)); }
.bf-panel[hidden] { display: none; }
.bf-panel-head { display: flex; align-items: center; gap: var(--s-1h); padding: var(--s-3) var(--s-3) var(--s-2); color: var(--ink); }
.bf-panel-n {
  flex: none; display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-pill);
  background: var(--shade); color: var(--ink-soft); font: 700 13px/1 var(--font-display);
}
.bf-panel.is-done .bf-panel-n { background: var(--accent-soft); color: var(--ink); }
.bf-panel-t { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 17px/1.3 var(--font-display); }
.bf-panel-tick { flex: none; display: grid; place-items: center; width: var(--h-xs); height: var(--h-xs); border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); }
.bf-panel-tick[hidden] { display: none; }
.bf-panel-body { padding: 0 var(--s-3) var(--s-3); }
@container (max-width: 639.98px) {
  .bf-panel-head { padding: var(--s-2) var(--s-2) var(--s-1h); }
  .bf-panel-body { padding: 0 var(--s-2) var(--s-2); }
}
.bf-panel.is-quiet { border-color: var(--rule-faint); background: transparent; }
.bf-panel.is-quiet .bf-panel-t { color: var(--ink-soft); }
.bf-quiet-say { margin: 0; }
/* The section inside a panel loses its own heading and rule: the head says it. */
.bf-panel-body > .bf-sec > .bf-sec-h, .bf-panel-body > .sec > summary { display: none; }
.bf-panel-body > .bf-group { padding-top: 0; border-top: 0; }
.bf-panel-body > .sec > .sec-body { padding: 0; }
.bf-one.is-read .bf-panel.is-quiet { border-style: solid; background: var(--card); }

/* ONE LABEL STYLE (Franz, 2026-10-27): every label in What Are We Making,
   How Many and Design Concepts included, reads as Brief Name and Campaign do;
   and each picker group stacks, its label over its pills, evenly spaced. */
.bf-one .fit-k, .bf-one .bf-formats-k, .bf-one .bf-again-k {
  font: var(--t-label); letter-spacing: var(--tr-label); color: var(--label-ink, var(--ink-soft)); text-transform: none;
}
.bf-one .fit { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
.bf-one .fit-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-label); }
.bf-one .bf-voice:empty, .bf-one .fit[hidden] { display: none; }
.bf-one .fit-row > .fit-chips { width: 100%; }
.bf-one .fit-say { grid-column: auto; }
.bf-panel[data-key="what"] .bf-panel-body > .bf-sec { display: flex; flex-direction: column; gap: var(--s-2); }
.bf-panel[data-key="what"] .bf-sec > :is(.bf-formats, .bf-kindpick, .bf-fit, .bf-voice, .bf-fmt-field, .bf-where) { margin: 0; }
.bf-one .bf-fgroup, .bf-one .bf-feel, .bf-one .bf-fmt-field { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-label); }
.bf-one .bf-feel > .bf-formats-k { align-self: flex-start; }
.bf-one .bf-fgroup[hidden], .bf-one .bf-fmt-field[hidden] { display: none; }

/* Half-width pairs (round 4): short fields side by side, labels on one line. */
.bf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); align-items: start; }
.bf-pair > .l-field { margin: 0; }
.bf-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* No explainer lines under the pickers (round 4): the chips say it. */
.bf-one .fit-say, .bf-one .bf-field-say { display: none; }

/* ALIGNMENT (round 4): one height for every single-line box, text centred,
   the name and the campaign one row of equal boxes. */
.bf-one .input:not(textarea), .bf-one select.input, .bf-one .bf-date {
  height: var(--h-lg); padding-top: 0; padding-bottom: 0; line-height: calc(var(--h-lg) - 2px); box-sizing: border-box;
}
.bf-one .bf-name { font: 600 17px/1 var(--font-display); padding-left: var(--s-1h); padding-right: var(--s-1h); }
.bf-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.bf-top .l-field { display: flex; flex-direction: column; gap: var(--gap-label); }
.bf-top .l-label { margin: 0; line-height: 1.3; }
@media (max-width: 639px) {
  .bf-pair, .bf-details-grid { grid-template-columns: minmax(0, 1fr); }
  .bf-panel-head { padding: var(--s-1h) var(--s-1h) var(--s-1); }
  .bf-panel-body { padding: 0 var(--s-1h) var(--s-1h); }
}
@media (max-width: 639px) { .bf-top { grid-template-columns: minmax(0, 1fr); } }
.bf-one-verbs .btn { white-space: nowrap; }

/* Create a Brief's one page: web/screen-brief.css (the rebuild, 2026-10-28). */