/* briefs.css — THE BRIEFS PAGE (src/BriefsPage.jsx, 8 Nov 2026), from Hugo's mockup in the app's own look: the hero with the
   job's name and its five key facts, three equal panels (the test, what they want, how they judge it), the original pictures
   in one row and the client's files. The page fills the screen: the three panels take the height left and only their text
   scrolls inside them. Every colour is a token (invariant 28); a skin repaints it, never resizes it. */
.view-page.br-page { gap: 14px; min-height: 0; overflow: hidden; }
.br-empty { padding: 24px; font-size: var(--fs-14); color: var(--sep-panel-ink-muted); }
.br-tabs { flex: none; gap: 28px; }
.br-tabs .vp-tab { font-size: var(--fs-16); }

.br-panel {
  position: relative; min-width: 0; box-sizing: border-box; padding: 22px 26px;
  border-radius: var(--r-md); background: var(--sep-panel-fill);
  box-shadow: 0 0 0 var(--hairline-w, 1px) color-mix(in srgb, var(--ink) 10%, transparent), var(--shadow-card);
}
.br-eyebrow { font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sep-panel-ink-muted); }
.br-title { margin: 6px 0 14px; font-family: var(--font-display); font-size: 54px; line-height: 1; letter-spacing: 0.01em; color: var(--ink); text-transform: uppercase; }

/* 1. the hero: the picture on the right fades into the panel; the facts strip under it */
.br-hero { flex: none; padding: 0; overflow: hidden; }
.br-hero-top { position: relative; height: 290px; }
.br-hero-pic {
  position: absolute; top: 0; right: 0; bottom: 0; width: 70%;
  background-size: cover; background-position: center 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 32%); mask-image: linear-gradient(90deg, transparent 0%, black 32%);
}
.br-hero-text { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 40px; }
.br-hero-title { margin: 4px 0 18px; font-family: var(--font-display); font-size: 128px; line-height: 0.9; letter-spacing: 0.005em; color: var(--ink); text-transform: uppercase; }
.br-hero-client { font-size: var(--fs-24, 24px); font-weight: var(--fw-semi); color: var(--ink); }
.br-hero-sub { margin-top: 2px; font-size: var(--fs-18); color: var(--ink); opacity: 0.8; }
.br-stats { display: grid; align-items: center; padding: 20px 40px 22px; border-top: var(--hairline-w, 1px) solid color-mix(in srgb, var(--ink) 10%, transparent); }
.br-stat { display: flex; gap: 14px; min-width: 0; padding: 0 22px; }
.br-stat:first-child { padding-left: 0; }
.br-stat + .br-stat { border-left: var(--hairline-w, 1px) solid color-mix(in srgb, var(--ink) 16%, transparent); }
.br-stat-icon { flex: none; color: var(--sep-panel-ink-muted); padding-top: 1px; }
.br-stat-body { min-width: 0; }
.br-stat-label { font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sep-panel-ink-muted); }
.br-stat-main { margin-top: 8px; font-size: var(--fs-20, 20px); font-weight: var(--fw-semi); line-height: 1.2; color: var(--ink); }
.br-stat-sub { margin-top: 3px; font-size: var(--fs-15); line-height: 1.3; color: var(--ink); opacity: 0.75; }
.br-stat-big { margin-top: 4px; font-family: var(--font-display); font-size: 58px; line-height: 1; color: var(--ink); white-space: nowrap; }
.br-stat-big.is-mid { font-size: 36px; margin-top: 12px; }
.br-stat-unit { margin-left: 10px; font-family: var(--font-body); font-size: var(--fs-15); color: var(--ink); opacity: 0.75; }

