:root { color-scheme: light; font-family: system-ui, sans-serif; color: #28251f; background: #f7f4ed; }
html, body { height: 100%; overflow:hidden; }
body { height:100dvh; margin:0; display:flex; flex-direction:column; align-items:center; width:100%; }
main { width:min(100%, 760px); flex:1; display:flex; flex-direction:column; min-height:0; box-sizing:border-box; padding:2px 6px 6px; }
h1 { font-size:1.3rem; } .card, #manuscript, #manuscript-preview { background:#fffdfa; border:1px solid #ded7ca; border-radius:8px; padding:16px; margin-top:16px; }
input, select, button { font: inherit; padding: 9px; margin: 5px 0; max-width:100%; box-sizing:border-box; } input, select { width:100%; }
button { background:#343026; color:white; border:0; border-radius:5px; } .hidden { display:none !important; }
#library { flex:1; display:flex; flex-direction:column; min-height:0; }
#library.hidden { display:none !important; }
.top-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding-top:6px; overflow:hidden; }
.top-bar button { margin:0; }
.drawer-toggle { flex:0 0 auto; padding:6px 8px; font-size:1rem; line-height:1; background:transparent; color:#5f594f; box-shadow:none; }
.drawer-toggle svg { width:20px; height:20px; display:block; }
#book-drawer h1 { margin-top:0; }
#book-drawer #view-toggle { margin-top:12px; }
#manuscript, #manuscript-preview { width:100%; box-sizing:border-box; font:inherit; line-height:1.65; flex:1; min-height:0; overscroll-behavior:contain; }
#manuscript { display:block; resize:vertical; margin-top:10px; }
#manuscript-preview { overflow-y:auto; margin-top:10px; }
#manuscript-preview h1, #manuscript-preview h2, #manuscript-preview h3, #manuscript-preview h4, #manuscript-preview h5, #manuscript-preview h6 { font-weight:700; line-height:1.25; }
#manuscript-preview h1 { font-size:1.55rem; } #manuscript-preview h2 { font-size:1.3rem; } #manuscript-preview h3 { font-size:1.12rem; }
#manuscript-preview ul, #manuscript-preview ol { padding-left:1.5rem; }
#manuscript-preview code, #manuscript-preview pre { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
#manuscript-preview code { background:#f1ede4; padding:1px 3px; border-radius:3px; }
#manuscript-preview pre { overflow-x:auto; padding:12px; background:#f1ede4; border-radius:5px; }
#bookmark-list { margin-top:8px; } .bookmark-entry { display:flex; align-items:center; gap:8px; margin:6px 0; } .bookmark-entry button { margin:0; } .bookmark-name { flex:1; }
#status-badge { font-size:.8rem; font-weight:700; padding:5px 8px; border-radius:99px; color:white; }
#status-badge.current { background:#27734b; } #status-badge.behind { background:#a64632; } #status-badge.ahead { background:#8c6b13; } #status-badge.unconfirmed { background:#78716a; }
.error { color:#a64632; } .notice { color:#8c6b13; } .notice button { display:inline; margin:0 0 0 8px; padding:4px 9px; }
details { margin-top:12px; font-size:.9rem; color:#5f594f; }
.drawer { position:fixed; top:0; bottom:0; width:min(82vw, 320px); overflow-y:auto; background:#f7f4ed; z-index:20; transition:transform .25s ease; box-shadow:0 0 24px rgba(0,0,0,.2); padding:16px; box-sizing:border-box; }
.drawer-left { left:0; transform:translateX(-100%); display:flex; flex-direction:column; }
.drawer-left.open { transform:translateX(0); }
.drawer-right { right:0; transform:translateX(100%); display:flex; flex-direction:column; }
.drawer-right.open { transform:translateX(0); }
#book-drawer #sync-details { margin-top:auto; margin-bottom:24px; }
#drawer-backdrop { position:fixed; inset:0; background:rgba(20,18,14,.45); z-index:15; }
#env-banner { flex:0 0 auto; background:#8c6b13; color:#fff; text-align:center; padding:5px; font-size:12px; font-weight:600; letter-spacing:.04em; }
.mobile-annotation-highlight { cursor:pointer; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.mobile-annotation-highlight-comment { background:#dcecf3; }
.mobile-annotation-highlight-suggestion { background:#f7e3a6; }
.mobile-annotation-highlight:hover { filter:brightness(.94); }
.mobile-annotation-selection-tooltip, .annotation-panel { position:fixed; z-index:30; background:#fffdfa; border:1px solid #aaa; border-radius:8px; box-shadow:0 3px 12px rgba(49,42,32,.18); }
.mobile-annotation-selection-tooltip { display:flex; gap:8px; padding:5px 7px; }
.mobile-annotation-selection-tooltip button { margin:0; padding:2px 4px; background:transparent; color:#4c5c64; }
.annotation-panel { width:min(420px, calc(100vw - 16px)); max-height:55vh; overflow:auto; padding:12px; box-sizing:border-box; }
.annotation-panel textarea { width:100%; min-height:72px; }
.annotation-panel-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.annotation-panel-actions button { margin:0; }
.annotation-danger { background:#a64632; }
.md-image-placeholder { color:#8a8a8a; font-style:italic; text-align:center; }

#interview-screen { max-width: 48rem; margin: auto; padding: 1rem; }
.interview-question { margin: 1rem 0; padding: 1rem; border: 1px solid #8886; border-radius: .6rem; }
.interview-question textarea { display: block; box-sizing: border-box; width: 100%; min-height: 0; resize: none; overflow: hidden; margin: .5rem 0; }
.interview-question button { margin: .3rem; }
.interview-question audio { display: block; width: 100%; margin: .5rem 0; }