/* Event graphics builder — tool-specific styles.
   Everything is scoped under .egb so nothing here leaks into the site shell,
   and prefixed rules beat site.css's element defaults (button, label, input).
   The UI chrome builds on the site.css brand tokens (navy/red/cream, font
   stacks, hard shadows); the embedded ArchivoBlackEmb/ArchivoEmb fonts loaded
   by tool.js are for the rendered graphic only, not the UI. */

.egb {
  display: flex;
  align-items: stretch;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 70vh;
}

/* This tool is a full-width three-pane app — drop the site's column and padding. */
.site-main.egb-main { max-width: none; padding: 0; }

/* ---------- control panels ---------- */

.egb .panel {
  width: 340px;
  min-width: 290px;
  flex: none;
  background: var(--bg);
  padding: 18px 18px 40px;
  /* site.css gives .panel the card treatment; these side panes are flat rails. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.egb .panel--left  { border-right: 1px solid var(--rule); }
.egb .panel--right { border-left: 1px solid var(--rule); }
.egb fieldset { border: 1.5px solid var(--rule); border-radius: 0; padding: 12px; margin: 0 0 14px; min-width: 0; }
.egb legend {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
  padding: 0 6px;
  margin: 0;
}
:is(.egb, .egb-setup) label { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 600; margin: 10px 0 4px; color: var(--ink); }
.egb label:first-of-type { margin-top: 0; }
.egb #ctaWrap label { margin-top: 10px; }   /* first in its wrapper, but not first in the fieldset */
.egb label .sub { font-weight: 400; color: var(--muted); }
:is(.egb, .egb-setup) input[type=text], :is(.egb, .egb-setup) textarea, :is(.egb, .egb-setup) select {
  width: 100%; padding: 8px 9px; border: 1.5px solid var(--navy); border-radius: 0;
  font-family: var(--font-sans); font-size: 13px; background: var(--field-bg); color: var(--ink);
}
:is(.egb, .egb-setup) input[type=text]:focus-visible, :is(.egb, .egb-setup) textarea:focus-visible, :is(.egb, .egb-setup) select:focus-visible {
  outline: 3px solid var(--red); outline-offset: 0;
}
.egb textarea { resize: vertical; min-height: 52px; }

/* Chapter search: a type-to-filter list under the field, styled like the
   email builder's chapter search. */
:is(.egb, .egb-setup) .combo { position: relative; }
:is(.egb, .egb-setup) .combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  list-style: none; margin: 2px 0 0; padding: 0;
  background: var(--field-bg); border: 1.5px solid var(--navy);
  max-height: 260px; overflow-y: auto;
  box-shadow: 4px 4px 0 rgba(44, 54, 89, 0.25);
}
:is(.egb, .egb-setup) .combo-list[hidden] { display: none; }
:is(.egb, .egb-setup) .combo-list li { padding: 7px 10px; cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: var(--navy); line-height: 1.3; }
:is(.egb, .egb-setup) .combo-list li .sub { display: block; font-size: 11px; color: var(--muted); }
:is(.egb, .egb-setup) .combo-list li.on, :is(.egb, .egb-setup) .combo-list li:hover { background: var(--navy); color: var(--cream); }
:is(.egb, .egb-setup) .combo-list li.on .sub, :is(.egb, .egb-setup) .combo-list li:hover .sub { color: var(--cream); opacity: .75; }
:is(.egb, .egb-setup) .combo-list li.cur { font-weight: 700; }   /* the chapter on the graphic now */
:is(.egb, .egb-setup) .combo-list li.none { cursor: default; color: var(--muted); }
:is(.egb, .egb-setup) .combo-list li.none:hover { background: none; color: var(--muted); }
.egb .row { display: flex; gap: 8px; }
.egb .row > div { flex: 1; min-width: 0; }
.egb .iconrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.egb .iconrow label.num {
  margin: 0; width: 14px; flex: none;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 11px; color: var(--navy);
}
.egb .iconrow select.ic { flex: 1; min-width: 0; }
:is(.egb, .egb-setup) .hint { font-family: var(--font-sans); font-size: 11px; color: var(--muted); font-weight: 400; margin: 5px 0 0; line-height: 1.45; }
:is(.egb, .egb-setup) .hint.warn { color: var(--red); font-weight: 700; }
.egb input[type=file] { font-family: var(--font-sans); font-size: 12px; width: 100%; }

