/* ------------------------------------------------------------------
   The 01 demo (a Blueprint becomes a Project Binder, the binder becomes a
   client link) and the Blueprint card it shares with 07.

   Everything inside the 01 screen is the app in its dark theme, whatever
   the page's own scheme: the app's tokens, the system font, the app's
   sizes in the app's pixels. The whole desk is laid out at a desktop size
   and scaled down to the frame (demo.js sets --s), because the Project
   Binder at its real size is the point, and a binder squeezed to the
   frame's width would be a different, cramped product. The window's own
   text-size buttons work, as they do in the app: they scale the text and
   nothing else (--ts).

   Two rules from the app that this file keeps, and that are easy to break
   by reaching for a colour:
   - green means done. Selected tabs, the add buttons, the task filters, the
     owner chips and the switches are grey or white here. Green is left only
     where the app itself puts it: finished work (ticks, done rows, filmed
     shots, Captured, the progress ring), the front window's pinned mark on
     the taskbar, the dialogs' radios, icons and text buttons, the owner's
     avatar on Team, and the Blueprints tab's chosen type chip. One green is
     the demo's rather than the app's: the ring round Export once the binder
     is built, in the page's own brand green, because it is the next thing to
     press.
   - the holographic surfaces are the studio artwork under a translucent
     wash, and the wash decides the ink: dark ink on the white production
     wash, light ink everywhere else.

   Where the demo departs from the app on purpose, because Dan asked: the
   window's title bar and the binder's header are black, not green and not
   inverted white, so the one ringed control in them (Export) is what the eye
   lands on; and the Blueprints tab keeps only its filter and its cards.

   This loads before the page's own <style>, so where a page rule could
   reach in here (`.screen img`, `h2`, `p`) the rules below are written to
   outrank it rather than to follow it.
   ------------------------------------------------------------------ */

/* ================= the Blueprint card (01 and 07) =================
   Ported from the app's community card, and since 10-13 ported back: the
   app draws this card (BlueprintCard, widgets/planner/blueprints/
   blueprint_card.dart) and its activation notice (.bd-ticker below;
   blueprint_activation_ticker.dart), so a change here is owed there. The
   filler art full bleed under black (90%; see .bpc-face::before), green
   capitals for the tags, the title, the author, the scene count and the
   white button. Rounded, as Dan asked. The rim is a conic gradient turning slowly; it is a
   square spinning behind a ring-shaped window rather than an animated
   gradient angle, so the browser only moves a layer and never repaints it.
   The breathing glow is a blurred copy that only changes opacity, for the
   same reason.

   The rim and the glow wear the ramp without its greens (Dan: no green in
   the outline; on a card green is the app's tag text, and it means done).
   That leaves yellow, teal, blue, indigo and purple, and their order is not
   the ramp's: a gradient blends through the color between two stops, and
   between yellow and teal that is a sage green (#8CBB68 halfway), between
   yellow and blue an olive. So yellow sits next to purple only, the blend
   there is a warm rose, and the rim runs out from yellow through the cool
   colors to teal and back again. */
.bpc {
  position: relative; isolation: isolate;
  height: 150px; border-radius: 16px;
  color: #ffffff; text-align: left;
  font: 400 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
.bpc.bpc-live { transition: transform .12s linear; }
.bpc-glow {
  position: absolute; inset: 8px 4px -2px; z-index: -2; border-radius: 18px;
  background: linear-gradient(115deg, #19B6C9, #2D8CFF, #6577F7, #9B5CF6, #FFC107);
  filter: blur(18px); opacity: .34; pointer-events: none;
}
.bpc-rim {
  position: absolute; inset: -2px; z-index: -1; border-radius: 18px;
  overflow: hidden; pointer-events: none;
}
.bpc-rim::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 165%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--rim, 30deg));
  background: conic-gradient(#FFC107, #9B5CF6, #6577F7, #2D8CFF, #19B6C9, #2D8CFF, #6577F7, #9B5CF6, #FFC107);
}
.bpc-face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  background: #0d0d0d;
}
/* `.bdemo` too, so `.screen img` on the page cannot round or resize it. */
.bpc-face .bpc-art, .bdemo .bpc-face .bpc-art {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0;
}
/* 90% black (Dan, 10-10, after trying 80). It was 60%, the app's project
   card (shoot_day_organizer.dart, _buildProjectCard), to match the cards to
   the project cards; over Dan's photos that left the white title fighting
   the picture. The community card in blueprints_view.dart sits at 75%. */
.bpc-face::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .9);
}
.bpc-body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; padding: 12px;
}
.bpc .bpc-tags, .bpc .bpc-title, .bpc .bpc-by, .bpc .bpc-meta { margin: 0; }
/* The app's AutoScrollingTags: one line that scrolls itself when it does not
   fit. demo.js drives scrollLeft; without it the line simply clips. */
.bpc-tags, .bpc-title { overflow: hidden; white-space: nowrap; }
.bpc-run { display: inline-block; }
.bpc-tags {
  font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: 1px;
  color: #54C43D; text-transform: uppercase;
}
.bpc-tags span span { margin-right: 12px; }
.bpc .bpc-title {
  margin-top: 6px; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.2;
  color: #ffffff; letter-spacing: 0; max-width: none; text-wrap: nowrap;
}
.bpc .bpc-by {
  margin-top: 6px; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.25;
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bpc-foot { margin-top: auto; display: flex; align-items: flex-end; gap: 8px; }
.bpc .bpc-meta {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  color: rgba(255, 255, 255, .7); font-size: 12px; line-height: 1.25;
}
.bpc .bpc-meta span { white-space: nowrap; }
.bpc-act {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px; border: 0; border-radius: 6px;
  background: #ffffff; color: #000000;
  font: 700 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-decoration: none; cursor: pointer;
}
.bpc-act::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid #ffffff; opacity: 0; pointer-events: none;
}
.bpc-act:hover { background: #ececec; }
.bpc-act:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.bpc:hover { --lift: -4px; }

@media (prefers-reduced-motion: no-preference) {
  .bpc-rim::before { animation: bpc-spin 9s linear infinite; }
  .bpc-glow { animation: bpc-breathe 4.6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.1s); }
  .bpc-act::after { animation: bpc-ping 2.6s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: calc(var(--i, 0) * .35s); }
}
@keyframes bpc-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes bpc-breathe {
  from { opacity: .2; }
  to   { opacity: .62; }
}
@keyframes bpc-ping {
  0%   { opacity: .75; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.14, 1.5); }
}

/* ================= 07: the shop =================
   Two columns of cards at staggered heights, floating in the job's purple.
   The bloom is this grid's own; the section's drifting glow is the page's. */
