/* Hearthstone Ideabook — heart overlay, auth modal, and saved board.
 * Uses the site's brand tokens (--navy/--blue/--cream/--ink/--line) so it
 * inherits palette changes. Loaded sitewide but only paints where its markup
 * is injected (photo tiles) or present (#ideabook-board). */

/* ---- heart overlay on photo tiles ---------------------------------------- */

.ib-wrap {
  position: relative;
  display: block;
}
/* The wrapper must not swallow clicks meant for the lightbox button beneath. */
.ib-wrap > .lightbox-item,
.ib-wrap > .photo-tile {
  display: block;
  width: 100%;
}

.ib-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #fff;
  line-height: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ib-wrap:hover .ib-heart,
.ib-heart:focus-visible,
.ib-heart.is-saved {
  opacity: 1;
}
/* Touch devices have no hover — always show. */
@media (hover: none) {
  .ib-heart { opacity: 1; }
}

.ib-heart__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(7, 19, 29, 0.55);
  backdrop-filter: blur(3px);
  transition: background 0.18s ease, transform 0.12s ease;
}
.ib-heart:hover .ib-heart__icon { background: rgba(7, 19, 29, 0.75); }
.ib-heart:active .ib-heart__icon { transform: scale(0.92); }

/* "Save to ideabook" pill sits to the LEFT of the heart, revealed on hover. */
.ib-heart__pill {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font: 600 12px/1 "Montserrat", system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(7, 19, 29, 0.55);
  backdrop-filter: blur(3px);
  border-radius: 999px 0 0 999px;
  padding: 0;
  margin-right: -19px;
  opacity: 0;
  transition: max-width 0.22s ease, padding 0.22s ease, opacity 0.18s ease;
}
.ib-wrap:hover .ib-heart__pill,
.ib-heart:focus-visible .ib-heart__pill {
  max-width: 160px;
  opacity: 1;
  padding: 11px 26px 11px 14px;
}

