/* The feature board: the pill, the submit form, and the board at #/feedback.
   The form sits on the sign-in dialog's layer, card, fields and buttons
   (account.css); the board sits in the report's panel box (chrome.css) and
   takes the report's dark title band. */

:root {
  --fb-ease: cubic-bezier(.22, .61, .36, 1);
  --fb-glide: cubic-bezier(.16, 1, .3, 1);   /* fast out, long soft landing */
  --fb-away: cubic-bezier(.7, 0, .84, 0);    /* slow start, quick finish */
}

/* ── The pill ─────────────────────────────────────────────────────────── */
#fbbtn {
  transition: right .3s var(--fb-ease), bottom .3s var(--fb-ease),
              transform .16s var(--fb-ease), box-shadow .2s ease, color .15s ease;
}
#fbbtn:hover { transform: translateY(-1px); }
#fbbtn:active { transform: scale(.97); }
body.fb-open #fbbtn { visibility: hidden; }
/* On the report it moves into the panel's own corner: its map-side place
   would sit across the panel's edge and over the map's controls. */
body[data-view="report"] #fbbtn { right: calc(var(--report-strip) + 24px); bottom: 16px; }
body[data-view="report"] #report { padding-bottom: 72px; }

/* ── The dialog: in, between its states, and out ──────────────────────── */
.fb-scrim { opacity: 0; transition: opacity .2s ease; }
.fb-scrim.fb-show { opacity: 1; }
.fb-layer .fb-card {
  opacity: 0; transform: translateY(12px) scale(.985); will-change: opacity, transform;
  transition: opacity .2s ease, transform .28s var(--fb-ease);
}
.fb-layer.fb-show .fb-card { opacity: 1; transform: none; }
.fb-card.fb-sizing {
  overflow: hidden;
  transition: opacity .2s ease, transform .28s var(--fb-ease), height .28s var(--fb-ease);
}
.fb-body { transition: opacity .12s ease; }
.fb-body.fb-out { opacity: 0; }

