/* light theme — ONLY for the editor/admin page (body.admin-page).
   The feed loads index.css (dark) AND this file; unscoped :root vars here
   would override the dark theme because card.css loads later. */
body.admin-page{--bg:#f5f6f8;--surface:#ffffff;--surface-hover:#edeef2;--card:#ffffff;--card-border:#b0b4be;--accent:#e05040;--accent-soft:rgba(224,80,64,.08);--text:#1a1c24;--text-mid:#4a4e5c;--text-dim:#8890a0;--green:#18a058;--blue:#3574d4;--purple:#7c4dcc;--orange:#c87a20;--overlay:rgba(0,0,0,.45);--radius:14px;--danger:#d43030}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body.admin-page{background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:3px}
button{font-family:inherit;cursor:pointer}input,textarea,select{font-family:inherit}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:1200px}}
.fade-in{animation:fadeIn .35s ease both}
.slide-down{animation:slideDown .4s cubic-bezier(.16,1,.3,1) both;overflow:hidden}body.admin-page .topbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.08);height:56px;transition:transform .3s ease}body.admin-page .topbar.hidden{transform:translateY(-100%)}body.admin-page .topbar-inner{margin:0 auto;padding:0 4px;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}body.admin-page .topbar-left{display:flex;align-items:center}body.admin-page .topbar-logo{display:flex;align-items:center;gap:6px;cursor:pointer;justify-self:center}body.admin-page .topbar-logo img.logo-icon{width:34px;height:34px;object-fit:contain}body.admin-page .topbar-logo img.logo-text{height:20px;object-fit:contain}body.admin-page .topbar-actions{display:flex;align-items:center;gap:2px;justify-self:end}body.admin-page .topbar .btn-icon{background:none;border:none;padding:8px;border-radius:10px;display:flex;align-items:center;transition:background .15s}body.admin-page .topbar .btn-icon svg{stroke:#555}body.admin-page .topbar .btn-icon:hover{background:rgba(0,0,0,.06)}body.admin-page .btn-back-circle{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;opacity:.7;transition:opacity .2s}body.admin-page .btn-back-circle:hover{opacity:1}

.form-section{}
.form-section-label{font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px}
.form-input{width:100%;background:var(--surface);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:15px;outline:none;transition:border-color .2s}
.form-input:focus{border-color:var(--accent)}
.form-input::placeholder{color:var(--text-dim)}
textarea.form-input{resize:vertical;min-height:50px;line-height:1.6}
.char-count{text-align:right;font-size:11px;color:var(--text-dim);margin-top:-4px;font-family:'JetBrains Mono',monospace}
.char-count.warn{color:var(--orange)}.char-count.over{color:var(--danger)}

/* Gallery item: video overlay */
.gallery-item .video-badge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.6);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px}
.field-group{margin-bottom:16px}
.field-label{font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.field-label .required{color:var(--accent);font-size:11px}
.field-hint{font-size:11px;color:var(--text-dim);margin-top:4px;line-height:1.4}

.file-upload{border:2px dashed var(--card-border);border-radius:12px;padding:24px;text-align:center;transition:all .2s;cursor:pointer;background:var(--surface)}
.file-upload:hover{border-color:var(--text-dim);background:var(--surface-hover)}
.file-upload.dragover{border-color:var(--accent);background:var(--accent-soft)}
.file-upload-text{font-size:14px;color:var(--text-mid)}
.file-upload-text span{color:var(--accent);font-weight:600}
.file-upload-hint{font-size:12px;color:var(--text-dim);margin-top:4px}
.file-upload input[type="file"]{display:none}

.progress-bar{width:100%;height:6px;background:#ddd;border-radius:3px;margin-top:10px;display:none;overflow:hidden}
.progress-bar .progress-fill{height:100%;background:var(--green);border-radius:3px;width:0%;transition:width .3s}
.progress-status{text-align:center;font-size:12px;color:var(--text-dim);margin-top:4px}

.progress-fill.indeterminate{width:30%!important;animation:indeterminate 1.2s ease-in-out infinite}
@keyframes indeterminate{0%{margin-left:0;width:30%}50%{margin-left:35%;width:40%}100%{margin-left:100%;width:30%}}

.preview-thumb{position:relative;border-radius:10px;overflow:hidden;margin-top:8px;background:#000}
.preview-thumb img,.preview-thumb video{width:100%;max-height:200px;object-fit:contain;display:block}
.preview-thumb .remove-thumb{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:background .2s}
.preview-thumb .remove-thumb:hover{background:rgba(0,0,0,.8)}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:8px}
.gallery-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface);cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.gallery-item.dragging{opacity:.4}
.gallery-item.drag-ghost{position:fixed;z-index:1000;pointer-events:none;opacity:.85;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:scale(1.05)}
.gallery-item.drop-target{box-shadow:inset 0 0 0 2px var(--accent);border-radius:8px}
.gallery-item img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.gallery-item .remove-thumb{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px}
.gallery-item .item-num{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px}

.tag-input-wrap{display:flex;gap:8px;align-items:center}
.tag-input-wrap .form-input{flex:1}
.tag-input-wrap button{background:var(--surface);border:1px solid var(--card-border);color:var(--text-mid);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;white-space:nowrap;transition:all .2s}
.tag-input-wrap button:hover{border-color:var(--text-dim);color:var(--text)}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag-item{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--card-border);border-radius:8px;padding:4px 10px;font-size:13px;color:var(--text-mid)}
.tag-item button{background:none;border:none;color:var(--text-dim);font-size:14px;padding:0 2px}
.tag-item button:hover{color:var(--accent)}