/* ---------- buttons (override site.css button defaults) ---------- */

.egb .seg { display: flex; border: 1.5px solid var(--navy); border-radius: 0; overflow: hidden; }
.egb .seg button {
  flex: 1; padding: 8px 4px; border: 0; border-radius: 0; background: var(--field-bg);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink); line-height: 1.3;
}
.egb .seg button:hover { background: var(--cream); color: var(--ink); }
.egb .seg button:disabled, .egb .seg button:disabled:hover { background: var(--field-bg); color: var(--muted); opacity: .5; cursor: not-allowed; }
.egb .seg button.on, .egb .seg button.on:hover { background: var(--navy); color: var(--cream); }

/* The chapter's colours, for reference. Picking happens on the preview. */
.egb .brandrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.egb .brandrow span { display: block; width: 22px; height: 22px; border: 1px solid rgba(0,0,0,.22); }

.egb .linkbtn, .egb .linkbtn:hover {
  background: none; border: 0; color: var(--red); font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; padding: 0; margin-top: 8px;
  box-shadow: none;
}

/* Download bar: sticks to the bottom of the right panel (its scroll box on
   desktop, the viewport on smaller screens), so the buttons never scroll
   out of sight. margin-top:auto keeps it at the bottom when the panel is short. */
.egb .panel--right { display: flex; flex-direction: column; padding-bottom: 0; }
.egb .dlbar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  margin: auto -18px 0; padding: 12px 18px 16px;
  background: var(--bg); border-top: 1.5px solid var(--rule);
}
.egb .dlbar .hint { margin: 0; }
.egb .dlrow { display: flex; gap: 8px; }
.egb .dlrow .btn { flex: 1; min-width: 0; }
.egb .btn {
  display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: var(--radius-btn);
  font-family: var(--font-serif); font-weight: 700;
  font-size: 15px; letter-spacing: 0; text-transform: none; cursor: pointer;
  line-height: 1.3;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.egb .btn.primary {
  background: var(--navy); color: var(--cream);
  box-shadow: var(--btn-shadow);
}
.egb .btn.primary:hover { background: var(--navy); color: var(--cream); box-shadow: 4px 4px 0 var(--red); }
.egb .btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red); }
.egb .btn.secondary, .egb .btn.ghost {
  background: transparent; color: var(--navy); border: 2px solid var(--navy); padding: 10px 12px;
}
.egb .btn.secondary:hover, .egb .btn.ghost:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.egb .btn.ghost { border-style: dashed; }
.egb .btn.secondary:active, .egb .btn.ghost:active { transform: translateY(1px); }

/* ---------- preview stage ---------- */

.egb #stage {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
  /* navy-tinted checkerboard (workspace, not paper) so light-edged graphics stay visible */
  background: repeating-conic-gradient(#d8dbe5 0 25%, #e6e8ef 0 50%) 0 0 / 28px 28px;
}
.egb #preview { max-width: 100%; max-height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.egb #preview svg {
  /* width AND height auto so the max constraints keep the aspect ratio (no
     letterbox gutters when the window is short and wide) */
  width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 48px); display: block;
  /* soft, translucent lift so the preview reads as floating above the
     workspace — a hard shadow looked like part of the exported image */
  filter: drop-shadow(0 10px 28px rgba(44, 54, 89, 0.28));
  overflow: visible;
}
/* Every box, text block and icon in the preview is a click target. tool.js
   draws the hover/selection rings as SVG rects so they scale with the graphic. */
.egb #preview [data-pick] { cursor: pointer; outline: none; }
.egb #preview [data-pick]:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- floating colour bar ---------- */

