/* ============================================================================
   THE GAME GAZETTE - stylesheet. Public broadsheet (.paper) + press room (.cms).
   Theme colors (--primary, --accent) are injected per-request from SETTINGS.
   ============================================================================ */

:root {
  --primary: #0a0e1a;          /* deep-space ink - overridden inline from settings */
  --accent: #3ea6ff;           /* electric-blue glow - overridden inline           */
  --space: #05070e;            /* base black-blue for the public paper             */
  --paper: #0c1426;            /* dark glass panel                                 */
  --paper-edge: #ece5d3;       /* (kept light for the editor's white canvas page)  */
  --ink: #dbe7fb;              /* light text on the void                           */
  --ink-soft: #8aa0c4;
  --rule: rgba(150,185,255,.30);
  --head-fill: #eef4ff;         /* headline / wordmark fill - dark ink in day mode */
  --emblem: #eaf2ff;            /* compass-star colour - recoloured per edition     */
  /* category accents (night; day variants darkened below for white) */
  --cat-news:   #3ea6ff;
  --cat-update: #ffb038;
  --cat-event:  #37d67a;
  --cat-guide:  #b98cff;
  --cat-patch:  #39e0d0;
  /* motion tokens */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.15);
  --dur-fast: .15s;
  --dur-med: .26s;
  --display: "Saira Condensed", "Oswald", Impact, sans-serif; /* chrome italic titles */
  --head: "Chakra Petch", "Saira Condensed", sans-serif;      /* panel headers        */
  --serif-display: "Playfair Display", Georgia, serif;        /* admin headings        */
  --serif-body: "Old Standard TT", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* ============================================================================
   1. PUBLIC PAPER - "Sol's RNG" cosmic HUD: void, glow, glass panels.
   ============================================================================ */
/* shared cosmic void backdrop - public paper and press room */
body.paper, body.cms {
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.5;
  /* nebula bloom over the void + faint star/grain field */
  background-color: var(--space);
  background-image:
    radial-gradient(1200px 800px at 72% -10%, rgba(50,100,220,.26), transparent 62%),
    radial-gradient(1000px 700px at 6% 10%, rgba(24,46,130,.22), transparent 60%),
    radial-gradient(1300px 1000px at 50% 120%, rgba(60,120,255,.12), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }

/* faint twinkling starfield (tiled SVG) */
body.paper::before, body.cms::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cg fill='%23cfe0ff'%3E%3Ccircle cx='60' cy='80' r='1' opacity='.7'/%3E%3Ccircle cx='160' cy='40' r='1.3' opacity='.5'/%3E%3Ccircle cx='240' cy='150' r='.8' opacity='.8'/%3E%3Ccircle cx='340' cy='60' r='1.1' opacity='.55'/%3E%3Ccircle cx='430' cy='180' r='1.3' opacity='.45'/%3E%3Ccircle cx='520' cy='90' r='.9' opacity='.7'/%3E%3Ccircle cx='620' cy='40' r='1' opacity='.6'/%3E%3Ccircle cx='710' cy='170' r='1.4' opacity='.5'/%3E%3Ccircle cx='770' cy='70' r='.8' opacity='.75'/%3E%3Ccircle cx='90' cy='270' r='1.1' opacity='.55'/%3E%3Ccircle cx='210' cy='340' r='1.3' opacity='.45'/%3E%3Ccircle cx='300' cy='250' r='.9' opacity='.7'/%3E%3Ccircle cx='410' cy='370' r='1.1' opacity='.5'/%3E%3Ccircle cx='510' cy='280' r='1.4' opacity='.4'/%3E%3Ccircle cx='610' cy='360' r='.8' opacity='.7'/%3E%3Ccircle cx='710' cy='300' r='1.2' opacity='.5'/%3E%3Ccircle cx='120' cy='480' r='1' opacity='.6'/%3E%3Ccircle cx='260' cy='540' r='1.3' opacity='.45'/%3E%3Ccircle cx='360' cy='460' r='.9' opacity='.65'/%3E%3Ccircle cx='470' cy='560' r='1.1' opacity='.5'/%3E%3Ccircle cx='560' cy='480' r='1.4' opacity='.42'/%3E%3Ccircle cx='670' cy='560' r='.8' opacity='.7'/%3E%3Ccircle cx='750' cy='480' r='1' opacity='.6'/%3E%3Ccircle cx='90' cy='660' r='1.2' opacity='.5'/%3E%3Ccircle cx='230' cy='720' r='.9' opacity='.6'/%3E%3Ccircle cx='350' cy='670' r='1.1' opacity='.5'/%3E%3Ccircle cx='470' cy='730' r='1.4' opacity='.42'/%3E%3Ccircle cx='590' cy='670' r='.8' opacity='.68'/%3E%3Ccircle cx='700' cy='730' r='1.1' opacity='.5'/%3E%3Ccircle cx='760' cy='660' r='1' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .5; animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .32; } to { opacity: .6; } }

