/* By + Copyright Greg Abbott 2024-2025. V 2025_0227 */
:root{
  color-scheme: light dark;
  --light:hsl(60, 25%, 95%);
  --dark:hsl(15, 5%, 10%);
  --base_x1:15px;
  --half_base_x1:calc(var(--base_x1) * .5);
  --bg:light-dark(var(--light),var(--dark));
  --fg:light-dark(var(--dark),var(--light));
  --border: 1px solid var(--fg);
  --line_height:130%;
  --border-radius:3px;
}
.hide {
  display: none !important;
}
* {
  background-color: var(--bg);
  color: var(--fg);
  font-size: 15px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  resize: none;
  outline: none;
}
pre {
  white-space: pre-wrap;
}
[popover]{
z-index: 9999999;
left: 50%;
padding: 1ch;
top:2ch;
width: 64ch;
max-width: 90dvw;
border-radius: 3px;
transform: translateX(-50%);
background-color: var(--bg);
}
p{
  margin-bottom: 1em;
}
body:has(:popover-open){
      #hide_popover{display: block;}
    }
    #hide_popover{
      position: fixed;
      display: none;
      top: 0;
      left: 0;
      margin: 0;
      height: 100dvh;
      width: 100dvw;
      background-color: var(--dark);
      opacity: .5;
    }
html,
body{
width:100dvw;
height:100dvh;
max-width:100dvw;
max-height: 100dvh;
background-color: var(--bg);
color: var(--fg);
}
body {
display: flex;
flex-direction: column;
font-family: system-ui,sans-serif;
}
header {
  text-align: center;
  padding: 1ch 1ch 0;
  line-height: 100%;
 /*border-bottom: var(--border);*/
}
main {
  flex:1;
  display: flex;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  flex-direction: column;
  width: 100dvw;
  padding: 1ch 1ch 1ch calc(1ch + 1em);
  /*&> div {
  }*/
  #column {
    width: 64ch;
    max-width: 100%;
    margin: 0 auto;
  }
  label,
  button {
    display: block;
  }
  button {
  background-color:var(--fg);
  color: var(--bg);
  border: none;
  line-height: 3ch;
  min-height: 3ch;
  margin-bottom: 1ch;
}
  button,input,textarea{
    width: 100%;
  }
}
footer{
  padding: .5ch 0;
    text-align: center;
    button {
      color: var(--fg);
      padding: 2px;
      background: transparent;
      border: var(--border);
      border-color: transparent;
      &:hover {
        border-color: var(--border);
      }
    }
  }
footer,footer  *{
  font-size: 10px;
}
button,input,textarea{
  border: 1px solid var(--fg);
  border-radius: var(--border-radius);
}
input {
  padding: 1ch;
}
details {
  border: 1px solid var(--fg);
  padding: 1ch;
}
textarea{
  width: 100%;
  border-radius: var(--border-radius);
  padding: 1ch;
}
field{
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fg);
  overflow: hidden;
  padding: 0ch;
  margin: 0 0 1ch;
  label {
    border-bottom: 1px dashed var(--fg);
    padding: .5ch 1ch;
    line-height: 100%;
  }
  input {
    border: none;
  }
}
img {
  align-self: center;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 300px;
  image-rendering: pixelated;
}
::-webkit-scrollbar {
width: 1em;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  cursor: default;
  border: var(--border);
}
#pieces { 
  display: flex;
  flex-direction: row;
  gap: 1ch;
  height: 32ch;
  margin-bottom: 1ch;
  & > *{
    border-radius: var(--border-radius);
    align-content: center;
    text-align: center;
    width: 50%;
    height: 100%;
    padding: 1ch;
    border: var(--border);
    display: flex;
    flex-direction: column;
  }
}
#default_zip_area,
#custom_message_holder {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  textarea{
    flex-grow: 1;
  }
}