/* Saved state: filled coral heart. */
.ib-heart.is-saved .ib-heart__icon {
  background: #e05a4d;
  color: #fff;
}
.ib-heart.is-saved svg path { fill: #fff; stroke: #fff; }

/* ---- toast --------------------------------------------------------------- */

.ib-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  z-index: 9999;
  background: var(--navy, #07131d);
  color: #fff;
  font: 600 14px/1.2 "Nunito Sans", system-ui, sans-serif;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(7, 19, 29, 0.28);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ib-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ---- auth modal ---------------------------------------------------------- */

body.ib-modal-open { overflow: hidden; }

.ib-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 19, 29, 0.62);
  backdrop-filter: blur(4px);
}
.ib-modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 16px;
  padding: 34px 32px 30px;
  box-shadow: var(--shadow, 0 22px 55px rgba(7, 19, 29, 0.14));
  max-height: 92vh;
  overflow-y: auto;
}
.ib-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted, #5a6570);
  cursor: pointer;
}
.ib-modal__title {
  margin: 0 0 8px;
  font: 600 24px/1.2 "Cormorant Garamond", Georgia, serif;
  color: var(--ink, #101923);
}
.ib-modal__lead {
  margin: 0 0 20px;
  font: 400 15px/1.55 "Nunito Sans", system-ui, sans-serif;
  color: var(--muted, #5a6570);
}
.ib-field { display: block; margin-bottom: 14px; }
.ib-field > span {
  display: block;
  margin-bottom: 6px;
  font: 600 13px/1 "Montserrat", system-ui, sans-serif;
  color: var(--ink, #101923);
}
.ib-field em { color: var(--muted, #5a6570); font-style: normal; font-weight: 400; }
.ib-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 9px;
  font: 400 15px/1.2 "Nunito Sans", system-ui, sans-serif;
  color: var(--ink, #101923);
}
.ib-field input:focus {
  outline: none;
  border-color: var(--blue, #0878c9);
  box-shadow: 0 0 0 3px rgba(8, 120, 201, 0.15);
}
/* Chrome/Safari paint autofilled inputs a hard yellow. Repaint them to match
   the modal's white fields (the inset shadow is the only reliable override). */
.ib-field input:-webkit-autofill,
.ib-field input:-webkit-autofill:hover,
.ib-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink, #101923);
  -webkit-box-shadow: 0 0 0 40px #fff inset;
  box-shadow: 0 0 0 40px #fff inset;
  caret-color: var(--ink, #101923);
}
.ib-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 18px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--cream, #f6f3ed);
  font: 400 13px/1.45 "Nunito Sans", system-ui, sans-serif;
  color: var(--ink, #101923);
  cursor: pointer;
}
.ib-check input {
  margin-top: 1px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--blue, #0878c9);
}
.ib-turnstile { margin-bottom: 16px; min-height: 65px; }

.ib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 9px;
  border: 1px solid transparent;
  font: 700 15px/1 "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ib-btn--primary { width: 100%; background: var(--blue, #0878c9); color: #fff; }
.ib-btn--primary:hover { background: var(--blue-strong, #0067ad); }
.ib-btn--ghost { background: transparent; border-color: var(--line, #d9d5ce); color: var(--ink, #101923); }
.ib-btn--ghost:hover { background: var(--cream, #f6f3ed); }
.ib-btn--google {
  width: 100%;
  gap: 10px;
  margin-bottom: 4px;
  background: #fff;
  border-color: var(--line, #d9d5ce);
  color: var(--ink, #101923);
}
.ib-btn--google:hover { background: var(--cream, #f6f3ed); }
.ib-btn--google svg { flex: 0 0 auto; }

.ib-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted, #5a6570);
  font: 400 12px/1 "Montserrat", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ib-or::before,
.ib-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, #d9d5ce);
}

.ib-form__note { margin: 12px 0 0; font: 400 13px/1.4 "Nunito Sans", sans-serif; color: var(--muted, #5a6570); }
.ib-form__msg { margin: 10px 0 0; font: 600 13px/1.4 "Nunito Sans", sans-serif; color: var(--blue-strong, #0067ad); min-height: 18px; }
.ib-form__msg.is-error {
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdeceb;
  color: #b42318;
}
.ib-form__done { text-align: center; padding: 8px 0; }
.ib-form__done strong { display: block; font: 600 20px/1.2 "Cormorant Garamond", serif; color: var(--ink, #101923); margin-bottom: 8px; }
.ib-form__done p { margin: 0; font: 400 15px/1.55 "Nunito Sans", sans-serif; color: var(--muted, #5a6570); }

/* ---- board (/ideabook/) -------------------------------------------------- */

/* These pages have no hero, so the first section sits under the fixed site
   header (~130px incl. the stacked wordmark). Push it clear so the board title
   isn't tucked behind the nav, matching the hero's top padding on real pages.
   Astro inlines global.css AFTER this file's <link>, so its single-class
   `.section { padding: 76px 0 }` shorthand would otherwise win the cascade at
   equal specificity and reset padding-top — the `.section.ib-section` chain
   raises specificity so this override sticks regardless of source order. */
.section.ib-section {
  padding-top: 150px;
  min-height: 70vh;
}

.ib-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ib-board__head h1 {
  margin: 0;
  font: 600 34px/1.1 "Cormorant Garamond", Georgia, serif;
  color: var(--ink, #101923);
}
.ib-board__who { margin: 4px 0 0; font: 400 13px/1.3 "Nunito Sans", sans-serif; color: var(--muted, #5a6570); }
.ib-board__note { margin: 6px 0 26px; font: 400 15px/1.5 "Nunito Sans", sans-serif; color: var(--muted, #5a6570); }
.ib-board__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ib-board__actions .ib-btn { padding: 10px 18px; }
/* .ib-btn--primary's width:100% is for the modal form — not the head button. */
.ib-board__head > .ib-btn { width: auto; }

/* ---- board rail (named boards, #5) --------------------------------------- */

.ib-board-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #d9d5ce);
}
.ib-board-rail__tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ib-board-rail__tools { display: flex; gap: 8px; align-items: center; }

.ib-board-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, #d9d5ce);
  background: #fff;
  color: var(--ink, #101923);
  font: 600 14px/1 "Montserrat", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ib-board-tab:hover { background: var(--cream, #f6f3ed); }
.ib-board-tab.is-active {
  background: var(--navy, #07131d);
  border-color: var(--navy, #07131d);
  color: #fff;
}
.ib-board-tab__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cream, #f6f3ed);
  color: var(--muted, #5a6570);
  font: 700 12px/1.4 "Nunito Sans", sans-serif;
  text-align: center;
}
.ib-board-tab.is-active .ib-board-tab__count { background: rgba(255, 255, 255, 0.2); color: #fff; }
/* Drop target while a card is dragged over a board name. */
.ib-board-tab.is-drop {
  border-color: var(--blue, #0878c9);
  box-shadow: 0 0 0 2px var(--blue, #0878c9);
  background: var(--blue, #0878c9);
  color: #fff;
}

.ib-board-rail__edit { display: inline-flex; gap: 4px; }
.ib-board-rail__pencil,
.ib-board-rail__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line, #d9d5ce);
  background: #fff;
  color: var(--muted, #5a6570);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ib-board-rail__pencil:hover { background: var(--cream, #f6f3ed); color: var(--ink, #101923); }
.ib-board-rail__del:hover { background: #fdeceb; color: #b42318; border-color: #f3b7b1; }
.ib-board-rail__new { width: auto; padding: 8px 16px; }

.ib-btn--danger { width: auto; background: #b42318; color: #fff; border-color: #b42318; }
.ib-btn--danger:hover { background: #9a1e14; }

.ib-empty--board { padding: 32px 24px; }

.ib-board-name__form { display: flex; flex-direction: column; gap: 10px; }
.ib-board-name__input {
  padding: 12px 14px;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 9px;
  font: 400 15px/1.2 "Nunito Sans", system-ui, sans-serif;
  color: var(--ink, #101923);
}
.ib-board-name__input:focus { outline: none; border-color: var(--blue, #0878c9); }
.ib-board-name__err { margin: 0; min-height: 16px; font: 600 13px/1.4 "Nunito Sans", sans-serif; color: #b42318; }
.ib-board-name__form .ib-btn--primary { width: 100%; }

.ib-modal__sub {
  margin: 0 0 18px;
  font: 400 14px/1.55 "Nunito Sans", system-ui, sans-serif;
  color: var(--muted, #5a6570);
}
.ib-share__row { display: flex; gap: 8px; }
.ib-share__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 9px;
  font: 400 14px/1.2 "Nunito Sans", system-ui, sans-serif;
  color: var(--ink, #101923);
  background: var(--cream, #f6f3ed);
}
.ib-share__input:focus { outline: none; border-color: var(--blue, #0878c9); }
.ib-share__row .ib-btn--primary { width: auto; flex: 0 0 auto; }

.ib-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--cream, #f6f3ed);
  border-radius: 14px;
  font: 400 16px/1.6 "Nunito Sans", sans-serif;
  color: var(--muted, #5a6570);
}
.ib-empty a { color: var(--blue, #0878c9); font-weight: 600; }

.ib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.ib-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ib-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--cream, #f6f3ed); }
.ib-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ib-card__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(7, 19, 29, 0.6);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ib-card__remove:hover { background: #e05a4d; }
.ib-card__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 8px; }
.ib-card__cap { margin: 0; font: 600 14px/1.35 "Nunito Sans", sans-serif; color: var(--ink, #101923); }
.ib-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ib-tag {
  font: 600 11px/1 "Montserrat", sans-serif;
  color: var(--blue-strong, #0067ad);
  background: rgba(8, 120, 201, 0.09);
  border-radius: 999px;
  padding: 5px 9px;
}
.ib-card__note {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 8px;
  padding: 8px 10px;
  font: 400 13px/1.4 "Nunito Sans", sans-serif;
  color: var(--ink, #101923);
  resize: vertical;
}
.ib-card__note:focus { outline: none; border-color: var(--blue, #0878c9); box-shadow: 0 0 0 3px rgba(8, 120, 201, 0.12); }
/* The owner's own words are the point of a shared board — show them like a
   pull quote, not muted metadata. */
.ib-card__note-ro { margin: 0; font: italic 400 14px/1.5 "Nunito Sans", sans-serif; color: var(--ink, #101923); }

/* ---- board card v2: chips, save status, details accordion, drag, CTA ----- */

.ib-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ib-chips__label {
  flex: 1 1 100%;
  font: 600 10px/1 "Montserrat", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #5a6570);
}
.ib-chip {
  border: 1px solid rgba(8, 120, 201, 0.28);
  background: rgba(8, 120, 201, 0.07);
  color: var(--blue-strong, #0067ad);
  font: 600 11px/1 "Montserrat", sans-serif;
  border-radius: 999px;
  padding: 5px 9px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ib-chip:hover { background: rgba(8, 120, 201, 0.15); }
.ib-chip.is-on { background: var(--blue, #0878c9); border-color: var(--blue, #0878c9); color: #fff; }
.ib-chip.is-on::before { content: "✓ "; }

.ib-card__status {
  margin: -4px 0 0;
  min-height: 15px; /* reserve the line so "Saving…" never shifts the card */
  font: 600 11px/1.3 "Nunito Sans", sans-serif;
  color: var(--muted, #5a6570);
}
.ib-card__status.is-done { color: #1c7a3a; }
.ib-card__status.is-error { color: #b42318; }

.ib-card__details summary {
  cursor: pointer;
  font: 600 12px/1.3 "Montserrat", sans-serif;
  color: var(--muted, #5a6570);
}
.ib-card__details summary:hover { color: var(--ink, #101923); }
.ib-card__details[open] summary { margin-bottom: 6px; }
.ib-card__details .ib-card__cap { font-weight: 400; font-size: 13px; color: var(--muted, #5a6570); }
.ib-card__details .ib-card__tags { margin-top: 6px; }

.ib-card__drag {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 19, 29, 0.6);
  color: #fff;
  cursor: grab;
  touch-action: none; /* a touch drag reorders — it must not scroll the page */
}
.ib-card__drag:active { cursor: grabbing; }
.ib-card.is-dragging {
  opacity: 0.65;
  outline: 2px dashed var(--blue, #0878c9);
  outline-offset: 2px;
  pointer-events: none; /* so elementFromPoint hits the card underneath */
}

.ib-cta {
  margin-top: 30px;
  padding: 26px 28px;
  border-radius: 14px;
  background: var(--navy, #07131d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ib-cta strong {
  display: block;
  font: 600 22px/1.25 "Cormorant Garamond", Georgia, serif;
  margin-bottom: 4px;
}
.ib-cta p { margin: 0; font: 400 14px/1.5 "Nunito Sans", sans-serif; color: rgba(255, 255, 255, 0.82); }
.ib-cta .ib-btn--primary { width: auto; flex: 0 0 auto; }

/* ---- comments (Release 2): guest + owner threads on a card --------------- */

.ib-comments { border-top: 1px solid #e8e4dc; padding-top: 8px; }
.ib-comments summary {
  cursor: pointer;
  font: 600 12px/1.3 "Montserrat", sans-serif;
  color: var(--muted, #5a6570);
}
.ib-comments summary:hover { color: var(--ink, #101923); }
.ib-comments__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ib-comment {
  position: relative;
  padding-right: 20px;
  font: 400 13px/1.45 "Nunito Sans", sans-serif;
  color: var(--ink, #101923);
}
.ib-comment__who { font-weight: 700; }
.ib-comment__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-comment.is-owner .ib-comment__who { color: var(--blue-strong, #0067ad); }
.ib-comment.is-admin {
  background: #f0f6fb;
  border-left: 3px solid var(--blue, #0878c9);
  padding: 6px 20px 6px 10px;
  border-radius: 0 8px 8px 0;
}
.ib-comment.is-admin .ib-comment__who { color: var(--blue-strong, #0067ad); }
.ib-comment__badge {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--blue, #0878c9);
  color: #ffffff;
  font: 700 10px/1.4 "Montserrat", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.ib-comment__del {
  position: absolute;
  top: -2px;
  right: 0;
  border: none;
  background: none;
  padding: 2px;
  font-size: 15px;
  line-height: 1;
  color: #98a2b3;
  cursor: pointer;
}
.ib-comment__del:hover { color: #b42318; }
.ib-cform { margin-top: 8px; display: grid; gap: 6px; }
.ib-cform__name,
.ib-cform__text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9d4ca;
  border-radius: 8px;
  padding: 7px 9px;
  font: 400 13px/1.4 "Nunito Sans", sans-serif;
  color: var(--ink, #101923);
}
.ib-cform__text { resize: vertical; }
.ib-cform__name:focus,
.ib-cform__text:focus { outline: none; border-color: var(--blue, #0878c9); box-shadow: 0 0 0 3px rgba(8, 120, 201, 0.12); }
/* Honeypot: parked far off-screen; bots fill it, people never see it. */
.ib-cform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ib-cform .ib-btn { justify-self: start; width: auto; padding: 7px 16px; font-size: 12px; }

/* ---- board-level project thread (the ticket) ----------------------------- */
.ib-thread {
  margin: 32px 0 8px;
  padding: 24px;
  background: var(--cream, #f6f3ed);
  border-radius: 14px;
}
.ib-thread__title {
  margin: 0;
  font: 600 24px/1.15 "Cormorant Garamond", Georgia, serif;
  color: var(--ink, #101923);
}
.ib-thread__sub {
  margin: 6px 0 16px;
  font: 400 14px/1.55 "Nunito Sans", system-ui, sans-serif;
  color: var(--muted, #5a6570);
}
.ib-thread__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.ib-tmsg {
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  font: 400 14px/1.5 "Nunito Sans", system-ui, sans-serif;
  color: var(--ink, #101923);
}
.ib-tmsg.is-admin { background: #f0f6fb; border-left: 3px solid var(--blue, #0878c9); border-radius: 0 10px 10px 0; }
.ib-tmsg.is-owner .ib-tmsg__who { color: var(--blue-strong, #0067ad); }
.ib-tmsg__who { font-weight: 700; }
.ib-tmsg__time { margin-left: 6px; font-size: 12px; color: var(--muted, #5a6570); }
.ib-tmsg__body { margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-tmsg__empty {
  padding: 10px 0;
  font: italic 400 14px/1.5 "Nunito Sans", system-ui, sans-serif;
  color: var(--muted, #5a6570);
}
.ib-tform { display: grid; gap: 8px; }
.ib-tform__name,
.ib-tform__text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 9px;
  padding: 10px 12px;
  font: 400 14px/1.45 "Nunito Sans", system-ui, sans-serif;
  color: var(--ink, #101923);
  background: #fff;
}
.ib-tform__text { resize: vertical; }
.ib-tform__name:focus,
.ib-tform__text:focus { outline: none; border-color: var(--blue, #0878c9); box-shadow: 0 0 0 3px rgba(8, 120, 201, 0.12); }
.ib-tform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ib-tform .ib-btn { justify-self: start; width: auto; padding: 9px 18px; font-size: 13px; }

/* ---- R3: header heart + badge, invite banner, start panel, admin link ---- */

/* Heart in the fixed site header — the persistent "back to your ideabook"
   affordance on every page. Static markup in SiteHeader.astro; the count badge
   is hydrated by ideabook.js and stays hidden at zero. */
.ib-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ib-nav:hover,
.ib-nav:focus-visible { background: #e05a4d; border-color: #e05a4d; }
.ib-nav__count {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 999px;
  background: #e05a4d;
  color: #fff;
  font: 700 11px/18px "Montserrat", system-ui, sans-serif;
  text-align: center;
}

/* Admin-only "Leads" pill, injected by JS when /me says role=admin. The link
   is a convenience — the admin pages themselves are session-gated server-side. */
.ib-nav-admin {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fff;
  font: 800 0.62rem/1 "Montserrat", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.ib-nav-admin:hover { background: rgba(8, 120, 201, 0.35); }

@media (max-width: 1050px) and (min-width: 1024px) {
  .ib-nav { width: 36px; height: 36px; }
}
/* The 861-1023 squeeze band has no room left — the nav row already runs into
   its padding, and 46px more pushes the heart offscreen. Hide it; the invite
   banner and saved-toast still route these widths to /ideabook/. */
@media (max-width: 1023px) and (min-width: 861px) {
  .ib-nav { display: none; }
}
@media (max-width: 860px) {
  /* the mobile menu carries the admin link instead */
  .ib-nav-admin { display: none; }
}

/* One-time invite banner under the fixed header's nav row. Injected by JS so
   visitors who dismissed it (or already have saves) never see a flash. */
.ib-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 46px 10px 16px;
  background: var(--blue, #0878c9);
  color: #fff;
  font: 600 13px/1.35 "Nunito Sans", system-ui, sans-serif;
  text-align: center;
}
.ib-banner a {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.ib-banner svg { vertical-align: -2px; }
.ib-banner__x {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.ib-banner__x:hover { background: rgba(7, 19, 29, 0.3); }

/* Empty-board "start your ideabook" pitch. */
.ib-start {
  padding: 44px 28px 46px;
  text-align: center;
  background: var(--cream, #f6f3ed);
  border-radius: 14px;
}
.ib-start h2 {
  margin: 0 0 10px;
  font: 600 30px/1.15 "Cormorant Garamond", Georgia, serif;
  color: var(--ink, #101923);
}
.ib-start > p {
  margin: 0 auto 26px;
  max-width: 600px;
  font: 400 15px/1.6 "Nunito Sans", system-ui, sans-serif;
  color: var(--muted, #5a6570);
}
.ib-start__steps {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: 12px;
}
@media (min-width: 700px) {
  .ib-start__steps { grid-template-columns: repeat(3, 1fr); }
}
.ib-start__steps li {
  background: #fff;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 12px;
  padding: 18px 16px;
  font: 400 13px/1.5 "Nunito Sans", system-ui, sans-serif;
  color: var(--muted, #5a6570);
}
.ib-start__steps b {
  display: block;
  margin-bottom: 4px;
  font: 600 15px/1.3 "Nunito Sans", system-ui, sans-serif;
  color: var(--ink, #101923);
}
.ib-start__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--blue, #0878c9);
  color: #fff;
  font: 700 13px/1 "Montserrat", system-ui, sans-serif;
}
.ib-start__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ib-start__actions .ib-btn { width: auto; }

/* Light variant of the conversion CTA: "start your own" on shared boards. */
.ib-cta--own {
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--line, #d9d5ce);
  color: var(--ink, #101923);
}
.ib-cta--own p { color: var(--muted, #5a6570); }

/* Saved-toast link ("View your ideabook"). */
.ib-toast a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
}

/* ---- R4: board photo lightbox -------------------------------------------- */

/* Board/share cards only — gallery tiles keep the site's own lightbox. */
#ideabook-board .ib-card__media,
#ideabook-share .ib-card__media { cursor: zoom-in; }

.ib-lb {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(7, 19, 29, 0.92);
  backdrop-filter: blur(4px);
}
.ib-lb__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 72px 24px;
}
.ib-lb__fig {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ib-lb__img {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.ib-lb__cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 640px;
}
.ib-lb__loves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
}
.ib-lb__loves-label {
  font: 600 11px/1 "Montserrat", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-right: 2px;
}
.ib-lb__chip {
  font: 600 12px/1 "Nunito Sans", system-ui, sans-serif;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 12px;
}
.ib-lb__note {
  margin: 0;
  font: italic 400 15px/1.5 "Nunito Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.85);
}
.ib-lb__count {
  font: 600 12px/1 "Montserrat", system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}
.ib-lb__close {
  position: absolute;
  top: 12px;
  right: 18px;
  border: none;
  background: none;
  font-size: 36px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  z-index: 2;
}
.ib-lb__close:hover { color: #fff; }
.ib-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ib-lb__nav:hover { background: rgba(255, 255, 255, 0.18); }
.ib-lb__nav--prev { left: 16px; }
.ib-lb__nav--next { right: 16px; }
@media (max-width: 640px) {
  .ib-lb__stage { padding: 50px 12px 14px; }
  .ib-lb__img { max-height: calc(100vh - 230px); }
  .ib-lb__nav { width: 40px; height: 40px; }
  .ib-lb__nav--prev { left: 8px; }
  .ib-lb__nav--next { right: 8px; }
}