@import url("https://fonts.googleapis.com/css2\
?family=Inter:wght@400;500;600\
&family=IBM+Plex+Sans:wght@300;400;500;600;700\
&family=IBM+Plex+Mono:wght@300;400;500;600;700\
&display=swap");

/* ───────────────────────────────────────────────
   0.  GLOBAL FONT TOKENS
   ─────────────────────────────────────────────── */
:root{
  /* swap families here and every panel updates */
  --pl-body-font: "Inter", "IBM Plex Sans", system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* mono family for your numeric column */
  --pl-mono-font: "IBM Plex Mono", Menlo, Consolas, monospace;
}

main { position: absolute; top: 100px; left: 100px; }
body {
  margin: 0;
  padding: 0;
  background-color: black;
}

canvas {
  display: block;
}

/*Make dat gui panel unselectable so it doesent get selected during mouse drag*/
#gui {  
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
a {color: white;
}
a:link {
  text-decoration: none;
}

#footerleft {
  font-family: "Inter", sans-serif;
  position: absolute;
  display: block;
  width: 100%;
  font-size: 70%;
  bottom: 3px;
  left: 5px;
  z-index: 1000;
  color: #f2f5f0;
  font-size: 0.6em;
  opacity: 0.4;
  text-align: left;
  text-decoration: none;
  position: fixed;
} 

#footerright {
  font-family: "Inter", sans-serif;
  position: absolute;
  display: block;
  width: 100%;
  font-size: 70%;
  bottom: 3px;
  right: 5px;
  z-index: 1000;
  color: #f2f5f0;
  font-size: 0.6em;
  opacity: 0.4;
  text-align: right;
  text-decoration: none;
  position: fixed;
} 

.highlight-perihelion input[type="text"] {
  background: none !important;
  border: none !important;
  color: grey !important;
  font-weight: bold !important;
  text-align: right !important;
  pointer-events: none !important;
}

.dg {
  z-index: 10 !important;
}

/* 1) Hide the native checkbox visuals */
.dg li .c input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 32px;
  height: 16px;
  background: #ccc;
  border-radius: 8px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* 2) The “knob” */
.dg li .c input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: left 0.2s ease;
}

/* 3) Checked state */
.dg li .c input[type="checkbox"]:checked {
  background: #4caf50;
}

.dg li .c input[type="checkbox"]:checked::after {
  left: 18px;
}

/* first reset the default on everything */
.dg li .c {
  overflow: visible !important;
}
/* then only clamp the boolean rows */
.dg li.cr.boolean .c {
  overflow: hidden;
}

.star-label {
  position: absolute;      /* our CSS2DRenderer will handle top/left */
  transform: translate(-50%, -120%); /* center + lift above */
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  font-family: 'Open Sans' !important;
  font-size: 12px;
  font-weight: 500;
  color: grey !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

#guiWidthToggle {
  position:fixed;                  /* follow the viewport */
  width:26px;                      /* finger target */
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font:13px/1 sans-serif;
  color:#fff;
  background:rgba(0,0,0,.35);
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  z-index:1000;                    /* above the canvas & GUI */
}

/* ==========================================================
   TOP-LEFT “PLANET INFO” PANEL
   ========================================================== */

/* ───────────────────────────────────────────────
   1.  ROOT WRAPPER   (#planetLabel)
   ─────────────────────────────────────────────── */
#planetLabel{
  /* geometry / layout */
  position:fixed;
  inset:0 auto 0 0;           /* top:0; right:auto; bottom:0; left:0 */
  width:33.333vw;             /* one-third of the viewport           */
  height:100vh;
  transform:none !important;
  overflow:hidden;            /* clip anything outside the drawer    */
  display:none;
  z-index:9999;

  /* design-tokens (can be overridden by themes) */
  --planet-info-font-size:13px;
  --panel-bg     : rgba(20,24,30,.80);
  --panel-border : rgba(255,255,255,.15);
}

/* per-planet colour themes (override 2 CSS variables) */
#planetLabel.theme-earth   { --panel-bg:rgba( 46,100,190,.58); --panel-border:rgba( 46,100,190,.28); }
#planetLabel.theme-moon    { --panel-bg:rgba(120,120,120,.58); --panel-border:rgba(255,255,255,.28); }
#planetLabel.theme-mercury { --panel-bg:rgba(110,110,110,.58); --panel-border:rgba(255,255,255,.28); }
#planetLabel.theme-venus   { --panel-bg:rgba(213,171, 55,.58); --panel-border:rgba(213,171, 55,.28); }
#planetLabel.theme-mars    { --panel-bg:rgba(176, 58, 46,.58); --panel-border:rgba(176, 58, 46,.28); }
#planetLabel.theme-jupiter { --panel-bg:rgba(201,126, 79,.58); --panel-border:rgba(201,126, 79,.28); }
#planetLabel.theme-saturn  { --panel-bg:rgba(217,182, 92,.58); --panel-border:rgba(217,182, 92,.28); }
#planetLabel.theme-uranus  { --panel-bg:rgba( 55,198,208,.58); --panel-border:rgba( 55,198,208,.28); }
#planetLabel.theme-neptune { --panel-bg:rgba( 44, 83,158,.58); --panel-border:rgba( 44, 83,158,.28); }
#planetLabel.theme-pluto   { --panel-bg:rgba(201,178,154,.58); --panel-border:rgba(201,178,154,.28); } 
#planetLabel.theme-halleys { --panel-bg:rgba(158,203,255,.58); --panel-border:rgba(158,203,255,.28); } 
#planetLabel.theme-eros    { --panel-bg:rgba(142,128,116,.58); --panel-border:rgba(142,128,116,.28); } 
#planetLabel.theme-sun     { --panel-bg:rgba(255,174,  0,.60); --panel-border:rgba(255,174,  0,.30); }