.bp-shop {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; align-items: start;
  padding: 10px 0 34px;
}
.bp-shop::before {
  content: ""; position: absolute; inset: -14% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--jc, #9B5CF6) 30%, transparent), transparent 74%);
  filter: blur(42px);
}
.bp-slot:nth-child(even) { margin-top: 38px; }
.bp-shop .bpc { height: 160px; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .bp-slot { animation: bp-float 7.5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.9s); }
  /* The stagger in: only once the page script is known to be running, which
     is also what adds `.in` when the grid scrolls into view. */
  .js .bp-shop .bpc {
    opacity: 0; translate: 0 26px;
    transition: opacity .7s ease, translate .9s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * .11s), calc(var(--i, 0) * .11s), 0s;
  }
  .js .bp-shop.in .bpc { opacity: 1; translate: none; }
}
@keyframes bp-float {
  from { transform: translateY(-5px); }
  to   { transform: translateY(6px); }
}
.bp-paused .bp-slot, .bp-paused .bpc-rim::before, .bp-paused .bpc-glow, .bp-paused .bpc-act::after {
  animation-play-state: paused;
}
@media (max-width: 620px) {
  .bp-shop { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bp-slot:nth-child(even) { margin-top: 0; }
}

/* ================= 01: the screen =================
   Once the demo has drawn, the frame holds it at 16:9 (9:16 on a phone),
   no taller than the window it is seen in less the page's sticky bar, so a
   sideways phone still sees the whole desk at once.

   Nothing in the frame may move the page (Dan saw it jump when he pressed
   Tasks). Two rules make that structural rather than a matter of care:
   - size containment: the frame is as tall as its width says, and nothing
     drawn inside it can ever change that;
   - no scroll anchor in the demo. A browser keeps the page still across a
     layout change by pinning a node on screen, and one that pinned a node
     in the binder (its pages, say) would scroll the page by the Tasks views
     strip whenever Tasks showed or hid it, and by the header's rows as they
     fold: a move inside the window would read to it as a move on the page.
     Chrome happens to pin something outside the window today; this makes
     it a rule for every browser, the Reset pill under the phone included. */
.binder-stage .screen.bd-live {
  max-width: calc((100vh - 96px) * 16 / 9 + 24px); margin: 0 auto;
  overflow-anchor: none;
}
.bdemo.bd-on {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 12px; background: #000000;
  contain: size layout paint;
}
.bdemo.bd-on > .bdemo-still { display: none; }
@media (max-width: 760px) {
  .binder-stage .screen.bd-live {
    max-width: calc(80vh * 9 / 16 + 20px); padding: 10px; border-radius: 34px;
  }
  .bdemo.bd-on { aspect-ratio: 9 / 16; border-radius: 25px; }
}

/* ---- the canvas: the app's pixels, scaled to the frame ---- */
.bd-canvas {
  --bg: #000000; --surface: #0D0D0D; --raised: #161616; --raised2: #212121;
  --border: #2A2A2A; --border2: #3D3D3D;
  --text: #FFFFFF; --text2: #A3A3A3; --text3: #6B6B6B;
  --green: #54C43D; --deep: #268C45; --acc1: #1C6E38; --acc2: #164420;
  --late: #E5356B; --error: #BE2C3D; --caution: #F5A623; --purple: #791C9D; --gold: #9C791D;
  --ramp: #32C46A, #A6C82E, #FFC107, #19B6C9, #2D8CFF, #6577F7, #9B5CF6, #32C46A;
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  color: var(--text); background: var(--bg);
  font: 400 14px/1.35 var(--sys); text-align: left; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}
/* The resets carry no weight (`:where`), so any one-class rule below wins. */
.bd-canvas *, .bd-canvas *::before, .bd-canvas *::after { box-sizing: border-box; }
:where(.bd-canvas) :where(h4, h5, p, ul, ol, li) { margin: 0; padding: 0; list-style: none; }
:where(.bd-canvas) :where(button, input, select) {
  font: inherit; color: inherit; letter-spacing: inherit; margin: 0;
}
:where(.bd-canvas) button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.bd-canvas) svg { display: block; fill: currentColor; flex: 0 0 auto; }
.bd-canvas [hidden] { display: none !important; }
.bd-canvas :focus { outline: none; }
.bd-canvas :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.bd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Desktop Mode: the wallpaper, the window, the taskbar ---- */
.bd-desk {
  position: absolute; inset: 0;
  background: #000000 url(/img/splash.jpg) center / cover no-repeat;
}
.bd-desk::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .65); }
.bd-win {
  position: absolute; left: 14px; top: 14px; right: 14px; bottom: 70px;
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}
/* The window carries planner data, so it wears the app's spectrum glow
   (SpectrumGlow) — in the page's ramp, never its red and orange. */