/* staggered rise + fade on page load */
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.masthead .dateline { animation: riseIn .7s ease both; }
.mast-main { animation: riseIn .8s .08s ease both; }
.masthead .rule-double { animation: riseIn .8s .2s ease both; }
/* cards deal in one after another, not the grid as one block */
.frontpage .story { animation: riseIn .55s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * .07s); }
@media (prefers-reduced-motion: reduce) {
  body.paper::before, body.cms::before, .masthead .dateline, .mast-main, .masthead .rule-double, .frontpage .story { animation: none; }
}

/* HUD corner brackets framing the viewport */
.cosmic-frame { position: fixed; inset: 14px; pointer-events: none; z-index: 60; }
.cosmic-frame i { position: absolute; width: 44px; height: 44px; border: 2px solid rgba(205,225,255,.92); filter: drop-shadow(0 0 5px var(--accent)); }
.cosmic-frame i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.cosmic-frame i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.cosmic-frame i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.cosmic-frame i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }

/* --- Masthead --- */
.masthead { padding: 36px 0 8px; text-align: center; }
.masthead .dateline {
  font-family: var(--head); font-weight: 600;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 20px;
}
.masthead .dateline span:last-child { color: #fff; text-shadow: 0 0 12px rgba(62,166,255,.7); }
.mast-main { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 0 12px; }
/* emblem stays upright; only the wordmark is angled */
.sun-emblem { width: 92px; height: 92px; flex-shrink: 0; color: var(--emblem); filter: drop-shadow(0 0 13px rgba(62,166,255,.6)); }
.masthead h1 {
  font-family: "Zilla Slab", Georgia, serif; font-weight: 700; font-style: italic;
  font-size: clamp(34px, 7.5vw, 90px); line-height: .9; letter-spacing: -.01em; margin: 0;
  color: var(--head-fill);                       /* solid white fill */
  -webkit-text-stroke: 1.2px #0c1730;   /* dark navy outline */
  paint-order: stroke fill;             /* outline behind fill */
  text-shadow:
    1px 1px 0 #18263f, 2px 2px 0 #131d33, 3px 3px 0 #0e1726,   /* 3D extrude */
    5px 7px 12px rgba(0,0,0,.5),                                /* cast shadow */
    0 0 34px rgba(80,160,255,.32);                             /* blue bloom */
}
.masthead .tagline { font-family: var(--head); font-weight: 500; font-size: 12.5px; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .34em; margin-top: 2px; }
.masthead img.logo { max-height: 70px; margin-bottom: 4px; filter: drop-shadow(0 0 10px rgba(62,166,255,.5)); }

/* glowing energy rule */
.rule-double { height: 2px; border: 0; margin: 20px 0 8px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 16px rgba(62,166,255,.7); }
.rule-double.thin { opacity: .7; box-shadow: 0 0 8px rgba(62,166,255,.5); }

/* --- Front-page: glass panels in a responsive grid --- */
.frontpage { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; margin: 28px 0 56px; }

/* each card / article head carries its category's accent as --cat */
.story, .article-head { --cat: var(--accent); }
.story[data-cat="News"],        .article-head[data-cat="News"]        { --cat: var(--cat-news); }
.story[data-cat="Update"],      .article-head[data-cat="Update"]      { --cat: var(--cat-update); }
.story[data-cat="Event"],       .article-head[data-cat="Event"]       { --cat: var(--cat-event); }
.story[data-cat="Guide"],       .article-head[data-cat="Guide"]       { --cat: var(--cat-guide); }
.story[data-cat="Patch Notes"], .article-head[data-cat="Patch Notes"] { --cat: var(--cat-patch); }

.story {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  padding: 20px 22px 22px;
  background: linear-gradient(180deg, rgba(15,26,52,.74), rgba(7,12,28,.66));
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 34px rgba(40,90,200,.10), 0 18px 44px -22px #000;
  backdrop-filter: blur(3px);
  /* notched corners - top-left + bottom-right cut */
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.story:hover {
  transform: translateY(-3px); border-color: var(--cat);
  box-shadow: inset 0 0 38px rgba(60,120,255,.20), 0 0 0 1px var(--cat), 0 24px 60px -20px rgba(20,60,160,.55);
}
.story:focus-visible { outline: 2px solid var(--cat); outline-offset: 3px; }
.story .kicker {
  position: relative;
  font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cat);
  text-shadow: 0 0 12px color-mix(in srgb, var(--cat) 55%, transparent);
  display: inline-block; border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 10px;
}
/* category colour wipes in under the tag on hover/focus */
.story .kicker::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--cat); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.story:hover .kicker::after, .story:focus-visible .kicker::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .story .kicker::after { transition: none; } }
.story h2 {
  font-family: var(--head); font-weight: 700; font-size: 21px; line-height: 1.14;
  margin: 0 0 10px; color: var(--head-fill);
}
.story .byline { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .04em; }
.story .thumb {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-top: 14px;
  border: 1px solid var(--rule); filter: saturate(1.12) contrast(1.05);
  box-shadow: 0 0 30px rgba(40,90,200,.30);
}
.story .excerpt { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }

