/* HPA TERMINAL V19 — CRT DARK MODE
   Additive theme layer. Default theme remains the original HPA gray terminal. */

:root {
  --hpa-red: #ff3131;
  --hpa-red-soft: rgba(255,49,49,.32);
  --hpa-white: #f1f1ed;
  --hpa-black: #07090b;
  --hpa-charcoal: #0d1014;
  --hpa-charcoal-2: #13171c;
}

/* Theme control card */
.hpa-theme-card { padding: 12px 14px; }
.hpa-theme-toggle {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--hpa-line);
  border-radius: 0;
  background: transparent;
  color: var(--hpa-ink);
  font: inherit;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 9px 10px;
}
.hpa-theme-toggle:hover,
.hpa-theme-toggle:focus-visible {
  background: var(--hpa-ink);
  color: var(--hpa-bg);
  outline: none;
}
.hpa-theme-indicator {
  white-space: nowrap;
  opacity: .78;
  font-size: .72rem;
}

/* =========================================================
   BLACK / RED / WHITE CRT THEME
   ========================================================= */
html.hpa-dark-theme {
  color-scheme: dark;
  --hpa-bg: #080a0c;
  --hpa-ink: #f0f0ec;
  --hpa-panel: rgba(12,15,18,.91);
  --hpa-panel-strong: rgba(18,21,25,.95);
  --hpa-line: rgba(239,239,235,.50);
  --hpa-soft-line: rgba(239,239,235,.18);
  --hpa-shadow: rgba(0,0,0,.78);
  --hpa-field-bg: rgba(16,19,23,.82);
}

html.hpa-dark-theme,
html.hpa-dark-theme body {
  background-color: #080a0c !important;
  color: #f0f0ec !important;
}

/* retain CRT scanline + dot-matrix effect, tuned for dark phosphor */
html.hpa-dark-theme body {
  background-image:
    linear-gradient(rgba(255,255,255,.018) 50%, rgba(0,0,0,.055) 50%),
    radial-gradient(rgba(255,49,49,.25) .52px, transparent .58px) !important;
  background-size: 100% 4px, 3px 3px !important;
  text-shadow: 0 0 5px rgba(255,255,255,.035);
}
html.hpa-dark-theme body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.018) 3px,
    rgba(255,255,255,.018) 4px
  );
  mix-blend-mode: screen;
  opacity: .55;
}

/* Main page chassis */
html.hpa-dark-theme body.hpa-shell-ready > .container,
html.hpa-dark-theme .container {
  background: rgba(8,10,12,.88) !important;
  color: #f0f0ec !important;
  border-color: rgba(255,255,255,.44) !important;
  box-shadow: 0 14px 48px rgba(0,0,0,.78), inset 0 0 42px rgba(255,49,49,.018) !important;
}

html.hpa-dark-theme header,
html.hpa-dark-theme body.hpa-shell-ready header {
  border-color: #ff3131 !important;
}
html.hpa-dark-theme h1,
html.hpa-dark-theme h2,
html.hpa-dark-theme h3,
html.hpa-dark-theme h4,
html.hpa-dark-theme strong,
html.hpa-dark-theme label {
  color: #f5f5f2;
}

/* Panels + rails */
html.hpa-dark-theme .hpa-rail-card,
html.hpa-dark-theme .hpa-right-card,
html.hpa-dark-theme .system-panel,
html.hpa-dark-theme .dossier-link,
html.hpa-dark-theme .comment,
html.hpa-dark-theme .post-card,
html.hpa-dark-theme .newsletter-panel,
html.hpa-dark-theme .editor-shell,
html.hpa-dark-theme .composer-panel,
html.hpa-dark-theme .admin-panel,
html.hpa-dark-theme .newsletter-control-panel {
  background: rgba(12,15,18,.92) !important;
  color: #f0f0ec !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,49,49,.035) !important;
}

html.hpa-dark-theme .hpa-rail-heading,
html.hpa-dark-theme .hpa-right-card h3,
html.hpa-dark-theme .system-panel h2,
html.hpa-dark-theme .system-panel h3 {
  border-color: rgba(255,49,49,.42) !important;
}

