/* =========================================================
   SVGNest — MakeArmy True-Gray Theme (final teal version)
   - Neutral gray UI with Teal accents (#20C5B5)
   - Fixed #svgnest top spacing (removed giant gap)
   - Restores !important on SVG stroke/fill so uploaded parts display correctly
   - Accent is consistent across links, buttons, tooltips, selection, progress
   ========================================================= */

:root{
  /* Neutral grayscale foundation */
  --bg: #0e0e0e;        /* page background (near-black) */
  --bg-2: #1a1a1a;      /* panels / cards / buttons */
  --bg-3: #121212;      /* bins / work areas */
  --text: #e0e0e0;      /* primary text */
  --muted: #a0a0a0;     /* secondary text */
  --border: #2a2a2a;    /* subtle borders */
  --shadow: rgba(0,0,0,0.40);

  /* Teal accent */
  --accent: #20C5B5;    /* primary accent */
  --accent-2: #1aa397;  /* darker hover/active */

  /* True-grays (replace any previous blues) */
  --gray-1: #f0f0f0;    /* headings, light text */
  --gray-2: #cccccc;    /* subheadings */
  --gray-3: #888888;    /* lines / subtle emphasis */
  --gray-4: #555555;    /* secondary fills */
}

/* ===== Base ===== */
html, body{
  margin: 0;
  padding: 0;
  border: 0;
  font: normal 22px/1.4 'LatoLatinWeb', helvetica, arial, verdana, sans-serif;
  background-color: var(--bg);
  color: var(--muted);
}

a{
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover{
  color: var(--accent-2);
  text-decoration: underline;
}

h1{
  font-size: 1.5em;
  font-family: 'LatoLatinWebLight', helvetica, arial, verdana, sans-serif;
  font-weight: normal;
  margin: 1.5em 0 0.5em 0;
  color: var(--gray-1);
}
h2{
  font-size: 1.1em;
  font-weight: bold;
  margin: 0 0 0.5em 0;
  color: var(--gray-2);
}
h3{
  font-size: 1em;
  font-weight: bold;
  margin: 1em 0 0.2em 0;
  color: var(--gray-2);
}

/* ===== Splash ===== */
#splash{
  width: 28em;
  margin: 8% auto 0 auto;
}
#splash .logo{
  width: 50%;
  margin: 0 0 0 25%;
  height: auto;
}
#splash h1{ color: var(--accent); }
#splash h1.title{
  font-size: 3.5em;
  margin: 0;
  padding: 0;
  text-align: center;
}
.subscript{ font-size: 0.75em; }
#splash .subscript{
  display: block;
  color: var(--accent);
  font-size: 1.45em;
  text-align: center;
  font-style: normal;
}

/* ===== Nav + Buttons ===== */
.nav{ margin: 0; padding: 0; }
li{ list-style: none; float: left; margin: 0; padding: 0; }

.button{
  display: block;
  margin: 0 0.5em;
  padding: 0.6em 2.4em;
  background-color: var(--bg-2);
  border-radius: 5em;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
  transition: color .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.button a:hover{ text-decoration: none; }

.button.start{
  background: var(--bg-2) url(img/start.svg) no-repeat 1.8em 50% / 1.4em 1.4em;
  padding-left: 3.7em;
}
.button.spinner{
  background: var(--bg-2) url(img/spin.svg) no-repeat 1.8em 50% / 1.4em 1.4em;
  padding-left: 3.7em;
}
.button.upload{
  background: var(--bg-2) url(img/upload.svg) no-repeat 2.2em 50% / 1em 1em;
  padding-left: 4em;
}
.button.download{
  background: var(--bg-2) url(img/download.svg) no-repeat 2.2em 50% / 1em 1em;
  padding-left: 4em;
}
.button.code{
  background: var(--bg-2) url(img/code.svg) no-repeat 2em 50% / 1.2em 1.2em;
  padding-left: 3.9em;
}
.button.config{
  background: var(--bg-2) url(img/settings.svg) no-repeat 2em 50% / 1.2em 1.2em;
  padding-left: 3.9em;
}
.button.close{
  background: var(--bg-2) url(img/close.svg) no-repeat 1.8em 50% / 2em 2em;
  padding-left: 3.9em;
}
.button.zoomin{ background: var(--bg-2) url(img/zoomin.svg) no-repeat 50% 50% / 1.5em 1.5em; }
.button.zoomout{ background: var(--bg-2) url(img/zoomout.svg) no-repeat 50% 50% / 1.5em 1.5em; }
.button.exit{ background: var(--bg-2) url(img/close.svg) no-repeat 50% 50% / 1.5em 1.5em; }

.button:hover{
  color: var(--accent-2);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  text-decoration: none;
}
.button:active{
  background-color: #1f1f1f;
  border-color: var(--accent-2);
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.35);
}
.button.disabled{
  cursor: default; opacity: 0.5; color: #999;
  -webkit-filter: saturate(0); filter: saturate(0);
}
.button.disabled:hover{ box-shadow: none; border-color: var(--border); }
.button.disabled:active{ background-color: var(--bg-2); box-shadow: none; }