/* lead story spans the row, centered banner */
.story.lead { grid-column: 1 / -1; text-align: center; padding: 30px 30px 32px; }
.story.lead .kicker { border-bottom: 0; }
.story.lead h2 {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(28px, 5vw, 48px); color: var(--head-fill); text-shadow: 0 0 26px rgba(62,166,255,.4);
}
.story.lead .thumb { aspect-ratio: 21/7; }

/* empty state: centered glowing hero spanning the grid */
.empty-front {
  grid-column: 1 / -1; min-height: 44vh;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  text-align: center; padding: 50px 0;
}
.empty-front .sun-emblem { transform: none; width: 62px; height: 62px; margin: 0; animation: pulseGlow 3.4s ease-in-out infinite; }
.empty-front h2 {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(24px, 4vw, 40px); color: #e6eeff; margin: 0; letter-spacing: -.01em;
  text-shadow: 0 0 26px rgba(62,166,255,.35);
}
.empty-front p { font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 9px rgba(62,166,255,.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 22px rgba(62,166,255,.9)); transform: scale(1.06); }
}

/* --- Article detail (canvas rendered read-only) --- */
.article-head { text-align: center; max-width: 820px; margin: 30px auto 8px; }
.article-head .kicker { font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--cat); text-shadow: 0 0 12px color-mix(in srgb, var(--cat) 55%, transparent); }
[data-theme="light"] .article-head .kicker { text-shadow: none; }
.article-head h1 {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(32px, 5.5vw, 64px); line-height: .96; margin: 12px 0;
  background: linear-gradient(180deg, #ffffff 0%, #d7e6ff 56%, #a6c7f5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 12px rgba(10,40,120,.5)) drop-shadow(0 0 22px rgba(62,166,255,.3));
}
.article-head .byline { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); letter-spacing: .06em; }

/* Composed canvas: 800px page that scales down on small screens. */
.canvas-stage { display: flex; justify-content: center; padding: 30px 0 80px; }
.canvas-page {
  position: relative; width: 800px;
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 1px rgba(80,140,255,.16), 0 30px 80px -30px rgba(20,60,160,.6);
  transform-origin: top center;
}

/* ============================================================================
   SHARED - canvas element rendering (editor + public detail)
   ============================================================================ */
.el { position: absolute; transform-origin: center center; }
.el-text { overflow: hidden; }
.el-text [contenteditable] { outline: none; }
.el-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-divider { width: 100%; }
.el-shape { width: 100%; height: 100%; }

/* ============================================================================
   2. PRESS ROOM (admin CMS)
   ============================================================================ */
