/* ============================================================
   blog-file.css: the blog page ("blog file"), built by renderBlog()
   in script.js. lives in the same 530x578 panel the old list/detail
   blog used. loads after styles.css, before mobile.css.
   ============================================================ */

.blogfile{
  --bf-line:#9aabb6;
  --bf-line2:#c3ced4;
  --bf-line3:#e1e8eb;
  --bf-ink:#2f3d45;
  --bf-ink2:#5f707a;
  --bf-dim:#8a9ca5;
  --bf-paper:#fff;
  --bf-list:#fbfdfd;
  --bf-chrome:linear-gradient(180deg,#eef3f5,#cdd8de);
  --bf-btn:linear-gradient(180deg,#fff,#e3eaee);
  --bf-btn-hover:linear-gradient(180deg,#fff,#eef2ff);
  --bf-sel:linear-gradient(90deg,#e7e8fb,#f5f6fe);
  --bf-win:linear-gradient(180deg,#8c93e3,#5d65c4);
  --bf-win-ink:#fff;
  --bf-dot:#6c74cf;

  --bf-t0-ink:#5a62c4; --bf-t0-bg:#eff0fd; --bf-t0-line:#b3b8ef;
  --bf-t1-ink:#3d8a6b; --bf-t1-bg:#ebf8f2; --bf-t1-line:#9fd2bd;
  --bf-t2-ink:#b0602a; --bf-t2-bg:#fdf2ea; --bf-t2-line:#e6bf9f;
  --bf-t3-ink:#b04a78; --bf-t3-bg:#fcedf4; --bf-t3-line:#e8b2cb;
  --bf-t4-ink:#2f7b99; --bf-t4-bg:#e9f6fb; --bf-t4-line:#a3d2e4;
}

[data-theme="dark"] .blogfile{
  --bf-line:#3a4147;
  --bf-line2:#2f363b;
  --bf-line3:#252b2f;
  --bf-ink:#dfe5e8;
  --bf-ink2:#9aa7ad;
  --bf-dim:#6c7880;
  --bf-paper:#15191c;
  --bf-list:#121518;
  --bf-chrome:linear-gradient(180deg,#20262b,#14171a);
  --bf-btn:linear-gradient(180deg,#262b2f,#181c1f);
  --bf-btn-hover:linear-gradient(180deg,#2c333a,#1c2024);
  --bf-sel:linear-gradient(90deg,#272b4a,#1a1d2c);
  --bf-win:linear-gradient(180deg,#5a61b8,#3c418a);
  --bf-win-ink:#eef0ff;
  --bf-dot:#8b93e6;

  --bf-t0-ink:#a9afff; --bf-t0-bg:#23264a; --bf-t0-line:#454c9a;
  --bf-t1-ink:#7fd1ae; --bf-t1-bg:#173027; --bf-t1-line:#2f6a52;
  --bf-t2-ink:#f0a874; --bf-t2-bg:#33231a; --bf-t2-line:#7a4e2f;
  --bf-t3-ink:#f19cc3; --bf-t3-bg:#33202a; --bf-t3-line:#7a3f5b;
  --bf-t4-ink:#86cbe6; --bf-t4-bg:#182c35; --bf-t4-line:#2f6276;
}

.blogfile .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.blogfile button{ font:inherit; color:inherit; }

/* ---------- title bar ---------- */
.bf-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border-bottom:1px solid var(--bf-line);
  background:
    repeating-linear-gradient(180deg,rgba(120,130,140,.18) 0px,rgba(120,130,140,.18) 1px,transparent 1px,transparent 3px),
    var(--bf-chrome);
  font-family:var(--font-pixel);
  font-size:15px;
  line-height:1;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--bf-ink2);
}

.bf-bar-mark{
  width:8px;
  height:8px;
  background:var(--accent);
  box-shadow:0 0 5px var(--accent-glow);
}

.bf-bar-path{
  color:var(--bf-dim);
  text-transform:none;
  letter-spacing:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.bf-bar-count{ margin-left:auto; white-space:nowrap; }

/* ---------- search + month ---------- */
.bf-ctl{
  flex:0 0 auto;
  display:flex;
  gap:5px;
  padding:5px 8px;
  border-bottom:1px solid var(--bf-line2);
}

.bf-search{ flex:1 1 auto; min-width:0; display:flex; }
.bf-month{ flex:0 0 auto; display:flex; }

.bf-search input,
.bf-month select{
  font-family:var(--font-pixel);
  font-size:15px;
  letter-spacing:1px;
  line-height:1;
  height:22px;
  border:1px solid var(--bf-line);
  border-radius:0;
  color:var(--bf-ink2);
  outline:none;
}

.bf-search input{
  width:100%;
  padding:0 7px;
  background:var(--bf-paper);
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.14);
}

.bf-search input::placeholder{ color:var(--bf-dim); }

.bf-month select{
  padding:0 4px;
  background:var(--bf-btn);
  cursor:pointer;
  max-width:130px;
}

[data-theme="dark"] .bf-month select{ color-scheme:dark; }

.bf-search input:focus-visible,
.bf-month select:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-soft);
}

/* ---------- folder chips ---------- */
.bf-folders{
  flex:0 0 auto;
  position:relative;
  z-index:6;
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  border-bottom:1px solid var(--bf-line);
  overflow:visible;
  white-space:nowrap;
}

.bf-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:20px;
  padding:0 6px;
  border:1px solid var(--bf-line2);
  background:var(--bf-paper);
  font-family:var(--font-pixel) !important;
  font-size:14px !important;
  letter-spacing:.5px;
  line-height:1;
  color:var(--bf-ink2) !important;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}

.bf-chip i{ font-style:normal; color:var(--bf-dim); }

.bf-chip:hover{ border-color:var(--accent); color:var(--accent) !important; }

.bf-chip.on{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff !important;
}

.bf-chip.on i{ color:rgba(255,255,255,.72); }

/* tiny pixel folder for "all" */
.bf-chip-icon{
  width:11px;
  height:8px;
  margin-top:1px;
  background:currentColor;
  clip-path:polygon(0 0,40% 0,50% 18%,100% 18%,100% 100%,0 100%);
  opacity:.9;
}

.bf-more{ position:relative; flex:0 0 auto; }

.bf-more-menu{
  position:absolute;
  top:calc(100% + 3px);
  right:0;
  min-width:120px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:5px;
  border:1px solid var(--bf-line);
  background:var(--bf-paper);
  box-shadow:0 6px 16px rgba(30,40,50,.25);
}

.bf-more-menu[hidden]{ display:none; }

.bf-more-menu .bf-chip{ justify-content:space-between; }

/* ---------- columns ---------- */
.bf-cols{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:178px minmax(0,1fr);
}

.blogfile.is-wide .bf-cols{ grid-template-columns:0 minmax(0,1fr); }
.blogfile.is-wide .bf-list{ visibility:hidden; border-right:0; }

/* ---------- post list ---------- */
.bf-list{
  overflow:auto;
  min-height:0;
  border-right:1px solid var(--bf-line);
  background:var(--bf-list);
  scrollbar-width:thin;
}

.bf-month-head{
  position:sticky;
  top:0;
  z-index:1;
  padding:5px 9px 3px;
  border-bottom:1px dashed var(--bf-line2);
  background:var(--bf-list);
  font-family:var(--font-pixel);
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--bf-dim);
}

.bf-row{
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  gap:6px;
  width:100%;
  padding:7px 8px 7px 9px;
  border:0;
  border-bottom:1px solid var(--bf-line3);
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease;
}

.bf-row:hover:not(.active){ background:var(--bf-btn-hover); }

.bf-row.active{
  background:var(--bf-sel);
  box-shadow:inset 3px 0 var(--accent);
}

.bf-row:focus-visible{ outline:1px solid var(--accent); outline-offset:-1px; }

.bf-dot{
  width:6px;
  height:6px;
  margin-top:5px;
  border-radius:50%;
  border:1px solid var(--bf-line2);
}

.bf-dot.unread{
  border-color:var(--bf-dot);
  background:var(--bf-dot);
  box-shadow:0 0 5px var(--accent-glow);
}

.bf-row-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }

.bf-row-title{
  font-size:11px;
  font-weight:bold;
  line-height:1.3;
  color:var(--bf-ink) !important;
  overflow-wrap:anywhere;
}

.bf-row-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 6px;
  font-size:9.5px;
  color:var(--bf-dim) !important;
}

.bf-new{
  display:inline-block;
  margin-left:4px;
  padding:0 4px;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-pixel);
  font-weight:normal;
  font-size:12px;
  line-height:13px;
  letter-spacing:1px;
  vertical-align:1px;
}

.bf-empty{
  padding:14px 10px;
  font-size:11px;
  color:var(--bf-dim);
}

/* tag chips (list + bottom of posts) */
.bf-tag{
  display:inline-block;
  padding:0 4px;
  border:1px solid var(--bf-t0-line);
  border-radius:2px;
  background:var(--bf-t0-bg);
  color:var(--bf-t0-ink) !important;
  font-family:var(--font-pixel) !important;
  font-size:12px !important;
  letter-spacing:1px;
  line-height:13px;
  text-transform:uppercase;
}

.bf-tag.t1{ border-color:var(--bf-t1-line); background:var(--bf-t1-bg); color:var(--bf-t1-ink) !important; }
.bf-tag.t2{ border-color:var(--bf-t2-line); background:var(--bf-t2-bg); color:var(--bf-t2-ink) !important; }
.bf-tag.t3{ border-color:var(--bf-t3-line); background:var(--bf-t3-bg); color:var(--bf-t3-ink) !important; }
.bf-tag.t4{ border-color:var(--bf-t4-line); background:var(--bf-t4-bg); color:var(--bf-t4-ink) !important; }

button.bf-tag{ cursor:pointer; }
button.bf-tag:hover{ filter:brightness(1.06); }

/* ---------- reader ---------- */
.bf-read{
  --bf-size:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  min-height:0;
  padding:7px;
}

.bf-doc{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--bf-line);
  background:var(--bf-paper);
}

