/* Blog index + author UI.

   One shared file linked by BOTH shells (index.php and altdevsecure/index.php),
   following the cinema.css and wiki-contrib.css precedent. styles.css and
   altdevsecure/styles.css are unlinked copies that drift, so anything new goes
   here rather than being pasted into both.

   The post-reading rules (.blog-post, .blog-title, .blog-date, .blog-body and
   its descendants) already exist in BOTH copies of styles.css and are not
   repeated here — this file only adds the index, the compose/edit form, and the
   states the hardcoded single post never had (author byline, draft badge).

   Form controls reuse .wiki-af-* from wiki-contrib.css, which both shells
   already link: those rules are generic dark-theme control styling with nothing
   wiki-specific in them, and a second near-identical copy under a blog- prefix
   is how the two forms end up looking subtly different.

   House style: radius tokens are both 0, so no rounding; there is a global
   prefers-reduced-motion reset plus an explicit transition:none block, so no
   motion; hover either fills with a -faint token or fully inverts. */

.blog-add-btn,
.blog-md-btn {
  margin-left: 10px;
}

/* ------------------------------------------------------------- index -- */

.blog-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 90%;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--hue-1-faint);
  /* rows sit flush; collapsing the shared edge keeps one hairline between them */
  margin-bottom: -1px;
}

.blog-card:hover {
  background: var(--hue-1-faint);
}

.blog-card-title {
  font-family: var(--f-pixel);
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: 1px;
  text-decoration: none;
  /* html,body set text-align justify, which shreds a one-line heading */
  text-align: left;
}

.blog-card-title:hover {
  color: var(--hue-1);
}

.blog-card-meta {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
}

.blog-card-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  text-align: left;
}

/* ------------------------------------------------- byline + draft -- */

.blog-author {
  color: var(--hue-1);
}

/* Reads as a warning rather than a label on purpose: a draft rendered on the
   public tab means the viewer is its author or an admin, and mistaking one for
   a published post is the mistake worth preventing. */
.blog-draft {
  color: var(--bg-2);
  background: var(--hue-1);
  padding: 1px 6px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ------------------------------------------------------------- form -- */

.blog-addform {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
  padding: 0 0 16px;
}

.blog-formnote {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--ink-mute);
  text-align: left;
}

/* .blog-title is a display:grid heading in both copies of styles.css; inside
   the form it is a plain form heading and the grid columns misplace it */
.blog-addform .blog-title {
  display: block;
  font-size: 24px;
}

.blog-af-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-mute);
  text-align: left;
  cursor: pointer;
}

.blog-af-check input {
  margin: 2px 0 0;
  accent-color: var(--hue-1);
  flex: none;
}

/* ----------------------------------------------------------- delete -- */

.blog-delform {
  max-width: 860px;
  padding: 14px 0 32px;
  border-top: 1px dashed var(--hue-1-faint);
}

/* .back-btn is an <a> rule; a <button> needs the box reset to match it, the
   same fix button.dl-btn carries in wiki-contrib.css */
button.blog-del-btn {
  background: none;
  border: 1px solid var(--hue-1-faint);
  color: var(--ink-mute);
  cursor: pointer;
  line-height: normal;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 14px;
}

button.blog-del-btn:hover {
  background: var(--hue-1);
  color: var(--bg-2);
  border-color: var(--hue-1);
}

/* ------------------------------------------------------------ body -- */

/* blog_heading_ids() wraps every table so a wide one scrolls inside the post
   instead of stretching the frame past the viewport */
.blog-tablewrap {
  overflow-x: auto;
  margin: 0 0 18px;
}

.blog-body pre {
  overflow-x: auto;
}

@media (max-width: 900px) {
  .blog-card {
    padding: 14px;
  }

  .blog-card-title {
    font-size: 18px;
  }
}