/* =========================================================
   Cowy’s Void — Unified Styles
   Path: /assets/css/void.css
   ========================================================= */

/* ----- Design Tokens ----- */
:root{
  --bg: #090a12;
  --card: #0b0f17;
  --text: #e8eaff;
  --muted: #9aa4c7;
  --accent: #6aa7ff;
  --accent-2: #b388ff;
  --ring: rgba(130,160,255,.35);

  /* layout */
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-lg: 0 24px 60px rgba(0,0,0,.35);
  --shadow-md: 0 10px 35px rgba(0,0,0,.25);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.20);

  --container: 1080px;
}

@media (prefers-color-scheme: light) {
  :root{
    --bg:#f6f7ff; --card:#ffffff; --text:#0b0d10; --muted:#5e6b85;
    --accent:#3d6cff; --accent-2:#7f68ff; --ring: rgba(61,108,255,.25);
  }
}

/* ----- Base ----- */
*{ box-sizing: border-box }
html,body{
  height:100%; margin:0;
  background:var(--bg); color:var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img,svg,video{ max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring);
  border-radius:8px;
}
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace }

/* ----- Layout ----- */
.container{ max-width:var(--container); margin:0 auto; padding:24px }
.app-layer { position: relative; z-index: 1 } /* raise above bg video */

/* ----- Background video layer (global) ----- */
.bg-video {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.bg-video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .6s ease;
}
.bg-video.ready video{ opacity:.35 }
.bg-video::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 50% 35%, rgba(0,0,0,.2), rgba(0,0,0,.55));
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .bg-video video{ transition:none }
}

/* ----- Hero ----- */
.hero{
  margin-top:28px; border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(106,167,255,.18), transparent 60%),
    radial-gradient(120% 120% at 80% 90%, rgba(179,136,255,.18), transparent 60%),
    var(--card);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-lg);
  overflow:hidden; position:relative;
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; min-height:300px;
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr } }

.hero-left{ padding:48px 23px }
.hero-left .code { padding-bottom: 30px; padding-right: 70px;}
.title{
  font-weight:800; font-size: clamp(18px, 3.6vmin, 28px); color:var(--text)
}
.sub{ font-size:clamp(12px,2.4vmin,14px); color:var(--muted) }
.cursor{ display:inline-block; width:.6ch; height:.7em; background: currentColor; opacity:.7; margin-left:3px; border-radius:2px; animation:blink 2s steps(50,start) infinite }
@keyframes blink{ 50%{ opacity:.15 } }

/* Big gradient title */
.code{
  display:block; width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:clip;
  line-height:.9; font-weight:900;
  font-size: clamp(48px, 12vmin, 120px); letter-spacing:-.03em;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 22px rgba(120,140,255,.35);
  /* prevent glow clipping */
  padding-inline:.25em; margin-inline:-.25em;
}

/* ----- Buttons ----- */
.btn{
  padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text); transition:background .12s ease, border-color .12s ease
}
.btn:hover{ background:rgba(255,255,255,.08) }
.btn.primary{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0b0d10; font-weight:700; border:none
}
.btn:disabled{ opacity:.6; cursor:not-allowed }

/* ----- Cards + Grid ----- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:22px }
.card{
  grid-column: span 6;
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-md); padding:18px;
  box-shadow:var(--shadow-md);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{ transform: translateY(-2px); border-color: var(--ring); box-shadow:0 14px 36px rgba(0,0,0,.30) }
@media (max-width:900px){ .card{ grid-column: span 12 } }
.card h3{ margin:0 0 8px 0; font-size:18px }
.card p{ margin:0; color:var(--muted); font-size:14px }

/* ----- Lists ----- */
.list{ margin:10px 0 0 0; padding:0; list-style:none; display:grid; gap:8px }
.list a{
  display:flex; align-items:center; gap:10px; padding:10px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03)
}
.list a:hover{ border-color:var(--ring); box-shadow:0 0 0 3px var(--ring) }