.bf-doc-title{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  height:21px;
  padding:0 4px 0 6px;
  background:var(--bf-win);
  color:var(--bf-win-ink);
  font-family:var(--font-pixel);
  font-size:15px;
  letter-spacing:1px;
  line-height:1;
}

.bf-doc-icon{
  flex:0 0 auto;
  width:9px;
  height:11px;
  background:
    linear-gradient(currentColor,currentColor) 2px 3px/5px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 2px 5px/5px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 2px 7px/4px 1px no-repeat;
  border:1px solid currentColor;
  opacity:.9;
}

.bf-doc-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bf-win-btn{
  flex:0 0 auto;
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.12);
  color:var(--bf-win-ink) !important;
  font-size:11px !important;
  line-height:1;
  cursor:pointer;
}

.bf-win-btn:hover{ background:rgba(255,255,255,.28); }

.bf-tools{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border-bottom:1px solid var(--bf-line2);
  background:var(--bf-chrome);
}

.bf-tools-sp{ flex:1; }

/* like / comment keep their classes for likePost() and the comment
   count updater, but take the toolbar look here */
.bf-tools .like-btn,
.bf-tools .comment-btn,
.bf-tool{
  margin:0;
  height:20px;
  padding:0 7px;
  border:1px solid var(--bf-line);
  border-radius:0;
  background:var(--bf-btn);
  color:var(--bf-ink2);
  font-family:var(--font-pixel);
  font-size:14px;
  letter-spacing:1px;
  line-height:1;
  text-transform:none;
  box-shadow:none;
  cursor:pointer;
}

