/* DEVLOG: blog index (.nc — two-panel file manager) and post pages (.post — text viewer window). BEM, classes only. */

/* ---------- nc: Norton-Commander-style index ---------- */
.nc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; border: 2px solid var(--line); border-radius: var(--r); background: var(--term-bg); color: var(--term-fg); font: 500 15px/1.4 var(--f-mono); text-shadow: var(--term-glow); }
.nc__panel { position: relative; min-width: 0; margin: 10px; padding: 14px 10px 10px; border: 4px double var(--term-fg); }
.nc__label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0 10px; background: var(--term-bg); color: var(--term-hi); font: 700 15px/1.4 var(--f-mono); white-space: nowrap; }
.nc__head, .nc__row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 64px; gap: 10px; padding: 3px 8px; }
.nc__head { border-bottom: 1px solid var(--line-dim); color: var(--term-cmd); font: 700 13px/1.4 var(--f-mono); }
.nc__list { margin: 6px 0 0; padding: 0; list-style: none; }
.nc__row { color: var(--term-fg); font: 500 15px/1.4 var(--f-mono); text-decoration: none; }
.nc__row:hover, .nc__row--active { background: var(--term-fg); color: var(--term-bg); text-shadow: none; }
.nc__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nc__cell { text-align: right; }
.nc__dir { color: var(--term-hi); }
.nc__status { margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--line-dim); color: var(--ph-muted); font: 500 13px/1.4 var(--f-mono); }

/* quick view */
.qv { display: grid; gap: 16px; color: var(--term-fg); }
.qv__shot { justify-self: start; margin: 10px 0 14px 10px; }   /* extra bottom room: the tilted corner dips below the box */
.qv__title { margin: 0; font: 700 27px/1.1 var(--f-display); font-synthesis: none; text-transform: uppercase; }
.qv__text { margin: 0; color: var(--ph-dim); font: 500 14px/1.5 var(--f-mono); }
.qv__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qv__hint { color: var(--ph-muted); font: 500 13px/1.4 var(--f-mono); }

/* desktop: fixed-ratio quick view so switching posts never changes the page height; content scrolls inside */
@media (min-width: 761px) {
  .nc__panel--qv { aspect-ratio: 1 / 1.15; }
  .qv { position: absolute; inset: 14px 10px 10px; align-content: start; padding: 12px 6px 4px; overflow-x: hidden; overflow-y: auto; }
}

/* function-key bar */
.fkeys { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; border-top: 2px solid var(--line-dim); grid-column: 1 / -1; color: var(--term-fg); font: 500 14px/1.4 var(--f-mono); }
.fkeys__key { display: inline-flex; color: var(--term-fg); text-decoration: none; }
.fkeys__num { color: var(--term-cmd); margin-right: 2px; }
.fkeys__cap { padding: 0 4px; background: var(--line-dim); color: var(--term-hi); }
.fkeys__key--live .fkeys__cap { background: var(--term-fg); color: var(--term-bg); text-shadow: none; }