/* 2. three equal panels, one height (they take what is left of the screen) */
.br-three { flex: 1 1 0; min-height: 420px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.br-col { display: flex; flex-direction: column; min-height: 0; padding: 26px 30px; }
.br-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.br-checks { margin: 0; padding: 0; list-style: none; }
.br-checks li { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; font-size: var(--fs-18); line-height: 1.45; color: var(--ink); }
.br-checks.is-small li { margin-bottom: 12px; font-size: var(--fs-16); }
.br-check { flex: none; margin-top: 2px; color: var(--sep-panel-ink-muted); }
.br-checks a, .br-crit a, .br-lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.br-cta {
  flex: none; display: flex; align-items: center; gap: 14px; height: 62px; margin-top: 14px; padding: 0 22px;
  border-radius: var(--r-sm); background: var(--cta-bg); color: var(--cta-ink); text-decoration: none;
  box-shadow: var(--shadow-card);
}
.br-cta:hover { filter: brightness(1.12); }
.br-cta-t { flex: 1; text-align: center; font-size: var(--fs-20, 20px); font-weight: var(--fw-semi); }
.br-lead { flex: none; margin: -4px 0 12px; font-size: var(--fs-18); font-weight: var(--fw-semi); line-height: 1.35; color: var(--ink); }
.br-refcard {
  flex: none; position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 96px; margin-bottom: 16px; padding: 12px 16px;
  border-radius: var(--r-sm); overflow: hidden; text-decoration: none; color: var(--cta-ink);
  background-color: var(--cta-bg); background-size: cover; background-position: center 55%;
  box-shadow: var(--shadow-card);
}
.br-refcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cta-bg) 85%, transparent), color-mix(in srgb, var(--cta-bg) 15%, transparent)); }
.br-refcard:hover::before { background: linear-gradient(90deg, color-mix(in srgb, var(--cta-bg) 70%, transparent), transparent); }
.br-refcard-t, .br-refcard-x { position: relative; z-index: 1; }
.br-refcard-t { font-size: var(--fs-18); font-weight: var(--fw-semi); }
.br-crit { margin: 0; padding: 0; list-style: none; }
.br-crit li { display: flex; gap: 22px; align-items: flex-start; margin: 0 0 22px; }
.br-crit-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--cta-bg); color: var(--cta-ink); font-size: var(--fs-20, 20px); font-weight: var(--fw-bold);
}
.br-crit-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 3px; }
.br-crit-t { font-size: var(--fs-20, 20px); font-weight: var(--fw-semi); color: var(--ink); }
.br-crit-d { font-size: var(--fs-16); line-height: 1.4; color: var(--ink); opacity: 0.8; }

/* 3. the original pictures: one row, a hover lifts and rings a picture */
.br-pics-panel { flex: none; padding: 18px 22px 20px; }
.br-pics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; height: 190px; }
.br-pic {
  position: relative; display: block; min-width: 0; height: 100%; padding: 0; border: none; border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in;
  background: var(--sep-row-fill); transition: transform 160ms ease, box-shadow 160ms ease;
}
.br-pic img, .br-pic video { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-pic:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--leaf), var(--shadow-card); z-index: 1; }
.br-pic-zoom {
  position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-xs, 6px);
  background: color-mix(in srgb, var(--cta-bg) 75%, transparent); color: var(--cta-ink); opacity: 0; transition: opacity 160ms ease;
}
.br-pic:hover .br-pic-zoom { opacity: 1; }

/* 4. the client's files */
.br-files-panel { flex: none; padding: 16px 22px 18px; }
.br-file { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--sep-row-fill); }
.br-file-icon { flex: none; display: inline-flex; color: var(--sep-panel-ink-muted); }
.br-file-name { flex: 1; min-width: 0; font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.br-file-open {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; cursor: pointer;
  border: var(--hairline-w, 1px) solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--r-sm);
  background: var(--sep-panel-fill); font: inherit; font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--ink);
}
.br-file-open:hover { background: var(--sep-card-fill); }