.bf-tools .like-btn:hover:not(:disabled),
.bf-tools .comment-btn:hover,
.bf-tool:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--bf-btn-hover);
}

.bf-tools .like-btn.liked{ color:#d0457b; border-color:#e3a3bd; }
[data-theme="dark"] .bf-tools .like-btn.liked{ color:#f08ab4; border-color:#7a3f5b; }

.bf-doc-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:13px 15px 14px;
  font-size:calc(11.5px + var(--bf-size) * 1.5px) !important;
  line-height:1.65 !important;
  color:var(--bf-ink) !important;
  scrollbar-width:thin;
}

.bf-doc-body p{ margin:0 0 10px; }

.bf-title{
  margin:0 0 2px !important;
  font-family:var(--font-pixel) !important;
  font-size:calc(26px + var(--bf-size) * 2px) !important;
  font-weight:normal !important;
  line-height:1 !important;
  letter-spacing:1px;
  text-transform:none !important;
  color:var(--bf-ink) !important;
  text-wrap:balance;
}

.bf-meta{
  margin-bottom:10px;
  font-family:var(--font-pixel);
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--bf-dim);
}

.bf-doc-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:12px;
  padding-top:9px;
  border-top:1px dashed var(--bf-line2);
}

.bf-status{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  min-width:0;
  border-top:1px solid var(--bf-line);
  background:var(--bf-chrome);
  font-family:var(--font-pixel);
  font-size:13px;
  letter-spacing:.5px;
  line-height:1;
  color:var(--bf-ink2);
  text-transform:uppercase;
}

