/* css/whiteboard.css — the Whiteboard page (js/views/whiteboard-view.js). The board itself: css/whiteboard-engine.css. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Kalam:wght@400;700&family=Patrick+Hand&display=swap');
.wbp-main { padding: 1.25rem 1rem 6rem; background: var(--bg-page); min-height: calc(100vh - 60px); display: flex; justify-content: center; }
.wbp-container { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 1rem; }
.wbp-main[data-stage="board"] .wbp-container { max-width: 1180px; }
.wbp-home, .wbp-loading, .wbp-board, .wbp-paid { display: none; flex-direction: column; gap: 0.9rem; }
.wbp-main[data-stage="home"] .wbp-home, .wbp-main[data-stage="loading"] .wbp-loading, .wbp-main[data-stage="board"] .wbp-board, .wbp-main[data-stage="paid"] .wbp-paid { display: flex; }
.wbp-paidtext { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); }
.wbp-actions a.wbp-btn { text-decoration: none; }
.wbp-hero h1 { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.wbp-hero p { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.45; }
.wbp-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: 1.1rem; padding: 1.1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.7rem; }
.wbp-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.wbp-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border-light); border-radius: 0.75rem; padding: 0.7rem 0.85rem; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.wbp-input { resize: vertical; min-height: 4.6rem; line-height: 1.45; }
.wbp-input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wbp-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.wbp-mini { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); }
.wbp-select { font: inherit; font-size: 0.85rem; color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border-light); border-radius: 0.6rem; padding: 0.35rem 0.5rem; }
.wbp-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.wbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-size: 0.88rem; font-weight: 600; padding: 0.6rem 1rem; border-radius: 0.75rem; border: 1px solid var(--border-light); background: var(--surface); color: var(--text-primary); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.wbp-btn:hover:not(:disabled) { border-color: var(--accent); }
.wbp-btn:disabled { opacity: 0.6; cursor: default; }
.wbp-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.wbp-primary:hover:not(:disabled) { filter: brightness(1.06); }
.wbp-error { margin: 0; color: #dc2626; font-size: 0.85rem; }
.wbp-sub { margin: 0.4rem 0 0; font-size: 1rem; color: var(--text-primary); }
.wbp-note { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.wbp-list { display: flex; flex-direction: column; gap: 0.5rem; }
.wbp-item { display: flex; align-items: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--border-light); border-radius: 0.9rem; padding: 0.25rem 0.35rem 0.25rem 0.25rem; }
.wbp-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.55rem 0.7rem; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--text-primary); text-align: left; border-radius: 0.7rem; }
.wbp-open:hover { background: var(--accent-soft); }
.wbp-open strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wbp-open span { font-size: 0.78rem; color: var(--text-secondary); }
.wbp-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; }
.wbp-icon:hover { background: var(--accent-soft); color: var(--accent); }
.wbp-loading { align-items: center; padding: 4rem 1rem; text-align: center; color: var(--text-secondary); }
.wbp-spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: wbp-spin 0.9s linear infinite; }
@keyframes wbp-spin { to { transform: rotate(360deg); } }
.wbp-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wbp-title { flex: 1; min-width: 10rem; font: inherit; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); background: transparent; border: 1px solid transparent; border-radius: 0.6rem; padding: 0.35rem 0.5rem; }
.wbp-title:hover, .wbp-title:focus { border-color: var(--border-light); outline: none; }
.wbp-saved { font-size: 0.75rem; color: var(--text-secondary); }
.wbp-tools { display: flex; gap: 0.4rem; }
.wbp-ask { display: flex; gap: 0.5rem; }
.wbp-ask .wbp-input { padding: 0.55rem 0.8rem; }
.wbp-pic { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-secondary); }
.wbp-pic a { color: var(--accent); font-weight: 600; }
.wbp-switch { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.wbp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wbp-switch span { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 1rem; background: var(--border-light); transition: background .15s; }
.wbp-switch span::after { content: ''; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.wbp-switch input:checked + span { background: #7c3aed; }
.wbp-switch input:checked + span::after { transform: translateX(1rem); }
.wbp-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ideas to start from, and the length */
.wbp-ideas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wbp-idea { border: 1px dashed var(--border-light); border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.8rem; padding: 0.35rem 0.75rem; cursor: pointer; }
.wbp-idea:hover { border-color: var(--accent); color: var(--accent); }
.wbp-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.wbp-chipbtn { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.55rem 0.4rem; border: 1px solid var(--border-light); border-radius: 0.8rem; background: var(--surface); color: var(--text-primary); font: inherit; cursor: pointer; }
.wbp-chipbtn b { font-size: 0.9rem; }
.wbp-chipbtn span { font-size: 0.72rem; color: var(--text-secondary); }
.wbp-chipbtn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.wbp-chipbtn:focus-visible, .wbp-idea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wbp-go { width: 100%; padding: 0.8rem 1rem; font-size: 1rem; }
.wbp-titlebox { flex: 1; min-width: 10rem; display: flex; flex-direction: column; }
.wbp-titlebox .wbp-title { margin: 0; padding: 0; border: 0; font-size: 1.15rem; line-height: 1.3; }
@media (max-width: 560px) { .wbp-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .wbp-main { padding: 2rem 1.5rem 3rem; } .wbp-hero h1 { font-size: 1.9rem; } }
@media (max-width: 560px) { .wbp-tools .wbp-btn { padding: 0.5rem 0.7rem; } .wbp-ask { flex-direction: column; } }