/* ==========================================================================
   nullcromancer CMS layer: public reading experience and the publishing console.
   Sits on top of site.css (terminal chrome and theme variables).
   ========================================================================== */

.muted { color: var(--muted); }
.notice { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin: 0 auto var(--gap); max-width: 1180px; border: 1px solid #5a4b22; background: #14110a; color: #e3cf86; border-radius: var(--radius); font-size: 14px; }
.notice.warn b { color: #f1d46b; letter-spacing: .08em; }

/* ---- chips ---------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid #2f4a35; background: #07110a; color: var(--green2); border-radius: 999px; font-size:14px; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
a.chip:hover { border-color: var(--green); background: #0b1a0f; }
.chip.pin { border-color: #6b5a2a; color: #e9d27a; background: #14110a; }
.chip.warn { border-color: #6b5a2a; color: #e9d27a; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---- layout --------------------------------------------------------- */
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; align-items: start; max-width: 1180px; margin: 0 auto; }
.main-col, .post-article { min-width: 0; }
.sidebar-col { display: grid; gap: var(--gap); position: sticky; top: 0; align-content: start; }
.page-intro { margin-bottom: 22px; }
.page-intro h1 { margin: 4px 0 8px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; }
.page-intro p { margin: 0; color: var(--soft); max-width: 70ch; }
.home-intro { margin: 4px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.home-intro h1 { margin: 0 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
.home-intro p { margin: 0; color: var(--soft); font-size: 18px; max-width: 60ch; }

/* ---- widgets -------------------------------------------------------- */
.widget { background: linear-gradient(180deg, rgba(13,18,14,.98), rgba(8,12,9,.98)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.widget-head { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size:14px; letter-spacing: .12em; color: var(--green2); background: rgba(255,255,255,.015); }
.widget-body { padding: 12px; display: grid; gap: 10px; }
.widget-body p { margin: 0; }
.widget-list { list-style: none; margin: 0; padding: 4px 0; }
.widget-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; font-size: 14px; }
.widget-list li a { text-decoration: none; color: var(--text); }
.widget-list li a:hover { color: var(--green2); }
.widget-list li span { color: var(--muted); }
.about-row { display: flex; gap: 12px; align-items: center; }
.avatar-img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 1px solid var(--green3); flex: none; }
.search-form { display: flex; gap: 6px; }
.search-form input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #2e3931; background: #060906; color: var(--text); border-radius: 4px; }
.search-form.big input { padding: 12px 14px; font-size: 17px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- post cards ----------------------------------------------------- */
.post-list { display: grid; gap: 18px; }
.post-list.compact { gap: 12px; }
.post-card { display: grid; gap: 0; background: linear-gradient(180deg, rgba(13,18,14,.98), rgba(8,12,9,.98)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s; }
.post-card:hover { border-color: var(--line2); }
.post-card.has-image { grid-template-columns: 220px minmax(0, 1fr); }
.post-card.large.has-image { grid-template-columns: 1fr; }
.post-card-image { display: block; background: #050705; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card.large .post-card-image { aspect-ratio: 21 / 9; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card:hover .post-card-image img { transform: scale(1.02); }
.post-card-body { padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.post-meta-line { display: flex; gap: 8px; flex-wrap: wrap; min-height: 4px; }
.post-card-title { margin: 0; font-size: 24px; line-height: 1.2; }
.post-card.large .post-card-title { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; }
.post-card-title a { text-decoration: none; }
.post-card-title a:hover { color: var(--green2); }
.post-card-summary { margin: 0; color: var(--soft); font: 15px/1.6 ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
.post-byline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size:14px; letter-spacing: .03em; }
.post-byline a { color: var(--soft); }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 22px 0; }
.pager .btn:last-child { justify-self: end; }
.pager-status { color: var(--muted); font-size:14px; letter-spacing: .1em; }

/* ---- archive -------------------------------------------------------- */
.archive-year h2 { margin: 22px 0 4px; font-size: 28px; color: var(--green2); }
.archive-year h3 { margin: 14px 0 4px; font-size:14px; letter-spacing: .14em; color: var(--muted); }
.archive-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.archive-list li { display: flex; gap: 12px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid #1b231d; }
.archive-list time { width: 52px; flex: none; color: var(--muted); font-size:14px; }
.archive-list a:not(.chip) { text-decoration: none; flex: 1; font-size: 16px; }
.archive-list a:not(.chip):hover { color: var(--green2); }

/* ---- single post ---------------------------------------------------- */
.post-article { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
.post-header h1 { margin: 6px 0 12px; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; }
.post-lede { margin: 0 0 12px; font: 19px/1.55 ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: var(--soft); }
.post-hero { margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #050705; }
.post-hero img { width: 100%; max-height: 520px; object-fit: cover; }
.post-body { font: 19px/1.75 ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: #dbe3dd; margin: 22px 0; overflow-wrap: anywhere; }
.post-body > :first-child { margin-top: 0; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { font-family: "Courier New", Consolas, monospace; line-height: 1.2; margin: 1.8em 0 .5em; color: #f0f5f1; }
.post-body h1 { font-size: 32px; } .post-body h2 { font-size: 27px; } .post-body h3 { font-size: 22px; } .post-body h4 { font-size: 19px; }
.post-body p { margin: 0 0 1.1em; }
.post-body a { color: var(--link); }
.post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.post-body li { margin: .25em 0; }
.post-body blockquote { margin: 1.2em 0; padding: .2em 1.1em; border-left: 3px solid var(--green3); color: var(--soft); background: rgba(255,255,255,.02); }
.post-body img { max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 6px; border: 1px solid var(--line); }
.post-body hr { border: 0; border-top: 1px solid var(--line2); margin: 2em 0; }
.post-body code { font-family: "Courier New", Consolas, monospace; font-size: .9em; background: #0b130d; border: 1px solid #1f2d22; padding: 1px 5px; border-radius: 3px; }
.post-body pre { background: #050905; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; overflow: auto; font-size: 15px; line-height: 1.55; margin: 1.2em 0; }
.post-body pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.post-body table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 17px; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line2); padding: 7px 10px; text-align: left; }
.post-body th { background: #0c150e; }
.post-footer { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 28px 0; }
.post-footer .chip-row { margin: 0; }
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.prev-next a { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: rgba(13,18,14,.7); }
.prev-next a:hover { border-color: var(--green3); }
.prev-next a.right { text-align: right; }
.prev-next small { color: var(--muted); font-size:14px; letter-spacing: .1em; }
.series-box { margin: 0 0 22px; padding: 12px 14px; border: 1px solid var(--green3); border-radius: var(--radius); background: rgba(13,18,14,.7); }
.series-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 14px; letter-spacing: .08em; color: var(--muted); }
.series-head a { color: var(--link); font-weight: 700; }
.series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.series-nav a { display: grid; gap: 3px; text-decoration: none; }
.series-nav a.right { text-align: right; }
.series-nav small { color: var(--muted); font-size:14px; letter-spacing: .1em; }
.series-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.reading-totals { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 8px; }
.reading-totals b { margin-left: 6px; }
#reading-card .mud-chart { max-width: 760px; margin: 0 auto; }
#reading-card .mud-chart-bar { fill: var(--green); }
#reading-card .mud-chart text { font-size: 9px; fill: var(--muted); }
.related h2, .comments h2 { font-size: 22px; margin: 30px 0 12px; }
.comments { margin-top: 34px; }
.comment { padding: 12px 14px; border: 1px solid #28332b; background: #080c09; border-radius: 6px; }
.comment-head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size:14px; margin-bottom: 6px; }
.comment p { margin: 0; white-space: pre-wrap; font: 15px/1.6 ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
.comment-form textarea { min-height: 110px; }

/* ---- generic forms (public + console) ------------------------------- */
.field { display: grid; gap: 5px; margin-bottom: 12px; }
.field > span { font-size:14px; letter-spacing: .08em; color: var(--muted); }
.field input:not([type=checkbox]), .field select, .field textarea, .inline-input { width: 100%; padding: 9px 10px; border: 1px solid #2e3931; background: #060906; color: var(--text); border-radius: 4px; }
.field textarea { min-height: 90px; resize: vertical; }
.field-hint { font-size:14px; color: var(--muted); }

/* ====================================================================
   PUBLISHING CONSOLE
   ==================================================================== */
.adm { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 22px; max-width: 1560px; margin: 0 auto; align-items: start; }
.adm-side { position: sticky; top: 0; display: grid; gap: 4px; align-content: start; }
.adm-side .adm-brand { padding: 4px 10px 12px; }
.adm-side .adm-brand b { display: block; font-size: 17px; }
.adm-side .adm-brand small { color: var(--muted); font-size:14px; letter-spacing: .1em; }
.adm-side a, .adm-side .navlink { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px; text-decoration: none; color: #9aa69e; font-size: 14px; letter-spacing: .04em; border: 1px solid transparent; }
.adm-side a:hover { color: var(--green2); background: rgba(255,255,255,.025); }
.adm-side a.active { color: var(--green2); background: #0b1a0f; border-color: #28472f; }
.adm-side .group { margin: 12px 10px 4px; font-size:14px; letter-spacing: .16em; color: #5d6962; }
.adm-side .sub { padding-left: 22px; font-size:14px; }
.badge-count { background: #3a1b1b; color: #ff9b9b; border: 1px solid #6b2e2e; border-radius: 999px; padding: 0 7px; font-size:14px; min-width: 18px; text-align: center; }
.adm-side .adm-foot { margin-top: 14px; padding: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size:14px; color: var(--muted); }
.adm-main { min-width: 0; }
.adm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-head h1 { margin: 0; font-size: 30px; }
.adm-head p { margin: 4px 0 0; color: var(--muted); }
.adm-msg { padding: 9px 12px; margin-bottom: 14px; border: 1px solid #2d4a34; background: #08120b; color: #b8e6c0; border-radius: 5px; font-size: 14px; }
.adm-msg.err { border-color: #6b2e2e; background: #140a0a; color: #ffb4b4; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; font-size: 14px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: #8b978f; padding: 6px 10px; cursor: pointer; letter-spacing: .04em; }
.tabs button:hover { color: var(--green2); }
.tabs button.active { color: var(--green2); border-bottom-color: var(--green); }
.tabs button span { color: var(--muted); margin-left: 3px; }

.bulkbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.bulkbar select, .bulkbar input { padding: 7px 9px; border: 1px solid #2e3931; background: #060906; color: var(--text); border-radius: 4px; }
.posts-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.posts-table th { text-align: left; padding: 9px 10px; color: var(--muted); font-size:14px; letter-spacing: .08em; border-bottom: 1px solid var(--line2); background: #080d09; }
.posts-table td { padding: 10px; border-bottom: 1px solid #1b231d; vertical-align: top; }
.posts-table tr:hover td { background: rgba(255,255,255,.012); }
.posts-table .title a { font-size: 16px; font-weight: 700; text-decoration: none; }
.posts-table .title a:hover { color: var(--green2); }
.posts-table .row-links { margin-top: 3px; font-size:14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; opacity: 1; transition: opacity .12s; }
.posts-table tr:hover .row-links, .posts-table tr:focus-within .row-links { opacity: 1; }
.posts-table .row-links button, .posts-table .row-links a { background: none; border: 0; padding: 0; color: var(--green2); cursor: pointer; text-decoration: none; font: inherit; }
.posts-table .row-links .danger { color: #ff8d8d; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #55605a; }
.status-dot.published { background: var(--green); } .status-dot.draft { background: #8a8f8c; } .status-dot.scheduled { background: #e0b84a; } .status-dot.archived { background: #6a7aa0; }

/* editor */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.ed-main { display: grid; gap: 14px; min-width: 0; }
.ed-title { width: 100%; padding: 14px 16px; font: 700 28px/1.2 "Courier New", Consolas, monospace; background: #060906; border: 1px solid #2e3931; color: #f0f5f1; border-radius: 6px; }
.ed-title:focus { border-color: var(--green3); outline: none; }
.permalink { font-size: 14px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.permalink input { padding: 4px 8px; border: 1px solid #2e3931; background: #060906; color: var(--text); border-radius: 4px; min-width: 220px; }
.ed-box { border: 1px solid var(--line); border-radius: var(--radius); background: #070b08; overflow: hidden; }
.ed-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); background: #0a110c; align-items: center; }
.ed-bar button, .ed-bar select { min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid #2d3a30; background: #080c09; color: #b6c2b9; border-radius: 4px; cursor: pointer; font-size: 14px; }
.ed-bar button:hover, .ed-bar select:hover { color: var(--green2); border-color: var(--green3); }
.ed-bar .sep { width: 1px; height: 20px; background: var(--line2); margin: 0 4px; }
.ed-bar .spacer { flex: 1; }
.ed-bar button.on { background: #0f2415; color: var(--green2); border-color: var(--green3); }
.ed-panes { display: grid; grid-template-columns: 1fr; min-height: 520px; }
.ed-panes.split { grid-template-columns: 1fr 1fr; }
.ed-panes textarea { width: 100%; min-height: 520px; padding: 16px 18px; border: 0; background: #060906; color: #dfe7e1; font: 14px/1.7 "Courier New", Consolas, monospace; resize: vertical; outline: none; }
.ed-panes .preview { padding: 6px 22px 22px; overflow: auto; max-height: 720px; border-left: 1px solid var(--line); background: #070b08; }
.ed-foot { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size:14px; background: #0a110c; }
.ed-box.dragging { border-color: var(--green); box-shadow: 0 0 0 2px rgba(53,255,79,.25); }
.ed-side { display: grid; gap: 14px; align-content: start; }
.ed-side > .metabox:first-child { position: sticky; top: 8px; z-index: 2; } /* the scrolling <main> already pads below the fixed header, sticky offsets count from inside that padding */
.metabox { border: 1px solid var(--line); border-radius: var(--radius); background: #080c09; overflow: hidden; }
.metabox-head { padding: 9px 12px; font-size:14px; letter-spacing: .12em; color: var(--green2); border-bottom: 1px solid var(--line); background: #0a110c; }
.metabox-body { padding: 12px; display: grid; gap: 10px; }
.metabox-body .field { margin: 0; }
.publish-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.publish-actions .btn.primary { grid-column: 1 / -1; }
.btn.primary { background: #0f3a1a; border-color: var(--green3); color: #d9ffe0; font-weight: 700; }
.btn.primary:hover { background: #14501f; }
.savestate { font-size:14px; color: var(--muted); }
.savestate.dirty { color: #e0b84a; } .savestate.saved { color: var(--green2); }
.cat-tree { max-height: 220px; overflow: auto; display: grid; gap: 2px; padding: 2px; }
.cat-tree label { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.cat-tree label:hover { background: rgba(255,255,255,.03); }
.tag-box { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; border: 1px solid #2e3931; background: #060906; border-radius: 4px; }
.tag-box .chip button { background: none; border: 0; color: inherit; cursor: pointer; margin-left: 5px; padding: 0; }
.tag-box input { flex: 1; min-width: 90px; border: 0; background: none; color: var(--text); outline: none; padding: 3px; }
.featured { display: grid; gap: 8px; }
.featured img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 5px; background: #050705; }
.picker { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 20px; }
.picker-card { width: min(900px, 100%); max-height: 86vh; overflow: auto; background: #070b08; border: 1px solid var(--line2); border-radius: 8px; padding: 16px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.picker-grid button { padding: 0; border: 1px solid var(--line); background: #050705; border-radius: 5px; overflow: hidden; cursor: pointer; text-align: left; color: inherit; }
.picker-grid button:hover { border-color: var(--green); }
.picker-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.picker-grid span { display: block; padding: 4px 6px; font-size:14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* dashboard */
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.dash-grid .span2 { grid-column: span 2; }
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.glance a { text-decoration: none; display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; }
.glance a b { color: var(--green2); }
.todo { display: grid; gap: 6px; }
.todo li { list-style: none; display: flex; gap: 8px; align-items: center; font-size: 15px; }
.todo .done { color: var(--muted); }
.todo .done a { color: var(--muted); text-decoration: none; }
.mini-list { display: grid; gap: 0; }
.mini-list .row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1b231d; font-size: 15px; }
.mini-list .row:last-child { border-bottom: 0; }

/* media */
.dropzone { border: 2px dashed #2f4a35; border-radius: 8px; padding: 26px; text-align: center; color: var(--muted); background: #07100a; cursor: pointer; }
.dropzone.over { border-color: var(--green); color: var(--green2); background: #0a1a0e; }
.media-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.media-grid2 .tile { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #060906; cursor: pointer; text-align: left; padding: 0; color: inherit; }
.media-grid2 .tile.sel { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.media-grid2 .tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.media-grid2 .tile .audio { aspect-ratio: 1; display: grid; place-items: center; font-size: 36px; color: var(--green3); }
.media-grid2 .tile span { display: block; padding: 5px 7px; font-size:14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }

@media (max-width: 1100px) {
  .content-layout { grid-template-columns: 1fr; }
  .sidebar-col { position: static; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .ed, .media-layout { grid-template-columns: 1fr; }
  .ed-side { position: static; }
  .ed-side > .metabox:first-child { position: static; }
  .dash-grid { grid-template-columns: 1fr 1fr; } .dash-grid .span2 { grid-column: span 2; }
}
@media (max-width: 820px) {
  .adm { grid-template-columns: 1fr; }
  .adm-side { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .adm-side a, .adm-side .navlink { white-space: nowrap; flex: none; }
  .adm-side .group, .adm-side .adm-brand, .adm-side .adm-foot { display: none; }
  .adm-side .sub { padding-left: 10px; }
  .post-card.has-image { grid-template-columns: 1fr; }
  .ed-panes.split { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; } .dash-grid .span2 { grid-column: auto; }
  .prev-next { grid-template-columns: 1fr; }
  .posts-table .row-links { opacity: 1; }
}
@media print {
  .topbar, .pathbar, .taskbar, .sidebar-col, .post-footer .actions, .comments, .prev-next, .related, .start { display: none !important; }
  main { position: static !important; overflow: visible !important; }
  body { overflow: visible; background: #fff; color: #000; }
  .post-body { color: #000; }
}
.hidden { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
h1:focus, h1:focus-visible { outline: none; }

.skip-link { position: fixed; left: 8px; top: -60px; z-index: 300; padding: 8px 12px; background: #0a120c; color: var(--green2); border: 1px solid var(--green3); border-radius: 4px; text-decoration: none; }
.skip-link:focus { top: 8px; }

/* form controls everywhere follow the dark theme */
select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=datetime-local], textarea {
  background: #060906; color: var(--text); border: 1px solid #2e3931; border-radius: 4px;
}
select { padding: 6px 8px; }
select option { background: #0a0f0b; color: var(--text); }
input[type=checkbox], input[type=radio] { accent-color: var(--green3); }

/* ---- front page: the original editorial portal ---------------------- */
.home-hero { margin: 6px 0 20px; }
.home-hero h1 { margin: 4px 0 8px; font-size: clamp(34px, 6vw, 68px); line-height: 1; letter-spacing: .01em; }
.home-hero p { margin: 0; color: var(--soft); font-size: 17px; max-width: 62ch; }
.home-hero .eyebrow, .portal .eyebrow, .storytile .eyebrow { font-size:14px; color: var(--green2); letter-spacing: .1em; }
.shell > .filterbar { margin-bottom: 4px; }
.portal .lead-media { display: block; }
.portal .lead-media .media-overlay { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.portal .lead h2 a, .portal .story h3 a, .storytile h3 a { color: inherit; }
.portal .lead-copy .meta, .storytile .meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size:14px; margin-top: 10px; }
.story.no-thumb { grid-template-columns: 1fr; }
.story .thumb { display: block; }
.storytile .pic { display: block; }
.newsletter-band { margin-top: 24px; }
.newsletter-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 20px; align-items: center; }
.newsletter-body h3 { margin: 0 0 4px; }
@media (max-width: 760px) { .newsletter-body { grid-template-columns: 1fr; } }
.portal .sidegrid { align-content: start; }
.portal .story { align-items: start; }
.rail .panel-head { display: flex; justify-content: space-between; align-items: center; }
.rail .panel-head a { text-decoration: none; color: var(--green2); }
.railitem img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; }
.railitem h4 a, .storytile h3 a, .story h3 a { text-decoration: none; }
.railitem h4 a:hover, .storytile h3 a:hover, .story h3 a:hover { color: var(--green2); text-decoration: underline; }
.newsletter-body .search-form { display: flex; gap: 8px; }
.newsletter-body .search-form input { flex: 1; min-width: 200px; }
.portal .story .thumb { height: auto; aspect-ratio: 16/10; align-self: start; }
.portal .story { grid-template-columns: 150px 1fr; }
.portal .lead-media { aspect-ratio: 16/8.5; }
.chatline.admin .uname { color: var(--green2); }
.chat-del { float: right; background: none; border: 0; color: var(--muted); cursor: pointer; }
.chat-del:hover { color: var(--red); }
.presence-count { color: var(--muted); }

/* ---- inline search: results drop down under every search box -------- */
.live-search { position: relative; margin: 0; }
.live-search .live-search-row { display: flex; gap: 8px; }
.side-search { width: 100%; }
.side-search .live-search-row input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #334137; background: rgba(7,11,8,.96); color: var(--text); border-radius: 6px; font: inherit; }
.side-search.big .live-search-row input { height: 46px; font-size: 17px; }
.live-search.open .home-search-results { display: block; }
.side-search .home-search-results { left: 0; right: 0; width: auto; }
.home-search-wrap.live-search { margin: 0 0 0 auto; }
.home-search-wrap .live-search-row { display: block; }
.live-search .cmdrow.selected { background: #101a12; color: var(--green2); border-color: #41694a; }
.home-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-right: 8px; }
input[type=search] { -webkit-appearance: none; appearance: none; }
.home-search-results { background: #060a07 !important; }

/* ---- readability pass: links are recognised by colour, never underlined ---- */
a, a:hover, a:focus, button, .presence.open { text-decoration: none !important; }
a:hover { color: #e4ffe9; }
.btn, .btn:hover, .chip, .filter, .menuitem, .iconbtn { text-decoration: none; }
.post-body a { border-bottom: 0; }
html { -webkit-text-size-adjust: 100%; }

/* ---- legibility and spacing (reference: large, calm news layouts) ---- */
:root { --text: #e3eae5; --soft: #c0cbc3; --muted: #95a29a; --gap: 18px; }
html[data-density="compact"] { --gap: 12px; }
html[data-density="comfortable"] { --gap: 26px; }
main { padding-top: calc(var(--top) + var(--path) + env(safe-area-inset-top) + 30px); padding-bottom: calc(var(--bottom) + env(safe-area-inset-bottom) + 40px); }
.content-layout { max-width: 1320px; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
.post-header h1 { margin: 14px 0 16px; }
.post-meta-line { margin-bottom: 4px; }
.post-byline { font-size: 15px; color: var(--soft); gap: 8px; }
.post-header .post-byline { margin-bottom: 14px; }
.post-card-summary { font-size: 17px; line-height: 1.6; }
.post-card-body { padding: 18px 20px; }
.post-list { gap: 22px; }
.chip { font-size:14px; padding: 4px 11px; }
.widget-head { padding: 12px 16px; font-size:14px; }
.widget-body { padding: 16px; }
.widget-list li { padding: 10px 16px; }
.sidebar-col { gap: 22px; }
.archive-list li { padding: 13px 4px; gap: 16px; }
.archive-list time { width: 64px; }
.archive-year h3 { margin: 22px 0 8px; font-size: 14px; }
.page-intro { margin-bottom: 30px; }
.page-intro p { font-size: 18px; line-height: 1.6; }
.pager { margin: 34px 0; }
.lead-copy { padding: 24px 28px 28px !important; }
.lead h2 { font-size: clamp(28px, 3.2vw, 46px) !important; margin: 8px 0 14px !important; }
.lead .summary { font-size: 18px; line-height: 1.65; }
.portal .story { padding: 16px; gap: 16px; }
.portal .story h3 { font-size: 20px; margin: 4px 0 8px; }
.portal .story p { font-size: 15px; line-height: 1.55; }
.storyline { margin-top: var(--gap); gap: var(--gap); }
.storytile .body, .railitem .body { padding: 16px 18px 18px; }
.storytile h3 { font-size: 21px; margin: 4px 0 10px; }
.storytile p, .railitem p { font-size: 15px; line-height: 1.55; }
.railitem h4 { font-size: 17px; margin: 4px 0 8px; }
.rail { margin-top: 26px; }
.rail .panel-head, .panel-head { padding: 13px 16px; font-size:14px; }
.railrow { padding: 14px; gap: 16px; }
.panel-body { padding: 18px 20px; }
.meta { font-size:14px !important; color: var(--muted); }
.filterbar { padding: 4px 0 20px; gap: 14px; }
.filter { padding: 9px 14px; font-size: 14px; }
.home-search { height: 42px; font-size: 14px; }
.cmdrow { padding: 12px 14px; font-size: 15px; }
.cmdrow small { font-size:14px; }
.post-body.article-body { max-width: none; margin: 22px 0; }
.post-body p, .post-body li { font-size: 19px; }
.comment-list .comment, .comment { padding: 16px 18px; }
.topbar { gap: 14px; }
.taskbar { font-size: 14px; }
input, select, textarea { font-size: 16px; }
label, .field > span, .form-label { font-size: 14px; letter-spacing: .06em; }
.field { margin-bottom: 4px; }
.lead .summary, .portal .story p, .storytile p, .railitem p, .post-card-summary, .page-intro p, .post-lede {
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; }
.portal .story p, .storytile p, .railitem p { font-size: 16px; }
.widget-list li a { font-size: 16px; }
.widget-body p, .widget-body .muted { font-size: 15px; line-height: 1.55; }
.tiny, .hint { font-size: 14px; }
.tag-cloud .chip { font-size: 14px; }

/* ---- small screens: one column, search on its own line ---- */
@media (max-width: 1000px) {
  .content-layout { grid-template-columns: 1fr; gap: 26px; }
  .sidebar-col { position: static; }
}
@media (max-width: 700px) {
  .filterbar { flex-wrap: wrap; }
  .filterbar .filter-scroll { flex: 1 1 100%; }
  .filterbar .home-search-wrap { flex: 1 1 100%; margin: 0; }
  .newsletter-body { grid-template-columns: 1fr; }
  .post-body p, .post-body li { font-size: 18px; }
  .lead h2 { font-size: 28px !important; }
}

/* Mud styles load first; preserve the plain HTML typography used by existing pages. */
.toast-host { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; padding: 20px; }
.toast { max-width: min(620px, 100%); pointer-events: auto; opacity: 1; transition: opacity 250ms ease; animation: toast-in 250ms ease; }
.toast.leaving { opacity: 0; pointer-events: none; }
.toast .mud-alert { box-shadow: 0 12px 36px #0009; border-radius: 8px; }
.toast-dismiss { display: block; width: 100%; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; overflow-wrap: anywhere; }
.toast-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@keyframes toast-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }
body.reduced-motion .toast { animation: none; transition: none; }
.toast .toast-dismiss, .toast .mud-alert-message { color: #04110a !important; font-weight: 600; }

/* Keep live results above adjacent widgets and the reading column. */
.sidebar-col:has(.live-search.open) { z-index: 61; }
.widget:has(.live-search) { overflow: visible; position: relative; z-index: 1; }
.widget:has(.live-search.open) { z-index: 62; }
.live-search.open { z-index: 63; }
.live-search .home-search-results { z-index: 64; }

/* Session names share the top bar and truncate on narrow screens. */
.topbar .identity { min-width: 0; flex: 0 1 auto; max-width: 55%; }
.topbar .identity .iconbtn { flex-shrink: 0; }
.topbar .ghost-tag { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Path ticker, social tap targets and a wrapping archive rail. */
.pathbar .ticker { flex: 1 1 0; min-width: 0; height: auto; color: #aab4ac; }
.pathbar .ticker a { color: #aab4ac; text-decoration: none; }
.pathbar .ticker a:hover { color: var(--green2); }
.pathbar .path { flex: 0 1 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: #aab4ac; }
.taskbar .taskleft { height: 36px; overflow: visible; }
.taskbar.compact .taskleft { visibility: visible; }
.taskright .clock { border-left: 0; padding-left: 0; }
.social-icons { display: flex; gap: 2px; max-width: 100%; }
.social-networks { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.social-networks:empty { display: none; }
.social-networks::-webkit-scrollbar { display: none; }
.social-icons a { display: flex; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; color: #aab4ac; text-decoration: none; font-size: 18px; }
.social-icons a:hover, .social-icons a:focus-visible { color: var(--green2); text-shadow: 0 0 8px var(--green2); }
.social-icons a:focus-visible { outline: 1px solid var(--green2); outline-offset: -2px; }
.railrow { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); overflow: visible; scroll-snap-type: none; }
.railitem { min-width: 0; overflow-wrap: anywhere; }
.social-link-row { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto; align-items: center; }
.social-link-row > .mud-input-control { min-width: 0; }
@media (max-width: 699px) {
  .social-link-row { grid-template-columns: minmax(0, 1fr) auto; }
  .social-link-row > .mud-input-control:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .social-link-row > button { grid-column: 2; grid-row: 1; }
  .railrow { grid-auto-flow: column; grid-auto-columns: 100%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; }
  .railitem { scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .pathbar { gap: 8px; letter-spacing: 0; }
  .pathbar .path { flex-basis: 38%; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.changelog-entry { margin: 0 0 30px; }
.changelog-entry h2 small { font-size: 14px; margin-left: 10px; font-weight: 400; }
.changelog-entry ul { padding-left: 22px; display: grid; gap: 8px; }


.show-password { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 14px; cursor: pointer; color: var(--muted); }
.show-password input { width: 18px; height: 18px; accent-color: var(--green); }
.share-label { align-self: center; color: var(--muted); }

.dismiss-link { float: right; min-width: 0; padding: 0 6px; font-size: 14px; text-transform: none; color: var(--muted); }
/* Dashboard chart: console colours, readable labels. */
#reading-card .mud-chart text { fill: #9cffaa; font-size: 14px; }
#reading-card .mud-chart .mud-charts-gridlines-yaxis line, #reading-card .mud-chart line { stroke: rgba(53,255,79,.25); }

/* Settings: save bar stays in view; says whether anything is unsaved. */
.savebar { position: sticky; bottom: 62px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(6,9,7,.96); }
.savebar .dirty { color: #ffd479; font-weight: 700; }
.savebar .saved { color: var(--muted); }

/* Phones: the header has no room, so search moves to the strip under it (where the path text sat). */
.phone-tools { display: none; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  .topbar .hide-phone { display: none !important; }
  .pathbar .path { display: none; }
  .pathbar .phone-tools { display: flex; margin-left: auto; flex-shrink: 0; }
}

/* Space between neighbouring buttons, site-wide (a UI sweep found Register / Sign in, Open admin / Account and similar touching). */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.social-icons { gap: 10px; }
.chip-row, .tag-cloud, .mud-chip-container { gap: 8px; }
.mud-toolbar { gap: 8px; }