@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro|Chewy|Tangerine');

/*----------------------------------------------
  CSS Settings For HTML On PTAU.dk
  font-family: 'Chewy', cursive;
  font-family: 'Anonymous Pro', monospace;
  font-family: 'Tangerine', serif;
  Copyright © 2025 BIT_on_Tech™ 
  Simplified Tech of Tomorrow • bitveil.dk
-----------------------------------------------*/

/*──────────────────────────────────────────────────
  1) RESET
──────────────────────────────────────────────────*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*──────────────────────────────────────────────────
  2) VARIABLER
──────────────────────────────────────────────────*/
:root {
  /* Baggrund & tekst */
  --ptau-background:    #101418;
  --ptau-text-color:    #e0e4e8;
  --ptau-text-shadow:   #484848;
  /* Tema-accents */
  --ptau-theme-light:   #e0e4e8;
  --ptau-theme-dark:    #484848;
  /* Dropzone */
  --dz-bg:              rgba(0,204,153,0.1);
  --dz-border:          var(--ptau-theme-light);
  --dz-hover-bg:        rgba(0,163,122,0.15);
}

/*──────────────────────────────────────────────────
  3) BASE & TYPOGRAFI
──────────────────────────────────────────────────*/
html { height:100%; width:100%; }
body {
  min-height:100vh;
  font-family:'Chewy', cursive;
  font-size:1rem;
  color:var(--ptau-text-color);
  background:var(--ptau-background);
  text-align:center;
}

/* Overskrifter */
h1,h2,h3,h4 {
  text-shadow:0.08em 0.08em 0.08em var(--ptau-text-shadow);
  color:var(--ptau-theme-light);
  margin:0.08rem;
}
h1{font-size:1.88em} h2{font-size:1.44em} h3{font-size:1.20em} h4{font-size:1.00em}

/* Links */
a {
  display:inline-block;
  font-size:1.2em;
  margin-bottom:4px;
}
a:link,a:visited{color:var(--ptau-theme-light);transition:color .2s}
a:hover,a:active{color:var(--ptau-theme-dark)}

/*──────────────────────────────────────────────────
  4) TABLES GENERELT
──────────────────────────────────────────────────*/
table {
  width:100%;
  margin:auto;
  border-collapse:collapse;
}

/*──────────────────────────────────────────────────
  5) PAGE WRAPPER & BORDER-BOX
──────────────────────────────────────────────────*/
.ptau-page-wrap {
  margin:0 auto;
  width:400px;
}
.ptau-border-box {
  margin:auto  ;
  margin-bottom:1em;
  padding:0.2em;
  border:0.15em solid var(--ptau-theme-light);
  border-radius:0.8em;
  text-align:center;
  min-width:280px;
  max-width:384px;
  width:96vw;
}

/* To kolonner ved store skærme */
@media screen and (min-width:800px) and (min-aspect-ratio:1/1) {
  .ptau-page-wrap{width:800px}
  .ptau-border-box {
    display:inline-block;
    width:calc(50% - 1em);
    vertical-align:top;
  }
}
/* Title‐variant */
.ptau-border-box-title { padding-top:0.4em }

/* Tabeller inde i border‐box */
.ptau-border-box table {
  table-layout:fixed;
  width:100%;
  /* GENERELT DEFAULT – IKKE ÆNDRES! */
  --col1-w:50%;
  --col2-w:50%;
}
.ptau-border-box td {
  padding:0.3em;
  vertical-align:middle;
}
.ptau-border-box td:first-child {
  width:var(--col1-w);
  text-align:center;
}
.ptau-border-box td:nth-child(2) {
  width:var(--col2-w);
  text-align:left;
}
.ptau-border-box td:first-child input.css-number {
  max-width: 3em; /* eller hvad du nu vil ændre */
}

