/* folder: a file card whose body lists the files in a folder, one row each: the name in mono, then what it is for.
     <div class="file folder"><div class="file-head">…</div><ul class="folder-list">
       <li class="folder-row"><span class="folder-name">…</span><p class="folder-what">…</p></li></ul></div>
   Rows that open to show the file itself are <details class="folder-item"> in a <div class="folder-list">:
       <summary class="folder-row"><span class="folder-chev">…</span><span class="folder-name">…</span><span class="folder-what">…</span></summary>
       <div class="folder-source"><div class="folder-file"><div class="folder-file-head">…copy…</div><pre>…</pre></div></div> */
.folder-list { margin: 0; padding: 0; list-style: none; }
.folder-name { font-family: var(--mono); font-size: var(--text-sm); line-height: 20px; color: var(--gray-1200); overflow-wrap: anywhere; }
.folder-what { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--gray-1100); text-wrap: pretty; }
.folder-what a { color: inherit; }

/* static rows: name and purpose side by side */
li.folder-row { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 12px 16px; margin: 0; }
li.folder-row + li.folder-row { border-top: 1px solid var(--gray-300); }
@media (min-width: 1024px) { li.folder-row { padding-inline: 32px; } }
@media (max-width: 600px) { li.folder-row { grid-template-columns: 1fr; } }

/* rows that open */
.folder-item { margin: 0; }
.folder-item[hidden] { display: none; }
.folder-item:not([hidden]) ~ .folder-item:not([hidden]) { border-top: 1px solid var(--gray-300); }
summary.folder-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 12px 16px; list-style: none; cursor: pointer; transition: background-color 150ms ease-out; }
summary.folder-row::-webkit-details-marker { display: none; }
summary.folder-row:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: -2px; border-radius: 0; }
summary.folder-row .folder-what { grid-column: 2; }
.folder-chev { display: grid; place-items: center; height: 20px; color: var(--gray-1000); }
.folder-chev svg { display: block; transition: transform 180ms ease-out; }
.folder-item[open] .folder-chev svg { transform: rotate(90deg); }
.folder-source { padding: 0 16px 16px 42px; }
.folder-file { border-radius: var(--radius); background: var(--gray-200); overflow: hidden; }
.folder-file-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 12px; }
.folder-file pre { margin: 0; padding: 0 12px 12px; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; font: 12px/20px var(--mono); color: var(--gray-1200); scrollbar-width: thin; }
.folder-file pre:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { summary.folder-row:hover { background: var(--gray-200); } }
@media (min-width: 1024px) { summary.folder-row { padding-inline-start: 32px; } .folder-source { padding-left: 58px; } }
@media (max-width: 600px) { .folder-source { padding-left: 16px; } }
@media (prefers-reduced-motion: reduce) { summary.folder-row, .folder-chev svg { transition: none; } }