/* ============================================================================ Signal — compact, dense app skin. Light-first, all-sans, hairline rules, mono micro-labels, amber signal + cyan trace. Full-window shell: fixed sidebar tree + compact topbar. Ported verbatim from the Claude Design "signal" system; repo-integration overrides live in the clearly marked block at the very bottom. ========================================================================= */ :root { --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --paper: #ffffff; --side: #fbfaf8; --side-2: #f4f2ee; --ink: #33312c; --ink-dim: #6d675d; --ink-faint: #9b948a; --line: #ebe9e3; --line-soft: #f2f0ea; --hover: #f0eee9; --sel: #edf0ee; --amber: #b26a00; --amber-deep: #935700; --amber-soft: rgba(178,106,0,.10); --cyan: #0f7d6f; --cyan-deep: #0b6155; --cyan-soft: rgba(15,125,111,.09); --r: 5px; color-scheme: light; } /* Dark theme — resolved onto by the inline head script (which reads the saved choice or the OS preference). Neutral Dark surfaces; amber/cyan brightened for contrast on dark. */ :root[data-theme="dark"] { --paper: #191a1c; --side: #202123; --side-2: #27282b; --ink: #e6e5e1; --ink-dim: #a6a39c; --ink-faint: #706e68; --line: #303133; --line-soft: #292a2c; --hover: #2a2b2e; --sel: #2b312f; --amber: #ffb454; --amber-deep: #f0a54a; --amber-soft: rgba(255,180,84,.13); --cyan: #67d8c8; --cyan-deep: #7fe0d2; --cyan-soft: rgba(103,216,200,.12); color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: grid; grid-template-columns: 248px minmax(0,1fr); height: 100vh; overflow: hidden; } a { color: var(--cyan); text-decoration: none; } a:hover { color: var(--cyan-deep); } ::selection { background: var(--amber); color: #fff; } .ic { width: 15px; height: 15px; display: block; } .readout { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } /* ---- sprite ---- */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ============================================================================ SIDEBAR ========================================================================= */ .side { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; height: 100vh; font-size: 13px; } .side-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .side-head:hover { background: var(--hover); } .ws-mark { width: 20px; height: 20px; border-radius: 4px; flex: none; background: linear-gradient(135deg, var(--amber), var(--amber-deep)); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; font-family: var(--mono); } .ws-name { font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-chev { margin-left: auto; color: var(--ink-faint); font-size: 11px; } .side-scroll { flex: 1; overflow-y: auto; padding: 6px 6px 16px; } .side-scroll::-webkit-scrollbar { width: 9px; } .side-scroll::-webkit-scrollbar-thumb { background: #e0ded7; border-radius: 6px; border: 2px solid var(--side); } .nav-row { display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 8px; border-radius: var(--r); color: var(--ink-dim); cursor: pointer; font-size: 13px; white-space: nowrap; user-select: none; text-decoration: none; } .nav-row:hover { background: var(--hover); color: var(--ink); } .nav-row .ico { width: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink-faint); } .nav-row .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-row .ct { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); } .nav-row.is-active { background: var(--sel); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--amber); } .side-group { padding: 12px 8px 3px; } .side-group-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); font-weight: 500; } .tw { width: 14px; flex: none; text-align: center; color: var(--ink-faint); font-size: 9px; } .d2 { padding-left: 22px; } .d3 { padding-left: 38px; } .new-row { color: var(--ink-faint); } .new-row .ico { color: var(--ink-faint); } /* dynamic shortcuts (localStorage) */ .sc-row .sc-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; } .sc-row .sc-del { margin-left: auto; flex: none; font-family: var(--mono); font-size: 10px; line-height: 1; color: var(--ink-faint); background: none; border: 1px solid transparent; border-radius: 3px; padding: 2px 4px; cursor: pointer; opacity: .45; } .sc-row:hover .sc-del { opacity: 1; } .sc-row .sc-del:hover { color: #b03b2e; border-color: color-mix(in srgb, #b03b2e 35%, transparent); background: color-mix(in srgb, #b03b2e 8%, transparent); } .sc-empty { padding: 3px 8px 3px 15px; font-size: 12px; color: var(--ink-faint); font-style: italic; } #add-shortcut { cursor: pointer; } .sc-adding { box-shadow: inset 2px 0 0 var(--amber); background: var(--side); } .sc-input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--sans); font-size: 13px; color: var(--ink); padding: 0; } .sc-input::placeholder { color: var(--ink-faint); } .sc-input:focus { outline: none; } /* ============================================================================ MAIN + TOPBAR ========================================================================= */ .main-wrap { min-width: 0; display: flex; flex-direction: column; height: 100vh; } .topbar { height: 42px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper); } .crumbs { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; } .crumbs a { color: var(--ink-dim); border-radius: 4px; padding: 2px 5px; white-space: nowrap; } .crumbs a:hover { background: var(--hover); color: var(--ink); } .crumbs .sep { color: var(--ink-faint); } .crumbs .cur { color: var(--ink); font-weight: 600; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; } .top-title .ico { color: var(--ink-faint); } .top-actions { margin-left: auto; display: flex; align-items: center; gap: 5px; } .tbtn { height: 27px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: var(--r); background: none; cursor: pointer; color: var(--ink-dim); font-family: var(--sans); font-size: 12.5px; } .tbtn:hover { background: var(--hover); color: var(--ink); } .tbtn .ico { color: inherit; } .tbtn .k { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; } .tbtn.primary { background: var(--amber); color: #fff; border-color: var(--amber); } .tbtn.primary:hover { background: var(--amber-deep); } .tbtn.on .k { color: var(--cyan-deep); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); } .scroll { flex: 1; overflow-y: auto; } .scroll::-webkit-scrollbar { width: 11px; } .scroll::-webkit-scrollbar-thumb { background: #e4e2db; border-radius: 6px; border: 3px solid var(--paper); } /* ============================================================================ PAGE screen ========================================================================= */ .page-in { display: grid; grid-template-columns: minmax(0,1fr) 208px; max-width: 1120px; margin: 0 auto; } .main { min-width: 0; padding: 22px 34px 70px; } .rail { padding: 22px 18px 48px 0; } .page-title { font-weight: 600; font-size: 25px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 9px; color: var(--ink); } .tagrow { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; } .tag { font-size: 11px; padding: 1px 8px; border-radius: 20px; background: var(--side-2); color: var(--ink-dim); border: 1px solid var(--line); } .tag.db { color: var(--cyan-deep); background: var(--cyan-soft); border-color: color-mix(in srgb, var(--cyan) 30%, transparent); } .tag.chip { color: var(--amber-deep); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 35%, transparent); } .tag.link { color: var(--cyan); background: none; border-color: color-mix(in srgb, var(--cyan) 35%, transparent); cursor: pointer; } .tag.link:hover { background: var(--cyan-soft); } .props { margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } .prop { display: grid; grid-template-columns: 150px 1fr; border-bottom: 1px solid var(--line-soft); min-height: 29px; } .prop:last-child { border-bottom: 0; } .prop:hover { background: var(--side); } .prop dt { margin: 0; padding: 6px 13px; background: var(--side); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; } /* dd is block, not flex: a property value is now rendered markdown and can hold several inline links separated by literal ", " — flex would turn each of them into its own item and lose the separators' spacing. */ .prop dd { margin: 0; padding: 6px 13px; font-size: 13px; line-height: 1.3; color: var(--ink); border-left: 1px solid var(--line-soft); } .prop dd a { color: var(--cyan); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); } .prop dd a:hover { border-bottom-color: var(--cyan); } .prop dd code { font-family: var(--mono); font-size: .86em; background: var(--side-2); border: 1px solid var(--line); padding: .08em .35em; border-radius: 4px; } .prop dd .pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 20px; background: var(--amber-soft); color: var(--amber-deep); font-size: 12px; } .prop dd .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); } .prose { font-size: 14px; line-height: 1.5; color: var(--ink); } .prose h2, .prose h3 { font-weight: 600; line-height: 1.25; color: var(--ink); scroll-margin-top: 54px; } .prose h2 { font-size: 15.5px; margin: 1.15em 0 .3em; padding-bottom: .18em; border-bottom: 1px solid var(--line); } .prose h2::before { content: "◇ "; color: var(--amber); font-size: .7em; vertical-align: middle; } .prose h3 { font-size: 14px; margin: 1em 0 .3em; } .prose p { margin: .4em 0; } .prose a { color: var(--cyan); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); } .prose a:hover { border-bottom-color: var(--cyan); } .prose strong { font-weight: 600; } .prose ul, .prose ol { padding-left: 1.35em; margin: .35em 0; } .prose li { margin: .1em 0; } .prose li::marker { color: var(--ink-faint); } .prose blockquote { margin: .7em 0; padding: .25em 0 .25em 12px; border-left: 3px solid var(--amber); color: var(--ink-dim); } .prose pre { background: var(--side); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 13px; overflow-x: auto; font-size: 12px; margin: .6em 0; } .prose code { font-family: var(--mono); font-size: .86em; background: var(--side-2); border: 1px solid var(--line); padding: .08em .35em; border-radius: 4px; } .prose pre code { background: none; border: 0; padding: 0; } /* A table is two boxes: .table-block carries the spacing and is the draggable prose block, .table-scroll clips. They cannot be the same element — the drag handle sits in the left gutter and a scrolling box would clip it away. */ .table-block { margin: .8em 0; } .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); } .prose table { border-collapse: collapse; width: 100%; font-size: 12px; } .prose th, .prose td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft); padding: 5px 10px; text-align: left; vertical-align: top; } .prose tr:last-child td { border-bottom: 0; } .prose th { background: var(--side); color: var(--ink-dim); font-weight: 600; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .prose td:last-child, .prose th:last-child { border-right: 0; } .sub-h { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; } .subpages { margin-top: 22px; } .backlinks { margin-top: 18px; } .page-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; } .page-grid a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); font-size: 13px; } .page-grid a:hover { background: var(--side); } .page-grid .ico { color: var(--ink-faint); } .backlinks ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 22px; } .backlinks li { break-inside: avoid; } .backlinks a { display: block; padding: 3px 6px; border-radius: 4px; color: var(--ink-dim); font-size: 13px; } .backlinks a::before { content: "↳ "; color: var(--ink-faint); } .backlinks a:hover { background: var(--side); color: var(--ink); } .rail-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; } .toc { border-left: 1px solid var(--line); padding-left: 14px; margin-bottom: 20px; } .toc a { display: block; padding: 2px 0; color: var(--ink-dim); font-size: 12.5px; line-height: 1.35; } .toc a:hover { color: var(--ink); } .toc a.on { color: var(--amber-deep); } .toc .l3 { padding-left: 12px; font-size: 12px; } /* ---- draggable prose blocks ---- */ .prose .blk { position: relative; } .blk-handle { position: absolute; left: -22px; top: 3px; width: 16px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: grab; color: var(--ink-faint); opacity: 0; transition: opacity .12s; } .blk-handle svg { fill: currentColor; } .blk-handle:hover { background: var(--hover); color: var(--ink-dim); } .blk-handle:active { cursor: grabbing; } .blk:hover > .blk-handle { opacity: 1; } .blk-dragging { opacity: .45; } .blk-over-before { box-shadow: 0 -2px 0 var(--amber); } .blk-over-after { box-shadow: 0 2px 0 var(--amber); } /* ---- code block: language chip + syntax tokens ---- */ .prose pre[data-lang] { position: relative; padding-top: 22px; } .code-lang { position: absolute; top: 5px; right: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); user-select: none; } .prose .tok-com { color: var(--ink-faint); font-style: italic; } .prose .tok-str { color: var(--cyan-deep); } .prose .tok-num { color: var(--amber-deep); } .prose .tok-kw { color: var(--amber-deep); font-weight: 600; } .prose .tok-fn { color: var(--ink); font-weight: 600; } /* ============================================================================ HOME screen ========================================================================= */ .home { max-width: 1000px; margin: 0 auto; padding: 30px 34px 80px; } .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .home h1 { font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 10px; text-wrap: balance; } .home h1 .accent { color: var(--amber); white-space: nowrap; } .home-sub { color: var(--ink-dim); max-width: 62ch; font-size: 15px; margin: 0 0 20px; } .home-search { display: flex; align-items: center; gap: 10px; max-width: 460px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--side); cursor: text; } .home-search:hover { background: var(--paper); border-color: #ddd8cc; } .home-search:focus-within { background: var(--paper); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-soft); } .home-search .s-ico { color: var(--ink-faint); flex: none; display: flex; } .home-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; } .home-search input:focus { outline: none; } .home-search .kbd { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; background: var(--paper); } .stats { list-style: none; display: flex; padding: 0; margin: 26px 0 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .stats li { flex: 1; padding: 12px 16px; border-right: 1px solid var(--line); } .stats li:last-child { border-right: 0; } .stats strong { display: block; font-size: 22px; color: var(--ink); line-height: 1; margin-bottom: 5px; font-variant-numeric: tabular-nums; } .stats span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 0; margin-top: 36px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .section-card { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-card h2 { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; } .section-card h2 .ico { color: var(--amber); } .section-card h2 a { color: inherit; } .section-card h2 a:hover { color: var(--ink); } .section-card ul { list-style: none; padding: 0; margin: 0; } .section-card li { padding: 3px 0; border-bottom: 1px dotted var(--line); } .section-card li:last-child { border-bottom: 0; } .section-card li a { color: var(--ink); font-size: 13px; display: flex; align-items: center; gap: 7px; } .section-card li a .ico { color: var(--ink-faint); } .section-card li a:hover { color: var(--amber-deep); } .home-hint { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; margin-top: 20px; } /* ============================================================================ SEARCH screen ========================================================================= */ .search-page { max-width: 720px; margin: 0 auto; padding: 34px 34px 90px; } .search-controls { display: flex; flex-direction: column; gap: 12px; } .search-input { height: 46px; padding: 0 16px; font-size: 17px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); font-family: var(--sans); } .search-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-soft); } .mode-switch { display: flex; gap: 6px; } .mode-switch label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; color: var(--ink-dim); } .mode-switch label:has(input:checked) { background: var(--amber); border-color: var(--amber); color: #fff; } .mode-switch label.disabled { opacity: .4; cursor: not-allowed; } .mode-switch input { display: none; } .search-status { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); margin: 18px 2px; min-height: 14px; } .search-results { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); counter-reset: r; } .result { padding: 14px 4px; border-bottom: 1px solid var(--line); position: relative; } .result::before { counter-increment: r; content: counter(r, decimal-leading-zero); position: absolute; right: 4px; top: 15px; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: .1em; } .result-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .result-title a { color: var(--ink); } .result-title a:hover { color: var(--amber-deep); } .result-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .result-snippet { font-size: 13.5px; color: var(--ink-dim); margin: 0; } .result-snippet mark { background: transparent; color: var(--amber-deep); font-weight: 600; } .score-bar { height: 2px; background: var(--line); margin-top: 9px; max-width: 160px; } .score-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--amber)); } /* ============================================================================ MAP / GRAPH screen ========================================================================= */ .map-wrap { flex: 1; position: relative; overflow: hidden; background: radial-gradient(900px 520px at 50% 42%, var(--amber-soft), transparent 70%), var(--paper); } .graph-hud { position: absolute; top: 16px; left: 16px; z-index: 10; width: 280px; display: flex; flex-direction: column; gap: 10px; } .graph-search { height: 34px; padding: 0 12px; font-family: var(--mono); font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: var(--r); } .graph-search:focus { outline: none; border-color: var(--amber); } .graph-legend { display: flex; flex-wrap: wrap; gap: 5px; } .legend-item { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: color-mix(in srgb, var(--paper) 85%, transparent); border: 1px solid var(--line); display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-dim); } .legend-item .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 5px currentColor; } .legend-item.off { opacity: .4; } .graph-hint { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-faint); } .graph-node-label { font-family: var(--sans); font-size: 11px; fill: var(--ink-dim); } .graph-tip { position: absolute; z-index: 15; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--amber); border-radius: var(--r); padding: 8px 12px; max-width: 240px; box-shadow: 0 8px 26px rgba(60,45,15,.18); } .graph-tip .tip-title { font-size: 13px; font-weight: 600; color: var(--ink); } .graph-tip .tip-section { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); margin-top: 2px; } @media (max-width: 720px) { body { grid-template-columns: 1fr; } .side { display: none; } .page-in { grid-template-columns: 1fr; } .rail { display: none; } } /* ============================================================================ REPO INTEGRATION — overrides wiring the ported skin to the live server. Everything above is the design system as-authored; below adapts it to real server-rendered data (recursive sidebar tree, graph.js tokens, prose from goldmark/CSV, folder index note). ========================================================================= */ /* graph.js reads these var names (from the dark baseline) via getComputedStyle; alias them to the light palette so the canvas renders on paper, not #08090c. */ :root { --void: var(--paper); --panel: var(--side); } /* live force-graph mount (replaces the static SVG snapshot from the mock) */ #graph { width: 100%; height: 100%; display: block; } /* Recursive sidebar tree: parents are
, leaves are . Native disclosure, no JS. The .tw chevron rotates from ▸ to ▾ when open. */ .nav-branch > summary { list-style: none; align-items: center; } .nav-branch > summary::-webkit-details-marker { display: none; } .nav-branch > summary::marker { content: ""; } .nav-branch > summary .tw { transition: transform .12s; } .nav-branch[open] > summary .tw { transform: rotate(90deg); } .nav-branch > summary .nav-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; } .nav-sub { padding-left: 13px; } /* synthetic folder index page body */ .folder-note { color: var(--ink-faint); font-style: italic; } /* prose levels goldmark can emit that the mock never exercised */ .prose h1 { font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--ink); margin: 1.1em 0 .3em; } .prose h4 { font-weight: 600; font-size: 13px; color: var(--ink-dim); margin: .9em 0 .25em; } .prose img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--side); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; } /* icon-only topbar buttons (theme + width toggles) */ .tbtn.tbtn-icon { padding: 0; width: 27px; justify-content: center; } .tbtn.tbtn-icon.on { color: var(--amber-deep); background: var(--amber-soft); } /* Full-width reading mode (toggled via #width-toggle, persisted in localStorage, stamped as data-width="full" on ): drop the centered max-width so the article, home and search columns span the whole viewport. */ :root[data-width="full"] .page-in, :root[data-width="full"] .home, :root[data-width="full"] .search-page { max-width: none; } /* parent-page link above the title */ .page-parent { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; color: var(--ink-dim); border-radius: 4px; padding: 2px 6px 2px 2px; } .page-parent:hover { background: var(--hover); color: var(--ink); } .page-parent .up { font-family: var(--mono); color: var(--ink-faint); } .page-parent .ico { color: var(--ink-faint); display: inline-flex; } /* ---- wikilinks -------------------------------------------------------- */ /* An unresolved [[link]] renders visibly broken rather than disappearing: the site doubles as a link checker, and an invisible dead link is one nobody fixes. */ .wikilink-missing { color: var(--ink-faint); border-bottom: 1px dashed currentColor; cursor: help; } .wikilink-embed { max-width: 100%; height: auto; display: block; margin: 1.1em 0; border-radius: 4px; } .wikilink-file::after { content: " ↗"; font-size: .85em; color: var(--ink-faint); } /* ---- generated section listings and the home page --------------------- */ .card-list { list-style: none; padding: 0; margin: .6em 0 1.6em; display: grid; gap: .55em; } .card-list li { display: flex; flex-direction: column; gap: .15em; } .card-list a { font-weight: 500; } .card-sum { color: var(--ink-faint); font-size: 13px; line-height: 1.45; } .section-types { display: flex; flex-wrap: wrap; gap: .35em; margin: .5em 0 0; } .section-types .n, .sub-h .count, .section-card .count { color: var(--ink-faint); font-size: .85em; } .type-group { scroll-margin-top: 4rem; } .recent h2, .type-group h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono); margin: 1.8em 0 .2em; } /* ---- /log timeline ---------------------------------------------------- */ .log-month { scroll-margin-top: 4rem; } .log-entry { padding: .9em 0 1.1em; border-bottom: 1px solid var(--rule); scroll-margin-top: 4rem; } .log-entry > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55em; margin-bottom: .35em; } .log-date { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); } .log-title { font-weight: 600; } .log-entry .prose { font-size: 14px; } .log-entry:target { background: var(--amber-soft); border-radius: 4px; padding-inline: .6em; } .empty { color: var(--ink-faint); }