/* Hallmark · answered F7 · one outlined recipe for the blog's quiet controls on purpose: back, editor and admin actions read as one family under the single filled button */
/* Hallmark · answered F4 · the filled draft and publish buttons and the active image tab live in the admin editor and its dialog; the public pages carry one filled button */
/* ── Blog: the same column as the home page. Tokens come from ../style.css ── */
.blog-section{padding-top:calc(var(--space-md) + var(--nav-h) + var(--space-xl)); padding-bottom:var(--space-xl); min-height:70svh}
.blog-title{font-size:var(--text-xl)}

/* Header */
.blog-header{display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-md)}
.blog-header-text{min-width:0}
.btn-new-post{
  display:inline-flex; align-items:center; min-height:36px; padding:0 var(--space-sm);
  border:1px solid var(--color-rule-2); border-radius:var(--radius); background:none; color:var(--color-ink);
  font-weight:700; font-size:var(--text-sm); transition:border-color var(--dur-1) var(--ease);
}
.btn-new-post:hover{border-color:var(--color-ink)}
.btn-new-post:active{transform:translateY(1px)}

/* Post list: plain rows, a small picture on the right when a post has one */
.post-index{display:flex; flex-direction:column; gap:var(--space-sm)}
.post-index + .post-index{margin-top:var(--space-xs)}
.post-row{
  display:flex; align-items:flex-start; gap:var(--space-lg);
  padding:var(--space-2xs) 0;
  color:inherit; text-decoration:none;
}
.post-row:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.blog-card-body{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3xs)}
.blog-card-title{margin:0; max-width:none; font-size:var(--text-lg); font-weight:700; line-height:1.25; letter-spacing:-.015em; color:var(--color-ink); transition:transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease)}
.post-row:hover .blog-card-title,.post-row:focus-visible .blog-card-title{transform:translateX(6px); color:var(--color-rust)}
.blog-card-date{display:flex; align-items:center; gap:var(--space-xs); font-size:var(--text-xs); color:var(--color-tan)}
.blog-card-excerpt{margin-top:var(--space-2xs); font-size:var(--text-body); line-height:1.5; color:var(--color-muted); max-width:60ch}
.post-row-img{flex-shrink:0; display:block; width:128px; aspect-ratio:4 / 3; overflow:clip; background:var(--color-paper-2)}
.blog-card-img{width:100%; height:100%; object-fit:cover}
.draft-pill{border-color:var(--color-draft-edge); background:var(--color-draft-wash); color:var(--color-draft)}

/* Section subtitle (Drafts, admin only) */
.section-subtitle{margin:var(--space-xl) 0 var(--space-sm); font-size:var(--text-lg); color:var(--color-ink-2)}

