.site-nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.site-nav a { color: #111; }
.site-nav [aria-current="page"] { font-weight: bold; text-decoration: none; }
.panel-heading h1 { margin: 0; font-size: 18px; text-align: left; line-height: 1.5; }
.feed-search { padding: 16px 16px 0; }
.search-controls { display: flex; align-items: stretch; gap: 8px; }
.search-controls input { flex: 1; width: 0; min-width: 0; appearance: none; }
.search-controls input::-webkit-search-cancel-button { appearance: none; }
.search-controls button { flex-shrink: 0; }
.feed-sort { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.feed-sort .small-note { margin: 12px 0; }
.feed-notice { margin: 0 16px 16px; }
.feed-author { display: flex; align-items: center; gap: 10px; }
.feed-avatar { display: block; width: 38px; height: 38px; flex-shrink: 0; padding: 3px; background: #eeeee5; border: 2px inset #d0d0c5; }
.feed-author-name { display: block; font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.feed-author time { font-size: 12px; color: #727268; }
.feed-entry { animation: arrive .25s ease-out; }
@keyframes arrive { from { background-color: #fff0cf; } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .feed-entry { animation: none; } }
@media (max-width: 700px) { .masthead { flex-wrap: wrap; } .site-nav { padding: 4px 0 4px 4px; } }
@media (max-width: 420px) { .search-controls { flex-wrap: wrap; } .search-controls input { flex-basis: 100%; width: 100%; } }
.feed-you { font-size: 12px; color: #874000; font-weight: bold; }
.feed-viewer { margin: 0 0 6px; }

/* ---- Sub-feeds. */
.channel-link { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; font-size: 14px; border-bottom: 1px dotted #c3c3b6; color: #874000; text-decoration: none; }
.channel-link:last-child { border-bottom: 0; }
.channel-link:hover { background: #fff0cf; }
.channel-link[aria-current="page"] { background: #ff6600; color: #111; font-weight: bold; }
.channel-count { color: #7a6a58; font-size: 12px; }
.channel-link[aria-current="page"] .channel-count { color: #4a2200; }
.channel-tag { display: inline-block; padding: 1px 6px; background: #ffe5ca; border: 1px solid #e0b98f; color: #7a2c00; font-size: 11px; text-decoration: none; letter-spacing: .5px; }
.channel-tag:hover { background: #ff6600; color: #111; }
.sidebar-blurb { padding: 14px 16px; margin: 0; }

/* ---- Post layout with an author row that can carry a delete control. */
.feed-author { align-items: flex-start; }
.feed-byline { flex: 1; min-width: 0; }
.feed-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: #727268; }
.feed-you { font-size: 12px; color: #874000; font-weight: bold; }
.feed-viewer { margin: 0 0 6px; }

/* ---- The code box, in the composer and in a post. */
.composer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.composer-row label { margin: 0; white-space: nowrap; }
.composer-row select { height: 34px; max-width: 100%; padding: 4px 6px; font: 14px 'Courier New', Courier, monospace; border: 2px inset #c2c2b8; border-radius: 0; background: #fff; color: #242424; }
.code-toggle-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.code-area { margin-top: 12px; padding: 12px; border: 2px inset #c2c2b8; background: #f2f2e8; }
.code-area textarea { font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.5; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; background: #1b1005; color: #ffd7b5; border-color: #6b4322; }
.code-block { margin: 12px 0 0; border: 1px solid #6b4322; background: #1b1005; }
.code-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 10px; background: #2a1808; color: #ffb066; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.code-copy { padding: 2px 8px; background: #3a2109; border: 1px solid #6b4322; color: #ffd7b5; font: 11px 'Courier New', Courier, monospace; cursor: pointer; text-transform: lowercase; }
.code-copy:hover { background: #ff6600; color: #1b1005; }
.code-body { margin: 0; padding: 12px; overflow-x: auto; color: #ffd7b5; font-size: 13px; line-height: 1.6; }
.code-body code { white-space: pre; font-family: 'Courier New', Courier, monospace; }

@media (max-width: 700px) { .masthead { flex-wrap: wrap; } .site-nav { padding: 4px 0 4px 4px; } }
@media (max-width: 420px) { .search-controls { flex-wrap: wrap; } .search-controls input { flex-basis: 100%; width: 100%; } }