/* Navigation */
html.hpa-dark-theme .hpa-rail-nav a,
html.hpa-dark-theme .top-nav a,
html.hpa-dark-theme a {
  color: #f0f0ec;
}
html.hpa-dark-theme .hpa-rail-nav a:hover,
html.hpa-dark-theme .hpa-rail-nav a.is-current,
html.hpa-dark-theme .top-nav a:hover,
html.hpa-dark-theme .top-nav a[aria-current="page"] {
  background: #c90f17 !important;
  color: #fff !important;
  border-color: #ff3131 !important;
  text-shadow: 0 0 7px rgba(255,49,49,.35);
}
html.hpa-dark-theme .hpa-admin-badge,
html.hpa-dark-theme .admin-badge {
  color: #ff6868 !important;
  border-color: #ff3131 !important;
  background: rgba(255,49,49,.07) !important;
}

/* buttons */
html.hpa-dark-theme button,
html.hpa-dark-theme .action-button,
html.hpa-dark-theme input[type="button"],
html.hpa-dark-theme input[type="submit"] {
  background: #11151a !important;
  color: #f3f3ef !important;
  border-color: rgba(255,255,255,.48) !important;
}
html.hpa-dark-theme button:hover,
html.hpa-dark-theme .action-button:hover,
html.hpa-dark-theme input[type="button"]:hover,
html.hpa-dark-theme input[type="submit"]:hover {
  background: #c90f17 !important;
  color: #fff !important;
  border-color: #ff3131 !important;
}

/* Inputs and rich editors */
html.hpa-dark-theme input,
html.hpa-dark-theme textarea,
html.hpa-dark-theme select,
html.hpa-dark-theme [contenteditable="true"],
html.hpa-dark-theme .rich-editor,
html.hpa-dark-theme #newsletter-editor,
html.hpa-dark-theme .editor-surface {
  background-color: #101318 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 50%, transparent 50%),
    radial-gradient(rgba(255,49,49,.18) .48px, transparent .54px) !important;
  background-size: 100% 4px, 3px 3px !important;
  color: #f2f2ee !important;
  border-color: rgba(255,255,255,.45) !important;
  caret-color: #ff3131 !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.34) !important;
}
html.hpa-dark-theme input::placeholder,
html.hpa-dark-theme textarea::placeholder,
html.hpa-dark-theme [contenteditable="true"]:empty::before {
  color: rgba(240,240,236,.42) !important;
}
html.hpa-dark-theme input:focus,
html.hpa-dark-theme textarea:focus,
html.hpa-dark-theme select:focus,
html.hpa-dark-theme [contenteditable="true"]:focus {
  outline: 1px solid #ff3131 !important;
  border-color: #ff3131 !important;
}

/* rich text toolbars */
html.hpa-dark-theme .editor-toolbar,
html.hpa-dark-theme .rich-toolbar,
html.hpa-dark-theme .toolbar {
  background: #0b0e12 !important;
  border-color: rgba(255,255,255,.42) !important;
}
html.hpa-dark-theme .editor-toolbar button,
html.hpa-dark-theme .editor-toolbar select,
html.hpa-dark-theme .editor-toolbar input,
html.hpa-dark-theme .rich-toolbar button,
html.hpa-dark-theme .rich-toolbar select {
  background: #14181d !important;
  color: #f2f2ee !important;
  border-color: rgba(255,255,255,.42) !important;
}
html.hpa-dark-theme .editor-toolbar button:hover,
html.hpa-dark-theme .rich-toolbar button:hover {
  background: #c90f17 !important;
  border-color: #ff3131 !important;
}

/* red signal accents */
html.hpa-dark-theme .hpa-status-dot,
html.hpa-dark-theme .comment::before {
  background: #ff3131 !important;
  box-shadow: 0 0 8px rgba(255,49,49,.38);
}
html.hpa-dark-theme .hpa-right-card [data-status="online"],
html.hpa-dark-theme .status-online,
html.hpa-dark-theme .signal-live {
  color: #ff5a5a !important;
}
html.hpa-dark-theme hr,
html.hpa-dark-theme .separator,
html.hpa-dark-theme .divider {
  border-color: rgba(255,49,49,.36) !important;
}

/* images keep monochrome CRT treatment */
html.hpa-dark-theme .hpa-avatar-frame img,
html.hpa-dark-theme .profile-avatar-preview,
html.hpa-dark-theme .author-avatar,
html.hpa-dark-theme .comment-avatar {
  filter: grayscale(1) contrast(1.16) brightness(.92) !important;
}

