/* ============================================================
   Guardian Medical Billing — blog + admin styles
   Reuses tokens from styles.css (:root)
   ============================================================ */

.page-hero{
  padding:64px 0 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);margin:.2em 0}
.page-hero p{color:var(--muted);max-width:60ch}

.blog-wrap{padding:48px 0 72px}

/* index grid */
.post-grid{
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  margin-top:8px;
}
.post-card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.post-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.post-card .cover{aspect-ratio:16/9;background:var(--panel-2);object-fit:cover;width:100%}
.post-card .cover--placeholder{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f1722,#141f2e);
}
.post-card .cover--placeholder img{width:56px;opacity:.5}
.post-card .pc-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card h2{font-size:1.35rem;margin:0}
.post-card h2 a:hover{color:var(--gold-bright)}
.post-card .meta{font-size:.8rem;color:var(--muted-2);letter-spacing:.02em}
.post-card .excerpt{color:var(--muted);font-size:.96rem;flex:1}
.post-card .link-arrow{margin-top:6px}

.blog-empty{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:48px 28px;text-align:center;color:var(--muted);margin-top:12px;
}

/* single post */
.article{padding:16px 0 72px}
.article .article-inner{max-width:760px;margin:0 auto}
.article .back{display:inline-block;margin-bottom:22px;color:var(--muted);font-size:.9rem}
.article .back:hover{color:var(--gold)}
.article .art-meta{color:var(--muted-2);font-size:.85rem;margin:4px 0 26px}
.article h1{font-size:clamp(2rem,4.5vw,2.9rem);margin:.1em 0 .1em}
.article .art-cover{width:100%;border-radius:var(--radius);border:1px solid var(--line);margin:22px 0 8px}

/* rendered markdown body */
.post-body{font-size:1.06rem;line-height:1.8;color:var(--text)}
.post-body h2{font-size:1.6rem;margin:1.6em 0 .5em}
.post-body h3{font-size:1.28rem;margin:1.4em 0 .4em}
.post-body p{margin:0 0 1.1em}
.post-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{margin:0 0 1.1em;padding-left:1.4em}
.post-body li{margin:.35em 0}
.post-body img{border-radius:10px;border:1px solid var(--line);margin:1.2em 0}
.post-body blockquote{
  border-left:3px solid var(--gold);margin:1.4em 0;padding:.2em 0 .2em 1.1em;
  color:var(--silver);font-style:italic;
}
.post-body code{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.1em .4em;font-size:.9em}
.post-body pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;overflow:auto}
.post-body pre code{border:0;padding:0;background:none}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* ---------------- admin ---------------- */
.admin{padding:40px 0 80px}
.admin-card{
  max-width:680px;margin:0 auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:30px;
}
.admin-wide{max-width:920px}
.admin h2{margin-top:0}
.admin .field{margin-bottom:16px}
.admin label{display:block;font-size:.85rem;color:var(--silver);margin-bottom:6px;font-weight:600}
.admin input[type=text],.admin input[type=password],.admin input[type=url],.admin textarea,.admin select{
  width:100%;background:var(--panel-2);border:1px solid var(--line-strong);
  color:var(--text);border-radius:10px;padding:12px 14px;font:inherit;
}
.admin textarea{resize:vertical;min-height:220px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;line-height:1.6}
.admin input:focus,.admin textarea:focus,.admin select:focus{outline:none;border-color:var(--gold)}
.admin .row{display:flex;gap:14px;flex-wrap:wrap}
.admin .row>*{flex:1;min-width:180px}
.admin .checkline{display:flex;align-items:center;gap:10px;color:var(--silver)}
.admin .checkline input{width:auto}
.admin .admin-msg{margin:12px 0;font-size:.92rem;min-height:1.2em}
.admin-msg.err{color:#ff9a9a}
.admin-msg.ok{color:#7fd6a2}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.editor-grid{grid-template-columns:1fr}}
.preview-pane{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow:auto;max-height:520px}
.preview-pane .ph{color:var(--muted-2);font-size:.85rem}
.post-list{list-style:none;margin:20px 0 0;padding:0}
.post-list li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--panel-2);
}
.post-list .pl-title{font-weight:600}
.post-list .pl-meta{font-size:.78rem;color:var(--muted-2)}
.post-list .pill{font-size:.68rem;padding:3px 8px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted)}
.post-list .pill.live{color:#7fd6a2;border-color:#2f5c44}
.post-list .pl-actions{display:flex;gap:8px}
.btn-sm{padding:7px 14px;font-size:.82rem;border-radius:8px}
.btn-danger{background:transparent;border:1px solid #5c2f2f;color:#ff9a9a}
.btn-danger:hover{background:#2a1414}
.cheatsheet{font-size:.82rem;color:var(--muted-2);margin-top:10px;line-height:1.7}
.cheatsheet code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:.05em .35em}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:14px}
.admin-topbar .who{color:var(--muted);font-size:.85rem}

/* ---------- editor toolbar + upload + preview modal ---------- */
.toolbar{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:8px;background:var(--panel-2);border:1px solid var(--line-strong);
  border-bottom:0;border-radius:10px 10px 0 0;
}
.tbtn{
  background:var(--panel);border:1px solid var(--line-strong);color:var(--silver);
  border-radius:7px;padding:6px 11px;font-size:.9rem;line-height:1;cursor:pointer;
  font-family:inherit;transition:.15s var(--ease);
}
.tbtn:hover{border-color:var(--gold);color:var(--gold-bright)}
.tbtn b{font-weight:700}.tbtn i{font-style:italic}
.tbtn.sep{background:none;border:0;color:var(--muted-2);padding:6px 2px;cursor:default}
.tbtn.right{margin-left:auto}
.admin .toolbar + textarea{border-radius:0 0 10px 10px;min-height:420px}

.cover-upload{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cover-thumb{width:120px;height:68px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--panel-2)}
.cover-thumb.empty{display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:.72rem;text-align:center}
.cover-upload .btn{flex:0 0 auto}
.hint{color:var(--muted-2);font-size:.78rem}
.file-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

.modal-overlay{
  position:fixed;inset:0;background:rgba(4,7,11,.72);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;z-index:300;overflow:auto;
}
.modal-overlay[hidden]{display:none}
.modal{
  width:100%;max-width:820px;background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0;font-size:1.1rem}
.modal-close{background:var(--panel);border:1px solid var(--line-strong);color:var(--silver);
  border-radius:8px;width:34px;height:34px;font-size:1.1rem;cursor:pointer}
.modal-close:hover{border-color:var(--gold);color:var(--gold-bright)}
.modal-content{padding:26px 30px 34px}