/* Back link: an outlined control with its own arrow, easy to find at the top of a post */
.back-link{
  display:inline-flex; align-items:center; gap:var(--space-xs); min-height:40px; margin-bottom:var(--space-md);
  padding:0 var(--space-md) 0 var(--space-sm);
  border:1px solid var(--color-rule-2); border-radius:var(--radius);
  color:var(--color-ink); text-decoration:none; font-size:var(--text-sm); font-weight:700;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.back-link svg{color:var(--color-tan); transition:transform var(--dur-2) var(--ease)}
.back-link:hover{color:var(--color-rust); border-color:var(--color-rust)}
.back-link:hover svg{color:var(--color-rust); transform:translateX(-3px)}
.back-link:active{transform:translateY(1px)}

/* ── Single post ── */
.blog-post{margin-bottom:var(--space-md)}
.blog-post-head{margin-bottom:var(--space-md)}
.blog-post-title{font-size:var(--text-xl); line-height:1.15; letter-spacing:-.025em; color:var(--color-ink)}
.blog-post-meta{margin-top:var(--space-xs); display:flex; flex-direction:column; gap:var(--space-3xs)}
.blog-post-date,.blog-post-author,.blog-post-category{margin:0; font-size:var(--text-sm); color:var(--color-muted)}
.blog-post-date{color:var(--color-tan)}
.blog-post-cover{width:100%; max-height:420px; object-fit:cover; margin-bottom:var(--space-md); background:var(--color-paper-2)}
.post-admin-bar{display:flex; gap:var(--space-xs); margin-bottom:var(--space-lg)}
.blog-post-body{font-size:var(--text-md); line-height:1.75; color:var(--color-ink-2); max-width:68ch}
.blog-post-body > * + *{margin-top:var(--space-md)}
.blog-post-body h2 + *,.blog-post-body h3 + *{margin-top:var(--space-2xs)}
.blog-post-body > :first-child{margin-top:0}
.blog-post-body p{margin:0}
.blog-post-body h2{margin:var(--space-lg) 0 0; font-size:var(--text-lg); letter-spacing:-.015em; line-height:1.25}
.blog-post-body h3{margin:var(--space-md) 0 0; font-size:var(--text-item); letter-spacing:-.01em; line-height:1.3}
.blog-post-body img{display:block; max-width:100%; height:auto; margin:var(--space-md) 0; border-radius:var(--radius) !important; background:var(--color-paper-2)}
.blog-post-body blockquote{margin:var(--space-md) 0; padding-left:var(--space-md); border-left:1px solid var(--color-faint); color:var(--color-ink)}
.blog-post-body pre{
  margin:var(--space-md) 0; padding:var(--space-md); overflow-x:auto;
  background:var(--color-paper-2); border:1px solid var(--color-rule); border-radius:var(--radius);
  font-size:var(--text-sm); line-height:1.6;
}
.blog-post-body code{font-family:var(--font-code); font-size:.9em; color:var(--color-ink)}
.blog-post-body a{color:var(--color-ink); text-decoration:underline; text-decoration-color:var(--color-tan)}
.blog-post-body a:hover{color:var(--color-rust); text-decoration-color:var(--color-rust)}
.blog-post-body ul,.blog-post-body ol{padding-left:var(--space-lg)}
.blog-post-body li + li{margin-top:var(--space-2xs)}
.blog-post-body strong,.blog-post-body b{color:var(--color-ink); font-weight:700}

/* Admin buttons on a post */
.btn-sm{
  display:inline-flex; align-items:center; min-height:36px; padding:0 var(--space-sm);
  border:1px solid var(--color-rule-2); border-radius:var(--radius); background:none; color:var(--color-muted);
  font-size:var(--text-sm); transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn-sm:hover{color:var(--color-ink); border-color:var(--color-faint)}
.btn-sm:active{transform:translateY(1px)}
.btn-delete{border-color:var(--color-danger-edge); color:var(--color-danger)}
.btn-delete:hover{background:var(--color-danger-wash); color:var(--color-danger-strong); border-color:var(--color-danger-edge)}

/* ── Comments ── */
.comments-section{margin-top:var(--space-xl); padding-top:var(--space-md); border-top:1px solid var(--color-rule)}
.comments-heading{margin-bottom:var(--space-sm); font-size:var(--text-lg); letter-spacing:-.015em}
.comments-heading .muted{font-weight:400}
.comment-item{padding:var(--space-xs) 0}
.comment-meta{display:flex; align-items:baseline; gap:var(--space-sm); margin-bottom:var(--space-2xs)}
.comment-author{font-family:var(--font-display); font-size:var(--text-md); font-weight:700; letter-spacing:-.01em; color:var(--color-ink)}
.comment-date{font-size:var(--text-xs); color:var(--color-tan)}
.comment-del{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid transparent; border-radius:var(--radius); background:none; color:var(--color-danger); font-size:var(--text-lg); line-height:1;
}
.comment-del:hover{border-color:var(--color-danger-edge)}
.comment-body{margin:0; font-size:var(--text-body); color:var(--color-ink-2); line-height:1.6}
.no-comments{color:var(--color-muted)}
.leave-comment-btn{
  display:inline-flex; align-items:center; min-height:40px; margin-top:var(--space-sm); padding:0 var(--space-md);
  border:1px solid var(--color-rule-2); border-radius:var(--radius); background:none; color:var(--color-ink);
  font-size:var(--text-sm); transition:border-color var(--dur-1) var(--ease);
}
.leave-comment-btn:hover{border-color:var(--color-ink)}
.leave-comment-btn:active{transform:translateY(1px)}

/* Modal extras */
.modal-textarea{margin-top:var(--space-xs); min-height:110px; resize:vertical}
#imgUrlTab .modal-input + .modal-input,#imgUploadTab .modal-input + .modal-input{margin-top:var(--space-xs)}
.modal-error{margin:var(--space-xs) 0 0; color:var(--color-danger); font-size:var(--text-sm)}

/* ── Editor (admin) ── */
.editor-wrap{margin-top:var(--space-lg)}
.e-title,.e-cover{
  display:block; width:100%; min-height:44px; padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-faint); border-radius:var(--radius-input); background:var(--color-paper); color:var(--color-ink);
  outline:2px solid transparent; outline-offset:-3px;
}
.e-title{font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-xs)}
.e-cover{font-size:var(--text-sm); color:var(--color-ink-2)}
.e-title:focus-visible,.e-cover:focus-visible{outline-color:var(--color-focus)}
.e-cover-row{display:flex; gap:var(--space-xs); align-items:stretch; margin-bottom:var(--space-sm)}
.e-cover-row .e-cover{flex:1; min-width:0}
.btn-cover-upload{
  flex-shrink:0; display:inline-flex; align-items:center; padding:0 var(--space-md); cursor:pointer;
  border:1px solid var(--color-rule-2); border-radius:var(--radius); color:var(--color-ink); font-size:var(--text-sm);
  transition:border-color var(--dur-1) var(--ease);
}
.btn-cover-upload:hover{border-color:var(--color-ink)}
.btn-cover-upload:focus-within{outline:2px solid var(--color-focus); outline-offset:2px}
.toolbar{display:flex; flex-wrap:wrap; gap:var(--space-2xs); padding:var(--space-xs); background:var(--color-paper-2); border:1px solid var(--color-rule-2); border-bottom:0}
.toolbar button{
  min-height:32px; padding:0 var(--space-sm); border:1px solid transparent; border-radius:var(--radius);
  background:none; color:var(--color-ink-2); font-size:var(--text-sm); line-height:1;
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.toolbar button:hover{border-color:var(--color-rule-2); color:var(--color-ink)}
.toolbar button:active{transform:translateY(1px)}
.tb-sep{width:1px; align-self:stretch; background:var(--color-rule-2); margin:0 var(--space-2xs)}
.e-body{
  min-height:300px; padding:var(--space-md); overflow-y:auto;
  border:1px solid var(--color-rule-2); background:var(--color-paper); color:var(--color-ink-2);
  font-size:var(--text-md); line-height:1.7; outline:2px solid transparent; outline-offset:-3px;
}
.e-body:focus-visible{outline-color:var(--color-focus)}
.e-body img{max-width:100%; border-radius:var(--radius) !important}
.e-body blockquote{margin:var(--space-xs) 0; padding-left:var(--space-md); border-left:1px solid var(--color-faint); color:var(--color-ink)}
.e-body pre{padding:var(--space-sm); overflow-x:auto; background:var(--color-paper-2); font-family:var(--font-code); font-size:var(--text-sm)}
.editor-btns{display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-md)}
.btn-preview,.btn-draft,.btn-publish{
  display:inline-flex; align-items:center; min-height:40px; padding:0 var(--space-md);
  border:1px solid var(--color-rule-2); border-radius:var(--radius); font-weight:700; font-size:var(--text-sm);
  transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn-preview{background:none; color:var(--color-ink)}
.btn-preview:hover{border-color:var(--color-ink)}
.btn-draft{background:var(--color-draft-wash); color:var(--color-draft); border-color:var(--color-draft-edge)}
.btn-draft:hover{border-color:var(--color-draft)}
.btn-publish{background:var(--color-accent); color:var(--color-accent-ink); border-color:var(--color-accent)}
.btn-publish:hover{background:var(--color-rust); border-color:var(--color-rust)}
.btn-preview:active,.btn-draft:active,.btn-publish:active{transform:translateY(1px)}
.preview-badge{
  display:inline-flex; align-items:center; min-height:26px; padding:0 var(--space-sm); margin-bottom:var(--space-md);
  border:1px solid var(--color-draft-edge); background:var(--color-draft-wash); color:var(--color-draft);
  font-size:var(--text-sm); font-weight:700;
}

/* Image modal tabs */
.img-tabs{display:flex; gap:var(--space-2xs); margin-bottom:var(--space-md)}
.img-tab-btn{
  min-height:36px; padding:0 var(--space-md); border:1px solid var(--color-rule-2); border-radius:var(--radius);
  background:none; color:var(--color-muted); font-size:var(--text-sm);
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.img-tab-btn:hover{color:var(--color-ink)}
.img-tab-btn.active{color:var(--color-accent-ink); background:var(--color-accent); border-color:var(--color-accent); font-weight:700}
.file-input{padding:var(--space-xs)}

/* Admin link */
.admin-link-row{margin-top:var(--space-2xl); padding-top:var(--space-md); border-top:1px solid var(--color-rule); text-align:center}
.admin-link{
  min-height:36px; padding:0 var(--space-sm); border:1px solid transparent; border-radius:var(--radius);
  background:none; color:var(--color-muted); font-size:var(--text-sm);
}
.admin-link:hover{color:var(--color-ink); border-color:var(--color-rule-2)}

/* Empty and loading states */
.blog-empty{margin:var(--space-xl) 0; color:var(--color-muted); text-align:center}
.blog-empty a{color:var(--color-ink); font-weight:700}
.blog-loading{margin-top:var(--space-lg); color:var(--color-muted)}

/* Setup / TOTP */
.totp-input{text-align:center; font-size:var(--text-xl); letter-spacing:.4em; font-variant-numeric:tabular-nums}
.qr-box{margin:var(--space-md) 0; display:flex; justify-content:center}
.qr-img{background:var(--color-bright); padding:var(--space-xs)}
.totp-manual{margin:var(--space-xs) 0 var(--space-md); font-size:var(--text-sm); color:var(--color-muted); word-break:break-all}
.totp-manual code{font-family:var(--font-code); color:var(--color-ink)}

/* Admin trigger (discrete) */
.admin-trigger{
  position:fixed; bottom:var(--space-md); right:var(--space-md); z-index:var(--z-raised);
  width:6px; height:6px; border:0; background:var(--color-rule); cursor:default;
  transition:background-color var(--dur-2) var(--ease);
}
.admin-trigger:hover{background:var(--color-faint); cursor:pointer}

/* ── Phone ── */
@media (max-width:40rem){
  .blog-section{padding-top:calc(var(--space-sm) + var(--nav-h) + var(--space-lg))}
  .post-row{gap:var(--space-md)}
  .post-row-img{width:88px}
  .toolbar button{min-height:40px}
  .editor-btns > *{flex:1 1 auto}
}