/* ----- Pills / Chips / Tags / Meta ----- */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  border-radius:999px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10); font-size:12px; color:var(--text)
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.tag{
  font-size:12px; color:var(--muted);
  border:1px solid rgba(255,255,255,.08);
  padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.03)
}
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.chip{
  font-size:12px; color:var(--muted);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.03); cursor:pointer
}
.chip.active{ color:var(--text); border-color:var(--ring); box-shadow:0 0 0 3px var(--ring) }
.meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px }

/* ----- Inputs / Toolbar ----- */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 }
.input{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)
}
.input input, .input select{ all:unset; flex:1; min-width: 0 }

/* ----- Common thumb frames (projects/mtg) ----- */
.thumbwrap{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-sm)
}
.thumb{ width:100%; height:100%; object-fit:cover }
.thumb.fallback{
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:42px; letter-spacing:-.02em; color:var(--muted)
}

/* Commander-style 3:4 frame, with optional 2-up */
.thumbwrap-34{ aspect-ratio:3/4 }
.thumbwrap-34.grid2{ display:grid; grid-template-columns:1fr 1fr }

/* ----- Footer ----- */
footer{ margin:40px 0 12px; color:var(--muted); font-size:12px; text-align:center }

/* ----- Optional UC visual hint ----- */
.uc-disabled { cursor:not-allowed }

/* ----- A11y helpers ----- */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; border:0 !important;
}

/* ===== MTG page extras ===== */

/* Page header spacing */
header.page h1{ margin:6px 0 6px; font-weight:900; letter-spacing:-.015em; font-size:clamp(28px,3.8vmin,44px) }
header.page p{ margin:0 }

/* Section heading */
.section{ margin:18px 0 8px }
.section h2{ margin:0 0 6px; font-size:18px; color:var(--text) }

/* Empty state */
.empty{
  color:var(--muted); padding:24px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px; text-align:center
}

/* MTG card layout: image column + body column */
.card.mtg-card{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:16px; align-items:start;
}
@media (max-width:640px){
  .card.mtg-card{ grid-template-columns:1fr }
}

/* Commander image aspect: 3:4 (use .thumbwrap-34 from base) */
.thumbwrap-34{ aspect-ratio:3/4 }
.thumbwrap-34.grid2{ display:grid; grid-template-columns:1fr 1fr }

/* Mana symbols */
.pips{ display:flex; gap:6px; align-items:center }
.ms{ width:18px; height:18px; display:inline-block; vertical-align:middle }

/* Card title/subtitle block */
.title-row{ display:flex; align-items:flex-start; gap:10px; justify-content:space-between }
.card h3{ margin:0; font-size:18px; line-height:1.1 }
.card h3 .subtitle{ display:block; font-weight:600; color:var(--muted); font-size:12px; margin-top:3px }

/* Notes paragraph (deck blurb) */
.notes{ color:var(--muted); font-size:14px; margin:8px 0 10px }

/* ===== Projects page extras ===== */

/* Project card: image column + body column */
.card.project-card{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:16px; align-items:start;
}
@media (max-width:640px){
  .card.project-card{ grid-template-columns:1fr }
}

/* Project blurb paragraph */
.blurb{ color:var(--muted); font-size:14px; margin:6px 0 10px }

/* ===== Page panel (solid surface for headers & controls) ===== */
.panel{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-md);
}
.panel + .panel{ margin-top: 12px; }

/* Make the page header sit nicely inside a panel */
.page-panel .page{ margin: 0 0 10px; }
.page-panel .page .sub{ color: var(--muted); }

/* ===== Toolbar: make the search stretch full width ===== */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.toolbar-wide .input{ flex: 1 1 100%; }          /* takes the row */
@media (min-width: 720px){
  .toolbar-wide .input{ flex: 1 1 0%; }          /* grows, leaves room for Clear */
}
.toolbar .btn{ align-self: stretch; }

/* Optional: solid-looking control surface inside a panel */
.input-solid{
  background: var(--card);
  border-color: rgba(255,255,255,.12);
}

