/* news.css — styles for pages/news.php & pages/news_submit.php
   Matches downloads_actions.css look & feel (neon borders, dark cards).
   Safe fallbacks if downloads tokens aren’t loaded.
====================================================================== */

/* ---- local aliases to the downloads tokens (with fallbacks) ---- */
:root{
  --news-ink:    var(--da-ink,    var(--ink, #e8eef7));
  --news-muted:  var(--da-muted,  #9fb0c5);
  --news-line:   var(--da-line,   rgba(120,150,185,.22));
  --news-surf:   var(--da-surface,rgba(10,16,24,.72));
  --news-card:   var(--da-card,   rgba(9,14,22,.9));
  --news-accent: var(--da-accent, #00e5ff);
  --news-danger: var(--da-danger, #ff6b6b);
  --wrap:        var(--wrap, 980px);

  /* consistent chip/button heights used below */
  --news-chip-h: 34px;
}

/* ==================================================================
   SINGLE POST (pages/news.php)
================================================================== */
.news-article{ max-width:var(--wrap); margin:0 auto; padding:12px; }
.news-article h2{ margin:0 0 6px; font-size:28px; letter-spacing:.02em; color: var(--news-ink); }
.news-subtitle{ margin:.4rem 0 .2rem; color:var(--news-muted); }
.news-meta{ margin:.25rem 0 1rem; color:var(--news-muted); }
.news-meta strong{ color:#7bd0ff; }

.news-banner{
  margin:10px 0 14px; padding:8px;
  border:1px solid var(--news-line); border-radius:10px;
  background:var(--news-surf); overflow:hidden;
}
.news-banner img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover; background:#000;
}

/* Markdown/content defaults */
.news-article :where(img,video){ max-width:100%; height:auto; display:block; }
.news-article :where(p,li,a,small,code,pre){ overflow-wrap:anywhere; }
.news-article :where(pre,code){
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.news-article pre{
  overflow:auto; padding:10px 12px;
  border:1px solid var(--news-line); border-radius:8px;
  background:var(--news-surf); line-height:1.35; color: var(--news-ink);
}
.news-article code{
  padding:0 .25rem; border:1px solid var(--news-line);
  border-radius:4px; background:var(--news-surf); color: var(--news-ink);
}
.news-article blockquote{
  margin:.6rem 0; padding:.6rem .8rem;
  border-left:4px solid #7bd0ff;
  background:color-mix(in srgb, #7bd0ff 10%, transparent);
  border-radius:6px;
}
.news-article table{
  width:100%; border-collapse:collapse;
  display:block; overflow-x:auto;
}
.news-article table th,
.news-article table td{
  border:1px solid var(--news-line);
  padding:6px 8px; vertical-align:top; text-align:left;
}

/* ===== Post reactions row (above actions) ===== */
.news-reacts-row{
  margin-top:8px;
  /* Reserve space even before counts arrive to avoid CLS */
  min-height: calc(var(--news-chip-h) + 4px);
}
.news-reacts-row .c-reacts{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; position:relative;
}
.news-reacts-row .rx-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:var(--news-chip-h); padding:0 10px; line-height:1;
  border-radius:12px;
  border:1px solid var(--news-line);
  background: var(--news-surf);
  color: var(--news-ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.news-reacts-row .rx-btn:hover{
  border-color: color-mix(in srgb, var(--news-accent) 60%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 16%, transparent);
}
.news-reacts-row .rx-btn[aria-pressed="true"]{
  border-color: color-mix(in srgb, var(--news-accent) 95%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 22%, transparent);
}
.news-reacts-row .rx-emoji{ font-size:16px; }
.news-reacts-row .rx-count{ font-size:13px; }

.news-reacts-row .icon-btn{
  display:inline-grid; place-items:center;
  width:var(--news-chip-h); height:var(--news-chip-h);
  border-radius:12px;
  border:1px solid var(--news-line);
  background: var(--news-surf);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.news-reacts-row .icon-btn:hover{
  border-color: color-mix(in srgb, var(--news-accent) 60%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 16%, transparent);
}

/* push the add-reaction button to the far right */
.news-reacts-row .rx-spacer{ flex:1 1 auto; }

/* palette under the add button */
.news-reacts-row .rx-palette{
  position:absolute; right:0; top:calc(100% + 8px);
  display:flex; gap:6px; flex-wrap:wrap;
  padding:6px;
  border:1px solid var(--news-line);
  border-radius:10px;
  background: var(--news-card);
  z-index:5;
}
.news-reacts-row .rx-palette .rx-pick{
  height:30px; padding:0 8px; line-height:1;
  border-radius:10px; border:1px solid var(--news-line);
  background: var(--news-surf); color:var(--news-ink);
}

/* hover tooltip for reactors (shared with comments) */
.rx-tip{
  position:fixed; z-index:9999; pointer-events:none;
  opacity:0; transform:translateY(-2px);
  transition:opacity .12s ease, transform .12s ease;
  padding:8px 10px; border:1px solid var(--news-line);
  border-radius:10px; background:var(--news-card); color:var(--news-ink);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  font-size:13px;
}
.rx-tip.show{ opacity:1; transform:none; }
.rx-tip-emoji{ margin-right:6px; font-size:18px; display:inline-block; }

/* ===== Admin actions row (normalize sizes) ===== */
.news-actions{
  margin-top:10px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.news-actions .btn,
.news-actions button,
.news-actions a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--news-chip-h); padding:0 14px;
  border-radius:12px; line-height:1; text-decoration:none;
  border:1px solid var(--news-line);
  background: var(--news-surf);
  color:#cfefff; cursor:pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.news-actions .btn:hover,
.news-actions button:hover,
.news-actions a.btn:hover{
  border-color: color-mix(in srgb, var(--news-accent) 60%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 16%, transparent);
}
.news-actions .btn:active,
.news-actions button:active,
.news-actions a.btn:active{ transform: translateY(1px); }

.news-actions .btn-danger{
  border-color: color-mix(in srgb, var(--news-danger) 70%, var(--news-line));
  background: color-mix(in srgb, var(--news-danger) 12%, var(--news-surf));
  color:#ffd1d1;
}
.news-actions .btn-danger:hover{
  border-color: color-mix(in srgb, var(--news-danger) 95%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-danger) 18%, transparent);
}

.news-card small strong,
.news-article .news-meta strong{ color:#7bd0ff; }
.news-card em,
.news-article .news-meta em{ color:#c8a96a; }

/* ==================================================================
   LIST VIEW (cards)
================================================================== */
.news-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px; grid-template-columns:1fr;
}
.news-card{
  padding:10px 12px; border:1px solid var(--news-line);
  background:var(--news-surf); border-radius:10px; color: var(--news-ink);
}
.news-card h3{ margin:0 0 4px; line-height:1.25; }
.news-card .news-summary{ margin:.25rem 0 .35rem; }
.news-card .news-meta{ margin-top:6px; color: var(--news-muted); }

/* ==================================================================
   SUBMIT/EDIT FORM (pages/news_submit.php) — match downloads styles
================================================================== */
.news-form{
  max-width: 980px; padding:12px; margin:0;
  display:grid; gap:14px;
  border:1px solid var(--news-line);
  border-radius:14px;
  background: var(--news-card);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  color: var(--news-ink);
}
.news-form .form-row{ margin:0; }
.news-form label{
  color:#cfe1ff; font-weight:600; letter-spacing:.02em; display:block;
}
.news-form small.note{ color: var(--news-muted); }

/* Inputs */
.news-form :where(input[type="text"], input[type="date"], input[type="time"], input[type="url"], input[type="number"], select, textarea){
  width:100%; max-width:100%; margin-top:6px;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--news-line);
  background: var(--news-surf); color: var(--news-ink);
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
  box-sizing:border-box;
}
.news-form textarea{ min-height:220px; }

/* Focus */
.news-form :where(input,select,textarea):focus{
  border-color: color-mix(in srgb, var(--news-accent) 55%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 22%, transparent);
}

/* File input */
.news-form input[type="file"]{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  border-radius:12px; border:1px dashed var(--news-line);
  background: color-mix(in srgb, var(--news-surf) 85%, #0a1018);
  color: var(--news-muted);
  accent-color: var(--news-accent);
}

/* Fieldsets */
.news-form fieldset{
  margin:6px 0 0; padding:12px;
  border:1px solid var(--news-line);
  border-radius:12px;
  background: color-mix(in srgb, var(--news-card) 86%, #0a1018);
}
.news-form legend{
  padding:0 6px; color:#9bd3ff; font-weight:700; letter-spacing:.02em;
}

/* Radios/checkboxes */
.news-form input[type="radio"],
.news-form input[type="checkbox"]{ accent-color: var(--news-accent); }

/* Buttons row (submit + cancel) */
.news-form .btn,
.news-form button,
.news-form input[type="submit"],
.news-form input[type="button"]{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--news-accent) 70%, var(--news-line));
  background: color-mix(in srgb, var(--news-accent) 10%, var(--news-surf));
  color:#cfefff; cursor:pointer;
  transition: transform .12s ease, border-color .15s, box-shadow .15s, filter .12s;
}
.news-form .btn:hover,
.news-form button:hover{
  border-color: color-mix(in srgb, var(--news-accent) 95%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 18%, transparent);
}
.news-form .btn-danger,
.news-form button.btn-danger{
  border-color: color-mix(in srgb, var(--news-danger) 70%, var(--news-line));
  background: color-mix(in srgb, var(--news-danger) 12%, var(--news-surf));
  color:#ffd1d1;
}
.news-form .btn-danger:hover{
  border-color: color-mix(in srgb, var(--news-danger) 95%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-danger) 18%, transparent);
}
.news-form a.btn{
  text-decoration:none;
  border:1px solid var(--news-line);
  background: var(--news-surf);
  color:#7bd0ff;
}
.news-form a.btn:hover{
  border-color: color-mix(in srgb, var(--news-accent) 45%, var(--news-line));
}

/* Publish options box */
#scheduleBox{
  border:1px dashed var(--news-line) !important;
  border-radius:10px !important;
  background:color-mix(in srgb, #7bd0ff 6%, transparent);
}
#scheduleBox input, #scheduleBox select{ margin-top:4px; }
#tzNote{ color:var(--news-muted); }

/* ==================================================================
   MARKDOWN TOOLBARS
   - News form toolbar: downloads-style neon, flexible width (shows “• List”/“1. List”).
   - Comment mini-toolbar: compact square buttons with glyphs (no overflow).
================================================================== */

/* News page toolbar (includes/md_toolbar.php) */
.md-toolbar{
  display:flex; gap:8px; align-items:center;
  margin:8px 0 4px;
}
.md-toolbar button{
  display:inline-grid; place-items:center;
  height:32px; min-width:32px; padding:0 10px; /* room for “• List”, “1. List” */
  border-radius:10px;
  border: 1px solid color-mix(in srgb, var(--news-accent) 70%, var(--news-line));
  background: color-mix(in srgb, var(--news-accent) 10%, var(--news-surf));
  color:#cfefff; cursor:pointer; font:inherit; line-height:1;
  transition: transform .12s ease, border-color .15s, box-shadow .15s, background .15s;
  white-space:nowrap;
}
.md-toolbar button:hover{
  border-color: color-mix(in srgb, var(--news-accent) 95%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 18%, transparent);
}
.md-toolbar button:active{ transform: translateY(1px); }
.md-toolbar button strong,
.md-toolbar button em{ color:inherit; }

/* Optional: make codeblock button text a tad tighter */
.md-toolbar button[data-md="codeblock"]{ letter-spacing:-.5px; }

/* Comment mini-toolbar (created in comment_section.js) */
.comment-section [role="toolbar"]{
  margin:.25rem 0;
  display:inline-flex; gap:6px;
}
.comment-section [role="toolbar"] button{
  display:inline-grid; place-items:center;
  width:28px; height:28px; padding:0;
  border-radius:8px;
  border: 1px solid color-mix(in srgb, var(--news-accent) 70%, var(--news-line));
  background: color-mix(in srgb, var(--news-accent) 8%, var(--news-surf));
  color:#e6eef3; cursor:pointer; font:inherit; line-height:1;
}
.comment-section [role="toolbar"] button:hover{
  border-color: color-mix(in srgb, var(--news-accent) 95%, var(--news-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent) 14%, transparent);
}

/* Prevent overflow in the tiny comment toolbar by using glyphs */
.comment-section [role="toolbar"] button[data-md="ul"],
.comment-section [role="toolbar"] button[data-md="ol"]{
  font-size:0;
}
.comment-section [role="toolbar"] button[data-md="ul"]::before{ content:"•"; font-size:16px; }
.comment-section [role="toolbar"] button[data-md="ol"]::before{ content:"1."; font-size:14px; }

/* ==================================================================
   RESPONSIVE
================================================================== */
@media (max-width:780px){
  .news-article{ padding:10px; }
  .news-article h2{ font-size:24px; }
  .news-banner{ padding:6px; border-radius:8px; }
  .news-card{ padding:10px; }
  .md-toolbar{ flex-wrap:wrap; }
}