#splash .nav{ float: left; width: 150%; margin: 4em 0 0 -20%; }
#faq{ display: none; float: left; margin-top: 2em; padding-bottom: 5em; }

/* ===== SVGNest layout ===== */
#svgnest, #messagewrapper{ width: 72em; }

/* FIXED: smaller, responsive top spacing (replaces 9em) */
#svgnest{
  display: none;
  margin: clamp(1rem, 3vh, 2.5rem) auto 0 auto;
}

#svgnest .logo, #svgnest .sidebar{ float: left; width: 22%; margin-right: 8%; }
#svgnest .sidebar h1{ font-size: 3em; color: var(--text); }
#svgnest .sidebar{ clear: both; width: 100%; margin-top: 3em; }

#svgnest .nav{ float: left; margin: 0 0 0 -0.5em; padding: 0; }
#controls{ margin-top: 0.5em; float: left; position: relative; }

/* ===== Info sidebar ===== */
#info, #info_placement{ display: none; }
h1.label{
  font-size: 4em; margin: 0.2em 0 0 0; padding: 0;
  line-height: 1; font-weight: normal; color: var(--text);
}
h1.label sup{ font-size: 0.5em; }
.column{ margin: 0.5em 4em 2em 0; float: left; }

/* ===== Progress ===== */
.progress{
  width: 51%;
  clear: both;
  height: 1.2em;
  background-color: var(--bg-2);
  border: 1px solid var(--accent);          /* accent border */
  border-radius: 1em;
  margin-bottom: 0.4em;
}
.progress_inner{
  height: 100%;
  background-color: var(--accent);          /* accent fill */
  border-radius: 1em;
}

/* ===== Config panel ===== */
#config{
  max-height: 0;
  overflow: hidden;
  width: 20em;
  position: absolute;
  top: 0;
  left: 24.5em;
  background-color: var(--bg-2);
  border-radius: 0.5em;
  transition: max-height 0.5s;
  box-shadow: 0 2px 8px var(--shadow);
}
#configwrapper{ float: left; padding: 3em 0 1em 2em; }
#config.active{ display: block; max-height: 50em; }
#configbutton{ position: relative; z-index: 2; width: 3em; padding: 0; height: 2.5em; background-position: 50%; }
#zoominbutton, #zoomoutbutton, #exitbutton{ width: 3em; padding: 0; height: 2.5em; background-position: 50%; }
#configbutton.close:hover{ box-shadow: none; }
#configsave{ margin-left: 7%; }

#config input, #config h3, #config .tooltip{ margin: 1em 0 0 0; height: 2em; padding: 0; }
#config input{
  float: left; width: 13%; font-size: 1em;
  border: 1px solid var(--accent);
  color: var(--text);
  background: #141414;
  text-align: center; clear: left; border-radius: 0.4em;
  transition: border-color .15s ease, background-color .15s ease;
}
#config input:hover{ background-color: #181818; border-color: var(--accent-2); }
#config input.checkbox{ width: 7%; margin-left: 4%; margin-right: 4%; border: 1px solid var(--border); }
#config h3{ float: left; width: 65%; margin-left: 5%; padding: 0; font-size: 0.8em; line-height: 3em; color: var(--muted); }
#config .tooltip{
  float: left; max-width: 15%; width: 1.5em; height: 1.5em;
  font-size: 0.8em; font-weight: bold; background-color: var(--accent);
  color: #fff; text-align: center; line-height: 1.5; margin-top: 1.8em;
  cursor: default; border-radius: 3em;
}
#config .button{ float: left; clear: both; margin-top: 2em; }