/* ===== Solid surfaces (no translucency) ===== */
.solid-surface{
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--shadow-md);
}

/* Search input: solid */
.input-solid{
  background: var(--card) !important;         /* override any rgba() glass */
  border-color: rgba(255,255,255,.16) !important;
}

/* Solid chips in the page header panel */
.page-panel .chip,
.solid-chip{
  background: var(--card) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

/* Solid “ghost” button in the panel (e.g., Clear) */
.page-panel .btn.ghost,
.solid-ghost-btn.btn.ghost{
  background: var(--card) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--text) !important;
}

/* Toolbar stretch: already added earlier, but keep for completeness */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.toolbar-wide .input{ flex: 1 1 100%; }
@media (min-width: 720px){
  .toolbar-wide .input{ flex: 1 1 0%; }
}

/* ===== Projects page: layout & spacing ===== */
.card.project-card{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:16px; align-items:start;
}
@media (max-width:640px){
  .card.project-card{ grid-template-columns:1fr }
}

/* Title spacing tweaks */
.project-title{ margin:0; font-size:18px; line-height:1.15; }
.project-title-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.project-title .subtitle{
  display:block; font-weight:600; color:var(--muted);
  font-size:12px; margin-top:4px;
}

/* Meta & tags spacing */
.project-meta, .project-tags{
  display:flex; flex-wrap:wrap; gap:10px;
}
.meta .meta-item{ color:var(--muted); font-size:12px }