.bd-win-glow {
  position: absolute; inset: -3px; border-radius: 13px; overflow: hidden;
  filter: blur(7px); opacity: .55; pointer-events: none;
}
.bd-win-glow::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(20deg);
  background: conic-gradient(var(--ramp));
}
.bd-frame {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; background: var(--bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
/* Black, where the app paints the front window's bar green (see the note at
   the top): white title, grey controls that whiten under the pointer. */
.bd-titlebar {
  flex: 0 0 40px; height: 40px; display: flex; align-items: center;
  padding: 0 6px 0 10px; background: #000000; color: #ffffff;
  border-bottom: 1px solid var(--border2);
}
.bd-glyph {
  display: block; flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.bd-titlebar .bd-glyph { width: 16px; height: 16px; }
.bd-wintitle {
  flex: 1 1 auto; min-width: 0; margin-left: 8px;
  font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-cb {
  width: 34px; height: 40px; padding: 0; border: 0; background: none; color: var(--text2);
  display: grid; place-items: center;
}
.bd-cb svg { width: 17px; height: 17px; }
.bd-cb:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
.bd-cb:focus-visible { outline-offset: -3px; }
.bd-tsread { width: auto; padding: 0 6px; font-size: 11px; font-weight: 700; }
.bd-winbody {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--bg); container-type: inline-size;
  --ts: 1;
  --f10: calc(10px * var(--ts)); --f11: calc(11px * var(--ts)); --f12: calc(12px * var(--ts));
  --f125: calc(12.5px * var(--ts)); --f13: calc(13px * var(--ts)); --f14: calc(14px * var(--ts));
  --f15: calc(15px * var(--ts)); --f16: calc(16px * var(--ts)); --f17: calc(17px * var(--ts));
  --f18: calc(18px * var(--ts)); --f20: calc(20px * var(--ts)); --f24: calc(24px * var(--ts));
  font-size: var(--f14);
}
.bd-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 2;
  display: flex; align-items: stretch;
  background: var(--surface); border-top: 1px solid var(--border2);
}
.bd-start {
  width: 64px; padding: 0; border: 0; background: none; color: #ffffff;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.bd-start svg:first-child { width: 20px; height: 20px; }
.bd-start svg:last-child { width: 18px; height: 18px; color: var(--text2); }
.bd-vdiv { flex: 0 0 1px; background: var(--border2); }
.bd-apps { flex: 1 1 auto; min-width: 0; display: flex; padding: 0 6px; overflow: hidden; }
.bd-app {
  flex: 0 0 54px; width: 54px; margin: 6px 0; padding: 0; border: 0; border-radius: 6px;
  background: none; color: #ffffff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.bd-app:hover { background: rgba(255, 255, 255, .08); }
.bd-app.is-front { background: var(--border2); }
.bd-app .bd-glyph { width: 24px; height: 24px; }
.bd-app b { width: 22px; height: 2px; margin-top: 5px; border-radius: 1px; background: transparent; }
.bd-app.is-open b { background: var(--green); }
.bd-app.is-min b { opacity: .4; }
.bd-clock { width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.bd-clock b { font-size: 14px; font-weight: 700; }
.bd-clock span { font-size: 11px; font-weight: 500; color: var(--text2); }
.bd-win.is-min { transform: translateY(40%) scale(.2); opacity: 0; pointer-events: none; }
.bd-win.is-full { left: 0; top: 0; right: 0; bottom: 0; z-index: 3; }
.bd-win.is-full .bd-frame { border-radius: 0; }
.bd-win.is-full .bd-win-glow { display: none; }

/* ---- the phone: no desk, no window chrome, a status bar ---- */
.bd-status { display: none; }
.bd-phone .bd-desk, .bd-phone .bd-titlebar, .bd-phone .bd-taskbar, .bd-phone .bd-win-glow { display: none; }
.bd-phone .bd-win { left: 0; top: 24px; right: 0; bottom: 0; transform: none; opacity: 1; pointer-events: auto; }
.bd-phone .bd-frame { border-radius: 0; box-shadow: none; }
.bd-phone .bd-status {
  position: absolute; left: 0; right: 0; top: 0; height: 24px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px 0 22px; background: var(--bg);
  font-size: 12px; font-weight: 600;
}
.bd-status span { display: flex; align-items: center; gap: 5px; }
.bd-status svg { width: 15px; height: 15px; }

/* ---- the Blueprints tab (blueprints_view.dart:896-1060) ----
   Its filter row alone: the share button, the search and the sort are the
   app's and are left out here (demo.js says why). */
.bd-view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bd-bphead { flex: 0 0 auto; background: var(--surface); padding: 10px 16px 8px; border-bottom: 1px solid var(--border); }
.bd-chips {
  display: flex; align-items: center; gap: 6px; height: 36px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain;
}
.bd-chips::-webkit-scrollbar { display: none; }
.bd-tchip {
  flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 16px;
  border: 1px solid var(--border2); background: var(--bg); color: var(--text2);
  font-size: var(--f125); white-space: nowrap;
}
.bd-tchip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #ffffff; font-weight: 600; }
.bd-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3D3D3D transparent;
}
.bd-bpscroll { padding: 12px 16px 16px; }
.bd-hint {
  display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%;
  min-height: 30px; margin-bottom: 12px; padding: 5px 14px 5px 10px; border-radius: 15px;
  background: var(--raised); border: 1px solid var(--border2); color: var(--text);
  font-size: var(--f13); font-weight: 600; line-height: 1.25;
}
.bd-hint i {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: conic-gradient(var(--ramp));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}
.bd-bpgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 600px) { .bd-bpgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-bpgrid .bpc { cursor: pointer; }
.bd-pick .bpc { opacity: 0; translate: 0 18px; }
.bd-pick.is-in .bpc {
  opacity: 1; translate: none;
  transition: opacity .55s ease, translate .7s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s;
}
.bd-pick.is-in .bpc.bpc-live { transition: opacity .55s ease, translate .7s cubic-bezier(.2, .7, .2, 1), transform .12s linear; }
.bd-empty { padding: 40px 16px; text-align: center; color: var(--text2); font-size: var(--f14); }

/* ---- the binder ---- */
/* _buildProjectHeader's bar. The app inverts it, white with black ink; here it
   is black with white ink (see the note at the top), parted from the tab
   strip by a hairline, so its own controls carry the contrast: the status
   tile and ON AIR are outlined, and Export is a pill that rings green once
   the binder is built. */
.bd-head {
  flex: 0 0 auto; background: #000000; color: #ffffff; padding: 12px 8px 0;
  border-bottom: 1px solid var(--border);
}
.bd-hrow { display: flex; align-items: center; }
.bd-hb {
  flex: 0 0 auto; padding: 4px 8px; border: 0; border-radius: 20px; background: none; color: #ffffff;
  display: grid; place-items: center; position: relative;
}
.bd-hb svg { width: 24px; height: 24px; }
.bd-hb:hover { background: rgba(255, 255, 255, .1); }
.bd-name {
  flex: 1 1 auto; min-width: 0; font-size: var(--f20); font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-dates {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font-size: var(--f14); white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.bd-dates::-webkit-scrollbar { display: none; }
.bd-dates svg { width: 24px; height: 24px; color: var(--gold); }
.bd-strow { display: flex; align-items: flex-start; gap: 12px; padding: 0 12px; }
.bd-stile {
  flex: 1 1 auto; min-width: 0; border-radius: 8px; overflow: hidden;
  background: var(--raised); color: #ffffff; box-shadow: inset 0 0 0 1px var(--border2);
}
.bd-stile > button {
  width: 100%; height: 40px; padding: 0 12px; border: 0; background: none; color: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--f15);
}
.bd-stile > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-stile > button svg { width: 24px; height: 24px; color: var(--text2); transition: transform .2s ease; }
.bd-stile.is-open > button svg { transform: rotate(180deg); }
.bd-stile > button:focus-visible { outline-color: #ffffff; outline-offset: -4px; }
.bd-stchips { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px; }
.bd-stchip {
  height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border2);
  background: var(--surface); color: var(--text); font-size: var(--f12);
}
.bd-stchip[aria-pressed="true"] { background: #ffffff; color: #000000; border-color: #ffffff; }
.bd-onair {
  flex: 0 0 auto; height: 40px; padding: 0 14px; border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, .78); background: transparent; color: #ffffff;
  font-size: var(--f14); font-weight: 700; letter-spacing: 1.2px;
}
.bd-onair:hover { background: rgba(255, 255, 255, .08); }
.bd-onair[aria-pressed="true"] { background: #ff0000; border-color: #ff0000; color: #ffffff; }
/* Inside its border: the fold below clips at the row's edges, and a ring
   outside the pill would lose its bottom. */
.bd-onair:focus-visible { outline-offset: -6px; }
/* The fold (_isProjectHeaderVisible): the chevron strip puts the dates and
   status rows away and brings them back. The app snaps; here they fold, by
   the dropdowns' one-row grid (0fr to 1fr), so nothing is measured, and
   once folded they are hidden, which takes the status tile and ON AIR out
   of the tab order. The chevron is the app's keyboard_arrow_up, turned to
   point down while the rows are away. demo.js says when it folds. */
.bd-hmore {
  display: grid; grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
}
.bd-hmorei { min-height: 0; overflow: hidden; }
.bd-head.is-shut .bd-hmore {
  grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
}
.bd-chev {
  display: flex; justify-content: center; width: 100%; height: 20px; padding: 0;
  border: 0; background: none; color: var(--text2);
}
.bd-chev:hover { color: #ffffff; }
.bd-chev svg { width: 20px; height: 20px; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.bd-head.is-shut .bd-chev svg { transform: rotate(180deg); }
/* A window too short for a row (the app's rule; demo.js measures it) has
   no such row, folded or not. */
.bd-nodates .bd-dates, .bd-nostatus .bd-strow { display: none; }
/* Export: the glyph and a word, in a pill the black bar sets off. */
.bd-hb.bd-export {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-left: 6px; padding: 0 14px 0 10px;
  border-radius: 18px; background: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  font-size: var(--f13); font-weight: 700; letter-spacing: .2px; white-space: nowrap;
  z-index: 0; isolation: isolate;
}
.bd-hb.bd-export svg { width: 20px; height: 20px; }
.bd-hb.bd-export:hover { background: #262626; }
/* Once the binder is built it is the next thing to do, so it rings in the
   page's green and the ring breathes (a still ring under reduced motion). */
.bd-export.is-glow { box-shadow: inset 0 0 0 1px rgba(50, 196, 106, .55); }
.bd-export.is-glow::before {
  content: ""; position: absolute; inset: -3px; border-radius: 21px; z-index: -1; pointer-events: none;
  box-shadow: 0 0 0 2px #32C46A, 0 0 14px 3px rgba(50, 196, 106, .45);
}
.bd-tip {
  position: absolute; right: 4px; top: calc(100% + 8px); z-index: 12;
  padding: 6px 10px; border-radius: 4px; background: rgba(97, 97, 97, .95); color: #ffffff;
  font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-3px); transition: opacity .15s ease, transform .15s ease;
}
.bd-export:hover .bd-tip, .bd-export:focus-visible .bd-tip { opacity: 1; transform: none; transition-delay: .5s; }
.bd-export:focus-visible .bd-tip { transition-delay: 0s; }

/* The tab strips: text only, centred, scrolling when they do not fit; a grey
   indicator, never the brand green (project_tabs_shell.dart). */
.bd-tabs { flex: 0 0 auto; position: relative; background: var(--bg); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.bd-tabs::-webkit-scrollbar { display: none; }
.bd-tabs-in { position: relative; display: flex; width: max-content; margin: 0 auto; }
.bd-tab {
  height: 46px; padding: 0 16px; border: 0; background: none; color: var(--text2);
  font-size: var(--f14); font-weight: 500; white-space: nowrap;
}
.bd-tab:hover { background: rgba(255, 255, 255, .05); }
.bd-tab[aria-selected="true"] { color: var(--text); }
.bd-tab:focus-visible { outline-offset: -4px; }
.bd-ind {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--text2);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), width .25s cubic-bezier(.4, 0, .2, 1);
}
.bd-pages { position: relative; flex: 1 1 auto; min-height: 0; }
.bd-page { position: absolute; inset: 0; padding-bottom: 28px; }
.bd-col { max-width: 700px; margin: 0 auto; }
.bd-col6 { max-width: 600px; margin: 0 auto; }

/* ---- the holographic shell (holographic_card.dart) ---- */
/* Its own ink variable: the page's --ink is inherited into everything here
   and would put the page's dark ink on a pink card in the light theme. */
.bd-hc {
  --hink: rgba(255, 255, 255, .8);
  position: relative; isolation: isolate; margin: 4px 16px; border-radius: 12px; overflow: hidden;
  background: #0D0D0D url(/img/splash.jpg) center / cover no-repeat; color: var(--hink);
}
.bd-hc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash, rgba(0, 0, 0, .8)); }
.bd-band {
  position: absolute; left: 0; top: 0; bottom: 0; width: 40px; padding-top: 12px;
  display: flex; justify-content: center; align-items: flex-start;
  background: var(--band); color: var(--bink, rgba(255, 255, 255, .8));
}
.bd-band svg { width: 24px; height: 24px; }
.bd-band.is-stripe { width: 12px; padding: 0; }
.bd-hcb { position: relative; padding: 12px; }
.bd-hc.has-band .bd-hcb { padding-left: 52px; }
.bd-hc.has-stripe .bd-hcb { padding-left: 24px; }
.bd-hc.is-light { --hink: rgba(0, 0, 0, .88); }

/* ---- Tasks ---- */
.bd-thead { display: flex; align-items: center; gap: 16px; padding: 16px 16px 8px; }
.bd-ring { position: relative; flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; }
.bd-ring svg { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); fill: none; }
.bd-ring circle { stroke-width: 6.2; }
.bd-ring .bd-ring-t { stroke: rgba(163, 163, 163, .25); }
.bd-ring .bd-ring-v { stroke: var(--rc); stroke-linecap: butt; transition: stroke-dasharray .6s ease, stroke .6s ease; }
.bd-ring b { position: relative; font-size: 15.5px; font-weight: 700; }
.bd-tcount { flex: 1 1 auto; min-width: 0; }
.bd-rem { font-size: var(--f16); font-weight: 700; }
.bd-over { margin-top: 4px; color: var(--caution); font-size: var(--f13); }
.bd-addtask {
  flex: 0 0 auto; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 8px;
  background: var(--border2); color: var(--text); font-size: var(--f14); font-weight: 500;
  display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
.bd-addtask svg { width: 20px; height: 20px; }
.bd-sq {
  flex: 0 0 44px; width: 44px; height: 44px; margin-left: -8px; padding: 0; border: 0; border-radius: 8px;
  background: var(--border2); color: var(--text); display: grid; place-items: center;
}
.bd-sq svg { width: 24px; height: 24px; }
.bd-filters {
  display: flex; gap: 8px; padding: 2px 16px 8px; overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.bd-filters::-webkit-scrollbar { display: none; }
/* appChoiceChip: selected fills with the strongest neutral, not green. */
.bd-fchip {
  flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 16px;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text);
  font-size: var(--f14); white-space: nowrap;
}
.bd-fchip[aria-pressed="true"] { background: #ffffff; border-color: #ffffff; color: rgba(0, 0, 0, .88); }
.bd-tcard .bd-hcb { display: flex; align-items: center; gap: 8px; }
.bd-tmain { flex: 1 1 auto; min-width: 0; }
.bd-tname {
  font-size: var(--f20); font-weight: 500; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-tfoot { display: flex; align-items: center; margin-top: 4px; font-size: var(--f14); min-width: 0; }
.bd-tfoot b { margin-left: 8px; font-weight: 700; }
.bd-tfoot span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tfoot svg { width: 24px; height: 24px; }
/* The owner chip. The app fills "My Team" with the brand green; here green is
   kept for finished work, so My Team is the neutral and Client keeps its
   gold. */
.bd-own {
  flex: 0 0 auto; display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: var(--f11); font-weight: 500; line-height: 1.3; white-space: nowrap;
  background: #1a1a1a; color: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.bd-own.is-client { background: var(--gold); color: rgba(255, 255, 255, .92); box-shadow: none; }
.bd-own.is-both { background: #ffffff; color: rgba(0, 0, 0, .86); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.bd-tact { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bd-tact button {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit;
  display: grid; place-items: center;
}
.bd-tact button svg { width: 34px; height: 34px; }
.bd-tact button:hover { background: rgba(255, 255, 255, .12); }
.is-light .bd-tact button:hover { background: rgba(0, 0, 0, .08); }
.bd-tact .bd-reopen { background: var(--hink); color: var(--wash-solid, #164420); }
.bd-tact .bd-reopen svg { width: 20px; height: 20px; }
.bd-tcard.is-leaving { opacity: 0; transform: translateX(28px); transition: opacity .3s ease, transform .3s ease; }

/* ---- Workback (workback_rows.dart) ---- */
.bd-wbgroup {
  margin: 6px 16px; background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; overflow: hidden;
}
.bd-wbgh { padding: 12px 16px; }
.bd-wbgh h4 { font-size: var(--f16); font-weight: 700; }
.bd-wbgh p { margin-top: 3px; color: var(--text2); font-size: var(--f12); white-space: pre-wrap; }
.bd-wbitem { margin: 0 12px 8px; background: var(--bg); border: 1px solid var(--border2); border-radius: 8px; padding-bottom: 4px; }
.bd-wbih { display: flex; align-items: center; gap: 14px; padding: 10px 14px 8px; }
.bd-wbih > svg { width: 24px; height: 24px; color: var(--border2); }
.bd-wbih-m { flex: 1 1 auto; min-width: 0; }
.bd-wbih-t { display: flex; align-items: center; gap: 8px; font-size: var(--f15); font-weight: 600; }
.bd-wbih-t span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.bd-wbih-s { margin-top: 4px; color: var(--text2); font-size: var(--f12); white-space: pre-wrap; }
/* The list form of the owner chip: a 15% wash and its border. */
.bd-ownl {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 10px; font-size: var(--f11); line-height: 1.3; font-weight: 400;
  color: #d9d9d9; background: rgba(217, 217, 217, .12); border: 1px solid rgba(217, 217, 217, .45);
}
.bd-ownl.is-client { color: #d9b44a; background: rgba(156, 121, 29, .18); border-color: rgba(156, 121, 29, .7); }
.bd-ownl.is-both { color: #ffffff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); }
.bd-wbtask {
  display: flex; align-items: center; gap: 4px; margin: 0 12px 4px 24px; padding: 4px 8px 4px 4px; min-height: 52px;
  border-radius: 8px; border: 1.5px solid var(--border2); background: var(--surface);
}
.bd-wbtask.is-done { background: var(--deep); border-color: transparent; }
.bd-wbtask.is-late { background: var(--late); border-color: transparent; }
.bd-wbtask-m { flex: 1 1 auto; min-width: 0; }
.bd-wbtask-t { display: flex; align-items: baseline; gap: 6px; font-size: var(--f14); font-weight: 500; }
.bd-wbtask-t i { font-style: normal; font-size: var(--f12); font-weight: 600; color: var(--text2); }
.bd-wbtask-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-wbtask-s { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: var(--f11); color: var(--text2); white-space: nowrap; overflow: hidden; }
.bd-wbtask-s span:last-child { min-width: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.bd-wbtask-t .bd-wbanchor { width: 15px; height: 15px; align-self: center; color: var(--text2); }
.bd-wbtask.is-done .bd-wbanchor, .bd-wbtask.is-late .bd-wbanchor { color: rgba(255, 255, 255, .83); }
.bd-wbtask.is-done .bd-wbtask-t span { text-decoration: line-through; }
.bd-wbtask.is-done, .bd-wbtask.is-late { color: #ffffff; }
.bd-wbtask.is-done .bd-wbtask-t i, .bd-wbtask.is-late .bd-wbtask-t i,
.bd-wbtask.is-done .bd-wbtask-s, .bd-wbtask.is-late .bd-wbtask-s { color: rgba(255, 255, 255, .83); }

/* The Material 2 checkbox: an 18px square, filled green once ticked. */
.bd-cbx { position: relative; flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.bd-cbx input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bd-cbx i {
  width: 18px; height: 18px; border-radius: 2px; border: 2px solid var(--text2);
  display: grid; place-items: center; pointer-events: none; transition: background-color .15s ease, border-color .15s ease;
}
.bd-cbx i svg { width: 16px; height: 16px; color: #000000; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.bd-cbx input:checked + i { background: var(--green); border-color: var(--green); }
.bd-cbx input:checked + i svg { opacity: 1; transform: none; }
.bd-cbx input:focus-visible + i { outline: 2px solid #ffffff; outline-offset: 3px; }
.bd-cbx:hover i { box-shadow: 0 0 0 10px rgba(255, 255, 255, .06); }
.is-done .bd-cbx i, .is-late .bd-cbx i { border-color: #ffffff; }

/* ---- dropdowns (demo.js says how they work) ----
   ExpansionTile's chevron: expand_more pointing down while closed, turned
   half a turn once open. The panel's row runs from 0fr to 1fr; visibility
   waits for the close to finish before it hides what was in it. */
.bd-dd {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
}
.bd-dd.is-open {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s;
}
.bd-dd.is-instant { transition: none; }
.bd-ddi { min-height: 0; overflow: hidden; }
.bd-chevi { flex: 0 0 auto; transition: transform .25s ease; }
[aria-expanded="true"] > .bd-chevi { transform: rotate(180deg); }
.bd-sec > h4, .bd-cardh, .bd-hsec > h5 { font: inherit; }

/* ---- Brief ---- */
.bd-sec { border: 0; }
.bd-sech {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px;
  padding: 16px; border: 0; background: none; color: var(--text); text-align: left;
  font-size: var(--f24); font-weight: 600; line-height: 1.2;
}
.bd-sech span { min-width: 0; }
.bd-sech .bd-chevi { width: 24px; height: 24px; color: var(--text2); }
.bd-sech:hover .bd-chevi { color: var(--text); }
.bd-sech:focus-visible { outline-offset: -2px; border-radius: 8px; }
.bd-secb { padding: 0 16px 18px; }
.bd-field { padding: 8px 0 9px; border-bottom: 1px solid var(--border2); }
.bd-field + .bd-field { margin-top: 6px; }
.bd-field label, .bd-field .bd-fl { display: block; color: var(--text2); font-size: var(--f12); }
.bd-field p { margin-top: 3px; color: var(--text); font-size: var(--f16); line-height: 1.4; }
.bd-req { display: flex; align-items: center; gap: 4px; padding: 2px 0; font-size: var(--f15); }
.bd-req.is-done span { color: var(--text2); text-decoration: line-through; }
.bd-hero {
  margin-top: 12px; aspect-ratio: 16 / 7; border-radius: 8px; overflow: hidden; position: relative;
  background: #0D0D0D center / cover no-repeat; border: 1px solid var(--border);
}
.bd-hero span {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 6px;
  background: rgba(0, 0, 0, .66); font-size: var(--f12); font-weight: 600;
}
.bd-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bd-refs span { padding: 3px 9px; border-radius: 7px; background: var(--raised); border: 1px solid var(--border2); font-size: var(--f12); color: var(--text2); }
.bd-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bd-mt { background: var(--surface); border-radius: 8px; padding: 12px; }
.bd-mt span { display: block; color: var(--text2); font-size: var(--f12); }
.bd-mt b { display: block; margin-top: 4px; font-size: var(--f18); font-weight: 700; }
.bd-opts { margin-top: 14px; border-top: 1px solid var(--border); }
.bd-opt { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.bd-opt-m { flex: 1 1 auto; min-width: 0; }
.bd-opt-m b { display: block; font-size: var(--f15); font-weight: 500; }
.bd-opt-m span { display: block; margin-top: 2px; color: var(--text2); font-size: var(--f12); }
.bd-opt > em { font-style: normal; font-size: var(--f15); font-weight: 600; white-space: nowrap; }
.bd-opt.is-off .bd-opt-m b, .bd-opt.is-off > em { color: var(--text2); }
.bd-opt.is-off > em { text-decoration: line-through; }
/* A switch is not done, so it is white when on. */
.bd-sw { position: relative; flex: 0 0 auto; width: 36px; height: 20px; }
.bd-sw input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; }
.bd-sw i { position: absolute; inset: 3px 0; border-radius: 7px; background: #5a5a5a; pointer-events: none; transition: background-color .15s ease; }
.bd-sw i::after {
  content: ""; position: absolute; left: -2px; top: -3px; width: 20px; height: 20px; border-radius: 50%;
  background: #bdbdbd; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: transform .15s ease, background-color .15s ease;
}
.bd-sw input:checked + i { background: rgba(255, 255, 255, .5); }
.bd-sw input:checked + i::after { transform: translateX(18px); background: #ffffff; }
.bd-sw input:focus-visible + i { outline: 2px solid #ffffff; outline-offset: 5px; }
.bd-qnotes { margin-top: 14px; }

/* ---- the binder's cards, open and shut (production_card.dart,
   shoot_day_card.dart, deliverable_card.dart, holographic_card.dart) ---- */
.bd-cardb {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px;
  border: 0; background: none; color: inherit; text-align: left;
}
.bd-cardb:hover { background: rgba(255, 255, 255, .06); }
.bd-card.is-light .bd-cardb:hover { background: rgba(0, 0, 0, .05); }
.bd-cardb:focus-visible { outline-offset: -3px; border-radius: 12px; }
.bd-card.is-light .bd-cardb:focus-visible { outline-color: #000000; }
.bd-cardm { flex: 1 1 auto; min-width: 0; display: block; }
.bd-cardt { display: block; font-size: var(--f16); font-weight: 700; line-height: 1.25; }
.bd-cards { display: block; margin-top: 4px; font-size: var(--f12); line-height: 1.35; }
.bd-cards.is-pre { white-space: pre-wrap; }
.bd-cardx { display: block; margin-top: 2px; font-size: var(--f11); line-height: 1.35; opacity: .85; }
.bd-cardb .bd-chevi { width: 20px; height: 20px; }
.bd-cardb > .bd-glyph { width: 30px; height: 30px; }
.bd-cardb > .bd-cardi { width: 26px; height: 26px; }
/* HolographicBody: the page colour at 78% over the wash, out to the card's
   edges, the artwork still showing through. Toward white on the production's
   near-white wash, where the ink is dark. */
.bd-veil { background: rgba(0, 0, 0, .78); color: #ffffff; padding: 10px 12px 14px; }
.bd-card.is-light .bd-veil { background: rgba(255, 255, 255, .78); color: rgba(0, 0, 0, .88); }

/* ---- Productions ---- */
.bd-prod { --wash: rgba(255, 255, 255, .80); }
.bd-prodc { font-size: var(--f13); font-weight: 600; }
.bd-wfs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bd-wf .bd-glyph { width: 18px; height: 18px; }
.bd-wf {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .22); font-size: var(--f13); font-weight: 600;
}
.bd-wf button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: #000000; color: #ffffff;
  font-size: var(--f12); font-weight: 700;
}
.bd-wf button:focus-visible { outline-color: #000000; }

/* ---- Scenes ---- */
.bd-capstrip { padding: 8px 16px; }
.bd-capline { display: flex; align-items: center; gap: 8px; font-size: var(--f12); color: var(--text2); }
.bd-capline span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-capline b { color: var(--text); }
.bd-bar { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--border2); overflow: hidden; margin-top: 6px; }
.bd-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 2px; background: #E1A83C; }
.bd-bar.is-complete i { background: var(--green); }
.bd-scenes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 8px 16px; }
@container (min-width: 600px) { .bd-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .bd-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A tile is a button now: it opens the scene. */
.bd-scene {
  display: block; width: 100%; padding: 0; text-align: left; color: var(--text);
  background: var(--surface); border: 1px solid rgba(163, 163, 163, .2); border-radius: 12px; overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease;
}
.bd-scene:hover { border-color: rgba(163, 163, 163, .55); background: var(--raised); }
.bd-simg { position: relative; height: 148px; background: #000000; display: grid; place-items: center; }
.bd-simg.has-art { background: #0D0D0D url(/img/splash.jpg) no-repeat; background-size: 240%; }
.bd-simg.has-art::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.bd-simg > svg { width: 44px; height: 44px; color: rgba(163, 163, 163, .4); }
.bd-simg.has-art > svg { display: none; }
.bd-schip {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 10px;
  font-size: var(--f10); font-weight: 700; line-height: 1.25;
}
.bd-schip.is-captured { background: var(--green); color: #ffffff; }
.bd-schip.is-semi { background: #E1A83C; color: #000000; }
.bd-schip.is-not { background: var(--error); color: #ffffff; }
.bd-stakes {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 10px;
  background: rgba(0, 0, 0, .55); font-size: var(--f10); font-weight: 600;
}
/* The scene has a lighting plot: the Lighting Diagram's own mark. */
.bd-slt {
  position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 13px;
  display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #ffffff;
}
.bd-slt .bd-glyph { width: 15px; height: 15px; }
.bd-sb { display: block; padding: 10px 12px 12px; }
.bd-sname { display: block; font-size: var(--f14); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sb .bd-bar { margin-top: 7px; }
.bd-sfoot { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: var(--f11); color: var(--text2); }
.bd-sfoot i { width: 9px; height: 9px; border-radius: 50%; background: #FF3B30; }

/* ---- Shoot Days ---- */
.bd-sd { --wash: rgba(121, 28, 157, .71); }
.bd-sd .bd-veil { padding: 6px 0; }
.bd-sdwhere { padding: 4px 16px 8px; }
.bd-sdsun { font-size: var(--f12); line-height: 1.35; opacity: .85; }
.bd-sdsun + .bd-sdsun { margin-top: 3px; }
/* HolographicSection: an ExpansionTile with its icon leading, a shade deeper
   again (45%) once it is open. */
.bd-hsec { transition: background-color .25s ease; }
.bd-hsec.is-open { background: rgba(0, 0, 0, .45); }
.bd-hsech {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px;
  border: 0; background: none; color: #ffffff; text-align: left; font-size: var(--f15); font-weight: 600;
}
.bd-hsech:hover { background: rgba(255, 255, 255, .05); }
.bd-hsech:focus-visible { outline-offset: -3px; }
.bd-hsech > svg:first-child { width: 20px; height: 20px; color: var(--text2); }
.bd-hsech span { flex: 1 1 auto; min-width: 0; }
.bd-hsech em { flex: 0 0 auto; font-style: normal; font-size: var(--f12); font-weight: 500; color: var(--text2); }
.bd-hsech .bd-chevi { width: 22px; height: 22px; color: var(--text2); }
.bd-hsecb { padding: 0 16px 12px; }
.bd-sdrow { display: flex; gap: 12px; padding: 7px 0 0 32px; font-size: var(--f13); line-height: 1.35; }
.bd-sdrow:first-child, .bd-gear:first-child { padding-top: 0; }
.bd-sdrow > b { flex: 0 0 auto; min-width: 136px; font-weight: 600; white-space: nowrap; }
.bd-sdrow > span { min-width: 0; }
.bd-sdrow small { display: block; font-size: var(--f12); opacity: .82; }
.bd-gear { display: flex; align-items: center; gap: 8px; padding: 6px 0 0 32px; font-size: var(--f13); }
@container (max-width: 520px) {
  .bd-sdrow { flex-direction: column; gap: 1px; }
  .bd-sdrow > b { min-width: 0; }
}
.bd-gear svg { width: 16px; height: 16px; }
.bd-gear .is-wait { opacity: .55; }

/* ---- Deliverables ---- */
.bd-dv { --wash: rgba(156, 121, 29, .71); }
.bd-dv .bd-cardt { font-size: var(--f18); line-height: 1.2; }
.bd-thumb { flex: 0 0 72px; width: 72px; height: 48px; border-radius: 6px; background: #000 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.bd-dvsec { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); }
.bd-veil > .bd-dvsec:first-child { margin-top: 0; padding-top: 2px; border-top: 0; }
.bd-dvst { display: flex; align-items: center; gap: 8px; font-size: var(--f14); font-weight: 600; }
.bd-dvst svg { width: 18px; height: 18px; }
.bd-dvrow { margin-top: 6px; padding-left: 26px; font-size: var(--f13); }
.bd-pill {
  display: inline-block; padding: 2px 9px; border-radius: 10px; margin-left: 6px;
  background: rgba(255, 255, 255, .14); font-size: var(--f11); font-weight: 700; vertical-align: 1px;
}
.bd-fbbar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); margin: 8px 0 0 26px; overflow: hidden; }
.bd-fbbar i { display: block; height: 100%; width: var(--p); background: rgba(255, 255, 255, .85); }

/* ---- Team ---- */
.bd-member {
  display: flex; align-items: center; gap: 12px; margin: 4px 16px; padding: 10px 12px;
  background: var(--surface); border-radius: 8px;
}
.bd-av {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--rc) 20%, transparent); color: var(--rc); font-size: 13px; font-weight: 700;
}
.bd-member-m { flex: 1 1 auto; min-width: 0; }
.bd-member-m b { display: block; font-size: var(--f15); font-weight: 500; }
.bd-member-m span { display: block; margin-top: 1px; color: var(--text2); font-size: var(--f12); }
.bd-tag { padding: 2px 8px; border-radius: 10px; font-size: var(--f11); border: 1px solid var(--border2); color: var(--text2); }
.bd-tag.is-owner { color: var(--green); border-color: rgba(84, 196, 61, .6); background: rgba(84, 196, 61, .12); }
.bd-teamnote { margin: 14px 16px 0; color: var(--text2); font-size: var(--f12); }

/* ---- the build ---- */
.bd-flyme.is-fly { animation: bd-fly .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes bd-fly {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.bd-head.is-enter { animation: bd-drop .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bd-drop {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: 1; transform: none; }
}
.bd-tabs.is-enter { animation: bd-fade .4s ease both; animation-delay: .25s; }
@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }
.bd-ticker {
  position: absolute; left: 50%; bottom: 18px; z-index: 15; transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
  padding: 10px 16px 12px; border-radius: 12px; overflow: hidden;
  background: rgba(22, 22, 22, .94); border: 1px solid var(--border2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
  font-size: 13px; line-height: 1.3; color: var(--text3); white-space: nowrap;
  transition: opacity .35s ease, transform .35s ease;
}
.bd-ticker.is-out { opacity: 0; transform: translate(-50%, 10px); }
.bd-ticker > b { color: var(--text); font-weight: 600; }
.bd-ticker ol { display: flex; align-items: center; gap: 6px; }
.bd-ticker li { display: inline-flex; align-items: center; gap: 4px; transition: color .25s ease; }
.bd-ticker li + li::before { content: "\00B7"; margin-right: 2px; color: var(--text3); }
.bd-ticker li.is-on { color: var(--text); }
.bd-ticker li.is-done { color: var(--text2); }
.bd-ticker li svg { width: 14px; height: 14px; color: var(--text); display: none; }
.bd-ticker li.is-done svg { display: block; }
.bd-ticker::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--ramp)); transition: width .8s linear;
}
.bd-phone .bd-ticker { white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; width: calc(100% - 24px); }
.bd-phone .bd-ticker ol { flex-wrap: wrap; justify-content: center; }

/* ---- dialogs: AlertDialog on a desk, a bottom sheet on a phone ---- */
.bd-scrim {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: 16px 40px; background: rgba(0, 0, 0, .54);
  animation: bd-fade .15s ease both;
}
.bd-dlg {
  position: relative; display: flex; flex-direction: column;
  width: min(100%, var(--dw, 468px)); max-height: 100%; min-height: 0;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55); outline: none;
  animation: bd-pop .2s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes bd-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.bd-dlg-t { flex: 0 0 auto; padding: 24px 24px 0; font-size: var(--f17); font-weight: 700; line-height: 1.3; }
.bd-dlg-c {
  flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 18px 24px 20px; overflow-y: auto; overscroll-behavior: contain;
  color: var(--text2); font-size: var(--f14);
}
.bd-dlg-c.is-fixed { overflow: hidden; }
.bd-dlg-a { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px; }
.bd-dlg-a .bd-grow { margin-right: auto; }
.bd-tb {
  min-width: 64px; height: 36px; padding: 0 10px; border: 0; border-radius: 4px; background: none;
  color: var(--text); font-size: var(--f14); font-weight: 500;
}
.bd-tb:hover { background: rgba(255, 255, 255, .07); }
.bd-tb.is-go { color: var(--green); }
.bd-tb:disabled { color: var(--text2); cursor: default; background: none; }
.bd-tb.is-small { min-width: 0; height: 30px; padding: 0 8px; font-size: var(--f12); }
.bd-tb.is-small:not(:disabled) { color: var(--green); }
.bd-handle { display: none; }
.bd-phone .bd-scrim { place-items: end stretch; padding: 0; }
.bd-phone .bd-dlg {
  width: 100%; max-height: 92%; border-radius: 16px 16px 0 0; border-width: 1px 0 0;
  animation: bd-sheet .26s cubic-bezier(.2, .7, .2, 1) both;
}
.bd-phone .bd-handle { display: block; width: 32px; height: 4px; margin: 10px auto -12px; border-radius: 2px; background: var(--border2); }
.bd-phone .bd-dlg-t { padding-top: 22px; }
.bd-phone .bd-dlg-a { padding-bottom: 14px; }
@keyframes bd-sheet { from { transform: translateY(100%); } to { transform: none; } }

/* ---- a scene, opened: its shot list, script and lighting ----
   The demo's own dialog (demo.js says why), on the wizard's surface. It holds
   one height whichever part is showing, so switching parts never moves the
   tab strip under the pointer; the part scrolls instead. */
.bd-dlg.bd-scdlg { height: min(100%, 600px); }
.bd-scdlg .bd-dlg-t { padding: 20px 24px 0; }
.bd-scdlg .bd-dlg-c { flex: 1 1 auto; padding: 6px 0 0; color: var(--text); }
.bd-scmeta {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 0 24px 8px; color: var(--text2); font-size: var(--f13);
}
.bd-schip.is-static { position: static; }
.bd-sctabs { background: none; border-bottom: 1px solid var(--border); }
.bd-sctabs .bd-tabs-in { margin: 0; padding: 0 12px; }
.bd-sctabs .bd-tab { height: 42px; }
/* Never squeezed to nothing: in a window too short for the whole dialog
   (a phone held sideways) the dialog scrolls instead, as the wizard's does. */
.bd-scps { position: relative; flex: 1 1 auto; min-height: 150px; }
.bd-scp { position: absolute; inset: 0; padding: 14px 24px 18px; }
.bd-scp:focus-visible { outline-offset: -3px; }
/* The shot list: the code chip, the shot, and a tick that turns green only
   once the shot is filmed. */
.bd-shots { display: flex; flex-direction: column; gap: 6px; }
.bd-shot {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 10px;
  border-radius: 10px; background: var(--raised); border: 1px solid var(--border);
}
.bd-scode {
  flex: 0 0 auto; min-width: 40px; height: 26px; padding: 0 8px; border-radius: 7px;
  display: grid; place-items: center; background: var(--raised2); border: 1px solid var(--border2);
  font-size: var(--f12); font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.bd-shm { flex: 1 1 auto; min-width: 0; }
.bd-sht { display: block; font-size: var(--f14); font-weight: 500; line-height: 1.3; }
.bd-shd { display: block; margin-top: 2px; color: var(--text2); font-size: var(--f12); line-height: 1.35; }
.bd-shtick {
  position: relative; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--border2); color: #ffffff;
}
.bd-shtick svg { width: 15px; height: 15px; }
.bd-shot.is-filmed .bd-shtick { background: var(--green); border-color: var(--green); }
/* The script: set to be read, a measure short of the dialog's width. */
.bd-script { max-width: 62ch; color: var(--text); font-size: var(--f15); line-height: 1.6; }
.bd-script p + p { margin-top: 12px; }
.bd-cue { font-size: .9em; font-weight: 700; letter-spacing: .4px; }
.bd-slug { color: var(--text2); font-size: .86em; font-weight: 700; letter-spacing: .6px; }
/* The lighting diagram, and the way to see it larger. `.bd-canvas` in front
   because the page's `.screen img` would otherwise round and resize it. */
/* Stacked in a narrow part; with room, the summary sits beside a taller
   diagram, as a caption does. */
.bd-lt { container-type: inline-size; }
.bd-ltin { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bd-ltside { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* The button wraps the diagram at its own shape, whatever that is, no wider
   than the part and no taller than leaves the summary in view. */
.bd-lthumb {
  position: relative; display: block; max-width: 100%; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--border2); border-radius: 10px; background: var(--raised2);
}
.bd-canvas .bd-lthumb img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 230px; border-radius: 0;
}
.bd-lthumb:hover { border-color: var(--text2); }
.bd-lthumb:focus-visible { outline-offset: 2px; }
.bd-lzhint {
  position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 15px;
  display: grid; place-items: center; background: rgba(0, 0, 0, .66); color: #ffffff;
}
.bd-lzhint svg { width: 18px; height: 18px; }
.bd-ltsum { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: var(--f14); line-height: 1.45; }
.bd-ltsum .bd-glyph { width: 18px; height: 18px; margin-top: 1px; color: var(--text2); }
.bd-lttool { margin-left: -8px; }
@container (min-width: 500px) {
  .bd-ltin { flex-direction: row; gap: 18px; }
  .bd-canvas .bd-lthumb img { max-height: 280px; }
  .bd-ltside { flex: 1 1 0; padding-top: 4px; }
}
/* Larger: the dialog takes the window, the overlay takes the dialog. */
.bd-dlg.bd-scdlg.is-zoom { width: 100%; height: 100%; }
.bd-lzoom {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  border-radius: inherit; overflow: hidden; background: var(--surface);
  animation: bd-fade .18s ease both;
}
.bd-lzbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--border); }
.bd-lzt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--f14); font-weight: 600; }
.bd-lzt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-lzt .bd-glyph { width: 18px; height: 18px; color: var(--text2); }
.bd-lzx {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text); display: grid; place-items: center;
}
.bd-lzx:hover { background: rgba(255, 255, 255, .08); }
.bd-lzx svg { width: 22px; height: 22px; }
/* The plots are drawn on #212121, so what is round one is the same. */
.bd-lzpan { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--raised2); }
.bd-lzpan:focus-visible { outline-offset: -3px; }
.bd-canvas .bd-lzpan img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  padding: 12px; object-fit: contain; border-radius: 0; cursor: zoom-in;
}
/* Actual size: the plot at the pixels it was drawn in, to pan around. */
.bd-canvas .bd-lzpan.is-actual img {
  position: static; width: auto; height: auto; max-height: none; cursor: zoom-out;
}
.bd-lzsize { flex: 0 0 auto; }
/* A phone is narrower than the plot is wide, so fitted there it fills the
   height and pans sideways: fitted to the width it would be the size the
   thumbnail already is. */
.bd-canvas.bd-phone .bd-lzpan:not(.is-actual) img {
  position: static; width: auto; height: 100%; margin: 0 auto; padding: 8px;
}
.bd-lzsum { flex: 0 0 auto; padding: 10px 16px 14px; border-top: 1px solid var(--border); color: var(--text2); font-size: var(--f13); line-height: 1.4; }
.bd-phone .bd-dlg.bd-scdlg { height: 88%; }
.bd-phone .bd-dlg.bd-scdlg.is-zoom { height: 100%; max-height: 100%; border-radius: 0; }
.bd-phone .bd-scdlg .bd-dlg-t { padding: 22px 16px 0; }
.bd-phone .bd-scmeta { padding: 0 16px 8px; }
.bd-phone .bd-scp { padding: 12px 16px 16px; }
.bd-nostatus .bd-dlg.bd-scdlg { height: 100%; }

/* Export Project Binder: the five rows (export_options_sheet.dart:67-152). */
.bd-xrow {
  display: flex; align-items: center; gap: 32px; width: 100%; min-height: 56px; padding: 7px 16px;
  border: 0; border-radius: 4px; background: none; color: var(--text); text-align: left;
}
.bd-xrow > svg { width: 24px; height: 24px; }
.bd-xrow span { display: block; min-width: 0; }
.bd-xrow b { display: block; font-size: var(--f15); font-weight: 400; }
.bd-xrow small { display: block; margin-top: 2px; color: var(--text2); font-size: var(--f12); line-height: 1.35; }
.bd-xrow:hover { background: rgba(255, 255, 255, .06); }
.bd-xrow[aria-disabled="true"] { opacity: .38; cursor: default; }
.bd-xrow[aria-disabled="true"]:hover { background: none; }
.bd-xrow.is-live { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.bd-xrow.is-live > svg, .bd-xrow .is-g { color: var(--green); }
.bd-xrow .is-r { color: var(--error); }
.bd-xdiv { height: 1px; margin: 3px 0; background: rgba(163, 163, 163, .3); }
.bd-xlist { margin: -8px -24px -4px; padding: 0 8px; }

/* What can the client see? (section_picker_body.dart) */
.bd-sphint {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px;
  border-radius: 8px; background: var(--bg); color: var(--text2); font-size: var(--f12); line-height: 1.35;
}
.bd-sphint svg { width: 18px; height: 18px; }
.bd-spcount { flex: 0 0 auto; display: flex; align-items: center; margin-top: 8px; }
.bd-spcount > span { flex: 1 1 auto; color: var(--text2); font-size: var(--f12); font-weight: 600; }
.bd-splist {
  position: relative; flex: 0 1 auto; min-height: 140px; max-height: 420px; margin-top: 4px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3D3D3D transparent;
}
.bd-sprow {
  position: relative; display: flex; align-items: center; height: 56px; background: var(--surface);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.bd-sprow label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; height: 100%; cursor: pointer; }
.bd-sprow label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--f16); }
.bd-sprow.is-off label span { color: var(--text2); }
.bd-sprow .bd-cbx { margin-left: -11px; }
.bd-grip {
  flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--text2); display: grid; place-items: center; cursor: grab; touch-action: none;
}
.bd-grip svg { width: 24px; height: 24px; }
.bd-grip:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.bd-splist.is-dragging .bd-sprow { transition: transform .18s ease; }
.bd-splist.is-dragging, .bd-splist.is-dragging * { cursor: grabbing; }
.bd-sprow.is-drag {
  z-index: 3; transition: none !important; background: var(--raised2);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .6); border-radius: 6px;
}
.bd-sprow.is-moved { animation: bd-moved .7s ease; }
/* A window too short for the dialog (a phone held sideways): the dialog
   takes the whole body and scrolls, rather than hiding its own buttons. */
.bd-nostatus .bd-scrim { padding: 8px 24px; }
.bd-nostatus .bd-dlg-t { padding-top: 14px; }
.bd-nostatus .bd-dlg-c { padding-top: 10px; padding-bottom: 10px; }
.bd-nostatus .bd-dlg-c.is-fixed { overflow-y: auto; }
.bd-nostatus .bd-splist { flex: 0 0 auto; min-height: 112px; height: 112px; }
.bd-nostatus .bd-sphint { display: none; }
.bd-nostatus .bd-dlg-a { padding: 4px 8px; }
@keyframes bd-moved { from { background: #2c2c2c; } to { background: var(--surface); } }
.bd-spfoot { flex: 0 0 auto; margin-top: 8px; color: var(--text2); font-size: var(--f12); line-height: 1.35; }

/* Who can open this? / Name and lifetime */
.bd-radio { display: flex; align-items: flex-start; gap: 16px; padding: 8px 0; cursor: pointer; }
.bd-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bd-radio i {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--text2);
  display: grid; place-items: center; transition: border-color .15s ease;
}
.bd-radio i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); transform: scale(0); transition: transform .15s ease; }
.bd-radio input:checked + i { border-color: var(--green); }
.bd-radio input:checked + i::after { transform: none; }
.bd-radio input:focus-visible + i { outline: 2px solid #ffffff; outline-offset: 3px; }
.bd-radio span { min-width: 0; }
.bd-radio b { display: block; color: var(--text); font-size: var(--f15); font-weight: 600; }
.bd-radio small { display: block; margin-top: 2px; color: var(--text2); font-size: var(--f12); line-height: 1.4; }
.bd-tf { position: relative; margin-top: 8px; padding-top: 16px; border-bottom: 1px solid var(--text2); }
.bd-tf:focus-within { border-bottom: 2px solid #ffffff; padding-bottom: 0; margin-bottom: -1px; }
/* The thickened white underline is the field's focus mark, as in the app; a
   box round it as well would cross the floating label. */
.bd-tf input:focus-visible, .bd-tf select:focus-visible { outline: none; }
.bd-tf label { position: absolute; left: 0; top: 0; color: var(--text2); font-size: var(--f12); }
.bd-tf input, .bd-tf select {
  display: block; width: 100%; height: 36px; padding: 0 76px 0 0; border: 0; background: transparent;
  color: var(--text); font-size: var(--f16);
}
.bd-tf select { -webkit-appearance: none; appearance: none; padding-right: 28px; cursor: pointer; }
.bd-tf select option { background: var(--surface); }
.bd-tf.is-plain input { padding-right: 0; }
.bd-tf > svg { position: absolute; right: 0; bottom: 6px; width: 24px; height: 24px; color: var(--text2); pointer-events: none; }
.bd-tfx { position: absolute; right: 0; bottom: 2px; display: flex; }
.bd-tfx button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text2); display: grid; place-items: center; }
.bd-tfx button:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.bd-tfx svg { width: 19px; height: 19px; }
.bd-help { margin-top: 6px; color: var(--text2); font-size: var(--f11); line-height: 1.4; }
.bd-err { margin-top: 6px; color: #ff8a80; font-size: var(--f12); }
.bd-teamline { margin-top: 12px; color: var(--text2); font-size: var(--f12); font-weight: 600; }
.bd-teamrow { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--text); font-size: var(--f12); }
.bd-teamrow svg { width: 14px; height: 14px; color: var(--text2); }
.bd-teamrow em { margin-left: auto; font-style: normal; color: var(--text2); font-size: var(--f11); }

/* The publish, as its five steps (publish_progress_view.dart). Ticks in ink:
   a file finishing its upload is not an approval. */
.bd-steps li { display: flex; align-items: center; gap: 12px; padding: 3px 0; color: var(--text2); font-size: var(--f13); }
.bd-steps li.is-done, .bd-steps li.is-cur { color: var(--text); }
.bd-steps li.is-cur { font-weight: 600; }
.bd-mark { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; }
.bd-mark svg { width: 14px; height: 14px; }
.bd-mark i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border2); }
.bd-mark u { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #ffffff; border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .bd-mark u { animation: bd-spin .8s linear infinite; }
}
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-live-url {
  color: var(--green); font-size: var(--f13); line-height: 1.4; word-break: break-all;
  -webkit-user-select: text; user-select: text; cursor: text;
}
/* Demo-only, so it is dressed apart from the app's own buttons: white, in a
   ring of the page's ramp (a gradient border-box under a white padding-box). */
.bd-open {
  height: 36px; padding: 0 14px; border: 2px solid transparent; border-radius: 9px;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, var(--ramp)) border-box;
  color: #000000; font-size: var(--f14); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.bd-open svg { width: 17px; height: 17px; }
.bd-open:hover { background: linear-gradient(#ececec, #ececec) padding-box, linear-gradient(90deg, var(--ramp)) border-box; }
.bd-open:focus-visible { outline-offset: 3px; }

/* ---- the link, opened: a browser window inside the window ---- */
.bd-link { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; background: #0b0c0a; animation: bd-fade .2s ease both; }
.bd-lbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #1a1d16; border-bottom: 1px solid #2e332a;
}
.bd-lbar > i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #3a3f35; }
.bd-lbar > i:nth-child(1) { background: #ff5f57; }
.bd-lbar > i:nth-child(2) { background: #febc2e; }
.bd-lbar > i:nth-child(3) { background: #28c840; }
.bd-lurl {
  flex: 0 1 auto; min-width: 0; margin: 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 16px; border-radius: 8px; background: #0f110d; color: #a8afa1;
  font: 500 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden;
}
.bd-lurl svg { width: 11px; height: 11px; }
.bd-lurl span { overflow: hidden; text-overflow: ellipsis; }
.bd-back {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px;
  border: 0; border-radius: 8px; background: #2e332a; color: #f2f4ee; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.bd-back svg { width: 16px; height: 16px; }
.bd-back:hover { background: #3a4034; }
.bd-link iframe { flex: 1 1 auto; display: block; width: 100%; min-height: 0; border: 0; background: #ffffff; }
.bd-phone .bd-lbar > i { display: none; }
.bd-phone .bd-lurl { margin: 0 0 0 4px; flex: 1 1 auto; padding: 7px 10px; }

/* ---- demo chrome outside the app: the reset pill, the live region ---- */
.bd-reset {
  /* On the frame, over the taskbar's empty stretch left of the clock (the
     frame's 12px bezel, then the scaled taskbar): the one place on a desk
     where it covers nothing of the app. */
  position: absolute; z-index: 60;
  right: calc(12px + 86px * var(--s, 1) + 10px); bottom: calc(12px + (56px * var(--s, 1) - 34px) / 2);
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px;
  border-radius: 17px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(12, 13, 11, .84); color: #ffffff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.bd-reset svg { width: 16px; height: 16px; fill: currentColor; }
.bd-reset:hover { background: rgba(40, 42, 38, .92); }
.bd-reset:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.bd-reset[hidden] { display: inline-flex; opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
/* Under the phone, at its right: a phone has no empty stretch to spare. */
.screen.is-phone > .bd-reset { right: 6px; bottom: -50px; }
.bd-toast {
  position: absolute; left: 50%; bottom: 22px; z-index: 50; max-width: calc(100% - 32px);
  padding: 11px 16px; border-radius: 8px; background: var(--raised2); border: 1px solid var(--border2);
  color: var(--text); font-size: 14px; line-height: 1.35; text-align: center;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.bd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .bd-win-glow::before { animation: bd-turn 14s linear infinite; }
  .bd-export.is-glow::before { animation: bd-glow 2.4s ease-in-out infinite; }
  .bd-hint i { animation: bd-dot 3s linear infinite; }
}
@keyframes bd-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.bd-hint i { transform-origin: center; }
@keyframes bd-dot { to { transform: rotate(360deg); } }
@keyframes bd-glow {
  50% { box-shadow: 0 0 0 2px #32C46A, 0 0 24px 8px rgba(50, 196, 106, .72); }
}
.bd-paused *, .bd-paused *::before, .bd-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .bpc, .bpc.bpc-live { transform: none; transition: none; }
  /* Nothing scrolls by itself here, so a long line can be swiped instead. */
  .bpc-tags, .bpc .bpc-title { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .bpc-tags::-webkit-scrollbar, .bpc .bpc-title::-webkit-scrollbar { display: none; }
  .bd-pick .bpc, .bd-pick.is-in .bpc { opacity: 1; translate: none; transition: none; }
  .bd-win, .bd-ind, .bd-ring .bd-ring-v, .bd-toast, .bd-reset, .bd-ticker, .bd-stile > button svg { transition: none; }
  .bd-dd, .bd-dd.is-open, .bd-chevi, .bd-hsec, .bd-scene { transition: none; }
  .bd-hmore, .bd-head.is-shut .bd-hmore, .bd-chev svg { transition: none; }
  .bd-scrim, .bd-dlg, .bd-phone .bd-dlg, .bd-link, .bd-flyme.is-fly, .bd-head.is-enter, .bd-tabs.is-enter, .bd-sprow.is-moved, .bd-lzoom { animation: none; }
  .bd-splist.is-dragging .bd-sprow, .bd-tcard.is-leaving { transition: none; }
}