/* ===== SVG areas ===== */
#select{ margin-top: 2em; }
#select, #bins{ float: left; width: 69%; position: relative; }

#select svg, #bins svg{
  width: 100%; height: auto; position: absolute; top: 0;
  margin: 0; display: block; overflow: visible; pointer-events: none;
}

/* Selection strokes (use accent; override uploaded inline styles) */
#select svg *{
  fill: #fff !important;
  fill-opacity: 0 !important;
  stroke: var(--accent) !important;
  stroke-width: 2px !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linejoin: round !important;
  pointer-events: fill !important;
}
#select svg *.fullRect{
  fill: #1b1b1b !important;
  fill-opacity: 1 !important;
  stroke: #1b1b1b !important;
  stroke-width: 2px !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linejoin: round !important;
}
#select svg *:hover{ stroke: var(--accent-2) !important; cursor: pointer !important; }
#select svg *.active{ stroke: var(--accent-2) !important; stroke-width: 3px !important; }
#select.disabled svg *, #select.disabled svg *:hover, #select.disabled svg *.active{
  stroke: #6b6b6b !important; stroke-width: 2px !important; cursor: default !important;
}

/* Bins (neutral grays) */
#bins svg{ margin-bottom: 2em; }
#bins svg.grid{ float: left; width: 45%; margin-right: 5%; min-width: 20em; }
#bins svg *{
  fill: var(--gray-4) !important;
  stroke: var(--gray-3) !important;
  stroke-width: 2px !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linejoin: round !important;
}
#bins svg .bin{ fill: var(--bg-3) !important; stroke: var(--gray-4) !important; }
#bins svg .hole{ fill: var(--bg) !important;   stroke: var(--gray-3) !important; }

/* ===== Messages ===== */
#messagewrapper{
  width: 50em; overflow: hidden;
  background: var(--gray-4) url(img/close.svg) no-repeat 99% 0.5em / 3em 3em;
  line-height: 4em;
  position: fixed; left: 50%; margin-left: -25em; bottom: 1em;
  text-align: center; border-radius: 0.5em; color: #fff;
  box-shadow: 0 6px 24px var(--shadow);
  border-left: 4px solid var(--accent);    /* subtle accent marker */
}
#messagewrapper:hover{ background-color: #666; border-left-color: var(--accent-2); }
#message{ overflow: hidden; height: 0; }
#message.active, #message.error{ height: 4em; cursor: pointer; }
#message.error{ color: #ff314e; font-weight: bold; }

