/* static/solar-system/style.css */

/* =====================================================
   Stage + Canvas
===================================================== */
.solar-stage{
  position: relative;
  min-height: 100vh;
  z-index: 100;                 /* above .bg */
  overflow: hidden;
}

/* The WebGL canvas container */
#solar-canvas-wrap{
  position: absolute;
  inset: 0;
}

/* Slight vignette */
.solar-stage::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.35) 100%);
}

/* =====================================================
   HUD
===================================================== */
.solar-hud{
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  z-index: 100;
  pointer-events: none; /* let canvas get mouse events, enable on inner cards */
}

.solar-hud .hud-card{
  pointer-events: auto;
  background: rgba(10, 14, 22, 0.40);
  border: 1px solid rgba(120,180,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 40px rgba(3,6,12,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  overflow: hidden;
  position: relative;
  z-index: 1000;
}

.solar-hud .hud-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(80,160,255,0.22),
    rgba(160,90,255,0.22),
    rgba(255,110,200,0.18)
  );
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: 16px;
  padding: 2px;
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.hud-inner{
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-title{
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #e9f7ff;
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.9;
}

.hud-spacer{ flex: 1; }

/* Small controls */
.hud-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: #cfe7ff;
  opacity: 0.9;
}
.hud-toggle input{
  width: 16px;
  height: 16px;
}

/* =====================================================
   Side panel (focus / info / controls)
===================================================== */
.solar-panel{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 280px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  z-index: 1000;
  background: linear-gradient(
    180deg,
    rgba(18, 22, 45, 0.92),
    rgba(10, 12, 28, 0.92)
  );

  border: 1px solid rgba(120, 140, 255, 0.25);
  border-radius: 10px;

  padding: 14px 16px;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05) inset;

  backdrop-filter: blur(10px);
  margin: 5% 0.75% 0 0;
}

.solar-panel p{
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-line;
  color: #cfd6ff;
}

.solar-panel .panel-body{
  padding: 14px;
}

.panel-heading{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.panel-heading h2{
  font-size: 14px;
  letter-spacing: .4px;
  color: #e9f7ff;
}

.panel-meta{
  font-size: 12px;
  color: #cfe7ff;
  opacity: 0.8;
  line-height: 1.35;
}

/* Actions under focus UI — LEFT aligned */
.panel-actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  justify-content: flex-start; /* ⬅ left */
  flex-wrap: wrap;
}
.panel-actions .btn{
  width: auto;
}