/* ── The form ─────────────────────────────────────────────────────────── */
.fb-card { width: min(480px, 100%); padding: 26px 28px 22px; }
.fb-h {
  margin: 0 0 6px; padding-right: 44px; font-family: var(--font-display);
  font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text);
  text-wrap: balance;
}
.fb-h:focus { outline: none; }
.fb-sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.fb-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.fb-card .eik-inp { width: 100%; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; }
.fb-labrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.fb-labrow .eik-lab { margin-bottom: 0; }
.fb-n {
  font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(2px); transition: opacity .2s ease, transform .2s var(--fb-ease), color .2s ease;
}
.fb-n.on { opacity: 1; transform: none; }
.fb-n.full { color: var(--destructive); }
.fb-desc { min-height: 88px; max-height: 320px; padding-top: 11px; line-height: 1.45; resize: vertical; font-family: var(--font-sans); }
.fb-other { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .26s var(--fb-ease), opacity .18s ease; }
.fb-other.on { grid-template-rows: 1fr; opacity: 1; }
.fb-other-in { min-height: 0; overflow: hidden; }
.fb-other .eik-inp { margin-top: 8px; }
/* Said once, right where the post is made: the board is shared by everyone using Eikos. */
/* Neutral, so blue stays for the one box that asks something of the reader: the duplicate nudge. */
.fb-public {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; padding: 11px 13px;
  border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-stone); color: var(--text-body);
}
.fb-public svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--text-muted); }
.fb-public p { margin: 0; font-size: 13px; line-height: 1.5; }
.fb-public b { color: var(--text); font-weight: 600; }
.fb-public .fb-private { margin-top: 6px; color: var(--text-body); }
.fb-private a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fb-private a:hover { color: #053d73; }
.fb-private a:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; border-radius: 3px; }
.fb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Role and Area of work: the page's own list, in the sort menu's card, rows and tick. */
.fb-pick { position: relative; }
.fb-pick-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 42px; padding: 0 12px 0 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); font: 400 14px/1.2 var(--font-sans); text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-pick-btn:hover { border-color: #00000033; }
.fb-pick-btn:focus-visible, .fb-pick.open .fb-pick-btn {
  outline: none; border-color: var(--brand-line); box-shadow: 0 0 0 3px #008cff26;
}
.fb-pick-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-pick-v.unset { color: var(--text-muted); }
.fb-pick-btn svg { flex: none; width: 16px; height: 16px; color: var(--text-muted); transition: transform .2s var(--fb-ease); }
.fb-pick.open .fb-pick-btn svg { transform: rotate(180deg); color: var(--brand); }
.fb-pick-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5;
  max-height: 216px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #051c2333 transparent;
  margin: 0; padding: 4px; list-style: none;
  border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface);
  box-shadow: 0 8px 24px rgba(5, 28, 35, .16);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity .14s ease, transform .18s var(--fb-ease);
}
.fb-pick.open .fb-pick-list { opacity: 1; transform: none; }
.fb-pick-list[hidden] { display: none; }
.fb-pick-list::after {
  content: ""; position: sticky; bottom: -4px; display: block; height: 28px; margin: -28px -4px -4px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface) 85%);
  pointer-events: none; opacity: 0; transition: opacity .18s ease;
}
.fb-pick-list.more::after { opacity: 1; }
.fb-pick-list::-webkit-scrollbar { width: 8px; }
.fb-pick-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #051c2333 padding-box; }
.fb-pick-list::-webkit-scrollbar-track { background: transparent; }
.fb-pick-list li {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px;
  color: var(--text); font: 500 13.5px/1.3 var(--font-sans); cursor: pointer;
}
.fb-pick-list li::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: no-repeat center / 13px 13px;
}
.fb-pick-list li.active { background: #f2f6f8; }
.fb-pick-list li.unset { color: var(--text-muted); }
.fb-pick-list li[aria-selected="true"] { color: var(--brand); font-weight: 600; }
.fb-pick-list li[aria-selected="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064d90' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}
.fb-submit { transition: background-color .15s ease, opacity .15s ease; }
.fb-submit.busy { opacity: .8; cursor: progress; }

/* ── The duplicate nudge: it opens and closes rather than jumping ─────── */
.fb-nudge {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0;
  transition: grid-template-rows .28s var(--fb-ease), opacity .2s ease, margin .28s var(--fb-ease);
}
.fb-nudge.on { grid-template-rows: 1fr; opacity: 1; margin: -2px 0 14px; }
.fb-nudge-in { min-height: 0; overflow: hidden; }
.fb-nudge-box { padding: 12px 12px 10px; border-radius: 12px; background: var(--brand-soft); }
.fb-nudge-h { margin: 0; font: 600 13px/1.3 var(--font-sans); color: var(--text); }
.fb-nudge-s { margin: 2px 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-body); }
.fb-nudge ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fb-match {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 12px; border-radius: 9px; background: var(--surface);
}
.fb-mt { flex: 1; min-width: 0; font: 600 13.5px/1.3 var(--font-sans); color: var(--text); }
.fb-mt small { display: block; margin-top: 4px; font-weight: 400; font-size: 12px; color: var(--text-muted); }

/* ── The vote ─────────────────────────────────────────────────────────── */
.fb-vote {
  flex: none; width: 52px; min-height: 58px; padding: 7px 0 8px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: 700 15px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s var(--fb-ease);
}
.fb-vote svg { width: 18px; height: 18px; color: var(--text-muted); transform-origin: 45% 70%; transition: color .18s ease, transform .18s var(--fb-ease); }
.fb-vote .th { fill: none; transition: fill .18s ease; }
/* Voted: the thumb fills in. */
.fb-vote[aria-pressed="true"] .th { fill: currentColor; }
.fb-vote b { display: block; font-weight: 700; }
button.fb-vote:hover { border-color: var(--brand-line); color: var(--brand); box-shadow: 0 2px 10px rgba(0, 140, 255, .14); }
button.fb-vote:hover svg { color: var(--brand); transform: rotate(-8deg); }
button.fb-vote:active { transform: scale(.95); }
.fb-vote[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.fb-vote[aria-pressed="true"] svg { color: #fff; }
button.fb-vote[aria-pressed="true"]:hover { background: #053d73; border-color: #053d73; color: #fff; }
button.fb-vote[aria-pressed="true"]:hover svg { color: #fff; }
button.fb-vote[aria-disabled="true"] { cursor: default; }
button.fb-vote[aria-disabled="true"]:hover { background: var(--brand); border-color: var(--brand); box-shadow: none; }
button.fb-vote[aria-disabled="true"]:hover svg { transform: none; }
button.fb-vote[aria-disabled="true"]:active { transform: none; }
.fb-vote:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
.fb-vote.bump b { animation: fb-bump .36s var(--fb-ease); }
.fb-vote.bump svg { animation: fb-thumb .5s var(--fb-glide); }
@keyframes fb-thumb { 30% { transform: rotate(-18deg) scale(1.25); } 65% { transform: rotate(6deg) scale(.96); } }
@keyframes fb-bump { 40% { transform: translateY(-3px) scale(1.14); } }
.fb-vote.fb-vote-row {
  width: auto; min-height: 34px; padding: 0 12px 0 10px; flex-direction: row; gap: 5px;
  border-color: var(--brand-line); border-radius: 999px; color: var(--brand); font-size: 13px;
}
.fb-vote.fb-vote-row svg { width: 15px; height: 15px; color: var(--brand); }
.fb-vote.fb-vote-sm { width: 44px; min-height: 50px; border-radius: 10px; font-size: 14px; }
.fb-vote.fb-vote-sm svg { width: 16px; height: 16px; }
.fb-vote.fb-vote-row[aria-pressed="true"] { color: #fff; }
.fb-vote.fb-vote-row[aria-pressed="true"] svg { color: #fff; }

/* ── The thanks state ─────────────────────────────────────────────────── */
#fb-confetti { z-index: 94; }
.fb-ok {
  position: relative; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  animation: fb-pop .42s var(--fb-ease) .08s both;
}
.fb-ok svg { width: 24px; height: 24px; }
/* The mark draws itself in one stroke once the disc has landed, and a ring spreads from it. */
.fb-ok svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fb-draw .5s var(--fb-glide) .32s forwards; }
@keyframes fb-draw { to { stroke-dashoffset: 0; } }
.fb-ok::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-line);
  opacity: 0; animation: fb-ring .9s ease-out .3s;
}
@keyframes fb-ring { 0% { opacity: .55; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes fb-pop { from { opacity: 0; transform: scale(.6); } }
.fb-post {
  display: flex; align-items: center; gap: 14px; margin: 2px 0 14px;
  padding: 12px 14px 12px 12px; border: 1px solid var(--border); border-radius: 12px;
}
.fb-post .fb-vote { cursor: default; }
.fb-pt { font: 600 14.5px/1.35 var(--font-sans); color: var(--text); }
.fb-pm { margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.fb-promise {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 10px;
  background: var(--surface-stone); font-size: 13.5px; line-height: 1.5; color: var(--text-body);
}
.fb-promise b { color: var(--text); font-weight: 600; }
.fb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.fb-by { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.fb-av {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font: 700 9px/1 var(--font-sans); letter-spacing: .02em;
}
.fb-av.av-1 { background: var(--brand-soft); color: var(--brand); }
.fb-av.av-2 { background: #9edfff99; color: var(--brand-deep); }
.fb-av.av-3 { background: var(--surface-greyblue); color: var(--text-body); }
.fb-av.mine { background: var(--brand); color: #fff; }

/* ── The board ────────────────────────────────────────────────────────── */
/* Its box is stated here as well as with the report's, because it stays on screen for its exit
   after the view has already changed. */
#board {
  position: fixed; top: 0; bottom: 0; left: 0; right: var(--report-strip); z-index: 68;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ground); color: var(--text); font: 15px/1.55 var(--font-sans);
  box-shadow: 18px 0 60px rgba(5, 28, 35, .34);
}
#board[hidden] { display: none; }

/* ── The panel: in and out ────────────────────────────────────────────
   It slides out from the left edge it is pinned to, then its contents rise in behind it. Only
   transform and opacity move, so the compositor runs it without repainting the panel each frame,
   even while the map is busy. Its close button lives outside it for that reason. */
body[data-view="feedback"] #board { animation: bd-panel-in .64s var(--fb-glide) both; }
@keyframes bd-panel-in { from { transform: translateX(-100%); } to { transform: none; } }
#board.bd-leaving { z-index: 71; pointer-events: none; animation: bd-panel-out .42s var(--fb-away) both; }
@keyframes bd-panel-out { from { transform: none; } to { transform: translateX(-100%); } }
#board.bd-leaving .bd-wrap { opacity: 0; transition: opacity .2s ease; }

#board.bd-arrive .bd-hero::after { animation: bd-bloom 1.3s ease-out both; }
@keyframes bd-bloom { from { opacity: 0; transform: scale(1.12); } }
#board.bd-arrive .bd-hero .bd-wrap > * { animation: bd-rise .7s var(--fb-glide) backwards; }
#board.bd-arrive .bd-hero .bd-wrap > :nth-child(1) { animation-delay: .1s; }
#board.bd-arrive .bd-hero .bd-wrap > :nth-child(2) { animation-delay: .16s; }
#board.bd-arrive .bd-hero .bd-wrap > :nth-child(3) { animation-delay: .22s; }
#board.bd-arrive .bd-hero .bd-wrap > :nth-child(4) { animation-delay: .28s; }
@keyframes bd-rise { from { opacity: 0; transform: translateY(16px); } }
#board-x.bd-arrive { animation: bd-turn-in .6s var(--fb-glide) .32s backwards; }
@keyframes bd-turn-in { from { opacity: 0; transform: scale(.6) rotate(-90deg); } }

/* ── The bar that stays ────────────────────────────────────────────── */
.bd-sticky { position: sticky; top: 0; z-index: 4; height: 0; }
.bd-sticky-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center;
  background: rgba(5, 28, 35, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(158, 223, 255, .14), 0 12px 32px rgba(5, 28, 35, .22);
  opacity: 0; transform: translateY(-100%);
  transition: transform .38s var(--fb-glide), opacity .22s ease;
}
#board.bd-scrolled .bd-sticky-bar { opacity: 1; transform: none; }
.bd-sticky-in { display: flex; align-items: center; gap: 14px; width: 100%; }
.bd-sticky-t { font: 600 18px/1 var(--font-display); letter-spacing: -.01em; color: var(--on-dark); }
.bd-sticky-c { font-size: 13px; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.bd-cta.bd-cta-sm { min-height: 36px; margin-left: 6px; padding: 0 14px 0 12px; font-size: 13px; }
.bd-cta.bd-cta-sm svg { width: 14px; height: 14px; }
/* The close button settles into the bar's middle while the bar is down. */
#board-x { transition: top .38s var(--fb-glide), background-color .15s, transform .12s; }
#board.bd-scrolled ~ #board-x { top: 15px; }

/* ── While the board loads ────────────────────────────────────────── */
.bd-skel .bd-row { pointer-events: none; }
.sk {
  position: relative; display: block; overflow: hidden; border-radius: 6px; background: #eceff1;
}
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: sk-shine 1.4s ease-in-out infinite;
}
@keyframes sk-shine { to { transform: translateX(100%); } }
.sk-vote { flex: none; width: 52px; height: 58px; border-radius: 12px; }
.sk-t { width: 46%; height: 16px; margin: 4px 0 12px; }
.sk-l { width: 100%; height: 11px; margin-bottom: 9px; }
.sk-l.sk-short { width: 72%; }
.sk-m { width: 34%; height: 10px; margin-top: 16px; }
.bd-skel .bd-row:nth-child(2) .sk::after { animation-delay: .12s; }
.bd-skel .bd-row:nth-child(3) .sk::after { animation-delay: .24s; }
.bd-skel .bd-row:nth-child(4) .sk::after { animation-delay: .36s; }
.bd-skel .bd-main { flex: 1; }
/* On the dark band the placeholders are light, and they hold the band at its full height. */
.bd-hero .sk { background: rgba(255, 255, 255, .1); }
.bd-hero .sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); }
.sk-cta { width: 190px; height: 44px; border-radius: 999px; }
.sk-count { width: 150px; height: 12px; }
.bd-hero .bd-bar-in, #board.bd-arrive .bd-hero .bd-wrap > .bd-bar-in { animation: bd-fade .32s ease both; }
@keyframes bd-fade { from { opacity: 0; } }

/* The free-trial banner floats over the cards as they scroll; the board keeps it out of the way. */
body[data-view="feedback"] #eik-trial { display: none !important; }

/* ── The Ideas pane in the left panel ─────────────────────────────── */
#panel-body > details.psec[data-pane="ideas"] > summary { display: none; }
#panel-body > details.psec[data-pane="ideas"] { border-top: 0; }
#ideas { padding: 6px 0 20px; }
.ip-sec + .ip-sec { margin-top: 24px; padding-top: 20px; }
.ip-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.ip-h { margin: 0 0 10px; font: 600 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ip-head .ip-h { margin: 0; }
.ip-all { color: var(--brand); font: 600 13px/1 var(--font-sans); text-decoration: none; }
.ip-all:hover { color: #053d73; text-decoration: underline; text-underline-offset: 2px; }
.ip-top { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ip-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px;
  border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ip-row:hover { border-color: var(--border); box-shadow: 0 4px 16px rgba(5, 28, 35, .06); }
.ip-row.moving { transition: transform .56s var(--fb-glide), scale .3s var(--fb-glide), box-shadow .3s ease; }
.ip-row.overtaking { z-index: 2; scale: 1.02; box-shadow: 0 12px 30px rgba(5, 28, 35, .16); }
.ip-t { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.ip-tt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 600 14px/1.35 var(--font-sans); transition: color .15s ease;
}
.ip-t:hover .ip-tt { color: var(--brand); }
.ip-t:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 3px; border-radius: 6px; }
.ip-t small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.ip-none { margin: 0; font-size: 13.5px; color: var(--text-body); }
.ip-add {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin-top: 10px;
  border: 1px dashed #00000026; border-radius: 12px; background: transparent;
  color: var(--brand); font: 600 13px/1 var(--font-sans); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ip-add svg { width: 14px; height: 14px; }
.ip-add:hover { background: #cdeeff66; border-color: var(--brand-line); }
.ip-add:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
/* What's new, as a quiet timeline: the newest dot filled, the rest open. */
.ip-log { position: relative; margin: 0; padding: 0; list-style: none; }
.ip-log li { position: relative; padding: 0 0 16px 22px; }
.ip-log li:last-child { padding-bottom: 0; }
.ip-log li::before {
  content: ""; position: absolute; left: 3px; top: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px #051c2366;
}
.ip-log li:first-child::before { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ip-log li:not(:last-child)::after {
  content: ""; position: absolute; left: 7px; top: 18px; bottom: 2px; width: 1px; background: var(--border);
}
.ip-log b { display: block; font: 600 13.5px/1.35 var(--font-sans); color: var(--text); }
.ip-log li > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.ip-log-from { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--brand); }
.ip-log-media { display: block; width: 100%; max-height: 200px; margin-top: 8px; border-radius: 8px; object-fit: cover; background: var(--brand-soft); }
.ip-log-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--brand); }
/* The board's What's new: wide, a picture left of its text, and a click opens the entry. */
.ip-log-wide .ip-log-item { cursor: pointer; border-radius: 8px; }
.ip-log-wide .ip-log-item:hover b { text-decoration: underline; text-underline-offset: 2px; }
.ip-log-wide .ip-log-item:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 4px; }
.ip-log-wide .ip-log-item.has-pic { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 16px; align-items: stretch; }
.ip-log-wide .ip-log-text { min-width: 0; }
.ip-log-wide .ip-log-text > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.ip-log-wide .ip-log-text { grid-column: 2; }
/* The picture is as tall as the text beside it. */
.ip-log-pic { position: relative; grid-column: 1; grid-row: 1; min-height: 88px; overflow: hidden; border-radius: 8px; background: var(--brand-soft); }
.ip-log-pic img, .ip-log-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 520px) {
  .ip-log-wide .ip-log-item.has-pic { grid-template-columns: minmax(0, 1fr); gap: 8px 0; }
  .ip-log-wide .ip-log-pic, .ip-log-wide .ip-log-text { grid-column: 1; }
  .ip-log-wide .ip-log-pic { grid-row: 1; min-height: 0; height: 150px; }
  .ip-log-wide .ip-log-text { grid-row: 2; }
}
.fb-card.fb-read { width: min(640px, 100%); padding: 0 0 24px; overflow: hidden; }
.fb-read #fb-read-body { padding: 0 28px; }
.fb-read-media { display: block; width: calc(100% + 56px); max-height: 340px; margin: 0 -28px 20px; object-fit: cover; background: var(--brand-soft); }
.fb-read .fb-h { margin-top: 26px; }
.fb-read-media + .fb-h { margin-top: 0; }
.fb-read-text p { margin: 0 0 .7em; font-size: 15px; line-height: 1.6; color: var(--text-body); white-space: pre-line; }
.fb-read .eik-close { z-index: 2; }
.ip-sign p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
#ideas.ip-in .ip-row, #ideas.ip-in .ip-log li { animation: bd-in .5s var(--fb-glide) backwards; animation-delay: calc(var(--i, 0) * 40ms); }

/* Back on the map, the pill rises into its corner rather than appearing. */
#fbbtn { animation: fb-pill-in .5s var(--fb-glide) .16s backwards; }
@keyframes fb-pill-in { from { opacity: 0; transform: translateY(10px); } }
.bd-wrap { max-width: 1040px; padding: 0 64px; }

.bd-hero { position: relative; overflow: hidden; padding: 64px 0 34px; background: #051c23; color: #fff; }
.bd-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 340px at 82% -8%, rgba(158, 223, 255, .13), transparent 68%),
              radial-gradient(520px 280px at 8% 108%, rgba(158, 223, 255, .07), transparent 70%);
}
.bd-hero .bd-wrap { position: relative; z-index: 1; }
.bd-eyebrow {
  margin: 0 0 12px; font: 600 13.5px/1.5 var(--font-display);
  letter-spacing: .075em; text-transform: uppercase; color: #fff;
}
.bd-h {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 44px; line-height: 1.08; letter-spacing: -.025em; color: var(--on-dark);
}
.bd-lede { max-width: 52ch; margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--brand-accent); }
.bd-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.bd-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; background: var(--surface); color: var(--brand-deep);
  font: 600 14px/1 var(--font-sans); cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
  transition: transform .16s var(--fb-ease), box-shadow .2s ease, background-color .15s ease;
}
.bd-cta svg { width: 16px; height: 16px; }
.bd-cta:hover { transform: translateY(-1px); background: var(--brand-soft); box-shadow: 0 6px 20px rgba(0, 0, 0, .32); }
.bd-cta:active { transform: scale(.97); }
.bd-cta:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
.bd-count { font-size: 14px; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }

.bd-body { padding-top: 28px; padding-bottom: 80px; }
.bd-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bd-body.bd-two { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 38vw, 520px); gap: 32px; max-width: 1352px; }
.bd-two > .bd-col { grid-row: 1; grid-column: 1; min-width: 0; }
/* #board is the scroller; 96px keeps the panel below its 72px sticky bar. */
.bd-news {
  grid-row: 1; grid-column: 2; align-self: start; position: sticky; top: 96px; padding: 18px 20px;
  border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface);
}
@media (max-width: 999px) {
  .bd-body.bd-two { display: block; }
  .bd-news { position: static; margin-bottom: 16px; }
}
.bd-row {
  position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 18px 20px 18px 18px;
  border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface);
  transition: box-shadow .22s ease, border-color .22s ease;
}
.bd-row:hover { border-color: var(--border); }
.bd-row.mine { box-shadow: inset 3px 0 0 var(--brand); }
/* A vote that changes the ranking: the card lifts and glides past the ones it now outranks. */
.bd-row.moving { transition: transform .56s var(--fb-glide), scale .3s var(--fb-glide), box-shadow .3s ease, border-color .22s ease; }
.bd-row.overtaking { z-index: 2; scale: 1.015; border-color: var(--border); box-shadow: 0 16px 40px rgba(5, 28, 35, .16); }
.bd-row.mine.overtaking { box-shadow: inset 3px 0 0 var(--brand), 0 16px 40px rgba(5, 28, 35, .16); }
.bd-enter .bd-row { animation: bd-in .6s var(--fb-glide) backwards; animation-delay: calc(var(--i, 0) * 45ms + 260ms); }
@keyframes bd-in { from { opacity: 0; transform: translateY(18px); } }
.bd-row.glow { animation: bd-glow 2.2s ease-out; }
@keyframes bd-glow {
  0%, 30% { box-shadow: 0 0 0 3px #008cff59, 0 8px 28px rgba(5, 28, 35, .1); }
  100% { box-shadow: 0 0 0 3px #008cff00; }
}
.bd-main { min-width: 0; padding-top: 3px; }
.bd-top { display: flex; align-items: flex-start; gap: 10px; }
.bd-t { margin: 0; font: 600 16.5px/1.35 var(--font-sans); color: var(--text); }
.bd-yours {
  flex: none; margin-top: 1px; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font: 600 11.5px/1.3 var(--font-sans);
}
.bd-shipped {
  flex: none; margin-top: 1px; padding: 3px 9px 3px 8px; border-radius: 999px;
  background: var(--brand-deep); color: var(--brand-accent); font: 600 11.5px/1.3 var(--font-sans);
}
.bd-shipped::before { content: "\2713"; margin-right: 4px; }
/* Posted since the last visit (or in the past week, on a first visit). */
.fb-new {
  display: inline-block; flex: none; margin: 0 7px 0 0; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--brand); color: #fff; font: 700 10px/1.4 var(--font-sans); letter-spacing: .03em; text-transform: uppercase;
}
.bd-top .fb-new { margin: 3px 0 0; }
.ip-log b .fb-new { margin: 0 0 0 7px; }
/* Three lines, then a fade. Opening widens the window onto the text; the text never re-wraps. */
.bd-d {
  position: relative; max-height: calc(3 * 1.55em); overflow: hidden; margin: 5px 0 0;
  font-size: 14.5px; line-height: 1.55; color: var(--text-body);
  transition: max-height .34s var(--fb-ease);
}
.bd-d p { margin: 0; white-space: pre-line; }
.bd-d p + p { margin-top: .6em; }
.bd-row.long .bd-d { cursor: pointer; }
.bd-row.long .bd-d::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.55em; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface));
  transition: opacity .24s ease;
}
.bd-row.long.open .bd-d::after { opacity: 0; }
.bd-more {
  display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 0 -2px; padding: 2px;
  border: 0; border-radius: 6px; background: none; color: var(--brand);
  font: 600 13px/1.3 var(--font-sans); cursor: pointer;
}
.bd-more[hidden] { display: none; }
.bd-more svg { width: 15px; height: 15px; transition: transform .34s var(--fb-ease); }
.bd-row.open .bd-more svg { transform: rotate(180deg); }
.bd-more:hover { color: #053d73; }
.bd-more:hover span { text-decoration: underline; text-underline-offset: 2px; }
.bd-more:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }
.bd-m { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }
/* The author's own card, for 15 minutes after posting. */
.bd-edit {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 10px 5px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--brand); font: 600 12px/1 var(--font-sans); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.bd-edit svg { width: 13px; height: 13px; }
.bd-edit:hover { border-color: var(--brand-line); background: #cdeeff66; }
.bd-edit:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; }