/* the phone and narrow windows: everything stacks and the page scrolls */
body[data-ui-tier="s"] .view-page.br-page { overflow: auto; }
body[data-ui-tier="s"] .br-three { grid-template-columns: minmax(0, 1fr); flex: none; }
body[data-ui-tier="s"] .br-stats { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px; }
body[data-ui-tier="s"] .br-stat + .br-stat { border-left: none; padding-left: 0; }
body[data-ui-tier="s"] .br-hero-title { font-size: 72px; }
body[data-ui-tier="s"] .br-pics { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
body[data-ui-tier="s"] .br-pic { height: 140px; }
/* (8 Nov 2026) past 10 pictures: 9 and a "+N" tile (opens the Lightbox) */
.br-pic-more { cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 48px; color: var(--ink); background: var(--sep-card-fill); }

/* (8 Nov 2026) the picture row: each picture at its own shape (the row's height, its own width), the row scrolls sideways
   (mouse wheel, src/BriefsPage.jsx) instead of squeezing every picture into the width */
.br-pics { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; height: 190px; padding-bottom: 4px; }
.br-pic { flex: none; width: auto; height: 100%; }
.br-pic img, .br-pic video { width: auto; height: 100%; object-fit: contain; }
.br-pic:hover { transform: none; }
.br-vid-back { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ink) 70%, transparent); }
.br-vid { display: flex; flex-direction: column; gap: 10px; width: min(1400px, 92vw); height: 86vh; padding: 14px; border-radius: var(--r-md); background: var(--sep-panel-fill); box-shadow: var(--shadow-card); }
.br-vid-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.br-vid-t { font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.br-vid-v { flex: 1; min-height: 0; width: 100%; border-radius: var(--r-sm); background: var(--ink); }

/* (8 Nov 2026) the picture window: a panel that hugs the picture (BrPicModal), a dark backdrop, previous / next beside it */
.br-pm-back { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; gap: 18px;
  background: color-mix(in srgb, var(--ink) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.br-pm { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md); background: var(--sep-panel-fill); box-shadow: var(--shadow-card); }
.br-pm-head { flex: none; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px 0 16px; box-sizing: border-box; }
.br-pm-n { flex: none; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--sep-panel-ink-muted); }
.br-pm-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--ink); }
.br-pm-stage { flex: none; width: 100%; background: var(--sep-card-fill); }
.br-pm-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.br-pm-nav { flex: none; width: 54px; height: 54px; border: none; border-radius: 50%; cursor: pointer; font-size: 34px; line-height: 50px;
  color: var(--ink); background: var(--sep-panel-fill); box-shadow: var(--shadow-card); }
.br-pm-nav:hover { background: var(--sep-card-fill); }

/* (8 Nov 2026) the five facts, one style: a big icon in a soft circle, centred on the fact; the label; the value in the title
   face, the same size for every fact; its detail under it. The client line in the title face too (the body face has one
   weight only here, so a "semi-bold" body line was a fake bold). */
.br-stat { align-items: center; gap: 18px; }
.br-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; border-radius: 50%;
  background: var(--sep-card-fill); color: var(--ink); box-shadow: inset 0 0 0 var(--hairline-w, 1px) color-mix(in srgb, var(--ink) 10%, transparent); }
.br-stat-icon svg { width: 30px; height: 30px; }
.br-stat-val { margin-top: 6px; font-family: var(--font-display); font-size: 34px; line-height: 1.05; color: var(--ink); }
.br-stat-sub { margin-top: 5px; font-size: var(--fs-14); line-height: 1.3; opacity: 0.75; }
.br-hero-client { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: 0.01em; }
.br-hero-sub { font-weight: 400; }

/* ── (8 Nov 2026, tidy round 2) ──
   the hero picture takes its own shape (width set by the page from its aspect; --br-hero-h = the hero's height) */