.egb .pickbar {
  position: fixed; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  max-width: min(600px, calc(100vw - 16px));
  padding: 8px 10px;
  background: var(--bg); border: 2px solid var(--navy); border-radius: 0;
  box-shadow: var(--card-shadow);
  font-family: var(--font-sans);
}
.egb .pickbar[hidden] { display: none; }
.egb .pickbar .pb-title {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); white-space: nowrap;
}
.egb .pickbar .pb-div { width: 1px; align-self: stretch; min-height: 22px; background: var(--rule); }
/* Text elements: their words, editable in the bar (mirrors the side-panel field) */
.egb .pickbar .pb-text { flex: 1 0 100%; display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: start; }
.egb .pickbar .pb-text[hidden] { display: none; }
.egb .pickbar .pb-text:not([hidden]) + .pb-div { display: none; }
.egb .pickbar .pb-text label { margin: 7px 0 0; font-size: 11px; white-space: nowrap; }
.egb .pickbar .pb-text textarea, .egb .pickbar .pb-text input {
  width: 100%; min-height: 0; padding: 6px 8px; border: 1.5px solid var(--navy); border-radius: 0;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.35; background: var(--field-bg); color: var(--ink); resize: vertical;
}
.egb .pickbar .pb-text textarea:focus-visible, .egb .pickbar .pb-text input:focus-visible { outline: 3px solid var(--red); outline-offset: 0; }
.egb .pickbar .pb-slots { display: flex; gap: 4px; }
.egb .pickbar .pb-slots[hidden] { display: none; }
.egb .pickbar .pb-slot, .egb .pickbar .pb-slot:hover {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 3px 8px; border: 1.5px solid var(--navy); border-radius: 0;
  background: var(--field-bg); color: var(--ink); box-shadow: none;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; cursor: pointer;
}
.egb .pickbar .pb-slot.on, .egb .pickbar .pb-slot.on:hover { background: var(--navy); color: var(--cream); }
.egb .pickbar .pb-slot:disabled { opacity: .4; cursor: not-allowed; }
.egb .pickbar .pb-slot .chip { width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.3); display: inline-block; flex: none; }
.egb .pickbar .pb-sw { display: flex; flex-wrap: wrap; gap: 5px; }
.egb .pickbar .pb-sw[hidden] { display: none; }
.egb .pickbar .pb-sw button, .egb .pickbar .pb-sw button:hover {
  width: 30px; height: 30px; min-height: 0; padding: 0; border: 1px solid rgba(0,0,0,.22); border-radius: 0;
  cursor: pointer; color: transparent; box-shadow: none;
}
.egb .pickbar .pb-sw button.sel { outline: 2.5px solid var(--red); outline-offset: 1px; }
.egb .pickbar .pb-custom { display: flex; align-items: center; gap: 6px; }
.egb .pickbar .pb-custom[hidden] { display: none; }
.egb .pickbar .pb-custom label { margin: 0; font-size: 11px; }
.egb .pickbar .pb-custom input[type=color] {
  width: 34px; height: 30px; padding: 1px; border: 1.5px solid var(--navy); border-radius: 0;
  background: var(--field-bg); cursor: pointer;
}
.egb .pickbar .pb-custom input[type=text] {
  width: 78px; height: 30px; padding: 4px 6px; border: 1.5px solid var(--navy); border-radius: 0;
  font-family: var(--font-sans); font-size: 12px; background: var(--field-bg); color: var(--ink);
}
.egb .pickbar .pb-note { font-size: 11px; color: var(--muted); max-width: 320px; line-height: 1.4; }
.egb .pickbar .pb-note[hidden] { display: none; }
.egb .pickbar .pb-close, .egb .pickbar .pb-close:hover {
  margin-left: auto; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: none;
}

/* ---------- setup screen: chapter → design → editor ----------
   The same numbered-steps layout as the email builder's setup screen, in
   this tool's square-cornered style. Each design card shows a live preview
   in the chapter's colours. */