/* cards / dossier previews */
html.hpa-dark-theme .dossier-card,
html.hpa-dark-theme .post-preview,
html.hpa-dark-theme .archive-card,
html.hpa-dark-theme article {
  color: #f0f0ec;
}
html.hpa-dark-theme .dossier-card:hover,
html.hpa-dark-theme .post-preview:hover,
html.hpa-dark-theme .archive-card:hover {
  border-color: #ff3131 !important;
}

/* ticker remains black but gains red marker/accent */
html.hpa-dark-theme .news-ticker,
html.hpa-dark-theme .ticker,
html.hpa-dark-theme #news-ticker {
  background: #050607 !important;
  color: #ededeb !important;
  border-color: #ff3131 !important;
}

/* right rail random dossier */
html.hpa-dark-theme .hpa-random-dossier img {
  border-color: rgba(255,49,49,.55) !important;
}

/* toggle itself becomes intentionally red in dark mode */
html.hpa-dark-theme .hpa-theme-toggle {
  color: #fff;
  border-color: #ff3131;
  background: rgba(255,49,49,.06);
}
html.hpa-dark-theme .hpa-theme-toggle:hover,
html.hpa-dark-theme .hpa-theme-toggle:focus-visible {
  background: #c90f17;
  color: #fff;
}

/* selection */
html.hpa-dark-theme ::selection {
  background: #c90f17;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  html.hpa-dark-theme .hpa-status-dot {
    animation: hpa-dark-pulse 2.2s ease-in-out infinite;
  }
  @keyframes hpa-dark-pulse {
    0%,100% { opacity:.55; box-shadow:0 0 3px rgba(255,49,49,.2); }
    50% { opacity:1; box-shadow:0 0 11px rgba(255,49,49,.65); }
  }
}

/* =========================================================
   HPA V20 // ADMIN WORKSTATION DARK-MODE REPAIR
   Dedicated sizing + surface overrides for Dossier Composer
   and Newsletter Control. These pages use different root
   wrappers than the public reading-room pages.
   ========================================================= */

/* Remove legacy light workstation sheets while dark mode is active. */
html.hpa-dark-theme body.admin-composer-page #admin-content,
html.hpa-dark-theme body.admin-composer-page .composer-direct-grid,
html.hpa-dark-theme body.admin-composer-page .direct-post-form,
html.hpa-dark-theme body.admin-composer-page .header-image-channel,
html.hpa-dark-theme body.newsletter-admin-page .newsletter-admin,
html.hpa-dark-theme body.newsletter-admin-page .newsletter-workstation,
html.hpa-dark-theme body.newsletter-admin-page .newsletter-console-grid,
html.hpa-dark-theme body.newsletter-admin-page .newsletter-compose-column,
html.hpa-dark-theme body.newsletter-admin-page .newsletter-operations-column {
  background: transparent !important;
  color: var(--hpa-ink) !important;
}

/* The mastheads were inheriting a light gray gradient from legacy admin CSS. */
html.hpa-dark-theme body.admin-composer-page .composer-masthead,
html.hpa-dark-theme body.newsletter-admin-page .newsletter-header,
html.hpa-dark-theme body.newsletter-admin-page .workstation-masthead,
html.hpa-dark-theme body.newsletter-admin-page .newsletter-statusbar {
  background: linear-gradient(180deg, rgba(20,23,27,.96), rgba(9,11,14,.96)) !important;
  color: #f4f4f1 !important;
  border-color: rgba(255,49,49,.68) !important;
  box-shadow: inset 0 -1px 0 rgba(255,49,49,.26) !important;
}

html.hpa-dark-theme body.admin-composer-page .composer-status,
html.hpa-dark-theme body.newsletter-admin-page .workstation-header-actions {
  background: rgba(8,10,12,.72) !important;
  border-color: rgba(255,255,255,.38) !important;
  color: #efefeb !important;
}

/* Every admin panel becomes a CRT terminal card, including wrappers whose
   class names predate the shared panel system. */