/* ===== Thumbs: 16:9 by default ===== */
.thumbwrap{ position:relative; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  overflow:hidden; background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.thumbwrap-169{ aspect-ratio:16/9; }
.thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.fallback{
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:42px; letter-spacing:-.02em; color:var(--muted);
}

/* Icon/logo fit: auto-switch to contain & pad the image; give the frame a solidish surface */
.thumbwrap.iconish{
  background: var(--card);
  border-color: rgba(255,255,255,.12);
}
.thumb.icon{
  object-fit:contain; padding:12px; width:100%; height:100%;
}

/* ===== Solid surfaces for header/search (shared with MTG) ===== */
.solid-surface{
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--shadow-md);
}
.input-solid{
  background: var(--card) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.page-panel .btn.ghost,
.solid-ghost-btn.btn.ghost{
  background: var(--card) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--text) !important;
}
.page-panel .chip,
.solid-chip{
  background: var(--card) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

/* Toolbar stretch (if not already present) */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.toolbar-wide .input{ flex: 1 1 100%; }
@media (min-width: 720px){
  .toolbar-wide .input{ flex: 1 1 0%; }
}

/* Sticky footer layout */
html, body { height: 100%; }

body {
  /* Fill viewport; dvh fixes mobile address-bar jump */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Your content wrapper already used on all pages */
.app-layer {
  flex: 1 0 auto;          /* take remaining height */
  display: flex;
  flex-direction: column;
  min-height: 0;            /* prevent overflow issues */
}

/* Let the main content stretch (optional but nice) */
.app-layer > main {
  flex: 1 0 auto;
}

/* Footer sits at the end of the column and stays above bg video */
body > footer {
  position: relative;
  z-index: 1;
  margin-top: auto;         /* push footer to bottom if short page */
  background: var(--card);
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  padding: 16px 0;
}

/* Optional: make footer text align with your container width */
body > footer .container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.project-card .pill {
    margin-top: 10px;
}

/** Deck Stats Page styles: **/

.page-panel { margin-bottom: 22px; }
    .analyzer-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:22px 16px; }
    .an-card{ grid-column:span 6; }
    @media (max-width:900px){ .an-card{ grid-column:span 12; } }

    .textarea{ width:100%; min-height:200px; resize:vertical; }
    .inline-hint{ font-size:12px; color:var(--muted); }

    .flex-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
    .pill.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

    .chart{ width:100%; height:240px; }
    .legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; align-items:center; }
    .pip-label{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); padding:4px 8px; border-radius:999px; font-size:12px; }
    .ms{ width:18px; height:18px; display:inline-block; vertical-align:middle; }

    .list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; }
    .list li{ display:flex; justify-content:space-between; gap:12px; }
    .list .count{ color:var(--muted); font-size:12px; }

    details.cmdr-edit summary{ cursor:pointer; color:var(--accent); }
    .cmdr-sections{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:12px; }
    .cmdr-col{ grid-column: span 6; }
    @media (max-width:900px){ .cmdr-col{ grid-column: span 12; } }
    .cmdr-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
    .cmdr-item{ display:flex; gap:10px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.05); }
    .cmdr-item .ci{ display:flex; gap:6px; margin-left:auto; }

    .warn{ color:#ffb4b4; }
    .good{ color:#b9f5c8; }

    .panel.page-panel.solid-surface { padding-top: 18px; padding-bottom: 18px; }
    .toolbar-wide .input{ flex: 1 1 100%; }
    @media (min-width: 900px){ .toolbar-wide .input{ flex: 1 1 0%; } }

    /* Controls under textarea (buttons + sim settings) */
    .controls-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; align-items:center; }
    .controls-row .btn{ margin-right:6px; }
    .control{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
    .control select, .control input[type="checkbox"]{ accent-color: var(--accent); }

    /* Spinner */
    .spinner{ display:inline-flex; align-items:center; gap:10px; }
    .spinner[hidden]{ display:none; }
    .spin-dot{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color: transparent; animation:spin 0.8s linear infinite; }
    @keyframes spin{ to{ transform:rotate(360deg) } }

    /* Probability grid */
    .prob-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; }
    .prob{ grid-column: span 6; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
    .prob.big{ grid-column: span 12; }
    .prob .label{ display:flex; align-items:center; gap:8px; }
    .prob .value{ display:flex; align-items:baseline; gap:8px; }

    /* Extra spacing below the color-access title */
    .an-card h3.mb-tight{ margin-bottom: 10px; }
    /** END: Deck Stats Page styles: **/

    /* ===== Blog Post Styles ===== */

    /* ===== Blog Post: full-width article card ===== */
    .card.blog-post{
      /* override the default .card span */
      grid-column: 1 / -1 !important;
      display: block !important;
      width: 100%;
      padding: 28px;
      border-radius: var(--radius-md);
      background: var(--card);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow-md);
      line-height: 1.6;
      font-size: 16px;
    }

    /* If you accidentally leave the post inside a .grid, make sure it spans fully */
    .grid > .card.blog-post{ grid-column: 1 / -1 !important; }

    /* Guardrail: if a post still has project-card on it, neutralize its two-column grid */
    .card.blog-post.project-card{
      display: block !important;
      grid-template-columns: none !important;
    }

    /* Post content */
    .blog-post .body{ max-width: none; }

    /* Headings/paragraphs/images/code spacing in posts */
    .blog-post h2{ font-size: 20px; margin: 28px 0 12px; font-weight: 700; }
    .blog-post p{ margin: 0 0 18px; }
    .blog-post .notes{ color: var(--muted); font-size: 15px; margin-bottom: 18px; }
    .blog-post img{ max-width: 100%; border-radius: var(--radius-sm); margin: 18px 0; box-shadow: var(--shadow-sm); }
    .blog-post pre{
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius-sm);
      padding: 14px; font-size: 14px; overflow-x: auto; margin: 18px 0;
    }
    .blog-post code{ background: rgba(255,255,255,.08); padding: 2px 5px; border-radius: 4px; font-size: 14px; }
    .blog-post ul, .blog-post ol{ padding-left: 24px; margin: 0 0 18px; }
    .blog-post li{ margin-bottom: 6px; }
    .blog-footer-nav{ display: flex; gap: 12px; margin-top: 30px; }

    /* ===== Blog Post Styles End ===== */

    /* Cosmic WebGL background layer */
    .void-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: radial-gradient(circle at top, #020617 0%, #000 75%, #020617 100%);
    }

    .void-bg-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Make sure your content is above the background */
    .app-layer {
      position: relative;
      z-index: 1;
    }