.layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr); /* minmax(0,...) stops a wide card from forcing the grid track past the viewport */
  gap:22px;
  width:100%;
  max-width:1320px;
  align-items:start;
}

.sidebar{
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:14px;
  padding:16px 16px 14px;
  position:sticky;
  top:20px;
  max-height:calc(100vh - 40px); /* caps it so a sidebar taller than the viewport scrolls internally instead of running off the bottom */
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--panel-edge) transparent;
}
.sidebar::-webkit-scrollbar{width:7px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb{background:var(--panel-edge);border-radius:20px;}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}

.field{margin-bottom:11px;}
.field:last-child{margin-bottom:0;}
.field label{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}
.field .subnote{
  font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.35;
}

.row{display:flex;gap:8px;}
.row input{flex:1;min-width:0;} /* min-width:0 lets long content shrink instead of overflowing the row */

.main-col{min-width:0;}

.status-line{
  text-align:center;font-size:12px;color:var(--muted);
  margin:0 0 14px;min-height:16px; /* reserves space so nothing jumps when the text is briefly empty */
}

.nav-row{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}

.card{
  display:flex;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--panel-edge);
  background:var(--panel);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  height:min(560px, calc(100vh - 250px)); /* fixed height on tall screens, shrinks on shorter ones so it never gets cut off */
  min-height:400px;
}

.cover-wrap{
  position:relative;
  width:clamp(150px, 38%, 400px);
  flex-shrink:0;
  height:100%;
  background:var(--bg-1);
  overflow:hidden;
}

.content-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:20px 22px;
}