@charset "utf-8";
    :root {
      --bg-light: #eee;
      --bg-white: #fff;
      --bg-tooltip: #ffffcc;
      --border-gray: gray;
    }

    /* Global layout constraint to ensure Header, Assembler, and Footer match widths */
    .container {
      margin: 0 auto;
      max-width: 1400px;
      width: 100%;
      box-sizing: border-box;
    }

    #assembler {
      min-height: 750px;
      border: 1px var(--border-gray) solid;
      padding: 1em;
      background-color: var(--bg-light);
      box-sizing: border-box;
    }

    footer {
      padding: 1.5em 0;
      border-top: 1px solid var(--border-gray);
      margin-top: 20px;
      font-size: 0.9em;
      text-align: center;
    }
      
    /* Mobile-first stacked layout */
    .panes-container {
        min-width: 0; overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 8px;
    }

    .pane {
      width: 100%; 
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
/* Buttons at the tops of the panes */
      
.button-area {
    flex-direction: column;
    gap: 20px; /* Adds space between tables when stacked */
  }
  /* Ensures tables take up the full width when stacked */
  .form-left, 
  .form-right {
    width: 100%;
  }

form       { display: table; border: none; max-width: 95%}
form p     { display: table-row; border: 1px solid red; }
form .td   { display: table-cell; padding: 4px; vertical-align: middle}
    
img.help {
      cursor: help;
      display: block;
      vertical-align: middle;
      position: relative; top: 0;
}
      
    .pane input[type="button"]:active, #assembler input[type="button"]:active {
      transform: scale(0.97);        /* Subtle click depression effect */
    }
      
 /*   .button-area {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    } */
      
    #objArea, #src {
      width: 100%;
      overflow-x: auto;
      height: 620px;
      background-color: var(--bg-white);
      border: 2px solid var(--border-gray);
      box-sizing: border-box;
      padding: 1.5rem;
      font-family: 'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace';
      font-size: 90%;
    }

    #objArea {
      overflow-x: auto; /* was:hidden; */
      overflow-y: auto;
      white-space: pre; 
         width: 100%; min-width: 0;
    }

    #src {
      resize: none;
      overflow-x: auto;
      white-space: pre;
    }
#printable {visibility: hidden; /* changed by @media print */
        max-height: 0;
    }
    /* ********************** Desktop layout switch ************************** */
 @media (min-width: 768px) {
      .desktop {display: inline;}
      .mobile {display: none;}
      .panes-container {
        flex-direction: row;
      }
      .pane {
        width: 650px;
        max-width: 100%;
        flex: 1;
      }
     #objArea {
         overflow-x: auto;
     }
form  {display: table; border: none; max-width: 45%;}
 .button-area {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap; /* Ensures wrapping behavior if container gets too small */
      width: 100%;
    }
}

 @media print {
  body * {
      visibility: hidden;
  }
  #assembler {display: none;}  /* These have height poperties and will print blank pages */
  #main {display: none;}
  #printable * {
    visibility: visible;
    text-wrap-mode: wrap;
    font-family: 'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace';
    font-size: 90%;
	position: absolute;
    left: 0;
    top: 0;
  }
} /* @media: print */