.egb-setup[hidden], .egb-context[hidden], .egb[hidden] { display: none !important; }
.egb-setup { background: var(--bg); }
.egb-setup__inner { max-width: 1120px; margin: 0 auto; padding: 26px 20px 16px; }
.egb-setup__lede {
  font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.55;
  color: var(--navy); margin: 0 0 20px; max-width: 660px;
}
.egb-setup__h {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy); margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--navy);
}
.egb-setup__n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); color: var(--cream); font-size: 0.8rem;
}
.egb-setup__chapter { max-width: 520px; }
.egb-setup__chapter label { color: var(--muted); }
.egb-setup__chapter input[type=text] { min-height: 44px; font-size: 14px; }
.egb-setup__hint { font-family: var(--font-sans); font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.egb-designs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .egb-designs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .egb-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.egb-design {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 12px; margin: 0; min-width: 0;
  text-align: left; cursor: pointer; background: var(--field-bg); color: var(--navy);
  border: 2px solid var(--navy); border-radius: 0; box-shadow: none; font-family: var(--font-sans);
}
.egb-design:hover { border-color: var(--red); background: var(--field-bg); color: var(--navy); }
.egb-design[aria-pressed=true] { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
.egb-design:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.egb-design__frame { position: relative; display: block; }
.egb-design__thumb { display: block; aspect-ratio: 1 / 1; background: #d8dbe5; overflow: hidden; }
.egb-design__thumb svg { display: block; width: 100%; height: 100%; pointer-events: none; }
/* the picked card carries its own way into the editor: clicking it again opens it */
.egb-design__go {
  display: none; position: absolute; left: 8px; right: 8px; bottom: 8px;
  padding: 9px 10px; text-align: center; background: var(--red); color: var(--cream); border-radius: var(--radius-btn);
  font-family: var(--font-serif); font-weight: 700; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.egb-design[aria-pressed=true] .egb-design__go { display: block; }
.egb-design[aria-pressed=true]:hover .egb-design__go { background: var(--navy); }
.egb-design__name { font-weight: 700; font-size: 15px; padding: 2px 4px 0; }
.egb-design__blurb { font-size: 12px; line-height: 1.4; color: var(--muted); padding: 0 4px; font-weight: 400; }
/* stays in view at the bottom of the screen while the cards scroll */
.egb-setup__go {
  position: sticky; bottom: 0; z-index: 2; margin-top: 22px; padding: 12px 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--bg); border-top: 2px solid var(--navy);
}
.egb-setup__err { font-family: var(--font-sans); color: var(--red); font-size: 13px; font-weight: 600; margin: 0; min-height: 1.2em; }

/* the editor's context bar: what's being made, and the way back to setup */
.egb-context {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--navy); color: var(--cream);
}
.egb-context__what {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.egb-context__back {
  background: transparent; color: var(--cream); border: 1.5px solid var(--cream); border-radius: 0;
  padding: 6px 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none;
}
.egb-context__back:hover { background: var(--cream); color: var(--navy); }

/* logo artwork tiles (like the email builder's), each on the colour it will sit on */
.egb .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.egb .logo-tile {
  display: grid; gap: 3px; padding: 3px; margin: 0; min-height: 0; text-align: center;
  background: var(--field-bg); color: var(--navy); border: 2px solid var(--navy); border-radius: 0;
  box-shadow: none; cursor: pointer; font-family: var(--font-sans); font-weight: 600;
}
.egb .logo-tile:hover { border-color: var(--red); background: var(--field-bg); color: var(--navy); }
.egb .logo-tile[aria-pressed=true] { border-color: var(--red); box-shadow: 2px 2px 0 var(--red); }
.egb .logo-tile:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.egb .logo-tile__thumb { display: grid; place-items: center; height: 46px; padding: 5px; overflow: hidden; }
.egb .logo-tile__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.egb .logo-tile__text { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 10px; letter-spacing: 0.06em; }
.egb .logo-tile__label { font-size: 10.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- desktop: the whole tool fits the viewport ----------
   site.css already makes <body> a column flexbox (header / main / footer).
   Lock its height so the workspace takes exactly what is left, the graphic
   fits the stage, and the two panels scroll on their own — no page scroll. */
@media (min-width: 1101px) {
  body.egb-page { height: 100vh; height: 100dvh; overflow: hidden; }
  body.egb-page .site-main.egb-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.egb-page .egb { flex: 1 1 auto; min-height: 0; }
  body.egb-page .egb-setup { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  body.egb-page .egb .panel { overflow-y: auto; }
  body.egb-page .egb #stage { position: static; height: auto; align-self: stretch; }
  body.egb-page .egb #preview { height: 100%; }
  body.egb-page .egb #preview svg { max-height: 100%; }
}

/* ---------- small screens ---------- */

/* Narrow desktop: preview above, two panels side by side below. */
@media (max-width: 1100px) {
  .egb { flex-wrap: wrap; }
  .egb #stage { order: -1; flex-basis: 100%; position: static; height: auto; align-self: stretch; padding: 20px; }
  .egb #preview svg { max-height: 70vh; }
  .egb .panel { flex: 1 1 290px; width: auto; border-top: 1px solid var(--rule); }
}
/* Phones: everything stacked. */
@media (max-width: 640px) {
  .egb { flex-direction: column; flex-wrap: nowrap; }
  .egb #stage { flex-basis: auto; }
  .egb .panel { width: 100%; min-width: 0; border-left: 0; border-right: 0; }
  .egb .panel--right { border-top: 1px solid var(--rule); }
}

/* Wheatpaste's picture panel (2026-09-29) */
.egb .check { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-weight: 600; cursor: pointer; }
.egb .check input { width: auto; margin: 0; accent-color: var(--navy); }
.egb input[type=range] { width: 100%; accent-color: var(--navy); }
.egb #filterSeg { margin-top: 8px; }
/* the crop dialog (photo.js) */
.egb-crop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 24, 40, .72); }
.egb-crop__box { background: var(--cream); border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--red);
  padding: 18px 20px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; }
.egb-crop__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--navy); margin: 0 0 4px; }
.egb-crop__hint { font-size: 13px; color: var(--muted); margin: 0 0 12px; max-width: 620px; }
.egb-crop__stage { position: relative; margin: 0 auto; user-select: none; touch-action: none; background: #222; }
.egb-crop__stage img { display: block; width: 100%; height: 100%; pointer-events: none; }
.egb-crop__rect { position: absolute; border: 2px solid #fff; outline: 1px solid var(--navy);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; }
.egb-crop__rect:focus-visible { outline: 3px solid var(--red); }
.egb-crop__stage { overflow: hidden; }
.egb-crop__h { position: absolute; width: 16px; height: 16px; background: #fff; border: 2px solid var(--navy); }
.egb-crop__h[data-h=nw] { left: -9px; top: -9px; cursor: nwse-resize; }
.egb-crop__h[data-h=ne] { right: -9px; top: -9px; cursor: nesw-resize; }
.egb-crop__h[data-h=sw] { left: -9px; bottom: -9px; cursor: nesw-resize; }
.egb-crop__h[data-h=se] { right: -9px; bottom: -9px; cursor: nwse-resize; }
.egb-crop__size { margin: 8px 0 0; }
.egb-crop__btns { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.egb-crop__btns .btn { width: auto; }
/* setup cards: what each design is best for (Wheatpaste: the speaker photo) */
.egb-design__tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px 2px; }
.egb-design__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 6px; background: var(--navy); color: var(--cream); }
.egb-design__tag--feature { background: var(--red); }
/* the editor's Speaker section: first in the right panel, set apart */
.egb .egb-speaker { background: var(--cream); border: 2px solid var(--navy); box-shadow: 4px 4px 0 var(--red); padding: 12px 14px 14px; }
.egb .egb-speaker legend { background: var(--navy); color: var(--cream); padding: 2px 8px; }
.egb-speaker__lede { font-size: 13px; line-height: 1.45; margin: 4px 0 10px; color: var(--navy); }
.egb .egb-speaker #btnAddPhoto { width: 100%; }
/* "+ Add a speaker photo" over the preview's globe */
.egb-stage-add { position: absolute; z-index: 3; transform: translate(-50%, -50%); padding: 10px 16px;
  background: var(--red); color: var(--cream); border: 2px solid var(--cream); border-radius: var(--radius-btn); box-shadow: 0 3px 14px rgba(0,0,0,.35);
  font-family: var(--font-serif); font-weight: 700; font-size: 15px;
  cursor: pointer; white-space: nowrap; }
.egb-stage-add:hover, .egb-stage-add:focus-visible { background: var(--navy); outline: none; }
.egb-stage-add[hidden] { display: none; }
@media (min-width: 1101px) { body.egb-page .egb #stage { position: relative; } }
@media (max-width: 1100px) { .egb #stage { position: relative; } }
@media (max-width: 640px) { .egb-stage-add { font-size: 13px; padding: 7px 11px; } }
/* setup screen: five designs per row (Tobin: as little scrolling as possible) */
.egb-setup__inner { max-width: 1320px; }
.egb-designs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.egb-design { padding: 6px 6px 10px; gap: 4px; }
.egb-design__name { font-size: 14px; }
.egb-design__blurb { font-size: 11.5px; line-height: 1.35; }
@media (max-width: 1100px) { .egb-designs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .egb-designs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .egb-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* …and a tighter top, so more of the second row shows without scrolling */
.egb-setup__inner { padding-top: 16px; }
.egb-setup__lede { font-size: 0.95rem; line-height: 1.45; margin-bottom: 8px; max-width: 900px; }
.egb-setup__h { margin: 14px 0 8px; padding-bottom: 4px; }
.egb-setup__chapter #chapterField > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.egb-setup__chapter input[type=text] { min-height: 38px; }
.egb-setup__chapter .hint:empty { display: none; }
.egb-setup__hint { margin: -2px 0 8px; }

/* ================= the page in the tools home's look (2026-10-09) =================
   The page wears the home's rail (assets/rail.js + home.js page mode): body.landing. The setup
   screen gets the home's header and section head (the builder's own intro and step heads stay in
   the markup for form mode, where they show), design cards become My assets' tiles; the editor gets
   a small cream bar (.tp-bar) and the rail folded to its icons, panels as white cards with the
   home's red kickers, pill switches, rounded fields, logo tiles and buttons. Without the rail (form
   mode, embeds) none of this applies: everything below is under .landing. */

/* ---------- the page ---------- */

body.landing.egb-page .content.egb-main { padding: 0; }
.landing .egb-setup { padding: 34px 40px 0; }
/* Desktop: the whole tool fits the window (tool.css's rule, for the rail's column). */
@media (min-width: 1101px) {
  body.landing.egb-page .content.egb-main { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
}

/* ---------- setup ---------- */

.landing .egb-setup { background: transparent; }
.landing .egb-setup__inner { max-width: 1240px; margin: 0; padding: 0; gap: 22px; }
/* With the rail: the home's header and section head stand in for the builder's own intro and step
   heads, and the chapter is the rail's, so its step goes (the field stays in the page; tool.js
   moves it into the editor). Without the rail (form mode, embeds): the builder's own, as before. */
.landing .egb-setup__lede, .landing .egb-setup__h { display: none; }
body:not(.landing) .egb-setup .tp-head, body:not(.landing) .egb-setup .tp-sec__h { display: none; }
body.landing[data-chapter]:not(.rail-chapter-missing) .egb-setup__chapter { display: none; }
.landing .egb-setup__hint { margin: 2px 0 0; font-family: var(--font-serif); font-size: 13px; }

/* Design cards: My assets' tiles. */
.landing .egb-designs { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.landing .egb-design {
  padding: 0 0 12px; gap: 6px;
  background: #fff; border: 1.5px solid rgba(44, 54, 89, 0.2); border-radius: 12px; overflow: hidden;
  font-family: var(--font-serif);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.landing .egb-design:hover { border-color: var(--navy); }
.landing .egb-design[aria-pressed=true] {
  border: 2px solid var(--navy); box-shadow: 4px 4px 0 var(--b-rail, var(--red)); transform: translate(-1px, -1px);
}
.landing .egb-design__thumb { border-bottom: 1px solid rgba(44, 54, 89, 0.12); margin-bottom: 4px; }
.landing .egb-design__name { font-size: 16px; padding: 2px 12px 0; }
.landing .egb-design__blurb { font-family: var(--font-serif); font-size: 12.5px; padding: 0 12px; color: var(--home-meta); }
.landing .egb-design__tags { padding: 0 12px; }
.landing .egb-design__tags { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.landing .egb-design__tags > * {
  font-family: var(--font-display) !important; font-stretch: 125%; font-weight: 800 !important; font-size: 9.5px !important;
  letter-spacing: 0.1em !important; text-transform: uppercase; line-height: 1.4 !important;
  background: transparent !important; color: var(--red) !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.landing .egb-design__go { left: 10px; right: 10px; bottom: 10px; background: var(--navy); box-shadow: 3px 3px 0 var(--red); }
.landing .egb-design[aria-pressed=true]:hover .egb-design__go { background: var(--red); box-shadow: 3px 3px 0 var(--navy); }

/* The bar that stays at the bottom while the cards scroll. */
.landing .egb-setup__go { border-top: 1.5px solid var(--home-rule); padding: 14px 0; margin-top: 4px; }

/* ---------- editor ---------- */

.landing .egb-context.tp-bar { padding: 12px 22px; color: var(--navy); background: var(--cream); justify-content: flex-start; }
.landing .egb-context__what { font: inherit; letter-spacing: 0; text-transform: none; }
.landing .tp-bar__title { font-family: var(--font-serif); font-weight: 700; }

.landing .egb { background: var(--cream); font-family: var(--font-serif); }
.landing .egb .panel { background: transparent; padding: 16px 16px 40px; }
.landing .egb .panel--left { border-right: 1.5px solid var(--home-rule); }
.landing .egb .panel--right { border-left: 1.5px solid var(--home-rule); }
.landing .egb fieldset {
  background: #fff; border: 1.5px solid rgba(44, 54, 89, 0.18); border-radius: 12px;
  padding: 12px 14px 14px; margin: 0 0 14px;
}
.landing .egb legend {
  float: left; width: 100%; padding: 0; margin: 0 0 10px;
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--red);
}
.landing .egb legend + * { clear: both; }
.landing :is(.egb, .egb-setup) label { font-family: var(--font-serif); font-size: 13.5px; font-weight: 700; color: var(--navy); }
.landing .egb label .sub { font-weight: 400; color: var(--home-meta); }
.landing :is(.egb, .egb-setup) input[type=text], .landing :is(.egb, .egb-setup) textarea, .landing :is(.egb, .egb-setup) select {
  border: 1.5px solid rgba(44, 54, 89, 0.55); border-radius: 8px; font-family: var(--font-serif); font-size: 14px; padding: 8px 10px;
}
.landing .egb .hint { font-family: var(--font-serif); font-size: 12.5px; color: var(--home-meta); }

/* Square / Portrait and the other switches: My assets' pill switch. */
.landing .egb .seg { border: 0; border-radius: 0; overflow: visible; display: inline-flex; flex-wrap: wrap; }
.landing .egb .seg button {
  font: 700 13px/1.15 var(--font-serif); color: var(--navy); background: transparent;
  border: 1.5px solid var(--navy); margin-left: -1.5px; padding: 8px 12px; min-height: 32px; box-shadow: none;
}
.landing .egb .seg button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; padding-left: 14px; }
.landing .egb .seg button:last-child { border-radius: 0 999px 999px 0; padding-right: 14px; }
.landing .egb .seg button.on, .landing .egb .seg button.on:hover { background: var(--navy); color: var(--cream); }

/* Logo tiles: My assets' tiles, small. */
.landing .egb .logo-tile { border: 1.5px solid rgba(44, 54, 89, 0.2); border-radius: 10px; overflow: hidden; padding: 0 0 4px; }
.landing .egb .logo-tile:hover { border-color: var(--navy); }
.landing .egb .logo-tile[aria-pressed=true] { border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--b-rail, var(--red)); }
.landing .egb .logo-tile__label { font-family: var(--font-serif); font-size: 11px; font-weight: 700; }

/* Downloads: the site's buttons. */
.landing .egb .dlbar { background: var(--cream); border-top: 1.5px solid var(--home-rule); }

/* The footer: a slim bar under the editor and the setup screen (the window-locked layout's last row,
   where Globert stands, as on the shell's footer before). */
.landing .egb-foot { margin: 0; padding: 4px 22px; max-width: none; border-top: 1.5px solid var(--home-rule); }
.landing .egb .egb-speaker { border: 2px solid var(--navy); box-shadow: 4px 4px 0 var(--red); }
.landing .egb .egb-speaker legend { background: none !important; color: var(--red) !important; padding: 0 !important; }
body:not(.landing) .egb-foot { display: none; }   /* (an embed, the event form's graphic step: no footer, as before) */