:root{
  /* Norton Commander-ish palette (DOS-like) */
  --bg: #000000;
  --panel: #0000aa;      /* classic DOS blue */
  --panel2: #000088;
  --fg: #c0c0c0;         /* light gray */
  --fg2: #ffffff;        /* bright white */
  --muted: #808080;      /* dark gray */
  --line: #c0c0c0;       /* frame lines */
  --accent: #ffff00;     /* yellow */
  --accent2: #00ffff;    /* cyan */
  --danger: #ff5555;

  --padX: clamp(10px, 2.5vw, 18px);
  --padY: clamp(10px, 2.5vw, 18px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0;
}

/* Main wrapper becomes a “screen” */
.diary{
  max-width: 980px;
  margin: 0 auto;
  padding: var(--padY) var(--padX) 40px;
}

/* Top “panel header” */
.top{
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(to bottom, var(--panel), var(--panel2));
  border: 2px solid var(--line);
  padding: 10px 10px 12px;
  margin-bottom: 10px;
}

/* Title as NC status bar */
.title{
  color: var(--fg2);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Hint line like status */
.hint{
  margin-top: 8px;
  color: var(--fg);
  font-size: 12px;
}
.hint::before{
  content: "STATUS: ";
  color: var(--accent2);
}

/* Tags row looks like function-key bar buttons */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.tag{
  border: 2px solid var(--line);
  background: #000000;
  color: var(--fg2);
  padding: 4px 8px;
  cursor:pointer;
  user-select:none;
  font-size: 12px;
  text-transform: uppercase;
}

.tag:hover{
  background: var(--panel2);
  color: var(--accent);
}

.tag.active{
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* Feed becomes a framed list */
.feed{
  border: 2px solid var(--line);
  background: #000;
}

/* Each item as a “file row” */
.item{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(192,192,192,0.35);
}

/* date like file time column */
.date{
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* content column */
.content{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width:0;
}

/* filename */
.headline{
  color: var(--fg2);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

img, video{
  max-width: 100%;
  height: auto;
  display: block;
}

img{
  border: 2px solid #ffffff;
}


.headline:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* tags metadata line */
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  color: var(--fg);
  font-size: 12px;
}

/* “attribute” pills become bracket tokens */
.pill{
  border: 1px solid rgba(192,192,192,0.55);
  padding: 1px 6px;
  color: var(--fg);
}
.pill::before{ content:"["; color: var(--muted); }
.pill::after{ content:"]"; color: var(--muted); }

/* empty state */
.empty{
  padding: 12px 10px;
  color: var(--danger);
}
.empty::before{
  content: "ERROR: ";
  color: var(--danger);
}

/* A subtle focus line like selection (optional)
   If later we add keyboard navigation, we can toggle .selected */
.item:hover{
  background: rgba(0, 0, 170, 0.22);
}

/* Mobile: collapse to one column like a list view */
@media (max-width: 560px){
  .item{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .headline{
    white-space: normal;
  }
  .tags{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .tags::-webkit-scrollbar{ display:none; }
}

/* === Post layout === */

.post{
  border-top: 2px solid var(--line);
  padding-top: 18px;
}

/* Media block */
.post-media{
  max-width: 720px;
  margin-bottom: 24px;
}

.post-media img{
  display: block;
  margin-bottom: 16px;
}

/* Text block */
.post-text{
  max-width: 980px;
}

/* Two-language columns */
.lang-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* Language column */
.lang{
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
}

/* Slight visual distinction */
.lang.ru{
  color: var(--fg2);
}

.lang.en{
  color: var(--fg);
}

/* Paragraph rhythm */
.lang p{
  margin: 0 0 12px;
}

/* Mobile: stack columns */
@media (max-width: 720px){
  .lang-cols{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* === Inverted (white) photo pages === */

/* Белый фон только для страниц с постами */
.post{
  background: #ffffff;
  color: #000000;
  padding: 24px;
  margin-top: 12px;
  border: 2px solid #000000;
}

/* Убираем NC-рамку сверху, она уже не нужна */
.post{
  border-top: none;
}

/* Картинки на белом фоне */
.post img{
  border: 2px solid #000000;   /* инверсия: чёрная рамка */
  background: #ffffff;
}

/* Текстовый блок */
.post-text{
  color: #000000;
}

/* Двухъязычные колонки */
.post .lang{
  color: #000000;
}

/* Немного контраста между языками */
.post .lang.ru{
  color: #000000;
}

.post .lang.en{
  color: #333333;
}

/* Заголовки внутри поста */
.post h2{
  color: #000000;
  font-size: 14px;
  margin: 0 0 16px;
  text-transform: uppercase;
  border-bottom: 1px solid #000000;
  padding-bottom: 6px;
}

/* Разделитель между фото и текстом */
.post-media{
  padding-bottom: 16px;
  border-bottom: 1px solid #000000;
}

/* Ссылки внутри постов */
.post a{
  color: #000000;
  text-decoration: underlin

  /* === Optional photo caption (collapsible, RU/EN) === */

.cap{
  margin: -6px 0 18px; /* ближе к фото */
}

.cap-sum{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 12px;
  text-transform: uppercase;

  color: var(--fg2);
  border: 2px solid var(--line);
  background: #000;
  padding: 4px 8px;
}

/* Hide default marker */
.cap-sum::-webkit-details-marker{ display:none; }

/* Custom marker like DOS */
.cap-sum::before{
  content: "+";
  display: inline-block;
  width: 12px;
  text-align: center;
  color: var(--accent2);
}
.cap[open] .cap-sum::before{
  content: "-";
}

/* Geo link inside summary */
.cap-geo{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;

  font-size: 12px;
  text-transform: uppercase;

  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(192,192,192,0.55);
  padding: 2px 6px;
}
.cap-geo:hover{
  background: var(--panel2);
  color: var(--accent);
}

.geo-icn{
  color: var(--accent2);
  line-height: 1;
}
.geo-txt{
  opacity: 0.9;
}

/* Caption body */
.cap-body{
  border: 2px solid var(--line);
  border-top: 0;
  padding: 10px 10px 8px;
  background: #000;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
}

/* Two columns */
.cap-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cap-col p{
  margin: 0 0 8px;
}

.cap-ru{ color: var(--fg2); }
.cap-en{ color: var(--fg); }

/* Mobile: stack */
@media (max-width: 720px){
  .cap-cols{ grid-template-columns: 1fr; }
}