/* Styles for page content, shared by the in-app viewer, the editor, /raw and /s share
   links. Everything is scoped to .jr-doc so full-HTML pages and app chrome are untouched. */
.jr-doc{font-family:Inter,system-ui,-apple-system,sans-serif;color:#18201a;font-size:16px;line-height:1.65;word-wrap:break-word}
.jr-doc>*:first-child{margin-top:0}
.jr-doc p{margin:.5em 0;min-height:1.65em}
.jr-doc h1,.jr-doc h2,.jr-doc h3,.jr-doc h4{line-height:1.3;margin:1.4em 0 .25em;font-weight:650}
.jr-doc h1{font-size:1.875em}
.jr-doc h2{font-size:1.45em}
.jr-doc h3{font-size:1.2em}
.jr-doc h4{font-size:1em}
.jr-doc a{color:#2f5d3a;text-decoration:underline;text-decoration-color:rgba(47,93,58,.4);text-underline-offset:2px}
.jr-doc strong{font-weight:650}
.jr-doc mark{background:#fbf1b9;color:inherit;border-radius:2px;padding:0 1px}
.jr-doc code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.85em;background:rgba(135,131,120,.15);color:#b4453a;border-radius:4px;padding:.15em .35em}
.jr-doc pre{background:#f6f7f3;border:1px solid #e6e9df;border-radius:8px;padding:14px 16px;overflow-x:auto;margin:8px 0;line-height:1.5}
.jr-doc pre code{background:none;color:#18201a;padding:0;font-size:.85em}
.jr-doc blockquote{border-left:3px solid #18201a;margin:.6em 0;padding:0 0 0 14px}
.jr-doc hr{border:0;border-top:1px solid #dee3d5;margin:14px 0}
.jr-doc img{max-width:100%;border-radius:6px;display:block;margin:8px 0}
.jr-doc ul,.jr-doc ol{margin:.5em 0;padding-left:1.6em}
.jr-doc li{margin:.3em 0}
.jr-doc li>p{margin:0}
.jr-doc li>ul,.jr-doc li>ol{margin:.3em 0}
.jr-doc ul ul{list-style-type:circle}
.jr-doc ul ul ul{list-style-type:square}

/* to-do lists */
.jr-doc ul[data-type="taskList"]{list-style:none;padding-left:.2em}
.jr-doc ul[data-type="taskList"] li{display:flex;align-items:flex-start;gap:.5em}
.jr-doc ul[data-type="taskList"] li>label{flex:0 0 auto;user-select:none;margin-top:.22em}
.jr-doc ul[data-type="taskList"] li>label input{width:16px;height:16px;margin:0;accent-color:#2f5d3a;cursor:pointer}
.jr-doc ul[data-type="taskList"] li>div{flex:1;min-width:0}
.jr-doc ul[data-type="taskList"] li[data-checked="true"]>div>p{color:#8a9382;text-decoration:line-through}

/* toggles */
.jr-doc details{margin:.5em 0}
.jr-doc details>summary{cursor:pointer;list-style:none;position:relative;padding-left:1.5em}
.jr-doc details>summary::-webkit-details-marker{display:none}
.jr-doc details>summary::before{content:"▸";position:absolute;left:.25em;color:#4f584a;transition:transform .12s;display:inline-block}
.jr-doc details[open]>summary::before{transform:rotate(90deg)}
.jr-doc details>div[data-type="detailsContent"],.jr-doc details>:not(summary){padding-left:1.5em}

/* callouts */
.jr-doc div[data-type="callout"]{display:flex;gap:10px;background:#f3f5ef;border-radius:8px;padding:14px 16px;margin:8px 0}
.jr-doc div[data-type="callout"]::before{content:attr(data-icon);flex:0 0 auto;font-size:1.15em;line-height:1.4}
.jr-doc div[data-type="callout"]>*{margin:0}
/* Stored callouts (not the editor's node view, which has class .callout) stack their blocks beside the icon. */
.jr-doc div[data-type="callout"]:not(.callout){display:block;position:relative;padding-left:48px}
.jr-doc div[data-type="callout"]:not(.callout)::before{position:absolute;left:16px;top:14px}
.jr-doc div[data-type="callout"]:not(.callout)>*+*{margin-top:.5em}

/* tables */
.jr-doc table{border-collapse:collapse;margin:10px 0;width:auto;min-width:50%;display:block;overflow-x:auto}
.jr-doc th,.jr-doc td{border:1px solid #dee3d5;padding:6px 10px;text-align:left;vertical-align:top;min-width:80px}
.jr-doc th{background:#f6f7f3;font-weight:600}
.jr-doc th p,.jr-doc td p{margin:0}
.jr-doc:not(.ne-doc) ul[data-type="taskList"] input{pointer-events:none}

/* anchors (block ids) */
.jr-doc [id]{scroll-margin-top:24px}

/* colours: data-color on blocks and inline spans. The doubled attribute outranks the
   callout/toggle backgrounds above. */
.jr-doc [data-color="gray"][data-color]{color:#787774}
.jr-doc [data-color="brown"][data-color]{color:#9f6b53}
.jr-doc [data-color="orange"][data-color]{color:#d9730d}
.jr-doc [data-color="yellow"][data-color]{color:#cb912f}
.jr-doc [data-color="green"][data-color]{color:#448361}
.jr-doc [data-color="blue"][data-color]{color:#337ea9}
.jr-doc [data-color="purple"][data-color]{color:#9065b0}
.jr-doc [data-color="pink"][data-color]{color:#c14c8a}
.jr-doc [data-color="red"][data-color]{color:#d44c47}
.jr-doc [data-color="gray_background"][data-color]{background:#f1f1ef}
.jr-doc [data-color="brown_background"][data-color]{background:#f4eeee}
.jr-doc [data-color="orange_background"][data-color]{background:#fbecdd}
.jr-doc [data-color="yellow_background"][data-color]{background:#fbf3db}
.jr-doc [data-color="green_background"][data-color]{background:#edf3ec}
.jr-doc [data-color="blue_background"][data-color]{background:#e7f3f8}
.jr-doc [data-color="purple_background"][data-color]{background:#f6f3f9}
.jr-doc [data-color="pink_background"][data-color]{background:#faf1f5}
.jr-doc [data-color="red_background"][data-color]{background:#fdebec}
.jr-doc span[data-color$="_background"]{border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.jr-doc :is(p,h1,h2,h3,h4,h5,h6,blockquote,details,div[data-type="details"])[data-color$="_background"]{padding:2px 6px;border-radius:4px}
.jr-doc li[data-color$="_background"]{border-radius:4px}

/* columns: equal widths (data-width honoured where attr() is typed), stacked on small screens */
.jr-doc div[data-type="columns"]{display:flex;gap:32px;margin:8px 0}
.jr-doc div[data-type="column"]{flex:1 1 0;min-width:0}
.jr-doc div[data-type="column"]{flex-grow:attr(data-width type(<number>), 1)}
.jr-doc div[data-type="column"]>:first-child{margin-top:0}
.jr-doc div[data-type="column"]>:last-child{margin-bottom:0}
@media (max-width:640px){.jr-doc div[data-type="columns"]{flex-direction:column;gap:0}}

/* table of contents */
.jr-doc nav[data-type="toc"]{display:flex;flex-direction:column;align-items:flex-start;margin:8px 0}
.jr-doc nav[data-type="toc"] a{color:#5f6b5a;text-decoration:underline;text-decoration-color:rgba(55,53,47,.2);text-underline-offset:3px;padding:3px 4px;border-radius:4px;font-size:.9375em;line-height:1.4}
.jr-doc nav[data-type="toc"] a:hover{background:rgba(55,53,47,.06)}
.jr-doc nav[data-type="toc"] a[data-level="2"]{margin-left:1.5em}
.jr-doc nav[data-type="toc"] a[data-level="3"]{margin-left:3em}

/* inline page links, mentions and dates */
.jr-doc a[data-type="page"]{color:inherit;font-weight:500;text-decoration:underline;text-decoration-color:rgba(55,53,47,.25);text-underline-offset:3px;border-radius:4px;padding:0 2px;margin:0 -2px}
.jr-doc a[data-type="page"]:hover{background:rgba(55,53,47,.08)}
.jr-doc span[data-type="mention"],.jr-doc time[data-type="date"]{color:#5f6b5a;font-weight:500;border-radius:4px;padding:0 2px}
.jr-doc time[data-type="date"]::before{content:"@";opacity:.55}

/* web bookmarks: a card drawn from the data attributes (the editor adds the preview image) */
.jr-doc a[data-type="bookmark"]{display:flex;flex-direction:column;justify-content:center;gap:3px;position:relative;min-height:62px;margin:8px 0;padding:12px 16px;border:1px solid #e3e6dc;border-radius:8px;background:#fff;color:#787774;font-size:12px;line-height:1.45;text-decoration:none;overflow:hidden;overflow-wrap:anywhere}
.jr-doc a[data-type="bookmark"]:hover{background:#f7f8f4}
.jr-doc a[data-type="bookmark"]::before{content:attr(data-title);order:-2;color:#18201a;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-doc a[data-type="bookmark"]::after{content:attr(data-description);order:-1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jr-doc a[data-type="bookmark"]:not([data-title])::before,.jr-doc a[data-type="bookmark"]:not([data-description])::after{display:none}
.jr-doc a[data-type="bookmark"]>img{position:absolute;top:0;right:0;width:min(30%,220px);height:100%;object-fit:cover;margin:0;border-radius:0}
.jr-doc a[data-type="bookmark"]:has(>img){padding-right:calc(min(30%,220px) + 16px)}

/* toggle headings: <details data-level> (editor: div[data-type=details][data-level] > div > summary) */
.jr-doc details[data-level],.jr-doc div[data-type="details"][data-level]{margin-top:1.1em}
.jr-doc details[data-level]>summary,.jr-doc div[data-type="details"][data-level]>div>summary{font-weight:650;line-height:1.3}
.jr-doc details[data-level="1"]>summary,.jr-doc div[data-type="details"][data-level="1"]>div>summary{font-size:1.875em}
.jr-doc details[data-level="2"]>summary,.jr-doc div[data-type="details"][data-level="2"]>div>summary{font-size:1.45em}
.jr-doc details[data-level="3"]>summary,.jr-doc div[data-type="details"][data-level="3"]>div>summary{font-size:1.2em}
.jr-doc div[data-type="details"][data-level="1"]>button{margin-top:9px}
.jr-doc div[data-type="details"][data-level="2"]>button{margin-top:5px}

/* images resized in the editor (data-width in px) */
.jr-doc img[data-width]{width:attr(data-width px, auto)}

/* page chrome for /raw, /s and the viewer: cover, icon, title, and the page style props */
.jr-cover{width:100%;height:30vh;min-height:180px;background:#f1f1ef center/cover no-repeat}
.jr-page{box-sizing:content-box;max-width:760px;margin:0 auto;padding:48px 26px 80px}
.jr-page.wide{max-width:none;padding-left:96px;padding-right:96px}
@media (max-width:720px){.jr-page.wide{padding-left:26px;padding-right:26px}}
.jr-icon{font-size:72px;line-height:1;margin:0 0 12px;user-select:none}
.jr-cover+.jr-page .jr-icon{position:relative;margin-top:-84px}
.jr-title{font:700 40px/1.2 Inter,system-ui,-apple-system,sans-serif;color:#18201a;letter-spacing:-.01em;margin:0 0 18px;overflow-wrap:anywhere}
.jr-page.small .jr-doc{font-size:14px}
.jr-page.font-serif .jr-title,.jr-page.font-serif .jr-doc{font-family:"Lyon-Text",Georgia,ui-serif,Cambria,"Times New Roman",serif}
.jr-page.font-mono .jr-title,.jr-page.font-mono .jr-doc{font-family:"SF Mono",ui-monospace,Menlo,Monaco,Consolas,monospace}