/* GNEWS HUD — degoog theme for sch.gnews.cz.
 *
 * Loaded AFTER the built-in degoog-theme/style.css, so this is an overlay:
 * the palette is re-pointed through the stock CSS variables, then the
 * pieces that carry the gnews.cz HUD look (2026-09-16 mockups: dark navy
 * hex mesh, cyan glow, chamfered frames, uppercase tracked labels) are
 * restyled explicitly. Tokens mirror web/src/components/homepages/hud.css
 * in gnews.cz-next (cyan accent).
 */

:root,
[data-theme="light"],
[data-theme="dark"] {
  --hud-bg: #04101f;
  --hud-bg-2: #071a30;
  --hud-panel: rgba(8, 26, 46, 0.86);
  --hud-panel-2: rgba(6, 20, 38, 0.92);
  --hud-line: #3ee5ff;
  --hud-line-soft: rgba(62, 229, 255, 0.35);
  --hud-line-faint: rgba(62, 229, 255, 0.14);
  --hud-glow: rgba(62, 229, 255, 0.55);
  --hud-glow-strong: rgba(62, 229, 255, 0.85);
  --hud-halo: rgba(18, 92, 128, 0.55);
  --hud-halo-2: rgba(8, 48, 78, 0.4);
  --hud-text: #e7f4ff;
  --hud-text-soft: #a9c6dc;
  --hud-text-muted: #6f93ad;
  --hud-kicker: #d8b85b;
  --hud-chamfer: 14px;
  --hud-clip: polygon(
    0 0,
    calc(100% - var(--hud-chamfer)) 0,
    100% var(--hud-chamfer),
    100% 100%,
    var(--hud-chamfer) 100%,
    0 calc(100% - var(--hud-chamfer))
  );

  /* stock degoog tokens → HUD palette (always dark, whatever the toggle) */
  color-scheme: dark;
  --primary: var(--hud-line);
  --primary-hover: #7ff0ff;
  --primary-rgb: 62, 229, 255;
  --brand-blue: var(--hud-line);
  --brand-yellow: var(--hud-kicker);
  --danger: #ff5c6c;
  --warning: var(--hud-kicker);
  --success: #4ade80;
  --bg: var(--hud-bg);
  --bg-light: #081a2e;
  --bg-hover: #0b2440;
  --modal-footer: #06172b;
  --border: var(--hud-line-soft);
  --border-light: var(--hud-line-faint);
  --text-primary: var(--hud-text);
  --text-secondary: var(--hud-text-soft);
  --text-link: #9af3ff;
  --text-link-visited: #f0d27a;
  --text-cite: var(--hud-text-muted);
  --text-snippet: var(--hud-text-soft);
  --search-bar-bg: var(--hud-panel);
  --search-bar-bg-hover: rgba(10, 34, 58, 0.95);
  --btn-bg: var(--hud-panel);
  --btn-text: var(--hud-text);
  --overlay-bg: rgba(2, 8, 18, 0.72);
  --white: #e7f4ff;
  --degoog-search-bar-radius: 4px;
}

/* ---- canvas: vignette + halo + navy, hex mesh on top ------------------ */
html {
  background: var(--hud-bg);
}
body {
  font-family: "Inter", Roboto, Arial, sans-serif;
  color: var(--hud-text);
  background:
    radial-gradient(ellipse 120% 90% at 50% 30%, transparent 45%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(ellipse 75% 60% at 50% 22%, var(--hud-halo) 0%, var(--hud-halo-2) 40%, transparent 78%),
    var(--hud-bg);
  background-attachment: fixed;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hud-line);
  opacity: 0.07;
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><path d='M28 1L54 16V47L28 62L2 47V16Z M28 62V96' fill='none' stroke='black' stroke-width='1'/><path d='M0 64L28 80L56 64' fill='none' stroke='black' stroke-width='1'/></svg>"),
    radial-gradient(ellipse 80% 70% at 50% 35%, black 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><path d='M28 1L54 16V47L28 62L2 47V16Z M28 62V96' fill='none' stroke='black' stroke-width='1'/><path d='M0 64L28 80L56 64' fill='none' stroke='black' stroke-width='1'/></svg>"),
    radial-gradient(ellipse 80% 70% at 50% 35%, black 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  -webkit-mask-size: 56px 97px, 100% 100%;
  mask-size: 56px 97px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
::selection {
  background: rgba(62, 229, 255, 0.35);
  color: #fff;
}
a {
  color: var(--text-link);
}

/* ---- wordmark: GNEWS SEARCH ------------------------------------------- */
/* Winged GNEWS mark above the wordmark: desktop only (the phone layout
   keeps the wordmark alone so the search box stays above the fold). */
.gnews-logo-wings {
  display: none;
  height: 40px;
  width: auto;
  margin: 0 auto 0.6rem;
  filter: drop-shadow(0 0 6px var(--hud-glow));
  user-select: none;
  pointer-events: none;
}
@media (min-width: 768px) {
  .gnews-logo-wings { display: block; }
}
#home-logo,
.gnews-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.gnews-logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.45em;
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  direction: ltr;
}
.gnews-logo-word {
  font-family: "Inter", Roboto, Arial, sans-serif;
  font-weight: 900;
}
.gnews-logo-gnews {
  color: var(--hud-text);
  text-shadow: 0 0 10px var(--hud-glow), 0 0 28px var(--hud-glow);
}
.gnews-logo-search {
  color: var(--hud-line);
  text-shadow: 0 0 10px var(--hud-glow), 0 0 30px var(--hud-glow-strong);
}
.gnews-logo-kicker {
  display: flex;
  flex-basis: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 1.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hud-text-muted);
}
.gnews-logo-kicker::before,
.gnews-logo-kicker::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--hud-line-soft) 0 8px, transparent 8px 13px);
}
.gnews-logo-kicker::before {
  box-shadow: none;
}