/* JSON-bokse */
.ptau-border-box-left-json {
  margin:auto;
  padding:0.4em 0.2em;
  border:0.15em solid var(--ptau-theme-light);
  border-radius:2em;
  min-width:280px;
  max-width:400px;
  text-align:left;
}

/* Meddelelser */
.message   { font-size:1.2em; color:var(--ptau-theme-light) }
.error     { font-size:1.5em; color:red }
.passed    { font-size:1.5em; color:#00b33c }

/* Data‐output */
.dataout {
  font-family:'Anonymous Pro',monospace;
  font-size:80%;
  margin:0.5em 0.1em 0.2em;
  text-align:center;
  font-weight:bold;
  color:#000;
  word-wrap:break-word;
  overflow-wrap:break-word;
  word-break:break-all;
  white-space:pre-wrap;
  overflow:hidden;
  box-sizing:border-box;
}

/* Pretty‐overskrift */
.pretty {
  font-family:'Tangerine',serif;
  font-size:2.4em;
  text-align:center;
  color:#000;
}

/* Footer */
.footer {
  max-width:400px;
  margin:-1em auto;
  font-size:0.88em;
  text-shadow:0.08em 0.08em 0.04em var(--ptau-text-shadow);
  color:var(--ptau-theme-light);
  white-space:nowrap;
  overflow-x:auto;
}

/* Buttons */
.mybutton {
  font-size:1.2em;
  padding:0.1em 0.2em;
  margin:0.1em 0.1em 0.5em;
  background:var(--ptau-theme-light);
  color:#fff;
  border:2px solid var(--ptau-theme-light);
  border-radius:0.4em;
  cursor:pointer;
  transition:background .2s;
}
.mybutton:hover,
.mybutton:active { background:var(--ptau-theme-dark) }

/* Input‐felter */
input {
  font-size:1.2em;
  padding:0.2em 0.4em;
  margin:0.2em;
  border:0.1em solid var(--ptau-theme-light);
  border-radius:0.4em;
}
input[type=text],
input[type=password],
input[type=number],
input[type=time],
input[type=tel] {
  color:var(--ptau-theme-light);
  width:fill-available;
}

/*──────────────────────────────────────────────────
  6) CSS-CHECKBOX (toggle)
──────────────────────────────────────────────────*/
/* Skjul selve checkbox’en */
input[type="checkbox"].css-checkbox {
  position:absolute; left:-9999px;
}
/* Label som switch-container */
input[type="checkbox"].css-checkbox + label.css-checkbox-label {
  display:inline-block;
  position:relative;
  padding-left:2.4em;
  line-height:1.2em;
  vertical-align:middle;
  cursor:pointer;
  font-family:'Chewy',cursive;
  font-size:1.2em;
  color:var(--ptau-theme-light);
}
/* Track (baggrund) */
input[type="checkbox"].css-checkbox + label.css-checkbox-label::before {
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1.8em; height:0.8em;
  background:#333;
  border-radius:0.8em;
  transition:background-color .25s ease;
}
/* Knob (cirkel) */
input[type="checkbox"].css-checkbox + label.css-checkbox-label::after {
  content:"";
  position:absolute;
  left:0.1em; top:50%;
  transform:translateY(-50%);
  width:0.6em; height:0.6em;
  background:#fff;
  border-radius:50%;
  transition:transform .25s ease;
}
/* Checked-state */
input[type="checkbox"].css-checkbox:checked + label.css-checkbox-label::before {
  background:var(--ptau-theme-light);
}
input[type="checkbox"].css-checkbox:checked + label.css-checkbox-label::after {
  transform:translate(1em, -50%);
}

/*──────────────────────────────────────────────────
  7) GRID til input+label i ÉN celle
──────────────────────────────────────────────────*/
.checkbox-grid {
  display:grid;
  grid-template-columns: var(--col1-w) var(--col2-w);
  align-items:center;
}
.checkbox-grid input.css-number,
.checkbox-grid input.css-checkbox {
  justify-self:center;
}
.checkbox-grid label {
  justify-self:start;
}