/* ==========================================================================
   Build It / See It: the agenda builder on the home page, and the published
   event site reading whatever it says. Loaded by index.html only.
   Built 2026-09-17 from mockups/build-it-see-it.html.
   ========================================================================== */
/* ============================================================== Build It / See It
   A mockup of the interactive pair for wedoyourevents.com. LEFT/TOP is a working copy of the
   studio's agenda builder; BELOW it is the published event site rendering the SAME data, run by
   the event site's own engine (site.js from the live host) so what you see is what it ships.
   Seed: the real 2027 WDYE Conference.                                                       */
.bis { padding: 56px 0; --pen: 252px; --gut: 52px; --ppm: 0.8; --slot: 12px; --line: #e6e6e6; --ink: #1f1e1e;
  --soft: #5f5d5d; --faint: #8a8888; --indigo: #6616d0; --surface: #f4f0fa; --amber: #b45309; }
.bis .app-head .lede b { font-weight: 800; color: var(--ink); }
.bis .bis-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 4px rgba(31,30,30,.06), 0 24px 56px -16px rgba(31,30,30,.18); overflow: hidden; }
.bis .bis-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
/* two tabs, not two boxes: stacked they ran 1,500px, and the point is the switch anyway */
.bis .bis-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line); }
.bis .bis-tab { position: relative; text-align: left; font: inherit; background: none; border: 0; padding: 15px 20px 14px; cursor: pointer; display: block; }
.bis .bis-tab + .bis-tab { border-left: 1px solid var(--line); }
.bis .bis-tab b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.015em; color: var(--soft); margin-top: 7px; }
.bis .bis-tab i { display: block; font-style: normal; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.bis .bis-tab .bis-tag { background: #d9d5e4; color: #6d6a78; }
.bis .bis-tab.on { background: #fff; box-shadow: inset 0 -3px 0 var(--indigo); }
.bis .bis-tab.on b { color: var(--ink); }
.bis .bis-tab.on .bis-tag { background: var(--indigo); color: #fff; }
.bis .bis-tab.on .bis-tag--alt { background: #0f766e; }
.bis .bis-tab:hover:not(.on) { background: color-mix(in srgb, var(--indigo) 5%, var(--surface)); }
/* the builder changed while you were looking at it, so the other tab says so */
.bis .bis-new { position: absolute; top: 13px; right: 16px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #0f766e; border-radius: 999px; padding: 3px 9px; animation: bisPulse 1.6s ease-in-out infinite; }
@keyframes bisPulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .bis .bis-new { animation: none; } }
/* the reset belongs to the builder, not to the pair of tabs, so it rides the toolbar */
.bis .ab-bar .bis-reset { margin-left: auto; padding: 6px 13px; }
.bis .bis-pane { display: none; }
.bis .bis-pane.on { display: block; }
.bis .bis-tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--indigo); border-radius: 999px; padding: 5px 12px; }
.bis .bis-head b { font-size: 15.5px; letter-spacing: -.01em; }
.bis .bis-hint { font-size: 13px; color: var(--soft); flex: 1 1 260px; }
.bis .bis-reset { margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; color: var(--indigo); background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.bis .bis-reset:hover { border-color: var(--indigo); }
.bis .bis-seam { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 18px 0; color: var(--faint); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bis .bis-seam::before, .bis .bis-seam::after { content: ""; height: 1px; flex: 1 1 auto; background: linear-gradient(to right, transparent, var(--line), transparent); }

/* ---- the builder ---- */
.ab { display: grid; grid-template-columns: var(--pen) minmax(0, 1fr); min-height: 612px; }
.ab-pen { border-right: 1px solid var(--line); background: #fbfafd; padding: 14px 12px 18px; }
.ab-pen.drop { background: color-mix(in srgb, var(--indigo) 7%, #fbfafd); }
.ab-pen-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); margin: 0 2px 10px; }
.ab-pen-h span { font-weight: 700; color: var(--faint); }
.ab-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ab-filters button { font: inherit; font-size: 11px; font-weight: 700; color: var(--soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.ab-filters button.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ab-pen-list { display: grid; gap: 7px; max-height: 492px; overflow: auto; padding-right: 2px; }
.pen-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--faint); border-radius: 9px; padding: 8px 10px; cursor: grab; touch-action: none; box-shadow: 0 1px 2px rgba(31,30,30,.05); }
.pen-card:hover { border-color: #cfd2dc; box-shadow: 0 4px 12px -4px rgba(31,30,30,.2); }
.pen-card b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.pen-card i { display: block; font-style: normal; font-size: 11px; color: var(--faint); margin-top: 3px; }
.ab-empty { font-size: 12px; color: var(--faint); padding: 10px 2px; }

.ab-cal { min-width: 0; display: flex; flex-direction: column; }
.ab-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.ab-seg { display: inline-flex; background: var(--surface); border-radius: 8px; padding: 2px; }
.ab-seg button { font: inherit; font-size: 12px; font-weight: 700; color: var(--soft); padding: 4px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.ab-seg button.on { background: #fff; color: var(--indigo); box-shadow: 0 1px 2px rgba(31,30,30,.12); }

/* ---- the list view: the same schedule, read down the page ---- */
.ab-list { padding: 4px 0 10px; }
.list-day { border-bottom: 1px solid var(--line); }
.list-day.over { background: color-mix(in srgb, var(--indigo) 5%, #fff); }
.ld-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 9px; padding: 9px 16px; background: #fbfafd; border-bottom: 1px solid var(--line); }
.ld-head b { font-size: 13px; letter-spacing: -.01em; }
.ld-head span { font-size: 11.5px; color: var(--faint); }
.ld-empty { margin: 0; padding: 14px 16px; font-size: 12.5px; color: var(--faint); }
.lrow { display: grid; grid-template-columns: 96px minmax(0, 1.5fr) 150px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 9px 16px; border-top: 1px solid #f4f4f7; cursor: grab; touch-action: none; }
.lrow:first-of-type { border-top: 0; }
.lrow:hover { background: #fbfafd; }
.lrow.clash { box-shadow: inset 3px 0 0 var(--amber); background: rgba(180,83,9,.05); }
.lr-time b { display: block; font-size: 12.5px; font-weight: 700; }
.lr-time i { font-style: normal; font-size: 11px; color: var(--faint); }
.lr-main b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.lr-main i { font-style: normal; font-size: 11.5px; color: var(--faint); }
.lr-key { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); margin-left: 7px; }
.lr-track { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--soft); }
.lr-track em { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: none; }
.lr-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-ava { display: flex; }
.lr-ava img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; margin-left: -5px; }
.lr-ava img:first-child { margin-left: 0; }
.lr-who i { font-style: normal; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1080px) { .lrow { grid-template-columns: 88px minmax(0, 1fr) 130px; } .lr-who { display: none; } }
.ab-pager { display: inline-flex; align-items: center; gap: 2px; }
.ab-pager b { font-size: 12px; font-weight: 700; color: var(--soft); min-width: 108px; text-align: center; }
.ab-pager button { font: inherit; font-size: 15px; line-height: 1; color: var(--soft); background: #fff; border: 1px solid var(--line); border-radius: 7px; width: 26px; height: 26px; cursor: pointer; }
.ab-pager button:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo); }
.ab-pager button:disabled { opacity: .35; cursor: default; }
.ab-clash { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 11px; }
.ab-clash.ok { color: #0b6b60; background: rgba(20,184,166,.13); }
.ab-clash.bad { color: var(--amber); background: rgba(180,83,9,.12); }
.ab-note { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.ab-bar .ab-note + .bis-reset { margin-left: 14px; }
/* fifteen hours of day would make the box 1,100px tall, so the grid scrolls inside itself */
.ab-grid { position: relative; overflow: auto; flex: 1 1 auto; max-height: 566px; scrollbar-width: thin; }
.ab-head { display: grid; grid-template-columns: var(--gut) repeat(var(--days), minmax(0, 1fr)); position: sticky; top: 0; z-index: 4; background: #fff; border-bottom: 1px solid var(--line); }
.ab-head div { padding: 7px 8px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--soft); border-left: 1px solid var(--line); }
.ab-head div:first-child { border-left: 0; }
.ab-head b { display: block; font-size: 13px; color: var(--ink); }
.ab-body { display: grid; grid-template-columns: var(--gut) repeat(var(--days), minmax(0, 1fr)); position: relative; }
.ab-gut { position: relative; }
.ab-gut span { position: absolute; right: 6px; font-size: 10.5px; color: var(--faint); transform: translateY(-6px); }
.day-col { position: relative; border-left: 1px solid var(--line); }
.day-col.over { background: color-mix(in srgb, var(--indigo) 5%, #fff); }
.hourline { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.hourline.half { background: #f2f2f5; }
.blk { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 5px 7px; font-size: 11px; line-height: 1.25; color: #1f2440; overflow: hidden; cursor: grab; touch-action: none;
  background: color-mix(in srgb, var(--c) 13%, #fff); border: 1px solid color-mix(in srgb, var(--c) 55%, #fff); border-left: 3px solid var(--c); box-shadow: 0 1px 2px rgba(31,30,30,.06); }
.blk:hover { box-shadow: 0 6px 16px -6px rgba(31,30,30,.35); z-index: 3; }
.blk.drag { opacity: .92; z-index: 6; cursor: grabbing; box-shadow: 0 18px 34px -14px rgba(31,30,30,.5); }
.blk.clash { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.blk b { display: block; font-weight: 700; font-size: 11.5px; letter-spacing: -.01em; }
.blk i { font-style: normal; color: #5b6070; }
.blk .blk-t { display: block; font-weight: 700; color: color-mix(in srgb, var(--c) 78%, #1f2440); font-size: 10.5px; }
.blk .blk-ava { display: flex; gap: 2px; margin-top: 3px; }
.blk .blk-ava img { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; border: 1px solid #fff; }
.blk .blk-k { position: absolute; top: 4px; right: 5px; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--amber); }
.blk-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.blk-grip::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c) 45%, #fff); transform: translateX(-50%); }
.ghost { position: fixed; z-index: 40; pointer-events: none; opacity: .95; }

/* ---- the editor ---- */
.ed { position: fixed; z-index: 50; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px -16px rgba(31,30,30,.42); padding: 14px; font-size: 13px; }
.ed h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: -.01em; }
.ed label { display: block; font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 4px; }
.ed input[type=text], .ed select { width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ed input[type=text]:focus, .ed select:focus { outline: 2px solid color-mix(in srgb, var(--indigo) 45%, transparent); outline-offset: 1px; border-color: var(--indigo); }
.ed .ed-people { display: grid; gap: 4px; max-height: 132px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 7px; }
.ed .ed-people label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ed .ed-row { display: flex; gap: 10px; }
.ed .ed-row > * { flex: 1 1 0; }
.ed .ed-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ed .ed-foot button { font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 7px 12px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.ed .ed-x { margin-left: auto; background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ed .ed-pull { color: var(--amber); }

/* ---- see it ---- */
.see-frame { background: #0d0b1a; }
/* the two panes are within a few pixels of each other, so switching tabs does not jump the page */
.see-frame iframe { display: block; width: 100%; height: 578px; border: 0; }
.see-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.see-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.see-url { margin-left: 6px; background: var(--surface); border-radius: 6px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: var(--soft); }
.see-url b { color: var(--indigo); }
.see-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #0b6b60; }
.see-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #14b8a6; }
.see-live.busy::before { background: #d97706; }
/* the See It tab's title is a domain, and a 390px screen gives each tab 170px to hold one */
@media (max-width: 620px) {
  .bis .bis-tab { padding: 12px 12px 11px; }
  .bis .bis-tab b { font-size: 13px; margin-top: 5px; overflow-wrap: anywhere; }
  .bis .bis-tab i { font-size: 11px; }
  .bis .bis-tag { font-size: 10px; padding: 4px 9px; }
  .bis .bis-new { top: 9px; right: 9px; font-size: 9.5px; padding: 2px 7px; }
  .bis .ab-bar { flex-wrap: wrap; row-gap: 8px; }
  .bis .ab-bar .ab-note { display: none; }
  .bis .ab-bar .bis-reset { margin-left: auto; }
}
@media (max-width: 980px) {
  .bis .ab { grid-template-columns: minmax(0, 1fr); }
  .bis .ab-pen { border-right: 0; border-bottom: 1px solid var(--line); }
  .bis .ab-pen-list { max-height: 210px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .see-frame iframe { height: 460px; }
}

/* ==========================================================================
   Build It / See It #2: the bulletin tool, and the attendee app reading it.
   The builder follows the house setting-box shape (a box per setting, the
   explanation above the control, the control sized to its data), and the
   preview is the real event app behind the canonical device frame.
   ========================================================================== */
.bis-app { --setbox: #f1eef8; --setbox-line: #ddd7ea; }

/* Posted on the left, the composer on the right: the same rail-and-work shape the
   agenda pair uses, so switching between the two sections does not re-teach the page. */
.bl { display: grid; grid-template-columns: var(--pen) minmax(0, 1fr); min-height: 612px; }
.bl-side { border-right: 1px solid var(--line); background: #fbfafd; padding: 14px 12px 18px; }
.bl-side-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); margin: 0 2px 10px; }
.bl-side-h span { font-weight: 700; color: var(--faint); }
.bl-list { display: grid; gap: 7px; max-height: 560px; overflow: auto; padding-right: 2px; }
.bl-empty { font-size: 12px; line-height: 1.5; color: var(--faint); padding: 8px 2px; margin: 0; text-wrap: pretty; }
.bl-row { position: relative; background: #fff; border: 1px solid var(--line); border-left: 3px solid #9b96a8; border-radius: 9px; padding: 8px 26px 9px 10px; box-shadow: 0 1px 2px rgba(31,30,30,.05); }
.bl-row.dark { border-left-color: #3f3b4b; }
.bl-row.alert { border-left-color: #c0392b; }
.bl-row b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.bl-row i { display: block; font-style: normal; font-size: 11px; color: var(--faint); margin-top: 3px; }
.bl-state { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; }
.bl-state.live { background: #e4f4ef; color: #0b6b60; }
.bl-state.sched { background: #fdf3e3; color: #92600b; }
.bl-state.dead { background: #f1f0f3; color: #86838d; }
.bl-del { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; font: inherit; font-size: 11px; line-height: 1; color: var(--faint); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.bl-del:hover { background: #f3f0f8; color: #c0392b; }

.bl-main { min-width: 0; display: flex; flex-direction: column; }
.bl-bar { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bl-bar-t { font-size: 13px; font-weight: 800; color: var(--ink); }
.bl-bar-n { font-size: 12px; color: var(--faint); }
.bl-form { padding: 18px 16px 20px; }

/* write it: a full-width field is right for a sentence, and only for a sentence */
.bl-write { margin-bottom: 18px; }
.bl-lab { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.bl-write .bl-lab + .bl-in + .bl-lab { margin-top: 16px; }
.bl-in { font: inherit; font-size: 13.5px; color: var(--ink); background: #fff; border: 1px solid #d6d3de; border-radius: 9px; padding: 0 11px; height: 38px; width: 100%; box-sizing: border-box; }
.bl-in:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 18%, transparent); }
.bl-ta { height: auto; padding: 9px 11px; line-height: 1.5; resize: vertical; }
.bl-sel { max-width: 320px; }
.bl-when { max-width: 216px; }
.bl-time { max-width: 132px; }

/* a box per setting */
.setgrid { display: flex; flex-wrap: wrap; gap: 12px; }
.setbox { flex: 1 1 236px; display: flex; flex-direction: column; min-width: 0; background: var(--setbox); border: 1px solid var(--setbox-line); border-radius: 12px; padding: 14px 15px 15px; }
.setbox-w { flex-basis: 100%; }
.set-h { display: block; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.set-note { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); text-wrap: pretty; }
/* margin-top:auto is what pins every control row in the row to one line */
.set-in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }

/* a selected option is a light wash of brand with a brand edge, never a solid fill */
.bl-chips, .bl-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-seg { border-radius: 9px; }
.bl-chip { font: inherit; font-size: 12px; font-weight: 700; color: var(--soft); background: #fff; border: 1px solid #d6d3de; border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.bl-chip:hover:not(:disabled):not(.on) { border-color: #bfb9cd; }
.bl-chip.on { background: color-mix(in srgb, var(--indigo) 14%, #fff); border-color: var(--indigo); color: #4a0f9c; }
.bl-chip:disabled { opacity: .45; cursor: default; }

.bl-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.bl-err { font-size: 12.5px; font-weight: 700; color: #b3261e; }
.bl-post { margin-left: auto; font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--indigo); border: 1px solid var(--indigo); border-radius: 9px; padding: 0 18px; height: 38px; white-space: nowrap; cursor: pointer; }
.bl-post:hover { background: #560fb2; }

/* ---- see it: the app, behind the canonical device frame ---- */
/* 671 + the 41px bar = the build pane's own height, so switching tabs never jumps the page */
/* Words LEFT, the phone RIGHT (his call). A centered phone under a caption wasted the width and
   left the device small; beside its own copy it can be half again as tall. The flat near-black he
   called stark is a brand-tinted gradient with a soft pool of light behind the device, which is
   also what makes the case read as an object rather than a cutout. */
/* justify-content, not 1fr: a fractional first column centered the copy in half the pane and left a
   void down the left edge with the phone pinned to the right. Centring the PAIR keeps them
   together in the middle with equal air on both sides. */
.see-stage { position: relative; display: grid; grid-template-columns: minmax(0, 32ch) auto;
  align-items: center; justify-content: center; gap: clamp(24px, 4vw, 52px);
  min-height: 640px; padding: 14px 30px; box-sizing: border-box;
  /* his two stops, 2026-09-17 */
  background: radial-gradient(60% 70% at 72% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
              linear-gradient(160deg, #8469c3 0%, #4b3f79 100%); }
.see-side { justify-self: start; }
.see-side-t { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.see-side-b { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: #c3b9d6; text-wrap: pretty; }
/* visibility, not display: the note comes and goes, and a pane that changed height when it did
   would make the tab switch jump the page (bisi-spec rule 4). */
.see-note { visibility: hidden; display: inline-block; margin: 16px 0 0; font-size: 12.5px; font-weight: 700; color: #ffd9a8; background: rgba(217,119,6,.18); border-radius: 12px; padding: 7px 13px; line-height: 1.45; }
.see-note.show { visibility: visible; }
/* One scale unit for the whole case: 1em = --ph/66, so band, radii, bevel and buttons all
   scale together off one number. Never mix px back in. */
/* --phn is UNITLESS on purpose: scale() takes a number, and calc(548px / 852) is a LENGTH,
   which makes the whole transform invalid and silently drops it. That shipped once and the
   app rendered at its full 393px behind a 253px pane of glass, clipping every line. */
.bis-app .pf { --phn: 616; --ph: calc(var(--phn) * 1px); position: relative; z-index: 1; --pf-drop: 0 30px 62px -26px rgba(0,0,0,.72); --pf-edge: rgba(255,255,255,.17); }
.bis-app .pf .frame { position: relative; font-size: calc(var(--ph) / 66); border-radius: 5.2em; padding: 1.4em;
  background: linear-gradient(152deg,#5a606a 0%,#3f454d 18%,#2e333a 42%,#242931 56%,#373c44 76%,#4b5058 100%);
  box-shadow: var(--pf-drop), 0 0 0 1px var(--pf-edge),
    inset 0 0 0 .15em rgba(255,255,255,.30), inset 0 0 .5em .1em rgba(255,255,255,.07),
    inset 0 .15em .1em rgba(255,255,255,.22), inset 0 -.2em .3em rgba(0,0,0,.5),
    inset .5em 0 .8em -.5em rgba(0,0,0,.5), inset -.5em 0 .8em -.5em rgba(0,0,0,.5); }
.bis-app .pf .screen { position: relative; width: calc(var(--ph) / 2.168); height: var(--ph); border-radius: 3.8em; overflow: hidden; line-height: 0; z-index: 1; background: #000;
  box-shadow: 0 0 0 .3em #0c0e11, 0 0 0 .45em #c4682e, 0 0 0 .55em rgba(0,0,0,.42), 0 0 1.1em .6em rgba(0,0,0,.62); }
/* The app is laid out at a REAL phone viewport, 393x852, and the whole thing is scaled down to the
   glass. Sizing the iframe itself to 244px instead wraps copy that does not wrap on a handset, so
   the preview lies about line counts - the same bug the studio's own rail records in portal.css.
   content-box against the global border-box, or the scale reads a subtracted width. */
.bis-app .pf .screen iframe { box-sizing: content-box; display: block; width: 393px; height: 852px; border: 0; background: #000;
  transform: scale(calc(var(--phn) / 852)); transform-origin: top left; }
.bis-app .pf-btn { position: absolute; width: .4em; border-radius: .2em 0 0 .2em; z-index: 0;
  background: linear-gradient(180deg,#41464e,#25292f 55%,#363b43);
  box-shadow: -.1em 0 .2em rgba(0,0,0,.5), inset 0 .1em 0 rgba(255,255,255,.16); }
.bis-app .pf-btn.r { border-radius: 0 .2em .2em 0; box-shadow: .1em 0 .2em rgba(0,0,0,.5); }
.bis-app .pf-silent { left: -.4em; top: 15%; height: 5%; }
.bis-app .pf-volup { left: -.4em; top: 23%; height: 9%; }
.bis-app .pf-voldn { left: -.4em; top: 34.5%; height: 9%; }
.bis-app .pf-power { right: -.4em; top: 26%; height: 13%; }

@media (max-width: 980px) {
  .bis .bl { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bis .bl-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .bis .bl-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* the copy stacks over the phone rather than squeezing it */
  .bis-app .see-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px;
    min-height: 0; padding: 20px 16px 22px; }
  .bis-app .see-side { max-width: 42ch; justify-self: center; text-align: center; }
  .bis-app .see-note { margin-top: 12px; }
  .bis-app .pf { --phn: 560; }
}
@media (max-width: 620px) {
  .bis .bl-bar { flex-wrap: wrap; row-gap: 6px; }
  .bis .bl-bar-n { display: none; }
  .bis .bl-bar .bis-reset { margin-left: auto; }
  /* the rail is a short scroller on a phone, not a column that pushes the composer down a screen */
  .bis .bl-list { max-height: 172px; }
  .bis .setbox { padding: 12px 13px 13px; }
  .bis .set-note { font-size: 11.5px; }
  .bis .set-in { padding-top: 12px; }
  /* A phone showing a phone: the glass is worth more here than the margin around it, but the case
     is sized by a UNITLESS number (scale() needs one), so it cannot track the card's width with a
     vw. The whole case measures --phn * 0.504, and the card is about 286px wide at 390px, so these
     two steps are the widest that fit. Re-measure if the wrap's gutter ever changes. */
  .bis-app .pf { --phn: 500; }
  .bis-app .see-stage { padding: 14px 10px 14px; }
}
@media (max-width: 380px) {
  .bis-app .pf { --phn: 440; }
}

/* ==========================================================================
   The BISI header: a bounded panel that introduces the pattern, a centered
   button, a row of bubbles, and then the thing itself. It was five stacked
   left-aligned blocks before the visitor reached anything interactive; his
   verdict was "too stacked", and the panel is what separates the introduction
   from the card it introduces.
   ========================================================================== */
/* the padding and the hairline both need `.studio` in the selector: `.studio .capsband` is (0,2,0)
   and sets 88px top and bottom plus a rule on each edge. The introduction and the card it
   introduces are ONE band, so the seam between them carries neither. */
/* The section needs a FOOT: the panels inside the stage carry no padding of their own any more, so
   without this the stage butted straight into the capabilities panel below it. */
/* BISI LEADS (2026-09-17): the "why it doesn't drain you" band that used to sit between the purple
   hero and this one is gone (his call: "too boring"), so the introduction now opens straight off
   the flipped curve. `border-top: 0` is what keeps `.studio .capsband`'s hairline from drawing a
   rule across the bottom of that curve. */
.studio .bisi-intro, .bisi-intro { padding: 56px 0 72px; border-top: 0; border-bottom: 0; }
.bisi-intro { --ink: #1f1e1e; --soft: #5f5d5d; --faint: #8a8888; --indigo: #6616d0; --line: #e6e6e6; --surface: #f4f0fa; }

/* No box (his call, once the stage below gave BISI its own enclosure): two bounded panels stacked
   read as two competing objects, and the introduction is not one of the things you operate. It is
   centered running copy over the enclosure that follows it. */
.bisi-card { max-width: 900px; margin: 0 auto; text-align: center; box-sizing: border-box; }
.bisi-eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--indigo); }
/* The headline carries the whole announcement now, so it takes the size an announcement takes.
   ⚠️ `.studio h2` is (0,1,1) and caps every h2 on this page at 2.85rem, so a bare `.bisi-name`
   rule loses and the headline silently rendered at 46px instead of 67. Third time a `.studio x`
   rule has quietly won on this section: the others were `.studio a` on the button's label and
   `.studio .capsband` on the seam. Anything overriding a studio rule needs two classes. */
.bisi-intro .bisi-name, .studio .bisi-name { margin: 12px 0 0; font-size: clamp(2.4rem, 6.2vw, 4.2rem);
  line-height: 1.02; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.bisi-tag { margin: 10px 0 0; font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -.012em; color: var(--indigo); }
.bisi-lede { max-width: 62ch; margin: 20px auto 0; font-size: 16px; line-height: 1.62; color: var(--soft); text-wrap: pretty; }
.bisi-lede b { font-weight: 800; color: var(--ink); }
/* A closing line, not a pill and not a link (his call, twice: the pill read as the panel's whole
   point, and the link went somewhere it had no business going). No underline, because an underline
   on something that does not navigate is a lie. */
.bisi-get { margin: 22px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.012em; color: var(--indigo); }

/* The STAGE: the navigation lives inside the area that ENCLOSES the widget (his call), so the
   bubbles are the top of a recessed surround and the card they choose sits in it. That also says
   which card the bubbles govern, which they could not while floating between two blocks. */
/* The stage OVERHANGS the wrap by its own padding, so the card inside it is exactly as wide as it
   was standing alone. Absorbing the padding instead cost the card 46px and wrapped the agenda
   toolbar's "No clashes" and "Start over" onto two lines, which is the one thing button text may
   never do. The overhang goes away when the gutter can no longer spare it. */
/* ⚠️ The stage is a NEUTRAL grey, not the lavender `--surface`. It was --surface, which is the
   exact wash the card's own tab row wears, so the inactive See It tab dissolved into the ground
   behind it and the card lost its top edge. The ground a card sits on must not be the card's own
   color: neutral here lets the lavender tab read as lavender. */
.bisi-stage { --stage: #e4e6ee; --stage-line: #d1d5e2;
  margin: 30px -22px 0; background: var(--stage); border: 1px solid var(--stage-line);
  border-radius: 22px; padding: 22px 22px 24px; }
.bisi-stage .bis-box { box-shadow: 0 2px 4px rgba(31,30,30,.06), 0 14px 32px -14px rgba(31,30,30,.16); }
/* belt and braces, because the house rule is absolute: button text never wraps */
.bis .ab-bar .bis-reset, .bis .ab-clash, .bis .ab-seg button, .bis .ab-pager b { white-space: nowrap; }
.bisi-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0; }
.bisi-bub { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--soft); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 19px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(31,30,30,.05); }
.bisi-bub:hover:not(.on) { border-color: #c9c2d9; color: var(--ink); }
/* selected is a light wash of brand with a brand edge, the house rule, never a solid fill */
.bisi-bub.on { background: color-mix(in srgb, var(--indigo) 13%, #fff); border-color: var(--indigo); color: #4a0f9c; }

/* One centered line per panel: the PROMISE, which the bubble's label and the card's own two tabs do
   not make. The lede that used to sit under it said what those tabs already say, so it is gone. */
.bisi-line { max-width: 56ch; margin: 20px auto 18px; text-align: center; font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* the panels are plain blocks inside the stage now, not bands of their own */
.studio .bis.bisi-panel, .bis.bisi-panel { padding: 0; border: 0; background: none; }

/* the gutter cannot spare the overhang any more. This block sits AFTER the base rule on purpose:
   an equal-specificity override earlier in the file loses, and the stage then ran 4px wider than
   the wrap on a 390px screen. */
@media (max-width: 980px) {
  .bisi-stage { margin-left: 0; margin-right: 0; }
}
@media (max-width: 620px) {
  .bisi-intro { padding-top: 40px; }
  .bisi-lede { max-width: none; }
  /* five centered lines on a phone is the wrapping he dislikes; the guide's own remedy for centered
     copy past four lines is to left-align it. The name, the tagline and the button stay centered. */
  .bisi-lede { font-size: 14.5px; text-align: left; }
  .bisi-stage { padding: 16px 12px 18px; border-radius: 18px; }
  .bisi-stage .bis-box { border-radius: 14px; }
  .bisi-line { font-size: 1.15rem; margin: 18px auto 14px; }
  .bisi-bub { font-size: 12.5px; padding: 8px 15px; }
}

/* ==========================================================================
   BISI #3: THE FORM DESIGNER (2026-09-17)
   --------------------------------------------------------------------------
   Build It is the studio's Registration > Form Designer, control for control
   minus the uploader. See It is the PUBLISHED registration form on the event
   host, rendered by its own /static/register.js.

   The tile diagrams, the chips and the swatches are ported from
   WDYE-Studio/public/portal.css (`.fd-*`), with the studio's indigo swapped
   for this site's purple and the selected state rewritten to the house rule:
   a light wash of brand on a brand edge, never a solid fill.

   Setting boxes, per the style guide: a box per setting, the explanation
   ABOVE the control, the control row bottom-pinned so a row of boxes shares
   one line, and nothing jammed against a box edge.
   ========================================================================== */
/* ⚠️ The min-height has to hold the pane still across CONTROL STATES, not just across tabs (rule 4,
   and the lesson the exhibit floor wrote down). This pane runs 944px with no header image and 1097
   with a gradient and a focal point, so it was jumping 153px under anybody who touched it. The
   number is the TALLEST state, measured, and the See It frame below is 1097 minus the 43px bar. */
.bis-reg .fd { --setbox: #eef0f6; --setbox-line: #dcdfe9;
  display: flex; flex-direction: column; min-height: 1097px; }
.bis-reg .fd-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line); }
/* what the form is wearing right now, in one line, the way the studio's own screen says it */
.fd-applied { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0;
  font-size: 12px; color: var(--soft); }
.fd-applied span { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fd-applied b { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.bis-reg .fd-bar .bis-reset { margin-left: auto; padding: 6px 13px; }

/* the groups. Layout Template takes the full width because six tiles in a row IS the control;
   the other three are short, so they sit side by side (his rule about two short groups). */
/* align-content: start is load-bearing. A grid's default (`normal`, which resolves to stretch)
   grows every auto row to fill the box, so the four groups came back 331px and 391px tall with
   their contents floating in the middle of a wash. `align-items: stretch` is still what makes the
   three short groups share one bottom edge. */
.fd-body { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content; gap: 16px; padding: 18px 16px 20px; align-items: stretch; align-content: start; }
/* the top row is taller than the tiles need, so the preview has somewhere to live */
.fd-body > .fd-tpl, .fd-body > .fd-live { min-height: 318px; }
.fd-group { display: flex; flex-direction: column; min-width: 0;
  background: var(--setbox); border: 1px solid var(--setbox-line); border-radius: 12px; padding: 14px 15px 16px; }
.fd-group-wide { grid-column: 1 / -1; }
/* The top row: the template tiles and the live preview share it. The tiles take two of the three
   columns because six diagrams in a row IS the control; the preview takes the third.
   ⚠️ The pane had ZERO slack - 728px of content in a 728px pane, measured - so a full-width preview
   strip above the groups would have cost its entire height. This costs only the difference between
   what the tiles needed (186px) and a preview worth looking at. */
/* The PREVIEW takes two of the three columns and the tiles take one. The other way round makes the
   preview a postage stamp: a desktop page scaled into a 340px column lands at 0.29 and nothing in
   it is legible. Six tiles in one column is 2 x 3 at the size they already were. */
.fd-tpl { grid-column: span 1; }
.fd-tpl .fd-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-live { grid-column: span 2; }
.fd-live-stage { flex: 1; min-height: 0; margin-top: 12px; border-radius: 10px; overflow: hidden;
  background: #f3f4f8; border: 1px solid var(--setbox-line); position: relative; }
/* the form is a DESKTOP page: render it at a desktop width and scale the whole thing down, or it
   reflows to a narrow layout and the preview lies about what the visitor picked. 1180 is what the
   real page uses before its own breakpoints start moving things. */
/* The caption over a swatch row or the direction tiles. Gradient puts TWO color rows in one group,
   so each has to say which end it is. Prefixed like everything else on this builder: a bare
   `.sublab` or `.dir` is exactly how the three collisions in section 9 of the spec happened. */
/* Hero Banner: the card sits ON the band, so its tile draws the step bar lifted over it with a ring
   of the tile's own background standing in for the gap. Without it hero's tile is classic's tile
   with one more stripe, which is exactly how the two templates came to be indistinguishable. */
.fdm-lift { margin-top: -4px; position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--setbox); }
.fd-sublab { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soft); margin: 16px 0 8px; }
.fd-group > .fd-sublab:first-of-type { margin-top: 14px; }
.fd-dirs { display: flex; gap: 8px; flex-wrap: wrap; }
.fd-dir { width: 46px; height: 32px; border-radius: 8px; border: 2px solid var(--setbox-line);
  padding: 0; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.fd-dir:hover { border-color: var(--indigo); }
.fd-dir.on { border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 16%, transparent); }
.fd-live-stage iframe { position: absolute; top: 0; left: 0; width: 1180px; height: 1500px; border: 0;
  transform-origin: top left; }
/* Logo and The Panel are both short, so they share the third column instead of each taking a row of
   air. The last one grows so the column ends flush with its two taller neighbors. */
.fd-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fd-stack > .fd-group:last-child { flex: 1; }
.fd-group h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
/* the explanation goes ABOVE the control, and nothing is jammed against a box edge */
.fd-note { margin: 7px 0 16px; font-size: 12px; line-height: 1.5; color: var(--faint); text-wrap: pretty; }
.fd-note-t { margin: 14px 0 0; }
/* pins a closing note to the bottom of a short column so a row of groups ends on one line */
.fd-foot { margin: auto 0 0; padding-top: 16px; }
/* a group whose controls cannot apply says why, instead of leaving them there doing nothing */
.fd-group-off { background: #fbfafd; border-style: dashed; }
.fd-off { margin: 7px 0 0; font-size: 12px; line-height: 1.55; color: var(--faint); text-wrap: pretty; }

/* the six tiles, each one a diagram of the real structure */
.fd-tgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.fd-tcell { border: 1.5px solid #d5d8e4; border-radius: 9px; padding: 7px; background: #fff;
  cursor: pointer; font: inherit; display: block; width: 100%; }
.fd-tcell:hover { border-color: #c9c2d9; }
.fd-tcell.on { background: color-mix(in srgb, var(--indigo) 8%, #fff); border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 14%, transparent); }
.fd-tname { display: block; font-size: 10.5px; font-weight: 700; color: var(--soft); margin-top: 6px;
  text-align: center; line-height: 1.25; }
.fd-tcell.on .fd-tname { color: #4a0f9c; }
/* ⚠️ Every part is `fdm-` prefixed. The studio's copy of this uses bare names (`.band`, `.row`,
   `.bar`), which is safe in its own sheet and is NOT safe here: this page already owns `.band` for
   its purple sections, and `site.css .band` (0,1,0) set a min-height that turned the Hero tile's
   11px photo strip into a 256px purple slab. */
.fd-mini { height: 46px; border-radius: 6px; background: #eef0f6; padding: 4px;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.fd-mini i { display: block; border-radius: 2px; }
.fd-mini i.fdm-bar { height: 6px; background: #c9cede; flex: none; }
.fd-mini i.fdm-band { height: 11px; background: #a98ae0; flex: none; }
.fd-mini i.fdm-row { flex: 1; display: flex; gap: 3px; min-height: 0; }
.fd-mini i.fdm-row b { display: block; border-radius: 2px; background: #fff; border: 1px solid #d8dce8; }
/* ⚠️ Each part repeats `i.fdm-row`. The line above is (0,2,2) and a bare `.fd-mini b.fdm-pane`
   would be (0,2,1), so the generic white beats the specific color and the Split Panel tile draws
   its brand pane in white on white. The studio's own copy of these rules has the same shape and
   the same silent loss. */
.fd-mini i.fdm-row b.fdm-main { flex: 1; }
.fd-mini i.fdm-row b.fdm-main.fdm-wide { margin: 0 14%; }
.fd-mini i.fdm-row b.fdm-rail { width: 30%; background: #ddd4f2; border-color: #c9bce6; }
.fd-mini i.fdm-row b.fdm-ticket { width: 30%; background: #fff; border-color: #cbb9e6; box-shadow: inset 0 5px 0 var(--indigo); }
.fd-mini i.fdm-row b.fdm-pane { width: 36%; background: #4a2a86; border-color: #4a2a86; }

/* chips, not dropdowns: the option set is small and every option is worth seeing */
.fd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fd-chips + .fd-chips { margin-top: 10px; }
.fd-chip { border: 1.5px solid #d5d8e4; border-radius: 8px; padding: 6px 13px; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--soft); background: #fff; cursor: pointer; white-space: nowrap; }
.fd-chip:hover { border-color: #c9c2d9; }
.fd-chip.on { background: color-mix(in srgb, var(--indigo) 12%, #fff); border-color: var(--indigo); color: #4a0f9c; }

.fd-sws { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fd-sw { width: 36px; height: 36px; border-radius: 9px; border: 1.5px solid #d5d8e4; padding: 0; cursor: pointer; }
.fd-sw.on { border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 14%, transparent); }
.fd-sw-custom { position: relative; overflow: hidden;
  background: conic-gradient(from .25turn, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f87171); }
.fd-sw-custom input[type=color] { position: absolute; inset: -6px; width: 150%; height: 150%;
  border: 0; padding: 0; margin: 0; opacity: 0; cursor: pointer; }

/* the header image's FOCAL POINT: the same stage the studio's Form Designer uses, showing the very
   image at the very background-position the band will use, so a press on it is a direct answer to
   "which part of this photo survives a 240px crop". The dot is where you last pressed. */
.bis-reg .fd-focal { position: relative; height: 88px; margin-top: 10px; border-radius: 10px;
  border: 1px solid var(--setbox-line); background-size: cover; background-repeat: no-repeat;
  cursor: crosshair; touch-action: none; overflow: hidden; }
.bis-reg .fd-focal-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid #fff; background: rgba(31,30,30,.35);
  box-shadow: 0 0 0 1px rgba(31,30,30,.45), 0 1px 4px rgba(31,30,30,.4); pointer-events: none; }

/* a slider is a setting box too: its label and its live value on one line, the track under it */
.bis-reg .fe-sliders { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.bis-reg .fe-sliders.two { display: grid; grid-template-columns: 1fr 1fr; }
.bis-reg .fe-box { flex: 1 1 150px; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 8px; }
.bis-reg .fe-box-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.bis-reg .fe-box-t b { color: var(--ink); font-weight: 800; letter-spacing: 0; font-size: 12.5px; text-transform: none; }
/* the slider pins to the BOTTOM of its box, so a label that wraps ("BAND HEIGHT" does at this
   width, "OVERLAY" does not) cannot leave the two sliders on different lines. The house rule for a
   row of boxes: bottom-pin the control rows so the inputs share a line however long each label runs. */
.bis-reg .fe-box input[type=range] { width: 100%; margin: auto 0 0; display: block; accent-color: var(--indigo); }
/* ⚠️ Nothing is jammed against a box (owner 2026-09-17: "the buttons below the band height and
   overlay are jammed up"). `.fd-chips` carries no margin of its own, so a chip row placed straight
   after the slider boxes sat FLUSH against them - 0px, measured. The house minimum is 16. The
   chip-row-to-chip-row gap stays tight on purpose: those are one control, not two. */
.bis-reg .fe-sliders + .fd-chips, .bis-reg .fd-focal + .fd-chips { margin-top: 16px; }

/* See It: 685 + the 43px bar = 728, which is what the five setting groups make the Build It pane,
   so switching tabs on this card does not move the page. Measured, not guessed; the three BISIs
   each agree with THEMSELVES (agenda 624/621, bulletins 712/712, this one 728/728), not with each
   other, because each card is its own pair. */
/* 881 + the 43px bar = 924, which is what the Build pane makes now that it carries a live preview.
   Measured, not guessed: the two panes of one card stay within a few pixels or the tab switch
   jumps the page (bisi-spec rule 4). */
.see-frame-reg { height: 881px; }
/* the Form Designer's own pair: 1054 + the 43px bar = 1097, the Build pane's tallest state */
.bis-reg .see-frame-reg { height: 1054px; }
.see-frame-reg iframe { width: 100%; height: 100%; border: 0; display: block; background: #f3f4f8; }

@media (max-width: 1080px) {
  .fd-tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fd-body { grid-template-columns: minmax(0, 1fr); }
  .bis-reg .fd { min-height: 0; }
  .see-frame-reg { height: 560px; }
}
@media (max-width: 620px) {
  .fd-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-body { padding: 14px 12px 16px; gap: 12px; }
  .bis-reg .fd-bar { padding: 10px 12px; }
  .fd-applied { gap: 12px; font-size: 11.5px; }
  /* one slider box per line: side by side at this width, "Panel Corner" wrapped onto two lines,
     and a short label has to fit on one */
  .bis-reg .fe-sliders.two { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   AI SETUP REVIEW (2026-09-17) - the home page's one NON-BISI panel
   --------------------------------------------------------------------------
   Not a Build It / See It pair: what this shows is not a surface you build
   with, it is the studio reading an event back to you. So it gets a plain
   two-column card instead of tabs: the settings you can break on the left,
   the studio's own Launch Checklist on the right.

   The panel side deliberately wears the STUDIO's tokens (indigo #4f46e5, its
   greys, its amber and teal), not the site's purple, for the same reason the
   BISI previews wear the event site's colors: it IS the product, and dressing
   it in marketing colors would make it a drawing of the product.

   ⚠️ Two classes on anything that overrides a `.studio x` rule on this page -
   `.studio .capsband` (0,2,0) and `.studio a { color: inherit }` (0,1,1) have
   each cost a round trip here already.
   ========================================================================== */
/* THE BAND is what carries the shade here, not a panel inside it (owner 2026-09-17). The page's
   long-running pattern is alternating bands - paper, then a tint - and this section sat white
   between a white one above and the capabilities band below, so it read as a continuation of both.
   ⚠️ His call on WHICH shade, 2026-09-17: this band takes the purple and the capabilities panel
   below it goes white, not the other way round. `.studio #capabilities.capsband` is (0,2,1) and
   sets its own tint, so turning it white needs at least that much specificity - see the override
   at the foot of this file. */
.studio .aicheck, .aicheck { border-top: 1px solid var(--line); padding: 74px 0 78px; background: var(--surface); }
.aicheck { --ink: #1f1e1e; --soft: #5f5d5d; --faint: #8a8888; --indigo: #6616d0; --line: #e6e6e6; }
.aic-head { max-width: 62ch; }
.aicheck .aic-head .eyebrow { color: var(--indigo); }
.studio .aicheck h2, .aicheck .aic-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.08;
  letter-spacing: -.025em; color: var(--ink); margin: 10px 0 0; text-wrap: balance; }
.aicheck .aic-head .lede { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--soft); max-width: 62ch; }

/* the card. 330px is what the longest switch label ("Move "Your Newsletter Is Not a Strategy" into
   Mile High 1A") needs to sit on two lines rather than four. */
.aic-box { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 0; margin-top: 30px;
  background: #fff; border: 1px solid #e0e0e4; border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(31,30,30,.06), 0 14px 32px -14px rgba(31,30,30,.16); }

/* ---- left: the settings you can break ---- */
/* NEUTRAL, not the studio's lavender (owner 2026-09-17: "make the guts of this white or f7f7f7
   ... because it's blending too much with the band color"). The band behind this panel is the
   site's light-lavender --surface, and #f5f3f9 / #f4f5fa sat close enough to it that the card's
   edges disappeared. The studio's own tokens still dress everything INSIDE the checklist, which is
   the fidelity that matters; the wash behind it does not have to be the studio's page color. */
.aic-side { background: #f7f7f7; border-right: 1px solid #e6e6e9; padding: 20px 20px 22px; }
.aic-side-h { display: block; margin: 0 0 14px; }
.aic-side-h b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.aic-side-h span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.aic-grp { margin-bottom: 16px; }
.aic-grp:last-child { margin-bottom: 0; }
.aic-grp h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 800; color: var(--faint); }
/* a setting, not a finding: the switch says what it does to the event, and the panel on the right
   says what the studio makes of it */
.aic-sw { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #e0dde8; border-radius: 11px; padding: 10px 11px; margin-bottom: 7px;
  font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.aic-sw:last-child { margin-bottom: 0; }
.aic-sw:hover { border-color: #c9c9cf; }
/* the house rule: a light wash of brand with a brand edge, never a solid fill */
.aic-sw.on { background: color-mix(in srgb, var(--brand) 8%, #fff); border-color: var(--brand); }
.aic-swb { flex: 0 0 auto; width: 30px; height: 18px; margin-top: 1px; border-radius: 99px;
  background: #d7d3e0; position: relative; transition: background .15s; }
.aic-swb::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(31,30,30,.25); transition: transform .15s; }
.aic-sw.on .aic-swb { background: var(--brand); }
.aic-sw.on .aic-swb::after { transform: translateX(12px); }
.aic-swt { flex: 1; min-width: 0; }
.aic-swt b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.aic-swt small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--faint); }
/* its own line under the label: beside it, the tag took enough width to wrap "Remove Priya Patel's
   speaker photo" onto three lines and made that one switch twice the height of the others. */
.aic-swtag { display: inline-block; margin-top: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #b45309; background: #fef3e2; border-radius: 6px; padding: 3px 6px; white-space: nowrap; }
.aic-reset { margin-top: 16px; width: 100%; background: #fff; border: 1px solid #d9d9de; border-radius: 9px;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--soft); padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.aic-reset:hover { border-color: #bcbcc3; color: var(--ink); }

/* ---- right: the studio's own Launch Checklist ----
   From here down the tokens are the STUDIO's, copied from WDYE-Studio/public/portal.css. */
.aic-main { --ink: #14161c; --soft: #565c6b; --faint: #667085; --line: #e7e9f0; --line-soft: #eef0f6;
  --brand: #4f46e5; --brand-soft: #eef0ff; --ok: #0d9488; --warn: #d97706;
  /* WHITE, not the studio's #f4f5fa and not the #f7f7f7 this was first cut at (owner 2026-09-17:
     "why is the right side of the ai panel still grey"). The left rail keeps #f7f7f7 so it still
     reads as a rail; the checklist itself is the content and sits on white. */
  min-width: 0; background: #fff; padding: 0; display: flex; flex-direction: column; }

/* the studio's topbar, cropped to the one control this panel is about */
.aic-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid var(--line); padding: 11px 18px; min-height: 59px; }
.aic-crumb { font-size: 12.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.aic-crumb b { color: var(--ink); font-weight: 700; }
#aicRail { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13px;
  font-weight: 700; color: var(--ink); padding: 8px 13px; cursor: pointer; }
#aicRail svg { width: 16px; height: 16px; color: var(--brand); flex: 0 0 auto; }
#aicRail:hover { border-color: #cfd3e0; }
#aicRail[disabled] { opacity: .6; cursor: default; }
/* the setup moved under a checklist that was read before it moved: the same amber the studio uses
   for "your setup changed since" */
#aicRail.changed { border-color: #f0dfb8; background: #fef3e2; color: #b45309; }
#aicRail.changed svg { color: #b45309; }
.aic-railbadge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  background: #fef3e2; color: #b45309; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.aic-changed { flex: 0 0 100%; order: 3; margin: 0; font-size: 11.5px; font-weight: 600; color: #b45309; }
.aic-changed[hidden] { display: none; }

/* the panel and the overlay share a box, so the overlay can center itself on the FINDINGS rather
   than on the column, which also carries the topbar */
.aic-panelwrap { position: relative; flex: 1; min-width: 0; display: flex; }
.aic-panel { flex: 1; padding: 18px 18px 20px; min-width: 0; }
.aic-reading .aic-panel { opacity: .5; transition: opacity .15s; }
/* A STALE checklist is the previous answer. Dim it, put it out of reach, and leave the one thing
   there is to do in the middle of it (owner 2026-09-17: "I think we need to dim the right and have
   the Recheck My Setup button on top in the vertical/horizontal center of the right panel. It's not
   obvious that they should click that again"). */
.aic-stale .aic-panel { opacity: .32; filter: saturate(.55); pointer-events: none; transition: opacity .15s; }
.aic-recheck { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center;
  /* its own ground. Without it the button sits in the middle of a sentence it happens to cover and
     reads as a rendering accident rather than as the thing in front. */
  background: radial-gradient(ellipse 60% 42% at 50% 50%, rgba(255,255,255,.97) 0 55%, rgba(255,255,255,0) 100%); }
.aic-recheck[hidden] { display: none; }
.aic-recheck p { margin: 0; max-width: 34ch; font-size: 12.5px; line-height: 1.5; color: #565c6b; }
.aic-recheckbtn { font: inherit; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap;
  background: #4f46e5; border: 0; border-radius: 10px; padding: 12px 22px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(31,30,30,.12), 0 10px 26px -12px rgba(79,70,229,.7); }
.aic-recheckbtn:hover { background: #4338ca; }
.aic-modhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.aic-modhead h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.aic-rocket { color: #e8752a; display: inline-flex; }
.aic-rocket svg { width: 20px; height: 20px; }
.aic-tracks { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.aic-track { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.aic-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--line-soft); color: var(--soft); }
.aic-pill svg { width: 14px; height: 14px; }
.aic-pill.aic-action { background: #fef3e2; color: #b45309; }
.aic-pill.aic-live { background: #e6f7f4; color: var(--ok); }
.aic-div { width: 1px; height: 22px; background: var(--line); flex: 0 0 auto; }

.aic-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--line-soft);
  border: 1px solid var(--line); border-radius: 11px; padding: 4px; margin-bottom: 18px; }
.aic-tab { height: 38px; border-radius: 8px; border: 1px solid transparent; background: none; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--soft); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.aic-tab svg { width: 16px; height: 16px; }
.aic-tab:hover { color: var(--ink); }
.aic-tab.on { background: #fff; border-color: var(--line); color: var(--brand); box-shadow: 0 1px 2px rgba(20,22,28,.06); }

.aic-chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.aic-chip { height: 31px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--soft); display: inline-flex; align-items: center;
  gap: 7px; cursor: pointer; white-space: nowrap; }
.aic-chip svg { width: 14px; height: 14px; }
.aic-chip b { color: var(--ink); font-weight: 700; }
.aic-chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.aic-chip.on b { color: var(--brand); }

.aic-grpx { margin-bottom: 18px; }
.aic-grpx:last-child { margin-bottom: 0; }
.aic-grpx h4 { margin: 0 0 9px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  font-weight: 700; display: flex; align-items: center; gap: 8px; }
.aic-grpx h4 svg { width: 14px; height: 14px; }
.aic-n { color: var(--soft); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; }
.aic-linkbtn { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--indigo); cursor: pointer; letter-spacing: 0; text-transform: none; }

.aic-row { border: 1px solid var(--line); border-radius: 11px; background: #fff; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.aic-row:last-child { margin-bottom: 0; }
.aic-row.aic-b { border-color: #f0dfb8; box-shadow: inset 3px 0 0 var(--warn); }
.aic-sev { display: inline-flex; width: 20px; justify-content: center; flex: 0 0 auto; }
.aic-sev svg { width: 16px; height: 16px; }
.aic-b .aic-sev { color: var(--warn); }
.aic-l .aic-sev { color: var(--soft); }
.aic-ft { flex: 1; min-width: 0; }
.aic-ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aic-ttl b { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.aic-ft > span { display: block; font-size: 12.5px; color: var(--soft); margin-top: 3px; line-height: 1.45; text-wrap: pretty; }
.aic-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.aic-act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* NOT a link: every screen it names is behind a sign-in, and an underline on something that does
   not navigate is a lie (his rule, from the Get BISI! line). It says where the fix lives. */
.aic-go { font-size: 12.5px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.aic-dis { width: 28px; height: 28px; border-radius: 7px; border: 0; background: none; color: var(--faint);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; }
.aic-dis svg { width: 16px; height: 16px; }
.aic-dis:hover { background: var(--line-soft); color: var(--ink); }

.aic-plist { border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 2px 14px; }
.aic-prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.aic-prow:last-child { border-bottom: 0; }
.aic-prow > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ok); }
.aic-prow.aic-prow-d > svg { color: var(--faint); }
.aic-prow b { font-weight: 600; color: var(--ink); }
.aic-prow span { color: var(--soft); }

.aic-band { display: flex; align-items: center; gap: 12px; background: #e6f7f4; border: 1px solid #cfe7da;
  border-radius: 12px; padding: 13px 16px; color: var(--ok); font-size: 13.5px; font-weight: 600; margin-bottom: 18px; }
.aic-band > svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ok); }
.aic-band span { display: block; font-weight: 500; color: #2f7a54; margin-top: 2px; font-size: 12.5px; }
.aic-band a, .studio .aic-band a { color: var(--ok); font-weight: 700; }

/* ---- the AI Review tab ---- */
.aic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px;
  border: 1px solid var(--indigo); background: var(--indigo); color: #fff; font: inherit; font-size: 13.5px;
  font-weight: 700; padding: 10px 20px; cursor: pointer; white-space: nowrap; }
.aic-btn svg { width: 16px; height: 16px; }
.aic-btn[disabled] { opacity: .6; cursor: default; }
.aic-btn-sm { background: #fff; color: var(--ink); border-color: var(--line); font-size: 12.5px; padding: 7px 14px; }
.aic-btn-sm:hover:not([disabled]) { border-color: #cfd3e0; }
.aic-invite { background: var(--brand-soft); border: 1px solid #dfe2fb; border-radius: 14px; padding: 20px 22px;
  display: flex; align-items: center; gap: 28px; }
.aic-invite-t { flex: 1; min-width: 0; }
.aic-invite h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.aic-invite p { margin: 0 0 10px; font-size: 13px; color: var(--soft); line-height: 1.55; text-wrap: pretty; max-width: 640px; }
.aic-invite ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink); display: flex; gap: 22px; flex-wrap: wrap; }
.aic-invite li { display: flex; align-items: center; gap: 7px; }
.aic-invite li svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); }
.aic-invite-b { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.aic-invite-b small { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.aic-aihd { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; min-height: 34px; }
.aic-meta { font-size: 12.5px; color: var(--faint); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.aic-meta svg { width: 16px; height: 16px; }
.aic-meta.stale { color: var(--warn); font-weight: 600; }
.aic-aihd .aic-btn { margin-left: auto; }
.aic-next { background: var(--brand-soft); border: 1px solid #dfe2fb; border-radius: 14px; padding: 16px 18px 14px; }
.aic-next h4 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.aic-next h4 svg { width: 16px; height: 16px; color: var(--brand); }
.aic-by { margin: 5px 0 12px; font-size: 11.5px; color: var(--faint); line-height: 1.45; }
.aic-next ol { margin: 0; padding: 12px 0 0; list-style: none; counter-reset: s;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 26px; border-top: 1px solid #dfe2fb; }
.aic-next li { display: flex; gap: 11px; padding: 2px 0 4px; font-size: 13px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.aic-next li::before { counter-increment: s; content: counter(s); width: 22px; height: 22px; border-radius: 50%;
  background: var(--indigo); color: #fff; font-weight: 800; font-size: 11.5px; display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; margin-top: 1px; }
.aic-next.dim ol { opacity: .55; }
.aic-stalebar { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 10px 11px; border-radius: 9px;
  background: #fef3e2; border: 1px solid #f0dfb8; font-size: 12px; color: var(--warn); font-weight: 600; }
.aic-stalebar svg { width: 16px; height: 16px; flex: 0 0 auto; }
.aic-stalebar .aic-linkbtn { color: var(--warn); }
.aic-about { margin: 14px 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.55; text-wrap: pretty; max-width: 760px; }
.aic-about b { color: var(--soft); font-weight: 600; }

/* the honesty line. It is the panel's footnote, not a caveat buried in grey: a visitor who presses
   the button is entitled to know which half of this is a recording. */

@media (max-width: 1020px) {
  .aic-next ol { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
  .aic-next li + li { border-top: 1px solid #dfe2fb; padding-top: 10px; }
}
@media (max-width: 900px) {
  .aic-box { grid-template-columns: minmax(0, 1fr); }
  .aic-side { border-right: 0; border-bottom: 1px solid #e4e1ec; }
  .aic-invite { flex-direction: column; align-items: stretch; gap: 16px; }
  .aic-invite-b { align-items: stretch; }
  .aic-invite-b small { white-space: normal; text-align: center; }
  .aic-tracks { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 620px) {
  .aicheck { padding-bottom: 54px; }
  .aic-box { border-radius: 14px; margin-top: 22px; }
  .aic-panel { padding: 14px 13px 16px; }
  .aic-topbar { padding: 10px 13px; }
  .aic-crumb { display: none; }
  #aicRail { margin-left: 0; }
  .aic-row { flex-wrap: wrap; }
  .aic-act { flex-basis: 100%; padding-left: 32px; }
}

/* The 14 jobs panel goes WHITE so the AI Setup band above it is the purple one (owner 2026-09-17).
   `.studio #capabilities.capsband` in studio.css is (0,2,1); this repeats the id and adds a class
   so it wins without an !important. */
.studio #capabilities.capsband.capsband { background: #fff; }

/* ---- FLOOR PANELS: banquet seating (#buildsee-seat) and the exhibit floor (#buildsee-booth) ----
   Two BISIs draw a room in feet with things you drag around it and an inspector for the selected
   one, so the shape is `.bis-floor` and each panel carries that class beside its own. Only what
   genuinely differs stays panel-scoped: the pane height, and the floor SVG's id.
   Built 2026-09-17 for seating, shared 2026-09-20 for booths. Every part name is `sk-` prefixed, key classes included, for the reason
   the Form Designer's three collisions record: a borrowed name lands on THIS page with THIS
   page's rules, and `.grid`, `.wall`, `.chip`, `.side` are all taken here. */
/* ⚠️ The setting-box tokens are declared PER PANEL, not on the page: `.bis-reg .fd` has its own
   pair and `.bis-app` another. Inheriting them was the assumption, and an unknown var() does not
   fall back, it invalidates the WHOLE declaration - so every chip lost its border and the inspector
   its background, silently, with the rules right there in the sheet. The page's own palette is
   --ink --soft --faint --line --indigo --surface; there is no --brand and no --muted. */
.bis-floor .fd-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line); }
.bis-floor .sk { --setbox: #eef0f6; --setbox-line: #dcdfe9;
  display: flex; flex-direction: column; }
/* the pane height is the PANEL's, measured against its own See It (rule 4), never shared.
   ⚠️ It has to hold the pane still across INSPECTOR STATES too, not just across tabs: the exhibit
   floor ran 714px with nothing selected and 820 with a booth, so the card grew 106px the first time
   anybody clicked a booth. The number is the tallest state. */
.bis-seat .sk { min-height: 792px; }
.bis-booth .sk { min-height: 820px; }
/* ⚠️ THE INSPECTOR MUST NOT SET THE PANE'S HEIGHT, and on the banquet panel it did. Picking a
   table took Build from 792 to 1,144 against a See It of 794, so the card grew by most of a screen
   the first time anybody clicked a table and shrank again on every tab switch. min-height alone
   cannot hold that: it is a floor, and the inspector simply grew past it. The exhibit floor's note
   above says the number is the TALLEST state; the honest version of that is a column that cannot
   push past the pane at all. Above the stack point the pane is a fixed 792 and the right column
   scrolls inside it, so no inspector state - no table, 6 seats, 12, an editor open, Categories
   open - moves the card by a pixel. Below 900px the column sits UNDER the floor and is allowed to
   be as tall as it likes, which is why this is a media query and not a bare rule. */
@media (min-width: 901px) {
  .bis-seat .sk { height: 792px; }
  .bis-seat .sk-body { min-height: 0; }
  .bis-seat .sk-col { max-height: 100%; min-height: 0; }
  /* the INSPECTOR is what scrolls, not the column. Scrolling the column put the Categories fold at
     the bottom of a 1,000px scroll, where a control nobody can find is a control that is not there
     (rule 6). Pinned, its header is always on screen and opening it takes the room back off the
     inspector, which is the trade the fold exists to offer. */
  .bis-seat .sk-inspwrap { flex: 1 1 auto; min-height: 0; }
  .bis-seat #skInsp { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .bis-seat #skCats { flex: 0 0 auto; }

  /* The scroll's bottom edge, said properly: the content fades out instead of a row being cut in
     half, which reads as a rendering fault.
     ⚠️ A COLORED OVERLAY CANNOT DO THIS JOB HERE. The first cut was a sticky gradient ending in
     --setbox, and it only half worked: the seat list is WHITE on a grey card, so fading to grey
     tinted the last row rather than hiding it, and the row stayed legible through the wash. A mask
     fades to TRANSPARENT and does not care what is underneath. It is on the scroller, which now
     carries no background of its own, so what shows through is the wrapper's card - border and
     rounded corners intact, which is the thing a mask on the card itself would have dissolved.
     The distance is a variable rather than two whole mask declarations, and buildsee-seat.js sets
     .sk-more only while there IS something below: at the end of the scroll the fade is gone and
     the last row is sharp, which is the failure mode of every static fade. */
  .bis-seat #skInsp { --sk-fade-t: 0px; --sk-fade-b: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--sk-fade-t),
      #000 calc(100% - var(--sk-fade-b)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--sk-fade-t),
      #000 calc(100% - var(--sk-fade-b)), transparent); }
  /* At 0px both stops collapse onto the ends, so the mask is opaque and the edge is sharp. Each
     end fades only when there is something past it: .sk-more when content is below,
     .sk-less when it is above. */
  .bis-seat #skInsp.sk-more { --sk-fade-b: 38px; }
  .bis-seat #skInsp.sk-less { --sk-fade-t: 32px; }
}
.bis-floor .sk-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 286px;
  grid-template-rows: auto minmax(0, 1fr); gap: 0 16px; padding: 18px 16px 20px; align-items: start; }
/* both floors carry the zoom INSIDE .sk-floor, under the room (owner 2026-10-07), so the room's top
   edge lines up with the inspector's */
.bis-floor .sk-body { grid-template-rows: minmax(0, 1fr); }
.bis-floor .sk-floor { grid-column: 1; grid-row: 1; }
.bis-floor .sk-col { grid-column: 2; grid-row: 1; }
.bis-floor .sk-floor .sk-zoom { margin: 10px 0 0; }
.sk-floor { min-width: 0; }
/* the room itself. A light floor so the tables read as objects ON something, and the aspect ratio
   comes from the viewBox rather than a fixed height: a wide shallow ballroom must not stretch. */
#skRoom.ef-pannable, #efFloor.ef-pannable { cursor: grab; }
#skRoom.ef-pannable:active, #efFloor.ef-pannable:active { cursor: grabbing; }
#skRoom, #efFloor { display: block; width: 100%; background: #f7f8fb; border: 1px solid var(--setbox-line);
  border-radius: 12px; touch-action: none; }
.sk-grid { stroke: #dfe3ee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-wall { fill: none; stroke: #c3c9da; stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.sk-t { cursor: grab; }
.sk-t:active { cursor: grabbing; }
/* the selected table gets the house selected-state treatment: a ring, not a repaint, so its
   category color still reads */
.sk-t.on ellipse, .sk-t.on rect { stroke-width: 3; }
.sk-t:focus-visible { outline: none; }
.sk-t:focus-visible ellipse, .sk-t:focus-visible rect { stroke-width: 3; }
.sk-hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
/* the inspector. Its own box so it reads as the thing acting on the room, not a caption under it */
.sk-side { background: var(--setbox); border: 1px solid var(--setbox-line); border-radius: 12px;
  padding: 14px 15px 16px; min-width: 0; }
/* the seating inspector's card holds the look and clips to its own corners; the scroller inside it
   holds what .sk-side would have given the box directly, so nothing moves visually. */
.bis-seat .sk-inspwrap { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bis-seat #skInsp { padding: 14px 15px 16px; min-width: 0; }
.sk-none { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--soft); }
.sk-ihead { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.sk-ihead b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.sk-ihead span { font-size: 12px; color: var(--soft); }
/* nothing is jammed against a box: the label owns the air above its control */
.sk-lab { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soft); margin: 16px 0 8px; }
.sk-ihead + .sk-lab { margin-top: 0; }
.sk-in { width: 100%; font: inherit; font-size: 13.5px; height: 36px; padding: 0 11px;
  border: 1px solid var(--setbox-line); border-radius: 9px; background: #fff; color: var(--ink); }
.sk-in:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 14%, transparent); }
.sk-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.sk-chip { font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  background: #fff; border: 1px solid var(--setbox-line); border-radius: 9px; padding: 7px 11px; color: var(--ink); }
.sk-chip i { font-style: normal; font-weight: 700; opacity: .6; }
.sk-chip:hover { border-color: var(--indigo); }
.sk-chip.on { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 9%, #fff); color: var(--indigo); }
.sk-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--soft); }
.sk-note b { color: var(--ink); font-weight: 700; }
/* The room needs the width more than the inspector does, and a 286px column beside a 340px room is
   two cramped things instead of one good one. */
@media (max-width: 900px) {
  /* one column means the inspector goes UNDER the room; left at column 2 it made an implicit
     second column and crushed the room to a sliver beside it */
  .bis-floor .sk-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .bis-floor .sk-col { grid-column: 1; grid-row: auto; margin-top: 16px; }
}

/* the room's zoom. A fixed view is what stops the floor sliding under a dragged table; the zoom is
   what makes a fixed view workable, because reaching the far side of a 120x90 hall is now opening
   the view out rather than the view chasing you. */
.bis-floor .sk-zoom { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bis-floor .sk-zlab { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soft); }
.bis-floor .sk-zbtn { width: 28px; height: 28px; flex: 0 0 auto; font: inherit; font-size: 15px;
  font-weight: 700; line-height: 1; cursor: pointer; color: var(--ink);
  background: #fff; border: 1px solid var(--setbox-line); border-radius: 8px; }
.bis-floor .sk-zbtn:hover { border-color: var(--indigo); color: var(--indigo); }
.bis-floor .sk-zsl { flex: 1; min-width: 0; max-width: 220px; accent-color: var(--indigo); }
.bis-floor .sk-zoom b { font-size: 12px; font-weight: 700; color: var(--ink); min-width: 42px; text-align: right; }

/* the right column holds two boxes now: the selected table, then the room's categories */
.bis-floor .sk-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* See It follows the Build pane rather than the registration panel's taller frame (rule 4) */
.bis-seat .see-frame-reg { height: 751px; }
/* the exhibit floor's pair. 777 + the 43px bar = 820, which is what the hall, its legend and the
   inspector make the Build pane at its tallest, so switching tabs does not move the page. The pane
   is scrolled to the step's own heading on arrival (the panel's drive does it), which puts the
   floor and its legend inside the glass; the Continue below them is locked anyway. */
.bis-booth .see-frame-reg { height: 777px; }

/* The exhibit floor keeps its categories UNDER the hall, in a row, which is where the studio's own
   floor editor keeps its legend. Stacked in the right column under the inspector they made that
   column 911px tall and the Build pane 1279, against a See It that wanted 600. */
.bis-booth .sk-body { grid-template-rows: auto auto; align-content: start; }
.bis-booth .sk-floor { grid-row: 1; }
.bis-booth .sk-cats { grid-column: 1; grid-row: 2; margin-top: 16px; }
.bis-booth .sk-col { grid-column: 2; grid-row: 1 / span 2; }
.bis-booth .ef-catrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* in a row they are columns, not a stacked list, so the list's own separators go */
.bis-booth .ef-catrow .sk-cat { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
@media (max-width: 900px) {
  .bis-booth .sk-col { grid-column: 1; grid-row: auto; }
  .bis-booth .sk-cats { grid-row: auto; }
  .bis-booth .ef-catrow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bis-booth .ef-catrow .sk-cat:not(:last-child) { padding-bottom: 12px; margin-bottom: 0;
    border-bottom: 1px solid var(--setbox-line); }
}
.bis-floor .sk-money { display: flex; align-items: center; gap: 6px; }
.bis-floor .sk-money span { font-size: 13.5px; font-weight: 700; color: var(--soft); }
.bis-floor .sk-in-n { max-width: 110px; }
.bis-floor .sk-cats-h { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.bis-floor .sk-cats-n { margin: 6px 0 12px; }
.bis-floor .sk-cat { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px;
  margin-bottom: 12px; border-bottom: 1px solid var(--setbox-line); }
.bis-floor .sk-cat:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.bis-floor .sk-cat-top { display: flex; align-items: center; gap: 8px; }
.bis-floor .sk-cat-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 34px; }
/* the color well: the native input is the hit target, the swatch is what you see */
.bis-floor .sk-sw { position: relative; width: 26px; height: 26px; flex: 0 0 auto; cursor: pointer; }
.bis-floor .sk-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.bis-floor .sk-sw i { display: block; width: 100%; height: 100%; border-radius: 7px; border: 1px solid rgba(0,0,0,.16); }
.bis-floor .sk-cat-nm { flex: 1; min-width: 0; height: 32px; font-size: 12.5px; }
.bis-floor .sk-cat-min { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; }
.bis-floor .sk-cat-n { flex: 0 0 auto; white-space: nowrap; font-size: 11.5px; color: var(--soft); }
.bis-floor .sk-cat-min { display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.bis-floor .sk-cat-min .sk-in-n { width: 52px; max-width: 52px; height: 32px; padding: 0 7px; }

/* ---- Categories folds, so the seat list gets the column (2026-09-21) -------------------------
   Only the SEATING template emits .sk-fold; the exhibit floor keeps its categories in a row under
   the hall and still renders a bare <h4 class="sk-cats-h">, which these rules never reach. */
.bis-floor .sk-fold { display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; text-align: left; cursor: pointer; padding: 0; border: 0; background: none; color: inherit; }
.bis-floor .sk-fold .sk-cats-h { flex: 1; min-width: 0; }
.bis-floor .sk-fold-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--soft);
  background: #fff; border: 1px solid var(--setbox-line); border-radius: 999px; padding: 1px 8px; }
.bis-floor .sk-fold-c { flex: 0 0 auto; color: var(--soft); transition: transform .16s; }
.bis-floor .sk-fold:hover .sk-cats-h, .bis-floor .sk-fold:hover .sk-fold-c { color: var(--indigo); }
.bis-floor .sk-fold[aria-expanded="true"] .sk-fold-c { transform: rotate(180deg); }
.bis-floor .sk-fold:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

/* ---- who is sitting here --------------------------------------------------------------------
   The studio's block, in a 286px column. The list is capped at eight rows and scrolls past that,
   because a 12-seat table would otherwise make the inspector 112px taller than an 8-seat one and
   the pane would grow the first time somebody picked the big table (rule 4 is about inspector
   STATES, and this is one). */
.bis-floor .sk-seatlist { max-height: 272px; overflow-y: auto; margin-top: 2px;
  border: 1px solid var(--setbox-line); border-radius: 9px; background: #fff; }
.bis-floor .sk-seatrow { display: flex; align-items: center; gap: 7px; padding: 5px 8px;
  border-bottom: 1px solid var(--setbox-line); min-height: 34px; }
.bis-floor .sk-seatrow:last-child { border-bottom: 0; }
/* ⚠️ THIS MUST STAY BELOW THE max-height ABOVE. Both selectors are (0,2,0), so source order is the
   whole argument, and written higher up it lost without a word. Below the stack point the column is
   full width under the floor and the page scrolls: a capped list there is a scroller inside a
   scroller, cutting a row in half for nothing, so every chair is simply on screen. */
@media (max-width: 900px) {
  .bis-floor .sk-seatlist { max-height: none; overflow-y: visible; }
}
.bis-floor .sk-seatno { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; color: var(--soft);
  background: var(--setbox); border-radius: 6px; }
.bis-floor .sk-seatno.on { color: #fff; background: #8b91a1; }
.bis-floor .sk-seatwho { flex: 1; min-width: 0; font-size: 12px; color: var(--soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bis-floor .sk-seatwho--named { color: var(--ink); font-weight: 700; }
.bis-floor .sk-seatwho i { font-style: italic; color: var(--faint); }
.bis-floor .sk-seatacts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.bis-floor .sk-seatact { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  padding: 3px 7px; border-radius: 6px; border: 1px solid transparent;
  background: none; color: var(--indigo); }
.bis-floor .sk-seatact:hover { background: color-mix(in srgb, var(--indigo) 10%, #fff); }
.bis-floor .sk-seatclr { color: var(--soft); }
.bis-floor .sk-seatclr:hover { background: #f1f1f4; color: var(--ink); }
.bis-floor .sk-seatok { color: #fff; background: var(--indigo); border-color: var(--indigo); }
.bis-floor .sk-seatok:hover { background: #5512b0; }

/* the editor is two lines so the name field keeps a usable width in a 286px column */
.bis-floor .sk-seatrow--edit { display: block; padding: 8px; background: var(--setbox); }
.bis-floor .sk-seatedit-h { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.bis-floor .sk-seatedit-h b { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.bis-floor .sk-seatedit-r { display: flex; align-items: center; gap: 6px; }
.bis-floor .sk-seatin { flex: 1; min-width: 0; height: 32px; font-size: 12.5px; }
.bis-floor .sk-seatin[aria-invalid="true"] { border-color: #c0392b; background: #fdf6f5; }
.bis-floor .sk-seatedit-r .sk-seatact { padding: 5px 9px; }

/* ---- The preview lock (Registration Form panel) ------------------------------------------------
   The visitor may look at the form and click around inside the step they land on; they may not walk
   it to a checkout that cannot check anything out (every /register/* call is answered `{}` by the
   panel's shim). An attempt pops this instead, which carries the trial pitch.
   ⚠️ It lives in THIS document, never inside the iframe. The form is written at 1180x1500 and
   scaled, so a position:fixed dialog inside it centers on the IFRAME's viewport and lands hundreds
   of pixels below whatever the visitor can see. It did exactly that on the first build.
   z-index clears 200, the highest the site otherwise uses (the sticky header's mega panels). */
#bisiLock { position: fixed; inset: 0; z-index: 900; display: none; align-items: center;
  justify-content: center; padding: 24px; background: rgba(31,30,30,.55); }
#bisiLock.on { display: flex; }
#bisiLock .bl-card { background: #fff; border-radius: 16px; max-width: 470px; width: 100%;
  padding: 28px 28px 22px; text-align: center; box-shadow: 0 24px 56px -16px rgba(31,30,30,.45); }
#bisiLock .bl-h { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink, #1f1e1e); }
#bisiLock .bl-t { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--soft, #5f5d5d);
  text-wrap: pretty; }
/* Quiet dismiss left, primary right - the house order. They wrap to a column on a narrow card
   rather than squeezing, and the primary leads there because it is the one worth tapping. */
#bisiLock .bl-acts { display: flex; flex-wrap: wrap-reverse; justify-content: center;
  align-items: center; gap: 10px; margin-top: 22px; }
#bisiLock .bl-go, #bisiLock .bl-cta { border-radius: 10px; padding: 11px 20px; font: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
#bisiLock .bl-go { border: 1px solid var(--line, #e6e6e6); background: #fff;
  color: var(--soft, #5f5d5d); }
#bisiLock .bl-go:hover { border-color: var(--faint, #8a8888); color: var(--ink, #1f1e1e); }
#bisiLock .bl-cta { border: 1px solid var(--indigo, #6616d0); background: var(--indigo, #6616d0);
  color: #fff; }
#bisiLock .bl-cta:hover { background: var(--indigo-deep, #4d0fa4);
  border-color: var(--indigo-deep, #4d0fa4); }
/* a lone Close (owner 2026-10-07: message plus a way out) is the only control, so it wears the primary */
#bisiLock .bl-go:only-child { border-color: var(--indigo, #6616d0); background: var(--indigo, #6616d0); color: #fff; }
#bisiLock .bl-go:only-child:hover { background: var(--indigo-deep, #4d0fa4); border-color: var(--indigo-deep, #4d0fa4); }

/* ---- Banquet: who is sitting here, under the room (2026-10-09, mirroring WDYE Studio v2.331) ----
   Above the stack point the floor column is a flex column and this panel takes what the room and
   the zoom leave, scrolling inside it, so no table (a 12-top's three rows of cards, an open editor)
   ever grows the pane past its fixed 792. */
.bis-seat .sk-seats { margin-top: 10px; }
.bis-seat .sk-seats .sk-hint { margin: 0; }
.bis-seat .sk-sh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.bis-seat .sk-sh span { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--soft); }
.bis-seat .sk-sedit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--setbox); }
.bis-seat .sk-sedit label { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-right: 4px; }
.bis-seat .sk-sedit .sk-seatin { flex: 1 1 160px; min-width: 0; margin: 0; }
.bis-seat .sk-sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bis-seat .sk-sc { position: relative; display: flex; align-items: center; min-width: 0; border: 1px solid var(--setbox-line); border-radius: 9px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.bis-seat .sk-sc.hi, .bis-seat .sk-sc.ed { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.bis-seat .sk-sc.flash { animation: skScFlash 1.2s ease-out; }
@keyframes skScFlash { 0%, 35% { background: #eef0ff; border-color: #4f46e5; } 100% { background: #fff; } }
.bis-seat .sk-sc-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.bis-seat .sk-sc-no { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: #fff; color: var(--soft); border: 1.5px solid #c9cdd8; }
.bis-seat .sk-sc.gone .sk-sc-no { background: #3d4250; border-color: #3d4250; color: #fff; }
.bis-seat .sk-sc-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--faint); }
.bis-seat .sk-sc.gone .sk-sc-who { color: var(--soft); font-weight: 600; }
.bis-seat .sk-sc.named .sk-sc-who { color: var(--ink); font-weight: 700; }
.bis-seat .sk-sc-clr { flex: none; width: 24px; height: 24px; margin-right: 4px; border: 0; border-radius: 6px; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
.bis-seat .sk-sc-clr:hover { background: var(--setbox); color: var(--ink); }
.bis-seat .sk-seats > .sk-note { margin: 8px 0 0; }
.bis-seat .sk-note-top { margin: 0 0 4px; }
#skRoom .sk-seat.hi circle { stroke: #4f46e5 !important; stroke-width: 3 !important; }
.bis-seat .sk-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 220px; background: #1f2329; color: #fff; border-radius: 9px; padding: 7px 10px; box-shadow: 0 8px 22px rgba(20,22,26,.25); font-size: 13px; line-height: 1.35; }
.bis-seat .sk-tip small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #aeb4be; margin-bottom: 2px; }
.bis-seat .sk-tip b { display: block; font-weight: 700; }
.bis-seat .sk-tip b.dflt { font-weight: 600; font-style: italic; color: #d7d9dd; }
@media (min-width: 901px) {
  .bis-seat .sk-floor { display: flex; flex-direction: column; min-height: 0; }
  .bis-seat .sk-floor #skRoom, .bis-seat .sk-floor .sk-zoom { flex: none; }
  .bis-seat .sk-seats { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 4px; }
}
@media (max-width: 640px) { .bis-seat .sk-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }