.demo-page { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg-soft); }

.demo-bar { background: var(--accent-soft); color: var(--text); font-size: .88rem; border-bottom: 1px solid var(--border); }
.demo-bar .short-text { display: none; }
@media (max-width: 600px) {
  .demo-bar .long-text { display: none; }
  .demo-bar .short-text { display: inline; }
}
.demo-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; }

.link-btn {
  background: none; border: 0; padding: 4px 2px; color: var(--accent); font: inherit; cursor: pointer; white-space: nowrap;
}
.link-btn.strong { font-weight: 700; }

/* Board: one column + peek on phones, whole columns on wide screens — same rules as the app. */
.board {
  flex: 1; display: flex; gap: 12px; padding: 16px; overflow-x: auto; align-items: flex-start;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch;
}
.column {
  flex: 0 0 min(88vw - 32px, 340px); scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px;
  display: flex; flex-direction: column; max-height: calc(100dvh - 150px); transition: background .15s ease;
}
@media (min-width: 680px) { .column { flex: 1 0 280px; } }
.column.drop-target { background: var(--accent-soft); }
.column-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.column-head h2 { font-size: .95rem; margin: 0; }
.column-head .count { color: var(--muted); font-size: .85rem; }
.column-head .add { margin-left: auto; font-size: 1.2rem; line-height: 1; }
.cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; padding-bottom: 8px; }

.bcard {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; text-align: left; font: inherit; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.bcard:hover { box-shadow: var(--shadow); }
.bcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bcard.dragging { opacity: .35; }
.bcard .meta { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.bcard .title { font-size: .92rem; font-weight: 550; margin-top: 4px; }
.bcard .foot { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bcard .foot .comment-count { margin-left: auto; font-size: .75rem; color: var(--muted); margin-top: 6px; }
.state-icon { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; }
.state-icon.open { color: #22a06b; }
.state-icon.closed { color: #8250df; background: currentColor; }
.state-icon.pr { color: #22a06b; border-radius: 3px; }
.state-icon.draft { color: var(--muted); border-style: dashed; }

.ghost {
  position: fixed; z-index: 100; pointer-events: none; width: 260px; transform: rotate(2deg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.placeholder { height: 6px; border-radius: 3px; background: var(--accent); }

/* Sheets */
dialog {
  border: 0; padding: 0; border-radius: 16px; width: min(560px, 100vw - 24px); max-height: min(90dvh, 820px);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0, 0, 0, .4); }
.sheet { display: flex; flex-direction: column; max-height: inherit; }
.sheet-head {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.sheet-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.field textarea, .field select, .composer textarea {
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px; resize: vertical; width: 100%;
}
.hint { margin: 0; color: var(--muted); font-size: .85rem; }
#toggle-open { align-self: flex-start; }

.comments-title { margin: 8px 0 0; font-size: 1rem; }
.comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comments li { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.comments .who { font-size: .8rem; color: var(--muted); }
.comments .who strong { color: var(--text); }
.comments p { margin: 4px 0 0; white-space: pre-wrap; }
.comments img, .previews img { max-width: 100%; max-height: 220px; border-radius: 8px; margin-top: 8px; display: block; border: 1px solid var(--border); }
.comments .empty { color: var(--muted); border-style: dashed; }
.composer { display: flex; flex-direction: column; gap: 8px; }
.composer-actions { display: flex; justify-content: space-between; gap: 8px; }
.previews { display: flex; gap: 8px; flex-wrap: wrap; }
.previews figure { margin: 0; position: relative; }
.previews img { max-height: 90px; margin: 0; }
.previews button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--text); color: var(--bg); cursor: pointer; line-height: 22px; padding: 0;
}
.file-btn { cursor: pointer; }