/* file card extras. The card itself (.file, .file-head, .file-body, .file-kv) is in style.css.
     <div class="file-body lines">   each <p> is one line of the file, in mono
     <details class="file file-collapsed">  a card that opens; <summary class="file-head"> … <span class="file-chev">
     <pre class="code">                 a file or terminal shown as it is; .dim / .cmd for the quiet parts
     <pre class="long">                  a long file that scrolls after 520px
     <ul class="todo"> + <p class="todo-h">   a markdown to-do list, shown rendered: headings and empty boxes */
.file-body.lines p { margin: 0; font-family: var(--mono); font-size: var(--text-sm); line-height: 1.6; }
.file-body.lines ul { margin: 0; padding-left: 18px; }

.file-collapsed summary { list-style: none; cursor: pointer; }
.file-collapsed summary::-webkit-details-marker { display: none; }
.file-collapsed .file-chev { margin-left: auto; flex: none; color: var(--gray-1000); transition: transform 150ms ease-out; }
.file-collapsed[open] .file-chev { transform: rotate(180deg); }
.file-collapsed:not([open]) .file-head { border-bottom: 0; }

/* .code, not pre.code: inside a file card, style.css's .file-body pre keeps its margin and size */
.code { margin: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px; line-height: 20px; white-space: pre-wrap; color: var(--gray-1200); }
.code .dim, .code .cmd { color: var(--gray-1000); }

.file-body pre.long { margin: 0; font-family: var(--mono); font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--gray-1200); max-height: 520px; overflow: auto; }

.file-body .todo { margin: 0 0 var(--s-2); padding: 0; list-style: none; font-size: var(--text-sm); line-height: 1.55; color: var(--gray-1200); }
.file-body .todo li { position: relative; margin: 0; padding: 4px 0 4px 26px; }
.todo li::before { content: ''; position: absolute; left: 0; top: 7px; width: 13px; height: 13px; box-sizing: border-box; border: 1.5px solid var(--gray-1000); border-radius: 3px; }
.file-body .todo-h { margin: var(--s-4) 0 var(--s-1); font-size: 14px; font-weight: 600; color: var(--gray-1200); }
.file-body .todo-h:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .file-collapsed .file-chev { transition: none; } }

/* peek: a long file shown clipped, fading out, with an expand control (shell.js opens it).
     <div class="file peek"><div class="file-head">… <span class="file-actions"><button class="copy">…</span></div>
       <div class="file-body"><pre>…</pre><button class="expand">…</button></div></div>
   Add "whole" when the file is short enough to show in full. */
.peek .file-head { padding-block: 5px; min-height: 42px; }
.file-actions { display: flex; align-items: center; margin-inline-start: auto; }
.peek .file-body { position: relative; padding: 12px 16px; }
@media (min-width: 1024px) { .peek .file-body { padding-inline-start: 32px; } }
/* clipped, it still scrolls inside; at the end the fade lifts so the last lines read (shell.js sets .is-at-end) */
.peek .file-body pre { margin: 0; max-height: 360px; overflow-y: auto; scrollbar-width: thin; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; font: 12px/20px var(--mono); color: var(--gray-1200); }
.peek .file-body pre::-webkit-scrollbar { width: 6px; }
.peek .file-body pre::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.peek:not(.is-open):not(.is-at-end) .file-body pre { mask-image: linear-gradient(#000 65%, transparent); -webkit-mask-image: linear-gradient(#000 65%, transparent); }
.peek.is-open .file-body pre { max-height: none; padding-bottom: 0; }
.peek.is-open:has(.expand) .file-body pre { padding-bottom: 36px; }
.peek.whole:not(.is-open) .file-body pre { max-height: none; mask-image: none; -webkit-mask-image: none; }
.peek .expand { display: grid; }
.peek.is-open .expand svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .peek .expand svg { transition: none; } }

/* a line in a file card picked out */
.file-body mark.line-on { background: color-mix(in oklab, #d9822b 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* file-switch: one file card, versions to flick between under it (components/switch.js).
   --file-h keeps every version the same height. */
.file-switch { margin: var(--s-6) 0; }
.file-switch .file { margin-top: 0; margin-bottom: 0; }
.file-switch .file-body[data-panel] { min-height: var(--file-h, 0); }