/* ══════════════════════════════════════════════════════════════════════════
   pulse-news-article.css — utseendet för nyhetsartikeln (app/Views/news/single.php).
   Skapad 2026-08-29 som prov på uppdelningen: VYN äger struktur, TEMAT äger stil.

   Vyn ligger i app/Views/ och innehåller ingen CSS och inget skal. Byter man
   tema behöver bara den här filen ersättas — markupen är oförändrad.

   Typografin följer designbibelns mall "Guide / artikellista": artikelrubriker
   i Roboto, INTE Condensed. Kondenserat är kroms (etiketter, metarader),
   normalt är innehåll.
   ══════════════════════════════════════════════════════════════════════════ */

.center .nwa-back{display:inline-flex;align-items:center;gap:6px;color:var(--dim);
  text-decoration:none;font:700 11px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:16px}
.center .nwa-back:hover{color:var(--accent-ink)}

.nwa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px 24px;max-width:720px}

.nwa-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font:700 10px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase;color:var(--faint)}
.nwa-meta b{color:var(--dim);font-weight:700}

/* Utkast RAMAS IN, fylls aldrig — designbibelns regel 10. */
.nwa-draft{display:inline-flex;align-items:center;gap:5px;color:var(--gold-r);
  border:1px solid color-mix(in srgb,var(--gold-r) 40%,var(--line));
  border-radius:var(--r-sm);padding:2px 7px;
  font:800 9px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase}

/* Roboto, inte Condensed — designbibeln §8. */
.nwa h1{font:800 25px/1.22 'Roboto',system-ui,sans-serif;letter-spacing:-.01em;
  color:var(--ink);margin:9px 0 0}
.nwa-ingress{font:400 15px/1.55 'Roboto',system-ui,sans-serif;color:var(--ink2);margin-top:9px}

/* Vågrät avdelare. Aldrig en lodrät färgad linje. */
.nwa-body{font:400 15px/1.75 'Roboto',system-ui,sans-serif;color:var(--ink2);
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.nwa-body a{color:var(--accent-ink)}

.nwa-edit{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);
  text-decoration:none;font:700 12px/1 'Roboto',system-ui,sans-serif;margin-top:20px}
.nwa-edit:hover{text-decoration:underline}

.nwa-tom{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 22px;text-align:center;color:var(--dim);font-size:13.5px;max-width:720px}
.nwa-tom a{color:var(--accent-ink)}

@media(max-width:640px){ .nwa{padding:16px 15px 20px} .nwa h1{font-size:21px} }

/* ══ NYHETS-EDITORN (app/Views/news/editor.php) ═══════════════════════════
   Samma uppdelning: vyn äger fälten och ordningen, temat äger utseendet.
   Kontroller får 3px radie, innehåll 6px — designbibelns regel 5, översatt
   till pulse (som har 6px där förlagan har 0). */
.nwe{max-width:720px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px 22px}
.nwe h1{font:800 20px/1.2 'Roboto',system-ui,sans-serif;color:var(--ink);margin:0 0 18px}

.nwe-falt{margin-bottom:15px}
.nwe-falt label{display:block;margin-bottom:6px;color:var(--dim);
  font:700 10px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase}
.nwe-falt label span{color:var(--faint);font-weight:700}
.nwe-falt input,.nwe-falt textarea{width:100%;box-sizing:border-box;
  background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);font:400 14px/1.5 'Roboto',system-ui,sans-serif;padding:10px 12px}
.nwe-falt input::placeholder,.nwe-falt textarea::placeholder{color:var(--faint)}
.nwe-falt input:focus,.nwe-falt textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.nwe-falt textarea{min-height:280px;resize:vertical;line-height:1.7}
.nwe-hint{margin:5px 0 0;color:var(--faint);font-size:11px}

/* Vågrät avdelare över knappraden. Aldrig en lodrät linje. */
.nwe-akt{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:15px;margin-top:18px}
.nwe-btn{border:1px solid var(--line);background:transparent;color:var(--ink2);
  border-radius:var(--r-sm);cursor:pointer;padding:9px 15px;
  font:700 11px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.8px;text-transform:uppercase}
.nwe-btn:hover{border-color:var(--line2);color:var(--ink)}
/* En accent, och den bär den primära handlingen — designbibelns regel 1. */
.nwe-btn-primar{background:var(--accent);border-color:var(--accent);color:#fff}
.nwe-btn-primar:hover{filter:brightness(1.07)}
.nwe-avbryt{margin-left:auto;color:var(--faint);text-decoration:none;font-size:12px}
.nwe-avbryt:hover{color:var(--ink2)}
@media(max-width:640px){ .nwe{padding:16px 15px 18px} .nwe-avbryt{margin-left:0} }