/* Shared screen layout only. Server PDF templates deliberately do not load this file. */
/* Blue flowing brand banner. Keep the original header height and app offsets. */
.topbar {
  isolation:isolate;
  background:#eaf4fa;
  border-bottom:1px solid #b8d5e5;
  box-shadow:0 2px 10px rgba(20,25,32,.06);
}
.topbar::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:url("brand-header.svg?v=20261006-blue1") center/100% 100% no-repeat;
  pointer-events:none;
}
.topbar .brand {
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-shrink:0;
  color:#123b52;
  letter-spacing:0;
  white-space:nowrap;
}
.brand-wordmark {
  font-family:"Arial Black","Segoe UI",sans-serif;
  font-size:29px;
  font-weight:900;
  font-style:italic;
  letter-spacing:-.045em;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
}
.brand-descriptor {font-size:20px;font-weight:600;letter-spacing:.08em}
.topbar .account {min-width:0;max-width:45%;color:#35596c;flex-wrap:wrap;justify-content:flex-end}
.topbar .account > span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}
.topbar .account a {color:#1d6388;white-space:nowrap}
@media (max-width:480px) {
  .topbar {padding:0 12px;gap:8px}
  .topbar .brand {gap:6px}
  .brand-wordmark {font-size:23px}
  .brand-descriptor {font-size:15px;letter-spacing:.03em}
  .topbar .account {font-size:12px;gap:5px;max-width:38%}
  .topbar .account > span {max-width:10ch}
}
#column-form > .section:first-child > .grid {
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:16px;
  align-items:start;
}
#column-form > .section:first-child > .grid > label {
  min-width:0;
}
#column-form > .section:first-child > .grid > label sub {
  line-height:0;
}
#material-selects {
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:12px;
  align-items:start;
}
#material-selects > label {
  display:grid;
  grid-template-rows:36px 42px auto;
  min-width:0;
  font-size:13px;
  line-height:18px;
}
#material-selects select {
  min-width:0;
  width:100%;
  margin-top:0;
  padding:0 7px;
  font-size:12px;
  text-overflow:ellipsis;
}
#material-selects .custom-dimensions {
  min-width:0;
  margin-top:7px;
}
.beam-checks .check-breakdown {
  font-size:14px;
  line-height:1.7;
}
@media (max-width:800px) {
  #column-form > .section:first-child > .grid {
    grid-template-columns:1fr;
    grid-auto-flow:row;
    grid-auto-columns:auto;
  }
  #material-selects {
    grid-template-columns:1fr;
    grid-auto-flow:row;
    grid-auto-columns:auto;
  }
  #material-selects > label {
    grid-template-rows:auto 42px auto;
    row-gap:7px;
  }
}
.topbar a.brand {text-decoration:none;color:inherit;cursor:pointer}
.topbar a.brand:focus-visible {outline:2px solid #176b9d;outline-offset:5px;border-radius:4px}