/* drawer slide-in effect (optional) */
#planetLabel[style*="display: block"]{
  animation:pl-slide 320ms cubic-bezier(.25,.8,.25,1);
}
@keyframes pl-slide{
  from{ transform:translateX(-100%); opacity:0; }
  to  { transform:none;            opacity:1; }
}

/* ───────────────────────────────────────────────
   2.  GLASS PANEL BODY   (.labelContent)
   ─────────────────────────────────────────────── */
#planetLabel .labelContent{
  /* full-size glass card */
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:14px 18px 16px;
  box-sizing:border-box;

  /* frosted look */
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  backdrop-filter:blur(6px);
  border-radius:0;            /* flush with drawer edges */
  box-shadow:0 6px 18px rgba(0,0,0,.35);

  /* Typography tokens */
  color:#eee;
  font:var(--planet-info-font-size)/1.1 var(--pl-body-font);
}

/* ───── close (×) button ───── */
#planetLabel .closeBtn{
  position:absolute; top:8px; right:12px;
  width:20px; height:20px; cursor:pointer; 
  user-select:none; opacity:.8;
  transition:opacity .15s, transform .3s cubic-bezier(.34,1.56,.64,1);

  /* center the pseudo lines */
  display:flex; align-items:center; justify-content:center;
}
#planetLabel .closeBtn:hover{
  opacity:1; transform:rotate(180deg);
}

/* draw the two bars */
#planetLabel .closeBtn::before,
#planetLabel .closeBtn::after{
  content:''; position:absolute;
  width:2px; height:18px; background:#fff;
  border-radius:1px;
}
#planetLabel .closeBtn::before{ transform:rotate(45deg); }
#planetLabel .closeBtn::after { transform:rotate(-45deg); }

/* ───────────────────────────────────────────────
   3.  HEADER ZONE (title + intro + image)
   ─────────────────────────────────────────────── */
.pl-title{
  display:flex; align-items:center; gap:.35em;
  margin:0 0 .65em;
  font:600 1.15em/1.1 inherit;
  letter-spacing:.02em;
  text-shadow:0 0 3px rgba(0,0,0,.35);
  color:#fff;
}
.pl-symbol{ font-size:1.35em; line-height:1; opacity:.9; }
.pl-name  { font-variant:small-caps; }

.pl-intro{ margin:.5em 0 1em; line-height:1.3; }
.pl-img{
  width:100%; max-height:28vh; object-fit:cover;
  border-radius:8px; margin:0 0 1em;
}

/* ───────────────────────────────────────────────
   4.  SCROLLABLE DATA ZONE
   ─────────────────────────────────────────────── */
#planetLabel .labelBody{
  /* let it grow or shrink vertically so the data zone can scroll */
  flex:1 1 auto;
  min-height:0;

  /* column layout so header / intro / image / scrollBox stack vertically */
  display:flex;
  flex-direction:column;

  /* NO overflow here – only the .scrollBox scrolls */
}

/* 1.  THE *ONLY* SCROLLABLE AREA
      ------------------------------------------------------- */
.scrollBox{
  flex:1 1 auto;      /* fill remaining height                     */
  min-height:0;       /* let it shrink when the grid is taller     */
  min-width:0;        /* ← KEY: allows grid to shrink horizontally */
  overflow:auto;      /* vertical + horizontal scrollbars          */
  overscroll-behavior:contain;
  padding-right:6px;  /* leave room for the vertical scrollbar     */
  max-width:100%;
}

/* keep your existing thumb colours … */
.scrollBox::-webkit-scrollbar{ width:6px; }
.scrollBox::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);
  border-radius:3px;
}
#planetLabel.theme-mars .scrollBox::-webkit-scrollbar-thumb{
  background:rgba(176,58,46,.4);
}

/* ───────────────────────────────────────────────
   5.  3-COLUMN GRID
   ─────────────────────────────────────────────── */
.pl-grid{
  display:grid;
  column-gap:.75em; row-gap:.3em;
  align-items:center;
  min-width:100%;                      /* prevents width jump */
}

/* zebra stripes (apply to each row’s 3 spans) */
.pl-grid span:nth-child(6n+1),
.pl-grid span:nth-child(6n+2),
.pl-grid span:nth-child(6n+3){
  background:rgba(255,255,255,.03);
}

/* cell roles */
.pl-key, .pl-val, .pl-alt{
  font:inherit;
  font-variant-numeric:tabular-nums;
}
.pl-key{ white-space:nowrap; text-align:left; }

/* NEW → mono family for aligned numbers */
.pl-val{
  text-align:right;
  font-family:var(--pl-mono-font);
}
.pl-alt{ text-align:left;  opacity:.9; }

/* header row + blank row helpers */
.pl-head{ grid-column:1/-1; text-align:center; font-weight:600; padding:.2em 0; }
.pl-blank{ height:.6em; }

/* info-tip icon */
.pl-info{ margin-right:.25em; text-decoration:none; opacity:.8; cursor:help; }
.pl-info:hover{ opacity:1; }

/* ─── emphasis helpers inside value cells ─── */
.pl-val strong, .pl-alt strong{ font-weight:600; color:#fff; }
.pl-val em,     .pl-alt em    { font-style:italic; opacity:.9; }
.pl-val small,  .pl-alt small { font-size:.85em;   opacity:.85; }

/* rare utility if you need it */
.smallcaps{ font-variant:small-caps; }