body {
  margin: 0 0;
}

/*────────────────────────────────────────────────────────────────────────────
  Cell & Grid Styles (flex‑based)
─────────────────────────────────────────────────────────────────────────────*/
.grid { 
  display:flex; 
  /*flex-direction: row;*/
  flex-wrap: wrap;
  gap:1rem; 
}

.grid > * { min-width: 0; }


@media (min-width: 1000px) {
  .grid > * {
    flex: 1 0 0%;
  }

  .grid.items-centered {
    align-items: center;
    justify-content: center;
  }
}

div.slogan {
  justify-content: center;
  img {
    height:75px;
  }
}

@media (max-width: 700px) {
  div.slogan {
    text-align: center;
  }
}

@media (min-width: 700px) {
  div.slogan {

    img {
      margin-left:auto;
    }
    
    h1 {
      flex:2;
      margin-right:auto;
    }
  }
}
/*
@media (max-width: 850px) {
  .grid {
    flex-direction: column;
  }
}
*/
.row  { display:flex; gap:1rem; }

.column { flex-direction:column; }

.cell {

  background:var(--cell-bg);
  border:1px solid var(--cell-border);
  padding:8px; 
  flex:1 1 0;
  display:flex; flex-direction:column;

}

.cell-content {
  flex:1; min-height:40px;
  padding:4px; border:1px solid #888;
  background:#fff; overflow:auto;
}

.cell-content.placeholder { color:#888; font-style:italic; }

.controls, .replacer-controls {
  margin-top:6px; display:flex; flex-wrap:wrap; gap:4px;
  font-size:.8em;
}

.replacer-controls input[type="file"] { flex:1 1 100%; }


/*────────────────────────────────────────────────────────────────────────────
  Cell & Grid Styles (CSS Grid)
─────────────────────────────────────────────────────────────────────────────*/
.grid_
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.container1 > section > * {

    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

@media print {
  .grid {
    display: grid;
    
    grid-template-columns: auto auto auto;
    
    /*
    grid-auto-columns: 200px;
    grid-gap: 10px;
    */
    gap: 1rem;
    align-items: start;
  }

  .container1 > section > * {

      max-width: 1123px;
      margin: 2rem auto;
      padding: 0 1rem;
  }

  .vl {
    height: 100%;
  }

}

section {
  padding: 1rem;
}

.header {
  min-height: 6.5rem;
}

.controls {
  text-align: center;
}

.phase {
  padding-left: 1.5rem;
}

.controls button{
  max-width:70px;
}

.logo {
  font-size:1.5rem;
  font-weight:700;
}

/* Basic table styling preserves semantic layout for reader mode */
table {
  width: 100%;
  border-collapse: collapse;
 /* min-width: 600px;  keeps columns from collapsing; adjust as needed */
}


.table-wrap {
  overflow-x: auto;                 /* horizontal scroll fallback on small screens */
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

form > * {
  display: block;
  background-color: transparent;
  font-size: var(--font-size-std);
  border-radius: 5px;
  outline: none;
  width: 100%;
  margin: 15px 0;
  span {  
    color: var(--text-heading-color)!important;
  }
} 

form > button {
  cursor: pointer;
}

form > input, textarea {
  border-style: solid;
}

form > textarea {
  resize: vertical;
}

form > input:focus, textarea:focus {
  border-color: var(--text-heading-color);
}

@media (min-width:1000px) {
  .contact-profile {
    text-align: center;
  }
}

.contact {
  button {
    padding: 0.35rem; 
    margin:0.35rem 0;
  }
}