/* ===== Animations (kept intact) ===== */
.animated{
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes bounce{
  from,20%,53%,80%,to{
    -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }
  40%,43%{
    -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
    -webkit-transform: translate3d(0,-30px,0);
            transform: translate3d(0,-30px,0);
  }
  70%{
    -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
    -webkit-transform: translate3d(0,-15px,0);
            transform: translate3d(0,-15px,0);
  }
  90%{
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}
@keyframes bounce{
  from,20%,53%,80%,to{
    animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }
  40%,43%{
    animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
    -webkit-transform: translate3d(0,-30px,0);
            transform: translate3d(0,-30px,0);
  }
  70%{
    animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
    -webkit-transform: translate3d(0,-15px,0);
            transform: translate3d(0,-15px,0);
  }
  90%{
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}
.bounce{
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
@-webkit-keyframes slideInUp{
  from{
    -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
    visibility: visible;
  }
  to{
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }
}
@keyframes slideInUp{
  from{
    -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
    visibility: visible;
  }
  to{
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }
}
.slideInUp{
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

/* ===== Responsive ===== */
@media only screen and (max-width: 1800px){
  body { font-size: 20px; }
  #svgnest, #messagewrapper{ width: 60em; }
  .progress{ width: 61%; }
}

@media only screen and (max-width: 1500px){
  body { font-size: 16px; }

  #svgnest, #messagewrapper{ width: 50em; }
  /* replaces old 5em top margin */
  #svgnest{ margin-top: clamp(0.75rem, 2vh, 1.5rem); }

  #svgnest .logo{ width: 25%; }
  #controls{ margin-top: 0.75em; }

  #splash .logo{ width: 60%; margin: 0 20%; }
  #splash h1.title{ margin: 0; font-size: 2em; }
  #splash .subscript{ font-size: 1em; }

  h1.label{ font-size: 3em; }
  .progress{ width: 75%; }
}

@media only screen and (max-width: 1300px){
  body { font-size: 14px; }
}

@media only screen and (max-width: 790px){
  #splash{ width: 100%; }
  #splash .logo{ width: 40%; margin-left: 30%; float: left; }
  #splash h1.title{ margin: 0; font-size: 2em; }
  #splash .subscript{ font-size: 1em; }
  body { font-size: 18px; }

  #splash .nav{ width: 60%; margin-left: 20%; margin-top: 2em; }
  #splash .nav li{ float: none; display: block; margin-top: 1em; }

  #faq{ padding: 3em; }
}

/* ===== MakeArmy splash nav & buttons — one-row, mono font, less rounded ===== */

/* use Hack sitewide */
html, body {
  font-family: "Hack", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* kill the old float hack and center as a single flex row */
#splash .nav {
  /* override old: float:left; width:150%; margin: 4em 0 0 -20%; */
  float: none;
  width: auto;
  margin: 3rem auto 0 auto;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  /* keep them on one line on wide screens */
  flex-wrap: nowrap;
  gap: 18px;
}

/* list items no longer float */
#splash .nav li {
  list-style: none;
  float: none;
}

/* button shape: slimmer, less rounded, mono font keeps line-height crisp */
#splash .nav .button {
  border-radius: 12px;          /* was pill; now closer to your other UI */
  padding: 0.55em 1.2em;        /* a bit tighter so all fit in one row */
  font-size: 0.95em;
  line-height: 1.2;
  white-space: nowrap;          /* prevent label wrapping */
}

/* keep left padding for icon-capable buttons (no icon on Back is fine) */
#splash .nav .button.start    { padding-left: 3.7em; }
#splash .nav .button.spinner  { padding-left: 3.7em; }
#splash .nav .button.upload   { padding-left: 4em;   }
#splash .nav .button.download { padding-left: 4em;   }
#splash .nav .button.code     { padding-left: 3.9em; }
#splash .nav .button.config   { padding-left: 3.9em; }
#splash .nav .button.close    { padding-left: 3.9em; }

/* ensure the standalone Back button visually matches height/shape */
#splash .nav .button.back {
  /* no extra left padding (no icon), but same height/roundedness */
}

/* responsive fallback: allow wrapping only on truly narrow screens */
@media (max-width: 860px) {
  #splash .nav {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}


/* ===== Splash buttons: sharp corners, no icons, one row ===== */

/* one-line row stays the same */
#splash .nav{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; gap:14px;           /* you can nudge this if you need space */
  margin:3rem auto 0; padding:0; width:auto; float:none;
}

/* kill legacy floats */
#splash .nav li{ list-style:none; float:none; }

/* sharper buttons + uniform padding */
#splash .nav .button{
  border-radius:6px;                    /* sharper (not quite square) */
  padding:0.55em 1.2em;                 /* same for all buttons */
  font-size:0.95em;
  line-height:1.2;
  white-space:nowrap;
}

/* nuke all icon pseudo-elements from the splash row */
#splash .nav .button::before{ display:none !important; }

/* remove the old “extra left padding for icons” */
#splash .nav .button.start,
#splash .nav .button.spinner,
#splash .nav .button.upload,
#splash .nav .button.download,
#splash .nav .button.code,
#splash .nav .button.config,
#splash .nav .button.close{
  padding:0.55em 1.2em;
}

/* responsive: only wrap on narrow screens */
@media (max-width: 860px){
  #splash .nav{ flex-wrap:wrap; row-gap:12px; }
}