html.hpa-dark-theme body.admin-composer-page .composer-panel,
html.hpa-dark-theme body.admin-composer-page .header-image-channel,
html.hpa-dark-theme body.admin-composer-page .image-tools,
html.hpa-dark-theme body.newsletter-admin-page .system-panel,
html.hpa-dark-theme body.newsletter-admin-page .console-card,
html.hpa-dark-theme body.newsletter-admin-page .image-tools {
  background-color: rgba(12,15,18,.94) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 50%, transparent 50%),
    radial-gradient(rgba(255,49,49,.105) .45px, transparent .52px) !important;
  background-size: 100% 4px, 3px 3px !important;
  border-color: rgba(255,255,255,.38) !important;
  color: #f0f0ec !important;
}

/* Kill lingering light backgrounds from nested legacy layout elements. */
html.hpa-dark-theme body.admin-composer-page .composer-panel *,
html.hpa-dark-theme body.newsletter-admin-page .console-card * {
  --legacy-paper: transparent;
}
html.hpa-dark-theme body.admin-composer-page .composer-panel-title,
html.hpa-dark-theme body.newsletter-admin-page .panel-terminal-title,
html.hpa-dark-theme body.newsletter-admin-page .editor-heading-row {
  background: transparent !important;
  color: #f5f5f2 !important;
  border-color: rgba(255,49,49,.36) !important;
}

/* Editors stay deep black/red CRT instead of the old paper canvas. */
html.hpa-dark-theme body.admin-composer-page #post-editor,
html.hpa-dark-theme body.newsletter-admin-page #newsletter-editor {
  background-color: #0d1014 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 50%, transparent 50%),
    radial-gradient(rgba(255,49,49,.16) .48px, transparent .54px) !important;
  background-size: 100% 4px, 3px 3px !important;
  color: #f1f1ed !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: inset 0 0 30px rgba(0,0,0,.55) !important;
}

/* =========================================================
   DESKTOP WORKSTATION GEOMETRY
   ========================================================= */