.br-hero-top { --br-hero-h: 290px; }
.br-hero-pic { left: auto; }
.br-hero-source { margin-top: 10px; display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--fs-16); color: var(--ink); }
.br-hero-source-l { font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chart-2); }
/* the five facts: columns hug their content, every value and detail on ONE line, the values all one size */
.br-stats { justify-content: space-between; column-gap: 12px; }
.br-stat { padding: 0 18px; }
.br-stat-val { font-size: 36px; white-space: nowrap; }
.br-stat-sub { white-space: nowrap; }
.br-stat-label { white-space: nowrap; }
/* a colour per fact (the chart colours: every palette repaints them) */
.br-stat.is-contract .br-stat-icon { color: var(--chart-2); background: color-mix(in srgb, var(--chart-2) 16%, var(--sep-panel-fill)); }
.br-stat.is-volume .br-stat-icon { color: var(--chart-1); background: color-mix(in srgb, var(--chart-1) 16%, var(--sep-panel-fill)); }
.br-stat.is-fee .br-stat-icon { color: var(--chart-3); background: color-mix(in srgb, var(--chart-3) 18%, var(--sep-panel-fill)); }
.br-stat.is-dates .br-stat-icon { color: var(--chart-4); background: color-mix(in srgb, var(--chart-4) 16%, var(--sep-panel-fill)); }
.br-stat.is-location .br-stat-icon { color: var(--chart-5); background: color-mix(in srgb, var(--chart-5) 16%, var(--sep-panel-fill)); }
.br-stat-icon { box-shadow: none; }
/* the live progress: six steps in a row under the facts */
.br-prog { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 16px 40px 18px; border-top: var(--hairline-w, 1px) solid color-mix(in srgb, var(--ink) 10%, transparent); }
.br-prog-step { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--sep-row-fill); }
.br-prog-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: var(--fs-14); font-weight: 700; color: var(--sep-panel-ink-muted); background: var(--sep-card-fill); }
.br-prog-txt { display: flex; flex-direction: column; min-width: 0; }
.br-prog-t { font-size: var(--fs-15); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-prog-d { font-size: var(--fs-13); color: var(--sep-panel-ink-muted); white-space: nowrap; }
.br-prog-step.is-done .br-prog-dot { color: var(--sep-panel-fill); background: var(--ok); }
.br-prog-step.is-now { background: color-mix(in srgb, var(--warn) 16%, var(--sep-row-fill)); box-shadow: inset 0 0 0 var(--hairline-w, 1px) color-mix(in srgb, var(--warn) 60%, transparent); }
.br-prog-step.is-now .br-prog-dot { color: var(--sep-panel-fill); background: var(--warn); }
.br-prog-step.is-now .br-prog-d { color: var(--ink); }
/* the three panels: a colour each on the eyebrow; the checks in their panel's colour */
.br-three > .br-col:nth-child(1) .br-eyebrow, .br-three > .br-col:nth-child(1) .br-check { color: var(--chart-2); }
.br-three > .br-col:nth-child(2) .br-eyebrow, .br-three > .br-col:nth-child(2) .br-check { color: var(--chart-3); }
.br-three > .br-col:nth-child(3) .br-eyebrow { color: var(--chart-4); }
/* Submit form: dark slate */
.br-cta { background: color-mix(in srgb, var(--ink) 82%, var(--chart-2)); color: var(--sep-panel-fill); }
/* the criteria: big numerals, every row the same height (the flow never jumps) */
.br-crit { display: grid; grid-auto-rows: minmax(0, 1fr); height: 100%; }
.br-crit li { margin: 0; align-items: flex-start; gap: 20px; }
.br-crit-n { width: auto; height: auto; border-radius: 0; background: none; font-family: var(--font-display); font-size: 44px; font-weight: 400; line-height: 0.95; color: var(--chart-4); }
.br-crit-body { padding-top: 2px; }
/* (8 Nov 2026) every job's hero stays drawn; only the open job's shows (switching never reloads or moves it) */
.br-hero-pic { opacity: 0; }
.br-hero-pic.is-on { opacity: 1; }
/* (8 Nov 2026) the dedicated wide heroes (4:1, extended left and right): fill the hero's right side, the upper middle kept */
.br-hero-pic { background-position: center 30% !important; }
/* (8 Nov 2026) the criteria at a normal spacing again (Hugo: "I don't like how much gap there is in between each section") */
.br-crit { display: block; height: auto; }
.br-crit li { margin: 0 0 22px; }
/* the deadline card at the top of the test */
.br-due { flex: none; display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn) 16%, var(--sep-panel-fill)); box-shadow: inset 0 0 0 var(--hairline-w, 1px) color-mix(in srgb, var(--warn) 55%, transparent); }
.br-due-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: var(--sep-panel-fill); background: var(--warn); }
.br-due-icon svg { width: 26px; height: 26px; }
.br-due-body { display: flex; flex-direction: column; min-width: 0; }
.br-due-l { font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.7; }
.br-due-v { font-family: var(--font-display); font-size: 36px; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.br-due-s { font-size: var(--fs-14); color: var(--ink); opacity: 0.75; }
/* the original pictures: the asset cards' hover (gold ring, lifts a little), with room so nothing is cut */
.br-pics { box-sizing: border-box; height: 214px; padding: 8px 8px 16px; }
.br-pic { transition: transform var(--dur-2, 200ms) ease, box-shadow var(--dur-2, 200ms) ease; }
.br-pic:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--nav-active) 85%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
    0 14px 32px color-mix(in srgb, var(--foil) 30%, transparent);
}
/* (8 Nov 2026) TIME AND MONEY: a slim row of small fact cards under the progress (the brief's "## Time and money" block). One
   fixed height, the detail clamped to two lines, so no job's text changes the row; a job without the block keeps an empty row
   of the same height while another job of the project has it (switching never moves the three panels). Money cards wear the
   Fee colour, time cards the Dates colour (chart tokens: every palette repaints them). */
