/* Docs & SOPs (pages/docs.js): the mock's folders, four to a row, over its list of docs; then a doc, read */
.docs-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 18px; }
.docs-folder { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; min-width: 0; transition: border-color var(--t-fast); }
.docs-folder:hover { border-color: var(--line2); }
.docs-folder[aria-pressed="true"] { border-color: var(--red); background: var(--sel); }
.docs-folder svg.i { width: 20px; height: 20px; color: var(--text2); }
.docs-folder span { display: grid; min-width: 0; }
.docs-folder b { font-weight: 700; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-folder small { color: var(--text3); font-size: 13px; }
.docs-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 14px 0 6px; display: flex; gap: 8px; }
.docs-label span { color: var(--text3); font-weight: 500; letter-spacing: 0; }
.docs-list { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.docs-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: inherit; text-decoration: none; min-width: 0; }
.docs-row + .docs-row { border-top: 1px solid var(--line); }
a.docs-row:hover { background: var(--hover); }
.docs-row > svg.i { width: 18px; height: 18px; color: var(--text2); }
.docs-row > span:nth-of-type(1) { flex: 1; min-width: 0; display: grid; }
.docs-row b { font-weight: 700; color: var(--head); }
.docs-row span a { color: inherit; text-decoration: none; } .docs-row span a:hover b { text-decoration: underline; }
.docs-row small { color: var(--text3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-by { display: flex; align-items: center; gap: 8px; flex: none; }
.docs-by i { background: #2f9e7a; font: 800 10.5px var(--sans); }
.docs-by time { font: 12px var(--mono); color: var(--faint); }
.docs-drop { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text3); flex: none; }
.docs-drop:hover { background: var(--chip); color: var(--bad); }
.docs-none { margin: 0; padding: 16px; color: var(--text3); font-size: 13px; }
.docs-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr) auto; gap: 12px; align-items: end; padding: 14px 16px; margin-bottom: 18px; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; }
.docs-form label { display: grid; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); min-width: 0; }
.docs-form :is(input, select) { height: 34px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); color: var(--text); font: 14px var(--sans); letter-spacing: 0; text-transform: none; min-width: 0; }
.docs-form span { display: flex; gap: 8px; }
.docs-read { max-width: 860px; padding: 8px 24px 20px; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.docs-read h4 { margin: 22px 0 8px; font-size: 16px; color: var(--head); }
@media (max-width: 900px) { .docs-form { grid-template-columns: 1fr; } .docs-row .tag, .docs-by time { display: none; } }