/* mdr-render.css — shared look for runbook docs (local app + hosted viewer). v1 */
:root { --bg:#0d1117; --panel:#161b22; --border:#30363d; --text:#c9d1d9; --muted:#8b949e; --accent:#58a6ff; }
/* Light theme (default for shared spaces — readers view email samples + docs, designed for white). */
body.theme-light { --bg:#ffffff; --panel:#f6f8fa; --border:#d0d7de; --text:#1f2328; --muted:#656d76; --accent:#0969da; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }

/* layout */
#app { display:flex; height:100vh; }
#sidebar { width:280px; flex:0 0 280px; background:var(--panel); border-right:1px solid var(--border); overflow-y:auto; padding:12px; }
#main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
#bar { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:10px 20px; background:var(--panel); border-bottom:1px solid var(--border); }
#bar .title { font-weight:600; font-size:14px; }
#bar .spacer { margin-left:auto; }
#bar .who { font-size:12px; color:var(--muted); }
#content { flex:1 1 auto; overflow-y:auto; }
.markdown-body { box-sizing:border-box; max-width:900px; margin:0 auto; padding:24px 24px 120px; }
#sidebar .space-title { font-size:13px; font-weight:600; margin:4px 6px 12px; word-break:break-word; }
.iconbtn { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:6px; padding:4px 9px; cursor:pointer; font-size:13px; }
.iconbtn:hover { background:var(--bg); }

/* sidebar file tree */
.file-row { display:flex; align-items:center; border-radius:6px; }
.file-row:hover { background:var(--border); }
.file { flex:1; min-width:0; display:block; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; color:var(--text); text-decoration:none; word-break:break-word; }
.file.active { background:color-mix(in srgb, var(--accent) 22%, transparent); }
.file .mt { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.folder > .folder-head { display:flex; align-items:center; gap:4px; padding:4px 6px; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); border-radius:6px; user-select:none; }
.folder > .folder-head:hover { background:var(--border); color:var(--text); }
.folder > .folder-head .fcaret { font-size:.7em; width:.8em; display:inline-block; transition:transform .12s; }
.folder.collapsed > .folder-head .fcaret { transform:rotate(-90deg); }
.folder.collapsed > .folder-kids { display:none; }
.folder-kids { margin-left:9px; border-left:1px solid var(--border); padding-left:5px; }

/* markdown basics (lightweight; no external github-markdown-css for the viewer) */
.markdown-body h1,.markdown-body h2,.markdown-body h3 { line-height:1.25; margin:1.2em 0 .5em; }
.markdown-body h1 { font-size:1.8em; border-bottom:1px solid var(--border); padding-bottom:.3em; }
.markdown-body h2 { font-size:1.4em; border-bottom:1px solid var(--border); padding-bottom:.25em; }
.markdown-body p,.markdown-body li { line-height:1.6; overflow-wrap:break-word; }
/* break long unbroken runs (URLs, field names, IDs) so they never spill past the right margin */
.markdown-body code,.markdown-body a { overflow-wrap:anywhere; word-break:break-word; }
.markdown-body code { background:var(--panel); border:1px solid var(--border); border-radius:5px; padding:.1em .35em; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.markdown-body pre { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:14px; overflow:auto; }
.markdown-body pre code { background:none; border:none; padding:0; overflow-wrap:normal; word-break:normal; }
.markdown-body table { border-collapse:collapse; }
.markdown-body th,.markdown-body td { border:1px solid var(--border); padding:6px 10px; overflow-wrap:anywhere; word-break:break-word; }
.markdown-body a { color:var(--accent); }
/* per-heading "copy as rich text" button — hidden until you hover the heading */
.markdown-body :is(h1,h2,h3,h4,h5,h6) { position:relative; }
.copy-rich-btn { opacity:0; margin-left:.5em; cursor:pointer; border:1px solid var(--border); background:var(--panel); color:var(--muted); border-radius:5px; font-size:.62em; line-height:1; padding:.25em .45em; vertical-align:middle; transition:opacity .1s, color .1s, border-color .1s; }
.markdown-body :is(h1,h2,h3,h4,h5,h6):hover .copy-rich-btn, .copy-rich-btn:focus { opacity:.8; }
.copy-rich-btn:hover { color:var(--accent); border-color:var(--accent); opacity:1; }
.copy-rich-btn.copied { color:#2ea043; border-color:#2ea043; opacity:1; font-size:.7em; }
a.xlink { color:var(--accent); text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); cursor:pointer; }
a.xlink:hover { border-bottom-style:solid; }
a.xlink-missing { color:#d29922; border-bottom-color:#d29922; }

/* runbook step cards */
.mdr-step { border:1px solid var(--border); border-radius:10px; margin:14px 0; background:var(--panel); overflow:hidden; }
.mdr-step.status-done { opacity:.72; }
.mdr-step.status-blocked { border-color:#d29922; }
.step-head { display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--border); }
.step-check { width:17px; height:17px; flex:0 0 auto; accent-color:var(--accent); }
.step-num { font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:20px; padding:1px 8px; flex:0 0 auto; }
.step-title { font-weight:600; font-size:14px; }
.mdr-step.status-done .step-title { text-decoration:line-through; text-decoration-color:var(--muted); }
.step-badge { margin-left:auto; font-size:11px; color:#d29922; border:1px solid #d29922; border-radius:6px; padding:1px 7px; }
.step-badge.block-question { color:#a371f7; border-color:#a371f7; }
.step-badge.block-action { color:#3fb950; border-color:#3fb950; }
.step-row { display:grid; grid-template-columns:92px 1fr auto; gap:10px; align-items:start; padding:7px 14px; border-top:1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.step-row:first-of-type { border-top:none; }
.step-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding-top:3px; }
.step-val { font-size:13px; white-space:pre-wrap; word-break:break-word; align-self:center; }
.step-val.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:3px 7px; }
.step-copy { flex:0 0 auto; background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:3px 9px; font-size:11px; cursor:pointer; align-self:center; }
.step-copy:hover { background:var(--bg); color:var(--text); border-color:var(--accent); }
.step-meta { padding:6px 14px 10px; font-size:11px; color:var(--muted); }

/* runbook toolbar: progress + filter chips */
.step-toolbar { position:sticky; top:0; z-index:4; margin:0 0 18px; padding-top:2px; background:var(--bg); }
.step-progress { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--panel); font-size:12px; color:var(--muted); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.step-progress .pct { color:var(--text); font-weight:600; flex:0 0 auto; }
.step-progress .bar { flex:1; height:7px; border-radius:4px; background:var(--border); overflow:hidden; }
.step-progress .bar > span { display:block; height:100%; background:#3fb950; transition:width .3s; }
.step-progress .blk { color:#d29922; flex:0 0 auto; }
.step-filter { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip { background:var(--panel); border:1px solid var(--border); color:var(--muted); border-radius:14px; padding:3px 10px; font-size:11px; cursor:pointer; }
.chip:hover { color:var(--text); border-color:var(--accent); }
.chip.active { background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--text); border-color:var(--accent); }

/* sign-in / status overlay */
#gate { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:50; }
#gate .card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:32px 36px; text-align:center; max-width:380px; }
#gate h1 { font-size:20px; margin:0 0 6px; }
#gate p { color:var(--muted); font-size:13px; line-height:1.5; }
#gate button { margin-top:16px; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:10px 18px; font-size:14px; cursor:pointer; }
#gate .err { color:#f85149; margin-top:12px; font-size:13px; }
#gate .gate-who { color:var(--muted); font-size:12.5px; margin:8px 0 0; font-weight:600; }
#gate .gate-who:empty { display:none; }
/* avoid the sign-in flash on refresh: show only "Loading…" until auth resolves */
#gate-loading { color:var(--muted); font-size:13px; }
body:not(.booting) #gate-loading { display:none; }
body.booting #gate-msg, body.booting #gate-who, body.booting #signin, body.booting #signout, body.booting #gate-err { display:none !important; }
.hidden { display:none !important; }

/* ---------- collaborative feedback ---------- */
#workspace { flex:1 1 auto; display:flex; min-height:0; }
#feedback { width:340px; flex:0 0 340px; border-left:1px solid var(--border); background:var(--panel); display:flex; flex-direction:column; overflow:hidden; }
body.fb-hidden #feedback { display:none; }
#fb-toggle #fb-count { color:var(--muted); }
#fb-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); font-weight:600; font-size:13px; }
.fb-head-r { display:flex; gap:6px; align-items:center; }
#fb-filter { font-size:11px; padding:2px 8px; }
#fb-filter.active { background:var(--accent); color:#fff; border-color:var(--accent); }
#fb-head .iconbtn { padding:1px 8px; }
#fb-hint { padding:8px 14px; font-size:11.5px; color:var(--muted); border-bottom:1px solid var(--border); }
#fb-list { flex:1 1 auto; overflow-y:auto; padding:6px 10px; }
#fb-new { border-top:1px solid var(--border); padding:8px 10px; display:flex; gap:6px; align-items:flex-end; }
#fb-input, .cmt-replyin, .cmt-pop-in { width:100%; resize:vertical; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; }
#fb-send, .cmt-replybtn, .cmt-pop-btn { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:6px 12px; cursor:pointer; font-size:13px; flex:0 0 auto; }
#fb-send[disabled], .cmt-replybtn[disabled], .cmt-pop-btn[disabled] { opacity:.5; cursor:default; }
.cmt-empty { color:var(--muted); font-size:12.5px; padding:16px 8px; text-align:center; }
.cmt-thread { border:1px solid var(--border); border-radius:8px; padding:8px; margin:8px 0; background:var(--bg); }
.cmt-quote { font-size:12px; color:var(--muted); border-left:3px solid var(--accent); padding:2px 8px; margin-bottom:6px; cursor:pointer; }
.cmt-quote.orphan { border-left-color:var(--muted); font-style:italic; cursor:default; }
.cmt-general { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.cmt { margin:5px 0; }
.cmt-reply { margin-left:12px; border-left:2px solid var(--border); padding-left:8px; }
.cmt-meta { display:flex; gap:6px; align-items:baseline; font-size:11px; color:var(--muted); }
.cmt-author { font-weight:600; color:var(--text); }
.cmt-del { margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; }
.cmt-text { font-size:13px; white-space:pre-wrap; word-break:break-word; margin:2px 0 4px; }
.cmt-replyform { display:flex; gap:6px; margin-top:6px; align-items:flex-end; }
.cmt-replyin { min-height:30px; }
mark.cmt-mark { background:color-mix(in srgb, var(--accent) 26%, transparent); border-radius:2px; cursor:pointer; padding:0 1px; }
mark.cmt-mark.flash { background:color-mix(in srgb, var(--accent) 60%, transparent); }
.cmt-pop { position:absolute; z-index:100; background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,.28); padding:6px; }
.cmt-pop.cmt-composer { width:264px; display:flex; flex-direction:column; gap:6px; }
.cmt-pop-quote { font-size:11px; color:var(--muted); }
.cmt-pop-row { display:flex; gap:6px; }
.cmt-pop-cancel { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:6px; padding:6px 10px; cursor:pointer; font-size:13px; }
.cmt-thread.resolved { opacity:.7; }
.cmt-resolved { font-size:11.5px; color:#3fb950; font-weight:600; margin-bottom:4px; }
.cmt-resolvebtn { margin-top:6px; background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; }
.cmt-resolvebtn:hover { color:#3fb950; border-color:#3fb950; }

/* ---------- template variables editor ---------- */
.vars-panel { max-width:900px; margin:18px auto 0; border:1px solid var(--border); border-radius:8px; background:var(--panel); overflow:hidden; }
.vars-head { display:flex; align-items:center; gap:8px; padding:8px 14px; cursor:pointer; font-size:13px; font-weight:600; border-bottom:1px solid var(--border); }
.vars-panel.collapsed .vars-head { border-bottom:none; }
.vars-caret { color:var(--muted); font-size:.8em; }
.vars-spacer { margin-left:auto; }
.vars-reset { background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:3px 10px; font-size:12px; cursor:pointer; font-weight:400; }
.vars-reset:hover { color:var(--text); }
.vars-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px 16px; padding:12px 14px; }
.vars-panel.collapsed .vars-grid { display:none; }
.vars-row { display:flex; flex-direction:column; gap:2px; }
.vars-key { font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.vars-input { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font:inherit; font-size:13px; }
.vars-input:focus { outline:none; border-color:var(--accent); }

/* ---------- admin dashboard ---------- */
#admin { height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--text); }
#admin-bar { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--border); background:var(--panel); }
#admin-bar .admin-title { font-weight:600; }
#admin-bar .spacer { margin-left:auto; }
#admin-bar .who { font-size:12px; color:var(--muted); }
#admin-list { flex:1 1 auto; overflow-y:auto; padding:20px 24px; max-width:920px; width:100%; margin:0 auto; box-sizing:border-box; }
.admin-card { border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:var(--panel); }
.admin-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.admin-card-title { font-weight:600; font-size:15px; }
.admin-id { font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.admin-meta { font-size:12.5px; color:var(--muted); margin:6px 0 10px; word-break:break-word; }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; }
.admin-btn { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:6px; padding:5px 12px; font-size:13px; cursor:pointer; text-decoration:none; display:inline-block; }
.admin-btn:hover { border-color:var(--accent); }
.admin-del { color:#f85149; } .admin-del:hover { border-color:#f85149; background:color-mix(in srgb,#f85149 10%,transparent); }
.admin-empty { color:var(--muted); text-align:center; padding:40px; }
.admin-edit { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.admin-field { display:flex; flex-direction:column; gap:3px; }
.admin-field-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.admin-field input { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:6px 9px; font-size:13px; color:var(--text); }
.admin-field input:focus { outline:none; border-color:var(--accent); }
.admin-edit-hint { font-size:11.5px; color:var(--muted); line-height:1.5; }
.admin-edit-actions { display:flex; gap:8px; margin-top:2px; }