/* =====================================================
   Planet labels (HTML overlay)
===================================================== */
.planet-label{
  position: absolute;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  background: rgba(15, 20, 35, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(130, 160, 255, 0.25);
  border-radius: 6px;

  color: #e9ecff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 6px 14px rgba(0,0,0,0.45);

  pointer-events: auto;
  cursor: pointer;
  user-select: none;

  transform: translate(-50%, -140%);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

.planet-label:hover,
.planet-label:focus-visible{
  background: rgba(35, 45, 80, 0.85);
  border-color: rgba(140, 170, 255, 0.6);
  transform: translate(-50%, -160%) scale(1.05);
  outline: none;
}

/* Hide labels cleanly */
.planet-label[style*="display: none"]{
  pointer-events: none;
}

/* Planet labels always on top of moons */
.planet-label.kind-planet{ z-index: 2; }
.planet-label.kind-moon{   z-index: 1; }

/* =====================================================
   Accessibility
===================================================== */
:focus-visible{
  outline: 2px solid rgba(140, 170, 255, 0.7);
  outline-offset: 2px;
}

/* =====================================================
   Modals
===================================================== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index: 1000;
  pointer-events: auto;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  pointer-events: auto;
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.modal__panel{
  position:relative;
  width:min(720px, calc(100vw - 36px));
  max-height: min(80vh, 760px);
  overflow:auto;
  margin: 10vh auto 0;
  border-radius:16px;
  background:rgba(10,14,22,0.88);
  border:1px solid rgba(120,180,255,0.12);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px) saturate(130%);
  pointer-events: auto;
}
.modal__panel--wide{
  width:min(920px, calc(100vw - 32px));
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-bottom:1px solid rgba(120,180,255,0.10);
}

.modal__title{
  font-weight:850;
  letter-spacing:.3px;
}

.modal__body{
  padding:14px 14px 16px;
  font-size:13px;
  color:#e6f0ff;
  opacity:.95;
  line-height:1.55;
}
.modal__body ul{
  margin:8px 0 0 18px;
}

.hud-note{
  font-size:12px;
  opacity:.75;
}

/* =====================================================
   FAB stack + Disclaimer button
===================================================== */
.fab-stack{
  position:fixed;
  left:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
}

.disclaimer-fab{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(140,200,255,0.18);
  background:rgba(10,12,16,0.55);
  color:#eaf6ff;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(80,140,255,0.14);
  font-size:18px;
  display:grid;
  place-items:center;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.disclaimer-fab:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(120,160,255,0.22);
  border-color:rgba(180,120,255,0.28);
}

/* =====================================================
   Journal block (side panel)
===================================================== */
.journal-block{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(120,180,255,0.10);
}

.journal-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.journal-title{
  font-size:12px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:#e9f7ff;
  opacity:.95;
  font-weight:800;
}

.journal-status{
  font-size:12px;
  color:#cfe7ff;
  opacity:.75;
  white-space:nowrap;
}

.journal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.journal-item{
  padding:10px 10px;
  border-radius:10px;
  background:rgba(10,14,22,0.35);
  border:1px solid rgba(120,180,255,0.10);
}

.journal-item__title{
  font-size:13px;
  font-weight:800;
  color:#e9ecff;
  margin-bottom:4px;
}

.journal-item__meta{
  font-size:12px;
  opacity:.75;
  color:#cfe7ff;
  margin-bottom:6px;
}

.journal-item__body{
  font-size:13px;
  line-height:1.35;
  color:#cfd6ff;
  white-space:pre-line;
}

.journal-empty{
  font-size:12px;
  opacity:.75;
  color:#cfe7ff;
  padding:8px 0;
}

/* Journal items clickable */
.journal-item--btn{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.journal-item--btn:focus{
  outline:2px solid rgba(120,180,255,0.35);
  outline-offset:2px;
  border-radius:12px;
}

/* Modal journal list tweaks */
.journal-list--modal .journal-item{
  padding:12px 12px;
}

/* Journal entry view */
.journal-entry__meta{
  font-size:12px;
  opacity:.85;
  white-space:pre-wrap;
  margin-bottom:12px;
}
.journal-entry__body{
  white-space:pre-wrap;
  line-height:1.45;
}
.journal-entry__snap{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  background:rgba(10,16,24,0.55);
  border:1px solid rgba(120,180,255,0.10);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  white-space:pre-wrap;
  overflow:auto;
  max-height:240px;
}
.journal-entry__images{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.journal-img{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(120,180,255,0.10);
  background:rgba(0,0,0,0.18);
}
.journal-img img{
  display:block;
  width:100%;
  height:120px;
  object-fit:cover;
}

/* Journal editor form */
.journal-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.journal-form__row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.journal-form__label{
  font-size:12px;
  color:#cfe7ff;
  opacity:.9;
}
.journal-form__input,
.journal-form__textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(120,180,255,0.14);
  background:rgba(10,16,24,0.45);
  color:#eaf4ff;
  padding:10px 12px;
  font-size:14px;
}
.journal-form__textarea{
  resize:vertical;
  min-height:140px;
}
.journal-form__hint{
  font-size:12px;
  opacity:.75;
}
.journal-form__context{
  font-size:12px;
  opacity:.9;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(120,180,255,0.12);
  background:rgba(10,16,24,0.35);
  display:inline-block;
  width:fit-content;
}
.journal-form__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

/* =====================================================
   Mobile layout (single, unified ruleset)
===================================================== */
@media (max-width: 820px){

  :root{
    --safe-b: env(safe-area-inset-bottom, 0px);
    --pad: 12px;     /* outer padding */
    --fab-h: 52px;   /* approx height of FAB row */
    --fab-gap: 12px; /* space between panel and FAB row */
  }

  /* HUD becomes single column */
  .solar-hud{
    grid-template-columns: 1fr;
  }

  /* Use real visible viewport on mobile (browser bars) */
  .solar-stage{
    min-height: 100dvh;
  }

  /* Panel = bottom sheet above FAB row */
  .solar-panel{
    margin: 0;

    left: var(--pad);
    right: var(--pad);
    top: auto;
    width: auto;

    bottom: calc(var(--pad) + var(--safe-b) + var(--fab-h) + var(--fab-gap));

    max-height: calc(
      100dvh
      - var(--pad)
      - (var(--pad) + var(--safe-b) + var(--fab-h) + var(--fab-gap))
    );

    border-radius: 16px;
    padding: 0;
    overflow: hidden; /* inner scroll only */
  }

  .solar-panel .panel-body{
    padding: 12px 12px 10px;
    overflow: auto;
    max-height: 100%;
  }

  /* Reduce journal clutter on mobile: show only first 2 items */
  .journal-list .journal-item:nth-child(n+3){
    display: none;
  }

  /* Actions: LEFT aligned, not sticky */
  .panel-actions{
    position: relative;
    margin-top: 10px;
    padding: 0;
    justify-content: flex-start;
    gap: 8px;
  }
  .panel-actions .btn{
    flex: 0 0 auto;
  }

  /* FAB row becomes horizontal and hugs bottom */
  .fab-stack{
    position: fixed;
    left: var(--pad);
    right: var(--pad);
    bottom: calc(var(--pad) + var(--safe-b));

    max-width: 420px;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    z-index: 200;
  }

  /* Ensure children don’t escape with fixed positioning */
  .fab-stack > *{
    position: static;
    inset: auto;
  }
}