body.cms {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  margin: 0;
}
.cms a { color: var(--accent); }

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px; height: 56px;
  background: linear-gradient(180deg, rgba(12,20,38,.92), rgba(6,10,22,.86));
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(120,170,255,.12), 0 10px 30px -20px #000;
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 22px; letter-spacing: .01em; color: var(--head-fill); text-shadow: 0 0 18px rgba(62,166,255,.4); }
.topbar .brand small { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .2em; color: var(--ink-soft); text-shadow: none; display:block; margin-top:-2px;}
.topbar nav { display: flex; gap: 4px; margin-left: 8px; }
.topbar nav a {
  color: var(--ink-soft); text-decoration: none; padding: 8px 12px; border-radius: 6px;
  font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
}
.topbar nav a:hover, .topbar nav a.active { background: rgba(120,170,255,.14); color: #fff; text-shadow: 0 0 12px rgba(62,166,255,.6); }
.topbar .spacer { flex: 1; }
.topbar .who { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

.shell { max-width: 1040px; margin: 0 auto; padding: 34px 22px 80px; position: relative; z-index: 1; }
.page-title { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 34px; margin: 0 0 4px; color: var(--head-fill); text-shadow: 0 0 26px rgba(62,166,255,.3); }
.page-sub { color: var(--ink-soft); margin: 0 0 26px; font-size: 14px; }

.label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px;
  background: rgba(120,160,255,.08); font: inherit; color: var(--head-fill);
}
input::placeholder, textarea::placeholder { color: rgba(138,160,196,.6); }
select option { background: #0c1426; color: var(--head-fill); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); background: rgba(120,160,255,.13); }
.field { margin-bottom: 16px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--rule); border-radius: 8px;
  background: rgba(120,170,255,.12); color: var(--head-fill); font: 600 14px var(--head); letter-spacing: .02em;
  cursor: pointer; text-decoration: none; transition: transform .06s, background .15s, box-shadow .15s, border-color .15s;
}
.btn:hover { background: rgba(120,170,255,.2); border-color: rgba(120,170,255,.6); box-shadow: 0 0 16px rgba(62,166,255,.35); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 700; box-shadow: 0 0 18px rgba(62,166,255,.45); }
.btn.accent:hover { box-shadow: 0 0 26px rgba(62,166,255,.7); }
.btn.danger { background: transparent; color: #ff8a80; border-color: rgba(255,120,110,.5); }
.btn.danger:hover { background: rgba(255,90,80,.14); border-color: rgba(255,120,110,.85); box-shadow: 0 0 16px rgba(255,80,70,.3); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }

.card {
  background: linear-gradient(180deg, rgba(15,26,52,.74), rgba(7,12,28,.62));
  border: 1px solid var(--rule); border-radius: 12px; padding: 22px; margin-bottom: 18px;
  box-shadow: inset 0 0 34px rgba(40,90,200,.08), 0 18px 44px -26px #000; backdrop-filter: blur(3px);
}
.card h3 { margin: 0 0 14px; font-family: var(--display); font-style: italic; font-size: 21px; color: var(--head-fill); }

/* article / template / user lists */
.list { display: grid; gap: 12px; }
.item {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, rgba(15,26,52,.66), rgba(7,12,28,.56));
  border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px;
  box-shadow: inset 0 0 26px rgba(40,90,200,.07); transition: border-color .15s, box-shadow .15s;
}
.item:hover { border-color: rgba(120,170,255,.5); box-shadow: inset 0 0 30px rgba(60,120,255,.14); }
.item .meta { flex: 1; min-width: 0; }
.item .meta b { font-family: var(--head); font-size: 17px; font-weight: 700; color: var(--head-fill); }
.item .meta .sub { color: var(--ink-soft); font-size: 12.5px; font-family: var(--mono); margin-top: 2px; }
.item .actions { display: flex; gap: 8px; flex-shrink: 0; }
.tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; }
.tag.pub { background: rgba(46,200,120,.14); color: #7ff0b0; border-color: rgba(46,200,120,.3); }
.tag.draft { background: rgba(230,180,60,.14); color: #f2d488; border-color: rgba(230,180,60,.3); }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; }
.flash.ok { background: rgba(46,200,120,.12); color: #8af0b8; border-color: rgba(46,200,120,.3); }
.flash.err { background: rgba(255,90,80,.12); color: #ff9d94; border-color: rgba(255,90,80,.3); }

/* --- Login --- */
.login-stage { min-height: 100vh; display: grid; place-items: center;
  background: var(--primary);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.login-card {
  background: linear-gradient(180deg, rgba(15,26,52,.94), rgba(7,12,28,.94));
  border: 1px solid var(--rule); width: 390px; max-width: 92vw; padding: 40px 34px;
  box-shadow: 0 0 60px rgba(40,90,200,.28), 0 30px 70px -30px #000; backdrop-filter: blur(8px);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.login-card .masthead-sm { text-align: center; margin-bottom: 22px; }
.login-card .masthead-sm h1 {
  font-family: var(--display); font-weight: 700; font-style: italic; font-size: 36px; margin: 0;
  background: linear-gradient(176deg, #fff, #cfe0ff 60%, #8fb6f0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(62,166,255,.5));
}
.login-card .masthead-sm small { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.login-card .rule-double { margin: 14px 0 22px; }
.login-card .label { color: var(--ink-soft); }
.login-card input { background: rgba(120,160,255,.08); border-color: var(--rule); color: var(--head-fill); }
.login-card input:focus { background: rgba(120,160,255,.13); }

/* ============================================================================
   3. EDITOR - canvas + chrome
   ============================================================================ */
body.editor { overflow: hidden; height: 100vh; }
/* full viewport minus the top brand bar (56px) and bottom action bar (54px) */
.editor-grid { display: grid; grid-template-columns: 230px 1fr 270px; height: calc(100vh - 110px); position: relative; z-index: 1; }

/* left: tools */
.tools { background: linear-gradient(180deg, rgba(12,20,38,.9), rgba(7,12,28,.86)); border-right: 1px solid var(--rule); padding: 16px; overflow-y: auto; }
.tools h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
.tools h4:first-child { margin-top: 0; }
.tool-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; margin-bottom: 7px; border: 1px solid var(--rule); border-radius: 9px;
  background: rgba(120,170,255,.08); cursor: pointer; font: 500 13.5px var(--sans); color: var(--ink); text-align: left;
}
.tool-btn:hover { border-color: var(--accent); color: #fff; background: rgba(120,170,255,.16); box-shadow: 0 0 14px rgba(62,166,255,.3); }
.tool-btn .ico { font-size: 17px; width: 20px; text-align: center; }

/* center: canvas stage on the void */
.stage { background: var(--space); background-image: radial-gradient(900px 600px at 50% -10%, rgba(50,100,220,.14), transparent 60%); overflow: auto; display: flex; justify-content: center; padding: 36px; }
.stage .canvas-page { cursor: default; }
#canvas .el { cursor: move; }
#canvas .el.selected { outline: 2px solid var(--accent); outline-offset: 0; }
#canvas .el .handle {
  position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px;
  background: var(--accent); border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize;
  display: none;
}
#canvas .el.selected .handle { display: block; }

/* alignment guides shown while dragging */
.guide { position: absolute; z-index: 5; pointer-events: none; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.guide-v { top: 0; bottom: 0; width: 1px; }
.guide-h { left: 0; right: 0; height: 1px; }

/* right: properties */
.props { background: linear-gradient(180deg, rgba(12,20,38,.9), rgba(7,12,28,.86)); border-left: 1px solid var(--rule); padding: 16px; overflow-y: auto; }
.props .label { margin-top: 14px; }
.props .label:first-child { margin-top: 0; }
.props .mini-row { display: flex; gap: 6px; }
.props .mini-row .btn { padding: 7px 0; flex: 1; justify-content: center; }
.btn.toggle.on { background: var(--accent); border-color: var(--accent); color: #06101f; }
.props .hint { color: var(--ink-soft); font-size: 12px; font-style: italic; }
.props input[type=color] { width: 100%; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid var(--rule); background: rgba(120,160,255,.08); }

.editor-actions { display: flex; gap: 8px; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.swatch { width: 24px; height: 24px; border-radius: 5px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; }

@media (max-width: 860px){
  .editor-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .tools, .props { display: flex; flex-wrap: wrap; gap: 8px; max-height: 132px; }
  .tools h4, .props .label { width: 100%; }
}

/* ============================================================================
   4. PAGE TRANSITIONS - native cross-document View Transitions, no library.
   ============================================================================ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) { animation: none !important; }
}

/* ============================================================================
   5. DAY / NIGHT TOGGLE - shows the edition you'll switch TO.
   ============================================================================ */
.theme-toggle {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  background: rgba(120,170,255,.12); color: var(--head-fill); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
/* floating variant: fixed top-right on public pages; admin/editor go inline */
.theme-toggle.floating {
  position: fixed; top: 20px; right: 20px; z-index: 70;
  width: 38px; height: 38px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.theme-toggle:hover { border-color: var(--accent); box-shadow: 0 0 16px rgba(62,166,255,.4); transform: rotate(18deg); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .tt-moon { display: none; }         /* night edition → offer the sun */
[data-theme="light"] .theme-toggle .tt-sun { display: none; }
[data-theme="light"] .theme-toggle .tt-moon { display: block; }
[data-theme="light"] .theme-toggle { background: #fff; }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle:hover { transition: none; transform: none; } }

/* ============================================================================
   6. DAY EDITION - "observatory white". Glow off, crisp ink on a graticule ground.
   ============================================================================ */
[data-theme="light"] {
  --space: #eef1f6;                 /* cool observatory ground   */
  --paper: #ffffff;
  --ink: #12233d;                   /* dark ink                  */
  --ink-soft: #5b6b84;
  --rule: rgba(20,50,110,.22);      /* thin ink hairline         */
  --head-fill: #0c1730;             /* ink headline / wordmark   */
  --emblem: var(--head-fill);       /* ink-black compass star, matches the wordmark */
  --cat-news:   #1f6fd0;            /* darkened for contrast on white */
  --cat-update: #b46e00;
  --cat-event:  #1e8f4e;
  --cat-guide:  #6b3fd0;
  --cat-patch:  #0d8f86;
}
/* ground: white + faint telemetry graticule, no nebula/starfield */
[data-theme="light"] body.paper, [data-theme="light"] body.cms {
  background-color: var(--space);
  background-image:
    linear-gradient(rgba(30,70,140,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,70,140,.06) 1px, transparent 1px);
  background-size: 46px 46px; background-attachment: fixed;
}
[data-theme="light"] body.paper::before, [data-theme="light"] body.cms::before { display: none; }
/* HUD brackets: solid ink registration marks, no glow */
[data-theme="light"] .cosmic-frame i { border-color: var(--accent); filter: none; }
/* wordmark: crisp ink letterpress, no chrome extrude */
[data-theme="light"] .masthead h1 { -webkit-text-stroke: 0; text-shadow: 0 1px 0 rgba(20,50,110,.12); color: var(--head-fill); }
/* the near-white logo.png washes out on white, so collapse it to a black silhouette */
[data-theme="light"] .masthead img.logo { filter: brightness(0); }
[data-theme="light"] .masthead .dateline span:last-child { color: var(--accent); text-shadow: none; }
[data-theme="light"] .sun-emblem { filter: none; }
/* rules: solid ink, no bloom */
[data-theme="light"] .rule-double { background: var(--accent); box-shadow: none; }
[data-theme="light"] .rule-double.thin { opacity: .5; }
/* stories: flat newsprint cards, hairline dividers, keep the notched corner */
[data-theme="light"] .story { background: #fff; box-shadow: 0 1px 2px rgba(20,50,110,.06); backdrop-filter: none; }
[data-theme="light"] .story:hover { box-shadow: 0 0 0 1px var(--accent), 0 10px 24px -16px rgba(20,50,110,.4); border-color: var(--accent); }
[data-theme="light"] .story .kicker { text-shadow: none; }
[data-theme="light"] .story.lead h2 { text-shadow: none; }
/* article headline: solid ink (the dark-mode gradient text is invisible on white) */
[data-theme="light"] .article-head h1 { background: none; -webkit-text-fill-color: var(--head-fill); color: var(--head-fill); filter: none; }
[data-theme="light"] .article-head .kicker { text-shadow: none; }
/* empty-state emblem: soft ink glow, no neon */
[data-theme="light"] .empty-front h2 { text-shadow: none; }
/* --- press room (admin) in day mode --- */
[data-theme="light"] .topbar { background: #fff; box-shadow: 0 1px 0 var(--rule); }
[data-theme="light"] .topbar .brand { text-shadow: none; }
[data-theme="light"] .topbar nav a:hover, [data-theme="light"] .topbar nav a.active { background: rgba(62,166,255,.12); text-shadow: none; color: var(--head-fill); }
[data-theme="light"] .page-title { text-shadow: none; }
[data-theme="light"] .card, [data-theme="light"] .item { background: #fff; box-shadow: none; backdrop-filter: none; }
[data-theme="light"] select option { background: #fff; color: var(--ink); }
/* light-mode ink fixes: empty state, editor tool hover, status chips */
[data-theme="light"] .empty-front h2 { color: var(--head-fill); }
[data-theme="light"] .tag.pub { color: #1e7a43; background: rgba(40,150,95,.15); border-color: rgba(40,150,95,.4); }
[data-theme="light"] .tag.draft { color: #8a5a00; background: rgba(190,140,30,.16); border-color: rgba(190,140,30,.4); }
[data-theme="light"] .btn { background: #fff; }
[data-theme="light"] .btn:hover { background: rgba(62,166,255,.08); box-shadow: none; border-color: var(--accent); }
[data-theme="light"] .btn.ghost { background: transparent; }
[data-theme="light"] .btn.accent { box-shadow: none; }
[data-theme="light"] .btn.accent:hover { box-shadow: 0 3px 10px -2px rgba(20,50,110,.3); }
/* --- login / reader auth in day mode --- */
[data-theme="light"] .login-stage { background: var(--space); background-image:
  linear-gradient(rgba(30,70,140,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(30,70,140,.06) 1px, transparent 1px); background-size: 46px 46px; }
[data-theme="light"] .login-card { background: #fff; box-shadow: 0 24px 60px -34px rgba(20,50,110,.4); backdrop-filter: none; }
[data-theme="light"] .login-card .masthead-sm h1 { background: none; -webkit-text-fill-color: var(--head-fill); color: var(--head-fill); filter: none; }
/* --- editor in day mode --- */
[data-theme="light"] .tools, [data-theme="light"] .props { background: #fbfcfe; }
[data-theme="light"] .tool-btn:hover { box-shadow: none; color: var(--head-fill); }
[data-theme="light"] .stage { background: var(--space); background-image: none; }

/* ============================================================================
   7. INTERACTION & MOTION - transform/opacity only, all reduced-motion aware.
   ============================================================================ */

/* --- reader name tags (badges on comments) --- */
.cname {
  font-weight: 700;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tagged { position: relative; display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; cursor: help; }
.tagged img { width: 16px; height: 16px; object-fit: contain; display: block; }
.tagged .tt {
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%) translateY(4px);
  background: var(--paper); color: var(--head-fill); border: 1px solid var(--rule);
  padding: 3px 9px; border-radius: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tagged:hover .tt, .tagged:focus .tt, .tagged:focus-visible .tt { opacity: 1; transform: translateX(-50%) translateY(0); }
.tagged:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
[data-theme="light"] .tagged .tt { background: #fff; box-shadow: 0 6px 18px -8px rgba(20,50,110,.4); }
@media (prefers-reduced-motion: reduce) { .tagged .tt { transition: none; } }

/* --- reading-progress meter: scroll-driven accent line, no JS --- */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 80;
  transform: scaleX(0); transform-origin: left;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
@supports (animation-timeline: scroll()) {
  .read-progress { animation: read-fill linear both; animation-timeline: scroll(root block); }
  @keyframes read-fill { to { transform: scaleX(1); } }
}
[data-theme="light"] .read-progress { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .read-progress { display: none; } }

/* --- scroll reveal (article body / comments). Scoped to .js so no-JS never hides content. --- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* --- auth: loading spinner on submit + error shake --- */
.btn.loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; margin: -8px 0 0 -8px;
  border: 2px solid var(--head-fill); border-radius: 50%; opacity: .9; animation: spin .55s linear infinite;
}
.btn.accent.loading::after { border-color: #06101f; border-top-color: transparent; }
.btn.loading::after { border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
/* login card jolts once on a server error */
.login-card:has(.flash.err) { animation: shake .4s var(--ease-out); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .login-card:has(.flash.err) { animation: none; } .btn.loading::after { animation-duration: 1.6s; } }

/* --- footer Discord: underline wipe + glow --- */
footer .disco { position: relative; }
footer .disco::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
footer .disco:hover::after, footer .disco:focus-visible::after { transform: scaleX(1); }
footer .disco:hover { text-shadow: 0 0 10px currentColor; }
@media (prefers-reduced-motion: reduce) { footer .disco::after { transition: none; } }