.bd-empty {
  padding: 56px 24px; text-align: center;
  border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface);
  animation: bd-in .44s var(--fb-ease) .06s both;
}
.bd-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
}
.bd-icon svg { width: 26px; height: 26px; }
.bd-empty-h { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text); }
.bd-empty p { max-width: 360px; margin: 8px auto 20px; font-size: 14.5px; line-height: 1.5; color: var(--text-body); }

@media (max-width: 900px) {
  #board { right: 0; }
  .bd-wrap { padding: 0 20px; }
  .bd-hero { padding: 64px 0 28px; }
  .bd-h { font-size: 34px; }
  .bd-lede { font-size: 16px; }
}
@media (max-width: 520px) {
  .fb-two, .fb-acts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-scrim, .fb-layer .fb-card, .fb-body, .fb-nudge, .fb-vote, .bd-row, #fbbtn, .bd-cta, .bd-d, .bd-d::after, .bd-more svg, .fb-pick-list, .fb-pick-btn svg { transition: none; }
  .fb-layer .fb-card { transform: none; }
  .fb-ok, .bd-empty, .bd-enter .bd-row, .bd-row.glow, .fb-vote.bump b, #fbbtn,
  body[data-view="feedback"] #board, #board.bd-arrive .bd-hero::after, #board.bd-arrive .bd-hero .bd-wrap > *,
  #board-x.bd-arrive, .fb-ok::after, .sk::after { animation: none; }
  .fb-ok svg path { animation: none; stroke-dashoffset: 0; }
  .fb-vote.bump svg, #ideas.ip-in .ip-row, #ideas.ip-in .ip-log li { animation: none; }
  .fb-other, .fb-vote .th { transition: none; }
  .bd-sticky-bar, #board-x, .fb-n { transition: none; }
}

#bd-error { padding: 16px; color: #a12622; }
#bd-next { margin-top: 24px; }
@media (max-width: 700px) {
  #fbbtn { display: inline-flex !important; }
  body #fbbtn, body.dock-open #fbbtn, body[data-view="report"] #fbbtn {
    right: 16px;
    bottom: 112px;
  }
}