.br-money { box-sizing: border-box; height: 106px; display: grid; grid-template-columns: 104px repeat(6, minmax(0, 1fr)); gap: 10px; padding: 9px 40px;
  border-top: var(--hairline-w, 1px) solid color-mix(in srgb, var(--ink) 10%, transparent); }
.br-money.is-empty { border-top-color: transparent; }
.br-money-title { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.br-money-title .br-eyebrow { line-height: 1.35; letter-spacing: 0.16em; }
.br-money-icon { display: inline-flex; color: var(--sep-panel-ink-muted); }
.br-money-card { box-sizing: border-box; min-width: 0; height: 100%; padding: 7px 14px; border-radius: var(--r-sm); overflow: hidden;
  background: color-mix(in srgb, var(--chart-3) 9%, var(--sep-row-fill)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--chart-3) 70%, transparent); }
.br-money-card.is-time { background: color-mix(in srgb, var(--chart-4) 9%, var(--sep-row-fill)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--chart-4) 70%, transparent); }
.br-money-k { font-size: var(--fs-12); font-weight: 600; line-height: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chart-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-money-card.is-time .br-money-k { color: var(--chart-4); }
.br-money-v { margin-top: 2px; font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-money-s { margin-top: 3px; font-size: var(--fs-13); line-height: 1.2; height: 2.4em; color: var(--ink); opacity: 0.75;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body[data-ui-tier="s"] .br-money { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px 14px; }
body[data-ui-tier="s"] .br-money-title { grid-column: 1 / -1; flex-direction: row; align-items: center; }
body[data-ui-tier="s"] .br-money.is-empty { display: none; }
/* the last line of a panel's list keeps no margin under it (it only made a panel scroll a few pixels early) */
.br-checks li:last-child, .br-crit li:last-child { margin-bottom: 0; }

/* (8 Nov 2026) Hugo: "make it interactive so i can click on the card and make it checked" — each progress card is a button
   (same look, same size; a hover lift), and "once the job is submitted or applied, I want an Applied Checkmark top right
   of the hero image banner": one fixed-size pill top right, "Mark as applied" before, a green tick + "Applied" after. */
button.br-prog-step { width: 100%; margin: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease; }
button.br-prog-step:hover { background: color-mix(in srgb, var(--ink) 8%, var(--sep-row-fill)); }
button.br-prog-step.is-now:hover { background: color-mix(in srgb, var(--warn) 24%, var(--sep-row-fill)); }
button.br-prog-step:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.br-applied-wrap { position: absolute; top: 20px; right: 24px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.br-applied { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 44px; box-sizing: border-box; padding: 0 18px 0 8px; margin: 0;
  border: var(--hairline-w, 1px) solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--sep-panel-fill) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink); font: inherit; font-size: var(--fs-15); font-weight: 600; box-shadow: 0 4px 16px color-mix(in srgb, var(--ink-deep) 30%, transparent); }
.br-applied:hover { background: color-mix(in srgb, var(--sep-panel-fill) 96%, transparent); }
.br-applied:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.br-applied-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent); font-size: var(--fs-15); line-height: 1; }
.br-applied-t { white-space: nowrap; letter-spacing: 0.02em; }
.br-applied.is-on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 22%, var(--sep-panel-fill)); }
.br-applied.is-on .br-applied-dot { border-color: var(--ok); background: var(--ok); color: var(--sep-panel-fill); }
.br-applied.is-on .br-applied-t { font-family: var(--font-display); font-size: var(--fs-22, 22px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.br-applied-err { height: 16px; font-size: var(--fs-12); color: var(--danger); text-align: right; }

/* (8 Nov 2026) THE MASTERS. Hugo: "put it at the bottom of creative goal panel" (the same bar as the test's Submit, in
   the creative panel's colour) and, for the window, "i want the aspect ratio to match the video ... thumbnails at the
   bottom": the window hugs the video (its box is set by the page from the file's own shape), a thumbnail row under it. */
button.br-cta { width: 100%; border: 0; margin-bottom: 0; font: inherit; cursor: pointer; }
.br-cta.is-masters { background: color-mix(in srgb, var(--ink) 78%, var(--chart-3)); }
.br-cta-play { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box;
  padding-left: 3px; font-size: 12px; background: color-mix(in srgb, var(--sep-panel-fill) 22%, transparent); }
.br-vid { width: auto; height: auto; max-width: 92vw; max-height: 92vh; }
.br-vid-v { flex: none; width: auto; min-height: 0; display: block; object-fit: contain; background: var(--ink-deep); }
.br-vid-thumbs { flex: none; display: flex; gap: 10px; height: 136px; box-sizing: border-box; min-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.br-vid-thumb { flex: none; display: flex; flex-direction: column; gap: 6px; width: 176px; height: 128px; padding: 4px; margin: 0; box-sizing: border-box;
  border: 0; border-radius: var(--r-sm); background: var(--sep-row-fill); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.br-vid-thumb:hover { background: color-mix(in srgb, var(--ink) 8%, var(--sep-row-fill)); }
.br-vid-thumb.is-on { box-shadow: inset 0 0 0 2px var(--leaf); }
.br-vid-thumb-pic { display: block; width: 100%; height: 94px; overflow: hidden; border-radius: var(--r-xs); background: var(--ink-deep); }
.br-vid-thumb-pic video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.br-vid-thumb-t { display: block; padding: 0 4px; font-size: var(--fs-12); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-vid-bad { display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--ink-on-dark, var(--sep-panel-fill)); font-size: var(--fs-16); }
.br-vid-thumb-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-vid-thumb-wait { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; color: color-mix(in srgb, var(--sep-panel-fill) 70%, transparent); }

/* (8 Nov 2026) A JOB'S OWN STEPS (Evil Ray: the brief's "## Progress" lines, 3 to 10 of them): equal columns, one line each,
   the film row's fixed height (the dot and two text lines), whatever the count. The film row (.br-prog alone) is unchanged. */
.br-prog.is-job { grid-template-columns: repeat(var(--br-prog-n, 6), minmax(0, 1fr)); gap: 8px; }
/* (8 Nov 2026) 6 or more steps sit in two rows of up to 5 (BriefsPage.jsx sets --br-prog-n to half the count): ten in one
   row cut every name short. --br-prog-rows = the most any job of the project needs; 1fr rows are equal, so an empty
   second row keeps a step's height and switching jobs never moves the panels below. */
.br-prog.is-job { grid-template-rows: repeat(var(--br-prog-rows, 1), 1fr); }
.br-prog.is-job .br-prog-step { gap: 10px; padding: 10px 12px; }
.br-prog.is-job .br-prog-d { overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .br-prog.is-job { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; padding: 12px 16px 14px; }

/* (8 Nov 2026) THE DELIVERABLES under the hero (src/DeliverablesCard.jsx in a .br-panel): a project that has them lets the
   page scroll (the three panels keep their 420 px floor); a project without any keeps the page that fills the screen. */
.view-page.br-page.has-deliv { overflow-y: auto; }
.br-panel.br-deliv { flex: none; padding: 20px 40px 18px; }
body[data-ui-tier="s"] .br-panel.br-deliv { padding: 16px; }