/* Board styles live in src/render/board.css, generated from BOARD_CSS in src/render/page.js by
   tools/build-css.mjs, so the editor and the exported page cannot drift apart — and so the app
   needs no inline <style> under a strict CSP. Everything here is editor chrome only. */

*{box-sizing:border-box}
body{margin:0;background:var(--bt-bg);color:var(--bt-fg);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--bt-line);position:sticky;top:0;background:var(--bt-bg);z-index:30}
.brand{font-weight:700;letter-spacing:-.02em;color:inherit;text-decoration:none}
.brand:hover{text-decoration:underline}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
button{font:inherit;padding:7px 12px;border-radius:8px;border:1px solid var(--bt-line);background:var(--bt-card);color:var(--bt-fg);cursor:pointer}
button:hover{border-color:#6ea8fe}
button.primary{background:#2b5cd7;border-color:#2b5cd7;color:#fff}
button.ghost{background:transparent;color:var(--bt-muted)}
button.danger{color:#ff8080;border-color:#5a2a2a}
.app-main{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
.meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.title-input,.sub-input{font:inherit;background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 8px;color:var(--bt-fg)}
.title-input{font-size:24px;font-weight:650;flex:1 1 320px}
.sub-input{flex:1 1 240px;color:var(--bt-muted)}
.title-input:hover,.sub-input:hover,.title-input:focus,.sub-input:focus{border-color:var(--bt-line);outline:none}
.check{color:var(--bt-muted);font-size:13px;display:flex;gap:6px;align-items:center}
.hint{color:var(--bt-muted);font-size:13px;margin:4px 0 16px}
kbd{font:600 11px/1 ui-monospace,monospace;border:1px solid var(--bt-line);border-bottom-width:2px;border-radius:4px;padding:2px 4px}
.board-host .bt-item{cursor:grab}
/* A cover is an <img>, and browsers start their own image drag on pointerdown — which fires
   pointercancel and kills ours. draggable="false" in the markup plus these two rules stop it. */
.board-host .bt-cover{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}

/* Tier nudge buttons — shown on hover/focus with a mouse, always shown on touch. */
.bt-moves{position:absolute;top:3px;right:3px;display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .12s ease}
.bt-item:hover .bt-moves,.bt-item:focus-within .bt-moves,.bt-item:focus-visible .bt-moves{opacity:1}
.bt-move{width:22px;height:20px;padding:0;font-size:10px;line-height:1;border-radius:5px;border:1px solid rgba(0,0,0,.35);background:rgba(18,20,26,.82);color:#e8eaed;cursor:pointer;backdrop-filter:blur(2px)}
.bt-move:hover{background:#2b5cd7;border-color:#2b5cd7}
.bt-move:active{transform:translateY(1px)}
@media (hover:none){.bt-moves{opacity:1}.bt-move{width:26px;height:24px;font-size:12px}}
.footline{display:flex;gap:16px;margin-top:14px;font-size:13px;color:var(--bt-muted)}
#status.error{color:#ff9f9f}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* drag affordances */
.bt-ghost{position:fixed;top:0;left:0;pointer-events:none;opacity:.85;z-index:100;transform:translate(-9999px,-9999px)}
.bt-dragging{opacity:.3}
body.bt-dragging-active{cursor:grabbing;user-select:none}
.bt-marker{flex:0 0 3px;align-self:stretch;min-height:calc(var(--bt-cover-w)*1.5);background:#6ea8fe;border-radius:2px}

.dlg-wide{width:min(1000px,94vw)}
#mdout{width:100%;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.preview-body{max-height:min(66vh,600px);overflow:auto;padding:12px;border:1px solid var(--bt-line);border-radius:8px;background:var(--bt-bg)}

/* dialogs */
.dlg{border:1px solid var(--bt-line);background:var(--bt-card);color:var(--bt-fg);border-radius:12px;padding:20px;width:min(460px,92vw)}
.dlg::backdrop{background:rgba(0,0,0,.55)}
.dlg h2{margin:0 0 12px;font-size:17px}
.dlg label{display:block;margin-bottom:10px;font-size:13px;color:var(--bt-muted)}
.dlg input,.dlg textarea{display:block;width:100%;margin-top:4px;font:inherit;padding:7px 9px;border-radius:8px;border:1px solid var(--bt-line);background:var(--bt-bg);color:var(--bt-fg)}
.dlg small{display:block;margin-top:4px;color:var(--bt-muted)}
.dlg-hint{color:var(--bt-muted);font-size:13px;margin:0 0 10px}
.dlg menu{display:flex;gap:8px;align-items:center;padding:0;margin:14px 0 0}
#bulkbox{margin:14px 0 0;border-top:1px solid var(--bt-line);padding-top:10px}
#bulkbox summary{cursor:pointer;color:var(--bt-muted);font-size:13px}
#bulkbox summary:hover{color:var(--bt-fg)}
#addcount{margin:2px 0 0;min-height:18px;color:#7fd18f}
.dlg menu .spacer{flex:1}

/* export chooser: one button per way out, with a line saying what it is for */
.exportlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.exportlist li{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--bt-line)}
.exportlist li:first-child{border-top:0}
.exportlist button{width:100%;justify-self:start}
.exportlist p{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--bt-muted)}
.exportlist code{font-size:12px}
@media (max-width:560px){.exportlist li{grid-template-columns:1fr;gap:4px}}

#shareout{width:100%;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical;word-break:break-all}
.len-ok{color:var(--bt-muted)}
.len-warn{color:#e3b341}
.len-error{color:#ff8f8f}

/* restoring a list a shared link displaced */
.restore{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid #e3b341;background:transparent;color:#e3b341;cursor:pointer}
.restore:hover{background:rgba(227,179,65,.12)}

/* Pointer drag on a touch screen: the browser claims the gesture for scrolling unless the
   element opts out. Scoped to the editor's board, never to .bt-item generally — the reading
   view and an exported page are nothing but covers, and trapping the scroll there would make
   them unreadable on a phone. Scroll the editor by dragging the page outside a cover, or use
   the per-cover up/down buttons. */
#board .bt-item{touch-action:none}
#board .bt-move{touch-action:manipulation}

/* the three-step Reddit flow */
.steps-num{margin:0 0 6px;padding-left:22px}
.steps-num li{margin-bottom:16px}
.steps-num li::marker{color:var(--bt-muted);font-weight:700}
.steps-num b{display:block;margin-bottom:2px}
.steps-num p{margin:2px 0 8px;font-size:12.5px;line-height:1.45;color:var(--bt-muted)}
.steps-num textarea{margin-top:6px}