.bf-status span{
  padding:4px 7px;
  border-right:1px solid var(--bf-line2);
  white-space:nowrap;
}

.bf-status .bf-status-song{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:none;
}

.bf-status .bf-status-song{ flex:1 1 auto; }
.bf-status .bf-status-sp{ flex:1; padding:0; border:0; }
.bf-status .bf-status-song ~ .bf-status-sp{ display:none; }
.bf-status span:last-child{ border-right:0; }

.bf-pager{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
}

.bf-pager button{
  padding:2px 2px;
  border:0;
  background:none;
  font-family:var(--font-pixel);
  font-size:15px;
  letter-spacing:1px;
  color:var(--accent);
  cursor:pointer;
}

.bf-pager button:hover:not(:disabled){ text-decoration:underline; }
.bf-pager button:disabled{ color:var(--bf-line2); cursor:default; }

/* ---------- phones: one column, list on top ---------- */
@media(max-width:860px){
  .bf-bar-path{ display:none; }

  .bf-search input,
  .bf-month select{ font-size:16px; height:30px; }   /* 16px stops iOS zoom */

  .bf-folders{
    overflow-x:auto;
    scrollbar-width:none;
  }

  .bf-folders::-webkit-scrollbar{ display:none; }

  .bf-chip{ height:26px; padding:0 9px; font-size:15px !important; }

  .bf-cols{ grid-template-columns:1fr; }

  .bf-list{
    max-height:230px;
    border-right:0;
    border-bottom:1px solid var(--bf-line);
  }

  .bf-row{ padding:10px 10px 10px 11px; }
  .bf-row-title{ font-size:12px; }

  .bf-read{ padding:8px; }
  .bf-doc{ min-height:320px; }
  .bf-doc-body{ overflow:visible; font-size:calc(12.5px + var(--bf-size) * 1.5px) !important; }

  .bf-tools .like-btn,
  .bf-tools .comment-btn,
  .bf-tool{ height:28px; font-size:15px; }

  .bf-win-btn{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  .bf-row,
  .bf-chip{ transition:none; }
}

/* ---------- simpler blog (fewer controls) ---------- */
.bf-month select{ max-width:150px; }
.bf-row{ grid-template-columns:minmax(0,1fr); padding:7px 9px; }
.bf-row-meta{ font-size:9.5px; }
.bf-title{ font-size:calc(22px + var(--bf-size) * 2px) !important; }