/* ===== Powered-by footer on splash ===== */
#poweredby{
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 72ch;
}
#poweredby a{
  color: var(--accent);
  text-decoration: underline;
}
#poweredby a:hover{ color: var(--accent-2); }



/* Restore icon backgrounds for app controls (non-splash) */
.button.start{    background: #1a1a1a url(img/start.svg) no-repeat 1.8em 50%; background-size: 1.4em 1.4em; padding-left: 3.7em; }
.button.spinner{  background: #1a1a1a url(img/spin.svg) no-repeat 1.8em 50%;  background-size: 1.4em 1.4em; padding-left: 3.7em; }
.button.upload{   background: #1a1a1a url(img/upload.svg) no-repeat 2.2em 50%; background-size: 1em 1em;   padding-left: 4em;   }
.button.download{ background: #1a1a1a url(img/download.svg) no-repeat 2.2em 50%; background-size: 1em 1em;   padding-left: 4em;   }
.button.code{     background: #1a1a1a url(img/code.svg) no-repeat 2em 50%;     background-size: 1.2em 1.2em; padding-left: 3.9em; }
.button.config{   background: #1a1a1a url(img/settings.svg) no-repeat 2em 50%; background-size: 1.2em 1.2em; padding-left: 3.9em; }
.button.close{    background: #1a1a1a url(img/close.svg) no-repeat 1.8em 50%;  background-size: 2em 2em;     padding-left: 3.9em; }
.button.zoomin{   background: #1a1a1a url(img/zoomin.svg) no-repeat 50% 50%;   background-size: 1.5em 1.5em; }
.button.zoomout{  background: #1a1a1a url(img/zoomout.svg) no-repeat 50% 50%;  background-size: 1.5em 1.5em; }
.button.exit{     background: #1a1a1a url(img/close.svg) no-repeat 50% 50%;    background-size: 1.5em 1.5em; }



/* Keep splash narrow; stretch only its nav/footer for centering */
#splash{ width:28em; margin:8% auto 0 auto; }
#splash .logo{ max-width: 220px; width: 50%; margin: 0 0 0 25%; height:auto; display:block; }
#splash .nav, #poweredby{ width:100%; text-align:center; }



/* --- Splash page buttons override: text-only, no icons --- */
#splash .nav .button {
  border-radius: 6px;
  padding: 0.55em 1.2em;
  font-size: 0.95em;
  line-height: 1.2;
  white-space: nowrap;

  background-image: none !important;
  padding-left: 1.2em !important; /* uniform spacing */
}

/* --- FINAL stacking: toolbar above panel; both above SVGs --- */
#svgnest { position: relative; }

/* SVG layers lowest */
#select, #bins { position: relative; z-index: 0; }
#select svg, #bins svg { position: absolute; z-index: 0; }

/* Toolbar must beat the panel so the gear/X is clickable */
#controls { position: relative; z-index: 1000 !important; }

/* Panel above drawings but below toolbar */
#config   { position: absolute; z-index: 900 !important; pointer-events: auto; }

/* Toast always on top */
#messagewrapper { position: fixed; z-index: 99999 !important; }


/* === FINAL STACKING ORDER (toolbar above panel; both above SVGs) === */
#svgnest { position: relative; }

/* SVG canvases lowest */
#select, #bins { position: relative; z-index: 0; }
#select svg, #bins svg { position: absolute; z-index: 0; }

/* Toolbar wins over panel so the gear/X can always be clicked */
#controls { position: relative; z-index: 1000 !important; }

/* Panel overlays drawings but stays below toolbar */
#config { position: absolute; z-index: 900 !important; pointer-events: auto; }

/* Toast message on top of everything */
#messagewrapper { position: fixed; z-index: 99999 !important; }

/* Panel should NOT intercept clicks when closed */
#config:not(.active) {
pointer-events: none;           /* let clicks pass through */
}

/* Keep toolbar reliably above the panel when open */
#controls { position: relative; z-index: 1000 !important; }
#controls .button { position: relative; z-index: 1001; }

/* Panel above drawings but below toolbar */
#config { position: absolute; z-index: 900 !important; }