/* results-page wordmark (small) */
.gnews-results-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0 0.35em;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding-right: 1.25rem;
}
.gnews-results-logo .gnews-logo-gnews {
  text-shadow: 0 0 8px var(--hud-glow);
}
.gnews-results-logo .gnews-logo-search {
  text-shadow: 0 0 8px var(--hud-glow), 0 0 18px var(--hud-glow);
}

/* ---- home layout -------------------------------------------------------- */
#main-home {
  margin-top: -60px;
}
#search-form-home {
  width: min(44rem, 100%);
}

/* ---- header (home) ------------------------------------------------------ */
#header .header-link {
  color: var(--hud-text-soft);
  transition: color 180ms ease, text-shadow 180ms ease;
}
#header .header-link:hover {
  color: var(--hud-line);
  text-shadow: 0 0 10px var(--hud-glow);
}

/* ---- search bars -------------------------------------------------------- */
.degoog-search-bar,
.search-bar:not([class~="degoog-search-bar"]),
.results-search-bar:not([class~="degoog-search-bar"]),
.settings-nav-search:not([class~="degoog-search-bar"]),
.store-search-input:not([class~="degoog-search-bar"]) {
  background: var(--hud-panel);
  border: 1px solid var(--hud-line-soft);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(62, 229, 255, 0.08),
    0 0 12px rgba(62, 229, 255, 0.14),
    inset 0 0 24px rgba(62, 229, 255, 0.04);
  color: var(--hud-text);
  height: 3rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.degoog-search-bar:hover,
.degoog-search-bar:focus-within,
.search-bar:hover:not([class~="degoog-search-bar"]),
.search-bar:focus-within:not([class~="degoog-search-bar"]),
.results-search-bar:hover:not([class~="degoog-search-bar"]),
.results-search-bar:focus-within:not([class~="degoog-search-bar"]) {
  background: var(--search-bar-bg-hover);
  border-color: var(--hud-line);
  box-shadow:
    0 0 0 1px rgba(62, 229, 255, 0.25),
    0 0 14px var(--hud-glow),
    0 0 32px rgba(62, 229, 255, 0.25);
}
/* corner ticks, like the chamfer marks on the HUD frames */
.degoog-search-bar::before,
.degoog-search-bar::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-color: var(--hud-line);
  border-style: solid;
  filter: drop-shadow(0 0 4px var(--hud-glow));
}
.degoog-search-bar::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
.degoog-search-bar::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 2px 2px 0;
}
.degoog-search-bar.ac-open::after {
  display: none;
}
.degoog-search-bar .search-icon {
  stroke: var(--hud-line);
  filter: drop-shadow(0 0 4px var(--hud-glow));
}
.degoog-search-bar .search-input {
  color: var(--hud-text);
  font-size: 1rem;
  caret-color: var(--hud-line);
}
.degoog-search-bar .search-input::placeholder {
  color: var(--hud-text-muted);
}