/* ---------- polaroid: tilted taped screenshot ---------- */
.polaroid { position: relative; display: inline-block; padding: 10px 10px 34px; background: #f1ede2; color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .55); transform: rotate(-3deg); text-shadow: none; }
.polaroid--right { transform: rotate(2.5deg); }
.polaroid::before { content: ""; position: absolute; top: -10px; left: 50%; width: 76px; height: 20px; margin-left: -38px; background: rgba(233, 223, 185, .85); transform: rotate(-4deg); }
/* one frame size for every post image, art is fitted inside (sources differ: 179..396px wide) */
.polaroid__frame { display: grid; place-items: center; width: 220px; height: 160px; padding: 12px; background: #1b2a1d; }
.polaroid__link { display: block; width: 100%; height: 100%; color: var(--ink); cursor: zoom-in; }
.polaroid__link .polaroid__img, .polaroid__img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.polaroid__caption { position: absolute; left: 12px; right: 12px; bottom: 9px; color: var(--ink); font: 500 12px/1.2 var(--f-mono); }

/* ---------- post: text-viewer window ---------- */
.post__menu { display: flex; gap: 18px; padding: 4px 12px; border-bottom: 1px solid var(--line-dim); background: var(--panel); color: var(--ph-dim); font: 500 13px/1.6 var(--f-mono); }
.post__menu-pos { margin-left: auto; color: var(--ph-muted); }
.post__body { padding: 28px clamp(16px, 5vw, 56px) 36px; background: var(--term-bg); color: var(--text); font: 500 16px/1.7 var(--f-mono); text-shadow: none; }
.post__article { max-width: 68ch; margin: 0 auto; color: var(--text); }
.post__cmd { margin: 0 0 14px; color: var(--term-cmd); font: 20px/1.2 var(--f-term); text-shadow: var(--term-glow); }
.post__title { margin: 0 0 12px; font: 700 36px/1.1 var(--f-display); font-synthesis: none; text-transform: uppercase; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 28px; color: var(--ph-muted); font: 500 13px/1.4 var(--f-mono); }
.post__hero { float: right; margin: 6px 0 24px 28px; }
.post__lead { margin: 0 0 20px; color: var(--ph-hi); font: 500 18px/1.6 var(--f-mono); }
.post__h2 { clear: both; margin: 34px 0 10px; color: var(--ph-hi); font: 700 20px/1.3 var(--f-mono); }
.post__h2::before { content: "## "; color: var(--ph); }
.post__p { margin: 0 0 16px; color: var(--text); font: 500 16px/1.7 var(--f-mono); }
.post__list { margin: 0 0 18px; padding: 0; list-style: none; color: var(--text); font: 500 16px/1.7 var(--f-mono); }
.post__item { position: relative; padding-left: 2ch; color: var(--text); }
.post__item::before { content: ">"; position: absolute; left: 0; color: var(--ph); }
.post__inline { padding: 0 4px; border-radius: 3px; background: rgba(163, 245, 134, .12); color: var(--term-hi); font: 500 .92em var(--f-mono); }
.post__code { margin: 0 0 20px; border: 1px solid var(--line-dim); border-radius: var(--r); background: #050e08; color: var(--text); }
.post__code-file { padding: 4px 12px; border-bottom: 1px solid var(--line-dim); color: var(--ph-muted); font: 500 12px/1.6 var(--f-mono); }
.post__code-src { margin: 0; padding: 12px 14px; overflow-x: auto; color: var(--term-fg); font: 500 14px/1.6 var(--f-mono); white-space: pre; text-shadow: var(--term-glow); }
.post__note { position: relative; margin: 26px 0; padding: 18px 18px 14px; border: 4px double #e8f38a; color: var(--note); font: 500 15px/1.6 var(--f-mono); }
.post__note::before { content: " NOTE "; position: absolute; top: -12px; left: 14px; background: var(--term-bg); color: var(--term-cmd); font: 700 14px/1.4 var(--f-mono); }
.post__eof { clear: both; margin: 36px 0 0; color: var(--ph-muted); font: 20px/1.2 var(--f-term); }
.post__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; }

@media (max-width: 760px) {
  .nc { grid-template-columns: 1fr; }
  .nc__head, .nc__row { grid-template-columns: minmax(0, 1fr) 72px; }
  .nc__cell--size { display: none; }
  .post__hero { float: none; display: block; margin: 0 0 24px; }
  .post__title { font-size: 27px; }
}

/* ---------- post window menu bar (File / Edit / View / Help), behaviour in retro.js ---------- */
.menubar { position: relative; z-index: 6; align-items: center; gap: 2px; padding: 2px 6px; }
.menubar__group { position: relative; color: var(--text); }
.menubar__btn { margin: 0; padding: 2px 8px; border: 0; background: none; color: var(--ph-dim); font: 500 13px/1.6 var(--f-mono); cursor: pointer; appearance: none; }
.menubar__btn:hover, .menubar__btn[aria-expanded="true"] { background: var(--ph); color: var(--ink); }
.menubar__menu { position: absolute; top: 100%; left: 0; display: grid; min-width: 220px; padding: 4px; border: 2px solid var(--line); background: var(--panel); box-shadow: 4px 4px 0 var(--line-dim); color: var(--text); }
.menubar__menu[hidden] { display: none; }
.menubar__item { display: flex; justify-content: space-between; gap: 18px; margin: 0; padding: 4px 10px; border: 0; background: none; color: var(--text); font: 500 13px/1.5 var(--f-mono); text-align: left; text-decoration: none; cursor: pointer; appearance: none; }
.menubar__item:hover, .menubar__item:focus-visible { outline: none; background: var(--ph); color: var(--ink); }
.menubar__label { color: inherit; }
.menubar__key { color: var(--ph-muted); font: 500 12px/1.5 var(--f-mono); }
.menubar__item:hover .menubar__key, .menubar__item:focus-visible .menubar__key { color: var(--ink); }
.menubar__sep { margin: 4px 2px; border: 0; border-top: 1px dashed var(--line-dim); }