#statusBar{max-width:600px;margin:0 auto 0 auto;font-size:12px;min-height:30px;}
.bottom-bar{max-width:600px;margin:0 auto;padding:0 16px 40px;text-align:center;}


/* ═══════════════════════════════════════════════════════════════
   POST BODY CONTENT — served by the editor's whitelist HTML.
   Two contexts, one look:
     .blog-post       = the editor surface in editPost.html
     .card-body-text  = rendered posts in the feed (index.ajax.html)
   Geometry (max-width/margins) applies ONLY to .blog-post; inside a
   feed card the card owns the geometry.
   ═══════════════════════════════════════════════════════════════ */

/* editor-surface geometry only */
.blog-post { max-width: 700px; margin: 0 auto; padding: 0 16px; }

/* shared typography — color comes from the page theme:
   .blog-post follows the editor vars, .card-body-text keeps index.css's var(--text-mid) */
.blog-post, .card-body-text {
  font: 18px/1.1 Arial, Verdana, sans-serif; }
.blog-post { color: var(--text, #242424); }

/* per-tag look (edit freely) */
.blog-post a, .card-body-text a { color: var(--accent, #1a8917); }
.blog-post hr, .card-body-text hr { border: 0; border-top: 1px solid var(--card-border, #ddd); margin: 2em 0; clear: both; }
.blog-post ul, .blog-post ol,
.card-body-text ul, .card-body-text ol { margin: 0 0 1em; padding-left: 1.6em; }
.blog-post li, .card-body-text li { margin: .25em 0; }
.blog-post table, .card-body-text table { border-collapse: collapse; width: 100%; margin: 1em 0;
  font-size: 16px; display: block; overflow-x: auto; }   /* scrolls on phones */
.blog-post th, .blog-post td,
.card-body-text th, .card-body-text td { border: 1px solid var(--card-border, #ddd); padding: 8px 12px; text-align: left; }
.blog-post th, .card-body-text th { background: rgba(127,127,127,.18); font-weight: 700; }
.blog-post button, .card-body-text button { background: #1a8917; color: #fff; border: 0;
  border-radius: 20px; padding: 10px 22px; font-size: 15px; cursor: pointer; }

/* REQUIRED: images — responsive base + align + width presets */
.blog-post img, .card-body-text img { max-width: 100%; height: auto; border-radius: 4px; }
.blog-post img.img-left,  .card-body-text img.img-left   { float: left;  margin: .3em 1.2em .8em 0; }
.blog-post img.img-right, .card-body-text img.img-right  { float: right; margin: .3em 0 .8em 1.2em; }
.blog-post img.img-center,.card-body-text img.img-center { display: block; margin: 1em auto; }
.blog-post img.w-100px, .card-body-text img.w-100px { width: 100px; }
.blog-post img.w-200px, .card-body-text img.w-200px { width: 200px; }
.blog-post img.w-300px, .card-body-text img.w-300px { width: 300px; }
.blog-post img.w-25,  .card-body-text img.w-25  { width: 25%; }
.blog-post img.w-50,  .card-body-text img.w-50  { width: 50%; }
.blog-post img.w-100, .card-body-text img.w-100 { width: 100%; }
@media (max-width: 520px) {  /* floated % images stack instead of squeezing text */
  .blog-post img.img-left.w-25,  .blog-post img.img-right.w-25,
  .blog-post img.img-left.w-50,  .blog-post img.img-right.w-50,
  .card-body-text img.img-left.w-25,  .card-body-text img.img-right.w-25,
  .card-body-text img.img-left.w-50,  .card-body-text img.img-right.w-50 {
    float: none; display: block; width: 100%; margin: 1em 0; }
}

/* REQUIRED: text sizes */
.blog-post .t-small, .card-body-text .t-small { font-size: 14px; }
.blog-post .t-large, .card-body-text .t-large { font-size: 26px; }

/* REQUIRED: text colors — hexes must match editPost.html + xSanitizeHtml.inc */
.blog-post .c-red,    .card-body-text .c-red    { color: #d93025; }
.blog-post .c-blue,   .card-body-text .c-blue   { color: #1a73e8; }
.blog-post .c-green,  .card-body-text .c-green  { color: #188038; }
.blog-post .c-orange, .card-body-text .c-orange { color: #e8710a; }
.blog-post .c-gray,   .card-body-text .c-gray   { color: #757575; }

/* REQUIRED: pdf chip */
.blog-post a.file-pdf, .card-body-text a.file-pdf { display: inline-block;
  background: var(--surface, #f6f6f6);
  border: 1px solid var(--card-border, #ddd); border-radius: 8px; padding: 8px 14px; margin: 2px 0;
  text-decoration: none; color: var(--text, #242424); font-size: 16px; }
.blog-post a.file-pdf::before, .card-body-text a.file-pdf::before { content: "\1F4C4  "; }
.blog-post a.file-pdf:hover, .card-body-text a.file-pdf:hover { background: var(--surface-hover, #ececec); }