/* ---- buttons ------------------------------------------------------------ */
.button-row {
  gap: 0.75rem;
}
.search-btn {
  position: relative;
  background:
    linear-gradient(var(--hud-panel), var(--hud-panel)) padding-box,
    linear-gradient(135deg, var(--hud-line) 0%, var(--hud-line-soft) 40%, var(--hud-line-soft) 60%, var(--hud-line) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 0;
  --hud-chamfer: 9px;
  clip-path: var(--hud-clip);
  color: var(--hud-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  height: 2.5rem;
  padding: 0 1.25rem;
  box-shadow: none;
  transition: color 180ms ease, text-shadow 180ms ease, background 180ms ease;
}
.search-btn:hover,
.search-btn:focus-visible {
  border-color: transparent;
  color: var(--hud-line);
  text-shadow: 0 0 8px var(--hud-glow);
  background:
    linear-gradient(var(--bg-hover), var(--bg-hover)) padding-box,
    linear-gradient(135deg, var(--hud-line), var(--hud-line)) border-box;
  box-shadow: none;
}
.degoog-icon-btn {
  color: var(--hud-text-soft);
}
.degoog-icon-btn:hover {
  color: var(--hud-line);
  filter: drop-shadow(0 0 6px var(--hud-glow));
}

/* ---- autocomplete / dropdowns / menus ---------------------------------- */
.ac-dropdown,
.degoog-dropdown,
.tools-dropdown:not([class~="degoog-dropdown"]),
.tools-submenu:not([class~="degoog-dropdown"]),
.result-actions-menu:not([class~="degoog-dropdown"]) {
  background: var(--hud-panel-2);
  border: 1px solid var(--hud-line-soft);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 14px rgba(62, 229, 255, 0.18), 0 12px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}
.degoog-dropdown {
  border-radius: 4px;
}
.degoog-menu-item,
.ac-item {
  color: var(--hud-text);
}
.degoog-menu-item:hover,
.degoog-menu-item.active,
.ac-item:hover,
.ac-item.selected,
.ac-item.active {
  background: rgba(62, 229, 255, 0.1);
  color: var(--hud-line);
}

/* ---- results header ----------------------------------------------------- */
body.has-results #results-header {
  background: linear-gradient(180deg, #06172b 0%, rgba(4, 16, 31, 0) 100%);
}
#results-tabs {
  border-bottom: 1px solid var(--hud-line-soft);
  box-shadow: 0 1px 0 rgba(62, 229, 255, 0.08), 0 6px 18px -8px var(--hud-glow);
}
.degoog-tab,
.results-tab:not([class~="degoog-tab"]) {
  color: var(--hud-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, text-shadow 180ms ease, border-color 180ms ease;
}
.degoog-tab:hover,
.results-tab:hover:not([class~="degoog-tab"]) {
  color: var(--hud-text);
}
.degoog-tab.active,
.active.results-tab:not([class~="degoog-tab"]) {
  color: var(--hud-line);
  border-bottom-color: var(--hud-line);
  text-shadow: 0 0 8px var(--hud-glow);
  box-shadow: 0 2px 10px -2px var(--hud-glow);
}
.tools-toggle {
  color: var(--hud-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tools-toggle:hover,
.tools-toggle.active,
.tools-toggle.is-open {
  color: var(--hud-line);
  text-shadow: 0 0 8px var(--hud-glow);
}
.tools-panel {
  background: var(--hud-panel);
  border: 1px solid var(--hud-line-faint);
  border-top: 0;
}
.tools-field-toggle {
  color: var(--hud-text);
}
.tools-field-label {
  color: var(--hud-text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tools-field-value {
  color: var(--hud-line);
}
#results-meta {
  color: var(--hud-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- result items: chamfered glowing frames ---------------------------- */
.result-item {
  position: relative;
  isolation: isolate;
  margin: 0.9rem 0;
  padding: 1rem 1.15rem;
  filter: drop-shadow(0 0 4px rgba(62, 229, 255, 0.28));
  transition: filter 220ms ease;
}
.result-item::before {
  /* the frame: gradient line, chamfered */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: var(--hud-clip);
  background: linear-gradient(
    135deg,
    var(--hud-line) 0%,
    var(--hud-line-soft) 35%,
    var(--hud-line-soft) 65%,
    var(--hud-line) 100%
  );
  transition: background 220ms ease;
}
.result-item::after {
  /* the panel fill */
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--hud-clip);
  background: var(--hud-panel);
  transition: background 220ms ease;
}
.result-item:hover {
  filter: drop-shadow(0 0 7px var(--hud-glow)) drop-shadow(0 0 1px var(--hud-line));
}
.result-item:hover::before {
  background: var(--hud-line);
}
.result-item:hover::after {
  background: var(--hud-panel-2);
}
.result-title {
  color: var(--hud-text);
  font-weight: 600;
  transition: color 180ms ease, text-shadow 180ms ease;
}
.result-title:hover {
  color: var(--hud-line);
  text-shadow: 0 0 10px var(--hud-glow);
}
.result-title:visited {
  color: var(--text-link-visited);
}
.result-cite {
  color: var(--hud-text-muted);
}
.result-favicon {
  border-radius: 3px;
  outline: 1px solid var(--hud-line-faint);
  outline-offset: 1px;
  background: #0b2440;
}
.result-snippet {
  color: var(--hud-text-soft);
}
.result-thumbnail-img {
  border-radius: 3px;
  outline: 1px solid var(--hud-line-soft);
  outline-offset: 1px;
  box-shadow: 0 0 6px var(--hud-line-soft);
}
.degoog-badge,
.result-engine-tag:not([class~="degoog-badge"]) {
  background: rgba(62, 229, 255, 0.07);
  border: 1px solid var(--hud-line-faint);
  color: var(--hud-text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: none;
}
.result-actions-toggle {
  color: var(--hud-text-muted);
}
.result-actions-toggle:hover {
  color: var(--hud-line);
}
.result-insecure-badge {
  color: var(--hud-kicker);
  border-color: var(--hud-kicker);
}

/* ---- panels (sidebar, slots, at-a-glance, extension cards) -------------- */
.degoog-panel,
.ext-card:not([class~="degoog-panel"]),
.sidebar-panel:not([class~="degoog-panel"]),
.results-slot-panel:not([class~="degoog-panel"]),
.glance-box:not([class~="degoog-panel"]),
.glance-ai:not([class~="degoog-panel"]) {
  background: var(--hud-panel);
  border: 1px solid var(--hud-line-soft);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(62, 229, 255, 0.06), 0 0 12px rgba(62, 229, 255, 0.12);
  color: var(--hud-text);
}
.degoog-panel--slot-title,
.sidebar-panel h3,
.glance-box h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hud-text);
  text-shadow: 0 0 10px var(--hud-glow);
}
.degoog-panel--slot-title::before,
.sidebar-panel h3::before {
  content: "";
  width: 3px;
  height: 1rem;
  background: var(--hud-kicker);
  box-shadow: 0 0 6px var(--hud-kicker);
}

/* ---- image / video grids ------------------------------------------------ */
.image-card img,
.video-card img,
.image-card,
.video-card {
  border-radius: 3px;
}
.image-card:hover img,
.video-card:hover img {
  outline: 1px solid var(--hud-line);
  box-shadow: 0 0 10px var(--hud-glow), 0 0 22px var(--hud-glow);
}

/* ---- pagination --------------------------------------------------------- */
#pagination a,
#pagination button,
.pagination-btn {
  color: var(--hud-text-soft);
  border: 1px solid var(--hud-line-faint);
  background: var(--hud-panel);
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
#pagination a:hover,
#pagination button:hover,
.pagination-btn:hover,
#pagination .active,
.pagination-btn.active {
  color: var(--hud-line);
  border-color: var(--hud-line);
  box-shadow: 0 0 10px var(--hud-glow);
}

/* ---- inputs / settings chrome ------------------------------------------ */
.degoog-input,
input[type="text"]:not(.search-input),
input[type="search"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea,
select {
  background: var(--hud-panel-2);
  border: 1px solid var(--hud-line-soft);
  color: var(--hud-text);
  border-radius: 3px;
  caret-color: var(--hud-line);
}
.degoog-input:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--hud-line);
  box-shadow: 0 0 10px var(--hud-glow);
}
button.primary,
.btn-primary,
.degoog-btn--primary {
  background: rgba(62, 229, 255, 0.12);
  border: 1px solid var(--hud-line);
  color: var(--hud-line);
  text-shadow: 0 0 6px var(--hud-glow);
}
hr {
  border-color: var(--hud-line-faint);
}

/* ---- footer ------------------------------------------------------------- */
#home-footer,
.home-footer-bottom {
  color: var(--hud-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-footer-bottom a {
  color: var(--hud-text-muted);
  text-decoration: none;
  transition: color 180ms ease, text-shadow 180ms ease;
}
.home-footer-bottom a:hover {
  color: var(--hud-line);
  text-shadow: 0 0 8px var(--hud-glow);
}
.home-footer-separator {
  opacity: 0.4;
}
.home-footer-version {
  color: var(--hud-kicker);
}

/* ---- scrollbars --------------------------------------------------------- */
* {
  scrollbar-color: rgba(62, 229, 255, 0.35) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(62, 229, 255, 0.3);
  border-radius: 4px;
}

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 640px) {
  .gnews-logo {
    font-size: clamp(2rem, 11vw, 2.8rem);
    letter-spacing: 0.12em;
  }
  .gnews-logo-kicker {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
    margin-top: 0.7rem;
  }
  .gnews-logo-kicker::before,
  .gnews-logo-kicker::after {
    width: 1.4rem;
  }
  .gnews-results-logo {
    font-size: 0.85rem;
    padding-right: 0.5rem;
  }
  .result-item {
    padding: 0.85rem 0.9rem;
    --hud-chamfer: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-item,
  .result-item::before,
  .result-item::after,
  .search-btn,
  .degoog-search-bar {
    transition: none;
  }
}