@media (min-width: 1600px) {
  /* Dossier uses .container, so reserve explicit physical lanes. */
  body.admin-composer-page.hpa-shell-ready.hpa-right-rail-ready > .container {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--hpa-sidebar) + 44px) !important;
    margin-right: calc(var(--hpa-rightbar) + 44px) !important;
    min-width: 0 !important;
  }

  /* Newsletter DOES NOT use .container. This is the V19 overlap bug. */
  body.newsletter-admin-page.hpa-shell-ready.hpa-right-rail-ready > .newsletter-admin {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--hpa-sidebar) + 44px) !important;
    margin-right: calc(var(--hpa-rightbar) + 44px) !important;
    min-width: 0 !important;
  }

  body.admin-composer-page .composer-direct-grid {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body.newsletter-admin-page .newsletter-console-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body.newsletter-admin-page .newsletter-compose-column,
  body.newsletter-admin-page .newsletter-operations-column,
  body.admin-composer-page .composer-panel {
    min-width: 0 !important;
  }

  body.newsletter-admin-page .newsletter-operations-column {
    width: auto !important;
    max-width: none !important;
  }

  body.newsletter-admin-page .newsletter-toolbar,
  body.admin-composer-page .editor-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* Mid-size screens: admin tools become one main column and the telemetry rail
   docks under the workspace rather than colliding with controls. */
@media (min-width: 980px) and (max-width: 1599px) {
  body.admin-composer-page.hpa-shell-ready > .container,
  body.newsletter-admin-page.hpa-shell-ready > .newsletter-admin {
    box-sizing: border-box !important;
    width: calc(100vw - var(--hpa-sidebar) - 84px) !important;
    max-width: none !important;
    margin-left: calc(var(--hpa-sidebar) + 52px) !important;
    margin-right: 32px !important;
  }

  body.admin-composer-page .composer-direct-grid,
  body.newsletter-admin-page .newsletter-console-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.admin-composer-page .composer-side-panel,
  body.newsletter-admin-page .newsletter-operations-column {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 979px) {
  body.newsletter-admin-page.hpa-shell-ready > .newsletter-admin {
    box-sizing: border-box !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 14px auto 28px !important;
  }
}

/* =========================================================
   HPA V21 // DARK CRT TICKER REPAIR
   Treat the title + moving feed as a single phosphor strip.
   ========================================================= */
html.hpa-dark-theme .ticker-wrap {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.018) 0,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(90deg, #030405 0%, #08090b 48%, #030405 100%) !important;
  color: #f4f4f1 !important;
  border-top: 1px solid rgba(255,49,49,.58) !important;
  border-bottom: 1px solid rgba(255,49,49,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(255,49,49,.08),
    0 0 14px rgba(255,20,20,.07) !important;
}

html.hpa-dark-theme .ticker-title {
  background: #090a0c !important;
  color: #ff3b3b !important;
  border-right: 1px solid rgba(255,49,49,.62) !important;
  text-shadow: 0 0 6px rgba(255,49,49,.32) !important;
  box-shadow: inset -8px 0 16px rgba(255,49,49,.025) !important;
}

html.hpa-dark-theme .ticker,
html.hpa-dark-theme .news-ticker,
html.hpa-dark-theme #news-ticker {
  background: transparent !important;
  color: #dededb !important;
  border: 0 !important;
  text-shadow: 0 0 4px rgba(235,235,235,.10) !important;
  /* soft CRT falloff at the left/right edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
}

html.hpa-dark-theme .ticker a,
html.hpa-dark-theme .ticker__item {
  color: #d7d7d4 !important;
  text-decoration: none !important;
}

html.hpa-dark-theme .ticker a:hover,
html.hpa-dark-theme .ticker__item:hover {
  color: #fff !important;
  text-shadow: 0 0 7px rgba(255,255,255,.18) !important;
}

/* Prefixes injected as real child elements on some ticker builds. */
html.hpa-dark-theme .ticker .signal-intercept,
html.hpa-dark-theme .ticker .ticker-prefix,
html.hpa-dark-theme .ticker .prefix,
html.hpa-dark-theme .ticker strong,
html.hpa-dark-theme .ticker b {
  color: #ff4545 !important;
  text-shadow: 0 0 6px rgba(255,49,49,.35) !important;
}

/* Give every item a small red separator when multiple items are present. */
html.hpa-dark-theme .ticker__item + .ticker__item::before {
  content: "◆";
  color: #c9151d;
  margin: 0 1.25rem 0 .7rem;
  font-size: .72em;
  text-shadow: 0 0 5px rgba(255,49,49,.4);
}

@media (prefers-reduced-motion: no-preference) {
  html.hpa-dark-theme .ticker-wrap {
    animation: hpa-ticker-phosphor 5.5s ease-in-out infinite;
  }
  @keyframes hpa-ticker-phosphor {
    0%,100% { box-shadow: 0 0 10px rgba(255,20,20,.045), inset 0 -1px 0 rgba(255,49,49,.08); }
    50% { box-shadow: 0 0 18px rgba(255,20,20,.095), inset 0 -1px 0 rgba(255,49,49,.14); }
  }
}


/* HPA V23 // dossier reader dark-theme continuity */
html.hpa-dark-theme body.hpa-post-reader-page,
html.hpa-dark-theme body.hpa-post-reader-page > .container,
html.hpa-dark-theme body.hpa-post-reader-page #post-root,
html.hpa-dark-theme body.hpa-post-reader-page #post-root > article,
html.hpa-dark-theme body.hpa-post-reader-page .system-panel,
html.hpa-dark-theme body.hpa-post-reader-page .comment {
  background-color:#080a0c !important;
  color:#f0f0f0 !important;
  border-color:rgba(230,35,42,.52) !important;
}
html.hpa-dark-theme body.hpa-post-reader-page > .container {
  background-image:
    linear-gradient(rgba(255,255,255,.018) 50%, transparent 50%),
    radial-gradient(rgba(214,31,38,.24) .45px, transparent .52px) !important;
  background-size:100% 4px,3px 3px !important;
}
html.hpa-dark-theme body.hpa-post-reader-page .post-body,
html.hpa-dark-theme body.hpa-post-reader-page .post-body p,
html.hpa-dark-theme body.hpa-post-reader-page .post-body li,
html.hpa-dark-theme body.hpa-post-reader-page .post-body h1,
html.hpa-dark-theme body.hpa-post-reader-page .post-body h2,
html.hpa-dark-theme body.hpa-post-reader-page .post-body h3,
html.hpa-dark-theme body.hpa-post-reader-page .post-body h4 {
  color:#f0f0f0 !important;
}
html.hpa-dark-theme body.hpa-post-reader-page .post-body a { color:#ff3a40 !important; }